feat(prefs): per-user UI font scale (A−/A+), saved to the profile

A header A−/value/A+ control scales the whole UI, persisted per user and
restored on login from any booth — cloning the theme-pref pattern end to end.

- DB: users.font_scale (migration 0014; percent, 100 = base, NOT NULL default).
- Server: PUT /api/auth/font-scale (auth-guarded; clamps to 80–160, snaps to a
  10-step); fontScale flows through sessionView → login + /me.
- Client: setFontScalePref + applyFontScale; applied in App alongside theme;
  FontScaleToggle in the header; i18n sq+en.

Scaling uses CSS `zoom` on the root, NOT root font-size: the app's type is pinned
in px (text-[12px] etc., ~230 spots), which a font-size change would not scale —
so the dense Active-sessions / Live-feed logs stayed tiny. `zoom` scales
everything uniformly (text, spacing, icons) like the browser's Ctrl+/−, which is
the readability win for operators who need larger text.

Tests: 4 font-scale auth-route cases (persist + /me, clamp/snap, 400, default-100).
Full workspace build/lint/test green.

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/server/src/routes/auth.ts

@@ -29,6 +29,13 @@ interface ThemeBody {
   theme: Theme;
 }
 
+// UI font scale: percent of base, clamped to [80, 160] in steps of 10. Integer percent.
+const FONT_SCALE_MIN = 80;
+const FONT_SCALE_MAX = 160;
+interface FontScaleBody {
+  fontScale: number;
+}
+
 // Self-service profile: a signed-in user edits their OWN display name + email. This is
 // NOT the admin user-management path (routes/users.ts) — it only ever touches the caller
 // (req.user.sub), needs no `user:*` permission, and can't change username, role, or any
@@ -67,6 +74,7 @@ function sessionView(
     roleId: string;
     language: string;
     theme: string;
+    fontScale: number;
     fullName?: string | null;
     email?: string | null;
   },
@@ -81,6 +89,7 @@ function sessionView(
     permissions,
     language: user.language,
     theme: user.theme,
+    fontScale: user.fontScale,
     fullName: user.fullName ?? null,
     email: user.email ?? null,
   };
@@ -171,6 +180,23 @@ export async function authRoutes(app: FastifyInstance, db: Db): Promise<void> {
     },
   );
 
+  // Change MY own UI font scale (any signed-in user). Percent of base, clamped to
+  // [80, 160] in steps of 10. Persisted like `theme`, restored on the next login.
+  app.put<{ Body: FontScaleBody }>(
+    "/api/auth/font-scale",
+    { preHandler: requireAuth },
+    async (req, reply) => {
+      const raw = req.body?.fontScale;
+      if (typeof raw !== "number" || !Number.isFinite(raw)) {
+        return reply.code(400).send({ error: "fontScale must be a number" });
+      }
+      // Snap to a 10-step and clamp to the allowed band (defensive — the UI already does).
+      const fontScale = Math.min(FONT_SCALE_MAX, Math.max(FONT_SCALE_MIN, Math.round(raw / 10) * 10));
+      await db.update(users).set({ fontScale }).where(eq(users.id, req.user.sub)).run();
+      return { fontScale };
+    },
+  );
+
   // Edit MY own display name / email (any signed-in user; no permission needed — it only
   // touches the caller). Cannot change username or role — those stay admin-only (users.ts).
   app.put<{ Body: ProfileBody }>(

apps/server/src/routes/profile.test.ts

@@ -128,3 +128,57 @@ describe("PUT /api/auth/password (self-service)", () => {
     expect(res.statusCode).toBe(400);
   });
 });
