hopper-hq가 Claude Code 세션을 가상 사무실에 배치한다

FairMind이 Apache License 2.0으로 공개한 hopper-hq는 Claude Code 세션이 작업하는 동안 상태를 살펴보는 로컬 대시보드다. 세션마다 아이소메트릭 사무실 건물에 책상을 배정하며, 빨간 창은 사용자의 응답을 기다리는 세션을 뜻한다. 현재는 Claude Code용으로 먼저 제공되고, 다른 코딩 에이전트도 연결할 수 있도록 어댑터 인터페이스를 마련했다.

저장소와 설치 정보는 GitHub, 패키지는 npm에서 확인할 수 있다. 1분 데모 영상도 제공한다.

설치와 빠른 시작

Node 22.13 이상과 Claude Code가 필요하다. tmux는 선택 사항이며, 상태 표시줄과 Go 버튼을 쓸 때만 필요하다. npm으로 CLI를 설치하고 Claude Code 플러그인을 추가한다.

npm install -g @fairmind-ai/hopper-hq
claude plugin marketplace add FairMind-Gen-AI-Studio/hopper-hq
claude plugin install hopper-hq@hopper-hq

Claude Code 세션에서 /hopper-hq를 입력하면 데몬이 필요할 경우 시작되고 브라우저에서 건물이 열린다. 셸에서는 hopper-hq up으로 같은 작업을 할 수 있다. 실제 세션이 없어도 hopper-hq demo를 실행하면 합성 세션을 볼 수 있으며, hopper-hq demo --showcase는 더 긴 시나리오를 재생한다.

플러그인은 세션이 바뀔 때마다 상태와 대기 이유를 정확히 보고하므로 권장되지만 필수는 아니다. 플러그인 없이도 Claude Code가 기록하는 파일을 읽어 작동한다. 다만 이 경우 지연이 최대 1초이고 대기 이유에 관한 정보가 줄어든다.

저장소를 복제해 설치하려면 해당 저장소에서 다음 명령을 실행한다.

npm install && npm run build && npm link

업데이트 뒤에는 데몬을 재시작하고 플러그인을 업데이트한 다음 열려 있는 건물 탭을 새로고침해야 한다. 백그라운드 데몬은 hopper-hq down으로 내린 뒤 hopper-hq up으로 올린다. hopper-hq start로 전경 실행 중이면 Ctrl-C로 종료하고 다시 시작한다. 플러그인은 Claude Code의 /plugin으로 갱신하거나 설치 명령을 다시 실행한다. 업데이트 전에 열어 둔 탭은 건물 변경 내용을 더 이상 따라가지 못할 수 있다. 이후에는 탭에서 이를 알리고 새로고침을 요청한다.

바닥 평면 기능이 들어간 버전으로 처음 업데이트하면 각 세션은 한 번씩 새로 자리를 배정받는다. 이후에는 재시작해도 해당 층의 평면에서 자리를 유지한다.

건물에서 확인하는 상태

건물은 기능 브랜치마다 층을 만들고, 같은 브랜치에서 작업하는 여러 저장소의 세션을 한 층에 모은다. 기능 브랜치가 없는 세션은 저장소별 층에 둔다. 층은 최근 항목이 위에 오도록 배치된다. 각 창은 층 평면에 있는 책상 하나를 나타내며, 건물 외부에서도 층의 크기와 점유 상태를 볼 수 있다.

• 빨간색으로 깜박이는 창은 권한 승인, 질문 또는 계획 승인을 기다리는 상태다.
• 초록색은 작업 차례를 마치고 사용자가 확인하기를 기다리는 상태다.
• 켜진 노란색은 작업 중이다.
• 보라색은 세션 자체는 대기 중이지만 하위 에이전트나 워크플로 에이전트가 실행 중인 상태다.
• 깜박이는 황색은 작업 중이지만 한동안 새 신호가 없는 상태다. 긴 명령을 실행할 때 나타날 수 있다.
• 불이 꺼진 창은 유휴 또는 며칠 동안 유휴 상태였던 세션이다. 층의 모든 세션이 휴면 상태가 되면 셔터를 내린다.
• 테두리만 있는 꺼진 창은 빈 책상이다.

