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

7.3 KiB
Raw Blame History

SVS MSP CALC — STAGE 7 SESSION PROMPT

Post-Elastic — Feature Work & Polish

Generated: 2026-03-15

WHERE WE ARE

Beta build: COMPLETE. Sections I–III are production-quality. Phases 1–9: COMPLETE. Bug fixes, visual polish, UX hardening, docs/QA, a11y/perf, code quality, test expansion, print enhancements, visual QA. Phase 10 / Stage 6: COMPLETE. Elastic responsive foundation — fluid clamp() tokens replace 5 fixed breakpoints with 3 structural ones. Max width scales to 2400px for large monitors. 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
  • Stage 6 / Phase 10 — Elastic responsive foundation (5 → 3 breakpoints, fluid clamp() tokens, max-width up to 2400px)

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 (fluid clamp() layout)
├── 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 # 3 structural breakpoints (1100/600/780L)
├── 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
    └── STAGE7-SESSION-PROMPT.md  # This file

Responsive Architecture (Phase 10)

  • Fluid tokens in tokens.css — clamp() drives all spacing/sizing continuously
  • 3 structural breakpoints in responsive.css:
    • ≤1100px — 2-col grid → 1-col, sidebar → mobile pill/panel
    • ≤600px — phone layout shifts (stacking, gutter collapse, touch targets)
    • ≤780px landscape — restore 2-col with sticky sidebar
  • Width scaling: 1080p → ~1766px, 1440p → ~2355px, 4K → 2400px cap
  • No more 1350px or 900px breakpoints — fluid tokens handle the range

Retro Theme Status

  • Overhauled from 70s wood-panel brown → warm paper + cyberpunk neon-warm accents
  • Accent: hot rose #e11d48 | Teal: #0d9488 | Header: warm charcoal #1c1317
  • User noted: full design polish deferred — current version is functional placeholder
  • Retro theme not yet QA'd across all viewport widths

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 7 GOALS — Choose priorities from this menu:

Option A: 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 B: Further Code Quality

  • --transition-fast token adoption across components.css
  • CSS selector specificity audit
  • Print CSS hardening

Option C: Retro Theme Full Design Pass

  • Complete cyberpunk aesthetic overhaul with user collaboration
  • Color refinement, contrast tuning, component-level styling
  • Full viewport QA after design is finalized

Option D: Visual QA Sweep

  • Verify elastic responsive behavior across viewport range (resize from 375px → 2560px)
  • Confirm all 4 themes render cleanly with new fluid tokens
  • Test landscape orientation on tablet/phone sizes

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/STAGE8-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