@myrialabs/clopen 0.0.1

package/shared/types/ui/components.ts

@@ -0,0 +1,61 @@
+/**
+ * Component prop types and interfaces
+ */
+
+export interface ButtonProps {
+	variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+	size?: 'sm' | 'md' | 'lg';
+	disabled?: boolean;
+	loading?: boolean;
+	type?: 'button' | 'submit' | 'reset';
+	onclick?: () => void;
+}
+
+export interface InputProps {
+	value?: string;
+	placeholder?: string;
+	type?: 'text' | 'password' | 'email' | 'number' | 'search';
+	disabled?: boolean;
+	error?: string;
+	label?: string;
+	required?: boolean;
+	onchange?: (value: string) => void;
+}
+
+export interface TextareaProps {
+	value?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	error?: string;
+	label?: string;
+	required?: boolean;
+	rows?: number;
+	resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+	onchange?: (value: string) => void;
+}
+
+export interface SelectOption {
+	value: string;
+	label: string;
+	disabled?: boolean;
+}
+
+export interface SelectProps {
+	value?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	error?: string;
+	label?: string;
+	required?: boolean;
+	options: SelectOption[];
+	onchange?: (value: string) => void;
+}
+
+export interface CardProps {
+	title?: string;
+	subtitle?: string;
+	variant?: 'default' | 'outlined' | 'elevated' | 'glass';
+	padding?: 'none' | 'sm' | 'md' | 'lg';
+	clickable?: boolean;
+	onclick?: () => void;
+}

package/shared/types/ui/icons.ts

@@ -0,0 +1,23 @@
+/**
+ * Icon system types
+ */
+
+// Icon types for type safety
+import type { lucideIconRegistry } from '$frontend/lib/components/common/lucide-icons';
+import type { materialIconRegistry } from '$frontend/lib/components/common/material-icons';
+
+// Individual icon type exports from auto-generated files
+export type { LucideIconName } from '$frontend/lib/components/common/lucide-icons';
+export type { MaterialIconName } from '$frontend/lib/components/common/material-icons';
+
+// Combined icon registry type
+const iconRegistry = {
+	// ALL LUCIDE ICONS
+	...({} as typeof lucideIconRegistry),
+
+	// ALL MATERIAL ICON THEME ICONS  
+	...({} as typeof materialIconRegistry),
+} as const;
+
+// Type for all supported icons
+export type IconName = keyof typeof iconRegistry;

package/shared/types/ui/index.ts

@@ -0,0 +1,22 @@
+/**
+ * UI types barrel export
+ */
+
+export * from './theme';
+export * from './notifications';
+export * from './icons';
+export * from './components';
+
+// Common UI types moved from common/ui.ts
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+
+export interface ButtonAction {
+	label: string;
+	action: () => void;
+}
+
+export interface BaseDialogOptions {
+	title?: string;
+	message: string;
+	type?: NotificationType;
+}

package/shared/types/ui/notifications.ts

@@ -0,0 +1,14 @@
+/**
+ * Notification and toast types
+ */
+
+import type { NotificationType, ButtonAction } from './index';
+
+export interface ToastNotification {
+	id: string;
+	type: NotificationType;
+	title: string;
+	message: string;
+	duration?: number;
+	actions?: ButtonAction[];
+}

package/shared/types/ui/theme.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme and theming types
+ */
+
+export interface Theme {
+	name: string;
+	primary: string;
+	secondary: string;
+	background: string;
+	text: string;
+	mode: 'light' | 'dark';
+}

package/shared/types/websocket/index.ts

