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

523 changed files with 3354 additions and 53305 deletions
Show Stats Expand all files Collapse all files

31
.env.example
View File

@ -79,13 +79,6 @@ FIELD_ENCRYPT_KEY=
# Product-specific MEK name in AKV — only for 'akv' provider # Product-specific MEK name in AKV — only for 'akv' provider
FIELD_ENCRYPT_MEK_NAME=lysnr-mek 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 ────────────────────────────────────────── # ── Product Identity ──────────────────────────────────────────
DEFAULT_PRODUCT_ID=lysnrai DEFAULT_PRODUCT_ID=lysnrai
@ -99,27 +92,3 @@ RUST_RUNTIME_TIMEOUT_MS=300000
OLLAMA_URL=http://localhost:11434/v1 OLLAMA_URL=http://localhost:11434/v1
OLLAMA_MODELS= OLLAMA_MODELS=
FEATURE_FLAGS_ENABLED=true FEATURE_FLAGS_ENABLED=true
# ── Fleet ops/observability ───────────────────────────────────
# Bearer token Prometheus uses to scrape GET /api/fleet/metrics/prom. Must match
# the `credentials` in services/monitoring/prometheus/prometheus.yml. When unset,
# the endpoint requires an admin JWT instead (so it is never world-readable).
FLEET_METRICS_TOKEN=changeme-fleet-metrics-token
# Fleet feature flags (default OFF): cost/latency routing, per-engine breaker,
# per-product/-engine budget enforcement, and multi-tenant access enforcement.
FLEET_COST_ROUTING=
FLEET_ENGINE_BREAKER=
FLEET_BUDGETS=
FLEET_TENANT_ENFORCEMENT=
# Capacity autoscaling signal (§5) — tunes the advisory scale recommendation
# served at GET /api/fleet/autoscale[/all] (consumed by an external scaler).
# All optional; unset keys fall back to the in-code defaults shown below.
FLEET_AUTOSCALE_SCALE_OUT_PCT=85
FLEET_AUTOSCALE_SCALE_IN_PCT=20
FLEET_AUTOSCALE_MAX_STEP=5
FLEET_AUTOSCALE_MIN_SEATS=0
# Anti-flap cooldown (seconds): the /fleet/autoscale endpoints suppress a
# direction reversal (scale_in after scale_out, or vice versa) within this
# window so a consumer cannot thrash capacity. A critical scale-out (queued work
# with zero usable capacity) always bypasses the cooldown. Default 300.
FLEET_AUTOSCALE_COOLDOWN_SEC=300

2
.gitattributes vendored
View File

@ -1,4 +1,2 @@
* text=auto eol=lf
# Bash scripts must use LF so they run in WSL/Linux # Bash scripts must use LF so they run in WSL/Linux
*.sh text eol=lf *.sh text eol=lf

27
.gitea/workflows/ci.yml
View File

@ -48,30 +48,3 @@ jobs:
- name: Test release package - name: Test release package
run: pnpm --filter @bytelyst/errors test run: pnpm --filter @bytelyst/errors test
e2e-fleet:
name: Fleet E2E (Playwright)
runs-on: [ubuntu-latest, bytelyst, hostinger]
container:
image: node:20-bookworm
timeout-minutes: 25
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: Install Playwright browser + system deps
run: pnpm --filter @bytelyst/tracker-web exec playwright install --with-deps chromium
- name: Run fleet e2e
run: pnpm --filter @bytelyst/tracker-web test:e2e

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

@ -48,7 +48,7 @@ jobs:
run: | run: |
cp /run/secrets/gitea_publish_npmrc /tmp/publish.npmrc cp /run/secrets/gitea_publish_npmrc /tmp/publish.npmrc
chmod 600 /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 - name: Install workspace deps
run: HUSKY=0 pnpm install --frozen-lockfile run: HUSKY=0 pnpm install --frozen-lockfile

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

@ -48,7 +48,7 @@ jobs:
run: | run: |
cp /run/secrets/gitea_publish_npmrc /tmp/publish.npmrc cp /run/secrets/gitea_publish_npmrc /tmp/publish.npmrc
chmod 600 /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 - name: Install workspace deps
run: HUSKY=0 pnpm install --frozen-lockfile 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 chmod 600 /tmp/publish.npmrc
echo "Configured registry:" echo "Configured registry:"
sed -E 's#(_auth(Token)?=).*#\1***#; s#(//[^[:space:]]+:)_authToken=.*#\1_authToken=***#' /tmp/publish.npmrc 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 - name: Install workspace deps
run: HUSKY=0 pnpm install --frozen-lockfile 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

1
.gitignore vendored
View File

@ -3,7 +3,6 @@ dist/
coverage/ coverage/
.DS_Store .DS_Store
*.tsbuildinfo *.tsbuildinfo
graphify-out/
# Env / Secrets # Env / Secrets
.env .env

10
.husky/pre-commit
View File

@ -23,13 +23,3 @@ echo "🐶 Running pre-commit hooks for common platform..."
# Run lint-staged on staged files # Run lint-staged on staged files
pnpm exec lint-staged 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

15
.prettierignore
View File

@ -1,15 +0,0 @@
# Build output / deps
dist/
build/
node_modules/
coverage/
.next/
# Generated design-token outputs (produced by @bytelyst/design-tokens)
packages/design-tokens/generated/
# Mirrored AI chat-history / repo-doc snapshots. These are COPIES of files from
# other repos, refreshed periodically by the chat-history sync. Prettier must
# NOT reformat them — doing so causes permanent ping-pong churn (the generator
# rewrites the source style, prettier rewrites it back on every commit).
__LOCAL_LLMs/

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 # AGENTS.md — AI Coding Agent Instructions
<!-- BEGIN: canonical-behavior-pointer (auto-managed) --> <!-- BEGIN: canonical-behavior-pointer (auto-managed) -->
> **Read first (ecosystem-wide agent behavior):** > **Read first (ecosystem-wide agent behavior):**
> [`AI.dev/SKILLS/agent-behavior-guidelines.md`](AI.dev/SKILLS/agent-behavior-guidelines.md) > [`AI.dev/SKILLS/agent-behavior-guidelines.md`](AI.dev/SKILLS/agent-behavior-guidelines.md)
> >
@ -11,7 +10,6 @@
> Cosmos doc, conventional commits, style preservation). > Cosmos doc, conventional commits, style preservation).
> >
> The per-repo content below extends — never duplicates — the canonical rules. > The per-repo content below extends — never duplicates — the canonical rules.
<!-- END: canonical-behavior-pointer --> <!-- END: canonical-behavior-pointer -->
> **For:** Claude Code, OpenAI Codex, Cursor, GitHub Copilot, Windsurf Cascade, and any AI coding agent. > **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) - **Template:** `scripts/npmrc.template` in this repo (learning_ai_common_plat)
- **Sync:** `bash scripts/sync-npmrc.sh` — copies template to all 13 product repos - **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) - **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 - **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 ### 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 `console.log` in production code — use `req.log` or `app.log` in Fastify
- Never use `any` type — use Zod inference or explicit types - Never use `any` type — use Zod inference or explicit types
- Never hardcode secrets or API keys - 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`. - 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 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 - Never modify tests to make them pass — fix the actual code

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

@ -1,100 +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 terminal AI agents we use to delegate coding work,
plus an operational guide for running them **non-stop overnight**. 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 |
| 🌙 **Long-running jobs** | [`long-running-jobs.md`](./long-running-jobs.md) | Running ANY of the above non-stop, unattended overnight (sleep/disconnect survival + best practices) |
---
## 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-30_

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`)._

190
AI.dev/CHEATSHEETS/long-running-jobs.md
View File

