Give every inline error Copy details and, where it helps, Retry (#269)

Turn failures got Retry, a fix and Copy details in #104, but about two
dozen other error surfaces still showed bare text. Copying it lost where
and when it happened, and most offered no way to run the action again.

A shared ErrorNotice now renders those errors: the message, Retry when the
failed action can safely run again, a fix when there is a better remedy,
Dismiss where the surface had one, and Copy details. The copied report
(shared/error-report.ts) names where and when it happened, quotes the
message, and lists the surface's context. Main appends the app version,
Electron version and platform through clipboard:write's new appInfo flag.
Streamer Mode redacts the shown message and the whole report.

Retry repeats exactly the action that failed: restart the terminal, reload
a diff, file or preview, re-run a companion, routine, plugin or browser
action, save Settings again, re-run an approval preview, reload history,
comments or agent access. It is left out where repeating cannot help: a
rejected browser address, a skill in the wrong scope, lists that already
refresh every few seconds, the learning reset (its text says to reopen
Settings first), and Images, whose errors have no single action.

e2e: the Settings save failure test now copies the report and retries the
save; two selectors follow the moved Retry and message elements.

Coven-Harness: Claude Code / claude-opus-5-5

Author: BunsDev

apps/desktop/e2e/errors.spec.ts

@@ -194,8 +194,8 @@ test("the model-list Retry requests the catalogue again and clears the error", a
   await expect(tid(page, "composer-input")).toBeVisible();
   await page.keyboard.press("Meta+n");
   await expect(tid(page, "draft-view")).toBeVisible();
-  await expect(tid(page, "models-retry")).toBeVisible();
-  await tid(page, "models-retry").click();
-  await expect(tid(page, "models-retry")).toHaveCount(0);
+  await expect(tid(tid(page, "models-error"), "error-retry")).toBeVisible();
+  await tid(tid(page, "models-error"), "error-retry").click();
+  await expect(tid(tid(page, "models-error"), "error-retry")).toHaveCount(0);
   await expect(tid(page, "model-picker")).toContainText("Recovered model");
 });

apps/desktop/e2e/settings-transactions.spec.ts

@@ -47,6 +47,20 @@ test("saving freezes the draft until persistence resolves and keeps it available
   await expect(dialog).toHaveAttribute("aria-busy", "false");
   await expect(tid(dialog, "settings-content")).not.toHaveAttribute("inert", "");
   await expect(mode).toHaveValue("agent");
+
+  // Copy details puts a report on the clipboard: where, the message, and the app build main appends.
+  await tid(tid(page, "settings-save-error"), "error-copy").click();
+  await expect(tid(tid(page, "settings-save-error"), "error-copy")).toHaveText("Copied");
+  const report = await app.evaluate(({ clipboard }) => clipboard.readText());
+  expect(report).toContain("Modex error: Settings · save");
+  expect(report).toContain("fake persistence failure");
+  expect(report).toMatch(/App: Modex \d+\.\d+\.\d+/);
+  // Retry save runs the same save again with the draft intact.
+  await tid(tid(page, "settings-save-error"), "error-retry").click();
+  await expect(dialog).toHaveAttribute("aria-busy", "true");
+  await app.evaluate(() => (globalThis as any).__modexRejectSettingsSave());
+  await expect(tid(page, "settings-save-error")).toContainText("fake persistence failure");
+  await expect(mode).toHaveValue("agent");
   await dialog.getByRole("button", { name: "Cancel" }).click();
 });
 
@@ -299,6 +313,6 @@ test("an empty save failure message keeps one plain retry instruction", async ()
   await tid(page, "open-settings").click();
   const dialog = tid(page, "settings");
   await dialog.getByRole("button", { name: "Save", exact: true }).click();
-  await expect(tid(dialog, "settings-save-error")).toHaveText("Could not save settings. Your draft is still here; retry or cancel.");
+  await expect(tid(tid(dialog, "settings-save-error"), "error-text")).toHaveText("Could not save settings. Your draft is still here; retry or cancel.");
   await dialog.getByRole("button", { name: "Cancel" }).click();
 });

apps/desktop/src/main/index.ts

@@ -1,6 +1,7 @@
 import { imageFixtureBackend } from "./engine/images/fixture.js";
 import { Media } from "./media.js";
 import { IMAGE_SCHEME } from "../shared/images.js";
