refactor: move ModelSelector into dropdown as 'Current Model' option

2 files changed, 44 insertions, 19 deletions

diff --git a/packages/frontend/src/App.svelte b/packages/frontend/src/App.svelte
index a73dcac..1cbf9b5 100644
--- a/packages/frontend/src/App.svelte
+++ b/packages/frontend/src/App.svelte
@@ -4,7 +4,6 @@ import ChatInput from "./lib/components/ChatInput.svelte";
 import ChatPanel from "./lib/components/ChatPanel.svelte";
 import Header from "./lib/components/Header.svelte";
 import PermissionPrompt from "./lib/components/PermissionPrompt.svelte";
-import ModelSelector from "./lib/components/ModelSelector.svelte";
 import SidebarPanel from "./lib/components/SidebarPanel.svelte";
 import HotReloadIndicator from "./lib/components/HotReloadIndicator.svelte";
 import { chatStore } from "./lib/chat.svelte.js";
@@ -80,21 +79,24 @@ onMount(() => {
 			class:w-80={sidebarOpen}
 			class:w-0={!sidebarOpen}
 		>
-			<div
-				class="w-80 flex-1 min-h-0 overflow-y-auto bg-base-100 border-l border-base-300 px-2 py-2 flex flex-col gap-2 [&>*]:shrink-0 transition-transform duration-300 ease-out"
-				style="transform: translateX({sidebarOpen ? '0' : '100%'})"
-			>
-				<ModelSelector
-					keys={modelsData.keys}
-					activeKeyId={chatStore.activeKeyId}
-					activeModelId={chatStore.activeModelId}
-					reasoningEffort={chatStore.reasoningEffort}
-					onKeyChange={(keyId) => chatStore.setKey(keyId)}
-					onModelChange={(keyId, modelId) => chatStore.changeModel(keyId, modelId)}
-					onReasoningChange={(effort) => { chatStore.reasoningEffort = effort; }}
-				/>
-
-				<SidebarPanel
+		<div
+			class="w-80 flex-1 min-h-0 overflow-y-auto bg-base-100 border-l border-base-300 px-2 py-2 flex flex-col gap-2 [&>*]:shrink-0 transition-transform duration-300 ease-out"
+			style="transform: translateX({sidebarOpen ? '0' : '100%'})"
+		>
+			<SidebarPanel
+				models={modelsData.models}
+				keys={modelsData.keys}
+				tags={modelsData.tags}
+				tasks={chatStore.tasks}
+				permissionLog={chatStore.permissionLog}
+				apiBase={config.apiBase}
+				activeKeyId={chatStore.activeKeyId}
+				activeModelId={chatStore.activeModelId}
+				reasoningEffort={chatStore.reasoningEffort}
+				onKeyChange={(keyId) => chatStore.setKey(keyId)}
+				onModelChange={(keyId, modelId) => chatStore.changeModel(keyId, modelId)}
+				onReasoningChange={(effort) => { chatStore.reasoningEffort = effort; }}
+			/>
 					models={modelsData.models}
 					keys={modelsData.keys}
 					tags={modelsData.tags}
diff --git a/packages/frontend/src/lib/components/SidebarPanel.svelte b/packages/frontend/src/lib/components/SidebarPanel.svelte
index 798e65b..6b6f917 100644
--- a/packages/frontend/src/lib/components/SidebarPanel.svelte
+++ b/packages/frontend/src/lib/components/SidebarPanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ModelSelector from "./ModelSelector.svelte";
 	import ModelStatus from "./ModelStatus.svelte";
 	import TaskListPanel from "./TaskListPanel.svelte";
 	import ConfigPanel from "./ConfigPanel.svelte";
@@ -15,6 +16,12 @@
 		tasks = [],
 		permissionLog = [],
 		apiBase = "",
+		activeKeyId = null,
+		activeModelId = null,
+		reasoningEffort = "max",
+		onKeyChange,
+		onModelChange,
+		onReasoningChange,
 	}: {
 		models?: ModelInfo[];
 		keys?: KeyInfo[];
@@ -22,11 +29,17 @@
 		tasks?: TaskItem[];
 		permissionLog?: LogEntry[];
 		apiBase?: string;
+		activeKeyId?: string | null;
+		activeModelId?: string | null;
+		reasoningEffort?: string;
+		onKeyChange: (keyId: string) => void;
+		onModelChange: (keyId: string, modelId: string) => void;
+		onReasoningChange: (effort: string) => void;
 	} = $props();
 
-	let selected = $state("Tasks");
+	let selected = $state("Current Model");
 
-	const options = ["Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Permission Log"];
+	const options = ["Current Model", "Key Usage", "Claude Reset", "Model Status", "Tasks", "Config", "Skills", "Permission Log"];
 </script>
 
 <div class="bg-base-200 rounded-lg p-3 flex flex-col min-h-0">
@@ -40,7 +53,17 @@
 	</select>
 
 	<div class="mt-2 flex-1 min-h-0">
-		{#if selected === "Key Usage"}
+		{#if selected === "Current Model"}
+			<ModelSelector
+				{keys}
+				{activeKeyId}
+				{activeModelId}
+				{reasoningEffort}
+				{onKeyChange}
+				{onModelChange}
+				{onReasoningChange}
+			/>
+		{:else if selected === "Key Usage"}
 			<KeyUsage {keys} {apiBase} />
 		{:else if selected === "Claude Reset"}
 			<ClaudeReset {apiBase} />