상단 표시줄에는 사용자의 응답을 기다리는 세션을 가장 오래 기다린 순서로, 완료된 세션을 가장 오래된 순서로 표시한다. 항목을 누르면 해당 책상이 열린다. Go는 tmux에서 해당 세션의 창으로 전환한다. 층을 누르면 안으로 들어갈 수 있고, 책상이나 로봇을 누르면 세션 상태를 확인할 수 있다. 두 번 누르거나 Enter 또는 Go to pane을 사용해 tmux 창으로 이동할 수도 있다.

책상 패널에는 세션의 하위 에이전트와 최근 워크플로 실행, 실행 시간과 종료 결과가 표시된다. 요약 기능을 켜면 세션의 현재 상황을 한 줄로 보여준다. 이 문장은 책상 패널과 층 사이드 패널, 상단 표시줄에도 나온다. 워크플로 밖에서 시작한 하위 에이전트는 최대 세 명의 작은 로봇으로 책상 위에 표시된다. 하위 에이전트가 실행 중이면 세션과 에이전트가 Subagents 회의실에 모이며, 방이 없을 때만 하위 에이전트가 책상 위에 머문다.

실행 중인 각 워크플로와 하위 에이전트가 실행되는 세션에는 회의실이 배정된다. 회의실은 해당 세션 층의 책상 동쪽 별관에 있다. 에이전트는 안전모를 쓴 로봇으로 테이블에 앉으며, 한 방에 최대 여덟 명까지 들어간다. 실행을 시작한 세션의 로봇은 세션이 워크플로와 함께 작업하거나 결과를 기다리는 동안 상석에 앉는다. 세션이 사용자의 응답을 기다릴 때는 책상에 남아 손을 흔든다. 방의 표지에는 실행 이름과 현재 단계, 가까이 보거나 방을 선택했을 때의 집계가 표시된다. 화이트보드에는 단계별 완료·현재·예정 상태와 실행 중이거나 끝난 에이전트 수가 나온다.

층에는 기본 회의실 두 개가 있고, 세 번째 워크플로가 동시에 실행되면 네 개로 늘어난다. 네 개를 넘는 실행은 사이드 패널에서 수를 확인할 수 있다. 실행은 끝날 때까지 방을 유지한다. 종료되면 문을 닫고 조명을 낮추며, 종료 결과는 세션의 책상 패널에 남는다. 방이나 표지를 누르면 단계와 에이전트, 세션 책상 링크가 있는 실행 패널이 열린다. 두 번 누르거나 Enter 또는 Go to pane을 누르면 해당 세션의 tmux 창으로 전환한다.

주소는 현재 층과 화면에 표시된 책상 또는 실행을 가리킨다. 링크를 공유해 해당 화면을 열 수 있고, 뒤로 가기와 새로고침을 해도 위치가 유지된다. Esc는 책상·실행, 층, 건물 순으로 한 단계 위로 이동한다. Q와 E는 층을 좌우로 90도 돌리고, R은 시점을 초기화한다. 드래그, 스크롤, 오른쪽 드래그로 층을 회전·기울이거나 확대·이동할 수 있다. 층을 한 번 누른 뒤 방향키로 앞뒤로 걷거나 좌우로 방향을 바꾼다. Shift와 방향키를 함께 누르면 시점을 기울이거나 옆으로 이동한다. 라벨에 초점이 있으면 방향키는 다음 라벨로 이동하는 데 쓰이고, 사이드 패널에 초점이 있으면 내용을 스크롤한다.

테마 버튼은 시스템 설정, 낮, 밤 모드를 순환한다. WebGL을 지원하지 않는 브라우저에서도 사이드 패널에서 층의 책상과 회의실을 목록으로 볼 수 있다. 데몬이 업데이트되어 페이지가 건물을 더 이상 따라갈 수 없으면 새로고침을 요청한다. tmux 전환은 가장 최근에 사용한 tmux 클라이언트에서만 이뤄지며, 데몬은 시작 당시 연결된 tmux 서버 또는 기본 서버와 통신한다. 터미널 창을 앞으로 가져오지는 못한다.

책상 배치와 애니메이션

