@myrialabs/clopen 0.2.4 → 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/DiffViewer.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { onMount, onDestroy, untrack } from 'svelte';
+	import { onDestroy, untrack } from 'svelte';
 	import Icon from '$frontend/components/common/display/Icon.svelte';
+	import MediaPreview from '$frontend/components/common/media/MediaPreview.svelte';
 	import { getFileIcon } from '$frontend/utils/file-icon-mappings';
+	import { isPreviewableFile } from '$frontend/utils/file-type';
 	import { getGitStatusBadgeLabel, getGitStatusBadgeColor } from '$frontend/utils/git-status';
 	import { themeStore } from '$frontend/stores/ui/theme.svelte';
 	import { projectState } from '$frontend/stores/core/projects.svelte';
@@ -11,7 +13,8 @@
 	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/utils/ws';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
 
 	interface Props {
 		diff: GitFileDiff | null;
@@ -32,91 +35,21 @@
 	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) {
+	// Derive absolute path for binary preview
+	const binaryPreviewPath = $derived.by(() => {
+		if (!activeDiff?.isBinary || activeDiff.status === 'D') return null;
+		const filePath = activeDiff.newPath || activeDiff.oldPath;
+		if (!filePath) return null;
+		const fileName = getFileName(filePath);
+		if (!isPreviewableFile(fileName)) return null;
 		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;
-		}
-	}
+		if (!projectPath) return null;
+		return `${projectPath}/${filePath}`;
+	});
 
-	// 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());
-		}
+	const binaryFileName = $derived.by(() => {
+		if (!activeDiff) return '';
+		return getFileName(activeDiff.newPath || activeDiff.oldPath);
 	});
 
 	// Build full content from hunks
@@ -162,6 +95,19 @@
 		return path.split(/[\\/]/).pop() || path;
 	}
 
+	function openInFilesPanel() {
+		if (!activeDiff) return;
+		const visiblePanels = getVisiblePanels(workspaceState.layout);
+		if (!visiblePanels.includes('files')) return;
+		const basePath = projectState.currentProject?.path;
+		if (!basePath) return;
+		const relativePath = activeDiff.newPath || activeDiff.oldPath;
+		const separator = basePath.includes('\\') ? '\\' : '/';
+		requestRevealFile(`${basePath}${separator}${relativePath}`);
+	}
+
+	const isFilesPanelVisible = $derived(getVisiblePanels(workspaceState.layout).includes('files'));
+
 	async function initDiffEditor() {
 		if (!containerRef || !activeDiff) return;
 
@@ -273,7 +219,6 @@
 			diffEditorInstance.dispose();
 			diffEditorInstance = null;
 		}
-		cleanupBlobUrls();
 	});
 </script>
 
@@ -288,20 +233,30 @@
 			<span>Select a file to view diff</span>
 		</div>
 	{:else}
-		<!-- File header (like FileViewer) -->
+		<!-- File header -->
 		<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="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+				<Icon name={getFileIcon(getFileName(activeDiff.newPath || activeDiff.oldPath)) as IconName} class="w-7 h-7 shrink-0" />
 				<div class="min-w-0 flex-1">
-					<h3 class="text-xs font-bold text-slate-900 dark:text-slate-100 truncate">
+					<h3 class="text-xs sm:text-sm 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">
+					<p class="text-xs text-slate-600 dark:text-slate-400 truncate mt-0.5">
 						{activeDiff.newPath || activeDiff.oldPath}
 					</p>
 				</div>
 			</div>
