@myrialabs/clopen 0.2.7 → 0.2.9

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/index.ts

@@ -117,12 +117,12 @@ export const previewRouter = createRouter()
 	}))
 	// MCP control events
 	.emit('preview:browser-mcp-control-start', t.Object({
-		browserSessionId: t.String(),
-		mcpSessionId: t.Optional(t.String()),
+		browserTabId: t.String(),
+		chatSessionId: t.Optional(t.String()),
 		timestamp: t.Number()
 	}))
 	.emit('preview:browser-mcp-control-end', t.Object({
-		browserSessionId: t.String(),
+		browserTabId: t.String(),
 		timestamp: t.Number()
 	}))
 	.emit('preview:browser-mcp-cursor-position', t.Object({

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/message/MessageBubble.svelte

@@ -52,7 +52,7 @@
 
 	// Auto-scroll reasoning/system content to bottom while receiving partial text
 	$effect(() => {
-		if (roleCategory !== 'reasoning' && roleCategory !== 'system') return;
+		if (roleCategory !== 'reasoning' && roleCategory !== 'system' && roleCategory !== 'compact') return;
 		if (!scrollContainer) return;
 		// Track message content changes (partialText for streaming, message for final)
 		const _track = message.type === 'stream_event' && 'partialText' in message
@@ -93,7 +93,7 @@
 		<!-- Message Content -->
 		<div
 			bind:this={scrollContainer}
-			class="p-3 md:p-4 {roleCategory === 'reasoning' || roleCategory === 'system' ? 'max-h-80 overflow-y-auto' : ''}"
+			class="p-3 md:p-4 {roleCategory === 'reasoning' || roleCategory === 'system' || roleCategory === 'compact' ? 'max-h-80 overflow-y-auto' : ''}"
 		>
 			<div class="max-w-none space-y-4">
 				<!-- Content rendering using MessageFormatter component -->

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}

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

@@ -16,6 +16,13 @@
 	}
 
 	const parsedCommand = $derived(parseCommandParts(command));
+
+	function formatTimeout(ms: number): string {
+		if (ms < 1000) return `${ms}ms`;
+		if (ms < 60_000) return `${ms / 1000}s`;
+		if (ms < 3_600_000) return `${ms / 60_000}m`;
+		return `${ms / 3_600_000}h`;
+	}
 </script>
 
 <!-- Description (if provided) -->
@@ -34,7 +41,7 @@
 		</div>
 		{#if timeout}
 			<div class="inline-block ml-auto text-3xs bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 px-2 py-0.5 rounded">
-				Timeout: {timeout}ms
+				Timeout: {formatTimeout(timeout)}
 			</div>
 		{/if}
 	</div>

package/frontend/components/common/overlay/Dialog.svelte

@@ -184,7 +184,7 @@
 		out:fade={{ duration: 150, easing: cubicOut }}
 	>
 		<div
-			class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl max-w-md w-full p-6 space-y-4 shadow-xl"
+			class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-xl max-w-md w-full p-6 space-y-4 shadow-xl max-h-[calc(100dvh-2rem)] overflow-y-auto"
 			role="document"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}

package/frontend/components/common/overlay/Lightbox.svelte

@@ -171,7 +171,7 @@
 
 		<!-- Content container -->
 		<div
-			class="relative max-w-[95vw] max-h-[95vh] flex items-center justify-center"
+			class="relative max-w-[95vw] max-h-[95dvh] flex items-center justify-center"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			role="document"
@@ -184,7 +184,7 @@
 				<img
 					src="data:{mediaType};base64,{data}"
 					alt="Full size view"
-					class="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl"
+					class="max-w-full max-h-[90dvh] object-contain rounded-lg shadow-2xl"
 					loading="eager"
 				/>
 			{:else if type === 'document'}

package/frontend/components/common/overlay/Modal.svelte

@@ -51,7 +51,7 @@
 		md: 'max-w-[95vw] md:max-w-lg',
 		lg: 'max-w-[95vw] md:max-w-2xl',
 		xl: 'max-w-[95vw] md:max-w-4xl',
-		full: 'max-w-[95vw] md:max-w-[90vw] max-h-[90vh]'
+		full: 'max-w-[95vw] md:max-w-[90vw]'
 	};
 
 	// Auto-focus management
@@ -106,7 +106,7 @@
 		<div
 			class="bg-white dark:bg-slate-900 rounded-lg md:rounded-xl border border-slate-200 dark:border-slate-800 shadow-2xl w-full {sizeClasses[
 				size
-			]} max-h-[95vh] md:max-h-[90vh] overflow-hidden flex flex-col {className}"
+			]} max-h-[calc(100dvh-1rem)] md:max-h-[calc(100dvh-2rem)] overflow-hidden flex flex-col {className}"
 			role="document"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}

