docs: remove 11 outdated stage prompts and superseded docs

Deleted 8 historical STAGE*-SESSION-PROMPT.md files (all stages complete),
plus ai-session-brief.md, code-verification.md, and phase-roadmap.md
(superseded by CLAUDE.md and 254-test suite). Updated QUICK-REF.md
directory listing to reflect current docs structure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-16 16:52:38 -04:00
parent 786a8505ac
commit a42ce662b8
12 changed files with 4 additions and 1480 deletions

View File

@@ -151,7 +151,9 @@ svsmspcalc/
├── SESSION-HANDOFF.md # Current status + next steps ├── SESSION-HANDOFF.md # Current status + next steps
├── CHECKPOINT.md # Historical checkpoint ├── CHECKPOINT.md # Historical checkpoint
├── MASTER-SESSION-PROMPT.md # Master rebuild prompt ├── MASTER-SESSION-PROMPT.md # Master rebuild prompt
├── STAGE3-11 prompts # Historical stage prompts ├── DECISION-LOG.md # Decision history
├── KNOWN-ISSUES.md # Tracked bugs
├── quote-rules.md # Business logic rules ├── quote-rules.md # Business logic rules
── regression-checklist.md # QA checklist ── regression-checklist.md # QA checklist
└── README.md # Project overview
``` ```

View File

@@ -1,89 +0,0 @@
# SVS MSP CALC — STAGE 10: UI & THEME POLISH
# Generated: 2026-03-15
---
## WHERE WE ARE
**Stages 19: COMPLETE.** Beta build is production-quality for Sections IIII.
**Tests:** 254/254 passing.
**Spacing tokens:** Consolidated (150+ magic numbers → CSS custom properties).
**Retro theme visual QA:** Passed at all viewports (375/1100/1400/2500/2800px).
**Pricing:** Single source in `package-prices-data.js`, addon labels sync dynamically.
---
## STAGE 10 FOCUS: UI / THEME / COLOR CONSISTENCY
This stage is about visual polish, color consistency, and interface usability across all 4 themes.
### Known Issues to Investigate
- **Too many similar-but-slightly-off colors** within individual themes — need audit and consolidation
- **Color consistency per theme** — some elements use raw hex where they should use tokens
- **Usability polish** — any controls, labels, or interactions that could feel tighter or more intuitive
- **Cross-theme consistency** — ensure the same UI elements feel equivalent across Dark/Light/Glass/Retro
### Approach
1. **Color Audit** — For each theme, extract all unique colors actually used. Group by purpose (text, surface, border, accent). Flag duplicates that are close but not identical (e.g., two slightly different grays serving the same role).
2. **Token Consolidation** — Where colors are inconsistent, consolidate to existing tokens or define new ones. Goal: fewer unique colors, each with a clear semantic role.
3. **Per-Theme Walkthrough** — User provides screenshots. AI audits for:
- Color contrast issues (text readability)
- Inconsistent element styling across themes
- Visual weight imbalances
- Elements that "don't belong" visually
4. **Surgical Fixes** — Each fix is small, tested, and verified across all 4 themes.
---
## SESSION WORKFLOW
1. **Start with a color audit** — Use Explore agent to scan all theme CSS files for unique color values, group by semantic role
2. **User provides screenshots** of specific areas that feel "off"
3. **AI proposes fixes** with before/after reasoning
4. **Apply fixes surgically** — one logical change at a time
5. **User verifies visually** — confirms or adjusts
6. **Run tests** after any render/engine changes
---
## HARD CONSTRAINTS
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. All 4 themes must work after every change
4. No frameworks, no npm — vanilla only
5. Surgical changes only — read before editing
6. Sections IVVI are placeholders — do not activate
---
## THEME FILES
| Theme | File | Base |
|-------|------|------|
| Dark (default) | `SVS-MSP-Calculator-tokens.css` | All colors defined here |
| Light | `SVS-MSP-Calculator-light.css` | Overrides dark tokens |
| Glass | `SVS-MSP-Calculator-glass.css` | Glassmorphism overrides |
| Retro | `SVS-MSP-Calculator-70retro.css` | Cyberpunk overrides |
---
## VERIFICATION
```
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/STAGE11-SESSION-PROMPT.md` for the next chat

