alchaincyf/fanbox

vibe coding 的驾驶舱:左边文件,右边/下边终端,中间看清每一次改动。 / The cockpit for vibe coding: browse files on the left, command agents on the right, watch every change in between.

何を解決するか

FanBoxは、AIコーディングエージェント(Claude CodeやCodexなど)を使って迅速にプロトタイプを開発する開発者向けに設計されています。AIの分散("AI sprawl")という問題を解決します。これは、複数のAI生成プロジェクトがローカルファイルシステムに散在しており、どのファイルが変更されたか、現在のプロジェクトの状態は何か、また異なるエージェントセッション間を切り替えるにはどうすればよいかが把握しづらい状況です。

どう動くか

FanBoxは、ファイルブラウザ、実際の埋め込み端末、ライブプレビュー画面を1つのインターフェースに統合する「コックピット」として機能します。ファイルシステムを監視することで、エージェントがファイルを変更したときに視覚的なフィードバックを提供し、ユーザーがAIの進捗をリアルタイムで追跡できるようにします。公式のフックを通じて、端末ベースのエージェントと直接統合され、エージェントが作業中か、入力を待機中か、タスクを完了したかを正確に検出できます。

対象ユーザー

ローカルでプロジェクトを構築するために端末ベースのAIコーディングエージェントに依存する開発者や「ビームコーディング」を行う人々。複数のウィンドウを切り替えることなく、エージェントの出力を簡単に検索・プレビュー・管理できる方法が必要な人向けです。

特徴

  • エージェント対応ファイルブラウザ:エージェントがファイルを変更すると、ファイルカードが光り、波紋が広がります。また、「フォローモード」では、現在編集中のファイルに自動スクロールしてプレビューします。
  • 統合端末node-ptyxterm.js を使用した完全な端末。ファイルをドラッグしてコンテキストを提供でき、クリック可能なファイルパスもサポートしています。
  • セッション管理:プロジェクトのメモリを追跡し、過去のセッションや各セッションで変更されたファイルを記録。Claude Codeなどのエージェントに対してワンクリックで「再開」できる機能を備えています。
  • ラウンドベースの差分比較:1つのエージェント「ラウンド」で行われた変更を確認する専用パネル。並べて表示される差分(side-by-side diffs)と、特定のファイルや全体のラウンドを元に戻す機能を備えています。
  • 豊富なプレビュー機能:Markdown、HTML、画像、PDF、動画の組み込みレンダリングをサポート。Markdown用のNotion風WYSIWYGエディタも搭載しています。
  • AI駆動の整理機能:メタデータに基づいてクリーンアップ計画を提案し、散らばったAIプロジェクトを整理するのを支援します。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト