From 3d0da6f4ebb7a4d817a62a43f8a42752bccaded1 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 15 Aug 2026 22:53:26 +0200
Subject: [PATCH] ui : keep reasoning submenu visible regardless of model state

---
 .../ChatFormActionAdd/ChatFormActionAddDropdown.svelte |  9 ++-------
 .../ChatFormActionAddReasoningSubmenu.svelte           |  8 +++-----
 .../ChatFormActionAdd/ChatFormActionAddSheet.svelte    |  6 ++++--
 tools/ui/src/lib/hooks/use-reasoning-menu.svelte.ts    | 10 ++++++++++
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
index 02bfadb7e4..4aa3f6f3e0 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
@@ -2,7 +2,6 @@
 	import { File, FolderOpen, MessageSquare, Plus, Zap } from '@lucide/svelte';
 	import {
 		ChatFormActionAddMcpServersSubmenu,
-		ChatFormActionAddReasoningSubmenu,
 		ChatFormActionAddToolsSubmenu
 	} from '$lib/components/app';
 	import { buttonVariants } from '$lib/components/ui/button';
@@ -93,10 +92,6 @@
 				}
 			}}
 		>
-			<ChatFormActionAddReasoningSubmenu />
-
-			<DropdownMenu.Separator />
-
 			<DropdownMenu.Sub>
 				<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
 					<File class={ICON_CLASS_DEFAULT} />
@@ -156,11 +151,11 @@
 
 			<ChatFormActionAddToolsSubmenu />
 
+			<DropdownMenu.Separator />
+
 			<ChatFormActionAddMcpServersSubmenu onMcpSettingsClick={handleMcpSettingsClick} />
 
 			{#if chatFormActions.hasMcpPromptsSupport}
-				<DropdownMenu.Separator />
-
 				<DropdownMenu.Item
 					class="flex cursor-pointer items-center gap-2"
 					onclick={chatFormActions.onMcpPromptClick}
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
index 1b6fc4b020..c2e676f3d5 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
@@ -8,10 +8,9 @@
 	const reasoning = useReasoningMenu();
 </script>
 
-{#if reasoning.modelSupportsThinking}
-	<DropdownMenu.Sub>
+<DropdownMenu.Sub>
 		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
-			{#if reasoning.thinkingEnabled}
+			{#if reasoning.isReasoningActive}
 				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
 			{:else if reasoning.isOff}
 				<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
@@ -20,7 +19,7 @@
 			{/if}
 
 			<span
-				class="text-sm inline-flex gap-2 {!reasoning.thinkingEnabled
+				class="text-sm inline-flex gap-2 {!reasoning.isReasoningActive
 					? 'text-muted-foreground'
 					: ''}"
 			>
@@ -74,4 +73,3 @@
 			{/each}
 		</DropdownMenu.SubContent>
 	</DropdownMenu.Sub>
-{/if}
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
index 2f69dc96de..db655c249a 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
@@ -100,7 +100,7 @@
 								<ChevronRight class="{ICON_CLASS_DEFAULT} shrink-0" />
 							{/if}
 
-							{#if reasoning.thinkingEnabled}
+							{#if reasoning.isReasoningActive}
 								<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
 							{:else if reasoning.isOff}
 								<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
@@ -194,7 +194,9 @@
 					</Collapsible.Content>
 				</Collapsible.Root>
 
-				<Collapsible.Root onOpenChange={(open) => (mcpExpanded = open)} open={mcpExpanded}>
+				<div class="h-px bg-border"></div>
+
+				<Collapsible.Root open={mcpExpanded} onOpenChange={(open) => (mcpExpanded = open)}>
 					<Collapsible.Trigger class={sheetItemClass}>
 						{#if mcpExpanded}
 							<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0" />
diff --git a/tools/ui/src/lib/hooks/use-reasoning-menu.svelte.ts b/tools/ui/src/lib/hooks/use-reasoning-menu.svelte.ts
index 2cb9c90609..8041aca062 100644
--- a/tools/ui/src/lib/hooks/use-reasoning-menu.svelte.ts
+++ b/tools/ui/src/lib/hooks/use-reasoning-menu.svelte.ts
@@ -8,6 +8,7 @@ import { getConversationModel } from '$lib/utils';
 export interface UseReasoningMenuReturn {
 	readonly modelSupportsThinking: boolean;
 	readonly thinkingEnabled: boolean;
+	readonly isReasoningActive: boolean;
 	readonly isOff: boolean;
 	readonly currentEffort: ReasoningEffort;
 	readonly levels: ReasoningEffortLevel[];
@@ -59,6 +60,12 @@ export function useReasoningMenu(): UseReasoningMenuReturn {
 	const thinkingEnabled = $derived(
 		currentEffort !== ReasoningEffort.OFF && currentEffort !== ReasoningEffort.DEFAULT
 	);
+	// Thinking is effectively on (lightbulb lit) either when an explicit effort
+	// is selected, or when the effort is left at "Default" and the model
+	// supports thinking.
+	const isReasoningActive = $derived(
+		thinkingEnabled || (currentEffort === ReasoningEffort.DEFAULT && modelSupportsThinking)
+	);
 
 	return {
 		get currentEffort() {
@@ -82,6 +89,9 @@ export function useReasoningMenu(): UseReasoningMenuReturn {
 		get thinkingEnabled() {
 			return thinkingEnabled;
 		},
+		get isReasoningActive() {
+			return isReasoningActive;
+		},
 		tokenLabel(level: ReasoningEffortLevel): string | null {
 			if (level.value === ReasoningEffort.DEFAULT) return 'Model default';