@myrialabs/clopen 0.0.1

package/frontend/lib/utils/git-status.ts

@@ -0,0 +1,68 @@
+/**
+ * Shared git status utilities for label and color mapping.
+ * Used by FileChangeItem, DiffViewer, and GitPanel tab bar.
+ *
+ * Status codes (from git status --porcelain=v1):
+ *   M = Modified, A = Added, D = Deleted, R = Renamed,
+ *   C = Copied, U = Unmerged, ? = Untracked, T = Type changed
+ */
+
+/** Maps a raw git status code to a single-letter display label */
+export function getGitStatusLabel(status: string): string {
+	switch (status) {
+		case '?': return 'U';
+		case 'A': return 'A';
+		case 'D': return 'D';
+		case 'M': return 'M';
+		case 'R': return 'R';
+		case 'C': return 'C';
+		case 'U': return 'U';
+		case 'T': return 'T';
+		default: return status || '';
+	}
+}
+
+/** Maps a raw git status code to a Tailwind text color class */
+export function getGitStatusColor(status: string): string {
+	switch (status) {
+		case '?': return 'text-emerald-500';
+		case 'A': return 'text-emerald-500';
+		case 'D': return 'text-red-500';
+		case 'M': return 'text-amber-500';
+		case 'R': return 'text-blue-500';
+		case 'C': return 'text-teal-500';
+		case 'U': return 'text-orange-500';
+		case 'T': return 'text-violet-500';
+		default: return 'text-slate-500';
+	}
+}
+
+/** Maps a raw git status code to a full-word label (for badges/headers) */
+export function getGitStatusBadgeLabel(status: string): string {
+	switch (status) {
+		case '?': return 'Untracked';
+		case 'A': return 'Added';
+		case 'D': return 'Deleted';
+		case 'M': return 'Modified';
+		case 'R': return 'Renamed';
+		case 'C': return 'Copied';
+		case 'U': return 'Unmerged';
+		case 'T': return 'Type Changed';
+		default: return status || '';
+	}
+}
+
+/** Maps a raw git status code to Tailwind badge bg+text color classes */
+export function getGitStatusBadgeColor(status: string): string {
+	switch (status) {
+		case '?': return 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400';
+		case 'A': return 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400';
+		case 'D': return 'bg-red-500/15 text-red-600 dark:text-red-400';
+		case 'M': return 'bg-amber-500/15 text-amber-600 dark:text-amber-400';
+		case 'R': return 'bg-blue-500/15 text-blue-600 dark:text-blue-400';
+		case 'C': return 'bg-teal-500/15 text-teal-600 dark:text-teal-400';
+		case 'U': return 'bg-orange-500/15 text-orange-600 dark:text-orange-400';
+		case 'T': return 'bg-violet-500/15 text-violet-600 dark:text-violet-400';
+		default: return 'bg-slate-500/15 text-slate-600 dark:text-slate-400';
+	}
+}

package/frontend/lib/utils/platform.ts

