Command center page at home

## Epic 11717 — Executive AI command center Original requirement (verbatim): > Implement Something like this. Share code with Operator Dashboard. > 10. Executive AI command center — Major differentiator > Create one dashboard where a founder or CTO can see: All active projects. All AI employees. Development progress. Project health. Bugs and risks. Development expenses. Deployment status. Productivity and quality metrics. > The owner should be able to ask: "What's happening with my company today?" and receive an accurate answer. Settled inputs: PRD (task 11718, R1–R11, R14) and Architecture (task 11719, §2.3 is this child's spec; AD-4). Builds on the merged API core, deployments endpoint and Tasks-board params children. ## This child (Architecture C3) - **Shared hook:** `useDashboard.ts` `useSection` gains a `root` arg (default `'/api/operator/dashboard'`, operator call sites untouched); query key prefix derived from root; the command center uses `'/api/exec/dashboard'` and key `exec-dashboard`, kept out of the persisted cache (`queryClient.ts`). Widen `Endpoint`/`SectionName` with the exec sections. Reuse `useDashboardView`/`FilterBar` (org dimension hidden; range + project kept). Reuse `KpiTile`, `ChartCard`, `FilterBar`, `MissingValue`, `SectionShell`, `model.ts` — no copies. `KpiTile` renders a trend from `previous` when present. - **Page** `apps/web/src/pages/command-center/CommandCenter.tsx`: overview strip (five `KpiTile`s + worst-health chip linking to the project) above `useUrlTab` tabs **Projects**, **AI employees**, **Progress**, **Risks**, **Spend**, **Deployments**, **Quality**. One panel component per tab, each with loading (skeleton), error, empty and missing states. Default range `24h`; "as of" stamp from envelope `as_of`, refresh every 5 min (`REFRESH_MS`). Every count links via the API's `board_link` URL, never a `period` preset. Health chip shows factors in words on hover/tap. Header has a slot for the Ask-Jarvis entry (the Jarvis child builds the button). - **Widget registry** `command-center/widgets.ts`: `WIDGETS: Record<WidgetKey, {title, render(view)}>` for all 11 keys; TS test that the keys equal the shared JSON fixture written by the API core child (`exec_dashboard.WIDGET_KEYS`). TS test that the API's `board_link` sample fixture round-trips through `readTaskUrlFilters` into the same API params. - **Placement:** `App.tsx` `HomeRoute`: `is_operator && CLOUD && OperatorDashboard ? <OperatorDashboard/> : isOrgAdminSeat(admin) && CommandCenter ? <CommandCenter/> : <HomeLanding/>` (operator branch first). Lazy-load via `editionModule(isEnabled('exec_dashboard'), …)`. Explicit route `/command-center`. Sidebar "Home" row to `/`, `tenantOnly` + `orgAdminOnly`. Append `apps/web/src/pages/command-center/**` to the `exec_dashboard` feature in `packages/editions/features.toml` and regenerate. - **Quality:** name cells use the existing ellipsis-with-tooltip cell at ≥24 chars; tables collapse to cards on phone per `docs/standards/ui-style-guide.md`; copy per `docs/standards/ui-copy-standards.md`. - **Docs:** reader doc page under `apps/docs/` for tenant Owners (route coverage). - **Tests:** vitest per panel state; e2e `apps/web/e2e/command-center.spec.ts` — Owner flow (all eight titles + overview strip), trial-plan Owner sees it, Member lands `/tasks`, operator `/` unchanged, screenshots at 1280px and 375px; `operator-dashboard.spec.ts` stays green. Requirements this child owns (verbatim; UI halves where the API child owns the data): - **AC1.1** On dev.jaah.ai, sign in as an Owner and open `/`. The Executive command center renders. Verify: the page heading names the command center, the URL stays `/`, and no redirect to `/tasks` happens. - **AC1.2** One page shows all eight areas (R4–R11): active projects, AI employees, progress, health, bugs and risks, expenses, deployment status, productivity and quality. They may be grouped into tabs or sections, but none is missing and each has a visible title. Verify: open `/` and find each of the eight titles. The first screen must also show an overview strip: active projects count, tasks in flight, failed/stuck count, spend in window, and the worst project health. - **AC1.3 States.** (a) An org with zero projects shows an empty state with one action toward creating or onboarding a project. It never shows a grid of zeros or a blank panel. (b) A metric with no data renders the shared "missing" mark (`MissingValue`) with a hover reason, never `0` or `$0.00`. Verify both on dev with a fresh org and with an org that has projects but no runs. - **AC1.4 Quality.** At 1280px and at 375px: project and persona names are never truncated to a few characters (truncation keeps at least 24 characters with a full-name tooltip); there is no horizontal page scroll; tiles are not cramped. The page follows `docs/standards/ui-style-guide.md` and `docs/standards/ui-copy-standards.md`. Verify: Playwright screenshots at both widths, reviewed against the style guide. - **AC1.5 Freshness.** The page shows an "as of" stamp and refreshes on the same cadence as the Operator dashboard (5 min). Verify: the stamp updates after the refresh interval. - **AC2.1** The command center draws its tiles, charts, filter/range bar and section shells with the same components the Operator dashboard uses (`apps/web/src/pages/dashboard/`: `KpiTile`, `ChartCard`, `SectionShell`, `FilterBar`, `MissingValue`, `model.ts`), not copies. Verify: `grep` shows no duplicated component bodies, and `tools/check_context.py` plus the repo's duplicate-block measure pass (no new same-language copy beyond the policy's two-copy ceiling). - **AC2.3** The Operator dashboard is unchanged for the operator. Verify: on dev as the operator, `/` still shows the Operator dashboard with all its existing tabs, and `apps/web/e2e/operator-dashboard.spec.ts` passes. - **AC3.1** It is ON by default on dev for every cloud tenant on every plan (trial included), with no flag, plan or setting to turn on. Verify: on dev, a trial org's Owner opens `/` and sees it. - **AC3.2** A Member seat opening `/` lands on `/tasks` as today. Calling the command center API directly as a Member returns 403. Verify: as a Member on dev, open `/`, then call the endpoint from devtools and observe 403. - **AC4.1** It lists every project of the org: active ones first (A-1), inactive below and marked. Each row shows name, health RAG (R7), open tasks, tasks done in window, spend in window, and last merge time. Clicking a row opens that project's console page. Verify: on dev, compare the list against the org's Projects page. The counts match and every project appears exactly once. - **AC4.2** States: a project with no repo or no tasks shows "—" with a reason, never an error. Verify on dev. - **AC5.1** One row per persona that has at least one task in the org in the window, plus every persona with an in-flight task. Labels come from the persona registry's display labels (e.g. "Analyze", "Coder"), never raw slugs such as `business_analysis`. Columns: in flight now, done in window, success rate, spend in window. Verify: on dev, for one persona, count that persona's tasks on the Tasks board filtered to the same window. The numbers match. - **AC5.2** A persona with zero activity in the window is not listed, and an empty list shows an empty state. Verify on an org with one persona used. - **AC5.3** Clicking a persona row opens the Tasks board filtered to that persona. Verify on dev. - **AC6.1** It shows tasks by state now, across the seven lifecycle states with their console labels, plus tasks created vs done per bucket in the window, and open epics with their pipeline stage (Analyze → Design → Plan → Coder → Merged). Verify: the state counts equal the Tasks board's counts for the org (`/api/tasks/counts`). - **AC6.2** Each count links to the Tasks board filtered to that slice. Verify by clicking two of them. - **AC7.1** Each project carries green, amber or red, equal to its worst factor (A-3). Hovering or tapping shows each factor's value and colour in words ("2 failed tasks — red"). Verify: on dev, make a project with a `system_failed` task above the red threshold and observe red, with that factor named. A project with no factor over threshold shows green. - **AC7.2** A project whose factors are all missing (no tasks, no repo) shows "no data", not green. Verify on dev. - **AC8.1** It lists the org's failed and stuck work: tasks in `system_failed`, tasks waiting on a human (`awaiting_response`) or `paused` beyond a threshold, merge-lane failures, and broken sessions. Each row shows project, task title (untruncated to 24+ characters), reason and age, and links to the task. Verify: on dev, every `system_failed` task of the org in the window appears, and a `done` task does not. - **AC8.2** It shows org-scoped anomaly flags (cost spike, success-rate drop against the trailing baseline), from the operator dashboard's detector applied to the org's own series. Each flag names the metric, the observed value and the baseline. Verify: the anomaly unit tests on fixtures pass for org-scoped input, and on dev the section renders either the flags or a "no anomalies" state. - **AC9.1** It shows total AI spend in dollars for the window, a per-bucket trend, and a breakdown by project, persona and model. Verify: on dev, the total equals the sum of the org's per-task run-metric dollars for tasks in the window (`/api/tasks/{id}/run-metrics` on a sample), within rounding of $0.01. - **AC9.2** Unpriced usage (a model with no `model_prices` row) is shown as "unpriced" with the token count, never counted as $0. Verify with a fixture test. - **AC10.2** States: a project with no repo, no forge credential, a forge error or rate limiting shows "unknown" with the reason in words. The page never errors or blanks. A project with no merge lane shows only CI. Verify on dev with a project that has no repo. - **AC11.1** KPI tiles for the window: tasks done, success rate, zero-touch rate, median cycle time, cost per merged task, and AI quality review score (missing mark when the org has none). Each has a trend against the previous window. Verify: on dev, compare tasks done and success rate with the Tasks board for the same window. - **AC11.2** Each tile's hover explains what it counts in one line (ui-copy standards). Verify by hovering on dev. - **AC14.1** `./dc check full` is green on the merge lane. New API endpoints have tests for org scoping, role refusal (Member 403, operator unchanged) and each empty state. The web side has unit tests for each section's states and one e2e for the Owner flow. Verify: the merge lane's gate output. — web half. Credentials & reach: - Every dev.jaah.ai browser oracle (AC1.1–13.4 "Verify on dev") — dev.jaah.ai from h5-3-gmind: DNS resolves 10.60.x, HTTPS and browser time out — **deferred**: operator answer AD-5. Local `./dc` e2e + API tests are the oracles. The dev re-check is done by a node with dev reach in the Finish stage. - Owner / Member / org-B seats for dev oracles — `org/console/dev-login`, `org/console/dev-tpl-member-login`, `org/console/dev-tpl-viewer-login`, `org/console/dev-orgb-login`, `me/jaah/debug/main/operator-login` — **verified** (credential_get OK). Use on dev **deferred** (AD-5, AD-6). - Local gates (`./dc check quick/full`, pytest, vitest, Playwright local e2e) — worktree only — **verified**. Out of scope: Do NOT build Jarvis tools, the Ask-Jarvis button behaviour or the temp view (Jarvis child) — leave only the header slot. MUST NOT change the Operator dashboard's behaviour, tabs, routes or data for the operator (`apps/web/src/pages/dashboard/OperatorDashboard.tsx`, `/api/operator/dashboard/*`); moving shared code is allowed, behaviour identical. MUST NOT expose the page to Members or the community edition. MUST NOT change Members' `/` landing (`/tasks`). MUST NOT add a saved/pinned custom-dashboard feature (OD-5). MUST NOT add a plan gate or enablement flag (OD-10). Do NOT copy dashboard components. Done means (dev browser oracles deferred — AD-5; local `./dc` e2e + vitest are the oracle. Tightened: a page that passes literally but has cramped tiles, names cut below 24 chars without tooltip, horizontal scroll at 375px, a bare 0/$0.00 where data is missing, raw persona slugs, or a chart with no title FAILS — the 1280px and 375px screenshots are reviewed against `docs/standards/ui-style-guide.md` and attached to the PR): - AC1.1 — e2e: Owner at `/` sees the command center heading; URL stays `/`. - AC1.2 — e2e finds all eight titles and the five overview tiles + worst-health chip. - AC1.3 — vitest: zero-project empty state with one create/onboard action; missing metrics render `MissingValue` with reason. - AC1.4 — e2e screenshots at 1280/375 with no horizontal page scroll (asserted `scrollWidth <= clientWidth`), name cells ≥24 chars + tooltip, tables as cards on phone. - AC1.5 — vitest with fake timers: "as of" stamp updates after `REFRESH_MS`. - AC2.1 — grep shows the page imports the shared dashboard components; `tools/check_context.py` passes; no new duplicated block. - AC2.3 — `apps/web/e2e/operator-dashboard.spec.ts` passes unchanged; e2e asserts operator `/` is the Operator dashboard. - AC3.1/3.2 — e2e: trial-plan Owner sees it; Member at `/` lands on `/tasks`. - AC4.1/4.2, AC5.1–5.3, AC6.1/6.2, AC7.1/7.2, AC8.1/8.2, AC9.1/9.2, AC10.2, AC11.1/11.2 — vitest per panel (loading/error/empty/missing/data) plus e2e clicking a persona row and two progress counts lands on the board with matching filters and counts; health hover names factors in words; KPI tile hover is one line; Deployments shows "unknown" with reason for a project with no repo. - WIDGET_KEYS — TS test equal to the shared fixture; `board_link` sample fixture round-trips. - AC14.1 (web) — `./dc check quick` green; merge lane `./dc check full` green.