keyboard radiogroup, modal focus trap, nav session hydration

src/app/[locale]/admin/billing/page.tsx

@@ -98,6 +98,7 @@ export default async function AdminBillingPage() {
         <div className="animate-in animate-in-delay-3">
           <h2 className="text-lg font-semibold mb-3">{t("balancesTitle")}</h2>
           <Card>
+            <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead className="text-xs text-text-muted text-left">
                 <tr>
@@ -126,6 +127,7 @@ export default async function AdminBillingPage() {
                 ))}
               </tbody>
             </table>
+            </div>
           </Card>
         </div>
       )}

src/app/[locale]/admin/page.tsx

@@ -5,6 +5,11 @@ import { listTenants } from "@/lib/k8s";
 import { countPendingSkillActivationRequests } from "@/lib/db";
 import { AdminPanel } from "@/components/admin/admin-panel";
 
+export async function generateMetadata() {
+  const t = await getTranslations("common");
+  return { title: t("admin") };
+}
+
 export default async function AdminPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");

src/app/[locale]/billing/page.tsx

@@ -26,6 +26,11 @@ import { RunningTotalWidget } from "@/components/billing/running-total-widget";
  * Anyone signed in can view this. The data is org-scoped; even
  * non-owner team members see the same view.
  */
+export async function generateMetadata() {
+  const t = await getTranslations("common");
+  return { title: t("billing") };
+}
+
 export default async function CustomerBillingPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");

src/app/[locale]/dashboard/page.tsx

@@ -22,6 +22,11 @@ import { ProvisioningStatus } from "@/components/onboarding/provisioning-status"
 import { formatDateTime } from "@/lib/format";
 import Link from "next/link";
 
+export async function generateMetadata() {
+  const t = await getTranslations("common");
+  return { title: t("dashboard") };
+}
+
 export default async function DashboardPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");
