@myrialabs/clopen 0.0.1

package/frontend/lib/stores/features/tunnel.svelte.ts

@@ -0,0 +1,161 @@
+/**
+ * Tunnel Store
+ * Manages cloudflared tunnel state for projects
+ */
+
+import { debug } from '$shared/utils/logger';
+import ws from '$frontend/lib/utils/ws';
+
+type TunnelProgress =
+	| { stage: 'idle' }
+	| { stage: 'checking-binary' }
+	| { stage: 'downloading-binary'; progress?: number }
+	| { stage: 'binary-ready' }
+	| { stage: 'starting-tunnel' }
+	| { stage: 'generating-url' }
+	| { stage: 'connected' }
+	| { stage: 'failed'; error: string };
+
+interface TunnelInfo {
+	port: number;
+	publicUrl: string;
+	startedAt: string;
+}
+
+interface PortState {
+	isLoading: boolean;
+	error: string | null;
+	progress: TunnelProgress;
+}
+
+interface TunnelState {
+	tunnels: TunnelInfo[];
+	portStates: Record<number, PortState>;
+}
+
+// Tunnel store state
+const tunnelState = $state<TunnelState>({
+	tunnels: [],
+	portStates: {}
+});
+
+export const tunnelStore = {
+	get tunnels() {
+		return tunnelState.tunnels;
+	},
+	isLoading(port: number) {
+		return tunnelState.portStates[port]?.isLoading ?? false;
+	},
+	getError(port: number) {
+		return tunnelState.portStates[port]?.error ?? null;
+	},
+	getProgress(port: number) {
+		return tunnelState.portStates[port]?.progress ?? { stage: 'idle' };
+	},
+	getTunnel(port: number) {
+		return tunnelState.tunnels.find((t) => t.port === port) || null;
+	},
+
+	/**
+	 * Start tunnel globally
+	 * Note: First time may take 30-90 seconds (downloading binary + starting tunnel)
+	 */
+	async startTunnel(port: number, autoStopMinutes?: number) {
+		// Initialize port state
+		tunnelState.portStates[port] = {
+			isLoading: true,
+			error: null,
+			progress: { stage: 'starting-tunnel' }
+		};
+
+		debug.log('tunnel', `[Frontend] Starting tunnel for port ${port}...`);
+
+		try {
+			// Use HTTP pattern directly
+			const result = await ws.http('tunnel:start', { port, autoStopMinutes });
+
+			if (!result || !result.publicUrl) {
+				throw new Error('No result received from server');
+			}
+
+			// Add tunnel to the list
+			tunnelState.tunnels.push({
+				port,
+				publicUrl: result.publicUrl,
+				startedAt: new Date().toISOString()
+			});
+
+			tunnelState.portStates[port].progress = { stage: 'connected' };
+			tunnelState.portStates[port].isLoading = false;
+
+			debug.log('tunnel', `[Frontend] ✅ Tunnel started successfully on port ${port}:`, result.publicUrl);
+			if (result.timings) {
+				debug.log('tunnel', '[Frontend] Timings:', result.timings);
+			}
+
+			// Reset progress after a short delay
+			setTimeout(() => {
+				if (tunnelState.portStates[port]) {
+					tunnelState.portStates[port].progress = { stage: 'idle' };
+				}
+			}, 1500);
+		} catch (error) {
+			if (error instanceof Error) {
+				tunnelState.portStates[port].error = error.message;
+				tunnelState.portStates[port].progress = { stage: 'failed', error: error.message };
+				debug.error('tunnel', '[Frontend] Error:', error.message);
+			} else {
+				const errorMsg = 'Unknown error';
+				tunnelState.portStates[port].error = errorMsg;
+				tunnelState.portStates[port].progress = { stage: 'failed', error: errorMsg };
+				debug.error('tunnel', '[Frontend] Unknown error:', error);
+			}
+			tunnelState.portStates[port].isLoading = false;
+			throw error;
+		}
+	},
+
+	/**
+	 * Stop tunnel for a port
+	 */
+	async stopTunnel(port: number) {
+		try {
+			const response = await ws.http('tunnel:stop', { port });
+
+			if (!response.stopped) {
+				throw new Error('Failed to stop tunnel');
+			}
+
+			// Remove tunnel from the list
+			tunnelState.tunnels = tunnelState.tunnels.filter((t) => t.port !== port);
+			delete tunnelState.portStates[port];
+
+			debug.log('tunnel', `Tunnel stopped on port ${port}`);
+		} catch (error) {
+			debug.error('tunnel', 'Failed to stop tunnel:', error);
+			throw error;
+		}
+	},
+
+	/**
+	 * Check tunnel status globally
+	 */
+	async checkStatus() {
+		try {
+			const response = await ws.http('tunnel:status', {});
+
+			// Update tunnels list from server
+			tunnelState.tunnels = response.tunnels || [];
+		} catch (error) {
+			debug.error('tunnel', 'Failed to check tunnel status:', error);
+		}
+	},
+
+	/**
+	 * Reset tunnel state
+	 */
+	reset() {
+		tunnelState.tunnels = [];
+		tunnelState.portStates = {};
+	}
+};