+import { appInfoLine } from "../shared/error-report.js";
 import { NativeDrafts } from "./engine/native-drafts.js";
 import { OwnerRemoval } from "./engine/owner-removal.js";
 import type { DraftRemovalScope } from "../shared/native-drafts.js";
@@ -907,7 +908,10 @@ handle("shell:openPath", async ({ path: p }) => {
   if (err) throw new Error(err);
 });
 handle("shell:openTerminal", ({ path: p }) => openTerminal(p));
-handle("clipboard:write", ({ text }) => { clipboard.writeText(String(text).slice(0, 200_000)); });
+handle("clipboard:write", ({ text, appInfo }) => {
+  const footer = appInfo ? `\n\n${appInfoLine({ version: app.getVersion(), electron: process.versions.electron, platform: process.platform, arch: process.arch })}` : "";
+  clipboard.writeText((String(text) + footer).slice(0, 200_000));
+});
 handle("terminal:open", ({ threadId, cols, rows }) => terminals.open(threadId, cols, rows));
 handle("terminal:write", ({ threadId, sessionId, data }) => terminals.write(threadId, sessionId, data));
 handle("terminal:resize", ({ threadId, sessionId, cols, rows }) => terminals.resize(threadId, sessionId, cols, rows));

apps/desktop/src/renderer/components/AnalyticsView.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from "react";
 import { useStreamerMode } from "../streamer";
 import { bridge } from "../bridge";
