@myrialabs/clopen 0.2.2 → 0.2.3

package/frontend/components/chat/widgets/FloatingTodoList.svelte

@@ -9,12 +9,103 @@
 	import { sessionState } from '$frontend/stores/core/sessions.svelte';
 	import { appState } from '$frontend/stores/core/app.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
-	import { fade, fly } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
 	import type { TodoWriteToolInput } from '$shared/types/messaging';
 
 	let isExpanded = $state(true);
 	let isMinimized = $state(false);
 
+	// Drag & snap state
+	let posY = $state(80);
+	let posX = $state(0);
+	let snapSide = $state<'left' | 'right'>('right');
+	let isDragging = $state(false);
+
+	// Minimized button ref for measuring width at snap time
+	let minimizedBtn = $state<HTMLButtonElement | null>(null);
+
+	// Non-reactive drag tracking
+	let _sx = 0, _sy = 0, _mx = 0, _my = 0, _hasDragged = false;
+
+	function getPanelWidth() {
+		return isExpanded ? 330 : 230;
+	}
+
+	// Always use `left` property so CSS can transition in both directions
+	const panelDisplayLeft = $derived(
+		isDragging ? posX : snapSide === 'right' ? window.innerWidth - getPanelWidth() - 16 : 16
+	);
+
+	const minimizedDisplayLeft = $derived(
+		isDragging
+			? posX
+			: snapSide === 'right'
+				? window.innerWidth - (minimizedBtn?.offsetWidth ?? 90) - 16
+				: 16
+	);
+
+	// --- Main panel drag (from header) ---
+	function startDrag(e: PointerEvent) {
+		if ((e.target as HTMLElement).closest('button')) return;
+		isDragging = true;
+		// Use actual rendered position for accuracy
+		const panel = (e.currentTarget as HTMLElement).parentElement!;
+		const rect = panel.getBoundingClientRect();
+		_sx = rect.left;
+		_sy = rect.top;
+		_mx = e.clientX;
+		_my = e.clientY;
+		posX = _sx;
+		posY = _sy;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		posX = _sx + e.clientX - _mx;
+		posY = Math.max(0, Math.min(window.innerHeight - 56, _sy + e.clientY - _my));
+	}
+
+	function endDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		snapSide = posX + getPanelWidth() / 2 < window.innerWidth / 2 ? 'left' : 'right';
+	}
+
+	// --- Minimized button drag (click = restore, drag = move) ---
+	function startMinimizedDrag(e: PointerEvent) {
+		isDragging = true;
+		_hasDragged = false;
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		_sx = rect.left;
+		_sy = rect.top;
+		_mx = e.clientX;
+		_my = e.clientY;
+		posX = _sx;
+		posY = _sy;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onMinimizedDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		const dx = e.clientX - _mx;
+		const dy = e.clientY - _my;
+		if (Math.abs(dx) > 5 || Math.abs(dy) > 5) _hasDragged = true;
+		posX = _sx + dx;
+		posY = Math.max(0, Math.min(window.innerHeight - 56, _sy + dy));
+	}
+
+	function endMinimizedDrag(e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+		if (!_hasDragged) {
+			restore();
+			return;
+		}
+		const el = e.currentTarget as HTMLElement;
+		snapSide = posX + el.offsetWidth / 2 < window.innerWidth / 2 ? 'left' : 'right';
+	}
+
 	// Extract the latest TodoWrite data from messages
 	const latestTodos = $derived.by(() => {
 		if (!sessionState.currentSession || sessionState.messages.length === 0) {
@@ -104,11 +195,22 @@
 
 {#if shouldShow && !appState.isRestoring}
 	{#if isMinimized}
-		<!-- Minimized state - small floating button -->
+		<!-- Minimized state - small floating button, draggable -->
 		<button
-			onclick={restore}
-			class="fixed top-20 right-4 z-30 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white rounded-full p-3 shadow-lg transition-all duration-200 flex items-center gap-2"
-			transition:fly={{ x: 100, duration: 200 }}
+			bind:this={minimizedBtn}
+			onpointerdown={startMinimizedDrag}
+			onpointermove={onMinimizedDrag}
+			onpointerup={endMinimizedDrag}
+			onpointercancel={endMinimizedDrag}
+			class="fixed z-30 bg-violet-600 hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-600 text-white rounded-full p-3 shadow-lg flex items-center gap-2"
+			style="
+				top: {posY}px;
+				left: {minimizedDisplayLeft}px;
+				touch-action: none;
+				cursor: {isDragging ? 'grabbing' : 'grab'};
+				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease'};
+			"
+			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 200 }}
 		>
 			<Icon name="lucide:list-todo" class="w-5 h-5" />
 			<span class="text-sm font-medium">{progress.completed}/{progress.total}</span>
@@ -116,13 +218,25 @@
 	{:else}
 		<!-- Floating panel -->
 		<div
-			class="fixed top-20 right-4 z-30 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden transition-all duration-300"
-			style="width: {isExpanded ? '330px' : '230px'}; max-height: {isExpanded ? '600px' : '56px'}"
-			transition:fly={{ x: 100, duration: 300 }}
+			class="fixed z-30 bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden"
+			style="
+				top: {posY}px;
+				left: {panelDisplayLeft}px;
+				width: {isExpanded ? '330px' : '230px'};
+				max-height: {isExpanded ? '600px' : '56px'};
+				transition: {isDragging ? 'none' : 'left 0.25s ease, top 0.15s ease, width 0.3s, max-height 0.3s'};
+			"
+			transition:fly={{ x: snapSide === 'right' ? 100 : -100, duration: 300 }}
 		>
-			<!-- Header -->
+			<!-- Header (drag handle) -->
 			<div
 				class="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-violet-50 to-violet-50 dark:from-slate-800 dark:to-slate-800 border-b border-slate-200 dark:border-slate-700"
+				style="touch-action: none; cursor: {isDragging ? 'grabbing' : 'grab'};"
+				onpointerdown={startDrag}
+				onpointermove={onDrag}
+				onpointerup={endDrag}
+				onpointercancel={endDrag}
+				role="none"
 			>
 				<div class="flex items-center gap-3">
 					<Icon name="lucide:list-todo" class="w-5 h-5 text-violet-600 dark:text-violet-400" />
@@ -246,4 +360,4 @@
 	:global(.dark) div::-webkit-scrollbar-thumb:hover {
 		background: rgb(71 85 105);
 	}
-</style>
+</style>

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

@@ -49,12 +49,12 @@
 			<span>Updated to v{updateState.latestVersion} — restart clopen to apply</span>
 		{: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/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 {

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/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/workspace/panels/FilesPanel.svelte

@@ -139,6 +139,8 @@
 	// Container width detection for 2-column layout
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
+	let leftPanelWidth = $state(288); // default w-72
+	let isResizing = $state(false);
 	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 
 	// FileTree ref
@@ -1101,6 +1103,26 @@
 		}
 	});
 
+	function startColumnResize(e: MouseEvent) {
+		isResizing = true;
+		const startX = e.clientX;
+		const startWidth = leftPanelWidth;
+
+		function onMouseMove(e: MouseEvent) {
+			const delta = e.clientX - startX;
+			leftPanelWidth = Math.max(120, Math.min(startWidth + delta, containerWidth - 120));
+		}
+
+		function onMouseUp() {
+			isResizing = false;
+			window.removeEventListener('mousemove', onMouseMove);
+			window.removeEventListener('mouseup', onMouseUp);
+		}
+
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+	}
+
 	// Monitor container width for responsive layout
 	onMount(() => {
 		if (containerRef && typeof ResizeObserver !== 'undefined') {
@@ -1182,12 +1204,13 @@
 	{:else}
 		<div class="flex-1 overflow-hidden">
 			<!-- Unified layout: always render both Tree and Viewer to preserve internal state -->
-			<div class="h-full flex">
+			<div class="h-full flex" class:select-none={isResizing} class:cursor-col-resize={isResizing}>
 				<!-- Tree panel: always rendered, hidden via CSS in 1-column viewer mode -->
 				<div
 					class={isTwoColumnMode
-						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700'
+						? 'flex-shrink-0 h-full overflow-hidden'
 						: (viewMode === 'tree' ? 'w-full h-full overflow-hidden' : 'hidden')}
+					style={isTwoColumnMode ? `width: ${leftPanelWidth}px` : undefined}
 				>
 					<div class="h-full overflow-auto" bind:this={treeScrollContainer}>
 						<FileTree
@@ -1210,7 +1233,22 @@
 					</div>
 				</div>
 
-				<!-- Editor panel: always rendered, hidden via CSS in 1-column tree mode -->
+				{#if isTwoColumnMode}
+				<!-- Column resize handle -->
+				<div
+					class="relative flex-shrink-0 h-full w-px cursor-col-resize group"
+					role="separator"
+					aria-orientation="vertical"
+					onmousedown={startColumnResize}
+				>
+					<!-- Invisible extended hit area (6px each side) -->
+					<div class="absolute inset-y-0 -left-1.5 -right-1.5 cursor-col-resize z-10"></div>
+					<!-- Visual line: 1px default, expands to 4px on hover -->
+					<div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px group-hover:w-1 bg-slate-200 dark:bg-slate-700 group-hover:bg-blue-400 dark:group-hover:bg-blue-500 transition-all duration-150"></div>
+				</div>
+			{/if}
+
+			<!-- Editor panel: always rendered, hidden via CSS in 1-column tree mode -->
 				<div
 					class={isTwoColumnMode
 						? 'flex-1 h-full overflow-hidden flex flex-col'

package/frontend/components/workspace/panels/GitPanel.svelte

@@ -129,6 +129,8 @@
 	// Container width for responsive layout (same threshold as Files: 800)
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
+	let leftPanelWidth = $state(288); // default w-72
+	let isResizing = $state(false);
 	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 	const isTwoColumnMode = $derived(containerWidth >= TWO_COLUMN_THRESHOLD);
 
@@ -1025,6 +1027,26 @@
 		return () => unsub();
 	});
 
+	function startColumnResize(e: MouseEvent) {
+		isResizing = true;
+		const startX = e.clientX;
+		const startWidth = leftPanelWidth;
+
+		function onMouseMove(e: MouseEvent) {
+			const delta = e.clientX - startX;
+			leftPanelWidth = Math.max(120, Math.min(startWidth + delta, containerWidth - 120));
+		}
+
+		function onMouseUp() {
+			isResizing = false;
+			window.removeEventListener('mousemove', onMouseMove);
+			window.removeEventListener('mouseup', onMouseUp);
+		}
+
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+	}
+
 	// Monitor container width
 	onMount(() => {
 		let resizeObserver: ResizeObserver | null = null;
@@ -1442,18 +1464,34 @@
 	{:else}
 		<div class="flex-1 overflow-hidden">
 			<!-- Unified layout: always render both panels to preserve state (like Files panel) -->
-			<div class="h-full flex">
+			<div class="h-full flex" class:select-none={isResizing} class:cursor-col-resize={isResizing}>
 				<!-- Left panel: Changes list -->
 				<div
 					class={isTwoColumnMode
-						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
+						? 'flex-shrink-0 h-full overflow-hidden flex flex-col'
 						: (viewMode === 'list' ? 'w-full h-full overflow-hidden flex flex-col' : 'hidden')}
+					style={isTwoColumnMode ? `width: ${leftPanelWidth}px` : undefined}
 				>
 					{@render viewTabBar()}
 					{@render changesList()}
 				</div>
 
-				<!-- Right panel: Diff viewer -->
+				{#if isTwoColumnMode}
+				<!-- Column resize handle -->
+				<div
+					class="relative flex-shrink-0 h-full w-px cursor-col-resize group"
+					role="separator"
+					aria-orientation="vertical"
+					onmousedown={startColumnResize}
+				>
+					<!-- Invisible extended hit area (6px each side) -->
+					<div class="absolute inset-y-0 -left-1.5 -right-1.5 cursor-col-resize z-10"></div>
+					<!-- Visual line: 1px default, expands to 4px on hover -->
+					<div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px group-hover:w-1 bg-slate-200 dark:bg-slate-700 group-hover:bg-blue-400 dark:group-hover:bg-blue-500 transition-all duration-150"></div>
+				</div>
+			{/if}
+
+			<!-- Right panel: Diff viewer -->
 				<div
 					class={isTwoColumnMode
 						? 'flex-1 h-full overflow-hidden flex flex-col'