ClaudeWork

注意: このプロジェクトは開発中（Work In Progress）です。予告なく仕様が変更される可能性があります。

ClaudeWork は、Claude Code セッションをブラウザから管理するための Web ベースツールです。複数のセッションを並列で実行し、Git worktree を使用して各セッションを独立した環境で管理します。

スクリーンショット

Claude Code ターミナル

ブラウザ上でClaude Codeをインタラクティブに操作できます。セッションごとに独立したDocker環境で実行されます。

プロジェクト一覧

プロジェクトとセッションを一覧で管理できます。

ライトモード	ダークモード

セッション作成

実行環境やClaude Codeオプションを指定してセッションを作成できます。

設定画面

アプリケーション設定、実行環境、GitHub PAT、開発ツール設定を管理できます。

実行環境管理

Docker、Host、SSH の実行環境を追加・編集・削除できます。

動作保証環境

• OS: macOS, Linux
  • Windows は現在サポートされていません
• Docker Engine + Docker Compose V2.24+: インストール済みであること
• Node.js 20+: 開発・ローカル実行（npm run dev 等）を行う場合のみ必要

主な機能

• セッション管理: 複数の Claude Code セッションを並列実行
• Git worktree 統合: セッションごとに独立した Git 環境
• リモートリポジトリクローン: GitHub/GitLab からプロジェクトを直接クローン
• Docker実行環境: 安全で隔離された実行環境（デフォルト）
• 環境管理: Docker、Host、SSH 実行環境の切り替え
• 権限スキップオプション: Docker環境での --dangerously-skip-permissions 設定（環境レベル・セッション単位で制御可能）
• ポートマッピング: Docker環境でコンテナ内サービスのポートをホストに公開
• ボリュームマウント: Docker環境でホストのディレクトリをコンテナにマウント
• リアルタイム通信: WebSocket によるリアルタイム出力表示
• Diff 表示: Git diff をビジュアルに表示
• Git 操作: rebase、squash merge などの Git 操作をブラウザから実行
• GitHub PAT認証: Docker環境でのHTTPSプライベートリポジトリクローンをサポート（詳細）
• ブランチ管理: セッション作成時にブランチを選択可能
• 実行スクリプト: テスト実行、ビルドなどの定型作業を簡単に実行
• ターミナル統合: ブラウザ内でターミナル操作
• ライト/ダークモード: テーマ切り替え対応
• モバイル対応: レスポンシブデザイン

セットアップ

詳細は SETUP.md を参照してください。

クイックスタート

git clone 不要で、docker-compose.yml を作成するだけで起動できます。

Linux環境の場合: 起動前に stat -c '%g' /var/run/docker.sock の実行結果（数値）を DOCKER_GID に設定してください（例: DOCKER_GID=999）。詳細は セットアップガイド を参照してください。

# 1. 作業ディレクトリを作成
mkdir claude-work && cd claude-work

# 2. docker-compose.yml をダウンロード
curl -fsSL -O https://raw.githubusercontent.com/windschord/claude-work/main/docker-compose.yml

# 3. (Linux のみ) .env で docker.sock のアクセス権を設定
echo "DOCKER_GID=$(stat -c '%g' /var/run/docker.sock)" > .env

# 4. 起動
docker compose up -d

ブラウザで http://localhost:3000 を開きます。

docker compose logs -f   # ログ表示
docker compose down      # 停止
docker compose pull && docker compose up -d  # 最新イメージに更新

ポートを変更する場合:

HOST_PORT=3001 docker compose up -d

環境変数のカスタマイズ

.env ファイルを作成して設定を変更できます:

# ホスト側ポート
HOST_PORT=3001

# ログレベル
LOG_LEVEL=info

既存ユーザー向け移行手順

以前のバージョンで ./data ディレクトリにデータを保存していた場合、named volume への移行が必要です:

# 1. コンテナを停止
docker compose down

# 2. docker-compose.override.yml でバインドマウントを維持する方法（推奨）
cat > docker-compose.override.yml <<'EOF'
services:
  app:
    volumes:
      - ./data:/data
      - /var/run/docker.sock:/var/run/docker.sock
EOF

# 3. 再起動
docker compose up -d

バインドマウントを使わず named volume に移行する場合:

# 既存データを named volume にコピー
docker volume create claudework-data
docker run --rm -v ./data:/src -v claudework-data:/dst alpine cp -a /src/. /dst/

開発者向けセットアップ

ソースコードを変更して開発する場合:

