Beads (bd) 向けローカル Web UI

エージェントが Beads に残した記録をブラウザでレビュー。

エージェントが立てた計画、記録した決定、Mermaid 図やスクリーンショット、diff、人への質問をブラウザで確認・編集できます。ターミナルでの bd 作業ともそのまま連携します。

いま画面の締め切り一覧とボトルネックを確認し、今日締め切りのイシューの blocks グラフ、Mermaid シーケンス図の拡大、添付スクリーンショット、置き換えられた決定までたどるデモ動画です。

Beads workspace ですぐに開始

npm でグローバルインストール

$npm install -g @seungyeop-lee/beads-desk

ローカルサーバーを起動してブラウザを開く

$bd-desk start --open

主な機能

bd CLI の流れを崩さずエージェントの作業をレビュー

すべての読み取りと更新は bd CLI を通じて行われ、ターミナルで bd を使って変更した内容も数秒以内に開いているタブへ反映されます。

Issues

すべてのイシューを作業状態ごとに表示

進行中、着手可能、ブロック中、保留、クローズのタブでイシューを整理し、ボトルネック表示へもすぐ切り替えられます。

種類、ラベル、作成日・クローズ日、epic 未所属のみで絞り込み、所属するエピックへ直接移動できます。
ID、タイトル、本文、コメントまで検索し、一致した箇所をその場で確認できます。
ステータスと優先度を一覧から直接変更できます。

作業状態タブ、フィルター、種類タグ、ステータス・優先度チップ、エピックリンクを表示するイシュー画面 — 作業状態タブと各種フィルター、直接編集を備えたイシュー画面

Now & Bottlenecks

期限の近い作業と先に解除すべきボトルネックを把握

いま画面で締め切りが近いイシューを追い、ボトルネック表示でほかの作業を止めているイシューを影響順に見つけます。

Now は締め切りのあるオープンのイシューを期限切れ、今日締め切り、3日以内に整理します。
Bottlenecks は待っているイシューが多い順に並べ、関連する締め切りとクローズ時に着手可能になる件数を示します。
進行中・着手可能・ブロック中の件数、直近7日間の推移チャート、エピック進捗バーも同じ画面で確認できます。

期限切れ・今日締め切り・3日以内のイシュー、待ち件数順のボトルネック、エピック進捗バーを表示するいま画面 — 締め切りグループ、ボトルネック順位、7日間チャート、エピック進捗をまとめた画面

Graph

計画を段階ごとのグラフでレビュー

blocks 依存関係によってエピックがどのように段階分割され、どこで human gate や外部要因が止めているかを確認します。

エピックの順序表示は blocks 関係からイシューを段階ごとに並べ、進行中の段階を明示します。
human gate やエピック外からブロックしているイシューも同じグラフ上に表示されます。
どのイシューからでも先行・後続グラフを開いて前後の依存関係を追跡できます。

エピックのイシューを5段階に配置し最終段階を human gate が止めている順序表示グラフ — 外部ブロッカーや human gate を含む段階別の順序表示グラフ

Attachments & Diff

図・ログ・JSON・diff をアプリ内で直接読む

エージェントが添付した Markdown ノート、Mermaid 図、スクリーンショット、録画、パッチファイルをツールを切り替えずに閲覧できます。

Markdown と Mermaid 図を描画しクリックで拡大。ローカル画像や .mp4・.webm 録画もイシュー内で再生できます。
.md、.txt、.log、.json、.jsonl は専用テキスト画面で開くか段落下にそのまま展開し、JSON は Pretty と原文を切り替えられます。
.diff と .patch ファイルは変更ファイルツリー、長い行の折り返し、単語単位の変更ハイライト付きで確認できます。

Mermaid シーケンス図、添付されたチェックアウト画面のスクリーンショット、段落下に展開されたノートと diff を示すイシュー詳細画面 — Mermaid 図、ローカル画像、段落下に展開したノートと diff

左側に変更ファイルツリー、右側に折り返し表示のパッチ内容を表示する diff 画面 — 変更ファイルツリーと行折り返しを備えた専用 diff ビューア

Decisions

設計上の決定と置き換え履歴を残す

decision タイプのイシューを専用画面に集め、有効な決定とクローズ済みの決定を整理します。

