Claude Codeを並列で複数走らせる運用は、2026年初頭からエンジニアの間で急速に当たり前になった。一方で、tmuxセッションをCtrl+b sでリスト表示してから矢印キーで選択する従来の操作感は、5本以上のエージェントが同時に動き始めると破綻する。「あのエージェントいま何してたっけ」を把握するためだけに、毎回タイル分割を組み直すストレスが生まれる。

hallucinogen/agent-viewer（★374／HTML+Node.js／2026-02-11更新）は、この問題にカンバンボードで答えるOSSだ。tmuxセッションで動くClaude CodeエージェントをRunning／Idle／Completedの3列に自動分類し、新規Spawn・ライブ出力閲覧・追加プロンプト送信・ファイルアップロード・既存セッション自動検出を、ブラウザ1タブで完結させる。さらにHOST=0.0.0.0で起動してTailscaleを噛ませれば、外出中にスマホからエージェントの進捗を確認・指示することも可能になる。

Claude Codeで複数エージェントを並列運用する全体設計を先に押さえたい人は、AIエージェントフレームワーク比較2026年版を最初に読むと、agent-viewer・ruflo・Sub-agent・OpenHandsがそれぞれどの抽象度で動くかが俯瞰できる。

この記事のポイント

  • agent-viewerはtmuxで動くClaude Codeエージェントをカンバン化するOSS（★374・HTML+Node.js、2026-02-11時点）
  • spawn・live output・追加プロンプト送信・ファイル添付・auto-discoveryを1画面に集約
  • HOST=0.0.0.0+Tailscaleでスマホから外出先でもエージェントを操作できる
  • 認証機構は無いため、tailnet外への公開は禁忌

Agent Viewer Screenshot

agent-viewerとは：tmux × Claude Code を可視化するカンバンUI

agent-viewerは「tmuxセッションで動いているclaudeプロセスを、tmuxのことを知らなくても操作できるWeb UIで包む」ことに特化したOSSだ。Node.js（v18以上）とtmuxとClaude CLIさえ入っていればnpm startで立ち上がり、ブラウザでhttp://localhost:4200を開くと即カンバンが表示される。

主要コンセプトは3つに整理できる。

  1. Kanban Columns：各エージェントの状態（Running／Idle／Completed）でカードを自動分類
  2. Spawn-as-Session：UIからのspawn操作が裏ではtmux new-session -d "claude ..."に変換され、サーバー停止後もエージェントは生き続ける
  3. Auto-discovery：既存のtmuxセッションのうちclaudeを起動しているものを自動検出してカードに昇格

ポイントは「agent-viewer自身は状態を持たない」ことだ。状態管理（プロセスの存命・stdout・現在の作業ディレクトリ）はすべてtmuxに丸投げされる。だからagent-viewerサーバーを再起動しても、エージェントの仕事は中断されない。これは「Web UIに状態を抱え込ませると死亡時に作業が消える」というClaude Code並列運用の最大リスクを回避する、シンプルかつ正しい設計判断だ。

理解の急所：agent-viewerはステートレスなビューレイヤーである。すべての真実はtmuxセッションが持っている。だからこそ、tmux attach -t <name>で同じエージェントに直接潜り込んでも矛盾しないし、Web UIが落ちても作業は失われない。

主要機能：spawn・live output・メッセージング・ファイル添付

READMEに列挙された主要機能を、実際のフロー順で並べ替えて解説する。

Spawn：UIから新規エージェント起動

カンバン右上の[+ SPAWN]ボタン、またはキーボードNで新規スポーンダイアログが開く。プロジェクトパスとプロンプトを入力するだけで、サーバー側で以下が実行される（疑似コード）。

# サーバー側の処理イメージ
SESSION_NAME="claude-$(date +%s)"
tmux new-session -d -s "$SESSION_NAME" \
  -c "$PROJECT_PATH" \
  "claude '$INITIAL_PROMPT'"