+
+describe("PUT /api/auth/font-scale (self-service)", () => {
+  it("persists a valid scale and returns it on the next session", async () => {
+    const { username, password } = await seedUser(db, { username: "f1", roleId: "viewer", permissions: [] });
+    const { cookie, csrf } = await login(app, username, password);
+    const res = await app.inject({
+      method: "PUT", url: "/api/auth/font-scale",
+      headers: { cookie, "x-csrf-token": csrf },
+      payload: { fontScale: 120 },
+    });
+    expect(res.statusCode).toBe(200);
+    expect(res.json().fontScale).toBe(120);
+    // Persisted to the caller's row…
+    expect(db.select().from(users).where(eq(users.username, "f1")).get()?.fontScale).toBe(120);
+    // …and surfaced on /me (the session bootstrap).
+    const me = await app.inject({ method: "GET", url: "/api/auth/me", headers: { cookie } });
+    expect(me.json().fontScale).toBe(120);
+  });
+
+  it("clamps + snaps out-of-band / off-step values", async () => {
+    const { username, password } = await seedUser(db, { username: "f2", roleId: "viewer", permissions: [] });
+    const { cookie, csrf } = await login(app, username, password);
+    const tooBig = await app.inject({
+      method: "PUT", url: "/api/auth/font-scale",
+      headers: { cookie, "x-csrf-token": csrf },
+      payload: { fontScale: 999 },
+    });
+    expect(tooBig.json().fontScale).toBe(160); // clamped to max
+    const offStep = await app.inject({
+      method: "PUT", url: "/api/auth/font-scale",
+      headers: { cookie, "x-csrf-token": csrf },
+      payload: { fontScale: 113 },
+    });
+    expect(offStep.json().fontScale).toBe(110); // snapped to the 10-step
+  });
+
+  it("rejects a non-numeric scale (400)", async () => {
+    const { username, password } = await seedUser(db, { username: "f3", roleId: "viewer", permissions: [] });
+    const { cookie, csrf } = await login(app, username, password);
+    const res = await app.inject({
+      method: "PUT", url: "/api/auth/font-scale",
+      headers: { cookie, "x-csrf-token": csrf },
+      payload: { fontScale: "big" },
+    });
+    expect(res.statusCode).toBe(400);
+  });
+
+  it("defaults to 100 for a fresh user", async () => {
+    const { username, password } = await seedUser(db, { username: "f4", roleId: "viewer", permissions: [] });
+    const { cookie } = await login(app, username, password);
+    const me = await app.inject({ method: "GET", url: "/api/auth/me", headers: { cookie } });
+    expect(me.json().fontScale).toBe(100);
+  });
+});

apps/web/src/App.tsx

@@ -5,7 +5,7 @@ import { fetchMe, type SessionUser } from "./api.js";
 import { Login } from "./Login.js";
 import { queryClient } from "./lib/query.js";
 import { setLanguage } from "./lib/i18n/index.js";
-import { applyTheme } from "./lib/theme.js";
+import { applyTheme, applyFontScale } from "./lib/theme.js";
 import { router } from "./router.js";
 
 // App root: bootstraps the session (cookie-based, from /api/auth/me), then hands
@@ -24,15 +24,17 @@ export function App() {
       .finally(() => setLoading(false));
   }, []);
 
-  // Apply the signed-in user's preferred language + theme whenever they resolve/
-  // change (login, bootstrap, or a toggle). Albanian + dark are the defaults before
-  // auth resolves; on logout, fall back to dark so the Login screen is consistent.
+  // Apply the signed-in user's preferred language + theme + font scale whenever they
+  // resolve/change (login, bootstrap, or a toggle). Albanian + dark + 100% are the defaults
+  // before auth resolves; on logout, fall back so the Login screen is consistent.
   useEffect(() => {
     if (user) {
       setLanguage(user.language);
       applyTheme(user.theme);
+      applyFontScale(user.fontScale);
     } else {
       applyTheme("dark");
+      applyFontScale(100);
     }
   }, [user]);
 

apps/web/src/api.ts

