@myrialabs/clopen 0.0.1

package/README.md

@@ -0,0 +1,209 @@
+# 🎯 Clopen
+
+> All-in-one web workspace for Claude Code & OpenCode
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Built with Bun](https://img.shields.io/badge/Built%20with-Bun-black)](https://bun.sh)
+
+**Clopen** provides a modern web interface for AI-assisted development, supporting both **Claude Code** and **OpenCode** as AI engines. It runs as a standalone web application — manage multiple Claude Code accounts, use built-in git source control, preview your app in a real browser, edit files, collaborate in real-time, and never lose progress with git-like checkpoints.
+
+---
+
+## ✨ Features
+
+- 👤 **Multi-Account Claude Code** - Manage multiple accounts (personal, work, team) and switch instantly per session, isolated under `~/.clopen/claude/user/` without touching system-level Claude config
+- 🔀 **Multi-Engine Support** - Switch between Claude Code and OpenCode
+- 💬 **AI Chat Interface** - Streaming responses with tool use visualization
+- 🔄 **Background Processing** - Chat, terminal, and other processes continue running even when you close the browser — come back later and pick up where you left off
+- 🌿 **Git-like Checkpoints** - Multi-branch undo/redo system with file and folder snapshots
+- 🌐 **Real Browser Preview** - Puppeteer-based Chromium rendering with WebCodecs streaming (80-90% bandwidth reduction), full click/type/scroll/drag interaction
+- 💻 **Integrated Terminal** - Multi-tab terminal with full PTY control
+- 📁 **File Management** - Directory browsing, live editing, and real-time file watching
+- 🗂️ **Git Management** - Full source control: staging, commits, branches, push/pull, stash, log, conflict resolution
+- 👥 **Real-time Collaboration** - Multiple users can work on the same project simultaneously
+- 🚇 **Built-in Cloudflare Tunnel** - Expose local projects publicly for testing and sharing
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- [Bun](https://bun.sh/) v1.2.12 or higher
+- [Claude Code](https://github.com/anthropics/claude-code) and/or [OpenCode](https://opencode.ai) — required for AI chat functionality
+
+### Installation
+
+```bash
+bun add -g clopen
+```
+
+This installs dependencies, builds the frontend, and makes the `clopen` command available globally.
+
+### Usage
+
+```bash
+clopen
+```
+
+On first run, Clopen creates `.env` from `.env.example`, verifies the build, and starts the server on `http://localhost:9141`.
+
+**Configuration** — edit `.env` to customize:
+```bash
+PORT=9141              # Server port
+NODE_ENV=production    # Environment mode
+```
+
+---
+
+## 🛠️ Development
+
+```bash
+git clone https://github.com/myrialabs/clopen.git
+cd clopen
+bun install
+bun run dev     # Start development server
+bun run check   # Type checking
+```
+
+---
+
+## 📚 Architecture
+
+| Layer | Technology |
+|-------|-----------|
+| Runtime | Bun.js |
+| Frontend | Svelte 5 (runes) + Vite |
+| Backend | Elysia + WebSocket |
+| Styling | Tailwind CSS v4 |
+| Database | SQLite with migrations |
+| Terminal | bun-pty |
+| AI Engines | Claude Code + OpenCode |
+
+### Engine Architecture
+
+Clopen uses an engine-agnostic adapter pattern — the frontend and stream manager are not tied to any specific AI tool:
+
+```
+┌─────────────────────────────────────────┐
+│              Stream Manager             │
+└──────────────┬──────────────────────────┘
+               │
+       ┌───────┴───────┐
+       ▼               ▼
+ ClaudeCodeEngine  OpenCodeEngine
+```
+
+Both engines normalize output to Claude SDK message format, ensuring a consistent experience regardless of which engine is selected.
+
+---
+
+## 🛣️ Planned Features
+
+- [ ] **Configurable MCP Servers** - Add, remove, enable, and disable Model Context Protocol servers through the UI
+- [ ] **Built-in Database Management** - Adminer/TablePlus-like interface
+- [ ] **Additional Preview Platforms** - Android, iOS, and Desktop app preview
+- [ ] **Enhanced Collaboration** - User authentication and permissions
+- [ ] **Plugin System** - Extensible architecture for community plugins
+
+---
+
+## 📖 Documentation
+
+- [Technical Decisions](DECISIONS.md) - Architectural and technical decision log
+- [Development Guidelines](CLAUDE.md) - Guidelines for working with Claude Code on this project
+
+---
+
+## 🤝 Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes
+4. Run `bun run check` to ensure code quality
+5. Commit your changes (`git commit -m 'Add amazing feature'`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request
+
+---
+
+## 🐛 Troubleshooting
+
+### Port 9141 Already in Use
+
+Use a different port:
+```bash
+clopen --port 9150
+```
+
+Or kill the existing process:
+```bash
+# Unix/Linux/macOS
+lsof -ti:9141 | xargs kill -9
+
+# Windows
+netstat -ano | findstr :9141
+taskkill /PID <PID> /F
+```
+
+### Claude Code Not Found
+
+```bash
+# macOS / Linux / WSL
+curl -fsSL https://claude.ai/install.sh | bash
+
+# Windows PowerShell
+irm https://claude.ai/install.ps1 | iex
+
+# Verify
+claude --version
+```
+
+For complete installation instructions, visit the [official setup guide](https://code.claude.com/docs/en/quickstart).
+
+### OpenCode Not Found
+
+```bash
+# macOS / Linux / WSL
+curl -fsSL https://opencode.ai/install | bash
+
+# Bun
+bun add -g opencode-ai
+
+# Verify
+opencode --version
+```
+
+For complete installation instructions, visit the [official documentation](https://opencode.ai/docs).
+
+### Browser Preview Issues
+
+Browser sessions are automatically managed via Puppeteer's APIs and cleaned up when the preview is closed, the application exits, or the session times out.
+
+---
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) for details.
+
+---
+
+## 🙏 Acknowledgments
+
+- [Claude Code](https://github.com/anthropics/claude-code) by Anthropic
+- [OpenCode](https://opencode.ai) by SST
+- [Bun](https://bun.sh/) runtime
+- [Svelte](https://svelte.dev/) framework
+
+---
+
+## 🔗 Links
+
+- **Repository:** [github.com/myrialabs/clopen](https://github.com/myrialabs/clopen)
+- **Organization:** [MyriaLabs](https://github.com/myrialabs)
+- **Issues:** [Report a bug or request a feature](https://github.com/myrialabs/clopen/issues)
+
+---
+
+<div align="center">
+  <sub>Built with ❤️ by MyriaLabs</sub>
+</div>

package/backend/index.ts

@@ -0,0 +1,156 @@
+#!/usr/bin/env bun
+import { Elysia } from 'elysia';
+import { staticPlugin } from '@elysiajs/static';
+import { corsMiddleware } from './middleware/cors';
+import { errorHandlerMiddleware } from './middleware/error-handler';
+import { loggerMiddleware } from './middleware/logger';
+
+// Database initialization
+import { initializeDatabase, closeDatabase } from './lib/database';
+import { disposeAllEngines } from './lib/engine';
+import { debug } from '$shared/utils/logger';
+import { isPortInUse } from './lib/shared/port-utils';
+import { networkInterfaces } from 'os';
+
+// Import WebSocket router
+import { wsRouter } from './ws';
+
+/**
+ * Clopen - Elysia Backend Server
+ *
+ * Single port: 9141 for everything.
+ * Development: Vite embedded as middleware (no separate server)
+ * Production: Serves frontend static files + API
+ */
+
+function getLocalIps(): string[] {
+	const ips: string[] = [];
+	for (const ifaces of Object.values(networkInterfaces())) {
+		for (const iface of ifaces ?? []) {
+			if (iface.family === 'IPv4' && !iface.internal) ips.push(iface.address);
+		}
+	}
+	return ips;
+}
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+const PORT = process.env.PORT ? parseInt(process.env.PORT) : 9141;
+const HOST = process.env.HOST || 'localhost';
+
+// Create Elysia app
+const app = new Elysia()
+	// Apply middleware
+	.use(corsMiddleware)
+	.use(errorHandlerMiddleware)
+	.use(loggerMiddleware)
+
+	// Health check endpoint
+	.get('/health', () => ({
+		status: 'ok',
+		timestamp: new Date().toISOString(),
+		environment: process.env.NODE_ENV || 'development'
+	}))
+
+	// Mount WebSocket router (all functionality now via WebSocket)
+	.use(wsRouter.asPlugin('/ws'));
+
+if (isDevelopment) {
+	// Development: Embed Vite as middleware — no separate port
+	// Uses Vite's direct APIs (transformIndexHtml, transformRequest) for speed,
+	// with Node.js compat middleware only as fallback for edge cases.
+	const { initViteDev, handleDevRequest, closeViteDev } = await import('./lib/vite-dev');
+	const vite = await initViteDev();
+
+	app.all('/*', async ({ request }) => handleDevRequest(vite, request));
+
+	// Store cleanup function for graceful shutdown
+	(globalThis as any).__closeViteDev = closeViteDev;
+} else {
+	// Production: Serve static frontend files
+	app.use(
+		staticPlugin({
+			assets: './dist',
+			prefix: '/'
+		})
+	);
+
+	// SPA fallback: serve index.html for all non-file routes
+	// Pass BunFile directly (not .stream()) so Bun sets Content-Length automatically
+	app.all('/*', async () => {
+		return new Response(Bun.file('./dist/index.html'), {
+			headers: { 'Content-Type': 'text/html; charset=utf-8' }
+		});
+	});
+
+}
+
+// Start server with proper initialization sequence
+async function startServer() {
+	// Strict check: refuse to start if port is already in use
+	if (await isPortInUse(PORT)) {
+		console.error(`❌ Port ${PORT} is already in use. Please close the existing process first.`);
+		process.exit(1);
+	}
+
+	// Initialize database first before accepting connections
+	try {
+		await initializeDatabase();
+		debug.log('database', '✅ Database initialized successfully');
+	} catch (error) {
+		debug.warn('database', '⚠️ Database initialization failed:', error);
+	}
+
+	// Start listening after database is ready
+	app.listen({
+		port: PORT,
+		hostname: HOST
+	}, () => {
+		console.log(`🚀 Clopen running at http://localhost:${PORT}`);
+		if (HOST === '0.0.0.0') {
+			const ips = getLocalIps();
+			for (const ip of ips) {
+				console.log(`🌐 Network access: http://${ip}:${PORT}`);
+			}
+		}
+	});
+}
+
+startServer().catch((error) => {
+	console.error('❌ Failed to start server:', error);
+	process.exit(1);
+});
+
+// Graceful shutdown - properly close server and database
+async function gracefulShutdown() {
+	console.log('\n🛑 Shutting down server...');
+	try {
+		// Close Vite dev server if running
+		if (isDevelopment && (globalThis as any).__closeViteDev) {
+			await (globalThis as any).__closeViteDev();
+		}
+		// Dispose all AI engines
+		await disposeAllEngines();
+		// Stop accepting new connections
+		app.stop();
+		// Close database connection
+		closeDatabase();
+		debug.log('server', '✅ Graceful shutdown completed');
+	} catch (error) {
+		debug.error('server', '❌ Error during shutdown:', error);
+	}
+	process.exit(0);
+}
+
+process.on('SIGINT', gracefulShutdown);
+process.on('SIGTERM', gracefulShutdown);
+
+// Safety net: prevent server crash from unhandled errors.
+// These can occur when AI engine SDKs emit asynchronous errors that bypass
+// the normal try/catch flow (e.g., subprocess killed during initialization).
+process.on('unhandledRejection', (reason) => {
+	debug.error('server', 'Unhandled promise rejection (server still running):', reason);
+});
+
+process.on('uncaughtException', (error) => {
+	debug.error('server', 'Uncaught exception (server still running):', error);
+});

package/backend/lib/chat/helpers.ts

@@ -0,0 +1,42 @@
+import { messageQueries } from '../database/queries';
+import { debug } from '$shared/utils/logger';
+import type { SDKMessage, ClaudeStreamRequest } from '$shared/types/messaging';
+
+/**
+ * Bun-compatible existsSync implementation
+ */
+export async function existsSync(filePath: string): Promise<boolean> {
+	try {
+		const file = Bun.file(filePath);
+		await file.stat();
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * In-memory storage for stream sessions (in production, use Redis or database)
+ */
+export const sessionStore = new Map<string, ClaudeStreamRequest>();
+
+/**
+ * Track active connections to prevent duplicates
+ */
+export const activeConnections = new Map<string, string>(); // streamId -> connectionId
+
+/**
+ * Save message to database using database function with current timestamp
+ */
+export async function saveMessageToDatabase(message: SDKMessage, sessionId: string, timestamp?: string): Promise<void> {
+	try {
+		messageQueries.create({
+			session_id: sessionId,
+			sdk_message: message,
+			timestamp: timestamp || new Date().toISOString()
+		});
+	} catch (error) {
+		debug.error('chat', 'Failed to save message to database:', error);
+		// Don't throw - we don't want message saving to break the stream
+	}
+}

package/backend/lib/chat/index.ts

@@ -0,0 +1,2 @@
+// Export chat stream manager
+export * from './stream-manager.js';