Claude Codeにプロジェクト管理用UIを提供しました

Dev.to / 2026/4/15

💬 オピニオンDeveloper Stack & InfrastructureTools & Practical Usage

要点

  • 著者は「orchestrAI」というRustベースのダッシュボードを構築しました。これはxterm.jsのライブ端末を組み込み、Claude Codeに接続することで、個々のタスクに対するインタラクティブなブラウザベースのエージェントセッションを可能にします。
  • タスクは、専用のGitブランチ上でClaude Codeエージェントをスポーンして実行します(構成は orchestrai/<plan>/<task>)。ツール呼び出しや会話履歴全体をリアルタイムに確認できます。
  • サーバーの再起動をまたいでエージェントセッションを保持するために、PTYを所有するデタッチされたスーパーバイザーデーモンを使います。その結果、tmuxを使わずにダッシュボードが再アタッチできます。
  • 変更はGitで分離され、レビュー/マージ手順で制御されます。ユーザーが差分を確認して「Merge」をクリックするまで、作業ブランチには何もマージされません。
  • プランは ~/.claude/plans/*.yaml のYAMLファイルとして管理されており、自由形式の解析テキストではなく、フェーズの構造化、タスク、依存関係、受け入れ基準を重視しています。

Claude Code を使っていると、計画やタスクがあまりにたくさんになって、自分が何をしていたのか分からなくなってしまうことがあります……特に、コンピュータがクラッシュしたり、意図しない再起動が入った後は。
そこで orchestrAI を作りました。Rust 製のダッシュボードで、あらゆるブラウザ上にライブの Claude Code ターミナルを表示し、私の計画とタスクをきっちり整理して管理します。もちろんそれだけではありません。

これはチャット UI の画面録画ではありません。実際の xterm.js ターミナルで、ワークステーション上で動いている実際の Claude Code セッションに接続しています。タスクをクリックすると、Claude エージェントが専用の git ブランチ上で起動し、作業する様子を見て、こちらから入力し、完了したら差分を確認してマージします——すべてブラウザから。

問題

ほとんどの AI コーディングツールは、あなたが開発マシンの前にいることを前提にしています。それは理にかなっています——コードはそこにある、資格情報もそこにある、コンテキストもそこにある。けれども、その結果こうなります:

  • 引き継いで監督することができません。エージェントが 20 分かかるなら、視界を失わないようにデスクを離れられません。
  • 別のデバイスからエージェントを確認できません。
  • 1 度に 1 エージェントを超えてスケールしようとすると、すぐに扱いにくくなります。tmux のペインやエディタのウィンドウを行ったり来たりすることになります。

私が本当に欲しかったのは、Linear や Jira のようなものです。ただし:

  • 担当者は AI エージェント
  • ステータス更新は、誰かが入力するのではなく、コードや git から来る
  • 「タスクを完了する」とは:ブランチ上でエージェントを起動し、見守り、差分をレビューし、マージすること

できること

任意のブラウザから使えるインタラクティブなエージェントセッション。 各タスクには Start ボタンがあります。クリックすると、Claude Code エージェントが専用の orchestrai/<plan>/<task> git ブランチ上で起動します。完全な xterm.js ターミナルが手に入り——そこに入力し、ツール呼び出しをリアルタイムで監視し、会話全体を過去にさかのぼってスクロールできます。

サーバー再起動をまたいで継続。 各エージェントは、PTY を所有するデタッチされた supervisor デーモンの中で動作します。ダッシュボードサーバーを kill して再起動しても、エージェントはまだ作業中で、ターミナルは再接続されます。tmux は不要です(後述)。

マージ前のレビュー付きで、git を分離した変更。 マージされるのは、あなたの作業ブランチが対象ではありません。あなたが Merge をクリックするまで何も反映されません。タスクカードには差分(diff)タブ、ブランチ名、エージェントが完了を報告した後のマージバナーが表示されます。

Markdown ではなく YAML としてのプラン。 各プランは ~/.claude/plans/*.yaml に存在し、フェーズ、タスク、依存関係、ファイルパス、受け入れ基準を含みます。UI からインライン編集できます。「New Plan」をクリックしてやりたいことを説明すると、エージェントがその説明を構造化された YAML に変換します。

コスト追跡。 CLI が報告するエージェントごとの USD を、タスクごと、プランごとに集計します。タスクごとに予算上限を設定できます。

「本当に完了した?」エージェント。 各タスクには Check ボタンがあり、コードが受け入れ基準を満たしているか検証するための読み取り専用エージェントを起動します。ヒューリスティック(推測)や「ファイルが存在するなら完了のはず」といったことはありません——本当の AI が差分を読み、判定を返します。

少しアーキテクチャ

これは単一の ~15 MB の Rust バイナリとして配布されます。Node も Docker も、別途インストールが必要なデーモンもありません。フロントエンド(React + Vite + xterm.js)は rust-embed により埋め込まれています。

面白い部分は tmux の置き換えでした。最初のバージョンでは、セッションの永続化に tmux を使いました。Linux と macOS では動きますが、Windows では使えず、利用者に別途インストールを要求するのは手間でした。

そこで、ミニスーパーバイザを作りました。約 300 行の Rust が、デタッチされたデーモンへフォークします(Unix では fork + setsid、Windows では DETACHED_PROCESS)そして、portable-pty クレートを使ってエージェントごとに 1 つの PTY を所有します。デーモンは、Linux/macOS では Unix ドメインソケット、Windows では名前付きパイプでセッションを公開し、interprocess クレートを使って通信します。ダッシュボードサーバーは、そのソケットを通じてデーモンと会話します。PTY の出力はログファイルにミラーされるため、クライアントが再接続すると完全なトランスクリプト(履歴)を受け取れます。

tmux と同じ永続性を、クロスプラットフォームで実現しつつ、外部バイナリを必要としません。

まずは試す

Rust 1.85+、Node.js 20+、pnpm が必要で、またホストマシン上で Claude Code が認証済みである必要があります。ブランチ分離のための Git——orchestrAI は、ブランチを持っていないリポジトリを自動で初期化します。あるいは、最新リリースをダウンロードしてそのまま実行するだけでも構いません。Mac、Linux、Windows に対応しています。

# build
pnpm --filter @orchestrai/web build
cd server-rs && cargo build --release

# run
./target/release/orchestrai-server
# open http://<host>:3100 in any browser on your network

リポジトリと全文ドキュメント:github.com/cpoder/orchestrAI

次に何をするか

私が取り組んでいるのは 3 つです:

ドライバ抽象によるマルチ AI。 AgentDriver トレイトにより、Claude Code と並行して Aider、Codex CLI、Gemini CLI 用のドライバを同梱して提供できます。バイナリ名、プロンプト形式、認証検出、コスト解析はすべてドライバごとです。つまり、同じダッシュボードから、あるタスクは Aider エージェントで、別のタスクは Claude エージェントで実行できます。

MCP サーバー。 エージェントがダッシュボードに報告するために curl -X PUT .../status を実行する代わりに、update_task_statusget_task_context のような適切な Model Context Protocol のツールを使います。ダッシュボードは MCP サーバーとして公開され、起動されたエージェントには自動的に配線されます。

SaaS 向けのリモート実行ランナー。 ホスティング版では、エージェントを直接実行できません。そこには顧客のコードと資格情報が必要だからです。そこで、軽量な agent-runner バイナリを顧客のマシン上で動作させ、認証済みの WebSocket を通じて SaaS に接続し、そこでエージェントを実行します。再接続に強い Outbox + ACK パターンを採用しており、ブローカーは不要です。

もし Claude Code をスケールして動かす試みをしたことがあるなら、またはコーヒーを淹れている間にスマホからエージェントの作業を眺めたいだけなら、ぜひフィードバックが欲しいです。Issues や PR も歓迎します。