spq-v2/.hermes/plans/2026-07-07_phase3-frontend-and-status-correction.md

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.