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, 10 insertions, 7 deletions

diff --git a/packages/frontend/src/lib/components/ModelSelector.svelte b/packages/frontend/src/lib/components/ModelSelector.svelte
index b88b2e3..0af5ae6 100644
--- a/packages/frontend/src/lib/components/ModelSelector.svelte
+++ b/packages/frontend/src/lib/components/ModelSelector.svelte
@@ -44,16 +44,19 @@
 	function selectKey(keyId: string) {
 		showKeyModal = false;
 		onKeyChange(keyId);
+		// Immediately open model selection for the new key
+		openModelModal(keyId);
 	}
 
-	async function openModelModal() {
-		if (!activeKeyId) return;
+	async function openModelModal(keyIdOverride?: string) {
+		const keyId = keyIdOverride ?? activeKeyId;
+		if (!keyId) return;
 		showModelModal = true;
 		modelError = null;
 
 		// Check session cache
-		if (modelCache.has(activeKeyId)) {
-			availableModels = modelCache.get(activeKeyId)!;
+		if (modelCache.has(keyId)) {
+			availableModels = modelCache.get(keyId)!;
 			loadingModels = false;
 			return;
 		}
@@ -63,7 +66,7 @@
 
 		try {
 			const res = await fetch(
-				`${config.apiBase}/models/available?keyId=${encodeURIComponent(activeKeyId)}`,
+				`${config.apiBase}/models/available?keyId=${encodeURIComponent(keyId)}`,
 			);
 			if (!res.ok) {
 				const data = await res.json().catch(() => ({}));
@@ -73,7 +76,7 @@
 			const data = await res.json();
 			availableModels = data.models ?? [];
 			// Cache for session
-			modelCache.set(activeKeyId, availableModels);
+			modelCache.set(keyId, availableModels);
 		} catch (err) {
 			modelError = err instanceof Error ? err.message : "Failed to fetch models";
 		} finally {
@@ -99,7 +102,7 @@
 
 	<div class="flex items-center justify-between mt-2">
 		<span class="text-sm font-medium">Model</span>
-		<button class="btn btn-sm btn-outline" onclick={openModelModal} disabled={!activeKeyId}>
+		<button class="btn btn-sm btn-outline" onclick={() => openModelModal()} disabled={!activeKeyId}>
 			{activeModelId ?? "Select Model"}
 		</button>
 	</div>