@myrialabs/clopen 0.0.1

package/frontend/lib/components/settings/user/UserSettings.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { userStore } from '$frontend/lib/stores/features/user.svelte';
+	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import Icon from '../../common/Icon.svelte';
+	import { debug } from '$shared/utils/logger';
+
+	// State
+	let userNameInput = $state('');
+	let isEditing = $state(false);
+	let isSaving = $state(false);
+
+	// Update input when user changes
+	$effect(() => {
+		if (userStore.currentUser?.name) {
+			userNameInput = userStore.currentUser.name;
+		}
+	});
+
+	// Handle save user name
+	async function saveUserName() {
+		if (!userNameInput.trim()) {
+			addNotification({
+				type: 'error',
+				title: 'Validation Error',
+				message: 'Name cannot be empty'
+			});
+			return;
+		}
+
+		isSaving = true;
+
+		try {
+			const success = await userStore.updateName(userNameInput.trim());
+
+			if (success) {
+				isEditing = false;
+				addNotification({
+					type: 'success',
+					title: 'Updated',
+					message: 'Display name updated successfully'
+				});
+			} else {
+				addNotification({
+					type: 'error',
+					title: 'Error',
+					message: 'Failed to update user name'
+				});
+			}
+		} catch (error) {
+			debug.error('settings', 'Error updating user name:', error);
+			addNotification({
+				type: 'error',
+				title: 'Error',
+				message: 'An error occurred while updating user name'
+			});
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	// Handle cancel edit
+	function cancelEdit() {
+		userNameInput = userStore.currentUser?.name || '';
+		isEditing = false;
+	}
+
+	// Handle start edit
+	function startEdit() {
+		isEditing = true;
+	}
+</script>
+
+<div class="py-1">
+	<h3 class="text-base font-bold text-slate-900 dark:text-slate-100 mb-1.5">User Profile</h3>
+	<p class="text-sm text-slate-600 dark:text-slate-500 mb-5">
+		Manage your identity and display preferences
+	</p>
+
+	{#if !userStore.currentUser}
+		<div class="flex items-center justify-center gap-3 py-10 text-slate-600 dark:text-slate-500 text-sm">
+			<div
+				class="w-5 h-5 border-2 border-violet-500/20 border-t-violet-600 rounded-full animate-spin"
+			></div>
+			<span>Loading user settings...</span>
+		</div>
+	{:else}
+		<div class="flex flex-col gap-4">
+			<!-- Current User Card -->
+			<div
+				class="flex items-center gap-3.5 p-4.5 bg-gradient-to-br from-violet-500/10 to-purple-500/5 dark:from-violet-500/10 dark:to-purple-500/8 border border-violet-500/20 rounded-xl"
+			>
+				<div
+					class="flex items-center justify-center w-12 h-12 rounded-xl text-lg font-bold text-white shrink-0"
+					style="background-color: {userStore.currentUser?.color || '#7c3aed'}"
+				>
+					{userStore.currentUser?.avatar || 'U'}
+				</div>
+				<div class="flex-1 min-w-0">
+					<div class="text-base font-semibold text-slate-900 dark:text-slate-100 mb-0.5">
+						{userStore.currentUser?.name || 'Anonymous User'}
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-500">Anonymous user identity</div>
+				</div>
+				<div
+					class="flex items-center gap-1.5 py-1.5 px-3 bg-emerald-500/15 rounded-full text-xs font-medium text-emerald-500"
+				>
+					<span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse"></span>
+					<span>Active</span>
+				</div>
+			</div>
+
+			<!-- Edit Display Name -->
+			<div
+				class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl"
+			>
+				<div
+					class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3"
+				>
+					<Icon name="lucide:pencil" class="w-4 h-4 opacity-70" />
+					<span>Display Name</span>
+				</div>
+
+				{#if isEditing}
+					<div class="flex flex-col gap-3">
+						<input
+							type="text"
+							bind:value={userNameInput}
+							placeholder="Enter your display name"
+							class="w-full py-3 px-3.5 bg-slate-50 dark:bg-slate-900/80 border border-violet-500/20 rounded-lg text-slate-900 dark:text-slate-100 text-sm outline-none transition-all duration-150 placeholder:text-slate-600 dark:placeholder:text-slate-500 focus:border-violet-600 focus:shadow-[0_0_0_3px_rgba(124,58,237,0.1)]"
+						/>
+						<div class="flex gap-2.5">
+							<button
+								type="button"
+								class="flex items-center justify-center gap-1.5 py-2.5 px-4 border-none rounded-lg text-sm font-semibold cursor-pointer transition-all duration-150 bg-gradient-to-br from-violet-600 to-purple-600 text-white hover:shadow-violet-500/30 disabled:opacity-50 disabled:cursor-not-allowed"
+								onclick={saveUserName}
+								disabled={!userNameInput.trim() || isSaving}
+							>
+								{#if isSaving}
+									<div
+										class="w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin"
+									></div>
+									Saving...
+								{:else}
+									<Icon name="lucide:check" class="w-4 h-4" />
+									Save
+								{/if}
+							</button>
+							<button
+								type="button"
+								class="flex items-center justify-center gap-1.5 py-2.5 px-4 border-none rounded-lg text-sm font-semibold cursor-pointer transition-all duration-150 bg-slate-100 dark:bg-slate-600/20 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-600/30 disabled:opacity-50 disabled:cursor-not-allowed"
+								onclick={cancelEdit}
+								disabled={isSaving}
+							>
+								Cancel
+							</button>
+						</div>
+					</div>
+				{:else}
+					<div class="flex items-center justify-between gap-3">
+						<div class="text-sm text-slate-900 dark:text-slate-100">
+							{userStore.currentUser?.name || 'Not set'}
+						</div>
+						<button
+							type="button"
+							class="flex items-center gap-1.5 py-2 px-3.5 bg-transparent border border-violet-500/20 dark:border-violet-500/30 rounded-lg text-sm font-semibold text-violet-600 dark:text-violet-400 cursor-pointer transition-all duration-150 hover:bg-violet-500/10"
+							onclick={startEdit}
+						>
+							<Icon name="lucide:pencil" class="w-4 h-4" />
+							Edit
+						</button>
+					</div>
+				{/if}
+			</div>
+
+			<!-- User ID -->
+			<div
+				class="p-4 bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200 dark:border-slate-800 rounded-xl"
+			>
+				<div
+					class="flex items-center gap-2 text-sm font-semibold text-slate-500 mb-3"
+				>
+					<Icon name="lucide:fingerprint" class="w-4 h-4 opacity-70" />
+					<span>User ID</span>
+				</div>
+				<div class="flex flex-col gap-1.5">
+					<code
+						class="py-2.5 px-3.5 bg-slate-50 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800 rounded-lg font-mono text-xs text-slate-500 break-all"
+						>{userStore.currentUser?.id || 'Not available'}</code
+					>
+					<span class="text-xs text-slate-600 dark:text-slate-500"
+						>Unique identifier for this session</span
+					>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,368 @@
+<!--
+	Pure XTerminal Integration - Clean Terminal Component
+	All terminal functionality handled by xterm.js
+-->
+<script lang="ts">
+	import { terminalStore } from '$frontend/lib/stores/features/terminal.svelte';
+	import { projectState } from '$frontend/lib/stores/core/projects.svelte';
+	import { getShortcutLabels } from '$frontend/lib/utils/platform';
+	import TerminalTabs from './TerminalTabs.svelte';
+	import LoadingSpinner from '../common/LoadingSpinner.svelte';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+	import XTerm from '$frontend/lib/components/common/xterm/XTerm.svelte';
+
+	// Project-aware state
+	const hasActiveProject = $derived(projectState.currentProject !== null);
+	const projectPath = $derived(projectState.currentProject?.path || '');
+	const projectId = $derived(projectState.currentProject?.id || '');
+
+	// Terminal state from store
+	const activeSession = $derived(terminalStore.activeSession);
+	// Use session-specific execution state instead of global
+	const isExecuting = $derived(activeSession ? terminalStore.isSessionExecuting(activeSession.id) : false);
+
+	// XTerminal reference and cancellation state
+	let xterminalRef = $state<{ scrollToBottom: () => void; clear: () => void; writeData: (data: string) => void }>();
+	let isCancelling = $state(false);
+	let terminalContainer: HTMLDivElement | undefined = $state();
+
+	// Get platform-specific shortcut labels
+	const shortcuts = $derived(getShortcutLabels());
+
+	// Initialize terminal only once when component mounts
+	let isInitialized = false;
+	$effect(() => {
+		if (hasActiveProject && !isInitialized) {
+			// Wait for background service to complete restoration
+			const checkAndInitialize = async () => {
+				if (typeof window !== 'undefined') {
+					try {
+						const { backgroundTerminalService } = await import('$frontend/lib/services/terminal/background');
+						const { terminalProjectManager } = await import('$frontend/lib/services/terminal');
+
+						// Initialize terminalProjectManager first
+						terminalProjectManager.initialize();
+
+						// First ensure background service is initialized
+						await backgroundTerminalService.initialize();
+
+						// Wait for restoration to complete (max 2 seconds)
+						let attempts = 0;
+						while (!backgroundTerminalService.isRestorationDone() && attempts < 20) {
+							await new Promise(resolve => setTimeout(resolve, 100));
+							attempts++;
+						}
+
+						// Now safe to initialize terminal store
+						terminalStore.initialize(hasActiveProject, projectPath);
+
+						// Ensure project context is set up in terminalProjectManager
+						if (projectId && projectPath) {
+							await terminalProjectManager.switchToProject(projectId, projectPath);
+						}
+
+						isInitialized = true;
+					} catch (error) {
+						// Failed to initialize terminal services
+						// If background service fails, just initialize normally
+						terminalStore.initialize(hasActiveProject, projectPath);
+						isInitialized = true;
+					}
+				}
+			};
+
+			checkAndInitialize();
+		}
+	});
+
+	// Setup event listeners for Ctrl+C handling
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			// Use capture phase to intercept Ctrl+C before XTerm
+			const handleGlobalKeyDown = (e: KeyboardEvent) => {
+				// Check if terminal is focused
+				const terminalElement = document.querySelector('.xterm');
+				const isTerminalFocused = terminalElement && terminalElement.contains(document.activeElement);
+				
+				if (isTerminalFocused && e.ctrlKey && e.key === 'c' && isExecuting && !isCancelling) {
+					e.preventDefault();
+					e.stopPropagation();
+					e.stopImmediatePropagation();
+					// Global Ctrl+C intercepted during execution
+					handleCancel();
+				}
+			};
+			
+			// Add listener with capture to intercept before bubbling
+			document.addEventListener('keydown', handleGlobalKeyDown, true);
+			
+			// Also listen for custom event from XTerm as backup
+			const handleTerminalCancel = (event: Event) => {
+				const customEvent = event as CustomEvent;
+				// Received terminal-cancel event
+				if (isExecuting && !isCancelling) {
+					handleCancel();
+				}
+			};
+			
+			if (terminalContainer) {
+				terminalContainer.addEventListener('terminal-cancel', handleTerminalCancel);
+			}
+			
+			return () => {
+				document.removeEventListener('keydown', handleGlobalKeyDown, true);
+				terminalContainer?.removeEventListener('terminal-cancel', handleTerminalCancel);
+			};
+		}
+	});
+
+	// Connect to PTY session (initial auto-connect)
+	async function connectToPtySession(command: string, terminalSize?: { cols: number; rows: number }) {
+		if (!hasActiveProject || !projectId) {
+			return;
+		}
+
+		// Only connect, ignore command parameter (kept for XTerm compatibility)
+		await terminalStore.connectToSession(hasActiveProject ? projectPath : undefined, projectId, terminalSize);
+	}
+
+	// Handle keyboard shortcuts
+	function handleKeyDown(e: KeyboardEvent) {
+		// Handle Ctrl+C to cancel running command
+		if (e.ctrlKey && e.key === 'c' && isExecuting) {
+			// Ctrl+C pressed - cancelling command
+			handleCancel();
+		}
+	}
+	
+	// Send Ctrl+C signal to terminal
+	// This function always sends the interrupt signal regardless of execution state
+	// It's useful as a utility shortcut, especially for mobile accessibility
+	async function handleCancel() {
+		// UI: Cancel button clicked - sending Ctrl+C signal
+		isCancelling = true;
+
+		if (!activeSession) {
+			// No active session to send signal
+			isCancelling = false;
+			return;
+		}
+
+		try {
+			// Always attempt to send cancel signal to the active session
+			// This sends Ctrl+C (\x03) directly to the PTY process
+			await terminalStore.cancelCommand();
+			// Ctrl+C signal sent to terminal
+		} catch (error) {
+			// Error sending Ctrl+C signal
+		} finally {
+			isCancelling = false;
+		}
+	}
+
+	// Clear terminal session
+	function handleClear() {
+		if (activeSession) {
+			// Clear the terminal store session
+			terminalStore.clearSession(activeSession.id);
+			
+			// Also immediately clear the XTerm display
+			if (xterminalRef) {
+				xterminalRef.clear();
+			}
+		}
+	}
+
+	// Create new terminal session
+	async function handleCloseSession(sessionId: string) {
+		// Check if this is the last session before closing
+		const isLastSession = terminalStore.sessions.length <= 1;
+
+		// Close the session
+		const closed = await terminalStore.closeSession(sessionId);
+
+		// If it was the last session and it was closed successfully, create a new one
+		if (closed && isLastSession) {
+			await handleNewSession();
+		}
+	}
+
+	async function handleNewSession() {
+		if (!hasActiveProject || !projectId || !projectPath) {
+			// Cannot create new terminal: missing project information
+			return;
+		}
+
+		// Use terminalProjectManager to create new session for current project
+		try {
+			const { terminalProjectManager } = await import('$frontend/lib/services/terminal');
+
+			// Pass project ID and path directly to ensure it works even if currentProjectId isn't set
+			const newSessionId = terminalProjectManager.addTerminalToCurrentProject(projectId, projectPath);
+
+			if (!newSessionId) {
+				// If it still fails, try switching to project first then adding
+				// Failed to add terminal, switching to project first
+				await terminalProjectManager.switchToProject(projectId, projectPath);
+				const retrySessionId = terminalProjectManager.addTerminalToCurrentProject(projectId, projectPath);
+
+				if (!retrySessionId) {
+					// Final fallback
+					// Using fallback terminal creation
+					terminalStore.createNewSession(projectPath, projectPath, projectId);
+				}
+			}
+		} catch (error) {
+			// Failed to create new terminal session
+			// Fallback to direct creation with projectId for proper isolation
+			terminalStore.createNewSession(projectPath, projectPath, projectId);
+		}
+	}
+
+	// Format directory path for display in header
+	function formatDirectory(dir: string): string {
+		if (!dir || typeof dir !== 'string') return '~';
+
+		// Convert backslashes to forward slashes for consistent display
+		const normalizedDir = dir.replace(/\\/g, '/');
+
+		// For long paths, shorten them
+		const maxLength = 50;
+		if (normalizedDir.length > maxLength) {
+			const parts = normalizedDir.split('/');
+			if (parts.length > 3) {
+				return parts[0] + '/.../' + parts.slice(-1).join('/');
+			}
+		}
+
+		return normalizedDir;
+	}
+
+	// Export actions and state for parent components
+	export const terminalActions = {
+		handleClear,
+		handleNewSession,
+		handleCancel,
+		getSessions: () => terminalStore.sessions,
+		getActiveSession: () => activeSession,
+		isExecuting: () => isExecuting,
+		isCancelling: () => isCancelling
+	};
+</script>
+
+<!-- Terminal container -->
+<div class="h-full bg-slate-50 dark:bg-slate-950 flex flex-col overflow-hidden min-h-0"
+	onkeydown={handleKeyDown}
+	tabindex="-1"
+	role="application"
+	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">
+		<!-- Terminal Tabs -->
+		<TerminalTabs
+			sessions={terminalStore.sessions}
+			activeSessionId={terminalStore.activeSessionId}
+			onSwitchSession={(sessionId) => terminalStore.switchToSession(sessionId)}
+			onCloseSession={handleCloseSession}
+			onNewSession={handleNewSession}
+		/>
+	</div>
+
+	<!-- Pure XTerminal integration -->
+	{#if activeSession}
+		<div class="flex-1 relative min-h-0 overflow-hidden font-mono" bind:this={terminalContainer}>
+			<XTerm
+				bind:this={xterminalRef}
+				session={activeSession}
+				hasActiveProject={hasActiveProject}
+				projectPath={projectPath}
+				isExecuting={isExecuting}
+				onExecuteCommand={connectToPtySession}
+				onClearSession={() => handleClear()}
+				class="absolute inset-0"
+			/>
+		</div>
+	{:else}
+		<!-- No active session -->
+		<div class="flex-1 flex items-center justify-center font-mono">
+			<div class="text-center text-slate-600 dark:text-slate-400">
+				<p>No terminal sessions available</p>
+				<button
+					class="mt-2 px-4 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-md transition-colors"
+					onclick={handleNewSession}
+				>
+					Create New Terminal
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Terminal status bar -->
+	<div class="flex-shrink-0 px-2 py-0.5 bg-slate-100 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 text-3xs text-slate-500 dark:text-slate-500 font-mono">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center space-x-3">
+				<span class="hidden sm:inline"><kbd class="px-1 py-0.5 bg-slate-200 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded text-3xs text-slate-700 dark:text-slate-300">↑↓</kbd> History</span>
+				<span class="hidden md:inline"><kbd class="px-1 py-0.5 bg-slate-200 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded text-3xs text-slate-700 dark:text-slate-300">Ctrl+L</kbd> Clear</span>
+				<span class="hidden sm:inline"><kbd class="px-1 py-0.5 bg-slate-200 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded text-3xs text-slate-700 dark:text-slate-300">{shortcuts.cancel}</kbd> Interrupt
+					{#if isCancelling}
+						<span class="animate-pulse ml-1">(cancelling...)</span>
+					{/if}
+				</span>
+			</div>
+			<div class="flex items-center space-x-1.5">
+				{#if hasActiveProject}
+					<span class="text-emerald-500 text-xs">●</span>
+					<span class="hidden sm:inline">Ready</span>
+				{:else}
+					<span class="text-amber-500 text-xs">●</span>
+					<span class="hidden sm:inline">No Project</span>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	/* Terminal cursor animation */
+	@keyframes terminal-cursor {
+		0%, 50% { background-color: #22c55e; }
+		51%, 100% { background-color: transparent; }
+	}
+
+	:global(.animate-terminal-cursor) {
+		animation: terminal-cursor 1s infinite;
+	}
+
+	/* Terminal scrollbar styling */
+	:global(.terminal-scrollbar) {
+		scrollbar-width: thin;
+		scrollbar-color: rgb(148 163 184 / 0.3) transparent;
+	}
+
+	:global(.terminal-scrollbar::-webkit-scrollbar) {
+		width: 6px;
+	}
+
+	:global(.terminal-scrollbar::-webkit-scrollbar-track) {
+		background: transparent;
+	}
+
+	:global(.terminal-scrollbar::-webkit-scrollbar-thumb) {
+		background-color: rgb(148 163 184 / 0.3);
+		border-radius: 3px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.dark .terminal-scrollbar::-webkit-scrollbar-thumb) {
+		background-color: rgb(71 85 105 / 0.3);
+	}
+
+	:global(.terminal-scrollbar::-webkit-scrollbar-thumb:hover) {
+		background-color: rgb(148 163 184 / 0.6);
+	}
+
+	:global(.dark .terminal-scrollbar::-webkit-scrollbar-thumb:hover) {
+		background-color: rgb(71 85 105 / 0.6);
+	}
+</style>

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

@@ -0,0 +1,87 @@
+<!--
+	Terminal Tabs Component
+	Manages terminal session tabs with close and new tab functionality
+-->
+<script lang="ts">
+	import type { TerminalSession } from '$shared/types/terminal';
+	import Icon from '$frontend/lib/components/common/Icon.svelte';
+
+	const {
+		sessions = [],
+		activeSessionId,
+		onSwitchSession,
+		onCloseSession,
+		onNewSession
+	}: {
+		sessions: TerminalSession[];
+		activeSessionId: string | null;
+		onSwitchSession?: (sessionId: string) => void;
+		onCloseSession?: (sessionId: string) => void;
+		onNewSession?: () => void;
+	} = $props();
+
+	// Check for duplicate sessions (for debugging)
+	$effect(() => {
+		const ids = sessions.map(s => s.id);
+		const uniqueIds = new Set(ids);
+		if (ids.length !== uniqueIds.size) {
+			// Duplicate session IDs detected in TerminalTabs
+			// Sessions:
+		}
+	});
+</script>
+
+<!-- Compact Terminal Tabs -->
+<div class="flex items-center gap-1.5 overflow-x-auto flex-1">
+	{#each sessions as session (session.id)}
+		<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
+				{session.isActive
+					? 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100'
+					: 'bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'}"
+			onclick={() => onSwitchSession?.(session.id)}
+			role="tab"
+			tabindex="0"
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					onSwitchSession?.(session.id);
+				}
+			}}
+		>
+			<!-- Terminal icon -->
+			<Icon name="lucide:terminal" class="w-3 h-3 flex-shrink-0" />
+
+			<!-- Session name -->
+			<span class="text-xs font-medium truncate max-w-37.5">
+				{session.name}
+			</span>
+
+			<!-- Close button -->
+			<button
+				onclick={(e) => {
+					e.stopPropagation();
+					onCloseSession?.(session.id);
+				}}
+				class="flex hover:bg-slate-300 dark:hover:bg-slate-600 rounded p-0.5 transition-all duration-200 flex-shrink-0"
+				title="Close terminal"
+				aria-label="Close terminal session"
+			>
+				<Icon name="lucide:x" class="w-3 h-3" />
+			</button>
+		</div>
+	{/each}
+
+	<!-- New terminal button -->
+	{#if onNewSession}
+		<button
+			onclick={onNewSession}
+			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 flex-shrink-0"
+			title="New terminal"
+			aria-label="New terminal session"
+		>
+			<Icon name="lucide:plus" class="w-3 h-3" />
+		</button>
+	{/if}
+</div>
+