Files
svsmspcalc/docs/STAGE5-SESSION-PROMPT.md
2026-03-15 18:24:36 -04:00

8.9 KiB
Raw Blame History

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 IIII 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 IVVI: Intentionally deferred as placeholders — do not activate.

Completed Stages

  • Stage 1 — Discovery audit (codebase mapping, doc generation)
  • Stage 2 — Beta build (Phases 14: 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 IVVI 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 78 (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 <textarea id="quoteNotes"> — sidebar, persisted, exported, printed
P2 Validity date "Valid until [computed date]" in print footer
P3 Page breaks page-break-inside:avoid on tables, totals, notes
P4 Rep name <input id="repName"> — persisted, exported, in print header + footer
P5 CYA section Active features prominent; excluded in muted "Services Not Included in This Quote" section

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