bytelyst/learning_ai_common_plat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bytelyst:main
Branches Tags
bytelyst:main
bytelyst:backup-main-20260530
bytelyst:v0.1.10-errors
bytelyst:v0.1.9-errors
bytelyst:v0.1.8-errors
..
compare: bytelyst:backup-main-20260530
Branches Tags
bytelyst:main
bytelyst:backup-main-20260530
bytelyst:v0.1.10-errors
bytelyst:v0.1.9-errors
bytelyst:v0.1.8-errors

No commits in common. "main" and "backup-main-20260530" have entirely different histories.
main ... backup-mai

447 changed files with 2579 additions and 39752 deletions
Show Stats Expand all files Collapse all files

7
.env.example
View File

@ -79,13 +79,6 @@ FIELD_ENCRYPT_KEY=
# Product-specific MEK name in AKV — only for 'akv' provider
FIELD_ENCRYPT_MEK_NAME=lysnr-mek
# ── Gitea NPM Registry (private @bytelyst packages) ─────────
# Token for authenticating with the Gitea npm registry.
# Generate at: http://<GITEA_NPM_HOST>:3300/user/settings/applications
GITEA_NPM_TOKEN=
GITEA_NPM_HOST=localhost
GITEA_NPM_OWNER=learning_ai_user
# ── Product Identity ──────────────────────────────────────────
DEFAULT_PRODUCT_ID=lysnrai

2
.gitea/workflows/dry-run-publish-all-packages.yml
View File

@ -48,7 +48,7 @@ jobs:
run: |
cp /run/secrets/gitea_publish_npmrc /tmp/publish.npmrc
chmod 600 /tmp/publish.npmrc
npm whoami --userconfig /tmp/publish.npmrc --registry https://gitea.bytelyst.com/api/packages/learning_ai_user/npm/
npm whoami --userconfig /tmp/publish.npmrc --registry https://gitea.bytelyst.com/api/packages/bytelyst/npm/
- name: Install workspace deps
run: HUSKY=0 pnpm install --frozen-lockfile

2
.gitea/workflows/publish-all-packages.yml
View File

@ -48,7 +48,7 @@ jobs:
run: |
cp /run/secrets/gitea_publish_npmrc /tmp/publish.npmrc
chmod 600 /tmp/publish.npmrc
npm whoami --userconfig /tmp/publish.npmrc --registry https://gitea.bytelyst.com/api/packages/learning_ai_user/npm/
npm whoami --userconfig /tmp/publish.npmrc --registry https://gitea.bytelyst.com/api/packages/bytelyst/npm/
- name: Install workspace deps
run: HUSKY=0 pnpm install --frozen-lockfile

2
.gitea/workflows/publish-packages.yml
View File

@ -55,7 +55,7 @@ jobs:
chmod 600 /tmp/publish.npmrc
echo "Configured registry:"
sed -E 's#(_auth(Token)?=).*#\1***#; s#(//[^[:space:]]+:)_authToken=.*#\1_authToken=***#' /tmp/publish.npmrc
npm whoami --userconfig /tmp/publish.npmrc --registry https://gitea.bytelyst.com/api/packages/learning_ai_user/npm/
npm whoami --userconfig /tmp/publish.npmrc --registry https://gitea.bytelyst.com/api/packages/bytelyst/npm/
- name: Install workspace deps
run: HUSKY=0 pnpm install --frozen-lockfile

77
.gitea/workflows/size-limit.yml
View File

@ -1,77 +0,0 @@
name: Size limit
# ROADMAP TODO #6 — enforces bundle-size budgets defined in
# .size-limit.cjs on every push to main and every PR. Failures block
# merge so that bundle bloat is a visible, deliberate decision.
on:
push:
branches: [main]
paths:
- 'packages/**'
- 'pnpm-lock.yaml'
- 'pnpm-workspace.yaml'
- 'package.json'
- '.size-limit.cjs'
- '.gitea/workflows/size-limit.yml'
pull_request:
branches: [main]
paths:
- 'packages/**'
- 'pnpm-lock.yaml'
- 'pnpm-workspace.yaml'
- 'package.json'
- '.size-limit.cjs'
concurrency:
group: size-limit-${{ github.ref }}
cancel-in-progress: true
jobs:
size:
name: size-limit
runs-on: [ubuntu-latest, bytelyst, hostinger]
container:
image: node:20-bookworm
timeout-minutes: 10
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
github-server-url: https://gitea.bytelyst.com
- name: Install pinned pnpm
run: |
npm install -g pnpm@10.6.5
pnpm --version
- name: Install dependencies
run: HUSKY=0 pnpm install --frozen-lockfile
- name: Build measured packages
# size-limit measures dist/ — ensure every entry in
# .size-limit.cjs has a fresh build before running.
run: |
pnpm --filter @bytelyst/api-client \
--filter @bytelyst/auth-client \
--filter @bytelyst/celebrations \
--filter @bytelyst/quick-actions \
--filter @bytelyst/react-auth \
--filter @bytelyst/dashboard-shell \
--filter @bytelyst/ai-ui \
--filter @bytelyst/command-palette \
run build
- name: Enforce size budgets
run: pnpm size
- name: Upload size report
if: always()
uses: actions/upload-artifact@v4
with:
name: size-limit-${{ github.run_id }}
path: |
.size-limit/
retention-days: 14
continue-on-error: true

10
.husky/pre-commit
View File

@ -23,13 +23,3 @@ echo "🐶 Running pre-commit hooks for common platform..."
# Run lint-staged on staged files
pnpm exec lint-staged
# CC.8 — Re-run the roadmap progress counter whenever the roadmap is staged.
# Updates the §11.2 progress block + per-wave headings + re-stages the file
# so the commit captures the refreshed counts. Silent no-op when the file
# wasn't touched.
if git diff --cached --name-only | grep -q "^docs/UI_ROADMAP_2026_V3_CROSS_REPO\.md$"; then
echo "📊 Refreshing roadmap progress counter..."
pnpm dlx tsx scripts/count-roadmap-progress.ts docs/UI_ROADMAP_2026_V3_CROSS_REPO.md \
&& git add docs/UI_ROADMAP_2026_V3_CROSS_REPO.md
fi

103
.size-limit.cjs
View File

@ -1,103 +0,0 @@
/**
* ROADMAP TODO #6 — Bundle-size budgets for @bytelyst/* packages.
*
* Each entry measures the gzipped size of a package's built `dist/`
* output. The 'limit' field is the budget — PRs that exceed it fail CI.
*
* Initial budgets per learning_ai_uxui_web/docs/ROADMAP_2026.md §5
* "Performance budgets":
* - Pure-TS clients → 8 KB
* - Feature packs → 6 KB
* - UI primitive slices → ~1 KB per primitive (whole pkg < 30 KB)
* - Tokens / design-tokens → 12 KB (CSS heavy)
*
* Pilot scope (this commit): wire up 6 representative packages. Rollout
* to the rest of @bytelyst/* lands incrementally as packages stabilise.
*
* Run locally:
* pnpm -w size — full check
* pnpm -w size --why <name> — explain what's contributing
*
* To add a package:
* 1. Confirm the package has 'build' in its scripts and emits to dist/
* 2. Add an entry below with name, path, and limit
* 3. Run `pnpm -w size --update` to record the current baseline if
* you're starting under-budget (optional)
*/
module.exports = [
// ── Pure-TS clients (8 KB) ──────────────────────────────────────
{
name: '@bytelyst/api-client',
path: 'packages/api-client/dist/index.js',
limit: '8 KB',
gzip: true,
},
{
name: '@bytelyst/auth-client',
path: 'packages/auth-client/dist/index.js',
limit: '8 KB',
gzip: true,
},
// ── Feature packs (6 KB) ────────────────────────────────────────
{
name: '@bytelyst/celebrations',
path: 'packages/celebrations/dist/index.js',
limit: '6 KB',
gzip: true,
},
{
name: '@bytelyst/quick-actions',
path: 'packages/quick-actions/dist/index.js',
limit: '6 KB',
gzip: true,
},
// ── React bindings (10 KB — slightly higher for hooks + context) ─
{
name: '@bytelyst/react-auth',
path: 'packages/react-auth/dist/index.js',
limit: '10 KB',
gzip: true,
},
// ── Shells / composite UI (30 KB) ───────────────────────────────
{
name: '@bytelyst/dashboard-shell',
path: 'packages/dashboard-shell/dist/index.js',
limit: '30 KB',
gzip: true,
},
// ── AI-native UI (35 KB — streaming + parsing is heavy) ─────────
{
name: '@bytelyst/ai-ui',
path: 'packages/ai-ui/dist/index.js',
limit: '35 KB',
gzip: true,
},
// ── Command palette (15 KB — fuzzy + dialog + registry) ─────────
{
name: '@bytelyst/command-palette',
path: 'packages/command-palette/dist/index.js',
limit: '15 KB',
gzip: true,
},
// ── Motion primitives (8 KB — 5 components, zero deps) ──────────
{
name: '@bytelyst/motion',
path: 'packages/motion/dist/index.js',
limit: '8 KB',
gzip: true,
},
// ── Data-viz primitives (10 KB — 5 SVG components) ──────────────
{
name: '@bytelyst/data-viz',
path: 'packages/data-viz/dist/index.js',
limit: '10 KB',
gzip: true,
},
// ── Notifications UI (10 KB — center + banner + announcement) ───
{
name: '@bytelyst/notifications-ui',
path: 'packages/notifications-ui/dist/index.js',
limit: '10 KB',
gzip: true,
},
];

6
AGENTS.md
View File

@ -1,7 +1,6 @@
# AGENTS.md — AI Coding Agent Instructions
<!-- BEGIN: canonical-behavior-pointer (auto-managed) -->
> **Read first (ecosystem-wide agent behavior):**
> [`AI.dev/SKILLS/agent-behavior-guidelines.md`](AI.dev/SKILLS/agent-behavior-guidelines.md)
>
@ -11,7 +10,6 @@
> Cosmos doc, conventional commits, style preservation).
>
> The per-repo content below extends — never duplicates — the canonical rules.
<!-- END: canonical-behavior-pointer -->
> **For:** Claude Code, OpenAI Codex, Cursor, GitHub Copilot, Windsurf Cascade, and any AI coding agent.
@ -160,7 +158,7 @@ learning_ai_common_plat/
- **Template:** `scripts/npmrc.template` in this repo (learning_ai_common_plat)
- **Sync:** `bash scripts/sync-npmrc.sh` — copies template to all 13 product repos
- **Audit:** `bash scripts/check-npmrc-drift.sh` — detects drift (CI-ready, exits 1 on mismatch)
- **Key config:** `@bytelyst:registry` uses `${GITEA_NPM_HOST:-localhost}` — never hardcode `gitea.bytelyst.com` (unreachable on corp network)
- **Key config:** `@bytelyst:registry` uses `${GITEA_NPM_HOST:-localhost}:3300` SSH tunnel — never hardcode `gitea.bytelyst.com` (unreachable on corp network)
- **If adding a new repo:** add it to the `REPOS` array in both `sync-npmrc.sh` and `check-npmrc-drift.sh`, then run sync
### MUST NOT do
@ -168,7 +166,7 @@ learning_ai_common_plat/
- Never use `console.log` in production code — use `req.log` or `app.log` in Fastify
- Never use `any` type — use Zod inference or explicit types
- Never hardcode secrets or API keys
- Never hardcode `gitea.bytelyst.com` in `.npmrc` — use `${GITEA_NPM_HOST:-localhost}` via the canonical template
- Never hardcode `gitea.bytelyst.com` in `.npmrc` — use `${GITEA_NPM_HOST:-localhost}:3300` via the canonical template
- Secret guardrails: Husky runs `scripts/secret-scan-staged.sh` (pre-commit) and `scripts/secret-scan-repo.sh` (pre-push). See `docs/WINDSURF/CODEX_SESSION_SUMMARY_AND_PLAYBOOK.md`.
- Never commit real emulator keys or blob account keys in tracked files; keep placeholders in `.env.example`
- Never modify tests to make them pass — fix the actual code

98
AI.dev/CHEATSHEETS/README.md
View File

@ -1,98 +0,0 @@
# AI Coding CLI Cheat Sheets
> **Location:** `AI.dev/CHEATSHEETS/`
> **Audience:** Every developer in the ByteLyst ecosystem who delegates work to a
> terminal-based AI coding agent.
> **Companion docs:** [`../SKILLS/`](../SKILLS/) (how-to skills), [`../PROMPTS/`](../PROMPTS/)
> (reusable copy-paste prompts), and the canonical
> [`../SKILLS/agent-behavior-guidelines.md`](../SKILLS/agent-behavior-guidelines.md)
> (the rules every agent must follow, regardless of which CLI runs it).
---
## What's here
Quick, dense reference cards for the three terminal AI agents we use to delegate
coding work. Each sheet is **task-oriented** — commands, modes, session management,
config, and the ByteLyst-specific guardrails — not a marketing overview.
| CLI | Cheat sheet | Best for |
| ------------------ | -------------------------------------------- | ------------------------------------------------------------------------------- |
| 🤖 **Devin** | [`devin-cli.md`](./devin-cli.md) | Long-running autonomous sessions; delegate a scoped roadmap and walk away |
| 🟣 **Claude Code** | [`claude-code-cli.md`](./claude-code-cli.md) | Interactive pair-programming in the terminal; deep multi-file edits with review |
| 🟢 **Codex CLI** | [`codex-cli.md`](./codex-cli.md) | Fast local edits + scriptable `exec` runs in CI / one-shot automation |
---
## The 30-second mental model
| | Devin | Claude Code | Codex CLI |
| ----------------------- | ----------------------------- | -------------------------------- | --------------------------------------------------------------- |
| **Interaction** | Mostly fire-and-forget | Interactive REPL | Interactive **or** `exec` one-shot |
| **Strength** | Autonomy over many steps | Reasoning + careful edits | Speed + scripting |
| **Auto-approve flag** | `--permission-mode dangerous` | `--dangerously-skip-permissions` | `--dangerously-bypass-approvals-and-sandbox` (or `--full-auto`) |
| **Isolation** | `--sandbox` | OS sandbox / devcontainer | `--sandbox <mode>` (built-in) |
| **Per-repo rules file** | `AGENTS.md` | `AGENTS.md` (+ `CLAUDE.md`) | `AGENTS.md` |
| **Resume a session** | `devin -r [id]` | `claude --resume` / `-c` | `codex resume` |
> ⚠️ Exact flags drift between releases. **Always confirm with `<cli> --help`.** The
> durable value of these sheets is the ByteLyst workflow, not the flag spelling.
---
## Which CLI should I use?
- **Delegating a scoped, multi-step job and want to walk away?** → **Devin**. Point it at
a self-contained roadmap (see [`../PROMPTS/`](../PROMPTS/)) and let it run.
- **Working through a hard problem and want to review each move?** → **Claude Code** in
**plan mode** — it proposes, you approve, it executes.
- **Need a one-shot, scriptable run inside CI / Gitea Actions?** → **Codex CLI**
`codex exec` — non-interactive, exits with a status you can gate on.
- **Just making fast local edits?** → whichever you have open; **Codex** or **Claude Code**
interactive are both quick.
| Official docs | |
| ------------- | ----------------------------------------------------------------------------- |
| Devin | <https://docs.devin.ai> |
| Claude Code | <https://docs.anthropic.com/en/docs/claude-code> |
| Codex CLI | <https://developers.openai.com/codex/cli> · <https://github.com/openai/codex> |
---
## Rules that apply no matter which CLI you run
These come from [`../SKILLS/agent-behavior-guidelines.md`](../SKILLS/agent-behavior-guidelines.md)
and the per-repo `AGENTS.md`. Put them in the agent's opening prompt every time:
1. **Tests are sacred** — never delete/weaken a test to go green; fix the code.
2. **Verify before "done"** — only claim success after the real gate
(`typecheck` + `test` + `build`) passes. No fabricated results.
3. **Scope lock** — never hand-edit shared infra (`.npmrc`, `docker-prep.sh`),
and don't touch repos outside the task.
4. **No `console.log` / `print`** in product code.
5. **`productId` on every Cosmos document.**
6. **Conventional commits** — `type(scope): description`.
7. **Style preservation** — match the file's existing style; don't add emojis to code.
## ByteLyst environment facts every agent needs
- **Package manager:** `pnpm` workspace. Shared packages link via `workspace:*` /
`"*"` — no registry needed for local builds.
- **Next.js apps build with `next build --webpack`** (not plain/Turbopack).
- **Corporate network:** commands run behind a TLS-intercepting proxy
(`NETWORK=corp`). The Gitea npm registry is reached over an SSH tunnel at
`localhost:3300`. Gradle needs the custom truststore (`$GRADLE_OPTS`).
- **Monorepo root:** `learning_ai_common_plat` holds `packages/*`, `services/*`,
and `dashboards/*`. Product repos are siblings under the same parent.
---
## Adding / updating a cheat sheet
1. Edit or create `AI.dev/CHEATSHEETS/<cli>-cli.md`.
2. Keep the section order consistent across sheets (Install → Auth → Core commands
→ Modes → Sessions → Config → ByteLyst workflow → Troubleshooting → Quick card).
3. Add it to the table above.
4. Commit: `docs(cheatsheets): update <cli> CLI cheat sheet`.
_Last updated: 2026-05-28_

127
AI.dev/CHEATSHEETS/claude-code-cli.md
View File

@ -1,127 +0,0 @@
# 🟣 Claude Code CLI — Cheat Sheet
> **What it is:** Anthropic's **Claude Code** — an agentic coding tool that runs in your
> terminal, reads/edits files, runs commands, and pair-programs interactively.
> **Best for:** Deep, multi-file changes where you want to stay in the loop — reasoning
> through a refactor, debugging across modules, or building a feature with review at each step.
> **Per-repo rules:** reads `AGENTS.md` (canonical) and, if present, `CLAUDE.md`.
> ⚠️ **Flags/commands drift between versions.** Confirm with `claude --help` and
> `/help` inside a session.
>
> **Official docs:** <https://docs.anthropic.com/en/docs/claude-code>
---
## Install & auth
```bash
npm install -g @anthropic-ai/claude-code # or the documented installer
claude --version
claude # first run walks you through login
```
- Auth via Anthropic account (Pro/Max) or an `ANTHROPIC_API_KEY`.
- Config & history live under `~/.claude/`.
## Launching
```bash
claude # interactive REPL in the current dir
claude "explain src/server.ts and propose a refactor" # seed a first prompt
claude -p "list the failing tests" # print mode: one-shot, non-interactive
cat error.log | claude -p "what's the root cause?" # pipe context in
```
## Session management
```bash
claude -c # continue the most recent conversation
claude --resume # pick a past session to resume
claude --resume <id> "<prompt>" # resume a specific session with a new instruction
```
Inside a session, history is preserved; use `/clear` to reset context when switching tasks.
## Permission modes
| How | Effect |
| -------------------------------- | ------------------------------------------------------- |
| _(default)_ | Prompts before edits / commands |
| `--permission-mode acceptEdits` | Auto-accepts file edits, still gates commands |
| `--permission-mode plan` | **Plan mode** — proposes a plan, makes no changes |
| `--dangerously-skip-permissions` | Auto-approves **everything** (use only in a sandbox/VM) |
```bash
claude --permission-mode plan # safe: get a plan first, no edits
claude --dangerously-skip-permissions # full auto — only in throwaway/sandboxed env
```
> 🧠 Prefer **plan mode** for anything non-trivial: review the plan, then let it execute.
> Reserve `--dangerously-skip-permissions` for isolated environments (devcontainer/VM).
## Useful in-session slash commands
| Command | Purpose |
| --------------- | ------------------------------------------- |
| `/help` | List commands |
| `/clear` | Reset conversation context |
| `/init` | Generate/refresh a `CLAUDE.md` for the repo |
| `/review` | Review recent changes |
| `/model` | Switch model |
| `/agents` | Manage subagents |
| `/mcp` | Inspect/connect MCP servers |
| `#` (prefix) | Add a durable memory to `CLAUDE.md` |
| `@path/to/file` | Pull a file into context |
## Config files & memory
- **`AGENTS.md`** (repo root) — canonical agent rules; Claude reads it.
- **`CLAUDE.md`** — optional Claude-specific memory; `/init` scaffolds it, `#` appends to it.
- **`.claude/settings.json`** (repo or `~/.claude/`) — permissions, hooks, tools, MCP.
- **MCP servers** — connect tools/data via `claude mcp add ...` or `.mcp.json`.
## ByteLyst workflow
Open every delegation with the shared guardrails — Claude honors `AGENTS.md`, but
re-stating scope keeps it tight:
```text
Follow AGENTS.md + AI.dev/SKILLS/agent-behavior-guidelines.md.
Scope: <paths>. Tests are sacred; fix code, not tests.
Verify: pnpm --filter <pkg> typecheck && ... test && ... build (next build --webpack).
pnpm workspace; @bytelyst/* link via workspace:*. Conventional commits, one per logical change.
Use plan mode first for multi-file work; show the plan before editing.
```
- Use `/review` before committing a cluster of edits.
- For repo onboarding context, run `/init` once and commit the resulting `CLAUDE.md`
(keep it thin — it should point at `AGENTS.md`, not duplicate it).
## Troubleshooting
| Symptom | Fix |
| ---------------------------- | ------------------------------------------------------------------------------------- |
| Edits applied without asking | You're in `acceptEdits`/`--dangerously-skip-permissions`; switch to default or `plan` |
| Context bloated / confused | `/clear` and re-seed with `@` file references |
| Can't reach Gitea/registry | Corp proxy must be active (`NETWORK=corp`); workspace deps avoid the registry |
| Build fails on Turbopack | Use `next build --webpack` |
| Wants a tool it can't access | Wire it via MCP (`/mcp`, `claude mcp add`) |
## Quick-reference card
```text
claude # interactive
claude -p "..." # one-shot print mode
claude -c # continue last session
claude --resume # pick a session
claude --permission-mode plan # plan first, no edits
/init /clear /review /model /mcp #memory @file
```
---
**Related:** [`devin-cli.md`](./devin-cli.md) · [`codex-cli.md`](./codex-cli.md) ·
[`../PROMPTS/`](../PROMPTS/) · [`../SKILLS/agent-behavior-guidelines.md`](../SKILLS/agent-behavior-guidelines.md)
_Last updated: 2026-05-28 · verify flags against your installed version (`claude --help`)._

128
AI.dev/CHEATSHEETS/codex-cli.md
View File

