refactor(ui): the popover engine and every render-phase ref write compile under the React Compiler

E32 S3. The compiler skipped 93 functions; it now skips 29 (try/finally shapes, two suppressions,
VirtualGrid). react-hooks/refs hits 245 -> 31.

- Popover engine: `ref={pop.refs.setReference}` made the compiler treat the whole popover handle as
  a ref, so every component holding one was skipped (21 call sites, the engine and its surface
  among them). The setter is destructured now; the same for useScrollFade and useReturnFocus.
- Render-phase `ref.current = x` writes moved to `useEffectEvent` where only effects read them,
  else to the new `useLatest` (written in a layout effect) / `useStableCallback`.
- FocusSafeButton (under every Button) read the focused element during render; it reads it through
  useSyncExternalStore, which React asks on every render instead of a cached memo.

Bugs this surfaced, fixed:
- Combobox: a chip could keep showing its raw id. The label cache was a ref an effect filled after
  the render that needed it; it is state merged during render now (test seen RED).
- useUndoable rendered from a ref plus a forced re-render; compiled, that memoizes a stale value.
  The history is state now, mirrored in a ref for the stable callbacks.
- ConfigPanel and the saved-views editor re-seeded their drafts in an effect, painting the stale
  draft for a frame; both adjust during render against the remembered key.
- Toaster's handover is written after commit instead of during render; a new test pins that the
  inherited set is taken once, at the takeover (seen RED on a per-render re-read).
- IssueComposer mutated a ref prop as a one-shot focus token; it is plain state.
- PlexBrowse wrote its info-scroll memory from an effect declared before the ref, past its own
  "one writer" rule; the writer comes first now and the effect goes through it.

The compiler ratchet drops to the measured 29 and now also requires FocusSafeButton and the popover
engine to compile.

frontend/src/components/IssueComposer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState, type DragEvent, type RefObject } from "react";
+import { useEffect, useEffectEvent, useMemo, useRef, useState, type DragEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ExternalLink, FileText, Plus, Server, X } from "lucide-react";
@@ -132,8 +132,9 @@ function ComposerBody({
   const [reviewing, setReviewing] = useState<Source | null>(null);
   const issueLink = useRef<HTMLAnchorElement>(null);
   const retryButton = useRef<HTMLButtonElement>(null);
-  // The log whose review just closed: its Review button takes the focus back.
-  const reviewed = useRef<Source | null>(null);
+  // The log whose review just closed: its Review button takes the focus back when the attachments
+  // mount again (they unmount while a review is open).
+  const [reviewed, setReviewed] = useState<Source | null>(null);
   const sent = session.issue_url !== null;
 
   const shotsQ = useQuery({
@@ -231,19 +232,17 @@ function ComposerBody({
   });
   const locked = sent || send.isPending || sending;
 
-  const saveRef = useRef(save.mutate);
-  saveRef.current = save.mutate;
+  const saveNow = useEffectEvent(() => save.mutate());
   useEffect(() => {
     if (locked || !unsaved) return;
-    const timer = window.setTimeout(() => saveRef.current(), SAVE_DELAY_MS);
+    const timer = window.setTimeout(() => saveNow(), SAVE_DELAY_MS);
     return () => window.clearTimeout(timer);
   }, [body, form.title, locked, unsaved]);
   // Closed before the typing paused: save what is still waiting, now.
-  const flushRef = useRef(() => {});
-  flushRef.current = () => {
+  const flush = useEffectEvent(() => {
     if (unsaved && !locked) save.mutate();
-  };
-  useEffect(() => () => flushRef.current(), []);
+  });
+  useEffect(() => () => flush(), []);
 
   // Screenshots are added here, not in the attachments column: an image pasted ANYWHERE in the
   // composer is taken — while typing the description is exactly when one is pasted.
@@ -252,8 +251,7 @@ function ComposerBody({
     meta: { failTitle: "recorder.pill.shotFailed" },
     onSuccess: () => refreshShots(qc, session.id),
   });
-  const addRef = useRef(addShot.mutate);
-  addRef.current = addShot.mutate;
+  const addImage = useEffectEvent((image: Blob) => addShot.mutate(image));
   const root = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (locked) return;
@@ -265,7 +263,7 @@ function ComposerBody({
       const images = [...(e.clipboardData?.files ?? [])].filter(isImage);
       if (!images.length) return;
       e.preventDefault();
-      for (const image of images) addRef.current(image);
+      for (const image of images) addImage(image);
     };
     document.addEventListener("paste", onPaste);
     return () => document.removeEventListener("paste", onPaste);
@@ -393,7 +391,7 @@ function ComposerBody({
             }))
           }
           onDone={() => {
-            reviewed.current = reviewing;
+            setReviewed(reviewing);
             setReviewing(null);
           }}
         />
@@ -606,7 +604,7 @@ function Attachments({
   adding: boolean;
   onAdd: (files: Iterable<File>) => void;
   onReview: (source: Source) => void;
-  reviewed: RefObject<Source | null>;
+  reviewed: Source | null;
 }) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -615,13 +613,10 @@ function Attachments({
   // A removed screenshot's ✕ goes with it: the focus moves to the file picker, which stays.
   const pick = useRef<HTMLInputElement>(null);
   const reviewButtons = useRef<Partial<Record<Source, HTMLButtonElement | null>>>({});
-  // eslint-disable-next-line react-hooks/immutability -- the effect that consumes the caller's one-shot focus token (see the write below)
+  // On mount after a review closed (this list unmounts while one is open), that log's Review button
+  // takes the focus back. Only a mount or a new review moves it, so no later render steals it.
   useEffect(() => {
-    const source = reviewed.current;
-    if (!source) return;
-    // eslint-disable-next-line react-hooks/immutability -- a ONE-SHOT token, consumed: the parent sets it to say "give this source's review button the focus back when the list re-renders", and clearing it here is what stops the focus being stolen on every later render. The ref is the caller's, which is why it is a dependency rather than a local.
-    reviewed.current = null;
-    reviewButtons.current[source]?.focus();
+    if (reviewed) reviewButtons.current[reviewed]?.focus();
   }, [reviewed]);
   const remove = useMutation({
     mutationFn: (shotId: number) => api.removeDebugScreenshot(session.id, shotId),