@myrialabs/clopen 0.0.1

package/frontend/lib/utils/tree-visualizer.ts

@@ -0,0 +1,320 @@
+/**
+ * Helper utilities for visualizing tree hierarchy structure
+ * Used for debugging and analyzing checkpoint/message tree structure
+ */
+
+import type { DatabaseMessage } from '$shared/types/database/schema';
+import { debug } from '$shared/utils/logger';
+
+export interface TreeNode {
+	id: string;
+	messageText: string;
+	timestamp: string;
+	branchId: string | null;
+	parentId: string | null;
+	children: TreeNode[];
+	level: number; // Tree level (0 = main, 1 = branch from main, 2 = branch from branch, etc.)
+}
+
+/**
+ * Build tree structure from messages
+ */
+export function buildTreeFromMessages(messages: DatabaseMessage[]): TreeNode[] {
+	const nodeMap = new Map<string, TreeNode>();
+	const roots: TreeNode[] = [];
+
+	// Create nodes
+	messages.forEach(msg => {
+		const sdkMessage = JSON.parse(msg.sdk_message);
+
+		// Only process user messages (checkpoints)
+		if (sdkMessage.type !== 'user') return;
+
+		const messageText = extractMessageText(sdkMessage);
+		if (!messageText.trim()) return;
+
+		nodeMap.set(msg.id, {
+			id: msg.id,
+			messageText: messageText.trim().slice(0, 50),
+			timestamp: msg.timestamp,
+			branchId: msg.branch_id || null,
+			parentId: msg.parent_message_id || null,
+			children: [],
+			level: 0
+		});
+	});
+
+	// Build tree structure
+	nodeMap.forEach(node => {
+		if (node.parentId && nodeMap.has(node.parentId)) {
+			const parent = nodeMap.get(node.parentId)!;
+			parent.children.push(node);
+			node.level = parent.level + (node.branchId ? 1 : 0);
+		} else {
+			roots.push(node);
+		}
+	});
+
+	// Sort children by timestamp
+	nodeMap.forEach(node => {
+		node.children.sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+	});
+
+	roots.sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+
+	return roots;
+}
+
+/**
+ * Extract message text from SDK message
+ */
+function extractMessageText(sdkMessage: any): string {
+	if ('message' in sdkMessage && sdkMessage.message?.content) {
+		const content = sdkMessage.message.content;
+		if (typeof content === 'string') {
+			return content;
+		} else if (Array.isArray(content)) {
+			const textBlock = content.find((item: any) => typeof item === 'object' && 'text' in item);
+			if (textBlock && 'text' in textBlock) {
+				return textBlock.text;
+			}
+		}
+	}
+	return '';
+}
+
+/**
+ * Generate ASCII tree visualization
+ */
+export function generateTreeASCII(roots: TreeNode[]): string {
+	const lines: string[] = [];
+
+	function traverse(node: TreeNode, prefix: string = '', isLast: boolean = true) {
+		// Node line
+		const connector = isLast ? '└─' : '├─';
+		const branchTag = node.branchId ? ` [branch:${node.branchId}]` : '';
+		const levelTag = ` (level ${node.level})`;
+		lines.push(`${prefix}${connector} ${node.messageText}${branchTag}${levelTag}`);
+
+		// Children
+		const childPrefix = prefix + (isLast ? '  ' : '│ ');
+		node.children.forEach((child, index) => {
+			const isLastChild = index === node.children.length - 1;
+			traverse(child, childPrefix, isLastChild);
+		});
+	}
+
+	roots.forEach((root, index) => {
+		const isLast = index === roots.length - 1;
+		traverse(root, '', isLast);
+	});
+
+	return lines.join('\n');
+}
+
+/**
+ * Generate compact list format (like your expected structure)
+ */
+export function generateTreeList(roots: TreeNode[]): string {
+	const lines: string[] = [];
+
+	function traverse(node: TreeNode, indent: number = 0) {
+		const indentStr = '  '.repeat(indent);
+		const branchTag = node.branchId ? ` [branch:${node.branchId}]` : '';
+		lines.push(`${indentStr}- ${node.messageText}${branchTag}`);
+
+		node.children.forEach(child => {
+			// Increase indent if child has different branchId (is a branch)
+			const childIndent = child.branchId && child.branchId !== node.branchId
+				? indent + 1
+				: indent;
+			traverse(child, childIndent);
+		});
+	}
+
+	roots.forEach(root => {
+		traverse(root, 0);
+	});
+
+	return lines.join('\n');
+}
+
+/**
+ * Log tree structure with detailed analysis
+ */
+export function logTreeStructure(
+	sessionId: string,
+	messages: DatabaseMessage[],
+	currentHead: string | null,
+	label: string = 'Tree Structure'
+) {
+	debug.log('checkpoint', `${label} - Session: ${sessionId}`);
+	debug.log('checkpoint', `Current HEAD: ${currentHead || 'none'}`);
+	debug.log('checkpoint', `Total messages: ${messages.length}`);
+
+	const roots = buildTreeFromMessages(messages);
+
+	debug.log('checkpoint', 'Tree Structure (ASCII):');
+	debug.log('checkpoint', generateTreeASCII(roots));
+
+	debug.log('checkpoint', '\nTree Structure (List format):');
+	debug.log('checkpoint', generateTreeList(roots));
+
+	// Additional analysis
+	const mainTimelineCount = roots.length;
+	const branchCount = messages.filter(m => m.branch_id && m.branch_id !== '').length;
+	const uniqueBranches = new Set(messages.map(m => m.branch_id).filter(Boolean)).size;
+
+	debug.log('checkpoint', '\nTree Statistics:');
+	debug.log('checkpoint', `- Main timeline nodes: ${mainTimelineCount}`);
+	debug.log('checkpoint', `- Total branch messages: ${branchCount}`);
+	debug.log('checkpoint', `- Unique branches: ${uniqueBranches}`);
+}
+
+/**
+ * Log parent-child relationships
+ */
+export function logParentChildRelationships(messages: DatabaseMessage[]) {
+	debug.log('checkpoint', '\nParent-Child Relationships:');
+
+	messages.forEach(msg => {
+		const sdkMessage = JSON.parse(msg.sdk_message);
+		if (sdkMessage.type !== 'user') return;
+
+		const messageText = extractMessageText(sdkMessage).trim().slice(0, 30);
+		const parentId = msg.parent_message_id || 'none';
+		const branchId = msg.branch_id || 'none';
+
+		debug.log('checkpoint', `${messageText}`);
+		debug.log('checkpoint', `  ID: ${msg.id}`);
+		debug.log('checkpoint', `  Parent: ${parentId}`);
+		debug.log('checkpoint', `  Branch: ${branchId}`);
+		debug.log('checkpoint', `  Timestamp: ${msg.timestamp}`);
+		debug.log('checkpoint', '');
+	});
+
+	debug.log('checkpoint', '-'.repeat(80) + '\n');
+}
+
+/**
+ * Validate tree structure and report issues
+ */
+export function validateTreeStructure(
+	messages: DatabaseMessage[],
+	expectedStructure?: string
+): { valid: boolean; issues: string[] } {
+	const issues: string[] = [];
+	const messageMap = new Map(messages.map(m => [m.id, m]));
+
+	// Check for orphaned nodes (parent_id points to non-existent message)
+	messages.forEach(msg => {
+		if (msg.parent_message_id && !messageMap.has(msg.parent_message_id)) {
+			issues.push(`Message ${msg.id} has non-existent parent ${msg.parent_message_id}`);
+		}
+	});
+
+	// Check for circular references
+	const visited = new Set<string>();
+	const recursionStack = new Set<string>();
+
+	function detectCycle(msgId: string): boolean {
+		if (recursionStack.has(msgId)) {
+			issues.push(`Circular reference detected at message ${msgId}`);
+			return true;
+		}
+		if (visited.has(msgId)) return false;
+
+		visited.add(msgId);
+		recursionStack.add(msgId);
+
+		const msg = messageMap.get(msgId);
+		if (msg && msg.parent_message_id) {
+			detectCycle(msg.parent_message_id);
+		}
+
+		recursionStack.delete(msgId);
+		return false;
+	}
+
+	messages.forEach(msg => {
+		if (!visited.has(msg.id)) {
+			detectCycle(msg.id);
+		}
+	});
+
+	// Compare with expected structure if provided
+	if (expectedStructure) {
+		const roots = buildTreeFromMessages(messages);
+		const actualStructure = generateTreeList(roots);
+
+		// Normalize whitespace for comparison
+		const normalizedExpected = expectedStructure.trim().replace(/\s+/g, ' ');
+		const normalizedActual = actualStructure.trim().replace(/\s+/g, ' ');
+
+		if (normalizedExpected !== normalizedActual) {
+			issues.push('Tree structure does not match expected structure');
+			debug.log('checkpoint', '\nExpected structure:');
+			debug.log('checkpoint', expectedStructure);
+			debug.log('checkpoint', '\nActual structure:');
+			debug.log('checkpoint', actualStructure);
+		}
+	}
+
+	return {
+		valid: issues.length === 0,
+		issues
+	};
+}
+
+/**
+ * Compare two tree states and report differences
+ */
+export function compareTreeStates(
+	beforeMessages: DatabaseMessage[],
+	afterMessages: DatabaseMessage[],
+	operationLabel: string
+) {
+	debug.log('checkpoint', `Tree State Comparison - ${operationLabel}`);
+
+	debug.log('checkpoint', 'BEFORE:');
+	const beforeRoots = buildTreeFromMessages(beforeMessages);
+	debug.log('checkpoint', generateTreeList(beforeRoots));
+
+	debug.log('checkpoint', '\nAFTER:');
+	const afterRoots = buildTreeFromMessages(afterMessages);
+	debug.log('checkpoint', generateTreeList(afterRoots));
+
+	// Analyze changes
+	const beforeIds = new Set(beforeMessages.map(m => m.id));
+	const afterIds = new Set(afterMessages.map(m => m.id));
+
+	const added = afterMessages.filter(m => !beforeIds.has(m.id));
+	const removed = beforeMessages.filter(m => !afterIds.has(m.id));
+
+	const modified = afterMessages.filter(m => {
+		const before = beforeMessages.find(bm => bm.id === m.id);
+		if (!before) return false;
+		return before.branch_id !== m.branch_id || before.parent_message_id !== m.parent_message_id;
+	});
+
+	debug.log('checkpoint', '\nChanges:');
+	debug.log('checkpoint', `- Added: ${added.length}`);
+	debug.log('checkpoint', `- Removed: ${removed.length}`);
+	debug.log('checkpoint', `- Modified: ${modified.length}`);
+
+	if (modified.length > 0) {
+		debug.log('checkpoint', '\nModified messages:');
+		modified.forEach(m => {
+			const before = beforeMessages.find(bm => bm.id === m.id)!;
+			debug.log('checkpoint', `  ${m.id}:`);
+			if (before.parent_message_id !== m.parent_message_id) {
+				debug.log('checkpoint', `    Parent: ${before.parent_message_id} → ${m.parent_message_id}`);
+			}
+			if (before.branch_id !== m.branch_id) {
+				debug.log('checkpoint', `    Branch: ${before.branch_id || 'none'} → ${m.branch_id || 'none'}`);
+			}
+		});
+	}
+
+	debug.log('checkpoint', `${'='.repeat(80)}\n`);
+}