@@ -0,0 +1,113 @@
+/**
+ * Cross-platform keyboard shortcut and platform detection utilities
+ */
+
+export type Platform = 'mac' | 'windows' | 'linux' | 'unknown';
+
+/**
+ * Detect the current platform
+ */
+export function detectPlatform(): Platform {
+	if (typeof window === 'undefined') {
+		// Server-side fallback
+		return 'unknown';
+	}
+
+	const userAgent = window.navigator.userAgent.toLowerCase();
+	const platform = window.navigator.platform.toLowerCase();
+
+	if (platform.includes('mac') || userAgent.includes('mac')) {
+		return 'mac';
+	}
+	
+	if (platform.includes('win') || userAgent.includes('win')) {
+		return 'windows';
+	}
+	
+	if (platform.includes('linux') || userAgent.includes('linux')) {
+		return 'linux';
+	}
+
+	return 'unknown';
+}
+
+/**
+ * Check if the given keyboard event matches the cancel command (Ctrl+C or Cmd+C)
+ */
+export function isCancelKeyCombo(event: KeyboardEvent): boolean {
+	const platform = detectPlatform();
+	
+	// Check for 'c' key
+	if (event.key.toLowerCase() !== 'c') {
+		return false;
+	}
+
+	// Mac uses Cmd+C, others use Ctrl+C
+	if (platform === 'mac') {
+		return event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey;
+	} else {
+		return event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
+	}
+}
+
+/**
+ * Check if the given keyboard event matches the clear command (Ctrl+L or Cmd+L)
+ */
+export function isClearKeyCombo(event: KeyboardEvent): boolean {
+	const platform = detectPlatform();
+	
+	// Check for 'l' key
+	if (event.key.toLowerCase() !== 'l') {
+		return false;
+	}
+
+	// Mac uses Cmd+L, others use Ctrl+L
+	if (platform === 'mac') {
+		return event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey;
+	} else {
+		return event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
+	}
+}
+
+/**
+ * Get the display name for keyboard shortcuts based on platform
+ */
+export function getShortcutLabels() {
+	const platform = detectPlatform();
+	const modifier = platform === 'mac' ? '⌘' : 'Ctrl';
+	
+	return {
+		cancel: `${modifier}+C`,
+		clear: `${modifier}+L`,
+		modifier: modifier
+	};
+}
+
+/**
+ * Get platform-specific modifier key display
+ */
+export function getModifierKey(): string {
+	const platform = detectPlatform();
+	return platform === 'mac' ? '⌘' : 'Ctrl';
+}
+
+/**
+ * Check if we're on macOS
+ */
+export function isMac(): boolean {
+	return detectPlatform() === 'mac';
+}
+
+/**
+ * Check if we're on Windows
+ */
+export function isWindows(): boolean {
+	return detectPlatform() === 'windows';
+}
+
+/**
+ * Check if we're on Linux
+ */
+export function isLinux(): boolean {
+	return detectPlatform() === 'linux';
+}

package/frontend/lib/utils/port-check.ts

@@ -0,0 +1,65 @@
+import { createServer } from 'http';
+
+import { debug } from '$shared/utils/logger';
+/**
+ * Check if a specific port is available
+ */
+export function checkPortAvailability(port: number): Promise<boolean> {
+	return new Promise((resolve) => {
+		const server = createServer();
+		
+		server.listen(port, () => {
+			server.close(() => {
+				resolve(true); // Port is available
+			});
+		});
+		
+		server.on('error', (err: NodeJS.ErrnoException) => {
+			if (err.code === 'EADDRINUSE') {
+				resolve(false); // Port is in use
+			} else {
+				resolve(false); // Other error, consider as unavailable
+			}
+		});
+	});
+}
+
+/**
+ * Strictly check if port 5678 is available and fail if not
+ */
+export async function ensurePort5678Available(): Promise<void> {
+	const isAvailable = await checkPortAvailability(5678);
+	
+	if (!isAvailable) {
+		debug.error('server', '❌ FATAL ERROR: Port 5678 is required but not available!');
+		debug.error('server', '❌ Please stop any service using port 5678 and try again.');
+		debug.error('server', '❌ This application strictly requires port 5678 to be available.');
+		debug.error('server', '❌ Use the following command to find what is using port 5678:');
+		debug.error('server', '❌   Windows: netstat -ano | findstr :5678');
+		debug.error('server', '❌   Linux/Mac: lsof -i :5678');
+		process.exit(1);
+	}
+	
+	debug.log('server', '✅ Port 5678 is available');
+}
+
+/**
+ * Get process info using a specific port (Windows only)
+ */
+export async function getPortProcessInfo(port: number): Promise<void> {
+	try {
+		const proc = Bun.spawn(['netstat', '-ano'], {
+			stdout: 'pipe',
+			stderr: 'ignore'
+		});
+		const output = await new Response(proc.stdout).text();
+		const filteredOutput = output.split('\n').filter((line: string) => line.includes(`:${port}`)).join('\n');
+		
+		if (filteredOutput.trim()) {
+			debug.error('server', `❌ Port ${port} is being used by:`);
+			debug.error('server', filteredOutput);
+		}
+	} catch (error) {
+		debug.error('server', '❌ Could not check port usage:', error instanceof Error ? error.message : 'Unknown error');
+	}
+}

package/frontend/lib/utils/terminalFormatter.ts

