<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="public/banner-dark.png" />
<img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/public/banner-light.png" width="480" alt="Cockpit" />
</picture>
</p>
<p align="center">터미널에서 벗어나 Claude Code를 위한 웹 UI.</p>
왜 필요한가 (Why)
Claude Code는 훌륭합니다. 하지만 터미널 앱입니다. 하나의 창, 하나의 기기, 포그라운드 전용입니다. Cockpit은 서버와 동일한 엔진으로 작동합니다: 세션은 서버에 유지되고, 브라우저는 단순히 뷰어 역할을 하며, 노트북을 닫아도 아무것도 죽지 않습니다.
구조는 간단합니다: 브라우저 ↔ Cockpit 서버 ↔ 실제 Claude Code CLI. 에이전트 루프를 재현하거나, 헤드리스 또는 유사 터미널을 통해 구동되는 실제 CLI가 아닙니다.
다음 네 가지 이점이 있습니다:
- 휴대폰에서 사용하는 Claude Code. 기차 안, 주방 등 브라우저만 열 수 있는 어디서든 답장할 수 있습니다. 책상에서 시작한 세션이 그대로 작동하고 있을 것입니다.
- 여러 세션을 동시에 실행. tmux 패널을 오가며 프로젝트를 전환할 필요가 없습니다. 상태 표시등은 어떤 세션이 작동 중인지, 대기 중인지, 유휴 상태인지를 보여주며, 채팅 뷰는
/clear 기능을 통해 긴 스레드가 전체 시각적 기록을 유지하도록 연결합니다.
- 전체 에이전트 루프를 통한 모든 모델 사용. 모델이 Claude든, OpenRouter 카탈로그에서 가져온 무료 모델이든, DeepSeek이든 관계없이 도구 사용(Tool use), 파일 편집, 권한 프롬프트가 동일하게 작동합니다. OpenAI 와이어 포맷만 지원하는 제공업체는 내장된 번역 프록시를 통해 처리되며, 추적(traces) 포함 여부도 고려됩니다.
- 스케줄에 따른 비상주 에이전트 (Unattended agents). cron 래퍼가 아닙니다: 각 작업은 자체 모델, 자체 도구 및 MCP 허용 목록, 그리고 시간 예산이 있는 격리된 실행(sandboxed run)이며, 인박스로 또는 휴대폰으로 직접 보고합니다.
세션 내부에서는 채팅 공간, 코드 변경 사항을 위한 diff 뷰어(분리 또는 인라인), 구문 강조가 적용된 파일 뷰어, 임베디드 터미널이 포함된 탭형 분할 패널 레이아웃을 제공합니다. Claude가 작업하는 동안 전송된 메시지는 서버 측에서 대기열화되어 턴이 끝날 때 전달되며, /btw는 별도의 도구 없는 Claude를 통해 빠르고 간단한 부가 질문에 답하여 실행 흐름을 방해하지 않습니다. 또한 모든 세션에 걸친 글로벌 검색(Ctrl+Shift+F), 위쪽 화살표로 검색 가능한 프롬프트 기록, 그리고 Claude가 계획을 제안할 때의 플랜 모드 승인 기능이 있습니다. 사이드바는 세션, 활성 검토, 파일 변경 사항, 파일 트리 등을 접을 수 있는 섹션으로 유지합니다.
모든 제공업체를 한곳에 모으세요. OpenRouter, OpenCode Zen, DeepSeek에 원클릭으로 연결하거나, 자체 보유한 모든 Anthropic 호환 엔드포인트 중 원하는 곳을 Cockpit에 지정할 수 있으며, 각각은 고유의 자격 증명을 가집니다. OpenRouter와 그 전체 카탈로그는 클릭만 하면 연결되며, 라이브 가격 및 무료 모델이 선택기(picker)에 바로 표시됩니다. 실제로 사용하는 소수의 모델로 목록을 정리한 다음, 200K 또는 1M 컨텍스트와 사고 수준(thinking level)을 갖춘 모델을 세션별 및 예약 작업별로 선택할 수 있습니다. 각 제공업체는 사용량 패널에서 자체 지출액이나 잔액을 추적합니다.
각 세션은 Stream 모드(헤드리스 JSON, 기본값) 또는 PTY 모드로 실행됩니다. PTY가 존재하는 이유가 있습니다: 구독 플랜이 프로그래밍 방식과 대화형 사용량을 다르게 청구하며, PTY는 Cockpit 세션을 대화형 측에 유지합니다. 세션별로 전환할 수 있습니다.
또한 일반적으로 직접 편집해야 하는 작업들(에이전트, 스킬, 훅, MCP 서버, 플러그인, CLAUDE.md 메모리)도 처리합니다. 이 모든 것은 UI에서 또는 대화형으로 편집 가능합니다: 내장된 Cockpit Assistant는 Cockpit 자체의 MCP 서버에 연결된 Claude 세션이므로,
PR 리뷰는 일급(first-class) 기능입니다. 조직을 선택하고, 저장소를 선택하고, PR을 선택하세요. Cockpit은 GitHub CLI를 통해 diff를 읽고, 해당 PR에 한정된 Claude 세션을 시작합니다. 한쪽에는 diff가, 다른 쪽에는 채팅이 있습니다. 활성 리뷰는 세션 옆 사이드바에 고정됩니다. 일상적인 git 작업도 여기서 가능합니다: 작업 중인 트리(working tree)를 검토하고, 커밋 메시지를 생성하며, 브라우저를 떠나지 않고 커밋 및 푸시할 수 있습니다.
**예약된 작업(Scheduled jobs)**은 서버가 제 역할을 하는 곳입니다. 프롬프트와 스케줄(cron 표현식 또는 간단한 간격)을 지정하고 이를 엄격하게 한정합니다: 자체 모델과 사고 수준, 접근이 허용되는 정확한 도구 및 MCP 서버, 실행 예산, 기록 보관 기간 등을 설정할 수 있습니다. 이 기능은 무인으로 실행되며, 각 실행 결과는 나중에 열어볼 수 있는 일반 세션 기록으로 남습니다. 결과물은 인박스에 도착하며, 선택적으로 Telegram이나 ntfy.sh로 푸시하여, 밤사이의 의존성 업데이트나 아침 PR 분류 작업이 자리를 비운 동안에도 휴대폰으로 전송됩니다.
TUI(Text User Interface)를 실행하는 방식대로 노트북에서 실행하거나, 홈 서버에 두고 휴대폰으로 접속할 수 있습니다. 어느 쪽이든 UI는 동일합니다.
스크린샷
<p align="center">
<a href="docs/screenshots/chat-view.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/chat-view.png" width="48%" alt="세션 사이드바가 있는 채팅 뷰" /></a>
<a href="docs/screenshots/session-settings.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/session-settings.png" width="48%" alt="세션별 설정 팝오버" /></a>
</p>
<p align="center">
<a href="docs/screenshots/scheduled-jobs.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/scheduled-jobs.png" width="48%" alt="예약된 작업 페이지" /></a>
<a href="docs/screenshots/pr-review.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/pr-review.png" width="48%" alt="diff와 채팅이 포함된 풀 리퀘스트 리뷰" /></a>
</p>
<p align="center">
<a href="docs/screenshots/message-search.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/message-search.png" width="48%" alt="전체 대화 기록 검색" /></a>
<a href="docs/screenshots/settings.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/settings.png" width="48%" alt="설정 페이지" /></a>
</p>
<p align="center">
<a href="docs/screenshots/context-usage.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/context-usage.png" width="48%" alt="컨텍스트 창 사용량 모달" /></a>
<a href="docs/screenshots/account-usage.png"><img src="https://raw.githubusercontent.com/alexjbarnes/cockpit/HEAD/docs/screenshots/account-usage.png" width="48%" alt="계정 사용량 모달" /></a>
</p>
빠른 시작 (Quick start)
또는 전역으로 설치:
npm install -g @alexjbarnes/cockpit
cockpit
시작 로그에서 사용 가능한 연결 URL(로컬 및 네트워크)을 출력합니다. 처음 실행 시 http://localhost:3001에 접속하여 비밀번호를 설정하세요.
필수 조건 (Prerequisites)
Linux와 macOS에서 테스트되었습니다. Windows는 미검증입니다.
구성 (Configuration)
| 변수 | 설명 | 기본값 |
|---|
PORT | 서버가 수신하는 포트 | 3001 |
| ... | | |
<br>Setting COCKPIT_CONFIG_DIR와 CLAUDE_CONFIG_DIR를 함께 설정하면 격리된 인스턴스를 나란히 실행할 수 있습니다. 전체 목록은 설정을 참조하세요. | | |
원격 접속 (Remote access)
Cockpit은 기본적으로 0.0.0.0에 바인딩됩니다. 호스트 머신에서는 http://localhost:3001에 접속하세요. 동일 LAN의 다른 장치에서는 호스트의 로컬 IP를 사용하십시오(시작 로그에서 사용 가능한 URL을 출력합니다).
Cockpit을 외부 LAN에서 사용하려면 포트 포워딩(port forwarding)보다 Tailscale을 사용하는 것이 좋습니다. Tailscale은 라우터 포트를 열거나 서버를 외부에 노출하지 않으면서 모든 장치에 플랫 네트워크상의 사설 IP 주소를 부여합니다.
Cockpit 사용을 호스트 머신으로만 제한하려면 HOST=127.0.0.1로 설정하세요.
문서 (Documentation)
- 세션 (Sessions): 채팅, 런타임 모드, 탭 레이아웃, 사이드바, 첨부 파일, 플랜 모드, diffs, 파일 보기, 프롬프트 기록, 할 일 목록(todos), 검색, 세션 연결
- 모델 제공자 (Model providers): 내장 OpenRouter, OpenCode Zen, DeepSeek 게이트웨이, 사용자 지정 Anthropic 호환 제공자, OpenAI 번역 프록시, 컨텍스트 크기, 모델 슬롯 및 제공자별 사용량
- 임베디드 터미널 (Embedded terminal): 테마 및 모바일 지원을 갖춘 인 브라우저 셸(in-browser shell)
- PR 리뷰 (PR reviews): GitHub PR 탐색 및 리뷰 세션
- 스케줄링된 작업 (Scheduled jobs): cron 기반의 Claude Code 실행
- 설정 (Settings): 인증(auth), 모델, 제공자, 테마, 알림, 받은 편지함(inbox), 업데이트, 에이전트(agents), 스킬(skills), 훅(hooks), MCP 서버, CLAUDE.md
개발 (Development)
단위 테스트는 npx vitest run으로 실행됩니다. 통합 스위트 (integration suite)는 Playwright를 통해 목(mock) Anthropic API에 대한 실제 Claude Code CLI를 구동하여, 런타임 동작이 가정되는 것이 아니라 증명되도록 합니다. 이슈 및 PR은 환영합니다.
라이선스 (License)
Apache 2.0