@ -1,128 +0,0 @@
# 🟢 Codex CLI — Cheat Sheet
> **What it is:** OpenAI's **Codex CLI** — an open-source terminal coding agent that
> edits files and runs commands inside a built-in sandbox, interactively or as a
> scriptable one-shot (`codex exec`).
> **Best for:** Fast local edits, and **automation** — `codex exec` slots cleanly into
> CI / Gitea Actions and one-shot scripts.
> **Per-repo rules:** reads `AGENTS.md` (merged with `~/.codex/AGENTS.md` and any
> project-local `AGENTS.md`).
> **In this repo:** delegation examples live under
> [`docs/ecosystem/delegation/codex/`](../../docs/ecosystem/delegation/codex/) and
> [`docs/CODEX_RESUME_PROMPT.md`](../../docs/CODEX_RESUME_PROMPT.md).
> ⚠️ **Flags/modes drift between versions.** Confirm with `codex --help`.
>
> **Official docs:** <https://developers.openai.com/codex/cli> · source: <https://github.com/openai/codex>
---
## Install & auth
```bash
npm install -g @openai/codex # or: brew install codex
codex --version
codex login # ChatGPT sign-in, or set OPENAI_API_KEY
```
- Config & state live under `~/.codex/` (notably `~/.codex/config.toml`).
## Launching
```bash
codex # interactive TUI in the current dir
codex "add a vitest for src/lib/utils.ts" # seed the first instruction
codex exec "run the test suite and fix failures" # non-interactive one-shot (scripts/CI)
codex resume # resume a previous session
```
## Approval + sandbox modes
Codex couples **what it can touch** (sandbox) with **when it asks** (approvals).
| Flag | Meaning |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------ |
| `--sandbox read-only` | Can read; no writes, no commands |
| `--sandbox workspace-write` | Can edit the working dir + run commands in it (default-ish) |
| `--sandbox danger-full-access` | No sandbox restrictions |
| `--ask-for-approval untrusted` \| `on-failure` \| `on-request` \| `never` | When to prompt you |
| `--full-auto` | Convenience: low-friction auto (workspace-write + minimal prompts) |
| `--dangerously-bypass-approvals-and-sandbox` | **No approvals, no sandbox** (CI/throwaway only) |
```bash
codex --full-auto # everyday autonomy, still sandboxed
codex --sandbox workspace-write --ask-for-approval on-failure
codex exec --dangerously-bypass-approvals-and-sandbox "..." # CI only, isolated runner
```
> 🧠 The sandbox is **built in** (unlike Devin's optional `--sandbox`). For ByteLyst,
> `workspace-write` is fine for single-package work, but cross-package `workspace:*`
> builds and the corp proxy / Gitea tunnel may need broader access — prefer running from
> the monorepo root and, if installs fail, loosen the sandbox rather than fighting it.
## Config (`~/.codex/config.toml`)
```toml
model = "..." # default model
approval_policy = "on-failure"
sandbox_mode = "workspace-write"
# [mcp_servers.*] # wire external tools via MCP
```
Project-level `AGENTS.md` is layered on top of `~/.codex/AGENTS.md`.
## `codex exec` for automation (the high-value mode)
```bash
# One-shot, non-interactive — perfect for Gitea Actions / scripts:
codex exec "typecheck the repo and fix any TS errors" \
--sandbox workspace-write --ask-for-approval never
```
- Deterministic, no TUI; exits with a status you can gate CI on.
- Pair with a tight prompt + explicit verify commands (see below).
## ByteLyst workflow
Lead with the shared guardrails (Codex reads `AGENTS.md`, but restate scope):
```text
Follow AGENTS.md + AI.dev/SKILLS/agent-behavior-guidelines.md.
Scope: <paths> only. Tests are sacred. No console.log. productId on Cosmos docs.
Verify: pnpm --filter <pkg> typecheck && ... test && ... build (next build --webpack).
pnpm workspace; @bytelyst/* via workspace:*. Conventional commits, one per change.
Only mark done after verify passes; never fabricate results.
```
- Start in `read-only` for a plan, then switch to `workspace-write` to execute.
- Reserve `--dangerously-bypass-approvals-and-sandbox` for the isolated CI runner.
## Troubleshooting
| Symptom | Fix |
| ------------------------------------- | ------------------------------------------------------------------------------- |
| "permission denied" writing files | Sandbox is `read-only`; use `--sandbox workspace-write` |
| Can't build `@bytelyst/*` deps | Sandbox can't see sibling `packages/*` — run from monorepo root, loosen sandbox |
| Network/registry errors | Corp proxy must be active; workspace deps avoid the registry |
| `next build` fails (Turbopack) | Use `next build --webpack` |
| Non-interactive run hangs on a prompt | Add `--ask-for-approval never` to `codex exec` |
## Quick-reference card
```text
codex # interactive
codex "..." # seed an instruction
codex exec "..." # one-shot (CI/scripts)
codex resume # resume session
--sandbox read-only|workspace-write|danger-full-access
--ask-for-approval untrusted|on-failure|on-request|never
--full-auto # convenient autonomy (still sandboxed)
~/.codex/config.toml # defaults: model, approval_policy, sandbox_mode
```
---
**Related:** [`devin-cli.md`](./devin-cli.md) · [`claude-code-cli.md`](./claude-code-cli.md) ·
[`../PROMPTS/`](../PROMPTS/) · [`../SKILLS/agent-behavior-guidelines.md`](../SKILLS/agent-behavior-guidelines.md)
_Last updated: 2026-05-28 · verify flags against your installed version (`codex --help`)._

126
AI.dev/CHEATSHEETS/devin-cli.md
View File

@ -1,126 +0,0 @@
# 🤖 Devin CLI — Cheat Sheet
> **What it is:** Cognition's **Devin** as a terminal agent. You hand it a scoped task
> (ideally a self-contained roadmap), and it plans → edits → runs → verifies across many
> steps with minimal babysitting.
> **Best for:** Long-running, well-scoped delegations where you want to walk away — e.g.
> "validate and harden `tracker-web`'s test suite," or "execute this 5-task roadmap."
> **In this repo:** session config lives in `.devin/config.local.json` (**secret — never
> commit or print it**). A worked example is
> [`dashboards/tracker-web/docs/roadmaps/DEVIN_CLI_EXPERIMENT.md`](../../dashboards/tracker-web/docs/roadmaps/DEVIN_CLI_EXPERIMENT.md).
> ⚠️ **Flags drift between versions.** Run `devin --help` to confirm. This sheet captures
> the workflow + ByteLyst conventions, which are stable.
>
> **Official docs:** <https://docs.devin.ai>
---
## Install & auth
```bash
# Install per the official docs (https://docs.devin.ai), then verify + authenticate.
# (Confirm the exact subcommands for your version with `devin --help`.)
devin --help # list available commands/flags
devin login # authenticate (or provide the API key Devin expects)
```
- Auth/state for this workspace is cached in `.devin/config.local.json` (mode `600`).
- That file may contain an **API token** → it is git-ignored; keep it that way.
## Launching a session
```bash
devin # interactive TUI in the current dir
devin "validate the tracker-web tests" # seed the first instruction inline
```
A Devin session shows a live **todo list** and streams its tool calls (reads, edits,
shell commands). You can interrupt at any time (Ctrl-C / Esc) — that shows up in the
log as `Canceled due to user interrupt` (this is **you**, not a permission block).
## Permission & sandbox modes
| Flag | Effect |
| ----------------------------- | ------------------------------------------------------------- |
| _(default)_ | Asks before potentially destructive commands |
| `--permission-mode dangerous` | **Auto-approves** commands without prompting |
| `--sandbox` | Runs in an **isolated environment** (restricted fs / network) |
```bash
# Full autonomy, isolated:
devin --permission-mode dangerous --sandbox
# Full autonomy, direct access to the real pnpm workspace + corp proxy:
devin --permission-mode dangerous
```
> 🧠 **Gotcha (learned the hard way):** `--sandbox` can wall off the filesystem and
> network even when command _approval_ is automatic. ByteLyst work needs to (a) read
> sibling `packages/*` for `workspace:*` builds and (b) reach the corp proxy / Gitea
> tunnel for `pnpm`. If a sandboxed run stalls on install/build, **drop `--sandbox`**.
> `dangerous` mode never blocks; a stall is almost always sandbox scope.
## Session management
```bash
devin -r # list recent sessions
devin -r <id> # resume a specific session (e.g. `devin -r adaptable-comma`)
/exit # leave the interactive session
```
Sessions are named (e.g. `adaptable-comma`); the CLI prints the resume command when you
exit. Resuming keeps the prior context + todo state.
## How to delegate well (the ByteLyst pattern)
Devin shines with a **self-contained roadmap file**. Don't free-form a vague goal —
point it at a doc that encodes scope, verify commands, and a done-definition. See
[`AI.dev/PROMPTS/`](../PROMPTS/) for reusable templates and the tracker-web experiment
doc for the gold-standard shape:
1. **Scope lock** — name the exact folder; forbid edits elsewhere (incl. shared packages).
2. **Verify commands** — give the literal `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
3. **Commit discipline** — one task = one conventional commit; flip the checkbox + paste
the short-SHA in the same commit.
4. **No fabrication** — only check a box after its Verify passes; otherwise leave `- [ ]`
with a one-line blocker.
5. **Done-definition** — full suite green from a clean state + a summary of SHAs.
Paste this preamble into the first instruction every time:
```text
Read AGENTS.md and AI.dev/SKILLS/agent-behavior-guidelines.md first.
Scope: ONLY <path>. Don't edit shared packages/.npmrc/docker-prep.sh.
Tests are sacred. Verify with: <exact commands>. Conventional commits.
Builds use `next build --webpack`. pnpm workspace; workspace:* deps link locally.
Only mark a task done after its verify passes — never fabricate. Commit + push per task.
```
## Troubleshooting
| Symptom | Likely cause | Fix |
| ----------------------------------------------- | ---------------------------------------------------- | ------------------------------------------ |
| `Canceled due to user interrupt` | You pressed Ctrl-C/Esc or `/exit` | Resume: `devin -r <id>` |
| Stalls on `pnpm install` / build in `--sandbox` | Sandbox blocks fs/network | Re-run **without** `--sandbox` |
| Can't find `@bytelyst/*` packages | Sandbox can't see sibling `packages/*` | Run from the monorepo; drop `--sandbox` |
| `pnpm` network errors | Corp proxy / Gitea tunnel not reachable from sandbox | Run on host (proxy active) without sandbox |
| Asks for approval despite `dangerous` | Flag typo / older binary | `devin --help`; update the CLI |
## Quick-reference card
```text
devin # start interactive session here
devin --permission-mode dangerous # auto-approve commands (recommended for delegations)
add --sandbox # ...but only if the task needs no workspace/network
devin -r # list sessions
devin -r <name> # resume a session
/exit # end session (prints resume command)
```
---
**Related:** [`claude-code-cli.md`](./claude-code-cli.md) · [`codex-cli.md`](./codex-cli.md) ·
[`../PROMPTS/`](../PROMPTS/) · [`../SKILLS/agent-behavior-guidelines.md`](../SKILLS/agent-behavior-guidelines.md)
_Last updated: 2026-05-28 · verify flags against your installed version (`devin --help`)._

69
AI.dev/SKILLS/docker-doctor.md
View File

@ -1,69 +0,0 @@
# docker-doctor — Static linter for Docker build hygiene
Sibling to `gitea-doctor` (`scripts/gitea/doctor.sh`). Detects Dockerfile, compose, and
`.npmrc.docker` drift from the invariants established by
[`docker-build-optimization-roadmap.md`](../../../learning_ai_devops_tools/docs/docker-build-optimization-roadmap.md)
Phase A.
## When to run
- **Before every Docker build** (alongside `gitea-doctor`)
- **In CI** on PRs touching `Dockerfile`, `docker-compose*.yml`, `.dockerignore`, `.npmrc.docker`
- **In pre-commit hook** (warning-only at first, error after stabilization)
## Quick start
```bash
# Canonical (run from common-plat)
bash scripts/docker-doctor.sh --repo /path/to/repo
# Per-repo wrapper (preferred)
bash scripts/docker-doctor.sh
# CI / scripting
bash scripts/docker-doctor.sh --quiet # only print failures
bash scripts/docker-doctor.sh --warn-only # always exit 0
```
## Checks performed
| # | Check | Severity | Roadmap ref |
| --- | --------------------------------------------------------------------------------------------- | -------- | ----------------- |
| 1 | `.npmrc.docker` uses `${GITEA_NPM_HOST}` placeholder | Error | F4 |
| 2 | `.npmrc.docker` uses `${GITEA_NPM_OWNER}` placeholder | Error | F14 |
| 3 | `.npmrc.docker` uses `${GITEA_NPM_TOKEN}` for `_authToken` | Error | F4 |
| 4 | `.gitignore` covers `.docker-deps/*` | Error | B3 |
| 5 | `.gitignore` covers `*.bak` | Warn | B3 |
| 6 | Dockerfile has `# syntax=docker/dockerfile:1.7` directive | Warn | A2 |
| 7 | Dockerfile base image is approved (`node:22-alpine`/`-slim` or `${BASE_IMAGE}`) | Error | canonical |
| 8 | Dockerfile uses corepack (no `npm install -g pnpm`) | Error | A1 |
| 9 | If Dockerfile COPYs `.npmrc.docker`, it declares `ARG GITEA_NPM_OWNER` + `ARG GITEA_NPM_HOST` | Error | F14 |
| 10 | `.docker-deps/` COPY uses wildcard `COPY .docker-deps* ...` | Error | A5-2, B3 |
| 11 | Web Dockerfile uses glob `COPY web/*.{json,ts,...}` (not enumerated configs) | Error | F11, F13 |
| 12 | Compose healthcheck uses `127.0.0.1`, not `localhost` | Error | F12 |
| 13 | Compose healthcheck has `start_period` | Warn | A9-3 |
| 14 | Compose passes `GITEA_NPM_OWNER` build arg | Warn | F14 |
| 15 | `.dockerignore` does NOT exclude `pnpm-lock.yaml` | Warn | F1 (per ADR-0001) |
## Exit codes
- `0` — all checks pass (warnings allowed)
- `1` — one or more error-level checks failed
- `2` — bad invocation / repo not found
## Sibling: gitea-doctor
`docker-doctor` and `gitea-doctor` are intentionally separate:
| Tool | Scope | When to run |
| --------------- | -------------------------------------------- | -------------------------------- |
| `gitea-doctor` | runtime env, token, registry HTTP 200 | Before every build / deploy |
| `docker-doctor` | static analysis of Dockerfile + compose YAML | On every PR touching those files |
Run both via `make doctor` in repos that have it wired up.
## Related
- Roadmap: [`docker-build-optimization-roadmap.md`](../../../learning_ai_devops_tools/docs/docker-build-optimization-roadmap.md) §Phase E
- ADR-0001: [`0001-docker-build-lockfile-policy.md`](../../../learning_ai_devops_tools/docs/adr/0001-docker-build-lockfile-policy.md)
- Sibling script: `learning_ai_common_plat/scripts/gitea/doctor.sh`

12
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/.last-refresh.log
View File

@ -1,9 +1,9 @@
Last refresh: 2026-05-29T17:09:25Z (2026-05-29 10:09:25 PDT)
Cascade conversations: 50 (502M)
Memories: 138
Last refresh: 2026-05-23T06:00:12Z (2026-05-22 23:00:12 PDT)
Cascade conversations: 50 (438M)
Memories: 137
Implicit context: 20
Code tracker dirs: 43
File edit history: 5395 entries
Workspace storage: 52 workspaces
Code tracker dirs: 14
File edit history: 5093 entries
Workspace storage: 49 workspaces
Repo docs: 7 files across 2 repos
Repo workflows: 56 files across 13 repos

3
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/repo_workflows/learning_ai_common_plat/refresh-chat-history.md
View File

@ -21,7 +21,8 @@ Auto-discovers new repos, updates symlinks, and re-copies docs + workflows.
| `learning_ai_notes` | NoteLett | ✅ | — |
| `learning_ai_flowmonk` | FlowMonk | ✅ | — |
| `learning_ai_trails` | ActionTrail | ✅ | — |
| `learning_ai_auth_app` | ByteLyst SmartAuth | ✅ | — |
| `learning_ai_smart_auth` | SmartAuth | ✅ | — |
| `learning_ai_auth_app` | ByteLyst Auth | ✅ | — |
| `learning_ai_productivity_web` | Productivity Tools | ✅ | — |
## Steps

132
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/repo_workflows/learning_ai_common_plat/repo_update-agent-docs.md
View File

@ -1,116 +1,54 @@
---
description: Regenerate AI agent docs across all repos (single source of truth pattern)
description: Regenerate AI agent docs (AGENTS.md, CLAUDE.md, .cursorrules, etc.) across all repos
---
# Update Agent Docs Across Workspace
Maintains AI agent docs across the ByteLyst workspace using a
**single source of truth** pattern with **zero duplication**.
Regenerates all 8 AI agent configuration files across all repos in the workspace.
## Architecture
## Files Generated Per Repo
```
learning_ai_common_plat/AI.dev/SKILLS/
├── agent-behavior-guidelines.md ← SINGLE source of truth for behavior rules
└── agent-onboarding.md ← Read-order index for agents
<each repo>/
├── AGENTS.md ← Repo-specific only. Auto-prepended with
│ "Read first" pointer to canonical file.
├── .github/copilot-instructions.md ← Thin pointer (no rules). Auto-generated.
├── .aider.conf.yml ← Aider config pointing to AGENTS.md. Auto-generated.
└── .editorconfig ← Editor config. Auto-generated.
DELETED across all repos (content was duplicated AGENTS.md):
├── CLAUDE.md
├── .cursorrules
├── .windsurfrules
└── .clinerules
```
| File | Tool |
| --------------------------------- | ----------------------------------------------- |
| `AGENTS.md` | Universal (OpenAI Codex, Claude, Copilot, etc.) |
| `CLAUDE.md` | Claude Code |
| `.cursorrules` | Cursor AI |
| `.github/copilot-instructions.md` | GitHub Copilot |
| `.windsurfrules` | Windsurf / Cascade |
| `.clinerules` | Cline / Roo Code |
| `.aider.conf.yml` | Aider |
| `.editorconfig` | All editors |
## Steps
1. **Edit the canonical sources** when behavior rules change:
1. Run the update script:
```bash
# ecosystem-wide agent behavior (Karpathy + ByteLyst)
open learning_ai_common_plat/AI.dev/SKILLS/agent-behavior-guidelines.md
```bash
cd /Users/sd9235/code/mygh/learning_ai_common_plat
./scripts/update-agent-docs.sh
```
# read-order index
open learning_ai_common_plat/AI.dev/SKILLS/agent-onboarding.md
```
The script reads `learning_ai_common_plat/.windsurf/workflows/repos.txt` as the canonical list of managed workspace repositories.
These are referenced (not copied) by every repo's AGENTS.md, so changes
take effect immediately — no regeneration needed when only behavior rules change.
2. Review changes per repo:
2. **Run the generator** to delete legacy files / refresh pointers / sync configs:
```bash
while IFS= read -r repo; do
[[ -z "$repo" || "$repo" =~ ^# ]] && continue
cd /Users/sd9235/code/mygh/$repo && git diff --stat
done < /Users/sd9235/code/mygh/learning_ai_common_plat/.windsurf/workflows/repos.txt
```
```bash
cd /Users/sd9235/code/mygh/learning_ai_common_plat
./scripts/update-agent-docs.sh --dry-run # preview
./scripts/update-agent-docs.sh # apply + commit per repo
./scripts/update-agent-docs.sh --no-commit # apply without committing
```
3. Commit changes (if any):
Reads `learning_ai_common_plat/.windsurf/workflows/repos.txt` as the
canonical list of managed repos.
3. **Verify no drift**:
```bash
bash scripts/check-agent-docs-drift.sh
```
Exits 1 if any repo has drifted from the canonical generator output.
Suitable for CI.
4. **Review changes per repo**:
```bash
while IFS= read -r repo; do
[[ -z "$repo" || "$repo" =~ ^# ]] && continue
echo "── $repo ──"
git -C /Users/sd9235/code/mygh/"$repo" log -1 --oneline
done < /Users/sd9235/code/mygh/learning_ai_common_plat/.windsurf/workflows/repos.txt
```
5. **Push (when ready)**:
```bash
while IFS= read -r repo; do
[[ -z "$repo" || "$repo" =~ ^# ]] && continue
git -C /Users/sd9235/code/mygh/"$repo" push
done < /Users/sd9235/code/mygh/learning_ai_common_plat/.windsurf/workflows/repos.txt
```
## Files generated per repo
| File | Type | Tool(s) |
| --------------------------------- | ------- | -------------------------------------- |
| `AGENTS.md` | Hybrid | Codex, Claude, Cursor, Windsurf, Cline |
| `.github/copilot-instructions.md` | Pointer | GitHub Copilot |
| `.aider.conf.yml` | Config | Aider |
| `.editorconfig` | Config | All editors |
`AGENTS.md` is hybrid: the body is hand-maintained (repo-specific content),
but the generator idempotently prepends a `<!-- BEGIN: canonical-behavior-pointer -->`
block at the top. The block is the only auto-managed region; everything else
is left alone.
## Files deleted by the generator
| File | Reason |
| ---------------- | ------------------------------------------------------------- |
| `CLAUDE.md` | Duplicated AGENTS.md. Claude Code reads AGENTS.md by default. |
| `.cursorrules` | Duplicated AGENTS.md. Cursor reads AGENTS.md. |
| `.windsurfrules` | Duplicated AGENTS.md. Windsurf reads AGENTS.md. |
| `.clinerules` | Duplicated AGENTS.md. Cline reads AGENTS.md. |
```bash
cd /Users/sd9235/code/mygh/learning_voice_ai_agent
[ -n "$(git status --porcelain)" ] && git add -A && git commit -m "chore(docs): update agent configuration files"
```
## Notes
- Safe to run repeatedly (idempotent).
- Only commits when actual changes exist in the repo.
- The script never touches the body of AGENTS.md outside the marker block.
- For workspaces that include `learning_ai_common_plat` as a sibling
(default for Windsurf/Cascade), the canonical guidelines file resolves
via the relative path written into each AGENTS.md pointer.
- The script scans each repo's structure and regenerates docs based on current state
- Only commits if there are actual changes
- Safe to run repeatedly (idempotent)
- Requires `learning_ai_common_plat` to be the source of truth for templates

9
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/repo_workflows/learning_ai_common_plat/repos.txt
View File

@ -19,21 +19,16 @@ learning_ai_trails
learning_ai_local_memory_gpt
learning_ai_efforise
learning_ai_local_llms
learning_ai_talk2obsidian
# --- Auth & identity ---
learning_ai_smart_auth
learning_ai_auth_app
# --- Web & misc ---
learning_ai_productivity_web
# --- OSS (subdirectory repos under oss/) ---
# NOTE: oss/learning_ai_claw-code-oss is intentionally OMITTED. It is an
# upstream Anthropic Claude Code OSS clone with its own CLAUDE.md convention
# (auto-generated by Claude Code's bootstrap, not the deprecated ByteLyst
# per-product CLAUDE.md pattern). We do not manage its agent docs; deleting
# CLAUDE.md or forcing the ByteLyst canonical pointer block would diverge
# from upstream alignment for no benefit.
oss/learning_ai_claw-code-oss
oss/learning_ai_claw-cowork
# -- tooling --

3
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/repo_workflows/learning_ai_common_plat/run-code-review.md
View File

@ -46,7 +46,8 @@ All code across the ByteLyst workspace repos:
- learning_ai_peakpulse (PeakPulse)
- learning_ai_notes (NoteLett)
- learning_ai_trails (ActionTrail)
- learning_ai_auth_app (ByteLyst SmartAuth — companion app + PRD/roadmap)
- learning_ai_smart_auth (SmartAuth)
- learning_ai_auth_app (ByteLyst Auth)
- learning_ai_productivity_web (Productivity Tools)
## Domain Context

32
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/repo_workflows/learning_ai_efforise/w1-scaffold-and-cleanup.md
View File

@ -1,5 +1,5 @@
---
description: 'Window 1: Phase 0 scaffolding + Manus cleanup (RUN FIRST — other windows depend on this)'
description: "Window 1: Phase 0 scaffolding + Manus cleanup (RUN FIRST — other windows depend on this)"
---
# Window 1: Phase 0 Scaffolding + Manus Cleanup
@ -38,20 +38,18 @@ Create `shared/product.json` following the ecosystem pattern. Use NoteLett (`../
}
```
## Step 2: Create Agent Config Files (single-source-of-truth pattern)
## Step 2: Create Agent Config Files (8 files)
Hand-write `AGENTS.md` only. All other agent files are generated by the
canonical script. Legacy files (`CLAUDE.md`, `.cursorrules`, `.windsurfrules`,
`.clinerules`) are **deprecated** and must NOT be created — they used to
duplicate AGENTS.md content and drifted.
Create all 8 agent config files matching ecosystem standard. Copy structure from `../learning_ai_notes/` or `../learning_ai_trails/`:
1. `AGENTS.md` — AI agent onboarding guide (customize for efforise: Vite SPA + Fastify backend, productId efforise, port 4020, --er-\* tokens). Copy structure from `../learning_ai_notes/AGENTS.md` or `../learning_ai_trails/AGENTS.md`.
2. Add this repo to `../learning_ai_common_plat/.windsurf/workflows/repos.txt` if not already present.
3. Run `bash ../learning_ai_common_plat/scripts/update-agent-docs.sh`. This will:
- Prepend the canonical-behavior-pointer block to `AGENTS.md`
- Generate `.editorconfig`, `.aider.conf.yml`, `.github/copilot-instructions.md`
- Verify no legacy files exist (deletes them if present)
4. Verify with `bash ../learning_ai_common_plat/scripts/check-agent-docs-drift.sh`.
1. `AGENTS.md` — AI agent onboarding guide (customize for efforise: Vite SPA + Fastify backend, productId efforise, port 4020, --er-* tokens)
2. `CLAUDE.md` — Claude Code instructions (short version pointing to AGENTS.md)
3. `.windsurfrules` — Windsurf rules (short version pointing to AGENTS.md)
4. `.cursorrules` — Cursor rules (short version pointing to AGENTS.md)
5. `.clinerules` — Cline rules (short version pointing to AGENTS.md)
6. `.aider.conf.yml` — Aider config
7. `.editorconfig` — Copy from any ecosystem repo
8. `.github/copilot-instructions.md` — GitHub Copilot rules
## Step 3: Create Root Config Files
@ -72,14 +70,12 @@ duplicate AGENTS.md content and drifted.
## Step 4: Manus Artifact Cleanup
### 4a. Clean `vite.config.ts`
- Remove `vite-plugin-manus-runtime` plugin
- Remove `vite-plugin-manus-debug-collector` plugin + all LOG_DIR code
- Remove `@builder.io/vite-plugin-jsx-loc` plugin
- Replace `allowedHosts: [".manuspre.computer", ...]` with `allowedHosts: ["localhost"]`
### 4b. Delete Manus Files
- Delete `client/src/components/ManusDialog.tsx`
- Delete `client/src/components/Map.tsx` (Google Maps boilerplate, 156 lines)
- Delete `client/public/__manus__/` directory (contains `debug-collector.js`)
@ -90,25 +86,21 @@ duplicate AGENTS.md content and drifted.
- Delete `patches/wouter@3.7.1.patch` (evaluate first — remove if not critical)
### 4c. Clean `client/index.html`
- Remove `VITE_ANALYTICS_ENDPOINT` / `VITE_ANALYTICS_WEBSITE_ID` script references
### 4d. Dependency Cleanup in `package.json`
- **Downgrade** `zod` from `^4.1.12` → `^3.24.2` (CRITICAL — Zod 4 breaks @bytelyst/\* integration)
- **Downgrade** `zod` from `^4.1.12` → `^3.24.2` (CRITICAL — Zod 4 breaks @bytelyst/* integration)
- **Upgrade** `typescript` from `5.6.3` → `^5.7.3`
- **Remove:** `streamdown`, `cmdk`, `add` (devDep), `@types/google.maps` (devDep), `next-themes`
- **Remove:** `express`, `@types/express` (server/ is deleted)
- **Remove** Manus vite plugins from devDeps: `vite-plugin-manus-runtime`, `@builder.io/vite-plugin-jsx-loc`
### 4e. Move Files
- Move `ideas.md` → `docs/ideas.md`
## Step 5: Create README.md
Write a proper README.md with:
- Product name + description
- Tech stack (Vite + React 19 SPA, Fastify 5 backend planned)
- Setup instructions (`pnpm install`, `pnpm dev`)

2
dashboards/admin-web/Dockerfile
View File

@ -13,7 +13,7 @@ COPY dashboards/admin-web/package.json dashboards/admin-web/
RUN --mount=type=secret,id=gitea_npm_token \
TOKEN=$(cat /run/secrets/gitea_npm_token) && \
printf '@bytelyst:registry=http://localhost:3300/api/packages/learning_ai_user/npm/\n//localhost:3300/api/packages/learning_ai_user/npm/:_authToken=%s\n' "$TOKEN" > .npmrc && \
printf '@bytelyst:registry=http://localhost:3300/api/packages/bytelyst/npm/\n//localhost:3300/api/packages/bytelyst/npm/:_authToken=%s\n' "$TOKEN" > .npmrc && \
pnpm install --ignore-scripts --legacy-peer-deps
COPY dashboards/admin-web/ dashboards/admin-web/

8
dashboards/admin-web/README.md
View File

@ -37,10 +37,10 @@ curl -X POST "http://localhost:3001/api/seed?secret=<SEED_SECRET>"
### Default Logins
| Email | Password | Role |
| -------------------- | ----------- | ----------- |
| `admin@example.com` | `Admin123!` | Super Admin |
| `viewer@example.com` | `viewer123` | Viewer |
| Email | Password | Role |
| ------------------ | ----------- | ----------- |
| `admin@example.com` | `Admin123!` | Super Admin |
| `viewer@example.com` | `viewer123` | Viewer |
## Environment Variables

272
dashboards/admin-web/docs/roadmaps/UX_INTEGRATION_ADMIN.md
View File

@ -1,272 +0,0 @@
# admin-web × ByteLyst UX Integration Roadmap
> **Purpose:** Additively adopt the latest shared `@bytelyst/*` UX into the platform admin console —
> a token bridge, charts migration (`recharts` → `@bytelyst/charts`), command palette, page chrome,
> motion, and system banners — **without** ripping out the mature local shadcn `src/components/ui/*`
> layer (that wholesale replacement is explicitly out of scope for this phase).
> **Delegation target:** Devin CLI (`devin --prompt-file docs/roadmaps/UX_INTEGRATION_ADMIN.md`).
>
> **Repo:** `learning_ai_common_plat/dashboards/admin-web` (`@bytelyst/admin-web`)
> **Run dir:** this package · **Stack:** Next.js 16 · React 19 · TS 5 · Tailwind 4 · Vitest · Playwright
> **Showcase reference (read-only, do not edit):** `../../../copilot/learning_ai_uxui_web`.
---
## Current-state review (verified 2026-05-29)
admin-web is large (~45 dashboard surfaces) and has **two** UI layers: a mature local shadcn
`src/components/ui/*` (radix-based: button/dialog/select/tabs/…) **and** a `Primitives.tsx` adapter.
This roadmap is **additive** — it brings in shared capabilities the app lacks; it does **not**
rewrite the shadcn primitive layer.
| Area | Today | Gap |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |
| Token system | shadcn OKLCH vars (`--background`/`--primary`/`--card`) + `.dark` | `@bytelyst/ui` expects `--bl-*` → **need a bridge** (wave 1) |
| UI-drift guard | `eslint.config.mjs` has **no** `no-restricted-imports` | add ratchet: direct `@bytelyst/ui` only via `Primitives.tsx` |
| Charts | **`recharts` directly in 5 files** (`(dashboard)/page`, `usage`, `users/[id]`, `ops/client-logs`, `docs`, `extraction/entity-chart`) | `@bytelyst/charts` + `@bytelyst/data-viz` |
| Command / nav | none (45 surfaces!) | `@bytelyst/command-palette` (⌘K) — high value |
| Page chrome | mixed | `@bytelyst/dashboard-components` (already a dep) |
| Motion | none | `@bytelyst/motion` (reduced-motion aware) |
| System messages | `broadcasts`/`maintenance`/`notifications` surfaces exist | `@bytelyst/notifications-ui` banners (if a real feed is reachable) |
**Explicitly OUT of scope this phase:** replacing the local shadcn `src/components/ui/*` components
with `@bytelyst/ui` equivalents. Leave them as-is; only NEW UI and the waves below use shared packages.
---
## Baseline audit (verified by Devin run — 2026-05-29)
> Hard facts captured from the working tree **before** any wave changes. This corrects/confirms the
> hand-written current-state table above and pins the green/red gates each wave must hold.
**UI layers (confirmed).** Two coexisting layers: mature local shadcn `src/components/ui/*` (radix-based)
- a `src/components/ui/Primitives.tsx` adapter re-exporting `@bytelyst/ui` (`Button`/`Badge`/`Input`/
`Select`/`Textarea`/`DataTable`/`Modal`/… ). `Primitives.tsx` already consumes `--bl-input` /
`--bl-surface-muted`. **Additive contract holds:** UX-1→6 do not rewrite shadcn `ui/*`.
**Charts (corrected to 5 files, not 6).** `recharts@^3.7.0` is imported directly in exactly **5** files
(roadmap prose listed `docs` — verified it does **not** import recharts):
1. `src/app/(dashboard)/page.tsx` — `AreaChart` (DAU) + `BarChart` (revenue)
2. `src/app/(dashboard)/usage/page.tsx` — `AreaChart` + `BarChart` + `PieChart`
3. `src/app/(dashboard)/users/[id]/page.tsx` — `AreaChart` (per-user daily usage)
4. `src/app/(dashboard)/ops/client-logs/page.tsx` — `BarChart` (telemetry)
5. `src/components/extraction/entity-chart.tsx` — `BarChart` + `PieChart` (+ non-recharts `EntityTimeline`)
**Shared viz packages (built, NOT yet deps).** `@bytelyst/charts@0.1.1` (`LineChart`/`BarChart`/
`AreaChart`/`Donut`/`Gauge`/`RadarChart`, pure SVG, `--bl-*`-themed) and `@bytelyst/data-viz@0.1.0`
(`Sparkline`/`KpiCard`/`ProgressRing`/`BarSparkline`/`Heatmap`) are built (`dist/` present) but are
**not** in `admin-web` deps yet → UX-2 adds them as `workspace:*`. `@bytelyst/dashboard-components`
**is** already a dep (`PageHeader` re-exported via `Primitives.tsx`). `@bytelyst/command-palette`,
`@bytelyst/motion`, `@bytelyst/notifications-ui` are **not** yet deps.
**Tokens.** `--bl-*` tokens are already supplied by `@bytelyst/design-tokens/css` (imported in
`globals.css`), but they carry the _default_ design-token palette, not admin's shadcn OKLCH ramp →
UX-1 adds an in-`globals.css` **bridge** remapping the `--bl-*` shared contract onto admin's
`--background`/`--card`/`--primary`/… (light **and** `.dark`), so shared components theme correctly.
**ESLint.** `eslint.config.mjs` has **no** `no-restricted-imports` → UX-1 adds the ratchet
(forbid direct `@bytelyst/ui` outside `Primitives.tsx`).
**Green/red gates at baseline (run dir = this package):**
| Gate | Baseline result |
| ----------------------------------- | ----------------------------------------------------------------------------- |
| `typecheck` (`tsc --noEmit`) | ✅ clean |
| `lint` (`eslint`) | ✅ clean |
| `test` (`vitest run`) | ✅ **16 files / 111 tests** pass (all `.test.ts`, node env, logic-level) |
| `format:check` (`prettier --check`) | ❌ **RED — 29 pre-existing files** (none in any wave's edit scope; see below) |
| `build` (`next build --webpack`) | ✅ compiles, 123 routes (pre-existing multi-lockfile warning only) |
| `test:e2e` (Playwright, 91 tests) | captured in **E2e baseline** section below |
**Pre-existing `format:check` debt (NOT caused by this run).** 29 files already fail Prettier at
baseline — none overlap the files UX-1→6 edit. Sweeping-reformatting 29 unrelated files would be
scope-creep in a shared monorepo, so this gate is treated like e2e: **no NEW format failures vs this
baseline**; every file this run creates/edits is kept Prettier-clean. (CSS is not in the prettier glob.)
---
## Ground rules (non-negotiable)
1. **Scope lock:** edit only files under `dashboards/admin-web/`. Never edit shared
`packages/@bytelyst/*`, other dashboards, services, the showcase, or any sibling repo. Never
`git push` outside `admin-web/`.
2. **Additive only:** do NOT rewrite the local shadcn `src/components/ui/*` layer. Route only NEW
shared-`@bytelyst/ui` usage through `src/components/ui/Primitives.tsx`.
3. **Deps are `workspace:*`** (common-plat convention) — match that, NOT `"*"`. Keep lockfile
changes minimal (importer link entries only); recover with `pnpm install --frozen-lockfile` if
within-repo links corrupt. Do NOT commit a full monorepo lockfile re-normalization or relink
`packages/ui/node_modules/@radix-ui/*` to a sibling store (this broke Turbopack/e2e on tracker-web).
4. **Tokens:** keep the shadcn OKLCH system; add a `--bl-*` → admin-token **bridge** (wave 1) so
shared components theme correctly in light + dark. Zero new hardcoded color literals.
5. **Tests are sacred** — never weaken/skip/delete; add a test per wave.
6. **Commit cadence:** verify → commit → push **per item** (`feat(admin-web): … (UX-N)`); never
leave >1 wave uncommitted; immediately tick the checkbox with **SHA + test counts**. Not done
until committed **and** pushed.
7. **Deferrals explicit** (`[~]` + reason + table row); **no stray files**; env blockers recorded here.
### Verify (after EVERY wave + final sweep)
```bash
pnpm --filter @bytelyst/admin-web typecheck
pnpm --filter @bytelyst/admin-web lint
pnpm --filter @bytelyst/admin-web test
pnpm --filter @bytelyst/admin-web format:check
pnpm --filter @bytelyst/admin-web build
pnpm --filter @bytelyst/admin-web test:e2e # Playwright + @axe-core (no new failures vs wave-1 baseline)
# size:check (bundlesize) where it runs in this env; else record gzipped sizes here
```
---
## Waves
- [x] **UX-1 — Token bridge + UI-drift ratchet (FIRST):** add a `--bl-*` → admin OKLCH bridge in
`globals.css` (light + dark); add ESLint `no-restricted-imports` forbidding direct
`@bytelyst/ui` imports outside `Primitives.tsx`; add a Primitives export-presence test. Capture
the e2e baseline below. — **DONE** `df72199c` · test **17 files / 140 tests** (+1 file / +29 vs
baseline 16 / 111); typecheck+lint+build green; e2e 11✅/80❌ (unchanged baseline); format:check
no new failures (29 pre-existing).
- [x] **UX-2 — Charts:** migrate the `recharts` usages to `@bytelyst/charts` (+ `@bytelyst/data-viz`),
lazy-loaded; render tests (no NaN in SVG). Drop `recharts` if fully unused afterward.
— **DONE** `01f79afa` · Migrated all **5** recharts files (page, usage, users/[id],
ops/client-logs, extraction/entity-chart) → `AreaChart`/`BarChart`/`Donut` via a lazy
`src/components/charts` seam (`next/dynamic`, own chunk; dynamic-imports a local static
re-export `primitives.tsx` because the packages declare only an `import` export condition).
Added pure finite-safe mappers `src/lib/chart-data.ts`. **`recharts` dropped** from
`package.json` + lockfile importer (now fully unused; 33 orphaned pkgs pruned). Stacked
severity chart → single-series bars colored by dominant severity; pie charts → `Donut`;
horizontal bars → vertical (charts are vertical/single-series; StackedBar deferred to charts
0.2.x). Lockfile change = **+6/−3 importer lines only** (no re-normalization; `workspace:*`;
`--frozen-lockfile` clean). Vitest config: inline + `dedupe` react for SSR render tests.
test **18 files / 159 tests** (+1 file / +19); typecheck+lint+build green (123 routes);
format:check no new failures; e2e unchanged (see below).
- [x] **UX-3 — Command palette:** add `@bytelyst/command-palette`; mount `CommandRegistryProvider` +
`CommandPalette` (⌘K, lazy) in `(dashboard)/layout.tsx`; register navigate commands for the major
surfaces (Users, Billing, Flags, Broadcasts, Audit, Experiments, Subscriptions, Licenses, Ops, …) + theme toggle + sign out; Vitest test palette opens on ⌘K.
— **DONE** `b4e450d6` · `CommandRegistryProvider` wraps the dashboard; `CommandMenu`
(`useCommandPalette` ⌘K/Ctrl-K hotkey + lazy `next/dynamic` dialog via local
`command-palette-dialog.tsx` re-export) registers **21** navigate commands (`src/lib/admin-commands.ts`) + theme-toggle + sign-out actions; `onNavigate`→`router.push`. Dep added `workspace:*`
(importer-only lockfile change, `--frozen-lockfile` clean). Vitest: pure command-set tests +
happy-dom ⌘K/Ctrl-K interaction test (`react-dom/client` + `act`, no new deps; react deduped).
test **19 files / 165 tests** (+6); typecheck+lint+build green (123 routes); format:check no new
failures; e2e unchanged.
- [x] **UX-4 — Page chrome:** use `@bytelyst/dashboard-components` (`PageHeader`/`ErrorPage`/
`NotFoundPage`/`LoadingSpinner`) on `error.tsx`/`not-found.tsx`/`loading.tsx` + a few high-traffic
surfaces where chrome is bespoke. Keep it additive.
— **DONE** `94ef3f1c` · `error.tsx`→`ErrorPage` (telemetry kept; retry→`reset`);
`loading.tsx`→`LoadingSpinner` inside the existing skeleton; `not-found.tsx` already used
`NotFoundPage` (confirmed); dashboard overview `page.tsx` header→`PageHeader` (Refresh as
`actions`, subtitle preserved below). Rich detail headers (users/[id] back-button + badges)
intentionally left bespoke — `PageHeader` has no subtitle/badge slot, so forcing it would
regress them (additive rule). dashboard-components reads `--color-*` (admin `@theme inline`),
so themes correctly. test **20 files / 168 tests** (+3, happy-dom render of error/not-found/
loading chrome); typecheck+lint+build green; format:check no new failures; e2e unchanged.
- [x] **UX-5 — Motion:** add `@bytelyst/motion`; subtle `Reveal`/`Stagger` on the overview dashboard
cards + key tables; respect `prefers-reduced-motion`. (Note tracker-web's lesson: do NOT apply
motion to surfaces an offline axe gate scans synchronously if transient opacity trips contrast.)
— **DONE** `aa0e67d2` · `@bytelyst/motion` added `workspace:*` (importer-only lockfile change,
`--frozen-lockfile` clean). Dashboard overview only: KPI cards grid → `StaggerList`
(from="up", 50ms), bottom Model-Usage/Recent-Users tables → `Reveal`. Primitives honor
`prefers-reduced-motion` and resolve to **opacity 1** (no element stranded transparent → no
contrast/a11y regression; SSR-safe `prefersReducedMotion`). Applied to the auth-gated dashboard
only (not scanned by the public e2e set), per the tracker-web axe/opacity caution. test
**21 files / 170 tests** (+2, happy-dom asserts primitives end visible + render all children);
typecheck+lint+build green; format:check no new failures; e2e unchanged.
- [~] **UX-6 — System banners (conditional):** if a real broadcasts/maintenance feed is reachable,
add `@bytelyst/notifications-ui` `BannerStack`/`Announcement` in `(dashboard)/layout.tsx`.
`NotificationCenter` only with a real feed; else **defer**.
— **DEFERRED** · No real broadcasts/maintenance feed is reachable in this environment:
`platform-service` (`:4003`) refuses connections (the same backend gap that makes 80/91 e2e
fail), so the admin `/api/maintenance` + `/api/broadcasts` proxies have nothing to surface.
Per the wave's explicit condition (and the run brief), banners are **not** added against an
empty/unreachable feed — adding `BannerStack`/`NotificationCenter` here would be unverifiable
and could render a permanent empty/erroring banner. Follow-up recorded in the Deferrals table.
## Cross-cutting
- [x] **CC.1** Full suite + build green every wave. — `typecheck`+`lint`+`build` green and `vitest`
passing after each wave; final **22 files / 183 tests**.
- [x] **CC.2** Dark-mode parity (bridge works in `.dark`). — Bridge maps every `--bl-*` to an admin
`--*` var (or `color-mix` of one) that flips between `:root` and `.dark`, so parity is inherited;
guarded by `src/__tests__/token-bridge.test.ts`.
- [x] **CC.3** No new color literals. — All new color values are `var(--*)` tokens (incl. the
`var(--chart-*)` categorical palette); bridge introduces only `var()`/`color-mix` (asserted by
the token-bridge test); grep of every touched file finds zero new hex/oklch/hsl/rgb literals.
- [x] **CC.4** No new a11y violations; labels on all controls. — Charts render `role="img"`+`<title>`
(`ariaLabel`); palette dialog has `ariaLabel="Admin command palette"`; `LoadingSpinner` is
`role="status"`; motion primitives resolve to opacity 1 (no contrast trap). No new unlabeled
controls introduced. (Full `@axe-core` gate needs the backend — deferred; see Deferrals.)
- [x] **CC.5** Bundle: dynamic `import()` for charts/palette; record gzipped sizes. — Charts are
code-split via `next/dynamic` into their own async chunk (**~11.0 KB raw / ~3.8 KB gzip**);
the command-palette dialog and `@bytelyst/motion` are also `next/dynamic`/deferred. `size:check`
(`bundlesize`) has **no config in this repo** (`Config not found`) → recorded gzip sizes here per
the roadmap fallback; adding a `bundlesize` budget config is left as a follow-up.
- [x] **CC.6** Final tracker + Deferrals table complete. — see below.
## Progress tracker
```
Setup : UX-1 ✅
Adopt : UX-2 ✅ UX-3 ✅ UX-4 ✅ UX-5 ✅ UX-6 ⏭️ deferred (no feed)
Cross : CC.1 ✅ CC.2 ✅ CC.3 ✅ CC.4 ✅ CC.5 ✅ CC.6 ✅
```
## E2e baseline (captured on UX-1 — 2026-05-29)
`pnpm --filter @bytelyst/admin-web test:e2e` (Playwright, chromium, 91 tests, dev server auto-booted on :3001):
```
11 passed
80 failed (5.0m)
```
**The 80 failures are environmental, NOT regressions.** They all fail in a `loginAsAdmin` /
`beforeEach` step (`getByLabel('Email').fill(...)` times out, or post-login `waitForURL('**/dashboard')`
never resolves) because the `platform-service` backend (`:4003`) and emulator stack are not running in
this sandbox, so authenticated surfaces never render. The **11 passing** are the public/unauthenticated
specs (`login.spec.ts`, `navigation.spec.ts`, `smartauth-login.spec.ts` public-page assertions).
**Gate for every subsequent wave:** keep these **11 passing** and add **no new failures** — i.e. the
count must stay ≥ 11 passed / ≤ 80 failed. (A full green run requires the backend; out of scope here.)
## Deferrals (fill in as encountered)
| Item | Reason (surface/data gate) | Follow-up |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **UX-6 — System banners** | No real broadcasts/maintenance feed: `platform-service` (`:4003`) unreachable in this env, so `/api/maintenance` + `/api/broadcasts` return nothing. | When the backend stack runs, add `@bytelyst/notifications-ui` `BannerStack`/`Announcement` (+`NotificationCenter`) in `(dashboard)/layout.tsx` wired to the live feed, and verify against real data. |
| `@bytelyst/charts` `StackedBar` | Charts 0.1.1 ships only single-series/vertical bars (StackedBar deferred to charts 0.2.x), so the client-logs stacked severity chart was rendered as single bars colored by dominant severity. | Restore a true stacked severity chart once `@bytelyst/charts` 0.2.x lands `StackedBar`. |
| e2e full-green / `@axe-core` gate | 80/91 Playwright specs need the auth backend (`:4003`) which is down here; no `@axe-core` harness exists in `e2e/` yet. | Run the full e2e + add an `@axe-core/playwright` a11y gate once the backend/emulator stack is reachable in CI. |
---
## Phase 2 (FUTURE — do NOT start in this run)
> Tracked here so it isn't lost. **Out of scope for the phase-1 run above.** Do not begin any of
> this without an explicit, separate delegation — it is large and high-risk.
**Goal:** migrate the local shadcn `src/components/ui/*` layer (~16 radix-based components: `button`,
`badge`, `dialog`, `dropdown-menu`, `select`, `tabs`, `tooltip`, `switch`, `slider`, `progress`,
`avatar`, `label`, `separator`, `sheet`, …) onto shared `@bytelyst/ui` equivalents via the
`Primitives.tsx` adapter, retiring the bespoke radix wrappers.
**Why it's deferred:**
- Touches nearly all ~45 surfaces (every page imports shadcn primitives) → enormous blast radius.
- Behavioral parity risk: shadcn variants, `class-variance-authority` styling, and radix a11y
semantics must be matched 1:1 or admin workflows regress.
- Should be done component-by-component behind the wave-1 token bridge, each with snapshot/interaction
tests, not as a big-bang swap.
**Suggested sequencing (when scheduled):**
1. Bridge first (done in phase-1 UX-1) so shared components already theme correctly.
2. Migrate leaf primitives with no children first (`badge`, `label`, `separator`, `avatar`).
3. Then form controls (`input`, `select`, `switch`, `slider`) with submit/interaction tests.
4. Then overlays (`dialog`, `dropdown-menu`, `tooltip`, `sheet`) — verify focus-trap/Esc/scroll-lock.
5. Delete each shadcn wrapper only once all its importers are migrated and the drift ratchet passes.
6. One component per commit; keep `test:coverage` and `size:check` green throughout.
**Acceptance:** local `src/components/ui/*` shadcn wrappers removed (or reduced to thin re-exports of
the adapter), all surfaces visually + behaviorally unchanged, coverage and bundle budgets held.

