fix(preview): clear the selected image when its file is removed

Removing a file left `selectedImage` pointing at a path the form no longer
contains. That was already wrong -- the mask preview kept describing a frame
the user had deleted -- but dropping queued RAW conversions made it fail
outright: the shared cache entry aborts, so the metadata promise derived from
it rejects, and it is memoized on the path. `page.tsx`'s submit handler awaits
that promise outside its try block, so pressing Run did nothing at all, with no
toast and no recorded attempt, until a different preview image was selected.
`lens-mask-input.tsx` reads the same promise with `use()` inside a Suspense
with no ErrorBoundary above it.

`onRemove` and `onRemoveIndex` now clear the selection when it points at a file
being removed, which unmounts the `use()` consumer in the same commit, well
before the deferred `AbortError` arrives. `useGenericImageMetadata` also
attaches a swallowing handler where it memoizes the promise, so one created
before the removal cannot surface as an unhandled rejection afterwards; the
original promise is still returned, so a genuine conversion failure keeps
rejecting rather than looking like an image with no dimensions.

The spec and plan are corrected to the shipped code: `flags: EntryFlags` rather
than flat fields, the drop check testing `done` as well as `started`, and the
"no new unhandled-rejection surface" claim replaced by what is actually true --
that analysis enumerated two handlers and missed the metadata consumer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: adulbrich

__tests__/image-matrix-selection-clear.test.tsx

@@ -0,0 +1,171 @@
+import { describe, expect, it } from "@jest/globals";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useForm } from "react-hook-form";
+
+declare const jest: typeof import("@jest/globals").jest;
+
+jest.mock("@tauri-apps/plugin-dialog", () => ({
+  open: () => Promise.resolve(null),
+}));
+jest.mock("@tauri-apps/plugin-fs", () => ({
+  readDir: () => Promise.resolve([]),
+  stat: () => Promise.resolve({ isDirectory: false, isFile: true, size: 1024 }),
+}));
+
+import {
+  SelectedImageProvider,
+  useSelectedImage,
+} from "../src/app/home-page/selected-image-context";
+import { ImageMatrixInput } from "../src/components/ui/image-matrix-input";
+import type { ImageSet } from "../src/components/ui/image-set-preview";
+import { TooltipProvider } from "../src/components/ui/tooltip";
+
+interface FormValues {
+  inputSets: ImageSet[];
+}
+
+// JPEGs rather than RAW files, for the same reason as `image-matrix-lock`: a
+// CR2 would drag the TIFF decode worker into a test about which file stays
+// selected.
+const SCENE1_FIRST = "/photos/scene1/capt01.jpg";
+const SCENE1_SECOND = "/photos/scene1/capt02.jpg";
+const SCENE2_ONLY = "/photos/scene2/capt03.jpg";
+
+const twoSets: ImageSet[] = [
+  { files: [SCENE1_FIRST, SCENE1_SECOND], name: "scene1" },
+  { files: [SCENE2_ONLY], name: "scene2" },
+];
+
+const NOTHING_SELECTED = "none";
+
+const REMOVE_SCENE1 = /remove image set scene1/i;
+const REMOVE_SCENE2 = /remove image set scene2/i;
+
+function SelectionProbe() {
+  const { selectedImage } = useSelectedImage();
+
+  return <p data-testid="selected">{selectedImage ?? NOTHING_SELECTED}</p>;
+}
+
+function Harness() {
+  const { control } = useForm<FormValues>({
+    defaultValues: { inputSets: twoSets.map((set) => ({ ...set })) },
+  });
+
+  return (
+    <TooltipProvider>
+      <SelectedImageProvider>
+        <ImageMatrixInput control={control} name="inputSets" />
+        <SelectionProbe />
+      </SelectedImageProvider>
+    </TooltipProvider>
+  );
+}
+
+const settle = () => act(() => new Promise((r) => setTimeout(r, 0)));
+
+async function renderPanel() {
+  // The file statistics resolve through a suspended child, so the first paint
+  // is awaited rather than taken synchronously.
+  let view: ReturnType<typeof render> | undefined;
+  await act(() => {
+    view = render(<Harness />);
+    return Promise.resolve();
+  });
+  await settle();
+  if (!view) {
+    throw new Error("expected the panel to render");
+  }
+
+  return view;
+}
+
+function thumbnails(container: HTMLElement): Element[] {
+  // One per file, in the order the rows render them, which is each set's files
+  // sorted -- the same order `onRemoveIndex` resolves against.
+  return Array.from(container.querySelectorAll(".generic-image-container"));
+}
+
+function thumbnailAt(container: HTMLElement, index: number): Element {
+  const thumbnail = thumbnails(container)[index];
+  if (!thumbnail) {
+    throw new Error(`expected a thumbnail at ${index}`);
+  }
+
+  return thumbnail;
+}
+
+async function selectThumbnail(container: HTMLElement, index: number) {
+  fireEvent.click(thumbnailAt(container, index));
+  await settle();
+}
+
+async function removeThumbnail(container: HTMLElement, index: number) {
+  // The context menu's trigger is the thumbnail wrapper, and a contextmenu
+  // event only bubbles up.
+  fireEvent.contextMenu(thumbnailAt(container, index));
+  await settle();
+  fireEvent.click(screen.getByText("Remove image"));
+  await settle();
+}
+
+function selected(): string {
+  const probe = screen.getByTestId("selected").textContent;
+
+  return probe ?? "";
+}
+
+describe("removing the file that is selected", () => {
+  // Left selected, the mask preview keeps asking for the dimensions of a frame
+  // the form no longer holds. For a RAW frame that is worse than stale: its
+  // queued conversion is dropped along with it, so the metadata promise the
+  // submit handler awaits rejects, and it is memoized on the path -- every
+  // later run awaits the same permanently rejected promise.
+  it("clears the selection when its whole set is removed", async () => {
+    const { container } = await renderPanel();
+
+    await selectThumbnail(container, 0);
+    expect(selected()).toBe(SCENE1_FIRST);
+
+    fireEvent.click(screen.getByRole("button", { name: REMOVE_SCENE1 }));
+    await settle();
+
+    expect(selected()).toBe(NOTHING_SELECTED);
+  });
+
+  it("clears the selection when that one frame is removed", async () => {
+    const { container } = await renderPanel();
+
+    await selectThumbnail(container, 0);
+    expect(selected()).toBe(SCENE1_FIRST);
+
+    await removeThumbnail(container, 0);
+
+    expect(selected()).toBe(NOTHING_SELECTED);
+  });
+});
+
+describe("removing a file that is not selected", () => {
+  // The clear has to be as narrow as the removal, or every removal anywhere in
+  // the panel would empty a preview the user is still working with.
+  it("keeps the selection when another set is removed", async () => {
+    const { container } = await renderPanel();
+
+    await selectThumbnail(container, 0);
+
+    fireEvent.click(screen.getByRole("button", { name: REMOVE_SCENE2 }));
+    await settle();
+
+    expect(selected()).toBe(SCENE1_FIRST);
+  });
+
+  it("keeps the selection when a sibling frame is removed", async () => {
+    const { container } = await renderPanel();
+
+    await selectThumbnail(container, 0);
+
+    await removeThumbnail(container, 1);
+
+    expect(selected()).toBe(SCENE1_FIRST);
+  });
+});

