v0.1.50

v0.1.50 — 캐릭터 손/팔 뻗는 모션 + action 별 색상 trail + 세션 trajectory

요청

• "데이터 흐름 입자, 새로 파일 생성, 마운트 등의 AI 에이전트나 사용자 작업이 될때, 캐릭터 아바타로부터 손과 팔을 뻗어서 생성이나 데이터 전송하는 모션을 구현, 일정 세션동안 궤적이 남도록 (올바른 방향으로 진행)"

변경 파일

• src/components/Avatars/AgentAvatars2D.tsx

`colorForAction(action, fallbackHue)`

• 신규 — action 별 색상 매핑:
• read → cyan (#5BC8C2)
• edit / write → amber (#F59E0B)
• create → green (#3DDC84)
• delete → red (#FF4D6D)
• bash → yellow (#FFD66B) — mount / install / build 포함
• note → gray / task → purple
• browse / search → sky / think / answer → pink

Trail segment 데이터 구조 강화

• 기존: 모든 segment 가 agent hue 색상
• 신규: 각 segment 의 dst.action 으로 색상 결정 (사용자가 색만 보고 어떤 작업이 진행됐는지 추적 가능)
• TrailPoint 에 action + at 보관 → segment 별 색상 + age 기반 fade

TTL 30초

• — 너무 오래된 segment 는 skip. age ratio 로 opacity 0.95 → 0.14 자연 페이드.

손/팔 뻗는 모션

• (가장 최근 segment, age < 700ms):
• CSS keyframe vw-arm-reach — stroke-dasharray: 800 + stroke-dashoffset: 800 → 0 으로 path 가 source → target 방향으로 **그려지는** 효과.
• 추가 drop-shadow filter 로 글로우 효과.
• cubic-bezier(0.34, 1.2, 0.64, 1) — 살짝 overshoot 하는 자연스러운 모션.

도착점 burst 효과

• (create/write/bash action 후 800ms):
• CSS keyframe vw-action-burst — radius 2 → 22, opacity 0.9 → 0 확장 페이드.

stable key

• — segment / dot 의 key 를 ${instanceKey}::seg::${at} 로 안정화 → 같은 event 면 React 가 element 재사용, 새 event 일 때만 애니메이션 재시작.

검증

• npx tsc --noEmit exit=0. npm run build 성공 — out/renderer/index-4knILfG5.js 3,081.04kB.

📦 GitHub 릴리스 노트: v0.1.50