View File

@@ -1,100 +0,0 @@
# SVS MSP CALC — STAGE 11: BETA PREP
# Generated: 2026-03-15
---
## WHERE WE ARE
**Stages 110: COMPLETE.** Production-quality for Sections IIII across all 4 themes.
**Tests:** 254/254 passing.
### Stage 10 Completed Work
**Color Audit & Consolidation:**
- Full audit of all 4 theme CSS files — every unique color extracted, grouped by role
- Near-duplicates consolidated via aliases (e.g., 4 positive surfaces → 2 semantic tiers)
- On-accent text ladder collapsed from 5 → 3 levels
- Light theme: ~6 near-identical surfaces → 3 tiers, ~10 borders → 3 tiers
- Glass theme: 6 ice-white text values → 1 reference, 4 border opacities → 1 reference
- Retro theme: ~20 hardcoded hex in selectors → 7 `--retro-*` helper tokens
- 17 raw hex/rgba in components.css → new overlay/shadow tokens
- Retro `--sky` given distinct value (`#6366f1` indigo, was identical to `--green`)
- Unused `--text-on-accent-muted` removed
**Sidebar / Live Quote Polish:**
- Zone backgrounds strengthened + semantically tinted (value zone gets green tint)
- Line borders: last-child removed, totals get solid top border, dashed elsewhere
- Hover tint on sidebar lines for read-tracking
- `.export-wrap` background → transparent, border removed (all themes)
- Sidebar changed from sticky to static (scrolls with page)
**Section Grouping:**
- "MANAGED IT SERVICES (Sections I, II, III)" eyebrow label above section I
- Vertical accent bracket with top/bottom caps alongside sections IIII
- HR divider between Site Management (III) and Server Management (IV)
- Mobile: bracket hidden, sections IIII get accent left border instead
- Per-theme `--group-strip` token (blue/grey-teal/cyan/rose)
**Mobile:**
- Quote pill repositioned: `top: 12vh` at ≤600px (percentage-based, viewport-responsive)
---
## WHAT'S READY FOR BETA
- Sections IIII fully functional with live pricing, addons, admin fee logic
- All 4 themes visually polished and color-consistent
- Sidebar live quote with clear zone separation and clean borders
- Mobile panel sync working (100+ ID pairs)
- Print/PDF export functional
- JSON import/export functional
- 254 automated tests passing
## WHAT REMAINS (Sections IVVI)
Sections IV (Server Management), V (Zero Trust Networking), VI (VoIP) are **placeholders only** — basic stepper + collapsed body, no active pricing or addons wired up. Do not activate unless explicitly requested.
---
## HARD CONSTRAINTS
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. All 4 themes must work after every change
4. No frameworks, no npm — vanilla only
5. Surgical changes only — read before editing
6. Sections IVVI are placeholders — do not activate
---
## KEY FILES MODIFIED IN STAGE 10
| File | What Changed |
|------|-------------|
| `SVS-MSP-Calculator-tokens.css` | Semantic positive/overlay/sidebar/group tokens added; near-dupes aliased |
| `SVS-MSP-Calculator-light.css` | Surface/border consolidated; sidebar zone + group-strip tokens |
| `SVS-MSP-Calculator-glass.css` | Ice-whites + borders deduped; sidebar/group tokens; export-wrap cleaned |
| `SVS-MSP-Calculator-70retro.css` | 7 retro helper tokens; hardcoded hex → var(); distinct --sky; group-strip |
| `SVS-MSP-Calculator-components.css` | 17 raw colors tokenized; sidebar line/zone polish; group label + bracket |
| `SVS-MSP-Calculator-layout.css` | 1 raw #fff tokenized; sidebar position: static |
| `SVS-MSP-Calculator-responsive.css` | Mobile bracket → left border; group-divider; pill top: 12vh |
| `SVS-MSP-Calculator-print.css` | Group label/bracket/divider hidden in print |
| `SVS-MSP-Calculator.html` | Group label div + group divider HR added (decorative, no IDs) |
---
## VERIFICATION
```
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/STAGE12-SESSION-PROMPT.md` for the next chat

