Sharang Parnerkar f3c95123fa feat(portal): M10.2 design system foundations — tokens, shell, Dashboard
Brings in the handoff design system from `Breakpilot Platform.zip`
(`breakpilot/design_handoff_customer_portal/`) as the base for restyling
every customer-area surface.

What's in:

* **Design tokens & layout primitives** — `src/app/globals.css` is the
  handoff `styles.css` in full (OKLCH paper + ink + brand-violet,
  --rule-* hairlines, --sev-* severity ramp, corner-tick bracket
  treatment, ledger table, 32–36px row density, dark mode via
  `[data-theme="dark"]`). Tailwind v4 layered on top via PostCSS for
  utility helpers; the design system itself stays in plain CSS.
* **Geist + Geist Mono** wired through `next/font/google` so the
  monospaced metadata/figures everywhere render at the intended weight.
* **Shell chrome** under `src/components/portal/`:
  `Brand` (Breakpilot. wordmark with the violet trailing dot),
  `Lifeline` (top full-width tenant rail — active / trial / frozen /
  demo variants; archived swaps in `ArchivedLockout`),
  `NavRail` (232px left rail with tenant switcher + workspace/admin/
  settings groups + user chip; locked routes show a lock icon and a
  "Requires X" tooltip rather than vanishing),
  `Topbar` (breadcrumb + ⌘K button placeholder + theme toggle),
  `ThemeToggle` (Sun/Moon, persists to `localStorage["bp.theme"]`,
  no-flash via a head script in the root layout).
* **Dashboard** at `/[slug]/dashboard` rebuilt per handoff §1:
  page-head with Export + Run scan (the latter wrapped in the frozen
  write-guard hovercard surfacing `HTTP 402 · payment required`),
  5-cell bracketed KPI rail (open findings + 14-day sparkbars + 7-day
  delta, critical with severity stack, controls passing with violet
  ring gauge + n/240, evidence area sparkline, last-scan cadence),
  12-col grid: 30-day findings flow + severity stack legend +
  top-5 open findings table on the left, product posture rows +
  scan-activity heatmap (5x7) + recent-activity feed on the right.
  Plain USER role drops the KPI rail and the org-wide panels per spec.
* **Charts** — minimal SVG primitives in `components/portal/charts/`:
  Sparkbars, Sparkline (area + line), Ring, StackBar, Heatmap +
  HeatLegend. All token-driven (`var(--sev-*)`, `var(--accent)`).
* **Fixtures** — `src/lib/fixtures.ts` is a TS port of the handoff's
  `data.js`. Deterministic mulberry32 generators give the same
  realistic DACH/EU compliance data every reload (~5 tenants × 30+ days
  activity / 4–13 findings per product / 9 months invoices / hash-
  chained audit). Source of truth for the design until tenant-registry
  is enriched to carry these fields end-to-end. RBAC table (`canAccess`,
  `landingFor`) ported alongside.
* **Dev session bypass** — `src/lib/get-session.ts` returns a synthetic
  `SessionWithExtras` from one of the 6 fixtures when
  `BP_DEV_FIXTURE=<id>` is set. Lets the portal render the design
  without Keycloak + tenant-registry up. Real Auth.js wiring untouched.

What's NOT in yet (next commits):

* Products / Product launch / Org / Team / Billing / Audit / SSO pages
* Workflows editor (palette + canvas + inspector + drag-wiring)
* Command palette + toast system
* MSW handlers for the tenant data shapes (today the page reads the
  fixture module directly server-side; MSW is for client-side calls)

Run locally:
  pnpm install
  BP_DEV_FIXTURE=admin-acme pnpm dev
  open http://acme.localhost:3000/acme/dashboard

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-04 13:29:29 +02:00

portal

Next.js 16 customer area + backstage.

Part of the Breakpilot Platform. For the big picture see platform/docs: Architecture · Infrastructure · Product Integration Spec · Implementation Plan

What this is

Next.js 16 customer area + backstage. Scaffolded under milestone M5.1. See platform/docs for the full architecture context.

Plane: Control Owner: @sharang Status: pre-alpha Linked milestone: M5.1

Run locally

# Prerequisites: Node 20+, pnpm 9+, the dev stack running.

# 1. Bring up Keycloak + Postgres + Redis (separate clone):
cd /path/to/platform/orca-platform && make dev-up