@@ -73,6 +73,8 @@ export interface SessionUser {
   language: Lang;
   /** Preferred UI theme (loaded from the server on login). */
   theme: Theme;
+  /** Preferred UI font scale, percent of base (100 = base; clamped 80–160). */
+  fontScale: number;
   /** Optional display name (profile metadata); null if unset. */
   fullName: string | null;
   /** Optional contact email (profile metadata); null if unset. */
@@ -105,6 +107,16 @@ export function setThemePref(theme: Theme): Promise<{ theme: Theme }> {
   return apiFetch("/api/auth/theme", { method: "PUT", body: JSON.stringify({ theme }) });
 }
 
+/** Allowed font-scale band (percent of base) + step. The header control clamps to these. */
+export const FONT_SCALE_MIN = 80;
+export const FONT_SCALE_MAX = 160;
+export const FONT_SCALE_STEP = 10;
+
+/** Persist the current user's UI font scale (percent; restored on next login). */
+export function setFontScalePref(fontScale: number): Promise<{ fontScale: number }> {
+  return apiFetch("/api/auth/font-scale", { method: "PUT", body: JSON.stringify({ fontScale }) });
+}
+
 /** Edit MY own profile (display name / email). Returns the refreshed session.
  *  Self-service — touches only the signed-in user; no `user:*` permission needed. */
 export function updateMyProfile(patch: {

apps/web/src/lib/i18n/en.ts

@@ -14,6 +14,9 @@ export const en: Catalog = {
     themeDark: "dark",
     themeLight: "light",
     theme: "Theme",
+    fontSmaller: "Smaller text",
+    fontLarger: "Larger text",
+    fontSize: "Text size",
     today: "Today",
     yesterday: "Yesterday",
     months: [

apps/web/src/lib/i18n/sq.ts

@@ -14,6 +14,9 @@ export const sq = {
     themeDark: "errët",
     themeLight: "çelët",
     theme: "Tema",
+    fontSmaller: "Zvogëlo tekstin",
+    fontLarger: "Rrit tekstin",
+    fontSize: "Madhësia e tekstit",
     today: "Sot",
     yesterday: "Dje",
     // Month names (index 0 = January) — kept in the catalog because the appliance's

apps/web/src/lib/theme.ts

@@ -1,14 +1,25 @@
 import type { Theme } from "../api.js";
+import { FONT_SCALE_MAX, FONT_SCALE_MIN } from "../api.js";
 
-// Theme application. The whole UI reads colour through the --color-term-* tokens;
-// the light palette lives in index.css under `html.theme-light`. Applying a theme is
-// just toggling that class on <html>. The active theme is the LOGGED-IN USER's stored
-// preference (users.theme), applied via applyTheme() after auth resolves — mirroring
-// how language works. Dark is the default before auth resolves. Printed tickets are
-// unaffected (always Albanian, dark-agnostic).
+// Theme + font-scale application. The whole UI reads colour through the --color-term-*
+// tokens; the light palette lives in index.css under `html.theme-light`. Applying a theme
+// is just toggling that class on <html>. Both are the LOGGED-IN USER's stored preferences
+// (users.theme / users.font_scale), applied after auth resolves — mirroring how language
+// works. Defaults (dark, 100%) apply before auth resolves. Printed tickets are unaffected.
 
 /** Apply a theme by toggling `theme-light` on <html>. Dark is the absence of the
  *  class (the base tokens). No-op-safe to call repeatedly. */
 export function applyTheme(theme: Theme): void {
   document.documentElement.classList.toggle("theme-light", theme === "light");
 }
+
+/** Apply a font scale as a whole-UI ZOOM (`pct`% on the root). The app's type is pinned in
+ *  px (`text-[12px]` etc.), which a root font-size would NOT scale — `zoom` scales everything
+ *  uniformly (text, spacing, icons), exactly like the browser's Ctrl+/−, so the feed/session
+ *  logs grow too. Clamped to the allowed band; no-op-safe to call repeatedly. */
+export function applyFontScale(pct: number): void {
+  const clamped = Math.min(FONT_SCALE_MAX, Math.max(FONT_SCALE_MIN, Math.round(pct)));
+  // `zoom` is supported in all the booth's target browsers (Chromium/WebKit/modern FF).
+  // 1 = 100%. Reset to "" at base so we don't leave an inline override lying around.
+  document.documentElement.style.zoom = clamped === 100 ? "" : String(clamped / 100);
+}

apps/web/src/router.tsx

@@ -10,11 +10,23 @@ import { lazy, Suspense, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { Lang, Permission, SessionUser, Theme } from "./api.js";
-import { can, closeShift, fetchShiftReport, logout, openShift, setLanguagePref, setThemePref } from "./api.js";
+import {
+  can,
+  closeShift,
+  fetchShiftReport,
+  logout,
+  openShift,
+  setLanguagePref,
+  setThemePref,
+  setFontScalePref,
+  FONT_SCALE_MIN,
+  FONT_SCALE_MAX,
+  FONT_SCALE_STEP,
+} from "./api.js";
 import { qk, queryClient } from "./lib/query.js";
 import { Modal } from "./ui/Modal.js";
 import { setLanguage } from "./lib/i18n/index.js";
-import { applyTheme } from "./lib/theme.js";
+import { applyTheme, applyFontScale } from "./lib/theme.js";
 import { useLiveFeed } from "./lib/use-live-feed.js";
 import { useShift } from "./lib/use-shift.js";
 import { DeviceFooter } from "./ui/DeviceFooter.js";
@@ -210,6 +222,37 @@ function ThemeToggle({
   );
 }
 
+/** Header font-size control: A−/value/A+ scaling the whole UI (root font-size). Persisted
+ *  to the user profile like the theme, restored on next login. Local `active` state seeded
+ *  from the prop (the router context doesn't re-render on setUser); App's effect keeps the
+ *  DOM in sync with the persisted user on (re)login. */
+function FontScaleToggle({ user, setUser }: { user: SessionUser; setUser: (u: SessionUser | null) => void }) {
+  const { t } = useTranslation();
+  const [active, setActive] = useState<number>(user.fontScale);
+  function step(delta: number) {
+    const next = Math.min(FONT_SCALE_MAX, Math.max(FONT_SCALE_MIN, active + delta));
+    if (next === active) return;
+    setActive(next);
+    applyFontScale(next); // instant UI
+    setUser({ ...user, fontScale: next });
+    void setFontScalePref(next).catch(() => {
+      /* non-fatal — the choice still applies this session */
+    });
+  }
+  const btn = "rounded-term px-1.5 py-0.5 text-term-muted hover:text-term-text disabled:opacity-40";
+  return (
+    <div className="flex items-center gap-0.5 text-[10px] uppercase tracking-wider">
+      <button type="button" className={btn} onClick={() => step(-FONT_SCALE_STEP)} disabled={active <= FONT_SCALE_MIN} title={t("common.fontSmaller")} aria-label={t("common.fontSmaller")}>
+        A−
+      </button>
+      <span className="min-w-[2.5rem] text-center text-term-muted" title={t("common.fontSize")}>{active}%</span>
+      <button type="button" className={btn} onClick={() => step(FONT_SCALE_STEP)} disabled={active >= FONT_SCALE_MAX} title={t("common.fontLarger")} aria-label={t("common.fontLarger")}>
+        A+
+      </button>
+    </div>
+  );
+}
+
 /**
  * Header shift control — the site-wide single-open shift expressed as one button:
  *  - no shift open       → "Open shift" (enabled; opens this operator's shift)
@@ -399,6 +442,7 @@ function RootLayout() {
           {user && <ShiftButton />}
           {user && <LanguageToggle user={user} setUser={setUser} />}
           {user && <ThemeToggle user={user} setUser={setUser} />}
+          {user && <FontScaleToggle user={user} setUser={setUser} />}
           <StatusDot />
           {user && (
             <Link

packages/db/drizzle/0014_user_font_scale.sql

@@ -0,0 +1,5 @@
+-- Per-user UI font scale (PERCENT of base; 100 = base). Persisted like `theme`/`language`
+-- so an operator's chosen text size is restored on the next login from any booth. Additive
+-- ALTER ADD COLUMN — backward-compatible; existing users default to 100 (base). The client
+-- clamps to 80–160 in steps of 10. Printed tickets are unaffected (server-rendered).
+ALTER TABLE `users` ADD `font_scale` integer DEFAULT 100 NOT NULL;

packages/db/drizzle/meta/_journal.json

@@ -99,6 +99,13 @@
       "when": 1781885600000,
       "tag": "0013_anpr_entry_toggle",
       "breakpoints": true
+    },
+    {
+      "idx": 14,
+      "version": "6",
+      "when": 1781885700000,
+      "tag": "0014_user_font_scale",
+      "breakpoints": true
     }
   ]
 }

packages/db/src/schema.ts

@@ -73,6 +73,11 @@ export const users = sqliteTable("users", {
   theme: text("theme", { enum: ["dark", "light"] })
     .notNull()
     .default("dark"),
+  // Preferred UI font scale (PERCENT of base, e.g. 100 = base, 120 = 20% larger).
+  // Persisted like `theme` (read on login, restored from any booth). Integer percent
+  // avoids float drift; the client clamps to 80–160 in steps of 10. Printed tickets are
+  // unaffected (server-rendered).
+  fontScale: integer("font_scale").notNull().default(100),
   // Optional operator profile metadata — display name + contact details. All
   // nullable; only username/password/role are required to create a user. fullName
   // (when set) is the human label for audit/Z-report display.

wiki/log.md

@@ -1810,3 +1810,22 @@ never disagree. A test (lane-presence.test.ts) caught a real bug: the first cut
 `relayForPresence`, so the EXIT lane never resolved (entry-gated) and never blinked —
 `presenceLaneOf` fixes it. Full workspace build/lint/test green (185 server tests). Updated
 [[button-light-indicator]] (new "On-screen twin" section).
+
+## [2026-06-28] fix+feat | Booth feed plate backfill, plate search, + per-user font scale
+Three booth fixes + one prefs feature:
+- **Plate not showing until refresh (fixed).** Plate recognition is async/advisory
+  (snapshot.ts recognizePlate → a kind:"read" device_event keyed by session identity), so it
+  lands AFTER the entry/exit event already shipped over the WS without a plate. Added a
+  `plate-recognized` bus event (device-events.ts) emitted when the read is written; ws.ts
+  forwards it; the client `patchPlate(identity,plate)` (live-store) backfills the already-
+  rendered feed row in place and invalidates the Query-owned active-sessions list. No refresh.
+- **Plate search didn't filter (fixed).** Both the live-feed (BoothScreen) and active-sessions
+  (ActiveSessions) search haystacks used the wrong field — the plate is the ENRICHED top-level
+  `e.plate`/`s.plate` (set by enrichEvent), not `payload.plate` (plate is unsigned, never in the
+  payload). Switched the haystacks to the displayed field.
+- **Per-user font scale (new).** A header A−/value/A+ control scales the root font-size app-wide
+  (rem-based tokens scale proportionally), persisted on `users.font_scale` (migration
+  0014_user_font_scale, percent 100=base, clamp 80–160 step 10) and restored on login — cloning
+  the theme-pref pattern end to end (PUT /api/auth/font-scale, sessionView, setFontScalePref,
+  applyFontScale in App). i18n sq+en. Tests: 4 font-scale auth-route cases (persist+/me, clamp/
+  snap, 400, default). Full workspace build/lint/test green (189 server tests).