층의 평면은 고정되어 있으며 책상, 회의실, 라운지로 구성된다. 책상은 네 개씩 등을 맞댄 팟으로 배치되고, 두 팟이 한 블록을 이뤄 블록당 여덟 자리가 있다. 새 세션은 같은 체크아웃의 세션이 있는 팟에 먼저 앉는다. 그런 팟이 없으면 빈 팟, 그다음 첫 빈 책상을 사용한다. 세션은 끝나거나 다른 층으로 옮길 때까지 자리를 유지한다. 한 팟의 세션이 모두 같은 저장소를 쓰면 러그에 저장소 색을 입히고, 표지판에는 체크아웃 이름 또는 저장소 이름을 표시한다.

빈 책상이 없으면 가장 오래 휴면 상태인 세션의 책상을 새 세션이 사용한다. 자리가 비거나 해당 세션이 깨어나면 휴면 세션은 다시 자리를 얻는다. 휴면 세션이 없으면 층은 최대 네 블록, 즉 32석까지 늘어난다. 그보다 많은 세션은 자리가 날 때까지 기다린다. 사이드 패널은 대기 중인 세션 가운데 처음 24개를 no desk로 표시하고 나머지 수를 집계하며, 건물 외관에는 전체 대기 수를 표시한다. 세션이 남아 있는 동안 층은 줄어들지 않는다. 마지막 세션이 떠나면 층은 한 블록부터 다시 시작한다.

휴면 세션의 로봇은 사라지지만 책상은 어둡게 남고 이름표가 표시된다. 이름표를 누르면 해당 세션을 선택한다. 남쪽 벽을 따라 놓인 라운지에는 소파와 빈백 좌석 여덟 개가 있다. 유휴 세션은 다음 프롬프트를 기다리는 동안 라운지에서 쉬며, 자리가 없으면 책상에 머문다.

로봇은 상태에 따라 이동한다. 세션은 층에 들어오면 엘리베이터에서 내려 책상으로 간다. 종료되거나 휴면 상태가 되거나 다른 층으로 옮기면 엘리베이터로 돌아간다. 상태가 변하면 회의실이나 라운지, 책상 사이를 가구를 돌아 이동한다. 워크플로 에이전트는 엘리베이터와 자리 사이를 걷고, 하위 에이전트는 책상까지 곧장 날아간다. 자리를 떠날 때까지 각자 자리를 유지하며, 로봇이 지날 때 엘리베이터 문이 열린다.

정지 상태에서도 로봇은 작은 동작을 한다. 작업 중인 로봇은 타자를 치고, 응답을 기다리는 로봇은 손을 흔들며, 완료된 로봇은 종이를 들어 올린다. 신호가 없는 로봇은 졸고, 유휴 로봇은 숨 쉬듯 움직이며, 하위 에이전트는 제트팩을 타고 흔들린다. 층을 열거나 새로고침하거나 다시 돌아오면 로봇은 이미 제자리에 있다. 화면을 보는 동안 바뀐 상태만 움직임으로 나타난다. 운영체제의 동작 줄이기 설정을 켜면 로봇은 곧바로 자리로 이동하고 정지 상태 애니메이션도 멈춘다. 주소에 ?motion=off를 붙여도 같은 효과를 얻는다. 예를 들어 /ui/?motion=off는 스크린샷과 테스트에 사용할 수 있다.

먼 거리에서는 로봇 상태를 색 점으로 표시한다. 선택된 세션, 응답을 기다리는 세션, 완료된 세션만 이름이 보이며 회의실 이름은 계속 표시되고 팟 표지판은 숨겨진다. 가까이 가면 모든 표지와 표지판이 온전히 보인다. 표시가 겹치면 선택된 표지, 사용자 응답 대기, 완료, 회의실, 작업 중, 그 밖의 상태, 팟 표지판 순으로 우선한다. 먼 거리에서 이름이 가려진 표지는 점이 보이는 위치에 점으로 남는다. 표지에 마우스를 올리거나 초점을 맞추면 다른 표지를 가리지 않은 채 맨 위에 전체 이름을 표시한다. 빈 책상과 휴면 책상에는 표지가 없다.

