@myrialabs/clopen 0.1.6 → 0.1.8

package/frontend/lib/components/common/MonacoEditor.svelte

@@ -58,9 +58,9 @@
 				indentGuide: '#21262d',
 				indentGuideActive: '#30363d',
 				ruler: '#21262d',
-				scrollbar: '#21262d60',
-				scrollbarHover: '#30363d80',
-				scrollbarActive: '#6e7681'
+				scrollbar: '#6e768140',
+				scrollbarHover: '#6e768180',
+				scrollbarActive: '#8b949e'
 			},
 			tokens: {
 				comment: '6A9955',
@@ -87,9 +87,9 @@
 				indentGuide: '#e3e3e3',
 				indentGuideActive: '#d3d3d3',
 				ruler: '#e3e3e3',
-				scrollbar: '#cccccc60',
-				scrollbarHover: '#999999a0',
-				scrollbarActive: '#666666'
+				scrollbar: '#92929240',
+				scrollbarHover: '#92929280',
+				scrollbarActive: '#555555'
 			},
 			tokens: {
 				comment: '008000',

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

@@ -14,7 +14,7 @@
 	import { settings } from '$frontend/lib/stores/features/settings.svelte';
 	
 	// Import CSS directly - Vite will handle it properly
-	import 'xterm/css/xterm.css';
+	import '@xterm/xterm/css/xterm.css';
 
 	// Props
 	const { 
@@ -183,127 +183,39 @@
 		};
 	}
 
