@myrialabs/clopen 0.0.6 → 0.0.8

package/.env.example

@@ -3,4 +3,10 @@ NODE_ENV=production
 
 # Server configuration
 HOST=localhost
-PORT=9141
+
+# Production port (single port — Elysia serves everything)
+PORT=9141
+
+# Development ports (two ports — Vite proxies to Elysia)
+PORT_BACKEND=9151
+PORT_FRONTEND=9141

package/backend/index.ts

@@ -11,7 +11,7 @@ import { loggerMiddleware } from './middleware/logger';
 import { initializeDatabase, closeDatabase } from './lib/database';
 import { disposeAllEngines } from './lib/engine';
 import { debug } from '$shared/utils/logger';
-import { isPortInUse } from './lib/shared/port-utils';
+import { findAvailablePort } from './lib/shared/port-utils';
 import { networkInterfaces } from 'os';
 import { resolve } from 'node:path';
 import { statSync } from 'node:fs';
@@ -22,9 +22,8 @@ import { wsRouter } from './ws';
 /**
  * Clopen - Elysia Backend Server
  *
- * Single port: 9141 for everything.
- * Development: Vite embedded as middleware (no separate server)
- * Production: Serves frontend static files + API
+ * Development: Elysia runs on port 9151, Vite dev server proxies /api and /ws from port 9141
+ * Production: Elysia runs on port 9141, serves static files from dist/ + API + WebSocket
  */
 
 function getLocalIps(): string[] {
@@ -48,8 +47,8 @@ const app = new Elysia()
 	.use(errorHandlerMiddleware)
 	.use(loggerMiddleware)
 
-	// Health check endpoint
-	.get('/health', () => ({
+	// API routes
+	.get('/api/health', () => ({
 		status: 'ok',
 		timestamp: new Date().toISOString(),
 		environment: SERVER_ENV.NODE_ENV
@@ -58,20 +57,11 @@ const app = new Elysia()
 	// Mount WebSocket router (all functionality now via WebSocket)
 	.use(wsRouter.asPlugin('/ws'));
 
-if (isDevelopment) {
-	// Development: Embed Vite as middleware — no separate port
-	// Uses Vite's direct APIs (transformIndexHtml, transformRequest) for speed,
-	// with Node.js compat middleware only as fallback for edge cases.
-	const { initViteDev, handleDevRequest, closeViteDev } = await import('./lib/vite-dev');
-	const vite = await initViteDev();
-
-	app.all('/*', async ({ request }) => handleDevRequest(vite, request));
-
-	// Store cleanup function for graceful shutdown
-	(globalThis as any).__closeViteDev = closeViteDev;
-} else {
-	// Production: Read index.html once at startup as a string so Content-Length
-	// is always correct. Bun.file() streaming can hang on some platforms.
+if (!isDevelopment) {
+	// Production: serve static files manually instead of @elysiajs/static.
+	// The static plugin tries to serve directories (like /) as files via Bun.file(),
+	// which hangs on some devices/platforms. Using statSync to verify the path is
+	// an actual file before serving avoids this issue.
 	const distDir = resolve(process.cwd(), 'dist');
 	const indexHtml = await Bun.file(resolve(distDir, 'index.html')).text();
 
@@ -93,15 +83,14 @@ if (isDevelopment) {
 			headers: { 'Content-Type': 'text/html; charset=utf-8' }
 		});
 	});
-
 }
 
 // Start server with proper initialization sequence
 async function startServer() {
-	// Strict check: refuse to start if port is already in use
-	if (await isPortInUse(PORT)) {
-		console.error(`❌ Port ${PORT} is already in use. Please close the existing process first.`);
-		process.exit(1);
+	// Find available port — auto-increment if desired port is in use
+	const actualPort = await findAvailablePort(PORT);
+	if (actualPort !== PORT) {
+		debug.log('server', `⚠️ Port ${PORT} in use, using ${actualPort} instead`);
 	}
 
 	// Initialize database first before accepting connections
@@ -114,14 +103,14 @@ async function startServer() {
 
 	// Start listening after database is ready
 	app.listen({
-		port: PORT,
+		port: actualPort,
 		hostname: HOST
 	}, () => {
-		console.log(`🚀 Clopen running at http://localhost:${PORT}`);
+		console.log(`🚀 Clopen running at http://localhost:${actualPort}`);
 		if (HOST === '0.0.0.0') {
 			const ips = getLocalIps();
 			for (const ip of ips) {
-				console.log(`🌐 Network access: http://${ip}:${PORT}`);
+				console.log(`🌐 Network access: http://${ip}:${actualPort}`);
 			}
 		}
 	});
@@ -136,10 +125,6 @@ startServer().catch((error) => {
 async function gracefulShutdown() {
 	console.log('\n🛑 Shutting down server...');
 	try {
-		// Close Vite dev server if running
-		if (isDevelopment && (globalThis as any).__closeViteDev) {
-			await (globalThis as any).__closeViteDev();
-		}
 		// Dispose all AI engines
 		await disposeAllEngines();
 		// Stop accepting new connections

package/backend/lib/shared/env.ts

@@ -18,11 +18,18 @@ import { readFileSync } from 'fs';
 import { join } from 'path';
 
 // ── Server configuration (read once at import time) ─────────────────
+const isDev = process.env.NODE_ENV !== 'production';
+
 export const SERVER_ENV = {
 	NODE_ENV: (process.env.NODE_ENV || 'development') as string,
-	PORT: process.env.PORT ? parseInt(process.env.PORT) : 9141,
+	/** Backend port — dev: PORT_BACKEND (default 9151), prod: PORT (default 9141) */
+	PORT: isDev
+		? (process.env.PORT_BACKEND ? parseInt(process.env.PORT_BACKEND) : 9151)
+		: (process.env.PORT ? parseInt(process.env.PORT) : 9141),
+	/** Frontend port — only used in dev for Vite proxy coordination */
+	PORT_FRONTEND: process.env.PORT_FRONTEND ? parseInt(process.env.PORT_FRONTEND) : 9141,
 	HOST: (process.env.HOST || 'localhost') as string,
-	isDevelopment: process.env.NODE_ENV !== 'production',
+	isDevelopment: isDev,
 } as const;
 
 // ── .env parsing ────────────────────────────────────────────────────

package/backend/lib/shared/port-utils.ts

@@ -23,3 +23,13 @@ export async function isPortInUse(port: number): Promise<boolean> {
 		return false; // Connection refused = port is free
 	}
 }
+
+/** Find an available port starting from the given port, incrementing on collision */
+export async function findAvailablePort(startPort: number, maxAttempts = 8): Promise<number> {
+	let port = startPort;
+	for (let i = 0; i < maxAttempts; i++) {
+		if (!(await isPortInUse(port))) return port;
+		port++;
+	}
+	throw new Error(`No available port found starting from ${startPort} (tried ${maxAttempts} ports)`);
+}

package/backend/lib/terminal/stream-manager.ts

@@ -49,17 +49,20 @@ class TerminalStreamManager {
   ): string {
     // Check if there's already a stream for this session
     const existingStreamId = this.sessionToStream.get(sessionId);
+    let preservedOutput: string[] = [];
     if (existingStreamId) {
       const existingStream = this.streams.get(existingStreamId);
       if (existingStream) {
-        // Clean up existing stream first
         if (existingStream.pty && existingStream.pty !== pty) {
-          // If it's a different PTY, kill the old one
+          // Different PTY, kill the old one
           try {
             existingStream.pty.kill();
           } catch (error) {
             // Ignore error if PTY already killed
           }
+        } else if (existingStream.pty === pty) {
+          // Same PTY (reconnection after browser refresh) - preserve output buffer
+          preservedOutput = [...existingStream.output];
         }
         // Remove the old stream
         this.streams.delete(existingStreamId);
@@ -79,7 +82,7 @@ class TerminalStreamManager {
       workingDirectory,
       projectPath,
       projectId,
-      output: [],
+      output: preservedOutput,
       processId: pty.pid,
       outputStartIndex: outputStartIndex || 0
     };

package/backend/ws/terminal/session.ts

@@ -179,6 +179,22 @@ 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()
+				});
+			}
+		}
+
 		// Broadcast terminal tab created to all project users
 		ws.emit.project(projectId, 'terminal:tab-created', {
 			sessionId,
@@ -379,4 +395,36 @@ export const sessionHandler = createRouter()
 				message: 'PTY not found'
 			};
 		}
+	})
+
+	// List active PTY sessions for a project
+	// Used after browser refresh to discover existing sessions
+	.http('terminal:list-sessions', {
+		data: t.Object({
+			projectId: t.String()
+		}),
+		response: t.Object({
+			sessions: t.Array(t.Object({
+				sessionId: t.String(),
+				pid: t.Number(),
+				cwd: t.String(),
+				createdAt: t.String(),
+				lastActivityAt: t.String()
+			}))
+		})
+	}, async ({ data }) => {
+		const { projectId } = data;
+
+		const allSessions = ptySessionManager.getAllSessions();
+		const projectSessions = allSessions
+			.filter(session => session.projectId === projectId)
+			.map(session => ({
+				sessionId: session.sessionId,
+				pid: session.pty.pid,
+				cwd: session.cwd,
+				createdAt: session.createdAt.toISOString(),
+				lastActivityAt: session.lastActivityAt.toISOString()
+			}));
+
+		return { sessions: projectSessions };
 	});

package/bun.lock

@@ -8,7 +8,6 @@
         "@anthropic-ai/claude-agent-sdk": "^0.2.7",
         "@anthropic-ai/sdk": "^0.62.0",
         "@elysiajs/cors": "^1.4.0",
-        "@elysiajs/static": "^1.4.7",
         "@iconify-json/lucide": "^1.2.57",
         "@iconify-json/material-icon-theme": "^1.2.16",
         "@modelcontextprotocol/sdk": "^1.26.0",
@@ -45,6 +44,7 @@
         "@types/bun": "^1.2.18",
         "@types/qrcode": "^1.5.6",
         "@types/xterm": "^3.0.0",
+        "concurrently": "^9.2.1",
         "eslint": "^9.31.0",
         "eslint-plugin-svelte": "^3.10.1",
         "globals": "^16.3.0",
@@ -76,8 +76,6 @@
 
     "@elysiajs/cors": ["@elysiajs/cors@1.4.0", "", { "peerDependencies": { "elysia": ">= 1.4.0" } }, "sha512-pb0SCzBfFbFSYA/U40HHO7R+YrcXBJXOWgL20eSViK33ol1e20ru2/KUaZYo5IMUn63yaTJI/bQERuQ+77ND8g=="],
 
-    "@elysiajs/static": ["@elysiajs/static@1.4.7", "", { "peerDependencies": { "elysia": ">= 1.4.0" } }, "sha512-Go4kIXZ0G3iWfkAld07HmLglqIDMVXdyRKBQK/sVEjtpDdjHNb+rUIje73aDTWpZYg4PEVHUpi9v4AlNEwrQug=="],
-
     "@emnapi/runtime": ["@emnapi/runtime@1.4.5", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg=="],
 
     "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.8", "", { "os": "aix", "cpu": "ppc64" }, "sha512-urAvrUedIqEiFR3FYSLTWQgLu5tb+m0qZw0NBEasUeo6wuqatkMDaRT+1uABiGXEu5vqgPd7FGE1BhsAIy9QVA=="],
@@ -488,7 +486,7 @@
 
     "chromium-bidi": ["chromium-bidi@11.0.0", "", { "dependencies": { "mitt": "^3.0.1", "zod": "^3.24.1" }, "peerDependencies": { "devtools-protocol": "*" } }, "sha512-cM3DI+OOb89T3wO8cpPSro80Q9eKYJ7hGVXoGS3GkDPxnYSqiv+6xwpIf6XERyJ9Tdsl09hmNmY94BkgZdVekw=="],
 
-    "cliui": ["cliui@6.0.0", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^6.2.0" } }, "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="],
+    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
 
     "cloudflared": ["cloudflared@0.7.1", "", { "bin": { "cloudflared": "lib/cloudflared.js" } }, "sha512-jJn1Gu9Tf4qnIu8tfiHZ25Hs8rNcRYSVf8zAd97wvYdOCzftm1CTs1S/RPhijjGi8gUT1p9yzfDi9zYlU/0RwA=="],
 
@@ -506,6 +504,8 @@
 
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
+    "concurrently": ["concurrently@9.2.1", "", { "dependencies": { "chalk": "4.1.2", "rxjs": "7.8.2", "shell-quote": "1.8.3", "supports-color": "8.1.1", "tree-kill": "1.2.2", "yargs": "17.7.2" }, "bin": { "conc": "dist/bin/concurrently.js", "concurrently": "dist/bin/concurrently.js" } }, "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng=="],
+
     "content-disposition": ["content-disposition@1.0.1", "", {}, "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q=="],
 
     "content-type": ["content-type@1.0.5", "", {}, "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="],
@@ -1008,6 +1008,8 @@
 
     "rx.mini": ["rx.mini@1.4.0", "", {}, "sha512-8w5cSc1mwNja7fl465DXOkVvIOkpvh2GW4jo31nAIvX4WTXCsRnKJGUfiDBzWtYRInEcHAUYIZfzusjIrea8gA=="],
 
+    "rxjs": ["rxjs@7.8.2", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA=="],
+
     "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],
 
     "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
@@ -1030,6 +1032,8 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
+    "shell-quote": ["shell-quote@1.8.3", "", {}, "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="],
+
     "side-channel": ["side-channel@1.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3", "side-channel-list": "^1.0.0", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" } }, "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw=="],
 
     "side-channel-list": ["side-channel-list@1.0.0", "", { "dependencies": { "es-errors": "^1.3.0", "object-inspect": "^1.13.3" } }, "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA=="],
@@ -1070,7 +1074,7 @@
 
     "strtok3": ["strtok3@10.3.4", "", { "dependencies": { "@tokenizer/token": "^0.3.0" } }, "sha512-KIy5nylvC5le1OdaaoCJ07L+8iQzJHGH6pWDuzS+d07Cu7n1MZ2x26P8ZKIWfbK02+XIL8Mp4RkWeqdUCrDMfg=="],
 
-    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+    "supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
 
     "svelte": ["svelte@5.36.12", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-c3mWT+b0yBLl3gPGSHiy4pdSQCsPNTjLC0tVoOhrGJ6PPfCzD/RQpAmAfJtQZ304CAae2ph+L3C4aqds3R3seQ=="],
 
@@ -1102,6 +1106,8 @@
 
     "token-types": ["token-types@6.0.4", "", { "dependencies": { "@tokenizer/token": "^0.3.0", "ieee754": "^1.2.1" } }, "sha512-MD9MjpVNhVyH4fyd5rKphjvt/1qj+PtQUz65aFqAZA6XniWAuSFRjLk3e2VALEFlh9OwBpXUN7rfeqSnT/Fmkw=="],
 
+    "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
+
     "ts-api-utils": ["ts-api-utils@2.1.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -1162,7 +1168,7 @@
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
 
-    "wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],
+    "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
     "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
 
@@ -1170,15 +1176,15 @@
 
     "xterm": ["xterm@5.3.0", "", {}, "sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg=="],
 
-    "y18n": ["y18n@4.0.3", "", {}, "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="],
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
 
     "yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
 
     "yaml": ["yaml@1.10.2", "", {}, "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="],
 
-    "yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],
+    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
-    "yargs-parser": ["yargs-parser@18.1.3", "", { "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" } }, "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ=="],
+    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
 
     "yauzl": ["yauzl@2.10.0", "", { "dependencies": { "buffer-crc32": "~0.2.3", "fd-slicer": "~1.1.0" } }, "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g=="],
 
@@ -1218,8 +1224,6 @@
 
     "@puppeteer/browsers/tar-fs": ["tar-fs@3.1.1", "", { "dependencies": { "pump": "^3.0.0", "tar-stream": "^3.1.5" }, "optionalDependencies": { "bare-fs": "^4.0.1", "bare-path": "^3.0.0" } }, "sha512-LZA0oaPOc2fVo82Txf3gw+AkEd38szODlptMYejQUhndHMLQ9M059uXR+AfS7DNo0NpINvSqDsvyaCrBVkptWg=="],
 
-    "@puppeteer/browsers/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
-
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.4.5", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.4", "tslib": "^2.4.0" }, "bundled": true }, "sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.4.5", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg=="],
@@ -1250,6 +1254,8 @@
 
     "body-parser/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "chalk/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
     "eslint/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
 
     "express/cookie": ["cookie@0.7.2", "", {}, "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="],
@@ -1280,6 +1286,8 @@
 
     "puppeteer-core/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "qrcode/yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],
+
     "rc/strip-json-comments": ["strip-json-comments@2.0.1", "", {}, "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ=="],
 
     "router/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
@@ -1322,32 +1330,32 @@
 
     "werift-ice/debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
-    "yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
-
     "yauzl/buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="],
 
     "@modelcontextprotocol/sdk/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
 
     "@puppeteer/browsers/tar-fs/tar-stream": ["tar-stream@3.1.7", "", { "dependencies": { "b4a": "^1.6.4", "fast-fifo": "^1.2.0", "streamx": "^2.15.0" } }, "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ=="],
 
-    "@puppeteer/browsers/yargs/cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
-
-    "@puppeteer/browsers/yargs/y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
-
-    "@puppeteer/browsers/yargs/yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
-
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
 
     "ajv-formats/ajv/json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
 
-    "yargs/find-up/locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
+    "qrcode/yargs/cliui": ["cliui@6.0.0", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^6.2.0" } }, "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="],
+
+    "qrcode/yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
+
+    "qrcode/yargs/y18n": ["y18n@4.0.3", "", {}, "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="],
+
+    "qrcode/yargs/yargs-parser": ["yargs-parser@18.1.3", "", { "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" } }, "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ=="],
+
+    "qrcode/yargs/cliui/wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],
 
-    "@puppeteer/browsers/yargs/cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+    "qrcode/yargs/find-up/locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
 
-    "yargs/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
+    "qrcode/yargs/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
 
-    "yargs/find-up/locate-path/p-locate/p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
+    "qrcode/yargs/find-up/locate-path/p-locate/p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
   }
 }

package/frontend/lib/services/terminal/project.service.ts

@@ -98,28 +98,83 @@ class TerminalProjectManager {
 
 	/**
 	 * Create initial terminal sessions for a project
+	 * First checks backend for existing PTY sessions (e.g., after browser refresh)
 	 */
 	private async createProjectTerminalSessions(projectId: string, projectPath: string): Promise<void> {
-		// Creating terminal session for project
-		
 		const context = this.getOrCreateProjectContext(projectId, projectPath);
-		
-		// Create only 1 terminal session by default with correct project path and projectId
+
+		// Check backend for existing PTY sessions (survives browser refresh)
+		const existingBackendSessions = await terminalService.listProjectSessions(projectId);
+
+		if (existingBackendSessions.length > 0) {
+			debug.log('terminal', `Found ${existingBackendSessions.length} existing PTY sessions for project ${projectId}`);
+
+			// Sort by sessionId to maintain consistent order (terminal-1, terminal-2, etc.)
+			existingBackendSessions.sort((a, b) => a.sessionId.localeCompare(b.sessionId));
+
+			// Restore all existing sessions as tabs
+			for (const backendSession of existingBackendSessions) {
+				const sessionParts = backendSession.sessionId.split('-');
+				const terminalNumber = sessionParts[sessionParts.length - 1] || '1';
+
+				const terminalSession: TerminalSession = {
+					id: backendSession.sessionId,
+					name: `Terminal ${terminalNumber}`,
+					directory: backendSession.cwd || projectPath,
+					lines: [],
+					commandHistory: [],
+					isActive: false,
+					createdAt: new Date(backendSession.createdAt),
+					lastUsedAt: new Date(backendSession.lastActivityAt),
+					shellType: 'Unknown',
+					terminalBuffer: undefined,
+					projectId: projectId,
+					projectPath: projectPath
+				};
+
+				terminalStore.addSession(terminalSession);
+				terminalSessionManager.createSession(backendSession.sessionId, projectId, projectPath, backendSession.cwd || projectPath);
+				context.sessionIds.push(backendSession.sessionId);
+
+				// Update nextSessionId to avoid ID conflicts
+				const match = backendSession.sessionId.match(/terminal-(\d+)/);
+				if (match) {
+					terminalStore.updateNextSessionId(parseInt(match[1], 10) + 1);
+				}
+			}
+
+			// Restore previously active session from sessionStorage, or default to first
+			let activeSessionId = existingBackendSessions[0].sessionId;
+			if (typeof sessionStorage !== 'undefined') {
+				try {
+					const savedActiveId = sessionStorage.getItem(`terminal-active-session-${projectId}`);
+					if (savedActiveId && context.sessionIds.includes(savedActiveId)) {
+						activeSessionId = savedActiveId;
+					}
+				} catch {
+					// sessionStorage not available
+				}
+			}
+			context.activeSessionId = activeSessionId;
+			terminalStore.switchToSession(context.activeSessionId);
+			this.persistContexts();
+			return;
+		}
+
+		// No existing backend sessions, create 1 new terminal session
 		const sessionId = terminalStore.createNewSession(projectPath, projectPath, projectId);
-		
-		// Update the session's directory to ensure it's correct
+
 		const session = terminalStore.getSession(sessionId);
 		if (session) {
 			session.directory = projectPath;
 		}
-		
-		// Create a fresh session in terminalSessionManager with correct project association
+
 		terminalSessionManager.createSession(sessionId, projectId, projectPath, projectPath);
-		
+
 		context.sessionIds.push(sessionId);
 		context.activeSessionId = sessionId;
 		terminalStore.switchToSession(sessionId);
-		
+
 		this.persistContexts();
 	}
 

package/frontend/lib/services/terminal/terminal.service.ts

@@ -339,6 +339,25 @@ export class TerminalService {
 		}
 	}
 
+	/**
+	 * List active PTY sessions for a project on the backend
+	 * Used after browser refresh to discover existing sessions
+	 */
+	async listProjectSessions(projectId: string): Promise<Array<{
+		sessionId: string;
+		pid: number;
+		cwd: string;
+		createdAt: string;
+		lastActivityAt: string;
+	}>> {
+		try {
+			const data = await ws.http('terminal:list-sessions', { projectId }, 5000);
+			return data.sessions || [];
+		} catch {
+			return [];
+		}
+	}
+
 	/**
 	 * Cleanup listeners for a session
 	 */

package/frontend/lib/stores/features/terminal.svelte.ts

@@ -138,6 +138,16 @@ export const terminalStore = {
 		}));
 
 		terminalState.activeSessionId = sessionId;
+
+		// Persist active session ID for restoration after browser refresh
+		const session = terminalState.sessions.find(s => s.id === sessionId);
+		if (session?.projectId && typeof sessionStorage !== 'undefined') {
+			try {
+				sessionStorage.setItem(`terminal-active-session-${session.projectId}`, sessionId);
+			} catch {
+				// sessionStorage not available
+			}
+		}
 	},
 
 	async closeSession(sessionId: string): Promise<boolean> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "author": "Myria Labs",
   "license": "MIT",
@@ -45,9 +45,11 @@
     "bun": ">=1.2.12"
   },
   "scripts": {
-    "dev": "bun --watch backend/index.ts",
+    "dev": "bun scripts/dev.ts",
+    "dev:backend": "bun --watch backend/index.ts",
+    "dev:frontend": "bunx vite dev",
     "build": "vite build",
-    "start": "bun backend/index.ts",
+    "start": "NODE_ENV=production bun backend/index.ts",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -60,6 +62,7 @@
     "@types/bun": "^1.2.18",
     "@types/qrcode": "^1.5.6",
     "@types/xterm": "^3.0.0",
+    "concurrently": "^9.2.1",
     "eslint": "^9.31.0",
     "eslint-plugin-svelte": "^3.10.1",
     "globals": "^16.3.0",
@@ -74,7 +77,6 @@
     "@anthropic-ai/claude-agent-sdk": "^0.2.7",
     "@anthropic-ai/sdk": "^0.62.0",
     "@elysiajs/cors": "^1.4.0",
-    "@elysiajs/static": "^1.4.7",
     "@iconify-json/lucide": "^1.2.57",
     "@iconify-json/material-icon-theme": "^1.2.16",
     "@modelcontextprotocol/sdk": "^1.26.0",

package/scripts/dev.ts

@@ -0,0 +1,45 @@
+#!/usr/bin/env bun
+
+/**
+ * Development script — runs backend and frontend concurrently.
+ * Resolves available ports before spawning, then passes them via env
+ * so Vite proxy and Elysia backend use the same coordinated ports.
+ */
+
+import concurrently from 'concurrently';
+import { findAvailablePort } from '../backend/lib/shared/port-utils';
+
+const desiredBackend = process.env.PORT_BACKEND ? parseInt(process.env.PORT_BACKEND) : 9151;
+const desiredFrontend = process.env.PORT_FRONTEND ? parseInt(process.env.PORT_FRONTEND) : 9141;
+
+// Resolve available ports
+const backendPort = await findAvailablePort(desiredBackend);
+let frontendPort = await findAvailablePort(desiredFrontend);
+
+// Ensure they don't collide
+if (frontendPort === backendPort) {
+	frontendPort = await findAvailablePort(frontendPort + 1);
+}
+
+if (backendPort !== desiredBackend) {
+	console.log(`⚠️ Backend port ${desiredBackend} in use, using ${backendPort}`);
+}
+if (frontendPort !== desiredFrontend) {
+	console.log(`⚠️ Frontend port ${desiredFrontend} in use, using ${frontendPort}`);
+}
+
+console.log(`Backend: http://localhost:${backendPort}`);
+console.log(`Frontend: http://localhost:${frontendPort}`);
+console.log();
+
+const portEnv = {
+	PORT_BACKEND: String(backendPort),
+	PORT_FRONTEND: String(frontendPort),
+};
+
+concurrently([
+	{ command: 'bun --watch backend/index.ts', name: 'backend', prefixColor: 'blue', env: portEnv },
+	{ command: 'bunx vite dev', name: 'frontend', prefixColor: 'green', env: portEnv },
+], {
+	killOthersOn: ['failure'],
+});

package/vite.config.ts

@@ -3,9 +3,26 @@ import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import { resolve } from 'path';
 
+const frontendPort = parseInt(process.env.PORT_FRONTEND || '9141');
+const backendPort = parseInt(process.env.PORT_BACKEND || '9151');
+
 export default defineConfig({
 	plugins: [tailwindcss(), svelte()],
 	publicDir: 'static',
+	server: {
+		port: frontendPort,
+		strictPort: false,
+		proxy: {
+			'/api': {
+				target: `http://localhost:${backendPort}`,
+				changeOrigin: true,
+			},
+			'/ws': {
+				target: `ws://localhost:${backendPort}`,
+				ws: true,
+			},
+		},
+	},
 	build: {
 		outDir: 'dist',
 		emptyOutDir: true,

package/backend/lib/vite-dev.ts

@@ -1,295 +0,0 @@
-/**
- * Vite Dev Server Integration
- *
- * Embeds Vite as middleware inside the Elysia/Bun server.
- * Uses Vite's direct APIs (transformIndexHtml, transformRequest) for speed,
- * with Node.js compat middleware adapter only for Vite internals (HMR, pre-bundled deps).
- */
-
-import { createServer as createViteServer, type ViteDevServer, type Connect } from 'vite';
-import { IncomingMessage, ServerResponse } from 'node:http';
-import { resolve } from 'node:path';
-import { statSync } from 'node:fs';
-
-let vite: ViteDevServer | null = null;
-
-const PUBLIC_DIR = resolve(process.cwd(), 'static');
-const INDEX_PATH = resolve(process.cwd(), 'index.html');
-
-// Safety timeout for the Node.js compat middleware adapter (ms).
-// Prevents hanging if Vite middleware never calls res.end() or next().
-const MIDDLEWARE_TIMEOUT = 10000;
-
-// ============================================================================
-// Lifecycle
-// ============================================================================
-
-export async function initViteDev(): Promise<ViteDevServer> {
-	vite = await createViteServer({
-		configFile: './vite.config.ts',
-		server: { middlewareMode: true },
-		appType: 'spa'
-	});
-
-	return vite;
-}
-
-export function getViteDev(): ViteDevServer | null {
-	return vite;
-}
-
-export async function closeViteDev(): Promise<void> {
-	if (vite) {
-		await vite.close();
-		vite = null;
-	}
-}
-
-// ============================================================================
-// Main Request Handler
-// ============================================================================
-
-export async function handleDevRequest(viteServer: ViteDevServer, request: Request): Promise<Response> {
-	const url = new URL(request.url);
-	const pathname = url.pathname;
-
-	// 1. Static public files
-	const publicFile = servePublicFile(pathname);
-	if (publicFile) return publicFile;
-
-	// 2. HTML / SPA routes
-	if (isHtmlRequest(pathname)) {
-		return serveHtml(viteServer, pathname);
-	}
-
-	// 3. Module requests (skip Vite internals like /__vite_hmr)
-	if (!pathname.startsWith('/__')) {
-		const moduleResponse = await serveModule(viteServer, pathname + url.search, request);
-		if (moduleResponse) return moduleResponse;
-	}
-
-	// 4. Fallback: Vite connect middleware (for HMR, pre-bundled deps, etc.)
-	const middlewareResponse = await pipeViteMiddleware(viteServer.middlewares, request);
-	if (middlewareResponse) return middlewareResponse;
-
-	return new Response('Not Found', { status: 404 });
-}
-
-// ============================================================================
-// Static Public Files
-// ============================================================================
-
-function servePublicFile(pathname: string): Response | null {
-	if (pathname === '/' || pathname.includes('..')) return null;
-
-	const filePath = resolve(PUBLIC_DIR, pathname.slice(1));
-	if (!filePath.startsWith(PUBLIC_DIR)) return null;
-
-	// Use statSync to verify the path is a regular file, not a directory.
-	// Bun.file().exists() returns inconsistent results for directories across
-	// platforms (Linux/macOS/Windows) and Bun versions, which can cause
-	// Response(Bun.file(directory)) to hang indefinitely.
-	try {
-		if (!statSync(filePath).isFile()) return null;
-	} catch {
-		return null;
-	}
-
-	const file = Bun.file(filePath);
-	return new Response(file, {
-		headers: {
-			'Content-Type': file.type || 'application/octet-stream',
-			'Cache-Control': 'public, max-age=3600'
-		}
-	});
-}
-
-// ============================================================================
-// HTML / SPA
-// ============================================================================
-
-function isHtmlRequest(pathname: string): boolean {
-	if (pathname === '/') return true;
-	if (pathname.startsWith('/@') || pathname.startsWith('/__')) return false;
-	if (pathname.startsWith('/node_modules/')) return false;
-	const lastSegment = pathname.split('/').pop() || '';
-	return !lastSegment.includes('.');
-}
-
-async function serveHtml(viteServer: ViteDevServer, pathname: string): Promise<Response> {
-	const rawHtml = await Bun.file(INDEX_PATH).text();
-	const html = await viteServer.transformIndexHtml(pathname, rawHtml);
-	return new Response(html, {
-		headers: { 'Content-Type': 'text/html; charset=utf-8' }
-	});
-}
-
-// ============================================================================
-// Module Requests
-// ============================================================================
-
-function getModuleContentType(url: string): string {
-	const pathname = url.split('?')[0];
-	// Raw CSS only when explicitly requested with ?direct (e.g. <link> tags).
-	// CSS imported via JS is transformed to a JS module by Vite (for HMR).
-	if (pathname.endsWith('.css') && url.includes('direct')) {
-		return 'text/css';
-	}
-	return 'application/javascript';
-}
-
-async function serveModule(viteServer: ViteDevServer, url: string, request: Request): Promise<Response | null> {
-	try {
-		const result = await viteServer.transformRequest(url);
-		if (!result) return null;
-
-		if (result.etag) {
-			const ifNoneMatch = request.headers.get('if-none-match');
-			if (ifNoneMatch === result.etag) {
-				return new Response(null, { status: 304 });
-			}
-		}
-
-		const headers: Record<string, string> = {
-			'Content-Type': getModuleContentType(url),
-		};
-		if (result.etag) {
-			headers['ETag'] = result.etag;
-		}
-
-		return new Response(result.code, { headers });
-	} catch {
-		return null;
-	}
-}
-
-// ============================================================================
-// Vite Connect Middleware Adapter
-// ============================================================================
-
-const MOCK_SOCKET = {
-	remoteAddress: '127.0.0.1',
-	remotePort: 0,
-	remoteFamily: 'IPv4',
-	encrypted: false,
-	writable: true,
-	readable: true,
-	destroy() {},
-	end() {},
-	write() { return true; },
-	on() { return this; },
-	once() { return this; },
-	off() { return this; },
-	emit() { return false; },
-	addListener() { return this; },
-	removeListener() { return this; },
-	setTimeout() { return this; },
-	setNoDelay() { return this; },
-	setKeepAlive() { return this; },
-	ref() { return this; },
-	unref() { return this; },
-	address() { return { address: '127.0.0.1', family: 'IPv4', port: 0 }; }
-};
-
-/**
- * Bridges Web API Request → Node.js IncomingMessage/ServerResponse → Web API Response.
- * Required because Vite's connect middleware uses the Node.js HTTP API.
- */
-function pipeViteMiddleware(
-	middleware: Connect.Server,
-	request: Request
-): Promise<Response | null> {
-	return new Promise((resolve) => {
-		const url = new URL(request.url);
-
-		const req = new IncomingMessage(MOCK_SOCKET as any);
-		req.method = request.method;
-		req.url = url.pathname + url.search;
-		req.headers = request.headers.toJSON();
-		req.push(null);
-
-		const res = new ServerResponse(req);
-		let ended = false;
-		const chunks: Uint8Array[] = [];
-
-		const safetyTimer = setTimeout(() => {
-			if (!ended) {
-				ended = true;
-				resolve(null);
-			}
-		}, MIDDLEWARE_TIMEOUT);
-
-		function finalize() {
-			if (ended) return;
-			ended = true;
-			clearTimeout(safetyTimer);
-
-			const nodeHeaders = res.getHeaders();
-			const h = new Headers();
-			for (const key in nodeHeaders) {
-				// Skip hop-by-hop headers — Bun sets correct Content-Length/Transfer-Encoding
-				// based on the actual body. Forwarding stale values from ServerResponse
-				// causes browser to wait for data that never arrives.
-				const lower = key.toLowerCase();
-				if (lower === 'transfer-encoding' || lower === 'content-length' ||
-					lower === 'connection' || lower === 'keep-alive') continue;
-
-				const v = nodeHeaders[key];
-				if (v === undefined) continue;
-				if (Array.isArray(v)) {
-					for (let i = 0; i < v.length; i++) h.append(key, v[i]);
-				} else {
-					h.set(key, String(v));
-				}
-			}
-
-			const body = chunks.length === 0
-				? null
-				: Buffer.concat(chunks);
-
-			resolve(new Response(body, { status: res.statusCode, headers: h }));
-		}
-
-		res.write = function (chunk: any, encodingOrCb?: any, cb?: any): boolean {
-			if (chunk != null) {
-				chunks.push(
-					typeof chunk === 'string'
-						? Buffer.from(chunk, typeof encodingOrCb === 'string' ? encodingOrCb as BufferEncoding : 'utf-8')
-						: chunk instanceof Uint8Array ? chunk : Buffer.from(chunk)
-				);
-			}
-			const callback = typeof encodingOrCb === 'function' ? encodingOrCb : cb;
-			if (typeof callback === 'function') callback();
-			return true;
-		};
-
-		res.end = function (data?: any, encodingOrCb?: any, cb?: any): ServerResponse {
-			if (ended) return res;
-
-			if (typeof data === 'function') {
-				data();
-			} else {
-				if (data != null) {
-					chunks.push(
-						typeof data === 'string'
-							? Buffer.from(data, typeof encodingOrCb === 'string' ? encodingOrCb as BufferEncoding : 'utf-8')
-							: data instanceof Uint8Array ? data : Buffer.from(data)
-					);
-				}
-				const callback = typeof encodingOrCb === 'function' ? encodingOrCb : cb;
-				if (typeof callback === 'function') callback();
-			}
-
-			finalize();
-			return res;
-		} as any;
-
-		middleware(req as any, res as any, () => {
-			if (!ended) {
-				ended = true;
-				clearTimeout(safetyTimer);
-				resolve(null);
-			}
-		});
-	});
-}