@myrialabs/clopen 0.2.11 → 0.2.12

package/backend/snapshot/snapshot-service.ts

@@ -691,6 +691,30 @@ export class SnapshotService {
 		return calculateFileChangeStats(previousSnapshot, currentSnapshot);
 	}
 
+	/**
+	 * Get all blob hashes from the in-memory baseline for a session.
+	 * Must be called BEFORE clearSessionBaseline.
+	 */
+	getSessionBaselineHashes(sessionId: string): Set<string> {
+		const baseline = this.sessionBaselines.get(sessionId);
+		if (!baseline) return new Set();
+		return new Set(Object.values(baseline));
+	}
+
+	/**
+	 * Get all blob hashes from ALL in-memory baselines (all active sessions).
+	 * Used to protect blobs still needed by other sessions during cleanup.
+	 */
+	getAllBaselineHashes(): Set<string> {
+		const hashes = new Set<string>();
+		for (const baseline of this.sessionBaselines.values()) {
+			for (const hash of Object.values(baseline)) {
+				hashes.add(hash);
+			}
+		}
+		return hashes;
+	}
+
 	/**
 	 * Clean up session baseline cache when session is no longer active.
 	 */

package/backend/terminal/stream-manager.ts

@@ -4,8 +4,9 @@
  */
 
 import type { IPty } from 'bun-pty';
-import { existsSync, mkdirSync, readFileSync, unlinkSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, readdirSync, unlinkSync } from 'fs';
 import { join } from 'path';
