diff --git a/CLAUDE.md b/CLAUDE.md
index b02983a..2963777 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -55,7 +55,17 @@ cc-statusline에 포함됐던 로컬 diff 뷰어를 독립 제품으로 분리 +
 
 뷰어 토글(untracked 포함·watch 자동갱신·flatten·파일트리 좌우·unified/split·파일트리 숨김·트리 접기 동기화)은 `--untracked`/`--watch`/`--no-flatten`/`--tree-right`/`--split`/`--hide-tree`/`--fold-with-tree` CLI 플래그로 구동 시점에 미리 설정할 수 있다(session-only — 저장된 localStorage 프리퍼런스는 건드리지 않음). 인앱 토글의 초기 표시 상태는 항상 실제 launch 값과 일치하도록 sync되며, 우선순위 계산(URL 파라미터 → localStorage → 기본값)은 `apps/viewer/browser/prefs.ts`의 순수 resolver 함수(`resolveUntracked`/`resolveWatch`/`resolveFlatten`/`resolveTreeSide`/`resolveDiffStyle`/`resolveTreeHidden`/`resolveFoldWithTree`)로 분리해 단위 테스트한다. unified↔split 전환은 읽던 스크롤 위치를 그대로 유지한다(엔진 앵커링 — 아래 "CodeView 인스턴스 수명" 항목 참고). 파일트리 숨김은 `localStorage` 폴백이 없는 session-only 토글(`resolveUntracked`와 동일 패턴)로, 툴바 아이콘 버튼(`#tree-toggle-btn`)과 오버플로 메뉴 체크박스(`#toggle-tree-hidden`) 둘 다에서 조작 가능하며 항상 서로 동기화된다. 사이드바에서 디렉토리를 접으면 diff 화면의 해당 파일들도 자동으로 접히는 "Fold with tree" 토글은 `flatten`/`treeSide`와 동일하게 `localStorage`(`cc-statusline:fold-with-tree`)에 영속화되며, 오버플로 메뉴 체크박스(`#toggle-fold-with-tree`)로만 조작한다(전용 툴바 버튼 없음). 트리에서 접힌 디렉토리 아래 파일을 diff 헤더 클릭으로 개별 펼치면 그 파일은 사용자가 다시 접기 전까지(토글 on/off와 무관하게) 계속 펼쳐진 채 유지된다. 파일 트리 사이드바 폭은 `#tree-resizer`를 드래그하거나(포커스 후 방향키로도 10px 단위 조정 가능) 180~600px 범위에서 조정할 수 있으며, 조정한 폭은 `localStorage`(session-only 토글들과 달리 지속)에 저장된다.
 
-**견줄 기준 피커** — 툴바의 옛 `<select id="diff-mode">`(옵션 두 개)를 대체한다. wire는 `base=<ref>` \| `base=@auto`이고, 없으면 레거시 `mode=working|base`로 떨어진다(`server/selection.ts`의 `parseSelection` 한 곳에서만 읽는다 — 예전엔 `mode` 삼항이 `/api/diff`와 `/api/blob`에 복제돼 있어 텍스트 diff와 이미지 카드가 다른 기준을 볼 수 있었다). **`base`가 있으면 `mode`는 무시된다**: 한 축을 두 파라미터가 인코딩하면 `mode=working&base=main` 같은 모순 상태가 생기고 우선순위 규칙이 필요해지는데, "새 파라미터가 이긴다" 하나로 그 상태 자체를 없앤다. `@auto` 표식을 쓰는 이유는 실제로 `auto`라는 이름의 브랜치와 구별하기 위해서다. wire 값 `HEAD`는 **`parseBase`가 head 종류로 정규화한다**(피커의 "Working tree" 행이 그 값을 보낸다). `merge-base(HEAD, HEAD) === HEAD`라 참조로 둬도 결과는 같아 보이지만 그걸로는 부족해서 분기를 뒀다 — 이유 둘: ① 커밋이 하나도 없는 리포에서는 `rev-parse --verify HEAD`가 실패해 참조 검증이 400을 내고 **새 프로젝트에서 처음 켠 화면이 통째로 실패 카드**가 된다(e2e 픽스처는 항상 base 커밋을 만들어 이 상태를 원리적으로 못 만든다 — 유닛이 지킨다), ② `head`와 `ref:HEAD`는 서로 다른 캐시 슬롯이라 정규화하지 않으면 prewarm이 데운 것을 아무도 조회하지 않는다. **이 분기를 "불필요한 중복"으로 읽고 지우지 말 것.** 덕분에 기본 경로는 CLAUDE.md의 45+45 flight 예산 서술을 그대로 만족하고, 그 서술이 설명하지 못하는 곳은 사용자가 base를 고른 경로 하나다(`verifyBaseRef`가 flight 밖에서 돈다). 목록은 `/api/refs`가 git 호출 **두 번**으로 만든다(`server/refs.ts`): `for-each-ref --format=…%00…`과 `worktree list --porcelain -z`. **필드 구분자가 NUL인 건 취향이 아니다** — git은 refname에 `|`를 허용한다(실측: `weird|pipe` 브랜치를 만들어 확인). `for-each-ref`는 레코드 사이에 리터럴 개행을 하나 끼워 넣는데 refname엔 개행이 못 들어가므로 필드마다 선행 개행 하나만 벗기면 되고, **후행 빈 항목은 정확히 하나만 벗겨야 한다**(전부 벗기면 `symref`가 정당하게 빈 레코드가 통째로 사라진다 — 실제로 밟았다). **죽은 워크트리 제외가 핵심 계약이다**: 디렉토리가 삭제돼도 등록은 `prunable`로 남고 `branch` 줄까지 달고 나오며 `for-each-ref`도 그 경로를 `%(worktreepath)`로 실어 보낸다(둘 다 실측). 교차 확인 없이 목록에 올리면 존재하지 않는 워크트리를 광고하고, 그걸 고르면 위 "cwd 삭제" 항목과 같은 막다른 화면이 된다. `bare`(워킹트리 없음)도 뺀다. **`verifyBaseRef`(`diff.ts`)는 보안 경계다** — Bun의 `$`는 셸을 이스케이프하지 git의 **옵션 파싱**을 막아주지 않으므로, 첫 글자가 `-`인 참조가 `git diff`에 닿으면 `--output=<path>`로 데몬이 쓸 수 있는 아무 경로나 만들거나 비운다(실측). `rev-parse --verify`가 옵션 꼴을 거부하긴 하지만 그 방어에만 기대지 말 것. 목록 밖 base는 조용히 auto로 흘리지 않고 **400**이다(고르지도 않은 기준의 diff가 에러보다 나쁘다). `selectionCacheKey`는 **flight 클로저가 읽는 모든 입력의 전함수여야 한다** — 예전 키(`repo\0untracked\0mode`)엔 해석된 ref가 없는데 클로저는 그걸 물어서, base가 다르게 해석된 두 요청이 같은 키로 합류하면 한쪽이 남의 ref로 만든 diff를 받았다(`baseCache` TTL 만료나 `gh pr view` 결과 변화로 도달). ref는 **이름**으로 넣는다(OID를 넣으면 커밋마다 새 슬롯이 생겨 8칸 LRU가 헛돈다 — OID는 지문의 몫). 새 프리퍼런스 키 `diffdeck:compare-base:<repo>`만 리포로 네임스페이스한다 — 기존 여섯 `cc-statusline:` 키는 마이그레이션 코드가 없어 이름을 바꾸면 사용자 설정이 조용히 초기화되므로 건드리지 않는다. `#ref-picker`는 `#overflow-menu` 계열(툴바 앵커 절대 위치)이라 grab의 `computePlacement`를 쓰지 않으며, author `display`를 선언했으므로 **`#ref-picker[hidden]` 짝이 필수**다. 피커는 자기 dismiss(바깥 mousedown·Escape+IME 가드)를 갖고 오버플로 메뉴 리스너에 얹지 않는다. 회귀망: `ref-picker.e2e.ts` 4종 + `diff-selection.test.ts`·`diff-refs.test.ts`·`ref-picker-model.test.ts`.
+**견줄 기준(base) 축** — 무엇과 견주는가. 예전엔 툴바 피커가 이것을 골랐지만 지금은 **서버가 해석한다**(피커는 base가 아니라 head를 고른다 — 다음 항목). 사용자가 base를 고르는 유일한 경로는 빈 상태 카드의 전환 액션이다. wire는 `base=<ref>` \| `base=@auto`이고, 없으면 레거시 `mode=working|base`로 떨어진다(`server/selection.ts`의 `parseSelection` 한 곳에서만 읽는다 — 예전엔 `mode` 삼항이 `/api/diff`와 `/api/blob`에 복제돼 있어 텍스트 diff와 이미지 카드가 다른 기준을 볼 수 있었다). **`base`가 있으면 `mode`는 무시된다**: 한 축을 두 파라미터가 인코딩하면 `mode=working&base=main` 같은 모순 상태가 생기고 우선순위 규칙이 필요해지는데, "새 파라미터가 이긴다" 하나로 그 상태 자체를 없앤다. `@auto` 표식을 쓰는 이유는 실제로 `auto`라는 이름의 브랜치와 구별하기 위해서다. wire 값 `HEAD`는 **`parseBase`가 head 종류로 정규화한다**(기본값이고, 자동 base 전환이 `@auto`로 올리기 전까지의 값이다). `merge-base(HEAD, HEAD) === HEAD`라 참조로 둬도 결과는 같아 보이지만 그걸로는 부족해서 분기를 뒀다 — 이유 둘: ① 커밋이 하나도 없는 리포에서는 `rev-parse --verify HEAD`가 실패해 참조 검증이 400을 내고 **새 프로젝트에서 처음 켠 화면이 통째로 실패 카드**가 된다(e2e 픽스처는 항상 base 커밋을 만들어 이 상태를 원리적으로 못 만든다 — 유닛이 지킨다), ② `head`와 `ref:HEAD`는 서로 다른 캐시 슬롯이라 정규화하지 않으면 prewarm이 데운 것을 아무도 조회하지 않는다. **이 분기를 "불필요한 중복"으로 읽고 지우지 말 것.** 덕분에 기본 경로는 CLAUDE.md의 45+45 flight 예산 서술을 그대로 만족하고, 그 서술이 설명하지 못하는 곳은 사용자가 base를 고른 경로 하나다(`verifyBaseRef`가 flight 밖에서 돈다). 목록은 `/api/refs`가 git 호출 **두 번**으로 만든다(`server/refs.ts`): `for-each-ref --format=…%00…`과 `worktree list --porcelain -z`. **필드 구분자가 NUL인 건 취향이 아니다** — git은 refname에 `|`를 허용한다(실측: `weird|pipe` 브랜치를 만들어 확인). `for-each-ref`는 레코드 사이에 리터럴 개행을 하나 끼워 넣는데 refname엔 개행이 못 들어가므로 필드마다 선행 개행 하나만 벗기면 되고, **후행 빈 항목은 정확히 하나만 벗겨야 한다**(전부 벗기면 `symref`가 정당하게 빈 레코드가 통째로 사라진다 — 실제로 밟았다). **죽은 워크트리 제외가 핵심 계약이다**: 디렉토리가 삭제돼도 등록은 `prunable`로 남고 `branch` 줄까지 달고 나오며 `for-each-ref`도 그 경로를 `%(worktreepath)`로 실어 보낸다(둘 다 실측). 교차 확인 없이 목록에 올리면 존재하지 않는 워크트리를 광고하고, 그걸 고르면 위 "cwd 삭제" 항목과 같은 막다른 화면이 된다. `bare`(워킹트리 없음)도 뺀다. **`verifyBaseRef`(`diff.ts`)는 보안 경계다** — Bun의 `$`는 셸을 이스케이프하지 git의 **옵션 파싱**을 막아주지 않으므로, 첫 글자가 `-`인 참조가 `git diff`에 닿으면 `--output=<path>`로 데몬이 쓸 수 있는 아무 경로나 만들거나 비운다(실측). `rev-parse --verify`가 옵션 꼴을 거부하긴 하지만 그 방어에만 기대지 말 것. 목록 밖 base는 조용히 auto로 흘리지 않고 **400**이다(고르지도 않은 기준의 diff가 에러보다 나쁘다). `selectionCacheKey`는 **flight 클로저가 읽는 모든 입력의 전함수여야 한다** — 예전 키(`repo\0untracked\0mode`)엔 해석된 ref가 없는데 클로저는 그걸 물어서, base가 다르게 해석된 두 요청이 같은 키로 합류하면 한쪽이 남의 ref로 만든 diff를 받았다(`baseCache` TTL 만료나 `gh pr view` 결과 변화로 도달). ref는 **이름**으로 넣는다(OID를 넣으면 커밋마다 새 슬롯이 생겨 8칸 LRU가 헛돈다 — OID는 지문의 몫). 새 프리퍼런스 키 `diffdeck:compare-base:<repo>`만 리포로 네임스페이스한다 — 기존 여섯 `cc-statusline:` 키는 마이그레이션 코드가 없어 이름을 바꾸면 사용자 설정이 조용히 초기화되므로 건드리지 않는다. `#ref-picker`는 `#overflow-menu` 계열(툴바 앵커 절대 위치)이라 grab의 `computePlacement`를 쓰지 않으며, author `display`를 선언했으므로 **`#ref-picker[hidden]` 짝이 필수**다. 피커는 자기 dismiss(바깥 mousedown·Escape+IME 가드)를 갖고 오버플로 메뉴 리스너에 얹지 않는다. 회귀망: `diff-selection.test.ts`·`diff-refs.test.ts`. **`git diff`에 붙인 끝의 `--`도 이 축의 계약이다**: 참조 이름이 트래킹된 경로와 겹치면(`docs`·`src`·`test`처럼 흔하다) git이 rev인지 path인지 못 정해 `ambiguous argument`로 죽는데, 모든 git 호출이 `2>/dev/null` + `.nothrow()`라 그 실패가 빈 문자열이 되어 **에러 없는 "변경 없음" 화면**이 된다(실측). head 축이 사용자 ref 이름을 `git diff`의 위치 인자로 처음 통과시키며 연 노출이다 — 예전엔 언제나 `HEAD` 아니면 merge-base OID였다. `merge-base`·`rev-list`·`rev-parse`·`show <rev>:<path>`는 rev만 받아 영향이 없다(넷 다 실측). 회귀망은 `diff-command.test.ts`의 "브랜치 이름 = 트래킹된 디렉토리 이름" 픽스처 하나이고, 기존 `feat`/`main` 픽스처는 원리적으로 이걸 못 잡는다.
+
+**head 축과 피커** — 무엇을 **볼** 것인가. 오래도록 diff의 오른쪽(new)은 언제나 워킹트리였고, 그래서 피커가 base를 고르던 시절에는 목록의 브랜치 이름이 "그 브랜치를 보여줘"로 읽히면서 실제로는 반대 축을 건드렸다 — 메인 워크트리에서 남의 브랜치를 골라도 1 file만 나오던 것이 그 결과다(실측: 같은 브랜치를 워크트리로 열면 176). wire는 `head=<ref>`이고 없거나 비면 워킹트리다. **커밋된 rev를 보는데 base가 워킹트리면 `parseSelection`이 base를 auto로 정규화한다** — `base=HEAD`(= `mode=working`, = base 미지정)는 "아직 커밋 안 한 것만"이라는 뜻인데 커밋된 rev에는 그런 게 없어서, 곧이곧대로 답하면 `git diff <rev> <rev>`가 되어 **에러 없이 빈 화면**이 된다(실측: `?head=main`이라는 가장 자연스러운 수동·공유 URL이 그랬고, 카드는 `No changes on main`이라 말하는데 실제로는 그 브랜치에 볼 것이 많다). 자동 base 전환도 여기서는 구제하지 못한다 — 그 판정은 카드의 `switch-mode` 액션 유무를 보는데 mode가 working이면 `getRepoSummary`가 base 개수를 아예 재지 않는다(`opts.ref`가 없다). **이 규칙은 원래 브라우저 한 줄(`applyPick`의 `"HEAD" → "@auto"`)에만 살아서 URL을 손으로 만들면 우회됐다** — 파서로 올려 한 곳으로 만들었고, 화면도 같은 규칙을 써야 하므로 `baseDisplay()`가 `currentHead`가 있을 때 `HEAD`를 auto처럼 표시한다(안 그러면 서버는 main과 견주는데 툴바는 아무 말도 안 한다). 사용자가 고른 **진짜** base(`base=develop`)는 그대로 둔다. **base와 달리 `head=HEAD`는 정규화하지 않는다** — `base=HEAD`는 "커밋 안 한 것만"이라 워킹트리 뷰와 결과가 같지만 `head=HEAD`는 **커밋된 HEAD**를 보는 것이라 미커밋 변경이 빠진다. 합치면 그 구분이 사라진다. **갈림점은 head 기준이어야 한다**: `merge-base(ref, HEAD)`로 재면 브랜치를 head로 볼 때 지금 워크트리의 HEAD와 갈림점을 잡는데 그 둘은 아무 관계도 없고, base 브랜치가 그 사이 만든 파일이 "head에서 삭제됨"으로 끼어든다(뮤테이션 확인: HEAD 기준으로 되돌리면 `diff-command.test.ts` 2종이 죽는다). **커밋된 rev에는 untracked가 없다** — 토글이 켜져 있어도 건너뛴다(디스크를 훑어 봐야 그건 워킹트리의 사실이지 이 뷰의 사실이 아니다). head도 base와 **같은 보안 경계**를 탄다 (`verifyBaseRef`) — 그 값이 이제 `git diff`의 두 번째 인자로도 가므로 `-`로 시작하는 참조가 닿으면 `--output=<path>`가 된다. 표식은 `x-diff-error: unknown-head`로 base와 가른다. **그 마커의 소비처가 실제로 있어야 한다** — 없으면 머지 후 삭제된 브랜치를 가리키는 링크가 `Failed to load diff.`만 남기고 새로고침해도 같아서 스스로 못 빠져나온다(실측). base처럼 **조용히 되돌리지는 않는다**: base의 스테일 값은 사용자가 볼 수 없는 localStorage에 살지만 head는 링크가 요청한 것이라, 말없이 다른 화면을 보여주면 사용자가 속는다. 그래서 `renderMissingHead`가 무엇이 없는지 말하고(`That branch is gone`) 나갈 길 하나(`View the working tree instead`)를 주며, URL은 사용자가 그 버튼을 누르기 전까지 그대로다. 카드는 빈 상태 카드와 **같은 클래스**를 써서 새 어휘를 만들지 않는다. 캐시 키와 지문에도 head가 들어간다(키는 "flight 클로저가 읽는 모든 입력의 전함수"라는 기존 계약이고, 지문에는 head rev를 넣어 브랜치가 움직이면 캐시가 깨지게 한다). `/api/summary`도 head를 받는다 — 그때 `workingFiles`·`untrackedFiles`는 0이 아니라 **null**이다: 재지 않은 것을 0으로 적으면 주장이 되어, 실제로는 미커밋 변경이 있는데도 카드가 "Nothing to show in any mode"라고 말한다. **피커의 두 구역은 고르면 일어나는 일이 다르다**: 워크트리는 다른 리포 경로라 그 URL로 **이동**하고(`repo`가 바뀌므로 diff·트리·라벨·프리퍼런스 키가 전부 갈린다 — 옮기면서 `head`는 들고 가지 않는다, 워크트리에 매인 값이 아니라서 남의 브랜치를 새 워크트리에서 보게 된다), 브랜치는 같은 워크트리 안의 축이라 `head`만 바꾼다. **head는 저장하지 않는다** — URL이 진실이라야 새로고침·링크가 재현되고, 저장하면 다음에 그 리포를 열 때 남의 브랜치 뷰에 갇힌 채 시작한다. 순서는 두 구역 모두 **default → 지금 보고 있는 것 → 받은 순서**다(올리는 근거는 태그가 아니라 위치다). 필터는 `label`뿐 아니라 `note`도 본다 — 워크트리 행의 브랜치 이름이 거기 살고, 그게 이 목록에서 가장 자연스러운 검색어다. **빈 목록의 문구는 `pickerLoaded`로 가른다**: head 모델에는 목록 없이 세울 수 있는 행이 하나도 없어(예전 base 모델의 "Working tree 행은 항상 있다"는 전제가 깨졌다) 첫 오픈은 정말로 빈 배열인데, 거기에 `No match`를 쓰면 "이 리포엔 고를 게 없다"는 거짓말이 한 프레임 스친다. 구역 제목·구분선·빈 문구에는 `role="presentation"`이 필요하다 — `listbox`의 허용 자식은 `option`/`group`뿐이라 그냥 두면 보조기술이 옵션 수를 잘못 세거나 제목을 옵션처럼 읽는다. **워크트리 구역은 고를 것이 없으면 통째로 사라지되, head가 브랜치면 남긴다** — 제목만 남기고 비우면 "뭔가 있어야 하는데 없다"로 읽히지만, 워크트리가 하나뿐인 리포에서 무조건 숨기면 브랜치 뷰에 갇혀 돌아올 길이 없어진다. 행에 파일 개수를 달지 않는다 — 예전 개수는 base 축의 수치라 head를 고르는 지금은 행의 뜻과 맞지 않고, `getRepoSummary`는 의도적으로 single-flight 밖이라 목록이 그 속도에 묶였다. **e2e 함정: 픽스처에 `git remote add`를 쓰지 마라** — 원격 URL이 생기면 base 해석의 첫 단계인 `gh pr view`가 그것을 GitHub 리포로 풀어 보려 하고, 그때부터 스펙 하나가 수십 초씩 걸린다(실측: `ref-picker.e2e.ts` 전체가 16초에서 15.5분으로). default 브랜치가 필요하면 `update-ref` + `symbolic-ref`로 원격 HEAD symref만 직접 세운다. 회귀망: `ref-picker-model.test.ts` 20종 + `diff-command.test.ts`의 head describe 5종(갈림점 기준과 **경로와 이름이 겹치는 브랜치**가 핵심) + `diff-server.test.ts`의 head describe 6종(HTTP 200·세 라우트의 unknown-head 400·옵션 꼴 head 차단·blob의 head 리비전 읽기 — `/api/blob`은 이미지 전용이라 픽스처 경로가 `.png`여야 head 해석까지 도달한다) + `ref-picker.e2e.ts` 9종(그중 ⑦은 **먼저 head를 세운 뒤** 워크트리를 골라야 판별력이 있다 — 워킹트리 뷰에서 시작하면 URL에 `head`가 애초에 없어 구현이 그것을 실어 날라도 통과한다).
+
+**툴바의 두 표식 — 트리거(`#ref-picker-label` = `#picker-scope` + `#picker-name` + `#picker-branch`)와 견줄 기준(`#base-label`)**. 트리거는 "지금 **어느 리포의 어느 워크트리에서 무엇**을 보고 있는가"를 상시로 말하고, 개수(`#status`) **바로 왼쪽**의 `#base-label`은 "무엇과 견주는가"만 말한다. **한때 이 둘이 따로였다** — 피커 트리거가 선택 항목을 되풀이하고 개수 왼쪽의 별도 라벨이 같은 리포·워크트리·브랜치를 또 말했다. 피커가 base를 고르던 시절엔 서로 다른 축이라 중복이 아니었지만, 피커가 head를 고르게 된 순간 둘이 같은 말을 하게 됐다. 그래서 **고르는 컨트롤이 곧 표시**다: 무엇을 볼지 고르는 자리와 지금 무엇을 보는지 말하는 자리가 하나면 둘이 어긋날 수 없고, 남은 자리는 트리거가 결코 말하지 않는 축(base)이 가진다. 뷰어는 repo를 URL 파라미터로만 받아서 이 표식이 없으면 워크트리를 여럿 쓰는 리포에서 엉뚱한 워크트리를 열어도 화면에 단서가 하나도 없다(실제 사고: `main`이 origin보다 1044 커밋 뒤처진 워크트리를 열어 놓고 "변경 파일이 1개뿐"이라 오진했는데, 작업 브랜치는 다른 워크트리에 있었고 거기선 176 files였다). 뒤처진 브랜치에서는 merge-base가 HEAD라 **어떤 base를 골라도 결과가 같아 보이는** 것도 그 오진을 키운다. **세 조각이 서로 다른 축이다**: 워크트리 이름만 보이면 어느 리포인지 모르고, 리포 이름만 보이면 어느 워크트리인지 모른다. 메인 워크트리에서는 접두를 생략해 `payments-api · main`이고, 링크된 워크트리에서는 `payments-api / feat+PAY-412 · feat/PAY-412-idempotency`다. **브랜치를 head로 보면 워크트리 조각이 통째로 빠지고 head가 주인공 자리를 가진다**(`payments-api · feat/PAY-412-idempotency` — 워크트리 뷰의 ` / `와 달리 여기는 ` · `다: 브랜치 이름 자체가 슬래시를 품으므로 ` / `를 쓰면 `payments-api / feat / PAY-412-…`라는 3세그먼트 경로로 읽힌다) — 커밋된 rev의 diff는 어느 워크트리에서 보든 같으므로(실측) 워크트리 이름을 남기면 "이 워크트리의 무언가를 보고 있다"는 거짓 인상을 주고, 그 워크트리의 **브랜치**를 말하는 것은 더 나쁘다(보고 있지도 않은 곳을 가리킨다). 색은 **구별되는 조각 하나만** 밝힌다(`#picker-name` = `--vd-fg`, 나머지 `--vd-fg-muted`) — 리포 이름은 그 리포의 워크트리마다 같아서 화면을 가르지 못한다. **같은 이유로 탭 제목에는 리포 접두를 넣지 않는다**(탭은 좁고 오른쪽부터 잘린다). 데이터는 `/api/refs`가 이미 주는 `worktrees[]`의 `{path, branch, head}`에 **리포 루트 하나만 더한 것**이고 git 호출은 늘지 않는다: `parseRepoRoot`(`server/refs.ts`)가 `worktree list --porcelain` **원본의 첫 레코드**를 읽는다. git은 메인 워크트리를 항상 먼저 내며 링크·중첩 워크트리에서 실행해도 그렇다(실측). **`parseWorktreeList`의 결과를 대신 쓰면 안 된다** — 그쪽은 bare·prunable을 걸러내는데 bare 리포는 메인 항목이 바로 그 bare라 첫 항목이 링크된 워크트리로 밀리고, 그러면 라벨이 남의 워크트리를 리포 이름이라 말한다(실측). bare 루트의 관례적 `.git` 접미는 벗긴다. `findWorktree`(`browser/repoLabel.ts`)는 정확 일치가 아니라 **세그먼트 경계 최장 접두 일치**다: `repo`는 CLI 기동 시점의 `process.cwd()`라 리포 루트라는 보장이 없어 하위 디렉토리에서 켜면 정확 일치가 실패하고, 중첩 워크트리(`<repo>/.claude/worktrees/*`)에서 바깥이 이기면 라벨이 엉뚱한 워크트리를 말한다. **피커의 HEAD 태그 판정도 같은 함수를 쓴다** — "내가 어느 워크트리에 있는가"의 답이 한 파일에 둘 있으면 안 된다(예전 `w.path === repo` 정확 일치는 하위 디렉토리 기동에서 조용히 null이었다). detached는 `emptyState.ts`와 **같은 어휘**(`detached @ <short>`)를 쓰되 `/api/refs`의 head는 full OID라 7자로 자르는데, `--short`는 `core.abbrev`(auto)를 따라 큰 리포에서 8자가 되므로 **두 표시가 한 글자 갈릴 수 있다**(실측: 3.5k 객체 7자, 37k 객체 8자). 카드 쪽을 7자로 자르지 않는 이유는 auto abbrev가 git이 고른 **모호하지 않은 길이**라 잘라내면 화면이 모호한 OID를 말하게 되기 때문이다 — 둘 다 옳은 접두사이므로 받아들인 차이다. **갱신 시점은 셋이고 `poll()`이 빠지면 안 된다**: `load()`(부트스트랩·focus·refresh·토글), 피커 열림, 그리고 watch의 `poll()`. watch는 창을 **안 보고 있을 때** 쓰는 기능이라 focus가 발화하지 않아서, `poll()`에 없으면 diff만 새 브랜치 것으로 갈리고 툴바·탭 제목은 옛 브랜치에 무기한 굳는다 — 게다가 같은 화면의 빈 상태 카드는 `/api/summary`(캐시 없음)로 살아 있는 브랜치를 말하므로 한 화면이 두 브랜치를 동시에 주장한다. 비용은 `/api/refs`의 5초 TTL이 흡수한다(폴이 2초여도 git 호출은 5초에 두 번이 상한). "내용이 바뀐 폴에서만" 같은 조건은 쓸 수 없다 — 워킹트리가 깨끗한 채로 브랜치만 갈아타면 지문이 그대로라 304로 흘러 한 번도 안 돈다(그게 정확히 고쳐야 할 경우다). "모름"은 `hidden`이 아니라 **빈 텍스트**다: 이름은 URL에서 즉시 알 수 있어 첫 프레임부터 그리고 나머지는 나중에 채우므로 author `display` + `[hidden]` 짝 함정에 애초에 들어가지 않는다. **폭을 붙드는 기제는 flex shrink 하나뿐이고, 사슬이 다섯 마디다**: `.tb-left { min-width: 0 }`(없으면 flex item의 기본 `min-width:auto`가 라벨 폭만큼 툴바의 하드 최소폭을 늘려 560px에서 `.tb-right`가 화면 밖으로 나간다 — 라벨 없던 시절엔 460px에서도 멀쩡했다) → `.tb-left > * { flex: none }`(없으면 `#status`가 두 줄로 접혀 툴바 높이가 43 → 49px로 뛴다)에 대해 `#toolbar .tb-picker { flex: 0 1 auto; min-width: 0 }`이 예외를 되돌려 받고 → **`#toolbar .tb-picker { display: flex }`** → **`#toolbar #ref-picker-btn { min-width: 0 }`** → 라벨 자신의 `overflow: hidden`(자동 최소 크기를 0으로 만든다). **`display: flex`가 그중 가장 조용히 깨지는 마디다** — `.tb-picker`가 블록이면 안쪽 `#ref-picker-btn`(`inline-flex`)이 flex item이 아니라서 줄어드는 몫을 물려받지 못하고 제 자연폭 그대로 상자를 넘쳐, 트리거가 아무리 좁아져도 라벨은 **한 번도 잘리지 않는다**(실측: 1280px 창에서 161자 브랜치인데 `scrollWidth == clientWidth`). 셰브론 `svg`에 `flex: none`을 주는 것도 같은 사슬의 일부다(없으면 화살표가 눌려 컨트롤로 안 읽힌다). **`#ref-picker-btn { min-width: 0 }`은 그 `display: flex`와 한 짝이라 둘 중 하나만 빠져도 결과가 같다** — `.tb-picker`가 flex 컨테이너가 된 순간 버튼은 flex item이고 기본 `min-width: auto`가 콘텐츠 기반 최소 크기(=`nowrap` 라벨의 텍스트 전체 폭)로 풀리는데, 라벨의 `overflow: hidden`은 **라벨 자신의** 자동 최소값만 0으로 만들 뿐 버튼의 min-content 기여를 줄이지 못한다. 그 줄은 옛 `max-width: 260px`을 **대체하며** 들어왔으니 "상한을 없앴으니 잉여"로 읽고 지우지 말 것. 피커 규칙을 `#toolbar`로 스코프한 것도 계약이다 — `.tb-picker`(0,1,0)는 `.tb-left > *`(0,1,0)와 특이도가 같아 **소스 순서로만** 이겼고, 그러면 피커 규칙을 한곳에 모으는 평범한 정리가 트리거를 조용히 `flex: none`으로 되돌린다. **`max-width`를 되살리지 말 것** — 한때 260px을 함께 걸었는데 실측상 좁은 창에서 두 안의 수치가 완전히 같았고(700/560/460px에서 221/81/0px) 161자 브랜치에서도 넘치지 않았다. 즉 상한은 오버플로 방어에 아무것도 보태지 않으면서 세 조각의 자연폭 350px을 **공간이 남는데도** 260px로 잘라 이 표식의 존재 이유를 깎았다. 둘 다 실측이고, happy-dom에는 레이아웃이 없어 유닛이 원리적으로 못 잡는다. 순수 로직은 `browser/repoLabel.ts`(커버리지 게이트 **안**)에 있고 `main.ts`는 배선만 한다 — 타입체크는 어느 쪽도 못 본다(`apps/viewer/tsconfig.json`의 include에 `browser/**`가 없다). 회귀망: `repo-label.test.ts` 35종 + `diff-refs.test.ts`의 `parseRepoRoot` 4종(bare가 핵심) + `toolbar-repo.e2e.ts` 8종(⑤ 링크된 워크트리 두 축, ⑥ watch 무-focus 수렴, ⑦ 브랜치 head가 워크트리 이름을 버리고 `#base-label`만 기준을 말함, ⑧ 넓은 창·좁은 창 두 폭의 레이아웃 — 뮤테이션으로 판별력 확인: `poll()`의 갱신을 지우면 ⑥만, `.tb-picker`의 `display:flex`를 지우면 ⑧의 넓은 창·좁은 창 `clipped` 단언이 **둘 다** 죽고, `min-width:0` 또는 `flex:none`을 지우면 ⑧의 좁은 창 단언만 죽는다 — 좁은 창의 `rightEdge`는 `display:flex`가 빠져도 통과한다: 트리거 상자 자체는 줄어들고 버튼만 그 위로 넘칠 뿐이라 `.tb-right`가 밀리지 않는다).
+
+**툴바의 두 축과 오른쪽 그룹의 순서**. 툴바는 왼쪽 `.tb-left`와 오른쪽 `.tb-right` 둘로 갈리고, **왼쪽은 진술만 오른쪽은 조작만** 담는다 — 왼쪽은 트리거 · 견줄 기준 · 개수 · 변경량이 한 문장으로 읽히고(위 두 항목), 오른쪽은 화면을 다룬다. 한때 `#diff-style-group`(Unified/Split)과 `#refresh`가 **왼쪽 한복판**에 앉아 그 문장을 두 동강 냈다(트리거와 견줄 기준 사이). 조작이 두 곳에 흩어지고 정보가 그 사이에 끼는 배치였다. 옮겨도 **폭은 손해 보지 않는다**(실측): 총 폭이 그대로라 트리거가 줄어들 몫도 그대로여서, 560px 창에서 트리거 160px · 넘침 54px로 옮기기 전과 **완전히 같은 값**이다. 오른쪽 순서는 `찾기 · 새로고침 │ Unified/Split · 트리 │ ⋯`이고 **순서 자체가 계약이다**. **① 찾기가 맨 앞이어야 한다 — 실측이다.** `#find-bar`는 돋보기 자리에서 340px로 펼쳐지는데 이 그룹은 `margin-left: auto`로 오른쪽 끝에 고정돼 있어, 바가 자라면 **그 왼쪽 이웃만** 밀린다. 찾기가 첫 자리면 밀릴 이웃이 없다(실측: 찾기 우선인 세 배치는 바를 열어도 모든 컨트롤 이동량 0px, 세그먼트를 앞에 두면 그 하나가 **−285px** 점프). 같은 이유로 `#find-bar`는 `#find-open` **바로 뒤**여야 한다. **② 가운데 셋은 순간 동작 / 상태 토글로 갈랐다.** 찾기·새로고침은 눌러도 화면에 흔적이 없고, Unified/Split·트리 토글은 지금 어떤지를 상시로 말한다. 118px 세그먼트가 두 무리 사이에 놓여 축의 경계와 시각적 경계가 겹친다. 새로고침이 두 번째인 것은 ①이 첫 자리를 못 내주므로 **정보 사슬에 가장 가까이 설 수 있는 자리**가 거기이기 때문이다. **③ 트리 토글이 `⋯` 바로 옆인 것은 메뉴의 `Hide file tree`가 같은 토글이기 때문이고**(항상 동기화되는 그 쌍 — 위 WHY 절), 레이아웃 짝이 `⋯`에 붙는 것은 메뉴 여섯 중 **넷이 레이아웃**이기 때문이다(Flatten · Tree on right · Hide file tree · Fold with tree). 예전엔 새로고침을 `⋯` 옆에 두고 메뉴 안 `Watch`(자동 갱신)의 수동 짝이라 적었는데, 그 인접 근거는 **여섯 중 하나**뿐이라 넷을 이기지 못한다. `⋯`가 마지막인 것은 **관례이지 기계적 제약이 아니다** — 메뉴는 툴바 아래로 떨어져 이웃을 가리지 않는다. 회귀망: `toolbar-order.e2e.ts` 3종(① 두 그룹의 소속과 순서, ② find 바를 열어도 어떤 컨트롤도 움직이지 않음, ③ 좁은 창에서 오른쪽 그룹이 안 눌림). **②는 ①의 중복이 아니다 — 뮤테이션으로 확인했다**: `.tb-right`의 `margin-left: auto`를 고정 마진으로 바꾸면 마크업 순서는 그대로라 ①은 통과하고 ②만 죽는다. 즉 ①은 순서를, ②는 그 순서의 **이유**(오른쪽 고정 앵커)를 지킨다.
+
+**툴바 전체 변경량**(`#change-totals` = `#change-add` + `#change-del`) — 개수(`#status`) **오른쪽**에서 "통틀어 몇 줄인가"를 말한다. 파일 수만으로는 규모를 못 읽는다: 176 file(s)가 한 줄씩 고친 것인지 통째로 새로 쓴 것인지 열기 전에는 갈리지 않는다. **세는 값의 출처가 계약이다** — `hunk`의 **숫자** 필드(`additionLines`/`deletionLines`)이고, `largeFile.ts`의 `countChangedLines`와 같은 곳이다. `FileDiffMetadata`에도 동명 필드가 있지만 그건 `string[]`이고 뷰어처럼 파일 전량으로 파싱한 diff에서는 새/옛 파일의 **전체 내용**이라, 세면 변경량이 아니라 파일 길이가 나온다(그 착각이 실제로 대형 파일 자동 접힘을 오작동시켰다 — 위 항목). 합산은 `renderPatch`가 이미 전량 파싱해 둔 `items`에서 하므로 git 호출도 파싱도 늘지 않는다. **git과 수치가 같다** — 실측: 176파일 워크트리에서 `git diff --numstat <merge-base>` 합이 `+17105 -435`이고 화면도 같다(바이너리 8개는 양쪽 다 줄 수에서 빠진다). e2e가 그 대조를 매번 한다: 기대값을 하드코딩하지 않고 스펙 안에서 git을 돌려 합산해 비교하므로, 클라이언트 재-diff가 git과 갈리면 바로 빨간불이 난다. 한쪽이 0이어도 **둘 다** 말하고(git·GitHub과 같다 — 자리가 사라지면 남은 숫자가 추가인지 삭제인지 색에만 의존하게 된다), 센 줄이 하나도 없으면(이미지만 바뀐 diff) 자리를 통째로 비운다. 갱신은 `renderPatch` **한 곳**뿐이다 — 로딩·실패 중에는 손대지 않는데, 그때 화면에는 직전 diff가 그대로 남아 있으므로 숫자도 그것이 맞기 때문이다. 색은 앱에 이미 있는 add·del 쌍을 쓴다(`--vd-success` / `#f85149` — grab 보내기의 ok·fail 상태가 쓰는 그 값이고, 둘이 diff의 add·del이라는 것은 `.grab-l-side` 주석이 이미 적고 있다). **엔진의 `--diffs-addition-base`를 쓰려 하지 말 것** — 그 토큰은 shadow root 안에만 살아서 툴바에서는 해석되지 않는다(그래서 파일 헤더 배지와 색 값을 공유하지 못하고 같은 값을 따로 적는다). 자릿수 구분자는 넣지 않는다 — `#status`도 헤더 배지도 생 숫자다. 회귀망: `change-totals.test.ts` 9종 + `toolbar-totals.e2e.ts` 3종(git 대조·색 구분·**전이**). ③은 **반드시 전이여야 한다** — clean 리포로 띄우면 첫 렌더가 곧 빈 분기라 두 span이 마크업 상태(빈 문자열) 그대로이고, 그러면 빈 분기의 `applyChangeTotals([])`를 통째로 지워도 초록이다(CLAUDE.md가 경고하는 lockfile 픽스처와 같은 vacuity 구조). 숫자가 실제로 쓰인 뒤 사라지는지를 봐야 한다. 뮤테이션으로 판별력 확인: 합산 배선을 지우면 ①②가, 빈 분기의 클리어를 지우면 ③이 죽는다.
+
+**빈 워킹트리에서의 자동 base 전환** — 워크트리 워크플로에서는 작업이 브랜치에 **커밋**돼 있어서 기본 뷰(미커밋 변경)가 **구조적으로** 비어 있다. 즉 볼 게 가장 많은 순간에 빈 화면이 뜨고, 새 워크트리를 팔 때마다 카드의 버튼을 한 번씩 눌러 줘야 했다(프리퍼런스 키가 리포 **경로**별이라 워크트리마다 새로 겪는다 — 실측: 미커밋 0건인데 `main` 대비 176 files인 워크트리). 그래서 고른 적이 없으면 볼 것이 있는 쪽을 연다. **판정을 새로 세우지 않고 카드 자신의 액션을 읽는다**(`shouldAutoViewBase`가 `model.actions`의 `switch-mode` 유무를 본다) — 카드가 전환을 권할 상황이 곧 전환할 가치가 있는 상황이라 조건이 두 곳으로 갈라지지 않는다. **불변식 셋이 계약이다**: ① 사용자가 고른 적 있으면 덮지 않는다(URL `base=` 또는 저장된 프리퍼런스 — `resolveCompareBase`가 `null`을 주는 것이 "고른 적 없음"의 정의이고, 모듈 초기화 때 캐시하면 피커로 고른 뒤에도 옛 값이 남아 선택을 덮으므로 **호출 시점에 다시 읽는다**). ② **토글로 감춰졌을 뿐 이 뷰에도 볼 것이 있으면**(untracked) 데려가지 않는다 — 카드가 두 선택지를 나란히 보여주는 편이 낫고, 이 경계선이 없으면 `empty-state.e2e.ts`의 기존 카드 스펙이 죽는다(실측: 그 한 줄을 지우면 ①만 빨개진다). ③ **저장하지 않는다** — 추론이지 사용자의 선택이 아니다. 저장하면 고른 적 없는 프리퍼런스가 생겨 불변식 ①이 이후 모든 자동 전환을 영구히 막는다(실측: `persist: true`로 바꾸면 새 스펙 ④만 빨개진다). 그래서 `applySelection`(사용자 경로, 저장함)과 `selectBase(next, {persist})`(공통 코어)가 갈라져 있고, 자동 경로는 후자를 `persist: false`로 부른다 — `applySelection`이 패널 닫기·포커스 복귀를 조기 반환보다 **앞에** 두는 순서도 그대로 보존해야 한다(이미 고른 행을 눌러도 피커는 닫혀야 한다). 루프 방지는 `autoBaseTried` 플래그다(전환 뒤엔 mode가 base라 조건 자체가 거짓이 되지만, 루프 없음이 코드에서 바로 읽히게 둔다). 회귀망: `empty-state.test.ts`의 `shouldAutoViewBase` 5종 + `empty-state.e2e.ts` ④⑤(④ 자동 전환 + 무-저장, ⑤ URL `base=HEAD`는 덮지 않음).
 
 **함정: Bun `$` 템플릿의 비ASCII 리터럴은 뭉개진다.** `` $`git … refs/remotes/origin/기능 …` `` 처럼 **리터럴**로 적으면 `uAE30uB2A5`라는 ASCII 텍스트가 된다(실측 코드포인트 `75 41 45 33 30 …`). `${보간}`으로 넘기면 온전하다(`ae30 b2a5`). 한글 브랜치명 테스트를 리터럴로 쓰면 한글이 아닌 브랜치를 만들어 놓고 **조용히 통과**한다 — 실제로 한 번 속았다.
 
