@myrialabs/clopen 0.2.2 → 0.2.4

package/frontend/components/history/HistoryView.svelte

@@ -6,7 +6,6 @@
 	import { setCurrentView } from '$frontend/stores/core/app.svelte';
 	import ws from '$frontend/utils/ws';
 	import type { ChatSession, Project } from '$shared/types/database/schema';
-	import type { SDKMessage } from '$shared/types/messaging';
 	import Input from '../common/form/Input.svelte';
 	import Select from '../common/form/Select.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
@@ -62,7 +61,6 @@
 	
 	// Cache for session data to avoid multiple API calls
 	const sessionDataCache = $state<Record<string, {
-		messages: SDKMessage[];
 		title: string;
 		summary: string;
 		count: number;
@@ -71,95 +69,30 @@
 	}>>({});
 	let loadingSessionData = $state(true);
 
-	// Helper to get session data from cache or API
+	// Helper to get session data from cache or API (single session fallback)
 	async function getSessionData(sessionId: string) {
 		if (sessionDataCache[sessionId]) {
 			return sessionDataCache[sessionId];
 		}
 
 		try {
-			// Get messages from current HEAD checkpoint (active branch only)
-			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
-
-			// Get title from first user message in current HEAD
-			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');
-			let title = 'New Conversation';
-			if (firstUserMessage) {
-				// Handle content properly - it can be string or array of content blocks
-				let textContent = '';
-				if (typeof firstUserMessage.message.content === 'string') {
-					textContent = firstUserMessage.message.content;
-				} else if (Array.isArray(firstUserMessage.message.content)) {
-					// Extract text from content blocks
-					const textBlocks = firstUserMessage.message.content.filter((c: any) => c.type === 'text');
-					textContent = textBlocks.map((b: any) => 'text' in b ? b.text : '').join(' ');
-				}
-
-				if (textContent) {
-					title = textContent.slice(0, 60) + (textContent.length > 60 ? '...' : '');
-				}
-			}
-
-			// Get summary from last assistant message in current HEAD checkpoint
-			const assistantMessages = messages.filter((m: SDKMessage) => m.type === 'assistant');
-			let summary = 'No messages yet';
-			if (assistantMessages.length > 0) {
-				const lastMessage = assistantMessages[assistantMessages.length - 1];
-				const textBlocks = lastMessage.message.content.filter((c: any) => c.type === 'text');
-				if (textBlocks.length > 0) {
-					const fullText = textBlocks.map((b: any) => 'text' in b ? b.text : '').join(' ');
-					const cleanText = fullText.replace(/```[\s\S]*?```/g, '').trim();
-					summary = cleanText.slice(0, 150) + (cleanText.length > 150 ? '...' : '');
-				}
+			const previews = await ws.http('sessions:preview', { session_ids: [sessionId] });
+			const preview = previews[0];
+			if (preview) {
+				sessionDataCache[sessionId] = {
+					title: preview.title,
+					summary: preview.summary,
+					count: preview.count,
+					userCount: preview.userCount,
+					assistantCount: preview.assistantCount
+				};
+				return sessionDataCache[sessionId];
 			}
-
-			// Count user and assistant messages in current HEAD checkpoint
-			// Filter out empty user messages (same as ChatInterface.svelte timeline logic)
-			const userMessages = messages.filter((m: SDKMessage) => {
-				if (m.type !== 'user') return false;
-				// Extract text content
-				let textContent = '';
-				if (typeof m.message.content === 'string') {
-					textContent = m.message.content;
-				} else if (Array.isArray(m.message.content)) {
-					const textBlocks = m.message.content.filter(c => c.type === 'text');
-					textContent = textBlocks.map(b => 'text' in b ? b.text : '').join(' ');
-				}
-				return textContent.trim().length > 0;
-			});
-
-			const totalBubbles = userMessages.length + assistantMessages.length; // Total message bubbles in chat
-
-			const data = {
-				messages,
-				title,
-				summary,
-				count: totalBubbles, // Total bubbles (user + assistant with non-empty content)
-				userCount: userMessages.length, // Number of chat sessions/exchanges (non-empty user messages)
-				assistantCount: assistantMessages.length
-			};
-
-			sessionDataCache[sessionId] = data;
-			debug.log('session', `Loaded session ${sessionId}:`, {
-				title,
-				totalMessages: messages.length,
-				userCount: userMessages.length,
-				assistantCount: assistantMessages.length,
-				totalBubbles: totalBubbles,
-				summary: summary.substring(0, 50)
-			});
-			return data;
 		} catch (error) {
 			debug.error('session', 'Error fetching session data:', error);
-			return {
-				messages: [],
-				title: 'New Conversation',
-				summary: 'No messages yet',
-				count: 0,
-				userCount: 0,
-				assistantCount: 0
-			};
 		}
+
+		return { title: 'New Conversation', summary: 'No messages yet', count: 0, userCount: 0, assistantCount: 0 };
 	}
 
 	// Helper functions that use cached data
@@ -179,14 +112,23 @@
 		return sessionDataCache[sessionId]?.summary || 'No messages yet';
 	}
 
