@myrialabs/clopen 0.1.3 → 0.1.4

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/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/frontend/lib/components/chat/ChatInterface.svelte

@@ -16,6 +16,7 @@
 	import { presenceState } from '$frontend/lib/stores/core/presence.svelte';
 	import { userStore } from '$frontend/lib/stores/features/user.svelte';
 	import { addNotification } from '$frontend/lib/stores/ui/notification.svelte';
+	import { chatService } from '$frontend/lib/services/chat/chat.service';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import ChatMessages from './message/ChatMessages.svelte';
@@ -214,6 +215,12 @@
 			return;
 		}
 
+		// Reset frontend state without killing the backend stream
+		// The old session's stream continues running in the background
+		if (appState.isLoading) {
+			chatService.resetForSessionSwitch();
+		}
+
 		// Clear messages for the local view
 		clearMessages();
 

package/frontend/lib/components/chat/input/components/EngineModelPicker.svelte

@@ -146,10 +146,15 @@
 	});
 
 	// Initialize model picker based on session state:
-	// - New session (no messages): apply Settings defaults
-	// - Existing session (has messages): restore from session's persisted engine/model
-	// Reads are done outside untrack (tracked), writes inside untrack (not tracked)
-	// to prevent UpdatedAtError from circular chatModelState read-write.
+	// - Session with persisted engine/model: restore from session (highest priority)
+	// - New session (no messages, no persisted engine/model): apply Settings defaults
+	// - Legacy session without engine/model: fall back to Settings defaults
+	//
+	// IMPORTANT: Session engine/model is checked BEFORE hasStartedChat because
+	// when switching sessions, messages load asynchronously AFTER the session is set.
+	// If we checked hasStartedChat first, there's a window where messages haven't
+	// loaded yet (hasStartedChat=false) → defaults would be applied, overriding the
+	// session's actual engine/model selection.
 	$effect(() => {
 		const session = sessionState.currentSession;
 		const _sessionId = session?.id;
@@ -162,12 +167,14 @@
 		const sessionAccountId = session?.claude_account_id;
 
 		untrack(() => {
-			if (!started) {
-				// New session (no messages): apply Settings defaults
-				initChatModel(sEngine, sModel, sMemory || {});
-			} else if (sessionEngine && sessionModel) {
-				// Existing session with persisted engine/model: restore
+			if (sessionEngine && sessionModel) {
+				// Session has persisted engine/model: always restore from session.
+				// This works for both existing sessions (has messages) and sessions
+				// where messages are still loading asynchronously.
 				restoreChatModelFromSession(sessionEngine, sessionModel, sessionAccountId);
+			} else if (!started) {
+				// New session (no messages, no persisted engine/model): apply Settings defaults
+				initChatModel(sEngine, sModel, sMemory || {});
 			} else {
 				// Existing session without engine/model (pre-migration or not yet set):
 				// fall back to Settings defaults

package/frontend/lib/components/settings/engines/AIEnginesSettings.svelte

@@ -494,7 +494,7 @@
 								rel="noopener noreferrer"
 								class="inline-flex items-center gap-1 font-medium text-violet-600 dark:text-violet-400 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2"
 							>
-								official setup guide
+								official documentation
 							</a>
 						</div>
 					</div>