US09-04: Write the User Manual with Generated Screenshots (#110)

frontend/js/renames.js

@@ -5,7 +5,7 @@
 // recovery classifications all come from the server; the view only shows them and
 // refuses to offer an action the server would reject.
 import { api } from "./api.js";
-import { el, errorBanner, setActiveNav } from "./dom.js";
+import { el, errorBanner, setActiveNav, show } from "./dom.js";
 
 // What the last confirm did, for this tab only. Deliberately not persisted: after a
 // reload the page must show what the journal says, not what this page remembers.
@@ -24,7 +24,7 @@ export async function renderRenames(root, params = {}) {
   try {
     [plans, recovery] = await Promise.all([api.listPlans(), api.renameRecovery()]);
   } catch (error) {
-    root.replaceChildren(errorBanner(`Failed to load renames: ${error.message}`));
+    show(root, errorBanner(`Failed to load renames: ${error.message}`));
     return;
   }
 
@@ -34,13 +34,13 @@ export async function renderRenames(root, params = {}) {
     try {
       plan = await api.getPlan(selectedId);
     } catch (error) {
-      root.replaceChildren(errorBanner(`Failed to load plan: ${error.message}`));
+      show(root, errorBanner(`Failed to load plan: ${error.message}`));
       return;
     }
   }
 
   const blocked = recovery.blocks_mutation;
-  root.replaceChildren(
+  show(root,
     el("h1", {}, "Renames"),
     recoveryPanel(recovery),
     el(