@@ -0,0 +1,43 @@
+/**
+ * WebSocket Type Definitions
+ *
+ * Shared types for WebSocket communication between backend and frontend
+ */
+
+/**
+ * WebSocket message format
+ */
+export interface WSMessage<T = any> {
+	action: string;
+	payload: T;
+}
+
+/**
+ * WebSocket client options
+ */
+export interface WSClientOptions {
+	/** Auto-reconnect on connection loss */
+	autoReconnect?: boolean;
+	/** Maximum reconnection attempts (0 = infinite) */
+	maxReconnectAttempts?: number;
+	/** Initial reconnect delay in ms */
+	reconnectDelay?: number;
+	/** Maximum reconnect delay in ms */
+	maxReconnectDelay?: number;
+	/** Debug logging */
+	debug?: boolean;
+}
+
+/**
+ * WebSocket connection state
+ */
+export type WSConnectionState = 'connecting' | 'connected' | 'disconnected' | 'reconnecting';
+
+/**
+ * WebSocket error types
+ */
+export interface WSError {
+	type: 'connection' | 'validation' | 'timeout' | 'unknown';
+	message: string;
+	details?: any;
+}

package/shared/types/window.d.ts

@@ -0,0 +1,13 @@
+// Global window extensions for cursor tracking
+declare global {
+  interface Window {
+    __cursorInfo?: {
+      cursor: string;
+      x: number;
+      y: number;
+      timestamp: number;
+    };
+  }
+}
+
+export {};

package/shared/utils/anonymous-user.ts

