Massive AI Overhaul
This commit is contained in:
John OReilly
186
docs/STAGE4-SESSION-PROMPT.md
Normal file
186
docs/STAGE4-SESSION-PROMPT.md
Normal file
@@ -0,0 +1,186 @@
|
||||
# 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 ||` removed from quote-render.js (variable always initialized) |
|
||||
|
||||
**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
Block a user