[devswha]

Change

승인하신 채팅 모드 재설계(목업 mockups/chat-mode)의 조각 하나입니다. 앞선 조각은 #456 ~ #466으로 머지되었습니다. 이번 세 번째 묶음은 모델 표시(pill)와 이 PR, 곧 입력 카드 위에 붙는 승인 카드입니다. 마지막 묶음은 글자 크기 체계와 글꼴입니다.

이 PR은 목업 규칙 D1(approval dock)과 D2(waiting head)를 옮깁니다(variants/d.css, d.js).

토론 판정 R1-D3(카드는 대화 안에 둔다)를 뒤집습니다. 2026-10-05에 승인하신 내용이며 첫 커밋 본문에도 적었습니다.

사용자가 보는 것

• 에이전트의 질문, 승인, 계획 카드가 대화 끝에 붙어 있지 않고 입력 카드 바로 위, 같은 열에 놓입니다. 위에서부터 대화, 보류 메시지(한 줄로 접힘), 승인 카드, 입력 카드 순서입니다. 대화는 카드 뒤에서 자유롭게 스크롤됩니다.
• 카드는 그림자가 없고 --border-strong 테두리에 --bg-elevated 바탕입니다. 빨간색은 제목 하나뿐입니다. "INPUT NEEDED" 배지는 그리지 않지만 스크린 리더는 읽습니다.
• 선택지는 숫자 키캡이 붙은 납작한 줄이며 무게가 모두 같습니다. 키캡에는 숫자만 그리고, 접근성 이름은 "1. Yes"를 유지합니다.
• 카드 높이는 앱 높이의 60%와 240px(터치 줄 여섯 개) 중 큰 값까지입니다. 줄어드는 것은 참고 텍스트(코드 상자)뿐이고(여섯 줄, 최소 두 줄), 그래도 넘치면 카드 전체가 스크롤되며 Confirm은 항상 보입니다.
• 메시지 상자의 안내는 "Type 1–3 to choose…" 또는 "Type 1–3 or your own reply…"입니다. 폰에서 잘리던 "Answer above:"를 뺐습니다.
• 에이전트가 사용자를 기다리는 동안 열린 작업 블록은 "Working…" 대신 "Needs you"로 읽히고, 빨간 점은 움직이지 않습니다. pane 상태(blocked)로 판단합니다.
• 답하는 방법은 그대로입니다. 선택지를 누르거나, 숫자를 입력하고 Confirm을 누르거나, 직접 답을 씁니다. 빈 상자에서 Enter는 아무것도 보내지 않습니다. 답 경로(POST /api/pane/prompt/answer)와 HTTP/WS 계약은 바뀌지 않습니다.

구현

PaneTerminal이 .prompt-dock 요소로 순서를 정하고, 프롬프트와 폴링, 답을 여전히 가진 ChatView가 포털로 카드를 그 안에 그립니다. 새 문구 4개는 ko, ja, zh에 모두 넣었습니다. 변경 이력은 Unreleased에 적었습니다.

목업과 다른 점

