@myrialabs/clopen 0.2.2 → 0.2.4

package/frontend/components/settings/model/ModelSettings.svelte

@@ -1,36 +1,44 @@
 <script lang="ts">
+	import Icon from '$frontend/components/common/display/Icon.svelte';
 	import { settings, updateSettings } from '$frontend/stores/features/settings.svelte';
 	import { modelStore } from '$frontend/stores/features/models.svelte';
-	import { ENGINES, type EngineType } from '$shared/constants/engines';
-	import type { EngineModel } from '$shared/types/engine';
+	import { ENGINES } from '$shared/constants/engines';
+	import type { EngineType } from '$shared/types/engine';
+	import type { CommitMessageFormat } from '$shared/types/git';
+	import type { IconName } from '$shared/types/ui/icons';
+	import EngineModelPicker from './EngineModelPicker.svelte';
 
-	let searchQuery = $state('');
-	let refreshing = $state(false);
-	let collapsedProviders = $state<Set<string>>(new Set());
+	type Tab = 'assistant' | 'commit-message';
 
-	// Handle engine selection — restore remembered model or pick first
-	async function selectEngine(engineType: EngineType) {
+	const tabs: { id: Tab; label: string; icon: IconName }[] = [
+		{ id: 'assistant', label: 'Assistant', icon: 'lucide:bot' },
+		{ id: 'commit-message', label: 'Commit Message', icon: 'lucide:git-branch' }
+	];
+
+	let activeTab = $state<Tab>('assistant');
+
+	// --- Assistant ---
+
+	function handleAssistantEngineChange(engineType: EngineType) {
 		updateSettings({ selectedEngine: engineType });
-		searchQuery = '';
 
-		// Restore remembered model for this engine
 		const memory = settings.engineModelMemory || {};
 		const remembered = memory[engineType];
 
 		if (engineType !== 'claude-code') {
-			const models = await modelStore.fetchModels(engineType);
-			const target = (remembered && models.find(m => m.id === remembered))
-				|| models.find(m => m.recommended)
-				|| models[0];
-			if (target) {
-				updateSettings({
-					selectedModel: target.id,
-					engineModelMemory: { ...memory, [engineType]: target.id }
-				});
-			} else {
-				// No models available — clear the model selection
-				updateSettings({ selectedModel: '' });
-			}
+			modelStore.fetchModels(engineType).then(models => {
+				const target = (remembered && models.find(m => m.id === remembered))
+					|| models.find(m => m.recommended)
+					|| models[0];
+				if (target) {
+					updateSettings({
+						selectedModel: target.id,
+						engineModelMemory: { ...memory, [engineType]: target.id }
+					});
+				} else {
+					updateSettings({ selectedModel: '' });
+				}
+			});
 		} else {
 			const models = modelStore.getByEngine('claude-code');
 			const target = (remembered && models.find(m => m.id === remembered))
@@ -42,17 +50,12 @@
 					engineModelMemory: { ...memory, [engineType]: target.id }
 				});
 			} else {
-				// No models available — clear the model selection
 				updateSettings({ selectedModel: '' });
 			}
 		}
-
-		// Open accordion for the selected model's provider
-		syncAccordionState();
 	}
 
