feat: show storage counts on stats page

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 *.log
 npm-debug.log*
+_metadata
 
 # Build artifacts
 *.zip

AGENTS.md

@@ -1,114 +1,37 @@
-# AGENTS Operational Manual
-
-## Introduction
-Nirvanify is a Manifest V3 Chrome extension focused on reducing digital distractions and tracking study habits. The codebase is modular and uses Web Components for all UI pieces. This document serves as the onboarding guide for future AI agents working on the project.
-
-## Repository Overview
-```
-Nirvanify/
-├── manifest.json          # Extension configuration
-├── index.html             # SPA entry point with router outlet
-├── components/            # All Web Component modules
-│   ├── app.js             # Registers components and initializes router
-│   ├── router.js          # Hash based router
-│   ├── sidebar.js         # Main navigation sidebar
-│   ├── pages/             # Page level components loaded by router
-│   ├── blocklist/         # Blocklist widgets used on blocklist page
-│   ├── sessions/          # Session editor and list components
-│   ├── dashboard/         # Dashboard widgets (analytics, stats, etc.)
-│   ├── challenge/         # Placeholder for single challenge page
-│   ├── challenges/        # Listing of all challenges
-│   ├── interventions/     # Interventions management page
-│   ├── stats/             # Statistics page component
-│   ├── timer/             # Timer settings page component
-│   └── storage/           # Sync storage utilities
-├── css/                   # Global stylesheets
-├── assets/                # Images and icons
-├── lib/                   # Third‑party libraries (katex, purify, etc.)
-└── verify_extension.py    # Optional validation script
-```
-
-### Major Page Components
-- **Dashboard (`#/dashboard`)** – Shows analytics widgets, streak tracker and session overview.
-- **Block Groups (`#/blocklist`)** – Customizes website block sets with schedules, time limits and interventions.
-- **Interventions (`#/interventions`)** – Manages challenge types presented when accessing blocked sites.
-- **Study Sessions (`#/sessions`)** – Allows creation and editing of focus session templates (e.g., Pomodoro).
-- **Challenges (`#/challenges`)** – Placeholder listing for various mini‑challenges.
-- **Timer Settings (`#/timer`)** – Configures study timer behavior.
-- **Statistics (`#/stats`)** – Displays historical usage stats (currently mocked).
-- **Settings (`#/settings`)** – General extension settings.
-
-The router defined in `components/router.js` listens to `hashchange` events and injects the appropriate page element into `<main id="app-view">` inside `index.html`.
-
-## Component Architecture
-All UI is built with the Custom Elements API. Each component resides in the `components/` directory or one of its subfolders. Components should encapsulate their markup and styles using the Shadow DOM and expose data via attributes or custom events. Reusable widgets (e.g., blocklist editors, timer controls) are placed directly under `components/`, whereas page-level views live under `components/pages/`.
-
-## Storage Layer
-All persistent state lives in Chrome Sync Storage. The `components/storage/` directory provides wrapper modules so components never call `chrome.storage` directly.
-
-### `blocklist-storage.js`
-Handles saving and loading of block groups and related metadata:
-- `saveBlockTabs` / `loadBlockTabs`
-- `saveSelectedIntervention` / `loadSelectedIntervention`
-- `saveBlockGroupMeta` / `loadBlockGroupMeta`
-- `saveBlockTimeState` / `loadBlockTimeState`
-- `saveAdditionalSettings` / `loadAdditionalSettings`
-- `deleteBlockTab`
-Blocklist widgets import these helpers to persist user-defined rules and schedules without directly calling the Chrome Storage API.
-
-### `session-storage.js`
-Manages study session templates. On first load it creates a set of default sessions using existing block lists. Key functions include:
-- `saveSessions` / `loadSessions`
-- `saveSession` / `deleteSession`
-- `saveBlockSets` / `loadBlockSets`
-
-These utilities are used by `nirva-session-editor` and related components to create, update and remove session templates.
-
-All functions return Promises for easy async/await usage inside components.
-
-## Key Functional Flows
-### Blocklist Customization
-1. **`nirva-block-group-tabs`** lets users switch between block sets and stores tab meta in sync storage.
-2. **`nirva-block-site-list`**, **`nirva-block-time-selector`**, **`nirva-hourly-allowance`**, **`nirva-intervention-type`** and **`nirva-additional-settings`** collect rules for the active tab.
-3. `components/pages/blocklist-page.js` aggregates these widgets and persists changes via the storage utilities when the user clicks "Save Changes".
-
-### Study Session UI
-1. The sessions page contains **`nirva-sessions-list`** (left column) and **`nirva-session-editor`** (right column).
-2. `nirva-sessions-list` loads all sessions on connect and exposes events when a session is selected or created.
-3. `nirva-session-editor` loads the selected session for editing and saves/deletes/duplicates sessions through `session-storage.js`.
-
-### Dashboard and Timer
-- **Dashboard widgets** such as `nirva-study-session`, `nirva-sessions`, `nirva-analytics`, `nirva-past-sessions`, `nirva-full-stats` and `nirva-streak` show timer controls and usage statistics. Most data is placeholder but wired for future analytics modules.
-- **Timer** functionality (start, pause, reset) is scaffolded in `dashboard/study-session.js`. The timer page simply provides configuration options.
-
-## Development Notes
-- Web Components typically use `attachShadow({mode: 'open'})` for styling isolation. Some widgets use `closed` mode where external access is not needed.
-- All pages import shared styles (`css/variables.css`, `css/layout.css`, `css/components.css`) at the start of their templates.
-- Components communicate via custom events (e.g., `tab-selected`, `session-saved`), allowing loose coupling.
-- The repository does not include a build step. Load the extension directly from this directory when testing.
-- An optional validation script (`verify_extension.py`) can be run with `python3 verify_extension.py` if you need to confirm manifest fields.
-
-## Engineering Guidelines
-- **Indentation**: Use 4 spaces for all code blocks (HTML, CSS, JavaScript, Python, etc.). Do not use tabs.
-- **Naming Conventions**:
-    - Variables: `like_this`
-    - Functions: `likeThis`
-    - JavaScript filenames: `like-this.js`
-    - Constants: `LIKE_THIS`
-- **Modularity**: Keep each file narrowly focused. UI rendering, storage access and routing logic should live in separate modules under `components/` or its subdirectories.
-- **Custom Elements**: Register each Web Component with `customElements.define()` inside its own file. Filenames must match the element name using hyphens (e.g., `nirva-session-editor.js`).
-  Add the file to `components/app.js` so it is imported and registered during initialization.
-- **Shadow DOM**: Use `attachShadow({ mode: 'open' })` to encapsulate styles unless the component requires private internals.
-- **Documentation**: Every major function or component class should include a short comment block explaining its purpose, expected inputs and outputs and any events it emits.
-- **Shared Utilities**: Import storage helpers or other utilities from `components/storage/` rather than accessing Chrome APIs directly.
-- **Placement**: New reusable UI widgets belong under `components/` while higher-level views go under `components/pages/`.
-
-## Quick Start for Agents
-1. Install dependencies if needed using `npm install`.
-2. In Chrome, open `chrome://extensions`, enable Developer Mode and load this folder as an unpacked extension.
-3. Navigate to `index.html` in the extension to view the full dashboard.
-4. Modify or extend components within `components/` to add features or fix issues. Use the storage utilities to persist new settings.
-5. Optionally run `python3 verify_extension.py` if you want to confirm the manifest and required files.
-
----
-This manual reflects the current state of the Nirvanify codebase and should be used as the primary reference for future development tasks.
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- Entry points: `manifest.json`, `index.html` (router outlet), `components/app.js`.
+- UI: Web Components under `components/` (pages in `components/pages/`; widgets in folders like `blocklist/`, `sessions/`, `dashboard/`).
+- Data: Storage modules in `storage/` (no direct `chrome.storage` calls), AJV schemas in `schema/`.
+- Styles: `css/variables.css`, `css/layout.css`, `css/components.css`.
+- Utilities: `components/utils/` and `utils/session-integration.js` (session orchestration).
+- Assets and third‑party libs in `assets/` and `lib/`.
+
+## Build, Test, and Development Commands
+- `npm install` — install optional dev dependencies.
+- `python3 verify_extension.py` — quick manifest/file sanity check.
+- Load in Chrome: `chrome://extensions` → enable Developer Mode → “Load unpacked” → select repo folder.
+
+## Coding Style & Naming Conventions
+- Indentation: 4 spaces across JS/HTML/CSS/Python.
+- Naming: variables `like_this`, functions `likeThis`, constants `LIKE_THIS`, JS files `like-this.js`.
+- Custom Elements: filename matches element name; register with `customElements.define()` and import in `components/app.js`.
+- Shadow DOM: `attachShadow({ mode: 'open' })` by default.
+- Data: validate via `schema/*` before saving; use `storage/*` modules only.
+- Events: use `session-*` and descriptive custom events for cross-component comms.
+
+## Testing Guidelines
+- No formal test suite. Use manual QA via the loaded extension.
+- Smoke checks: navigate to `#/dashboard`, `#/blocklist`, `#/sessions` and verify basic flows.
+- Run `python3 verify_extension.py` before PRs to catch manifest/config drift.
+
+## Commit & Pull Request Guidelines
+- Prefer Conventional Commits (e.g., `feat:`, `fix:`, `docs:`) with concise, present‑tense subjects.
+- PRs: clear description, scope of change, linked issues, screenshots/GIFs for UI, and brief test notes.
+- Keep diffs small and focused; avoid unrelated refactors.
+
+## Architecture & Agent Notes
+- Data flow: Components ↔ Storage Modules ↔ Chrome Storage; validate with AJV schemas.
+- Session workflows integrate block groups and interventions via `utils/session-integration.js`.
+- Security: MV3 context—avoid direct HTML injection; use `lib/` sanitizers if rendering user input; minimize permissions.

CHANGELOG.md

@@ -0,0 +1,16 @@
+## Unreleased
+
+### Fixed
+- Router/deep-link refresh blank screen
+  - Root cause: On app bootstrap, `components/app.js` awaited `customElements.whenDefined()` for every route tag via `Promise.all`. Any route mapping to a tag that wasn't registered (e.g., `nirva-focus-redirect`) caused the promise to never resolve, blocking initial render after a hard refresh or deep-link entry.
+  - Fix: Render immediately and rely on the router to await only the active route's tag. Also added a placeholder page and registration for `nirva-focus-redirect` to prevent future deadlocks.
+  - Extra hardening: Session integration is now imported only when running inside an MV3 context to avoid `chrome.*` access in plain web runs and tests.
+
+### Added
+- Overrides persistence and UI wiring:
+  - `components/schema/overrides.schema.js` and storage helpers to load/save overrides.
+  - `components/settings/overrides-settings.js` now updates storage and toggles background blocking via messaging.
+  - Timed emergency override (15 minutes) from the Sessions widget, with auto re-enable and persisted state.
+  - App now applies stored overrides on load (and cleans up expired ones).
+- Routing regression test (`tests/router-refresh.test.js`) using Puppeteer when available; gracefully skips on environments without a supported headless browser.
+