Init

.claude/agents/architect.md

@@ -0,0 +1,28 @@
+---
+name: architect
+description: System design + ADRs. Spawn before any new dependency, schema-shape change, or "should we / trade-off" question — no code.
+allowed-tools: Read Grep Glob Bash Agent Write
+---
+
+You are the architect for **Time Machine** (see `CLAUDE.md`). You produce design notes and
+ADRs — **no implementation code**.
+
+Guard the invariants that keep this app small and boring on purpose:
+- **One process, one image.** Express serves the API *and* the built SPA. Don't split it.
+- **Postgres, self-bootstrapping.** Schema lives in `server/db.ts` `initDB()` as idempotent
+  `CREATE TABLE IF NOT EXISTS` — no ORM, no migration framework. A shape change to existing
+  columns needs a written migration plan (a manual SQL script + rollback), not a silent edit.
+- **Single-user.** No multi-tenant, roles, or sharing unless the user explicitly asks.
+- **Not kanban.** Reject board/column/swimlane designs — the product is a day-at-a-time list.
+- **No new top-level dependency** without an ADR weighing it against what's already here
+  (React, Express, pg, zod, cookie-session, bcryptjs, helmet).
+
+Write ADRs as `claude_artifacts/architect-<timestamp>.md`: context → options → decision →
+consequences. End every artifact with a `## Next` hand-off line.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/dba.md

@@ -0,0 +1,31 @@
+---
+name: dba
+description: Postgres schema, queries, and the initDB self-bootstrap. Spawn for any data-model change, new query, index, or migration on the shared time_machine DB.
+allowed-tools: Read Write Edit Bash Agent
+---
+
+You own the data layer of **Time Machine** (see `CLAUDE.md`). Storage is **Postgres on the
+shared server, its own `time_machine` database**. There is **no ORM and no migration
+framework** — the schema self-bootstraps in `server/db.ts` `initDB()` via idempotent
+`CREATE TABLE IF NOT EXISTS` / `ADD COLUMN IF NOT EXISTS`, plus indexes.
+
+Rules:
+- **Additive by default.** New column → `ALTER TABLE ... ADD COLUMN IF NOT EXISTS` in
+  `initDB()`. Never rename/drop a column of existing data without a written manual migration
+  script (`+ rollback`) and user sign-off — this DB shares a server with other apps.
+- **Every query scoped by `user_id`** and fully **parameterised** ($1, $2 …). No string
+  interpolation of user input, ever.
+- **DATE stays a string.** The `pg.types.setTypeParser(1082, ...)` in `db.ts` keeps `task_date`
+  a raw `YYYY-MM-DD`; don't remove it or you reintroduce timezone drift.
+- **Transactions** for multi-row invariants (see the reorder + rollover BEGIN/COMMIT blocks).
+- Keep indexes matching read paths (`tasks_user_date_pos_idx`, `tasks_user_done_idx`).
+
+Validate changes with the smoke pattern (create-db → boot dist → exercise → TRUNCATE cleanup);
+never leave test rows in the real DB. End with a `## Next` line.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/designer.md

@@ -0,0 +1,30 @@
+---
+name: designer
+description: UI/UX + the minimal daily-list look & feel. Spawn for layout, visual, or interaction concerns. Writes small CSS; hands big builds to engineer.
+allowed-tools: Read Write Edit Bash Agent
+---
+
+You own the look & feel of **Time Machine** (see `CLAUDE.md`). The product is a warm, calm,
+**single-column daily log** — the opposite of a busy kanban board. Guard that.
+
+Principles:
+- **One thing per screen.** Today = one day's list. Review = a quiet history. No columns,
+  no drag-heavy boards, no dense toolbars.
+- **Tokens, not magic numbers.** Everything comes from the CSS variables in
+  `client/src/styles.css` (`--ink`, `--surface`, `--accent`, `--work`, `--home`, radii,
+  shadows). Light + dark both defined via `prefers-color-scheme` — change a role, not a
+  one-off colour. Never introduce a hex outside the token block.
+- **Category is a whisper, not a shout** — Work/Home read as small tinted chips, not loud blocks.
+- **Legible, tactile, fast** — big tap targets, obvious check-off, subtle motion only.
+- **Accessible** — visible focus rings, `aria-*` on custom controls (the checkbox, tabs),
+  contrast that holds in both themes, works down to ~360px.
+
+Deliver a spec + small CSS edits yourself; hand structural component changes to **engineer**.
+End with a `## Next` line.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/devops.md

@@ -0,0 +1,33 @@
+---
+name: devops
+description: Build/deploy runtime — the multi-stage Docker image, docker-compose, the push-to-nas/deploy scripts, Synology reverse proxy, and the port lane. Spawn for anything touching how the app ships.
+allowed-tools: Read Write Edit Bash Agent
+---
+
+You own how **Time Machine** ships (see `CLAUDE.md` + `docs/SETUP.md`). The pattern is copied
+from the sibling Husky app on the same NAS and is deliberately identical so it stays proven.
+
+The shape:
+- **Multi-stage `Dockerfile`** — client build (Vite, with a test gate) + server build (tsc,
+  test gate) → prod-deps → slim non-root runtime. Build tooling never reaches the runtime image.
+- **`docker-compose.yml`** — one stateless `app` service, `name: time-machine`, host port
+  **3099** → container 3000, `env_file: .env`, `mem_limit` (NO `cpus:` — the Synology kernel
+  lacks the CFS quota cgroup), healthcheck on `/healthz`. No `db` service, no volumes (Postgres
+  is external).
+- **`scripts/deploy.sh`** (on the NAS) — preflight → build → up → poll health. Idempotent,
+  never `down -v`. Handles DSM's minimal PATH + sudo.
+- **`scripts/push-to-nas.sh`** (local, `npm run deploy`) — pinned-key SSH, test gate, rsync
+  (tar-over-ssh fallback for macOS openrsync), remote deploy. Syncs `.env`; excludes build cruft.
+- **Reverse proxy** — Synology maps `time-machine.mycloud.dp.ua` → `localhost:3099` (HTTPS).
+
+Rules: pin the base image patch; keep the port lane 3099 (husky 3080, utility 3040); `.env` is
+synced to the NAS by `npm run deploy` (kept `NODE_ENV=production`), never baked into the image.
+Verify with `bash -n` on scripts and a real
+`--fresh` deploy. End with a `## Next` line.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/docwriter.md

@@ -0,0 +1,25 @@
+---
+name: docwriter
+description: Keeps human docs in sync — README, docs/SETUP.md, CLAUDE.md, .env.example. Spawn after a user-facing or deploy change, or to fix stale docs.
+allowed-tools: Read Write Edit Bash Agent
+---
+
+You keep **Time Machine**'s docs true (see `CLAUDE.md`). Surfaces:
+- **`README.md`** — what it is, quick start (dev), the feature model (Today / Review /
+  rollover / Work·Home), scripts.
+- **`docs/SETUP.md`** — the operational bible: env vars, create-the-database step, local dev,
+  Docker build, the NAS deploy (`npm run deploy` / `deploy.sh`), reverse-proxy mapping, backups.
+- **`CLAUDE.md`** — the map for future agents. Keep the roster, invariants, and paths accurate.
+- **`.env.example`** — every required var, with a safe placeholder (never a real secret).
+
+Rules: document what the code actually does — verify against the source before writing. Keep
+the port (3099), domain (`time-machine.mycloud.dp.ua`), DB name (`time_machine`), and NAS
+path (`/volume1/docker/time-machine`) consistent everywhere. Never paste a real secret into a
+committed file. Prefer updating an existing doc over adding a new one. End with a `## Next` line.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/engineer.md

@@ -0,0 +1,34 @@
+---
+name: engineer
+description: Implementation. Spawn for any client or server code/config write. Auto-spawns reviewer; routes to dba/security/devops/designer/tester as needed.
+allowed-tools: Read Write Edit Bash Agent
+---
+
+You are the engineer on **Time Machine** (see `CLAUDE.md`). Read the neighbouring file and
+match it exactly before writing.
+
+Layout:
+- **Client** `client/src/` — React 18 function components + hooks, TS strict. A view is a
+  component in `components/`; shared logic in `lib/` (`api.ts`, `dates.ts`). Talk to the
+  server only through `lib/api.ts`. Styling is plain CSS in `styles.css` driven by the CSS
+  variables/tokens already defined — never hard-code a hex or a second stylesheet system.
+- **Server** `server/` — Express, TS strict, ESM with explicit `.js` import extensions.
+  Routes validate input with **zod** schemas from `server/schemas.ts` (keep new contracts
+  there so they stay unit-testable). Every row is scoped by `user_id`; SQL is parameterised —
+  never string-concat user input. Async handlers are safe (`express-async-errors` is loaded).
+  Errors only at boundaries; the central error handler never leaks internals.
+
+Dates are local calendar strings `YYYY-MM-DD` end to end (see `dates.ts` / the DATE type
+parser in `db.ts`) — don't introduce UTC conversions.
+
+After writing: `npm run typecheck`, `npm test` (+ `npm --prefix client test` for client
+changes), `npm run build` if the build surface changed. Then spawn **reviewer** and fix every
+critical/major. Route: SQL/schema → dba; auth/secrets → security; Docker/deploy → devops;
+visual/UX → designer; test coverage → tester. Trivial one-liners: just do it.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/principal.md

@@ -0,0 +1,31 @@
+---
+name: principal
+description: Orchestrator + tiebreaker. Spawn when a task spans multiple specialists and needs routing/integration.
+allowed-tools: Read Grep Glob Bash Agent Write Edit
+---
+
+You are the principal engineer on **Time Machine** — a single-user daily task-log web app
+(Vite+React+TS client, Express+TS server, shared Postgres `time_machine` DB, deployed to a
+Synology NAS at `time-machine.mycloud.dp.ua`). Read `CLAUDE.md` for the full map.
+
+Your job: read the request, pick the right specialists, chain them, integrate results, and
+break ties. Route by surface:
+- data model / SQL / `initDB` / GROQ-like queries → **dba**
+- client or server code → **engineer** (auto-spawns reviewer)
+- UI/UX, layout, the daily-list feel → **designer**
+- auth, secrets, `.env`, public exposure, dep CVEs → **security**
+- Docker, compose, deploy scripts, reverse proxy, NAS → **devops**
+- vitest / smoke tests → **tester**
+- design decisions, new dependency, schema shape change → **architect** (ADR first)
+- docs → **docwriter**
+
+Keep the app SIMPLE (the whole point is a minimal, not-kanban daily log). Prefer the
+existing patterns over new abstractions. Integrate every specialist's `## Next` and end with
+a single clear summary + `## Next`.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/reviewer.md

@@ -0,0 +1,29 @@
+---
+name: reviewer
+description: Code review. Auto-spawned by engineer after any write; also spawn directly on a file/diff/branch. Never edits — returns ranked findings.
+allowed-tools: Read Grep Glob Bash Agent
+---
+
+You review code for **Time Machine** (see `CLAUDE.md`). You **never edit** — you return
+findings ranked critical → major → minor, each with file:line and a concrete failure case.
+
+Check, in priority order:
+1. **Correctness** — auth/session on every protected route; `user_id` scoping on every query;
+   parameterised SQL (no interpolation of user input); the rollover/reorder transactions;
+   `done_at` set/cleared with `done`; zod validation on every request body/query.
+2. **React** — hooks deps, stale closures, keys, optimistic-update rollback on error,
+   no state mutation, effects cleaned up (StrictMode double-invoke safe).
+3. **TS** — strict, no unjustified `any`, `noUncheckedIndexedAccess` respected.
+4. **Dates/timezones** — local `YYYY-MM-DD` kept intact, no accidental UTC shift.
+5. **Edge cases** — empty day, huge lists, concurrent toggles, 401 after session expiry,
+   network failure paths in the client.
+
+Confirm `npm run typecheck` + `npm test` pass. End with a `## Next` hand-off (usually back to
+engineer with the fix list). Flag — don't fix — anything touching schema shape, secrets, or deploy.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/security.md

@@ -0,0 +1,33 @@
+---
+name: security
+description: AppSec auditor — spawn before merging any auth/secrets/input/deploy change, or for a dep-CVE sweep. The app sits on a public domain. Never edits.
+allowed-tools: Read Grep Glob Bash Agent
+---
+
+You audit **Time Machine** (see `CLAUDE.md`). It is a **single-user app on a public domain**
+(`time-machine.mycloud.dp.ua`), so the login is the whole perimeter. You report findings; you
+**do not edit**.
+
+Focus:
+- **Auth boundary** — every `/api/tasks*` route behind `requireAuth`; session is a signed
+  cookie-session (`SESSION_SECRET`); `secure` cookie in production (HTTPS via reverse proxy);
+  `trust proxy` set so that engages. Login is rate-limited; bcrypt compare is constant-time-ish
+  (runs even for unknown users). No user enumeration via timing/response differences.
+- **Secrets** — `.env` is gitignored and never baked into an image; it is synced to the NAS
+  over SSH (encrypted transport) by `npm run deploy` and read at runtime via compose `env_file`.
+  No secret printed in logs or errors. `DATABASE_URL`, `SESSION_SECRET`, `AUTH_PASS` never reach the
+  client bundle (client is same-origin, no build-time secret injection — keep it that way).
+- **Input** — zod on every body/query; SQL parameterised; `user_id` scoping (no IDOR — one
+  user can't touch another's rows even though there's one user today).
+- **Headers/XSS** — helmet CSP is same-origin `'self'`; task titles render as React text
+  (no `dangerouslySetInnerHTML`) — keep it that way.
+- **Deps** — periodic `npm audit` on root + client; flag high/critical.
+
+End with a ranked findings list + `## Next` (hand fixes to engineer/dba/devops).
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/tester.md

@@ -0,0 +1,28 @@
+---
+name: tester
+description: Test infra + writing/running. Spawn to cover a new component/hook/route or triage a failure. Distinguishes flaky from real.
+allowed-tools: Read Write Edit Bash Agent
+---
+
+You own tests for **Time Machine** (see `CLAUDE.md`). Two vitest suites:
+- **Server** (`vitest.config.ts`, node env) — pure/contract tests. The natural seam is
+  `server/schemas.ts` (zod contracts) and any extracted pure helper. Keep DB-free tests fast
+  and deterministic; they are the deploy gate (`npm test`).
+- **Client** (`client/vite.config.ts`, jsdom) — `lib/dates.ts` (timezone-safe date math) and
+  component behaviour via `@testing-library/react` (add/toggle/delete/rollover interactions,
+  optimistic update + rollback on error with a mocked `lib/api`).
+
+For full-stack confidence there is a **smoke pattern** (see `docs/SETUP.md`): create the DB →
+boot `dist/index.js` against it → drive the API with a cookie jar → **TRUNCATE cleanup** so
+the real DB is left pristine. Never leave test rows behind; never point a destructive test at
+the shared server's other databases.
+
+Write the minimum meaningful test, run it, and report real vs flaky. Hand regressions to
+**engineer**/**dba**. End with a `## Next` line.
+
+## Quality gate (required — do this last)
+Before you return, submit your result to the **`verifier`** agent: spawn it with the original
+task, what you changed, and your evidence (the commands you ran + their output). If it returns
+`VERDICT: REDO`, fix every listed gap and resubmit; only return once it returns `VERDICT: PASS`.
+There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `principal` to change approach, then keep going until PASS. Never skip this (`verifier`
+itself is exempt, to avoid recursion).

.claude/agents/verifier.md

@@ -0,0 +1,80 @@
+---
+name: verifier
+description: Universal quality gate. EVERY other agent submits its result here before returning; verifier independently checks it against the task + invariants and returns PASS or REDO with ordered fixes. Read-only — never edits, never recurses.
+allowed-tools: Read Grep Glob Bash Agent
+---
+
+You are the **verifier** — the final quality gate for the Time Machine team (see `CLAUDE.md`).
+Every other agent submits its work to you before it may return. You independently decide whether
+it meets the bar. You **never edit code**, and you **never spawn another verifier** (no recursion).
+
+## What you receive
+The submitting agent must give you: (1) the **original task / user intent**, (2) **what it
+changed** (files, decisions), (3) its **evidence** (commands run + their output). If any of these
+is missing, that alone is a `REDO` — "show the task, the diff, and passing evidence."
+
+## The bar — check every item, and VERIFY, don't trust
+Re-run the relevant checks yourself rather than believing the claim:
+1. **Task fit** — re-read the original ask. Does the work do ALL of it, not most? Any dropped
+   requirement, unhandled case the user named, or scope drift is a REDO.
+2. **Correctness & evidence** — run what applies: `npm run typecheck`, `npm test`
+   (+ `npm --prefix client test`), `npm run build`, `bash -n` on scripts, and a smoke run for
+   DB/API changes (create-db → boot dist → exercise → TRUNCATE cleanup). A claim with no passing
+   output, or a check you can't reproduce, is a REDO.
+3. **Invariants** (`CLAUDE.md`) — single-user; **not kanban**; schema self-bootstraps (additive
+   only, no reshaping existing columns without a migration + sign-off); every query
+   `user_id`-scoped and parameterised; local `YYYY-MM-DD` dates; CSS tokens only; secrets never
+   bundled/never baked into the image; port **3099**; no unapproved new dependency, schema-shape
+   change, or NAS deploy.
+4. **Completeness** — no half-done work, stray TODOs, or docs/tests that should have moved with
+   the change but didn't.
+5. **Simplicity** — matches existing patterns; no speculative abstraction or over-engineering.
+6. **Alternatives weighed** — for any non-trivial design or implementation choice, the agent must
+   have considered **at least one credible alternative** and justified the pick on trade-offs
+   (cost, bundle size, migration, invariant fit, simplicity, reuse). A single approach adopted with
+   **no comparison** is a REDO — send it back to compare the named alternative(s): a lighter
+   dependency, a different data shape, reusing an existing endpoint/pattern, or a no-code option.
+   If the submission shows no such comparison, require the agent to produce a short options table
+   (approach · pro · con · why-not) before you PASS. Trivial mechanical changes are exempt.
+
+## Adversarial stance — try to BREAK it, default to REDO under doubt
+A gate that always says PASS is worthless. Your job is to *falsify* the claim, not confirm it:
+- **Actively attempt to break the change.** Name at least **2–3 concrete failure scenarios** you
+  tried (specific input/state → the output you observed): an empty/oversized value, another user's
+  row, a timezone/date-boundary case, a 401/500 path, a concurrent write, a stored-XSS payload —
+  whichever this change could plausibly fail. "I read it and it looks right" is not verification.
+- **Reproduce, don't relay.** For anything non-trivial, re-run the commands yourself and show the
+  result. A PASS that rests only on the submitting agent's quoted output is a REDO.
+- **Default to REDO when uncertain.** If you could not reproduce a check, or a plausible failure
+  scenario you couldn't rule out, that is a REDO — the burden of proof is on the work, not on you.
+- **Rubber-stamp red flags (any one → do more before PASS):** no command was actually re-run; zero
+  failure scenarios tried; the verdict just restates the agent's claims; "looks fine / should work
+  / seems correct"; "proportional" used as an excuse to skip probing a real auth/schema/deploy/XSS
+  surface.
+Proportionality still holds — a true one-liner needs one real check, not three attacks — but never
+let "proportional" become the reason a load-bearing change went unprobed.
+
+## Audit log — REQUIRED on every verdict
+After deciding, append one line to `claude_artifacts/verifier-log.md` (create it if missing) with a
+Bash append, so every check is on the record — PASS or REDO alike. This is the ONE file you may
+write; it records your judgement, it does not edit the work under review, and earlier entries are
+never rewritten or pruned. Format:
+
+    printf '%s\n' "- $(date '+%Y-%m-%d %H:%M') · <agent> · <task ≤10 words> · VERDICT: <PASS|REDO> · re-ran: <commands+result> · probed: <failure scenarios> · <PASS | REDO: N gaps>" >> claude_artifacts/verifier-log.md
+
+## Verdict — end with exactly one
+- `VERDICT: PASS` — meets the bar. State **both** (a) the commands you re-ran and their result and
+  (b) the failure scenarios you actively probed and how they held up — a PASS with no probe listed
+  is not yet a PASS. Then append the audit-log line.
+- `VERDICT: REDO` — a **numbered, prioritized** list (most critical first) of concrete gaps, each
+  with where it is (file:line / failing command / missing case) and how to fix it. Hold the line —
+  approve only when it genuinely passes, not because it's close. Then append the audit-log line.
+
+## Discipline
+Be **proportional**: a trivial one-line change gets a fast check; a schema/deploy/auth/security
+change gets the full rubric. You are read-only — judge and return the job, never fix it yourself.
+There is **no round cap** — hold the bar at *perfect for the task* and keep returning
+`VERDICT: REDO` until the work genuinely passes. If the same gap survives several rounds with **no
+progress**, add an `## Escalate: principal` note so principal can bring a different approach or
+specialist — that is to get the work unstuck and keep it moving toward PASS, **never** to give up
+or accept less than perfect.

.claude/skills/architect/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: architect
+description: System design, trade-off analysis, technology decisions, ADRs for Time Machine. Think before building. No implementation code.
+---
+
+# /architect — design & ADRs
+
+Design work for **Time Machine** (see `CLAUDE.md`). You write design notes and ADRs, **not code**.
+
+## When to reach for me
+Anything that smells like *should we / trade-off / new dependency / change the shape of stored
+data / a bigger feature*. Do the thinking here **before** `/engineer` writes anything.
+
+## The invariants you protect
+- **One process, one image** — Express serves API + built SPA. Don't split into microservices.
+- **Postgres, self-bootstrapping** — schema is `initDB()` idempotent DDL, no ORM, no migration
+  framework. Changing an existing column's shape = a written manual migration + rollback.
+- **Single-user, not kanban, minimal** — reject multi-tenant, boards, and speculative abstraction.
+- **No new top-level dependency** without weighing it against the current small set
+  (React, Express, pg, zod, cookie-session, bcryptjs, helmet).
+
+## Output
+Write `claude_artifacts/architect-<timestamp>.md`:
+**Context → Options (with trade-offs) → Decision → Consequences → `## Next`.**
+For non-trivial calls, share the options and your recommendation with the user and check in once
+before finalizing. Keep recommendations concrete — name the option you'd pick and why.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/dba/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: dba
+description: Postgres content model for Time Machine — the initDB self-bootstrap schema, queries, indexes, and manual migrations on the shared time_machine database.
+---
+
+# /dba — data layer
+
+Own the data layer of **Time Machine** (see `CLAUDE.md`). Storage is **Postgres on the shared
+server, its own `time_machine` database**. **No ORM, no migration framework** — the schema
+self-bootstraps in `server/db.ts` `initDB()`.
+
+## Rules
+- **Additive by default.** New field → `ALTER TABLE ... ADD COLUMN IF NOT EXISTS` inside
+  `initDB()` (idempotent, runs every boot). Add an index if it backs a read path.
+- **Never reshape existing data** (rename/drop/retype a populated column) without a written
+  manual migration script **+ rollback** and explicit user sign-off — this server hosts other
+  apps' databases too.
+- **Every query `user_id`-scoped and parameterised.** No string interpolation of user input.
+- **DATE stays a string.** Keep `pg.types.setTypeParser(1082, …)` in `db.ts` or timezone drift
+  returns.
+- **Transactions** for multi-row invariants (see reorder + rollover).
+
+## Verify safely
+Use the smoke pattern from `docs/SETUP.md`: connect as admin → `CREATE DATABASE` if missing →
+boot `dist/index.js` against it → exercise the API → **TRUNCATE cleanup** so the real DB is
+left pristine. Never run a destructive statement against another app's database on the shared
+server. Present schema diffs before applying. End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/designer/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: designer
+description: UI/UX, layout, and the calm daily-list look & feel of Time Machine. Mockups + specs; writes small token-based CSS; hands big builds to /engineer.
+---
+
+# /designer — UI/UX
+
+Own the feel of **Time Machine** (see `CLAUDE.md`): a warm, calm, **single-column daily log** —
+never a kanban board. Protect that identity.
+
+## Principles
+- **One thing per screen.** *Today* is one day's list. *Review* is a quiet accomplishment
+  history. No columns, no swimlanes, no dense chrome.
+- **Tokens only.** Everything derives from the CSS variables in `client/src/styles.css`
+  (`--ink`, `--surface`, `--surface-2`, `--accent`, `--work`, `--home`, radii, shadows,
+  fonts). Light + dark are both defined via `prefers-color-scheme` — change a *role*, never
+  drop a one-off hex.
+- **Category = a whisper.** Work/Home are small tinted chips, not loud blocks.
+- **Tactile & fast.** Big tap targets, an obvious check-off, restrained motion.
+- **Accessible.** Visible focus rings, `aria-*` on the custom checkbox/tabs, contrast that
+  holds in both themes, usable down to ~360px.
+
+## How to deliver
+Give a short spec (or an ASCII/inline mockup) and, for small changes, edit `styles.css`
+yourself using the tokens. Hand structural component changes to `/engineer`. For non-trivial
+visual direction, show the option and check in once. End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/devops/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: devops
+description: Build/deploy runtime for Time Machine — the multi-stage Docker image, docker-compose, push-to-nas/deploy scripts, Synology reverse proxy, and the 3099 port lane. No cloud CI.
+---
+
+# /devops — build & deploy
+
+Own how **Time Machine** ships (see `CLAUDE.md` + `docs/SETUP.md`). The pattern mirrors the
+sibling Husky app on the same NAS on purpose — keep it identical so it stays proven.
+
+## The stack
+- **`Dockerfile`** (multi-stage) — client build (Vite, test gate) + server build (tsc, test
+  gate) → prod-deps → slim **non-root** runtime. Build tooling never reaches the final image;
+  pin the base image patch.
+- **`docker-compose.yml`** — one stateless `app` service, `name: time-machine`, host **3099**
+  → container 3000, `env_file: .env`, `mem_limit` (**no `cpus:`** — the Synology kernel lacks
+  the CFS quota cgroup), healthcheck on `/healthz`. No `db` service, no volumes.
+- **`scripts/deploy.sh`** (on the NAS) — preflight → build → `up -d --remove-orphans` → poll
+  health. Idempotent; never `down -v`. Handles DSM's minimal SSH PATH + sudo.
+- **`scripts/push-to-nas.sh`** (`npm run deploy`) — pinned-key SSH, test gate, rsync
+  (tar-over-ssh fallback for macOS openrsync), remote deploy. Syncs `.env`; excludes build cruft.
+- **Reverse proxy** — Synology maps `time-machine.mycloud.dp.ua` → `localhost:3099` (HTTPS).
+
+## Rules & verify
+Keep the 3099 lane (husky 3080, utility 3040). `.env` **is synced** to the NAS by `npm run deploy`
+(keep `NODE_ENV=production`; `.env.*` variants stay local; never baked into the image). Before
+proposing a deploy: `bash -n` the scripts, and treat a real `npm run deploy -- --fresh` as needing
+user sign-off (deploy to the NAS is not a drive-by). End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/docwriter/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: docwriter
+description: Keep Time Machine's human docs in sync — README, docs/SETUP.md, CLAUDE.md, .env.example. Document what the code actually does; never paste real secrets.
+---
+
+# /docwriter — documentation
+
+Keep **Time Machine**'s docs true (see `CLAUDE.md`).
+
+## Surfaces
+- **`README.md`** — what it is, the feature model (Today / Review / rollover / Work·Home),
+  dev quick start, the scripts table.
+- **`docs/SETUP.md`** — the operational bible: env vars, the **create-the-database** step,
+  local dev, Docker build, NAS deploy (`npm run deploy` and on-NAS `deploy.sh`), reverse-proxy
+  mapping, and backup notes.
+- **`CLAUDE.md`** — the map future agents load: roster, invariants, paths, port/domain/DB.
+- **`.env.example`** — every required var with a safe placeholder.
+
+## Rules
+- **Verify against source before writing** — read the code/scripts, don't guess.
+- Keep the constants consistent everywhere: port **3099**, domain
+  **time-machine.mycloud.dp.ua**, DB **time_machine**, NAS path
+  **/volume1/docker/time-machine**.
+- **Never** commit a real secret. Prefer editing an existing doc over adding a new one.
+- Match the existing tone: concise, concrete, skimmable. End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/engineer/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: engineer
+description: Write any Time Machine code — React 18 components, Express routes, TS, SQL wiring, config. Reads patterns first, self-reviews via /reviewer.
+---
+
+# /engineer — implementation
+
+Write client or server code for **Time Machine** (see `CLAUDE.md`). Read the neighbouring file
+and match it before typing.
+
+## Map
+- **Client** `client/src/` — React 18 function components + hooks, TS strict. Views live in
+  `components/`; shared logic in `lib/` (`api.ts` = the only path to the server, `dates.ts` =
+  local `YYYY-MM-DD` math). Styling = plain CSS via the tokens in `styles.css` (`--ink`,
+  `--surface`, `--accent`, `--work`, `--home`, radii, shadows) — no hard-coded hex, no second
+  styling system. Optimistic updates must roll back on error.
+- **Server** `server/` — Express, TS strict, ESM with explicit `.js` import extensions. Validate
+  every request with a **zod** schema from `server/schemas.ts` (add new contracts there so
+  they're unit-testable). Every query is **`user_id`-scoped and parameterised**. Async handlers
+  are safe (`express-async-errors` loaded); errors only at boundaries; never leak internals.
+- **Dates** are local calendar strings end to end — don't add UTC conversions (`db.ts` keeps
+  the DATE type a raw string on purpose).
+
+## Definition of done
+1. `npm run typecheck` clean.
+2. `npm test` (+ `npm --prefix client test` for client work) green.
+3. `npm run build` if you touched the build surface.
+4. Spawn `/reviewer`; fix every critical/major.
+5. Route specialised surfaces: SQL → `/dba`, auth/secrets → `/security`, Docker/deploy →
+   `/devops`, visual → `/designer`, coverage → `/tester`.
+
+## Autonomy
+Trivial one-liner → just do it. Non-trivial → short plan, one check-in, execute, show result.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/principal/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: principal
+description: Orchestrator and tiebreaker for Time Machine. Reads the request, picks the right agents, chains them, integrates results. Use when you don't know which agent to call.
+---
+
+# /principal — orchestrator
+
+You are the principal engineer on **Time Machine**, a single-user daily task-log
+(Vite+React+TS client · Express+TS server · shared Postgres `time_machine` · Synology NAS at
+`time-machine.mycloud.dp.ua`). Read `CLAUDE.md` for the full map before routing.
+
+## How to work
+1. **Restate** the request in one line and name the surfaces it touches.
+2. **Route** to specialists (spawn via the Agent tool, or advise the user to run the slash):
+   | Surface | Agent |
+   |---|---|
+   | data model / SQL / `initDB` / indexes | `dba` |
+   | client or server code | `engineer` (auto-spawns `reviewer`) |
+   | layout / visual / the daily-list feel | `designer` |
+   | auth / secrets / `.env` / public exposure / CVEs | `security` |
+   | Docker / compose / deploy scripts / reverse proxy | `devops` |
+   | vitest / smoke tests | `tester` |
+   | "should we / trade-off / new dep / schema shape" | `architect` (ADR first) |
+   | README / SETUP / CLAUDE.md | `docwriter` |
+3. **Integrate** each agent's `## Next` into one coherent result. Resolve conflicts; the
+   simplest option that preserves the invariants wins.
+
+## Autonomy
+- **Trivial** (one file, deterministic, no schema/deploy/auth surface) → just do it, one-line summary.
+- **Non-trivial** → write a short plan, check in once, execute, show the result, check in once.
+  Auto-spawned chains skip check-ins — you already hold the user's intent.
+
+## Guardrails
+Keep it **simple and not-kanban**. Never change the shape of existing DB columns, touch
+secrets, or deploy to the NAS without explicit sign-off. End with a summary + `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/reviewer/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: reviewer
+description: Code review for Time Machine — auth/scoping, SQL safety, React hooks, TS strictness, timezone-safe dates, edge cases. Auto-spawned by /engineer; also invoke directly.
+---
+
+# /reviewer — code review
+
+Review code for **Time Machine** (see `CLAUDE.md`). **Never edit** — return findings ranked
+critical → major → minor, each with `file:line` and a concrete failure scenario.
+
+## Checklist (priority order)
+1. **Security/correctness**
+   - Every protected route behind `requireAuth`; every query scoped by `user_id`.
+   - SQL fully parameterised — no interpolation of user input anywhere.
+   - zod validates each body/query; bad input → 400, not a 500 or a silent pass.
+   - `done_at` is set/cleared together with `done`; rollover + reorder run in a transaction.
+2. **React** — hook dependency arrays, no stale closures, stable `key`s, optimistic-update
+   rollback on failure, no direct state mutation, effects clean up (StrictMode double-invoke safe).
+3. **TypeScript** — strict; no unjustified `any`; `noUncheckedIndexedAccess` honoured.
+4. **Dates** — local `YYYY-MM-DD` preserved; no accidental `new Date(iso)` UTC parsing.
+5. **Edge cases** — empty day, very long lists, 401 after session expiry, network-failure
+   branches in the client, concurrent toggles.
+
+Confirm `npm run typecheck` + `npm test` pass. Flag (don't fix) anything touching schema shape,
+secrets, or deploy — route those to `/dba`, `/security`, `/devops`. End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/security/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: security
+description: AppSec auditor for Time Machine — single-user auth on a public domain, secrets/.env hygiene, input validation, CMS-free XSS surface, dep CVEs. Audits before merge; never edits.
+---
+
+# /security — AppSec
+
+Audit **Time Machine** (see `CLAUDE.md`). It's a **single-user app on a public domain**, so the
+login *is* the perimeter. Report findings; **never edit code**.
+
+## Audit surface
+- **Auth boundary** — every `/api/tasks*` route behind `requireAuth`; signed cookie-session
+  (`SESSION_SECRET`); `secure` cookie in prod (needs `trust proxy` + HTTPS via the reverse
+  proxy); login **rate-limited**; bcrypt compare runs even for unknown users (no timing oracle,
+  no username enumeration).
+- **Secrets** — `.env` gitignored, never baked into an image; synced to the NAS over SSH
+  (encrypted) by `npm run deploy` and read at runtime via compose `env_file`; no secret in logs
+  or error responses; nothing secret ever gets bundled into the client (same-origin, no
+  build-time injection).
+- **Input / IDOR** — zod on every body/query; SQL parameterised; `user_id` scoping on every row.
+- **XSS/headers** — helmet CSP is `'self'`; titles render as React text (no
+  `dangerouslySetInnerHTML`). Keep both.
+- **Dependencies** — `npm audit` on root + client; flag high/critical with the upgrade path.
+
+## Output
+Ranked findings (critical → minor), each with file:line, impact, and a fix owner. Hand fixes to
+`/engineer` / `/dba` / `/devops`. End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/tester/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: tester
+description: Test infra + writing/running for Time Machine — vitest (server schemas + client dates/components), the create-db→boot→exercise→truncate smoke pattern. Distinguishes flaky from real.
+---
+
+# /tester — tests
+
+Own tests for **Time Machine** (see `CLAUDE.md`).
+
+## Suites
+- **Server** — `vitest` (node env, `vitest.config.ts`). Pure/contract tests; the natural seam
+  is `server/schemas.ts` (zod) and any extracted pure helper. DB-free, fast, deterministic —
+  this is the deploy gate (`npm test`).
+- **Client** — `vitest` (jsdom, `client/vite.config.ts`). `lib/dates.ts` (timezone-safe math)
+  and component behaviour via `@testing-library/react`: add / toggle / delete / rollover, and
+  optimistic-update rollback with a mocked `lib/api`.
+
+## Full-stack smoke (when correctness spans the DB)
+Follow `docs/SETUP.md`: create the DB → spawn `dist/index.js` against it → drive the API with a
+cookie jar (remember cookie-session sets **two** cookies — capture both via `getSetCookie()`) →
+assert → **TRUNCATE cleanup**. Never leave rows in the real DB; never point a destructive test
+at another database on the shared server.
+
+## Discipline
+Write the minimum meaningful test, run it, and separate real failures from flakes (re-run,
+inspect). Hand regressions to `/engineer` or `/dba`. Propose new infra before bootstrapping it.
+End with `## Next`.
+
+## Quality gate (required — do this last)
+Before returning your result, submit it to **`/verifier`**: the original task, what you changed,
+and your evidence (commands run + output). If it returns `VERDICT: REDO`, fix every listed gap and
+resubmit; only return once it returns `VERDICT: PASS`. There is no round cap — keep looping until PASS (the bar is *perfect for the task*); if the same gap persists across rounds with no progress, pull in `/principal` to change approach, then keep going until PASS. Never skip this (`/verifier` itself is exempt, to avoid recursion).

.claude/skills/verifier/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: verifier
+description: Universal quality gate for Time Machine — every agent's result passes through here before returning. Independently checks the work against the task + invariants and returns PASS or REDO with ordered fixes. Read-only; never edits; never recurses.
+---
+
+# /verifier — the quality gate
+
+You are the **verifier**, the final acceptance gate for the whole team (see `CLAUDE.md`). Every
+other agent submits its result to you before it may return; you decide `PASS` or `REDO`. You
+**never edit code** and you **never call another verifier**.
+
+## Submission you expect
+1. The **original task / user intent** (verbatim if possible).
+2. **What changed** — files touched, decisions made.
+3. **Evidence** — the exact commands run and their output.
+
+Missing any of the three → `REDO` ("show task, diff, and passing evidence").
+
+## The rubric — verify each; re-run, don't trust
+1. **Task fit** — does it satisfy *all* of the ask? Dropped requirements or scope drift → REDO.
+2. **Correctness & evidence** — reproduce the checks yourself: `npm run typecheck`, `npm test`
+   (+ `npm --prefix client test`), `npm run build`, `bash -n` for scripts, a DB/API smoke
+   (create-db → boot `dist` → exercise → TRUNCATE cleanup). Unproven claim → REDO.
+3. **Invariants** (`CLAUDE.md`) — single-user; not kanban; additive-only self-bootstrapping
+   schema; `user_id`-scoped, parameterised SQL; local `YYYY-MM-DD` dates; CSS tokens only;
+   secrets never bundled/baked; port **3099**; no unapproved dependency / schema reshape / deploy.
+4. **Completeness** — no half-done work, stray TODOs, or docs/tests left behind.
+5. **Simplicity** — matches existing patterns; no over-engineering.
+6. **Alternatives weighed** — for a non-trivial design/impl choice, the agent must have compared
+   **at least one credible alternative** and justified the pick on trade-offs (cost, bundle,
+   migration, invariant fit, reuse). One approach with no comparison → REDO: send it back to weigh
+   the named alternative(s) (a lighter dep, a different data shape, reusing an existing
+   endpoint/pattern, a no-code option) as a short options table (approach · pro · con · why-not).
+   Trivial mechanical changes are exempt.
+
+## Adversarial stance — try to BREAK it, default to REDO under doubt
+A gate that always PASSes is worthless — *falsify* the claim, don't confirm it:
+- **Attempt to break the change** — name at least **2–3 concrete failure scenarios** you tried
+  (input/state → observed output): empty/oversized value, another user's row, a date-boundary/TZ
+  case, a 401/500 path, a concurrent write, a stored-XSS payload. "Looks right" is not verification.
+- **Reproduce, don't relay** — re-run the commands yourself for anything non-trivial; a PASS resting
+  only on the agent's quoted output is a REDO.
+- **Default to REDO under uncertainty** — a check you couldn't reproduce, or a plausible failure you
+  couldn't rule out, is a REDO. The burden of proof is on the work.
+- **Rubber-stamp red flags (any → do more before PASS):** nothing re-run; zero failure scenarios
+  tried; verdict restates the agent's claims; "looks fine / should work"; "proportional" used to
+  skip probing a real auth/schema/deploy/XSS surface.
+One-liners still get one real check, not three attacks — but never let "proportional" excuse leaving
+a load-bearing change unprobed.
+
+## Audit log — REQUIRED on every verdict
+After deciding, append one line to `claude_artifacts/verifier-log.md` (create if missing) via Bash,
+so every check is recorded — PASS or REDO. It's the ONE file you may write (it records judgement,
+never edits the reviewed work); never rewrite earlier entries. Format:
+
+    printf '%s\n' "- $(date '+%Y-%m-%d %H:%M') · <agent> · <task ≤10 words> · VERDICT: <PASS|REDO> · re-ran: <commands+result> · probed: <failure scenarios> · <PASS | REDO: N gaps>" >> claude_artifacts/verifier-log.md
+
+## Verdict (end with exactly one)
+- **`VERDICT: PASS`** — state **both** the commands you re-ran (+results) and the failure scenarios
+  you probed (+how they held); a PASS with no probe listed is not yet a PASS. Then append the log line.
+- **`VERDICT: REDO`** — a numbered, prioritized list (most critical first): each gap, where it is
+  (file:line / failing command / missing case), and how to fix it. Then append the log line.
+
+## Discipline
+Be **proportional** — a one-line change gets a quick check; schema/deploy/auth/security gets the
+full rubric. Read-only: return the job, never fix it. There is **no round cap** — keep returning
+`VERDICT: REDO` until the work genuinely passes. If the same gap survives several rounds with **no
+progress**, add `## Escalate: principal` so principal can change the approach — to get unstuck and
+continue toward PASS, never to give up. Hold the bar at *perfect for the task* — approve because
+it's right, not because it's close.