@@ -344,7 +349,7 @@ export default async function DashboardPage() {
         {canCreate && (
           <Link
             href="/dashboard/new"
-            className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-white text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
+            className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-surface-0 text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
           >
             <span>+</span> {t("createInstance")}
           </Link>

src/app/[locale]/error.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Link } from "@/i18n/navigation";
+
+/**
+ * Error boundary for the [locale] segment. Catches render/data errors
+ * thrown by any page below the locale layout (which is where K8s, DB,
+ * LiteLLM and Stripe calls happen). Renders inside NextIntlClientProvider,
+ * so translations are available. Root-layout failures fall through to
+ * global-error.tsx instead.
+ */
+export default function LocaleError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const t = useTranslations("errors");
+
+  useEffect(() => {
+    // Surface the error for log scraping; the digest correlates with
+    // the server-side stack in production.
+    console.error("Portal error boundary:", error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-5">
+      <div className="w-full max-w-md text-center">
+        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-xl bg-error/10">
+          <svg
+            className="h-7 w-7 text-error"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.75}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M12 9v4M12 17h.01M10.3 3.86l-8.5 14.7A1.5 1.5 0 003.1 21h17.8a1.5 1.5 0 001.3-2.44l-8.5-14.7a1.5 1.5 0 00-2.6 0z" />
+          </svg>
+        </div>
+        <h1 className="font-display text-xl font-semibold text-text-primary mb-2">
+          {t("title")}
+        </h1>
+        <p className="text-sm text-text-secondary mb-6">{t("description")}</p>
+        {error?.digest && (
+          <p className="text-[11px] font-mono text-text-muted mb-6">
+            {error.digest}
+          </p>
+        )}
+        <div className="flex items-center justify-center gap-3">
+          <button
+            onClick={reset}
+            className="py-2 px-4 rounded-lg bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors cursor-pointer"
+          >
+            {t("retry")}
+          </button>
+          <Link
+            href="/dashboard"
+            className="py-2 px-4 rounded-lg border border-border text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-surface-2 transition-colors"
+          >
+            {t("backToDashboard")}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/[locale]/layout.tsx

@@ -1,13 +1,36 @@
+import type { Metadata, Viewport } from "next";
 import { NextIntlClientProvider } from "next-intl";
-import { getMessages } from "next-intl/server";
+import { getMessages, getTranslations } from "next-intl/server";
 import { routing } from "@/i18n/routing";
 import { notFound } from "next/navigation";
+import { auth } from "@/lib/auth";
 import { NavShell } from "@/components/layout/nav-shell";
 
 export function generateStaticParams() {
   return routing.locales.map((locale) => ({ locale }));
 }
 
+// Metadata API (Next 15) instead of a hand-rolled <head>. The title
+// template lets each page export a short `title` (e.g. "Dashboard")
+// that renders as "Dashboard · PieCed". Pages that export no metadata
+// fall back to the default below.
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("common");
+  const appName = t("appName");
+  return {
+    title: {
+      default: `${appName} Portal`,
+      template: `%s · ${appName}`,
+    },
+    description: "PieCed IT — Multi-tenant AI assistant platform",
+  };
+}
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 export default async function LocaleLayout({
   children,
   params,
@@ -22,20 +45,13 @@ export default async function LocaleLayout({
   }
 
   const messages = await getMessages();
+  const session = await auth();
 
   return (
     <html lang={locale} className="dark">
-      <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>PieCed Portal</title>
-        <meta
-          name="description"
-          content="PieCed IT — Multi-tenant AI assistant platform"
-        />
-      </head>
       <body className="min-h-screen bg-surface-0 text-text-primary antialiased">
         <NextIntlClientProvider messages={messages}>
-          <NavShell>{children}</NavShell>
+          <NavShell session={session}>{children}</NavShell>
         </NextIntlClientProvider>
       </body>
     </html>

src/app/[locale]/loading.tsx

@@ -0,0 +1,25 @@
+/**
+ * Loading skeleton for the [locale] segment. Shown during navigation
+ * while a server component fetches (the dashboard, for instance, does
+ * listTenants() + one K8s GET per provisioning row). Textless on
+ * purpose so it needs no translations and adds no layout shift.
+ */
+export default function LocaleLoading() {
+  return (
+    <div className="animate-pulse" aria-hidden="true">
+      <div className="mb-8">
+        <div className="h-7 w-48 rounded-md bg-surface-2" />
+        <div className="mt-4 h-4 w-72 rounded bg-surface-1" />
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-28 rounded-xl border border-border bg-surface-1"
+          />
+        ))}
+      </div>
+      <span className="sr-only">Loading…</span>
+    </div>
+  );
+}

src/app/[locale]/login/page.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { signIn } from "next-auth/react";
-import { useTranslations } from "next-intl";
-import Link from "next/link";
+import { useTranslations, useLocale } from "next-intl";
+import { Link, getPathname } from "@/i18n/navigation";
 
 export default function LoginPage() {
   const t = useTranslations("login");
+  const locale = useLocale();
 
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-surface-0">
@@ -39,7 +40,14 @@ export default function LoginPage() {
           </p>
 
           <button
-            onClick={() => signIn("zitadel", { callbackUrl: "/dashboard" })}
+            onClick={() =>
+              signIn("zitadel", {
+                // Preserve the active locale across the OIDC round-trip.
+                // A bare "/dashboard" would resolve to the default (de)
+                // locale on return; getPathname prefixes it as needed.
+                callbackUrl: getPathname({ href: "/dashboard", locale }),
+              })
+            }
             className="
               w-full py-3 px-4 rounded-lg font-medium text-sm
               bg-accent text-surface-0 cursor-pointer

src/app/[locale]/not-found.tsx

@@ -0,0 +1,34 @@
+import { getTranslations } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
+
+/**
+ * 404 for the [locale] segment. Triggered by notFound() calls in pages
+ * below the locale layout. (A notFound() thrown by the locale layout
+ * itself — e.g. an unknown locale — resolves to the framework default,
+ * which is acceptable for that narrow case.)
+ */
+export default async function LocaleNotFound() {
+  const t = await getTranslations("errors");
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-5">
+      <div className="w-full max-w-md text-center">
+        <div className="font-display text-5xl font-semibold text-accent mb-4 tabular-nums">
+          404
+        </div>
+        <h1 className="font-display text-xl font-semibold text-text-primary mb-2">
+          {t("notFoundTitle")}
+        </h1>
+        <p className="text-sm text-text-secondary mb-6">
+          {t("notFoundDescription")}
+        </p>
+        <Link
+          href="/dashboard"
+          className="inline-flex py-2 px-4 rounded-lg bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors"
+        >
+          {t("backToDashboard")}
+        </Link>
+      </div>
+    </div>
+  );
+}

src/app/[locale]/page.tsx

@@ -1,5 +1,13 @@
-import { redirect } from "next/navigation";
+import { redirect } from "@/i18n/navigation";
 
-export default function RootPage() {
-  redirect("/dashboard");
+export default async function RootPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  // Locale-aware redirect: a bare next/navigation redirect("/dashboard")
+  // drops the prefix and lands non-default-locale users on the German
+  // dashboard. The i18n redirect prefixes per the active locale.
+  const { locale } = await params;
+  redirect({ href: "/dashboard", locale });
 }

src/app/[locale]/register/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, forwardRef } from "react";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
+import { useRouter, Link } from "@/i18n/navigation";
 import { Card } from "@/components/ui/card";
 
 type FormState = "idle" | "submitting" | "success" | "error";
@@ -50,6 +50,30 @@ export default function RegisterPage() {
   const [state, setState] = useState<FormState>("idle");
   const [error, setError] = useState("");
 
+  // Radiogroup keyboard support. `role="radio"` requires roving
+  // tabindex (one tab stop) + arrow-key navigation between options —
+  // native buttons don't move focus on arrows. The selected card is
+  // the tab stop; when nothing is selected yet the first card is
+  // focusable so keyboard users can enter the group.
+  const TYPES: AccountType[] = ["personal", "company"];
+  const cardRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const rovingTabIndex = (type: AccountType, index: number) =>
+    accountType === type || (accountType === null && index === 0) ? 0 : -1;
+
+  const handleCardKeyDown = (e: React.KeyboardEvent, index: number) => {
+    let next: number | null = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      next = (index + 1) % TYPES.length;
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      next = (index - 1 + TYPES.length) % TYPES.length;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    setAccountType(TYPES[next]);
+    cardRefs.current[next]?.focus();
+  };
+
   const isPersonal = accountType === "personal";
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -120,7 +144,7 @@ export default function RegisterPage() {
           </p>
           <button
             onClick={() => router.push("/login")}
-            className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+            className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
           >
             {t("goToLogin")}
           </button>
@@ -146,8 +170,13 @@ export default function RegisterPage() {
           className="grid grid-cols-2 gap-3 mb-6 animate-in animate-in-delay-1"
         >
           <AccountTypeCard
+            ref={(el) => {
+              cardRefs.current[0] = el;
+            }}
             selected={accountType === "personal"}
             onClick={() => setAccountType("personal")}
+            tabIndex={rovingTabIndex("personal", 0)}
+            onKeyDown={(e) => handleCardKeyDown(e, 0)}
             label={t("personalCardTitle")}
             description={t("personalCardDescription")}
             icon={
@@ -168,8 +197,13 @@ export default function RegisterPage() {
             }
           />
           <AccountTypeCard
+            ref={(el) => {
+              cardRefs.current[1] = el;
+            }}
             selected={accountType === "company"}
             onClick={() => setAccountType("company")}
+            tabIndex={rovingTabIndex("company", 1)}
+            onKeyDown={(e) => handleCardKeyDown(e, 1)}
             label={t("companyCardTitle")}
             description={t("companyCardDescription")}
             icon={
@@ -270,7 +304,7 @@ export default function RegisterPage() {
               <button
                 type="submit"
                 disabled={state === "submitting"}
-                className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {state === "submitting" ? tCommon("loading") : t("submit")}
               </button>
@@ -278,12 +312,12 @@ export default function RegisterPage() {
 
             <p className="text-xs text-text-muted text-center mt-4">
               {t("hasAccount")}{" "}
-              <a
+              <Link
                 href="/login"
                 className="text-accent hover:text-accent-dim transition-colors"
               >
                 {tCommon("login")}
-              </a>
+              </Link>
             </p>
           </Card>
         )}
@@ -305,41 +339,42 @@ export default function RegisterPage() {
  * and text colours intensify when selected to give a clear "this one
  * is on" signal beyond just the border colour.
  */
-function AccountTypeCard({
-  selected,
-  onClick,
-  label,
-  description,
-  icon,
-}: {
-  selected: boolean;
-  onClick: () => void;
-  label: string;
-  description: string;
-  icon: React.ReactNode;
-}) {
+const AccountTypeCard = forwardRef<
+  HTMLButtonElement,
+  {
+    selected: boolean;
+    onClick: () => void;
+    label: string;
+    description: string;
+    icon: React.ReactNode;
+    tabIndex: number;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+  }
+>(function AccountTypeCard(
+  { selected, onClick, label, description, icon, tabIndex, onKeyDown },
+  ref
+) {
   return (
     <button
+      ref={ref}
       type="button"
       role="radio"
       aria-checked={selected}
+      tabIndex={tabIndex}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       className={`text-left rounded-xl border p-4 transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 ${
         selected
           ? "border-accent bg-accent/10"
           : "border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-3/30"
       }`}
     >
-      <div
-        className={`mb-2 ${
-          selected ? "text-accent" : "text-text-muted"
-        }`}
-      >
+      <div className={`mb-2 ${selected ? "text-accent" : "text-text-muted"}`}>
         {icon}
       </div>
       <div
         className={`text-sm font-semibold mb-0.5 ${
-          selected ? "text-text-primary" : "text-text-primary"
+          selected ? "text-text-primary" : "text-text-secondary"
         }`}
       >
         {label}
@@ -347,4 +382,4 @@ function AccountTypeCard({
       <div className="text-xs text-text-muted leading-snug">{description}</div>
     </button>
   );
-}
+});

src/app/[locale]/settings/page.tsx

@@ -14,6 +14,11 @@ import { Card } from "@/components/ui/card";
  * Access: any authenticated user (the cards themselves gate further;
  * non-owner users would not see "Billing" as actionable, etc.).
  */
+export async function generateMetadata() {
+  const t = await getTranslations("common");
+  return { title: t("settings") };
+}
+
 export default async function SettingsPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");

src/app/[locale]/support/page.tsx

@@ -24,6 +24,11 @@ import { TicketCategoryLabel } from "@/components/support/ticket-category-label"
  * having recent activity, but we don't sort by status; that's a
  * filter the admin can add later if the queue grows.
  */
+export async function generateMetadata() {
+  const t = await getTranslations("common");
+  return { title: t("support") };
+}
+
 export default async function SupportListPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");
@@ -48,7 +53,7 @@ export default async function SupportListPage() {
         {!user.isPlatform && (
           <Link
             href="/support/new"
-            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors"
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors"
           >
             {t("newTicket")}
           </Link>

src/app/[locale]/team/page.tsx

@@ -17,6 +17,11 @@ import { InviteForm } from "@/components/team/invite-form";
  * `<TeamList>` and `<InviteForm>` client components handle live
  * updates after invites and refreshes.
  */
+export async function generateMetadata() {
+  const t = await getTranslations("common");
+  return { title: t("team") };
+}
+
 export default async function TeamPage() {
   const user = await getSessionUser();
   if (!user) redirect("/login");

src/app/global-error.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Last-resort boundary for errors thrown in the root layout itself
+ * (before the locale layout / intl provider mount). It replaces the
+ * entire document, so it must render its own <html>/<body> and cannot
+ * use translations or rely on the app stylesheet being applied — styles
+ * are inlined with the palette's hex values so it renders correctly in
+ * isolation. Everything below the locale layout is handled by
+ * [locale]/error.tsx instead; this should almost never be seen.
+ */
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("Portal global error:", error);
+  }, [error]);
+
+  return (
+    <html lang="en" className="dark">
+      <body
+        style={{
+          margin: 0,
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#0a0c10",
+          color: "#e8ecf4",
+          fontFamily: "system-ui, sans-serif",
+          padding: "20px",
+        }}
+      >
+        <div style={{ maxWidth: "28rem", textAlign: "center" }}>
+          <h1 style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 0.5rem" }}>
+            Something went wrong
+          </h1>
+          <p style={{ fontSize: "0.875rem", color: "#8892a4", margin: "0 0 1.5rem" }}>
+            An unexpected error occurred. Please try again.
+          </p>
+          {error?.digest && (
+            <p
+              style={{
+                fontSize: "11px",
+                fontFamily: "monospace",
+                color: "#565e6e",
+                margin: "0 0 1.5rem",
+              }}
+            >
+              {error.digest}
+            </p>
+          )}
+          <button
+            onClick={reset}
+            style={{
+              padding: "0.5rem 1rem",
+              borderRadius: "0.5rem",
+              border: "none",
+              background: "#00d4aa",
+              color: "#0a0c10",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              cursor: "pointer",
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

src/components/admin/admin-panel.tsx

@@ -246,7 +246,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
         >
           {t("requests")}
           {pendingCount > 0 && tab !== "requests" && (
-            <span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[10px] font-bold bg-accent text-white rounded-full">
+            <span className="ml-1.5 inline-flex items-center justify-center h-4 min-w-[16px] px-1 text-[10px] font-bold bg-accent text-surface-0 rounded-full">
               {pendingCount}
             </span>
           )}
@@ -308,7 +308,7 @@ export function AdminPanel({ initialTenants }: AdminPanelProps) {
                 onClick={() => setFilter(f)}
                 className={`px-3 py-1 text-xs rounded-full transition-colors ${
                   filter === f
-                    ? "bg-accent text-white"
+                    ? "bg-accent text-surface-0"
                     : "bg-surface-2 text-text-muted hover:text-text-secondary border border-border"
                 }`}
               >

src/components/admin/billing/custom-invoice-editor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useMemo, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Card, CardHeader } from "@/components/ui/card";
 import type {
@@ -336,6 +336,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
       <Card>
         <CardHeader>{t("editorLinesHeading")}</CardHeader>
         <div className="p-4">
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -420,6 +421,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
               })}
             </tbody>
           </table>
+          </div>
           <div className="flex gap-2 mt-3">
             <button
               onClick={addLine}
@@ -525,7 +527,7 @@ export function CustomInvoiceEditor({ draft, orgBilling }: Props) {
           <button
             onClick={issue}
             disabled={busy !== null || !canIssue}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
             type="button"
           >
             {busy === "issue" ? t("issuing") : t("editorIssueBtn")}

src/components/admin/billing/draft-list.tsx

@@ -57,7 +57,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
           <p className="text-text-secondary mb-4">{t("draftsEmpty")}</p>
           <Link
             href="/admin/billing/invoices/new"
-            className="inline-block px-4 py-2 rounded-md bg-accent text-white text-sm"
+            className="inline-block px-4 py-2 rounded-md bg-accent text-surface-0 text-sm"
           >
             {t("newInvoiceBtn")}
           </Link>
@@ -71,11 +71,12 @@ export function DraftList({ drafts, orgNameMap }: Props) {
       <div className="flex justify-end p-3 border-b border-border">
         <Link
           href="/admin/billing/invoices/new"
-          className="inline-block px-3 py-1.5 rounded-md bg-accent text-white text-sm"
+          className="inline-block px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm"
         >
           {t("newInvoiceBtn")}
         </Link>
       </div>
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -140,6 +141,7 @@ export function DraftList({ drafts, orgNameMap }: Props) {
           })}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/admin/billing/generate-form.tsx

@@ -216,7 +216,7 @@ export function GenerateForm({ orgs }: Props) {
                 <button
                   onClick={commit}
                   disabled={busy}
-                  className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+                  className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
                 >
                   {busy ? t("saving") : t("commitBtn")}
                 </button>
@@ -265,6 +265,7 @@ function DraftPreview({ draft }: { draft: InvoiceDraft }) {
         </div>
       )}
 
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -323,6 +324,7 @@ function DraftPreview({ draft }: { draft: InvoiceDraft }) {
           )}
         </tbody>
       </table>
+      </div>
 
       <div className="mt-4 pt-3 border-t border-border space-y-1 text-sm">
         <div className="flex justify-between">

src/components/admin/billing/invoice-detail-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, Fragment } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Card, CardHeader } from "@/components/ui/card";
 import type { CreditNote, InvoiceDetail, InvoiceStatus } from "@/types";
@@ -247,7 +247,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
                 <button
                   onClick={() => setNoteOpen(true)}
                   disabled={busyAction !== null}
-                  className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+                  className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
                 >
                   {t("markPaidBtn")}
                 </button>
@@ -264,7 +264,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
                   <button
                     onClick={markPaid}
                     disabled={busyAction !== null}
-                    className="px-3 py-1.5 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+                    className="px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
                   >
                     {busyAction === "mark-paid" ? t("saving") : t("confirm")}
                   </button>
@@ -463,6 +463,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
       {creditNotes.length > 0 && (
         <Card>
           <CardHeader>{t("creditNotesPanelTitle")}</CardHeader>
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -518,12 +519,14 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
               ))}
             </tbody>
           </table>
+          </div>
         </Card>
       )}
 
       {/* Lines */}
       <Card>
         <CardHeader>{t("lineItemsTitle")}</CardHeader>
+        <div className="overflow-x-auto">
         <table className="w-full text-sm">
           <thead className="text-xs text-text-muted text-left">
             <tr>
@@ -572,6 +575,7 @@ export function InvoiceDetailView({ detail, creditNotes = [] }: Props) {
             })}
           </tbody>
         </table>
+        </div>
         <div className="mt-4 pt-3 border-t border-border space-y-1 text-sm">
           <div className="flex justify-between">
             <span className="text-text-muted">{t("subtotal")}</span>

src/components/admin/billing/invoices-table.tsx

@@ -112,7 +112,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
             </Link>
             <Link
               href="/admin/billing/invoices/new"
-              className="px-3 py-1.5 rounded-md bg-accent text-white text-sm"
+              className="px-3 py-1.5 rounded-md bg-accent text-surface-0 text-sm"
             >
               + {t("newInvoiceBtn")}
             </Link>
@@ -126,6 +126,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
             {t("noInvoicesFound")}
           </p>
         ) : (
+          <div className="overflow-x-auto">
           <table className="w-full text-sm">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -178,6 +179,7 @@ export function InvoicesTable({ initialInvoices }: Props) {
               ))}
             </tbody>
           </table>
+          </div>
         )}
       </Card>
     </div>

src/components/admin/billing/new-invoice-form.tsx

@@ -155,7 +155,7 @@ export function NewInvoiceForm({ orgs }: Props) {
           <button
             onClick={onSubmit}
             disabled={busy || !orgId || !selected?.hasBillingAddress}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
           >
             {busy ? t("creating") : t("newInvoiceContinueBtn")}
           </button>

src/components/admin/billing/org-payment-mode-list.tsx

@@ -76,6 +76,7 @@ export function OrgPaymentModeList({ orgs }: Props) {
           {error}
         </div>
       )}
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -153,6 +154,7 @@ export function OrgPaymentModeList({ orgs }: Props) {
           ))}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/admin/billing/pricing-editor.tsx

@@ -236,7 +236,7 @@ export function PricingEditor({
             <button
               type="submit"
               disabled={savingPricing}
-              className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+              className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
             >
               {savingPricing ? t("saving") : t("save")}
             </button>
@@ -255,6 +255,7 @@ export function PricingEditor({
         <p className="text-sm text-text-muted mb-4">{t("skillPricingDesc")}</p>
 
         {initialSkillPricing.length > 0 ? (
+          <div className="overflow-x-auto">
           <table className="w-full text-sm mb-6">
             <thead className="text-xs text-text-muted text-left">
               <tr>
@@ -319,6 +320,7 @@ export function PricingEditor({
               })}
             </tbody>
           </table>
+          </div>
         ) : (
           <p className="text-sm text-text-muted italic mb-4">{t("noSkillsPriced")}</p>
         )}
@@ -401,7 +403,7 @@ export function PricingEditor({
           <button
             type="submit"
             disabled={addingSkill || !newSkillId}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
           >
             {addingSkill ? t("saving") : t("add")}
           </button>
@@ -473,7 +475,7 @@ function InlinePriceEditor({
           }
         }}
         disabled={busy}
-        className="text-xs px-2 py-1 bg-accent text-white rounded"
+        className="text-xs px-2 py-1 bg-accent text-surface-0 rounded"
       >
         {busy ? "…" : "✓"}
       </button>

src/components/admin/cron/cron-controls.tsx

@@ -147,7 +147,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
           <button
             onClick={triggerIssue}
             disabled={busy !== null}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
           >
             {busy === "issue" ? t("running") : t("runIssueNow")}
           </button>
@@ -165,7 +165,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
           <button
             onClick={triggerReminders}
             disabled={busy !== null}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
           >
             {busy === "reminders" ? t("running") : t("runRemindersNow")}
           </button>
@@ -194,6 +194,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
               {t("noRunsYet")}
             </p>
           ) : (
+            <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead className="text-xs text-text-muted text-left">
                 <tr>
@@ -241,6 +242,7 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
                 ))}
               </tbody>
             </table>
+            </div>
           )}
         </Card>
       </section>

