ttyd-mux 0.4.1 → 0.4.2

package/README.md

@@ -2,6 +2,9 @@
 
 [![CI](https://github.com/cuzic/ttyd-mux/actions/workflows/ci.yml/badge.svg)](https://github.com/cuzic/ttyd-mux/actions/workflows/ci.yml)
 ![Coverage](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/cuzic/cc6203266343ecd145c80ea0e848fb33/raw/ttyd-mux-coverage.json)
+[![npm version](https://img.shields.io/npm/v/ttyd-mux.svg)](https://www.npmjs.com/package/ttyd-mux)
+[![npm downloads](https://img.shields.io/npm/dm/ttyd-mux.svg)](https://www.npmjs.com/package/ttyd-mux)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A CLI tool for managing multiple ttyd+tmux web terminal sessions.
 
@@ -9,33 +12,149 @@ A CLI tool for managing multiple ttyd+tmux web terminal sessions.
 
 ---
 
-## Motivation / 開発動機
+## Table of Contents / 目次
+
+- [Quick Start](#quick-start--クイックスタート)
+- [Features](#features--機能)
+- [Use Cases](#use-cases--ユースケース)
+- [Installation](#installation--インストール)
+- [Usage Patterns](#usage-patterns--使い方)
+- [Commands](#commands--コマンド)
+- [Configuration](#configuration--設定)
+- [Architecture](#architecture--アーキテクチャ)
+- [Toolbar Features](#toolbar-features--ツールバー機能)
+- [PWA Support](#pwa-support--pwa-対応)
+- [Caddy Integration](#caddy-integration--caddy-との連携)
+- [Development](#development--開発)
 
-**English:**
-This tool was developed to easily access terminal sessions running AI coding assistants like [Claude Code](https://docs.anthropic.com/en/docs/claude-code) from a web browser. When running long coding sessions with AI assistants on a remote server, you can monitor and interact with them from anywhere through your browser.
+---
 
-**日本語:**
-このツールは、[Claude Code](https://docs.anthropic.com/ja/docs/claude-code) などの AI コーディングアシスタントを実行しているターミナルセッションに、ブラウザから簡単にアクセスできるようにする目的で開発されました。リモートサーバーで AI アシスタントと長時間のコーディングセッションを実行する際、ブラウザからどこからでも監視・操作できます。
+## Quick Start / クイックスタート
+
+```bash
+# Install / インストール
+npm install -g ttyd-mux
+
+# Start terminal in current directory / カレントディレクトリでターミナル起動
+cd ~/my-project
+ttyd-mux up
+
+# Open in browser / ブラウザで開く
+# → http://localhost:7680/ttyd-mux/my-project/
+
+# Stop / 停止
+ttyd-mux down
+```
+
+That's it! No configuration needed for basic usage.
+
+基本的な利用には設定不要です。
 
 ---
 
-## Overview / 概要
+## Features / 機能
 
-**English:**
-ttyd-mux makes it easy to manage multiple web terminal (ttyd) sessions.
+### Core Features / コア機能
+
+| Feature | Description |
+|---------|-------------|
+| **Zero Config** | Just run `ttyd-mux up` - no setup required / 設定不要で即起動 |
+| **Multi-Session** | Manage multiple terminals from one portal / ポータルで複数ターミナルを一元管理 |
+| **Auto Daemon** | Daemon starts automatically when needed / 必要時にデーモン自動起動 |
+| **tmux Integration** | Sessions persist across restarts / tmux でセッション永続化 |
+| **Reverse Proxy Ready** | Works with Caddy, nginx, etc. / リバースプロキシ対応 |
+
+### Mobile Features / モバイル機能
+
+| Feature | Description |
+|---------|-------------|
+| **PWA Support** | Add to home screen, fullscreen mode / ホーム画面追加、フルスクリーン |
+| **IME Input** | Japanese/CJK input support / 日本語入力対応 |
+| **Touch Zoom** | Pinch to resize font / ピンチでフォントサイズ変更 |
+| **Double-tap Enter** | Quick command execution / ダブルタップで Enter |
+| **Scroll Buttons** | Easy scrollback navigation / スクロール用ボタン |
+
+### PC Features / PC 機能
+
+| Feature | Description |
+|---------|-------------|
+| **Ctrl+Scroll Zoom** | Mouse wheel font resize / マウスホイールでサイズ変更 |
+| **Trackpad Pinch** | Mac gesture support / Mac トラックパッド対応 |
+| **Toolbar Toggle** | Ctrl+J to show/hide / Ctrl+J で表示切替 |
+| **Auto Reload** | Reconnects on tab switch / タブ切替時に自動再接続 |
+
+---
+
+## Use Cases / ユースケース
+
+### 1. AI Coding Assistant Monitoring / AI コーディングアシスタントの監視
+
+Monitor long-running AI coding sessions (like Claude Code) from anywhere.
+
+Claude Code などの AI コーディングセッションをどこからでも監視。
+
+```bash
+# On your server / サーバー上で
+cd ~/my-ai-project
+ttyd-mux up
+
+# Access from phone/tablet / スマホ・タブレットからアクセス
+# https://your-server.com/ttyd-mux/my-ai-project/
+```
+
+### 2. Remote Development / リモート開発
+
+Access your development environment from any device with a browser.
+
+ブラウザさえあればどのデバイスからでも開発環境にアクセス。
+
+```bash
+# Start multiple project terminals / 複数プロジェクトを起動
+cd ~/project-a && ttyd-mux up
+cd ~/project-b && ttyd-mux up
+
+# List all sessions / セッション一覧
+ttyd-mux list --url
+```
+
+### 3. Server Administration / サーバー管理
+
+Predefined sessions for server operations.
+
+サーバー操作用の事前定義セッション。
+
+```yaml
+# ~/.config/ttyd-mux/config.yaml
+sessions:
+  - name: logs
+    dir: /var/log
+  - name: docker
+    dir: /opt/docker
+  - name: admin
+    dir: /root
+```
+
+```bash
+ttyd-mux daemon start --sessions
+```
+
+### 4. Pair Programming / ペアプログラミング
+
+Share your terminal with team members via browser.
+
+ブラウザ経由でチームメンバーとターミナルを共有。
+
+---
+
+## Motivation / 開発動機
 
-- Run `ttyd-mux up` in any directory to start a browser-accessible terminal
-- Provides a portal page to manage all sessions
-- Integrates with reverse proxies like Caddy for external access
-- Perfect for monitoring AI coding assistants like Claude Code remotely
+**English:**
+This tool was developed to easily access terminal sessions running AI coding assistants like [Claude Code](https://docs.anthropic.com/en/docs/claude-code) from a web browser. When running long coding sessions with AI assistants on a remote server, you can monitor and interact with them from anywhere through your browser.
 
 **日本語:**
-ttyd-mux は、複数の Web ターミナル（ttyd）セッションを簡単に管理するためのツールです。
+このツールは、[Claude Code](https://docs.anthropic.com/ja/docs/claude-code) などの AI コーディングアシスタントを実行しているターミナルセッションに、ブラウザから簡単にアクセスできるようにする目的で開発されました。リモートサーバーで AI アシスタントと長時間のコーディングセッションを実行する際、ブラウザからどこからでも監視・操作できます。
 
-- カレントディレクトリで `ttyd-mux up` するだけでブラウザアクセス可能なターミナルを起動
-- 複数セッションを一元管理するポータルページを提供
-- Caddy などのリバースプロキシと連携して外部公開
-- Claude Code などの AI コーディングアシスタントをリモートから監視するのに最適
+---
 
 ## Installation / インストール
 
@@ -61,8 +180,13 @@ sudo apt install ttyd tmux
 
 # macOS (Homebrew)
 brew install ttyd tmux
+
+# Check installation / インストール確認
+ttyd-mux doctor
 ```
 
+---
+
 ## Usage Patterns / 使い方
 
 ttyd-mux has two main usage patterns:
@@ -86,6 +210,9 @@ ttyd-mux up
 # Check status / 状態確認
 ttyd-mux status
 
+# List sessions with URLs / URLと一緒にセッション一覧
+ttyd-mux list --url
+
 # Stop / 停止
 ttyd-mux down
 ```
@@ -116,35 +243,55 @@ ttyd-mux daemon start -s
 ttyd-mux daemon stop --stop-sessions
 ```
 
+---
+
 ## Commands / コマンド
 
 ### Session Commands / セッションコマンド
 
-```bash
-ttyd-mux up                     # Start session for current directory
-ttyd-mux down                   # Stop session for current directory
-ttyd-mux status                 # Show status
-ttyd-mux attach [name]          # Attach to tmux session directly
-```
+| Command | Description |
+|---------|-------------|
+| `ttyd-mux up` | Start session for current directory / セッション起動 |
+| `ttyd-mux down` | Stop session for current directory / セッション停止 |
+| `ttyd-mux down --kill-tmux` | Stop session and terminate tmux / tmux も終了 |
+| `ttyd-mux status` | Show daemon and session status / 状態表示 |
+| `ttyd-mux list` | List active sessions / セッション一覧 |
+| `ttyd-mux list -l` | List with details (port, directory) / 詳細表示 |
+| `ttyd-mux list --url` | List with access URLs / URL 表示 |
+| `ttyd-mux attach [name]` | Attach to tmux session directly / tmux に直接接続 |
 
 ### Daemon Control / デーモン制御
 
-```bash
-ttyd-mux daemon start           # Start daemon only
-ttyd-mux daemon start --sessions  # Start daemon + all predefined sessions
-ttyd-mux daemon start -s        # Start daemon + select sessions interactively
-ttyd-mux daemon start -f        # Start in foreground (debug)
-ttyd-mux daemon stop            # Stop daemon
-ttyd-mux daemon stop --stop-sessions  # Stop all sessions + daemon
-ttyd-mux daemon reload          # Reload config (hot-reload)
-ttyd-mux daemon restart         # Restart daemon (apply code updates)
-```
+| Command | Description |
+|---------|-------------|
+| `ttyd-mux daemon start` | Start daemon only / デーモンのみ起動 |
+| `ttyd-mux daemon start --sessions` | Start daemon + all predefined sessions / 全セッションも起動 |
+| `ttyd-mux daemon start -s` | Start daemon + select sessions / 選択して起動 |
+| `ttyd-mux daemon start -f` | Start in foreground (debug) / フォアグラウンド起動 |
+| `ttyd-mux daemon stop` | Stop daemon / デーモン停止 |
+| `ttyd-mux daemon stop -s` | Stop all sessions + daemon / セッションも停止 |
+| `ttyd-mux daemon stop -s --kill-tmux` | Stop all + terminate tmux / tmux も終了 |
+| `ttyd-mux daemon reload` | Reload config (hot-reload) / 設定リロード |
+| `ttyd-mux daemon restart` | Restart daemon / デーモン再起動 |
+
+### Utilities / ユーティリティ
+
+| Command | Description |
+|---------|-------------|
+| `ttyd-mux doctor` | Check dependencies and configuration / 診断 |
+| `ttyd-mux deploy` | Generate static files (for static mode) / 静的ファイル生成 |
+
+### Caddy Integration / Caddy 連携
+
+| Command | Description |
+|---------|-------------|
+| `ttyd-mux caddy setup` | Add route via Caddy Admin API / ルート追加 |
+| `ttyd-mux caddy remove` | Remove route / ルート削除 |
+| `ttyd-mux caddy status` | Show routes in Caddy / ルート確認 |
+| `ttyd-mux caddy sync` | Sync routes (static mode) / ルート同期 |
+| `ttyd-mux caddy snippet` | Show Caddyfile snippet / スニペット表示 |
 
-### Diagnostics / 診断
-
-```bash
-ttyd-mux doctor                 # Check dependencies and configuration
-```
+---
 
 ## Configuration / 設定
 
@@ -183,6 +330,13 @@ proxy_mode: proxy
 # Hostname for Caddy integration
 hostname: example.com
 
+# Toolbar settings (proxy mode only)
+toolbar:
+  font_size_default_mobile: 32
+  font_size_default_pc: 14
+  font_size_min: 10
+  font_size_max: 48
+
 # Predefined sessions for static usage / 静的利用のためのセッション定義
 sessions:
   - name: project-a
@@ -191,6 +345,8 @@ sessions:
     dir: /home/user/project-b
 ```
 
+---
+
 ## Architecture / アーキテクチャ
 
 ### Proxy Mode (default) / プロキシモード（デフォルト）
@@ -206,12 +362,13 @@ sessions:
 └─────────┘      │              │   │    project-b)   │
                  │  - Portal    │   └─────────────────┘
                  │  - Proxy     │
+                 │  - Toolbar   │
                  │  - API       │
                  └──────────────┘
 ```
 
 - **Caddy**: Forwards external requests to ttyd-mux / 外部からのリクエストを ttyd-mux に転送
-- **ttyd-mux daemon**: Portal + reverse proxy to ttyd / ポータル表示 + ttyd へのリバースプロキシ
+- **ttyd-mux daemon**: Portal + reverse proxy + toolbar injection / ポータル + プロキシ + ツールバー注入
 - **ttyd**: Web terminal for each session (runs tmux) / 各セッションの Web ターミナル（tmux を起動）
 
 ### Static Mode / スタティックモード
@@ -265,25 +422,54 @@ ttyd-mux daemon (manages sessions)
 - `ttyd-mux up` で再起動すると既存の tmux セッションに再接続します
 - `--kill-tmux` フラグで tmux セッションも完全に終了できます
 
+---
+
 ## Toolbar Features / ツールバー機能
 
 In proxy mode, ttyd-mux injects a toolbar for improved input experience:
 
 プロキシモードでは、入力体験向上のためツールバーが注入されます：
 
-### Mobile Support / モバイル対応
+### Mobile / モバイル
 
-- **IME Input**: Virtual keyboard with Japanese IME support / 日本語 IME 対応
+- **IME Input**: Text field with virtual keyboard support / 日本語 IME 対応テキスト入力
 - **Touch Pinch Zoom**: Two-finger pinch to resize font / 2本指ピンチでフォントサイズ変更
 - **Double-tap Enter**: Double-tap to send Enter key / ダブルタップで Enter 送信
-- **Scroll Buttons**: PgUp/PgDn for scrolling / スクロール用ボタン
+- **Scroll Buttons**: PgUp/PgDn for scrollback / スクロールバック用ボタン
+- **Minimize Mode**: Collapse toolbar for more terminal space / ツールバー最小化
 
-### PC Browser Support / PC ブラウザ対応
+### PC Browser / PC ブラウザ
 
 - **Ctrl+Scroll Zoom**: Mouse wheel with Ctrl key / Ctrl+マウスホイールでサイズ変更
 - **Trackpad Pinch Zoom** (Mac): Two-finger pinch gesture / トラックパッドピンチ
 - **Ctrl+J Toggle**: Show/hide toolbar / ツールバー表示切替
 
+---
+
+## PWA Support / PWA 対応
+
+ttyd-mux supports Progressive Web App (PWA) for a native app-like experience:
+
+ttyd-mux はネイティブアプリのような体験のため PWA に対応しています：
+
+### Features / 機能
+
+- **Fullscreen Mode**: No browser address bar / アドレスバーなしのフルスクリーン
+- **Home Screen Icon**: Add to home screen on iOS/Android / ホーム画面にアイコン追加
+- **Auto Reconnect**: Automatically reloads when returning from background / バックグラウンドから復帰時に自動再接続
+
+### How to Install / インストール方法
+
+**Android (Chrome):**
+1. Open portal page / ポータルページを開く
+2. Menu → "Add to Home screen" / メニュー → 「ホーム画面に追加」
+
+**iOS (Safari):**
+1. Open portal page / ポータルページを開く
+2. Share → "Add to Home Screen" / 共有 → 「ホーム画面に追加」
+
+---
+
 ## Caddy Integration / Caddy との連携
 
 ### Using Admin API (Recommended) / Admin API で設定（推奨）
@@ -312,7 +498,28 @@ handle /ttyd-mux/* {
 }
 ```
 
-See [docs/caddy-setup.md](docs/caddy-setup.md) for details, including authentication setup.
+### Authentication / 認証
+
+For external access, configure authentication in Caddy:
+
+外部公開時は Caddy で認証を設定：
+
+```caddyfile
+example.com {
+    # Basic authentication
+    basicauth /ttyd-mux/* {
+        user $2a$14$... # bcrypt hash
+    }
+
+    handle /ttyd-mux/* {
+        reverse_proxy 127.0.0.1:7680
+    }
+}
+```
+
+See [docs/caddy-setup.md](docs/caddy-setup.md) for details, including OAuth setup.
+
+---
 
 ## File Structure / ファイル構成
 
@@ -325,14 +532,24 @@ See [docs/caddy-setup.md](docs/caddy-setup.md) for details, including authentica
   ttyd-mux.sock         # Daemon communication socket / デーモン通信用ソケット
 ```
 
+---
+
 ## Development / 開発
 
 ```bash
+# Clone repository
+git clone https://github.com/cuzic/ttyd-mux.git
+cd ttyd-mux
+
+# Install dependencies
+bun install
+
 # Run in development / 開発実行
 bun run src/index.ts <command>
 
 # Test / テスト
-bun test
+bun test                  # Unit tests
+bun run test:e2e          # E2E tests (Playwright)
 
 # Type check / 型チェック
 bun run typecheck
@@ -340,10 +557,22 @@ bun run typecheck
 # Lint / リント
 bun run check
 
-# Build single executable / ビルド（単一実行ファイル）
-bun build src/index.ts --compile --outfile ttyd-mux
+# Build / ビルド
+bun run build
 ```
 
+---
+
+## Contributing / 貢献
+
+Issues and Pull Requests are welcome!
+
+Issue や Pull Request を歓迎します！
+
+See [CLAUDE.md](CLAUDE.md) for development guidelines.
+
+---
+
 ## License / ライセンス
 
 MIT

package/dist/version.d.ts

@@ -1,3 +1,3 @@
 export declare const NAME: "ttyd-mux";
-export declare const VERSION: "0.4.1";
+export declare const VERSION: "0.4.2";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1,4 +1,4 @@
 // This file is auto-generated. Do not edit manually.
 export const NAME = 'ttyd-mux';
-export const VERSION = '0.4.1';
+export const VERSION = '0.4.2';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ttyd-mux",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "ttyd session multiplexer - manage multiple ttyd+tmux web terminal sessions / 複数の ttyd+tmux Web ターミナルセッションを管理する CLI ツール",
   "type": "module",
   "main": "./dist/index.js",