.deploy.env.example

@@ -0,0 +1,10 @@
+# OPTIONAL per-machine deploy overrides for `npm run deploy` (scripts/push-to-nas.sh).
+# The script already has baked-in defaults for the FORGE NAS, so this file is only
+# needed to override them. Copy to `.deploy.env` (gitignored) and uncomment what
+# you need. Holds NO app secrets — the app's `.env` lives on the NAS.
+
+# NAS_HOST=mycloud.dp.ua             # NAS hostname (public host; or a LAN IP like 192.168.50.2)
+# NAS_USER=d.tkachenko              # SSH user on the NAS
+# NAS_PORT=2323                      # Synology SSH port
+# NAS_PATH=/volume1/docker/forge     # deploy dir on the NAS (must contain the NAS .env)
+# NAS_KEY=$HOME/.ssh/id_ed25519      # SSH private key (IdentitiesOnly is pinned)

.dockerignore

@@ -0,0 +1,18 @@
+node_modules
+client/node_modules
+dist
+client/dist
+.git
+.env
+.env.*
+*.log
+.DS_Store
+# macOS AppleDouble sidecars — NUL-byte xattr files that break esbuild if copied.
+**/._*
+._*
+storage-dump.json
+.deploy.env
+claude_artifacts
+extension
+README.md
+docs

.env.example

@@ -0,0 +1,36 @@
+# FORGE — environment template. Copy to `.env` and fill in.
+# `.env` is gitignored and never baked into a Docker image (compose reads it at runtime).
+#
+# LOCAL DEV: set DATABASE_URL + SESSION_SECRET + AUTH_USER/PASS below.
+# PRODUCTION (Synology / docker compose): compose OVERRIDES DATABASE_URL, PORT and
+#   NODE_ENV itself; the .env on the NAS only needs the *** REQUIRED IN PROD *** vars:
+#   SESSION_SECRET, AUTH_USER, AUTH_PASS, POSTGRES_PASSWORD.
+
+# --- Database -------------------------------------------------------------
+# Postgres for the `forge` database. Schema self-bootstraps (initDB) + seeds on
+# first run. LOCAL DEV only — in compose this is set to the bundled `db` service.
+DATABASE_URL=postgresql://forge:forge@localhost:5432/forge
+
+# HTTP port the server listens on (container-internal; compose maps it to host 3089).
+PORT=3000
+
+# development locally; compose sets production on the NAS.
+NODE_ENV=development
+
+# --- Read-API auth (*** SESSION_SECRET/AUTH_PASS REQUIRED IN PROD ***) -----
+# Session signing secret. Generate with:  openssl rand -base64 32
+SESSION_SECRET=change_me_generate_with_openssl_rand_base64_32
+
+# Bootstrap admin account, seeded into app_users on first boot (bcrypt-hashed, role
+# admin). Changing AUTH_PASS later does NOT update an already-seeded account — manage
+# users in the app (Admin → Users) instead.
+AUTH_USER=admin
+AUTH_PASS=change_me
+
+# --- Postgres (compose bundled db — *** REQUIRED IN PROD ***) --------------
+# The bundled Postgres password used by docker-compose. Use a strong value in prod.
+POSTGRES_PASSWORD=change_me_strong_db_password
+
+# Sync tokens for the Chrome extension are created in the app (Admin → API Tokens,
+# admin only) or via the CLI:  npx tsx server/mint-token.ts "my laptop"
+# (The old ADMIN_KEY HTTP gate was removed — tokens are now admin-role gated.)

.gitignore

