@myrialabs/clopen 0.1.3 → 0.1.5

package/README.md

@@ -1,6 +1,4 @@
-# 🎯 Clopen
-
-> All-in-one web workspace for Claude Code & OpenCode
+# Clopen
 
 [![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)
@@ -9,27 +7,28 @@
 
 ---
 
-## ✨ 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
+## 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
+## 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
+- [Bun](https://bun.sh/) v1.2.12+
+- [Claude Code](https://github.com/anthropics/claude-code) and/or [OpenCode](https://github.com/anomalyco/opencode) — required for AI chat functionality
 
 ### Installation
 
@@ -37,25 +36,25 @@
 bun add -g @myrialabs/clopen
 ```
 
-This installs dependencies, builds the frontend, and makes the `clopen` command available globally.
-
-### Usage
+### Update
 
 ```bash
-clopen
+bun add -g @myrialabs/clopen
 ```
 
-On first run, Clopen creates `.env` from `.env.example`, verifies the build, and starts the server on `http://localhost:9141`.
+Same command as installation — Bun will update to the latest version.
+
+### Usage
 
-**Configuration** — edit `.env` to customize:
 ```bash
-PORT=9141              # Server port
-NODE_ENV=production    # Environment mode
+clopen
 ```
 
+Starts the server on `http://localhost:9141`.
+
 ---
 
-## 🛠️ Development
+## Development
 
 ```bash
 git clone https://github.com/myrialabs/clopen.git
@@ -67,7 +66,7 @@ bun run check   # Type checking
 
 ---
 
-## 📚 Architecture
+## Architecture
 
 | Layer | Technology |
 |-------|-----------|
@@ -79,58 +78,22 @@ bun run check   # Type checking
 | 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.
+Clopen uses an engine-agnostic adapter pattern — 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
+## Documentation
 
 - [Technical Decisions](DECISIONS.md) - Architectural and technical decision log
+- [Contributing](CONTRIBUTING.md) - How to contribute to this project
 - [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
+## Troubleshooting
 
 ### Port 9141 Already in Use
 
-Use a different port:
 ```bash
 clopen --port 9150
 ```
@@ -145,65 +108,35 @@ 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
+## License
 
 MIT License - see [LICENSE](LICENSE) for details.
 
 ---
 
-## 🙏 Acknowledgments
+## Acknowledgments
 
 - [Claude Code](https://github.com/anthropics/claude-code) by Anthropic
-- [OpenCode](https://opencode.ai) by SST
+- [OpenCode](https://opencode.ai) by Anomaly
 - [Bun](https://bun.sh/) runtime
 - [Svelte](https://svelte.dev/) framework
 
 ---
 
-## 🔗 Links
+## Support
+
+If Clopen is useful to you, consider supporting its development:
 
-- **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)
+| Method | Address / Link |
+|--------|----------------|
+| Bitcoin (BTC) | `bc1qd9fyx4r84cce2a9hkjksetah802knadw5msls3` |
+| Solana (SOL) | `Ev3P4KLF1PNC5C9rZYP8M3DdssyBQAQAiNJkvNmPQPVs` |
+| Ethereum (ERC-20) | `0x61D826e5b666AA5345302EEEd485Acca39b1AFCF` |
+| USDT (TRC-20) | `TLH49i3EoVKhFyLb6u2JUXZWScK7uzksdC` |
+| Saweria | [saweria.co/myrialabs](https://saweria.co/myrialabs) |
 
 ---
 
-<div align="center">
-  <sub>Built with ❤️ by MyriaLabs</sub>
-</div>
+**Repository:** [github.com/myrialabs/clopen](https://github.com/myrialabs/clopen) · **Issues:** [Report a bug or request a feature](https://github.com/myrialabs/clopen/issues)

package/backend/lib/chat/stream-manager.ts

@@ -268,6 +268,14 @@ class StreamManager extends EventEmitter {
 		// Track user message ID for stream-end snapshot capture
 		let userMessageId: string | undefined;
 
+		// Initialize session baseline for snapshot system (non-blocking)
+		if (requestData.projectPath && requestData.chatSessionId) {
+			snapshotService.initializeSessionBaseline(
+				requestData.projectPath,
+				requestData.chatSessionId
+			).catch(err => debug.error('snapshot', 'Failed to initialize session baseline:', err));
+		}
+
 		try {
 			const { projectPath, prompt, chatSessionId, engine: engineType = 'claude-code', model, temperature, claudeAccountId } = requestData;
 

package/backend/lib/database/migrations/022_add_snapshot_changes_column.ts

@@ -0,0 +1,35 @@
+/**
+ * Migration: Add session_changes column to message_snapshots
+ * Purpose: Store session-scoped file changes (old/new hash per file)
+ * instead of full project state. This enables:
+ * - Session-scoped restore (only undo changes within the session)
+ * - Cross-session conflict detection
+ * - Dramatically reduced storage (only changed files stored)
+ *
+ * session_changes JSON format:
+ * {
+ *   "filepath": { "oldHash": "sha256...", "newHash": "sha256..." },
+ *   ...
+ * }
+ */
+
+import type { DatabaseConnection } from '$shared/types/database/connection';
+import { debug } from '$shared/utils/logger';
+
+export const description = 'Add session_changes for session-scoped snapshot deltas';
+
+export const up = (db: DatabaseConnection): void => {
+	debug.log('migration', 'Adding session_changes column to message_snapshots...');
+
+	db.exec(`
+		ALTER TABLE message_snapshots
+		ADD COLUMN session_changes TEXT
+	`);
+
+	debug.log('migration', 'session_changes column added');
+};
+
+export const down = (db: DatabaseConnection): void => {
+	debug.log('migration', 'Removing session_changes column...');
+	debug.warn('migration', 'Rollback not implemented for session_changes (SQLite limitation)');
+};

package/backend/lib/database/migrations/index.ts

@@ -20,6 +20,7 @@ import * as migration018 from './018_create_claude_accounts_table';
 import * as migration019 from './019_add_claude_account_to_sessions';
 import * as migration020 from './020_add_snapshot_tree_hash';
 import * as migration021 from './021_drop_prompt_templates_table';
+import * as migration022 from './022_add_snapshot_changes_column';
 
 // Export all migrations in order
 export const migrations = [
@@ -148,6 +149,12 @@ export const migrations = [
 		description: migration021.description,
 		up: migration021.up,
 		down: migration021.down
+	},
+	{
+		id: '022',
+		description: migration022.description,
+		up: migration022.up,
+		down: migration022.down
 	}
 ];
 

package/backend/lib/database/queries/snapshot-queries.ts

@@ -27,6 +27,7 @@ export const snapshotQueries = {
 		deletions?: number;
 		branch_id?: string;
 		tree_hash?: string; // Blob store tree hash (new format)
+		session_changes?: any; // SessionScopedChanges object
 	}): MessageSnapshot {
 		const db = getDatabase();
 		const id = data.id || `snapshot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -48,7 +49,8 @@ export const snapshotQueries = {
 			deletions: data.deletions || 0,
 			is_deleted: 0,
 			branch_id: data.branch_id || null,
-			tree_hash: data.tree_hash || null
+			tree_hash: data.tree_hash || null,
+			session_changes: data.session_changes ? JSON.stringify(data.session_changes) : null
 		};
 
 		db.prepare(`
@@ -57,8 +59,8 @@ export const snapshotQueries = {
 				files_snapshot, project_metadata, created_at,
 				snapshot_type, parent_snapshot_id, delta_changes,
 				files_changed, insertions, deletions,
-				is_deleted, branch_id, tree_hash
-			) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0, ?, ?)
+				is_deleted, branch_id, tree_hash, session_changes
+			) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 0, ?, ?, ?)
 		`).run(
 			snapshot.id,
 			snapshot.message_id,
@@ -74,7 +76,8 @@ export const snapshotQueries = {
 			snapshot.insertions,
 			snapshot.deletions,
 			snapshot.branch_id || null,
-			snapshot.tree_hash || null
+			snapshot.tree_hash || null,
+			snapshot.session_changes || null
 		);
 
 		return snapshot;

package/backend/lib/files/file-watcher.ts

@@ -82,6 +82,36 @@ interface ProjectWatcher {
 class FileWatcherManager {
 	private watchers = new Map<string, ProjectWatcher>();
 
+	/**
+	 * Per-project dirty file tracking for snapshot system.
+	 * Accumulates changed file relative paths between snapshot captures.
+	 */
+	private dirtyFiles = new Map<string, Set<string>>();
+
+	/**
+	 * Get dirty files accumulated since last clear for a project.
+	 */
+	getDirtyFiles(projectId: string): Set<string> {
+		return this.dirtyFiles.get(projectId) || new Set();
+	}
+
+	/**
+	 * Clear dirty files after snapshot capture.
+	 */
+	clearDirtyFiles(projectId: string): void {
+		this.dirtyFiles.delete(projectId);
+	}
+
+	/**
+	 * Track a file as dirty for snapshot purposes.
+	 */
+	private trackDirtyFile(projectId: string, relativePath: string): void {
+		if (!this.dirtyFiles.has(projectId)) {
+			this.dirtyFiles.set(projectId, new Set());
+		}
+		this.dirtyFiles.get(projectId)!.add(relativePath);
+	}
+
 	/**
 	 * Start watching a project directory
 	 */
@@ -238,6 +268,10 @@ class FileWatcherManager {
 			}
 		}
 
+		// Track dirty file for snapshot system
+		const relativePath = relative(projectPath, fullPath).replace(/\\/g, '/');
+		this.trackDirtyFile(projectId, relativePath);
+
 		// Create file change object
 		const fileChange: FileChange = {
 			path: fullPath,

package/backend/lib/mcp/config.ts

@@ -8,7 +8,7 @@
 import type { McpSdkServerConfigWithInstance, McpServerConfig } from "@anthropic-ai/claude-agent-sdk";
 import type { McpLocalConfig } from '@opencode-ai/sdk';
 import type { ServerConfig, ParsedMcpToolName, ServerName } from './types';
-import { serverRegistry } from './servers';
+import { serverRegistry, serverFactories } from './servers';
 import { debug } from '$shared/utils/logger';
 import { resolve } from 'path';
 import { SERVER_ENV } from '../shared/env';
@@ -84,14 +84,18 @@ export const mcpServers: Record<string, ServerConfig & { instance: McpSdkServerC
 // ============================================================================
 
 /**
- * Get all enabled MCP servers for Claude SDK
+ * Get all enabled MCP servers for Claude SDK.
+ *
+ * Creates FRESH server instances each call so that concurrent streams
+ * each get their own Protocol — avoids "Already connected to a transport" errors.
  */
 export function getEnabledMcpServers(): Record<string, McpServerConfig> {
 	const enabledServers: Record<string, McpServerConfig> = {};
 
 	Object.entries(mcpServers).forEach(([serverName, serverConfig]) => {
 		if (serverConfig.enabled) {
-			enabledServers[serverName] = serverConfig.instance;
+			const factory = serverFactories[serverName as ServerName];
+			enabledServers[serverName] = factory ? factory() : serverConfig.instance;
 			debug.log('mcp', `✓ Enabled MCP server: ${serverName}`);
 		} else {
 			debug.log('mcp', `✗ Disabled MCP server: ${serverName}`);

package/backend/lib/mcp/servers/helper.ts

@@ -52,6 +52,8 @@ interface ServerWithMeta<
 	TToolNames extends readonly string[]
 > {
 	server: ReturnType<typeof createSdkMcpServer>;
+	/** Factory that creates a fresh SDK server instance (new Protocol, safe for concurrent use) */
+	createInstance: () => ReturnType<typeof createSdkMcpServer>;
 	meta: {
 		readonly name: TName;
 		readonly tools: TToolNames;
@@ -84,32 +86,36 @@ export function defineServer<
 	// Build raw tool definitions (engine-agnostic)
 	const toolDefs: Record<string, RawToolDef> = {};
 
-	// Convert tools object to SDK format (array of tools)
-	const sdkTools = toolNames.map((toolName) => {
+	// Build raw tool definitions (engine-agnostic) and store for reuse
+	toolNames.forEach((toolName) => {
 		const toolDef = config.tools[toolName] as any;
-		// If schema is not provided, use empty object
 		const schema = toolDef.schema || {};
 
-		// Store raw definition for reuse
 		toolDefs[toolName as string] = {
 			description: toolDef.description,
 			schema,
 			handler: toolDef.handler,
 		};
-
-		return tool(toolName as string, toolDef.description, schema, toolDef.handler);
 	});
 
-	// Create SDK server
-	const server = createSdkMcpServer({
-		name: config.name,
-		version: config.version,
-		tools: sdkTools
-	});
+	// Factory: creates a fresh SDK server instance with new Protocol (safe for concurrent use)
+	const createInstance = () => {
+		const sdkTools = toolNames.map((toolName) => {
+			const def = toolDefs[toolName as string];
+			return tool(toolName as string, def.description, def.schema, def.handler as any);
+		});
+
+		return createSdkMcpServer({
+			name: config.name,
+			version: config.version,
+			tools: sdkTools
+		});
+	};
 
-	// Return server with metadata
+	// Return server with metadata and factory
 	return {
-		server,
+		server: createInstance(),
+		createInstance,
 		meta: {
 			name: config.name,
 			tools: toolNames as any,
@@ -126,10 +132,12 @@ export function buildServerRegistries<
 >(servers: T) {
 	const metadata = {} as any;
 	const registry = {} as any;
+	const factories = {} as any;
 
 	for (const server of servers) {
 		metadata[server.meta.name] = server.meta;
 		registry[server.meta.name] = server.server;
+		factories[server.meta.name] = server.createInstance;
 	}
 
 	return {
@@ -138,6 +146,9 @@ export function buildServerRegistries<
 		},
 		registry: registry as {
 			[K in T[number]['meta']['name']]: Extract<T[number], { meta: { name: K } }>['server']
+		},
+		factories: factories as {
+			[K in T[number]['meta']['name']]: () => Extract<T[number], { meta: { name: K } }>['server']
 		}
 	};
 }

package/backend/lib/mcp/servers/index.ts

@@ -32,7 +32,7 @@ const allServers = [
 /**
  * Auto-build registries from server array
  */
-const { metadata, registry } = buildServerRegistries(allServers);
+const { metadata, registry, factories } = buildServerRegistries(allServers);
 
 /**
  * Server Metadata Registry - Defines available servers and their tools
@@ -42,4 +42,9 @@ export const serverMetadata = metadata;
 /**
  * Server Instance Registry - Maps server names to SDK instances
  */
-export const serverRegistry = registry;
+export const serverRegistry = registry;
+
+/**
+ * Server Factory Registry - Creates fresh SDK instances (safe for concurrent streams)
+ */
+export const serverFactories = factories;

package/backend/lib/project/status-manager.ts

@@ -18,11 +18,13 @@ const INTERACTIVE_TOOLS = new Set(['AskUserQuestion']);
 function detectStreamWaitingInput(stream: StreamState): boolean {
   if (stream.status !== 'active') return false;
 
+  // SSEEventData.message is SDKMessage: { type, message: { content: [...] } }
+  // Content blocks live at msg.message.content, NOT msg.content
   const answeredToolIds = new Set<string>();
   for (const event of stream.messages) {
     const msg = event.message;
-    if (!msg || (msg as any).type !== 'user' || !(msg as any).content) continue;
-    const content = Array.isArray((msg as any).content) ? (msg as any).content : [];
+    if (!msg || (msg as any).type !== 'user') continue;
+    const content = Array.isArray((msg as any).message?.content) ? (msg as any).message.content : [];
     for (const item of content) {
       if (item.type === 'tool_result' && item.tool_use_id) {
         answeredToolIds.add(item.tool_use_id);
@@ -32,8 +34,8 @@ function detectStreamWaitingInput(stream: StreamState): boolean {
 
   for (const event of stream.messages) {
     const msg = event.message;
-    if (!msg || (msg as any).type !== 'assistant' || !(msg as any).content) continue;
-    const content = Array.isArray((msg as any).content) ? (msg as any).content : [];
+    if (!msg || (msg as any).type !== 'assistant') continue;
+    const content = Array.isArray((msg as any).message?.content) ? (msg as any).message.content : [];
     if (content.some((item: any) =>
       item.type === 'tool_use' && INTERACTIVE_TOOLS.has(item.name) && item.id && !answeredToolIds.has(item.id)
     )) {