• 카드는 목업처럼 .composer의 자식이 아니라, 그 앞 형제인 .prompt-dock 안에 있습니다(보류 목록과 같은 방식). dock이 포털 대상이자 aria-live="polite" 영역이고, 카드는 "Message composer" 그룹 밖에 남습니다. 새 카드가 읽히도록 dock은 비어 있을 때도 높이 0으로 렌더링됩니다.
• is-command 클래스와 질문의 고정폭 상자는 만들지 않았습니다. 서버 파서(Codex, omp, Claude 승인)가 이미 명령을 body에 넣고, 그것이 카드의 고정폭 상자입니다. pi의 confirm은 메시지를 question에 넣지만 명령임을 알리는 신호가 없습니다. 데모 fixture는 Codex의 실제 형태(title = question, body = 명령)로 바꿨습니다.
• 카드와 입력 카드 사이 간격은 목업의 --space-2가 아니라 --composer-grip-h(12px, 터치 20px)입니다. 보류 목록 아래와 같은 크기 조절 손잡이 영역을 그대로 둡니다.
• 열 너비는 목업의 --content-w가 아니라 #463의 --chat-w입니다.
• 한 줄짜리 참고 텍스트는 두 줄이 아니라 한 줄까지 줄어듭니다. 본문 페이드 띠는 --space-3이 아니라 --space-2입니다.
• 카드 글자는 대화 안에 있을 때처럼 설정의 Chat font size와 Chat font를 따릅니다(본문, 키캡, 단계 표시는 고정폭 유지). 목업에는 이 설정이 없습니다. 높이 상한은 글자 크기에 따라 커지지 않습니다.
• .terminal-stack.is-chat > .terminal-surface { overflow: hidden }을 추가했습니다. 390x500에서 대화 스크롤 영역이 카드 윗부분을 덮어 그렸기 때문입니다.
• 새 동작: 카드에서 답을 누른 뒤 포커스가 메시지 상자로 갑니다. 정밀 포인터에서만, 그리고 답이 돌아왔을 때 카드가 아직 있고 포커스가 카드 안이나 페이지 본문에 있을 때만 옮깁니다(focusFollowsAnswer).
• 새 동작: 폰 키보드가 올라와 있을 때 카드의 글자를 탭하거나, 카드가 맨 위에 있을 때 아래로 끌면 키보드가 내려갑니다(dismissKeyboardOn의 atTopOnly). 버튼, 라벨, 입력란은 예외입니다.
• 과제는 안내 문구 두 개를 지목했지만, 프롬프트 안내 네 개 모두에서 "Answer above:"를 뺐습니다.

리뷰하실 때 볼 곳

• 판정이 필요한 것: 60% 상한과 본문 두 줄 하한에서 나오는 결과입니다. 800x600에서 긴 폼에 숫자를 입력하면 대화는 64px(반쯤 흐려진 한 줄)만 남습니다. 390x500에서 숫자를 입력하면 Confirm이 두 줄로 접히고 선택지는 좁은 틈으로 보입니다. 390x500에 채팅 글자 24px이면 질문과 고정된 Confirm이 카드를 채우고 선택지는 스크롤해야 보입니다. 상한을 바꾸지 않으면 고칠 수 없어 그대로 두었고, 새 스크립트의 대화 높이 하한은 48px입니다.
• overflow: hidden은 공용 요소(.terminal-surface)에 채팅 렌즈일 때만 거는 새 클립입니다. 인사말과 보류 줄 회귀는 통과합니다.
• dock은 항상 렌더링되는 polite 라이브 영역이라 카드 안의 변화("Submit (2)", 오류)도 읽힙니다. 실제 스크린 리더로는 확인하지 못했습니다.
• 배지를 숨기고 #456에서 상태 줄의 INPUT도 숨겼으므로, 작업 블록이 없는 blocked pane은 채팅 안에서 카드와 사이드바의 INPUT만으로 상태를 알립니다.
• 스크린샷 한 장(긴 폼, 1440x900, 채팅 글자 24px, Confirm 고정)에서 카드 아래 모서리에 불투명하지 않은 픽셀 32개가 있었습니다. 원인을 찾지 못했고 다른 화면에서는 나오지 않았습니다.
• .prompt-card가 .chat-view 안에 있다고 가정하는 외부 스크립트나 PR은 깨집니다. 저장소 안의 scripts/film, scripts/readme-media, site/demo는 선택자가 그대로 맞습니다.
• docs/guide.md의 media/look-prompt.png와 site/index.html의 정적 목업은 예전 카드를 보여 줍니다. 릴리스 때 다시 찍어야 합니다. 바뀐 fixture가 이미 새 모습을 만듭니다.
• "Confirm your answer in the card above, or type another…"는 390px과, 사이드바가 열린 800px에서 여전히 두 줄입니다. 범위 밖이라 두었습니다.
• 대기 중인(queued) Codex 질문은 제목이 빨갛지만 작업 블록은 "Working…"으로 남습니다. 목업대로입니다.

