Frontend: isolate every extension contribution and the app root with an error boundary #880

Goal

A render error in one extension contribution (settings section, form section, server settings tab, session header item, composer action, manage view, document action) no longer blanks the whole window: only that contribution disappears, the rest of the app stays usable, and a render error outside the slots shows a recovery screen with a reload button instead of an empty window.

Context

• The only error boundary in the frontend is ExtensionBoundary in apps/smart-ssh-community/frontend/src/components/FirstRunNoticeScreen.tsx:35-60 (issue Isolate first-run notice extensions with an error boundary #159), used only for first-run notice extensions (:142-149).
• All other slot contributions from src/extensions/registry.ts (lines 265-509) render unprotected:
  • settings sections: components/SettingsScreen.tsx:105-110 and the "Data and backup" list at :284
  • server/group form sections, server settings tabs, manage views: extensions/FormSlots.tsx:22,52,63,67,81 (manage views rendered from components/Sidebar.tsx:91)
  • session header items: extensions/SessionHeaderItems.tsx:14
  • composer actions: components/ChatPanel.tsx:411; document actions: components/ChatPanel.tsx:2913
• A throwing contribution unmounts the whole React tree; the desktop window stays empty until restart.
• src/main.tsx:56-62 renders <StartupGate><App/></StartupGate> without a boundary.

Requirements

• Move the boundary to src/components/ui/ErrorBoundary.tsx and export it from components/ui/index.ts:
  • props: id: string, fallback?: ReactNode (default: render nothing), onError?: (id, error, info) => void, children
  • componentDidCatch always logs once via console.error with the id (no error payload in the UI)
  • optional resetKeys?: unknown[]: when a value changes, the boundary tries to render again (so a contribution that failed for one server can render for the next one)
• FirstRunNoticeScreen uses the new component; its behaviour from Isolate first-run notice extensions with an error boundary #159 stays unchanged.
• Every slot renderer listed under Context wraps each contribution individually (keyed by the contribution id) in ErrorBoundary. Where a contribution is a button (composer action, document action), the fallback is "not rendered".
• Root boundary: main.tsx wraps the tree inside StrictMode in an ErrorBoundary whose fallback is a full-window recovery screen:
  • title "Something went wrong", text "Smart SSH hit an unexpected error in the interface. Reload to continue. If it happens again, create a diagnostics bundle under Settings → Diagnostics after reloading.", button "Reload" (window.location.reload())
  • uses the existing UI building blocks (Button, colour tokens), works in the narrow layout, keyboard-reachable, passes the a11y lint
  • texts as new i18n keys in all locales under src/locales/* (locale parity test stays green; translate, do not copy English)
• Spec 0045 (frontend extension points) states: each contribution is isolated; a failing one is not rendered and is logged; a render error outside the slots shows the recovery screen.

Acceptance Criteria

• components/ui/ErrorBoundary.tsx exists with the props above; unit test: a throwing child renders the fallback, onError is called once with the id, console.error is called; changing resetKeys renders the child again.
• Test: a registered settings section that throws during render is not shown, every other section (built-in and registered) is still rendered and interactive, and console.error was called.
• Same kind of test for one form section, one session header item, one composer action and one document action.
• Test: a component that throws inside <App/> outside any slot shows the recovery screen with a "Reload" button that calls window.location.reload (mocked).
• FirstRunNoticeScreen tests from Isolate first-run notice extensions with an error boundary #159 pass unchanged.
• New texts exist in every locale; locale parity and placeholder tests pass.
• Spec 0045 updated as described.
• Relevant automated tests pass (npm run lint, npm test, tsc -b).

Technical Notes

• Files: src/components/ui/ErrorBoundary.tsx (new), src/components/ui/index.ts, src/components/FirstRunNoticeScreen.tsx, src/components/SettingsScreen.tsx, src/extensions/FormSlots.tsx, src/extensions/SessionHeaderItems.tsx, src/components/ChatPanel.tsx (only the two render sites), src/components/Sidebar.tsx or wherever manage views render, src/main.tsx, src/locales/*/common.json, docs/specs/0045-registry-cleanup-document-actions.md.
• ChatPanel.tsx is very large (> 3,000 lines): change only the two .map render sites, read it with offsets. If the document card or the composer has already moved out of ChatPanel.tsx (Chat: move ChatItemView, the action card parts, QuickRuleButton, DocumentCard and AssistantMessageView into components/chat/ #832, Chat: extract useChatComposer, useVoiceComposer and the Composer component #842), wrap the contributions where they render now.
• React error boundaries do not catch errors in event handlers or async code; that is expected and out of scope.
• No security-relevant code path is touched.

Spec impact: update 0045

Open questions

• none

Related Work

• Isolate first-run notice extensions with an error boundary #159 (first-run notice extensions isolated with an error boundary)