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, 6 insertions, 3 deletions

diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index 9aca408..93d528e 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -8,6 +8,7 @@
 	import KeyUsage from "./KeyUsage.svelte";
 	import ClaudeReset from "./ClaudeReset.svelte";
 	import SettingsPanel from "./SettingsPanel.svelte";
+	import SystemPromptPanel from "./SystemPromptPanel.svelte";
 	import type { TaskItem, LogEntry, KeyInfo } from "../types.js";
 
 	const {
@@ -42,7 +43,7 @@
 	let nextId = 0;
 	let panels = $state<Panel[]>([{ id: nextId++, selected: "Model Choice" }]);
 
-	const viewOptions = ["Select a view", "Model Choice", "Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Permissions", "Settings"];
+	const viewOptions = ["Select a view", "Model Choice", "Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Tools", "System Prompt", "Settings"];
 
 	function addPanel() {
 		panels = [...panels, { id: nextId++, selected: "Select a view" }];
@@ -113,9 +114,11 @@
 					<ConfigPanel {apiBase} />
 				{:else if panel.selected === "Skills"}
 					<SkillsBrowser {apiBase} />
-				{:else if panel.selected === "Permissions"}
+				{:else if panel.selected === "Tools"}
 					<PermissionLog entries={permissionLog} {apiBase} />
-				{:else if panel.selected === "Settings"}
+				{:else if panel.selected === "System Prompt"}
+				<SystemPromptPanel {apiBase} />
+			{:else if panel.selected === "Settings"}
 					<SettingsPanel {keys} {apiBase} />
 				{/if}
 			</div>