@myrialabs/clopen 0.2.3 → 0.2.5

package/frontend/components/files/FileViewer.svelte

@@ -2,15 +2,16 @@
 	import type { FileNode } from '$shared/types/filesystem';
 	import LoadingSpinner from '../common/feedback/LoadingSpinner.svelte';
 	import MonacoEditor from '../common/editor/MonacoEditor.svelte';
+	import MediaPreview from '../common/media/MediaPreview.svelte';
 	import { themeStore } from '$frontend/stores/ui/theme.svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
 	import { getFolderIcon } from '$frontend/utils/folder-icon-mappings';
-	import { onMount, onDestroy } from 'svelte';
+	import { isImageFile, isSvgFile, isPdfFile, isAudioFile, isVideoFile, isBinaryFile, isBinaryContent, isPreviewableFile, formatFileSize } from '$frontend/utils/file-type';
+	import { onMount } from 'svelte';
 	import type { IconName } from '$shared/types/ui/icons';
 	import type { editor } from 'monaco-editor';
 	import { debug } from '$shared/utils/logger';
-	import ws from '$frontend/utils/ws';
 
 	// Interface untuk MonacoEditor component
 	interface MonacoEditorComponent {
@@ -38,6 +39,7 @@
 		onToggleWordWrap?: () => void;
 		externallyChanged?: boolean;
 		onForceReload?: () => void;
+		isBinary?: boolean;
 	}
 
 	const {
@@ -53,7 +55,8 @@
 		wordWrap = false,
 		onToggleWordWrap,
 		externallyChanged = false,
-		onForceReload
+		onForceReload,
+		isBinary = false
 	}: Props = $props();
 
 	// Theme state
@@ -76,15 +79,9 @@
 	// Line highlighting state
 	let currentDecorations: string[] = $state([]);
 
-	// Image/binary blob URL state
-	let blobUrl = $state<string | null>(null);
-
 	// SVG view mode
 	let svgViewMode = $state<'visual' | 'code'>('visual');
 
-	// PDF blob URL
-	let pdfBlobUrl = $state<string | null>(null);
-
 	// Keyboard shortcut for save
 	onMount(() => {
 		function handleKeyDown(e: KeyboardEvent) {
@@ -103,61 +100,6 @@
 		};
 	});
 
-	// Cleanup blob URLs on destroy
-	onDestroy(() => {
-		if (blobUrl) {
-			URL.revokeObjectURL(blobUrl);
-		}
-		if (pdfBlobUrl) {
-			URL.revokeObjectURL(pdfBlobUrl);
-		}
-	});
-
-	// Load binary content (images, PDF) via WebSocket when file changes
-	$effect(() => {
-		if (file && (isImageFile(file.name) || isPdfFile(file.name))) {
-			loadBinaryContent();
-		} else {
-			// Cleanup if not binary
-			if (blobUrl) {
-				URL.revokeObjectURL(blobUrl);
-				blobUrl = null;
-			}
-			if (pdfBlobUrl) {
-				URL.revokeObjectURL(pdfBlobUrl);
-				pdfBlobUrl = null;
-			}
-		}
-	});
-
-	async function loadBinaryContent() {
-		if (!file) return;
-
-		try {
-			const response = await ws.http('files:read-content', { path: file.path });
-
-			if (response.content) {
-				// Decode base64 to binary
-				const binaryString = atob(response.content);
-				const bytes = new Uint8Array(binaryString.length);
-				for (let i = 0; i < binaryString.length; i++) {
-					bytes[i] = binaryString.charCodeAt(i);
-				}
-				const blob = new Blob([bytes], { type: response.contentType || 'application/octet-stream' });
-
-				if (isPdfFile(file.name)) {
-					if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
-					pdfBlobUrl = URL.createObjectURL(blob);
-				} else {
-					if (blobUrl) URL.revokeObjectURL(blobUrl);
-					blobUrl = URL.createObjectURL(blob);
-				}
-			}
-		} catch (error) {
-			debug.error('file', 'Failed to load binary content:', error);
-		}
-	}
-
 	// Reference content for change detection (use savedContent if provided)
 	const referenceContent = $derived(savedContentProp !== undefined ? savedContentProp : content);
 
@@ -298,38 +240,6 @@
 		return getFileIcon(fileName);
 	}
 