package/frontend/lib/stores/features/user.svelte.ts

@@ -0,0 +1,96 @@
+/**
+ * User Store - Svelte 5 Runes
+ * Manages anonymous user state and provides reactive updates
+ */
+
+import { getOrCreateAnonymousUser, updateAnonymousUserName, getCurrentAnonymousUser, type AnonymousUser } from '$shared/utils/anonymous-user';
+import { debug } from '$shared/utils/logger';
+import ws from '$frontend/lib/utils/ws';
+
+// User state - initialize with null, will be properly set after async load
+let currentUser = $state<AnonymousUser | null>(null);
+let isInitializing = $state<boolean>(false);
+
+// User store
+export const userStore = {
+	get currentUser() {
+		return currentUser;
+	},
+
+	get isInitializing() {
+		return isInitializing;
+	},
+
+	// Initialize user (called on app start)
+	async initialize() {
+		if (typeof window === 'undefined') {
+			debug.warn('user', 'Cannot initialize user on server side');
+			return;
+		}
+
+		if (isInitializing) {
+			debug.warn('user', 'User initialization already in progress');
+			return;
+		}
+
+		isInitializing = true;
+
+		try {
+			// First check if user already exists in localStorage (fast path)
+			const existingUser = getCurrentAnonymousUser();
+			if (existingUser) {
+				currentUser = existingUser;
+				// Sync user context with WebSocket (for user-targeted broadcasting)
+				// IMPORTANT: Must await to ensure server has context before other operations
+				await ws.setUser(existingUser.id);
+				debug.log('user', '✅ Loaded existing user from localStorage:', existingUser.name);
+			} else {
+				// Generate new user from server
+				debug.log('user', 'No existing user, generating from server...');
+				const newUser = await getOrCreateAnonymousUser();
+				currentUser = newUser;
+				// Sync user context with WebSocket
+				// IMPORTANT: Must await to ensure server has context before other operations
+				if (newUser) {
+					await ws.setUser(newUser.id);
+				}
+			}
+		} catch (error) {
+			debug.error('user', 'Failed to initialize user:', error);
+		} finally {
+			isInitializing = false;
+		}
+	},
+
+	// Update user name
+	async updateName(newName: string): Promise<boolean> {
+		if (typeof window === 'undefined') {
+			return false;
+		}
+
+		try {
+			const updatedUser = await updateAnonymousUserName(newName);
+
+			if (updatedUser) {
+				currentUser = updatedUser;
+				return true;
+			}
+
+			return false;
+		} catch (error) {
+			debug.error('user', 'Failed to update user name:', error);
+			return false;
+		}
+	},
+
+	// Refresh user from localStorage
+	refresh() {
+		if (typeof window !== 'undefined') {
+			const user = getCurrentAnonymousUser();
+			if (user) {
+				currentUser = user;
+				debug.log('user', '✅ Refreshed user from localStorage:', user.name);
+			}
+		}
+	}
+};

