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

1 files changed, 26 insertions, 3 deletions

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} />