-	// Handle right-click copy/paste functionality
-	function setupRightClickCopy() {
+	// Handle right-click copy/paste via clipboard addon
+	function setupClipboardHandling() {
 		if (!terminalContainer || !xtermService.terminal) return;
 
-		const handleRightClick = async (event: MouseEvent) => {
-			event.preventDefault(); // Prevent default context menu
-			
-			// Get selected text from xterm.js
+		const handleContextMenu = async (event: MouseEvent) => {
+			event.preventDefault();
+
 			const selectedText = xtermService.getSelectedText();
-			
-			if (selectedText && selectedText.trim()) {
+
+			if (selectedText?.trim()) {
 				// Copy selected text to clipboard
 				try {
 					await navigator.clipboard.writeText(selectedText);
-					
-					// Clear selection after copy (like most terminals do)
 					xtermService.clearSelection();
-					
-					// Show brief visual feedback
-					showCopyFeedback();
-				} catch (err) {
-				}
+				} catch { /* clipboard not available */ }
 			} else {
-				// No text selected - paste from clipboard instead
+				// No text selected - paste from clipboard
 				try {
-					const clipboardText = await navigator.clipboard.readText();
-					if (clipboardText && clipboardText.trim() && xtermService.isReady) {
-						
-						// Use terminal's built-in paste functionality
-						// This simulates typing each character through the input handler
-						if ((xtermService as any).inputHandler) {
-							// Process each character through the input handler
-							for (const char of clipboardText) {
-								// Skip newlines - let user decide when to execute
-								if (char !== '\n' && char !== '\r') {
-									(xtermService as any).inputHandler(char);
-								}
-							}
-						}
-						
-						// Show brief visual feedback
-						showPasteFeedback();
+					const text = await navigator.clipboard.readText();
+					if (text?.trim()) {
+						xtermService.pasteText(text);
 					}
-				} catch {
-					// paste not supported
-				}
+				} catch { /* clipboard not available */ }
 			}
 		};
 
-		// Add right-click event listener to terminal container
-		terminalContainer.addEventListener('contextmenu', handleRightClick);
-		
+		terminalContainer.addEventListener('contextmenu', handleContextMenu);
+
 		return () => {
-			terminalContainer?.removeEventListener('contextmenu', handleRightClick);
+			terminalContainer?.removeEventListener('contextmenu', handleContextMenu);
 		};
 	}
 
-	// Show brief visual feedback for copy action
-	function showCopyFeedback() {
-		if (!terminalContainer) return;
-		
-		// Create temporary feedback element
-		const feedback = document.createElement('div');
-		feedback.textContent = 'Copied!';
-		feedback.style.cssText = `
-			position: absolute;
-			top: 10px;
-			right: 10px;
-			background: rgb(34 197 94 / 0.9);
-			color: white;
-			padding: 4px 8px;
-			border-radius: 4px;
-			font-size: 12px;
-			font-family: system-ui, sans-serif;
-			z-index: 1000;
-			pointer-events: none;
-		`;
-		
-		terminalContainer.style.position = 'relative';
-		terminalContainer.appendChild(feedback);
-		
-		// Remove feedback after 1 second
-		setTimeout(() => {
-			if (feedback.parentNode) {
-				feedback.parentNode.removeChild(feedback);
-			}
-		}, 1000);
-	}
-
-	// Show brief visual feedback for paste action
-	function showPasteFeedback() {
-		if (!terminalContainer) return;
-		
-		// Create temporary feedback element
-		const feedback = document.createElement('div');
-		feedback.textContent = 'Pasted!';
-		feedback.style.cssText = `
-			position: absolute;
-			top: 10px;
-			right: 10px;
-			background: rgba(59, 130, 246, 0.9);
-			color: white;
-			padding: 4px 8px;
-			border-radius: 4px;
-			font-size: 12px;
-			font-family: system-ui, sans-serif;
-			z-index: 1000;
-			pointer-events: none;
-		`;
-		
-		terminalContainer.style.position = 'relative';
-		terminalContainer.appendChild(feedback);
-		
-		// Remove feedback after 1 second
-		setTimeout(() => {
-			if (feedback.parentNode) {
-				feedback.parentNode.removeChild(feedback);
-			}
-		}, 1000);
-	}
-
 	// Handle theme changes
 	function setupThemeHandling() {
 		xtermService.updateTheme();
@@ -404,7 +316,9 @@
 	$effect(() => {
 		const size = settings.fontSize;
 		if (isInitialized) {
-			xtermService.updateFontSize(size, session?.id);
+			const fontSize = Math.round(size * 0.9);
+			const lineHeight = Math.round(size * 0.9);
+			xtermService.updateFontSize(fontSize, lineHeight, session?.id);
 		}
 	});
 
@@ -656,12 +570,12 @@
 
 		const cleanupResize = setupResizeHandling();
 		const cleanupTheme = setupThemeHandling();
-		const cleanupRightClick = setupRightClickCopy();
+		const cleanupClipboard = setupClipboardHandling();
 
 		return () => {
 			cleanupResize();
 			cleanupTheme();
-			cleanupRightClick?.();
+			cleanupClipboard?.();
 		};
 	});
 
@@ -711,6 +625,11 @@
 	export function clearSelection() {
 		xtermService.clearSelection();
 	}
+
+	export function pasteText(text: string) {
+		xtermService.pasteText(text);
+	}
+
 </script>
 
 <!-- Pure xterm.js terminal container -->

package/frontend/lib/components/common/xterm/terminal-config.ts

@@ -4,7 +4,7 @@
  * Centralized xterm.js configuration and utilities
  */
 
-import type { ITerminalOptions } from 'xterm';
+import type { ITerminalOptions } from '@xterm/xterm';
 
 // Terminal theme configuration
 export const terminalConfig: ITerminalOptions = {
@@ -40,7 +40,7 @@ export const terminalConfig: ITerminalOptions = {
 	convertEol: true,
 	scrollback: 1000,
 	tabStopWidth: 4,
-	allowProposedApi: false,
+	allowProposedApi: true,
 	altClickMovesCursor: true,
 	disableStdin: false, // ✅ ENABLED for interactive PTY mode - stdin forwards to backend
 	allowTransparency: false

package/frontend/lib/components/common/xterm/types.ts

@@ -23,6 +23,7 @@ export interface XTermMethods {
 	writeData(data: string): void;
 	getSelectedText(): string;
 	clearSelection(): void;
+	pasteText(text: string): void;
 }
 
 export interface TerminalSize {

package/frontend/lib/components/common/xterm/xterm-service.ts

@@ -6,9 +6,12 @@
  */
 
 import { browser } from '$frontend/lib/app-environment';
-import type { Terminal } from 'xterm';
+import type { Terminal } from '@xterm/xterm';
 import type { FitAddon } from '@xterm/addon-fit';
 import type { WebLinksAddon } from '@xterm/addon-web-links';
+import type { ClipboardAddon } from '@xterm/addon-clipboard';
+import type { Unicode11Addon } from '@xterm/addon-unicode11';
+import type { LigaturesAddon } from '@xterm/addon-ligatures';
 import type { TerminalLine } from '$shared/types/terminal';
 import { terminalConfig } from './terminal-config';
 import { debug } from '$shared/utils/logger';
@@ -18,12 +21,16 @@ export class XTermService {
 	public terminal: Terminal | null = null;
 	public fitAddon: FitAddon | null = null;
 	public webLinksAddon: WebLinksAddon | null = null;
+	public clipboardAddon: ClipboardAddon | null = null;
+	private unicode11Addon: Unicode11Addon | null = null;
+	private ligaturesAddon: LigaturesAddon | null = null;
 	public isInitialized = false;
 	public isReady = false;
 
 	private sessionId: string | null = null;
 	private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
 	private inputDisposable: any = null;
+	private lastSentDims: { cols: number; rows: number } | null = null;
 
 	constructor() {
 		// Service is stateless by design
@@ -49,27 +56,39 @@ export class XTermService {
 			this.terminal = null;
 			this.fitAddon = null;
 			this.webLinksAddon = null;
+			this.clipboardAddon = null;
+				this.unicode11Addon = null;
+			this.ligaturesAddon = null;
 		}
 
 		try {
 			debug.log('terminal', '🚀 Initializing XTerm...');
 
 			// Dynamic import xterm classes
-			const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
-				import('xterm'),
+			const [{ Terminal }, { FitAddon }, { WebLinksAddon }, { ClipboardAddon }, { Unicode11Addon }] = await Promise.all([
+				import('@xterm/xterm'),
 				import('@xterm/addon-fit'),
-				import('@xterm/addon-web-links')
+				import('@xterm/addon-web-links'),
+				import('@xterm/addon-clipboard'),
+				import('@xterm/addon-unicode11')
 			]);
 
 			// Create terminal instance
 			this.terminal = new Terminal(terminalConfig);
 
-			// Create and load addons
+			// Create and load core addons
 			this.fitAddon = new FitAddon();
 			this.webLinksAddon = new WebLinksAddon();
+			this.clipboardAddon = new ClipboardAddon();
+			this.unicode11Addon = new Unicode11Addon();
 
 			this.terminal.loadAddon(this.fitAddon);
 			this.terminal.loadAddon(this.webLinksAddon);
+			this.terminal.loadAddon(this.clipboardAddon);
+			this.terminal.loadAddon(this.unicode11Addon);
+
+			// Enable Unicode 11 for better character width support
+			this.terminal.unicode.activeVersion = '11';
 
 			// Open terminal in container
 			this.terminal.open(container);
@@ -82,6 +101,16 @@ export class XTermService {
 				debug.log('terminal', '⚠️ Initial fit failed (container may have zero dimensions), will retry on resize');
 			}
 
+			// Try ligatures addon for font ligature rendering (non-critical)
+			try {
+				const { LigaturesAddon } = await import('@xterm/addon-ligatures');
+				this.ligaturesAddon = new LigaturesAddon();
+				this.terminal.loadAddon(this.ligaturesAddon);
+				debug.log('terminal', '🔤 Font ligatures enabled');
+			} catch {
+				debug.log('terminal', '⚠️ Ligatures addon not available');
+			}
+
 			this.isInitialized = true;
 			this.isReady = true;
 
@@ -94,6 +123,9 @@ export class XTermService {
 			}
 			this.fitAddon = null;
 			this.webLinksAddon = null;
+			this.clipboardAddon = null;
+				this.unicode11Addon = null;
+			this.ligaturesAddon = null;
 			debug.error('terminal', '❌ Failed to initialize XTerm:', error);
 		}
 	}
@@ -180,11 +212,12 @@ export class XTermService {
 	}
 
 	/**
-	 * Update terminal font size and refit to container
+	 * Update terminal font size, line height, and refit to container
 	 */
-	updateFontSize(size: number, sessionId?: string): void {
+	updateFontSize(size: number, lineHeight: number, sessionId?: string): void {
 		if (!this.terminal) return;
 		this.terminal.options.fontSize = size;
+		this.terminal.options.lineHeight = lineHeight / size;
 		this.fit(sessionId);
 	}
 
@@ -262,6 +295,12 @@ export class XTermService {
 				const dims = this.fitAddon.proposeDimensions();
 
 				if (dims && sessionId) {
+					// Skip if dimensions haven't changed
+					if (this.lastSentDims && this.lastSentDims.cols === dims.cols && this.lastSentDims.rows === dims.rows) {
+						return;
+					}
+					this.lastSentDims = { cols: dims.cols, rows: dims.rows };
+
 					// Notify backend of new terminal size via WebSocket HTTP
 					debug.log('terminal', `🔧 Syncing terminal size: ${dims.cols}x${dims.rows}`);
 					ws.http('terminal:resize', {
@@ -293,20 +332,11 @@ export class XTermService {
 	scrollToBottomIfNearEnd(): void {
 		if (!this.terminal) return;
 
-		const viewport = (this.terminal as any)._core?.viewport;
-		if (!viewport) {
-			this.scrollToBottom();
-			return;
-		}
-
-		const scrollTop = viewport._viewportElement.scrollTop;
-		const scrollHeight = viewport._viewportElement.scrollHeight;
-		const clientHeight = viewport._viewportElement.clientHeight;
+		const buffer = this.terminal.buffer.active;
+		const isNearBottom = buffer.viewportY >= buffer.baseY - 3;
 
-		// If within 3 lines of bottom, scroll to bottom
-		const threshold = this.terminal.rows * 3;
-		if (scrollHeight - scrollTop - clientHeight < threshold) {
-			this.scrollToBottom();
+		if (isNearBottom) {
+			this.terminal.scrollToBottom();
 		}
 	}
 
@@ -361,6 +391,21 @@ export class XTermService {
 		};
 	}
 
+	/**
+	 * Paste text by sending to PTY via WebSocket
+	 */
+	pasteText(text: string): void {
+		if (!this.sessionId || !text) return;
+		try {
+			ws.emit('terminal:input', {
+				sessionId: this.sessionId,
+				data: text
+			});
+		} catch (error) {
+			debug.error('terminal', '❌ Error pasting text:', error);
+		}
+	}
+
 	/**
 	 * Cleanup terminal resources
 	 */
@@ -382,6 +427,10 @@ export class XTermService {
 
 		this.fitAddon = null;
 		this.webLinksAddon = null;
+		this.clipboardAddon = null;
+		this.unicode11Addon = null;
+		this.ligaturesAddon = null;
+		this.lastSentDims = null;
 		this.isInitialized = false;
 		this.isReady = false;
 	}

package/frontend/lib/components/files/FileTree.svelte

@@ -222,19 +222,14 @@
 		}
 	}
 
-	// Toggle search visibility (preserve inputs, auto-submit on re-open)
-	function toggleSearch() {
-		searchVisible = !searchVisible;
-		if (searchVisible) {
-			setTimeout(() => {
-				searchInputRef?.focus();
-				// Auto-submit if there's already a query
-				if (searchQuery.trim()) {
-					performSearch();
-				}
-			}, 100);
-		}
-		// Don't clear search state on close - preserve inputs
+	function switchToSearch() {
+		searchVisible = true;
+		setTimeout(() => {
+			searchInputRef?.focus();
+			if (searchQuery.trim()) {
+				performSearch();
+			}
+		}, 100);
 	}
 
 	// Search functions
@@ -425,9 +420,9 @@
 
 <div class="relative flex flex-col h-full overflow-hidden">
 	<!-- Modern Header -->
-	<div class="px-5 py-3 border-b border-slate-200 dark:border-slate-700">
+	<div class="px-5 py-2.5 border-b border-slate-200 dark:border-slate-700">
 		<div class="flex items-start justify-between gap-2">
-			<div class="flex-1 min-w-0">
+			<div class="flex-1 min-w-0" title={projectState.currentProject?.path}>
 				<h3 class="text-sm font-bold text-slate-900 dark:text-slate-100">
 					{projectState.currentProject?.name}
 				</h3>
@@ -454,15 +449,7 @@
 						<Icon name="lucide:folder-plus" class="w-4 h-4" />
 					</button>
 				{/if}
-				<!-- Search toggle button -->
-				<button
-					class="flex flex-shrink-0 p-1.5 rounded-md transition-colors {searchVisible ? 'text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-900/30' : 'text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30'}"
-					onclick={toggleSearch}
-					title="Search"
-				>
-					<Icon name="lucide:search" class="w-4 h-4" />
-				</button>
-				{#if hasClipboard && onPasteToRoot}
+					{#if hasClipboard && onPasteToRoot}
 					<button
 						class="flex flex-shrink-0 p-1.5 text-slate-600 dark:text-slate-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-50 dark:hover:bg-violet-900/30 rounded-md transition-colors"
 						onclick={onPasteToRoot}
@@ -475,7 +462,29 @@
 		</div>
 	</div>
 
-	<!-- Search Bar (toggle) -->
+	<!-- Tab Navigation -->
+	<div class="relative flex border-b border-slate-200 dark:border-slate-700">
+		<button
+			onclick={() => { searchVisible = false; }}
+			class="relative flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium transition-colors {!searchVisible ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
+		>
+			Explorer
+			{#if !searchVisible}
+				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+			{/if}
+		</button>
+		<button
+			onclick={switchToSearch}
+			class="relative flex-1 flex items-center justify-center px-3 py-2 text-xs font-medium transition-colors {searchVisible ? 'text-violet-600 dark:text-violet-400' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
+		>
+			Search
+			{#if searchVisible}
+				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+			{/if}
+		</button>
+	</div>
+
+	<!-- Search Bar -->
 	{#if searchVisible}
 		<div class="px-3 py-2 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
 			<!-- Search Input -->