View File

@@ -1,176 +0,0 @@
# SVS MSP CALC — STAGE 3 SESSION PROMPT
# Post-Beta Hardening & Manual QA
# Generated: 2026-03-15
---
## WHERE WE ARE
**Beta build: COMPLETE.** Sections IIII are production-quality.
**Accessibility/performance audit: COMPLETE.** Phase 5 fixes applied.
**Tests:** 88/88 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)
---
## 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)
├── 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 # 88 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 # This file
```
---
## HARD CONSTRAINTS (NON-NEGOTIABLE)
1. DOM IDs are a contract — renaming breaks mobile sync (100+ pairs)
2. 88 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 3 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)
- Enhanced print/PDF with more layout control
- Sidebar focus mode refinements
- Additional nudge logic
- Any specific feature requests
### Option C: Code Quality Pass
- Dead code removal across all modules
- CSS deduplication audit
- Magic number → token migration in components.css
- Mobile sync map completeness verification
- Export template class reference audit
### Option D: Test Coverage Expansion
- Add DOM rendering tests (sidebar values match calculations)
- Add persistence round-trip tests
- Add export schema validation tests
- Increase from 88 to 120+ tests
---
## 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)
```
---
## WHAT WAS DONE IN PHASE 5 (for context)
| Fix | Change |
|-----|--------|
| `aria-expanded` on toggles | 12 section/collapsible headers in HTML + JS dynamic update |
| Focus trap on reset modal | Tab cycles within modal when open |
| `aria-label` on steppers | All 12 +/- buttons have descriptive labels |
| Glass mobile scroll | `background-attachment: scroll` at ≤1100px |
| Mobile sync guard | Skips sync on desktop when panel closed; forces sync on open |
| Sync map gaps | Added `sidebarFocusClientName`, `sl-discount-detail`, `sl-value-onboarding-label` |
| FA icons invisible on `file://` | All 36 Sharp Solid SVG file refs → inline `data:image/svg+xml` URIs in components.css |
---
## VERIFICATION COMMAND
```
node svsmspcalc/tests/test-quote-engine.js
```
88 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/STAGE4-SESSION-PROMPT.md` for the next chat
- Keep this document chain as the canonical handoff mechanism

View File

@@ -1,186 +0,0 @@
# SVS MSP CALC — STAGE 4 SESSION PROMPT
# Post-Beta Feature & QA Sprint
# 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.
**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)
---
## 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 IVVI 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

View File

@@ -1,193 +0,0 @@
# 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

View File

@@ -1,162 +0,0 @@
# SVS MSP CALC — STAGE 6 SESSION PROMPT
# Post-QA — Feature Work & Remaining Polish
# Generated: 2026-03-15
---
## WHERE WE ARE
**Beta build: COMPLETE.** Sections IIII are production-quality.
**Phases 18: COMPLETE.** Bug fixes, visual polish, UX hardening, docs/QA, a11y/perf, code quality, test expansion, print enhancements.
**Phase 9 / Stage 5: COMPLETE.** Visual QA across 3 breakpoints × 4 themes — Dark/Light/Glass all clean. Retro theme overhauled from muddy brown → warm paper + hot rose/teal cyberpunk accents.
**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 + 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
---
## 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 # 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
└── STAGE6-SESSION-PROMPT.md # This file
```
### Retro Theme Status (Phase 9)
- Overhauled from 70s wood-panel brown → warm paper + cyberpunk neon-warm accents
- Accent: hot rose `#e11d48` | Teal: `#0d9488` | Header: warm charcoal `#1c1317`
- Logo SVG fix: `.top-bar-logo path { fill: #f0e4d0 }` overrides hardcoded black
- **User noted:** full design polish deferred — current version is functional placeholder
- Retro theme not yet QA'd at all 7 breakpoints
---
## 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 6 GOALS — Choose priorities from this menu:
### Option A: Remaining Visual QA
Complete the breakpoint matrix for retro theme + remaining breakpoints:
| Width | Context |
|-------|---------|
| 900px | Small tablet |
| 600px | Phone portrait |
| 375px | Small phone |
| 780px landscape | Phone landscape |
### 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 from the user**
### Option C: Further Code Quality
- Spacing magic numbers → token migration (95+ instances of 14px/16px/20px)
- `--transition-fast` token adoption across components.css
- CSS selector specificity audit
- Print CSS hardening
### Option D: Retro Theme Full Design Pass
- Complete cyberpunk aesthetic overhaul with user collaboration
- Color refinement, contrast tuning, component-level styling
- Full breakpoint QA after design is finalized
---
## 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/STAGE7-SESSION-PROMPT.md` for the next chat
- Keep this document chain as the canonical handoff mechanism