package/frontend/lib/stores/ui/chat-input.svelte.ts

@@ -0,0 +1,57 @@
+/**
+ * Chat Input State Store
+ * Manages the chat input text and focus state
+ */
+
+interface ChatInputState {
+	text: string;
+	shouldFocus: boolean;
+}
+
+// Create reactive state
+const state = $state<ChatInputState>({
+	text: '',
+	shouldFocus: false
+});
+
+/**
+ * Set input text and optionally focus
+ */
+export function setInputText(text: string, focus: boolean = true) {
+	state.text = text;
+	state.shouldFocus = focus;
+}
+
+/**
+ * Clear input text
+ */
+export function clearInput() {
+	state.text = '';
+	state.shouldFocus = false;
+}
+
+/**
+ * Reset focus flag after focusing
+ */
+export function resetFocus() {
+	state.shouldFocus = false;
+}
+
+// Flag to skip next server restore (prevents stale input restoration
+// when ChatInput is remounted during welcome→chat transition)
+let _skipNextRestore = false;
+
+export function setSkipNextRestore(skip: boolean) {
+	_skipNextRestore = skip;
+}
+
+export function shouldSkipRestore(): boolean {
+	if (_skipNextRestore) {
+		_skipNextRestore = false;
+		return true;
+	}
+	return false;
+}
+
+// Export reactive state
+export const chatInputState = state;

package/frontend/lib/stores/ui/chat-model.svelte.ts

@@ -0,0 +1,61 @@
+/**
+ * Chat Model State Store
+ *
+ * Holds the local engine/model selection for the chat input.
+ * Isolated from Settings — Settings only provides the initial default.
+ * Changes here do NOT persist to Settings, and Settings changes do NOT
+ * affect the current session's selection after the first message is sent.
+ */
+
+import { DEFAULT_ENGINE, DEFAULT_MODEL } from '$shared/constants/engines';
+import type { EngineType } from '$shared/types/engine';
+
+interface ChatModelState {
+	engine: EngineType;
+	model: string;
+	engineModelMemory: Record<string, string>;
+	claudeAccountId: number | null;
+}
+
+// Local reactive state — starts from compile-time defaults.
+// Initialized from Settings on each new session via initChatModel().
+export const chatModelState = $state<ChatModelState>({
+	engine: DEFAULT_ENGINE,
+	model: DEFAULT_MODEL,
+	engineModelMemory: { 'claude-code': DEFAULT_MODEL },
+	claudeAccountId: null
+});
+
+/**
+ * Initialize the local chat model state from Settings defaults.
+ * Called when a new session starts (no messages yet).
+ */
+export function initChatModel(
+	engine: EngineType,
+	model: string,
+	memory: Record<string, string>
+): void {
+	chatModelState.engine = engine;
+	chatModelState.model = model;
+	chatModelState.engineModelMemory = { ...memory };
+	// claudeAccountId will be set by EngineModelPicker after fetching accounts
+	chatModelState.claudeAccountId = null;
+}
+
+/**
+ * Restore the local chat model state from a session's persisted engine/model.
+ * Called when continuing an existing session (has messages).
+ * IMPORTANT: Must NOT read from chatModelState to avoid circular tracking in $effect.
+ */
+export function restoreChatModelFromSession(
+	engine: EngineType,
+	model: string,
+	claudeAccountId?: number | null
+): void {
+	chatModelState.engine = engine;
+	chatModelState.model = model;
+	// Only set the current engine's model — avoids reading chatModelState.engineModelMemory
+	// which would cause UpdatedAtError in Svelte 5 $effect tracking
+	chatModelState.engineModelMemory = { [engine]: model };
+	chatModelState.claudeAccountId = claudeAccountId ?? null;
+}

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