git clone https://github.com/windschord/claude-work.git
cd claude-work
cp .env.example .env
cp docker-compose.override.yml.example docker-compose.override.yml
docker compose up -d --build

環境変数

詳細は ENV_VARS.md を参照してください。

変数名	説明	デフォルト
HOST_PORT	ホスト側公開ポート（Docker Compose）	3000
DATABASE_URL	SQLite データベースパス	なし（必須）
PORT	サーバーポート（Docker Compose では固定）	3000
NODE_ENV	実行環境（Docker Compose では production に固定）	production
LOG_LEVEL	ログレベル	info
ALLOWED_ORIGINS	CORS許可オリジン	なし
ALLOWED_PROJECT_DIRS	許可するプロジェクトディレクトリ	なし（すべてのディレクトリを許可）

API 仕様

詳細は API.md を参照してください。

開発

開発サーバーの起動

開発時には、pm2を使った起動を推奨します。pm2を使うことで、バックグラウンドプロセスの管理が容易になります。

# pm2で開発サーバーを起動（推奨）
npm run dev:pm2

# プロセスの状態を確認
npm run pm2:status

# ログを確認
npm run pm2:logs

# サーバーを停止
npm run pm2:stop

# pm2からプロセスを削除
npm run pm2:delete

従来の方法でも起動できます:

# 直接起動（Ctrl+Cで停止）
npm run dev

pm2の利点

• プロセスの安全な停止（killコマンド不要）
• プロセス状態の確認が容易
• ログ管理の統一
• 自動再起動機能
• リソース使用状況のモニタリング

pm2コマンド一覧

# 開発サーバーのみ起動
npm run dev:pm2

# テスト実行（pm2経由）
npm run test:pm2

# テスト監視モード（pm2経由）
npm run test:watch:pm2

# すべてのプロセスを起動
npm run pm2:start

# すべてのプロセスを再起動
npm run pm2:restart

# プロセス状態を確認
npm run pm2:status

# ログをリアルタイム表示
npm run pm2:logs

# リソース使用状況をモニタリング
npm run pm2:monit

# すべてのプロセスを停止
npm run pm2:stop

# すべてのプロセスを削除
npm run pm2:delete

テスト

ユニットテスト

# すべてのテストを実行
npm test

# テストをウォッチモードで実行
npm run test:watch

# pm2でテスト監視モードを実行（バックグラウンド）
npm run test:watch:pm2

E2Eテスト

# E2Eテストを実行
npm run e2e

# UIモードでE2Eテストを実行
npm run e2e:ui

# ブラウザを表示してE2Eテストを実行
npm run e2e:headed

統合テスト

統合テストスクリプトは、実際のClaude Codeプロセスを起動して手動テストを支援します。

# 統合テストスクリプトを実行
npm run integration-test

このスクリプトは以下を行います:

• 開発サーバーを起動（環境変数を自動設定）
• テストチェックリストを表示
• インタラクティブメニューを提供

テスト結果は docs/integration-test-report.md に記録してください。

環境変数

統合テストには以下の環境変数を使用できます:

# カスタム環境変数で実行
PORT=3001 npm run integration-test

環境変数を指定しない場合、以下のデフォルト値が使用されます:

• PORT: 3000

ライセンス

Apache License 2.0 - 詳細は LICENSE を参照してください。

技術スタック

• フロントエンド: Next.js 15.1, React 19, TypeScript, Tailwind CSS, Zustand
• バックエンド: Next.js API Routes, Drizzle ORM, SQLite, WebSocket (ws)
• その他: XTerm.js, react-diff-viewer-continued, Headless UI, next-themes

ドキュメント

ユーザーガイド

• セットアップガイド - 詳細なインストール手順
• 環境変数リファレンス - 設定可能な環境変数一覧
• API仕様 - REST API / WebSocket API仕様
• GitHub PAT設定ガイド - Docker環境でのHTTPS認証設定
• Docker環境詳細設定ガイド - 権限スキップ・ポートマッピング・ボリュームマウントの設定

開発者向けドキュメント

• Software Design Documents - ソフトウェア設計ドキュメント
  • 設計書 - 技術設計ドキュメント
  • 要件定義 - 要件仕様書
  • タスク管理 - 実装タスク追跡
  • トラブルシューティング - 問題分析
  • アーカイブ - 過去のドキュメント

貢献

Issue や Pull Request は歓迎します。

サポート

問題が発生した場合は、GitHub Issues でお知らせください。