Honor effort chips and hover on the model popover

Co-authored-by: Gao Yu <gaoyu06@users.noreply.github.com>

Author: cursoragent

src/lib/ChatPane.svelte

@@ -120,6 +120,9 @@
 	// Picker filter (history / long lists)
 	let pickerQuery = $state('');
 	let selIdx = $state(0);
+	// True once the user arrow-keys through the picker — the model popover only
+	// shows effort chips for a keyboard-focused row (not the default selIdx).
+	let pickerKeyNav = $state(false);
 
 	// Ops flow through this session's backend adapter; an unsupported op
 	// (non-jucode stub backends) surfaces as an inline system notice.
@@ -173,19 +176,33 @@
 	// yet (an optimistic push counts) and not a resumed conversation.
 	const backendLocked = $derived(!!session.restored || chat.userTurns > 0);
 
-	// Current git branch for the composer's footer strip, refetched when the
-	// working directory changes. A detached HEAD reads "detached"; a failed
-	// probe (not a git repo) hides the chip.
+	// Current git branch for the composer's footer strip. A detached HEAD reads
+	// "detached"; a failed probe (not a git repo) hides the chip.
 	let gitBranch = $state('');
-	$effect(() => {
+	function refreshGitBranch() {
 		const cwd = project?.path || chat.cwd;
-		gitBranch = '';
-		if (!cwd) return;
+		if (!cwd) {
+			gitBranch = '';
+			return;
+		}
 		git(['branch', '--show-current'], cwd)
 			.then((out) => {
 				if (cwd === (project?.path || chat.cwd)) gitBranch = out.trim() || 'detached';
 			})
 			.catch(() => {});
+	}
+	// Refetched when the working directory changes (chip resets immediately)…
+	$effect(() => {
+		const cwd = project?.path || chat.cwd;
+		gitBranch = '';
+		if (!cwd) return;
+		refreshGitBranch();
+	});
+	// …and refreshed in place on window focus + a slow poll, so a checkout made
+	// in GitPanel or an external terminal doesn't leave the footer stale.
+	$effect(() => {
+		const iv = setInterval(refreshGitBranch, 12_000);
+		return () => clearInterval(iv);
 	});
 
 	// Open the model picker as a popover. If we already have a cached catalog,
@@ -316,6 +333,7 @@
 		if (chat.picker) {
 			const i = filteredRows.findIndex((r) => r.active);
 			selIdx = i >= 0 ? i : 0;
+			pickerKeyNav = false;
 		}
 	});
 	$effect(() => {
@@ -448,14 +466,12 @@
 	function selectRow(command: string) {
 		// Cross-provider model pick: rewrite config + restart this session (resumes
 		// the conversation) since the engine can't change provider at runtime.
+		// `@switch <provider> <model> [effort]` — the effort chip appends its value.
 		if (command.startsWith('@switch ')) {
-			const rest = command.slice('@switch '.length);
-			const sp = rest.indexOf(' ');
-			const pid = rest.slice(0, sp);
-			const name = rest.slice(sp + 1);
+			const [pid, name, effort] = command.slice('@switch '.length).split(/\s+/);
 			const pv = providersList.find((x) => x.id === pid);
 			chat.closePicker();
-			if (pv) store.switchProvider(session.id, pv, name);
+			if (pv && name) store.switchProvider(session.id, pv, name, effort);
 			return;
 		}
 		// Resuming a history item opens it in a fresh session so the current chat
@@ -493,9 +509,11 @@
 		} else if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			selIdx = Math.min(selIdx + 1, filteredRows.length - 1);
+			pickerKeyNav = true;
 		} else if (e.key === 'ArrowUp') {
 			e.preventDefault();
 			selIdx = Math.max(selIdx - 1, 0);
+			pickerKeyNav = true;
 		} else if (e.key === 'Enter') {
 			e.preventDefault();
 			const r = filteredRows[selIdx];
@@ -666,7 +684,7 @@
 	});
 </script>
 
