fix(ux): PR-K pass-7 — R-07/R-08/R-09/R-10/R-11 boundaries, z-index, watt meter, i18n, hero filter

B2JK-Industry · claude · B2JK-Industry · commit c864c98036d3 · 2026-04-26T18:30:02.000+02:00
Five reliability + visual-regression tickets stacked on top of PR-J.

R-07 — page crash error boundary
- New `app/miasto/error.tsx` (segment-level boundary). Catches the
  upgrade-flow exceptions that used to bubble to the browser default
  error page. Renders a navy hero + Try-again + Back-to-home.
- New `app/global-error.tsx` (root-level fallback). Renders its own
  `&lt;html&gt;` + `&lt;body&gt;` because the layout itself failed; uses inline
  styles so it works even with a broken design system. The inner
  `&lt;a href="/"&gt;` (intentional plain anchor — `&lt;Link&gt;` is unreliable
  when the layout did not mount) is suppressed for
  `@next/next/no-html-link-for-pages` lint with an inline
  `eslint-disable-next-line`.

R-08 — WattDeficitPanel banner crossing the header
- Header `z-20` → `z-40` so it always paints on top of scrolling
  sticky descendants. Banner `z-[30]` → `z-30` (still below header).
- Sticky offset corrected: `top-[144px] sm:top-16` →
  `top-[96px] sm:top-[112px]`. The new offsets add (resource-bar
  ≈ 40 px) to the actual main-row heights (mobile 56, sm+ 72) — the
  prior numbers were off-by-N and let the banner sit too low on
  mobile and too high on sm+.

R-09 — yellow WattMeter retint regression
- `&lt;rect className="watt-meter"&gt;` opt-out class on the inner fill
  inside `WattMeter` in `city-scene.tsx`. The pko city-scene
  attribute selector for `[fill="#fde047"]` (R-02 + earlier G-01)
  retinted the meter to the muted `--sc-window` token — combined
  with the `saturate(.35)` filter the bar collapsed into invisibility.
- `globals.css` selector now `:not(.watt-meter)` so the progress
  bar fill stays neon yellow (a UI signal, not a decorative
  window).

R-10 — i18n consistency (PL nav, CS body)
- `/api/lang` now calls `revalidatePath("/", "layout")` after
  setting the `xp_lang` cookie. Without it the Next.js 16 RSC cache
  served the prior render (closed over the old dictionary) on the
  next navigation, producing nav-in-PL / body-in-CS mixes on
  `/miasto` and similar surfaces.
- `language-switcher.tsx` adds a 250 ms safety net: after
  `router.refresh()` it checks `document.documentElement.lang` and
  hard-reloads if the rendered lang did not flip. Belt-and-braces
  for cases the cache invalidation misses.

R-11 — CitySkylineHero light-cream bodies invisible
- Class swapped from `city-scene-root` to dedicated
  `city-skyline-hero-root`. The R-05 daylight surface + R-05
  refreshed catalog colours (cream / ivory / light-navy) were being
  pushed past pure white by the shared `saturate(.35)
  brightness(1.55)` filter. The hero owns its own palette now —
  no inherited filter, white background directly, faint navy 0.5 px
  outline (`stroke: rgba(0, 53, 116, 0.18)`) on rect bodies so
  light catalog colours read against the sky. Core skin keeps the
  legacy night canvas via `[data-skin="core"]` scope.

Validation:
  pnpm typecheck                            clean
  pnpm test                                 715/715 vitest
  pnpm lint                                 0 errors (4 pre-existing
                                           React 19 purity warnings)
  pnpm test:e2e ux-fixes                    14/14 chromium
  pnpm test:walk (post-pr-k)                0 a11y / 0 console / 0 page,
                                           56 routes
  pnpm build                                OK

About to push origin/main → Vercel auto-deploy.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/api/lang/route.ts b/app/api/lang/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest } from "next/server";
 import { cookies } from "next/headers";
+import { revalidatePath } from "next/cache";
 import { LANGS, COOKIE_NAME, type Lang } from "@/lib/i18n";
 
 export async function POST(req: NextRequest) {
@@ -14,5 +15,11 @@ export async function POST(req: NextRequest) {
     maxAge: 60 * 60 * 24 * 365,
     sameSite: "lax",
   });