package/frontend/lib/utils/ws.ts

@@ -0,0 +1,44 @@
+/**
+ * WebSocket Client Instance
+ * Provides a singleton WebSocket client for real-time communication
+ * with automatic user/project context synchronization
+ */
+
+import { WSClient } from '$shared/utils/ws-client';
+import type { WSAPI } from '$backend/ws';
+
+/**
+ * Get WebSocket URL based on environment
+ */
+function getWebSocketUrl(): string {
+	// Both dev and production: Use current host (Vite proxies /ws to backend in dev)
+	const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+	const host = window.location.host;
+	return `${protocol}//${host}/ws`;
+}
+
+const ws = new WSClient<WSAPI>(getWebSocketUrl(), {
+	autoReconnect: true,
+	maxReconnectAttempts: 0, // Infinite reconnect
+	reconnectDelay: 1000,
+	maxReconnectDelay: 30000
+});
+
+// CRITICAL: Handle Vite HMR to prevent WebSocket connection accumulation
+// Without this, each HMR update creates a new WSClient+connection without
+// closing the old one, causing duplicate connections on the server
+if (import.meta.hot) {
+	import.meta.hot.dispose(() => {
+		ws.disconnect();
+	});
+}
+
+// Close WebSocket cleanly on page unload (refresh, tab close, navigate away).
+// Without this, the browser may keep the old connection's HTTP upgrade request
+// as "pending" during the page transition, causing the loading indicator to
+// spin indefinitely after a refresh.
+window.addEventListener('beforeunload', () => {
+	ws.disconnect();
+});
+
+export default ws;

