feat(ui): PR-P G-07 + G-08 — /games/ai hub + GameHero × 9 evergreen pages

B2JK-Industry · claude · B2JK-Industry · commit 19542e5cb01a · 2026-04-27T00:33:20.000+02:00
G-07 — `/games/ai` parent route (NEW).
Pre-PR-P: only `app/games/ai/[id]/page.tsx` existed; visiting bare
`/games/ai` returned the generic 404 (now PR-P G-03 root not-found,
but still a dead end for kids who guess the URL).

Server component listing 0-3 currently-live AI envelopes via
`listActiveAiGames()`. Each card shows building glyph + AI badge +
PL-tagged title + tagline (lang="pl" so the bitmap-fed audio +
auto-translate know it's Polish under non-pl locales) + ⏱ live
countdown. Empty state graceful: rotation hint + cron timing copy
("First game lands at 09:00 UTC") so the player knows when the
next envelope is due. Added `dict.aiHub` × 4 langs.

G-08 — GameHero primitive × 9 evergreen pages.
Per-game pages each had a bespoke header — emoji size, back link
spacing, body paragraph length all drifted. New players had no
consistent "what am I playing for?" surface: rules / duration /
max XP / age band weren't surfaced together.

`components/game-hero.tsx` (NEW): emoji + localizedTitle (via E-03
helper, falls back to PL canonical) + game.description (lang="pl")
+ 3 chips (⏱ duration / ⚡ "Up to N W" per locale / age hint).

Integrated into all 9 evergreen pages (energy-dash, power-flip,
stock-tap, budget-balance, finance-quiz, math-sprint, memory-match,
currency-rush, word-scramble). Existing back link kept; existing
inline H1 + body removed (GameHero owns that surface now). Each
page also gained a `notFound()` guard if `getGame(id)` returns
null — defensive against future game-id renames in lib/games.ts.
The legacy `t.headerTitle` / `t.headerBody` dict keys are no longer
read but kept in lib/locales/ for backwards compat with any
external consumer; cleanup is a Pass-11 candidate.

Validation:
- pnpm typecheck → 0 errors

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/games/ai/page.tsx b/app/games/ai/page.tsx
@@ -0,0 +1,86 @@
+import Link from "next/link";
+import { listActiveAiGames } from "@/lib/ai-pipeline/publish";
+import { dictFor } from "@/lib/i18n";
+import { getLang } from "@/lib/i18n-server";
+import { LiveCountdown } from "@/components/live-countdown";
+
+/* G-07 — `/games/ai` parent route.
+ *
+ * Pre-PR-P: only `app/games/ai/[id]/page.tsx` existed; visiting the
+ * bare `/games/ai` returned the generic 404 (now PR-P G-03 root
+ * not-found, but still a dead-end for kids who guess the URL).
+ *
+ * This server component lists 0-3 currently-live AI envelopes via
+ * the same `listActiveAiGames()` reader the dashboard preview uses.
+ * Empty state is graceful: rotation hint + cron timing copy so the
+ * player knows when the next game lands instead of seeing a blank.
+ */
+export const dynamic = "force-dynamic";
+
+export default async function AiGamesHub() {
+  const lang = await getLang();
+  const t = dictFor(lang).aiHub;
+  const active = await listActiveAiGames();
+
+  return (
+    <main className="flex flex-col gap-6 max-w-4xl mx-auto animate-slide-up">
+      <header className="flex flex-col gap-2">
+        <h1 className="t-h2 text-[var(--accent)]">{t.title}</h1>
+        <p className="text-[var(--ink-muted)]">{t.body}</p>
+      </header>
+
+      {active.length === 0 ? (
+        <div className="card p-6 flex flex-col items-center gap-2 text-center">
+          <span className="text-3xl" aria-hidden>
+            🤖
+          </span>
+          <p className="font-semibold">{t.emptyTitle}</p>
+          <p className="text-[var(--ink-muted)]">{t.emptyBody}</p>
+          <p className="t-caption text-[var(--ink-subtle)] mt-2">
+            {t.rotationHint}
+          </p>
+        </div>
+      ) : (
+        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {active.map((envelope) => (
+            <li key={envelope.id}>
+              <Link
+                href={`/games/ai/${envelope.id}`}
+                className="card card--interactive p-5 flex flex-col gap-2 h-full"
+              >
+                <div className="flex items-baseline gap-2">
+                  <span className="text-3xl" aria-hidden>
+                    {envelope.buildingGlyph}
+                  </span>
+                  <span className="chip text-[10px] border-[var(--accent)] text-[var(--accent)]">
+                    AI
+                  </span>
+                </div>
+                <h2
+                  className="font-semibold tracking-tight text-base"
+                  lang="pl"
+                >
+                  {envelope.title}
+                </h2>
+                <p
+                  className="text-sm text-[var(--ink-muted)] line-clamp-2"
+                  lang="pl"
+                >
+                  {envelope.tagline}
+                </p>
+                <span className="t-caption text-[var(--ink-muted)] mt-auto">
+                  ⏱{" "}
+                  <LiveCountdown
+                    validUntil={envelope.validUntil}
+                    svg={false}
+                    color="var(--ink-muted)"
+                  />
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}
diff --git a/app/games/budget-balance/page.tsx b/app/games/budget-balance/page.tsx
@@ -1,10 +1,12 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { BudgetBalanceClient } from "@/components/games/budget-balance-client";
 import { budgetScenariosFor } from "@/lib/content/budget-balance";
 import { dictFor } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -13,7 +15,8 @@ export default async function BudgetBalancePage() {
   if (!session) redirect("/login?next=/games/budget-balance");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.budget;
+  const gameMeta = getGame("budget-balance");
+  if (!gameMeta) notFound();
   const pool = budgetScenariosFor(lang);
   // Server component evaluated per-request (force-dynamic): random scenario selection
   // is intentional — each page load gets a fresh scenario from the pool.
@@ -25,9 +28,8 @@ export default async function BudgetBalancePage() {
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <BudgetBalanceClient scenario={pick} dict={dict} />
     </div>
   );
diff --git a/app/games/currency-rush/page.tsx b/app/games/currency-rush/page.tsx
@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { CurrencyRushClient } from "@/components/games/currency-rush-client";
 import { dictFor } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -12,16 +14,16 @@ export default async function CurrencyRushPage() {
   if (!session) redirect("/login?next=/games/currency-rush");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.currency;
+  const gameMeta = getGame("currency-rush");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <CurrencyRushClient dict={dict} />
     </div>
   );
diff --git a/app/games/energy-dash/page.tsx b/app/games/energy-dash/page.tsx
@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { EnergyDashClient } from "@/components/games/energy-dash-client";
 import { dictFor } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -12,16 +14,16 @@ export default async function EnergyDashPage() {
   if (!session) redirect("/login?next=/games/energy-dash");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.energy;
+  const gameMeta = getGame("energy-dash");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <EnergyDashClient dict={dict} />
     </div>
   );
diff --git a/app/games/finance-quiz/page.tsx b/app/games/finance-quiz/page.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { notFound } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { FinanceQuizClient } from "@/components/games/finance-quiz-client";
 import {
@@ -9,6 +10,8 @@ import {
 import { shuffle } from "@/lib/shuffle";
 import { dictFor, type Lang } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 function pickRound(lang: Lang): QuizQuestion[] {
   return shuffle(financeQuestionsFor(lang))
@@ -56,6 +59,8 @@ export default async function FinanceQuizPage() {
   const lang = await getLang();
   const dict = dictFor(lang);
   const t = dict.finance;
+  const gameMeta = getGame("finance-quiz");
+  if (!gameMeta) notFound();
   const round = pickRound(lang);
   const anonymous = !session;
   const demo = DEMO_BANNER[lang];
@@ -65,11 +70,8 @@ export default async function FinanceQuizPage() {
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">
-          {t.headerBody.replace("{n}", String(QUESTIONS_PER_ROUND))}
-        </p>
       </header>
+      {gameMeta && <GameHero game={gameMeta} lang={lang} dict={dict} />}
       {anonymous && (
         <aside
           className="card flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 p-4"
diff --git a/app/games/math-sprint/page.tsx b/app/games/math-sprint/page.tsx
@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { MathSprintClient } from "@/components/games/math-sprint-client";
 import { dictFor } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -12,16 +14,16 @@ export default async function MathSprintPage() {
   if (!session) redirect("/login?next=/games/math-sprint");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.math;
+  const gameMeta = getGame("math-sprint");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <MathSprintClient dict={dict} />
     </div>
   );
diff --git a/app/games/memory-match/page.tsx b/app/games/memory-match/page.tsx
@@ -1,11 +1,13 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { MemoryMatchClient } from "@/components/games/memory-match-client";
 import { memoryPairsFor, PAIRS_PER_ROUND } from "@/lib/content/memory-pairs";
 import { sample } from "@/lib/shuffle";
 import { dictFor, type Lang } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -18,16 +20,16 @@ export default async function MemoryMatchPage() {
   if (!session) redirect("/login?next=/games/memory-match");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.memory;
+  const gameMeta = getGame("memory-match");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <MemoryMatchClient pairs={pickRound(lang)} dict={dict} />
     </div>
   );
diff --git a/app/games/power-flip/page.tsx b/app/games/power-flip/page.tsx
@@ -1,11 +1,13 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { PowerFlipClient } from "@/components/games/power-flip-client";
 import { powerRoundsFor, type PowerRound } from "@/lib/content/power-flip";
 import { shuffle } from "@/lib/shuffle";
 import { dictFor, type Lang } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -28,16 +30,16 @@ export default async function PowerFlipPage() {
   if (!session) redirect("/login?next=/games/power-flip");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.power;
+  const gameMeta = getGame("power-flip");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <PowerFlipClient rounds={pickRound(lang)} dict={dict} />
     </div>
   );
diff --git a/app/games/stock-tap/page.tsx b/app/games/stock-tap/page.tsx
@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { StockTapClient } from "@/components/games/stock-tap-client";
 import { dictFor } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -12,19 +14,16 @@ export default async function StockTapPage() {
   if (!session) redirect("/login?next=/games/stock-tap");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.stock;
-  const body = t.headerBody
-    .replace("{buy}", t.buy)
-    .replace("{sell}", t.sell);
+  const gameMeta = getGame("stock-tap");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{body}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <StockTapClient dict={dict} />
     </div>
   );
diff --git a/app/games/word-scramble/page.tsx b/app/games/word-scramble/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { redirect } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { getSession } from "@/lib/session";
 import { WordScrambleClient } from "@/components/games/word-scramble-client";
 import {
@@ -9,6 +9,8 @@ import {
 import { sample } from "@/lib/shuffle";
 import { dictFor, type Lang } from "@/lib/i18n";
 import { getLang } from "@/lib/i18n-server";
+import { getGame } from "@/lib/games";
+import { GameHero } from "@/components/game-hero";
 
 export const dynamic = "force-dynamic";
 
@@ -21,16 +23,16 @@ export default async function WordScramblePage() {
   if (!session) redirect("/login?next=/games/word-scramble");
   const lang = await getLang();
   const dict = dictFor(lang);
-  const t = dict.word;
+  const gameMeta = getGame("word-scramble");
+  if (!gameMeta) notFound();
   return (
     <div className="flex flex-col gap-6">
       <header className="flex flex-col gap-2">
         <Link href="/games" className="text-sm text-[var(--ink-muted)] hover:underline">
           {dict.games.back}
         </Link>
-        <h1 className="text-3xl font-bold">{t.headerTitle}</h1>
-        <p className="text-[var(--ink-muted)]">{t.headerBody}</p>
       </header>
+      <GameHero game={gameMeta} lang={lang} dict={dict} />
       <WordScrambleClient words={pickRound(lang)} dict={dict} />
     </div>
   );
diff --git a/components/game-hero.tsx b/components/game-hero.tsx
diff --git a/lib/locales/cs.ts b/lib/locales/cs.ts
diff --git a/lib/locales/en.ts b/lib/locales/en.ts
diff --git a/lib/locales/pl.ts b/lib/locales/pl.ts
diff --git a/lib/locales/uk.ts b/lib/locales/uk.ts
