commit-ai-agent 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commit-ai-agent",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "AI-powered git commit & working status analyzer with web UI",
   "type": "module",
   "main": "src/server.js",

package/public/app.js

@@ -5,6 +5,58 @@ let selectedProject = null;
 let isAnalyzing = false;
 let analyzeMode = 'commit'; // 'commit' | 'status'
 
+// ── Aria State Machine ──
+function setAriaState(state, opts = {}) {
+  const robotWrap  = document.getElementById('aria-robot-wrap');
+  const bubbleText = document.getElementById('aria-bubble-text');
+  const typingDots = document.getElementById('aria-typing-dots');
+  const chipDot    = document.getElementById('aria-chip-dot');
+  const chipText   = document.getElementById('aria-chip-text');
+  if (!robotWrap || !bubbleText) return;
+
+  // Base state (strip -commit / -status suffix for robot/chip)
+  const baseState = state.startsWith('ready') ? 'ready' : state;
+
+  // Robot animation class
+  robotWrap.className = `aria-robot-wrap ${baseState}`;
+
+  // Header chip
+  const chipMap = {
+    idle:     { cls: 'idle',     label: 'Aria · 대기 중' },
+    ready:    { cls: 'ready',    label: 'Aria · 준비됨' },
+    thinking: { cls: 'thinking', label: 'Aria · 분석 중...' },
+    done:     { cls: 'done',     label: 'Aria · 완료' },
+    error:    { cls: 'error',    label: 'Aria · 오류' },
+  };
+  const cm = chipMap[baseState] || chipMap.idle;
+  if (chipDot) chipDot.className = `aria-chip-dot ${cm.cls}`;
+  if (chipText) chipText.textContent = cm.label;
+
+  // Bubble messages
+  const p = opts.project ? `<strong>${opts.project}</strong>` : '';
+  const msgMap = {
+    idle:           '어떤 프로젝트의 커밋을 분석해드릴까요?',
+    'ready-commit': `${p} 최근 커밋을 확인했어요. 분석을 시작할까요? 👀`,
+    'ready-status': opts.n > 0
+      ? `${p}에서 변경된 파일 <strong>${opts.n}개</strong>를 발견했어요. 리뷰해드릴까요?`
+      : `${p}에 현재 변경사항이 없어요.`,
+    thinking: '코드를 꼼꼼히 살펴보고 있어요',
+    done:     '분석 완료! 리포트를 확인해보세요. 😊',
+    error:    '앗, 문제가 발생했어요. 다시 시도해볼까요?',
+  };
+  const newMsg = msgMap[state] || msgMap.idle;
+
+  // Fade transition
+  bubbleText.style.opacity = '0';
+  bubbleText.style.transform = 'translateY(4px)';
+  setTimeout(() => {
+    bubbleText.innerHTML = newMsg;
+    if (typingDots) typingDots.style.display = state === 'thinking' ? 'inline-flex' : 'none';
+    bubbleText.style.opacity = '1';
+    bubbleText.style.transform = 'translateY(0)';
+  }, 180);
+}
+
 // ── Boot ──
 document.addEventListener('DOMContentLoaded', () => {
   init();
@@ -29,6 +81,8 @@ async function init() {
   document.getElementById('status-diff-toggle-btn').addEventListener('click', () => {
     togglePre('status-diff-content', 'status-diff-toggle-btn');
   });
+
+  setAriaState('idle');
 }
 
 // ── Config check ──
@@ -106,8 +160,10 @@ async function fetchCommitPreview() {
     if (error) throw new Error(error);
     renderCommitCard(commit);
     document.getElementById('commit-card').style.display = 'block';
+    setAriaState('ready-commit', { project: selectedProject });
   } catch (e) {
     console.warn('commit preview failed:', e.message);
+    setAriaState('ready-commit', { project: selectedProject });
   }
 }
 
@@ -119,11 +175,14 @@ async function fetchStatusPreview() {
     if (status) {
       renderStatusCard(status);
       document.getElementById('status-card').style.display = 'block';
+      setAriaState('ready-status', { project: selectedProject, n: status.totalFiles });
     } else {
       document.getElementById('selected-hint').textContent = `${selectedProject} — 변경사항 없음`;
+      setAriaState('ready-status', { project: selectedProject, n: 0 });
     }
   } catch (e) {
     console.warn('status preview failed:', e.message);
+    setAriaState('ready-status', { project: selectedProject, n: 0 });
   }
 }
 
