feat(desktop): model-list cache, spawn loader, effort debounce; slider color polish & noise filtering

- Model picker opens instantly from a cached catalog (ChatState.modelCatalog),
  refreshing via /model in the background — no more click lag.
- New sessions show a spawn loading spinner until the engine's first event
  (ChatState.booting).
- Effort switch is debounced (350ms) and optimistic, so rapid drags don't race
  a burst of /model switches through the engine.
- EffortSlider: non-max/ultra levels are gray; tier colors interpolate smoothly
  via @property-registered <color>s (no more gradient tearing); shimmer is an
  opacity overlay; "X-High" label no longer wraps.
- Filter noise notifications: codex warning/deprecationNotice/configWarning are
  dropped (guardianWarning kept); claude stderr tracing-format log lines dropped.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: gaoyu06

src/lib/backends/claude.test.ts

@@ -1067,5 +1067,8 @@ describe('claude adapter: restarts and robustness', () => {
 			{ type: 'info', message: '[claude] node: warning' }
 		]);
 		expect(adapter.translate({ __stderr: '   ' })).toEqual([]);
+		// Tracing-formatted engine log lines are dropped as noise.
+		expect(adapter.translate({ __stderr: '2026-07-14T10:00:00.000Z DEBUG hitting cache' })).toEqual([]);
+		expect(adapter.translate({ __stderr: '2026-07-14T10:00:00Z ERROR boom' })).toEqual([]);
 	});
 });

src/lib/backends/claude.ts