로그인·보안과 데이터 처리

데몬은 127.0.0.1에서만 연결을 받는다. hopper-hq ui는 데몬에 일회용 로그인 링크를 요청한다. 일반 링크는 1분 안에 한 번만 쓸 수 있고 데모 링크는 10분 동안 유효하다. 링크를 열면 해당 데몬 포트에 서명된 HttpOnly 쿠키가 설정된다. 쿠키는 30일간 유효하며 데몬을 재시작해도 유지된다. 모든 브라우저에서 로그아웃하려면 ~/.hopper-hq/token을 지운 뒤 데몬을 재시작한다.

로그인한 브라우저는 건물을 살펴보고 tmux 창을 전환하며 세션을 확인 완료로 표시할 수 있다. 훅 이벤트를 보내거나 로그인 링크를 요청하거나 데몬을 중지할 수는 없다. 브라우저 변경은 데몬이 제공한 자체 페이지에서만 허용된다. 페이지는 외부 네트워크에서 콘텐츠를 불러오지 않는다. 스크립트, 스타일, 글꼴은 엄격한 콘텐츠 보안 정책 아래 데몬에서 제공한다.

제작자가 밝힌 알려진 위험은 브라우저가 포트별로 쿠키를 분리하지 않는다는 점이다. 이 브라우저가 통신하는 127.0.0.1의 다른 서버, 예를 들어 에이전트가 시작한 개발 서버도 쿠키를 받을 수 있다. 해당 서버는 최대 30일 동안 쿠키를 재사용해 건물을 보고 tmux 창을 전환하거나 세션을 확인 완료로 표시할 수 있다. 이 위험이 문제가 된다면 앞서 설명한 방법으로 모든 브라우저에서 로그아웃해야 한다. 데모에서는 Go와 Go to pane이 실제 tmux를 건드리지 않고 전환 대상 창만 표시한다.

CLI와 플러그인은 권한이 600인 ~/.hopper-hq/token의 토큰으로 인증한다. 원격 측정은 없다. 요약 기능을 켜지 않는 한 정보는 컴퓨터 밖으로 나가지 않는다. 요약을 켜면 선택한 제공자에게 세션 노트가 전송된다.

tmux 상태 표시줄과 Claude Code 플러그인

다음 설정을 ~/.tmux.conf에 추가하면 상태 표시줄에 사용자 응답을 기다리는 세션 수와 확인하지 않은 완료 세션 수가 표시된다.

set -g status-right '#(hopper-hq status --format tmux) %H:%M'
set -g status-interval 5

◉는 사용자를 기다리는 세션 수이고 ✓는 아직 확인하지 않은 완료 세션 수다. hopper-hq ack는 ✓ 표시를 지운다.

권장 플러그인은 세션 변경과 정확한 대기 이유를 보고한다. 각 세션의 프롬프트 위에는 사용자를 기다리는 다른 세션도 표시한다. Go 버튼은 해당 tmux 창으로 이동한다. 세션에서 /hopper-hq를 입력하면 hopper-hq up을 실행해 건물을 열고, 모델의 작업 차례를 사용하지 않는다. 로그인 링크는 대화에 들어가지 않는다. 프롬프트 위 배너의 Open building 버튼도 같은 기능을 하며, 다른 세션이 응답을 기다리거나 완료됐을 때만 배너가 나타난다. 두 기능 모두 hopper-hq가 PATH에 있어야 한다.

셸에서 플러그인을 설치하는 명령은 다음과 같다.

claude plugin marketplace add FairMind-Gen-AI-Studio/hopper-hq
claude plugin install hopper-hq@hopper-hq

복제한 저장소의 플러그인을 한 세션에서 시험하려면 다음처럼 실행한다.

claude --plugin-dir /path/to/hopper-hq/mod

데몬은 플러그인 없이도 ~/.claude 아래 Claude Code 파일을 읽어 동작한다. 세션 파일은 Claude Code 내부 형식이며 버전마다 바뀔 수 있어 hopper-hq는 방어적으로 읽고 그 파일에 쓰지 않는다. 플러그인은 얼리 액세스 중인 Claude Code 플러그인 API를 사용한다.

