チャットウィンドウ内でBRICKSアプリケーションをプレビューします。右パネルのプレビュータブはコンパイル済みプロジェクトを組み込みウェブビューとして実行し、ファイルの変更を自動的に反映し、BRICKS CLI のChrome DevTools Protocol (CDP) エンドポイントを公開します。
プレビューを開く
右パネルの +（新しいタブ）メニューからプレビュータブを追加します。タブはバックグラウンドでプロジェクトのコンパイルを開始します。
タブが開くと、CTORは bun typecheck に続いて bun compile.ts を実行し、application.json のステージ（production、beta、または development）を使用してアプリケーションを組み込みウェブビューに読み込みます。
プレビューには bun のインストールと PATH での利用可能性が必要です。
ペインコントロール
タブのツールバーには以下のボタンがあります：
| ボタン | 操作 |
|---|
| DevTools | プレビューのインスペクタを下部パネルとしてドッキング |
| 更新 | ウェブビューをリロード |
| ポップアウト | アプリ内の新しいウィンドウでプレビューを開く |
右パネルでのレイアウト
プレビューは、差分、コントローラー、DevTools タブと右パネルを共有します。一度に表示されるタブは 1 つだけです——タブバーまたは Cmd+1..9 で切り替えます。パネルの左端のハンドルをドラッグして、チャットエリアに対するサイズを調整します。
ライブ再コンパイル
ペインはプロジェクトの変更を監視します：
subspaces/ 下のファイルを保存すると、bun compile.ts 経由のデバウンスされた再ビルドがトリガーされます。.bricks/build/application-config.json の変更は、完全なリロードなしに実行中のウェブビューにプッシュされます。
ポップアウトウィンドウ
ポップアウトをクリックすると、プレビューが独自のフレームレスなアプリ内ウィンドウに分離されます。新しいウィンドウはバックエンドセッションを維持します — チャット側のペインを閉じたり、セッションを切り替えたり、プロジェクトを切り替えても、ポップアウトされたプレビューは停止しません。ポップアウトウィンドウ自体を閉じるとセッションが解放されます。
エージェント駆動のプレビュー
エージェントはスクリーンショットの取得と BRICKS Automation テストの実行にプレビュータブと同じプレビューランタイムを使用するため、エージェントが見るものはタブの表示と一致します。スクリーンショットが必要なときにタブが開いていない場合は、チャットの上にタブを被せず、バックグラウンドでプレビューを起動します — このとき入力バーに小さなアクセントドット付きのプレビューインジケーターが表示され、プレビューがバックグラウンドで実行中であることを示します。クリックするとプレビュータブが前面に出ます。
ビジョン対応モデルにはスクリーンショットがインラインで渡され、画像ファイルはプロジェクトにも書き出されるため、非対応モデルでもパスを参照できます。フォールバック画像認識モデルを設定すると、CTOR は各スクリーンショットもテキストとして説明するため、ビジョン非対応のモデルでもその内容に基づいて操作できます。
インタラクションを自動化として記録
実行中のプレビューを操作すると、CTOR は各ステップを記録します。プレビューペインのメニュー（≡ ボタン）を開き、Record Events as Automations をクリックすると、その記録を BRICKS Automation（E2E テスト）に変換できます。
CTOR はテストを黙って書き上げるのではなく、その自動化の作成を依頼するリクエストをチャット入力に事前入力します — 描画モード が結果を入力バーに渡すのと同じように、内容を確認してから送信します。リクエストには記録の内容がエージェント向けに記述されます。
- 実際のタイミング — 各ステップが実行された実際の時刻と、前のステップからの間隔が付与されるため、エージェントは一律の遅延ではなくステップ間の現実的なタイミングを再現できます。
- 名前付きの項目 — 各ステップが参照する Subspace、Brick、Generator、Canvas は、エディタ上のエイリアス（なければタイトル）に解決されるため、リクエストは不透明な id ではなくプロジェクト内の名前で読めます。
送信前にリクエストを編集して、ステップを削除したり並べ替えたりできます。エージェントは bricks-ctor の形式で自動化を記述し、プレビューでコンパイルして実行し、テストが通ることを確認します。
複数プロジェクトの同時実行
開いている各プロジェクトはそれぞれ独立したプレビューライフサイクルを保持するため、あるプロジェクトで起動したシミュレータは、別のプロジェクトを操作中も実行し続けます。表示されるプレビューペインは常に 1 つ（前面のプロジェクト）ですが、背景のシミュレータはエージェントによるスクリーンショット取得、CDP インスペクション、ポップアウトウィンドウのために稼働し続けます。
描画モード
ペインヘッダーの Draw をクリックすると、実行中のプレビューの上に注釈キャンバスがオーバーレイされます。ペインの下部にツールバーが表示され、次のツールを使えます：
| ツール | 操作 |
|---|
| ペン | フリーハンドの線 |
| 矢印 | ドラッグ開始点から離した点までの直線矢印 |
| 四角形 | 枠線のボックス |
| テキスト | クリックして再編集可能な複数行テキストを配置。既存のテキストをダブルクリックで編集 |
| 消去 | 図形の上をドラッグして削除 |
.bricks/devtools.json に探索情報を書き込みます。BRICKS CLI はこのファイルを読み取り、ターミナルから実行中のプレビューを検査します。
プロジェクトディレクトリ内から：
bricks devtools scan # ローカルプレビューを自動探索
bricks devtools brick tree # ブリックコンポーネントツリーを確認
brick、input、network、runtime、screenshot、storage）は bricks devtools --help で確認できます。
ペインを閉じると探索ファイルが削除されます。
セッションの切り替え
別のチャットセッションに切り替えたとき、プレビューペインが他のプロジェクトやセッションに属している場合は自動的に非表示になりますが、基盤のシミュレータは停止しません。ペインを所有するプロジェクトとセッションに戻ると再び表示されます。シミュレータの実行が不要になったら、ペインの閉じるボタンで明示的に停止してください。 
