some more work

plan.md

@@ -0,0 +1,77 @@
+# Layout Redesign Improvements Plan
+
+## Issues to Fix
+
+### Top Bar Adjustments
+
+- [x] Move model and provider select to be the first items in the top bar
+- [x] Remove project name from the top bar (redundant since it's selected in sidebar)
+- [x] Move collapse sidebar button from top bar to the sidebar itself
+
+### Sidebar Improvements
+
+- [x] Make sidebar resizable (use example from visual playground branch)
+- [x] Position collapse button on the sidebar side
+
+### Layout Fixes
+
+- [x] Fix "View docs" and "Give feedback" links overlapping with trash icon
+  - Moved links to bottom bar next to trash icon
+
+## Additional Potential Issues & Improvements
+
+### Usability
+
+- [x] Add keyboard shortcut for collapsing sidebar (Cmd+B / Ctrl+B)
+- [x] Persist sidebar collapsed state in localStorage
+- [x] Persist sidebar width when resizable
+
+### Visual Polish
+
+- [x] Add transition animation when sidebar collapses/expands
+- [ ] Ensure proper spacing between top bar elements
+- [ ] Check dark mode styling consistency
+
+### Responsive Design
+
+- [ ] Test and fix mobile layout
+- [ ] Ensure settings popover doesn't overflow on smaller screens
+- [ ] Handle long project names in sidebar gracefully
+
+### Functionality
+
+- [ ] Ensure system prompt changes are saved properly
+- [ ] Verify model/provider selection works in new top bar position
+- [ ] Test compare mode with new layout
+
+### Accessibility
+
+- [ ] Add proper ARIA labels for interactive elements
+- [ ] Ensure keyboard navigation works properly
+- [ ] Test with screen readers
+
+## Implementation Order
+
+1. **Top Bar Reorganization** (First Priority)
+
+   - Move model/provider select to first position
+   - Remove project name
+   - Relocate sidebar toggle
+
+2. **Resizable Sidebar** (Second Priority)
+
+   - Implement resize functionality
+   - Add persistence
+
+3. **Fix Overlapping Elements** (Third Priority)
+
+   - Resolve footer links position issue
+
+4. **Polish & Testing** (Final)
+   - Add animations
+   - Test all functionality
+   - Fix any remaining issues
+
+---
+
+**Current Status**: Resizable sidebar with persistence implemented. Provider select now visible in top bar alongside model select.

src/lib/components/inference-playground/playground.svelte

@@ -5,7 +5,9 @@
 	import { isHFModel } from "$lib/types.js";
 	import { iterate } from "$lib/utils/array.js";
 	import { atLeastNDecimals } from "$lib/utils/number.js";
+	import { isMac } from "$lib/utils/platform.js";
 	import { Popover } from "melt/builders";
+	import { onMount } from "svelte";
 	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconWaterfall from "~icons/carbon/chart-waterfall";
 	import IconCode from "~icons/carbon/code";
@@ -13,8 +15,6 @@
 	import IconInfo from "~icons/carbon/information";
 	import IconSettings from "~icons/carbon/settings";
 	import IconShare from "~icons/carbon/share";
-	import IconSidebarCollapse from "~icons/carbon/side-panel-close";
-	import IconSidebarExpand from "~icons/carbon/side-panel-open";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
 	import BillingIndicator from "../billing-indicator.svelte";
 	import { showShareModal } from "../share-modal.svelte";
@@ -27,17 +27,65 @@
 	import MessageTextarea from "./message-textarea.svelte";
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
+	import ProviderSelect from "./provider-select.svelte";
 	import ProjectTreeSidebar from "./project-tree-sidebar.svelte";
 	import CheckpointsMenu from "./checkpoints-menu.svelte";
 
+	// LocalStorage keys
+	const SIDEBAR_COLLAPSED_KEY = "playground:sidebar:collapsed";
+	const SIDEBAR_WIDTH_KEY = "playground:sidebar:width";
+	const DEFAULT_SIDEBAR_WIDTH = 256;
+
+	// Initialize from localStorage or defaults
+	function get_initial_collapsed(): boolean {
+		if (typeof localStorage === "undefined") return false;
+		const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
+		return stored === "true";
+	}
+
+	function get_initial_width(): number {
+		if (typeof localStorage === "undefined") return DEFAULT_SIDEBAR_WIDTH;
+		const stored = localStorage.getItem(SIDEBAR_WIDTH_KEY);
+		const parsed = stored ? parseInt(stored, 10) : NaN;
+		return isNaN(parsed) ? DEFAULT_SIDEBAR_WIDTH : parsed;
+	}
+
 	let viewCode = $state(false);
-	let sidebarCollapsed = $state(false);
+	let sidebarCollapsed = $state(get_initial_collapsed());
+	let sidebarWidth = $state(get_initial_width());
 	let billingModalOpen = $state(false);
 	let selectCompareModelOpen = $state(false);
 	let settingsPopoverOpen = $state(false);
 
 	const compareActive = $derived(conversations.active.length === 2);
 
+	// Persist sidebar state to localStorage
+	function toggle_sidebar_collapsed() {
+		sidebarCollapsed = !sidebarCollapsed;
+		localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(sidebarCollapsed));
+	}
+
+	function handle_sidebar_width_change(width: number) {
+		sidebarWidth = width;
+		localStorage.setItem(SIDEBAR_WIDTH_KEY, String(width));
+	}
+
+	// Keyboard shortcut for toggling sidebar (Cmd+B / Ctrl+B)
+	function handle_keydown(e: KeyboardEvent) {
+		const mod_key = isMac() ? e.metaKey : e.ctrlKey;
+		if (mod_key && e.key === "b") {
+			e.preventDefault();
+			toggle_sidebar_collapsed();
+		}
+	}
+
+	onMount(() => {
+		document.addEventListener("keydown", handle_keydown);
+		return () => {
+			document.removeEventListener("keydown", handle_keydown);
+		};
+	});
+
 	// Settings popover
 	const settingsPopover = new Popover({
 		open: () => settingsPopoverOpen,
@@ -54,56 +102,44 @@
 	]}
 >
 	<!-- Project tree sidebar -->