package/frontend/main.ts

@@ -0,0 +1,13 @@
+/**
+ * Clopen - SPA Entry Point
+ * Mounts the Svelte application to the DOM (Svelte 5)
+ */
+import { mount } from 'svelte';
+import './app.css';
+import App from './App.svelte';
+
+const app = mount(App, {
+	target: document.getElementById('app')!
+});
+
+export default app;

package/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta
+			name="description"
+			content="Clopen - Modern web UI for Claude Code & OpenCode with real browser preview, git management, multi-account support, file management, checkpoints, collaboration, and integrated terminal. Built with Bun and Svelte 5."
+		/>
+		<meta name="theme-color" content="#0a0a0a" />
+		<title>Clopen</title>
+
+		<!-- DM Sans - Local self-hosted font -->
+		<link rel="stylesheet" href="/fonts/dm-sans.css">
+
+		<!-- Prevent FOUC (Flash of Unstyled Content) for theme -->
+		<script>
+			(function() {
+				// Check for saved theme preference
+				try {
+					const savedTheme = localStorage.getItem('claude-theme');
+					const isManualTheme = localStorage.getItem('claude-theme-manual') === 'true';
+
+					let isDark = false;
+
+					if (savedTheme && isManualTheme) {
+						// Use saved manual theme preference
+						const theme = JSON.parse(savedTheme);
+						isDark = theme.mode === 'dark';
+					} else {
+						// Follow system preference
+						isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+					}
+
+					// Apply dark class immediately to prevent flash
+					if (isDark) {
+						document.documentElement.classList.add('dark');
+					} else {
+						document.documentElement.classList.remove('dark');
+					}
+
+					// Set color scheme for browser integration
+					document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+
+					// Update meta theme-color for mobile browsers
+					const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+					if (metaThemeColor) {
+						metaThemeColor.setAttribute('content', isDark ? '#0a0a0a' : '#ffffff');
+					}
+				} catch (e) {
+					// Fallback to system preference if anything fails
+					if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+						document.documentElement.classList.add('dark');
+						document.documentElement.style.colorScheme = 'dark';
+					}
+				}
+			})();
+		</script>
+	</head>
+	<body
+		class="min-h-screen bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors duration-200"
+	>
+		<!-- App mount point -->
+		<div id="app"></div>
+
+		<!-- Vite entry point -->
+		<script type="module" src="/frontend/main.ts"></script>
+	</body>
+</html>

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@myrialabs/clopen",
+  "version": "0.0.1",
+  "description": "All-in-one web workspace for Claude Code & OpenCode — chat, terminal, git, browser preview, checkpoints, and real-time collaboration",
+  "author": "Myria Labs",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "clopen": "./bin/clopen.ts"
+  },
+  "main": "./bin/clopen.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/myrialabs/clopen.git"
+  },
+  "homepage": "https://github.com/myrialabs/clopen#readme",
+  "bugs": {
+    "url": "https://github.com/myrialabs/clopen/issues"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "opencode",
+    "ai",
+    "assistant",
+    "web-ui",
+    "bun",
+    "svelte",
+    "puppeteer",
+    "collaboration",
+    "terminal",
+    "browser-preview",
+    "file-management",
+    "file-editor",
+    "git",
+    "source-control",
+    "multi-account",
+    "anthropic",
+    "checkpoint",
+    "workspace",
+    "cloudflare-tunnel",
+    "mcp"
+  ],
+  "engines": {
+    "bun": ">=1.2.12"
+  },
+  "scripts": {
+    "dev": "bun --watch backend/index.ts",
+    "build": "vite build",
+    "start": "bun backend/index.ts",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "generate-icons": "bun scripts/generate-icons.ts"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.31.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/bun": "^1.2.18",
+    "@types/qrcode": "^1.5.6",
+    "@types/xterm": "^3.0.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-svelte": "^3.10.1",
+    "globals": "^16.3.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.37.0",
+    "vite": "^7.0.4"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "^0.2.7",
+    "@anthropic-ai/sdk": "^0.62.0",
+    "@elysiajs/cors": "^1.4.0",
+    "@elysiajs/static": "^1.4.7",
+    "@iconify-json/lucide": "^1.2.57",
+    "@iconify-json/material-icon-theme": "^1.2.16",
+    "@modelcontextprotocol/sdk": "^1.26.0",
+    "@monaco-editor/loader": "^1.5.0",
+    "@opencode-ai/sdk": "^1.2.4",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/marked": "^5.0.2",
+    "@types/node": "^24.0.14",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "bun-pty": "^0.4.2",
+    "canvas": "^3.1.2",
+    "chokidar": "^4.0.3",
+    "cloudflared": "^0.7.1",
+    "devtools-detector": "^2.0.23",
+    "elysia": "^1.4.19",
+    "eruda": "^3.4.3",
+    "file-type": "^21.0.0",
+    "is-text-path": "^3.0.0",
+    "marked": "^16.1.1",
+    "monaco-editor": "^0.52.2",
+    "nanoid": "^5.1.6",
+    "puppeteer": "^24.33.0",
+    "puppeteer-cluster": "^0.25.0",
+    "qrcode": "^1.5.4",
+    "sharp": "^0.34.3",
+    "werift": "^0.22.2",
+    "xterm": "^5.3.0"
+  },
+  "trustedDependencies": [
+    "cloudflared",
+    "puppeteer"
+  ]
+}