-<svelte:window onkeydown={onWindowKey} />
+<svelte:window onkeydown={onWindowKey} onfocus={refreshGitBranch} />
 
 <div class="chatpane">
 	{#if Object.keys(chat.subagents).length}
@@ -761,6 +779,7 @@
 			onBackend={(b, acpAgent) => store.switchBackend(session.id, b, acpAgent)}
 			bind:pickerQuery
 			bind:pickerSelIdx={selIdx}
+			bind:pickerKeyNav
 			onApproval={setApprovalMode}
 		/>
 	</div>

src/lib/Composer.svelte

@@ -26,6 +26,7 @@
 		el = $bindable(),
 		pickerQuery = $bindable(''),
 		pickerSelIdx = $bindable(0),
+		pickerKeyNav = $bindable(false),
 		modelRows = [],
 		modelTitle = '',
 		modelSearch = false,
@@ -48,6 +49,8 @@
 		el: HTMLElement | null;
 		pickerQuery?: string;
 		pickerSelIdx?: number;
+		/** Arrow keys moved the picker selection (effort chips follow it then). */
+		pickerKeyNav?: boolean;
 		modelRows?: ModelRow[];
 		modelTitle?: string;
 		modelSearch?: boolean;
@@ -82,12 +85,23 @@
 			return;
 		}
 		modelOpen = true;
+		pickerKeyNav = false;
 		if (bcaps.modelPicker) onModel();
 	}
 	function closeModelPopover() {
 		modelOpen = false;
 		if (chat.picker?.kind === 'model') onModelClose?.();
 	}