-	// Handle model selection — also save to per-engine memory
-	function selectModel(modelId: string) {
+	function handleAssistantModelChange(modelId: string) {
 		const memory = settings.engineModelMemory || {};
 		updateSettings({
 			selectedModel: modelId,
@@ -60,298 +63,178 @@
 		});
 	}
 
-	// Refresh models (bypass cache)
-	async function handleRefresh() {
-		refreshing = true;
-		try {
-			await modelStore.refreshModels(settings.selectedEngine);
-		} finally {
-			refreshing = false;
-		}
-	}
+	// --- Commit Message ---
 
-	// Toggle provider accordion
-	function toggleProvider(provider: string) {
-		const next = new Set(collapsedProviders);
-		if (next.has(provider)) {
-			next.delete(provider);
-		} else {
-			next.add(provider);
-		}
-		collapsedProviders = next;
-	}
+	const formatOptions: { id: CommitMessageFormat; label: string; desc: string; icon: IconName }[] = [
+		{ id: 'single-line', label: 'Single Line', desc: 'type(scope): subject', icon: 'lucide:minus' },
+		{ id: 'multi-line', label: 'Multi Line', desc: 'Subject + body', icon: 'lucide:align-left' }
+	];
 
-	// Sync accordion state: open only the provider containing the selected model
-	function syncAccordionState() {
-		const allProviders = [...groupedModels.keys()];
-		const selectedModel = settings.selectedModel;
-		let selectedProvider: string | null = null;
+	const commitGen = $derived(settings.commitGenerator);
+	const useCustomModel = $derived(commitGen.useCustomModel);
 
-		for (const [provider, models] of groupedModels) {
-			if (models.some(m => m.id === selectedModel)) {
-				selectedProvider = provider;
-				break;
-			}
-		}
+	// Resolve which model is being used for display
+	const activeEngine = $derived(useCustomModel ? commitGen.engine : settings.selectedEngine);
+	const activeModel = $derived(useCustomModel ? commitGen.model : settings.selectedModel);
+	const activeEngineMeta = $derived(ENGINES.find(e => e.type === activeEngine));
+	const activeModelMeta = $derived(modelStore.getById(activeModel));
 
-		// Collapse all, then open the one with selected model
-		const collapsed = new Set(allProviders);
-		if (selectedProvider) {
-			collapsed.delete(selectedProvider);
-		}
-		collapsedProviders = collapsed;
+	function toggleCustomModel() {
+		updateSettings({
+			commitGenerator: { ...commitGen, useCustomModel: !useCustomModel }
+		});
 	}
 
-	// Get models for the currently selected engine, filtered by search
-	const filteredModels = $derived.by(() => {
-		const models = modelStore.getByEngine(settings.selectedEngine);
-		if (!searchQuery.trim()) return models;
-
-		const q = searchQuery.toLowerCase();
-		return models.filter(m =>
-			m.name.toLowerCase().includes(q) ||
-			m.modelId.toLowerCase().includes(q) ||
-			m.provider.toLowerCase().includes(q) ||
-			m.capabilities.some(c => c.toLowerCase().includes(q))
-		);
-	});
-
-	// Group models by provider
-	const groupedModels = $derived.by(() => {
-		const groups = new Map<string, EngineModel[]>();
-		for (const model of filteredModels) {
-			const key = model.provider;
-			if (!groups.has(key)) groups.set(key, []);
-			groups.get(key)!.push(model);
-		}
-		return groups;
-	});
-
-	// Fetch models on mount for non-claude-code, then sync accordion
-	$effect(() => {
-		if (settings.selectedEngine !== 'claude-code') {
-			modelStore.fetchModels(settings.selectedEngine);
-		}
-	});
+	function handleCommitEngineChange(engineType: EngineType) {
+		const models = modelStore.getByEngine(engineType);
+		const defaultModel = engineType === 'claude-code'
+			? 'claude-code:haiku'
+			: (models[0]?.id || '');
+		updateSettings({
+			commitGenerator: {
+				...commitGen,
+				engine: engineType,
+				model: defaultModel
+			}
+		});
 
-	// Sync accordion: open all when searching, restore default when cleared
-	$effect(() => {
-		if (searchQuery.trim()) {
-			// Searching — open all accordions
-			collapsedProviders = new Set();
-		} else if (groupedModels.size > 0) {
-			// Not searching — only open the one with selected model
-			syncAccordionState();
+		if (engineType !== 'claude-code') {
+			modelStore.fetchModels(engineType).then(fetched => {
+				if (fetched.length > 0) {
+					updateSettings({
+						commitGenerator: { ...settings.commitGenerator, model: fetched[0].id }
+					});
+				}
+			});
 		}
-	});
+	}
 
-	function formatContext(tokens: number): string {
-		return tokens >= 1000000
-			? `${(tokens / 1000000).toFixed(1)}M`
-			: `${(tokens / 1000).toFixed(0)}K`;
+	function handleCommitModelChange(modelId: string) {
+		updateSettings({
+			commitGenerator: { ...commitGen, model: modelId }
+		});
 	}
 
-	function formatProvider(provider: string): string {
-		return provider
-			.split(/[-_]/)
-			.map(w => w.charAt(0).toUpperCase() + w.slice(1))
-			.join(' ');
+	function selectFormat(format: CommitMessageFormat) {
+		updateSettings({
+			commitGenerator: { ...commitGen, format }
+		});
 	}
 </script>
 
-<!-- Claude SVG logo (Anthropic) -->
-{#snippet claudeLogo(active: boolean)}
-	<svg viewBox="0 0 24 24" fill="none" class="w-5 h-5" aria-hidden="true">
-		<path d="M16.091 4L9.115 20h-1.19L14.901 4h1.19zm-5.726 5.2L14.8 20h-1.218L9.2 9.6l1.165-.4z"
-			fill={active ? '#8b5cf6' : 'currentColor'} />
-	</svg>
-{/snippet}
-
-<!-- OpenCode SVG logo -->
-{#snippet opencodeLogo(active: boolean)}
-	<svg viewBox="0 0 24 24" fill="none" class="w-5 h-5" aria-hidden="true">
-		<path d="M8.5 6L3 12l5.5 6M15.5 6L21 12l-5.5 6M13.5 4l-3 16"
-			stroke={active ? '#8b5cf6' : 'currentColor'}
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round" />
-	</svg>
-{/snippet}
-
 <div class="py-1">
-	<!-- Engine Selection -->
-	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">AI Engine</h3>
-	<p class="text-sm text-slate-600 dark:text-slate-500 mb-4">
-		Select the AI engine to power your conversations
-	</p>
-
-	<div class="flex gap-3 mb-6">
-		{#each ENGINES as engine (engine.type)}
-			{@const isActive = settings.selectedEngine === engine.type}
+	<!-- Tab Switcher -->
+	<div class="flex gap-1 p-1 mb-5 bg-slate-100 dark:bg-slate-800/60 rounded-lg">
+		{#each tabs as tab (tab.id)}
+			{@const isActive = activeTab === tab.id}
 			<button
 				type="button"
-				class="flex-1 flex items-center gap-3 p-3.5 overflow-hidden border-2 rounded-xl text-left cursor-pointer transition-all duration-200
+				class="flex-1 flex items-center justify-center gap-2 py-2 px-3 text-sm font-medium rounded-md transition-all duration-200 cursor-pointer
 					{isActive
-					? 'border-violet-600 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/12 dark:to-purple-500/8'
-					: 'border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/80 hover:border-violet-500/20 dark:hover:border-violet-500/35'}"
-				onclick={() => selectEngine(engine.type)}
+					? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 shadow-sm'
+					: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'}"
+				onclick={() => activeTab = tab.id}
 			>
-				<div>
-					<div class="flex dark:hidden items-center justify-center w-5 h-5">{@html engine.icon.light}</div>
-					<div class="hidden dark:flex items-center justify-center w-5 h-5">{@html engine.icon.dark}</div>
-				</div>
-				<div>
-					<div class="font-bold text-sm text-slate-900 dark:text-slate-100">{engine.name}</div>
-					<div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{engine.description}</div>
-				</div>
-				{#if isActive}
-					<div class="flex items-center justify-center w-5 h-5 bg-gradient-to-br from-violet-600 to-purple-600 rounded-full text-white ml-auto flex-shrink-0">
-						<svg viewBox="0 0 24 24" fill="none" class="w-3 h-3" aria-hidden="true">
-							<path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-						</svg>
-					</div>
-				{/if}
+				<Icon name={tab.icon} class="w-4 h-4 {isActive ? 'text-violet-600' : ''}" />
+				{tab.label}
 			</button>
 		{/each}
 	</div>
 
-	<!-- Model Selection -->
-	<div class="flex items-center justify-between mb-1.5">
-		<h3 class="text-base font-bold text-slate-900 dark:text-slate-100">Model</h3>
-		<button
-			type="button"
-			class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg transition-colors cursor-pointer
-				text-slate-500 hover:text-violet-600 hover:bg-violet-500/10 dark:hover:text-violet-400 dark:hover:bg-violet-500/15
-				disabled:opacity-50 disabled:cursor-not-allowed"
-			onclick={handleRefresh}
-			disabled={refreshing || modelStore.loading}
-		>
-			<svg viewBox="0 0 24 24" fill="none" class="w-3.5 h-3.5 {refreshing ? 'animate-spin' : ''}" aria-hidden="true">
-				<path d="M21 12a9 9 0 11-2.636-6.364M21 3v5h-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-			</svg>
-			{refreshing ? 'Refreshing...' : 'Refresh'}
-		</button>
-	</div>
-	<p class="text-sm text-slate-600 dark:text-slate-500 mb-3">
-		Select the AI model for the {ENGINES.find(e => e.type === settings.selectedEngine)?.name || 'selected'} engine
-	</p>
-
-	<!-- Search -->
-	<div class="relative mb-3">
-		<svg viewBox="0 0 24 24" fill="none" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" aria-hidden="true">
-			<circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" />
-			<path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-		</svg>
-		<input
-			type="text"
-			bind:value={searchQuery}
-			placeholder="Search models..."
-			class="w-full pl-9 pr-3 py-2 text-sm bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-600 transition-colors text-slate-900 dark:text-slate-100 placeholder-slate-400"
+	<!-- ===== ASSISTANT TAB ===== -->
+	{#if activeTab === 'assistant'}
+		<p class="text-sm text-slate-600 dark:text-slate-500 mb-4">
+			Configure the engine and model for chat
+		</p>
+
+		<EngineModelPicker
+			engine={settings.selectedEngine}
+			model={settings.selectedModel}
+			onEngineChange={handleAssistantEngineChange}
+			onModelChange={handleAssistantModelChange}
 		/>
-	</div>
-
-	<!-- Model List -->
-	<div class="flex flex-col gap-1.5">
-		{#if modelStore.loading && settings.selectedEngine !== 'claude-code' && !refreshing}
-			<!-- Loading skeleton for Open Code only -->
-			<div class="border border-slate-200/80 dark:border-slate-700/50 rounded-lg overflow-hidden">
-				<div class="bg-white/80 dark:bg-slate-800/40 px-3 py-3 flex items-center gap-3">
-					<div class="w-4 h-4 rounded-full bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
-					<div class="h-3.5 w-32 rounded bg-slate-200 dark:bg-slate-700 animate-pulse"></div>
-				</div>
-				<div class="px-4 py-2.5 space-y-2.5">
-					{#each Array(3) as _}
-						<div class="flex items-center gap-3 py-2">
-							<div class="w-4 h-4 rounded-full bg-slate-200/80 dark:bg-slate-700/60 animate-pulse"></div>
-							<div class="flex-1 space-y-1.5">
-								<div class="h-3.5 w-40 rounded bg-slate-200/80 dark:bg-slate-700/60 animate-pulse"></div>
-								<div class="flex gap-1.5">
-									<div class="h-3 w-14 rounded bg-slate-200/60 dark:bg-slate-700/40 animate-pulse"></div>
-									<div class="h-3 w-12 rounded bg-slate-200/60 dark:bg-slate-700/40 animate-pulse"></div>
-								</div>
-							</div>
-						</div>
-					{/each}
-				</div>
-			</div>
-		{:else if filteredModels.length === 0}
-			<div class="py-4 text-sm text-slate-500 text-center">
-				{searchQuery ? 'No models matching your search.' : 'No models available for this engine.'}
-			</div>
-		{:else}
-			<!-- Grouped by provider with accordion -->
-			{#each [...groupedModels.entries()] as [provider, providerModels] (provider)}
-				{@const isCollapsed = collapsedProviders.has(provider)}
-				{@const hasSelectedModel = providerModels.some(m => m.id === settings.selectedModel)}
-				<div class="border border-slate-200/80 dark:border-slate-700/50 rounded-lg overflow-hidden">
-					<!-- Accordion header -->
+	{/if}
+
+	<!-- ===== COMMIT MESSAGE TAB ===== -->
+	{#if activeTab === 'commit-message'}
+		<p class="text-sm text-slate-600 dark:text-slate-500 mb-4">
+			Configure the engine, model, and format for commits
+		</p>
+
+		<!-- Format Selection -->
+		<div class="mb-5">
+			<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Message Format</label>
+			<div class="flex gap-2">
+				{#each formatOptions as fmt (fmt.id)}
+					{@const isActive = commitGen.format === fmt.id}
 					<button
 						type="button"
-						class="flex items-center gap-2.5 w-full px-3 py-2.5 text-left cursor-pointer transition-colors
-							bg-white/80 dark:bg-slate-800/40 hover:bg-white dark:hover:bg-slate-800/60"
-						onclick={() => toggleProvider(provider)}
+						class="flex-1 flex items-center gap-2.5 p-3 border-2 rounded-xl text-left cursor-pointer transition-all duration-200
+							{isActive
+							? 'border-violet-600 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/12 dark:to-purple-500/8'
+							: 'border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/80 hover:border-violet-500/20 dark:hover:border-violet-500/35'}"
+						onclick={() => selectFormat(fmt.id)}
 					>
-						<svg viewBox="0 0 24 24" fill="none"
-							class="w-4 h-4 text-slate-400 transition-transform duration-200 flex-shrink-0
-								{isCollapsed ? '' : 'rotate-90'}"
-							aria-hidden="true">
-							<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-						</svg>
-						<span class="text-sm font-semibold text-slate-800 dark:text-slate-200">
-							{formatProvider(provider)}
-						</span>
-						<span class="text-xs text-slate-400 dark:text-slate-500">
-							{providerModels.length} {providerModels.length === 1 ? 'model' : 'models'}
-						</span>
-						{#if hasSelectedModel}
-							<div class="w-1.5 h-1.5 rounded-full bg-violet-500 ml-auto flex-shrink-0"></div>
-						{/if}
+						<Icon name={fmt.icon} class="w-4 h-4 {isActive ? 'text-violet-600' : 'text-slate-400'}" />
+						<div>
+							<div class="text-sm font-medium text-slate-900 dark:text-slate-100">{fmt.label}</div>
+							<div class="text-xs text-slate-500 dark:text-slate-400 font-mono">{fmt.desc}</div>
+						</div>
 					</button>
+				{/each}
+			</div>
+		</div>
 
-					<!-- Accordion body -->
-					{#if !isCollapsed}
-						<div class="flex flex-col bg-white/40 dark:bg-slate-800/20">
-							{#each providerModels as model (model.id)}
-								{@const isSelected = settings.selectedModel === model.id}
-								{@const caps = model.capabilities}
-								<button
-									type="button"
-									class="flex items-start gap-3 px-3 py-2.5 text-left cursor-pointer transition-all duration-150
-										{isSelected
-										? 'bg-violet-500/10 dark:bg-violet-500/12'
-										: 'hover:bg-slate-100/80 dark:hover:bg-slate-700/30'}"
-									onclick={() => selectModel(model.id)}
-								>
-									<!-- Radio indicator -->
-									<div class="flex-shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center mt-0.5
-										{isSelected ? 'border-violet-600' : 'border-slate-300 dark:border-slate-600'}">
-										{#if isSelected}
-											<div class="w-2 h-2 rounded-full bg-violet-600"></div>
-										{/if}
-									</div>
-
-									<!-- Model info -->
-									<div class="flex-1 min-w-0">
-										<div class="flex items-center gap-2">
-											<span class="text-sm font-medium text-slate-900 dark:text-slate-100">{model.name}</span>
-											<!-- <span class="text-2xs text-slate-400 dark:text-slate-500">{formatContext(model.contextWindow)}</span> -->
-										</div>
-										{#if caps.length > 0}
-											<div class="flex flex-wrap gap-1 mt-1.5">
-												{#each caps as cap}
-													<span class="px-1.5 py-0.5 text-2xs rounded bg-slate-100 dark:bg-slate-700/50 text-slate-500 dark:text-slate-400 leading-none">
-														{cap}
-													</span>
-												{/each}
-											</div>
-										{/if}
-									</div>
-								</button>
-							{/each}
+		<!-- Custom Model Toggle -->
+		<div class="mb-5">
+			<button
+				type="button"
+				class="flex items-center gap-3 w-full text-left"
+				onclick={toggleCustomModel}
+			>
+				<div class="relative w-9 h-5 rounded-full transition-colors duration-200 flex-shrink-0
+					{useCustomModel ? 'bg-violet-600' : 'bg-slate-300 dark:bg-slate-600'}">
+					<div class="absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200
+						{useCustomModel ? 'translate-x-4.5' : 'translate-x-0.5'}"></div>
+				</div>
+				<div>
+					<span class="text-sm font-medium text-slate-900 dark:text-slate-100">Use custom model</span>
+					<p class="text-xs text-slate-500 dark:text-slate-400">Use a different engine and model instead of the assistant model</p>
+				</div>
+			</button>
+		</div>
+
+		<!-- Current Model Info (hidden when custom model is active) -->
+		{#if !useCustomModel}
+			<div class="mb-2">
+				<label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">Model</label>
+				<div class="flex items-center gap-3 px-3.5 py-2.5 border border-slate-200 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-800/50">
+					{#if activeEngineMeta}
+						<div class="flex-shrink-0">
+							<div class="flex dark:hidden items-center justify-center w-4 h-4">{@html activeEngineMeta.icon.light}</div>
+							<div class="hidden dark:flex items-center justify-center w-4 h-4">{@html activeEngineMeta.icon.dark}</div>
 						</div>
 					{/if}
+					<div class="flex-1 min-w-0">
+						<span class="text-sm font-medium text-slate-900 dark:text-slate-100">
+							{activeModelMeta?.name || activeModel}
+						</span>
+						<span class="text-xs text-slate-500 dark:text-slate-400 ml-1.5">(same as assistant)</span>
+					</div>
 				</div>
-			{/each}
+			</div>
 		{/if}
-	</div>
+
+		<!-- Custom Engine & Model Selection (only when toggled on) -->
+		{#if useCustomModel}
+			<div class="mb-2">
+				<EngineModelPicker
+					engine={commitGen.engine}
+					model={commitGen.model}
+					onEngineChange={handleCommitEngineChange}
+					onModelChange={handleCommitModelChange}
+				/>
+			</div>
+		{/if}
+	{/if}
 </div>

package/frontend/components/workspace/PanelHeader.svelte

@@ -548,7 +548,7 @@
 				{@const gitRemotes = gitPanelRef?.panelActions?.getRemotes() || []}
 
 				<!-- Remote selector -->
-				{#if hasRemotes}
+				{#if hasRemotes && gitRemotes.length > 1}
 					<div class="relative">
 						<button
 							type="button"
@@ -586,8 +586,6 @@
 							</div>
 						{/if}
 					</div>
-				{:else if gitPanelRef?.panelActions?.getIsRepo()}
-					<span class="text-xs text-slate-400 italic px-1">no remote</span>
 				{/if}
 
 				<!-- Fetch -->

package/frontend/components/workspace/WorkspaceLayout.svelte

@@ -19,13 +19,14 @@
 	import ModalProvider from '$frontend/components/common/overlay/ModalProvider.svelte';
 	import SettingsModal from '$frontend/components/settings/SettingsModal.svelte';
 	import HistoryModal from '$frontend/components/history/HistoryModal.svelte';
+	import NotificationToast from '$frontend/components/common/feedback/NotificationToast.svelte';
 
 	// Services
 	import { initializeTheme } from '$frontend/utils/theme';
 	import { initializeStore } from '$frontend/stores/core/app.svelte';
 	import { initializeProjects } from '$frontend/stores/core/projects.svelte';
 	import { initializeSessions } from '$frontend/stores/core/sessions.svelte';
-	import { initializeNotifications } from '$frontend/stores/ui/notification.svelte';
+	import { initializeNotifications, notificationStore } from '$frontend/stores/ui/notification.svelte';
 	import { applyServerSettings, loadSystemSettings } from '$frontend/stores/features/settings.svelte';
 	import { initPresence } from '$frontend/stores/core/presence.svelte';
 	import ws from '$frontend/utils/ws';
@@ -163,3 +164,12 @@
 
 <!-- History Modal -->
 <HistoryModal bind:isOpen={showHistoryModal} onClose={closeHistoryModal} />
+
+<!-- Toast Notifications -->
+{#if notificationStore.notifications.length > 0}
+	<div class="fixed top-4 right-4 z-[200] flex flex-col gap-2">
+		{#each notificationStore.notifications as notification (notification.id)}
+			<NotificationToast {notification} />
+		{/each}
+	</div>
+{/if}

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

@@ -139,6 +139,8 @@
 	// Container width detection for 2-column layout
 	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)));
 
 	// FileTree ref
@@ -1101,6 +1103,26 @@
 		}
 	});
 
+	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 for responsive layout
 	onMount(() => {
 		if (containerRef && typeof ResizeObserver !== 'undefined') {
@@ -1182,12 +1204,13 @@
 	{:else}
 		<div class="flex-1 overflow-hidden">
 			<!-- Unified layout: always render both Tree and Viewer to preserve internal state -->
-			<div class="h-full flex">
+			<div class="h-full flex" class:select-none={isResizing} class:cursor-col-resize={isResizing}>
 				<!-- Tree panel: always rendered, hidden via CSS in 1-column viewer mode -->
 				<div
 					class={isTwoColumnMode
-						? 'w-72 flex-shrink-0 h-full overflow-hidden border-r border-slate-200 dark:border-slate-700'
+						? 'flex-shrink-0 h-full overflow-hidden'
 						: (viewMode === 'tree' ? 'w-full h-full overflow-hidden' : 'hidden')}
+					style={isTwoColumnMode ? `width: ${leftPanelWidth}px` : undefined}
 				>
 					<div class="h-full overflow-auto" bind:this={treeScrollContainer}>
 						<FileTree
@@ -1210,7 +1233,22 @@
 					</div>
 				</div>
 
-				<!-- Editor panel: always rendered, hidden via CSS in 1-column tree mode -->
+				{#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}
+
+			<!-- Editor panel: always rendered, hidden via CSS in 1-column tree mode -->
 				<div
 					class={isTwoColumnMode
 						? 'flex-1 h-full overflow-hidden flex flex-col'