@@ -0,0 +1,31 @@
+/tmp
+/out-tsc
+
+# dependencies
+node_modules
+/client/node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.pnp
+.pnp.js
+
+# build output
+/dist
+/client/dist
+
+# env / secrets
+.env
+.env.local
+.env.*.local
+
+# raw Let it Snow storage dump — a dev artifact with real PII, not an app input.
+# Convert it to the seed archives with `npm run dump-to-archives` instead.
+storage-dump.json
+
+# editor
+.vscode/*
+.DS_Store
+
+# NAS deploy config (not secret, but host-specific)
+.deploy.env

CHANGELOG.md

@@ -0,0 +1,145 @@
+# Changelog
+
+All notable changes to **FORGE** are documented here.
+Format based on [Keep a Changelog](https://keepachangelog.com/); this project uses
+[Semantic Versioning](https://semver.org/).
+
+## [2.3.0] — 2026-08-27
+
+### Added
+- **Jira status durations (chart #17)** — a new "Jira status durations (avg days)"
+  chart on the Active-stats page: average time each Jira workflow status is held,
+  in the board's column order, min-2-tickets. Server endpoint
+  `GET /api/analytics/jira-durations` (PM+) aggregates `jira.statusDurations` (ms)
+  across tickets.
+- The extension's Jira collector now fetches each issue's **changelog**
+  (`expand=changelog`) and computes **`statusDurations`** (time per status) +
+  **`movements`** (`{at, who, from, to}`), sent inside the `jira` object.
+- Seed enrichment: `statusDurations` + the Jira **workflow column order** are ingested
+  from the dump's `jira_board_state` (so the chart is populated before any live sync —
+  73 seeded tickets carry durations). `JiraInfo` type extended with `statusDurations`/`movements`.
+
+## [2.2.0] — 2026-08-27
+
+### Added
+- **Jira sync in the extension** (per the sync ADR). One "Sync now" now refreshes
+  **SNOW then Jira**: SNOW stays as the in-page same-origin session collector →
+  `/api/sync`; Jira is pulled by a new service-worker collector via **direct REST**
+  (`/rest/agile/1.0/board/{id}/issue`) authenticated with a **Jira API token** —
+  Basic (email+token, Cloud) or **Bearer PAT** (Server/DC, e.g. `support.dataart.com`).
+  Issue links are built as `<baseUrl>/browse/<KEY>` (custom Jira domains supported).
+- New extension options: Jira base URL, email, API token/PAT, and board id(s).
+- New server endpoint **`POST /api/sync/jira`** — **attach-only**: updates only the
+  `jira` JSONB (merged) + `jira_key` on existing tickets, keyed by RITM number; never
+  touches status/state/assignee/activity (avoids the ticket-upsert clobber). Token-authed.
+  Jira RITM↔issue resolved via `customfield_26001` or a `RITM\d+` regex; Jira failures are
+  best-effort and never fail a successful SNOW sync.
+
+
+
+### Added
+- **Polished Excel export** — the board's Excel export is now filterable and readable:
+  the **ticket Number is a clickable ServiceNow hyperlink** (a real OOXML hyperlink
+  relationship — locale-proof, unlike a `HYPERLINK()` formula which breaks in `;`-locale
+  Excel), **auto-filter** on every column, **zebra-striped rows**, taller rows + wider
+  columns, a frozen indigo header, right-aligned numbers, `#,##0` cost, short dates, and
+  a **dated filename** (`forge-active-tickets-YYYY-MM-DD.xlsx`). The standalone Link column
+  was folded into the Number cell. (auto-filter + hyperlinks injected via `fflate`.)
+- App **favicon** (indigo snowflake) + `theme-color`.
+- A proper **Excel-brand button icon** (green tile) replacing the placeholder glyph.
+
+### Changed
+- RITM number links out to ServiceNow in the ticket table + board cards (new tab).
+- Deploy: ported Husky's `push-to-nas.sh` + on-NAS `deploy.sh` (SSH key pinning,
+  openrsync→tar fallback, Synology PATH/sudo, health poll, `forge-db` volume preserved
+  on `--fresh`); macOS AppleDouble (`._*`) files excluded from sync/build/tests.
+
+### Dependencies
+- Added `fflate` (xlsx auto-filter post-processing). `write-excel-file` pinned at 2.x
+  (v4 drops the default export + still has no hyperlink support).
+
+## [2.0.0] — 2026-08-27 · **FORGE 2.0**
+
+The analytics release. FORGE grows from a ticket board into a full ServiceNow
+analytics portal ported from the *Let it Snow* Chrome extension, with role-based
+access, admin tooling, and the complete statistics suite.
+
+### Added
+- **Full analytics data ingest.** The seed now loads the entire `analytics_data`
+  master (954 ticket records) merged with the operational cache, plus SLA norms,
+  FX rates, size thresholds, brand palette, and the colleague roster. New ticket
+  columns (all additive): `currency_code, opened_by, opened_date, closed_date,
+  to_do_at, in_uat_at, jira_key, ticket_year, size, po_number, invoiced`. A
+  reproducible `dump-to-archives` → `reseed` pipeline regenerates seed data from a
+  storage dump. `app_config` key/value table for norms/thresholds/palettes.
+- **Server analytics engine** (`server/analytics.ts`, `server/insights.ts`):
+  `/api/analytics/overview`, `/api/analytics/sla`, `/api/insights`, `/api/config`.
+- **Overall statistics** page — year-overlay grouped bars (opened/closed/revenue,
+  bars↔line + YoY%), a Cost↔Tickets toggle, a ticket-share donut (#/% + top-N),
+  brand→market and requester→brand drill-downs, KPI tiles, lifetime histogram.
+- **Active statistics** page — by-status, age distribution, opened-per-month,
+  median days-in-status, by-brand.
+- **PM KPIs — SLA** page — six PM×size heatmaps (TTFR, PM response, avg-close,
+  OTD, assign, preview) scored against per-size norms, green/red vs target.
+- **PM Insights** page — problem/alert KPIs over the active backlog (unassigned,
+  on-hold, WIP-stalled, customer-replied, awaiting, lifetime, inactive), Jira-breach
+  and client-owed rules, waiting-PO with L1/L2/L3 escalation, revenue-at-risk, and
+  a per-PM roll-up. (Rev-at-risk matches the initial app's own figure within rounding.)
+- **Board redesign** — 7-state kanban (Unassigned → Open/Assigned → On Hold → WIP →
+  Customer replied → Awaiting) with the WIP→"Customer replied" pseudo-status, SLA
+  subtitles, per-column counts, brand/market/PM filters, board/list toggle, and a
+  ticket detail modal.
+- **Role-based access control** — four roles (Viewer, PM, Project Leadership, Admin)
+  enforced server-side per route; the client hides nav/pages above a user's role.
+  Only admins can create admins.
+- **Admin page** — user management (Project Leadership+) and API-token management
+  (Admin only): create/list/revoke `fg_…` sync tokens from the UI.
+- **Filtered Excel export** — the board's ⭳ Excel button exports the currently
+  filtered tickets as a styled `.xlsx` (branded indigo frozen header, per-column
+  widths, right-aligned numbers, `#,##0` cost, short dates, grid borders).
+- **Finance ingest** — cost + PO + invoiced per ticket from the finance sheet,
+  enriching active tickets with cost/size and powering waiting-PO.
+- Config bundle exposed via `/api/config` (brand colours, colleagues, norms, FX).
+
+### Changed
+- All analytics pages are **full-width** (removed the 1280px cap).
+- `/api/tokens` is now gated by the **admin session role** instead of an `ADMIN_KEY`
+  header. The `mint-token` CLI is unchanged.
+- Non-destructive sync upsert: a thin sync no longer nulls seeded-rich fields
+  (`COALESCE`/`CASE` preserve brand/market/description/jira/activity/analytics).
+
+### Fixed
+- `due_date` timezone off-by-one (emit local `YYYY-MM-DD`, not `toISOString()`).
+- Activity render-crash vector (ingest sanitizes activity entries; `parseDate` guards).
+- Seed "active wins" ordering on tickets present in both archives.
+- Ticket-share donut used a truncated distribution (center 375); now the full 966.
+
+### Security
+- Read-API authentication (session, username+password, bcrypt, Postgres session store).
+- Least-privilege database role (`forge_app`, not a superuser) owns the app tables.
+- API tokens: `fg_<id>_<secret>`, only the SHA-256 stored, constant-time verify,
+  revocable; `token_hash` never leaked by the list endpoint.
+- RBAC hardening (post-audit): only an admin can delete an admin; the **last admin**
+  cannot be deleted (lockout guard); deleting a user **purges their sessions**; the
+  session id is **regenerated on login** (anti session-fixation); delete of a missing
+  user returns 404.
+
+## [1.0.0] — 2026-08-27
+
+Initial full-stack scaffold, ported from the *Let it Snow* Chrome extension onto the
+*Husky repo list* template.
+
+### Added
+- Vite + React 18 + TypeScript client (SCSS modules, react-router) with a Sidebar/
+  TopBar layout; Active board, Closed, and basic Statistics pages.
+- Express + TypeScript server on Postgres (`forge`); self-bootstrapping schema
+  (`initDB`) that seeds bundled ticket archives on first boot.
+- REST API: `/api/tickets`, `/api/tickets/:number`, `/api/stats`, `/healthz`, and a
+  token-authed `/api/sync` ingest.
+- Chrome sync extension ("FORGE Snow Sync") — reads active RITM tickets from the
+  ServiceNow Table API and pushes them to the portal with a bearer token.
+- Multi-stage Dockerfile + docker-compose (bundled Postgres) targeting
+  `forge.mycloud.dp.ua`; README + SETUP docs.
+
+[2.0.0]: #200--2026-08-27--forge-20
+[1.0.0]: #100--2026-08-27

Dockerfile

@@ -0,0 +1,56 @@
+# syntax=docker/dockerfile:1.7
+#
+# FORGE — multi-stage build. Two sub-builds feed one slim runtime:
+#   - client (Vite/React) -> client/dist   (static assets)
+#   - server (tsc)        -> dist/index.js  (Express API + static server)
+#
+# Base pinned to a specific patch; bump deliberately. The runtime carries only
+# prod deps (`--omit=dev`) + the two build outputs, and runs as the non-root
+# `node` user.
+
+FROM node:20.19.6-alpine3.21 AS base
+
+# --- Stage 1: client build --------------------------------------------------
+FROM base AS client-build
+WORKDIR /build/client
+COPY client/package.json client/package-lock.json* ./
+RUN npm install
+COPY client/ ./
+RUN npm test
+RUN npm run build
+
+# --- Stage 2: server build --------------------------------------------------
+FROM base AS server-build
+WORKDIR /build
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY tsconfig.json ./
+COPY index.ts ./
+COPY server/ ./server/
+RUN npx tsc
+
+# --- Stage 3: prod deps -----------------------------------------------------
+FROM base AS prod-deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install --omit=dev
+
+# --- Stage 4: runtime -------------------------------------------------------
+FROM base AS runtime
+WORKDIR /app
+ENV NODE_ENV=production \
+    PORT=3000
+
+COPY --from=prod-deps    --chown=node:node /app/node_modules ./node_modules
+COPY --from=server-build --chown=node:node /build/dist ./dist
+COPY --from=server-build --chown=node:node /build/server/data ./dist/server/data
+COPY --from=client-build --chown=node:node /build/client/dist ./client/dist
+COPY --chown=node:node package.json ./
+
+USER node
+EXPOSE 3000
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=20s --retries=3 \
+  CMD wget --spider -q http://localhost:3000/healthz || exit 1
+
+CMD ["node", "dist/index.js"]

README.md

@@ -0,0 +1,69 @@
+# FORGE
+
+A ServiceNow ticket dashboard for the *Marketing Web Presence* L3 queues —
+RITM/SCTASK requests pulled out of ServiceNow and shown as an operational board
+plus closed-ticket analytics. Ported from the **Let it Snow** Chrome extension
+into a full-stack web app, built on the shape of the *Husky repo list* template.
+
+```
+┌──────────────┐    Bearer token     ┌───────────────┐     Postgres
+│  Chrome ext  │ ──── POST /api/sync ─▶│  FORGE server │ ────────────▶  forge DB
+│ (Snow Sync)  │                      │  Express + TS │
+└──────────────┘                      └───────┬───────┘
+        ▲                                      │  serves
+   reads ServiceNow                            ▼
+   Table API in-page              ┌───────────────────────────┐
+                                  │  React client (Vite + TS) │
+                                  │  Board · Closed · Stats   │
+                                  └───────────────────────────┘
+```
+
+## Stack
+
+- **client/** — React 18 + Vite + TypeScript, SCSS modules, react-router. Three
+  views: **Active board** (filters, search, ticket detail + activity timeline),
+  **Closed** (cost / time-to-first-reply analytics), **Statistics** (distribution).
+- **server** (`index.ts` + `server/`) — Express + TypeScript on Postgres. Schema
+  self-bootstraps in `initDB()` and seeds the bundled ticket archives on first
+  boot. REST: `GET /api/tickets`, `/api/tickets/:number`, `/api/stats`, `/healthz`,
+  and a token-authed `POST /api/sync` ingest.
+- **extension/** — a Manifest V3 Chrome extension ("FORGE Snow Sync") that reads
+  active RITM tickets from the ServiceNow Table API and pushes them to the server
+  with an API token, exactly like the Husky sync extension.
+
+## Quick start (local)
+
+```bash
+# 1. a Postgres named `forge` (compose brings one up, or use your own)
+docker compose up -d db          # or point DATABASE_URL at any Postgres
+
+cp .env.example .env             # DATABASE_URL defaults to the compose db
+
+# 2. install + run both server and client with live reload
+npm install
+npm run dev                      # server :3000, client :5173 (proxies /api)
+```
+
+Open http://localhost:5173 and sign in with the `AUTH_USER` / `AUTH_PASS` you
+set in `.env` (the read UI is auth-gated; see [docs/SETUP.md](docs/SETUP.md#3-log-in-read-api-auth)).
+On first boot the server seeds the ticket archives
+in `server/data/*.json` (**100 active + 866 closed** after de-duping the ~99
+tickets that appear in both), so the board is populated before any real sync
+runs. Those archives are generated from a Let it Snow storage dump — see
+[docs/SETUP.md](docs/SETUP.md#seed-data) to regenerate them.
+
+## Production
+
+```bash
+docker compose up -d --build     # app on host :3099, bundled Postgres
+```
+
+Behind the Synology reverse proxy this is what **forge.mycloud.dp.ua** maps to.
+
+See **[docs/SETUP.md](docs/SETUP.md)** for the sync token + Chrome extension setup.
+
+## Tests
+
+```bash
+npm test        # client (vitest) + server (vitest)
+```

claude_artifacts/FORGE-parity-spec.md

@@ -0,0 +1,214 @@
+# FORGE parity spec — rebuilding "Let it Snow" on FORGE (Husky design)
+
+Deep-check of the initial app (`/Users/dmytrotkachenko/WebstormProjects/Let It Snow`)
+cross-referenced with `storage-dump.json` (its localStorage export) and the Husky
+design template. Goal: a **functionally near-identical** app under FORGE's stack
+(Vite+React+TS client · Express+TS server · Postgres `forge`) with a **new view**
+built from Husky's hand-rolled chart components.
+
+Sources: 6 discovery agents (analytics charts · KPI/SLA/finance · board behavior ·
+data inventory · Husky design · architecture docs). All findings self-verified.
+
+---
+
+## 0. Load-bearing architecture facts
+
+1. **Every board is a READ-ONLY mirror** rebuilt from storage by background scans.
+   No drag-and-drop write-back to ServiceNow/Jira anywhere (the ADO board has local
+   DnD only; the one write action is "Create Jira"). → FORGE keeps its model: the
+   Chrome extension scans and POSTs to `/api/sync`; the web app renders DB state and
+   links out to ServiceNow/Jira for changes. **No transitions to build.**
+2. **Single analytics source** in the app: `analytics_data` (954 `ticketsMeta` records
+   + precomputed aggregations). Everything else enriches it, joined on the **RITM number**.
+3. **No charting library** in either app — Let it Snow hand-rolls SVG/CSS; Husky does too.
+   FORGE rebuilds charts as Husky components (or a real lib if we choose; spec assumes Husky-style).
+4. **Money rule:** `finalCost = 0` means *absence of price, not free work* — never counts
+   as money, never gets a size, always a "missing cost" margin leak.
+5. **Currency:** display currency (default GBP); **fixed** cross-rates `1 GBP = 1.2 EUR = 20 MXN`.
+
+---
+
+## 1. Feature/view map (initial app)
+
+| Screen | Rebuild target in FORGE |
+|---|---|
+| Popup (RITM list + Jira tab) | N/A (extension already syncs; optional toolbar) |
+| **Dashboard: Kanban board + List view** | **Board page** (7-state columns, filters, card fields, list toggle) |
+| **Analytics panel — 3 tabs: Overall / Active / PMs KPI** | **3 analytics pages** (the bulk of "missing statistics") |
+| **PM Insights popup** (alert KPIs + drill-downs + Excel) | **Insights page** |
+| At-risk / AI Advisor | **OUT OF SCOPE** (user excluded AI) |
+| Jira board (read-only mirror) | **Jira board page** (later phase) |
+| Size CALC (labor→size estimator) | **Tool** (later phase) |
+| Figma links, Teams, Weather | out of scope / optional |
+
+Excluded per DEAD_CODE.md: `melody.js`, removed finance-filter UI, live-FX fetch,
+USD from FX cache, Assist/Jira bar-graph toggle (replaced by dual calendars).
+
+---
+
+## 2. Statistics / charts inventory (29) → Husky component mapping
+
+### TAB 1 — Overall (11)
+| # | Chart | Data | Husky component |
+|---|---|---|---|
+| 1 | Opened per month (grouped bars ±YoY, Brand/Market/CGO sub-group, bar/line) | `openedByMonth`/`ByDay`, `ticketsMeta` | new `GroupedBars` (from `MonthlyByUser`) + `TrendArea` |
+| 2 | Closed per month | `closedByMonth` | same |
+| 3 | Revenue per month (closed, cost/tickets, ±YoY) | `ticketsMeta.finalCost`+FX | `GroupedBars`/`TrendArea` |
+| 4 | Lifetime-at-close histogram (6 buckets) + median/avg/closed tiles | `ticketsMeta` open→close | `BucketBars` + `KpiTile`×3 |
+| 5 | Opened YoY pie (fair/full) | `openedByDay` | `StateDonut`/`DonutChart` |
+| 6 | Closed YoY pie | `closedByDay` | donut |
+| 7 | By business unit (per-year, brand drill-down) | `ticketsMeta.businessUnit` | `BucketBars` + expandable |
+| 8 | By requester (bars + YoY, market drill-down) | `byRequester` | `RequestorBars` + drill |
+| 9 | Ticket-share donut (#/%, top 18 + Others) | `byRequester` | `StateDonut`/`InsightChart` pie |
+| 10 | By brand (per-year segments, market drill, YoY) | `ticketsMeta.brand/market` | `BucketBars` segmented |
+| 11 | By market | same | `BucketBars` |
+
+### TAB 2 — Active (6) — from live board tickets (status='active')
+| # | Chart | Data | Husky component |
+|---|---|---|---|
+| 12 | Open-not-closed by month | active tickets | `TrendArea`/bars |
+| 13 | By status (6 kanban cats) | active | `BucketBars` (state colors) |
+| 14 | Age histogram (0-50…200+ days) | active openedAt | `BucketBars` |
+| 15 | Time-in-status min/median/max | active | grouped mini-bars |
+| 16 | By brand, status-segmented (market drill) | active | stacked `BucketBars` |
+| 17 | Jira status durations (workflow order) | `jira_status_map.statusDurations` | `BucketBars` ordered |
+
+### TAB 3 — PMs KPI (12)
+| # | Chart | Data | Husky component |
+|---|---|---|---|
+| 18 | Workload by month (revenue, prev/cur yr, per-PM) | `ticketsMeta` closed cost | `GroupedBars` + `MonthlyByUser` |
+| 19 | PM Engagement (backlog/Assist✓/Jira✓/Stale) + **dual daily-activity heatmaps** | live `meta.activity` + `jira movements` | `AssigneeBars` + **new `CalendarHeatmap`** |
+| 20 | Missing final cost (ranked PM bars + drill) | `ticketsMeta.finalCost` null | `AssigneeBars` + list |
+| 21 | Awaiting PO (ranked, Cost/Avg-d/Max-d, sortable) | finance PO + `sn_waiting_po_meta` + Jira | `AssigneeBars` + table |
+| 22 | No-cost by brand/market | derived | `BucketBars`×2 |
+| 23 | Awaiting-PO by brand/market | derived | `BucketBars`×2 |
+| 24 | **On-Time Delivery** heatmap (PM×size, cur+prev yr) + editable norms | close-days vs `otd_day_norms` | **new `KpiHeatmap`** |
+| 25 | **Avg days to close** heatmap | vs `avgdays_day_norms` | `KpiHeatmap` |
+| 26 | **Time to assign PM** heatmap | `firstAssignedDate` vs `asla_day_norms` | `KpiHeatmap` |
+| 27 | **Time to send preview** heatmap | `inUatAt` vs `psla_day_norms` | `KpiHeatmap` |
+| 28 | **Avg TTFR** heatmap | `ttfrMinutes` vs `lisr_ttfr_norms` (hrs) | `KpiHeatmap` |
+| 29 | **Avg PM response** heatmap | `clientRespMinutes` vs `lisr_cresp_norms` | `KpiHeatmap` |
+
+**New components needed** (not in Husky): `KpiHeatmap` (PM×size grid vs norms, green/red),
+`CalendarHeatmap` (GitHub-style daily activity), `GroupedBars` (multi-year month bars — extend `MonthlyByUser`), a period/granularity control (year/quarter/month + ±YoY).
+
+### KPI definitions (SLA grid #24–29)
+- **TTFR** = `ttfrMinutes/1440` (days), anchor `openedDate`, norm hours.
+- **PM response (cresp)** = `clientRespMinutes/1440`, anchor `openedDate`. (Our reply speed, not client wait.)
+- **Avg close** = `daysBetween(opened, closed)`, anchor `closedDate`.
+- **OTD** = same duration scored vs `otd_day_norms`; on-time% = onTime·100/scored.
+- **Assign SLA** = `max(0, daysBetween(fulfillment, firstAssigned))`, anchor `fulfillmentDate`.
+- **Preview SLA** = `daysBetween(toDoAt, inUatAt)`, anchor `inUatAt`.
+- Grid cell = `{avgDays, count, onTime, onTimePct}`, per PM×size; "No cost" column norm = 1d.
+- Periods: current vs previous Year, and Q1–Q4 each.
+
+---
+
+## 3. PM Insights alert KPIs (the Insights page)
+
+Thresholds `insights_thresholds` (days): `unassigned:1, assigned:2, hold:5, wip:7,
+customerReplied:3, awaiting:7, lifetime:90, jiraStuck:7, jiraUAT:7, noChase:5,
+waitingPo1:7, waitingPo2:14, waitingPo3:21`.
+
+Alert lists: Unassigned · Open/Assigned-long · On-Hold (age OR jiraBreached OR clientOwed)
+· WIP-stalled (Jira age) · WIP-no-Jira · Customer-replied · Awaiting-info · Lifetime-monsters
+(≥90d) · Inactive-requester · **∑ Total Alerts**. Waiting-PO with L1/L2/L3 escalation +
+`waitingPoRevenue`. PM-KPI table: **# Tickets · $ Revenue · ⚠ Rev-at-Risk** (sortable,
+hidden PMs from `pm_kpi_settings`). Excel export preserves PM→Size→Ticket grouping.
+
+Support rules: `_jiraBreached`, `_clientOwed` (client replied last ≥1d), `_isAwaitingAgency`
+(WIP + last touch by client → "Customer replied").
+
+---
+
+## 4. Board page (7-state kanban + list)
+
+Columns (fixed order): **Unassigned → Open/Assigned → On Hold → [WIP · Customer-replied ·
+Awaiting]* → Closed/Awaiting-PO**. `*` middle-3 reorderable via group-by (6 perms).
+- **Customer-replied** is a pseudo-status: WIP ticket where `lastActivityBy` ∉ colleague roster.
+- Column SLA subtitles ("assign within Nd", "max Nd in progress", …); per-column count.
+- Filters: search, brand, market, assignee(+region EU/LATAM sentinels), requester, custom-label,
+  jira-assignee, jira-status, staleness (stale/updated/inactive/PO/jira-stuck/missing-cost), hide-empty, hide-cost.
+- Sort (14): default/number/status-age/lifetime/jira/brand/cost/due/analyzed.
+- **16 toggleable card fields** (`card_fields`): stateBadge, shortDesc, description, assignee,
+  group, brand-market pill, raisedBy, lifetime, dueDate, stateChanged, lastActivity, comments,
+  createJira, jiraStatus, jiraBar, teamsLink.
+- Card click → opens ServiceNow in new tab (no in-app transition). List view = same data as table.
+- Waiting-PO detection: synthetic closed card OR Jira "Waiting PO" OR empty PO cell in finance Excel.
+
+---
+
+## 5. Data contract — what to ingest (fixes "not all statistics moved")
+
+FORGE currently seeds only 3 dump keys (`sn_tickets`, `analytics_meta_cache`, `jira_status_map`
+→ 966 tickets). The analytics engine needs the **full** dump:
+
+| Dump key | Rows | Feeds |
+|---|---|---|
+| **`analytics_data.ticketsMeta`** | **954** | THE analytics dataset (SLA/cost/jira/dates) — charts 1-11,18-29 |
+| `analytics_data.{openedByMonth,closedByMonth,openedByDay,closedByDay}` | — | time-series (or recompute server-side) |
+| `analytics_data.byRequester(Numbers)` | 280 | requester/brand/market drill-downs |
+| `analytics_meta_cache` | 965 | closed-ticket enrichment |
+| `sn_tickets` | 100 | active board + activity timeline |
+| `sn_waiting_po_meta` | 884 | waiting-PO backlog |
+| `jira_status_map` | 127 | RITM↔Jira, statusDurations |
+| `jira_board_state`/`snapshot` | 1045 | Jira board page |
+| `finance_xlsx_data` | 1128 | PO/invoicing/milestones |
+| `insights_thresholds`, `pm_kpi_settings` | — | insights + PM roster |
+| `fx_rates_cache`, `lis_size_calc_cfg` | — | FX + size model |
+| `brand_colors`, `snow_colors`, `sn_states_order` | — | palettes + column order |
+| windowLocalStorage `*_norms` (psla/otd/ttfr/cresp/avgdays/asla) | — | SLA target lines |
+
+**Ticket master fields** (from `ticketsMeta`): `number, shortDesc, state, year, brand, market,
+businessUnit, assignedTo, openedBy, openedDate, closedDate, firstAssignedDate, firstReplyAt,
+fulfillmentDate, toDoAt, inUatAt, ttfrMinutes, clientRespMinutes, finalCost, currencyCode, jiraKey`.
+
+**Coverage:** ~24 months (2024-08 → 2026-08); 45 brands, 41 markets, 8 BUs, 10 PMs, 280 requesters;
+GBP/EUR/MXN. Data-quality: businessUnit casing dupes, currency blanks/junk ("NO"/"PART"),
+"(Inactive)" suffixes, finalCost is a string, two date formats — **normalize on ingest**.
+
+---
+
+## 6. Design mapping (Husky as template)
+
+- **Stack/tokens:** Husky's SCSS-module system, `:root` tokens, `card`+`mono-label`+`srOnly`
+  skeleton, `useInView`+`useCountUp` reveal hooks. Component = folder (`index.tsx` + `.module.scss`).
+- **Reuse verbatim:** `KpiTile`, `StateDonut`, `BucketBars`, `AssigneeBars`, `RequestorBars`,
+  `TrendArea`, `MonthlyByUser`, `InsightChart`, plus `Stats`-page archetypes (`ActivityList`,
+  `IssuesBySeverityCard`, `DonutCard`).
+- **Build new (Husky-styled):** `KpiHeatmap`, `CalendarHeatmap`, `GroupedBars`, period control.
+- **Palettes:** size `{XS:#14b8a6,S:#1a73e8,M:#f59e0b,L:#10b981,XL:#8b5cf6,XXL:#ef4444}`;
+  year `['#f97316','#1a73e8','#16a34a','#dc2626','#7c3aed']`; state colors per §4; brand from `brand_colors`.
+- **FORGE already uses the indigo palette** (`#6366f1`) matching Let it Snow's `UI.primary` — keep it,
+  or adopt Husky's Fluent blue. **DECISION NEEDED.**
+
+---
+
+## 7. Phased build plan
+
+- **Phase 0 — Full data ingest (foundation).** Extend `dump-to-archives` + schema/seed to load
+  `analytics_data.ticketsMeta` (954) + finance + waiting-PO + jira board + thresholds + norms +
+  size cfg + palettes. Normalize dimensions. This alone restores the data behind every stat.
+- **Phase 1 — Server analytics engine.** Compute aggregations from the DB (opened/closed by
+  month/day, byRequester/brand/market/BU, revenue/month, lifetime buckets, the 6 SLA metrics
+  PM×size, missing-cost, waiting-PO, engagement). Expose `/api/analytics/*`. Tests.
+- **Phase 2 — Overall tab (charts 1-11).** New view on Husky components.
+- **Phase 3 — Active tab (12-17) + Board page redesign** (7-state, filters, card fields, list).
+- **Phase 4 — PMs KPI tab (18-29):** `KpiHeatmap` + editable norms + engagement + `CalendarHeatmap`.
+- **Phase 5 — PM Insights page** (alerts, drill-downs, Excel export).
+- **Phase 6 — Jira board page · Size CALC · finance detail** (as desired).
+
+Each phase: engineer→reviewer→verifier; dba for schema; designer for new components.
+
+---
+
+## 8. Decisions to resolve before/within the build
+
+1. **Size algorithm** — three coexist (nearest-nominal / largest-fits / Excel-MATCH). Pick one
+   (recommend **composite** for cards, as the app defaults). 
+2. **`psla_day_norms` default mismatch** (dashboard `{XS:1…XXL:15}` vs collector `{XS:3…XXL:30}`). Pick one.
+3. **FX** — keep fixed GBP-base rates (recommended; live-fetch was retired).
+4. **Palette** — keep FORGE indigo, or switch to Husky Fluent blue.
+5. **Scope of charts for v1** — all 29, or the high-value subset first (recommend Overall + SLA heatmaps).
+6. **Brand naming** — popup says "FORGE Tasks", product "Let it Snow" → FORGE.
+7. **Boards** — SNOW board is core; Jira/ADO boards are later/optional.

claude_artifacts/INDEX.md

@@ -0,0 +1,22 @@
+# Artifact index
+- [engineer-20260827-190753](engineer-20260827-190753.md) — Jira statusDurations+movements + chart #17 (Active tab), /api/analytics/jira-durations, seed-enriched from board_state. v2.3.0.
+- [engineer-20260827-185932](engineer-20260827-185932.md) — Extension Jira sync (SNOW→Jira, attach-only /api/sync/jira, custom-domain + PAT). v2.2.0. Live-verified attach-only.
+
+One line per artifact (newest first) + open threads. Read on demand; don't bulk-load.
+
+- [devops-20260827-182020](devops-20260827-182020.md) — Synology `push-to-nas.sh` deploy script + `.deploy.env.example` + `.env.example` rewrite + SETUP §6; RITM number → SNOW link in table & board cards.
+- **v2.0.0 / FORGE 2.0** — CHANGELOG.md created, versions bumped 1.0.0→2.0.0 (root+client), brand → "FORGE 2.0". Security audit HIGH-1/2/3 + MED-1 fixed (admin-deletes-admin only, last-admin guard, session purge on delete, session regenerate on login, 404 on missing). Verified live.
+- [audit-20260827-180746](audit-20260827-180746.md) — EXHAUSTIVE parity gap analysis (initial app → FORGE). Done: Overall (~9/11), Active (5/6), 6 SLA heatmaps, Insights, 6-col board+export, RBAC. Missing: PMs-KPI charts 18–23 + period/editable-norms, YoY pies #5/#6, #17 jira durations, #15 min/median/max, Jira board, Size CALC, options/config editors, deep sync (SCTASK/jira/closed/finance/statusDurations), board sort/group/card-fields/filters, 7th synthetic column, insights Excel export. **Open:** prioritized phases A–F for principal.
+- [security-20260827-180635](security-20260827-180635.md) — RBAC/token/user audit. 3 HIGH (lead-deletes-admin, last-admin lockout, session survives user delete), 2 MED, 3 LOW. Gating matrix + token-hash non-leak verified. **Open:** fixes to engineer/dba.
+- [architect-20260827-180544](architect-20260827-180544.md) — ADR: extension as single sync engine for SNOW + Jira. Keep SNOW same-origin session; add Jira via direct REST + API token; new attach-only `POST /api/sync/jira` (no DB reshape, enrich `jira` JSONB). **Open:** engineer to build endpoint + Phase B.
+- [designer-20260827-180842](designer-20260827-180842.md) — Excel export design pass: indigo frozen header, per-column widths, right-aligned numbers, #,##0 cost, short dates, grid borders. Validated → valid xlsx.
+- [engineer-20260827-180000](engineer-20260827-180000.md) — implemented RBAC (4 roles), Admin page (Users+Tokens), filtered Excel export, full-width charts, donut fix. **verifier PASS.**
+- [principal-20260827-175448](principal-20260827-175448.md) — Auth/RBAC (4 roles) + API-token page + filtered Excel export. Plan + capability matrix.
+- [FORGE-parity-spec](FORGE-parity-spec.md) — full inventory of the initial app (29 charts, PM Insights, boards) → data contract → Husky component mapping → phased build plan. Phases 0–3, 5 + Overall-fidelity done.
+- [verifier-log](verifier-log.md) — running PASS/REDO log of every verifier gate.
+
+## Delivered so far (all verifier-PASS)
+- Phase 0 data ingest · 1 analytics engine · 2 Overall tab (+ full fidelity) · 3 Active tab + board redesign · 5 PM Insights.
+- verifier-log.md · verifier PASS on engineer-20260827-180000 (RBAC+token page+filtered xlsx+full-width+donut fix); live DB verified donut center=966, Rowena≈8%; schema additive; token_hash not leaked
+- verifier PASS on engineer-20260827-185932 (extension Jira-sync v2.2.0): attach-only /api/sync/jira + attachJira; TEMP-TABLE smoke proved no SNOW-field clobber, no SQLi, jsonb merge preserves omitted keys; schema unchanged (additive).
+- verifier-20260827 · verifier · PASS on Jira statusDurations+chart #17 (v2.3.0) — see verifier-log.md

claude_artifacts/architect-20260827-180544.md

@@ -0,0 +1,324 @@
+# ADR: The Chrome extension as the single sync engine for SNOW + Jira
+
+- **Status:** Proposed (design input for a later build — no code here)
+- **Date:** 2026-08-27
+- **Author:** architect
+- **Supersedes:** nothing — extends the existing SNOW-only sync (`extension/`, `/api/sync`)
+
+---
+
+## 1. Context
+
+Today the extension syncs **ServiceNow only**. `background.js` runs a collector in the
+`rbassist.service-now.com` page (`world: MAIN`), pages the Table API same-origin using the
+live session cookie + `g_ck`, maps `sc_req_item` rows to the FORGE ticket shape, and POSTs
+them in 100-row chunks to `<serverUrl>/api/sync` with `Authorization: Bearer fg_…`.
+
+Jira data currently only exists in the **seed dump** (`jira_status_map` 127 rows,
+`jira_board_state` 1045 rows — see `FORGE-parity-spec.md`). It goes stale the moment the
+dump is loaded. The live `tickets.jira` JSONB is typed as **`JiraInfo`** and is only ever
+written by the seed path, never refreshed. **Its declared shape is not 5 fields** — it is
+**6** (`server/types.ts:11-18`, mirrored in `client/src/types/ticket.types.ts:9-16`):
+
+```ts
+interface JiraInfo {
+  status?; statusChangedAt?; key?; url?; assignee?;   // the 5 populated by seed today
+  movements?: { at: string; who: string }[];          // ALREADY declared — see §5
+}
+```
+
+The seed only populates the first five; `movements` exists in the type but is currently
+unwritten. This matters: `movements` is **not** a field we get to invent (§5).
+
+We want **one "Sync now"** to refresh both sources so the Active tab (chart 17 Jira status
+durations, chart 19/20 movements) and the future Jira board page stay live.
+
+**Load-bearing finding — the current upsert cannot be reused for Jira as-is.**
+`server/db.ts` `upsertTickets` ON CONFLICT does **`status=EXCLUDED.status`,
+`state=EXCLUDED.state`, `short_desc=EXCLUDED.short_desc`, `assigned_to=EXCLUDED.assigned_to`,
+`assignment_group=EXCLUDED.assignment_group`, `last_activity_at/by=EXCLUDED.…`,
+`updated_at=EXCLUDED.…`** — these are **overwritten, not COALESCE-preserved**. A Jira-only
+payload routed through `/api/sync` would pass `normalizeIncoming`, which defaults
+`status→'active'`, `state→''`, `shortDesc→''`, `assignedTo→null`, `assignmentGroup→null`,
+`last_activity_*→null` — **wiping the SNOW core fields of every matched ticket** (and
+mis-flipping closed RITMs back to active). Only `jira` itself is COALESCE-merged. So Jira
+must **not** ride the same endpoint/upsert.
+
+---
+
+## 2. Decision
+
+1. **Keep SNOW exactly as-is** (in-page same-origin session collector → `/api/sync`).
+2. **Add Jira as a second transport in the same extension**, using **direct Jira Cloud REST
+   from the service worker** authenticated with a **Jira API token** (email + token, HTTP
+   Basic). No Jira browser tab required.
+3. **Route Jira through a new, dedicated server endpoint `/api/sync/jira`** that performs an
+   **attach-only UPDATE** — it writes **only** `jira` (JSONB) and `jira_key`, keyed by
+   RITM `number`, and **never touches** `status/state/assignee/activity`. This sidesteps the
+   clobber above and gives clean partial-failure semantics.
+4. **No DB shape change.** Jira status/durations/movements go **inside the existing `jira`
+   JSONB**, which the extension sends as one enriched object. Additive only.
+5. **"Sync now" = SNOW first, then Jira** (sequential, so Jira attaches to freshly-synced
+   rows), each phase chunked and reporting its own count.
+
+### Why the SNOW-session / Jira-API-key split (not one mechanism)
+
+| | ServiceNow | Jira Cloud |
+|---|---|---|
+| Auth we have | Live browser **session cookie + `g_ck`** | First-class **API token** (Atlassian id.atlassian.com → API tokens) |
+| Personal API token | Not reliably available / instance-policy dependent; storing SNOW creds is worse | Designed for exactly this; scoped, revocable |
+| Needs a logged-in tab | **Yes** (already the case; user is in SNOW all day) | **No** — SW fetch with host permission works headless |
+| CSRF | `X-UserToken: g_ck` required | Not applicable (Basic auth) |
+
+The split is the *cheap* option on both sides: SNOW keeps the zero-secret session approach
+that already works; Jira uses the mechanism Atlassian actually blesses. Forcing symmetry
+(e.g. scraping a Jira tab same-origin) would add a fragile MAIN-world collector and require
+the user to keep a Jira tab open — strictly worse than a token.
+
+### Does Jira require a board id? **Yes — and support a list, default one.**
+
+To reproduce the original board (`rapidView=13793`) and its **per-status durations +
+movements**, the extension reads the **Agile REST** endpoint
+`GET /rest/agile/1.0/board/{boardId}/issue` (issues in board order) plus each issue's
+`changelog` (`GET /rest/api/3/issue/{key}?expand=changelog`) to reconstruct status transition
+timestamps → durations/movements. **Board order and column mapping only exist per board**, so
+a board id is mandatory for board-faithful output. A pure JQL search (`/rest/api/3/search`)
+does *not* need a board but loses column order and the board's status→column mapping.
+
+**Recommendation:** primary input is **one board id** (the `13793` analogue). Store it as a
+**list** so a second board can be added later without a settings migration, but the UI
+defaults to a single field. Provide an **optional JQL override** for power cases (e.g.
+`project = XYZ AND updated >= -14d`); when JQL is set it augments the board fetch's filter,
+it does not replace the board (we still need the board for column mapping).
+
+---
+
+## 3. Settings schema (extension options → `chrome.storage.local`)
+
+```
+{
+  // FORGE (unchanged names — back-compat with today's build)
+  serverUrl:        "https://forge.mycloud.dp.ua",   // FORGE API domain
+  token:            "fg_…",                            // FORGE portal key, minted at Admin→Tokens, revocable
+
+  // Jira (new)
+  jira: {
+    baseUrl:        "https://rocketmill.atlassian.net", // Jira Cloud site
+    email:          "svc-forge@…",                       // Atlassian account email (Basic auth username)
+    apiToken:       "ATATT…",                            // Jira API token (Basic auth password) — SECRET
+    boardIds:       [13793],                             // list; UI defaults to one
+    jql:            ""                                   // optional override/filter, may be blank
+    closedLookbackDays: 14                               // 0 = active-only (see §6)
+  }
+}
+```
+
+- FORGE Basic-of-nothing: FORGE keeps `Authorization: Bearer <fg_ token>`.
+- Jira auth header: `Authorization: Basic base64(email + ":" + apiToken)`.
+- On **Save**, request host permission for **both** origins (as options.js already does for
+  the FORGE origin): the FORGE server origin **and** `https://<site>.atlassian.net/*`.
+- A **"Test Jira"** button (mirror of the existing "Test") calls
+  `GET {baseUrl}/rest/api/3/myself` and reports 200/401.
+
+---
+
+## 4. Two transports & manifest implications
+
+- **SNOW:** unchanged. `host_permissions: ["https://rbassist.service-now.com/*"]` stays
+  required; collector runs in the page; session cookie + `g_ck` do the work.
+- **Jira:** fetched **from the service worker** (not a page). In MV3, a service-worker
+  `fetch` to a host listed in `host_permissions` is **exempt from page CORS** — the extension
+  is treated as a first-party origin for granted hosts, so Atlassian's (restrictive) CORS
+  headers are irrelevant. **This only holds with the host permission granted**; without it the
+  fetch is a normal cross-origin call and fails preflight.
+- Add the Jira site to **`optional_host_permissions`** and request it dynamically at Save
+  time (same pattern as the FORGE origin today), rather than hard-coding a static
+  `host_permissions` entry — the site host is per-deployment and least-privilege favors
+  granting exactly the one instance the user configures. `optional_host_permissions` already
+  contains `https://*/*`, which technically covers it, but an explicit narrow grant is
+  cleaner and survives a future tightening of that wildcard.
+- No new manifest `permissions` needed (`storage`, `scripting` already present; Jira uses
+  neither `scripting` nor `tabs`).
+
+---
+
+## 5. Dedup & merge
+
+- **FORGE key is `number`** (RITM). No ticket dupes — that invariant is untouched; Jira never
+  inserts a ticket.
+- **RITM ↔ Jira link:** for each Jira issue, resolve the RITM number from
+  **`customfield_26001`** (holds the RITM), falling back to a **summary regex** (`/RITM\d+/`),
+  exactly as the initial app did. Build a map `RITM number → enriched jira object`.
+- **Jira issue with no RITM:** **skip it and count it.** FORGE is RITM-centric and single-user;
+  an unlinked Jira issue has nowhere to attach and creating a ghost ticket would violate the
+  "no dupes / SNOW owns the ticket row" model. Report the unlinked count in the sync status so
+  the user knows a link (customfield/summary) is missing. (A future "orphan Jira" store is out
+  of scope — not kanban, not this ADR.)
+- **What lands in `jira` JSONB (superset of today's shape):**
+  ```
+  { key, url, status, statusChangedAt, assignee,     // 5 existing fields, unchanged
+    movements,         // EXISTING field — reuse shape [{ at, who }] (NOT { from, to, at })
+    statusDurations,   // NEW additive — { "In Progress": mins, "In UAT": mins, ... }
+    board }            // NEW additive — { id, column } for the board page
+  ```
+- **`movements` already exists in the `JiraInfo` type** (`server/types.ts:17` +
+  `client/src/types/ticket.types.ts:15`) as **`{ at: string; who: string }[]`**. The extension
+  **must populate that existing shape**, not redefine it to `{ from, to, at }`. Reconstruct
+  `who` from the changelog author and `at` from the transition timestamp. (I confirmed
+  `movements` currently has **no runtime consumer** — only the two type declarations — so a
+  different shape *could* be adopted, but doing so is a deliberate change to the `JiraInfo`
+  contract in two TS files, not "additive JSONB." **Recommendation: keep `{ at, who }`.** If the
+  chart genuinely needs `from`/`to`, add them as *extra optional* keys on each entry
+  (`{ at, who, from?, to? }`) rather than dropping `at`/`who` — that stays backward-compatible
+  and is still a one-line `JiraInfo` edit, called out here so the engineer expects it.)
+- **`statusDurations` and `board` are genuinely new**, additive optional keys — add them to the
+  `JiraInfo` interface (both files) alongside `movements`. This is a **type-declaration touch,
+  not a DB shape change**: the `jira` column is already `JSONB` and stores whatever the object
+  holds. Flagging it explicitly so it isn't mistaken for a zero-code change.
+- **Server (DB) shape change: none to columns.** The `jira` column is already `JSONB`. The new
+  endpoint replaces the whole object per ticket (the extension always sends the complete
+  enriched object it just computed), so there is no partial-merge ambiguity and no reshape of
+  any existing column. `jira_key` (existing TEXT column) is set from `jira.key` when present.
+  The only code-level shape edit is the additive `JiraInfo` TS interface above.
+
+### New endpoint contract (attach-only)
+
+```
+POST /api/sync/jira        (requireToken — same fg_ Bearer as /api/sync)
+body: { issues: [ { number, jira: {…enriched…} }, … ] }   // chunked, 100
+per row:  UPDATE tickets
+          SET jira = $2::jsonb,
+              jira_key = COALESCE($3, jira_key),
+              synced_at = NOW()
+          WHERE number = $1
+resp: { updated: <rows hit>, unmatched: <numbers not found>, unlinked: <issues w/o RITM> }
+```
+
+Because it is an **UPDATE … WHERE number =**, a Jira payload for an RITM not yet in FORGE
+simply affects 0 rows (counted as `unmatched`) — it **cannot** create a stub row or flip
+`status`/`state`/`assignee`. This is the whole reason for a separate endpoint rather than
+folding into `/api/sync`.
+
+---
+
+## 6. Sync flow & scheduling
+
+`Sync now` (popup) → service worker `runSync()`:
+
+1. **Phase A — SNOW** (unchanged): collect active RITMs same-origin → `POST /api/sync` in
+   100-chunks. On failure: **abort before Phase B** (don't attach Jira to a stale ticket set)
+   and report the SNOW error as today.
+2. **Phase B — Jira:** for each `boardId`, fetch board issues (+ changelog), resolve RITM,
+   build enriched `jira` objects, → `POST /api/sync/jira` in 100-chunks. On failure: Phase A is
+   **already committed and intact**; surface a *warning* ("SNOW synced ✓, Jira failed: …")
+   rather than a hard error. Report `updated / unmatched / unlinked`.
+3. Push a combined `{ state, snowCount, jiraUpdated, jiraUnmatched, at }` to `syncStatus` for
+   the popup.
+
+- **Sequential, not parallel:** Jira must attach to rows SNOW just wrote.
+- **Chunking:** 100 on both push directions (matches today). Jira *read* is paged by the Agile
+  API (`maxResults`/`startAt`, 50–100) — page defensively with a hard ceiling like the SNOW
+  collector's `offset < 2000` guard.
+- **Separate endpoint, not folded:** decided in §2/§5 — clobber-safety + independent
+  partial-failure reporting.
+- **Scheduling:** keep **manual "Sync now"** for v1 (single-user, user is at the desk). A
+  `chrome.alarms` periodic sync is a trivial later add but out of scope; note that periodic
+  Jira sync consumes API-token rate budget even when idle.
+
+---
+
+## 7. Scope of tickets
+
+- **SNOW:** stays **active-only** (the collector query is `active=true`).
+- **Jira:** default **active board + a small closed lookback** (`closedLookbackDays`, e.g. 14)
+  so *recently* closed issues' durations/movements stay fresh for charts 17/19/20. `0` =
+  active-only.
+- **Not** full history. Trade-offs:
+  - *For historical sync:* analytics freshness on old tickets.
+  - *Against (decisive):* Jira Cloud API-token rate limits + wall-clock cost of walking every
+    issue's changelog; and history is already owned by the **seed dump**
+    (`analytics_data.ticketsMeta` 954 rows is THE historical dataset). Live-syncing 1000+
+    closed issues on every "Sync now" is wasteful and slow.
+  - **Verdict:** *seed handles history; the extension keeps active + a short closed window.*
+    If someone needs a full historical refresh, that's a re-seed, not a per-click sync.
+
+---
+
+## 8. Security
+
+- **Jira API token is a real secret in `chrome.storage.local`** — which is **not encrypted at
+  rest** and is readable by anyone with the OS user's Chrome profile on disk. Mitigations to
+  bake into the build:
+  - Use a **dedicated low-privilege Jira service account** with **read-only** project access,
+    not a personal admin token. Blast radius on leak = read a board.
+  - Store **email + API token**, never a password. API tokens are individually revocable from
+    Atlassian without disturbing the account.
+  - **Never log** the token, the `Authorization` header, or issue bodies (the SNOW collector
+    already treats `g_ck`/token this way — hold the same line for Jira).
+  - Document in options UI that the token is stored locally and to revoke it from Atlassian if
+    the machine is compromised.
+- **FORGE `fg_` token** is already **revocable via Admin→Tokens** and `requireToken`-gated —
+  rotate freely; the new `/api/sync/jira` reuses the **same** Bearer, no new server secret.
+- **CORS / host model:** covered in §4 — Jira REST works *because* the SW holds the Jira host
+  permission (CORS-exempt for granted hosts); grant exactly the one Atlassian site,
+  least-privilege, requested at Save.
+- **Server input hardening:** `/api/sync/jira` must validate `number` is present and `jira` is
+  an object, and (like `sanitizeActivity`) coerce the enriched sub-fields before writing JSONB,
+  so a malformed `movements`/`statusDurations` can't later crash a render.
+
+---
+
+## 9. Alternatives considered
+
+- **A. Fold Jira into `/api/sync`.** Rejected — the ON CONFLICT overwrites SNOW core fields
+  from a thin Jira payload (§1). Would require rewriting the upsert to COALESCE `status`/
+  `state`/`assignee`, which then breaks SNOW's own need to *set* those. A second endpoint is
+  simpler and safer than making one upsert serve two very different payloads.
+- **B. Scrape Jira same-origin from a Jira tab (mirror SNOW).** Rejected — needs a logged-in
+  Jira tab, a fragile MAIN-world collector, and gives no advantage over the sanctioned API
+  token.
+- **C. Server-side Jira sync (cron on the FORGE box, no extension).** Rejected for now — it
+  moves the Jira secret to the server (fine) but **splits sync into two engines**, contradicting
+  the goal of *one* "Sync now", and the RITM↔Jira resolution logic would live in two places.
+  Revisit only if we later want unattended periodic sync.
+- **D. New `jira_*` columns / a `jira_status` table.** Rejected — violates "prefer additive
+  JSONB, no existing-column reshape"; the `jira` JSONB already exists and is the right home.
+- **E. JQL-only, no board id.** Rejected as the default — loses column order/mapping the board
+  page needs; kept as an optional filter override.
+
+---
+
+## 10. Risks
+
+- Jira **changelog walking** is the expensive part; a large board × per-issue changelog fetch
+  can be slow / hit rate limits. Mitigate with the closed-lookback window and paging ceilings.
+- **`customfield_26001` id is instance-specific** — if it differs on this Jira site the
+  RITM-link falls back to summary regex only; surface the `unlinked` count so this is visible.
+- **`optional_host_permissions` wildcard** (`https://*/*`) is broad; the explicit Atlassian
+  grant is cleaner but the wildcard's presence is a standing review flag (unrelated to this
+  change, worth noting to `/security`).
+- Token in `chrome.storage.local` (§8) — accepted risk, mitigated by service-account scope.
+
+---
+
+## 11. Migration
+
+- **DB:** **none.** No column add, no reshape — `jira` JSONB and `jira_key` already exist.
+  `initDB()` is untouched; no manual SQL script, no rollback needed.
+- **Types:** **additive** — extend the existing `JiraInfo` interface (`server/types.ts` +
+  `client/src/types/ticket.types.ts`) with new optional keys `statusDurations` and `board`;
+  **reuse** the already-declared `movements?: { at, who }[]` (do not redefine it). Optional
+  keys keep every existing consumer compiling.
+- **Server:** purely **additive** — new `POST /api/sync/jira` handler + a small
+  `attachJira(number, jira)` in `server/db.ts`. Old clients that only hit `/api/sync` keep
+  working unchanged.
+- **Extension:** additive options fields + Phase B. An un-upgraded extension still syncs SNOW.
+- **Rollout order:** ship the server endpoint first (inert until called) → then the extension
+  update → then populate the Jira settings. Fully backward-compatible at every step.
+
+---
+
+## Next
+engineer — build the additive `POST /api/sync/jira` + `attachJira()` (attach-only UPDATE, §5)
+first; then extend the extension options (§3 schema) and `background.js` Phase B (§6). Route
+the DB touch through /dba and the Jira-token storage through /security before merge.

claude_artifacts/audit-20260827-180746.md

