Merge pull request 'feat: session config sidebar component (#13)' (#33) from feature/issue-13-config-sidebar into main

implementation-plans/_index.md

@@ -14,3 +14,4 @@
 | #10   | Final result rendering with artifacts                  | COMPLETED    | [issue-010.md](issue-010.md) |
 | #11   | Session creation and ID management                     | COMPLETED    | [issue-011.md](issue-011.md) |
 | #12   | Session history sidebar                                | COMPLETED    | [issue-012.md](issue-012.md) |
+| #13   | Session config sidebar component                       | COMPLETED    | [issue-013.md](issue-013.md) |

implementation-plans/issue-013.md

@@ -0,0 +1,30 @@
+---
+---
+
+# Issue #13: Session config sidebar component
+
+**Status:** COMPLETED
+**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/13
+**Branch:** `feature/issue-13-config-sidebar`
+
+## Acceptance Criteria
+
+- [x] Right sidebar component for session configuration
+- [x] Override level selection (None / Relax / All) with radio-style buttons
+- [x] Disabled tools toggle checkboxes using ToolType enum values
+- [x] Granted permissions free-text input with add/remove
+- [x] Toggle button in header with non-default config indicator dot
+- [x] Reset button to restore defaults
+- [x] Config passed to processRequest on send
+
+## Implementation
+
+### Components
+- `ConfigSidebar.svelte` — right sidebar with override level, disabled tools, and granted permissions sections
+- Updated `+page.svelte` — added config toggle button in header, sessionConfig state, and ConfigSidebar integration
+
+### Key Decisions
+- Used `@bufbuild/protobuf` `create()` with `SessionConfigSchema` for immutable config updates
+- Config state lives in `+page.svelte` and is passed down as prop
+- Non-default config indicator (amber dot) shown in both the header toggle button and sidebar header
+- Disabled tools stored as string labels matching ToolType enum display names

src/lib/components/ConfigSidebar.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { OverrideLevel, ToolType } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import type { SessionConfig } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+	import { SessionConfigSchema } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+	import { create } from '@bufbuild/protobuf';
+
+	let {
+		config,
+		onConfigChange
+	}: { config: SessionConfig; onConfigChange: (config: SessionConfig) => void } = $props();
+
+	let newPermission = $state('');
+
+	const toolTypes = [
+		{ value: ToolType.MEMORY_READ, label: 'Memory Read' },
+		{ value: ToolType.MEMORY_WRITE, label: 'Memory Write' },
+		{ value: ToolType.WEB_SEARCH, label: 'Web Search' },
+		{ value: ToolType.FS_READ, label: 'FS Read' },
+		{ value: ToolType.FS_WRITE, label: 'FS Write' },
+		{ value: ToolType.RUN_CODE, label: 'Run Code' },
+		{ value: ToolType.RUN_SHELL, label: 'Run Shell' },
+		{ value: ToolType.PACKAGE_INSTALL, label: 'Package Install' }
+	];
+
+	const overrideLevels = [
+		{ value: OverrideLevel.NONE, label: 'None', description: 'Full enforcement' },
+		{ value: OverrideLevel.RELAX, label: 'Relax', description: 'High-risk tools unlocked' },
+		{ value: OverrideLevel.ALL, label: 'All', description: 'No enforcement' }
+	];
+
+	const isNonDefault = $derived(
+		config.overrideLevel !== OverrideLevel.NONE ||
+			config.disabledTools.length > 0 ||
+			config.grantedPermissions.length > 0
+	);
+
+	function setOverrideLevel(level: OverrideLevel) {
+		const updated = create(SessionConfigSchema, {
+			...config,
+			overrideLevel: level
+		});
+		onConfigChange(updated);
+	}
+
+	function toggleTool(tool: string) {
+		const disabled = [...config.disabledTools];
+		const idx = disabled.indexOf(tool);
+		if (idx >= 0) {
+			disabled.splice(idx, 1);
+		} else {
+			disabled.push(tool);
+		}
+		const updated = create(SessionConfigSchema, {
+			...config,
+			disabledTools: disabled
+		});
+		onConfigChange(updated);
+	}
+
+	function addPermission() {
+		const trimmed = newPermission.trim();
+		if (!trimmed || config.grantedPermissions.includes(trimmed)) return;
+		const updated = create(SessionConfigSchema, {
+			...config,
+			grantedPermissions: [...config.grantedPermissions, trimmed]
+		});
+		onConfigChange(updated);
+		newPermission = '';
+	}
+
+	function removePermission(perm: string) {
+		const updated = create(SessionConfigSchema, {
+			...config,
+			grantedPermissions: config.grantedPermissions.filter((p) => p !== perm)
+		});
+		onConfigChange(updated);
+	}
+
+	function resetConfig() {
+		onConfigChange(create(SessionConfigSchema, { overrideLevel: OverrideLevel.NONE }));
+	}
+</script>
+
+<aside class="flex h-full w-72 flex-col border-l border-gray-200 bg-white">
+	<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+		<div class="flex items-center gap-2">
+			<h2 class="text-sm font-semibold text-gray-900">Session Config</h2>
+			{#if isNonDefault}
+				<span class="h-2 w-2 rounded-full bg-amber-500" title="Non-default config active"></span>
+			{/if}
+		</div>
+		<button
+			type="button"
+			onclick={resetConfig}
+			class="text-xs text-gray-500 hover:text-gray-700"
+		>
+			Reset
+		</button>
+	</div>
+
+	<div class="flex-1 overflow-y-auto p-4 space-y-5">
+		<!-- Override Level -->
+		<div>
+			<p class="mb-2 text-xs font-medium text-gray-700">Override Level</p>
+			<div class="space-y-1">
+				{#each overrideLevels as level (level.value)}
+					<button
+						type="button"
+						onclick={() => setOverrideLevel(level.value)}
+						class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm
+							{config.overrideLevel === level.value
+							? 'bg-blue-50 text-blue-700 ring-1 ring-blue-200'
+							: 'text-gray-700 hover:bg-gray-50'}"
+					>
+						<span class="font-medium">{level.label}</span>
+						<span class="text-xs text-gray-500">— {level.description}</span>
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Disabled Tools -->
+		<div>
+			<p class="mb-2 text-xs font-medium text-gray-700">Disabled Tools</p>
+			<div class="space-y-1">
+				{#each toolTypes as tool (tool.value)}
+					<label class="flex items-center gap-2 rounded px-2 py-1 text-sm hover:bg-gray-50">
+						<input
+							type="checkbox"
+							checked={config.disabledTools.includes(tool.label)}
+							onchange={() => toggleTool(tool.label)}
+							class="rounded border-gray-300 text-blue-600"
+						/>
+						<span class="text-gray-700">{tool.label}</span>
+					</label>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Granted Permissions -->
+		<div>
+			<p class="mb-2 text-xs font-medium text-gray-700">Granted Permissions</p>
+			<div class="flex gap-1">
+				<input
+					type="text"
+					bind:value={newPermission}
+					onkeydown={(e) => { if (e.key === 'Enter') addPermission(); }}
+					placeholder="agent_type:tool"
+					class="flex-1 rounded-lg border border-gray-300 px-2 py-1.5 text-xs focus:border-blue-500 focus:outline-none"
+				/>
+				<button
+					type="button"
+					onclick={addPermission}
+					class="rounded-lg bg-gray-100 px-2 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+				>
+					Add
+				</button>
+			</div>
+			{#if config.grantedPermissions.length > 0}
+				<div class="mt-2 space-y-1">
+					{#each config.grantedPermissions as perm (perm)}
+						<div class="flex items-center justify-between rounded bg-gray-50 px-2 py-1">
+							<code class="text-xs text-gray-700">{perm}</code>
+							<button
+								type="button"
+								onclick={() => removePermission(perm)}
+								class="text-xs text-gray-400 hover:text-red-500"
+							>
+								✕
+							</button>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
+</aside>

src/routes/chat/+page.svelte

@@ -4,12 +4,17 @@
 	import { resolveRoute } from '$app/paths';
 	import type { ChatMessage } from '$lib/types';
 	import type { SubagentResult } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import { OverrideLevel } from '$lib/proto/llm_multiverse/v1/common_pb';
+	import type { SessionConfig } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+	import { SessionConfigSchema } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
+	import { create } from '@bufbuild/protobuf';
 	import MessageList from '$lib/components/MessageList.svelte';
 	import MessageInput from '$lib/components/MessageInput.svelte';
 	import OrchestrationProgress from '$lib/components/OrchestrationProgress.svelte';
 	import ThinkingSection from '$lib/components/ThinkingSection.svelte';
 	import FinalResult from '$lib/components/FinalResult.svelte';
 	import SessionSidebar from '$lib/components/SessionSidebar.svelte';
+	import ConfigSidebar from '$lib/components/ConfigSidebar.svelte';
 	import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
 	import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
 	import { sessionStore } from '$lib/stores/sessions.svelte';
@@ -20,6 +25,16 @@
 	let orchestrationState: OrchestrationState = $state(OrchestrationState.UNSPECIFIED);
 	let intermediateResult: string = $state('');
 	let finalResult: SubagentResult | null = $state(null);
+	let sessionConfig: SessionConfig = $state(
+		create(SessionConfigSchema, { overrideLevel: OverrideLevel.NONE })
+	);
+	let showConfig = $state(false);
+
+	const isNonDefaultConfig = $derived(
+		sessionConfig.overrideLevel !== OverrideLevel.NONE ||
+			sessionConfig.disabledTools.length > 0 ||
+			sessionConfig.grantedPermissions.length > 0
+	);
 
 	function navigateToSession(sessionId: string, replace = false) {
 		const url = `${resolveRoute('/chat')}?session=${sessionId}`;
@@ -83,7 +98,7 @@
 		isStreaming = true;
 
 		try {
-			for await (const response of processRequest(sessionId, content)) {
+			for await (const response of processRequest(sessionId, content, sessionConfig)) {
 				orchestrationState = response.state;
 				if (response.intermediateResult) {
 					intermediateResult = response.intermediateResult;
@@ -119,8 +134,19 @@
 	<SessionSidebar onSelectSession={handleSelectSession} onNewChat={handleNewChat} />
 
 	<div class="flex flex-1 flex-col">
-		<header class="border-b border-gray-200 bg-white px-4 py-3">
+		<header class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
 			<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
+			<button
+				type="button"
+				onclick={() => (showConfig = !showConfig)}
+				class="flex items-center gap-1 rounded-lg px-2.5 py-1.5 text-sm
+					{showConfig ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
+			>
+				{#if isNonDefaultConfig}
+					<span class="h-2 w-2 rounded-full bg-amber-500"></span>
+				{/if}
+				Config
+			</button>
 		</header>
 
 		<MessageList {messages} />
@@ -157,4 +183,11 @@
 
 		<MessageInput onSend={handleSend} disabled={isStreaming} />
 	</div>
+
+	{#if showConfig}
+		<ConfigSidebar
+			config={sessionConfig}
+			onConfigChange={(c) => (sessionConfig = c)}
+		/>
+	{/if}
 </div>