+	// Escape closes the popover even when the session has no model picker view
+	// (ACP agents — `modelOpen` is ours, not chat.picker). Capture phase so the
+	// key never reaches the pane's window handler or the editor.
+	function onWindowKeyCapture(e: KeyboardEvent) {
+		if (e.key === 'Escape' && modelPopoverVisible) {
+			e.preventDefault();
+			e.stopPropagation();
+			closeModelPopover();
+		}
+	}
 	function selectFromPopover(command: string) {
 		modelOpen = false;
 		onModelSelect?.(command);
@@ -461,6 +475,8 @@
 
 </script>
 
+<svelte:window onkeydowncapture={onWindowKeyCapture} />
+
 <div class="composer-wrap">
 	{#if slashMatches.length}
 		<SlashMenu matches={slashMatches} selected={slashIdx} onSelect={(c) => (input = c.command + ' ')} onHover={(i) => (slashIdx = i)} />
@@ -525,6 +541,7 @@
 							{backendLocked}
 							bind:query={pickerQuery}
 							bind:selIdx={pickerSelIdx}
+							bind:keyNav={pickerKeyNav}
 							onClose={closeModelPopover}
 							onSelect={selectFromPopover}
 							{onBackend}

src/lib/composer/AgentModelPopover.svelte

@@ -24,6 +24,7 @@
 		backendLocked = true,
 		query = $bindable(''),
 		selIdx = $bindable(0),
+		keyNav = $bindable(false),
 		onClose,
 		onSelect,
 		onBackend,
@@ -37,6 +38,8 @@
 		backendLocked?: boolean;
 		query?: string;
 		selIdx?: number;
+		/** The pane's arrow keys moved selIdx — chips follow the focused row. */
+		keyNav?: boolean;
 		onClose: () => void;
 		onSelect: (command: string) => void;
 		onBackend?: (b: BackendId, acpAgent?: { id: string; name: string }) => void | Promise<void>;
@@ -68,27 +71,50 @@
 		return p.version ? `${BACKEND_LABELS[id]} · ${p.version}` : BACKEND_LABELS[id];
 	};
 
+	// An agent switch tears down and respawns the session's engine — a second
+	// rail click while one is in flight would race it, so gate on a local flag.
+	let switching = $state(false);
 	async function pickNative(id: BackendId) {
-		if (id === chat.backendId) return;
-		await onBackend?.(id);
-		if (CAPS[id].modelPicker) onRefreshModels();
+		if (switching || id === chat.backendId) return;
+		switching = true;
+		try {
+			await onBackend?.(id);
+			if (CAPS[id].modelPicker) onRefreshModels();
+		} finally {
+			switching = false;
+		}
 	}
 	async function pickAcp(agent: AcpAgent) {
-		if (chat.backendId === 'acp' && chat.acpAgentId === agent.id) return;
-		// ACP agents expose no model catalog — nothing to refresh afterwards.
-		await onBackend?.('acp', { id: agent.id, name: agent.name });
+		if (switching || (chat.backendId === 'acp' && chat.acpAgentId === agent.id)) return;
+		switching = true;
+		try {
+			// ACP agents expose no model catalog — nothing to refresh afterwards.
+			await onBackend?.('acp', { id: agent.id, name: agent.name });
+		} finally {
+			switching = false;
+		}
 	}
 
 	// Effort highlighted on the active row (engine-reported, falling back to
 	// the session's current effort).
 	const activeEffort = $derived(
 		chat.picker?.kind === 'model' ? chat.picker.activeEffort || chat.effort : chat.effort
 	);
-	// Effort chips only apply to same-engine rows (/model takes an effort
-	// argument); cross-provider @switch rows restart the engine, which picks
-	// its own default effort.
-	const chipEfforts = (row: ModelRow) =>
-		row.command.startsWith('/model ') ? (row.efforts ?? []) : [];
+	// Every row with efforts gets chips: same-engine rows via `/model <name>
+	// <effort>`, cross-provider rows via `@switch <provider> <model> <effort>`
+	// (the restart applies the picked effort instead of the provider default).
+	const chipEfforts = (row: ModelRow) => row.efforts ?? [];
+
+	// Chips are hover-driven for the mouse (mouseenter on a row, cleared when
+	// the pointer leaves the list) and follow selIdx only after the user
+	// actually arrow-keyed — never on the default/active selection.
+	let hoverIdx = $state<number | null>(null);
+	const chipIdx = $derived(hoverIdx ?? (keyNav ? selIdx : null));
+	function hoverRow(i: number) {
+		hoverIdx = i;
+		selIdx = i;
+		keyNav = false;
+	}
 </script>
 
 <button class="pop-backdrop" aria-label="close" onclick={onClose}></button>
@@ -106,6 +132,7 @@
 						class="railbtn"
 						class:on={chat.backendId === id}
 						class:miss={p ? !p.found : false}
+						disabled={switching}
 						onclick={() => pickNative(id)}
 						title={railTitle(id)}
 						aria-label={BACKEND_LABELS[id]}
@@ -119,6 +146,7 @@
 						<button
 							class="railbtn"
 							class:on={chat.backendId === 'acp' && chat.acpAgentId === agent.id}
+							disabled={switching}
 							onclick={() => pickAcp(agent)}
 							title={agent.name}
 							aria-label={agent.name}
@@ -137,7 +165,7 @@
 					<input bind:value={query} placeholder={t('shell.pickerSearchPlaceholder')} autofocus />
 				</div>
 			{/if}
-			<div class="rows">
+			<div class="rows" role="presentation" onmouseleave={() => (hoverIdx = null)}>
 				{#each rows as row, i (row.id)}
 					{#if row.group && (i === 0 || rows[i - 1]?.group !== row.group)}
 						<div class="row-group">{row.group}</div>
@@ -146,14 +174,14 @@
 						class="prow"
 						class:sel={i === selIdx}
 						onclick={() => onSelect(row.command)}
-						onmouseenter={() => (selIdx = i)}
+						onmouseenter={() => hoverRow(i)}
 					>
 						<Vendor model={row.vendor ?? row.label} size={15} />
 						<span class="prow-main">{row.label || t('shell.empty')}</span>
 						<span class="prow-detail">{row.detail}</span>
 						{#if row.active}<Check size={14} class="prow-check" />{/if}
 					</button>
-					{#if i === selIdx && chipEfforts(row).length}
+					{#if i === chipIdx && chipEfforts(row).length}
 						<div class="effrow">
 							<span class="effcap">{t('chat.effortTitle')}</span>
 							{#each chipEfforts(row) as ef (ef)}
@@ -252,6 +280,10 @@
 	.railbtn.miss {
 		opacity: 0.45;
 	}
+	.railbtn:disabled {
+		cursor: default;
+		opacity: 0.5;
+	}
 	.railsep {
 		width: 20px;
 		border-top: 1px solid var(--hairline);

src/lib/session.svelte.ts

@@ -452,7 +452,9 @@ export class SessionStore {
 	async switchProvider(
 		id: string,
 		provider: { id: string; base_url: string; format: string; models: { name: string; reasoning_efforts?: string[] }[] },
-		model: string
+		model: string,
+		/** Explicit effort pick (popover chip); must be one of the model's efforts. */
+		effort?: string
 	) {
 		const s = this.allSessions.find((x) => x.id === id);
 		if (!s) return;
@@ -464,7 +466,8 @@ export class SessionStore {
 			models: provider.models,
 			model
 		};
-		if (efforts.length) patch.reasoning_effort = efforts.includes('medium') ? 'medium' : efforts[0];
+		if (effort && efforts.includes(effort)) patch.reasoning_effort = effort;
+		else if (efforts.length) patch.reasoning_effort = efforts.includes('medium') ? 'medium' : efforts[0];
 		try {
 			await writeConfig(patch);
 		} catch (e) {

src/lib/session.test.ts

@@ -12,7 +12,7 @@ vi.mock('./protocol', () => ({
 }));
 
 import { SessionStore } from './session.svelte';
-import { createSession, sendOp, git } from './protocol';
+import { createSession, sendOp, git, writeConfig } from './protocol';
 import { setLocale } from './i18n';
 import type { Project, WorktreeMeta } from './types';
 
@@ -128,6 +128,38 @@ describe('SessionStore lifecycle', () => {
 		expect(p.sessions.find((s) => s.id === rid)?.backendId).toBe('jucode');
 	});
 
+	it('switchProvider honors a valid effort override and falls back otherwise', async () => {
+		const store = new SessionStore();
+		const p = proj();
+		store.projects.push(p);
+		const id = store.addSession(p);
+		const provider = {
+			id: 'byo',
+			base_url: 'https://api.example.com',
+			format: 'openai',
+			models: [{ name: 'm1', reasoning_efforts: ['low', 'high'] }]
+		};
+		// A chip pick carries an explicit effort — written verbatim when valid.
+		await store.switchProvider(id, provider, 'm1', 'high');
+		expect(writeConfig).toHaveBeenCalledWith(
+			expect.objectContaining({ provider: 'byo', model: 'm1', reasoning_effort: 'high' })
+		);
+		// An unknown effort falls back to the default (no medium → first listed).
+		await store.switchProvider(id, provider, 'm1', 'bogus');
+		expect(writeConfig).toHaveBeenLastCalledWith(
+			expect.objectContaining({ reasoning_effort: 'low' })
+		);
+		// No effort argument keeps the medium-first default.
+		await store.switchProvider(
+			id,
+			{ ...provider, models: [{ name: 'm1', reasoning_efforts: ['low', 'medium', 'high'] }] },
+			'm1'
+		);
+		expect(writeConfig).toHaveBeenLastCalledWith(
+			expect.objectContaining({ reasoning_effort: 'medium' })
+		);
+	});
+
 	it('removeProject tears down its sessions and clears a dangling activeId', () => {
 		const store = new SessionStore();
 		const p = proj();