@@ -176,6 +235,9 @@ function switchMode(mode) {
   document.getElementById('status-card').style.display = 'none';
   document.getElementById('result-card').style.display = 'none';
 
+  const btnText = document.getElementById('analyze-btn-text');
+  if (btnText) btnText.textContent = mode === 'commit' ? 'Aria에게 분석 요청' : 'Aria에게 리뷰 요청';
+
   if (!selectedProject) return;
   if (mode === 'commit') fetchCommitPreview();
   else fetchStatusPreview();
@@ -202,7 +264,8 @@ async function startAnalysis(endpoint) {
   analysisBody.innerHTML = '';
   reportSaved.textContent = '';
   document.getElementById('copy-btn').style.display = 'none'; // 분석 시작 시 숨김
-  setStatus('loading', '분석 준비 중...');
+  setStatus('loading', 'Aria가 코드를 살펴보고 있어요...');
+  setAriaState('thinking');
   analyzeBtn.disabled = true;
   btnIcon.textContent = '⏳';
 
@@ -252,19 +315,22 @@ async function startAnalysis(endpoint) {
             }
           } else if (data.type === 'done') {
             setStatus('done', '✅ 분석 완료!');
+            setAriaState('done');
             document.getElementById('copy-btn').style.display = 'inline-flex'; // 완료 시에만 표시
           } else if (data.type === 'error') {
             setStatus('error', `오류: ${data.message}`);
+            setAriaState('error');
           }
         } catch {}
       }
     }
   } catch (err) {
     setStatus('error', `네트워크 오류: ${err.message}`);
+    setAriaState('error');
   } finally {
     isAnalyzing = false;
     analyzeBtn.disabled = false;
-    btnIcon.textContent = '🔍';
+    btnIcon.textContent = '🤖';
     document.getElementById('copy-btn')._text = fullText;
     resultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
   }

package/public/index.html

@@ -37,6 +37,10 @@
             리포트
           </button>
         </nav>
+        <div class="aria-chip" id="aria-chip">
+          <span class="aria-chip-dot" id="aria-chip-dot"></span>
+          <span id="aria-chip-text">Aria · 대기 중</span>
+        </div>
       </div>
     </header>
 
@@ -44,6 +48,59 @@
     <main class="main">
       <!-- ── Tab: Analyze ── -->
       <section class="tab-content active" id="tab-analyze">
