[diegosouzapw]

Lote 10 (Task 40, KEA-7886): pages outside the dashboard on the CI UI Kit

⚠️ base-red inherited: #17219

Base: feat/new-uikit. Branch feat/new-uikit-lote10, head 1e3a300e. The latest integration tip (886f8127, incl. lote 3 #17411) is merged in as 28bf0b47, with no rebase and no stash.

Screens × spec × tests × screenshots

Screen / group	Spec	What changed	Tests realigned	Screenshots (_artifacts/)
misc (TokenHealthBadge, DegradationBadge, CapabilityBadge)	shared/misc.md	kit Badge. Token health uses a kit Button trigger plus a Popover (hover, click, Escape). Degradation uses a warning-tone badge rendered as the link. Capability uses a dense kit pill. Status hex/--orch styles become text-success/warning/error. PwaRegister, LocaleAutoDetect and BasePathNetworkProvider have no UI and are unchanged.	design-kit-bridge (badge guard now asserts the semantic status utilities; the no-hex check is kept). New RTL file tests/unit/ui/misc-badges.test.tsx (7 tests, axe on the open popover).	via /status and the header
/ (error.tsx, global-error.tsx)	root.md	lockup, <Icon>, ci-heading, kit buttons, bg-error-bg/text-error. global-error imports globals.css and applies the stored theme itself, because it replaces the root layout. It uses the kit Button/buttonVariants directly so iconMap stays out of the every-page chunk.	brand-pages-static: list extended with error, global-error, forbidden, forgot-password (exactly one lockup each)	— (no route renders them)
/400…/503	400…503.md	already on ErrorPageScaffold. 0 Material spans left, nothing to change.	—	lote10-{400,503,404}-*
/forbidden	forbidden.md	the gradient/text-white look is replaced by lockup + ci-dashboard-display + buttonVariants	(brand list)	lote10-forbidden-*
/login	login.md	Input label/hint/error props (no loose <label>/<p>). Sign-in form inside Card. Node warning uses kit Alert critical. Spinner. Onboarding cards use Card. Tokens replace the red/amber/gradient palette.	none needed (login-11143, auth-redirect-login, classify-pr-changes green)	lote10-login-*
/forgot-password	forgot-password.md	lockup, ci-heading, token code blocks. Direct Card import instead of the barrel, which also shrinks routeNamespaces.root (regenerated).	(brand list)	lote10-forgot-password-*
/callback, /auth/callback	callback.md, auth-callback.md	Card, sized <Icon>, success/warning tokens	none (oauth-callback-* green)	lote10-{callback,auth-callback}-*
/connect/codex/[token]	connect-codex-token.md	Card, tokens	—	lote10-connect-codex-token-*
/status	status.md	StatusMatrix for the provider breakers, Badge live for a healthy service, Card stat tiles, Alert critical for errors, Button refresh	— (e2e error-pages /status)	lote10-status-*
/maintenance, /offline	maintenance.md, offline.md	Card, buttonVariants, offline status pill uses the Badge tone. Maintenance becomes a client component because buttonVariants lives in a "use client" module.	—	lote10-{maintenance,offline}-*
/terms, /privacy	terms.md, privacy.md	ci-heading h1/h2 (6 and 7 h2 kept for smoke.spec.ts), <Icon>, border-border	—	lote10-{terms,privacy}-*
/landing (shell only)	landing.md	Navigation/Footer use OmniRouteLockup (white ink on the fixed dark shell) and <Icon>. The footer GitHub icon link gets a name.	—	lote10-landing-*
/miniapp	miniapp.md	inline style={} replaced by tokens. Kit Input + Button. User bubble is lime with dark ink.	—	lote10-miniapp-*
/docs, /docs/api-explorer, /docs/[...slug]	docs*.md	Fumadocs palette: text-fd-primary → text-primary (readable ink), ci-heading, <Icon>. API explorer moves to Button/Badge (method tones)/Input/Field+Textarea/EmptyState. Slug page: nothing to change.	none (docs-*, dockerignore-docs-coverage, baseline-headroom green)	lote10-{docs,docs-api-explorer,docs-slug}-* (both themes)

iconMap: folder_open → FolderOpen (new import) and build → Wrench (was null).
i18n: publicSystem.status.breakerClosed / breakerNotClosed added to en, pt-BR and vi (the vi parity test pins every en key). The other 64 locales come in the i18n wave.

P6 greps (lote scope: root files, 400…503, forbidden, login, forgot-password, callback, auth, connect, status, maintenance, offline, terms, privacy, miniapp, docs, landing Navigation/Footer, misc group)

• material-symbols-outlined: 22 → 0
• raw <table|button|input|select|textarea>: 18 → 4. All 4 are landing/components/Navigation.tsx buttons (marketing styling is out of scope per spec §2 and the ruling "landing Navigation/Footer → ProductLockup only").
• "use client" is the first statement in every touched .tsx: 0 violations.

Validation

Check	Host	Result
npm run lint -- --concurrency=6 (local gate lock)	devbox	rc 0
npm run typecheck:core	devbox	rc 0
npm run check:dashboard-typecheck	devbox	OK, 194 pre-existing errors, within the baseline
npm run check:open-sse-typecheck	devbox	OK, 0
npm run check:ui-icu	devbox	PASS (933 687 messages, 67 catalogs)
check-key-completeness --warn	devbox	warn only (new keys pending in 64 locales)
node focused (16 files, incl. brand-pages-static, global-error-messages, design-kit-bridge, i18n-route-namespaces, icon-map-coverage, docs-*)	devbox	102 pass / 0 fail / 1 skip (basePath build test without RUN_BUILD_TESTS)
vitest focused (12 files: misc-badges, header-kit, sidebar, provider model rows, oauth callback, brand)	devbox	58/58
npm run build (head f4e6b433)	.113	npm rc 0, Turbopack build encountered 232 warnings (= base)
e2e smoke + error-pages + a11y	.113	17 passed, 4 skipped (the a11y axe tests skip themselves: @axe-core/playwright is not installed on the .113; meta-test passed)
axe-core wcag2a/aa (equivalent check, 13 routes × 2 themes)	devbox dev server	0 violations on every lote page incl. /login after 2a365620; remaining: Fumadocs' own GitHub icon svg-img-alt and light active-item contrast (pendências 3–4) — _artifacts/lote10-axe.json

After the build: 2a365620 (class strings only, from the axe check) and the merge of lote 3 (#17411, gated in its own PR). Re-run on the local post-merge head 28bf0b47: lint rc 0, typecheck:core rc 0, dashboard-typecheck OK 194, ui-icu PASS, node focused 102/0/1, vitest focused 58/58.

Pushed: the merge 28bf0b47 went out together with fix round 1 (1e3a300e) once GitHub git access came back.

Smoke (§8)

Dev server on port 20160 with an isolated DATA_DIR. 19 routes × light/dark/390 = 57 shots, _artifacts/lote10-<screen>-{light,dark,390}.png, with the DOM probe in _artifacts/lote10-smoke.json. On every page:

• the route was captured (probe url = requested path);
• 0 Material spans;
• no horizontal overflow at 390 px;
• dark flips the kit tokens (body rgb(4,13,16) vs rgb(251,251,248)).

/docs opens in both themes (light and dark shots of /docs, /docs/api-explorer and /docs/getting-started/QUICK-START).

Left out (pendências)

1. ErrorPageScaffold (adapter) CTAs are still hand-styled links and should be buttonVariants.
2. Landing marketing (spec §2, out of scope):
   • Navigation raw <button>s and hex palette;
   • 6 Material spans in FlowAnimation/Features/HowItWorks/HeroSection;
   • light-theme contrast of the marketing sections;
   • styled-jsx hydration mismatch in dev on /landing (pre-existing).
3. Fumadocs RootProvider next-themes uses storageKey "theme", the same key as themeStore. It writes the persisted JSON as an <html> class, and .dark is never set on /docs. The tokens still follow data-theme, so both themes render. Fix in docs/layout.tsx: theme={{ enabled: false }} or a separate storageKey (not a palette class, so not done here).
4. globals.css need: --color-fd-primary is lime, so Fumadocs' active sidebar text fails contrast in light (axe). It needs a text-only ink split like --text-color-primary.
5. Fumadocs' GitHub nav icon: svg role="img" without a name (axe svg-img-alt). Upstream markup.
6. src/shared/components/layouts/AuthLayout.tsx: 0 importers, still carries orange blur orbs. Remove it in F4 (not in the lote file list).
7. Kit gap, Alert: no persistent non-dismissable mode (missing prop: something like dismissible={false}). The kit Alert always renders a dismiss button. Since fix round 1, login and status compose the kit parts (ci-alert ci-alert--critical + AlertTitle/AlertDescription/AlertActions) without the dismiss control, so behaviour is unchanged. The kit gap stays.
8. Kit gap: no HoverCard. TokenHealthBadge uses a controlled Popover. Since fix round 1, a hover-open takes no focus, a click pins the panel open, and closing never moves focus that is elsewhere.
9. miniapp: the input label/placeholder now come from i18n (publicSystem.miniapp.askAnything, fix round 1). The other pre-existing English strings (greeting, errors, "Send", busy "…") stay for the i18n wave.
10. /docs/[...slug] logs a pre-existing cookies().get sync-dynamic-API error in dev.
11. manifest.ts and viewport.themeColor keep #0b0f1a (metadata). Decide in F4.
12. Login onboarding states have no lockup (the pinned test allows exactly one per file).
13. global-error cannot be exercised by e2e. Build and unit coverage only.
14. The a11y e2e axe tests skip on the .113 (@axe-core/playwright missing there). The equivalent axe check above stands in for them.
15. The 3 new i18n keys (publicSystem.status.breakerClosed/breakerNotClosed, publicSystem.miniapp.askAnything) still need the other 64 locales (i18n wave). vi has them because of the parity test.
16. timer_off → Timer (base mapping) is kept. Lucide TimerOff exists.

Fix round 1 (review batch-lote10-review.md)

• I1: TokenHealthBadge hover-open no longer moves focus (open and close auto-focus are prevented when the focus is elsewhere). A click after a hover-open pins the panel instead of closing it. RTL tests cover both (red first, then green), and Escape still returns focus to the trigger.
• M1: the login Node warning and the status error are composed from kit alert parts without the dismiss control.
• M5: the miniapp input label comes from i18n.
• Nit: FolderOpen folded into the main lucide import block.
• M2/M3: new shots lote10-login-signin-{light,dark,390}.png (sign-in state, INITIAL_PASSWORD seeded) and lote10-status-matrix-{light,dark,390}.png (health stubbed with 6 providers: 6 matrix cells and the live badge visible).

Screenshot paths (63, /home/diegosouzapw/dev/proxys/OmniRoute/_artifacts/)

• lote10-login-light.png · lote10-login-dark.png · lote10-login-390.png
• lote10-forgot-password-light.png · lote10-forgot-password-dark.png · lote10-forgot-password-390.png
• lote10-forbidden-light.png · lote10-forbidden-dark.png · lote10-forbidden-390.png
• lote10-status-light.png · lote10-status-dark.png · lote10-status-390.png
• lote10-maintenance-light.png · lote10-maintenance-dark.png · lote10-maintenance-390.png
• lote10-offline-light.png · lote10-offline-dark.png · lote10-offline-390.png
• lote10-callback-light.png · lote10-callback-dark.png · lote10-callback-390.png
• lote10-auth-callback-light.png · lote10-auth-callback-dark.png · lote10-auth-callback-390.png
• lote10-connect-codex-token-light.png · lote10-connect-codex-token-dark.png · lote10-connect-codex-token-390.png
• lote10-terms-light.png · lote10-terms-dark.png · lote10-terms-390.png
• lote10-privacy-light.png · lote10-privacy-dark.png · lote10-privacy-390.png
• lote10-miniapp-light.png · lote10-miniapp-dark.png · lote10-miniapp-390.png
• lote10-landing-light.png · lote10-landing-dark.png · lote10-landing-390.png
• lote10-404-light.png · lote10-404-dark.png · lote10-404-390.png
• lote10-400-light.png · lote10-400-dark.png · lote10-400-390.png
• lote10-503-light.png · lote10-503-dark.png · lote10-503-390.png
• lote10-docs-light.png · lote10-docs-dark.png · lote10-docs-390.png
• lote10-docs-api-explorer-light.png · lote10-docs-api-explorer-dark.png · lote10-docs-api-explorer-390.png
• lote10-docs-slug-light.png · lote10-docs-slug-dark.png · lote10-docs-slug-390.png
• lote10-login-signin-light.png · lote10-login-signin-dark.png · lote10-login-signin-390.png
• lote10-status-matrix-light.png · lote10-status-matrix-dark.png · lote10-status-matrix-390.png