-			<div class="flex items-center gap-2 shrink-0">
+			<div class="flex items-center gap-1.5 sm:gap-1 flex-shrink-0">
+				{#if isFilesPanelVisible && activeDiff.status !== 'D'}
+					<button
+						type="button"
+						class="flex p-2 text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30 rounded-lg transition-all duration-200 cursor-pointer"
+						onclick={openInFilesPanel}
+						title="Open in Files panel"
+					>
+						<Icon name="lucide:file-symlink" class="w-4 h-4" />
+					</button>
+				{/if}
 				<span class="text-3xs font-bold px-1.5 py-0.5 rounded {getGitStatusBadgeColor(activeDiff.status)}">
 					{getGitStatusBadgeLabel(activeDiff.status)}
 				</span>
@@ -309,7 +264,6 @@
 		</div>
 
 		{#if activeDiff.isBinary}
-			{@const fileName = getFileName(activeDiff.newPath || activeDiff.oldPath)}
 			{@const isDeleted = activeDiff.status === 'D'}
 			{#if isDeleted}
 				<!-- Deleted binary file -->
@@ -320,43 +274,9 @@
 						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}
+			{:else if binaryPreviewPath}
+				<div class="flex-1 overflow-hidden">
+					<MediaPreview fileName={binaryFileName} filePath={binaryPreviewPath} />
 				</div>
 			{:else}
 				<!-- Generic binary file -->

package/frontend/components/git/FileChangeItem.svelte

@@ -4,6 +4,9 @@
 	import { getGitStatusLabel, getGitStatusColor } from '$frontend/utils/git-status';
 	import type { GitFileChange } from '$shared/types/git';
 	import type { IconName } from '$shared/types/ui/icons';
+	import { requestRevealFile } from '$frontend/stores/core/files.svelte';
+	import { getVisiblePanels, workspaceState } from '$frontend/stores/ui/workspace.svelte';
+	import { projectState } from '$frontend/stores/core/projects.svelte';
 
 	interface Props {
 		file: GitFileChange;
@@ -28,6 +31,15 @@
 		return parts.join('/');
 	});
 	const fileIcon = $derived(getFileIcon(fileName) as IconName);
+	const isFilesPanelVisible = $derived(getVisiblePanels(workspaceState.layout).includes('files'));
+
+	function openInFilesPanel(e: MouseEvent) {
+		e.stopPropagation();
+		const basePath = projectState.currentProject?.path;
+		if (!basePath) return;
+		const separator = basePath.includes('\\') ? '\\' : '/';
+		requestRevealFile(`${basePath}${separator}${file.path}`);
+	}
 </script>
 
 <div
@@ -57,6 +69,16 @@
 
 	<!-- Actions - always visible -->
 	<div class="flex items-center gap-0.5 shrink-0">
+		{#if isFilesPanelVisible && statusCode !== 'D'}
+			<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={openInFilesPanel}
+				title="Open in Files panel"
+			>
+				<Icon name="lucide:file-symlink" class="w-3.5 h-3.5" />
+			</button>
+		{/if}
 		{#if section === 'staged'}
 			<button
 				type="button"

package/frontend/components/workspace/DesktopNavigator.svelte

@@ -26,6 +26,9 @@
 	let projectToDelete = $state<Project | null>(null);
 	let searchQuery = $state('');
 	let showTunnelModal = $state(false);
+	let hoveredProject = $state<Project | null>(null);
+	let tooltipY = $state(0);
+	let tooltipX = $state(0);
 
 	// Derived
 	const isCollapsed = $derived(workspaceState.navigatorCollapsed);
@@ -145,6 +148,17 @@
 		// Single word: take first 2 letters
 		return name.substring(0, 2).toUpperCase();
 	}
+
+	function showProjectTooltip(project: Project, event: MouseEvent) {
+		const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+		tooltipX = rect.right + 8;
+		tooltipY = rect.top + rect.height / 2;
+		hoveredProject = project;
+	}
+
+	function hideProjectTooltip() {
+		hoveredProject = null;
+	}
 </script>
 
 <!-- Project Navigator Sidebar -->
@@ -315,7 +329,8 @@
 							? 'bg-violet-500/10 dark:bg-violet-500/20 text-violet-700 dark:text-violet-300'
 							: 'bg-slate-200/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-400 hover:bg-violet-500/10 hover:text-slate-900 dark:hover:text-slate-100'}"
 						onclick={() => selectProject(project)}
-						title={project.name}
+						onmouseenter={(e) => showProjectTooltip(project, e)}
+						onmouseleave={hideProjectTooltip}
 					>
 						<span>{getProjectInitials(project.name)}</span>
 						<span
@@ -349,6 +364,17 @@
 	</nav>
 </aside>
 
+<!-- Collapsed project tooltip (fixed position to avoid overflow clipping) -->
+{#if hoveredProject}
+	<div
+		class="fixed z-50 pointer-events-none flex flex-col py-1.5 px-2.5 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-slate-600 shadow-lg whitespace-nowrap"
+		style="left: {tooltipX}px; top: {tooltipY}px; transform: translateY(-50%);"
+	>
+		<span class="text-xs font-semibold text-slate-900 dark:text-slate-100">{hoveredProject.name}</span>
+		<span class="text-3xs font-mono text-slate-500 dark:text-slate-400">{hoveredProject.path}</span>
+	</div>
+{/if}
+
 <!-- Folder Browser (includes its own Modal) -->
 <FolderBrowser
 	bind:isOpen={showFolderBrowser}

package/frontend/components/workspace/WorkspaceLayout.svelte

@@ -28,6 +28,7 @@
 	import { initializeSessions } from '$frontend/stores/core/sessions.svelte';
 	import { initializeNotifications, notificationStore } from '$frontend/stores/ui/notification.svelte';
 	import { applyServerSettings, loadSystemSettings } from '$frontend/stores/features/settings.svelte';
+	import { applyTodoPanelState } from '$frontend/stores/ui/todo-panel.svelte';
 	import { initPresence } from '$frontend/stores/core/presence.svelte';
 	import ws from '$frontend/utils/ws';
 	import { debug } from '$shared/utils/logger';
@@ -84,7 +85,7 @@
 
 			// Step 3: Restore user state from server
 			setProgress(30, 'Restoring state...');
-			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any; unreadSessions: any } | null = null;
+			let serverState: { currentProjectId: string | null; lastView: string | null; settings: any; unreadSessions: any; todoPanelState: any } | null = null;
 			try {
 				serverState = await ws.http('user:restore-state', {});
 				debug.log('workspace', 'Server state restored:', serverState);
@@ -97,6 +98,7 @@
 			if (serverState?.settings) {
 				applyServerSettings(serverState.settings);
 			}
+			applyTodoPanelState(serverState?.todoPanelState);
 			restoreLastView(serverState?.lastView);
 			restoreUnreadSessions(serverState?.unreadSessions);
 			await loadSystemSettings();