{"id":43533208,"url":"https://github.com/m0a/cc-hub","last_synced_at":"2026-05-31T04:01:33.408Z","repository":{"id":336253486,"uuid":"1141065515","full_name":"m0a/cc-hub","owner":"m0a","description":"Web-based Claude Code multi-session management hub","archived":false,"fork":false,"pushed_at":"2026-05-30T12:04:54.000Z","size":5119,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-30T12:19:20.287Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m0a.png","metadata":{"files":{"readme":"README.ja.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-24T07:15:18.000Z","updated_at":"2026-05-30T12:04:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/m0a/cc-hub","commit_stats":null,"previous_names":["m0a/cc-hub"],"tags_count":261,"template":false,"template_full_name":null,"purl":"pkg:github/m0a/cc-hub","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m0a%2Fcc-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m0a%2Fcc-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m0a%2Fcc-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m0a%2Fcc-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m0a","download_url":"https://codeload.github.com/m0a/cc-hub/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m0a%2Fcc-hub/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33718446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-03T16:13:46.859Z","updated_at":"2026-05-31T04:01:33.394Z","avatar_url":"https://github.com/m0a.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CC Hub\n\n日本語 | [English](README.md)\n\nClaude Codeセッションをリモート管理するWebベースのターミナルマネージャー。タブレットやスマートフォンからClaude Codeを操作できます。\n\n## スクリーンショット\n\n![CC Hub をタブレットで使用 — マルチペインターミナル、フローティングキーボード、ダッシュボード](docs/images/tablet-mode.jpg)\n\nタブレットモード。マルチペインターミナル、フローティングキーボード、ダッシュボードパネル（使用量リミット、日別アクティビティ、Model Usage）を一画面で表示。\n\n![セッション一覧と auto-recap](docs/images/session-list.jpg)\n\nセッション一覧。Claude Code の auto-recap、ステータスバッジ（許可待ち / 処理中 / Lost）、コンテキスト使用量、セッション別カラーテーマを表示。\n\n\u003cimg src=\"docs/images/mobile-session-list.png\" alt=\"モバイルでのセッション一覧\" width=\"320\" /\u003e\u0026nbsp;\u0026nbsp;\u003cimg src=\"docs/images/mobile-keyboard.png\" alt=\"モバイルでのターミナルとカスタムキーボード\" width=\"320\" /\u003e\n\n左: スマートフォンでは同じセッション一覧が単列レイアウトに。右: ターミナル＋カスタムオンスクリーンキーボード（長押しで記号、JA切替でIME）。\n\n## 機能\n\n- **マルチセッション管理** - 複数のClaude Codeセッションを同時に実行・切り替え\n- **マルチペインターミナル** - tmux制御モードによるペイン分割・リアルタイムレイアウト同期（全クライアント共有）\n- **ペイン操作** - ズーム、リサイズ、フォーカス、クローズ、リスポーンをキーボードショートカットまたはセッションモーダルUIから操作\n- **チームエージェント表示** - ペイン一覧やモバイルタブバーにエージェント名と色を表示\n- **セッション色テーマ** - セッションごとに色を設定して視覚的に区別\n- **デスクトップ対応** - テキスト選択＆自動コピー、フォントサイズ調整（Ctrl+=/-)\n- **タブレット最適化UI** - 分割レイアウト、フローティングキーボード、ピンチズーム\n- **モバイル対応** - タップ/長押しでカスタムキーボード表示、ペインタブバーで複数ペイン切り替え、慣性スクロール\n- **ファイルビューア** - シンタックスハイライト付きコード表示、画像・Markdown・HTMLプレビュー\n- **変更追跡** - Claude Codeの編集差分とGit差分の表示（Claude/Gitモード切替対応）\n- **ブラウザバックナビゲーション** - ブラウザの戻るジェスチャーでFileViewer内を遷移\n- **Tailscale連携** - Tailscale証明書による安全なHTTPS接続\n- **パスワード認証** - `-P`オプションでアクセス制限\n- **自動更新** - GitHub Releasesからの自動アップデート\n- **サービス連携** - systemd（Linux）/ launchd（macOS）によるサービス登録・自動再起動\n- **ダッシュボード** - 使用量リミット表示、日別統計、コスト推定、システムメトリクス、ネットワーク遅延\n- **セッション履歴** - 過去のClaude Codeセッション閲覧・再開・全文検索\n- **会話ビューア** - Markdownレンダリング、画像表示、システムサマリー区別表示\n- **プロンプト検索** - 全セッションにまたがるプロンプト履歴の検索\n- **Hook通知** - Claude Codeイベント（応答完了、入力待ち等）のブラウザプッシュ通知\n- **多言語対応** - 英語・日本語UIの自動言語検出\n- **オンボーディング** - 初回ユーザー向けスポットライト式操作ガイド\n\n## インストール\n\n### ワンラインインストール（推奨）\n\n```bash\ncurl -fsSL https://raw.githubusercontent.com/m0a/cc-hub/main/install.sh | bash\n```\n\n### 手動インストール\n\n1. [Releases](https://github.com/m0a/cc-hub/releases/latest) から対応するバイナリをダウンロード\n   - Linux x64: `cchub-linux-x64`\n   - macOS ARM64: `cchub-macos-arm64`\n\n2. 実行権限を付与して配置\n\n```bash\nchmod +x cchub-linux-x64\nmv cchub-linux-x64 ~/bin/cchub\n```\n\n3. PATHに追加（未設定の場合）\n\n```bash\necho 'export PATH=\"$HOME/bin:$PATH\"' \u003e\u003e ~/.bashrc\nsource ~/.bashrc\n```\n\n## 必要環境\n\n| 依存関係 | 必須 | インストール方法 |\n|---------|-----|----------------|\n| [Tailscale](https://tailscale.com/) | ○ | Linux: https://tailscale.com/download / macOS: `brew install tailscale` |\n| [tmux](https://github.com/tmux/tmux) 3.0+ | ○ | `apt install tmux` / `brew install tmux` |\n| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ○ | `npm install -g @anthropic-ai/claude-code` |\n\n## クイックスタート\n\n```bash\n# 1. Tailscale証明書生成を許可（初回のみ）\nsudo tailscale set --operator=$USER\n\n# 2. CC Hub起動\ncchub\n# または パスワード付き\ncchub -P mypassword\n\n# 3. ブラウザでアクセス\n#    https://\u003cyour-hostname\u003e:5923\n```\n\n### サービスとして登録\n\n```bash\ncchub setup -P mypassword\n```\n\nこれにより以下が有効になります：\n- システム起動時に自動起動（LinuxはsystemD、macOSはlaunchd）\n- クラッシュ時の自動再起動\n- `cchub update` による自動更新\n\n## コマンド\n\n```bash\n# サーバー起動\ncchub                        # ポート5923で起動\ncchub -p 8080                # ポート指定\ncchub -P mypassword          # パスワード付きで起動\n\n# サービス登録（自動再起動・自動更新）\ncchub setup -P mypassword\n\n# 更新\ncchub update                 # 最新版に更新\ncchub update --check         # 更新確認のみ\n\n# Hook通知（Claude Code hookから使用）\ncchub notify                 # hookイベント送信（stdinからJSON読み取り）\n\n# 状態確認\ncchub status\n```\n\n### オプション\n\n| オプション | 説明 | デフォルト |\n|-----------|------|-----------|\n| `-p, --port` | ポート番号 | 5923 |\n| `-H, --host` | バインドアドレス | 0.0.0.0 |\n| `-P, --password` | 認証パスワード | なし |\n| `-h, --help` | ヘルプ表示 | - |\n| `-v, --version` | バージョン表示 | - |\n\n### Tailscale設定\n\n初回のみ証明書生成を許可する設定が必要です：\n\n```bash\nsudo tailscale set --operator=$USER\n```\n\n\u003e **macOSの場合**: App Store版ではなく、`brew install tailscale`でインストールしてください。App Store版はCLIコマンドが使えないため、証明書生成が動作しません。\n\n### tmux設定（オプション）\n\nCC Hubはデフォルトのtmux設定で動作しますが、以下の設定を推奨します：\n\n```bash\n# ~/.tmux.conf\nset -g mouse on              # マウス操作を有効化\nset -g history-limit 10000   # スクロールバック履歴を増やす\n```\n\n## 使い方\n\n1. ブラウザでCC Hubを開く\n2. 「新規セッション」でClaude Codeセッションを作成\n3. ターミナルでClaude Codeを操作\n4. ファイルアイコンでファイルビューアを開く\n\n### キーボードショートカット\n\nCC Hubはtmux制御モード（`tmux -CC`）によりリアルタイムでペインレイアウトを同期します。接続中の全クライアントが同じペインレイアウトを共有します。\n\n**ペイン・セッション操作**:\n| ショートカット | 操作 |\n|--------------|------|\n| `Ctrl+B` | セッションモーダルの切替 |\n| `Ctrl+Shift+B` | ダッシュボードパネルの切替 |\n| `Ctrl+D` | 縦分割（右） |\n| `Ctrl+Shift+D` | 横分割（下） |\n| `Ctrl+W` | ペインを閉じる |\n| `Ctrl+Shift+Arrow` | アクティブペインのリサイズ |\n| `Ctrl+Shift+=` | ペインサイズの均等化 |\n| `Ctrl+Arrow` | ペイン間のフォーカス移動 |\n| `Ctrl+1-9` | 番号でセッション切り替え |\n\n**フォントサイズ・クリップボード（デスクトップ）**:\n| ショートカット | 操作 |\n|--------------|------|\n| `Ctrl+=` または `Ctrl++` | フォントサイズ拡大 |\n| `Ctrl+-` | フォントサイズ縮小 |\n| `Ctrl+0` | フォントサイズをデフォルトにリセット |\n| `Ctrl+C`（選択時） | 選択テキストをコピー |\n| `Ctrl+V` | クリップボードから貼り付け |\n\n**セッションモーダル**（`Ctrl+B`）: ペイン数バッジ付きのセッション一覧を表示。展開すると個別ペインのフォーカス・クローズ・分割操作が可能。\n\n### セッション色テーマ\n\nセッションに色を設定して視覚的に区別できます：\n\n1. セッション一覧でセッションを**長押し**\n2. 色選択メニューが表示される\n3. 9色（red, orange, amber, green, teal, blue, indigo, purple, pink）+ なしから選択\n4. ターミナル背景色が選択した色に変化\n\n### タブレットモード\n\n画面幅640px以上、高さ500px以上で自動的にタブレットレイアウトに切り替わります：\n- 左: ターミナル（分割ペイン対応、ピンチズームで拡大縮小可能）\n- セッションモーダル（`Ctrl+B`）でセッション切り替え\n- フローティングキーボード（ドラッグ移動、最小化対応）\n\n**ピンチズーム**: ターミナル部分を2本指でピンチすると拡大縮小できます。UIコントロールはズームの影響を受けません。\n\n### キーボード機能\n\n**モバイル（スマートフォン）**:\n- ターミナルを**タップ**または**長押し**でカスタムキーボードを表示\n- OSの標準キーボードは起動しません\n- スクロールでキーボードを閉じる\n\n**フローティングキーボード（タブレット）**:\n- ヘッダーをドラッグして位置を移動\n- 最小化ボタンでコンパクト表示\n- 日本語モードとキーボードモードで位置を別々に記憶\n\n**キー操作**:\n- **長押し** - 数字キーで記号入力（1→!, 2→@など）\n- **あ** - 日本語入力モードに切り替え（OS標準IMEを使用）\n- **ABC** - キーボードモードに戻る\n\n### ダッシュボード\n\n「Dashboard」タブで以下の情報を確認できます：\n\n- **使用量リミット** - 5時間/7日サイクルの使用率、リセットまでの時間\n- **リミット到達予測** - 現在のペースでリミットに到達する時間の予測\n- **日別統計** - メッセージ数・セッション数の推移グラフ\n- **モデル使用量** - Opus/Sonnetのトークン使用量比較\n- **コスト推定** - API使用料金の概算\n- **システムメトリクス** - CPU・メモリ・スワップ使用率の履歴グラフ\n- **ネットワーク遅延** - WebSocketの往復遅延\n\n### セッション履歴\n\n「履歴」タブで過去のClaude Codeセッションを閲覧できます：\n\n- プロジェクト別にグループ化\n- 会話内容の表示（Markdown対応）\n- セッションの再開（`claude -r`で続きから）\n- 全文検索（全ユーザーメッセージを検索）\n\n### Hook通知\n\nClaude Codeが応答完了・入力待ち状態になった時にブラウザプッシュ通知を受け取れます。`~/.claude/settings.json` に以下を追加してください：\n\n```json\n{\n  \"hooks\": {\n    \"Stop\": [{ \"hooks\": [{ \"type\": \"command\", \"command\": \"cchub notify\" }] }],\n    \"PreToolUse\": [{ \"hooks\": [{ \"type\": \"command\", \"command\": \"cchub notify\" }] }],\n    \"UserPromptSubmit\": [{ \"hooks\": [{ \"type\": \"command\", \"command\": \"cchub notify\" }] }],\n    \"PostToolUse\": [{\n      \"matcher\": \"AskUserQuestion\",\n      \"hooks\": [{ \"type\": \"command\", \"command\": \"cchub notify\" }]\n    }]\n  }\n}\n```\n\nCC Hubサーバーが起動している必要があります。初回アクセス時にブラウザの通知権限を許可してください。\n\n## 開発環境セットアップ\n\n開発やソースからビルドする場合は [Bun](https://bun.sh/) 1.0+ が必要です。\n\n```bash\n# 依存関係のインストール\nbun install\n\n# 開発サーバー起動\nbun run dev\n```\n\nブラウザで http://localhost:5173 を開きます（開発モード）。\n\n### ソースからビルド\n\n```bash\n# シングルバイナリとしてビルド\nbun run build:binary\n./dist/cchub\n```\n\n### 開発コマンド\n\n```bash\nbun run dev:frontend    # フロントエンドのみ\nbun run dev:backend     # バックエンドのみ\nbun run test            # テスト実行\nbun run test:e2e        # E2Eテスト\nbun run lint            # リント\n```\n\n## 技術スタック\n\n- **Backend**: Bun, Hono, WebSocket\n- **Frontend**: React 19, Vite, Tailwind CSS v4, xterm.js, react-i18next\n- **Terminal**: tmux制御モード（`tmux -CC`）\n\n## アーキテクチャ\n\nバックエンドサービス・API ルート・フロントエンドコンポーネント・hooks・WebSocket プロトコル・共有型・主要データフローを 1 画面で確認できるインタラクティブなビューアを [`architecture.html`](architecture.html)（データソース: [`architecture.json`](architecture.json)）に同梱しています。\n\n- ブラウザでレンダリングしたい場合は [raw.githack 経由](https://raw.githack.com/m0a/cc-hub/main/architecture.html)。JSON は HTML に埋め込み済みで追加 fetch 不要です。\n- `architecture.json` を編集したら `python3 scripts/build-architecture-html.py` で埋め込みを更新してください。\n\n## ライセンス\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm0a%2Fcc-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm0a%2Fcc-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm0a%2Fcc-hub/lists"}