@@ -873,8 +873,13 @@ export function createClaudeAdapter(): EngineAdapter {
 		},
 		translate(raw: unknown): NormalizedEvent[] {
 			if (isStderrPayload(raw)) {
-				const line = raw.__stderr.trim();
-				return line ? [{ type: 'info', message: `[claude] ${line}` }] : [];
+				// Strip ANSI, drop tracing-formatted log lines (`2026-…Z ERROR …`) —
+				// routine engine noise that would otherwise spam the transcript.
+				// eslint-disable-next-line no-control-regex
+				const line = raw.__stderr.replace(/\[[0-9;]*m/g, '').trim();
+				if (!line) return [];
+				if (/^\d{4}-\d{2}-\d{2}T\S+\s+(ERROR|WARN|INFO|DEBUG|TRACE)\b/.test(line)) return [];
+				return [{ type: 'info', message: `[claude] ${line}` }];
 			}
 			const msg = rec(raw);
 			if (!msg) return [];

src/lib/backends/codex.test.ts

@@ -256,6 +256,16 @@ describe('codex adapter: turns', () => {
 		).toEqual([{ type: 'status', message: 'ready' }]);
 	});
 
+	it('drops dev/config noise notifications but keeps guardian warnings', () => {
+		const adapter = createCodexAdapter();
+		for (const method of ['warning', 'deprecationNotice', 'configWarning']) {
+			expect(adapter.translate({ method, params: { message: 'noise' } })).toEqual([]);
+		}
+		expect(adapter.translate({ method: 'guardianWarning', params: { message: 'unsafe op' } })).toEqual([
+			{ type: 'info', message: '[codex] unsafe op' }
+		]);
+	});
+
 	it('reports cumulative usage as per-update deltas', () => {
 		const { lines } = makeIo();
 		const adapter = createCodexAdapter();

src/lib/backends/codex.ts

@@ -756,9 +756,13 @@ export function createCodexAdapter(): EngineAdapter {
 				return [errorEvent(message, e.error?.codexErrorInfo)];
 			}
 			case 'warning':
-			case 'guardianWarning':
 			case 'deprecationNotice':
-			case 'configWarning': {
+			case 'configWarning':
+				// Internal / config / deprecation chatter — pure noise in the chat
+				// transcript, so we drop it rather than surface a system bubble.
+				return [];
+			case 'guardianWarning': {
+				// Safety-relevant — keep it visible.
 				const message = str(p.message);
 				return message ? [{ type: 'info', message: `[codex] ${message}` }] : [];
 			}

src/lib/chat.svelte.ts

@@ -101,6 +101,14 @@ export class ChatState {
 	effort = $state('');
 	efforts = $state<string[]>([]);
 	engineState = $state('starting');
+	// True from session creation until the engine emits its first event — i.e.
+	// while the claude/codex/jucode child is still booting. Drives the spawn
+	// loading animation in the empty chat area.
+	booting = $state(true);
+	// Last model catalog seen (from a `model_view`), so the picker popover can open
+	// instantly from cache while a fresh `/model` round-trip refreshes it.
+	modelCatalog = $state<ModelOption[]>([]);
+	modelCatalogEffort = $state('');
 	contextTokens = $state(0);
 	contextWindow = $state(0);
 	contextLimit = $state(0);
@@ -277,6 +285,8 @@ export class ChatState {
 	}
 
 	handle(ev: AgentEvent) {
+		// The engine has spoken — the child is up, so the boot animation ends.
+		this.booting = false;
 		switch (ev.type) {
 			case 'startup':
 				this.model = str(ev.model);
@@ -434,6 +444,8 @@ export class ChatState {
 				this.picker = { kind: 'tree', nodes: arr<TreeNode>(ev.nodes) };
 				break;
 			case 'model_view':
+				this.modelCatalog = arr<ModelOption>(ev.models);
+				this.modelCatalogEffort = str(ev.active_effort);
 				this.picker = {
 					kind: 'model',
 					models: arr<ModelOption>(ev.models),

src/lib/chat.test.ts

@@ -128,6 +128,20 @@ describe('ChatState.handle', () => {
 		expect(c.mcpServers).toEqual([]);
 	});
 
+	it('clears booting on the first engine event and caches the model catalog', () => {
+		const c = new ChatState();
+		expect(c.booting).toBe(true);
+		c.handle({ type: 'model_status', state: 'idle' });
+		expect(c.booting).toBe(false);
+		c.handle({
+			type: 'model_view',
+			models: [{ model: 'opus', active: true, reasoning_efforts: ['high', 'max'] }],
+			active_effort: 'high'
+		});
+		expect(c.modelCatalog).toEqual([{ model: 'opus', active: true, reasoning_efforts: ['high', 'max'] }]);
+		expect(c.modelCatalogEffort).toBe('high');
+	});
+
 	it('tracks busy state from engine status', () => {
 		const c = new ChatState();
 		c.handle({ type: 'model_status', state: 'streaming' });

src/lib/i18n/messages/shell.ts

@@ -49,6 +49,7 @@ const shell = {
 
 		// engine
 		engineDown: '引擎已停止运行',
+		spawning: '正在启动引擎…',
 		restartEngine: '重启引擎',
 
 		// approval
@@ -238,6 +239,7 @@ const shell = {
 
 		// engine
 		engineDown: 'Engine has stopped',
+		spawning: 'Starting engine…',
 		restartEngine: 'Restart engine',
 
 		// approval

src/lib/ui/EffortSlider.svelte

@@ -107,7 +107,9 @@
 		onkeydown={onKey}
 	>
 		<div class="es-inner" bind:this={inner}>
-			<div class="es-fill" class:flowing={tier !== ''} style="width: calc({pct}% + 22px)"></div>
+			<div class="es-fill" style="width: calc({pct}% + 22px)">
+				<div class="es-flow" class:on={tier !== ''}></div>
+			</div>
 			{#each options as opt, i (opt)}
 				<span
 					class="es-dot"
@@ -123,17 +125,39 @@
 </div>
 
 <style>
+	/* Register the palette slots as animatable <color>s so swapping tiers morphs
+	   the gradient smoothly instead of hard-cutting (the old `transition: background`
+	   couldn't interpolate a gradient and tore on every change). */
+	@property --eff-a {
+		syntax: '<color>';
+		inherits: true;
+		initial-value: #808791;
+	}
+	@property --eff-b {
+		syntax: '<color>';
+		inherits: true;
+		initial-value: #6b7280;
+	}
+	@property --eff-solid {
+		syntax: '<color>';
+		inherits: true;
+		initial-value: #6b7280;
+	}
 	.es {
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
 		padding: 6px 6px 10px;
 		min-width: 248px;
 		user-select: none;
-		/* Tier palette — default accent; overridden per data-tier below. */
-		--eff-a: color-mix(in oklab, var(--accent) 82%, #fff);
-		--eff-b: var(--accent);
-		--eff-solid: var(--accent);
+		/* Default (every level except the special top tiers): plain gray. */
+		--eff-a: color-mix(in oklab, var(--dim) 78%, var(--text));
+		--eff-b: var(--dim);
+		--eff-solid: var(--dim);
+		transition:
+			--eff-a 0.42s ease,
+			--eff-b 0.42s ease,
+			--eff-solid 0.42s ease;
 	}
 	.es[data-tier='max'] {
 		--eff-a: #ffb24d;
@@ -153,6 +177,7 @@
 	}
 	.es-head .edge {
 		color: var(--dim2);
+		white-space: nowrap;
 		transition: color 0.18s ease;
 	}
 	.es-head .edge:last-child {
@@ -168,6 +193,7 @@
 		color: var(--eff-solid);
 		text-align: center;
 		padding: 0 10px;
+		white-space: nowrap;
 		transition: color 0.35s ease;
 	}
 	/* Thick capsule track. */
@@ -195,40 +221,41 @@
 		top: 0;
 		bottom: 0;
 		border-radius: 999px;
+		overflow: hidden;
+		/* Colors are the registered --eff-* props, so this gradient morphs via the
+		   transition on .es — only width snaps here. No gradient in `transition`. */
 		background: linear-gradient(90deg, var(--eff-a), var(--eff-b));
-		/* Animate width (snap between levels) and the color transition (tier swap). */
-		transition:
-			width 0.16s ease,
-			background 0.4s ease;
+		transition: width 0.16s ease;
 	}
-	/* Flowing shimmer for the special tiers: a moving highlight band scrolls
-	   across the fill. */
-	.es-fill.flowing {
-		background:
-			linear-gradient(
-				100deg,
-				transparent 20%,
-				color-mix(in oklab, #fff 45%, transparent) 42%,
-				color-mix(in oklab, #fff 45%, transparent) 50%,
-				transparent 72%
-			),
-			linear-gradient(90deg, var(--eff-a), var(--eff-b));
-		background-size:
-			220% 100%,
-			100% 100%;
+	/* Flowing shimmer for the special tiers: a separate highlight layer that fades
+	   in (opacity) so entering a tier never swaps the fill's background structure. */
+	.es-flow {
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		opacity: 0;
+		background: linear-gradient(
+			100deg,
+			transparent 20%,
+			color-mix(in oklab, #fff 45%, transparent) 42%,
+			color-mix(in oklab, #fff 45%, transparent) 50%,
+			transparent 72%
+		);
+		background-size: 220% 100%;
 		background-repeat: no-repeat;
 		animation: eff-flow 1.6s linear infinite;
+		transition: opacity 0.42s ease;
+		pointer-events: none;
+	}
+	.es-flow.on {
+		opacity: 1;
 	}
 	@keyframes eff-flow {
 		from {
-			background-position:
-				160% 0,
-				0 0;
+			background-position: 160% 0;
 		}
 		to {
-			background-position:
-				-120% 0,
-				0 0;
+			background-position: -120% 0;
 		}
 	}
 	.es-dot {

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import { onMount, tick, untrack } from 'svelte';
 	import { listen } from '@tauri-apps/api/event';
 	import { getCurrentWebview } from '@tauri-apps/api/webview';
-	import { X, Check, PanelRight, ChevronDown, ChevronUp, Search } from 'lucide-svelte';
+	import { X, Check, PanelRight, ChevronDown, ChevronUp, Search, LoaderCircle } from 'lucide-svelte';
 	import { open, ask, message } from '@tauri-apps/plugin-dialog';
 	import { cycleTheme } from '$lib/theme.svelte';
 	import {
@@ -361,8 +361,35 @@
 		return true;
 	}
 
+	// Effort switch is debounced: reflect the pick immediately on the slider
+	// (optimistic chat.effort) so the handle stays put, but only send the actual
+	// `/model` command once the user settles — rapid drags/clicks don't race a
+	// half-dozen switches through the engine.
+	let effortTimer: ReturnType<typeof setTimeout> | undefined;
 	function chooseEffort(ef: string) {
-		if (chat) send({ op: 'command', input: `/model ${chat.model} ${ef}` });
+		if (!chat) return;
+		chat.effort = ef;
+		const model = chat.model;
+		clearTimeout(effortTimer);
+		effortTimer = setTimeout(() => {
+			if (chat) send({ op: 'command', input: `/model ${model} ${ef}` });
+		}, 350);
+	}
+
+	// Open the model picker as a popover. If we already have a cached catalog,
+	// show it instantly and refresh in the background; otherwise fetch first.
+	function openModelPicker() {
+		if (!chat) return;
+		if (chat.modelCatalog.length) {
+			chat.picker = {
+				kind: 'model',
+				models: chat.modelCatalog,
+				activeEffort: chat.modelCatalogEffort || chat.effort
+			};
+			const act = chat.modelCatalog.findIndex((m) => m.active);
+			selIdx = act >= 0 ? act : 0;
+		}
+		nav('/model');
 	}
 
 	// The assistant message that's still streaming: render it as plain text and
@@ -1119,7 +1146,12 @@
 				<div bind:this={contentEl}>
 					<MessageList messages={chat.messages} {streamingMsg} {streamingReasoning} phase={chat.phase} compactionTokens={chat.compactionTokens} {findActive} {scroller} onEdit={editMessage} onRewind={rewindToMessage} />
 				</div>
-				{#if chat.messages.length === 0 && !chat.busy}
+				{#if chat.booting && chat.engineState !== 'exited'}
+					<div class="welcome spawning">
+						<span class="spawn-spin"><LoaderCircle size={26} /></span>
+						<p class="welcome-tip">{t('shell.spawning')}</p>
+					</div>
+				{:else if chat.messages.length === 0 && !chat.busy}
 					<div class="welcome">
 						<span class="welcome-mark">JuCode</span>
 						<p class="welcome-tip">{t('shell.welcomeTip')}</p>
@@ -1167,7 +1199,7 @@
 				onPick={pickFiles}
 				onScreenshot={screenshot}
 				onRecord={toggleRecord}
-				onModel={() => nav('/model')}
+				onModel={openModelPicker}
 				onModelSelect={selectRow}
 				onModelEffort={setEffort}
 				onModelClose={() => chat?.closePicker()}
@@ -1476,6 +1508,16 @@
 		text-align: center;
 		animation: rise 0.3s ease both;
 	}
+	.spawn-spin {
+		display: inline-flex;
+		color: var(--accent);
+		animation: spawn-spin 0.8s linear infinite;
+	}
+	@keyframes spawn-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
 	.welcome-mark {
 		font-family: var(--font-display);
 		font-weight: 800;