v0.2 Phase 0+1: planning doc + tooling baseline

Phase 0 — docs/release/v0.2-frontend-overhaul.md as single source of
truth for the v0.2 frontend coherence pass. Records hard rules,
tooling pins, sacred-behaviour contract list, wrapper catalogue,
per-page migration order, verification matrix, KI-05 plan, and the
explicit "DO NOT add Skeleton" line.

Phase 1 — tooling baseline. All exact-pinned per the plan:

- @playwright/test@1.60.0 + playwright@1.60.0 + @axe-core/playwright@4.11.3
- rollup-plugin-visualizer@7.0.1 (wired behind ANALYZE=1)
- @vitest/browser@4.1.6 + @vitest/browser-playwright@4.1.6 (provider)
- vitest-browser-svelte@2.1.1 (runes-aware Svelte 5 bridge)
- cargo-nextest installed globally

New configs: playwright.config.ts (frontend-only, dev:frontend webServer,
900x700 + 1440x900 projects, visual baselines deferred), vitest.browser.config.js
(separate from jsdom suite). New scripts: test:e2e, test:e2e:ui,
test:browser, analyze, test:rust:fast, guard:no-skeleton.

guard-no-skeleton.mjs walks package.json + package-lock + src/ for any
@skeletonlabs reference and exits 1 if found — locks in the no-Skeleton
hard rule for any future agent.

Smoke baseline (tests/e2e/smoke.spec.ts): 16 tests passing across two
viewports — app loads without Tauri runtime, keyboard nav, axe scan
(color-contrast deferred to Phase 7 per docs/release/v0.1-contrast-audit.md),
light/dark theme cycle, all three sensory zones (cave/energy/reset).
10 screenshots emitted to test-results/ as non-failing artefacts.

Surfaced + fixed two browser-preview bugs while landing the baseline:

- src/lib/utils/osInfo.ts: FALLBACK_BROWSER_INFO was evaluated at SSR
  module-load (navigator undefined → os: 'unknown'), and the UA check
  ran before navigator.platform — so Playwright's Windows-UA Chromium
  on a Linux runner detected as Windows, useCustomChrome went true,
  Titlebar mounted and tripped Tauri-only APIs. Now lazy-built per
  call; platform is the primary signal, UA only a fallback.

- src/lib/components/Titlebar.svelte: defensive hasTauriRuntime() guard
  on every handler and the $effect. Titlebar should not crash if any
  future code path mounts it without Tauri.

.gitignore: reports/, .playwright/, test-results/, playwright-report/.

Per-phase gate green: npm run check (0/0), npm test (0/0), npm run
test:e2e (16/16), npm run guard:no-skeleton (clean).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/lib/components/Titlebar.svelte

@@ -1,33 +1,48 @@
 <script lang="ts">
   import { getCurrentWindow } from "@tauri-apps/api/window";
   import { settings } from "$lib/stores/page.svelte.js";
+  import { hasTauriRuntime } from "$lib/utils/runtime.js";
 
   let { compact = false } = $props();
 
   let maximised = $state(false);
 
+  // Titlebar is normally gated behind useCustomChrome in the route layouts,
+  // which is false on Linux (native KWin/Mutter decorations) and false in
+  // any browser-preview context that mis-detects the OS. The defensive
+  // guard here keeps the component from crashing in any future code path
+  // that mounts it without a Tauri runtime — `getCurrentWindow()` reads
+  // window.__TAURI_INTERNALS__.metadata which is undefined in plain browsers.
+  const tauriPresent = hasTauriRuntime();
+
   async function handleMinimise() {
+    if (!tauriPresent) return;
     await getCurrentWindow().minimize();
   }
 
   async function handleMaximise() {
+    if (!tauriPresent) return;
     await getCurrentWindow().toggleMaximize();
     maximised = await getCurrentWindow().isMaximized();
   }
 
   async function handleClose() {
+    if (!tauriPresent) return;
     await getCurrentWindow().hide();
   }
 
   function handleDragStart(e: PointerEvent) {
+    if (!tauriPresent) return;
     if (e.button !== 0) return;
     if ((e.target as HTMLElement | null)?.closest("button")) return;
     try { (e.currentTarget as HTMLElement | null)?.setPointerCapture?.(e.pointerId); } catch {}
     getCurrentWindow().startDragging();
   }
 