+import { ErrorNotice } from "./ui/ErrorNotice";
 
 /**
  * The Analytics surface. The dashboard is its own document in a native view over this canvas, so its
@@ -11,6 +12,8 @@ export function AnalyticsView({ active }: { active: boolean }) {
   const streamerMode = useStreamerMode();
   const canvas = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string | null>(null);
+  // Bumped by the error's Retry: shows the dashboard again.
+  const [attempt, setAttempt] = useState(0);
 
   useLayoutEffect(() => {
     let alive = true;
@@ -31,11 +34,11 @@ export function AnalyticsView({ active }: { active: boolean }) {
     mutations.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-panel-resizing"] });
     window.addEventListener("resize", update);
     return () => { alive = false; resize.disconnect(); mutations.disconnect(); window.removeEventListener("resize", update); void bridge.invoke("analytics:show", {}).catch(() => {}); };
-  }, [active, streamerMode]);
+  }, [active, streamerMode, attempt]);
 
   return <section className="analytics-surface" data-testid="analytics" aria-label="Analytics" hidden={!active}>
     {streamerMode && <p className="analytics-note" role="status">Analytics is hidden while Streamer Mode is on.</p>}
-    {error && <p className="analytics-note" role="alert">{error}</p>}
+    {error && <ErrorNotice className="analytics-note" testId="analytics-error" where="Analytics" message={error} onRetry={() => { setError(null); setAttempt((n) => n + 1); }} />}
     <div ref={canvas} className="analytics-canvas" data-testid="analytics-canvas" />
   </section>;
 }

apps/desktop/src/renderer/components/ApprovalRules.tsx

@@ -2,6 +2,7 @@ import { SecretOption, SecretInput } from "../streamer";
 import { useEffect, useState } from "react";
 import type { ApprovalPreview, ApprovalRule, Mode, Project, RoutingStatus, RuleDecision } from "../../shared/types";
 import { bridge } from "../bridge";
+import { ErrorNotice } from "./ui/ErrorNotice";
 
 interface Props {
   rules: ApprovalRule[];
@@ -77,7 +78,7 @@ export function ApprovalRules({ rules, projects, currentProjectId, gateEnabled,
     <label className="check"><SecretInput type="checkbox" checked={escalation} onChange={(e) => setEscalation(e.target.checked)} /><span>Requests additional sandbox permissions</span></label>
     <button type="button" className="btn small" disabled={!projectId || !tool.trim() || !title.trim() || shown?.pending} onClick={() => void run()}>{shown?.pending ? "Checking…" : "Try it"}</button>
     <div aria-live="polite" aria-atomic="true">
-      {shown?.error && <p className="warn" role="alert">{shown.error}</p>}
+      {shown?.error && <ErrorNotice className="warn" testId="approval-preview-error" where="Settings · approval rule preview" message={shown.error} onRetry={shown.pending ? undefined : () => void run()} context={{ tool, projectId }} />}
       {shown?.value && <PreviewReceipt result={shown.value} />}
     </div>
   </section>;

apps/desktop/src/renderer/components/BrowserToolsDialog.tsx

@@ -2,11 +2,14 @@ import { useEffect, useRef, useState } from "react";
 import type { BrowserToolsSnapshot } from "../../shared/browser";
 import { bridge } from "../bridge";
 import { Icon } from "./ui/Icon";
+import { ErrorNotice } from "./ui/ErrorNotice";
 
 export function BrowserToolsDialog({ onClose }: { onClose(): void }) {
   const [state, setState] = useState<BrowserToolsSnapshot | null>(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
+  // The operation behind `error`, for its Retry. Loading errors have none: they mean no desktop host.
+  const [failed, setFailed] = useState<{ message: string; operation: () => Promise<BrowserToolsSnapshot> } | null>(null);
   const [notice, setNotice] = useState("");
   const dialog = useRef<HTMLElement>(null);
   const pending = useRef(false);
@@ -32,7 +35,11 @@ export function BrowserToolsDialog({ onClose }: { onClose(): void }) {
     if (pending.current) return;
     pending.current = true; setBusy(true); setError(""); setNotice("");
     try { setState(await operation()); setNotice("Reload open browser tabs to apply extension changes."); }
-    catch (error) { setError((error as Error).message.replace(/^Error invoking remote method '[^']+':\s*(?:Error:\s*)?/, "")); }
+    catch (error) {
+      const message = (error as Error).message.replace(/^Error invoking remote method '[^']+':\s*(?:Error:\s*)?/, "");
+      setError(message);
+      setFailed({ message, operation });
+    }
     finally { pending.current = false; setBusy(false); }
   };
   return <div className="modal-backdrop" onMouseDown={event => { if (event.target === event.currentTarget && !pending.current) onClose(); }}>
@@ -57,7 +64,7 @@ export function BrowserToolsDialog({ onClose }: { onClose(): void }) {
         <p>Device Touch ID passkeys are unavailable in this release. A signed app alone does not authorize access to their protected keychain group.</p>
         <p>For existing 1Password or iCloud passkeys, choose <strong>Page options → Open in system browser</strong>. Your browser keeps that sign-in; its session is separate from Modex.</p>
       </section>
-      {(error || state?.error) && <p className="workspace-error" role="alert">{error || state?.error}</p>}
+      {(error || state?.error) && <ErrorNotice className="workspace-error" testId="browser-tools-error" where="Browser extensions" message={error || state?.error || ""} onRetry={!busy && error && failed?.message === error ? () => void act(failed.operation) : undefined} />}
       {notice && <p role="status">{notice}</p>}
     </section>
   </div>;

apps/desktop/src/renderer/components/CanvasPanel.tsx

@@ -3,6 +3,7 @@ import type { Thread } from "../../shared/types";
 import { canvasFile, type CanvasSnapshot } from "../../shared/canvas";
 import { bridge } from "../bridge";
 import { IconButton } from "./ui/IconButton";
+import { ErrorNotice } from "./ui/ErrorNotice";
 import { SecretOption, useStreamerMode } from "../streamer";
 
 export function CanvasPanel({ id, thread, visible, suspended, full }: { id: string; thread: Thread; visible: boolean; suspended: boolean; full: boolean }) {
@@ -72,6 +73,11 @@ export function CanvasPanel({ id, thread, visible, suspended, full }: { id: stri
     window.addEventListener("resize", update);
     return () => { resize.disconnect(); mutations.disconnect(); window.removeEventListener("resize", update); void bridge.invoke("canvas:show", { id: null }).catch(() => {}); };
   }, [id, visible, suspended, full, error, snapshot?.error, openedPath, selected, streamerMode]);
+  // After a failed open, reopen the preview from scratch; otherwise ask the open preview to reload.
+  const reloadCanvas = () => {
+    if (error) setRevision(r => r + 1);
+    else reload.current?.();
+  };
   return <section className="workspace-canvas" hidden={!visible} aria-label="Canvas">
     <header className="review-toolbar canvas-toolbar">
       <label htmlFor={`canvas-file-${id}`}>Canvas</label>
@@ -80,12 +86,10 @@ export function CanvasPanel({ id, thread, visible, suspended, full }: { id: stri
         {selected && !paths.includes(selected) && <SecretOption value={selected}>{selected}</SecretOption>}
         {paths.map(p => <SecretOption key={p} value={p}>{p}</SecretOption>)}
       </select>
-      <IconButton icon="restart" label="Reload Canvas" disabled={!selected} onClick={() => {
-        if (error) setRevision(r => r + 1);
-        else reload.current?.();
-      }} />
+      <IconButton icon="restart" label="Reload Canvas" disabled={!selected} onClick={reloadCanvas} />
     </header>
-    {(error || snapshot?.error || listingError) && <p className="workspace-error" role="alert" data-testid="canvas-error">{error || snapshot?.error || listingError}</p>}
+    {/* A listing error clears itself: the file list is re-read every 2 s. Preview errors reload like the header button. */}
+    {(error || snapshot?.error || listingError) && <ErrorNotice className="workspace-error" testId="canvas-error" where="Canvas" message={error || snapshot?.error || listingError} onRetry={selected && (error || snapshot?.error) ? reloadCanvas : undefined} retryLabel="Reload preview" context={{ threadId: thread.id, cwd: thread.cwd, file: selected || undefined }} />}
     {!selected && <p className="hint pad">Preview an HTML, SVG or Markdown file. Canvas refreshes when the file or its local assets change.</p>}
     {snapshot?.loading && <span className="hint canvas-loading" role="status">Loading preview…</span>}
     <div className="workspace-guest" ref={host} data-testid="canvas-preview">{streamerMode && <p className="streamer-guest-cover" data-testid="streamer-canvas-cover">Canvas content is covered while Streamer Mode is on.</p>}</div>

