feat: system prompt editor, tool permissions save-on-send, responsive sidebar, UI polish

- System Prompt sidebar view: editable textarea, save-on-send, reset button
- Tool permissions: save-on-send pattern (not immediate), reset button
- Dynamic system prompt: buildSystemPrompt reads from DB, tool list auto-generated
- Responsive sidebar: overlay on small screens with backdrop
- Chat bubbles: user=fit-width, assistant=full-width
- Fix  infinite loops (use onMount for data fetching)
- Fix sendMessage race condition (await settings saves before chat POST)
- Model selector: auto-open model modal after key selection
- Rename views: Permissions->Tools, Tab Settings->Model Choice
- Shared appSettings store for cross-component reactive state
- Delete old chat.svelte.ts

1 files changed, 61 insertions, 0 deletions

diff --git a/packages/frontend/src/lib/components/SystemPromptPanel.svelte b/packages/frontend/src/lib/components/SystemPromptPanel.svelte
new file mode 100644
index 0000000..6b91ebe
--- /dev/null
+++ b/packages/frontend/src/lib/components/SystemPromptPanel.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { appSettings } from "../settings.svelte.js";
+
+	const {
+		apiBase = "",
+	}: {
+		apiBase?: string;
+	} = $props();
+
+	const DEFAULT_PROMPT = "You are Dispatch, a helpful AI coding assistant. Be concise and helpful.";
+
+	async function loadPrompt(): Promise<void> {
+		try {
+			const res = await fetch(`${apiBase}/tabs/settings/system_prompt`);
+			if (res.ok) {
+				const data = await res.json() as { value: string | null };
+				const value = data.value ?? DEFAULT_PROMPT;
+				appSettings.systemPrompt = value;
+				appSettings.savedSystemPrompt = value;
+			}
+		} catch {
+			// ignore
+		}
+	}
+
+	function resetPrompt(): void {
+		appSettings.systemPrompt = appSettings.savedSystemPrompt;
+	}
+
+	const isDirty = $derived(appSettings.systemPrompt !== appSettings.savedSystemPrompt);
+
+	onMount(() => {
+		if (!appSettings.systemPrompt) {
+			appSettings.systemPrompt = DEFAULT_PROMPT;
+			appSettings.savedSystemPrompt = DEFAULT_PROMPT;
+		}
+		loadPrompt();
+	});
+</script>
+
+<div class="flex flex-col gap-3 flex-1 min-h-0">
+	<div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">System Prompt</div>
+	<p class="text-xs text-base-content/40">The base instructions sent to the AI at the start of every conversation. Tool descriptions are appended automatically. Changes are applied when you send your next message.</p>
+
+	<textarea
+		class="textarea textarea-bordered w-full flex-1 min-h-32 text-xs font-mono leading-relaxed"
+		bind:value={appSettings.systemPrompt}
+		placeholder="Enter system prompt..."
+	></textarea>
+
+	<button
+		class="btn btn-sm btn-ghost w-full"
+		disabled={!isDirty}
+		onclick={resetPrompt}
+	>
+		Reset
+	</button>
+
+	<p class="text-xs text-base-content/40">Warning: changing the system prompt will reset the AI's prompt cache for active conversations, which may increase usage costs.</p>
+</div>