한 줄 요약 기능

hopper-hq는 세션마다 완료한 일, 진행 중인 일, 대기 중인 일을 한 줄로 요약할 수 있다. 문장을 언어 모델이 만들기 때문에 기본값은 꺼짐이다. 사용하려면 다음 명령을 실행한다.

hopper-hq summaries on

전체 형식은 다음과 같다.

hopper-hq summaries on|off|status [--provider claude-cli|anthropic-api] [--model <id>]

on과 off는 요약을 켜거나 끄고 현재 설정을 보여준다. 기본값인 status는 설정과 데몬의 마지막 요약, 마지막 오류, 일시 중지 상태를 출력한다. --provider는 노트를 보낼 곳을 정하며 기본값은 claude-cli다. --model 없이 제공자를 지정하면 그 제공자의 기본 모델로 돌아간다. 모델 이름은 영문자나 숫자로 시작하는 1~64자의 영문자, 숫자, ., _, : 또는 -로 제한된다. 기본 모델은 claude-cli에서 haiku, anthropic-api에서 claude-haiku-5-5다.

설정은 사용자만 읽을 수 있는 ~/.hopper-hq/config.json에 저장된다. 데몬은 요약을 작성하기 전에 설정을 다시 읽으므로 설정 변경에 재시작이 필요하지 않다. 요약 문장에는 작성 시점이 함께 표시된다. 이후 세션에 새 프롬프트를 보내면 문장에 “마지막 프롬프트보다 오래됨”을 표시하고 패널에서는 흐리게, 상단 표시줄에서는 기울임꼴로 보여준다.

세션이 완료되거나 사용자 응답을 기다리거나 회의실에서 대기하는 등 멈추면 데몬은 8초 기다렸다가 상태를 다시 읽는다. 세션이 다시 작업 중이 아니면 요약을 요청한다. 데몬이 실행되는 동안 끝난 차례만 요약하며, 마지막 문장 이후 바뀌지 않은 노트는 다시 보내지 않는다. 세션 하나당 요약은 3분에 최대 한 번, 데몬 전체에서는 한 번에 하나만 작성한다.

요약에 실패하면 세션 상태가 그대로인 동안 나중에 다시 시도한다. 재시도 간격은 1분부터 시작해 실패할 때마다 두 배로 늘어나며 최대 30분이다. 요약 사이에는 최소 3분을 둔다. 연속 세 번 실패하면 모든 요약을 15분 동안 멈춘다. 제공자나 모델을 바꾸면 이 일시 중지를 해제한다. hopper-hq summaries status에서 마지막 오류와 일시 중지를 확인할 수 있고, 데몬 로그에는 실패마다 한 줄씩 오류가 기록된다.

요약을 요청할 때 보내는 정보는 고정 지침과 한 세션에 관한 다음 노트다. 각 항목은 한 줄로 잘라 보낸다.

• 세션 제목
• 마지막 요청: 사용자가 보낸 마지막 프롬프트 또는 첫 프롬프트
• 상태와 대기 이유. 기다리는 중이면 권한을 요청한 도구와 명령 또는 파일, 아니면 질문 내용
• 최근 도구 호출 10개의 이름. 예: Bash: npm test, Edit src/app.ts
• 최대 2,000자의 마지막 답변

노트는 약 4,000자로 자른다. 마지막 답변의 끝부분을 먼저 포함하고, 그 뒤에 가장 오래된 동작을 넣는다. hopper-hq는 이 정보 외에는 보내지 않는다.

기본 제공자 claude-cli는 노트를 표준 입력으로 전달해 claude -p --safe-mode를 실행한다. 사용자의 계정으로 실행되므로 요청은 사용자의 claude가 보내는 곳으로 간다. --safe-mode는 플러그인, 훅, CLAUDE.md, 스킬, MCP 서버 없이 실행하며 도구를 받거나 세션을 저장하지 않는다. 실행 위치는 ~/.hopper-hq/summarizer이고 HOPPER_HQ_SUMMARIZER=1을 설정한다. 건물은 이 요약 실행 세션을 표시하지 않고 플러그인도 그 세션의 정보를 보고하지 않는다.

