feat : 에이전트가 무엇을 정했고 어디까지 왔는지 보여준다

[dldnsgkr]

BE PR #308 이 새로 내려주는 두 가지를 화면에 붙입니다. 전부 추가 필드라 이 PR 없이도 기존 동작은 그대로입니다.

사용자가 dev e2e 중에 제기한 두 가지가 출발점입니다.
① "스택 선택했는데 뭘 골랐는지 UI에서 안 보인다"
② "비동기로 돈다는데 진행 중인지 오류인지 알 수가 없다"

① 선택 결과 카드

되묻기 폼은 답한 순간 사라집니다 — 서버가 clarification 을 null 로 만들어 이중 제출을 막기 때문입니다. 그 동작은 그대로 뒀습니다. 되살리면 폼이 다시 떠서 두 번 보낼 창이 열립니다. 대신 서버가 따로 남기기 시작한 답변 시점 스냅샷(answeredClarification)을 읽기 전용 카드로 세웁니다.

고른 것만이 아니라 선택지 전부를 그립니다. "왜 저걸로 만들었지"에 답하는 것은 무엇 중에서 골랐는지라서요. 색도 답하는 폼(보라)과 다르게 잡았습니다 — 같은 색이면 아직 눌러야 할 것처럼 읽힙니다.

답 매칭은 ", " 를 구분자째로 찾습니다. label 안에 쉼표가 있어도("Node, Express") 경계가 안 어긋납니다. 어느 선택지와도 안 맞은 조각은 "기타 — 직접 적기"로 보고 따로 그립니다.

구조화 질문이 아닌 되묻기(저장소 이름 등)는 카드를 안 그립니다. 답 문장은 이미 대화에 남아 있어서, 질문과 나머지 선택지가 없으면 같은 문장을 두 번 보여줄 뿐입니다.

② 진행 단계

이벤트에 실려 오는 stepIndex / stepTotal / agentType 으로 진행을 그립니다. CODE 스텝이 도는 2~3분 동안 화면에 아무 변화가 없었고, 그 침묵이 "멈춘 건가 오류인가"로 읽혔습니다.

• 단계 막대 — stepTotal 만큼 칸을 쪼개 지난 칸은 채우고 현재 칸은 맥박. 채운 비율 하나보다 "2단계 중 1단계"가 빨리 읽히고, 서버가 단계 수를 바꿔도 계산이 안 어긋납니다.
• 마지막 줄의 맥박과 경과 시간 — 10초 넘게 조용하면 "2분 14초째"가 붙습니다. 경과는 createdAt 이 아니라 화면에 뜬 시각부터 셉니다. 서버 시각에 오프셋이 없어 브라우저 시계와 빼면 시차만큼 틀어집니다.
• 실패는 status == FAILED 로만 판정 — type 으로 분기하지 않습니다. 종류가 계속 늘기로 되어 있어서, 모르는 type 은 그냥 한 줄로 그리고 지나갑니다.
• agentType 은 아이콘으로만 씁니다. message 가 이미 "코드를 만들고 있습니다"라고 말하는데 "코드" 칩을 또 붙일 이유가 없습니다. 모르는 값은 조용히 점으로 떨어집니다.

