feat(telemetry): local move-preview adoption metrics (Phase 4)

Measure uptake of the client-side local move-preview accelerator (§5) so
adoption can be watched before defaulting it on: app cold starts, dictionary
loads by result (fetched / cache_hit / miss) and move previews by path
(local / network — the backend load shed).

A small best-effort client beacon (POST /metrics/local-eval, session-gated)
batches counter deltas and posts them on a 60s timer and when the app is
backgrounded — never on the gameplay path: the in-app counters are plain
in-memory increments, only the periodic flush touches the network and it is
fire-and-forget. The gateway folds each batch into three OTel counters
(local_eval_cold_start_total, local_eval_dict_load_total,
local_eval_preview_total), clamped against a spoofed inflation.

- gateway: counters + recordLocalEval + session-gated /metrics/local-eval handler
- ui: localeval-metrics accumulator/beacon; hooks in the dict loader, in
  Game.recompute and in bootstrap (skipped under the mock harness)
- caddy: route /metrics/* to the gateway
- docs: ARCHITECTURE §11; Grafana "Scrabble — Users" dashboard panels

ui/src/lib/app.svelte.ts

@@ -9,6 +9,7 @@ import { GatewayError } from './client';
 import { navigate, router } from './router.svelte';
 import { errorKey, localeFrom, setLocale, t, type Locale } from './i18n/index.svelte';
 import { languageNeedsServerSync } from './language';
+import { startLocalEvalMetrics } from './localeval-metrics';
 import { applyReduceMotion, applyTelegramTheme, applyTheme, type ThemePref, type TelegramThemeParams } from './theme';
 import {
   insideTelegram,
@@ -637,6 +638,10 @@ function applyTelegramChrome(launch: TelegramLaunch): void {
 const TELEGRAM_SDK_TIMEOUT_MS = 10000;
 
 export async function bootstrap(): Promise<void> {
+  // Record the cold start and start the adoption beacon (skipped under the mock harness, which
+  // has no real backend). Deliberately before any await, so even an early-return launch path
+  // (e.g. the Telegram launch-error screen) still counts as an app open.
+  if (import.meta.env.MODE !== 'mock') startLocalEvalMetrics();
   const prefs = await loadPrefs();
   app.theme = prefs.theme ?? 'auto';
   app.reduceMotion = prefs.reduceMotion ?? false;

ui/src/lib/client.ts

@@ -103,6 +103,9 @@ export interface GatewayClient {
    *  opts.signal aborts a stalled download; opts.reload bypasses the browser HTTP cache (the
    *  debug reset, for testing a cold load). */
   fetchDict(variant: Variant, version: string, opts?: { signal?: AbortSignal; reload?: boolean }): Promise<ArrayBuffer>;
