Merge branch 'dev' into n2/ntfy-notifications

Brings in: theme picker consolidation, sidebar Debug panel,
header declutter, a11y label on remove-panel button. Conflicts
in SettingsPanel.svelte (theme picker insertion site overlaps the
ntfy block) and HANDOFF.md (each branch maintains its own).

# Conflicts:
#	HANDOFF.md

6 files changed, 160 insertions, 99 deletions

diff --git a/packages/frontend/src/lib/components/DebugPanel.svelte b/packages/frontend/src/lib/components/DebugPanel.svelte
new file mode 100644
index 0000000..aea1ccb
--- /dev/null
+++ b/packages/frontend/src/lib/components/DebugPanel.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+import { tabStore } from "../tabs.svelte.js";
+
+let copyLabel = $state("Copy conversation");
+
+function resetCopyLabel(): void {
+	copyLabel = "Copy conversation";
+}
+
+async function handleCopy(): Promise<void> {
+	const text = tabStore.copyConversation();
+	try {
+		await navigator.clipboard.writeText(text);
+		copyLabel = "Copied";
+	} catch {
+		copyLabel = "Failed";
+	}
+	setTimeout(resetCopyLabel, 1500);
+}
+</script>
+
+<div class="flex flex-col gap-3">
+	<div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Debug</div>
+
+	<div class="flex flex-col gap-2">
+		<p class="text-xs text-base-content/70">Conversation</p>
+		<p class="text-xs text-base-content/40">
+			Copy a structured plain-text dump of the active tab's conversation
+			(chunk shape included) for bug reports.
+		</p>
+		<button type="button" class="btn btn-sm btn-primary w-full" onclick={handleCopy}>
+			{copyLabel}
+		</button>
+	</div>
+</div>
diff --git a/packages/frontend/src/lib/components/Header.svelte b/packages/frontend/src/lib/components/Header.svelte
index 713e916..3066e81 100644
--- a/packages/frontend/src/lib/components/Header.svelte
+++ b/packages/frontend/src/lib/components/Header.svelte
@@ -1,29 +1,8 @@
 <script lang="ts">
 import { router } from "../router.svelte.js";
-import { tabStore } from "../tabs.svelte.js";
 import { wsClient } from "../ws.svelte.js";
-import ThemeSwitcher from "./ThemeSwitcher.svelte";
 
 const { onToggleSidebar }: { onToggleSidebar: () => void } = $props();
-
-let showThemeSwitcher = $state(false);
-let copyLabel = $state("Copy");
-
-function resetCopyLabel() {
-	copyLabel = "Copy";
-}
-
-async function handleCopy() {
-	const text = tabStore.copyConversation();
-	try {
-		await navigator.clipboard.writeText(text);
-		copyLabel = "Copied";
-		setTimeout(resetCopyLabel, 1500);
-	} catch {
-		copyLabel = "Failed";
-		setTimeout(resetCopyLabel, 1500);
-	}
-}
 </script>
 
 <header class="navbar bg-base-200 px-4 min-h-14 flex-shrink-0">