-	function isImageFile(fileName: string): boolean {
-		const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-		return ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp'].includes(extension);
-	}
-
-	function isSvgFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.svg');
-	}
-
-	function isPdfFile(fileName: string): boolean {
-		return fileName.toLowerCase().endsWith('.pdf');
-	}
-
-	function isBinaryFile(fileName: string): boolean {
-		const extension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
-		return ['.doc', '.docx', '.xls', '.xlsx', '.zip', '.tar', '.gz', '.exe', '.dll',
-			'.ppt', '.pptx', '.7z', '.rar', '.bz2', '.woff', '.woff2', '.ttf', '.eot', '.otf',
-			'.mp3', '.mp4', '.wav', '.avi', '.mkv', '.flv', '.sqlite', '.db'].includes(extension);
-	}
-
-	function isVisualFile(fileName: string): boolean {
-		return isImageFile(fileName) || isSvgFile(fileName) || isPdfFile(fileName);
-	}
-
-	function formatFileSize(bytes: number): string {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-	}
-
 	function copyToClipboard() {
 		if (editableContent) {
 			navigator.clipboard.writeText(editableContent);
@@ -406,7 +316,7 @@
 				{/if}
 
 				<!-- Actions for editable files -->
-				{#if file && file.type === 'file' && !isImageFile(file.name) && !isBinaryFile(file.name) && !isPdfFile(file.name) && !(isSvgFile(file.name) && svgViewMode === 'visual')}
+				{#if file && file.type === 'file' && !isBinary && !isBinaryContent(content) && !isImageFile(file.name) && !isBinaryFile(file.name) && !isPdfFile(file.name) && !isAudioFile(file.name) && !isVideoFile(file.name) && !(isSvgFile(file.name) && svgViewMode === 'visual')}
 					<!-- Word Wrap toggle -->
 					{#if onToggleWordWrap}
 						<button
@@ -496,38 +406,9 @@
 						This is a directory. Select a file to view its content.
 					</p>
 				</div>
-			{:else if isImageFile(file.name)}
-				<!-- Image preview -->
-				<div class="flex items-center justify-center h-full p-4 overflow-hidden">
-					{#if blobUrl}
-						<img
-							src={blobUrl}
-							alt={file.name}
-							class="max-w-full max-h-full object-contain"
-						/>
-					{:else}
-						<LoadingSpinner size="lg" />
-					{/if}
-				</div>
 			{:else if isSvgFile(file.name)}
-				<!-- SVG: visual or code view -->
 				{#if svgViewMode === 'visual'}
-					<div class="flex items-center justify-center h-full p-4 overflow-auto bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23f0f0f0%22%2F%3E%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23e0e0e0%22%2F%3E%3C%2Fsvg%3E')]">
-						{#if blobUrl}
-							<img
-								src={blobUrl}
-								alt={file.name}
-								class="max-w-full max-h-full object-contain"
-							/>
-						{:else if content}
-							<!-- Render SVG from content directly -->
-							<div class="max-w-full max-h-full flex items-center justify-center">
-								{@html content}
-							</div>
-						{:else}
-							<LoadingSpinner size="lg" />
-						{/if}
-					</div>
+					<MediaPreview fileName={file.name} filePath={file.path} svgContent={content} />
 				{:else}
 					<!-- SVG code view (editable) -->
 					<div class="h-full flex flex-col bg-slate-50 dark:bg-slate-950">
@@ -561,22 +442,9 @@
 						{/if}
 					</div>
 				{/if}
-			{:else if isPdfFile(file.name)}
-				<!-- PDF preview -->
-				<div class="h-full w-full">
-					{#if pdfBlobUrl}
-						<iframe
-							src={pdfBlobUrl}
-							title={file.name}
-							class="w-full h-full border-0"
-						></iframe>
-					{:else}
-						<div class="flex items-center justify-center h-full">
-							<LoadingSpinner size="lg" />
-						</div>
-					{/if}
-				</div>
-			{:else if isBinaryFile(file.name)}
+			{:else if isPreviewableFile(file.name)}
+				<MediaPreview fileName={file.name} filePath={file.path} />
+			{:else if isBinary || isBinaryFile(file.name) || isBinaryContent(content)}
 				<div class="flex flex-col items-center justify-center h-full p-8">
 					<Icon name="lucide:file-text" class="w-16 h-16 text-slate-400 mb-4" />
 					<h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">

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