@myrialabs/clopen 0.1.6 → 0.1.8

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}

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

@@ -25,14 +25,13 @@
 		lanes: Array<{ col: number; color: string }>;
 		mergeFrom: Array<{ col: number; color: string }>;
 		branchTo: Array<{ col: number; color: string }>;
-		/** Which lane columns existed in the previous row (for drawing top half of lines) */
+		branchToCols: Set<number>;
 		prevLaneCols: Set<number>;
-		/** Which lane columns will exist in the next row (for drawing bottom half of lines) */
 		nextLaneCols: Set<number>;
-		/** Whether this node's lane existed in the previous row */
 		nodeHasTop: boolean;
-		/** Whether this node's lane continues to the next row */
 		nodeHasBottom: boolean;
+		/** Max column index used in this row (for per-row graph width) */
+		maxCol: number;
 	}
 
 	const LANE_COLORS = [
@@ -41,10 +40,6 @@
 	];
 
 	const graphRows = $derived(computeGraph(commits));
-	const maxCols = $derived(graphRows.reduce((max, row) => {
-		const cols = [row.col, ...row.lanes.map(l => l.col), ...row.mergeFrom.map(m => m.col), ...row.branchTo.map(b => b.col)];
-		return Math.max(max, ...cols);
-	}, 0) + 1);
 
 	function computeGraph(commits: GitCommit[]): GraphRow[] {
 		if (commits.length === 0) return [];
@@ -53,6 +48,7 @@
 		const laneColorMap = new Map<number, string>();
 		let colorIdx = 0;
 		const rows: GraphRow[] = [];
+		const processedSet = new Set<string>();
 
 		function getColor(col: number): string {
 			if (!laneColorMap.has(col)) {
@@ -70,7 +66,6 @@
 			return s;
 		}
 
-		// Track previous row's active lane columns
 		let prevActiveCols = new Set<number>();
 
 		for (const commit of commits) {
@@ -81,11 +76,13 @@
 
 			let col: number;
 			const mergeFrom: Array<{ col: number; color: string }> = [];
+			const mergeFromCols = new Set<number>();
 
 			if (myLanes.length > 0) {
 				col = myLanes[0];
 				for (let i = 1; i < myLanes.length; i++) {
 					mergeFrom.push({ col: myLanes[i], color: getColor(myLanes[i]) });
+					mergeFromCols.add(myLanes[i]);
 					lanes[myLanes[i]] = null;
 				}
 			} else {
@@ -97,17 +94,26 @@
 			getColor(col);
 			const nodeHasTop = prevActiveCols.has(col);
 
-			// Snapshot current active lanes (before parent assignment)
 			const currentPrevCols = new Set(prevActiveCols);
 
 			const branchTo: Array<{ col: number; color: string }> = [];
+			const branchToCols = new Set<number>();
 			if (commit.parents.length > 0) {
-				lanes[col] = commit.parents[0];
+				// First parent: skip if already processed (non-topo edge case)
+				if (processedSet.has(commit.parents[0])) {
+					lanes[col] = null;
+				} else {
+					lanes[col] = commit.parents[0];
+				}
 
 				for (let p = 1; p < commit.parents.length; p++) {
+					// Skip parents that were already processed
+					if (processedSet.has(commit.parents[p])) continue;
+
 					const existingIdx = lanes.indexOf(commit.parents[p]);
 					if (existingIdx >= 0 && existingIdx !== col) {
 						branchTo.push({ col: existingIdx, color: getColor(existingIdx) });
+						branchToCols.add(existingIdx);
 					} else {
 						let newCol = -1;
 						for (let i = 0; i < lanes.length; i++) {
@@ -119,6 +125,7 @@
 						}
 						lanes[newCol] = commit.parents[p];
 						branchTo.push({ col: newCol, color: getColor(newCol) });
+						branchToCols.add(newCol);
 					}
 				}
 			} else {
@@ -134,18 +141,27 @@
 
 			const nextActiveCols = getActiveCols();
 
+			// Calculate max column used in this row
+			let rowMaxCol = col;
+			for (const lane of activeLanes) rowMaxCol = Math.max(rowMaxCol, lane.col);
+			for (const m of mergeFrom) rowMaxCol = Math.max(rowMaxCol, m.col);
+			for (const b of branchTo) rowMaxCol = Math.max(rowMaxCol, b.col);
+
 			rows.push({
 				col,
 				nodeColor: getColor(col),
 				lanes: activeLanes,
 				mergeFrom,
 				branchTo,
+				branchToCols,
 				prevLaneCols: currentPrevCols,
 				nextLaneCols: nextActiveCols,
 				nodeHasTop,
-				nodeHasBottom: nextActiveCols.has(col)
+				nodeHasBottom: nextActiveCols.has(col),
+				maxCol: rowMaxCol
 			});
 
+			processedSet.add(commit.hash);
 			prevActiveCols = nextActiveCols;
 
 			while (lanes.length > 0 && lanes[lanes.length - 1] === null) {
@@ -160,9 +176,18 @@
 	// Helpers
 	// ========================
 
-	const LANE_WIDTH = 16;
-	const ROW_HEIGHT = 40;
-	const NODE_R = 4;
+	const LANE_WIDTH = 10;
+	const ROW_HEIGHT = 48;
+	const NODE_R = 3;
+	const GRAPH_PAD = 3;
+	const LINE_W = '1.5';
+	const MAX_VISIBLE_REFS = 3;
+	const MAX_REF_LENGTH = 22;
+
+	function truncateRef(ref: string): string {
+		if (ref.length <= MAX_REF_LENGTH) return ref;
+		return ref.substring(0, MAX_REF_LENGTH - 1) + '\u2026';
+	}
 
 	function formatDate(dateStr: string): string {
 		const date = new Date(dateStr);
@@ -194,7 +219,7 @@
 	}
 </script>
 
-<div class="h-full flex flex-col">
+<div class="flex-1 min-h-0 flex flex-col">
 	{#if isLoading && commits.length === 0}
 		<div class="flex-1 flex items-center justify-center">
 			<div class="w-5 h-5 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
@@ -205,15 +230,16 @@
 			<span>No commits yet</span>
 		</div>
 	{:else}
-		<div class="flex-1 overflow-y-auto">
+		<div class="flex-1 overflow-y-auto overflow-x-hidden pt-2">
 			{#each commits as commit, idx (commit.hash)}
 				{@const graph = graphRows[idx]}
-				{@const graphWidth = Math.max(maxCols, 1) * LANE_WIDTH + 8}
+				{@const graphWidth = (graph ? graph.maxCol + 1 : 1) * LANE_WIDTH + GRAPH_PAD * 2}
 				<div
 					class="group flex items-stretch w-full text-left cursor-pointer transition-colors
 						{selectedHash === commit.hash
 							? 'bg-violet-50 dark:bg-violet-900/10'
 							: 'hover:bg-slate-50 dark:hover:bg-slate-800/40'}"
+					style="height: {ROW_HEIGHT}px;"
 					role="button"
 					tabindex="0"
 					onclick={() => handleViewCommit(commit.hash)}
@@ -221,124 +247,124 @@
 				>
 					<!-- Git Graph Column -->
 					{#if graph}
-						<div class="shrink-0 relative" style="width: {graphWidth}px; min-height: {ROW_HEIGHT}px;">
-							<svg class="absolute inset-0 w-full h-full" style="overflow: visible;">
-								<!-- Vertical lines for active lanes (pass-through) -->
+						<div class="shrink-0 relative" style="width: {graphWidth}px;">
+							<svg class="absolute inset-0 w-full h-full">
+								<!-- Vertical lines for pass-through lanes (skip node col and branchTo cols) -->
 								{#each graph.lanes as lane}
-									{@const lx = lane.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
-									{@const hasTop = graph.prevLaneCols.has(lane.col)}
-									{@const hasBottom = true}
-									<line
-										x1={lx} y1={hasTop ? 0 : ROW_HEIGHT / 2}
-										x2={lx} y2={hasBottom ? ROW_HEIGHT : ROW_HEIGHT / 2}
-										stroke={lane.color}
-										stroke-width="2"
-										opacity="0.4"
-									/>
+									{#if lane.col !== graph.col && !graph.branchToCols.has(lane.col)}
+										{@const lx = lane.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
+										{@const hasTop = graph.prevLaneCols.has(lane.col)}
+										<line
+											x1={lx} y1={hasTop ? 0 : ROW_HEIGHT / 2}
+											x2={lx} y2={ROW_HEIGHT}
+											stroke={lane.color}
+											stroke-width={LINE_W}
+										/>
+									{/if}
 								{/each}
 
-								<!-- Merge lines (from other lanes into this commit's node) -->
+								<!-- Top-half lines for branchTo cols that existed in previous row (skip if also mergeFrom) -->
+								{#each graph.branchTo as branch}
+									{#if graph.prevLaneCols.has(branch.col) && !graph.mergeFrom.some(m => m.col === branch.col)}
+										{@const bx = branch.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
+										<line
+											x1={bx} y1={0}
+											x2={bx} y2={ROW_HEIGHT / 2}
+											stroke={branch.color}
+											stroke-width={LINE_W}
+										/>
+									{/if}
+								{/each}
+
+								<!-- Merge curves (from other lanes into this node) -->
 								{#each graph.mergeFrom as merge}
-									{@const mx = merge.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
-									{@const nx = graph.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
+									{@const mx = merge.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
+									{@const nx = graph.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
 									<path
 										d="M {mx} 0 C {mx} {ROW_HEIGHT * 0.4}, {nx} {ROW_HEIGHT * 0.3}, {nx} {ROW_HEIGHT / 2}"
 										fill="none"
 										stroke={merge.color}
-										stroke-width="2"
-										opacity="0.5"
+										stroke-width={LINE_W}
 									/>
 								{/each}
 
-								<!-- Branch lines (from this node to new lanes) -->
+								<!-- Branch curves (from this node to new lanes) -->
 								{#each graph.branchTo as branch}
-									{@const bx = branch.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
-									{@const nx = graph.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
+									{@const bx = branch.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
+									{@const nx = graph.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
 									<path
 										d="M {nx} {ROW_HEIGHT / 2} C {nx} {ROW_HEIGHT * 0.7}, {bx} {ROW_HEIGHT * 0.6}, {bx} {ROW_HEIGHT}"
 										fill="none"
 										stroke={branch.color}
-										stroke-width="2"
-										opacity="0.5"
+										stroke-width={LINE_W}
 									/>
 								{/each}
 
 								<!-- Main vertical line through this node's lane -->
 								<line
-									x1={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + 4} y1={graph.nodeHasTop ? 0 : ROW_HEIGHT / 2}
-									x2={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + 4} y2={graph.nodeHasBottom ? ROW_HEIGHT : ROW_HEIGHT / 2}
+									x1={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD} y1={graph.nodeHasTop ? 0 : ROW_HEIGHT / 2}
+									x2={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD} y2={graph.nodeHasBottom ? ROW_HEIGHT : ROW_HEIGHT / 2}
 									stroke={graph.nodeColor}
-									stroke-width="2"
-									opacity="0.4"
+									stroke-width={LINE_W}
 								/>
 
 								<!-- Node circle -->
 								<circle
-									cx={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
+									cx={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + GRAPH_PAD}
 									cy={ROW_HEIGHT / 2}
-									r={commit.parents.length > 1 ? NODE_R + 1 : NODE_R}
+									r={NODE_R}
 									fill={graph.nodeColor}
 									stroke="white"
-									stroke-width="2"
+									stroke-width="1.5"
 								/>
-								{#if commit.parents.length > 1}
-									<circle
-										cx={graph.col * LANE_WIDTH + LANE_WIDTH / 2 + 4}
-										cy={ROW_HEIGHT / 2}
-										r={NODE_R + 3}
-										fill="none"
-										stroke={graph.nodeColor}
-										stroke-width="1.5"
-										opacity="0.5"
-									/>
-								{/if}
 							</svg>
 						</div>
 					{/if}
 
-					<!-- Commit info -->
-					<div class="flex-1 min-w-0 flex items-center gap-2 px-2 py-1.5">
-						<div class="flex-1 min-w-0">
-							<p class="text-sm text-slate-900 dark:text-slate-100 leading-snug truncate">
+					<!-- Commit info (3-line layout) -->
+					<div class="flex-1 min-w-0 px-1.5 py-0.5 flex flex-col justify-center overflow-hidden">
+						<!-- Line 1: Message + Date -->
+						<div class="flex items-center gap-2">
+							<p class="flex-1 min-w-0 text-sm text-slate-900 dark:text-slate-100 leading-tight truncate">
 								{commit.message}
 							</p>
-							<div class="flex items-center gap-2 mt-0.5">
-								<span class="text-xs font-mono text-violet-600 dark:text-violet-400">
-									{commit.hashShort}
-								</span>
-								<span class="text-xs text-slate-500 truncate">{commit.author}</span>
-								{#if commit.refs && commit.refs.length > 0}
-									{#each commit.refs as ref}
-										<span class="text-3xs px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 truncate shrink-0">
-											{ref}
-										</span>
-									{/each}
-								{/if}
-							</div>
+							<span class="text-3xs text-slate-400 shrink-0">{formatDate(commit.date)}</span>
 						</div>
 
-						<!-- Actions -->
-						<div class="items-center gap-0.5 shrink-0 hidden group-hover:flex">
+						<!-- Line 2: Hash + Author -->
+						<div class="flex items-center gap-1.5 mt-px">
 							<button
 								type="button"
-								class="flex items-center justify-center w-7 h-7 rounded-md text-slate-400 hover:bg-violet-500/10 hover:text-violet-600 transition-colors bg-transparent border-none cursor-pointer"
+								class="text-xs font-mono text-violet-600 dark:text-violet-400 hover:text-violet-800 dark:hover:text-violet-300 bg-transparent border-none cursor-pointer p-0 shrink-0 transition-colors"
 								onclick={(e) => copyCommitHash(commit.hash, e)}
-								title="Copy full commit hash"
-							>
-								<Icon name="lucide:copy" class="w-3.5 h-3.5" />
-							</button>
-							<button
-								type="button"
-								class="flex items-center justify-center w-7 h-7 rounded-md text-slate-400 hover:bg-violet-500/10 hover:text-violet-600 transition-colors bg-transparent border-none cursor-pointer"
-								onclick={(e) => { e.stopPropagation(); copyCommitHash(commit.hashShort, e); }}
-								title="Copy short hash"
+								title="Copy commit hash"
 							>
-								<Icon name="lucide:hash" class="w-3.5 h-3.5" />
+								{commit.hashShort}
 							</button>
+							<span class="text-xs text-slate-500 truncate">{commit.author}</span>
 						</div>
 
-						<!-- Date -->
-						<span class="text-xs text-slate-400 shrink-0">{formatDate(commit.date)}</span>
+						<!-- Line 3: Refs -->
+						{#if commit.refs && commit.refs.length > 0}
+							<div class="flex items-center gap-1 mt-px overflow-hidden">
+								{#each commit.refs.slice(0, MAX_VISIBLE_REFS) as ref}
+									<span
+										class="text-3xs px-1 py-px rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0 truncate max-w-28"
+										title={ref}
+									>
+										{truncateRef(ref)}
+									</span>
+								{/each}
+								{#if commit.refs.length > MAX_VISIBLE_REFS}
+									<span
+										class="text-3xs px-1 py-px rounded bg-slate-500/10 text-slate-500 shrink-0 cursor-default"
+										title={commit.refs.slice(MAX_VISIBLE_REFS).join(', ')}
+									>
+										+{commit.refs.length - MAX_VISIBLE_REFS}
+									</span>
+								{/if}
+							</div>
+						{/if}
 					</div>
 				</div>
 			{/each}

package/frontend/lib/components/settings/engines/AIEnginesSettings.svelte

@@ -7,7 +7,7 @@
 	import { isDarkMode } from '$frontend/lib/utils/theme';
 	import { ENGINES } from '$shared/constants/engines';
 	import { claudeAccountsStore, type ClaudeAccountItem as ClaudeCodeAccountItem } from '$frontend/lib/stores/features/claude-accounts.svelte';
-	import type { Terminal } from 'xterm';
+	import type { Terminal } from '@xterm/xterm';
 	import type { FitAddon } from '@xterm/addon-fit';
 
 	const claudeCodeEngine = ENGINES.find(e => e.type === 'claude-code')!;
@@ -99,11 +99,11 @@
 		if (!browser || !debugTermContainer || debugTerminal) return;
 
 		const [{ Terminal }, { FitAddon }] = await Promise.all([
-			import('xterm'),
+			import('@xterm/xterm'),
 			import('@xterm/addon-fit')
 		]);
 
-		await import('xterm/css/xterm.css');
+		await import('@xterm/xterm/css/xterm.css');
 
 		debugTerminal = new Terminal({
 			theme: {