@myrialabs/clopen 0.1.8 → 0.1.10

package/backend/ws/user/crud.ts

@@ -108,7 +108,8 @@ export const crudHandler = createRouter()
 		response: t.Object({
 			currentProjectId: t.Union([t.String(), t.Null()]),
 			lastView: t.Union([t.String(), t.Null()]),
-			settings: t.Union([t.Any(), t.Null()])
+			settings: t.Union([t.Any(), t.Null()]),
+			unreadSessions: t.Union([t.Any(), t.Null()])
 		})
 	}, async ({ conn }) => {
 		const userId = ws.getUserId(conn);
@@ -116,17 +117,20 @@ export const crudHandler = createRouter()
 		const currentProjectId = getUserState(userId, 'currentProjectId') as string | null;
 		const lastView = getUserState(userId, 'lastView') as string | null;
 		const userSettings = getUserState(userId, 'settings');
+		const unreadSessions = getUserState(userId, 'unreadSessions');
 
 		debug.log('user', `Restored state for ${userId}:`, {
 			currentProjectId,
 			lastView,
-			hasSettings: !!userSettings
+			hasSettings: !!userSettings,
+			unreadSessionsCount: unreadSessions ? Object.keys(unreadSessions).length : 0
 		});
 
 		return {
 			currentProjectId: currentProjectId ?? null,
 			lastView: lastView ?? null,
-			settings: userSettings ?? null
+			settings: userSettings ?? null,
+			unreadSessions: unreadSessions ?? null
 		};
 	})
 
@@ -143,7 +147,7 @@ export const crudHandler = createRouter()
 		const userId = ws.getUserId(conn);
 
 		// Validate allowed keys to prevent arbitrary data storage
-		const allowedKeys = ['currentProjectId', 'lastView', 'settings'];
+		const allowedKeys = ['currentProjectId', 'lastView', 'settings', 'unreadSessions'];
 		if (!allowedKeys.includes(data.key)) {
 			throw new Error(`Invalid state key: ${data.key}. Allowed: ${allowedKeys.join(', ')}`);
 		}

package/bin/clopen.ts