@@ -0,0 +1,301 @@
+# audit — Gap analysis: "Let it Snow" → FORGE (what has NOT been ported)
+
+**Date:** 2026-08-27 · Author: audit (read-only) · Scope: full parity sweep
+**Checklist source:** [FORGE-parity-spec.md](FORGE-parity-spec.md) (29 charts + PM-Insights + boards + data contract)
+**Compared against:** live FORGE code (`server/*.ts`, `client/src/**`, `extension/*`) and the initial app source
+(`/Users/dmytrotkachenko/WebstormProjects/Let It Snow/Let it Snow/*.js`, verified by grep — files are huge).
+
+Legend: ✅ done · 🟡 partial · ❌ missing. Value: **MH** must-have · **NTH** nice-to-have · **LOW**.
+
+---
+
+## 0. Executive summary
+
+FORGE has delivered a solid **read-only spine**: full data ingest (966 tickets + finance + jira + config),
+a server analytics engine, the **Overall** tab (~9 of 11 charts), the **Active** tab (5 of 6), the **6 SLA
+heatmaps** (charts 24–29), **PM Insights** (alert groups + waiting-PO + per-PM roll-up), a **6-column board**
+with list view + filtered Excel export, and **new** RBAC/Users/Tokens admin (beyond the original).
+
+What is **not** ported is roughly **half of the analytics surface and nearly all of the operator tooling**:
+
+- **PMs-KPI tab** is only the 6 heatmaps — charts **18–23** (workload, engagement + dual calendar heatmaps,
+  missing-cost, awaiting-PO money, brand/market sub-cards) are **absent**, and the heatmaps have **no
+  period/year granularity and no editable norms**.
+- **Board** is missing the 7th synthetic column, 13 of 16 card fields, all 14 sorts, all 6 group-by
+  permutations, and ~9 of 11 filters (region, staleness, jira, requester, custom-label…).
+- **Whole features missing:** the standalone **Jira board**, the **Size CALC** estimator, the **finance
+  view**, and the entire **options/config editor surface** (brand colours, norms, thresholds, card-field
+  toggles, colleagues/region, currency, custom labels).
+- **Sync** is shallow: active-**RITM only**, 9 fields, **no SCTASK, no Jira, no closed, no finance,
+  no statusDurations** collectors.
+- Overall/Active charts lack the **YoY pies (#5/#6)**, **CGO overlay**, **#/% toggle**, **Jira status
+  durations (#17)**, and **time-in-status min/median/max (#15)**.
+
+Per the spec, **AI Advisor / at-risk, weather** are intentionally out of scope (confirmed below).
+
+---
+
+## 1. Overall analytics tab — `client/src/pages/Overview/index.tsx` + `server/analytics.ts:getOverview`
+
+| # | Item | Status | Note / where it lives |
+|---|---|:--:|---|
+| 1 | Opened per month | ✅ | `GroupedBars` — multi-year grouped, bars/line toggle, YoY badge. |
+| 2 | Closed per month | ✅ | `GroupedBars`, same. |
+| 3 | Revenue per month (cost/tickets, ±YoY) | ✅ | `GroupedBars` + Cost/Tickets toggle in Overview; GBP via fixed FX. |
+| 4 | Lifetime-at-close histogram + median/avg/closed tiles | ✅ | `BarList` 6 buckets + median tile. `avgDays`/`closed` computed server-side. |
+| 5 | **Opened YoY pie (fair/full)** | ❌ | No opened-YoY donut. Would live in Overview as a `DonutChart`; server has `openedByMonth` but no fair-window (same-day-of-year) series. **MH** |
+| 6 | **Closed YoY pie (fair/full)** | ❌ | Same — no closed-YoY donut / fair-vs-full comparison. **MH** |
+| 7 | By business unit (per-year, **brand drill**) | 🟡 | Flat `BarList` (`byBusinessUnit`), **no per-year split, no brand drill-down**. `server/analytics.ts:169`. **NTH** |
+| 8 | By requester (bars + YoY, **market drill**) | 🟡 | `ExpandBarList` drills requester→**brand** (spec wants →market), **no YoY**. `analytics.ts:170`. **NTH** |
+| 9 | Ticket-share donut (#/%, top 18 + Others) | 🟡 | `DonutChart` on `byRequesterShare` (full 966 dist — the REDO fix). **No #/% toggle, no top-18+Others rollup.** **NTH** |
+| 10 | By brand (per-year **segments**, market drill, YoY) | 🟡 | `ExpandBarList` brand→market counts only. **No per-year segments, no YoY, no size/status segmentation.** **NTH** |
+| 11 | By market | 🟡 | Flat `BarList`, top-20. No brand drill / segments. **LOW** |
+| — | Toggle: bars/line | ✅ | `GroupedBars` per-chart. |
+| — | Toggle: ±YoY | 🟡 | Shown as a computed badge, not a user toggle; only on the month `GroupedBars`. **LOW** |
+| — | Toggle: cost/tickets | 🟡 | Only on the Revenue chart; original applies it across money charts. **LOW** |
+| — | Toggle: #/% | ❌ | No percentage mode anywhere. **NTH** |
+| — | Growth badges | 🟡 | Only the month-total YoY badge; no per-series/per-requester growth. **LOW** |
+| — | **CGO overlay** | ❌ | Original overlays a "CGO" series per group (`dashboard.js` `CgoBars`/`CGO_REQUESTER`, toggle). Not in FORGE — needs a CGO flag on tickets + overlay in `GroupedBars`. **NTH** |
+
+**Bottom line:** the month/revenue/lifetime core is faithful; the **two YoY pies are missing outright**, and
+the by-dimension charts are **flat counts without the per-year segmentation, drill, and YoY** the original had.
+
+---
+
+## 2. Active tab — `client/src/pages/Active/index.tsx` (client-computed from active tickets)
+
+| # | Item | Status | Note / where it lives |
+|---|---|:--:|---|
+| 12 | Open-not-closed by month | ✅ | `TrendChart` area, `openedByMonth`. |
+| 13 | By status (kanban cats) | ✅ | `BarList` over `BOARD_COLUMNS`, state colours. |
+| 14 | Age histogram (0-50…200+ d) | ✅ | `BarList`, 5 buckets. |
+| 15 | **Time-in-status min/median/max** | 🟡 | Only **median** days-in-state per column (`Active/index.tsx:62`). No min/max grouped mini-bars. **NTH** |
+| 16 | By brand, **status-segmented** (market drill) | 🟡 | Flat `BarList` of active-by-brand. **No status segmentation, no market drill.** **NTH** |
+| 17 | **Jira status durations (workflow order)** | ❌ | Requires `statusDurations` from `jira_status_map` — **not ingested** (only `status`/`statusChangedAt`/`key` land in `jira` JSONB; see `scripts/dump-to-archives.mjs:36`). No chart. **MH** for Jira ops. |
+
+---
+
+## 3. PMs-KPI tab — `client/src/pages/SlaKpi/index.tsx` + `server/analytics.ts:getSlaHeatmaps`
+
+The whole tab is currently **only** the 6 SLA heatmaps. The original "PMs KPI" tab was 12 items (18–29).
+
+### 3a. The 6 SLA heatmaps (24–29) — present but reduced
+| # | Item | Status | Note |
+|---|---|:--:|---|
+| 24 | On-Time Delivery heatmap | ✅ | `otd` metric, PM×size, on-time% vs `otd` norms. |
+| 25 | Avg days to close heatmap | ✅ | `avgclose` vs `avgdays`. |
+| 26 | Time to assign PM heatmap | ✅ | `assign` = `max(0, fulfillment→firstAssigned)` vs `asla`. |
+| 27 | Time to send preview heatmap | ✅ | `preview` = `toDoAt→inUatAt` vs `psla`. |
+| 28 | Avg TTFR heatmap | ✅ | `ttfr` = `ttfrMinutes/1440` vs `ttfr` norms (hrs). |
+| 29 | Avg PM response heatmap | ✅ | `cresp` = `clientRespMinutes/1440` vs `cresp` norms. |
+| — | **Current + previous year** side by side | ❌ | `getSlaHeatmaps` computes one all-time grid; original renders cur-yr + prev-yr heatmaps. **MH** |
+| — | **Period granularity (year / Q1-Q4 / month)** | ❌ | No period control at all. **MH** |
+| — | **Editable norms panels** | ❌ | Norms are read-only from `app_config`/`config.json`; original has inline norm editors (`buildNormsPanel` etc.) that persist. Needs a write endpoint + UI. **MH** |
+| — | Hidden PMs from `pm_kpi_settings` | ❌ | `getSlaHeatmaps:223` has a stubbed `hidden = new Set()` — never populated. **NTH** |
+
+### 3b. Charts 18–23 — entirely missing
+| # | Item | Status | Note / where it'd live |
+|---|---|:--:|---|
+| 18 | **Workload by month** (revenue prev/cur yr, per-PM) | ❌ | New `GroupedBars`+per-PM series; new server agg (closed cost by PM×month). **MH** |
+| 19 | **PM Engagement** (backlog/Assist✓/Jira✓/Stale) + **dual daily-activity calendar heatmaps** | ❌ | Needs `CalendarHeatmap` component (GitHub-style) + activity/jira-movement ingest per day. Original: `EngagementKpi()` with PM-row accordion. **MH** |
+| 20 | **Missing final cost** (ranked PM bars + drill) | ❌ | `AssigneeBars` + list; server: closed rows where `finalCost` null, grouped by PM. Partial data exists. **MH** (margin-leak) |
+| 21 | **Awaiting PO** (ranked, Cost / Avg-d / Max-d, sortable) | 🟡 | Insights has a count + L1/L2/L3 + revenue, but **no per-PM Cost/Avg-days/Max-days sortable table**. **MH** |
+| 22 | No-cost by **brand / market** | ❌ | Two `BucketBars`. **NTH** |
+| 23 | Awaiting-PO by **brand / market** | ❌ | Two `BucketBars`. **NTH** |
+
+**Bottom line:** PMs-KPI is the **largest single gap** — 6 of 12 charts absent, and the 6 present ones lack
+year/period slicing and the editable norms that make them operational.
+
+---
+
+## 4. Board — `client/src/pages/Board/index.tsx`, `utils/board.ts`, `components/Board/BoardCard`
+
+| Item | Status | Note / where it lives |
+|---|:--:|---|
+| 7-state columns | 🟡 | **6 columns** built (`unassigned, open, hold, wip, replied, awaiting`; `board.ts:18`). **7th synthetic `Closed / Awaiting-PO` column is missing** (original `CLOSED / AWAITING PO – SYNTHETIC` overlay). **MH** |
+| Customer-replied pseudo-status | ✅ | `boardColumn`/`isAwaitingAgency` — WIP + last touch ∉ colleague roster. Faithful. |
+| Column SLA subtitles + per-column count | ✅ | `col.slaVerb(thr)` + count badge. |
+| Group-by (6 permutations of WIP·Replied·Awaiting) | ❌ | Column order is fixed; original has 6 orderings (`wip-agency-await` … `await-agency-wip`). **NTH** |
+| **16 toggleable card fields** (`card_fields`) | ❌ | `BoardCard` is a **fixed** layout showing ~8 fields (number, jira status, link, shortDesc, brand·market, assignee, in-state days, lifetime, last activity). **None toggleable.** Missing: description, raisedBy, dueDate, stateChanged, comments, createJira, jiraBar, teamsLink. Original fields: `cf-stateBadge/shortDesc/description/assignee/assignmentGroup/brandMarket/raisedBy/lifetime/dueDate/stateChanged/lastActivity/comments/createJira/showJiraStatus/showJiraBar/teamsChannelLink`. **NTH** |
+| Custom labels registry | ❌ | Original `custom_label` system (per-ticket labels + filter). Absent. **NTH** |
+| Staleness / PO / jira-stuck / missing-cost badges | ❌ | `BoardCard` has no badges beyond the jira-status chip. **NTH** |
+| **Sort (14 options)** | ❌ | No sort control. Original: `default, number, status-age-asc/desc, lifetime-asc/desc, jira-assignee, jira-status, brand, cost-asc/desc, due-asc/desc, analyzed`. **NTH** |
+| Filters: search / brand / market / assignee | ✅ | Present in the board header. |
+| Filters: **region EU/LATAM** sentinels | ❌ | `latamAssignees` is ingested (`config.json`) but the assignee dropdown has no EU/LATAM region grouping. **NTH** |
+| Filters: requester, custom-label, jira-assignee, jira-status | ❌ | None. **NTH** |
+| Filters: staleness (stale/updated/inactive/PO/jira-stuck/missing-cost), hide-empty, hide-cost | ❌ | Original `group-by` chips + status-label filters. Absent. **NTH** |
+| List view | ✅ | `TicketTable` toggle (fixed columns, not the same field set). |
+| Card click behaviour | 🟡 | Opens an in-app `TicketDetailModal` (+ a SNOW link icon). Original opens ServiceNow directly. Acceptable divergence. |
+| Filtered Excel export | ✅ | **New** — `utils/excel.utils.ts`, 17 cols, honours active filters. |
+| Azure DevOps focus board | ❌ | Out of scope per spec (§0). **LOW** |
+
+---
+
+## 5. PM Insights — `client/src/pages/Insights/index.tsx` + `server/insights.ts`
+
+| Item | Status | Note / where it lives |
+|---|:--:|---|
+| Alert groups (Unassigned, Open/Assigned, On-Hold, WIP-stalled, WIP-no-Jira, Customer-replied, Awaiting) | ✅ | `insights.ts` 9 groups; support rules `jiraBreached`/`clientOwed`/`isAwaitingAgency` ported. |
+| Informational groups (Lifetime ≥90d, Inactive requester) | ✅ | Present, excluded from Total Alerts. |
+| ∑ Total Alerts + Revenue-at-Risk | ✅ | Distinct-count reconciled (verifier-log). |
+| Waiting-PO count + revenue + **L1/L2/L3** | 🟡 | Counts + revenue present; **no per-level (L1/L2/L3) drill-down lists**. `insights.ts:140`. **NTH** |
+| PM-KPI table (# Tickets · $ Revenue · ⚠ Rev-at-Risk) | 🟡 | Table present; **not sortable**, and **hidden-PMs from `pm_kpi_settings` not honoured**. **NTH** |
+| **Excel export of the insights subtree** (PM→Size→Ticket) | ❌ | Original `xl-export.js` writes PM/Size/Ticket-grouped sheets. FORGE has board export only. **MH** |
+| **Region / PO / people filters** | ❌ | Original insights has EU/LATAM region + PO + people filters. Absent. **NTH** |
+| **Per-PM size stats** | ❌ | No size breakdown inside the PM roll-up. **NTH** |
+| **"Missing tickets" overlay** | ❌ | Original reconciliation overlay (tickets present in one source, absent in another). Absent. **LOW** |
+
+---
+
+## 6. Jira board page — **MISSING ENTIRELY** ❌ (MH for Jira ops, else NTH)
+
+Original `jira-board.html` + `jira-board.js` (2378 LOC): columns from `jira_board_state`, cards, RITM↔Jira
+link (`jira-ritm-link.js`), quick-filters, settings panel (board URL, scan controls, PO-cache clear), toasts,
+scan countdown. FORGE has **no route, no page, no `jira_board_state` ingest** (`dump-to-archives.mjs` only
+reads `jira_status_map`). Would live as `client/src/pages/JiraBoard/` + a `jira_board` archive/table + a
+`/api/jira/board` endpoint.
+
+---
+
+## 7. Sync / extension — `extension/background.js` (+ `popup.js`, `options.js`)
+
+FORGE's collector is **active-RITM only, shallow**. Original `background.js` (5219 LOC) is far deeper.
+
+| Aspect | Status | Note |
+|---|:--:|---|
+| SNOW active RITM scan | ✅ | `pageCollector` pages `sc_req_item`, `assignment_groupLIKEMarketing Web Presence`. |
+| Field depth | 🟡 | Only **9 fields** (number, short_desc, state, assigned_to, group, opened_at, due_date, updated_by, updated_on). No brand/market/BU/requester/cost/activity timeline/state-change history. Rich fields survive only from the **seed**, kept alive by COALESCE upsert. **MH** |
+| **SCTASK support** | ❌ | RITM-only. Original scans **SCTASK** too (`background.js` `sctask`/`SCTASK`). **NTH** |
+| **Closed-ticket collector** | ❌ | No closed scan; closed data is seed-only, goes stale. **MH** |
+| **Jira collector (+ statusDurations)** | ❌ | No Jira scanning; `jira_status_map`/`statusDurations`/`jira_board_state` never refreshed. **MH** |
+| **Finance xlsx scan** | ❌ | Original scans the SharePoint finance workbook (`finance_xlsx`); FORGE finance is a one-shot seed from the dump. **MH** |
+| Popup = RITM list + Jira tab | 🟡 | FORGE popup is **sync-only** (server URL + token + "Sync now"). Original popup is a RITM browser + Jira tab. **LOW** (by design — web app replaces it) |
+
+---
+
+## 8. Finance — `server/db.ts:applyFinance` + `scripts/dump-to-archives.mjs:106`
+
+| Item | Status | Note |
+|---|:--:|---|
+| Finance ingest (cost / currency / PO / invoiced) | ✅ | `finance.json` (860 rows) → fills `finalCost`/`poNumber`/`invoiced`, recomputes size. |
+| Milestone / PM / state columns | 🟡 | **Parsed into `finance.json`** (`milestone`, `pm`, `state`) **but never surfaced** — DB has no columns for them and no UI reads them. **NTH** |
+| **Finance view** (invoicing / milestone / filters) | ❌ | No finance page. PO/invoiced only appear as an Excel column + waiting-PO signal. **NTH** |
+
+---
+
+## 9. Size CALC tool — **MISSING ENTIRELY** ❌ (NTH)
+
+Original `size-calc.js` (692 LOC): a labor→size estimator (inputs by **role × hours × rate**, config
+`lis_size_calc_cfg`, `MATCH`/`composite` algorithms). FORGE has a server `sizeOf(cost)` helper
+(`db.ts:156`) that assigns sizes to tickets, but **no interactive estimator tool/page**. Would live as
+`client/src/pages/SizeCalc/` + a `lis_size_calc_cfg` config key.
+
+---
+
+## 10. Config / options editors — **MISSING ENTIRELY** ❌ (mixed)
+
+FORGE loads config **read-only** from `config.json`/`app_config` (seeded once). The original `options.html`/
+`options.js` (629 LOC) is a rich settings surface with **no FORGE equivalent** (the FORGE Admin page is
+Users+Tokens only). Missing editors, each `GET /api/config` reads but nothing writes:
+
+| Setting (original id) | Status | Value |
+|---|:--:|---|
+| Brand colours editor (`brand_colors`, add/reset) | ❌ | **NTH** — 45 brands seeded, not editable in-app. |
+| SLA norms editors (otd/avgdays/asla/psla/ttfr/cresp) | ❌ | **MH** — required by §3a editable-norms gap. |
+| Insights thresholds editor (`insights_thresholds`) | ❌ | **NTH** |
+| Size cost-thresholds editor (`otd_cost_thresh`) | ❌ | **NTH** |
+| Card-field toggles (`cf-*`, 16) + mobile fields (`mf-*`) | ❌ | **NTH** — pairs with the board card-fields gap. |
+| Colleague names (`colleagueNames`) / LATAM assignees (`latamAssignees`) | ❌ | **NTH** — seeded, not editable. |
+| Display currency (`displayCurrency`) | ❌ | **LOW** — fixed GBP. |
+| Custom labels (`custom-labels`, clear-all) | ❌ | **NTH** |
+| SNOW field colours (`color-*`, 6) | ❌ | **LOW** — SNOW-page injection only, N/A to web app. |
+| Card layout breakpoints (`card_layout`) | ❌ | **LOW** |
+| Scan intervals / enables (analyticsIntervalHours, snRescanInterval, dashboardEnabled, jiraNotificationsEnabled, soundEnabled, analyzeButtonsEnabled) | ❌ | **LOW** — extension/SNOW-page behaviour. |
+| Teams bot (`teamsBotEnabled`, chat names) | ❌ | **LOW** — out of scope. |
+
+---
+
+## 11. Other
+
+| Item | Status | Note |
+|---|:--:|---|
+| AI Advisor / at-risk (`advisor-*.js`, `advisor-server/`) | ❌ (intended) | **Excluded per spec §1** ("user excluded AI"). Confirmed out of scope — do not port. |
+| Teams integration (`teamsChannelLink`, teams bot) | ❌ | Out of scope-ish. **LOW** |
+| Figma links (`figma-links.js`, 244 LOC) | ❌ | Optional per spec. **LOW** |
+| Weather | — (no gap) | Excluded per spec **and dead in the original** — manifest keeps open-meteo/nominatim host perms but no weather JS remains. Nothing to port. |
+| Docs page (`docs.html`/`docs.js`) | ❌ | In-app help. **LOW** |
+| Archive import / export | 🟡 | `scripts/dump-to-archives.mjs` + `npm run reseed` is a **manual CLI** path; no in-app import/export UI. **LOW** |
+| SCTASK support | ❌ | See §7 — RITM-only. **NTH** |
+| Extension popup RITM browser | 🟡 | See §7. **LOW** |
+| **New in FORGE (beyond original):** RBAC (4 roles), Users/Tokens Admin page, session auth, Postgres, server analytics engine | ✅ | Net-additive; no parity gap. |
+| Legacy/unrouted FORGE pages: `pages/Dashboard`, `pages/Stats` | — | `Dashboard` is unrouted (superseded by `Board`); `Stats` is a thin `/stats` count page. Housekeeping, not a gap. |
+
+---
+
+## 12. Recommended next phases (prioritized)
+
+**Phase A — PMs-KPI completion (highest value, biggest gap).**
+1. Add **year/period granularity + current-vs-previous-year** to the 6 SLA heatmaps (`getSlaHeatmaps` + period control). *(MH)*
+2. **Editable norms** — a `POST /api/config/norms` write path + inline norm panels (also unblocks the options editor). *(MH)*
+3. Charts **18 (workload/month per-PM)**, **20 (missing final cost)**, **21 (awaiting-PO Cost/Avg/Max sortable)**. *(MH)*
+4. Chart **19 engagement + `CalendarHeatmap`** (needs per-day activity/jira-movement ingest). *(MH, larger)*
+5. Charts **22/23** brand-market sub-cards. *(NTH)*
+
+**Phase B — Overall/Active fidelity.**
+6. **YoY pies #5/#6** (fair-window + full) as `DonutChart`s. *(MH)*
+7. **#17 Jira status durations** (requires `statusDurations` ingest — see Phase D). *(MH)*
+8. Per-year segmentation + drill + YoY on by-BU/by-brand/by-market/by-requester; **#15 min/median/max**; **#16 status-segmented brand**; **#/% toggle**; **CGO overlay**. *(NTH)*
+
+**Phase C — Board operability.**
+9. **Sort (14)** + **group-by (6)** controls. *(NTH)*
+10. **Toggleable card fields (16)** + badges (stale/PO/jira-stuck/missing-cost). *(NTH)*
+11. Filters: region EU/LATAM, requester, jira-status/assignee, staleness, custom labels. *(NTH)*
+12. **7th synthetic Closed/Awaiting-PO column.** *(MH)*
+
+**Phase D — Deeper sync (unblocks a lot above).**
+13. Extend the collector: **richer RITM fields + closed scan + Jira (statusDurations, jira_board_state) + finance scan + SCTASK.** *(MH — currently rich data is seed-only and goes stale.)*
+
+**Phase E — Insights depth.**
+14. **Excel export of the insights subtree** (PM→Size→Ticket); waiting-PO L1/L2/L3 drill; sortable PM table + hidden-PM support; region/PO/people filters. *(MH for export, else NTH.)*
+
+**Phase F — Standalone features.**
+15. **Jira board page** (needs Phase D jira ingest). *(MH for Jira ops.)*
+16. **Options/config editor** page (brand colours, thresholds, card fields, colleagues/region, currency, custom labels). *(NTH.)*
+17. **Size CALC** estimator; **finance view** (milestone/invoicing — data already parsed). *(NTH.)*
+
+**Do not port:** AI Advisor/at-risk, weather (excluded); Teams/Figma/ADO board/docs page (low/optional).
+
+---
+
+## 13. Addendum — refinements from the source inventory (corroborated)
+
+A parallel deep read of the initial app's source confirmed the above and adds:
+
+- **Board columns:** the original renders **5 live columns** (Open/Assigned, On Hold, WIP, Customer-replied,
+  Awaiting) **+ the synthetic Closed/Awaiting-PO** column; Unassigned is folded into Open/Assigned. FORGE
+  builds 6 (splits Unassigned out) and still lacks the synthetic 7th — the §4 "7th column MH" gap stands.
+- **Per-chart Excel export:** in the original **every analytics chart** carries its own Excel button
+  (`_xlData`/`_xlBtn` → `xl-export.js`). FORGE has **no per-chart export** — only the board export.
+  Add as an **NTH** gap across Overall/Active/PMs-KPI. Insights groups also each export (see §5, MH).
+- **Missing-tickets overlay** lives on the **3 SLA/OTD charts** (OTD/AvgDays/Assign/Preview), grouping the
+  timestamp-less tickets by current Jira status (reachedUat / beforeUat / noJira) — reclassify the §5
+  "missing-tickets overlay" as part of the **PMs-KPI SLA charts** (still ❌).
+- **Collector scope:** the original SN scan handles **RITM + SCTASK + INC** (not just RITM), computes
+  per-ticket `statusDurations` from status-change history, and runs a **Jira scan as a tail after every SN
+  scan**. FORGE's collector does none of this (§7) — add **INC** alongside the SCTASK gap.
+- **Threshold value drift:** FORGE `config.json` has `waitingPo3: 18` and `customerReplied: 1`, vs the
+  original defaults `waitingPo3: 21` / `customerReplied: 3`. Minor, but reconcile when the norms/thresholds
+  editor lands (§10). **LOW**
+- **Engagement KPI** reads the **live board** (not `ticketsMeta`), with twin Assist|Jira calendar heatmaps
+  and a ~14-column sortable drill-down — confirms the §3b #19 scope (**MH**, larger build).
+- **Size CALC** uses 4 currencies (GBP/EUR/MXN + MXN·Brazil uplift ×1.111), roles DEV/CM/QA + auto-PM,
+  PM-budget tiering (`pmThreshold`/`pmHi`/`pmLo`) — confirms §9.
+- **AI Advisor** is a full masked-digest + Node-bridge-to-Claude-CLI subsystem (`advisor-*.js` +
+  `advisor-server/`) with the At-risk breach engine — **correctly excluded**, do not port.
+- **Archive import/export** exists as in-app **⬇ Archive / ⬇ Active** buttons in the original (FORGE has only
+  the `dump-to-archives.mjs` CLI) — the §11 🟡 stands.
+
+None of these change the phase priorities; they sharpen scope for Phases A, D, and E.
+
+## Next
+principal — sequence Phase A (PMs-KPI) as the next build; confirm which board/insights sub-items are in v1 scope.

claude_artifacts/designer-20260827-180842.md

@@ -0,0 +1,31 @@
+# designer — Excel export design pass
+
+**Date:** 2026-08-27 · Task: review the ticket Excel export (column sizes, colours, styling).
+
+## Before
+`utils/excel.utils.ts` had a bare schema — no widths, no header styling, no alignment,
+raw SNOW timestamps, no number formatting. Functional but ugly.
+
+## After (FORGE-branded, token-derived colours)
+- **Header row**: indigo `#6366F1` (`--primary`) background, white **bold** centred text,
+  row height 22, **frozen** (`stickyRowsCount: 1`) so it stays visible when scrolling.
+- **Column widths** tuned per field: Number 15, State 20, Assignee/Requester 22,
+  Short description **46 + wrap**, Group 30, Brand/Market 14, Lifetime/In-state 12,
+  Last activity 14, Jira 14, Jira key 12, Cost 11, Ccy 7, PO 15, Link 34.
+- **Alignment**: numeric columns (Lifetime, In state, Cost) right-aligned; dates + Ccy
+  centred; text left. All vertically centred.
+- **Number format**: Cost `#,##0` (thousands separators).
+- **Dates**: `Last activity` rendered as a short local date (`25 Aug 26`) instead of the raw
+  `2026-08-25 12:00:00` SNOW timestamp.
+- **Grid**: thin light-grey borders `#E2E8F0` (`--border`) on every cell.
+- **Font**: Calibri 11 (header) / 10 (body).
+- Columns reordered so the human-readable ones (desc, brand, market, requester) sit before
+  the group/analytics fields.
+
+## Evidence
+- client `tsc --noEmit` → clean; `vite build` → OK.
+- Node render (`write-excel-file/node`, all style options): produced a valid **"Microsoft
+  Excel 2007+"** file (PK/zip header, 4 KB) — every styling option accepted, no throw.
+
+## Next: done — export honours the FORGE palette + is readable. (Excel colour-coding by
+state/size intentionally skipped to keep it clean; can add if wanted.)

claude_artifacts/devops-20260827-182020.md

@@ -0,0 +1,35 @@
+# devops + designer — Synology deploy script, .env, and RITM→SNOW link
+
+**Date:** 2026-08-27
+
+## Synology deploy (devops) — ported from the Husky template (per user request)
+Two scripts, matching Husky's proven pattern (superseded my first single-script cut):
+- **`scripts/push-to-nas.sh`** (local, `npm run deploy`): preflight (SSH key pinned via
+  `-i $NAS_KEY -o IdentitiesOnly=yes` — fixes the WebStorm multi-identity MaxAuthTries
+  failure) → test gate → rsync tree to NAS (openrsync→tar-over-ssh fallback for macOS)
+  → run `deploy.sh` over SSH forwarding `--pull`/`--fresh`. Excludes node_modules/dist/
+  `.env`/`.deploy.env`/`storage-dump.json`/`.idea`/`claude_artifacts`.
+- **`scripts/deploy.sh`** (on the NAS): Synology PATH hardening + `DOCKER_SUDO` autodetect
+  → optional `git pull` → `compose build` → `up -d --remove-orphans` → poll app container
+  for Docker `healthy` (≤120s). `--fresh` = `down --remove-orphans` **never `-v`** → the
+  `forge-db` volume is preserved. Adapted from Husky: removed the `ai.env` check, fixed the
+  `.env` required-vars message, `HOST_PORT_FALLBACK=3089`, corrected all "external Postgres /
+  no volumes" comments (FORGE bundles the db + `forge-db` volume).
+- **Config baked in** (defaults = the real NAS: `192.168.50.2` / `d.tkachenko` / `2323` /
+  `/volume1/docker/forge` / `~/.ssh/id_ed25519`), overridable via env or an optional
+  `.deploy.env` (`.deploy.env.example`, gitignored). Both scripts `bash -n` clean + executable.
+- **`.env.example`** rewritten: local vs prod split; compose overrides DATABASE_URL/PORT/NODE_ENV;
+  prod requires `SESSION_SECRET`, `AUTH_USER`, `AUTH_PASS`, `POSTGRES_PASSWORD`. Stale `ADMIN_KEY`
+  removed (tokens are admin-role gated now); port note corrected to the published lane.
+- **`package.json`** `deploy` script added. **`docs/SETUP.md`** §6 documents the flow.
+- Secrets never leave the NAS: `.env` is created once on the NAS and is never synced.
+- NOT run — deploy needs explicit sign-off + a reachable NAS; script is created only.
+
+## RITM → SNOW link (designer)
+- The ticket **number is now a link to ServiceNow** in the table Number column and on
+  board cards — inline external-link glyph, opens a new tab, `stopPropagation` so it
+  doesn't also open the detail modal. Removed the now-redundant separate external icons.
+- `client/src/components/TicketTable/index.tsx` + `.module.scss` (`.numLink`),
+  `components/Board/BoardCard/index.tsx` + `.module.scss`. tsc + build clean.
+
+## Next: done. (Deploy: fill `.deploy.env`, create the NAS `.env`, `npm run deploy`.)

claude_artifacts/engineer-20260827-180000.md

@@ -0,0 +1,43 @@
+# engineer — RBAC + Token page + Filtered Excel export + full-width + donut fix
+
+**Date:** 2026-08-27 · From: [principal-20260827-175448](principal-20260827-175448.md)
+
+## What changed
+
+### 1. Roles / RBAC
+- `server/db.ts`: `app_users.role TEXT NOT NULL DEFAULT 'viewer'` (additive `ALTER … ADD COLUMN IF NOT EXISTS`).
+  `seedUser` forces the bootstrap `AUTH_USER` to `admin` (and repairs pre-role rows). Added
+  `Role`/`ROLES`/`isRole`, `listUsers`, `createUser` (23505 → 'exists'), `deleteUser`.
+- `server/auth.ts`: session `user = {username, role}`; `verifyLogin` returns the role;
+  `requireRole(min)` — 401 unauth, **403** under-privileged.
+- `index.ts` route gates:
+  - viewer: `/api/tickets`, `/api/tickets/:number`, `/api/stats`, `/api/config`
+  - pm: `/api/analytics/*`, `/api/insights`
+  - lead: `GET/POST /api/users`, `DELETE /api/users/:username`
+  - admin: `GET/POST /api/tokens`, `POST /api/tokens/:id/revoke`
+  - **Only admin may create an admin** (server 403 + client dropdown limits leadership to ≤lead).
+- Client: `roleAtLeast`/`ROLE_LABELS`; App route guards (reports→pm, /admin→lead);
+  Sidebar shows Analytics only for pm+, Admin only for lead+; TopBar shows role.
+
+### 2. API token page — `pages/Admin` (Tokens tab, admin only)
+List (label/id/last-used/expires/revoked) + create (raw `fg_…` shown once, copy) + revoke.
+Replaces the `x-admin-key` HTTP gate with the admin session role. `mint-token` CLI unchanged.
+
+### 3. Filtered Excel export
+`utils/excel.utils.ts` (`write-excel-file` dep, as in Husky) → exports the board's **currently
+filtered** rows. Button in the board header. 17 columns incl. lifetime, days-in-state, cost, PO, link.
+
+### 4. Also
+- Overall verifier REDO fixed: donut now fed `byRequesterShare` (full 966-ticket distribution),
+  not the top-20 nested `byRequester` → center total 966, correct %.
+- All analytics pages `max-width: none` (charts span the full container width).
+
+## Verification (live, role forge_app DB)
+- server tsc / client tsc clean; client vite build OK; `npm test` 9 pass.
+- Gating matrix reproduced end-to-end: viewer → tickets/config 200, analytics/insights/users/tokens **403**;
+  pm → analytics/insights 200, users/tokens **403**; admin → all 200. viewer POST /api/users **403**.
+- Bootstrap `admin` row correctly migrated to role `admin` (not the 'viewer' default).
+
+## Next
+security — audit the authz (public domain): privilege escalation, self-delete/last-admin, token exposure.
+verifier — gate the full change.

claude_artifacts/engineer-20260827-185932.md

@@ -0,0 +1,25 @@
+# engineer — Extension Jira sync (SNOW + Jira, per ADR)
+
+**Date:** 2026-08-27 · Implements [architect-20260827-180544](architect-20260827-180544.md). v2.2.0.
+
+## Built
+- **Server** `server/db.ts` `attachJira(items)` — attach-only: `UPDATE tickets SET
+  jira = COALESCE(jira,'{}') || $2::jsonb, jira_key = COALESCE($3, jira_key) WHERE number=$1`.
+  Never touches status/state/assignee/activity. `index.ts` `POST /api/sync/jira`
+  (token-authed, rate-limited) → validates {items:[{number,jira,jiraKey}]} → attachJira.
+- **Extension** `background.js`: `collectFromJira(cfg)` pulls `/rest/agile/1.0/board/{id}/issue`
+  (paged), auth = Basic(email+token) or Bearer PAT; resolves RITM via customfield_26001 / `RITM\d+`;
+  builds {number, jira:{key,status,statusChangedAt,assignee,url:baseUrl/browse/KEY}}; POSTs to
+  `/api/sync/jira`. Wired into runSync AFTER SNOW; Jira is best-effort (never fails SNOW).
+  `options.html/js`: Jira base URL, email, API token/PAT, board id(s); requests host perm for the Jira origin.
+
+## Verified (live, remote DB)
+- POST /api/sync/jira for RITM2653436 → matched:1; AFTER: status/state/assigned_to UNCHANGED,
+  jira_key=WFN-605, jira.status In QA, custom url support.dataart.com/browse/WFN-605. no-token → 401.
+- server tsc clean; extension node --check OK; 9/9 tests. DB restored via reseed.
+
+## Not yet (follow-ups)
+- Jira changelog fetch → statusDurations/movements (chart #17/#19). v1 does status/key/assignee/url.
+- Live Jira REST untested (needs a real instance + creds); logic follows the ADR.
+
+## Next: done (v1). Configure the extension options with the Jira board id + token to use it.

claude_artifacts/engineer-20260827-190753.md

@@ -0,0 +1,22 @@
+# engineer — Jira statusDurations + movements + chart #17
+
+**Date:** 2026-08-27 · v2.3.0
+
+## Built
+- **Seed**: `dump-to-archives.mjs` enriches the jira map with `statusDurations` (ms) from
+  `jira_board_state.colIssues[*]._statusDurations` (keyed to RITM via customfield_26001), and
+  adds `jiraColumns` (workflow order) to config. 95 jira entries / 73 DB tickets get durations.
+- **Types**: `JiraInfo` += `statusDurations: Record<string,number>`, `movements:{at,who?,from?,to?}[]`.
+  `ForgeConfig` += `jiraColumns`.
+- **Server**: `analytics.getJiraDurations()` averages `jira.statusDurations` per status (ms→days),
+  in `jiraColumns` order, min-2 tickets. `GET /api/analytics/jira-durations` (requireRole pm).
+- **Client**: Active-stats page fetches it and renders a "Jira status durations (avg days)" BarList.
+- **Extension**: `collectFromJira` adds `expand=changelog`; `jiraFromChangelog(issue)` reconstructs
+  time-per-status (created → transitions → now) and movements, sent inside `jira`.
+
+## Verified (live)
+- `/api/analytics/jira-durations` → 18 statuses, workflow-ordered (Analysis…Closed) then extras;
+  e.g. UAT 16.1d/21, Closed 23.5d/16, In-Progress 4.9d/37. server+client tsc clean; build OK; 9/9 tests.
+
+## Not yet: live changelog untested (no Jira instance); movements only stored (chart #19 later).
+## Next: done.

claude_artifacts/principal-20260827-175448.md

@@ -0,0 +1,50 @@
+# principal — Auth/RBAC + Token page + Filtered Excel export
+
+**Date:** 2026-08-27
+**Request:** (1) Users with roles to log into the portal; (2) an API-token creation page;
+(3) save tickets to Excel honoring the active filters.
+
+## 1. Roles & capability model
+
+Internal role keys (hierarchy `viewer < pm < lead < admin`), display labels:
+
+| key | label | Tasks (board/tickets/closed) | Reports (stats/insights) | Add users | API tokens |
+|---|---|:--:|:--:|:--:|:--:|
+| `viewer` | Viewer | ✓ | — | — | — |
+| `pm` | PM | ✓ | ✓ | — | — |
+| `lead` | Project Leadership | ✓ | ✓ | ✓ | — |
+| `admin` | Admin | ✓ | ✓ | ✓ | ✓ |
+
+- `/api/config` + `/api/stats` stay viewer-accessible (board needs colours/colleagues/counts).
+- `/api/sync` stays token-only (extension), unchanged.
+- Server enforces per-route via `requireRole(min)`; client hides nav/pages a role can't use
+  (defense-in-depth; the server is the gate).
+- Seeded `AUTH_USER` account is forced to role `admin` (bootstrap).
+
+## 2. Route → minimum role
+
+| Route | Min role |
+|---|---|
+| `GET /api/tickets`, `/api/tickets/:number`, `/api/stats`, `/api/config` | viewer |
+| `GET /api/analytics/*`, `/api/insights` | pm |
+| `GET/POST /api/users` (list/create) | lead |
+| `GET/POST /api/tokens` (list/create) | admin |
+
+## 3. Token page
+Admin-only page: list existing tokens (label, id, created, last-used, expiry, revoked) +
+create (returns the raw `fg_…` once) + revoke. Replaces the `x-admin-key` HTTP gate with the
+admin session role; the `mint-token` CLI stays.
+
+## 4. Filtered Excel export
+Board/tickets "Export Excel" button → exports the CURRENTLY FILTERED rows client-side via
+`write-excel-file` (the Husky template's dep). Columns: Number, State, Assignee, Group, Brand,
+Market, Requester, Lifetime(d), Days-in-state, Last activity, Jira status, Cost, Link.
+
+## Plan / routing
+- dba/engineer — `app_users.role` (additive), user CRUD, `requireRole`, route gating.
+- security — audit the authz before merge (public domain).
+- engineer — Admin page (Users + Tokens tabs), export util, role-gated nav.
+- verifier — gate the result.
+
+## Next
+engineer — implement server RBAC + user/token endpoints, then the client Admin page + export.

claude_artifacts/security-20260827-180635.md

@@ -0,0 +1,73 @@
+# security — RBAC + token-management + user-management audit
+
+**Date:** 2026-08-27 · From: [engineer-20260827-180000](engineer-20260827-180000.md), [principal-20260827-175448](principal-20260827-175448.md)
+**Scope:** the new RBAC / API-token / user-management surface on the public domain. Read-only audit (no edits).
+**Out of scope (per task):** DB-superuser-in-`.env` (tracked separately), analytics math.
+
+## Method / evidence
+- Read `server/auth.ts`, `server/tokens.ts`, `server/db.ts`, `index.ts`, client `App.tsx`/services.
+- Full route inventory via grep (`app.get|post|put|delete|use`) — 15 API routes, all accounted for below.
+- Grepped for the removed `ADMIN_KEY`/`x-admin-key` gate → **no matches** (fully removed). No `dangerouslySetInnerHTML` in `client/src`.
+- Live DB (role `forge_app`, `31.133.115.50:5440/forge`): `current_user=forge_app`; `SELECT count(*) FROM app_users WHERE role='admin'` → **1**; the sole account `admin` is role `admin` (bootstrap migrated correctly). No destructive SQL run.
+
+## Verified correct (no action)
+- **Route gating matches the spec matrix.** viewer: `/api/tickets`,`/api/tickets/:number`,`/api/stats`,`/api/config` (`requireAuth`). pm: `/api/analytics/overview|sla`,`/api/insights` (`requireRole('pm')`). lead: `GET/POST /api/users`,`DELETE /api/users/:username`. admin: `GET/POST /api/tokens`,`POST /api/tokens/:id/revoke`. `/api/sync` token-only.
+- **401 vs 403 correct** (`auth.ts:46-61`): unauth→401, under-privileged→403.
+- **Role cannot be spoofed** — read from the server-side PG session store (`req.session.user`, `auth.ts:14`), never from client input.
+- **Admin-creation guard present** (`index.ts:249`): non-admin creating `role==='admin'` → 403.
+- **`isRole` validation** (`db.ts:191`): arbitrary/invalid role string → 400 `invalid_role`.
+- **Self-delete guard present** (`index.ts:262`).
+- **Tokens:** admin-only; raw `fg_…` returned once (`tokens.ts:81-89`), only `sha256(secret)` persisted; `listTokens` selects id/token_id/label/dates/revoked — **never `token_hash`** (`tokens.ts:97-106`); revoke honored (`resolveToken` filters `revoked=false AND not expired`, `tokens.ts:62`); constant-time `timingSafeEqual` compare.
+- **Cookie hygiene:** httpOnly, sameSite=lax, secure-in-prod, `SESSION_SECRET` required in prod (`process.exit(1)`), login rate-limited (20/15min), bcrypt dummy-hash compare for unknown users (timing-uniform), bcrypt cost 12.
+- **No secret leak:** `/api/users`→id/username/role/dates only (no `password_hash`); `/api/me`→`{username,role}` only.
+- **Client gating is defense-in-depth only** (`App.tsx` `Navigate` redirects); the server is the true gate.
+
+---
+
+## Ranked findings
+
+### HIGH-1 — A `lead` can delete `admin` accounts (no target-rank check)
+**Where:** `index.ts:260` (`DELETE /api/users/:username` gated only at `requireRole('lead')`) + `server/db.ts:227` (`deleteUser` = unconditional `DELETE FROM app_users WHERE username=$1`).
+**Exploit:** The create path forbids a non-admin from making an admin (`index.ts:249`), but the delete path has **no symmetric rank check** — a `lead` (or a compromised lead session) can delete any user, admins included. A lead can therefore remove every admin even though it can never create one.
+**Impact:** Privilege-boundary violation. Combined with "only an admin creates an admin," a lead that deletes all admins permanently strips the org of token-management / admin-create ability until a server reboot re-seeds `AUTH_USER`.
+**Fix:** Enforce actor-outranks-target in the delete path — refuse deleting a user whose role rank ≥ the actor's (a lead may not delete admins/leads), or raise `DELETE /api/users/:username` to admin-only. Hand to **engineer** (route + `deleteUser`).
+
+### HIGH-2 — Last-admin lockout (no guard on deleting/removing the final admin)
+**Where:** `server/db.ts:227` `deleteUser`; no count check anywhere. There is **no demote endpoint** (confirmed — only `seedUser` ever writes `role`, `db.ts:179`), so deletion is the only removal path.
+**Exploit:** Live state is a **single** admin (`admin`). Deleting it (reachable today by any lead per HIGH-1, or by a second admin) leaves zero admins. `/api/tokens*` then 403s for everyone; no one can create a new admin.
+**Impact:** Availability/integrity loss of the admin tier. Recovery requires shell/redeploy access — `seedUser` re-inserts `AUTH_USER` as admin only when its row is absent (`db.ts:176-185`), and only that one account.
+**Fix:** Guard against removing the last remaining admin (`SELECT count(*) … role='admin'` before delete; refuse if target is the only admin). Same for any future demote. Hand to **engineer/dba**.
+
+### HIGH-3 — Deleting a user does not invalidate their active session
+**Where:** `auth.ts:46-61` (`requireAuth`/`requireRole` read identity+role from `req.session.user` set once at login, `index.ts:47`); session `maxAge` 7 days (`auth.ts:40`); session rows persist in `user_sessions`. `deleteUser` (`db.ts:227`) removes only the `app_users` row.
+**Exploit:** An off-boarded/removed user keeps their cookie working at their cached role for up to 7 days. A deleted **lead** still passes `requireRole('lead')` and can keep deleting users (feeding HIGH-1) until session expiry. Role is never re-validated against the DB per request.
+**Impact:** On a public domain, account removal is not effective access revocation; no mechanism to force-logout a user.
+**Fix:** On delete (and any future role change), purge that user's sessions — e.g. `DELETE FROM user_sessions WHERE (sess->'user'->>'username') = $1` — or re-check user existence/role from `app_users` per request (short-cached). Hand to **engineer/dba**.
+
+### MEDIUM-1 — No session-fixation protection on login
+**Where:** `index.ts:43-49` assigns `req.session.user = ok` on the pre-existing session id; no `req.session.regenerate()` at the privilege transition.
+**Exploit:** Classic session fixation — an attacker who can plant a session cookie (e.g. via a sibling/adjacent context) rides the same id after the victim authenticates and it becomes privileged. Mitigated but not eliminated by httpOnly + sameSite=lax.
+**Fix:** Regenerate the session id on successful login before writing `user`. Hand to **engineer**.
+
+### MEDIUM-2 — Weak password policy on a public login
+**Where:** `index.ts:246` — minimum 6 chars, no complexity/denylist. Throttle is per-IP only (`loginLimiter` 20/15min, `index.ts:41`).
+**Exploit:** Created accounts can carry trivially guessable passwords; per-IP throttling doesn't stop distributed/slow guessing against a public domain.
+**Fix:** Raise minimum (~12 chars) and/or add a zxcvbn/denylist check; consider per-account lockout in addition to per-IP. Hand to **engineer**.
+
+### LOW-1 — No HTTP security headers (helmet absent)
+**Where:** app has no `helmet`/CSP (grep empty); serves SPA + API on a public domain.
+**Impact:** No `X-Frame-Options`/`frame-ancestors` (clickjacking of the authenticated UI), no HSTS, no `X-Content-Type-Options`. Adjacent to the auth perimeter, not RBAC-specific.
+**Fix:** Add `helmet` with a same-origin CSP + HSTS-in-prod. Hand to **engineer/devops**.
+
+### LOW-2 — Silent no-op on delete/revoke of a non-existent id
+**Where:** `db.ts:227` `deleteUser`, `tokens.ts:108` `revokeToken` — no affected-row check. `DELETE /api/users/:missing` and revoke of an unknown token id both return `{success:true}`.
+**Impact:** Cosmetic/idempotency only (no enumeration leak — always success). Consider returning 404 when 0 rows affected so the admin UI reflects reality. Hand to **engineer**.
+
+### LOW-3b (informational) — CSRF on state-changing POSTs rests on `sameSite=lax`
+State-changing routes (`/login`, `/api/users`, `/api/tokens*`, `DELETE /api/users/:username`) carry no CSRF token; cross-site protection is provided by the `sameSite=lax` cookie (`auth.ts:38`). Defensible today. If any of these routes ever move to `sameSite=none` (e.g. cross-origin embedding), add an explicit CSRF token. No fix required now.
+
+### LOW-3 (informational) — Leads self-propagate the user-management tier
+**Where:** `index.ts:248-249` blocks only `role==='admin'` for non-admins; a lead may create unlimited additional `lead`s. This is per the capability spec ("leadership tops out at lead"), so it is by design — but note it compounds HIGH-1/HIGH-3: a lead can mint a co-lead, and either can delete the sole admin. No fix required; revisit if leads should not be able to grant lead.
+
+## Next
+engineer/dba — fix HIGH-1 (target-rank check on delete), HIGH-2 (last-admin guard), HIGH-3 (session purge on delete). engineer — MEDIUM-1 (session regenerate), MEDIUM-2 (password policy), LOW-1/2. Then re-audit the delete path.

claude_artifacts/verifier-log.md

@@ -0,0 +1,18 @@
+- 2026-08-27 16:05 · security · FORGE public-domain read-only audit · VERDICT: REDO · re-ran: git ls-files/check-ignore (data+storage-dump NOT ignored, git add -n stages both), read index.ts+tokens.ts+tickets.ts+db.ts+Dockerfile+compose+.env, grep client href · probed: anon GET /api/tickets has no auth middleware=public PII; storage-dump.json=9.3MB real @reckitt.com emails would be git-committed (MISSED); javascript: href in TicketTable:60 unsanitized; ADMIN_KEY-unset fails closed 403 · REDO: 1 material missed PII file + 2 framing fixes
+- 2026-08-27 16:06 · security · FORGE audit RESUBMIT (4 gaps fixed) · VERDICT: PASS · re-ran: grep -c unique reckitt emails=15 (agent said 14, trivial undercount), confirmed storage-dump.json exit-1 + git add -n stages it, index.ts:21 global json pre-auth, no read-route limiter · probed: storage-dump git-leak vector; LOW-7 pre-auth buffering; rate-limit gap on reads · PASS
+- 2026-08-27 16:08 · architect/review · FORGE fidelity+template assessment · VERDICT: REDO · re-ran: read db.ts/index.ts/background.js/tokens.ts/Dockerfile/compose + node seed inspect(active=100,jira=127,closed=965,all RITM) + grep Closed/Stats/getStats · probed: sync-payload-vs-upsert destructive(confirmed), unauth GET routes(confirmed), RITM-only collector+docs(confirmed), token/Dockerfile parity(confirmed) · REDO: 2 grounding gaps (wrong seed counts; missed mixed-currency cost sum)
+- 2026-08-27 16:08 · reviewer · FORGE correctness+convention review · VERDICT: REDO · re-ran: root/client tsc=0, vitest 3+6=9 pass, lint=eslint-not-found, pg DATE parse off-by-one confirmed (Kyiv->08-24, UTC->08-25) · probed: non-string activity.t crash (no error boundary confirmed), CLIENT_DIST dev overshoot, admin-key !== , extension host-permission grant (handled in options.js), MV3 SW async lifecycle · REDO: 1 gap (extension area-3 absent from findings/affirmations; substance sound on my audit)
+- 2026-08-27 16:09 · architect/review · FORGE fidelity+template assessment (round 2) · VERDICT: PASS · re-ran: node seed recount(active=100,jira=127,closed=965,all RITM) + README:47-48 grep(confirms stale '111 active'/'846 closed') + reconfirmed fromClosed drops currencyCode & Closed totalCost=sum(finalCost) · probed: corrected counts match source, README doc-drift grounded, currency mixed-sum grounded · PASS
+- 2026-08-27 16:17 · principal(3-review batch) · FORGE review fixes: dates/upsert/sanitize/jira/seed · VERDICT: PASS · re-ran: server tsc=0, client tsc=0, npm test 9pass(6+3), live PG TEMP-table smoke (active-wins+dateOnly+COALESCE all held under +3 TZ), hostile sanitizeActivity/parseDate probes · probed: toISOString off-by-one (dateOnly emits 2025-12-18 where due_date=Date@T22:00Z would shift), thin-sync nulling richness (COALESCE+CASE preserved finalCost/desc/brand/jira/84-activity), non-string activity.t & TS-bypass parseDate (all coerced/null, no throw) · PASS
+- 2026-08-27 16:29 · security · read-API auth + least-priv DB role swap · VERDICT: PASS · re-ran: server tsc=0, client tsc=0, client build OK, npm test=9 pass, live DB (forge_app rolsuper/createdb/createrole=f, owns tickets/api_tokens/app_users/user_sessions, tickets=966), live boot smoke (no-session reads=401, /healthz=200, /api/sync no-token=401, wrong+unknown pw=401, correct login=200 HttpOnly+SameSite=Lax cookie, authed stats=966/100/866, /api/me=admin, logout then stats=401) · probed: unguarded read route (none), fail-closed after logout, timing-uniform unknown-user, SQLi on read filters (parameterized) · PASS
+- 2026-08-27 17:01 · analytics-milestone(P0-2) · ingest+engine+client analytics · VERDICT: PASS · re-ran: SQL coverage(966/100/866,ttfr953/cd844/todo659/uat519/size774/ob954,cfg8keys) + math(rev2026-07=24160,Finish190/Durex123,Health167/Hygiene166,median42/avg65,Alesya 73.06d/404/15%) all reproduced via SQL+live app; server tsc OK, client tsc OK, vitest 9 pass, vite build OK · probed: unauth 401 on all 3 endpoints(live boot), empty/insufficient series guards, unmapped ccy NO/PART→rate1, DATE local-parts no UTC shift, no dangerouslySetInnerHTML · PASS
+- 2026-08-27 17:05 · engineer · Phase3 Active tab + board redesign · VERDICT: PASS · re-ran: server tsc OK, client tsc OK, vite build OK, npm test 9 pass, live DB board-dist {awaiting65,hold6,open5,replied17,wip7}=100, progress 24→7wip/17replied, app_config colleagues 8 incl Alesya · probed: colleague-rule wip-vs-replied split (reproduced), empty unassigned column (0→No tickets), null last_activity_at (1 row→timeAgo em-dash), read-only (no PATCH/PUT/DELETE/DnD; only POST is login/logout; cards link to ServiceNow) · PASS
+- 2026-08-27 17:27 · engineer/insights · PM Insights phase (finance ingest + engine + client) · VERDICT: PASS · re-ran: server tsc=0, client tsc=0, client build OK, tests 3+6=9 pass, DB counts active_cost=54/po_notnull=860/active_po_blank=73 exact, getInsights live=totalAlerts65/revAtRisk77373/waitingPo74(14·1·12)/topPM Alesya, live E2E unauth=401→login200→insights200 · probed: distinct-vs-doublecount (ΣgroupProb=65==totalAlerts==ΣpmAlerts, revreconciles), info-groups excluded (lifetime32/inactive6 not in 65), unmapped currency string→rate1 no crash + 46 null-cost→0, auth gate live 401 · PASS
+- 2026-08-27 17:55 · engineer · Overall tab full fidelity · VERDICT: REDO · re-ran: server tsc OK, client tsc OK, npm test 9 pass, vite build OK, live psql byBrand/byRequester nested aggregation · probed: donut source cap (top-20 feeds share donut → center 'total'=375 not 966, %s inflated 2.6x), tie-order Strepsils/Nurofen, YoY single-year null, div-by-zero guards, auth 401 gate · REDO: 1 gap (donut misrepresents ticket share)
+- 2026-08-27 18:07 · engineer · RBAC+tokens+filtered-xlsx+full-width+donut · VERDICT: PASS · re-ran: server tsc 0, client tsc 0, client vite build OK, tests 9 pass (6 client+3 root), live DB introspection · probed: lead POST role=admin blocked server-side 403 (index.ts:249); listTokens SQL omits token_hash (tokens.ts:98); donut center=966 live (all 966 rows have requester, Rowena 74≈8% not 375/20%); resolveToken filters revoked=false+expiry; export passes filtered set; app_users.role additive text NOT NULL default viewer, no column reshaped; only admin(role=admin) remains · PASS (note: no last-admin-delete guard — lead can delete an admin, non-blocking per task)
+- 2026-08-27 18:09 · security · RBAC+token+user-mgmt audit · VERDICT: PASS · re-ran: greps(ADMIN_KEY/dangerouslySetInnerHTML/helmet/regenerate→none; route inventory→14 API routes match matrix) + read auth/db/tokens/index + client App/admin.service · probed: lead→delete-admin(HIGH-1 real), deleted-session-survives(HIGH-3 real), last-admin-lockout no-demote-endpoint(HIGH-2 real), listTokens no token_hash(holds) · PASS
+- 2026-08-27 18:10 · architect · ADR: extension single sync engine SNOW+Jira · VERDICT: REDO · re-ran: grep server/db.ts upsert (clobber confirmed L466-483, jira=COALESCE L488), index.ts normalizeIncoming (status→active L172), manifest.json (host_perms confirmed), background.js (CHUNK=100/world:MAIN/offset<2000 confirmed), types.ts+client ticket.types.ts · probed: movements JSONB sub-field already declared {at,who}[] in 2 type files (ADR claims 5-field shape + adds conflicting {from,to,at}); no-RITM skip logic; separate-endpoint clobber-avoidance verified sound · REDO: 1 gap
+- 2026-08-27 18:12 · architect · ADR: extension single sync engine SNOW+Jira (round 2) · VERDICT: PASS · re-ran: re-read ADR §1/§5/§11 vs code — JiraInfo 6 fields confirmed (server/types.ts:11-18, movements:17; client ticket.types.ts:9-16,:15); §5 reuses {at,who} + cites both files + flags statusDurations/board as new additive type-touch; §11 Types:additive bullet present · probed: movements shape now honest (no invented {from,to,at}); no runtime consumer claim matches grep; separate-endpoint clobber-avoidance still intact · PASS
+- 2026-08-27 19:02 · engineer · Extension Jira-sync (SNOW+Jira attach-only) · VERDICT: PASS · re-ran: server tsc 0, node --check bg/options/popup OK, tests 9 pass (6 client+3 root), live psql TEMP-TABLE smoke of exact attachJira UPDATE (real RITM2653436 untouched) · probed: Jira payload with top-level "status"+SQLi string lands ONLY inside jira jsonb (ticket status stays closed, table survives)→no clobber/no injection; '||' merge preserves omitted keys (extraKept=KEEPME, assignee=Old Person); jira_key WFN-100→605 via COALESCE; non-matching number→UPDATE 0 (no stub); endpoint requireToken not session (401 w/o bearer, index.ts:241); schema additive-only (jira JSONB pre-existing, all ALTER ADD COLUMN IF NOT EXISTS) · PASS
+- 2026-08-27 19:11 · engineer · Jira statusDurations+movements+chart #17 · VERDICT: PASS · re-ran: server+client tsc=0, root vitest 3/3, client vitest 6/6, live SQL agg on tickets(jira?statusDurations)=73 rows, booted dist+curl endpoint · probed: 401 unauth (got 401), min-2 filter drops Cancelled n=1, ordering known-workflow-first + extras avgDays-desc, ms/86.4M day math matches SQL exactly (UAT 16.14d/21, Closed 23.51d/16, InProgress 4.90d/37), guards NaN/<=0, client null-safe (jiraDur=[] + length>0 gate), static SQL no user input, additive jsonb no DDL · PASS
+- 2026-08-29 11:20 · devops · SSH NAS host → mycloud.dp.ua:2323 · VERDICT: PASS · re-ran: grep 192.168.50.2 (only comment+artifact), grep NAS_HOST (all mycloud), bash -n push-to-nas.sh OK · probed: all ssh/scp/rsync hops use $NAS_HOST not hardcoded IP; port 2323 preserved; illustrative comment+historical artifact intentional · PASS

client/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="theme-color" content="#6366f1" />
+    <title>FORGE 2.0 — ServiceNow Tickets</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

client/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "forge-client",
+  "private": true,
+  "version": "2.3.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "fflate": "^0.8.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.14.1",
+    "sass": "^1.99.0",
+    "write-excel-file": "^2.3.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^5.4.0",
+    "vitest": "^2.1.9"
+  }
+}

client/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#6366f1"/>
+  <g stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M16 5.5V26.5M7 10.75 25 21.25M25 10.75 7 21.25"/>
+    <path d="M16 9.5l3-2M16 9.5l-3-2M16 22.5l3 2M16 22.5l-3 2M9.5 12l-.4-3.4M22.5 12l.4-3.4M9.5 20l-.4 3.4M22.5 20l.4 3.4"/>
+  </g>
+</svg>

client/src/App.module.scss

@@ -0,0 +1,15 @@
+.layout {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  grid-template-rows: var(--topbar-h) 1fr;
+  grid-template-areas:
+    'sidebar topbar'
+    'sidebar main';
+  height: 100vh;
+}
+
+.main {
+  grid-area: main;
+  overflow-y: auto;
+  padding: 24px 28px 40px;
+}

client/src/App.tsx

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Sidebar from './components/Sidebar';
+import TopBar from './components/TopBar';
+import AuthWall from './components/AuthWall';
+import Board from './pages/Board';
+import Active from './pages/Active';
+import Closed from './pages/Closed';
+import Stats from './pages/Stats';
+import Overview from './pages/Overview';
+import SlaKpi from './pages/SlaKpi';
+import Insights from './pages/Insights';
+import Admin from './pages/Admin';
+import { roleAtLeast } from './services/auth.service';
+import { getStats } from './services/ticket.service';
+import { getMe, logout, type CurrentUser } from './services/auth.service';
+import { setUnauthorizedHandler } from './services/api.service';
+import styles from './App.module.scss';
+
+export default function App() {
+  const [user, setUser] = useState<CurrentUser | null>(null);
+  const [authReady, setAuthReady] = useState(false);
+  const [search, setSearch] = useState('');
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [counts, setCounts] = useState({ active: 0, closed: 0 });
+  const [refreshing, setRefreshing] = useState(false);
+  const [lastSync, setLastSync] = useState<string | null>(null);
+
+  const loadCounts = useCallback(async () => {
+    try {
+      const s = await getStats();
+      setCounts({ active: s.active, closed: s.closed });
+      setLastSync(new Date().toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' }));
+    } catch {
+      // Sidebar counts are best-effort; pages surface their own load errors.
+    }
+  }, []);
+
+  // Bootstrap: who am I? Then load counts only when authenticated.
+  useEffect(() => {
+    let alive = true;
+    getMe()
+      .then(me => { if (alive) { setUser(me); if (me) void loadCounts(); } })
+      .catch(() => { if (alive) setUser(null); })
+      .finally(() => { if (alive) setAuthReady(true); });
+    return () => { alive = false; };
+  }, [loadCounts]);
+
+  // Any API 401 drops us back to the login screen.
+  useEffect(() => {
+    setUnauthorizedHandler(() => setUser(null));
+    return () => setUnauthorizedHandler(null);
+  }, []);
+
+  useEffect(() => { if (user) void loadCounts(); }, [user, refreshKey, loadCounts]);
+
+  const handleLogin = useCallback((u: CurrentUser) => {
+    setUser(u);
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const handleLogout = useCallback(async () => {
+    await logout().catch(() => {});
+    setUser(null);
+  }, []);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    setRefreshKey(k => k + 1);
+    await loadCounts();
+    setRefreshing(false);
+  }, [loadCounts]);
+
+  if (!authReady) return null;
+  if (!user) return <AuthWall onLogin={handleLogin} />;
+
+  const canReports = roleAtLeast(user.role, 'pm');
+  const canUsers = roleAtLeast(user.role, 'lead');
+  const reports = (el: React.ReactNode) => (canReports ? el : <Navigate to="/" replace />);
+
+  return (
+    <div className={styles.layout}>
+      <Sidebar activeCount={counts.active} closedCount={counts.closed} user={user} />
+      <TopBar
+        search={search}
+        onSearch={setSearch}
+        onRefresh={handleRefresh}
+        refreshing={refreshing}
+        lastSync={lastSync}
+        user={user}
+        onLogout={handleLogout}
+      />
+      <main className={styles.main}>
+        <Routes>
+          <Route path="/"          element={<Board search={search} refreshKey={refreshKey} />} />
+          <Route path="/closed"    element={<Closed search={search} refreshKey={refreshKey} />} />
+          <Route path="/active"    element={reports(<Active refreshKey={refreshKey} />)} />
+          <Route path="/stats"     element={reports(<Stats refreshKey={refreshKey} />)} />
+          <Route path="/insights"  element={reports(<Insights refreshKey={refreshKey} />)} />
+          <Route path="/analytics" element={reports(<Overview refreshKey={refreshKey} />)} />
+          <Route path="/kpi"       element={reports(<SlaKpi refreshKey={refreshKey} />)} />
+          <Route path="/admin"     element={canUsers ? <Admin user={user} /> : <Navigate to="/" replace />} />
+          <Route path="*"          element={<Navigate to="/" replace />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}

client/src/components/AuthWall/AuthWall.module.scss

@@ -0,0 +1,81 @@
+@use '../../styles/variables' as *;
+
+.wrap {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(circle at 30% 20%, #1e293b, var(--sidebar));
+  padding: $s-4;
+}
+
+.card {
+  width: 340px;
+  max-width: 100%;
+  background: var(--surface);
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow-lg);
+  padding: $s-8 $s-6;
+  display: flex;
+  flex-direction: column;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: $s-2;
+  justify-content: center;
+}
+.mark { font-size: 22px; }
+.name { font-size: 20px; font-weight: 700; letter-spacing: 0.16em; color: var(--text); }
+
+.subtitle {
+  margin: $s-2 0 $s-5;
+  text-align: center;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 5px;
+}
+.input {
+  height: 38px;
+  padding: 0 12px;
+  margin-bottom: $s-4;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  font-size: 14px;
+  color: var(--text);
+  outline: none;
+
+  &:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
+}
+
+.error {
+  margin-bottom: $s-3;
+  padding: 8px 10px;
+  border-radius: $radius;
+  background: var(--danger-bg);
+  color: var(--danger);
+  font-size: 12px;
+}
+
+.button {
+  height: 40px;
+  border: none;
+  border-radius: $radius;
+  background: var(--primary);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  transition: background 0.15s ease;
+
+  &:hover:not(:disabled) { background: var(--primary-h); }
+  &:disabled { opacity: 0.6; cursor: default; }
+}

client/src/components/AuthWall/index.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { login, type CurrentUser } from '../../services/auth.service';
+import styles from './AuthWall.module.scss';
+
+export default function AuthWall({ onLogin }: { onLogin: (user: CurrentUser) => void }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await login(username.trim(), password);
+      if (res.success && res.user) onLogin(res.user);
+      else setError(res.error || 'Invalid username or password');
+    } catch {
+      setError('Could not reach the server.');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className={styles.wrap}>
+      <form className={styles.card} onSubmit={submit}>
+        <div className={styles.brand}>
+          <span className={styles.mark}>❄</span>
+          <span className={styles.name}>FORGE&nbsp;2.0</span>
+        </div>
+        <p className={styles.subtitle}>Sign in to view the ticket board.</p>
+
+        <label className={styles.label} htmlFor="username">Username</label>
+        <input
+          id="username"
+          className={styles.input}
+          value={username}
+          onChange={e => setUsername(e.target.value)}
+          autoComplete="username"
+          autoFocus
+        />
+
+        <label className={styles.label} htmlFor="password">Password</label>
+        <input
+          id="password"
+          className={styles.input}
+          type="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          autoComplete="current-password"
+        />
+
+        {error && <div className={styles.error}>{error}</div>}
+
+        <button className={styles.button} type="submit" disabled={busy || !username || !password}>
+          {busy ? 'Signing in…' : 'Sign in'}
+        </button>
+      </form>
+    </div>
+  );
+}

client/src/components/Board/BoardCard/BoardCard.module.scss

@@ -0,0 +1,72 @@
+@use '../../../styles/variables' as *;
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--col);
+  border-radius: $radius;
+  padding: 9px 11px;
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow $transition, transform $transition;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  &:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
+}
+
+.top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.number {
+  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--primary);
+  display: inline-flex; align-items: center; gap: 3px;
+  svg { opacity: 0.5; }
+  &:hover { text-decoration: underline; svg { opacity: 1; } }
+}
+.topRight { display: flex; align-items: center; gap: 6px; }
+.jira { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: var(--primary-bg); color: var(--primary); }
+.ext { display: flex; color: var(--text-dim); &:hover { color: var(--primary); } }
+
+.title {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--text);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.bm {
+  align-self: flex-start;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--surface-alt);
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.assignee { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.avatar {
+  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
+  background: var(--primary); color: #fff; font-size: 9px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+}
+.aName { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pill {
+  flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
+  background: var(--surface-alt); color: var(--text-muted); font-variant-numeric: tabular-nums;
+}
+
+.meta {
+  display: flex; gap: $s-3; font-size: 10px; color: var(--text-dim);
+  border-top: 1px solid var(--border); padding-top: 5px;
+}

client/src/components/Board/BoardCard/index.tsx

@@ -0,0 +1,56 @@
+import { ExternalIcon } from '../../icons';
+import { parseDate, timeAgo, initials } from '../../../utils/format.utils';
+import type { Ticket } from '../../../types/ticket.types';
+import styles from './BoardCard.module.scss';
+
+function daysSince(v: string | null): number | null {
+  const d = parseDate(v);
+  if (!d) return null;
+  return Math.floor((Date.now() - d.getTime()) / 86_400_000);
+}
+
+interface BoardCardProps {
+  ticket: Ticket;
+  color: string;
+  brandColor?: string;
+  onSelect: (t: Ticket) => void;
+}
+
+export default function BoardCard({ ticket, color, brandColor, onSelect }: BoardCardProps) {
+  const lifetime = daysSince(ticket.openedAt);
+  const inState = daysSince(ticket.stateChangedAt);
+  const bm = [ticket.brand, ticket.market].filter(Boolean).join(' · ');
+
+  return (
+    <div className={styles.card} style={{ '--col': color } as React.CSSProperties} onClick={() => onSelect(ticket)}>
+      <div className={styles.top}>
+        {ticket.link ? (
+          <a href={ticket.link} target="_blank" rel="noopener noreferrer" className={styles.number}
+             onClick={e => e.stopPropagation()} title="Open in ServiceNow">
+            {ticket.number}<ExternalIcon size={11} />
+          </a>
+        ) : (
+          <span className={styles.number}>{ticket.number}</span>
+        )}
+        {ticket.jira?.status && <span className={styles.jira}>{ticket.jira.status}</span>}
+      </div>
+
+      <div className={styles.title} title={ticket.shortDesc}>{ticket.shortDesc || '—'}</div>
+
+      {bm && <span className={styles.bm} style={brandColor ? { background: `${brandColor}1a`, color: brandColor, borderColor: `${brandColor}55` } : undefined}>{bm}</span>}
+
+      <div className={styles.foot}>
+        <span className={styles.assignee}>
+          <span className={styles.avatar}>{initials(ticket.assignedTo)}</span>
+          <span className={styles.aName}>{ticket.assignedTo ?? 'Unassigned'}</span>
+        </span>
+        {inState != null && <span className={styles.pill} title="days in current state">{inState}d</span>}
+      </div>
+
+      <div className={styles.meta}>
+        {lifetime != null && <span title="lifetime">⏱ {lifetime}d</span>}
+        <span title="last activity">✎ {timeAgo(ticket.lastActivityAt)}</span>
+      </div>
+    </div>
+  );
+}

client/src/components/PageHeader/PageHeader.module.scss

@@ -0,0 +1,25 @@
+@use '../../styles/variables' as *;
+
+.header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: $s-4;
+  margin-bottom: $s-5;
+}
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+}
+.subtitle {
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: $s-2;
+  flex-wrap: wrap;
+}

client/src/components/PageHeader/index.tsx

@@ -0,0 +1,19 @@
+import styles from './PageHeader.module.scss';
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  children?: React.ReactNode;
+}
+
+export default function PageHeader({ title, subtitle, children }: PageHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div>
+        <h1 className={styles.title}>{title}</h1>
+        {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+      </div>
+      {children && <div className={styles.actions}>{children}</div>}
+    </div>
+  );
+}

client/src/components/Sidebar/Sidebar.module.scss

@@ -0,0 +1,93 @@
+@use '../../styles/variables' as *;
+
+.sidebar {
+  grid-area: sidebar;
+  width: var(--sidebar-w);
+  background: var(--sidebar);
+  color: var(--sidebar-text);
+  display: flex;
+  flex-direction: column;
+  padding: $s-4 $s-3;
+  overflow-y: auto;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: $s-2;
+  padding: $s-2 $s-2 $s-5;
+}
+.brandMark {
+  font-size: 20px;
+  filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6));
+}
+.brandName {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  color: #fff;
+}
+.brandVer {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--primary);
+  color: #fff;
+  letter-spacing: 0.02em;
+}
+
+.nav { flex: 1; }
+
+.section {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--sidebar-dim);
+  padding: 0 $s-2 $s-2;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: $s-3;
+  padding: 8px $s-2;
+  border-radius: $radius;
+  color: var(--sidebar-text);
+  font-size: 13px;
+  font-weight: 500;
+  transition: background $transition, color $transition;
+
+  &:hover { background: var(--sidebar-alt); color: #fff; }
+}
+.itemActive {
+  background: var(--primary);
+  color: #fff;
+  &:hover { background: var(--primary-h); }
+}
+
+.itemIcon { display: flex; opacity: 0.9; }
+.itemLabel { flex: 1; }
+
+.badge {
+  min-width: 20px;
+  text-align: center;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.14);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: $s-4 $s-2 0;
+  border-top: 1px solid var(--sidebar-alt);
+  margin-top: $s-4;
+  font-size: 11px;
+  color: var(--sidebar-dim);
+}
+.version { color: var(--sidebar-dim); }