-  // Track maximise state
+  // Track maximise state. Skipped without Tauri; getCurrentWindow().onResized
+  // throws because the underlying Window object has no `metadata`.
   $effect(() => {
+    if (!tauriPresent) return;
     let unlisten: (() => void) | undefined;
     getCurrentWindow().onResized(async () => {
       maximised = await getCurrentWindow().isMaximized();

src/lib/utils/osInfo.ts

@@ -30,23 +30,37 @@ interface OsInfo {
 
 let cached: OsInfo | null = null;
 
-const FALLBACK_BROWSER_INFO = {
-  os: detectBrowserOs(),
-  arch: 'unknown',
-  family: detectBrowserFamily(),
-  usesCmd: detectBrowserOs() === 'macos',
-  isWayland: false,
-  customHotkeyBackend: false,
-  primaryModifierLabel: detectBrowserOs() === 'macos' ? 'Cmd' : 'Ctrl',
-};
+// Lazy fallback builder. The previous module-level constant evaluated
+// `navigator` during SvelteKit SSR — where it is undefined — so `os`
+// got frozen at `'unknown'` and `isLinux()` returned false even when
+// the page rendered in a real Linux browser. Building on demand reads
+// `navigator` at call-time, which is always client-side.
+function buildBrowserFallback(): OsInfo {
+  const browserOs = detectBrowserOs();
+  return {
+    os: browserOs,
+    arch: 'unknown',
+    family: detectBrowserFamily(),
+    usesCmd: browserOs === 'macos',
+    isWayland: false,
+    customHotkeyBackend: false,
+    primaryModifierLabel: browserOs === 'macos' ? 'Cmd' : 'Ctrl',
+  };
+}
 
 function detectBrowserOs() {
   if (typeof navigator === 'undefined') return 'unknown';
-  const ua = (navigator.userAgent || '').toLowerCase();
+  // navigator.platform is the truthful OS surface and survives UA spoofing
+  // (e.g. Playwright's Chromium reports a Windows UA on Linux runners). UA
+  // is consulted only as a fallback when platform is empty or unrecognised.
   const platform = (navigator.platform || '').toLowerCase();
-  if (platform.includes('mac') || ua.includes('mac os')) return 'macos';
-  if (platform.includes('win') || ua.includes('windows')) return 'windows';
-  if (platform.includes('linux') || ua.includes('linux')) return 'linux';
+  if (platform.includes('mac')) return 'macos';
+  if (platform.includes('win')) return 'windows';
+  if (platform.includes('linux')) return 'linux';
+  const ua = (navigator.userAgent || '').toLowerCase();
+  if (ua.includes('mac os')) return 'macos';
+  if (ua.includes('windows')) return 'windows';
+  if (ua.includes('linux')) return 'linux';
   return 'unknown';
 }
 
@@ -65,14 +79,14 @@ function detectBrowserFamily() {
 export async function loadOsInfo(): Promise<OsInfo> {
   if (cached) return cached;
   if (!hasTauriRuntime()) {
-    cached = FALLBACK_BROWSER_INFO;
+    cached = buildBrowserFallback();
     return cached;
   }
   try {
     cached = await invoke<OsInfo>("get_os_info");
   } catch (err) {
     console.warn('loadOsInfo: get_os_info failed, using browser fallback', err);
-    cached = FALLBACK_BROWSER_INFO;
+    cached = buildBrowserFallback();
   }
   return cached;
 }