有効な決定とクローズされた決定を明確に分けて一覧表示します。
supersedes と superseded-by のリンクから、過去の決定が置き換わった経緯をたどれます。

有効な決定とクローズされた決定を分け supersedes と superseded-by リンクを表示する決定画面 — 置き換えリンクで決定の変遷を追える決定画面

Needs human

エージェントからの質問に回答する

human ラベル付きの質問と確認依頼 (human gate) を、それぞれがブロックしている作業と一緒に一覧します。

人の判断待ちとなっている質問や human gate を、後ろで待っている作業とともに確認できます。
この画面から直接応答またはクローズして、ブロックされていた作業をすぐに解除できます。
ブラウザ通知を有効にすれば、別のウィンドウで作業中でも新しい依頼に気づけます。

選択した human gate の応答入力欄とブロックされているタスクを表示する判断待ち画面 — ブロック中の作業を確認しながらその場で応答できる判断待ち画面

Activity

離席中の変更履歴をまとめて確認

workspace 全体の作成・クローズ・コメントに加え、events journal 有効時の編集・削除履歴を新しい順に追えます。

workspace で作成、クローズ、コメントされたイシューを新しい順に表示します。
bd config set events-journal true を有効にすると、説明・ステータス・タイトル・ラベルの編集や削除履歴も記録されます。
ここから前回見た記録の区切り線で、前回確認した位置をすぐに見分けられます。

作成・クローズ・コメント履歴と前回見た記録の区切り線を表示するアクティビティ画面 — 前回閲覧位置の区切り線で差分を素早く追えるアクティビティ画面

Hygiene

トラッカーを健全な状態に保つ

長期間放置されたイシュー、コミット言及済みの未クローズイシュー、推奨セクション不足、重複候補、クローズ可能なエピックを検出します。

放置イシュー、コミットに記載されたままのオープンイシュー、bd 推奨セクションが抜けたイシューを自動抽出します。
重複候補を見比べて、同じ画面から重複としてクローズできます。
配下がすべてクローズされ完了できる状態のエピックも一覧できます。

放置イシュー、重複候補、不足セクション、クローズ可能なエピック、孤立イシューをまとめた整理画面 — 重複整理やエピック完了漏れを防ぐ整理画面

そのほかの機能

Epics & Board
オープン・クローズ済みエピックの進捗を検索したり、ボード上でカードをドラッグして状態を変更できます。
サイドパネル
現在開いているイシューの横に関連イシューを並べて表示し、見比べながら確認できます。
タブごとの workspace 切り替え
1つのローカルサーバーで、ブラウザのタブごとに異なる bd workspace を同時に開けます。
3言語とライト・ダークテーマ
設定画面から日本語・英語・韓国語の UI とライト・ダークテーマを切り替えられます。

動作環境

ローカルの bd 環境があればすぐに使えます

対応 OS: macOS、Linux、Windows に対応しています。bd 1.3.1 を用いて macOS と GitHub Actions の windows-latest でテスト済みです。
Node.js: Node.js 22 以降が必要です。
bd CLI: PATH 上に bd が必要です。別の場所にある場合は BD_BIN 環境変数で指定します（Windows の npm インストール版は自動検出）。
Beads workspace: bd init を実行したディレクトリが必要です。

はじめに

一度インストールすればどの workspace でも起動できます

サーバーは 127.0.0.1 のみで待ち受けるためこのコンピューターからしか開けず、バックグラウンドで動作します。

01
グローバルパッケージをインストール
npm または pnpm でインストールします。
npm
```
npm install -g @seungyeop-lee/beads-desk
```
pnpm
```
pnpm add -g @seungyeop-lee/beads-desk
```
pnpm で初めてグローバルパッケージをインストールする場合は、先に pnpm setup を一度実行して新しいシェルを開いてください。
02
workspace でサーバーを起動
Beads workspace のルートまたはサブディレクトリで実行すると、その workspace を登録してブラウザを開きます。
CLI
```
bd-desk start --open
```

サーバーの操作

停止bd-desk stop: バックグラウンドで起動しているサーバーを停止します。
アップデートbd-desk restart: インストールコマンドを再実行してからサーバーを再起動します。
詳しいガイド: オプション、複数 workspace、ブラウザ通知、ローカルファイルリンク、トラブルシューティングは USAGE.ja.md をご覧ください。