0017. 워크트리 탭은 트리 대신 세 가지 보기로 그리고, 설정의 Git 탭에서 고른다

• 상태: 채택
• 날짜: 2026-10-02
• 관련: worktreeView.ts, WorktreeViews.tsx, 0002-color-roles.md, 0008-module-structure.md

맥락

사이드바 Git 모드의 워크트리 탭은 파일 트리와 같은 줄(TreeRow)로 그려져, 접힘 화살표와 폴더·브랜치 아이콘과 계단식 들여쓰기가 그대로 붙어 있었다. 이 장치들은 깊이를 알 수 없는 파일 계층을 나타내려는 것인데, 워크트리 탭의 계층은 저장소와 워크트리 두 단계로 고정되어 있다. 이 탭에서 사람이 보려는 것은 계층보다 어느 작업이 돌고 있고 어디가 사람을 기다리고 plan이 얼마나 진행됐는지다.

트리를 걷어 낸 모양으로 두 줄 목록, 카드, 세션 상태별 묶음 세 가지를 시안으로 비교했다. 셋은 같은 데이터(저장소, 워크트리, 세션 상태, plan 진행률)를 다르게 배치할 뿐이고, 어느 쪽이 나은지는 동시에 돌리는 워크트리 수와 사람의 습관에 따라 달라진다.

결정

워크트리 탭을 기본형(두 줄 목록), 카드형, 상태별 세 가지 보기로 그리고, 설정 창의 Git 탭에서 고르게 한다. 기본값은 기본형이다.

• 세 보기 모두 트리 장치를 쓰지 않는다. 브랜치는 전체 이름을 보여 주되 마지막 /까지를 흐린 글자로 나눠, feat/, feature/처럼 사람마다 다른 접두어가 그대로 보이게 한다.
• 카드형은 접두어와 별개로 plan의 작업 유형 태그도 보여 준다. 접두어 규칙은 사람마다 달라 유형을 대신할 수 없기 때문이다.
• 보기 설정은 렌더러 저장소의 belloga.worktreeView에 둔다. 다른 렌더러 설정과 같은 방식으로 읽고 쓰며, 바꾸면 바로 반영된다.
• 변경 탭은 펼친 워크트리 아래에 변경 파일을 나열하는 계층이라 지금의 트리(RepoTree)를 그대로 쓴다.

근거 / 검토한 대안

• 보기 하나로 바꾼다(두 줄 목록만 둔다). 구현과 유지 비용이 가장 작다. 그러나 동시에 돌리는 워크트리가 많을 때는 상태별 묶음이, 적을 때는 카드가 더 잘 읽힌다는 의견이 갈렸고, 어느 하나가 모든 경우에 낫다는 근거가 없었다. 세 보기는 데이터를 모으는 쪽을 함께 쓰고 그리는 부분만 다르므로, 늘어나는 비용은 화면 컴포넌트 셋에 그친다고 보고 기각했다.
• 지금의 트리를 네 번째 선택지로 남긴다. 트리 장치가 정보 없이 자리만 차지한다는 것이 이번 변경의 출발점이라, 남겨 둘 이유가 약해 기각했다.
• 사이드바 안에 보기 전환 단추를 둔다. 자주 바꾸는 설정이 아니라 한 번 고르면 유지되는 취향에 가깝고, 사이드바의 좁은 머리 줄에 단추를 하나 더 두면 탭 줄이 복잡해진다. 앞으로 Git 관련 설정이 늘어날 자리로 설정 창에 Git 탭을 새로 두었다.
• 세 보기가 plan 배지와 세션 상태를 직접 그린다. ADR 0008의 의존 방향 표에서 features/worktrees는 ui와 lib만 가져올 수 있다. 그래서 plan 표시, 상태 점, … 메뉴는 사이드바(ConnectionSection)가 render prop으로 넘긴다. 지금 RepoTree가 쓰던 방식과 같다.
• plan 진행 막대와 작업 유형 태그를 따로 만든다. 둘이 같은 plan 폴더를 따로 감시하면, 한쪽이 사라질 때 보내는 watch:stop이 다른 쪽의 감시까지 끊는다. main의 감시는 참조 수를 세지 않는다. 그래서 plan을 한 번만 읽는 PlanSummary 하나로 두고 모양만 variant로 고르게 했다.

결과

• 색은 ADR 0002를 따른다. 진행 막대, 태그, 개수 표시는 무채색이고, 유채색은 세션 상태 점과 권한 대기 글에만 쓴다.
• 상태별 보기는 Belloga 터미널에서 켠 Claude 세션의 상태에 기대므로, 앱 밖에서 작업하면 모든 워크트리가 쉬는 중에 모여 묶음의 의미가 약해진다.
• 상태별 보기에는 저장소 제목이 없어 워크트리 추가 단추를 목록 아래에 두고, 저장소가 둘 이상이면 고르는 메뉴를 한 번 더 거친다.
• 보기가 셋이라 워크트리 탭에 기능을 더할 때 세 곳을 함께 고쳐야 한다. 공통 props(WorktreeViewProps)와 공통 조각(BranchName, RepoHeading, PlanSummary)으로 그 범위를 줄였다.