# 2. Run tenant-registry (separate clone):
cd /path/to/platform/tenant-registry && make dev

# 3. Run this app:
make install      # pnpm install --frozen-lockfile
make dev          # next dev on http://localhost:3000

# Or hit a real tenant immediately:
# open http://acme.localhost:3000  →  redirects to Keycloak  →  back to /acme/dashboard

Seed login (from the dev-stack realm): test@breakpilot.dev / test.

AUTH_URL gotcha: Auth.js v5 builds the OAuth redirect_uri from AUTH_URL — not from the request Host header, even with AUTH_TRUST_HOST=true. For multi-tenant dev work, pin AUTH_URL to the subdomain you log in on (e.g., http://acme.localhost:3000); otherwise Keycloak rejects the token exchange with invalid_grant: Incorrect redirect_uri. In prod, orca-proxy passes the right host via X-Forwarded-Host and AUTH_URL is set to the apex (https://breakpilot.com).

make test / make lint / make typecheck / make build run vitest / eslint / tsc / next build respectively.

Env vars live in .env.example. Copy to .env.local for local overrides (gitignored).

Surface

Route Renders
http://localhost:3000/ Apex landing — pointer to tenant subdomains
http://<slug>.localhost:3000/ Middleware rewrites to /[slug]/ → redirects to /[slug]/dashboard
http://<slug>.localhost:3000/dashboard OIDC-gated dashboard; signed-out users see "Sign in with Keycloak"
http://backstage.localhost:3000/ (Skeleton) backstage route — rewritten to /__backstage__/*
/api/auth/[...nextauth] Auth.js v5 endpoints (callback, signin, signout, jwt)

Architecture notes

  • Host → slug routing: src/middleware.ts parses Host header via parseHost() (in src/lib/host.ts) and rewrites the request path to /<slug>/.... URL bar stays unchanged. Apex hosts and unknown subdomains fall through unmodified.
  • Tenant context: src/app/[slug]/layout.tsx fetches the tenant from tenant-registry (src/lib/tenant-registry.ts). 404 → notFound(); HTTP errors bubble up.
  • Auth: src/auth.ts is the Auth.js v5 config — Keycloak provider, tenant-context claims (tenant_id, tenant_slug, org_roles, products, plan, tenant_status) propagated via JWT/session callbacks. Real RBAC enforcement lands in M5.2 / M10.1.

Deployment

Env URL How
dev http://localhost:3000 make dev
stage https://portal.stage.breakpilot.com auto on merge to main
prod https://portal.breakpilot.com manual: tag vX.Y.Z + sign-off

Rollback: orca rollout undo portal --env={{env}}.

Observability

  • Traces, logs, metrics: SigNoz — service name portal
  • Audit events: Tenant Registry /audit (Retraced-shape schema)
  • On-call: oncall@breakpilot.com · runbook at platform/docs/runbooks/portal.md

Contributing

See CONTRIBUTING.md. TL;DR: branch from main, open a PR, 1 review + green CI, squash-merge.

End-to-end tests (M5.3)

Playwright config at playwright.config.ts. Tests under tests/e2e/.

make e2e-install     # one-time: pnpm exec playwright install chromium
# bring up the dev stack + tenant-registry + portal in three separate terminals,
# then:
make e2e             # pnpm playwright test

Test groups (filter with --grep):

File What it asserts
tests/e2e/apex.spec.ts Apex landing page renders
tests/e2e/tenant.spec.ts Tenant subdomain serves signed-out dashboard + 404 on unknown slug
tests/e2e/health.spec.ts The whole dev stack is reachable: portal API, tenant-registry, Keycloak

@needs-stack in a test title means the dev stack must be running. We don't yet have a full OIDC click-through test — Keycloak in headless mode is flaky, so we assert the gate (Sign-in button visible) rather than completing the login.

In CI, the e2e job is gated behind the repo variable RUN_E2E == 'true' so it stays off until stage exists. Lint / typecheck / build / vitest still run on every PR.

License

Proprietary — all rights reserved. Copyright (c) 2026 Sharang Parnerkar and Benjamin Boenisch. See LICENSE.

S
Description
Next.js 15 customer area + backstage.
Readme 510 KiB
Languages
TypeScript 79.9%
CSS 15.3%
JavaScript 4.1%
Makefile 0.4%
Dockerfile 0.3%