@@ -368,7 +368,23 @@ async function main() {
 
 		// Show version if requested
 		if (options.version) {
-			console.log(getVersion());
+			const currentVersion = getVersion();
+			console.log(`v${currentVersion}`);
+
+			try {
+				const response = await fetch('https://registry.npmjs.org/@myrialabs/clopen/latest');
+				if (response.ok) {
+					const data = await response.json() as { version: string };
+					if (isNewerVersion(currentVersion, data.version)) {
+						console.log(`\x1b[33mUpdate available: v${data.version}\x1b[0m — run \x1b[36mclopen update\x1b[0m to update`);
+					} else {
+						console.log('\x1b[32m(latest)\x1b[0m');
+					}
+				}
+			} catch {
+				// Silent fail — network unavailable
+			}
+
 			process.exit(0);
 		}
 

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

@@ -407,7 +407,7 @@
 			class="
 			relative z-10 flex items-end gap-3 lg:gap-4 overflow-hidden bg-white dark:bg-slate-900
 			border border-slate-200 dark:border-slate-700 rounded-xl transition-all duration-200
-			focus-within:ring-2 focus-within:ring-violet-500 {fileHandling.isDragging && 'ring-2 ring-violet-500'}"
+			focus-within:ring-1 focus-within:ring-violet-500 {fileHandling.isDragging && 'ring-1 ring-violet-500'}"
 			role="region"
 			aria-label="Message input with file drop zone"
 			ondragover={fileHandling.handleDragOver}
@@ -428,7 +428,6 @@
 						placeholder={chatPlaceholder}
 						class="flex-1 w-full px-4 pt-2 pb-4 border-0 bg-transparent resize-none focus:outline-none text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 text-base leading-relaxed disabled:opacity-50 disabled:cursor-not-allowed"
 						rows="1"
-						style="max-height: 22.5rem; overflow-y: hidden;"
 						disabled={isInputDisabled}
 						oninput={handleTextareaInput}
 						onkeydown={handleKeyDown}

package/frontend/lib/components/chat/input/components/EngineModelPicker.svelte

@@ -122,9 +122,9 @@
 	// Model Picker (existing logic)
 	// ════════════════════════════════════════════
 
-	// Track whether a chat has started (any user message in current session)
+	// Track whether a chat has started (any user message in current session, or session has history e.g. restored to initial)
 	const hasStartedChat = $derived(
-		sessionState.messages.some(m => m.type === 'user')
+		sessionState.messages.some(m => m.type === 'user') || sessionState.hasMessageHistory
 	);
 
 	// Engine lock: once chat starts, the engine is locked for this session.

package/frontend/lib/components/chat/input/composables/use-chat-actions.svelte.ts

@@ -45,10 +45,10 @@ export function useChatActions(params: ChatActionsParams) {
 		// If in edit mode, restore to parent of edited message first
 		if (editModeState.isEditing) {
 			try {
-				// Restore to parent of edited message (if exists)
-				const restoreTargetId = editModeState.parentMessageId || editModeState.messageId;
-
-				if (restoreTargetId && sessionState.currentSession?.id) {
+				if (sessionState.currentSession?.id) {
+					// Restore to parent of edited message (state before the edited message)
+					// When parentMessageId is null (editing first message), restore to initial state
+					const restoreTargetId = editModeState.parentMessageId || '__initial__';
 					await snapshotService.restore(restoreTargetId, sessionState.currentSession.id);
 				}
 

package/frontend/lib/components/chat/input/composables/use-textarea-resize.svelte.ts

@@ -7,33 +7,25 @@ export function useTextareaResize() {
 		messageText: string
 	) {
 		if (textareaElement) {
-			// Reset height to auto first to get accurate scrollHeight
+			// Hide overflow during measurement to prevent scrollbar from affecting width
+			textareaElement.style.overflowY = 'hidden';
+			// Reset height to auto to get accurate scrollHeight
 			textareaElement.style.height = 'auto';
 
 			// If content is empty or only whitespace, keep at minimum height
 			if (!messageText || !messageText.trim()) {
-				// Force single line height
-				textareaElement.style.height = 'auto';
-				textareaElement.style.overflowY = 'hidden';
 				return;
 			}
 
-			// Calculate required height based on content
-			const scrollHeight = textareaElement.scrollHeight + 7;
-			const lineHeight = parseInt(getComputedStyle(textareaElement).lineHeight) || 24;
-			const paddingTop = parseInt(getComputedStyle(textareaElement).paddingTop) || 0;
-			const paddingBottom = parseInt(getComputedStyle(textareaElement).paddingBottom) || 0;
-			const minHeight = lineHeight + paddingTop + paddingBottom;
+			// Measure content height and cap at max
+			const scrollHeight = textareaElement.scrollHeight;
+			const newHeight = Math.min(scrollHeight, MAX_HEIGHT_PX);
+			textareaElement.style.height = newHeight + 'px';
 
-			const newHeight = Math.max(minHeight, scrollHeight);
-
-			if (newHeight >= MAX_HEIGHT_PX) {
-				textareaElement.style.height = '22.5rem';
-				textareaElement.style.overflowY = 'auto';
-			} else {
-				textareaElement.style.height = newHeight / 16 + 'rem';
-				textareaElement.style.overflowY = 'hidden';
-			}
+			// Check actual overflow AFTER setting height to handle edge cases
+			// where collapsed measurement differs from rendered content height
+			textareaElement.style.overflowY =
+				textareaElement.scrollHeight > textareaElement.clientHeight ? 'auto' : 'hidden';
 		}
 	}
 

package/frontend/lib/components/checkpoint/TimelineModal.svelte

@@ -13,6 +13,7 @@
 	import { snapshotService } from '$frontend/lib/services/snapshot/snapshot.service';
 	import type { RestoreConflict, ConflictResolution } from '$frontend/lib/services/snapshot/snapshot.service';
 	import type { TimelineResponse, GraphNode, GraphEdge, VersionGroup, AnimationState } from './timeline/types';
+	import ws from '$frontend/lib/utils/ws';
 
 	let {
 		isOpen = $bindable(false),
@@ -107,6 +108,19 @@
 		}
 	});
 
+	// Reload timeline when a snapshot is captured (stats become available after stream ends)
+	$effect(() => {
+		if (!isOpen) return;
+
+		const unsub = ws.on('snapshot:captured', (data: { chatSessionId: string }) => {
+			if (data.chatSessionId === sessionId && !processingAction && !animationState.isAnimating) {
+				loadTimeline();
+			}
+		});
+
+		return unsub;
+	});
+
 	// Scroll to bottom on initial load
 	$effect(() => {
 		if (timelineData && graphNodes.length > 0 && scrollContainer && !hasScrolledToBottom) {
@@ -445,9 +459,7 @@
 	type="warning"
 	title="Restore Checkpoint"
 	message={pendingNode
-		? `Are you sure you want to restore to this checkpoint?
-"${getTruncatedMessage(pendingNode.checkpoint.messageText)}"
-This will restore your files to this point within this session.`
+		? `Are you sure you want to restore to this checkpoint?\n"${getTruncatedMessage(pendingNode.checkpoint.messageText)}"\nThis will restore your files to this point within this session.`
 		: ''}
 	confirmText="Restore"
 	cancelText="Cancel"

package/frontend/lib/components/checkpoint/timeline/TimelineNode.svelte

@@ -21,6 +21,7 @@
 
 	const pos = $derived(getInterpolatedPosition(node, animationState));
 	const nodeClass = $derived(getInterpolatedNodeClass(node));
+	const isInitial = $derived(!!node.checkpoint.isInitial);
 </script>
 
 <!-- Node group -->
@@ -33,6 +34,7 @@
 	aria-label={`${node.type === 'main' ? 'Checkpoint' : 'Version'} - ${node.checkpoint.messageText}`}
 >
 	<title>{node.checkpoint.messageText}</title>
+
 	<!-- Node circle -->
 	<circle
 		cx={pos.x}
@@ -84,25 +86,34 @@
 		height={SIZE.labelHeight - 8}
 	>
 		<div class="flex flex-col h-full justify-center pointer-events-none">
-			<!-- Timestamp and file stats in one line -->
-			<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 leading-tight">
-				<span>{formatTime(node.checkpoint.timestamp)}</span>
-				<span class="w-px h-3 bg-slate-300 dark:bg-slate-600"></span>
-				<span class="flex items-center gap-0.5">
-					<Icon name="lucide:file-text" class="w-2.5 h-2.5" />
-					{node.checkpoint.filesChanged ?? 0}
-				</span>
-				<span class="text-green-600 dark:text-green-400">
-					+{node.checkpoint.insertions ?? 0}
-				</span>
-				<span class="text-red-600 dark:text-red-400">
-					-{node.checkpoint.deletions ?? 0}
-				</span>
-			</div>
-			<!-- Message text below timestamp with auto truncation -->
-			<div class="text-sm text-slate-900 dark:text-slate-100 leading-tight truncate mt-0.5">
-				{node.checkpoint.messageText}
-			</div>
+			{#if isInitial}
+				<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 leading-tight">
+					<span>{formatTime(node.checkpoint.timestamp)}</span>
+				</div>
+				<div class="text-sm text-slate-900 dark:text-slate-100 leading-tight truncate mt-0.5">
+					Session Start
+				</div>
+			{:else}
+				<!-- Timestamp and file stats in one line -->
+				<div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 leading-tight">
+					<span>{formatTime(node.checkpoint.timestamp)}</span>
+					<span class="w-px h-3 bg-slate-300 dark:bg-slate-600"></span>
+					<span class="flex items-center gap-0.5">
+						<Icon name="lucide:file-text" class="w-2.5 h-2.5" />
+						{node.checkpoint.filesChanged ?? 0}
+					</span>
+					<span class="text-green-600 dark:text-green-400">
+						+{node.checkpoint.insertions ?? 0}
+					</span>
+					<span class="text-red-600 dark:text-red-400">
+						-{node.checkpoint.deletions ?? 0}
+					</span>
+				</div>
+				<!-- Message text below timestamp with auto truncation -->
+				<div class="text-sm text-slate-900 dark:text-slate-100 leading-tight truncate mt-0.5">
+					{node.checkpoint.messageText}
+				</div>
+			{/if}
 		</div>
 	</foreignObject>
 </g>

package/frontend/lib/components/checkpoint/timeline/types.ts

@@ -2,6 +2,9 @@
  * Timeline data structures and type definitions
  */
 
+/** Sentinel ID for the "initial state" node (before any chat messages) */
+export const INITIAL_NODE_ID = '__initial__';
+
 export interface CheckpointNode {
 	id: string;
 	messageId: string;
@@ -13,6 +16,7 @@ export interface CheckpointNode {
 	isOrphaned: boolean;
 	isCurrent: boolean;
 	hasSnapshot: boolean;
+	isInitial?: boolean; // true for the "initial state" node
 	senderName?: string | null;
 	// File change statistics (git-like)
 	filesChanged?: number;

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

@@ -30,11 +30,13 @@
 		if (!textareaEl) return;
 		// Reset to single line to measure content
 		textareaEl.style.height = 'auto';
-		// Line height is ~20px for text-xs, so 5 lines max = 100px
+		// Line height is ~20px for text-sm, so 5 lines max = 100px
 		const lineHeight = 20;
 		const maxHeight = lineHeight * 5;
 		const scrollHeight = textareaEl.scrollHeight;
-		textareaEl.style.height = Math.min(scrollHeight, maxHeight) + 'px';
+		const newHeight = Math.min(scrollHeight, maxHeight);
+		textareaEl.style.height = newHeight + 'px';
+		textareaEl.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
 	}
 
 	function handleInput() {
@@ -48,9 +50,9 @@
 			bind:this={textareaEl}
 			bind:value={commitMessage}
 			placeholder="Commit message..."
-			class="w-full px-2.5 py-2 text-sm bg-white dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-600 resize-none outline-none focus:border-violet-500/40 focus:ring-1 focus:ring-violet-500/20 transition-colors overflow-hidden"
+			class="w-full px-2.5 py-2 text-sm bg-white dark:bg-slate-800/80 border border-slate-200 dark:border-slate-700 rounded-md text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-600 resize-none outline-none focus:ring-1 focus:ring-violet-500 transition-colors"
 			rows="1"
-			style="height: 27px"
+			style="overflow-y: hidden;"
 			onkeydown={handleKeydown}
 			oninput={handleInput}
 			disabled={isCommitting}

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

@@ -14,6 +14,25 @@
 	const { commits, isLoading, hasMore, onLoadMore, onViewCommit }: Props = $props();
 
 	let selectedHash = $state('');
+	let sentinelEl = $state<HTMLDivElement | null>(null);
+
+	// Infinite scroll: auto load more when sentinel is visible
+	$effect(() => {
+		const el = sentinelEl;
+		if (!el || !hasMore) return;
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting && hasMore && !isLoading) {
+					onLoadMore();
+				}
+			},
+			{ rootMargin: '100px' }
+		);
+
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
 
 	// ========================
 	// Git Graph Computation
@@ -325,7 +344,7 @@
 					<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">
+							<p class="flex-1 min-w-0 text-sm text-slate-900 dark:text-slate-100 leading-tight truncate" title={commit.message}>
 								{commit.message}
 							</p>
 							<span class="text-3xs text-slate-400 shrink-0">{formatDate(commit.date)}</span>
@@ -349,7 +368,7 @@
 							<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"
+										class="text-3xs px-1 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400 shrink-0 truncate max-w-28"
 										title={ref}
 									>
 										{truncateRef(ref)}
@@ -369,17 +388,12 @@
 				</div>
 			{/each}
 
-			<!-- Load more -->
+			<!-- Infinite scroll sentinel -->
 			{#if hasMore}
-				<div class="flex justify-center py-3">
-					<button
-						type="button"
-						class="px-4 py-1.5 text-xs font-medium text-violet-600 bg-violet-500/10 rounded-md hover:bg-violet-500/20 transition-colors cursor-pointer border-none"
-						onclick={onLoadMore}
-						disabled={isLoading}
-					>
-						{isLoading ? 'Loading...' : 'Load More'}
-					</button>
+				<div bind:this={sentinelEl} class="flex justify-center py-3">
+					{#if isLoading}
+						<div class="w-4 h-4 border-2 border-slate-200 dark:border-slate-700 border-t-violet-600 rounded-full animate-spin"></div>
+					{/if}
 				</div>
 			{/if}
 		</div>

package/frontend/lib/components/history/HistoryModal.svelte

@@ -71,7 +71,7 @@
 		}
 
 		try {
-			const messages = await ws.http('messages:list', { session_id: sessionId });
+			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
 
 			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');
 			let title = 'New Conversation';

package/frontend/lib/components/history/HistoryView.svelte

@@ -79,7 +79,7 @@
 
 		try {
 			// Get messages from current HEAD checkpoint (active branch only)
-			const messages = await ws.http('messages:list', { session_id: sessionId });
+			const messages = await ws.http('messages:list', { session_id: sessionId, include_all: true });
 
 			// Get title from first user message in current HEAD
 			const firstUserMessage = messages.find((m: SDKMessage) => m.type === 'user');

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

@@ -214,26 +214,21 @@
 </script>
 
 <!-- Preview Toolbar -->
-<div class="relative px-3 py-2.5 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
-	<!-- Tabs bar -->
+<div class="relative bg-slate-100 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="flex items-center gap-1.5 overflow-x-auto mb-1.5">
-			<!-- Tabs -->
+		<div class="relative flex items-center overflow-x-auto border-b border-slate-200 dark:border-slate-700">
 			{#each tabs as tab}
-				<div
-					class="group relative flex items-center gap-2 pl-3 pr-2 py-1.5 border border-slate-200 dark:border-slate-700 rounded-lg transition-all duration-200 min-w-0 max-w-xs cursor-pointer
-						{tab.id === activeTabId 
-							? 'bg-slate-100 dark:bg-slate-700'
-							: 'bg-white dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-700'}"
+				{@const isActive = tab.id === activeTabId}
+				<button
+					type="button"
+					class="group relative flex items-center justify-center gap-1 px-2 py-2 text-xs font-medium transition-colors min-w-0 max-w-xs cursor-pointer
+						{isActive
+							? 'text-violet-600 dark:text-violet-400'
+							: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
 					onclick={() => onSwitchTab(tab.id)}
 					role="tab"
 					tabindex="0"
-					onkeydown={(e) => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.preventDefault();
-							onSwitchTab(tab.id);
-						}
-					}}
 				>
 					{#if tab.id === mcpControlledTabId}
 						<Icon name="lucide:bot" class="w-3 h-3 flex-shrink-0 text-amber-500" />
@@ -242,81 +237,95 @@
 					{:else}
 						<Icon name="lucide:globe" class="w-3 h-3 flex-shrink-0" />
 					{/if}
-					<span class="text-xs font-medium truncate max-w-37.5" title={tab.url}>
+					<span class="truncate max-w-28" title={tab.url}>
 						{tab.title || 'New Tab'}
 					</span>
 					{#if tab.id === mcpControlledTabId}
-						<span title="MCP Controlled" class="flex">
-							<Icon name="lucide:lock" class="w-3 h-3 flex-shrink-0 text-amber-500" />
+						<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}
+						<span
+							role="button"
+							tabindex="0"
+							onclick={(e) => {
+								e.stopPropagation();
+								onCloseTab(tab.id);
+							}}
+							onkeydown={(e) => {
+								if (e.key === 'Enter' || e.key === ' ') {
+									e.stopPropagation();
+									onCloseTab(tab.id);
+								}
+							}}
+							class="flex items-center justify-center w-4 h-4 rounded hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200 flex-shrink-0"
+							title="Close tab"
+						>
+							<Icon name="lucide:x" class="w-2.5 h-2.5" />
 						</span>
 					{/if}
-					<button
-						onclick={(e) => {
-							e.stopPropagation();
-							onCloseTab(tab.id);
-						}}
-						class="flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-0.5 transition-all duration-200 {tab.id === mcpControlledTabId ? 'hidden' : ''}"
-						title="Close tab"
-						disabled={tab.id === mcpControlledTabId}
-					>
-						<Icon name="lucide:x" class="w-3 h-3" />
-					</button>
-				</div>
+					{#if isActive}
+						<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+					{/if}
+				</button>
 			{/each}
-		
+
 			<!-- New tab button -->
 			<button
+				type="button"
 				onclick={() => onNewTab()}
-				class="flex items-center justify-center w-5 h-5 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700 transition-all duration-200"
+				class="flex items-center justify-center w-6 h-6 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-all duration-200 flex-shrink-0 ml-1"
 				title="Open new tab"
 			>
 				<Icon name="lucide:plus" class="w-3 h-3" />
 			</button>
 		</div>
 	{/if}
-	
-	<!-- Main toolbar header -->
-	<div class="px-1 py-0.5 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
-		<div class="flex items-center justify-between gap-4">
-			<!-- Left section: URL navigation -->
-			<div class="flex items-center gap-3 flex-1 min-w-0">
-				<!-- URL input with integrated controls -->
-				<input
-					type="text"
-					bind:value={urlInput}
-					onkeydown={handleUrlKeydown}
-					oninput={handleUrlInput}
-					onfocus={() => isUserTyping = true}
-					onblur={() => isUserTyping = false}
-					placeholder="Enter URL to preview..."
-					class="flex-1 pl-3 py-2.5 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis"
-				/>
-				<div class="flex items-center gap-1 px-2">
-					{#if url}
-						<button
-							onclick={handleOpenInExternalBrowser}
-							class="flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200"
-							title="Open in external browser"
-						>
-							<Icon name="lucide:external-link" class="w-4 h-4" />
-						</button>
+
+	<!-- Main toolbar header (URL bar) -->
+	<div class="px-2.5 py-1.5">
+		<div class="px-1 py-0.5 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+			<div class="flex items-center justify-between gap-3">
+				<!-- Left section: URL navigation -->
+				<div class="flex items-center gap-2 flex-1 min-w-0">
+					<!-- URL input with integrated controls -->
+					<input
+						type="text"
+						bind:value={urlInput}
+						onkeydown={handleUrlKeydown}
+						oninput={handleUrlInput}
+						onfocus={() => isUserTyping = true}
+						onblur={() => isUserTyping = false}
+						placeholder="Enter URL to preview..."
+						class="flex-1 pl-3 py-2 text-sm bg-transparent border-0 focus:outline-none min-w-0 text-ellipsis"
+					/>
+					<div class="flex items-center gap-1 px-1.5">
+						{#if url}
+							<button
+								onclick={handleOpenInExternalBrowser}
+								class="flex p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200"
+								title="Open in external browser"
+							>
+								<Icon name="lucide:external-link" class="w-4 h-4" />
+							</button>
+							<button
+								onclick={handleRefresh}
+								disabled={isLoading}
+								class="flex p-1.5 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50"
+								title="Refresh current page"
+							>
+								<Icon name={isLoading ? 'lucide:loader-circle' : 'lucide:refresh-cw'} class="w-4 h-4 transition-transform duration-200 {isLoading ? 'animate-spin' : 'hover:rotate-180'}" />
+							</button>
+						{/if}
 						<button
-							onclick={handleRefresh}
-							disabled={isLoading}
-							class="flex p-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-all duration-200 disabled:opacity-50"
-							title="Refresh current page"
+							onclick={handleGoClick}
+							disabled={!urlInput.trim() || isLoading}
+							class="ml-0.5 px-3.5 py-1 text-xs font-medium rounded-md bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50"
+							title="Navigate to URL"
 						>
-							<Icon name={isLoading ? 'lucide:loader-circle' : 'lucide:refresh-cw'} class="w-4 h-4 transition-transform duration-200 {isLoading ? 'animate-spin' : 'hover:rotate-180'}" />
+							Go
 						</button>
-					{/if}
-					<button
-						onclick={handleGoClick}
-						disabled={!urlInput.trim() || isLoading}
-						class="ml-1 px-4 py-1.5 text-sm font-medium rounded-lg bg-violet-500 hover:bg-violet-600 disabled:bg-slate-300 disabled:dark:bg-slate-600 text-white transition-all duration-200 disabled:opacity-50"
-						title="Navigate to URL"
-					>
-						Go
-					</button>
+					</div>
 				</div>
 			</div>
 		</div>

package/frontend/lib/components/settings/SettingsModal.svelte

@@ -17,7 +17,6 @@
 	import UserSettings from './user/UserSettings.svelte';
 	import NotificationSettings from './notifications/NotificationSettings.svelte';
 	import GeneralSettings from './general/GeneralSettings.svelte';
-	import pkg from '../../../../package.json';
 
 	// Responsive state
 	let isMobileMenuOpen = $state(false);
@@ -179,13 +178,7 @@
 						{/each}
 					</nav>
 
-					<footer class="p-4 border-t border-slate-200 dark:border-slate-800">
-						<div class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-500">
-							<Icon name="lucide:info" class="w-4 h-4" />
-							<span>Clopen v{pkg.version}</span>
-						</div>
-					</footer>
-				</aside>
+					</aside>
 
 				<!-- Mobile Menu Overlay -->
 				{#if isMobile && isMobileMenuOpen}

package/frontend/lib/components/terminal/Terminal.svelte

@@ -258,7 +258,7 @@
 	aria-label="Terminal application">
 
 	<!-- Terminal Header with Tabs -->
-	<div class="flex-shrink-0 px-3 py-2.5 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
+	<div class="flex-shrink-0 bg-slate-100 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700">
 		<!-- Terminal Tabs -->
 		<TerminalTabs
 			sessions={terminalStore.sessions}