@@ -124,6 +134,7 @@ cd scripts/parity && python3 -m http.server 8099 # http://127.0.0.1:8099/index.h
 - **`#diff`에 innerHTML을 쓰기 전엔 살아 있는 CodeView가 없는지 확인**: 위와 같은 이유로 이 노드는 CodeView가 `setup()`에서 자기 컨테이너를 append한 스크롤 컨테이너라, 덮어쓰면 그 컨테이너가 문서에서 떨어져 나간다. `CodeView.setup()`은 이미 setup된 인스턴스의 재부착을 거부하므로(`already setup`) 인스턴스를 새로 만들기 전까지 패널이 영구히 빈 채로 남는다. 그래서 `load()`의 실패 카드는 `!codeView`로 가드한다 — `!lastFiles`가 아니다: 변경 없는 리포는 `lastFiles === []`(truthy)지만 `teardownViews()`로 이미 codeView가 비워진 뒤라 카드를 쓰는 게 안전하고, `!lastFiles`로 걸면 그 경우에 상태 라벨만 실패를 말하고 화면은 "No changes."를 계속 주장한다. 회귀망: `load-failure.e2e.ts`.
 - **"Loading…" 자가 치유 — 세 부분이 함께여야 동작한다.** Bun 1.3.12의 `$`(ShellPromise)는 `diff.ts`의 `BUILD_CONCURRENCY=8` git 서브프로세스 버스트가 외부 프로세스 생성 경합과 겹치면 resolve도 reject도 없이 영구 pending이 된다(자식은 사라지고 좀비도 없고 이벤트 루프도 정상인데 프라미스만 안 끝난다 — 실측). `ShellPromise`엔 `.timeout()`/`.kill()`이 없어 `Promise.race`가 유일한 레버다. 예전엔 `singleFlight`가 키를 `.finally()`에서만 지워 그 키가 **영구 오염**되고 이후 모든 요청이 죽은 프라미스에 합류했다. 지금은 ① `singleFlight`가 flight를 타임아웃과 race해 키를 풀고(`SingleFlightTimeoutError`로 호출자가 타임아웃을 구분한다), ② `awaitFlight`가 **타임아웃만** 503+`Retry-After`로 흡수하며(그 외 에러는 다시 던져 기존 동작 보존), ③ `browser/main.ts`의 `fetchDiff`가 503·네트워크 실패를 1회 재시도한다(403·400은 terminal). **따로 넣으면 어느 쪽도 동작하지 않는다** — 키를 안 풀고 재시도하면 같은 죽은 프라미스에 다시 합류한다. **상수 제약은 per-flight가 아니라 합이다**: `/api/diff`가 `resolveBaseCached` → `diffFlight`를 순차로 두 번 기다리므로 45+45=90 < `idleTimeout` 120(슬랙 30초). 재시도가 1회인 이유도 `BUILD_CONCURRENCY=8`이 호출당이라(전역 세마포어 아님) 시도가 겹치면 동시 git 서브프로세스가 배로 늘어 재시도가 스스로를 느리게 만들기 때문이다. **덮지 않는 곳**: `isGitRepo`는 flight 앞에서, `getRepoSummary`·`getFileBytes`는 뒤에서 돌고 flight로 안 감싸였다 — 거기서 매달리면 예전 실패 모드 그대로 `idleTimeout`이 소켓을 닫으며, `/api/blob`은 클라이언트 재시도가 없어 이미지가 그냥 안 뜬다. 회귀망: `diff-server.test.ts`의 실제 HTTP 503 2종 + `self-heal.e2e.ts`.
 - **`server.ts`의 `baseCache`는 반드시 모듈 스코프에 남아야 한다** (`diffCache`와 달리 `createHandler` 안으로 옮기지 마라). `diff-server.test.ts`의 "diffFlight 타임아웃" 테스트가 기본 타임아웃 서버로 캐시를 데운 뒤 **별도로 새로 띄운** `flightTimeoutMs:1` 서버가 그 warm 항목을 그대로 봐야만, `baseFlight`가 마이크로태스크로 1ms 레이스를 이기고 제어가 `diffFlight`까지 도달한다. 옮기면(구조적 격리라는 그럴듯한 이유로 그럴 수 있다) 두 번째 서버가 빈 캐시로 시작해 `baseFlight`가 miss로 되돌아가고, 그 테스트는 **조용히** 첫 번째 테스트와 똑같은 `baseFlight` 가드만 다시 증명한다 — 실패가 아니라 무증상 퇴화다. 두 테스트가 **정반대 조건**(하나는 캐시 미스, 하나는 히트)에 의존하므로 공용 픽스처로 합치지도 마라.
+- **빈 상태의 문구는 `/api/summary`가 와야 정해진다 — 먼저 그리면 말을 바꾼다.** `renderPatch`의 `files.length === 0` 분기는 한때 `<div id="empty">No changes.</div>`를 **동기로** 써 놓고, `enrichEmptyState()`가 요약을 받아 온 뒤 정보형 카드로 덮었다. 그 사이가 실측 60~80ms라 사용자에게는 "없다"고 한 번 말한 뒤 말을 바꾸는 것으로 보인다(실측: 첫 로드 673ms `No changes.` → 753ms `No tracked changes …`; head를 고르면 282ms → 340ms). **자동 base 전환이 걸리는 경우가 가장 나쁘다** — 볼 것이 있는데도 없다고 말한 뒤 diff가 뜬다. 그래서 지금은 자리만 잡고(`LOADING_MARKUP` — `load()`의 첫 로드 표시와 **같은 마크업이어야 한다**: 다른 것을 그리면 로딩에서 로딩으로 넘어가는 자리에서 한 번 더 깜박인다) 문구는 `enrichEmptyState`가 한 번만 쓴다. `No changes.`는 이제 **폴백**이고 요약 fetch가 실패했을 때만 나온다 — 그때 `data-loading`을 함께 걷어내지 않으면 화면이 영원히 로딩이다(노드 동일성은 유지해 marker 가드가 계속 맞게 둔다). **이 종류는 최종 상태로는 원리적으로 안 보인다**(끝나고 나면 옳은 카드가 떠 있다) — 회귀망은 `addInitScript`로 첫 페인트 전에 MutationObserver를 걸어 `#empty`가 거쳐 간 문구를 전부 기록한다(`empty-state.e2e.ts` ⑥⑦, 폴백은 ⑧이 `/api/summary`를 route abort로 막아 찌른다). 그 관찰자는 `document.documentElement`가 아니라 **`document`**를 봐야 한다 — document-start에는 `documentElement`가 아직 없어 기록이 통째로 빈다(실측). 뮤테이션으로 판별력 확인: 옛 동기 문구를 되돌리면 ⑥⑦만, 폴백 write를 지우면 ⑧만 죽는다.
 - **커버리지 100%가 무엇을 뜻하지 않는지 알 것.** `bunfig.toml`의 게이트는 line·function·statement만 세고 **branch를 세지 않는다.** 그래서 `if (x instanceof Response) return x;` 같은 한 줄 가드는 `if`가 실행되기만 하면 covered로 찍히고, 그 `return`이 한 번도 안 나가도 100%가 유지된다(실제로 503 반환 경로 4개가 그 상태였다). 새 분기를 넣을 때 커버리지 초록을 증거로 받지 말고, **일부러 그 분기로 들어가는 테스트**를 따로 둘 것.
 - **대형 파일 자동 접힘의 기준은 "변경량"이지 "파일 길이"가 아니다 — `FileDiffMetadata.additionLines`는 이름이 거짓말을 한다.** 뷰어는 첫 등장한 대형 파일을 접어서 마운트하는데(`main.ts`의 `isLargeFile`), 그 판정에 쓰는 `changedLines`를 예전엔 `fileDiff.additionLines.length + fileDiff.deletionLines.length`로 셌다. 그런데 `FileDiffMetadata`의 그 두 필드(**`string[]`**)는 변경된 줄이 아니다 — 뷰어는 `parseDiffFromFile`로 파일 **전량**에서 diff를 만들어 `isPartial === false`이고, 그때 둘은 각각 새/옛 파일의 **전체 내용**이다(`types.ts`가 그렇게 문서화한다). 즉 실효 판정식이 "파일 길이 × 2 > 1500" ≈ "파일 길이 > 750"이 되어, 몇 줄만 고친 긴 문서가 접힌 채로 떴다(실측: **headerlab**의 1,166줄 `CLAUDE.md`에 +28/−2를 낸 변경이 2,306으로 읽혔다 — 이 레포의 CLAUDE.md가 아니다. 그 워킹트리에서 5개 파일이 이렇게 잘못 접혔다). 실제 변경 줄 수는 **`Hunk` 쪽 동명 `number` 필드**(`hunk.additionLines`/`hunk.deletionLines` — `+`/`-` 프리픽스 줄 수)에만 있고, 파일 헤더에 뜨는 `-M +N` 배지도 정확히 그걸 센다(`createFileHeaderElement` — 삭제 span을 먼저 push하고 `[data-metadata]`에 `order`가 없어 화면 순서가 `-M +N`이지 `+N -M`이 아니다) — 화면의 배지와 접힘 판정이 같은 값을 봐야 사용자에게 일관된다. `largeFile.ts`의 `countChangedLines(hunks)`가 그 합이다. **이 종류의 버그는 유닛이 원리적으로 못 잡는다**: `isLargeFile` 자체는 옳았고 호출부가 틀린 값을 넘겼을 뿐이라, 그 함수의 기존 테스트 다섯 개가 전부 통과한 채로 버그가 살아 있었다(같은 이유로 `main.ts`는 커버리지 게이트 밖이고 배선은 e2e가 맡는다). 회귀망: `large-file-collapse.e2e.ts` 3종이 세 방향을 **한 파일에서** 지킨다 — ① 2,000줄 파일에 3줄 변경 → 안 접힘, ② 800줄 전량 재작성(1,600줄 변경) → 접힘, ③ 1,000줄 lockfile(20줄마다 2줄만 바뀌어 변경량 196줄 → 임계값 한참 아래) → 이름 규칙으로만 접힘. 셋 다 뮤테이션으로 판별력을 확인했다(`countChangedLines`를 0으로 퇴화시키면 ②만, `LOCKFILE_NAMES`를 비우면 ③만 죽는다). **②③을 기존 스펙에 맡기면 안 된다** — 한때 `retokenize-cache.e2e.ts`(big.ts)와 `lockfile-freeze.e2e.ts`가 그 둘을 지킨다고 여기 적혀 있었지만 **둘 다 접힘 상태를 단언하지 않는다**: 전자는 헤더를 click해 펼친 뒤 하이라이트를 기다리고, 후자는 `hasHeader`만 보는데 헤더는 접혔든 펼쳐졌든 있다. 자동 접힘이 사라지면 그 click이 반대로 파일을 접어 뒤따르는 단언이 깨지는 **부수효과**로만 빨간불이 될 뿐이다. 게다가 그 lockfile 픽스처는 8k에서 1,596줄·30k에서 5,996줄을 변경하므로(실측) **크기 규칙만으로 이미 접힌다** — `LOCKFILE_NAMES`를 통째로 비워도 그 스펙은 초록이라 이름 규칙의 회귀망이 아니었다.
 - **포크 패키지는 import 경로 + 재구성 타입만 수정** — 렌더/로직 변경 금지 (Foundation 원칙). 오버홀은 별도 plan에서. 예외는 건별 합의 + `[diffdeck]` 주석으로 upstream 이탈을 코드에 표기 + e2e 회귀망 동반일 때만. 현재 예외 5건 (1~3·5는 `packages/diffs`, 4는 `packages/trees`):
diff --git a/apps/viewer/__tests__/change-totals.test.ts b/apps/viewer/__tests__/change-totals.test.ts
new file mode 100644
index 0000000..5f44ad9
--- /dev/null
+++ b/apps/viewer/__tests__/change-totals.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, test } from "bun:test";
+import { changeTotalsView, sumChangeTotals } from "../browser/changeTotals.ts";
+
+const file = (additionLines: number, deletionLines: number) => ({
+	hunks: [{ additionLines, deletionLines }],
+});
+
+describe("sumChangeTotals", () => {
+	test("한 파일의 hunk를 합한다", () => {
+		expect(
+			sumChangeTotals([
+				{
+					hunks: [
+						{ additionLines: 3, deletionLines: 1 },
+						{ additionLines: 4, deletionLines: 0 },
+					],
+				},
+			]),
+		).toEqual({ additions: 7, deletions: 1 });
+	});
+
+	test("여러 파일을 가로질러 합한다", () => {
+		expect(sumChangeTotals([file(10, 2), file(5, 3), file(1, 0)])).toEqual({
+			additions: 16,
+			deletions: 5,
+		});
+	});
+
+	// 이미지·바이너리는 hunk가 없다. 0을 보태고 조용히 지나가야 한다 —
+	// 여기서 터지면 이미지가 하나 섞인 diff마다 툴바가 죽는다.
+	test("hunk가 없는 파일은 0을 보탠다", () => {
+		expect(sumChangeTotals([file(4, 1), { hunks: [] }])).toEqual({
+			additions: 4,
+			deletions: 1,
+		});
+	});
+
+	test("파일이 없으면 0", () => {
+		expect(sumChangeTotals([])).toEqual({ additions: 0, deletions: 0 });
+	});
+});
+
+describe("changeTotalsView", () => {
+	test("추가와 삭제를 각자의 자리에 넣는다", () => {
+		const v = changeTotalsView([file(17022, 435)]);
+		expect(v.additions).toBe("+17022");
+		// 구분자는 삭제 쪽이 품고 온다 — 조각 사이에 공백 텍스트 노드를
+		// 만들지 않으려는 것으로, #picker-branch와 같은 관례다.
+		expect(v.deletions).toBe(" -435");
+	});
+
+	// git·GitHub이 그렇듯 한쪽이 0이어도 둘 다 말한다 — "삭제가 없었다"는
+	// 것도 정보이고, 자리가 사라지면 옆 숫자가 무엇인지 흔들린다.
+	test("한쪽이 0이어도 둘 다 말한다", () => {
+		expect(changeTotalsView([file(5, 0)])).toEqual({
+			additions: "+5",
+			deletions: " -0",
+		});
+		expect(changeTotalsView([file(0, 9)])).toEqual({
+			additions: "+0",
+			deletions: " -9",
+		});
+	});
+
+	// 이미지만 바뀐 diff. 파일은 있는데 센 줄이 없으므로 `+0 -0`을 쓰면
+	// 아무 말도 아닌 숫자가 툴바를 차지한다.
+	test("센 줄이 하나도 없으면 아무 말도 하지 않는다", () => {
+		expect(changeTotalsView([{ hunks: [] }])).toEqual({
+			additions: "",
+			deletions: "",
+		});
+	});
+
+	test("파일 목록이 비면 아무 말도 하지 않는다", () => {
+		expect(changeTotalsView([])).toEqual({ additions: "", deletions: "" });
+	});
+
+	// 자릿수 구분자를 넣지 않는다 — #status의 "176 file(s)"도, 엔진이 파일
+	// 헤더에 그리는 배지도 생 숫자다. 한 화면에서 표기가 갈리면 안 된다.
+	test("천 단위 구분자를 넣지 않는다", () => {
+		expect(changeTotalsView([file(1234567, 0)]).additions).toBe("+1234567");
+	});
+});
diff --git a/apps/viewer/__tests__/diff-command.test.ts b/apps/viewer/__tests__/diff-command.test.ts
index a18e9ef..3c2b18b 100644
--- a/apps/viewer/__tests__/diff-command.test.ts
+++ b/apps/viewer/__tests__/diff-command.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { $ } from "bun";
@@ -299,3 +299,102 @@ describe("getDiffFiles base mode", () => {
 		expect(baseB?.newContents).toContain("BETA_working");
 	});
 });
