텅 빈 터미널 껍데기여 안녕! 완벽해진 타임라인 & Claude 도구 로그 구출기 🚀

⚡ 끊임없이 거슬리던 '이벤트(0)' 빈 박스를 완전히 날려버리고, 실종되었던 Claude의 도구 사용 내역까지 완벽하게 타임라인에 복구해냈습니다! 🙌

한 줄 요약

터미널 명령어나 도구 실행 후 빈 껍데기만 남던 UI를 뜯어고쳐서, 이제 진짜 실행 내역이 있을 때만 깔끔하게 보여지도록 만들었어요! 거기다 숨어있던 Claude의 도구 실행 흔적까지 전부 꺼내 시간 순서대로 렌더링되도록 심폐소생술 완료! 😎

오늘 한 일(핵심만)

• 🔍 빈 터미널 블록(이벤트 0개)이 렌더링되는 근본 원인 분석 및 가시성 개선
• ✂️ 의미 없는 공백 로그 및 내부 통신망 오류 필터링으로 껍데기 화면 원천 차단
• ⚡ Claude CLI의 stream_event 래퍼에 갇혀있던 tool_use 이벤트를 파싱 로직에서 해방시켜 화면에 노출
• ✅ 새 대화 환경에서 브라우저 자동화 도구로 'tool_use 해봐' 명령어 최종 교차 검증 통과

왜 이게 중요하냐면 (Motivation & Impact)

타임라인 교차 렌더링 도입은 훌륭했으나, 오히려 빈 터미널 껍데기가 여기저기 노출되면서 눈을 어지럽히는 시각적 공해를 유발했습니다. 게다가 가장 중요한 'Claude'가 어떤 도구를 실행하고 있는지 알 길이 없으니 답답함은 두 배! 🎯 이를 방치했다면 AI가 무엇을 하는지 추적할 수 없는 신뢰성 하락과 사용자 경험의 파국이 찾아왔을 것입니다.

문제는 이랬어요 (Issue & Debugging)

알고 보니 문제는 두 갈래였어요. 하나는 백엔드에서 내려오는 보이지 않는 에러 로그나 공백이었고, 다른 하나는 꽁꽁 싸매진 이벤트 포맷이었습니다.

특히 Claude의 도구 사용 내역은 CLI 환경 특성상 stream_event라는 큰 상자 속에 또 한 번 content_block_start 포장지로 감싸져 내려오고 있었죠. 기존 파서는 \"어? 겉상자가 stream_event네? 내가 찾는 도구가 아니구만!\" 하고 그냥 패스해버렸던 겁니다. 😭

지금은 이렇게 바뀌었어요 (Solution)

스트림 이벤트 포장지 해체 공략

에이전트 파서 곳곳에 포장지를 벗겨내는 로직을 이식했어요!

if (parsed?.type === \"stream_event\" && parsed.event) {\n  const eventObj = parsed.event as Record<string, unknown>;\n  parsed = { ...parsed, ...eventObj, type: eventObj.type };\n}

이렇게 겉포장을 시원하게 벗겨주니 내부 깊숙한 곳의 tool_use가 모습을 드러냈고, 마침내 UI가 이를 알아채고 정확한 타임라인 블록으로 그려내기 시작했습니다. 또한 빈 껍데기 UI는 actionCount === 0일 때 과감히 숨김(display: none) 처리하여 깔끔함을 되찾았죠! 🧼

오늘의 체크(가볍게)

• ✅ 빈 터미널 및 에러로 인한 UI 오염 완벽 해결
• ✅ Claude, Codex 양쪽 모두 도구 호출 타임라인 표시 검증 완료 (Browser Subagent 활용)
• ⚠️ 일부 환경에서 에이전트 권한 부족으로 간헐적 'error_during_execution'이 발생하지만 로깅 자체는 쾌조!

마무리

오늘은 '문제를 덮어두지 않고 근본 원인(래퍼 구조)을 파헤쳐 완벽한 가시성을 확보'한 것이 포인트였습니다 🔧

투명한 타임라인 교차 렌더링, 여러분의 코딩 일상에 얼마나 큰 평화를 가져다 줄 것 같나요?

#UI재구성 #AI콘솔 #가시성개선 #버그픽스