View File

@@ -1,166 +0,0 @@
# SVS MSP CALC — STAGE 7 SESSION PROMPT
# Post-Elastic — Feature Work & Polish
# Generated: 2026-03-15
---
## WHERE WE ARE
**Beta build: COMPLETE.** Sections IIII are production-quality.
**Phases 19: 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 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 + 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 IVVI 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

View File

@@ -1,167 +0,0 @@
# SVS MSP CALC — STAGE 9 SESSION PROMPT
# Next Session
# Generated: 2026-03-15
---
## WHERE WE ARE
**Beta build: COMPLETE.** Sections IIII are production-quality.
**Phases 111 + Stage 8: COMPLETE.** Bug fixes, visual polish, UX hardening, docs/QA, a11y/perf, code quality I & II, test expansion, print enhancements, visual QA, elastic responsive, feature work.
**Stage 8 Feature Fixes: COMPLETE.**
- Fullscreen live quote view: Print button in sidebar header (Reset/Import/Export JSON hidden)
- Toggle switches: distinct off/on colors per theme (`--surface-switch-off`/`--surface-switch-on`)
- Pricing: migrated from CSV to JSON (`package-prices.json`)
- JSON export/import: already captures all form data including quote notes (schema v1.1)
**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 + Font Awesome icon fix
- **Stage 3 / Phase 6** — Code quality pass I (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)
- **Stage 7 / Phase 11** — Feature work: keyboard shortcuts (Ctrl+P/E/R) + 4 new contextual nudges
- **Stage 8 / Phase 12** — Code quality pass II: transition tokens, CSS specificity audit, print CSS hardening
- **Stage 8 Feature Fixes** — Fullscreen print button fix, toggle switch 2-state themed colors, pricing CSV → JSON migration
---
## 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 + keyboard shortcuts (375 lines)
├── quote-engine.js # Pure quote math (197 lines)
├── quote-pricing.js # Pricing defaults + JSON override (134 lines)
├── quote-render.js # DOM rendering + nudges (760 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-data.js # Pricing data (edit this to change prices — loaded via <script>)
├── package-prices.json # Pricing reference (JSON format, not loaded at runtime)
├── package-prices.csv # Legacy pricing reference (not loaded at runtime)
├── 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
├── STAGE8-SESSION-PROMPT.md # Previous stage
└── STAGE9-SESSION-PROMPT.md # This file
```
### Pricing Configuration
Pricing is loaded from `package-prices-data.js` via `<script>` tag (works on `file://` — no web server needed). The loader also has a `fetch()` fallback for web server environments, then falls back to built-in defaults.
**To update pricing:** Edit `package-prices-data.js` — change the `value` field for any key:
```js
window.SVS_PRICING_DATA = {
"user_packages": {
"RATE_M365": { "value": 130, "description": "..." },
...
},
...
};
```
Categories: `user_packages`, `user_addons`, `endpoints`, `endpoint_addons`, `zero_trust_network`, `voip`, `site_admin`, `contract_discounts`, `tax`, `vs_comparison`.
---
## 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 9 GOALS
_To be determined by the user in the next session._
Potential areas for continued work:
- **Spacing token consolidation** — 150+ magic-number spacings in components.css (deferred from Stage 8)
- **Visual QA pass** — Retro theme at all viewport widths + landscape (noted as incomplete in Stage 5)
- **Additional feature work** — user-driven
- **Test coverage** — additional edge cases or integration-level tests
- **Documentation updates** — README, MASTER-SESSION-PROMPT alignment
---
## 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/STAGE10-SESSION-PROMPT.md` for the next chat
- Keep this document chain as the canonical handoff mechanism

