diff --git a/apps/web/app/admin/audit/[id]/page.tsx b/apps/web/app/admin/audit/[id]/page.tsx
index fbc2634a..e48e4130 100644
--- a/apps/web/app/admin/audit/[id]/page.tsx
+++ b/apps/web/app/admin/audit/[id]/page.tsx
@@ -9,6 +9,7 @@ import {
   formatAdminTimestamp,
 } from "@/components/admin-ui";
 import { requireOwnerUser } from "@/lib/auth";
+import { isRouteUuid } from "@/lib/input-validation";
 
 type AdminAuditDetailPageProps = {
   params: Promise<{ id: string }>;
@@ -50,6 +51,9 @@ export default async function AdminAuditDetailPage({
 }: AdminAuditDetailPageProps) {
   const ownerUser = await requireOwnerUser();
   const { id } = await params;
+  if (!isRouteUuid(id)) {
+    notFound();
+  }
   const event = await getAdminAuditEventById(ownerUser.id, id);
 
   if (!event) {
diff --git a/apps/web/app/admin/barcodes/[id]/page.tsx b/apps/web/app/admin/barcodes/[id]/page.tsx
index 8c8b60b6..34994996 100644
--- a/apps/web/app/admin/barcodes/[id]/page.tsx
+++ b/apps/web/app/admin/barcodes/[id]/page.tsx
@@ -14,6 +14,7 @@ import {
   updateAdminBarcodeProductAction,
 } from "@/lib/admin-actions";
 import { requireAdminUser } from "@/lib/auth";
+import { isRouteUuid } from "@/lib/input-validation";
 
 type AdminBarcodeDetailPageProps = {
   params: Promise<{ id: string }>;
@@ -29,6 +30,9 @@ export default async function AdminBarcodeDetailPage({
 }: AdminBarcodeDetailPageProps) {
   const adminUser = await requireAdminUser();
   const [{ id }, query] = await Promise.all([params, searchParams]);
+  if (!isRouteUuid(id)) {
+    notFound();
+  }
   const [barcode, audit] = await Promise.all([
     getAdminBarcodeProductById(adminUser.id, id),
     listAdminAuditEvents(adminUser.id, {
diff --git a/apps/web/app/admin/users/[userId]/page.tsx b/apps/web/app/admin/users/[userId]/page.tsx
index 253669cc..9de2680b 100644
--- a/apps/web/app/admin/users/[userId]/page.tsx
+++ b/apps/web/app/admin/users/[userId]/page.tsx
@@ -13,6 +13,7 @@ import {
 import { ConfirmSubmitButton } from "@/components/confirm-delete-button";
 import { changeUserRoleAction } from "@/lib/admin-actions";
 import { requireAdminUser } from "@/lib/auth";
+import { isRouteUuid } from "@/lib/input-validation";
 import { getTemplateMacroTotals } from "@/lib/template-macros";
 
 type AdminUserDetailPageProps = {
@@ -46,6 +47,9 @@ export default async function AdminUserDetailPage({
 }: AdminUserDetailPageProps) {
   const adminUser = await requireAdminUser();
   const [{ userId }, query] = await Promise.all([params, searchParams]);
+  if (!isRouteUuid(userId)) {
+    notFound();
+  }
   const detail = await getAdminUserDetail(adminUser.id, userId);
 
   if (!detail) {
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index ec34fab7..bd0e628c 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -8,6 +8,7 @@ import { LayoutNav } from "@/components/layout-nav";
 import { OfflineBanner } from "@/components/offline-banner";
 import { OrientationLock } from "@/components/orientation-lock";
 import { ServiceWorkerRegister } from "@/components/service-worker-register";
+import { getRequestTodayFromHeaders } from "@/lib/server-timezone";
 import {
   TIMEZONE_COOKIE_MAX_AGE_SECONDS,
   TIMEZONE_COOKIE_NAME,
@@ -83,7 +84,11 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const nonce = (await headers()).get(NONCE_HEADER) ?? undefined;
+  const requestHeaders = await headers();
+  const nonce = requestHeaders.get(NONCE_HEADER) ?? undefined;
+  // Stable per-request day snapshot for the bottom nav so SSR and the
+  // first client render agree; the browser corrects post-hydration.
+  const today = getRequestTodayFromHeaders(requestHeaders);
 
   return (
     <html
@@ -102,7 +107,7 @@ export default async function RootLayout({
         <ServiceWorkerRegister />
         <OfflineBanner />
         <Suspense fallback={null}>
-          <LayoutNav />
+          <LayoutNav todayStr={today} />
         </Suspense>
         {children}
       </body>
diff --git a/apps/web/app/library/page.tsx b/apps/web/app/library/page.tsx
index 3fc0dc2a..615242ed 100644
--- a/apps/web/app/library/page.tsx
+++ b/apps/web/app/library/page.tsx
@@ -1,24 +1,59 @@
-import { getRecipeSummaries, getTemplateSummaries, searchFoodProducts } from "@macro-tracker/db";
+import {
+  BackendError,
+  getRecipeSummaries,
+  getTemplateSummaries,
+  searchFoodProducts,
+  type BrowserFoodProduct,
+} from "@macro-tracker/db";
 
 import { LibraryShell } from "@/components/library-shell";
 import { toBrowserFoodProducts } from "@/lib/browser-product";
+import { validateSearchQuery } from "@/lib/input-validation";
 import { loadOnboardedPageContext } from "@/lib/page-context";
 
 type LibraryPageProps = {
   searchParams: Promise<{ q?: string; date?: string }>;
 };
 
+function isSearchValidationError(error: unknown) {
+  const code = (error as { code?: string } | null)?.code;
+  const name = (error as { name?: string } | null)?.name;
+  return (
+    code === "bad_request" &&
+    (error instanceof BackendError || name === "BackendError")
+  );
+}
+
 export default async function LibraryPage({ searchParams }: LibraryPageProps) {
   const { params, sessionUser, selectedDate, userEmail, canAccessAdmin, today} =
     await loadOnboardedPageContext(searchParams);
   const query = params.q ?? "";
-  const [templates, recipes, productRows] = await Promise.all([
+  const [templates, recipes] = await Promise.all([
     getTemplateSummaries(sessionUser.userId),
     getRecipeSummaries(sessionUser.userId),
-    query.trim() ? searchFoodProducts(sessionUser.userId, query) : Promise.resolve([]),
   ]);
-  // SEC-06: strip internal provenance before the rows are serialized into client props.
-  const products = toBrowserFoodProducts(productRows);
+
+  // Invalid input stays on the page as an actionable message with the query
+  // preserved; only genuine backend outages reach the error boundary.
+  // Successful rows are projected to the browser-safe shape (SEC-06).
+  let products: BrowserFoodProduct[] = [];
+  let searchError: string | null = null;
+  if (query.trim()) {
+    searchError = validateSearchQuery(query);
+    if (!searchError) {
+      try {
+        products = toBrowserFoodProducts(
+          await searchFoodProducts(sessionUser.userId, query),
+        );
+      } catch (error) {
+        if (isSearchValidationError(error)) {
+          searchError = (error as Error).message;
+        } else {
+          throw error;
+        }
+      }
+    }
+  }
 
   return (
     <LibraryShell
@@ -30,6 +65,7 @@ export default async function LibraryPage({ searchParams }: LibraryPageProps) {
       products={products}
       templates={templates}
       recipes={recipes}
+      searchError={searchError}
     />
   );
 }
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
index a62ae315..87e9fd40 100644
--- a/apps/web/app/login/page.tsx
+++ b/apps/web/app/login/page.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { ShooLoginButton } from "@/components/shoo-login-button";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { getCurrentSessionUser } from "@/lib/auth";
+import { getLoginErrorMessage } from "@/lib/login-errors";
 
 type LoginPageProps = {
   searchParams: Promise<{
@@ -11,13 +12,6 @@ type LoginPageProps = {
   }>;
 };
 
-const ERROR_MESSAGES: Record<string, string> = {
-  login_failed: "Sign-in did not complete. Please try again.",
-  missing_email: "Google did not provide an email address for this account.",
-  invalid_token: "The Shoo token could not be verified.",
-  session_expired: "Your local session expired. Please sign in again.",
-};
-
 const shooBaseUrl =
   process.env.NEXT_PUBLIC_SHOO_BASE_URL ??
   process.env.SHOO_BASE_URL ??
@@ -31,7 +25,7 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
 
   const params = await searchParams;
   const clearIdentityOnMount = params.loggedOut === "1";
-  const errorMessage = params.error ? ERROR_MESSAGES[params.error] : null;
+  const errorMessage = getLoginErrorMessage(params.error);
   const loggedOut = clearIdentityOnMount;
 
   return (
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index f437e2b1..b0b8fa6c 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -33,6 +33,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
       canAccessAdmin={canAccessAdmin}
       selectedDate={selectedDate}
       todayStr={today}
+      initialHourUtc={new Date().getUTCHours()}
       dailySummary={dailySummary}
       goals={goals}
       quickAddCandidates={quickAddCandidates}
diff --git a/apps/web/app/recipes/[id]/edit/page.tsx b/apps/web/app/recipes/[id]/edit/page.tsx
index 8a9c6898..4f5d999e 100644
--- a/apps/web/app/recipes/[id]/edit/page.tsx
+++ b/apps/web/app/recipes/[id]/edit/page.tsx
@@ -2,6 +2,7 @@ import { getRecipeById, getTemplates } from "@macro-tracker/db";
 import { notFound } from "next/navigation";
 
 import { RecipeBuilderShell } from "@/components/recipe-builder-shell";
+import { isRouteUuid } from "@/lib/input-validation";
 import { loadOnboardedPageContext } from "@/lib/page-context";
 
 type EditRecipePageProps = {
@@ -21,6 +22,12 @@ export default async function EditRecipePage({
   ]);
   const { sessionUser, selectedDate, today, userEmail, canAccessAdmin } = pageContext;
 
+  // Malformed ids are a 404 after auth; only genuine backend failures reach
+  // the error boundary. Well-formed-but-missing ids 404 on the null below.
+  if (!isRouteUuid(routeParams.id)) {
+    notFound();
+  }
+
   const [recipe, templates] = await Promise.all([
     getRecipeById(sessionUser.userId, routeParams.id),
     getTemplates(sessionUser.userId),
diff --git a/apps/web/components/admin-shell.tsx b/apps/web/components/admin-shell.tsx
index 61ea014c..dffb3146 100644
--- a/apps/web/components/admin-shell.tsx
+++ b/apps/web/components/admin-shell.tsx
@@ -15,6 +15,29 @@ function getRoleLabel(role: AdminRole) {
   return role === "owner" ? "Owner" : role === "admin" ? "Admin" : "User";
 }
 
+export type AdminNavLink = { href: string; label: string };
+
+function isNavMatch(pathname: string, href: string) {
+  return (
+    pathname === href || (href !== "/admin" && pathname.startsWith(`${href}/`))
+  );
+}
+
+// Flat navigation shows one active item: the longest matching href wins, so
+// /admin/barcodes/review highlights only the Review Queue, not Barcodes too.
+export function getActiveAdminHref(pathname: string, links: AdminNavLink[]) {
+  let active: string | null = null;
+  for (const link of links) {
+    if (
+      isNavMatch(pathname, link.href) &&
+      (active === null || link.href.length > active.length)
+    ) {
+      active = link.href;
+    }
+  }
+  return active;
+}
+
 export function AdminShell({ userEmail, role, children }: AdminShellProps) {
   const pathname = usePathname();
   const links = [
@@ -57,16 +80,14 @@ export function AdminShell({ userEmail, role, children }: AdminShellProps) {
           <div className="mt-5 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
             <nav className="flex flex-wrap gap-2">
               {links.map((link) => {
-                const active =
-                  pathname === link.href ||
-                  (link.href !== "/admin" &&
-                    pathname.startsWith(`${link.href}/`));
+                const active = getActiveAdminHref(pathname, links) === link.href;
 
                 return (
                   <Link
                     prefetch={false}
                     key={link.href}
                     href={link.href}
+                    aria-current={active ? "page" : undefined}
                     className={`rounded-full px-4 py-2 text-sm font-semibold transition ${
                       active
                         ? "bg-[var(--color-accent)] text-white"
diff --git a/apps/web/components/api-settings-client.tsx b/apps/web/components/api-settings-client.tsx
index fade48e9..2d323745 100644
--- a/apps/web/components/api-settings-client.tsx
+++ b/apps/web/components/api-settings-client.tsx
@@ -9,6 +9,8 @@ import {
 } from "@/lib/api-token-actions";
 import type { ApiScope, ApiTokenRecord } from "@macro-tracker/db";
 
+import { useHydrated } from "@/lib/use-hydrated";
+
 import { ConfirmSubmitButton } from "./confirm-delete-button";
 
 type ApiSettingsClientProps = {
@@ -99,18 +101,46 @@ export function getVisibleApiTokens(
   return [stateRecord, ...tokens];
 }
 
-// Built once rather than per token row; Intl constructors are costly.
-const tokenDateFormat = new Intl.DateTimeFormat(undefined, {
-  dateStyle: "medium",
-  timeStyle: "short",
+// Stable server-agreeing render first: the same instant formats 10:00 in UTC
+// and 12:00 in Europe/Amsterdam, so rendering local time during SSR can
+// disagree with hydration. The initial markup uses a pinned en-US/UTC
+// rendering; the browser-local rendering is applied after hydration.
+// The stable UTC formatter is built once (Intl constructors are costly).
+// The local formatter is built per call so it always reflects the viewer's
+// current zone instead of the zone pinned at module load.
+// dateStyle/timeStyle cannot be combined with timeZoneName, so the fields
+// are spelled out to keep the same shape with an explicit zone suffix.
+const stableTokenDateFormat = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  timeZone: "UTC",
+  timeZoneName: "short",
 });
 
-function formatDate(value: string | null) {
+export function formatStableTokenDate(value: string | null) {
+  if (!value) {
+    return "Never";
+  }
+
+  return stableTokenDateFormat.format(new Date(value));
+}
+
+function formatLocalTokenDate(value: string | null) {
   if (!value) {
     return "Never";
   }
 
-  return tokenDateFormat.format(new Date(value));
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short",
+  }).format(new Date(value));
 }
 
 export function ApiSettingsClient({ tokens, scopes }: ApiSettingsClientProps) {
@@ -121,6 +151,10 @@ export function ApiSettingsClient({ tokens, scopes }: ApiSettingsClientProps) {
   const [tokenName, setTokenName] = useState("");
   const [expires, setExpires] = useState<"90" | "never">("90");
   const [selectedScopes, setSelectedScopes] = useState<ApiScope[]>(scopes);
+  // False during SSR and the first client render (which must match SSR);
+  // flips after hydration so dates can show in the viewer's own zone.
+  const hydrated = useHydrated();
+  const formatDate = hydrated ? formatLocalTokenDate : formatStableTokenDate;
   const visibleTokens = useMemo(
     () => getVisibleApiTokens(tokens, state.record),
     [state.record, tokens],
diff --git a/apps/web/components/dashboard-shell.tsx b/apps/web/components/dashboard-shell.tsx
index 7c404d28..6c74ba33 100644
--- a/apps/web/components/dashboard-shell.tsx
+++ b/apps/web/components/dashboard-shell.tsx
@@ -80,6 +80,9 @@ type DashboardShellProps = {
   initialPresetTemplateKind?: PresetTemplateKind | null;
   // Server-resolved in the user's timezone so the client and server renders agree on hydration.
   todayStr?: string;
+  // Server-captured UTC hour so SSR and the first client render rank
+  // quick-add identically; the live hour applies after hydration.
+  initialHourUtc?: number;
 };
 
 type ErrorState = Record<string, string | null>;
@@ -440,6 +443,7 @@ export function DashboardShell({
   initialComposeAction = null,
   initialPresetTemplateKind = null,
   todayStr: todayStrProp,
+  initialHourUtc,
 }: DashboardShellProps) {
   const router = useRouter();
   const composeHandledRef = useRef<string | null>(null);
@@ -560,14 +564,23 @@ export function DashboardShell({
     selectedDate > todayStr ? "planned" : "eaten";
 
   // Single unified quick-add list: ranked by routine signals, not macro fit.
+  // The hour is a stable snapshot for SSR/first render; the live clock
+  // only takes over after hydration so an hour boundary in flight cannot
+  // reorder the initial markup.
+  const [currentHourUtc, setCurrentHourUtc] = useState(
+    () => initialHourUtc ?? new Date().getUTCHours(),
+  );
+  useEffect(() => {
+    setCurrentHourUtc(new Date().getUTCHours());
+  }, []);
   const quickAddItems = useMemo(
     () =>
       rankCandidates(quickAddCandidates, {
         limit: 10,
-        currentHourUtc: new Date().getUTCHours(),
+        currentHourUtc,
         referenceDate: todayStr,
       }),
-    [quickAddCandidates, todayStr],
+    [quickAddCandidates, todayStr, currentHourUtc],
   );
 
   function clearDraftError(clientId: string) {
diff --git a/apps/web/components/food-search-modal.tsx b/apps/web/components/food-search-modal.tsx
index c141a546..14bd3e5e 100644
--- a/apps/web/components/food-search-modal.tsx
+++ b/apps/web/components/food-search-modal.tsx
@@ -9,7 +9,7 @@ import {
   hasCurrentFoodSearchResults,
   normalizeFoodSearchQuery,
 } from "@/lib/food-search-state";
-import { formatSelectedDate } from "@/lib/formatting";
+import { formatSelectedDateWithYear } from "@/lib/formatting";
 import { buildMealEntryCopyInput } from "@/lib/meal-entry-copy";
 import { createClientMutationIdStore } from "@/lib/client-mutation-id";
 import { getLocalDateString } from "@/lib/startup-date";
@@ -287,7 +287,7 @@ export function FoodSearchModal({ onClose, onViewDate, onEntrySaved }: FoodSearc
                     </p>
                     <div className="mt-0.5 flex flex-wrap items-center gap-x-2.5 gap-y-0.5">
                       <span className="text-[10px] font-medium text-[var(--color-muted)]">
-                        {formatSelectedDate(entry.date)}
+                        {formatSelectedDateWithYear(entry.date)}
                       </span>
                       <span className="text-[10px] font-semibold text-[var(--color-bar-protein)]">P {entry.proteinG}g</span>
                       <span className="text-[10px] font-semibold text-[var(--color-bar-carbs)]">C {entry.carbsG}g</span>
diff --git a/apps/web/components/layout-nav.tsx b/apps/web/components/layout-nav.tsx
index 129c21ad..e10be1fd 100644
--- a/apps/web/components/layout-nav.tsx
+++ b/apps/web/components/layout-nav.tsx
@@ -6,6 +6,7 @@ import { useState, useTransition } from "react";
 import type { ComposeAction } from "@/lib/compose";
 import { getLocalDateString } from "@/lib/startup-date";
 import { prepareNavigationMotion } from "@/lib/navigation-motion";
+import { useHydrated } from "@/lib/use-hydrated";
 
 import { AddSheet } from "./add-sheet";
 import { BottomNav } from "./bottom-nav";
@@ -38,16 +39,23 @@ function pathnameToActiveTab(
   return "log";
 }
 
-export function LayoutNav() {
+export function LayoutNav({ todayStr: todayStrProp }: { todayStr?: string }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
   const [, startNavigation] = useTransition();
   const [addSheetOpen, setAddSheetOpen] = useState(false);
-  const selectedDate = searchParams.get("date") ?? getLocalDateString();
+  // Stable snapshot: the query wins when present; otherwise the server
+  // prop wins for SSR and the first client render. The browser-local day
+  // only applies after hydration (AppShell then corrects the URL when the
+  // server fallback disagrees), so opposite-zone renders never mismatch.
+  const hydrated = useHydrated();
+  const browserToday = hydrated ? getLocalDateString() : null;
+  const queryDate = searchParams.get("date");
+  const selectedDate = queryDate ?? todayStrProp ?? browserToday ?? "";
   const showAppNavigation = isAppPathname(pathname);
 
-  if (!showAppNavigation) {
+  if (!showAppNavigation || !selectedDate) {
     return null;
   }
 
diff --git a/apps/web/components/library-shell.tsx b/apps/web/components/library-shell.tsx
index 31548917..1f1b9df9 100644
--- a/apps/web/components/library-shell.tsx
+++ b/apps/web/components/library-shell.tsx
@@ -22,6 +22,9 @@ type LibraryShellProps = {
   templates: MealTemplateSummary[];
   recipes: RecipeSummary[];
   todayStr?: string;
+  // Invalid submitted queries stay on the page as an actionable message
+  // with templates/recipes still usable; outages still use the boundary.
+  searchError?: string | null;
 };
 
 const byLabel = (item: { label: string }) => item.label;
@@ -92,6 +95,7 @@ export function LibraryShell({
   templates,
   recipes,
   todayStr,
+  searchError,
 }: LibraryShellProps) {
   const router = useRouter();
   const [search, setSearch] = useState(query);
@@ -133,6 +137,14 @@ export function LibraryShell({
     [deferredSearch, recipes],
   );
   const hasActiveTemplateSearch = normalizeLibraryQuery(deferredSearch).length > 0;
+  // Foods shows server results for the last *submitted* query while the
+  // template/recipe sections filter live on the typed query. Until the new
+  // query is submitted the screen mixes two different terms, so the Foods
+  // section is labeled with the query it actually reflects.
+  const committedQuery = normalizeLibraryQuery(query);
+  const foodsStale =
+    committedQuery.length > 0 &&
+    normalizeLibraryQuery(deferredSearch) !== committedQuery;
 
   return (
     <AppShell
@@ -180,7 +192,29 @@ export function LibraryShell({
           <h3 className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-muted-strong)]">
             Foods
           </h3>
-          {products.length === 0 ? (
+          {foodsStale ? (
+            <p
+              aria-live="polite"
+              className="mb-3 rounded-2xl border border-[var(--color-border)] bg-[var(--color-card-muted)] px-4 py-2.5 text-xs text-[var(--color-muted-strong)]"
+            >
+              Food results are for &ldquo;{query.trim()}&rdquo;. Press Search
+              to update them.
+            </p>
+          ) : null}
+          {searchError ? (
+            <div
+              role="alert"
+              className="rounded-2xl border border-[var(--color-danger)]/20 bg-[var(--color-danger)]/8 px-5 py-4"
+            >
+              <p className="text-sm font-semibold text-[var(--color-danger)]">
+                {searchError}
+              </p>
+              <p className="mt-1 text-xs text-[var(--color-muted)]">
+                Shorten the search to look through foods; templates and
+                recipes below still filter as you type.
+              </p>
+            </div>
+          ) : products.length === 0 ? (
             <div className="rounded-2xl border border-dashed border-[var(--color-border-strong)] bg-[var(--color-shell-panel)] px-5 py-6 text-center">
               <p className="text-sm text-[var(--color-muted)]">
                 {query ? "No food products found." : "Search to find foods."}
@@ -243,7 +277,7 @@ export function LibraryShell({
               >
                 <p className="font-semibold text-[var(--color-ink)]">{recipe.label}</p>
                 <p className="mt-1 text-xs text-[var(--color-muted)]">
-                  {recipe.portions} portions · {recipe.perPortionMacros.caloriesKcal} kcal per portion
+                  {recipe.portions} portion{recipe.portions !== 1 ? "s" : ""} · {recipe.perPortionMacros.caloriesKcal} kcal per portion
                 </p>
               </TransitionLink>
             ))}
diff --git a/apps/web/components/macro-bar.tsx b/apps/web/components/macro-bar.tsx
index ed1c1e4c..24516210 100644
--- a/apps/web/components/macro-bar.tsx
+++ b/apps/web/components/macro-bar.tsx
@@ -22,12 +22,14 @@ function MacroBar({
   goal,
   fallbackMax,
 }: MacroBarProps) {
-  const max = goal ?? fallbackMax;
+  // A valid API zero goal shows no target; like an unset goal it still
+  // scales against the visual fallback so consumption remains visible.
+  const hasGoal = goal !== null && goal > 0;
+  const max = hasGoal ? goal! : fallbackMax;
   const percentage = max > 0 ? Math.min((value / max) * 100, 100) : 0;
   const projectedValue = value + plannedValue;
   const projectedPercentage =
     max > 0 ? Math.min((projectedValue / max) * 100, 100) : 0;
-  const hasGoal = goal !== null && goal > 0;
   const hasPlannedValue = plannedValue > 0;
   const testIdPrefix = label.toLowerCase().replace(/\s+/g, "-");
 
diff --git a/apps/web/components/planner-shell.tsx b/apps/web/components/planner-shell.tsx
index a76a94db..26cc7b7d 100644
--- a/apps/web/components/planner-shell.tsx
+++ b/apps/web/components/planner-shell.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { MealTemplateSummary, PlannedShoppingSummary } from "@macro-tracker/db";
+import { isValidDateString } from "@macro-tracker/db";
 import { useDeferredValue, useMemo, useState } from "react";
 
 import {
@@ -89,13 +90,23 @@ export function PlannerShell({
     [dayTemplates, normalizedTemplateSearch],
   );
   const selectedDaySummary = `${selectedDayEntryCount} entries, ${selectedDayPlannedCaloriesKcal} planned kcal`;
+  // Date inputs hold raw editable text, which is empty/incomplete mid-edit.
+  // Filtering and formatting only ever read these validated snapshots, so
+  // clearing a field never throws and the page stays usable while typing.
+  const effectiveShoppingStartDate = isValidDateString(shoppingStartDate)
+    ? shoppingStartDate
+    : defaultShoppingStartDate;
+  const effectiveShoppingEndDate = isValidDateString(shoppingEndDate)
+    ? shoppingEndDate
+    : defaultShoppingEndDate;
   const filteredShoppingSummaries = useMemo(
     () =>
       shoppingSummaries.filter(
         (summary) =>
-          summary.date >= shoppingStartDate && summary.date <= shoppingEndDate,
+          summary.date >= effectiveShoppingStartDate &&
+          summary.date <= effectiveShoppingEndDate,
       ),
-    [shoppingEndDate, shoppingStartDate, shoppingSummaries],
+    [effectiveShoppingEndDate, effectiveShoppingStartDate, shoppingSummaries],
   );
   const shoppingItems = useMemo(
     () => buildShoppingList(filteredShoppingSummaries),
@@ -105,8 +116,8 @@ export function PlannerShell({
     () => formatShoppingListText(shoppingItems),
     [shoppingItems],
   );
-  const shoppingRangeLabel = `${formatShortDate(shoppingStartDate)} to ${formatShortDate(
-    shoppingEndDate,
+  const shoppingRangeLabel = `${formatShortDate(effectiveShoppingStartDate)} to ${formatShortDate(
+    effectiveShoppingEndDate,
   )}`;
   const templateTiles = [
     {
@@ -161,7 +172,11 @@ export function PlannerShell({
 
   function updateShoppingStartDate(value: string) {
     setShoppingStartDate(value);
-    if (value > shoppingEndDate) {
+    if (
+      isValidDateString(value) &&
+      isValidDateString(shoppingEndDate) &&
+      value > shoppingEndDate
+    ) {
       setShoppingEndDate(value);
     }
     setCopyStatus(null);
@@ -169,7 +184,11 @@ export function PlannerShell({
 
   function updateShoppingEndDate(value: string) {
     setShoppingEndDate(value);
-    if (value < shoppingStartDate) {
+    if (
+      isValidDateString(value) &&
+      isValidDateString(shoppingStartDate) &&
+      value < shoppingStartDate
+    ) {
       setShoppingStartDate(value);
     }
     setCopyStatus(null);
diff --git a/apps/web/components/progress-shell.tsx b/apps/web/components/progress-shell.tsx
index 6103c296..6aea43a5 100644
--- a/apps/web/components/progress-shell.tsx
+++ b/apps/web/components/progress-shell.tsx
@@ -16,7 +16,7 @@ import {
   saveWeightGoalAction,
   updateWeightEntryAction,
 } from "@/lib/actions";
-import { formatShortDate } from "@/lib/formatting";
+import { formatShortDateWithYear } from "@/lib/formatting";
 import {
   getPositiveOptionalFieldError,
   snapshotNumberValidity,
@@ -327,7 +327,7 @@ function WeightTrendChart({
   const chartLabel = [
     `Weight trend over ${points.length} entries`,
     first && last
-      ? `from ${formatWeight(first.weightKg, unit)} on ${formatShortDate(first.date)} to ${formatWeight(last.weightKg, unit)} on ${formatShortDate(last.date)}`
+      ? `from ${formatWeight(first.weightKg, unit)} on ${formatShortDateWithYear(first.date)} to ${formatWeight(last.weightKg, unit)} on ${formatShortDateWithYear(last.date)}`
       : null,
     weightData.goalWeightKg != null
       ? `goal ${formatWeight(weightData.goalWeightKg, unit)}`
@@ -513,7 +513,7 @@ function WeightPanel({
   const { stats, entries } = weightData;
   const projection = buildWeightGoalProjection(weightData, selectedDate);
   const estimatedGoalLabel = projection.estimatedGoalDate
-    ? formatShortDate(projection.estimatedGoalDate)
+    ? formatShortDateWithYear(projection.estimatedGoalDate)
     : "-";
 
   return (
@@ -736,7 +736,7 @@ function WeightPanel({
                     ) : null}
                   </p>
                   <p className="mt-0.5 text-xs text-[var(--color-muted)]">
-                    {formatShortDate(entry.date)}
+                    {formatShortDateWithYear(entry.date)}
                     {entry.notes ? ` - ${entry.notes}` : ""}
                   </p>
                 </div>
@@ -750,7 +750,7 @@ function WeightPanel({
                         ? "bg-[var(--color-accent)]/15 text-[var(--color-accent)]"
                         : "text-[var(--color-muted)] hover:text-[var(--color-accent)]"
                     } disabled:opacity-50`}
-                    aria-label={`Edit entry from ${formatShortDate(entry.date)}`}
+                    aria-label={`Edit entry from ${formatShortDateWithYear(entry.date)}`}
                   >
                     <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                       <path d="M9.5 2.5l2 2L4 12H2v-2L9.5 2.5z" />
diff --git a/apps/web/components/stats-shell.tsx b/apps/web/components/stats-shell.tsx
index 7e494e3b..b0262ff6 100644
--- a/apps/web/components/stats-shell.tsx
+++ b/apps/web/components/stats-shell.tsx
@@ -218,6 +218,49 @@ function MacroTrendChart({
   );
 }
 
+export type MacroShareAllocation = {
+  proteinPct: number;
+  carbsPct: number;
+  fatPct: number;
+};
+
+// Largest-remainder allocation: every share is a floored exact percentage
+// and leftover points go to the largest fractions (protein, then carbs,
+// then fat on ties), so shares are always nonnegative and sum to 100.
+// Independent rounding with fat-as-remainder could show -1% (and clamping
+// fat alone still leaves 101%).
+export function allocateMacroShares(
+  proteinG: number,
+  carbsG: number,
+  fatG: number,
+): MacroShareAllocation {
+  const calories = [proteinG * 4, carbsG * 4, fatG * 9];
+  const total = calories[0]! + calories[1]! + calories[2]!;
+  if (total <= 0) {
+    return { proteinPct: 0, carbsPct: 0, fatPct: 0 };
+  }
+
+  const exact = calories.map((value) => (value / total) * 100);
+  const floored = exact.map((value) => Math.floor(value));
+  let remainder = 100 - (floored[0]! + floored[1]! + floored[2]!);
+  const order = [0, 1, 2].sort((a, b) => {
+    const delta = exact[b]! - exact[a]! - (floored[b]! - floored[a]!);
+    if (delta !== 0) return delta;
+    return a - b;
+  });
+  for (const index of order) {
+    if (remainder <= 0) break;
+    floored[index] += 1;
+    remainder -= 1;
+  }
+
+  return {
+    proteinPct: floored[0]!,
+    carbsPct: floored[1]!,
+    fatPct: floored[2]!,
+  };
+}
+
 function MacroSplitBar({
   proteinG,
   carbsG,
@@ -228,18 +271,14 @@ function MacroSplitBar({
   fatG: number;
 }) {
   // Convert to calories for split (protein=4, carbs=4, fat=9)
-  const proteinCal = proteinG * 4;
-  const carbsCal = carbsG * 4;
-  const fatCal = fatG * 9;
-  const total = proteinCal + carbsCal + fatCal;
+  const total = proteinG * 4 + carbsG * 4 + fatG * 9;
 
   if (total === 0) {
     return <p className="text-sm text-[var(--color-muted)]">No data yet.</p>;
   }
 
-  const pPct = Math.round((proteinCal / total) * 100);
-  const cPct = Math.round((carbsCal / total) * 100);
-  const fPct = 100 - pPct - cPct;
+  const { proteinPct: pPct, carbsPct: cPct, fatPct: fPct } =
+    allocateMacroShares(proteinG, carbsG, fatG);
   const segments = [
     { pct: pPct, colorVar: "var(--color-bar-protein)", label: "Protein" },
     { pct: cPct, colorVar: "var(--color-bar-carbs)", label: "Carbs" },
diff --git a/apps/web/lib/formatting.ts b/apps/web/lib/formatting.ts
index 0fc72541..b4ecc022 100644
--- a/apps/web/lib/formatting.ts
+++ b/apps/web/lib/formatting.ts
@@ -20,6 +20,17 @@ export function formatShortDate(value: string) {
   return format(parseISO(value), "d MMM");
 }
 
+// Unbounded history can hold the same day/month from different years, so
+// these labels always carry the year; bounded single-week views keep the
+// shorter form above.
+export function formatShortDateWithYear(value: string) {
+  return format(parseISO(value), "d MMM yyyy");
+}
+
+export function formatSelectedDateWithYear(value: string) {
+  return format(parseISO(value), "EEE, d MMM yyyy");
+}
+
 export function formatPeriodRange(startDate: string, endDate: string) {
   return `${formatShortDate(startDate)} to ${formatShortDate(endDate)}`;
 }
diff --git a/apps/web/lib/input-validation.ts b/apps/web/lib/input-validation.ts
new file mode 100644
index 00000000..8a4319f3
--- /dev/null
+++ b/apps/web/lib/input-validation.ts
@@ -0,0 +1,28 @@
+// Page-boundary input validation mirroring the backend contracts so invalid
+// input becomes a recoverable message/404 instead of the generic page error
+// boundary. Bounds mirror apps/backend/src/db.rs MAX_SEARCH_QUERY_LENGTH /
+// MAX_SEARCH_TERMS; the UUID shape mirrors Uuid::parse_str expectations.
+export const MAX_SEARCH_QUERY_LENGTH = 128;
+export const MAX_SEARCH_TERMS = 8;
+
+export function validateSearchQuery(query: string): string | null {
+  // Spread counts Unicode scalar values like Rust's chars().count().
+  if ([...query].length > MAX_SEARCH_QUERY_LENGTH) {
+    return `Search must be at most ${MAX_SEARCH_QUERY_LENGTH} characters.`;
+  }
+  const trimmed = query.trim();
+  if (!trimmed) {
+    return null;
+  }
+  if (trimmed.split(/\s+/).length > MAX_SEARCH_TERMS) {
+    return `Search must have at most ${MAX_SEARCH_TERMS} terms.`;
+  }
+  return null;
+}
+
+const UUID_PATTERN =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function isRouteUuid(value: string) {
+  return UUID_PATTERN.test(value);
+}
diff --git a/apps/web/lib/login-errors.ts b/apps/web/lib/login-errors.ts
new file mode 100644
index 00000000..f9e8083e
--- /dev/null
+++ b/apps/web/lib/login-errors.ts
@@ -0,0 +1,34 @@
+// Error codes that can land on /login?error=...: the Shoo verify route
+// forwards backend codes (unauthorized, forbidden, ...) alongside its own
+// (invalid_origin, missing_token, login_failed). Every code must produce a
+// safe message; raw upstream bodies are never displayed.
+const LOGIN_ERROR_MESSAGES: Record<string, string> = {
+  login_failed: "Sign-in did not complete. Please try again.",
+  missing_email: "Google did not provide an email address for this account.",
+  invalid_token: "The Shoo token could not be verified.",
+  session_expired: "Your local session expired. Please sign in again.",
+  unauthorized: "Sign-in was not authorized. Please try again.",
+  forbidden:
+    "This account is not allowed to sign in. Contact support if this seems wrong.",
+  invalid_origin: "Sign-in must be completed from this site. Please try again.",
+  missing_token: "Sign-in did not return a credential. Please try again.",
+  bad_request: "The sign-in request was invalid. Please try again.",
+  not_found: "Your account was not found. Please try signing in again.",
+};
+
+export const LOGIN_ERROR_FALLBACK =
+  "Sign-in did not complete. Please try again.";
+
+export function getLoginErrorMessage(code: string | null | undefined) {
+  if (!code) {
+    return null;
+  }
+
+  // Own-property check so inherited keys such as __proto__ cannot select
+  // Object.prototype members (which would render "[object Object]").
+  if (!Object.prototype.hasOwnProperty.call(LOGIN_ERROR_MESSAGES, code)) {
+    return LOGIN_ERROR_FALLBACK;
+  }
+
+  return LOGIN_ERROR_MESSAGES[code];
+}
diff --git a/apps/web/lib/server-timezone.ts b/apps/web/lib/server-timezone.ts
index 37416209..aa5af5be 100644
--- a/apps/web/lib/server-timezone.ts
+++ b/apps/web/lib/server-timezone.ts
@@ -20,3 +20,38 @@ export async function getRequestToday(now = new Date()) {
 
   return timeZone ? dateStringInTimeZone(timeZone, now) : getLocalDateString(now);
 }
+
+function getCookieValue(cookieHeader: string | null, name: string) {
+  if (!cookieHeader) {
+    return null;
+  }
+
+  for (const part of cookieHeader.split(";")) {
+    const index = part.indexOf("=");
+    if (index === -1) {
+      continue;
+    }
+    if (part.slice(0, index).trim() !== name) {
+      continue;
+    }
+    const raw = part.slice(index + 1).trim();
+    try {
+      return decodeURIComponent(raw);
+    } catch {
+      return raw;
+    }
+  }
+
+  return null;
+}
+
+// Layout-safe variant: the root layout already awaits headers() for the CSP
+// nonce, so it reads the already-fetched Headers instead of adding a
+// cookies() dependency. Invalid values fall back the same way.
+export function getRequestTodayFromHeaders(headers: Headers, now = new Date()) {
+  const timeZone = normalizeTimeZone(
+    getCookieValue(headers.get("cookie"), TIMEZONE_COOKIE_NAME),
+  );
+
+  return timeZone ? dateStringInTimeZone(timeZone, now) : getLocalDateString(now);
+}
diff --git a/apps/web/lib/use-hydrated.ts b/apps/web/lib/use-hydrated.ts
new file mode 100644
index 00000000..7e07405a
--- /dev/null
+++ b/apps/web/lib/use-hydrated.ts
@@ -0,0 +1,22 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+
+function subscribe() {
+  return () => {};
+}
+
+function getSnapshot() {
+  return true;
+}
+
+function getServerSnapshot() {
+  return false;
+}
+
+// False during SSR and the first client render (which must match the
+// server markup); true once hydration has committed and browser-local
+// enhancements may apply.
+export function useHydrated() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
index 60767873..fa428dc1 100644
--- a/apps/web/public/sw.js
+++ b/apps/web/public/sw.js
@@ -33,6 +33,22 @@ self.addEventListener("activate", (event) => {
 
 const CACHEABLE_DESTINATIONS = ["script", "style", "image", "font"];
 
+// The manifest reports destination "manifest", so the asset-cache write
+// check below never refreshes it: the precached copy answers every request
+// while the background revalidation is discarded. It gets its own
+// network-first path instead of joining the stale-while-revalidate asset flow.
+function isManifestRequest(request) {
+  if (request.destination === "manifest") {
+    return true;
+  }
+
+  try {
+    return new URL(request.url).pathname.endsWith("/manifest.webmanifest");
+  } catch {
+    return false;
+  }
+}
+
 /**
  * The origin server gets the final say. Without this a response marked
  * `no-store` or `private` was still written to the cache purely because its
@@ -89,6 +105,37 @@ self.addEventListener("fetch", (event) => {
 
   event.respondWith(
     caches.match(event.request).then((cachedResponse) => {
+      // Network-first for the manifest: a fresh install prompt/theme must
+      // never be pinned behind the precached copy. A failed fetch falls
+      // back to the cache; the origin's no-store/private verdict is still
+      // honored before anything is written.
+      if (isManifestRequest(event.request)) {
+        return fetch(event.request).then(
+          (networkResponse) => {
+            if (
+              networkResponse.ok &&
+              !networkResponse.redirected &&
+              !/(^|,)\s*(no-store|no-cache|private)\s*(,|;|$)/.test(
+                (
+                  networkResponse.headers.get("cache-control") ?? ""
+                ).toLowerCase(),
+              )
+            ) {
+              putInCache(event.request, networkResponse);
+            }
+
+            return networkResponse;
+          },
+          () => {
+            if (cachedResponse) {
+              return cachedResponse;
+            }
+
+            throw new TypeError("Manifest unavailable offline.");
+          },
+        );
+      }
+
       const revalidate = () =>
         fetch(event.request).then((networkResponse) => {
           if (isCacheable(event.request, networkResponse)) {
diff --git a/apps/web/tests/unit/admin-shell.test.tsx b/apps/web/tests/unit/admin-shell.test.tsx
new file mode 100644
index 00000000..8d9a82a2
--- /dev/null
+++ b/apps/web/tests/unit/admin-shell.test.tsx
@@ -0,0 +1,67 @@
+/** @vitest-environment jsdom */
+// UI-27: flat admin navigation marks exactly one item active (longest match)
+// with current-page semantics.
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const mocked = vi.hoisted(() => ({
+  pathname: "/admin",
+}));
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => mocked.pathname,
+}));
+
+import { AdminShell, getActiveAdminHref } from "@/components/admin-shell";
+
+const links = [
+  { href: "/admin", label: "Dashboard" },
+  { href: "/admin/users", label: "Users" },
+  { href: "/admin/barcodes", label: "Barcodes" },
+  { href: "/admin/barcodes/review", label: "Review Queue" },
+  { href: "/admin/ai-benchmark", label: "AI Benchmark" },
+];
+
+describe("UI-27 admin navigation", () => {
+  it("picks the most specific matching item", () => {
+    expect(getActiveAdminHref("/admin", links)).toBe("/admin");
+    expect(getActiveAdminHref("/admin/users", links)).toBe("/admin/users");
+    expect(getActiveAdminHref("/admin/barcodes", links)).toBe("/admin/barcodes");
+    // The reported defect: both Barcodes and Review Queue were active here.
+    expect(getActiveAdminHref("/admin/barcodes/review", links)).toBe(
+      "/admin/barcodes/review",
+    );
+    expect(
+      getActiveAdminHref("/admin/barcodes/123e4567-e89b-12d3-a456-426614174000", links),
+    ).toBe("/admin/barcodes");
+    expect(getActiveAdminHref("/admin/ai-benchmark", links)).toBe(
+      "/admin/ai-benchmark",
+    );
+  });
+
+  it("exposes exactly one current page on the review route", () => {
+    mocked.pathname = "/admin/barcodes/review";
+    render(
+      <AdminShell userEmail="owner@example.com" role="owner">
+        <div>content</div>
+      </AdminShell>,
+    );
+
+    const current = screen.getAllByRole("link", { current: "page" });
+    expect(current).toHaveLength(1);
+    expect(current[0]?.textContent).toBe("Review Queue");
+  });
+
+  it("keeps barcodes active on a barcode detail route", () => {
+    mocked.pathname = "/admin/barcodes/123e4567-e89b-12d3-a456-426614174000";
+    render(
+      <AdminShell userEmail="owner@example.com" role="owner">
+        <div>content</div>
+      </AdminShell>,
+    );
+
+    const current = screen.getAllByRole("link", { current: "page" });
+    expect(current).toHaveLength(1);
+    expect(current[0]?.textContent).toBe("Barcodes");
+  });
+});
diff --git a/apps/web/tests/unit/api-token-dates.test.tsx b/apps/web/tests/unit/api-token-dates.test.tsx
new file mode 100644
index 00000000..71d5d145
--- /dev/null
+++ b/apps/web/tests/unit/api-token-dates.test.tsx
@@ -0,0 +1,76 @@
+/** @vitest-environment jsdom */
+// UI-11: token timestamps must render identically on the server regardless of
+// the viewer's zone (no hydration mismatch), then enhance to local time.
+import type { ApiTokenRecord } from "@macro-tracker/db";
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const mocked = vi.hoisted(() => ({
+  requireOnboardedSessionUser: vi.fn(),
+  revalidatePath: vi.fn(),
+}));
+
+vi.mock("@/lib/auth", () => ({
+  requireOnboardedSessionUser: mocked.requireOnboardedSessionUser,
+}));
+
+vi.mock("next/cache", () => ({
+  revalidatePath: mocked.revalidatePath,
+}));
+
+import {
+  ApiSettingsClient,
+  formatStableTokenDate,
+} from "@/components/api-settings-client";
+
+const originalTz = process.env.TZ;
+
+afterEach(() => {
+  process.env.TZ = originalTz;
+});
+
+function token(): ApiTokenRecord {
+  return {
+    id: "token-1",
+    name: "Shortcut",
+    tokenPrefix: "mtk_v1_abc",
+    scopes: ["read:daily"],
+    createdAt: "2026-01-15T10:00:00.000Z",
+    lastUsedAt: null,
+    expiresAt: "2026-04-15T10:00:00.000Z",
+    revokedAt: null,
+  } as unknown as ApiTokenRecord;
+}
+
+describe("UI-11 stable token timestamps", () => {
+  it("formats the stable initial render identically in UTC and Europe/Amsterdam", () => {
+    process.env.TZ = "UTC";
+    const utcRender = formatStableTokenDate("2026-01-15T10:00:00.000Z");
+
+    process.env.TZ = "Europe/Amsterdam";
+    const amsterdamRender = formatStableTokenDate("2026-01-15T10:00:00.000Z");
+
+    expect(amsterdamRender).toBe(utcRender);
+    expect(utcRender).toContain("10:00");
+    expect(utcRender).toContain("UTC");
+    expect(formatStableTokenDate(null)).toBe("Never");
+  });
+
+  it("renders created/used/expiry timestamps and enhances to local time after hydration", async () => {
+    process.env.TZ = "Europe/Amsterdam";
+    const { container } = render(<ApiSettingsClient tokens={[token()]} scopes={[]} />);
+
+    // Post-hydration enhancement: the viewer's own zone with its abbreviation.
+    const local = new Intl.DateTimeFormat(undefined, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      timeZoneName: "short",
+    }).format(new Date("2026-01-15T10:00:00.000Z"));
+    expect(await screen.findByText("Tokens")).toBeTruthy();
+    expect(container.textContent).toContain(`Created ${local}`);
+    expect(container.textContent).toContain("Last used Never");
+  });
+});
diff --git a/apps/web/tests/unit/history-dates.test.ts b/apps/web/tests/unit/history-dates.test.ts
new file mode 100644
index 00000000..75f8e5ee
--- /dev/null
+++ b/apps/web/tests/unit/history-dates.test.ts
@@ -0,0 +1,51 @@
+/** @vitest-environment node */
+// UI-14: unbounded history and multi-year projections must be unambiguous.
+import type { WeightPageData } from "@macro-tracker/db";
+import { describe, expect, it } from "vitest";
+
+import {
+  formatSelectedDateWithYear,
+  formatShortDateWithYear,
+} from "@/lib/formatting";
+import { buildWeightGoalProjection } from "@/lib/weight-trend";
+
+function entry(date: string, weightKg: number): WeightPageData["entries"][number] {
+  return {
+    id: date,
+    userId: "user-1",
+    date,
+    weightKg,
+    bodyFatPct: null,
+    notes: null,
+  };
+}
+
+describe("UI-14 year-inclusive history", () => {
+  it("disambiguates the same day/month across years", () => {
+    expect(formatShortDateWithYear("2025-03-16")).toBe("16 Mar 2025");
+    expect(formatShortDateWithYear("2026-03-16")).toBe("16 Mar 2026");
+    expect(formatSelectedDateWithYear("2025-03-16")).toContain("2025");
+    expect(formatSelectedDateWithYear("2026-03-16")).toContain("2026");
+  });
+
+  it("renders a multi-year goal ETA with its year", () => {
+    const weightData: WeightPageData = {
+      entries: [entry("2026-01-01", 90), entry("2026-01-31", 89)],
+      goalWeightKg: 70,
+      stats: {
+        currentWeight: 89,
+        weekChange: -0.2,
+        monthChange: -1,
+        trendDirection: "down",
+      },
+    };
+    const projection = buildWeightGoalProjection(weightData, "2026-01-31");
+
+    expect(projection.status).toBe("moving_toward");
+    expect(projection.estimatedGoalDate).not.toBeNull();
+    expect(projection.estimatedGoalDate!.startsWith("2027")).toBe(true);
+    expect(formatShortDateWithYear(projection.estimatedGoalDate!)).toContain(
+      "2027",
+    );
+  });
+});
diff --git a/apps/web/tests/unit/input-validation.test.ts b/apps/web/tests/unit/input-validation.test.ts
new file mode 100644
index 00000000..cc781f8e
--- /dev/null
+++ b/apps/web/tests/unit/input-validation.test.ts
@@ -0,0 +1,49 @@
+/** @vitest-environment node */
+// UI-24: page-boundary input validation. 128 chars / 8 terms mirror the
+// backend bounds; malformed route ids 404 after auth instead of throwing.
+import { describe, expect, it } from "vitest";
+
+import {
+  isRouteUuid,
+  validateSearchQuery,
+} from "@/lib/input-validation";
+
+describe("UI-24 input validation", () => {
+  it("accepts the 128-character / 8-term boundaries", () => {
+    expect(validateSearchQuery("a".repeat(128))).toBeNull();
+    expect(validateSearchQuery("é".repeat(128))).toBeNull();
+    expect(validateSearchQuery("a b c d e f g h")).toBeNull();
+    expect(validateSearchQuery("oatmeal")).toBeNull();
+    expect(validateSearchQuery("")).toBeNull();
+    expect(validateSearchQuery("   ")).toBeNull();
+  });
+
+  it("rejects 129 Unicode characters with an actionable message", () => {
+    expect(validateSearchQuery("a".repeat(129))).toContain("128");
+    expect(validateSearchQuery("é".repeat(129))).toContain("128");
+    expect(validateSearchQuery("😀".repeat(129))).toContain("128");
+  });
+
+  it("rejects 9 terms with an actionable message", () => {
+    expect(validateSearchQuery("a b c d e f g h i")).toContain("8");
+  });
+
+  it("does not silently truncate", () => {
+    const tooLong = `oatmeal ${"a".repeat(130)}`;
+    const message = validateSearchQuery(tooLong);
+    expect(message).not.toBeNull();
+    expect(tooLong.length).toBeGreaterThan(128);
+  });
+
+  it("accepts well-formed UUIDs and rejects malformed route ids", () => {
+    expect(isRouteUuid("123e4567-e89b-12d3-a456-426614174000")).toBe(true);
+    expect(isRouteUuid("not-a-uuid")).toBe(false);
+    expect(isRouteUuid("")).toBe(false);
+    expect(isRouteUuid("123")).toBe(false);
+    expect(isRouteUuid("../../admin")).toBe(false);
+    expect(isRouteUuid("123e4567-e89b-12d3-a456-42661417400")).toBe(false);
+    expect(
+      isRouteUuid("123e4567-e89b-12d3-a456-426614174000-extra"),
+    ).toBe(false);
+  });
+});
diff --git a/apps/web/tests/unit/layout-nav-today.test.tsx b/apps/web/tests/unit/layout-nav-today.test.tsx
new file mode 100644
index 00000000..23c43372
--- /dev/null
+++ b/apps/web/tests/unit/layout-nav-today.test.tsx
@@ -0,0 +1,98 @@
+/** @vitest-environment jsdom */
+// UI-15: LayoutNav must not recompute "today" during render (SSR/client zone
+// disagreement across a date boundary); it uses the stable server prop and
+// only reads the browser clock after hydration.
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { rankCandidates } from "@/lib/quick-add";
+
+const mocked = vi.hoisted(() => ({
+  push: vi.fn(),
+  replace: vi.fn(),
+  searchDate: null as string | null,
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: mocked.push, replace: mocked.replace }),
+  usePathname: () => "/",
+  useSearchParams: () => ({ get: (key: string) => (key === "date" ? mocked.searchDate : null) }),
+}));
+
+import { LayoutNav } from "@/components/layout-nav";
+
+const originalTz = process.env.TZ;
+
+afterEach(() => {
+  process.env.TZ = originalTz;
+  mocked.searchDate = null;
+  vi.useRealTimers();
+});
+
+describe("UI-15 stable SSR clock", () => {
+  it("uses the explicit date query verbatim", () => {
+    mocked.searchDate = "2026-08-18";
+    process.env.TZ = "Pacific/Auckland";
+    render(<LayoutNav todayStr="2026-08-19" />);
+
+    expect(screen.getByRole("link", { name: /food log/i }).getAttribute("href")).toBe(
+      "/?date=2026-08-18",
+    );
+  });
+
+  it("uses the server todayStr prop instead of recomputing the local day", () => {
+    mocked.searchDate = null;
+    // 2026-08-18T13:00Z is 2026-08-18 in UTC but 2026-08-19 in Auckland.
+    process.env.TZ = "Pacific/Auckland";
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-08-18T13:00:00Z"));
+
+    try {
+      render(<LayoutNav todayStr="2026-08-18" />);
+      // First render agrees with the server prop even though the browser's
+      // own local day is already the 19th.
+      expect(screen.getByRole("link", { name: /food log/i }).getAttribute("href")).toBe(
+        "/?date=2026-08-18",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("quick-add ranking flips across an hour boundary (hazard pinned)", () => {
+    const candidates = [
+      {
+        label: "Morning oats",
+        proteinG: 10,
+        carbsG: 20,
+        fatG: 5,
+        caloriesKcal: 200,
+        source: "recent" as const,
+        peakHourUtc: 7,
+        habitCount: 5,
+      },
+      {
+        label: "Late snack",
+        proteinG: 10,
+        carbsG: 20,
+        fatG: 5,
+        caloriesKcal: 200,
+        source: "recent" as const,
+        peakHourUtc: 22,
+        habitCount: 5,
+      },
+    ];
+    const morning = rankCandidates(candidates, {
+      currentHourUtc: 7,
+      referenceDate: "2026-08-18",
+    }).map((c) => c.label);
+    const night = rankCandidates(candidates, {
+      currentHourUtc: 22,
+      referenceDate: "2026-08-18",
+    }).map((c) => c.label);
+
+    expect(morning[0]).toBe("Morning oats");
+    expect(night[0]).toBe("Late snack");
+    expect(morning).not.toEqual(night);
+  });
+});
diff --git a/apps/web/tests/unit/library-shell.test.tsx b/apps/web/tests/unit/library-shell.test.tsx
new file mode 100644
index 00000000..54e1a729
--- /dev/null
+++ b/apps/web/tests/unit/library-shell.test.tsx
@@ -0,0 +1,109 @@
+/** @vitest-environment jsdom */
+// UI-18: all sections must reflect one query (or label the stale one).
+// UI-19: single-portion recipes use the singular label.
+import type { FoodProduct, RecipeSummary } from "@macro-tracker/db";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const mocked = vi.hoisted(() => ({
+  push: vi.fn(),
+  replace: vi.fn(),
+  refresh: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mocked.push,
+    replace: mocked.replace,
+    refresh: mocked.refresh,
+  }),
+  usePathname: () => "/library",
+}));
+
+import { LibraryShell } from "@/components/library-shell";
+
+const products: FoodProduct[] = [
+  {
+    id: "product-1",
+    name: "Oatmeal",
+    brand: null,
+    source: "personal",
+    caloriesPer100: 100,
+  } as unknown as FoodProduct,
+];
+
+const recipes: RecipeSummary[] = [
+  {
+    id: "recipe-1",
+    label: "Solo bowl",
+    portions: 1,
+    perPortionMacros: { proteinG: 10, carbsG: 20, fatG: 5, caloriesKcal: 200 },
+  },
+  {
+    id: "recipe-2",
+    label: "Family pot",
+    portions: 4,
+    perPortionMacros: { proteinG: 10, carbsG: 20, fatG: 5, caloriesKcal: 200 },
+  },
+];
+
+function renderLibrary(query: string) {
+  return render(
+    <LibraryShell
+      userEmail="user@example.com"
+      canAccessAdmin={false}
+      selectedDate="2026-03-17"
+      query={query}
+      products={products}
+      templates={[]}
+      recipes={recipes}
+      todayStr="2026-03-17"
+    />,
+  );
+}
+
+describe("UI-18/UI-19 library display", () => {
+  it("labels Foods with the submitted query once the typed query diverges", async () => {
+    renderLibrary("oat");
+    expect(screen.queryByText(/Food results are for/)).toBeNull();
+
+    fireEvent.change(screen.getByPlaceholderText("Search library"), {
+      target: { value: "oatmeal banana" },
+    });
+
+    expect(await screen.findByText(/Food results are for/)).toBeTruthy();
+  });
+
+  it("uses singular/plural portion labels like the recipe card", () => {
+    const { container } = renderLibrary("");
+    expect(container.textContent).toContain("1 portion ·");
+    expect(container.textContent).not.toContain("1 portions");
+    expect(container.textContent).toContain("4 portions ·");
+  });
+
+  it("shows an invalid submitted query as a recoverable error with results intact", () => {
+    render(
+      <LibraryShell
+        userEmail="user@example.com"
+        canAccessAdmin={false}
+        selectedDate="2026-03-17"
+        query={"a".repeat(129)}
+        products={[]}
+        templates={[]}
+        recipes={recipes}
+        todayStr="2026-03-17"
+        searchError="Search must be at most 128 characters."
+      />,
+    );
+
+    expect(screen.getByRole("alert")).toBeTruthy();
+    expect(screen.getByText("Search must be at most 128 characters.")).toBeTruthy();
+    // The query is preserved in the input and the other sections stay usable
+    // (live-filtered by the typed query, hence no recipe match here).
+    expect(screen.getByPlaceholderText("Search library")).toHaveProperty(
+      "value",
+      "a".repeat(129),
+    );
+    expect(screen.getByText("No recipes found.")).toBeTruthy();
+  });
+});
diff --git a/apps/web/tests/unit/login-errors.test.ts b/apps/web/tests/unit/login-errors.test.ts
new file mode 100644
index 00000000..253135b3
--- /dev/null
+++ b/apps/web/tests/unit/login-errors.test.ts
@@ -0,0 +1,54 @@
+/** @vitest-environment node */
+// UI-13: every sign-in failure code must produce a visible, safe message;
+// unknown and inherited keys fall back instead of rendering nothing (or an object).
+import { describe, expect, it } from "vitest";
+
+import {
+  LOGIN_ERROR_FALLBACK,
+  getLoginErrorMessage,
+} from "@/lib/login-errors";
+
+describe("UI-13 login error messages", () => {
+  it("maps the original four codes", () => {
+    expect(getLoginErrorMessage("login_failed")).toContain("try again");
+    expect(getLoginErrorMessage("missing_email")).toContain("email");
+    expect(getLoginErrorMessage("invalid_token")).toContain("verified");
+    expect(getLoginErrorMessage("session_expired")).toContain("sign in again");
+  });
+
+  it("maps actionable backend/route codes instead of returning to login silently", () => {
+    for (const code of [
+      "unauthorized",
+      "forbidden",
+      "invalid_origin",
+      "missing_token",
+      "bad_request",
+      "not_found",
+    ]) {
+      const message = getLoginErrorMessage(code);
+      expect(typeof message).toBe("string");
+      expect(message!.length).toBeGreaterThan(0);
+    }
+    expect(getLoginErrorMessage("unauthorized")).toContain("authorized");
+    expect(getLoginErrorMessage("invalid_origin")).toContain("this site");
+  });
+
+  it("falls back for unknown codes and inherited-key names without throwing", () => {
+    expect(getLoginErrorMessage("some_future_code")).toBe(LOGIN_ERROR_FALLBACK);
+    expect(getLoginErrorMessage("__proto__")).toBe(LOGIN_ERROR_FALLBACK);
+    expect(getLoginErrorMessage("constructor")).toBe(LOGIN_ERROR_FALLBACK);
+    expect(getLoginErrorMessage("toString")).toBe(LOGIN_ERROR_FALLBACK);
+    expect(getLoginErrorMessage("hasOwnProperty")).toBe(LOGIN_ERROR_FALLBACK);
+  });
+
+  it("returns null only when there is no error", () => {
+    expect(getLoginErrorMessage(undefined)).toBeNull();
+    expect(getLoginErrorMessage("")).toBeNull();
+  });
+
+  it("never leaks raw upstream bodies", () => {
+    const message = getLoginErrorMessage("upstream_error")!;
+    expect(message).toBe(LOGIN_ERROR_FALLBACK);
+    expect(message).not.toContain("{");
+  });
+});
diff --git a/apps/web/tests/unit/macro-bar.test.tsx b/apps/web/tests/unit/macro-bar.test.tsx
index 14231764..a4e22958 100644
--- a/apps/web/tests/unit/macro-bar.test.tsx
+++ b/apps/web/tests/unit/macro-bar.test.tsx
@@ -44,6 +44,27 @@ describe("MacroBarGroup", () => {
     expect(readoutTexts().some((text) => text.includes("/"))).toBe(false);
   });
 
+  it("scales a valid zero goal against the fallback so consumption stays visible", () => {
+    const { container } = render(
+      <MacroBarGroup
+        caloriesKcal={900}
+        proteinG={40}
+        carbsG={80}
+        fatG={20}
+        goals={{ caloriesKcal: 0, proteinG: 0, carbsG: 0, fatG: 0 }}
+      />,
+    );
+
+    // No target is shown for zero goals, but the bar must not imply zero
+    // consumption: 900 of the 2500 kcal fallback fills 36%.
+    expect(readoutTexts()).toContain("900 kcal");
+    expect(readoutTexts().some((text) => text.includes("/"))).toBe(false);
+    const fill = container.querySelector<HTMLElement>(
+      '[data-testid="macro-bar-calories-eaten-fill"]',
+    );
+    expect(fill?.style.width).toBe("36%");
+  });
+
   it("caps the eaten fill at 100% once the goal is exceeded", () => {
     const { container } = render(
       <MacroBarGroup
diff --git a/apps/web/tests/unit/macro-shares.test.ts b/apps/web/tests/unit/macro-shares.test.ts
new file mode 100644
index 00000000..9dd37c3f
--- /dev/null
+++ b/apps/web/tests/unit/macro-shares.test.ts
@@ -0,0 +1,62 @@
+/** @vitest-environment node */
+// UI-23: rounded macro shares must never go negative and must total 100.
+import { describe, expect, it } from "vitest";
+
+import { allocateMacroShares } from "@/components/stats-shell";
+
+describe("UI-23 macro share allocation", () => {
+  it("fixes the 33.5/66.5/0 case that showed -1% fat", () => {
+    expect(allocateMacroShares(33.5, 66.5, 0)).toEqual({
+      proteinPct: 34,
+      carbsPct: 66,
+      fatPct: 0,
+    });
+  });
+
+  it("gives a single macro the full bar", () => {
+    expect(allocateMacroShares(100, 0, 0)).toEqual({
+      proteinPct: 100,
+      carbsPct: 0,
+      fatPct: 0,
+    });
+    expect(allocateMacroShares(0, 0, 50)).toEqual({
+      proteinPct: 0,
+      carbsPct: 0,
+      fatPct: 100,
+    });
+  });
+
+  it("returns zeros for empty input", () => {
+    expect(allocateMacroShares(0, 0, 0)).toEqual({
+      proteinPct: 0,
+      carbsPct: 0,
+      fatPct: 0,
+    });
+  });
+
+  it("keeps small fractions nonnegative and totalling 100", () => {
+    const shares = allocateMacroShares(0.1, 0.1, 0.1);
+    expect(shares.proteinPct).toBeGreaterThanOrEqual(0);
+    expect(shares.carbsPct).toBeGreaterThanOrEqual(0);
+    expect(shares.fatPct).toBeGreaterThanOrEqual(0);
+    expect(shares.proteinPct + shares.carbsPct + shares.fatPct).toBe(100);
+  });
+
+  it("never goes negative and always totals 100 across a sweep", () => {
+    const values = [0, 0.3, 1.7, 12.5, 33.5, 66.5, 100];
+    for (const protein of values) {
+      for (const carbs of values) {
+        for (const fat of values) {
+          const shares = allocateMacroShares(protein, carbs, fat);
+          expect(shares.proteinPct).toBeGreaterThanOrEqual(0);
+          expect(shares.carbsPct).toBeGreaterThanOrEqual(0);
+          expect(shares.fatPct).toBeGreaterThanOrEqual(0);
+          if (protein + carbs + fat === 0) continue;
+          expect(
+            shares.proteinPct + shares.carbsPct + shares.fatPct,
+          ).toBe(100);
+        }
+      }
+    }
+  });
+});
diff --git a/apps/web/tests/unit/planner-shell.test.tsx b/apps/web/tests/unit/planner-shell.test.tsx
new file mode 100644
index 00000000..6e08b80c
--- /dev/null
+++ b/apps/web/tests/unit/planner-shell.test.tsx
@@ -0,0 +1,83 @@
+/** @vitest-environment jsdom */
+import type { PlannedShoppingSummary } from "@macro-tracker/db";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+const mocked = vi.hoisted(() => ({
+  push: vi.fn(),
+  replace: vi.fn(),
+  refresh: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: mocked.push,
+    replace: mocked.replace,
+    refresh: mocked.refresh,
+  }),
+  usePathname: () => "/planner",
+}));
+
+vi.mock("@/lib/actions", () => ({
+  applyTemplateAction: vi.fn(),
+  createTemplateFromDateAction: vi.fn(),
+}));
+
+import { PlannerShell } from "@/components/planner-shell";
+
+const summaries: PlannedShoppingSummary[] = [
+  { date: "2026-03-16", entryCount: 0, plannedCaloriesKcal: 0, meals: [] },
+  { date: "2026-03-17", entryCount: 0, plannedCaloriesKcal: 0, meals: [] },
+  { date: "2026-03-18", entryCount: 0, plannedCaloriesKcal: 0, meals: [] },
+];
+
+function renderShopping() {
+  render(
+    <PlannerShell
+      userEmail="user@example.com"
+      canAccessAdmin={false}
+      selectedDate="2026-03-17"
+      templates={[]}
+      recipeCount={0}
+      selectedDayEntryCount={0}
+      selectedDayPlannedCaloriesKcal={0}
+      shoppingSummaries={summaries}
+      todayStr="2026-03-17"
+    />,
+  );
+  fireEvent.click(screen.getByRole("tab", { name: "Shopping" }));
+}
+
+describe("PlannerShell shopping dates (UI-04)", () => {
+  it("stays usable when the start date is keyboard-cleared", () => {
+    renderShopping();
+    const startInput = screen.getByLabelText("Start") as HTMLInputElement;
+
+    fireEvent.change(startInput, { target: { value: "" } });
+
+    expect(startInput.value).toBe("");
+    // No error boundary: the range label falls back to the default range.
+    expect(screen.getByText(/Planned entries from/)).toBeTruthy();
+  });
+
+  it("stays usable when the end date is keyboard-cleared and recovers with a valid date", () => {
+    renderShopping();
+    const endInput = screen.getByLabelText("End") as HTMLInputElement;
+
+    fireEvent.change(endInput, { target: { value: "" } });
+    expect(endInput.value).toBe("");
+    expect(screen.getByText(/Planned entries from/)).toBeTruthy();
+
+    fireEvent.change(endInput, { target: { value: "2026-03-17" } });
+    expect(endInput.value).toBe("2026-03-17");
+    expect(screen.getByText(/Planned entries from/)).toBeTruthy();
+  });
+
+  it("ignores incomplete dates without crashing", () => {
+    renderShopping();
+    const startInput = screen.getByLabelText("Start") as HTMLInputElement;
+
+    fireEvent.change(startInput, { target: { value: "2026-03" } });
+    expect(screen.getByText(/Planned entries from/)).toBeTruthy();
+  });
+});
diff --git a/apps/web/tests/unit/server-timezone.test.ts b/apps/web/tests/unit/server-timezone.test.ts
new file mode 100644
index 00000000..a08dad81
--- /dev/null
+++ b/apps/web/tests/unit/server-timezone.test.ts
@@ -0,0 +1,34 @@
+/** @vitest-environment node */
+// UI-15: the root layout resolves the per-request day from the already
+// fetched Headers so SSR and the first client render agree.
+import { describe, expect, it } from "vitest";
+
+import { getRequestTodayFromHeaders } from "@/lib/server-timezone";
+
+describe("UI-15 request day from headers", () => {
+  it("resolves the browser day from the timezone cookie", () => {
+    // 2026-08-18T13:00Z is still the 18th in UTC but the 19th in Auckland.
+    const headers = new Headers({
+      cookie: `mt_tz=${encodeURIComponent("Pacific/Auckland")}`,
+    });
+    expect(getRequestTodayFromHeaders(headers, new Date("2026-08-18T13:00:00Z"))).toBe(
+      "2026-08-19",
+    );
+  });
+
+  it("falls back to the server day without a cookie or with a bogus zone", () => {
+    const fixedNow = new Date("2026-08-18T11:00:00Z");
+    expect(getRequestTodayFromHeaders(new Headers(), fixedNow)).toBe(
+      getRequestTodayFromHeaders(
+        new Headers({ cookie: "mt_tz=Not%2FAZone" }),
+        fixedNow,
+      ),
+    );
+    expect(
+      getRequestTodayFromHeaders(
+        new Headers({ cookie: "other=1; mt_tz=UTC" }),
+        fixedNow,
+      ),
+    ).toBe("2026-08-18");
+  });
+});
diff --git a/apps/web/tests/unit/service-worker-manifest.test.ts b/apps/web/tests/unit/service-worker-manifest.test.ts
new file mode 100644
index 00000000..5b02fd56
--- /dev/null
+++ b/apps/web/tests/unit/service-worker-manifest.test.ts
@@ -0,0 +1,210 @@
+/** @vitest-environment node */
+// UI-12: executes the actual service-worker source in Node's vm module
+// against an old cache/new manifest to prove freshness behavior.
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { runInNewContext } from "node:vm";
+import { describe, expect, it } from "vitest";
+
+const SW_PATH = join(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../public/sw.js",
+);
+const swSource = readFileSync(SW_PATH, "utf8");
+
+type FakeRequest = {
+  method: string;
+  mode: string;
+  destination: string;
+  url: string;
+};
+
+type FakeResponse = {
+  ok: boolean;
+  redirected: boolean;
+  headers: { get(name: string): string | null };
+  body: string;
+  clone(): FakeResponse;
+};
+
+function fakeResponse(
+  body: string,
+  headers: Record<string, string> = {},
+  opts: { ok?: boolean; redirected?: boolean } = {},
+): FakeResponse {
+  const map = new Map(
+    Object.entries(headers).map(([key, value]) => [key.toLowerCase(), value]),
+  );
+  return {
+    ok: opts.ok ?? true,
+    redirected: opts.redirected ?? false,
+    headers: { get: (name: string) => map.get(name.toLowerCase()) ?? null },
+    body,
+    clone: () => fakeResponse(body, headers, opts),
+  };
+}
+
+function manifestRequest(): FakeRequest {
+  return {
+    method: "GET",
+    mode: "no-cors",
+    destination: "manifest",
+    url: "https://example.com/manifest.webmanifest",
+  };
+}
+
+type SwEvent = {
+  request: FakeRequest;
+  respondWith: (promise: Promise<FakeResponse>) => void;
+  waitUntil: (promise: Promise<unknown>) => void;
+};
+
+type SwListener = (event: SwEvent) => void;
+
+function runWorker(network: (request: FakeRequest) => Promise<FakeResponse>) {
+  const listeners = new Map<string, SwListener[]>();
+  const entries = new Map<string, Map<string, FakeResponse>>();
+  const puts: string[] = [];
+  const caches = {
+    open: async (name: string) => {
+      if (!entries.has(name)) entries.set(name, new Map());
+      const store = entries.get(name)!;
+      return {
+        put: async (request: FakeRequest, response: FakeResponse) => {
+          store.set(request.url, response);
+          puts.push(request.url);
+        },
+        match: async (request: FakeRequest | string) => {
+          const url = typeof request === "string" ? request : request.url;
+          return store.get(url);
+        },
+      };
+    },
+    keys: async () => [...entries.keys()],
+    delete: async (name: string) => entries.delete(name),
+    match: async (request: FakeRequest) => {
+      for (const store of entries.values()) {
+        const hit = store.get(request.url);
+        if (hit) return hit;
+      }
+      return undefined;
+    },
+  };
+  const self: Record<string, unknown> = {
+    location: { origin: "https://example.com" },
+    skipWaiting: () => {},
+    clients: { claim: () => {} },
+    addEventListener: (type: string, fn: SwListener) => {
+      const list = listeners.get(type) ?? [];
+      list.push(fn);
+      listeners.set(type, list);
+    },
+  };
+  runInNewContext(swSource, { self, caches, fetch: network, URL, console });
+  return { listeners, entries, puts, caches };
+}
+
+async function dispatchFetch(
+  listeners: Map<string, SwListener[]>,
+  request: FakeRequest,
+) {
+  let respondWith: Promise<FakeResponse> | undefined;
+  const background: Array<Promise<unknown>> = [];
+  const event = {
+    request,
+    respondWith: (promise: Promise<FakeResponse>) => {
+      respondWith = promise;
+    },
+    waitUntil: (promise: Promise<unknown>) => {
+      background.push(promise);
+    },
+  };
+  for (const fn of listeners.get("fetch") ?? []) fn(event);
+  if (!respondWith) return undefined;
+  const response = await respondWith;
+  await Promise.allSettled(background);
+  await new Promise((resolve) => setImmediate(resolve));
+  return response;
+}
+
+async function dispatchActivate(listeners: Map<string, SwListener[]>) {
+  const background: Array<Promise<unknown>> = [];
+  const event: SwEvent = {
+    request: manifestRequest(),
+    respondWith: () => {},
+    waitUntil: (promise: Promise<unknown>) => background.push(promise),
+  };
+  for (const fn of listeners.get("activate") ?? []) {
+    fn(event);
+  }
+  await Promise.allSettled(background);
+}
+
+const MANIFEST_URL = "https://example.com/manifest.webmanifest";
+
+describe("UI-12 service-worker manifest freshness", () => {
+  it("serves the updated manifest and stores it (was: stale copy, zero puts)", async () => {
+    const worker = runWorker(async () =>
+      fakeResponse('{"name":"v2"}', { "cache-control": "public, max-age=3600" }),
+    );
+    const cache = await worker.caches.open("macro-tracker-v3");
+    await cache.put(manifestRequest(), fakeResponse('{"name":"v1"}'));
+    worker.puts.length = 0;
+
+    const response = await dispatchFetch(worker.listeners, manifestRequest());
+
+    expect(response?.body).toBe('{"name":"v2"}');
+    expect(worker.puts).toContain(MANIFEST_URL);
+    expect((await worker.caches.match(manifestRequest()))?.body).toBe(
+      '{"name":"v2"}',
+    );
+  });
+
+  it("serves but does not store a no-store manifest", async () => {
+    const worker = runWorker(async () =>
+      fakeResponse('{"name":"v2"}', { "cache-control": "no-store" }),
+    );
+    const cache = await worker.caches.open("macro-tracker-v3");
+    await cache.put(manifestRequest(), fakeResponse('{"name":"v1"}'));
+    worker.puts.length = 0;
+
+    const response = await dispatchFetch(worker.listeners, manifestRequest());
+
+    expect(response?.body).toBe('{"name":"v2"}');
+    expect(worker.puts).toHaveLength(0);
+    expect((await worker.caches.match(manifestRequest()))?.body).toBe(
+      '{"name":"v1"}',
+    );
+  });
+
+  it("falls back to the cached manifest when offline", async () => {
+    const worker = runWorker(async () => {
+      throw new TypeError("offline");
+    });
+    const cache = await worker.caches.open("macro-tracker-v3");
+    await cache.put(manifestRequest(), fakeResponse('{"name":"v1"}'));
+
+    const response = await dispatchFetch(worker.listeners, manifestRequest());
+
+    expect(response?.body).toBe('{"name":"v1"}');
+  });
+
+  it("ignores non-GET requests and cleans up old cache versions", async () => {
+    const worker = runWorker(async () => fakeResponse("never"));
+    await (await worker.caches.open("macro-tracker-v2")).put(
+      manifestRequest(),
+      fakeResponse("old"),
+    );
+    await worker.caches.open("macro-tracker-v3");
+
+    const post = await dispatchFetch(worker.listeners, {
+      ...manifestRequest(),
+      method: "POST",
+    });
+    expect(post).toBeUndefined();
+
+    await dispatchActivate(worker.listeners);
+    expect(await worker.caches.keys()).toEqual(["macro-tracker-v3"]);
+  });
+});