@@ -38,22 +17,6 @@ async function handleCopy() {
 		<button
 			type="button"
 			class="btn btn-ghost btn-sm"
-			onclick={handleCopy}
-			aria-label="Copy conversation"
-		>
-			{copyLabel}
-		</button>
-		<button
-			type="button"
-			class="btn btn-ghost btn-sm"
-			onclick={() => (showThemeSwitcher = !showThemeSwitcher)}
-			aria-label="Switch theme"
-		>
-			Theme
-		</button>
-		<button
-			type="button"
-			class="btn btn-ghost btn-sm"
 			onclick={onToggleSidebar}
 			aria-label="Toggle sidebar"
 		>
@@ -61,7 +24,3 @@ async function handleCopy() {
 		</button>
 	</div>
 </header>
-
-{#if showThemeSwitcher}
-	<ThemeSwitcher onclose={() => (showThemeSwitcher = false)} />
-{/if}
diff --git a/packages/frontend/src/lib/components/SettingsPanel.svelte b/packages/frontend/src/lib/components/SettingsPanel.svelte
index dc9d07d..7a810d5 100644
--- a/packages/frontend/src/lib/components/SettingsPanel.svelte
+++ b/packages/frontend/src/lib/components/SettingsPanel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { config } from "../config.js";
 import { appSettings } from "../settings.svelte.js";
+import { applyTheme, loadStoredTheme, THEMES, type Theme } from "../theme.js";
 import type { KeyInfo } from "../types.js";
 
 const {
@@ -11,6 +12,17 @@ const {
 	apiBase?: string;
 } = $props();
 
+// Theme picker — was a header-triggered modal (`ThemeSwitcher.svelte`);
+// inlined here so theme picking lives in Settings alongside other UI
+// preferences. Theme constants and apply/persist live in `../theme.ts`
+// so the boot-time apply in `App.svelte` and this picker can't drift.
+let currentTheme = $state<Theme>(loadStoredTheme());
+
+function selectTheme(theme: Theme): void {
+	currentTheme = theme;
+	applyTheme(theme);
+}
+
 let titleKeyId = $state<string | null>(null);
 let titleModelId = $state<string | null>(null);
 let availableModels = $state<string[]>([]);
@@ -316,6 +328,22 @@ $effect(() => {
 	<div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Settings</div>
 
 	<div class="flex flex-col gap-2">
+		<p class="text-xs text-base-content/70">Theme</p>
+		<label class="text-xs text-base-content/60">
+			Appearance
+			<select
+				class="select select-bordered select-sm w-full capitalize"
+				value={currentTheme}
+				onchange={(e) => selectTheme(e.currentTarget.value as Theme)}
+			>
+				{#each THEMES as theme (theme)}
+					<option value={theme} class="capitalize">{theme}</option>
+				{/each}
+			</select>
+		</label>
+
+		<div class="divider my-0"></div>
+
 		<p class="text-xs text-base-content/70">Title Generation Model</p>
 		<p class="text-xs text-base-content/40">Used to generate short titles for new tabs after the first message.</p>
 
diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index 206ed09..491b1bd 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -4,6 +4,7 @@ import type { CacheStats, KeyInfo, LogEntry, TaskItem } from "../types.js";
 import CacheRatePanel from "./CacheRatePanel.svelte";
 import ClaudeReset from "./ClaudeReset.svelte";
 import ConfigPanel from "./ConfigPanel.svelte";
+import DebugPanel from "./DebugPanel.svelte";
 import KeyUsage from "./KeyUsage.svelte";
 import ModelSelector from "./ModelSelector.svelte";
 import ModelStatus from "./ModelStatus.svelte";
@@ -95,6 +96,7 @@ const viewOptions = [
 	"Skills",
 	"Tools",
 	"Settings",
+	"Debug",
 ];
 
 function addPanel() {
@@ -137,6 +139,7 @@ function contentClass(_selected: string): string {
 					<button
 						type="button"
 						class="btn btn-sm btn-ghost btn-square shrink-0"
+						aria-label="Remove panel"
 						onclick={() => {
 							panels = panels.filter((p) => p.id !== panel.id);
 						}}
@@ -181,6 +184,8 @@ function contentClass(_selected: string): string {
 					<ToolPermissions entries={permissionLog} {apiBase} />
 				{:else if panel.selected === "Settings"}
 					<SettingsPanel {keys} {apiBase} />
+				{:else if panel.selected === "Debug"}
+					<DebugPanel />
 				{/if}
 			</div>
 		</div>
diff --git a/packages/frontend/src/lib/components/ThemeSwitcher.svelte b/packages/frontend/src/lib/components/ThemeSwitcher.svelte
deleted file mode 100644
index 418fcea..0000000
--- a/packages/frontend/src/lib/components/ThemeSwitcher.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-const THEMES = [
-	"light",
-	"dark",
-	"dracula",
-	"night",
-	"nord",
-	"sunset",
-	"cyberpunk",
-	"forest",
-	"cmyk",
-	"coffee",
-	"caramellatte",
-	"garden",
-	"luxury",
-] as const;
-
-const STORAGE_KEY = "dispatch-theme";
-
-const { onclose }: { onclose: () => void } = $props();
-
-let currentTheme = $state(
-	(typeof localStorage !== "undefined" && localStorage.getItem(STORAGE_KEY)) || "dark",
-);
-
-let dialogEl: HTMLDialogElement | undefined = $state();
-
-$effect(() => {
-	if (dialogEl && !dialogEl.open) dialogEl.showModal();
-});
-
-function selectTheme(theme: string) {
-	currentTheme = theme;
-	document.documentElement.setAttribute("data-theme", theme);
-	localStorage.setItem(STORAGE_KEY, theme);
-	onclose();
-}
-</script>
-
-<dialog class="modal" bind:this={dialogEl} oncancel={onclose}>
-	<div class="modal-box w-56">
-		<h3 class="text-sm font-semibold mb-3">Select Theme</h3>
-		<ul class="menu menu-sm">
-			{#each THEMES as theme}
-				<li>
-					<button
-						type="button"
-						class="capitalize {currentTheme === theme ? 'menu-active' : ''}"
-						onclick={() => selectTheme(theme)}
-					>
-						{theme}
-					</button>
-				</li>
-			{/each}
-		</ul>
-	</div>
-	<form method="dialog" class="modal-backdrop"><button>close</button></form>
-</dialog>
diff --git a/packages/frontend/src/lib/theme.ts b/packages/frontend/src/lib/theme.ts
new file mode 100644
index 0000000..2b4bad0
--- /dev/null
+++ b/packages/frontend/src/lib/theme.ts
@@ -0,0 +1,92 @@
+/**
+ * Single source of truth for the app's theme picker.
+ *
+ * Two callers care about themes:
+ *  - `App.svelte`'s `onMount`, which applies the persisted theme on boot
+ *    so the first paint is the right color.
+ *  - `SettingsPanel.svelte`'s theme `<select>`, which lets the user
+ *    change theme at runtime.
+ *
+ * Both used to hand-roll their own `localStorage` key, default value,
+ * and DOM-attribute write. That drift produced a real bug: `App.svelte`
+ * left the DOM untouched on first load (so daisyUI fell back to the
+ * first theme in `app.css`, `light`), while `SettingsPanel` showed
+ * `"dark"` as the selected value — UI and reality disagreed until the
+ * user manually picked a theme. Centralizing here closes that gap.
+ *
+ * The theme list also intentionally mirrors the `@plugin "daisyui"`
+ * block in `app.css`. Drift between the two is harmless (a theme name
+ * present here but not in CSS just falls back to the default daisyUI
+ * theme at render time), but they should be kept in sync by hand —
+ * daisyUI's plugin config is a CSS-time concern and can't be imported
+ * from TS.
+ */
+
+export const THEMES = [
+	"light",
+	"dark",
+	"dracula",
+	"night",
+	"nord",
+	"sunset",
+	"cyberpunk",
+	"forest",
+	"cmyk",
+	"coffee",
+	"caramellatte",
+	"garden",
+	"luxury",
+] as const;
+
+export type Theme = (typeof THEMES)[number];
+
+export const THEME_STORAGE_KEY = "dispatch-theme";
+
+/**
+ * The fallback theme used both at first-boot apply (when nothing is
+ * persisted) and as the UI's default-selected value. They MUST match —
+ * if they ever diverged again, the UI would show one theme and the
+ * page would render another.
+ */
+export const DEFAULT_THEME: Theme = "dark";
+
+/**
+ * Read the persisted theme. Returns `DEFAULT_THEME` when nothing is
+ * stored, when access throws (private mode / SecurityError), or when
+ * the stored value isn't one of the known themes. Never throws.
+ *
+ * SSR-safe: if `localStorage` is undefined (e.g. `vite build` during
+ * prerender, if that's ever wired up), returns the default.
+ */
+export function loadStoredTheme(): Theme {
+	try {
+		if (typeof localStorage === "undefined") return DEFAULT_THEME;
+		const raw = localStorage.getItem(THEME_STORAGE_KEY);
+		if (raw && (THEMES as readonly string[]).includes(raw)) {
+			return raw as Theme;
+		}
+		return DEFAULT_THEME;
+	} catch {
+		return DEFAULT_THEME;
+	}
+}
+
+/**
+ * Apply a theme to the live document and persist it. The DOM write is
+ * unconditional (daisyUI keys off `data-theme` on the `<html>`
+ * element); the storage write is best-effort and swallows quota /
+ * SecurityError failures because the session continues to work either
+ * way — only cross-reload persistence degrades.
+ */
+export function applyTheme(theme: Theme): void {
+	if (typeof document !== "undefined") {
+		document.documentElement.setAttribute("data-theme", theme);
+	}
+	try {
+		if (typeof localStorage !== "undefined") {
+			localStorage.setItem(THEME_STORAGE_KEY, theme);
+		}
+	} catch {
+		// Best-effort.
+	}
+}