+
+        <!-- ── Aria Hero ── -->
+        <div class="aria-hero">
+          <div class="aria-robot-wrap idle" id="aria-robot-wrap">
+            <svg class="aria-robot" viewBox="0 0 90 115" width="90" height="115" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient id="rg-head" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#6366f1"/>
+                  <stop offset="100%" stop-color="#22d3ee"/>
+                </linearGradient>
+                <linearGradient id="rg-body" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stop-color="#4f46e5"/>
+                  <stop offset="100%" stop-color="#0e7490"/>
+                </linearGradient>
+              </defs>
+              <!-- Antenna -->
+              <line x1="45" y1="7" x2="45" y2="20" stroke="#818cf8" stroke-width="2.5" stroke-linecap="round"/>
+              <circle class="aria-antenna-dot" cx="45" cy="5" r="5" fill="#818cf8"/>
+              <!-- Ears -->
+              <rect x="1" y="34" width="9" height="18" rx="4.5" fill="#4f46e5"/>
+              <rect x="80" y="34" width="9" height="18" rx="4.5" fill="#4f46e5"/>
+              <!-- Head -->
+              <rect x="9" y="18" width="72" height="62" rx="20" fill="url(#rg-head)"/>
+              <!-- Eyes white -->
+              <circle cx="30" cy="48" r="13" fill="white" opacity="0.92"/>
+              <circle cx="60" cy="48" r="13" fill="white" opacity="0.92"/>
+              <!-- Pupils -->
+              <circle cx="32" cy="49" r="7.5" fill="#1e1b4b"/>
+              <circle cx="62" cy="49" r="7.5" fill="#1e1b4b"/>
+              <!-- Eye shine -->
+              <circle cx="35" cy="45" r="2.5" fill="white"/>
+              <circle cx="65" cy="45" r="2.5" fill="white"/>
+              <!-- Smile -->
+              <path d="M 32 63 Q 45 73 58 63" stroke="white" stroke-width="2.8" fill="none" stroke-linecap="round"/>
+              <!-- Body -->
+              <rect x="20" y="84" width="50" height="28" rx="12" fill="url(#rg-body)"/>
+              <!-- Body buttons -->
+              <circle cx="34" cy="98" r="5" fill="rgba(255,255,255,0.35)"/>
+              <circle cx="45" cy="98" r="5" fill="rgba(255,255,255,0.35)"/>
+              <circle cx="56" cy="98" r="5" fill="rgba(255,255,255,0.35)"/>
+            </svg>
+          </div>
+          <div class="aria-bubble-wrap">
+            <div class="aria-bubble">
+              <span class="aria-bubble-text" id="aria-bubble-text">어떤 프로젝트의 커밋을 분석해드릴까요?</span>
+              <span class="aria-typing-dots" id="aria-typing-dots" style="display:none">
+                <span></span><span></span><span></span>
+              </span>
+            </div>
+            <div class="aria-name-badge">Aria</div>
+          </div>
+        </div>
+
         <!-- API Key Warning -->
         <div class="alert alert-warn" id="api-key-warn" style="display: none">
           ⚠️ <strong>.env</strong> 파일에 <code>GEMINI_API_KEY</code>가 설정되지
@@ -80,7 +137,7 @@
               >프로젝트를 선택해 주세요</span
             >
             <button class="btn-primary" id="analyze-btn" disabled>
-              <span class="btn-icon">🔍</span> 커밋 분석하기
+              <span class="btn-icon">🤖</span> <span id="analyze-btn-text">Aria에게 분석 요청</span>
             </button>
           </div>
         </div>
@@ -118,7 +175,7 @@
         <!-- Analysis Output -->
         <div class="card result-card" id="result-card" style="display: none">
           <div class="result-header">
-            <h2 class="card-title">📝 AI 분석 결과</h2>
+            <h2 class="card-title">🤖 Aria의 분석 리포트</h2>
             <div class="result-actions">
               <button class="btn-ghost" id="copy-btn" style="display: none">
                 📋 복사

package/public/style.css

