Synchronizing

{bar ? ( <>

{label}

) : ( <>

{label}

)}

); } ``` - [ ] **Step 2: Verify build and lint are clean** Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean. Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx` warnings. - [ ] **Step 3: Manual smoke test** Against `cmd/seedsample` data or a real Garmin-connected profile, click "Sync now" on the Profile page and confirm: - The modal appears immediately (spinner + "Discovering activities…"), same as before. - It transitions through "Activities: N/M" / "Workouts: N/M" progress bars, same as before. - The instant sync finishes, the modal disappears on its own (no manual click needed) and a banner appears with the result (green "Sync complete: N new activities", or red "Sync failed: ..."), including any pending-activities/pending-workouts line folded into the same banner. - Clicking "Close" while a sync is still in progress dismisses the modal early without producing a banner (there's no result to report yet). - [ ] **Step 4: Commit** ```bash git add frontend/src/components/SyncModal.tsx git commit -m "$(cat <<'EOF' refactor(frontend): SyncModal reports its result via a banner, auto-closes The modal is now purely the progress bar/spinner. The instant a poll reports the sync finished, it builds one banner message (the success/error line plus any pending-activities/pending-workouts nudge as extra lines) and closes itself -- no more manual Close click to dismiss a result the user already saw. The Close button stays as a manual escape hatch for a still-running sync. EOF )" ``` --- ### Task 5: Migrate `Profile.tsx` **Files:** - Modify: `frontend/src/pages/Profile.tsx` **Interfaces:** - Consumes: `showError` (Task 1). - Produces: nothing new. - [ ] **Step 1: Add the import** Replace: ```tsx import { useEffect, useRef, useState } from "react"; import { api, BASE_URL } from "../api/client"; import { ColorField } from "../components/ColorField"; ``` with: ```tsx import { useEffect, useRef, useState } from "react"; import { api, BASE_URL } from "../api/client"; import { showError } from "../banner"; import { ColorField } from "../components/ColorField"; ``` - [ ] **Step 2: Replace the local `error` state with a `profileLoadFailed` boolean** The page can't render its fields at all without `profile` loaded, so unlike the other pages in this plan, its "nothing loaded yet" fallback needs *some* way to distinguish "still loading" from "failed to load" -- the actual error text now lives only in the (transient) banner, so a boolean drives which fallback text shows. Replace: ```tsx const [profile, setProfile] = useState(null); const [error, setError] = useState(null); const [saved, setSaved] = useState(false); ``` with: ```tsx const [profile, setProfile] = useState(null); const [profileLoadFailed, setProfileLoadFailed] = useState(false); const [saved, setSaved] = useState(false); ``` - [ ] **Step 3: Update the mount effect** Replace: ```tsx useEffect(() => { api.getProfile().then(setProfile).catch((e) => setError(String(e))); }, []); ``` with: ```tsx useEffect(() => { api.getProfile().then(setProfile).catch((e) => { showError(String(e)); setProfileLoadFailed(true); }); }, []); ``` - [ ] **Step 4: Update `persist()`** Replace: ```tsx async function persist(next: ProfileType) { try { const updated = await api.updateProfile(next); profileRef.current = updated; setProfile(updated); setError(null); setSaved(true); onSaved?.(updated); } catch (e) { setError(String(e)); } } ``` with: ```tsx async function persist(next: ProfileType) { try { const updated = await api.updateProfile(next); profileRef.current = updated; setProfile(updated); setSaved(true); onSaved?.(updated); } catch (e) { showError(String(e)); } } ``` - [ ] **Step 5: Update `deleteAccount()`** Replace: ```tsx async function deleteAccount() { setDeleting(true); setError(null); try { ``` with: ```tsx async function deleteAccount() { setDeleting(true); try { ``` Replace: ```tsx } catch (e) { setError(String(e)); setDeleting(false); } } if (!profile) { return (

{error ?

{error}

}

); } ``` with: ```tsx } catch (e) { showError(String(e)); setDeleting(false); } } if (!profile) { return (

{profileLoadFailed ?

Couldn't load profile.

}

); } ``` - [ ] **Step 6: Remove the inline error paragraph in the main render** Replace: ```tsx

{error &&

{error}

} {saved &&

Saved.

} ``` with: ```tsx

{saved &&

Saved.

} ``` - [ ] **Step 7: Verify build and lint are clean** Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean. Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx` warnings. - [ ] **Step 8: Manual smoke test** With the backend running, load the Profile page and edit a field -- confirm autosave still works with no visual regression. Stop the backend, edit a field again -- confirm a red error banner appears (autosave failure) rather than nothing. - [ ] **Step 9: Commit** ```bash git add frontend/src/pages/Profile.tsx git commit -m "$(cat <<'EOF' refactor(frontend): migrate Profile.tsx to the banner system Load/save/delete failures now call showError instead of setting local error state. The profile-not-loaded-yet fallback gains a profileLoadFailed boolean so it can still distinguish "loading" from "failed to load" without the error text itself, which now lives only in the (transient) banner. EOF )" ``` --- ### Task 6: Migrate `Activities.tsx` **Files:** - Modify: `frontend/src/pages/Activities.tsx` **Interfaces:** - Consumes: `showError` (Task 1). - Produces: nothing new. - [ ] **Step 1: Add the import** Replace: ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { api } from "../api/client"; import { ExpectedVsActualChart } from "../components/charts/ExpectedVsActualChart"; ``` with: ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { api } from "../api/client"; import { showError } from "../banner"; import { ExpectedVsActualChart } from "../components/charts/ExpectedVsActualChart"; ``` - [ ] **Step 2: Remove the local `error` state** Replace: ```tsx const [filterKindId, setFilterKindId] = useState(""); const [error, setError] = useState(null); const [resolvingId, setResolvingId] = useState(null); ``` with: ```tsx const [filterKindId, setFilterKindId] = useState(""); const [resolvingId, setResolvingId] = useState(null); ``` - [ ] **Step 3: Update `loadMore`'s catch** Replace: ```tsx } catch (e) { if (gen === generationRef.current) setError(String(e)); } finally { setLoadingMore(false); ``` with: ```tsx } catch (e) { if (gen === generationRef.current) showError(String(e)); } finally { setLoadingMore(false); ``` - [ ] **Step 4: Update `loadFirstPage`'s catch** Replace: ```tsx .catch((e) => { if (gen === generationRef.current) setError(String(e)); }) .finally(() => { if (gen === generationRef.current) setInitialLoading(false); }); ``` with: ```tsx .catch((e) => { if (gen === generationRef.current) showError(String(e)); }) .finally(() => { if (gen === generationRef.current) setInitialLoading(false); }); ``` - [ ] **Step 5: Update the mount effect** Replace: ```tsx useEffect(() => { loadFirstPage(""); api.listWorkoutKinds().then(setKinds).catch((e) => setError(String(e))); api.getProfile().then(setProfile).catch((e) => setError(String(e))); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); ``` with: ```tsx useEffect(() => { loadFirstPage(""); api.listWorkoutKinds().then(setKinds).catch((e) => showError(String(e))); api.getProfile().then(setProfile).catch((e) => showError(String(e))); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); ``` - [ ] **Step 6: Update `resolve`, `unassign`, `unlock`** Replace (in `resolve`): ```tsx } catch (e) { setError(String(e)); } finally { setResolvingId(null); } } async function unassign(activityId: number) { ``` with: ```tsx } catch (e) { showError(String(e)); } finally { setResolvingId(null); } } async function unassign(activityId: number) { ``` Replace (in `unassign`): ```tsx } catch (e) { setError(String(e)); } finally { setResolvingId(null); } } async function unlock(activityId: number) { ``` with: ```tsx } catch (e) { showError(String(e)); } finally { setResolvingId(null); } } async function unlock(activityId: number) { ``` Replace (in `unlock`): ```tsx } catch (e) { setError(String(e)); } finally { setResolvingId(null); } } function toggleFilter(id: string) { ``` with: ```tsx } catch (e) { showError(String(e)); } finally { setResolvingId(null); } } function toggleFilter(id: string) { ``` - [ ] **Step 7: Remove the inline error paragraph** Replace: ```tsx

{error &&

{error}

} {grandTotal > 0 && ( ``` with: ```tsx

{grandTotal > 0 && ( ``` - [ ] **Step 8: Verify build and lint are clean** Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean. Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx` warnings. - [ ] **Step 9: Manual smoke test** With the backend running, load the Activities tab -- confirm the list still loads and classify/unlock actions still work with no visual regression. Stop the backend and reload -- confirm a red error banner appears instead of a silent failure. - [ ] **Step 10: Commit** ```bash git add frontend/src/pages/Activities.tsx git commit -m "$(cat <<'EOF' refactor(frontend): migrate Activities.tsx to the banner system Every load/classify/unlock failure now calls showError instead of setting local error state; the inline error paragraph is removed. EOF )" ``` --- ### Task 7: Migrate `Analysis.tsx` **Files:** - Modify: `frontend/src/pages/Analysis.tsx` **Interfaces:** - Consumes: `showError` (Task 1). - Produces: nothing new. - [ ] **Step 1: Add the import** Replace: ```tsx import { useEffect, useState } from "react"; import { api } from "../api/client"; import { ProgressionChart } from "../components/charts/ProgressionChart"; ``` with: ```tsx import { useEffect, useState } from "react"; import { api } from "../api/client"; import { showError } from "../banner"; import { ProgressionChart } from "../components/charts/ProgressionChart"; ``` - [ ] **Step 2: Remove the local `error` state and update both effects** Replace: ```tsx const [points, setPoints] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { api .listWorkoutKinds() .then((k) => { setKinds(k); if (k.length > 0) setSelectedKindId(k[0].ID); }) .catch((e) => setError(String(e))); }, []); useEffect(() => { if (selectedKindId == null) return; setLoading(true); setError(null); api .progression(selectedKindId, metric) .then(setPoints) .catch((e) => setError(String(e))) .finally(() => setLoading(false)); }, [selectedKindId, metric]); ``` with: ```tsx const [points, setPoints] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { api .listWorkoutKinds() .then((k) => { setKinds(k); if (k.length > 0) setSelectedKindId(k[0].ID); }) .catch((e) => showError(String(e))); }, []); useEffect(() => { if (selectedKindId == null) return; setLoading(true); api .progression(selectedKindId, metric) .then(setPoints) .catch((e) => showError(String(e))) .finally(() => setLoading(false)); }, [selectedKindId, metric]); ``` - [ ] **Step 3: Remove the inline error paragraph** Replace: ```tsx {error &&

{error}

} {loading ?

: } ``` with: ```tsx {loading ?

: } ``` - [ ] **Step 4: Verify build and lint are clean** Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean. Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx` warnings. - [ ] **Step 5: Manual smoke test** With the backend running, load the Analysis tab and switch training types/metrics -- confirm no visual regression. Stop the backend and switch again -- confirm a red error banner appears. - [ ] **Step 6: Commit** ```bash git add frontend/src/pages/Analysis.tsx git commit -m "$(cat <<'EOF' refactor(frontend): migrate Analysis.tsx to the banner system EOF )" ``` --- ### Task 8: Migrate `TrainingTypesCard.tsx` **Files:** - Modify: `frontend/src/components/TrainingTypesCard.tsx` **Interfaces:** - Consumes: `showError` (Task 1). - Produces: nothing new. - [ ] **Step 1: Add the import** Replace: ```tsx import { useEffect, useState } from "react"; import { api } from "../api/client"; import { NullableNumberField } from "./NullableNumberField"; ``` with: ```tsx import { useEffect, useState } from "react"; import { api } from "../api/client"; import { showError } from "../banner"; import { NullableNumberField } from "./NullableNumberField"; ``` - [ ] **Step 2: Remove the local `error` state and its resets** Replace: ```tsx const [hrMax, setHrMax] = useState(null); const [error, setError] = useState(null); function reload() { api.listWorkoutKinds(true).then(setKinds).catch((e) => setError(String(e))); } useEffect(reload, []); function startEdit(k: WorkoutKind) { setEditing(k); setName(k.Name); setDescription(k.Description); setPaceMin(k.pace_min_sec_per_km); setPaceMax(k.pace_max_sec_per_km); setHrMin(k.hr_min_pct_hrr); setHrMax(k.hr_max_pct_hrr); setError(null); } async function save() { if (!editing) return; setError(null); try { await api.updateWorkoutKind(editing.ID, { name, description, rule: JSON.parse(editing.RuleJSON || "{}"), pace_min_sec_per_km: paceMin, pace_max_sec_per_km: paceMax, hr_min_pct_hrr: hrMin, hr_max_pct_hrr: hrMax, }); setEditing(null); reload(); } catch (e) { setError(String(e)); } } ``` with: ```tsx const [hrMax, setHrMax] = useState(null); function reload() { api.listWorkoutKinds(true).then(setKinds).catch((e) => showError(String(e))); } useEffect(reload, []); function startEdit(k: WorkoutKind) { setEditing(k); setName(k.Name); setDescription(k.Description); setPaceMin(k.pace_min_sec_per_km); setPaceMax(k.pace_max_sec_per_km); setHrMin(k.hr_min_pct_hrr); setHrMax(k.hr_max_pct_hrr); } async function save() { if (!editing) return; try { await api.updateWorkoutKind(editing.ID, { name, description, rule: JSON.parse(editing.RuleJSON || "{}"), pace_min_sec_per_km: paceMin, pace_max_sec_per_km: paceMax, hr_min_pct_hrr: hrMin, hr_max_pct_hrr: hrMax, }); setEditing(null); reload(); } catch (e) { showError(String(e)); } } ``` - [ ] **Step 3: Remove the inline error paragraph** Replace: ```tsx Training types {error &&

{error}

}

Training types

Loading…

🧞‍♀️ geniusrun

{authError &&

{AUTH_ERROR_MESSAGES[authError] ?? "Login failed, please try again."}

} Log in

 when the
  // login-gate's own role check (not Keycloak's own authentication) rejects
  // a session -- surfaced once, as a banner, the moment this screen is
  // reached.
  useEffect(() => {
    if (status !== "unauthenticated") return;
    const authError = new URLSearchParams(window.location.search).get("auth_error");
    if (authError) showError(AUTH_ERROR_MESSAGES[authError] ?? "Login failed, please try again.");
  }, [status]);

  if (status === "loading") {
    return Loading…;
  }

  if (status === "unauthenticated") {
    return (
      
        🧞‍♀️ geniusrun
        
          Log in
        
      
    );
  }
```

- [ ] **Step 2: Remove the now-dead CSS rule**

In `frontend/src/LoginGate.css`, remove:

```css
.login-gate-error {
  color: #f87171;
}

```

(the blank line after it goes too, so the file doesn't end up with a doubled blank line between
the remaining rules).

- [ ] **Step 3: Verify build and lint are clean**

Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean.
Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx` warnings.

- [ ] **Step 4: Manual smoke test**

Load `/?auth_error=forbidden` while logged out -- confirm the login screen shows a
red error banner reading "Your account isn't authorized for geniusrun." instead of the old inline
text, and the "Log in" link/button still works normally.

- [ ] **Step 5: Commit**

```bash
git add frontend/src/LoginGate.tsx frontend/src/LoginGate.css
git commit -m "$(cat <<'EOF'
refactor(frontend): migrate LoginGate.tsx's auth_error to the banner system
EOF
)"
```

---

### Task 10: Migrate `OnboardingWizard.tsx` (splitting validation from real failures)

**Files:**
- Modify: `frontend/src/OnboardingWizard.tsx`
- `frontend/src/OnboardingWizard.css` is NOT modified in this task -- `.onboarding-wizard-error`
  stays in active use (see Step 4).

**Interfaces:**
- Consumes: `showError` (Task 1).
- Produces: nothing new. `onCreated` prop signature unchanged.

- [ ] **Step 1: Add the import, split the state**

Field-validation messages ("Please enter a display name.", "Please enter your Garmin email and
password.") stay local and inline -- they're about fixing a specific input, not a transient system
event. Real failures (Garmin login rejected, MFA rejected, `complete()` failing) call `showError`
instead. The `complete()`-failure Retry button's visibility switches from `error &&` to a new
`completeFailed` boolean, since the error text itself now lives only in the (transient) banner.

Replace:

```tsx
import { useEffect, useRef, useState } from "react";
import { api } from "./api/client";
import "./OnboardingWizard.css";
import type { AuthResponse } from "./types/api";
```

with:

```tsx
import { useEffect, useRef, useState } from "react";
import { api } from "./api/client";
import { showError } from "./banner";
import "./OnboardingWizard.css";
import type { AuthResponse } from "./types/api";
```

Replace:

```tsx
  const [auth, setAuth] = useState(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(null);
  const completeTriggered = useRef(false);

  function submitName(e: React.FormEvent) {
    e.preventDefault();
    if (!displayName.trim()) {
      setError("Please enter a display name.");
      return;
    }
    setError(null);
    setStep("garmin");
  }

  async function submitGarmin(e: React.FormEvent) {
    e.preventDefault();
    if (!email.trim() || !password) {
      setError("Please enter your Garmin email and password.");
      return;
    }
    setBusy(true);
    setError(null);
    try {
      setAuth(await api.setupGarminLogin(email.trim(), password));
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
    } finally {
      setBusy(false);
    }
  }

  async function submitMFA() {
    if (!code.trim()) return;
    setBusy(true);
    setError(null);
    try {
      setAuth(await api.setupGarminMFA(code.trim()));
      setCode("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
    } finally {
      setBusy(false);
    }
  }

  async function complete() {
    setBusy(true);
    setError(null);
    try {
      const result = await api.setupComplete(displayName.trim());
      onCreated(result.display_name);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
      setBusy(false);
    }
  }
```

with:

```tsx
  const [auth, setAuth] = useState(null);
  const [busy, setBusy] = useState(false);
  // Field-validation messages only ("please fill this in") -- real
  // API/Garmin failures go through the shared banner system instead (see
  // completeFailed below for why the Retry button no longer keys off this).
  const [validationError, setValidationError] = useState(null);
  const [completeFailed, setCompleteFailed] = useState(false);
  const completeTriggered = useRef(false);

  function submitName(e: React.FormEvent) {
    e.preventDefault();
    if (!displayName.trim()) {
      setValidationError("Please enter a display name.");
      return;
    }
    setValidationError(null);
    setStep("garmin");
  }

  async function submitGarmin(e: React.FormEvent) {
    e.preventDefault();
    if (!email.trim() || !password) {
      setValidationError("Please enter your Garmin email and password.");
      return;
    }
    setBusy(true);
    setValidationError(null);
    try {
      setAuth(await api.setupGarminLogin(email.trim(), password));
    } catch (err) {
      showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
    } finally {
      setBusy(false);
    }
  }

  async function submitMFA() {
    if (!code.trim()) return;
    setBusy(true);
    try {
      setAuth(await api.setupGarminMFA(code.trim()));
      setCode("");
    } catch (err) {
      showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
    } finally {
      setBusy(false);
    }
  }

  async function complete() {
    setBusy(true);
    setCompleteFailed(false);
    try {
      const result = await api.setupComplete(displayName.trim());
      onCreated(result.display_name);
    } catch (err) {
      showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
      setCompleteFailed(true);
      setBusy(false);
    }
  }
```

- [ ] **Step 2: Update the three JSX render sites**

Replace (the "name" step):

```tsx
          {error && {error}}


    );
  }
```

with:

```tsx
          {validationError && {validationError}}


    );
  }
```

Replace (the "authenticated, finishing setup" branch):

```tsx
          Connected to Garmin — finishing setup…
          {error && (
            <>
              {error}
              
            
          )}
```

with:

```tsx
          Connected to Garmin — finishing setup…
          {completeFailed && (
            
          )}
```

Replace (the "mfa_required" branch):

```tsx
          {auth.message && {auth.message}}
          {error && {error}}


      ) : (
```

with:

```tsx
          {auth.message && {auth.message}}


      ) : (
```

Replace (the Garmin-login form branch, the last remaining use of `error`):

```tsx
          {auth?.message && {auth.message}}
          {error && {error}}
          
        
      )}
```

with:

```tsx
          {auth?.message && {auth.message}}
          {validationError && {validationError}}
          
        
      )}
```

- [ ] **Step 3: Verify build and lint are clean**

Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean.
Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx` warnings.

- [ ] **Step 4: Manual smoke test**

Walk through onboarding as a brand-new account: leave the display name blank and submit -- confirm
the inline "Please enter a display name." message still appears (not a banner). Enter a name,
continue, then enter a wrong Garmin password -- confirm a red error banner appears instead of the
old inline message, and the form is still usable to retry.

Note: `frontend/src/OnboardingWizard.css`'s `.onboarding-wizard-error` rule is **not** touched in
this task -- it's still in active use by `validationError`'s two remaining
`` sites, just no longer for real-failure messages.

- [ ] **Step 5: Commit**

```bash
git add frontend/src/OnboardingWizard.tsx
git commit -m "$(cat <<'EOF'
refactor(frontend): split OnboardingWizard's validation vs real failures

Field-validation messages ("please fill this in") stay local and
inline. Real failures (Garmin login rejected, MFA rejected, complete()
failing) now call showError. The complete()-failure Retry button's
visibility switches from the error text's presence to a new
completeFailed boolean, since the error text itself now lives only in
the (transient) banner.
EOF
)"
```

---

### Task 11: Remove the now-dead `.error` CSS class, final verification

**Files:**
- Modify: `frontend/src/App.css:277-279` (remove `.error`)

**Interfaces:**
- Consumes: nothing.
- Produces: nothing -- this is cleanup plus the plan's final verification pass.

- [ ] **Step 1: Confirm nothing references `.error` anymore**

Run: `grep -rn 'className="error"' frontend/src`
Expected: no output. (Tasks 3, 5, 6, 7, 8 removed every use; `OnboardingWizard.css`'s
`.onboarding-wizard-error` and `LoginGate.css`'s -- already removed in Task 9 -- are separate,
differently-named classes, not `.error` itself.)

- [ ] **Step 2: Remove the dead rule**

In `frontend/src/App.css`, remove:

```css
.error {
  color: #f87171;
}

```

- [ ] **Step 3: Full verification**

Run: `cd frontend && npm run build 2>&1 | tail -30` -- clean.
Run: `cd frontend && npm run lint 2>&1 | tail -30` -- only the pre-existing `PaceField.tsx`
warnings.

- [ ] **Step 4: End-to-end manual smoke test**

With both the backend and frontend dev servers running:
- Trigger a real API error (e.g. an invalid save somewhere) -- confirm a red banner.
- Stop the backend and trigger any action -- confirm a red banner reading "Can't reach the server
  — check your connection."
- Restart the backend, run a full sync to completion -- confirm the modal auto-closes and a green
  success banner appears.
- Trigger a sync that leaves pending activities/workouts (e.g. interrupt a large backfill, or use
  a small `detailFillLimit`) -- confirm the same banner's second line shows the pending nudge.
- Load `?auth_error=failed` while logged out -- confirm a red banner on the login screen.
- Trigger two errors in quick succession -- confirm they stack (newest on top) and each
  auto-dismisses independently after ~8s, and that clicking a banner's × dismisses it immediately.

- [ ] **Step 5: Commit**

```bash
git add frontend/src/App.css
git commit -m "$(cat <<'EOF'
chore(frontend): remove the now-dead .error CSS class

Every inline error paragraph that used it has been migrated to the
banner system across the preceding tasks.
EOF
)"
```

---

## Final verification

- [ ] Run the full frontend build/lint one more time: `cd frontend && npm run build && npm run lint`
- [ ] Re-run the end-to-end manual smoke test from Task 11, Step 4, once more, fresh.
- [ ] Use superpowers:finishing-a-development-branch to wrap up (tests green -> present the
  merge/PR/keep-as-is menu).