Written by AI as draft

terminal-browser のコアはどこにあるか — Pixel、CDP、chaosbringer の構成

terminal-browser は、文字でページを近似するブラウザではない。Chromium が描いたページをターミナルに表示し、ターミナルからのマウス・キーボード入力をブラウザへ渡すアプリである。表示には Kitty graphics protocol を使う。公式 README

この仕組みを再利用したい場合、描画エンジンを terminal-browser から改めて抜き出す必要はない。中核は既に @zenbu-labs/pixel として分かれている。

3つの層

ユーザーのターミナル
  ↑ 画面のピクセル / ↓ マウス・キーボード
@zenbu-labs/pixel ── Electron / Chromium の WebView
  ↑ WebView を配置
terminal-browser ── タブ、アドレスバー、CLI、接続先の登録
  ↑ CDP で同じタブを操作
chaosbringer などのエージェント

層	担当
`pixel`	Electron の WebView、画面の描画、ターミナルへの表示、入力転送。React API の `createRoot` と `WebView` を提供する。
`terminal-browser`	`pixel` の上にブラウザ UI、タブ管理、設定、録画、CLI を組み立てる。CDP ポートとタブの ID も外部へ公開する。
エージェント側	CDP で既存タブへ接続し、ページを操作する。ユーザーには同じタブの変化が見える。

terminal-browser は起動時に CDP ポートを確保して Electron に渡す。起動コードセッションは pixel の createRoot を作り、UI 内に WebView を配置する。セッション / タブ表示

各タブは CDP の Target.getTargetInfo から targetId を取得する。タブ管理 terminal-browser ls --all --json は cdpPort と targetId を返すため、外部プロセスは表示中のタブを特定できる。一覧の実装

最小ブラウザはどれくらい小さいか

単一ページをターミナルに出すだけなら、アプリ側は次の形まで縮む。pixel のランタイムが Electron の起動や WebView の配置を引き受ける。Pixel の createRoot 実装

// preview.cjs
const { createRoot } = require("@zenbu-labs/pixel");
createRoot({ name: "preview" }).loadURL("http://localhost:3000");

pnpm add @zenbu-labs/pixel react
pnpm exec pixel ./preview.cjs

Kitty graphics protocol に対応したターミナルで実行する。pixel@0.0.15 の最小コードを cmux で起動し、CDP の /json/list にページが現れることを確認した。ただし、ソースの短さと配布物の軽さは別で、実行には Electron とネイティブ部品が必要になる。

ユーザーに見せながらエージェントで操作する

ブラウザ UI と接続先の自動検出も欲しい場合は、terminal-browser をそのまま使える。アプリの開発サーバーを起動した上で、別々のターミナルタブで実行する。

# 表示用タブ。このプロセスは開いたままにする
terminal-browser open http://localhost:3000

# エージェント側のタブ
chaosbringer --url http://localhost:3000 --terminal-browser

chaosbringer は terminal-browser ls --all --json から URL に合うタブと CDP ポートを探し、Playwright の connectOverCDP で接続する。巡回中はそのタブが遷移し、終了時には接続を切るが、タブ自体は閉じない。実装 / 使い方

同じサイトのタブが複数あって自動選択できない場合は、terminal-browser ls --all --json で値を確認し、--cdp <port> --cdp-target <targetId> を指定する。--url には表示中タブと同じホスト名を使う。巡回は指定 URL へのナビゲーションから始まるので、現在のページ内だけにある一時的な状態は引き継がない。ユーザーが同時に操作する場合は、エージェントの操作と競合し得る。

切り出しの判断

描画・入力の再利用が目的なら、既存の pixel が切り出し済みのコアである。エージェント向けの小さな専用ビューアが必要なら、pixel の単一 WebView に、CDP ポートとタブ ID を公開する薄い層を足せばよい。タブ UI や録画まで必要なら terminal-browser を使う方が早い。

mizchi/terminal-browser-architecture-ja.md

Select an option

No results found