열려 있는 외부 PR과의 충돌

#436(Composer.css, PaneTerminal.tsx), #409와 #438(ChatView.tsx, ChatView.css, PromptCard)과 충돌이 예상됩니다. #441과 #421(사이드바)은 겹치지 않을 것으로 봅니다.

Validation

검증 환경: Linux, herdr 0.9.3, Bun 1.4.2, Chrome(/usr/bin/google-chrome). origin/main은 #466(9153e60)이며 브랜치가 그 위에 있어 병합할 것이 없었습니다.

• bun run typecheck: 통과
• bun run test:unit: 1,272건 통과, 4건 건너뜀, 실패 없음(116개 파일)
• bun run build: 통과
• bun run test:ui(별도 세션 herdr-web-ui-test) 1회: PASS 36개 뒤 checkAlertSound의 .droplet-card 대기(scripts/alert-sound-regression.ts:79)에서 30초 타임아웃으로 종료 코드 1. 이 장비에서는 origin/main에서도 전체 순서로 돌릴 때 여기서 실패하는 것으로 알려져 있으며(CI는 통과), 이번에 main에서 다시 확인하지는 않았습니다. 그 앞에서 실패한 검사는 없습니다.
• 그래서 checkAlertSound와 checkUpdateNotice 두 호출만 뺀 ui-regression.ts 임시 사본(커밋하지 않고 지움)으로 나머지를 돌렸습니다: PASS 64개, 종료 코드 0. 카드가 .chat-view 밖에 있고 dock의 다음 형제가 .composer이며 카드가 입력 카드 위에서 끝나는지 보는 새 단언이 들어간 "startup prompt appears and accepts an answer while the agent status is idle"을 포함합니다.
• herdr가 필요한 다른 스크립트: chat-browser-qa.ts PASS 7개, file-viewer-regression.ts PASS 6개, directory-groups-regression.ts PASS 7개. 모두 종료 코드 0.
• herdr 없이 도는 스크립트(모두 종료 코드 0): prompt-dock-demo-regression.ts(이 PR의 새 스크립트, ci-browser.sh에 등록) PASS 15개, held-rows-demo-regression.ts 10개, composer-fit-demo-regression.ts 5개, chat-greeting-demo-regression.ts 10개, droplet-demo-regression.ts 5개, keyboard-viewport-demo-regression.ts 1개, keyboard-viewport-regression.ts 1개, chat-history-browser-qa.ts 5개, skill-activity-browser-qa.ts 2개, file-viewer-mobile-regression.ts 16개, pi-image-browser-qa.ts("browser OK" 한 줄).

고친 테스트: promptAnswer.test.ts(안내 문구 기대값, focusFollowsAnswer), keyboard.test.ts(atTopOnly, scrolledDown), workBlocks.test.ts(isWaitingWorkTurn), ui-regression.ts(카드 위치 단언). 지우거나 느슨하게 한 테스트는 없습니다.

Codex 적대적 리뷰(gpt-6.1-sol, xhigh, 읽기 전용): 지적 4건(빈 라이브 영역이 숨겨짐, 채팅 글자 설정을 잃음, 늦은 답이 포커스를 가져감, 카드의 overscroll)을 모두 확인했고, 별도 리뷰에서 나온 폰 키보드 내리기 1건과 함께 202e9da에서 고쳤습니다.

확인하지 못한 것

• 실제 iPhone/Android 기기. 키보드 내리기 검사는 합성 클릭/터치 이벤트와 가짜 navigator.virtualKeyboard를 씁니다.
• 실제 스크린 리더.
• 다중 선택, 대기 중인 Codex, fallback 메뉴, 보기 전용 pane의 카드를 그려 본 것. 같은 컴포넌트와 CSS를 씁니다.
• bun run test:integration과 *.contract.test.ts. 서버와 계약은 건드리지 않았습니다.
• 전체 순서 안의 checkAlertSound, checkUpdateNotice(위 설명).

PR을 연 뒤의 변경