docs/superpowers/plans/2026-08-01-raw-conversion-cancellation.md

@@ -295,7 +295,9 @@ EOF
 |---|---|---|---|
 | Queued, never sent | `false` | `false` | Abort and forget |
 | In flight | `true` | `false` | Leave entirely alone |
-| Finished | `true` | `true` | Leave entirely alone |
+| Finished | `true` or `false` | `true` | Leave entirely alone |
+
+`started` is not guaranteed on a finished frame: a converter may resolve without ever calling `onStart`, which is what #243's OPFS path does when it answers from a cached TIFF instead of converting. So `done` is what recognizes a finished entry, and the drop check has to test both flags rather than `started` alone.
 
 Forgetting an in-flight entry takes it out of the map while its conversion is still running, so re-adding the same set queues a *second* conversion of the same frame — the duplication this module caches the promise, rather than the result, to prevent. Leaning on the existing `catch → forget` instead fails the other way: a queued frame dropped and instantly re-added would hit the surviving entry and inherit its pending `AbortError`, showing a broken thumbnail for a file the user just asked for.
 
@@ -554,7 +556,11 @@ And the new export:
  * because forgetting it would make a re-added set a cache miss and convert
  * the same bytes a second time. A finished frame is kept too -- it costs
  * nothing the LRU budget does not already govern, and it makes re-adding the
- * same file instant.
+ * same file instant. `flags.done` is what recognizes it: a converter is free
+ * to resolve without ever calling `onStart` -- #243's OPFS path will do
+ * exactly that when it answers from a cached TIFF instead of converting --
+ * and such a converter would otherwise leave `flags.started` false on a
+ * completed entry, indistinguishable from one still queued.
  *
  * Paths that were never converted, including every non-RAW one, match no key
  * and cost a scan.