apps/desktop/src/renderer/components/ChangesPanel.tsx

@@ -5,6 +5,7 @@ import { bridge } from "../bridge";
 import { Icon } from "./ui/Icon";
 import { IconButton } from "./ui/IconButton";
 import { Menu, MenuItem } from "./ui/Menu";
+import { ErrorNotice } from "./ui/ErrorNotice";
 
 interface Props { visible: boolean; thread: Thread; changes: ChangesSnapshot | null; onRefresh: () => void; onRevert: (path: string) => void }
 const compactCount = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
@@ -27,6 +28,8 @@ export function ChangesPanel({ visible, thread, changes, onRefresh, onRevert }:
   const closeOptions = () => { setMenu(false); menuRef.current?.focus(); };
   useEffect(() => { setExpanded(false); }, [file]);
   useEffect(() => { if (!visible) setMenu(false); }, [visible]);
+  // Bumped by the diff error's Retry: loads the same file's diff again.
+  const [diffAttempt, setDiffAttempt] = useState(0);
   useEffect(() => {
     if (!file) return;
     let live = true;
@@ -35,7 +38,8 @@ export function ChangesPanel({ visible, thread, changes, onRefresh, onRevert }:
       (error: Error) => { if (live) setResult({ file, snapshot: changes, expanded, text: "", error: error.message }); },
     );
     return () => { live = false; };
-  }, [file, thread.id, changes, entry?.original, expanded]);
+  }, [file, thread.id, changes, entry?.original, expanded, diffAttempt]);
+  const retryDiff = () => { setResult(null); setDiffAttempt((n) => n + 1); };
   const totals = (changes?.files ?? []).reduce((acc, f) => ({ a: acc.a + f.additions, d: acc.d + f.deletions }), { a: 0, d: 0 });
   const paths = (changes?.files ?? []).filter((f) => f.path.toLowerCase().includes(filter.toLowerCase())).sort((a, b) => Number(a.code === "??") - Number(b.code === "??") || a.path.localeCompare(b.path));
   const groups = new Map<string, typeof paths>();
