From 407c28d968c6a59a7c9f819db84fb8d224441ce0 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 1 Sep 2026 18:23:48 +0200
Subject: [PATCH] ui : polish reasoning panel chevron layout

Move the expand chevron to the right and swap it for ChevronUp when

open. Group the effort label next to the title.

Assisted-by: llama-ui:Qwen3.8-Flash-Next
---
 .../ModelsSelectorReasoningPanel.svelte       | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
index 06ceea5411..d0285a4390 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Check, ChevronDown, ChevronRight, Info, Lightbulb, LightbulbOff } from '@lucide/svelte';
+	import { Check, ChevronDown, ChevronUp, Info, Lightbulb, LightbulbOff } from '@lucide/svelte';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -28,12 +28,6 @@
 			     spread props.class, and the button is the menu item itself (the `child`
 			     snippet replaces Item's own div), so all styling must come from above. -->
 			<Collapsible.Trigger {...props}>
-				{#if expanded}
-					<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
-				{:else}
-					<ChevronRight class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
-				{/if}
-
 				{#if reasoning.isReasoningActive}
 					<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
 				{:else if reasoning.isOff}
@@ -42,11 +36,19 @@
 					<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
 				{/if}
 
-				<span class="flex-1 truncate">Reasoning</span>
+				<span class="flex min-w-0 flex-1 items-center gap-1.5">
+					<span class="truncate">Reasoning</span>
 
-				<span class="shrink-0 text-xs capitalize text-muted-foreground">
-					{reasoning.currentEffort}
+					<span class="shrink-0 text-xs capitalize text-muted-foreground">
+						{reasoning.currentEffort}
+					</span>
 				</span>
+
+				{#if expanded}
+					<ChevronUp class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+				{:else}
+					<ChevronDown class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+				{/if}
 			</Collapsible.Trigger>
 		{/snippet}
 	</DropdownMenu.Item>