③ 줄의 종류 (BE #310)

대화 메시지에 붙는 kind 를 씁니다. 지금까지 어시스턴트 줄은 전부 같은 색이라 "배포가 실패했습니다" 와 "모든 승인이 완료되어 작업을 시작합니다" 가 같은 무게로 읽혔습니다 — 실패를 찾으려면 대화를 전부 읽어야 했습니다.

kind	무게
AGENT_RESULT · APPROVAL_REQUESTED · INPUT_REQUIRED	기본
TASK_PROGRESS · TASK_CANCELLED · CLARIFICATION_ANSWER	흐리게
TASK_FAILED	빨강 (배경까지)
모르는 값 · null	기본

본문으로 종류를 짐작하지 않습니다. 이 파일에는 그렇게 하다 난 사고가 주석으로 남아 있습니다 — 본문에 '승인 후 실행'과 '[숫자]'가 있으면 승인 버튼을 붙였다가, 모델이 그 문장을 지어내자 존재하지 않는 버튼이 떴습니다. 종류는 서버가 알려주는 것만 믿습니다.

모르는 값이 기본으로 떨어지는 게 중요합니다. 종류는 계속 늘기로 되어 있어서 표에 빠진 것이 버그가 되면 안 됩니다. 사용자 메시지와 이 필드 이전에 쌓인 줄은 null 로 오고 지금까지와 똑같이 그려집니다.

되묻기 답변 줄(CLARIFICATION_ANSWER)은 ①의 카드가 떠 있는 동안 접습니다. 둘이 같은 답을 말하는데 카드가 훨씬 많은 것을 보여줍니다. 카드는 태스크가 살아 있는 동안만이고 새로고침하면 사라지므로 영구 기록은 이 줄 쪽입니다 — 그래서 지우는 게 아니라 카드가 있을 때만 감춥니다.

짝을 taskId 로 맞추려 했지만 서버가 메시지에 taskId 를 안 실어 줍니다(dev 응답 확인 결과 전부 null). 그래서 마지막 것 하나만 고릅니다 — 카드는 늘 가장 최근 태스크의 것이므로 그 짝도 가장 최근 답변 줄이고, 앞선 되묻기의 기록은 그대로 남습니다.

곁들여 고친 것

되묻기 답변의 낙관적 말풍선을 뺐습니다. 서버가 답을 대화에 남기기 시작했는데(BE #305) 문구도 role 도 달라 병합에 안 걸려서, 같은 답이 두 줄로 보였습니다. 서술은 서버 하나가 소유한다는 이 파일의 규칙을 그대로 따릅니다.

대신 답이 닿는 즉시 대화를 다시 읽습니다. 메시지 목록이 기본 15초 주기라, 그냥 빼기만 하면 답한 뒤 최대 15초 동안 자기가 뭘 보냈는지 화면에서 사라집니다. POST /tasks/{id}/input 이 204를 돌려줄 때 채팅 메시지가 이미 커밋돼 있다는 것은 BE 쪽에서 확인받았습니다.

승인 요약을 break-all → break-words. BE #307 로 이 자리가 사용자 언어 문장이 되지만 폴백으로 영어가 올 수 있고, break-all 이면 단어 중간에서 잘립니다.

확인

dev 서버(project 48)에 붙여 실데이터로 확인했습니다.

• 단계 막대("1/1 단계")·CODE 아이콘·맥박·경과 타이머 전부 정상
• 승인 카드가 한국어 요약으로 옴 — "할 일 목록 제목을 '오늘의 할 일'로 변경합니다"
• RESULT 승인의 영어 폴백 문장도 단어 경계에서 접힘 (레이아웃 안 깨짐)
• 되묻기 답변 줄 중복 없음 — 스크롤백에 한 줄만
• 새 스키마 필드로 인한 파싱 오류 0건
• kind 로 무게가 갈리는 것 확인 — TASK_PROGRESS("모든 승인이 완료되어 작업을 시작합니다")는 흐리게, APPROVAL_REQUESTED는 기본으로 렌더됨
• kind: null 인 예전 메시지는 그대로 (회귀 없음)
• typecheck · lint · build 통과

확인 못 한 것 둘. 하나는 TASK_FAILED 의 빨간 모양 — 아직 그 종류를 단 메시지가 대화에 없어서 실데이터로 못 봤고, 빌드된 CSS 로 정적 렌더해 확인했습니다(같은 표 조회를 타는 경로입니다). 다른 하나는 이벤트가 SSE 로 왔는지 5초 폴백으로 왔는지. 브라우저 네트워크 추적이 불안정해 구분 못 했습니다. 둘 중 어느 쪽이든 이 PR 의 코드는 같은 경로로 동작합니다 — 폴백은 원래 설계된 길이고 같은 타임라인을 그립니다.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Bm33kdXdUqEVChCeE2h7ZD