[devswha]

Change

승인된 채팅 모드 재설계의 한 조각입니다(앞서 #456 ~ #468이 머지되었고, 이번이 마지막 묶음입니다). 이 PR에 해당하는 목업 규칙은 없습니다. #463(960px 채팅 레인과 Chat width 설정) 리뷰에서 남은 후속 수정입니다.

Chat width가 Default일 때 레인의 최대 폭이 고정 960px이었습니다. Wide는 72rem이라서, 브라우저 글꼴 크기가 16px이 아니면 Default가 Wide보다 넓어질 수 있었습니다(13px 루트에서 Default 960px, Wide 936px).

이제 Default의 최대 폭은 60rem입니다.

• 16px 루트: 지금과 같습니다(820px ~ 960px).
• 20px 루트: 큰 pane에서 Default가 1200px까지 넓어집니다(Wide는 1440px).
• 13px 루트: Default는 pane 폭과 상관없이 820px이고(Narrow와 같음), Wide(936px)가 다시 더 넓습니다.
• 탭을 열어 둔 채 글꼴 크기를 바꿔도 pane 크기 변경이나 새로고침 없이 바로 적용됩니다.

구현: PaneTerminal이 --chat-w를 px 숫자가 아니라 CSS 길이 하나로 씁니다. min(max(820px, 60rem), <pane 몫>px) 형태이고 chatLaneLength가 만듭니다. 루트 글꼴 크기를 JS에서 읽지 않습니다. CHAT_LANE_MAX(960)는 CHAT_LANE_MAX_REM(60)으로 바뀌었고, chatLaneWidth(pane, root)는 같은 규칙의 숫자 형태로 남아 테스트에서만 씁니다. DESIGN.md와 src/styles.css의 주석을 함께 고쳤습니다. 새 문구, HTTP/WS 계약, 클래스 이름 변경은 없습니다.

목업과 다른 점

• 대응하는 목업 규칙이 없어서 목업 렌더와 비교하지 않았습니다. 검증은 측정한 폭입니다.
• 루트가 13.67px보다 작으면 60rem이 820px보다 작아지는데, 이때는 바닥값 820px이 이깁니다. Default가 Narrow보다 좁아지지 않게 하기 위해서입니다. 그래서 "Default ≤ Wide"는 루트 11.39px 이상에서 성립합니다. 그보다 작으면 Narrow의 820px 자체가 Wide의 72rem보다 넓은데, 이 PR은 그 부분을 바꾸지 않습니다.
• chatLaneWidth는 rem 최대 폭을 정수 px로 반올림하지 않습니다(CSS가 계산하는 값과 같게). 루트가 소수 px이면 레인도 소수 px 폭이 될 수 있습니다.

위험과 리뷰할 곳

• .terminal-stack의 --chat-w가 px 값이 아니라 min()/max() 식입니다. ChatView.css와 Composer.css(calc() 안에서 쓰는 곳 포함)에서 Chrome은 올바르게 계산했습니다. Chrome에서만 확인했습니다. src와 scripts에 이 인라인 값을 숫자로 파싱하는 코드는 없습니다.
• 루트 글꼴이 13.67px보다 작고 모니터가 큰 사용자는 Default가 960px에서 820px으로 줄어듭니다. 의도한 수정이지만 눈에 보이는 변화입니다.
• src/lib/settings.test.ts가 PaneTerminal이 setProperty("--chat-w", chatLaneLength(를 쓰고 chatLaneWidth(를 호출하지 않는지 소스 문자열로 확인합니다. JS에서 px로 계산한 최대 폭이 되돌아오는 것을 막기 위한 것입니다.

Validation

검증 환경: Linux, Bun 1.4.2, Chrome. origin/main(8378a95, #468 포함)을 머지한 뒤 실행했습니다.

• bun run typecheck: 통과
• bun run test:unit: 1,284건 통과, 4건 건너뜀, 실패 없음
• bun run build: 통과(test:ui 안에서)
• bun run test:ui(별도 세션 herdr-web-ui-test): PASS 36개 뒤 checkAlertSound의 .droplet-card 대기(scripts/alert-sound-regression.ts:79)에서 실패했습니다. 이 실패는 이 장비에서 origin/main도 전체 순서로 돌릴 때 똑같이 나는 것으로 알려져 있고, CI는 통과합니다. 그 앞에서 실패한 검사는 없습니다.
• 같은 스크립트를 checkAlertSound와 checkUpdateNotice 두 호출만 뺀 임시 사본(커밋하지 않음)으로 다시 실행: PASS 64개, 종료 코드 0. 1920 창에서 레인이 960px, 1280 창에서 820px인 기존 검사가 여기에 들어 있고 그대로 통과합니다(검사 값은 바꾸지 않았고 주석만 고쳤습니다).
• 레인 폭에 기대는 데모 스크립트: composer-fit-demo-regression(8), held-rows-demo-regression(10), prompt-dock-demo-regression(22), chat-greeting-demo-regression(10) 모두 통과.
• 단위 테스트(src/lib/settings.test.ts): 루트 13, 14, 16, 17.6, 20, 24px에서 Default가 820px 이상 72rem 이하인지, 쓸 수 없는 루트 값(0, 음수, NaN, Infinity)이 16px로 처리되는지, chatLaneLength가 쓰는 문자열 형태, 그리고 그 길이가 각 루트에서 chatLaneWidth와 같은 값으로 계산되는지. 16px 기대값은 그대로입니다.
• 빌더가 데모 전송 계층에 올린 실제 클라이언트를 Chrome에서 측정했습니다. 열린 페이지에서 pane 크기를 바꾸지 않고 루트 글꼴만 바꿨습니다: 2200x900 다크(pane 1880px)에서 16px 960 → 13px 820 → 20px 1200 → 16px 960, 1440x900 라이트에서 세 크기 모두 820, 390x844 터치에서 세 크기 모두 366. 대화 열과 입력 카드 폭이 모든 상태에서 같았고 가로 스크롤과 페이지 오류는 없었습니다.

하지 않은 것: test:integration, 계약 테스트, chat-history-browser-qa, file-viewer-regression, keyboard-viewport-regression, file-viewer-mobile-regression, droplet-demo-regression은 실행하지 않았습니다(CI가 실행합니다). Chrome 외 브라우저는 확인하지 않았습니다. 이번 단계에서 스크린샷을 새로 찍지 않았습니다.

Codex 적대적 리뷰: 작은 조각이라 실행하지 않았습니다. 자체 리뷰에서 막는 지적은 없었습니다.

열린 외부 PR과의 충돌

#436, #409, #438, #441, #421은 살펴보지 않았습니다. 이 PR은 settings.ts의 채팅 레인 함수, PaneTerminal.tsx의 effect 하나, 주석, DESIGN.md, CHANGELOG.md만 건드립니다. 겹칠 만한 곳은 CHANGELOG.md의 Unreleased → Fixed입니다.

🤖 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: 21bda1b1-3c85-4b5e-a743-c15eb2f31a5a

📥 Commits

Reviewing files that changed from the base of the PR and between 7568745 and 441db55.

📒 Files selected for processing (3)

• CHANGELOG.md
• scripts/ui-regression.ts
• src/components/PaneTerminal.tsx

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

• CHANGELOG.md
• scripts/ui-regression.ts

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

---

📝 Summary

Summary by CodeRabbit

• Bug Fixes
  • Default chat width now scales with the browser’s font size, up to 60rem (960px at a 16px root size or 1200px at 20px) when space allows.
  • The chat lane follows the available pane width, stays at least 820px wide, and is capped by the Wide layout limit. If the rem-based maximum falls below 820px, the minimum width takes precedence.

Walkthrough

The default chat lane now uses a pane-relative CSS length with an 820px floor and a 60rem ceiling. Numeric width resolution accepts a root font size. PaneTerminal writes the CSS length for the default width.

Changes

Default chat lane sizing

Layer / File(s)	Summary
Define and test lane sizing src/lib/settings.ts, src/lib/settings.test.ts	The settings helpers generate a CSS length and resolve the lane width using the 820px floor, 60rem ceiling, and pane-derived value. Tests cover root sizes, invalid inputs, and the resulting bounds.
Apply and describe the lane src/components/PaneTerminal.tsx, DESIGN.md, src/styles.css, scripts/ui-regression.ts, CHANGELOG.md	PaneTerminal writes the generated CSS length to --chat-w for the default width. Documentation, comments, and the changelog describe the sizing rule.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Bug fix

Suggested reviewers: haeminway1

Merge Risk: ⚪ Minimal · up to 441db

Default chat width now uses a pane-relative share with an 820px floor and a font-scaled ceiling; the transcript remains constrained to available width. No material merge-blocking risk is evident.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title identifies the main change: Default chat’s width ceiling now uses 60rem. Its claim about never exceeding Wide is broader than the documented behavior, which has an exception below an 11.39px…
Description check	✅ Passed	The description includes both required sections. It explains the change and reports extensive validation results. It notes that no screenshot or recording was included, although the template requests …
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 4 files. (1 skipped: 1 u…
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.

✨ Finishing Touches

📝 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.}