@myrialabs/clopen 0.2.11 → 0.2.13

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 streams for this project
+		const cleanedStreams = terminalStreamManager.cleanupProjectStreams(data.id);
+		debug.log('project', `Cleaned up ${cleanedStreams} terminal streams 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/backend/ws/terminal/persistence.ts

@@ -33,49 +33,38 @@ export const persistenceHandler = createRouter()
 		return status;
 	})
 
-	// Get missed output
+	// Get missed output (serialized terminal state)
 	.http('terminal:missed-output', {
 		data: t.Object({
 			sessionId: t.String(),
-			streamId: t.Optional(t.String()),
-			fromIndex: t.Optional(t.Number())
+			streamId: t.Optional(t.String())
 		}),
 		response: t.Object({
 			sessionId: t.String(),
 			streamId: t.Union([t.String(), t.Null()]),
-			output: t.Array(t.String()),
-			outputCount: t.Number(),
+			output: t.String(),
 			status: t.String(),
-			fromIndex: t.Number(),
 			timestamp: t.String()
 		})
 	}, async ({ data }) => {
-		const { sessionId, streamId, fromIndex = 0 } = data;
+		const { sessionId, streamId } = data;
 
-		// Try to get output from stream manager (memory or cache)
-		let output: string[] = [];
+		// Get serialized terminal state from headless xterm
+		let output = '';
 
 		if (streamId) {
-			// If streamId is provided, get output from that specific stream
-			output = terminalStreamManager.getOutput(streamId, fromIndex);
+			output = terminalStreamManager.getSerializedOutput(streamId);
 		} else {
-			// Otherwise try to load cached output for the session
-			const cachedOutput = terminalStreamManager.loadCachedOutput(sessionId);
-			if (cachedOutput) {
-				output = cachedOutput.slice(fromIndex);
-			}
+			output = terminalStreamManager.getSerializedOutputBySession(sessionId);
 		}
 
-		// Get stream status if available
 		const streamStatus = streamId ? terminalStreamManager.getStreamStatus(streamId) : null;
 
 		return {
 			sessionId,
 			streamId: streamId || null,
 			output,
-			outputCount: output.length,
 			status: streamStatus?.status || 'unknown',
-			fromIndex,
 			timestamp: new Date().toISOString()
 		};
 	})
@@ -84,11 +73,10 @@ export const persistenceHandler = createRouter()
 	.on('terminal:reconnect', {
 		data: t.Object({
 			streamId: t.String(),
-			sessionId: t.String(),
-			fromIndex: t.Optional(t.Number())
+			sessionId: t.String()
 		})
 	}, async ({ data, conn }) => {
-		const { streamId, sessionId, fromIndex = 0 } = data;
+		const { streamId, sessionId } = data;
 		const projectId = ws.getProjectId(conn);
 
 		const stream = terminalStreamManager.getStream(streamId);
@@ -102,17 +90,15 @@ export const persistenceHandler = createRouter()
 		}
 
 		try {
-			// Broadcast missed output (frontend filters by sessionId for one-time replay)
-			const existingOutput = terminalStreamManager.getOutput(streamId, fromIndex);
-
-			if (existingOutput.length > 0) {
-				for (const output of existingOutput) {
-					ws.emit.project(projectId, 'terminal:output', {
-						sessionId,
-						content: output,
-						timestamp: new Date().toISOString()
-					});
-				}
+			// Send serialized terminal state (frontend writes it to xterm to restore)
+			const serializedOutput = terminalStreamManager.getSerializedOutput(streamId);
+
+			if (serializedOutput) {
+				ws.emit.project(projectId, 'terminal:output', {
+					sessionId,
+					content: serializedOutput,
+					timestamp: new Date().toISOString()
+				});
 			}
 
 			if (stream.status === 'active') {

package/backend/ws/terminal/session.ts

@@ -30,8 +30,7 @@ export const sessionHandler = createRouter()
 			workingDirectory: t.Optional(t.String()),
 			projectPath: t.Optional(t.String()),
 			cols: t.Optional(t.Number()),
-			rows: t.Optional(t.Number()),
-			outputStartIndex: t.Optional(t.Number())
+			rows: t.Optional(t.Number())
 		}),
 		response: t.Object({
 			sessionId: t.String(),
@@ -48,8 +47,7 @@ export const sessionHandler = createRouter()
 			workingDirectory,
 			projectPath,
 			cols = 80,
-			rows = 24,
-			outputStartIndex = 0
+			rows = 24
 		} = data;
 
 		const projectId = ws.getProjectId(conn);
@@ -120,7 +118,7 @@ export const sessionHandler = createRouter()
 			projectPath || '',
 			projectId || '',
 			streamId,
-			outputStartIndex
+			{ cols, rows }
 		);
 
 		// Broadcast initial ready event (frontend filters by sessionId)
@@ -179,20 +177,17 @@ export const sessionHandler = createRouter()
 
 		debug.log('terminal', `✅ Added fresh listeners to PTY session ${sessionId}`);
 
-		// Replay historical output for reconnection (e.g., after browser refresh)
-		// The stream preserves output from the old stream when reconnecting to the same PTY.
-		// Replay from outputStartIndex so frontend receives all output it doesn't have yet.
-		const historicalOutput = terminalStreamManager.getOutput(registeredStreamId, outputStartIndex);
-		if (historicalOutput.length > 0) {
-			debug.log('terminal', `📜 Replaying ${historicalOutput.length} historical output entries for session ${sessionId}`);
-			for (const output of historicalOutput) {
-				ws.emit.project(projectId, 'terminal:output', {
-					sessionId,
-					content: output,
-					projectId,
-					timestamp: new Date().toISOString()
-				});
-			}
+		// Replay serialized terminal state for reconnection (e.g., after browser refresh)
+		// The headless xterm preserves full terminal state including clear/scrollback
+		const serializedOutput = terminalStreamManager.getSerializedOutput(registeredStreamId);
+		if (serializedOutput) {
+			debug.log('terminal', `📜 Replaying serialized terminal state for session ${sessionId}`);
+			ws.emit.project(projectId, 'terminal:output', {
+				sessionId,
+				content: serializedOutput,
+				projectId,
+				timestamp: new Date().toISOString()
+			});
 		}
 
 		// Broadcast terminal tab created to all project users
@@ -216,6 +211,20 @@ export const sessionHandler = createRouter()
 		};
 	})
 
+	// Clear headless terminal buffer (sync with frontend clear)
+	.http('terminal:clear', {
+		data: t.Object({
+			sessionId: t.String()
+		}),
+		response: t.Object({
+			sessionId: t.String()
+		})
+	}, async ({ data }) => {
+		const { sessionId } = data;
+		terminalStreamManager.clearHeadlessTerminal(sessionId);
+		return { sessionId };
+	})
+
 	// Resize terminal viewport
 	.http('terminal:resize', {
 		data: t.Object({
@@ -239,6 +248,9 @@ export const sessionHandler = createRouter()
 			throw new Error('No active PTY session found');
 		}
 
+		// Keep headless terminal in sync with PTY dimensions
+		terminalStreamManager.resizeHeadlessTerminal(sessionId, cols, rows);
+
 		return { sessionId, cols, rows };
 	})
 
@@ -309,6 +321,12 @@ export const sessionHandler = createRouter()
 
 		debug.log('terminal', `💀 [kill-session] Successfully killed PTY session: ${sessionId} (PID: ${pid})`);
 
+		// Clean up stream and headless terminal
+		const stream = terminalStreamManager.getStreamBySession(sessionId);
+		if (stream) {
+			terminalStreamManager.removeStream(stream.streamId);
+		}
+
 		// Broadcast terminal tab closed to all project users
 		const projectId = ws.getProjectId(conn);
 		ws.emit.project(projectId, 'terminal:tab-closed', {

package/bun.lock

@@ -16,8 +16,10 @@
         "@xterm/addon-clipboard": "^0.2.0",
         "@xterm/addon-fit": "^0.11.0",
         "@xterm/addon-ligatures": "^0.10.0",
+        "@xterm/addon-serialize": "^0.14.0",
         "@xterm/addon-unicode11": "^0.9.0",
         "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/headless": "^6.0.0",
         "@xterm/xterm": "^6.0.0",
         "bun-pty": "^0.4.2",
         "cloudflared": "^0.7.1",
@@ -348,10 +350,14 @@
 
     "@xterm/addon-ligatures": ["@xterm/addon-ligatures@0.10.0", "", { "dependencies": { "font-finder": "^1.1.0", "font-ligatures": "^1.4.1" } }, "sha512-/Few8ZSHMib7sGjRJoc5l7bCtEB9XJfkNofvPpOcWADxKaUl8og8P172j67OoACSNJAXqeCLIuvj8WFCBkcTxg=="],
 
+    "@xterm/addon-serialize": ["@xterm/addon-serialize@0.14.0", "", {}, "sha512-uteyTU1EkrQa2Ux6P/uFl2fzmXI46jy5uoQMKEOM0fKTyiW7cSn0WrFenHm5vO5uEXX/GpwW/FgILvv3r0WbkA=="],
+
     "@xterm/addon-unicode11": ["@xterm/addon-unicode11@0.9.0", "", {}, "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw=="],
 
     "@xterm/addon-web-links": ["@xterm/addon-web-links@0.12.0", "", {}, "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw=="],
 
+    "@xterm/headless": ["@xterm/headless@6.0.0", "", {}, "sha512-5Yj1QINYCyzrZtf8OFIHi47iQtI+0qYFPHmouEfG8dHNxbZ9Tb9YGSuLcsEwj9Z+OL75GJqPyJbyoFer80a2Hw=="],
+
     "@xterm/xterm": ["@xterm/xterm@6.0.0", "", {}, "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg=="],
 
     "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],

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
@@ -178,10 +178,31 @@
 		}
 	});
 
+	// Resize textarea when placeholder text changes (typewriter animation) while empty
+	$effect(() => {
+		chatPlaceholder; // track placeholder changes
+		if (!messageText || !messageText.trim()) {
+			adjustTextareaHeight();
+		}
+	});
+
 	// Sync appState.isLoading from presence data (single source of truth for all users)
 	// 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