From 13b670e5e93dc0243f970832673385e9855a1df6 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Thu, 21 May 2026 20:26:07 +0900
Subject: feat: tool permission toggles, settings improvements, UI polish

- Tool permissions (read, edit, bash) stored in DB and control Agent tool registration
- Agent invalidated when permissions change; cache warning in Permissions panel
- Default: read=allow, edit=ask, bash=ask (matches UI checkboxes)
- Settings: auto-save title model on selection (removed save button)
- Settings: auto-expand thinking checkbox with shared reactive store
- Permissions panel: renamed from Permission Log, shows tool toggles + collapsible log
- Sidebar: renamed Current Model to Model Choice
- Chat input: allow typing while agent runs (just disable send)
- Chat cursor: fix doubled rectangle (removed unicode char)
- Generic GET/PUT /tabs/settings/:key endpoints for key-value settings
---
 .../frontend/src/lib/components/ChatInput.svelte   |   3 +-
 .../frontend/src/lib/components/ChatMessage.svelte |   5 +-
 .../src/lib/components/PermissionLog.svelte        | 116 +++++++++++++++++----
 .../src/lib/components/SettingsPanel.svelte        |  90 +++++++++-------
 .../src/lib/components/SidebarPanel.svelte         |  10 +-
 packages/frontend/src/lib/settings.svelte.ts       |   8 ++
 6 files changed, 162 insertions(+), 70 deletions(-)
 create mode 100644 packages/frontend/src/lib/settings.svelte.ts

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/lib/components/ChatInput.svelte b/packages/frontend/src/lib/components/ChatInput.svelte
index 9563a9f..8910bb4 100644
--- a/packages/frontend/src/lib/components/ChatInput.svelte
+++ b/packages/frontend/src/lib/components/ChatInput.svelte
@@ -29,9 +29,8 @@ function submit() {
 		bind:this={inputEl}
 		bind:value={inputValue}
 		type="text"
-		placeholder={isDisabled ? "Agent is running..." : "Type a message..."}
+		placeholder="Type a message..."
 		class="input flex-1"
-		disabled={isDisabled}
 		onkeydown={handleKeydown}
 	/>
 	<button
diff --git a/packages/frontend/src/lib/components/ChatMessage.svelte b/packages/frontend/src/lib/components/ChatMessage.svelte
index c8b3f6e..4db57c3 100644
--- a/packages/frontend/src/lib/components/ChatMessage.svelte
+++ b/packages/frontend/src/lib/components/ChatMessage.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { ChatMessage } from "../types.js";
+import { appSettings } from "../settings.svelte.js";
 import MarkdownRenderer from "./MarkdownRenderer.svelte";
 import ToolCallDisplay from "./ToolCallDisplay.svelte";
 
@@ -24,7 +25,7 @@ const isSystem = $derived(message.role === "system");
 	<div class="chat-bubble max-w-[80%] break-words {isUser ? 'chat-bubble-primary' : 'bg-transparent'}">
 		{#if message.thinking}
 			<div class="collapse collapse-arrow mb-2 p-1">
-				<input type="checkbox" />
+				<input type="checkbox" checked={appSettings.autoExpandThinking} />
 				<div class="collapse-title text-sm opacity-60 italic py-0 pl-0 pr-8 min-h-0">Thinking...</div>
 				<div class="collapse-content text-sm opacity-60 italic p-0">
 					<p class="whitespace-pre-wrap mt-1">{message.thinking}</p>
@@ -39,7 +40,7 @@ const isSystem = $derived(message.role === "system");
 			{/if}
 		{/each}
 		{#if message.isStreaming}
-			<span class="inline-block w-2 h-4 bg-current animate-pulse ml-0.5 align-middle">▌</span>
+			<span class="inline-block w-1.5 h-4 bg-current animate-pulse ml-0.5 align-middle rounded-sm"></span>
 		{/if}
 	</div>
 </div>
diff --git a/packages/frontend/src/lib/components/PermissionLog.svelte b/packages/frontend/src/lib/components/PermissionLog.svelte
index f6e07f6..06607de 100644
--- a/packages/frontend/src/lib/components/PermissionLog.svelte
+++ b/packages/frontend/src/lib/components/PermissionLog.svelte
@@ -1,28 +1,100 @@
 <script lang="ts">
 import type { LogEntry } from "../types.js";
 
-const { entries }: { entries: LogEntry[] } = $props();
+const { entries, apiBase = "" }: { entries: LogEntry[]; apiBase?: string } = $props();
+
+interface ToolPermission {
+	id: string;
+	label: string;
+	description: string;
+}
+
+const toolPermissions: ToolPermission[] = [
+	{ id: "read", label: "Read files", description: "Allow the AI to read files in the workspace" },
+	{ id: "edit", label: "Edit files", description: "Allow the AI to write/edit files in the workspace" },
+	{ id: "bash", label: "Run commands", description: "Allow the AI to execute shell commands" },
+	{ id: "external_directory", label: "External directories", description: "Allow access to files outside the workspace" },
+];
+
+let permStates = $state<Record<string, boolean>>({
+	read: true,
+	edit: false,
+	bash: false,
+	external_directory: false,
+});
+
+async function loadPermissions(): Promise<void> {
+	for (const perm of toolPermissions) {
+		try {
+			const res = await fetch(`${apiBase}/tabs/settings/perm_${perm.id}`);
+			if (res.ok) {
+				const data = await res.json() as { value: string | null };
+				if (data.value !== null) {
+					permStates[perm.id] = data.value === "allow";
+				}
+			}
+		} catch {
+			// ignore
+		}
+	}
+}
+
+async function togglePermission(id: string): Promise<void> {
+	permStates[id] = !permStates[id];
+	const value = permStates[id] ? "allow" : "ask";
+	fetch(`${apiBase}/tabs/settings/perm_${id}`, {
+		method: "PUT",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({ value }),
+	}).catch(() => {});
+}
+
+$effect(() => {
+	void loadPermissions();
+});
 </script>
 
-<div class="collapse collapse-arrow bg-base-200 mt-4">
-  <input type="checkbox" /> 
-  <div class="collapse-title text-sm font-medium">
-    Permission Log ({entries.length})
-  </div>
-  <div class="collapse-content text-xs max-h-40 overflow-y-auto">
-    {#if entries.length === 0}
-      <p class="text-base-content/50 italic">No permissions granted or denied yet.</p>
-    {:else}
-      {#each entries as entry (entry.id)}
-        <div class="flex items-center gap-2 py-1 border-b border-base-300">
-          <span class="badge badge-sm {entry.action === 'reject' ? 'badge-error' : 'badge-success'}">
-            {entry.action}
-          </span>
-          <span class="text-base-content/70">{entry.permission}</span>
-          <span class="text-base-content/50 ml-auto text-xs">{entry.timestamp}</span>
-        </div>
-        <p class="text-base-content/60 pl-2 pb-1">{entry.description}</p>
-      {/each}
-    {/if}
-  </div>
+<div class="flex flex-col gap-3">
+	<div class="text-xs font-semibold text-base-content/50 uppercase tracking-wide">Tool Permissions</div>
+
+	<div class="flex flex-col gap-1.5">
+		{#each toolPermissions as perm (perm.id)}
+			<label class="flex items-start gap-2 cursor-pointer p-1 rounded hover:bg-base-200 transition-colors">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-sm rounded-sm mt-0.5"
+					checked={permStates[perm.id]}
+					onchange={() => togglePermission(perm.id)}
+				/>
+				<div class="flex flex-col">
+					<span class="text-xs font-medium text-base-content">{perm.label}</span>
+					<span class="text-xs text-base-content/40">{perm.description}</span>
+				</div>
+			</label>
+		{/each}
+	</div>
+
+	<p class="text-xs text-base-content/40">Warning: changing tool access will reset the AI's prompt cache for active conversations, which may increase usage costs.</p>
+
+	<!-- Permission Log -->
+	{#if entries.length > 0}
+		<div class="collapse collapse-arrow bg-base-200 mt-2">
+			<input type="checkbox" />
+			<div class="collapse-title text-sm font-medium py-2 min-h-0">
+				Log ({entries.length})
+			</div>
+			<div class="collapse-content text-xs max-h-40 overflow-y-auto">
+				{#each entries as entry (entry.id)}
+					<div class="flex items-center gap-2 py-1 border-b border-base-300">
+						<span class="badge badge-sm {entry.action === 'reject' ? 'badge-error' : 'badge-success'}">
+							{entry.action}
+						</span>
+						<span class="text-base-content/70">{entry.permission}</span>
+						<span class="text-base-content/50 ml-auto text-xs">{entry.timestamp}</span>
+					</div>
+					<p class="text-base-content/60 pl-2 pb-1">{entry.description}</p>
+				{/each}
+			</div>
+		</div>
+	{/if}
 </div>
diff --git a/packages/frontend/src/lib/components/SettingsPanel.svelte b/packages/frontend/src/lib/components/SettingsPanel.svelte
index 8449aa4..6580308 100644
--- a/packages/frontend/src/lib/components/SettingsPanel.svelte
+++ b/packages/frontend/src/lib/components/SettingsPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { KeyInfo } from "../types.js";
+	import { appSettings } from "../settings.svelte.js";
 
 	const {
 		keys = [],
@@ -13,25 +14,44 @@
 	let titleModelId = $state<string | null>(null);
 	let availableModels = $state<string[]>([]);
 	let loadingModels = $state(false);
-	let saving = $state(false);
-	let saved = $state(false);
+	let autoExpandThinking = $state(appSettings.autoExpandThinking);
 
 	async function loadSettings(): Promise<void> {
 		try {
 			const res = await fetch(`${apiBase}/tabs/settings/title-model`);
-			if (!res.ok) return;
-			const data = await res.json() as { keyId: string | null; modelId: string | null };
-			titleKeyId = data.keyId;
-			if (titleKeyId) {
-				await loadModelsForKey(titleKeyId);
+			if (res.ok) {
+				const data = await res.json() as { keyId: string | null; modelId: string | null };
+				titleKeyId = data.keyId;
+				if (titleKeyId) {
+					await loadModelsForKey(titleKeyId);
+				}
+				titleModelId = data.modelId;
+			}
+		} catch {
+			// ignore
+		}
+		try {
+			const res = await fetch(`${apiBase}/tabs/settings/auto-expand-thinking`);
+			if (res.ok) {
+				const data = await res.json() as { value: string | null };
+				autoExpandThinking = data.value === "true";
+				appSettings.autoExpandThinking = autoExpandThinking;
 			}
-			// Set model AFTER options are loaded so the select can match the value
-			titleModelId = data.modelId;
 		} catch {
 			// ignore
 		}
 	}
 
+	async function toggleAutoExpand(): Promise<void> {
+		autoExpandThinking = !autoExpandThinking;
+		appSettings.autoExpandThinking = autoExpandThinking;
+		fetch(`${apiBase}/tabs/settings/auto-expand-thinking`, {
+			method: "PUT",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ value: String(autoExpandThinking) }),
+		}).catch(() => {});
+	}
+
 	async function loadModelsForKey(keyId: string): Promise<void> {
 		loadingModels = true;
 		try {
@@ -46,6 +66,14 @@
 		}
 	}
 
+	function saveTitleModel(): void {
+		fetch(`${apiBase}/tabs/settings/title-model`, {
+			method: "PUT",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ keyId: titleKeyId, modelId: titleModelId }),
+		}).catch(() => {});
+	}
+
 	async function onKeyChange(e: Event): Promise<void> {
 		const select = e.target as HTMLSelectElement;
 		titleKeyId = select.value || null;
@@ -54,28 +82,13 @@
 		if (titleKeyId) {
 			await loadModelsForKey(titleKeyId);
 		}
+		saveTitleModel();
 	}
 
 	async function onModelChange(e: Event): Promise<void> {
 		const select = e.target as HTMLSelectElement;
 		titleModelId = select.value || null;
-	}
-
-	async function saveSettings(): Promise<void> {
-		saving = true;
-		try {
-			await fetch(`${apiBase}/tabs/settings/title-model`, {
-				method: "PUT",
-				headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({ keyId: titleKeyId, modelId: titleModelId }),
-			});
-			saved = true;
-			setTimeout(() => { saved = false; }, 2000);
-		} catch {
-			// ignore
-		} finally {
-			saving = false;
-		}
+		saveTitleModel();
 	}
 
 	$effect(() => {
@@ -111,18 +124,17 @@
 			{/each}
 		</select>
 
-		<button
-			class="btn btn-sm btn-primary w-full mt-1"
-			disabled={saving || !titleKeyId || !titleModelId}
-			onclick={saveSettings}
-		>
-			{#if saving}
-				<span class="loading loading-spinner loading-xs"></span>
-			{:else if saved}
-				Saved
-			{:else}
-				Save
-			{/if}
-		</button>
+		<div class="divider my-0"></div>
+
+		<p class="text-xs text-base-content/70">Chat</p>
+		<label class="flex items-center gap-2 cursor-pointer">
+			<input
+				type="checkbox"
+				class="checkbox checkbox-sm rounded-sm"
+				checked={autoExpandThinking}
+				onchange={toggleAutoExpand}
+			/>
+			<span class="text-xs text-base-content/70">Auto-expand thinking</span>
+		</label>
 	</div>
 </div>
diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index 7e71bd5..9aca408 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -40,9 +40,9 @@
 	}
 
 	let nextId = 0;
-	let panels = $state<Panel[]>([{ id: nextId++, selected: "Current Model" }]);
+	let panels = $state<Panel[]>([{ id: nextId++, selected: "Model Choice" }]);
 
-	const viewOptions = ["Select a view", "Current Model", "Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Permission Log", "Settings"];
+	const viewOptions = ["Select a view", "Model Choice", "Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Permissions", "Settings"];
 
 	function addPanel() {
 		panels = [...panels, { id: nextId++, selected: "Select a view" }];
@@ -91,7 +91,7 @@
 			</div>
 
 			<div class={contentClass(panel.selected)}>
-				{#if panel.selected === "Current Model"}
+				{#if panel.selected === "Model Choice"}
 					<ModelSelector
 						{keys}
 						{activeKeyId}
@@ -113,8 +113,8 @@
 					<ConfigPanel {apiBase} />
 				{:else if panel.selected === "Skills"}
 					<SkillsBrowser {apiBase} />
-				{:else if panel.selected === "Permission Log"}
-					<PermissionLog entries={permissionLog} />
+				{:else if panel.selected === "Permissions"}
+					<PermissionLog entries={permissionLog} {apiBase} />
 				{:else if panel.selected === "Settings"}
 					<SettingsPanel {keys} {apiBase} />
 				{/if}
diff --git a/packages/frontend/src/lib/settings.svelte.ts b/packages/frontend/src/lib/settings.svelte.ts
new file mode 100644
index 0000000..7acc55a
--- /dev/null
+++ b/packages/frontend/src/lib/settings.svelte.ts
@@ -0,0 +1,8 @@
+/** Shared reactive app settings. */
+
+let autoExpandThinking = $state(false);
+
+export const appSettings = {
+	get autoExpandThinking() { return autoExpandThinking; },
+	set autoExpandThinking(v: boolean) { autoExpandThinking = v; },
+};
-- 
cgit v1.2.3