리뷰에서 나온 Medium 네 건과 문서 한 건을 고쳤고, 그 사이 움직인 main을 merge로 합쳤습니다(rebase, force push 없음).

• 85a2cc2: 늦게 돌아온 답이 다음 프롬프트를 지우지 않습니다. 프롬프트가 나타날 때마다 카드를 새로 만들고(id는 내용 해시라서 id가 아니라 폴링이 유지하는 프롬프트 객체로 구분합니다), 사라진 카드의 답은 아무것도 바꾸지 않습니다. 채팅은 그 카드의 프롬프트만 지우고, 입력해 둔 선택은 pane과 프롬프트가 맞을 때만 지웁니다. 새 카드는 맨 위에서 열리므로 이전 카드의 스크롤 위치도 남지 않습니다.
• c529e0e: Confirm 줄의 질문은 최대 두 줄만 보이고 그 안에서 스크롤됩니다. Confirm과 Cancel은 항상 한 줄에 함께 있습니다. 2,166자 라벨, 390x500, 채팅 글자 24px에서도 옵션이 가려지지 않습니다.
• e5615f0: 답한 뒤 메시지 입력란으로 포커스를 넘길지는 누른 방식으로 정합니다. 탭(터치, 펜)이면 넘기지 않고, 키보드와 마우스일 때만 넘깁니다. 클릭에 pointerType이 없는 브라우저를 위해 기존의 (pointer: coarse) 확인도 그대로 두었습니다. 그래서 coarse 포인터 기기에서는 마우스로 눌러도 이전처럼 포커스가 넘어가지 않습니다. Composer의 Queue는 touch만 보지만 여기서는 pen도 탭으로 봅니다.
• 9890fe8: DESIGN.md가 입력 상자를 유일한 카드라고 하던 문장을 고쳤고, 위 동작을 적었습니다. 데모 회귀 스크립트의 프롬프트를 pane별로 나누고, 늦은 답(같은 pane, pane 전환), 교체된 카드의 스크롤, 긴 라벨, 한 줄 버튼, 탭 케이스를 추가했습니다. 추가한 단언은 모두 고치기 전 코드에서 실패하는 것을 확인했습니다.
• 256e95d: origin/main(feat(chat): the model and the level in one quiet pill, with a readable name where the id has one #467) merge.

확인하지 못한 것:

• 터치스크린 노트북은 흉내 낸 것입니다. Chromium은 터치가 있는 컨텍스트를 항상 coarse로 보고하므로 스크립트가 그 질의의 matchMedia만 바꿉니다. 실제 기기에서는 보지 않았습니다.
• 카드를 새로 만든 뒤의 라이브 영역은 DOM으로만 확인했습니다(polite 영역 안에 카드 하나가 추가됨). 스크린 리더로 들어 보지는 않았습니다.
• 같은 내용의 프롬프트가 폴링 한 번 사이에 연달아 나오면 id와 객체가 같아 구분할 수 없습니다. 서버 쪽 문제로 따로 등록되어 있고 여기서는 건드리지 않았습니다.
• 중간 커밋 c529e0e, e5615f0은 따로 typecheck하지 않았습니다. 85a2cc2의 스테이징 상태와 최종 head에서만 돌렸습니다.
• bun run test:ui, test:integration, contract 테스트는 돌리지 않았습니다.

🤖 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: dd480018-0c65-4354-828f-a5e083b5ef7b

📥 Commits

Reviewing files that changed from the base of the PR and between be5ec0f and 256e95d.

📒 Files selected for processing (11)

• CHANGELOG.md
• DESIGN.md
• scripts/prompt-dock-demo-regression.ts
• src/AGENTS.md
• src/components/ChatView.tsx
• src/components/Composer.css
• src/components/PaneTerminal.tsx
• src/components/PromptCard.css
• src/components/PromptCard.tsx
• src/lib/promptAnswer.test.ts
• src/lib/promptAnswer.ts

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

• src/AGENTS.md
• CHANGELOG.md
• src/components/Composer.css

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
  • Approval, question, and plan cards now appear above the message box, separate from chat history.
  • On phones, tapping or dragging a prompt card can dismiss the keyboard without losing a draft.
• Improvements
  • Prompt cards have bounded scrolling, more compact options, clearer waiting indicators, and updated focus behavior after answering.
  • Answer placeholders use more direct wording, including in Japanese, Korean, and Chinese.
  • Blocked agents are labeled “Needs you.”

Walkthrough

The chat prompt card now renders in a dock above the composer and outside the transcript. The update changes card layout, answer focus, phone keyboard dismissal, and blocked-work status display. It also adds browser regression checks and updates prompt translations.

Changes

Chat prompt dock and interactions

Layer / File(s)	Summary
Dock integration and placement src/components/PaneTerminal.tsx, src/components/ChatView.tsx, src/components/Composer.css, src/components/PaneTerminal.css, DESIGN.md, src/AGENTS.md	PaneTerminal provides a polite live-region dock above the composer. ChatView portals the prompt card into it. Composer spacing accounts for the dock and held messages.
Prompt card layout and answer handling src/components/PromptCard.css, src/components/PromptCard.tsx, src/lib/promptAnswer.ts, src/lib/promptAnswer.test.ts, src/lib/i18n.*.ts, CHANGELOG.md	The card has bounded scrolling, sticky fades, and a persistent confirmation row. Option rows and number markers use updated styling. Answer completion is scoped to the current card, with focus restoration for eligible answers. Prompt placeholders no longer use the “Answer above:” prefix.
Phone keyboard dismissal src/components/PromptCard.tsx, src/lib/keyboard.ts, src/lib/keyboard.test.ts, DESIGN.md	Touch dismissal checks whether the card or touched reference text can still scroll upward. Tests cover the card at its top and scrolled content.
Blocked work waiting state src/components/ChatView.tsx, src/components/ChatView.css, src/lib/workBlocks.ts, src/lib/workBlocks.test.ts, DESIGN.md	A live turn with blocked status displays “Needs you” and waiting styles. The predicate tests cover blocked and non-blocked statuses.
Regression coverage and documentation scripts/prompt-dock-demo-regression.ts, scripts/ui-regression.ts, scripts/ci-browser.sh, docs/development.md, site/demo/fixtures.ts	The browser regression harness checks dock placement, card layout, answer behavior, pane isolation, and phone interactions. Browser CI runs the harness, and the development guide documents the command.

Priority: ⬇️ Low

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

Change: Feature

Suggested reviewers: yoonwoo-ha, haeminway1

Merge Risk: ⚪ Minimal · up to 256e9

Prompt cards now appear in a dock above the message box. Their layout, focus, and phone keyboard behavior are updated, and the answer API is unchanged. No concrete defects were found in the change. Mergeability depends mainly on browser CI passing, including the new prompt-dock regression check.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to 256e9

The change rearranges approval controls and tightens delayed-response isolation. The reviewed behavior does not introduce new privileges, weaken approval checks, or broaden access.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The reviewed change retains the existing pane-targeted answer capability. Moving the card does not add a production endpoint or broaden the authority of the terminal-input path.

Trust Boundaries and Controls

• observed — Externally supplied title, question, body, and option labels are rendered as React text. Option indices or custom text still pass through the existing answer API and server-side validation before reaching pane input.

Resilience and Maintainability Implications

• observed — Pane-keyed ChatView instances and prompt-occurrence ownership isolate stale completions. Failed card answers preserve the visible prompt with an error; late unmounted-card responses are ignored. Focus restoration changes focus only and does not submit another answer.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 78.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 14 functions across 16 files. (5 skipped:…	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 and concisely describes the main change: prompt cards now dock above the message box, outside the transcript.
Description check	✅ Passed	The description includes both required sections. It explains the problem and resulting behavior in detail, and lists validation results, failures, and untested areas.

Full details: Docstring Coverage

Explanation

Docstring coverage is 78.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 14 functions across 16 files. (5 skipped: 5 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.}