View File

@@ -1,65 +0,0 @@
# AI Session Brief
## Mission
Operate like a senior engineering, UX/UI, QA, and sales-enablement team in one:
- Senior frontend engineer: minimal safe changes, clean code, strong regression awareness
- UX/UI lead: polish, readability, hierarchy, responsive quality, accessibility, and visual restraint
- Marketing manager: keep messaging clear, persuasive, professional, and sales-usable
## Post-startup reminder
After reading docs, always remind the user:
> You have an automated quote engine test suite (88 tests). Run anytime:
> `node svsmspcalc/tests/test-quote-engine.js`
> I can run it for you, or modify it to add new test scenarios.
## Non-negotiables
- Inspect existing code before editing
- Prefer the smallest safe change
- Preserve current behavior unless explicitly asked to change it
- Keep the HTML shell and DOM IDs stable unless approved
- Preserve calculations, exports, persistence, theme switching, and mobile parity
- Avoid broad rewrites, framework changes, or "cleanup for its own sake"
- Minimize token waste
- Read only the files needed for the task
- Treat code quality as production-grade: clear intent, low duplication, safe edge handling, and no casual hacks
- Always check for regressions, syntax issues, broken flows, and stale code before calling work done
- Run `node svsmspcalc/tests/test-quote-engine.js` after any pricing or engine changes
## Product bar
- Sales-facing and professional
- Clear, persuasive, and polished rather than flashy
- Responsive behavior should feel elastic and harmonious, not breakpoint-fragile
- Prefer tokenized or container-based layout fixes over piling on viewport hacks
- Light mode should feel comfortable, soft khaki/brown, and high-readability
- UI changes should improve both visual quality and sales clarity
- Copy should sound confident, concise, and client-facing
## Current scope guardrails
- All six sections (I-VI) are structurally active with unified `sec-controls-row` headers
- Sections default to collapsed on load; inner collapsibles default to collapsed
- Keep docs concise; only append notes that materially speed up future resume work
## Required validation mindset
- Run automated tests after pricing/engine changes
- Run syntax checks after JS edits
- Review for stale references, dead code, and duplicated logic
- Assume inline handlers and mobile clone sync can hide dependencies; verify before deleting code
- Call out any unverified areas, especially print/PDF, JSON export, persistence, and mobile parity
## Resume order
1. Read `docs/README.md`
2. Read `docs/phase-roadmap.md`
3. Read `docs/code-verification.md`
4. Use `docs/quote-rules.md` only if business-rule detail is needed
5. Use `docs/regression-checklist.md` only when validating behavior
6. Then inspect only the code files relevant to the request
7. **Remind user about the test suite** (see Post-startup reminder above)

View File