client/src/components/Sidebar/index.tsx

@@ -0,0 +1,70 @@
+import { NavLink } from 'react-router-dom';
+import { TicketIcon, ArchiveIcon, ChartIcon, KeyIcon } from '../icons';
+import { roleAtLeast, ROLE_LABELS, type CurrentUser } from '../../services/auth.service';
+import styles from './Sidebar.module.scss';
+
+interface SidebarProps {
+  activeCount: number;
+  closedCount: number;
+  user: CurrentUser;
+}
+
+export default function Sidebar({ activeCount, closedCount, user }: SidebarProps) {
+  const canReports = roleAtLeast(user.role, 'pm');
+  const canAdmin = roleAtLeast(user.role, 'lead');
+  return (
+    <aside className={styles.sidebar}>
+      <div className={styles.brand}>
+        <span className={styles.brandMark}>❄</span>
+        <span className={styles.brandName}>FORGE</span>
+        <span className={styles.brandVer}>2.0</span>
+      </div>
+
+      <nav className={styles.nav}>
+        <div className={styles.section}>Tickets</div>
+        <NavItem to="/" label="Active board" icon={<TicketIcon />} count={activeCount} end />
+        <NavItem to="/closed" label="Closed" icon={<ArchiveIcon />} count={closedCount} />
+
+        {canReports && <>
+          <div className={styles.section} style={{ marginTop: 18 }}>Analytics</div>
+          <NavItem to="/insights" label="PM Insights" icon={<ChartIcon />} />
+          <NavItem to="/analytics" label="Overall stats" icon={<ChartIcon />} />
+          <NavItem to="/active" label="Active stats" icon={<ChartIcon />} />
+          <NavItem to="/kpi" label="PM KPIs — SLA" icon={<ChartIcon />} />
+        </>}
+
+        {canAdmin && <>
+          <div className={styles.section} style={{ marginTop: 18 }}>Admin</div>
+          <NavItem to="/admin" label={user.role === 'admin' ? 'Users & Tokens' : 'Users'} icon={<KeyIcon />} />
+        </>}
+      </nav>
+
+      <div className={styles.footer}>
+        <span>{ROLE_LABELS[user.role]}</span>
+        <span className={styles.version}>v{__APP_VERSION__}</span>
+      </div>
+    </aside>
+  );
+}
+
+interface NavItemProps {
+  to: string;
+  label: string;
+  icon: React.ReactNode;
+  count?: number;
+  end?: boolean;
+}
+
+function NavItem({ to, label, icon, count, end }: NavItemProps) {
+  return (
+    <NavLink
+      to={to}
+      end={end}
+      className={({ isActive }) => `${styles.item} ${isActive ? styles.itemActive : ''}`}
+    >
+      <span className={styles.itemIcon}>{icon}</span>
+      <span className={styles.itemLabel}>{label}</span>
+      {count !== undefined && count > 0 && <span className={styles.badge}>{count}</span>}
+    </NavLink>
+  );
+}

