feat: centralize API error localization

Replace the err instanceof ApiError ? err.message : t(fallback) anti-
pattern -- which showed raw English backend text for the common case and
only used the localized fallback for the rare network-failure case -- at
all 13 call sites across 7 files.

New frontend/src/api/errorMessages.ts (describeApiError) resolves a
caught error to a localized {title, explanation, nextStep?, technical}
by checking the 32 known AppError codes first, then known HTTP statuses
(401/403/404/409/422/500), then a fully generic fallback. New
ApiErrorNotice (PageChrome.tsx) renders title/explanation/nextStep with
the raw text demoted to a "Technical details"/"Details techniques"
disclosure -- never shown as the primary message.

ApiError itself is split out of client.ts into a standalone
api/apiError.ts with no import.meta.env dependency, so errorMessages.ts
(and its tests) can be loaded outside a Vite/browser context.

frontend/src/components/DemoGuide.tsx

@@ -1,13 +1,15 @@
 import { useNavigate, useLocation } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { api, ApiError } from "../api/client";
+import { api } from "../api/client";
+import { describeApiError, type ApiErrorInfo } from "../api/errorMessages";
 import { useAuth } from "../context/AuthContext";
 import { useDemoGuide } from "../context/DemoGuideContext";
 import { useDemoManifest } from "../context/DemoManifestContext";
 import { useViewportTier } from "../hooks/useViewportTier";
 import { DEMO_GUIDE_STEPS } from "../data/demoGuideSteps";
 import { Icon } from "./Icons";
+import { ApiErrorNotice } from "./PageChrome";
 import { PRODUCT_NAME } from "../product";
 
 export function DemoGuideTrigger() {
@@ -68,7 +70,7 @@ export function DemoGuide() {
     setCollapsedToChip,
   } = useDemoGuide();
   const [resetting, setResetting] = useState(false);
-  const [resetError, setResetError] = useState<string | null>(null);
+  const [resetError, setResetError] = useState<ApiErrorInfo | null>(null);
   const [mobileSheetState, setMobileSheetState] = useState<"collapsed" | "half" | "full">("half");
   const pendingTarget = useRef<string | null>(null);
 
@@ -119,7 +121,7 @@ export function DemoGuide() {
       await logout();
       navigate("/login");
     } catch (err) {
-      setResetError(err instanceof ApiError ? err.message : t("guide.restartFailed"));
+      setResetError(describeApiError(t, err, "guide.restartFailed"));
     } finally {
       setResetting(false);
     }
@@ -227,7 +229,7 @@ export function DemoGuide() {
             </nav>
           )}
 
-          {resetError && <p className="error" role="alert">{resetError}</p>}
+          <ApiErrorNotice error={resetError} />
 
           <footer className="demo-guide-footer">
             <button type="button" className="button button-secondary" onClick={goToStepRoute}>