カードがRunning列に即座に追加され、ライブ出力の購読が始まる。tmuxセッション名にタイムスタンプが入るため、同じプロジェクトに対して複数並列でspawnしても衝突しない。

Live Output：ANSI付き出力をブラウザで再現

カードのVIEW OUTPUTを押すと、tmuxバッファの内容がANSIエスケープシーケンスを保ったままブラウザ側で再描画される。Claude Codeのカラー出力（diff・toolCall・spinner）はそのまま見える。サーバー実装は典型的にはWebSocket経由でtmux capture-pane -p -eをストリーミングする方式で、ターミナルがない端末（タブレット・スマホ）からでも視覚的にエージェントの進捗を把握できる。

Send Messages：Ctrl+Enterで追加プロンプト送信

カードに付いているプロンプト入力欄にテキストを入れてCtrl+Enterを押すと、tmuxセッション内のclaude CLIに対して標準入力経由でメッセージが流し込まれる。これはサーバー側でtmux send-keys -t <session> "<text>" Enterを呼ぶだけのシンプルな実装だが、ユーザー視点では「カンバン上のカードがそのままチャット欄になる」体験になる。

File Upload：ドラッグ＆ドロップで添付

カードに直接ファイルをドラッグするか、FILEボタンで添付できる。サーバーは受け取ったファイルをプロジェクトディレクトリ配下の一時パスに保存し、tmux send-keysで@<filepath>形式の参照をエージェントに送る。Claude CLIが@パスを画像・ドキュメントとして自動展開するため、スマホで撮ったスクリーンショットを送って「このエラーをデバッグして」と書くだけで動くような体験が成立する。

Auto-discovery：既存セッションを取り込む

agent-viewerは起動時と定期ポーリングでtmux list-sessionsを叩き、claudeを起動しているセッションを検出する。ターミナルから手で立てたセッションも、agent-viewerを後から立ち上げれば自動でカード化される。これは「普段はターミナルで仕事していて、たまにカンバンを見たい」という運用にもピタリとはまる。

Re-spawn：完了済みカードからの再起動

Completed列のカードは「同じプロジェクトディレクトリ＋新しいプロンプト」で再spawnできる。タスクの繰り返し（テスト→修正→再テスト）をワンクリックで回せる。

アーキテクチャ：薄いNode.jsサーバーとtmuxの分業

agent-viewerのアーキテクチャは、Node.jsサーバーとtmux CLIの極めて薄い接続層として理解できる。

flowchart LR Browser[Browser/Mobile
Kanban UI] -->|WebSocket
HTTP| Server[Node.js Server
localhost:4200] Server -->|tmux new-session
send-keys
capture-pane| Tmux[tmux server] Tmux -->|spawn| Claude1[claude CLI
session A] Tmux -->|spawn| Claude2[claude CLI
session B] Tmux -->|spawn| Claude3[claude CLI
session C] Mobile[iPhone
Tailscale] -.->|WireGuard E2E| Browser

「サーバーはtmuxの薄いProxyに過ぎない」という設計が、運用上の以下の特性を生む。

  • サーバー再起動でエージェント作業は途切れない（tmuxセッションは独立して生存）
  • tmux attachで同じセッションに直接入っても、agent-viewerと矛盾しない
  • 別マシンに乗っているtmuxは管理対象外（同一ホスト前提）
  • メモリ・CPUコストはNode.jsサーバー1本分のみ（数十MB）。各エージェントの計算資源は普通のtmuxセッションが消費する

比較：agent-viewer vs ruflo vs Claude Code Sub-agent vs OpenHands

「Claude Codeで並列運用」と一括りにされがちだが、目的が違うツールが乱立している。位置づけを整理する。

ツール 抽象レイヤー 主な目的 状態管理 規模感 スマホ対応
agent-viewer UI層 人間が並列エージェントを目視・操作 tmuxに委譲（ステートレス） 1〜20体 ◯（Tailscale）
ruflo オーケストレーション層 エージェント同士の自動協調 AgentDB（HNSWベクトル） 100体〜 △（CLI経由）
Claude Sub-agent セッション内層 親エージェントが子を呼ぶ セッションスコープ 1セッション内 ✕（CLI）
OpenHands 実行環境層 Sandboxed Dockerでエージェント実行 コンテナ単位 1〜10体 △（Web UI）

