@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/toolbar.tsx

@@ -0,0 +1,4427 @@
+"use client";
+
+import type { Anchor, Sketch } from "../core/index.js";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type HTMLAttributes,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { captureAnchor, describeElement, elementAt, resolveInDocument } from "./capture.js";
+import {
+  adoptStoredMember,
+  finishMsfSignIn,
+  listenForMsfHandoff,
+  msfAuthorization,
+  relayMsfHandoff,
+  signInOptions,
+  type Access,
+  type SignInOptions,
+  createThread,
+  editMessage,
+  fetchTicketForm,
+  getProfile,
+  memberIsCurrent,
+  replyToThread,
+  saveSettings,
+  storageKey,
+  updateProfile,
+  updateThread,
+  uploadAttachment,
+  type Capture,
+  type CommentMessage,
+  type Delivery,
+  type Details,
+  type Member,
+  type Profile,
+  type Settings,
+  type Thread,
+  transcribeAudio,
+} from "./client.js";
+import {
+  DetailsEditor,
+  DetailsInput,
+  FieldValues,
+  KindInput,
+  RoleBadge,
+  TicketBadge,
+  SettingsPanel,
+  detailsEnabled,
+  detailsPayload,
+  hasFieldValues,
+  noDetails,
+} from "./details.js";
+import {
+  TicketFormInput,
+  missingTicketFields,
+  ticketDraftPayload,
+  type TicketForm,
+  type TicketValues,
+} from "./ticket-form.js";
+import {
+  ago,
+  colorFor,
+  deliveryText,
+  initials,
+  openPinCardSpot,
+  paintThreadStatuses,
+  statusNote,
+  targetName,
+} from "./format.js";
+import * as Icon from "./icons.js";
+import {
+  AttachButtons,
+  AttachmentTray,
+  MediaPane,
+  MessageAttachments,
+  filesFromClipboard,
+  pendingPreviews,
+  useAttachments,
+  visualAttachments,
+} from "./attachments.js";
+import { DraftDock, draftDockMode } from "./draft-dock.js";
+import {
+  createDraftStore,
+  describeDraft,
+  recoverRecording,
+  type StoredDraft,
+} from "./draft-store.js";
+import type { MarkupShape } from "./markup.js";
+import { ShotSurface, flattenCapture } from "./shot.js";
+import { uiUnit, useScreenTier } from "./ui-scale.js";
+import { RecordChrome, useTabRecording } from "./capture-ui.js";
+import { CLARITY_WORDS, readClarityMode, type ClarityMode } from "./clarity-model.js";
+import type { ReportKind } from "./kind-model.js";
+import { ClarityQuestions, useClarity } from "./clarity-ui.js";
+import { DictateButton, isDictationKey, useDictation } from "./dictation-ui.js";
+import { ResizeGrip, readComposerSize, type ComposerSize } from "./composer-size.js";
+import { RECORD_MAX_MS } from "./record.js";
+import { ReplayBuffer, redactSecretSearchParams, watchActivity } from "./replay.js";
+import type { DebugContextConfig } from "./debug-context-model.js";
+import { uploadDebugContext, useDebugContext } from "./use-debug-context.js";
+import { MentionTextarea, MessageText, mentionsIn } from "./mentions.js";
+import { useMembers } from "./members.js";
+import {
+  clampBar,
+  dockMargin,
+  dockSlop,
+  placeDock,
+  readDock,
+  snapDock,
+  type Dock,
+  type DockPoint,
+} from "./dock.js";
+import {
+  overlayBounds,
+  placeAgainst,
+  useOverlayHost,
+  usePlacement,
+  type Box,
+  type Placed,
+} from "./placement.js";
+import {
+  captureAround,
+  describeCapture,
+  shotAround,
+  shotPage,
+  takeShot,
+  type PageShot,
+} from "./screenshot.js";
+import { prewarmPageImage } from "./page-image.js";
+import {
+  INK,
+  INK_HALO,
+  elementUnder,
+  inkBox,
+  isTap,
+  pathData,
+  simplify,
+  sketchFor,
+  type Point,
+} from "./sketch.js";
+import { whenIdle } from "./idle.js";
+import { CHECK_EVERY_MS, needsSwap, onBuildAnnounced, servedBuild, swapRuntime } from "./update.js";
+import { announceNavigation, NAVIGATED, watchHost } from "./host-watch.js";
+import { isBarePath, screenAt, type Here, type ScreenRule } from "./screen.js";
+import {
+  askHost,
+  forgetSignIns,
+  readJwt,
+  sessionFor,
+  type GetSession,
+  type Session,
+} from "./session.js";
+import { shieldFromPage } from "./shield.js";
+import { useThreadsSync, type ThreadsPayload } from "./sync.js";
+import { Dashboard, type DashboardFocus, type DashboardScreen } from "./dashboard.js";
+import { MessageEditor, MessageHistory, MessageTools, isMine } from "./edits.js";
+import {
+  captureHandoff,
+  dropHandoff,
+  linkWith,
+  readHandoff,
+  stripHandoffFromUrl,
+} from "./handoff.js";
+import { loadFont } from "./font.js";
+import { injectStyles } from "./styles.js";
+
+/** The page screenshot for a new comment or reply starts when the browser is idle, or this long after at the latest. */
+const SNAPSHOT_DELAY_MS = 500;
+/** Files the service keeps on one message (`MAX_PER_MESSAGE`). */
+const MAX_FILES_PER_MESSAGE = 5;
+/** How far back the step trail reaches: the debug context's steps. */
+const DEBUG_STEPS_MS = 180_000;
+/** What "Replay" attaches: the last minute. */
+const INSTANT_REPLAY_MS = 60_000;
+/** Fonts and stylesheet assets are embedded ahead of the first screenshot, once the toolbar has settled. */
+const PREWARM_DELAY_MS = 4000;
+
+export type ToolbarPosition = "bottom-left" | "bottom-center" | "bottom-right";
+export type ToolbarTheme = "light" | "dark" | "system";
+type Mode = "browse" | "select" | "draw" | "reattach";
+type Phase = "boot" | "ready" | "off";
+type Surface = "none" | "unlock" | "dashboard";
+type Prefs = {
+  pinsHidden?: boolean;
+  position?: ToolbarPosition;
+  /** Edge the bar snapped to after a drag. Overrides `position` until a preset is chosen. */
+  dock?: Dock;
+  /** The composer's size, once someone resized it. */
+  composerSize?: ComposerSize;
+  /** Recordings carry the mic unless this is false. */
+  recordSound?: boolean;
+  /** Dictation also attaches the take as a voice file unless this is false. */
+  keepVoice?: boolean;
+};
+type BarFrame = {
+  edge: Dock["edge"];
+  side: "start" | "end";
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+captureHandoff();
+
+const prefsKey = "devaccel.comment.prefs";
+const positions: Array<{ value: ToolbarPosition; label: string }> = [
+  { value: "bottom-left", label: "Left" },
+  { value: "bottom-center", label: "Center" },
+  { value: "bottom-right", label: "Right" },
+];
+
+function readPrefs(): Prefs {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(prefsKey) ?? "{}") as Prefs & {
+      sheet?: unknown;
+      sheetMinH?: unknown;
+    };
+    // The comments side panel's saved box, from before the panel was replaced by the dashboard.
+    delete parsed.sheet;
+    delete parsed.sheetMinH;
+    const dock = readDock(parsed.dock);
+    if (dock) parsed.dock = dock;
+    else delete parsed.dock;
+    const composerSize = readComposerSize(parsed.composerSize);
+    if (composerSize) parsed.composerSize = composerSize;
+    else delete parsed.composerSize;
+    return parsed;
+  } catch {
+    return {};
+  }
+}
+
+const pinRadius = 10;
+const peekGap = 5;
+const edge = 3;
+
+function isUnset(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}
+
+function subscribeMounted() {
+  return () => {};
+}
+
+type Spot = { left: number; top: number };
+
+function useFitted<T extends HTMLElement>(place: (width: number, height: number) => Spot) {
+  const node = useRef<T | null>(null);
+  const observer = useRef<ResizeObserver | null>(null);
+  const placeRef = useRef(place);
+  useLayoutEffect(() => {
+    placeRef.current = place;
+  }, [place]);
+  const [spot, setSpot] = useState<Spot | null>(null);
+  const measure = useCallback(() => {
+    const card = node.current;
+    if (!card) return;
+    const next = placeRef.current(card.offsetWidth, card.offsetHeight);
+    setSpot((prev) => (prev && prev.left === next.left && prev.top === next.top ? prev : next));
+  }, []);
+  const ref = useCallback(
+    (card: T | null) => {
+      observer.current?.disconnect();
+      observer.current = null;
+      node.current = card;
+      if (!card) return setSpot(null);
+      if (typeof ResizeObserver !== "undefined") {
+        observer.current = new ResizeObserver(measure);
+        observer.current.observe(card);
+      }
+    },
+    [measure],
+  );
+  useLayoutEffect(measure);
+  const { left, top } = spot ?? place(0, 0);
+  return [ref, { left, top }] as const;
+}
+
+function peekSpot(
+  x: number,
+  y: number,
+  bounds: { width: number; height: number },
+  width: number,
+  height: number,
+): Spot {
+  const left = Math.max(edge, Math.min(x - width / 2, bounds.width - width - edge));
+  const below = y + pinRadius + peekGap;
+  const above = y - pinRadius - peekGap - height;
+  if (below + height <= bounds.height - edge) return { left, top: below };
+  if (above >= edge) return { left, top: above };
+  return { left, top: Math.max(edge, bounds.height - height - edge) };
+}
+
+/** The open thread sits beside its pin, clear of the toolbar. */
+function threadSpot(
+  x: number,
+  y: number,
+  bounds: { width: number; height: number },
+  width: number,
+  height: number,
+): Spot {
+  const gap = 11;
+  const reserve = 57;
+  const right = x + pinRadius + gap;
+  const leftOf = x - pinRadius - gap - width;
+  const left =
+    right + width <= bounds.width - edge
+      ? right
+      : leftOf >= edge
+        ? leftOf
+        : Math.max(edge, Math.min(right, bounds.width - width - edge));
+  const top = Math.max(edge, Math.min(y - 17, bounds.height - height - reserve));
+  return { left, top };
+}
+
+function Peek({
+  x,
+  y,
+  bounds,
+  children,
+}: {
+  x: number;
+  y: number;
+  bounds: { width: number; height: number };
+  children: ReactNode;
+}) {
+  const [ref, style] = useFitted<HTMLDivElement>((width, height) =>
+    peekSpot(x, y, bounds, width, height),
+  );
+  return (
+    <div ref={ref} className="cs-peek" data-cs-ui="peek" style={style}>
+      {children}
+    </div>
+  );
+}
+
+/** Puts the open image or video beside a card, on whichever side has more room. */
+function MediaPop({
+  bounds,
+  left,
+  top,
+  children,
+}: {
+  bounds: { width: number; height: number };
+  left: number;
+  top: number;
+  children: ReactNode;
+}) {
+  const probe = useRef<HTMLDivElement>(null);
+  const [slot, setSlot] = useState<{
+    side: "right" | "left";
+    width: number;
+    height: number;
+  } | null>(null);
+  useLayoutEffect(() => {
+    const card = probe.current?.parentElement;
+    if (!card) return;
+    const roomRight = bounds.width - (left + card.offsetWidth) - 9;
+    const roomLeft = left - 9;
+    // Both sides get the same height, so the wider one always shows more of the image or video.
+    const side = roomRight >= roomLeft ? "right" : "left";
+    const room = side === "right" ? roomRight : roomLeft;
+    const width = Math.round(Math.max(165, room));
+    const height = Math.round(Math.max(210, bounds.height - top - 12));
+    setSlot((prev) =>
+      prev && prev.side === side && prev.width === width && prev.height === height
+        ? prev
+        : { side, width, height },
+    );
+  }, [bounds.height, bounds.width, left, top]);
+  return (
+    <div
+      ref={probe}
+      className={`cs-media-pop is-${slot?.side ?? "right"}`}
+      style={slot ? { width: slot.width, height: slot.height } : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+function PinCard({
+  x,
+  y,
+  bounds,
+  label,
+  children,
+  preview,
+}: {
+  x: number;
+  y: number;
+  bounds: { width: number; height: number };
+  label: string;
+  children: ReactNode;
+  preview?: ReactNode;
+}) {
+  const [ref, style] = useFitted<HTMLElement>((width, height) =>
+    threadSpot(x, y, bounds, width, height),
+  );
+  return (
+    <section
+      ref={ref}
+      className="cs-card cs-focus cs-hit"
+      data-cs-ui="focus"
+      aria-label={label}
+      style={style}
+    >
+      {children}
+      {preview ? (
+        <MediaPop bounds={bounds} left={style.left} top={style.top}>
+          {preview}
+        </MediaPop>
+      ) : null}
+    </section>
+  );
+}
+
+type Highlight = Box & { label: string };
+
+function sameHighlight(a: Highlight | null, b: Highlight | null) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.top === b.top &&
+    a.left === b.left &&
+    a.width === b.width &&
+    a.height === b.height &&
+    a.label === b.label
+  );
+}
+
+/**
+ * The outline under the pointer while picking an element. It lives outside React state so a pointer move
+ * re-renders the two outline nodes, not the whole toolbar with its pins, cards and composer.
+ */
+function createHighlightStore() {
+  let value: Highlight | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => value,
+    set(next: Highlight | null) {
+      if (sameHighlight(value, next)) return;
+      value = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+type HighlightStore = ReturnType<typeof createHighlightStore>;
+
+function PickOutline({ store }: { store: HighlightStore }) {
+  const highlight = useSyncExternalStore(store.subscribe, store.get, store.get);
+  if (!highlight) return null;
+  return (
+    <>
+      <div
+        className="cs-outline is-hover"
+        style={{
+          transform: `translate(${highlight.left}px, ${highlight.top}px)`,
+          width: highlight.width,
+          height: highlight.height,
+        }}
+      />
+      <div
+        className="cs-outline-label is-hover"
+        style={{
+          transform: `translate(${highlight.left}px, ${Math.max(3, highlight.top - 20)}px)`,
+        }}
+      >
+        {highlight.label}
+      </div>
+    </>
+  );
+}
+
+/**
+ * A full-screen layer that takes one freehand stroke and hands it over, in viewport coordinates. The toolbar's
+ * shield stops pointerdown at the window, so the stroke is followed from window listeners on the same phase.
+ */
+function DrawLayer({ onStroke }: { onStroke: (points: Point[]) => void }) {
+  const [points, setPoints] = useState<Point[]>([]);
+  const layer = useRef<HTMLDivElement>(null);
+  const strokeDone = useRef(onStroke);
+  useEffect(() => {
+    strokeDone.current = onStroke;
+  }, [onStroke]);
+  useEffect(() => {
+    let drawing: Point[] | null = null;
+    const onDown = (event: PointerEvent) => {
+      if (event.button !== 0 || event.target !== layer.current) return;
+      event.preventDefault();
+      drawing = [{ x: event.clientX, y: event.clientY }];
+      setPoints(drawing);
+    };
+    const onMove = (event: PointerEvent) => {
+      if (!drawing) return;
+      const events = event.getCoalescedEvents?.() ?? [];
+      for (const each of events.length ? events : [event])
+        drawing.push({ x: each.clientX, y: each.clientY });
+      setPoints([...drawing]);
+    };
+    const onUp = (event: PointerEvent) => {
+      const stroke = drawing;
+      drawing = null;
+      setPoints([]);
+      if (stroke && event.type === "pointerup")
+        strokeDone.current([...stroke, { x: event.clientX, y: event.clientY }]);
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
+    };
+  }, []);
+  const line = points.length > 1 ? points.map(({ x, y }) => `${x},${y}`).join(" ") : "";
+  return (
+    <div className="cs-draw cs-hit" data-cs-ui="draw-layer" ref={layer}>
+      {line ? (
+        <svg className="cs-ink" width="100%" height="100%">
+          <polyline points={line} stroke={INK_HALO} strokeWidth={6} />
+          <polyline points={line} stroke={INK} strokeWidth={3} />
+        </svg>
+      ) : null}
+    </div>
+  );
+}
+
+/** A saved drawing, laid over the element it was stored against. */
+function SketchInk({ sketch, box, active }: { sketch: Sketch; box: Box; active?: boolean }) {
+  const d = sketch.paths.map((path) => pathData(path)).join(" ");
+  return (
+    <svg
+      className={active ? "cs-ink is-placed is-active" : "cs-ink is-placed"}
+      data-cs-ui="sketch"
+      style={{ top: box.top, left: box.left }}
+      width={1}
+      height={1}
+    >
+      <path d={d} stroke={INK_HALO} strokeWidth={6} />
+      <path d={d} stroke={INK} strokeWidth={3} />
+    </svg>
+  );
+}
+
+/** Where a new comment's composer opens: right of `box`, or left of it when there's no room. */
+function composerSpot(box: Box, host: HTMLElement) {
+  const unit = uiUnit();
+  const width = host === document.body ? window.innerWidth : host.clientWidth;
+  const composerWidth = Math.min(240 * unit, width - 12 * unit);
+  let left = box.left + box.width + 9 * unit;
+  if (left + composerWidth > width - 6 * unit) left = box.left - composerWidth - 9 * unit;
+  left = Math.max(6 * unit, Math.min(left, width - composerWidth - 6 * unit));
+  return { top: Math.max(6 * unit, box.top - 6 * unit), left };
+}
+
+/** What is wrong when the session route had the host token issued for another origin, in the service's words. */
+function tokenForOtherOrigin(issuedFor: string) {
+  return `The session was issued for ${issuedFor}, but this page is ${window.location.origin}. Update the app's session route.`;
+}
+
+/** The current page as a comment should remember it, without the toolbar's own query params. */
+function pageHref() {
+  const url = new URL(window.location.href);
+  url.searchParams.delete("cs-thread");
+  url.searchParams.delete("cs-invite");
+  redactSecretSearchParams(url);
+  const hash = url.hash.includes("cs-thread=") || url.hash.includes("cs-invite=") ? "" : url.hash;
+  return `${url.pathname}${url.search}${hash}`;
+}
+
+function isTyping(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+}
+
+/** The open composer's writing box, if there is one. */
+function composerField() {
+  return document.querySelector<HTMLTextAreaElement>('#cs-root [data-cs-ui="composer-body"]');
+}
+
+/** The open composer itself, if there is one. */
+function composerForm() {
+  return document.querySelector<HTMLFormElement>('#cs-root form[data-cs-ui="composer"]');
+}
+
+/**
+ * What a comment on the whole page is anchored to: the page's main landmark, else its first laid-out
+ * top-level element. A thread needs an element to resolve against; the page itself is not one.
+ */
+function pageAnchorElement(): Element {
+  const main = document.querySelector("main, [role='main']");
+  if (main && !main.closest("#cs-root") && main.getClientRects().length) return main;
+  for (const child of document.body.children) {
+    if (child.id === "cs-root" || child.tagName === "SCRIPT" || child.tagName === "STYLE") continue;
+    if (child.getClientRects().length) return child;
+  }
+  return document.body;
+}
+
+function fileStamp() {
+  return new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+}
+
+function submitOnCmdEnter(event: ReactKeyboardEvent<HTMLTextAreaElement>) {
+  if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+  }
+}
+
+function Avatar({ name, size = 24 }: { name: string; size?: number }) {
+  return (
+    <span
+      className="cs-avatar"
+      style={{ width: size, height: size, fontSize: size * 0.4, background: colorFor(name) }}
+    >
+      {initials(name)}
+    </span>
+  );
+}
+
+const ease = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+/** Runs a one-shot animation on `node`, unless the person asked for less motion. */
+function play(
+  node: Element | null | undefined,
+  keyframes: Keyframe[],
+  options: KeyframeAnimationOptions,
+) {
+  if (!node || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  node.animate(keyframes, options);
+}
+
+/** What a bar tool's icon does as it turns on. Turning off only fades, through CSS. */
+const moments = {
+  pop: (tool: Element) =>
+    play(
+      tool.querySelector(".cs-icon"),
+      [
+        { transform: "scale(1)" },
+        { transform: "scale(0.82)", offset: 0.35 },
+        { transform: "scale(1.1)", offset: 0.7 },
+        { transform: "scale(1)" },
+      ],
+      { duration: 320, easing: ease },
+    ),
+};
+
+/** The toolbar's single-key shortcuts, and the tool each one presses. Comment, draw, comments, and dashboard are hidden. */
+const SHORTCUTS: Record<string, string> = {
+  s: "shot-mode",
+  h: "pins-toggle",
+};
+
+/**
+ * Whether a shortcut may act on this press. `s` closes the open composer, so it stands down
+ * while it holds unsent work: a press can arrive because the box lost focus (an overlay took it back, the page was
+ * clicked), and a letter must never throw away writing. `h` only toggles pins.
+ */
+export function shortcutAllowed(key: string, draftHasWriting: boolean) {
+  if (draftHasWriting && key !== "h") return false;
+  return true;
+}
+
+/** The press a shortcut key gives its tool, so the bar shows which key did what. */
+function pressTool(bar: HTMLElement | null, ui: string) {
+  play(
+    bar?.querySelector(`.cs-tool[data-cs-ui="${ui}"]`),
+    [
+      { transform: "scale(1)" },
+      { transform: "scale(0.88)", offset: 0.35 },
+      { transform: "scale(1)" },
+    ],
+    { duration: 240, easing: ease },
+  );
+}
+
+type ToolProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+  on: boolean;
+  moment?: keyof typeof moments;
+};
+
+/** A bar button. Its icon plays `moment` each time it turns on, and its tip stays down after a press until the pointer leaves. */
+function Tool({
+  on,
+  moment = "pop",
+  className,
+  onPointerDown,
+  onPointerLeave,
+  ...props
+}: ToolProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+  const was = useRef(on);
+  useEffect(() => {
+    if (on && !was.current && ref.current) moments[moment](ref.current);
+    was.current = on;
+  }, [on, moment]);
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type="button"
+      className={["cs-tool", className, on ? "is-on" : ""].filter(Boolean).join(" ")}
+      onPointerDown={(event) => {
+        event.currentTarget.setAttribute("data-tipless", "");
+        onPointerDown?.(event);
+      }}
+      onPointerLeave={(event) => {
+        event.currentTarget.removeAttribute("data-tipless");
+        onPointerLeave?.(event);
+      }}
+    />
+  );
+}
+
+/** Tips wait a beat the first time, then show at once while the pointer moves along the bar. */
+function useWarmTips() {
+  const timer = useRef(0);
+  // allow-react-loops: spread onto one element as event handlers; nothing depends on their identity
+  return {
+    onPointerOver: (event: ReactPointerEvent<HTMLDivElement>) => {
+      const bar = event.currentTarget;
+      window.clearTimeout(timer.current);
+      if (
+        !(event.target instanceof Element) ||
+        !event.target.closest(".cs-tool") ||
+        bar.hasAttribute("data-warm")
+      )
+        return;
+      timer.current = window.setTimeout(() => bar.setAttribute("data-warm", ""), 350);
+    },
+    onPointerLeave: (event: ReactPointerEvent<HTMLDivElement>) => {
+      const bar = event.currentTarget;
+      window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => bar.removeAttribute("data-warm"), 600);
+    },
+  };
+}
+
+function dockInset(root: Element | null) {
+  return root instanceof HTMLElement && root.classList.contains("cs-inside") ? 6 : dockMargin;
+}
+
+/** The pill. A short press still clicks a tool; a longer one drags, then snaps to the nearest edge. */
+function CommentBar({
+  dock,
+  barRef,
+  onCommit,
+  onPlace,
+  children,
+  ...tips
+}: {
+  dock?: Dock;
+  barRef: { current: HTMLDivElement | null };
+  onCommit: (dock: Dock) => void;
+  onPlace: (frame: BarFrame | null) => void;
+  children: ReactNode;
+} & Pick<HTMLAttributes<HTMLDivElement>, "onPointerOver" | "onPointerLeave">) {
+  const [drag, setDrag] = useState<DockPoint | null>(null);
+  const [override, setOverride] = useState<Dock | null>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [bounds, setBounds] = useState({ width: 0, height: 0 });
+  const [margin, setMargin] = useState(dockMargin);
+  const live = useRef<DockPoint | null>(null);
+  const suppressClick = useRef(false);
+  const placeNow = useRef({
+    active: undefined as Dock | undefined,
+    drag: null as DockPoint | null,
+  });
+  const onCommitRef = useRef(onCommit);
+  const onPlaceRef = useRef(onPlace);
+  useLayoutEffect(() => {
+    onCommitRef.current = onCommit;
+    onPlaceRef.current = onPlace;
+  }, [onCommit, onPlace]);
+  const active =
+    override && dock && (override.edge !== dock.edge || override.ratio !== dock.ratio)
+      ? override
+      : dock;
+
+  if (override && (!dock || (override.edge === dock.edge && override.ratio === dock.ratio))) {
+    setOverride(null);
+  }
+
+  useLayoutEffect(() => {
+    placeNow.current = { active, drag };
+  }, [active, drag]);
+
+  useLayoutEffect(() => {
+    const node = barRef.current;
+    const root = node?.closest("#cs-root");
+    if (!node || !(root instanceof HTMLElement)) return;
+    const publish = (
+      width: number,
+      height: number,
+      nextBounds: { width: number; height: number },
+      inset: number,
+    ) => {
+      const current = placeNow.current;
+      if (!current.active) {
+        onPlaceRef.current(null);
+        return;
+      }
+      if (current.drag || width < 1 || nextBounds.width < 1) return;
+      const point = placeDock(current.active, nextBounds, { width, height }, inset);
+      onPlaceRef.current({
+        edge: current.active.edge,
+        side: point.x + width / 2 <= nextBounds.width / 2 ? "start" : "end",
+        x: point.x,
+        y: point.y,
+        width,
+        height,
+      });
+    };
+    const measure = () => {
+      const width = node.offsetWidth;
+      const height = node.offsetHeight;
+      setSize((current) =>
+        current.width === width && current.height === height ? current : { width, height },
+      );
+      const nextBounds = { width: root.clientWidth, height: root.clientHeight };
+      setBounds((current) =>
+        current.width === nextBounds.width && current.height === nextBounds.height
+          ? current
+          : nextBounds,
+      );
+      const nextMargin = dockInset(root);
+      setMargin((current) => (current === nextMargin ? current : nextMargin));
+      publish(width, height, nextBounds, nextMargin);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [barRef]);
+
+  const placed =
+    drag ??
+    (active && size.width > 0 && bounds.width > 0 ? placeDock(active, bounds, size, margin) : null);
+
+  useLayoutEffect(() => {
+    placeNow.current = { active, drag };
+    if (!active) {
+      onPlaceRef.current(null);
+      return;
+    }
+    if (drag || size.width < 1 || bounds.width < 1) return;
+    const point = placeDock(active, bounds, size, margin);
+    onPlaceRef.current({
+      edge: active.edge,
+      side: point.x + size.width / 2 <= bounds.width / 2 ? "start" : "end",
+      x: point.x,
+      y: point.y,
+      width: size.width,
+      height: size.height,
+    });
+  }, [active, bounds, drag, margin, size]);
+
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      if (!suppressClick.current) return;
+      suppressClick.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    };
+    window.addEventListener("click", onClick, true);
+    return () => window.removeEventListener("click", onClick, true);
+  }, []);
+
+  useEffect(() => {
+    let drag: {
+      start: { x: number; y: number };
+      grab: { x: number; y: number };
+      barSize: { width: number; height: number };
+      moved: boolean;
+      last: { x: number; y: number; t: number };
+      velocity: { x: number; y: number };
+      root: HTMLElement;
+    } | null = null;
+    const onDown = (event: PointerEvent) => {
+      if (event.button !== 0) return;
+      const target = event.target;
+      if (!(target instanceof Element) || !target.closest(".cs-bar")) return;
+      const node = barRef.current;
+      const root = node?.closest("#cs-root");
+      if (!node || !(root instanceof HTMLElement) || !node.contains(target)) return;
+      suppressClick.current = false;
+      const box = node.getBoundingClientRect();
+      drag = {
+        start: { x: event.clientX, y: event.clientY },
+        grab: { x: event.clientX - box.left, y: event.clientY - box.top },
+        barSize: { width: box.width, height: box.height },
+        moved: false,
+        last: { x: event.clientX, y: event.clientY, t: performance.now() },
+        velocity: { x: 0, y: 0 },
+        root,
+      };
+    };
+    const onMove = (event: PointerEvent) => {
+      if (!drag) return;
+      const now = performance.now();
+      const dt = now - drag.last.t;
+      if (dt > 0 && dt < 80) {
+        drag.velocity = {
+          x: (event.clientX - drag.last.x) / dt,
+          y: (event.clientY - drag.last.y) / dt,
+        };
+      }
+      drag.last = { x: event.clientX, y: event.clientY, t: now };
+      if (
+        !drag.moved &&
+        Math.hypot(event.clientX - drag.start.x, event.clientY - drag.start.y) <= dockSlop
+      )
+        return;
+      if (!drag.moved) drag.moved = true;
+      event.preventDefault();
+      const rootRect = drag.root.getBoundingClientRect();
+      const next = clampBar(
+        {
+          x: event.clientX - rootRect.left - drag.grab.x,
+          y: event.clientY - rootRect.top - drag.grab.y,
+        },
+        { width: drag.root.clientWidth, height: drag.root.clientHeight },
+        drag.barSize,
+      );
+      live.current = next;
+      setDrag(next);
+    };
+    const onUp = () => {
+      const activeDrag = drag;
+      drag = null;
+      if (!activeDrag?.moved || !live.current) return;
+      suppressClick.current = true;
+      const snapped = snapDock(
+        live.current,
+        activeDrag.velocity,
+        { width: activeDrag.root.clientWidth, height: activeDrag.root.clientHeight },
+        activeDrag.barSize,
+        dockInset(activeDrag.root),
+      );
+      live.current = null;
+      setDrag(null);
+      setOverride({ edge: snapped.edge, ratio: snapped.ratio });
+      onCommitRef.current({ edge: snapped.edge, ratio: snapped.ratio });
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
+    };
+  }, [barRef]);
+
+  return (
+    <div
+      {...tips}
+      ref={barRef}
+      className={["cs-bar", "cs-hit", placed ? "is-docked" : "", drag ? "is-dragging" : ""]
+        .filter(Boolean)
+        .join(" ")}
+      data-cs-ui="bar"
+      role="toolbar"
+      aria-label="Comments toolbar"
+      style={
+        placed
+          ? { left: placed.x, top: placed.y, right: "auto", bottom: "auto", transform: "none" }
+          : undefined
+      }
+    >
+      {children}
+    </div>
+  );
+}
+
+export type ToolbarProps = {
+  sessionPath?: string;
+  pollMs?: number;
+  /** Default bar position. Dragging the bar snaps it to an edge and overrides this until a preset is chosen. */
+  position?: ToolbarPosition;
+  /** "system" follows the OS appearance. Light by default so it matches most host pages. */
+  theme?: ToolbarTheme;
+  /**
+   * Opens another page of the app, for example `(href) => router.navigate({ href })`.
+   * Without it, selecting a comment from another page does a full page load.
+   */
+  navigate?: (href: string) => void;
+  /**
+   * What makes one screen of the app different from another, when the path alone does not: the query
+   * parameters that select a screen (`{ params: ["view"] }`), or a function that names the screen an address
+   * is on. Without it, every query parameter but the usual tracking, paging, sorting and filtering ones counts
+   * (`./screen.ts`). Pass the same function every render.
+   */
+  screen?: ScreenRule;
+  /**
+   * Debug context for each new comment: errors with stacks, failed and slow requests, the steps, the build,
+   * the environment and what the host knows (`getContext`), redacted in the browser and again by the service,
+   * attached as `context-<stamp>.json`. Off unless given. `true` takes the default signals; an object turns
+   * single signals on or off. Pass the same object every render or a new one: only a change of what is
+   * captured restarts it.
+   */
+  debugContext?: DebugContextConfig;
+};
+
+/** What the npm loader passes to `mount`: the host's props plus the session it already fetched. */
+export type RuntimeProps = ToolbarProps & {
+  /** Older loaders don't pass this; the toolbar then reads the session route itself. */
+  getSession?: GetSession;
+  /**
+   * Raised by the loader each time the host says its sign-in changed (`CommentTool.refresh()`): the toolbar
+   * asks the session route at once. Older loaders don't pass it; the toolbar still asks on its own.
+   */
+  hostCheck?: number;
+};
+
+/**
+ * Swaps this toolbar for the build the worker serves now, as soon as nobody is in the middle of something. The
+ * worker announces its build over the live socket when its project object starts after a deploy; the served
+ * build is also checked when the socket (re)connects, when the tab becomes visible, and every CHECK_EVERY_MS.
+ * `quiet` says the swap won't lose a draft, a reply, a recording or an edit.
+ */
+function useRuntimeUpdates(apiUrl: string | undefined, live: boolean, quiet: boolean) {
+  const [pending, setPending] = useState<string | null>(null);
+  useEffect(() => {
+    if (!apiUrl) return;
+    let stopped = false;
+    const check = async () => {
+      const served = await servedBuild(apiUrl);
+      if (!stopped && needsSwap(served)) setPending(served);
+    };
+    void check();
+    const stopListening = onBuildAnnounced((build) => {
+      if (!stopped && needsSwap(build)) setPending(build);
+    });
+    const onVisible = () => {
+      if (document.visibilityState === "visible") void check();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    const timer = window.setInterval(() => void check(), CHECK_EVERY_MS);
+    return () => {
+      stopped = true;
+      stopListening();
+      window.clearInterval(timer);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [apiUrl]);
+  useEffect(() => {
+    if (!apiUrl || !live) return;
+    let stopped = false;
+    void servedBuild(apiUrl).then((served) => {
+      if (!stopped && needsSwap(served)) setPending(served);
+    });
+    return () => {
+      stopped = true;
+    };
+  }, [apiUrl, live]);
+  useEffect(() => {
+    if (!pending || !apiUrl || !quiet) return;
+    let stopped = false;
+    // A swap that didn't happen is retried when the next check (or announcement) sets `pending` again.
+    const retryLater = () => {
+      if (!stopped) setPending(null);
+    };
+    swapRuntime(apiUrl, pending).then(
+      (swapped) => {
+        if (!swapped) retryLater();
+      },
+      (error) => {
+        // eslint-disable-next-line no-console -- the browser console is where a host page developer sees a failed toolbar swap.
+        console.warn("[comment-service] Could not switch to the newer toolbar.", error);
+        retryLater();
+      },
+    );
+    return () => {
+      stopped = true;
+    };
+  }, [apiUrl, pending, quiet]);
+}
+
+/**
+ * The toolbar for as long as the host app has someone signed in. The host's session route is asked again at the
+ * moments `watchHost` names, and the loader's answer is taken at once when it passes a new `hostCheck`. When it
+ * says nobody is signed in, every toolbar sign-in on this origin is forgotten and the toolbar leaves the page
+ * with its socket, its threads and its open composer. When someone signs in again, or the host says its
+ * sign-in changed (`hostCheck`) while comments stay on, a new toolbar starts that holds nothing of the last one.
+ * A route that fails changes nothing.
+ */
+export function ToolbarApp(props: RuntimeProps) {
+  const { getSession, sessionPath = "/api/comment-service/session", hostCheck } = props;
+  // This build's own reading of the route, whatever loader mounted it: an older loader's cannot tell a
+  // signed-out answer from a failed request.
+  const own = sessionFor(sessionPath);
+  const loaders = getSession ?? own;
+  const [on, setOn] = useState(true);
+  const [generation, setGeneration] = useState(0);
+  const checkNow = useRef<(() => void) | null>(null);
+  useEffect(() => {
+    let stopped = false;
+    let wasOn = true;
+    let serving: string | null = null;
+    /** `told`: the host said its sign-in changed, so whoever is signed in now may be someone else. */
+    const check = (told = false) => {
+      void askHost(told ? loaders : own, !told).then((answer) => {
+        if (stopped) return;
+        switch (answer.state) {
+          case "on": {
+            const { apiUrl, project, environment } = answer.session;
+            const next = `${apiUrl}\n${project}\n${environment}`;
+            // The host token does not say who is signed in: a change of person is only known when told.
+            if (told) forgetSignIns();
+            if (told || !wasOn || (serving !== null && serving !== next))
+              setGeneration((count) => count + 1);
+            serving = next;
+            wasOn = true;
+            setOn(true);
+            return;
+          }
+          case "off":
+            forgetSignIns();
+            wasOn = false;
+            setOn(false);
+            return;
+          case "unknown":
+            return;
+          default: {
+            const never: never = answer;
+            return never;
+          }
+        }
+      });
+    };
+    const watch = watchHost(() => check());
+    // The loader has just read the session route for its `refresh()`: its answer is the one kept.
+    checkNow.current = () => check(true);
+    return () => {
+      stopped = true;
+      watch.stop();
+      checkNow.current = null;
+    };
+  }, [loaders, own]);
+  const asked = useRef(hostCheck);
+  useEffect(() => {
+    if (hostCheck === asked.current) return;
+    asked.current = hostCheck;
+    checkNow.current?.();
+  }, [hostCheck]);
+  return on ? <Toolbar key={generation} {...props} /> : null;
+}
+
+function Toolbar({
+  sessionPath = "/api/comment-service/session",
+  getSession,
+  pollMs = 4000,
+  position = "bottom-center",
+  theme = "light",
+  navigate,
+  screen: screenRule,
+  debugContext,
+}: RuntimeProps) {
+  const sessions = getSession ?? sessionFor(sessionPath);
+  const [phase, setPhase] = useState<Phase>("boot");
+  const [session, setSession] = useState<Session | null>(null);
+  const [member, setMember] = useState<string | null>(null);
+  const [threads, setThreads] = useState<Thread[]>([]);
+  const [href, setHref] = useState(() => window.location.href);
+  const screenFunction = typeof screenRule === "function" ? screenRule : null;
+  const screenParams =
+    screenRule && typeof screenRule !== "function" ? JSON.stringify(screenRule.params) : null;
+  const rule = useMemo<ScreenRule | null>(
+    () =>
+      screenFunction ??
+      (screenParams === null ? null : { params: JSON.parse(screenParams) as string[] }),
+    [screenFunction, screenParams],
+  );
+  // The same object for as long as the page stays on one screen: a query that is noise (a search box writing
+  // `?q=`) does not make the pins be found again.
+  const [screenNow, setScreenNow] = useState(() => ({ rule, here: screenAt(href, rule) }));
+  useEffect(() => {
+    setScreenNow((current) => {
+      const next = screenAt(href, rule);
+      return current.rule === rule &&
+        current.here.key === next.key &&
+        current.here.route === next.route
+        ? current
+        : { rule, here: next };
+    });
+  }, [href, rule]);
+  const here: Here = screenNow.here;
+  const route = here.route;
+  const [surface, setSurface] = useState<Surface>("none");
+  const [dashboardScreen, setDashboardScreen] = useState<DashboardScreen>("insights");
+  const [dashboardFocus, setDashboardFocus] = useState<DashboardFocus | null>(null);
+  const [mode, setMode] = useState<Mode>("browse");
+  const [reattachId, setReattachId] = useState<string | null>(null);
+  const [peekId, setPeekId] = useState<string | null>(null);
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const [focusMenu, setFocusMenu] = useState(false);
+  const [preview, setPreview] = useState<{ threadId: string; fileId: string } | null>(null);
+  const [trayKey, setTrayKey] = useState<string | null>(null);
+  /**
+   * The markup editor owns the keyboard while it is open: Escape, arrows, and letters are its own. Posting waits
+   * for it too, so a message never goes out with the image the user is still drawing on.
+   */
+  const markingUp = useRef(false);
+  const [marking, setMarking] = useState(false);
+  const [focusSpot, setFocusSpot] = useState<{ id: string; x: number; y: number } | null>(null);
+  /** Status painted on click, kept until a thread list already shows it or the server rejects it. */
+  const pendingStatus = useRef(new Map<string, "open" | "resolved">());
+  const [draft, setDraft] = useState<{
+    anchor: Anchor;
+    top: number;
+    left: number;
+    element: Element;
+    /** The page the comment is filed against, when it was started elsewhere (a draft that followed the person). */
+    href?: string;
+  } | null>(null);
+  /** While a resize drags: the size it's at. Saved to prefs when the drag ends. */
+  const [resizingComposer, setResizingComposer] = useState<ComposerSize | null>(null);
+  /**
+   * A comment started from the bar's screenshot tool: the draft's page picture, by its key in the draft's files.
+   * The composer then sits beside the picture in `ShotSurface` instead of next to an element.
+   */
+  const [shot, setShot] = useState<{ key: string } | null>(null);
+  /** The page draft is minimised to the dock while it collects captures from other pages. */
+  const [collecting, setCollecting] = useState(false);
+  /** A draft found in storage (after a reload, or stashed when an element comment took over), offered in the dock. */
+  const [stored, setStored] = useState<StoredDraft | null>(null);
+  const [savedAt, setSavedAt] = useState<number | null>(null);
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+  /** Shapes drawn on each capture so far, by file key; flattened into the files when the comment is posted. */
+  const [captureShapes, setCaptureShapes] = useState<ReadonlyMap<string, MarkupShape[]>>(
+    () => new Map(),
+  );
+  const withShapes = useCallback(
+    (change: (next: Map<string, MarkupShape[]>) => void) =>
+      setCaptureShapes((current) => {
+        const next = new Map(current);
+        change(next);
+        return next;
+      }),
+    [],
+  );
+  const draftId = useRef<string | null>(null);
+  const draftCreated = useRef(0);
+  const draftScope = useMemo(() => {
+    const id = member ? readJwt(member)?.memberId : undefined;
+    if (!session || !id) return null;
+    return `${session.apiUrl}|${session.environment}|${session.project}|${id}`;
+  }, [session, member]);
+  const draftStore = useMemo(
+    () => (draftScope ? createDraftStore(draftScope) : null),
+    [draftScope],
+  );
+  const previousDraftScope = useRef<string | null>(null);
+  useEffect(() => {
+    const previous = previousDraftScope.current;
+    if (previous && previous !== draftScope) {
+      const left = createDraftStore(previous);
+      void left.clear();
+      void left.clearRecording();
+    }
+    previousDraftScope.current = draftScope;
+  }, [draftScope]);
+  useEffect(() => {
+    if (!draftStore || !member) return;
+    let stale = false;
+    // A recording that was running when the page went away is put back into its draft as a clip.
+    // The recording row stays until that merged draft is saved, so a crash here still has the take.
+    void Promise.all([draftStore.load(), draftStore.loadRecording()]).then(([found, running]) => {
+      if (stale) return;
+      if (!running || !found || running.draftId !== found.id) {
+        setStored(found);
+        return;
+      }
+      const recovered = recoverRecording(found, running);
+      void draftStore.save(recovered).then(
+        () => {
+          if (stale) return;
+          void draftStore.clearRecording();
+          setStored(recovered);
+        },
+        () => {
+          if (stale) return;
+          setStored(found);
+        },
+      );
+    });
+    return () => {
+      stale = true;
+    };
+  }, [draftStore, member]);
+  /** What happens on the page while a clip is recorded into the draft, for the replay kept beside it. */
+  const clipBuffer = useRef<ReplayBuffer | null>(null);
+  const clipWatch = useRef<(() => void) | null>(null);
+  const clipChunks = useRef<Blob[]>([]);
+  const clipStartedAt = useRef(0);
+  /** The screenshot tool is busy copying and drawing the page. */
+  const [shooting, setShooting] = useState(false);
+  const [body, setBody] = useState("");
+  const [reply, setReply] = useState("");
+  const [replyId, setReplyId] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [deliveries, setDeliveries] = useState<Record<string, Delivery>>({});
+  const [bootHandoff] = useState(() => readHandoff());
+  const [invite, setInvite] = useState<string | null>(bootHandoff?.invite ?? null);
+  const [capturing, setCapturing] = useState(false);
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const [confirmReset, setConfirmReset] = useState(false);
+  const [error, setError] = useState("");
+  const [toast, setToast] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [prefs, setPrefs] = useState<Prefs>(readPrefs);
+  const [barFrame, setBarFrame] = useState<BarFrame | null>(null);
+  const mounted = useSyncExternalStore(
+    subscribeMounted,
+    () => true,
+    () => false,
+  );
+  const [highlightStore] = useState(createHighlightStore);
+  const [flash, setFlash] = useState<Box | null>(null);
+  const [systemDark, setSystemDark] = useState(false);
+  const screen = useScreenTier();
+  const [settings, setSettings] = useState<Settings | null>(null);
+  const [draftDetails, setDraftDetails] = useState<Details>(noDetails);
+  const [draftKind, setDraftKind] = useState<ReportKind | null>(null);
+  // Testers (tagged in the project's people settings) fill the tracker's ticket form as they comment.
+  const [memberType, setMemberType] = useState<"client" | "tester" | null>(null);
+  const [ticketForm, setTicketForm] = useState<TicketForm | null>(null);
+  const [ticketFormError, setTicketFormError] = useState("");
+  const [ticketValues, setTicketValues] = useState<TicketValues>({});
+  const ticketFormLoading = useRef(false);
+  useEffect(() => {
+    if (memberType !== "tester" || !session || !member || !draft) return;
+    if (ticketForm || ticketFormLoading.current) return;
+    ticketFormLoading.current = true;
+    fetchTicketForm(session, member)
+      .then(
+        (form) => {
+          setTicketForm(form);
+          setTicketFormError("");
+        },
+        (caught: unknown) =>
+          setTicketFormError(
+            caught instanceof Error ? caught.message : "Couldn’t load the ticket form.",
+          ),
+      )
+      .finally(() => {
+        ticketFormLoading.current = false;
+      });
+  }, [memberType, session, member, draft, ticketForm]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
+  const [historyId, setHistoryId] = useState<string | null>(null);
+  const [linked, setLinked] = useState<string[]>([]);
+  const [envFilter, setEnvFilter] = useState("all");
+  const [access, setAccess] = useState<Access>("edit");
+  const [disabled, setDisabled] = useState(false);
+  const [signIn, setSignIn] = useState<SignInOptions | null>(null);
+  const [msfWaiting, setMsfWaiting] = useState(false);
+  const msfAttempt = useRef<{ state: string; verifier: string; stop: () => void } | null>(null);
+  const readOnly = access === "view";
+  const readOnlyRef = useRef(readOnly);
+  const threadsRef = useRef(threads);
+  const modeRef = useRef(mode);
+  const draftPicked = useRef(new Map<string, Member>());
+  const replyPicked = useRef(new Map<string, Member>());
+  const draftShot = useRef<Promise<string | null> | null>(null);
+  const replyShot = useRef<Promise<string | null> | null>(null);
+  /** The page as it was when the draft (or reply) opened: its screenshot and any @mention crop come from it. */
+  const draftPage = useRef<PageShot | null>(null);
+  const replyPage = useRef<PageShot | null>(null);
+  const replySnapped = useRef(false);
+  const pendingShot = useRef<{ kind: "draft" | "reply"; cancel: () => void } | null>(null);
+  const cancelScheduledSnapshot = useCallback((kind: "draft" | "reply") => {
+    if (pendingShot.current?.kind !== kind) return;
+    pendingShot.current.cancel();
+    pendingShot.current = null;
+    setCapturing(false);
+  }, []);
+  const replyDrafts = useRef(new Map<string, string>());
+  const [hasParkedReply, setHasParkedReply] = useState(false);
+  const [pendingId, setPendingId] = useState<string | null>(bootHandoff?.thread ?? null);
+  const [revealId, setRevealId] = useState<string | null>(null);
+  /** A thread to show once its page has loaded. `focus` also opens its card at the pin. */
+  const arrival = useRef<{ id: string; until: number; focus?: boolean } | null>(null);
+  const prefsRef = useRef(prefs);
+
+  const linkedEnv = useCallback(
+    (thread: Thread | undefined) =>
+      thread?.environment && session && thread.environment !== session.environment
+        ? thread.environment
+        : undefined,
+    [session],
+  );
+  /**
+   * Whether this environment checks a new comment before it is posted, from the thread list. Null until the
+   * list says so, and for good on a service that predates the check: then nothing is ever asked.
+   */
+  const [clarityMode, setClarityMode] = useState<ClarityMode | null>(null);
+  const clarity = useClarity(session, member, clarityMode);
+  const { reset: resetClarity, restore: restoreClarity } = clarity;
+  const draftFiles = useAttachments(session, member, setError);
+  const draftFileActions = useRef(draftFiles);
+  useEffect(() => {
+    draftFileActions.current = draftFiles;
+  }, [draftFiles]);
+  const replyFiles = useAttachments(
+    session,
+    member,
+    setError,
+    linkedEnv(threads.find((thread) => thread.id === replyId)),
+  );
+  const savePrefs = useCallback((next: Prefs) => {
+    setPrefs(next);
+    localStorage.setItem(prefsKey, JSON.stringify(next));
+  }, []);
+  const recording = useTabRecording(setError, prefs.recordSound !== false, (recordSound) =>
+    savePrefs({ ...prefsRef.current, recordSound }),
+  );
+  /** The box a recording was started from: "Type what I say" on the record bar writes into it. */
+  const [recordInto, setRecordInto] = useState<"draft" | "reply">("draft");
+  const recordingPhase = useRef(recording.phase);
+  useEffect(() => {
+    readOnlyRef.current = readOnly;
+    threadsRef.current = threads;
+    modeRef.current = mode;
+    prefsRef.current = prefs;
+    recordingPhase.current = recording.phase;
+  }, [mode, prefs, readOnly, recording.phase, threads]);
+  // Three minutes of steps: the debug context reads them all, the instant replay its last minute.
+  const replayBuffer = useRef(new ReplayBuffer({ windowMs: DEBUG_STEPS_MS, maxEvents: 150 }));
+  const replayOn = Boolean(member);
+  const ownApi = session?.apiUrl.replace(/\/+$/, "") ?? null;
+  const debug = useDebugContext(debugContext);
+  const debugCapture = debug.capture;
+  const startDebug = debug.start;
+  const debugKey = debug.key;
+  useEffect(() => {
+    if (!replayOn) return;
+    const stopActivity = watchActivity(
+      replayBuffer.current,
+      (url) => ownApi !== null && url.startsWith(ownApi),
+    );
+    // Started last and stopped first, so each puts back exactly the patches it made.
+    const stopDebug = ownApi !== null && debugKey !== "off" ? startDebug(ownApi) : () => {};
+    return () => {
+      stopDebug();
+      stopActivity();
+    };
+  }, [replayOn, ownApi, debugKey, startDebug]);
+  const drafting = draft !== null;
+  useEffect(() => {
+    if (drafting) debugCapture.current?.mark();
+  }, [debugCapture, drafting]);
+  const resetReplyFiles = replyFiles.reset;
+  useEffect(() => {
+    const switching = replyId;
+    cancelScheduledSnapshot("reply");
+    resetReplyFiles();
+    if (switching === replyId) {
+      replySnapped.current = false;
+      replyPicked.current = new Map();
+      replyShot.current = null;
+      replyPage.current = null;
+    }
+  }, [cancelScheduledSnapshot, replyId, resetReplyFiles]);
+  const trayItems = draft ? draftFiles.items : replyFiles.items;
+  if (trayKey && !pendingPreviews(trayItems).some((file) => file.id === trayKey)) setTrayKey(null);
+
+  /** Each thread's card has a reply box; the one being typed in holds the draft, the others keep theirs aside. */
+  const claimReply = (threadId: string) => {
+    if (replyId === threadId) return;
+    if (replyId && reply.trim()) replyDrafts.current.set(replyId, reply);
+    setReply(replyDrafts.current.get(threadId) ?? "");
+    replyDrafts.current.delete(threadId);
+    setReplyId(threadId);
+    setHasParkedReply([...replyDrafts.current.values()].some((text) => text.trim()));
+  };
+
+  const snapshot = useCallback(
+    async (
+      page: PageShot,
+      add: (files: Array<{ blob: Blob; name: string; capture?: Capture }>) => void,
+      sketch?: Sketch,
+    ) => {
+      setCapturing(true);
+      const capture = describeCapture(`${window.location.origin}${pageHref()}`);
+      const blob = await shotPage(page, sketch).catch(() => null);
+      setCapturing(false);
+      if (!blob) {
+        setError("Couldn’t capture the page.");
+        return;
+      }
+      add([{ blob, name: `screenshot-${fileStamp()}.jpg`, capture }]);
+    },
+    [setError],
+  );
+  /**
+   * Copies the page on the frame after the composer paints, so the picture and the outline around `target` come
+   * from the moment it was picked, and draws it once the browser is idle (within SNAPSHOT_DELAY_MS), so typing
+   * the first letters never waits on it. Posting is held until it's done, as before.
+   */
+  const scheduleSnapshot = useCallback(
+    (
+      kind: "draft" | "reply",
+      target: Element | null,
+      add: (files: Array<{ blob: Blob; name: string; capture?: Capture }>) => void,
+      sketch?: Sketch,
+    ) => {
+      pendingShot.current?.cancel();
+      setCapturing(true);
+      let cancelIdle: (() => void) | null = null;
+      let timer = 0;
+      const frame = requestAnimationFrame(() => {
+        timer = window.setTimeout(() => {
+          const page = takeShot(target);
+          (kind === "draft" ? draftPage : replyPage).current = page;
+          cancelIdle = whenIdle(() => {
+            pendingShot.current = null;
+            void snapshot(page, add, sketch);
+          }, SNAPSHOT_DELAY_MS);
+        }, 0);
+      });
+      pendingShot.current = {
+        kind,
+        cancel: () => {
+          cancelAnimationFrame(frame);
+          window.clearTimeout(timer);
+          cancelIdle?.();
+        },
+      };
+    },
+    [snapshot],
+  );
+  /** The @mention crop of the draft's element, from the page as the draft saw it. */
+  const cropDraft = useCallback((element: Element, sketch?: Sketch) => {
+    const page = draftPage.current ?? takeShot(element);
+    return page.frame ? shotAround(page, sketch) : captureAround(element, sketch);
+  }, []);
+  const cropReply = useCallback((element: Element, sketch?: Sketch) => {
+    const page = replyPage.current ?? takeShot(element);
+    return page.frame ? shotAround(page, sketch) : captureAround(element, sketch);
+  }, []);
+  useEffect(() => {
+    if (!draft) cancelScheduledSnapshot("draft");
+  }, [cancelScheduledSnapshot, draft]);
+  useEffect(() => () => pendingShot.current?.cancel(), []);
+  useEffect(() => {
+    if (!member) return;
+    return whenIdle(() => prewarmPageImage(), PREWARM_DELAY_MS);
+  }, [member]);
+
+  const pinsHidden = Boolean(prefs.pinsHidden);
+  const barPosition = prefs.position ?? position;
+
+  const commitDock = useCallback(
+    (dock: Dock) => savePrefs({ ...prefsRef.current, dock }),
+    [savePrefs],
+  );
+  const placeBar = useCallback((frame: BarFrame | null) => {
+    setBarFrame((current) => {
+      if (!frame && !current) return current;
+      if (
+        frame &&
+        current &&
+        frame.edge === current.edge &&
+        frame.side === current.side &&
+        frame.x === current.x &&
+        frame.y === current.y &&
+        frame.width === current.width &&
+        frame.height === current.height
+      ) {
+        return current;
+      }
+      return frame;
+    });
+  }, []);
+
+  const say = useCallback((message: string) => setToast(message), []);
+  const barRef = useRef<HTMLDivElement>(null);
+  const warmTips = useWarmTips();
+
+  useEffect(() => {
+    if (theme !== "system") return;
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    const sync = () => setSystemDark(query.matches);
+    sync();
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, [theme]);
+
+  useEffect(() => {
+    if (!toast) return;
+    const id = window.setTimeout(() => setToast(""), 1800);
+    return () => window.clearTimeout(id);
+  }, [toast]);
+
+  useEffect(() => {
+    injectStyles("bar");
+    injectStyles("overlay");
+  }, []);
+
+  const apiUrl = session?.apiUrl;
+  useEffect(() => {
+    if (apiUrl) loadFont(apiUrl);
+  }, [apiUrl]);
+
+  /**
+   * The draft dock stands in for the bar while a draft is waiting: a page draft minimised to collect captures,
+   * or one found in storage to resume. Its styles live in the panel sheet, so it needs that sheet too.
+   */
+  const draftDock = draftDockMode({
+    signedIn: member !== null && !disabled,
+    pageDraft: draft !== null && shot !== null,
+    collecting,
+    stored: stored !== null,
+  });
+  const panelStyles =
+    surface !== "none" ||
+    draft !== null ||
+    peekId !== null ||
+    focusId !== null ||
+    draftDock !== null;
+  useLayoutEffect(() => {
+    if (panelStyles) injectStyles("panel");
+  }, [panelStyles]);
+
+  useEffect(() => {
+    let cancelled = false;
+    sessions()
+      .then((next) => {
+        if (cancelled) return;
+        if (!next) {
+          setPhase("off");
+          return;
+        }
+        setSession(next);
+        adoptStoredMember(next);
+        const stored = localStorage.getItem(storageKey(next));
+        if (stored && memberIsCurrent(stored)) {
+          setMember(stored);
+          setName(readJwt(stored)?.name ?? "");
+        }
+        setPhase("ready");
+      })
+      .catch(() => {
+        if (!cancelled) setPhase("off");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [sessions]);
+
+  useEffect(() => {
+    const sync = () => setHref(window.location.href);
+    sync();
+    announceNavigation();
+    window.addEventListener("popstate", sync);
+    window.addEventListener("hashchange", sync);
+    window.addEventListener(NAVIGATED, sync);
+    return () => {
+      window.removeEventListener("popstate", sync);
+      window.removeEventListener("hashchange", sync);
+      window.removeEventListener(NAVIGATED, sync);
+    };
+  }, []);
+
+  const onThreads = useCallback((next: ThreadsPayload) => {
+    setDisabled(false);
+    setAccess(next.access === "view" ? "view" : "edit");
+    setMemberType(next.memberType ?? null);
+    setClarityMode(readClarityMode(next.clarity));
+    const painted = paintThreadStatuses(next.threads, pendingStatus.current);
+    pendingStatus.current = painted.pending;
+    setThreads(painted.threads);
+    setSettings(next.settings);
+    const names = next.linked ?? [];
+    setLinked((current) => (current.join("\n") === names.join("\n") ? current : names));
+  }, []);
+  const onUnauthorized = useCallback(() => {
+    if (session) localStorage.removeItem(storageKey(session));
+    void draftStore?.clear();
+    void draftStore?.clearRecording();
+    setMember(null);
+  }, [draftStore, session]);
+  const onDisabled = useCallback(() => {
+    setDisabled(true);
+    setThreads([]);
+    setDraft(null);
+    setMode("browse");
+  }, [setDisabled, setDraft, setMode, setThreads]);
+
+  const panelOpen = surface === "dashboard";
+
+  /** Opens the dashboard on Comments, with `threadId` selected when given. */
+  const openComments = useCallback(
+    (threadId: string | null = null) => {
+      if (threadId) {
+        const thread = threadsRef.current.find((each) => each.id === threadId);
+        const environment = thread?.environment || session?.environment;
+        setEnvFilter((current) => (current === "all" || current === environment ? current : "all"));
+      }
+      setDashboardFocus((current) => (threadId ? { threadId, at: (current?.at ?? 0) + 1 } : null));
+      setDashboardScreen("inbox");
+      setFocusId(null);
+      setFocusMenu(false);
+      setSurface("dashboard");
+    },
+    [session],
+  );
+  useEffect(() => {
+    if (surface !== "unlock" || !session || member) return;
+    let cancelled = false;
+    // A 401 is most often a host token that expired while the page sat open: a fresh one is asked for once.
+    void signInOptions(session)
+      .then(async (first) => {
+        if (first.status !== 401) return first;
+        const fresh = await sessions({ refresh: true }).catch(() => null);
+        return fresh ? signInOptions(fresh) : first;
+      })
+      .then((next) => {
+        if (!cancelled) setSignIn(next);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [member, session, sessions, surface]);
+
+  /** The origin the session route had the host token issued for, when it is not this page's. */
+  const wrongOrigin = useMemo(() => {
+    const issuedFor = session ? readJwt(session.hostToken)?.origin : undefined;
+    return issuedFor && issuedFor !== window.location.origin ? issuedFor : null;
+  }, [session]);
+  useEffect(() => {
+    if (!wrongOrigin) return;
+    console.warn(`[comment-service] ${tokenForOtherOrigin(wrongOrigin)}`);
+  }, [wrongOrigin]);
+
+  // Another tab signed out of comments, or saw the host sign out: this one follows.
+  useEffect(() => {
+    if (!session) return;
+    const key = storageKey(session);
+    const onStorage = (event: StorageEvent) => {
+      if ((event.key === key || event.key === null) && localStorage.getItem(key) === null)
+        setMember(null);
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [session]);
+
+  useEffect(() => () => msfAttempt.current?.stop(), []);
+
+  useEffect(() => {
+    if (surface !== "dashboard" || !session || !member) return;
+    let cancelled = false;
+    getProfile(session, member)
+      .then((next) => {
+        if (!cancelled) setProfile(next);
+      })
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [member, session, surface]);
+
+  const [leftDashboard, setLeftDashboard] = useState(surface !== "dashboard");
+  if ((surface !== "dashboard") !== leftDashboard) {
+    setLeftDashboard(surface !== "dashboard");
+    if (surface !== "dashboard") {
+      setConfirmReset(false);
+      setRenaming(null);
+      setDashboardFocus(null);
+    }
+  }
+  const openOnRoute = threads.some((thread) => thread.status === "open" && here.has(thread));
+  const { live, refresh, visible } = useThreadsSync({
+    session,
+    member,
+    pollMs,
+    href,
+    wanted: panelOpen || draft !== null || openOnRoute,
+    onThreads,
+    onUnauthorized,
+    onDisabled,
+  });
+  /** The dashboard, a new comment, or an open pin — each has a box you can type @ in. */
+  const canMention = panelOpen || draft !== null || focusId !== null;
+  const ownMembers = useMembers(session, member, undefined, canMention);
+  const transcribe = (wav: Blob, prompt: string, signal: AbortSignal) => {
+    if (!session || !member) return Promise.reject(new Error("Sign in to dictate."));
+    return transcribeAudio(session, member, wav, prompt, signal);
+  };
+  const memberNames = ownMembers.map((person) => person.name);
+  const keepVoice = prefs.keepVoice !== false;
+  const setKeepVoice = (next: boolean) => savePrefs({ ...prefsRef.current, keepVoice: next });
+  /** Narration while a clip is recording goes on the clip's clock, at the moment the piece was spoken. */
+  const sayIntoClip = useCallback((text: string, spokenAt: number) => {
+    clipBuffer.current?.pushAt({ type: "say", text }, spokenAt);
+  }, []);
+  const draftDictation = useDictation({
+    transcribe,
+    value: body,
+    onChange: setBody,
+    names: memberNames,
+    onNote: setError,
+    onAudio: (file) => draftFiles.add([{ blob: file, name: file.name }]),
+    keepVoice,
+    onKeepVoice: setKeepVoice,
+    onSaid: sayIntoClip,
+  });
+  const replyDictation = useDictation({
+    transcribe,
+    value: reply,
+    onChange: (value) => {
+      setReply(value);
+      if (!value.trim() || replySnapped.current) return;
+      const thread = threads.find((item) => item.id === replyId);
+      const element = thread ? elementOf(thread) : null;
+      if (!thread || !element) return;
+      replySnapped.current = true;
+      scheduleSnapshot("reply", element, replyFiles.add, thread.anchor.sketch);
+    },
+    names: memberNames,
+    onNote: setError,
+    onAudio: (file) => replyFiles.add([{ blob: file, name: file.name }]),
+    keepVoice,
+    onKeepVoice: setKeepVoice,
+    onSaid: sayIntoClip,
+  });
+  const cancelDraftDictation = draftDictation.cancel;
+  const cancelReplyDictation = replyDictation.cancel;
+  const recordDictation = recordInto === "reply" ? replyDictation : draftDictation;
+  const stopRecordDictation = recordDictation.stop;
+  /** Dictation was started from the record bar, so it ends with the take. */
+  const dictatingWithRecording = useRef(false);
+  useEffect(() => {
+    if (recording.phase === "recording" || !dictatingWithRecording.current) return;
+    dictatingWithRecording.current = false;
+    // Words still on their way are written.
+    stopRecordDictation();
+  }, [recording.phase, stopRecordDictation]);
+  // Words belong to the box they started in: a discarded or replaced draft, or another thread's reply box,
+  // gets none of them.
+  useEffect(() => {
+    if (!draft) return;
+    return () => cancelDraftDictation();
+  }, [cancelDraftDictation, draft]);
+  useEffect(() => {
+    if (!replyId) return;
+    return () => cancelReplyDictation();
+  }, [cancelReplyDictation, replyId]);
+  const noDraftWork =
+    mode === "browse" &&
+    !draft &&
+    !body.trim() &&
+    !reply.trim() &&
+    !hasParkedReply &&
+    replyFiles.ids.length === 0 &&
+    recording.phase === "idle" &&
+    !draftDictation.busy &&
+    !replyDictation.busy &&
+    !capturing &&
+    !busy &&
+    !editingId &&
+    !editingMessageId;
+  useRuntimeUpdates(
+    session?.apiUrl,
+    live,
+    noDraftWork && (surface === "none" || document.visibilityState === "hidden"),
+  );
+  const replyEnv = linkedEnv(threads.find((thread) => thread.id === (focusId ?? replyId)));
+  const replyEnvMembers = useMembers(
+    session,
+    member,
+    replyEnv,
+    Boolean(replyEnv) && (panelOpen || focusId !== null),
+  );
+
+  useEffect(() => {
+    // This tab may be a sign-in window that came back here: hand the result to the tab that started it.
+    if (relayMsfHandoff()) {
+      window.close();
+      window.setTimeout(() => setToast("Signed in. You can close this tab."), 300);
+    }
+  }, []);
+
+  useEffect(() => {
+    stripHandoffFromUrl();
+  }, []);
+
+  const dropInvite = useCallback(() => {
+    setInvite(null);
+    dropHandoff("invite");
+  }, []);
+
+  if (phase === "ready" && !member && (pendingId || invite) && surface !== "unlock") {
+    setSurface("unlock");
+  }
+  if (member && invite) {
+    setInvite(null);
+    dropHandoff("invite");
+  }
+
+  const portal = useOverlayHost(mounted);
+  const { placed, elementFor } = usePlacement({
+    threads,
+    here,
+    host: portal ?? document.body,
+    active: Boolean(member) && (panelOpen || (!pinsHidden && openOnRoute)),
+    panelOpen,
+    visible,
+  });
+  /** The element a thread on this page is attached to, for screenshots and "Show". */
+  const elementOf = (thread: Thread) =>
+    here.has(thread)
+      ? (elementFor(thread.id) ?? resolveInDocument(thread.anchor, route).element)
+      : null;
+
+  useEffect(() => {
+    if (!flash) return;
+    const id = window.setTimeout(() => setFlash(null), 1400);
+    return () => window.clearTimeout(id);
+  }, [flash]);
+
+  /** Closes an element comment. A page draft is minimised to the dock instead; nothing throws it away by accident. */
+  const closeOrPark = useCallback(() => {
+    if (draft && shot) {
+      setCollecting(true);
+      return;
+    }
+    setDraft(null);
+  }, [draft, shot]);
+
+  /**
+   * The bar's screenshot tool: copies and draws the whole page, then opens it in `ShotSurface` with a composer
+   * beside it. Pressed again while one is open, it closes it.
+   */
+  /** The draft as it stands, ready for storage; null when there is no page draft. */
+  const storedDraftNow = useCallback((): StoredDraft | null => {
+    if (!draft || !shot || !draftId.current) return null;
+    return {
+      v: 1,
+      id: draftId.current,
+      createdAt: draftCreated.current,
+      updatedAt: Date.now(),
+      href: draft.href ?? pageHref(),
+      route: draft.anchor.route,
+      anchor: draft.anchor,
+      body,
+      details: draftDetails,
+      ...(draftKind ? { kind: draftKind } : {}),
+      ticket: ticketValues,
+      captures: draftFiles.items.map((item) => ({
+        key: item.key,
+        name: item.name,
+        type: item.contentType,
+        blob: item.blob,
+        capture: item.capture,
+        markup: item.markup
+          ? { blob: item.markup.blob, name: item.markup.name, shapes: item.markup.shapes }
+          : undefined,
+        shapes: captureShapes.get(item.key) ?? item.markup?.shapes ?? [],
+      })),
+      selected: shot.key,
+      // Open questions and the answers typed so far follow the draft through a minimise or a reload.
+      ...(clarity.hold ? { clarity: clarity.hold } : {}),
+    };
+  }, [
+    body,
+    captureShapes,
+    clarity.hold,
+    draft,
+    draftDetails,
+    draftKind,
+    draftFiles.items,
+    shot,
+    ticketValues,
+  ]);
+  const storedDraftNowRef = useRef(storedDraftNow);
+  useEffect(() => {
+    storedDraftNowRef.current = storedDraftNow;
+  });
+  // Every change to a page draft is written to the browser's storage within a moment, pictures and clips
+  // included, so a reload, a crash or another tab can offer to pick it up. The title's "Saved" follows this.
+  useEffect(() => {
+    if (!draftStore) return;
+    const timer = window.setTimeout(() => {
+      const payload = storedDraftNow();
+      if (!payload) return;
+      void draftStore.save(payload).then(
+        () => {
+          if (draftStore.durable) setSavedAt(Date.now());
+        },
+        () => {},
+      );
+    }, 300);
+    return () => window.clearTimeout(timer);
+  }, [draftStore, storedDraftNow]);
+
+  /** Keeps the page draft in storage and offers it in the dock, so an element comment can take the composer. */
+  const stashDraft = useCallback(() => {
+    const payload = storedDraftNowRef.current();
+    if (!payload || !draftStore) return;
+    void draftStore.save(payload).catch(() => {});
+    setStored(payload);
+    setCollecting(false);
+  }, [draftStore]);
+  const pageDraftRef = useRef(false);
+  const stashDraftRef = useRef(stashDraft);
+  useEffect(() => {
+    pageDraftRef.current = Boolean(draft && shot);
+    stashDraftRef.current = stashDraft;
+  });
+
+  const resetPageDraft = useCallback(() => {
+    draftFileActions.current.reset();
+    setCaptureShapes(new Map());
+    draftId.current = null;
+    setShot(null);
+    setCollecting(false);
+    setSavedAt(null);
+    setBody("");
+    setDraftDetails(noDetails);
+    setDraftKind(null);
+    setTicketValues({});
+    resetClarity();
+  }, [resetClarity]);
+
+  /** Throws the draft away. The first press asks; the second, within a few seconds, does it. */
+  const discardDraft = useCallback(() => {
+    if (!confirmDiscard) {
+      setConfirmDiscard(true);
+      window.setTimeout(() => setConfirmDiscard(false), 4000);
+      return;
+    }
+    setConfirmDiscard(false);
+    void draftStore?.clear();
+    setStored(null);
+    setDraft(null);
+    resetPageDraft();
+  }, [confirmDiscard, draftStore, resetPageDraft]);
+
+  /** Puts a stored draft back: its captures (uploaded again), its words, its drawings, open on this page. */
+  const resumeDraft = useCallback(
+    (found: StoredDraft) => {
+      if (!session || !member) return;
+      const element = pageAnchorElement();
+      const target = portal ?? document.body;
+      const box = placeAgainst(element, target) ?? { top: 0, left: 0, width: 0, height: 0 };
+      setMode("browse");
+      setReattachId(null);
+      setSurface("none");
+      setFocusId(null);
+      setFocusMenu(false);
+      draftPicked.current = new Map();
+      draftShot.current = null;
+      draftPage.current = null;
+      draftFileActions.current.reset();
+      setCaptureShapes(new Map(found.captures.map((item) => [item.key, item.shapes])));
+      draftFileActions.current.restore(
+        found.captures.map((item) => ({
+          key: item.key,
+          blob: item.blob,
+          name: item.name,
+          capture: item.capture,
+          markup: item.markup,
+        })),
+      );
+      draftId.current = found.id;
+      draftCreated.current = found.createdAt;
+      setDraft({ anchor: found.anchor, href: found.href, ...composerSpot(box, target), element });
+      setShot({ key: found.selected ?? found.captures[0]?.key ?? "" });
+      setBody(found.body);
+      setDraftDetails(found.details);
+      setDraftKind(found.kind ?? null);
+      setTicketValues(found.ticket);
+      restoreClarity(found.clarity ?? null);
+      setStored(null);
+      setCollecting(false);
+      setSavedAt(found.updatedAt);
+      setError("");
+    },
+    [member, portal, restoreClarity, session],
+  );
+
+  /** Takes a picture of this page into the open draft (from the dock, or S while collecting). */
+  const addCapture = useCallback(async () => {
+    if (!draft || !shot || shooting) return;
+    setShooting(true);
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => window.setTimeout(resolve, 0)),
+    );
+    const page = takeShot(null);
+    const capture = describeCapture(`${window.location.origin}${pageHref()}`);
+    const blob = await shotPage(page).catch(() => null);
+    setShooting(false);
+    if (!blob) {
+      say("Couldn’t capture the page.");
+      return;
+    }
+    const [key] = draftFileActions.current.add([
+      { blob, name: `screenshot-${fileStamp()}.jpg`, capture },
+    ]);
+    if (!key) return;
+    setShot({ key });
+    say("Added to the draft");
+  }, [draft, say, shooting, shot]);
+
+  /**
+   * Records this tab into the open draft; the surface gets out of the way while it runs. Every second of the
+   * take and everything that happens on the page meanwhile are kept in storage as they land, so a reload or a
+   * crash mid-take keeps what was filmed; the replay goes with the clip when it is kept.
+   */
+  const recordIntoDraft = useCallback(() => {
+    if (recording.phase !== "idle" || !draftId.current) return;
+    setCollecting(true);
+    setRecordInto("draft");
+    clipWatch.current?.();
+    const buffer = new ReplayBuffer({ windowMs: RECORD_MAX_MS + 10_000, maxEvents: 400 });
+    clipBuffer.current = buffer;
+    clipWatch.current = watchActivity(buffer);
+    clipChunks.current = [];
+    clipStartedAt.current = Date.now();
+    const id = draftId.current;
+    const url = `${window.location.origin}${pageHref()}`;
+    void recording.begin(draftFileActions.current.add, {
+      onChunk: (chunk, _index, mime) => {
+        clipChunks.current.push(chunk);
+        void draftStore?.saveRecording({
+          v: 1,
+          draftId: id,
+          mime,
+          startedAt: clipStartedAt.current,
+          url,
+          chunks: clipChunks.current.slice(),
+          events: buffer.snapshot(url)?.events ?? [],
+        });
+      },
+      companions: (info) => {
+        const file = buffer.snapshot(url, {
+          name: info.name,
+          startedAt: info.startedAt,
+          durationMs: info.durationMs,
+        });
+        return file
+          ? [
+              {
+                blob: new Blob([JSON.stringify(file)], { type: "application/json" }),
+                name: `replay-${info.stamp}.json`,
+              },
+            ]
+          : [];
+      },
+    });
+  }, [draftStore, recording]);
+  useEffect(() => {
+    if (recording.phase !== "idle") return;
+    // The take ended (kept, discarded or cancelled): nothing is running that a reload could cut short.
+    clipWatch.current?.();
+    clipWatch.current = null;
+    clipBuffer.current = null;
+    clipChunks.current = [];
+    void draftStore?.clearRecording();
+  }, [draftStore, recording.phase]);
+
+  /**
+   * The bar's screenshot tool. With no draft: copies and draws the whole page and opens it in `ShotSurface` with
+   * a composer beside it. With a draft open: minimises it to the dock, and from the dock, opens it again. With a
+   * stored draft waiting: resumes it.
+   */
+  const startShot = useCallback(async () => {
+    if (readOnlyRef.current) {
+      setToast("You can read comments here, not add them.");
+      return;
+    }
+    if (!session || !member || shooting) return;
+    if (draft && shot) {
+      setCollecting((current) => !current);
+      return;
+    }
+    if (stored) {
+      resumeDraft(stored);
+      return;
+    }
+    setMode("browse");
+    setReattachId(null);
+    setSurface("none");
+    setFocusId(null);
+    setFocusMenu(false);
+    setDraft(null);
+    setShooting(true);
+    // The page is copied after this frame paints, so an open card or menu just closed is not in the picture.
+    await new Promise<void>((resolve) =>
+      requestAnimationFrame(() => window.setTimeout(resolve, 0)),
+    );
+    const element = pageAnchorElement();
+    const page = takeShot(null);
+    const capture = describeCapture(`${window.location.origin}${pageHref()}`);
+    const blob = await shotPage(page).catch(() => null);
+    setShooting(false);
+    if (!blob) {
+      setError("Couldn’t capture the page.");
+      return;
+    }
+    const anchor = captureAnchor(element, window.location.pathname);
+    const target = portal ?? document.body;
+    const box = placeAgainst(element, target) ?? { top: 0, left: 0, width: 0, height: 0 };
+    draftPicked.current = new Map();
+    draftShot.current = null;
+    draftPage.current = page;
+    resetPageDraft();
+    draftId.current = crypto.randomUUID();
+    draftCreated.current = Date.now();
+    const [key] = draftFileActions.current.add([
+      { blob, name: `screenshot-${fileStamp()}.jpg`, capture },
+    ]);
+    if (!key) return;
+    setDraft({ anchor, href: pageHref(), ...composerSpot(box, target), element });
+    setShot({ key });
+    setError("");
+  }, [draft, member, portal, resetPageDraft, resumeDraft, session, shooting, shot, stored]);
+
+  const togglePins = useCallback(() => {
+    const next = !pinsHidden;
+    savePrefs({ ...prefs, pinsHidden: next });
+    say(next ? "Pins hidden · H to show" : "Pins shown");
+  }, [pinsHidden, prefs, savePrefs, say]);
+
+  /**
+   * Unsent work in the open composer: the same test Post applies. A letter pressed while the box has lost focus
+   * (an overlay taking focus back, a click on the page) reads as a shortcut, and a shortcut closing the composer
+   * over writing is not something a letter may do.
+   */
+  const draftHasWriting = Boolean(
+    draft &&
+    (body.trim() ||
+      draftDictation.busy ||
+      draftFiles.ids.length ||
+      shot ||
+      (settings?.fields.enabled && hasFieldValues(draftDetails))),
+  );
+
+  const onKey = useRef<(event: KeyboardEvent) => void>(() => {});
+  const handleKey = (event: KeyboardEvent) => {
+    if (event.defaultPrevented || markingUp.current) return;
+    if (event.key === "Escape" && (draftDictation.listening || replyDictation.listening)) {
+      event.stopImmediatePropagation();
+      draftDictation.stop();
+      replyDictation.stop();
+      return;
+    }
+    if (recordingPhase.current !== "idle") {
+      if (event.key === "Escape") {
+        event.stopImmediatePropagation();
+        recording.cancel();
+      }
+      return;
+    }
+    const trayFiles = pendingPreviews(draft ? draftFiles.items : replyFiles.items);
+    if (trayKey && trayFiles.some((file) => file.id === trayKey)) {
+      if (event.key === "Escape") {
+        event.stopImmediatePropagation();
+        setTrayKey(null);
+        return;
+      }
+      if (
+        !isTyping(event.target) &&
+        trayFiles.length > 1 &&
+        (event.key === "ArrowLeft" || event.key === "ArrowRight")
+      ) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const delta = event.key === "ArrowRight" ? 1 : -1;
+        const index = trayFiles.findIndex((file) => file.id === trayKey);
+        const next = trayFiles[(Math.max(0, index) + delta + trayFiles.length) % trayFiles.length];
+        if (next) setTrayKey(next.id);
+        return;
+      }
+    }
+    if (preview) {
+      const files = visualAttachments(
+        threads.find((thread) => thread.id === preview.threadId)?.messages,
+      );
+      if (event.key === "Escape") {
+        event.stopImmediatePropagation();
+        setPreview(null);
+        return;
+      }
+      if (
+        !isTyping(event.target) &&
+        files.length > 1 &&
+        (event.key === "ArrowLeft" || event.key === "ArrowRight")
+      ) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const delta = event.key === "ArrowRight" ? 1 : -1;
+        const index = files.findIndex((file) => file.id === preview.fileId);
+        const next = files[(Math.max(0, index) + delta + files.length) % files.length];
+        if (next) setPreview({ threadId: preview.threadId, fileId: next.id });
+        return;
+      }
+    }
+    if (event.key === "Escape") {
+      if (mode !== "browse" || draft || surface !== "none" || focusId) {
+        event.stopImmediatePropagation();
+        setMode("browse");
+        closeOrPark();
+        setReattachId(null);
+        setSurface("none");
+        setFocusId(null);
+        setFocusMenu(false);
+        setConfirmReset(false);
+        setRenaming(null);
+      }
+      return;
+    }
+    if (!member || event.metaKey || event.ctrlKey || event.altKey || isTyping(event.target)) return;
+    const key = event.key.toLowerCase();
+    // A draft minimised to the dock takes more captures from the keyboard; its writing is safe in storage.
+    const parked = collecting && Boolean(draft && shot);
+    if (parked && (key === "s" || key === "r")) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      if (key === "s") void addCapture();
+      else recordIntoDraft();
+      return;
+    }
+    const ui = SHORTCUTS[key];
+    if (!ui) return;
+    if (!shortcutAllowed(key, draftHasWriting && !parked)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      composerField()?.focus();
+      return;
+    }
+    if (key === "s") void startShot();
+    else if (key === "h") togglePins();
+    else return;
+    pressTool(barRef.current, ui);
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  useEffect(() => {
+    onKey.current = handleKey;
+  });
+
+  useEffect(() => {
+    const inToolbar = (event: KeyboardEvent) =>
+      event.target instanceof Element && Boolean(event.target.closest("#cs-root"));
+    // Page keys in the capture phase: an open menu or dialog owns focus and swallows letters and Escape.
+    const fromPage = (event: KeyboardEvent) => {
+      if (!inToolbar(event)) onKey.current(event);
+    };
+    // Toolbar keys after its own fields had their turn. Registered once, before any app dialog opens, so
+    // stopImmediatePropagation keeps a dialog's document-level Escape handler from also closing it.
+    const fromToolbar = (event: KeyboardEvent) => {
+      if (inToolbar(event)) onKey.current(event);
+    };
+    window.addEventListener("keydown", fromPage, true);
+    document.addEventListener("keydown", fromToolbar);
+    return () => {
+      window.removeEventListener("keydown", fromPage, true);
+      document.removeEventListener("keydown", fromToolbar);
+    };
+  }, []);
+
+  useEffect(() => shieldFromPage(), []);
+
+  useEffect(() => {
+    const outline = highlightStore;
+    if (mode !== "select" && mode !== "reattach") {
+      outline.set(null);
+      document.documentElement.style.cursor = "";
+      return;
+    }
+    document.documentElement.style.cursor = "crosshair";
+    const host = () => portal ?? document.body;
+    // One hit-test per frame, however many moves arrive; the label (a walk up the DOM and React trees) is
+    // computed only when the pointer reaches a different element.
+    let frame = 0;
+    let pending: MouseEvent | null = null;
+    let under: Element | null = null;
+    let label = "";
+    const show = () => {
+      frame = 0;
+      const event = pending;
+      pending = null;
+      if (!event) return;
+      if (event.target instanceof Element && event.target.closest("#cs-root")) {
+        under = null;
+        outline.set(null);
+        return;
+      }
+      const element = elementAt(event.clientX, event.clientY);
+      const box = element ? placeAgainst(element, host()) : null;
+      if (!element || !box) {
+        under = null;
+        outline.set(null);
+        return;
+      }
+      if (element !== under) {
+        under = element;
+        label = describeElement(element);
+      }
+      outline.set({ ...box, label });
+    };
+    const onMove = (event: MouseEvent) => {
+      pending = event;
+      if (!frame) frame = requestAnimationFrame(show);
+    };
+    const onClick = (event: MouseEvent) => {
+      if (
+        event.target instanceof Element &&
+        event.target.closest("#cs-root button, #cs-root input, #cs-root textarea, #cs-root form")
+      ) {
+        return;
+      }
+      const element = elementAt(event.clientX, event.clientY);
+      if (!element || !session) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const anchor = captureAnchor(element, window.location.pathname);
+      const target = host();
+      const box = placeAgainst(element, target);
+      if (modeRef.current === "reattach" && reattachId && member) {
+        setBusy(true);
+        updateThread(session, member, reattachId, { anchor, url: pageHref() })
+          .then(() => refresh())
+          .then(() => {
+            setMode("browse");
+            setReattachId(null);
+            openComments(reattachId);
+            setError("");
+            say("Reattached");
+          })
+          .catch((caught) =>
+            setError(caught instanceof Error ? caught.message : "Could not reattach."),
+          )
+          .finally(() => setBusy(false));
+        return;
+      }
+      const spot = composerSpot(
+        box ?? { top: event.clientY, left: event.clientX, width: 0, height: 0 },
+        target,
+      );
+      if (pageDraftRef.current) stashDraftRef.current();
+      setDraft({ anchor, ...spot, element });
+      setShot(null);
+      draftPicked.current = new Map();
+      draftShot.current = null;
+      draftPage.current = null;
+      draftFileActions.current.reset();
+      scheduleSnapshot("draft", element, draftFileActions.current.add);
+      setBody("");
+      setDraftDetails(noDetails);
+      setDraftKind(null);
+      resetClarity();
+      setMode("browse");
+      setError("");
+    };
+    const swallow = (event: Event) => {
+      if (event.target instanceof Element && event.target.closest("#cs-root")) return;
+      if (!event.type.startsWith("touch")) event.preventDefault();
+      event.stopPropagation();
+    };
+    const presses = ["pointerdown", "mousedown", "pointerup", "mouseup", "touchstart", "touchend"];
+    document.addEventListener("mousemove", onMove, true);
+    window.addEventListener("click", onClick, true);
+    for (const type of presses) window.addEventListener(type, swallow, true);
+    return () => {
+      cancelAnimationFrame(frame);
+      outline.set(null);
+      document.documentElement.style.cursor = "";
+      document.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("click", onClick, true);
+      for (const type of presses) window.removeEventListener(type, swallow, true);
+    };
+  }, [
+    highlightStore,
+    member,
+    mode,
+    openComments,
+    portal,
+    reattachId,
+    refresh,
+    resetClarity,
+    say,
+    scheduleSnapshot,
+    session,
+  ]);
+
+  /** A finished freehand stroke opens a composer on the element it was drawn over. */
+  const onStroke = useCallback(
+    (points: Point[]) => {
+      const drawn = inkBox(points);
+      if (isTap(drawn) || !session) return;
+      const element = elementUnder(drawn);
+      if (!element) {
+        say("Draw over something on the page");
+        return;
+      }
+      const sketch = sketchFor(element, [simplify(points)]);
+      const anchor = { ...captureAnchor(element, window.location.pathname), sketch };
+      const target = portal ?? document.body;
+      const box = placeAgainst(element, target);
+      const rect = element.getBoundingClientRect();
+      const spot = composerSpot(
+        {
+          top: (box?.top ?? rect.top) + drawn.top - rect.top,
+          left: (box?.left ?? rect.left) + drawn.left - rect.left,
+          width: drawn.right - drawn.left,
+          height: drawn.bottom - drawn.top,
+        },
+        target,
+      );
+      if (pageDraftRef.current) stashDraftRef.current();
+      setDraft({ anchor, ...spot, element });
+      setShot(null);
+      draftPicked.current = new Map();
+      draftShot.current = null;
+      draftPage.current = null;
+      draftFileActions.current.reset();
+      scheduleSnapshot("draft", element, draftFileActions.current.add, sketch);
+      setBody("");
+      setDraftDetails(noDetails);
+      setDraftKind(null);
+      resetClarity();
+      setMode("browse");
+      setError("");
+    },
+    [portal, resetClarity, say, scheduleSnapshot, session],
+  );
+
+  useEffect(() => {
+    const api = {
+      version: 1 as const,
+      project: session?.project ?? null,
+      environment: session?.environment ?? null,
+      list: () => threadsRef.current,
+      capture: (selector: string) => {
+        const element = document.querySelector(selector);
+        return element ? captureAnchor(element, window.location.pathname) : null;
+      },
+      resolve: (anchor: Anchor) => resolveInDocument(anchor, window.location.pathname).resolution,
+    };
+    Object.assign(window, { __COMMENT_SERVICE__: api });
+  }, [session]);
+
+  const envScope =
+    envFilter !== "all" && (envFilter === session?.environment || linked.includes(envFilter))
+      ? envFilter
+      : "all";
+  const scoped = useMemo(
+    () =>
+      envScope === "all"
+        ? placed
+        : placed.filter((item) => (item.thread.environment || session?.environment) === envScope),
+    [envScope, placed, session],
+  );
+  if (preview) {
+    const files = visualAttachments(
+      threads.find((thread) => thread.id === preview.threadId)?.messages,
+    );
+    if (!files.some((file) => file.id === preview.fileId) || focusId !== preview.threadId)
+      setPreview(null);
+  }
+  const showOnPage = useCallback(
+    (thread: Thread) => {
+      const element =
+        elementFor(thread.id) ?? resolveInDocument(thread.anchor, window.location.pathname).element;
+      if (!element) return;
+      element.scrollIntoView({ block: "center", behavior: "smooth" });
+      window.setTimeout(() => {
+        const box = placeAgainst(element, portal ?? document.body);
+        if (box) setFlash(box);
+      }, 350);
+    },
+    [elementFor, portal],
+  );
+
+  const pendingItem =
+    pendingId && member ? placed.find((candidate) => candidate.thread.id === pendingId) : undefined;
+  if (pendingItem && pendingId) {
+    const id = pendingId;
+    const onPage = pendingItem.status === "pinned" || pendingItem.status === "drifted";
+    setPendingId(null);
+    setRevealId(id);
+    if (onPage) {
+      setFocusId(id);
+      setFocusMenu(false);
+      setSurface("none");
+    } else {
+      const thread = threads.find((each) => each.id === id);
+      const environment = thread?.environment || session?.environment;
+      setEnvFilter((current) => (current === "all" || current === environment ? current : "all"));
+      setDashboardFocus((current) => ({ threadId: id, at: (current?.at ?? 0) + 1 }));
+      setDashboardScreen("inbox");
+      setFocusId(null);
+      setFocusMenu(false);
+      setSurface("dashboard");
+    }
+  }
+  const revealedHandoff = useRef<string | null>(null);
+  useEffect(() => {
+    if (!revealId || revealedHandoff.current === revealId) return;
+    const item = placed.find((candidate) => candidate.thread.id === revealId);
+    if (!item) return;
+    revealedHandoff.current = revealId;
+    dropHandoff("thread");
+    if (item.status === "pinned" || item.status === "drifted") showOnPage(item.thread);
+    else arrival.current = { id: revealId, until: Date.now() + 6000 };
+  }, [placed, revealId, showOnPage]);
+
+  useEffect(() => {
+    if (!focusId) return;
+    const close = (event: PointerEvent) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest("#cs-root")) return;
+      setFocusId(null);
+      setFocusMenu(false);
+    };
+    window.addEventListener("pointerdown", close, true);
+    return () => window.removeEventListener("pointerdown", close, true);
+  }, [focusId]);
+
+  useEffect(() => {
+    const pending = arrival.current;
+    if (!pending) return;
+    if (Date.now() > pending.until) {
+      arrival.current = null;
+      return;
+    }
+    const item = placed.find((candidate) => candidate.thread.id === pending.id);
+    if (!item || (item.status !== "pinned" && item.status !== "drifted")) return;
+    arrival.current = null;
+    showOnPage(item.thread);
+    if (pending.focus) {
+      setFocusId(item.thread.id);
+      setFocusMenu(false);
+    }
+  }, [placed, showOnPage]);
+
+  /**
+   * Shows a thread at its pin: here when it's pinned on this page, else after taking you to the page it
+   * was left on. Says so when it can't be found on this page.
+   */
+  const showThread = (item: Placed) => {
+    const { thread } = item;
+    setEditingId(null);
+    const onPage = item.status === "pinned" || item.status === "drifted";
+    const target = thread.url || thread.route;
+    if (here.has(thread) && onPage) {
+      setSurface("none");
+      setFocusId(thread.id);
+      setFocusMenu(false);
+      showOnPage(thread);
+      return;
+    }
+    // A thread from before addresses were kept shows on every screen of its path: it may still be on another.
+    if (target === pageHref() || (here.has(thread) && !isBarePath(target))) {
+      say("It isn’t on this page right now");
+      return;
+    }
+    setSurface("none");
+    if (navigate) {
+      arrival.current = { id: thread.id, until: Date.now() + 6000, focus: true };
+      navigate(target);
+      return;
+    }
+    window.location.assign(linkWith(target, "cs-thread", thread.id));
+  };
+
+  const [composerRef, composerStyle] = useFitted<HTMLFormElement>((width, height) => {
+    if (!draft) return { left: 0, top: 0 };
+    const room = overlayBounds(portal ?? document.body);
+    return {
+      left: Math.max(edge, Math.min(draft.left, room.width - width - edge)),
+      top: Math.max(edge, Math.min(draft.top, room.height - height - edge)),
+    };
+  });
+  const composerSize = resizingComposer ?? prefs.composerSize;
+
+  if (!mounted || phase !== "ready" || !session) return null;
+
+  const changeStatus = (thread: Thread, next: "open" | "resolved") => {
+    if (!member || thread.status === next) return;
+    const previous = thread.status;
+    pendingStatus.current.set(thread.id, next);
+    setThreads((current) =>
+      current.map((item) => (item.id === thread.id ? { ...item, status: next } : item)),
+    );
+    if (next === "resolved") {
+      if (focusId === thread.id) {
+        setFocusId(null);
+        setFocusMenu(false);
+      }
+      setPeekId((current) => (current === thread.id ? null : current));
+    }
+    const restore = () => {
+      if (pendingStatus.current.get(thread.id) !== next) return;
+      pendingStatus.current.delete(thread.id);
+      setThreads((current) =>
+        current.map((item) =>
+          item.id === thread.id && item.status === next ? { ...item, status: previous } : item,
+        ),
+      );
+    };
+    updateThread(session, member, thread.id, { status: next })
+      .then(() => refresh().catch(() => false))
+      .then(() => say(next === "resolved" ? "Resolved" : "Reopened"))
+      .catch((caught) => {
+        restore();
+        const message = caught instanceof Error ? caught.message : "Couldn’t update.";
+        setError(message);
+        say(message);
+      });
+  };
+
+  const memberName = member ? (readJwt(member)?.name ?? name) : "";
+  const memberId = member ? readJwt(member)?.memberId : undefined;
+  const saveEdit =
+    (thread: Thread, message: CommentMessage) => (text: string, mentionIds: string[]) =>
+      editMessage(session, member!, thread.id, message.id, text, mentionIds)
+        .then(async (result) => {
+          setEditingMessageId(null);
+          setError("");
+          if (result.delivery) {
+            setDeliveries((current) => ({ ...current, [message.id]: result.delivery! }));
+            const note = deliveryText(result.delivery);
+            if (note) say(note);
+          }
+          await refresh();
+          say("Comment updated");
+        })
+        .catch((caught) =>
+          setError(caught instanceof Error ? caught.message : "Couldn’t save the edit."),
+        );
+  const messageTools = (thread: Thread, message: CommentMessage) => (
+    <MessageTools
+      message={message}
+      mine={!readOnly && !linkedEnv(thread) && isMine(message, memberId, memberName)}
+      historyOpen={historyId === message.id}
+      onHistory={() => setHistoryId((current) => (current === message.id ? null : message.id))}
+      onEdit={() => {
+        setHistoryId(null);
+        setEditingMessageId(message.id);
+      }}
+    />
+  );
+  const messageEditor = (thread: Thread, message: CommentMessage, index: number) => (
+    <MessageEditor
+      message={message}
+      members={ownMembers}
+      selfEmail={readJwt(member ?? "")?.email}
+      allowEmpty={Boolean(message.attachments?.length) || (index === 0 && thread.fields.length > 0)}
+      onSave={saveEdit(thread, message)}
+      onCancel={() => setEditingMessageId(null)}
+    />
+  );
+  const host = portal ?? document.body;
+  const inside = host !== document.body;
+  const peek = peekId
+    ? placed.find((item) => item.thread.id === peekId && !isUnset(item.top))
+    : undefined;
+  const bounds = overlayBounds(host);
+  const pinLeft = (left: number) => Math.min(Math.max(left, 11), bounds.width - 11);
+  const focusItem = focusId ? placed.find((item) => item.thread.id === focusId) : undefined;
+  const nextFocus =
+    focusItem && !isUnset(focusItem.top) && !isUnset(focusItem.left)
+      ? {
+          id: focusItem.thread.id,
+          x: pinLeft(focusItem.left),
+          y: focusItem.top >= 0 && focusItem.top < 12 ? 12 : focusItem.top,
+        }
+      : null;
+  if (
+    nextFocus &&
+    (focusSpot?.id !== nextFocus.id || focusSpot.x !== nextFocus.x || focusSpot.y !== nextFocus.y)
+  ) {
+    setFocusSpot(nextFocus);
+  }
+  if (focusId && focusItem?.thread.status === "resolved") {
+    setFocusId(null);
+    setFocusMenu(false);
+  }
+  const focusAt = openPinCardSpot(focusItem?.thread, nextFocus, focusSpot);
+  const focusElement =
+    focusItem && (focusItem.status === "pinned" || focusItem.status === "drifted")
+      ? elementOf(focusItem.thread)
+      : null;
+  // A drawing is its own highlight; the element it is stored against is not outlined.
+  const focusBox =
+    focusElement && !focusItem?.thread.anchor.sketch ? placeAgainst(focusElement, host) : null;
+  const draftBox = draft?.anchor.sketch ? placeAgainst(draft.element, host) : null;
+  const testerForm = memberType === "tester" ? ticketForm : null;
+  // Post is enabled by exactly the work that a shortcut must not discard.
+  const canPost = draftHasWriting;
+  /** A page draft: the composer is docked beside its captures (or minimised to the dock) instead of next to an element. */
+  const pageDraft = Boolean(draft && shot);
+  const captures = pageDraft ? pendingPreviews(draftFiles.items) : [];
+
+  const changeSettings = (next: Settings) => {
+    if (!member) return;
+    const previous = settings;
+    setSettings(next);
+    setError("");
+    saveSettings(session, member, next)
+      .then(setSettings)
+      .catch((caught) => {
+        setSettings(previous);
+        setError(caught instanceof Error ? caught.message : "Couldn’t save.");
+      });
+  };
+
+  const attachReplay = (add: (files: Array<{ blob: Blob; name: string }>) => void) => {
+    const file = replayBuffer.current.snapshot(
+      `${window.location.origin}${pageHref()}`,
+      undefined,
+      INSTANT_REPLAY_MS,
+    );
+    if (!file) {
+      setError("Nothing recorded yet. Use the page, then attach it.");
+      return;
+    }
+    const when = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+    add([
+      {
+        blob: new Blob([JSON.stringify(file)], { type: "application/json" }),
+        name: `replay-${when}.json`,
+      },
+    ]);
+  };
+
+  const lock = () => {
+    recording.cancel();
+    localStorage.removeItem(storageKey(session));
+    void draftStore?.clear();
+    void draftStore?.clearRecording();
+    setMember(null);
+    setThreads([]);
+    setLinked([]);
+    setSurface("none");
+    setFocusId(null);
+    setFocusMenu(false);
+    setMode("browse");
+    setDraft(null);
+  };
+
+  const reset = () => {
+    recording.cancel();
+    localStorage.removeItem(storageKey(session));
+    localStorage.removeItem(prefsKey);
+    setPrefs({});
+    void draftStore?.clear();
+    void draftStore?.clearRecording();
+    setMember(null);
+    setThreads([]);
+    setLinked([]);
+    setFocusId(null);
+    setFocusMenu(false);
+    setName("");
+    setProfile(null);
+    setDeliveries({});
+    setConfirmReset(false);
+    setMode("browse");
+    setDraft(null);
+    setSurface("unlock");
+  };
+
+  const bar = (
+    <CommentBar
+      dock={prefs.dock}
+      barRef={barRef}
+      onCommit={commitDock}
+      onPlace={placeBar}
+      {...warmTips}
+    >
+      {!member || disabled ? (
+        <button
+          className="cs-bar-lock"
+          data-cs-ui="launcher"
+          type="button"
+          aria-label="Comments"
+          onClick={() => {
+            setError("");
+            setSurface(surface === "unlock" ? "none" : "unlock");
+          }}
+        >
+          <Icon.Lock />
+          <span>Comments</span>
+        </button>
+      ) : (
+        <>
+          <Tool
+            on={shooting || pageDraft}
+            data-cs-ui="shot-mode"
+            data-tip={
+              pageDraft ? (collecting ? "Open draft  S" : "Minimise draft  S") : "Snapshot  S"
+            }
+            aria-label={pageDraft ? "Your draft" : "Comment on a snapshot of this page"}
+            aria-pressed={pageDraft}
+            aria-busy={shooting}
+            onClick={() => void startShot()}
+          >
+            <Icon.Camera size={13} />
+          </Tool>
+          <Tool
+            on={pinsHidden}
+            data-cs-ui="pins-toggle"
+            data-tip={pinsHidden ? "Show pins  H" : "Hide pins  H"}
+            aria-label={pinsHidden ? "Show pins" : "Hide pins"}
+            aria-pressed={pinsHidden}
+            onClick={togglePins}
+          >
+            <Icon.Pins hidden={pinsHidden} />
+          </Tool>
+        </>
+      )}
+    </CommentBar>
+  );
+
+  const signedIn = (token: string) => {
+    localStorage.setItem(storageKey(session), token);
+    setMember(token);
+    setName(readJwt(token)?.name ?? "");
+    dropInvite();
+    setSurface("none");
+  };
+
+  const stopMsf = () => {
+    msfAttempt.current?.stop();
+    msfAttempt.current = null;
+    setMsfWaiting(false);
+  };
+
+  /**
+   * Sign in through the service's identity connection: an OAuth 2.0 authorization code request with PKCE in a small window. The code
+   * comes back to this page only: by message from the window, or, when the window lost its link to this page
+   * (some sign-in providers cut it), through this app's own tab the window returns to.
+   */
+  const startMsf = () => {
+    const authorizeUrl = signIn?.msf?.authorizeUrl;
+    if (!authorizeUrl) return;
+    setError("");
+    stopMsf();
+    // Opened in the click itself so the browser allows it; the address is set once the request is ready.
+    const popup = window.open("", "devaccel-msf-sign-in", "popup,width=480,height=720");
+    let stopped = false;
+    let attempt: { state: string; verifier: string } | null = null;
+    let unlisten = () => {};
+    const timer = window.setTimeout(
+      () => fail(new Error("Sign-in didn’t finish. Try again.")),
+      10 * 60_000,
+    );
+    const stop = () => {
+      stopped = true;
+      window.clearTimeout(timer);
+      unlisten();
+    };
+    const fail = (caught: unknown) => {
+      if (stopped) return;
+      stopMsf();
+      setError(caught instanceof Error ? caught.message : "Couldn’t sign in.");
+    };
+    unlisten = listenForMsfHandoff(new URL(session.apiUrl).origin, (handoff) => {
+      if (stopped || !attempt || handoff.state !== attempt.state) return;
+      // The same result can arrive by message, broadcast and storage; only the first one is used.
+      const current = attempt;
+      attempt = null;
+      try {
+        popup?.close();
+      } catch {
+        // the window may already be gone
+      }
+      if (handoff.error || !handoff.code) {
+        fail(
+          new Error(
+            handoff.error === "access_denied"
+              ? "This account doesn’t have access to comments here. Ask a project manager."
+              : "Sign-in didn’t finish. Try again.",
+          ),
+        );
+        return;
+      }
+      const code = handoff.code;
+      sessions()
+        .then((fresh) => {
+          if (!fresh) throw new Error("Comments aren’t enabled here.");
+          return finishMsfSignIn(fresh, { ...current, code });
+        })
+        .then((token) => {
+          if (stopped) return;
+          stopMsf();
+          signedIn(token);
+        })
+        .catch(fail);
+    });
+    msfAttempt.current = { state: "", verifier: "", stop };
+    setMsfWaiting(true);
+    msfAuthorization(authorizeUrl, window.location.href)
+      .then((request) => {
+        if (stopped) return;
+        attempt = { state: request.state, verifier: request.verifier };
+        msfAttempt.current = { ...attempt, stop };
+        if (popup && !popup.closed) popup.location.href = request.url;
+        else if (!window.open(request.url, "_blank"))
+          throw new Error("Allow pop-ups for this site to sign in.");
+      })
+      .catch((caught) => {
+        popup?.close();
+        fail(caught);
+      });
+  };
+
+  const disabledCard = (
+    <section
+      className="cs-card cs-unlock cs-hit"
+      data-cs-ui="disabled"
+      aria-label="Comments are off"
+    >
+      <div className="cs-unlock-icon">
+        <Icon.Lock size={14} />
+      </div>
+      <h2>Comments are off</h2>
+      <p className="cs-sub">
+        Comments are turned off for this app right now. They come back here as soon as they’re on
+        again.
+      </p>
+    </section>
+  );
+
+  const msfButton = signIn?.msf ? (
+    <>
+      <button
+        className="cs-button is-primary is-wide"
+        data-cs-ui="msf-sign-in"
+        type="button"
+        disabled={busy}
+        onClick={msfWaiting ? stopMsf : startMsf}
+      >
+        {msfWaiting ? "Waiting for sign-in… Cancel" : `Sign in with ${signIn.msf.label}`}
+      </button>
+    </>
+  ) : null;
+
+  const unlockCard = (
+    <section className="cs-card cs-unlock cs-hit" data-cs-ui="panel" aria-label="Unlock comments">
+      <div className="cs-unlock-icon">
+        <Icon.Lock size={14} />
+      </div>
+      <h2>Comments</h2>
+      <p className="cs-sub">
+        {invite
+          ? "Invite links don’t work here any more. Sign in to see and add comments."
+          : signIn?.msf
+            ? "Sign in to see and add comments."
+            : signIn && !signIn.unavailable
+              ? // The project has nowhere to sign in yet; naming a provider here would send people looking for one.
+                "Sign-in isn’t set up for this project yet. Ask whoever added comments to this app."
+              : "Sign in to see and add comments."}
+      </p>
+      {signIn?.msf ? <div className="cs-unlock-sso">{msfButton}</div> : null}
+      {signIn?.unavailable ? (
+        <p className="cs-error" data-cs-ui="error">
+          {wrongOrigin
+            ? tokenForOtherOrigin(wrongOrigin)
+            : "Couldn’t check how to sign in. Reload and try again."}
+        </p>
+      ) : !signIn ? (
+        <p className="cs-sub">Checking sign-in…</p>
+      ) : error ? (
+        <p className="cs-error" data-cs-ui="error">
+          {error}
+        </p>
+      ) : null}
+    </section>
+  );
+
+  const resetConfirm = (
+    <>
+      <div className="cs-confirm" data-cs-ui="reset-confirm">
+        <h2>Logout?</h2>
+        <p className="cs-sub">
+          You’ll be signed out and your name and preferences are cleared. Comments aren’t affected.
+        </p>
+        <div className="cs-row-end">
+          <button className="cs-button" type="button" onClick={() => setConfirmReset(false)}>
+            Cancel
+          </button>
+          <button
+            className="cs-button is-danger"
+            data-cs-ui="reset-submit"
+            type="button"
+            onClick={reset}
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </>
+  );
+  const meRow = (
+    <>
+      <div className="cs-me-row">
+        <Avatar name={renaming ?? memberName} size={27} />
+        {renaming !== null ? (
+          <form
+            className="cs-rename"
+            onSubmit={(event) => {
+              event.preventDefault();
+              const next = renaming.trim();
+              if (!next || next === memberName || !member) {
+                setRenaming(null);
+                return;
+              }
+              setBusy(true);
+              updateProfile(session, member, { displayName: next })
+                .then((updated) => {
+                  localStorage.setItem(storageKey(session), updated.token);
+                  setMember(updated.token);
+                  setProfile(updated);
+                  setName(next);
+                  setRenaming(null);
+                  say("Name updated");
+                })
+                .catch((caught) =>
+                  setError(caught instanceof Error ? caught.message : "Couldn’t rename."),
+                )
+                .finally(() => setBusy(false));
+            }}
+          >
+            <input
+              data-cs-ui="rename-input"
+              aria-label="Your name"
+              value={renaming}
+              maxLength={40}
+              autoFocus
+              onChange={(event) => setRenaming(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  setRenaming(null);
+                }
+              }}
+            />
+            <button className="cs-icon-button" type="submit" aria-label="Save name" disabled={busy}>
+              <Icon.Check />
+            </button>
+          </form>
+        ) : (
+          <div className="cs-me-name">
+            <span className="cs-me-lines">
+              <strong>{memberName}</strong>
+              <small>{profile?.email ?? readJwt(member ?? "")?.email ?? ""}</small>
+            </span>
+            <button
+              className="cs-icon-button"
+              data-cs-ui="rename"
+              type="button"
+              aria-label="Change name"
+              onClick={() => {
+                setError("");
+                setRenaming(memberName);
+              }}
+            >
+              <Icon.Pencil />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+  const emailSwitch = (
+    <>
+      <button
+        className="cs-item"
+        data-cs-ui="mention-emails"
+        type="button"
+        role="switch"
+        aria-checked={profile?.mentionEmails ?? true}
+        disabled={!profile}
+        onClick={() => {
+          if (!member || !profile) return;
+          updateProfile(session, member, { mentionEmails: !profile.mentionEmails })
+            .then((updated) => {
+              localStorage.setItem(storageKey(session), updated.token);
+              setMember(updated.token);
+              setProfile(updated);
+              say(updated.mentionEmails ? "Mention emails on" : "Mention emails off");
+            })
+            .catch((caught) =>
+              setError(caught instanceof Error ? caught.message : "Couldn’t update."),
+            );
+        }}
+      >
+        <span>Email me when mentioned</span>
+        <span className={(profile?.mentionEmails ?? true) ? "cs-switch is-on" : "cs-switch"} />
+      </button>
+    </>
+  );
+  const pinsSwitch = (
+    <>
+      <button
+        className="cs-item"
+        type="button"
+        role="switch"
+        aria-checked={!pinsHidden}
+        onClick={togglePins}
+      >
+        <span>Show pins</span>
+        <span className={pinsHidden ? "cs-switch" : "cs-switch is-on"} />
+      </button>
+    </>
+  );
+  const positionRow = (
+    <>
+      <div className="cs-item is-static">
+        <span>Position</span>
+        <span className="cs-segment" role="radiogroup" aria-label="Toolbar position">
+          {positions.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              role="radio"
+              aria-checked={!prefs.dock && barPosition === option.value}
+              className={!prefs.dock && barPosition === option.value ? "is-on" : ""}
+              onClick={() => {
+                const next = { ...prefs, position: option.value };
+                delete next.dock;
+                savePrefs(next);
+              }}
+            >
+              {option.label}
+            </button>
+          ))}
+        </span>
+      </div>
+      <p className="cs-hint">Drag the toolbar to move it.</p>
+    </>
+  );
+  const lockButtons = (
+    <>
+      <button className="cs-item" data-cs-ui="lock" type="button" onClick={lock}>
+        <span>Lock</span>
+      </button>
+      <button
+        className="cs-item is-danger"
+        data-cs-ui="reset"
+        type="button"
+        onClick={() => setConfirmReset(true)}
+      >
+        <span>Logout</span>
+      </button>
+    </>
+  );
+  const profilePane = confirmReset ? (
+    resetConfirm
+  ) : (
+    <>
+      {meRow}
+      {error ? <p className="cs-error">{error}</p> : null}
+      <div className="cs-sep" />
+      {emailSwitch}
+      <div className="cs-sep" />
+      {lockButtons}
+    </>
+  );
+
+  const settingsPane = (
+    <>
+      {pinsSwitch}
+      {positionRow}
+      <div className="cs-sep" />
+      <SettingsPanel settings={settings} onChange={changeSettings} error={error} />
+      <p className="cs-hint">S snapshot · H pins</p>
+    </>
+  );
+
+  const envChips = linked.length ? (
+    <div
+      className="cs-env-filter"
+      data-cs-ui="env-filter"
+      role="radiogroup"
+      aria-label="Environment"
+    >
+      {[
+        ["all", "Everywhere"],
+        [session.environment, `${session.environment} (here)`],
+        ...linked.map((name) => [name, name]),
+      ].map(([value, label]) => (
+        <button
+          key={value}
+          type="button"
+          role="radio"
+          aria-checked={envScope === value}
+          data-env={value}
+          className={envScope === value ? "is-on" : ""}
+          onClick={() => setEnvFilter(value)}
+        >
+          {label}
+        </button>
+      ))}
+      {live ? (
+        <span className="cs-live" data-cs-ui="live" title="Updates arrive as they happen">
+          Live
+        </span>
+      ) : null}
+    </div>
+  ) : null;
+  const envBadge = (thread: Thread) => {
+    const environment = linkedEnv(thread);
+    return environment ? (
+      <span className="cs-env" data-cs-ui="env-badge">
+        {environment}
+      </span>
+    ) : null;
+  };
+
+  const replyComposer = (thread: Thread) => {
+    if (readOnly) return null;
+    const foreign = linkedEnv(thread);
+    const replyMembers = foreign ? (foreign === replyEnv ? replyEnvMembers : []) : ownMembers;
+    const owns = replyId === thread.id;
+    return (
+      <>
+        <form
+          className="cs-reply"
+          onPointerDownCapture={() => claimReply(thread.id)}
+          onFocusCapture={() => claimReply(thread.id)}
+          // The page shield stops presses before they reach here and keeps buttons from taking focus, so a
+          // press on the paperclip (or any button of the box) would otherwise act on a box nobody claimed:
+          // the file uploaded, never showed, and was dropped on the first keystroke.
+          onClickCapture={() => claimReply(thread.id)}
+          onSubmit={async (event) => {
+            event.preventDefault();
+            if (
+              !member ||
+              !owns ||
+              (!reply.trim() && !replyFiles.ids.length) ||
+              replyFiles.uploading ||
+              marking ||
+              capturing ||
+              recording.phase !== "idle" ||
+              replyDictation.busy
+            )
+              return;
+            setBusy(true);
+            const picked = mentionsIn(reply, replyPicked.current);
+            const element = elementOf(thread);
+            const screenshot =
+              picked.length && element
+                ? await (replyShot.current ?? cropReply(element, thread.anchor.sketch)).catch(
+                    () => null,
+                  )
+                : null;
+            replyToThread(session, member, thread.id, reply, {
+              mentions: picked.map((person) => person.id),
+              screenshot,
+              attachments: replyFiles.ids,
+            })
+              .then(async (result) => {
+                setReply("");
+                replyFiles.reset();
+                setError("");
+                replyPicked.current = new Map();
+                replyShot.current = null;
+                replyPage.current = null;
+                replySnapped.current = false;
+                if (result.delivery) {
+                  setDeliveries((current) => ({
+                    ...current,
+                    [result.message.id]: result.delivery!,
+                  }));
+                  const note = deliveryText(result.delivery);
+                  if (note) say(note);
+                }
+                await refresh();
+              })
+              .catch((caught) =>
+                setError(caught instanceof Error ? caught.message : "Couldn’t reply."),
+              )
+              .finally(() => setBusy(false));
+          }}
+        >
+          <MentionTextarea
+            data-cs-ui="reply-body"
+            aria-label="Reply"
+            placeholder="Reply… (@ to mention)"
+            rows={1}
+            value={owns ? reply : ""}
+            onValueChange={(value) => {
+              if (!owns) {
+                claimReply(thread.id);
+                setReply(value);
+                return;
+              }
+              setReply(value);
+              if (!value.trim() || replySnapped.current) return;
+              replySnapped.current = true;
+              const element = elementOf(thread);
+              if (element) scheduleSnapshot("reply", element, replyFiles.add, thread.anchor.sketch);
+            }}
+            members={replyMembers}
+            selfEmail={readJwt(member ?? "")?.email}
+            onMention={(person) => {
+              replyPicked.current.set(person.id, person);
+              const element = elementOf(thread);
+              if (element && !replyShot.current)
+                replyShot.current = cropReply(element, thread.anchor.sketch);
+            }}
+            onKeyDown={(event) => {
+              if (isDictationKey(event)) {
+                event.preventDefault();
+                replyDictation.toggle(event.currentTarget);
+                return;
+              }
+              submitOnCmdEnter(event);
+            }}
+            onPaste={(event) => {
+              const files = filesFromClipboard(event);
+              if (files.length) {
+                event.preventDefault();
+                replyFiles.add(files);
+              }
+            }}
+          />
+          {replyDictation.shown && owns ? null : (
+            <AttachButtons
+              onFiles={replyFiles.add}
+              capturing={capturing || recording.phase !== "idle"}
+              onSnapshot={() =>
+                snapshot(takeShot(elementOf(thread)), replyFiles.add, thread.anchor.sketch)
+              }
+              onRecord={() => {
+                setRecordInto("reply");
+                void recording.begin(replyFiles.add);
+              }}
+              onReplay={() => attachReplay(replyFiles.add)}
+            />
+          )}
+          {owns || !replyDictation.shown ? (
+            <DictateButton
+              dictation={replyDictation}
+              field="reply-body"
+              disabled={busy || recording.phase !== "idle"}
+              compact
+            />
+          ) : null}
+          <button
+            className="cs-send"
+            data-cs-ui="reply-submit"
+            type="submit"
+            aria-label="Post reply"
+            disabled={
+              busy ||
+              capturing ||
+              recording.phase !== "idle" ||
+              !owns ||
+              replyFiles.uploading ||
+              marking ||
+              (owns && replyDictation.busy) ||
+              (!reply.trim() && !replyFiles.ids.length)
+            }
+          >
+            <Icon.Send />
+          </button>
+        </form>
+        {owns ? (
+          <AttachmentTray
+            items={replyFiles.items}
+            activeKey={trayKey}
+            onPreview={(item) => {
+              setPreview(null);
+              setTrayKey((current) => (current === item.key ? null : item.key));
+            }}
+            onRemove={replyFiles.remove}
+          />
+        ) : null}
+      </>
+    );
+  };
+
+  const openPreview = (thread: Thread, file: { id: string }) => {
+    setTrayKey(null);
+    setPreview((current) =>
+      current?.threadId === thread.id && current.fileId === file.id
+        ? null
+        : { threadId: thread.id, fileId: file.id },
+    );
+  };
+  const trayFiles = pendingPreviews(draft ? draftFiles.items : replyFiles.items);
+  const trayPane =
+    trayKey && trayFiles.some((file) => file.id === trayKey) ? (
+      <MediaPane
+        files={trayFiles}
+        fileId={trayKey}
+        onSelect={setTrayKey}
+        onClose={() => setTrayKey(null)}
+        onMarkup={(fileId, result) => {
+          const next = (draft ? draftFiles : replyFiles).replace(fileId, result);
+          setTrayKey((current) => (current === fileId ? next : current));
+        }}
+        onMarkingUp={(open) => {
+          markingUp.current = open;
+          setMarking(open);
+        }}
+      />
+    ) : null;
+  const previewFiles = visualAttachments(
+    threads.find((thread) => thread.id === preview?.threadId)?.messages,
+  );
+  const previewPane =
+    preview && previewFiles.some((file) => file.id === preview.fileId) ? (
+      <MediaPane
+        files={previewFiles}
+        fileId={preview.fileId}
+        onSelect={(fileId) => setPreview({ threadId: preview.threadId, fileId })}
+        onClose={() => setPreview(null)}
+      />
+    ) : null;
+  const activeFile = (threadId: string) => (preview?.threadId === threadId ? preview.fileId : null);
+
+  const focusThread = focusItem?.thread;
+  const focusCard =
+    focusAt && focusItem && focusThread ? (
+      <PinCard
+        x={focusAt.x}
+        y={focusAt.y}
+        bounds={bounds}
+        label={`Comment by ${focusThread.createdBy}`}
+        preview={
+          trayPane && !draft ? trayPane : preview?.threadId === focusThread.id ? previewPane : null
+        }
+      >
+        {(() => {
+          const thread = focusThread;
+          const first = thread.messages[0];
+          const foreign = linkedEnv(thread);
+          const onPage = focusItem.status === "pinned" || focusItem.status === "drifted";
+          const note = statusNote(focusItem.status, thread.anchor);
+          const ring =
+            thread.status === "resolved"
+              ? "is-done"
+              : focusItem.status === "drifted"
+                ? "is-drifted"
+                : foreign
+                  ? "is-linked"
+                  : "is-open";
+          return (
+            <article
+              className="cs-focus-thread"
+              data-cs-ui="thread"
+              data-thread-id={thread.id}
+              data-cs-status={focusItem.status}
+              data-cs-env={thread.environment ?? session.environment}
+            >
+              <header className="cs-focus-head">
+                <span className={`cs-focus-ring ${ring}`}>
+                  <Avatar name={thread.createdBy} size={21} />
+                </span>
+                <div className="cs-focus-who">
+                  <strong>{thread.createdBy}</strong>
+                  <time dateTime={thread.createdAt}>{ago(thread.createdAt)}</time>
+                  {envBadge(thread)}
+                  <RoleBadge role={thread.role} />
+                  <TicketBadge ticket={thread.ticket} />
+                </div>
+                <div className="cs-focus-tools">
+                  <button
+                    className="cs-icon-button"
+                    type="button"
+                    aria-label="Thread actions"
+                    aria-expanded={focusMenu}
+                    onClick={() => setFocusMenu((open) => !open)}
+                  >
+                    <Icon.Ellipsis />
+                  </button>
+                  {foreign || readOnly ? null : (
+                    <button
+                      className={
+                        thread.status === "resolved" ? "cs-icon-button is-done" : "cs-icon-button"
+                      }
+                      data-cs-ui="resolve"
+                      type="button"
+                      aria-label={thread.status === "resolved" ? "Reopen" : "Resolve"}
+                      onClick={() =>
+                        changeStatus(thread, thread.status === "resolved" ? "open" : "resolved")
+                      }
+                    >
+                      {thread.status === "resolved" ? <Icon.Undo /> : <Icon.Check />}
+                    </button>
+                  )}
+                  <button
+                    className="cs-icon-button"
+                    type="button"
+                    aria-label="Close thread"
+                    onClick={() => {
+                      setFocusId(null);
+                      setFocusMenu(false);
+                    }}
+                  >
+                    <Icon.Close />
+                  </button>
+                </div>
+              </header>
+              {focusMenu ? (
+                <div className="cs-focus-menu" role="menu">
+                  {onPage && thread.status === "open" ? (
+                    <button
+                      className="cs-item"
+                      type="button"
+                      role="menuitem"
+                      onClick={() => {
+                        showOnPage(thread);
+                        setFocusMenu(false);
+                      }}
+                    >
+                      <span>Show on page</span>
+                    </button>
+                  ) : null}
+                  {!foreign && !readOnly && detailsEnabled(settings) && editingId !== thread.id ? (
+                    <button
+                      className="cs-item"
+                      data-cs-ui="details-edit"
+                      type="button"
+                      role="menuitem"
+                      onClick={() => {
+                        setEditingId(thread.id);
+                        setFocusMenu(false);
+                      }}
+                    >
+                      <span>Details</span>
+                    </button>
+                  ) : null}
+                  {!foreign &&
+                  !readOnly &&
+                  !onPage &&
+                  thread.status === "open" &&
+                  here.has(thread) ? (
+                    <button
+                      className="cs-item"
+                      data-cs-ui="reattach"
+                      type="button"
+                      role="menuitem"
+                      onClick={() => {
+                        setReattachId(thread.id);
+                        setMode("reattach");
+                        setFocusId(null);
+                        setFocusMenu(false);
+                        setSurface("none");
+                      }}
+                    >
+                      <span>Reattach</span>
+                    </button>
+                  ) : null}
+                  <button
+                    className="cs-item"
+                    type="button"
+                    role="menuitem"
+                    onClick={() => openComments(thread.id)}
+                  >
+                    <span>All comments</span>
+                  </button>
+                </div>
+              ) : null}
+              <div className="cs-focus-scroll" onPointerDown={() => setFocusMenu(false)}>
+                <div className="cs-focus-body">
+                  {first && editingMessageId === first.id ? (
+                    messageEditor(thread, first, 0)
+                  ) : first?.body ? (
+                    <p className="cs-text">
+                      <MessageText body={first.body} mentions={first.mentions} />
+                    </p>
+                  ) : null}
+                  {first && editingMessageId !== first.id ? (
+                    <div className="cs-first-tools">{messageTools(thread, first)}</div>
+                  ) : null}
+                  {first && historyId === first.id ? <MessageHistory message={first} /> : null}
+                  <FieldValues fields={thread.fields} />
+                  <MessageAttachments
+                    attachments={first?.attachments}
+                    activeId={activeFile(thread.id)}
+                    onPreview={(file) => openPreview(thread, file)}
+                  />
+                  {first && deliveryText(deliveries[first.id]) ? (
+                    <div className="cs-delivery" data-cs-ui="delivery">
+                      {deliveryText(deliveries[first.id])}
+                    </div>
+                  ) : null}
+                  <div className="cs-target">
+                    <span title={thread.anchor.component?.file ?? undefined}>
+                      {targetName(thread.anchor)}
+                    </span>
+                    {note ? <span className={`cs-note is-${note.tone}`}>{note.text}</span> : null}
+                  </div>
+                </div>
+                {thread.messages.length > 1 ? (
+                  <div className="cs-focus-replies">
+                    {thread.messages.slice(1).map((message, index) => (
+                      <div
+                        key={message.id}
+                        className="cs-message"
+                        data-cs-ui="message"
+                        data-message-id={message.id}
+                      >
+                        <Avatar name={message.author} size={17} />
+                        <div className="cs-message-body">
+                          <div className="cs-meta">
+                            <strong>{message.author}</strong>
+                            <time dateTime={message.createdAt}>{ago(message.createdAt)}</time>
+                            {editingMessageId !== message.id ? messageTools(thread, message) : null}
+                          </div>
+                          {editingMessageId === message.id ? (
+                            messageEditor(thread, message, index + 1)
+                          ) : message.body ? (
+                            <p className="cs-text">
+                              <MessageText body={message.body} mentions={message.mentions} />
+                            </p>
+                          ) : null}
+                          {historyId === message.id ? <MessageHistory message={message} /> : null}
+                          <MessageAttachments
+                            attachments={message.attachments}
+                            activeId={activeFile(thread.id)}
+                            onPreview={(file) => openPreview(thread, file)}
+                          />
+                          {deliveryText(deliveries[message.id]) ? (
+                            <div className="cs-delivery" data-cs-ui="delivery">
+                              {deliveryText(deliveries[message.id])}
+                            </div>
+                          ) : null}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : null}
+                {editingId === thread.id && settings ? (
+                  <DetailsEditor
+                    settings={settings}
+                    thread={thread}
+                    onClose={() => setEditingId(null)}
+                    onSave={(patch) =>
+                      updateThread(session, member!, thread.id, patch)
+                        .then(() => refresh())
+                        .then(() => say("Details saved"))
+                        .catch((caught) =>
+                          setError(caught instanceof Error ? caught.message : "Couldn’t save."),
+                        )
+                    }
+                  />
+                ) : null}
+                {foreign ? (
+                  <p className="cs-hint cs-linked-note" data-cs-ui="linked-note">
+                    {thread.status === "resolved" ? "Resolved" : "Resolve"} in {foreign}
+                  </p>
+                ) : null}
+                {error ? (
+                  <p className="cs-error" data-cs-ui="error">
+                    {error}
+                  </p>
+                ) : null}
+              </div>
+              <div className="cs-focus-foot" onPointerDown={() => setFocusMenu(false)}>
+                {replyComposer(thread)}
+              </div>
+            </article>
+          );
+        })()}
+      </PinCard>
+    ) : null;
+
+  const ui = (
+    <div
+      id="cs-root"
+      data-react-grab-ignore=""
+      className={[
+        inside ? "cs-inside" : "cs-fixed",
+        `cs-at-${barPosition.replace("bottom-", "")}`,
+        theme === "dark" || (theme === "system" && systemDark) ? "cs-dark" : "",
+        recording.phase !== "idle" ? "is-recording" : "",
+        barFrame ? "cs-docked" : "",
+      ].join(" ")}
+      data-edge={barFrame?.edge}
+      data-side={barFrame?.side}
+      data-cs-screen={screen === "desktop" ? undefined : screen}
+      style={
+        barFrame
+          ? ({
+              "--cs-dock-x": `${barFrame.x}px`,
+              "--cs-dock-y": `${barFrame.y}px`,
+              "--cs-dock-w": `${barFrame.width}px`,
+              "--cs-dock-h": `${barFrame.height}px`,
+            } as CSSProperties)
+          : undefined
+      }
+    >
+      {recording.phase !== "idle" ? (
+        <RecordChrome
+          elapsed={recording.elapsed}
+          sound={recording.sound}
+          soundNext={recording.soundNext}
+          dictation={
+            (recordInto === "reply" ? replyId : draft)
+              ? {
+                  listening: recordDictation.listening,
+                  queued: recordDictation.state.queued,
+                  toggle: () => {
+                    dictatingWithRecording.current = !recordDictation.listening;
+                    // The screen recording carries the voice already.
+                    recordDictation.toggle(null, false);
+                  },
+                }
+              : undefined
+          }
+          onToggleSound={recording.toggleSound}
+          onStop={recording.stop}
+          onCancel={recording.cancel}
+        />
+      ) : null}
+      {mode === "select" || mode === "reattach" ? <PickOutline store={highlightStore} /> : null}
+      {mode === "draw" ? <DrawLayer onStroke={onStroke} /> : null}
+      {draft?.anchor.sketch && draftBox ? (
+        <SketchInk sketch={draft.anchor.sketch} box={draftBox} active />
+      ) : null}
+      {flash ? (
+        <div
+          className="cs-outline is-flash"
+          style={{ top: flash.top, left: flash.left, width: flash.width, height: flash.height }}
+        />
+      ) : null}
+      {focusBox && mode === "browse" ? (
+        <div
+          className="cs-outline is-selected"
+          data-cs-ui="focus-target"
+          style={{
+            top: focusBox.top,
+            left: focusBox.left,
+            width: focusBox.width,
+            height: focusBox.height,
+          }}
+        />
+      ) : null}
+      {mode !== "browse" ? (
+        <div className="cs-banner cs-hit" data-cs-ui="mode">
+          {mode === "draw" ? <Icon.Scribble /> : <Icon.Cursor />}
+          <span>
+            {mode === "reattach"
+              ? "Click the element this comment belongs to"
+              : mode === "draw"
+                ? "Circle or draw on anything to comment"
+                : "Click anything to comment"}
+          </span>
+          <button
+            type="button"
+            onClick={() => {
+              setMode("browse");
+              setReattachId(null);
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : null}
+      {pinsHidden
+        ? null
+        : scoped.map((item) =>
+            item.thread.anchor.sketch &&
+            item.box &&
+            (item.status === "pinned" || item.status === "drifted") ? (
+              <SketchInk
+                key={`ink-${item.thread.id}`}
+                sketch={item.thread.anchor.sketch}
+                box={item.box}
+                active={focusId === item.thread.id || peekId === item.thread.id}
+              />
+            ) : null,
+          )}
+      {pinsHidden
+        ? null
+        : scoped.map((item) =>
+            isUnset(item.top) ||
+            isUnset(item.left) ||
+            (item.status !== "pinned" && item.status !== "drifted") ? null : (
+              <button
+                key={item.thread.id}
+                type="button"
+                className={[
+                  "cs-pin",
+                  item.status === "drifted" ? "is-drifted" : "",
+                  linkedEnv(item.thread) ? "is-linked" : "",
+                  focusId === item.thread.id ? "is-active" : "",
+                ].join(" ")}
+                data-cs-ui="pin"
+                data-thread-id={item.thread.id}
+                data-cs-status={item.status}
+                data-cs-env={item.thread.environment ?? session.environment}
+                aria-label={`Comment by ${item.thread.createdBy}${linkedEnv(item.thread) ? ` in ${linkedEnv(item.thread)}` : ""}`}
+                aria-expanded={focusId === item.thread.id}
+                style={{
+                  top: item.top >= 0 && item.top < 12 ? 12 : item.top,
+                  left: pinLeft(item.left),
+                }}
+                onMouseEnter={() => setPeekId(item.thread.id)}
+                onMouseLeave={() => setPeekId(null)}
+                onClick={() => {
+                  setPeekId(null);
+                  setFocusMenu(false);
+                  if (focusId === item.thread.id) {
+                    setFocusId(null);
+                    return;
+                  }
+                  setSurface("none");
+                  setFocusId(item.thread.id);
+                }}
+              >
+                <Avatar name={item.thread.createdBy} size={20} />
+                {item.thread.messages.length > 1 ? (
+                  <span className="cs-pin-count">{item.thread.messages.length}</span>
+                ) : null}
+                {linkedEnv(item.thread) ? (
+                  <span className="cs-pin-env">{linkedEnv(item.thread)}</span>
+                ) : null}
+              </button>
+            ),
+          )}
+      {peek &&
+      !pinsHidden &&
+      peek.thread.id !== focusId &&
+      !isUnset(peek.top) &&
+      !isUnset(peek.left) ? (
+        <Peek x={pinLeft(peek.left)} y={peek.top} bounds={bounds}>
+          <div className="cs-meta">
+            <Avatar name={peek.thread.createdBy} size={14} />
+            <strong>{peek.thread.createdBy}</strong>
+            <time>{ago(peek.thread.createdAt)}</time>
+            {envBadge(peek.thread)}
+          </div>
+          <p className="cs-text">
+            <MessageText
+              body={peek.thread.messages[0]?.body ?? ""}
+              mentions={peek.thread.messages[0]?.mentions}
+            />
+          </p>
+          {peek.thread.messages.length > 1 ? (
+            <div className="cs-replies">
+              {peek.thread.messages.length - 1}{" "}
+              {peek.thread.messages.length === 2 ? "reply" : "replies"}
+            </div>
+          ) : null}
+        </Peek>
+      ) : null}
+      {focusCard}
+      {(() => {
+        if (!draft) return null;
+        // Beside a page screenshot the composer is a column of the surface, not a card next to an element.
+        const docked = pageDraft;
+        const composer = (
+          <form
+            className={`cs-card cs-composer cs-hit${docked ? " is-docked" : ""}${composerSize && !docked ? " is-sized" : ""}${resizingComposer ? " is-resizing" : ""}`}
+            ref={composerRef}
+            data-cs-ui="composer"
+            data-cs-target={[draft.anchor.component?.file, targetName(draft.anchor)]
+              .filter(Boolean)
+              .join(" · ")}
+            style={
+              docked
+                ? undefined
+                : composerSize
+                  ? { ...composerStyle, width: composerSize.width, minHeight: composerSize.height }
+                  : composerStyle
+            }
+            onSubmit={async (event) => {
+              event.preventDefault();
+              // Read first: a submit that stops below must not leave "Send as is" set for the next one.
+              const how = clarity.takeSend();
+              if (
+                !member ||
+                !canPost ||
+                (draftFiles.uploading && !docked) ||
+                marking ||
+                capturing ||
+                recording.phase !== "idle" ||
+                draftDictation.busy ||
+                clarity.dictating
+              )
+                return;
+              const missing = testerForm ? missingTicketFields(testerForm, ticketValues) : [];
+              if (missing.length) {
+                setError(`Fill in ${missing.join(", ")}.`);
+                return;
+              }
+              const ticket = testerForm ? ticketDraftPayload(testerForm, ticketValues) : null;
+              setBusy(true);
+              let attachments = draftFiles.ids;
+              let fileKeys = draftFiles.items.map((item) => item.key);
+              if (docked) {
+                // What was drawn on each picture goes into it now, and the uploads are waited for, not asked for.
+                try {
+                  for (const item of draftFiles.items) {
+                    const drawn = captureShapes.get(item.key);
+                    if (!drawn) continue;
+                    const flattened = await flattenCapture(item, drawn);
+                    if (!flattened) continue;
+                    const next = draftFiles.replace(item.key, flattened);
+                    if (!next) {
+                      setBusy(false);
+                      return;
+                    }
+                    withShapes((shapes) => {
+                      shapes.delete(item.key);
+                      shapes.set(next, drawn);
+                    });
+                    if (shot?.key === item.key) setShot({ key: next });
+                  }
+                } catch (caught) {
+                  setError(caught instanceof Error ? caught.message : "Couldn’t save a picture.");
+                  setBusy(false);
+                  return;
+                }
+                const files = await draftFiles.settled();
+                const failed = files.find((item) => item.status === "failed");
+                if (failed) {
+                  setError(
+                    failed.error
+                      ? `${failed.name}: ${failed.error}`
+                      : `${failed.name} didn’t upload.`,
+                  );
+                  setBusy(false);
+                  return;
+                }
+                attachments = files
+                  .filter((item) => item.status === "ready" && item.id)
+                  .map((item) => item.id!);
+                fileKeys = files.map((item) => item.key);
+              }
+              // Where the environment checks new comments, a reader's questions come before the post. This
+              // always answers, and where it has nothing to ask (or could not ask) the text is `body`, untouched.
+              const sent = await clarity.send(
+                {
+                  body,
+                  url: new URL(draft.href ?? pageHref(), window.location.origin).href,
+                  route: draft.anchor.route,
+                  target: docked ? "the whole page" : targetName(draft.anchor),
+                  attachmentIds: attachments,
+                  fileKeys,
+                  posted: {
+                    ...detailsPayload(settings, draftDetails),
+                    ...(ticket ? { ticket } : {}),
+                  },
+                },
+                how,
+              );
+              if (!sent.post) {
+                setBusy(false);
+                return;
+              }
+              const picked = mentionsIn(body, draftPicked.current);
+              const screenshot = picked.length
+                ? await (draftShot.current ?? cropDraft(draft.element, draft.anchor.sketch)).catch(
+                    () => null,
+                  )
+                : null;
+              // After the clarity check, so the context never reaches its model. A message holds five files;
+              // the person's own come first.
+              const contextId =
+                attachments.length < MAX_FILES_PER_MESSAGE
+                  ? await uploadDebugContext(
+                      debugCapture.current,
+                      {
+                        element: docked ? null : draft.element,
+                        anchor: draft.anchor,
+                        steps: replayBuffer.current.events(),
+                      },
+                      (blob, name) => uploadAttachment(session, member, blob, name),
+                    )
+                  : null;
+              createThread(session, member, draft.anchor, sent.body, {
+                mentions: picked.map((person) => person.id),
+                screenshot,
+                attachments: contextId ? [...attachments, contextId] : attachments,
+                url: draft.href ?? pageHref(),
+                ...detailsPayload(settings, draftDetails),
+                ...(ticket ? { ticket } : {}),
+                ...(draftKind ? { kind: draftKind } : {}),
+              })
+                .then(async ({ thread, delivery }) => {
+                  setDraft(null);
+                  setBody("");
+                  setDraftDetails(noDetails);
+                  setDraftKind(null);
+                  setTicketValues({});
+                  draftFiles.reset();
+                  setError("");
+                  draftPicked.current = new Map();
+                  draftShot.current = null;
+                  draftPage.current = null;
+                  void draftStore?.clear();
+                  setStored(null);
+                  resetPageDraft();
+                  const firstId = thread.messages[0]?.id;
+                  const note = delivery ? deliveryText(delivery) : "";
+                  if (delivery && firstId)
+                    setDeliveries((current) => ({ ...current, [firstId]: delivery }));
+                  // Posting opens nothing: the composer closes, the pin appears and the person carries on.
+                  say(note || "Comment posted");
+                  await refresh();
+                })
+                .catch((caught) =>
+                  setError(caught instanceof Error ? caught.message : "Couldn’t post."),
+                )
+                .finally(() => setBusy(false));
+            }}
+          >
+            {docked ? null : (
+              <ResizeGrip
+                room={() => overlayBounds(portal ?? document.body)}
+                onResize={setResizingComposer}
+                onEnd={(size) => {
+                  setResizingComposer(null);
+                  savePrefs({ ...prefsRef.current, composerSize: size });
+                }}
+                onReset={() => {
+                  setResizingComposer(null);
+                  const { composerSize: _reset, ...rest } = prefsRef.current;
+                  savePrefs(rest);
+                }}
+              />
+            )}
+            <button
+              className="cs-icon-button cs-composer-close"
+              type="button"
+              aria-label={docked ? "Minimise" : "Discard"}
+              onClick={() => (docked ? setCollecting(true) : setDraft(null))}
+            >
+              <Icon.Close />
+            </button>
+            <div
+              className="cs-composer-body"
+              onClick={(event) => {
+                // A resized box has room below the text: a click there writes, like in the text itself.
+                // (Docked, the body hugs the text, so this never fires on the column's space below.)
+                // (A click, because the toolbar's shield stops mousedown before React sees it.)
+                if (event.target !== event.currentTarget) return;
+                const field = composerField();
+                if (!field) return;
+                field.focus();
+                field.setSelectionRange(field.value.length, field.value.length);
+              }}
+            >
+              <MentionTextarea
+                data-cs-ui="composer-body"
+                aria-label="Comment"
+                placeholder="Add a comment… (@ to mention)"
+                value={body}
+                autoFocus
+                grow
+                onValueChange={setBody}
+                members={ownMembers}
+                selfEmail={readJwt(member ?? "")?.email}
+                onMention={(person) => {
+                  draftPicked.current.set(person.id, person);
+                  if (!draftShot.current)
+                    draftShot.current = cropDraft(draft.element, draft.anchor.sketch);
+                }}
+                onKeyDown={(event) => {
+                  if (isDictationKey(event)) {
+                    event.preventDefault();
+                    draftDictation.toggle(event.currentTarget);
+                    return;
+                  }
+                  submitOnCmdEnter(event);
+                }}
+                onPaste={(event) => {
+                  const files = filesFromClipboard(event);
+                  if (files.length) {
+                    event.preventDefault();
+                    draftFiles.add(files);
+                  }
+                }}
+              />
+            </div>
+            <DetailsInput
+              settings={settings}
+              value={draftDetails}
+              onChange={setDraftDetails}
+              onKeyDown={submitOnCmdEnter}
+            />
+            <KindInput value={draftKind} onChange={setDraftKind} />
+            {memberType === "tester" ? (
+              testerForm ? (
+                <TicketFormInput
+                  form={testerForm}
+                  values={ticketValues}
+                  onChange={setTicketValues}
+                  onKeyDown={submitOnCmdEnter}
+                />
+              ) : (
+                <p className="cs-hint cs-pad" data-cs-ui="ticket-form-status">
+                  {ticketFormError || "Loading the ticket form…"}
+                </p>
+              )
+            ) : null}
+            <AttachmentTray
+              // The page screenshot is the surface itself, not a tray item, while the composer is docked beside it.
+              items={
+                docked
+                  ? draftFiles.items.filter(
+                      (item) => !captures.some((file) => file.id === item.key),
+                    )
+                  : draftFiles.items
+              }
+              activeKey={docked ? null : trayKey}
+              onPreview={
+                docked
+                  ? undefined
+                  : (item) => {
+                      setPreview(null);
+                      setTrayKey((current) => (current === item.key ? null : item.key));
+                    }
+              }
+              onRemove={draftFiles.remove}
+            />
+            <ClarityQuestions
+              clarity={clarity}
+              mode={clarityMode}
+              body={body}
+              busy={busy}
+              voice={{
+                transcribe,
+                names: memberNames,
+                onNote: setError,
+                off: busy || recording.phase !== "idle",
+              }}
+              onKeyDown={submitOnCmdEnter}
+            />
+            {error ? <p className="cs-error cs-pad">{error}</p> : null}
+            <div className="cs-composer-foot">
+              {draftDictation.shown ? null : (
+                <AttachButtons
+                  onFiles={draftFiles.add}
+                  capturing={capturing || recording.phase !== "idle"}
+                  onSnapshot={() =>
+                    snapshot(takeShot(draft.element), draftFiles.add, draft.anchor.sketch)
+                  }
+                  onRecord={() => {
+                    setRecordInto("draft");
+                    void recording.begin(draftFiles.add);
+                  }}
+                  onReplay={() => attachReplay(draftFiles.add)}
+                />
+              )}
+              <DictateButton
+                dictation={draftDictation}
+                field="composer-body"
+                disabled={busy || recording.phase !== "idle"}
+              />
+              {capturing || (draftFiles.uploading && !docked) || busy || marking ? (
+                <span className="cs-hint">
+                  {capturing
+                    ? "Capturing…"
+                    : draftFiles.uploading && !docked
+                      ? "Uploading…"
+                      : clarity.checking
+                        ? CLARITY_WORDS.working
+                        : busy
+                          ? "Posting…"
+                          : "Marking up…"}
+                </span>
+              ) : null}
+              <button
+                className="cs-send"
+                data-cs-ui="composer-submit"
+                type="submit"
+                aria-label="Post comment"
+                aria-busy={clarity.checking || undefined}
+                disabled={
+                  busy ||
+                  capturing ||
+                  recording.phase !== "idle" ||
+                  (draftFiles.uploading && !docked) ||
+                  marking ||
+                  draftDictation.busy ||
+                  clarity.dictating ||
+                  !canPost
+                }
+              >
+                <Icon.Send />
+              </button>
+            </div>
+            {trayPane && !docked ? (
+              <MediaPop bounds={bounds} left={composerStyle.left} top={composerStyle.top}>
+                {trayPane}
+              </MediaPop>
+            ) : null}
+          </form>
+        );
+        if (!docked) return composer;
+        if (collecting) return null;
+        return (
+          <ShotSurface
+            captures={captures}
+            selectedId={shot?.key ?? null}
+            shapes={captureShapes}
+            savedAt={savedAt}
+            onSelect={(id) => setShot({ key: id })}
+            onRemove={(id) => {
+              draftFiles.remove(id);
+              withShapes((shapes) => shapes.delete(id));
+            }}
+            onShapes={(id, next) => withShapes((shapes) => shapes.set(id, next))}
+            onAnother={() => setCollecting(true)}
+            onRecord={recordIntoDraft}
+            onDictate={() => {
+              const field = composerField();
+              if (field) draftDictation.toggle(field);
+            }}
+            dictating={draftDictation.listening}
+            onMinimise={() => setCollecting(true)}
+            onDiscard={discardDraft}
+            confirmDiscard={confirmDiscard}
+            onSubmit={() => composerForm()?.requestSubmit()}
+          >
+            {composer}
+          </ShotSurface>
+        );
+      })()}
+      {draftDock
+        ? (() => {
+            const live = draftDock === "collecting";
+            const about = live
+              ? describeDraft({
+                  body,
+                  captures: draftFiles.items.map((item) => ({ type: item.contentType })),
+                })
+              : describeDraft(stored!);
+            return (
+              <DraftDock
+                title={about.title}
+                pictures={about.pictures}
+                clips={about.clips}
+                savedAt={live ? savedAt : stored!.updatedAt}
+                mode={draftDock}
+                note={live ? undefined : stored!.note}
+                recording={recording.phase !== "idle"}
+                confirmDiscard={confirmDiscard}
+                onCapture={() => void addCapture()}
+                onRecord={recordIntoDraft}
+                onOpen={() => (live ? setCollecting(false) : resumeDraft(stored!))}
+                onDiscard={discardDraft}
+              />
+            );
+          })()
+        : null}
+      {surface === "unlock" && disabled
+        ? disabledCard
+        : surface === "unlock" && !member
+          ? unlockCard
+          : null}
+      {surface === "dashboard" && member ? (
+        <Dashboard
+          rows={scoped}
+          here={here}
+          environment={session.environment}
+          memberName={memberName}
+          memberId={memberId}
+          roles={settings?.roles.enabled ? settings.roles.options : []}
+          members={ownMembers}
+          session={session}
+          memberToken={member}
+          envFilter={envChips}
+          profile={profilePane}
+          settingsPane={settingsPane}
+          onClose={() => setSurface("none")}
+          onRefresh={refresh}
+          readOnly={readOnly}
+          screen={dashboardScreen}
+          onScreen={setDashboardScreen}
+          focus={dashboardFocus}
+          onOpen={(row) => {
+            const item = placed.find((candidate) => candidate.thread.id === row.thread.id);
+            if (item) showThread(item);
+          }}
+          onReattach={(row) => {
+            setReattachId(row.thread.id);
+            setMode("reattach");
+            setFocusId(null);
+            setFocusMenu(false);
+            setSurface("none");
+          }}
+        />
+      ) : null}
+      {toast ? (
+        <div key={toast} className="cs-toast" role="status">
+          {toast}
+        </div>
+      ) : null}
+      {draftDock ? null : bar}
+    </div>
+  );
+
+  return createPortal(ui, host);
+}