@@ -283,11 +283,122 @@ body {
 .report-item-date { font-size: 12px; color: var(--text3); font-family: 'JetBrains Mono', monospace; }
 .empty-state { color: var(--text3); font-size: 14px; text-align: center; padding: 32px; }
 
+/* ── Aria: Header Chip ── */
+.aria-chip {
+  display: flex; align-items: center; gap: 7px;
+  background: var(--bg3); border: 1px solid var(--border);
+  border-radius: 99px; padding: 5px 13px;
+  font-size: 12px; color: var(--text2);
+  margin-right: 4px; white-space: nowrap;
+}
+.aria-chip-dot {
+  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
+  background: #818cf8;
+}
+.aria-chip-dot.idle     { background: #818cf8; }
+.aria-chip-dot.ready    { background: #34d399; animation: pulse 1.2s infinite; }
+.aria-chip-dot.thinking { background: #a78bfa; animation: pulse 0.7s infinite; }
+.aria-chip-dot.done     { background: #34d399; }
+.aria-chip-dot.error    { background: #f87171; }
+
+/* ── Aria: Hero Section ── */
+.aria-hero {
+  display: flex; align-items: center; gap: 24px;
+  background: var(--bg2); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 20px 24px;
+  margin-bottom: 20px;
+}
+
+/* ── Aria: Robot ── */
+.aria-robot-wrap { flex-shrink: 0; }
+.aria-robot { display: block; }
+
+.aria-robot-wrap.idle .aria-robot,
+.aria-robot-wrap.ready .aria-robot    { animation: aria-float 3s ease-in-out infinite alternate; }
+.aria-robot-wrap.thinking .aria-robot { animation: aria-float 1.4s ease-in-out infinite alternate; }
+.aria-robot-wrap.done .aria-robot     { animation: aria-bounce 0.55s ease forwards; }
+.aria-robot-wrap.error .aria-robot    { animation: aria-shake 0.45s ease; }
+
+@keyframes aria-float  { 0%{transform:translateY(0)} 100%{transform:translateY(-8px)} }
+@keyframes aria-bounce { 0%,100%{transform:scale(1)} 45%{transform:scale(1.13)} }
+@keyframes aria-shake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
+
+/* Antenna dot by state */
+.aria-robot-wrap.idle     .aria-antenna-dot { fill: #818cf8; }
+.aria-robot-wrap.ready    .aria-antenna-dot { fill: #34d399; animation: aria-blink 1s ease-in-out infinite; }
+.aria-robot-wrap.thinking .aria-antenna-dot { fill: #a78bfa; animation: aria-glow  0.7s ease-in-out infinite; }
+.aria-robot-wrap.done     .aria-antenna-dot { fill: #34d399; }
+.aria-robot-wrap.error    .aria-antenna-dot { fill: #f87171; }
+
+@keyframes aria-blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
+@keyframes aria-glow  {
+  0%,100%{ filter: drop-shadow(0 0 3px #a78bfa); }
+  50%    { filter: drop-shadow(0 0 9px #a78bfa); }
+}
+
+/* ── Aria: Bubble ── */
+.aria-bubble-wrap {
+  flex: 1; display: flex; flex-direction: column;
+  align-items: flex-start; gap: 10px;
+}
+.aria-bubble {
+  position: relative;
+  background: var(--bg3);
+  border: 1.5px solid var(--primary);
+  border-radius: 16px; padding: 14px 18px;
+  font-size: 15px; line-height: 1.7; color: var(--text);
+  max-width: 440px;
+}
+/* Speech bubble tail — points left toward robot */
+.aria-bubble::before {
+  content: ''; position: absolute;
+  left: -11px; top: 50%; transform: translateY(-50%);
+  border: 7px solid transparent; border-right-color: var(--primary);
+}
+.aria-bubble::after {
+  content: ''; position: absolute;
+  left: -8px; top: 50%; transform: translateY(-50%);
+  border: 5.5px solid transparent; border-right-color: var(--bg3);
+}
+.aria-bubble-text { display: inline; transition: opacity 0.18s ease, transform 0.18s ease; }
+
+/* Typing dots (thinking state) */
+.aria-typing-dots {
+  display: inline-flex; gap: 3px;
+  align-items: center; margin-left: 4px; vertical-align: middle;
+}
+.aria-typing-dots span {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--primary); display: inline-block;
+  animation: aria-dot-bounce 1.2s ease-in-out infinite;
+}
+.aria-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.aria-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes aria-dot-bounce {
+  0%,80%,100%{ transform: translateY(0); opacity: 0.4; }
+  40%         { transform: translateY(-5px); opacity: 1; }
+}
+
+/* Aria name badge */
+.aria-name-badge {
+  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
+  color: var(--primary);
+  background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25);
+  padding: 2px 11px; border-radius: 99px;
+}
+
 /* ── Responsive ── */
 @media (max-width: 640px) {
   .header-inner { padding: 0 16px; }
+  .aria-chip { display: none; }       /* header chip hidden on mobile to save space */
   .main { padding: 16px 16px 48px; }
   .card { padding: 18px; }
   .card-footer { flex-direction: column; align-items: stretch; gap: 12px; }
   .commit-meta { grid-template-columns: 1fr 1fr; }
+  /* Aria hero: stack vertically */
+  .aria-hero { flex-direction: column; align-items: center; padding: 16px; gap: 14px; }
+  .aria-robot { width: 70px; height: auto; }
+  .aria-bubble { max-width: 100%; }
+  .aria-bubble::before, .aria-bubble::after { display: none; }
+  .aria-bubble-wrap { align-items: center; width: 100%; }
 }