@@ -565,7 +571,7 @@ export function dropRawConversions(paths: string[]): void {
       if (key !== path && !key.startsWith(`${path}|`)) {
         continue;
       }
-      if (entry.flags.started) {
+      if (entry.flags.started || entry.flags.done) {
         continue;
       }
       entry.controller.abort();
@@ -641,10 +647,11 @@ Add `dropRawConversions` to the file's existing import from `./raw-preview`.
 
 - [ ] **Step 7: Verify the accounting case actually discriminates**
 
-The last case must fail without its guard. Temporarily delete these three lines from `rawToTiff`'s `.then`:
+The last case must fail without its guard. Temporarily delete the identity check from `rawToTiff`'s `.then` (keeping whatever the rest of the block needs to still compile):
 
 ```ts
-      if (cache.get(key) !== entry) {
+      const live = cache.get(key);
+      if (live?.flags !== flags) {
         return;
       }
 ```

docs/superpowers/specs/2026-08-01-raw-conversion-cancellation-design.md

@@ -154,16 +154,23 @@ inherit its pending `AbortError`, showing a failed thumbnail for a file the
 user just asked for. Forget-at-drop is right for queued and wrong for
 in-flight, so the two states have to be distinguishable.
 
-`Entry` therefore gains three fields:
+`Entry` therefore gains a controller and two flags. The flags live in their own
+object rather than directly on the entry, because `convert` has to be handed
+something to write `started` into *before* the entry exists -- the entry needs
+the promise `convert` returns:
 
 ```ts
-interface Entry {
-  bytes: number;
-  controller: AbortController;
+interface EntryFlags {
   /** Set once the conversion settles, either way. */
   done: boolean;
   /** Set when the frame leaves the queue and reaches the worker. */
   started: boolean;
+}
+
+interface Entry {
+  bytes: number;
+  controller: AbortController;
+  flags: EntryFlags;
   tiff: Promise<Uint8Array<ArrayBuffer>>;
 }
 ```
@@ -199,16 +206,26 @@ export function dropRawConversions(paths: string[]): void
 
 For each path it matches cache keys by `key === path || key.startsWith(
 `${path}|`)` — keys are `path` or `path|fingerprint` — and then applies the
-table above: an entry that has not `started` is aborted and forgotten;
-anything else is left untouched.
+table above: an entry that has neither `started` nor `done` is aborted and
+forgotten; anything else is left untouched.
+
+Both flags are tested, not `started` alone. A converter is free to resolve
+without ever calling `onStart` -- #243's OPFS path will do exactly that when it
+answers from a cached TIFF instead of converting -- and such a converter would
+leave `started` false on an entry that has already finished its work. Checking
+`started` alone would abort and forget that entry, throwing away a conversion
+that is complete.
 
 A finished conversion is deliberately kept rather than evicted. It costs
 nothing beyond the LRU budget that already governs it, and keeping it makes
 re-adding the same file instant instead of a re-queue. Non-RAW paths match no
 key, so callers need not filter by extension.
 
-`forget` becomes identity-aware, taking the entry it means to remove and
-deleting only if `cache.get(key) === entry`. Without that, a dropped frame's
+`forget` becomes identity-aware, taking the flags of the entry it means to
+remove and deleting only if `cache.get(key)?.flags === flags`. Identifying by
+the flags rather than by the entry lets a conversion's own `catch` call it
+without a forward reference to the entry it has not finished building; the two
+are one-to-one, so the check is the same. Without that check, a dropped frame's
 `AbortError` arriving at the `catch` on `:127` *after* the user has re-added
 the file would delete the replacement entry, orphaning a conversion that is
 already running and sending the next consumer to a third one.
@@ -245,18 +262,18 @@ The `.then` accounts only if the entry is still the live one for its key.
 
 ```ts
 .then((data) => {
-  entry.done = true;
-  if (cache.get(key) !== entry) {
+  flags.done = true;
+  const live = cache.get(key);
+  if (live?.flags !== flags) {
     return;               // dropped or evicted while converting
   }
-  entry.bytes = data.byteLength;
+  live.bytes = data.byteLength;
   held += data.byteLength;
   evictDownToBudget(key);
 })
 .catch(() => {
-  // Already handled at `:127`; this sets `done` on the failure path and
-  // prevents an unhandled rejection, as it did before.
-  entry.done = true;
+  // Handled at `:127`, which is also where `done` is set on the failure
+  // path; this only prevents an unhandled rejection, as it did before.
 })
 ```
 
@@ -323,11 +340,46 @@ drop time, and the existing `catch → forget` at `raw-preview.ts:127` covers
 the rejection that follows. A frame dropped and then re-added converts afresh
 rather than inheriting a rejected promise.
 
-No new unhandled-rejection surface: `raw-preview.ts:137` keeps a handler on
-the cached promise itself, and `tiff-image.tsx:50` already catches its derived
-promise because an aborted decode was always expected there. The thumbnail
-unmounts when its file is removed, so the `AbortError` does not reach the
-`ErrorBoundary` at `tiff-image.tsx:69`.
+**This section originally claimed there was no new unhandled-rejection
+surface, and it was wrong.** It enumerated two handlers -- `raw-preview.ts`'s
+own, on the cached promise, and `tiff-image.tsx:50`, on the derived decode
+promise -- and concluded that every consumer was covered. It missed a third
+consumer that also derives a promise from the cached one:
+`generic-image-metadata.ts`'s `getTiffImageMetadata`, which chains
+`rawToTiff(...).then(...)` to read the mask preview's dimensions. That promise
+had no rejection path at all, and making `AbortError` a routine outcome is
+exactly what turned the omission into two user-visible failures:
+
+- The submit handler at `page.tsx:440` awaits that promise outside its own
+  `try`, and it is memoized on the path -- so once it rejects, pressing Run did
+  nothing at all, with no toast and no recorded attempt, for as long as the
+  removed file stayed selected.
+- `lens-mask-input.tsx` and `fs-circular-mas-selection.tsx` read it with
+  `use()` inside a `Suspense` that has no `ErrorBoundary` above it anywhere.
+
+The cause underneath both is not the drop. It is that `selectedImage` was never
+cleared when the file it names is removed, so a path the form no longer
+contains went on driving the mask preview. What is true after the fix:
+
+- `image-matrix-input.tsx` clears the selection in `onRemove` and
+  `onRemoveIndex` when it points at a file being removed, so no consumer asks
+  for the metadata of a removed frame in the first place. The clear is as
+  narrow as the removal: removing some other set or sibling frame leaves the
+  selection alone.
+- `useGenericImageMetadata` attaches a swallowing handler where it memoizes the
+  promise, in the same spirit as `tiff-image.tsx:50`, so a metadata promise
+  created before the removal cannot surface as an unhandled rejection after the
+  selection has moved on. It returns the original promise, not the handled one:
+  a genuine conversion failure must still reject rather than look like an image
+  with no dimensions.
+
+The thumbnail itself unmounts when its file is removed, so the `AbortError`
+still does not reach the `ErrorBoundary` at `tiff-image.tsx:69`.
+
+No `ErrorBoundary` was added over the mask preview. One would be worth having
+on its own merits, but it addresses neither failure above -- the submit-handler
+one never throws during render -- and it is left as separate work rather than
+smuggled in as a fix for this.
 
 ## Testing
 
@@ -356,9 +408,16 @@ In `raw-preview.test.ts`:
   unit test. The entry point is tests-only, but the guard it exercises is the
   same one the eviction path needs, and it fails against today's code.
 
-The `image-matrix-input.tsx` wiring is not unit-tested; the behaviour worth
-pinning lives in the two library modules, and the component change is a
-two-line call plus the index fix.
+The `image-matrix-input.tsx` drop wiring itself is not unit-tested; the
+behaviour worth pinning there lives in the two library modules, and the
+component change is a two-line call plus the index fix.
+
+The selection clear that removal now performs *is* tested, in
+`__tests__/image-matrix-selection-clear.test.tsx`, against the same
+RTL-plus-react-hook-form harness `image-matrix-lock.test.tsx` uses. Four cases:
+the selection is cleared when its whole set is removed and when that one frame
+is removed, and it survives the removal of another set and of a sibling frame.
+The last two are what stop an unconditional clear from passing.
 
 ## Out of scope
 

src/app/home-page/selected-image-context.tsx

@@ -4,7 +4,15 @@ import { createContext, useContext, useMemo, useState } from "react";
 
 interface SelectedImageContextValue {
   selectedImage: string | undefined;
-  setSelectedImage: (image: string) => void;
+  /**
+   * Accepts `undefined` so a caller can clear the selection. Removing the file
+   * that is selected has to be able to say so: a path the form no longer
+   * contains must not go on driving the mask preview, whose metadata promise
+   * would then be resolved against a frame the user threw away -- and, for a
+   * RAW frame whose queued conversion was dropped with it, never resolve at
+   * all.
+   */
+  setSelectedImage: (image: string | undefined) => void;
 }
 
 const selectedImageContext = createContext<