@@ -0,0 +1,59 @@
+import type { AlertOptions, ConfirmOptions, DialogState } from '$shared/types/stores/dialog';
+
+const dialogState = $state<DialogState>({
+	alert: {
+		isOpen: false,
+		options: {
+			message: ''
+		}
+	},
+	confirm: {
+		isOpen: false,
+		options: {
+			message: ''
+		}
+	}
+});
+
+export const showAlert = (options: AlertOptions): Promise<void> => {
+	return new Promise((resolve) => {
+		dialogState.alert = {
+			isOpen: true,
+			options,
+			resolve
+		};
+	});
+};
+
+export const showConfirm = (options: ConfirmOptions): Promise<boolean> => {
+	return new Promise((resolve) => {
+		dialogState.confirm = {
+			isOpen: true,
+			options,
+			resolve
+		};
+	});
+};
+
+export const closeAlert = () => {
+	if (dialogState.alert.resolve) {
+		dialogState.alert.resolve();
+	}
+	dialogState.alert.isOpen = false;
+};
+
+export const closeConfirm = (confirmed: boolean) => {
+	if (dialogState.confirm.resolve) {
+		dialogState.confirm.resolve(confirmed);
+	}
+	dialogState.confirm.isOpen = false;
+};
+
+export const dialogStore = {
+	get alert() {
+		return dialogState.alert;
+	},
+	get confirm() {
+		return dialogState.confirm;
+	}
+};

package/frontend/lib/stores/ui/edit-mode.svelte.ts

