@myrialabs/clopen 0.1.7 → 0.1.9

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

@@ -420,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>
@@ -466,9 +466,8 @@
 	<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 gap-1.5 px-3 py-1.5 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'}"
+			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'}"
 		>
-			<Icon name="lucide:folder" class="w-3.5 h-3.5" />
 			Explorer
 			{#if !searchVisible}
 				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
@@ -476,9 +475,8 @@
 		</button>
 		<button
 			onclick={switchToSearch}
-			class="relative flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 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'}"
+			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'}"
 		>
-			<Icon name="lucide:search" class="w-3.5 h-3.5" />
 			Search
 			{#if searchVisible}
 				<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>

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

@@ -85,33 +85,8 @@
 	// PDF blob URL
 	let pdfBlobUrl = $state<string | null>(null);
 
-	// Container ref for measuring height
-	let containerRef = $state<HTMLDivElement | null>(null);
-	let editorHeight = $state('0px'); // Default height
-
-	// Update editor height based on container
-	function updateEditorHeight() {
-		if (containerRef) {
-			const rect = containerRef.getBoundingClientRect();
-			// Get actual available height
-			const availableHeight = rect.height;
-			if (availableHeight > 0) {
-				const adjustedHeight = availableHeight;
-				editorHeight = `${Math.max(200, adjustedHeight)}px`;
-			} else {
-				const viewportHeight = window.innerHeight;
-				const estimatedHeight = viewportHeight - 200;
-				editorHeight = `${Math.max(400, estimatedHeight)}px`;
-			}
-		}
-	}
-
-	// Update height on mount and resize
+	// Keyboard shortcut for save
 	onMount(() => {
-		setTimeout(updateEditorHeight, 100);
-
-		window.addEventListener('resize', updateEditorHeight);
-
 		function handleKeyDown(e: KeyboardEvent) {
 			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
 				e.preventDefault();
@@ -123,21 +98,7 @@
 
 		window.addEventListener('keydown', handleKeyDown);
 
-		if (containerRef && typeof ResizeObserver !== 'undefined') {
-			const resizeObserver = new ResizeObserver(() => {
-				updateEditorHeight();
-			});
-			resizeObserver.observe(containerRef);
-
-			return () => {
-				resizeObserver.disconnect();
-				window.removeEventListener('resize', updateEditorHeight);
-				window.removeEventListener('keydown', handleKeyDown);
-			};
-		}
-
 		return () => {
-			window.removeEventListener('resize', updateEditorHeight);
 			window.removeEventListener('keydown', handleKeyDown);
 		};
 	});
@@ -152,14 +113,6 @@
 		}
 	});
 
-	// Update height when container ref changes
-	$effect(() => {
-		if (containerRef) {
-			updateEditorHeight();
-		}
-	});
-
-
 	// Load binary content (images, PDF) via WebSocket when file changes
 	$effect(() => {
 		if (file && (isImageFile(file.name) || isPdfFile(file.name))) {
@@ -577,38 +530,35 @@
 					</div>
 				{:else}
 					<!-- SVG code view (editable) -->
-					<div class="h-full flex flex-col" bind:this={containerRef}>
-						<div class="flex-1 bg-slate-50 dark:bg-slate-950 overflow-hidden">
-							<div class="h-full flex flex-col">
-								<div class="flex-1">
-									{#key themeKey}
-									<MonacoEditor
-										bind:this={monacoEditorRef}
-										bind:value={editableContent}
-										language="xml"
-										readonly={false}
-										onChange={handleContentChange}
-										height={editorHeight}
-										options={{
-											minimap: { enabled: false },
-											wordWrap: 'off',
-											renderWhitespace: 'none',
-											mouseWheelZoom: false
-										}}
-									/>
-									{/key}
-								</div>
-
-								{#if hasChanges}
-									<div class="flex-shrink-0 p-4 bg-amber-50 dark:bg-amber-900/30 border-t border-amber-200 dark:border-amber-800">
-										<div class="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
-											<Icon name="lucide:circle-alert" class="w-3 h-3" />
-											Unsaved changes
-										</div>
-									</div>
-								{/if}
+					<div class="h-full flex flex-col bg-slate-50 dark:bg-slate-950">
+						<div class="flex-1 relative overflow-hidden">
+							<div class="absolute inset-0">
+								{#key themeKey}
+								<MonacoEditor
+									bind:this={monacoEditorRef}
+									bind:value={editableContent}
+									language="xml"
+									readonly={false}
+									onChange={handleContentChange}
+									options={{
+										minimap: { enabled: false },
+										wordWrap: 'off',
+										renderWhitespace: 'none',
+										mouseWheelZoom: false
+									}}
+								/>
+								{/key}
 							</div>
 						</div>
+
+						{#if hasChanges}
+							<div class="flex-shrink-0 p-4 bg-amber-50 dark:bg-amber-900/30 border-t border-amber-200 dark:border-amber-800">
+								<div class="text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
+									<Icon name="lucide:circle-alert" class="w-3 h-3" />
+									Unsaved changes
+								</div>
+							</div>
+						{/if}
 					</div>
 				{/if}
 			{:else if isPdfFile(file.name)}
@@ -644,29 +594,23 @@
 				</div>
 			{:else}
 				<!-- Code content (always in edit mode) -->
-				<div class="h-full flex flex-col" bind:this={containerRef}>
-					<div class="flex-1 bg-slate-50 dark:bg-slate-950 overflow-hidden">
-						<div class="h-full flex flex-col">
-							<div class="flex-1">
-								{#key themeKey}
-								<MonacoEditor
-									bind:this={monacoEditorRef}
-									bind:value={editableContent}
-									language={getDetectedLanguage()}
-									readonly={false}
-									onChange={handleContentChange}
-									height={editorHeight}
-									options={{
-										minimap: { enabled: false },
-										wordWrap: wordWrap ? 'on' : 'off',
-										renderWhitespace: 'none',
-										mouseWheelZoom: false
-									}}
-								/>
-								{/key}
-							</div>
-
-						</div>
+				<div class="h-full relative bg-slate-50 dark:bg-slate-950">
+					<div class="absolute inset-0">
+						{#key themeKey}
+						<MonacoEditor
+							bind:this={monacoEditorRef}
+							bind:value={editableContent}
+							language={getDetectedLanguage()}
+							readonly={false}
+							onChange={handleContentChange}
+							options={{
+								minimap: { enabled: false },
+								wordWrap: wordWrap ? 'on' : 'off',
+								renderWhitespace: 'none',
+								mouseWheelZoom: false
+							}}
+						/>
+						{/key}
 					</div>
 				</div>
 			{/if}

package/frontend/lib/components/git/CommitForm.svelte

@@ -42,7 +42,7 @@
 	}
 </script>
 
-<div class="px-2 pb-2">
+<div class="px-2 py-2">
 	<div class="flex flex-col gap-1.5">
 		<textarea
 			bind:this={textareaEl}