@ -1,190 +0,0 @@
# 🌙 Overnight / Long-Running Agent Runs — Cheat Sheet
> **What it is:** how to run a multi-hour, unattended AI coding job (Devin / Claude Code /
> Codex / Copilot CLI) **non-stop** without it dying when the machine sleeps or the
> terminal closes — plus the ByteLyst best practices that make an unattended run *safe*.
> **Best for:** delegating a scoped roadmap (e.g. a 10-hour Phase build) and walking away
> overnight.
> **Companion docs:** the per-CLI sheets ([`devin-cli.md`](./devin-cli.md),
> [`claude-code-cli.md`](./claude-code-cli.md), [`codex-cli.md`](./codex-cli.md)) and the
> canonical [`../SKILLS/agent-behavior-guidelines.md`](../SKILLS/agent-behavior-guidelines.md).
> 🧠 **The whole problem in one line:** an unattended run has two enemies — the **machine
> sleeping** and the **terminal/session dying**. `caffeinate` kills the first, `tmux` the
> second, and a **checkpoint file** saves you from everything else (reboot, crash, power loss).
---
## The two failure modes (and what fixes each)
| Failure mode | What happens | Fix |
| ------------ | ------------ | --- |
| **Machine sleeps** (idle timeout / lid closed) | CPU + network suspend → job freezes mid-step, connections drop | **`caffeinate`** (macOS) / `systemd-inhibit` (Linux) — keep it plugged in, lid open |
| **Terminal/session dies** (window closed, app crash/update, SSH drop, logout) | Job receives `SIGHUP` and is killed | **`tmux`** / `screen` — the job is owned by the tmux server, not the window |
| **Reboot / crash / power loss** | Everything dies, including tmux | **Checkpoint + resume** — the job writes progress to a file; re-running resumes it |
`caffeinate` and `tmux` are **complementary**, not alternatives — use both for a real overnight run.
## `caffeinate` (macOS) — stop the Mac from sleeping
```bash
caffeinate -dimsu <your-command> # stays awake only while <command> runs
```
| Flag | Prevents |
| ---- | -------- |
| `-d` | **display** sleep |
| `-i` | **idle** sleep |
| `-m` | **disk** sleep |
| `-s` | system sleep (on AC power) |
| `-u` | declares **user active** |
> ⚠️ **Lid caveat:** `caffeinate` keeps the Mac awake, but **closing the lid still sleeps
> most Macs** unless on AC power with an external display (clamshell) or the right pmset.
> For overnight: **keep it plugged in and the lid open.**
## `tmux` — survive a closed terminal / disconnect
```bash
tmux new -s phase3 # start a named, detachable session
# ... launch your job inside it ...
# Ctrl-b then d # DETACH — job keeps running with no terminal attached
tmux attach -t phase3 # reattach later (after reconnect, or a new window)
tmux ls # list running sessions
```
- **Local Mac:** still useful — the job survives **closing the terminal app, an app
crash/auto-update, or logout** (a plain terminal job dies on all of these). It does
**nothing** for sleep — that's `caffeinate`'s job.
- **Over SSH:** essential — the job survives the SSH connection dropping.
**Linux equivalents:** `systemd-inhibit --what=idle:sleep <cmd>` (sleep), `screen` or
`tmux` (session), or `nohup <cmd> &` + `disown` (cheapest detach, no reattach).
## Putting it together
```bash
tmux new -s phase3
# inside the session:
caffeinate -dimsu <agent-cli> <all-allowed flag> "<the overnight prompt>" 2>&1 | tee ~/phase3.log
# Ctrl-b d to detach and walk away; tmux attach -t phase3 in the morning
```
`| tee ~/phase3.log` captures the full run to disk so you have the log even if the
scrollback is gone.
### Shortcut: the `longrun` helper
The ByteLyst alias set (`learning_ai_devops_tools/aliases/`) ships a `longrun` helper that
does all of the above in one command — detached `tmux` + `caffeinate` (macOS) + a
timestamped log:
```bash
longrun phase3 <agent-cli> <all-allowed flag> "<the overnight prompt>"
# -> starts a detached, kept-awake, logged session named "phase3"
ta phase3 # reattach (alias for tmux attach -t)
tail -f ~/longrun-phase3-*.log # follow output
tmux kill-session -t phase3 # stop it
awake <cmd> # macOS: run any command keeping the machine awake
```
Install the aliases via `learning_ai_devops_tools/aliases/install.sh` (see that folder's
README).
---
## Best practices for an unattended agent run
1. **Green baseline first.** Run the verify gate (`pnpm build && pnpm test`, browsers
installed) **before** launching, so the agent starts from a known-clean state — never
debug a pre-existing red suite at 2am.
2. **Self-contained roadmap, slice-by-slice.** Point the agent at a doc that encodes
scope, per-slice verify commands, and a done-definition (see [`../PROMPTS/`](../PROMPTS/)).
One slice = one commit + push.
3. **Checkpoint + resume.** The job must write progress to a file (e.g.
`docs/<phase>-progress.md`: slice, status, commit SHA, gate result). If it dies for any
reason, **re-running the same prompt resumes** from the first not-DONE slice. This is
your safety net for the failures `caffeinate`/`tmux` can't catch.
4. **Failure protocol, not thrash.** Tell it: max N honest attempts per slice, then commit
`wip(...) BLOCKED:` + mark FAILED + move to the next **independent** slice. Order slices
so the independent ones come first.
5. **Never merge unattended.** Push to a feature branch and open **one PR** — a human
reviews + merges in the morning. The agent must **never touch `main`**.
6. **Tests are sacred.** Never weaken/skip a test to go green — fix the code (see the
canonical guidelines). State this explicitly in the prompt.
7. **Scope + push-auth ready.** Cache git credentials / `gh auth login` first so the
overnight `push` never blocks on a prompt. Confirm push rights to the target remote.
8. **All-allowed flag.** Launch with the CLI's auto-approve flag so it never pauses for
permission (`--permission-mode dangerous` for Devin, `--dangerously-skip-permissions`
for Claude Code, `--dangerously-bypass-approvals-and-sandbox` for Codex — confirm with
`<cli> --help`).
## ByteLyst-specific gotchas (the ones that silently fail overnight)
- **Corp proxy.** `pnpm install` and Playwright browser downloads will **TLS-fail** behind
the intercepting proxy unless `NODE_EXTRA_CA_CERTS` (proxy CA) is set. **Prefer running
off-corp** for overnight jobs — simplest reliable path. (A proxy-blocked `pnpm install`
is the classic cause of an overnight job that "did nothing".)
- **Playwright e2e.** Slices with browser tests need `npx playwright install --with-deps`
**before** the run, or the e2e gate fails.
- **Workspace, not registry.** `@bytelyst/*` link via `workspace:*` from sibling
`packages/*` — run from the monorepo so they resolve locally; no registry needed for the
build itself.
- **Side-by-side repos.** If the prompt file lives in a sibling repo (e.g. the gigafactory
job lives in `learning_ai_devops_tools` but runs in `learning_ai_common_plat`), clone
**both under the same parent** so the `../` relative path resolves.
---
## Worked example — the gigafactory Phase 3 overnight run
```bash
# 1) bootstrap a clean baseline (once)
cd ~/code/mygh/learning_ai_common_plat && git pull && corepack enable \
&& pnpm install && pnpm build && pnpm test \
&& (cd dashboards/tracker-web && npx playwright install --with-deps)
cd ~/code/mygh/learning_ai_devops_tools && git pull # prompt + roadmap repo
# 2) launch non-stop
cd ~/code/mygh/learning_ai_common_plat
tmux new -s phase3
caffeinate -dimsu <agent-cli> <all-allowed flag> \
"Read ~/code/mygh/learning_ai_devops_tools/agent-queue/docs/jobs/phase3-overnight.md and execute it exactly: branch feat/gigafactory-phase3 off origin/main, implement Phase 3 slice-by-slice, verify each slice green before the next, checkpoint to docs/gigafactory-phase3-progress.md, commit+push per slice, open ONE PR and NEVER merge, never weaken tests (use the 3-attempt failure protocol), end with the consolidated report." \
2>&1 | tee ~/phase3.log
# Ctrl-b d to detach
```
In the morning: `tmux attach -t phase3`, read the consolidated report, then review +
merge the PR slice-by-slice.
## Troubleshooting
| Symptom | Likely cause | Fix |
| ------- | ------------ | --- |
| Job froze partway, no error | Mac slept (idle or **lid closed**) | Use `caffeinate -dimsu`; plug in; lid open |
| Job vanished when I closed Terminal | No tmux — `SIGHUP` killed it | Run inside `tmux`; reattach with `tmux attach` |
| "Did nothing" / 0 commits overnight | `pnpm install` TLS-failed on corp proxy | Run **off-corp**, or set `NODE_EXTRA_CA_CERTS` |
| e2e slice failed immediately | Playwright browsers not installed | `npx playwright install --with-deps` before launch |
| Push at end blocked / hung | git/gh auth not cached | `gh auth login` / cache credentials first |
| Re-ran prompt, it redid finished work | No checkpoint file read | Ensure the job reads `*-progress.md` and resumes |
## Quick-reference card
```text
caffeinate -dimsu <cmd> # macOS: stay awake while <cmd> runs (lid open + on AC!)
systemd-inhibit --what=idle:sleep <cmd> # Linux equivalent
tmux new -s <name> # detachable session (Ctrl-b d = detach)
tmux attach -t <name> # reattach (tmux ls = list)
... | tee ~/run.log # capture full output to disk
# launch: tmux -> caffeinate -dimsu <cli> <auto-approve flag> "<prompt>" | tee log
# safety net: checkpoint file + re-run prompt to resume; push to branch, never merge
```
---
**Related:** [`devin-cli.md`](./devin-cli.md) · [`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-30 · confirm CLI auto-approve flags against your installed version (`<cli> --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-31T06:31:25Z (2026-05-30 23:31:25 PDT) Last refresh: 2026-05-23T06:00:12Z (2026-05-22 23:00:12 PDT)
Cascade conversations: 50 (537M) Cascade conversations: 50 (438M)
Memories: 138 Memories: 137
Implicit context: 20 Implicit context: 20
Code tracker dirs: 64 Code tracker dirs: 14
File edit history: 5408 entries File edit history: 5093 entries
Workspace storage: 52 workspaces Workspace storage: 49 workspaces
Repo docs: 7 files across 2 repos Repo docs: 7 files across 2 repos
Repo workflows: 56 files across 13 repos Repo workflows: 56 files across 13 repos

131
__LOCAL_LLMs/AI_IDE_CHAT_HISTORY/WINDSURF/repo_docs/learning_multimodal_memory_agents/ENV_AUDIT_LYSNRAI.md
View File

@ -9,17 +9,17 @@
## 1. Project → Env File Map ## 1. Project → Env File Map
| # | Project | Env File | Port | | # | Project | Env File | Port |
|---|---------|----------|------| | --- | ----------------------------------------------- | ---------------------------------- | ---- |
| 1 | Desktop app (`src/`) | `.env` (root) | — | | 1 | Desktop app (`src/`) | `.env` (root) | — |
| 2 | Backend API (`backend/`) | `backend/.env` | 8000 | | 2 | Backend API (`backend/`) | `backend/.env` | 8000 |
| 3 | Admin Dashboard (`admin-dashboard-web/`) | `admin-dashboard-web/.env.local` | 3001 | | 3 | Admin Dashboard (`admin-dashboard-web/`) | `admin-dashboard-web/.env.local` | 3001 |
| 4 | User Dashboard (`user-dashboard-web/`) | `user-dashboard-web/.env.local` | 3002 | | 4 | User Dashboard (`user-dashboard-web/`) | `user-dashboard-web/.env.local` | 3002 |
| 5 | Tracker Dashboard (`tracker-dashboard-web/`) | `tracker-dashboard-web/.env.local` | 3003 | | 5 | Tracker Dashboard (`tracker-dashboard-web/`) | `tracker-dashboard-web/.env.local` | 3003 |
| 6 | Billing Service (`services/billing-service/`) | `services/billing-service/.env` | 4002 | | 6 | Billing Service (`services/billing-service/`) | `services/billing-service/.env` | 4002 |
| 7 | Growth Service (`services/growth-service/`) | `services/growth-service/.env` | 4001 | | 7 | Growth Service (`services/growth-service/`) | `services/growth-service/.env` | 4001 |
| 8 | Platform Service (`services/platform-service/`) | `services/platform-service/.env` | 4003 | | 8 | Platform Service (`services/platform-service/`) | `services/platform-service/.env` | 4003 |
| 9 | Tracker Service (`services/tracker-service/`) | `services/tracker-service/.env` | 4004 | | 9 | Tracker Service (`services/tracker-service/`) | `services/tracker-service/.env` | 4004 |
--- ---
@ -36,63 +36,63 @@ grep -rn 'MISSING_ENV_VALUE' --include='.env*' --include='*.env' . | grep -v nod
### 3.1 Root `.env` (Desktop App) ### 3.1 Root `.env` (Desktop App)
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | --------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| `APPLICATIONINSIGHTS_CONNECTION_STRING` | ❌ Empty | Get from Azure Portal → Application Insights → Overview | | `APPLICATIONINSIGHTS_CONNECTION_STRING` | ❌ Empty | Get from Azure Portal → Application Insights → Overview |
| `ANH_CONNECTION_STRING` | ⚠️ Has `YOUR_KEY_HERE` placeholder | Replace with real SharedAccessKey from Azure Portal → Notification Hubs | | `ANH_CONNECTION_STRING` | ⚠️ Has `YOUR_KEY_HERE` placeholder | Replace with real SharedAccessKey from Azure Portal → Notification Hubs |
### 3.2 `backend/.env` ### 3.2 `backend/.env`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | ------------------------------- | -------- | ------------------------------------------------------------------------ |
| `AZURE_EMAIL_CONNECTION_STRING` | ❌ Empty | Get from Azure Portal → Communication Services → Keys | | `AZURE_EMAIL_CONNECTION_STRING` | ❌ Empty | Get from Azure Portal → Communication Services → Keys |
| `SMTP_HOST` | ❌ Empty | Configure if using SMTP fallback instead of Azure Communication Services | | `SMTP_HOST` | ❌ Empty | Configure if using SMTP fallback instead of Azure Communication Services |
| `SMTP_USER` | ❌ Empty | Configure if using SMTP fallback | | `SMTP_USER` | ❌ Empty | Configure if using SMTP fallback |
| `SMTP_PASS` | ❌ Empty | Configure if using SMTP fallback | | `SMTP_PASS` | ❌ Empty | Configure if using SMTP fallback |
### 3.3 `admin-dashboard-web/.env.local` ### 3.3 `admin-dashboard-web/.env.local`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | -------------------------- | -------- | ---------------------------------------------------------- |
| `NEXT_PUBLIC_POSTHOG_KEY` | ❌ Empty | Get from PostHog → Project Settings (optional — analytics) | | `NEXT_PUBLIC_POSTHOG_KEY` | ❌ Empty | Get from PostHog → Project Settings (optional — analytics) |
| `NEXT_PUBLIC_POSTHOG_HOST` | ❌ Empty | Get from PostHog → Project Settings (optional — analytics) | | `NEXT_PUBLIC_POSTHOG_HOST` | ❌ Empty | Get from PostHog → Project Settings (optional — analytics) |
### 3.4 `user-dashboard-web/.env.local` ### 3.4 `user-dashboard-web/.env.local`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | -------------------------- | -------- | ------------------------------------------------------------------- |
| `ENTERPRISE_EMAIL_DOMAINS` | ❌ Empty | Set comma-separated list of domains that qualify for Enterprise SSO | | `ENTERPRISE_EMAIL_DOMAINS` | ❌ Empty | Set comma-separated list of domains that qualify for Enterprise SSO |
| `MICROSOFT_CLIENT_ID` | ❌ Empty | Register app in Azure Portal → Entra ID → App registrations | | `MICROSOFT_CLIENT_ID` | ❌ Empty | Register app in Azure Portal → Entra ID → App registrations |
| `MICROSOFT_CLIENT_SECRET` | ❌ Empty | Same as above | | `MICROSOFT_CLIENT_SECRET` | ❌ Empty | Same as above |
| `GOOGLE_CLIENT_ID` | ❌ Empty | Register app in Google Cloud Console → Credentials | | `GOOGLE_CLIENT_ID` | ❌ Empty | Register app in Google Cloud Console → Credentials |
| `GOOGLE_CLIENT_SECRET` | ❌ Empty | Same as above | | `GOOGLE_CLIENT_SECRET` | ❌ Empty | Same as above |
| `NEXT_PUBLIC_POSTHOG_KEY` | ❌ Empty | PostHog analytics (optional) | | `NEXT_PUBLIC_POSTHOG_KEY` | ❌ Empty | PostHog analytics (optional) |
| `NEXT_PUBLIC_POSTHOG_HOST` | ❌ Empty | PostHog analytics (optional) | | `NEXT_PUBLIC_POSTHOG_HOST` | ❌ Empty | PostHog analytics (optional) |
### 3.5 `tracker-dashboard-web/.env.local` ### 3.5 `tracker-dashboard-web/.env.local`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | -------------------------- | -------- | ---------------------------- |
| `NEXT_PUBLIC_POSTHOG_KEY` | ❌ Empty | PostHog analytics (optional) | | `NEXT_PUBLIC_POSTHOG_KEY` | ❌ Empty | PostHog analytics (optional) |
| `NEXT_PUBLIC_POSTHOG_HOST` | ❌ Empty | PostHog analytics (optional) | | `NEXT_PUBLIC_POSTHOG_HOST` | ❌ Empty | PostHog analytics (optional) |
### 3.6 `services/growth-service/.env` ### 3.6 `services/growth-service/.env`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | --------------------------------- | -------- | ------------------------------------------------------------ |
| `WEBHOOK_INVITATION_REDEEMED_URL` | ❌ Empty | Set to backend or platform-service webhook callback endpoint | | `WEBHOOK_INVITATION_REDEEMED_URL` | ❌ Empty | Set to backend or platform-service webhook callback endpoint |
| `WEBHOOK_REFERRAL_STATUS_URL` | ❌ Empty | Set to backend or platform-service webhook callback endpoint | | `WEBHOOK_REFERRAL_STATUS_URL` | ❌ Empty | Set to backend or platform-service webhook callback endpoint |
### 3.7 `services/billing-service/.env` ### 3.7 `services/billing-service/.env`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | ------------------ | -------- | --------------------------------------------------------------- |
| `PLAN_LIMITS_JSON` | ❌ Empty | Optional — set JSON with per-plan limits if overriding defaults | | `PLAN_LIMITS_JSON` | ❌ Empty | Optional — set JSON with per-plan limits if overriding defaults |
### 3.8 `services/platform-service/.env` ### 3.8 `services/platform-service/.env`
| Variable | Status | Action | | Variable | Status | Action |
|----------|--------|--------| | ------------------------ | -------- | ------------------------------------------------------------------------ |
| `RATE_LIMIT_CONFIG_JSON` | ❌ Empty | Optional — set JSON with per-endpoint rate limits if overriding defaults | | `RATE_LIMIT_CONFIG_JSON` | ❌ Empty | Optional — set JSON with per-endpoint rate limits if overriding defaults |
### 3.9 `services/tracker-service/.env` ### 3.9 `services/tracker-service/.env`
@ -105,21 +105,21 @@ grep -rn 'MISSING_ENV_VALUE' --include='.env*' --include='*.env' . | grep -v nod
These were missing from `.env` files but had known values, so they were filled in: These were missing from `.env` files but had known values, so they were filled in:
| Project | Variable | Value Added | | Project | Variable | Value Added |
|---------|----------|-------------| | -------------------------------- | -------------------------- | --------------------------------------- |
| Root `.env` | `PLATFORM_SERVICE_URL` | `http://localhost:4003` | | Root `.env` | `PLATFORM_SERVICE_URL` | `http://localhost:4003` |
| Root `.env` | `LYSNR_API_URL` | `http://localhost:8000` | | Root `.env` | `LYSNR_API_URL` | `http://localhost:8000` |
| Root `.env` | `LYSNR_ADMIN_URL` | `http://localhost:3001` | | Root `.env` | `LYSNR_ADMIN_URL` | `http://localhost:3001` |
| Root `.env` | `LYSNR_DASHBOARD_URL` | `http://localhost:3002` | | Root `.env` | `LYSNR_DASHBOARD_URL` | `http://localhost:3002` |
| `backend/.env` | `BILLING_SERVICE_URL` | `http://localhost:4002` | | `backend/.env` | `BILLING_SERVICE_URL` | `http://localhost:4002` |
| `backend/.env` | `PLATFORM_SERVICE_URL` | `http://localhost:4003` | | `backend/.env` | `PLATFORM_SERVICE_URL` | `http://localhost:4003` |
| `backend/.env` | `CORS_ORIGINS` | Expanded to include all dashboard ports | | `backend/.env` | `CORS_ORIGINS` | Expanded to include all dashboard ports |
| `admin-dashboard-web/.env.local` | `STRIPE_PUBLISHABLE_KEY` | Test key (was missing) | | `admin-dashboard-web/.env.local` | `STRIPE_PUBLISHABLE_KEY` | Test key (was missing) |
| `admin-dashboard-web/.env.local` | `STRIPE_WEBHOOK_SECRET` | Test key (was missing) | | `admin-dashboard-web/.env.local` | `STRIPE_WEBHOOK_SECRET` | Test key (was missing) |
| `admin-dashboard-web/.env.local` | `STRIPE_PRICE_PRO` | `price_1Szl2z...` | | `admin-dashboard-web/.env.local` | `STRIPE_PRICE_PRO` | `price_1Szl2z...` |
| `admin-dashboard-web/.env.local` | `STRIPE_PRICE_ENTERPRISE` | `price_1Szl3D...` | | `admin-dashboard-web/.env.local` | `STRIPE_PRICE_ENTERPRISE` | `price_1Szl3D...` |
| `user-dashboard-web/.env.local` | `ENTERPRISE_EMAIL_DOMAINS` | Empty (needs config) | | `user-dashboard-web/.env.local` | `ENTERPRISE_EMAIL_DOMAINS` | Empty (needs config) |
| `services/billing-service/.env` | `USAGE_WARN_THRESHOLD` | `80` | | `services/billing-service/.env` | `USAGE_WARN_THRESHOLD` | `80` |
--- ---
@ -134,20 +134,21 @@ These were missing from `.env` files but had known values, so they were filled i
These values **must be identical** across all services that use them: These values **must be identical** across all services that use them:
| Secret | Used By | | Secret | Used By |
|--------|---------| | ------------------- | -------------------------------------------------------------------- |
| `JWT_SECRET` | All 4 Fastify services + all 3 dashboards + backend | | `JWT_SECRET` | All 4 Fastify services + all 3 dashboards + backend |
| `COSMOS_ENDPOINT` | All 4 Fastify services + admin + user dashboards + backend + desktop | | `COSMOS_ENDPOINT` | All 4 Fastify services + admin + user dashboards + backend + desktop |
| `COSMOS_KEY` | Same as above | | `COSMOS_KEY` | Same as above |
| `COSMOS_DATABASE` | Same as above (must be `lysnrai`) | | `COSMOS_DATABASE` | Same as above (must be `lysnrai`) |
| `STRIPE_SECRET_KEY` | billing-service, growth-service, admin-dashboard, user-dashboard | | `STRIPE_SECRET_KEY` | billing-service, growth-service, admin-dashboard, user-dashboard |
| `AZURE_BLOB_*` | platform-service, admin-dashboard, user-dashboard, desktop | | `AZURE_BLOB_*` | platform-service, admin-dashboard, user-dashboard, desktop |
--- ---
## 7. Production Deployment Notes ## 7. Production Deployment Notes
When deploying to the current stack: When deploying to the current stack:
- **Vercel** for public/front-end surfaces where applicable - **Vercel** for public/front-end surfaces where applicable
- **Azure VM / shared infra** for backend and internal service hosting - **Azure VM / shared infra** for backend and internal service hosting

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_notes` | NoteLett | ✅ | — |
| `learning_ai_flowmonk` | FlowMonk | ✅ | — | | `learning_ai_flowmonk` | FlowMonk | ✅ | — |
| `learning_ai_trails` | ActionTrail | ✅ | — | | `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 | ✅ | — | | `learning_ai_productivity_web` | Productivity Tools | ✅ | — |
## Steps ## 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 # Update Agent Docs Across Workspace
Maintains AI agent docs across the ByteLyst workspace using a Regenerates all 8 AI agent configuration files across all repos in the workspace.
**single source of truth** pattern with **zero duplication**.
## Architecture ## Files Generated Per Repo
``` | File | Tool |
learning_ai_common_plat/AI.dev/SKILLS/ | --------------------------------- | ----------------------------------------------- |
├── agent-behavior-guidelines.md ← SINGLE source of truth for behavior rules | `AGENTS.md` | Universal (OpenAI Codex, Claude, Copilot, etc.) |
└── agent-onboarding.md ← Read-order index for agents | `CLAUDE.md` | Claude Code |
| `.cursorrules` | Cursor AI |
<each repo>/ | `.github/copilot-instructions.md` | GitHub Copilot |
├── AGENTS.md ← Repo-specific only. Auto-prepended with | `.windsurfrules` | Windsurf / Cascade |
│ "Read first" pointer to canonical file. | `.clinerules` | Cline / Roo Code |
├── .github/copilot-instructions.md ← Thin pointer (no rules). Auto-generated. | `.aider.conf.yml` | Aider |
├── .aider.conf.yml ← Aider config pointing to AGENTS.md. Auto-generated. | `.editorconfig` | All editors |
└── .editorconfig ← Editor config. Auto-generated.
DELETED across all repos (content was duplicated AGENTS.md):
├── CLAUDE.md
├── .cursorrules
├── .windsurfrules
└── .clinerules
```
## Steps ## Steps
1. **Edit the canonical sources** when behavior rules change: 1. Run the update script:
```bash ```bash
# ecosystem-wide agent behavior (Karpathy + ByteLyst) cd /Users/sd9235/code/mygh/learning_ai_common_plat
open learning_ai_common_plat/AI.dev/SKILLS/agent-behavior-guidelines.md ./scripts/update-agent-docs.sh
```
# read-order index The script reads `learning_ai_common_plat/.windsurf/workflows/repos.txt` as the canonical list of managed workspace repositories.
open learning_ai_common_plat/AI.dev/SKILLS/agent-onboarding.md
```
These are referenced (not copied) by every repo's AGENTS.md, so changes 2. Review changes per repo:
take effect immediately — no regeneration needed when only behavior rules change.
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 3. Commit changes (if any):
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
```
Reads `learning_ai_common_plat/.windsurf/workflows/repos.txt` as the ```bash
canonical list of managed repos. 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"
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. |
## Notes ## Notes
- Safe to run repeatedly (idempotent). - The script scans each repo's structure and regenerates docs based on current state
- Only commits when actual changes exist in the repo. - Only commits if there are actual changes
- The script never touches the body of AGENTS.md outside the marker block. - Safe to run repeatedly (idempotent)
- For workspaces that include `learning_ai_common_plat` as a sibling - Requires `learning_ai_common_plat` to be the source of truth for templates
(default for Windsurf/Cascade), the canonical guidelines file resolves
via the relative path written into each AGENTS.md pointer.

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_local_memory_gpt
learning_ai_efforise learning_ai_efforise
learning_ai_local_llms learning_ai_local_llms
learning_ai_talk2obsidian
# --- Auth & identity --- # --- Auth & identity ---
learning_ai_smart_auth
learning_ai_auth_app learning_ai_auth_app
# --- Web & misc --- # --- Web & misc ---
learning_ai_productivity_web learning_ai_productivity_web
# --- OSS (subdirectory repos under oss/) --- # --- OSS (subdirectory repos under oss/) ---
# NOTE: oss/learning_ai_claw-code-oss is intentionally OMITTED. It is an oss/learning_ai_claw-code-oss
# 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-cowork oss/learning_ai_claw-cowork
# -- tooling -- # -- 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_peakpulse (PeakPulse)
- learning_ai_notes (NoteLett) - learning_ai_notes (NoteLett)
- learning_ai_trails (ActionTrail) - 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) - learning_ai_productivity_web (Productivity Tools)
## Domain Context ## Domain Context

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