つまりagent-viewerは「人間がカンバンで監督する」レイヤー、rufloは「群知能が自動協調する」レイヤー、Sub-agentは「1つの会話の中で親子関係を作る」レイヤー、OpenHandsは「コンテナで安全に実行する」レイヤーで、併用が可能だ。

実例として、こんな構成が成立する。

  • agent-viewerで「リファクタリング班」「テスト班」「ドキュメント班」のカードを3枚spawn
  • 各カードの内側は普通のClaude Codeで、必要に応じてSub-agent機能で子を呼ぶ
  • 大規模な調査タスクが発生したらrufloスウォームに委譲する

スマホからの操作という観点ではagent-viewerが圧倒的に強い。Tailscale経由でiPhoneのSafariからhttp://<machine-name>:4200を開けば、出先でも進捗確認・追加指示が可能になる。

インストールと起動：5分で動かす

公式READMEに沿った手順を、運用上の注意点付きで再構成した。

1. 前提のインストール（macOS）

# Homebrewで一発
brew install node tmux

# Claude CLI（Anthropic公式）
npm install -g @anthropic-ai/claude-code

# 動作確認
node --version   # v18以上
tmux -V          # tmux 3.0以上
claude --version # Claude CLIが動くこと

claudeにあらかじめログイン（claude login）して認証トークンを入れておくこと。エージェント側でログイン画面に止まると、agent-viewerは出力を待ち続けるだけになる。

2. agent-viewerのセットアップ

git clone https://github.com/hallucinogen/agent-viewer.git
cd agent-viewer
npm install
npm start

ターミナルにServer listening on http://localhost:4200と出れば成功。ブラウザで開くとカンバンが表示される。

3. 同一LAN・スマホからアクセスする場合

# ホストアドレスを 0.0.0.0 に変更
HOST=0.0.0.0 PORT=3000 npm start

これで他のPC・スマホ（同一LAN内）からhttp://<MacのIP>:3000にアクセスできる。ただし認証が無いため、社外Wi-Fiやカフェのネットワークで起動するのは絶対にNG。Tailscaleを使うのが原則だ。

4. Tailscale経由でグローバルにアクセス

# Tailscaleインストール
brew install tailscale
sudo tailscale up

# Tailscale IPの確認
tailscale ip -4
# → 100.xxx.xxx.xxx 形式のIPが表示される

iPhone側にもTailscaleアプリを入れて同じアカウントでログインしておけば、Safariでhttp://<machine-name>:4200またはhttp://<tailscale-ip>:4200にアクセスできる。WireGuardのE2E暗号化が効いており、tailnet外からは到達不能だ。

Tailscale Funnel（公開機能）の使用は推奨しない

Tailscale Funnelを使えばインターネット全体に公開できるが、agent-viewer自体に認証がないため、URLが漏れた瞬間にエージェントを乗っ取られる。社内LAN・tailnet内に閉じる前提で運用すること。Funnelで公開する必要があるなら、必ず手前にcaddy・nginxでBasic認証を噛ませる。

実用フロー：1日の使い方を時間軸で

朝、コーヒーを淹れながらMacを開く。Tailscaleで自宅サーバーに繋がるので、agent-viewerサーバーは前日から起動しっぱなし。

# 前日からの状態確認（昨夜寝る前に投げたタスクの結果）
open http://my-mac.tailnet:4200

ブラウザを開くと、Completed列に夜中に終わった3つのカードが並んでいる。VIEW OUTPUTでログを確認し、そのまま「このPRをドラフトで出して」とCtrl+Enterで追加指示。

午前中、出社中の電車内でiPhoneのSafariから同じURLを開く。Running列のリファクタリング班が止まっていたので、エラー画像をスマホで撮ってドラッグ＆ドロップ→「このエラーで止まってる、解決策を提案して」と送信。

