メインコンテンツへスキップ

Documentation Index

Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt

Use this file to discover all available pages before exploring further.

チャットウィンドウ内でBRICKSアプリケーションをプレビューします。プレビューペインはコンパイル済みプロジェクトを組み込みウェブビューとして実行し、ファイルの変更を自動的に反映し、BRICKS CLI のChrome DevTools Protocol (CDP) エンドポイントを公開します。

プレビューを開く

入力バーのプレビューボタンをクリックします。ペインはチャットパネルの右側にマウントされ、バックグラウンドでプロジェクトのコンパイルを開始します。 ペインが開くと、CTORは bun typecheck に続いて bun compile.ts を実行し、application.json のステージ(productionbeta、または development)を使用してアプリケーションを組み込みウェブビューに読み込みます。
プレビューには bun のインストールと PATH での利用可能性が必要です。

ペインコントロール

ペインのヘッダーには3つのボタンがあります:
ボタン操作
更新ウェブビューをリロード
ポップアウトアプリ内の新しいウィンドウでプレビューを開く
閉じる×ペインを閉じてバックエンドを停止
タイトル横の小さなバッジにアクティブなステージが表示されます。

差分ビューとのレイアウト

差分ビューとプレビューペインの両方が開いている場合、右側の共有カラム内に縦に積み重ねられます。それらの間のハンドルをドラッグして分割を調整します。カラムの左端のハンドルをドラッグして、カラムとチャットエリアの比率を調整します。

ライブ再コンパイル

ペインはプロジェクトの変更を監視します:
  • subspaces/ 下のファイルを保存すると、bun compile.ts 経由のデバウンスされた再ビルドがトリガーされます。
  • .bricks/build/application-config.json の変更は、完全なリロードなしに実行中のウェブビューにプッシュされます。

ポップアウトウィンドウ

ポップアウトをクリックすると、プレビューが独自のフレームレスなアプリ内ウィンドウに分離されます。新しいウィンドウはバックエンドセッションを維持します — チャット側のペインを閉じたり、セッションを切り替えたり、プロジェクトを切り替えても、ポップアウトされたプレビューは停止しません。ポップアウトウィンドウ自体を閉じるとセッションが解放されます。

描画モード

ペインヘッダーの Draw をクリックすると、実行中のプレビューの上にペンキャンバスがオーバーレイされます。プレビューコンテンツの上に直接スケッチでき — ずれている要素を囲んだり、対象範囲をマークしたり、ちょっとしたメモを残したりした上で、Save をクリックすると注釈付きスクリーンショット(プレビュー内容とストロークを単一画像に合成したもの)がチャット入力に添付されます。 描画モードはインラインペインとポップアウトプレビューウィンドウの両方で利用できます。ポップアウトウィンドウから保存した画像は、自動的にメインウィンドウのチャット入力へ転送されます。

CDPと bricks devtools

プレビューの実行中、CTORはCDPサーバーを起動し、プロジェクトディレクトリの .bricks/devtools.json に探索情報を書き込みます。BRICKS CLI はこのファイルを読み取り、ターミナルから実行中のプレビューを検査します。 プロジェクトディレクトリ内から:
bricks devtools scan        # ローカルプレビューを自動探索
bricks devtools brick tree  # ブリックコンポーネントツリーを確認
完全なサブコマンドリスト(brickinputnetworkruntimescreenshotstorage)は bricks devtools --help で確認できます。 ペインを閉じると探索ファイルが削除されます。

セッションの切り替え

別のチャットセッションに切り替えると、プレビューペインが自動的に閉じられてバックエンドが停止するため、前のプロジェクトの古いCDPサーバーが残りません。