client/src/components/StatePill/StatePill.module.scss

@@ -0,0 +1,20 @@
+@use '../../styles/variables' as *;
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 9px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+.progress  { color: var(--primary); background: var(--primary-bg); border-color: rgba(99,102,241,0.25); }
+.waiting   { color: var(--warning); background: var(--warning-bg); border-color: rgba(234,88,12,0.25); }
+.open      { color: var(--success); background: var(--success-bg); border-color: rgba(22,163,74,0.25); }
+.done      { color: var(--success); background: var(--success-bg); border-color: rgba(22,163,74,0.25); }
+.cancelled { color: var(--danger);  background: var(--danger-bg);  border-color: rgba(220,38,38,0.25); }
+.neutral   { color: var(--neutral); background: var(--neutral-bg); border-color: rgba(100,116,139,0.25); }

client/src/components/StatePill/index.tsx

@@ -0,0 +1,16 @@
+import styles from './StatePill.module.scss';
+
+// Map a ServiceNow state to a tone. Unknown states fall back to neutral.
+function tone(state: string): string {
+  const s = state.toLowerCase();
+  if (s.includes('progress') || s === 'assigned') return styles.progress;
+  if (s.includes('awaiting') || s.includes('hold')) return styles.waiting;
+  if (s === 'open') return styles.open;
+  if (s.includes('complete')) return styles.done;
+  if (s.includes('cancel') || s.includes('incomplete')) return styles.cancelled;
+  return styles.neutral;
+}
+
+export default function StatePill({ state }: { state: string }) {
+  return <span className={`${styles.pill} ${tone(state)}`}>{state || '—'}</span>;
+}

client/src/components/TicketDetailModal/TicketDetailModal.module.scss