+  // R-10 — bust the RSC cache for the entire layout tree so server
+  // components re-execute with the new `xp_lang` cookie. Without
+  // this, Next.js 16 keeps serving the previously-rendered RSC
+  // payload (which closed over the old dictionary) for /miasto and
+  // similar surfaces, producing nav-in-PL / body-in-CS mixes.
+  revalidatePath("/", "layout");
   return Response.json({ ok: true, lang });
 }
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { useEffect } from "react";
+
+/* R-07 — top-level error boundary.
+ *
+ * `app/global-error.tsx` only runs when the root layout itself
+ * throws. It must render its own `<html>` + `<body>` because the
+ * layout did not. Keep it minimal and dependency-free — the surface
+ * has to render even if the design system is broken.
+ *
+ * Per-segment error.tsx (`app/<segment>/error.tsx`) handles the
+ * common case; global-error is the last-resort fallback that keeps
+ * the site from showing the browser default error page.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    if (typeof console !== "undefined") {
+      console.error("[global-error] root layout error:", error);
+    }
+  }, [error]);
+
+  return (
+    <html lang="pl">
+      <body
+        style={{
+          margin: 0,
+          padding: "48px 24px",
+          fontFamily:
+            "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          background: "#ffffff",
+          color: "#000000",
+          minHeight: "100vh",
+        }}
+      >
+        <main
+          style={{
+            maxWidth: "560px",
+            margin: "0 auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "16px",
+          }}
+        >
+          <div style={{ fontSize: "48px", textAlign: "center" }} aria-hidden>
+            ⚠️
+          </div>
+          <h1
+            style={{
+              color: "#003574",
+              fontSize: "32px",
+              lineHeight: "40px",
+              fontWeight: 700,
+              textAlign: "center",
+              margin: 0,
+            }}
+          >
+            Coś poszło nie tak
+          </h1>
+          <p
+            style={{
+              color: "#636363",
+              fontSize: "16px",
+              lineHeight: "24px",
+              textAlign: "center",
+              margin: 0,
+            }}
+          >
+            Aplikacja napotkała nieoczekiwany błąd. Spróbuj ponownie, lub odśwież
+            stronę.
+          </p>
+          {error.digest && (
+            <p
+              style={{
+                color: "#b7b7b7",
+                fontSize: "13px",
+                fontFamily: "monospace",
+                textAlign: "center",
+                margin: 0,
+              }}
+            >
+              ref: {error.digest}
+            </p>
+          )}
+          <div
+            style={{
+              display: "flex",
+              gap: "12px",
+              justifyContent: "center",
+              marginTop: "8px",
+            }}
+          >
+            <button
+              type="button"
+              onClick={reset}
+              style={{
+                padding: "12px 20px",
+                borderRadius: "10px",
+                background: "#003574",
+                color: "#ffffff",
+                border: "1px solid #003574",
+                fontWeight: 600,
+                cursor: "pointer",
+              }}
+            >
+              Spróbuj ponownie
+            </button>
+            {/* Plain `<a>` (not next/link) is intentional — global-error
+                runs even when the root layout failed to mount, so
+                `<Link>` and the next router are not reliable here. The
+                next/link lint rule is suppressed for this file only. */}
+            {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
+            <a
+              href="/"
+              style={{
+                padding: "12px 20px",
+                borderRadius: "10px",
+                background: "#ffffff",
+                color: "#003574",
+                border: "1px solid #003574",
+                fontWeight: 600,
+                textDecoration: "none",
+                display: "inline-flex",
+                alignItems: "center",
+              }}
+            >
+              Strona główna
+            </a>
+          </div>
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
@@ -249,9 +249,13 @@ body {
 }
 
 /* Neon-yellow window glow → muted warm yellow per spec (window bucket).
- * Limit to FILL only — strokes already retinted above. */
-:where([data-skin="pko"]) .city-scene-root [fill="#fde047"],
-:where([data-skin="pko"]) .city-scene-root [fill="#facc15"] {
+ * Limit to FILL only — strokes already retinted above.
+ * R-09 — `:not(.watt-meter)` keeps the best-score progress bar fill
+ * visibly yellow. The previous mass override retinted it to the
+ * muted window token, which on top of the `saturate(.35)` filter
+ * collapsed the bar into invisibility against the dark slot bg. */
+:where([data-skin="pko"]) .city-scene-root [fill="#fde047"]:not(.watt-meter),
+:where([data-skin="pko"]) .city-scene-root [fill="#facc15"]:not(.watt-meter) {
   fill: var(--sc-window);
 }
 
@@ -420,6 +424,30 @@ body {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
+/* R-11 — CitySkylineHero scoped surface. The hero owns its own
+ * daylight palette (pko + refreshed catalog colours), so it does
+ * NOT inherit the `.city-scene-root` `saturate(.35) brightness(1.55)`
+ * filter that washes cream/ivory building bodies into invisibility.
+ * Background is white directly; building bodies get a faint navy
+ * outline so they read against the sky. */
+.city-skyline-hero-root {
+  background: #ffffff;
+}
+.city-skyline-hero-root rect[fill] {
+  /* 1 px navy outline (3% opacity) so very-light catalog bodies
+   * (cream, ivory, light-navy) keep a visible silhouette against
+   * the daylight sky. Doesn't touch coloured rects strongly enough
+   * to alter brand colours. */
+  stroke: rgba(0, 53, 116, 0.18);
+  stroke-width: 0.5;
+}
+:where([data-skin="core"]) .city-skyline-hero-root {
+  background: #07071a;
+}
+:where([data-skin="core"]) .city-skyline-hero-root rect[fill] {
+  stroke: none;
+}
+
 /* CitySkylineHero empty-state overlay. The original `bg-black/40`
  * scrim was tuned for the legacy night sky; on the new pko light sky
  * it reads as an unwanted dark wash. Default = light scrim + accent
diff --git a/app/miasto/error.tsx b/app/miasto/error.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+
+/* R-07 — Route segment error boundary for /miasto.
+ *
+ * Without this file, an exception inside the WattCityClient bubble
+ * (typically: stale upgrade state racing a server-side re-render)
+ * crashed all the way to the browser default error page. Next.js
+ * App Router automatically renders this component when a server or
+ * client component inside `app/miasto/*` throws.
+ *
+ * `reset()` clears the error boundary and triggers a re-render of
+ * the segment — the typical fix is "try again" since the underlying
+ * cause is usually a transient race that resolves on the next
+ * fetch. We also surface a "Back to home" escape hatch.
+ */
+export default function MiastoError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Server-side aggregator (Phase 5.3 first-party analytics)
+    // catches this too; client-side log is a development convenience.
+    if (typeof console !== "undefined") {
+      console.error("[/miasto] segment error:", error);
+    }
+  }, [error]);
+
+  return (
+    <div className="flex flex-col gap-4 max-w-xl mx-auto py-12 animate-slide-up">
+      <span aria-hidden className="text-5xl text-center">
+        ⚠️
+      </span>
+      <h1 className="t-h2 text-[var(--accent)] text-center">
+        Coś poszło nie tak w Twoim mieście
+      </h1>
+      <p className="t-body text-[var(--ink-muted)] text-center">
+        Spróbuj ponownie. Jeśli problem się powtarza, wróć do strony głównej —
+        dane są zapisane bezpiecznie.
+      </p>
+      {error.digest && (
+        <p className="t-caption text-[var(--ink-subtle)] text-center font-mono">
+          ref: {error.digest}
+        </p>
+      )}
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <button type="button" className="btn btn-primary" onClick={reset}>
+          Spróbuj ponownie
+        </button>
+        <Link href="/" className="btn btn-secondary">
+          Strona główna
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/components/city-scene.tsx b/components/city-scene.tsx
@@ -1656,10 +1656,23 @@ function WattMeter({
 }) {
   if (cap <= 0) return null;
   const pct = Math.min(1, value / cap);
+  // R-09 — `class="watt-meter"` opts the inner fill out of the
+  // global `[fill="#fde047"]` retint (see globals.css). The
+  // attribute selector matches all neon-yellow fills inside the
+  // city scene EXCEPT elements bearing this class — keeps the
+  // best-score progress meter visibly yellow on the pko skin
+  // (it is a UI signal, not a decorative window).
   return (
     <g>
       <rect x={x} y={y} width={w} height={8} fill="#0a0a0f" stroke="#0a0a0f" strokeWidth={2} rx={2} />
-      <rect x={x + 1} y={y + 1} width={(w - 2) * pct} height={6} fill="#fde047" />
+      <rect
+        className="watt-meter"
+        x={x + 1}
+        y={y + 1}
+        width={(w - 2) * pct}
+        height={6}
+        fill="#fde047"
+      />
     </g>
   );
 }
diff --git a/components/city-skyline-hero.tsx b/components/city-skyline-hero.tsx
@@ -85,10 +85,17 @@ export function CitySkylineHero({ buildings, lang, emptyStateCta }: Props) {
 
   return (
     <section
-      // `city-scene-root` opts the hero into the pko skin's
-      // attribute-selector overrides in globals.css (sky stops, ground
-      // pattern, stroke colors) and provides the skin-aware background.
-      className="city-scene-root card relative overflow-hidden"
+      // R-11 — class swapped from `city-scene-root` to dedicated
+      // `city-skyline-hero-root`. The hero canvas owns its palette
+      // (the new R-05 daylight surface + the refreshed catalog
+      // colours), so the city-scene attribute-selector retints +
+      // saturate(.35) brightness(1.55) filter no longer apply. The
+      // prior shared class washed cream/ivory building bodies into
+      // invisibility because brightness(1.55) on near-white pushed
+      // them past pure white. The hero gets its own scoped CSS in
+      // globals.css (sky bg + 1 px navy outline on bodies for
+      // readability against the light sky).
+      className="city-skyline-hero-root card relative overflow-hidden"
       aria-labelledby="skyline-heading"
     >
       <h2 id="skyline-heading" className="sr-only">
diff --git a/components/language-switcher.tsx b/components/language-switcher.tsx
@@ -57,12 +57,26 @@ export function LanguageSwitcher({ current, variant = "header" }: Props) {
       });
       // Soft transition — `router.refresh()` re-runs the server tree
       // (server components, layout, page) with the new `xp_lang`
-      // cookie and patches the rendered DOM in place. The previous
-      // `window.location.reload()` killed scroll position, blanked
-      // the page, and visibly re-mounted client islands; this swap
-      // looks like a language change, not an app crash.
+      // cookie and patches the rendered DOM in place.
       router.refresh();
       setOpen(false);
+      // R-10 — Next.js 16 RSC cache occasionally returns a stale
+      // payload after the cookie flip (the layout RSC was closed
+      // over the prior dictionary at request time). The /api/lang
+      // route now `revalidatePath("/", "layout")` for the common
+      // case; this 250 ms guard verifies the rendered `<html
+      // lang>` actually flipped — if it did not, fall back to a
+      // hard reload so the user never sees a half-translated page.
+      window.setTimeout(() => {
+        try {
+          const htmlLang = document.documentElement.lang;
+          if (htmlLang && htmlLang.toLowerCase() !== lang.toLowerCase()) {
+            window.location.reload();
+          }
+        } catch {
+          /* ignore */
+        }
+      }, 250);
     } finally {
       setPending(null);
     }
diff --git a/components/site-nav.tsx b/components/site-nav.tsx
@@ -107,7 +107,7 @@ export function SiteNav({
     navLinks.push({ href: "/rodzic", label: PARENT_KID_LABEL[lang] });
   }
   return (
-    <header className="w-full border-b border-[var(--line)] sticky top-0 z-20 bg-[var(--surface)]">
+    <header className="w-full border-b border-[var(--line)] sticky top-0 z-40 bg-[var(--surface)]">
       <nav className="max-w-6xl mx-auto px-4 sm:px-6 h-[56px] sm:h-[72px] flex items-center justify-between gap-4">
         {(() => {
           const theme = resolveTheme();
diff --git a/components/watt-deficit-panel.tsx b/components/watt-deficit-panel.tsx
@@ -147,15 +147,13 @@ export function WattDeficitPanel({ deficit, lang }: Props) {
     <aside
       role="alert"
       aria-labelledby="wdp-title"
-      /* sticky offset: desktop = 64 px (h-16 main nav row only).
-         Mobile = 144 px because SiteNav stacks main row 64 + secondary
-         nav ~40 + resource-bar ~40 (all rendered inside the sticky
-         <header>). Before this fix the panel pinned at 64 px and let
-         the secondary nav + resource-bar scroll past over it, hiding
-         the critical-state banner under the nav stack.
-         The panel is only rendered for authenticated users who are
-         in deficit, so resource-bar is always present → 144 is safe. */
-      className="sticky top-[144px] sm:top-16 z-[30] border-b border-[var(--danger)] bg-[var(--surface-2)]"
+      /* R-08 — sticky offset matches the actual SiteNav heights:
+         mobile main row 56 + resource-bar 40 = 96 px; sm+ main row
+         72 + resource-bar 40 = 112 px. Header z-40 ensures the
+         banner never paints on top of the nav (the prior z-[30] vs
+         header z-20 had the inversion that made the banner cross
+         the header on scroll). Bg `--surface-2` is opaque. */
+      className="sticky top-[96px] sm:top-[112px] z-30 border-b border-[var(--danger)] bg-[var(--surface-2)]"
     >
       <div className="max-w-6xl mx-auto px-4 sm:px-6 py-2 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-sm">
         <div className="flex-1 flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3">

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@ export function SiteNav({`
`107`	`107`	`navLinks.push({ href: "/rodzic", label: PARENT_KID_LABEL[lang] });`
`108`	`108`	`}`
`109`	`109`	`return (`
`110`		`- <header className="w-full border-b border-[var(--line)] sticky top-0 z-20 bg-[var(--surface)]">`
	`110`	`+ <header className="w-full border-b border-[var(--line)] sticky top-0 z-40 bg-[var(--surface)]">`
`111`	`111`	`<nav className="max-w-6xl mx-auto px-4 sm:px-6 h-[56px] sm:h-[72px] flex items-center justify-between gap-4">`
`112`	`112`	`{(() => {`
`113`	`113`	`const theme = resolveTheme();`