From a9733544c0a3e059b59939a1c6719fd407d2311b Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Fri, 15 May 2026 08:51:55 +0100
Subject: [PATCH] =?UTF-8?q?v0.2=20Phase=206:=20shell=20split=20=E2=80=94?=
 =?UTF-8?q?=20AppRuntime=20/=20AppChrome=20/=20AppOverlays?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

src/routes/+layout.svelte was 537 LOC of mixed runtime, chrome and
overlay concerns. Split into three single-purpose shells under
src/lib/shell/, with +layout.svelte reduced to ~28 LOC of pure
composition.

AppRuntime (no DOM beyond <svelte:window>):
  - Global hotkey dual backend (evdev / tauri-plugin-global-shortcut)
  - 120ms hotkey debounce (sacred behaviour §5 #2)
  - PREFERENCES_CHANGED_EVENT listener (sacred §5 #4)
  - KI-05 one-shot legacy-theme migration
  - Sidebar hotkeys: [ toggle, Ctrl+K, Ctrl+, (sacred §5 #10)
  - Wind-down tray listener
  - Meeting auto-capture poller
  - Global frontend error capture
  - Nudge bus + implementation intentions lifecycle
  - Font-size CSS var $effect
  - Window resize → sidebar auto-collapse
  - Onboarding/first-run check + update check + LLM status warm-up

AppChrome (the visual shell):
  - Titlebar (OS-aware via customChrome helper)
  - Sidebar (recording-state-aware — sacred §5 #1 stays in
    Sidebar.svelte verbatim)
  - Main slot
  - TaskSidebar conditional rail

AppOverlays (mounted-once globals):
  - ToastViewport
  - FocusTimer
  - MorningTriageModal
  - ResizeHandles (OS-gated)

src/lib/utils/customChrome.svelte.ts holds the single source of truth
for useCustomChrome, a module-level $state both AppChrome and
AppOverlays subscribe to. Each only ever sees one loadOsInfo() call
between them.

Secondary windows still escape via their own +layout@.svelte; the
defensive isSecondaryWindow check in +layout.svelte stays so a
direct /float, /viewer, /preview navigation through the root layout
also drops the chrome.

Phase 6 per-page gate green: npm run check (0/0/5704 files),
npm test, npm run test:browser (3/3), npm run test:e2e (16/16).
No regressions in the Phase 1 smoke baseline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 docs/release/v0.2-frontend-overhaul.md |   2 +-
 src/lib/shell/AppChrome.svelte         |  43 ++
 src/lib/shell/AppOverlays.svelte       |  43 ++
 src/lib/shell/AppRuntime.svelte        | 399 ++++++++++++++++++
 src/lib/utils/customChrome.svelte.ts   |  26 ++
 src/routes/+layout.svelte              | 555 +------------------------
 6 files changed, 530 insertions(+), 538 deletions(-)
 create mode 100644 src/lib/shell/AppChrome.svelte
 create mode 100644 src/lib/shell/AppOverlays.svelte
 create mode 100644 src/lib/shell/AppRuntime.svelte
 create mode 100644 src/lib/utils/customChrome.svelte.ts

diff --git a/docs/release/v0.2-frontend-overhaul.md b/docs/release/v0.2-frontend-overhaul.md
index 601ed34..4cb799b 100644
--- a/docs/release/v0.2-frontend-overhaul.md
+++ b/docs/release/v0.2-frontend-overhaul.md
@@ -203,7 +203,7 @@ Filled during execution. Each entry: phase #, date, what landed, what's next.
 | 3 | ✅ complete | New tokens `--color-caution`, `--color-info`, `--color-accent-environment` (dark + light), `--color-warning` aliased to `var(--color-caution)`. KI-05 resolved: `theme` dropped from SettingsState type + defaults, all four route-layout migration `$effect`s deleted, two SettingsPage SegmentedButton bindings repointed to `preferences.theme` via Svelte 5 function bindings, one-shot legacy-theme migration on first mount strips the field after copying. Gate green (check 0/0, vitest 13/13, e2e 16/16). |
 | 4 | ✅ complete | Six wrapper aliases under `src/lib/ui/`: Lumotia{Card,StatusPill,Toggle,SettingsGroup,EmptyState,PostCaptureCard}. Same prop APIs, $bindable forwarded for Toggle. Underlying `src/lib/components/*.svelte` untouched. |
 | 5 | ✅ complete | 11 primitives shipped under `src/lib/ui/`. `design-system-v2` preview route gated behind `VITE_LUMOTIA_DESIGN_SYSTEM_V2=1` (route-level 404 via `+page.ts` load, not nav-hidden). Browser-mode component test (LumotiaButton): 3/3 passing in Chromium. Gate green (check 0/0/5700 files, vitest 0/0, test:browser 3/3, e2e 16/16). |
-| 6 | pending | Shell split |
+| 6 | ✅ complete | `src/routes/+layout.svelte` (537 LOC) split into `$lib/shell/AppRuntime.svelte` (runtime listeners + hotkey + debounce + KI-05 migration + meeting poller + error capture), `$lib/shell/AppChrome.svelte` (titlebar + sidebar + task rail), `$lib/shell/AppOverlays.svelte` (toasts + focus timer + triage modal + resize handles). Shared `useCustomChrome` flag moved into `src/lib/utils/customChrome.svelte.ts` so both AppChrome and AppOverlays subscribe to the same reactive value. +layout.svelte is now ~28 LOC of pure composition. Gate green. |
 | 7.1 ShutdownRitualPage | pending | |
 | 7.2 FilesPage | pending | |
 | 7.3 FirstRunPage | pending | |
diff --git a/src/lib/shell/AppChrome.svelte b/src/lib/shell/AppChrome.svelte
new file mode 100644
index 0000000..6af38f4
--- /dev/null
+++ b/src/lib/shell/AppChrome.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  // @ts-nocheck
+  // v0.2 Phase 6 — visual shell. Titlebar (OS-aware), sidebar
+  // (recording-state-aware), main slot, task rail slot.
+  //
+  // The recording-state nav fade behaviour (sacred — see
+  // docs/release/v0.2-frontend-overhaul.md §5 #1) lives in Sidebar
+  // itself and continues to work verbatim through this wrapper.
+  import { onMount } from "svelte";
+  import Sidebar from "$lib/Sidebar.svelte";
+  import TaskSidebar from "$lib/components/TaskSidebar.svelte";
+  import Titlebar from "$lib/components/Titlebar.svelte";
+  import { page } from "$lib/stores/page.svelte.js";
+  import {
+    ensureCustomChromeLoaded,
+    customChrome,
+  } from "$lib/utils/customChrome.svelte.ts";
+
+  let { children } = $props();
+
+  onMount(() => {
+    ensureCustomChromeLoaded();
+  });
+</script>
+
+<div class="flex flex-col h-screen w-screen overflow-hidden grain">
+  {#if customChrome.current}
+    <Titlebar />
+  {/if}
+  <div class="flex flex-1 min-h-0 relative">
+    {#if page.current !== "first-run"}
+      <Sidebar />
+    {/if}
+    <div class="flex-1 overflow-hidden bg-bg">
+      {@render children()}
+    </div>
+    {#if page.taskSidebarOpen && page.current !== "first-run"}
+      <div class="w-[280px] min-w-[280px] shadow-xl">
+        <TaskSidebar />
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/shell/AppOverlays.svelte b/src/lib/shell/AppOverlays.svelte
new file mode 100644
index 0000000..9cf2a30
--- /dev/null
+++ b/src/lib/shell/AppOverlays.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  // @ts-nocheck
+  // v0.2 Phase 6 — global overlays. Mounted once at the app root so
+  // any component can call toasts.error(...), fire lumotia:start-timer,
+  // and so the morning triage modal can layer over any page.
+  //
+  // ResizeHandles is OS-gated by customChrome (suppressed on Linux,
+  // which uses native KWin/Mutter resize edges).
+  import { onMount } from "svelte";
+  import ToastViewport from "$lib/components/ToastViewport.svelte";
+  import FocusTimer from "$lib/components/FocusTimer.svelte";
+  import MorningTriageModal from "$lib/components/MorningTriageModal.svelte";
+  import ResizeHandles from "$lib/components/ResizeHandles.svelte";
+  import {
+    ensureCustomChromeLoaded,
+    customChrome,
+  } from "$lib/utils/customChrome.svelte.ts";
+
+  onMount(() => {
+    ensureCustomChromeLoaded();
+  });
+</script>
+
+<!-- Global toast viewport. Mounted once so any component can call
+     toasts.error(...), toasts.success(...) etc. -->
+<ToastViewport />
+
+<!-- Global focus-timer overlay. Renders nothing until a
+     `lumotia:start-timer` event fires; then pins a shrinking
+     colour ring to the top-right. -->
+<FocusTimer />
+
+<!-- Phase 5 morning triage modal. Self-gated — no-op unless the user
+     has enabled `ritualsMorning` and the local clock is past their
+     set trigger time. Mounted here so it can appear over any page. -->
+<MorningTriageModal />
+
+<!-- Invisible resize margins for frameless (macOS/Windows). On Linux
+     we use native decorations, so ResizeHandles would compete with
+     the compositor's own resize and is suppressed. -->
+{#if customChrome.current}
+  <ResizeHandles />
+{/if}
diff --git a/src/lib/shell/AppRuntime.svelte b/src/lib/shell/AppRuntime.svelte
new file mode 100644
index 0000000..6d320ed
--- /dev/null
+++ b/src/lib/shell/AppRuntime.svelte
@@ -0,0 +1,399 @@
+<script lang="ts">
+  // @ts-nocheck
+  // v0.2 Phase 6 — runtime/background side of the app shell.
+  //
+  // Owns: Tauri listeners, evdev hotkey wiring, tauri-plugin-global-shortcut
+  // fallback, 120ms hotkey debounce, PREFERENCES_CHANGED_EVENT, update
+  // check, global frontend error capture, sidebar hotkeys ([, Ctrl+K,
+  // Ctrl+,), KI-05 legacy-theme one-shot migration, meeting auto-capture
+  // poller, nudge bus, implementation intentions, OS info warm-up.
+  //
+  // Does NOT render DOM — only <svelte:window onkeydown={…} />.
+  import { onMount, onDestroy } from "svelte";
+  import { invoke } from "@tauri-apps/api/core";
+  import { getCurrentWindow } from "@tauri-apps/api/window";
+  import { listen } from "@tauri-apps/api/event";
+  import { hasTauriRuntime } from "$lib/utils/runtime.js";
+  import { isMac, loadOsInfo } from "$lib/utils/osInfo.js";
+  import { page, settings, saveSettings } from "$lib/stores/page.svelte.js";
+  import {
+    getPreferences,
+    updatePreferences,
+    applyExternalPreferences,
+    PREFERENCES_CHANGED_EVENT,
+  } from "$lib/stores/preferences.svelte.js";
+  import { profilesStore } from "$lib/stores/profiles.svelte.ts";
+  import { toasts } from "$lib/stores/toasts.svelte.js";
+  import { initI18n } from "$lib/i18n";
+  import { refreshLlmStatus } from "$lib/stores/llmStatus.svelte.js";
+  import { startNudgeBus, stopNudgeBus } from "$lib/stores/nudgeBus.svelte.ts";
+  import {
+    startImplementationIntentions,
+    stopImplementationIntentions,
+  } from "$lib/stores/implementationIntentions.svelte.ts";
+
+  // Set up svelte-i18n once per app instance. Safe to call from every
+  // window — initI18n guards itself against re-init.
+  initI18n();
+
+  const prefs = getPreferences();
+  const tauriRuntimeAvailable = hasTauriRuntime();
+
+  // KI-05 v0.2 one-shot: copy legacy settings.theme into preferences.theme,
+  // then strip it from localStorage. Idempotent.
+  function migrateLegacyTheme() {
+    if (typeof localStorage === "undefined") return;
+    const raw = localStorage.getItem("lumotia_settings");
+    if (!raw) return;
+    let parsed;
+    try { parsed = JSON.parse(raw); } catch { return; }
+    const data = parsed?.data ?? parsed;
+    if (!data || typeof data !== "object" || !("theme" in data)) return;
+    const legacy = data.theme;
+    const mapped = legacy === "Light" ? "light" : legacy === "System" ? "system" : "dark";
+    if (mapped !== prefs.theme) updatePreferences({ theme: mapped });
+    delete data.theme;
+    if (parsed && typeof parsed === "object" && "data" in parsed) parsed.data = data;
+    else parsed = data;
+    try { localStorage.setItem("lumotia_settings", JSON.stringify(parsed)); } catch {}
+  }
+
+  // Global hotkey — dual backend (evdev on Wayland, tauri-plugin-global-
+  // shortcut elsewhere). Main-window-only.
+  let registeredHotkey = null;
+  let hotkeyBackend = $state("unknown");
+
+  async function initHotkeyBackend() {
+    if (!tauriRuntimeAvailable) {
+      hotkeyBackend = "unavailable";
+      return;
+    }
+    try {
+      const isWayland = await invoke("is_wayland_session");
+      if (isWayland) {
+        try {
+          await invoke("check_hotkey_access");
+          hotkeyBackend = "evdev";
+          console.log("Hotkey backend: evdev (Wayland)");
+        } catch (err) {
+          console.warn("evdev hotkey access denied:", err);
+          console.warn("Add your user to the 'input' group for global hotkeys on Wayland");
+          hotkeyBackend = "unavailable";
+        }
+      } else {
+        hotkeyBackend = "tauri";
+        console.log("Hotkey backend: tauri-plugin-global-shortcut (X11)");
+      }
+    } catch {
+      hotkeyBackend = "tauri";
+    }
+  }
+
+  async function registerGlobalHotkey(hotkey) {
+    if (!tauriRuntimeAvailable) return;
+    if (hotkeyBackend === "unknown") return;
+
+    try {
+      const label = (await import("@tauri-apps/api/window")).getCurrentWindow().label;
+      if (label !== "main") return;
+    } catch { /* main is the expected default */ }
+
+    try {
+      if (hotkeyBackend === "evdev") {
+        if (registeredHotkey) {
+          await invoke("update_evdev_hotkey", { hotkey });
+        } else {
+          await invoke("start_evdev_hotkey", { hotkey });
+        }
+        registeredHotkey = hotkey;
+      } else if (hotkeyBackend === "tauri") {
+        const mod = await import("@tauri-apps/plugin-global-shortcut");
+        if (registeredHotkey) {
+          await mod.unregister(registeredHotkey).catch(() => {});
+        }
+        await mod.register(hotkey, () => {
+          if (page.current !== "dictation") page.current = "dictation";
+          requestAnimationFrame(() => {
+            window.dispatchEvent(new CustomEvent("lumotia:toggle-recording"));
+          });
+        });
+        registeredHotkey = hotkey;
+      }
+    } catch (err) {
+      console.error("Hotkey registration failed:", err);
+      const msg = err instanceof Error ? err.message : String(err);
+      toasts.error(
+        "Hotkey not registered",
+        `${hotkey}. ${msg}. Reverted to ${registeredHotkey ?? "previous value"}.`,
+      );
+      if (registeredHotkey && registeredHotkey !== hotkey) {
+        settings.globalHotkey = registeredHotkey;
+        saveSettings();
+      }
+    }
+  }
+
+  // evdev hotkey debounce. autorepeat / sticky key / nervous double-tap
+  // can deliver the same press within ~100ms — without debouncing the
+  // recording toggle bounces twice and the capture is lost.
+  // Matches Handy #1143 ("first press records nothing, second works").
+  const HOTKEY_DEBOUNCE_MS = 120;
+  let lastHotkeyAtMs = 0;
+  let unlistenEvdev = null;
+  async function setupEvdevListener() {
+    if (!tauriRuntimeAvailable) return;
+    unlistenEvdev = await listen("lumotia:hotkey-pressed", () => {
+      const now = Date.now();
+      if (now - lastHotkeyAtMs < HOTKEY_DEBOUNCE_MS) return;
+      lastHotkeyAtMs = now;
+      if (page.current !== "dictation") page.current = "dictation";
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new CustomEvent("lumotia:toggle-recording"));
+      });
+    });
+  }
+
+  $effect(() => {
+    if (hotkeyBackend === "evdev" && !unlistenEvdev) {
+      setupEvdevListener();
+    }
+  });
+
+  $effect(() => {
+    if (hotkeyBackend !== "unknown") {
+      registerGlobalHotkey(settings.globalHotkey);
+    }
+  });
+
+  // Apply font size setting as CSS variable (legacy, kept for backwards compat).
+  $effect(() => {
+    document.body.style.setProperty("--font-size-transcript", `${settings.fontSize}px`);
+  });
+
+  const CUSTOM_WIDGET_SELECTOR =
+    '[role="combobox"], [role="listbox"], [role="radio"], [role="switch"], [role="menuitem"], [role="tab"]';
+
+  function isInputFocused(e) {
+    const tag = e.target?.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
+      return true;
+    }
+    const active = document.activeElement;
+    if (active && typeof active.closest === "function" && active.closest(CUSTOM_WIDGET_SELECTOR)) {
+      return true;
+    }
+    return false;
+  }
+
+  function handleKeydown(e) {
+    try {
+      if (e.key === "Escape") {
+        if (page.taskSidebarOpen) {
+          page.taskSidebarOpen = false;
+          return;
+        }
+        window.dispatchEvent(new CustomEvent("lumotia:escape"));
+        return;
+      }
+
+      const modKey = isMac() ? e.metaKey : e.ctrlKey;
+
+      if (modKey && e.key === "k" && !isInputFocused(e)) {
+        e.preventDefault();
+        if (page.current === "history") {
+          window.dispatchEvent(new CustomEvent("lumotia:focus-search"));
+        } else {
+          page.current = "history";
+          requestAnimationFrame(() => {
+            window.dispatchEvent(new CustomEvent("lumotia:focus-search"));
+          });
+        }
+        return;
+      }
+
+      if (modKey && e.key === "," && !isInputFocused(e)) {
+        e.preventDefault();
+        page.current = "settings";
+        return;
+      }
+
+      if (e.key === "[" && !isInputFocused(e)) {
+        settings.sidebarCollapsed = !settings.sidebarCollapsed;
+        saveSettings();
+      }
+    } catch {
+      // A keydown error must never silence the listener — swallow silently.
+    }
+  }
+
+  function handleResize() {
+    if (window.innerWidth < 900 && !settings.sidebarCollapsed) {
+      settings.sidebarCollapsed = true;
+      saveSettings();
+    }
+  }
+
+  // Phase 5: tray "Evening wind-down" routes here.
+  let unlistenWindDown = null;
+  async function setupWindDownListener() {
+    if (!tauriRuntimeAvailable) return;
+    unlistenWindDown = await listen("lumotia:open-wind-down", () => {
+      page.current = "shutdown";
+    });
+  }
+
+  // Cross-window preference sync via Tauri events.
+  let unlistenPrefs = null;
+  async function setupPreferencesSync() {
+    if (!tauriRuntimeAvailable) return;
+    let ownLabel = null;
+    try { ownLabel = getCurrentWindow().label; } catch {}
+    unlistenPrefs = await listen(PREFERENCES_CHANGED_EVENT, (event) => {
+      const payload = event?.payload;
+      if (!payload || payload.source === ownLabel) return;
+      applyExternalPreferences(payload.prefs);
+    });
+  }
+
+  // Global frontend error capture — forwards to Rust error_log via
+  // log_frontend_error. Best-effort; never crashes the app over logging.
+  let onWindowError = null;
+  let onUnhandledRejection = null;
+
+  function installGlobalErrorCapture() {
+    if (!hasTauriRuntime()) return;
+
+    const safeLog = (context, message, stack) => {
+      try {
+        invoke("log_frontend_error", { context, message: String(message ?? ""), stack: stack ?? null })
+          .catch(() => {});
+      } catch {}
+    };
+
+    onWindowError = (ev) => {
+      safeLog(
+        "window.onerror",
+        ev?.message || ev?.error?.message || "Unknown error",
+        ev?.error?.stack || null,
+      );
+    };
+
+    onUnhandledRejection = (ev) => {
+      const reason = ev?.reason;
+      const msg = (reason && (reason.message || String(reason))) || "Unhandled rejection";
+      safeLog("unhandledrejection", msg, reason?.stack || null);
+    };
+
+    window.addEventListener("error", onWindowError);
+    window.addEventListener("unhandledrejection", onUnhandledRejection);
+  }
+
+  onMount(async () => {
+    // KI-05 first — preferences must be in the right state before
+    // any theme-sensitive render.
+    migrateLegacyTheme();
+
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    setupPreferencesSync();
+    setupWindDownListener();
+
+    startNudgeBus();
+    startImplementationIntentions();
+
+    installGlobalErrorCapture();
+
+    // Warm the OS-info cache so isMac()/isWayland() return quickly
+    // from any component that reads them after first render.
+    loadOsInfo().catch(() => {});
+
+    if (!tauriRuntimeAvailable) {
+      hotkeyBackend = "unavailable";
+      return;
+    }
+
+    await initHotkeyBackend();
+    await profilesStore.load();
+
+    try {
+      const completed: boolean = await invoke("has_completed_onboarding");
+      const whisper = await invoke("list_models");
+      const parakeet = await invoke("list_parakeet_models");
+      const noModels = whisper.length === 0 && parakeet.length === 0;
+      const replayRequested = sessionStorage.getItem("lumotia:replay-tutorial") === "1";
+
+      if (replayRequested) {
+        sessionStorage.removeItem("lumotia:replay-tutorial");
+        page.current = "first-run";
+      } else if (!completed && noModels) {
+        page.current = "first-run";
+      }
+    } catch { /* skip first-run check on command failure */ }
+
+    invoke("check_for_update")
+      .then((version) => {
+        if (version) {
+          toasts.info(`Lumotia ${version} is available. Download and restart to update.`);
+        }
+      })
+      .catch(() => {});
+
+    refreshLlmStatus(settings.aiTier).catch(() => {});
+
+    if (settings.prewarmModelOnStartup) {
+      invoke("prewarm_default_model_cmd").catch(() => {});
+    }
+  });
+
+  // Meeting auto-capture poller. Edge-triggered: re-firing the same
+  // match stays quiet until the app exits and returns.
+  $effect(() => {
+    if (!tauriRuntimeAvailable) return;
+    if (!settings.meetingAutoCapture) return;
+
+    let previous: Set<string> = new Set();
+    const id = window.setInterval(async () => {
+      const patterns = settings.meetingAutoCaptureApps;
+      if (!Array.isArray(patterns) || patterns.length === 0) return;
+      try {
+        const matches: string[] = await invoke("detect_meeting_processes", { patterns });
+        const current = new Set(matches);
+        for (const match of matches) {
+          if (!previous.has(match)) {
+            toasts.info(
+              `${match[0].toUpperCase()}${match.slice(1)} detected`,
+              `Press ${settings.globalHotkey} to start recording.`,
+            );
+          }
+        }
+        previous = current;
+      } catch {}
+    }, 15000);
+
+    return () => { window.clearInterval(id); };
+  });
+
+  onDestroy(() => {
+    window.removeEventListener("resize", handleResize);
+    if (onWindowError) window.removeEventListener("error", onWindowError);
+    if (onUnhandledRejection) window.removeEventListener("unhandledrejection", onUnhandledRejection);
+    if (!tauriRuntimeAvailable) {
+      return;
+    }
+    if (hotkeyBackend === "evdev") {
+      invoke("stop_evdev_hotkey").catch(() => {});
+    } else if (hotkeyBackend === "tauri" && registeredHotkey) {
+      import("@tauri-apps/plugin-global-shortcut")
+        .then((mod) => mod.unregister(registeredHotkey))
+        .catch(() => {});
+    }
+    if (unlistenEvdev) unlistenEvdev();
+    if (unlistenPrefs) unlistenPrefs();
+    if (unlistenWindDown) unlistenWindDown();
+    stopNudgeBus();
+    stopImplementationIntentions();
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
diff --git a/src/lib/utils/customChrome.svelte.ts b/src/lib/utils/customChrome.svelte.ts
new file mode 100644
index 0000000..ddeea4c
--- /dev/null
+++ b/src/lib/utils/customChrome.svelte.ts
@@ -0,0 +1,26 @@
+// v0.2 Phase 6 helper. Single source of truth for the "should this
+// window paint its own titlebar + resize handles?" flag.
+//
+// Linux uses native KWin/Mutter decorations, so useCustomChrome is
+// false. macOS and Windows opt in. AppChrome (titlebar) and
+// AppOverlays (ResizeHandles) both subscribe to the same reactive
+// value rather than each calling loadOsInfo independently.
+
+import { loadOsInfo, isLinux } from "$lib/utils/osInfo.js";
+
+let initialised = false;
+let value = $state(false);
+
+export function ensureCustomChromeLoaded() {
+  if (initialised) return;
+  initialised = true;
+  loadOsInfo()
+    .then(() => { value = !isLinux(); })
+    .catch(() => { /* fallback to false; matches the safer Linux path */ });
+}
+
+export const customChrome = {
+  get current() {
+    return value;
+  },
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 15a0af0..3caeb38 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,555 +1,36 @@
 <script lang="ts">
   // @ts-nocheck
+  // v0.2 Phase 6 — thin composition. The three split-out shells own
+  // their respective responsibilities; this file just decides whether
+  // to render the chrome (main window) or pass children straight
+  // through (secondary windows like /float, /viewer, /preview, which
+  // also have their own +layout@.svelte to break out of this layout).
   import "../app.css";
-  import { onMount, onDestroy } from "svelte";
-  import { invoke } from "@tauri-apps/api/core";
-  import Sidebar from "$lib/Sidebar.svelte";
-  import TaskSidebar from "$lib/components/TaskSidebar.svelte";
-  import Titlebar from "$lib/components/Titlebar.svelte";
-  import ToastViewport from "$lib/components/ToastViewport.svelte";
-  import ResizeHandles from "$lib/components/ResizeHandles.svelte";
-  import FocusTimer from "$lib/components/FocusTimer.svelte";
-  import MorningTriageModal from "$lib/components/MorningTriageModal.svelte";
-  import { hasTauriRuntime } from "$lib/utils/runtime.js";
-  import { loadOsInfo, isLinux, isMac } from "$lib/utils/osInfo.js";
-  import { page, settings, saveSettings } from "$lib/stores/page.svelte.js";
-  import {
-    getPreferences,
-    updatePreferences,
-    applyExternalPreferences,
-    PREFERENCES_CHANGED_EVENT,
-  } from "$lib/stores/preferences.svelte.js";
-  import { profilesStore } from "$lib/stores/profiles.svelte.ts";
-  import { getCurrentWindow } from "@tauri-apps/api/window";
-  import { listen } from "@tauri-apps/api/event";
-  import { toasts } from "$lib/stores/toasts.svelte.js";
-  import { initI18n } from "$lib/i18n";
-  import { refreshLlmStatus } from "$lib/stores/llmStatus.svelte.js";
-  import { startNudgeBus, stopNudgeBus } from "$lib/stores/nudgeBus.svelte.ts";
-  import {
-    startImplementationIntentions,
-    stopImplementationIntentions,
-  } from "$lib/stores/implementationIntentions.svelte.ts";
-
   import { page as sveltePage } from "$app/stores";
-
-  // Set up svelte-i18n once per app instance. Safe to call from every
-  // window — initI18n guards itself against re-init.
-  initI18n();
+  import AppRuntime from "$lib/shell/AppRuntime.svelte";
+  import AppChrome from "$lib/shell/AppChrome.svelte";
+  import AppOverlays from "$lib/shell/AppOverlays.svelte";
 
   let { children } = $props();
 
-  const prefs = getPreferences();
-  const tauriRuntimeAvailable = hasTauriRuntime();
-
-  // On Linux Lumotia uses native KWin/Mutter decorations (see
-  // src-tauri/tauri.linux.conf.json and windows.rs). Frameless custom
-  // chrome stays for macOS and Windows. Default to false so Linux users
-  // don't see a flash of custom titlebar before loadOsInfo resolves.
-  let useCustomChrome = $state(false);
-
-
-  // Detect secondary windows (float, viewer) — they use +layout@.svelte
-  // but as a fallback, hide chrome if the URL matches
+  // Defensive: secondary windows use +layout@.svelte to escape this
+  // root layout, but if any /float, /viewer, /preview load ever
+  // reaches here we still drop the chrome.
   let isSecondaryWindow = $derived(
     $sveltePage.url.pathname.startsWith("/float") ||
-    $sveltePage.url.pathname.startsWith("/viewer")
+    $sveltePage.url.pathname.startsWith("/viewer") ||
+    $sveltePage.url.pathname.startsWith("/preview")
   );
-
-  // KI-05 resolution (v0.2 Phase 3) — preferences.theme is canonical.
-  // The legacy settings.theme field is gone from SettingsState; a
-  // one-shot localStorage migration (migrateLegacyTheme below) runs
-  // once on mount to copy any historical "Dark"/"Light"/"System"
-  // value into preferences, then strips the field so subsequent
-  // loads short-circuit.
-  function migrateLegacyTheme() {
-    if (typeof localStorage === "undefined") return;
-    const raw = localStorage.getItem("lumotia_settings");
-    if (!raw) return;
-    let parsed;
-    try { parsed = JSON.parse(raw); } catch { return; }
-    const data = parsed?.data ?? parsed;
-    if (!data || typeof data !== "object" || !("theme" in data)) return;
-    const legacy = data.theme;
-    const mapped = legacy === "Light" ? "light" : legacy === "System" ? "system" : "dark";
-    if (mapped !== prefs.theme) updatePreferences({ theme: mapped });
-    delete data.theme;
-    if (parsed && typeof parsed === "object" && "data" in parsed) parsed.data = data;
-    else parsed = data;
-    try { localStorage.setItem("lumotia_settings", JSON.stringify(parsed)); } catch {}
-  }
-
-  // Global hotkey registration — dual backend
-  // Wayland: evdev via lumotia-hotkey crate (works without display server)
-  // X11/macOS/Windows: tauri-plugin-global-shortcut (native)
-  let registeredHotkey = null;
-  let hotkeyBackend = $state("unknown"); // "evdev" | "tauri" | "unavailable"
-
-  async function initHotkeyBackend() {
-    if (!tauriRuntimeAvailable) {
-      hotkeyBackend = "unavailable";
-      return;
-    }
-    try {
-      const isWayland = await invoke("is_wayland_session");
-      if (isWayland) {
-        // Try evdev backend first (Wayland-compatible)
-        try {
-          await invoke("check_hotkey_access");
-          hotkeyBackend = "evdev";
-          console.log("Hotkey backend: evdev (Wayland)");
-        } catch (err) {
-          console.warn("evdev hotkey access denied:", err);
-          console.warn("Add your user to the 'input' group for global hotkeys on Wayland");
-          hotkeyBackend = "unavailable";
-        }
-      } else {
-        hotkeyBackend = "tauri";
-        console.log("Hotkey backend: tauri-plugin-global-shortcut (X11)");
-      }
-    } catch {
-      // Fallback to tauri plugin if detection fails
-      hotkeyBackend = "tauri";
-    }
-  }
-
-  async function registerGlobalHotkey(hotkey) {
-    if (!tauriRuntimeAvailable) return;
-    if (hotkeyBackend === "unknown") return; // not yet initialised
-
-    // Only the main window owns the global shortcut. Secondary windows
-    // (tasks-float, transcript-viewer, transcription-preview) inherit the
-    // root layout via SvelteKit's `+layout@.svelte` break — they don't
-    // mount this code, but cross-window settings sync via localStorage
-    // can still re-fire `$effect(() => settings.globalHotkey)` callbacks
-    // in webviews where this function happens to be in scope. Guard so
-    // we don't trigger an ACL-denied register from a popout's webview.
-    try {
-      const label = (await import("@tauri-apps/api/window")).getCurrentWindow().label;
-      if (label !== "main") return;
-    } catch {
-      // If the window-label probe fails, fall through — main is the
-      // expected default and the ACL will catch a misuse.
-    }
-
-    try {
-      if (hotkeyBackend === "evdev") {
-        // evdev backend: start or update the Rust-side listener
-        if (registeredHotkey) {
-          await invoke("update_evdev_hotkey", { hotkey });
-        } else {
-          await invoke("start_evdev_hotkey", { hotkey });
-        }
-        registeredHotkey = hotkey;
-      } else if (hotkeyBackend === "tauri") {
-        // Tauri plugin backend (X11/macOS/Windows)
-        const mod = await import("@tauri-apps/plugin-global-shortcut");
-        if (registeredHotkey) {
-          await mod.unregister(registeredHotkey).catch(() => {});
-        }
-        await mod.register(hotkey, () => {
-          if (page.current !== "dictation") page.current = "dictation";
-          requestAnimationFrame(() => {
-            window.dispatchEvent(new CustomEvent("lumotia:toggle-recording"));
-          });
-        });
-        registeredHotkey = hotkey;
-      }
-    } catch (err) {
-      console.error("Hotkey registration failed:", err);
-      const msg = err instanceof Error ? err.message : String(err);
-      toasts.error(
-        "Hotkey not registered",
-        `${hotkey}. ${msg}. Reverted to ${registeredHotkey ?? "previous value"}.`,
-      );
-      // Revert the in-memory setting to the last successfully-registered hotkey
-      // so the UI does not lie about what is actually bound.
-      if (registeredHotkey && registeredHotkey !== hotkey) {
-        settings.globalHotkey = registeredHotkey;
-        saveSettings();
-      }
-    }
-  }
-
-  // Listen for evdev hotkey events from the Rust backend.
-  //
-  // Debounce window: evdev autorepeat, a sticky-key compositor quirk,
-  // or a user's nervous double-tap can all deliver the same press
-  // twice within ~100 ms — which, without debouncing, toggles the
-  // recording into and out of the same frame and loses the capture.
-  // Matches Handy #1143 ('first press records nothing, second works').
-  // This is the UX side of brief item #4; the audio-stream warm-up
-  // side is owned by Workstream A.
-  const HOTKEY_DEBOUNCE_MS = 120;
-  let lastHotkeyAtMs = 0;
-  let unlistenEvdev = null;
-  async function setupEvdevListener() {
-    if (!tauriRuntimeAvailable) return;
-    const { listen } = await import("@tauri-apps/api/event");
-    unlistenEvdev = await listen("lumotia:hotkey-pressed", () => {
-      const now = Date.now();
-      if (now - lastHotkeyAtMs < HOTKEY_DEBOUNCE_MS) return;
-      lastHotkeyAtMs = now;
-      if (page.current !== "dictation") page.current = "dictation";
-      requestAnimationFrame(() => {
-        window.dispatchEvent(new CustomEvent("lumotia:toggle-recording"));
-      });
-    });
-  }
-
-  $effect(() => {
-    if (hotkeyBackend === "evdev" && !unlistenEvdev) {
-      setupEvdevListener();
-    }
-  });
-
-  $effect(() => {
-    if (hotkeyBackend !== "unknown") {
-      registerGlobalHotkey(settings.globalHotkey);
-    }
-  });
-
-  // Apply font size setting as CSS variable (legacy, kept for backwards compat).
-  // Scoped to <body> rather than documentElement so the write only invalidates
-  // styles on the body subtree (transcript surfaces inherit from body anyway).
-  $effect(() => {
-    document.body.style.setProperty("--font-size-transcript", `${settings.fontSize}px`);
-  });
-
-  // Custom widgets that should swallow single-letter shortcuts so they don't
-  // accidentally trigger global hotkeys while focused.
-  const CUSTOM_WIDGET_SELECTOR =
-    '[role="combobox"], [role="listbox"], [role="radio"], [role="switch"], [role="menuitem"], [role="tab"]';
-
-  // Check whether the keydown originates from a text input or custom widget
-  // (avoid triggering shortcuts while typing or while focus sits in a
-  // SegmentedButton, ZonePicker, or similar ARIA-roled control).
-  function isInputFocused(e) {
-    const tag = e.target?.tagName;
-    if (tag === "INPUT" || tag === "TEXTAREA" || e.target?.isContentEditable) {
-      return true;
-    }
-    const active = document.activeElement;
-    if (active && typeof active.closest === "function" && active.closest(CUSTOM_WIDGET_SELECTOR)) {
-      return true;
-    }
-    return false;
-  }
-
-  function handleKeydown(e) {
-    try {
-      // Escape: close task sidebar first, then broadcast for any open modal.
-      if (e.key === "Escape") {
-        if (page.taskSidebarOpen) {
-          page.taskSidebarOpen = false;
-          return;
-        }
-        // Let each modal own its close logic — dispatch and let them listen.
-        window.dispatchEvent(new CustomEvent("lumotia:escape"));
-        return;
-      }
-
-      // Modifier key shortcuts — skip when focus is in a text field.
-      const modKey = isMac() ? e.metaKey : e.ctrlKey;
-
-      // Ctrl+K / ⌘+K — jump to History and focus the search input.
-      if (modKey && e.key === "k" && !isInputFocused(e)) {
-        e.preventDefault();
-        if (page.current === "history") {
-          window.dispatchEvent(new CustomEvent("lumotia:focus-search"));
-        } else {
-          page.current = "history";
-          // After the page renders, ask the search input to take focus.
-          // rAF gives Svelte one tick to mount the History page.
-          requestAnimationFrame(() => {
-            window.dispatchEvent(new CustomEvent("lumotia:focus-search"));
-          });
-        }
-        return;
-      }
-
-      // Ctrl+, / ⌘+, — open Settings.
-      if (modKey && e.key === "," && !isInputFocused(e)) {
-        e.preventDefault();
-        page.current = "settings";
-        return;
-      }
-
-      if (e.key === "[" && !isInputFocused(e)) {
-        settings.sidebarCollapsed = !settings.sidebarCollapsed;
-        saveSettings();
-      }
-    } catch {
-      // A keydown error must never silence the listener — swallow silently.
-    }
-  }
-
-  function handleResize() {
-    if (window.innerWidth < 900 && !settings.sidebarCollapsed) {
-      settings.sidebarCollapsed = true;
-      saveSettings();
-    }
-  }
-
-  // Phase 5: tray menu routes "Evening wind-down" here so the page
-  // opens on whichever window the user clicks from. Unlisten on
-  // destroy like every other subscription in this file.
-  let unlistenWindDown = null;
-  async function setupWindDownListener() {
-    if (!tauriRuntimeAvailable) return;
-    unlistenWindDown = await listen("lumotia:open-wind-down", () => {
-      page.current = "shutdown";
-    });
-  }
-
-  // Cross-window preference sync: apply updates broadcast by any other
-  // window (float, viewer) while skipping our own echoes.
-  let unlistenPrefs = null;
-  async function setupPreferencesSync() {
-    if (!tauriRuntimeAvailable) return;
-    let ownLabel = null;
-    try { ownLabel = getCurrentWindow().label; } catch {}
-    unlistenPrefs = await listen(PREFERENCES_CHANGED_EVENT, (event) => {
-      const payload = event?.payload;
-      if (!payload || payload.source === ownLabel) return;
-      applyExternalPreferences(payload.prefs);
-    });
-  }
-
-  // Capture global frontend errors and forward to the Rust error_log via
-  // log_frontend_error. Best-effort: never let the error handler itself
-  // throw, never crash the app over a logging failure.
-  // (Diagnostics layer 1 — local only, never transmitted)
-  let onWindowError = null;
-  let onUnhandledRejection = null;
-
-  function installGlobalErrorCapture() {
-    if (!hasTauriRuntime()) return;
-
-    const safeLog = (context, message, stack) => {
-      try {
-        invoke("log_frontend_error", { context, message: String(message ?? ""), stack: stack ?? null })
-          .catch(() => { /* swallow — diagnostic logging must never throw */ });
-      } catch { /* same */ }
-    };
-
-    onWindowError = (ev) => {
-      safeLog(
-        "window.onerror",
-        ev?.message || ev?.error?.message || "Unknown error",
-        ev?.error?.stack || null,
-      );
-    };
-
-    onUnhandledRejection = (ev) => {
-      const reason = ev?.reason;
-      const msg = (reason && (reason.message || String(reason))) || "Unhandled rejection";
-      safeLog("unhandledrejection", msg, reason?.stack || null);
-    };
-
-    window.addEventListener("error", onWindowError);
-    window.addEventListener("unhandledrejection", onUnhandledRejection);
-  }
-
-  onMount(async () => {
-    // KI-05 v0.2 one-shot: copy any legacy settings.theme into
-    // preferences.theme, then strip it from localStorage. Runs first
-    // so the DOM picks up the right data-theme attribute before any
-    // theme-sensitive rendering.
-    migrateLegacyTheme();
-
-    // Auto-collapse if window is already narrow on first load
-    handleResize();
-    window.addEventListener("resize", handleResize);
-
-    // Cross-window preference sync (no-op outside Tauri).
-    setupPreferencesSync();
-
-    // Phase 5: subscribe to tray wind-down event.
-    setupWindDownListener();
-
-    // Phase 6: start the nudge bus. The bus is self-gated on
-    // settings.nudgesEnabled internally — starting it here is cheap
-    // (just event listeners + two intervals), and means users don't
-    // need to restart after flipping the toggle.
-    startNudgeBus();
-    startImplementationIntentions();
-
-    // Diagnostics: capture every uncaught frontend error to error_log.
-    installGlobalErrorCapture();
-
-    // OS detection: warm the cache so components can use modKeyLabel() /
-    // isMac() / isWayland() synchronously after first render. We also
-    // use the result to decide whether to render the custom Titlebar +
-    // ResizeHandles (non-Linux) or rely on native decorations (Linux).
-    loadOsInfo()
-      .then(() => { useCustomChrome = !isLinux(); })
-      .catch(() => { /* fallback already populated */ });
-
-    if (!tauriRuntimeAvailable) {
-      hotkeyBackend = "unavailable";
-      return;
-    }
-
-    // Detect and initialise the correct hotkey backend
-    await initHotkeyBackend();
-
-    // Load profiles (per-profile vocabulary + initial prompt). Task 15.
-    await profilesStore.load();
-
-    try {
-      const completed: boolean = await invoke("has_completed_onboarding");
-      const whisper = await invoke("list_models");
-      const parakeet = await invoke("list_parakeet_models");
-      const noModels = whisper.length === 0 && parakeet.length === 0;
-      const replayRequested = sessionStorage.getItem("lumotia:replay-tutorial") === "1";
-
-      if (replayRequested) {
-        sessionStorage.removeItem("lumotia:replay-tutorial");
-        page.current = "first-run";
-      } else if (!completed && noModels) {
-        page.current = "first-run";
-      }
-    } catch {
-      // If commands fail, skip first-run check
-    }
-
-    // Background update check — non-blocking, silent on failure
-    invoke("check_for_update")
-      .then((version) => {
-        if (version) {
-          toasts.info(`Lumotia ${version} is available. Download and restart to update.`);
-        }
-      })
-      .catch(() => { /* update check failure must not affect the app */ });
-
-    // Seed the LLM status chip (sidebar) with whichever state the
-    // backend is in right now. The chip also reacts to the $effect
-    // on settings.aiTier below and to explicit mark-generating
-    // calls from DictationPage around cleanup_transcript_text_cmd.
-    refreshLlmStatus(settings.aiTier).catch(() => {});
-
-    if (settings.prewarmModelOnStartup) {
-      invoke("prewarm_default_model_cmd").catch(() => {});
-    }
-
-    // Meeting auto-capture is wired up below as a `$effect` so the
-    // 15-second poller only exists while the setting is enabled —
-    // toggling off in Settings stops the wakeups, not just the work.
-  });
-
-  // Meeting auto-capture poller. Edge-triggered: the first time a matching
-  // process appears we surface a non-modal toast; subsequent ticks where
-  // the same match is still present stay quiet until the app exits and
-  // returns. We never start recording from this signal — the user decides.
-  //
-  // The effect's only tracked dependencies are `tauriRuntimeAvailable`
-  // (constant after mount) and `settings.meetingAutoCapture`. Reads of
-  // `settings.meetingAutoCaptureApps` and `settings.globalHotkey` happen
-  // inside the interval callback, which runs after the synchronous setup
-  // and therefore is not tracked — editing the apps list doesn't tear
-  // down the poller.
-  $effect(() => {
-    if (!tauriRuntimeAvailable) return;
-    if (!settings.meetingAutoCapture) return;
-
-    let previous: Set<string> = new Set();
-    const id = window.setInterval(async () => {
-      const patterns = settings.meetingAutoCaptureApps;
-      if (!Array.isArray(patterns) || patterns.length === 0) return;
-      try {
-        const matches: string[] = await invoke("detect_meeting_processes", { patterns });
-        const current = new Set(matches);
-        for (const match of matches) {
-          if (!previous.has(match)) {
-            toasts.info(
-              `${match[0].toUpperCase()}${match.slice(1)} detected`,
-              `Press ${settings.globalHotkey} to start recording.`,
-            );
-          }
-        }
-        previous = current;
-      } catch { /* ignore — backend may be mid-restart */ }
-    }, 15000);
-
-    return () => { window.clearInterval(id); };
-  });
-
-  onDestroy(() => {
-    window.removeEventListener("resize", handleResize);
-    if (onWindowError) window.removeEventListener("error", onWindowError);
-    if (onUnhandledRejection) window.removeEventListener("unhandledrejection", onUnhandledRejection);
-    if (!tauriRuntimeAvailable) {
-      return;
-    }
-    if (hotkeyBackend === "evdev") {
-      invoke("stop_evdev_hotkey").catch(() => {});
-    } else if (hotkeyBackend === "tauri" && registeredHotkey) {
-      import("@tauri-apps/plugin-global-shortcut")
-        .then((mod) => mod.unregister(registeredHotkey))
-        .catch(() => {});
-    }
-    if (unlistenEvdev) {
-      unlistenEvdev();
-    }
-    if (unlistenPrefs) {
-      unlistenPrefs();
-    }
-    if (unlistenWindDown) {
-      unlistenWindDown();
-    }
-    stopNudgeBus();
-    stopImplementationIntentions();
-  });
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
+<AppRuntime />
 
 {#if isSecondaryWindow}
-  <!-- Secondary windows (float, viewer) render children only — no shell chrome -->
   {@render children()}
 {:else}
-  <div class="flex flex-col h-screen w-screen overflow-hidden grain">
-    {#if useCustomChrome}
-      <Titlebar />
-    {/if}
-    <div class="flex flex-1 min-h-0 relative">
-      {#if page.current !== "first-run"}
-        <Sidebar />
-      {/if}
-      <div class="flex-1 overflow-hidden bg-bg">
-        {@render children()}
-      </div>
-      {#if page.taskSidebarOpen && page.current !== "first-run"}
-        <div class="w-[280px] min-w-[280px] shadow-xl">
-          <TaskSidebar />
-        </div>
-      {/if}
-    </div>
-  </div>
+  <AppChrome>
+    {@render children()}
+  </AppChrome>
 {/if}
 
-<!-- Global toast viewport. Mounted once at the app root so any component
-     can call toasts.error(...), toasts.success(...) etc and have it render
-     in the bottom-right of the viewport. (Day 3 of the upgrade plan) -->
-<ToastViewport />
-
-<!-- Global focus-timer overlay. Renders nothing until a `lumotia:start-timer`
-     event fires; then pins a shrinking colour ring to the top-right.
-     Phase 1 of the 2026-04-23 feature-complete roadmap — closes the
-     visual-time-representation gap from docs/brief/feature-set.md and
-     wires the dangling emit in MicroSteps.svelte. -->
-<FocusTimer />
-
-<!-- Phase 5: morning triage modal. Self-gated — no-op unless the user
-     has enabled `ritualsMorning` and the local clock is past their set
-     trigger time. Mounted here so it can appear over any page. -->
-<MorningTriageModal />
-
-<!-- Invisible resize margins for frameless (macOS/Windows). On Linux we
-     use native decorations, so ResizeHandles would compete with the
-     compositor's own resize and is suppressed. -->
-{#if useCustomChrome}
-  <ResizeHandles />
-{/if}
+<AppOverlays />