職場到着後、[+ SPAWN]で新規タスク3本を立ち上げる。プロジェクトパスは~/code/api-server、プロンプトは「feature/paymentブランチのテストを全部書き直して」など。それぞれ別tmuxセッションで動き始める。

昼休み、Idle列に落ちたエージェントにファイルをアップロードして再開。退勤前にCompleted列のものはコミット&プッシュをClaude Codeに直接指示。退勤後はサーバーは動いたままなので、寝る前に追加指示を送れば朝にはまた終わっている。

この一連のフローが、tmuxの直接操作に詳しくなくても回る。それがagent-viewerの一番の価値だ。

周辺ツールとの比較：いつ何を選ぶか

Claude Code並列運用の選択肢は他にも増えている。

  • 単なるtmuxの上にClaude Codeを並列運用する基本パターンを組むなら、tmuxinator+tmux-resurrectの組み合わせでもそれなりに回る。エージェント間連携が不要で1人運用なら、これでも十分。
  • スウォームの自律協調が欲しいなら、ruflo（旧Claude Flow）。100体規模の並列をAgentDBで状態管理したい場合のデファクト。
  • 「目で監督する」層が欲しいならagent-viewer。複雑度を最小に保ったまま、並列5〜20本の運用を仕事として成立させる。

agent-viewerの強みは「やらないことを徹底している」点にある。永続DBもLLMもオーケストレーションも持たない。tmuxセッションのProxyに専念し、その上で人間の運用体験を磨いた。Unix哲学的に正しいOSSである。

注意点・限界

実運用前に知っておきたい点を列挙する。

  • 認証なし：tailnet・社内LANに閉じることが前提。インターネット直公開は厳禁。
  • ライセンス不明：2026年5月時点でLICENSEファイルなし。OSSの慣例上、明示ライセンスがないコードは著作権法のデフォルトで保護されるため、フォーク公開や商用化前にメンテナへ確認すること。
  • 同一ホスト前提：別マシンのtmuxは管理対象外。複数マシンを束ねたい場合はSSH経由でtmuxセッションをトンネリングする工夫が必要。
  • Claude CLI専用：他のCLIエージェントには未対応（既存tmuxセッションは検出される）。
  • 状態の真実はtmux：UIのバグ・サーバークラッシュ時はtmuxに直接attachして対応する習慣をつけておく（tmux attach -t <session-name>）。
  • ログのローテーション：tmuxバッファは無限ではないため、長時間走るエージェントの初期ログは消える。重要な決定の証跡が必要な場合は、Claude Code側に「決定ログをファイルに書く」よう指示する運用を併用する。

まとめ

agent-viewer選定の意思決定

  • ✅ Claude Codeを5〜20本並列で走らせている／走らせたい
  • ✅ 出先のスマホからもエージェントの進捗確認・追加指示をしたい
  • ✅ tmuxの直接操作を覚えるコストを下げたい
  • ✅ 状態管理は単純な方が良い（Web UIに状態を抱え込ませたくない）
  • ⚠️ ただしインターネット直公開は厳禁（Tailscale等で閉じる）
  • ❌ エージェント間の自動協調が欲しいならrufloを併用
  • ❌ Sandboxedな実行環境が欲しいならOpenHands側にspawn

agent-viewerは「Claude Code並列運用の人間UI」というニッチに、驚くほどシンプルな設計で答えた。永続DBもLLMもオーケストレーションも持たず、tmuxという既存資産の上に薄いProxyを置いただけ。それがゆえに状態管理は破綻しないし、サーバー再起動でも作業は途切れない。Claude Codeを「仕事として」並列運用するなら、いまもっとも費用対効果の高いビューレイヤーである。

セットアップは5分で終わる。brew install node tmux && npm install -g @anthropic-ai/claude-codeから始めて、まず1本のtmuxセッションをカンバンで監視するところから試してみてほしい。

参照ソース