# Plan: Phase 3 Frontend + Roadmap Status Correction

**Date:** 2026-07-07
**Scope:** Correct the stale roadmap status table, then complete the two frontend-only Phase 3 items that need no server approval.

## Part A — Roadmap Status Correction (no code changes)

The roadmap status table (lines ~2100-2141) is stale. Several items marked "NOT DONE — needs approval" are actually installed and running on the server. Update the table to reflect verified reality:

| # | Current status line | Corrected status | Evidence |
|---|--------------------|-----------------|----------|
| 1.2 | "⚠️ PARTIAL — frontend done, server pending approval" | "✅ DONE" | `/opt/spq/ai-proxy/validate.js` exists, `spq-ai-validator.service` enabled+active, `spq-deepseek.conf` + `deepseek-key.conf` in nginx, `/deepseek/` location in shopproquote site |
| 1.3 | "❌ NOT DONE — needs PB migration + approval" | "✅ DONE" | `pb_migrations/1740000000020_users_create_role_guard.js` exists, applied in PB container (`migrate up` → "No new migrations to apply") |
| 1.4 | "⚠️ PARTIAL — frontend cleanup done, nginx pending" | "✅ DONE" | `/etc/nginx/snippets/spq-security.conf` exists with CSP + all headers, included via shopproquote site |
| 3.3 | "❓ UNKNOWN — server-side" | "✅ DONE" | `/etc/nginx/sites-enabled/shopproquote` serves dist/ on :443 with TLS + SPA fallback |
| 3.4 | "❓ UNKNOWN — server-side" | "✅ DONE" | `/pb/` and `/api/` reverse-proxy locations in shopproquote site; SSE (Upgrade/Connection headers) configured |

**Action:** Update the status table in `roadmap_5.2.md` lines ~2105-2134 to mark these 5 items as ✅ DONE with evidence. No code changes.

## Part B — Phase 3 Frontend-Only Items (no approval needed)

### B1: 3.6 Offline Banner

**Why first:** Pure frontend, zero approval, ~15 lines.

**Files:**
- New: `src/components/OfflineBanner.tsx` (per roadmap spec — `navigator.onLine` + `online`/`offline` event listeners, sticky amber banner when offline)
- Edit: `src/App.tsx` — import and render `<OfflineBanner />` inside `<BrowserRouter>`, above the route content

**Steps:**
1. Create `src/components/OfflineBanner.tsx` per the roadmap's existing code spec (lines 1767-1785)
2. Add `<OfflineBanner />` to App.tsx just inside `<BrowserRouter>`, above the layout/routes
3. Build + lint + test

**Verify:**
```
npm run build → passes
npm run lint → no new warnings
npm run test → 86 tests still pass
# Manual: toggle network off in DevTools → amber banner appears; on → disappears
```

### B2: 3.7 Dependency Audit

**Why:** `npm audit` already clean (0 vulnerabilities). Only minor version bumps remain — safe to apply.

**Current outdated (from `npm outdated`):**
| Package | Current | Latest | Risk |
|---------|--------|--------|------|
| @tailwindcss/vite | 4.3.1 | 4.3.2 | patch — safe |
| @types/node | 24.13.2 | 26.1.0 | major — SKIP (type-only, bleeding edge) |
| lucide-react | 1.21.0 | 1.23.0 | minor — safe |
| oxlint | 1.71.0 | 1.73.0 | minor — safe |
| react-router-dom | 7.18.0 | 7.18.1 | patch — safe |
| tailwindcss | 4.3.1 | 4.3.2 | patch — safe |
| vite | 8.1.0 | 8.1.3 | patch — safe |
| vitest | 4.1.9 | 4.1.10 | patch — safe |

**Steps:**
1. Run `npm audit` — confirm 0 vulnerabilities (already verified)
2. Apply safe minor/patch bumps: `npm update` (respects semver ranges in package.json — bumps to "Wanted" column, not to "Latest" for @types/node)
3. Skip `@types/node` 24→26 (major, type-only, no runtime impact)
4. Build + lint + test all green
5. Record the audit result in the roadmap memo

**Verify:**
```
npm run build → passes
npm run lint → no new warnings  
npm run test → 86 tests still pass
npm audit → 0 vulnerabilities
```

## Part C — Items requiring your approval (NOT in this plan, listed for visibility)

These are the only remaining roadmap items. ALL need your explicit go-ahead before I touch PocketBase or server config:

| # | Item | What it touches | Approval needed for |
|---|------|----------------|---------------------|
| 2.7 | Logo uploads to PB file records | PB `settings` collection | New PB migration (adds `logo` file field) |
| 3.1 | GlitchTip error tracking | New Docker container + `@sentry/react` dep | Server install + npm dep |
| 3.2 | PB production hardening | PB env vars, SMTP, backup cron | SMTP creds, cron job |
| 3.5 | Structured logging | nginx log_format, docker logging | nginx config change |
| 4.1-4.10 | Phase 4 features | Various PB + frontend | Per-feature approval |

## Execution Order

1. **Part A** — update roadmap status table (5 lines corrected, evidence cited)
2. **Part B1** — create OfflineBanner.tsx, wire into App.tsx
3. **Part B2** — `npm update` for safe bumps, verify
4. **Final verify** — build + lint + test all green
5. **Memo** — append Execution Memo to roadmap_5.2.md covering Parts A + B

**Total new files:** 1 (`OfflineBanner.tsx`)
**Total edited files:** 2 (`App.tsx`, `roadmap_5.2.md`)
**Risk:** Low — offline banner is self-contained, dep bumps are patch/minor only
**No PocketBase changes. No nginx changes. No new secrets.**