src/components/admin/openclaw-admin-panel.tsx

@@ -107,7 +107,7 @@ export function OpenClawAdminPanel({ initialDefaults, tenants }: Props) {
               <button
                 type="submit"
                 disabled={savingDefault}
-                className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+                className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
               >
                 {savingDefault ? tCommon("loading") : t("saveDefault")}
               </button>
@@ -265,7 +265,7 @@ function TenantOverrideRow({
               type="button"
               onClick={() => submit(false)}
               disabled={saving || !tag.trim()}
-              className="text-xs px-3 py-1.5 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+              className="text-xs px-3 py-1.5 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
             >
               {saving ? tCommon("loading") : t("saveOverride")}
             </button>

src/components/admin/skills/pending-skill-requests.tsx

@@ -99,6 +99,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
           {error}
         </div>
       )}
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -146,7 +147,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
                       <button
                         onClick={() => approve(row.id)}
                         disabled={busyId !== null}
-                        className="text-xs px-3 py-1.5 rounded-md bg-accent text-white disabled:opacity-50"
+                        className="text-xs px-3 py-1.5 rounded-md bg-accent text-surface-0 disabled:opacity-50"
                       >
                         {busyId === row.id ? t("working") : t("approveBtn")}
                       </button>
@@ -199,6 +200,7 @@ export function PendingSkillRequests({ initialRows }: Props) {
           ))}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/billing/customer-credit-note-list.tsx

