fix(03-04): on-screen diagnostic probe — WA version/platform, initData char-count, session + location categories

web/src/main.ts

@@ -28,6 +28,7 @@ import { createPositionMarker } from "./map/marker.ts";
 import { createFollowController } from "./map/follow.ts";
 import { createStatusStrip } from "./ui/strip.ts";
 import { buildBootCard, buildDeniedCard, buildSignalLostCard, startGantry, stopGantry } from "./ui/cards.ts";
+import { createProbe } from "./ui/probe.ts";
 import { createRecenterControl } from "./ui/recenter.ts";
 import { getWebApp } from "./telegram/webapp.ts";
 import { watchTheme } from "./telegram/theme.ts";
@@ -97,6 +98,11 @@ async function boot(): Promise<void> {
     if (lastFix !== null && map !== null) follow?.follow(lastFix);
   });
 
+  // DEBUG-ROUND probe: category-only on-screen telemetry for the device
+  // matrix (webview has no dev-tools); removed at the exit.
+  const probe = createProbe(mainEl);
+  probe.set({ wa: wa ? `${wa.version ?? "?"}/${wa.platform ?? "?"}` : "none", initDataChars: wa ? wa.initData.length : null });
+
   // Cards are built once at boot (boot-time locale) and reused across re-runs.
   const bootCard1 = buildBootCard(locale, 1);
   const bootCard2 = buildBootCard(locale, 2);
@@ -182,6 +188,7 @@ async function boot(): Promise<void> {
   }
 
   function renderState(state: LocationState): void {
+    probe.set({ location: state.kind });
     const ageSec = lastFix !== null ? fixAgeSeconds(lastFix, Date.now()) : null;
     const accuracyM = lastFix !== null ? lastFix.accuracyM : null;
     strip.render(state, ageSec, accuracyM);
@@ -233,6 +240,7 @@ async function boot(): Promise<void> {
   async function runFromSession(): Promise<void> {
     renderState({ kind: "validating" });
     const session = await createSession(wa?.initData ?? "");
+    probe.set({ session: session.ok ? "ok" : session.reason, initDataChars: wa ? wa.initData.length : null });
     if (!session.ok) {
       staleHandled = false; // session-first failure is boot-level, not a stale-fix recovery
       renderDenied();

web/src/shell.css

@@ -91,3 +91,8 @@ main { position: fixed; inset: 0; }
 .pos-group[data-stale="true"] { opacity: 0.4; }
 
 /* No CSS transition or animation anywhere — state changes are instant hard swaps. */
+
+/* DEBUG-ROUND probe — on-screen category-only telemetry for the device-matrix
+   loop (no dev-tools in a phone webview). Removed at the exit. Layout-only
+   positioning; the label typography is the existing label-sm token. */
+.diag-probe { position: absolute; left: var(--spacing-margin); bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm)); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--color-soft-beige); z-index: 10; pointer-events: none; }

web/src/ui/probe.ts

@@ -0,0 +1,47 @@
+/*
+ * probe.ts — DEBUG-ROUND diagnostic line (phase 3 device-matrix troubleshooting).
+ * ----------------------------------------------------------------------------
+ * One category-only instrument line, fixed bottom-left: which WebApp the app
+ * sees (version/platform), the character-count of the raw initData (a COUNT,
+ * never its content), the last session-gate category, and the location-chain
+ * category. No coordinates, no payload, no ids — same law as the Worker's
+ * category-only logs (D-14), only surfaced on-screen because a phone
+ * webview has no dev-tools access during the device-matrix pass.
+ *
+ * Rendering uses only machine tokens (letters, digits, separators) — no
+ * human copy, so no strings-module entry and no COPY5 concern. The probe is
+ * expected to be REMOVED or reduced at the device-matrix exit.
+ */
+export interface ProbeParts {
+  wa: string;
+  initDataChars: number | null;
+  session: string;
+  location: string;
+}
+
+export interface Probe {
+  el: HTMLElement;
+  set(parts: Partial<ProbeParts>): void;
+}
+
+export function createProbe(parent: HTMLElement): Probe {
+  const el = document.createElement("div");
+  el.className = "diag-probe";
+  el.setAttribute("aria-hidden", "true");
+  const parts: ProbeParts = { wa: "-", initDataChars: null, session: "-", location: "-" };
+  const state = { parts };
+  function render(): void {
+    const p = state.parts;
+    const q = p.initDataChars === null ? "-" : `${p.initDataChars}ch`;
+    el.textContent = `WA ${p.wa} · q ${q} · s ${p.session} · loc ${p.location}`;
+  }
+  parent.appendChild(el);
+  render();
+  return {
+    el,
+    set(delta: Partial<ProbeParts>): void {
+      Object.assign(state.parts, delta);
+      render();
+    },
+  };
+}