@@ -0,0 +1,168 @@
+import { debug } from '$shared/utils/logger';
+
+/**
+ * Anonymous User Management
+ * Client-side utilities for managing anonymous user identities
+ * Server-side generation via WebSocket user:anonymous
+ */
+
+// Dynamic import to avoid circular dependency and SSR issues
+let wsClient: any = null;
+async function getWS() {
+	if (!wsClient && typeof window !== 'undefined') {
+		const module = await import('$frontend/lib/utils/ws');
+		wsClient = module.default;
+	}
+	return wsClient;
+}
+
+export interface AnonymousUser {
+  id: string;
+  name: string;
+  color: string;
+  avatar: string;
+  createdAt: string;
+}
+
+/**
+ * Generate a unique anonymous user identity via WebSocket
+ */
+async function generateAnonymousUserFromServer(): Promise<AnonymousUser | null> {
+  try {
+    const ws = await getWS();
+    if (!ws) {
+      debug.error('user', 'WebSocket client not available');
+      return null;
+    }
+
+    const response = await ws.http('user:anonymous', {});
+
+    debug.log('user', '✅ Generated anonymous user from server:', response.name);
+    return response;
+  } catch (error) {
+    debug.error('user', 'Error calling anonymous user API:', error);
+    return null;
+  }
+}
+
+/**
+ * Get or create anonymous user from localStorage
+ * If not found, generates new user via server API
+ */
+export async function getOrCreateAnonymousUser(): Promise<AnonymousUser | null> {
+  // Check if we're in browser environment
+  if (typeof window === 'undefined') {
+    debug.warn('user', 'Cannot create anonymous user on server side');
+    return null;
+  }
+
+  const stored = localStorage.getItem('claude-anonymous-user');
+
+  if (stored) {
+    try {
+      const user = JSON.parse(stored);
+      // Validate the stored user has all required fields
+      if (user.id && user.name && user.color && user.avatar) {
+        debug.log('user', 'Found existing anonymous user:', user.name);
+        return user;
+      }
+    } catch (e) {
+      debug.error('user', 'Invalid stored anonymous user:', e);
+    }
+  }
+
+  // Generate new user via server API
+  debug.log('user', 'No valid stored user, generating new one from server...');
+  const newUser = await generateAnonymousUserFromServer();
+
+  if (newUser) {
+    localStorage.setItem('claude-anonymous-user', JSON.stringify(newUser));
+    return newUser;
+  }
+
+  debug.error('user', 'Failed to generate anonymous user');
+  return null;
+}
+
+/**
+ * Get current anonymous user from localStorage
+ */
+export function getCurrentAnonymousUser(): AnonymousUser | null {
+  // Check if we're in browser environment
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const stored = localStorage.getItem('claude-anonymous-user');
+
+  if (stored) {
+    try {
+      return JSON.parse(stored);
+    } catch (e) {
+      debug.error('user', 'Failed to parse anonymous user:', e);
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Update anonymous user name
+ * Updates via WebSocket
+ */
+export async function updateAnonymousUserName(newName: string): Promise<AnonymousUser | null> {
+  // Check if we're in browser environment
+  if (typeof window === 'undefined') {
+    debug.error('user', 'Cannot update user name on server side');
+    return null;
+  }
+
+  const currentUser = getCurrentAnonymousUser();
+
+  if (!currentUser) {
+    debug.error('user', 'No current anonymous user found');
+    return null;
+  }
+
+  // Validate name (basic validation)
+  if (!newName || newName.trim().length === 0) {
+    debug.error('user', 'Invalid name provided');
+    return null;
+  }
+
+  const trimmedName = newName.trim();
+
+  // Call server via WebSocket to get updated user
+  try {
+    const ws = await getWS();
+    if (!ws) {
+      debug.error('user', 'WebSocket client not available');
+      return null;
+    }
+
+    const response = await ws.http('user:update', {
+      userId: currentUser.id,
+      newName: trimmedName
+    });
+
+    // Save to localStorage
+    localStorage.setItem('claude-anonymous-user', JSON.stringify(response));
+    debug.log('user', '✅ Updated user name:', response.name);
+    return response;
+  } catch (error) {
+    debug.error('user', 'Error calling update user API:', error);
+    return null;
+  }
+}
+
+/**
+ * Format user display name (shorter version for UI)
+ */
+export function formatUserDisplayName(user: AnonymousUser): string {
+  // Extract just the animal and number for shorter display
+  const parts = user.name.split(' ');
+  if (parts.length >= 3) {
+    return `${parts[1]} ${parts[2]}`;
+  }
+  return user.name;
+}

package/shared/utils/async.ts

@@ -0,0 +1,10 @@
+/**
+ * Async utility functions
+ */
+
+/**
+ * Sleep/delay for a specified number of milliseconds
+ */
+export function sleep(ms: number): Promise<void> {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}

package/shared/utils/diff-calculator.ts

@@ -0,0 +1,184 @@
+/**
+ * Diff Calculator Utility
+ * Calculates git-like line-level differences between file contents
+ * Accepts Buffer for binary-safe handling — converts to string internally for line diffing.
+ */
+
+export interface FileChangeStats {
+	filesChanged: number;
+	insertions: number;
+	deletions: number;
+}
+
+export interface FileDiff {
+	filepath: string;
+	insertions: number;
+	deletions: number;
+	status: 'added' | 'modified' | 'deleted';
+}
+
+/**
+ * Calculate line-level diff statistics similar to git
+ * Compares two file snapshots and returns stats about changes
+ */
+export function calculateFileChangeStats(
+	previousSnapshot: Record<string, Buffer>,
+	currentSnapshot: Record<string, Buffer>
+): FileChangeStats {
+	let totalInsertions = 0;
+	let totalDeletions = 0;
+	const changedFiles = new Set<string>();
+
+	// Check added and modified files
+	for (const [filepath, newContent] of Object.entries(currentSnapshot)) {
+		const oldContent = previousSnapshot[filepath];
+
+		if (!oldContent) {
+			// File was added - count all lines as insertions
+			const lines = countLines(newContent.toString('utf-8'));
+			totalInsertions += lines;
+			changedFiles.add(filepath);
+		} else if (!oldContent.equals(newContent)) {
+			// File was modified - calculate line diff
+			const diff = calculateLineDiff(oldContent.toString('utf-8'), newContent.toString('utf-8'));
+			totalInsertions += diff.insertions;
+			totalDeletions += diff.deletions;
+			changedFiles.add(filepath);
+		}
+	}
+
+	// Check deleted files
+	for (const [filepath, oldContent] of Object.entries(previousSnapshot)) {
+		if (!currentSnapshot[filepath]) {
+			// File was deleted - count all lines as deletions
+			const lines = countLines(oldContent.toString('utf-8'));
+			totalDeletions += lines;
+			changedFiles.add(filepath);
+		}
+	}
+
+	return {
+		filesChanged: changedFiles.size,
+		insertions: totalInsertions,
+		deletions: totalDeletions
+	};
+}
+
+/**
+ * Get detailed diff for each file
+ * Useful for displaying individual file changes
+ */
+export function getDetailedFileDiffs(
+	previousSnapshot: Record<string, Buffer>,
+	currentSnapshot: Record<string, Buffer>
+): FileDiff[] {
+	const diffs: FileDiff[] = [];
+
+	// Check added and modified files
+	for (const [filepath, newContent] of Object.entries(currentSnapshot)) {
+		const oldContent = previousSnapshot[filepath];
+
+		if (!oldContent) {
+			// File was added
+			diffs.push({
+				filepath,
+				insertions: countLines(newContent.toString('utf-8')),
+				deletions: 0,
+				status: 'added'
+			});
+		} else if (!oldContent.equals(newContent)) {
+			// File was modified
+			const diff = calculateLineDiff(oldContent.toString('utf-8'), newContent.toString('utf-8'));
+			diffs.push({
+				filepath,
+				insertions: diff.insertions,
+				deletions: diff.deletions,
+				status: 'modified'
+			});
+		}
+	}
+
+	// Check deleted files
+	for (const [filepath, oldContent] of Object.entries(previousSnapshot)) {
+		if (!currentSnapshot[filepath]) {
+			// File was deleted
+			diffs.push({
+				filepath,
+				insertions: 0,
+				deletions: countLines(oldContent.toString('utf-8')),
+				status: 'deleted'
+			});
+		}
+	}
+
+	return diffs;
+}
+
+/**
+ * Calculate line-level diff between two file contents
+ * Uses simple line-by-line comparison (similar to diff -u)
+ */
+function calculateLineDiff(
+	oldContent: string,
+	newContent: string
+): { insertions: number; deletions: number } {
+	const oldLines = splitLines(oldContent);
+	const newLines = splitLines(newContent);
+
+	// Use Myers diff algorithm (simplified version)
+	// For performance, we use a simple LCS-based approach
+	const lcs = longestCommonSubsequence(oldLines, newLines);
+
+	const insertions = newLines.length - lcs;
+	const deletions = oldLines.length - lcs;
+
+	return { insertions, deletions };
+}
+
+/**
+ * Calculate Longest Common Subsequence length
+ * Used to determine how many lines are unchanged
+ */
+function longestCommonSubsequence(arr1: string[], arr2: string[]): number {
+	const m = arr1.length;
+	const n = arr2.length;
+
+	// Create DP table
+	const dp: number[][] = Array(m + 1).fill(0).map(() => Array(n + 1).fill(0));
+
+	// Fill DP table
+	for (let i = 1; i <= m; i++) {
+		for (let j = 1; j <= n; j++) {
+			if (arr1[i - 1] === arr2[j - 1]) {
+				dp[i][j] = dp[i - 1][j - 1] + 1;
+			} else {
+				dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+			}
+		}
+	}
+
+	return dp[m][n];
+}
+
+/**
+ * Split content into lines
+ * Handles different line endings (CRLF, LF)
+ */
+function splitLines(content: string): string[] {
+	if (!content) return [];
+	// Normalize line endings and split
+	return content.replace(/\r\n/g, '\n').split('\n');
+}
+
+/**
+ * Count number of lines in content
+ */
+function countLines(content: string): number {
+	if (!content) return 0;
+	const lines = splitLines(content);
+	// Don't count empty last line
+	if (lines.length > 0 && lines[lines.length - 1] === '') {
+		return lines.length - 1;
+	}
+	return lines.length;
+}