@@ -36,6 +36,7 @@ export function CustomerCreditNoteList({ creditNotes }: Props) {
 
   return (
     <Card>
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -96,6 +97,7 @@ export function CustomerCreditNoteList({ creditNotes }: Props) {
           ))}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/billing/customer-invoice-detail.tsx

@@ -107,6 +107,7 @@ export function CustomerInvoiceDetail({ invoice, lines }: Props) {
       </Card>
 
       <Card>
+        <div className="overflow-x-auto">
         <table className="w-full text-sm">
           <thead className="text-xs text-text-muted text-left">
             <tr>
@@ -160,6 +161,7 @@ export function CustomerInvoiceDetail({ invoice, lines }: Props) {
             </tr>
           </tfoot>
         </table>
+        </div>
       </Card>
     </div>
   );

src/components/billing/customer-invoice-list.tsx

@@ -46,6 +46,7 @@ export function CustomerInvoiceList({ invoices }: Props) {
 
   return (
     <Card>
+      <div className="overflow-x-auto">
       <table className="w-full text-sm">
         <thead className="text-xs text-text-muted text-left">
           <tr>
@@ -104,6 +105,7 @@ export function CustomerInvoiceList({ invoices }: Props) {
           ))}
         </tbody>
       </table>
+      </div>
     </Card>
   );
 }