@@ -0,0 +1,214 @@
+/**
+ * Edit Mode State Store
+ * Manages message editing state with collaborative sync
+ * Server is single source of truth - no client storage
+ */
+
+import ws from '$frontend/lib/utils/ws';
+import { userStore } from '$frontend/lib/stores/features/user.svelte';
+import { sessionState } from '$frontend/lib/stores/core/sessions.svelte';
+import { debug } from '$shared/utils/logger';
+
+export interface EditAttachment {
+	type: 'image' | 'document';
+	data: string; // base64
+	mediaType: string;
+	fileName: string;
+}
+
+interface EditModeState {
+	isEditing: boolean;
+	messageId: string | null;
+	messageText: string;
+	messageTimestamp: string | null;
+	attachments: EditAttachment[];
+	parentMessageId: string | null;
+}
+
+// Create reactive state
+const state = $state<EditModeState>({
+	isEditing: false,
+	messageId: null,
+	messageText: '',
+	messageTimestamp: null,
+	attachments: [],
+	parentMessageId: null
+});
+
+// ============================================================================
+// BROADCAST
+// ============================================================================
+
+function broadcastEditMode(isEditing: boolean, messageId: string | null, messageTimestamp: string | null) {
+	const currentUserId = userStore.currentUser?.id;
+	const chatSessionId = sessionState.currentSession?.id;
+	if (!currentUserId || !chatSessionId) return;
+
+	ws.emit('chat:edit-mode', {
+		senderId: currentUserId,
+		chatSessionId,
+		isEditing,
+		messageId,
+		messageTimestamp
+	});
+}
+
+// ============================================================================
+// PUBLIC API
+// ============================================================================
+
+/**
+ * Enter edit mode for a message
+ */
+export function startEdit(
+	messageId: string,
+	messageText: string,
+	messageTimestamp: string,
+	attachments: EditAttachment[] = [],
+	parentMessageId: string | null = null
+) {
+	state.isEditing = true;
+	state.messageId = messageId;
+	state.messageText = messageText;
+	state.messageTimestamp = messageTimestamp;
+	state.attachments = attachments;
+	state.parentMessageId = parentMessageId;
+
+	broadcastEditMode(true, messageId, messageTimestamp);
+}
+
+/**
+ * Cancel edit mode
+ */
+export function cancelEdit() {
+	state.isEditing = false;
+	state.messageId = null;
+	state.messageText = '';
+	state.messageTimestamp = null;
+	state.attachments = [];
+	state.parentMessageId = null;
+
+	broadcastEditMode(false, null, null);
+}
+
+/**
+ * Check if a message is after the edit point
+ */
+export function isMessageAfterEditPoint(messageTimestamp: string): boolean {
+	if (!state.isEditing || !state.messageTimestamp) {
+		return false;
+	}
+	return messageTimestamp > state.messageTimestamp;
+}
+
+/**
+ * Check if a message is the one being edited
+ */
+export function isMessageBeingEdited(messageId: string | undefined): boolean {
+	if (!state.isEditing || !state.messageId || !messageId) {
+		return false;
+	}
+	return messageId === state.messageId;
+}
+
+/**
+ * Check if a message should be dimmed (not the one being edited)
+ */
+export function shouldDimMessage(messageId: string | undefined): boolean {
+	if (!state.isEditing) {
+		return false;
+	}
+	return !isMessageBeingEdited(messageId);
+}
+
+// ============================================================================
+// SERVER STATE MANAGEMENT
+// ============================================================================
+
+/**
+ * Clear state without broadcasting (for project switching)
+ */
+function clearStateQuietly() {
+	state.isEditing = false;
+	state.messageId = null;
+	state.messageText = '';
+	state.messageTimestamp = null;
+	state.attachments = [];
+	state.parentMessageId = null;
+}
+
+/**
+ * Fetch edit mode state from server for the current project.
+ * Server is the single source of truth.
+ */
+export async function restoreEditMode() {
+	try {
+		const chatSessionId = sessionState.currentSession?.id || '';
+		const serverState = await ws.http('chat:get-edit-mode', { chatSessionId });
+		if (serverState && serverState.isEditing && serverState.messageId) {
+			state.isEditing = true;
+			state.messageId = serverState.messageId;
+			state.messageText = '';
+			state.messageTimestamp = serverState.messageTimestamp;
+			state.attachments = [];
+			state.parentMessageId = null;
+		} else {
+			clearStateQuietly();
+		}
+	} catch {
+		clearStateQuietly();
+	}
+}
+
+/**
+ * Called when switching away from a project.
+ * Clears in-memory state without broadcasting (server retains per-project state).
+ */
+export function onProjectLeave() {
+	clearStateQuietly();
+}
+
+/**
+ * Called when entering a new project.
+ * Fetches edit mode state from server for the new project.
+ * MUST be called AFTER ws.setProject() has completed.
+ */
+export async function onProjectEnter() {
+	await restoreEditMode();
+}
+
+// ============================================================================
+// COLLABORATIVE LISTENER
+// ============================================================================
+
+/**
+ * Setup WebSocket listener for edit mode events from other users.
+ * Call once during app initialization.
+ */
+export function setupEditModeListener() {
+	ws.on('chat:edit-mode', (data: {
+		senderId: string;
+		isEditing: boolean;
+		messageId: string | null;
+		messageTimestamp: string | null;
+	}) => {
+		const currentUserId = userStore.currentUser?.id;
+		if (!currentUserId || data.senderId === currentUserId) return;
+
+		if (data.isEditing && data.messageId) {
+			debug.log('chat', `User ${data.senderId} started editing message ${data.messageId}`);
+			state.isEditing = true;
+			state.messageId = data.messageId;
+			state.messageText = '';
+			state.messageTimestamp = data.messageTimestamp;
+			state.attachments = [];
+			state.parentMessageId = null;
+		} else {
+			debug.log('chat', `User ${data.senderId} cancelled edit mode`);
+			clearStateQuietly();
+		}
+	});
+}
+
+// Export reactive state
+export const editModeState = state;