7
dashboards/admin-web/e2e/broadcasts-surveys.spec.ts
View File

@ -3,13 +3,6 @@ import { test, expect, type Page } from '@playwright/test';
const ADMIN_EMAIL = 'admin@example.com';
const ADMIN_PASSWORD = 'Admin123!';
test.beforeEach(async () => {
test.skip(
true,
'Broadcast/survey builder flows are legacy specs for unimplemented interactive CRUD screens; keep out of the blocking E2E gate until those screens are rebuilt.'
);
});
async function loginAsAdmin(page: Page) {
await page.goto('/login');
await page.getByLabel('Email').fill(ADMIN_EMAIL);

110
dashboards/admin-web/e2e/dashboard-reliability.spec.ts
View File

@ -1,110 +0,0 @@
import { test, expect, type Page, type Route } from '@playwright/test';
function authenticate(page: Page) {
return page.addInitScript(() => {
localStorage.setItem('admin_access_token', 'mock-token');
localStorage.setItem('admin_refresh_token', 'mock-refresh');
localStorage.setItem(
'admin_auth_user',
JSON.stringify({
email: 'admin@example.com',
name: 'Admin User',
role: 'super_admin',
})
);
});
}
async function fulfillJson(route: Route, body: unknown, status = 200) {
await route.fulfill({
status,
contentType: 'application/json',
body: JSON.stringify(body),
});
}
test.describe('Admin dashboard reliability', () => {
test('shows an in-page retry path when dashboard APIs fail', async ({ page }) => {
await authenticate(page);
let recover = false;
await page.route('**/api/dashboard/stats', route =>
recover
? fulfillJson(route, {
users: { total: 42, byPlan: { pro: 20 } },
tokens: { active: 7 },
usage: { totalWords: 8400, totalDictations: 120, totalCost: 12.34 },
audit: { total: 2, failedLogins: 0 },
})
: fulfillJson(route, { error: 'stats unavailable' }, 503)
);
await page.route('**/api/usage**', route =>
recover
? fulfillJson(route, {
records: [
{
date: '2026-05-30',
tokensUsed: 8400,
dictations: 120,
costUsd: 12.34,
model: 'gpt-4o-mini',
},
],
})
: fulfillJson(route, { error: 'usage unavailable' }, 503)
);
await page.route('**/api/users**', route =>
recover
? fulfillJson(route, {
users: [
{
id: 'u1',
name: 'Admin User',
email: 'admin@example.com',
plan: 'pro',
status: 'active',
createdAt: '2026-05-01T00:00:00Z',
lastActive: '2026-05-30T00:00:00Z',
totalTokensUsed: 8400,
totalRequests: 120,
monthlySpend: 12.34,
},
],
total: 1,
byPlan: { pro: 1 },
})
: fulfillJson(route, { error: 'users unavailable' }, 503)
);
await page.route('**/api/analytics/revenue**', route =>
recover
? fulfillJson(route, {
mrr: 199,
arr: 2388,
mrrChange: 8,
totalRevenue: 2388,
revenueByMonth: [],
churnRate: 2,
churnCount: 1,
ltv: 1200,
arpu: 99,
newSubscriptions: 3,
canceledSubscriptions: 1,
})
: fulfillJson(route, { error: 'revenue unavailable' }, 503)
);
await page.goto('/');
const errorHeading = page.getByRole('heading', { name: /could not load dashboard/i });
const recoveredKpi = page.getByText('42', { exact: true }).first();
await expect(errorHeading.or(recoveredKpi)).toBeVisible();
if (await errorHeading.isVisible().catch(() => false)) {
recover = true;
await page.getByRole('button', { name: /retry/i }).click();
}
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
await expect(recoveredKpi).toBeVisible();
await expect(page.getByRole('main').getByText('Admin User')).toBeVisible();
});
});

7
dashboards/admin-web/e2e/diagnostics.spec.ts
View File

@ -3,13 +3,6 @@ import { test, expect, type Page } from '@playwright/test';
const ADMIN_EMAIL = 'admin@example.com';
const ADMIN_PASSWORD = 'Admin123!';
test.beforeEach(async () => {
test.skip(
true,
'Diagnostics deep-workflow specs target a mock debug-session builder that is not present in the current admin-web UI; keep out of the blocking E2E gate until the feature is implemented.'
);
});
async function loginAsAdmin(page: Page) {
await page.goto('/login');
await page.getByLabel('Email').fill(ADMIN_EMAIL);

7
dashboards/admin-web/e2e/rich-media.spec.ts
View File

@ -3,13 +3,6 @@ import { test, expect, type Page } from '@playwright/test';
const ADMIN_EMAIL = 'admin@example.com';
const ADMIN_PASSWORD = 'Admin123!';
test.beforeEach(async () => {
test.skip(
true,
'Rich-media broadcast specs target legacy/nonexistent media-builder and user-portal flows; keep out of the blocking E2E gate until those flows exist.'
);
});
async function loginAsAdmin(page: Page) {
await page.goto('/login');
await page.getByLabel('Email').fill(ADMIN_EMAIL);

20
dashboards/admin-web/e2e/smartauth-account-linking.spec.ts
View File

@ -7,20 +7,6 @@ import { test, expect } from '@playwright/test';
test.describe('SmartAuth: Account Linking', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/login');
await page.evaluate(() => {
localStorage.setItem('admin_access_token', 'mock-token');
localStorage.setItem('admin_refresh_token', 'mock-refresh');
localStorage.setItem(
'admin_auth_user',
JSON.stringify({
email: 'admin@acme.com',
name: 'Test Admin',
role: 'super_admin',
})
);
});
// Mock auth state — logged in as admin
await page.route('**/api/auth/me', route =>
route.fulfill({
@ -47,8 +33,8 @@ test.describe('SmartAuth: Account Linking', () => {
})
);
await page.goto('/settings/security');
await expect(page.getByRole('main')).toContainText('Google');
await expect(page.getByRole('main')).toContainText('admin@acme.com');
await expect(page.getByText('Google')).toBeVisible();
await expect(page.getByText('admin@acme.com')).toBeVisible();
});
test('should show link provider button', async ({ page }) => {
@ -56,7 +42,7 @@ test.describe('SmartAuth: Account Linking', () => {
route.fulfill({ status: 200, body: JSON.stringify([]) })
);
await page.goto('/settings/security');
await expect(page.getByRole('button', { name: /link provider/i })).toBeVisible();
await expect(page.getByRole('button', { name: /link/i })).toBeVisible();
});
test('should prevent unlinking last provider', async ({ page }) => {

4
dashboards/admin-web/e2e/smartauth-devices.spec.ts
View File

@ -69,8 +69,8 @@ test.describe('SmartAuth: Device Management', () => {
await page.goto('/settings/devices');
await expect(page.getByText('Chrome on macOS')).toBeVisible({ timeout: 10000 });
await expect(page.getByText('Safari on iPhone')).toBeVisible();
await expect(page.getByText('Trusted', { exact: true })).toBeVisible();
await expect(page.getByText('Remembered', { exact: true })).toBeVisible();
await expect(page.getByText('Trusted')).toBeVisible();
await expect(page.getByText('Remembered')).toBeVisible();
});
test('revoke all button appears with multiple devices', async ({ page }) => {

4
dashboards/admin-web/e2e/smartauth-mfa-settings.spec.ts
View File

@ -25,9 +25,7 @@ test.describe('SmartAuth: MFA Settings Page', () => {
test('shows Two-Factor Authentication section', async ({ page }) => {
await page.goto('/settings/security');
await expect(page.getByText('Two-Factor Authentication', { exact: true })).toBeVisible({
timeout: 10000,
});
await expect(page.getByText('Two-Factor Authentication')).toBeVisible({ timeout: 10000 });
});
test('shows setup button when MFA is not enabled', async ({ page }) => {

6
dashboards/admin-web/e2e/smartauth-passkeys.spec.ts
View File

@ -22,7 +22,7 @@ test.describe('SmartAuth: Passkey Management', () => {
await route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
});
await page.goto('/settings/passkeys');
await expect(page.getByRole('heading', { name: 'Passkeys' })).toBeVisible({ timeout: 10000 });
await expect(page.getByText('Passkeys')).toBeVisible({ timeout: 10000 });
});
test('shows empty state when no passkeys', async ({ page }) => {
@ -71,7 +71,7 @@ test.describe('SmartAuth: Passkey Management', () => {
await page.goto('/settings/passkeys');
await expect(page.getByText('MacBook Pro Touch ID')).toBeVisible({ timeout: 10000 });
await expect(page.getByText('YubiKey 5C')).toBeVisible();
await expect(page.getByText(/Built-in authenticator/)).toBeVisible();
await expect(page.getByText('Security key', { exact: true })).toBeVisible();
await expect(page.getByText('Built-in authenticator')).toBeVisible();
await expect(page.getByText('Security key')).toBeVisible();
});
});

65
dashboards/admin-web/eslint.config.mjs
View File

@ -1,6 +1,6 @@
import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
import nextTs from 'eslint-config-next/typescript';
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
// Ignores MUST come first so they apply to every subsequent
@ -11,67 +11,32 @@ const eslintConfig = defineConfig([
// at index 0 is the documented way to make eslint v9 skip files
// entirely before any config rules apply.
{
ignores: ['**/.pnpmfile.cjs', '**/*.cjs'],
ignores: [
"**/.pnpmfile.cjs",
"**/*.cjs",
],
},
...nextVitals,
...nextTs,
{
rules: {
'react-hooks/set-state-in-effect': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
],
},
},
// UX-drift ratchet (UX-1): shared `@bytelyst/ui` primitives must be adopted
// through the local adapter `src/components/ui/Primitives.tsx`, never imported
// directly into pages/components. This keeps product-specific variants, the
// `--bl-*` token bridge, and a single migration seam in one place (the
// exception below). Mirrors tracker-web's convention.
{
rules: {
'no-restricted-imports': [
'error',
{
paths: [
{
name: '@bytelyst/ui',
message:
"Import shared UI primitives via '@/components/ui/Primitives' instead of '@bytelyst/ui' directly (UX-drift ratchet — see docs/roadmaps/UX_INTEGRATION_ADMIN.md).",
},
],
patterns: [
{
group: ['@bytelyst/ui/*'],
message:
"Import shared UI primitives via '@/components/ui/Primitives' instead of '@bytelyst/ui/*' directly (UX-drift ratchet — see docs/roadmaps/UX_INTEGRATION_ADMIN.md).",
},
],
},
],
},
},
// The Primitives adapter is the ONE sanctioned seam for `@bytelyst/ui`.
{
files: ['src/components/ui/Primitives.tsx'],
rules: {
'no-restricted-imports': 'off',
"react-hooks/set-state-in-effect": "off",
"@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_" }],
},
},
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
'.next/**',
'out/**',
'build/**',
'next-env.d.ts',
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
// .pnpmfile.cjs is a pnpm install hook (CommonJS by design).
// The TypeScript no-require-imports rule would otherwise flag
// every require() call in this file. eslint-config-next does NOT
// ignore .cjs by default.
'.pnpmfile.cjs',
'**/*.cjs',
".pnpmfile.cjs",
"**/*.cjs",
]),
]);

7
dashboards/admin-web/package.json
View File

@ -26,19 +26,15 @@
"@azure/keyvault-secrets": "^4.10.0",
"@bytelyst/api-client": "workspace:*",
"@bytelyst/auth": "workspace:*",
"@bytelyst/charts": "workspace:*",
"@bytelyst/command-palette": "workspace:*",
"@bytelyst/config": "workspace:*",
"@bytelyst/cosmos": "workspace:*",
"@bytelyst/dashboard-components": "workspace:*",
"@bytelyst/data-viz": "workspace:*",
"@bytelyst/cosmos": "workspace:*",
"@bytelyst/datastore": "workspace:*",
"@bytelyst/design-tokens": "workspace:*",
"@bytelyst/devops": "workspace:*",
"@bytelyst/errors": "workspace:*",
"@bytelyst/extraction": "workspace:*",
"@bytelyst/logger": "workspace:*",
"@bytelyst/motion": "workspace:*",
"@bytelyst/react-auth": "workspace:*",
"@bytelyst/telemetry-client": "workspace:*",
"@bytelyst/ui": "workspace:*",
@ -56,6 +52,7 @@
"react-dom": "19.2.3",
"react-markdown": "^10.1.0",
"redis": "^4.7.0",
"recharts": "^3.7.0",
"remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.0"
},

13
dashboards/admin-web/playwright.config.ts
View File

@ -1,8 +1,5 @@
import { defineConfig, devices } from '@playwright/test';
const port = Number(process.env.ADMIN_WEB_E2E_PORT ?? 3101);
const baseURL = process.env.ADMIN_WEB_E2E_URL ?? `http://127.0.0.1:${port}`;
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
@ -11,7 +8,7 @@ export default defineConfig({
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
baseURL,
baseURL: 'http://localhost:3001',
trace: 'on-first-retry',
},
projects: [
@ -21,9 +18,9 @@ export default defineConfig({
},
],
webServer: {
command: `pnpm exec next dev -H 127.0.0.1 -p ${port}`,
url: baseURL,
reuseExistingServer: process.env.ADMIN_WEB_REUSE_SERVER === '1',
timeout: 60_000,
command: 'npm run dev',
url: 'http://localhost:3001',
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
});

89
dashboards/admin-web/src/__tests__/charts-migration.test.tsx
View File

@ -1,89 +0,0 @@
import { describe, expect, it } from 'vitest';
import { renderToStaticMarkup } from 'react-dom/server';
import { createElement } from 'react';
import { AreaChart, BarChart, Donut } from '@bytelyst/charts';
import { finite, seriesValues, dateBars, donutSlices } from '@/lib/chart-data';
/**
* UX-2 — charts migration guard.
*
* Two layers:
* 1. the pure data-shaping helpers always produce finite output, and
* 2. the migrated `@bytelyst/charts` primitives render valid SVG with no
* literal `NaN` in any coordinate — including the degenerate inputs that
* used to silently break recharts (empty series, single point, all-zero,
* and non-finite values).
*/
describe('chart-data helpers', () => {
it('coerces non-finite values to 0', () => {
expect(finite(5)).toBe(5);
expect(finite('7')).toBe(7);
expect(finite(NaN)).toBe(0);
expect(finite(Infinity)).toBe(0);
expect(finite(null)).toBe(0);
expect(finite(undefined)).toBe(0);
});
it('maps rows to a finite numeric series', () => {
const rows = [{ v: 1 }, { v: 2 }, { v: Number.NaN }];
expect(seriesValues(rows, 'v')).toEqual([1, 2, 0]);
});
it('labels only every Nth dated bar but keeps every bar', () => {
const rows = Array.from({ length: 7 }, (_, i) => ({ date: `2026-05-0${i + 1}`, n: i }));
const bars = dateBars(rows, 'n', 5);
expect(bars).toHaveLength(7);
expect(bars[0].label).toBe('05-01');
expect(bars[1].label).toBe('');
expect(bars[5].label).toBe('05-06');
expect(bars.every(b => Number.isFinite(b.value))).toBe(true);
});
it('drops non-positive donut slices', () => {
const rows = [
{ k: 'a', v: 3 },
{ k: 'b', v: 0 },
{ k: 'c', v: -1 },
];
const slices = donutSlices(rows, 'k', 'v');
expect(slices.map(s => s.id)).toEqual(['a']);
});
});
describe('migrated charts render finite SVG', () => {
const series: number[][] = [
[10, 20, 15, 30, 25],
[], // empty
[42], // single point
[0, 0, 0], // all-zero
[Number.NaN, 5, Number.POSITIVE_INFINITY, 8], // non-finite mixed
];
it.each(series.map((s, i) => [i, s] as const))('AreaChart case %i renders no NaN', (_i, s) => {
const html = renderToStaticMarkup(createElement(AreaChart, { values: s, ariaLabel: 'a' }));
expect(html).toContain('<svg');
expect(html).not.toContain('NaN');
});
it.each(series.map((s, i) => [i, s] as const))('BarChart case %i renders no NaN', (_i, s) => {
// Mirror the admin data path: bar values are always sanitized via `finite`.
const data = s.map((v, idx) => ({ id: `d${idx}`, value: finite(v), label: `d${idx}` }));
const html = renderToStaticMarkup(createElement(BarChart, { data, ariaLabel: 'b' }));
expect(html).toContain('<svg');
expect(html).not.toContain('NaN');
});
it.each(series.map((s, i) => [i, s] as const))('Donut case %i renders no NaN', (_i, s) => {
// Mirror the admin data path: slices always come from `donutSlices`, which
// drops non-positive/non-finite values.
const slices = donutSlices(
s.map((v, idx) => ({ k: `s${idx}`, v })),
'k',
'v'
);
const html = renderToStaticMarkup(createElement(Donut, { slices, ariaLabel: 'd' }));
expect(html).toContain('<svg');
expect(html).not.toContain('NaN');
});
});

117
dashboards/admin-web/src/__tests__/command-palette.test.tsx
View File

@ -1,117 +0,0 @@
// @vitest-environment happy-dom
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { useCommandPalette } from '@bytelyst/command-palette';
import { buildAdminCommands, NAV_COMMANDS } from '@/lib/admin-commands';
/**
* UX-3 — command palette guard.
*
* 1. `buildAdminCommands` produces the expected navigate + action set, and the
* action callbacks are correctly wired.
* 2. The ⌘K / Ctrl-K hotkey (via `useCommandPalette`) toggles the palette open.
*/
describe('buildAdminCommands', () => {
const base = () => buildAdminCommands({ resolvedTheme: 'light', toggleTheme() {}, signOut() {} });
it('includes navigate commands for the major surfaces', () => {
const cmds = base();
const navHrefs = cmds.filter(c => c.mode === 'navigate').map(c => c.href);
for (const href of [
'/users',
'/billing',
'/flags',
'/broadcasts',
'/audit',
'/experiments',
'/subscriptions',
'/licenses',
'/ops',
]) {
expect(navHrefs).toContain(href);
}
expect(cmds.filter(c => c.mode === 'navigate')).toHaveLength(NAV_COMMANDS.length);
});
it('exposes theme-toggle + sign-out actions whose run callbacks fire', () => {
const toggleTheme = vi.fn();
const signOut = vi.fn();
const cmds = buildAdminCommands({ resolvedTheme: 'dark', toggleTheme, signOut });
const theme = cmds.find(c => c.id === 'action-toggle-theme');
const out = cmds.find(c => c.id === 'action-sign-out');
expect(theme?.label).toBe('Switch to light mode'); // dark -> offer light
expect(out?.mode).toBe('actions');
theme?.run?.();
out?.run?.();
expect(toggleTheme).toHaveBeenCalledTimes(1);
expect(signOut).toHaveBeenCalledTimes(1);
});
it('flips the theme label based on the resolved theme', () => {
const light = buildAdminCommands({ resolvedTheme: 'light', toggleTheme() {}, signOut() {} });
expect(light.find(c => c.id === 'action-toggle-theme')?.label).toBe('Switch to dark mode');
});
});
describe('⌘K hotkey opens the palette', () => {
let container: HTMLDivElement;
let root: Root;
function Harness() {
const cmdk = useCommandPalette();
return <span data-testid="state">{cmdk.open ? 'open' : 'closed'}</span>;
}
beforeEach(() => {
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
true;
container = document.createElement('div');
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
function press(init: KeyboardEventInit) {
act(() => {
window.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ...init }));
});
}
it('toggles open on Cmd-K and closed again', () => {
act(() => {
root.render(<Harness />);
});
expect(container.textContent).toBe('closed');
press({ key: 'k', metaKey: true });
expect(container.textContent).toBe('open');
press({ key: 'k', metaKey: true });
expect(container.textContent).toBe('closed');
});
it('also opens on Ctrl-K', () => {
act(() => {
root.render(<Harness />);
});
press({ key: 'k', ctrlKey: true });
expect(container.textContent).toBe('open');
});
it('ignores unmodified k and other keys', () => {
act(() => {
root.render(<Harness />);
});
press({ key: 'k' });
press({ key: 'j', metaKey: true });
expect(container.textContent).toBe('closed');
});
});

16
dashboards/admin-web/src/__tests__/kill-switch.test.ts
View File

@ -52,15 +52,13 @@ describe('GET /api/settings/kill-switch', () => {
it('returns existing kill_switch flag state', async () => {
mockListFlags.mockResolvedValue({
flags: [
{
key: 'kill_switch',
enabled: true,
platforms: ['desktop', 'ios'],
description: 'Maintenance window',
updatedAt: '2026-02-16T00:00:00Z',
},
],
flags: [{
key: 'kill_switch',
enabled: true,
platforms: ['desktop', 'ios'],
description: 'Maintenance window',
updatedAt: '2026-02-16T00:00:00Z',
}],
});
const res = await makeGet();

62
dashboards/admin-web/src/__tests__/motion.test.tsx
View File

@ -1,62 +0,0 @@
// @vitest-environment happy-dom
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { Reveal, StaggerList } from '@bytelyst/motion';
/**
* UX-5 — motion guard. The shared motion primitives must end fully visible
* (no element stranded at opacity:0, which would trip contrast / a11y) and
* must render all their content. We assert the reduced-motion / disabled path
* (what `prefers-reduced-motion` users and SSR-stable snapshots get).
*/
describe('motion primitives stay visible + render content', () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
true;
container = document.createElement('div');
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
it('Reveal renders its child and resolves to visible (opacity 1)', () => {
act(() => {
root.render(
<Reveal disableMotion from="up">
<span>Revealed content</span>
</Reveal>
);
});
const el = container.querySelector('[data-testid="bl-reveal"]') as HTMLElement | null;
expect(el).toBeTruthy();
expect(el!.getAttribute('data-visible')).toBe('true');
expect(el!.style.opacity).toBe('1');
expect(container.textContent).toContain('Revealed content');
});
it('StaggerList renders every child, each visible', () => {
act(() => {
root.render(
<StaggerList disableMotion from="up">
<div>alpha</div>
<div>beta</div>
<div>gamma</div>
</StaggerList>
);
});
const reveals = container.querySelectorAll('[data-testid="bl-reveal"]');
expect(reveals.length).toBe(3);
reveals.forEach(r => expect(r.getAttribute('data-visible')).toBe('true'));
expect(container.textContent).toContain('alpha');
expect(container.textContent).toContain('beta');
expect(container.textContent).toContain('gamma');
});
});

87
dashboards/admin-web/src/__tests__/ops-cockpit.test.ts
View File

@ -1,87 +0,0 @@
import { describe, expect, it } from 'vitest';
import { buildOpsCockpit } from '@/lib/ops-cockpit';
describe('buildOpsCockpit', () => {
it('prioritizes down restartable services and degraded cache health for the operator', () => {
const cockpit = buildOpsCockpit({
status: {
overall: 'critical',
timestamp: '2026-05-30T00:00:00Z',
services: [
{
id: 'admin-web',
name: 'Admin Web',
group: 'dashboards',
target: 'http://127.0.0.1:3001',
status: 'healthy',
latency: 42,
lastChecked: '2026-05-30T00:00:00Z',
},
{
id: 'freellmapi',
name: 'FreeLLMAPI',
group: 'llm',
target: 'http://127.0.0.1:3001/v1',
status: 'down',
latency: 900,
message: 'connection refused',
lastChecked: '2026-05-30T00:00:00Z',
},
],
},
inventory: {
timestamp: '2026-05-30T00:00:00Z',
counts: { services: 2, healthy: 1, degraded: 0, down: 1, hostTools: 2 },
services: [
{
id: 'freellmapi',
name: 'FreeLLMAPI',
group: 'llm',
target: 'http://127.0.0.1:3001/v1',
status: 'down',
latency: 900,
description: 'Local LLM fallback gateway',
management: 'vm',
exposure: 'internal',
restartable: true,
lastChecked: '2026-05-30T00:00:00Z',
},
],
hostTools: [],
},
valkey: {
timestamp: '2026-05-30T00:00:00Z',
pattern: '*',
limit: 25,
summary: {
ping: 'PONG',
dbsize: 123,
matchedKeys: 25,
version: '7.2',
usedMemoryHuman: '1M',
usedMemoryPeakHuman: '8M',
},
keys: [],
},
});
expect(cockpit.headline).toContain('Critical');
expect(cockpit.priorityActions[0]).toMatchObject({
serviceId: 'freellmapi',
action: 'Restart service',
severity: 'critical',
});
expect(cockpit.tiles).toContainEqual(
expect.objectContaining({ label: 'Restartable issues', value: '1' })
);
});
it('returns a calm checklist when everything is healthy', () => {
const cockpit = buildOpsCockpit({ status: null, inventory: null, valkey: null });
expect(cockpit.headline).toBe('Waiting for live ops telemetry');
expect(cockpit.priorityActions).toHaveLength(1);
expect(cockpit.priorityActions[0].action).toBe('Refresh telemetry');
});
});

66
dashboards/admin-web/src/__tests__/page-chrome.test.tsx
View File

@ -1,66 +0,0 @@
// @vitest-environment happy-dom
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
// error.tsx fires telemetry on mount — stub it so the chrome can render in isolation.
vi.mock('@/lib/telemetry', () => ({ trackEvent: vi.fn() }));
import GlobalError from '@/app/error';
import NotFound from '@/app/not-found';
import DashboardLoading from '@/app/(dashboard)/loading';
/**
* UX-4 — page-chrome adoption guard. Verifies admin's error / not-found /
* loading surfaces render the shared `@bytelyst/dashboard-components` chrome
* and that the error retry handler is wired to Next's `reset`.
*/
describe('page chrome (dashboard-components)', () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
true;
container = document.createElement('div');
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
});
it('error.tsx renders ErrorPage with the message and a working retry', () => {
const reset = vi.fn();
act(() => {
root.render(
<GlobalError error={Object.assign(new Error('kaboom'), { digest: 'd1' })} reset={reset} />
);
});
expect(container.textContent).toContain('Something went wrong');
expect(container.textContent).toContain('kaboom');
const retry = Array.from(container.querySelectorAll('button')).find(b =>
/try again|retry/i.test(b.textContent ?? '')
);
expect(retry).toBeTruthy();
act(() => retry!.dispatchEvent(new MouseEvent('click', { bubbles: true })));
expect(reset).toHaveBeenCalledTimes(1);
});
it('not-found.tsx renders the NotFoundPage chrome', () => {
act(() => {
root.render(<NotFound />);
});
expect(container.querySelector('a[href="/"]')).toBeTruthy();
});
it('loading.tsx renders an accessible LoadingSpinner', () => {
act(() => {
root.render(<DashboardLoading />);
});
expect(container.querySelector('[role="status"]')).toBeTruthy();
});
});

65
dashboards/admin-web/src/__tests__/primitives-exports.test.ts
View File

@ -1,65 +0,0 @@
import { describe, expect, it } from 'vitest';
import * as Primitives from '@/components/ui/Primitives';
/**
* UX-1 — Primitives export-presence guard.
*
* `src/components/ui/Primitives.tsx` is the single sanctioned adapter for the
* shared `@bytelyst/ui` layer (enforced by the `no-restricted-imports` ratchet
* in `eslint.config.mjs`). If a re-export silently disappears, every consumer
* breaks at build time — this test fails fast instead, and documents the
* surface the rest of admin-web is allowed to rely on.
*/
// Product-specific component implementations + helpers defined locally.
const LOCAL_EXPORTS = [
'Button',
'IconButton',
'Input',
'Select',
'Textarea',
'Badge',
'ProductStatusBadge',
'statusToneFor',
] as const;
// Shared `@bytelyst/ui` primitives re-exported through the adapter.
const SHARED_REEXPORTS = [
'ActionMenu',
'AlertBanner',
'DataList',
'DataTable',
'Drawer',
'EmptyState',
'EntityCard',
'Field',
'FieldLabel',
'FilterBar',
'FormSection',
'MetricCard',
'Modal',
'PageHeader',
'Panel',
'PanelHeader',
'PanelTitle',
'Skeleton',
'Timeline',
'Toolbar',
] as const;
describe('Primitives adapter exports', () => {
it.each(LOCAL_EXPORTS)('exposes local export %s', name => {
expect(Primitives[name as keyof typeof Primitives]).toBeDefined();
});
it.each(SHARED_REEXPORTS)('re-exports shared @bytelyst/ui primitive %s', name => {
expect(Primitives[name as keyof typeof Primitives]).toBeDefined();
});
it('maps product statuses to a known tone (helper is wired)', () => {
expect(Primitives.statusToneFor('active')).toBe('success');
expect(Primitives.statusToneFor('failed')).toBe('error');
expect(Primitives.statusToneFor(null)).toBe('neutral');
expect(Primitives.statusToneFor('totally-unknown')).toBe('neutral');
});
});

82
dashboards/admin-web/src/__tests__/product-context.test.tsx
View File

@ -1,82 +0,0 @@
// @vitest-environment happy-dom
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { ProductProvider, useProduct } from '@/lib/product-context';
function ProductProbe() {
const { productId, productName, setProductId } = useProduct();
return (
<div>
<output data-testid="product-id">{productId}</output>
<output data-testid="product-name">{productName}</output>
<button type="button" onClick={() => setProductId('nomgap')}>
Switch to NomGap
</button>
</div>
);
}
describe('ProductProvider', () => {
let container: HTMLDivElement;
let root: Root;
beforeEach(() => {
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
true;
localStorage.clear();
container = document.createElement('div');
document.body.appendChild(container);
root = createRoot(container);
});
afterEach(() => {
act(() => root.unmount());
container.remove();
localStorage.clear();
});
it('persists changes and emits a same-tab product-changed event', () => {
let eventCount = 0;
window.addEventListener('admin:product-changed', () => {
eventCount += 1;
});
act(() => {
root.render(
<ProductProvider>
<ProductProbe />
</ProductProvider>
);
});
act(() => {
container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
});
expect(container.querySelector('[data-testid="product-id"]')?.textContent).toBe('nomgap');
expect(container.querySelector('[data-testid="product-name"]')?.textContent).toBe('NomGap');
expect(localStorage.getItem('admin_selected_product')).toBe('nomgap');
expect(eventCount).toBe(1);
});
it('syncs provider state when another admin component updates localStorage', () => {
act(() => {
root.render(
<ProductProvider>
<ProductProbe />
</ProductProvider>
);
});
act(() => {
localStorage.setItem('admin_selected_product', 'mindlyst');
window.dispatchEvent(new Event('admin:product-changed'));
});
expect(container.querySelector('[data-testid="product-id"]')?.textContent).toBe('mindlyst');
expect(container.querySelector('[data-testid="product-name"]')?.textContent).toBe('MindLyst');
});
});

61
dashboards/admin-web/src/__tests__/token-bridge.test.ts
View File

@ -1,61 +0,0 @@
import { readFileSync } from 'node:fs';
import { join } from 'node:path';
import { describe, expect, it } from 'vitest';
/**
* UX-1 / CC.2 / CC.3 guard for the `--bl-*` → admin-OKLCH token bridge.
*
* Dark-mode parity is *inherited*: every bridged `--bl-*` token must resolve to
* an admin shadcn `--*` var (or a `color-mix` of one), which already flips
* between `:root` and `.dark`. This test pins that contract so a future edit
* can't silently hardcode a one-mode literal (which would break `.dark` parity
* and violate the zero-new-color-literals rule).
*/
const css = readFileSync(join(__dirname, '..', 'app', 'globals.css'), 'utf8');
// Isolate the UX-1 bridge block.
const bridge = css.slice(css.indexOf('@bytelyst/ui token bridge'));
const REQUIRED_MAPPINGS: Array<[string, string]> = [
['--bl-bg-canvas', 'var(--background)'],
['--bl-surface-card', 'var(--card)'],
['--bl-surface-muted', 'var(--muted)'],
['--bl-text-primary', 'var(--foreground)'],
['--bl-text-secondary', 'var(--muted-foreground)'],
['--bl-border', 'var(--border)'],
['--bl-input', 'var(--input)'],
['--bl-accent', 'var(--primary)'],
['--bl-accent-foreground', 'var(--primary-foreground)'],
['--bl-danger', 'var(--destructive)'],
['--bl-focus-ring', 'var(--ring)'],
];
describe('--bl-* token bridge (dark-mode parity)', () => {
it.each(REQUIRED_MAPPINGS)(
'maps %s to %s (an admin var that flips under .dark)',
(token, target) => {
const re = new RegExp(`${token}\\s*:\\s*${target.replace(/[()]/g, '\\$&')}\\s*;`);
expect(re.test(bridge)).toBe(true);
}
);
it('introduces no raw color literals in the bridge (only var()/color-mix tokens)', () => {
// Strip CSS comments, then look for hex / oklch / hsl / rgb literals.
const code = bridge.replace(/\/\*[\s\S]*?\*\//g, '');
expect(/#[0-9a-fA-F]{3,8}\b/.test(code)).toBe(false);
expect(/\boklch\(/.test(code)).toBe(false);
expect(/\bhsl\(/.test(code)).toBe(false);
expect(/\brgb\(/.test(code)).toBe(false);
});
it('every bridged --bl-* value references an admin var', () => {
// Each `--bl-foo: <value>;` line inside the bridge must contain `var(--`.
const declRe = /(--bl-[a-z0-9-]+)\s*:\s*([^;]+);/g;
let m: RegExpExecArray | null;
const offenders: string[] = [];
while ((m = declRe.exec(bridge))) {
if (!m[2].includes('var(--')) offenders.push(`${m[1]}: ${m[2].trim()}`);
}
expect(offenders).toEqual([]);
});
});

23
dashboards/admin-web/src/app/(dashboard)/extraction/page.tsx
View File

@ -138,7 +138,7 @@ export default function ExtractionPage() {
}
}, [inputText, selectedTask]);
const currentTask = tasks.find(t => t.id === selectedTask);
const currentTask = tasks.find((t) => t.id === selectedTask);
// Group extractions by class
const groupedExtractions = result?.extractions.reduce(
@ -148,7 +148,7 @@ export default function ExtractionPage() {
acc[cls].push(e);
return acc;
},
{} as Record<string, ExtractionEntity[]>
{} as Record<string, ExtractionEntity[]>,
);
return (
@ -189,7 +189,7 @@ export default function ExtractionPage() {
className="w-full min-h-[200px] rounded-lg border border-border bg-background p-3 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-ring"
placeholder="Paste a transcript, meeting notes, or any text to extract structured entities from..."
value={inputText}
onChange={e => setInputText(e.target.value)}
onChange={(e) => setInputText(e.target.value)}
/>
<div className="flex items-center gap-2">
<Button onClick={handleExtract} disabled={loading || !inputText.trim()}>
@ -212,10 +212,10 @@ export default function ExtractionPage() {
<select
className="w-full rounded-lg border border-border bg-background p-2 text-sm"
value={selectedTask}
onChange={e => setSelectedTask(e.target.value)}
onChange={(e) => setSelectedTask(e.target.value)}
>
{tasks.length > 0 ? (
tasks.map(t => (
tasks.map((t) => (
<option key={t.id} value={t.id}>
{t.name} {t.builtIn ? '(built-in)' : ''}
</option>
@ -249,7 +249,7 @@ export default function ExtractionPage() {
<CardContent className="pt-4 space-y-2 text-xs">
<p className="text-muted-foreground">{currentTask.description}</p>
<div className="flex flex-wrap gap-1">
{currentTask.classes.map(cls => (
{currentTask.classes.map((cls) => (
<Badge
key={cls}
variant="outline"
@ -365,7 +365,11 @@ export default function ExtractionPage() {
{e.attributes && Object.keys(e.attributes).length > 0 && (
<div className="mt-1 flex flex-wrap gap-1">
{Object.entries(e.attributes).map(([k, v]) => (
<Badge key={k} variant="secondary" className="text-[10px]">
<Badge
key={k}
variant="secondary"
className="text-[10px]"
>
{k}: {v}
</Badge>
))}
@ -396,10 +400,7 @@ export default function ExtractionPage() {
{result.extractions.map((e, i) => (
<TableRow key={i}>
<TableCell>
<Badge
variant="outline"
className={`text-xs ${getClassColor(e.extraction_class)}`}
>
<Badge variant="outline" className={`text-xs ${getClassColor(e.extraction_class)}`}>
{e.extraction_class}
</Badge>
</TableCell>

34
dashboards/admin-web/src/app/(dashboard)/flags/page.tsx
View File

@ -1,7 +1,14 @@
'use client';
import { useState, useEffect } from 'react';
import { Flag, Plus, Loader2, Trash2, ToggleLeft, ToggleRight } from 'lucide-react';
import {
Flag,
Plus,
Loader2,
Trash2,
ToggleLeft,
ToggleRight,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@ -76,10 +83,7 @@ export default function FlagsPage() {
enabled: form.enabled,
percentage: form.percentage,
platforms: form.platforms
? form.platforms
.split(',')
.map(s => s.trim())
.filter(Boolean)
? form.platforms.split(',').map(s => s.trim()).filter(Boolean)
: [],
}),
});
@ -247,7 +251,9 @@ export default function FlagsPage() {
<div>
<CardTitle className="text-sm font-mono">{flag.key}</CardTitle>
{flag.description && (
<p className="text-xs text-muted-foreground mt-0.5">{flag.description}</p>
<p className="text-xs text-muted-foreground mt-0.5">
{flag.description}
</p>
)}
</div>
</div>
@ -278,9 +284,19 @@ export default function FlagsPage() {
</CardHeader>
<CardContent className="pt-0">
<div className="flex items-center gap-4 text-xs text-muted-foreground">
{flag.platforms.length > 0 && <span>Platforms: {flag.platforms.join(', ')}</span>}
{flag.segments.length > 0 && <span>Segments: {flag.segments.join(', ')}</span>}
<span>Updated {new Date(flag.updatedAt).toLocaleDateString()}</span>
{flag.platforms.length > 0 && (
<span>
Platforms: {flag.platforms.join(', ')}
</span>
)}
{flag.segments.length > 0 && (
<span>
Segments: {flag.segments.join(', ')}
</span>
)}
<span>
Updated {new Date(flag.updatedAt).toLocaleDateString()}
</span>
</div>
{flag.enabled && (
<div className="mt-3 flex items-center gap-3">

19
dashboards/admin-web/src/app/(dashboard)/layout.tsx
View File

@ -1,9 +1,7 @@
'use client';
import { CommandRegistryProvider } from '@bytelyst/command-palette';
import { SidebarNav } from '@/components/sidebar-nav';
import { AuthGuard } from '@/components/auth-guard';
import { CommandMenu } from '@/components/command-menu';
import { ErrorBoundary } from '@/components/error-boundary';
import { useStripeConfig } from '@/lib/stripe-context';
import { FlaskConical, ShieldCheck } from 'lucide-react';
@ -34,16 +32,13 @@ function StripeModeBanner() {
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
<AuthGuard>
<CommandRegistryProvider>
<SidebarNav />
<main className="ml-64 min-h-screen bg-background max-md:ml-0">
<StripeModeBanner />
<div className="p-8 max-md:p-4">
<ErrorBoundary>{children}</ErrorBoundary>
</div>
</main>
<CommandMenu />
</CommandRegistryProvider>
<SidebarNav />
<main className="ml-64 min-h-screen bg-background max-md:ml-0">
<StripeModeBanner />
<div className="p-8 max-md:p-4">
<ErrorBoundary>{children}</ErrorBoundary>
</div>
</main>
</AuthGuard>
);
}

26
dashboards/admin-web/src/app/(dashboard)/licenses/page.tsx
View File

@ -1,7 +1,17 @@
'use client';
import { useState } from 'react';
import { Key, Search, Plus, Copy, Check, Loader2, Monitor, Smartphone, X } from 'lucide-react';
import {
Key,
Search,
Plus,
Copy,
Check,
Loader2,
Monitor,
Smartphone,
X,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@ -121,7 +131,9 @@ export default function LicensesPage() {
body: JSON.stringify({ key, action: 'revoke' }),
});
if (res.ok) {
setLicenses(prev => prev.map(l => (l.key === key ? { ...l, status: 'revoked' } : l)));
setLicenses(prev =>
prev.map(l => (l.key === key ? { ...l, status: 'revoked' } : l))
);
}
} catch {
// ignore
@ -208,7 +220,11 @@ export default function LicensesPage() {
<code className="text-sm font-mono font-bold text-emerald-800 dark:text-emerald-200">
{generatedKey}
</code>
<Button variant="ghost" size="sm" onClick={() => copyToClipboard(generatedKey)}>
<Button
variant="ghost"
size="sm"
onClick={() => copyToClipboard(generatedKey)}
>
{copiedKey === generatedKey ? (
<Check className="h-4 w-4 text-emerald-600" />
) : (
@ -355,7 +371,9 @@ export default function LicensesPage() {
))}
</div>
) : (
<p className="text-xs text-muted-foreground italic">No devices activated yet</p>
<p className="text-xs text-muted-foreground italic">
No devices activated yet
</p>
)}
</CardContent>
</Card>

4
dashboards/admin-web/src/app/(dashboard)/loading.tsx
View File

@ -1,4 +1,4 @@
import { LoadingSpinner } from '@bytelyst/dashboard-components';
import { Loader2 } from 'lucide-react';
export default function DashboardLoading() {
return (
@ -29,7 +29,7 @@ export default function DashboardLoading() {
<div key={i} className="rounded-xl border bg-card p-6">
<div className="mb-4 h-5 w-36 animate-pulse rounded bg-muted" />
<div className="flex items-center justify-center h-64">
<LoadingSpinner size="md" />
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
</div>
))}

49
dashboards/admin-web/src/app/(dashboard)/notifications/page.tsx
View File

@ -1,7 +1,16 @@
'use client';
import { useState } from 'react';
import { Bell, Search, Loader2, Monitor, Smartphone, Tablet, Check, X } from 'lucide-react';
import {
Bell,
Search,
Loader2,
Monitor,
Smartphone,
Tablet,
Check,
X,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
@ -77,9 +86,7 @@ export default function NotificationsPage() {
<Card>
<CardHeader>
<CardTitle className="text-base">Look Up User</CardTitle>
<CardDescription>
Search by user ID to view their devices and notification preferences
</CardDescription>
<CardDescription>Search by user ID to view their devices and notification preferences</CardDescription>
</CardHeader>
<CardContent>
<div className="flex gap-2">
@ -115,17 +122,11 @@ export default function NotificationsPage() {
<div className="flex items-center gap-2">
<span className="text-muted-foreground">Push:</span>
{prefs.pushEnabled ? (
<Badge
variant="secondary"
className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400"
>
<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
<Check className="mr-1 h-3 w-3" /> Enabled
</Badge>
) : (
<Badge
variant="secondary"
className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
>
<Badge variant="secondary" className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
<X className="mr-1 h-3 w-3" /> Disabled
</Badge>
)}
@ -133,17 +134,11 @@ export default function NotificationsPage() {
<div className="flex items-center gap-2">
<span className="text-muted-foreground">Email:</span>
{prefs.emailEnabled ? (
<Badge
variant="secondary"
className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400"
>
<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
<Check className="mr-1 h-3 w-3" /> Enabled
</Badge>
) : (
<Badge
variant="secondary"
className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400"
>
<Badge variant="secondary" className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
<X className="mr-1 h-3 w-3" /> Disabled
</Badge>
)}
@ -172,7 +167,9 @@ export default function NotificationsPage() {
{/* Devices */}
<Card>
<CardHeader>
<CardTitle className="text-base">Registered Devices ({devices.length})</CardTitle>
<CardTitle className="text-base">
Registered Devices ({devices.length})
</CardTitle>
</CardHeader>
<CardContent>
{devices.length === 0 ? (
@ -208,17 +205,11 @@ export default function NotificationsPage() {
</div>
</div>
{device.pushToken ? (
<Badge
variant="secondary"
className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-[10px]"
>
<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-[10px]">
Push token
</Badge>
) : (
<Badge
variant="secondary"
className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 text-[10px]"
>
<Badge variant="secondary" className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 text-[10px]">
No push token
</Badge>
)}

99
dashboards/admin-web/src/app/(dashboard)/ops/client-logs/page.tsx
View File

@ -1,7 +1,16 @@
'use client';
import { useEffect, useState, useCallback, useMemo } from 'react';
import { BarChart } from '@/components/charts';
import {
BarChart,
Bar,
XAxis,
YAxis,
Tooltip,
ResponsiveContainer,
CartesianGrid,
Legend,
} from 'recharts';
import {
AlertTriangle,
Bug,
@ -198,29 +207,34 @@ function ClusterTimelineChart({ clusters }: { clusters: TelemetryCluster[] }) {
<Card className="mb-4">
<CardHeader className="pb-2">
<CardTitle className="text-sm">Cluster Occurrence Timeline</CardTitle>
<CardDescription>
Total events per day over the last 14 days, colored by the day&apos;s most severe level
(fatal / error / warn)
</CardDescription>
<CardDescription>Error counts by severity over the last 14 days</CardDescription>
</CardHeader>
<CardContent>
<BarChart
data={chartData.map((d, i) => ({
id: d.date,
value: d.fatal + d.error + d.warn,
label: i % 3 === 0 ? d.date.slice(5) : '',
color:
d.fatal > 0
? 'var(--bl-danger)'
: d.error > 0
? 'var(--chart-5)'
: 'var(--bl-warning)',
}))}
width={720}
height={200}
className="h-auto w-full"
ariaLabel="Total telemetry cluster occurrences per day over the last 14 days"
/>
<ResponsiveContainer width="100%" height={200}>
<BarChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis dataKey="date" tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
<YAxis tick={{ fontSize: 11 }} stroke="hsl(var(--muted-foreground))" />
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--card))',
border: '1px solid hsl(var(--border))',
borderRadius: '8px',
fontSize: 12,
}}
/>
<Legend wrapperStyle={{ fontSize: 12 }} />
<Bar dataKey="fatal" stackId="a" fill="hsl(var(--destructive))" name="Fatal" />
<Bar dataKey="error" stackId="a" fill="hsl(var(--chart-5))" name="Error" />
<Bar
dataKey="warn"
stackId="a"
fill="hsl(var(--chart-4))"
name="Warn"
radius={[2, 2, 0, 0]}
/>
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
);
@ -972,17 +986,36 @@ export default function ClientLogsPage() {
</p>
) : (
<div className="space-y-4">
<BarChart
data={geoData.map(g => ({
id: g.countryCode,
value: g.count,
label: g.countryCode,
}))}
width={720}
height={240}
className="h-auto w-full"
ariaLabel="Telemetry events by country over the last 7 days"
/>
<ResponsiveContainer width="100%" height={Math.max(200, geoData.length * 32)}>
<BarChart data={geoData} layout="vertical" margin={{ left: 40, right: 20 }}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis
type="number"
tick={{ fontSize: 11 }}
stroke="hsl(var(--muted-foreground))"
/>
<YAxis
type="category"
dataKey="countryCode"
tick={{ fontSize: 12 }}
width={50}
stroke="hsl(var(--muted-foreground))"
/>
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--card))',
border: '1px solid hsl(var(--border))',
borderRadius: '8px',
fontSize: 12,
}}
formatter={(value: number | undefined) => [
(value ?? 0).toLocaleString(),
'Events',
]}
/>
<Bar dataKey="count" fill="hsl(var(--primary))" radius={[0, 4, 4, 0]} />
</BarChart>
</ResponsiveContainer>
<Table>
<TableHeader>
<TableRow>

81
dashboards/admin-web/src/app/(dashboard)/ops/page.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import {
Activity,
CheckCircle,
@ -13,7 +13,6 @@ import {
ServerCog,
ShieldAlert,
} from 'lucide-react';
import { buildOpsCockpit } from '@/lib/ops-cockpit';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
@ -272,35 +271,6 @@ export default function OpsPage() {
return 'text-red-500';
};
const cockpit = useMemo(
() => buildOpsCockpit({ status: data, inventory, valkey }),
[data, inventory, valkey]
);
const getTileColor = (tone: string) => {
switch (tone) {
case 'success':
return 'text-green-600';
case 'warning':
return 'text-yellow-600';
case 'danger':
return 'text-red-600';
default:
return 'text-muted-foreground';
}
};
const getActionColor = (severity: string) => {
switch (severity) {
case 'critical':
return 'border-red-200 bg-red-50 text-red-900 dark:border-red-900/50 dark:bg-red-950/20 dark:text-red-100';
case 'warning':
return 'border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-100';
default:
return 'border-border bg-muted/40';
}
};
return (
<div className="flex-1 space-y-4 p-8 pt-6">
<div className="flex items-center justify-between space-y-2">
@ -340,55 +310,6 @@ export default function OpsPage() {
</Card>
)}
<Card>
<CardHeader>
<CardTitle>Operator Cockpit</CardTitle>
<CardDescription>{cockpit.headline}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground">{cockpit.summary}</p>
<div className="grid gap-3 md:grid-cols-3">
{cockpit.tiles.map(tile => (
<div key={tile.label} className="rounded-lg border p-4">
<div className="text-sm text-muted-foreground">{tile.label}</div>
<div className={`mt-1 text-2xl font-bold ${getTileColor(tile.tone)}`}>
{tile.value}
</div>
<div className="mt-1 text-xs text-muted-foreground">{tile.detail}</div>
</div>
))}
</div>
<div className="space-y-2">
<div className="text-sm font-medium">Next safe actions</div>
{cockpit.priorityActions.map((action, index) => (
<div
key={`${action.action}-${action.serviceId ?? index}`}
className={`flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between ${getActionColor(action.severity)}`}
>
<div>
<div className="font-medium">{action.action}</div>
<div className="text-sm opacity-80">{action.detail}</div>
</div>
{action.serviceId && (
<Button
size="sm"
variant="outline"
onClick={() => restartService(action.serviceId!)}
disabled={pendingRestart === action.serviceId}
>
{pendingRestart === action.serviceId ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
'Restart'
)}
</Button>
)}
</div>
))}
</div>
</CardContent>
</Card>
<div className="flex gap-2 border-b">
{[
{ id: 'overview', label: 'Overview', icon: Activity },

14
dashboards/admin-web/src/app/(dashboard)/ops/secrets/page.tsx
View File

@ -221,7 +221,9 @@ export default function SecretsPage() {
<div className="flex items-center justify-between">
<div>
<h2 className="text-3xl font-bold tracking-tight">Secrets Manager</h2>
{vaultUrl && <p className="text-sm text-muted-foreground mt-1 font-mono">{vaultUrl}</p>}
{vaultUrl && (
<p className="text-sm text-muted-foreground mt-1 font-mono">{vaultUrl}</p>
)}
</div>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={fetchSecrets} disabled={loading}>
@ -421,11 +423,7 @@ export default function SecretsPage() {
className="h-7 w-7"
onClick={() => setShowValue(!showValue)}
>
{showValue ? (
<EyeOff className="h-3.5 w-3.5" />
) : (
<Eye className="h-3.5 w-3.5" />
)}
{showValue ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
</Button>
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleCopy}>
{copied ? (
@ -547,8 +545,8 @@ export default function SecretsPage() {
<DialogTitle className="text-red-500">Delete Secret</DialogTitle>
<DialogDescription>
Are you sure you want to delete{' '}
<span className="font-mono font-bold">{deleteTarget}</span>? This will soft-delete the
secret in Azure Key Vault. It can be recovered within the retention period.
<span className="font-mono font-bold">{deleteTarget}</span>? This will soft-delete
the secret in Azure Key Vault. It can be recovered within the retention period.
</DialogDescription>
</DialogHeader>
<DialogFooter>

53
dashboards/admin-web/src/app/(dashboard)/ops/telemetry-policies/page.tsx
View File

@ -84,11 +84,7 @@ export default function TelemetryPoliciesPage() {
const [formPercentage, setFormPercentage] = useState(100);
const [formStartsAt, setFormStartsAt] = useState('');
const [formExpiresAt, setFormExpiresAt] = useState('');
const [preview, setPreview] = useState<{
matchedClients: number;
totalClients: number;
sampleSize: number;
} | null>(null);
const [preview, setPreview] = useState<{ matchedClients: number; totalClients: number; sampleSize: number } | null>(null);
const [previewLoading, setPreviewLoading] = useState(false);
const fetchPolicies = useCallback(async () => {
@ -158,12 +154,7 @@ export default function TelemetryPoliciesPage() {
enabled: formEnabled,
priority: formPriority,
eventTypes: formEventTypes,
modules: formModules
? formModules
.split(',')
.map(m => m.trim())
.filter(Boolean)
: [],
modules: formModules ? formModules.split(',').map(m => m.trim()).filter(Boolean) : [],
samplingRate: formSamplingRate,
targeting: {
platforms: formPlatforms.length > 0 ? formPlatforms : undefined,
@ -222,7 +213,11 @@ export default function TelemetryPoliciesPage() {
}
};
const toggleArrayItem = (arr: string[], item: string, setter: (v: string[]) => void) => {
const toggleArrayItem = (
arr: string[],
item: string,
setter: (v: string[]) => void
) => {
setter(arr.includes(item) ? arr.filter(x => x !== item) : [...arr, item]);
};
@ -476,15 +471,12 @@ export default function TelemetryPoliciesPage() {
targeting: {
platforms: formPlatforms.length > 0 ? formPlatforms : undefined,
channels: formChannels.length > 0 ? formChannels : undefined,
releaseChannels:
formReleaseChannels.length > 0 ? formReleaseChannels : undefined,
releaseChannels: formReleaseChannels.length > 0 ? formReleaseChannels : undefined,
},
}),
});
if (res.ok) setPreview(await res.json());
} catch {
/* best effort */
} finally {
} catch { /* best effort */ } finally {
setPreviewLoading(false);
}
}}
@ -496,8 +488,7 @@ export default function TelemetryPoliciesPage() {
<span className="text-sm">
<strong className="text-primary">{preview.matchedClients}</strong>
<span className="text-muted-foreground">
{' '}
/ {preview.totalClients} clients would match
{' '}/ {preview.totalClients} clients would match
</span>
<span className="text-xs text-muted-foreground ml-1">
(from {preview.sampleSize} recent events)
@ -590,7 +581,9 @@ export default function TelemetryPoliciesPage() {
<div>
<p className="font-medium">{policy.name}</p>
{policy.description && (
<p className="text-xs text-muted-foreground">{policy.description}</p>
<p className="text-xs text-muted-foreground">
{policy.description}
</p>
)}
</div>
</TableCell>
@ -632,9 +625,13 @@ export default function TelemetryPoliciesPage() {
</div>
</TableCell>
<TableCell className="text-xs text-muted-foreground">
{policy.startsAt ? new Date(policy.startsAt).toLocaleDateString() : '—'}
{policy.startsAt
? new Date(policy.startsAt).toLocaleDateString()
: '—'}
{' → '}
{policy.expiresAt ? new Date(policy.expiresAt).toLocaleDateString() : '∞'}
{policy.expiresAt
? new Date(policy.expiresAt).toLocaleDateString()
: '∞'}
</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-1">
@ -650,10 +647,18 @@ export default function TelemetryPoliciesPage() {
<ToggleLeft className="h-4 w-4" />
)}
</Button>
<Button variant="ghost" size="sm" onClick={() => openEditForm(policy)}>
<Button
variant="ghost"
size="sm"
onClick={() => openEditForm(policy)}
>
<Pencil className="h-4 w-4" />
</Button>
<Button variant="ghost" size="sm" onClick={() => handleDelete(policy.id)}>
<Button
variant="ghost"
size="sm"
onClick={() => handleDelete(policy.id)}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>

170
dashboards/admin-web/src/app/(dashboard)/page.tsx
View File

@ -12,7 +12,6 @@ import {
ArrowDownRight,
RefreshCw,
Cpu,
AlertCircle,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
@ -35,10 +34,17 @@ import {
type ApiUsageRecord,
type RevenueAnalytics,
} from '@/lib/api';
import { PageHeader } from '@bytelyst/dashboard-components';
import { Reveal, StaggerList } from '@bytelyst/motion';
import { AreaChart, BarChart } from '@/components/charts';
import { seriesValues, dateBars } from '@/lib/chart-data';
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
BarChart,
Bar,
} from 'recharts';
function buildKpiCards(stats: typeof mockSummaryStats, revenue?: RevenueAnalytics | null) {
const fmt = (n: number) => (n >= 0 ? `+${n}%` : `${n}%`);
@ -219,7 +225,6 @@ export default function DashboardPage() {
const [revenue, setRevenue] = useState<RevenueAnalytics | null>(null);
const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [loadError, setLoadError] = useState<string | null>(null);
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
const fetchData = useCallback(async (isRefresh = false) => {
@ -232,29 +237,15 @@ export default function DashboardPage() {
apiGetRevenueAnalytics(6),
]);
let successfulSections = 0;
const failures: string[] = [];
if (statsRes.status === 'fulfilled' && statsRes.value.data) {
successfulSections += 1;
setStats(prev => mergeApiStats(prev, statsRes.value.data!));
} else {
failures.push('dashboard stats');
}
if (usageRes.status === 'fulfilled' && usageRes.value.data?.records?.length) {
successfulSections += 1;
const metrics = usageRecordsToDailyMetrics(usageRes.value.data.records);
setDailyMetrics(metrics);
setModelUsage(buildModelUsage(usageRes.value.data.records));
} else if (usageRes.status === 'fulfilled' && usageRes.value.data) {
successfulSections += 1;
setDailyMetrics([]);
setModelUsage([]);
} else {
failures.push('usage');
}
if (usersRes.status === 'fulfilled' && usersRes.value.data?.users?.length) {
successfulSections += 1;
setRecentUsers(
usersRes.value.data.users
.sort((a, b) => b.lastActive.localeCompare(a.lastActive))
@ -272,22 +263,9 @@ export default function DashboardPage() {
monthlySpend: u.monthlySpend,
}))
);
} else if (usersRes.status === 'fulfilled' && usersRes.value.data) {
successfulSections += 1;
setRecentUsers([]);
} else {
failures.push('users');
}
if (revenueRes.status === 'fulfilled' && revenueRes.value.data) {
successfulSections += 1;
setRevenue(revenueRes.value.data);
} else {
failures.push('revenue');
}
if (successfulSections === 0) {
setLoadError(`Could not load ${failures.join(', ')}. Check the API connection and retry.`);
} else {
setLoadError(null);
}
setLastUpdated(new Date());
} finally {
@ -306,50 +284,24 @@ export default function DashboardPage() {
return (
<div className="space-y-8">
{/* Header */}
<div>
<PageHeader
title="Dashboard"
className="!mb-2"
actions={
<Button
variant="outline"
size="sm"
onClick={() => fetchData(true)}
disabled={refreshing}
>
<RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
Refresh
</Button>
}
/>
<p className="text-muted-foreground">
Platform overview and key metrics
{lastUpdated && (
<span className="ml-2 text-xs">
&middot; Updated {lastUpdated.toLocaleTimeString()}
</span>
)}
</p>
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
<p className="text-muted-foreground">
Platform overview and key metrics
{lastUpdated && (
<span className="ml-2 text-xs">
&middot; Updated {lastUpdated.toLocaleTimeString()}
</span>
)}
</p>
</div>
<Button variant="outline" size="sm" onClick={() => fetchData(true)} disabled={refreshing}>
<RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
Refresh
</Button>
</div>
{loadError && !loading && (
<Card className="border-destructive/40 bg-destructive/5">
<CardContent className="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
<div className="flex gap-3">
<AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-destructive" aria-hidden />
<div>
<h2 className="font-semibold text-destructive">Could not load dashboard</h2>
<p className="mt-1 text-sm text-muted-foreground">{loadError}</p>
</div>
</div>
<Button variant="outline" onClick={() => fetchData(true)} disabled={refreshing}>
<RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
Retry
</Button>
</CardContent>
</Card>
)}
{/* KPI Cards */}
{loading ? (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@ -358,12 +310,7 @@ export default function DashboardPage() {
))}
</div>
) : (
<StaggerList
as="div"
from="up"
stagger={50}
className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"
>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{kpiCards.map(card => (
<Card key={card.title} className="transition-shadow hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between pb-2">
@ -397,7 +344,7 @@ export default function DashboardPage() {
</CardContent>
</Card>
))}
</StaggerList>
</div>
)}
{/* Charts Row */}
@ -414,13 +361,32 @@ export default function DashboardPage() {
<CardTitle className="text-base">Daily Active Users (30 days)</CardTitle>
</CardHeader>
<CardContent>
<AreaChart
values={seriesValues(dailyMetrics, 'activeUsers')}
width={640}
height={280}
className="h-auto w-full"
ariaLabel="Daily active users over the last 30 days"
/>
<ResponsiveContainer width="100%" height={280}>
<AreaChart data={dailyMetrics}>
<defs>
<linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="hsl(var(--chart-1))" stopOpacity={0.3} />
<stop offset="95%" stopColor="hsl(var(--chart-1))" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
<YAxis className="text-xs" />
<Tooltip
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
<Area
type="monotone"
dataKey="activeUsers"
stroke="hsl(var(--chart-1))"
fill="url(#colorUsers)"
strokeWidth={2}
/>
</AreaChart>
</ResponsiveContainer>
</CardContent>
</Card>
@ -430,20 +396,28 @@ export default function DashboardPage() {
<CardTitle className="text-base">Daily Revenue (30 days)</CardTitle>
</CardHeader>
<CardContent>
<BarChart
data={dateBars(dailyMetrics, 'revenue')}
width={640}
height={280}
className="h-auto w-full"
ariaLabel="Daily revenue over the last 30 days"
/>
<ResponsiveContainer width="100%" height={280}>
<BarChart data={dailyMetrics}>
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
<YAxis className="text-xs" tickFormatter={v => `$${v}`} />
<Tooltip
formatter={value => formatCurrency(Number(value))}
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
<Bar dataKey="revenue" fill="hsl(var(--chart-2))" radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
</div>
)}
{/* Bottom Row: Model Usage + Recent Users */}
<Reveal from="up" className="grid gap-6 lg:grid-cols-2">
<div className="grid gap-6 lg:grid-cols-2">
{/* Model Usage */}
<Card>
<CardHeader>
@ -529,7 +503,7 @@ export default function DashboardPage() {
)}
</CardContent>
</Card>
</Reveal>
</div>
</div>
);
}

71
dashboards/admin-web/src/app/(dashboard)/products/page.tsx
View File

@ -124,16 +124,9 @@ export default function ProductsPage() {
const product = await res.json();
setCreateOpen(false);
setForm({
productId: '',
displayName: '',
licensePrefix: '',
packageName: '',
defaultPlan: 'free',
trialDays: '14',
websiteUrl: '',
deviceLimitFree: '1',
deviceLimitPro: '3',
deviceLimitEnterprise: '10',
productId: '', displayName: '', licensePrefix: '', packageName: '',
defaultPlan: 'free', trialDays: '14', websiteUrl: '',
deviceLimitFree: '1', deviceLimitPro: '3', deviceLimitEnterprise: '10',
});
// Auto-onboard: seed plans + kill_switch flag
await handleOnboard(product.productId);
@ -237,7 +230,9 @@ export default function ProductsPage() {
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold tracking-tight">Products</h1>
<p className="text-muted-foreground">Manage registered products in the platform</p>
<p className="text-muted-foreground">
Manage registered products in the platform
</p>
</div>
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
<DialogTrigger asChild>
@ -276,9 +271,7 @@ export default function ProductsPage() {
<Input
placeholder="PROD"
value={form.licensePrefix}
onChange={e =>
setForm({ ...form, licensePrefix: e.target.value.toUpperCase() })
}
onChange={e => setForm({ ...form, licensePrefix: e.target.value.toUpperCase() })}
/>
</div>
<div className="space-y-2">
@ -297,9 +290,7 @@ export default function ProductsPage() {
value={form.defaultPlan}
onValueChange={v => setForm({ ...form, defaultPlan: v as 'free' | 'pro' })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="free">Free</SelectItem>
<SelectItem value="pro">Pro</SelectItem>
@ -331,8 +322,7 @@ export default function ProductsPage() {
<div>
<p className="text-[10px] text-muted-foreground mb-1">Free</p>
<Input
type="number"
min={0}
type="number" min={0}
value={form.deviceLimitFree}
onChange={e => setForm({ ...form, deviceLimitFree: e.target.value })}
/>
@ -340,8 +330,7 @@ export default function ProductsPage() {
<div>
<p className="text-[10px] text-muted-foreground mb-1">Pro</p>
<Input
type="number"
min={0}
type="number" min={0}
value={form.deviceLimitPro}
onChange={e => setForm({ ...form, deviceLimitPro: e.target.value })}
/>
@ -349,8 +338,7 @@ export default function ProductsPage() {
<div>
<p className="text-[10px] text-muted-foreground mb-1">Enterprise</p>
<Input
type="number"
min={0}
type="number" min={0}
value={form.deviceLimitEnterprise}
onChange={e => setForm({ ...form, deviceLimitEnterprise: e.target.value })}
/>
@ -379,8 +367,7 @@ export default function ProductsPage() {
Product &quot;{onboardResult.productId}&quot; onboarded successfully
</p>
<p className="text-xs text-emerald-700 dark:text-emerald-300">
{onboardResult.plans} plans seeded
{onboardResult.flags > 0 ? `, ${onboardResult.flags} flag(s) created` : ''}
{onboardResult.plans} plans seeded{onboardResult.flags > 0 ? `, ${onboardResult.flags} flag(s) created` : ''}
</p>
</div>
</div>
@ -416,11 +403,7 @@ export default function ProductsPage() {
: 'bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400'
}
>
{p.status === 'active' ? (
<Check className="mr-1 h-3 w-3" />
) : (
<X className="mr-1 h-3 w-3" />
)}
{p.status === 'active' ? <Check className="mr-1 h-3 w-3" /> : <X className="mr-1 h-3 w-3" />}
{p.status}
</Badge>
<Button
@ -461,8 +444,7 @@ export default function ProductsPage() {
<div>{p.trialDays}</div>
<div className="text-muted-foreground">Device Limits</div>
<div>
Free: {p.deviceLimits.free} · Pro: {p.deviceLimits.pro} · Ent:{' '}
{p.deviceLimits.enterprise}
Free: {p.deviceLimits.free} · Pro: {p.deviceLimits.pro} · Ent: {p.deviceLimits.enterprise}
</div>
{p.websiteUrl && (
<>
@ -506,9 +488,7 @@ export default function ProductsPage() {
value={editForm.status ?? 'active'}
onValueChange={v => setEditForm({ ...editForm, status: v })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="active">Active</SelectItem>
<SelectItem value="disabled">Disabled</SelectItem>
@ -523,9 +503,7 @@ export default function ProductsPage() {
value={editForm.defaultPlan ?? 'free'}
onValueChange={v => setEditForm({ ...editForm, defaultPlan: v })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectTrigger><SelectValue /></SelectTrigger>
<SelectContent>
<SelectItem value="free">Free</SelectItem>
<SelectItem value="pro">Pro</SelectItem>
@ -535,9 +513,7 @@ export default function ProductsPage() {
<div className="space-y-2">
<Label>Trial Days</Label>
<Input
type="number"
min={0}
max={365}
type="number" min={0} max={365}
value={editForm.trialDays ?? '14'}
onChange={e => setEditForm({ ...editForm, trialDays: e.target.value })}
/>
@ -556,8 +532,7 @@ export default function ProductsPage() {
<div>
<p className="text-[10px] text-muted-foreground mb-1">Free</p>
<Input
type="number"
min={0}
type="number" min={0}
value={editForm.deviceLimitFree ?? '1'}
onChange={e => setEditForm({ ...editForm, deviceLimitFree: e.target.value })}
/>
@ -565,8 +540,7 @@ export default function ProductsPage() {
<div>
<p className="text-[10px] text-muted-foreground mb-1">Pro</p>
<Input
type="number"
min={0}
type="number" min={0}
value={editForm.deviceLimitPro ?? '3'}
onChange={e => setEditForm({ ...editForm, deviceLimitPro: e.target.value })}
/>
@ -574,12 +548,9 @@ export default function ProductsPage() {
<div>
<p className="text-[10px] text-muted-foreground mb-1">Enterprise</p>
<Input
type="number"
min={0}
type="number" min={0}
value={editForm.deviceLimitEnterprise ?? '10'}
onChange={e =>
setEditForm({ ...editForm, deviceLimitEnterprise: e.target.value })
}
onChange={e => setEditForm({ ...editForm, deviceLimitEnterprise: e.target.value })}
/>
</div>
</div>

11
dashboards/admin-web/src/app/(dashboard)/promos/page.tsx
View File

@ -30,13 +30,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import {
apiListPromos,
apiCreatePromo,
apiDeletePromo,
apiUpdatePromo,
type ApiPromo,
} from '@/lib/api';
import { apiListPromos, apiCreatePromo, apiDeletePromo, apiUpdatePromo, type ApiPromo } from '@/lib/api';
function formatDate(iso: string) {
return new Date(iso).toLocaleDateString('en-US', {
@ -75,8 +69,7 @@ export default function PromosPage() {
const handleToggleActive = async (promo: ApiPromo) => {
const { data } = await apiUpdatePromo(promo.id, { active: !promo.active });
if (data)
setPromos(prev => prev.map(p => (p.id === promo.id ? { ...p, active: !p.active } : p)));
if (data) setPromos(prev => prev.map(p => p.id === promo.id ? { ...p, active: !p.active } : p));
};
const loadPromos = useCallback(async () => {

81
dashboards/admin-web/src/app/(dashboard)/settings/page.tsx
View File

@ -435,13 +435,10 @@ export default function SettingsPage() {
<CardTitle className="text-base">Azure Configuration</CardTitle>
<CardDescription>
Azure secrets are managed via the{' '}
<a
href="/ops/secrets"
className="text-primary underline underline-offset-2 hover:text-primary/80"
>
<a href="/ops/secrets" className="text-primary underline underline-offset-2 hover:text-primary/80">
Secrets Manager
</a>{' '}
(Key Vault)
</a>
{' '}(Key Vault)
</CardDescription>
</div>
</div>
@ -452,8 +449,8 @@ export default function SettingsPage() {
in Azure Key Vault and resolved at runtime. Use the{' '}
<a href="/ops/secrets" className="text-primary underline underline-offset-2">
Secrets Manager
</a>{' '}
to view, rotate, or update them.
</a>
{' '}to view, rotate, or update them.
</p>
</CardContent>
</Card>
@ -476,12 +473,7 @@ export default function SettingsPage() {
<Input
type="number"
value={settings.rateLimits.globalPerMin}
onChange={e =>
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, globalPerMin: parseInt(e.target.value) || 0 },
}))
}
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, globalPerMin: parseInt(e.target.value) || 0 } }))}
/>
</div>
<div className="space-y-2">
@ -489,12 +481,7 @@ export default function SettingsPage() {
<Input
type="number"
value={settings.rateLimits.perUserPerMin}
onChange={e =>
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, perUserPerMin: parseInt(e.target.value) || 0 },
}))
}
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, perUserPerMin: parseInt(e.target.value) || 0 } }))}
/>
</div>
</div>
@ -504,12 +491,7 @@ export default function SettingsPage() {
<Input
type="number"
value={settings.rateLimits.maxTokenBurst}
onChange={e =>
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, maxTokenBurst: parseInt(e.target.value) || 0 },
}))
}
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, maxTokenBurst: parseInt(e.target.value) || 0 } }))}
/>
</div>
<div className="space-y-2">
@ -517,12 +499,7 @@ export default function SettingsPage() {
<Input
type="number"
value={settings.rateLimits.abuseThreshold}
onChange={e =>
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, abuseThreshold: parseInt(e.target.value) || 0 },
}))
}
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, abuseThreshold: parseInt(e.target.value) || 0 } }))}
/>
</div>
</div>
@ -536,9 +513,7 @@ export default function SettingsPage() {
</div>
<Switch
checked={settings.rateLimits.autoSuspendOnAbuse}
onCheckedChange={v =>
setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, autoSuspendOnAbuse: v } }))
}
onCheckedChange={v => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, autoSuspendOnAbuse: v } }))}
/>
</div>
<div className="flex items-center justify-between">
@ -550,9 +525,7 @@ export default function SettingsPage() {
</div>
<Switch
checked={settings.rateLimits.ipBlocklist}
onCheckedChange={v =>
setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, ipBlocklist: v } }))
}
onCheckedChange={v => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, ipBlocklist: v } }))}
/>
</div>
</CardContent>
@ -579,12 +552,7 @@ export default function SettingsPage() {
</div>
<Switch
checked={settings.notifications.newUserSignup}
onCheckedChange={v =>
setSettings(s => ({
...s,
notifications: { ...s.notifications, newUserSignup: v },
}))
}
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, newUserSignup: v } }))}
/>
</div>
<div className="flex items-center justify-between">
@ -596,12 +564,7 @@ export default function SettingsPage() {
</div>
<Switch
checked={settings.notifications.usageThreshold}
onCheckedChange={v =>
setSettings(s => ({
...s,
notifications: { ...s.notifications, usageThreshold: v },
}))
}
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, usageThreshold: v } }))}
/>
</div>
<div className="flex items-center justify-between">
@ -613,12 +576,7 @@ export default function SettingsPage() {
</div>
<Switch
checked={settings.notifications.failedPayment}
onCheckedChange={v =>
setSettings(s => ({
...s,
notifications: { ...s.notifications, failedPayment: v },
}))
}
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, failedPayment: v } }))}
/>
</div>
<div className="flex items-center justify-between">
@ -630,12 +588,7 @@ export default function SettingsPage() {
</div>
<Switch
checked={settings.notifications.securityAlerts}
onCheckedChange={v =>
setSettings(s => ({
...s,
notifications: { ...s.notifications, securityAlerts: v },
}))
}
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, securityAlerts: v } }))}
/>
</div>
</CardContent>
@ -667,9 +620,7 @@ export default function SettingsPage() {
<Input
type="number"
value={settings.dataRetentionDays}
onChange={e =>
setSettings(s => ({ ...s, dataRetentionDays: parseInt(e.target.value) || 365 }))
}
onChange={e => setSettings(s => ({ ...s, dataRetentionDays: parseInt(e.target.value) || 365 }))}
/>
</div>
<div className="space-y-2">

94
dashboards/admin-web/src/app/(dashboard)/settings/security/page.tsx
View File

@ -29,12 +29,6 @@ interface TotpSetupData {
recoveryCodes: string[];
}
interface LinkedProvider {
provider: string;
email: string;
linkedAt?: string;
}
function getToken(): string | null {
return typeof window !== 'undefined' ? localStorage.getItem('admin_access_token') : null;
}
@ -44,14 +38,6 @@ function authHeaders(): Record<string, string> {
return t ? { Authorization: `Bearer ${t}` } : {};
}
function formatProviderName(provider: string): string {
return provider
.split(/[-_\s]+/)
.filter(Boolean)
.map(part => part.charAt(0).toUpperCase() + part.slice(1))
.join(' ');
}
export default function SecuritySettingsPage() {
const [status, setStatus] = useState<MfaStatus | null>(null);
const [loading, setLoading] = useState(true);
@ -62,7 +48,6 @@ export default function SecuritySettingsPage() {
const [verifyCode, setVerifyCode] = useState('');
const [setupLoading, setSetupLoading] = useState(false);
const [copied, setCopied] = useState(false);
const [providers, setProviders] = useState<LinkedProvider[]>([]);
const fetchStatus = useCallback(async () => {
try {
@ -81,42 +66,6 @@ export default function SecuritySettingsPage() {
fetchStatus();
}, [fetchStatus]);
useEffect(() => {
let cancelled = false;
async function fetchProviders() {
try {
const res = await fetch('/api/auth/providers', { headers: authHeaders() });
if (!res.ok) return;
const data = (await res.json()) as LinkedProvider[];
if (!cancelled) setProviders(Array.isArray(data) ? data : []);
} catch {
// Provider linking is optional; keep MFA settings usable if unavailable.
}
}
fetchProviders();
return () => {
cancelled = true;
};
}, []);
const handleUnlinkProvider = async (provider: string) => {
setError('');
try {
const res = await fetch(`/api/auth/providers/${provider}`, {
method: 'DELETE',
headers: authHeaders(),
});
if (!res.ok) {
const data = await res.json().catch(() => ({}));
setError(data.error || 'Failed to unlink provider');
return;
}
setProviders(prev => prev.filter(p => p.provider !== provider));
} catch {
setError('Service unavailable');
}
};
const handleSetupTotp = async () => {
setSetupLoading(true);
setError('');
@ -356,49 +305,6 @@ export default function SecuritySettingsPage() {
</CardContent>
</Card>
)}
<Card>
<CardHeader>
<CardTitle>Linked sign-in providers</CardTitle>
<CardDescription>Connect OAuth providers that can be used to sign in.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{providers.length > 0 ? (
<div className="space-y-3">
{providers.map(provider => (
<div
key={provider.provider}
className="flex items-center justify-between rounded-lg border p-3"
>
<div>
<div className="font-medium">{formatProviderName(provider.provider)}</div>
<div className="text-sm text-muted-foreground">{provider.email}</div>
</div>
<Button
variant="outline"
size="sm"
onClick={() => handleUnlinkProvider(provider.provider)}
>
Unlink
</Button>
</div>
))}
</div>
) : (
<div className="flex items-center justify-between rounded-lg border p-3">
<div>
<div className="font-medium">No linked providers</div>
<div className="text-sm text-muted-foreground">
Link a provider such as Google to enable another sign-in method.
</div>
</div>
<Button variant="outline" size="sm">
Link provider
</Button>
</div>
)}
</CardContent>
</Card>
</div>
);
}

9
dashboards/admin-web/src/app/(dashboard)/subscriptions/page.tsx
View File

@ -71,7 +71,10 @@ export default function SubscriptionsPage() {
useEffect(() => {
async function load() {
try {
const [plansRes, usersRes] = await Promise.allSettled([apiListPlans(), apiListUsers()]);
const [plansRes, usersRes] = await Promise.allSettled([
apiListPlans(),
apiListUsers(),
]);
let loadedPlans: LocalPlan[] = [];
if (plansRes.status === 'fulfilled' && plansRes.value.data?.plans?.length) {
loadedPlans = plansRes.value.data.plans.filter(p => p.active).map(planDocToLocal);
@ -235,9 +238,7 @@ export default function SubscriptionsPage() {
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{totalActiveUsers > 0 ? formatCurrency(totalMRR / totalActiveUsers) : '$0.00'}
</div>
<div className="text-2xl font-bold">{totalActiveUsers > 0 ? formatCurrency(totalMRR / totalActiveUsers) : '$0.00'}</div>
<p className="text-xs text-muted-foreground mt-1">ARPU</p>
</CardContent>
</Card>

189
dashboards/admin-web/src/app/(dashboard)/usage/page.tsx
View File

@ -40,11 +40,27 @@ import {
type RetentionCohort,
} from '@/lib/api';
import { Separator } from '@/components/ui/separator';
import { AreaChart, BarChart, Donut } from '@/components/charts';
import { seriesValues, dateBars, donutSlices } from '@/lib/chart-data';
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
BarChart,
Bar,
PieChart,
Pie,
Cell,
} from 'recharts';
// Categorical palette drawn from admin's shadcn chart tokens (no literals).
const COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-4)', 'var(--chart-5)'];
const COLORS = [
'hsl(var(--chart-1))',
'hsl(var(--chart-2))',
'hsl(var(--chart-4))',
'hsl(var(--chart-5))',
];
function usageRecordsToDailyMetrics(records: ApiUsageRecord[]): DailyMetric[] {
const byDate = new Map<string, DailyMetric>();
@ -295,13 +311,34 @@ export default function UsagePage() {
<CardTitle className="text-base">Token Consumption (30 days)</CardTitle>
</CardHeader>
<CardContent>
<AreaChart
values={seriesValues(dailyMetrics, 'totalTokens')}
width={640}
height={300}
className="h-auto w-full"
ariaLabel="Token consumption over the last 30 days"
/>
<ResponsiveContainer width="100%" height={300}>
<AreaChart data={dailyMetrics}>
<defs>
<linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="hsl(var(--chart-1))" stopOpacity={0.3} />
<stop offset="95%" stopColor="hsl(var(--chart-1))" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
<YAxis className="text-xs" tickFormatter={v => formatNumber(v)} />
<Tooltip
formatter={value => formatNumber(Number(value))}
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
<Area
type="monotone"
dataKey="totalTokens"
stroke="hsl(var(--chart-1))"
fill="url(#colorTokens)"
strokeWidth={2}
name="Tokens"
/>
</AreaChart>
</ResponsiveContainer>
</CardContent>
</Card>
@ -310,13 +347,26 @@ export default function UsagePage() {
<CardTitle className="text-base">API Requests (30 days)</CardTitle>
</CardHeader>
<CardContent>
<BarChart
data={dateBars(dailyMetrics, 'totalRequests')}
width={640}
height={300}
className="h-auto w-full"
ariaLabel="API requests over the last 30 days"
/>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={dailyMetrics}>
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
<YAxis className="text-xs" tickFormatter={v => formatNumber(v)} />
<Tooltip
formatter={value => formatNumber(Number(value))}
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
<Bar
dataKey="totalRequests"
fill="hsl(var(--chart-2))"
radius={[4, 4, 0, 0]}
name="Requests"
/>
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
</div>
@ -328,15 +378,33 @@ export default function UsagePage() {
<CardHeader>
<CardTitle className="text-base">Model Distribution by Cost</CardTitle>
</CardHeader>
<CardContent className="flex justify-center">
<Donut
slices={donutSlices(modelUsage, 'model', 'cost').map((s, idx) => ({
...s,
color: COLORS[idx % COLORS.length],
}))}
size={260}
ariaLabel="Model distribution by cost"
/>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={modelUsage}
cx="50%"
cy="50%"
innerRadius={70}
outerRadius={110}
paddingAngle={4}
dataKey="cost"
nameKey="model"
label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
>
{modelUsage.map((_, idx) => (
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
))}
</Pie>
<Tooltip
formatter={value => formatCurrency(Number(value))}
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
</PieChart>
</ResponsiveContainer>
</CardContent>
</Card>
@ -475,15 +543,33 @@ export default function UsagePage() {
<CardHeader>
<CardTitle className="text-base">Usage by Platform</CardTitle>
</CardHeader>
<CardContent className="flex justify-center">
<Donut
slices={donutSlices(sourceUsage, 'source', 'tokens').map((s, idx) => ({
...s,
color: COLORS[idx % COLORS.length],
}))}
size={240}
ariaLabel="Token usage by platform"
/>
<CardContent>
<ResponsiveContainer width="100%" height={280}>
<PieChart>
<Pie
data={sourceUsage}
cx="50%"
cy="50%"
innerRadius={60}
outerRadius={100}
paddingAngle={4}
dataKey="tokens"
nameKey="source"
label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
>
{sourceUsage.map((_, idx) => (
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
))}
</Pie>
<Tooltip
formatter={value => formatNumber(Number(value))}
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
</PieChart>
</ResponsiveContainer>
</CardContent>
</Card>
<Card>
@ -557,18 +643,25 @@ export default function UsagePage() {
<CardTitle className="text-base">Tokens by Product</CardTitle>
</CardHeader>
<CardContent>
<BarChart
data={productUsage.map((p, idx) => ({
id: p.productId,
value: p.tokens,
label: p.productId,
color: COLORS[idx % COLORS.length],
}))}
width={640}
height={280}
className="h-auto w-full"
ariaLabel="Tokens by product"
/>
<ResponsiveContainer width="100%" height={280}>
<BarChart data={productUsage} layout="vertical">
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
<XAxis type="number" tickFormatter={v => formatNumber(v)} className="text-xs" />
<YAxis type="category" dataKey="productId" width={100} className="text-xs" />
<Tooltip
formatter={value => formatNumber(Number(value))}
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
<Bar dataKey="tokens" name="Tokens" radius={[0, 4, 4, 0]}>
{productUsage.map((_, idx) => (
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
<Card>

45
dashboards/admin-web/src/app/(dashboard)/users/[id]/page.tsx
View File

@ -29,8 +29,15 @@ import {
} from '@/components/ui/table';
import { apiGetUserView, type UserViewResponse, type ApiUsageRecord } from '@/lib/api';
import { formatNumber, formatCurrency, formatDate } from '@/lib/mock-data';
import { AreaChart } from '@/components/charts';
import { seriesValues } from '@/lib/chart-data';
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from 'recharts';
const planColors: Record<string, string> = {
free: '',
@ -265,13 +272,33 @@ export default function UserDetailPage() {
<CardTitle className="text-base">Daily Dictation Activity</CardTitle>
</CardHeader>
<CardContent>
<AreaChart
values={seriesValues(dailyUsage, 'dictations')}
width={720}
height={250}
className="h-auto w-full"
ariaLabel="Daily dictation activity"
/>
<ResponsiveContainer width="100%" height={250}>
<AreaChart data={dailyUsage}>
<defs>
<linearGradient id="colorDict" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="hsl(var(--chart-1))" stopOpacity={0.3} />
<stop offset="95%" stopColor="hsl(var(--chart-1))" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
<YAxis className="text-xs" />
<Tooltip
contentStyle={{
borderRadius: '8px',
border: '1px solid hsl(var(--border))',
}}
/>
<Area
type="monotone"
dataKey="dictations"
stroke="hsl(var(--chart-1))"
fill="url(#colorDict)"
strokeWidth={2}
name="Dictations"
/>
</AreaChart>
</ResponsiveContainer>
</CardContent>
</Card>
)}

64
dashboards/admin-web/src/app/(dashboard)/users/page.tsx
View File

@ -50,13 +50,7 @@ import {
SelectValue,
} from '@/components/ui/select';
import { mockUsers, formatNumber, formatCurrency, formatDate, type User } from '@/lib/mock-data';
import {
apiListUsers,
apiUpdateUser,
apiDeleteUser,
apiCreateInvitation,
type ApiUser,
} from '@/lib/api';
import { apiListUsers, apiUpdateUser, apiDeleteUser, apiCreateInvitation, type ApiUser } from '@/lib/api';
import { Label } from '@/components/ui/label';
import { useToast } from '@/components/ui/toast';
@ -133,15 +127,10 @@ export default function UsersPage() {
});
setInviteCreating(false);
if (data) {
const userDashboardUrl =
process.env.NEXT_PUBLIC_USER_DASHBOARD_URL || 'http://localhost:3002';
const userDashboardUrl = process.env.NEXT_PUBLIC_USER_DASHBOARD_URL || 'http://localhost:3002';
setInviteLink(`${userDashboardUrl}/login?ref=${encodeURIComponent(data.code)}`);
} else {
toast({
title: 'Failed to create invite',
description: error || 'Unknown error',
variant: 'error',
});
toast({ title: 'Failed to create invite', description: error || 'Unknown error', variant: 'error' });
}
};
@ -171,10 +160,7 @@ export default function UsersPage() {
setUsers(prev =>
prev.map(u => (u.id === user.id ? { ...u, status: newStatus as User['status'] } : u))
);
toast({
title: `User ${newStatus === 'suspended' ? 'suspended' : 'activated'}`,
variant: newStatus === 'suspended' ? 'warning' : 'success',
});
toast({ title: `User ${newStatus === 'suspended' ? 'suspended' : 'activated'}`, variant: newStatus === 'suspended' ? 'warning' : 'success' });
} else {
toast({ title: 'Action failed', description: error, variant: 'error' });
}
@ -246,15 +232,13 @@ export default function UsersPage() {
<h1 className="text-3xl font-bold tracking-tight">Users</h1>
<p className="text-muted-foreground">Manage platform users and their subscriptions</p>
</div>
<Button
onClick={() => {
setShowInvite(true);
setInviteLink(null);
setInviteDescription('');
setInvitePlan('pro');
setInviteCopied(false);
}}
>
<Button onClick={() => {
setShowInvite(true);
setInviteLink(null);
setInviteDescription('');
setInvitePlan('pro');
setInviteCopied(false);
}}>
<UserPlus className="mr-2 h-4 w-4" />
Invite User
</Button>
@ -450,24 +434,9 @@ export default function UsersPage() {
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() =>
handleChangePlan(
user.id,
user.plan === 'free'
? 'pro'
: user.plan === 'pro'
? 'enterprise'
: 'free'
)
}
onClick={() => handleChangePlan(user.id, user.plan === 'free' ? 'pro' : user.plan === 'pro' ? 'enterprise' : 'free')}
>
Cycle Plan ({user.plan} →{' '}
{user.plan === 'free'
? 'pro'
: user.plan === 'pro'
? 'enterprise'
: 'free'}
)
Cycle Plan ({user.plan} → {user.plan === 'free' ? 'pro' : user.plan === 'pro' ? 'enterprise' : 'free'})
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
@ -609,7 +578,12 @@ export default function UsersPage() {
<code className="flex-1 text-sm font-mono break-all select-all">
{inviteLink}
</code>
<Button variant="ghost" size="icon" className="shrink-0" onClick={copyInviteLink}>
<Button
variant="ghost"
size="icon"
className="shrink-0"
onClick={copyInviteLink}
>
<Copy className="h-4 w-4" />
</Button>
</div>

12
dashboards/admin-web/src/app/api/ops/secrets/[name]/route.ts
View File

@ -13,7 +13,10 @@ function getSecretClient(): SecretClient {
}
/** GET /api/ops/secrets/[name] — read a specific secret value */
export async function GET(_req: NextRequest, { params }: { params: Promise<{ name: string }> }) {
export async function GET(
_req: NextRequest,
{ params }: { params: Promise<{ name: string }> },
) {
try {
const { name } = await params;
const client = getSecretClient();
@ -38,7 +41,10 @@ export async function GET(_req: NextRequest, { params }: { params: Promise<{ nam
}
/** DELETE /api/ops/secrets/[name] — soft-delete a secret */
export async function DELETE(_req: NextRequest, { params }: { params: Promise<{ name: string }> }) {
export async function DELETE(
_req: NextRequest,
{ params }: { params: Promise<{ name: string }> },
) {
try {
const { name } = await params;
const client = getSecretClient();
@ -49,7 +55,7 @@ export async function DELETE(_req: NextRequest, { params }: { params: Promise<{
} catch (err) {
return NextResponse.json(
{ error: err instanceof Error ? err.message : String(err) },
{ status: 500 }
{ status: 500 },
);
}
}

9
dashboards/admin-web/src/app/api/ops/secrets/route.ts
View File

@ -49,7 +49,7 @@ export async function GET() {
} catch (err) {
return NextResponse.json(
{ error: err instanceof Error ? err.message : String(err) },
{ status: 500 }
{ status: 500 },
);
}
}
@ -67,7 +67,10 @@ export async function POST(req: NextRequest) {
};
if (!name || !value) {
return NextResponse.json({ error: 'name and value are required' }, { status: 400 });
return NextResponse.json(
{ error: 'name and value are required' },
{ status: 400 },
);
}
const client = getSecretClient();
@ -86,7 +89,7 @@ export async function POST(req: NextRequest) {
} catch (err) {
return NextResponse.json(
{ error: err instanceof Error ? err.message : String(err) },
{ status: 500 }
{ status: 500 },
);
}
}

20
dashboards/admin-web/src/app/api/ops/valkey/route.ts
View File

@ -34,10 +34,7 @@ function parseInfoValue(info: string, key: string): string | undefined {
return line?.split(':').slice(1).join(':');
}
async function getPreview(
client: ReturnType<typeof createClient>,
key: string
): Promise<ValkeyPreview> {
async function getPreview(client: ReturnType<typeof createClient>, key: string): Promise<ValkeyPreview> {
const [type, ttlSeconds] = await Promise.all([client.type(key), client.ttl(key)]);
if (type === 'string') {
@ -79,10 +76,7 @@ async function getPreview(
}
if (type === 'zset') {
const [size, entries] = await Promise.all([
client.zCard(key),
client.zRangeWithScores(key, 0, 4),
]);
const [size, entries] = await Promise.all([client.zCard(key), client.zRangeWithScores(key, 0, 4)]);
return {
key,
type,
@ -148,10 +142,7 @@ export async function GET(req: NextRequest) {
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Unable to inspect Valkey';
return NextResponse.json(
{ error: message },
{ status: message === 'Unauthorized' ? 401 : 500 }
);
return NextResponse.json({ error: message }, { status: message === 'Unauthorized' ? 401 : 500 });
}
}
@ -224,9 +215,6 @@ export async function POST(req: NextRequest) {
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Valkey write failed';
return NextResponse.json(
{ error: message },
{ status: message === 'Unauthorized' ? 401 : 500 }
);
return NextResponse.json({ error: message }, { status: message === 'Unauthorized' ? 401 : 500 });
}
}

5
dashboards/admin-web/src/app/api/settings/kill-switch/route.ts
View File

@ -76,10 +76,7 @@ export async function PUT(req: NextRequest) {
const reason = typeof body.reason === 'string' ? body.reason : '';
const platforms: PlatformFlags = body.platforms ?? {
desktop: true,
ios: true,
android: true,
web: true,
desktop: true, ios: true, android: true, web: true,
};
const result = await listFlags();

5
dashboards/admin-web/src/app/api/telemetry/clusters/[id]/route.ts
View File

@ -8,7 +8,10 @@ function getJwt(req: NextRequest): string {
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
}
export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
export async function PATCH(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
const jwt = getJwt(req);
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

15
dashboards/admin-web/src/app/api/telemetry/policies/[id]/route.ts
View File

@ -1,5 +1,8 @@
import { NextRequest, NextResponse } from 'next/server';
import { updateTelemetryPolicy, deleteTelemetryPolicy } from '@/lib/platform-client';
import {
updateTelemetryPolicy,
deleteTelemetryPolicy,
} from '@/lib/platform-client';
function getJwt(req: NextRequest): string {
const cookie = req.headers.get('cookie') ?? '';
@ -8,7 +11,10 @@ function getJwt(req: NextRequest): string {
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
}
export async function PUT(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
export async function PUT(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
const jwt = getJwt(req);
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
@ -22,7 +28,10 @@ export async function PUT(req: NextRequest, { params }: { params: Promise<{ id:
}
}
export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
export async function DELETE(
req: NextRequest,
{ params }: { params: Promise<{ id: string }> }
) {
const jwt = getJwt(req);
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

5
dashboards/admin-web/src/app/api/telemetry/policies/route.ts
View File

@ -1,5 +1,8 @@
import { NextRequest, NextResponse } from 'next/server';
import { listTelemetryPolicies, createTelemetryPolicy } from '@/lib/platform-client';
import {
listTelemetryPolicies,
createTelemetryPolicy,
} from '@/lib/platform-client';
function getJwt(req: NextRequest): string {
const cookie = req.headers.get('cookie') ?? '';

19
dashboards/admin-web/src/app/error.tsx
View File

@ -1,7 +1,6 @@
'use client';
import { useEffect } from 'react';
import { ErrorPage } from '@bytelyst/dashboard-components';
import { trackEvent } from '@/lib/telemetry';
export default function GlobalError({
@ -20,11 +19,19 @@ export default function GlobalError({
return (
<div className="flex min-h-screen items-center justify-center p-4">
<ErrorPage
title="Something went wrong"
message={error.message || 'An unexpected error occurred.'}
onRetry={reset}
/>
<div className="mx-auto max-w-md text-center">
<div className="mb-4 text-5xl">⚠</div>
<h2 className="mb-2 text-xl font-semibold">Something went wrong</h2>
<p className="mb-6 text-sm text-muted-foreground">
{error.message || 'An unexpected error occurred.'}
</p>
<button
onClick={reset}
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
>
Try again
</button>
</div>
</div>
);
}

52
dashboards/admin-web/src/app/globals.css
View File

@ -118,58 +118,6 @@
--sidebar-ring: oklch(0.556 0 0);
}
/* ── @bytelyst/ui token bridge (UX-1) ─────────────────────────────────────
* Shared `@bytelyst/*` components read a `--bl-*` contract. By default that
* contract is supplied by `@bytelyst/design-tokens/css` (imported above), but
* those defaults live under `:root, [data-theme="dark"]` — i.e. they are the
* DARK palette, and they switch via a `[data-theme]` attribute that admin-web
* does NOT use (admin toggles a `.dark` *class*). Without this bridge, shared
* components would render with dark token values in admin's light mode.
*
* This block re-points the `--bl-*` contract onto admin's shadcn OKLCH ramp.
* Every mapping references an admin `--*` var that already flips between
* `:root` and `.dark`, so light + dark parity is inherited automatically with
* ZERO new color literals (declared last in this file, so it wins the cascade
* over the design-tokens import).
*
* Status hues (`--bl-success` / `--bl-warning` / `--bl-info` + their -muted /
* -border variants) intentionally inherit the shared design-tokens palette:
* admin's shadcn ramp has no semantic success/warning/info token to map to,
* and authoring color literals here is disallowed.
* ------------------------------------------------------------------------- */
:root {
/* surfaces */
--bl-bg-canvas: var(--background);
--bl-bg-elevated: var(--card);
--bl-surface-card: var(--card);
--bl-surface-muted: var(--muted);
--bl-surface-highlight: var(--accent);
--bl-surface-overlay: var(--popover);
--bl-surface-sidebar: var(--sidebar);
--bl-input: var(--input);
/* borders */
--bl-border: var(--border);
--bl-border-strong: var(--ring);
--bl-border-subtle: color-mix(in oklab, var(--border) 60%, transparent);
/* text */
--bl-text-primary: var(--foreground);
--bl-text-secondary: var(--muted-foreground);
--bl-text-tertiary: var(--muted-foreground);
--bl-text-quiet: var(--muted-foreground);
/* accent / primary */
--bl-accent: var(--primary);
--bl-accent-foreground: var(--primary-foreground);
--bl-accent-muted: color-mix(in oklab, var(--primary) 16%, transparent);
/* danger ← shadcn destructive */
--bl-danger: var(--destructive);
--bl-danger-foreground: var(--primary-foreground);
--bl-danger-muted: color-mix(in oklab, var(--destructive) 16%, transparent);
--bl-danger-border: color-mix(in oklab, var(--destructive) 40%, transparent);
/* focus */
--bl-focus-ring: var(--ring);
--bl-focus-ring-muted: color-mix(in oklab, var(--ring) 40%, transparent);
}
@layer base {
* {
@apply border-border outline-ring/50;

53
dashboards/admin-web/src/components/charts/index.tsx
View File

@ -1,53 +0,0 @@
'use client';
/**
* Lazy, code-split wrappers around the shared `@bytelyst/charts` /
* `@bytelyst/data-viz` SVG primitives (UX-2 / CC.5). The chart code is pulled
* into its own async chunk via `next/dynamic` so it never weighs down the
* initial bundle of the (heavy) dashboard surfaces that embed it. The
* primitives are pure SVG and token-themed (`--bl-*`, bridged in `globals.css`),
* so they inherit admin's light/dark palette automatically.
*
* Replaces the previous direct `recharts` usage on the dashboard, usage,
* per-user, client-logs and extraction-entity surfaces.
*/
import dynamic from 'next/dynamic';
function ChartFallback() {
return (
<div
className="h-full min-h-[200px] w-full animate-pulse rounded-md bg-muted"
aria-hidden="true"
/>
);
}
export const AreaChart = dynamic(
() => import('./primitives').then(m => ({ default: m.AreaChart })),
{ ssr: false, loading: ChartFallback }
);
export const BarChart = dynamic(() => import('./primitives').then(m => ({ default: m.BarChart })), {
ssr: false,
loading: ChartFallback,
});
export const LineChart = dynamic(
() => import('./primitives').then(m => ({ default: m.LineChart })),
{ ssr: false, loading: ChartFallback }
);
export const Donut = dynamic(() => import('./primitives').then(m => ({ default: m.Donut })), {
ssr: false,
loading: ChartFallback,
});
export const Sparkline = dynamic(
() => import('./primitives').then(m => ({ default: m.Sparkline })),
{ ssr: false, loading: ChartFallback }
);
export const KpiCard = dynamic(() => import('./primitives').then(m => ({ default: m.KpiCard })), {
ssr: false,
loading: ChartFallback,
});

13
dashboards/admin-web/src/components/charts/primitives.tsx
View File

@ -1,13 +0,0 @@
'use client';
/**
* Static re-export seam for the shared SVG-chart packages. This module is the
* dynamic-import target of `./index.tsx` — `next/dynamic` splits it into its
* own chunk, while the *static* `export ... from` lines below resolve the
* `@bytelyst/charts` / `@bytelyst/data-viz` package paths exactly like the
* other shared `@bytelyst/*` packages do (a direct `import('@bytelyst/charts')`
* trips Next's package-`exports` resolver because those packages only declare
* an `import` condition).
*/
export { AreaChart, BarChart, LineChart, Donut } from '@bytelyst/charts';
export { Sparkline, KpiCard } from '@bytelyst/data-viz';

58
dashboards/admin-web/src/components/command-menu.tsx
View File

@ -1,58 +0,0 @@
'use client';
import { useMemo } from 'react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useCommandPalette, useRegisterCommands } from '@bytelyst/command-palette';
import { useAuth } from '@/lib/auth-context';
import { useTheme } from '@/lib/theme-context';
import { buildAdminCommands } from '@/lib/admin-commands';
// Lazy-load the dialog itself (own chunk, client only) — see
// command-palette-dialog.tsx for why the dynamic target is a local re-export.
const CommandPalette = dynamic(
() => import('./command-palette-dialog').then(m => ({ default: m.CommandPalette })),
{ ssr: false }
);
/**
* Mounts the ⌘K command palette for the dashboard (UX-3). Registers
* navigate-mode commands for the major surfaces plus theme-toggle / sign-out
* actions, and binds the global ⌘K / Ctrl-K hotkey via `useCommandPalette`.
*
* Must render inside a `<CommandRegistryProvider>` (mounted in the dashboard
* layout) so `useRegisterCommands` and the dialog share one registry.
*/
export function CommandMenu() {
const router = useRouter();
const { logout } = useAuth();
const { resolved, setTheme } = useTheme();
const cmdk = useCommandPalette();
const commands = useMemo(
() =>
buildAdminCommands({
resolvedTheme: resolved,
toggleTheme: () => setTheme(resolved === 'dark' ? 'light' : 'dark'),
signOut: () => {
logout();
router.replace('/login');
},
}),
[resolved, setTheme, logout, router]
);
useRegisterCommands(commands);
return (
<CommandPalette
open={cmdk.open}
onClose={cmdk.hide}
ariaLabel="Admin command palette"
onNavigate={href => {
cmdk.hide();
router.push(href);
}}
/>
);
}

10
dashboards/admin-web/src/components/command-palette-dialog.tsx
View File

@ -1,10 +0,0 @@
'use client';
/**
* Static re-export seam for the heavy `<CommandPalette>` dialog so it can be
* code-split via `next/dynamic` from `command-menu.tsx`. As with the charts
* seam, the dynamic-import target must be a *local* module: a direct
* `import('@bytelyst/command-palette')` trips Next's package-`exports`
* resolver (the package declares only an `import` condition).
*/
export { CommandPalette } from '@bytelyst/command-palette';

94
dashboards/admin-web/src/components/extraction/entity-chart.tsx
View File

@ -1,6 +1,18 @@
'use client';
import { BarChart, Donut } from '@/components/charts';
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
PieChart,
Pie,
Cell,
Legend,
} from 'recharts';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
interface ExtractionEntity {
@ -15,11 +27,11 @@ interface EntityChartProps {
}
const COLORS = [
'var(--chart-1)',
'var(--chart-2)',
'var(--chart-3)',
'var(--chart-4)',
'var(--chart-5)',
'hsl(var(--chart-1))',
'hsl(var(--chart-2))',
'hsl(var(--chart-3))',
'hsl(var(--chart-4))',
'hsl(var(--chart-5))',
];
export function EntityBarChart({ extractions, title = 'Entities by Class' }: EntityChartProps) {
@ -43,13 +55,28 @@ export function EntityBarChart({ extractions, title = 'Entities by Class' }: Ent
<CardTitle className="text-sm">{title}</CardTitle>
</CardHeader>
<CardContent>
<BarChart
data={data.map(d => ({ id: d.name, value: d.count, label: d.name }))}
width={640}
height={250}
className="h-auto w-full"
ariaLabel={title}
/>
<ResponsiveContainer width="100%" height={250}>
<BarChart data={data} layout="vertical" margin={{ left: 20, right: 20 }}>
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
<XAxis type="number" stroke="hsl(var(--muted-foreground))" fontSize={12} />
<YAxis
type="category"
dataKey="name"
stroke="hsl(var(--muted-foreground))"
fontSize={11}
width={120}
/>
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--card))',
border: '1px solid hsl(var(--border))',
borderRadius: 8,
fontSize: 12,
}}
/>
<Bar dataKey="count" fill="hsl(var(--chart-1))" radius={[0, 4, 4, 0]} />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
);
@ -75,17 +102,36 @@ export function EntityPieChart({ extractions, title = 'Class Distribution' }: En
<CardHeader>
<CardTitle className="text-sm">{title}</CardTitle>
</CardHeader>
<CardContent className="flex justify-center">
<Donut
slices={data.map((d, idx) => ({
id: d.name,
label: d.name,
value: d.value,
color: COLORS[idx % COLORS.length],
}))}
size={220}
ariaLabel={title}
/>
<CardContent>
<ResponsiveContainer width="100%" height={250}>
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
innerRadius={50}
outerRadius={90}
paddingAngle={2}
dataKey="value"
label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
labelLine={false}
fontSize={11}
>
{data.map((_, idx) => (
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
))}
</Pie>
<Tooltip
contentStyle={{
backgroundColor: 'hsl(var(--card))',
border: '1px solid hsl(var(--border))',
borderRadius: 8,
fontSize: 12,
}}
/>
<Legend wrapperStyle={{ fontSize: 11, color: 'hsl(var(--muted-foreground))' }} />
</PieChart>
</ResponsiveContainer>
</CardContent>
</Card>
);

60
dashboards/admin-web/src/components/ui/alert.tsx
View File

@ -1,48 +1,58 @@
import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
{
variants: {
variant: {
default: 'bg-background text-foreground',
default: "bg-background text-foreground",
destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: 'default',
variant: "default",
},
}
);
)
const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
));
Alert.displayName = 'Alert';
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn('mb-1 font-medium leading-none tracking-tight', className)}
{...props}
/>
)
);
AlertTitle.displayName = 'AlertTitle';
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
AlertTitle.displayName = "AlertTitle"
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
));
AlertDescription.displayName = 'AlertDescription';
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
AlertDescription.displayName = "AlertDescription"
export { Alert, AlertTitle, AlertDescription };
export { Alert, AlertTitle, AlertDescription }

21
dashboards/admin-web/src/components/ui/checkbox.tsx
View File

@ -1,12 +1,13 @@
'use client';
'use client'
import * as React from 'react';
import { Check } from 'lucide-react';
import { cn } from '@/lib/utils';
import * as React from 'react'
import { Check } from 'lucide-react'
import { cn } from '@/lib/utils'
export interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
checked?: boolean;
onCheckedChange?: (checked: boolean) => void;
export interface CheckboxProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
checked?: boolean
onCheckedChange?: (checked: boolean) => void
}
const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
@ -27,7 +28,7 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
{checked && <Check className="h-4 w-4" />}
</button>
)
);
Checkbox.displayName = 'Checkbox';
)
Checkbox.displayName = 'Checkbox'
export { Checkbox };
export { Checkbox }

5
dashboards/admin-web/src/components/ui/slider.tsx
View File

@ -11,7 +11,10 @@ const Slider = React.forwardRef<
>(({ className, ...props }, ref) => (
<SliderPrimitive.Root
ref={ref}
className={cn('relative flex w-full touch-none select-none items-center', className)}
className={cn(
'relative flex w-full touch-none select-none items-center',
className
)}
{...props}
>
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">

102
dashboards/admin-web/src/lib/admin-commands.ts
View File

@ -1,102 +0,0 @@
/**
* Command registry contributions for the admin ⌘K palette (UX-3).
*
* Kept framework-free (pure data + callbacks) so the command set is
* unit-testable in the node vitest env without rendering anything.
*/
import type { Command } from '@bytelyst/command-palette';
/** Curated navigate targets — the major admin surfaces. */
export const NAV_COMMANDS: ReadonlyArray<{
id: string;
label: string;
href: string;
keywords?: string[];
}> = [
{ id: 'nav-dashboard', label: 'Dashboard', href: '/', keywords: ['home', 'overview'] },
{ id: 'nav-users', label: 'Users', href: '/users', keywords: ['accounts', 'people'] },
{
id: 'nav-subscriptions',
label: 'Subscriptions',
href: '/subscriptions',
keywords: ['plans', 'billing'],
},
{ id: 'nav-licenses', label: 'Licenses', href: '/licenses', keywords: ['seats'] },
{ id: 'nav-billing', label: 'Billing', href: '/billing', keywords: ['invoices', 'payments'] },
{ id: 'nav-usage', label: 'Usage Analytics', href: '/usage', keywords: ['metrics', 'tokens'] },
{ id: 'nav-broadcasts', label: 'Broadcasts', href: '/broadcasts', keywords: ['announcements'] },
{ id: 'nav-surveys', label: 'Surveys', href: '/surveys', keywords: ['feedback', 'nps'] },
{ id: 'nav-flags', label: 'Feature Flags', href: '/flags', keywords: ['toggles', 'rollout'] },
{
id: 'nav-experiments',
label: 'Experiments',
href: '/experiments',
keywords: ['ab', 'a/b', 'tests'],
},
{ id: 'nav-audit', label: 'Audit Log', href: '/audit', keywords: ['history', 'events'] },
{ id: 'nav-products', label: 'Products', href: '/products' },
{ id: 'nav-invitations', label: 'Invitations', href: '/invitations', keywords: ['invites'] },
{ id: 'nav-promos', label: 'Promo Codes', href: '/promos', keywords: ['coupons', 'discounts'] },
{ id: 'nav-referrals', label: 'Referrals', href: '/referrals' },
{
id: 'nav-notifications',
label: 'Notifications',
href: '/notifications',
keywords: ['alerts'],
},
{ id: 'nav-organizations', label: 'Organizations', href: '/organizations', keywords: ['orgs'] },
{ id: 'nav-ops', label: 'Mission Control', href: '/ops', keywords: ['ops', 'operations'] },
{
id: 'nav-client-logs',
label: 'Client Logs',
href: '/ops/client-logs',
keywords: ['telemetry', 'errors'],
},
{ id: 'nav-extraction', label: 'Extraction', href: '/extraction' },
{ id: 'nav-settings', label: 'Settings', href: '/settings', keywords: ['config', 'preferences'] },
];
export interface AdminCommandActions {
/** Theme-aware label uses this to read the current mode. */
resolvedTheme?: 'light' | 'dark';
/** Toggle light/dark theme. */
toggleTheme: () => void;
/** Sign the admin out and return to /login. */
signOut: () => void;
}
/**
* Build the full admin command set: navigate-mode entries for the major
* surfaces plus the app-chrome actions (theme toggle, sign out).
*/
export function buildAdminCommands(actions: AdminCommandActions): Command[] {
const navigate: Command[] = NAV_COMMANDS.map(n => ({
id: n.id,
label: n.label,
mode: 'navigate',
href: n.href,
section: 'Go to',
keywords: n.keywords,
}));
const chrome: Command[] = [
{
id: 'action-toggle-theme',
label: actions.resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode',
mode: 'actions',
section: 'Preferences',
keywords: ['theme', 'dark', 'light', 'appearance'],
run: actions.toggleTheme,
},
{
id: 'action-sign-out',
label: 'Sign out',
mode: 'actions',
section: 'Account',
keywords: ['logout', 'log out', 'exit'],
run: actions.signOut,
},
];
return [...navigate, ...chrome];
}

34
dashboards/admin-web/src/lib/api.ts
View File

@ -597,9 +597,7 @@ export async function apiGetBroadcast(id: string) {
return apiFetch<ApiBroadcast>(`/admin/broadcasts/${id}`);
}
export async function apiCreateBroadcast(
body: Omit<ApiBroadcast, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>
) {
export async function apiCreateBroadcast(body: Omit<ApiBroadcast, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>) {
return apiFetch<ApiBroadcast>('/admin/broadcasts', {
method: 'POST',
body: JSON.stringify(body),
@ -663,16 +661,7 @@ export interface ApiSurvey {
description?: string;
questions: {
id: string;
type:
| 'single_choice'
| 'multiple_choice'
| 'rating'
| 'nps'
| 'text_short'
| 'text_long'
| 'dropdown'
| 'scale'
| 'ranking';
type: 'single_choice' | 'multiple_choice' | 'rating' | 'nps' | 'text_short' | 'text_long' | 'dropdown' | 'scale' | 'ranking';
text: string;
description?: string;
required: boolean;
@ -687,11 +676,7 @@ export interface ApiSurvey {
status: 'draft' | 'active' | 'paused' | 'closed';
startsAt?: string;
endsAt?: string;
displayTrigger:
| { type: 'immediate' }
| { type: 'delay_seconds'; seconds: number }
| { type: 'event'; eventName: string }
| { type: 'page_view'; pagePattern: string };
displayTrigger: { type: 'immediate' } | { type: 'delay_seconds'; seconds: number } | { type: 'event'; eventName: string } | { type: 'page_view'; pagePattern: string };
incentive?: { type: 'pro_days' | 'credits'; amount: number };
metrics: {
impressions: number;
@ -748,9 +733,7 @@ export async function apiGetSurvey(id: string) {
return apiFetch<ApiSurvey>(`/admin/surveys/${id}`);
}
export async function apiCreateSurvey(
body: Omit<ApiSurvey, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>
) {
export async function apiCreateSurvey(body: Omit<ApiSurvey, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>) {
return apiFetch<ApiSurvey>('/admin/surveys', {
method: 'POST',
body: JSON.stringify(body),
@ -776,17 +759,12 @@ export async function apiPauseSurvey(id: string) {
return apiFetch<{ success: boolean }>(`/admin/surveys/${id}/pause`, { method: 'POST' });
}
export async function apiGetSurveyResponses(
id: string,
options?: { isComplete?: boolean; limit?: number; offset?: number }
) {
export async function apiGetSurveyResponses(id: string, options?: { isComplete?: boolean; limit?: number; offset?: number }) {
const params = new URLSearchParams();
if (options?.isComplete !== undefined) params.set('isComplete', String(options.isComplete));
if (options?.limit) params.set('limit', String(options.limit));
if (options?.offset) params.set('offset', String(options.offset));
return apiFetch<{ responses: ApiSurveyResponse[]; total: number }>(
`/admin/surveys/${id}/responses?${params}`
);
return apiFetch<{ responses: ApiSurveyResponse[]; total: number }>(`/admin/surveys/${id}/responses?${params}`);
}
export async function apiGetSurveyRespondents(id: string) {

4
dashboards/admin-web/src/lib/billing-client.ts
View File

@ -58,9 +58,7 @@ export async function updateSubscription(
// ── Usage ───────────────────────────────────────────────────────
export async function listUsage(
options: { userId?: string; days?: number; limit?: number; productId?: string } = {}
) {
export async function listUsage(options: { userId?: string; days?: number; limit?: number; productId?: string } = {}) {
const params = new URLSearchParams();
if (options.userId) params.set('userId', options.userId);
if (options.days) params.set('days', String(options.days));

50
dashboards/admin-web/src/lib/chart-data.ts
View File

@ -1,50 +0,0 @@
/**
* Pure data-shaping helpers for the `@bytelyst/charts` / `@bytelyst/data-viz`
* migration (UX-2). Kept framework-free so they are unit-testable in the node
* vitest env and guarantee finite, NaN-free output before it ever reaches an
* SVG chart (the chart primitives also filter non-finite values defensively).
*/
import type { BarDatum } from '@bytelyst/charts';
import type { DonutSlice } from '@bytelyst/charts';
/** Coerce to a finite number, falling back to 0 for null/NaN/Infinity. */
export function finite(n: unknown): number {
const v = typeof n === 'number' ? n : Number(n);
return Number.isFinite(v) ? v : 0;
}
/** Map a list of rows to a finite numeric series (X = array index). */
export function seriesValues<T>(rows: readonly T[], key: keyof T): number[] {
return rows.map(r => finite(r[key]));
}
/**
* Map dated rows to `BarDatum[]`, showing an X label only every `labelEvery`
* bars (date `MM-DD`) so dense 30/90-day series don't overlap. Empty string
* suppresses a label without dropping the bar.
*/
export function dateBars<T extends { date: string }>(
rows: readonly T[],
valueKey: keyof T,
labelEvery = 5
): BarDatum[] {
return rows.map((r, i) => ({
id: r.date,
value: finite(r[valueKey]),
label: i % labelEvery === 0 ? String(r.date).slice(5) : '',
}));
}
/**
* Map breakdown rows to `DonutSlice[]`, dropping non-positive slices (a Donut
* of all-zero data renders an empty muted ring rather than NaN arcs).
*/
export function donutSlices<T>(
rows: readonly T[],
idKey: keyof T,
valueKey: keyof T
): DonutSlice[] {
return rows
.map(r => ({ id: String(r[idKey]), label: String(r[idKey]), value: finite(r[valueKey]) }))
.filter(s => s.value > 0);
}

22
dashboards/admin-web/src/lib/diagnostics-client.ts
View File

@ -180,9 +180,7 @@ export function createDiagnosticsClient(config: DiagnosticsClientConfig) {
if (options.limit) params.set('limit', options.limit.toString());
if (options.offset) params.set('offset', options.offset.toString());
const result = await client.safeFetch<QuerySessionsResult>(
`/api/diagnostics/sessions?${params.toString()}`
);
const result = await client.safeFetch<QuerySessionsResult>(`/api/diagnostics/sessions?${params.toString()}`);
if (result.error) throw new Error(result.error);
return result.data!;
},
@ -204,14 +202,11 @@ export function createDiagnosticsClient(config: DiagnosticsClientConfig) {
},
async updateSession(sessionId: string, request: UpdateSessionRequest): Promise<DebugSession> {
const result = await client.safeFetch<DebugSession>(
`/api/diagnostics/sessions/${sessionId}`,
{
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(request),
}
);
const result = await client.safeFetch<DebugSession>(`/api/diagnostics/sessions/${sessionId}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(request),
});
if (result.error) throw new Error(result.error);
return result.data!;
},
@ -272,10 +267,7 @@ export function createDiagnosticsClient(config: DiagnosticsClientConfig) {
// Screenshots
// -------------------------------------------------------------------------
async getScreenshots(
sessionId: string,
productId: string
): Promise<
async getScreenshots(sessionId: string, productId: string): Promise<
Array<{
id: string;
blobUrl: string;

5
dashboards/admin-web/src/lib/docker-control.ts
View File

@ -54,10 +54,7 @@ export async function restartServiceContainer(serviceId: string): Promise<{ cont
throw new Error('Service is not restartable from admin ops');
}
const response = await dockerRequest(
'POST',
`/containers/${encodeURIComponent(container)}/restart?t=10`
);
const response = await dockerRequest('POST', `/containers/${encodeURIComponent(container)}/restart?t=10`);
if (![204, 304].includes(response.statusCode)) {
throw new Error(response.body || `Docker restart failed with status ${response.statusCode}`);
}

8
dashboards/admin-web/src/lib/extraction-client.ts
View File

@ -48,7 +48,7 @@ export interface ExtractionTask {
export async function extractText(
text: string,
taskId?: string,
modelId?: string
modelId?: string,
): Promise<ExtractResponse | null> {
try {
return await extractionApi.fetch<ExtractResponse>('/extract', {
@ -66,7 +66,7 @@ export async function extractTranscript(text: string): Promise<ExtractResponse |
export async function extractBatch(
inputs: Array<{ text: string; taskId?: string }>,
modelId?: string
modelId?: string,
): Promise<ExtractResponse[] | null> {
try {
const result = await extractionApi.fetch<{ results: ExtractResponse[] }>('/extract/batch', {
@ -102,9 +102,7 @@ export async function getTask(id: string): Promise<ExtractionTask | null> {
export async function getSidecarHealth(): Promise<{ status: string; sidecar?: unknown } | null> {
try {
return await extractionApi.fetch<{ status: string; sidecar?: unknown }>(
'/extract/sidecar-health'
);
return await extractionApi.fetch<{ status: string; sidecar?: unknown }>('/extract/sidecar-health');
} catch {
return null;
}

180
dashboards/admin-web/src/lib/ops-cockpit.ts
View File

@ -1,180 +0,0 @@
export type ServiceStatus = 'healthy' | 'degraded' | 'down' | 'maintenance';
export type OverallStatus = 'healthy' | 'degraded' | 'critical';
export interface OpsService {
id: string;
name: string;
group: string;
target: string;
status: ServiceStatus;
latency: number;
version?: string;
message?: string;
lastChecked: string;
}
export interface OpsStatusInput {
overall: OverallStatus;
timestamp: string;
services: OpsService[];
}
export interface InventoryService extends OpsService {
description: string;
management: 'docker' | 'vm';
exposure: 'internal' | 'public';
port?: number;
restartable: boolean;
}
export interface InventoryDataInput {
timestamp: string;
counts: {
services: number;
healthy: number;
degraded: number;
down: number;
hostTools: number;
};
services: InventoryService[];
hostTools: unknown[];
}
export interface ValkeyDataInput {
timestamp: string;
pattern: string;
limit: number;
summary: {
ping: string;
dbsize: number;
matchedKeys: number;
version: string;
usedMemoryHuman: string;
usedMemoryPeakHuman: string;
};
keys: unknown[];
}
export interface OpsCockpitTile {
label: string;
value: string;
detail: string;
tone: 'success' | 'warning' | 'danger' | 'neutral';
}
export interface OpsCockpitAction {
serviceId?: string;
action: string;
detail: string;
severity: 'critical' | 'warning' | 'info';
}
export interface OpsCockpit {
headline: string;
summary: string;
tiles: OpsCockpitTile[];
priorityActions: OpsCockpitAction[];
}
export function buildOpsCockpit(input: {
status: OpsStatusInput | null;
inventory: InventoryDataInput | null;
valkey: ValkeyDataInput | null;
}): OpsCockpit {
const { status, inventory, valkey } = input;
if (!status && !inventory && !valkey) {
return {
headline: 'Waiting for live ops telemetry',
summary: 'Refresh Mission Control to collect service, inventory, and cache health.',
tiles: [
{ label: 'Services', value: '--', detail: 'No sample yet', tone: 'neutral' },
{ label: 'Cache keys', value: '--', detail: 'Valkey not loaded', tone: 'neutral' },
{
label: 'Restartable issues',
value: '--',
detail: 'Inventory not loaded',
tone: 'neutral',
},
],
priorityActions: [
{
action: 'Refresh telemetry',
detail: 'Load the latest service and cache status before taking action.',
severity: 'info',
},
],
};
}
const unhealthyServices = status?.services.filter(service => service.status !== 'healthy') ?? [];
const restartableIssues = unhealthyServices.filter(service =>
inventory?.services.some(inv => inv.id === service.id && inv.restartable)
);
const cacheHealthy = valkey?.summary.ping === 'PONG';
const criticalCount = unhealthyServices.filter(service => service.status === 'down').length;
const degradedCount = unhealthyServices.filter(service => service.status === 'degraded').length;
const priorityActions: OpsCockpitAction[] = restartableIssues.map(service => ({
serviceId: service.id,
action: 'Restart service',
detail: `${service.name} is ${service.status}${service.message ? ` — ${service.message}` : ''}`,
severity: service.status === 'down' ? 'critical' : 'warning',
}));
if (!cacheHealthy && valkey) {
priorityActions.push({
action: 'Inspect Valkey',
detail: `Cache ping returned ${valkey.summary.ping}; inspect hot keys and dependent services.`,
severity: 'warning',
});
}
if (priorityActions.length === 0) {
priorityActions.push({
action: 'Review deploy readiness',
detail: 'All loaded systems are healthy; check recent errors before starting a deployment.',
severity: 'info',
});
}
const overall =
status?.overall ??
(criticalCount > 0 ? 'critical' : degradedCount > 0 ? 'degraded' : 'healthy');
const headline =
overall === 'critical'
? `Critical ops attention needed (${criticalCount} down)`
: overall === 'degraded'
? `Ops degraded (${degradedCount} warning${degradedCount === 1 ? '' : 's'})`
: 'Ops cockpit healthy';
return {
headline,
summary: `${inventory?.counts.healthy ?? 0}/${inventory?.counts.services ?? status?.services.length ?? 0} services healthy · Valkey ${cacheHealthy ? 'ready' : 'needs review'}`,
tiles: [
{
label: 'Healthy services',
value: String(
inventory?.counts.healthy ??
status?.services.filter(s => s.status === 'healthy').length ??
0
),
detail: `${inventory?.counts.services ?? status?.services.length ?? 0} tracked`,
tone: criticalCount > 0 ? 'danger' : degradedCount > 0 ? 'warning' : 'success',
},
{
label: 'Cache keys',
value: String(valkey?.summary.dbsize ?? 0),
detail: valkey ? `${valkey.summary.usedMemoryHuman} used` : 'Valkey not loaded',
tone: cacheHealthy ? 'success' : 'warning',
},
{
label: 'Restartable issues',
value: String(restartableIssues.length),
detail: restartableIssues.length ? 'Safe action available' : 'No restart needed',
tone: restartableIssues.length ? 'danger' : 'success',
},
],
priorityActions,
};
}

41
dashboards/admin-web/src/lib/predictive-client.ts
View File

@ -60,9 +60,7 @@ export async function getProductHealthDetail(productId: string): Promise<Product
}
export async function getHealthTrends(productId: string, days = 30): Promise<ProductHealth[]> {
return predictiveApi.fetch<ProductHealth[]>(
`/predictive/health/${productId}/trends?days=${days}`
);
return predictiveApi.fetch<ProductHealth[]>(`/predictive/health/${productId}/trends?days=${days}`);
}
// ── Churn Prediction ─────────────────────────────────────────
@ -91,11 +89,7 @@ export interface ChurnPrediction {
};
}
export async function getChurnScore(
userId: string,
productId: string,
horizon = 30
): Promise<ChurnPrediction> {
export async function getChurnScore(userId: string, productId: string, horizon = 30): Promise<ChurnPrediction> {
return predictiveApi.fetch<ChurnPrediction>('/predictive/churn-score', {
method: 'POST',
body: JSON.stringify({ userId, productId, horizon: String(horizon) }),
@ -112,22 +106,18 @@ export interface AtRiskUser {
predictionTimestamp: string;
}
export async function getAtRiskUsers(
options: {
productId?: string;
segment?: RiskSegment;
limit?: number;
offset?: number;
} = {}
): Promise<{ users: AtRiskUser[]; total: number }> {
export async function getAtRiskUsers(options: {
productId?: string;
segment?: RiskSegment;
limit?: number;
offset?: number;
} = {}): Promise<{ users: AtRiskUser[]; total: number }> {
const params = new URLSearchParams();
if (options.productId) params.set('productId', options.productId);
if (options.segment) params.set('segment', options.segment);
if (options.limit) params.set('limit', String(options.limit));
if (options.offset) params.set('offset', String(options.offset));
return predictiveApi.fetch<{ users: AtRiskUser[]; total: number }>(
`/predictive/at-risk-users?${params}`
);
return predictiveApi.fetch<{ users: AtRiskUser[]; total: number }>(`/predictive/at-risk-users?${params}`);
}
export interface UserRiskProfile extends ChurnPrediction {
@ -159,12 +149,8 @@ export async function getModelPerformance(): Promise<ModelPerformance> {
return predictiveApi.fetch<ModelPerformance>('/predictive/model/performance');
}
export async function getFeatureImportance(): Promise<
Array<{ feature: string; importance: number }>
> {
const res = await predictiveApi.fetch<{
features: Array<{ feature: string; importance: number }>;
}>('/predictive/model/features');
export async function getFeatureImportance(): Promise<Array<{ feature: string; importance: number }>> {
const res = await predictiveApi.fetch<{ features: Array<{ feature: string; importance: number }> }>('/predictive/model/features');
return res.features;
}
@ -256,10 +242,7 @@ export async function getCampaignStats(id: string): Promise<Campaign['stats']> {
return predictiveApi.fetch<Campaign['stats']>(`/predictive/campaigns/${id}/stats`);
}
export async function triggerCampaign(
id: string,
testUserId?: string
): Promise<{ triggered: number }> {
export async function triggerCampaign(id: string, testUserId?: string): Promise<{ triggered: number }> {
return predictiveApi.fetch<{ triggered: number }>(`/predictive/campaigns/${id}/trigger`, {
method: 'POST',
body: JSON.stringify(testUserId ? { testUserId } : {}),

17
dashboards/admin-web/src/lib/product-context.tsx
View File

@ -1,10 +1,9 @@
'use client';
import { createContext, useContext, useState, useCallback, useEffect, type ReactNode } from 'react';
import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
import { KNOWN_PRODUCTS, PRODUCT_ID } from '@/lib/product-constants';
const STORAGE_KEY = 'admin_selected_product';
const PRODUCT_CHANGED_EVENT = 'admin:product-changed';
interface ProductContextValue {
productId: string;
@ -23,24 +22,10 @@ function getInitialProduct(): string {
export function ProductProvider({ children }: { children: ReactNode }) {
const [productId, setProductIdState] = useState<string>(getInitialProduct);
useEffect(() => {
function syncSelectedProduct() {
setProductIdState(getInitialProduct());
}
window.addEventListener(PRODUCT_CHANGED_EVENT, syncSelectedProduct);
window.addEventListener('storage', syncSelectedProduct);
return () => {
window.removeEventListener(PRODUCT_CHANGED_EVENT, syncSelectedProduct);
window.removeEventListener('storage', syncSelectedProduct);
};
}, []);
const setProductId = useCallback((id: string) => {
setProductIdState(id);
if (typeof window !== 'undefined') {
localStorage.setItem(STORAGE_KEY, id);
window.dispatchEvent(new Event(PRODUCT_CHANGED_EVENT));
}
}, []);

14
dashboards/admin-web/vitest.config.ts
View File

@ -5,17 +5,7 @@ export default defineConfig({
test: {
environment: 'node',
globals: true,
exclude: ['e2e/**', 'node_modules/**', '.next/**'],
// Inline the workspace SVG-chart packages so Vitest transforms them and
// resolves their `react` import through the dedupe below. Without this the
// chart dist (linked from a sibling repo's pnpm store) loads a second
// physical React copy and `renderToStaticMarkup` throws "Invalid hook call".
// The real Next/webpack build already dedupes these to admin-web's React.
server: {
deps: {
inline: [/@bytelyst\/(charts|data-viz|command-palette|dashboard-components|motion)/],
},
},
exclude: ['e2e/**', 'node_modules/**'],
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
@ -42,7 +32,5 @@ export default defineConfig({
alias: {
'@': path.resolve(__dirname, './src'),
},
// Force a single physical React/React-DOM copy for SSR chart render tests.
dedupe: ['react', 'react-dom'],
},
});

6
dashboards/tracker-web/.gitignore vendored
View File

@ -11,12 +11,6 @@
# testing
/coverage
# playwright e2e artifacts
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
# next.js
/.next/
/out/

19
dashboards/tracker-web/.prettierignore
View File

@ -1,19 +0,0 @@
# Build output
.next/
out/
build/
# Dependencies
node_modules/
# Coverage + test artifacts
coverage/
test-results/
playwright-report/
blob-report/
# Generated / vendored
next-env.d.ts
*.tsbuildinfo
pnpm-lock.yaml
package-lock.json

1
dashboards/tracker-web/README.md
View File

@ -36,7 +36,6 @@ npm run dev # starts on port 3003
## Environment Variables
See `.env.local.example` for required variables:
- `PLATFORM_API_URL` — Platform service URL (default `http://localhost:4003`)
- `JWT_SECRET` — Shared JWT secret
- `PRODUCT_ID` — Product scope (e.g., `lysnrai`, `chronomind`, `nomgap`)

142
dashboards/tracker-web/docs/TEST_VALIDATION_LOG.md
View File

@ -1,142 +0,0 @@
# Test Validation Log — `@bytelyst/tracker-web`
This log tracks the validation/hardening effort for the tracker-web dashboard's test
suite. Every gate is run from the repo root, filtered to this package. A gate is only
marked green if it was actually executed and passed.
All commands are run as:
```bash
cd /Users/sd9235/code/mygh/learning_ai_common_plat
pnpm --filter @bytelyst/tracker-web <script>
```
---
## Baseline (before any changes)
Recorded at repo HEAD `77b074f3`.
| Gate | Command | Result | Notes |
| ------------- | --------------------------------------------------- | ------ | -------------------------------------------------------------------------------------- |
| typecheck | `pnpm --filter @bytelyst/tracker-web typecheck` | PASS | `tsc --noEmit`, exit 0 |
| lint | `pnpm --filter @bytelyst/tracker-web lint` | PASS | `eslint`, exit 0 |
| test (unit) | `pnpm --filter @bytelyst/tracker-web test` | PASS | 8 files, 55 tests |
| test:coverage | `pnpm --filter @bytelyst/tracker-web test:coverage` | RUNS | 90.78% stmts / 84.78% branch (only files imported by tests are measured) |
| build | `pnpm --filter @bytelyst/tracker-web build` | PASS | `next build --webpack`, 14 routes |
| format:check | `pnpm --filter @bytelyst/tracker-web format:check` | FAIL | `README.md`, `docs/roadmaps/UX_INTEGRATION_BYTELYST.md` not Prettier-formatted |
| test:e2e | `pnpm --filter @bytelyst/tracker-web test:e2e` | FAIL | 9 passed / 3 failed (see below) |
| size:check | `pnpm --filter @bytelyst/tracker-web size:check` | FAIL | `bundlesize` cannot load — `iltorb` native module won't build on Node 25 (env blocker) |
### Baseline e2e failures (3)
1. `Tracker Login Page › shows error for invalid credentials` — depends on a live
platform-service. With no backend, the login proxy returns 502
"Platform service unavailable", which does not match `/failed|error|invalid/i`.
2. `Tracker — Public Roadmap › roadmap page can toggle between board and list view` —
list view renders "No items found" (no backend data), so `table, [role='list']`
never appears.
3. `Tracker — Health › GET /api/health returns ok` — the dev server has no
`PLATFORM_API_URL` / `JWT_SECRET` / `DEFAULT_PRODUCT_ID` set, so `/api/health`
correctly returns `degraded` (503), not `ok`.
Root cause for all three: the e2e suite depends on a live platform-service and ambient
env, which violates the determinism requirement ("mock network at the route/proxy
boundary; don't depend on a live platform-service").
### Out-of-scope / environment blockers
- **`size:check` (bundlesize)**: `bundlesize@0.18.2` (latest, unmaintained) transitively
requires `brotli-size@0.1.0` → `iltorb@2.4.5`, a deprecated native addon that does not
compile on Node 25 (`Cannot find module './build/bindings/iltorb.node'`). `pnpm rebuild
iltorb` produces no `build/` output. The broken dependency lives in the root
`node_modules` (shared infra, out of scope to patch), and no newer `bundlesize` exists.
Bundle budgets are instead verified manually against the gzipped build output.
---
## Changes
Work proceeded as small, independently-pushed units. Commits (newest last):
| SHA | Commit |
| ---------- | ------------------------------------------------------------------------------- |
| `d0707f22` | docs(tracker-web): add TEST_VALIDATION_LOG with baseline gate results |
| `8738d07d` | fix(tracker-web): format markdown + ignore e2e artifacts in prettier/git |
| `1c231d66` | test(tracker-web): make e2e deterministic + add axe a11y and console checks |
| `772609c9` | test(tracker-web): cover untested API routes + tracker-client, enforce coverage |
### What changed
1. **format:check** — Ran Prettier over `README.md` and
`docs/roadmaps/UX_INTEGRATION_BYTELYST.md`. Added `.prettierignore` and
`.gitignore` entries for `coverage/`, `test-results/`, `playwright-report/` so
generated artifacts no longer break the format/lint gates. (`8738d07d`)
2. **e2e** — Rewrote `e2e/tracker.spec.ts` to be deterministic: all platform-service
calls are mocked at the Next.js proxy boundary (`/api/tracker`, `/api/auth`), and
`/api/health`'s required env vars are supplied via `playwright.config.ts`
`webServer.env`. Added a login→dashboard happy path, board/list toggle, submit-modal
and vote-prompt flows, axe-core accessibility assertions (serious/critical), and a
no-unexpected-console-errors check. axe-core is resolved from the workspace (it is a
transitive dep of `eslint-plugin-jsx-a11y`) so **no new dependency / lockfile change**
was introduced. (`1c231d66`)
- **Real bug fixed (in scope):** the axe gate flagged `select-name` (critical) —
the roadmap type-filter and submit-modal `<select>` had no accessible name. Added
`aria-label`s in `src/app/roadmap/page.tsx`.
3. **coverage** — Added unit tests for the untested proxy routes
(`auth/mfa/verify`, `auth/oauth/[provider]`, `telemetry/ingest`), the
`tracker-client` API surface (path/method/body + `x-product-id` injection), and
`product-config`. Overall coverage rose from ~90% to **94.36% stmts / 86.58% branch
/ 94.28% funcs / 96.99% lines** (55 → 91 unit tests). Also fixed the vitest threshold
config: the legacy `thresholds.global` nesting is ignored by the v8 provider, so the
80% gate was silently disabled; it is now enforced and passing. (`772609c9`)
### Final gate results (all run from repo root, filtered to this package)
| Gate | Command | Result |
| ------------- | --------------------------------------------------- | --------------------------------------------------------- |
| typecheck | `pnpm --filter @bytelyst/tracker-web typecheck` | PASS (exit 0) |
| lint | `pnpm --filter @bytelyst/tracker-web lint` | PASS (exit 0, 0 warnings) |
| test (unit) | `pnpm --filter @bytelyst/tracker-web test` | PASS — 13 files, 91 tests |
| test:coverage | `pnpm --filter @bytelyst/tracker-web test:coverage` | PASS — 94.36 / 86.58 / 94.28 / 96.99, thresholds enforced |
| build | `pnpm --filter @bytelyst/tracker-web build` | PASS — `next build --webpack`, 14 routes |
| format:check | `pnpm --filter @bytelyst/tracker-web format:check` | PASS |
| test:e2e | `pnpm --filter @bytelyst/tracker-web test:e2e` | PASS — 18 tests (chromium) |
| size:check | `pnpm --filter @bytelyst/tracker-web size:check` | BLOCKED (env) — verified manually, see below |
### Coverage by file group (final)
| Group | % Stmts | Notes |
| ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `app/api/**` routes | 89–100 | All proxy handlers covered incl. error + 502 paths |
| `lib/` | ~92 | `tracker-client`, `telemetry`, `utils`, `product-config` covered |
| `components/ui` | 0 | `Primitives.tsx` not rendered — component render tests would need jsdom + @testing-library, which were not added to avoid a lockfile-churning dependency change (see blockers). |
### bundlesize budgets — manual verification
`size:check` (bundlesize) cannot execute in this environment (see blocker above), so the
gzipped sizes of the budgeted chunks were measured directly after `build`. All are within
budget with comfortable margin, e.g.:
- `framework-*.js`: 58.3 kB gzip (budget 100 kB)
- `main-*.js`: 37.3 kB gzip (budget 50 kB)
- `app/layout-*.js`: 3.6 kB gzip (budget 150 kB)
- largest route `app/dashboard/items/page-*.js`: 6.0 kB gzip (budget 30 kB)
No budget was raised; no regression observed.
### Out-of-scope / environment blockers (final)
- **`size:check`**: `bundlesize@0.18.2` → `brotli-size@0.1.0` → `iltorb@2.4.5` (deprecated
native addon) will not compile on Node 25. The broken package lives in the root
`node_modules` (shared infra), and no newer `bundlesize` exists. Verified budgets
manually instead (above). No in-scope fix is possible without replacing the tool or
patching shared infra.
- **Component render tests** (`components/ui/Primitives.tsx`): would require adding
`@testing-library/react` + a jsdom/happy-dom environment. A `pnpm add` in this
environment re-normalises the entire monorepo lockfile (observed: ~5.8k net line
churn under `--offline`), which is an unacceptable shared-infra change for this task,
so component-render coverage was intentionally left out. Component _logic_ is exercised
end-to-end via the deterministic Playwright suite instead.

87
dashboards/tracker-web/docs/roadmaps/BACKEND_ENABLERS.md
View File

@ -1,87 +0,0 @@
# tracker-web — Backend Enablers
> Follow-ups that **cannot ship from `dashboards/tracker-web` alone** because they require a change
> to the shared `services/platform-service`. They are the only remaining items on the
> [UX integration roadmap](UX_INTEGRATION_BYTELYST.md) and are **excluded from its ✅ count** until
> the backend enabler lands.
>
> **Hard constraint for every item below:** `platform-service` is **shared by 9 products**
> (LysnrAI, MindLyst, ChronoMind, JarvisJr, NomGap, PeakPulse, FlowMonk, NoteLett, ActionTrail,
> EffoRise, LocalMemGPT — see `AGENTS.md`). Every change here **must be additive and
> backward-compatible**: no behavioural change for products that do not opt in, existing rows/reads
> keep working, and every persisted document keeps its `productId`.
| ID | Title | Blocks | Target module | Status |
| ---- | ----------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------- | -------------- |
| BE-1 | Server-side HTML sanitization for item/comment bodies | UX-12.3 (rich-text) | `services/platform-service` — items + comments write paths | 🔒 Not started |
| BE-2 | Tracker-event notifications feed | UX-13.1 (`NotificationCenter`) | `services/platform-service` — notifications module + `/api/tracker` proxy | 🔒 Not started |
---
## BE-1 — Server-side HTML sanitization for `items.description` + `comments.body`
- **Title:** Sanitize rich HTML on the item-description and comment-body write paths.
- **Blocking roadmap item:** [UX-12.3](UX_INTEGRATION_BYTELYST.md#ux-12--detail--board-richness-tabs--tooltip--drawer--timeline--rich-text)
— adopt `@bytelyst/rich-text` `RichTextEditor` / `RichTextViewer` in tracker-web.
- **Target module:** `services/platform-service` — the **items** module (`items.description`) and the
**comments** module (`comments.body`), applied **server-side before persist** (create + update).
- **Why it's blocked:** Today `TrackerItem.description` and `Comment.body` are plain `string`s
rendered with `whitespace-pre-wrap`; the `/api/tracker/*` proxy neither stores nor sanitizes rich
HTML. Adopting a rich-text editor client-side would persist attacker-controlled HTML with no
server-side sanitization (stored-XSS), so it must not be done until the backend guarantees safety.
### Acceptance criteria
- HTML is sanitized **on the server** (never trust the client) on every write to `items.description`
and `comments.body` (create and update).
- **Allowlist** of formatting tags only — e.g. `p`, `br`, `strong`, `em`, `u`, `s`, `a`,
`ul`/`ol`/`li`, `blockquote`, `code`, `pre`, `h1`–`h3`. Everything else is stripped/escaped.
- **Attribute allowlist:** only safe attributes survive; `a[href]` is restricted to
`http:` / `https:` / `mailto:` schemes (and gets `rel="noopener noreferrer"`).
- **Stripped unconditionally:** `<script>` / `<style>` / `<iframe>` / `<object>`, all inline
event-handler attributes (`on*`), and `javascript:` / `data:` URLs.
- Output is idempotent (sanitizing already-sanitized content is a no-op) and length-bounded as today.
- **Backward-compatible:** existing plain-text rows still read correctly; products that send plain
text are unaffected; the response shape is unchanged. **No behavioural change for the other 8
products** sharing `platform-service`.
- Unit tests cover the XSS vectors above (script injection, `onerror=`, `javascript:` href,
`data:` URI, mismatched/oversized tags).
### Unblocks (tracker-web side, once shipped)
- Swap the description/comment `<textarea>` for `RichTextEditor` (compose) and render saved content
with `RichTextViewer` — no client-side `dangerouslySetInnerHTML` of unsanitized content.
---
## BE-2 — Tracker-event notifications feed
- **Title:** Emit + expose a per-user notifications feed for tracker events.
- **Blocking roadmap item:** [UX-13.1](UX_INTEGRATION_BYTELYST.md#ux-13--notifications-surface-via-bytelystnotifications-ui-stretch--data-gated)
— mount `NotificationCenter` (bell + `InboxItem` rows) in tracker-web.
- **Target module:** `services/platform-service` — its **existing notifications module** (event
emission) + the `/api/tracker` proxy (read surface).
- **Why it's blocked:** tracker exposes **no notifications feed** — the `/api/tracker/*` proxy
surfaces only items / comments / votes / roadmap. `NotificationCenter`/`InboxItem` have nothing to
bind to, so only the client-side `BannerStack`/`Announcement` (UX-13.2) shipped.
### Acceptance criteria
- Tracker events emit notifications into the **existing** notifications module — at minimum:
**new comment**, **status change**, and **vote milestone** (e.g. crossing 10/25/50 votes).
- Each notification is **fanned out to the item author and any subscribers/watchers** of the item,
and is **stamped with `productId`** so the feed is product-scoped.
- A read API (list with pagination, unread count, mark-as-read / mark-all-read) is **exposed through
the `/api/tracker` proxy** so the dashboard reads it with the existing auth token.
- Payload shape is compatible with `@bytelyst/notifications-ui` `InboxItem` (id, title/body, type,
timestamp, read flag, deep-link to the item).
- **Additive / backward-compatible:** emitting these notifications causes **no behavioural change for
the 9 products that do not subscribe**; the notifications module contract is extended, not broken;
every notification document carries `productId`.
- Tests cover emission on each event type, author/subscriber targeting, product scoping, and the
unread-count / mark-as-read transitions.
### Unblocks (tracker-web side, once shipped)
- Bind `NotificationCenter` to the feed (bell + `InboxItem` rows) in the AppShell sidebar/header,
reading via the `/api/tracker` proxy.

423
dashboards/tracker-web/docs/roadmaps/UX_INTEGRATION_BYTELYST.md
View File

@ -1,423 +0,0 @@
# tracker-web × ByteLyst UX Integration Roadmap
> **Purpose:** Adopt the latest shared `@bytelyst/*` UX (proven in the `learning_ai_uxui_web`
> showcase) into `tracker-web`, replacing bespoke/raw UI with shared primitives, charts, command
> palette, toasts, and motion — while keeping the existing OKLCH token system and dark mode.
> **Delegation target:** Devin CLI (`devin --prompt-file docs/roadmaps/UX_INTEGRATION_BYTELYST.md`).
>
> **Repo:** `learning_ai_common_plat/dashboards/tracker-web` (`@bytelyst/tracker-web`)
> **Run dir:** this package · **Stack:** Next.js 16 · React 19 · TS 5 · Tailwind 4 · Vitest · Playwright
> **Showcase reference (read-only, do not edit):** `../../../copilot/learning_ai_uxui_web` — live demos
> of every package at `http://localhost:3010/showcase/*` and source in `src/catalog/examples/`.
---
## Current-state review (verified 2026-05-28)
| Surface | Today | Gap vs latest UX |
| ----------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Token system | shadcn-style OKLCH vars (`--background`, `--primary`, `--card`, `--chart-1..5`) + `.dark` in `globals.css` | `@bytelyst/ui` components expect `--bl-*` tokens → **need a bridge** |
| `/dashboard/items` | ✅ already on `@bytelyst/data-table` | good reference pattern |
| `/dashboard` overview | badge-pill stats; `--chart-1..5` defined but **unused** | swap to `charts`/`data-viz` (Donut, KpiCard, Sparkline) |
| `/dashboard/*` controls | raw `<input>/<select>/<button>`, hand-rolled modals (no focus-trap/Esc/scroll-lock) | `@bytelyst/ui` `Input`/`Button`/`Modal`/`Field` (a11y built-in) |
| `/dashboard` layout | hand-rolled sticky top nav | `@bytelyst/ui` `AppShell` |
| `/roadmap` (public) | hardcoded `slate-*`/`blue-*` — different visual language | re-skin to tokens + primitives |
| Feedback | inline error/success `<div>`s | `@bytelyst/ui` `Toast` |
| Command/nav | none | `@bytelyst/command-palette` (⌘K) |
| Motion | none | `@bytelyst/motion` (reduced-motion aware) |
**Available shared components (verified exports):**
- `@bytelyst/ui`: `Button` `Input` `Field*` `Modal` `ConfirmDialog` `Badge` `StatusBadge`/`StatusDot`
`EmptyState` `Skeleton`/`TableSkeleton` `MetricCard` `EntityCard` `Toast`/`ToastProvider`/`useToast`
`AppShell*` `Drawer` `ActionMenu` `FilterBar` `PageHeader` `IconButton` `AlertBanner`
- `@bytelyst/charts`: `LineChart` `BarChart` `AreaChart` `Donut` `Gauge`
- `@bytelyst/data-viz`: `Sparkline` `BarSparkline` `KpiCard` `ProgressRing` `Heatmap`
- `@bytelyst/command-palette`: `CommandPalette` `CommandRegistryProvider` `useCommandPalette`
- `@bytelyst/motion`: `Reveal` `Stagger` `NumberFlow` `TiltCard` `ScrollProgress` … (see `/showcase/motion/all`)
- `@bytelyst/ui` (not yet in the adapter): `Tooltip` `Tabs` `SegmentedControl` `DropdownMenu`
`Switch` `Checkbox` `RadioGroup` `Select` `Textarea` `Panel` `Surface` `Card` `Separator`
`DataList` `Timeline` `Drawer` `ActionMenu` `IconButton` `AlertBanner`
- `@bytelyst/dashboard-components`: `PageHeader` `ErrorPage` `NotFoundPage` `EmptyState`
`LoadingSpinner` `LoadingSkeleton`
- `@bytelyst/auth-ui`: `LoginForm` `MfaChallenge` `SocialButtons` `PasswordStrengthBar` …
- `@bytelyst/notifications-ui`: `NotificationCenter` `InboxItem` `BannerStack` `Announcement`
- `@bytelyst/rich-text`: `RichTextEditor` (Tiptap v3, slash + mentions) · `RichTextViewer`
> **Expansion (2026-05-28):** waves **UX-9 … UX-13** below were added after re-auditing
> tracker-web against the full showcase catalog (`src/catalog/routes.ts`, ~60 entries).
> They are sequenced **after** the core UX-2 … UX-8 migration and several are explicitly
> **stretch / data-gated** — do not start them until the wave they depend on is green.
> Aligns with master `docs/ROADMAP.md` Phase 2.1 (UI primitives migration) — this roadmap is the
> concrete, delegate-ready execution plan and extends it with charts/palette/toast/motion.
---
## Ground rules (non-negotiable)
1. **Scope lock:** edit only files under `dashboards/tracker-web/`. Never edit shared
`packages/@bytelyst/*`, the showcase repo, other dashboards/services, or master `docs/ROADMAP.md`.
2. **Deps:** add shared packages as `"workspace:*"` in this package's `package.json` (they live in
the same monorepo — no publish needed). Run `pnpm install` from the repo root after edits.
3. **Preserve the token system + dark mode.** Do NOT rip out the shadcn OKLCH vars. Bridge `--bl-*`
onto them (UX-1) so shared components inherit tracker's theme automatically.
4. **Tests sacred; no fabrication.** Add tests for new behavior; only check a box after its
**Verify** passes. If blocked (e.g. needs live backend), leave `- [ ]` + a one-line note.
5. **Style preservation:** match existing conventions. No `console.log`. No hardcoded hex/color
literals in new code — use tokens / component props. No emojis in code.
6. **Commits:** one task = one conventional commit (`feat(tracker-web): …` / `refactor(tracker-web): …`),
flip the checkbox + paste short-SHA in the same commit. **Do not push** — operator reviews.
7. **Offline-first verification.** Pages needing auth/live data can't be fully E2E'd here; rely on
`typecheck` + `lint` + Vitest render tests + `build`. Mark backend-only checks as deferred.
## Verify commands (from `dashboards/tracker-web`)
```bash
pnpm typecheck && pnpm lint && pnpm test
pnpm build # final gate
```
---
## UX-1 — Foundation: token bridge + Primitives adapter ⟵ do first, everything depends on it
- [x] **1.1** Add `@bytelyst/ui` and `@bytelyst/design-tokens` as `workspace:*` deps; `pnpm install`. (dc01dd02)
- [x] **1.2** In `src/app/globals.css`, add a **bridge layer** mapping `--bl-*` → existing tracker
vars so shared components theme correctly in light + dark. Minimum set (extend as needed):
`css
:root, .dark {
--bl-accent: var(--primary);
--bl-accent-foreground: var(--primary-foreground);
--bl-bg-canvas: var(--background);
--bl-surface-card: var(--card);
--bl-text-primary: var(--foreground);
--bl-text-secondary: var(--muted-foreground);
--bl-text-tertiary: var(--muted-foreground);
--bl-border: var(--border);
--bl-danger: var(--destructive);
--bl-radius-control: var(--radius-md);
--bl-radius-card: var(--radius-lg);
/* map chart palette: --bl-chart-1 → --chart-1 … */
}
`
Reference the showcase's `globals.css` fallback layer for the full `--bl-*` surface. (dc01dd02)
- [x] **1.3** Create `src/components/ui/Primitives.tsx` re-exporting the `@bytelyst/ui` components
this app needs (`Button` `Input` `Field*` `Modal` `ConfirmDialog` `Badge` `StatusBadge`
`EmptyState` `Skeleton`/`TableSkeleton` `MetricCard` `Toast`/`ToastProvider`/`useToast`).
All app code imports from this adapter, never `@bytelyst/ui` directly (enables the Phase 1.3
UI-drift ratchet later). (dc01dd02)
- [x] **1.4** Smoke test: a Vitest render test asserting `Button` renders and a `StatusBadge`
gets a token-driven class. **Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`. (dc01dd02)
## UX-2 — Migrate dashboard controls to primitives
- [x] **2.1** `src/app/dashboard/items/page.tsx`: replace raw search `<input>`, the 3 filter
`<select>`s, the "+ New Item" `<button>`, and the **create modal** with `Input`/`Field`/
`Button`/`Modal`. The shared `Modal` fixes the current focus-trap/Esc/scroll-lock a11y gap.
Keep `DataTable` as-is; swap the inline type/status/priority cell pills to `StatusBadge`.
(UX-2.1 `a7a6f191`: tc/lint/test 165 ✓/format/build/e2e 18 ✓; cell pills → `StatusBadge`
tones, errors → `AlertBanner`, all via the Primitives adapter.)
- [x] **2.2** `src/app/dashboard/page.tsx`: wrap the `confirm()` delete in `ConfirmDialog`; replace
the bespoke `StatCard` chrome with `MetricCard` where it fits (full chart swap is UX-4).
(UX-2.2 `c9e65d43`: tc/lint/test 165 ✓/format/build/e2e 18 ✓. Total-count card → `MetricCard`;
breakdown `StatCard`s left for the UX-4 chart swap. The `confirm()` delete is the items-list
delete action — moved to the accessible `ConfirmDialog`; overview load errors → `AlertBanner`.)
- [x] **2.3** `src/app/dashboard/board/page.tsx` + `src/app/dashboard/items/[id]/page.tsx`:
migrate buttons/inputs/badges/modals to primitives; comments + status/priority controls.
(UX-2.3 `aa36671e`: tc/lint/test 165 ✓/format/build/e2e 18 ✓. Board pills → `StatusDot`/
`StatusBadge`/`Badge`, status-move → `Button`; detail editor/selects/vote/comment composer →
`Input`/`Textarea`/`Select`/`Button`; errors → `AlertBanner`. ActionMenu/Timeline untouched.)
- [x] **2.4** `src/app/login/page.tsx`: migrate form to `Field`/`Input`/`Button` + `AlertBanner`.
**Verify per task:** `pnpm typecheck && pnpm lint && pnpm build`.
(SUPERSEDED by UX-11 `328e3072`: the login surface was already adopted onto the shared
`@bytelyst/auth-ui` `LoginForm`/`MfaChallenge`, which provide the field/input/button +
inline error presentation this item asked for. Per the ground rules, the adopted surface is
not re-migrated to the lower-level `Field`/`Input`/`Button` primitives. No code change.)
## UX-3 — Re-skin the public roadmap to the token system
- [x] **3.1** `src/app/roadmap/page.tsx`: replace hardcoded `slate-*`/`blue-*` utility classes with
tokenized equivalents (`bg-card`, `text-foreground`, `text-muted-foreground`, `bg-primary`…)
and swap the type/priority/status pills to `Badge`/`StatusBadge`. Keep all behavior + the
board/list toggle. Vote buttons keep the a11y attrs added previously.
(UX-3.1 `f612d2ec`: tc/lint/test 165 ✓/format/build/e2e 18 ✓. type/priority → `Badge`, status
markers → `StatusDot` tones, stats → `MetricCard`, search/filter → `Input`/`Select`, errors →
`AlertBanner`; vote buttons keep aria-pressed/aria-label/title; zero new color literals.)
- [x] **3.2** Replace the submit + email-prompt modals with the shared `Modal`.
**Verify:** `pnpm typecheck && pnpm lint && pnpm build`; existing roadmap tests stay green.
(UX-3.2 `51c30ed7`: tc/lint/test 165 ✓/format/build/e2e 18 ✓. Both dialogs now use the shared
Radix `Modal`; the bespoke local `Modal` is removed; titles drive the accessible heading.)
## UX-4 — Data-viz for the overview (use the unused `--chart-*` tokens)
- [x] **4.1** Add `@bytelyst/charts` + `@bytelyst/data-viz` as `workspace:*` deps.
(UX-4 `f2dfddf9`: added with minimal `link:` importer entries in `pnpm-lock.yaml` — no full
re-normalisation; recovered/validated with `pnpm install --frozen-lockfile`.)
- [x] **4.2** `src/app/dashboard/page.tsx`: replace badge-pill breakdowns with a `Donut` for
**By Status** and **By Type**, a `BarChart`/`BarSparkline` for **By Priority**, and `KpiCard`s
for `total` + open/in-progress/done with trend where data allows.
(UX-4 `f2dfddf9`: KpiCards for total/open/in-progress/done; `Donut` By Status (centered total) + By Type; `BarChart` By Priority, coloured from the bridged `--bl-chart-*` palette. The chart
surface is split into `overview-charts.tsx` and loaded via `next/dynamic` (ssr:false) to keep
it out of the route bundle. No time-series in `getStats`, so KPI trend is omitted.)
- [x] **4.3** Add a Vitest test rendering the overview with mocked `getStats` (no NaN in SVG paths).
**Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
(UX-4 `f2dfddf9`: tc/lint/test 170 ✓/format/build/e2e 18 ✓. `overview-charts.test.tsx` renders
the surface with mocked stats via `react-dom/server` asserting no `NaN`, plus transform unit
tests; react deduped in vitest for a single SSR React instance.)
## UX-5 — Command palette (⌘K)
- [x] **5.1** Add `@bytelyst/command-palette` dep; mount `CommandRegistryProvider` + `CommandPalette`
in `src/app/providers.tsx` (or dashboard layout), opened with ⌘K / Ctrl-K.
(UX-5 `a7cb866c`: dep added with a minimal `link:` lockfile entry; `CommandRegistryProvider`
wraps the app in `providers.tsx`, the palette shell is loaded via `next/dynamic` (ssr:false).)
- [x] **5.2** Register commands: navigate (Overview / Items / Board / Roadmap), **New item**,
**Switch product** (wire `ProductSwitcher`), **Toggle theme**, **Sign out**.
(UX-5 `a7cb866c`: built in pure `src/lib/command-registry.ts`. New item → `/dashboard/items?new=1`
auto-opens the create modal; Switch commands call `setProductId` (same store as ProductSwitcher);
Toggle theme flips `setTheme`; Sign out calls `logout()` + routes to `/login`.)
- [x] **5.3** Vitest test: palette opens on ⌘K and lists registered commands.
**Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
(UX-5 `a7cb866c`: tc/lint/test 173 ✓/format/build/e2e 18 ✓. `command-menu.test.tsx` (jsdom)
asserts the builder set + that ⌘K opens the palette and lists New item/Toggle theme/Sign out.)
## UX-6 — Toasts replace inline status divs
- [x] **6.1** Mount `ToastProvider`; replace inline error/success `<div>`s across items/overview/
board/detail/roadmap with `toast()` calls (create, delete, vote, submit, load-error).
**Verify:** `pnpm typecheck && pnpm lint && pnpm build`.
(UX-6 `3fc559d0`: tc/lint/test 173 ✓/format/build/e2e 18 ✓. `ToastProvider` mounted in
`providers.tsx`; the AlertBanner/inline status divs across all five surfaces now emit `toast()`
(load errors + create/delete/vote/update/comment/submit). Roadmap submit toasts + closes the
dialog; item detail keeps one inline empty-state for the hard item-load failure.)
## UX-7 — Motion polish (reduced-motion aware)
- [x] **7.1** Add `@bytelyst/motion`; apply `Reveal`/`Stagger` to dashboard cards, items rows, and
roadmap columns; `NumberFlow` on the overview totals. Must no-op under `prefers-reduced-motion`.
**Verify:** `pnpm typecheck && pnpm lint && pnpm build`.
(UX-7 `002b55c3`: tc/lint/test 173 ✓/format/build/e2e 18 ✓. `@bytelyst/motion` added (minimal
`link:` lockfile entry). `Reveal` (staggered) on the overview KPI cards + chart surface and on
the items `DataTable`; `NumberFlow` on the overview KPI totals; all no-op under
`prefers-reduced-motion`. **Roadmap-column reveal intentionally omitted:** the offline
`@axe-core` gate scans `/roadmap` synchronously and `Reveal`'s transient sub-1 opacity trips
`color-contrast` (verified — even `from="scale"` at 0.92 fails on the muted card text), which
would breach the CC.4 a11y gate. The dashboard/items surfaces are auth-gated (not axe-scanned)
so they keep motion; no new a11y violations.)
## UX-8 — AppShell (stretch)
- [x] **8.1** Replace the hand-rolled top nav in `src/app/dashboard/layout.tsx` with `@bytelyst/ui`
`AppShell` (`AppShellSidebar`/`AppShellNav`/`AppShellPageHeader`/`AppShellSkipLink` + mobile
toggle), keeping `ProductSwitcher`, user email, sign-out, and adding the ⌘K trigger + theme
toggle. **Verify:** `pnpm typecheck && pnpm lint && pnpm build`; keyboard nav + skip-link work.
(UX-8 `cbd4274a`: tc/lint/test 182 ✓/format/build/e2e 18 ✓. `AppShell` + `AppShellSidebar`/
`AppShellNav`/`AppShellNavItem` (aria-current active route, client nav) / `AppShellMain`
(focusable `#main-content`) / `AppShellSkipLink` + mobile toggle + overlay. Sidebar keeps
`ProductSwitcher`, user email, Sign out and adds a ⌘K trigger (replays the hotkey) + theme
toggle. AppShell exports go through the Primitives adapter (CC.6) + export-presence test.
`AppShellPageHeader` deliberately not used — the per-page `PageHeader` (UX-10) stays the single
h1 per route, avoiding duplicate headings.)
## UX-9 — Complete the Primitives adapter (+ close the coverage gap)
> The adapter (`src/components/ui/Primitives.tsx`) currently re-exports ~12 components and
> sits at **0% test coverage** (flagged in `docs/TEST_VALIDATION_LOG.md`). Broaden it and
> lock it with a cheap export-presence test — no `@testing-library/react`/jsdom needed.
- [x] **9.1** Extend `Primitives.tsx` to also re-export the shared controls the app will need
in later waves: `Select` `Textarea` `Checkbox` `Switch` `RadioGroup` `Tooltip` `Tabs`
`SegmentedControl` `DropdownMenu` `Drawer` `ActionMenu` `IconButton` `AlertBanner`
`Card` `Panel` `Separator` `DataList` `Timeline`. Keep app code importing only from the
adapter (preserves the UI-drift ratchet).
- [x] **9.2** Add `src/__tests__/primitives-adapter.exports.test.ts` asserting every adapter
export is `defined` (a pure import test — raises `Primitives.tsx` off 0% without a DOM dep).
**Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`. (UX-9 `18a09b25`: tc/lint/test 159 ✓/build/e2e 18 ✓)
## UX-10 — Page chrome via `@bytelyst/dashboard-components`
- [x] **10.1** `src/app/error.tsx`: render `ErrorPage` from `@bytelyst/dashboard-components`
(keep the existing `trackEvent` telemetry side-effect + `reset` wiring). `not-found.tsx`
already uses `NotFoundPage` — leave it.
- [x] **10.2** Add `PageHeader` (title + breadcrumbs) to the top of `/dashboard`, `/dashboard/items`,
`/dashboard/board`, and the item detail page for a consistent header band.
- [x] **10.3** Replace ad-hoc loading text with `LoadingSpinner`/`LoadingSkeleton` where a full
`SkeletonGroup` (UX-2) is overkill.
**Verify:** `pnpm typecheck && pnpm lint && pnpm build`. (UX-10 verified: tc/lint/test 159 ✓/build/e2e 18 ✓; no new color literals)
## UX-11 — Adopt `@bytelyst/auth-ui` on the login surface
> `src/app/login/page.tsx` is a hand-rolled `<form>` with a second MFA step. The existing
> `/api/auth/*` proxy routes and `auth-context` stay as-is — only the **presentation** changes.
- [x] **11.1** Add `@bytelyst/auth-ui` as a `workspace:*` dep; `pnpm install` from the root.
(Added dep + minimal `link:` lockfile entry; avoided the env-specific full lockfile
re-normalisation churn — see TEST_VALIDATION_LOG blocker.)
- [x] **11.2** Replace the password form with `LoginForm` and the OTP step with `MfaChallenge`,
wiring their submit handlers to the current login/MFA fetch calls. Add `SocialButtons`
only for providers the backend actually supports (gate on `/api/auth/oauth/[provider]`).
Social gated to Google via `NEXT_PUBLIC_GOOGLE_CLIENT_ID`; an effect adds aria-labels to
the placeholder-only inputs so a11y + label queries stay green.
- [x] **11.3** Keep all existing auth tests green; add a render test asserting the login form
shows email/password fields + submit. (Render assertion is the Playwright "shows login form
with correct branding" test; added an auth-ui import smoke test for unit-level wiring.)
**Verify:** `pnpm typecheck && pnpm lint && pnpm test && pnpm build`. (UX-11 verified: tc/lint/test 162 ✓/build/e2e 18 ✓)
## UX-12 — Detail & board richness (Tabs · Tooltip · Drawer · Timeline · rich-text)
- [x] **12.1** `/dashboard` board↔list: use `SegmentedControl` (or `Tabs`) for the view toggle
instead of bespoke buttons; `Tooltip` on truncated titles / status dots.
(SegmentedControl now drives the roadmap board/list toggle — the app's only board↔list
toggle — replacing the bespoke `blue-600` buttons; `Tooltip` wraps the truncated board
card titles. e2e toggle selector updated button→radio. UX-12.1 `ddf25cf5`: tc/lint/test 162 ✓/build/e2e 18 ✓)
- [x] **12.2** Item detail: move row/item actions into an `ActionMenu`, and render the item's
activity/comment history with `Timeline`.
(Edit + Delete now live in an `ActionMenu` in the page header; comments render via
`Timeline`. UX-12.2 `32dac7d4`: tc/lint/test 162 ✓/build/e2e 18 ✓.)
- [ ] 🔒 **12.3 — BLOCKED ON BACKEND** _(stretch — needs HTML-capable description/comment storage)_
Swap the plain description/comment `<textarea>` for `RichTextEditor`, and render saved content
with `RichTextViewer`. **Only do this if** the backend stores/returns rich HTML safely.
**Verify per task:** `pnpm typecheck && pnpm lint && pnpm build`.
DEFERRED (data-gated): `TrackerItem.description` and `Comment.body` are plain `string`s
rendered with `whitespace-pre-wrap`; the `/api/tracker/*` proxy does not store or sanitize
rich HTML. Adopting `RichTextEditor` would persist HTML with no backend sanitization (XSS
risk) and mismatch the plain-text model, so `@bytelyst/rich-text` is intentionally not
adopted until the backend supports safe rich HTML. No dep added. **Kept out of the ✅ count.**
> **Required platform-service change** (see [`BACKEND_ENABLERS.md`](BACKEND_ENABLERS.md) §BE-1):
> Add server-side HTML sanitization on the **write** paths for `items.description` and
> `comments.body` in `services/platform-service` (the items + comments modules, before persist).
> The sanitizer must apply a strict allowlist of formatting tags (e.g. `p`, `br`, `strong`,
> `em`, `u`, `s`, `a`, `ul`/`ol`/`li`, `blockquote`, `code`, `pre`, headings) and safe attributes
> (`a[href]` restricted to `http`/`https`/`mailto`), and **strip** all `<script>`/`<style>`,
> inline event-handler attributes (`on*`), and `javascript:`/`data:` URLs. Sanitization must run
> on the server (never trust the client), preserve the existing plain-text reads for old rows,
> and be backward-compatible since the field is shared by every product. Once stored HTML is
> guaranteed safe, tracker-web can adopt `RichTextEditor` (compose) + `RichTextViewer` (render)
> with no client-side `dangerouslySetInnerHTML` of unsanitized content.
## UX-13 — Notifications surface via `@bytelyst/notifications-ui` (stretch / data-gated)
> **Gate:** only build this if tracker has (or will get) a notifications data source. If there
> is no feed, ship just the `BannerStack` for client-side system messages and leave the rest `- [ ]`.
- [ ] 🔒 **13.1 — BLOCKED ON BACKEND** Add `@bytelyst/notifications-ui`; mount a `NotificationCenter`
bell in the header (or AppShell from UX-8) fed by the notifications API, with `InboxItem` rows.
DEFERRED (data-gated): tracker exposes no notifications feed — the `/api/tracker/*` proxy
surfaces only items/comments/votes/roadmap, with no notifications endpoint. Per the wave
gate, `NotificationCenter`/`InboxItem` are left unbuilt until a feed exists. The dep is
added and the imports are smoke-tested so a future feed wiring starts from green.
**Kept out of the ✅ count.**
> **Required platform-service change** (see [`BACKEND_ENABLERS.md`](BACKEND_ENABLERS.md) §BE-2):
> Emit notifications into platform-service's **existing notifications module** on tracker
> events — at minimum **new comment**, **status change**, and **vote milestones** — fanned out
> to the item author and any subscribers/watchers, each stamped with `productId` so the feed
> stays product-scoped. Expose the resulting feed (list + unread count + mark-as-read) through
> the `/api/tracker` proxy so the dashboard can read it with the existing token, and keep the
> payload shape compatible with `@bytelyst/notifications-ui` `InboxItem`. The change must be
> additive/backward-compatible (platform-service is shared by 9 products — no behavioural change
> for products that do not subscribe). Once the feed exists, tracker-web binds `NotificationCenter`
> to it (bell + `InboxItem` rows) in the AppShell sidebar/header.
- [x] **13.2** Use `BannerStack` for top-of-page system/maintenance messages and `Announcement`
for a dismissible "what's new" pill. **Verify:** `pnpm typecheck && pnpm lint && pnpm build`.
(Added `@bytelyst/notifications-ui` workspace dep with a minimal `link:` lockfile entry;
`SystemBanners` mounts `BannerStack` (env `NEXT_PUBLIC_SYSTEM_NOTICE`, dismissible) +
a localStorage-dismissible `Announcement` at the top of the dashboard shell. UX-13.2
`3d22c303`: tc/lint/test 165 ✓/build/e2e 18 ✓.)
## Cross-cutting (run continuously)
- [x] **CC.1** Full suite green after every wave: `pnpm typecheck && pnpm lint && pnpm test && pnpm build`.
(Run after every UX-9…13 commit; final state UX-13.2: typecheck ✓ / lint ✓ / test 165 ✓ /
build ✓ / e2e 18 ✓.)
- [x] **CC.2** Dark mode parity — every migrated surface looks correct in `.dark`.
(Achieved structurally: the extended `--bl-*` bridge maps every adopted token onto tracker's
OKLCH vars — which already flip under `.dark` — or `color-mix` of them, plus semantic
`--success/--warning/--info` defined per-theme. No adopted component carries a fixed color.)
- [x] **CC.3** Zero new hardcoded color literals (grep `slate-|blue-600|#[0-9a-f]{6}` in changed files).
(`git diff <UX-base>..HEAD -- src` → no new `slate-N` / `blue-600` / `#hex` / `bg-[#…]`; in fact
UX-12.1 removed the roadmap toggle's `blue-600` literals.)
- [x] **CC.4** a11y — if `@axe-core/playwright` runs offline, assert no new violations on `/roadmap`
and `/login`; otherwise Vitest render assertions for roles/labels.
(axe-core runs offline in the Playwright suite asserting no serious/critical violations on
`/login` and `/roadmap`; both green. Added aria-labels where the shared `LoginForm` shipped
placeholder-only inputs.)
- [x] **CC.5** Update master `docs/ROADMAP.md` Phase 2.1 checkboxes **only if** the operator asks —
default: leave it, this doc is the source of truth for the integration.
(Default applied: master `docs/ROADMAP.md` left untouched — operator did not request it.)
- [x] **CC.6** **UI-drift ratchet:** once UX-9 lands, add an ESLint `no-restricted-imports` rule
forbidding direct `@bytelyst/ui` imports outside `src/components/ui/Primitives.tsx`, so all
future UI goes through the adapter. Fix any existing violations in the same commit.
(Done: rule + adapter exemption in `eslint.config.mjs`; no pre-existing violations; probe confirms it fires.)
- [x] **CC.7** **Bundle budget:** after chart/motion/rich-text waves, re-check the `bundlesize`
budgets in `package.json`. If a route grows, prefer dynamic `import()` for heavy surfaces
(charts, rich-text editor) over raising a budget. Note the gzipped sizes in the log.
(`bundlesize` itself is env-blocked — `iltorb` won't build on Node 25, see TEST_VALIDATION_LOG —
so budgets were verified by gzipping the built chunks: all within budget, no budget raised.
Largest: framework 58.3 kB / 100, main 37.3 kB / 50, layout 3.6 kB / 150; heaviest route
`/dashboard/items` 6.9 kB / 30, `/roadmap` 3.8 kB / 30, `/login` 3.1 kB / 30. No dynamic
import needed — charts/motion/rich-text waves were not adopted in this scope.)
- [x] **CC.8** **Coverage ratchet:** keep the enforced Vitest thresholds (80%) green; each wave
that adds a component should add the render/export test that keeps `Primitives.tsx` and new
surfaces above threshold (no silently-dead gates — see `docs/TEST_VALIDATION_LOG.md`).
(Enforced thresholds stay green: 94.36% stmts / 86.58% branch / 94.28% funcs / 96.99% lines,
165 tests. Added export/import smoke tests for the Primitives adapter, auth-ui and
notifications-ui. Note: v8 reports the pure re-export `Primitives.tsx` barrel as 0% — there
are no executable bodies to instrument — but the global gate is green and the export test
guards every re-export.)
## Progress
```
Core : UX-1 ✅ UX-2 ✅ UX-3 ✅ UX-4 ✅ UX-5 ✅ UX-6 ✅ UX-7 ✅ UX-8 ✅
Expand : UX-9 ✅ UX-10 ✅ UX-11 ✅ UX-12 ✅ UX-13 ✅
Backend-blocked (not in ✅ count) : UX-12.3 🔒 UX-13.1 🔒 (see BACKEND_ENABLERS.md)
```
**All client-only waves are complete.** Every task that can ship from `dashboards/tracker-web`
alone (Core UX-2 … UX-8 and Expand UX-9 … UX-13) is done. The only remaining items — **UX-12.3**
(rich-text) and **UX-13.1** (notifications feed) — are **🔒 blocked on a shared `platform-service`
change**, not on tracker-web. They are tracked as follow-ups in
[`BACKEND_ENABLERS.md`](BACKEND_ENABLERS.md) and are intentionally excluded from the ✅ count until
the backend enabler lands.
**UX-1 is done** (token bridge + Primitives adapter, commit `dc01dd02`) — the `--bl-*` bridge is
live, so shared components already inherit tracker's theme. **Start with UX-2.** Before editing,
read `src/app/globals.css` (the `--bl-*` bridge), `src/components/ui/Primitives.tsx` (the adapter
all app code imports from), and `src/app/dashboard/items/page.tsx` (the working `data-table`
adoption — the reference pattern). Execute **one task at a time**, verify + commit after each, and
do the **Core** waves (UX-2 … UX-8) before the **Expand** waves (UX-9 … UX-13). Treat 12.3 and all
of UX-13 as data-gated stretch — leave them `- [ ]` with a note if the backend can't support them.
---
## Status — Expand waves complete (2026-05-28)
The **Expand** waves (UX-9 … UX-13) and **all cross-cutting items (CC.1 … CC.8)** are done,
strictly scoped to `dashboards/tracker-web`. Each item was verified
(`typecheck` + `lint` + `test` + `build` + Playwright e2e/axe) and shipped as its own
conventional commit referencing its roadmap ID:
| Wave / item | Commit | Summary |
| ----------- | ---------- | ---------------------------------------------------------- |
| UX-9 | `18a09b25` | Broaden Primitives adapter + export-presence test |
| CC.6 | `73d2891d` | `no-restricted-imports` UI-drift ratchet |
| UX-10 | `3a9621f0` | `ErrorPage` + `PageHeader` + `LoadingSpinner` page chrome |
| UX-1.2 ext | `ccee7dfa` | Full `--bl-*` token bridge (enables CC.2 dark-mode parity) |
| UX-11 | `328e3072` | `LoginForm` + `MfaChallenge` on the login surface |
| UX-12.1 | `ddf25cf5` | `SegmentedControl` view toggle + board `Tooltip`s |
| UX-12.2 | `32dac7d4` | item-detail `ActionMenu` + `Timeline` comments |
| UX-13.2 | `3d22c303` | `BannerStack` + `Announcement` system messaging |
**🔒 Blocked on backend (data-gated, not in the ✅ count):** UX-12.3 (`RichTextEditor` — needs
server-side HTML sanitization on `items.description` + `comments.body`) and UX-13.1
(`NotificationCenter` — needs a real notifications feed). Both are owned follow-ups tracked in
[`BACKEND_ENABLERS.md`](BACKEND_ENABLERS.md); the needed client deps are already wired/smoke-tested
so enablement starts from green once the shared `platform-service` change ships.
**Core waves UX-2 … UX-8 are complete** (see the per-item SHAs above) — every wave that can ship
from `dashboards/tracker-web` alone is done. Nothing in this roadmap remains that is unblocked at
the tracker-web layer.

408
dashboards/tracker-web/e2e/tracker.spec.ts
View File

@ -1,174 +1,16 @@
import { test, expect, type Page, type Route } from '@playwright/test';
import { existsSync, readdirSync, readFileSync } from 'node:fs';
import { join } from 'node:path';
import { test, expect } from '@playwright/test';
/**
* E2E tests for the Tracker dashboard.
*
* These tests are deterministic: every call that would hit the backend
* platform-service is mocked at the Next.js proxy boundary (`/api/tracker/**`,
* `/api/auth/**`). No live platform-service is required. The only real server
* handler exercised end-to-end is `/api/health`, whose required env vars are
* provided by the Playwright `webServer.env` config.
* Tests cover login page, authentication redirects, public roadmap,
* and dashboard structure.
*/
/**
* Locate the axe-core browser source so we can inject it into the page.
*
* axe-core is already present in this pnpm monorepo as a transitive dependency
* of eslint-plugin-jsx-a11y (pulled in by eslint-config-next), so we resolve it
* from the store/node_modules rather than declaring a redundant dependency.
* Playwright runs this suite with cwd at the package root (dashboards/tracker-web).
*/
function resolveAxeSource(): string {
const candidates = [
join(process.cwd(), 'node_modules', 'axe-core', 'axe.js'),
join(process.cwd(), '..', '..', 'node_modules', 'axe-core', 'axe.js'),
];
for (const candidate of candidates) {
if (existsSync(candidate)) return readFileSync(candidate, 'utf-8');
}
// Fall back to scanning the pnpm store at the monorepo root.
const storeDir = join(process.cwd(), '..', '..', 'node_modules', '.pnpm');
const entry = readdirSync(storeDir).find(d => d.startsWith('axe-core@'));
if (!entry) {
throw new Error('Could not locate axe-core in node_modules or the pnpm store');
}
return readFileSync(join(storeDir, entry, 'node_modules', 'axe-core', 'axe.js'), 'utf-8');
}
const AXE_SOURCE = resolveAxeSource();
// ── Fixtures ────────────────────────────────────────────────────────
type RoadmapItem = {
id: string;
productId: string;
type: 'bug' | 'feature' | 'task';
status: 'open' | 'in_progress' | 'done';
priority: 'critical' | 'high' | 'medium' | 'low';
title: string;
description: string;
labels: string[];
assignee: string | null;
reportedBy: string;
source: 'internal' | 'user_submitted' | 'auto_detected';
visibility: 'internal' | 'public';
voteCount: number;
commentCount: number;
targetRelease: string | null;
createdAt: string;
updatedAt: string;
};
function makeItem(partial: Partial<RoadmapItem> & { id: string; title: string }): RoadmapItem {
return {
productId: 'tracker-e2e',
type: 'feature',
status: 'open',
priority: 'medium',
description: 'A sample roadmap item used in e2e tests.',
labels: [],
assignee: null,
reportedBy: 'system',
source: 'internal',
visibility: 'public',
voteCount: 0,
commentCount: 0,
targetRelease: null,
createdAt: '2025-01-01T00:00:00.000Z',
updatedAt: '2025-01-01T00:00:00.000Z',
...partial,
};
}
const ROADMAP_ITEMS: RoadmapItem[] = [
makeItem({ id: '1', title: 'Dark mode toggle', status: 'open', type: 'feature', voteCount: 12 }),
makeItem({
id: '2',
title: 'Faster sync engine',
status: 'in_progress',
type: 'feature',
priority: 'high',
voteCount: 8,
}),
makeItem({ id: '3', title: 'Export to CSV', status: 'done', type: 'task', voteCount: 5 }),
];
const ROADMAP_STATS = {
total: 3,
byStatus: { open: 1, in_progress: 1, done: 1 },
byType: { feature: 2, task: 1 },
totalVotes: 25,
};
/** Mock the public roadmap proxy endpoints so the page renders deterministically. */
async function mockRoadmap(page: Page): Promise<void> {
await page.route('**/api/tracker/**', async (route: Route) => {
const url = route.request().url();
if (url.includes('/public/roadmap/stats')) {
return route.fulfill({ json: ROADMAP_STATS });
}
if (url.includes('/public/items/')) {
const id = url.split('/public/items/')[1]?.split(/[?#]/)[0];
const item = ROADMAP_ITEMS.find(entry => entry.id === id);
return item
? route.fulfill({ json: item })
: route.fulfill({ status: 404, json: { error: 'Item not found' } });
}
if (url.includes('/public/roadmap')) {
return route.fulfill({
json: { items: ROADMAP_ITEMS, total: ROADMAP_ITEMS.length, limit: 100, offset: 0 },
});
}
// Default: empty success so nothing else hangs on the network.
return route.fulfill({ json: {} });
});
}
/** Inject axe-core and return only serious/critical accessibility violations. */
async function seriousA11yViolations(page: Page): Promise<{ id: string; impact: string }[]> {
await page.addScriptTag({ content: AXE_SOURCE });
const violations = await page.evaluate(async () => {
// axe is injected onto window by the script tag above.
const axe = (
window as unknown as {
axe: {
run: (
ctx: unknown,
opts: unknown
) => Promise<{ violations: { id: string; impact: string | null }[] }>;
};
}
).axe;
const result = await axe.run(document, {
runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] },
});
return result.violations.map(v => ({ id: v.id, impact: v.impact ?? 'unknown' }));
});
return violations.filter(v => v.impact === 'serious' || v.impact === 'critical');
}
/** Collect uncaught page errors and console.error messages (minus dev-only noise). */
function collectPageErrors(page: Page): string[] {
const errors: string[] = [];
const benign = ['favicon', 'Download the React DevTools', 'Failed to load resource', 'net::ERR_'];
page.on('pageerror', err => errors.push(`pageerror: ${err.message}`));
page.on('console', msg => {
if (msg.type() !== 'error') return;
const text = msg.text();
if (benign.some(b => text.includes(b))) return;
errors.push(`console.error: ${text}`);
});
return errors;
}
// ── Login page ──────────────────────────────────────────────────────
test.describe('Tracker Login Page', () => {
test('shows login form with correct branding', async ({ page }) => {
await page.goto('/login');
await expect(page.getByRole('heading', { name: 'Tracker' })).toBeVisible();
await expect(page.getByText('Tracker')).toBeVisible();
await expect(page.getByText('Feature requests, bugs & task management')).toBeVisible();
await expect(page.getByLabel('Email')).toBeVisible();
await expect(page.getByLabel('Password')).toBeVisible();
@ -181,28 +23,20 @@ test.describe('Tracker Login Page', () => {
});
test('shows error for invalid credentials', async ({ page }) => {
// Mock the login proxy to reject the credentials deterministically.
await page.route('**/api/auth/login', (route: Route) =>
route.fulfill({ status: 401, json: { error: 'Invalid email or password' } })
);
await page.goto('/login');
await page.getByLabel('Email').fill('bad@user.com');
await page.getByLabel('Password').fill('wrongpassword');
await page.getByRole('button', { name: /sign in/i }).click();
await expect(page.getByText('Invalid email or password')).toBeVisible({ timeout: 10000 });
await expect(page.getByText(/failed|error|invalid/i)).toBeVisible({
timeout: 10000,
});
});
test('shows loading state on submit', async ({ page }) => {
// Delay the login response so the loading state stays visible.
// Block API to keep loading state visible
await page.route(
'**/api/auth/login',
route =>
new Promise<void>(resolve =>
setTimeout(() => {
resolve();
route.fulfill({ status: 401, json: { error: 'nope' } });
}, 3000)
)
'**/api/auth/**',
route => new Promise(resolve => setTimeout(() => resolve(route.abort()), 3000))
);
await page.goto('/login');
await page.getByLabel('Email').fill('test@example.com');
@ -210,17 +44,8 @@ test.describe('Tracker Login Page', () => {
await page.getByRole('button', { name: /sign in/i }).click();
await expect(page.getByText('Signing in...')).toBeVisible();
});
test('has no serious accessibility violations', async ({ page }) => {
await page.goto('/login');
await expect(page.getByRole('heading', { name: 'Tracker' })).toBeVisible();
const violations = await seriousA11yViolations(page);
expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);
});
});
// ── Protected routes ────────────────────────────────────────────────
test.describe('Tracker — Protected Routes', () => {
test('/ redirects to login when not authenticated', async ({ page }) => {
await page.goto('/');
@ -233,210 +58,57 @@ test.describe('Tracker — Protected Routes', () => {
});
});
// ── Login → dashboard happy path (fully mocked) ─────────────────────
test.describe('Tracker — Authenticated dashboard', () => {
test('login redirects to dashboard and renders stats', async ({ page }) => {
await page.route('**/api/auth/login', (route: Route) =>
route.fulfill({
json: {
accessToken: 'fake-e2e-token',
user: { id: 'u1', email: 'admin@example.com', role: 'admin', displayName: 'Admin' },
},
})
);
await page.route('**/api/auth/me', (route: Route) =>
route.fulfill({
json: { id: 'u1', email: 'admin@example.com', role: 'admin', displayName: 'Admin' },
})
);
await page.route('**/api/tracker/**', (route: Route) => {
if (route.request().url().includes('/items/stats')) {
return route.fulfill({
json: {
productId: 'tracker-e2e',
total: 42,
byType: { bug: 10, feature: 30, task: 2 },
byStatus: { open: 20, in_progress: 12, done: 10 },
byPriority: { critical: 2, high: 10, medium: 20, low: 10 },
},
});
}
return route.fulfill({ json: {} });
});
await page.goto('/login');
await page.getByLabel('Email').fill('admin@example.com');
await page.getByLabel('Password').fill('correct-password');
await page.getByRole('button', { name: /sign in/i }).click();
await expect(page).toHaveURL(/\/dashboard/, { timeout: 10000 });
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
await expect(
page.getByTestId('bl-number-flow').filter({ hasText: '42' }).first()
).toBeVisible();
await expect(page.getByText('admin@example.com')).toBeVisible();
});
test('shows a retry path when dashboard stats fail', async ({ page }) => {
await page.route('**/api/auth/me', (route: Route) =>
route.fulfill({
json: { id: 'u1', email: 'admin@example.com', role: 'admin', displayName: 'Admin' },
})
);
let allowRecovery = false;
await page.route('**/api/tracker/**', (route: Route) => {
if (route.request().url().includes('/items/stats')) {
return !allowRecovery
? route.fulfill({ status: 502, json: { error: 'upstream unavailable' } })
: route.fulfill({
json: {
productId: 'tracker-e2e',
total: 7,
byType: { bug: 1, feature: 5, task: 1 },
byStatus: { open: 4, in_progress: 2, done: 1 },
byPriority: { critical: 0, high: 2, medium: 4, low: 1 },
},
});
}
return route.fulfill({ json: {} });
});
await page.addInitScript(() => localStorage.setItem('tracker_token', 'fake-e2e-token'));
await page.goto('/dashboard');
await expect(page.getByRole('heading', { name: /could not load dashboard/i })).toBeVisible();
allowRecovery = true;
await page.getByRole('button', { name: /retry/i }).click();
await expect(page.getByTestId('bl-number-flow').filter({ hasText: '7' }).first()).toBeVisible();
});
test('renders settings for admin configuration', async ({ page }) => {
await page.route('**/api/auth/me', (route: Route) =>
route.fulfill({
json: { id: 'u1', email: 'admin@example.com', role: 'admin', displayName: 'Admin' },
})
);
await page.addInitScript(() => localStorage.setItem('tracker_token', 'fake-e2e-token'));
await page.goto('/dashboard/settings');
await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Product context' })).toBeVisible();
await expect(page.getByLabel('Default product ID')).toBeVisible();
await expect(page.getByText('/api/tracker/[...path]')).toBeVisible();
await expect(page.getByText('/api/agent/v1/[...path]')).toBeVisible();
await expect(page.getByText('/api/webhooks/[...path]')).toBeVisible();
await page.getByLabel('Default product ID').fill('nomgap');
await page.getByRole('button', { name: /save product context/i }).click();
await expect(page.getByLabel('Select product')).toHaveValue('nomgap');
await expect(page.getByText('Saved product context.')).toBeVisible();
await expect(page.getByRole('link', { name: /open public roadmap/i })).toHaveAttribute(
'href',
'/roadmap'
);
});
});
// ── Public roadmap (mocked) ─────────────────────────────────────────
test.describe('Tracker — Public Roadmap', () => {
test.beforeEach(async ({ page }) => {
await mockRoadmap(page);
});
test('renders header and stats from mocked data', async ({ page }) => {
test('roadmap page renders board layout', async ({ page }) => {
await page.goto('/roadmap');
await expect(page.getByRole('heading', { name: /product roadmap/i })).toBeVisible();
await expect(page.getByText('Total Items')).toBeVisible();
// totalVotes stat from ROADMAP_STATS
await expect(page.getByText('25')).toBeVisible();
// The roadmap page is public — no auth required
await expect(page.getByText(/roadmap/i).first()).toBeVisible({
timeout: 10000,
});
});
test('has search and filter controls', async ({ page }) => {
test('roadmap page has search and filter controls', async ({ page }) => {
await page.goto('/roadmap');
await expect(page.getByPlaceholder(/search/i).first()).toBeVisible();
// Should have a search input
await expect(page.getByPlaceholder(/search/i).first()).toBeVisible({ timeout: 10000 });
});
test('has a submit-idea button', async ({ page }) => {
test('roadmap page has submit suggestion button', async ({ page }) => {
await page.goto('/roadmap');
await expect(page.getByRole('button', { name: /submit idea/i })).toBeVisible();
await expect(page.getByRole('button', { name: /suggest|submit|new/i }).first()).toBeVisible({
timeout: 10000,
});
});
test('shows status columns in board view with items', async ({ page }) => {
test('roadmap page shows status columns in board view', async ({ page }) => {
await page.goto('/roadmap');
await expect(page.getByRole('heading', { name: 'Planned' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'In Progress' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Complete' })).toBeVisible();
// Items land in the correct columns
await expect(page.getByRole('heading', { name: 'Dark mode toggle' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Faster sync engine' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Export to CSV' })).toBeVisible();
// Board view shows Planned, In Progress, Complete columns
await expect(page.getByText('Planned').first()).toBeVisible({
timeout: 10000,
});
await expect(page.getByText('In Progress').first()).toBeVisible();
await expect(page.getByText('Complete').first()).toBeVisible();
});
test('can toggle between board and list view', async ({ page }) => {
test('roadmap page can toggle between board and list view', async ({ page }) => {
await page.goto('/roadmap');
await expect(page.getByRole('heading', { name: 'Dark mode toggle' })).toBeVisible();
// The view toggle is a shared SegmentedControl (role=radio), UX-12.1.
await page.getByRole('radio', { name: 'List', exact: true }).click();
// List view still shows the items (rendered as rows, not a <table>)
await expect(page.getByRole('heading', { name: 'Dark mode toggle' })).toBeVisible();
await expect(page.getByRole('heading', { name: 'Export to CSV' })).toBeVisible();
});
test('opens the submit-idea modal', async ({ page }) => {
await page.goto('/roadmap');
await page.getByRole('button', { name: /submit idea/i }).click();
await expect(page.getByRole('heading', { name: /submit an idea/i })).toBeVisible();
await expect(page.getByPlaceholder('Your email')).toBeVisible();
});
test('prompts for email when voting without a saved email', async ({ page }) => {
await page.goto('/roadmap');
await page.getByRole('button', { name: /upvote dark mode toggle/i }).click();
await expect(page.getByRole('heading', { name: /enter your email to vote/i })).toBeVisible();
});
test('links submitted users to a public status page for an item', async ({ page }) => {
await page.goto('/status/1');
await expect(page.getByRole('heading', { name: 'Dark mode toggle' })).toBeVisible();
await expect(page.getByText('Submission status')).toBeVisible();
await expect(
page.getByText('We received this submission and it is waiting for triage.')
).toBeVisible();
await expect(page.getByText('12 votes')).toBeVisible();
await expect(page.getByRole('link', { name: /back to roadmap/i })).toBeVisible();
});
test('shows a helpful message for an unknown public status item', async ({ page }) => {
await page.goto('/status/missing');
await expect(page.getByRole('heading', { name: /submission not found/i })).toBeVisible();
await expect(page.getByRole('link', { name: /view roadmap/i })).toBeVisible();
});
test('has no serious accessibility violations', async ({ page }) => {
await page.goto('/roadmap');
await expect(page.getByRole('heading', { name: 'Dark mode toggle' })).toBeVisible();
const violations = await seriousA11yViolations(page);
expect(violations, JSON.stringify(violations, null, 2)).toEqual([]);
});
test('logs no unexpected console errors', async ({ page }) => {
const errors = collectPageErrors(page);
await page.goto('/roadmap');
await expect(page.getByRole('heading', { name: 'Dark mode toggle' })).toBeVisible();
expect(errors, errors.join('\n')).toEqual([]);
// Look for view toggle buttons
const listBtn = page.getByRole('button', { name: /list/i });
if (await listBtn.isVisible()) {
await listBtn.click();
// Should now show list view
await expect(page.locator("table, [role='list']").first()).toBeVisible({
timeout: 5000,
});
}
});
});
// ── Health endpoint (real handler, env provided by webServer) ───────
test.describe('Tracker — Health', () => {
test('GET /api/health returns ok with required env set', async ({ request }) => {
test('GET /api/health returns ok', async ({ request }) => {
const res = await request.get('/api/health');
expect(res.ok()).toBeTruthy();
const body = await res.json();
expect(body.status).toBe('ok');
expect(body.service).toBe('tracker-dashboard');
expect(Array.isArray(body.checks)).toBe(true);
expect(body.checks.every((c: { status: string }) => c.status === 'pass')).toBe(true);
});
});

52
dashboards/tracker-web/eslint.config.mjs
View File

@ -1,55 +1,21 @@
import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
import nextTs from 'eslint-config-next/typescript';
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
{
rules: {
'react-hooks/set-state-in-effect': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{ argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },
],
// CC.6 UI-drift ratchet: all @bytelyst/ui usage must go through the
// Primitives adapter so future UI stays consistent and centrally swappable.
'no-restricted-imports': [
'error',
{
paths: [
{
name: '@bytelyst/ui',
message:
'Import @bytelyst/ui components via the adapter: src/components/ui/Primitives.tsx (UI-drift ratchet, CC.6).',
},
],
patterns: [
{
group: ['@bytelyst/ui/*'],
message:
'Import @bytelyst/ui components via the adapter: src/components/ui/Primitives.tsx (UI-drift ratchet, CC.6).',
},
],
},
],
},
},
{
// The adapter itself is the single sanctioned place to import @bytelyst/ui.
files: ['src/components/ui/Primitives.tsx'],
rules: {
'no-restricted-imports': 'off',
"react-hooks/set-state-in-effect": "off",
"@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_" }],
},
},
globalIgnores([
'.next/**',
'out/**',
'build/**',
'coverage/**',
'test-results/**',
'playwright-report/**',
'next-env.d.ts',
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);

9
dashboards/tracker-web/package.json
View File

@ -25,20 +25,11 @@
"@azure/identity": "^4.13.0",
"@azure/keyvault-secrets": "^4.10.0",
"@bytelyst/api-client": "workspace:*",
"@bytelyst/auth-ui": "workspace:*",
"@bytelyst/charts": "workspace:*",
"@bytelyst/command-palette": "workspace:*",
"@bytelyst/config": "workspace:*",
"@bytelyst/dashboard-components": "workspace:*",
"@bytelyst/data-table": "workspace:*",
"@bytelyst/data-viz": "workspace:*",
"@bytelyst/design-tokens": "workspace:*",
"@bytelyst/errors": "workspace:*",
"@bytelyst/notifications-ui": "workspace:*",
"@bytelyst/telemetry-client": "workspace:*",
"@bytelyst/logger": "workspace:*",
"@bytelyst/motion": "workspace:*",
"@bytelyst/ui": "workspace:*",
"clsx": "^2.1.1",
"next": "16.1.6",
"posthog-js": "^1.345.5",

17
dashboards/tracker-web/playwright.config.ts
View File

@ -8,7 +8,7 @@ export default defineConfig({
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
baseURL: 'http://127.0.0.1:3103',
baseURL: 'http://localhost:3003',
trace: 'on-first-retry',
},
projects: [
@ -18,16 +18,9 @@ export default defineConfig({
},
],
webServer: {
command: 'pnpm exec next dev --webpack --hostname 127.0.0.1 --port 3103',
url: 'http://127.0.0.1:3103',
reuseExistingServer: process.env.E2E_REUSE_SERVER === '1',
timeout: 60_000,
// Provide the env vars /api/health requires so the health gate is deterministic.
// These are non-secret placeholders only used to exercise the health handler.
env: {
PLATFORM_API_URL: 'http://localhost:4003',
JWT_SECRET: 'e2e-placeholder-not-a-real-secret',
DEFAULT_PRODUCT_ID: 'tracker-e2e',
},
command: 'npm run dev',
url: 'http://localhost:3003',
reuseExistingServer: !process.env.CI,
timeout: 30_000,
},
});

96
dashboards/tracker-web/src/__tests__/agent-proxy.test.ts
View File

@ -1,96 +0,0 @@
/**
* Tests for /api/agent/v1/[...path] — agent-facing platform proxy.
*/
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
import type { NextRequest } from 'next/server';
const mockFetch = vi.fn();
vi.stubGlobal('fetch', mockFetch);
import { GET, POST } from '@/app/api/agent/v1/[...path]/route';
function mockNextRequest(
method: string,
path: string,
body?: string,
headers?: Record<string, string>
): NextRequest {
const headerMap = new Map(Object.entries(headers || {}));
return {
method,
headers: {
get: (key: string) => headerMap.get(key.toLowerCase()) || headerMap.get(key) || null,
},
nextUrl: {
searchParams: new URLSearchParams('limit=10'),
},
text: async () => body || '',
} as unknown as NextRequest;
}
describe('agent v1 proxy', () => {
const originalEnv = { ...process.env };
beforeEach(() => {
vi.clearAllMocks();
process.env.PLATFORM_API_URL = 'http://localhost:4003';
});
afterEach(() => {
process.env = { ...originalEnv };
});
it('proxies agent list requests with product and agent key headers', async () => {
mockFetch.mockResolvedValue({ status: 200, text: async () => JSON.stringify({ items: [] }) });
const req = mockNextRequest('GET', 'items/assigned', undefined, {
'x-agent-key': 'agent-key-1',
'x-product-id': 'tracker',
});
const res = await GET(req, { params: Promise.resolve({ path: ['items', 'assigned'] }) });
expect(res.status).toBe(200);
expect(mockFetch).toHaveBeenCalledWith(
expect.stringContaining('/api/agent/v1/items/assigned?limit=10'),
expect.objectContaining({
method: 'GET',
headers: expect.objectContaining({
'x-agent-key': 'agent-key-1',
'x-product-id': 'tracker',
}),
})
);
});
it('proxies agent mutation requests with JSON body', async () => {
mockFetch.mockResolvedValue({
status: 201,
text: async () => JSON.stringify({ id: 'item_1' }),
});
const body = JSON.stringify({ title: 'Agent-created item' });
const req = mockNextRequest('POST', 'items', body, { authorization: 'Bearer token' });
const res = await POST(req, { params: Promise.resolve({ path: ['items'] }) });
expect(res.status).toBe(201);
expect(mockFetch).toHaveBeenCalledWith(
expect.stringContaining('/api/agent/v1/items'),
expect.objectContaining({
method: 'POST',
body,
headers: expect.objectContaining({ Authorization: 'Bearer token' }),
})
);
});
it('returns 502 when the agent API is unavailable', async () => {
mockFetch.mockRejectedValue(new Error('ECONNREFUSED'));
const req = mockNextRequest('GET', 'items/assigned');
const res = await GET(req, { params: Promise.resolve({ path: ['items', 'assigned'] }) });
expect(res.status).toBe(502);
await expect(res.json()).resolves.toEqual({ error: 'Agent API unavailable' });
});
});

Some files were not shown because too many files have changed in this diff Show More