src/components/billing/pay-invoice-button.tsx

@@ -50,7 +50,7 @@ export function PayInvoiceButton({ invoiceNumber }: Props) {
       <button
         onClick={onClick}
         disabled={busy}
-        className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+        className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
       >
         {busy ? t("redirectingToStripe") : t("payWithCard")}
       </button>

src/components/billing/running-total-widget.tsx

@@ -86,7 +86,7 @@ export function RunningTotalWidget({ isOwner }: Props) {
         {noConfig && isOwner && (
           <Link
             href="/settings/billing"
-            className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors"
+            className="inline-block mt-2 px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors"
           >
             {t("configureBillingCta")}
           </Link>
@@ -160,6 +160,7 @@ export function RunningTotalWidget({ isOwner }: Props) {
           <summary className="cursor-pointer text-text-muted hover:text-text-secondary">
             {t("breakdownToggle", { count: draft.lines.length })}
           </summary>
+          <div className="overflow-x-auto">
           <table className="w-full mt-2 text-xs">
             <tbody>
               {draft.lines.map((ln, i) => (
@@ -188,6 +189,7 @@ export function RunningTotalWidget({ isOwner }: Props) {
               </tr>
             </tbody>
           </table>
+          </div>
         </details>
       )}
       <p className="text-[10px] text-text-muted mt-3 italic">{t("draftNote")}</p>

src/components/channel-users/channel-users.tsx

@@ -328,7 +328,7 @@ export function ChannelUsers({
                 <button
                   onClick={() => handleAdd(channel)}
                   disabled={saving || !inputValues[channel]?.trim()}
-                  className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-4 py-2 text-sm font-medium bg-accent text-surface-0 rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   {saving ? "…" : t("add")}
                 </button>

src/components/dashboard/budget-editable-card.tsx

@@ -263,7 +263,7 @@ export function BudgetEditableCard({
               <button
                 type="submit"
                 disabled={saving}
-                className="text-sm px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+                className="text-sm px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
               >
                 {saving ? tCommon("loading") : tCommon("save")}
               </button>

src/components/layout/nav-shell.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { useTranslations } from "next-intl";
 import { signOut, useSession } from "next-auth/react";
 import { usePathname } from "@/i18n/navigation";
 import { Link } from "@/i18n/navigation";
 import { SessionProvider } from "next-auth/react";
+import type { Session } from "next-auth";
 import { LanguageSwitcher } from "@/components/ui/language-switcher";
 
 function NavBar() {
@@ -13,6 +15,15 @@ function NavBar() {
   const pathname = usePathname();
   const user = (session as any)?.platformUser;
 
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  // Close the mobile menu on any navigation. Without this the panel
+  // would stay open across route changes (the component doesn't
+  // unmount — it lives in the layout).
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [pathname]);
+
   // Hide the nav entirely on auth-only routes. These pages have no
   // session yet — showing "Dashboard" / "Sign Out" is misleading at
   // best (the buttons would 401 or redirect-loop). Keep this list
@@ -21,6 +32,47 @@ function NavBar() {
   const isAuthRoute = pathname === "/login" || pathname === "/register";
   if (isAuthRoute) return null;
 
+  // ------------------------------------------------------------------
+  // Visibility gates — computed once, shared by the desktop nav and the
+  // mobile panel so the two can never diverge.
+  //
+  //  - team:     owner+platform only AND not a personal account (Bug 8 —
+  //              personal accounts have no team). Matches `canMutate` /
+  //              `user.isPersonal === false` server-side.
+  //  - settings: anyone who can mutate org-level state (owners + platform).
+  //              `user`-role customers don't see it (canMutate is false).
+  //  - billing / support: any signed-in user (org-scoped server-side).
+  //  - admin:    platform only.
+  // ------------------------------------------------------------------
+  const isOwner =
+    user && Array.isArray(user.roles) && user.roles.includes("owner");
+  const showTeam = !!user && !user.isPersonal && (user.isPlatform || isOwner);
+  const showSettings = !!user && (user.isPlatform || isOwner);
+  const showBilling = !!user;
+  const showSupport = !!user;
+  const showAdmin = !!user?.isPlatform;
+
+  // Active-state helper. Dashboard/Admin previously used exact `===`,
+  // so sub-routes (/dashboard/new, /admin/billing, …) showed no active
+  // item. startsWith keeps the parent lit on its children too.
+  const isActive = (href: string) =>
+    pathname === href || pathname.startsWith(`${href}/`);
+
+  const links = [
+    { href: "/dashboard", label: t("dashboard"), show: !!user },
+    { href: "/team", label: t("team"), show: showTeam },
+    { href: "/settings", label: t("settings"), show: showSettings },
+    { href: "/billing", label: t("billing"), show: showBilling },
+    { href: "/support", label: t("support"), show: showSupport },
+    { href: "/admin", label: t("admin"), show: showAdmin },
+  ].filter((l) => l.show);
+
+  const displayName = user
+    ? user.isPersonal
+      ? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
+      : user.orgName
+    : "";
+
   return (
     <header className="sticky top-0 z-50 border-b border-border bg-surface-1/80 backdrop-blur-md">
       <div className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5">
@@ -40,98 +92,96 @@ function NavBar() {
             </span>
           </Link>
 
-          {/* Nav links */}
+          {/* Desktop nav links */}
           <nav className="hidden sm:flex items-center gap-1 ml-2">
-            <NavLink href="/dashboard" active={pathname === "/dashboard"}>
-              {t("dashboard")}
-            </NavLink>
-            {/* Slice 7: /team is owner+platform only AND personal
-                accounts are excluded — they have no team to manage
-                (Bug 8). Match server-side gates (`canMutate`,
-                `user.isPersonal === false`). The roles array carries
-                either "owner" or "user" for customer sessions;
-                isPlatform covers the platform side. */}
-            {user &&
-              !user.isPersonal &&
-              (user.isPlatform ||
-                (Array.isArray(user.roles) && user.roles.includes("owner"))) && (
-                <NavLink href="/team" active={pathname === "/team"}>
-                  {t("team")}
-                </NavLink>
-              )}
-            {/* Bug 35: /settings is shown to anyone who can mutate org-level
-                state — owners and platform admins. Personal accounts also
-                see it; their billing page is optional but the entry point
-                exists for consistency. `user`-role customers don't see it
-                (canMutate is false). */}
-            {user &&
-              (user.isPlatform ||
-                (Array.isArray(user.roles) && user.roles.includes("owner"))) && (
-                <NavLink
-                  href="/settings"
-                  active={pathname.startsWith("/settings")}
-                >
-                  {t("settings")}
-                </NavLink>
-              )}
-            {/* Phase 3: Billing visible to anyone signed in. The
-                page is org-scoped server-side — non-owner members
-                see the same invoice history their owner does, but
-                actions like "configure billing details" are gated
-                separately on the settings page. Personal accounts
-                see their own (single-tenant) invoices. */}
-            {user && (
-              <NavLink
-                href="/billing"
-                active={pathname.startsWith("/billing")}
-              >
-                {t("billing")}
+            {links.map((l) => (
+              <NavLink key={l.href} href={l.href} active={isActive(l.href)}>
+                {l.label}
               </NavLink>
-            )}
-            {/* Feature 5: Support is available to every signed-in
-                user. Customers see their own tickets only; platform
-                admins see the queue. */}
-            {user && (
-              <NavLink
-                href="/support"
-                active={pathname.startsWith("/support")}
-              >
-                {t("support")}
-              </NavLink>
-            )}
-            {user?.isPlatform && (
-              <NavLink href="/admin" active={pathname === "/admin"}>
-                {t("admin")}
-              </NavLink>
-            )}
+            ))}
           </nav>
         </div>
 
         {/* Right side */}
         <div className="flex items-center gap-4">
           {user && (
-            // For personal accounts the orgName is opaque
-            // ("personal-3f2a8b1c") or a synthetic legacy
-            // "Name (Personal)" — neither is what we want in the nav.
-            // Show the user's display name instead. The detection logic
-            // and fallback chain live in `lib/personal-org.ts`; keeping
-            // a thin inline branch here avoids importing a server-only
-            // helper into a client component.
             <span className="hidden md:inline text-xs text-text-secondary font-mono">
-              {user.isPersonal
-                ? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
-                : user.orgName}
+              {displayName}
             </span>
           )}
           <LanguageSwitcher />
           <button
             onClick={() => signOut({ callbackUrl: "/login" })}
-            className="text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer"
+            className="hidden sm:inline text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer"
           >
             {t("logout")}
           </button>
+
+          {/* Mobile menu toggle — only shown below the `sm` breakpoint,
+              where the desktop nav and logout button are hidden. */}
+          {user && (
+            <button
+              type="button"
+              onClick={() => setMobileOpen((v) => !v)}
+              aria-expanded={mobileOpen}
+              aria-controls="mobile-nav"
+              aria-label={t("menu")}
+              className="sm:hidden inline-flex items-center justify-center h-8 w-8 -mr-1 rounded-md text-text-secondary hover:text-text-primary hover:bg-surface-2 transition-colors cursor-pointer"
+            >
+              <svg
+                className="h-5 w-5"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+              >
+                {mobileOpen ? (
+                  <path d="M6 6l12 12M18 6L6 18" />
+                ) : (
+                  <path d="M4 7h16M4 12h16M4 17h16" />
+                )}
+              </svg>
+            </button>
+          )}
         </div>
       </div>
+
+      {/* Mobile panel */}
+      {user && mobileOpen && (
+        <nav
+          id="mobile-nav"
+          className="sm:hidden border-t border-border bg-surface-1 px-3 py-3"
+        >
+          <div className="flex flex-col gap-1">
+            {links.map((l) => (
+              <Link
+                key={l.href}
+                href={l.href}
+                className={`px-3 py-2.5 rounded-md text-sm font-medium transition-colors ${
+                  isActive(l.href)
+                    ? "bg-surface-3 text-text-primary"
+                    : "text-text-secondary hover:text-text-primary hover:bg-surface-2"
+                }`}
+              >
+                {l.label}
+              </Link>
+            ))}
+          </div>
+
+          <div className="mt-3 pt-3 border-t border-border flex items-center justify-between px-3">
+            <span className="text-xs text-text-secondary font-mono truncate">
+              {displayName}
+            </span>
+            <button
+              onClick={() => signOut({ callbackUrl: "/login" })}
+              className="text-xs font-medium text-text-secondary hover:text-error transition-colors cursor-pointer shrink-0 ml-3"
+            >
+              {t("logout")}
+            </button>
+          </div>
+        </nav>
+      )}
     </header>
   );
 }
@@ -162,9 +212,19 @@ function NavLink({
   );
 }
 
-export function NavShell({ children }: { children: React.ReactNode }) {
+export function NavShell({
+  children,
+  session,
+}: {
+  children: React.ReactNode;
+  // Server-resolved session passed down from the locale layout. Seeding
+  // SessionProvider with it means useSession() is populated on the first
+  // client render, so the nav links render immediately instead of
+  // popping in after the client-side session fetch (CLS / flash).
+  session: Session | null;
+}) {
   return (
-    <SessionProvider>
+    <SessionProvider session={session}>
       <NavBar />
       <main className="mx-auto max-w-6xl px-5 py-8">{children}</main>
     </SessionProvider>

src/components/onboarding/onboarding-flow.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRouter } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { OnboardingWizard } from "./wizard";
 import type { OrgBilling } from "@/types";
 

src/components/onboarding/provisioning-status.tsx

@@ -489,7 +489,7 @@ export function ProvisioningStatus({ requestId, canAct }: Props) {
           </p>
           <button
             onClick={() => window.location.reload()}
-            className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+            className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
           >
             {t("goToDashboard")}
           </button>

src/components/onboarding/wizard.tsx

@@ -606,7 +606,7 @@ export function OnboardingWizard({
           <div className="flex justify-end">
             <button
               onClick={goNext}
-              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+              className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
             >
               {t("getStarted")}
             </button>
@@ -994,7 +994,7 @@ export function OnboardingWizard({
             <button
               onClick={goNext}
               disabled={!packageCredentialsValid()}
-              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {t("next")}
             </button>
@@ -1182,7 +1182,7 @@ export function OnboardingWizard({
             </button>
             <button
               onClick={goNext}
-              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+              className="py-2 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
             >
               {t("next")}
             </button>
@@ -1397,7 +1397,7 @@ export function OnboardingWizard({
             <button
               onClick={handleSubmit}
               disabled={submitting}
-              className="py-2.5 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              className="py-2.5 px-6 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {submitting
                 ? tCommon("loading")

src/components/packages/skill-cost-dialog.tsx

@@ -104,7 +104,7 @@ export function SkillCostDialog({
           <button
             onClick={onConfirm}
             disabled={busy}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
           >
             {busy ? t("confirming") : t("confirm")}
           </button>

src/components/settings/billing-form.tsx

@@ -227,7 +227,7 @@ export function BillingSettingsForm({ initial, isPersonal }: Props) {
           <button
             onClick={submit}
             disabled={busy}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
           >
             {busy ? t("saving") : initial ? t("saveChanges") : t("createBilling")}
           </button>

src/components/settings/billing-settings-form.tsx

@@ -268,7 +268,7 @@ export function BillingSettingsForm({
           <button
             type="submit"
             disabled={submitting}
-            className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+            className="ml-auto text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
           >
             {submitting ? tCommon("loading") : t("save")}
           </button>

src/components/settings/profile-form.tsx

@@ -153,7 +153,7 @@ export function ProfileSettingsForm({ initial, isPersonal, orgName }: Props) {
           <button
             onClick={submit}
             disabled={busy}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm font-medium hover:bg-accent-dim transition-colors disabled:opacity-50 cursor-pointer"
           >
             {busy ? t("saving") : t("saveChanges")}
           </button>

src/components/settings/saved-card-section.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 import { Card, CardHeader } from "@/components/ui/card";
 import type { OrgBillingConfig } from "@/types";
@@ -136,7 +137,7 @@ export function SavedCardSection({
           <button
             onClick={startSetup}
             disabled={busy !== null}
-            className="px-4 py-2 rounded-md bg-accent text-white text-sm disabled:opacity-50"
+            className="px-4 py-2 rounded-md bg-accent text-surface-0 text-sm disabled:opacity-50"
           >
             {busy === "setup" ? t("savedCardRedirecting") : t("savedCardSetupBtn")}
           </button>

src/components/support/ticket-create-form.tsx

@@ -119,7 +119,7 @@ export function TicketCreateForm() {
           <button
             type="submit"
             disabled={submitting}
-            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+            className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
           >
             {submitting ? tCommon("loading") : t("submitTicket")}
           </button>

src/components/support/ticket-thread.tsx

@@ -186,7 +186,7 @@ export function TicketThread({
             <button
               type="submit"
               disabled={submitting || closing || body.trim().length === 0}
-              className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-white hover:bg-accent/90 transition-colors disabled:opacity-50"
+              className="text-sm font-medium px-4 py-2 rounded-lg bg-accent text-surface-0 hover:bg-accent/90 transition-colors disabled:opacity-50"
             >
               {submitting ? tCommon("loading") : t("sendReply")}
             </button>

src/components/team/invite-form.tsx

@@ -141,7 +141,7 @@ export function InviteForm() {
       <button
         type="submit"
         disabled={state === "submitting"}
-        className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full py-2.5 px-4 bg-accent text-surface-0 text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
       >
         {state === "submitting" ? tCommon("loading") : t("inviteButton")}
       </button>

src/components/team/team-list.tsx

@@ -179,7 +179,7 @@ export function TeamList({
                       type="button"
                       onClick={() => saveEdit(m)}
                       disabled={submitting || !m.authorizationId}
-                      className="text-xs px-2.5 py-1 rounded-md bg-accent text-white hover:bg-accent-dim transition-colors disabled:opacity-50"
+                      className="text-xs px-2.5 py-1 rounded-md bg-accent text-surface-0 hover:bg-accent-dim transition-colors disabled:opacity-50"
                     >
                       {t("save")}
                     </button>

src/components/tenants/assigned-users-panel.tsx

@@ -218,7 +218,7 @@ export function AssignedUsersPanel({ tenantName, canEdit }: Props) {
               <button
                 onClick={handleAssign}
                 disabled={busy || !pickedUserId}
-                className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="px-4 py-2 text-sm font-medium bg-accent text-surface-0 rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {busy ? "…" : t("assign")}
               </button>

src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from "react";
+
+/**
+ * Shared button primitive.
+ *
+ * Why this exists
+ * ---------------
+ * The accent fill (#00d4aa) is bright; white text on it measures ~1.9:1,
+ * which fails WCAG even for large/UI text. Dark text (surface-0) on the
+ * same accent is ~10:1. The codebase had ~40 hand-rolled accent buttons,
+ * most using `text-white`. This component centralises the correct token
+ * (`text-surface-0` on accent) so the contrast can't drift again — reach
+ * for `<Button>` instead of re-deriving the class string.
+ */
+
+type Variant = "primary" | "secondary" | "ghost" | "danger";
+type Size = "sm" | "md";
+
+const BASE =
+  "inline-flex items-center justify-center gap-1.5 font-medium rounded-lg " +
+  "transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 " +
+  "focus-visible:ring-accent/50 disabled:opacity-50 disabled:cursor-not-allowed";
+
+const VARIANTS: Record<Variant, string> = {
+  // surface-0 (dark) text — the contrast-correct pairing for the accent.
+  primary: "bg-accent text-surface-0 hover:bg-accent-dim shadow-sm shadow-accent/20",
+  secondary:
+    "bg-surface-2 text-text-primary border border-border hover:bg-surface-3 hover:border-border-active",
+  ghost: "text-text-secondary hover:text-text-primary hover:bg-surface-2",
+  danger: "bg-error text-surface-0 hover:opacity-90",
+};
+
+const SIZES: Record<Size, string> = {
+  sm: "text-xs px-3 py-1.5",
+  md: "text-sm px-4 py-2",
+};
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    { variant = "primary", size = "md", className = "", type = "button", ...rest },
+    ref
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={`${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
+        {...rest}
+      />
+    );
+  }
+);

src/components/ui/modal.tsx

@@ -16,6 +16,9 @@ interface Props {
   ariaLabel?: string;
 }
 
+const FOCUSABLE =
+  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+
 /**
  * Portal-based modal.
  *
@@ -25,45 +28,86 @@ interface Props {
  * ancestor's containing block, not the viewport, when ANY ancestor
  * has a `transform`, `perspective`, or `filter` applied. Our
  * `animate-in` utility sets `transform: translateY(0)` on a lot of
- * dashboard/tenant-detail containers (because of the fade-up
- * animation, which uses `animation-fill-mode: both` to keep the
- * transform on after the animation finishes). That broke modals
- * rendered as in-place children — they centred to the panel they
- * lived in, not to the page.
+ * dashboard/tenant-detail containers, which broke modals rendered as
+ * in-place children — they centred to the panel they lived in, not to
+ * the page. Rendering at `document.body` via `createPortal` escapes
+ * every containing-block ancestor and gives us true viewport coords.
  *
- * Rendering at `document.body` via `createPortal` escapes every
- * containing-block ancestor and gives us true viewport coordinates.
- *
- * UX details
- * ----------
- * - Backdrop click triggers `onClose`. (Bubbling check: only fires
- *   when the click target IS the backdrop, not the panel inside.)
- * - Escape key triggers `onClose`. Standard modal expectation.
- * - `body` overflow is locked while open so background content
- *   doesn't scroll behind the modal.
- * - Renders nothing on first paint server-side, then mounts on
- *   client. `useEffect` gating ensures `document.body` is available;
- *   without it Next.js SSR would throw on `document` reference.
+ * UX / a11y details
+ * -----------------
+ * - Backdrop click triggers `onClose` (only when the click target IS
+ *   the backdrop, not the panel inside).
+ * - Escape triggers `onClose`.
+ * - `body` overflow is locked while open so background content doesn't
+ *   scroll behind the modal.
+ * - Focus is moved into the panel on open, trapped within it while open
+ *   (Tab / Shift+Tab cycle), and restored to the previously focused
+ *   element on close — so keyboard and screen-reader users can't tab
+ *   out to the inert page behind the dialog.
  */
 export function Modal({ open, onClose, children, ariaLabel }: Props) {
   const closeRef = useRef(onClose);
   closeRef.current = onClose;
+  const panelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!open) return;
 
-    // Lock background scroll. Restore on unmount/close.
+    // Remember what had focus so we can restore it on close.
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+
+    // Lock background scroll.
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
 
+    // Move focus into the dialog — first focusable element, else the
+    // panel itself (it carries tabIndex={-1}).
+    const panel = panelRef.current;
+    const focusables = panel
+      ? Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE))
+      : [];
+    (focusables[0] ?? panel)?.focus();
+
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") closeRef.current();
+      if (e.key === "Escape") {
+        closeRef.current();
+        return;
+      }
+      if (e.key !== "Tab" || !panel) return;
+
+      // Re-query each time — modal content can change between tabs.
+      const items = Array.from(
+        panel.querySelectorAll<HTMLElement>(FOCUSABLE)
+      ).filter((el) => el.offsetParent !== null || el === document.activeElement);
+      if (items.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+
+      if (e.shiftKey) {
+        if (active === first || active === panel) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else if (active === last) {
+        e.preventDefault();
+        first.focus();
+      }
     };
+
     window.addEventListener("keydown", onKey);
 
     return () => {
       document.body.style.overflow = previousOverflow;
       window.removeEventListener("keydown", onKey);
+      // Restore focus to the trigger (if it's still in the document).
+      if (previouslyFocused && document.contains(previouslyFocused)) {
+        previouslyFocused.focus();
+      }
     };
   }, [open]);
 
@@ -72,15 +116,19 @@ export function Modal({ open, onClose, children, ariaLabel }: Props) {
 
   return createPortal(
     <div
-      role="dialog"
-      aria-modal="true"
-      aria-label={ariaLabel}
       className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
       onClick={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
     >
-      <div className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto">
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        className="bg-surface-1 border border-border rounded-xl p-6 max-w-md w-full max-h-[90vh] overflow-y-auto focus:outline-none"
+      >
         {children}
       </div>
     </div>,

src/messages/de.json

@@ -4,6 +4,7 @@
     "tagline": "KI-Plattform",
     "login": "Anmelden",
     "logout": "Abmelden",
+    "menu": "Menü",
     "dashboard": "Dashboard",
     "admin": "Admin",
     "loading": "Laden…",
@@ -963,5 +964,13 @@
     "saving": "Speichern…",
     "saved": "Gespeichert.",
     "missingRequired": "Vor- und Nachname sind erforderlich."
+  },
+  "errors": {
+    "title": "Etwas ist schiefgelaufen",
+    "description": "Beim Laden dieser Seite ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.",
+    "retry": "Erneut versuchen",
+    "backToDashboard": "Zurück zum Dashboard",
+    "notFoundTitle": "Seite nicht gefunden",
+    "notFoundDescription": "Die angeforderte Seite existiert nicht oder wurde verschoben."
   }
 }

src/messages/en.json

@@ -4,6 +4,7 @@
     "tagline": "AI Platform",
     "login": "Sign In",
     "logout": "Sign Out",
+    "menu": "Menu",
     "dashboard": "Dashboard",
     "admin": "Admin",
     "loading": "Loading…",
@@ -963,5 +964,13 @@
     "saving": "Saving…",
     "saved": "Saved.",
     "missingRequired": "First and last name are required."
+  },
+  "errors": {
+    "title": "Something went wrong",
+    "description": "An error occurred while loading this page. Please try again.",
+    "retry": "Try again",
+    "backToDashboard": "Back to dashboard",
+    "notFoundTitle": "Page not found",
+    "notFoundDescription": "The page you're looking for doesn't exist or has moved."
   }
 }

src/messages/fr.json

@@ -4,6 +4,7 @@
     "tagline": "Plateforme IA",
     "login": "Connexion",
     "logout": "Déconnexion",
+    "menu": "Menu",
     "dashboard": "Tableau de bord",
     "admin": "Admin",
     "loading": "Chargement…",
@@ -963,5 +964,13 @@
     "saving": "Enregistrement…",
     "saved": "Enregistré.",
     "missingRequired": "Le prénom et le nom sont obligatoires."
+  },
+  "errors": {
+    "title": "Une erreur est survenue",
+    "description": "Une erreur s'est produite lors du chargement de cette page. Veuillez réessayer.",
+    "retry": "Réessayer",
+    "backToDashboard": "Retour au tableau de bord",
+    "notFoundTitle": "Page introuvable",
+    "notFoundDescription": "La page que vous recherchez n'existe pas ou a été déplacée."
   }
 }

src/messages/it.json

@@ -4,6 +4,7 @@
     "tagline": "Piattaforma IA",
     "login": "Acceda",
     "logout": "Esci",
+    "menu": "Menu",
     "dashboard": "Dashboard",
     "admin": "Admin",
     "loading": "Caricamento…",
@@ -963,5 +964,13 @@
     "saving": "Salvataggio…",
     "saved": "Salvato.",
     "missingRequired": "Nome e cognome sono obbligatori."
+  },
+  "errors": {
+    "title": "Si è verificato un errore",
+    "description": "Si è verificato un errore durante il caricamento di questa pagina. Riprova.",
+    "retry": "Riprova",
+    "backToDashboard": "Torna alla dashboard",
+    "notFoundTitle": "Pagina non trovata",
+    "notFoundDescription": "La pagina che stai cercando non esiste o è stata spostata."
   }
 }