@myrialabs/clopen 0.1.7 → 0.1.8

package/frontend/lib/components/workspace/panels/GitPanel.svelte

@@ -67,9 +67,6 @@
 	let newTagName = $state('');
 	let newTagMessage = $state('');
 
-	// More menu state (for Stash/Tags)
-	let showMoreMenu = $state(false);
-
 	// Tab system (like Files panel)
 	interface DiffTab {
 		id: string;
@@ -1053,12 +1050,21 @@
 		gitStatus.staged.length + allChanges.length + gitStatus.conflicted.length
 	);
 
+	// View tabs config for tab bar
+	const viewTabs = $derived([
+		{ id: 'changes' as const, label: 'Changes', icon: 'lucide:file-pen' as IconName, badge: totalChanges > 0 ? totalChanges : null },
+		{ id: 'log' as const, label: 'History', icon: 'lucide:history' as IconName, badge: null },
+		{ id: 'stash' as const, label: 'Stash', icon: 'lucide:archive' as IconName, badge: stashEntries.length > 0 ? stashEntries.length : null },
+		{ id: 'tags' as const, label: 'Tags', icon: 'lucide:tag' as IconName, badge: tags.length > 0 ? tags.length : null }
+	]);
+
 	// Exported panel actions for PanelHeader
 	export const panelActions = {
 		push: handlePush,
 		pull: handlePull,
 		fetch: handleFetch,
 		init: handleInit,
+		openBranchManager: () => { showBranchManager = true; },
 		getBranchInfo: () => branchInfo,
 		getIsRepo: () => isRepo,
 		getIsFetching: () => isFetching,
@@ -1102,97 +1108,32 @@
 	{/if}
 {/snippet}
 
-<!-- Changes list snippet -->
-{#snippet changesList()}
-	<!-- View tabs with branch switch -->
-	<div class="flex items-center gap-1 px-2 py-1.5 border-b border-slate-100 dark:border-slate-800">
-		<button
-			type="button"
-			class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-slate-100 dark:bg-slate-800/60 text-slate-700 dark:text-slate-300 hover:bg-violet-500/10 hover:text-violet-600 transition-colors cursor-pointer border-none min-w-0"
-			onclick={() => showBranchManager = true}
-			title="Switch Branch"
-		>
-			<Icon name="lucide:git-branch" class="w-3.5 h-3.5 shrink-0" />
-			<span class="truncate max-w-24">{branchInfo?.current || '...'}</span>
-		</button>
-
-		<div class="flex-1"></div>
-
-		<!-- Primary tabs: Changes & History -->
-		<button
-			type="button"
-			class="px-2 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer border-none
-				{activeView === 'changes'
-					? 'bg-violet-500/10 text-violet-600'
-					: 'bg-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}"
-			onclick={() => { switchToView('changes'); showMoreMenu = false; }}
-		>
-			Changes{totalChanges > 0 ? ` (${totalChanges})` : ''}
-		</button>
-		<button
-			type="button"
-			class="px-2 py-1 text-xs font-medium rounded-md transition-colors cursor-pointer border-none
-				{activeView === 'log'
-					? 'bg-violet-500/10 text-violet-600'
-					: 'bg-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'}"
-			onclick={() => { switchToView('log'); showMoreMenu = false; }}
-		>
-			History
-		</button>
-
-		<!-- More menu (Stash, Tags) -->
-		<div class="relative">
+<!-- View tabs snippet (always visible, even in single-column diff mode) -->
+{#snippet viewTabBar()}
+	<div class="relative flex border-b border-slate-200 dark:border-slate-700">
+		{#each viewTabs as tab (tab.id)}
+			{@const isActive = activeView === tab.id}
 			<button
 				type="button"
-				class="flex items-center justify-center w-7 h-7 rounded-md transition-colors cursor-pointer border-none
-					{activeView === 'stash' || activeView === 'tags'
-						? 'bg-violet-500/10 text-violet-600'
-						: 'bg-transparent text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'}"
-				onclick={() => showMoreMenu = !showMoreMenu}
-				title="More views"
+				class="relative flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors {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={() => switchToView(tab.id)}
 			>
-				<Icon name="lucide:ellipsis" class="w-4 h-4" />
+				{tab.label}
+				{#if tab.badge}
+					<span class="min-w-4 h-4 px-1 rounded-full bg-violet-500/15 dark:bg-violet-500/25 text-3xs font-semibold flex items-center justify-center">{tab.badge}</span>
+				{/if}
+				{#if isActive}
+					<span class="absolute bottom-0 inset-x-0 h-px bg-violet-600 dark:bg-violet-400"></span>
+				{/if}
 			</button>
-
-			{#if showMoreMenu}
-				<div
-					class="fixed inset-0 z-40"
-					onclick={() => showMoreMenu = false}
-				></div>
-				<div class="absolute right-0 top-full mt-1 z-50 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg py-1 min-w-32">
-					<button
-						type="button"
-						class="flex items-center gap-2 w-full px-3 py-1.5 text-xs font-medium text-left transition-colors cursor-pointer border-none
-							{activeView === 'stash'
-								? 'bg-violet-500/10 text-violet-600'
-								: 'bg-transparent text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}"
-						onclick={() => { switchToView('stash'); showMoreMenu = false; }}
-					>
-						<Icon name="lucide:archive" class="w-3.5 h-3.5" />
-						Stash
-						{#if stashEntries.length > 0}
-							<span class="ml-auto text-3xs font-semibold text-slate-400">{stashEntries.length}</span>
-						{/if}
-					</button>
-					<button
-						type="button"
-						class="flex items-center gap-2 w-full px-3 py-1.5 text-xs font-medium text-left transition-colors cursor-pointer border-none
-							{activeView === 'tags'
-								? 'bg-violet-500/10 text-violet-600'
-								: 'bg-transparent text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'}"
-						onclick={() => { switchToView('tags'); showMoreMenu = false; }}
-					>
-						<Icon name="lucide:tag" class="w-3.5 h-3.5" />
-						Tags
-						{#if tags.length > 0}
-							<span class="ml-auto text-3xs font-semibold text-slate-400">{tags.length}</span>
-						{/if}
-					</button>
-				</div>
-			{/if}
-		</div>
+		{/each}
 	</div>
+{/snippet}
 
+<!-- Changes list snippet -->
+{#snippet changesList()}
 	{#if activeView === 'changes'}
 		<!-- Commit form -->
 		<CommitForm
@@ -1253,7 +1194,7 @@
 		/>
 	{:else if activeView === 'stash'}
 		<!-- Stash View -->
-		<div class="flex-1 overflow-y-auto">
+		<div class="flex-1 overflow-y-auto pt-2">
 			<!-- Stash save button/form -->
 			<div class="px-2 pb-2">
 				{#if showStashSaveForm}
@@ -1337,7 +1278,7 @@
 		</div>
 	{:else if activeView === 'tags'}
 		<!-- Tags View -->
-		<div class="flex-1 overflow-y-auto">
+		<div class="flex-1 overflow-y-auto pt-2">
 			<!-- Create tag button/form -->
 			<div class="px-2 pb-2">
 				{#if showCreateTagForm}
@@ -1502,16 +1443,17 @@
 		<div class="flex-1 overflow-hidden">
 			<!-- Unified layout: always render both panels to preserve state (like Files panel) -->
 			<div class="h-full flex">
-				<!-- Left panel: Changes list (w-80 like Files panel tree) -->
+				<!-- Left panel: Changes list -->
 				<div
 					class={isTwoColumnMode
 						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700 flex flex-col'
 						: (viewMode === 'list' ? 'w-full h-full overflow-hidden flex flex-col' : 'hidden')}
 				>
+					{@render viewTabBar()}
 					{@render changesList()}
 				</div>
 
-				<!-- Right panel: Diff viewer (like Files panel editor) -->
+				<!-- Right panel: Diff viewer -->
 				<div
 					class={isTwoColumnMode
 						? 'flex-1 h-full overflow-hidden flex flex-col'

package/frontend/lib/stores/ui/workspace.svelte.ts

@@ -459,20 +459,20 @@ const defaultPanels: Record<PanelId, PanelConfig> = {
 		minimized: false,
 		order: 0
 	},
-	preview: {
-		id: 'preview',
-		title: 'Preview',
-		icon: 'lucide:globe',
-		visible: true,
-		minimized: false,
-		order: 1
-	},
 	files: {
 		id: 'files',
 		title: 'Files',
 		icon: 'lucide:folder',
 		visible: true,
 		minimized: false,
+		order: 1
+	},
+	git: {
+		id: 'git',
+		title: 'Source Control',
+		icon: 'lucide:git-branch',
+		visible: true,
+		minimized: false,
 		order: 2
 	},
 	terminal: {
@@ -483,10 +483,10 @@ const defaultPanels: Record<PanelId, PanelConfig> = {
 		minimized: false,
 		order: 3
 	},
-	git: {
-		id: 'git',
-		title: 'Source Control',
-		icon: 'lucide:git-branch',
+	preview: {
+		id: 'preview',
+		title: 'Preview',
+		icon: 'lucide:globe',
 		visible: true,
 		minimized: false,
 		order: 4
@@ -496,9 +496,9 @@ const defaultPanels: Record<PanelId, PanelConfig> = {
 export const PANEL_OPTIONS: { id: PanelId; title: string; icon: IconName }[] = [
 	{ id: 'chat', title: 'AI Assistant', icon: 'lucide:bot' },
 	{ id: 'files', title: 'Files', icon: 'lucide:folder' },
-	{ id: 'preview', title: 'Preview', icon: 'lucide:globe' },
+	{ id: 'git', title: 'Source Control', icon: 'lucide:git-branch' },
 	{ id: 'terminal', title: 'Terminal', icon: 'lucide:terminal' },
-	{ id: 'git', title: 'Source Control', icon: 'lucide:git-branch' }
+	{ id: 'preview', title: 'Preview', icon: 'lucide:globe' }
 ];
 
 // Default: Main + Stack layout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
   "author": "Myria Labs",
   "license": "MIT",
@@ -62,7 +62,6 @@
     "@types/bun": "^1.2.18",
     "@types/node": "^24.0.14",
     "@types/qrcode": "^1.5.6",
-    "@types/xterm": "^3.0.0",
     "concurrently": "^9.2.1",
     "eslint": "^9.31.0",
     "eslint-plugin-svelte": "^3.10.1",
@@ -83,8 +82,12 @@
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@monaco-editor/loader": "^1.5.0",
     "@opencode-ai/sdk": "^1.2.15",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-clipboard": "^0.2.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
     "bun-pty": "^0.4.2",
     "cloudflared": "^0.7.1",
     "elysia": "^1.4.19",
@@ -95,8 +98,7 @@
     "nanoid": "^5.1.6",
     "puppeteer": "^24.33.0",
     "puppeteer-cluster": "^0.25.0",
-    "qrcode": "^1.5.4",
-    "xterm": "^5.3.0"
+    "qrcode": "^1.5.4"
   },
   "trustedDependencies": [
     "cloudflared",