alchaincyf/fanbox

해결하는 문제

FanBox는 Claude Code나 Codex와 같은 AI 코딩 에이전트를 사용하여 빠르게 프로토타입을 개발하는 개발자를 위한 것입니다. 여러 AI 생성 프로젝트가 로컬 파일 시스템에 흩어져 있어 어떤 파일이 변경되었는지, 현재 프로젝트의 상태는 무엇인지, 그리고 다른 에이전트 세션 간에 어떻게 전환해야 하는지 파악하기 어려운 'AI 스프레드' 문제를 해결합니다.

작동 방식

FanBox는 파일 브라우저, 실제 내장형 터미널, 실시간 미리보기 창을 하나의 인터페이스에 통합하여 '코크피트' 역할을 합니다. 파일 시스템을 모니터링하여 에이전트가 파일을 수정할 때 시각적 피드백을 제공함으로써 사용자가 AI의 진행 상황을 실시간으로 추적할 수 있게 합니다. 공식 훅을 통해 터미널 기반 에이전트와 직접 통합되어, 에이전트가 작업 중인지, 입력을 기다리는지, 작업을 완료했는지 정확히 감지할 수 있습니다.

대상 사용자

로컬에서 프로젝트를 구축하기 위해 터미널 기반 AI 코딩 에이전트에 의존하는 개발자와 '비임 코딩'을 하는 사람들. 여러 창을 오가지 않고도 에이전트의 출력물을 쉽게 찾아보고, 미리보기하고, 관리할 수 있는 간편한 방법이 필요합니다.

주요 기능

• 에이전트 인식 파일 브라우저: 에이전트가 파일을 수정하면 파일 카드가 빛나고 파문이 일며, '팔로우 모드'에서는 현재 편집 중인 파일로 자동 스크롤하고 미리보기합니다.
• 통합 터미널: node-pty와 xterm.js를 기반으로 한 완전한 터미널로, 파일을 드래그하여 컨텍스트를 제공하고, 클릭 가능한 파일 경로를 지원합니다.
• 세션 관리: 프로젝트 메모리(이전 세션과 각 세션에서 변경된 파일)를 추적하며, Claude Code와 같은 에이전트에 대해 한 번의 클릭으로 '재개'할 수 있는 기능을 제공합니다.
• 라운드 기반 차이점 비교: 한 에이전트 '라운드'에서 이루어진 변경 사항을 확인할 수 있는 전용 패널로, 양측 비교 차이점과 특정 파일 또는 전체 라운드를 되돌릴 수 있는 기능을 제공합니다.
• 풍부한 미리보기: Markdown, HTML, 이미지, PDF, 동영상의 내장 렌더링을 지원하며, Markdown용 Notion 스타일의 WYSIWYG 에디터도 포함되어 있습니다.
• AI 기반 정리 기능: 메타데이터를 기반으로 정리 계획을 제안하여 흩어진 AI 프로젝트를 정리하는 데 도움을 줍니다.