v0.2.0 - Major UI rework

v0.2.0

A complete UI overhaul focused on information architecture, visual polish, emotional design, accessibility, and mobile experience.

Design system

• Centralized design tokens for typography (6-level scale), severity colors (low/medium/critical with theme-aware variants), feedback colors, and spacing scale
• Severity badge CSS migrated from hardcoded rgba to design tokens
• Combo indicator and tamper badge use dedicated CSS classes instead of inline styles

Dashboard

• Metrics reorganized into 3 hierarchical tiers: Primary (Budget, Rating, Shift, Score) always visible, System Health (6 metrics) collapsible and open by default, Android Internals (4 metrics) collapsed by default
• Primary metrics use larger typography (18px) and left border accent
• Collapsible panels use native <details> elements for built-in keyboard and screen reader support

Canvas visualization

• Components color-coded by category: core (blue), data (teal), security (purple), sidecars (amber), accessibility (green)
• Health rings replace the small health bar: arc fills clockwise, color transitions green/yellow/red by health percentage
• Tier glow rings: T2 subtle blue, T3 bright golden with badge
• Dot grid background for spatial reference
• Drag cursor feedback (grabbing cursor while moving components)

End-of-run experience

• Celebration modal appears when a run ends with outcome-dependent header (green/orange/red)
• Hero score display at 48px with breakdown (base, multiplier, bonuses)
• Key stats grid (rating, duration, debt, tickets)
• Play Again and Replay Seed quick actions

Interaction feedback

• Micro-animations: budget flashes red on large drops, rating flashes red on significant drops, incident overlay slides in from bottom
• CSS animation keyframes (slideInRight, slideOutLeft, slideInUp, valuePulse, flashRed, flashGreen) available as utility classes
• All animations respect prefers-reduced-motion

Ticket cards

• Severity left border accents (teal/amber/red) for visual scanning
• Fix button promoted to filled (primary), Defer changed to outlined (secondary)
• Deferred tickets have reduced opacity and dashed border

Onboarding

• First-visit welcome modal with game overview and 4-step quick start guide
• Skipped in E2E mode, tracked via localStorage
• Link to full GAMEPLAY.md guide

Modal system

• Unified openModal()/closeModal() functions with focus trapping (Tab cycles within modal)
• Focus save/restore (focus returns to triggering element on close)
• Applied to all 4 modals (Welcome, Profile, End-of-run, Refactor)

Mobile responsive

• Canvas/dashboard split changed from 50/50 to 38/62 (more dashboard room on phones)
• HUD zoom buttons enlarged to 44x44px touch targets on screens under 520px
• Safe area support via viewport-fit=cover and env(safe-area-inset-bottom)
• Compact typography at 480px breakpoint
• Modal width constrained on small screens

Documentation

• README badges: CI status, Deploy status, CodeQL, 44 tests passing, zero runtime dependencies
• TESTING.md: complete rewrite with test breakdown, CI pipelines, E2E deterministic mode
• UI.md: complete rewrite covering all design system and UI features

Stats

• 37 unit tests, 7 E2E tests, 135 DOM hook IDs validated
• 0 runtime dependencies, 0 vulnerabilities
• Bundle: 144KB JS (gzip 44KB), 27KB CSS (gzip 6KB)

v0.1.3 - Challenges, combos, tamper protection, and simulation expansion

v0.1.3

New features

Gamification

• Daily and weekly challenge system with rotating seeds, constraints, and bonus multipliers
• Combo multiplier: fix 3 tickets within 60s for +20% score boost (30s duration)
• Asymmetric scoring: failure penalties (0.50x-0.70x), preset-specific bonuses (+15% to +30%), universal bonuses for clean desk and high rating

Security and integrity

• Dashboard tamper protection v1: HMAC-SHA-256 signatures on scoreboard and achievement data, runtime paused-state checks, score sanity validation
• User-input entropy for seed generation (mouse, keyboard, pointer events replace Date.now() as default seed source)

Simulation

• 3 new incident types: Memory Leak (gradual heap creep), Regional Outage (store freeze), ANR Escalation (watchdog crash cascade)
• Cascading failures: OOM crashes now spike ANR, compound damage when 3+ incidents fire within 60s
• Simulation subsystems (PlatformPulse, CoverageGate, RegMatrix) extracted into testable pure functions

UX and accessibility

• Inline SVG sparklines for rating, failures, jank, and heap metrics (60s rolling history)
• Skip link, ARIA labels on all interactive elements, form label associations for all selects
• Reduced motion media query extended to cover all animations and transitions

Dependencies

• Vite 7.3 to 8.0, TypeScript 5.9 to 6.0, Vitest 4.0 to 4.1, Playwright 1.57 to 1.58
• Node.js CI pin updated from 20.19.1 to 22.16.0 (LTS)

Testing

• 37 unit tests (up from 7)
• 7 E2E tests (up from 1)
• 119 DOM hook IDs validated

Docs

• Developer guide: how to add components, incidents, achievements, translations
• Updated GAMEPLAY.md, SYSTEMS.md, UI.md for all new features
• README badges for TypeScript, Vite, Node.js, Vitest, Playwright, license

Cleanup

• Removed dead glass-mode i18n strings (56 lines, ~1.1KB bundle reduction)
• Disclaimer added to README

UI refactor, QoL updates, more of security workflows added

0.1.2

What's new:

1. Refactor options so that they no longer “glitch” the backlog layout

• Removed the
  accordion inside each backlog card (it’s inherently unstable here because the backlog re-renders frequently).
• Added a Profile-style modal (refactorModal) that opens from a “Refactor options” button on architecture-debt tickets.

2. Modal contains: Ticket context (severity + full title + meta), Target dropdown (auto-target or pick a specific violation).

• Refactor actions rendered as readable option cards (title + cost + debt delta + score bonus + description)
• Architecture-debt ticket titles are now rendered apart.

3. the updated GitHub security workflows + security-only Dependabot + README marker block.

• Nightly Security Scan (.github/workflows/security-nightly.yml) runs nightly + on PRs to main, creates/updates a PR only if findings exist (branch: chore/security-findings), updates the README “Last automated security check” stamp only on findings.
• Dependency Review (.github/workflows/dependency-review.yml), runs on every PR, fails if PR introduces high+ vulnerable deps
• Dependabot security-only (.github/dependabot.yml), open-pull-requests-limit: 0 to suppress scheduled version bump.

Update UI implementation and traslation

• The right dashboard panel is wider on a laptop.
• turned tabs into scroll-to-section navigation;
• centered the incident notification overlay horizontally for clearer UX;
• added translations to remaining user-facing UI elements.

Update game balance and UI implementation polishing

Game balance:

• Added 8-10 minutes target based on the skill level

Reset rework:

• Reset is safe + “real” with the two-step reset confirmation
• Reset now ends the run properly as EndReason = RESET, so achievements + scoreboard + postmortem stay consistent

Stability:

• Crash-proof tick loop
• sim.tick() is wrapped in a hard safety net
• On exception: run ends as CRASHED, UI doesn’t freeze in “running”, and you get a toast
• Incident overlay auto-dismiss works even when paused
• Overlay now dismisses after ~14s via a real timer (not relying on periodic UI sync)
• Dismiss button cancels the timer cleanly, ticket actions are stable
• Removed per-render listeners; replaced with a single delegated handler
• No more re-binding on every UI refresh

WebUI Quality mode:

• Added Quality/Performance switch in the Profile modal
• Performance mode caps DPR, kills expensive blur/animations/shadows, and forces glass off (but remembers your preference)

Touch + trackpad friendliness

• Canvas now uses Pointer Events (mouse/touch/pen)

Accessibility polish:

• Profile modal now has a focus trap + Escape closes + focus restore
• Tabs support keyboard navigation (Left/Right/Home/End)

i18n fixed for new UI:

• Added EN + ES keys for all the new labels/toasts/empty states/end reasons (not the entire user-facing strings yet)
• Removed “magic string” dependence for “No incidents” by adding eventCount to UIState

QoL and desktop/mobile support:

• Supports pinch zoom on touch, plus improved pan/drag behavior

Game balancing, gamification, and documentation

• Added gamification (achievements with tiers, hidden achievements, fewer achievements for higher skill groups);
• Updated the economy approach to respect trade-offs for a more balanced mid-end game phase;
• Introduced better-organized README.md and up-to-date documentation;
• Minor QoL improvements and dashboard highlights.

Documentation update

Minor documentation polishing.

v0.0.7: Add dashboard responsiveness (#14)

1. Wider desktop dashboard: side panel now uses clamp() sizing so it can expand on normal browsers without crushing the canvas.

2. Mobile-friendly bottom sheet: on narrow screens, the side panel becomes a bottom sheet with a sane height (min(62vh, 540px)).

3. Backlog redesign to “fit”:

• Tickets are now a grid when the panel is wide enough (2 columns).
• Ticket actions wrap instead of overflowing.

4. Heavy “architecture refactor” controls moved into the Details

5. Removed the glass-mode overflow, hidden behavior from cards (kept it only for tickets), and softened the shadow to avoid “clipped” visuals in scroll containers.

6. QoL improvement: when a new incident hits, the UI highlights Backlog + Incidents and shows a small overlay.

Pre-release: Repo security improvement

Dependabot and other security checks were added to this repo for safety purposes.

Pre-release Staff Principal level up documentation

1. ComponentDefs rewritten with Android-realistic baselines

• NET: high latency (RTT-like), higher failure (timeouts/retries);
• DB: moderate latency, non-trivial failure, lower throughput;
• REPO: I/O-ish latency;
• UI/VM/DOMAIN: fast-ish, low latency, low failure (but not zero).

2. computeComponentStats now scales like mobile reality

• Throughput scales with tier and health;
• Latency improves with tier more aggressively for I/O-ish components;
• Low health increases latency + failure rate;
• Failure/latency clamped to sane ranges.

3. E2E marker mode included (as requested)

• Playwright runs with VITE_E2E=1;
• App exposes window.E2E === true;
• Motion disabled via html.e2e CSS;
• Initial seed fixed (12345) for deterministic boot.

4. Documentation

• Added a detailed description of how the calculations for the Staff Principal level differ
• Added even more clarity on how the Mid and Senior levels differ