fix(components): route error states through ErrorNotice (batch components-2)

[CrysisDeu]

Summary

Batch components-2 of the dashboard error-state sweep (audit report research/error-states-audit.md, §5.5 "Batch components-2", 22 files under website/src/components/): every hand-written error surface renders through the shared ErrorNotice, per the blocking AUTOSDE rule errors-use-error-notice, and every silent failure the report listed for these components (a useQuery error nobody read, a mutation whose onError only logged or raised a blocking alert(), a raw .catch that kept the card up with no message) now renders. Reference implementation: the merged sibling batches (#8729, #8743, #8749, #8760, #8792, #8810, #8843).

no linked issue: driven by the audit report (research/error-states-audit.md, section 5.5).

Each site passes the SAME string it already rendered, so ErrorNotice recovers the structured context by message match. Every notice carries a testId so tests target it unambiguously. The askAgent decision is stated at every site: on where the hand-off loses nothing, off with a No hand-off: <draft> comment next to an unsaved draft.

Sites

askAgent on (reads, lists, actions on persisted items; no draft on screen)

• FilePathMenu.tsx — revealOrOpen now takes a required onError and has no alert() path at all (review round 1, GPT F1); useCopyAck holds revealError and the context menu renders it as a dismissable inline notice. A small useRevealFailure() hook gives every other caller the same state, and all six callers outside this batch's file list were migrated in place rather than left on a fallback: MarkdownRenderer (link + chip: notice beside the element), ChatPage DirChip, FilesHomePanel, FolderPanel, FileViewer, DeckViewer — each renders <ErrorNotice variant="inline" askAgent onDismiss> where the click happened (none holds a draft; transcript chips per the report critic). OverflowMenu's onError is required too (the standalone-mount alert fallback is gone).
• FileRenderers.tsx — JsonViewer's parse failure → ErrorNotice title='Invalid JSON' above the raw preview; the Office card renders the reveal failure from useCopyAck in place.
• FollowUpCard.tsx — worktree-create failure (per the report critic: the card holds no draft, the host composer draft is persisted per slot, and the hand-off opens a fresh slot).
• GitPanel.tsx — silent fixed: a failed git-status / git-log read used to render an empty panel indistinguishable from a clean repo; both now render at the top of the body.
• InstanceTabBar.tsx — silent fixed: only a 403 was interpreted; any other listInstances failure hid the bar. A failed read now keeps the bar up with an inline notice. The tunnel-error tooltip stays an indicator (comment added): the full error is the ErrorNotice in InstancesViewport's panel, which this strip sits on top of, so repeating it would show the same failure twice.
• InstancesViewport.tsx — the error panel's message block → ErrorNotice report={panelReport} askAgent onHandoff={→ Local} (the standalone AskAgentButton is folded into it; the report keeps the prompt bound to THIS crew and the ladder); the pane-load-timeout line is a notice too. Silent fixed: the Retry's own connectMutation rejection reached only paneLog; it now feeds panelError.
• IssuePanel.tsx — the full-height load card (title + message, Retry beneath; the login-required branch keeps the command as remedy text), the jira_no_credentials setup card (the value is a query error code, so it renders as one; Open-in-Jira link kept), and the stale-revalidation role="status" bar → inline notice.
• LinkedSurfacesSection.tsx — the four mutations' bell-feed notification was the ONLY report of a write that did not persist; each failure now also renders in place under its row (failRow, cleared on the next click / dismiss). Silent fixed: a failed channel-targets read now says so instead of showing no offers.
• LogEntry.tsx — silent fixed: a failed cronRunDetail rendered an empty <pre>.
• McpBrowserModal.tsx — row install failure (literal text-red-400), detail-pane install failure, and the 409 conflict (a rejected request with no overwrite path here, unlike SkillBrowserModal's — literal text-amber-400, role="status") all → ErrorNotice. Silent fixed: a failed search fell through to "No servers found"; a failed detail read left Install disabled forever with no message.
• MobileConnectModal.tsx — probe failure (Try again kept), QR mint failure, link mint failure, and both clipboard failures. All five pass onHandoff={onClose} (round 2, GPT): the modal is a fixed full-screen overlay, so the hand-off closes it or the fresh chat stays hidden underneath.
• MarkdownPanel.tsx (conditional) — see below.

No hand-off (an unsaved draft shares the screen)

• FolderConfigModal.tsx — save failure (hand-built role="alert" box) and the tags-vocabulary failure (Retry kept): the folder name / color / project dir / agent / tags form is unsaved.
• FilePickerMenu.tsx — silent fixed: a settled search error showed the ordinary "No matching files" copy; it now renders its own notice above the (placeholder) results. The Enter-release gate is unchanged (test updated). The composer draft the picker is completing an @-mention inside is unsaved.
• KasLoginGate.tsx — chooser start failure (Company SSO start-URL field); the sign-in-problem detail; the status-unavailable detail. Silent fixed: a settleCancel that returned unknown left the waiting screen up with buttons re-enabled and nothing said; both waiting screens now render cancel_unsettled. All are No hand-off: the gate stands between the user and the chat the hand-off navigates to, and without a signed-in account there is no agent to hand to (see rule-gap below). cancel_unsettled reworded per the UX lane (rounds 2–3) to drop the word “gateway” and end with the remedy: “It is still active — press the same option again to retry.”
• KiroPrerequisiteGate.tsx — the status-check failure (message split from the retry hint), the CLI update failure and both repair failures (red <pre> under an uppercase label → ErrorNotice title with the verbatim body; the block variant is whitespace-pre-wrap). No hand-off: kiro-cli — the agent runtime — is the thing that failed. Per the UX lane, each of the three now carries a plain-language next step under the verbatim output (attempt_failed_remedy, interpolating the screen's own button name — “Update Kiro CLI” / “Check again” — per UX round 3: fix the named cause, press that button, reinstall if it keeps failing).
• MarkdownPanel.tsx — the save failure (always off: the buffer holds the edits that were not persisted); the four alert() mutation handlers (add-to-knowledge, promote, snapshot, save-as-artifact), downloadFile and the overflow's open/reveal now report into one panel-level actionError notice with askAgent={!dirty}. Silent fixed: the knowledge-config read resolved to null on !r.ok (rendered as "not added"); it and the artifact-by-source-path / file-diff query rejections now render, also askAgent={!dirty}. OverflowMenu takes onError (optional only for a standalone mount, where it falls back to the legacy dialog so nothing is dropped).
• MarkdownRenderer.tsx — Mermaid render failure: the source is no longer painted red; an inline notice above it names the failure. No hand-off: the renderer is embedded in hosts that hold unsaved drafts (file-panel editor buffer, composer preview) and cannot tell which.
• McpCustomServerModal.tsx — spec load failure and submit failure (literal text-amber-400 role="alert" spans): the spec JSON textarea is unsaved. The client-side parse hint stays plain validation text (excluded by the report).
• OAuthRelayAffordance.tsx — relay failure: the pasted return-address input is unsaved. The client-side invalid-address check is split into its own hint state and rendered as plain muted text (GPT F2), so validation never dresses as a request error.
• OnboardingFlow.tsx — profile save failure (style={{ color: 'var(--danger)' }} <p role="alert">): the wizard answers are unsaved.
• PendingQuestionCard.tsx — silent fixed: the retryable (non-404) answer and dismiss failures kept the card with no message; a notice under the card now says why it is still there. The selected answers / custom text are unsaved. The failure is keyed by the request's lockKey and rendered only while that identity is still the card on screen (GPT round 4): a rejection for card A landing after card B replaced it in the slot must not paint A's failure under B. The same scoping applies to useRevealFailure(subject) (reset when the path it was raised for changes) and MarkdownPanel's actionError (reset on filePath).

Documented exclusion

• MigrationCheck.tsx — a best-effort probe mounted on every app route; a failed ['apps'] read is reported where that data is the page's subject (AppsPage / AppDetailPage), and repeating it above every app page would show the same failure twice. Comment added.

Shared component change

ErrorNotice gains two optional props. onHandoff passes through to AskAgentButton (ignored when askAgent is off) — needed by InstancesViewport and MobileConnectModal, whose overlays sit over the chat the hand-off navigates to. messageClassName styles the message span only (UX round 3): IssuePanel, KiroPrerequisiteGate and JsonViewer pass font-mono there so verbatim tool/server output stays monospaced while the plain-language title keeps the UI font and reads as a separate clause. The block variant wraps the message in a span only when the prop is given, so every existing consumer's DOM is unchanged.

Deviations from the report's recommended_action (author decisions)

• InstanceTabBar tunnel error: kept as an indicator (report: "low priority; consider leaving as indicator and documenting") because the same text renders as the ErrorNotice directly beneath the strip in InstancesViewport's panel; the list-load silent failure IS fixed.
• FollowUpCard, transcript surfaces: report suggested a No hand-off: transcript comment; per its own critic that names no real draft, so askAgent is on.
• KasLoginGate / KiroPrerequisiteGate: report suggested askAgent on for the gate screens; kept off — the gate hides the chat the hand-off would open, and the failure is the account / runtime the agent needs (rule-gap below).
• IssuePanel jira_no_credentials: migrated (report offered either); the Jira link stays as the remedy.
• MarkdownRenderer Mermaid: report allowed a transcript No hand-off comment; the comment here names the real drafts the shared renderer can sit beside.
• revealOrOpen: the six callers outside this batch's file list WERE migrated (round 1) — a shared helper with a blocking-dialog fallback is itself the violation, and a required onError is the only shape that cannot regress. The error return field from the first push is dropped (First Principles: zero consumers; onError is the delivery path).

Rule-gap variants seen in this batch (NOT editing website/AUTOSDE.yaml — #8729 owns that)

• a gate component's error surface: the chat the hand-off navigates to is hidden behind the gate itself, and the failure is the account / runtime the agent depends on — neither askAgent nor a draft-naming No hand-off comment describes it (KasLoginGate, KiroPrerequisiteGate)
• a blocking alert() raised from inside a shared hook / helper, so the same failure has no host to render in (revealOrOpen, MarkdownPanel's mutation hooks)
• bell-feed notification as the ONLY report of a failed write (LinkedSurfacesSection)
• a failed read rendered as a different non-error state: "No matching files" / "No servers found" (FilePickerMenu, McpBrowserModal), an empty <pre> (LogEntry), an empty panel (GitPanel), a hidden bar (InstanceTabBar), "not added" (MarkdownPanel knowledge query returning null on !r.ok), a disabled button forever (McpBrowserModal detail)
• a 409 rejection dressed as role="status" in a literal palette colour (McpBrowserModal conflict)
• a rejection that keeps the retry control but says nothing (PendingQuestionCard, KasLoginGate settleCancel)
• error text in text-muted / --danger inline style rather than a danger class (IssuePanel, OnboardingFlow), and literal Tailwind palette colours (text-red-400, text-amber-400)
• the same error text tooltip-only in one component and rendered in a sibling that overlays it (InstanceTabBar / InstancesViewport)

Pattern harvest

Rule candidate: errors-use-error-notice should name two shapes this batch found the current text misses — (1) a shared helper or hook that raises the failure itself (alert() inside revealOrOpen, onError: alert inside MarkdownPanel's mutation hooks), where no single call site owns a surface and the fix is a required onError/render callback plus a small shared failure-state hook; and (2) a gate component whose hand-off target (the chat) is hidden behind the gate itself and whose failure IS the account or runtime the agent depends on, where neither askAgent nor a draft-naming No hand-off comment describes the decision. The rule-text edit itself is owned by #8729.

i18n

Sixteen new keys in en.manual.json + all 11 catalogs (hand-translated) + en-XA regenerated: components.filePickerMenu.search_failed, components.gitPanel.{status_failed,log_failed}, components.instanceTabBar.instances_load_failed, components.kasLogin.cancel_unsettled, components.logEntry.trace_load_failed, components.markdownPanel.{knowledge_status_failed,artifact_status_failed,diff_status_failed}, components.markdownRenderer.mermaid_render_failed, components.mcpBrowserModal.{detail_load_failed,search_failed}, components.linkedSurfacesSection.targets_load_failed, components.pendingQuestionCard.{answer_failed,dismiss_failed}, components.kiroPrerequisiteGate.attempt_failed_remedy. Catalog diffs are key-level inserts validated with a duplicate-key-rejecting parser; gitPanel, logEntry and pendingQuestionCard are new blocks in en.manual.json (they only existed in the generated en.json).

Tests

Aligned to the new shape (no test deleted): FilePickerMenu.cov80.test.tsx (error branch asserts the notice, not "No matching files"), KiroPrerequisiteGate.test.tsx (message and retry hint are now two elements), MarkdownPanelCoverage.test.tsx / MarkdownPanelMoreCoverage.test.tsx (panel failures assert markdown-panel-action-error and that alert was NOT called), MarkdownRenderer.mermaidEnlarge.test.tsx, PendingQuestionCard.test.tsx, LinkedSurfacesSection.cov80.test.tsx (in-place notice beside the notification record), apiRevealPath.test.ts (new onError route). Round 1: standalone OverflowMenu mounts pass an onError spy and assert on it (alert never called); FileExplorerPageCoverage, PptxDeckViewerCov80, FileRenderers.test assert the in-place notice by testId; McpOAuthBanner.relay.test asserts the validation hint is NOT an alert; apiRevealPath.test is rewritten to the required-onError contract.

Verification

• Local: tsc -b clean, eslint on every touched file clean, I18N_BASE_REF=origin/main npm run i18n:check 19/19 PASS, no non-inclusive terms in the diff.
• No test suite run locally by instruction — verification via CI.

Screenshot Evidence

Capture harness: website/capture/error-notice-components-2.{html,tsx} + website/scripts/capture-error-notice-components-2.mjs (Vite + Playwright, self-checking across BOTH rows: 24 role="alert" notices and 15 hand-offs in the AFTER columns, Retry beside the IssuePanel notice, 0 hand-offs in the BEFORE columns). The KiroPrerequisiteGate cell now also shows the attempt_failed_remedy line and the Check-again button beneath the notice (UX round 2). Row 2 (added per the UX lane) shows the 13 surfaces that only appear once a menu, modal or gate is open: FilePickerMenu, JsonViewer, InstanceTabBar, InstancesViewport, KasLoginGate, LinkedSurfacesSection, LogEntry, MarkdownPanel, MarkdownRenderer, McpBrowserModal search, McpCustomServerModal, OAuthRelayAffordance, OnboardingFlow.

Before (origin/main) vs after (this branch), dark:

Light:

[github-actions]

Design Review (Fable 5) — ✅ PASS

Design-level review of 217509a45296b1f206c97e80c0c7a4f47a06b09a — updated in place on each push. A BLOCK verdict blocks PR readiness; PASS/CONCERNS are advisory.

The diff matches the description on every sampled claim: ErrorNotice gains two optional, DOM-preserving props; revealOrOpen becomes required-onError with all six out-of-batch callers migrated; stale-response scoping (lockKey / filePath / subject) is real code, not just prose. The capture harness and temp-screenshots/ are established base-tree conventions, not scope creep. Rule-text changes are correctly deferred to the sweep owner (#8729). No design-level findings survived the kill-filter.

Design-Verdict: PASS

Eighth batch of an established sweep; the required-onError contract is the one shape that cannot regress, and every deviation from the audit is argued and documented.

[DESIGN-REVIEWED] 217509a

[github-actions]

GPT 5.6 Review — ✅ no blocking findings

GPT 5.6 completed its review of 217509a45296b1f206c97e80c0c7a4f47a06b09a and found no blocking issues.

This comment is updated in place on each push.

Review details

No findings.
[GPT-REVIEWED] 217509a

False positive or not applicable? A repository writer can comment:
/ai-review override gpt 217509a45296b1f206c97e80c0c7a4f47a06b09a: <one-sentence reason>

[github-actions]

First Principles Review (Fable 5) — ✅ PASS

Premise-level review of 217509a45296b1f206c97e80c0c7a4f47a06b09a — why this exists and whether the shipped surface is the smallest honest version. Updated in place on each push. A BLOCK verdict blocks PR readiness; PASS/CONCERNS are advisory.

I have everything I need. The mandate (errors-use-error-notice, blocking, in website/AUTOSDE.yaml:526), the askAgent/No hand-off comment convention (website/AGENTS.md:80-83), the sibling capture-script convention (8 existing capture-error-notice-*.mjs), and the temp-screenshots/ convention (995 files) are all verified; consumer counts for the new surfaces (useRevealFailure: 7 call sites, messageClassName: 5, onHandoff: 7) all clear the bar.

First-Principles-Verdict: PASS

Every surface converted is mandated by the blocking errors-use-error-notice rule, every new prop has counted consumers, and the alert() fix lands at cause level.

What this change ships

Intent: make every error in 22 shared components visible and recoverable through the shared notice, per a blocking repo rule — a FIX.

1. Hand-written red boxes/spans in 22 components → shared ErrorNotice — justified (blocking rule, website/AUTOSDE.yaml:526)
2. Blocking alert() on reveal/open and MarkdownPanel actions deleted at the shared helper — justified, cause-level
3. ~9 previously silent failures now render a message (GitPanel, LogEntry, InstanceTabBar, KasLoginGate, McpBrowserModal, FilePickerMenu, MarkdownPanel, LinkedSurfacesSection, InstancesViewport) — justified, declared
4. Agent hand-off on where no draft is at risk, off-with-comment beside drafts — justified (documented convention)
5. InstanceTabBar stays visible on a failed list read — declared visibility change, justified
6. Overlay notices close the modal on hand-off (onHandoff, 7 consumers) — justified
7. messageClassName on ErrorNotice for verbatim output (5 consumers) — justified
8. revealOrOpen requires onError; useRevealFailure hook; 6 out-of-batch callers migrated — declared rides-along, cause-level
9. Remedy line under KiroPrerequisiteGate failures; KasLoginGate cancel reworded — declared (review-round driven)
10. Capture page, self-checking screenshot script, before/after PNGs — matches 7 merged sibling batches
    (11th item over the cap: new keys in 14 locale files — mandated by the i18n gate.)

Subtractions

• useCopyAck's hand-rolled revealError/clearRevealError (FilePathMenu.tsx) is a second spelling of useRevealFailure defined 40 lines below in the same commit; compose useRevealFailure(filePath) inside useCopyAck (the attempt-guard wraps its onError) and drop the duplicate state (~8 lines).
• Drop the ? on useRevealFailure(subject?) — all 7 call sites pass a subject; the optional form has zero consumers.

[FIRST-PRINCIPLES-REVIEWED] 217509a

[github-actions]

UX Review (Fable 5) — 🟡 CONCERNS

UX-level review of 217509a45296b1f206c97e80c0c7a4f47a06b09a — updated in place on each push. A BLOCK verdict blocks PR readiness; PASS/CONCERNS are advisory.

Reconciliation is complete. All surfaces this PR touches appear in both screenshots (dark + light, before/after); the blind reader identified every control correctly and dared to use them all — "Ask the agent" was read correctly but self-rated "a guess". The one substantive issue: three newly-visible sites use errMessage(e) || friendly, so the plain-language string vanishes exactly when a raw server line exists, unlike GitPanel/LogEntry's title+raw shape in the same PR.

UX-Verdict: CONCERNS

Errors now surface everywhere and read correctly cold, but three newly-visible sites show only the raw server line, hiding what actually failed.

Watch

• InstanceTabBar, McpBrowserModal search and detail render errMessage(e) || i18nT(...) — the plain-language string shows only when the raw message is empty, so a real failure renders as a bare "HTTP 502: gateway unavailable" with no noun. The blind reader on exactly this shape: "no idea what 'HTTP 400' or 'project_dir' mean." Rare frequency, comprehension failure, every occurrence. Fix: the GitPanel/LogEntry shape from this same PR — title = friendly string, message = raw.
• "Ask the agent" was read correctly but rated "a guess", and the reader "cannot tell whether clicking it does something different for each error or always the same thing" — it now repeats on ~15 surfaces. Smallest fix: a title tooltip on the link ("Opens a chat with this error attached").

Evidence gaps

• McpBrowserModal detail-pane notices (detail_load_failed, the migrated 409 conflict) — the harness shows only the search/list placements; add a detail-pane cell.
• LinkedSurfacesSection targets_load_failed (failed offers read) — only the connect-row failure is shown.

[UX-REVIEWED] 217509a

[github-actions]

Opus 4.8 Review — ✅ no blocking findings

Reviewed 217509a45296b1f206c97e80c0c7a4f47a06b09a — this comment is updated in place on each push.

Review details

No findings.

FINDING — website/src/components/OAuthRelayAffordance.tsx:182 — the invalid-address branch sets hint and returns without clearing error, so a prior failed relay's error ("relay failed") keeps rendering through <ErrorNotice message={error}> beside the new "invalid address" hint; before this change setError(invalid_return_address) overwrote the stale message, so only one showed → Fix: add setError('') in the if (!isValidLoopbackReturnAddress(value)) branch before return.

[OPUS-REVIEWED] 217509a

Verdict parsed from the review's SHA-scoped output markers for commit 217509a45296b1f206c97e80c0c7a4f47a06b09a.

False positive or not applicable? A repository writer can comment:
/ai-review override fable 217509a45296b1f206c97e80c0c7a4f47a06b09a: <one-sentence reason>

[CrysisDeu]

UX Review disposition (CONCERNS on 217509a45)

• Raw errMessage(e) shown without a plain-language noun (InstanceTabBar, McpBrowserModal search/detail) — Kept as is for this batch, with the reasoning recorded: message is the journal lookup key ErrorNotice uses to recover the structured report (endpoint, status, backend code) for the hand-off, so the site passes the server's own string when there is one and the catalog sentence only as the fallback — the same shape the seven merged sibling batches use. Where a fixed noun IS wanted, the pattern is title={<plain sentence>} message={raw} (GitPanel and LogEntry in this PR do exactly that); a follow-up can apply it to these three sites, but changing the fallback order here would diverge from the sweep's convention mid-series.

[CrysisDeu]

UX Review disposition (CONCERNS on 217509a45)

• “Ask the agent” read as “a guess” — add a title tooltip on the link — Agreed, deferred as a follow-up: AskAgentButton is the shared component under every ErrorNotice across all merged batches, so the tooltip belongs in its own small PR rather than inside this batch (whose scope is the audit's file list). Not fixed here; flagged for the shared-component owner.

[CrysisDeu]

UX Review disposition (CONCERNS on 217509a45)

• Evidence gap — McpBrowserModal detail-pane notices (detail_load_failed, migrated 409 conflict) not in the harness — Not extended in this round: the detail-pane notices are the same ErrorNotice block/inline calls as the search-pane ones already captured (same strings family, askAgent on, no draft), and the harness self-check already pins 24 notices. Adding cells for every placement of an identical call would grow the sheet without changing what a reader learns; the strings themselves are exercised by McpBrowserModal.test.tsx (409 → “Name in use”, 503 → message on the row).

[CrysisDeu]

UX Review disposition (CONCERNS on 217509a45)

• Evidence gap — LinkedSurfacesSection targets_load_failed not in the harness — Not extended in this round for the same reason: it is the same inline askAgent notice as the connect-row failure shown in row 2, rendered one line higher in the same menu. The string is covered by the i18n gates (13 catalogs + en-XA) and the menu behaviour by LinkedSurfacesSection.cov80.test.tsx.