john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
786a8505ac0bd2e3b0d6fb4243739bf179fdc5b2
svsmspcalc/docs/STAGE3-SESSION-PROMPT.md
John OReilly 42b7b06dda Massive AI Overhaul
2026-03-15 18:24:36 -04:00

6.9 KiB
Raw Blame History

SVS MSP CALC — STAGE 3 SESSION PROMPT

Post-Beta Hardening & Manual QA

Generated: 2026-03-15

WHERE WE ARE

Beta build: COMPLETE. Sections I–III are production-quality. Accessibility/performance audit: COMPLETE. Phase 5 fixes applied. Tests: 88/88 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)

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 (225 lines)
├── quote-export.js               # Print/PDF + JSON export (299 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 (66KB)
├── 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      # 88 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  # This file

HARD CONSTRAINTS (NON-NEGOTIABLE)

  1. DOM IDs are a contract — renaming breaks mobile sync (100+ pairs)
  2. 88 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 3 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

  • JSON quote import (load a previously exported .json file)
  • Enhanced print/PDF with more layout control
  • Sidebar focus mode refinements
  • Additional nudge logic
  • Any specific feature requests

Option C: Code Quality Pass

  • Dead code removal across all modules
  • CSS deduplication audit
  • Magic number → token migration in components.css
  • Mobile sync map completeness verification
  • Export template class reference audit

Option D: Test Coverage Expansion

  • Add DOM rendering tests (sidebar values match calculations)
  • Add persistence round-trip tests
  • Add export schema validation tests
  • Increase from 88 to 120+ tests

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)

WHAT WAS DONE IN PHASE 5 (for context)

Fix Change
aria-expanded on toggles 12 section/collapsible headers in HTML + JS dynamic update
Focus trap on reset modal Tab cycles within modal when open
aria-label on steppers All 12 +/- buttons have descriptive labels
Glass mobile scroll background-attachment: scroll at ≤1100px
Mobile sync guard Skips sync on desktop when panel closed; forces sync on open
Sync map gaps Added sidebarFocusClientName, sl-discount-detail, sl-value-onboarding-label
FA icons invisible on file:// All 36 Sharp Solid SVG file refs → inline data:image/svg+xml URIs in components.css

VERIFICATION COMMAND

node svsmspcalc/tests/test-quote-engine.js

88 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/STAGE4-SESSION-PROMPT.md for the next chat
  • Keep this document chain as the canonical handoff mechanism
Reference in New Issue View Git Blame Copy Permalink