@@ -1,124 +0,0 @@
# Code Verification
## Latest checkpoint
- Date: March 15, 2026
- Verification: automated quote engine tests (88/88 passing) + visual review
- Status: Phases 13 complete (bug fixes, visual polish, UX hardening)
## Automated test suite
**Location:** `svsmspcalc/tests/test-quote-engine.js`
**Run:** `node svsmspcalc/tests/test-quote-engine.js`
**Result:** 88 tests passing across 21 test groups
### What's covered
| Area | Tests |
|------|-------|
| M365 vs BYOL rates | User base rates, rate switching |
| Admin fee scaling | Floor ($150), minimum ($650), ZT premium ($250), 1Password markup (10%) |
| Admin waiver | Fee calculated but excluded from MRR |
| User add-ons | Extended Hours, 1Password, INKY, Zero Trust per-user |
| Endpoint add-ons | USB Blocking, Bare Metal Backup |
| Server pricing | Per-server rate, inclusion in subtotals |
| Contract discounts | m2m (0%), 12mo (3%), 24mo (5%) |
| HST | 13% applied after discount, disabled = 0, combo with discount |
| VoIP | All 3 tiers, phone + fax add-ons |
| Zero Trust networking | Seats + routers |
| Edge cases | Zero users, per-user breakdowns |
| MRR integrity | MRR = sum of components across 5 different configs |
| Realistic scenario | Full 22-user quote with all features |
### How to extend
- Add `describe()` / `it()` blocks in the test file
- Uses `eq(actual, expected, label)` for exact assertions
- Uses `near(actual, expected, tolerance, label)` for floating-point
- Ask Claude to add tests for new scenarios
## What is currently known-good
### Section header redesign (completed this session)
- All 6 sections use unified `sec-controls-row` pattern (stepper + badge + price on row 2)
- Subtitles moved to row 3, visible only when expanded
- Section headers use CSS grid: numeral + title + chevron on row 1
- Container query at ≤520px and media query at ≤600px handle small-screen stacking
- Cascade order issues resolved (container query overrides placed after base rules)
### UI/UX changes (completed this session)
- ~15-20% spacing optimization across all tokens, layout, components, and responsive CSS
- All sections default to collapsed state on load
- Inner collapsibles (What's Included, Add-Ons) default to collapsed
- "What This Fee Supports" card removed from SEC-01
- "Protection First, Recovery Optional" card removed from SEC-03
- Progress bar always visible when SEC-01 is collapsed
- Floor note restyled to match title font (DM Mono, 12px, uppercase)
- Summary badges show price only (no counts — stepper already shows quantity)
### Print/export changes
- Print now respects user's HST toggle (Phase 1 fix — no longer forces HST on)
- JSON export includes `version: '1.0'` schema field (Phase 1 addition)
- Print CSS hides `sec-controls-row` instead of old `sec-collapsed-counter`
### Dead code removed
- `sec-collapsed-counter` CSS and HTML (replaced by `sec-controls-row`)
- `floorProgress` span (right-side threshold text)
## Runtime areas that must stay intact
- Quote calculations (now verified by automated tests)
- Exports
- Local persistence
- Theme switching
- Mobile quote sync/parity
### Phase 1 bug fixes (verified)
- ADDON_INKY default: $5 → $8 in quote-pricing.js (test expectations updated)
- Onboarding fee manual override preserved across term switches (data-manual-value attribute)
- VoIP fax CSV comment: "Flat/mo" → "Per seat/mo"
- Print HST: now respects user toggle instead of forcing HST on
- JSON export: schema version '1.0' added
- ZT admin supplement: amber nudge warning when ztActive
### Phase 2 visual polish (verified)
- Hardcoded danger icon color → `var(--text-danger)`
- Hardcoded pill-savings active color → `var(--text-pill-savings-active)` (new token in all 4 themes)
- All 4 themes fully token-covered for Sections IIII
- No remaining hardcoded colors in active section CSS
### Phase 3 UX hardening (verified)
- Smooth theme-switch transition (0.25s crossfade via `.theme-transitioning`)
- Nudge crossfade on rotation/nav (180ms fade-out → swap → fade-in)
- Summary badge fade-in on collapse (0.25s animation)
- Addon toggle micro-feedback (0.2s scale pulse)
- Touch targets ≥44px on mobile (close btn, nudge nav, section toggles)
- Mobile focus trap in panel (Tab cycles within, focus returns to pill on close)
- Safe-area insets for notch phones (pill position, panel padding)
### Phase 5 accessibility & performance fixes (verified)
- `aria-expanded` on all section toggles and collapsible headers (12 elements)
- Focus trap on reset confirm modal (Tab cycles within modal)
- `aria-label` on all stepper buttons (12 elements: "Decrease/Increase users/endpoints/etc.")
- Glass theme `background-attachment: scroll` on mobile (≤1100px) to prevent iOS scroll jank
- Mobile sync guard: skips 35+ element sync when panel closed on desktop
- Mobile sync gaps fixed: `sidebarFocusClientName`, `sl-discount-detail`, `sl-value-onboarding-label` added to sync map
- Full sync forced on `openMobilePanel()` to ensure fresh data
### Font Awesome icon fix (verified)
- All 36 FA Sharp Solid icon references in components.css converted from file paths to inline `data:image/svg+xml` URIs
- Icons now render on `file://` protocol without a server
- If adding new icons: use inline data URI format, not file path references
## What still needs caution
- DOM rendering tests (sidebar values, warnings, mobile sync) are not yet automated
- Export/persistence tests are not yet automated
## Required check standard for future edits
- After pricing/engine edits: run `node svsmspcalc/tests/test-quote-engine.js`
- After JS edits: run syntax checks
- After logic edits: review quote math, persistence, export, and mobile parity impact
- After sidebar changes: verify the mobile clone/sync map still covers the changed elements
- After copy or styling edits in sales-critical areas: check readability and messaging

View File

@@ -1,50 +0,0 @@
# Phase Roadmap
## Status
All phases complete. Project is in user-driven stage work.
| Stage | Phase | Work | Status |
|-------|-------|------|--------|
| 1 | 0 | Discovery audit, codebase mapping, doc generation | Complete |
| 2 | 1 | Bug fixes (6 issues: INKY $8, onboarding, VoIP CSV, print HST, JSON, ZT nudge) | Complete |
| 2 | 2 | Visual polish (hardcoded colors → tokens, 4 themes audited) | Complete |
| 2 | 3 | UX hardening (transitions, touch targets, focus traps, safe-area) | Complete |
| 2 | 4 | Documentation & QA (doc sync, regression walkthrough, beta DOD) | Complete |
| — | 5 | Accessibility/performance audit + Font Awesome icon fix | Complete |
| 3 | 6 | Code quality I (tokens, CSS dedup, dead code) | Complete |
| 4 | 7 | Test expansion (88 → 254 tests) | Complete |
| 4 | 8 | Enhanced Print/PDF (rep name, notes, validity, page breaks, CYA) | Complete |
| 5 | 9 | Visual QA (3 breakpoints × 4 themes) + Retro theme overhaul | Complete |
| 6 | 10 | Elastic responsive (5 → 3 breakpoints, fluid clamp() tokens) | Complete |
| 7 | 11 | Feature work: keyboard shortcuts (Ctrl+P/E/R) + 4 nudges | Complete |
| 8 | 12 | Code quality II: transition tokens, specificity, print CSS | Complete |
| 8 | — | Feature fixes: fullscreen print, toggle colors, CSV→JSON pricing | Complete |
| 9 | — | Spacing token consolidation, pricing label sync, Retro visual QA | Complete |
**Tests:** 254/254 passing. `node svsmspcalc/tests/test-quote-engine.js`
## Architecture baseline
- JS split into pricing, engine, render, persistence, export, import, theme, and mobile-sync modules
- CSS split into tokens, base, layout, components, responsive, print, and 3 theme override files
- HTML shell kept stable during the split
- Pricing loads from `package-prices-data.js` via `<script>` tag (no web server needed)
- Automated test suite at `tests/test-quote-engine.js` (254 tests, zero deps)
## Approved work
- Bug fixes
- CSS/UI polish, theme improvements
- Responsive cleanup and hardening
- Spacing, alignment, color consistency fixes
- Documentation cleanup
- Test coverage expansion
- Small dead-code cleanup (after usage verification)
## Do not do without explicit approval
- Broad rewrites or framework migration
- DOM ID or event-contract changes
- Reworking quote math or export structure without a clear bug
- Activating Sections IVVI beyond placeholder state