fix(diagnostics): deep-review round 1 — a send that cannot race, lose or repeat itself

The send, the draft and the screenshots take the session's row lock, so an
autosave or a paste during a send waits for it and then sees it, and two sends
cannot open two issues. A save keeps the delivery's progress; a failed edit
that shows the screenshots is finished by the retry; an answer that is not the
tracker's API (a redirect, a proxy page) is refused, not a crash that loses the
issue's record. Only an attempt that opened an issue counts toward the pace.

Screenshots: deleting one after the send is refused, a user's storage is
capped across sessions, new sessions and zip exports are paced, images are
stored uncompressed in the zip. One liveness rule, one session view, one image
type table.

Logging: a session's elevation is tracked apart from the user's own, so the
browser's own requests (no header) no longer lower the floor a session needs;
Stop ends it at once.

Composer: an image pasted anywhere is taken; what is still unsaved is saved on
close, and "saved" is shown only when it is; the draft is held while it is
sent; a failed screenshot read says so instead of reading as none; focus moves
to what stays; the preview follows the text size. Pill: the step prompt and a
running Stop survive the pill moving between hosts, the prompt keeps the
dialog's Tab trap, the toast region lets clicks through, other tabs hear of a
Start or Stop, the last seconds are sent before the cap, a capture with no
frame is an error.

frontend/src/components/DebugRecorder.dom.test.tsx

@@ -6,6 +6,7 @@
 // dialog the pill sits in. i18n is a key-passthrough with its params; the API is stubbed and `me`
 // lives in a real query cache, as in the app.
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useState } from "react";
 import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
@@ -24,7 +25,9 @@ vi.mock("react-i18next", async (importOriginal) => {
   };
 });
 
-const { order, session, startDebugSession, stopDebugSession } = vi.hoisted(() => {
+const { order, session, startDebugSession, stopDebugSession, hold } = vi.hoisted(() => {
+  // A Stop held open until released, when a test needs it in flight.
+  const hold = { stop: null as Promise<void> | null };
   const order: string[] = [];
   const session = (over: Partial<DebugSession> = {}): DebugSession => ({
     id: "0123456789abcdef",
@@ -42,14 +45,15 @@ const { order, session, startDebugSession, stopDebugSession } = vi.hoisted(() =>
   const startDebugSession = vi.fn((level: "DEBUG" | "TRACE") =>
     Promise.resolve({ ok: true as const, session: session({ level }) }),
   );
-  const stopDebugSession = vi.fn((id: string) => {
+  const stopDebugSession = vi.fn(async (id: string) => {
     order.push("stop");
-    return Promise.resolve({
+    if (hold.stop) await hold.stop;
+    return {
       ok: true as const,
       session: session({ id, ended_at: new Date().toISOString(), ended_reason: "stopped" }),
-    });
+    };
   });
-  return { order, session, startDebugSession, stopDebugSession };
+  return { order, session, startDebugSession, stopDebugSession, hold };
 });
 vi.mock("../lib/api", async (importOriginal) => {
   const actual = await importOriginal<typeof import("../lib/api")>();
@@ -69,16 +73,23 @@ vi.mock("../lib/diagnostics", async (importOriginal) => {
 import DebugRecorder from "./DebugRecorder";
 import Modal from "./ui/Modal";
 import Toaster from "./ui/Toaster";
-import { closeComposer, openRecorderStart, useComposerSession } from "../lib/debugRecorder";
+import {
+  closeComposer,
+  openRecorderStart,
+  setStepPrompt,
+  useComposerSession,
+} from "../lib/debugRecorder";
 import { events } from "../lib/log";
 
 beforeEach(() => {
   order.length = 0;
+  hold.stop = null;
   sessionStorage.clear();
 });
 afterEach(() => {
   cleanup();
   closeComposer();
+  setStepPrompt(null);
   vi.clearAllMocks();
   vi.useRealTimers();
 });
@@ -112,6 +123,21 @@ function mount(me: Partial<Me>, extra: React.ReactNode = null) {
 
 const pill = () => screen.queryByRole("group", { name: "recorder.pill.label" });
 
+/** A dialog the test opens and closes while the pill is up: the pill moves into its toast host. */
+function DialogToggle() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen((v) => !v)}>toggle dialog</button>
+      {open && (
+        <Modal title="dialog" onClose={() => setOpen(false)}>
+          <p>inside</p>
+        </Modal>
+      )}
+    </>
+  );
+}
+
 describe("the recorder pill", () => {
   it("shows while a session records, under the toasts and outside their live region", () => {
     mount({ debug_session: session() });
@@ -173,6 +199,57 @@ describe("the recorder pill", () => {
     expect(marked()).toBe(before);
   });
 
+  it("Tab from the step prompt stays inside the dialog the pill sits in", () => {
+    mount(
+      { debug_session: session() },
+      <Modal title="dialog" onClose={() => {}}>
+        <p>inside</p>
+      </Modal>,
+    );
+    fireEvent.click(within(pill()!).getByRole("button", { name: "recorder.pill.step" }));
+    const mark = screen.getByRole("button", { name: "recorder.pill.mark" });
+    mark.focus();
+    // The dialog's trap takes the Tab (jsdom has no layout, so it can only be seen taking it — the
+    // browser would otherwise walk out of the dialog into the page behind its scrim).
+    const unhandled = fireEvent.keyDown(mark, { key: "Tab" });
+    expect(unhandled).toBe(false);
+  });
+
+  it("the step prompt keeps what was typed when the pill moves to a dialog and back", () => {
+    mount({ debug_session: session() }, <DialogToggle />);
+    fireEvent.click(within(pill()!).getByRole("button", { name: "recorder.pill.step" }));
+    fireEvent.change(screen.getByLabelText(/recorder.pill.stepPrompt/), {
+      target: { value: "opened the player" },
+    });
+    fireEvent.click(screen.getByText("toggle dialog"));
+    expect(pill()!.closest('[role="dialog"]')).not.toBeNull(); // moved: a new pill
+    expect((screen.getByLabelText(/recorder.pill.stepPrompt/) as HTMLInputElement).value).toBe(
+      "opened the player",
+    );
+  });
+
+  it("a Stop still running keeps its button busy after the pill moves", async () => {
+    let release = () => {};
+    hold.stop = new Promise((r) => (release = r));
+    mount({ debug_session: session() }, <DialogToggle />);
+    fireEvent.click(within(pill()!).getByRole("button", { name: "recorder.pill.stop" }));
+    await waitFor(() => expect(order).toContain("stop"));
+    fireEvent.click(screen.getByText("toggle dialog"));
+    const stop = within(pill()!).getByRole("button", { name: "recorder.pill.stop" });
+    expect(stop.getAttribute("aria-busy")).toBe("true");
+    release();
+    await waitFor(() => expect(pill()).toBeNull());
+  });
+
+  it("a Start or a Stop in another tab makes this one ask the server again", async () => {
+    const qc = mount({ debug_session: session() });
+    const invalidate = vi.spyOn(qc, "invalidateQueries");
+    const otherTab = new BroadcastChannel("siftlode.debugSession");
+    otherTab.postMessage("changed");
+    await waitFor(() => expect(invalidate).toHaveBeenCalledWith({ queryKey: qk.me() }));
+    otherTab.close();
+  });
+
   it("offers a screenshot only where the browser can capture a tab", () => {
     mount({ debug_session: session() });
     // jsdom has no Screen Capture API — like iOS Safari.