jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.2 Phase 6: shell split — AppRuntime / AppChrome / AppOverlays

Browse Source 
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>
This commit is contained in:
Jake
2026-05-15 08:51:55 +01:00
parent c60f0aa5a5
commit a9733544c0
6 changed files with 530 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/release/v0.2-frontend-overhaul.md
View File

@@ -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 | |

43
src/lib/shell/AppChrome.svelte Normal file
View File

@@ -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>

43
src/lib/shell/AppOverlays.svelte Normal file
View File

@@ -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}

399
src/lib/shell/AppRuntime.svelte Normal file
View File

@@ -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} />

26
src/lib/utils/customChrome.svelte.ts Normal file
View File

@@ -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;
},
};

555
src/routes/+layout.svelte
View File

@@ -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 />