@wong2kim/wmux 1.0.0

package/README.md

@@ -0,0 +1,157 @@
+# wmux
+
+> Terminal multiplexer for Windows with built-in browser, notifications, and AI agent status detection.
+
+Windows-native terminal multiplexer with workspaces, panes, tabs, integrated browser, notification system, CLI/API access, and session management.
+
+## Quick Install
+
+**PowerShell (recommended):**
+```powershell
+irm https://raw.githubusercontent.com/openwong2kim/wmux/main/install.ps1 | iex
+```
+
+**Git Bash / WSL:**
+```bash
+curl -fsSL https://raw.githubusercontent.com/openwong2kim/wmux/main/install.sh | bash
+```
+
+**Manual:**
+```bash
+git clone https://github.com/openwong2kim/wmux.git
+cd wmux
+npm install
+npm start
+```
+
+## Requirements
+
+- Windows 10/11
+- Node.js 18+
+- Git
+
+## Features
+
+- **Terminal**: xterm.js + WebGL GPU rendering, ConPTY, PowerShell native
+- **Workspaces**: Vertical sidebar, drag-and-drop, Ctrl+1~9 switching
+- **Split Panes**: Ctrl+D / Ctrl+Shift+D, directional focus
+- **In-App Browser**: Ctrl+Shift+L, scriptable API
+- **Notifications**: OSC 9/99/777, rings, toast, Ctrl+I panel
+- **AI Agent Status**: Detects Claude Code, Cursor, Aider, Codex, Gemini, Copilot, OpenCode
+- **Command Palette**: Ctrl+K fuzzy search
+- **Terminal Search**: Ctrl+F
+- **Vi Copy Mode**: Ctrl+Shift+X
+- **CLI + API**: Named Pipe JSON-RPC, `wmux` CLI
+- **MCP Server**: Claude Code can control browser and terminal via MCP tools
+- **Multi-Agent**: Each agent targets its own browser surface via `surfaceId`
+- **Session Management**: Save and restore sessions
+- **i18n**: English, Korean, Japanese, Chinese
+
+## Usage
+
+```bash
+npm start              # Run in dev mode
+npm run package        # Build executable
+npm run make           # Create installer
+wmux --help            # CLI commands
+```
+
+## CLI Examples
+
+```bash
+# Workspace management
+wmux workspace create "MyWorkspace"
+wmux workspace list
+wmux workspace switch "MyWorkspace"
+
+# Pane operations
+wmux pane split-right
+wmux pane split-down
+wmux pane send-text "echo hello"
+
+# Surface (browser)
+wmux surface open "https://example.com"
+wmux surface eval "window.location"
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| Ctrl+B | Toggle sidebar |
+| Ctrl+N | New workspace |
+| Ctrl+D | Split right |
+| Ctrl+Shift+D | Split down |
+| Ctrl+T | New tab |
+| Ctrl+W | Close tab |
+| Ctrl+F | Search terminal |
+| Ctrl+K | Command palette |
+| Ctrl+I | Notifications |
+| Ctrl+, | Settings |
+| Ctrl+Shift+L | Open browser |
+| Ctrl+Shift+H | Flash pane |
+| Ctrl+1~9 | Switch workspace |
+
+## Tech Stack
+
+Electron 41 + React 19 + TypeScript 5.9 + Tailwind 3 + Zustand 5 + xterm.js 6 + node-pty
+
+## MCP Server (Claude Code Integration)
+
+wmux includes an MCP server that lets Claude Code directly control the browser and terminal.
+
+### Setup
+
+```bash
+npm run build:mcp
+```
+
+Add to your project's `.mcp.json`:
+```json
+{
+  "mcpServers": {
+    "wmux": {
+      "command": "node",
+      "args": ["<path-to-wmux>/dist/mcp/mcp/index.js"]
+    }
+  }
+}
+```
+
+`WMUX_SOCKET_PATH` and `WMUX_AUTH_TOKEN` are automatically set in wmux terminal sessions — no extra env config needed when running Claude Code inside wmux.
+
+### Available MCP Tools
+
+| Tool | Description |
+|------|-------------|
+| `browser_navigate` | Navigate browser to URL |
+| `browser_snapshot` | Get page HTML |
+| `browser_click` | Click element by CSS selector |
+| `browser_fill` | Fill input by CSS selector |
+| `browser_eval` | Execute JS in browser |
+| `terminal_read` | Read terminal screen |
+| `terminal_send` | Send text to terminal |
+| `terminal_send_key` | Send key (enter, ctrl+c, etc.) |
+| `workspace_list` | List workspaces |
+| `surface_list` | List surfaces (terminals + browsers) |
+| `pane_list` | List panes |
+
+### Multi-Agent Usage
+
+All browser tools accept an optional `surfaceId` parameter for multi-agent scenarios:
+
+```
+1. Call surface_list → find your browser surface ID
+2. Call browser_navigate with surfaceId="<your-browser-id>"
+3. Call browser_snapshot with surfaceId="<your-browser-id>"
+```
+
+Each agent can independently control its own browser surface. When `surfaceId` is omitted, the currently active browser surface is used.
+
+## Note on AI Agents
+
+WinMux detects AI coding agents for status display purposes only. It does not call any AI APIs, capture agent outputs, or automate agent interactions. Users are responsible for complying with their AI provider's Terms of Service.
+
+## License
+
+MIT

package/assets/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none">
+  <rect width="256" height="256" rx="48" fill="#1e1e2e"/>
+  <rect x="8" y="8" width="240" height="240" rx="40" fill="#181825" stroke="#313244" stroke-width="2"/>
+  <text x="128" y="170" text-anchor="middle" font-family="monospace" font-weight="bold" font-size="140" fill="#89b4fa">W</text>
+  <circle cx="200" cy="64" r="16" fill="#a6e3a1"/>
+</svg>

package/dist/cli/cli/client.js

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendRequest = sendRequest;
+const net = __importStar(require("net"));
+const crypto = __importStar(require("crypto"));
+const PIPE_NAME = process.env.WMUX_SOCKET_PATH || '\\\\.\\pipe\\wmux';
+const TIMEOUT_MS = 5000;
+function sendRequest(method, params = {}) {
+    return new Promise((resolve, reject) => {
+        const id = crypto.randomUUID();
+        const token = process.env.WMUX_AUTH_TOKEN;
+        const request = { id, method, params, token };
+        const socket = net.connect(PIPE_NAME);
+        let buffer = '';
+        let settled = false;
+        const timer = setTimeout(() => {
+            if (!settled) {
+                settled = true;
+                socket.destroy();
+                reject(new Error('Request timed out after 5 seconds.'));
+            }
+        }, TIMEOUT_MS);
+        socket.on('connect', () => {
+            socket.write(JSON.stringify(request) + '\n');
+        });
+        socket.on('data', (chunk) => {
+            buffer += chunk.toString('utf8');
+            const lines = buffer.split('\n');
+            buffer = lines.pop() ?? '';
+            for (const line of lines) {
+                const trimmed = line.trim();
+                if (!trimmed)
+                    continue;
+                try {
+                    const response = JSON.parse(trimmed);
+                    if (response.id === id && !settled) {
+                        settled = true;
+                        clearTimeout(timer);
+                        socket.destroy();
+                        resolve(response);
+                    }
+                }
+                catch {
+                    // ignore malformed lines
+                }
+            }
+        });
+        socket.on('error', (err) => {
+            if (!settled) {
+                settled = true;
+                clearTimeout(timer);
+                if (err.code === 'ENOENT' || err.code === 'ECONNREFUSED') {
+                    reject(new Error('wmux is not running. Start the app first.'));
+                }
+                else {
+                    reject(new Error(`Connection error: ${err.message}`));
+                }
+            }
+        });
+        socket.on('close', () => {
+            if (!settled) {
+                settled = true;
+                clearTimeout(timer);
+                reject(new Error('Connection closed before response was received.'));
+            }
+        });
+    });
+}

package/dist/cli/cli/commands/browser.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleBrowser = handleBrowser;
+const client_1 = require("../client");
+const utils_1 = require("../utils");
+const BROWSER_HELP = `
+wmux browser — Scriptable Browser API
+
+USAGE
+  wmux browser <subcommand> [args]
+
+SUBCOMMANDS
+  snapshot                        Return the full page HTML (document.documentElement.outerHTML)
+  click <selector>                Click the first element matching the CSS selector
+  fill <selector> <text>          Set the value of an input matching the CSS selector
+  eval <code>                     Execute arbitrary JavaScript in the page context
+  navigate <url>                  Navigate the active browser surface to a URL
+
+EXAMPLES
+  wmux browser snapshot
+  wmux browser click "#submit-btn"
+  wmux browser fill "input[name=email]" "user@example.com"
+  wmux browser eval "document.title"
+  wmux browser navigate "https://example.com"
+`.trimStart();
+async function handleBrowser(args, jsonMode) {
+    const sub = args[0];
+    const rest = args.slice(1);
+    if (!sub || sub === '--help' || sub === '-h') {
+        process.stdout.write(BROWSER_HELP);
+        process.exit(0);
+    }
+    let response;
+    switch (sub) {
+        // ── browser snapshot ─────────────────────────────────────────────────────
+        case 'snapshot': {
+            response = await (0, client_1.sendRequest)('browser.snapshot', {});
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                const r = response.result;
+                process.stdout.write(r?.html ?? '');
+            }
+            break;
+        }
+        // ── browser click <selector> ─────────────────────────────────────────────
+        case 'click': {
+            const selector = rest[0];
+            if (!selector) {
+                console.error('Error: browser click requires <selector>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('browser.click', { selector });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log(`Clicked: ${selector}`);
+            }
+            break;
+        }
+        // ── browser fill <selector> <text> ───────────────────────────────────────
+        case 'fill': {
+            const selector = rest[0];
+            const text = rest.slice(1).join(' ');
+            if (!selector) {
+                console.error('Error: browser fill requires <selector> <text>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('browser.fill', { selector, text });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log(`Filled "${selector}" with "${text}"`);
+            }
+            break;
+        }
+        // ── browser eval <code> ──────────────────────────────────────────────────
+        case 'eval': {
+            const code = rest.join(' ');
+            if (!code) {
+                console.error('Error: browser eval requires <code>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('browser.eval', { code });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                const r = response.result;
+                console.log(JSON.stringify(r?.result, null, 2));
+            }
+            break;
+        }
+        // ── browser navigate <url> ───────────────────────────────────────────────
+        case 'navigate': {
+            const url = rest[0];
+            if (!url) {
+                console.error('Error: browser navigate requires <url>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('browser.navigate', { url });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log(`Navigated to: ${url}`);
+            }
+            break;
+        }
+        default:
+            console.error(`Unknown browser subcommand: "${sub}". Run 'wmux browser --help' for usage.`);
+            process.exit(1);
+    }
+}

package/dist/cli/cli/commands/input.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleInput = handleInput;
+const client_1 = require("../client");
+const utils_1 = require("../utils");
+async function handleInput(cmd, args, jsonMode) {
+    let response;
+    switch (cmd) {
+        case 'send': {
+            const text = args.join(' ');
+            if (!text) {
+                console.error('Error: send requires <text>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('input.send', { text });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log('Text sent.');
+            }
+            break;
+        }
+        case 'send-key': {
+            const key = args[0];
+            if (!key) {
+                console.error('Error: send-key requires <keystroke>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('input.sendKey', { key });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log(`Key sent: ${key}`);
+            }
+            break;
+        }
+        case 'read-screen': {
+            response = await (0, client_1.sendRequest)('input.readScreen', {});
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                // server returns { text: string } object or plain string
+                const result = response.result;
+                let screen;
+                if (typeof result === 'object' && result !== null && 'text' in result) {
+                    screen = result.text ?? '';
+                }
+                else if (typeof result === 'string') {
+                    screen = result;
+                }
+                else {
+                    console.log(JSON.stringify(result, null, 2));
+                    break;
+                }
+                process.stdout.write(screen);
+                if (!screen.endsWith('\n'))
+                    process.stdout.write('\n');
+            }
+            break;
+        }
+        default:
+            console.error(`Unknown input command: ${cmd}`);
+            process.exit(1);
+    }
+}

package/dist/cli/cli/commands/notify.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleNotify = handleNotify;
+const client_1 = require("../client");
+const utils_1 = require("../utils");
+async function handleNotify(args, jsonMode) {
+    const title = (0, utils_1.parseFlag)(args, '--title');
+    const body = (0, utils_1.parseFlag)(args, '--body');
+    if (!title) {
+        console.error('Error: notify requires --title <text>');
+        process.exit(1);
+    }
+    if (!body) {
+        console.error('Error: notify requires --body <text>');
+        process.exit(1);
+    }
+    const response = await (0, client_1.sendRequest)('notify', { title, body });
+    if (jsonMode) {
+        (0, utils_1.printResult)(response);
+    }
+    else {
+        if (!response.ok) {
+            (0, utils_1.printError)(response);
+            return;
+        }
+        console.log(`Notification sent: "${title}"`);
+    }
+}

package/dist/cli/cli/commands/pane.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handlePane = handlePane;
+const client_1 = require("../client");
+const utils_1 = require("../utils");
+function formatPaneList(result) {
+    const list = result;
+    if (!Array.isArray(list) || list.length === 0) {
+        console.log('No panes found.');
+        return;
+    }
+    const maxId = Math.max(...list.map((p) => p.id.length));
+    console.log('ID'.padEnd(maxId + 2) + 'TYPE'.padEnd(8) + 'DETAILS');
+    console.log('-'.repeat(maxId + 30));
+    for (const p of list) {
+        let details = '';
+        if (p.type === 'leaf' && p.activeSurfaceId) {
+            details = `active surface: ${p.activeSurfaceId}`;
+        }
+        else if (p.type === 'branch' && p.direction) {
+            details = `direction: ${p.direction}`;
+        }
+        console.log(p.id.padEnd(maxId + 2) + p.type.padEnd(8) + details);
+    }
+}
+async function handlePane(cmd, args, jsonMode) {
+    let response;
+    switch (cmd) {
+        case 'list-panes': {
+            response = await (0, client_1.sendRequest)('pane.list', {});
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                formatPaneList(response.result);
+            }
+            break;
+        }
+        case 'focus-pane': {
+            const id = args[0];
+            if (!id) {
+                console.error('Error: focus-pane requires <id>');
+                process.exit(1);
+            }
+            response = await (0, client_1.sendRequest)('pane.focus', { id });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log(`Focused pane: ${id}`);
+            }
+            break;
+        }
+        case 'split': {
+            const direction = (0, utils_1.parseFlag)(args, '--direction') ?? 'right';
+            if (direction !== 'right' && direction !== 'down') {
+                console.error('Error: --direction must be "right" or "down"');
+                process.exit(1);
+            }
+            // right → horizontal, down → vertical (server expects horizontal/vertical)
+            const dirMap = { right: 'horizontal', down: 'vertical' };
+            const mapped = dirMap[direction] || direction;
+            response = await (0, client_1.sendRequest)('pane.split', { direction: mapped });
+            if (jsonMode) {
+                (0, utils_1.printResult)(response);
+            }
+            else {
+                if (!response.ok) {
+                    (0, utils_1.printError)(response);
+                    return;
+                }
+                console.log(`Split pane ${direction}.`);
+            }
+            break;
+        }
+        default:
+            console.error(`Unknown pane command: ${cmd}`);
+            process.exit(1);
+    }
+}