john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e6c0baef3b10ce37685fbff372bf757e07075184
svsmspcalc/pre-alpha/docs/STAGE4-SESSION-PROMPT.md
John OReilly e6c0baef3b Pre-Alpha to Alpha Ready
2026-03-16 01:42:17 -04:00

8.0 KiB
Raw 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

  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)
├── 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)

  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 4 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 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
Reference in New Issue View Git Blame Copy Permalink