# SVS MSP CALC — STAGE 5 SESSION PROMPT # Post-Feature Sprint — QA, Polish & Next Features # Generated: 2026-03-15 --- ## WHERE WE ARE **Beta build: COMPLETE.** Sections I–III are production-quality. **Accessibility/performance audit: COMPLETE.** Phase 5 fixes applied. **Code quality pass: COMPLETE.** Phase 6 — hardcoded colors tokenized, CSS deduped, dead code removed. **Test expansion: COMPLETE.** Phase 7 — 88 → 254 tests (pricing integrity, edge cases, export schema, persistence, import round-trip, invariants). **Enhanced Print/PDF: COMPLETE.** Phase 8 — rep name, notes field, validity date, page breaks, CYA "Not Included" section. **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 (aria-expanded, focus traps, stepper labels, glass scroll fix, mobile sync optimization) - **Phase 5b** — Font Awesome icon fix (inline data URIs for file:// protocol) - **Stage 3 / Phase 6** — Code quality pass (new `--sky` + `--transition-fast` tokens, button CSS dedup, hardcoded colors → color-mix(), dead null-check removed) - **Stage 4 / Phase 7** — Test expansion (88 → 254 tests across 6 categories) - **Stage 4 / Phase 8** — Enhanced Print/PDF (rep name, notes, validity date, page breaks, CYA section, JSON schema v1.1) --- ## 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 ├── 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 # Viewport/container overrides (16KB) ├── 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 # 70s Retro theme overrides ├── 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 ├── STAGE3-SESSION-PROMPT.md # Stage 3 prompt ├── STAGE4-SESSION-PROMPT.md # Stage 4 prompt └── STAGE5-SESSION-PROMPT.md # This file ``` ### New in Phase 8 (Print/PDF Enhancements) - **`id="repName"`** — text input below client name ("Prepared by"), persisted + exported - **`id="quoteNotes"`** — textarea in sidebar before export buttons, persisted + exported - **Print invoice** now includes: rep name in header/footer, notes section, computed "Valid until" date, page-break-safe tables, split config (included vs. "Not Included" CYA section) - **JSON export schema** bumped to `v1.1` — new `repName` and `quoteNotes` fields - **JSON import** handles new fields (backward-compatible with v1.0) --- ## 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 5 GOALS — Choose priorities from this menu: ### Option A: Browser-Based Manual QA Full visual/functional walkthrough at all breakpoints × 4 themes. Requires user to open the app in a browser and share screenshots or describe issues. **Breakpoint matrix:** | Width | Context | Key checks | |-------|---------|------------| | 1800px+ | Wide desktop | Max-width constraint, sidebar positioning | | 1400px | Standard desktop | 3:2 main/sidebar balance | | 1100px | Tablet/narrow | Single column transition, pill appears | | 900px | Small tablet | Tighter spacing, smaller numerals | | 600px | Phone portrait | Stacked layout, no numeral gutter | | 375px | Small phone | MRR pill position, bottom sheet | | 780px landscape | Phone landscape | 2-col restored, sidebar visible | **Theme matrix:** Dark (default), Light, Glass, 70s Retro **Total test grid:** 7 breakpoints × 4 themes = 28 combinations ### Option B: 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** ### Option C: Further Code Quality - Spacing magic numbers → token migration (95+ instances of 14px/16px/20px) - `--transition-fast` token adoption across components.css (remaining 0.15s instances) - CSS selector specificity audit - Print CSS hardening --- ## WHAT WAS DONE IN PHASES 7–8 (for context) ### Phase 7: Test Expansion | Group | Tests | Coverage | |-------|-------|----------| | Pricing DEFAULTS integrity | 34 | Key existence, types, spec values, frozen, ordering | | Engine edge cases | 55 | Admin thresholds, 100-user scale, string coercion, invalid inputs, VoIP/ZT edge cases | | Export JSON schema | 22 | Payload structure, field types, version, labels, pricing sub-object, new fields | | Persistence state shape | 6 | JSON round-trip, engine compatibility, zero-state | | Import payload mapping | 12 | Term reverse-map, export→import→engine round-trip | | Quote output invariants | 24 | 6 configs × 4 invariants | ### Phase 8: Enhanced Print/PDF | # | Enhancement | Details | |---|------------|---------| | P1 | Notes field | `