Sharang Parnerkar 91a655b6df
ci / image (pull_request) Has been skipped
ci / test (pull_request) Failing after 5m25s
ci / shared (pull_request) Successful in 27s
ci / e2e (pull_request) Has been skipped
feat(portal): M10.2 — restyle Products + Org + Team + Billing + Audit + SSO
Six existing customer-area shells under [slug]/* rebuilt against the
handoff design (sections §2/§4/§5/§6/§7/§8). Every screen reuses the
new Panel / Monogram / Sev primitives and the ledger-table token system
so the visual contract stays single-source-of-truth in globals.css.

* `[slug]/settings` (Organization, IT_ADMIN) — legal entity dl, primary
  contact card, plan & seats meter, products subscribed kv-list
  (ENTITLED green dot / TRIALING amber dot).
* `[slug]/settings/users` (Team, IT_ADMIN) — bracketed member ledger
  with role chips, last-active mono dim, active/invited dot status.
  Invite affordance present, modal wiring deferred.
* `[slug]/billing` (Billing, CXO + FINANCE + IT_ADMIN) — current plan
  card with monthly net + 19% VAT, seats + evidence-storage meters,
  payment method block that swaps to "Payment failed → Re-activate"
  when tenant.status is frozen, full invoices ledger with paid/due dot.
* `[slug]/audit` (Audit log, LEGAL + IT_ADMIN) — filter bar (search +
  event-type chip toggles + product select), ledger table with denied
  red dot, footer count + retention note.
* `[slug]/settings/integrations` (SSO, IT_ADMIN) — read-only OIDC
  summary pulling from KEYCLOAK_ISSUER / KEYCLOAK_CLIENT_ID, IdP-group→
  role mapping table.
* `[slug]/products` (Products index, USER+) — 2x2 product grid with
  live cards (entitled + trialing chips) and "Coming soon" dashed
  placeholders, plus a cross-product findings table with filter chips.

Plus a new `NotAllowed` 403 surface in the same ledger language that
replaces the inline "NotAuthorized" message used by the old shells, so
forbidden routes still look like the rest of the portal.

Every page goes through `getPortalSession()` so `BP_DEV_FIXTURE` still
swaps between admin / user / trial / frozen / archived without
Keycloak. Every screen returns 200 against
`BP_DEV_FIXTURE=admin-acme pnpm dev`.

Still to come on this branch:
* Workflows editor (palette + canvas + inspector + drag-wiring)
* ⌘K command palette + toasts
* Product launch detail (per-product page)
* Login redesign (mock SSO picker + violet gradient panel)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-04 13:35:25 +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%