package/scripts/generate-icons.ts

@@ -0,0 +1,87 @@
+#!/usr/bin/env bun
+
+import { join } from 'path';
+
+async function generateLucideIcons() {
+	console.log('Generating Lucide icons...');
+	
+	// Read all lucide icons data using Bun.file
+	const lucideJsonFile = Bun.file(join(process.cwd(), 'node_modules/@iconify-json/lucide/icons.json'));
+	const lucideData = await lucideJsonFile.json() as { icons: Record<string, any> };
+	const iconNames = Object.keys(lucideData.icons);
+	
+	// Generate import statement
+	const imports = `import lucideIcons from '@iconify-json/lucide/icons.json';`;
+	
+	// Generate registry entries for ALL icons
+	const registryEntries = iconNames.map(iconName => {
+		return `\t'lucide:${iconName}': icons['${iconName}'],`;
+	}).join('\n');
+	
+	// Create the lucide-icons.ts file
+	const lucideIconsContent = `// AUTO-GENERATED FILE: All Lucide Icons (${iconNames.length} icons)
+// Generated by generate-icons.ts
+// DO NOT EDIT MANUALLY
+
+${imports}
+
+// Type the icons object properly
+const icons = lucideIcons.icons as Record<string, { body: string; width?: number; height?: number; top?: number }>;
+
+export const lucideIconRegistry = {
+${registryEntries}
+} as const;
+
+export type LucideIconName = keyof typeof lucideIconRegistry;
+`;
+	
+	// Write the file using Bun.write
+	await Bun.write('src/lib/components/common/lucide-icons.ts', lucideIconsContent);
+	console.log(`Generated lucide-icons.ts with ${iconNames.length} icons`);
+}
+
+async function generateMaterialIcons() {
+	console.log('Generating Material Icon Theme icons...');
+	
+	// Read all Material Icon Theme icons from the icons.json file using Bun.file
+	const iconsJsonFile = Bun.file(join(process.cwd(), 'node_modules/@iconify-json/material-icon-theme/icons.json'));
+	const iconsData = await iconsJsonFile.json() as { icons: Record<string, any> };
+	const iconNames = Object.keys(iconsData.icons);
+	
+	// Generate import statements
+	const imports = `import materialIcons from '@iconify-json/material-icon-theme/icons.json';`;
+	
+	// Generate registry entries
+	const registryEntries = iconNames.map(iconName => {
+		return `\t'material:${iconName}': icons['${iconName}'],`;
+	}).join('\n');
+	
+	// Create the material-icons.ts file
+	const materialIconsContent = `// AUTO-GENERATED FILE: All Material Icon Theme Icons (${iconNames.length} icons)
+// Generated by generate-icons.ts
+// DO NOT EDIT MANUALLY
+
+${imports}
+
+// Type the icons object properly
+const icons = materialIcons.icons as Record<string, { body: string; width?: number; height?: number; top?: number }>;
+
+// Registry mapping for Icon.svelte
+export const materialIconRegistry = {
+${registryEntries}
+} as const;
+
+export type MaterialIconName = keyof typeof materialIconRegistry;
+`;
+	
+	// Write the file using Bun.write
+	await Bun.write('src/lib/components/common/material-icons.ts', materialIconsContent);
+	console.log(`Generated material-icons.ts with ${iconNames.length} icons`);
+}
+
+// Generate both icon sets
+console.log('Starting icon generation...\n');
+await generateLucideIcons();
+console.log('');
+await generateMaterialIcons();
+console.log('\nIcon generation complete!');