@myrialabs/clopen 0.0.1

package/frontend/lib/components/git/ConflictResolver.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import type { GitConflictFile } from '$shared/types/git';
+
+	interface Props {
+		isOpen: boolean;
+		conflictFiles: GitConflictFile[];
+		isLoading: boolean;
+		onResolve: (filePath: string, resolution: 'ours' | 'theirs' | 'custom', customContent?: string) => void;
+		onResolveWithAI: (filePath: string) => void;
+		onAbortMerge: () => void;
+		onClose: () => void;
+	}
+
+	const { isOpen, conflictFiles, isLoading, onResolve, onResolveWithAI, onAbortMerge, onClose }: Props = $props();
+
+	let selectedFile = $state<GitConflictFile | null>(null);
+
+	$effect(() => {
+		if (conflictFiles.length > 0 && !selectedFile) {
+			selectedFile = conflictFiles[0];
+		}
+	});
+</script>
+
+{#if isOpen}
+	<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onclick={onClose}>
+		<div
+			class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[85vh] flex flex-col"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header -->
+			<div class="flex items-center justify-between px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+				<div class="flex items-center gap-2">
+					<Icon name="lucide:triangle-alert" class="w-4 h-4 text-orange-500" />
+					<h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">
+						Merge Conflicts ({conflictFiles.length} files)
+					</h3>
+				</div>
+				<div class="flex items-center gap-2">
+					<button
+						type="button"
+						class="px-3 py-1.5 text-xs font-medium text-red-600 bg-red-500/10 rounded-md hover:bg-red-500/20 transition-colors cursor-pointer border-none"
+						onclick={onAbortMerge}
+					>
+						Abort Merge
+					</button>
+					<button
+						type="button"
+						class="flex items-center justify-center w-7 h-7 rounded-md text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors cursor-pointer bg-transparent border-none"
+						onclick={onClose}
+					>
+						<Icon name="lucide:x" class="w-4 h-4" />
+					</button>
+				</div>
+			</div>
+
+			{#if isLoading}
+				<div class="flex-1 flex items-center justify-center py-12">
+					<div class="w-6 h-6 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
+				</div>
+			{:else}
+				<div class="flex flex-1 overflow-hidden">
+					<!-- File list sidebar -->
+					<div class="w-48 border-r border-slate-200 dark:border-slate-700 overflow-y-auto shrink-0">
+						{#each conflictFiles as file (file.path)}
+							<button
+								type="button"
+								class="flex items-center gap-1.5 w-full px-3 py-2 text-left text-xs bg-transparent border-none cursor-pointer transition-colors
+									{selectedFile?.path === file.path
+										? 'bg-violet-500/10 text-violet-600 font-medium'
+										: 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'}"
+								onclick={() => selectedFile = file}
+							>
+								<Icon name="lucide:file-warning" class="w-3.5 h-3.5 text-orange-500 shrink-0" />
+								<span class="truncate">{file.path.split(/[\\/]/).pop()}</span>
+							</button>
+						{/each}
+					</div>
+
+					<!-- Conflict content -->
+					<div class="flex-1 flex flex-col overflow-hidden">
+						{#if selectedFile}
+							<!-- File path -->
+							<div class="px-4 py-2 bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700 text-xs text-slate-600 dark:text-slate-400">
+								{selectedFile.path}
+							</div>
+
+							<!-- Conflict markers -->
+							<div class="flex-1 overflow-y-auto">
+								{#each selectedFile.markers as marker, markerIndex}
+									<div class="border-b border-slate-200 dark:border-slate-700">
+										<!-- Conflict header -->
+										<div class="flex items-center gap-2 px-4 py-1.5 bg-orange-500/5 text-3xs font-medium text-orange-600 dark:text-orange-400">
+											<Icon name="lucide:triangle-alert" class="w-3 h-3" />
+											Conflict #{markerIndex + 1}
+										</div>
+
+										<div class="flex">
+											<!-- Ours (current) -->
+											<div class="w-1/2 border-r border-slate-200 dark:border-slate-700">
+												<div class="px-3 py-1 bg-emerald-500/10 text-3xs font-semibold text-emerald-600 dark:text-emerald-400 border-b border-emerald-500/10">
+													Current (Ours)
+												</div>
+												<pre class="px-3 py-2 text-2xs font-mono text-slate-700 dark:text-slate-300 whitespace-pre-wrap bg-emerald-500/5">{marker.ourContent}</pre>
+											</div>
+											<!-- Theirs (incoming) -->
+											<div class="w-1/2">
+												<div class="px-3 py-1 bg-blue-500/10 text-3xs font-semibold text-blue-600 dark:text-blue-400 border-b border-blue-500/10">
+													Incoming (Theirs)
+												</div>
+												<pre class="px-3 py-2 text-2xs font-mono text-slate-700 dark:text-slate-300 whitespace-pre-wrap bg-blue-500/5">{marker.theirContent}</pre>
+											</div>
+										</div>
+									</div>
+								{/each}
+							</div>
+
+							<!-- Resolution actions -->
+							<div class="flex items-center gap-2 px-4 py-3 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
+								<button
+									type="button"
+									class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-emerald-600 text-white rounded-md hover:bg-emerald-700 transition-colors cursor-pointer border-none"
+									onclick={() => selectedFile && onResolve(selectedFile.path, 'ours')}
+								>
+									<Icon name="lucide:check" class="w-3.5 h-3.5" />
+									Accept Ours
+								</button>
+								<button
+									type="button"
+									class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors cursor-pointer border-none"
+									onclick={() => selectedFile && onResolve(selectedFile.path, 'theirs')}
+								>
+									<Icon name="lucide:check" class="w-3.5 h-3.5" />
+									Accept Theirs
+								</button>
+								<div class="flex-1"></div>
+								<button
+									type="button"
+									class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-violet-600 text-white rounded-md hover:bg-violet-700 transition-colors cursor-pointer border-none"
+									onclick={() => selectedFile && onResolveWithAI(selectedFile.path)}
+									title="Send conflict to AI chat for resolution"
+								>
+									<Icon name="lucide:bot" class="w-3.5 h-3.5" />
+									Resolve with AI
+								</button>
+							</div>
+						{:else}
+							<div class="flex-1 flex items-center justify-center text-slate-500 text-xs">
+								Select a file to view conflicts
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}

package/frontend/lib/components/git/DiffViewer.svelte

@@ -0,0 +1,364 @@
+<script lang="ts">
+	import { onMount, onDestroy, untrack } from 'svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
+	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/lib/utils/git-status';
+	import { themeStore } from '$frontend/lib/stores/ui/theme.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import loader from '@monaco-editor/loader';
+	import type { editor } from 'monaco-editor';
+	import type { GitFileDiff } from '$shared/types/git';
+	import type { IconName } from '$shared/types/ui/icons';
+	import { debug } from '$shared/utils/logger';
+	import ws from '$frontend/lib/utils/ws';
+
+	interface Props {
+		diff: GitFileDiff | null;
+		diffs?: GitFileDiff[];
+		isLoading: boolean;
+		onSelectFile?: (index: number) => void;
+		selectedFileIndex?: number;
+	}
+
+	const { diff, diffs = [], isLoading, onSelectFile, selectedFileIndex = 0 }: Props = $props();
+
+	const allDiffs = $derived(diffs.length > 0 ? diffs : diff ? [diff] : []);
+	const activeDiff = $derived(allDiffs.length > 0 ? allDiffs[selectedFileIndex] ?? allDiffs[0] : null);
+
+	// Monaco diff editor
+	let containerRef = $state<HTMLDivElement | null>(null);
+	let diffEditorInstance: editor.IDiffEditor | null = null;
+	let monacoInstance: typeof import('monaco-editor') | null = null;
+	const isDark = $derived(themeStore.isDark);
+
+	// Binary file preview state
+	let blobUrl = $state<string | null>(null);
+	let pdfBlobUrl = $state<string | null>(null);
+	let isBinaryLoading = $state(false);
+
+	// File type detection helpers
+	function isImageFile(fileName: string): boolean {
+		const ext = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
+		return ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.bmp'].includes(ext);
+	}
+
+	function isSvgFile(fileName: string): boolean {
+		return fileName.toLowerCase().endsWith('.svg');
+	}
+
+	function isPdfFile(fileName: string): boolean {
+		return fileName.toLowerCase().endsWith('.pdf');
+	}
+
+	function isPreviewableBinary(fileName: string): boolean {
+		return isImageFile(fileName) || isSvgFile(fileName) || isPdfFile(fileName);
+	}
+
+	// Load binary content for preview
+	async function loadBinaryPreview(filePath: string) {
+		const projectPath = projectState.currentProject?.path;
+		if (!projectPath) return;
+
+		const absolutePath = `${projectPath}/${filePath}`;
+		isBinaryLoading = true;
+
+		try {
+			const response = await ws.http('files:read-content', { path: absolutePath });
+
+			if (response.content) {
+				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(filePath)) {
+					if (pdfBlobUrl) URL.revokeObjectURL(pdfBlobUrl);
+					pdfBlobUrl = URL.createObjectURL(blob);
+				} else {
+					if (blobUrl) URL.revokeObjectURL(blobUrl);
+					blobUrl = URL.createObjectURL(blob);
+				}
+			}
+		} catch (err) {
+			debug.error('git', 'Failed to load binary preview:', err);
+		} finally {
+			isBinaryLoading = false;
+		}
+	}
+
+	function cleanupBlobUrls() {
+		if (blobUrl) {
+			URL.revokeObjectURL(blobUrl);
+			blobUrl = null;
+		}
+		if (pdfBlobUrl) {
+			URL.revokeObjectURL(pdfBlobUrl);
+			pdfBlobUrl = null;
+		}
+	}
+
+	// Load binary preview when activeDiff changes to a binary file
+	$effect(() => {
+		const currentDiff = activeDiff;
+		if (currentDiff?.isBinary) {
+			const filePath = currentDiff.newPath || currentDiff.oldPath;
+			if (filePath && isPreviewableBinary(getFileName(filePath))) {
+				// Status 'D' means file is deleted, can't preview
+				if (currentDiff.status !== 'D') {
+					untrack(() => {
+						cleanupBlobUrls();
+						loadBinaryPreview(filePath);
+					});
+				}
+			}
+		} else {
+			untrack(() => cleanupBlobUrls());
+		}
+	});
+
+	// Build full content from hunks
+	function buildContent(diff: GitFileDiff, side: 'old' | 'new'): string {
+		if (!diff || diff.isBinary || diff.hunks.length === 0) return '';
+		const lines: string[] = [];
+		for (const hunk of diff.hunks) {
+			for (const line of hunk.lines) {
+				if (side === 'old') {
+					if (line.type === 'context' || line.type === 'delete') {
+						lines.push(line.content);
+					}
+				} else {
+					if (line.type === 'context' || line.type === 'add') {
+						lines.push(line.content);
+					}
+				}
+			}
+		}
+		return lines.join('\n');
+	}
+
+	function getLanguageFromPath(filePath: string): string {
+		const ext = filePath.split('.').pop()?.toLowerCase();
+		if (!ext) return 'plaintext';
+		const map: Record<string, string> = {
+			js: 'javascript', jsx: 'javascript', ts: 'typescript', tsx: 'typescript',
+			mjs: 'javascript', cjs: 'javascript',
+			html: 'html', htm: 'html', css: 'css', scss: 'scss', sass: 'sass', less: 'less',
+			py: 'python', java: 'java', c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp',
+			cs: 'csharp', go: 'go', rs: 'rust', php: 'php', rb: 'ruby',
+			swift: 'swift', kt: 'kotlin', scala: 'scala',
+			sh: 'shell', bash: 'shell', zsh: 'shell',
+			sql: 'sql', xml: 'xml', json: 'json', yaml: 'yaml', yml: 'yaml',
+			toml: 'toml', md: 'markdown', dockerfile: 'dockerfile',
+			svelte: 'html', vue: 'html', svg: 'xml',
+			gitignore: 'plaintext', env: 'plaintext', txt: 'plaintext', log: 'plaintext'
+		};
+		return map[ext] || 'plaintext';
+	}
+
+	function getFileName(path: string): string {
+		return path.split(/[\\/]/).pop() || path;
+	}
+
+	async function initDiffEditor() {
+		if (!containerRef || !activeDiff) return;
+
+		try {
+			if (!monacoInstance) {
+				monacoInstance = await loader.init();
+
+				// Define themes
+				monacoInstance.editor.defineTheme('diff-dark', {
+					base: 'vs-dark',
+					inherit: true,
+					rules: [],
+					colors: {
+						'editor.background': '#0d1117',
+						'editor.foreground': '#e6edf3',
+						'editor.lineHighlightBackground': '#161b22',
+						'editorLineNumber.foreground': '#6e7681',
+						'editorLineNumber.activeForeground': '#f0f6fc',
+						'diffEditor.insertedTextBackground': '#23863633',
+						'diffEditor.removedTextBackground': '#f8514933',
+						'diffEditor.insertedLineBackground': '#23863620',
+						'diffEditor.removedLineBackground': '#f8514920',
+					}
+				});
+				monacoInstance.editor.defineTheme('diff-light', {
+					base: 'vs',
+					inherit: true,
+					rules: [],
+					colors: {
+						'editor.background': '#ffffff',
+						'diffEditor.insertedTextBackground': '#dafbe133',
+						'diffEditor.removedTextBackground': '#ffc3c333',
+						'diffEditor.insertedLineBackground': '#dafbe120',
+						'diffEditor.removedLineBackground': '#ffc3c320',
+					}
+				});
+			}
+
+			// Dispose previous
+			if (diffEditorInstance) {
+				diffEditorInstance.dispose();
+				diffEditorInstance = null;
+			}
+
+			const language = getLanguageFromPath(activeDiff.newPath || activeDiff.oldPath || '');
+			const oldContent = buildContent(activeDiff, 'old');
+			const newContent = buildContent(activeDiff, 'new');
+
+			const originalModel = monacoInstance.editor.createModel(oldContent, language);
+			const modifiedModel = monacoInstance.editor.createModel(newContent, language);
+
+			diffEditorInstance = monacoInstance.editor.createDiffEditor(containerRef, {
+				theme: isDark ? 'diff-dark' : 'diff-light',
+				readOnly: true,
+				renderSideBySide: true,
+				minimap: { enabled: false },
+				scrollBeyondLastLine: false,
+				fontSize: 12,
+				lineHeight: 20,
+				renderOverviewRuler: false,
+				enableSplitViewResizing: true,
+				automaticLayout: true,
+				scrollbar: {
+					verticalScrollbarSize: 8,
+					horizontalScrollbarSize: 8
+				}
+			});
+
+			diffEditorInstance.setModel({
+				original: originalModel,
+				modified: modifiedModel
+			});
+		} catch (err) {
+			debug.error('git', 'Failed to init diff editor:', err);
+		}
+	}
+
+	// Update theme when it changes
+	$effect(() => {
+		const theme = isDark ? 'diff-dark' : 'diff-light';
+		if (diffEditorInstance && monacoInstance) {
+			monacoInstance.editor.setTheme(theme);
+		}
+	});
+
+	// Reinitialize when diff or selected file changes
+	$effect(() => {
+		if (activeDiff && containerRef) {
+			selectedFileIndex;
+			untrack(() => initDiffEditor());
+		}
+	});
+
+	onDestroy(() => {
+		if (diffEditorInstance) {
+			diffEditorInstance.dispose();
+			diffEditorInstance = null;
+		}
+		cleanupBlobUrls();
+	});
+</script>
+
+<div class="h-full flex flex-col">
+	{#if isLoading}
+		<div class="flex-1 flex items-center justify-center">
+			<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
+		</div>
+	{:else if !activeDiff}
+		<div class="flex-1 flex flex-col items-center justify-center gap-2 text-slate-500 text-xs">
+			<Icon name="lucide:file-diff" class="w-8 h-8 opacity-30" />
+			<span>Select a file to view diff</span>
+		</div>
+	{:else}
+		<!-- File header (like FileViewer) -->
+		<div class="flex-shrink-0 flex items-center justify-between px-4 py-2.5 border-b border-slate-200 dark:border-slate-700">
+			<div class="flex items-center gap-2 min-w-0 flex-1">
+				<Icon name={getFileIcon(getFileName(activeDiff.newPath || activeDiff.oldPath)) as IconName} class="w-5 h-5 shrink-0" />
+				<div class="min-w-0 flex-1">
+					<h3 class="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">
+						{getFileName(activeDiff.newPath || activeDiff.oldPath)}
+					</h3>
+					<p class="text-3xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
+						{activeDiff.newPath || activeDiff.oldPath}
+					</p>
+				</div>
+			</div>
+			<div class="flex items-center gap-2 shrink-0">
+				<span class="text-3xs font-bold px-1.5 py-0.5 rounded {getGitStatusBadgeColor(activeDiff.status)}">
+					{getGitStatusBadgeLabel(activeDiff.status)}
+				</span>
+			</div>
+		</div>
+
+		{#if activeDiff.isBinary}
+			{@const fileName = getFileName(activeDiff.newPath || activeDiff.oldPath)}
+			{@const isDeleted = activeDiff.status === 'D'}
+			{#if isDeleted}
+				<!-- Deleted binary file -->
+				<div class="flex-1 flex flex-col items-center justify-center gap-3 p-8">
+					<Icon name="lucide:file-x" class="w-12 h-12 text-red-400 opacity-60" />
+					<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">Binary File Deleted</h3>
+					<p class="text-xs text-slate-500 dark:text-slate-400 text-center">
+						This binary file has been deleted and cannot be previewed.
+					</p>
+				</div>
+			{:else if isImageFile(fileName) || isSvgFile(fileName)}
+				<!-- Image / SVG preview -->
+				<div class="flex-1 flex items-center justify-center p-4 overflow-hidden 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 isBinaryLoading}
+						<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
+					{:else if blobUrl}
+						<img
+							src={blobUrl}
+							alt={fileName}
+							class="max-w-full max-h-full object-contain"
+						/>
+					{:else}
+						<div class="flex flex-col items-center gap-2 text-slate-500 text-xs">
+							<Icon name="lucide:image-off" class="w-8 h-8 opacity-40" />
+							<span>Failed to load preview</span>
+						</div>
+					{/if}
+				</div>
+			{:else if isPdfFile(fileName)}
+				<!-- PDF preview -->
+				<div class="flex-1 h-full w-full">
+					{#if isBinaryLoading}
+						<div class="flex items-center justify-center h-full">
+							<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
+						</div>
+					{:else if pdfBlobUrl}
+						<iframe
+							src={pdfBlobUrl}
+							title={fileName}
+							class="w-full h-full border-0"
+						></iframe>
+					{:else}
+						<div class="flex flex-col items-center justify-center h-full gap-2 text-slate-500 text-xs">
+							<Icon name="lucide:file-x" class="w-8 h-8 opacity-40" />
+							<span>Failed to load PDF preview</span>
+						</div>
+					{/if}
+				</div>
+			{:else}
+				<!-- Generic binary file -->
+				<div class="flex-1 flex flex-col items-center justify-center gap-3 p-8">
+					<Icon name="lucide:file-archive" class="w-12 h-12 text-slate-400 opacity-60" />
+					<h3 class="text-sm font-semibold text-slate-700 dark:text-slate-300">Binary File</h3>
+					<p class="text-xs text-slate-500 dark:text-slate-400 text-center">
+						This file cannot be previewed in the diff viewer.
+					</p>
+				</div>
+			{/if}
+		{:else}
+			<!-- Monaco Diff Editor -->
+			<div class="flex-1 overflow-hidden">
+				<div class="h-full w-full" bind:this={containerRef}></div>
+			</div>
+		{/if}
+	{/if}
+</div>

package/frontend/lib/components/git/FileChangeItem.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import { getFileIcon } from '$frontend/lib/utils/file-icon-mappings';
+	import { getGitStatusLabel, getGitStatusColor } from '$frontend/lib/utils/git-status';
+	import type { GitFileChange } from '$shared/types/git';
+	import type { IconName } from '$shared/types/ui/icons';
+
+	interface Props {
+		file: GitFileChange;
+		section: 'staged' | 'unstaged' | 'untracked' | 'conflicted';
+		isActive?: boolean;
+		onStage?: (path: string) => void;
+		onUnstage?: (path: string) => void;
+		onDiscard?: (path: string) => void;
+		onViewDiff?: (file: GitFileChange, section: string) => void;
+		onResolve?: (path: string) => void;
+	}
+
+	const { file, section, isActive = false, onStage, onUnstage, onDiscard, onViewDiff, onResolve }: Props = $props();
+
+	const statusCode = $derived(section === 'staged' ? file.indexStatus : file.workingStatus);
+	const statusLabel = $derived(getGitStatusLabel(statusCode));
+	const statusColor = $derived(getGitStatusColor(statusCode));
+	const fileName = $derived(file.path.split(/[\\/]/).pop() || file.path);
+	const dirPath = $derived(() => {
+		const parts = file.path.split(/[\\/]/);
+		parts.pop();
+		return parts.join('/');
+	});
+	const fileIcon = $derived(getFileIcon(fileName) as IconName);
+</script>
+
+<div
+	class="group flex items-center gap-1.5 py-1.5 px-2 rounded-md cursor-pointer transition-colors
+		{isActive
+			? 'bg-violet-500/10 dark:bg-violet-500/15 text-slate-900 dark:text-slate-100'
+			: 'hover:bg-slate-100 dark:hover:bg-slate-800/60 text-slate-700 dark:text-slate-300'}"
+	role="button"
+	tabindex="0"
+	onclick={() => onViewDiff?.(file, section)}
+	onkeydown={(e) => e.key === 'Enter' && onViewDiff?.(file, section)}
+	title={file.path}
+>
+	<!-- File icon -->
+	<Icon name={fileIcon} class="w-4 h-4 shrink-0" />
+
+	<!-- File name - truncated -->
+	<span class="text-xs font-medium truncate min-w-0 flex-1">{fileName}</span>
+
+	<!-- Dir path - truncated, dimmed -->
+	{#if dirPath()}
+		<span class="text-3xs text-slate-400 dark:text-slate-500 truncate max-w-20 shrink">{dirPath()}</span>
+	{/if}
+
+	<!-- Status badge -->
+	<span class="w-4 text-center text-xs font-bold {statusColor} shrink-0">{statusLabel}</span>
+
+	<!-- Actions - always visible -->
+	<div class="flex items-center gap-0.5 shrink-0">
+		{#if section === 'staged'}
+			<button
+				type="button"
+				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 bg-transparent border-none cursor-pointer"
+				onclick={(e) => { e.stopPropagation(); onUnstage?.(file.path); }}
+				title="Unstage"
+			>
+				<Icon name="lucide:minus" class="w-3.5 h-3.5" />
+			</button>
+		{:else if section === 'unstaged' || section === 'untracked'}
+			<button
+				type="button"
+				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 bg-transparent border-none cursor-pointer"
+				onclick={(e) => { e.stopPropagation(); onDiscard?.(file.path); }}
+				title="Discard Changes"
+			>
+				<Icon name="lucide:undo-2" class="w-3.5 h-3.5" />
+			</button>
+			<button
+				type="button"
+				class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:bg-emerald-500/10 hover:text-emerald-500 transition-colors bg-transparent border-none cursor-pointer"
+				onclick={(e) => { e.stopPropagation(); onStage?.(file.path); }}
+				title="Stage Changes"
+			>
+				<Icon name="lucide:plus" class="w-3.5 h-3.5" />
+			</button>
+		{:else if section === 'conflicted'}
+			<button
+				type="button"
+				class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:bg-violet-500/10 hover:text-violet-500 transition-colors bg-transparent border-none cursor-pointer"
+				onclick={(e) => { e.stopPropagation(); onResolve?.(file.path); }}
+				title="Resolve Conflict"
+			>
+				<Icon name="lucide:wrench" class="w-3.5 h-3.5" />
+			</button>
+		{/if}
+	</div>
+</div>

package/frontend/lib/components/git/GitButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	interface Props {
+		collapsed?: boolean;
+		onClick: () => void;
+	}
+
+	const { collapsed = false, onClick }: Props = $props();
+</script>
+
+{#if collapsed}
+	<!-- Collapsed: Icon Only -->
+	<button
+		type="button"
+		class="flex items-center justify-center w-9 h-9 bg-transparent border-none rounded-lg text-slate-500 cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100 relative"
+		onclick={onClick}
+		aria-label="Source Control"
+		title="Source Control"
+	>
+		<Icon name="lucide:git-branch" class="w-5 h-5" />
+	</button>
+{:else}
+	<!-- Expanded: Full Width -->
+	<button
+		type="button"
+		class="flex items-center gap-2.5 w-full py-2.5 px-3 bg-transparent border-none rounded-lg text-slate-500 text-sm cursor-pointer transition-all duration-150 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100"
+		onclick={onClick}
+	>
+		<Icon name="lucide:git-branch" class="w-4 h-4" />
+		<span class="flex-1 text-left">Source Control</span>
+	</button>
+{/if}