Massive AI Overhaul

docs/STAGE7-SESSION-PROMPT.md

@@ -0,0 +1,166 @@
+# SVS MSP CALC — STAGE 7 SESSION PROMPT
+# Post-Elastic — Feature Work & Polish
+# Generated: 2026-03-15
+
+---
+
+## WHERE WE ARE
+
+**Beta build: COMPLETE.** Sections I–III are production-quality.
+**Phases 1–9: COMPLETE.** Bug fixes, visual polish, UX hardening, docs/QA, a11y/perf, code quality, test expansion, print enhancements, visual QA.
+**Phase 10 / Stage 6: COMPLETE.** Elastic responsive foundation — fluid `clamp()` tokens replace 5 fixed breakpoints with 3 structural ones. Max width scales to 2400px for large monitors.
+**Tests:** 254/254 passing.
+**Sections IV–VI:** Intentionally deferred as placeholders — do not activate.
+
+### Completed Stages
+- **Stage 1** — Discovery audit (codebase mapping, doc generation)
+- **Stage 2** — Beta build (Phases 1–4: bug fixes, visual polish, UX hardening, docs/QA)
+- **Phase 5** — Accessibility/performance audit + Font Awesome icon fix
+- **Stage 3 / Phase 6** — Code quality pass (tokens, CSS dedup, dead code)
+- **Stage 4 / Phase 7** — Test expansion (88 → 254 tests)
+- **Stage 4 / Phase 8** — Enhanced Print/PDF (rep name, notes, validity date, page breaks, CYA section)
+- **Stage 5 / Phase 9** — Visual QA (3 breakpoints × 4 themes) + Retro theme overhaul
+- **Stage 6 / Phase 10** — Elastic responsive foundation (5 → 3 breakpoints, fluid clamp() tokens, max-width up to 2400px)
+
+---
+
+## START EVERY SESSION BY READING
+
+1. `svsmspcalc/docs/CHECKPOINT.md` — current status, all completed work
+2. `svsmspcalc/docs/MASTER-SESSION-PROMPT.md` — full architecture, constraints, priorities
+3. `svsmspcalc/docs/QUICK-REF.md` — compact file map, DOM IDs, pricing, danger zones
+4. This file — session goals and context
+
+---
+
+## PROJECT SNAPSHOT
+
+**App:** SVS MSP CALC — live quote/pricing calculator for SVS Managed Services
+**Type:** Static HTML + Vanilla JS + Modular CSS (no frameworks, no build tools, no npm)
+**Used by:** SVS sales team, live on screen during prospect calls
+
+### Architecture
+```
+svsmspcalc/
+├── SVS-MSP-Calculator.html       # Stable HTML shell (65KB)
+├── SVS-MSP-Calculator.js         # Orchestration (350 lines)
+├── quote-engine.js               # Pure quote math (197 lines)
+├── quote-pricing.js              # Pricing defaults + CSV override (134 lines)
+├── quote-render.js               # DOM rendering + nudges (729 lines)
+├── quote-persistence.js          # localStorage save/restore (237 lines)
+├── quote-export.js               # Print/PDF + JSON export (320 lines)
+├── quote-import.js               # JSON quote import (166 lines)
+├── theme-manager.js              # 4-theme switching (121 lines)
+├── mobile-sync.js                # Mobile panel sync (275 lines)
+├── SVS-MSP-Calculator.css        # Manifest (@imports all CSS)
+├── SVS-MSP-Calculator-tokens.css # Design tokens + CSS vars (fluid clamp() layout)
+├── SVS-MSP-Calculator-base.css   # Global chrome
+├── SVS-MSP-Calculator-layout.css # Grid, header, main/sidebar
+├── SVS-MSP-Calculator-components.css # Section cards, controls, sidebar (67KB)
+├── SVS-MSP-Calculator-responsive.css # 3 structural breakpoints (1100/600/780L)
+├── SVS-MSP-Calculator-print.css  # Print-specific rules
+├── SVS-MSP-Calculator-light.css  # Light theme overrides
+├── SVS-MSP-Calculator-glass.css  # Glass theme (glassmorphism)
+├── SVS-MSP-Calculator-70retro.css # Retro Cyberpunk theme (paper + hot rose/teal)
+├── package-prices.csv            # Overrideable pricing (31 rows)
+├── tests/
+│   └── test-quote-engine.js      # 254 tests (Node.js, zero deps)
+└── docs/
+    ├── CHECKPOINT.md             # Build status checkpoint
+    ├── MASTER-SESSION-PROMPT.md  # Full architecture brief
+    ├── QUICK-REF.md              # Compact reference
+    ├── README.md
+    ├── code-verification.md      # Known-good baseline
+    ├── phase-roadmap.md          # Phase status
+    ├── quote-rules.md            # Business logic rules
+    ├── regression-checklist.md   # Test procedures
+    └── STAGE7-SESSION-PROMPT.md  # This file
+```
+
+### Responsive Architecture (Phase 10)
+- **Fluid tokens** in `tokens.css` — `clamp()` drives all spacing/sizing continuously
+- **3 structural breakpoints** in `responsive.css`:
+  - `≤1100px` — 2-col grid → 1-col, sidebar → mobile pill/panel
+  - `≤600px` — phone layout shifts (stacking, gutter collapse, touch targets)
+  - `≤780px landscape` — restore 2-col with sticky sidebar
+- **Width scaling:** 1080p → ~1766px, 1440p → ~2355px, 4K → 2400px cap
+- No more 1350px or 900px breakpoints — fluid tokens handle the range
+
+### Retro Theme Status
+- Overhauled from 70s wood-panel brown → warm paper + cyberpunk neon-warm accents
+- Accent: hot rose `#e11d48` | Teal: `#0d9488` | Header: warm charcoal `#1c1317`
+- **User noted:** full design polish deferred — current version is functional placeholder
+- Retro theme not yet QA'd across all viewport widths
+
+---
+
+## HARD CONSTRAINTS (NON-NEGOTIABLE)
+
+1. DOM IDs are a contract — renaming breaks mobile sync (100+ pairs)
+2. 254 tests must pass: `node svsmspcalc/tests/test-quote-engine.js`
+3. localStorage keys unchanged: `svs-msp-quote-v1`, `svs-msp-quote-ref`
+4. All 4 themes must work after every change
+5. Mobile parity maintained
+6. Print/PDF tested after CSS changes
+7. No frameworks, no npm — vanilla only
+8. Surgical changes only — read before editing
+9. Sections IV–VI are placeholders — do not activate or build out
+
+---
+
+## STAGE 7 GOALS — Choose priorities from this menu:
+
+### Option A: Feature Work
+- **Sidebar keyboard shortcuts** — Ctrl+P print, Ctrl+E export, Ctrl+R reset, Escape close focus mode
+- **Additional nudge logic** — new contextual nudges (e.g. "no endpoints but users set", "VoIP seats ≠ user count", high admin-to-MRR ratio)
+- **Any specific feature requests from the user**
+
+### Option B: Further Code Quality
+- `--transition-fast` token adoption across components.css
+- CSS selector specificity audit
+- Print CSS hardening
+
+### Option C: Retro Theme Full Design Pass
+- Complete cyberpunk aesthetic overhaul with user collaboration
+- Color refinement, contrast tuning, component-level styling
+- Full viewport QA after design is finalized
+
+### Option D: Visual QA Sweep
+- Verify elastic responsive behavior across viewport range (resize from 375px → 2560px)
+- Confirm all 4 themes render cleanly with new fluid tokens
+- Test landscape orientation on tablet/phone sizes
+
+---
+
+## PRICING REFERENCE
+
+```
+Users:     M365 $140 (m2m) / $130 (annual) | BYOL $110
+           ExtHrs +$25 | 1PWM +$9 | INKY +$8 | ZT +$55
+Endpoints: $35/ea | USB +$4 | BMB +$25
+Servers:   $120/ea
+ZT Net:    $25/seat | $100/router
+Admin:     Floor $150 | Threshold $650 | ZT supplement +$250 | 1PWM 10%
+VoIP:      Basic $28 | Standard $35 | Premium $45 | Phone +$15 | Fax +$10
+Discounts: m2m 0% | 12mo 3% + 50% off onboarding | 24mo 5% + complimentary
+HST:       13% (Ontario)
+```
+
+---
+
+## VERIFICATION COMMAND
+
+```
+node svsmspcalc/tests/test-quote-engine.js
+```
+
+254 tests, zero dependencies. Run after any pricing/engine/render changes.
+
+---
+
+## CONTEXT MANAGEMENT
+
+After completing work:
+- Update `docs/CHECKPOINT.md` with results
+- If context is heavy, create `docs/STAGE8-SESSION-PROMPT.md` for the next chat
+- Keep this document chain as the canonical handoff mechanism