Herdr.appのmodを色々つくってみた

Herdr.appとは

Herdr は、コーディングエージェントを動かすためのアプリです。
これまではtmuxみたいな感じでterminal上で動くアプリだったのですが、GUIのアプリとしてリニューアルされました。ちなみに、これまでのやつはHerdr TUIと呼ばれるようになり引き続き使えるようです。
自分はこれまで ghostty 上で Herdr TUIを使っていましたが、早速GUIアプリ版の Herdr.app に乗り換えてみました。
GUIアプリになってサイドバーやパネルなどの UI を mod と呼ばれる拡張で差し替えたり足したりできるようになったり、layoutという仕組みで柔軟に配置が決定できるようになりました。

所感

使ってみると、この mod という仕組みがめちゃ便利でした。
できることは多いし、何よりエージェントによるデバッグがめちゃ楽。
コマンドからアプリ自体をエージェントが直接参照できるので、簡単にバグの少ない mod が作れちゃいます。

公式サイトのmod一覧にはリリースから１週間くらいしか経ってないのに今日時点で600くらいmodが登録されてました。（Githubのリポジトリにタグを付けるだけで登録できるのも多分登録数の激増に寄与してる。）
あと、packageのシステムもないのが今時だな〜と思いました。
もう今時サプライチェーンとか怖いからそのまま入れるより、エージェントに設計だけ見させて再実装するくらいでいいなと。結局自分しか使わないし。

mod を作った

個人的に欲しかった機能をいくつか mod として自作したので、紹介できそうなやつを8個ざっくり紹介します。

定型文を入れる（cmd-i）

定型文のポップアップで「push」と打って絞り込み、選んだ文を入力欄に入れる

まず最初、めちゃくちゃ簡単なやつなのですが、
「コミットして」「レビュー対応して」など、エージェントによく送る文をポップアップから選んで入力欄に入れます。

変更したファイルを開く

未コミットのファイルを一覧にし、選んだファイルの差分を Changes パネルに出す

今いるスペースのリポジトリで、まだコミットしていないファイルを一覧で表示します。
Enter で Changes パネルにそのファイルの差分を出し、Shift+Enter なら emacs -nw、Cmd+Enter なら emacsclient で開きます。

差分の表示とコメント送信機能

差分の行をクリックしてコメントを付け、Submit review でエージェントへ送る画面を出す

vytasgavelis/herdr-reviewer をもとにしたレビュー用のパネルです。簡易版Plannotatorみたいなやつです。差分の行をクリックするとコメントを付けられ、「Submit review」でコメントと該当する行をまとめてエージェントに送れます。エージェントの変更に、PR のレビューと同じ感覚で指摘を返せます。
当然Emacsバインド(magit-diffのバインド)にしてます。

選択したパスを Emacs で開く

grep の結果から src/checkout.ts:6 を選択し、右のペインの Emacs で6行目を開く

ターミナルで src/checkout.ts:6 のようなパスを選択して cmd-shift-e を押すと、右に新しいペインを開き、emacs -nw でその行を表示します。grep の結果やエージェントの出力から、すぐにコードを見に行けます。

ペインを均等に分割する

cmd-d を3回押すと、4つのペインが同じ幅に並ぶ

Herdr.app の分割では、分割したペインが半分の幅になります。続けて分割すると幅がばらばらになるので、ペインを増やしたり減らしたりするたびに、並んでいるペインの幅を揃えるようにしました。

worktree を開く・消す

worktree の一覧を絞り込んで開き、Ctrl+D を2回押して worktree を消す

ghq で管理しているリポジトリの worktree を一覧にし、選ぶとその worktree のスペースを開きます。Ctrl+D を2回押すと gwq remove で worktree を消し、その worktree を表示しているスペースも閉じます。

AI の使用量を表示する

サイドバー下部のメーターをクリックし、Claude・Codex・GitHub Copilot の使用量のパネルを開く

Claude、Codex、OpenCode Go、OpenRouter、GitHub Copilot の使用量を、サイドバーの下に表示します。クリックすると、リセットまでの時間や Extra Usage も含めた詳細が開きます。

認証周りはOpenUsage を参考に、見た目は herdr-usage-status を参考に実装してもらってます。
リモートのマシンのスペースを開いているときは、そのマシンの認証情報で表示するようにしたので、リモートマシンの使用量が見えるようになってます（これがめちゃ便利。OpenUsageだとできなかった。）

スペース名を省略せずに表示する

左が標準のサイドバー、右が mod のサイドバー。右では長い worktree 名がサイドバーの幅いっぱいまで表示される

なぜか標準のサイドバーでは、スペース名が150pxで切れるので、worktree のブランチ名がほとんど読めませんでした。
標準の spaces mod を複製し、空いている幅いっぱいまで名前を表示するようにしています。
こんなのも変更できちゃうんですね。

おわりに

mod は JavaScript で書けて、herdr-app check で型チェック、herdr-app shot で画面の確認ができます。エージェントが自分で動作を確かめながら作れるので、ちょっとした不満をその場で mod にしやすかったです。