[devswha]

Change

승인하신 채팅 모드 목업(final-working-dark.html 등)을 순서대로 올리는 작업의 한 조각입니다. 앞선 조각은 #456 ~ #466으로 main에 들어가 있습니다. 이번 차례는 두 조각으로, 이 PR(모델 pill)과 입력 카드에 붙는 승인 카드(다른 PR)입니다. 마지막으로 글자 크기 단계와 글꼴이 남습니다. 그래서 이 PR만으로는 최종 목업과 똑같아 보이지 않습니다.

싣는 목업 규칙은 h.css / h.js(입력창의 모델 표시)의 공통 규칙(모델과 effort가 한 덩어리, effort는 가운뎃점 뒤), mono(이름이 없는 id는 식별자 글꼴), name(읽히는 이름), pill(마크와 함께 조용한 chip 하나)입니다.

사용자가 보는 것

• 입력 카드 아래 줄에서 에이전트 마크, 모델, reasoning 단계, 컨텍스트 링이 조용한 pill 하나(--bg-hover 바탕, --radius-pill, 컨트롤 높이)에 모입니다. DONE은 pill 밖, pill 앞에 그대로 그려집니다.
• 모델은 id가 출처가 있는 패턴과 통째로 맞을 때만 이름으로 읽힙니다: claude-opus-5-5 → Opus 5.5, claude-sonnet-5 → Sonnet 5, gpt-5.6 → GPT-5.6, gpt-5.6-sol → GPT-5.6-Sol, glm-5.3 → GLM-5.3. 그 밖의 id(날짜가 붙은 스냅숏, gpt-5.6-sol-max 같은 접미사, 다른 provider 접두사, 다른 벤더)는 받은 그대로 mono 글꼴로 그립니다. 이름을 추측하지 않습니다.
• 이름 뒤에 가려진 원래 id는 title(툴팁)에 있고, 스크린 리더도 읽습니다(visually-hidden 글자). 터치 화면에서는 아직 보이지 않습니다.
• 단계는 --text-dim 가운뎃점 뒤에 첫 글자만 대문자로 나옵니다(High, Extra high). 글자 자체는 그대로이고 대문자는 CSS입니다.
• 단계를 기록하지 않는 pane은 이름과 링만 보입니다(main은 대시를 그렸습니다). 단계는 있는데 모델이 없는 pane은 pill 없이 줄에 흐린 "Model — · High"만 그립니다.
• pill은 표시만 합니다. 버튼이 아니고, role, tabindex, hover, chevron이 없습니다.
• 모델 표시가 Queue 옆에 들어가지 않아 물러날 때(#465의 규칙)는 pill도 함께 물러나고 링은 남습니다.

새 번역 문구는 없습니다. HTTP/WS 계약과 서버는 바뀌지 않습니다. .conn-live, 사이드바의 READY / RUN / INPUT, Queue와 "Send now", 프롬프트 응답 경로는 건드리지 않았습니다. composerModelDraw와 fitStatus도 그대로입니다. 바뀐 파일은 8개이고 site/, server/, shared/ 아래에는 없습니다. 변경 이력은 Unreleased → Changed에 적었습니다.

목업과 다른 점

1. gpt-5.6-sol은 GPT-5.6-Sol(하이픈)로 그립니다. 목업 h.js는 "GPT-5.6 Sol"입니다. 이 tier 단어의 출처가 저장소에는 Codex 상태 줄 fixture "GPT-6-Sol"(server/prompt.test.ts)뿐이라 그 표기를 따랐습니다. 목업의 공백으로 바꾸는 것은 src/lib/modelName.ts 한 줄과 테스트입니다.
2. glm-5.3은 GLM-5.3(벤더가 쓰는 하이픈 표기)입니다. h.js는 "GLM 5.3"입니다.
3. 이름으로 바꾸는 패턴은 다섯 개뿐입니다: claude-(opus|sonnet|haiku|fable|mythos)-N[-M], 같은 것의 anthropic/ 접두사, gpt-N[.M], gpt-N[.M]-sol, glm-N[.M]. "Claude"라는 단어를 빼는 것은 Claude Code 상태 줄 "[Opus 5.5 (1M context)]"(server/prompt.test.ts)을 따랐습니다.
4. 날짜나 접미사가 붙은 id는 이름 + title이 아니라 통째로 mono로 그립니다(claude-haiku-4-5-20251001). 접미사가 가려지는 일이 없게 하려는 것입니다.
5. 이름 옆에 원래 id를 visually-hidden 글자로 한 번 더 넣었습니다(목업에 없음).
6. 모델 없이 단계만 있는 pane은 pill을 그리지 않습니다(목업에 없음).
7. pill 안의 글자 크기는 --fs-xs 그대로입니다(h.css는 --fs-sm). 크기는 마지막 조각의 몫입니다.
8. 업로드 / 재연결 문장이 따로 한 줄을 쓸 때 pill 높이는 --chip-h입니다. 컨트롤 높이로 두면 카드가 8px 커지고, 기존 폭 맞춤 검사가 이를 막습니다.
9. pill 바탕 위에서 컨텍스트 링의 트랙은 --border-strong입니다. charcoal dark와 Catppuccin Mocha에서 --border가 --bg-hover와 같은 값이어서입니다. 카드 위에 혼자 남은 링은 --border 그대로입니다.
10. DONE은 pill 앞에 --space-1 여백으로 그립니다(전에는 마크 뒤였고, 마크가 이제 pill 안에 있습니다).
11. src/AGENTS.md의 Chat composer 줄에 lib/modelName.ts와 "이름을 추측하지 않는다"는 규칙을 적었습니다.

결정이 필요한 것

• 390px 폰에서 작업 chip, 링, Queue가 모두 있으면 pill은 항상 물러납니다. 남는 폭이 140px이고 pill은 약 161px이 필요합니다. main은 이 자리에서 짧은 모델 표시를 그립니다. 마이크를 켠 800px도 같습니다. 선택지: 지금처럼 문서화한 대로 둔다 / 좁은 카드에서는 물러나기 전에 pill의 바탕과 padding을 먼저 뺀다 / Queue가 보일 때 단계가 먼저 물러나게 한다(#465의 규칙을 뒤집음). DESIGN.md에 적고 스크립트로 고정해 두었습니다.
• "GPT-5.6-Sol"과 목업의 "GPT-5.6 Sol", "GLM-5.3"과 "GLM 5.3". Sol의 출처는 Codex 상태 줄을 담은 테스트 fixture입니다. 그 줄이 실제 캡처가 아니라 손으로 쓴 것이라면 이 패턴은 다시 빼야 합니다.
• 이름으로 바뀐 모델의 원래 id는 터치로 닿지 않습니다(title과 visually-hidden 글자뿐). pill이 모델 전환기가 되면 풀립니다. 그때까지 둘지 결정해 주세요.

리뷰할 때 볼 곳과 위험

• 이름이 없는 id는 mono라서 전의 sans 표시보다 넓고, main보다 일찍 물러납니다(긴 id, 1024px, 초안이 있을 때 full → out).
• 모델 없는 줄은 "Model — · High"로 읽히고 점 앞뒤 간격이 조금 다릅니다(앞 4px, 뒤 8px). 드문 상태라 그대로 두었습니다.
• charcoal dark에서 pill 위 흐린 단계 글자의 대비는 4.54:1로 4.5를 겨우 넘습니다.
• 폭 맞춤 스크립트는 잰 결과를 고정합니다. 두 칸(긴 id, 1440, 컨텍스트 숫자 열림)이 경계에 가까워 글꼴 스택이 다르면 뒤집힐 수 있습니다.
• 스크립트의 단계 검사는 Chrome의 innerText가 ::first-letter의 text-transform을 반영한다는 데 기대고 있습니다.
• 업로드 문장이 따로 한 줄을 쓰는 상태에서 짧은 pill이 키보드 focus 링(2px + 2px offset)을 자릅니다. origin/main도 같은 상태에서 .composer-status[data-hint] > .composer-status-meta { overflow: hidden }으로 자르고 있어 이 PR이 만든 것은 아닙니다.
• 브랜치에 origin/main 병합 커밋(feat(chat): held messages are quiet rows on the message box's column #466)과 후속 커밋이 있습니다. squash 머지에는 문제가 없습니다.

다른 PR과의 충돌

외부 PR #436(상태 줄)은 Composer.tsx, Composer.css에서 충돌할 것으로 봅니다. #409, #438(채팅)도 같은 파일이나 CHANGELOG.md, DESIGN.md에서 충돌할 수 있습니다. #441, #421(사이드바)은 충돌하지 않을 것으로 봅니다. 이 PR들은 건드리지 않았습니다. 같은 차례의 승인 카드 조각과는 CHANGELOG.md, DESIGN.md, Composer.css에서 겹칠 수 있습니다.

Validation

검증 환경: Linux, herdr 0.9.3, Bun 1.4.2, Chrome(/usr/bin/google-chrome). 브라우저 검사는 별도 세션 herdr-web-ui-test에서만 돌렸습니다. 아래는 451c9dd 기준이고, 이때 origin/main은 #466(9153e60)이며 브랜치에 이미 병합되어 있습니다.

• bun run typecheck: 통과
• bun run test:unit: 1,269건 통과, 4건 건너뜀, 실패 없음. src/lib/modelName.test.ts가 새로 들어갔습니다(이름이 붙는 id, 받은 그대로 돌아와야 하는 id).
• bun run build: 통과
• scripts/ui-regression.ts 전체 순서(test:ui의 스크립트, 위 빌드로 1회): PASS 36개 뒤 checkAlertSound의 .droplet-card 대기(scripts/alert-sound-regression.ts:79)에서 중단, 종료 코드 1. 이 실패는 이 기기에서 origin/main도 전체 순서 안에서만 똑같이 내는 것으로 알려진 것이고, 이 PR이 만든 것이 아닙니다. 그 앞의 검사는 모두 통과했고 checkComposerReconnect도 그 안에 있습니다.
• 같은 ui-regression.ts에서 이 기기의 알려진 실패 두 개(checkAlertSound, checkUpdateNotice: 둘 다 origin/main에서도 전체 순서 안에서만 실패하고 CI는 통과)만 뺀 임시 복사본(커밋하지 않고 지웠습니다): PASS 64개, 종료 코드 0.
• bun scripts/composer-fit-demo-regression.ts: PASS 8개. 이 PR이 바꾼 스크립트입니다: pill과 그 안의 마크, 이름, 단계, 링을 모든 경우에 쌍으로 겹침 검사, 이름 붙이기(gpt-5.6-sol → GPT-5.6-Sol, gpt-5.6-sol-max는 그대로), 가려진 id가 이름 뒤에만 있음, extra high → Extra high, 단계 없음, 모델 없음, 390 / 800 / 1024 / 1440 표(짧은 이름과 긴 id, 마이크 유무, 컨텍스트 숫자 닫힘과 열림), 폰에서 Queue가 보이는 동안 물러났다가 초안을 지우면 돌아옴.
• bun scripts/chat-browser-qa.ts: PASS 7개(getByText로 찾는 테스트 모델 id와 xhigh가 그대로 맞습니다).
• 각 1회, 모두 종료 코드 0: chat-history-browser-qa.ts PASS 5개, chat-greeting-demo-regression.ts PASS 10개, held-rows-demo-regression.ts PASS 10개, droplet-demo-regression.ts PASS 5개, keyboard-viewport-regression.ts PASS 1개, file-viewer-regression.ts PASS 6개, file-viewer-mobile-regression.ts PASS 16개.
• flake로 기록할 것은 없었습니다.

돌리지 않은 것:

• checkAlertSound, checkUpdateNotice는 위 이유로 이 기기에서 통과를 확인하지 못했습니다. CI가 돌립니다.
• bun run test:integration과 *.contract.test.ts.
• scripts/machines-browser-qa.ts(SSH fixture 필요). .composer-status[data-status]만 읽고, 이 속성은 바뀌지 않았습니다.
• scripts/film/capture.ts. textContent의 /RUN|DONE/만 읽습니다.
• 실제 iOS / Android 기기. 터치는 Chromium 에뮬레이션입니다.
• 수정마다 되돌려서 새 검사가 실패하는지 보는 확인은 하지 않았습니다.

그 밖에 리뷰어가 커밋되지 않은 하네스로 24개 상태를 그려 확인했습니다: 390 터치 dark와 light, Queue가 있는 초안, 긴 id, 단계 없음, 모델 없음, 두 단어 단계, 390과 1440의 DONE, 따로 한 줄을 쓰는 업로드 문장, light의 amber / report / charcoal / catppuccin, dark charcoal. 이것은 리뷰 수정(451c9dd) 전의 트리에서였습니다. 수정 뒤에 만든 사람이 다시 본 것은 dark amber뿐입니다(GPT-5.6-Sol · Xhigh, Opus 5.5 · Extra high, 단계 없음 1440과 390 터치, 모델 없음). light와 다른 팔레트는 수정 뒤에 다시 찍지 않았습니다. 두 단어 단계와 모델 없음 상태는 실제 에이전트가 아니라 스크립트의 fixture 패치로 만들었습니다.

Codex 적대적 리뷰(gpt-6.1-sol, xhigh, 읽기 전용): 4건 보고, 3건을 고쳤고(느슨해진 겹침 검사, hover로만 닿던 원래 id, 단계만 있을 때의 "Model —" pill) 1건(focus 링 잘림)은 origin/main에도 있는 것이라 뺐습니다.

PR을 연 뒤의 변경

• 이름 규칙에 대한 메인테이너의 결정을 반영했습니다(d79e335). 이름은 계속 벤더의 정규 id 문법으로 붙입니다. 출시된 버전의 목록이 아니므로 새 모델이 나와도 코드를 고칠 필요가 없고, 그 대가로 모양만 맞고 실제로는 없는 버전의 id(claude-opus-9-9, gpt-10)에도 이름이 붙습니다. 이 점은 src/lib/modelName.ts의 머리 주석에 적었고, 누가 실수로 "고치지" 않도록 테스트 하나로 고정했습니다.
• 대신 벤더의 정규 형태가 아닌 id는 받은 그대로, mono 글꼴로 나옵니다. 버전 자리에 앞자리 0이 있는 id(claude-sonnet-5-05, gpt-05.6, glm-5.03)와 major가 0인 id가 그렇습니다. minor 0은 Anthropic만 쓰는 형태라 claude-opus-4-0은 Opus 4.0으로 이름이 붙고, gpt-5.0과 glm-5.0은 그대로 나옵니다. 이 minor 0의 구분은 결정문에 없던 것을 제가 정한 것이니 확인이 필요합니다.
• 빈 자리, 세 자리 이상, 끝이나 중간의 잘못된 구분자, 대문자, 공백과 줄바꿈, ASCII가 아닌 숫자는 전에도 그대로 나왔습니다. 코드는 바뀌지 않았고 테스트로 고정했습니다.
• DESIGN.md와 CHANGELOG의 문장을 고쳤습니다. 폰에서 작업 칩과 Queue 옆의 pill이 "항상" 물러난다고 썼지만 사실이 아니었습니다. pill은 들어가지 않을 때 물러나고, 390px 폰에서 작업 칩, 링, Queue가 함께 있으면 단계가 있는 이름 붙은 모델은 모두 그 경우입니다. 단계가 없는 짧은 id는 그대로 그려집니다. 두 문서의 "그대로 나오는 id" 목록에 정규 형태가 아닌 표기도 넣었습니다.
• scripts/composer-fit-demo-regression.ts에 390px 경우 두 개를 넣었습니다. 작업 칩, 링, Queue가 있을 때 단계 없는 o3는 온전히 그려지고, 가장 짧은 이름인 gpt-6 + low는 물러납니다.
• 이 커밋에서 돌린 것: bun run typecheck 통과, bun run test:unit 1,272건 통과 / 4건 건너뜀 / 실패 없음, bun run build 통과, bun run scripts/composer-fit-demo-regression.ts PASS 8개(종료 코드 0).
• 확인하지 못한 것: bun run test:ui, test:integration, *.contract.test.ts는 이 커밋에서 돌리지 않았습니다. "단계가 있는 이름 붙은 모델은 모두 물러난다"는 문장은 gpt-6 + low, gpt-5.6 + xhigh, claude-opus-5-5 + xhigh로만 쟀고, 그보다 짧은 단계 낱말은 재지 않았습니다. 실제 기기에서는 보지 않았습니다(Chromium 에뮬레이션).

🤖 Generated with Claude Code

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: devswha/herdr-web-ui/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: 16902193-9621-4059-b310-3267e9d571a0

📥 Commits

Reviewing files that changed from the base of the PR and between 4f6d873 and d79e335.

📒 Files selected for processing (5)

• CHANGELOG.md
• DESIGN.md
• scripts/composer-fit-demo-regression.ts
• src/lib/modelName.test.ts
• src/lib/modelName.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• CHANGELOG.md

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 7 remain after this review.

---

📝 Summary

Summary by CodeRabbit

• New Features
  • The chat composer groups the agent mark, model name, reasoning level, and context indicator in a compact status pill.
  • Recognized Claude, GPT, and GLM model IDs display as readable names; other IDs remain unchanged.
  • Reasoning details are omitted when unavailable.
• Improvements
  • The composer adapts its status details to available space. When Queue is visible and space is limited, the model label and pill step out while the context indicator remains visible.

Walkthrough

The composer displays the agent mark, model, reasoning level, and context ring in a status pill. It formats recognized Claude, GPT, and GLM model IDs, while leaving other IDs unchanged. The pill’s contents and visibility respond to available space and Queue state.

Changes

Composer Status Pill

Layer / File(s)	Summary
Model label formatting src/lib/modelName.ts, src/lib/modelName.test.ts, src/AGENTS.md	Adds modelLabel to format supported Claude, GPT, and GLM model IDs. Other IDs remain unchanged. Tests cover recognized IDs and fallback cases; the Chat composer documentation describes the matching rule.
Composer status pill src/components/Composer.tsx, src/components/Composer.css, DESIGN.md, CHANGELOG.md	The composer groups the agent mark, model, reasoning level, and context ring in a display-only pill. Styling and design details define accessibility text, tooltips, and layout behavior when space is limited or Queue is shown.
Composer fit regressions scripts/composer-fit-demo-regression.ts	Expands browser cases and assertions for pill contents, model and effort variants, ring styling, Queue state, and viewport widths.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to d79e3

The model pill and labeling changes have no established merge-blocking issue in the supplied evidence. Complete normal validation before merging.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files. (2 skipped: 2…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main change: a display-only pill that combines the model and reasoning level and uses readable names when IDs match supported patterns.
Description check	✅ Passed	The description includes both required sections. It explains the behavior and scope, and it lists validation results, known failures, and checks that were not run.

Full details: Docstring Coverage

Explanation

Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}