TL;DR

레포 종류는 독립 실행형 시각화 도구이며 선택적 VS Code extension과 npx 배포를 함께 제공하는 프로젝트입니다. Claude Code와 Codex 런타임의 이벤트를 수집해 실시간 노드 그래프, 타임라인, 트랜스크립트로 표시하며 npx agent-flow-app 또는 pnpm run dev로 바로 실행할 수 있습니다. Node.js 20+, pnpm, Claude Code CLI가 필요하고 AGENT_FLOW_RUNTIME/CODEX_HOME 등 환경 변수로 런타임을 제어할 수 있으므로 Claude Code나 Codex 기반 에이전트의 동작을 가시화·디버깅하려는 개발자에게 적합합니다.

핵심 포인트

• 레포 종류와 생태계 관련 문제는 에이전트 실행 흐름이 대부분 블랙박스라는 점입니다. 이 레포는 독립 실행형 웹 앱과 VS Code extension 형태로 제공되어 Claude Code 및 Codex 세션을 실시간으로 시각화하는 도구로 동작합니다. npx agent-flow-app으로 브라우저에서 바로 띄울 수 있고, VS Code 패널이나 로컬 dev 서버(pnpm run dev)로도 동일한 이벤트 스트림을 확인할 수 있다는 점이 근거로 제시되어 있습니다.
• 작동 방식은 에이전트가 생성하는 이벤트를 수집해 노드 그래프와 타임라인으로 변환하는 흐름으로 구성됩니다. Claude Code는 lightweight HTTP hook server로 이벤트를 스트리밍하고 Codex는 ~/.codex/sessions/**/rollout-*.jsonl 파일을 tailing해서 툴 호출과 토큰 카운트를 읽어 옵니다. 이러한 입력을 SSE(event relay)를 통해 Next.js 웹뷰와 VS Code webview로 전달해 실시간으로 노드, 분기, 툴 호출 및 트랜스크립트를 표시한다는 점이 README와 스크립트 목록에서 확인됩니다.
• 설치·실행 관련 제약과 구성 방법은 Node.js 20+, pnpm, Claude Code CLI를 요구한다는 점이 중요합니다. 개발 절차는 git clone → pnpm i → pnpm run setup → pnpm run dev 흐름으로 정리되어 있고, 배포용으로 pnpm run build:* 스크립트들이 제공됩니다. 환경 변수로 AGENT_FLOW_RUNTIME이나 CODEX_HOME을 설정해 감시할 런타임을 제한하거나 Codex 경로를 지정할 수 있어 다양한 로컬 구성에 대응합니다.
• 프라이버시와 운영 차이는 배포 방식에 따라 달라집니다. 공개 npx 바이너리는 opt-out 익명 텔레메트리를 기본으로 활성화하지만 개발 모드(pnpm run dev)와 VS Code extension은 아무 것도 전송하지 않으며 AGENT_FLOW_TELEMETRY=false 또는 DO_NOT_TRACK=1로 완전 비활성화할 수 있습니다. 텔레메트리 페이로드와 스키마는 extension/CHANGELOG.md 및 scripts/telemetry.ts에서 확인할 수 있어 감사와 규정 준수가 용이합니다.

이미지 분석