package/frontend/components/common/xterm/XTerm.svelte

@@ -635,7 +635,7 @@
 <!-- Pure xterm.js terminal container -->
 <div
 	bind:this={terminalContainer}
-	class="w-full h-full overflow-hidden bg-slate-50 dark:bg-slate-900/70 {className} select-none"
+	class="w-full h-full overflow-hidden bg-white dark:bg-slate-900/70 {className} select-none"
 	style="transition: opacity 0.2s ease-in-out; user-select: text;"
 	role="textbox"
 	tabindex="0"
@@ -677,6 +677,11 @@
 		height: 100% !important;
 	}
 
+	:global(.xterm .xterm-scrollable-element) {
+		background: transparent !important;
+		height: 100% !important;
+	}
+
 	:global(.xterm .xterm-helper-textarea) {
 		height: 100% !important;
 	}

package/frontend/components/git/ConflictResolver.svelte

@@ -26,7 +26,7 @@
 {#if isOpen}
 	<div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center" onclick={onClose}>
 		<div
-			class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[85vh] flex flex-col"
+			class="bg-white dark:bg-slate-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 my-4 max-h-[calc(100dvh-2rem)] flex flex-col"
 			onclick={(e) => e.stopPropagation()}
 		>
 			<!-- Header -->

package/frontend/components/git/GitModal.svelte

@@ -13,7 +13,7 @@
 	let gitPanelRef: any = $state();
 </script>
 
-<Modal {isOpen} {onClose} size="full" className="!max-h-[85vh] !max-w-[95vw] md:!max-w-5xl">
+<Modal {isOpen} {onClose} size="full" className="!max-h-[85dvh] !max-w-[95vw] md:!max-w-5xl">
 	{#snippet header()}
 		<div class="flex items-center justify-between px-4 py-3 md:px-6 md:py-4">
 			<div class="flex items-center gap-2.5">
@@ -73,7 +73,7 @@
 	{/snippet}
 
 	{#snippet children()}
-		<div class="h-[65vh] -mx-4 -my-6 md:-mx-6">
+		<div class="h-[65dvh] -mx-4 -my-6 md:-mx-6">
 			<GitPanel bind:this={gitPanelRef} />
 		</div>
 	{/snippet}

package/frontend/components/preview/browser/BrowserPreview.svelte

@@ -473,7 +473,7 @@
 			bind:isConsoleOpen
 			{tabs}
 			{activeTabId}
-			mcpControlledTabId={mcpHandler.mcpControlState.controlledTabId}
+			mcpControlledTabIds={mcpHandler.getControlledTabIds()}
 			onGoClick={handleGoClick}
 			onRefresh={refreshPreview}
 			onOpenInExternalBrowser={() => {}}

package/frontend/components/preview/browser/components/Canvas.svelte

@@ -406,7 +406,7 @@
 			// This matches the loading overlay background roughly
 			if (ctx) {
 				ctx.imageSmoothingEnabled = true;
-				ctx.imageSmoothingQuality = 'low'; // Faster rendering
+				ctx.imageSmoothingQuality = 'medium';
 				ctx.fillStyle = '#f1f5f9'; // slate-100 - neutral light color
 				ctx.fillRect(0, 0, canvasElement.width, canvasElement.height);
 			}

package/frontend/components/preview/browser/components/Toolbar.svelte

@@ -25,7 +25,7 @@
 		// Tab state
 		tabs = $bindable<any[]>([]),
 		activeTabId = $bindable<string | null>(null),
-		mcpControlledTabId = $bindable<string | null>(null),
+		mcpControlledTabIds = $bindable<Set<string>>(new Set()),
 
 		// Callbacks
 		onGoClick = $bindable<() => void>(() => {}),
@@ -214,7 +214,7 @@
 </script>
 
 <!-- Preview Toolbar -->
-<div class="relative bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+<div class="relative bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
 	<!-- Tabs bar (Git-style underline tabs) — separated with its own border-bottom -->
 	{#if tabs.length > 0}
 		<div class="relative flex items-center overflow-x-auto border-b border-slate-200 dark:border-slate-700">
@@ -233,11 +233,11 @@
 					<span class="truncate max-w-28" title={tab.url}>
 						{tab.title || 'New Tab'}
 					</span>
-					{#if tab.id === mcpControlledTabId}
+					{#if mcpControlledTabIds.has(tab.id)}
 						<span title="MCP Controlled" class="flex"><Icon name="lucide:lock" class="w-3 h-3 flex-shrink-0 text-amber-500" /></span>
 					{/if}
 					<!-- Close button -->
-					{#if tab.id !== mcpControlledTabId}
+					{#if !mcpControlledTabIds.has(tab.id)}
 						<span
 							role="button"
 							tabindex="0"

package/frontend/components/preview/browser/core/mcp-handlers.svelte.ts

@@ -1,6 +1,9 @@
 /**
  * Browser MCP Event Handlers
  * Handles MCP (Model Context Protocol) control events for BrowserPreview
+ *
+ * Supports multi-tab control: each chat session can control multiple tabs.
+ * Tracks controlled tabs via a Set of backend tab IDs (session IDs).
  */
 
 import { debug } from '$shared/utils/logger';
@@ -8,14 +11,6 @@ import { showInfo, showWarning } from '$frontend/stores/ui/notification.svelte';
 import ws from '$frontend/utils/ws';
 import type { TabManager } from './tab-manager.svelte';
 
-// MCP Control State interface
-export interface McpControlState {
-	isControlled: boolean;
-	controlledTabId: string | null;
-	browserSessionId: string | null;
-	startedAt: number | null;
-}
-
 export interface McpHandlerConfig {
 	tabManager: TabManager;
 	transformBrowserToDisplayCoordinates?: (x: number, y: number) => { x: number, y: number } | null;
@@ -30,13 +25,8 @@ export interface McpHandlerConfig {
 export function createMcpHandler(config: McpHandlerConfig) {
 	const { tabManager, transformBrowserToDisplayCoordinates, onCursorUpdate, onCursorHide, onLaunchRequest } = config;
 
-	// MCP control state
-	let mcpControlState = $state<McpControlState>({
-		isControlled: false,
-		controlledTabId: null,
-		browserSessionId: null,
-		startedAt: null
-	});
+	// Set of backend tab IDs (session IDs) currently controlled by MCP
+	let controlledSessionIds = $state(new Set<string>());
 
 	/**
 	 * Setup WebSocket event listeners for MCP control events
@@ -44,7 +34,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	function setupEventListeners() {
 		debug.log('preview', '🎧 Setting up MCP event listeners...');
 
-		// Listen for MCP control start/end events
+		// Listen for MCP control start/end events (per-tab)
 		ws.on('preview:browser-mcp-control-start', (data) => {
 			debug.log('preview', `📥 Received mcp-control-start:`, data);
 			handleControlStart(data);
@@ -93,60 +83,72 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	/**
-	 * Check if current tab is MCP controlled
+	 * Check if current active tab is MCP controlled
 	 */
 	function isCurrentTabMcpControlled(): boolean {
-		return mcpControlState.isControlled && mcpControlState.controlledTabId === tabManager.activeTabId;
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (!activeTab?.sessionId) return false;
+		return controlledSessionIds.has(activeTab.sessionId);
 	}
 
 	/**
-	 * Get MCP control state
+	 * Check if a specific frontend tab is MCP controlled (by sessionId)
 	 */
-	function getControlState(): McpControlState {
-		return mcpControlState;
+	function isSessionControlled(sessionId: string): boolean {
+		return controlledSessionIds.has(sessionId);
 	}
 
-	// Private handlers
+	/**
+	 * Get set of frontend tab IDs that are MCP controlled
+	 */
+	function getControlledTabIds(): Set<string> {
+		const result = new Set<string>();
+		for (const tab of tabManager.tabs) {
+			if (tab.sessionId && controlledSessionIds.has(tab.sessionId)) {
+				result.add(tab.id);
+			}
+		}
+		return result;
+	}
 
-	function handleControlStart(data: { browserSessionId: string; mcpSessionId?: string; timestamp: number }) {
-		debug.log('preview', `🎮 MCP control started for session: ${data.browserSessionId}`);
+	// Private handlers
 
-		// Find which tab has this session
-		const tab = tabManager.tabs.find(t => t.sessionId === data.browserSessionId);
+	function handleControlStart(data: { browserTabId: string; chatSessionId?: string; timestamp: number }) {
+		debug.log('preview', `🎮 MCP control started for tab: ${data.browserTabId}`);
 
-		mcpControlState = {
-			isControlled: true,
-			controlledTabId: tab?.id || null,
-			browserSessionId: data.browserSessionId,
-			startedAt: data.timestamp
-		};
+		// Add to controlled set (reassign for Svelte reactivity)
+		controlledSessionIds = new Set([...controlledSessionIds, data.browserTabId]);
 
-		// Show toast notification
-		showWarning('MCP Control Started', 'An MCP agent is now controlling the browser. User input is blocked.', 5000);
+		// Show toast only for the first controlled tab
+		if (controlledSessionIds.size === 1) {
+			showWarning('MCP Control Started', 'An MCP agent is now controlling the browser. User input is blocked.', 5000);
+		}
 	}
 
-	function handleControlEnd(data: { browserSessionId: string; timestamp: number }) {
-		debug.log('preview', `🎮 MCP control ended for session: ${data.browserSessionId}`);
+	function handleControlEnd(data: { browserTabId: string; timestamp: number }) {
+		debug.log('preview', `🎮 MCP control ended for tab: ${data.browserTabId}`);
 
-		mcpControlState = {
-			isControlled: false,
-			controlledTabId: null,
-			browserSessionId: null,
-			startedAt: null
-		};
+		// Remove from controlled set (reassign for Svelte reactivity)
+		const newSet = new Set(controlledSessionIds);
+		newSet.delete(data.browserTabId);
+		controlledSessionIds = newSet;
 
-		// Hide cursor
-		if (onCursorHide) {
+		// Hide cursor if the released tab was the active one
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.browserTabId && onCursorHide) {
 			onCursorHide();
 		}
 
-		// Show toast notification
-		showInfo('MCP Control Ended', 'MCP agent released control. You can now interact with the browser.', 4000);
+		// Show toast when all tabs released
+		if (controlledSessionIds.size === 0) {
+			showInfo('MCP Control Ended', 'MCP agent released control. You can now interact with the browser.', 4000);
+		}
 	}
 
 	function handleCursorPosition(data: { sessionId: string; x: number; y: number; timestamp: number; source: 'mcp' }) {
-		// Only show cursor if MCP is controlling AND user is currently viewing that tab
-		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && isCurrentTabMcpControlled() && transformBrowserToDisplayCoordinates) {
+		// Only show cursor if this tab is controlled AND user is viewing it
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.sessionId && controlledSessionIds.has(data.sessionId) && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, false);
@@ -155,8 +157,9 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	}
 
 	function handleCursorClick(data: { sessionId: string; x: number; y: number; timestamp: number; source: 'mcp' }) {
-		// Only show cursor click if MCP is controlling AND user is currently viewing that tab
-		if (mcpControlState.isControlled && mcpControlState.browserSessionId === data.sessionId && isCurrentTabMcpControlled() && transformBrowserToDisplayCoordinates) {
+		// Only show cursor click if this tab is controlled AND user is viewing it
+		const activeTab = tabManager.tabs.find(t => t.id === tabManager.activeTabId);
+		if (activeTab?.sessionId === data.sessionId && controlledSessionIds.has(data.sessionId) && transformBrowserToDisplayCoordinates) {
 			const transformedPosition = transformBrowserToDisplayCoordinates(data.x, data.y);
 			if (transformedPosition && onCursorUpdate) {
 				onCursorUpdate(transformedPosition.x, transformedPosition.y, true);
@@ -170,12 +173,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	 */
 	function restoreControlState(frontendTabId: string, browserSessionId: string): void {
 		debug.log('preview', `🔄 Restoring MCP control state for tab: ${frontendTabId} (session: ${browserSessionId})`);
-		mcpControlState = {
-			isControlled: true,
-			controlledTabId: frontendTabId,
-			browserSessionId: browserSessionId,
-			startedAt: Date.now()
-		};
+		controlledSessionIds = new Set([...controlledSessionIds, browserSessionId]);
 	}
 
 	/**
@@ -183,12 +181,7 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	 */
 	function resetControlState(): void {
 		debug.log('preview', `🔄 Resetting MCP control state`);
-		mcpControlState = {
-			isControlled: false,
-			controlledTabId: null,
-			browserSessionId: null,
-			startedAt: null
-		};
+		controlledSessionIds = new Set();
 		if (onCursorHide) {
 			onCursorHide();
 		}
@@ -327,10 +320,11 @@ export function createMcpHandler(config: McpHandlerConfig) {
 	return {
 		setupEventListeners,
 		isCurrentTabMcpControlled,
-		getControlState,
+		isSessionControlled,
+		getControlledTabIds,
 		restoreControlState,
 		resetControlState,
-		get mcpControlState() { return mcpControlState; }
+		get controlledSessionIds() { return controlledSessionIds; }
 	};
 }
 

package/frontend/components/settings/SettingsModal.svelte

@@ -106,7 +106,7 @@
 			role="dialog"
 			aria-labelledby="settings-title"
 			tabindex="-1"
-			class="flex flex-col w-full max-w-225 h-[85dvh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-violet-500/20 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-dvh max-md:max-h-dvh max-md:rounded-none"
+			class="flex flex-col w-full max-w-225 h-[85dvh] max-h-175 bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] dark:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] max-md:max-w-full max-md:h-dvh max-md:max-h-dvh max-md:rounded-none"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 			in:scale={{ duration: 250, easing: cubicOut, start: 0.95 }}