@@ -0,0 +1,207 @@
+// Terminal output detection and ANSI code processing utilities
+
+export interface TerminalSegment {
+	type: 'terminal' | 'text';
+	content: string;
+}
+
+// Check if content looks like terminal output
+export function isTerminalOutput(text: string): boolean {
+	// Exclude git diff output - should not be treated as terminal
+	if (/^diff --git /m.test(text) || /^@@\s+-\d+.*\+\d+.*@@/m.test(text)) {
+		return false;
+	}
+
+	// Strong indicators - any of these alone means it's terminal output
+
+	// 1. ANSI escape codes - definitive terminal indicator
+	if (/\u001b\[[\d;]*m/.test(text)) {
+		return true;
+	}
+
+	// 2. Shell prompt at the beginning of a line
+	if (/^[\s]*[$>#%]\s+/m.test(text)) {
+		return true;
+	}
+
+	// 3. Command execution pattern ($ command or > command)
+	if (/^[\s]*[$>]\s+\S+/m.test(text)) {
+		return true;
+	}
+
+	// Weak indicators - need multiple to be considered terminal
+	let weakIndicators = 0;
+
+	// Terminal-specific formatting
+	if (/^[\s]*[│├└─┬┴┤┌┐]+/m.test(text)) weakIndicators++; // Box drawing
+	if (/^\s*\d+\s*│/m.test(text)) weakIndicators++; // Line numbers with pipe
+	if (/^[\s]*\[[\d:]+\]/m.test(text)) weakIndicators++; // [timestamp] format
+	if (/^[\s]*(?:✓|✔|✗|✖|⚠|➜|→|▶|•)\s+/m.test(text)) weakIndicators++; // Terminal symbols at line start
+
+	// Terminal-specific output patterns
+	if (/^(?:error|ERROR|warn|WARN|info|INFO|debug|DEBUG):/m.test(text)) weakIndicators++;
+	if (/^\s*at\s+\S+\s+\([^)]+:\d+:\d+\)/m.test(text)) weakIndicators++; // Stack traces
+	if (/^[\s]*\+\s+\d+ms/m.test(text)) weakIndicators++; // Timing info
+
+	// Need at least 3 weak indicators for terminal detection
+	// This prevents normal text about packages from being detected as terminal
+	return weakIndicators >= 3;
+}
+
+// ANSI color mappings to CSS classes with improved visibility for both modes
+const ansiToClass: Record<string, string> = {
+	'0': '', // reset
+	'1': 'font-bold', // bold
+	'2': 'opacity-60', // dim
+	'3': 'italic', // italic
+	'4': 'underline', // underline
+	'22': '', // normal intensity
+	'23': '', // not italic
+	'30': 'text-slate-800 dark:text-slate-200', // black - improved contrast
+	'31': 'text-red-600 dark:text-red-400', // red
+	'32': 'text-green-600 dark:text-green-400', // green
+	'33': 'text-yellow-700 dark:text-yellow-300', // yellow - better visibility
+	'34': 'text-blue-600 dark:text-blue-400', // blue
+	'35': 'text-purple-600 dark:text-purple-400', // magenta
+	'36': 'text-cyan-600 dark:text-cyan-400', // cyan
+	'37': 'text-slate-600 dark:text-slate-200', // white - improved contrast
+	'90': 'text-slate-500 dark:text-slate-500', // bright black (gray)
+	'91': 'text-red-500 dark:text-red-300', // bright red
+	'92': 'text-green-500 dark:text-green-300', // bright green
+	'93': 'text-yellow-600 dark:text-yellow-200', // bright yellow
+	'94': 'text-blue-500 dark:text-blue-300', // bright blue
+	'95': 'text-purple-500 dark:text-purple-300', // bright magenta
+	'96': 'text-cyan-500 dark:text-cyan-300', // bright cyan
+	'97': 'text-slate-900 dark:text-slate-100', // bright white
+	'39': 'text-slate-900 dark:text-slate-100' // default foreground
+};
+
+// Process ANSI escape codes in terminal output
+export function processAnsiCodes(text: string): string {
+	const ansiRegex = /\u001b\[([0-9;]*)m/g;
+	// Escape HTML first to prevent content (e.g. HTML tags in diffs) from being
+	// rendered as actual DOM elements when using {@html}
+	let processedText = escapeHtml(text);
+	let currentStyles: string[] = [];
+
+	// Replace ANSI codes with HTML spans (ANSI escape char \u001b is not affected by escapeHtml)
+	processedText = processedText.replace(ansiRegex, (match, codes) => {
+		const codeArray = codes.split(';');
+
+		for (const code of codeArray) {
+			if (code === '0' || code === '') {
+				// Reset all styles
+				currentStyles = [];
+				return '</span>';
+			} else if (ansiToClass[code]) {
+				const cssClass = ansiToClass[code];
+				if (cssClass) {
+					// Remove conflicting styles and add new one
+					if (code.startsWith('3') || code === '39' || code === '90') {
+						// Color codes - remove existing colors
+						currentStyles = currentStyles.filter(s => !s.includes('text-'));
+					}
+					if (!currentStyles.includes(cssClass)) {
+						currentStyles.push(cssClass);
+					}
+				}
+			}
+		}
+
+		return `<span class="${currentStyles.join(' ')}">`;
+	});
+
+	// Clean up any unclosed spans
+	const openSpans = (processedText.match(/<span/g) || []).length;
+	const closeSpans = (processedText.match(/<\/span>/g) || []).length;
+	if (openSpans > closeSpans) {
+		processedText += '</span>'.repeat(openSpans - closeSpans);
+	}
+
+	return processedText;
+}
+
+// Split content into segments (terminal vs regular text)
+export function splitContentIntoSegments(text: string): TerminalSegment[] {
+	const segments: TerminalSegment[] = [];
+
+	// First check if the entire text has ANSI codes - if so, it's all terminal
+	if (/\u001b\[[\d;]*m/.test(text)) {
+		return [{ type: 'terminal', content: text }];
+	}
+
+	// For text without ANSI codes, we need to be more careful
+	// Split by code blocks first to preserve them
+	const codeBlockRegex = /```[\s\S]*?```/g;
+	const codeBlocks: {start: number, end: number, content: string}[] = [];
+	let match;
+
+	// Find all code blocks
+	while ((match = codeBlockRegex.exec(text)) !== null) {
+		codeBlocks.push({
+			start: match.index,
+			end: match.index + match[0].length,
+			content: match[0]
+		});
+	}
+
+	// Process text in chunks, avoiding code blocks
+	let lastIndex = 0;
+	for (let i = 0; i <= codeBlocks.length; i++) {
+		const startIndex = lastIndex;
+		const endIndex = i < codeBlocks.length ? codeBlocks[i].start : text.length;
+
+		if (startIndex < endIndex) {
+			const chunk = text.slice(startIndex, endIndex);
+
+			// Split chunk by double newlines
+			const blocks = chunk.split(/\n\n+/);
+
+			for (const block of blocks) {
+				if (!block.trim()) continue;
+
+				const blockType = isTerminalOutput(block) ? 'terminal' : 'text';
+
+				// Merge with previous segment if same type
+				if (segments.length > 0 && segments[segments.length - 1].type === blockType) {
+					segments[segments.length - 1].content += '\n\n' + block;
+				} else {
+					segments.push({ type: blockType, content: block });
+				}
+			}
+		}
+
+		// Add code block as text (not terminal)
+		if (i < codeBlocks.length) {
+			if (segments.length > 0 && segments[segments.length - 1].type === 'text') {
+				segments[segments.length - 1].content += '\n\n' + codeBlocks[i].content;
+			} else {
+				segments.push({ type: 'text', content: codeBlocks[i].content });
+			}
+			lastIndex = codeBlocks[i].end;
+		}
+	}
+
+	// If no segments, treat as text
+	if (segments.length === 0 && text.trim()) {
+		segments.push({ type: 'text', content: text });
+	}
+
+	return segments;
+}
+
+// Format terminal output with proper styling
+export function formatTerminalOutput(text: string): string {
+	const processedAnsi = processAnsiCodes(text);
+	return `<div class="font-mono text-sm whitespace-pre-wrap terminal-output bg-slate-100 dark:bg-slate-900 text-slate-900 dark:text-slate-100 p-4 rounded-lg overflow-x-auto border border-slate-300 dark:border-slate-700">${processedAnsi}</div>`;
+}
+
+// Escape HTML entities for security
+export function escapeHtml(text: string): string {
+	return text
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;');
+}

package/frontend/lib/utils/theme.ts

@@ -0,0 +1,6 @@
+/**
+ * Theme Utils Module
+ * Re-exports theme functions from the store for convenience
+ */
+
+export { initializeTheme, setTheme, toggleDarkMode, isDarkMode, currentTheme } from '$frontend/lib/stores/ui/theme.svelte';