+
+describe("head selection (rev → rev)", () => {
+	// init -- A (main)
+	//      \-- B (feat)
+	// 브랜치를 head로 보면 "그 브랜치가 갈라진 뒤 한 일"만 보여야 한다.
+	const branchOffAndAdvanceMain = async (): Promise<void> => {
+		await $`git -C ${repo} branch -M main`;
+		await $`git -C ${repo} checkout -qb feat`;
+		writeFileSync(join(repo, "a.txt"), "one\ntwo\n");
+		await $`git -C ${repo} commit -qam feat`;
+		await $`git -C ${repo} checkout -q main`;
+		writeFileSync(join(repo, "b.txt"), "main moved on\n");
+		await $`git -C ${repo} add b.txt`;
+		await $`git -C ${repo} commit -qm "main moves"`;
+	};
+
+	test("shows the branch's committed work, not the working tree", async () => {
+		await branchOffAndAdvanceMain();
+		// 워킹트리를 더럽힌다 — head가 커밋된 rev면 이건 보이면 안 된다.
+		writeFileSync(join(repo, "a.txt"), "one\nuncommitted\n");
+
+		const files = await getDiffFiles(repo, {
+			mode: "base",
+			ref: "main",
+			head: "feat",
+		});
+		expect(files.map((f) => f.name)).toEqual(["a.txt"]);
+		expect(files[0]?.newContents).toBe("one\ntwo\n");
+	});
+
+	// **갈림점은 head 기준이어야 한다.** `merge-base(ref, HEAD)`로 재면 지금
+	// 워크트리의 HEAD(main)와 갈림점을 잡게 되는데, 그 둘은 아무 관계도 없다
+	// — 남의 브랜치를 보면서 내 위치를 기준 삼는 셈이다. 그러면 main이 그
+	// 사이 만든 b.txt가 "feat에서 삭제됨"으로 끼어든다.
+	test("measures the merge base against the head, not the current HEAD", async () => {
+		await branchOffAndAdvanceMain();
+		const files = await getDiffFiles(repo, {
+			mode: "base",
+			ref: "main",
+			head: "feat",
+		});
+		expect(files.map((f) => f.name)).not.toContain("b.txt");
+		expect(files).toHaveLength(1);
+	});
+
+	test("a committed head carries no untracked files", async () => {
+		await branchOffAndAdvanceMain();
+		writeFileSync(join(repo, "scratch.txt"), "not in any commit\n");
+
+		const files = await getDiffFiles(repo, {
+			untracked: true,
+			mode: "base",
+			ref: "main",
+			head: "feat",
+		});
+		expect(files.some((f) => f.status === "untracked")).toBe(false);
+	});
+
+	// **참조 이름이 트래킹된 경로와 같을 때.** `docs`·`src`·`test` 같은 이름은
+	// 흔한데, `git diff <base> <ref>`에 `--`가 없으면 git이 rev인지 path인지
+	// 못 정해 `ambiguous argument`로 죽는다. 그 실패는 `2>/dev/null` +
+	// `.nothrow()`가 빈 문자열로 삼켜 **에러 없는 "변경 없음"** 이 된다 —
+	// 사용자는 피커에서 그 브랜치를 고르기만 해도 이 상태에 들어간다.
+	// 기존 픽스처의 `feat`/`main`은 원리적으로 이 결함을 못 잡는다.
+	test("a branch named like a tracked directory still diffs", async () => {
+		await $`git -C ${repo} branch -M main`;
+		mkdirSync(join(repo, "docs"));
+		writeFileSync(join(repo, "docs", "a.md"), "on main\n");
+		await $`git -C ${repo} add docs`;
+		await $`git -C ${repo} commit -qm docs`;
+		await $`git -C ${repo} checkout -qb docs`;
+		writeFileSync(join(repo, "docs", "b.md"), "on the branch\n");
+		await $`git -C ${repo} add docs`;
+		await $`git -C ${repo} commit -qm "more docs"`;
+		await $`git -C ${repo} checkout -q main`;
+
+		const files = await getDiffFiles(repo, {
+			mode: "base",
+			ref: "main",
+			head: "docs",
+		});
+		expect(files.map((f) => f.name)).toEqual(["docs/b.md"]);
+	});
+
+	// 이미지 카드가 텍스트 diff와 다른 축을 보면 안 된다.
+	test("getFileBytes reads the new side from the head revision", async () => {
+		await branchOffAndAdvanceMain();
+		writeFileSync(join(repo, "a.txt"), "one\nuncommitted\n");
+
+		const bytes = await getFileBytes(repo, "a.txt", "new", {
+			mode: "base",
+			ref: "main",
+			head: "feat",
+		});
+		expect(new TextDecoder().decode(bytes ?? new Uint8Array())).toBe(
+			"one\ntwo\n",
+		);
+	});
+});
diff --git a/apps/viewer/__tests__/diff-fingerprint.test.ts b/apps/viewer/__tests__/diff-fingerprint.test.ts
index f1cde7c..e10e399 100644
--- a/apps/viewer/__tests__/diff-fingerprint.test.ts
+++ b/apps/viewer/__tests__/diff-fingerprint.test.ts
@@ -22,6 +22,25 @@ afterEach(() => {
 });
 
 describe("repoFingerprint", () => {
+	// head가 브랜치면 그 브랜치가 움직였을 때 캐시가 깨져야 한다 — 이 필드가
+	// 막으려는 유일한 실패다. 다른 head 테스트들이 지나가며 라인 커버리지로는
+	// 초록이지만(게이트는 branch를 안 센다) 이 시나리오를 찌르는 것은 없었다.
+	test("a moving head branch changes the fingerprint", async () => {
+		await $`git -C ${repo} checkout -qb feat`;
+		writeFileSync(join(repo, "a.txt"), "one\ntwo\n");
+		await $`git -C ${repo} commit -qam feat`;
+		await $`git -C ${repo} checkout -q -`;
+
+		const before = await repoFingerprint(repo, { head: "feat" });
+
+		await $`git -C ${repo} checkout -q feat`;
+		writeFileSync(join(repo, "a.txt"), "one\ntwo\nthree\n");
+		await $`git -C ${repo} commit -qam more`;
+		await $`git -C ${repo} checkout -q -`;
+
+		expect(await repoFingerprint(repo, { head: "feat" })).not.toBe(before);
+	});
+
 	test("is non-empty and stable while nothing changes", async () => {
 		const fp1 = await repoFingerprint(repo);
 		const fp2 = await repoFingerprint(repo);
diff --git a/apps/viewer/__tests__/diff-refs.test.ts b/apps/viewer/__tests__/diff-refs.test.ts
index c5de5be..1000f3b 100644
--- a/apps/viewer/__tests__/diff-refs.test.ts
+++ b/apps/viewer/__tests__/diff-refs.test.ts
@@ -3,7 +3,12 @@ import { mkdtempSync, realpathSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { $ } from "bun";
-import { getRefs, parseRefList, parseWorktreeList } from "../server/refs.ts";
+import {
+	getRefs,
+	parseRefList,
+	parseRepoRoot,
+	parseWorktreeList,
+} from "../server/refs.ts";
 
 // `git worktree list --porcelain -z`의 실측 형식(git 2.54.0): 속성 한 줄마다
 // NUL이 붙고, 레코드 사이는 빈 항목이다.
@@ -15,6 +20,53 @@ const wt = (...records: string[][]): string =>
 const refs = (...records: string[][]): string =>
 	records.map((fields) => `${fields.join("\0")}\0`).join("\n");
 
+describe("parseRepoRoot", () => {
+	// git은 메인 워크트리를 **항상 먼저** 낸다 — 링크된 워크트리나 중첩
+	// 워크트리에서 명령을 실행해도 그렇다(실측: 평범·bare·중첩 셋 다).
+	// 그래서 리포 루트는 git 호출을 늘리지 않고 첫 레코드에서 얻는다.
+	test("takes the first record — the main worktree", () => {
+		const raw = wt(
+			["worktree /repo", "HEAD abc", "branch refs/heads/main"],
+			[
+				"worktree /repo/.claude/worktrees/feat",
+				"HEAD abc",
+				"branch refs/heads/feat",
+			],
+		);
+		expect(parseRepoRoot(raw)).toBe("/repo");
+	});
+
+	// **bare가 정확히 이 함수가 필요한 이유다.** parseWorktreeList는 bare를
+	// 걸러내므로(워킹트리가 없어 고를 수 없다) 그 결과의 첫 항목은 메인이
+	// 아니라 링크된 워크트리다 — 실측으로 확인했다. 필터 전 원본을 읽어야
+	// 리포 이름을 옳게 말한다.
+	test("keeps the bare main worktree that parseWorktreeList drops", () => {
+		const raw = wt(
+			["worktree /srv/myproj.git", "bare"],
+			["worktree /srv/wt-feat", "HEAD abc", "branch refs/heads/feat"],
+		);
+		expect(parseRepoRoot(raw)).toBe("/srv/myproj.git");
+		expect(parseWorktreeList(raw).map((w) => w.path)).toEqual(["/srv/wt-feat"]);
+	});
+
+	test("keeps a prunable main worktree too", () => {
+		const raw = wt(
+			[
+				"worktree /repo",
+				"HEAD abc",
+				"prunable gitdir file points to non-existent location",
+			],
+			["worktree /wt", "HEAD abc", "branch refs/heads/feat"],
+		);
+		expect(parseRepoRoot(raw)).toBe("/repo");
+	});
+
+	test("returns null when git said nothing", () => {
+		expect(parseRepoRoot("")).toBeNull();
+		expect(parseRepoRoot("\0")).toBeNull();
+	});
+});
+
 describe("parseWorktreeList", () => {
 	test("reads path, branch and head from an attached worktree", () => {
 		const out = parseWorktreeList(
diff --git a/apps/viewer/__tests__/diff-selection.test.ts b/apps/viewer/__tests__/diff-selection.test.ts
index ca7118b..df6e097 100644
--- a/apps/viewer/__tests__/diff-selection.test.ts
+++ b/apps/viewer/__tests__/diff-selection.test.ts
@@ -146,3 +146,95 @@ describe("selectionCacheKey with an explicit base", () => {
 		);
 	});
 });
+
+describe("parseSelection with an explicit head", () => {
+	test("head is the working tree unless asked otherwise", () => {
+		expect(parseSelection(new URLSearchParams("repo=/r")).head).toEqual({
+			kind: "worktree",
+		});
+	});
+
+	test("an empty head falls back to the working tree", () => {
+		expect(parseSelection(new URLSearchParams("repo=/r&head=")).head).toEqual({
+			kind: "worktree",
+		});
+	});
+
+	// 브랜치를 head로 보면 워킹트리를 거치지 않으므로 커밋된 것만 보인다.
+	test("head names a ref to view instead of the working tree", () => {
+		expect(
+			parseSelection(new URLSearchParams("repo=/r&head=feature/x")).head,
+		).toEqual({ kind: "ref", ref: "feature/x" });
+	});
+
+	// base와 달리 HEAD를 정규화하지 않는다. base=HEAD는 "커밋 안 한 것만"이라
+	// 워킹트리 뷰와 같지만, head=HEAD는 **커밋된 HEAD**를 보는 것이라 워킹트리
+	// 뷰와 다르다(미커밋 변경이 빠진다). 둘을 합치면 그 구분이 사라진다.
+	test("head=HEAD stays a ref — it is not the working tree", () => {
+		expect(
+			parseSelection(new URLSearchParams("repo=/r&head=HEAD")).head,
+		).toEqual({ kind: "ref", ref: "HEAD" });
+	});
+
+	test("head and base are independent axes", () => {
+		const sel = parseSelection(
+			new URLSearchParams("repo=/r&base=main&head=dev"),
+		);
+		expect(sel.base).toEqual({ kind: "ref", ref: "main" });
+		expect(sel.head).toEqual({ kind: "ref", ref: "dev" });
+	});
+});
+
+describe("selectionCacheKey with an explicit head", () => {
+	const sel = (query: string) => parseSelection(new URLSearchParams(query));
+
+	// 계약: 키는 flight 클로저가 읽는 모든 입력의 전함수여야 한다. head가
+	// 빠지면 워킹트리 뷰와 브랜치 뷰가 같은 슬롯에 합류해 한쪽이 남의 diff를
+	// 받는다 — 예전에 해석된 base ref가 빠져 있어 실제로 겪은 그 버그다.
+	test("separates a worktree head from a ref head", () => {
+		expect(selectionCacheKey(sel("repo=/r"), null)).not.toBe(
+			selectionCacheKey(sel("repo=/r&head=dev"), null),
+		);
+	});
+
+	test("separates two different ref heads", () => {
+		expect(selectionCacheKey(sel("repo=/r&head=dev"), null)).not.toBe(
+			selectionCacheKey(sel("repo=/r&head=main"), null),
+		);
+	});
+
+	test("the same head lands on the same slot", () => {
+		expect(selectionCacheKey(sel("repo=/r&head=dev"), null)).toBe(
+			selectionCacheKey(sel("repo=/r&head=dev"), null),
+		);
+	});
+
+	// 커밋된 rev에는 "아직 커밋 안 한 것"이 없다. 곧이곧대로 답하면
+	// `git diff <rev> <rev>`가 되어 에러 없이 빈 화면이 되므로, 의미 없는
+	// 조합을 유일하게 말이 되는 해석으로 푼다.
+	test("a rev head with a working-tree base resolves to auto", () => {
+		for (const q of [
+			"head=feat",
+			"head=feat&base=HEAD",
+			"head=feat&mode=working",
+		]) {
+			const sel = parseSelection(new URLSearchParams(q));
+			expect(sel.base).toEqual({ kind: "auto" });
+			expect(sel.head).toEqual({ kind: "ref", ref: "feat" });
+		}
+	});
+
+	// 사용자가 고른 진짜 base는 그대로 둔다 — 정규화는 "빈 화면 조합" 하나만
+	// 건드린다.
+	test("an explicit base ref survives alongside a head", () => {
+		const sel = parseSelection(new URLSearchParams("head=feat&base=develop"));
+		expect(sel.base).toEqual({ kind: "ref", ref: "develop" });
+	});
+
+	// 워킹트리를 보는 기본 뷰는 정규화 대상이 아니다.
+	test("a worktree head keeps the working-tree base", () => {
+		expect(parseSelection(new URLSearchParams("")).base).toEqual({
+			kind: "head",
+		});
+	});
+});
diff --git a/apps/viewer/__tests__/diff-server.test.ts b/apps/viewer/__tests__/diff-server.test.ts
index 63d1462..8928252 100644
--- a/apps/viewer/__tests__/diff-server.test.ts
+++ b/apps/viewer/__tests__/diff-server.test.ts
@@ -768,3 +768,88 @@ describe("diff server 400 kinds are distinguishable", () => {
 		expect(res.headers.get("x-diff-error")).toBeNull();
 	});
 });
+
+describe("head selection over HTTP", () => {
+	const diffUrl = (query: string): string =>
+		`${base}/api/diff?repo=${encodeURIComponent(repo)}&token=${handle.token}&${query}`;
+
+	test("views the branch's committed content, not the working tree", async () => {
+		await $`git -C ${repo} branch -M main`;
+		await $`git -C ${repo} checkout -qb feat`;
+		writeFileSync(join(repo, "a.txt"), "three\n");
+		await $`git -C ${repo} commit -qam feat`;
+		await $`git -C ${repo} checkout -q main`;
+
+		const res = await fetch(diffUrl("base=main&head=feat"));
+		expect(res.status).toBe(200);
+		const files = (await res.json()) as {
+			name: string;
+			newContents: string;
+		}[];
+		expect(files.map((f) => f.name)).toEqual(["a.txt"]);
+		expect(files[0]?.newContents).toBe("three\n");
+	});
+
+	// 표식을 base와 가르는 이유는 클라이언트의 자가복구가 다르기 때문이다.
+	// 커버리지 게이트는 branch를 세지 않으므로(CLAUDE.md) 이 400 경로로
+	// 일부러 들어간다 — 초록불은 "이 분기가 나갔다"는 증거가 아니다.
+	test("an unknown head ref is refused with its own marker", async () => {
+		const res = await fetch(diffUrl("head=no-such-branch"));
+		expect(res.status).toBe(400);
+		expect(res.headers.get("x-diff-error")).toBe("unknown-head");
+	});
+
+	// **보안 경계다.** head 값은 이제 `git diff`의 두 번째 인자로도 가므로,
+	// 첫 글자가 `-`인 참조가 닿으면 `--output=<path>`로 데몬이 쓸 수 있는
+	// 아무 경로나 만들거나 비운다. verifyBaseRef가 그 전에 끊어야 한다.
+	test("a head that looks like an option never reaches git", async () => {
+		const res = await fetch(
+			diffUrl(`head=${encodeURIComponent("--output=/tmp/diffdeck-pwned")}`),
+		);
+		expect(res.status).toBe(400);
+		expect(res.headers.get("x-diff-error")).toBe("unknown-head");
+		expect(existsSync("/tmp/diffdeck-pwned")).toBe(false);
+	});
+
+	// **세 라우트가 각자 400을 내야 한다.** 예전엔 `/api/diff`만 이 경로로
+	// 들어가는 테스트가 있었고, 나머지 둘은 `resolveSelectionHead` 호출
+	// **라인**만 실행돼 라인 커버리지로는 초록이었다 — 게이트가 branch를 안
+	// 세므로 return이 한 번도 안 나가도 100%가 유지된다(CLAUDE.md).
+	test("summary refuses an unknown head with the same marker", async () => {
+		const res = await fetch(
+			`${base}/api/summary?repo=${encodeURIComponent(repo)}&token=${handle.token}&head=no-such-branch`,
+		);
+		expect(res.status).toBe(400);
+		expect(res.headers.get("x-diff-error")).toBe("unknown-head");
+	});
+
+	// blob은 이미지 전용이라 비-이미지 경로는 head 해석 **전에** 404다.
+	// 확장자가 .png여야 이 분기까지 도달한다.
+	test("blob refuses an unknown head with the same marker", async () => {
+		const res = await fetch(
+			`${base}/api/blob?repo=${encodeURIComponent(repo)}&token=${handle.token}&path=logo.png&side=new&head=no-such-branch`,
+		);
+		expect(res.status).toBe(400);
+		expect(res.headers.get("x-diff-error")).toBe("unknown-head");
+	});
+
+	// 이미지 카드가 텍스트 diff와 같은 축을 본다는 주장은 지금까지 유닛
+	// (`getFileBytes`)에만 있었다 — HTTP 레벨에서 head를 실어 부르는 테스트가
+	// 아예 없어서 라우트의 배선은 검증된 적이 없다.
+	test("blob reads the new side from the head revision", async () => {
+		await $`git -C ${repo} branch -M main`;
+		await $`git -C ${repo} checkout -qb feat`;
+		writeFileSync(join(repo, "logo.png"), "from the branch\n");
+		await $`git -C ${repo} add logo.png`;
+		await $`git -C ${repo} commit -qm feat`;
+		await $`git -C ${repo} checkout -q main`;
+		// 워킹트리를 더럽힌다 — head가 rev면 이건 보이면 안 된다.
+		writeFileSync(join(repo, "logo.png"), "uncommitted\n");
+
+		const res = await fetch(
+			`${base}/api/blob?repo=${encodeURIComponent(repo)}&token=${handle.token}&path=logo.png&side=new&base=main&head=feat`,
+		);
+		expect(res.status).toBe(200);
+		expect(await res.text()).toBe("from the branch\n");
+	});
+});
diff --git a/apps/viewer/__tests__/empty-state.test.ts b/apps/viewer/__tests__/empty-state.test.ts
index 59ee925..2deeac9 100644
--- a/apps/viewer/__tests__/empty-state.test.ts
+++ b/apps/viewer/__tests__/empty-state.test.ts
@@ -3,7 +3,9 @@ import { describe, expect, test } from "bun:test";
 import {
 	buildEmptyStateModel,
 	renderEmptyState,
+	shouldAutoViewBase,
 } from "../browser/emptyState.ts";
+import type { EmptyStateModel } from "../browser/emptyState.ts";
 import type { RepoSummary } from "../server/summary.ts";
 
 const summary = (over: Partial<RepoSummary> = {}): RepoSummary => ({
@@ -126,6 +128,19 @@ describe("buildEmptyStateModel", () => {
 		expect(m.context).toBe("detached @ abc1234");
 	});
 
+	// head가 커밋된 rev면 서버가 워킹트리를 재지 않고 null을 준다. 그때
+	// "Working tree clean"이라고 말하면 보고 있지도 않은 워킹트리에 대해
+	// 단언하는 것 — null을 도입한 이유가 그것이다.
+	test("unmeasured working tree makes no claim about it", () => {
+		const m = buildEmptyStateModel(
+			summary({ workingFiles: null, untrackedFiles: null }),
+			{ mode: "working", untrackedShown: false },
+		);
+		expect(m.headline).toBe("No changes");
+		// 재지 않은 개수로 "숨겨진 untracked가 있다"고 권하지도 않는다.
+		expect(m.actions.some((a) => a.kind === "show-untracked")).toBe(false);
+	});
+
 	test("working mode ignores a zero baseFiles for actions", () => {
 		const m = buildEmptyStateModel(summary({ baseFiles: 0 }), {
 			mode: "working",
@@ -193,3 +208,76 @@ describe("renderEmptyState", () => {
 		expect(el.querySelectorAll("button.empty-action").length).toBe(0);
 	});
 });
+
+describe("shouldAutoViewBase", () => {
+	// 워크트리 워크플로에서는 작업이 브랜치에 **커밋**돼 있어서 기본 뷰
+	// (미커밋 변경)가 구조적으로 비어 있다. 정작 볼 게 가장 많을 때 빈 화면이
+	// 뜨는 셈이라, 고른 적이 없다면 볼 것이 있는 쪽을 연다.
+	const model = (over: Partial<EmptyStateModel> = {}): EmptyStateModel => ({
+		headline: "Working tree clean",
+		context: "on feature · 3 commit(s) ahead of main",
+		actions: [
+			{ kind: "switch-mode", label: "12 file(s) changed vs main — view" },
+		],
+		quietNote: null,
+		...over,
+	});
+
+	test("고른 적 없고 base에 볼 것이 있으면 전환한다", () => {
+		expect(
+			shouldAutoViewBase(model(), {
+				hasExplicitBase: false,
+				alreadyTried: false,
+			}),
+		).toBe(true);
+	});
+
+	// 명시적 선택은 절대 덮지 않는다 — URL의 base=든 저장된 프리퍼런스든.
+	test("사용자가 고른 적 있으면 전환하지 않는다", () => {
+		expect(
+			shouldAutoViewBase(model(), {
+				hasExplicitBase: true,
+				alreadyTried: false,
+			}),
+		).toBe(false);
+	});
+
+	// 무한 루프 방지. 조건이 계속 참이어도 한 번만 시도한다.
+	test("이미 시도했으면 다시 전환하지 않는다", () => {
+		expect(
+			shouldAutoViewBase(model(), {
+				hasExplicitBase: false,
+				alreadyTried: true,
+			}),
+		).toBe(false);
+	});
+
+	test("base에 볼 것이 없으면 전환하지 않는다", () => {
+		expect(
+			shouldAutoViewBase(model({ actions: [] }), {
+				hasExplicitBase: false,
+				alreadyTried: false,
+			}),
+		).toBe(false);
+	});
+
+	// **경계선**: 토글로 감춰졌을 뿐 이 뷰에도 볼 것이 있으면 데려가지 않는다.
+	// 사용자가 untracked를 보고 싶었을 수도 있고, 카드가 두 선택지를 나란히
+	// 보여주는 편이 낫다. 자동 전환은 "이 뷰에 아무것도 없을 때"로 한정한다.
+	test("숨겨진 untracked가 있으면 전환하지 않는다", () => {
+		expect(
+			shouldAutoViewBase(
+				model({
+					actions: [
+						{ kind: "switch-mode", label: "12 file(s) changed vs main — view" },
+						{
+							kind: "show-untracked",
+							label: "1 untracked file(s) hidden — show",
+						},
+					],
+				}),
+				{ hasExplicitBase: false, alreadyTried: false },
+			),
+		).toBe(false);
+	});
+});
diff --git a/apps/viewer/__tests__/grab-encode.test.ts b/apps/viewer/__tests__/grab-encode.test.ts
index 861e567..b7feb38 100644
--- a/apps/viewer/__tests__/grab-encode.test.ts
+++ b/apps/viewer/__tests__/grab-encode.test.ts
@@ -59,6 +59,21 @@ describe("encodeGrab", () => {
 			"(new side, base diff)",
 		);
 	});
+	// 브랜치를 head로 보는 화면에서 잡은 줄은 그 브랜치의 **커밋된** 내용이다.
+	// 참조가 그걸 말하지 않으면 붙여넣기를 받은 에이전트가 자기 워킹트리의
+	// 같은 경로(다른 브랜치일 수 있다)를 열어 엉뚱한 줄을 고친다.
+	test("head를 보고 있으면 어느 리비전인지 말한다", () => {
+		expect(
+			encodeGrab({ ...base, mode: "base", baseName: "main", head: "develop" }),
+		).toContain("Lines: 84-98 (new side, base diff vs main on develop)");
+	});
+
+	test("head 없으면 예전 문구 그대로 — 워킹트리를 보고 있다는 뜻이다", () => {
+		expect(encodeGrab({ ...base, mode: "base", baseName: "main" })).toContain(
+			"Lines: 84-98 (new side, base diff vs main)",
+		);
+	});
+
 	test("untracked 상태 주석", () => {
 		expect(encodeGrab({ ...base, status: "untracked" })).toContain(
 			"(new side, working diff, untracked)",
diff --git a/apps/viewer/__tests__/ref-picker-model.test.ts b/apps/viewer/__tests__/ref-picker-model.test.ts
index 2ef0f79..b38cf08 100644
--- a/apps/viewer/__tests__/ref-picker-model.test.ts
+++ b/apps/viewer/__tests__/ref-picker-model.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
-import { buildBaseRows, filterBaseRows } from "../browser/refPicker/model.ts";
-import type { RefRecord } from "../server/refs.ts";
+import { buildHeadRows, filterPickerRows } from "../browser/refPicker/model.ts";
+import type { RefRecord, WorktreeRecord } from "../server/refs.ts";
 
 const ref = (name: string, kind: "local" | "remote" = "local"): RefRecord => ({
 	name,
@@ -8,141 +8,200 @@ const ref = (name: string, kind: "local" | "remote" = "local"): RefRecord => ({
 	worktreePath: null,
 });
 
-describe("buildBaseRows", () => {
-	test("offers the working tree first, before any branch", () => {
-		const rows = buildBaseRows([ref("main")], null, null);
-		expect(rows[0]).toEqual({
-			value: "HEAD",
-			label: "Working tree",
-			kind: "working",
-			section: "uncommitted",
-			tag: null,
-			note: null,
+const wt = (path: string, branch: string | null): WorktreeRecord => ({
+	path,
+	branch,
+	head: "abc1234",
+	detached: branch === null,
+});
+
+const MAIN_WT = wt("/w/repo", "main");
+const FEAT_WT = wt("/w/repo/.claude/worktrees/feat", "feat");
+
+describe("buildHeadRows — worktrees", () => {
+	// 고를 것이 없으면 구역 자체가 없다. 제목만 남기고 목록을 비우면
+	// "뭔가 있어야 하는데 없다"로 읽힌다.
+	test("omits the worktree section when there is nothing to choose", () => {
+		const rows = buildHeadRows([MAIN_WT], [ref("main")], "main", {
+			repo: "/w/repo",
+			head: null,
 		});
+		expect(rows.some((r) => r.section === "worktrees")).toBe(false);
 	});
 
-	// merge-base(HEAD, HEAD) === HEAD라서 이 값이 오늘의 워킹트리 뷰와 같다.
-	test("the working tree row carries HEAD as its wire value", () => {
-		expect(buildBaseRows([], null, null)[0]?.value).toBe("HEAD");
+	// 숨김은 "고를 것이 없을 때"의 규칙이다. 브랜치를 head로 보고 있으면
+	// 워크트리는 지금 보고 있지 않은 것이므로 고를 대상이고, 숨기면 워크트리가
+	// 하나뿐인 리포에서 브랜치 뷰에 갇혀 돌아올 길이 사라진다.
+	test("keeps the section while a branch head is active, to get back", () => {
+		const rows = buildHeadRows([MAIN_WT], [ref("dev")], "main", {
+			repo: "/w/repo",
+			head: "dev",
+		});
+		expect(rows.filter((r) => r.section === "worktrees")).toHaveLength(1);
 	});
 
-	test("keeps local branches ahead of remote ones", () => {
-		const rows = buildBaseRows(
-			[ref("origin/main", "remote"), ref("develop"), ref("main")],
-			null,
-			null,
-		);
-		expect(rows.slice(1).map((r) => r.kind)).toEqual([
-			"local",
-			"local",
-			"remote",
-		]);
+	test("shows the section as soon as a second worktree exists", () => {
+		const rows = buildHeadRows([MAIN_WT, FEAT_WT], [], "main", {
+			repo: "/w/repo",
+			head: null,
+		});
+		expect(rows.filter((r) => r.section === "worktrees")).toHaveLength(2);
 	});
 
-	test("tags the default branch so the usual choice is findable", () => {
-		const rows = buildBaseRows([ref("main"), ref("develop")], "main", null);
-		expect(rows.find((r) => r.value === "main")?.tag).toBe("default");
-		expect(rows.find((r) => r.value === "develop")?.tag).toBeNull();
+	// 어느 브랜치를 물고 있는지 행 자체가 말해야 한다.
+	test("each worktree names the branch it holds", () => {
+		const rows = buildHeadRows([MAIN_WT, FEAT_WT], [], "main", {
+			repo: "/w/repo",
+			head: null,
+		});
+		const feat = rows.find((r) => r.label === "feat");
+		expect(feat?.note).toBe("feat");
 	});
 
-	// 자기 자신과 견주면 언제나 비어 보인다. 막지는 않되 왜 그런지 읽히도록
-	// 표시한다 — 조용한 빈 화면이 이 기능에서 가장 큰 위험이다.
-	test("marks the branch this worktree has checked out", () => {
-		const rows = buildBaseRows(
-			[ref("main"), ref("feature")],
-			"main",
-			"feature",
-		);
-		expect(rows.find((r) => r.value === "feature")?.tag).toBe("HEAD");
+	// default 브랜치를 물고 있는 워크트리가 맨 위 — 브랜치 구역과 같은 규칙.
+	test("puts the worktree holding the default branch first", () => {
+		const rows = buildHeadRows([FEAT_WT, MAIN_WT], [], "main", {
+			repo: "/w/repo/.claude/worktrees/feat",
+			head: null,
+		});
+		const worktrees = rows.filter((r) => r.section === "worktrees");
+		expect(worktrees[0]?.label).toBe("repo");
+		expect(worktrees[0]?.note).toBe("main · default");
 	});
 
-	test("prefers the default tag when a branch is both default and checked out", () => {
-		const rows = buildBaseRows([ref("main")], "main", "main");
-		expect(rows.find((r) => r.value === "main")?.tag).toBe("default");
+	test("the worktree being viewed is the selected row", () => {
+		const rows = buildHeadRows([MAIN_WT, FEAT_WT], [], "main", {
+			repo: "/w/repo/.claude/worktrees/feat",
+			head: null,
+		});
+		expect(rows.find((r) => r.selected)?.label).toBe("feat");
 	});
-});
 
-describe("filterBaseRows", () => {
-	const rows = buildBaseRows(
-		[ref("main"), ref("feat/grab-popover"), ref("origin/main", "remote")],
-		"main",
-		null,
-	);
+	// repo는 기동 시점의 cwd라 리포 루트라는 보장이 없다. repoLabel의
+	// findWorktree와 **같은 판정**을 써야 답이 앱 안에 하나만 남는다.
+	test("matches the viewed worktree from a subdirectory", () => {
+		const rows = buildHeadRows([MAIN_WT, FEAT_WT], [], "main", {
+			repo: "/w/repo/.claude/worktrees/feat/src",
+			head: null,
+		});
+		expect(rows.find((r) => r.selected)?.label).toBe("feat");
+	});
 
-	test("an empty query keeps every row", () => {
-		expect(filterBaseRows(rows, "")).toHaveLength(rows.length);
+	// 브랜치를 head로 보고 있으면 워크트리는 어느 것도 선택 상태가 아니다.
+	test("no worktree is selected while a branch is the head", () => {
+		const rows = buildHeadRows([MAIN_WT, FEAT_WT], [ref("dev")], "main", {
+			repo: "/w/repo",
+			head: "dev",
+		});
+		expect(rows.filter((r) => r.section === "worktrees" && r.selected)).toEqual(
+			[],
+		);
 	});
 
-	test("matches anywhere in the name, not just the start", () => {
-		expect(filterBaseRows(rows, "grab").map((r) => r.value)).toEqual([
-			"feat/grab-popover",
-		]);
+	test("carries the worktree path as its value — that is what navigates", () => {
+		const rows = buildHeadRows([MAIN_WT, FEAT_WT], [], "main", {
+			repo: "/w/repo",
+			head: null,
+		});
+		expect(rows.find((r) => r.label === "feat")?.value).toBe(FEAT_WT.path);
 	});
 
-	test("ignores case so typing is cheap", () => {
-		expect(filterBaseRows(rows, "GRAB")).toHaveLength(1);
+	test("a detached worktree still lists, with no branch to name", () => {
+		const rows = buildHeadRows([MAIN_WT, wt("/w/other", null)], [], "main", {
+			repo: "/w/repo",
+			head: null,
+		});
+		expect(rows.find((r) => r.label === "other")?.note).toBeNull();
 	});
+});
 
-	test("keeps the working tree row reachable by name", () => {
-		expect(filterBaseRows(rows, "work").map((r) => r.kind)).toEqual([
-			"working",
+describe("buildHeadRows — branches", () => {
+	const refs = [
+		ref("aaa"),
+		ref("dev"),
+		ref("main"),
+		ref("origin/main", "remote"),
+	];
+
+	test("default branch first, then the branch being viewed", () => {
+		const rows = buildHeadRows([MAIN_WT], refs, "main", {
+			repo: "/w/repo",
+			head: "dev",
+		});
+		expect(
+			rows.filter((r) => r.section === "branches").map((r) => r.value),
+		).toEqual(["main", "dev", "aaa", "origin/main"]);
+	});
+
+	test("keeps local branches ahead of remote ones", () => {
+		const rows = buildHeadRows([MAIN_WT], refs, null, {
+			repo: "/w/repo",
+			head: null,
+		});
+		expect(rows.map((r) => r.kind)).toEqual([
+			"local",
+			"local",
+			"local",
+			"remote",
 		]);
 	});
 
-	test("returns nothing when the query matches nothing", () => {
-		expect(filterBaseRows(rows, "zzz")).toEqual([]);
+	test("tags the default branch", () => {
+		const rows = buildHeadRows([MAIN_WT], refs, "main", {
+			repo: "/w/repo",
+			head: null,
+		});
+		expect(rows.find((r) => r.value === "main")?.tag).toBe("default");
+		expect(rows.find((r) => r.value === "dev")?.tag).toBeNull();
 	});
 
-	test("trims surrounding whitespace before matching", () => {
-		expect(filterBaseRows(rows, "  grab  ")).toHaveLength(1);
+	test("the branch being viewed is the selected row", () => {
+		const rows = buildHeadRows([MAIN_WT], refs, "main", {
+			repo: "/w/repo",
+			head: "dev",
+		});
+		expect(rows.find((r) => r.selected)?.value).toBe("dev");
 	});
-});
 
-describe("buildBaseRows sections", () => {
-	test("puts the working tree in its own section, branches in another", () => {
-		const rows = buildBaseRows([ref("main"), ref("o/m", "remote")], null, null);
-		expect(rows.map((r) => r.section)).toEqual([
-			"uncommitted",
-			"branches",
-			"branches",
-		]);
+	test("carries the ref name as its value — that is what head takes", () => {
+		const rows = buildHeadRows([MAIN_WT], refs, "main", {
+			repo: "/w/repo",
+			head: null,
+		});
+		expect(rows.find((r) => r.value === "origin/main")?.kind).toBe("remote");
 	});
 });
 
-describe("buildBaseRows notes", () => {
-	// 목록에서 미리 보여야 "골랐더니 비어 있더라"가 안 생긴다.
-	test("says the working tree is empty before you pick it", () => {
-		const rows = buildBaseRows([], null, null, { working: 0, base: null });
-		expect(rows[0]?.note).toBe("nothing yet");
+describe("filterPickerRows", () => {
+	const rows = buildHeadRows(
+		[MAIN_WT, FEAT_WT],
+		[ref("main"), ref("feat/grab-popover")],
+		"main",
+		{ repo: "/w/repo", head: null },
+	);
+
+	test("an empty query keeps every row", () => {
+		expect(filterPickerRows(rows, "")).toHaveLength(rows.length);
 	});
 
-	test("counts uncommitted files when there are some", () => {
-		const rows = buildBaseRows([], null, null, { working: 3, base: null });
-		expect(rows[0]?.note).toBe("3 file(s)");
+	test("matches anywhere in the label, not just the start", () => {
+		expect(filterPickerRows(rows, "grab").map((r) => r.value)).toEqual([
+			"feat/grab-popover",
+		]);
 	});
 
-	test("says nothing when the count is unknown", () => {
-		expect(buildBaseRows([], null, null)[0]?.note).toBeNull();
+	test("ignores case and surrounding whitespace", () => {
+		expect(filterPickerRows(rows, "  GRAB ")).toHaveLength(1);
 	});
 
-	// 개수는 공짜인 자리에만 붙는다 — 서버가 이미 아는 그 비교 하나다.
-	// 브랜치마다 붙이려면 브랜치당 git 호출이 하나씩 더 든다.
-	test("attaches the known count only to the branch it was measured against", () => {
-		const rows = buildBaseRows([ref("main"), ref("develop")], "main", null, {
-			working: 0,
-			base: { name: "main", files: 30 },
-		});
-		expect(rows.find((r) => r.value === "main")?.note).toBe(
-			"default · 30 file(s)",
-		);
-		expect(rows.find((r) => r.value === "develop")?.note).toBeNull();
+	test("returns nothing when the query matches nothing", () => {
+		expect(filterPickerRows(rows, "zzz")).toEqual([]);
 	});
 
-	test("keeps the HEAD tag when no count is known for that branch", () => {
-		const rows = buildBaseRows([ref("feature")], null, "feature", {
-			working: 0,
-			base: { name: "main", files: 30 },
-		});
-		expect(rows.find((r) => r.value === "feature")?.note).toBe("HEAD");
+	// 워크트리 행의 **브랜치 이름**은 label이 아니라 note에 산다. label만 보면
+	// 이 목록에서 가장 자연스러운 검색어(브랜치명)로 워크트리를 못 찾는다.
+	test("finds a worktree by the branch it holds", () => {
+		const held = filterPickerRows(rows, "feat").map((r) => r.value);
+		expect(held).toContain("/w/repo/.claude/worktrees/feat");
 	});
 });
diff --git a/apps/viewer/__tests__/repo-label.test.ts b/apps/viewer/__tests__/repo-label.test.ts
new file mode 100644
index 0000000..98f1a27
--- /dev/null
+++ b/apps/viewer/__tests__/repo-label.test.ts
@@ -0,0 +1,340 @@
+import { describe, expect, test } from "bun:test";
+import {
+	findWorktree,
+	repoDisplayName,
+	repoLabelView,
+} from "../browser/repoLabel.ts";
+import type { WorktreeRecord } from "../server/refs.ts";
+
+const wt = (over: Partial<WorktreeRecord> = {}): WorktreeRecord => ({
+	path: "/Users/p/dev/diffdeck",
+	branch: "main",
+	head: "9d698840eb19bab30db54a18db1f4dc6cc9b1dc1",
+	detached: false,
+	...over,
+});
+
+describe("repoDisplayName", () => {
+	test("절대 경로의 마지막 세그먼트", () => {
+		expect(repoDisplayName("/Users/p/dev/diffdeck")).toBe("diffdeck");
+	});
+
+	// 후행 슬래시는 별개의 폴백 분기다. 커버리지 게이트가 branch를 세지
+	// 않으므로(CLAUDE.md) 분기마다 일부러 찔러 둔다.
+	test("후행 슬래시를 벗긴다", () => {
+		expect(repoDisplayName("/Users/p/dev/diffdeck/")).toBe("diffdeck");
+		expect(repoDisplayName("/Users/p/dev/diffdeck///")).toBe("diffdeck");
+	});
+
+	test("루트와 빈 문자열에는 이름이 없다", () => {
+		expect(repoDisplayName("/")).toBe("");
+		expect(repoDisplayName("")).toBe("");
+	});
+
+	test("슬래시가 없는 상대 경로는 그 자체가 이름이다", () => {
+		expect(repoDisplayName("diffdeck")).toBe("diffdeck");
+	});
+
+	// 한글 경로가 뭉개지면 라벨이 자기 워크트리를 잘못 말한다.
+	test("비-ASCII 이름을 보존한다", () => {
+		expect(repoDisplayName("/Users/p/dev/무신사-프론트")).toBe("무신사-프론트");
+	});
+});
+
+describe("findWorktree", () => {
+	test("경로가 정확히 같은 워크트리를 찾는다", () => {
+		const a = wt({ path: "/w/a" });
+		const b = wt({ path: "/w/b" });
+		expect(findWorktree([a, b], "/w/b")).toBe(b);
+	});
+
+	// repo는 CLI 기동 시점의 process.cwd()라 리포 루트라는 보장이 없다.
+	// 정확 일치만 보면 하위 디렉토리에서 켰을 때 브랜치가 조용히 사라진다.
+	test("하위 디렉토리에서 기동해도 그 워크트리를 찾는다", () => {
+		const a = wt({ path: "/w/a" });
+		expect(findWorktree([a], "/w/a/apps/viewer")).toBe(a);
+	});
+
+	// 중첩 워크트리(.claude/worktrees/* 관례)에서 바깥 것이 이기면
+	// 라벨이 엉뚱한 워크트리를 말한다 — 사용자가 겪은 바로 그 혼동이다.
+	test("중첩 워크트리에서는 가장 안쪽이 이긴다", () => {
+		const outer = wt({ path: "/w/a", branch: "main" });
+		const inner = wt({ path: "/w/a/.claude/worktrees/feat", branch: "feat" });
+		expect(findWorktree([outer, inner], "/w/a/.claude/worktrees/feat")).toBe(
+			inner,
+		);
+		expect(
+			findWorktree([outer, inner], "/w/a/.claude/worktrees/feat/src"),
+		).toBe(inner);
+	});
+
+	test("경로 세그먼트 경계에서만 일치한다", () => {
+		const a = wt({ path: "/w/a" });
+		// `/w/abc`는 `/w/a`의 하위가 아니다 — 접두 문자열 비교만 하면 걸린다.
+		expect(findWorktree([a], "/w/abc")).toBeNull();
+	});
+
+	test("목록에 없으면 null", () => {
+		expect(findWorktree([wt({ path: "/w/a" })], "/other")).toBeNull();
+	});
+
+	test("빈 목록이면 null", () => {
+		expect(findWorktree([], "/w/a")).toBeNull();
+	});
+
+	test("양쪽의 후행 슬래시를 무시한다", () => {
+		const a = wt({ path: "/w/a/" });
+		expect(findWorktree([a], "/w/a")).toBe(a);
+	});
+});
+
+describe("repoLabelView", () => {
+	const MAIN = "/Users/p/dev/diffdeck";
+
+	test("메인 워크트리에서는 리포 이름과 브랜치만 말한다", () => {
+		const v = repoLabelView(MAIN, [wt()], MAIN);
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("diffdeck");
+		expect(v.branch).toBe(" · main");
+		expect(v.title).toBe("/Users/p/dev/diffdeck · main");
+		expect(v.documentTitle).toBe("diffdeck · main — diffdeck");
+	});
+
+	// 사용자가 겪은 형태. 워크트리 이름만 보이면 어느 리포인지 알 수 없고,
+	// 리포 이름만 보이면 어느 워크트리인지 알 수 없다 — 둘 다 말한다.
+	test("링크된 워크트리에서는 리포를 앞에 덧붙인다", () => {
+		const inner = "/Users/p/dev/diffdeck/.claude/worktrees/feat+ABC-1";
+		const v = repoLabelView(
+			inner,
+			[wt(), wt({ path: inner, branch: "feat/ABC-1" })],
+			MAIN,
+		);
+		expect(v.scope).toBe("diffdeck / ");
+		expect(v.name).toBe("feat+ABC-1");
+		expect(v.branch).toBe(" · feat/ABC-1");
+		expect(v.title).toBe(`${inner} · feat/ABC-1`);
+		// 탭은 좁고 오른쪽부터 잘리므로 **구별되는 쪽**이 앞에 와야 한다.
+		// 리포 이름은 워크트리마다 같아서 탭을 가르지 못한다.
+		expect(v.documentTitle).toBe("feat+ABC-1 · feat/ABC-1 — diffdeck");
+	});
+
+	test("형제 워크트리도 리포를 앞에 덧붙인다", () => {
+		const sibling = "/Users/p/dev/diffdeck-feat";
+		const v = repoLabelView(
+			sibling,
+			[wt(), wt({ path: sibling, branch: "feat" })],
+			MAIN,
+		);
+		expect(v.scope).toBe("diffdeck / ");
+		expect(v.name).toBe("diffdeck-feat");
+	});
+
+	// bare 리포는 메인 항목이 bare라 worktrees[]에서 빠진다. 그래서 서버가
+	// 필터 전 원본에서 읽어 보내고, 관례상 `.git` 접미는 벗겨서 보여준다.
+	test("bare 리포 루트의 .git 접미를 벗긴다", () => {
+		const v = repoLabelView(
+			"/srv/wt-feat",
+			[wt({ path: "/srv/wt-feat", branch: "feat" })],
+			"/srv/myproj.git",
+		);
+		expect(v.scope).toBe("myproj / ");
+		expect(v.name).toBe("wt-feat");
+	});
+
+	test("하위 디렉토리에서 켜도 워크트리 최상위 이름을 말한다", () => {
+		const v = repoLabelView(`${MAIN}/apps/viewer`, [wt()], MAIN);
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("diffdeck");
+		expect(v.title).toBe("/Users/p/dev/diffdeck · main");
+	});
+
+	test("링크된 워크트리의 하위 디렉토리에서 켜도 둘 다 말한다", () => {
+		const inner = "/w/repo/.claude/worktrees/feat";
+		const v = repoLabelView(
+			`${inner}/src`,
+			[wt({ path: "/w/repo" }), wt({ path: inner, branch: "feat" })],
+			"/w/repo",
+		);
+		expect(v.scope).toBe("repo / ");
+		expect(v.name).toBe("feat");
+	});
+
+	// detached 표기는 emptyState.ts와 같은 어휘를 쓴다.
+	test("detached HEAD는 짧은 OID로 말한다", () => {
+		const v = repoLabelView(
+			"/w/a",
+			[
+				wt({
+					path: "/w/a",
+					branch: null,
+					detached: true,
+					head: "abc1234def567",
+				}),
+			],
+			"/w/a",
+		);
+		expect(v.branch).toBe(" · detached @ abc1234");
+		expect(v.title).toBe("/w/a · detached @ abc1234");
+	});
+
+	test("브랜치가 빈 문자열이어도 detached로 읽는다", () => {
+		const v = repoLabelView(
+			"/w/a",
+			[wt({ path: "/w/a", branch: "", head: "abc1234def567" })],
+			"/w/a",
+		);
+		expect(v.branch).toBe(" · detached @ abc1234");
+	});
+
+	test("브랜치도 head도 없으면 브랜치 자리를 비운다", () => {
+		const v = repoLabelView(
+			"/w/a",
+			[wt({ path: "/w/a", branch: null, head: null })],
+			"/w/a",
+		);
+		expect(v.name).toBe("a");
+		expect(v.branch).toBe("");
+		expect(v.title).toBe("/w/a");
+		expect(v.documentTitle).toBe("a — diffdeck");
+	});
+
+	// /api/refs가 아직 안 왔거나 실패한 첫 프레임. 이름은 repo 경로에서
+	// 즉시 알 수 있으므로 브랜치와 리포 접두만 비운다.
+	test("워크트리 목록이 비어도 이름은 말한다", () => {
+		const v = repoLabelView(MAIN, [], null);
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("diffdeck");
+		expect(v.branch).toBe("");
+		expect(v.title).toBe("/Users/p/dev/diffdeck");
+	});
+
+	// 리포 루트를 모르면 접두를 지어내지 않는다 — 틀린 리포 이름을 말하느니
+	// 아무 말도 안 하는 편이 낫다.
+	test("repoRoot가 null이면 접두를 붙이지 않는다", () => {
+		const inner = "/w/repo/.claude/worktrees/feat";
+		const v = repoLabelView(inner, [wt({ path: inner, branch: "feat" })], null);
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("feat");
+	});
+
+	// 루트에 얹힌 리포는 이름이 없다 — 접두 자리에 빈 이름을 넣으면
+	// 라벨이 " / feat"처럼 시작한다.
+	test("리포 루트가 이름을 못 내면 접두를 생략한다", () => {
+		const v = repoLabelView("/w", [wt({ path: "/w", branch: "feat" })], "/");
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("w");
+	});
+
+	test("repo가 비면 아무 말도 하지 않고 탭 제목은 앱 이름뿐", () => {
+		const v = repoLabelView("", [], null);
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("");
+		expect(v.branch).toBe("");
+		expect(v.title).toBe("");
+		expect(v.documentTitle).toBe("diffdeck");
+	});
+
+	test("비-ASCII 리포·워크트리·브랜치명을 보존한다", () => {
+		const inner = "/w/무신사/워크트리/댓글";
+		const v = repoLabelView(
+			inner,
+			[wt({ path: "/w/무신사" }), wt({ path: inner, branch: "기능/댓글" })],
+			"/w/무신사",
+		);
+		expect(v.scope).toBe("무신사 / ");
+		expect(v.name).toBe("댓글");
+		expect(v.branch).toBe(" · 기능/댓글");
+		expect(v.documentTitle).toBe("댓글 · 기능/댓글 — diffdeck");
+	});
+});
+
+describe("repoLabelView — 무엇을 보고 있는지와 무엇과 견주는지", () => {
+	const MAIN = "/Users/p/dev/diffdeck";
+	const INNER = "/Users/p/dev/diffdeck/.claude/worktrees/feat+ABC-1";
+	const trees = [wt(), wt({ path: INNER, branch: "feat/ABC-1" })];
+
+	// 견줄 기준이 워킹트리(HEAD)면 base를 말하지 않는다 — 그건 "커밋 안 한
+	// 변경"이지 무엇과 견준 결과가 아니다.
+	test("워킹트리 뷰에서는 base 자리를 비운다", () => {
+		const v = repoLabelView(MAIN, [wt()], MAIN, { head: null, base: null });
+		expect(v.branch).toBe(" · main");
+	});
+
+	test("base가 있으면 브랜치 뒤에 붙인다", () => {
+		const v = repoLabelView(MAIN, [wt()], MAIN, { head: null, base: "main" });
+		// base는 자기 자리를 갖는다 — 트리거가 head를 말하고, 이 값은 개수
+		// 왼쪽의 별도 표식이 말한다.
+		expect(v.branch).toBe(" · main");
+		expect(v.base).toBe("vs main");
+		expect(v.title).toBe("/Users/p/dev/diffdeck · main · vs main");
+	});
+
+	// **브랜치를 head로 보면 워크트리는 결과에 영향을 주지 않는다** — 어느
+	// 워크트리에서 보든 같은 diff다(실측). 이름을 그대로 두면 "이 워크트리의
+	// 무언가를 보고 있다"는 잘못된 인상을 준다.
+	test("브랜치 뷰에서는 워크트리 이름을 빼고 그 브랜치를 주인공으로 세운다", () => {
+		const v = repoLabelView(INNER, trees, MAIN, {
+			head: "feature/other",
+			base: "main",
+		});
+		expect(v.scope).toBe("diffdeck · ");
+		expect(v.name).toBe("feature/other");
+		expect(v.branch).toBe("");
+		expect(v.base).toBe("vs main");
+	});
+
+	// 예전에는 라벨이 워크트리의 브랜치를 말해 보고 있지도 않은 곳을 가리켰다.
+	test("브랜치 뷰의 라벨은 워크트리의 브랜치를 말하지 않는다", () => {
+		const v = repoLabelView(INNER, trees, MAIN, {
+			head: "feature/other",
+			base: null,
+		});
+		expect(v.branch).not.toContain("feat/ABC-1");
+		expect(v.name).not.toBe("feat+ABC-1");
+	});
+
+	test("브랜치 뷰의 탭 제목은 그 브랜치를 앞세운다", () => {
+		const v = repoLabelView(INNER, trees, MAIN, {
+			head: "feature/other",
+			base: "main",
+		});
+		expect(v.documentTitle).toBe("feature/other — diffdeck");
+	});
+
+	test("리포 루트를 모르면 브랜치 뷰에서도 접두를 지어내지 않는다", () => {
+		const v = repoLabelView(INNER, trees, null, {
+			head: "feature/other",
+			base: null,
+		});
+		expect(v.scope).toBe("");
+		expect(v.name).toBe("feature/other");
+	});
+
+	test("워크트리 뷰는 예전 형태 그대로다", () => {
+		const v = repoLabelView(INNER, trees, MAIN, { head: null, base: null });
+		expect(v.scope).toBe("diffdeck / ");
+		expect(v.name).toBe("feat+ABC-1");
+		expect(v.branch).toBe(" · feat/ABC-1");
+	});
+});
+
+describe("repoLabelView — base는 독립된 자리다", () => {
+	test("견줄 기준이 없으면 빈 문자열", () => {
+		expect(
+			repoLabelView("/w/a", [wt({ path: "/w/a" })], "/w/a", {
+				head: null,
+				base: null,
+			}).base,
+		).toBe("");
+	});
+
+	// 접두 없이 그대로 들어간다 — 자기 요소를 가지므로 구분자를 품을 이유가 없다.
+	test("접두 구분자를 품지 않는다", () => {
+		expect(
+			repoLabelView("/w/a", [wt({ path: "/w/a" })], "/w/a", {
+				head: null,
+				base: "develop",
+			}).base,
+		).toBe("vs develop");
+	});
+});
diff --git a/apps/viewer/__tests__/summary.test.ts b/apps/viewer/__tests__/summary.test.ts
index dd94c3d..554fa31 100644
--- a/apps/viewer/__tests__/summary.test.ts
+++ b/apps/viewer/__tests__/summary.test.ts
@@ -117,3 +117,55 @@ test("reports the ref it measured against, prefix intact", async () => {
 	expect(summary.base).toBe("main");
 	expect(summary.ref).toBe("origin/main");
 });
+
+describe("getRepoSummary with a head revision", () => {
+	// 워킹트리는 그 뷰의 측정 대상이 아니다. 0으로 적으면 "아무것도 없다"는
+	// 주장이 되어, 실제로는 미커밋 변경이 있는데도 카드가 조용하다고 말한다.
+	test("does not claim anything about the working tree", async () => {
+		await $`git -C ${repo} branch -M main`;
+		await $`git -C ${repo} checkout -qb feat`;
+		writeFileSync(join(repo, "a.txt"), "feat\n");
+		await $`git -C ${repo} commit -qam feat`;
+		await $`git -C ${repo} checkout -q main`;
+		// 워킹트리를 더럽혀 둔다 — 그래도 null이어야 한다.
+		writeFileSync(join(repo, "a.txt"), "dirty\n");
+		writeFileSync(join(repo, "scratch.txt"), "untracked\n");
+
+		const s = await getRepoSummary(repo, {
+			base: "main",
+			ref: "main",
+			head: "feat",
+		});
+		expect(s.workingFiles).toBeNull();
+		expect(s.untrackedFiles).toBeNull();
+	});
+
+	// 카드의 "on <branch>"가 보고 있지도 않은 곳을 가리키면 안 된다.
+	test("names the branch being viewed, not the worktree's", async () => {
+		await $`git -C ${repo} branch -M main`;
+		await $`git -C ${repo} branch feat`;
+		const s = await getRepoSummary(repo, {
+			base: "main",
+			ref: "main",
+			head: "feat",
+		});
+		expect(s.branch).toBe("feat");
+	});
+
+	// 개수를 diff와 같은 축으로 세야 카드가 화면과 다른 말을 하지 않는다.
+	test("counts the base diff against the head revision", async () => {
+		await $`git -C ${repo} branch -M main`;
+		await $`git -C ${repo} checkout -qb feat`;
+		writeFileSync(join(repo, "a.txt"), "feat\n");
+		await $`git -C ${repo} commit -qam feat`;
+		await $`git -C ${repo} checkout -q main`;
+
+		const s = await getRepoSummary(repo, {
+			base: "main",
+			ref: "main",
+			head: "feat",
+		});
+		expect(s.baseFiles).toBe(1);
+		expect(s.aheadCommits).toBe(1);
+	});
+});
diff --git a/apps/viewer/browser/changeTotals.ts b/apps/viewer/browser/changeTotals.ts
new file mode 100644
index 0000000..bbe1e46
--- /dev/null
+++ b/apps/viewer/browser/changeTotals.ts
@@ -0,0 +1,62 @@
+/**
+ * 툴바의 전체 변경량 표식 — 개수(`#status`) 오른쪽에서 "이번 diff가 통틀어
+ * 몇 줄을 더하고 지웠는가"를 말한다.
+ *
+ * 파일 수만으로는 규모를 못 읽는다: 176 file(s)가 문구 한 줄씩 고친 것인지
+ * 통째로 새로 쓴 것인지 열어 보기 전에는 알 수 없다.
+ *
+ * 세는 값은 `largeFile.ts`의 `countChangedLines`와 **같은 출처**다 — hunk의
+ * 숫자 필드다. `FileDiffMetadata`에도 동명의 `additionLines`/`deletionLines`가
+ * 있지만 그건 `string[]`이고 뷰어처럼 파일 전량으로 파싱한 diff에서는 새/옛
+ * 파일의 **전체 내용**이라, 세면 변경량이 아니라 파일 길이가 나온다(그 착각이
+ * 실제로 대형 파일 자동 접힘을 오작동시킨 적이 있다 — CLAUDE.md).
+ */
+import type { Hunk } from "@diffdeck/diffs";
+
+/** 조각 구분자. 삭제 쪽 텍스트가 품고 온다(`#picker-branch`와 같은 관례). */
+const SEPARATOR = " ";
+
+interface HunkCounts {
+	hunks: readonly Pick<Hunk, "additionLines" | "deletionLines">[];
+}
+
+export interface ChangeTotals {
+	additions: number;
+	deletions: number;
+}
+
+/** 화면 각 자리에 그대로 들어가는 문자열들. 조립은 전부 이 모듈이 끝낸다. */
+export interface ChangeTotalsView {
+	/** `#change-add`의 텍스트(`"+17022"`). 셀 것이 없으면 빈 문자열. */
+	additions: string;
+	/** `#change-del`의 텍스트. 구분자를 품는다(`" -435"`). 없으면 빈 문자열. */
+	deletions: string;
+}
+
+export const sumChangeTotals = (files: readonly HunkCounts[]): ChangeTotals => {
+	let additions = 0;
+	let deletions = 0;
+	for (const file of files) {
+		for (const hunk of file.hunks) {
+			additions += hunk.additionLines;
+			deletions += hunk.deletionLines;
+		}
+	}
+	return { additions, deletions };
+};
+
+export const changeTotalsView = (
+	files: readonly HunkCounts[],
+): ChangeTotalsView => {
+	const { additions, deletions } = sumChangeTotals(files);
+	// 이미지만 바뀐 diff는 파일이 있어도 센 줄이 없다. `+0 -0`을 쓰면 아무
+	// 말도 아닌 숫자가 툴바를 차지하므로 그때는 자리를 통째로 비운다.
+	if (additions === 0 && deletions === 0)
+		return { additions: "", deletions: "" };
+	// 한쪽이 0이어도 둘 다 말한다 — git·GitHub과 같고, 자리가 사라지면 남은
+	// 숫자가 추가인지 삭제인지 색에만 의존하게 된다.
+	return {
+		additions: `+${additions}`,
+		deletions: `${SEPARATOR}-${deletions}`,
+	};
+};
diff --git a/apps/viewer/browser/emptyState.ts b/apps/viewer/browser/emptyState.ts
index a879fa1..73dd4ab 100644
--- a/apps/viewer/browser/emptyState.ts
+++ b/apps/viewer/browser/emptyState.ts
@@ -29,11 +29,20 @@ export const buildEmptyStateModel = (
 	const { base } = summary;
 	// working 모드 헤드라인: 숨겨진 untracked가 있으면 "Working tree clean"은
 	// git 어휘상 거짓(untracked도 워킹트리 상태)이므로 측정한 것만 주장한다.
+	//
+	// **`null`을 `0`으로 접으면 안 된다.** head가 커밋된 rev면 서버가
+	// untracked를 재지 않고 `null`을 주는데(재지 않은 것을 0으로 적으면 그게
+	// 곧 주장이 된다 — summary.ts의 계약), `?? 0`으로 접으면 워킹트리를 보고
+	// 있지도 않은 화면이 "Working tree clean"이라고 그 워킹트리에 대해
+	// 단언한다. 모르면 아무 말도 안 하는 쪽(`No changes`)으로 간다.
+	const untracked = summary.untrackedFiles;
 	const headline =
 		opts.mode === "working"
-			? summary.untrackedFiles > 0
-				? "No tracked changes"
-				: "Working tree clean"
+			? untracked === null
+				? "No changes"
+				: untracked > 0
+					? "No tracked changes"
+					: "Working tree clean"
 			: base
 				? `No changes vs ${base}`
 				: "No changes";
@@ -55,7 +64,7 @@ export const buildEmptyStateModel = (
 			label: `${baseFiles} file(s) changed vs ${base} — view`,
 		});
 	}
-	if (!opts.untrackedShown && summary.untrackedFiles > 0) {
+	if (!opts.untrackedShown && (summary.untrackedFiles ?? 0) > 0) {
 		actions.push({
 			kind: "show-untracked",
 			label: `${summary.untrackedFiles} untracked file(s) hidden — show`,
@@ -118,3 +127,29 @@ export const renderEmptyState = (
 
 	return root;
 };
+
+/**
+ * 이 빈 화면을 사용자에게 보여주는 대신 base 뷰로 바로 데려갈 것인가.
+ *
+ * 워크트리 워크플로에서는 작업이 브랜치에 **커밋**돼 있어서 기본 뷰(미커밋
+ * 변경)가 구조적으로 비어 있다. 워크트리를 팔 때마다 "볼 게 가장 많은 순간에
+ * 빈 화면"을 만나고, 그때마다 카드의 버튼을 한 번씩 눌러 줘야 했다.
+ *
+ * 판정을 새로 세우지 않고 **카드 자신의 액션을 읽는다** — 카드가 전환을
+ * 권할 상황이 곧 전환할 가치가 있는 상황이라, 조건이 두 곳으로 갈라지지
+ * 않는다.
+ *
+ * 두 가지는 반드시 지킨다:
+ * ① 사용자가 고른 적 있으면(URL `base=` 또는 저장된 프리퍼런스) 덮지 않는다.
+ * ② 토글로 감춰졌을 뿐 **이 뷰에도** 볼 것이 있으면(untracked) 데려가지
+ *    않는다 — 카드가 두 선택지를 나란히 보여주는 편이 낫다. 자동 전환은
+ *    "이 뷰에 정말 아무것도 없을 때"로 한정한다.
+ */
+export const shouldAutoViewBase = (
+	model: EmptyStateModel,
+	opts: { hasExplicitBase: boolean; alreadyTried: boolean },
+): boolean => {
+	if (opts.hasExplicitBase || opts.alreadyTried) return false;
+	const kinds = new Set(model.actions.map((a) => a.kind));
+	return kinds.has("switch-mode") && !kinds.has("show-untracked");
+};
diff --git a/apps/viewer/browser/grab/encode.ts b/apps/viewer/browser/grab/encode.ts
index 1bf8923..fb67bbb 100644
--- a/apps/viewer/browser/grab/encode.ts
+++ b/apps/viewer/browser/grab/encode.ts
@@ -15,6 +15,16 @@ export interface EncodeInput {
 	status: GrabFileStatus;
 	mode: "working" | "base";
 	baseName: string;
+	/**
+	 * 지금 보고 있는 리비전(head 축). 워킹트리를 보고 있으면 없다.
+	 *
+	 * **이게 빠지면 참조가 거짓말을 한다**: 브랜치를 head로 보는 화면에서
+	 * 잡은 줄은 그 브랜치의 **커밋된** 내용인데, 붙여넣기를 받은 에이전트는
+	 * 자기 워킹트리의 같은 경로를 연다 — 다른 브랜치일 수 있다. 이 기능의
+	 * 존재 이유가 "에이전트에게 바로 붙여넣기"이므로 어느 리비전인지 말해야
+	 * 한다.
+	 */
+	head?: string;
 	snippet: Snippet;
 	prompt: string;
 }
@@ -25,9 +35,14 @@ const fmtRange = (start: number, end: number): string =>
 const sideText = (side: "old" | "new"): string =>
 	side === "new" ? "new side" : "old side";
 
-const modeText = (mode: "working" | "base", baseName: string): string => {
-	if (mode !== "base") return "working diff";
-	return baseName ? `base diff vs ${baseName}` : "base diff";
+const modeText = (
+	mode: "working" | "base",
+	baseName: string,
+	head?: string,
+): string => {
+	const at = head ? ` on ${head}` : "";
+	if (mode !== "base") return `working diff${at}`;
+	return baseName ? `base diff vs ${baseName}${at}` : `base diff${at}`;
 };
 
 const statusSuffix = (status: GrabFileStatus): string =>
@@ -93,7 +108,7 @@ export const encodeGrab = (input: EncodeInput): string => {
 	const fileLine = input.prevPath
 		? `File: ${input.path} (renamed from ${input.prevPath})`
 		: `File: ${input.path}`;
-	const meta = `${modeText(input.mode, input.baseName)}${statusSuffix(input.status)}`;
+	const meta = `${modeText(input.mode, input.baseName, input.head)}${statusSuffix(input.status)}`;
 	const linesLine =
 		snippet.kind === "side"
 			? `Lines: ${fmtRange(snippet.startLine, snippet.endLine)} (${sideText(snippet.side)}, ${meta})`
diff --git a/apps/viewer/browser/imageDiff.ts b/apps/viewer/browser/imageDiff.ts
index 6a231d7..03a0418 100644
--- a/apps/viewer/browser/imageDiff.ts
+++ b/apps/viewer/browser/imageDiff.ts
@@ -36,6 +36,8 @@ export const blobUrl = (params: {
 	mode: "working" | "base";
 	/** 사용자가 고른 견줄 기준. 없으면 서버가 mode로 되돌아간다. */
 	base?: string;
+	/** head로 고른 브랜치. 없으면 워킹트리를 본다. */
+	head?: string;
 	version?: string;
 }): string => {
 	const query = new URLSearchParams({
@@ -48,6 +50,7 @@ export const blobUrl = (params: {
 	// 이미지 카드와 텍스트 diff가 같은 비교를 보여줘야 한다 — 기준이 갈리면
 	// 한쪽은 base를, 다른 쪽은 워킹트리를 보여준다.
 	if (params.base) query.set("base", params.base);
+	if (params.head) query.set("head", params.head);
 	if (params.version) query.set("v", params.version);
 	return `/api/blob?${query.toString()}`;
 };
diff --git a/apps/viewer/browser/main.ts b/apps/viewer/browser/main.ts
index a0839cd..30e246f 100644
--- a/apps/viewer/browser/main.ts
+++ b/apps/viewer/browser/main.ts
@@ -16,11 +16,16 @@ import {
 	type FileTreeItemHandle,
 } from "@diffdeck/trees";
 import type { DiffFile } from "../server/diff.ts";
-import type { RefsResult } from "../server/refs.ts";
+import type { RefsResult, WorktreeRecord } from "../server/refs.ts";
 import type { RepoSummary } from "../server/summary.ts";
+import { changeTotalsView } from "./changeTotals.ts";
 import { createCopyButton } from "./copyButton.ts";
 import { movedBeyondThreshold } from "./drag.ts";
-import { buildEmptyStateModel, renderEmptyState } from "./emptyState.ts";
+import {
+	buildEmptyStateModel,
+	renderEmptyState,
+	shouldAutoViewBase,
+} from "./emptyState.ts";
 import {
 	encodeGrab,
 	type GrabFileStatus,
@@ -67,11 +72,11 @@ import {
 	WATCH_KEY,
 } from "./prefs.ts";
 import {
-	type BaseRow,
-	buildBaseRows,
-	filterBaseRows,
-	type RowCounts,
+	buildHeadRows,
+	filterPickerRows,
+	type HeadRow,
 } from "./refPicker/model.ts";
+import { repoLabelView } from "./repoLabel.ts";
 import { computeDragWidth, computeKeyboardWidth } from "./resize.ts";
 import { createFindBar, type FindBar } from "./search/findBar.ts";
 import { highlightDom } from "./search/highlightDom.ts";
@@ -161,15 +166,128 @@ const pickerSearch = document.getElementById(
 	"ref-picker-search",
 ) as HTMLInputElement;
 const pickerList = document.getElementById("ref-picker-list") as HTMLElement;
-const pickerLabel = document.getElementById("ref-picker-label") as HTMLElement;
 const appEl = document.getElementById("app") as HTMLElement;
 
+const changeAddEl = document.getElementById("change-add") as HTMLElement;
+const changeDelEl = document.getElementById("change-del") as HTMLElement;
+
+/**
+ * 전체 변경량을 툴바에 쓴다. 개수(`#status`)와 **같은 순간에만** 움직인다 —
+ * 화면에 렌더된 것이 곧 이 숫자의 출처라, 로딩·실패 중에는 손대지 않는다
+ * (그때 화면에는 직전 diff가 그대로 남아 있으므로 숫자도 그것이 맞다).
+ */
+const applyChangeTotals = (
+	files: readonly {
+		hunks: readonly { additionLines: number; deletionLines: number }[];
+	}[],
+): void => {
+	const view = changeTotalsView(files);
+	changeAddEl.textContent = view.additions;
+	changeDelEl.textContent = view.deletions;
+};
+
+// 트리거가 곧 정체성 표식이다 — 조작이면서 "지금 무엇을 보고 있는가"를
+// 통째로 말한다. 예전엔 개수 왼쪽에 같은 말을 하는 라벨이 따로 있었다.
+const pickerScopeEl = document.getElementById("picker-scope") as HTMLElement;
+const pickerNameEl = document.getElementById("picker-name") as HTMLElement;
+const pickerBranchEl = document.getElementById("picker-branch") as HTMLElement;
+// 겹치지 않는 다른 축 — 무엇과 견주는가.
+const baseLabelEl = document.getElementById("base-label") as HTMLElement;
+
+/**
+ * 툴바 라벨과 탭 제목을 **한 계산 경로**로 세운다. 둘이 갈라지면 같은 사실을
+ * 화면 두 곳이 다르게 말하게 되므로 문자열 조립은 전부 repoLabel.ts가 한다.
+ */
+// /api/refs가 준 마지막 값. 라벨은 diff 응답(base 이름)이 올 때도 다시 그려야
+// 하는데 그때는 워크트리 목록이 손에 없으므로 여기에 붙들어 둔다.
+let lastWorktrees: readonly WorktreeRecord[] = [];
+let lastRepoRoot: string | null = null;
+
+/**
+ * 견줄 기준의 **표시명**. 워킹트리(HEAD) 대비면 null — 그건 "커밋 안 한 변경"
+ * 이지 무엇과 견준 결과가 아니라서 라벨이 아무 말도 하지 않아야 한다.
+ * `@auto`의 이름은 서버가 매 diff 응답의 `x-diff-base`로 알려준다.
+ */
+const baseDisplay = (): string | null =>
+	// 커밋된 rev를 보는 중이면 워킹트리 기준은 뜻이 없어 서버가 auto로
+	// 해석한다(`server/selection.ts`의 normalize). 화면도 같은 규칙을 써야
+	// 라벨이 서버가 실제로 쓴 기준과 어긋나지 않는다 — 안 그러면 서버는
+	// main과 견주는데 툴바는 아무 말도 안 한다.
+	compareBase === "HEAD" && currentHead === null
+		? null
+		: compareBase === "HEAD" || compareBase === "@auto"
+			? diffBase || null
+			: compareBase;
+
+const applyRepoLabel = (
+	worktrees?: readonly WorktreeRecord[],
+	repoRoot?: string | null,
+): void => {
+	if (worktrees) {
+		lastWorktrees = worktrees;
+		lastRepoRoot = repoRoot ?? null;
+	}
+	const view = repoLabelView(repo, lastWorktrees, lastRepoRoot, {
+		head: currentHead,
+		base: baseDisplay(),
+	});
+	pickerScopeEl.textContent = view.scope;
+	pickerNameEl.textContent = view.name;
+	pickerBranchEl.textContent = view.branch;
+	// 말줄임을 hover로 편다 — 트리거는 이제 세 조각을 담아 길어질 수 있다.
+	pickerBtn?.setAttribute("title", view.title);
+	baseLabelEl.textContent = view.base;
+	document.title = view.documentTitle;
+};
+
+/**
+ * 브랜치를 /api/refs로 최신화한다.
+ *
+ * 부르는 곳은 셋이다: load()(부트스트랩·focus·refresh·토글), 피커 열림,
+ * 그리고 watch의 poll(). **poll()이 빠지면 안 된다** — watch는 창을 안 보고
+ * 있을 때 쓰는 기능이라 focus가 발화하지 않아서, diff만 새 브랜치 것으로
+ * 갈리고 툴바·탭 제목은 옛 브랜치에 무기한 굳는다. 게다가 같은 화면의 빈 상태
+ * 카드는 /api/summary(캐시 없음)로 **살아 있는** 브랜치를 말하므로, 한 화면이
+ * 서로 다른 두 브랜치를 동시에 주장하게 된다 — 이 기능이 없애려던 오진을
+ * 새로 만드는 셈이다.
+ *
+ * 비용은 /api/refs의 5초 TTL이 흡수한다: 폴이 2초여도 실제 git 호출은 5초에
+ * 두 번(worktree list + for-each-ref)이 상한이고, 폴이 매번 태우는 diff 빌드에
+ * 비하면 무시할 수준이다. "내용이 바뀐 폴에서만" 같은 조건은 쓸 수 없다 —
+ * 워킹트리가 깨끗한 채로 브랜치만 갈아타면 diff 지문이 그대로라 304로 흘러
+ * 한 번도 안 돌기 때문이다(그게 정확히 고쳐야 할 경우다).
+ *
+ * 신선도는 피커와 **같다**: 같은 TTL 캐시를 그대로 타므로 브랜치를 갈아탄
+ * 직후의 첫 갱신은 캐시를 읽을 수 있고 늦어도 5초 안에 수렴한다. 캐시를
+ * 우회하지 않는 이유는 같은 데이터를 보는 두 UI가 서로 다른 신선도를 주장하면
+ * 안 되기 때문이다.
+ */
+const refreshRepoLabel = async (): Promise<void> => {
+	try {
+		const res = await fetch(
+			`/api/refs?repo=${encodeURIComponent(repo)}&token=${token}`,
+		);
+		if (!res.ok) return;
+		const body = (await res.json()) as RefsResult;
+		applyRepoLabel(body.worktrees, body.repoRoot);
+	} catch {
+		// 부가 정보다 — 못 받아도 이름은 이미 떠 있고 diff는 그대로 동작한다.
+	}
+};
+
 let diffStyle: "unified" | "split" = resolveDiffStyle(params.get("style"));
 let includeUntracked = resolveUntracked(params.get("untracked"));
 // 견줄 기준. "HEAD"는 미커밋 변경만, "@auto"는 서버가 해석한 base,
 // 그 밖은 그 참조 자체다. merge-base(HEAD, HEAD)가 HEAD라 "HEAD"가 별도
 // 분기 없이 오늘의 워킹트리 뷰가 된다.
 let compareBase = "HEAD";
+/**
+ * head로 고른 브랜치. null이면 워킹트리를 본다(기본).
+ *
+ * **저장하지 않는다** — URL이 진실이라야 링크가 그대로 재현되고, 저장하면
+ * 다음에 그 리포를 열 때 남의 브랜치 뷰에 갇힌 채 시작한다.
+ */
+let currentHead: string | null = params.get("head") || null;
 const diffModeOf = (base: string): "working" | "base" =>
 	base === "HEAD" ? "working" : "base";
 // grab 참조와 이미지 blob이 쓰는 "실제로 견주는 대상"의 이름. 사용자가
@@ -519,6 +637,9 @@ const buildGrabSnapshot = (
 		status: statusOf(fileId),
 		mode: diffModeOf(compareBase),
 		baseName: effectiveBaseName(),
+		// 어느 리비전에서 잡았는지 — 없으면 참조가 워킹트리를 가리키는 것으로
+		// 읽힌다(encode.ts의 `head` 주석). blobUrl 호출부와 같은 관례.
+		...(currentHead ? { head: currentHead } : {}),
 		snippet,
 	};
 	return {
@@ -776,6 +897,7 @@ const syncTreeFold = (): void => {
 const fetchSummary = async (): Promise<RepoSummary | null> => {
 	try {
 		const query = new URLSearchParams({ repo, token, base: compareBase });
+		if (currentHead) query.set("head", currentHead);
 		const res = await fetch(`/api/summary?${query.toString()}`);
 		if (!res.ok) return null;
 		return (await res.json()) as RepoSummary;
@@ -784,9 +906,29 @@ const fetchSummary = async (): Promise<RepoSummary | null> => {
 	}
 };
 
-// 빈 상태를 정보형 카드로 승격한다. best-effort: 요약 fetch가 실패하면 기존
-// "No changes." 폴백이 그대로 남는다. marker 동일성 가드 — fetch 동안 다른
+/**
+ * 첫 로드와 **빈 상태 해석 중**에 쓰는 같은 표시. 두 자리가 같은 마크업을
+ * 쓰는 것이 계약이다 — 로딩에서 로딩으로 넘어가는 자리라 다른 것을 그리면
+ * 사용자에게는 한 번 깜박인 것으로 보인다.
+ */
+const LOADING_MARKUP =
+	'<div id="empty" data-loading><span class="loading-spinner"></span>Loading diff…</div>';
+
+// 빈 상태를 정보형 카드로 승격한다. best-effort: 요약 fetch가 실패해야만
+// "No changes." 폴백으로 내려앉는다. marker 동일성 가드 — fetch 동안 다른
 // 렌더가 #empty를 갈아치웠으면(새 diff 도착 등) 낡은 카드를 덮어쓰지 않는다.
+// 자동 base 전환을 한 페이지에서 한 번만 시도한다. 조건이 계속 참이어도
+// 재진입하지 않게 하는 안전장치다(전환 뒤에는 mode가 base라 조건 자체가
+// 거짓이 되지만, 루프 없음을 코드에서 바로 읽히게 둔다).
+let autoBaseTried = false;
+
+// 사용자가 견줄 기준을 고른 적이 있는가 — URL의 `base=`든 저장된
+// 프리퍼런스든. resolveCompareBase가 null을 주면 아무 선택도 없다는 뜻이다.
+// 호출 시점에 다시 읽는다: 모듈 초기화 때 캐시해 두면 피커로 고른 뒤에도
+// 옛 값이 남아 자동 전환이 사용자의 선택을 덮는다.
+const hasExplicitBase = (): boolean =>
+	resolveCompareBase(urlChoice, (k) => localStorage.getItem(k), repo) !== null;
+
 const enrichEmptyState = async (): Promise<void> => {
 	const marker = diffMount.querySelector("#empty");
 	if (!marker) return;
@@ -794,14 +936,46 @@ const enrichEmptyState = async (): Promise<void> => {
 	// 바꾸면(새 diff가 로딩 중) 새 모드 문구의 카드를 그리면 모순이므로 버린다.
 	const mode = compareBase;
 	const untrackedShown = includeUntracked;
+	// head도 굳혀야 한다 — 브랜치를 갈아타도 base가 이미 `@auto`면 mode는 안
+	// 바뀌므로, head만 다른 두 요약이 같은 스냅샷을 통과해 옛 head의 카드가
+	// 그려질 수 있다.
+	const head = currentHead;
 	const summary = await fetchSummary();
-	if (!summary) return;
+	// 요약이 없으면 이제서야 폴백 문구를 쓴다 — 여기까지 와야 "말할 것이
+	// 더 없다"가 참이 된다. 노드 동일성은 유지해 이후 marker 가드가 계속
+	// 맞아떨어지게 한다.
+	if (!summary) {
+		if (diffMount.querySelector("#empty") === marker) {
+			marker.removeAttribute("data-loading");
+			marker.textContent = "No changes.";
+		}
+		return;
+	}
 	if (diffMount.querySelector("#empty") !== marker) return;
-	if (mode !== compareBase || untrackedShown !== includeUntracked) return;
+	if (
+		mode !== compareBase ||
+		untrackedShown !== includeUntracked ||
+		head !== currentHead
+	) {
+		return;
+	}
 	const model = buildEmptyStateModel(summary, {
 		mode: diffModeOf(mode),
 		untrackedShown,
 	});
+	// 빈 화면을 보여주는 대신 볼 것이 있는 쪽으로 바로 데려간다. 저장하지
+	// 않는다 — 추론이지 사용자의 선택이 아니다. 피커로 직접 고르면 그때
+	// 저장되고, 그 뒤로는 hasExplicitBase()가 이 경로를 영구히 막는다.
+	if (
+		shouldAutoViewBase(model, {
+			hasExplicitBase: hasExplicitBase(),
+			alreadyTried: autoBaseTried,
+		})
+	) {
+		autoBaseTried = true;
+		void selectBase("@auto", { persist: false });
+		return;
+	}
 	const card = renderEmptyState(document, model, {
 		onSwitchMode: () => void applySelection("@auto"),
 		onShowUntracked: () => {
@@ -823,8 +997,17 @@ const renderPatch = (unsorted: DiffFile[]): void => {
 		teardownViews();
 		parseCache.prune([]);
 		diffMount.replaceChildren();
-		diffMount.innerHTML = '<div id="empty">No changes.</div>';
+		// **빈 상태의 문구는 /api/summary가 와야 정해진다.** 여기서 "No
+		// changes."를 먼저 그리면 그 말이 화면에 떴다가 60~80ms 뒤 카드가
+		// 도착하며 곧바로 뒤집힌다(실측: 첫 로드 673ms "No changes." → 753ms
+		// "No tracked changes …"). 자동 base 전환이 걸리는 경우엔 더 나쁘다 —
+		// 볼 것이 있는데도 없다고 한 번 말한 뒤 diff가 뜬다. 그래서 자리만
+		// 잡아 두고 문구는 enrichEmptyState가 **한 번만** 쓴다. 로딩 표시를
+		// 그대로 재사용하는 것이 계약이다: 다른 표시를 쓰면 로딩 → 로딩으로
+		// 넘어가는 자리에서 한 번 더 깜박인다.
+		diffMount.innerHTML = LOADING_MARKUP;
 		statusEl.textContent = "";
+		applyChangeTotals([]);
 		void enrichEmptyState();
 		return;
 	}
@@ -841,6 +1024,7 @@ const renderPatch = (unsorted: DiffFile[]): void => {
 			side,
 			mode: diffModeOf(compareBase),
 			base: compareBase,
+			...(currentHead ? { head: currentHead } : {}),
 			version,
 		});
 
@@ -936,6 +1120,8 @@ const renderPatch = (unsorted: DiffFile[]): void => {
 			};
 		});
 	parseCache.prune(items.map((it) => it.id));
+	// 개수 옆의 전체 변경량. items는 방금 전량 파싱됐으므로 합산은 공짜다.
+	applyChangeTotals(items.map((it) => it.fileDiff));
 
 	searchFiles = items.map((it) => ({ fileId: it.id, fileDiff: it.fileDiff }));
 	findBar?.setData();
@@ -1062,20 +1248,6 @@ const renderPatch = (unsorted: DiffFile[]): void => {
 
 // 트리거가 "지금 무엇과 견주는 중인가"를 말한다. @auto는 서버가 이름을
 // 알려줘야 쓸 수 있으므로 매 응답마다 다시 그린다.
-const pickerLabelText = (): string =>
-	compareBase === "HEAD"
-		? "Working tree"
-		: compareBase === "@auto"
-			? `vs ${diffBase || "base"}`
-			: `vs ${compareBase}`;
-
-const syncPickerLabel = (): void => {
-	if (!pickerLabel) return;
-	const text = pickerLabelText();
-	pickerLabel.textContent = text;
-	pickerBtn?.setAttribute("title", text);
-};
-
 type FetchDiffResult =
 	| { kind: "data"; files: DiffFile[]; base: string; etag: string | null }
 	| { kind: "unchanged"; base: string };
@@ -1084,7 +1256,7 @@ type FetchDiffAttempt =
 	| FetchDiffResult
 	// 서버가 살아있고 이 요청 자체가 잘못됐다는 신호(토큰 불일치·git repo
 	// 아님) — 재시도해도 같은 답을 받으므로 즉시 포기한다.
-	| { kind: "terminal"; unknownBase: boolean }
+	| { kind: "terminal"; unknownBase: boolean; unknownHead: boolean }
 	// 서버가 일시적으로 응답을 못 만든(single-flight 타임아웃 503,
 	// singleFlight.ts) 경우와 네트워크 레벨 실패(fetch 자체가 throw) —
 	// 둘 다 곧 회복될 수 있으니 재시도할 가치가 있다.
@@ -1097,6 +1269,7 @@ const fetchDiffOnce = async (): Promise<FetchDiffAttempt> => {
 		untracked: includeUntracked ? "1" : "0",
 		base: compareBase,
 	});
+	if (currentHead) query.set("head", currentHead);
 	try {
 		// 조건부 요청: 서버 지문이 그대로면 304가 오고, 수십 MB payload 전송과
 		// JSON 파싱·재렌더 전부를 건너뛴다.
@@ -1107,9 +1280,11 @@ const fetchDiffOnce = async (): Promise<FetchDiffAttempt> => {
 		if (res.status === 304) return { kind: "unchanged", base };
 		if (res.status === 503) return { kind: "retryable" };
 		if (!res.ok) {
+			const marker = res.headers.get("x-diff-error");
 			return {
 				kind: "terminal",
-				unknownBase: res.headers.get("x-diff-error") === "unknown-base",
+				unknownBase: marker === "unknown-base",
+				unknownHead: marker === "unknown-head",
 			};
 		}
 		const files = (await res.json()) as DiffFile[];
@@ -1152,12 +1327,16 @@ const recoverFromStaleBase = (unknownBase: boolean): boolean => {
 	staleBaseRecovered = true;
 	localStorage.removeItem(compareBaseKey(repo));
 	compareBase = "HEAD";
-	syncPickerLabel();
+	applyRepoLabel();
 	lastEtag = null;
 	return true;
 };
 
+/** 직전 시도가 "그 head를 못 찾겠다"로 끝났으면 그 ref 이름. */
+let lastUnknownHead: string | null = null;
+
 const fetchDiff = async (): Promise<FetchDiffResult | null> => {
+	lastUnknownHead = null;
 	// 각 시도가 이전 시도의 결과(terminal이면 즉시 포기, retryable이면 대기 후
 	// 재시도)에 의존하므로 의도적으로 순차 실행 — Promise.all로 병렬화할 대상이
 	// 아니다 (diff.ts:resolveBaseRef와 동일 관례).
@@ -1173,6 +1352,11 @@ const fetchDiff = async (): Promise<FetchDiffResult | null> => {
 				attempt--;
 				continue;
 			}
+			// head는 base와 달리 **URL에 산다** — 저장된 값을 조용히 지우는
+			// 자가복구를 쓸 수 없다(링크가 요청한 것과 다른 화면을 이유도 없이
+			// 보여주게 된다). 대신 화면이 무슨 일인지 말하고 빠져나갈 길을
+			// 준다. 이 종류는 흔하다: 머지 후 삭제된 브랜치를 가리키는 링크.
+			lastUnknownHead = result.unknownHead ? currentHead : null;
 			return null;
 		}
 		if (attempt >= RETRY_DELAYS_MS.length) return null;
@@ -1186,7 +1370,7 @@ const fetchDiff = async (): Promise<FetchDiffResult | null> => {
 let diffBase = "";
 const applyFetched = (result: FetchDiffResult): void => {
 	diffBase = result.base;
-	syncPickerLabel();
+	applyRepoLabel();
 	if (result.kind === "unchanged") {
 		// 변경 없음: 현재 렌더 유지, 상태 라벨만 복원한다.
 		statusEl.textContent =
@@ -1203,15 +1387,45 @@ const applyFetched = (result: FetchDiffResult): void => {
 	renderPatch(result.files);
 };
 
+/**
+ * "그 head가 없다" 카드. 빈 상태 카드와 **같은 클래스**를 쓴다 — 새 어휘를
+ * 만들 이유가 없고, 액션 버튼의 생김새도 그대로 물려받는다.
+ */
+const renderMissingHead = (ref: string): void => {
+	diffMount.replaceChildren();
+	const card = document.createElement("div");
+	card.id = "empty";
+	card.className = "empty-card";
+	const headline = document.createElement("div");
+	headline.className = "empty-headline";
+	headline.textContent = "That branch is gone";
+	const context = document.createElement("div");
+	context.className = "empty-context";
+	context.textContent = `No ref named ${ref} in this repo`;
+	const action = document.createElement("button");
+	action.type = "button";
+	action.className = "empty-action";
+	action.textContent = "View the working tree instead";
+	action.addEventListener("click", () => {
+		const next = new URL(location.href);
+		next.searchParams.delete("head");
+		location.href = next.toString();
+	});
+	card.append(headline, context, action);
+	diffMount.append(card);
+};
+
 const load = async (): Promise<void> => {
+	// 정체성 갱신은 diff와 독립이다 — 기다리지 않는다. 브랜치를 갈아탄 뒤
+	// 창으로 돌아오면(focus → load) 라벨이 따라온다.
+	void refreshRepoLabel();
 	statusEl.textContent = "Loading…";
 	// 첫 로드(아직 아무것도 렌더된 적 없음)에만 로딩 인디케이터를 띄운다 —
 	// 이후 갱신은 기존 내용을 유지한 채 백그라운드로 교체되므로 비워지지
 	// 않는 것이 의도된 동작이다. 렌더가 성공하면 renderPatch가 이 노드를
 	// 통째로 대체한다.
 	if (!lastFiles) {
-		diffMount.innerHTML =
-			'<div id="empty" data-loading><span class="loading-spinner"></span>Loading diff…</div>';
+		diffMount.innerHTML = LOADING_MARKUP;
 	}
 	const result = await fetchDiff();
 	if (result === null) {
@@ -1228,6 +1442,18 @@ const load = async (): Promise<void> => {
 		// 어긋난다: 그 경로는 teardownViews()로 이미 codeView를 비운 뒤라 카드를
 		// 쓰는 게 안전한데도 억제돼, 상태 라벨만 실패를 말하고 화면은 "No
 		// changes."를 계속 주장하게 된다.
+		// 사라진 head는 평범한 실패가 아니다 — 원인이 URL에 적혀 있고,
+		// 새로고침해도 같은 화면이라 스스로 못 빠져나온다(머지 후 삭제된
+		// 브랜치를 가리키는 링크에서 흔하다). 무엇이 없는지 말하고 나갈 길을
+		// 준다. **자동으로 되돌리지는 않는다** — head는 저장된 값이 아니라
+		// 링크가 요청한 것이라, 말없이 다른 화면을 보여주면 base의 자가복구와
+		// 달리 사용자가 속는다.
+		const goneHead = lastUnknownHead;
+		if (goneHead !== null) {
+			if (!codeView) renderMissingHead(goneHead);
+			statusEl.textContent = "";
+			return;
+		}
 		if (!codeView) {
 			diffMount.innerHTML = '<div id="empty">Failed to load diff.</div>';
 		}
@@ -1287,17 +1513,22 @@ window.addEventListener("focus", () => void load());
 const CHECK_SVG =
 	'<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>';
 
-// 목록을 받기 전에도 Working tree 행은 항상 있다. 빈 배열로 두면 피커를
-// 열 때마다 "No match"가 한 프레임 스치고, 그건 목록이 없는 것처럼 읽힌다.
-let pickerRows: BaseRow[] = buildBaseRows([], null, null);
+// 아직 /api/refs를 한 번도 못 받았다. head 모델에는 목록 없이 세울 수 있는
+// 행이 하나도 없으므로(워크트리 0개 + refs 0개 → 빈 배열) 이 값은 정말로
+// 비어 있다 — 예전 base 모델의 "Working tree 행은 항상 있다"는 전제는 더
+// 이상 참이 아니다. 그래서 빈 목록의 문구를 `pickerLoaded`로 가른다:
+// **"No match"는 걸러낸 결과가 없다는 뜻**이라, 받아 본 적조차 없는 첫
+// 오픈에 그걸 쓰면 "이 리포엔 고를 게 없다"는 거짓말이 한 프레임 스친다.
+let pickerRows: HeadRow[] = [];
+let pickerLoaded = false;
 // 방향키가 움직이는 활성 행. 필터가 바뀌면 첫 행으로 되돌린다.
 let pickerActive = 0;
 // 현재 화면에 그려진 행들 — 키보드 처리와 렌더가 같은 목록을 봐야 한다.
-let pickerVisible: BaseRow[] = [];
+let pickerVisible: HeadRow[] = [];
 
 const renderPickerRows = (): void => {
 	if (!pickerList) return;
-	const rows = filterBaseRows(pickerRows, pickerSearch?.value ?? "");
+	const rows = filterPickerRows(pickerRows, pickerSearch?.value ?? "");
 	pickerVisible = rows;
 	if (pickerActive >= rows.length) pickerActive = 0;
 	pickerList.replaceChildren();
@@ -1305,13 +1536,14 @@ const renderPickerRows = (): void => {
 	if (rows.length === 0) {
 		const empty = document.createElement("div");
 		empty.id = "ref-picker-empty";
-		empty.textContent = "No match";
+		empty.setAttribute("role", "presentation");
+		empty.textContent = pickerLoaded ? "No match" : "Loading…";
 		pickerList.append(empty);
 		return;
 	}
 	const SECTION_LABEL: Record<string, string> = {
-		uncommitted: "UNCOMMITTED",
-		branches: "COMPARE WITH A BRANCH",
+		worktrees: "WORKTREES",
+		branches: "BRANCHES",
 	};
 	let section: string | null = null;
 	for (const [index, row] of rows.entries()) {
@@ -1319,10 +1551,14 @@ const renderPickerRows = (): void => {
 			if (section !== null) {
 				const rule = document.createElement("div");
 				rule.className = "ref-divider";
+				// listbox의 허용 자식은 option/group뿐이라, 구분선·제목을 그냥
+				// 두면 보조기술이 옵션 수를 잘못 세거나 제목을 옵션처럼 읽는다.
+				rule.setAttribute("role", "presentation");
 				pickerList.append(rule);
 			}
 			const head = document.createElement("div");
 			head.className = "ref-section";
+			head.setAttribute("role", "presentation");
 			head.textContent = SECTION_LABEL[row.section] ?? row.section;
 			pickerList.append(head);
 			section = row.section;
@@ -1336,7 +1572,8 @@ const renderPickerRows = (): void => {
 			el.dataset.active = "true";
 			pickerSearch?.setAttribute("aria-activedescendant", el.id);
 		}
-		const selected = row.value === compareBase;
+		// 값의 종류가 둘(경로·참조 이름)이라 비교는 모델이 끝내 둔다.
+		const selected = row.selected;
 		el.setAttribute("aria-selected", String(selected));
 		// 사용자 입력이 섞이지 않는 상수 마크업이라 안전하다.
 		if (selected) el.insertAdjacentHTML("afterbegin", CHECK_SVG);
@@ -1350,7 +1587,7 @@ const renderPickerRows = (): void => {
 			note.textContent = row.note;
 			el.append(note);
 		}
-		el.addEventListener("click", () => void applySelection(row.value));
+		el.addEventListener("click", () => void applyPick(row));
 		pickerList.append(el);
 	}
 };
@@ -1365,31 +1602,19 @@ const loadPickerRows = async (): Promise<void> => {
 		);
 		if (!res.ok) return;
 		const body = (await res.json()) as RefsResult;
-		// %(HEAD)는 명령을 실행한 워크트리 기준이라 리포 전역 목록에서는
-		// misleading하다. 이 워크트리가 무엇을 체크아웃했는지는 worktree
-		// 목록에서 자기 경로를 찾아 읽는다.
-		const current = body.worktrees.find((w) => w.path === repo)?.branch ?? null;
-		// 목록을 먼저 그린다. 개수를 기다리면 목록이 /api/refs(수 ms)가 아니라
-		// /api/summary(수십 ms)의 속도로 뜨고, 더 나쁘게는 getRepoSummary가
-		// 의도적으로 single-flight 밖이라(CLAUDE.md) 거기서 매달리면 목록이
-		// Working tree 한 줄에 영구히 갇힌다.
-		pickerRows = buildBaseRows(body.refs, body.defaultBranch, current);
-		renderPickerRows();
-
-		// 개수는 부가 정보다 — 도착하면 얹고, 못 받으면 목록을 그대로 쓴다.
-		const summary = await fetchSummary();
-		if (!summary) return;
-		const counts: RowCounts = {
-			working: summary.workingFiles,
-			// 표시명(base)이 아니라 **실제로 잰 ref**로 맞춘다. base는 origin/
-			// 접두가 벗겨져 있어, 그걸로 맞추면 origin/main으로 잰 숫자가 로컬
-			// main 행에 붙는다 — 로컬이 뒤처져 있으면 값이 실제로 갈린다.
-			base:
-				summary.ref !== null && summary.baseFiles !== null
-					? { name: summary.ref, files: summary.baseFiles }
-					: null,
-		};
-		pickerRows = buildBaseRows(body.refs, body.defaultBranch, current, counts);
+		// 같은 응답으로 라벨도 최신화한다 — 피커를 열 때마다 공짜로 따라온다.
+		// "내가 어느 워크트리에 있는가"의 판정은 모델이 repoLabel의 것을
+		// 그대로 쓴다(답이 앱 안에 둘 있으면 안 된다).
+		applyRepoLabel(body.worktrees, body.repoRoot);
+		// /api/refs 하나로 목록이 완성된다. 예전에는 행마다 파일 개수를 얹으려고
+		// /api/summary를 이어 받았는데, 그건 base 축의 수치라 head를 고르는
+		// 지금은 행의 뜻과 맞지 않는다(그리고 getRepoSummary는 의도적으로
+		// single-flight 밖이라 목록이 그 속도에 묶였다).
+		pickerLoaded = true;
+		pickerRows = buildHeadRows(body.worktrees, body.refs, body.defaultBranch, {
+			repo,
+			head: currentHead,
+		});
 		renderPickerRows();
 	} catch {
 		// 목록을 못 받아도 피커는 열린다 — 지금 고른 값은 라벨이 계속 말한다.
@@ -1408,18 +1633,71 @@ const setPickerOpen = (open: boolean): void => {
 	void loadPickerRows();
 };
 
-const applySelection = async (next: string): Promise<void> => {
-	setPickerOpen(false);
-	pickerBtn?.focus();
+/**
+ * 견줄 기준을 바꾼다. `persist`가 사용자의 **선택**과 서버 상태로부터의
+ * **추론**을 가른다 — 추론을 저장해 버리면 고른 적 없는 프리퍼런스가 생겨
+ * 이후 자동 전환이 영영 막힌다.
+ */
+const selectBase = async (
+	next: string,
+	opts: { persist: boolean },
+): Promise<void> => {
 	if (next === compareBase) return;
 	compareBase = next;
-	localStorage.setItem(compareBaseKey(repo), next);
-	syncPickerLabel();
+	if (opts.persist) localStorage.setItem(compareBaseKey(repo), next);
+	applyRepoLabel();
 	// 쿼리 의미가 바뀌므로 조건부 요청을 끊는다 (untracked 토글과 같은 이유).
 	lastEtag = null;
 	await load();
 };
 
+// 피커/카드에서 사용자가 직접 고른 경로. 고른 값이 지금과 같아도 패널은
+// 닫고 포커스를 돌려줘야 하므로 그 둘이 조기 반환보다 앞에 온다.
+const applySelection = async (next: string): Promise<void> => {
+	setPickerOpen(false);
+	pickerBtn?.focus();
+	await selectBase(next, { persist: true });
+};
+
+/**
+ * 피커에서 고른 행을 적용한다. **두 구역은 일어나는 일이 다르다.**
+ *
+ * 워크트리는 다른 리포 경로다 — diff·파일트리·라벨·프리퍼런스 키가 전부
+ * 갈리므로 상태를 손으로 되돌리는 대신 그 URL로 **이동**한다. 옮기면서
+ * `head`를 들고 가지 않는 이유는 그것이 워크트리에 매인 값이 아니어서다:
+ * 그대로 두면 새 워크트리에서 남의 브랜치를 보게 된다.
+ *
+ * 브랜치는 같은 워크트리 안의 축이라 이동 없이 `head`만 바꾼다. URL에 실어
+ * 두면 새로고침과 링크 공유가 그대로 재현된다.
+ */
+const applyPick = async (row: HeadRow): Promise<void> => {
+	setPickerOpen(false);
+	pickerBtn?.focus();
+	if (row.kind === "worktree") {
+		if (row.selected) return;
+		const next = new URL(location.href);
+		next.searchParams.set("repo", row.value);
+		next.searchParams.delete("head");
+		location.href = next.toString();
+		return;
+	}
+	if (row.value === currentHead) return;
+	currentHead = row.value;
+	// 커밋된 rev에는 "커밋 안 한 변경"이 없다 — base가 워킹트리(HEAD) 기준이면
+	// 그 조합은 언제나 빈 diff다. 브랜치를 고르는 것은 곧 "그 브랜치가 base에서
+	// 갈라진 뒤 한 일"을 보겠다는 뜻이므로 기준을 자동 해석으로 올린다.
+	// URL에는 싣지 않는다: 추론이지 사용자의 선택이 아니고(자동 base 전환과
+	// 같은 부류), 새로고침하면 그 전환이 같은 상태를 다시 만든다.
+	if (compareBase === "HEAD") compareBase = "@auto";
+	const next = new URL(location.href);
+	next.searchParams.set("head", row.value);
+	history.replaceState(null, "", next.toString());
+	applyRepoLabel();
+	// 쿼리 의미가 바뀌므로 조건부 요청을 끊는다 (base 전환과 같은 이유).
+	lastEtag = null;
+	await load();
+};
+
 pickerBtn?.addEventListener("click", () => {
 	const opening = Boolean(pickerPanel?.hidden);
 	// 두 패널이 동시에 열려 있으면 바깥 클릭 규칙이 서로를 가린다.
@@ -1455,7 +1733,7 @@ pickerSearch?.addEventListener("keydown", (event) => {
 	if (event.key === "Enter") {
 		event.preventDefault();
 		const row = pickerVisible[pickerActive];
-		if (row) void applySelection(row.value);
+		if (row) void applyPick(row);
 	}
 });
 
@@ -1495,7 +1773,20 @@ const compareBaseFromStorage = urlChoice === null;
 compareBase =
 	resolveCompareBase(urlChoice, (k) => localStorage.getItem(k), repo) ??
 	(storedLegacyMode === "base" ? "@auto" : "HEAD");
-syncPickerLabel();
+// 이름은 repo 경로에서 즉시 알 수 있으므로 첫 프레임부터 그린다. 브랜치는
+// /api/refs가 도착하면 채워지고, 그때까지는 빈 텍스트다 — 그래서 라벨을
+// hidden으로 토글할 일이 없다(CLAUDE.md의 author display + [hidden] 함정).
+//
+// **이 호출은 `compareBase`·`currentHead` 선언보다 뒤에 있어야 한다.** 한때
+// 선언부(284·291행)보다 앞인 242행에 있었는데, 그때 살아 있던 이유는
+// 번들러뿐이었다: `bun build`가 최상위 `let`을 `var`로 낮춰 TDZ가 아니라
+// `undefined`가 됐다(실측 — 같은 코드를 ESM 그대로 평가하면
+// `ReferenceError: Cannot access 'currentHead' before initialization`으로
+// 모듈이 통째로 죽는다). 게다가 `undefined`는 `null`이 아니라 head 분기를
+// 통과해 `#base-label`에 리터럴 `"vs undefined"`를 썼다 — 같은 동기 실행
+// 안의 이 호출이 덮어써서 페인트만 안 됐을 뿐이다. 타입체크도 커버리지도
+// 유닛도 이걸 못 본다(main.ts는 셋 다 밖이다).
+applyRepoLabel();
 
 // Apply persisted file-tree side and reflect stored prefs in the overflow menu.
 appEl.dataset.treeSide = treeSide;
@@ -1741,6 +2032,10 @@ let pollInFlight = false;
 const poll = async (): Promise<void> => {
 	if (pollInFlight) return;
 	pollInFlight = true;
+	// watch 중에는 focus가 발화하지 않으므로 여기서도 정체성을 갱신한다.
+	// 빠지면 diff만 새 브랜치 것으로 갈리고 라벨·탭 제목은 옛 브랜치에 굳는다
+	// (refreshRepoLabel의 주석에 근거와 비용 계산이 있다).
+	void refreshRepoLabel();
 	try {
 		const result = await fetchDiff();
 		if (result === null) return;
diff --git a/apps/viewer/browser/refPicker/model.ts b/apps/viewer/browser/refPicker/model.ts
index 9d3abb5..2b8c08c 100644
--- a/apps/viewer/browser/refPicker/model.ts
+++ b/apps/viewer/browser/refPicker/model.ts
@@ -1,107 +1,157 @@
 /**
- * 피커가 보여줄 "무엇과 견줄까" 목록의 순수 로직.
+ * 피커가 보여줄 "무엇을 볼까" 목록의 순수 로직.
+ *
+ * **이 피커는 base가 아니라 head를 고른다.** 예전에는 "무엇과 견줄까"(base)를
+ * 골랐는데, 그러면 목록에 뜬 브랜치 이름이 "그 브랜치를 보여줘"로 읽히면서
+ * 실제로는 반대 축을 건드리는 어긋남이 생겼다 — 메인 워크트리에서 남의
+ * 브랜치를 골라도 1 file만 나오던 것이 그 결과다. base는 이제 서버가
+ * 해석한다(`@auto`).
+ *
+ * 두 구역은 고르면 **일어나는 일이 다르다**:
+ * - 워크트리 → 그 워크트리로 **이동**한다(`repo` 파라미터가 바뀐다).
+ * - 브랜치   → 그 브랜치를 head로 **본다**(`head` 파라미터, 커밋된 것만).
  *
  * DOM도 fetch도 모르므로 유닛으로 전부 덮인다 — 배선만 main.ts에 남는다.
  */
-import type { RefRecord } from "../../server/refs.ts";
+import type { RefRecord, WorktreeRecord } from "../../server/refs.ts";
+import { findWorktree, repoDisplayName } from "../repoLabel.ts";
 
 /** 목록의 두 구역. 종류가 다르다는 것을 화면에서 가르는 근거다. */
-export type RowSection = "uncommitted" | "branches";
+export type RowSection = "worktrees" | "branches";
 
-export interface BaseRow {
-	/** `base=` 쿼리에 실릴 값. */
+export interface HeadRow {
+	/**
+	 * 고르면 무엇이 일어나는가.
+	 * - `worktree` — 그 워크트리로 이동(`value`는 최상위 **경로**).
+	 * - `local`/`remote` — 그 브랜치를 head로 본다(`value`는 참조 **이름**).
+	 */
+	kind: "worktree" | "local" | "remote";
+	/** 워크트리면 최상위 경로, 브랜치면 참조 이름. */
 	value: string;
 	/** 화면에 보이는 이름. */
 	label: string;
-	kind: "working" | "local" | "remote";
 	section: RowSection;
 	/** 맥락 표시. note에 합쳐져 오른쪽에 붙는다. */
-	tag: "default" | "HEAD" | null;
-	/** 행 오른쪽 보조 텍스트. 모르는 것은 지어내지 않으므로 null일 수 있다. */
+	tag: "default" | null;
+	/** 행 오른쪽 보조 텍스트. 워크트리는 **물고 있는 브랜치**가 여기 온다. */
 	note: string | null;
+	/** 지금 보고 있는 행. 값의 종류가 둘이라 비교를 모델이 끝낸다. */
+	selected: boolean;
 }
 
-/**
- * 서버가 **이미 아는** 개수만 담는다. /api/summary가 매 로드마다 계산하는
- * 값이라 git 호출이 늘지 않는다. 브랜치마다 개수를 붙이려면 브랜치당 호출이
- * 하나씩 더 들기 때문에, 여기 없는 행에는 숫자를 쓰지 않는다.
- */
-export interface RowCounts {
-	/** 미커밋 변경 파일 수. 모르면 null. */
-	working: number | null;
-	/** 그 개수가 측정된 비교 대상과 파일 수. */
-	base: { name: string; files: number } | null;
+/** 지금 무엇을 보고 있는가. */
+export interface CurrentHead {
+	/** 뷰어가 연 경로(`repo` 파라미터). 리포 루트라는 보장은 없다. */
+	repo: string;
+	/** head로 고른 브랜치. 워크트리를 보고 있으면 null. */
+	head: string | null;
 }
 
-const files = (n: number): string => `${n} file(s)`;
+const worktreeNote = (
+	worktree: WorktreeRecord,
+	defaultBranch: string | null,
+): string | null => {
+	if (!worktree.branch) return null;
+	// 브랜치 구역과 같은 어휘로 `default`를 단다 — 왜 맨 위인지 읽히게.
+	// ` · `로 잇는 것은 이 피커가 태그와 개수를 잇던 방식 그대로다.
+	return worktree.branch === defaultBranch
+		? `${worktree.branch} · default`
+		: worktree.branch;
+};
 
 /**
- * 아직 커밋하지 않은 변경만 보는 선택. `merge-base(HEAD, HEAD) === HEAD`라서
- * 서버에 특별한 분기 없이 오늘의 워킹트리 뷰와 같은 결과가 된다.
+ * 워크트리 구역. **고를 것이 없으면 구역 자체를 내지 않는다** — 제목만 남기고
+ * 목록을 비우면 "뭔가 있어야 하는데 없다"로 읽힌다. 워크트리가 하나면 지금
+ * 그것을 보고 있으므로 고를 것이 없다.
+ *
+ * 순서: default 브랜치를 물고 있는 워크트리 → 지금 보고 있는 것 → 받은 순서.
  */
-const WORKING_VALUE = "HEAD";
-
-export const buildBaseRows = (
-	refs: readonly RefRecord[],
+const worktreeRows = (
+	worktrees: readonly WorktreeRecord[],
 	defaultBranch: string | null,
-	currentBranch: string | null,
-	counts?: RowCounts,
-): BaseRow[] => {
-	// 0을 "nothing yet"으로 쓰는 이유: 숫자 0은 훑어볼 때 눈에 안 걸리는데,
-	// 이 행이 비어 있다는 사실이야말로 고르기 전에 알아야 하는 것이다.
-	const workingNote =
-		counts?.working == null
-			? null
-			: counts.working === 0
-				? "nothing yet"
-				: files(counts.working);
-
-	const workingRow: BaseRow = {
-		value: WORKING_VALUE,
-		label: "Working tree",
-		kind: "working",
-		section: "uncommitted",
-		tag: null,
-		note: workingNote,
+	current: CurrentHead,
+): HeadRow[] => {
+	// head가 브랜치면 워크트리는 "지금 보고 있지 않은 것"이라 고를 대상이다 —
+	// 그때까지 숨기면 워크트리가 하나뿐인 리포에서 브랜치 뷰에 갇힌다.
+	if (worktrees.length <= 1 && current.head === null) return [];
+	// "내가 어느 워크트리에 있는가"는 repoLabel의 판정을 그대로 쓴다 — 답이
+	// 앱 안에 둘 있으면 안 되고, repo가 하위 디렉토리일 때도 맞아야 한다.
+	const viewed =
+		current.head === null ? findWorktree(worktrees, current.repo) : null;
+	const rank = (worktree: WorktreeRecord): number => {
+		if (defaultBranch !== null && worktree.branch === defaultBranch) return 0;
+		return worktree === viewed ? 1 : 2;
 	};
+	return [...worktrees]
+		.map((worktree, index) => ({ worktree, index }))
+		.sort((a, b) => rank(a.worktree) - rank(b.worktree) || a.index - b.index)
+		.map(({ worktree }) => ({
+			kind: "worktree" as const,
+			value: worktree.path,
+			label: repoDisplayName(worktree.path),
+			section: "worktrees" as const,
+			tag: null,
+			note: worktreeNote(worktree, defaultBranch),
+			selected: worktree === viewed,
+		}));
+};
 
-	const toRow = (r: RefRecord): BaseRow => {
-		// 자기 자신과 견주면 언제나 비어 보인다. 막지는 않되 왜 그런지
-		// 읽히도록 표시한다 — 조용한 빈 화면이 이 기능의 가장 큰 위험이다.
-		const tag =
-			r.name === defaultBranch
-				? "default"
-				: r.name === currentBranch
-					? "HEAD"
-					: null;
-		const measured =
-			counts?.base && counts.base.name === r.name
-				? files(counts.base.files)
-				: null;
-		const parts = [tag, measured].filter((s): s is string => s !== null);
+/**
+ * 브랜치 구역. 순서: default → 지금 보고 있는 브랜치 → 나머지(로컬 먼저).
+ *
+ * 올림은 **위치**로 판단한다 — 자기 브랜치가 default이기도 하면 태그는
+ * `default`로 남지만 자리는 하나뿐이므로 중복해서 올리지 않는다.
+ */
+const branchRows = (
+	refs: readonly RefRecord[],
+	defaultBranch: string | null,
+	current: CurrentHead,
+): HeadRow[] => {
+	const toRow = (record: RefRecord): HeadRow => {
+		const isDefault = record.name === defaultBranch;
 		return {
-			value: r.name,
-			label: r.name,
-			kind: r.kind,
+			kind: record.kind,
+			value: record.name,
+			label: record.name,
 			section: "branches",
-			tag,
-			note: parts.length > 0 ? parts.join(" · ") : null,
+			tag: isDefault ? "default" : null,
+			note: isDefault ? "default" : null,
+			selected: record.name === current.head,
 		};
 	};
-
-	// 로컬을 먼저, 원격을 뒤로. 각 무리 안에서는 받은 순서를 그대로 둔다.
-	return [
-		workingRow,
-		...refs.filter((r) => r.kind === "local").map(toRow),
-		...refs.filter((r) => r.kind === "remote").map(toRow),
-	];
+	const rank = (record: RefRecord): number => {
+		if (record.name === defaultBranch) return 0;
+		if (record.name === current.head) return 1;
+		return record.kind === "local" ? 2 : 3;
+	};
+	return [...refs]
+		.map((record, index) => ({ record, index }))
+		.sort((a, b) => rank(a.record) - rank(b.record) || a.index - b.index)
+		.map(({ record }) => toRow(record));
 };
 
-export const filterBaseRows = (
-	rows: readonly BaseRow[],
+export const buildHeadRows = (
+	worktrees: readonly WorktreeRecord[],
+	refs: readonly RefRecord[],
+	defaultBranch: string | null,
+	current: CurrentHead,
+): HeadRow[] => [
+	...worktreeRows(worktrees, defaultBranch, current),
+	...branchRows(refs, defaultBranch, current),
+];
+
+export const filterPickerRows = (
+	rows: readonly HeadRow[],
 	query: string,
-): BaseRow[] => {
+): HeadRow[] => {
 	const needle = query.trim().toLowerCase();
 	if (needle === "") return [...rows];
-	return rows.filter((r) => r.label.toLowerCase().includes(needle));
+	// `note`도 본다 — 워크트리 행의 **브랜치 이름**이 거기 산다. label만 보면
+	// 브랜치명을 타이핑했을 때 그 브랜치를 물고 있는 워크트리가 안 잡히는데,
+	// 그건 이 목록에서 가장 자연스러운 검색어다.
+	return rows.filter(
+		(r) =>
+			r.label.toLowerCase().includes(needle) ||
+			(r.note ?? "").toLowerCase().includes(needle),
+	);
 };
diff --git a/apps/viewer/browser/repoLabel.ts b/apps/viewer/browser/repoLabel.ts
new file mode 100644
index 0000000..ae9ee77
--- /dev/null
+++ b/apps/viewer/browser/repoLabel.ts
@@ -0,0 +1,224 @@
+/**
+ * 툴바의 리포·브랜치 표식 — "지금 **어느 워크트리의 무엇**을 보고 있는가".
+ *
+ * 왜 있나: 뷰어는 repo를 URL 파라미터로만 받아서, 워크트리를 여럿 쓰는
+ * 리포에서 엉뚱한 워크트리를 열어도 화면에 단서가 하나도 없었다. 게다가
+ * 뒤처진 브랜치에서는 어떤 base를 골라도 merge-base가 HEAD라 결과가 전부
+ * 같아 보여서("피커를 바꿔도 화면이 안 변한다") 고장으로 오인하기 쉽다.
+ * 정체성을 상시로 말해 두면 그 오진이 애초에 생기지 않는다.
+ *
+ * 왜 `main.ts`가 아니라 별도 모듈인가: `main.ts`는 커버리지 게이트 밖이라
+ * (bunfig.toml의 `coveragePathIgnorePatterns`) 거기 문자열 조립을 두면 게이트가
+ * 100% 초록인 채로 버그가 산다 — `isLargeFile`/`countChangedLines` 사건과
+ * 정확히 같은 구조다(CLAUDE.md). 이 파일은 게이트 **안**이라 분기마다 유닛이
+ * 붙는다. 그래서 **DOM에 닿는 문자열 전부**를 여기서 만들고 main.ts는 배선만 한다.
+ *
+ * 타입체크는 어느 쪽도 못 본다 — `apps/viewer/tsconfig.json`의 include는
+ * `server/**`·`cli.ts`·`cli/**`·`build.ts`뿐이라 `browser/**` 전체가 루프 밖이고
+ * 이 파일도 예외가 아니다. 방어는 유닛과 e2e뿐이라고 읽어야 한다.
+ */
+import type { WorktreeRecord } from "../server/refs.ts";
+
+/** 탭 제목 끝에 붙는 앱 이름. */
+const APP_NAME = "diffdeck";
+
+/** 조각 구분자. `emptyState.ts`의 `contextParts.join(" · ")`와 같은 어휘다. */
+const SEPARATOR = " · ";
+
+/**
+ * detached HEAD에서 보여줄 OID 길이. git이 오래 써 온 고전적 짧은 길이다.
+ *
+ * `git rev-parse --short`의 기본값과 **같지 않다** — 그쪽은 `core.abbrev`(기본
+ * auto)를 따라 객체 수에 비례해 길어진다(실측: 3.5k 객체 리포는 7자, 37k 객체
+ * 리포는 8자). 빈 상태 카드는 서버가 `--short`로 줄인 값을 그대로 쓰므로
+ * (`summary.ts` → `emptyState.ts`) 큰 리포에서 두 표시가 한 글자 갈릴 수 있다.
+ * 그걸 맞추자고 카드 쪽을 7자로 자르지는 않는다 — auto abbrev는 git이 **모호하지
+ * 않은 길이**를 고른 결과라, 잘라내면 화면이 모호한 OID를 말하게 된다. 둘 다
+ * 같은 커밋의 옳은 접두사이므로 이 차이는 받아들인다.
+ */
+const SHORT_OID_LENGTH = 7;
+
+/** 리포와 워크트리를 가르는 구분자. 경로처럼 읽히라고 슬래시를 쓴다. */
+const SCOPE_SEPARATOR = " / ";
+
+/** bare 저장소 디렉토리의 관례적 접미 — 리포 이름에서는 벗긴다. */
+const BARE_SUFFIX = ".git";
+
+/** 지금 무엇을 보고 있고 무엇과 견주는가. */
+export interface RepoLabelSelection {
+	/** head로 고른 브랜치. null이면 워크트리를 본다. */
+	head: string | null;
+	/** 견줄 기준의 표시명. 워킹트리(HEAD) 대비면 null — 그건 "커밋 안 한
+	 *  변경"이지 무엇과 견준 결과가 아니다. */
+	base: string | null;
+}
+
+/** 화면 각 자리에 그대로 들어가는 문자열들. 조립은 전부 이 모듈이 끝낸다. */
+export interface RepoLabelView {
+	/**
+	 * `#picker-scope`의 텍스트 — 이 워크트리를 품은 리포. 구분자를 품는다
+	 * (`"diffdeck / "`). 메인 워크트리이거나 리포 루트를 모르면 빈 문자열.
+	 */
+	scope: string;
+	/** `#picker-name`의 텍스트. 빈 문자열이면 트리거가 아무 말도 하지 않는다. */
+	name: string;
+	/** 트리거의 브랜치 조각. 구분자를 품는다(`" · main"`). 모르면 빈 문자열. */
+	branch: string;
+	/**
+	 * 견줄 기준(`"vs main"`). **자기 요소를 가지므로 구분자를 품지 않는다** —
+	 * 트리거는 head를 말하고 이 값은 개수 왼쪽의 별도 표식이 말한다. 두 축을
+	 * 한 덩어리로 붙이면 트리거가 고르지도 않는 것을 말하게 된다.
+	 */
+	base: string;
+	/** 트리거 버튼의 `title` — 말줄임된 라벨을 hover로 편다. */
+	title: string;
+	/** `document.title`. 워크트리를 여럿 열어 두면 탭만으로 구별돼야 한다. */
+	documentTitle: string;
+}
+
+const stripTrailingSlashes = (path: string): string => path.replace(/\/+$/, "");
+
+/**
+ * 경로의 마지막 세그먼트. 루트와 빈 문자열에는 이름이 없다(빈 문자열).
+ */
+export const repoDisplayName = (path: string): string => {
+	// 후행 슬래시를 먼저 벗긴다 — `/a/b/`의 이름은 `b`지 빈 문자열이 아니다.
+	const trimmed = stripTrailingSlashes(path);
+	const slash = trimmed.lastIndexOf("/");
+	return slash === -1 ? trimmed : trimmed.slice(slash + 1);
+};
+
+/**
+ * `repo`가 속한 워크트리를 찾는다.
+ *
+ * **정확 일치만 보면 안 된다.** `repo`는 CLI 기동 시점의 `process.cwd()`라
+ * (`cli.ts`) 리포 루트라는 보장이 없다 — 하위 디렉토리에서 켜면 정확 일치가
+ * 실패해 브랜치가 조용히 사라진다. 그래서 경로를 품는 워크트리 중 **가장 긴**
+ * 것을 고른다: 중첩 워크트리(`<repo>/.claude/worktrees/*` 관례)에서 바깥
+ * 리포가 이기면 라벨이 엉뚱한 워크트리를 말하게 되는데, 그게 바로 이 기능이
+ * 없애려는 혼동이다.
+ *
+ * 비교는 **세그먼트 경계**에서만 한다 — 맨 접두 비교는 `/w/a`가 `/w/abc`를
+ * 자기 하위로 삼는다.
+ */
+export const findWorktree = (
+	worktrees: readonly WorktreeRecord[],
+	repo: string,
+): WorktreeRecord | null => {
+	const target = stripTrailingSlashes(repo);
+	let best: WorktreeRecord | null = null;
+	let bestLength = -1;
+	for (const worktree of worktrees) {
+		const path = stripTrailingSlashes(worktree.path);
+		if (path !== target && !target.startsWith(`${path}/`)) continue;
+		if (path.length > bestLength) {
+			best = worktree;
+			bestLength = path.length;
+		}
+	}
+	return best;
+};
+
+/**
+ * 사람이 읽을 브랜치 표시. detached는 `emptyState.ts:42-43`과 **같은 어휘**를
+ * 쓴다 — 같은 사실을 화면 두 곳이 다르게 말하면 안 된다. `/api/refs`의 head는
+ * full OID라(요약 API와 달리 `--short`를 안 거친다) 여기서 잘라 맞춘다.
+ */
+const branchOf = (worktree: WorktreeRecord | null): string | null => {
+	if (worktree === null) return null;
+	if (worktree.branch) return worktree.branch;
+	if (worktree.head) {
+		return `detached @ ${worktree.head.slice(0, SHORT_OID_LENGTH)}`;
+	}
+	return null;
+};
+
+/**
+ * 리포 루트의 표시 이름. bare 리포에서는 루트가 저장소 디렉토리(`myproj.git`)라
+ * 관례적 `.git` 접미를 벗긴다 — 평범한 리포의 디렉토리가 `.git`으로 끝나는
+ * 일은 사실상 없다.
+ */
+const repoRootName = (repoRoot: string | null): string | null => {
+	if (repoRoot === null) return null;
+	const raw = repoDisplayName(stripTrailingSlashes(repoRoot));
+	const name = raw.endsWith(BARE_SUFFIX)
+		? raw.slice(0, -BARE_SUFFIX.length)
+		: raw;
+	// 이름을 못 내는 루트(`/`)에 접두를 붙이면 라벨이 `" / feat"`로 시작한다.
+	return name === "" ? null : name;
+};
+
+/**
+ * 이 워크트리를 품은 리포 이름. 메인 워크트리에 있으면 null — 자기 자신을
+ * 접두로 되풀이하면 `diffdeck / diffdeck`이 된다.
+ */
+const scopeNameOf = (repoRoot: string | null, path: string): string | null =>
+	repoRoot !== null && stripTrailingSlashes(repoRoot) === path
+		? null
+		: repoRootName(repoRoot);
+
+/** 조각들을 ` · `로 이어 붙인다. 빈 것은 자리를 차지하지 않는다. */
+const suffixOf = (parts: readonly (string | null)[]): string =>
+	parts
+		.filter((p): p is string => p !== null && p !== "")
+		.map((p) => `${SEPARATOR}${p}`)
+		.join("");
+
+/**
+ * 툴바 라벨과 탭 제목에 들어갈 문자열 일습.
+ *
+ * 워크트리 목록이 아직 안 왔거나(부트스트랩 첫 프레임) `/api/refs`가 실패해도
+ * **이름은 즉시 말한다** — repo 경로는 URL에 이미 있기 때문이다. 그래서 라벨을
+ * `hidden`으로 토글할 일이 없고, author `display`와 `[hidden]` 짝을 잊는
+ * 함정(CLAUDE.md — `#grab-popover`·`.grab-hint`에서 두 번 밟았다)에 애초에
+ * 들어가지 않는다. "모름"은 hidden이 아니라 **빈 텍스트**다.
+ */
+export const repoLabelView = (
+	repo: string,
+	worktrees: readonly WorktreeRecord[],
+	repoRoot: string | null,
+	selection: RepoLabelSelection = { head: null, base: null },
+): RepoLabelView => {
+	const vsBase = selection.base === null ? null : `vs ${selection.base}`;
+	// **브랜치를 head로 보면 워크트리는 결과에 영향을 주지 않는다** — 어느
+	// 워크트리에서 보든 같은 diff다(실측). 이름을 그대로 두면 "이 워크트리의
+	// 무언가를 보고 있다"는 잘못된 인상을 주므로 빼고, 주인공 자리를 그
+	// 브랜치에 준다. 워크트리의 브랜치를 말하는 것은 더 나쁘다 — 보고 있지도
+	// 않은 곳을 가리키게 된다.
+	if (selection.head !== null) {
+		const scope = repoRootName(repoRoot);
+		const root = repoRoot === null ? repo : stripTrailingSlashes(repoRoot);
+		return {
+			scope: scope === null ? "" : `${scope}${SEPARATOR}`,
+			name: selection.head,
+			// 브랜치 뷰에서는 head 자체가 브랜치라 따로 말할 것이 없다.
+			branch: "",
+			base: vsBase ?? "",
+			title: `${root}${SEPARATOR}${selection.head}${suffixOf([vsBase])}`,
+			documentTitle: `${selection.head} — ${APP_NAME}`,
+		};
+	}
+	const worktree = findWorktree(worktrees, repo);
+	// 워크트리를 찾았으면 그 **최상위 경로**의 이름이 옳다. `repo`가 하위
+	// 디렉토리일 때 그 basename은 `viewer` 같은 엉뚱한 값이다.
+	const path = stripTrailingSlashes(worktree?.path ?? repo);
+	const name = repoDisplayName(path);
+	const branch = branchOf(worktree);
+	const scope = scopeNameOf(repoRoot, path);
+
+	const title = `${path}${suffixOf([branch, vsBase])}`;
+	// 탭 제목에는 접두를 넣지 않는다. 탭은 좁고 오른쪽부터 잘리는데, 리포
+	// 이름은 그 리포의 워크트리마다 **같아서** 탭을 가르지 못한다 — 구별되는
+	// 쪽(워크트리·브랜치)을 앞세워야 탭만 보고 고를 수 있다. 전체 맥락은
+	// 툴바 라벨과 그 title이 진다.
+	const head = branch === null ? name : `${name}${SEPARATOR}${branch}`;
+
+	return {
+		scope: scope === null ? "" : `${scope}${SCOPE_SEPARATOR}`,
+		name,
+		branch: suffixOf([branch]),
+		base: vsBase ?? "",
+		title,
+		documentTitle: name === "" ? APP_NAME : `${head} — ${APP_NAME}`,
+	};
+};
diff --git a/apps/viewer/e2e/empty-state.e2e.ts b/apps/viewer/e2e/empty-state.e2e.ts
index a283bc4..dab6623 100644
--- a/apps/viewer/e2e/empty-state.e2e.ts
+++ b/apps/viewer/e2e/empty-state.e2e.ts
@@ -20,6 +20,36 @@ const treeHasPath = (page: Page, path: string): Promise<boolean> =>
 			path,
 		);
 
+/**
+ * `#empty`가 거쳐 간 문구를 **첫 페인트 전부터** 기록한다. 깜박임은 최종
+ * 상태로는 원리적으로 안 보이므로(끝나고 나면 옳은 카드가 떠 있다) 중간
+ * 프레임을 붙잡아야만 잡힌다.
+ */
+const recordEmptyTexts = async (page: Page): Promise<void> => {
+	await page.addInitScript(() => {
+		const seen: string[] = [];
+		(window as unknown as { __emptyTexts: string[] }).__emptyTexts = seen;
+		const push = (): void => {
+			const el = document.getElementById("empty");
+			const text = el ? (el.textContent ?? "") : "";
+			if (text !== "" && seen[seen.length - 1] !== text) seen.push(text);
+		};
+		// `document`를 관찰한다 — 이 스크립트는 document-start에 도는데 그때
+		// `documentElement`는 아직 없을 수 있다(실측: 기록이 통째로 빈다).
+		new MutationObserver(push).observe(document, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+		});
+		document.addEventListener("DOMContentLoaded", push);
+	});
+};
+
+const emptyTexts = (page: Page): Promise<string[]> =>
+	page.evaluate(
+		() => (window as unknown as { __emptyTexts: string[] }).__emptyTexts,
+	);
+
 test.describe("informative empty state", () => {
 	test("clean feature branch: card explains where the changes are", async ({
 		page,
@@ -49,9 +79,10 @@ test.describe("informative empty state", () => {
 				card.locator("button.empty-action", { hasText: "untracked" }),
 			).toHaveText("1 untracked file(s) hidden — show");
 
-			// 클릭 → 피커가 자동 해석 base로 바뀌고 커밋된 diff가 렌더된다.
+			// 클릭 → base가 자동 해석으로 바뀌고 커밋된 diff가 렌더된다.
+			// 피커 라벨은 이제 head를 말하므로 base의 증거가 아니다 — 관찰
+			// 가능한 신호는 카드가 사라지고 개수가 나타나는 것이다.
 			await switchBtn.click();
-			await expect(page.locator("#ref-picker-label")).toHaveText("vs main");
 			await expect(page.locator("#empty")).toHaveCount(0);
 			await expect(page.locator("#status")).toHaveText("1 file(s)");
 			await expect.poll(() => treeHasPath(page, "src/hello.ts")).toBe(true);
@@ -78,7 +109,10 @@ test.describe("informative empty state", () => {
 	});
 
 	test("all quiet: card says nothing to show in any mode", async ({ page }) => {
-		const { url, repoDir, stop } = await launchViewer([], { clean: true });
+		const { url, repoDir, stop } = await launchViewer([], {
+			clean: true,
+			branches: ["develop"],
+		});
 		try {
 			// 픽스처가 항상 남기는 untracked data.txt를 지워 완전 무변경 상태로.
 			rmSync(join(repoDir, "data.txt"));
@@ -93,23 +127,13 @@ test.describe("informative empty state", () => {
 			await expect(card.locator(".empty-context")).toHaveText("on main");
 			await expect(card.locator("button.empty-action")).toHaveCount(0);
 
-			// 회귀: 양쪽이 다 빈 상태에서 기준을 바꿔도 카드가 새 문구로
-			// 갱신되어야 한다 — 빈 payload의 etag가 기준과 무관하게 같아 304로
-			// 이전 카드에 고착되던 버그의 가드 (선택 변경 시 lastEtag 리셋).
-			await page.locator("#ref-picker-btn").click();
-			await page
-				.locator("#ref-picker .ref-row")
-				.filter({ hasText: /^main/ })
-				.first()
-				.click();
-			await expect(
-				page.locator("#empty.empty-card .empty-headline"),
-			).toHaveText("No changes vs main");
-
 			// 회귀: 304(unchanged) 응답이라도 빈 상태가 유지되는 동안엔 카드를
 			// 재계산해야 한다 — untracked 개수는 지문 밖 사실이라, 새 untracked
 			// 파일이 생겨도 diff 지문은 그대로(untracked=0은 -uno)여서 304가
 			// 온다. focus 리프레시 후 카드에 안내가 나타나야 한다.
+			//
+			// **head를 바꾸기 전에** 확인한다 — 커밋된 rev를 보고 있으면
+			// untracked는 재지 않은 값(null)이라 이 안내가 원리적으로 없다.
 			writeFileSync(join(repoDir, "late.txt"), "new untracked\n");
 			await page.evaluate(() => window.dispatchEvent(new Event("focus")));
 			await expect(
@@ -117,6 +141,134 @@ test.describe("informative empty state", () => {
 					hasText: "untracked",
 				}),
 			).toHaveText("1 untracked file(s) hidden — show");
+
+			// 회귀: 양쪽이 다 빈 상태에서 선택을 바꿔도 카드가 새 사실로
+			// 갱신되어야 한다 — 빈 payload의 etag가 선택과 무관하게 같아 304로
+			// 이전 카드에 고착되던 버그의 가드 (선택 변경 시 lastEtag 리셋).
+			// head를 바꾸면 요약의 branch가 **보고 있는 그 브랜치**를 말하므로
+			// 카드의 컨텍스트 줄이 그 증거다.
+			await page.locator("#ref-picker-btn").click();
+			await page
+				.locator("#ref-picker .ref-row")
+				.filter({ hasText: /^develop/ })
+				.first()
+				.click();
+			await expect(page.locator("#empty.empty-card .empty-context")).toHaveText(
+				"on develop",
+			);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 워크트리 워크플로에서는 작업이 브랜치에 **커밋**돼 있어 기본 뷰(미커밋
+	// 변경)가 구조적으로 비어 있다. 워크트리를 팔 때마다 "볼 게 가장 많은
+	// 순간에 빈 화면"을 만나고 카드의 버튼을 한 번씩 눌러 줘야 했다 — 고른
+	// 적이 없다면 볼 것이 있는 쪽을 바로 연다.
+	test("nothing at all in the working view: opens the base diff instead", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer([], {
+			clean: true,
+			featureBranchCommit: true,
+		});
+		try {
+			// 픽스처의 untracked 스크래치를 지운다 — 그게 남아 있으면 이 뷰에도
+			// (토글 뒤에) 볼 것이 있으므로 자동 전환이 의도적으로 억제된다.
+			rmSync(join(repoDir, "data.txt"));
+			await page.goto(url);
+
+			await expect(page.locator("#status")).toHaveText("1 file(s)");
+			await expect(page.locator("#empty")).toHaveCount(0);
+
+			// **저장하지 않는다** — 추론이지 사용자의 선택이 아니다. 저장해 버리면
+			// 고른 적 없는 프리퍼런스가 생겨 이후 판단이 영영 막힌다.
+			const saved = await page.evaluate(() =>
+				Object.keys(localStorage).filter((k) => k.includes("compare-base")),
+			);
+			expect(saved).toEqual([]);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 자동 전환이 사용자의 선택을 덮으면 안 된다. URL의 `base=`는 명시적
+	// 선택이므로 워킹트리가 텅 비어도 그대로 둔다.
+	test("an explicit base choice is never overridden", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([], {
+			clean: true,
+			featureBranchCommit: true,
+		});
+		try {
+			rmSync(join(repoDir, "data.txt"));
+			await page.goto(`${url}&base=HEAD`);
+
+			// 카드가 그대로 떠 있다는 것이 "덮지 않았다"의 증거다 — 자동 전환이
+			// 걸렸다면 diff가 렌더되어 카드가 사라진다.
+			await expect(page.locator("#empty.empty-card")).toBeVisible();
+		} finally {
+			await stop();
+		}
+	});
+	// 빈 상태의 문구는 /api/summary가 와야 정해진다. 예전엔 "No changes."를
+	// 먼저 그려 놓고 60~80ms 뒤 카드로 덮었다 — 사용자에게는 없다고 한 번
+	// 말한 뒤 말을 바꾸는 것으로 보인다(실측: 673ms "No changes." → 753ms
+	// 카드). 최종 상태로는 원리적으로 안 보이므로 중간 프레임을 기록해 본다.
+	test("never says No changes before the card is ready", async ({ page }) => {
+		const { url, stop } = await launchViewer([], {
+			clean: true,
+			featureBranchCommit: true,
+		});
+		try {
+			await recordEmptyTexts(page);
+			await page.goto(url);
+			await expect(
+				page.locator("#empty.empty-card .empty-headline"),
+			).toHaveText("No tracked changes");
+
+			const texts = await emptyTexts(page);
+			// 로딩 표시에서 카드로 곧장 간다. 그 사이 어떤 문구도 끼면 안 된다.
+			expect(texts).not.toContain("No changes.");
+			expect(texts[0]).toContain("Loading diff…");
+		} finally {
+			await stop();
+		}
+	});
+
+	// 자동 base 전환이 걸리는 경우가 가장 나쁘다 — 볼 것이 있는데도 "없다"고
+	// 한 번 말한 뒤 diff가 뜬다.
+	test("the auto base switch shows no interim No changes", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([], {
+			clean: true,
+			featureBranchCommit: true,
+		});
+		try {
+			rmSync(join(repoDir, "data.txt"));
+			await recordEmptyTexts(page);
+			await page.goto(url);
+			await expect(page.locator("#status")).toHaveText("1 file(s)");
+
+			expect(await emptyTexts(page)).not.toContain("No changes.");
+		} finally {
+			await stop();
+		}
+	});
+
+	// 요약을 못 받아야만 폴백 문구로 내려앉는다 — 새로 생긴 분기라 일부러
+	// 그리로 들어간다(커버리지는 branch를 세지 않고, main.ts는 게이트 밖이다).
+	test("falls back to the bare line when the summary is unreachable", async ({
+		page,
+	}) => {
+		const { url, stop } = await launchViewer([], {
+			clean: true,
+			featureBranchCommit: true,
+		});
+		try {
+			await page.route("**/api/summary*", (route) => route.abort());
+			await page.goto(url);
+			await expect(page.locator("#empty")).toHaveText("No changes.");
+			// 폴백은 로딩 표시를 걷어낸다 — 스피너가 남으면 영원히 로딩이다.
+			await expect(page.locator("#empty")).not.toHaveAttribute("data-loading");
 		} finally {
 			await stop();
 		}
diff --git a/apps/viewer/e2e/ref-picker.e2e.ts b/apps/viewer/e2e/ref-picker.e2e.ts
index 0d63d45..8bcedc3 100644
--- a/apps/viewer/e2e/ref-picker.e2e.ts
+++ b/apps/viewer/e2e/ref-picker.e2e.ts
@@ -1,15 +1,42 @@
-// 견줄 기준 피커: 툴바의 2지선다 <select>를 검색 가능한 목록으로 바꾼 것.
+// 툴바 피커: **무엇을 볼 것인가(head)**를 고른다.
+//
+// 예전에는 "무엇과 견줄까(base)"를 골랐는데, 목록의 브랜치 이름이 "그 브랜치를
+// 보여줘"로 읽히면서 실제로는 반대 축을 건드리는 어긋남이 있었다 — 메인
+// 워크트리에서 남의 브랜치를 골라도 1 file만 나오던 것이 그 결과다.
 //
 // 여기서만 잡히는 계약들이다 — happy-dom에는 레이아웃도 CSS 캐스케이드도
 // 없어서 "[hidden]이 실제로 숨기는가", "패널이 정말 페인트되는가",
 // "닫을 때 포커스가 트리거로 돌아오는가"를 유닛이 원리적으로 볼 수 없다.
+// 그리고 배선(고른 행이 실제로 무엇을 하는가)은 main.ts가 커버리지 게이트
+// 밖이라 여기가 유일한 그물이다.
 import { spawnSync } from "node:child_process";
-import { writeFileSync } from "node:fs";
-import { join } from "node:path";
+import { realpathSync } from "node:fs";
+import { basename, join } from "node:path";
 import { expect, launchViewer, test } from "./fixtures/app.ts";
 
 const OPTS = { featureBranchCommit: true, branches: ["develop"] };
 
+/**
+ * 픽스처에는 원격이 없어 원격 HEAD symref가 비고, 그러면 서버가 default
+ * 브랜치를 해석하지 못한다(`/api/refs`의 defaultBranch가 null). 자기 자신을
+ * origin으로 걸어 그 symref를 세운다 — default 정렬을 보려면 이것이 있어야 한다.
+ */
+const giveItADefaultBranch = (dir: string): void => {
+	// **`git remote add`를 쓰지 마라.** 원격 URL이 생기면 base 해석의 첫 단계인
+	// `gh pr view`가 그것을 GitHub 리포로 풀어 보려 하고, 그때부터 스펙 하나가
+	// 수십 초씩 걸린다(실측: 이 파일 전체가 16초에서 15분으로 늘었다).
+	// 필요한 것은 symref 하나뿐이므로 참조만 직접 세운다.
+	const sha = spawnSync("git", ["-C", dir, "rev-parse", "main"], {
+		encoding: "utf8",
+	}).stdout.trim();
+	run(dir, ["update-ref", "refs/remotes/origin/main", sha]);
+	run(dir, [
+		"symbolic-ref",
+		"refs/remotes/origin/HEAD",
+		"refs/remotes/origin/main",
+	]);
+};
+
 const run = (dir: string, args: string[]): void => {
 	const r = spawnSync("git", ["-C", dir, ...args], { stdio: "pipe" });
 	if (r.status !== 0) {
@@ -17,7 +44,7 @@ const run = (dir: string, args: string[]): void => {
 	}
 };
 
-test.describe("compare base picker", () => {
+test.describe("head picker", () => {
 	test("opens to a searchable list and closes on Escape", async ({ page }) => {
 		const { url, stop } = await launchViewer([], OPTS);
 		try {
@@ -33,12 +60,10 @@ test.describe("compare base picker", () => {
 				"aria-expanded",
 				"true",
 			);
-			const rows = page.locator("#ref-picker .ref-row");
-			await expect(rows.filter({ hasText: "Working tree" })).toHaveCount(1);
-			await expect(rows.filter({ hasText: "develop" })).toHaveCount(1);
 
 			await page.keyboard.press("Escape");
 			await expect(panel).toBeHidden();
+			await expect(page.locator("#ref-picker-btn")).toBeFocused();
 		} finally {
 			await stop();
 		}
@@ -50,10 +75,9 @@ test.describe("compare base picker", () => {
 			await page.goto(url);
 			await page.locator("#ref-picker-btn").click();
 			const rows = page.locator("#ref-picker .ref-row");
-			// 목록은 /api/refs가 도착한 뒤에 채워진다. count()는 재시도하지
-			// 않는 일회성 읽기라, 도착을 기다리는 단언을 먼저 둔다.
 			await expect(rows.filter({ hasText: "develop" })).toHaveCount(1);
 			expect(await rows.count()).toBeGreaterThan(1);
+
 			await page.locator("#ref-picker-search").fill("develop");
 			await expect(rows).toHaveCount(1);
 			await expect(rows.first()).toHaveText(/develop/);
@@ -62,49 +86,134 @@ test.describe("compare base picker", () => {
 		}
 	});
 
-	// 기본값은 base=HEAD(미커밋만)이므로 브랜치에 커밋한 파일은 안 보인다.
-	// main을 기준으로 고르면 merge-base가 갈림점으로 내려가 그 커밋까지 들어온다.
-	test("choosing a branch widens the diff to the committed work", async ({
+	// 워크트리가 하나뿐이면 고를 것이 없다. 제목만 남기고 목록을 비우면
+	// "뭔가 있어야 하는데 없다"로 읽히므로 구역 자체가 사라진다.
+	test("hides the worktree section when there is nothing to choose", async ({
 		page,
 	}) => {
+		const { url, stop } = await launchViewer([], OPTS);
+		try {
+			await page.goto(url);
+			await page.locator("#ref-picker-btn").click();
+			await expect(page.locator("#ref-picker .ref-section")).toHaveText([
+				"BRANCHES",
+			]);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 워크트리가 둘 이상이면 구역이 서고, 각 행이 **물고 있는 브랜치**를 말한다.
+	test("lists worktrees with the branch each one holds", async ({ page }) => {
 		const { url, repoDir, stop } = await launchViewer([], OPTS);
 		try {
+			const nested = join(repoDir, ".claude", "worktrees", "side");
+			run(repoDir, ["worktree", "add", "-q", "-b", "side/work", nested]);
+
 			await page.goto(url);
-			await expect(page.locator("#ref-picker-label")).toHaveText(
-				"Working tree",
-			);
-			// 기본 픽스처의 워킹트리 편집은 정확히 셋이다(src/hello.ts,
-			// README.md, assets/logo.png).
+			await page.locator("#ref-picker-btn").click();
+			await expect(page.locator("#ref-picker .ref-section")).toHaveText([
+				"WORKTREES",
+				"BRANCHES",
+			]);
+
+			const rows = page.locator("#ref-picker .ref-row");
+			// default(main)를 물고 있는 워크트리가 없으므로 지금 보고 있는 것이
+			// 맨 위다. 그 행이 자기 브랜치를 오른쪽에 단다.
+			await expect(rows.nth(0)).toHaveText(new RegExp(basename(repoDir)));
+			await expect(rows.nth(0).locator(".ref-row-tag")).toHaveText("feature");
+			await expect(rows.nth(1)).toHaveText(/side/);
+			await expect(rows.nth(1).locator(".ref-row-tag")).toHaveText("side/work");
+		} finally {
+			await stop();
+		}
+	});
+
+	// 브랜치 구역은 default가 언제나 맨 위 — 사용자가 지정한 규칙이다.
+	test("puts the default branch at the top of the branches", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer([], OPTS);
+		try {
+			giveItADefaultBranch(repoDir);
+			await page.goto(url);
+			await page.locator("#ref-picker-btn").click();
+			const rows = page.locator("#ref-picker .ref-row");
+			await expect(rows.nth(0)).toHaveText(/main/);
+			await expect(rows.nth(0).locator(".ref-row-tag")).toHaveText("default");
+		} finally {
+			await stop();
+		}
+	});
+
+	// **이 피커의 존재 이유.** 브랜치를 고르면 그 브랜치의 커밋된 작업을 본다 —
+	// 워킹트리의 미커밋 변경은 빠진다. 예전 base 피커는 반대 축을 건드려
+	// 남의 브랜치를 골라도 내 워킹트리만 보여줬다.
+	test("choosing a branch views its committed work, not the working tree", async ({
+		page,
+	}) => {
+		const { url, stop } = await launchViewer([], OPTS);
+		try {
+			await page.goto(url);
+			// 워크트리 뷰: 커밋된 것 + 미커밋 셋.
 			await expect(page.locator("#status")).toHaveText("3 file(s)");
 
-			// 브랜치에만 있는 파일을 하나 만든다. 커밋된 뒤 워킹트리에서는
-			// 깨끗하므로 HEAD 기준에는 안 보이고, main 기준(갈림점)에서만
-			// 보인다 — 그래서 "기준을 바꾸면 비교 범위가 넓어진다"를 개수로
-			// 확실히 가른다.
-			//
-			// featureBranchCommit이 커밋하는 src/hello.ts를 그대로 쓰면 안 된다:
-			// 그 파일은 이미 워킹트리에서도 편집돼 있어 기준을 바꿔도 파일
-			// 개수가 그대로다. 예전 판이 그걸 모르고 "개수가 달라진다"를
-			// 단언했다가, 로컬에서는 status가 아직 "Loading…"일 때 이전 값을
-			// 캡처하는 레이스 덕에 통과하고 CI에서만 깨졌다.
-			writeFileSync(
-				join(repoDir, "src", "branch-only.ts"),
-				"export const x = 1;\n",
-			);
-			run(repoDir, ["add", "src/branch-only.ts"]);
-			run(repoDir, ["commit", "-qm", "branch only file"]);
+			await page.locator("#ref-picker-btn").click();
+			await page
+				.locator("#ref-picker .ref-row")
+				.filter({ hasText: "feature" })
+				.first()
+				.click();
+
+			// feature가 main에서 갈라진 뒤 커밋한 것 하나뿐이다.
+			await expect(page.locator("#status")).toHaveText("1 file(s)");
+			await expect(page.locator("#picker-name")).toHaveText("feature");
+			// URL이 진실이라야 새로고침·링크 공유가 그대로 재현된다.
+			expect(new URL(page.url()).searchParams.get("head")).toBe("feature");
+			// **저장하지 않는다** — 저장하면 다음에 이 리포를 열 때 남의 브랜치
+			// 뷰에 갇힌 채 시작한다. base 쪽(empty-state ④)과 짝이 되는 단언이다.
+			expect(
+				await page.evaluate(() =>
+					Object.keys(localStorage).filter((k) => k.includes("head")),
+				),
+			).toEqual([]);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 워크트리는 다른 리포 경로다 — 고르면 그 URL로 이동한다.
+	test("choosing a worktree navigates to it", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([], OPTS);
+		try {
+			const nested = join(repoDir, ".claude", "worktrees", "side");
+			run(repoDir, ["worktree", "add", "-q", "-b", "side/work", nested]);
+
+			await page.goto(url);
+			// **먼저 head를 세운다.** 워킹트리 뷰에서 시작하면 URL에 `head`가
+			// 애초에 없어서, 구현이 그것을 그대로 실어 날라도 아래 단언이
+			// 통과한다 — 문서에 명시된 실패 모드를 못 잡는 vacuous 스펙이 된다.
+			await page.locator("#ref-picker-btn").click();
+			// `data-value`로 고른다 — 워크트리 행도 자기가 물고 있는 브랜치를
+			// 태그로 달고 있어서 hasText로는 그쪽이 먼저 잡힌다(워크트리 구역이
+			// 위에 있다). 값은 워크트리면 경로, 브랜치면 ref 이름이다.
+			await page.locator('#ref-picker .ref-row[data-value="feature"]').click();
+			expect(new URL(page.url()).searchParams.get("head")).toBe("feature");
 
 			await page.locator("#ref-picker-btn").click();
 			await page
 				.locator("#ref-picker .ref-row")
-				.filter({ hasText: /^main/ })
+				.filter({ hasText: "side" })
 				.first()
 				.click();
 
-			await expect(page.locator("#ref-picker-label")).toHaveText("vs main");
-			await expect(page.locator("#status")).toHaveText("4 file(s)");
-			// 닫힌 뒤 포커스가 트리거로 돌아와야 키보드 사용자가 길을 잃지 않는다.
-			await expect(page.locator("#ref-picker-btn")).toBeFocused();
+			await expect(page.locator("#picker-name")).toHaveText("side");
+			expect(new URL(page.url()).searchParams.get("repo")).toBe(
+				realpathSync(nested),
+			);
+			// head는 워크트리에 매인 값이 아니다 — 들고 가면 새 워크트리에서
+			// 남의 브랜치를 보게 된다.
+			expect(new URL(page.url()).searchParams.get("head")).toBeNull();
 		} finally {
 			await stop();
 		}
@@ -116,6 +225,7 @@ test.describe("compare base picker", () => {
 			await page.goto(url);
 			await page.locator("#overflow-btn").click();
 			await expect(page.locator("#overflow-menu")).toBeVisible();
+
 			await page.locator("#ref-picker-btn").click();
 			await expect(page.locator("#ref-picker")).toBeVisible();
 			await expect(page.locator("#overflow-menu")).toBeHidden();
@@ -124,16 +234,19 @@ test.describe("compare base picker", () => {
 		}
 	});
 
-	// 네이티브 <select>를 없앤 대가로 키보드 조작을 직접 져야 한다. 순서를
-	// 하드코딩하지 않고 보이는 목록에서 위치를 찾아 그만큼 내려간다.
+	// 네이티브 <select>가 공짜로 주던 키보드 조작 — 클릭 전용으로 두면
+	// 이 컨트롤만 마우스를 요구하게 된다.
 	test("moves with the arrow keys and applies with Enter", async ({ page }) => {
-		const { url, stop } = await launchViewer([], OPTS);
+		const { url, repoDir, stop } = await launchViewer([], OPTS);
 		try {
+			// default가 맨 위로 올라가야 develop이 0번이 아니게 된다.
+			giveItADefaultBranch(repoDir);
 			await page.goto(url);
 			await page.locator("#ref-picker-btn").click();
 			const rows = page.locator("#ref-picker .ref-row");
 			await expect(rows.filter({ hasText: "develop" })).toHaveCount(1);
 
+			// 하드코딩하지 않고 보이는 목록에서 위치를 찾아 그만큼 내려간다.
 			const labels = await rows.allTextContents();
 			const target = labels.findIndex((l) => l.includes("develop"));
 			expect(target).toBeGreaterThan(0);
@@ -143,82 +256,37 @@ test.describe("compare base picker", () => {
 			await expect(rows.nth(target)).toHaveAttribute("data-active", "true");
 			await page.keyboard.press("Enter");
 
-			await expect(page.locator("#ref-picker-label")).toHaveText("vs develop");
+			await expect(page.locator("#picker-name")).toHaveText("develop");
 		} finally {
 			await stop();
 		}
 	});
 
-	// 고른 브랜치가 나중에 사라지면(PR 머지 후 원격 브랜치 삭제 + prune) 저장된
-	// 기준이 400을 부르고, 400은 재시도 없는 terminal이라 손대지 않으면 이후
-	// 모든 실행이 실패 카드로 시작한다.
-	test("recovers when the remembered branch no longer exists", async ({
+	// 머지 후 삭제된 브랜치를 가리키는 링크. 예전엔 "Failed to load diff."만
+	// 남고 새로고침해도 같아서 스스로 못 빠져나왔다 — head는 URL에 살아서
+	// base처럼 저장된 값을 지우는 자가복구를 쓸 수 없기 때문이다.
+	test("a head that no longer exists says so and offers a way out", async ({
 		page,
 	}) => {
-		const { url, repoDir, stop } = await launchViewer([], OPTS);
+		const { url, stop } = await launchViewer([], OPTS);
 		try {
-			await page.goto(url);
-			await page.locator("#ref-picker-btn").click();
-			await page
-				.locator("#ref-picker .ref-row")
-				.filter({ hasText: "develop" })
-				.first()
-				.click();
-			await expect(page.locator("#ref-picker-label")).toHaveText("vs develop");
+			await page.goto(`${url}&head=gone-branch`);
 
-			spawnSync("git", ["-C", repoDir, "branch", "-D", "develop"], {
-				stdio: "pipe",
-			});
-			await page.reload();
-
-			await expect(page.locator("#ref-picker-label")).toHaveText(
-				"Working tree",
+			const card = page.locator("#empty.empty-card");
+			await expect(card.locator(".empty-headline")).toHaveText(
+				"That branch is gone",
 			);
-			await expect(page.locator("diffs-container").first()).toBeVisible();
-			await expect(page.locator("#diff")).not.toContainText(
-				"Failed to load diff",
+			await expect(card.locator(".empty-context")).toHaveText(
+				"No ref named gone-branch in this repo",
 			);
-		} finally {
-			await stop();
-		}
-	});
 
-	// 두 종류를 화면에서 가르는 것이 이 목록의 요점이다 — Working tree는
-	// 미커밋만, 브랜치는 갈라진 뒤 전부라 같은 줄에 같은 모양으로 두면
-	// 구분이 안 된다.
-	test("separates the working tree from the branches, and says how full it is", async ({
-		page,
-	}) => {
-		const { url, stop } = await launchViewer([], OPTS);
-		try {
-			await page.goto(url);
-			await expect(page.locator("#status")).toHaveText("3 file(s)");
-			await page.locator("#ref-picker-btn").click();
-
-			const sections = page.locator("#ref-picker .ref-section");
-			await expect(sections).toHaveText([
-				"UNCOMMITTED",
-				"COMPARE WITH A BRANCH",
-			]);
+			// **자동으로 되돌리지 않는다** — 링크가 요청한 것을 말없이 바꾸면
+			// 사용자가 속는다. URL은 그대로여야 한다.
+			expect(new URL(page.url()).searchParams.get("head")).toBe("gone-branch");
 
-			// 고르기 전에 얼마나 들어 있는지 보여야 "골랐더니 비어 있더라"가
-			// 안 생긴다.
-			const working = page
-				.locator("#ref-picker .ref-row")
-				.filter({ hasText: "Working tree" });
-			await expect(working.locator(".ref-row-tag")).toHaveText("3 file(s)");
-
-			// 개수가 **어느 행의 것인지**도 지킨다. 서버가 잰 참조로 맞추지
-			// 않고 표시명으로 맞추면(base는 origin/ 접두가 벗겨진다) 남의
-			// 숫자가 로컬 동명 브랜치에 붙는다 — 화면의 숫자와 눌렀을 때
-			// 나오는 개수가 달라진다.
-			const mainRow = page
-				.locator("#ref-picker .ref-row")
-				.filter({ hasText: /^main/ })
-				.first();
-			// 이 픽스처엔 origin/HEAD가 없어 default 태그는 안 붙는다.
-			// 귀속이 깨지면 이 행에는 아무 텍스트도 없으므로 여전히 가른다.
-			await expect(mainRow.locator(".ref-row-tag")).toHaveText(/\d+ file\(s\)/);
+			await card.locator("button.empty-action").click();
+			await expect(page.locator("#status")).toHaveText(/file\(s\)/);
+			expect(new URL(page.url()).searchParams.get("head")).toBeNull();
 		} finally {
 			await stop();
 		}
diff --git a/apps/viewer/e2e/toolbar-order.e2e.ts b/apps/viewer/e2e/toolbar-order.e2e.ts
new file mode 100644
index 0000000..f12969d
--- /dev/null
+++ b/apps/viewer/e2e/toolbar-order.e2e.ts
@@ -0,0 +1,143 @@
+// 툴바의 두 축과 오른쪽 그룹의 순서.
+//
+// 왼쪽은 "지금 무엇을 보고 있는가"를 한 문장으로 말하고(트리거 · 견줄 기준 ·
+// 개수 · 변경량), 오른쪽은 화면을 다룬다. 예전엔 뷰 모드와 새로고침이 왼쪽
+// 한복판에 앉아 그 문장을 두 동강 냈다.
+//
+// **여기서만 잡히는 계약이 하나 있다**: find 바가 펼쳐질 때 다른 컨트롤이
+// 움직이지 않는 것. 그건 레이아웃과 CSS 전이가 있어야 보이므로 happy-dom이
+// 원리적으로 못 본다. 마크업 순서는 유닛으로도 볼 수 있지만, 그 순서의
+// **이유**가 이 이동량이라 같은 파일에서 나란히 지킨다.
+import { expect, launchViewer, test } from "./fixtures/app.ts";
+
+/** `.tb-right` 안에서 실제로 자리를 차지하는 컨트롤들 (find 바는 숨김 상태). */
+const RIGHT_ORDER = [
+	"find-open",
+	"refresh",
+	"diff-style-group",
+	"tree-toggle-btn",
+	"overflow-btn",
+];
+
+test.describe("toolbar groups", () => {
+	test("the left group is a sentence and the right group is the controls", async ({
+		page,
+	}) => {
+		const { url, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#picker-name")).not.toBeEmpty();
+
+			const groups = await page.evaluate(() => {
+				const idsOf = (sel: string) =>
+					[...(document.querySelector(sel)?.children ?? [])]
+						.map((el) => el.id || el.className)
+						.filter((s) => s !== "");
+				return { left: idsOf(".tb-left"), right: idsOf(".tb-right") };
+			});
+
+			// 왼쪽은 정보 넷뿐이다 — 조작은 트리거 하나이고 그건 곧 표식이다.
+			expect(groups.left).toEqual([
+				"tb-picker",
+				"base-label",
+				"status",
+				"change-totals",
+			]);
+			// 오른쪽 순서: 순간 동작 → 상태 토글 → 나머지. `find-bar`가 돋보기
+			// **바로 뒤**인 것도 계약이다 — 바는 그 자리에서 펼쳐지므로, 떼어
+			// 놓으면 열 때 사이에 낀 컨트롤이 340px 밀린다.
+			expect(groups.right).toEqual([
+				"find-open",
+				"find-bar",
+				"refresh",
+				"diff-style-group",
+				"tree-toggle-btn",
+				"tb-overflow",
+			]);
+		} finally {
+			await stop();
+		}
+	});
+
+	// **찾기가 맨 앞인 이유.** find 바는 돋보기 자리에서 340px로 펼쳐지는데,
+	// 오른쪽 그룹은 오른쪽 끝에 고정돼 있어 바가 자라면 그 **왼쪽** 이웃만
+	// 밀린다. 찾기가 첫 자리면 밀릴 이웃이 없다 — 실측: 세그먼트를 찾기 앞에
+	// 두면 그 하나가 285px 왼쪽으로 점프한다.
+	test("opening the find bar moves no other control", async ({ page }) => {
+		const { url, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#picker-name")).not.toBeEmpty();
+
+			const lefts = () =>
+				page.evaluate(
+					(ids) =>
+						Object.fromEntries(
+							ids.map((id) => [
+								id,
+								Math.round(
+									document.getElementById(id)?.getBoundingClientRect().left ??
+										Number.NaN,
+								),
+							]),
+						),
+					RIGHT_ORDER,
+				);
+
+			const before = await lefts();
+			// 돋보기 자신은 바가 열리면 사라지므로 비교 대상에서 뺀다.
+			delete before["find-open"];
+
+			await page.locator("#find-open").click();
+			await expect(page.locator("#find-bar")).toBeVisible();
+			// 340px 확장 전이(0.28s)가 끝날 때까지 기다린다 — 중간 프레임을 재면
+			// 이 단언이 전이 속도에 묶인다.
+			await page.waitForTimeout(500);
+
+			const after = await lefts();
+			delete after["find-open"];
+			expect(after).toEqual(before);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 오른쪽 그룹이 무거워졌으므로(세그먼트 118px가 늘었다) 좁은 창에서 눌리지
+	// 않는지 확인한다. 줄어드는 몫은 여전히 트리거 혼자 진다.
+	test("the right group keeps its size when the window is narrow", async ({
+		page,
+	}) => {
+		const { url, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#picker-name")).not.toBeEmpty();
+			const wide = await page
+				.locator(".tb-right")
+				.evaluate((el) => Math.round(el.getBoundingClientRect().width));
+
+			await page.setViewportSize({ width: 560, height: 720 });
+			await page.waitForTimeout(200);
+			const narrow = await page.evaluate(() => {
+				const right = document.querySelector(".tb-right");
+				const toolbar = document.getElementById("toolbar");
+				const label = document.getElementById("ref-picker-label");
+				if (!right || !toolbar || !label)
+					throw new Error("toolbar nodes missing");
+				return {
+					width: Math.round(right.getBoundingClientRect().width),
+					rightEdge: Math.round(right.getBoundingClientRect().right),
+					height: Math.round(toolbar.getBoundingClientRect().height),
+					// 줄어드는 몫은 트리거가 전담한다는 기존 계약.
+					clipped: label.scrollWidth > label.clientWidth,
+				};
+			});
+
+			expect(narrow.width).toBe(wide);
+			expect(narrow.rightEdge).toBeLessThanOrEqual(560);
+			expect(narrow.height).toBeLessThan(48);
+			expect(narrow.clipped).toBe(true);
+		} finally {
+			await stop();
+		}
+	});
+});
diff --git a/apps/viewer/e2e/toolbar-repo.e2e.ts b/apps/viewer/e2e/toolbar-repo.e2e.ts
new file mode 100644
index 0000000..f2718eb
--- /dev/null
+++ b/apps/viewer/e2e/toolbar-repo.e2e.ts
@@ -0,0 +1,318 @@
+// 툴바의 리포·브랜치 표식 — "지금 어느 워크트리의 무엇을 보고 있는가".
+//
+// 이 스펙이 지키는 것은 **배선**이다. 문자열 조립은 `browser/repoLabel.ts`가
+// 하고 유닛(`repo-label.test.ts`)이 덮지만, `browser/main.ts`는 커버리지 게이트
+// 밖이고 루트 typecheck의 include에도 없어서(bunfig.toml / tsconfig) 배선이
+// 통째로 빠져도 유닛·커버리지·타입체크가 전부 초록으로 남는다 — `isLargeFile`
+// 사건과 같은 구조다(CLAUDE.md). 여기가 그 구멍을 막는 유일한 지점이다.
+//
+// 아울러 happy-dom이 원리적으로 못 보는 계약도 함께 잡는다: 라벨이 실제로
+// 페인트되는가, 조각 사이에 공백 텍스트 노드가 끼지 않았는가(포매터가
+// 되돌릴 수 있다), 긴 브랜치명이 툴바 오른쪽을 화면 밖으로 밀지 않는가.
+import { spawnSync } from "node:child_process";
+import { realpathSync } from "node:fs";
+import { basename, join } from "node:path";
+import { expect, launchViewer, test } from "./fixtures/app.ts";
+
+const run = (dir: string, args: string[]): void => {
+	const r = spawnSync("git", ["-C", dir, ...args], { stdio: "pipe" });
+	if (r.status !== 0) {
+		throw new Error(`git ${args.join(" ")} failed: ${r.stderr?.toString()}`);
+	}
+};
+
+const capture = (dir: string, args: string[]): string => {
+	const r = spawnSync("git", ["-C", dir, ...args], { encoding: "utf8" });
+	if (r.status !== 0) {
+		throw new Error(`git ${args.join(" ")} failed: ${r.stderr}`);
+	}
+	return r.stdout.trim();
+};
+
+test.describe("toolbar repo label", () => {
+	test("says the worktree name and its branch", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			const name = basename(repoDir);
+
+			await expect(page.locator("#picker-name")).toHaveText(name);
+			await expect(page.locator("#picker-branch")).toHaveText("· main");
+			// 메인 워크트리라 리포 접두가 없다 — 붙으면 `dd-e2e-repo-x / dd-e2e-repo-x`.
+			await expect(page.locator("#picker-scope")).toBeEmpty();
+
+			// 개수 바로 왼쪽 자리는 이제 **견줄 기준**의 몫이다 — 트리거가
+			// "무엇을 보는가"를 말하므로 그 자리에 같은 말을 두면 중복이다.
+			const beforeStatus = await page.evaluate(
+				() =>
+					document.getElementById("base-label")?.nextElementSibling?.id ?? null,
+			);
+			expect(beforeStatus).toBe("status");
+
+			// 조각 사이에 공백 텍스트 노드가 끼면 `name  · main`이 된다.
+			// #picker-branch가 구분자를 품고 오므로 마크업은 붙여 써야 하는데,
+			// 그건 포매터가 되돌릴 수 있는 종류의 계약이라 여기서 못박는다.
+			// **toHaveText로는 못 잡는다** — Playwright가 공백을 정규화해서
+			// 이중 공백도 통과시킨다. textContent를 그대로 봐야 한다.
+			expect(
+				await page
+					.locator("#ref-picker-label")
+					.evaluate((el) => el.textContent),
+			).toBe(`${name} · main`);
+
+			// 말줄임을 hover로 편다 — 트리거가 세 조각을 담아 길어질 수 있다.
+			await expect(page.locator("#ref-picker-btn")).toHaveAttribute(
+				"title",
+				`${realpathSync(repoDir)} · main`,
+			);
+
+			// 탭 제목 — 워크트리를 여럿 열어 두면 탭만으로 구별돼야 한다.
+			await expect(page).toHaveTitle(`${name} · main — diffdeck`);
+		} finally {
+			await stop();
+		}
+	});
+
+	test("says the checked-out branch, not the default one", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([], {
+			clean: true,
+			featureBranchCommit: true,
+		});
+		try {
+			await page.goto(url);
+			await expect(page.locator("#picker-name")).toHaveText(basename(repoDir));
+			await expect(page.locator("#picker-branch")).toHaveText("· feature");
+		} finally {
+			await stop();
+		}
+	});
+
+	// 브랜치가 없는 상태에서 `name · ` 처럼 끝나면 안 된다. detached 표기는
+	// emptyState.ts와 **같은 어휘**를 쓴다 — 같은 사실을 화면 두 곳이 다르게
+	// 말하면 안 되기 때문. /api/refs의 head는 full OID라 앞 7자로 잘린다.
+	test("falls back to a short OID on detached HEAD", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([], { clean: true });
+		try {
+			const sha = capture(repoDir, ["rev-parse", "HEAD"]);
+			run(repoDir, ["checkout", "-q", sha]);
+
+			await page.goto(url);
+			await expect(page.locator("#picker-branch")).toHaveText(
+				`· detached @ ${sha.slice(0, 7)}`,
+			);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 부팅 시 한 번만 읽는 구현을 떨어뜨린다. 브랜치를 갈아타고 창으로
+	// 돌아오는 것(focus → load)이 뷰어를 켜 둔 채 일할 때의 실제 흐름이다.
+	test("follows a branch switch made while the viewer is open", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#picker-branch")).toHaveText("· main");
+
+			run(repoDir, ["checkout", "-qb", "other"]);
+
+			// focus를 한 번이 아니라 **수렴할 때까지** 보낸다. /api/refs는 5초
+			// TTL 캐시라(server.ts의 REFS_TTL_MS) 전환 직후의 첫 갱신은 캐시된
+			// 값을 읽을 수 있다 — 라벨은 피커와 같은 데이터를 같은 신선도로
+			// 쓰므로 이건 결함이 아니라 설계된 수렴 지연이다. 고정 sleep 대신
+			// 폴링으로 적는 이유는 이 스펙이 지키려는 것이 "몇 초 안에"가 아니라
+			// "부팅 때 한 번만 읽지 않는다"이기 때문이다.
+			await expect
+				.poll(
+					async () => {
+						await page.evaluate(() => window.dispatchEvent(new Event("focus")));
+						return page.locator("#picker-branch").textContent();
+					},
+					{ timeout: 15_000, intervals: [500] },
+				)
+				.toBe(" · other");
+
+			await expect(page).toHaveTitle(`${basename(repoDir)} · other — diffdeck`);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 사용자가 실제로 겪은 형태: 한 리포의 워크트리를 여럿 열어 두고 일한다.
+	// 워크트리 이름만 보이면 어느 리포인지 알 수 없고, 리포 이름만 보이면 어느
+	// 워크트리인지 알 수 없다 — 라벨이 둘 다 말해야 탭을 잘못 고르지 않는다.
+	test("names the repo and the worktree when inside a linked worktree", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer([]);
+		try {
+			// 사용자 리포와 같은 중첩 배치(`<repo>/.claude/worktrees/*`).
+			const nested = join(repoDir, ".claude", "worktrees", "feat+ABC-1");
+			run(repoDir, ["worktree", "add", "-q", "-b", "feat/ABC-1", nested]);
+
+			// repo는 URL 파라미터라 워크트리를 가리키게 바꾸면 그대로 열린다.
+			// git이 보고하는 경로와 맞추려고 realpath로 정규화한다(macOS의
+			// /var → /private/var 심링크).
+			const target = new URL(url);
+			target.searchParams.set("repo", realpathSync(nested));
+			await page.goto(target.toString());
+
+			await expect(page.locator("#picker-scope")).toHaveText(
+				`${basename(repoDir)} /`,
+			);
+			await expect(page.locator("#picker-name")).toHaveText("feat+ABC-1");
+			await expect(page.locator("#picker-branch")).toHaveText("· feat/ABC-1");
+
+			// 탭 제목에는 리포 접두가 없다 — 탭은 오른쪽부터 잘리는데 리포
+			// 이름은 워크트리마다 같아서 탭을 가르지 못한다.
+			await expect(page).toHaveTitle("feat+ABC-1 · feat/ABC-1 — diffdeck");
+		} finally {
+			await stop();
+		}
+	});
+
+	// watch는 창을 **안 보고 있을 때** 쓰는 기능이라 focus가 발화하지 않는다.
+	// 갱신이 load()에만 걸려 있으면 diff는 2초마다 새 브랜치 것으로 갈리는데
+	// 툴바·탭 제목만 옛 브랜치에 무기한 굳고, 같은 화면의 빈 상태 카드는
+	// /api/summary로 살아 있는 브랜치를 말해 한 화면이 두 브랜치를 동시에
+	// 주장하게 된다. 그래서 이 스펙은 focus를 **한 번도 보내지 않는다** —
+	// 그게 위 ④와 갈라지는 지점이고, poll()의 갱신을 지우면 여기만 빨개진다.
+	test("keeps the label live under --watch without any focus event", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer(["--watch"]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#picker-branch")).toHaveText("· main");
+
+			run(repoDir, ["checkout", "-qb", "watched"]);
+
+			// 폴 주기 + /api/refs의 5초 TTL만큼 수렴을 기다린다.
+			await expect(page.locator("#picker-branch")).toHaveText("· watched", {
+				timeout: 20_000,
+			});
+			await expect(page).toHaveTitle(
+				`${basename(repoDir)} · watched — diffdeck`,
+			);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 브랜치를 head로 보면 **워크트리는 결과에 영향을 주지 않는다** — 어느
+	// 워크트리에서 보든 같은 diff다. 그래서 라벨에서 워크트리 이름을 빼고
+	// 보고 있는 브랜치를 주인공으로 세운다. 예전에는 워크트리의 브랜치를
+	// 말해서, 화면에는 A의 diff가 떠 있는데 라벨은 B라고 하는 상태가 됐다.
+	test("a branch head drops the worktree name and says what it is viewing", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer([], {
+			branches: ["develop"],
+			featureBranchCommit: true,
+		});
+		try {
+			await page.goto(url);
+			// 워크트리 뷰에서는 그 워크트리의 브랜치를 말한다.
+			await expect(page.locator("#picker-branch")).toHaveText("· feature");
+
+			await page.locator("#ref-picker-btn").click();
+			await page
+				.locator("#ref-picker .ref-row")
+				.filter({ hasText: /^develop/ })
+				.first()
+				.click();
+
+			await expect(page.locator("#picker-name")).toHaveText("develop");
+			// 브랜치 뷰에서는 head 자체가 브랜치라 트리거가 따로 말할 것이 없다.
+			await expect(page.locator("#picker-branch")).toBeEmpty();
+			await expect(page.locator("#picker-scope")).toHaveText(
+				`${basename(repoDir)} ·`,
+			);
+			// 견줄 기준이 자동 해석으로 올라간다 — 커밋된 rev에는 미커밋
+			// 변경이 없어 워킹트리 기준은 뜻이 없다. 다른 축이므로 자기 자리다.
+			await expect(page.locator("#base-label")).toHaveText("vs main");
+			// 워크트리의 브랜치를 말하면 보고 있지도 않은 곳을 가리킨다.
+			expect(
+				await page
+					.locator("#ref-picker-label")
+					.evaluate((el) => el.textContent),
+			).not.toContain("feature");
+			await expect(page).toHaveTitle("develop — diffdeck");
+		} finally {
+			await stop();
+		}
+	});
+
+	// 유닛이 원리적으로 못 보는 계약: happy-dom에는 레이아웃이 없다.
+	// 툴바에는 flex-wrap도 @media도 없어서, max-width + ellipsis가 빠지면
+	// 긴 이름 하나로 .tb-right(찾기·트리토글·⋯)가 화면 밖으로 나간다.
+	test("a very long branch name never pushes the toolbar off screen", async ({
+		page,
+	}) => {
+		const { url, repoDir, stop } = await launchViewer([]);
+		try {
+			const long = `feature/${"very-long-branch-segment-".repeat(6)}end`;
+			run(repoDir, ["checkout", "-qb", long]);
+
+			await page.goto(url);
+			await expect(page.locator("#picker-branch")).toHaveText(`· ${long}`);
+
+			// 담기지 않으면 잘린다. 픽셀 상한을 단언하지 않는 이유는 폭을 붙드는
+			// 기제가 max-width가 아니라 flex shrink이기 때문이다 — 상한을 두면
+			// 공간이 남는 넓은 창에서까지 자르게 된다(실측 근거는 CSS 주석에).
+			// 이 단언이 `.tb-picker { display: flex }`의 회귀망이다: 블록이면
+			// 안쪽 inline-flex 버튼이 flex item이 아니라 줄어드는 몫을 못 받아
+			// 자연폭 그대로 넘치고, 라벨은 한 번도 잘리지 않는다.
+			const label = await page.locator("#ref-picker-label").evaluate((el) => ({
+				clipped: el.scrollWidth > el.clientWidth,
+				// text-overflow를 지우면 잘린 자리에 말줄임표가 사라진다.
+				// scrollWidth로는 그 삭제를 못 보므로 계산된 값을 직접 본다.
+				textOverflow: getComputedStyle(el).textOverflow,
+			}));
+			expect(label.clipped).toBe(true);
+			expect(label.textOverflow).toBe("ellipsis");
+
+			// 오른쪽 그룹이 뷰포트 안에 그대로 있다.
+			const viewport = page.viewportSize();
+			if (!viewport) throw new Error("viewport size unavailable");
+			const right = await page
+				.locator(".tb-right")
+				.evaluate((el) => el.getBoundingClientRect().right);
+			expect(right).toBeLessThanOrEqual(viewport.width);
+
+			// 툴바가 한 줄로 남는다 (줄바꿈되면 높이가 배로 뛴다).
+			const toolbarHeight = await page
+				.locator("#toolbar")
+				.evaluate((el) => el.getBoundingClientRect().height);
+			expect(toolbarHeight).toBeLessThan(60);
+
+			// 좁은 창 — 트리거가 줄어드는 몫을 **전담**해야 한다. 실측 근거:
+			// `.tb-left { min-width: 0 }`이 없으면 여기서 .tb-right가 화면 밖으로
+			// 나가고(표식이 없던 시절엔 460px에서도 멀쩡했다), `.tb-left > *`의
+			// flex:none이 없으면 #status가 두 줄로 접혀 툴바가 43 → 49px로 뛴다.
+			// 트리거는 `.tb-picker`의 flex:0 1 auto로 그 예외를 되돌려 받는다.
+			await page.setViewportSize({ width: 560, height: 720 });
+			await page.waitForTimeout(200);
+			const narrow = await page.evaluate(() => {
+				const trigger = document.getElementById("ref-picker-label");
+				const rightGroup = document.querySelector(".tb-right");
+				const toolbar = document.getElementById("toolbar");
+				if (!trigger || !rightGroup || !toolbar) {
+					throw new Error("toolbar nodes missing");
+				}
+				return {
+					rightEdge: rightGroup.getBoundingClientRect().right,
+					height: toolbar.getBoundingClientRect().height,
+					// overflow:hidden / text-overflow:ellipsis를 지우면 사라진다.
+					clipped: trigger.scrollWidth > trigger.clientWidth,
+				};
+			});
+			expect(narrow.rightEdge).toBeLessThanOrEqual(560);
+			expect(narrow.height).toBeLessThan(48);
+			expect(narrow.clipped).toBe(true);
+		} finally {
+			await stop();
+		}
+	});
+});
diff --git a/apps/viewer/e2e/toolbar-totals.e2e.ts b/apps/viewer/e2e/toolbar-totals.e2e.ts
new file mode 100644
index 0000000..822f564
--- /dev/null
+++ b/apps/viewer/e2e/toolbar-totals.e2e.ts
@@ -0,0 +1,112 @@
+// 툴바의 전체 변경량 — 개수(`n file(s)`) 오른쪽에서 "통틀어 몇 줄인가"를 말한다.
+//
+// 합산은 `browser/changeTotals.ts`(유닛 100%)가 하지만, `main.ts`는 커버리지
+// 게이트 밖이라 배선이 통째로 빠져도 유닛은 전부 초록이다. 여기가 그 구멍을
+// 막는다. 아울러 **숫자가 git과 같은가**는 실제 git 없이는 확인할 수 없으므로
+// 기대값을 스펙 안에서 git으로 직접 계산해 대조한다.
+import { spawnSync } from "node:child_process";
+import { expect, launchViewer, test } from "./fixtures/app.ts";
+
+const capture = (dir: string, args: string[]): string => {
+	const r = spawnSync("git", ["-C", dir, ...args], { encoding: "utf8" });
+	if (r.status !== 0) {
+		throw new Error(`git ${args.join(" ")} failed: ${r.stderr}`);
+	}
+	return r.stdout;
+};
+
+/** `git diff --numstat`의 합. 바이너리는 줄 수가 `-`로 나오므로 뺀다. */
+const gitTotals = (dir: string, rev: string): { add: number; del: number } => {
+	let add = 0;
+	let del = 0;
+	for (const line of capture(dir, ["diff", "--numstat", rev]).split("\n")) {
+		const [a, d] = line.split("\t");
+		if (a === undefined || a === "" || a === "-") continue;
+		add += Number(a);
+		del += Number(d);
+	}
+	return { add, del };
+};
+
+test.describe("toolbar change totals", () => {
+	test("sums the whole diff and agrees with git", async ({ page }) => {
+		const { url, repoDir, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#status")).toHaveText("3 file(s)");
+
+			// 기본 뷰는 워킹트리(HEAD 대비)다.
+			const { add, del } = gitTotals(repoDir, "HEAD");
+			expect(add).toBeGreaterThan(0);
+
+			await expect(page.locator("#change-add")).toHaveText(`+${add}`);
+			await expect(page.locator("#change-del")).toHaveText(`-${del}`);
+
+			// 사용자가 지정한 자리: 개수 **오른쪽**.
+			const afterStatus = await page.evaluate(
+				() => document.getElementById("status")?.nextElementSibling?.id ?? null,
+			);
+			expect(afterStatus).toBe("change-totals");
+
+			// 조각 사이에 공백 텍스트 노드가 끼면 `+7  -1`이 된다.
+			// toHaveText는 공백을 정규화하므로 textContent를 그대로 본다.
+			expect(
+				await page.locator("#change-totals").evaluate((el) => el.textContent),
+			).toBe(`+${add} -${del}`);
+		} finally {
+			await stop();
+		}
+	});
+
+	// 색이 add/del을 가른다 — 지우면 두 숫자가 같은 색이 되어 어느 쪽이
+	// 추가인지 부호에만 의존하게 된다. happy-dom에는 캐스케이드가 없어
+	// 유닛이 원리적으로 못 보는 계약이다.
+	test("colors additions and deletions apart", async ({ page }) => {
+		const { url, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#change-add")).not.toBeEmpty();
+
+			const colors = await page.evaluate(() => {
+				const add = document.getElementById("change-add");
+				const del = document.getElementById("change-del");
+				if (!add || !del) throw new Error("totals nodes missing");
+				return {
+					add: getComputedStyle(add).color,
+					del: getComputedStyle(del).color,
+				};
+			});
+			// --vd-success(#3fb950) / #f85149 — 앱에 이미 있는 add·del 쌍.
+			expect(colors.add).toBe("rgb(63, 185, 80)");
+			expect(colors.del).toBe("rgb(248, 81, 73)");
+		} finally {
+			await stop();
+		}
+	});
+
+	// 변경이 없으면 개수와 함께 자리를 통째로 비운다 — `+0 -0`이 남으면
+	// 아무 말도 아닌 숫자가 툴바를 차지한다.
+	test("clears the totals when a render lands with nothing to count", async ({
+		page,
+	}) => {
+		// **전이를 봐야 한다.** clean 리포로 띄우면 첫 렌더가 곧 빈 분기라
+		// #change-add/#change-del이 마크업 상태(빈 문자열) 그대로이고, 그러면
+		// `applyChangeTotals([])` 배선을 통째로 지워도 이 단언이 초록이다 —
+		// CLAUDE.md가 경고하는 lockfile 픽스처와 같은 vacuity 구조다. 그래서
+		// 숫자가 실제로 **쓰인 뒤** 사라지는지를 본다.
+		const { url, repoDir, stop } = await launchViewer([]);
+		try {
+			await page.goto(url);
+			await expect(page.locator("#change-add")).not.toBeEmpty();
+
+			// 워킹트리를 되돌리면 볼 것이 없어진다.
+			capture(repoDir, ["checkout", "--", "."]);
+			await page.evaluate(() => window.dispatchEvent(new Event("focus")));
+
+			await expect(page.locator("#status")).toBeEmpty();
+			await expect(page.locator("#change-totals")).toBeEmpty();
+		} finally {
+			await stop();
+		}
+	});
+});
diff --git a/apps/viewer/index.html b/apps/viewer/index.html
index 1acfb65..cc0d785 100644
--- a/apps/viewer/index.html
+++ b/apps/viewer/index.html
@@ -49,9 +49,68 @@
 				align-items: center;
 				gap: 8px;
 			}
+			/* 오른쪽은 **조작만** 산다. 툴바가 두 축으로 갈리기 때문이다: 왼쪽은
+			   "지금 무엇을 보고 있는가"를 한 문장으로 말하고(트리거 · 견줄 기준 ·
+			   개수 · 변경량), 오른쪽은 화면을 다룬다. 예전엔 뷰 모드와
+			   새로고침이 왼쪽 한복판에 앉아 그 문장을 두 동강 냈다.
+
+			   **순서 자체가 계약이다** — `찾기 · 새로고침 │ Unified/Split · 트리 │ ⋯`:
+			   ① **찾기가 맨 앞이어야 한다(실측).** find 바는 돋보기 자리에서
+			      340px로 펼쳐지는데, 이 그룹은 오른쪽 끝에 고정돼 있어 바가
+			      자라면 **그 왼쪽 이웃만** 밀린다. 찾기가 첫 자리면 밀릴 이웃이
+			      없다 — 실측: 찾기 우선이면 바를 열어도 모든 컨트롤 이동량 0px,
+			      세그먼트를 앞에 두면 −285px 점프.
+			   ② 가운데 셋은 **순간 동작 / 상태 토글**로 갈랐다. 찾기·새로고침은
+			      눌러도 흔적이 없고, Unified/Split·트리 토글은 지금 어떤지를
+			      상시로 말한다. 118px 세그먼트가 두 무리 사이에 놓여 축의 경계와
+			      시각적 경계가 겹친다.
+			   ③ 트리 토글이 ⋯ 바로 옆인 것은 메뉴의 `Hide file tree`가 **같은
+			      토글**이기 때문이고, 레이아웃 짝이 ⋯ 에 붙는 것은 메뉴 여섯 중
+			      넷이 레이아웃이기 때문이다(Flatten · Tree on right ·
+			      Hide file tree · Fold with tree). ⋯ 가 마지막인 건 관례다 —
+			      메뉴는 툴바 아래로 떨어져 이웃을 가리지 않으므로 기계적 제약은
+			      아니지만, "자리를 못 얻은 나머지 전부"는 줄을 닫는 쪽이 맞다. */
 			.tb-right {
 				margin-left: auto;
 			}
+			/* 좁은 창에서 왼쪽 그룹이 오그라들 수 있어야 한다. flex item의 기본
+			   min-width:auto가 min-content 아래로 줄어드는 것을 막는데, 라벨이
+			   붙으면 그 min-content가 최대 260px 늘어 .tb-right(찾기·트리토글·⋯)를
+			   화면 밖으로 밀어낸다 — 실측: 라벨 없이는 460px에서도 멀쩡하던 툴바가
+			   560px에서 이탈했다. */
+			.tb-left {
+				min-width: 0;
+			}
+			/* 줄어드는 몫은 전부 트리거가 진다. 뒤따르는 세 마디(견줄 기준 · 개수 ·
+			   변경량)는 짧고 고정폭에 가까운데 트리거만 브랜치명만큼 길어지기
+			   때문이고, 이 규칙이 없으면 #status가 두 줄로 접혀 툴바 높이가
+			   43 → 49px로 뛴다(실측).
+
+			   예외는 아래 `#toolbar .tb-picker`가 되돌려 받는다. **특이도로**
+			   이긴다(0,1,1 대 0,1,0) — 예전엔 `.tb-picker`라 둘 다 (0,1,0)이고
+			   소스 순서로만 이겼는데, 그러면 피커 규칙을 한곳으로 모으는
+			   평범한 정리가 트리거를 조용히 `flex: none`으로 되돌린다. */
+			.tb-left > * {
+				flex: none;
+			}
+			/* 견줄 기준 표식 — 조작이 아니라 정보다. #status와 같은 종(種)이라
+			   상자가 없고(배경·테두리·radius 없음), 툴바의 13px·시스템 스택을
+			   그대로 상속하므로 font 선언 자체를 두지 않는다. */
+			#base-label {
+				color: var(--vd-fg-muted);
+			}
+			/* 전체 변경량 — 파일 헤더 배지와 같은 add·del 어휘를 쓴다. 앱에 이미
+			   있는 두 색이라 새 값을 만들지 않는다: --vd-success는 grab 보내기의
+			   ok 상태가, #f85149는 fail 상태가 쓰는 바로 그 값이고, 둘이 diff의
+			   add·del 쌍이라는 것은 .grab-l-side 주석이 이미 적고 있다. 엔진의
+			   --diffs-addition-base를 쓸 수는 없다 — 그 토큰은 shadow root
+			   안에만 살아서 툴바에서는 해석되지 않는다. */
+			#change-add {
+				color: var(--vd-success);
+			}
+			#change-del {
+				color: #f85149;
+			}
 			/* One control height for every toolbar widget — without it, line-height:
      normal + differing paddings yield 25/26/26.5/27px mismatches. */
 			#toolbar button {
@@ -345,14 +404,45 @@
 			.tb-picker {
 				position: relative;
 			}
+			/* 트리거는 조작이자 **정보 표출**이다 — 지금 보고 있는 리포·워크트리·
+			   브랜치를 통째로 말하므로 상한을 두지 않는다. 폭을 붙드는 기제는
+			   flex shrink 하나뿐이고, 그건 옛 라벨에서 이미 실측으로 확인했다
+			   (161자 브랜치에서도 툴바가 넘치지 않았다).
+
+			   **display:flex가 여기서 계약이다.** 블록이면 안쪽 inline-flex
+			   버튼이 flex item이 아니라서 줄어드는 몫을 물려받지 못하고 제
+			   자연폭 그대로 상자를 넘쳐, 트리거가 아무리 좁아져도 라벨은
+			   한 번도 잘리지 않는다(실측: scrollWidth == clientWidth). */
+			#toolbar .tb-picker {
+				display: flex;
+				flex: 0 1 auto;
+				min-width: 0;
+			}
+			/* **`min-width: 0`은 위 `display: flex`와 한 짝이다.** `.tb-picker`가
+			   flex 컨테이너가 된 순간 이 버튼은 flex item이고, 기본
+			   `min-width: auto`가 콘텐츠 기반 최소 크기 — 즉 `nowrap` 라벨의
+			   텍스트 전체 폭 — 으로 풀린다. 라벨 자신의 `overflow: hidden`은
+			   라벨의 자동 최소값만 0으로 만들 뿐 버튼의 min-content 기여를
+			   줄이지 못하므로, 이 줄이 빠지면 `display: flex`를 지웠을 때와
+			   **똑같이** 라벨이 한 번도 안 잘린다. 이 줄은 옛 `max-width: 260px`을
+			   대체하며 들어왔으니 "상한을 없앴으니 잉여"로 읽고 지우지 말 것. */
 			#toolbar #ref-picker-btn {
 				gap: 8px;
-				max-width: 260px;
+				min-width: 0;
+			}
+			/* 줄어드는 몫은 라벨만 진다 — 셰브론이 눌리면 컨트롤로 안 읽힌다. */
+			#toolbar #ref-picker-btn > svg {
+				flex: none;
 			}
 			#ref-picker-label {
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
+				/* 구별되는 조각 하나만 밝힌다 — 나머지는 맥락이다. */
+				color: var(--vd-fg-muted);
+			}
+			#picker-name {
+				color: var(--vd-fg);
 			}
 			#ref-picker {
 				position: absolute;
@@ -747,7 +837,10 @@
 							aria-expanded="false"
 							aria-controls="ref-picker"
 						>
-							<span id="ref-picker-label">Working tree</span>
+							<span id="ref-picker-label"
+								><span id="picker-scope"></span><span id="picker-name"></span
+								><span id="picker-branch"></span
+							></span>
 							<svg
 								width="12"
 								height="12"
@@ -766,8 +859,8 @@
 							<input
 								id="ref-picker-search"
 								type="text"
-								placeholder="Filter branches"
-								aria-label="Filter branches"
+								placeholder="Filter worktrees and branches"
+								aria-label="Filter worktrees and branches"
 								role="combobox"
 								aria-expanded="true"
 								aria-controls="ref-picker-list"
@@ -778,44 +871,21 @@
 							<div
 								id="ref-picker-list"
 								role="listbox"
-								aria-label="Compare against"
+								aria-label="What to view"
 							></div>
 						</div>
 					</div>
-					<fieldset
-						class="tb-seg"
-						id="diff-style-group"
-						aria-label="Diff style"
-					>
-						<button type="button" data-style="unified" aria-pressed="true">
-							Unified
-						</button>
-						<button type="button" data-style="split" aria-pressed="false">
-							Split
-						</button>
-					</fieldset>
-					<button
-						id="refresh"
-						type="button"
-						aria-label="Refresh"
-						title="Refresh"
-					>
-						<svg
-							width="14"
-							height="14"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2.2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							aria-hidden="true"
-						>
-							<polyline points="23 4 23 10 17 10" />
-							<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-						</svg>
-					</button>
+					<!-- 견줄 기준. 트리거가 "무엇을 보는가"(head)를 말하므로 여기는
+					     겹치지 않는 다른 축만 말한다 — 예전엔 둘이 같은 말을 했다. -->
+					<span id="base-label"></span>
 					<span id="status"></span>
+					<!-- 전체 변경량. 개수만으로는 규모를 못 읽는다 — 176 file(s)가
+					     한 줄씩 고친 것인지 통째로 새로 쓴 것인지 갈린다. 조각
+					     사이에 공백 텍스트 노드가 생기면 안 된다(#change-del이
+					     구분자를 품고 온다). -->
+					<span id="change-totals"
+						><span id="change-add"></span><span id="change-del"></span
+					></span>
 				</div>
 				<div class="tb-right">
 					<button
@@ -874,6 +944,43 @@
 							✕
 						</button>
 					</search>
+					<!-- 순간 동작(찾기·새로고침)과 상태 토글(렌더 방식·트리 보임)이
+					     여기서 갈린다. 새로고침이 찾기 바로 뒤인 것은 두 번째
+					     제약 때문이다 — 찾기가 첫 자리를 못 내주므로(바로 아래
+					     주석) 정보 사슬에 가장 가까이 설 수 있는 자리가 여기다. -->
+					<button
+						id="refresh"
+						type="button"
+						aria-label="Refresh"
+						title="Refresh"
+					>
+						<svg
+							width="14"
+							height="14"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2.2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<polyline points="23 4 23 10 17 10" />
+							<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+						</svg>
+					</button>
+					<fieldset
+						class="tb-seg"
+						id="diff-style-group"
+						aria-label="Diff style"
+					>
+						<button type="button" data-style="unified" aria-pressed="true">
+							Unified
+						</button>
+						<button type="button" data-style="split" aria-pressed="false">
+							Split
+						</button>
+					</fieldset>
 					<button
 						id="tree-toggle-btn"
 						type="button"
diff --git a/apps/viewer/server/diff.ts b/apps/viewer/server/diff.ts
index f365b83..aea9a7f 100644
--- a/apps/viewer/server/diff.ts
+++ b/apps/viewer/server/diff.ts
@@ -160,13 +160,19 @@ const buildFile = async (
 	status: DiffFileStatus,
 	name: string,
 	oldName?: string,
+	/** new 쪽 리비전. 없으면 워킹트리(디스크의 지금 파일)를 읽는다. */
+	head?: string,
 ): Promise<DiffFile> => {
 	const oldBytes =
 		status === "added" || status === "untracked"
 			? new Uint8Array()
 			: await showBytes(repo, base, oldName ?? name);
 	const newBytes =
-		status === "deleted" ? new Uint8Array() : readWorkingBytes(repo, name);
+		status === "deleted"
+			? new Uint8Array()
+			: head
+				? await showBytes(repo, head, name)
+				: readWorkingBytes(repo, name);
 	const binary = oldBytes.includes(0) || newBytes.includes(0);
 	const decoder = new TextDecoder();
 	const contentVersion = `${Bun.hash(oldBytes).toString(36)}.${Bun.hash(newBytes).toString(36)}`;
@@ -222,15 +228,20 @@ const parseNameStatusZ = (
 
 export const resolveDiffBaseRev = async (
 	repo: string,
-	opts: { mode?: "working" | "base"; ref?: string },
-): Promise<string> =>
-	opts.mode === "base" && opts.ref
-		? (
-				await $`git -C ${repo} merge-base ${opts.ref} HEAD 2>/dev/null`
-					.nothrow()
-					.text()
-			).trim()
-		: "HEAD";
+	opts: { mode?: "working" | "base"; ref?: string; head?: string },
+): Promise<string> => {
+	// 갈림점은 **head 기준**으로 잡는다. `merge-base(ref, HEAD)`로 두면 브랜치를
+	// head로 볼 때 지금 워크트리의 HEAD와 갈림점을 재게 되는데, 그 둘은 아무
+	// 관계도 없다 — 남의 브랜치를 보면서 내 위치를 기준 삼는 셈이다.
+	const headRev = opts.head ?? "HEAD";
+	if (opts.mode !== "base" || !opts.ref)
+		return headRev === "HEAD" ? "HEAD" : headRev;
+	return (
+		await $`git -C ${repo} merge-base ${opts.ref} ${headRev} 2>/dev/null`
+			.nothrow()
+			.text()
+	).trim();
+};
 
 /**
  * 이미지 diff용 원본 바이트 조회. side=new는 워킹트리, side=old는 base
@@ -241,7 +252,7 @@ export const getFileBytes = async (
 	repo: string,
 	path: string,
 	side: "old" | "new",
-	opts: { mode?: "working" | "base"; ref?: string } = {},
+	opts: { mode?: "working" | "base"; ref?: string; head?: string } = {},
 ): Promise<Uint8Array<ArrayBuffer> | null> => {
 	const root = resolve(repo);
 	const target = resolve(root, path);
@@ -254,7 +265,11 @@ export const getFileBytes = async (
 		return null;
 	}
 	if (side === "new") {
-		const bytes = readWorkingBytes(repo, path);
+		// 텍스트 diff와 같은 축을 봐야 한다 — 예전에 라우트마다 기준이 갈려
+		// 이미지 카드가 텍스트와 다른 비교를 보여준 적이 있다.
+		const bytes = opts.head
+			? await showBytes(repo, opts.head, path)
+			: readWorkingBytes(repo, path);
 		return bytes.length > 0 ? bytes : null;
 	}
 	const base = await resolveDiffBaseRev(repo, opts);
@@ -265,25 +280,49 @@ export const getFileBytes = async (
 
 export const getDiffFiles = async (
 	repo: string,
-	opts: { untracked?: boolean; mode?: "working" | "base"; ref?: string } = {},
+	opts: {
+		untracked?: boolean;
+		mode?: "working" | "base";
+		ref?: string;
+		/** new 쪽 리비전. 없으면 워킹트리를 본다. */
+		head?: string;
+	} = {},
 ): Promise<DiffFile[]> => {
 	const base = await resolveDiffBaseRev(repo, opts);
 	const files: DiffFile[] = [];
 	if (base) {
-		const nameStatus =
-			await $`git -C ${repo} diff --name-status -z ${base} 2>/dev/null`
-				.nothrow()
-				.text();
+		// head가 있으면 리비전 둘을 준다(rev→rev). 없으면 리비전 하나 —
+		// 그때만 오른쪽이 워킹트리가 되어 미커밋 변경이 함께 실린다.
+		//
+		// **끝의 `--`가 계약이다.** 참조 이름이 트래킹된 경로와 같으면(흔하다:
+		// `docs`·`src`·`test`) git이 rev인지 path인지 못 정해 `ambiguous
+		// argument`로 죽는데, `2>/dev/null` + `.nothrow()`가 그 실패를 빈
+		// 문자열로 삼켜 **에러 없는 "변경 없음" 화면**이 된다(실측). 피커가
+		// `%(refname:short)`를 그대로 넘기므로 사용자는 목록에서 고르기만
+		// 해도 이 상태에 들어간다. head 축이 사용자 ref 이름을 `git diff`의
+		// 위치 인자로 처음 통과시키면서 열린 노출이다 — 예전엔 언제나
+		// `HEAD` 아니면 merge-base OID였다. `merge-base`·`rev-list`·
+		// `rev-parse`·`show <rev>:<path>`는 rev만 받아 영향이 없다(실측).
+		const nameStatus = opts.head
+			? await $`git -C ${repo} diff --name-status -z ${base} ${opts.head} -- 2>/dev/null`
+					.nothrow()
+					.text()
+			: await $`git -C ${repo} diff --name-status -z ${base} -- 2>/dev/null`
+					.nothrow()
+					.text();
 		// 파일별 git show/워킹트리 읽기는 서로 독립이라 병렬화하되, 대형 diff에서
 		// git 서브프로세스가 무제한으로 뜨지 않도록 동시성을 제한한다 (순서 유지).
 		const specs = parseNameStatusZ(nameStatus);
 		files.push(
 			...(await mapWithLimit(specs, BUILD_CONCURRENCY, (spec) =>
-				buildFile(repo, base, spec.status, spec.name, spec.oldName),
+				buildFile(repo, base, spec.status, spec.name, spec.oldName, opts.head),
 			)),
 		);
 	}
-	if (opts.untracked) {
+	// 커밋된 리비전에는 untracked가 없다 — 토글이 켜져 있어도 붙일 것이
+	// 없으므로 건너뛴다(디스크를 훑어 봐야 그건 워킹트리의 사실이지 이 뷰의
+	// 사실이 아니다).
+	if (opts.untracked && !opts.head) {
 		const listed =
 			await $`git -C ${repo} ls-files --others --exclude-standard -z 2>/dev/null`
 				.nothrow()
diff --git a/apps/viewer/server/fingerprint.ts b/apps/viewer/server/fingerprint.ts
index 8cf2680..5260874 100644
--- a/apps/viewer/server/fingerprint.ts
+++ b/apps/viewer/server/fingerprint.ts
@@ -17,10 +17,16 @@ import { $ } from "bun";
 
 export const repoFingerprint = async (
 	repo: string,
-	opts: { untracked?: boolean; mode?: "working" | "base"; ref?: string } = {},
+	opts: {
+		untracked?: boolean;
+		mode?: "working" | "base";
+		ref?: string;
+		/** new 쪽 리비전. 없으면 워킹트리를 본다. */
+		head?: string;
+	} = {},
 ): Promise<string> => {
 	const untrackedFlag = opts.untracked ? "-uall" : "-uno";
-	const [status, head, baseRev] = await Promise.all([
+	const [status, head, baseRev, headRev] = await Promise.all([
 		$`git -C ${repo} status --porcelain -z ${untrackedFlag} 2>/dev/null`
 			.nothrow()
 			.text(),
@@ -28,6 +34,12 @@ export const repoFingerprint = async (
 		opts.mode === "base" && opts.ref
 			? $`git -C ${repo} rev-parse ${opts.ref} 2>/dev/null`.nothrow().text()
 			: Promise.resolve(""),
+		// head가 브랜치면 그 브랜치가 움직였을 때 캐시가 깨져야 한다.
+		// 반대로 워킹트리 status는 그 뷰와 무관하지만 그대로 둔다 — 여분의
+		// 재계산이 생길 뿐이고, 낡은 payload가 눌러앉는 방향은 아니다.
+		opts.head
+			? $`git -C ${repo} rev-parse ${opts.head} 2>/dev/null`.nothrow().text()
+			: Promise.resolve(""),
 	]);
 
 	const parts: string[] = [
@@ -36,6 +48,7 @@ export const repoFingerprint = async (
 		status,
 		head,
 		baseRev,
+		headRev,
 	];
 
 	// porcelain -z: `XY <path>\0` 토큰, rename/copy(XY에 R/C)는 다음 토큰이
diff --git a/apps/viewer/server/refs.ts b/apps/viewer/server/refs.ts
index fe470ba..e362852 100644
--- a/apps/viewer/server/refs.ts
+++ b/apps/viewer/server/refs.ts
@@ -26,6 +26,12 @@ export interface RefsResult {
 	worktrees: WorktreeRecord[];
 	refs: RefRecord[];
 	defaultBranch: string | null;
+	/**
+	 * 리포의 메인 워크트리 경로(bare면 그 저장소 디렉토리). 툴바가 "어느
+	 * 리포의 어느 워크트리인가"를 말하려면 워크트리 경로만으로는 부족해서
+	 * 필요하다 — `worktrees[]`로는 알 수 없다(아래 `parseRepoRoot` 참고).
+	 */
+	repoRoot: string | null;
 }
 
 const REMOTES_PREFIX = "refs/remotes/";
@@ -72,6 +78,25 @@ export const parseWorktreeList = (raw: string): WorktreeRecord[] => {
 	return out;
 };
 
+/**
+ * 같은 원본에서 **메인 워크트리 경로**를 읽는다. git 호출을 늘리지 않는다.
+ *
+ * git은 메인 워크트리를 항상 첫 레코드로 낸다 — 링크된 워크트리나 중첩
+ * 워크트리에서 명령을 실행해도 그렇다(실측: 평범·bare·중첩 셋 다).
+ *
+ * **`parseWorktreeList`의 결과를 대신 쓰면 안 된다.** 그쪽은 bare와 prunable을
+ * 걸러내는데(고를 수 있게 두면 워킹트리 없는 경로로 데려간다), bare 리포는
+ * 메인 항목이 바로 그 bare라 첫 항목이 링크된 워크트리로 밀린다 — 그러면
+ * 라벨이 남의 워크트리 이름을 리포 이름이라고 말한다(실측으로 확인했다).
+ * 여기서는 필터를 타지 않은 원본의 첫 `worktree ` 토큰을 그대로 쓴다.
+ */
+export const parseRepoRoot = (raw: string): string | null => {
+	for (const token of raw.split("\0")) {
+		if (token.startsWith("worktree ")) return token.slice("worktree ".length);
+	}
+	return null;
+};
+
 const REF_FIELDS = 4;
 
 /**
@@ -142,5 +167,5 @@ export const getRefs = async (repo: string): Promise<RefsResult> => {
 	const worktrees = parseWorktreeList(wtRaw);
 	const live = new Set(worktrees.map((w) => w.path));
 	const { refs, defaultBranch } = parseRefList(refRaw, live);
-	return { worktrees, refs, defaultBranch };
+	return { worktrees, refs, defaultBranch, repoRoot: parseRepoRoot(wtRaw) };
 };
diff --git a/apps/viewer/server/selection.ts b/apps/viewer/server/selection.ts
index f7e2e20..a225504 100644
--- a/apps/viewer/server/selection.ts
+++ b/apps/viewer/server/selection.ts
@@ -41,17 +41,65 @@ const parseBase = (params: URLSearchParams): BaseSelector => {
 	return params.get("mode") === "base" ? { kind: "auto" } : { kind: "head" };
 };
 
+/**
+ * 무엇을 볼 것인가 — diff의 **오른쪽(new) 항**.
+ *
+ * 오래도록 이 축에는 선택지가 없었다(언제나 워킹트리). 피커가 head를 고르게
+ * 되면서 축이 열렸고, base와는 **독립**이다.
+ */
+export type HeadSelector =
+	/** 워킹트리 — 지금 디스크의 파일. 기본값이고 커밋 안 한 변경이 보인다. */
+	| { kind: "worktree" }
+	/** 사용자가 고른 참조. 워킹트리를 거치지 않으므로 커밋된 것만 보인다. */
+	| { kind: "ref"; ref: string };
+
+/**
+ * **`head=HEAD`는 base와 달리 정규화하지 않는다.** `base=HEAD`는 "커밋 안 한
+ * 것만"이라 워킹트리 뷰와 결과가 같지만, `head=HEAD`는 **커밋된 HEAD**를 보는
+ * 것이라 워킹트리 뷰와 다르다 — 미커밋 변경이 빠진다. 둘을 합치면 그 구분이
+ * 사라진다.
+ */
+const parseHead = (params: URLSearchParams): HeadSelector => {
+	const raw = params.get("head") ?? "";
+	return raw === "" ? { kind: "worktree" } : { kind: "ref", ref: raw };
+};
+
 export interface Selection {
 	repo: string;
 	untracked: boolean;
 	base: BaseSelector;
+	head: HeadSelector;
 }
 
-export const parseSelection = (params: URLSearchParams): Selection => ({
-	repo: params.get("repo") ?? "",
-	untracked: params.get("untracked") === "1",
-	base: parseBase(params),
-});
+/**
+ * **커밋된 rev를 보는데 base가 워킹트리면 그 조합은 정의상 빈 diff다.**
+ * `base=HEAD`(= `mode=working`, = base 미지정)는 "아직 커밋 안 한 것만"이라는
+ * 뜻인데 커밋된 rev에는 그런 것이 없어서, 서버가 곧이곧대로 답하면
+ * `git diff <rev> <rev>`가 되어 **에러 없이 빈 화면**이 나온다(실측:
+ * `?head=main`이라는 가장 자연스러운 수동·공유 URL이 그렇다. 빈 상태 카드는
+ * `No changes on main`이라고 말하는데 실제로는 그 브랜치에 볼 것이 많다).
+ *
+ * 자동 base 전환도 여기서는 구제하지 못한다 — 그 판정은 카드의 `switch-mode`
+ * 액션 유무를 보는데, mode가 working이면 `getRepoSummary`가 base 개수를 아예
+ * 재지 않아(`opts.ref`가 없다) 액션이 생기지 않는다.
+ *
+ * 그래서 의미 없는 조합을 빈 화면으로 답하는 대신 사용자가 원했을 수 있는
+ * 유일한 해석 — "그 브랜치가 갈라진 뒤 한 일" — 으로 푼다. **이 규칙은 원래
+ * 브라우저 한 줄(`applyPick`의 `compareBase === "HEAD" → "@auto"`)에만 살아서
+ * URL을 손으로 만들면 우회됐다.** 파서로 올려 한 곳으로 만든다.
+ */
+const normalize = (base: BaseSelector, head: HeadSelector): BaseSelector =>
+	head.kind === "ref" && base.kind === "head" ? { kind: "auto" } : base;
+
+export const parseSelection = (params: URLSearchParams): Selection => {
+	const head = parseHead(params);
+	return {
+		repo: params.get("repo") ?? "",
+		untracked: params.get("untracked") === "1",
+		base: normalize(parseBase(params), head),
+		head,
+	};
+};
 
 /**
  * payload 캐시와 single-flight가 공유하는 키.
@@ -87,4 +135,8 @@ export const selectionCacheKey = (
 		// 없고, head 기준에 해석값을 넣으면 origin/HEAD가 움직일 때마다
 		// 워킹트리 뷰의 캐시가 이유 없이 날아간다.
 		baseIdentity(sel.base, resolvedBaseRef),
+		// head도 같은 계약을 탄다 — 빠지면 워킹트리 뷰와 브랜치 뷰가 같은
+		// 슬롯에 합류해 한쪽이 남의 diff를 받는다. ref는 **이름**으로 넣는다
+		// (OID는 지문의 몫이라는 위 규칙과 같은 이유).
+		sel.head.kind === "ref" ? `head:${sel.head.ref}` : "head:worktree",
 	].join("\0");
diff --git a/apps/viewer/server/server.ts b/apps/viewer/server/server.ts
index 4ce3470..e618dac 100644
--- a/apps/viewer/server/server.ts
+++ b/apps/viewer/server/server.ts
@@ -170,6 +170,29 @@ const createHandler = (cfg: {
 		}
 		return awaitFlight(resolveBaseCached(repo));
 	};
+
+	/**
+	 * 사용자가 고른 head 참조를 검증한다. base와 **같은 보안 경계**를 탄다 —
+	 * `verifyBaseRef`가 첫 글자 `-`를 먼저 끊는 이유(옵션 주입)는 어느 축이든
+	 * 똑같이 유효하고, 이제 그 값이 `git diff`의 **두 번째** 인자로도 간다.
+	 *
+	 * 표식을 base와 가르는 이유는 클라이언트의 자가복구가 다르기 때문이다:
+	 * 사라진 base는 저장된 프리퍼런스를 지우면 되지만, 사라진 head는 URL의
+	 * 축을 되돌려야 한다.
+	 */
+	const resolveSelectionHead = async (
+		repo: string,
+		sel: Selection,
+	): Promise<{ head: string | undefined } | Response> => {
+		if (sel.head.kind !== "ref") return { head: undefined };
+		const verified = await verifyBaseRef(repo, sel.head.ref);
+		return verified
+			? { head: verified.ref }
+			: new Response(`unknown head ref: ${sel.head.ref}`, {
+					status: 400,
+					headers: { "x-diff-error": "unknown-head" },
+				});
+	};
 	const getRefsCached = (repo: string): Promise<RefsResult> =>
 		refsFlight(repo, async () => {
 			const now = Date.now();
@@ -240,6 +263,9 @@ const createHandler = (cfg: {
 			const baseResult = await resolveSelectionBase(repo, sel);
 			if (baseResult instanceof Response) return baseResult;
 			const { base, ref } = baseResult;
+			const headResult = await resolveSelectionHead(repo, sel);
+			if (headResult instanceof Response) return headResult;
+			const { head } = headResult;
 			// 파이프라인(파일당 git 서브프로세스) 전에 싼 지문으로 변경 여부를
 			// 판정한다. 지문은 파이프라인 "이전"에 뜨므로, 그 사이에 리포가
 			// 바뀌면 저장된 지문이 이미 낡은 값이 되어 다음 요청이 무조건
@@ -251,6 +277,7 @@ const createHandler = (cfg: {
 						untracked,
 						mode,
 						ref: mode === "base" ? (ref ?? undefined) : undefined,
+						head,
 					});
 					const cached = diffCache.get(cacheKey, fingerprint);
 					if (cached) return cached;
@@ -260,8 +287,9 @@ const createHandler = (cfg: {
 									untracked,
 									mode: "base",
 									ref: ref ?? undefined,
+									head,
 								})
-							: await getDiffFiles(repo, { untracked });
+							: await getDiffFiles(repo, { untracked, head });
 					const fresh = {
 						fingerprint,
 						etag: payloadEtag(files),
@@ -306,7 +334,15 @@ const createHandler = (cfg: {
 			const baseResult = await resolveSelectionBase(repo, sel);
 			if (baseResult instanceof Response) return baseResult;
 			const { base, ref } = baseResult;
-			const summary = await getRepoSummary(repo, { base, ref });
+			// 카드가 diff와 **다른 축**을 설명하면 안 된다 — head를 빼면
+			// 브랜치를 보고 있는데 카드는 워크트리를 설명한다.
+			const headResult = await resolveSelectionHead(repo, sel);
+			if (headResult instanceof Response) return headResult;
+			const summary = await getRepoSummary(repo, {
+				base,
+				ref,
+				head: headResult.head,
+			});
 			// NOTE: /api/diff와 동일하게 CORS 헤더 없음 — cross-origin 페이지가 읽을 수 없다.
 			return new Response(JSON.stringify(summary), {
 				headers: { "content-type": "application/json; charset=utf-8" },
@@ -353,12 +389,12 @@ const createHandler = (cfg: {
 				if (baseResult instanceof Response) return baseResult;
 				ref = baseResult.ref;
 			}
-			const bytes = await getFileBytes(
-				repo,
-				path,
-				side,
-				mode === "base" && ref ? { mode, ref } : {},
-			);
+			const headResult = await resolveSelectionHead(repo, sel);
+			if (headResult instanceof Response) return headResult;
+			const bytes = await getFileBytes(repo, path, side, {
+				...(mode === "base" && ref ? { mode, ref } : {}),
+				...(headResult.head ? { head: headResult.head } : {}),
+			});
 			if (!bytes) return new Response("not found", { status: 404 });
 			// no-store: 워킹트리 이미지는 저장할 때마다 바뀌므로 항상 새로 읽는다
 			// (변경 감지는 blobVersion 캐시버스터가 담당).
diff --git a/apps/viewer/server/summary.ts b/apps/viewer/server/summary.ts
index 422f5ef..a410806 100644
--- a/apps/viewer/server/summary.ts
+++ b/apps/viewer/server/summary.ts
@@ -17,9 +17,15 @@ export interface RepoSummary {
 	 * 가릴 수 있다. 표시명으로 맞추면 로컬 동명 브랜치에 남의 숫자가 붙는다.
 	 */
 	ref: string | null;
-	workingFiles: number;
+	/**
+	 * 미커밋 변경 파일 수. head가 커밋된 리비전이면 **null**이다 — 그 뷰에서
+	 * 워킹트리는 측정 대상이 아니고, 0으로 적으면 "아무것도 없다"는 **주장**이
+	 * 되어 실제로는 변경이 있는데도 카드가 조용하다고 말하게 된다.
+	 */
+	workingFiles: number | null;
 	baseFiles: number | null;
-	untrackedFiles: number;
+	/** untracked 파일 수. workingFiles와 같은 이유로 head가 rev면 null이다. */
+	untrackedFiles: number | null;
 	aheadCommits: number | null;
 }
 
@@ -28,39 +34,61 @@ const countZ = (out: string): number =>
 
 export const getRepoSummary = async (
 	repo: string,
-	opts: { base: string | null; ref: string | null },
+	opts: { base: string | null; ref: string | null; head?: string },
 ): Promise<RepoSummary> => {
-	const branch = (
-		await $`git -C ${repo} branch --show-current 2>/dev/null`.nothrow().text()
-	).trim();
+	// head가 브랜치면 카드의 "on <branch>"는 그 브랜치를 말해야 한다 —
+	// 워크트리의 브랜치를 말하면 보고 있지도 않은 곳을 가리킨다.
+	const branch = opts.head
+		? opts.head
+		: (
+				await $`git -C ${repo} branch --show-current 2>/dev/null`
+					.nothrow()
+					.text()
+			).trim();
 	const head = (
-		await $`git -C ${repo} rev-parse --short HEAD 2>/dev/null`.nothrow().text()
-	).trim();
-	const workingFiles = countZ(
-		await $`git -C ${repo} diff --name-only -z HEAD 2>/dev/null`
+		await $`git -C ${repo} rev-parse --short ${opts.head ?? "HEAD"} 2>/dev/null`
 			.nothrow()
-			.text(),
-	);
-	const untrackedFiles = countZ(
-		await $`git -C ${repo} ls-files --others --exclude-standard -z 2>/dev/null`
-			.nothrow()
-			.text(),
-	);
+			.text()
+	).trim();
+	// 커밋된 리비전에는 미커밋 변경도 untracked도 없다. 0이 아니라 null인
+	// 이유는 위 필드 주석에 있다 — 재지 않은 것을 0으로 적으면 주장이 된다.
+	const workingFiles = opts.head
+		? null
+		: countZ(
+				await $`git -C ${repo} diff --name-only -z HEAD -- 2>/dev/null`
+					.nothrow()
+					.text(),
+			);
+	const untrackedFiles = opts.head
+		? null
+		: countZ(
+				await $`git -C ${repo} ls-files --others --exclude-standard -z 2>/dev/null`
+					.nothrow()
+					.text(),
+			);
 	let baseFiles: number | null = null;
 	let aheadCommits: number | null = null;
 	if (opts.ref) {
 		const mergeBase = await resolveDiffBaseRev(repo, {
 			mode: "base",
 			ref: opts.ref,
+			head: opts.head,
 		});
 		if (mergeBase) {
+			// diff와 같은 축을 세야 카드가 화면과 다른 개수를 말하지 않는다.
+			// 끝의 `--`는 diff.ts의 같은 이유다 — 참조 이름이 경로와 겹치면
+			// `ambiguous argument`가 나고 nothrow가 그것을 0으로 삼킨다.
 			baseFiles = countZ(
-				await $`git -C ${repo} diff --name-only -z ${mergeBase} 2>/dev/null`
-					.nothrow()
-					.text(),
+				opts.head
+					? await $`git -C ${repo} diff --name-only -z ${mergeBase} ${opts.head} -- 2>/dev/null`
+							.nothrow()
+							.text()
+					: await $`git -C ${repo} diff --name-only -z ${mergeBase} -- 2>/dev/null`
+							.nothrow()
+							.text(),
 			);
 			const ahead = (
-				await $`git -C ${repo} rev-list --count ${`${mergeBase}..HEAD`} 2>/dev/null`
+				await $`git -C ${repo} rev-list --count ${`${mergeBase}..${opts.head ?? "HEAD"}`} 2>/dev/null`
 					.nothrow()
 					.text()
 			).trim();