-	<ProjectTreeSidebar collapsed={sidebarCollapsed} />
+	<ProjectTreeSidebar
+		collapsed={sidebarCollapsed}
+		width={sidebarWidth}
+		onToggleCollapse={toggle_sidebar_collapsed}
+		onWidthChange={handle_sidebar_width_change}
+	/>
 
 	<!-- Main content area -->
 	<div class="relative flex flex-1 flex-col overflow-hidden">
 		<!-- Top bar -->
 		<header
-			class="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900"
+			class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-2 dark:border-gray-800 dark:bg-gray-900"
 		>
+			<!-- Left side: Model selector, provider selector, and compare -->
 			<div class="flex items-center gap-3">
-				<!-- Sidebar toggle -->
-				<Tooltip>
-					{#snippet trigger(tooltip)}
-						<button
-							onclick={() => (sidebarCollapsed = !sidebarCollapsed)}
-							class="rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
-							aria-label={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-							{...tooltip.trigger}
-						>
-							{#if sidebarCollapsed}
-								<IconSidebarExpand class="size-5" />
-							{:else}
-								<IconSidebarCollapse class="size-5" />
-							{/if}
-						</button>
-					{/snippet}
-					{sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-				</Tooltip>
-
-				<!-- Project name and checkpoints -->
-				<div class="flex items-center gap-2">
-					<span class="text-sm font-semibold">{projects.current?.name}</span>
-					<CheckpointsMenu />
-				</div>
-			</div>
-
-			<!-- Right side of top bar -->
-			<div class="flex items-center gap-3">
-				<!-- Model selector -->
 				{#if !compareActive && conversations.active[0]}
-					<div class="flex items-center gap-2">
+					<!-- Model and provider stacked vertically -->
+					<div class="flex flex-col gap-1">
 						<ModelSelector conversation={conversations.active[0]} compact />
-						<button
-							class="flex items-center gap-1 rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
-							onclick={() => (selectCompareModelOpen = true)}
-						>
-							<IconCompare class="size-4" />
-							Compare
-						</button>
+						{#if isHFModel(conversations.active[0].model)}
+							<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+							<ProviderSelect conversation={conversations.active[0] as any} compact />
+						{/if}
 					</div>
+					<button
+						class="flex items-center gap-1 rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+						onclick={() => (selectCompareModelOpen = true)}
+					>
+						<IconCompare class="size-4" />
+						Compare
+					</button>
 				{/if}
+			</div>
+
+			<!-- Right side: Actions -->
+			<div class="flex items-center gap-3">
+				<!-- Checkpoints menu -->
+				<CheckpointsMenu />
 
 				<!-- Settings button with popover -->
 				<Tooltip>
@@ -165,7 +201,7 @@
 			<div
 				class="relative flex h-12 shrink-0 items-center justify-between border-t border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900"
 			>
-				<div class="flex items-center gap-2">
+				<div class="flex items-center gap-4">
 					<Tooltip>
 						{#snippet trigger(tooltip)}
 							<button
@@ -180,11 +216,40 @@
 						{/snippet}
 						Clear conversation
 					</Tooltip>
+
+					<!-- Footer links - moved here to avoid overlap -->
+					<div class="flex items-center gap-2 text-xs max-md:hidden">
+						<a
+							target="_blank"
+							href="https://huggingface.co/docs/inference-providers/tasks/chat-completion"
+							class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+						>
+							<IconInfo class="size-3" />
+							Docs
+						</a>
+						<span class="text-gray-400 dark:text-gray-600">·</span>
+						<a
+							target="_blank"
+							href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/1"
+							class="text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+						>
+							Feedback
+						</a>
+						<span class="text-gray-400 dark:text-gray-600">·</span>
+						<a
+							href="https://huggingface.co/inference/models"
+							target="_blank"
+							class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+						>
+							<IconWaterfall class="size-3" />
+							Metrics
+						</a>
+					</div>
 				</div>
 
 				<!-- Stats in center -->
 				<div
-					class="pointer-events-none absolute inset-x-0 flex items-center justify-center gap-x-8 text-center text-sm text-gray-500 max-lg:hidden"
+					class="pointer-events-none absolute inset-x-0 flex items-center justify-center gap-x-8 text-center text-sm text-gray-500 max-xl:hidden"
 				>
 					{#each iterate(conversations.generationStats) as [{ latency, tokens, cost }]}
 						<span>
@@ -201,35 +266,6 @@
 				</div>
 			</div>
 		</div>
-
-		<!-- Footer links -->
-		<div class="absolute bottom-3 left-4 flex items-center gap-2 text-xs">
-			<a
-				target="_blank"
-				href="https://huggingface.co/docs/inference-providers/tasks/chat-completion"
-				class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-			>
-				<IconInfo class="size-3" />
-				View Docs
-			</a>
-			<span class="text-gray-500 dark:text-gray-500">·</span>
-			<a
-				target="_blank"
-				href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/1"
-				class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-			>
-				Give feedback
-			</a>
-			<span class="text-gray-500 dark:text-gray-500">·</span>
-			<a
-				href="https://huggingface.co/inference/models"
-				target="_blank"
-				class="flex items-center gap-1 text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-			>
-				<IconWaterfall class="size-3" />
-				Metrics
-			</a>
-		</div>
 	</div>
 </div>
 

src/lib/components/inference-playground/project-tree-sidebar.svelte

@@ -15,7 +15,10 @@
 	import IconEdit from "~icons/carbon/edit";
 	import IconDelete from "~icons/carbon/trash-can";
 	import IconHistory from "~icons/carbon/recently-viewed";
+	import IconSidebarCollapse from "~icons/carbon/side-panel-close";
+	import IconSidebarExpand from "~icons/carbon/side-panel-open";
 	import { prompt } from "../prompts.svelte";
+	import Tooltip from "../tooltip.svelte";
 
 	interface ProjectTreeItem extends TreeItem {
 		id: string;
@@ -24,11 +27,50 @@
 		children?: ProjectTreeItem[];
 	}
 
+	const MIN_WIDTH = 200;
+	const MAX_WIDTH = 400;
+	const DEFAULT_WIDTH = 256;
+	const COLLAPSED_WIDTH = 48;
+
 	interface Props {
 		collapsed?: boolean;
+		width?: number;
+		onToggleCollapse?: () => void;
+		onWidthChange?: (width: number) => void;
+	}
+
+	let { collapsed = false, width = DEFAULT_WIDTH, onToggleCollapse, onWidthChange }: Props = $props();
+
+	// Resize state
+	let is_resizing = $state(false);
+	let resize_start_x = $state(0);
+	let resize_start_width = $state(0);
+
+	function handle_resize_start(e: MouseEvent) {
+		if (collapsed) return;
+		is_resizing = true;
+		resize_start_x = e.clientX;
+		resize_start_width = width;
+		document.addEventListener("mousemove", handle_resize_move);
+		document.addEventListener("mouseup", handle_resize_end);
+		document.body.style.cursor = "ew-resize";
+		document.body.style.userSelect = "none";
+	}
+
+	function handle_resize_move(e: MouseEvent) {
+		if (!is_resizing) return;
+		const delta = e.clientX - resize_start_x;
+		const new_width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, resize_start_width + delta));
+		onWidthChange?.(new_width);
 	}
 
-	let { collapsed = false }: Props = $props();
+	function handle_resize_end() {
+		is_resizing = false;
+		document.removeEventListener("mousemove", handle_resize_move);
+		document.removeEventListener("mouseup", handle_resize_end);
+		document.body.style.cursor = "";
+		document.body.style.userSelect = "";
+	}
 
 	// Build tree structure from projects
 	const tree_items = $derived.by((): ProjectTreeItem[] => {
@@ -142,20 +184,42 @@
 
 <aside
 	class={cn(
-		"flex h-full flex-col overflow-hidden border-r border-gray-200 bg-gray-50/50 transition-all dark:border-gray-800 dark:bg-gray-900/50",
-		collapsed ? "w-12" : "w-64",
+		"relative flex h-full flex-col overflow-hidden border-r border-gray-200 bg-gray-50/50 dark:border-gray-800 dark:bg-gray-900/50",
+		!is_resizing && "transition-[width] duration-200 ease-out",
 	)}
+	style="width: {collapsed ? COLLAPSED_WIDTH : width}px"
 >
 	{#if !collapsed}
-		<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-800">
+		<div class="flex items-center justify-between border-b border-gray-200 px-3 py-2 dark:border-gray-800">
 			<h2 class="text-sm font-semibold text-gray-700 uppercase dark:text-gray-300">Projects</h2>
-			<button
-				onclick={handle_new_project}
-				class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
-				aria-label="New project"
-			>
-				<IconPlus class="size-4" />
-			</button>
+			<div class="flex items-center gap-1">
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<button
+							onclick={handle_new_project}
+							class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+							aria-label="New project"
+							{...tooltip.trigger}
+						>
+							<IconPlus class="size-4" />
+						</button>
+					{/snippet}
+					New project
+				</Tooltip>
+				<Tooltip>
+					{#snippet trigger(tooltip)}
+						<button
+							onclick={onToggleCollapse}
+							class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+							aria-label="Collapse sidebar"
+							{...tooltip.trigger}
+						>
+							<IconSidebarCollapse class="size-4" />
+						</button>
+					{/snippet}
+					Collapse sidebar
+				</Tooltip>
+			</div>
 		</div>
 
 		<div class="flex-1 overflow-y-auto p-2" {...tree.root}>
@@ -175,30 +239,59 @@
 			{/if}
 		</div>
 	{:else}
-		<!-- Collapsed state - just show icons -->
-		<div class="flex flex-col items-center gap-1 py-3">
-			{#each tree_items as item}
-				{@const is_active = tree.isSelected(item.id)}
-				{@const is_branch = item.project.branchedFromId !== null}
-				<button
-					onclick={() => tree.toggleSelect(item.id)}
-					class={cn(
-						"grid size-8 place-items-center rounded-md transition-colors",
-						is_active
-							? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
-							: "text-gray-600 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700",
-					)}
-					title={item.project.name}
-				>
-					{#if is_branch}
-						<IconBranch class="size-4" />
-					{:else}
-						<IconFolder class="size-4" />
-					{/if}
-				</button>
-			{/each}
+		<!-- Collapsed state - show expand button and project icons -->
+		<div class="flex flex-col items-center py-2">
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						onclick={onToggleCollapse}
+						class="mb-2 grid size-8 place-items-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+						aria-label="Expand sidebar"
+						{...tooltip.trigger}
+					>
+						<IconSidebarExpand class="size-4" />
+					</button>
+				{/snippet}
+				Expand sidebar
+			</Tooltip>
+			<div class="h-px w-6 bg-gray-200 dark:bg-gray-700"></div>
+			<div class="mt-2 flex flex-col items-center gap-1">
+				{#each tree_items as item}
+					{@const is_active = tree.isSelected(item.id)}
+					{@const is_branch = item.project.branchedFromId !== null}
+					<button
+						onclick={() => tree.toggleSelect(item.id)}
+						class={cn(
+							"grid size-8 place-items-center rounded-md transition-colors",
+							is_active
+								? "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
+								: "text-gray-600 hover:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-700",
+						)}
+						title={item.project.name}
+					>
+						{#if is_branch}
+							<IconBranch class="size-4" />
+						{:else}
+							<IconFolder class="size-4" />
+						{/if}
+					</button>
+				{/each}
+			</div>
 		</div>
 	{/if}
+
+	<!-- Resize handle -->
+	{#if !collapsed}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class={cn(
+				"absolute top-0 right-0 h-full w-1 cursor-ew-resize transition-colors",
+				"hover:bg-blue-400 dark:hover:bg-blue-500",
+				is_resizing && "bg-blue-500 dark:bg-blue-400",
+			)}
+			onmousedown={handle_resize_start}
+		></div>
+	{/if}
 </aside>
 
 {#snippet tree_node(items: typeof tree.children)}

src/lib/components/inference-playground/provider-select.svelte

@@ -13,9 +13,10 @@
 	interface Props {
 		conversation: ConversationClass & { model: Model };
 		class?: string | undefined;
+		compact?: boolean;
 	}
 
-	const { conversation, class: classes = undefined }: Props = $props();
+	const { conversation, class: classes = undefined, compact = false }: Props = $props();
 
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.data.provider);
@@ -102,14 +103,14 @@
 	});
 </script>
 
-{#snippet providerDisplay(provider: string)}
+{#snippet providerDisplay(provider: string, showPricing: boolean = true)}
 	{@const providerPricing = getProviderPricing(provider)}
 	<div class="flex flex-col items-start gap-0.5">
 		<div class="flex items-center gap-2 text-sm">
 			<IconProvider {provider} />
 			<span>{getProviderName(provider) ?? "loading"}</span>
 		</div>
-		{#if providerPricing}
+		{#if showPricing && providerPricing}
 			<span class="text-xs text-gray-500 dark:text-gray-400">
 				In: {providerPricing.input} • Out: {providerPricing.output}
 			</span>
@@ -117,68 +118,70 @@
 	</div>
 {/snippet}
 
-<div class="flex flex-col gap-2">
-	<button
-		{...select.trigger}
-		class={cn(
-			"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
-			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-			classes,
-		)}
-	>
-		{@render providerDisplay(conversation.data.provider ?? "")}
-		<div
-			class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+{#snippet compactProviderDisplay(provider: string)}
+	<div class="flex items-center gap-1.5">
+		<IconProvider {provider} />
+		<span class="text-sm">{getProviderName(provider) ?? "loading"}</span>
+	</div>
+{/snippet}
+
+{#if compact}
+	<!-- Compact mode for top bar - provider and auto policy side by side -->
+	<div class="flex items-center gap-2">
+		<!-- Provider select -->
+		<button
+			{...select.trigger}
+			class={cn(
+				"focus-outline relative flex items-center gap-2 overflow-hidden rounded-lg border",
+				"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
+				"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+				classes,
+			)}
 		>
-			<IconCaret />
-		</div>
-	</button>
+			{@render compactProviderDisplay(conversation.data.provider ?? "")}
+			<IconCaret class="size-4 flex-none text-gray-500" />
+		</button>
 
-	<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-		{#snippet option(provider: string)}
-			<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
-				<div
-					class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
-				>
-					{@render providerDisplay(provider)}
+		<div {...select.content} class="z-50 rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+			{#snippet option(provider: string)}
+				<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
+					<div
+						class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+					>
+						{@render providerDisplay(provider)}
+					</div>
 				</div>
-			</div>
-		{/snippet}
-		{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
-			{@render option(provider)}
-		{/each}
-		{@render option("auto")}
-	</div>
+			{/snippet}
+			{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
+				{@render option(provider)}
+			{/each}
+			{@render option("auto")}
+		</div>
 
-	{#if conversation.data.provider === "auto"}
-		<div class="flex flex-col gap-1.5">
-			<div class="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
-				<span>Auto Policy</span>
-				<Tooltip>
-					{#snippet trigger(tooltip)}
-						<button class="flex items-center" {...tooltip.trigger}>
-							<IconInfo class="size-3" />
-						</button>
-					{/snippet}
-					{autoPolicyDescriptions[autoPolicyValue]}
-				</Tooltip>
-			</div>
-			<button
-				{...autoPolicySelect.trigger}
-				class={cn(
-					"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
-					"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-				)}
-			>
-				{autoPolicyLabels[autoPolicyValue]}
-				<div
-					class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
-				>
-					<IconCaret />
-				</div>
-			</button>
+		<!-- Auto policy select (only shown when provider is auto) -->
+		{#if conversation.data.provider === "auto"}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						{...autoPolicySelect.trigger}
+						class={cn(
+							"focus-outline relative flex items-center gap-2 overflow-hidden rounded-lg border",
+							"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
+							"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+						)}
+						{...tooltip.trigger}
+					>
+						{autoPolicyLabels[autoPolicyValue]}
+						<IconCaret class="size-4 flex-none text-gray-500" />
+					</button>
+				{/snippet}
+				{autoPolicyDescriptions[autoPolicyValue]}
+			</Tooltip>
 
-			<div {...autoPolicySelect.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+			<div
+				{...autoPolicySelect.content}
+				class="z-50 rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800"
+			>
 				{#snippet policyOption(policy: "default" | "fastest" | "cheapest", label: string)}
 					<div {...autoPolicySelect.getOption(policy)} class="group block w-full p-1 text-sm dark:text-white">
 						<div
@@ -197,6 +200,91 @@
 				{@render policyOption("fastest", "Fastest")}
 				{@render policyOption("cheapest", "Cheapest")}
 			</div>
+		{/if}
+	</div>
+{:else}
+	<!-- Full mode for settings panel -->
+	<div class="flex flex-col gap-2">
+		<button
+			{...select.trigger}
+			class={cn(
+				"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
+				"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+				classes,
+			)}
+		>
+			{@render providerDisplay(conversation.data.provider ?? "")}
+			<div
+				class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+			>
+				<IconCaret />
+			</div>
+		</button>
+
+		<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+			{#snippet option(provider: string)}
+				<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
+					<div
+						class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+					>
+						{@render providerDisplay(provider)}
+					</div>
+				</div>
+			{/snippet}
+			{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
+				{@render option(provider)}
+			{/each}
+			{@render option("auto")}
 		</div>
-	{/if}
-</div>
+
+		{#if conversation.data.provider === "auto"}
+			<div class="flex flex-col gap-1.5">
+				<div class="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
+					<span>Auto Policy</span>
+					<Tooltip>
+						{#snippet trigger(tooltip)}
+							<button class="flex items-center" {...tooltip.trigger}>
+								<IconInfo class="size-3" />
+							</button>
+						{/snippet}
+						{autoPolicyDescriptions[autoPolicyValue]}
+					</Tooltip>
+				</div>
+				<button
+					{...autoPolicySelect.trigger}
+					class={cn(
+						"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
+						"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+					)}
+				>
+					{autoPolicyLabels[autoPolicyValue]}
+					<div
+						class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
+					>
+						<IconCaret />
+					</div>
+				</button>
+
+				<div {...autoPolicySelect.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+					{#snippet policyOption(policy: "default" | "fastest" | "cheapest", label: string)}
+						<div {...autoPolicySelect.getOption(policy)} class="group block w-full p-1 text-sm dark:text-white">
+							<div
+								class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+							>
+								<div class="flex flex-col items-start gap-0.5">
+									<span>{label}</span>
+									<span class="text-xs text-gray-500 dark:text-gray-400">
+										{autoPolicyDescriptions[policy]}
+									</span>
+								</div>
+							</div>
+						</div>
+					{/snippet}
+					{@render policyOption("default", "Default")}
+					{@render policyOption("fastest", "Fastest")}
+					{@render policyOption("cheapest", "Cheapest")}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}