commandmate 0.2.10 → 0.2.12

package/README.md

@@ -8,220 +8,131 @@
 
 [English](./README.md) | [日本語](./docs/ja/README.md)
 
-<!-- TODO: Add a 30-second demo GIF here to boost adoption -->
-<!-- Example: ![CommandMate Demo](./docs/assets/demo.gif) -->
+<p align="center">
+  <img src="./docs/images/demo-mobile.gif" alt="CommandMate mobile demo" width="300">
+</p>
 
-> **Your AI coding companion — never miss a prompt, work from anywhere.**
+> **Claude Code keeps coding while you're away. Check in from your phone.**
 
-- **Detect prompt/confirmation state** in real-time
-- **Send instructions from mobile or desktop** — no need to sit at your PC
-- **Manage sessions per Git worktree** — run parallel tasks with ease
+Not a "remote control" — a **mobile dev cockpit**.
 
-```bash
-npm install -g commandmate
-```
-
-![Desktop view](./docs/images/screenshot-desktop.png)
-
-## Table of Contents
-
-- [What is this?](#what-is-this)
-- [Who is this for?](#who-is-this-for)
-- [What makes it unique?](#what-makes-it-unique)
-- [Quick Start](#quick-start-3-steps)
-- [Troubleshooting](#troubleshooting)
-- [How it works](#how-it-works)
-- [Key Features](#key-features)
-- [Use Cases](#use-cases)
-- [Security](#security)
-- [CLI Commands](#cli-commands)
-- [Developer Setup](#developer-setup)
-- [FAQ](#faq)
-- [Documentation](#documentation)
-- [Contributing](#contributing)
-
----
-
-## What is this?
-
-A development companion tool that manages Claude Code sessions per Git worktree and lets you send instructions from your browser.
-
-During your commute, childcare breaks, or lunch — send the next instruction as easily as replying to an email, and keep your side projects moving forward.
+CommandMate manages Claude Code and Codex CLI sessions per Git worktree and gives you a Web UI you can operate from any browser, including your phone. Auto Yes keeps the agent running autonomously while you monitor progress, review code changes, edit instructions, and send screenshot-based directions — all from your pocket.
 
-## Who is this for?
+Of course, it works great on desktop too — the two-column layout gives you a full overview of all sessions and worktrees at a glance.
 
-**Great fit:**
-- Developers juggling childcare, commutes, or meetings — can't sit at the PC all day
-- Users who miss Claude Code's input prompts and lose flow
-- Teams using Git worktree for parallel development but finding tmux management tedious
+<p align="center">
+  <img src="./docs/images/demo-desktop.gif" alt="CommandMate desktop demo" width="600">
+</p>
 
-**Not ideal for:**
-- GUI IDE-only workflows (CommandMate is terminal/CLI-based)
-- Multi-user SaaS expectations (CommandMate is designed for local, individual use)
-
-## What makes it unique?
+```bash
+npx commandmate
+```
 
-CommandMate is not a terminal replacement. It **complements** Claude Code by focusing on three things:
+---
 
-- **Prompt detection** — know instantly when Claude Code needs your input
-- **Response UI** — reply from any browser, including your phone
-- **Worktree organization** — manage multiple sessions in one place
+## The 6 Pillars
 
-Supports **Claude Code**, **Codex CLI**, and **Gemini CLI**. Built with the Strategy pattern for extensibility — adding new CLI tools is straightforward.
+| Pillar | What it does | Why it matters |
+|--------|-------------|----------------|
+| **Auto Yes Mode** | Agent runs without stopping for confirmations | No babysitting — Claude Code keeps working while you're away |
+| **Git Worktree Sessions** | One session per worktree, parallel execution | Multiple tasks progress simultaneously |
+| **Mobile Web UI** | Full session control from any browser | Monitor and steer from your phone |
+| **File Viewer** | Browse worktree files from the browser | Review code changes without touching your PC |
+| **Markdown Editor** | Edit Markdown files in the browser | Update AI instructions on the go |
+| **Screenshot Instructions** | Attach images to your prompts | Snap a bug → "Fix this" — the agent sees the screenshot |
 
 ---
 
-## Quick Start (3 Steps)
+## Quick Start
 
 **Prerequisites:** macOS / Linux, Node.js v20+, npm, git, tmux, openssl
 
-> Windows is not supported due to the tmux dependency. WSL2 has not been tested.
-
 ```bash
-# 1. Install
-npm install -g commandmate
+# Install & start in one command
+npx commandmate
 
-# 2. Initialize (dependency check, environment setup, DB init)
+# Or install globally
+npm install -g commandmate
 commandmate init
-
-# 3. Start
 commandmate start --daemon
 ```
 
 Open http://localhost:3000 in your browser.
 
-**Useful commands:**
-
-```bash
-commandmate status    # Check server status
-commandmate stop      # Stop the server
-```
-
 See the [CLI Setup Guide](./docs/en/user-guide/cli-setup-guide.md) for details.
 
 ---
 
-## Troubleshooting
+## Comparison
 
-**Claude CLI not found / path changed?**
-If you switch between npm and standalone versions of Claude CLI, the path may change. CommandMate auto-detects the new path on the next session start. To set a custom path, add `CLAUDE_PATH=/path/to/claude` to `.env`.
+| Feature | CommandMate | Happy Coder | claude-squad | Omnara |
+|---------|:-----------:|:-----------:|:------------:|:------:|
+| Auto Yes Mode | Yes | No | Yes (TUI only) | No |
+| Git Worktree Management | Yes | No | Yes (TUI only) | No |
+| Mobile Web UI | Yes | Yes | **No** | Yes |
+| File Viewer | Yes | No | No | No |
+| Markdown Editor | Yes | No | No | No |
+| Screenshot Instructions | Yes | No | Not possible | No |
+| Free / OSS | Yes | Free + Paid | Yes | $20/mo |
+| Runs 100% Locally | Yes | Server-routed | Yes | Cloud fallback |
+
+---
+
+## Workflow
 
-**Port conflict?**
-```bash
-commandmate start -p 3001
 ```
+1. Start tasks on your PC
+   $ commandmate start --daemon
+   → Claude Code begins working with Auto Yes
 
-**Session stuck or not responding?**
-Check tmux sessions directly. CommandMate manages sessions with the naming format `mcbd-{tool}-{worktree}`:
+2. Close your laptop and go
 
-```bash
-# List all CommandMate sessions
-tmux list-sessions | grep mcbd
+3. Check in from your phone
+   → Web UI shows all sessions at a glance
 
-# View session output (without attaching)
-tmux capture-pane -t "mcbd-claude-feature-123" -p
+4. Review code changes
+   → File Viewer lets you read diffs on mobile
 
-# Attach to inspect (detach with Ctrl+b then d)
-tmux attach -t "mcbd-claude-feature-123"
+5. Adjust direction
+   → Edit a Markdown instruction file, or type a new prompt
 
-# Kill a broken session
-tmux kill-session -t "mcbd-claude-feature-123"
+6. Snap a bug
+   → Screenshot Instructions: attach a photo and say "Fix this"
+
+7. Claude Code sees the image and starts fixing
 ```
 
-> **Note:** When attached, avoid typing directly into the session — this can interfere with CommandMate's session management. Use `Ctrl+b` then `d` to detach and operate through the CommandMate UI instead.
+---
 
-**Sessions fail when launching from within Claude Code?**
-Claude Code sets `CLAUDECODE=1` to prevent nesting. CommandMate removes this automatically, but if it persists, run: `tmux set-environment -g -u CLAUDECODE`
+## Security
+
+Runs **100% locally**. No external server, no cloud relay, no account required. The only network traffic is Claude CLI's own API calls.
+
+- Fully open-source ([MIT License](./LICENSE))
+- Local database, local sessions
+- For remote access, use a VPN or authenticated reverse proxy
+
+See the [Security Guide](./docs/security-guide.md) and [Trust & Safety](./docs/en/TRUST_AND_SAFETY.md) for details.
 
 ---
 
 ## How it works
 
-CommandMate treats Claude Code (CLI) as a managed "execution session", making its state (running / waiting for input / idle) visible through a web UI.
-
 ```mermaid
 flowchart LR
     A["Browser / Phone"] -->|HTTP| B["CommandMate Server"]
     B --> C["Session Manager"]
-    C -->|"spawn / attach"| D["tmux sessions<br/>(per worktree)"]
+    C -->|"spawn / attach"| D["tmux sessions\n(per worktree)"]
     D --> E["Claude Code CLI"]
-    C <-->|"read / write"| F[("Local DB<br/>& State")]
+    C <-->|"read / write"| F[("Local DB\n& State")]
 ```
 
-Each Git worktree gets its own tmux session, so you can run multiple tasks in parallel without interference.
+Each Git worktree gets its own tmux session, so multiple tasks run in parallel without interference.
 
 ---
 
-## Key Features
-
-- **Prompt/confirmation detection** — Real-time status display in the sidebar (idle/ready/running/waiting)
-- **Send instructions from browser** — Operate via message UI from both mobile and desktop
-- **Execution history & notes** — Retains conversation history per branch with note-taking support
-- **Markdown log viewer** — View Claude's detailed output in Markdown format
-- **File viewer** — Browse worktree files from the browser with file operations (move, copy, delete)
-- **File timestamps** — Display file creation time in the file tree
-- **Auto Yes mode** — Control automatic approval with a confirmation dialog
-- **Repository management** — Remove repositories from app management (actual files are not deleted)
-- **Clone URL registration** — Clone and register repositories by specifying HTTPS/SSH URLs
-- **Multi-CLI support** — Optimized for Claude Code, with Codex CLI and Gemini CLI support
-- **Responsive UI** — Two-column layout on desktop, tab-based layout on mobile
-
 <details>
-<summary>Screenshots</summary>
-
-### Worktree Detail View (Message / Console / History)
-
-| Desktop | Mobile (History) | Mobile (Terminal) |
-|---------|-----------------|-------------------|
-| ![Desktop - Worktree detail](./docs/images/screenshot-worktree-desktop.png) | ![Mobile - History](./docs/images/screenshot-worktree-mobile.png) | ![Mobile - Terminal](./docs/images/screenshot-worktree-mobile-terminal.png) |
-
-### Top Page (Mobile)
-
-![Mobile view](./docs/images/screenshot-mobile.png)
-
-</details>
-
----
-
-## Use Cases
-
-### 1. Commute — pick up where you left off
-
-- **Morning:** Kick off a task with Claude Code before leaving
-- **Commute:** Check status on your phone, send the next instruction
-- **Evening:** Review the results and merge when you get home
-
-### 2. Childcare — 5-minute windows add up
-
-- Split tasks across worktrees so each runs independently
-- Check which sessions are waiting via CommandMate
-- In a 5-minute break, send the next instruction and keep things moving
-
-### 3. Parallel development — one UI for all your worktrees
-
-- No need to juggle tmux panes manually
-- See status of all worktrees at a glance in the sidebar
-- Focus on decisions, not terminal management
-
----
-
-## Security
-
-CommandMate runs **entirely locally** — the app, database, and sessions all stay on your machine. The only external communication is Claude CLI's own API calls.
-
-**Recommended setup:**
-- Use on `localhost` or within the same LAN
-- For remote access, use a VPN or authenticated reverse proxy (Basic Auth, OIDC, etc.)
-- Enabling external access via `commandmate init` sets `CM_BIND=0.0.0.0` — access from the same LAN at `http://<your-PC-IP>:3000`
-
-**Do NOT:**
-- Expose to the internet without authentication (never bind `0.0.0.0` without a reverse proxy)
-
-See the [Security Guide](./docs/security-guide.md) and [Trust & Safety](./docs/en/TRUST_AND_SAFETY.md) for details.
-
----
-
-## CLI Commands
+<summary><strong>CLI Commands</strong></summary>
 
 ### Basic
 
@@ -278,11 +189,90 @@ Requires [gh CLI](https://cli.github.com/) to be installed.
 
 See `commandmate --help` for all options.
 
----
+</details>
+
+<details>
+<summary><strong>Screenshots</strong></summary>
 
-## Developer Setup
+### Desktop
 
-For contributors or those building a development environment, use git clone.
+![Desktop view](./docs/images/screenshot-desktop.png)
+
+### Worktree Detail View (Message / Console / History)
+
+| Desktop | Mobile (History) | Mobile (Terminal) |
+|---------|-----------------|-------------------|
+| ![Desktop - Worktree detail](./docs/images/screenshot-worktree-desktop.png) | ![Mobile - History](./docs/images/screenshot-worktree-mobile.png) | ![Mobile - Terminal](./docs/images/screenshot-worktree-mobile-terminal.png) |
+
+### Top Page (Mobile)
+
+![Mobile view](./docs/images/screenshot-mobile.png)
+
+</details>
+
+<details>
+<summary><strong>Troubleshooting & FAQ</strong></summary>
+
+### Claude CLI not found / path changed?
+
+If you switch between npm and standalone versions of Claude CLI, the path may change. CommandMate auto-detects the new path on the next session start. To set a custom path, add `CLAUDE_PATH=/path/to/claude` to `.env`.
+
+### Port conflict?
+
+```bash
+commandmate start -p 3001
+```
+
+### Session stuck or not responding?
+
+Check tmux sessions directly. CommandMate manages sessions with the naming format `mcbd-{tool}-{worktree}`:
+
+```bash
+# List all CommandMate sessions
+tmux list-sessions | grep mcbd
+
+# View session output (without attaching)
+tmux capture-pane -t "mcbd-claude-feature-123" -p
+
+# Attach to inspect (detach with Ctrl+b then d)
+tmux attach -t "mcbd-claude-feature-123"
+
+# Kill a broken session
+tmux kill-session -t "mcbd-claude-feature-123"
+```
+
+> **Note:** When attached, avoid typing directly into the session — this can interfere with CommandMate's session management. Use `Ctrl+b` then `d` to detach and operate through the CommandMate UI instead.
+
+### Sessions fail when launching from within Claude Code?
+
+Claude Code sets `CLAUDECODE=1` to prevent nesting. CommandMate removes this automatically, but if it persists, run: `tmux set-environment -g -u CLAUDECODE`
+
+### FAQ
+
+**Q: How do I use CommandMate from my phone?**
+A: CommandMate runs a web server on your PC. To access it from your phone, your phone and PC must be on the same network (Wi-Fi). Run `commandmate init` and enable external access — this sets `CM_BIND=0.0.0.0`. Then open `http://<your-PC-IP>:3000` in your phone's browser.
+
+**Q: Can I access it from outside my home network?**
+A: Yes. Use a tunneling service like [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/) to securely expose your local server without opening router ports. Alternatively, a VPN or an authenticated reverse proxy (Basic Auth, OIDC, etc.) also works. **Do not** expose the server directly to the internet without authentication.
+
+**Q: Does it work on iPhone / Android?**
+A: Yes. CommandMate's Web UI is responsive and works on any modern mobile browser (Safari, Chrome, etc.). No app install required.
+
+**Q: Is tmux required?**
+A: CommandMate uses tmux internally to manage CLI sessions. You don't need to operate tmux directly — CommandMate handles it for you.
+
+**Q: What about Claude Code's permissions?**
+A: Claude Code's own permission settings apply as-is. CommandMate does not expand permissions. See [Trust & Safety](./docs/en/TRUST_AND_SAFETY.md) for details.
+
+**Q: Can multiple people use it?**
+A: Currently designed for individual use. Simultaneous multi-user access is not supported.
+
+</details>
+
+<details>
+<summary><strong>Developer Setup</strong></summary>
+
+For contributors or those building a development environment:
 
 ```bash
 git clone https://github.com/Kewton/CommandMate.git
@@ -290,8 +280,7 @@ cd CommandMate
 ./scripts/setup.sh  # Auto-runs dependency check, env setup, build, and launch
 ```
 
-<details>
-<summary>Manual Setup (for customization)</summary>
+### Manual Setup (for customization)
 
 ```bash
 git clone https://github.com/Kewton/CommandMate.git
@@ -306,25 +295,10 @@ npm start
 
 > **Note**: `./scripts/*` scripts are only available in the development environment. For global installs (`npm install -g`), use the `commandmate` CLI.
 
-> **Note**: Legacy environment variable names (`MCBD_*`) are still supported for backward compatibility, but using the new names (`CM_*`) is recommended.
-
 </details>
 
 ---
 
-## FAQ
-
-**Q: Is tmux required?**
-A: CommandMate uses tmux internally to manage CLI sessions. You don't need to operate tmux directly — CommandMate handles it for you. If something goes wrong, you can inspect sessions via tmux commands (see [Troubleshooting](#troubleshooting)).
-
-**Q: What about Claude Code's permissions?**
-A: Claude Code's own permission settings apply as-is. CommandMate does not expand permissions. See [Trust & Safety](./docs/en/TRUST_AND_SAFETY.md) for details.
-
-**Q: Can multiple people use it?**
-A: Currently designed for individual use. Simultaneous multi-user access is not supported.
-
----
-
 ## Documentation
 
 | Document | Description |
@@ -335,7 +309,6 @@ A: Currently designed for individual use. Simultaneous multi-user access is not
 | [Concept](./docs/en/concept.md) | Vision and problems solved |
 | [Architecture](./docs/en/architecture.md) | System design |
 | [Deployment Guide](./docs/en/DEPLOYMENT.md) | Production environment setup |
-| [Migration Guide](./docs/en/migration-to-commandmate.md) | Migrating from MyCodeBranchDesk |
 | [UI/UX Guide](./docs/en/UI_UX_GUIDE.md) | UI implementation details |
 | [Trust & Safety](./docs/en/TRUST_AND_SAFETY.md) | Security and permissions |
 

package/dist/server/src/config/auto-yes-config.js

@@ -2,16 +2,22 @@
 /**
  * Auto-Yes Configuration Constants
  *
- * Shared config for Auto-Yes duration settings.
+ * Shared config for Auto-Yes duration settings and stop pattern validation.
  * Used by both server (auto-yes-manager.ts, route.ts) and client
  * (AutoYesConfirmDialog.tsx, AutoYesToggle.tsx) components.
  *
  * Issue #225: Duration selection feature
+ * Issue #314: Stop condition (regex) validation
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DURATION_LABELS = exports.DEFAULT_AUTO_YES_DURATION = exports.ALLOWED_DURATIONS = void 0;
+exports.MAX_STOP_PATTERN_LENGTH = exports.DURATION_LABELS = exports.DEFAULT_AUTO_YES_DURATION = exports.ALLOWED_DURATIONS = void 0;
 exports.isAllowedDuration = isAllowedDuration;
+exports.validateStopPattern = validateStopPattern;
 exports.formatTimeRemaining = formatTimeRemaining;
+const safe_regex2_1 = __importDefault(require("safe-regex2"));
 /** Allowed Auto-Yes durations in milliseconds */
 exports.ALLOWED_DURATIONS = [3600000, 10800000, 28800000];
 /** Default Auto-Yes duration (1 hour = 3600000ms) */
@@ -29,6 +35,42 @@ exports.DURATION_LABELS = {
 function isAllowedDuration(value) {
     return typeof value === 'number' && exports.ALLOWED_DURATIONS.includes(value);
 }
+// =============================================================================
+// Stop Pattern Validation (Issue #314)
+// =============================================================================
+/** Maximum length for stop pattern (security: prevent excessive regex complexity) */
+exports.MAX_STOP_PATTERN_LENGTH = 500;
+/**
+ * Validate a stop pattern (regular expression string).
+ *
+ * Security measures:
+ * - Length limit (MAX_STOP_PATTERN_LENGTH)
+ * - safe-regex2 for catastrophic backtracking detection (ReDoS prevention)
+ * - RegExp constructor for syntax validation
+ * - Error messages are fixed strings only (no error.message passthrough for XSS prevention)
+ *
+ * @param pattern - Regular expression pattern string to validate
+ * @returns Validation result with fixed-string error messages
+ */
+function validateStopPattern(pattern) {
+    if (pattern.length > exports.MAX_STOP_PATTERN_LENGTH) {
+        return { valid: false, error: `Pattern must be ${exports.MAX_STOP_PATTERN_LENGTH} characters or less` };
+    }
+    // safe-regex2 detects catastrophic backtracking patterns (ReDoS prevention)
+    if (!(0, safe_regex2_1.default)(pattern)) {
+        return { valid: false, error: 'Pattern may cause performance issues (catastrophic backtracking detected)' };
+    }
+    try {
+        new RegExp(pattern);
+        return { valid: true };
+    }
+    catch {
+        return { valid: false, error: 'Invalid regular expression syntax' };
+    }
+}
+// =============================================================================
+// Time Formatting
+// =============================================================================
 /** Milliseconds per second */
 const MS_PER_SECOND = 1000;
 /** Milliseconds per minute */