+import { getClopenDir } from '../utils/paths';
 
 interface TerminalStream {
   streamId: string;
@@ -25,7 +26,7 @@ interface TerminalStream {
 class TerminalStreamManager {
   private streams: Map<string, TerminalStream> = new Map();
   private sessionToStream: Map<string, string> = new Map();
-  private tempDir: string = '.terminal-output-cache';
+  private tempDir: string = join(getClopenDir(), 'terminal-cache');
 
   constructor() {
     // Create temp directory for output caching
@@ -296,6 +297,44 @@ class TerminalStreamManager {
     };
   }
   
+  /**
+   * Clean up terminal cache files for a specific project
+   */
+  cleanupProjectCache(projectId: string): number {
+    let deleted = 0;
+    try {
+      const files = readdirSync(this.tempDir);
+      for (const file of files) {
+        if (!file.endsWith('.json')) continue;
+        try {
+          const filePath = join(this.tempDir, file);
+          const data = JSON.parse(readFileSync(filePath, 'utf-8'));
+          if (data.projectId === projectId) {
+            unlinkSync(filePath);
+            deleted++;
+          }
+        } catch {
+          // Skip unreadable files
+        }
+      }
+    } catch {
+      // Directory may not exist
+    }
+
+    // Also remove in-memory streams for this project
+    for (const [streamId, stream] of this.streams) {
+      if (stream.projectId === projectId) {
+        if (stream.status === 'active' && stream.pty) {
+          try { stream.pty.kill(); } catch {}
+        }
+        this.streams.delete(streamId);
+        this.sessionToStream.delete(stream.sessionId);
+      }
+    }
+
+    return deleted;
+  }
+
   /**
    * Clean up all streams
    */

package/backend/ws/chat/stream.ts

@@ -22,11 +22,11 @@ import { sessionQueries, messageQueries } from '../../database/queries';
 // exists (e.g., after browser refresh when user is on a different project).
 // Ensures cross-project notifications (presence update, sound, push) always work.
 // ============================================================================
-streamManager.on('stream:lifecycle', (event: { status: string; streamId: string; projectId?: string; chatSessionId?: string; timestamp: string }) => {
-	const { status, projectId, chatSessionId, timestamp } = event;
+streamManager.on('stream:lifecycle', (event: { status: string; streamId: string; projectId?: string; chatSessionId?: string; timestamp: string; reason?: string }) => {
+	const { status, projectId, chatSessionId, timestamp, reason } = event;
 	if (!projectId) return;
 
-	debug.log('chat', `Stream lifecycle: ${status} for project ${projectId} session ${chatSessionId}`);
+	debug.log('chat', `Stream lifecycle: ${status} for project ${projectId} session ${chatSessionId}${reason ? ` (reason: ${reason})` : ''}`);
 
 	// Mark any tool_use blocks that never got a tool_result as interrupted (persisted to DB)
 	if (chatSessionId) {
@@ -42,7 +42,8 @@ streamManager.on('stream:lifecycle', (event: { status: string; streamId: string;
 		projectId,
 		chatSessionId: chatSessionId || '',
 		status: status as 'completed' | 'error' | 'cancelled',
-		timestamp
+		timestamp,
+		reason
 	});
 
 	// Broadcast updated presence (status indicators for all projects)
@@ -254,8 +255,11 @@ export const streamHandler = createRouter()
 							break;
 					}
 				} catch (err) {
+					// Log but do NOT unsubscribe — one bad event must not kill the
+					// entire stream subscription. The bridge between StreamManager
+					// and the WS room would be permanently broken, causing the UI
+					// to stop receiving stream output while the WS stays connected.
 					debug.error('chat', 'Error handling stream event:', err);
-					unsubscribe();
 				}
 			};
 
@@ -393,8 +397,10 @@ export const streamHandler = createRouter()
 							break;
 					}
 				} catch (err) {
+					// Log but do NOT unsubscribe — same rationale as the initial
+					// stream handler: a transient error must not permanently break
+					// the EventEmitter → WS room bridge.
 					debug.error('chat', 'Error handling reconnected stream event:', err);
-					unsubscribe();
 				}
 			};
 
@@ -789,7 +795,8 @@ export const streamHandler = createRouter()
 		projectId: t.String(),
 		chatSessionId: t.String(),
 		status: t.Union([t.Literal('completed'), t.Literal('error'), t.Literal('cancelled')]),
-		timestamp: t.String()
+		timestamp: t.String(),
+		reason: t.Optional(t.String())
 	}))
 
 	.emit('chat:waiting-input', t.Object({

package/backend/ws/engine/claude/accounts.ts

@@ -33,15 +33,13 @@ function stripAnsi(str: string): string {
 		.replace(/\x1B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g, '');
 }
 
+// Extracts the first https:// URL from PTY output.
+// Known formats (may change across Claude Code versions):
+//   - https://claude.ai/oauth/authorize?...
+//   - https://claude.com/cai/oauth/authorize?...
 function extractAuthUrl(clean: string): string | null {
-	const urlPrefix = 'https://claude.ai/oauth/authorize?';
-	const urlStart = clean.indexOf(urlPrefix);
-	if (urlStart === -1) return null;
-
-	const pasteIdx = clean.indexOf('Paste', urlStart);
-	if (pasteIdx === -1) return null;
-
-	return clean.substring(urlStart, pasteIdx).replace(/\s/g, '');
+	const match = clean.match(/https:\/\/\S+/);
+	return match ? match[0] : null;
 }
 
 function extractOAuthToken(clean: string): string | null {

package/backend/ws/projects/crud.ts

@@ -12,8 +12,14 @@
 import { t } from 'elysia';
 import { createRouter } from '$shared/utils/ws-server';
 import { initializeDatabase } from '../../database';
-import { projectQueries } from '../../database/queries';
+import { projectQueries, sessionQueries, snapshotQueries } from '../../database/queries';
 import { ws } from '$backend/utils/ws';
+import { snapshotService } from '../../snapshot/snapshot-service';
+import { blobStore } from '../../snapshot/blob-store';
+import { streamManager } from '../../chat/stream-manager';
+import { terminalStreamManager } from '../../terminal/stream-manager';
+import { broadcastPresence } from '../projects/status';
+import { debug } from '$shared/utils/logger';
 
 export const crudHandler = createRouter()
 	// List all projects for the current user
@@ -81,10 +87,11 @@ export const crudHandler = createRouter()
 		return updatedProject;
 	})
 
-	// Delete project (remove user association, cleanup if orphaned)
+	// Delete project (remove from list or full delete with sessions)
 	.http('projects:delete', {
 		data: t.Object({
-			id: t.String({ minLength: 1 })
+			id: t.String({ minLength: 1 }),
+			mode: t.Optional(t.Union([t.Literal('remove'), t.Literal('full')]))
 		}),
 		response: t.Object({
 			id: t.String(),
@@ -97,15 +104,73 @@ export const crudHandler = createRouter()
 			throw new Error('Project not found');
 		}
 
+		const mode = data.mode ?? 'remove';
+
+		// Clean up terminal cache for this project
+		const cachedTerminals = terminalStreamManager.cleanupProjectCache(data.id);
+		debug.log('project', `Cleaned up ${cachedTerminals} terminal cache files for project ${data.id}`);
+
+		if (mode === 'full') {
+			// Full delete: remove sessions with blob cleanup, then the project itself
+			const sessions = sessionQueries.getByProjectId(data.id);
+
+			if (sessions.length > 0) {
+				// Cancel active chat streams
+				await Promise.all(
+					sessions.map(s => streamManager.cleanupSessionStreams(s.id).catch(() => {}))
+				);
+
+				// Collect blob hashes before deleting
+				const baselineHashes = new Set<string>();
+				for (const s of sessions) {
+					for (const h of snapshotService.getSessionBaselineHashes(s.id)) {
+						baselineHashes.add(h);
+					}
+				}
+				const allSnapshots = snapshotQueries.getAllByProjectId(data.id);
+				const deltaHashes = snapshotQueries.collectBlobHashes(allSnapshots);
+
+				// Clear in-memory baselines
+				for (const s of sessions) {
+					snapshotService.clearSessionBaseline(s.id);
+				}
+
+				// Delete all sessions and related DB data
+				const deletedIds = sessionQueries.deleteAllByProjectId(data.id);
+
+				// GC orphaned blobs
+				const allBlobsOnDisk = await blobStore.scanAllBlobHashes();
+				const stillReferencedByDB = snapshotQueries.getAllReferencedBlobHashes();
+				const stillReferencedByMemory = snapshotService.getAllBaselineHashes();
+				const blobsToDelete = [...allBlobsOnDisk].filter(
+					h => !stillReferencedByDB.has(h) && !stillReferencedByMemory.has(h)
+				);
+				if (blobsToDelete.length > 0) {
+					const deleted = await blobStore.deleteBlobs(blobsToDelete);
+					debug.log('project', `Cleaned up ${deleted}/${blobsToDelete.length} orphaned blobs`);
+				}
+
+				// Broadcast session deletions
+				for (const sessionId of deletedIds) {
+					ws.emit.project(data.id, 'sessions:session-deleted', { sessionId, projectId: data.id });
+				}
+			}
+		}
+
 		// Remove user's association with the project
 		projectQueries.removeUserProject(userId, data.id);
 
-		// If no more users are associated, delete the project entirely
-		const remainingUsers = projectQueries.getUserCountForProject(data.id);
-		if (remainingUsers === 0) {
-			projectQueries.delete(data.id);
+		// In full mode, delete the project record if no users remain
+		// In remove mode, keep the project record so sessions can be restored
+		if (mode === 'full') {
+			const remainingUsers = projectQueries.getUserCountForProject(data.id);
+			if (remainingUsers === 0) {
+				projectQueries.deleteProject(data.id);
+			}
 		}
 
+		broadcastPresence().catch(() => {});
+
 		return {
 			id: data.id,
 			deleted: true

package/backend/ws/sessions/crud.ts

@@ -13,8 +13,12 @@
 import { t } from 'elysia';
 import { createRouter } from '$shared/utils/ws-server';
 import type { EngineType } from '$shared/types/engine';
-import { sessionQueries, messageQueries, projectQueries } from '../../database/queries';
+import { sessionQueries, messageQueries, projectQueries, snapshotQueries } from '../../database/queries';
 import { ws } from '$backend/utils/ws';
+import { streamManager } from '../../chat/stream-manager';
+import { snapshotService } from '../../snapshot/snapshot-service';
+import { blobStore } from '../../snapshot/blob-store';
+import { broadcastPresence } from '../projects/status';
 import { debug } from '$shared/utils/logger';
 
 export const crudHandler = createRouter()
@@ -293,7 +297,7 @@ export const crudHandler = createRouter()
 		};
 	})
 
-	// Delete session
+	// Delete session (with full related data cleanup)
 	.http('sessions:delete', {
 		data: t.Object({
 			id: t.String({ minLength: 1 })
@@ -309,8 +313,40 @@ export const crudHandler = createRouter()
 		}
 
 		const projectId = session.project_id;
+
+		// Cancel and clean up any active/completed streams for this session
+		await streamManager.cleanupSessionStreams(data.id);
+
+		// Collect ALL blob hashes before deleting anything:
+		// 1. In-memory baseline hashes (all project files hashed at session start)
+		const baselineHashes = snapshotService.getSessionBaselineHashes(data.id);
+		// 2. DB snapshot delta hashes (including soft-deleted snapshots)
+		const allSnapshots = snapshotQueries.getAllBySessionId(data.id);
+		const deltaHashes = snapshotQueries.collectBlobHashes(allSnapshots);
+		// Combine both sources
+		const hashesToCheck = new Set([...baselineHashes, ...deltaHashes]);
+
+		debug.log('session', `Session ${data.id}: ${baselineHashes.size} baseline hashes, ${deltaHashes.size} delta hashes, ${hashesToCheck.size} total unique`);
+
+		// Clear in-memory snapshot baseline
+		snapshotService.clearSessionBaseline(data.id);
+
+		// Delete session and all related DB data (messages, snapshots, branches, relationships, unread)
 		sessionQueries.delete(data.id);
 
+		// Clean up orphaned blobs — protect hashes still used by other active sessions
+		if (hashesToCheck.size > 0) {
+			const stillReferencedByDB = snapshotQueries.getAllReferencedBlobHashes();
+			const stillReferencedByMemory = snapshotService.getAllBaselineHashes();
+			const orphanHashes = [...hashesToCheck].filter(
+				h => !stillReferencedByDB.has(h) && !stillReferencedByMemory.has(h)
+			);
+			if (orphanHashes.length > 0) {
+				const deleted = await blobStore.deleteBlobs(orphanHashes);
+				debug.log('session', `Cleaned up ${deleted}/${orphanHashes.length} orphaned blobs`);
+			}
+		}
+
 		// Broadcast to all project members so other users see the deletion
 		debug.log('session', `Broadcasting session deleted: ${data.id} in project: ${projectId}`);
 		ws.emit.project(projectId, 'sessions:session-deleted', {
@@ -318,11 +354,92 @@ export const crudHandler = createRouter()
 			projectId
 		});
 
+		// Broadcast updated presence so status indicators reflect the deletion
+		broadcastPresence().catch(() => {});
+
 		return {
 			message: 'Session deleted successfully'
 		};
 	})
 
+	// Delete all sessions for the current project (with full cleanup)
+	.http('sessions:delete-all', {
+		data: t.Object({}),
+		response: t.Object({
+			message: t.String(),
+			deletedCount: t.Number()
+		})
+	}, async ({ conn }) => {
+		const projectId = ws.getProjectId(conn);
+
+		// Get all sessions for this project to clean up streams
+		const sessions = sessionQueries.getByProjectId(projectId);
+		if (sessions.length === 0) {
+			return { message: 'No sessions to delete', deletedCount: 0 };
+		}
+
+		// Cancel and clean up active streams for all sessions
+		await Promise.all(
+			sessions.map(s => streamManager.cleanupSessionStreams(s.id).catch(() => {}))
+		);
+
+		// Collect ALL blob hashes before deleting anything:
+		// 1. In-memory baseline hashes from all sessions
+		const baselineHashes = new Set<string>();
+		for (const s of sessions) {
+			for (const h of snapshotService.getSessionBaselineHashes(s.id)) {
+				baselineHashes.add(h);
+			}
+		}
+		// 2. DB snapshot delta hashes (including soft-deleted)
+		const allSnapshots = snapshotQueries.getAllByProjectId(projectId);
+		const deltaHashes = snapshotQueries.collectBlobHashes(allSnapshots);
+		// Combine both sources
+		const hashesToCheck = new Set([...baselineHashes, ...deltaHashes]);
+
+		debug.log('session', `Project ${projectId}: ${baselineHashes.size} baseline hashes, ${deltaHashes.size} delta hashes, ${hashesToCheck.size} total unique`);
+
+		// Clear in-memory snapshot baselines for all sessions
+		for (const s of sessions) {
+			snapshotService.clearSessionBaseline(s.id);
+		}
+
+		// Delete all sessions and related DB data (messages, snapshots, branches, relationships, unread)
+		const deletedIds = sessionQueries.deleteAllByProjectId(projectId);
+
+		// Clean up orphaned blobs using mark-and-sweep GC:
+		// Scan ALL blobs on disk, keep those still referenced by remaining DB snapshots
+		// or by in-memory baselines of other active sessions (other projects)
+		const allBlobsOnDisk = await blobStore.scanAllBlobHashes();
+		const stillReferencedByDB = snapshotQueries.getAllReferencedBlobHashes();
+		const stillReferencedByMemory = snapshotService.getAllBaselineHashes();
+
+		const blobsToDelete = [...allBlobsOnDisk].filter(
+			h => !stillReferencedByDB.has(h) && !stillReferencedByMemory.has(h)
+		);
+
+		if (blobsToDelete.length > 0) {
+			const deleted = await blobStore.deleteBlobs(blobsToDelete);
+			debug.log('session', `Cleaned up ${deleted}/${blobsToDelete.length} orphaned blobs (full GC after bulk delete)`);
+		}
+
+		// Broadcast deletion for each session so all connected users update their state
+		for (const sessionId of deletedIds) {
+			ws.emit.project(projectId, 'sessions:session-deleted', {
+				sessionId,
+				projectId
+			});
+		}
+
+		broadcastPresence().catch(() => {});
+
+		debug.log('session', `Deleted all ${deletedIds.length} sessions in project: ${projectId}`);
+		return {
+			message: `Deleted ${deletedIds.length} sessions`,
+			deletedCount: deletedIds.length
+		};
+	})
+
 	// Persist user's current session choice (for refresh restore)
 	.on('sessions:set-current', {
 		data: t.Object({

package/backend/ws/system/operations.ts

@@ -12,7 +12,7 @@ import { join } from 'node:path';
 import { readFileSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import { createRouter } from '$shared/utils/ws-server';
-import { initializeDatabase, getDatabase } from '../../database';
+import { closeDatabase, initializeDatabase } from '../../database';
 import { debug } from '$shared/utils/logger';
 import { ws } from '$backend/utils/ws';
 import { getClopenDir } from '$backend/utils/index';
@@ -143,51 +143,26 @@ export const operationsHandler = createRouter()
 			tablesCount: t.Number()
 		})
 	}, async () => {
-		debug.log('server', 'Clearing all database data...');
+		debug.log('server', 'Clearing all data...');
 
-		// Initialize database first to ensure it exists
-		await initializeDatabase();
-
-		// Get database connection
-		const db = getDatabase();
-
-		// Get all table names
-		const tables = db.prepare(`
-			SELECT name FROM sqlite_master
-			WHERE type='table'
-			AND name NOT LIKE 'sqlite_%'
-		`).all() as { name: string }[];
+		// Close database connection
+		closeDatabase();
 
-		// Delete all data from each table
-		for (const table of tables) {
-			db.prepare(`DELETE FROM ${table.name}`).run();
-			debug.log('server', `Cleared table: ${table.name}`);
-		}
+		// Delete entire clopen directory
+		const clopenDir = getClopenDir();
+		await fs.rm(clopenDir, { recursive: true, force: true });
+		debug.log('server', 'Deleted clopen directory:', clopenDir);
 
-		debug.log('server', 'Database cleared successfully');
+		// Reset environment state
+		resetEnvironment();
 
-		// Delete snapshots directory
-		const clopenDir = getClopenDir();
-		const snapshotsDir = join(clopenDir, 'snapshots');
-		try {
-			await fs.rm(snapshotsDir, { recursive: true, force: true });
-			debug.log('server', 'Snapshots directory cleared');
-		} catch (err) {
-			debug.warn('server', 'Failed to clear snapshots directory:', err);
-		}
+		// Reinitialize database from scratch (creates dir, db, migrations, seeders)
+		await initializeDatabase();
 
-		// Delete Claude config directory and reset environment state
-		const claudeDir = join(clopenDir, 'claude');
-		try {
-			await fs.rm(claudeDir, { recursive: true, force: true });
-			resetEnvironment();
-			debug.log('server', 'Claude config directory cleared');
-		} catch (err) {
-			debug.warn('server', 'Failed to clear Claude config directory:', err);
-		}
+		debug.log('server', 'All data cleared successfully');
 
 		return {
 			cleared: true,
-			tablesCount: tables.length
+			tablesCount: 0
 		};
 	});

package/frontend/components/auth/SetupPage.svelte

@@ -702,7 +702,7 @@
 													class="flex items-center gap-1 px-2.5 py-1.5 text-2xs font-medium rounded-md bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 hover:bg-violet-200 dark:hover:bg-violet-800/40 transition-colors"
 												>
 													<Icon name="lucide:external-link" class="w-3 h-3" />
-													Open
+													Open in Browser
 												</a>
 											</div>
 

package/frontend/components/chat/input/ChatInput.svelte

@@ -25,7 +25,7 @@
 	import { editModeState } from '$frontend/stores/ui/edit-mode.svelte';
 	import { claudeAccountsStore } from '$frontend/stores/features/claude-accounts.svelte';
 	import type { IconName } from '$shared/types/ui/icons';
-	import ws from '$frontend/utils/ws';
+	import ws, { onWsReconnect } from '$frontend/utils/ws';
 	import { debug } from '$shared/utils/logger';
 
 	// Components
@@ -182,6 +182,19 @@
 	// Also fetch partial text and reconnect to stream for late-joining users / refresh
 	let lastCatchupProjectId: string | undefined;
 	let lastPresenceProjectId: string | undefined;
+
+	// Reset catchup tracking on WS reconnect so catchupActiveStream re-runs.
+	// When WS briefly disconnects, the server-side cleanup removes the stream
+	// EventEmitter subscription. Without resetting, catchup won't fire again
+	// (guarded by lastCatchupProjectId) and the stream subscription is never
+	// re-established — causing stream output to silently stop in the UI.
+	onWsReconnect(() => {
+		if (lastCatchupProjectId) {
+			debug.log('chat', 'WS reconnected — resetting stream catchup tracking');
+			lastCatchupProjectId = undefined;
+		}
+	});
+
 	$effect(() => {
 		const projectId = projectState.currentProject?.id;
 		const sessionId = sessionState.currentSession?.id; // Reactive dep: retry catchup when session loads

package/frontend/components/chat/message/MessageBubble.svelte

@@ -64,6 +64,19 @@
 			}
 		});
 	});
+
+	// Force reactive tracking for assistant text streaming.
+	// Without an explicit $effect that reads partialText, Svelte 5's derived chain
+	// may not re-render the component when partialText changes on a proxied object.
+	// Reasoning gets this implicitly via the auto-scroll effect above.
+	$effect(() => {
+		if (roleCategory !== 'assistant') return;
+		if (message.type !== 'stream_event') return;
+		if (!('partialText' in message)) return;
+		// Reading partialText subscribes this effect to changes,
+		// which forces the component to re-evaluate its derived values
+		const _track = message.partialText;
+	});
 </script>
 
 <div class="relative overflow-hidden">

package/frontend/components/common/form/FolderBrowser.svelte

@@ -41,6 +41,11 @@
 	let showDeleteFolder = $state(false);
 	let folderToDelete: FileItem | null = $state(null);
 	let deleteFolderConfirmName = $state('');
+	let showHidden = $state(false);
+
+	const filteredItems = $derived(
+		showHidden ? items : items.filter(item => !item.name.startsWith('.'))
+	);
 
 	// Derived: whether directory access is restricted
 	const hasRestrictions = $derived(systemSettings.allowedBasePaths && systemSettings.allowedBasePaths.length > 0);
@@ -611,6 +616,14 @@
 					</div>
 					
 					<div class="flex items-center space-x-2">
+						<button
+							onclick={() => showHidden = !showHidden}
+							class="px-3 py-1.5 text-xs rounded-lg transition-colors {showHidden ? 'bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300' : 'bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300'}"
+							title={showHidden ? 'Hide hidden folders' : 'Show hidden folders'}
+						>
+							<Icon name={showHidden ? 'lucide:eye' : 'lucide:eye-off'} class="inline sm:mr-1" />
+							<span class="hidden sm:inline">Hidden</span>
+						</button>
 						<button
 							onclick={() => showCreateFolder = true}
 							class="px-3 py-1.5 text-xs rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-300 transition-colors"
@@ -651,24 +664,24 @@
 					</Button>
 				</div>
 			</div>
-		{:else if showLoadingSpinner && items.length === 0}
+		{:else if showLoadingSpinner && filteredItems.length === 0}
 			<div class="flex items-center justify-center py-12">
 				<div class="text-center">
 					<div class="animate-spin rounded-full h-8 w-8 border-2 border-violet-500 border-t-transparent mx-auto mb-4"></div>
 					<p class="text-slate-600 dark:text-slate-400">Loading directory...</p>
 				</div>
 			</div>
-		{:else if items.length === 0}
+		{:else if filteredItems.length === 0}
 			<div class="flex items-center justify-center py-12">
 				<div class="text-center">
 					<Icon name="lucide:folder-x" class="text-4xl text-slate-400 mx-auto mb-4" />
 					<p class="text-slate-600 dark:text-slate-400">No folders found</p>
-					<p class="text-sm text-slate-500 dark:text-slate-500 mt-2">This directory doesn't contain any subdirectories</p>
+					<p class="text-sm text-slate-500 dark:text-slate-500 mt-2">{items.length > 0 ? 'Toggle "Hidden" to show hidden folders' : 'This directory doesn\'t contain any subdirectories'}</p>
 				</div>
 			</div>
 		{:else}
 			<div class="space-y-2 transition-opacity duration-300 {loading ? 'opacity-75' : 'opacity-100'}">
-				{#each items as item (item.path)}
+				{#each filteredItems as item (item.path)}
 					<div 
 						class="flex items-center space-x-3 py-3 px-4 rounded-xl border transition-all duration-200 cursor-pointer {selectedPath === item.path 
 							? 'bg-violet-50 dark:bg-violet-900/20 border-violet-200 dark:border-violet-700'