@myrialabs/clopen 0.2.8 → 0.2.10

package/backend/index.ts

@@ -156,7 +156,12 @@ startServer().catch((error) => {
 });
 
 // Graceful shutdown - properly close server and database
+let isShuttingDown = false;
+
 async function gracefulShutdown() {
+	if (isShuttingDown) return;
+	isShuttingDown = true;
+
 	console.log('\n🛑 Shutting down server...');
 	try {
 		// Close MCP remote server (before engines, as they may still reference it)
@@ -177,6 +182,13 @@ async function gracefulShutdown() {
 process.on('SIGINT', gracefulShutdown);
 process.on('SIGTERM', gracefulShutdown);
 
+// Ignore SIGHUP — sent when the controlling terminal closes or an SSH session
+// disconnects. Without a handler Bun exits immediately; we want the server to
+// keep running (e.g. started in a background tab or remote shell).
+process.on('SIGHUP', () => {
+	debug.log('server', 'Received SIGHUP — ignoring (server stays running)');
+});
+
 // Safety net: prevent server crash from unhandled errors.
 // These can occur when AI engine SDKs emit asynchronous errors that bypass
 // the normal try/catch flow (e.g., subprocess killed during initialization).

package/backend/preview/browser/browser-navigation-tracker.ts

@@ -1,22 +1,74 @@
 import { EventEmitter } from 'events';
-import type { Page, HTTPRequest, Frame } from 'puppeteer';
+import type { Page, HTTPRequest, Frame, CDPSession } from 'puppeteer';
 import type { BrowserTab } from './types';
+import { debug } from '$shared/utils/logger';
 
 export class BrowserNavigationTracker extends EventEmitter {
+	private cdpSessions = new Map<string, CDPSession>();
+
 	constructor() {
 		super();
 	}
 
+	/**
+	 * Check if two URLs differ only by hash/fragment.
+	 * Hash-only changes are same-document navigations and should NOT trigger
+	 * full page reload or streaming restart.
+	 */
+	private isHashOnlyChange(oldUrl: string, newUrl: string): boolean {
+		try {
+			const oldParsed = new URL(oldUrl);
+			const newParsed = new URL(newUrl);
+			// Compare URLs without hash — if identical, it's a hash-only change
+			oldParsed.hash = '';
+			newParsed.hash = '';
+			return oldParsed.href === newParsed.href;
+		} catch {
+			return false;
+		}
+	}
+
+	/**
+	 * Check if two URLs share the same origin (protocol + host + port).
+	 * Same-origin navigations are likely SPA internal navigations and should
+	 * NOT show a progress bar — the streaming restart happens silently while
+	 * the last rendered frame stays visible.
+	 */
+	private isSameOrigin(oldUrl: string, newUrl: string): boolean {
+		try {
+			return new URL(oldUrl).origin === new URL(newUrl).origin;
+		} catch {
+			return false;
+		}
+	}
+
 	async setupNavigationTracking(sessionId: string, page: Page, session: BrowserTab) {
 
-		// Track navigation start (loading begins)
+		// Track navigation start (loading begins) — only for cross-origin document navigations
 		page.on('request', (request: HTTPRequest) => {
 			// Only track main frame document requests (not resources like images, CSS, etc.)
 			// Puppeteer uses resourceType() instead of isNavigationRequest()
 			if (request.resourceType() === 'document' && request.frame() === page.mainFrame()) {
 				const targetUrl = request.url();
 
-				// Emit navigation loading event to frontend
+				// Skip hash-only changes — they are same-document navigations
+				// that don't need loading states or streaming restart
+				if (this.isHashOnlyChange(session.url, targetUrl)) {
+					debug.log('preview', `⏭️ Skipping navigation-loading for hash-only change: ${session.url} → ${targetUrl}`);
+					return;
+				}
+
+				// Skip same-origin navigations — they are likely SPA internal navigations.
+				// No progress bar is shown; the last rendered frame stays visible while
+				// streaming restarts silently in the background. This makes SPA navigation
+				// feel instant, similar to how a real browser shows the old page until
+				// the new one is ready.
+				if (this.isSameOrigin(session.url, targetUrl)) {
+					debug.log('preview', `⏭️ Skipping navigation-loading for same-origin navigation: ${session.url} → ${targetUrl}`);
+					return;
+				}
+
+				// Emit navigation loading event to frontend (cross-origin navigations only)
 				this.emit('navigation-loading', {
 					sessionId,
 					type: 'navigation-loading',
@@ -26,12 +78,59 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 		});
 
-		// Track all navigation events - including redirects, link clicks, and hash changes
-		page.on('framenavigated', (frame: Frame) => {
+		// Track full page navigations (actual page loads, not SPA)
+		page.on('framenavigated', async (frame: Frame) => {
 			// Only track main frame navigation (not iframes)
 			if (frame === page.mainFrame()) {
 				const newUrl = frame.url();
 
+				// Skip internal Chrome error/system pages — they indicate a failed navigation
+				// and should not be surfaced to the frontend as a real URL change.
+				if (newUrl.startsWith('chrome-error://') || newUrl.startsWith('chrome://')) return;
+
+				// Skip if URL hasn't changed (already handled by navigatedWithinDocument)
+				if (newUrl === session.url) return;
+
+				// Hash-only changes should be treated as SPA navigations
+				// (no streaming restart needed, page context is unchanged)
+				if (this.isHashOnlyChange(session.url, newUrl)) {
+					debug.log('preview', `🔄 Hash-only change detected, treating as SPA navigation: ${session.url} → ${newUrl}`);
+					session.url = newUrl;
+					this.emit('navigation-spa', {
+						sessionId,
+						type: 'navigation-spa',
+						url: newUrl,
+						timestamp: Date.now()
+					});
+					return;
+				}
+
+				// Same-origin navigation: check if the video encoder script survived.
+				// SPA frameworks (SvelteKit, Next.js, etc.) often trigger framenavigated
+				// for client-side routing even though the page context is NOT replaced.
+				// If __webCodecsPeer still exists, the scripts are alive → SPA navigation.
+				// If it's gone, the page was truly replaced → full navigation + stream restart.
+				if (this.isSameOrigin(session.url, newUrl)) {
+					try {
+						const scriptAlive = await page.evaluate(() => !!(window as any).__webCodecsPeer);
+						if (scriptAlive) {
+							debug.log('preview', `🔄 Same-origin navigation with script alive (SPA): ${session.url} → ${newUrl}`);
+							session.url = newUrl;
+							this.emit('navigation-spa', {
+								sessionId,
+								type: 'navigation-spa',
+								url: newUrl,
+								timestamp: Date.now()
+							});
+							return;
+						}
+						debug.log('preview', `📄 Same-origin navigation with script dead (full reload): ${session.url} → ${newUrl}`);
+					} catch {
+						// page.evaluate failed — page context was replaced, fall through to full navigation
+						debug.log('preview', `📄 Same-origin navigation evaluate failed (full reload): ${session.url} → ${newUrl}`);
+					}
+				}
+
 				// Update session URL
 				session.url = newUrl;
 
@@ -48,10 +147,43 @@ export class BrowserNavigationTracker extends EventEmitter {
 		// Also track URL changes via JavaScript (for single page applications)
 		page.on('load', async () => {
 			const currentUrl = page.url();
+			// Skip internal Chrome error/system pages
+			if (currentUrl.startsWith('chrome-error://') || currentUrl.startsWith('chrome://')) return;
 			if (currentUrl !== session.url) {
-				
+
+				// Hash-only changes on load — treat as SPA navigation
+				if (this.isHashOnlyChange(session.url, currentUrl)) {
+					session.url = currentUrl;
+					this.emit('navigation-spa', {
+						sessionId,
+						type: 'navigation-spa',
+						url: currentUrl,
+						timestamp: Date.now()
+					});
+					return;
+				}
+
+				// Same-origin: check if video encoder script survived
+				if (this.isSameOrigin(session.url, currentUrl)) {
+					try {
+						const scriptAlive = await page.evaluate(() => !!(window as any).__webCodecsPeer);
+						if (scriptAlive) {
+							session.url = currentUrl;
+							this.emit('navigation-spa', {
+								sessionId,
+								type: 'navigation-spa',
+								url: currentUrl,
+								timestamp: Date.now()
+							});
+							return;
+						}
+					} catch {
+						// Fall through to full navigation
+					}
+				}
+
 				session.url = currentUrl;
-				
+
 				this.emit('navigation', {
 					sessionId,
 					type: 'navigation',
@@ -61,34 +193,59 @@ export class BrowserNavigationTracker extends EventEmitter {
 			}
 		});
 
-		// Track hash changes (fragment identifier changes like #contact-us)
-		// Temporarily disabled URL tracking injection to test CloudFlare evasion
-		/*
-		await page.evaluateOnNewDocument(() => {
-			let lastUrl = window.location.href;
+		// Track SPA navigations (pushState/replaceState) via CDP
+		// Uses Page.navigatedWithinDocument which fires for same-document navigations
+		// This is purely CDP-level — no script injection, safe from CloudFlare detection
+		try {
+			const cdp = await page.createCDPSession();
+			this.cdpSessions.set(sessionId, cdp);
 
-			// Monitor for hash changes and other URL changes
-			const checkUrlChange = () => {
-				const currentUrl = window.location.href;
-				if (currentUrl !== lastUrl) {
-					lastUrl = currentUrl;
+			await cdp.send('Page.enable');
 
-					// Store the new URL for the backend to detect
-					(window as any).__urlChanged = {
-						url: currentUrl,
-						timestamp: Date.now()
-					};
-				}
-			};
+			// Get main frame ID via CDP (reliable across Puppeteer versions)
+			const frameTree = await cdp.send('Page.getFrameTree');
+			const mainFrameId = frameTree.frameTree.frame.id;
 
-			// Listen to various events that might change URL
-			window.addEventListener('hashchange', checkUrlChange);
-			window.addEventListener('popstate', checkUrlChange);
+			cdp.on('Page.navigatedWithinDocument', (params: { frameId: string; url: string }) => {
+				// Only track main frame SPA navigations (ignore iframe pushState)
+				if (params.frameId !== mainFrameId) return;
 
-			// Periodically check for URL changes (for SPA navigation)
-			setInterval(checkUrlChange, 500);
-		});
-		*/
+				const newUrl = params.url;
+				if (newUrl === session.url) return;
+
+				debug.log('preview', `🔄 SPA navigation detected: ${session.url} → ${newUrl}`);
+
+				// Update session URL
+				session.url = newUrl;
+
+				// Emit SPA navigation event — no loading state, no stream restart
+				this.emit('navigation-spa', {
+					sessionId,
+					type: 'navigation-spa',
+					url: newUrl,
+					timestamp: Date.now()
+				});
+			});
+
+			debug.log('preview', `✅ CDP SPA navigation tracking setup for session: ${sessionId}`);
+		} catch (error) {
+			debug.warn('preview', `⚠️ Failed to setup CDP SPA tracking for ${sessionId}:`, error);
+		}
+	}
+
+	/**
+	 * Cleanup CDP session for a tab
+	 */
+	async cleanupSession(sessionId: string) {
+		const cdp = this.cdpSessions.get(sessionId);
+		if (cdp) {
+			try {
+				await cdp.detach();
+			} catch {
+				// Ignore detach errors
+			}
+			this.cdpSessions.delete(sessionId);
+		}
 	}
 
 	async navigateSession(sessionId: string, session: BrowserTab, url: string): Promise<string> {

package/backend/preview/browser/browser-pool.ts

@@ -51,7 +51,7 @@ const CHROMIUM_ARGS = [
 	'--disable-blink-features=AutomationControlled',
 	'--window-size=1366,768',
 	'--autoplay-policy=no-user-gesture-required',
-	'--disable-features=AudioServiceOutOfProcess'
+	'--disable-features=AudioServiceOutOfProcess,WebRtcHideLocalIpsWithMdns'
 ];
 
 class BrowserPool {

package/backend/preview/browser/browser-preview-service.ts

@@ -94,6 +94,7 @@ export class BrowserPreviewService extends EventEmitter {
 		});
 
 		// Forward navigation events and handle video streaming restart
+		// Only full navigations (framenavigated) need streaming restart
 		this.navigationTracker.on('navigation', async (data) => {
 			this.emit('preview:browser-navigation', data);
 
@@ -121,6 +122,12 @@ export class BrowserPreviewService extends EventEmitter {
 			this.emit('preview:browser-navigation-loading', data);
 		});
 
+		// Forward SPA navigation events (pushState/replaceState)
+		// No streaming restart needed — page context is unchanged
+		this.navigationTracker.on('navigation-spa', (data) => {
+			this.emit('preview:browser-navigation-spa', data);
+		});
+
 		// Forward new window events
 		this.tabManager.on('new-window', (data) => {
 			this.emit('preview:browser-new-window', data);
@@ -140,6 +147,10 @@ export class BrowserPreviewService extends EventEmitter {
 			this.emit('preview:browser-tab-navigated', data);
 		});
 
+		this.tabManager.on('preview:browser-viewport-changed', (data) => {
+			this.emit('preview:browser-viewport-changed', data);
+		});
+
 		// Forward video capture events
 		this.videoCapture.on('ice-candidate', (data) => {
 			this.emit('preview:browser-webcodecs-ice-candidate', data);
@@ -249,6 +260,9 @@ export class BrowserPreviewService extends EventEmitter {
 		// Stop WebCodecs streaming first
 		await this.stopWebCodecsStreaming(tabId);
 
+		// Cleanup navigation tracker CDP session
+		await this.navigationTracker.cleanupSession(tabId);
+
 		// Clear cursor tracking for this tab
 		this.interactionHandler.clearSessionCursor(tabId);
 
@@ -650,6 +664,11 @@ class BrowserPreviewServiceManager {
 			ws.emit.project(projectId, 'preview:browser-navigation', data);
 		});
 
+		// Forward SPA navigation events (pushState/replaceState — URL-only update)
+		service.on('preview:browser-navigation-spa', (data) => {
+			ws.emit.project(projectId, 'preview:browser-navigation-spa', data);
+		});
+
 		// Forward tab events
 		service.on('preview:browser-tab-opened', (data) => {
 			debug.log('preview', `🚀 Forwarding preview:browser-tab-opened to project ${projectId}:`, data);
@@ -668,6 +687,10 @@ class BrowserPreviewServiceManager {
 			ws.emit.project(projectId, 'preview:browser-tab-navigated', data);
 		});
 
+		service.on('preview:browser-viewport-changed', (data) => {
+			ws.emit.project(projectId, 'preview:browser-viewport-changed', data);
+		});
+
 		// Forward console events
 		service.on('preview:browser-console-message', (data) => {
 			ws.emit.project(projectId, 'preview:browser-console-message', data);

package/backend/preview/browser/browser-tab-manager.ts

@@ -730,6 +730,21 @@ export class BrowserTabManager extends EventEmitter {
 		// await page.evaluateOnNewDocument(cursorTrackingScript);
 	}
 
+	/**
+	 * Returns true for errors where retrying is pointless because the page/session is gone.
+	 */
+	private isNonRetryableError(error: unknown): boolean {
+		if (error instanceof Error) {
+			const msg = error.message;
+			return (
+				msg.includes('Session closed') ||
+				msg.includes('detached Frame') ||
+				error.constructor.name === 'TargetCloseError'
+			);
+		}
+		return false;
+	}
+
 	/**
 	 * Navigate with retry, including Cloudflare auto-pass detection and CAPTCHA popup dismissal.
 	 */
@@ -750,7 +765,7 @@ export class BrowserTabManager extends EventEmitter {
 			} catch (error) {
 				retries--;
 				debug.warn('preview', `⚠️ Navigation failed, ${retries} retries left:`, error);
-				if (retries === 0) throw error;
+				if (retries === 0 || this.isNonRetryableError(error)) throw error;
 
 				// Wait before retry
 				await new Promise(resolve => setTimeout(resolve, 2000));

package/backend/preview/browser/browser-video-capture.ts

@@ -383,8 +383,8 @@ export class BrowserVideoCapture extends EventEmitter {
 			return null;
 		}
 
-		const maxRetries = 3;
-		const retryDelay = 50;
+		const maxRetries = 6;
+		const retryDelay = 150;
 
 		for (let attempt = 0; attempt < maxRetries; attempt++) {
 			try {

package/backend/preview/browser/scripts/video-stream.ts

@@ -38,6 +38,23 @@ export function videoEncoderScript(config: StreamingConfig['video']) {
 	// STUN servers are unnecessary for localhost and add 100-500ms ICE gathering latency
 	const iceServers: { urls: string }[] = [];
 
+	// Create a loopback (127.0.0.1) copy of a host ICE candidate.
+	// Ensures WebRTC connects via loopback when VPN (e.g. Cloudflare WARP)
+	// interferes with host candidate connectivity between same-machine peers.
+	function createLoopbackCandidate(candidate: { candidate?: string; sdpMid?: string | null; sdpMLineIndex?: number | null }) {
+		if (!candidate.candidate) return null;
+		if (!candidate.candidate.includes('typ host')) return null;
+
+		const parts = candidate.candidate.split(' ');
+		if (parts.length < 8) return null;
+
+		const address = parts[4];
+		if (address === '127.0.0.1' || address === '::1') return null;
+
+		parts[4] = '127.0.0.1';
+		return { ...candidate, candidate: parts.join(' ') };
+	}
+
 	// Check cursor style from page
 	function checkCursor() {
 		try {
@@ -103,11 +120,18 @@ export function videoEncoderScript(config: StreamingConfig['video']) {
 		// Handle ICE candidates
 		peerConnection.onicecandidate = (event) => {
 			if (event.candidate && (window as any).__sendIceCandidate) {
-				(window as any).__sendIceCandidate({
+				const candidateInit = {
 					candidate: event.candidate.candidate,
 					sdpMid: event.candidate.sdpMid,
 					sdpMLineIndex: event.candidate.sdpMLineIndex
-				});
+				};
+				(window as any).__sendIceCandidate(candidateInit);
+
+				// Also send loopback version for VPN compatibility (same-machine peers)
+				const loopback = createLoopbackCandidate(candidateInit);
+				if (loopback) {
+					(window as any).__sendIceCandidate(loopback);
+				}
 			}
 		};
 
@@ -337,16 +361,27 @@ export function videoEncoderScript(config: StreamingConfig['video']) {
 		}
 	}
 
-	// Add ICE candidate
+	// Add ICE candidate (+ loopback variant for VPN compatibility)
 	async function addIceCandidate(candidate: RTCIceCandidateInit) {
 		if (!peerConnection) return false;
 
 		try {
 			await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
-			return true;
 		} catch (error) {
 			return false;
 		}
+
+		// Also try loopback version for VPN compatibility (same-machine peers)
+		const loopback = createLoopbackCandidate(candidate);
+		if (loopback) {
+			try {
+				await peerConnection.addIceCandidate(new RTCIceCandidate(loopback as RTCIceCandidateInit));
+			} catch {
+				// Expected to fail if loopback is not applicable
+			}
+		}
+
+		return true;
 	}
 
 	// Reconfigure video encoder with new dimensions (hot-swap)

package/backend/terminal/stream-manager.ts

@@ -4,7 +4,7 @@
  */
 
 import type { IPty } from 'bun-pty';
-import { existsSync, mkdirSync, writeFileSync, readFileSync, unlinkSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, unlinkSync } from 'fs';
 import { join } from 'path';
 
 interface TerminalStream {
@@ -129,36 +129,50 @@ class TerminalStreamManager {
     }
   }
 
+  /** Pending write flag to coalesce rapid writes */
+  private pendingWrites = new Set<string>();
+
   /**
-   * Persist output to disk for cross-project persistence
+   * Persist output to disk for cross-project persistence (async, coalesced)
    */
   private persistOutputToDisk(stream: TerminalStream): void {
-    try {
-      const cacheFile = join(this.tempDir, `${stream.sessionId}.json`);
+    // Coalesce rapid writes - only schedule one write per session per microtask
+    if (this.pendingWrites.has(stream.sessionId)) return;
+    this.pendingWrites.add(stream.sessionId);
 
-      // Only save new output (from outputStartIndex onwards)
-      // This prevents duplicating old output that was already displayed
-      const newOutput = stream.outputStartIndex !== undefined
-        ? stream.output.slice(stream.outputStartIndex)
-        : stream.output;
+    queueMicrotask(() => {
+      this.pendingWrites.delete(stream.sessionId);
 
-      const cacheData = {
-        streamId: stream.streamId,
-        sessionId: stream.sessionId,
-        command: stream.command,
-        projectId: stream.projectId,
-        projectPath: stream.projectPath,
-        workingDirectory: stream.workingDirectory,
-        startedAt: stream.startedAt,
-        status: stream.status,
-        output: newOutput, // Only save new output
-        outputStartIndex: stream.outputStartIndex || 0,
-        lastUpdated: new Date().toISOString()
-      };
-      writeFileSync(cacheFile, JSON.stringify(cacheData));
-    } catch (error) {
-      // Silently handle write errors
-    }
+      try {
+        const cacheFile = join(this.tempDir, `${stream.sessionId}.json`);
+
+        // Only save new output (from outputStartIndex onwards)
+        const newOutput = stream.outputStartIndex !== undefined
+          ? stream.output.slice(stream.outputStartIndex)
+          : stream.output;
+
+        const cacheData = {
+          streamId: stream.streamId,
+          sessionId: stream.sessionId,
+          command: stream.command,
+          projectId: stream.projectId,
+          projectPath: stream.projectPath,
+          workingDirectory: stream.workingDirectory,
+          startedAt: stream.startedAt,
+          status: stream.status,
+          output: newOutput,
+          outputStartIndex: stream.outputStartIndex || 0,
+          lastUpdated: new Date().toISOString()
+        };
+
+        // Use Bun.write for non-blocking async disk write
+        Bun.write(cacheFile, JSON.stringify(cacheData)).catch(() => {
+          // Silently handle write errors
+        });
+      } catch {
+        // Silently handle errors
+      }
+    });
   }
 
   /**

package/backend/ws/preview/browser/webcodecs.ts

@@ -252,6 +252,17 @@ export const streamPreviewHandler = createRouter()
 			url: t.String(),
 			timestamp: t.Number()
 		})
+	)
+
+	// Server → Client: SPA navigation (pushState/replaceState — URL-only update, no page reload)
+	.emit(
+		'preview:browser-navigation-spa',
+		t.Object({
+			sessionId: t.String(),
+			type: t.String(),
+			url: t.String(),
+			timestamp: t.Number()
+		})
 	);
 
 // Setup event forwarding from preview service to WebSocket

package/backend/ws/preview/index.ts

@@ -143,4 +143,12 @@ export const previewRouter = createRouter()
 		sessionId: t.String(),
 		timestamp: t.Number(),
 		source: t.Literal('mcp')
+	}))
+	.emit('preview:browser-viewport-changed', t.Object({
+		tabId: t.String(),
+		deviceSize: t.String(),
+		rotation: t.String(),
+		width: t.Number(),
+		height: t.Number(),
+		timestamp: t.Number()
 	}));

package/backend/ws/system/operations.ts

@@ -10,10 +10,13 @@
 import { t } from 'elysia';
 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 { debug } from '$shared/utils/logger';
 import { ws } from '$backend/utils/ws';
+import { getClopenDir } from '$backend/utils/index';
+import { resetEnvironment } from '$backend/engine/adapters/claude/environment';
 
 /** In-memory flag: set after successful update, cleared on server restart */
 let pendingUpdate: { fromVersion: string; toVersion: string } | null = null;
@@ -163,6 +166,26 @@ export const operationsHandler = createRouter()
 
 		debug.log('server', 'Database cleared successfully');
 
+		// 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);
+		}
+
+		// 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);
+		}
+
 		return {
 			cleared: true,
 			tablesCount: tables.length

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

@@ -416,12 +416,12 @@
 			ondrop={fileHandling.handleDrop}
 		>
 			<div class="flex-1">
-				<!-- Engine/Model Picker -->
-				<EngineModelPicker />
-
 				<!-- Edit Mode Indicator -->
 				<EditModeIndicator onCancel={handleCancelEdit} />
 
+				<!-- Engine/Model Picker -->
+				<EngineModelPicker />
+
 				<div class="flex items-end">
 					<textarea
 						bind:this={textareaElement}

package/frontend/components/chat/tools/components/FileHeader.svelte

@@ -50,7 +50,7 @@
 	{#if badges.length > 0}
 		<div class="flex gap-2 mt-3">
 			{#each badges as badge}
-				<div class="text-xs px-2 py-1 rounded {badge.color}">
+				<div class="text-3xs px-2 py-0.5 rounded {badge.color}">
 					{badge.text}
 				</div>
 			{/each}