REPL 화면 — 메인 인터랙션 루프

REPL.tsx는 Claude Code의 메인 인터랙션 루프를 담당하는 단일 React 컴포넌트입니다. 5,000줄이라는 방대한 규모는 동시성 관리, 권한 큐, 원격 세션, 스웜 워커, 듀얼 렌더 모드, 세션 재개, 키보드 내비게이션 등 실질적인 복잡성을 반영합니다.

6계층 내부 구조

1. ~526-700줄: Props, 환경 가드, 마운트 시점 로깅
2. ~700-1200줄: 상태 선언 (useState, useRef)
3. ~1200-2700줄: 핵심 콜백 (setMessages, onCancel, getToolUseContext, onQueryEvent, onQuery, onSubmit)
4. ~2700-4100줄: 이펙트와 부가 시스템 (세션 재개, 큐 처리, 키보드 핸들러, 유휴 감지)
5. ~4100-4490줄: 트랜스크립트 모드 (가상 스크롤 레이아웃)
6. ~4490-5005줄: 메인 JSX 렌더 트리

onSubmit → onQuery → onQueryImpl의 3단계 체인으로 각 턴이 처리됩니다.

onSubmit

즉시 커맨드의 패스트 패스 처리, 유휴 복귀 게이트(75분 이상 시 대화상자 표시), 셸 모드 라우팅을 담당합니다. SessionStart 훅이 해결될 때까지 차단됩니다. 의존성 배열이 의도적으로 큽니다(약 25개 deps) — 하지만 메시지를 messagesRef.current를 통해 읽어 클로저 캡처를 방지합니다.

onQuery — QueryGuard 상태 머신

단순 boolean이 아닌 세대 카운터를 사용하여, 취소된 쿼리의 오래된 finally 블록이 새 쿼리 시작 후 상태를 손상시키는 것을 방지합니다.

onQueryImpl

Haiku 제목 추출(첫 메시지만), 스킬 범위 allowedTools, 병렬 비동기(시스템 프롬프트, 사용자 컨텍스트, 킬스위치 확인), onQueryEvent를 통한 스트리밍을 수행합니다.

경과 시간은 상태(state)가 아닌 ref를 사용하여 재렌더를 방지합니다. Ref 리셋은 useEffect가 아닌 첫 렌더에서 isQueryActive가 true가 되는 시점에 수행됩니다 — 경쟁 조건을 피하기 위함입니다.

getFocusedInputDialog()는 결정론적 우선순위에서 정확히 하나의 대화상자를 반환합니다:

1. message-selector
2. (타이핑 중 억제, 1.5초 디바운스)
3. sandbox-permission
4. 기타 권한
5. 온보딩
6. 콜아웃

Zustand 스타일 ref 패턴: messagesRef.current가 동기적으로 동기화됩니다. 3가지 일관성 메커니즘:

• 임시 진행 교체: 스트리밍 중 진행 메시지가 최종 결과로 교체
• 압축 경계 처리: 자동 압축 시 메시지 경계 관리
• 지연 렌더링: useDeferredValue로 무거운 재렌더를 지연

트랜스크립트 모드

VirtualMessageList를 통한 가상 스크롤링, 검색, 내비게이션. 긴 세션에서 가상 스크롤 없이 약 250MB 할당이 발생하므로 성능상 필수입니다.

프롬프트 모드

표준 인터랙티브 대화 모드.

세션 재개

메시지 역직렬화부터 contentReplacementState 재구성까지 15개 순차 단계. 오래된 에이전트 이름 상속을 방지하기 위해 복원 전 메타데이터를 클리어합니다.

인터럽트 시 자동 복원

Escape로 취소 시 의미 있는 출력 없이 취소되면 대화가 되감기고 입력이 복원됩니다. 5개 가드가 적용됩니다. queryGuard.end() 바깥에서 실행됩니다 — onCancel이 forceEnd()를 호출하기 때문입니다.

AlternateScreen
  └─ KeybindingSetup
      └─ AnimatedTerminalTitle // 격리된 960ms 틱
      └─ GlobalKeybindingHandlers
      └─ ScrollKeybindingHandler
      └─ CancelRequestHandler
      └─ MCPConnectionManager
      └─ FullscreenLayout
          ├─ scrollable: 메시지 목록
          ├─ bottom: 프롬프트 입력
          ├─ overlay: toolJSX
          └─ modal: 대화상자