요약 프로세스는 데몬 환경에서 실행되며 ANTHROPIC_API_KEY는 전달하지 않으므로 API 키로 요금이 청구되지 않는다. 데몬을 시작한 Claude Code 세션과 연결하는 CLAUDECODE, AI_AGENT, CLAUDE_PID, CLAUDE_EFFORT, CLAUDE_PLUGIN_DATA, CLAUDE_PLUGIN_ROOT, CLAUDE_CODE_ENTRYPOINT, CLAUDE_CODE_EXECPATH, CLAUDE_CODE_CHILD_SESSION, CLAUDE_CODE_BRIDGE_SESSION_ID, CLAUDE_CODE_SSE_PORT, 그리고 모든 CLAUDE_CODE_SESSION_*, CLAUDE_CODE_MESSAGING_* 환경 변수도 전달하지 않는다. 그 밖의 변수는 유지한다. 따라서 CLAUDE_CODE_OAUTH_TOKEN, 클라이언트 인증서, 프록시, CLAUDE_CODE_USE_BEDROCK 등은 사용자의 claude와 같은 방식으로 인증·연결·제공자 선택에 사용된다. 데몬의 PATH에 claude가 있어야 하며, 60초 뒤 프로세스를 중지한다.

anthropic-api는 노트를 api.anthropic.com의 Anthropic Messages API로 보내며 ANTHROPIC_API_KEY에 있는 키를 사용한다. 데몬은 hopper-hq up 또는 hopper-hq start를 실행한 환경에서 키를 가져온다. 키를 바꾸려면 그 환경에서 설정한 뒤 데몬을 재시작해야 한다. 키는 디스크에 저장되지 않고 요청은 30초 후 중단된다.

--safe-mode는 Claude Code의 최근 옵션이다. 요약을 켠 뒤에는 요약 문장이 나타나는지, hopper-hq summaries status에 마지막 요약이 표시되는지 확인할 수 있다. 이 과정에서 건물에 새 세션이 생기지는 않아야 한다. 데모의 hopper-hq demo는 정해진 문장만 만들며 어디에도 정보를 보내지 않는다.

각 요약은 기본적으로 작은 모델을 사용하는 모델 호출 한 번이다. 세션은 완료된 차례마다 최대 한 번 요약되고, 실패 재시도 때마다 추가 호출이 발생한다. 재시도는 위 대기 시간에 따르며 3분에 한 번보다 잦을 수 없다. claude-cli는 일반 claude -p처럼 사용자의 계정 사용량에 포함된다. anthropic-api는 해당 API 키로 청구된다.

데몬 명령과 동작 방식

• hopper-hq up은 데몬이 없으면 백그라운드에서 시작한 뒤 브라우저에서 건물을 연다. --no-open을 쓰면 링크만 출력한다.
• hopper-hq down은 데몬을 중지한다.
• hopper-hq start는 수집기, 파일 감시기, 로컬 API를 전경에서 실행한다. 데이터 디렉터리마다 데몬 하나가 실행된다.
• hopper-hq status는 요약 상태를 출력한다. --format text, tmux, json을 사용할 수 있다.
• hopper-hq ls는 층과 세션을 나열한다.
• hopper-hq ack는 완료된 세션을 확인한 것으로 표시한다.
• hopper-hq ui는 일회용 링크로 로그인해 브라우저에서 건물을 연다. --no-open은 링크만 출력한다.
• hopper-hq summaries는 한 줄 요약을 켜거나 끄고, status로 상태를 출력한다.
• hopper-hq demo는 합성 세션을 사용하는 데몬을 실행하고 로그인 링크를 출력한다. --showcase를 쓰면 한 층의 세션 12개로 구성된 긴 시나리오를 20초 준비 후 약 2분 동안 한 번 재생한다.

데이터는 Claude Code 플러그인과 ~/.claude 아래 Claude Code 자체 파일, 두 곳에서 들어온다. 두 경로 모두 하나의 수집기로 전달되고 수집기는 로컬호스트 API를 제공한다. 워크플로 실행은 플러그인이 에이전트의 시작과 종료를 보고하고 파일이 실행 이름과 단계, 종료 상태를 제공한다.