-	// Preload session data for visible sessions
+	// Preload session data for visible sessions using a single bulk request
 	async function preloadSessionData() {
 		loadingSessionData = true;
 		try {
-			// Load all sessions in parallel for better performance
-			await Promise.all(
-				sessions.slice(0, 20).map(session => getSessionData(session.id))
-			);
+			const sessionIds = sessions.slice(0, 20).map(s => s.id);
+			if (sessionIds.length === 0) return;
+
+			const previews = await ws.http('sessions:preview', { session_ids: sessionIds });
+			for (const preview of previews) {
+				sessionDataCache[preview.session_id] = {
+					title: preview.title,
+					summary: preview.summary,
+					count: preview.count,
+					userCount: preview.userCount,
+					assistantCount: preview.assistantCount
+				};
+			}
 		} catch (error) {
 			debug.error('session', 'Error preloading session data:', error);
 		} finally {
@@ -199,14 +141,25 @@
 		preloadSessionData();
 	});
 
-	// Reload session data when sessions change
+	// Reload session data when new sessions arrive
 	$effect(() => {
 		if (sessions.length > 0 && !loadingSessionData) {
-			// Check if there are sessions without cached data
-			const uncachedSessions = sessions.filter(s => !sessionDataCache[s.id]);
-			if (uncachedSessions.length > 0) {
-				debug.log('session', `Found ${uncachedSessions.length} uncached sessions, loading...`);
-				preloadSessionData();
+			const uncachedIds = sessions.filter(s => !sessionDataCache[s.id]).map(s => s.id);
+			if (uncachedIds.length > 0) {
+				debug.log('session', `Found ${uncachedIds.length} uncached sessions, loading...`);
+				ws.http('sessions:preview', { session_ids: uncachedIds }).then((previews: any[]) => {
+					for (const preview of previews) {
+						sessionDataCache[preview.session_id] = {
+							title: preview.title,
+							summary: preview.summary,
+							count: preview.count,
+							userCount: preview.userCount,
+							assistantCount: preview.assistantCount
+						};
+					}
+				}).catch((err: unknown) => {
+					debug.error('session', 'Error loading uncached sessions:', err);
+				});
 			}
 		}
 	});

package/frontend/components/settings/SettingsModal.svelte

@@ -219,7 +219,7 @@
 				<!-- Content Area -->
 				<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
 					<div class="flex-1 overflow-y-auto p-4 md:p-5">
-						{#if activeSection === 'model'}
+						{#if activeSection === 'models'}
 							<div in:fly={{ x: 20, duration: 200 }}>
 								<ModelSettings />
 							</div>

package/frontend/components/settings/SettingsView.svelte

@@ -23,7 +23,7 @@
 	<div class="flex-1 overflow-auto">
 		<div class="space-y-6">
 
-			<!-- Model Configuration -->
+			<!-- AI Model (Assistant + Commit Message) -->
 			<ModelSettings />
 
 			<!-- Appearance Configuration -->

package/frontend/components/settings/appearance/AppearanceSettings.svelte

@@ -3,8 +3,8 @@
 	import { settings, updateSettings, applyFontSize } from '$frontend/stores/features/settings.svelte';
 	import Icon from '../../common/display/Icon.svelte';
 
-	const FONT_SIZE_MIN = 10;
-	const FONT_SIZE_MAX = 20;
+	const FONT_SIZE_MIN = 8;
+	const FONT_SIZE_MAX = 24;
 
 	function handleFontSizeChange(e: Event) {
 		const value = Number((e.target as HTMLInputElement).value);

package/frontend/components/settings/engines/AIEnginesSettings.svelte

@@ -383,9 +383,9 @@
 
 <div class="space-y-6">
 	<!-- Header -->
-	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">AI Engine</h3>
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Engines</h3>
 	<p class="text-sm text-slate-600 dark:text-slate-500 mb-4">
-		Manage AI engine installations and accounts
+		Manage engine installations and accounts
 	</p>
 
 	<!-- Claude Code Card -->

package/frontend/components/settings/general/UpdateSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
-	import { updateState, checkForUpdate, runUpdate } from '$frontend/stores/ui/update.svelte';
+	import { updateState, checkForUpdate, runUpdate, showRestartModal } from '$frontend/stores/ui/update.svelte';
 	import Icon from '../../common/display/Icon.svelte';
 
 	function toggleAutoUpdate() {
@@ -88,10 +88,17 @@
 				</div>
 			{/if}
 
-			{#if updateState.updateSuccess}
+			{#if updateState.updateSuccess || updateState.pendingRestart}
 				<div class="mt-3 flex items-center gap-2 px-3 py-2 bg-emerald-500/10 border border-emerald-500/20 rounded-lg">
 					<Icon name="lucide:circle-check" class="w-4 h-4 text-emerald-500 shrink-0" />
-					<span class="text-xs text-emerald-600 dark:text-emerald-400">Updated successfully — restart clopen to apply</span>
+					<span class="text-xs text-emerald-600 dark:text-emerald-400">Updated to v{updateState.latestVersion} — restart required</span>
+					<button
+						type="button"
+						onclick={() => showRestartModal()}
+						class="text-xs font-semibold text-emerald-600 dark:text-emerald-400 underline underline-offset-2 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors"
+					>
+						How to restart
+					</button>
 				</div>
 			{/if}
 		</div>

package/frontend/components/settings/git/GitSettings.svelte

@@ -0,0 +1,392 @@
+<script lang="ts">
+	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { settings, updateSettings } from '$frontend/stores/features/settings.svelte';
+	import { modelStore } from '$frontend/stores/features/models.svelte';
+	import { ENGINES } from '$shared/constants/engines';
+	import type { EngineType } from '$shared/types/engine';
+	import type { EngineModel } from '$shared/types/engine';
+	import type { CommitMessageFormat } from '$shared/types/git';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	const formatOptions: { id: CommitMessageFormat; label: string; desc: string; icon: IconName }[] = [
+		{ id: 'single-line', label: 'Single Line', desc: 'type(scope): subject', icon: 'lucide:minus' },
+		{ id: 'multi-line', label: 'Multi Line', desc: 'Subject + body', icon: 'lucide:align-left' }
+	];
+
+	let searchQuery = $state('');
+	let refreshing = $state(false);
+	let collapsedProviders = $state<Set<string>>(new Set());
+
+	const commitGen = $derived(settings.commitGenerator);
+	const useCustomModel = $derived(commitGen.useCustomModel);
+
+	// Resolve which model is being used for display
+	const activeEngine = $derived(useCustomModel ? commitGen.engine : settings.selectedEngine);
+	const activeModel = $derived(useCustomModel ? commitGen.model : settings.selectedModel);
+	const activeEngineMeta = $derived(ENGINES.find(e => e.type === activeEngine));
+	const activeModelMeta = $derived(modelStore.getById(activeModel));
+
+	// Models for the custom engine, filtered by search
+	const filteredModels = $derived.by(() => {
+		const models = modelStore.getByEngine(commitGen.engine);
+		if (!searchQuery.trim()) return models;
+		const q = searchQuery.toLowerCase();
+		return models.filter(m =>
+			m.name.toLowerCase().includes(q) ||
+			m.modelId.toLowerCase().includes(q) ||
+			m.provider.toLowerCase().includes(q) ||
+			m.capabilities.some(c => c.toLowerCase().includes(q))
+		);
+	});
+
+	// Group models by provider
+	const groupedModels = $derived.by(() => {
+		const groups = new Map<string, EngineModel[]>();
+		for (const model of filteredModels) {
+			const key = model.provider;
+			if (!groups.has(key)) groups.set(key, []);
+			groups.get(key)!.push(model);
+		}
+		return groups;
+	});
+
+	// Fetch models when custom engine changes (for opencode)
+	$effect(() => {
+		if (useCustomModel && commitGen.engine !== 'claude-code') {
+			modelStore.fetchModels(commitGen.engine);
+		}
+	});
+
+	// Sync accordion state when search or models change
+	$effect(() => {
+		if (!useCustomModel) return;
+		if (searchQuery.trim()) {
+			collapsedProviders = new Set();
+		} else if (groupedModels.size > 0) {
+			syncAccordionState();
+		}
+	});
+
+	function syncAccordionState() {
+		const allProviders = [...groupedModels.keys()];
+		let selectedProvider: string | null = null;
+		for (const [provider, models] of groupedModels) {
+			if (models.some(m => m.id === commitGen.model)) {
+				selectedProvider = provider;
+				break;
+			}
+		}
+		const collapsed = new Set(allProviders);
+		if (selectedProvider) collapsed.delete(selectedProvider);
+		collapsedProviders = collapsed;
+	}
+
+	function toggleProvider(provider: string) {
+		const next = new Set(collapsedProviders);
+		if (next.has(provider)) next.delete(provider);
+		else next.add(provider);
+		collapsedProviders = next;
+	}
+
+	function formatProvider(provider: string): string {
+		return provider.split(/[-_]/).map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+	}
+
+	function toggleCustomModel() {
+		updateSettings({
+			commitGenerator: { ...commitGen, useCustomModel: !useCustomModel }
+		});
+	}
+
+	async function selectEngine(engineType: EngineType) {
+		const models = modelStore.getByEngine(engineType);
+		const defaultModel = engineType === 'claude-code'
+			? 'claude-code:haiku'
+			: (models[0]?.id || '');
+		updateSettings({
+			commitGenerator: {
+				...commitGen,
+				engine: engineType,
+				model: defaultModel
+			}
+		});
+		searchQuery = '';
+
+		if (engineType !== 'claude-code') {
+			const fetched = await modelStore.fetchModels(engineType);
+			if (fetched.length > 0) {
+				updateSettings({
+					commitGenerator: { ...settings.commitGenerator, model: fetched[0].id }
+				});
+			}
+		}
+
+		syncAccordionState();
+	}
+
+	function selectModel(modelId: string) {
+		updateSettings({
+			commitGenerator: { ...commitGen, model: modelId }
+		});
+	}
+
+	function selectFormat(format: CommitMessageFormat) {
+		updateSettings({
+			commitGenerator: { ...commitGen, format }
+		});
+	}
+
+	async function handleRefresh() {
+		refreshing = true;
+		try {
+			await modelStore.refreshModels(commitGen.engine);
+		} finally {
+			refreshing = false;
+		}
+	}
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">Commit Message</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-4">
+		Generate conventional commit messages from staged changes using AI
+	</p>
+
+	<!-- Current Model Info -->
+	<div class="mb-5">
+		<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Model</label>
+		<div class="flex items-center gap-3 px-3.5 py-2.5 border border-slate-200 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-800/50">
+			{#if activeEngineMeta}
+				<div class="flex-shrink-0">
+					<div class="flex dark:hidden items-center justify-center w-4 h-4">{@html activeEngineMeta.icon.light}</div>
+					<div class="hidden dark:flex items-center justify-center w-4 h-4">{@html activeEngineMeta.icon.dark}</div>
+				</div>
+			{/if}
+			<div class="flex-1 min-w-0">
+				<span class="text-sm font-medium text-slate-900 dark:text-slate-100">
+					{activeModelMeta?.name || activeModel}
+				</span>
+				{#if !useCustomModel}
+					<span class="text-xs text-slate-500 dark:text-slate-400 ml-1.5">(same as assistant)</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<!-- Custom Model Toggle -->
+	<div class="mb-5">
+		<button
+			type="button"
+			class="flex items-center gap-3 w-full text-left"
+			onclick={toggleCustomModel}
+		>
+			<div class="relative w-9 h-5 rounded-full transition-colors duration-200 flex-shrink-0
+				{useCustomModel ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-600'}">
+				<div class="absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200
+					{useCustomModel ? 'translate-x-4.5' : 'translate-x-0.5'}"></div>
+			</div>
+			<div>
+				<span class="text-sm font-medium text-slate-900 dark:text-slate-100">Use custom model</span>
+				<p class="text-xs text-slate-500 dark:text-slate-400">Use a different engine and model instead of the assistant model</p>
+			</div>
+		</button>
+	</div>
+
+	<!-- Custom Engine & Model Selection (only when toggled on) -->
+	{#if useCustomModel}
+		<!-- Engine Selection -->
+		<div class="mb-6">
+			<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Engine</label>
+			<div class="flex gap-3">
+				{#each ENGINES as engine (engine.type)}
+					{@const isActive = commitGen.engine === engine.type}
+					<button
+						type="button"
+						class="flex-1 flex items-center gap-3 p-3.5 overflow-hidden border-2 rounded-xl text-left cursor-pointer transition-all duration-200
+							{isActive
+							? 'border-violet-600 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/12 dark:to-purple-500/8'
+							: 'border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/80 hover:border-violet-500/20 dark:hover:border-violet-500/35'}"
+						onclick={() => selectEngine(engine.type)}
+					>
+						<div>
+							<div class="flex dark:hidden items-center justify-center w-5 h-5">{@html engine.icon.light}</div>
+							<div class="hidden dark:flex items-center justify-center w-5 h-5">{@html engine.icon.dark}</div>
+						</div>
+						<div>
+							<div class="font-bold text-sm text-slate-900 dark:text-slate-100">{engine.name}</div>
+							<div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{engine.description}</div>
+						</div>
+						{#if isActive}
+							<div class="flex items-center justify-center w-5 h-5 bg-gradient-to-br from-violet-600 to-purple-600 rounded-full text-white ml-auto flex-shrink-0">
+								<svg viewBox="0 0 24 24" fill="none" class="w-3 h-3" aria-hidden="true">
+									<path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+								</svg>
+							</div>
+						{/if}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Model Selection -->
+		<div class="mb-6">
+			<div class="flex items-center justify-between mb-1.5">
+				<label class="text-sm font-semibold text-slate-700 dark:text-slate-300">Model</label>
+				<button
+					type="button"
+					class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg transition-colors cursor-pointer
+						text-slate-500 hover:text-violet-600 hover:bg-violet-500/10 dark:hover:text-violet-400 dark:hover:bg-violet-500/15
+						disabled:opacity-50 disabled:cursor-not-allowed"
+					onclick={handleRefresh}
+					disabled={refreshing || modelStore.loading}
+				>
+					<svg viewBox="0 0 24 24" fill="none" class="w-3.5 h-3.5 {refreshing ? 'animate-spin' : ''}" aria-hidden="true">
+						<path d="M21 12a9 9 0 11-2.636-6.364M21 3v5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+					{refreshing ? 'Refreshing...' : 'Refresh'}
+				</button>
+			</div>
+			<p class="text-sm text-slate-600 dark:text-slate-500 mb-3">
+				Select the model for the {ENGINES.find(e => e.type === commitGen.engine)?.name || 'selected'} engine
+			</p>
+
+			<!-- Search -->
+			<div class="relative mb-3">
+				<svg viewBox="0 0 24 24" fill="none" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" aria-hidden="true">
+					<circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" />
+					<path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+				</svg>
+				<input
+					type="text"
+					bind:value={searchQuery}
+					placeholder="Search models..."
+					class="w-full pl-9 pr-3 py-2 text-sm bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-600 transition-colors text-slate-900 dark:text-slate-100 placeholder-slate-400"
+				/>
+			</div>
+
+			<!-- Model List -->
+			<div class="flex flex-col gap-1.5">
+				{#if modelStore.loading && commitGen.engine !== 'claude-code' && !refreshing}
+					<!-- Loading skeleton -->
+					<div class="border border-slate-200/80 dark:border-slate-700/50 rounded-lg overflow-hidden">
+						<div class="bg-white/80 dark:bg-slate-800/40 px-3 py-3 flex items-center gap-3">
+							<div class="w-4 h-4 rounded-full bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
+							<div class="h-3.5 w-32 rounded bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
+						</div>
+						<div class="px-4 py-2.5 space-y-2.5">
+							{#each Array(3) as _}
+								<div class="flex items-center gap-3 py-2">
+									<div class="w-4 h-4 rounded-full bg-slate-200/80 dark:bg-slate-700/60 animate-pulse"></div>
+									<div class="flex-1 space-y-1.5">
+										<div class="h-3.5 w-40 rounded bg-slate-200/80 dark:bg-slate-700/60 animate-pulse"></div>
+										<div class="flex gap-1.5">
+											<div class="h-3 w-14 rounded bg-slate-200/60 dark:bg-slate-700/40 animate-pulse"></div>
+											<div class="h-3 w-12 rounded bg-slate-200/60 dark:bg-slate-700/40 animate-pulse"></div>
+										</div>
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{:else if filteredModels.length === 0}
+					<div class="py-4 text-sm text-slate-500 text-center">
+						{searchQuery ? 'No models matching your search.' : 'No models available for this engine.'}
+					</div>
+				{:else}
+					{#each [...groupedModels.entries()] as [provider, providerModels] (provider)}
+						{@const isCollapsed = collapsedProviders.has(provider)}
+						{@const hasSelectedModel = providerModels.some(m => m.id === commitGen.model)}
+						<div class="border border-slate-200/80 dark:border-slate-700/50 rounded-lg overflow-hidden">
+							<!-- Accordion header -->
+							<button
+								type="button"
+								class="flex items-center gap-2.5 w-full px-3 py-2.5 text-left cursor-pointer transition-colors
+									bg-white/80 dark:bg-slate-800/40 hover:bg-white dark:hover:bg-slate-800/60"
+								onclick={() => toggleProvider(provider)}
+							>
+								<svg viewBox="0 0 24 24" fill="none"
+									class="w-4 h-4 text-slate-400 transition-transform duration-200 flex-shrink-0
+										{isCollapsed ? '' : 'rotate-90'}"
+									aria-hidden="true">
+									<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+								</svg>
+								<span class="text-sm font-semibold text-slate-800 dark:text-slate-200">
+									{formatProvider(provider)}
+								</span>
+								<span class="text-xs text-slate-400 dark:text-slate-500">
+									{providerModels.length} {providerModels.length === 1 ? 'model' : 'models'}
+								</span>
+								{#if hasSelectedModel}
+									<div class="w-1.5 h-1.5 rounded-full bg-violet-500 ml-auto flex-shrink-0"></div>
+								{/if}
+							</button>
+
+							<!-- Accordion body -->
+							{#if !isCollapsed}
+								<div class="flex flex-col bg-white/40 dark:bg-slate-800/20">
+									{#each providerModels as model (model.id)}
+										{@const isSelected = commitGen.model === model.id}
+										{@const caps = model.capabilities}
+										<button
+											type="button"
+											class="flex items-start gap-3 px-3 py-2.5 text-left cursor-pointer transition-all duration-150
+												{isSelected
+												? 'bg-violet-500/10 dark:bg-violet-500/12'
+												: 'hover:bg-slate-100/80 dark:hover:bg-slate-700/30'}"
+											onclick={() => selectModel(model.id)}
+										>
+											<div class="flex-shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center mt-0.5
+												{isSelected ? 'border-violet-600' : 'border-slate-300 dark:border-slate-600'}">
+												{#if isSelected}
+													<div class="w-2 h-2 rounded-full bg-violet-600"></div>
+												{/if}
+											</div>
+											<div class="flex-1 min-w-0">
+												<div class="flex items-center gap-2">
+													<span class="text-sm font-medium text-slate-900 dark:text-slate-100">{model.name}</span>
+												</div>
+												{#if caps.length > 0}
+													<div class="flex flex-wrap gap-1 mt-1.5">
+														{#each caps as cap}
+															<span class="px-1.5 py-0.5 text-2xs rounded bg-slate-100 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 leading-none">
+																{cap}
+															</span>
+														{/each}
+													</div>
+												{/if}
+											</div>
+										</button>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Format Selection -->
+	<div class="mb-2">
+		<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Message Format</label>
+		<div class="flex gap-2">
+			{#each formatOptions as fmt (fmt.id)}
+				{@const isActive = commitGen.format === fmt.id}
+				<button
+					type="button"
+					class="flex-1 flex items-center gap-2.5 p-3 border-2 rounded-xl text-left cursor-pointer transition-all duration-200
+						{isActive
+						? 'border-violet-600 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/12 dark:to-purple-500/8'
+						: 'border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/80 hover:border-violet-500/20 dark:hover:border-violet-500/35'}"
+					onclick={() => selectFormat(fmt.id)}
+				>
+					<Icon name={fmt.icon} class="w-4 h-4 {isActive ? 'text-violet-600' : 'text-slate-400'}" />
+					<div>
+						<div class="text-sm font-medium text-slate-900 dark:text-slate-100">{fmt.label}</div>
+						<div class="text-xs text-slate-500 dark:text-slate-400 font-mono">{fmt.desc}</div>
+					</div>
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>