@ -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 Create all 8 agent config files matching ecosystem standard. Copy structure from `../learning_ai_notes/` or `../learning_ai_trails/`:
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.
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`. 1. `AGENTS.md` — AI agent onboarding guide (customize for efforise: Vite SPA + Fastify backend, productId efforise, port 4020, --er-* tokens)
2. Add this repo to `../learning_ai_common_plat/.windsurf/workflows/repos.txt` if not already present. 2. `CLAUDE.md` — Claude Code instructions (short version pointing to AGENTS.md)
3. Run `bash ../learning_ai_common_plat/scripts/update-agent-docs.sh`. This will: 3. `.windsurfrules` — Windsurf rules (short version pointing to AGENTS.md)
- Prepend the canonical-behavior-pointer block to `AGENTS.md` 4. `.cursorrules` — Cursor rules (short version pointing to AGENTS.md)
- Generate `.editorconfig`, `.aider.conf.yml`, `.github/copilot-instructions.md` 5. `.clinerules` — Cline rules (short version pointing to AGENTS.md)
- Verify no legacy files exist (deletes them if present) 6. `.aider.conf.yml` — Aider config
4. Verify with `bash ../learning_ai_common_plat/scripts/check-agent-docs-drift.sh`. 7. `.editorconfig` — Copy from any ecosystem repo
8. `.github/copilot-instructions.md` — GitHub Copilot rules
## Step 3: Create Root Config Files ## Step 3: Create Root Config Files

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 \ RUN --mount=type=secret,id=gitea_npm_token \
TOKEN=$(cat /run/secrets/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 pnpm install --ignore-scripts --legacy-peer-deps
COPY dashboards/admin-web/ dashboards/admin-web/ 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 ### Default Logins
| Email | Password | Role | | Email | Password | Role |
| -------------------- | ----------- | ----------- | | ------------------ | ----------- | ----------- |
| `admin@example.com` | `Admin123!` | Super Admin | | `admin@example.com` | `Admin123!` | Super Admin |
| `viewer@example.com` | `viewer123` | Viewer | | `viewer@example.com` | `viewer123` | Viewer |
## Environment Variables ## 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_EMAIL = 'admin@example.com';
const ADMIN_PASSWORD = 'Admin123!'; 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) { async function loginAsAdmin(page: Page) {
await page.goto('/login'); await page.goto('/login');
await page.getByLabel('Email').fill(ADMIN_EMAIL); 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_EMAIL = 'admin@example.com';
const ADMIN_PASSWORD = 'Admin123!'; 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) { async function loginAsAdmin(page: Page) {
await page.goto('/login'); await page.goto('/login');
await page.getByLabel('Email').fill(ADMIN_EMAIL); 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_EMAIL = 'admin@example.com';
const ADMIN_PASSWORD = 'Admin123!'; 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) { async function loginAsAdmin(page: Page) {
await page.goto('/login'); await page.goto('/login');
await page.getByLabel('Email').fill(ADMIN_EMAIL); 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.describe('SmartAuth: Account Linking', () => {
test.beforeEach(async ({ page }) => { 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 // Mock auth state — logged in as admin
await page.route('**/api/auth/me', route => await page.route('**/api/auth/me', route =>
route.fulfill({ route.fulfill({
@ -47,8 +33,8 @@ test.describe('SmartAuth: Account Linking', () => {
}) })
); );
await page.goto('/settings/security'); await page.goto('/settings/security');
await expect(page.getByRole('main')).toContainText('Google'); await expect(page.getByText('Google')).toBeVisible();
await expect(page.getByRole('main')).toContainText('admin@acme.com'); await expect(page.getByText('admin@acme.com')).toBeVisible();
}); });
test('should show link provider button', async ({ page }) => { test('should show link provider button', async ({ page }) => {
@ -56,7 +42,7 @@ test.describe('SmartAuth: Account Linking', () => {
route.fulfill({ status: 200, body: JSON.stringify([]) }) route.fulfill({ status: 200, body: JSON.stringify([]) })
); );
await page.goto('/settings/security'); 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 }) => { 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 page.goto('/settings/devices');
await expect(page.getByText('Chrome on macOS')).toBeVisible({ timeout: 10000 }); await expect(page.getByText('Chrome on macOS')).toBeVisible({ timeout: 10000 });
await expect(page.getByText('Safari on iPhone')).toBeVisible(); await expect(page.getByText('Safari on iPhone')).toBeVisible();
await expect(page.getByText('Trusted', { exact: true })).toBeVisible(); await expect(page.getByText('Trusted')).toBeVisible();
await expect(page.getByText('Remembered', { exact: true })).toBeVisible(); await expect(page.getByText('Remembered')).toBeVisible();
}); });
test('revoke all button appears with multiple devices', async ({ page }) => { 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 }) => { test('shows Two-Factor Authentication section', async ({ page }) => {
await page.goto('/settings/security'); await page.goto('/settings/security');
await expect(page.getByText('Two-Factor Authentication', { exact: true })).toBeVisible({ await expect(page.getByText('Two-Factor Authentication')).toBeVisible({ timeout: 10000 });
timeout: 10000,
});
}); });
test('shows setup button when MFA is not enabled', async ({ page }) => { 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 route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
}); });
await page.goto('/settings/passkeys'); 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 }) => { test('shows empty state when no passkeys', async ({ page }) => {
@ -71,7 +71,7 @@ test.describe('SmartAuth: Passkey Management', () => {
await page.goto('/settings/passkeys'); await page.goto('/settings/passkeys');
await expect(page.getByText('MacBook Pro Touch ID')).toBeVisible({ timeout: 10000 }); await expect(page.getByText('MacBook Pro Touch ID')).toBeVisible({ timeout: 10000 });
await expect(page.getByText('YubiKey 5C')).toBeVisible(); await expect(page.getByText('YubiKey 5C')).toBeVisible();
await expect(page.getByText(/Built-in authenticator/)).toBeVisible(); await expect(page.getByText('Built-in authenticator')).toBeVisible();
await expect(page.getByText('Security key', { exact: true })).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 { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from 'eslint-config-next/core-web-vitals'; import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from 'eslint-config-next/typescript'; import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([ const eslintConfig = defineConfig([
// Ignores MUST come first so they apply to every subsequent // 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 // at index 0 is the documented way to make eslint v9 skip files
// entirely before any config rules apply. // entirely before any config rules apply.
{ {
ignores: ['**/.pnpmfile.cjs', '**/*.cjs'], ignores: [
"**/.pnpmfile.cjs",
"**/*.cjs",
],
}, },
...nextVitals, ...nextVitals,
...nextTs, ...nextTs,
{ {
rules: { rules: {
'react-hooks/set-state-in-effect': 'off', "react-hooks/set-state-in-effect": "off",
'@typescript-eslint/no-unused-vars': [ "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_" }],
'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',
}, },
}, },
// Override default ignores of eslint-config-next. // Override default ignores of eslint-config-next.
globalIgnores([ globalIgnores([
// Default ignores of eslint-config-next: // Default ignores of eslint-config-next:
'.next/**', ".next/**",
'out/**', "out/**",
'build/**', "build/**",
'next-env.d.ts', "next-env.d.ts",
// .pnpmfile.cjs is a pnpm install hook (CommonJS by design). // .pnpmfile.cjs is a pnpm install hook (CommonJS by design).
// The TypeScript no-require-imports rule would otherwise flag // The TypeScript no-require-imports rule would otherwise flag
// every require() call in this file. eslint-config-next does NOT // every require() call in this file. eslint-config-next does NOT
// ignore .cjs by default. // ignore .cjs by default.
'.pnpmfile.cjs', ".pnpmfile.cjs",
'**/*.cjs', "**/*.cjs",
]), ]),
]); ]);

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

@ -21,24 +21,20 @@
"prepare": "husky install" "prepare": "husky install"
}, },
"dependencies": { "dependencies": {
"@azure/cosmos": "^4.9.3", "@azure/cosmos": "^4.9.1",
"@azure/identity": "^4.13.0", "@azure/identity": "^4.13.0",
"@azure/keyvault-secrets": "^4.10.0", "@azure/keyvault-secrets": "^4.10.0",
"@bytelyst/api-client": "workspace:*", "@bytelyst/api-client": "workspace:*",
"@bytelyst/auth": "workspace:*", "@bytelyst/auth": "workspace:*",
"@bytelyst/charts": "workspace:*",
"@bytelyst/command-palette": "workspace:*",
"@bytelyst/config": "workspace:*", "@bytelyst/config": "workspace:*",
"@bytelyst/cosmos": "workspace:*",
"@bytelyst/dashboard-components": "workspace:*", "@bytelyst/dashboard-components": "workspace:*",
"@bytelyst/data-viz": "workspace:*", "@bytelyst/cosmos": "workspace:*",
"@bytelyst/datastore": "workspace:*", "@bytelyst/datastore": "workspace:*",
"@bytelyst/design-tokens": "workspace:*", "@bytelyst/design-tokens": "workspace:*",
"@bytelyst/devops": "workspace:*", "@bytelyst/devops": "workspace:*",
"@bytelyst/errors": "workspace:*", "@bytelyst/errors": "workspace:*",
"@bytelyst/extraction": "workspace:*", "@bytelyst/extraction": "workspace:*",
"@bytelyst/logger": "workspace:*", "@bytelyst/logger": "workspace:*",
"@bytelyst/motion": "workspace:*",
"@bytelyst/react-auth": "workspace:*", "@bytelyst/react-auth": "workspace:*",
"@bytelyst/telemetry-client": "workspace:*", "@bytelyst/telemetry-client": "workspace:*",
"@bytelyst/ui": "workspace:*", "@bytelyst/ui": "workspace:*",
@ -47,7 +43,7 @@
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"jose": "^6.2.3", "jose": "^6.1.3",
"lucide-react": "^0.563.0", "lucide-react": "^0.563.0",
"next": "16.1.6", "next": "16.1.6",
"posthog-js": "^1.196.0", "posthog-js": "^1.196.0",
@ -56,14 +52,15 @@
"react-dom": "19.2.3", "react-dom": "19.2.3",
"react-markdown": "^10.1.0", "react-markdown": "^10.1.0",
"redis": "^4.7.0", "redis": "^4.7.0",
"recharts": "^3.7.0",
"remark-gfm": "^4.0.1", "remark-gfm": "^4.0.1",
"tailwind-merge": "^3.4.0" "tailwind-merge": "^3.4.0"
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.58.2", "@playwright/test": "^1.58.2",
"@tailwindcss/postcss": "^4", "@tailwindcss/postcss": "^4",
"@types/bcryptjs": "^3.0.0", "@types/bcryptjs": "^2.4.6",
"@types/node": "^25.9.1", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"@vitest/coverage-v8": "^4.0.18", "@vitest/coverage-v8": "^4.0.18",
@ -71,7 +68,7 @@
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "16.1.6", "eslint-config-next": "16.1.6",
"husky": "^9.0.0", "husky": "^9.0.0",
"lint-staged": "^16.4.0", "lint-staged": "^15.0.0",
"prettier": "^3.0.0", "prettier": "^3.0.0",
"shadcn": "^3.8.4", "shadcn": "^3.8.4",
"tailwindcss": "^4", "tailwindcss": "^4",

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

@ -1,8 +1,5 @@
import { defineConfig, devices } from '@playwright/test'; 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({ export default defineConfig({
testDir: './e2e', testDir: './e2e',
fullyParallel: true, fullyParallel: true,
@ -11,7 +8,7 @@ export default defineConfig({
workers: process.env.CI ? 1 : undefined, workers: process.env.CI ? 1 : undefined,
reporter: 'html', reporter: 'html',
use: { use: {
baseURL, baseURL: 'http://localhost:3001',
trace: 'on-first-retry', trace: 'on-first-retry',
}, },
projects: [ projects: [
@ -21,9 +18,9 @@ export default defineConfig({
}, },
], ],
webServer: { webServer: {
command: `pnpm exec next dev -H 127.0.0.1 -p ${port}`, command: 'npm run dev',
url: baseURL, url: 'http://localhost:3001',
reuseExistingServer: process.env.ADMIN_WEB_REUSE_SERVER === '1', reuseExistingServer: !process.env.CI,
timeout: 60_000, 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 () => { it('returns existing kill_switch flag state', async () => {
mockListFlags.mockResolvedValue({ mockListFlags.mockResolvedValue({
flags: [ flags: [{
{ key: 'kill_switch',
key: 'kill_switch', enabled: true,
enabled: true, platforms: ['desktop', 'ios'],
platforms: ['desktop', 'ios'], description: 'Maintenance window',
description: 'Maintenance window', updatedAt: '2026-02-16T00:00:00Z',
updatedAt: '2026-02-16T00:00:00Z', }],
},
],
}); });
const res = await makeGet(); 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]); }, [inputText, selectedTask]);
const currentTask = tasks.find(t => t.id === selectedTask); const currentTask = tasks.find((t) => t.id === selectedTask);
// Group extractions by class // Group extractions by class
const groupedExtractions = result?.extractions.reduce( const groupedExtractions = result?.extractions.reduce(
@ -148,7 +148,7 @@ export default function ExtractionPage() {
acc[cls].push(e); acc[cls].push(e);
return acc; return acc;
}, },
{} as Record<string, ExtractionEntity[]> {} as Record<string, ExtractionEntity[]>,
); );
return ( 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" 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..." placeholder="Paste a transcript, meeting notes, or any text to extract structured entities from..."
value={inputText} value={inputText}
onChange={e => setInputText(e.target.value)} onChange={(e) => setInputText(e.target.value)}
/> />
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button onClick={handleExtract} disabled={loading || !inputText.trim()}> <Button onClick={handleExtract} disabled={loading || !inputText.trim()}>
@ -212,10 +212,10 @@ export default function ExtractionPage() {
<select <select
className="w-full rounded-lg border border-border bg-background p-2 text-sm" className="w-full rounded-lg border border-border bg-background p-2 text-sm"
value={selectedTask} value={selectedTask}
onChange={e => setSelectedTask(e.target.value)} onChange={(e) => setSelectedTask(e.target.value)}
> >
{tasks.length > 0 ? ( {tasks.length > 0 ? (
tasks.map(t => ( tasks.map((t) => (
<option key={t.id} value={t.id}> <option key={t.id} value={t.id}>
{t.name} {t.builtIn ? '(built-in)' : ''} {t.name} {t.builtIn ? '(built-in)' : ''}
</option> </option>
@ -249,7 +249,7 @@ export default function ExtractionPage() {
<CardContent className="pt-4 space-y-2 text-xs"> <CardContent className="pt-4 space-y-2 text-xs">
<p className="text-muted-foreground">{currentTask.description}</p> <p className="text-muted-foreground">{currentTask.description}</p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{currentTask.classes.map(cls => ( {currentTask.classes.map((cls) => (
<Badge <Badge
key={cls} key={cls}
variant="outline" variant="outline"
@ -365,7 +365,11 @@ export default function ExtractionPage() {
{e.attributes && Object.keys(e.attributes).length > 0 && ( {e.attributes && Object.keys(e.attributes).length > 0 && (
<div className="mt-1 flex flex-wrap gap-1"> <div className="mt-1 flex flex-wrap gap-1">
{Object.entries(e.attributes).map(([k, v]) => ( {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} {k}: {v}
</Badge> </Badge>
))} ))}
@ -396,10 +400,7 @@ export default function ExtractionPage() {
{result.extractions.map((e, i) => ( {result.extractions.map((e, i) => (
<TableRow key={i}> <TableRow key={i}>
<TableCell> <TableCell>
<Badge <Badge variant="outline" className={`text-xs ${getClassColor(e.extraction_class)}`}>
variant="outline"
className={`text-xs ${getClassColor(e.extraction_class)}`}
>
{e.extraction_class} {e.extraction_class}
</Badge> </Badge>
</TableCell> </TableCell>

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

@ -1,7 +1,14 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@ -76,10 +83,7 @@ export default function FlagsPage() {
enabled: form.enabled, enabled: form.enabled,
percentage: form.percentage, percentage: form.percentage,
platforms: form.platforms platforms: form.platforms
? form.platforms ? form.platforms.split(',').map(s => s.trim()).filter(Boolean)
.split(',')
.map(s => s.trim())
.filter(Boolean)
: [], : [],
}), }),
}); });
@ -247,7 +251,9 @@ export default function FlagsPage() {
<div> <div>
<CardTitle className="text-sm font-mono">{flag.key}</CardTitle> <CardTitle className="text-sm font-mono">{flag.key}</CardTitle>
{flag.description && ( {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>
</div> </div>
@ -278,9 +284,19 @@ export default function FlagsPage() {
</CardHeader> </CardHeader>
<CardContent className="pt-0"> <CardContent className="pt-0">
<div className="flex items-center gap-4 text-xs text-muted-foreground"> <div className="flex items-center gap-4 text-xs text-muted-foreground">
{flag.platforms.length > 0 && <span>Platforms: {flag.platforms.join(', ')}</span>} {flag.platforms.length > 0 && (
{flag.segments.length > 0 && <span>Segments: {flag.segments.join(', ')}</span>} <span>
<span>Updated {new Date(flag.updatedAt).toLocaleDateString()}</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> </div>
{flag.enabled && ( {flag.enabled && (
<div className="mt-3 flex items-center gap-3"> <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'; 'use client';
import { CommandRegistryProvider } from '@bytelyst/command-palette';
import { SidebarNav } from '@/components/sidebar-nav'; import { SidebarNav } from '@/components/sidebar-nav';
import { AuthGuard } from '@/components/auth-guard'; import { AuthGuard } from '@/components/auth-guard';
import { CommandMenu } from '@/components/command-menu';
import { ErrorBoundary } from '@/components/error-boundary'; import { ErrorBoundary } from '@/components/error-boundary';
import { useStripeConfig } from '@/lib/stripe-context'; import { useStripeConfig } from '@/lib/stripe-context';
import { FlaskConical, ShieldCheck } from 'lucide-react'; import { FlaskConical, ShieldCheck } from 'lucide-react';
@ -34,16 +32,13 @@ function StripeModeBanner() {
export default function DashboardLayout({ children }: { children: React.ReactNode }) { export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return ( return (
<AuthGuard> <AuthGuard>
<CommandRegistryProvider> <SidebarNav />
<SidebarNav /> <main className="ml-64 min-h-screen bg-background max-md:ml-0">
<main className="ml-64 min-h-screen bg-background max-md:ml-0"> <StripeModeBanner />
<StripeModeBanner /> <div className="p-8 max-md:p-4">
<div className="p-8 max-md:p-4"> <ErrorBoundary>{children}</ErrorBoundary>
<ErrorBoundary>{children}</ErrorBoundary> </div>
</div> </main>
</main>
<CommandMenu />
</CommandRegistryProvider>
</AuthGuard> </AuthGuard>
); );
} }

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

@ -1,7 +1,17 @@
'use client'; 'use client';
import { useState } from 'react'; 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 { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
@ -121,7 +131,9 @@ export default function LicensesPage() {
body: JSON.stringify({ key, action: 'revoke' }), body: JSON.stringify({ key, action: 'revoke' }),
}); });
if (res.ok) { 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 { } catch {
// ignore // ignore
@ -208,7 +220,11 @@ export default function LicensesPage() {
<code className="text-sm font-mono font-bold text-emerald-800 dark:text-emerald-200"> <code className="text-sm font-mono font-bold text-emerald-800 dark:text-emerald-200">
{generatedKey} {generatedKey}
</code> </code>
<Button variant="ghost" size="sm" onClick={() => copyToClipboard(generatedKey)}> <Button
variant="ghost"
size="sm"
onClick={() => copyToClipboard(generatedKey)}
>
{copiedKey === generatedKey ? ( {copiedKey === generatedKey ? (
<Check className="h-4 w-4 text-emerald-600" /> <Check className="h-4 w-4 text-emerald-600" />
) : ( ) : (
@ -355,7 +371,9 @@ export default function LicensesPage() {
))} ))}
</div> </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> </CardContent>
</Card> </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() { export default function DashboardLoading() {
return ( return (
@ -29,7 +29,7 @@ export default function DashboardLoading() {
<div key={i} className="rounded-xl border bg-card p-6"> <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="mb-4 h-5 w-36 animate-pulse rounded bg-muted" />
<div className="flex items-center justify-center h-64"> <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>
</div> </div>
))} ))}

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

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

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

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

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

@ -1,6 +1,6 @@
'use client'; 'use client';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { import {
Activity, Activity,
CheckCircle, CheckCircle,
@ -13,7 +13,6 @@ import {
ServerCog, ServerCog,
ShieldAlert, ShieldAlert,
} from 'lucide-react'; } from 'lucide-react';
import { buildOpsCockpit } from '@/lib/ops-cockpit';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@ -272,35 +271,6 @@ export default function OpsPage() {
return 'text-red-500'; 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 ( return (
<div className="flex-1 space-y-4 p-8 pt-6"> <div className="flex-1 space-y-4 p-8 pt-6">
<div className="flex items-center justify-between space-y-2"> <div className="flex items-center justify-between space-y-2">
@ -340,55 +310,6 @@ export default function OpsPage() {
</Card> </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"> <div className="flex gap-2 border-b">
{[ {[
{ id: 'overview', label: 'Overview', icon: Activity }, { 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 className="flex items-center justify-between">
<div> <div>
<h2 className="text-3xl font-bold tracking-tight">Secrets Manager</h2> <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>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={fetchSecrets} disabled={loading}> <Button variant="outline" size="sm" onClick={fetchSecrets} disabled={loading}>
@ -421,11 +423,7 @@ export default function SecretsPage() {
className="h-7 w-7" className="h-7 w-7"
onClick={() => setShowValue(!showValue)} onClick={() => setShowValue(!showValue)}
> >
{showValue ? ( {showValue ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
<EyeOff className="h-3.5 w-3.5" />
) : (
<Eye className="h-3.5 w-3.5" />
)}
</Button> </Button>
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleCopy}> <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleCopy}>
{copied ? ( {copied ? (
@ -547,8 +545,8 @@ export default function SecretsPage() {
<DialogTitle className="text-red-500">Delete Secret</DialogTitle> <DialogTitle className="text-red-500">Delete Secret</DialogTitle>
<DialogDescription> <DialogDescription>
Are you sure you want to delete{' '} Are you sure you want to delete{' '}
<span className="font-mono font-bold">{deleteTarget}</span>? This will soft-delete the <span className="font-mono font-bold">{deleteTarget}</span>? This will soft-delete
secret in Azure Key Vault. It can be recovered within the retention period. the secret in Azure Key Vault. It can be recovered within the retention period.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<DialogFooter> <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 [formPercentage, setFormPercentage] = useState(100);
const [formStartsAt, setFormStartsAt] = useState(''); const [formStartsAt, setFormStartsAt] = useState('');
const [formExpiresAt, setFormExpiresAt] = useState(''); const [formExpiresAt, setFormExpiresAt] = useState('');
const [preview, setPreview] = useState<{ const [preview, setPreview] = useState<{ matchedClients: number; totalClients: number; sampleSize: number } | null>(null);
matchedClients: number;
totalClients: number;
sampleSize: number;
} | null>(null);
const [previewLoading, setPreviewLoading] = useState(false); const [previewLoading, setPreviewLoading] = useState(false);
const fetchPolicies = useCallback(async () => { const fetchPolicies = useCallback(async () => {
@ -158,12 +154,7 @@ export default function TelemetryPoliciesPage() {
enabled: formEnabled, enabled: formEnabled,
priority: formPriority, priority: formPriority,
eventTypes: formEventTypes, eventTypes: formEventTypes,
modules: formModules modules: formModules ? formModules.split(',').map(m => m.trim()).filter(Boolean) : [],
? formModules
.split(',')
.map(m => m.trim())
.filter(Boolean)
: [],
samplingRate: formSamplingRate, samplingRate: formSamplingRate,
targeting: { targeting: {
platforms: formPlatforms.length > 0 ? formPlatforms : undefined, 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]); setter(arr.includes(item) ? arr.filter(x => x !== item) : [...arr, item]);
}; };
@ -476,15 +471,12 @@ export default function TelemetryPoliciesPage() {
targeting: { targeting: {
platforms: formPlatforms.length > 0 ? formPlatforms : undefined, platforms: formPlatforms.length > 0 ? formPlatforms : undefined,
channels: formChannels.length > 0 ? formChannels : undefined, channels: formChannels.length > 0 ? formChannels : undefined,
releaseChannels: releaseChannels: formReleaseChannels.length > 0 ? formReleaseChannels : undefined,
formReleaseChannels.length > 0 ? formReleaseChannels : undefined,
}, },
}), }),
}); });
if (res.ok) setPreview(await res.json()); if (res.ok) setPreview(await res.json());
} catch { } catch { /* best effort */ } finally {
/* best effort */
} finally {
setPreviewLoading(false); setPreviewLoading(false);
} }
}} }}
@ -496,8 +488,7 @@ export default function TelemetryPoliciesPage() {
<span className="text-sm"> <span className="text-sm">
<strong className="text-primary">{preview.matchedClients}</strong> <strong className="text-primary">{preview.matchedClients}</strong>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
{' '} {' '}/ {preview.totalClients} clients would match
/ {preview.totalClients} clients would match
</span> </span>
<span className="text-xs text-muted-foreground ml-1"> <span className="text-xs text-muted-foreground ml-1">
(from {preview.sampleSize} recent events) (from {preview.sampleSize} recent events)
@ -590,7 +581,9 @@ export default function TelemetryPoliciesPage() {
<div> <div>
<p className="font-medium">{policy.name}</p> <p className="font-medium">{policy.name}</p>
{policy.description && ( {policy.description && (
<p className="text-xs text-muted-foreground">{policy.description}</p> <p className="text-xs text-muted-foreground">
{policy.description}
</p>
)} )}
</div> </div>
</TableCell> </TableCell>
@ -632,9 +625,13 @@ export default function TelemetryPoliciesPage() {
</div> </div>
</TableCell> </TableCell>
<TableCell className="text-xs text-muted-foreground"> <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>
<TableCell className="text-right"> <TableCell className="text-right">
<div className="flex justify-end gap-1"> <div className="flex justify-end gap-1">
@ -650,10 +647,18 @@ export default function TelemetryPoliciesPage() {
<ToggleLeft className="h-4 w-4" /> <ToggleLeft className="h-4 w-4" />
)} )}
</Button> </Button>
<Button variant="ghost" size="sm" onClick={() => openEditForm(policy)}> <Button
variant="ghost"
size="sm"
onClick={() => openEditForm(policy)}
>
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
</Button> </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" /> <Trash2 className="h-4 w-4 text-destructive" />
</Button> </Button>
</div> </div>

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

@ -12,7 +12,6 @@ import {
ArrowDownRight, ArrowDownRight,
RefreshCw, RefreshCw,
Cpu, Cpu,
AlertCircle,
} from 'lucide-react'; } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@ -35,10 +34,17 @@ import {
type ApiUsageRecord, type ApiUsageRecord,
type RevenueAnalytics, type RevenueAnalytics,
} from '@/lib/api'; } from '@/lib/api';
import { PageHeader } from '@bytelyst/dashboard-components'; import {
import { Reveal, StaggerList } from '@bytelyst/motion'; AreaChart,
import { AreaChart, BarChart } from '@/components/charts'; Area,
import { seriesValues, dateBars } from '@/lib/chart-data'; XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
BarChart,
Bar,
} from 'recharts';
function buildKpiCards(stats: typeof mockSummaryStats, revenue?: RevenueAnalytics | null) { function buildKpiCards(stats: typeof mockSummaryStats, revenue?: RevenueAnalytics | null) {
const fmt = (n: number) => (n >= 0 ? `+${n}%` : `${n}%`); const fmt = (n: number) => (n >= 0 ? `+${n}%` : `${n}%`);
@ -219,7 +225,6 @@ export default function DashboardPage() {
const [revenue, setRevenue] = useState<RevenueAnalytics | null>(null); const [revenue, setRevenue] = useState<RevenueAnalytics | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [loadError, setLoadError] = useState<string | null>(null);
const [lastUpdated, setLastUpdated] = useState<Date | null>(null); const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
const fetchData = useCallback(async (isRefresh = false) => { const fetchData = useCallback(async (isRefresh = false) => {
@ -232,29 +237,15 @@ export default function DashboardPage() {
apiGetRevenueAnalytics(6), apiGetRevenueAnalytics(6),
]); ]);
let successfulSections = 0;
const failures: string[] = [];
if (statsRes.status === 'fulfilled' && statsRes.value.data) { if (statsRes.status === 'fulfilled' && statsRes.value.data) {
successfulSections += 1;
setStats(prev => mergeApiStats(prev, statsRes.value.data!)); setStats(prev => mergeApiStats(prev, statsRes.value.data!));
} else {
failures.push('dashboard stats');
} }
if (usageRes.status === 'fulfilled' && usageRes.value.data?.records?.length) { if (usageRes.status === 'fulfilled' && usageRes.value.data?.records?.length) {
successfulSections += 1;
const metrics = usageRecordsToDailyMetrics(usageRes.value.data.records); const metrics = usageRecordsToDailyMetrics(usageRes.value.data.records);
setDailyMetrics(metrics); setDailyMetrics(metrics);
setModelUsage(buildModelUsage(usageRes.value.data.records)); 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) { if (usersRes.status === 'fulfilled' && usersRes.value.data?.users?.length) {
successfulSections += 1;
setRecentUsers( setRecentUsers(
usersRes.value.data.users usersRes.value.data.users
.sort((a, b) => b.lastActive.localeCompare(a.lastActive)) .sort((a, b) => b.lastActive.localeCompare(a.lastActive))
@ -272,22 +263,9 @@ export default function DashboardPage() {
monthlySpend: u.monthlySpend, 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) { if (revenueRes.status === 'fulfilled' && revenueRes.value.data) {
successfulSections += 1;
setRevenue(revenueRes.value.data); 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()); setLastUpdated(new Date());
} finally { } finally {
@ -306,50 +284,24 @@ export default function DashboardPage() {
return ( return (
<div className="space-y-8"> <div className="space-y-8">
{/* Header */} {/* Header */}
<div> <div className="flex items-center justify-between">
<PageHeader <div>
title="Dashboard" <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
className="!mb-2" <p className="text-muted-foreground">
actions={ Platform overview and key metrics
<Button {lastUpdated && (
variant="outline" <span className="ml-2 text-xs">
size="sm" &middot; Updated {lastUpdated.toLocaleTimeString()}
onClick={() => fetchData(true)} </span>
disabled={refreshing} )}
> </p>
<RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} /> </div>
Refresh <Button variant="outline" size="sm" onClick={() => fetchData(true)} disabled={refreshing}>
</Button> <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> </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 */} {/* KPI Cards */}
{loading ? ( {loading ? (
<div 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">
@ -358,12 +310,7 @@ export default function DashboardPage() {
))} ))}
</div> </div>
) : ( ) : (
<StaggerList <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
as="div"
from="up"
stagger={50}
className="grid gap-4 md:grid-cols-2 lg:grid-cols-3"
>
{kpiCards.map(card => ( {kpiCards.map(card => (
<Card key={card.title} className="transition-shadow hover:shadow-md"> <Card key={card.title} className="transition-shadow hover:shadow-md">
<CardHeader className="flex flex-row items-center justify-between pb-2"> <CardHeader className="flex flex-row items-center justify-between pb-2">
@ -397,7 +344,7 @@ export default function DashboardPage() {
</CardContent> </CardContent>
</Card> </Card>
))} ))}
</StaggerList> </div>
)} )}
{/* Charts Row */} {/* Charts Row */}
@ -414,13 +361,32 @@ export default function DashboardPage() {
<CardTitle className="text-base">Daily Active Users (30 days)</CardTitle> <CardTitle className="text-base">Daily Active Users (30 days)</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<AreaChart <ResponsiveContainer width="100%" height={280}>
values={seriesValues(dailyMetrics, 'activeUsers')} <AreaChart data={dailyMetrics}>
width={640} <defs>
height={280} <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
className="h-auto w-full" <stop offset="5%" stopColor="hsl(var(--chart-1))" stopOpacity={0.3} />
ariaLabel="Daily active users over the last 30 days" <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> </CardContent>
</Card> </Card>
@ -430,20 +396,28 @@ export default function DashboardPage() {
<CardTitle className="text-base">Daily Revenue (30 days)</CardTitle> <CardTitle className="text-base">Daily Revenue (30 days)</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<BarChart <ResponsiveContainer width="100%" height={280}>
data={dateBars(dailyMetrics, 'revenue')} <BarChart data={dailyMetrics}>
width={640} <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
height={280} <XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
className="h-auto w-full" <YAxis className="text-xs" tickFormatter={v => `$${v}`} />
ariaLabel="Daily revenue over the last 30 days" <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> </CardContent>
</Card> </Card>
</div> </div>
)} )}
{/* Bottom Row: Model Usage + Recent Users */} {/* 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 */} {/* Model Usage */}
<Card> <Card>
<CardHeader> <CardHeader>
@ -529,7 +503,7 @@ export default function DashboardPage() {
)} )}
</CardContent> </CardContent>
</Card> </Card>
</Reveal> </div>
</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(); const product = await res.json();
setCreateOpen(false); setCreateOpen(false);
setForm({ setForm({
productId: '', productId: '', displayName: '', licensePrefix: '', packageName: '',
displayName: '', defaultPlan: 'free', trialDays: '14', websiteUrl: '',
licensePrefix: '', deviceLimitFree: '1', deviceLimitPro: '3', deviceLimitEnterprise: '10',
packageName: '',
defaultPlan: 'free',
trialDays: '14',
websiteUrl: '',
deviceLimitFree: '1',
deviceLimitPro: '3',
deviceLimitEnterprise: '10',
}); });
// Auto-onboard: seed plans + kill_switch flag // Auto-onboard: seed plans + kill_switch flag
await handleOnboard(product.productId); await handleOnboard(product.productId);
@ -237,7 +230,9 @@ export default function ProductsPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-3xl font-bold tracking-tight">Products</h1> <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> </div>
<Dialog open={createOpen} onOpenChange={setCreateOpen}> <Dialog open={createOpen} onOpenChange={setCreateOpen}>
<DialogTrigger asChild> <DialogTrigger asChild>
@ -276,9 +271,7 @@ export default function ProductsPage() {
<Input <Input
placeholder="PROD" placeholder="PROD"
value={form.licensePrefix} value={form.licensePrefix}
onChange={e => onChange={e => setForm({ ...form, licensePrefix: e.target.value.toUpperCase() })}
setForm({ ...form, licensePrefix: e.target.value.toUpperCase() })
}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@ -297,9 +290,7 @@ export default function ProductsPage() {
value={form.defaultPlan} value={form.defaultPlan}
onValueChange={v => setForm({ ...form, defaultPlan: v as 'free' | 'pro' })} onValueChange={v => setForm({ ...form, defaultPlan: v as 'free' | 'pro' })}
> >
<SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="free">Free</SelectItem> <SelectItem value="free">Free</SelectItem>
<SelectItem value="pro">Pro</SelectItem> <SelectItem value="pro">Pro</SelectItem>
@ -331,8 +322,7 @@ export default function ProductsPage() {
<div> <div>
<p className="text-[10px] text-muted-foreground mb-1">Free</p> <p className="text-[10px] text-muted-foreground mb-1">Free</p>
<Input <Input
type="number" type="number" min={0}
min={0}
value={form.deviceLimitFree} value={form.deviceLimitFree}
onChange={e => setForm({ ...form, deviceLimitFree: e.target.value })} onChange={e => setForm({ ...form, deviceLimitFree: e.target.value })}
/> />
@ -340,8 +330,7 @@ export default function ProductsPage() {
<div> <div>
<p className="text-[10px] text-muted-foreground mb-1">Pro</p> <p className="text-[10px] text-muted-foreground mb-1">Pro</p>
<Input <Input
type="number" type="number" min={0}
min={0}
value={form.deviceLimitPro} value={form.deviceLimitPro}
onChange={e => setForm({ ...form, deviceLimitPro: e.target.value })} onChange={e => setForm({ ...form, deviceLimitPro: e.target.value })}
/> />
@ -349,8 +338,7 @@ export default function ProductsPage() {
<div> <div>
<p className="text-[10px] text-muted-foreground mb-1">Enterprise</p> <p className="text-[10px] text-muted-foreground mb-1">Enterprise</p>
<Input <Input
type="number" type="number" min={0}
min={0}
value={form.deviceLimitEnterprise} value={form.deviceLimitEnterprise}
onChange={e => setForm({ ...form, deviceLimitEnterprise: e.target.value })} onChange={e => setForm({ ...form, deviceLimitEnterprise: e.target.value })}
/> />
@ -379,8 +367,7 @@ export default function ProductsPage() {
Product &quot;{onboardResult.productId}&quot; onboarded successfully Product &quot;{onboardResult.productId}&quot; onboarded successfully
</p> </p>
<p className="text-xs text-emerald-700 dark:text-emerald-300"> <p className="text-xs text-emerald-700 dark:text-emerald-300">
{onboardResult.plans} plans seeded {onboardResult.plans} plans seeded{onboardResult.flags > 0 ? `, ${onboardResult.flags} flag(s) created` : ''}
{onboardResult.flags > 0 ? `, ${onboardResult.flags} flag(s) created` : ''}
</p> </p>
</div> </div>
</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' : 'bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400'
} }
> >
{p.status === 'active' ? ( {p.status === 'active' ? <Check className="mr-1 h-3 w-3" /> : <X className="mr-1 h-3 w-3" />}
<Check className="mr-1 h-3 w-3" />
) : (
<X className="mr-1 h-3 w-3" />
)}
{p.status} {p.status}
</Badge> </Badge>
<Button <Button
@ -461,8 +444,7 @@ export default function ProductsPage() {
<div>{p.trialDays}</div> <div>{p.trialDays}</div>
<div className="text-muted-foreground">Device Limits</div> <div className="text-muted-foreground">Device Limits</div>
<div> <div>
Free: {p.deviceLimits.free} · Pro: {p.deviceLimits.pro} · Ent:{' '} Free: {p.deviceLimits.free} · Pro: {p.deviceLimits.pro} · Ent: {p.deviceLimits.enterprise}
{p.deviceLimits.enterprise}
</div> </div>
{p.websiteUrl && ( {p.websiteUrl && (
<> <>
@ -506,9 +488,7 @@ export default function ProductsPage() {
value={editForm.status ?? 'active'} value={editForm.status ?? 'active'}
onValueChange={v => setEditForm({ ...editForm, status: v })} onValueChange={v => setEditForm({ ...editForm, status: v })}
> >
<SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="active">Active</SelectItem> <SelectItem value="active">Active</SelectItem>
<SelectItem value="disabled">Disabled</SelectItem> <SelectItem value="disabled">Disabled</SelectItem>
@ -523,9 +503,7 @@ export default function ProductsPage() {
value={editForm.defaultPlan ?? 'free'} value={editForm.defaultPlan ?? 'free'}
onValueChange={v => setEditForm({ ...editForm, defaultPlan: v })} onValueChange={v => setEditForm({ ...editForm, defaultPlan: v })}
> >
<SelectTrigger> <SelectTrigger><SelectValue /></SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="free">Free</SelectItem> <SelectItem value="free">Free</SelectItem>
<SelectItem value="pro">Pro</SelectItem> <SelectItem value="pro">Pro</SelectItem>
@ -535,9 +513,7 @@ export default function ProductsPage() {
<div className="space-y-2"> <div className="space-y-2">
<Label>Trial Days</Label> <Label>Trial Days</Label>
<Input <Input
type="number" type="number" min={0} max={365}
min={0}
max={365}
value={editForm.trialDays ?? '14'} value={editForm.trialDays ?? '14'}
onChange={e => setEditForm({ ...editForm, trialDays: e.target.value })} onChange={e => setEditForm({ ...editForm, trialDays: e.target.value })}
/> />
@ -556,8 +532,7 @@ export default function ProductsPage() {
<div> <div>
<p className="text-[10px] text-muted-foreground mb-1">Free</p> <p className="text-[10px] text-muted-foreground mb-1">Free</p>
<Input <Input
type="number" type="number" min={0}
min={0}
value={editForm.deviceLimitFree ?? '1'} value={editForm.deviceLimitFree ?? '1'}
onChange={e => setEditForm({ ...editForm, deviceLimitFree: e.target.value })} onChange={e => setEditForm({ ...editForm, deviceLimitFree: e.target.value })}
/> />
@ -565,8 +540,7 @@ export default function ProductsPage() {
<div> <div>
<p className="text-[10px] text-muted-foreground mb-1">Pro</p> <p className="text-[10px] text-muted-foreground mb-1">Pro</p>
<Input <Input
type="number" type="number" min={0}
min={0}
value={editForm.deviceLimitPro ?? '3'} value={editForm.deviceLimitPro ?? '3'}
onChange={e => setEditForm({ ...editForm, deviceLimitPro: e.target.value })} onChange={e => setEditForm({ ...editForm, deviceLimitPro: e.target.value })}
/> />
@ -574,12 +548,9 @@ export default function ProductsPage() {
<div> <div>
<p className="text-[10px] text-muted-foreground mb-1">Enterprise</p> <p className="text-[10px] text-muted-foreground mb-1">Enterprise</p>
<Input <Input
type="number" type="number" min={0}
min={0}
value={editForm.deviceLimitEnterprise ?? '10'} value={editForm.deviceLimitEnterprise ?? '10'}
onChange={e => onChange={e => setEditForm({ ...editForm, deviceLimitEnterprise: e.target.value })}
setEditForm({ ...editForm, deviceLimitEnterprise: e.target.value })
}
/> />
</div> </div>
</div> </div>

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

@ -30,13 +30,7 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { import { apiListPromos, apiCreatePromo, apiDeletePromo, apiUpdatePromo, type ApiPromo } from '@/lib/api';
apiListPromos,
apiCreatePromo,
apiDeletePromo,
apiUpdatePromo,
type ApiPromo,
} from '@/lib/api';
function formatDate(iso: string) { function formatDate(iso: string) {
return new Date(iso).toLocaleDateString('en-US', { return new Date(iso).toLocaleDateString('en-US', {
@ -75,8 +69,7 @@ export default function PromosPage() {
const handleToggleActive = async (promo: ApiPromo) => { const handleToggleActive = async (promo: ApiPromo) => {
const { data } = await apiUpdatePromo(promo.id, { active: !promo.active }); const { data } = await apiUpdatePromo(promo.id, { active: !promo.active });
if (data) if (data) setPromos(prev => prev.map(p => p.id === promo.id ? { ...p, active: !p.active } : p));
setPromos(prev => prev.map(p => (p.id === promo.id ? { ...p, active: !p.active } : p)));
}; };
const loadPromos = useCallback(async () => { 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> <CardTitle className="text-base">Azure Configuration</CardTitle>
<CardDescription> <CardDescription>
Azure secrets are managed via the{' '} Azure secrets are managed via the{' '}
<a <a href="/ops/secrets" className="text-primary underline underline-offset-2 hover:text-primary/80">
href="/ops/secrets"
className="text-primary underline underline-offset-2 hover:text-primary/80"
>
Secrets Manager Secrets Manager
</a>{' '} </a>
(Key Vault) {' '}(Key Vault)
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
@ -452,8 +449,8 @@ export default function SettingsPage() {
in Azure Key Vault and resolved at runtime. Use the{' '} in Azure Key Vault and resolved at runtime. Use the{' '}
<a href="/ops/secrets" className="text-primary underline underline-offset-2"> <a href="/ops/secrets" className="text-primary underline underline-offset-2">
Secrets Manager Secrets Manager
</a>{' '} </a>
to view, rotate, or update them. {' '}to view, rotate, or update them.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
@ -476,12 +473,7 @@ export default function SettingsPage() {
<Input <Input
type="number" type="number"
value={settings.rateLimits.globalPerMin} value={settings.rateLimits.globalPerMin}
onChange={e => onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, globalPerMin: parseInt(e.target.value) || 0 } }))}
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, globalPerMin: parseInt(e.target.value) || 0 },
}))
}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@ -489,12 +481,7 @@ export default function SettingsPage() {
<Input <Input
type="number" type="number"
value={settings.rateLimits.perUserPerMin} value={settings.rateLimits.perUserPerMin}
onChange={e => onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, perUserPerMin: parseInt(e.target.value) || 0 } }))}
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, perUserPerMin: parseInt(e.target.value) || 0 },
}))
}
/> />
</div> </div>
</div> </div>
@ -504,12 +491,7 @@ export default function SettingsPage() {
<Input <Input
type="number" type="number"
value={settings.rateLimits.maxTokenBurst} value={settings.rateLimits.maxTokenBurst}
onChange={e => onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, maxTokenBurst: parseInt(e.target.value) || 0 } }))}
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, maxTokenBurst: parseInt(e.target.value) || 0 },
}))
}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@ -517,12 +499,7 @@ export default function SettingsPage() {
<Input <Input
type="number" type="number"
value={settings.rateLimits.abuseThreshold} value={settings.rateLimits.abuseThreshold}
onChange={e => onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, abuseThreshold: parseInt(e.target.value) || 0 } }))}
setSettings(s => ({
...s,
rateLimits: { ...s.rateLimits, abuseThreshold: parseInt(e.target.value) || 0 },
}))
}
/> />
</div> </div>
</div> </div>
@ -536,9 +513,7 @@ export default function SettingsPage() {
</div> </div>
<Switch <Switch
checked={settings.rateLimits.autoSuspendOnAbuse} checked={settings.rateLimits.autoSuspendOnAbuse}
onCheckedChange={v => onCheckedChange={v => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, autoSuspendOnAbuse: v } }))}
setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, autoSuspendOnAbuse: v } }))
}
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -550,9 +525,7 @@ export default function SettingsPage() {
</div> </div>
<Switch <Switch
checked={settings.rateLimits.ipBlocklist} checked={settings.rateLimits.ipBlocklist}
onCheckedChange={v => onCheckedChange={v => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, ipBlocklist: v } }))}
setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, ipBlocklist: v } }))
}
/> />
</div> </div>
</CardContent> </CardContent>
@ -579,12 +552,7 @@ export default function SettingsPage() {
</div> </div>
<Switch <Switch
checked={settings.notifications.newUserSignup} checked={settings.notifications.newUserSignup}
onCheckedChange={v => onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, newUserSignup: v } }))}
setSettings(s => ({
...s,
notifications: { ...s.notifications, newUserSignup: v },
}))
}
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -596,12 +564,7 @@ export default function SettingsPage() {
</div> </div>
<Switch <Switch
checked={settings.notifications.usageThreshold} checked={settings.notifications.usageThreshold}
onCheckedChange={v => onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, usageThreshold: v } }))}
setSettings(s => ({
...s,
notifications: { ...s.notifications, usageThreshold: v },
}))
}
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -613,12 +576,7 @@ export default function SettingsPage() {
</div> </div>
<Switch <Switch
checked={settings.notifications.failedPayment} checked={settings.notifications.failedPayment}
onCheckedChange={v => onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, failedPayment: v } }))}
setSettings(s => ({
...s,
notifications: { ...s.notifications, failedPayment: v },
}))
}
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@ -630,12 +588,7 @@ export default function SettingsPage() {
</div> </div>
<Switch <Switch
checked={settings.notifications.securityAlerts} checked={settings.notifications.securityAlerts}
onCheckedChange={v => onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, securityAlerts: v } }))}
setSettings(s => ({
...s,
notifications: { ...s.notifications, securityAlerts: v },
}))
}
/> />
</div> </div>
</CardContent> </CardContent>
@ -667,9 +620,7 @@ export default function SettingsPage() {
<Input <Input
type="number" type="number"
value={settings.dataRetentionDays} value={settings.dataRetentionDays}
onChange={e => onChange={e => setSettings(s => ({ ...s, dataRetentionDays: parseInt(e.target.value) || 365 }))}
setSettings(s => ({ ...s, dataRetentionDays: parseInt(e.target.value) || 365 }))
}
/> />
</div> </div>
<div className="space-y-2"> <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[]; recoveryCodes: string[];
} }
interface LinkedProvider {
provider: string;
email: string;
linkedAt?: string;
}
function getToken(): string | null { function getToken(): string | null {
return typeof window !== 'undefined' ? localStorage.getItem('admin_access_token') : 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}` } : {}; 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() { export default function SecuritySettingsPage() {
const [status, setStatus] = useState<MfaStatus | null>(null); const [status, setStatus] = useState<MfaStatus | null>(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@ -62,7 +48,6 @@ export default function SecuritySettingsPage() {
const [verifyCode, setVerifyCode] = useState(''); const [verifyCode, setVerifyCode] = useState('');
const [setupLoading, setSetupLoading] = useState(false); const [setupLoading, setSetupLoading] = useState(false);
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
const [providers, setProviders] = useState<LinkedProvider[]>([]);
const fetchStatus = useCallback(async () => { const fetchStatus = useCallback(async () => {
try { try {
@ -81,42 +66,6 @@ export default function SecuritySettingsPage() {
fetchStatus(); fetchStatus();
}, [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 () => { const handleSetupTotp = async () => {
setSetupLoading(true); setSetupLoading(true);
setError(''); setError('');
@ -356,49 +305,6 @@ export default function SecuritySettingsPage() {
</CardContent> </CardContent>
</Card> </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> </div>
); );
} }

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

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

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

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

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

@ -29,8 +29,15 @@ import {
} from '@/components/ui/table'; } from '@/components/ui/table';
import { apiGetUserView, type UserViewResponse, type ApiUsageRecord } from '@/lib/api'; import { apiGetUserView, type UserViewResponse, type ApiUsageRecord } from '@/lib/api';
import { formatNumber, formatCurrency, formatDate } from '@/lib/mock-data'; import { formatNumber, formatCurrency, formatDate } from '@/lib/mock-data';
import { AreaChart } from '@/components/charts'; import {
import { seriesValues } from '@/lib/chart-data'; AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from 'recharts';
const planColors: Record<string, string> = { const planColors: Record<string, string> = {
free: '', free: '',
@ -265,13 +272,33 @@ export default function UserDetailPage() {
<CardTitle className="text-base">Daily Dictation Activity</CardTitle> <CardTitle className="text-base">Daily Dictation Activity</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<AreaChart <ResponsiveContainer width="100%" height={250}>
values={seriesValues(dailyUsage, 'dictations')} <AreaChart data={dailyUsage}>
width={720} <defs>
height={250} <linearGradient id="colorDict" x1="0" y1="0" x2="0" y2="1">
className="h-auto w-full" <stop offset="5%" stopColor="hsl(var(--chart-1))" stopOpacity={0.3} />
ariaLabel="Daily dictation activity" <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> </CardContent>
</Card> </Card>
)} )}

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

@ -50,13 +50,7 @@ import {
SelectValue, SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { mockUsers, formatNumber, formatCurrency, formatDate, type User } from '@/lib/mock-data'; import { mockUsers, formatNumber, formatCurrency, formatDate, type User } from '@/lib/mock-data';
import { import { apiListUsers, apiUpdateUser, apiDeleteUser, apiCreateInvitation, type ApiUser } from '@/lib/api';
apiListUsers,
apiUpdateUser,
apiDeleteUser,
apiCreateInvitation,
type ApiUser,
} from '@/lib/api';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { useToast } from '@/components/ui/toast'; import { useToast } from '@/components/ui/toast';
@ -133,15 +127,10 @@ export default function UsersPage() {
}); });
setInviteCreating(false); setInviteCreating(false);
if (data) { if (data) {
const userDashboardUrl = const userDashboardUrl = process.env.NEXT_PUBLIC_USER_DASHBOARD_URL || 'http://localhost:3002';
process.env.NEXT_PUBLIC_USER_DASHBOARD_URL || 'http://localhost:3002';
setInviteLink(`${userDashboardUrl}/login?ref=${encodeURIComponent(data.code)}`); setInviteLink(`${userDashboardUrl}/login?ref=${encodeURIComponent(data.code)}`);
} else { } else {
toast({ toast({ title: 'Failed to create invite', description: error || 'Unknown error', variant: 'error' });
title: 'Failed to create invite',
description: error || 'Unknown error',
variant: 'error',
});
} }
}; };
@ -171,10 +160,7 @@ export default function UsersPage() {
setUsers(prev => setUsers(prev =>
prev.map(u => (u.id === user.id ? { ...u, status: newStatus as User['status'] } : u)) prev.map(u => (u.id === user.id ? { ...u, status: newStatus as User['status'] } : u))
); );
toast({ toast({ title: `User ${newStatus === 'suspended' ? 'suspended' : 'activated'}`, variant: newStatus === 'suspended' ? 'warning' : 'success' });
title: `User ${newStatus === 'suspended' ? 'suspended' : 'activated'}`,
variant: newStatus === 'suspended' ? 'warning' : 'success',
});
} else { } else {
toast({ title: 'Action failed', description: error, variant: 'error' }); 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> <h1 className="text-3xl font-bold tracking-tight">Users</h1>
<p className="text-muted-foreground">Manage platform users and their subscriptions</p> <p className="text-muted-foreground">Manage platform users and their subscriptions</p>
</div> </div>
<Button <Button onClick={() => {
onClick={() => { setShowInvite(true);
setShowInvite(true); setInviteLink(null);
setInviteLink(null); setInviteDescription('');
setInviteDescription(''); setInvitePlan('pro');
setInvitePlan('pro'); setInviteCopied(false);
setInviteCopied(false); }}>
}}
>
<UserPlus className="mr-2 h-4 w-4" /> <UserPlus className="mr-2 h-4 w-4" />
Invite User Invite User
</Button> </Button>
@ -450,24 +434,9 @@ export default function UsersPage() {
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem <DropdownMenuItem
onClick={() => onClick={() => handleChangePlan(user.id, user.plan === 'free' ? 'pro' : user.plan === 'pro' ? 'enterprise' : 'free')}
handleChangePlan(
user.id,
user.plan === 'free'
? 'pro'
: user.plan === 'pro'
? 'enterprise'
: 'free'
)
}
> >
Cycle Plan ({user.plan} →{' '} Cycle Plan ({user.plan} → {user.plan === 'free' ? 'pro' : user.plan === 'pro' ? 'enterprise' : 'free'})
{user.plan === 'free'
? 'pro'
: user.plan === 'pro'
? 'enterprise'
: 'free'}
)
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuItem <DropdownMenuItem
@ -609,7 +578,12 @@ export default function UsersPage() {
<code className="flex-1 text-sm font-mono break-all select-all"> <code className="flex-1 text-sm font-mono break-all select-all">
{inviteLink} {inviteLink}
</code> </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" /> <Copy className="h-4 w-4" />
</Button> </Button>
</div> </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 */ /** 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 { try {
const { name } = await params; const { name } = await params;
const client = getSecretClient(); 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 */ /** 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 { try {
const { name } = await params; const { name } = await params;
const client = getSecretClient(); const client = getSecretClient();
@ -49,7 +55,7 @@ export async function DELETE(_req: NextRequest, { params }: { params: Promise<{
} catch (err) { } catch (err) {
return NextResponse.json( return NextResponse.json(
{ error: err instanceof Error ? err.message : String(err) }, { 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) { } catch (err) {
return NextResponse.json( return NextResponse.json(
{ error: err instanceof Error ? err.message : String(err) }, { 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) { 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(); const client = getSecretClient();
@ -86,7 +89,7 @@ export async function POST(req: NextRequest) {
} catch (err) { } catch (err) {
return NextResponse.json( return NextResponse.json(
{ error: err instanceof Error ? err.message : String(err) }, { 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(':'); return line?.split(':').slice(1).join(':');
} }
async function getPreview( async function getPreview(client: ReturnType<typeof createClient>, key: string): Promise<ValkeyPreview> {
client: ReturnType<typeof createClient>,
key: string
): Promise<ValkeyPreview> {
const [type, ttlSeconds] = await Promise.all([client.type(key), client.ttl(key)]); const [type, ttlSeconds] = await Promise.all([client.type(key), client.ttl(key)]);
if (type === 'string') { if (type === 'string') {
@ -79,10 +76,7 @@ async function getPreview(
} }
if (type === 'zset') { if (type === 'zset') {
const [size, entries] = await Promise.all([ const [size, entries] = await Promise.all([client.zCard(key), client.zRangeWithScores(key, 0, 4)]);
client.zCard(key),
client.zRangeWithScores(key, 0, 4),
]);
return { return {
key, key,
type, type,
@ -148,10 +142,7 @@ export async function GET(req: NextRequest) {
} }
} catch (error) { } catch (error) {
const message = error instanceof Error ? error.message : 'Unable to inspect Valkey'; const message = error instanceof Error ? error.message : 'Unable to inspect Valkey';
return NextResponse.json( return NextResponse.json({ error: message }, { status: message === 'Unauthorized' ? 401 : 500 });
{ error: message },
{ status: message === 'Unauthorized' ? 401 : 500 }
);
} }
} }
@ -224,9 +215,6 @@ export async function POST(req: NextRequest) {
} }
} catch (error) { } catch (error) {
const message = error instanceof Error ? error.message : 'Valkey write failed'; const message = error instanceof Error ? error.message : 'Valkey write failed';
return NextResponse.json( return NextResponse.json({ error: message }, { status: message === 'Unauthorized' ? 401 : 500 });
{ 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 reason = typeof body.reason === 'string' ? body.reason : '';
const platforms: PlatformFlags = body.platforms ?? { const platforms: PlatformFlags = body.platforms ?? {
desktop: true, desktop: true, ios: true, android: true, web: true,
ios: true,
android: true,
web: true,
}; };
const result = await listFlags(); 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 ', '') ?? ''; 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); const jwt = getJwt(req);
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); 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 { NextRequest, NextResponse } from 'next/server';
import { updateTelemetryPolicy, deleteTelemetryPolicy } from '@/lib/platform-client'; import {
updateTelemetryPolicy,
deleteTelemetryPolicy,
} from '@/lib/platform-client';
function getJwt(req: NextRequest): string { function getJwt(req: NextRequest): string {
const cookie = req.headers.get('cookie') ?? ''; const cookie = req.headers.get('cookie') ?? '';
@ -8,7 +11,10 @@ function getJwt(req: NextRequest): string {
return req.headers.get('authorization')?.replace('Bearer ', '') ?? ''; 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); const jwt = getJwt(req);
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); 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); const jwt = getJwt(req);
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); 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 { NextRequest, NextResponse } from 'next/server';
import { listTelemetryPolicies, createTelemetryPolicy } from '@/lib/platform-client'; import {
listTelemetryPolicies,
createTelemetryPolicy,
} from '@/lib/platform-client';
function getJwt(req: NextRequest): string { function getJwt(req: NextRequest): string {
const cookie = req.headers.get('cookie') ?? ''; const cookie = req.headers.get('cookie') ?? '';

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

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

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

@ -118,58 +118,6 @@
--sidebar-ring: oklch(0.556 0 0); --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 { @layer base {
* { * {
@apply border-border outline-ring/50; @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'; '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'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
interface ExtractionEntity { interface ExtractionEntity {
@ -15,11 +27,11 @@ interface EntityChartProps {
} }
const COLORS = [ const COLORS = [
'var(--chart-1)', 'hsl(var(--chart-1))',
'var(--chart-2)', 'hsl(var(--chart-2))',
'var(--chart-3)', 'hsl(var(--chart-3))',
'var(--chart-4)', 'hsl(var(--chart-4))',
'var(--chart-5)', 'hsl(var(--chart-5))',
]; ];
export function EntityBarChart({ extractions, title = 'Entities by Class' }: EntityChartProps) { 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> <CardTitle className="text-sm">{title}</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<BarChart <ResponsiveContainer width="100%" height={250}>
data={data.map(d => ({ id: d.name, value: d.count, label: d.name }))} <BarChart data={data} layout="vertical" margin={{ left: 20, right: 20 }}>
width={640} <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
height={250} <XAxis type="number" stroke="hsl(var(--muted-foreground))" fontSize={12} />
className="h-auto w-full" <YAxis
ariaLabel={title} 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> </CardContent>
</Card> </Card>
); );
@ -75,17 +102,36 @@ export function EntityPieChart({ extractions, title = 'Class Distribution' }: En
<CardHeader> <CardHeader>
<CardTitle className="text-sm">{title}</CardTitle> <CardTitle className="text-sm">{title}</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex justify-center"> <CardContent>
<Donut <ResponsiveContainer width="100%" height={250}>
slices={data.map((d, idx) => ({ <PieChart>
id: d.name, <Pie
label: d.name, data={data}
value: d.value, cx="50%"
color: COLORS[idx % COLORS.length], cy="50%"
}))} innerRadius={50}
size={220} outerRadius={90}
ariaLabel={title} 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> </CardContent>
</Card> </Card>
); );

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

@ -1,48 +1,58 @@
import * as React from 'react'; import * as React from "react"
import { cva, type VariantProps } from 'class-variance-authority'; import { cva, type VariantProps } from "class-variance-authority"
import { cn } from '@/lib/utils'; import { cn } from "@/lib/utils"
const alertVariants = cva( 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: { variants: {
variant: { variant: {
default: 'bg-background text-foreground', default: "bg-background text-foreground",
destructive: destructive:
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
}, },
}, },
defaultVariants: { defaultVariants: {
variant: 'default', variant: "default",
}, },
} }
); )
const Alert = React.forwardRef< const Alert = React.forwardRef<
HTMLDivElement, HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => ( >(({ className, variant, ...props }, ref) => (
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} /> <div
)); ref={ref}
Alert.displayName = 'Alert'; role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
Alert.displayName = "Alert"
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( const AlertTitle = React.forwardRef<
({ className, ...props }, ref) => ( HTMLParagraphElement,
<h5 React.HTMLAttributes<HTMLHeadingElement>
ref={ref} >(({ className, ...props }, ref) => (
className={cn('mb-1 font-medium leading-none tracking-tight', className)} <h5
{...props} ref={ref}
/> className={cn("mb-1 font-medium leading-none tracking-tight", className)}
) {...props}
); />
AlertTitle.displayName = 'AlertTitle'; ))
AlertTitle.displayName = "AlertTitle"
const AlertDescription = React.forwardRef< const AlertDescription = React.forwardRef<
HTMLParagraphElement, HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement> React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} /> <div
)); ref={ref}
AlertDescription.displayName = 'AlertDescription'; 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 * as React from 'react'
import { Check } from 'lucide-react'; import { Check } from 'lucide-react'
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils'
export interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { export interface CheckboxProps
checked?: boolean; extends React.ButtonHTMLAttributes<HTMLButtonElement> {
onCheckedChange?: (checked: boolean) => void; checked?: boolean
onCheckedChange?: (checked: boolean) => void
} }
const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>( const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
@ -27,7 +28,7 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
{checked && <Check className="h-4 w-4" />} {checked && <Check className="h-4 w-4" />}
</button> </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) => ( >(({ className, ...props }, ref) => (
<SliderPrimitive.Root <SliderPrimitive.Root
ref={ref} 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} {...props}
> >
<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"> <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}`); return apiFetch<ApiBroadcast>(`/admin/broadcasts/${id}`);
} }
export async function apiCreateBroadcast( export async function apiCreateBroadcast(body: Omit<ApiBroadcast, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>) {
body: Omit<ApiBroadcast, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>
) {
return apiFetch<ApiBroadcast>('/admin/broadcasts', { return apiFetch<ApiBroadcast>('/admin/broadcasts', {
method: 'POST', method: 'POST',
body: JSON.stringify(body), body: JSON.stringify(body),
@ -663,16 +661,7 @@ export interface ApiSurvey {
description?: string; description?: string;
questions: { questions: {
id: string; id: string;
type: type: 'single_choice' | 'multiple_choice' | 'rating' | 'nps' | 'text_short' | 'text_long' | 'dropdown' | 'scale' | 'ranking';
| 'single_choice'
| 'multiple_choice'
| 'rating'
| 'nps'
| 'text_short'
| 'text_long'
| 'dropdown'
| 'scale'
| 'ranking';
text: string; text: string;
description?: string; description?: string;
required: boolean; required: boolean;
@ -687,11 +676,7 @@ export interface ApiSurvey {
status: 'draft' | 'active' | 'paused' | 'closed'; status: 'draft' | 'active' | 'paused' | 'closed';
startsAt?: string; startsAt?: string;
endsAt?: string; endsAt?: string;
displayTrigger: displayTrigger: { type: 'immediate' } | { type: 'delay_seconds'; seconds: number } | { type: 'event'; eventName: string } | { type: 'page_view'; pagePattern: string };
| { type: 'immediate' }
| { type: 'delay_seconds'; seconds: number }
| { type: 'event'; eventName: string }
| { type: 'page_view'; pagePattern: string };
incentive?: { type: 'pro_days' | 'credits'; amount: number }; incentive?: { type: 'pro_days' | 'credits'; amount: number };
metrics: { metrics: {
impressions: number; impressions: number;
@ -748,9 +733,7 @@ export async function apiGetSurvey(id: string) {
return apiFetch<ApiSurvey>(`/admin/surveys/${id}`); return apiFetch<ApiSurvey>(`/admin/surveys/${id}`);
} }
export async function apiCreateSurvey( export async function apiCreateSurvey(body: Omit<ApiSurvey, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>) {
body: Omit<ApiSurvey, 'id' | 'metrics' | 'createdAt' | 'updatedAt' | 'createdBy'>
) {
return apiFetch<ApiSurvey>('/admin/surveys', { return apiFetch<ApiSurvey>('/admin/surveys', {
method: 'POST', method: 'POST',
body: JSON.stringify(body), body: JSON.stringify(body),
@ -776,17 +759,12 @@ export async function apiPauseSurvey(id: string) {
return apiFetch<{ success: boolean }>(`/admin/surveys/${id}/pause`, { method: 'POST' }); return apiFetch<{ success: boolean }>(`/admin/surveys/${id}/pause`, { method: 'POST' });
} }
export async function apiGetSurveyResponses( export async function apiGetSurveyResponses(id: string, options?: { isComplete?: boolean; limit?: number; offset?: number }) {
id: string,
options?: { isComplete?: boolean; limit?: number; offset?: number }
) {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (options?.isComplete !== undefined) params.set('isComplete', String(options.isComplete)); if (options?.isComplete !== undefined) params.set('isComplete', String(options.isComplete));
if (options?.limit) params.set('limit', String(options.limit)); if (options?.limit) params.set('limit', String(options.limit));
if (options?.offset) params.set('offset', String(options.offset)); if (options?.offset) params.set('offset', String(options.offset));
return apiFetch<{ responses: ApiSurveyResponse[]; total: number }>( return apiFetch<{ responses: ApiSurveyResponse[]; total: number }>(`/admin/surveys/${id}/responses?${params}`);
`/admin/surveys/${id}/responses?${params}`
);
} }
export async function apiGetSurveyRespondents(id: string) { 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 ─────────────────────────────────────────────────────── // ── Usage ───────────────────────────────────────────────────────
export async function listUsage( export async function listUsage(options: { userId?: string; days?: number; limit?: number; productId?: string } = {}) {
options: { userId?: string; days?: number; limit?: number; productId?: string } = {}
) {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (options.userId) params.set('userId', options.userId); if (options.userId) params.set('userId', options.userId);
if (options.days) params.set('days', String(options.days)); 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.limit) params.set('limit', options.limit.toString());
if (options.offset) params.set('offset', options.offset.toString()); if (options.offset) params.set('offset', options.offset.toString());
const result = await client.safeFetch<QuerySessionsResult>( const result = await client.safeFetch<QuerySessionsResult>(`/api/diagnostics/sessions?${params.toString()}`);
`/api/diagnostics/sessions?${params.toString()}`
);
if (result.error) throw new Error(result.error); if (result.error) throw new Error(result.error);
return result.data!; return result.data!;
}, },
@ -204,14 +202,11 @@ export function createDiagnosticsClient(config: DiagnosticsClientConfig) {
}, },
async updateSession(sessionId: string, request: UpdateSessionRequest): Promise<DebugSession> { async updateSession(sessionId: string, request: UpdateSessionRequest): Promise<DebugSession> {
const result = await client.safeFetch<DebugSession>( const result = await client.safeFetch<DebugSession>(`/api/diagnostics/sessions/${sessionId}`, {
`/api/diagnostics/sessions/${sessionId}`, method: 'PATCH',
{ headers: { 'Content-Type': 'application/json' },
method: 'PATCH', body: JSON.stringify(request),
headers: { 'Content-Type': 'application/json' }, });
body: JSON.stringify(request),
}
);
if (result.error) throw new Error(result.error); if (result.error) throw new Error(result.error);
return result.data!; return result.data!;
}, },
@ -272,10 +267,7 @@ export function createDiagnosticsClient(config: DiagnosticsClientConfig) {
// Screenshots // Screenshots
// ------------------------------------------------------------------------- // -------------------------------------------------------------------------
async getScreenshots( async getScreenshots(sessionId: string, productId: string): Promise<
sessionId: string,
productId: string
): Promise<
Array<{ Array<{
id: string; id: string;
blobUrl: 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'); throw new Error('Service is not restartable from admin ops');
} }
const response = await dockerRequest( const response = await dockerRequest('POST', `/containers/${encodeURIComponent(container)}/restart?t=10`);
'POST',
`/containers/${encodeURIComponent(container)}/restart?t=10`
);
if (![204, 304].includes(response.statusCode)) { if (![204, 304].includes(response.statusCode)) {
throw new Error(response.body || `Docker restart failed with status ${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( export async function extractText(
text: string, text: string,
taskId?: string, taskId?: string,
modelId?: string modelId?: string,
): Promise<ExtractResponse | null> { ): Promise<ExtractResponse | null> {
try { try {
return await extractionApi.fetch<ExtractResponse>('/extract', { return await extractionApi.fetch<ExtractResponse>('/extract', {
@ -66,7 +66,7 @@ export async function extractTranscript(text: string): Promise<ExtractResponse |
export async function extractBatch( export async function extractBatch(
inputs: Array<{ text: string; taskId?: string }>, inputs: Array<{ text: string; taskId?: string }>,
modelId?: string modelId?: string,
): Promise<ExtractResponse[] | null> { ): Promise<ExtractResponse[] | null> {
try { try {
const result = await extractionApi.fetch<{ results: ExtractResponse[] }>('/extract/batch', { 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> { export async function getSidecarHealth(): Promise<{ status: string; sidecar?: unknown } | null> {
try { try {
return await extractionApi.fetch<{ status: string; sidecar?: unknown }>( return await extractionApi.fetch<{ status: string; sidecar?: unknown }>('/extract/sidecar-health');
'/extract/sidecar-health'
);
} catch { } catch {
return null; 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[]> { export async function getHealthTrends(productId: string, days = 30): Promise<ProductHealth[]> {
return predictiveApi.fetch<ProductHealth[]>( return predictiveApi.fetch<ProductHealth[]>(`/predictive/health/${productId}/trends?days=${days}`);
`/predictive/health/${productId}/trends?days=${days}`
);
} }
// ── Churn Prediction ───────────────────────────────────────── // ── Churn Prediction ─────────────────────────────────────────
@ -91,11 +89,7 @@ export interface ChurnPrediction {
}; };
} }
export async function getChurnScore( export async function getChurnScore(userId: string, productId: string, horizon = 30): Promise<ChurnPrediction> {
userId: string,
productId: string,
horizon = 30
): Promise<ChurnPrediction> {
return predictiveApi.fetch<ChurnPrediction>('/predictive/churn-score', { return predictiveApi.fetch<ChurnPrediction>('/predictive/churn-score', {
method: 'POST', method: 'POST',
body: JSON.stringify({ userId, productId, horizon: String(horizon) }), body: JSON.stringify({ userId, productId, horizon: String(horizon) }),
@ -112,22 +106,18 @@ export interface AtRiskUser {
predictionTimestamp: string; predictionTimestamp: string;
} }
export async function getAtRiskUsers( export async function getAtRiskUsers(options: {
options: { productId?: string;
productId?: string; segment?: RiskSegment;
segment?: RiskSegment; limit?: number;
limit?: number; offset?: number;
offset?: number; } = {}): Promise<{ users: AtRiskUser[]; total: number }> {
} = {}
): Promise<{ users: AtRiskUser[]; total: number }> {
const params = new URLSearchParams(); const params = new URLSearchParams();
if (options.productId) params.set('productId', options.productId); if (options.productId) params.set('productId', options.productId);
if (options.segment) params.set('segment', options.segment); if (options.segment) params.set('segment', options.segment);
if (options.limit) params.set('limit', String(options.limit)); if (options.limit) params.set('limit', String(options.limit));
if (options.offset) params.set('offset', String(options.offset)); if (options.offset) params.set('offset', String(options.offset));
return predictiveApi.fetch<{ users: AtRiskUser[]; total: number }>( return predictiveApi.fetch<{ users: AtRiskUser[]; total: number }>(`/predictive/at-risk-users?${params}`);
`/predictive/at-risk-users?${params}`
);
} }
export interface UserRiskProfile extends ChurnPrediction { export interface UserRiskProfile extends ChurnPrediction {
@ -159,12 +149,8 @@ export async function getModelPerformance(): Promise<ModelPerformance> {
return predictiveApi.fetch<ModelPerformance>('/predictive/model/performance'); return predictiveApi.fetch<ModelPerformance>('/predictive/model/performance');
} }
export async function getFeatureImportance(): Promise< export async function getFeatureImportance(): Promise<Array<{ feature: string; importance: number }>> {
Array<{ feature: string; importance: number }> const res = await predictiveApi.fetch<{ features: Array<{ feature: string; importance: number }> }>('/predictive/model/features');
> {
const res = await predictiveApi.fetch<{
features: Array<{ feature: string; importance: number }>;
}>('/predictive/model/features');
return res.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`); return predictiveApi.fetch<Campaign['stats']>(`/predictive/campaigns/${id}/stats`);
} }
export async function triggerCampaign( export async function triggerCampaign(id: string, testUserId?: string): Promise<{ triggered: number }> {
id: string,
testUserId?: string
): Promise<{ triggered: number }> {
return predictiveApi.fetch<{ triggered: number }>(`/predictive/campaigns/${id}/trigger`, { return predictiveApi.fetch<{ triggered: number }>(`/predictive/campaigns/${id}/trigger`, {
method: 'POST', method: 'POST',
body: JSON.stringify(testUserId ? { testUserId } : {}), body: JSON.stringify(testUserId ? { testUserId } : {}),

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

@ -1,10 +1,9 @@
'use client'; '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'; import { KNOWN_PRODUCTS, PRODUCT_ID } from '@/lib/product-constants';
const STORAGE_KEY = 'admin_selected_product'; const STORAGE_KEY = 'admin_selected_product';
const PRODUCT_CHANGED_EVENT = 'admin:product-changed';
interface ProductContextValue { interface ProductContextValue {
productId: string; productId: string;
@ -23,24 +22,10 @@ function getInitialProduct(): string {
export function ProductProvider({ children }: { children: ReactNode }) { export function ProductProvider({ children }: { children: ReactNode }) {
const [productId, setProductIdState] = useState<string>(getInitialProduct); 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) => { const setProductId = useCallback((id: string) => {
setProductIdState(id); setProductIdState(id);
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
localStorage.setItem(STORAGE_KEY, id); 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: { test: {
environment: 'node', environment: 'node',
globals: true, globals: true,
exclude: ['e2e/**', 'node_modules/**', '.next/**'], exclude: ['e2e/**', 'node_modules/**'],
// 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)/],
},
},
coverage: { coverage: {
provider: 'v8', provider: 'v8',
reporter: ['text', 'json', 'html'], reporter: ['text', 'json', 'html'],
@ -42,7 +32,5 @@ export default defineConfig({
alias: { alias: {
'@': path.resolve(__dirname, './src'), '@': 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/.env.example
View File

@ -7,12 +7,6 @@
PRODUCT_ID=lysnrai PRODUCT_ID=lysnrai
NEXT_PUBLIC_PRODUCT_ID=lysnrai NEXT_PUBLIC_PRODUCT_ID=lysnrai
# Optional: override the selectable product/project list shown in the sidebar
# switcher. JSON array of { id, name, icon? }. Leave unset to use the built-in
# default. With one entry the switcher auto-hides (single-tenant deployments).
# Example: NEXT_PUBLIC_PRODUCTS=[{"id":"acme","name":"Acme App"}]
NEXT_PUBLIC_PRODUCTS=
# ── Microservice URLs (consolidated platform-service) ── # ── Microservice URLs (consolidated platform-service) ──
PLATFORM_SERVICE_URL=http://localhost:4003 PLATFORM_SERVICE_URL=http://localhost:4003
PLATFORM_API_URL=http://localhost:4003 PLATFORM_API_URL=http://localhost:4003

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

@ -11,12 +11,6 @@
# testing # testing
/coverage /coverage
# playwright e2e artifacts
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
# next.js # next.js
/.next/ /.next/
/out/ /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 ## Environment Variables
See `.env.local.example` for required variables: See `.env.local.example` for required variables:
- `PLATFORM_API_URL` — Platform service URL (default `http://localhost:4003`) - `PLATFORM_API_URL` — Platform service URL (default `http://localhost:4003`)
- `JWT_SECRET` — Shared JWT secret - `JWT_SECRET` — Shared JWT secret
- `PRODUCT_ID` — Product scope (e.g., `lysnrai`, `chronomind`, `nomgap`) - `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.

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