@myrialabs/clopen 0.2.2 → 0.2.4

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

@@ -129,6 +129,8 @@
 	// Container width for responsive layout (same threshold as Files: 800)
 	let containerRef = $state<HTMLDivElement | null>(null);
 	let containerWidth = $state(0);
+	let leftPanelWidth = $state(288); // default w-72
+	let isResizing = $state(false);
 	const TWO_COLUMN_THRESHOLD = $derived(Math.round(600 * (settings.fontSize / 13)));
 	const isTwoColumnMode = $derived(containerWidth >= TWO_COLUMN_THRESHOLD);
 
@@ -672,7 +674,7 @@
 		isPulling = true;
 		try {
 			const prevBehind = branchInfo?.behind ?? 0;
-			const result = await ws.http('git:pull', { projectId, remote: selectedRemote });
+			const result = await ws.http('git:pull', { projectId, remote: selectedRemote, branch: branchInfo?.current });
 			if (!result.success) {
 				if (result.message.includes('conflict')) {
 					await loadAll();
@@ -702,7 +704,7 @@
 		isPushing = true;
 		try {
 			const prevAhead = branchInfo?.ahead ?? 0;
-			const result = await ws.http('git:push', { projectId, remote: selectedRemote });
+			const result = await ws.http('git:push', { projectId, remote: selectedRemote, branch: branchInfo?.current });
 			if (!result.success) {
 				showError('Push Failed', result.message);
 			} else {
@@ -969,8 +971,14 @@
 		if (changeDebounce) clearTimeout(changeDebounce);
 		changeDebounce = setTimeout(async () => {
 			changeDebounce = null;
-			// Refresh git status
-			await loadStatus();
+			// Refresh git status and branches (branch switch also modifies working tree)
+			const prevBranch = branchInfo?.current;
+			await Promise.all([loadStatus(), loadBranches()]);
+
+			// If branch changed, also refresh remotes
+			if (branchInfo?.current !== prevBranch) {
+				loadRemotes();
+			}
 
 			// Refresh the active diff tab if currently viewing one
 			if (activeTab && !activeTab.isLoading && activeTab.section !== 'commit') {
@@ -1014,8 +1022,9 @@
 		const unsub = ws.on('git:changed', (payload: any) => {
 			if (payload.projectId !== projectId || !isRepo) return;
 			scheduleGitRefresh();
-			// Also refresh branches in case of branch switch/create/delete
+			// Refresh branches and remotes in case of branch switch/create/delete
 			loadBranches();
+			loadRemotes();
 			// Refresh log if it was already loaded (History tab was visited)
 			if (commits.length > 0) {
 				loadLog(true);
@@ -1025,6 +1034,26 @@
 		return () => unsub();
 	});
 
+	function startColumnResize(e: MouseEvent) {
+		isResizing = true;
+		const startX = e.clientX;
+		const startWidth = leftPanelWidth;
+
+		function onMouseMove(e: MouseEvent) {
+			const delta = e.clientX - startX;
+			leftPanelWidth = Math.max(120, Math.min(startWidth + delta, containerWidth - 120));
+		}
+
+		function onMouseUp() {
+			isResizing = false;
+			window.removeEventListener('mousemove', onMouseMove);
+			window.removeEventListener('mouseup', onMouseUp);
+		}
+
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+	}
+
 	// Monitor container width
 	onMount(() => {
 		let resizeObserver: ResizeObserver | null = null;
@@ -1442,18 +1471,34 @@
 	{:else}
 		<div class="flex-1 overflow-hidden">
 			<!-- Unified layout: always render both panels to preserve state (like Files panel) -->
-			<div class="h-full flex">
+			<div class="h-full flex" class:select-none={isResizing} class:cursor-col-resize={isResizing}>
 				<!-- 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'
+						? 'flex-shrink-0 h-full overflow-hidden flex flex-col'
 						: (viewMode === 'list' ? 'w-full h-full overflow-hidden flex flex-col' : 'hidden')}
+					style={isTwoColumnMode ? `width: ${leftPanelWidth}px` : undefined}
 				>
 					{@render viewTabBar()}
 					{@render changesList()}
 				</div>
 
-				<!-- Right panel: Diff viewer -->
+				{#if isTwoColumnMode}
+				<!-- Column resize handle -->
+				<div
+					class="relative flex-shrink-0 h-full w-px cursor-col-resize group"
+					role="separator"
+					aria-orientation="vertical"
+					onmousedown={startColumnResize}
+				>
+					<!-- Invisible extended hit area (6px each side) -->
+					<div class="absolute inset-y-0 -left-1.5 -right-1.5 cursor-col-resize z-10"></div>
+					<!-- Visual line: 1px default, expands to 4px on hover -->
+					<div class="absolute inset-y-0 left-1/2 -translate-x-1/2 w-px group-hover:w-1 bg-slate-200 dark:bg-slate-700 group-hover:bg-blue-400 dark:group-hover:bg-blue-500 transition-all duration-150"></div>
+				</div>
+			{/if}
+
+			<!-- Right panel: Diff viewer -->
 				<div
 					class={isTwoColumnMode
 						? 'flex-1 h-full overflow-hidden flex flex-col'

package/frontend/main.ts

@@ -6,6 +6,10 @@ import { mount } from 'svelte';
 import './app.css';
 import App from './App.svelte';
 
+if (import.meta.env.DEV) {
+	document.title = 'Clopen - DEV';
+}
+
 const app = mount(App, {
 	target: document.getElementById('app')!
 });

package/frontend/stores/features/auth.svelte.ts

@@ -187,6 +187,34 @@ export const authStore = {
 		debug.log('auth', `No-auth setup complete: ${result.user.name}`);
 	},
 
+	/**
+	 * Switch to with-auth mode mid-wizard (e.g. user changed selection after refresh).
+	 * Regenerates PAT for the existing no-auth admin and updates authMode setting.
+	 */
+	async switchToWithAuth() {
+		const { loadSystemSettings, updateSystemSettings } = await import('$frontend/stores/features/settings.svelte');
+		await loadSystemSettings();
+		await updateSystemSettings({ authMode: 'required' });
+
+		const result = await ws.http('auth:regenerate-pat', {});
+		personalAccessToken = result.personalAccessToken;
+		authMode = 'required';
+		debug.log('auth', 'Switched to with-auth mode, PAT regenerated');
+	},
+
+	/**
+	 * Switch to no-auth mode mid-wizard (e.g. user changed selection after refresh).
+	 * Only updates the authMode setting; existing user remains unchanged.
+	 */
+	async switchToNoAuth() {
+		const { loadSystemSettings, updateSystemSettings } = await import('$frontend/stores/features/settings.svelte');
+		await loadSystemSettings();
+		await updateSystemSettings({ authMode: 'none' });
+
+		authMode = 'none';
+		debug.log('auth', 'Switched to no-auth mode');
+	},
+
 	/**
 	 * Complete setup — transition to ready state after wizard is done.
 	 * Saves onboardingComplete flag so wizard won't show again.

package/frontend/stores/features/settings.svelte.ts

@@ -32,7 +32,13 @@ const defaultSettings: AppSettings = {
 	soundNotifications: true,
 	pushNotifications: false,
 	layoutPresetVisibility: createDefaultPresetVisibility(),
-	fontSize: 13
+	fontSize: 13,
+	commitGenerator: {
+		useCustomModel: false,
+		engine: 'claude-code',
+		model: 'claude-code:haiku',
+		format: 'single-line'
+	}
 };
 
 // Default system settings
@@ -63,7 +69,12 @@ export function applyFontSize(size: number): void {
 export function applyServerSettings(serverSettings: Partial<AppSettings> | null): void {
 	if (serverSettings && typeof serverSettings === 'object') {
 		// Merge with defaults to ensure all properties exist
-		Object.assign(settings, { ...defaultSettings, ...serverSettings });
+		const merged = { ...defaultSettings, ...serverSettings };
+		// Deep merge nested objects so new default fields are preserved
+		if (serverSettings.commitGenerator) {
+			merged.commitGenerator = { ...defaultSettings.commitGenerator, ...serverSettings.commitGenerator };
+		}
+		Object.assign(settings, merged);
 		applyFontSize(settings.fontSize);
 		debug.log('settings', 'Applied server settings');
 	}

package/frontend/stores/ui/settings-modal.svelte.ts

@@ -6,7 +6,7 @@
 import type { IconName } from '$shared/types/ui/icons';
 
 export type SettingsSection =
-	| 'model'
+	| 'models'
 	| 'engines'
 	| 'appearance'
 	| 'notifications'
@@ -31,10 +31,10 @@ export interface SettingsSectionMeta {
 
 export const settingsSections: SettingsSectionMeta[] = [
 	{
-		id: 'model',
-		label: 'Model',
-		icon: 'lucide:cpu',
-		description: 'AI engine and model'
+		id: 'models',
+		label: 'Models',
+		icon: 'lucide:sparkles',
+		description: 'Chat and commit model'
 	},
 	{
 		id: 'appearance',
@@ -56,8 +56,8 @@ export const settingsSections: SettingsSectionMeta[] = [
 	},
 	{
 		id: 'engines',
-		label: 'AI Engine',
-		icon: 'lucide:bot',
+		label: 'Engines',
+		icon: 'lucide:plug',
 		description: 'Installation and accounts',
 		adminOnly: true
 	},
@@ -87,11 +87,11 @@ export const settingsSections: SettingsSectionMeta[] = [
 // Create the state using Svelte 5 runes
 export const settingsModalState = $state<SettingsModalState>({
 	isOpen: false,
-	activeSection: 'model'
+	activeSection: 'models'
 });
 
 // Helper functions
-export function openSettingsModal(section: SettingsSection = 'model') {
+export function openSettingsModal(section: SettingsSection = 'models') {
 	settingsModalState.isOpen = true;
 	settingsModalState.activeSection = section;
 }

package/frontend/stores/ui/update.svelte.ts

@@ -15,8 +15,12 @@ interface UpdateState {
 	updating: boolean;
 	dismissed: boolean;
 	error: string | null;
+	errorType: 'check' | 'update' | null;
 	updateOutput: string | null;
 	updateSuccess: boolean;
+	pendingRestart: boolean;
+	pendingVersions: { from: string; to: string } | null;
+	showRestartModal: boolean;
 }
 
 export const updateState = $state<UpdateState>({
@@ -27,8 +31,12 @@ export const updateState = $state<UpdateState>({
 	updating: false,
 	dismissed: false,
 	error: null,
+	errorType: null,
 	updateOutput: null,
-	updateSuccess: false
+	updateSuccess: false,
+	pendingRestart: false,
+	pendingVersions: null,
+	showRestartModal: false
 });
 
 let checkInterval: ReturnType<typeof setInterval> | null = null;
@@ -39,6 +47,7 @@ export async function checkForUpdate(): Promise<void> {
 
 	updateState.checking = true;
 	updateState.error = null;
+	updateState.errorType = null;
 
 	try {
 		const result = await ws.http('system:check-update', {});
@@ -46,13 +55,23 @@ export async function checkForUpdate(): Promise<void> {
 		updateState.latestVersion = result.latestVersion;
 		updateState.updateAvailable = result.updateAvailable;
 
-		// Auto-update if enabled and update is available
-		if (result.updateAvailable && systemSettings.autoUpdate) {
+		// Restore pending restart state from backend (survives page refresh)
+		if (result.pendingRestart && result.pendingUpdate) {
+			updateState.pendingRestart = true;
+			updateState.pendingVersions = { from: result.pendingUpdate.fromVersion, to: result.pendingUpdate.toVersion };
+			updateState.updateSuccess = true;
+			updateState.latestVersion = result.pendingUpdate.toVersion;
+			updateState.showRestartModal = true;
+		}
+
+		// Auto-update if enabled and update is available (skip if already pending restart)
+		if (result.updateAvailable && systemSettings.autoUpdate && !result.pendingRestart) {
 			debug.log('server', 'Auto-update enabled, starting update...');
 			await runUpdate();
 		}
 	} catch (err) {
 		updateState.error = err instanceof Error ? err.message : 'Failed to check for updates';
+		updateState.errorType = 'check';
 		debug.error('server', 'Update check failed:', err);
 	} finally {
 		updateState.checking = false;
@@ -65,6 +84,7 @@ export async function runUpdate(): Promise<void> {
 
 	updateState.updating = true;
 	updateState.error = null;
+	updateState.errorType = null;
 	updateState.updateOutput = null;
 
 	try {
@@ -72,22 +92,49 @@ export async function runUpdate(): Promise<void> {
 		updateState.updateOutput = result.output;
 		updateState.updateSuccess = true;
 		updateState.updateAvailable = false;
+		updateState.pendingRestart = true;
+		updateState.pendingVersions = { from: updateState.currentVersion, to: result.newVersion };
 		updateState.latestVersion = result.newVersion;
+		updateState.showRestartModal = true;
 
 		debug.log('server', 'Update completed successfully');
 	} catch (err) {
 		updateState.error = err instanceof Error ? err.message : 'Update failed';
+		updateState.errorType = 'update';
 		debug.error('server', 'Update failed:', err);
 	} finally {
 		updateState.updating = false;
 	}
 }
 
-/** Dismiss the update banner */
+/** Dismiss the update banner (not allowed when restart is pending) */
 export function dismissUpdate(): void {
+	if (updateState.pendingRestart) return;
 	updateState.dismissed = true;
 }
 
+/** Show the restart instructions modal */
+export function showRestartModal(): void {
+	updateState.showRestartModal = true;
+}
+
+/** Hide the restart instructions modal */
+export function hideRestartModal(): void {
+	updateState.showRestartModal = false;
+}
+
+// Listen for update-completed broadcast (notifies other tabs/clients)
+ws.on('system:update-completed', (payload) => {
+	debug.log('server', 'Update completed broadcast received');
+	updateState.updateSuccess = true;
+	updateState.updateAvailable = false;
+	updateState.pendingRestart = true;
+	updateState.pendingVersions = { from: payload.fromVersion, to: payload.toVersion };
+	updateState.latestVersion = payload.toVersion;
+	updateState.showRestartModal = true;
+	updateState.dismissed = false;
+});
+
 /** Start periodic update checks (every 30 minutes) */
 export function startUpdateChecker(): void {
 	// Initial check after 5 seconds (let the app settle)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myrialabs/clopen",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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",
@@ -49,7 +49,7 @@
     "dev:backend": "bun --watch backend/index.ts",
     "dev:frontend": "bunx vite dev",
     "build": "vite build",
-    "start": "NODE_ENV=production bun backend/index.ts",
+    "start": "bun scripts/start.ts",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

package/scripts/dev.ts

@@ -9,8 +9,8 @@
 import concurrently from 'concurrently';
 import { findAvailablePort } from '../backend/utils/port-utils';
 
-const desiredBackend = process.env.PORT_BACKEND ? parseInt(process.env.PORT_BACKEND) : 9151;
-const desiredFrontend = process.env.PORT_FRONTEND ? parseInt(process.env.PORT_FRONTEND) : 9141;
+const desiredBackend = process.env.PORT_BACKEND ? parseInt(process.env.PORT_BACKEND) : 9161;
+const desiredFrontend = process.env.PORT_FRONTEND ? parseInt(process.env.PORT_FRONTEND) : 9151;
 
 // Resolve available ports
 const backendPort = await findAvailablePort(desiredBackend);
@@ -33,6 +33,7 @@ console.log(`Frontend: http://localhost:${frontendPort}`);
 console.log();
 
 const portEnv = {
+	NODE_ENV: 'development',
 	PORT_BACKEND: String(backendPort),
 	PORT_FRONTEND: String(frontendPort),
 };

package/scripts/start.ts

@@ -0,0 +1,24 @@
+#!/usr/bin/env bun
+
+/**
+ * Production start script — resolves available port before starting backend.
+ * Mirrors scripts/dev.ts: ensures port is truly available (IPv4 + IPv6)
+ * before the backend binds, avoiding silent hangs from zombie processes.
+ */
+
+import { findAvailablePort } from '../backend/utils/port-utils';
+
+const desiredPort = process.env.PORT ? parseInt(process.env.PORT) : 9141;
+
+const port = await findAvailablePort(desiredPort);
+
+if (port !== desiredPort) {
+	console.log(`⚠️ Port ${desiredPort} in use, using ${port}`);
+}
+
+// Set resolved values before importing backend (env.ts reads at import time)
+process.env.PORT = String(port);
+process.env.HOST = process.env.HOST || 'localhost';
+process.env.NODE_ENV = 'production';
+
+await import('../backend/index.ts');

package/shared/types/git.ts

@@ -169,3 +169,18 @@ export interface GitTag {
 	date: string;
 	isAnnotated: boolean;
 }
+
+// ============================================
+// Commit Message Generation
+// ============================================
+
+/** Format for AI-generated commit messages */
+export type CommitMessageFormat = 'single-line' | 'multi-line';
+
+/** Structured commit message output from AI */
+export interface GeneratedCommitMessage {
+	type: string;
+	scope: string;
+	subject: string;
+	body: string;
+}

package/shared/types/stores/settings.ts

@@ -1,4 +1,14 @@
 import type { EngineType } from '$shared/types/engine';
+import type { CommitMessageFormat } from '$shared/types/git';
+
+/** AI commit message generator settings */
+export interface CommitGeneratorSettings {
+	/** When false, uses the chat model (selectedEngine/selectedModel). When true, uses custom engine/model below. */
+	useCustomModel: boolean;
+	engine: EngineType;
+	model: string;
+	format: CommitMessageFormat;
+}
 
 /** Per-user settings (stored per user) */
 export interface AppSettings {
@@ -13,6 +23,8 @@ export interface AppSettings {
 	layoutPresetVisibility: Record<string, boolean>;
 	/** Base font size in pixels (10–20). Default: 13. */
 	fontSize: number;
+	/** AI commit message generator configuration */
+	commitGenerator: CommitGeneratorSettings;
 }
 
 /** Authentication mode */

package/vite.config.ts

@@ -3,8 +3,8 @@ import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import { resolve } from 'path';
 
-const frontendPort = parseInt(process.env.PORT_FRONTEND || '9141');
-const backendPort = parseInt(process.env.PORT_BACKEND || '9151');
+const frontendPort = parseInt(process.env.PORT_FRONTEND || '9151');
+const backendPort = parseInt(process.env.PORT_BACKEND || '9161');
 
 export default defineConfig({
 	plugins: [tailwindcss(), svelte()],