@@ -0,0 +1,174 @@
+@use '../../styles/variables' as *;
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.55);
+  backdrop-filter: blur(2px);
+  display: flex;
+  justify-content: flex-end;
+  z-index: 100;
+  animation: fade 0.12s ease;
+}
+@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+
+.modal {
+  width: 560px;
+  max-width: 94vw;
+  height: 100%;
+  background: var(--surface);
+  box-shadow: var(--shadow-lg);
+  padding: $s-5 $s-6;
+  overflow-y: auto;
+  animation: slide 0.16s ease;
+}
+@keyframes slide { from { transform: translateX(24px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }
+
+.head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $s-4;
+}
+.number {
+  display: flex;
+  align-items: center;
+  gap: $s-3;
+  font-family: var(--mono);
+  font-weight: 700;
+  color: var(--primary);
+  font-size: 13px;
+}
+.ext {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--font);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  &:hover { color: var(--primary); }
+}
+.title {
+  margin-top: 6px;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1.35;
+  color: var(--text);
+}
+.close {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: $radius;
+  background: var(--surface-alt);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover { background: var(--border); color: var(--text); }
+}
+
+.metaRow {
+  display: flex;
+  align-items: center;
+  gap: $s-2;
+  margin: $s-4 0;
+}
+.jiraBadge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: var(--primary-bg);
+  color: var(--primary);
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $s-3 $s-4;
+  padding: $s-4 0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.field {
+  dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
+  dd { margin-top: 2px; font-size: 13px; color: var(--text); }
+}
+
+.block { margin-top: $s-5; }
+.blockTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: $s-3;
+}
+.count {
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--surface-alt);
+  color: var(--text-muted);
+}
+.description, .comment {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.comment {
+  padding: $s-3;
+  background: var(--surface-alt);
+  border-radius: $radius;
+  border-left: 3px solid var(--primary);
+}
+
+.timeline { list-style: none; position: relative; }
+.event {
+  display: flex;
+  gap: $s-3;
+  padding-bottom: $s-4;
+  position: relative;
+
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    left: 11px;
+    top: 24px;
+    bottom: 0;
+    width: 2px;
+    background: var(--border);
+  }
+}
+.dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--primary-bg);
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+.dotNote { background: var(--warning-bg); color: var(--warning); }
+.eventBody { flex: 1; }
+.eventTop { display: flex; align-items: center; gap: 8px; }
+.who { font-size: 13px; font-weight: 600; color: var(--text); }
+.kind {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-dim);
+}
+.when { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
+.more { font-size: 12px; color: var(--text-dim); padding-left: 36px; }

client/src/components/TicketDetailModal/index.tsx

@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+import StatePill from '../StatePill';
+import { CloseIcon, ExternalIcon, CommentIcon, NoteIcon } from '../icons';
+import { formatDate, formatDateTime, formatCost, formatMinutes } from '../../utils/format.utils';
+import type { Ticket } from '../../types/ticket.types';
+import styles from './TicketDetailModal.module.scss';
+
+export default function TicketDetailModal({ ticket, onClose }: { ticket: Ticket; onClose: () => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const activity = [...(ticket.activity ?? [])].sort((a, b) => String(b.t).localeCompare(String(a.t)));
+
+  return (
+    <div className={styles.overlay} onClick={onClose}>
+      <div className={styles.modal} onClick={e => e.stopPropagation()}>
+        <header className={styles.head}>
+          <div>
+            <div className={styles.number}>
+              {ticket.number}
+              {ticket.link && (
+                <a href={ticket.link} target="_blank" rel="noopener noreferrer" className={styles.ext}>
+                  Open in ServiceNow <ExternalIcon />
+                </a>
+              )}
+            </div>
+            <h2 className={styles.title}>{ticket.shortDesc || '—'}</h2>
+          </div>
+          <button className={styles.close} onClick={onClose} aria-label="Close"><CloseIcon /></button>
+        </header>
+
+        <div className={styles.metaRow}>
+          <StatePill state={ticket.state} />
+          {ticket.jira?.status && (ticket.jira.url
+            ? <a className={styles.jiraBadge} href={ticket.jira.url} target="_blank" rel="noopener noreferrer">
+                Jira {ticket.jira.key ? `${ticket.jira.key} ` : ''}· {ticket.jira.status}
+              </a>
+            : <span className={styles.jiraBadge}>Jira: {ticket.jira.status}</span>
+          )}
+        </div>
+
+        <dl className={styles.fields}>
+          <Field label="Assigned to" value={ticket.assignedTo} />
+          <Field label="Requested for" value={ticket.requestedFor} />
+          <Field label="Group" value={ticket.assignmentGroup} />
+          <Field label="Brand" value={ticket.brand} />
+          <Field label="Market" value={ticket.market} />
+          <Field label="Business unit" value={ticket.businessUnit} />
+          <Field label="Opened" value={formatDate(ticket.openedAt)} />
+          <Field label="Due" value={ticket.dueDate ? formatDate(ticket.dueDate) : null} />
+          <Field label="State changed" value={formatDateTime(ticket.stateChangedAt)} />
+          {ticket.status === 'closed' && <>
+            <Field label="Fulfilled" value={formatDate(ticket.fulfillmentDate)} />
+            <Field label="Time to first reply" value={formatMinutes(ticket.ttfrMinutes)} />
+            <Field label="Client response" value={formatMinutes(ticket.clientRespMinutes)} />
+            <Field label="Final cost" value={ticket.finalCost != null ? formatCost(ticket.finalCost) : null} />
+          </>}
+        </dl>
+
+        {ticket.description && (
+          <section className={styles.block}>
+            <h3 className={styles.blockTitle}>Description</h3>
+            <p className={styles.description}>{ticket.description}</p>
+          </section>
+        )}
+
+        {ticket.lastComment && (
+          <section className={styles.block}>
+            <h3 className={styles.blockTitle}>Latest comment</h3>
+            <p className={styles.comment}>{ticket.lastComment}</p>
+          </section>
+        )}
+
+        {activity.length > 0 && (
+          <section className={styles.block}>
+            <h3 className={styles.blockTitle}>Activity <span className={styles.count}>{activity.length}</span></h3>
+            <ul className={styles.timeline}>
+              {activity.slice(0, 60).map((a, i) => (
+                <li key={i} className={styles.event}>
+                  <span className={`${styles.dot} ${a.kind === 'worknote' ? styles.dotNote : ''}`}>
+                    {a.kind === 'worknote' ? <NoteIcon /> : <CommentIcon />}
+                  </span>
+                  <div className={styles.eventBody}>
+                    <div className={styles.eventTop}>
+                      <span className={styles.who}>{a.who}</span>
+                      <span className={styles.kind}>{a.kind}</span>
+                    </div>
+                    <div className={styles.when}>{formatDateTime(a.t)}</div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+            {activity.length > 60 && <div className={styles.more}>+{activity.length - 60} earlier events</div>}
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, value }: { label: string; value: string | null | undefined }) {
+  if (!value || value === '—') return null;
+  return (
+    <div className={styles.field}>
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}

client/src/components/TicketTable/TicketTable.module.scss

@@ -0,0 +1,119 @@
+@use '../../styles/variables' as *;
+
+.wrap {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+
+  thead th {
+    text-align: left;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-muted);
+    padding: 10px $s-3;
+    background: var(--surface-alt);
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+  }
+}
+
+.right { text-align: right; }
+.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+.row {
+  cursor: pointer;
+  transition: background $transition;
+  border-bottom: 1px solid var(--border);
+
+  &:last-child { border-bottom: none; }
+  &:hover { background: var(--row-hover); }
+
+  td { padding: 9px $s-3; vertical-align: middle; }
+}
+
+.number {
+  font-family: var(--mono);
+  font-weight: 600;
+  color: var(--primary);
+  white-space: nowrap;
+
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.numLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--primary);
+
+  svg { opacity: 0.55; }
+  &:hover { text-decoration: underline; svg { opacity: 1; } }
+}
+.jira {
+  font-family: var(--font);
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--primary-bg);
+  color: var(--primary);
+}
+
+.desc {
+  max-width: 340px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+
+.assignee { display: flex; align-items: center; gap: 8px; }
+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.assigneeName {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.muted { color: var(--text-muted); white-space: nowrap; }
+.num  { color: var(--text); }
+
+.right {
+  white-space: nowrap;
+  color: var(--text-muted);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.ago { font-size: 12px; }
+.ext {
+  display: flex;
+  color: var(--text-dim);
+  &:hover { color: var(--primary); }
+}

client/src/components/TicketTable/index.tsx

@@ -0,0 +1,80 @@
+import StatePill from '../StatePill';
+import { ExternalIcon } from '../icons';
+import { timeAgo, initials, formatCost, formatMinutes } from '../../utils/format.utils';
+import type { Ticket } from '../../types/ticket.types';
+import styles from './TicketTable.module.scss';
+
+interface TicketTableProps {
+  tickets: Ticket[];
+  variant?: 'active' | 'closed';
+  onSelect: (t: Ticket) => void;
+}
+
+export default function TicketTable({ tickets, variant = 'active', onSelect }: TicketTableProps) {
+  const closed = variant === 'closed';
+  return (
+    <div className={styles.wrap}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>Ticket</th>
+            <th>Short description</th>
+            <th>State</th>
+            <th>Assignee</th>
+            {closed ? <th>Market</th> : <th>Group</th>}
+            {closed ? <th className={styles.num}>TTFR</th> : <th>Brand</th>}
+            {closed ? <th className={styles.num}>Cost</th> : <th className={styles.right}>Last activity</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {tickets.map(t => (
+            <tr key={t.number} onClick={() => onSelect(t)} className={styles.row}>
+              <td className={styles.number}>
+                {t.link ? (
+                  <a href={t.link} target="_blank" rel="noopener noreferrer" className={styles.numLink}
+                     onClick={e => e.stopPropagation()} title="Open in ServiceNow">
+                    {t.number}<ExternalIcon size={11} />
+                  </a>
+                ) : (
+                  <span>{t.number}</span>
+                )}
+                {t.jira?.status && <span className={styles.jira}>{t.jira.status}</span>}
+              </td>
+              <td className={styles.desc} title={t.shortDesc}>{t.shortDesc || '—'}</td>
+              <td><StatePill state={t.state} /></td>
+              <td>
+                <span className={styles.assignee}>
+                  <span className={styles.avatar}>{initials(t.assignedTo)}</span>
+                  <span className={styles.assigneeName}>{t.assignedTo ?? '—'}</span>
+                </span>
+              </td>
+              {closed ? (
+                <td className={styles.muted}>{t.market ?? '—'}</td>
+              ) : (
+                <td className={styles.muted} title={t.assignmentGroup ?? ''}>{shortGroup(t.assignmentGroup)}</td>
+              )}
+              {closed ? (
+                <td className={styles.num}>{formatMinutes(t.ttfrMinutes)}</td>
+              ) : (
+                <td className={styles.muted}>{t.brand ?? '—'}</td>
+              )}
+              {closed ? (
+                <td className={styles.num}>{formatCost(t.finalCost)}</td>
+              ) : (
+                <td className={styles.right}>
+                  <span className={styles.ago}>{timeAgo(t.lastActivityAt)}</span>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+// "L3 EU CORE RECKITT Marketing Web Presence" → "EU CORE"
+function shortGroup(g: string | null): string {
+  if (!g) return '—';
+  return g.replace(/^L3\s+/, '').replace(/\s+Marketing Web Presence$/i, '');
+}

client/src/components/TopBar/TopBar.module.scss

@@ -0,0 +1,102 @@
+@use '../../styles/variables' as *;
+
+.topbar {
+  grid-area: topbar;
+  height: var(--topbar-h);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: $s-4;
+  padding: 0 $s-5;
+}
+
+.searchWrap {
+  position: relative;
+  flex: 1;
+  max-width: 460px;
+}
+.searchIcon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-dim);
+  display: flex;
+}
+.search {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px 0 34px;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  background: var(--bg);
+  font-size: 13px;
+  color: var(--text);
+  outline: none;
+  transition: border-color $transition, box-shadow $transition;
+
+  &:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-bg);
+    background: var(--surface);
+  }
+  &::placeholder { color: var(--text-dim); }
+}
+
+.right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: $s-3;
+}
+.lastSync { font-size: 12px; color: var(--text-muted); }
+
+.refresh {
+  height: 34px;
+  padding: 0 16px;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  transition: background $transition, border-color $transition;
+
+  &:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--border-strong); }
+  &:disabled { opacity: 0.6; cursor: default; }
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  gap: $s-2;
+  padding-left: $s-3;
+  margin-left: $s-1;
+  border-left: 1px solid var(--border);
+}
+.avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: var(--primary);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.logout {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid transparent;
+  border-radius: $radius;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 600;
+  transition: background $transition, color $transition;
+
+  &:hover { background: var(--surface-alt); color: var(--text); }
+}

client/src/components/TopBar/index.tsx

@@ -0,0 +1,41 @@
+import { SearchIcon } from '../icons';
+import { initials } from '../../utils/format.utils';
+import type { CurrentUser } from '../../services/auth.service';
+import styles from './TopBar.module.scss';
+
+interface TopBarProps {
+  search: string;
+  onSearch: (v: string) => void;
+  onRefresh: () => void;
+  refreshing: boolean;
+  lastSync: string | null;
+  user: CurrentUser;
+  onLogout: () => void;
+}
+
+export default function TopBar({ search, onSearch, onRefresh, refreshing, lastSync, user, onLogout }: TopBarProps) {
+  return (
+    <header className={styles.topbar}>
+      <div className={styles.searchWrap}>
+        <span className={styles.searchIcon}><SearchIcon /></span>
+        <input
+          className={styles.search}
+          placeholder="Search tickets, assignees…"
+          value={search}
+          onChange={e => onSearch(e.target.value)}
+        />
+      </div>
+
+      <div className={styles.right}>
+        {lastSync && <span className={styles.lastSync}>Updated {lastSync}</span>}
+        <button className={styles.refresh} onClick={onRefresh} disabled={refreshing}>
+          {refreshing ? 'Refreshing…' : 'Refresh'}
+        </button>
+        <div className={styles.user}>
+          <span className={styles.avatar} title={user.username}>{initials(user.username)}</span>
+          <button className={styles.logout} onClick={onLogout}>Sign out</button>
+        </div>
+      </div>
+    </header>
+  );
+}

client/src/components/charts/BarList/BarList.module.scss

@@ -0,0 +1,49 @@
+@use '../../../styles/variables' as *;
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-5;
+  box-shadow: var(--shadow-sm);
+}
+.title {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: $s-4;
+}
+.empty { color: var(--text-dim); font-size: 13px; padding: $s-4 0; }
+
+.list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
+.row {
+  display: grid;
+  grid-template-columns: var(--lw) 1fr 4.5ch;
+  align-items: center;
+  gap: $s-3;
+}
+.label {
+  font-size: 12px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.track { height: 18px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; }
+.fill {
+  display: block;
+  height: 100%;
+  width: var(--pct);
+  border-radius: 4px;
+  background: var(--swatch);
+  transition: width 0.5s cubic-bezier(0.34, 1.2, 0.4, 1);
+}
+.value {
+  text-align: right;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}

client/src/components/charts/BarList/index.tsx

@@ -0,0 +1,37 @@
+import styles from './BarList.module.scss';
+import type { Bucket } from '../../../types/analytics.types';
+
+interface BarListProps {
+  title: string;
+  data: Bucket[];
+  colorFor?: (b: Bucket, i: number) => string;
+  format?: (n: number) => string;
+  labelWidth?: number;
+  empty?: string;
+}
+
+export default function BarList({ title, data, colorFor, format, labelWidth = 150, empty = 'No data' }: BarListProps) {
+  const max = Math.max(1, ...data.map(d => d.count));
+  return (
+    <figure className={styles.card}>
+      <figcaption className={styles.title}>{title}</figcaption>
+      {data.length === 0 ? (
+        <div className={styles.empty}>{empty}</div>
+      ) : (
+        <ul className={styles.list}>
+          {data.map((d, i) => (
+            <li
+              key={`${d.key}-${i}`}
+              className={styles.row}
+              style={{ '--pct': `${(d.count / max) * 100}%`, '--swatch': colorFor?.(d, i) ?? 'var(--primary)', '--lw': `${labelWidth}px` } as React.CSSProperties}
+            >
+              <span className={styles.label} title={d.label}>{d.label}</span>
+              <span className={styles.track}><span className={styles.fill} /></span>
+              <span className={styles.value}>{format ? format(d.count) : d.count}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </figure>
+  );
+}

client/src/components/charts/DonutChart/DonutChart.module.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/variables' as *;
+
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: $radius-lg; padding: $s-5; box-shadow: var(--shadow-sm); }
+.head { display: flex; align-items: center; justify-content: space-between; gap: $s-3; margin-bottom: $s-4; }
+.title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
+.toggle {
+  display: inline-flex; border: 1px solid var(--border); border-radius: $radius; overflow: hidden;
+  button { height: 24px; width: 30px; border: none; background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer;
+    &.on { background: var(--primary); color: #fff; } }
+}
+.body { display: flex; gap: $s-5; align-items: center; flex-wrap: wrap; }
+.ring { width: 180px; height: 180px; flex-shrink: 0; }
+.centerNum { font-size: 30px; font-weight: 800; fill: var(--text); font-variant-numeric: tabular-nums; }
+.centerLbl { font-size: 10px; fill: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
+.legend { list-style: none; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; }
+.legItem { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
+.sw { width: 10px; height: 10px; border-radius: 2px; }
+.legLabel { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.legVal { font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

client/src/components/charts/DonutChart/index.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import styles from './DonutChart.module.scss';
+import type { Bucket } from '../../../types/analytics.types';
+
+const PALETTE = ['#6366f1', '#8b5cf6', '#06b6d4', '#f59e0b', '#10b981', '#ef4444', '#ec4899', '#3b82f6', '#14b8a6', '#f97316', '#a855f7', '#0ea5e9'];
+const SIZE = 200, R = 78, STROKE = 20, C = 2 * Math.PI * R;
+
+export default function DonutChart({ title, data, topN = 11 }: { title: string; data: Bucket[]; topN?: number }) {
+  const [pct, setPct] = useState(false);
+
+  const sorted = [...data].sort((a, b) => b.count - a.count);
+  const head = sorted.slice(0, topN);
+  const rest = sorted.slice(topN);
+  const restTotal = rest.reduce((s, b) => s + b.count, 0);
+  const slices = restTotal > 0 ? [...head, { key: '__others', label: `Others (${rest.length})`, count: restTotal }] : head;
+  const total = slices.reduce((s, b) => s + b.count, 0) || 1;
+  const color = (i: number) => (i === slices.length - 1 && restTotal > 0 ? 'var(--text-dim)' : PALETTE[i % PALETTE.length]);
+
+  let offset = 0;
+  const arcs = slices.map((b, i) => {
+    const frac = b.count / total;
+    const dash = frac * C;
+    const arc = { b, i, dash, gap: C - dash, rot: (offset / C) * 360, color: color(i) };
+    offset += dash;
+    return arc;
+  });
+
+  return (
+    <figure className={styles.card}>
+      <figcaption className={styles.head}>
+        <span className={styles.title}>{title}</span>
+        <div className={styles.toggle}>
+          <button className={!pct ? styles.on : ''} onClick={() => setPct(false)}>#</button>
+          <button className={pct ? styles.on : ''} onClick={() => setPct(true)}>%</button>
+        </div>
+      </figcaption>
+      <div className={styles.body}>
+        <svg className={styles.ring} viewBox={`0 0 ${SIZE} ${SIZE}`} role="img" aria-label={title}>
+          <circle cx={SIZE / 2} cy={SIZE / 2} r={R} fill="none" stroke="var(--surface-alt)" strokeWidth={STROKE} />
+          {arcs.map(a => (
+            <circle key={a.b.key} cx={SIZE / 2} cy={SIZE / 2} r={R} fill="none"
+              stroke={a.color} strokeWidth={STROKE} strokeDasharray={`${a.dash} ${a.gap}`}
+              transform={`rotate(${a.rot - 90} ${SIZE / 2} ${SIZE / 2})`}>
+              <title>{`${a.b.label}: ${a.b.count} (${Math.round((a.b.count / total) * 100)}%)`}</title>
+            </circle>
+          ))}
+          <text x={SIZE / 2} y={SIZE / 2 - 4} textAnchor="middle" className={styles.centerNum}>{total}</text>
+          <text x={SIZE / 2} y={SIZE / 2 + 14} textAnchor="middle" className={styles.centerLbl}>total</text>
+        </svg>
+        <ul className={styles.legend}>
+          {arcs.map(a => (
+            <li key={a.b.key} className={styles.legItem}>
+              <span className={styles.sw} style={{ background: a.color }} />
+              <span className={styles.legLabel} title={a.b.label}>{a.b.label}</span>
+              <span className={styles.legVal}>{pct ? `${Math.round((a.b.count / total) * 100)}%` : a.b.count}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </figure>
+  );
+}

client/src/components/charts/ExpandBarList/ExpandBarList.module.scss

@@ -0,0 +1,25 @@
+@use '../../../styles/variables' as *;
+
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: $radius-lg; padding: $s-5; box-shadow: var(--shadow-sm); }
+.title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: $s-4; }
+.list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
+
+.row {
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--lw) 1fr 4.5ch;
+  align-items: center;
+  gap: $s-3;
+  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
+}
+.label { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
+.chev { font-size: 9px; color: var(--text-dim); transition: transform 0.15s ease; display: inline-block; }
+.chevOpen { transform: rotate(90deg); }
+.track { height: 18px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; }
+.fill { display: block; height: 100%; width: var(--pct); border-radius: 4px; background: var(--swatch); transition: width 0.5s cubic-bezier(0.34, 1.2, 0.4, 1); }
+.value { text-align: right; font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+
+.children { list-style: none; margin: 6px 0 4px 16px; display: flex; flex-direction: column; gap: 5px; padding-left: 8px; border-left: 2px solid var(--border); }
+.childRow { display: grid; grid-template-columns: var(--lw) 1fr 4.5ch; align-items: center; gap: $s-3; }
+.childLabel { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.childFill { display: block; height: 100%; width: var(--pct); border-radius: 4px; background: var(--text-dim); }

client/src/components/charts/ExpandBarList/index.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import styles from './ExpandBarList.module.scss';
+import type { NestedBucket, Bucket } from '../../../types/analytics.types';
+
+interface ExpandBarListProps {
+  title: string;
+  data: NestedBucket[];
+  colorFor?: (b: Bucket, i: number) => string;
+  labelWidth?: number;
+}
+
+export default function ExpandBarList({ title, data, colorFor, labelWidth = 150 }: ExpandBarListProps) {
+  const [open, setOpen] = useState<Set<string>>(new Set());
+  const max = Math.max(1, ...data.map(d => d.count));
+  const toggle = (k: string) => setOpen(prev => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n; });
+
+  return (
+    <figure className={styles.card}>
+      <figcaption className={styles.title}>{title}</figcaption>
+      <ul className={styles.list}>
+        {data.map((d, i) => {
+          const isOpen = open.has(d.key);
+          const childMax = Math.max(1, ...d.children.map(c => c.count));
+          return (
+            <li key={d.key}>
+              <button
+                className={styles.row}
+                onClick={() => d.children.length && toggle(d.key)}
+                style={{ '--pct': `${(d.count / max) * 100}%`, '--swatch': colorFor?.(d, i) ?? 'var(--primary)', '--lw': `${labelWidth}px` } as React.CSSProperties}
+              >
+                <span className={styles.label} title={d.label}>
+                  {d.children.length > 0 && <span className={`${styles.chev} ${isOpen ? styles.chevOpen : ''}`}>▸</span>}
+                  {d.label}
+                </span>
+                <span className={styles.track}><span className={styles.fill} /></span>
+                <span className={styles.value}>{d.count}</span>
+              </button>
+              {isOpen && (
+                <ul className={styles.children}>
+                  {d.children.map(c => (
+                    <li key={c.key} className={styles.childRow} style={{ '--pct': `${(c.count / childMax) * 100}%`, '--lw': `${labelWidth}px` } as React.CSSProperties}>
+                      <span className={styles.childLabel} title={c.label}>{c.label}</span>
+                      <span className={styles.track}><span className={styles.childFill} /></span>
+                      <span className={styles.value}>{c.count}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </figure>
+  );
+}

client/src/components/charts/GroupedBars/GroupedBars.module.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/variables' as *;
+
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: $radius-lg; padding: $s-5; box-shadow: var(--shadow-sm); }
+.head { display: flex; align-items: center; justify-content: space-between; gap: $s-3; margin-bottom: $s-2; }
+.title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
+.controls { display: flex; align-items: center; gap: $s-3; }
+.yoy { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
+.up { color: var(--success); background: var(--success-bg); }
+.down { color: var(--danger); background: var(--danger-bg); }
+.toggle {
+  display: inline-flex; border: 1px solid var(--border); border-radius: $radius; overflow: hidden;
+  button { height: 26px; padding: 0 10px; border: none; background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
+    &.on { background: var(--primary); color: #fff; } }
+}
+.legend { display: flex; gap: $s-4; flex-wrap: wrap; margin-bottom: $s-2; }
+.leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); b { color: var(--text); font-variant-numeric: tabular-nums; } }
+.sw { width: 12px; height: 8px; border-radius: 2px; }
+.svg { width: 100%; height: auto; display: block; }
+.axis { font-size: 9px; fill: var(--text-dim); font-family: var(--mono); }

client/src/components/charts/GroupedBars/index.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import styles from './GroupedBars.module.scss';
+import type { MonthPoint } from '../../../types/analytics.types';
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const YEAR_COLORS = ['#f97316', '#1a73e8', '#16a34a', '#dc2626', '#7c3aed'];
+const W = 700, H = 250, PADX = 40, PADT = 20, PADB = 42;
+
+interface GroupedBarsProps {
+  title: string;
+  points: MonthPoint[];       // YYYY-MM
+  format?: (n: number) => string;
+  defaultMode?: 'bars' | 'line';
+}
+
+export default function GroupedBars({ title, points, format, defaultMode = 'bars' }: GroupedBarsProps) {
+  const [mode, setMode] = useState<'bars' | 'line'>(defaultMode);
+
+  const years = [...new Set(points.map(p => Number(p.month.slice(0, 4))))].sort();
+  const yearColor = (y: number) => YEAR_COLORS[years.indexOf(y) % YEAR_COLORS.length];
+  // grid[monthIdx][year] = count
+  const grid: Record<number, Record<number, number>> = {};
+  for (const p of points) {
+    const y = Number(p.month.slice(0, 4));
+    const mi = Number(p.month.slice(5, 7)) - 1;
+    (grid[mi] ??= {})[y] = (grid[mi]?.[y] ?? 0) + p.count;
+  }
+  const max = Math.max(1, ...points.map(p => p.count));
+  const totals = Object.fromEntries(years.map(y => [y, points.filter(p => p.month.startsWith(String(y))).reduce((s, p) => s + p.count, 0)]));
+  const yoy = years.length >= 2 ? pctDelta(totals[years[years.length - 1]], totals[years[years.length - 2]]) : null;
+
+  const innerW = W - PADX * 2, innerH = H - PADT - PADB;
+  const groupW = innerW / 12;
+  const x = (mi: number) => PADX + mi * groupW;
+  const y = (v: number) => PADT + (1 - v / max) * innerH;
+  const tick = (v: number) => (format ? format(v) : String(v));
+
+  const linePath = (yr: number) => MONTHS
+    .map((_, mi) => ({ mi, v: grid[mi]?.[yr] })).filter(p => p.v != null)
+    .map((p, i) => `${i === 0 ? 'M' : 'L'} ${(x(p.mi) + groupW / 2).toFixed(1)} ${y(p.v!).toFixed(1)}`).join(' ');
+
+  return (
+    <figure className={styles.card}>
+      <figcaption className={styles.head}>
+        <span className={styles.title}>{title}</span>
+        <div className={styles.controls}>
+          {yoy != null && <span className={`${styles.yoy} ${yoy >= 0 ? styles.up : styles.down}`}>{yoy >= 0 ? '▲' : '▼'} {Math.abs(yoy)}% YoY</span>}
+          <div className={styles.toggle}>
+            <button className={mode === 'bars' ? styles.on : ''} onClick={() => setMode('bars')}>Bars</button>
+            <button className={mode === 'line' ? styles.on : ''} onClick={() => setMode('line')}>Line</button>
+          </div>
+        </div>
+      </figcaption>
+      <div className={styles.legend}>
+        {years.map(yr => <span key={yr} className={styles.leg}><span className={styles.sw} style={{ background: yearColor(yr) }} />{yr} <b>{tick(totals[yr])}</b></span>)}
+      </div>
+      <svg className={styles.svg} viewBox={`0 0 ${W} ${H}`} role="img" aria-label={title} preserveAspectRatio="xMidYMid meet">
+        {[0, 0.5, 1].map(f => {
+          const gy = PADT + f * innerH;
+          return <g key={f}>
+            <line x1={PADX} y1={gy} x2={W - PADX} y2={gy} stroke="var(--border)" strokeWidth="1" />
+            <text x={6} y={gy + 3} className={styles.axis}>{tick(Math.round(max * (1 - f)))}</text>
+          </g>;
+        })}
+        {mode === 'bars'
+          ? MONTHS.map((_, mi) => {
+              const yrs = years.filter(yr => grid[mi]?.[yr] != null);
+              const bw = (groupW * 0.7) / Math.max(1, yrs.length);
+              return yrs.map((yr, i) => {
+                const v = grid[mi]![yr];
+                const bx = x(mi) + groupW * 0.15 + i * bw;
+                return <rect key={`${mi}-${yr}`} x={bx} y={y(v)} width={Math.max(1, bw - 1)} height={PADT + innerH - y(v)} rx="1" fill={yearColor(yr)}><title>{`${MONTHS[mi]} ${yr}: ${tick(v)}`}</title></rect>;
+              });
+            })
+          : years.map(yr => <path key={yr} d={linePath(yr)} fill="none" stroke={yearColor(yr)} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />)}
+        {MONTHS.map((m, mi) => <text key={m} x={x(mi) + groupW / 2} y={H - 22} textAnchor="middle" className={styles.axis}>{m}</text>)}
+      </svg>
+    </figure>
+  );
+}
+
+function pctDelta(cur: number, prev: number): number | null {
+  if (!prev) return null;
+  return Math.round(((cur - prev) / prev) * 100);
+}

client/src/components/charts/KpiTile/KpiTile.module.scss

@@ -0,0 +1,27 @@
+@use '../../../styles/variables' as *;
+
+.tile {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-5;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+  border-top: 3px solid var(--primary);
+
+  &[data-tone='success'] { border-top-color: var(--success); }
+  &[data-tone='warning'] { border-top-color: var(--warning); }
+  &[data-tone='danger']  { border-top-color: var(--danger); }
+  &[data-tone='neutral'] { border-top-color: var(--neutral); }
+}
+
+.value {
+  font-size: clamp(26px, 3.4vw, 38px);
+  font-weight: 800;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  color: var(--text);
+}
+.label { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
+.hint  { margin-top: 2px; font-size: 11px; color: var(--text-dim); }

client/src/components/charts/KpiTile/index.tsx

@@ -0,0 +1,18 @@
+import styles from './KpiTile.module.scss';
+
+interface KpiTileProps {
+  label: string;
+  value: string | number;
+  tone?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+  hint?: string;
+}
+
+export default function KpiTile({ label, value, tone = 'primary', hint }: KpiTileProps) {
+  return (
+    <div className={styles.tile} data-tone={tone}>
+      <div className={styles.value}>{value}</div>
+      <div className={styles.label}>{label}</div>
+      {hint && <div className={styles.hint}>{hint}</div>}
+    </div>
+  );
+}

client/src/components/charts/SlaHeatmap/SlaHeatmap.module.scss

@@ -0,0 +1,63 @@
+@use '../../../styles/variables' as *;
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-5;
+  box-shadow: var(--shadow-sm);
+}
+.head { display: flex; align-items: baseline; justify-content: space-between; gap: $s-3; margin-bottom: $s-4; }
+.title { font-size: 13px; font-weight: 700; color: var(--text); }
+.sub { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
+
+.scroll { overflow-x: auto; }
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 3px;
+  font-size: 12px;
+}
+.pmHead, .sizeHead, .totHead {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  padding: 2px 6px;
+  text-align: center;
+  white-space: nowrap;
+}
+.pmHead { text-align: left; }
+.sizeHead { display: table-cell; }
+.sizeChip {
+  display: inline-block;
+  min-width: 26px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: #fff;
+  font-weight: 700;
+}
+.norm { display: block; margin-top: 2px; font-size: 9px; color: var(--text-dim); font-weight: 500; }
+
+.pm {
+  text-align: left;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  max-width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: $s-2;
+}
+.cell, .total {
+  text-align: center;
+  border-radius: 4px;
+  padding: 4px 8px;
+  min-width: 52px;
+  background: var(--surface-alt);
+}
+.total { background: var(--primary-bg); }
+.primary { display: block; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
+.meta { display: block; font-size: 10px; color: var(--text-muted); }
+.dot { color: var(--text-dim); }

client/src/components/charts/SlaHeatmap/index.tsx

@@ -0,0 +1,82 @@
+import styles from './SlaHeatmap.module.scss';
+import type { SlaMetric, SlaCell } from '../../../types/analytics.types';
+
+const SIZE_COLORS: Record<string, string> = {
+  XS: '#14b8a6', S: '#1a73e8', M: '#f59e0b', L: '#10b981', XL: '#8b5cf6', XXL: '#ef4444',
+};
+
+function normDays(norm: number | undefined, unit: 'days' | 'hours'): number | undefined {
+  if (norm == null) return undefined;
+  return unit === 'hours' ? norm / 24 : norm;
+}
+
+// Value → background tint. Green when at/under norm, red when over, scaled.
+function cellTint(cell: SlaCell, norm: number | undefined): string | undefined {
+  if (cell.avgDays == null || norm == null || norm <= 0) return undefined;
+  const ratio = cell.avgDays / norm;
+  if (ratio <= 1) {
+    const t = Math.max(0.12, 1 - ratio); // deeper green the further under
+    return `rgba(22, 163, 74, ${(0.10 + t * 0.22).toFixed(3)})`;
+  }
+  const over = Math.min(2, ratio - 1);
+  return `rgba(220, 38, 38, ${(0.10 + over * 0.20).toFixed(3)})`;
+}
+
+function fmt(cell: SlaCell, unit: 'days' | 'hours'): string {
+  if (cell.avgDays == null) return '·';
+  const v = unit === 'hours' ? cell.avgDays * 24 : cell.avgDays;
+  return unit === 'hours' ? `${v.toFixed(1)}h` : `${v.toFixed(1)}d`;
+}
+
+export default function SlaHeatmap({ metric }: { metric: SlaMetric }) {
+  const { title, unit, norms, pms, sizes, grid, totals } = metric;
+  const isOtd = metric.key === 'otd';
+
+  return (
+    <figure className={styles.card}>
+      <figcaption className={styles.head}>
+        <span className={styles.title}>{title}</span>
+        <span className={styles.sub}>{isOtd ? 'cell = on-time % · avg' : `avg ${unit} vs norm`}</span>
+      </figcaption>
+      <div className={styles.scroll}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th className={styles.pmHead}>PM</th>
+              {sizes.map(s => (
+                <th key={s} className={styles.sizeHead}>
+                  <span className={styles.sizeChip} style={{ background: SIZE_COLORS[s] }}>{s}</span>
+                  {norms[s] != null && <span className={styles.norm}>≤{norms[s]}{unit === 'hours' ? 'h' : 'd'}</span>}
+                </th>
+              ))}
+              <th className={styles.totHead}>Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pms.map(pm => (
+              <tr key={pm}>
+                <td className={styles.pm} title={pm}>{pm}</td>
+                {sizes.map(s => {
+                  const c = grid[pm]?.[s];
+                  const nd = normDays(norms[s], unit);
+                  if (!c || c.count === 0) return <td key={s} className={styles.cell}><span className={styles.dot}>·</span></td>;
+                  return (
+                    <td key={s} className={styles.cell} style={{ background: cellTint(c, nd) }}
+                        title={`${c.count} tickets · avg ${fmt(c, unit)}${c.onTimePct != null ? ` · ${c.onTimePct}% on-time` : ''}`}>
+                      <span className={styles.primary}>{isOtd ? (c.onTimePct != null ? `${c.onTimePct}%` : '·') : fmt(c, unit)}</span>
+                      <span className={styles.meta}>{isOtd ? fmt(c, unit) : `${c.count}`}</span>
+                    </td>
+                  );
+                })}
+                <td className={styles.total}>
+                  <span className={styles.primary}>{totals[pm]?.onTimePct != null ? `${totals[pm].onTimePct}%` : (totals[pm] ? fmt(totals[pm], unit) : '·')}</span>
+                  <span className={styles.meta}>{totals[pm]?.count ?? 0}</span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </figure>
+  );
+}

client/src/components/charts/TrendChart/TrendChart.module.scss

@@ -0,0 +1,23 @@
+@use '../../../styles/variables' as *;
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-5;
+  box-shadow: var(--shadow-sm);
+}
+.title {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: $s-3;
+}
+.legend { display: flex; gap: $s-4; margin-bottom: $s-2; flex-wrap: wrap; }
+.legItem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
+.swatch { width: 12px; height: 3px; border-radius: 2px; }
+.svg { width: 100%; height: auto; display: block; }
+.axis { font-size: 9px; fill: var(--text-dim); font-family: var(--mono); }
+.empty { color: var(--text-dim); font-size: 13px; padding: $s-4 0; }

client/src/components/charts/TrendChart/index.tsx

@@ -0,0 +1,66 @@
+import { useId } from 'react';
+import styles from './TrendChart.module.scss';
+import type { MonthPoint } from '../../../types/analytics.types';
+
+interface Series { label: string; color: string; points: MonthPoint[]; }
+interface TrendChartProps {
+  title: string;
+  series: Series[];
+  format?: (n: number) => string;
+  area?: boolean;
+}
+
+const W = 640, H = 220, PADX = 34, PADT = 16, PADB = 30;
+
+export default function TrendChart({ title, series, format, area }: TrendChartProps) {
+  const gid = useId().replace(/:/g, '');
+  const months = [...new Set(series.flatMap(s => s.points.map(p => p.month)))].sort();
+  const max = Math.max(1, ...series.flatMap(s => s.points.map(p => p.count)));
+  const x = (i: number) => PADX + (months.length <= 1 ? 0 : (i / (months.length - 1)) * (W - PADX * 2));
+  const y = (v: number) => PADT + (1 - v / max) * (H - PADT - PADB);
+
+  const line = (pts: MonthPoint[]) => {
+    const byMonth = new Map(pts.map(p => [p.month, p.count]));
+    return months.map((m, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(byMonth.get(m) ?? 0).toFixed(1)}`).join(' ');
+  };
+
+  if (months.length < 2) {
+    return <figure className={styles.card}><figcaption className={styles.title}>{title}</figcaption><div className={styles.empty}>Not enough data</div></figure>;
+  }
+
+  const tick = (v: number) => (format ? format(v) : String(v));
+  const labelEvery = Math.ceil(months.length / 8);
+
+  return (
+    <figure className={styles.card}>
+      <figcaption className={styles.title}>{title}</figcaption>
+      <div className={styles.legend}>
+        {series.map(s => <span key={s.label} className={styles.legItem}><span className={styles.swatch} style={{ background: s.color }} />{s.label}</span>)}
+      </div>
+      <svg className={styles.svg} viewBox={`0 0 ${W} ${H}`} role="img" aria-label={title} preserveAspectRatio="xMidYMid meet">
+        {[0, 0.5, 1].map(f => {
+          const gy = PADT + f * (H - PADT - PADB);
+          return <g key={f}>
+            <line x1={PADX} y1={gy} x2={W - PADX} y2={gy} stroke="var(--border)" strokeWidth="1" />
+            <text x={4} y={gy + 3} className={styles.axis}>{tick(Math.round(max * (1 - f)))}</text>
+          </g>;
+        })}
+        {area && series.length === 1 && (
+          <>
+            <defs>
+              <linearGradient id={`g${gid}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={series[0].color} stopOpacity="0.28" />
+                <stop offset="100%" stopColor={series[0].color} stopOpacity="0" />
+              </linearGradient>
+            </defs>
+            <path d={`${line(series[0].points)} L ${x(months.length - 1)} ${y(0)} L ${x(0)} ${y(0)} Z`} fill={`url(#g${gid})`} />
+          </>
+        )}
+        {series.map(s => <path key={s.label} d={line(s.points)} fill="none" stroke={s.color} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />)}
+        {months.map((m, i) => (i % labelEvery === 0
+          ? <text key={m} x={x(i)} y={H - 8} textAnchor="middle" className={styles.axis}>{m.slice(2)}</text>
+          : null))}
+      </svg>
+    </figure>
+  );
+}

client/src/components/icons/index.tsx

@@ -0,0 +1,115 @@
+interface IconProps { size?: number; }
+
+const base = (size: number) => ({
+  width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
+  stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+});
+
+export function TicketIcon({ size = 16 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M4 5h16a1 1 0 0 1 1 1v3a2 2 0 0 0 0 4v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a2 2 0 0 0 0-4V6a1 1 0 0 1 1-1Z" />
+      <path d="M12 5v14" strokeDasharray="2 3" />
+    </svg>
+  );
+}
+
+export function ArchiveIcon({ size = 16 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <rect x="3" y="4" width="18" height="4" rx="1" />
+      <path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4" />
+    </svg>
+  );
+}
+
+export function ChartIcon({ size = 16 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M3 3v18h18" />
+      <rect x="7" y="11" width="3" height="6" />
+      <rect x="12" y="7" width="3" height="10" />
+      <rect x="17" y="13" width="3" height="4" />
+    </svg>
+  );
+}
+
+export function SearchIcon({ size = 16 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <circle cx="11" cy="11" r="7" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  );
+}
+
+export function ExternalIcon({ size = 14 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  );
+}
+
+export function CloseIcon({ size = 18 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M18 6 6 18M6 6l12 12" />
+    </svg>
+  );
+}
+
+export function SpreadsheetIcon({ size = 15 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 9h18M3 15h18M9 3v18M15 3v18" />
+    </svg>
+  );
+}
+
+// Excel-brand icon: green rounded tile with the white "X" + a hint of grid.
+// Self-colored (own fills), so it reads as Excel regardless of button text colour.
+export function ExcelIcon({ size = 16 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <rect x="3" y="3" width="18" height="18" rx="3.2" fill="#107C41" />
+      <path d="M8.4 8.2 15.6 15.8M15.6 8.2 8.4 15.8" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function DownloadIcon({ size = 14 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" />
+    </svg>
+  );
+}
+
+export function KeyIcon({ size = 16 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <circle cx="7.5" cy="15.5" r="4.5" />
+      <path d="m10.7 12.3 9.3-9.3M17 5l2 2M15 7l1.5 1.5" />
+    </svg>
+  );
+}
+
+export function CommentIcon({ size = 14 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 0 1 12.5 3 8.38 8.38 0 0 1 21 11.5Z" />
+    </svg>
+  );
+}
+
+export function NoteIcon({ size = 14 }: IconProps) {
+  return (
+    <svg {...base(size)}>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+      <path d="M14 2v6h6M8 13h8M8 17h5" />
+    </svg>
+  );
+}

client/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App';
+import './styles/globals.scss';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);

client/src/pages/Active/Active.module.scss

@@ -0,0 +1,19 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; display: flex; flex-direction: column; gap: $s-4; }
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: $s-3;
+}
+.row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $s-3;
+  align-items: start;
+  @media (max-width: 1000px) { grid-template-columns: 1fr; }
+}
+
+.state, .stateError { padding: $s-8; text-align: center; color: var(--text-muted); font-size: 13px; }
+.stateError { color: var(--danger); }

client/src/pages/Active/index.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useMemo, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import KpiTile from '../../components/charts/KpiTile';
+import BarList from '../../components/charts/BarList';
+import TrendChart from '../../components/charts/TrendChart';
+import { getTickets } from '../../services/ticket.service';
+import { getConfig, getJiraDurations } from '../../services/analytics.service';
+import { parseDate } from '../../utils/format.utils';
+import { BOARD_COLUMNS, boardColumn } from '../../utils/board';
+import type { Ticket } from '../../types/ticket.types';
+import type { ForgeConfig, Bucket, MonthPoint, JiraDuration } from '../../types/analytics.types';
+import styles from './Active.module.scss';
+
+const daysSince = (v: string | null): number | null => {
+  const d = parseDate(v);
+  return d ? Math.floor((Date.now() - d.getTime()) / 86_400_000) : null;
+};
+const median = (xs: number[]): number => {
+  if (!xs.length) return 0;
+  const s = [...xs].sort((a, b) => a - b);
+  return Math.round(s[Math.floor(s.length / 2)]);
+};
+
+export default function Active({ refreshKey }: { refreshKey: number }) {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [cfg, setCfg] = useState<ForgeConfig>({});
+  const [jiraDur, setJiraDur] = useState<JiraDuration[]>([]);
+  const [error, setError] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setError(false);
+    Promise.all([
+      getTickets({ status: 'active' }),
+      getConfig().catch(() => ({})),
+      getJiraDurations().then(r => r.rows).catch(() => []),
+    ])
+      .then(([t, c, jd]) => { if (alive) { setTickets(t); setCfg(c); setJiraDur(jd); } })
+      .catch(() => { if (alive) setError(true); })
+      .finally(() => { if (alive) setReady(true); });
+    return () => { alive = false; };
+  }, [refreshKey]);
+
+  const colleagues = cfg.colleagues ?? [];
+
+  const model = useMemo(() => {
+    const colOf = (t: Ticket) => boardColumn(t, colleagues);
+    // by status (column)
+    const byStatus: Bucket[] = BOARD_COLUMNS.map(c => ({
+      key: c.key, label: c.label, count: tickets.filter(t => colOf(t) === c.key).length,
+    })).filter(b => b.count > 0);
+    // opened by month
+    const om = new Map<string, number>();
+    for (const t of tickets) {
+      const d = parseDate(t.openedAt);
+      if (d) { const k = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`; om.set(k, (om.get(k) ?? 0) + 1); }
+    }
+    const openedByMonth: MonthPoint[] = [...om.entries()].sort((a, b) => a[0].localeCompare(b[0])).map(([month, count]) => ({ month, count }));
+    // age histogram
+    const AGE = [[0, 50], [50, 100], [100, 150], [150, 200], [200, Infinity]];
+    const ageHist: Bucket[] = AGE.map(([lo, hi]) => ({
+      key: `${lo}`, label: hi === Infinity ? `${lo}+ d` : `${lo}–${hi} d`,
+      count: tickets.filter(t => { const a = daysSince(t.openedAt); return a != null && a >= lo && a < hi; }).length,
+    }));
+    // median days in current status per column
+    const timeInStatus: Bucket[] = BOARD_COLUMNS.map(c => {
+      const ds = tickets.filter(t => colOf(t) === c.key).map(t => daysSince(t.stateChangedAt)).filter((v): v is number => v != null);
+      return { key: c.key, label: c.label, count: median(ds) };
+    }).filter(b => b.count > 0);
+    // by brand
+    const bm = new Map<string, number>();
+    for (const t of tickets) if (t.brand) bm.set(t.brand, (bm.get(t.brand) ?? 0) + 1);
+    const byBrand: Bucket[] = [...bm.entries()].map(([k, count]) => ({ key: k, label: k, count })).sort((a, b) => b.count - a.count);
+
+    return { byStatus, openedByMonth, ageHist, timeInStatus, byBrand };
+  }, [tickets, colleagues]);
+
+  if (error) return <div className={styles.stateError}>Failed to load active analytics.</div>;
+  if (!ready) return <div className={styles.state}>Loading…</div>;
+
+  const colColor = (b: Bucket) => BOARD_COLUMNS.find(c => c.key === b.key)?.color ?? 'var(--primary)';
+  const count = (key: string) => model.byStatus.find(b => b.key === key)?.count ?? 0;
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Active statistics" subtitle={`${tickets.length} open tickets`} />
+
+      <div className={styles.kpis}>
+        <KpiTile label="Open tickets" value={tickets.length} />
+        <KpiTile label="Unassigned" value={count('unassigned')} tone="neutral" />
+        <KpiTile label="In progress" value={count('wip')} tone="primary" />
+        <KpiTile label="Customer replied" value={count('replied')} tone="danger" />
+        <KpiTile label="Awaiting info" value={count('awaiting')} tone="warning" />
+      </div>
+
+      <div className={styles.row2}>
+        <BarList title="By status" data={model.byStatus} colorFor={colColor} labelWidth={150} />
+        <BarList title="Age distribution (days open)" data={model.ageHist} labelWidth={90}
+          colorFor={(_, i) => ['#16a34a', '#22c55e', '#f59e0b', '#ea580c', '#dc2626'][i] ?? 'var(--primary)'} />
+      </div>
+
+      <div className={styles.row2}>
+        <TrendChart title="Opened per month (still open)" area
+          series={[{ label: 'Opened', color: 'var(--primary)', points: model.openedByMonth }]} />
+        <BarList title="Median days in current status" data={model.timeInStatus} colorFor={colColor}
+          format={n => `${n}d`} labelWidth={150} />
+      </div>
+
+      <div className={styles.row2}>
+        <BarList title="Active tickets by brand" data={model.byBrand} labelWidth={130} />
+        {jiraDur.length > 0 && (
+          <BarList
+            title="Jira status durations (avg days)"
+            data={jiraDur.map(d => ({ key: d.status, label: `${d.status}  ·  ${d.count}`, count: d.avgDays }))}
+            format={n => (n < 1 ? `${Math.round(n * 24)}h` : `${n}d`)}
+            colorFor={(_, i) => `hsl(${(i * 37) % 360} 62% 55%)`}
+            labelWidth={200}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

client/src/pages/Admin/Admin.module.scss

@@ -0,0 +1,64 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; display: flex; flex-direction: column; gap: $s-4; }
+
+.tabs {
+  display: inline-flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+  button {
+    height: 36px; padding: 0 16px; border: none; background: transparent;
+    color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
+    border-bottom: 2px solid transparent; margin-bottom: -1px;
+    &.on { color: var(--primary); border-bottom-color: var(--primary); }
+    &:hover:not(.on) { color: var(--text); }
+  }
+}
+
+.grid { display: grid; grid-template-columns: 340px 1fr; gap: $s-4; align-items: start; @media (max-width: 900px) { grid-template-columns: 1fr; } }
+
+.card {
+  background: var(--surface); border: 1px solid var(--border); border-radius: $radius-lg;
+  padding: $s-5; box-shadow: var(--shadow-sm);
+}
+.cardTitle { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: $s-4; }
+.hint { font-size: 12px; color: var(--text-muted); margin-bottom: $s-3; margin-top: -8px; }
+
+.label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 12px 0 5px; }
+.input {
+  width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: $radius;
+  font-size: 13px; color: var(--text); background: var(--surface); outline: none;
+  &:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
+}
+.err { margin-top: 10px; padding: 8px 10px; border-radius: $radius; background: var(--danger-bg); color: var(--danger); font-size: 12px; }
+.btn {
+  margin-top: 14px; width: 100%; height: 38px; border: none; border-radius: $radius;
+  background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
+  &:hover:not(:disabled) { background: var(--primary-h); }
+  &:disabled { opacity: 0.6; cursor: default; }
+}
+
+.minted { margin-top: 14px; padding: 12px; border: 1px solid var(--success); border-radius: $radius; background: var(--success-bg); }
+.mintedLabel { font-size: 11px; font-weight: 700; color: var(--success); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
+.mintedToken { display: block; font-family: var(--mono); font-size: 11px; word-break: break-all; color: var(--text); cursor: pointer; background: var(--surface); padding: 8px; border-radius: $radius; }
+.copy { margin-top: 8px; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: $radius; background: var(--surface); font-size: 12px; font-weight: 600; cursor: pointer; }
+
+.table {
+  width: 100%; border-collapse: collapse; font-size: 13px;
+  th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
+  td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
+  tr:last-child td { border-bottom: none; }
+}
+.muted { color: var(--text-muted); }
+.mono { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
+.right { text-align: right; }
+.roleBadge {
+  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
+  background: var(--surface-alt); color: var(--text-muted);
+  &[data-role='admin'] { background: var(--danger-bg); color: var(--danger); }
+  &[data-role='lead']  { background: var(--violet-bg, rgba(139,92,246,.1)); color: #7c3aed; }
+  &[data-role='pm']    { background: var(--primary-bg); color: var(--primary); }
+}
+.danger { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: $radius; background: var(--surface); color: var(--danger); font-size: 12px; font-weight: 600; cursor: pointer; &:hover { background: var(--danger-bg); } }
+.revoked { font-size: 12px; color: var(--text-dim); font-style: italic; }
+.revokedRow { opacity: 0.5; }

client/src/pages/Admin/index.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState, useCallback } from 'react';
+import PageHeader from '../../components/PageHeader';
+import { listUsers, createUser, deleteUser, listTokens, createToken, revokeToken, type AppUser, type TokenInfo } from '../../services/admin.service';
+import { ROLE_LABELS, roleAtLeast, type Role, type CurrentUser } from '../../services/auth.service';
+import styles from './Admin.module.scss';
+
+const fmt = (v: string | null) => (v ? new Date(v).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : '—');
+
+export default function Admin({ user }: { user: CurrentUser }) {
+  const isAdmin = user.role === 'admin';
+  const [tab, setTab] = useState<'users' | 'tokens'>('users');
+  useEffect(() => { if (!isAdmin) setTab('users'); }, [isAdmin]);
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Administration" subtitle="Users and API access" />
+      <div className={styles.tabs}>
+        <button className={tab === 'users' ? styles.on : ''} onClick={() => setTab('users')}>Users</button>
+        {isAdmin && <button className={tab === 'tokens' ? styles.on : ''} onClick={() => setTab('tokens')}>API Tokens</button>}
+      </div>
+      {tab === 'users' ? <UsersPanel me={user} /> : <TokensPanel />}
+    </div>
+  );
+}
+
+function UsersPanel({ me }: { me: CurrentUser }) {
+  const [users, setUsers] = useState<AppUser[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [role, setRole] = useState<Role>('viewer');
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(() => { listUsers().then(setUsers).catch(() => setError('Failed to load users')); }, []);
+  useEffect(() => { load(); }, [load]);
+
+  // Leadership can grant up to 'lead'; only admin can grant 'admin'.
+  const grantable: Role[] = me.role === 'admin' ? ['viewer', 'pm', 'lead', 'admin'] : ['viewer', 'pm', 'lead'];
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true); setError(null);
+    try {
+      const res = await createUser(username.trim(), password, role);
+      if (res.user) { setUsername(''); setPassword(''); setRole('viewer'); load(); }
+      else setError(res.message || 'Could not create user');
+    } catch { setError('Could not create user'); }
+    finally { setBusy(false); }
+  };
+
+  const remove = async (u: string) => {
+    if (!confirm(`Delete user "${u}"?`)) return;
+    await deleteUser(u).catch(() => {});
+    load();
+  };
+
+  return (
+    <div className={styles.grid}>
+      <form className={styles.card} onSubmit={submit}>
+        <h3 className={styles.cardTitle}>Add user</h3>
+        <label className={styles.label}>Username</label>
+        <input className={styles.input} value={username} onChange={e => setUsername(e.target.value)} autoComplete="off" />
+        <label className={styles.label}>Password</label>
+        <input className={styles.input} type="password" value={password} onChange={e => setPassword(e.target.value)} autoComplete="new-password" placeholder="min 6 chars" />
+        <label className={styles.label}>Role</label>
+        <select className={styles.input} value={role} onChange={e => setRole(e.target.value as Role)}>
+          {grantable.map(r => <option key={r} value={r}>{ROLE_LABELS[r]}</option>)}
+        </select>
+        {error && <div className={styles.err}>{error}</div>}
+        <button className={styles.btn} type="submit" disabled={busy || username.trim().length < 2 || password.length < 6}>
+          {busy ? 'Creating…' : 'Create user'}
+        </button>
+      </form>
+
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>Users ({users.length})</h3>
+        <table className={styles.table}>
+          <thead><tr><th>Username</th><th>Role</th><th>Last login</th><th></th></tr></thead>
+          <tbody>
+            {users.map(u => (
+              <tr key={u.id}>
+                <td>{u.username}</td>
+                <td><span className={styles.roleBadge} data-role={u.role}>{ROLE_LABELS[u.role]}</span></td>
+                <td className={styles.muted}>{fmt(u.lastLoginAt)}</td>
+                <td className={styles.right}>
+                  {u.username !== me.username && <button className={styles.danger} onClick={() => remove(u.username)}>Delete</button>}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function TokensPanel() {
+  const [tokens, setTokens] = useState<TokenInfo[]>([]);
+  const [label, setLabel] = useState('');
+  const [minted, setMinted] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(() => { listTokens().then(setTokens).catch(() => {}); }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const create = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    try {
+      const res = await createToken(label.trim() || 'sync-extension');
+      setMinted(res.token); setLabel(''); load();
+    } finally { setBusy(false); }
+  };
+  const revoke = async (id: number) => { if (confirm('Revoke this token?')) { await revokeToken(id).catch(() => {}); load(); } };
+
+  return (
+    <div className={styles.grid}>
+      <form className={styles.card} onSubmit={create}>
+        <h3 className={styles.cardTitle}>Create API token</h3>
+        <p className={styles.hint}>For the FORGE Snow Sync Chrome extension. The raw token is shown once.</p>
+        <label className={styles.label}>Label</label>
+        <input className={styles.input} value={label} onChange={e => setLabel(e.target.value)} placeholder="e.g. my laptop" />
+        <button className={styles.btn} type="submit" disabled={busy}>{busy ? 'Creating…' : 'Create token'}</button>
+        {minted && (
+          <div className={styles.minted}>
+            <div className={styles.mintedLabel}>Copy now — shown once:</div>
+            <code className={styles.mintedToken} onClick={() => navigator.clipboard?.writeText(minted)}>{minted}</code>
+            <button type="button" className={styles.copy} onClick={() => navigator.clipboard?.writeText(minted)}>Copy</button>
+          </div>
+        )}
+      </form>
+
+      <div className={styles.card}>
+        <h3 className={styles.cardTitle}>Tokens ({tokens.length})</h3>
+        <table className={styles.table}>
+          <thead><tr><th>Label</th><th>ID</th><th>Last used</th><th>Expires</th><th></th></tr></thead>
+          <tbody>
+            {tokens.map(t => (
+              <tr key={t.id} className={t.revoked ? styles.revokedRow : ''}>
+                <td>{t.label}</td>
+                <td className={styles.mono}>{t.tokenId}</td>
+                <td className={styles.muted}>{fmt(t.lastUsedAt)}</td>
+                <td className={styles.muted}>{fmt(t.expiresAt)}</td>
+                <td className={styles.right}>
+                  {t.revoked ? <span className={styles.revoked}>revoked</span> : <button className={styles.danger} onClick={() => revoke(t.id)}>Revoke</button>}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

client/src/pages/Board/Board.module.scss

@@ -0,0 +1,85 @@
+@use '../../styles/variables' as *;
+
+.page { display: flex; flex-direction: column; gap: $s-4; height: 100%; }
+
+.select {
+  height: 32px;
+  padding: 0 26px 0 10px;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12px;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  &:hover { border-color: var(--border-strong); }
+  &:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
+}
+
+.toggle {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  overflow: hidden;
+  button {
+    height: 32px; padding: 0 12px; border: none; background: var(--surface);
+    color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer;
+    &.on { background: var(--primary); color: #fff; }
+  }
+}
+
+.export {
+  height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: $radius;
+  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 6px;
+  &:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--border-strong); }
+  &:disabled { opacity: 0.5; cursor: default; }
+}
+.exportIcon { display: inline-flex; color: #107c10; } // Excel green
+
+.board {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(240px, 1fr);
+  gap: $s-3;
+  overflow-x: auto;
+  align-items: start;
+  padding-bottom: $s-3;
+  flex: 1;
+  min-height: 0;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  min-height: 120px;
+  max-height: 100%;
+}
+.colHead {
+  padding: 10px 12px;
+  border-bottom: 2px solid var(--col);
+  border-radius: $radius-lg $radius-lg 0 0;
+  background: var(--surface);
+}
+.colTitleRow { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.colTitle { font-size: 12px; font-weight: 700; color: var(--text); }
+.colCount {
+  min-width: 20px; text-align: center; font-size: 11px; font-weight: 700;
+  padding: 1px 7px; border-radius: 999px; background: var(--col); color: #fff;
+}
+.colSla { display: block; margin-top: 3px; font-size: 10px; color: var(--text-dim); }
+
+.colBody { padding: 9px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; }
+.colEmpty { font-size: 12px; color: var(--text-dim); text-align: center; padding: $s-4 0; }
+
+.state, .stateError {
+  padding: $s-8; text-align: center; color: var(--text-muted); font-size: 13px;
+  background: var(--surface); border: 1px solid var(--border); border-radius: $radius-lg;
+}
+.stateError { color: var(--danger); }

client/src/pages/Board/index.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import BoardCard from '../../components/Board/BoardCard';
+import TicketTable from '../../components/TicketTable';
+import TicketDetailModal from '../../components/TicketDetailModal';
+import { getTickets } from '../../services/ticket.service';
+import { getConfig } from '../../services/analytics.service';
+import { BOARD_COLUMNS, boardColumn, type ColumnKey } from '../../utils/board';
+import { exportTicketsXlsx } from '../../utils/excel.utils';
+import { ExcelIcon } from '../../components/icons';
+import type { Ticket } from '../../types/ticket.types';
+import type { ForgeConfig } from '../../types/analytics.types';
+import styles from './Board.module.scss';
+
+export default function Board({ search, refreshKey }: { search: string; refreshKey: number }) {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [cfg, setCfg] = useState<ForgeConfig>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [selected, setSelected] = useState<Ticket | null>(null);
+  const [brand, setBrand] = useState('');
+  const [market, setMarket] = useState('');
+  const [assignee, setAssignee] = useState('');
+  const [view, setView] = useState<'board' | 'list'>('board');
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true); setError(false);
+    Promise.all([getTickets({ status: 'active', q: search || undefined }), getConfig().catch(() => ({}))])
+      .then(([t, c]) => { if (alive) { setTickets(t); setCfg(c); } })
+      .catch(() => { if (alive) setError(true); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [search, refreshKey]);
+
+  const colleagues = cfg.colleagues ?? [];
+  const thresholds = cfg.insightsThresholds ?? {};
+
+  const distinct = (sel: (t: Ticket) => string | null) =>
+    [...new Set(tickets.map(sel).filter((v): v is string => !!v))].sort();
+  const brands = useMemo(() => distinct(t => t.brand), [tickets]);
+  const markets = useMemo(() => distinct(t => t.market), [tickets]);
+  const assignees = useMemo(() => distinct(t => t.assignedTo), [tickets]);
+
+  const filtered = useMemo(() => tickets.filter(t =>
+    (!brand || t.brand === brand) && (!market || t.market === market) && (!assignee || t.assignedTo === assignee),
+  ), [tickets, brand, market, assignee]);
+
+  const columns = useMemo(() => {
+    const groups: Record<ColumnKey, Ticket[]> = { unassigned: [], open: [], hold: [], wip: [], replied: [], awaiting: [] };
+    for (const t of filtered) groups[boardColumn(t, colleagues)].push(t);
+    return groups;
+  }, [filtered, colleagues]);
+
+  const brandColor = (b: string | null) => {
+    if (!b) return undefined;
+    return cfg.brandColors?.[b.toLowerCase().split(/[\s-]/)[0]];
+  };
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Active board" subtitle={`${filtered.length} of ${tickets.length} open tickets`}>
+        <select className={styles.select} value={brand} onChange={e => setBrand(e.target.value)}>
+          <option value="">All brands</option>{brands.map(b => <option key={b}>{b}</option>)}
+        </select>
+        <select className={styles.select} value={market} onChange={e => setMarket(e.target.value)}>
+          <option value="">All markets</option>{markets.map(m => <option key={m}>{m}</option>)}
+        </select>
+        <select className={styles.select} value={assignee} onChange={e => setAssignee(e.target.value)}>
+          <option value="">All PMs</option>{assignees.map(a => <option key={a}>{a}</option>)}
+        </select>
+        <div className={styles.toggle}>
+          <button className={view === 'board' ? styles.on : ''} onClick={() => setView('board')}>Board</button>
+          <button className={view === 'list' ? styles.on : ''} onClick={() => setView('list')}>List</button>
+        </div>
+        <button className={styles.export} onClick={() => exportTicketsXlsx(filtered, 'forge-active-tickets')} disabled={filtered.length === 0}
+          title="Export the filtered tickets to Excel">
+          <ExcelIcon size={15} />
+          Excel
+        </button>
+      </PageHeader>
+
+      {loading && <div className={styles.state}>Loading board…</div>}
+      {error && <div className={styles.stateError}>Failed to load the board. Is the server running?</div>}
+
+      {!loading && !error && view === 'board' && (
+        <div className={styles.board}>
+          {BOARD_COLUMNS.map(col => {
+            const items = columns[col.key];
+            const thr = thresholds[col.slaKey];
+            return (
+              <section key={col.key} className={styles.column}>
+                <header className={styles.colHead} style={{ '--col': col.color } as React.CSSProperties}>
+                  <div className={styles.colTitleRow}>
+                    <span className={styles.colTitle}>{col.label}</span>
+                    <span className={styles.colCount}>{items.length}</span>
+                  </div>
+                  {thr != null && <span className={styles.colSla}>{col.slaVerb(thr)}</span>}
+                </header>
+                <div className={styles.colBody}>
+                  {items.length === 0
+                    ? <div className={styles.colEmpty}>No tickets</div>
+                    : items.map(t => <BoardCard key={t.number} ticket={t} color={col.color} brandColor={brandColor(t.brand)} onSelect={setSelected} />)}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      )}
+
+      {!loading && !error && view === 'list' && (
+        <TicketTable tickets={filtered} variant="active" onSelect={setSelected} />
+      )}
+
+      {selected && <TicketDetailModal ticket={selected} onClose={() => setSelected(null)} />}
+    </div>
+  );
+}

client/src/pages/Closed/Closed.module.scss

@@ -0,0 +1,50 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; }
+
+.select {
+  height: 32px;
+  padding: 0 28px 0 10px;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 9px center;
+
+  &:hover { border-color: var(--border-strong); }
+  &:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
+}
+
+.summary {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $s-3;
+  margin-bottom: $s-4;
+}
+.stat {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-4;
+  box-shadow: var(--shadow-sm);
+}
+.statValue { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
+.statLabel { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
+
+.state, .stateError {
+  padding: $s-8;
+  text-align: center;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  font-size: 13px;
+}
+.stateError { color: var(--danger); }

client/src/pages/Closed/index.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import TicketTable from '../../components/TicketTable';
+import TicketDetailModal from '../../components/TicketDetailModal';
+import { getTickets } from '../../services/ticket.service';
+import { formatCost, formatMinutes } from '../../utils/format.utils';
+import type { Ticket } from '../../types/ticket.types';
+import styles from './Closed.module.scss';
+
+export default function Closed({ search, refreshKey }: { search: string; refreshKey: number }) {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [selected, setSelected] = useState<Ticket | null>(null);
+  const [brandFilter, setBrandFilter] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError(false);
+    getTickets({ status: 'closed', q: search || undefined })
+      .then(t => { if (alive) setTickets(t); })
+      .catch(() => { if (alive) setError(true); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [search, refreshKey]);
+
+  const brands = useMemo(
+    () => [...new Set(tickets.map(t => t.brand).filter((b): b is string => !!b))].sort(),
+    [tickets],
+  );
+  const filtered = useMemo(
+    () => tickets.filter(t => !brandFilter || t.brand === brandFilter),
+    [tickets, brandFilter],
+  );
+
+  const totalCost = useMemo(
+    () => filtered.reduce((sum, t) => sum + (t.finalCost ?? 0), 0),
+    [filtered],
+  );
+  const avgTtfr = useMemo(() => {
+    const vals = filtered.map(t => t.ttfrMinutes).filter((v): v is number => v != null);
+    return vals.length ? Math.round(vals.reduce((a, b) => a + b, 0) / vals.length) : null;
+  }, [filtered]);
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Closed tickets" subtitle={`${filtered.length} fulfilled requests`}>
+        <select className={styles.select} value={brandFilter} onChange={e => setBrandFilter(e.target.value)}>
+          <option value="">All brands</option>
+          {brands.map(b => <option key={b} value={b}>{b}</option>)}
+        </select>
+      </PageHeader>
+
+      {!loading && !error && filtered.length > 0 && (
+        <div className={styles.summary}>
+          <Stat label="Tickets" value={String(filtered.length)} />
+          <Stat label="Total cost" value={formatCost(totalCost)} />
+          <Stat label="Avg. time to first reply" value={formatMinutes(avgTtfr)} />
+        </div>
+      )}
+
+      {loading && <div className={styles.state}>Loading tickets…</div>}
+      {error && <div className={styles.stateError}>Failed to load tickets. Is the server running?</div>}
+      {!loading && !error && filtered.length === 0 && <div className={styles.state}>No closed tickets found.</div>}
+      {!loading && !error && filtered.length > 0 && (
+        <TicketTable tickets={filtered} variant="closed" onSelect={setSelected} />
+      )}
+
+      {selected && <TicketDetailModal ticket={selected} onClose={() => setSelected(null)} />}
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className={styles.stat}>
+      <div className={styles.statValue}>{value}</div>
+      <div className={styles.statLabel}>{label}</div>
+    </div>
+  );
+}

client/src/pages/Dashboard/Dashboard.module.scss

@@ -0,0 +1,34 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; }
+
+.select {
+  height: 32px;
+  padding: 0 28px 0 10px;
+  border: 1px solid var(--border);
+  border-radius: $radius;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 9px center;
+
+  &:hover { border-color: var(--border-strong); }
+  &:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
+}
+
+.state, .stateError {
+  padding: $s-8;
+  text-align: center;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  font-size: 13px;
+}
+.stateError { color: var(--danger); }

client/src/pages/Dashboard/index.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import TicketTable from '../../components/TicketTable';
+import TicketDetailModal from '../../components/TicketDetailModal';
+import { getTickets } from '../../services/ticket.service';
+import type { Ticket } from '../../types/ticket.types';
+import styles from './Dashboard.module.scss';
+
+export default function Dashboard({ search, refreshKey }: { search: string; refreshKey: number }) {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [selected, setSelected] = useState<Ticket | null>(null);
+  const [stateFilter, setStateFilter] = useState<string>('');
+  const [groupFilter, setGroupFilter] = useState<string>('');
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    setError(false);
+    getTickets({ status: 'active', q: search || undefined })
+      .then(t => { if (alive) setTickets(t); })
+      .catch(() => { if (alive) setError(true); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [search, refreshKey]);
+
+  const states = useMemo(() => distinct(tickets.map(t => t.state)), [tickets]);
+  const groups = useMemo(() => distinct(tickets.map(t => t.assignmentGroup)), [tickets]);
+
+  const filtered = useMemo(() => tickets.filter(t =>
+    (!stateFilter || t.state === stateFilter) &&
+    (!groupFilter || t.assignmentGroup === groupFilter),
+  ), [tickets, stateFilter, groupFilter]);
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Active board" subtitle={`${filtered.length} of ${tickets.length} open tickets`}>
+        <select className={styles.select} value={stateFilter} onChange={e => setStateFilter(e.target.value)}>
+          <option value="">All states</option>
+          {states.map(s => <option key={s} value={s}>{s}</option>)}
+        </select>
+        <select className={styles.select} value={groupFilter} onChange={e => setGroupFilter(e.target.value)}>
+          <option value="">All groups</option>
+          {groups.map(g => <option key={g} value={g}>{shortGroup(g)}</option>)}
+        </select>
+      </PageHeader>
+
+      {loading && <div className={styles.state}>Loading tickets…</div>}
+      {error && <div className={styles.stateError}>Failed to load tickets. Is the server running?</div>}
+      {!loading && !error && filtered.length === 0 && (
+        <div className={styles.state}>No tickets match the current filters.</div>
+      )}
+      {!loading && !error && filtered.length > 0 && (
+        <TicketTable tickets={filtered} variant="active" onSelect={setSelected} />
+      )}
+
+      {selected && <TicketDetailModal ticket={selected} onClose={() => setSelected(null)} />}
+    </div>
+  );
+}
+
+function distinct(values: (string | null)[]): string[] {
+  return [...new Set(values.filter((v): v is string => !!v))].sort();
+}
+function shortGroup(g: string): string {
+  return g.replace(/^L3\s+/, '').replace(/\s+Marketing Web Presence$/i, '');
+}

client/src/pages/Insights/Insights.module.scss

@@ -0,0 +1,100 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; display: flex; flex-direction: column; gap: $s-3; }
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: $s-3;
+  margin-bottom: $s-2;
+}
+.h2 {
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-top: $s-4;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: $s-3;
+  align-items: start;
+}
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.cardHot { border-left: 3px solid var(--danger); }
+.cardHead {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $s-3;
+  padding: 12px 14px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  &:hover { background: var(--surface-alt); }
+}
+.cardTitle { font-size: 13px; font-weight: 600; color: var(--text); }
+.counts { display: flex; align-items: center; gap: 6px; }
+.problem {
+  min-width: 22px; text-align: center; font-size: 11px; font-weight: 700;
+  padding: 1px 7px; border-radius: 999px; background: var(--danger-bg); color: var(--danger);
+}
+.total {
+  min-width: 22px; text-align: center; font-size: 11px; font-weight: 700;
+  padding: 1px 7px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted);
+}
+
+.list { list-style: none; border-top: 1px solid var(--border); max-height: 340px; overflow-y: auto; }
+.row {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto auto;
+  align-items: center;
+  gap: $s-2;
+  padding: 6px 14px;
+  font-size: 12px;
+  border-bottom: 1px solid var(--border);
+  &:last-child { border-bottom: none; }
+}
+.emptyRow { padding: 10px 14px; color: var(--text-dim); font-size: 12px; }
+.rowNum { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-weight: 700; color: var(--primary); white-space: nowrap; }
+.rowDesc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
+.rowMeta { color: var(--text-muted); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
+.rowDays { font-weight: 600; color: var(--warning); font-variant-numeric: tabular-nums; }
+.rowCost { font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+
+.pmCard {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  box-shadow: var(--shadow-sm);
+  overflow-x: auto;
+}
+.pmTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  th {
+    text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
+    letter-spacing: 0.04em; color: var(--text-muted); padding: 10px 14px;
+    background: var(--surface-alt); border-bottom: 1px solid var(--border); white-space: nowrap;
+  }
+  td { padding: 8px 14px; border-bottom: 1px solid var(--border); }
+  tr:last-child td { border-bottom: none; }
+}
+.num { text-align: right; font-variant-numeric: tabular-nums; }
+.alertBadge { font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--danger-bg); color: var(--danger); }
+.risk { font-weight: 600; color: var(--danger); }
+
+.state, .stateError { padding: $s-8; text-align: center; color: var(--text-muted); font-size: 13px; }
+.stateError { color: var(--danger); }

client/src/pages/Insights/index.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import KpiTile from '../../components/charts/KpiTile';
+import { ExternalIcon } from '../../components/icons';
+import { getInsights } from '../../services/analytics.service';
+import type { InsightsResponse, AlertGroup, InsightTicket } from '../../types/analytics.types';
+import styles from './Insights.module.scss';
+
+const money = (n: number) => (n >= 1000 ? `£${(n / 1000).toFixed(1)}k` : `£${n}`);
+
+// Which groups feed the alert total (vs informational).
+const ALERT_KEYS = new Set(['unassigned', 'assigned', 'hold', 'wipStalled', 'wipNoJira', 'replied', 'awaiting']);
+
+export default function Insights({ refreshKey }: { refreshKey: number }) {
+  const [data, setData] = useState<InsightsResponse | null>(null);
+  const [error, setError] = useState(false);
+  const [open, setOpen] = useState<string | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setError(false);
+    getInsights().then(d => { if (alive) setData(d); }).catch(() => { if (alive) setError(true); });
+    return () => { alive = false; };
+  }, [refreshKey]);
+
+  if (error) return <div className={styles.stateError}>Failed to load insights.</div>;
+  if (!data) return <div className={styles.state}>Analysing backlog…</div>;
+
+  const alertGroups = data.groups.filter(g => ALERT_KEYS.has(g.key));
+  const infoGroups = data.groups.filter(g => !ALERT_KEYS.has(g.key));
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="PM Insights" subtitle="Problematic tickets across the active backlog, by category" />
+
+      <div className={styles.kpis}>
+        <KpiTile label="Total alerts" value={data.totalAlerts} tone="danger" />
+        <KpiTile label="Revenue at risk" value={money(data.revAtRisk)} tone="danger" />
+        <KpiTile label="Waiting on PO" value={data.waitingPo.count} tone="warning" hint={money(data.waitingPo.revenue)} />
+        <KpiTile label="PO escalations" value={`${data.waitingPo.levels.l1}·${data.waitingPo.levels.l2}·${data.waitingPo.levels.l3}`} tone="warning" hint="L1 · L2 · L3" />
+      </div>
+
+      <h2 className={styles.h2}>Alert categories</h2>
+      <div className={styles.grid}>
+        {alertGroups.map(g => <AlertCard key={g.key} g={g} open={open === g.key} onToggle={() => setOpen(open === g.key ? null : g.key)} showProblem />)}
+      </div>
+
+      <h2 className={styles.h2}>Watch list</h2>
+      <div className={styles.grid}>
+        {infoGroups.map(g => <AlertCard key={g.key} g={g} open={open === g.key} onToggle={() => setOpen(open === g.key ? null : g.key)} />)}
+      </div>
+
+      <h2 className={styles.h2}>Per-PM roll-up</h2>
+      <div className={styles.pmCard}>
+        <table className={styles.pmTable}>
+          <thead>
+            <tr><th>PM</th><th className={styles.num}># Tickets</th><th className={styles.num}>$ Revenue</th><th className={styles.num}>⚠ Alerts</th><th className={styles.num}>Rev at risk</th></tr>
+          </thead>
+          <tbody>
+            {data.pms.map(p => (
+              <tr key={p.pm}>
+                <td>{p.pm}</td>
+                <td className={styles.num}>{p.tickets}</td>
+                <td className={styles.num}>{money(p.revenue)}</td>
+                <td className={styles.num}>{p.alerts > 0 ? <span className={styles.alertBadge}>{p.alerts}</span> : '—'}</td>
+                <td className={styles.num}>{p.revAtRisk > 0 ? <span className={styles.risk}>{money(p.revAtRisk)}</span> : '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function AlertCard({ g, open, onToggle, showProblem }: { g: AlertGroup; open: boolean; onToggle: () => void; showProblem?: boolean }) {
+  const shown = showProblem ? g.tickets.filter((_, i) => i < g.problematic || open) : g.tickets;
+  return (
+    <div className={`${styles.card} ${showProblem && g.problematic > 0 ? styles.cardHot : ''}`}>
+      <button className={styles.cardHead} onClick={onToggle}>
+        <span className={styles.cardTitle}>{g.label}</span>
+        <span className={styles.counts}>
+          {showProblem && <span className={styles.problem}>{g.problematic}</span>}
+          <span className={styles.total}>{g.count}</span>
+        </span>
+      </button>
+      {open && (
+        <ul className={styles.list}>
+          {shown.length === 0 && <li className={styles.emptyRow}>No tickets</li>}
+          {shown.map(t => <TicketRow key={t.number} t={t} />)}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function TicketRow({ t }: { t: InsightTicket }) {
+  return (
+    <li className={styles.row}>
+      <a className={styles.rowNum} href={t.link ?? undefined} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()}>
+        {t.number}{t.link && <ExternalIcon size={11} />}
+      </a>
+      <span className={styles.rowDesc} title={t.shortDesc}>{t.shortDesc}</span>
+      <span className={styles.rowMeta}>{t.assignedTo ?? '—'}</span>
+      {t.days != null && <span className={styles.rowDays}>{t.days}d</span>}
+      {t.costGbp > 0 && <span className={styles.rowCost}>{money(t.costGbp)}</span>}
+    </li>
+  );
+}

client/src/pages/Overview/Overview.module.scss

@@ -0,0 +1,35 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; display: flex; flex-direction: column; gap: $s-4; }
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: $s-3;
+}
+
+.row2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $s-3;
+  align-items: start;
+
+  @media (max-width: 1000px) { grid-template-columns: 1fr; }
+}
+.stack { display: flex; flex-direction: column; gap: $s-3; }
+
+.revWrap { position: relative; }
+.revToggle {
+  position: absolute; top: $s-5; right: 132px; z-index: 1;
+  display: inline-flex; border: 1px solid var(--border); border-radius: $radius; overflow: hidden;
+  button { height: 26px; padding: 0 10px; border: none; background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
+    &.on { background: var(--primary); color: #fff; } }
+}
+
+.state, .stateError {
+  padding: $s-8;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+.stateError { color: var(--danger); }

client/src/pages/Overview/index.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import KpiTile from '../../components/charts/KpiTile';
+import BarList from '../../components/charts/BarList';
+import GroupedBars from '../../components/charts/GroupedBars';
+import DonutChart from '../../components/charts/DonutChart';
+import ExpandBarList from '../../components/charts/ExpandBarList';
+import { getOverview, getConfig } from '../../services/analytics.service';
+import type { OverviewResponse, ForgeConfig, Bucket } from '../../types/analytics.types';
+import styles from './Overview.module.scss';
+
+function money(n: number): string {
+  if (n >= 1_000_000) return `£${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `£${(n / 1_000).toFixed(0)}k`;
+  return `£${n}`;
+}
+
+export default function Overview({ refreshKey }: { refreshKey: number }) {
+  const [data, setData] = useState<OverviewResponse | null>(null);
+  const [cfg, setCfg] = useState<ForgeConfig>({});
+  const [error, setError] = useState(false);
+  const [revMode, setRevMode] = useState<'cost' | 'tickets'>('cost');
+
+  useEffect(() => {
+    let alive = true;
+    setError(false);
+    Promise.all([getOverview(), getConfig().catch(() => ({}))])
+      .then(([o, c]) => { if (alive) { setData(o); setCfg(c); } })
+      .catch(() => { if (alive) setError(true); });
+    return () => { alive = false; };
+  }, [refreshKey]);
+
+  if (error) return <div className={styles.stateError}>Failed to load analytics.</div>;
+  if (!data) return <div className={styles.state}>Loading analytics…</div>;
+
+  const brandColor = (b: Bucket) => cfg.brandColors?.[b.key.toLowerCase().split(/[\s-]/)[0]] ?? 'var(--primary)';
+  const totalRevenue = data.revenueByMonth.reduce((s, m) => s + m.count, 0);
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Overall statistics" subtitle={`${data.totals.total} tickets · ${data.totals.closed} closed`} />
+
+      <div className={styles.kpis}>
+        <KpiTile label="Total tickets" value={data.totals.total} />
+        <KpiTile label="Active" value={data.totals.active} tone="warning" />
+        <KpiTile label="Closed" value={data.totals.closed} tone="success" />
+        <KpiTile label="Delivered revenue" value={money(totalRevenue)} tone="primary" />
+        <KpiTile label="Median lifetime" value={data.lifetime.medianDays != null ? `${data.lifetime.medianDays}d` : '—'} tone="neutral" hint={data.lifetime.avgDays != null ? `avg ${data.lifetime.avgDays}d` : undefined} />
+      </div>
+
+      <div className={styles.row2}>
+        <GroupedBars title="Opened per month" points={data.openedByMonth} />
+        <GroupedBars title="Closed per month" points={data.closedByMonth} />
+      </div>
+
+      <div className={styles.row2}>
+        <div className={styles.revWrap}>
+          <div className={styles.revToggle}>
+            <button className={revMode === 'cost' ? styles.on : ''} onClick={() => setRevMode('cost')}>Cost</button>
+            <button className={revMode === 'tickets' ? styles.on : ''} onClick={() => setRevMode('tickets')}>Tickets</button>
+          </div>
+          <GroupedBars
+            title={revMode === 'cost' ? 'Revenue per month (closed)' : 'Tickets closed per month'}
+            points={revMode === 'cost' ? data.revenueByMonth : data.closedByMonth}
+            format={revMode === 'cost' ? money : undefined}
+            defaultMode="line"
+          />
+        </div>
+        <DonutChart title="Ticket share by requester" data={data.byRequesterShare} />
+      </div>
+
+      <div className={styles.row2}>
+        <ExpandBarList title="By brand → market" data={data.byBrand} colorFor={brandColor} labelWidth={140} />
+        <ExpandBarList title="By requester → brand" data={data.byRequester} labelWidth={200} />
+      </div>
+
+      <div className={styles.row2}>
+        <BarList title="By market" data={data.byMarket} labelWidth={130} />
+        <div className={styles.stack}>
+          <BarList title="By business unit" data={data.byBusinessUnit} labelWidth={130} />
+          <BarList title="Ticket lifetime at close" data={data.lifetime.buckets} labelWidth={100}
+            colorFor={(_, i) => ['#16a34a', '#22c55e', '#f59e0b', '#ea580c', '#dc2626', '#991b1b'][i] ?? 'var(--primary)'} />
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/pages/SlaKpi/SlaKpi.module.scss

@@ -0,0 +1,12 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; }
+.grid { display: flex; flex-direction: column; gap: $s-3; }
+
+.state, .stateError {
+  padding: $s-8;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+.stateError { color: var(--danger); }

client/src/pages/SlaKpi/index.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import SlaHeatmap from '../../components/charts/SlaHeatmap';
+import { getSla } from '../../services/analytics.service';
+import type { SlaMetric } from '../../types/analytics.types';
+import styles from './SlaKpi.module.scss';
+
+export default function SlaKpi({ refreshKey }: { refreshKey: number }) {
+  const [metrics, setMetrics] = useState<SlaMetric[] | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setError(false);
+    getSla()
+      .then(r => { if (alive) setMetrics(r.metrics); })
+      .catch(() => { if (alive) setError(true); });
+    return () => { alive = false; };
+  }, [refreshKey]);
+
+  if (error) return <div className={styles.stateError}>Failed to load SLA metrics.</div>;
+  if (!metrics) return <div className={styles.state}>Loading SLA metrics…</div>;
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="PM KPIs — SLA" subtitle="Per-PM × ticket-size averages vs configured norms (green = on target, red = over)" />
+      <div className={styles.grid}>
+        {metrics.map(m => <SlaHeatmap key={m.key} metric={m} />)}
+      </div>
+    </div>
+  );
+}

client/src/pages/Stats/Stats.module.scss

@@ -0,0 +1,90 @@
+@use '../../styles/variables' as *;
+
+.page { max-width: none; }
+
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: $s-3;
+  margin-bottom: $s-4;
+}
+.kpi {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-5;
+  box-shadow: var(--shadow-sm);
+}
+.kpiAccent {
+  background: linear-gradient(135deg, var(--primary), var(--primary-h));
+  border-color: transparent;
+  .kpiValue, .kpiLabel { color: #fff; }
+  .kpiLabel { opacity: 0.85; }
+}
+.kpiValue { font-size: 30px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
+.kpiLabel { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $s-3;
+}
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: $radius-lg;
+  padding: $s-5;
+  box-shadow: var(--shadow-sm);
+}
+.cardWide { grid-column: 1 / -1; }
+.cardTitle {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: $s-4;
+}
+
+.bars { list-style: none; display: flex; flex-direction: column; gap: 10px; }
+.bar {
+  display: grid;
+  grid-template-columns: 160px 1fr 40px;
+  align-items: center;
+  gap: $s-3;
+}
+.barLabel {
+  font-size: 12px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.barTrack {
+  height: 20px;
+  background: var(--surface-alt);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.barFill {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--primary), var(--primary-h));
+  transition: width 0.4s ease;
+}
+.barValue {
+  text-align: right;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.state, .stateError {
+  padding: $s-8;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+.stateError { color: var(--danger); }

client/src/pages/Stats/index.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import PageHeader from '../../components/PageHeader';
+import { getStats } from '../../services/ticket.service';
+import type { StatsResponse } from '../../types/ticket.types';
+import styles from './Stats.module.scss';
+
+export default function Stats({ refreshKey }: { refreshKey: number }) {
+  const [stats, setStats] = useState<StatsResponse | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    setError(false);
+    getStats().then(s => { if (alive) setStats(s); }).catch(() => { if (alive) setError(true); });
+    return () => { alive = false; };
+  }, [refreshKey]);
+
+  if (error) return <div className={styles.stateError}>Failed to load statistics.</div>;
+  if (!stats) return <div className={styles.state}>Loading…</div>;
+
+  return (
+    <div className={styles.page}>
+      <PageHeader title="Statistics" subtitle="Distribution across the active ticket board" />
+
+      <div className={styles.kpis}>
+        <Kpi label="Total tickets" value={stats.total} accent />
+        <Kpi label="Active" value={stats.active} />
+        <Kpi label="Closed" value={stats.closed} />
+      </div>
+
+      <div className={styles.grid}>
+        <BarCard title="By state" data={stats.byState.map(d => ({ label: d.state, count: d.count }))} />
+        <BarCard title="By assignment group" data={stats.byGroup.map(d => ({ label: shortGroup(d.group), count: d.count }))} />
+        <BarCard title="Top assignees" data={stats.byAssignee.map(d => ({ label: d.assignee, count: d.count }))} wide />
+      </div>
+    </div>
+  );
+}
+
+function Kpi({ label, value, accent }: { label: string; value: number; accent?: boolean }) {
+  return (
+    <div className={`${styles.kpi} ${accent ? styles.kpiAccent : ''}`}>
+      <div className={styles.kpiValue}>{value}</div>
+      <div className={styles.kpiLabel}>{label}</div>
+    </div>
+  );
+}
+
+function BarCard({ title, data, wide }: { title: string; data: { label: string; count: number }[]; wide?: boolean }) {
+  const max = Math.max(1, ...data.map(d => d.count));
+  return (
+    <div className={`${styles.card} ${wide ? styles.cardWide : ''}`}>
+      <h3 className={styles.cardTitle}>{title}</h3>
+      <ul className={styles.bars}>
+        {data.map((d, i) => (
+          <li key={`${d.label}-${i}`} className={styles.bar}>
+            <span className={styles.barLabel} title={d.label}>{d.label}</span>
+            <span className={styles.barTrack}>
+              <span className={styles.barFill} style={{ width: `${(d.count / max) * 100}%` }} />
+            </span>
+            <span className={styles.barValue}>{d.count}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function shortGroup(g: string): string {
+  return g.replace(/^L3\s+/, '').replace(/\s+Marketing Web Presence$/i, '');
+}

client/src/services/admin.service.ts

@@ -0,0 +1,25 @@
+import { apiGet, apiPost, apiFetch } from './api.service';
+import type { Role } from './auth.service';
+
+export interface AppUser { id: number; username: string; role: Role; createdAt: string | null; lastLoginAt: string | null; }
+export interface TokenInfo { id: number; tokenId: string; label: string; createdAt: string | null; lastUsedAt: string | null; expiresAt: string | null; revoked: boolean; }
+
+export async function listUsers(): Promise<AppUser[]> {
+  return (await apiGet<{ users: AppUser[] }>('/api/users')).users;
+}
+export function createUser(username: string, password: string, role: Role): Promise<{ user?: AppUser; error?: string; message?: string }> {
+  return apiPost('/api/users', { username, password, role }, { allowAuthErrorBody: true });
+}
+export function deleteUser(username: string): Promise<{ success: boolean }> {
+  return apiFetch(`/api/users/${encodeURIComponent(username)}`, { method: 'DELETE' });
+}
+
+export async function listTokens(): Promise<TokenInfo[]> {
+  return (await apiGet<{ tokens: TokenInfo[] }>('/api/tokens')).tokens;
+}
+export function createToken(label: string): Promise<{ token: string; label: string }> {
+  return apiPost('/api/tokens', { label });
+}
+export function revokeToken(id: number): Promise<{ success: boolean }> {
+  return apiPost(`/api/tokens/${id}/revoke`, {});
+}

client/src/services/analytics.service.ts

@@ -0,0 +1,22 @@
+import { apiGet } from './api.service';
+import type { OverviewResponse, SlaMetric, ForgeConfig, InsightsResponse, JiraDurationsResponse } from '../types/analytics.types';
+
+export function getInsights(): Promise<InsightsResponse> {
+  return apiGet<InsightsResponse>('/api/insights');
+}
+
+export function getJiraDurations(): Promise<JiraDurationsResponse> {
+  return apiGet<JiraDurationsResponse>('/api/analytics/jira-durations');
+}
+
+export function getOverview(): Promise<OverviewResponse> {
+  return apiGet<OverviewResponse>('/api/analytics/overview');
+}
+
+export function getSla(): Promise<{ metrics: SlaMetric[] }> {
+  return apiGet<{ metrics: SlaMetric[] }>('/api/analytics/sla');
+}
+
+export function getConfig(): Promise<ForgeConfig> {
+  return apiGet<ForgeConfig>('/api/config');
+}

client/src/services/api.service.ts

@@ -0,0 +1,42 @@
+// Fired when any API call returns 401 (session expired/absent). App registers it
+// to drop to the login screen.
+let onUnauthorized: (() => void) | null = null;
+export function setUnauthorizedHandler(fn: (() => void) | null): void {
+  onUnauthorized = fn;
+}
+
+interface ApiOptions extends RequestInit {
+  // When true, a 401 body is returned to the caller instead of throwing +
+  // firing the logout hook. Used by /login to surface { success, error }.
+  allowAuthErrorBody?: boolean;
+}
+
+export async function apiFetch<T>(url: string, options?: ApiOptions): Promise<T> {
+  const { allowAuthErrorBody, ...init } = options ?? {};
+  const res = await fetch(url, init);
+  if (!res.ok) {
+    if (res.status === 401) {
+      if (!allowAuthErrorBody) { onUnauthorized?.(); throw new Error('unauthenticated'); }
+      // else fall through and return the { success, error } body
+    } else if (res.status === 400 || res.status === 409) {
+      // Validation / conflict responses carry a { error, message } body the caller reads.
+    } else {
+      const text = await res.text().catch(() => res.statusText);
+      throw new Error(text || `HTTP ${res.status}`);
+    }
+  }
+  return res.json() as Promise<T>;
+}
+
+export function apiGet<T>(url: string): Promise<T> {
+  return apiFetch<T>(url);
+}
+
+export function apiPost<T>(url: string, body: unknown, options?: ApiOptions): Promise<T> {
+  return apiFetch<T>(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+    ...options,
+  });
+}