john/svsmspcalc

Fork 0

Files

John OReilly e6c0baef3b Pre-Alpha to Alpha Ready

2026-03-16 01:42:17 -04:00

8.0 KiB

Raw Permalink Blame History

SVS MSP CALC — STAGE 4 SESSION PROMPT

Post-Beta Feature & QA Sprint

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. 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)

START EVERY SESSION BY READING

svsmspcalc/docs/CHECKPOINT.md — current status, all completed work
svsmspcalc/docs/MASTER-SESSION-PROMPT.md — full architecture, constraints, priorities
svsmspcalc/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 (225 lines)
├── quote-export.js               # Print/PDF + JSON export (299 lines)
├── quote-import.js               # JSON quote import (50 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      # 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  # Previous stage prompt
    └── STAGE4-SESSION-PROMPT.md  # This file

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

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 back into the calculator
Enhanced print/PDF — more layout control, optional cover page, save-as-PDF flow
Sidebar focus mode refinements — expand/collapse behavior, keyboard shortcuts
Additional nudge logic — new contextual nudges based on quote configuration
Any specific feature requests

Option C: Test Coverage Expansion — DONE

~~Add persistence round-trip tests~~ ✓ (6 tests)
~~Add export schema validation tests~~ ✓ (18 tests)
~~Add pricing integrity + engine edge cases~~ ✓ (89 tests)
~~Add import mapping + invariant tests~~ ✓ (36 tests)
Result: 88 → 250 tests (162 new)
Remaining: DOM rendering tests (requires JSDOM), theme token tests

Option D: 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 PHASE 6 (for context)

Fix	Change
`--sky` token	New per-theme accent for import button: Dark `#38bdf8`, Light `#0e7490`, Glass `#7dd3fc`, Retro `#a34a14`
`--transition-fast` token	`0.15s` — used in layout.css button transitions
Button CSS dedup	`.btn-reset-quote` + `.btn-import-quote` merged into grouped selector (10 duplicate properties removed)
Hardcoded colors → tokens	8 hardcoded rgba/hex values replaced with `var(--sky)`, `var(--amber)`, and `color-mix()` across 4 theme files
Dead null-check	`nudgeIndex == null

Audit documented (not acted on):

fmt() duplication in render/export (intentional IIFE isolation)
Spacing magic numbers (too many touchpoints)
console.warn() statements (intentional error reporting)
No dead functions/exports found across all 8 JS modules

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/STAGE5-SESSION-PROMPT.md for the next chat
Keep this document chain as the canonical handoff mechanism

8.0 KiB Raw Permalink Blame History Unescape Escape