https://github.com/m0a/cc-hub
Web-based Claude Code multi-session management hub
https://github.com/m0a/cc-hub
Last synced: 13 days ago
JSON representation
Web-based Claude Code multi-session management hub
- Host: GitHub
- URL: https://github.com/m0a/cc-hub
- Owner: m0a
- Created: 2026-01-24T07:15:18.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-05-30T12:04:54.000Z (13 days ago)
- Last Synced: 2026-05-30T12:19:20.287Z (13 days ago)
- Language: TypeScript
- Size: 4.88 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.ja.md
- Changelog: CHANGELOG.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# CC Hub
日本語 | [English](README.md)
Claude Codeセッションをリモート管理するWebベースのターミナルマネージャー。タブレットやスマートフォンからClaude Codeを操作できます。
## スクリーンショット
タブレットモード。マルチペインターミナル、フローティングキーボード、ダッシュボードパネル（使用量リミット、日別アクティビティ、Model Usage）を一画面で表示。
セッション一覧。Claude Code の auto-recap、ステータスバッジ（許可待ち / 処理中 / Lost）、コンテキスト使用量、セッション別カラーテーマを表示。
左: スマートフォンでは同じセッション一覧が単列レイアウトに。右: ターミナル＋カスタムオンスクリーンキーボード（長押しで記号、JA切替でIME）。
## 機能
- **マルチセッション管理** - 複数のClaude Codeセッションを同時に実行・切り替え
- **マルチペインターミナル** - tmux制御モードによるペイン分割・リアルタイムレイアウト同期（全クライアント共有）
- **ペイン操作** - ズーム、リサイズ、フォーカス、クローズ、リスポーンをキーボードショートカットまたはセッションモーダルUIから操作
- **チームエージェント表示** - ペイン一覧やモバイルタブバーにエージェント名と色を表示
- **セッション色テーマ** - セッションごとに色を設定して視覚的に区別
- **デスクトップ対応** - テキスト選択＆自動コピー、フォントサイズ調整（Ctrl+=/-)
- **タブレット最適化UI** - 分割レイアウト、フローティングキーボード、ピンチズーム
- **モバイル対応** - タップ/長押しでカスタムキーボード表示、ペインタブバーで複数ペイン切り替え、慣性スクロール
- **ファイルビューア** - シンタックスハイライト付きコード表示、画像・Markdown・HTMLプレビュー
- **変更追跡** - Claude Codeの編集差分とGit差分の表示（Claude/Gitモード切替対応）
- **ブラウザバックナビゲーション** - ブラウザの戻るジェスチャーでFileViewer内を遷移
- **Tailscale連携** - Tailscale証明書による安全なHTTPS接続
- **パスワード認証** - `-P`オプションでアクセス制限
- **自動更新** - GitHub Releasesからの自動アップデート
- **サービス連携** - systemd（Linux）/ launchd（macOS）によるサービス登録・自動再起動
- **ダッシュボード** - 使用量リミット表示、日別統計、コスト推定、システムメトリクス、ネットワーク遅延
- **セッション履歴** - 過去のClaude Codeセッション閲覧・再開・全文検索
- **会話ビューア** - Markdownレンダリング、画像表示、システムサマリー区別表示
- **プロンプト検索** - 全セッションにまたがるプロンプト履歴の検索
- **Hook通知** - Claude Codeイベント（応答完了、入力待ち等）のブラウザプッシュ通知
- **多言語対応** - 英語・日本語UIの自動言語検出
- **オンボーディング** - 初回ユーザー向けスポットライト式操作ガイド
## インストール
### ワンラインインストール（推奨）
```bash
curl -fsSL https://raw.githubusercontent.com/m0a/cc-hub/main/install.sh | bash
```
### 手動インストール
1. [Releases](https://github.com/m0a/cc-hub/releases/latest) から対応するバイナリをダウンロード
- Linux x64: `cchub-linux-x64`
- macOS ARM64: `cchub-macos-arm64`
2. 実行権限を付与して配置
```bash
chmod +x cchub-linux-x64
mv cchub-linux-x64 ~/bin/cchub
```
3. PATHに追加（未設定の場合）
```bash
echo 'export PATH="$HOME/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
```
## 必要環境
| 依存関係 | 必須 | インストール方法 |
|---------|-----|----------------|
| [Tailscale](https://tailscale.com/) | ○ | Linux: https://tailscale.com/download / macOS: `brew install tailscale` |
| [tmux](https://github.com/tmux/tmux) 3.0+ | ○ | `apt install tmux` / `brew install tmux` |
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ○ | `npm install -g @anthropic-ai/claude-code` |
## クイックスタート
```bash
# 1. Tailscale証明書生成を許可（初回のみ）
sudo tailscale set --operator=$USER
# 2. CC Hub起動
cchub
# または パスワード付き
cchub -P mypassword
# 3. ブラウザでアクセス
# https://:5923
```
### サービスとして登録
```bash
cchub setup -P mypassword
```
これにより以下が有効になります：
- システム起動時に自動起動（LinuxはsystemD、macOSはlaunchd）
- クラッシュ時の自動再起動
- `cchub update` による自動更新
## コマンド
```bash
# サーバー起動
cchub # ポート5923で起動
cchub -p 8080 # ポート指定
cchub -P mypassword # パスワード付きで起動
# サービス登録（自動再起動・自動更新）
cchub setup -P mypassword
# 更新
cchub update # 最新版に更新
cchub update --check # 更新確認のみ
# Hook通知（Claude Code hookから使用）
cchub notify # hookイベント送信（stdinからJSON読み取り）
# 状態確認
cchub status
```
### オプション
| オプション | 説明 | デフォルト |
|-----------|------|-----------|
| `-p, --port` | ポート番号 | 5923 |
| `-H, --host` | バインドアドレス | 0.0.0.0 |
| `-P, --password` | 認証パスワード | なし |
| `-h, --help` | ヘルプ表示 | - |
| `-v, --version` | バージョン表示 | - |
### Tailscale設定
初回のみ証明書生成を許可する設定が必要です：
```bash
sudo tailscale set --operator=$USER
```
> **macOSの場合**: App Store版ではなく、`brew install tailscale`でインストールしてください。App Store版はCLIコマンドが使えないため、証明書生成が動作しません。
### tmux設定（オプション）
CC Hubはデフォルトのtmux設定で動作しますが、以下の設定を推奨します：
```bash
# ~/.tmux.conf
set -g mouse on # マウス操作を有効化
set -g history-limit 10000 # スクロールバック履歴を増やす
```
## 使い方
1. ブラウザでCC Hubを開く
2. 「新規セッション」でClaude Codeセッションを作成
3. ターミナルでClaude Codeを操作
4. ファイルアイコンでファイルビューアを開く
### キーボードショートカット
CC Hubはtmux制御モード（`tmux -CC`）によりリアルタイムでペインレイアウトを同期します。接続中の全クライアントが同じペインレイアウトを共有します。
**ペイン・セッション操作**:
| ショートカット | 操作 |
|--------------|------|
| `Ctrl+B` | セッションモーダルの切替 |
| `Ctrl+Shift+B` | ダッシュボードパネルの切替 |
| `Ctrl+D` | 縦分割（右） |
| `Ctrl+Shift+D` | 横分割（下） |
| `Ctrl+W` | ペインを閉じる |
| `Ctrl+Shift+Arrow` | アクティブペインのリサイズ |
| `Ctrl+Shift+=` | ペインサイズの均等化 |
| `Ctrl+Arrow` | ペイン間のフォーカス移動 |
| `Ctrl+1-9` | 番号でセッション切り替え |
**フォントサイズ・クリップボード（デスクトップ）**:
| ショートカット | 操作 |
|--------------|------|
| `Ctrl+=` または `Ctrl++` | フォントサイズ拡大 |
| `Ctrl+-` | フォントサイズ縮小 |
| `Ctrl+0` | フォントサイズをデフォルトにリセット |
| `Ctrl+C`（選択時） | 選択テキストをコピー |
| `Ctrl+V` | クリップボードから貼り付け |
**セッションモーダル**（`Ctrl+B`）: ペイン数バッジ付きのセッション一覧を表示。展開すると個別ペインのフォーカス・クローズ・分割操作が可能。
### セッション色テーマ
セッションに色を設定して視覚的に区別できます：
1. セッション一覧でセッションを**長押し**
2. 色選択メニューが表示される
3. 9色（red, orange, amber, green, teal, blue, indigo, purple, pink）+ なしから選択
4. ターミナル背景色が選択した色に変化
### タブレットモード
画面幅640px以上、高さ500px以上で自動的にタブレットレイアウトに切り替わります：
- 左: ターミナル（分割ペイン対応、ピンチズームで拡大縮小可能）
- セッションモーダル（`Ctrl+B`）でセッション切り替え
- フローティングキーボード（ドラッグ移動、最小化対応）
**ピンチズーム**: ターミナル部分を2本指でピンチすると拡大縮小できます。UIコントロールはズームの影響を受けません。
### キーボード機能
**モバイル（スマートフォン）**:
- ターミナルを**タップ**または**長押し**でカスタムキーボードを表示
- OSの標準キーボードは起動しません
- スクロールでキーボードを閉じる
**フローティングキーボード（タブレット）**:
- ヘッダーをドラッグして位置を移動
- 最小化ボタンでコンパクト表示
- 日本語モードとキーボードモードで位置を別々に記憶
**キー操作**:
- **長押し** - 数字キーで記号入力（1→!, 2→@など）
- **あ** - 日本語入力モードに切り替え（OS標準IMEを使用）
- **ABC** - キーボードモードに戻る
### ダッシュボード
「Dashboard」タブで以下の情報を確認できます：
- **使用量リミット** - 5時間/7日サイクルの使用率、リセットまでの時間
- **リミット到達予測** - 現在のペースでリミットに到達する時間の予測
- **日別統計** - メッセージ数・セッション数の推移グラフ
- **モデル使用量** - Opus/Sonnetのトークン使用量比較
- **コスト推定** - API使用料金の概算
- **システムメトリクス** - CPU・メモリ・スワップ使用率の履歴グラフ
- **ネットワーク遅延** - WebSocketの往復遅延
### セッション履歴
「履歴」タブで過去のClaude Codeセッションを閲覧できます：
- プロジェクト別にグループ化
- 会話内容の表示（Markdown対応）
- セッションの再開（`claude -r`で続きから）
- 全文検索（全ユーザーメッセージを検索）
### Hook通知
Claude Codeが応答完了・入力待ち状態になった時にブラウザプッシュ通知を受け取れます。`~/.claude/settings.json` に以下を追加してください：
```json
{
"hooks": {
"Stop": [{ "hooks": [{ "type": "command", "command": "cchub notify" }] }],
"PreToolUse": [{ "hooks": [{ "type": "command", "command": "cchub notify" }] }],
"UserPromptSubmit": [{ "hooks": [{ "type": "command", "command": "cchub notify" }] }],
"PostToolUse": [{
"matcher": "AskUserQuestion",
"hooks": [{ "type": "command", "command": "cchub notify" }]
}]
}
}
```
CC Hubサーバーが起動している必要があります。初回アクセス時にブラウザの通知権限を許可してください。
## 開発環境セットアップ
開発やソースからビルドする場合は [Bun](https://bun.sh/) 1.0+ が必要です。
```bash
# 依存関係のインストール
bun install
# 開発サーバー起動
bun run dev
```
ブラウザで http://localhost:5173 を開きます（開発モード）。
### ソースからビルド
```bash
# シングルバイナリとしてビルド
bun run build:binary
./dist/cchub
```
### 開発コマンド
```bash
bun run dev:frontend # フロントエンドのみ
bun run dev:backend # バックエンドのみ
bun run test # テスト実行
bun run test:e2e # E2Eテスト
bun run lint # リント
```
## 技術スタック
- **Backend**: Bun, Hono, WebSocket
- **Frontend**: React 19, Vite, Tailwind CSS v4, xterm.js, react-i18next
- **Terminal**: tmux制御モード（`tmux -CC`）
## アーキテクチャ
バックエンドサービス・API ルート・フロントエンドコンポーネント・hooks・WebSocket プロトコル・共有型・主要データフローを 1 画面で確認できるインタラクティブなビューアを [`architecture.html`](architecture.html)（データソース: [`architecture.json`](architecture.json)）に同梱しています。
- ブラウザでレンダリングしたい場合は [raw.githack 経由](https://raw.githack.com/m0a/cc-hub/main/architecture.html)。JSON は HTML に埋め込み済みで追加 fetch 不要です。
- `architecture.json` を編集したら `python3 scripts/build-architecture-html.py` で埋め込みを更新してください。
## ライセンス
MIT