개발과 프로젝트 상태

프로젝트는 초기 단계다. 제작자는 수집기, CLI, tmux 카운터, 브라우저 건물이 동작한다고 설명한다. 회의실, 하위 에이전트 표시, 세션 간 이동 로봇, 선택적 한 줄 상태 표시도 포함한다. 완료된 작업을 보관하는 아카이브는 계획 단계다. 설계 내용은 전체 설계 문서, 회의실·하위 에이전트·요약 설계, 층 평면과 이동 설계에서 볼 수 있다.

개발 검사는 다음 명령으로 실행한다.

npm test
npm run typecheck
npm run build
npm run test:mod
npm run test:e2e

npm run build는 CLI와 데몬을 dist/, 브라우저 UI를 dist/ui/에 만든다. npm run test:mod에는 claude CLI가 필요하며 CI에서는 실행하지 않는다. 합성 세션으로 시험한 뒤 hopper-hq ls --data-dir ~/.hopper-hq/demo를 실행할 수 있다. 데모는 1분짜리 스크립트를 재생한다. 체크아웃 층에서는 워크플로 두 개가 번갈아 실행되고 하나가 끝나기 전에 다음 실행이 시작되어 회의실이 계속 사용된다. 세션 다섯 개가 추가로 드나들어 한동안 층에 아홉 개가 모이고 첫 1분 안에 블록이 늘어난다. 세션 하나는 유휴 시간에 라운지에서 쉬고, 책상 하나에는 하위 에이전트 둘이 표시된다. 요약 문장은 고정된 내용이다.

브라우저 UI는 ui/의 Svelte 앱이며 층 렌더링에는 ui/renderer/의 three.js를 쓴다. 실시간 새로고침으로 UI를 개발하려면 별도 포트와 임시 데이터 디렉터리에 데모 데몬을 띄운 다음 개발 서버를 실행한다.

npm run build
node dist/bin.js demo --port 17338 --data-dir "$(mktemp -d)"
SHQ_DAEMON=http://127.0.0.1:17338 npm run dev:ui

개발 서버는 127.0.0.1:17173에서 요청을 받고 /api와 /ui/login을 데몬에 전달한다. 데모가 출력한 로그인 링크의 포트를 17173으로 바꿔 연다.

npm run test:e2e는 패키지를 빌드하고 실제 브라우저에서 시험한다. 임시 데이터 디렉터리와 17000~17999 사이의 빈 포트에 데모 데몬을 실행한 뒤, 데모 링크로 로그인하고 헤드리스 Chrome에서 건물, 3D 층, 책상, 실행 단계와 세션 요약이 있는 회의실을 확인한다. ?motion=off로 시험하며, 애니메이션을 켠 상태에서는 로봇이 엘리베이터에서 나와 책상에 도착할 때까지 기다린다. 콘솔 오류나 콘텐츠 보안 정책 위반이 있으면 실패한다. 출력은 임시 디렉터리에 저장되며 성공하면 삭제하고 실패하면 스크린샷과 오류 정보를 남긴다. 컴퓨터에 설치된 Google Chrome을 사용하고 브라우저를 내려받지 않는다. Chrome이 없으면 안내 메시지와 함께 중단된다. 이 검사는 npm test에 포함되지 않고 CI에서도 실행되지 않는다.

이름은 나방이 Harvard Mark II의 릴레이에서 발견된 뒤 Grace Hopper가 “bug”라는 말을 널리 알린 일화에서 따왔다. hopper-hq는 Grace Hopper의 유산 관리 단체나 이름이 같은 다른 제품과 제휴하지 않는다. FairMind이 제공하는 제품이며 Anthropic의 제휴나 승인을 받지 않았다. Claude와 Claude Code는 Anthropic의 상표다. 소프트웨어는 Apache-2.0 라이선스로 배포하며 NOTICE도 제공한다. 브라우저 UI에는 SIL Open Font License 1.1로 배포되는 Archivo, IBM Plex Sans, IBM Plex Mono 글꼴과 MIT 라이선스의 Svelte, clsx, three.js가 포함되며 자세한 내용은 제3자 고지에서 확인할 수 있다.