@myrialabs/clopen 0.2.2 → 0.2.4

package/frontend/components/common/feedback/UpdateBanner.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-	import { updateState, runUpdate, dismissUpdate, checkForUpdate } from '$frontend/stores/ui/update.svelte';
+	import { updateState, runUpdate, dismissUpdate, checkForUpdate, showRestartModal } from '$frontend/stores/ui/update.svelte';
 	import { systemSettings, updateSystemSettings } from '$frontend/stores/features/settings.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { slide } from 'svelte/transition';
 
 	const showBanner = $derived(
-		!updateState.dismissed && (
+		updateState.pendingRestart ||
+		(!updateState.dismissed && (
 			updateState.updateAvailable ||
 			updateState.updating ||
 			updateState.updateSuccess ||
 			updateState.error
-		)
+		))
 	);
 
 	function handleUpdate() {
@@ -28,13 +29,17 @@
 	function handleRetry() {
 		checkForUpdate();
 	}
+
+	function handleShowRestart() {
+		showRestartModal();
+	}
 </script>
 
 {#if showBanner}
 	<div
 		transition:slide={{ duration: 300 }}
 		class="flex items-center justify-center gap-2 px-4 py-1.5 text-sm font-medium
-			{updateState.updateSuccess
+			{updateState.updateSuccess || updateState.pendingRestart
 				? 'bg-emerald-600 text-white'
 				: updateState.error
 					? 'bg-red-600 text-white'
@@ -44,17 +49,23 @@
 		role="status"
 		aria-live="polite"
 	>
-		{#if updateState.updateSuccess}
+		{#if updateState.updateSuccess || updateState.pendingRestart}
 			<Icon name="lucide:package-check" class="w-4 h-4" />
-			<span>Updated to v{updateState.latestVersion} — restart clopen to apply</span>
+			<span>Updated to v{updateState.latestVersion} — restart required</span>
+			<button
+				onclick={handleShowRestart}
+				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
+			>
+				How to restart
+			</button>
 		{:else if updateState.error}
 			<Icon name="lucide:package-x" class="w-4 h-4" />
-			<span>Update failed</span>
+			<span>{updateState.errorType === 'check' ? 'Unable to check for updates' : 'Update failed'}</span>
 			<button
 				onclick={handleRetry}
 				class="ml-1 px-2 py-0.5 text-xs font-semibold rounded bg-white/20 hover:bg-white/30 transition-colors"
 			>
-				Retry
+				{updateState.errorType === 'check' ? 'Check again' : 'Retry'}
 			</button>
 			<button
 				onclick={handleDismiss}

package/frontend/components/git/BranchManager.svelte

@@ -35,7 +35,6 @@
 	let showAddRemoteForm = $state(false);
 	let newRemoteName = $state('origin');
 	let newRemoteUrl = $state('');
-	let showRemoteSection = $state(false);
 
 	// Confirm dialog
 	let showConfirmDialog = $state(false);
@@ -168,49 +167,6 @@
 	{/snippet}
 
 	{#snippet children()}
-		<!-- Create branch form -->
-		{#if showCreateForm}
-			<div class="mb-4 p-3 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg space-y-2">
-				<input
-					type="text"
-					bind:value={newBranchName}
-					placeholder="New branch name..."
-					class="w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 outline-none focus:border-violet-500/40"
-					onkeydown={(e) => e.key === 'Enter' && handleCreate()}
-					autofocus
-				/>
-				<div class="flex gap-2">
-					<button
-						type="button"
-						class="flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer border-none
-							{newBranchName.trim()
-								? 'bg-violet-600 text-white hover:bg-violet-700'
-								: 'bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-500 cursor-not-allowed'}"
-						onclick={handleCreate}
-						disabled={!newBranchName.trim()}
-					>
-						Create Branch
-					</button>
-					<button
-						type="button"
-						class="px-3 py-2 text-sm font-medium bg-transparent border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer"
-						onclick={() => { showCreateForm = false; newBranchName = ''; }}
-					>
-						Cancel
-					</button>
-				</div>
-			</div>
-		{:else}
-			<button
-				type="button"
-				class="flex items-center justify-center gap-2 w-full mb-4 py-2.5 px-3 border border-dashed border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-500 hover:text-violet-600 hover:border-violet-400 transition-colors cursor-pointer bg-transparent"
-				onclick={() => showCreateForm = true}
-			>
-				<Icon name="lucide:plus" class="w-4 h-4" />
-				<span>Create New Branch</span>
-			</button>
-		{/if}
-
 		<!-- Search -->
 		<div class="mb-4">
 			<div class="flex items-center gap-2 py-2.5 px-3.5 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-lg">
@@ -242,7 +198,7 @@
 					{activeTab === 'local'
 						? 'bg-violet-500/10 text-violet-600'
 						: 'bg-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}"
-				onclick={() => activeTab = 'local'}
+				onclick={() => { activeTab = 'local'; showCreateForm = false; newBranchName = ''; }}
 			>
 				Local ({filteredLocal.length})
 			</button>
@@ -261,6 +217,49 @@
 		<!-- Branch list -->
 		<div class="space-y-1.5 max-h-80 overflow-y-auto">
 			{#if activeTab === 'local'}
+				<!-- Create branch form (Local tab only) -->
+				{#if showCreateForm}
+					<div class="mb-2 p-3 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg space-y-2">
+						<input
+							type="text"
+							bind:value={newBranchName}
+							placeholder="New branch name..."
+							class="w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 outline-none focus:border-violet-500/40"
+							onkeydown={(e) => e.key === 'Enter' && handleCreate()}
+							autofocus
+						/>
+						<div class="flex gap-2">
+							<button
+								type="button"
+								class="flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer border-none
+									{newBranchName.trim()
+										? 'bg-violet-600 text-white hover:bg-violet-700'
+										: 'bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-500 cursor-not-allowed'}"
+								onclick={handleCreate}
+								disabled={!newBranchName.trim()}
+							>
+								Create Branch
+							</button>
+							<button
+								type="button"
+								class="px-3 py-2 text-sm font-medium bg-transparent border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer"
+								onclick={() => { showCreateForm = false; newBranchName = ''; }}
+							>
+								Cancel
+							</button>
+						</div>
+					</div>
+				{:else}
+					<button
+						type="button"
+						class="flex items-center justify-center gap-2 w-full mb-2 py-2.5 px-3 border border-dashed border-slate-300 dark:border-slate-600 rounded-lg text-sm text-slate-500 hover:text-violet-600 hover:border-violet-400 transition-colors cursor-pointer bg-transparent"
+						onclick={() => showCreateForm = true}
+					>
+						<Icon name="lucide:plus" class="w-4 h-4" />
+						<span>Create New Branch</span>
+					</button>
+				{/if}
+
 				{#each filteredLocal as branch (branch.name)}
 					<div
 						class="group flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors
@@ -320,129 +319,118 @@
 					</div>
 				{/each}
 			{:else if activeTab === 'remote'}
-				{#each filteredRemote as branch (branch.name)}
-					<div
-						class="group flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors border border-slate-200 dark:border-slate-700"
-					>
-						<div class="flex items-center gap-2.5 flex-1 min-w-0">
-							<Icon name="lucide:cloud" class="w-4 h-4 text-slate-400 shrink-0" />
-							<span class="text-sm text-slate-900 dark:text-slate-100 truncate">{branch.name}</span>
-						</div>
-
-						<div class="items-center gap-1 shrink-0 hidden group-hover:flex">
-							<button
-								type="button"
-								class="flex items-center justify-center w-8 h-8 rounded-lg text-slate-500 hover:bg-violet-500/10 hover:text-violet-600 transition-colors cursor-pointer bg-transparent border-none"
-								onclick={() => handleSwitchRemote(branch.name)}
-								title="Checkout remote branch"
-							>
-								<Icon name="lucide:arrow-right" class="w-4 h-4" />
-							</button>
-						</div>
+				{#if isLoadingRemotes}
+					<div class="flex items-center justify-center py-8">
+						<div class="w-4 h-4 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
 					</div>
-				{:else}
+				{:else if remotes.length === 0}
 					<div class="flex flex-col items-center gap-2 py-8 text-slate-500 dark:text-slate-400 text-sm">
-						<Icon name="lucide:search-x" class="w-10 h-10 opacity-40" />
-						<p class="font-medium">No remote branches found</p>
+						<Icon name="lucide:server-off" class="w-10 h-10 opacity-40" />
+						<p class="font-medium">No remote connections</p>
+						<p class="text-xs text-center opacity-70">Add a remote below to track remote branches</p>
 					</div>
-				{/each}
-			{/if}
-		</div>
-
-		<!-- Remote Connections Section -->
-		<div class="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
-			<button
-				type="button"
-				class="flex items-center gap-2 w-full text-left bg-transparent border-none cursor-pointer px-0 py-1"
-				onclick={() => showRemoteSection = !showRemoteSection}
-			>
-				<Icon name={showRemoteSection ? 'lucide:chevron-down' : 'lucide:chevron-right'} class="w-3.5 h-3.5 text-slate-400" />
-				<Icon name="lucide:server" class="w-3.5 h-3.5 text-slate-500" />
-				<span class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
-					Remote Servers ({remotes.length})
-				</span>
-			</button>
-
-			{#if showRemoteSection}
-				<div class="mt-2 space-y-2">
-					{#if isLoadingRemotes}
-						<div class="flex items-center justify-center py-4">
-							<div class="w-4 h-4 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
-						</div>
-					{:else}
-						<!-- Existing remotes -->
-						{#each remotes as remote (remote.name)}
-							<div class="group flex items-center gap-2.5 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/30">
-								<div class="flex items-center justify-center w-6 h-6 rounded-md bg-slate-100 dark:bg-slate-800">
-									<Icon name="lucide:globe" class="w-3.5 h-3.5 text-slate-500" />
-								</div>
-								<div class="flex-1 min-w-0">
-									<div class="text-sm font-medium text-slate-900 dark:text-slate-100">{remote.name}</div>
-									<div class="text-xs text-slate-500 dark:text-slate-400 truncate font-mono">{remote.fetchUrl}</div>
-								</div>
-								<button
-									type="button"
-									class="flex items-center justify-center w-7 h-7 rounded-md text-slate-400 hover:bg-red-500/10 hover:text-red-500 transition-colors cursor-pointer bg-transparent border-none shrink-0 opacity-0 group-hover:opacity-100"
-									onclick={() => handleRemoveRemote(remote.name)}
-									title="Disconnect remote"
-								>
-									<Icon name="lucide:unlink" class="w-3.5 h-3.5" />
-								</button>
-							</div>
-						{/each}
-
-						<!-- Add remote form -->
-						{#if showAddRemoteForm}
-							<div class="p-3 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg space-y-2">
-								<input
-									type="text"
-									bind:value={newRemoteName}
-									placeholder="Name (e.g. origin)"
-									class="w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 outline-none focus:border-violet-500/40"
-								/>
-								<input
-									type="text"
-									bind:value={newRemoteUrl}
-									placeholder="URL (e.g. https://github.com/user/repo.git)"
-									class="w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 outline-none focus:border-violet-500/40 font-mono"
-									onkeydown={(e) => e.key === 'Enter' && handleAddRemote()}
-									autofocus
-								/>
-								<div class="flex gap-2">
-									<button
-										type="button"
-										class="flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer border-none
-											{newRemoteName.trim() && newRemoteUrl.trim()
-												? 'bg-violet-600 text-white hover:bg-violet-700'
-												: 'bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-500 cursor-not-allowed'}"
-										onclick={handleAddRemote}
-										disabled={!newRemoteName.trim() || !newRemoteUrl.trim()}
-									>
-										Connect
-									</button>
+				{:else}
+					{#each remotes as remote (remote.name)}
+						{@const remoteBranches = filteredRemote.filter(b => b.name.startsWith(remote.name + '/'))}
+						{#if !searchQuery || remoteBranches.length > 0}
+							<div class="space-y-1">
+								<!-- Remote group header -->
+								<div class="group flex items-center gap-2 px-2 py-1.5 rounded-lg">
+									<Icon name="lucide:server" class="w-3.5 h-3.5 text-slate-400 shrink-0" />
+									<span class="text-xs font-semibold text-slate-600 dark:text-slate-300">{remote.name}</span>
+									<span class="text-xs text-slate-400 dark:text-slate-500 font-mono truncate flex-1">{remote.fetchUrl}</span>
 									<button
 										type="button"
-										class="px-3 py-2 text-sm font-medium bg-transparent border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer"
-										onclick={() => { showAddRemoteForm = false; newRemoteName = 'origin'; newRemoteUrl = ''; }}
+										class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:bg-red-500/10 hover:text-red-500 transition-colors cursor-pointer bg-transparent border-none shrink-0 opacity-0 group-hover:opacity-100"
+										onclick={() => handleRemoveRemote(remote.name)}
+										title="Disconnect remote"
 									>
-										Cancel
+										<Icon name="lucide:unlink" class="w-3.5 h-3.5" />
 									</button>
 								</div>
+
+								<!-- Branches under this remote -->
+								{#if remoteBranches.length > 0}
+									<div class="ml-5 space-y-1">
+										{#each remoteBranches as branch (branch.name)}
+											<div class="group flex items-center gap-2.5 px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors border border-slate-200 dark:border-slate-700">
+												<Icon name="lucide:git-branch" class="w-3.5 h-3.5 text-slate-400 shrink-0" />
+												<span class="text-sm text-slate-900 dark:text-slate-100 truncate flex-1">
+													{branch.name.substring(remote.name.length + 1)}
+												</span>
+												<button
+													type="button"
+													class="flex items-center justify-center w-7 h-7 rounded-lg text-slate-400 hover:bg-violet-500/10 hover:text-violet-600 transition-colors cursor-pointer bg-transparent border-none shrink-0 opacity-0 group-hover:opacity-100"
+													onclick={() => handleSwitchRemote(branch.name)}
+													title="Checkout remote branch locally"
+												>
+													<Icon name="lucide:arrow-right" class="w-4 h-4" />
+												</button>
+											</div>
+										{/each}
+									</div>
+								{:else if !searchQuery}
+									<p class="ml-7 text-xs text-slate-400 dark:text-slate-500 py-1">No branches — try Fetch</p>
+								{/if}
 							</div>
-						{:else}
+						{/if}
+					{/each}
+				{/if}
+			{/if}
+		</div>
+
+		<!-- Add remote (only shown in Remote tab) -->
+		{#if activeTab === 'remote'}
+			<div class="mt-3 pt-3 border-t border-slate-200 dark:border-slate-700">
+				{#if showAddRemoteForm}
+					<div class="p-3 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 rounded-lg space-y-2">
+						<input
+							type="text"
+							bind:value={newRemoteName}
+							placeholder="Name (e.g. origin)"
+							class="w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 outline-none focus:border-violet-500/40"
+						/>
+						<input
+							type="text"
+							bind:value={newRemoteUrl}
+							placeholder="URL (e.g. https://github.com/user/repo.git)"
+							class="w-full px-3 py-2 text-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 outline-none focus:border-violet-500/40 font-mono"
+							onkeydown={(e) => e.key === 'Enter' && handleAddRemote()}
+							autofocus
+						/>
+						<div class="flex gap-2">
 							<button
 								type="button"
-								class="flex items-center gap-2 w-full px-3 py-2 text-xs text-slate-500 hover:text-violet-600 hover:bg-violet-500/5 rounded-lg transition-colors cursor-pointer bg-transparent border-none"
-								onclick={() => { showAddRemoteForm = true; showRemoteSection = true; }}
+								class="flex-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer border-none
+									{newRemoteName.trim() && newRemoteUrl.trim()
+										? 'bg-violet-600 text-white hover:bg-violet-700'
+										: 'bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-500 cursor-not-allowed'}"
+								onclick={handleAddRemote}
+								disabled={!newRemoteName.trim() || !newRemoteUrl.trim()}
 							>
-								<Icon name="lucide:plus" class="w-3.5 h-3.5" />
-								<span>Add Remote Server</span>
+								Connect
 							</button>
-						{/if}
-					{/if}
-				</div>
-			{/if}
-		</div>
+							<button
+								type="button"
+								class="px-3 py-2 text-sm font-medium bg-transparent border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer"
+								onclick={() => { showAddRemoteForm = false; newRemoteName = 'origin'; newRemoteUrl = ''; }}
+							>
+								Cancel
+							</button>
+						</div>
+					</div>
+				{:else}
+					<button
+						type="button"
+						class="flex items-center gap-2 w-full px-3 py-2 text-xs text-slate-500 hover:text-violet-600 hover:bg-violet-500/5 rounded-lg transition-colors cursor-pointer bg-transparent border-none"
+						onclick={() => showAddRemoteForm = true}
+					>
+						<Icon name="lucide:plus" class="w-3.5 h-3.5" />
+						<span>Add Remote</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
 	{/snippet}
 </Modal>
 

package/frontend/components/git/CommitForm.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import { settings } from '$frontend/stores/features/settings.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
+	import { showError } from '$frontend/stores/ui/notification.svelte';
+	import ws from '$frontend/utils/ws';
 
 	interface Props {
 		stagedCount: number;
@@ -11,6 +16,7 @@
 
 	let commitMessage = $state('');
 	let textareaEl = $state<HTMLTextAreaElement | null>(null);
+	let isGenerating = $state(false);
 
 	function handleCommit() {
 		if (!commitMessage.trim() || stagedCount === 0) return;
@@ -42,21 +48,65 @@
 	function handleInput() {
 		autoResize();
 	}
+
+	async function generateCommitMessage() {
+		const projectId = projectState.currentProject?.id;
+		if (!projectId || stagedCount === 0 || isGenerating) return;
+
+		isGenerating = true;
+		try {
+			const { useCustomModel, engine, model, format } = settings.commitGenerator;
+			const resolvedEngine = useCustomModel ? engine : settings.selectedEngine;
+			const resolvedModel = useCustomModel ? model : settings.selectedModel;
+			const result = await ws.http('git:generate-commit-message', {
+				projectId,
+				engine: resolvedEngine,
+				model: resolvedModel,
+				format
+			});
+			commitMessage = result.message;
+			await tick();
+			autoResize();
+		} catch (err) {
+			showError('Generate Failed', err instanceof Error ? err.message : 'Failed to generate commit message');
+		} finally {
+			isGenerating = false;
+		}
+	}
 </script>
 
 <div class="px-2 py-2">
 	<div class="flex flex-col gap-1.5">
-		<textarea
-			bind:this={textareaEl}
-			bind:value={commitMessage}
-			placeholder="Commit message..."
-			class="w-full px-2.5 py-2 text-sm bg-white dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-600 resize-none outline-none focus:ring-1 focus:ring-violet-500 transition-colors"
-			rows="1"
-			style="overflow-y: hidden;"
-			onkeydown={handleKeydown}
-			oninput={handleInput}
-			disabled={isCommitting}
-		></textarea>
+		<div class="relative">
+			<textarea
+				bind:this={textareaEl}
+				bind:value={commitMessage}
+				placeholder="Commit message..."
+				class="w-full px-2.5 py-2 pr-8 text-sm bg-white dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-600 resize-none outline-none focus:ring-1 focus:ring-violet-500 transition-colors"
+				rows="1"
+				style="overflow-y: hidden;"
+				onkeydown={handleKeydown}
+				oninput={handleInput}
+				disabled={isCommitting || isGenerating}
+			></textarea>
+			<!-- AI generate button -->
+			<button
+				type="button"
+				class="absolute top-1.5 right-1.5 flex items-center justify-center w-6 h-6 rounded transition-all duration-150
+					{stagedCount > 0 && !isGenerating && !isCommitting
+						? 'text-slate-400 hover:text-violet-500 hover:bg-violet-500/10 cursor-pointer'
+						: 'text-slate-300 dark:text-slate-700 cursor-not-allowed'}"
+				onclick={generateCommitMessage}
+				disabled={stagedCount === 0 || isGenerating || isCommitting}
+				title="Generate commit message with AI"
+			>
+				{#if isGenerating}
+					<div class="w-3.5 h-3.5 border-2 border-violet-400/30 border-t-violet-500 rounded-full animate-spin"></div>
+				{:else}
+					<Icon name="lucide:sparkles" class="w-3.5 h-3.5" />
+				{/if}
+			</button>
+		</div>
 		<button
 			type="button"
 			class="flex items-center justify-center gap-1.5 w-full py-1.5 px-3 rounded-md text-xs font-medium transition-all duration-150

package/frontend/components/history/HistoryModal.svelte

@@ -5,7 +5,6 @@
 	import { addNotification } from '$frontend/stores/ui/notification.svelte';
 	import ws from '$frontend/utils/ws';
 	import type { ChatSession } from '$shared/types/database/schema';
-	import type { SDKMessage } from '$shared/types/messaging';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import AvatarBubble from '$frontend/components/common/display/AvatarBubble.svelte';
 	import Modal from '$frontend/components/common/overlay/Modal.svelte';
@@ -55,7 +54,6 @@
 
 	// Cache for session data to avoid multiple API calls
 	let sessionDataCache = $state<Record<string, {
-		messages: SDKMessage[];
 		title: string;
 		summary: string;
 		count: number;
@@ -64,87 +62,30 @@
 	}>>({});
 	let loadingSessionData = $state(false);
 
-	// 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 {
-			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
-
-			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');
-			let title = 'New Conversation';
-			if (firstUserMessage) {
-				let textContent = '';
-				if (typeof firstUserMessage.message.content === 'string') {
-					textContent = firstUserMessage.message.content;
-				} else if (Array.isArray(firstUserMessage.message.content)) {
-					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 ? '...' : '');
-				}
+			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];
 			}
-
-			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, 100) + (cleanText.length > 100 ? '...' : '');
-				}
-			}
-
-			const userMessages = messages.filter((m: SDKMessage) => {
-				if (m.type !== 'user') return false;
-				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;
-
-			const data = {
-				messages,
-				title,
-				summary,
-				count: totalBubbles,
-				userCount: userMessages.length,
-				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 };
 	}
 
 	function getMessageCount(sessionId: string): number {
@@ -167,12 +108,23 @@
 		loadingSessionData = true;
 		try {
 			// Sort newest first and load top 20 so new sessions are always included
-			const sortedSessions = [...sessions]
+			const sessionIds = [...sessions]
 				.sort((a, b) => new Date(b.started_at).getTime() - new Date(a.started_at).getTime())
-				.slice(0, 20);
-			await Promise.all(
-				sortedSessions.map(session => getSessionData(session.id))
-			);
+				.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 {