@@ -71,7 +75,7 @@ export function ChangesPanel({ visible, thread, changes, onRefresh, onRevert }:
       <div className={`review-body${tree ? "" : " tree-hidden"}`}>
         <div className="review-diff" data-testid="changes-diff">
           <div className="review-file-heading"><FileIcon path={file ?? ""} /><span title={file ?? ""}><bdi dir="ltr">{file}</bdi></span><span className="stat add">+{entry?.additions ?? 0}</span><span className="stat del">-{entry?.deletions ?? 0}</span></div>
-          {!diff ? <p className="hint pad" role="status">Loading diff…</p> : diff.error ? <p className="hint pad" role="alert">Could not load diff: {diff.error}</p> : <Diff text={diff.text} wrap={wrap} highlight={highlight} onExpand={() => setExpanded(true)} />}
+          {!diff ? <p className="hint pad" role="status">Loading diff…</p> : diff.error ? <ErrorNotice className="hint pad" testId="changes-diff-error" where="Changes · diff" message={`Could not load diff: ${diff.error}`} onRetry={retryDiff} context={{ threadId: thread.id, cwd: thread.cwd, path: file, original: entry?.original }} /> : <Diff text={diff.text} wrap={wrap} highlight={highlight} onExpand={() => setExpanded(true)} />}
         </div>
         {tree && <aside className="review-tree" data-testid="review-tree" aria-label="Changed files">
           <label className="review-filter"><Icon name="search" size={13} /><SecretInput ref={filterRef} data-testid="review-filter" aria-label="Filter files" placeholder="Filter files..." value={filter} onChange={(e) => setFilter(e.target.value)} /></label>

apps/desktop/src/renderer/components/CompanionDialog.tsx

@@ -3,13 +3,16 @@ import { useEffect, useRef, useState } from "react";
 import type { CompanionStatus } from "../../shared/types";
 import { bridge } from "../bridge";
 import { Icon } from "./ui/Icon";
+import { ErrorNotice } from "./ui/ErrorNotice";
 
 export function CompanionDialog({ onClose }: { onClose: () => void }) {
   const streamerMode = useStreamerMode();
   const [status, setStatus] = useState<CompanionStatus | null>(null);
   const [busy, setBusy] = useState(false);
   const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // The action that failed, for the error's Retry. Status errors have none: status refreshes every 2.5 s.
+  const [failedAction, setFailedAction] = useState<(() => void) | null>(null);
   const [copiedLink, setCopiedLink] = useState<string | null>(null);
   const endpoint = status?.endpoints?.find((candidate) => candidate.address === selectedAddress) ?? status?.endpoints?.[0];
   // Older hosts provide only one code. New hosts offer one code for each live listener.
@@ -33,7 +36,7 @@ export function CompanionDialog({ onClose }: { onClose: () => void }) {
         const value = await bridge.invoke("companion:status", undefined);
         if (active && request === requestRevision.current) setStatus(value);
       } catch (err) {
-        if (active && request === requestRevision.current) setError((err as Error).message);
+        if (active && request === requestRevision.current) { setError((err as Error).message); setFailedAction(null); }
       }
     };
     void refresh();
@@ -56,8 +59,9 @@ export function CompanionDialog({ onClose }: { onClose: () => void }) {
     actionPending.current = true;
     requestRevision.current += 1;
     setError(null);
+    setFailedAction(null);
     try { setStatus(await bridge.invoke(channel, undefined)); }
-    catch (err) { setError((err as Error).message); }
+    catch (err) { setError((err as Error).message); setFailedAction(() => () => void act(channel)); }
     finally { actionPending.current = false; setBusy(false); }
   };
   const copyLink = async () => {
@@ -66,7 +70,7 @@ export function CompanionDialog({ onClose }: { onClose: () => void }) {
     try {
       await bridge.invoke("clipboard:write", { text: link });
       setCopiedLink(link);
-    } catch { setError("Could not copy the pairing link. Please try again."); }
+    } catch { setError("Could not copy the pairing link."); setFailedAction(() => () => void copyLink()); }
   };
   return (
     <div className="modal-backdrop" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}>
@@ -100,7 +104,7 @@ export function CompanionDialog({ onClose }: { onClose: () => void }) {
             <span>{status?.enabled ? "A local address is needed to pair your iPhone." : "Turn on the companion to show a private pairing code."}</span>
           </div>
         )}
-        {error && <p className="companion-error" role="alert">{error}</p>}
+        {error && <ErrorNotice className="companion-error" testId="companion-error" where="iPhone companion" message={error} onRetry={failedAction && !busy ? () => { setError(null); failedAction(); } : undefined} context={{ serviceEnabled: status?.enabled }} />}
         <div className="companion-actions">
           {status?.enabled ? (
             <>