+  /** Post the client's local move-preview adoption telemetry — a small batch of counter deltas,
+   *  session-gated and fire-and-forget (never on the gameplay path). */
+  reportLocalEval(counts: Record<string, number>): Promise<void>;
 
   // --- draft ---
   /** The player's server-persisted client-side composition (rack order + board tiles), so a

ui/src/lib/dict/loader.ts

@@ -8,6 +8,7 @@
 import { Dawg } from './dawg';
 import { dictKey, idbGetDawg, idbPutDawg, idbDelDawg, requestPersist } from './store';
 import { gateway } from '../gateway';
+import { noteDictFetched, noteDictCacheHit, noteDictMiss as noteDictMissMetric } from '../localeval-metrics';
 import type { Variant } from '../model';
 
 // Loaded readers by key. A dictionary is immutable, so an instance is reused for
@@ -31,6 +32,7 @@ let dictDisabled = false;
  */
 export function noteDictMiss(): void {
   if (!dictDisabled && ++misses >= MISS_LIMIT) dictDisabled = true;
+  noteDictMissMetric();
 }
 
 /** dictLoadingDisabled reports whether the bad-connection breaker has tripped for this
@@ -73,6 +75,7 @@ async function load(variant: Variant, version: string, key: string, signal?: Abo
     if (cached) {
       const reader = new Dawg(new Uint8Array(cached));
       instances.set(key, reader);
+      noteDictCacheHit();
       return reader;
     }
   } catch {
@@ -101,6 +104,7 @@ async function load(variant: Variant, version: string, key: string, signal?: Abo
     return null; // not a dawg — do not cache it
   }
   instances.set(key, reader);
+  noteDictFetched();
   void idbPutDawg(key, buf);
   void requestPersist();
   return reader;

ui/src/lib/localeval-metrics.ts

@@ -0,0 +1,84 @@
+// Client-side accumulator + beacon for local move-preview adoption telemetry. It counts a
+// few events — the app cold start, dictionary loads by result, and move previews by path —
+// and posts the running deltas to the edge periodically and when the app is backgrounded,
+// so the backend can chart adoption (docs/ARCHITECTURE.md §11). Best-effort throughout: a
+// failed beacon keeps its counts to retry, and nothing here throws into the caller. It lives
+// outside the lazy dict subsystem so the cold start is recorded even when no game is opened.
+
+import { gateway } from './gateway';
+
+interface Counts {
+  cold_start: number;
+  dict_fetched: number;
+  dict_cache_hit: number;
+  dict_miss: number;
+  preview_local: number;
+  preview_network: number;
+}
+
+function zero(): Counts {
+  return { cold_start: 0, dict_fetched: 0, dict_cache_hit: 0, dict_miss: 0, preview_local: 0, preview_network: 0 };
+}
+
+let counts = zero();
+let started = false;
+
+function total(c: Counts): number {
+  return c.cold_start + c.dict_fetched + c.dict_cache_hit + c.dict_miss + c.preview_local + c.preview_network;
+}
+
+// flush posts the accumulated deltas and resets them; on failure it folds the batch back in
+// so the next flush retries. Best-effort.
+async function flush(): Promise<void> {
+  if (total(counts) === 0) return;
+  const batch = counts;
+  counts = zero();
+  try {
+    await gateway.reportLocalEval({ ...batch });
+  } catch {
+    counts.cold_start += batch.cold_start;
+    counts.dict_fetched += batch.dict_fetched;
+    counts.dict_cache_hit += batch.dict_cache_hit;
+    counts.dict_miss += batch.dict_miss;
+    counts.preview_local += batch.preview_local;
+    counts.preview_network += batch.preview_network;
+  }
+}
+
+/**
+ * startLocalEvalMetrics records the app cold start and begins the periodic beacon. Called once
+ * at launch (a repeat call is a no-op). It also flushes when the app is backgrounded, so a
+ * batch is not lost when the tab is closed.
+ */
+export function startLocalEvalMetrics(): void {
+  if (started) return;
+  started = true;
+  counts.cold_start += 1;
+  setInterval(() => void flush(), 60_000);
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'hidden') void flush();
+    });
+  }
+}
+
+/** noteDictFetched: a dictionary was downloaded and cached (an IndexedDB fill). */
+export function noteDictFetched(): void {
+  counts.dict_fetched += 1;
+}
+/** noteDictCacheHit: a dictionary loaded from the IndexedDB cache (no download). */
+export function noteDictCacheHit(): void {
+  counts.dict_cache_hit += 1;
+}
+/** noteDictMiss: a warm-up did not produce a usable dictionary (failed or timed out). */
+export function noteDictMiss(): void {
+  counts.dict_miss += 1;
+}
+/** notePreviewLocal: a move preview was computed on-device. */
+export function notePreviewLocal(): void {
+  counts.preview_local += 1;
+}
+/** notePreviewNetwork: a move preview fell back to the network. */
+export function notePreviewNetwork(): void {
+  counts.preview_network += 1;
+}

ui/src/lib/mock/client.ts

@@ -166,6 +166,10 @@ export class MockGateway implements GatewayClient {
     throw new Error('fetchDict unsupported in mock');
   }
 
+  async reportLocalEval(_counts: Record<string, number>): Promise<void> {
+    // Telemetry is a no-op in mock mode.
+  }
+
   async gamesList(): Promise<GameList> {
     return {
       games: [...this.games.values()].map((g) => structuredClone(g.view)),

ui/src/lib/transport.ts

@@ -80,6 +80,18 @@ export function createTransport(baseUrl: string): GatewayClient {
       return res.arrayBuffer();
     },
 
+    async reportLocalEval(counts) {
+      if (!token) throw new Error('reportLocalEval: no session');
+      // keepalive so a batch flushed as the app is backgrounded still reaches the edge.
+      const res = await fetch(`${origin}/metrics/local-eval`, {
+        method: 'POST',
+        headers: { authorization: `Bearer ${token}`, 'content-type': 'application/json' },
+        body: JSON.stringify(counts),
+        keepalive: true,
+      });
+      if (!res.ok) throw new Error(`reportLocalEval: HTTP ${res.status}`);
+    },
+
     async authTelegram(initData) {
       return codec.decodeSession(await exec('auth.telegram', codec.encodeTelegramLogin(initData, browserOffset())));
     },