6.8 KiB
6.8 KiB
SVS MSP CALC — STAGE 6 SESSION PROMPT
Post-QA — Feature Work & Remaining Polish
Generated: 2026-03-15
WHERE WE ARE
Beta build: COMPLETE. Sections I–III are production-quality. Phases 1–8: COMPLETE. Bug fixes, visual polish, UX hardening, docs/QA, a11y/perf, code quality, test expansion, print enhancements. Phase 9 / Stage 5: COMPLETE. Visual QA across 3 breakpoints × 4 themes — Dark/Light/Glass all clean. Retro theme overhauled from muddy brown → warm paper + hot rose/teal cyberpunk accents. 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
START EVERY SESSION BY READING
svsmspcalc/docs/CHECKPOINT.md— current status, all completed worksvsmspcalc/docs/MASTER-SESSION-PROMPT.md— full architecture, constraints, prioritiessvsmspcalc/docs/QUICK-REF.md— compact file map, DOM IDs, pricing, danger zones- 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 # 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
└── STAGE6-SESSION-PROMPT.md # This file
Retro Theme Status (Phase 9)
- Overhauled from 70s wood-panel brown → warm paper + cyberpunk neon-warm accents
- Accent: hot rose
#e11d48| Teal:#0d9488| Header: warm charcoal#1c1317 - Logo SVG fix:
.top-bar-logo path { fill: #f0e4d0 }overrides hardcoded black - User noted: full design polish deferred — current version is functional placeholder
- Retro theme not yet QA'd at all 7 breakpoints
HARD CONSTRAINTS (NON-NEGOTIABLE)
- DOM IDs are a contract — renaming breaks mobile sync (100+ pairs)
- 254 tests must pass:
node svsmspcalc/tests/test-quote-engine.js - localStorage keys unchanged:
svs-msp-quote-v1,svs-msp-quote-ref - All 4 themes must work after every change
- Mobile parity maintained
- Print/PDF tested after CSS changes
- No frameworks, no npm — vanilla only
- Surgical changes only — read before editing
- Sections IV–VI are placeholders — do not activate or build out
STAGE 6 GOALS — Choose priorities from this menu:
Option A: Remaining Visual QA
Complete the breakpoint matrix for retro theme + remaining breakpoints:
| Width | Context |
|---|---|
| 900px | Small tablet |
| 600px | Phone portrait |
| 375px | Small phone |
| 780px landscape | Phone landscape |
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 from the user
Option C: Further Code Quality
- Spacing magic numbers → token migration (95+ instances of 14px/16px/20px)
--transition-fasttoken adoption across components.css- CSS selector specificity audit
- Print CSS hardening
Option D: Retro Theme Full Design Pass
- Complete cyberpunk aesthetic overhaul with user collaboration
- Color refinement, contrast tuning, component-level styling
- Full breakpoint QA after design is finalized
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.mdwith results - If context is heavy, create
docs/STAGE7-SESSION-PROMPT.mdfor the next chat - Keep this document chain as the canonical handoff mechanism