commit-ai-agent 1.0.8 → 2.0.0

package/public/app.js

@@ -1,11 +1,10 @@
 /* global marked */
 
 // ── State ──
-let selectedProject = null;
+let selectedProject = "__self__";
 let isAnalyzing = false;
-let analyzeMode = "commit"; // 'commit' | 'status'
-let isSingleProject = false;
-let singleProjectName = "";
+let analyzeMode = "commit";
+let projectName = "";
 
 // ── Aria State Machine ──
 function setAriaState(state, opts = {}) {
@@ -37,7 +36,7 @@ function setAriaState(state, opts = {}) {
   // Bubble messages
   const p = opts.project ? `<strong>${opts.project}</strong>` : "";
   const msgMap = {
-    idle: "어떤 프로젝트의 커밋을 분석해드릴까요?",
+    idle: "분석을 시작할까요?",
     "ready-commit": `${p} 최근 커밋을 확인했어요. 분석을 시작할까요? 👀`,
     "ready-status":
       opts.n > 0
@@ -71,17 +70,15 @@ async function init() {
   setupModeToggle();
   await checkConfig();
 
-  if (isSingleProject) {
-    await enterSingleProjectMode();
+  if (analyzeMode === "commit") {
+    await fetchCommitPreview();
   } else {
-    await loadProjects();
-    setAriaState("idle");
+    await fetchStatusPreview();
   }
 
-  // wire static event listeners (elements guaranteed to exist now)
-  document
-    .getElementById("refresh-projects")
-    .addEventListener("click", loadProjects);
+  // SSE: post-commit 자동 분석 이벤트 수신
+  connectAutoAnalysisEvents();
+
   document
     .getElementById("analyze-btn")
     .addEventListener("click", onAnalyzeClick);
@@ -97,6 +94,9 @@ async function init() {
     .addEventListener("click", () => {
       togglePre("status-diff-content", "status-diff-toggle-btn");
     });
+  document
+    .getElementById("refresh-hooks")
+    .addEventListener("click", loadHookStatus);
 }
 
 // ── Config check ──
@@ -107,106 +107,12 @@ async function checkConfig() {
     if (!data.hasKey) {
       document.getElementById("api-key-warn").style.display = "flex";
     }
-    if (data.isSingleProject) {
-      isSingleProject = true;
-      singleProjectName = data.singleProjectName || "project";
-    }
+    projectName = data.projectName || "project";
   } catch {}
 }
 
-// ── Single Project Mode ──
-async function enterSingleProjectMode() {
-  // 프로젝트 선택 UI만 숨김 (모드 토글은 유지)
-  const header = document.querySelector(".selector-card .card-header");
-  const projectGrid = document.getElementById("project-grid");
-  const selectedHint = document.getElementById("selected-hint");
-  if (header) header.style.display = "none";
-  if (projectGrid) projectGrid.style.display = "none";
-  if (selectedHint) selectedHint.style.display = "none";
-
-  // 현재 디렉토리를 프로젝트로 자동 선택
-  selectedProject = "__self__";
-
-  document.getElementById("analyze-btn").disabled = false;
-  const btnText = document.getElementById("analyze-btn-text");
-  if (btnText) btnText.textContent = "Hanni에게 분석 요청";
-
-  // 현재 모드에 따라 미리 로드
-  if (analyzeMode === "commit") {
-    await fetchCommitPreview();
-  } else {
-    await fetchStatusPreview();
-  }
-}
-
-// ── Projects ──
-async function loadProjects() {
-  const grid = document.getElementById("project-grid");
-  grid.innerHTML =
-    '<div class="skeleton-grid"><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div></div>';
-  try {
-    const res = await fetch("/api/projects");
-    const { projects } = await res.json();
-    renderProjects(projects);
-  } catch (err) {
-    grid.innerHTML = `<p style="color:var(--danger);font-size:14px">프로젝트 목록을 불러오지 못했습니다: ${err.message}</p>`;
-  }
-}
-
-function renderProjects(projects) {
-  const grid = document.getElementById("project-grid");
-  if (!projects || projects.length === 0) {
-    grid.innerHTML =
-      '<p style="color:var(--text3);font-size:14px">git 프로젝트가 없습니다.</p>';
-    return;
-  }
-  grid.innerHTML = projects
-    .map(
-      (p) => `
-    <div class="project-item" data-name="${p.name}">
-      <span class="proj-icon">${getProjectIcon(p.name)}</span>
-      <span class="proj-name">${p.name}</span>
-    </div>
-  `,
-    )
-    .join("");
-  grid.querySelectorAll(".project-item").forEach((el) => {
-    el.addEventListener("click", () => selectProject(el));
-  });
-}
-
-function getProjectIcon(name) {
-  if (name.includes("next") || name.includes("react")) return "⚛️";
-  if (name.includes("nest") || name.includes("api")) return "🐉";
-  if (name.includes("hook")) return "🪝";
-  if (name.includes("portfolio")) return "🎨";
-  if (name.includes("todo")) return "✅";
-  if (name.includes("doc")) return "📚";
-  return "📁";
-}
-
-// ── Project Selection ──
-async function selectProject(el) {
-  document
-    .querySelectorAll(".project-item")
-    .forEach((e) => e.classList.remove("selected"));
-  el.classList.add("selected");
-  selectedProject = el.dataset.name;
-  document.getElementById("selected-hint").textContent =
-    `선택됨: ${selectedProject}`;
-  document.getElementById("analyze-btn").disabled = false;
-  document.getElementById("commit-card").style.display = "none";
-  document.getElementById("status-card").style.display = "none";
-
-  if (analyzeMode === "commit") {
-    await fetchCommitPreview();
-  } else {
-    await fetchStatusPreview();
-  }
-}
-
+// ── Preview loading ──
 async function fetchCommitPreview() {
-  const displayName = isSingleProject ? singleProjectName : selectedProject;
   try {
     const res = await fetch(
       `/api/projects/${encodeURIComponent(selectedProject)}/commit`,
@@ -215,15 +121,14 @@ async function fetchCommitPreview() {
     if (error) throw new Error(error);
     renderCommitCard(commit);
     document.getElementById("commit-card").style.display = "block";
-    setAriaState("ready-commit", { project: displayName });
+    setAriaState("ready-commit", { project: projectName });
   } catch (e) {
     console.warn("commit preview failed:", e.message);
-    setAriaState("ready-commit", { project: displayName });
+    setAriaState("ready-commit", { project: projectName });
   }
 }
 
 async function fetchStatusPreview() {
-  const displayName = isSingleProject ? singleProjectName : selectedProject;
   try {
     const res = await fetch(
       `/api/projects/${encodeURIComponent(selectedProject)}/status`,
@@ -234,17 +139,15 @@ async function fetchStatusPreview() {
       renderStatusCard(status);
       document.getElementById("status-card").style.display = "block";
       setAriaState("ready-status", {
-        project: displayName,
+        project: projectName,
         n: status.totalFiles,
       });
     } else {
-      const hint = document.getElementById("selected-hint");
-      if (hint) hint.textContent = `${displayName} — 변경사항 없음`;
-      setAriaState("ready-status", { project: displayName, n: 0 });
+      setAriaState("ready-status", { project: projectName, n: 0 });
     }
   } catch (e) {
     console.warn("status preview failed:", e.message);
-    setAriaState("ready-status", { project: displayName, n: 0 });
+    setAriaState("ready-status", { project: projectName, n: 0 });
   }
 }
 
@@ -318,7 +221,6 @@ function switchMode(mode) {
     btnText.textContent =
       mode === "commit" ? "Hanni에게 분석 요청" : "Hanni에게 리뷰 요청";
 
-  if (!selectedProject) return;
   if (mode === "commit") fetchCommitPreview();
   else fetchStatusPreview();
 }
@@ -331,7 +233,7 @@ function onAnalyzeClick() {
 
 // ── Generic SSE Analysis ──
 async function startAnalysis(endpoint) {
-  if (isAnalyzing || !selectedProject) return;
+  if (isAnalyzing) return;
   isAnalyzing = true;
 
   const resultCard = document.getElementById("result-card");
@@ -343,7 +245,7 @@ async function startAnalysis(endpoint) {
   resultCard.style.display = "block";
   analysisBody.innerHTML = "";
   reportSaved.textContent = "";
-  document.getElementById("copy-btn").style.display = "none"; // 분석 시작 시 숨김
+  document.getElementById("copy-btn").style.display = "none";
   setStatus("loading", "Hanni가 코드를 살펴보고 있어요...");
   setAriaState("thinking");
   analyzeBtn.disabled = true;
@@ -398,7 +300,7 @@ async function startAnalysis(endpoint) {
           } else if (data.type === "done") {
             setStatus("done", "✅ 분석 완료!");
             setAriaState("done");
-            document.getElementById("copy-btn").style.display = "inline-flex"; // 완료 시에만 표시
+            document.getElementById("copy-btn").style.display = "inline-flex";
           } else if (data.type === "error") {
             setStatus("error", `오류: ${data.message}`);
             setAriaState("error");
@@ -440,6 +342,99 @@ function onCopy() {
   });
 }
 
+// ── Auto Analysis via SSE (+ polling fallback) ──
+let autoAnalysisPollTimer = null;
+let autoAnalysisShownFilename = null;
+
+function connectAutoAnalysisEvents() {
+  const evtSource = new EventSource("/api/events");
+
+  evtSource.onmessage = (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      handleAutoAnalysisEvent(data);
+    } catch {}
+  };
+
+  evtSource.onerror = () => {
+    // EventSource 자동 재연결됨 — 별도 처리 불필요
+  };
+
+  // SSE와 관계없이 5초마다 상태 폴링 (SSE 놓쳐도 반드시 동작)
+  startAutoAnalysisPoll();
+}
+
+function handleAutoAnalysisEvent(data) {
+  if (isAnalyzing) return;
+  if (data.type === "analysis-started") {
+    showAutoAnalysisStarted(data.projectName);
+    startAutoAnalysisPoll();
+  } else if (data.type === "analysis-done") {
+    stopAutoAnalysisPoll();
+    if (data.filename !== autoAnalysisShownFilename) {
+      autoAnalysisShownFilename = data.filename;
+      showAutoAnalysisDone(data);
+    }
+  } else if (data.type === "analysis-error") {
+    stopAutoAnalysisPoll();
+    setStatus("error", `자동 분석 오류: ${data.message}`);
+    setAriaState("error");
+  }
+}
+
+function startAutoAnalysisPoll() {
+  stopAutoAnalysisPoll();
+  autoAnalysisPollTimer = setInterval(async () => {
+    if (isAnalyzing) return;
+    try {
+      const res = await fetch("/api/auto-analysis/state");
+      const state = await res.json();
+      if (state.status === "analyzing" && autoAnalysisShownFilename !== "__loading__") {
+        autoAnalysisShownFilename = "__loading__";
+        showAutoAnalysisStarted(state.projectName);
+      } else if (state.status === "done" && state.filename !== autoAnalysisShownFilename) {
+        autoAnalysisShownFilename = state.filename;
+        showAutoAnalysisDone(state);
+      }
+    } catch {}
+  }, 5000);
+}
+
+function stopAutoAnalysisPoll() {
+  if (autoAnalysisPollTimer) {
+    clearInterval(autoAnalysisPollTimer);
+    autoAnalysisPollTimer = null;
+  }
+}
+
+function showAutoAnalysisStarted(pName) {
+  const resultCard = document.getElementById("result-card");
+  const analysisBody = document.getElementById("analysis-body");
+  const reportSaved = document.getElementById("report-saved");
+  resultCard.style.display = "block";
+  analysisBody.innerHTML = "";
+  reportSaved.textContent = "";
+  document.getElementById("copy-btn").style.display = "none";
+  setStatus("loading", `${pName} 커밋 자동 분석 중...`);
+  setAriaState("thinking");
+  resultCard.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+function showAutoAnalysisDone({ filename, content }) {
+  const resultCard = document.getElementById("result-card");
+  const analysisBody = document.getElementById("analysis-body");
+  const reportSaved = document.getElementById("report-saved");
+  const copyBtn = document.getElementById("copy-btn");
+  resultCard.style.display = "block";
+  analysisBody.innerHTML = marked.parse(content);
+  reportSaved.textContent = `✓ 저장됨: ${filename}`;
+  setStatus("done", "✅ 자동 분석 완료!");
+  setAriaState("done");
+  copyBtn.style.display = "inline-flex";
+  copyBtn._text = content;
+  resultCard.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
 // ── Reports Tab ──
 async function loadReports() {
   const listEl = document.getElementById("reports-list");
@@ -506,10 +501,85 @@ function setupTabs() {
       btn.classList.add("active");
       document.getElementById("tab-" + tab).classList.add("active");
       if (tab === "reports") loadReports();
+      if (tab === "hooks") loadHookStatus();
     });
   });
 }
 
+// ── Hooks Tab ──
+async function loadHookStatus() {
+  const listEl = document.getElementById("hook-projects-list");
+  listEl.innerHTML = '<p class="empty-state">불러오는 중...</p>';
+  try {
+    const res = await fetch("/api/hooks/status");
+    const { projects } = await res.json();
+    if (!projects || projects.length === 0) {
+      listEl.innerHTML =
+        '<p class="empty-state">git 프로젝트를 찾을 수 없습니다.</p>';
+      return;
+    }
+    listEl.innerHTML = projects
+      .map((p) => {
+        const pcInstalled = p.postCommit?.installed;
+        const ppInstalled = p.prePush?.installed;
+        const allInstalled = pcInstalled && ppInstalled;
+        const noneInstalled = !pcInstalled && !ppInstalled;
+        const statusBadge = allInstalled
+          ? '<span class="hook-badge installed">설치됨</span>'
+          : noneInstalled
+            ? '<span class="hook-badge not-installed">미설치</span>'
+            : '<span class="hook-badge partial">일부 설치</span>';
+
+        const displayName = p.displayName || p.name;
+        return `<div class="hook-project-row" data-name="${escHtml(p.name)}">
+          <div class="hook-project-info">
+            <span class="hook-project-name">${escHtml(displayName)}</span>
+            ${statusBadge}
+            <span class="hook-detail">post-commit: ${pcInstalled ? "✅" : "❌"} &nbsp; pre-push: ${ppInstalled ? "✅" : "❌"}</span>
+          </div>
+          <div class="hook-project-actions">
+            ${
+              allInstalled
+                ? `<button class="btn-ghost hook-remove-btn" data-name="${escHtml(p.name)}">제거</button>`
+                : `<button class="btn-secondary hook-install-btn" data-name="${escHtml(p.name)}">설치</button>`
+            }
+          </div>
+        </div>`;
+      })
+      .join("");
+
+    listEl.querySelectorAll(".hook-install-btn").forEach((btn) => {
+      btn.addEventListener("click", () => handleHookAction("install", btn.dataset.name, btn));
+    });
+    listEl.querySelectorAll(".hook-remove-btn").forEach((btn) => {
+      btn.addEventListener("click", () => handleHookAction("remove", btn.dataset.name, btn));
+    });
+  } catch {
+    listEl.innerHTML =
+      '<p class="empty-state" style="color:var(--danger)">훅 상태를 불러오지 못했습니다.</p>';
+  }
+}
+
+async function handleHookAction(action, pName, btn) {
+  const original = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = action === "install" ? "설치 중..." : "제거 중...";
+  try {
+    const res = await fetch(`/api/hooks/${action}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ projectName: pName }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || "요청 실패");
+    await loadHookStatus();
+  } catch (err) {
+    btn.disabled = false;
+    btn.textContent = original;
+    alert(`오류: ${err.message}`);
+  }
+}
+
 // ── Helpers ──
 function togglePre(preId, btnId) {
   const pre = document.getElementById(preId);

package/public/index.html

@@ -21,7 +21,6 @@
     <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
-    <!-- ── Header ── -->
     <header class="header">
       <div class="header-inner">
         <div class="logo">
@@ -36,6 +35,9 @@
           <button class="nav-btn" data-tab="reports" id="btn-reports">
             리포트
           </button>
+          <button class="nav-btn" data-tab="hooks" id="btn-hooks">
+            훅 관리
+          </button>
         </nav>
         <div class="aria-chip" id="aria-chip">
           <span class="aria-chip-dot" id="aria-chip-dot"></span>
@@ -44,11 +46,8 @@
       </div>
     </header>
 
-    <!-- ── Main ── -->
     <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
@@ -80,7 +79,6 @@
                   <stop offset="100%" stop-color="#0e7490" />
                 </linearGradient>
               </defs>
-              <!-- Antenna -->
               <line
                 x1="45"
                 y1="7"
@@ -158,7 +156,7 @@
           <div class="aria-bubble-wrap">
             <div class="aria-bubble">
               <span class="aria-bubble-text" id="aria-bubble-text"
-                >어떤 프로젝트의 커밋을 분석해드릴까요?</span
+                >분석을 시작할까요?</span
               >
               <span
                 class="aria-typing-dots"
@@ -179,14 +177,8 @@
           키를 입력해 주세요.
         </div>
 
-        <!-- Project Selector Card -->
+        <!-- Selector Card -->
         <div class="card selector-card">
-          <div class="card-header">
-            <h2 class="card-title">🗂 프로젝트 선택</h2>
-            <button class="refresh-btn" id="refresh-projects" title="새로고침">
-              ↻
-            </button>
-          </div>
           <!-- Mode Toggle -->
           <div class="mode-toggle">
             <button class="mode-btn active" id="mode-commit" data-mode="commit">
@@ -196,18 +188,8 @@
               🔍 현재 변경사항 분석
             </button>
           </div>
-          <div class="project-grid" id="project-grid">
-            <div class="skeleton-grid">
-              <div class="skeleton"></div>
-              <div class="skeleton"></div>
-              <div class="skeleton"></div>
-            </div>
-          </div>
           <div class="card-footer">
-            <span class="selected-hint" id="selected-hint"
-              >프로젝트를 선택해 주세요</span
-            >
-            <button class="btn-primary" id="analyze-btn" disabled>
+            <button class="btn-primary" id="analyze-btn">
               <span class="btn-icon">🤖</span>
               <span id="analyze-btn-text">Hanni에게 분석 요청</span>
             </button>
@@ -265,6 +247,71 @@
         </div>
       </section>
 
+      <!-- ── Tab: Hooks ── -->
+      <section class="tab-content" id="tab-hooks">
+        <div class="card">
+          <div class="card-header">
+            <h2 class="card-title">🪝 Git Hook 관리</h2>
+            <button class="btn-ghost" id="refresh-hooks" title="새로고침">
+              ↻
+            </button>
+          </div>
+          <p class="hook-desc">
+            훅을 설치하면 <strong>커밋할 때마다 자동으로 AI 분석</strong>이
+            실행되고, <strong>push 전에 secret 유출을 자동 차단</strong>합니다.
+          </p>
+
+          <div class="hook-section">
+            <div class="hook-section-title">
+              <span class="hook-icon">⚡</span>
+              post-commit — 자동 커밋 분석
+            </div>
+            <p class="hook-section-desc">
+              커밋 직후 Gemini AI가 백그라운드에서 분석 리포트를 자동
+              생성합니다.
+            </p>
+          </div>
+
+          <div class="hook-section">
+            <div class="hook-section-title">
+              <span class="hook-icon">⛔</span>
+              pre-push — Secret 유출 탐지
+            </div>
+            <p class="hook-section-desc">
+              push 전에 API 키, 비밀번호, private key 등의 유출을 탐지하고
+              차단합니다.
+            </p>
+          </div>
+
+          <div id="hook-projects-list" class="hook-projects-list">
+            <p class="empty-state">불러오는 중...</p>
+          </div>
+        </div>
+
+        <div class="card hook-cli-card">
+          <h2 class="card-title">💻 CLI 사용법</h2>
+          <div class="hook-cli-block">
+            <div class="hook-cli-item">
+              <code>commit-ai-agent hook install</code>
+              <span>현재 디렉토리에 훅 설치</span>
+            </div>
+
+            <div class="hook-cli-item">
+              <code>commit-ai-agent hook remove</code>
+              <span>훅 제거</span>
+            </div>
+            <div class="hook-cli-item">
+              <code>commit-ai-agent hook status</code>
+              <span>설치 상태 확인</span>
+            </div>
+            <div class="hook-cli-item">
+              <code>SKIP_SECRET_SCAN=1 git push</code>
+              <span>Secret 스캔 일시 스킵 (오탐 시)</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- ── Tab: Reports ── -->
       <section class="tab-content" id="tab-reports">
         <div class="card">