commit-ai-agent 1.0.0

package/.env.example

@@ -0,0 +1,3 @@
+GEMINI_API_KEY=your_gemini_api_key_here
+PORT=3000
+DEV_ROOT=C:/dev

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 commit-analyzer contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# ⚡ Commit Analyzer
+
+AI가 git 커밋과 현재 변경사항을 한국어로 자동 분석해주는 개발자 도구입니다.
+
+## 요구 사항
+
+- [Node.js](https://nodejs.org) 18 이상
+- [Git](https://git-scm.com) 설치
+- Google Gemini API 키 ([무료 발급](https://aistudio.google.com/apikey))
+
+---
+
+## 사용 방법
+
+### 방법 A — npx (설치 없이 바로 실행)
+
+```bash
+npx commit-analyzer
+```
+
+### 방법 B — 전역 설치 후 명령어로 실행
+
+```bash
+npm install -g commit-analyzer
+commit-analyzer
+```
+
+### 방법 C — 직접 클론
+
+```bash
+git clone https://github.com/사용자명/commit-analyzer.git
+cd commit-analyzer
+npm install
+npm start
+```
+
+---
+
+## 환경 설정
+
+처음 실행 전, 실행할 디렉토리에 `.env` 파일을 만드세요.
+
+```env
+GEMINI_API_KEY=여기에_API_키_입력
+DEV_ROOT=C:/Users/이름/dev
+PORT=3000
+```
+
+| 변수 | 설명 |
+|------|------|
+| `GEMINI_API_KEY` | [Google AI Studio](https://aistudio.google.com/apikey)에서 발급 (무료) |
+| `DEV_ROOT` | 분석할 git 프로젝트들이 모여 있는 루트 폴더 |
+| `PORT` | 서버 포트 (기본값 3000) |
+
+> Windows 경로는 `\` 대신 `/` 또는 `\\` 사용: `C:/dev`, `D:/projects`
+
+---
+
+## 기능
+
+| 모드 | 설명 |
+|------|------|
+| 📦 최근 커밋 분석 | 마지막 커밋의 의도·근거·코드 리뷰 자동 생성 |
+| 🔍 현재 변경사항 분석 | staged/unstaged/untracked 분석 + 커밋 메시지 3가지 제안 |
+
+- 분석 결과는 실행 위치의 `reports/` 폴더에 Markdown으로 저장됩니다.
+
+---
+
+## 문제 해결
+
+**429 오류 (할당량 초과)**
+→ Gemini 무료 티어 한도 도달. 잠시 후 재시도하거나 [유료 플랜](https://ai.google.dev)으로 업그레이드하세요.
+
+**프로젝트 목록이 안 뜸**
+→ `DEV_ROOT`가 git 저장소가 들어 있는 상위 폴더인지 확인하세요.
+
+---
+
+## 라이선스
+
+[MIT](./LICENSE)

package/bin/cli.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+/**
+ * commit-analyzer CLI 진입점
+ * npx commit-analyzer 또는 npm install -g 후 commit-analyzer 명령으로 실행
+ */
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { spawn } from 'child_process';
+
+// 사용자 현재 디렉토리의 .env 로드
+dotenv.config({ path: path.resolve(process.cwd(), '.env') });
+
+// 패키지 루트 경로를 환경변수로 전달 (server.js가 public/ 위치를 찾기 위함)
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+process.env.COMMIT_ANALYZER_ROOT = path.resolve(__dirname, '..');
+
+const PORT = process.env.PORT || 3000;
+
+console.log('');
+console.log('  ⚡ Commit Analyzer');
+console.log(`  🌐 http://localhost:${PORT}`);
+console.log('  종료: Ctrl+C');
+console.log('');
+
+// 브라우저 자동 오픈 (1초 지연 - 서버 준비 대기)
+setTimeout(async () => {
+  const url = `http://localhost:${PORT}`;
+  const platform = process.platform;
+  const cmd = platform === 'win32' ? 'start' :
+               platform === 'darwin' ? 'open' : 'xdg-open';
+  spawn(cmd, [url], { shell: true, stdio: 'ignore', detached: true });
+}, 1200);
+
+// 서버 시작
+await import('../src/server.js');

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "commit-ai-agent",
+  "version": "1.0.0",
+  "description": "AI-powered git commit & working status analyzer with web UI",
+  "type": "module",
+  "main": "src/server.js",
+  "bin": {
+    "commit-analyzer": "./bin/cli.js"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "public/",
+    ".env.example",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "node src/server.js",
+    "dev": "node --watch src/server.js"
+  },
+  "keywords": [
+    "git",
+    "commit",
+    "ai",
+    "analyzer",
+    "gemini",
+    "code-review"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@google/generative-ai": "^0.21.0",
+    "express": "^4.18.2",
+    "simple-git": "^3.22.0",
+    "dotenv": "^16.4.1"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/public/app.js

@@ -0,0 +1,363 @@
+/* global marked */
+
+// ── State ──
+let selectedProject = null;
+let isAnalyzing = false;
+let analyzeMode = 'commit'; // 'commit' | 'status'
+
+// ── Boot ──
+document.addEventListener('DOMContentLoaded', () => {
+  init();
+});
+
+async function init() {
+  setupTabs();
+  setupModeToggle();
+  await checkConfig();
+  await loadProjects();
+
+  // wire static event listeners (elements guaranteed to exist now)
+  document.getElementById('refresh-projects').addEventListener('click', loadProjects);
+  document.getElementById('analyze-btn').addEventListener('click', onAnalyzeClick);
+  document.getElementById('copy-btn').addEventListener('click', onCopy);
+  document.getElementById('close-report-btn').addEventListener('click', () => {
+    document.getElementById('report-viewer').style.display = 'none';
+  });
+  document.getElementById('diff-toggle-btn').addEventListener('click', () => {
+    togglePre('diff-content', 'diff-toggle-btn');
+  });
+  document.getElementById('status-diff-toggle-btn').addEventListener('click', () => {
+    togglePre('status-diff-content', 'status-diff-toggle-btn');
+  });
+}
+
+// ── Config check ──
+async function checkConfig() {
+  try {
+    const res = await fetch('/api/config');
+    const { hasKey } = await res.json();
+    if (!hasKey) {
+      document.getElementById('api-key-warn').style.display = 'flex';
+    }
+  } catch {}
+}
+
+// ── 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();
+  }
+}
+
+async function fetchCommitPreview() {
+  try {
+    const res = await fetch(`/api/projects/${encodeURIComponent(selectedProject)}/commit`);
+    const { commit, error } = await res.json();
+    if (error) throw new Error(error);
+    renderCommitCard(commit);
+    document.getElementById('commit-card').style.display = 'block';
+  } catch (e) {
+    console.warn('commit preview failed:', e.message);
+  }
+}
+
+async function fetchStatusPreview() {
+  try {
+    const res = await fetch(`/api/projects/${encodeURIComponent(selectedProject)}/status`);
+    const { status, error } = await res.json();
+    if (error) throw new Error(error);
+    if (status) {
+      renderStatusCard(status);
+      document.getElementById('status-card').style.display = 'block';
+    } else {
+      document.getElementById('selected-hint').textContent = `${selectedProject} — 변경사항 없음`;
+    }
+  } catch (e) {
+    console.warn('status preview failed:', e.message);
+  }
+}
+
+// ── Commit Card ──
+function renderCommitCard(c) {
+  document.getElementById('commit-meta').innerHTML = `
+    <div class="meta-item"><div class="meta-label">해시</div><div class="meta-value hash">${c.shortHash}</div></div>
+    <div class="meta-item"><div class="meta-label">메시지</div><div class="meta-value">${escHtml(c.message)}</div></div>
+    <div class="meta-item"><div class="meta-label">작성자</div><div class="meta-value">${escHtml(c.author)}</div></div>
+    <div class="meta-item"><div class="meta-label">날짜</div><div class="meta-value">${escHtml(c.date)}</div></div>
+  `;
+  const pre = document.getElementById('diff-content');
+  pre.textContent = c.diffContent || '(diff 없음)';
+  pre.style.display = 'none';
+  document.getElementById('diff-toggle-btn').textContent = 'diff 보기 ▾';
+}
+
+// ── Status Card ──
+function renderStatusCard(s) {
+  const badges = [
+    s.stagedCount    ? `<span class="stat-chip staged">${s.stagedCount} staged</span>` : '',
+    s.modifiedCount  ? `<span class="stat-chip modified">${s.modifiedCount} modified</span>` : '',
+    s.deletedCount   ? `<span class="stat-chip deleted">${s.deletedCount} deleted</span>` : '',
+    s.untrackedCount ? `<span class="stat-chip untracked">${s.untrackedCount} untracked</span>` : '',
+  ].filter(Boolean).join('');
+
+  document.getElementById('status-meta').innerHTML = `
+    <div class="meta-item" style="grid-column:1/-1">
+      <div class="meta-label">변경된 파일 (총 ${s.totalFiles}개)</div>
+      <div class="meta-value" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:8px">${badges || '<span style="color:var(--text3)">변경사항 없음</span>'}</div>
+    </div>
+  `;
+  const pre = document.getElementById('status-diff-content');
+  pre.textContent = s.diffContent || '(diff 없음)';
+  pre.style.display = 'none';
+  document.getElementById('status-diff-toggle-btn').textContent = 'diff 보기 ▾';
+}
+
+// ── Mode Toggle ──
+function setupModeToggle() {
+  document.getElementById('mode-commit')?.addEventListener('click', () => switchMode('commit'));
+  document.getElementById('mode-status')?.addEventListener('click', () => switchMode('status'));
+}
+
+function switchMode(mode) {
+  analyzeMode = mode;
+  document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+  document.getElementById(`mode-${mode}`).classList.add('active');
+  document.getElementById('commit-card').style.display = 'none';
+  document.getElementById('status-card').style.display = 'none';
+  document.getElementById('result-card').style.display = 'none';
+
+  if (!selectedProject) return;
+  if (mode === 'commit') fetchCommitPreview();
+  else fetchStatusPreview();
+}
+
+// ── Analyze button ──
+function onAnalyzeClick() {
+  if (analyzeMode === 'commit') startAnalysis('/api/analyze');
+  else startAnalysis('/api/analyze-status');
+}
+
+// ── Generic SSE Analysis ──
+async function startAnalysis(endpoint) {
+  if (isAnalyzing || !selectedProject) return;
+  isAnalyzing = true;
+
+  const resultCard = document.getElementById('result-card');
+  const analysisBody = document.getElementById('analysis-body');
+  const reportSaved = document.getElementById('report-saved');
+  const analyzeBtn = document.getElementById('analyze-btn');
+  const btnIcon = analyzeBtn.querySelector('.btn-icon');
+
+  resultCard.style.display = 'block';
+  analysisBody.innerHTML = '';
+  reportSaved.textContent = '';
+  setStatus('loading', '분석 준비 중...');
+  analyzeBtn.disabled = true;
+  btnIcon.textContent = '⏳';
+
+  let fullText = '';
+
+  try {
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ projectName: selectedProject }),
+    });
+
+    // 400 에러 처리 (API 키 없음 등)
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+      setStatus('error', `오류: ${err.error}`);
+      return;
+    }
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop();
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        try {
+          const data = JSON.parse(line.slice(6));
+          if (data.type === 'status') {
+            setStatus('loading', data.message);
+          } else if (data.type === 'commit') {
+            renderCommitCard(data.commit);
+            document.getElementById('commit-card').style.display = 'block';
+          } else if (data.type === 'working-status') {
+            renderStatusCard(data.workingStatus);
+            document.getElementById('status-card').style.display = 'block';
+          } else if (data.type === 'analysis') {
+            fullText = data.analysis;
+            analysisBody.innerHTML = marked.parse(data.analysis);
+            if (data.reportFilename) {
+              reportSaved.textContent = `✓ 저장됨: ${data.reportFilename}`;
+            }
+          } else if (data.type === 'done') {
+            setStatus('done', '✅ 분석 완료!');
+          } else if (data.type === 'error') {
+            setStatus('error', `오류: ${data.message}`);
+          }
+        } catch {}
+      }
+    }
+  } catch (err) {
+    setStatus('error', `네트워크 오류: ${err.message}`);
+  } finally {
+    isAnalyzing = false;
+    analyzeBtn.disabled = false;
+    btnIcon.textContent = '🔍';
+    document.getElementById('copy-btn')._text = fullText;
+    resultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
+
+// ── Status bar ──
+function setStatus(type, msg) {
+  const bar = document.getElementById('status-bar');
+  const dot = bar.querySelector('.status-dot');
+  const msgEl = document.getElementById('status-msg');
+  msgEl.textContent = msg;
+  dot.className = 'status-dot ' + type;
+  bar.className = 'status-bar ' + (type === 'loading' ? '' : type);
+}
+
+// ── Copy ──
+function onCopy() {
+  const btn = document.getElementById('copy-btn');
+  const text = btn._text || document.getElementById('analysis-body').innerText;
+  navigator.clipboard.writeText(text).then(() => {
+    btn.textContent = '✓ 복사됨';
+    setTimeout(() => { btn.textContent = '📋 복사'; }, 2000);
+  });
+}
+
+// ── Reports Tab ──
+async function loadReports() {
+  const listEl = document.getElementById('reports-list');
+  listEl.innerHTML = '<p class="empty-state">불러오는 중...</p>';
+  try {
+    const res = await fetch('/api/reports');
+    const { reports } = await res.json();
+    if (!reports.length) {
+      listEl.innerHTML = '<p class="empty-state">아직 저장된 리포트가 없습니다.</p>';
+      return;
+    }
+    listEl.innerHTML = reports.map(r => {
+      const parts = r.replace('.md', '').split('-');
+      const date = parts.slice(-2).join(' ');
+      const proj = parts.slice(0, -2).join('-');
+      return `<div class="report-item" data-file="${r}">
+        <span class="report-item-name">📄 ${proj}</span>
+        <span class="report-item-date">${date}</span>
+      </div>`;
+    }).join('');
+    listEl.querySelectorAll('.report-item').forEach(el => {
+      el.addEventListener('click', () => openReport(el.dataset.file));
+    });
+  } catch {
+    listEl.innerHTML = '<p class="empty-state">리포트를 불러오지 못했습니다.</p>';
+  }
+}
+
+async function openReport(filename) {
+  const viewer = document.getElementById('report-viewer');
+  const body = document.getElementById('report-viewer-body');
+  document.getElementById('report-viewer-title').textContent = filename.replace('.md', '');
+  body.innerHTML = '<p style="color:var(--text2)">불러오는 중...</p>';
+  viewer.style.display = 'block';
+  try {
+    const res = await fetch(`/api/reports/${encodeURIComponent(filename)}`);
+    const { content } = await res.json();
+    body.innerHTML = marked.parse(content);
+  } catch {
+    body.innerHTML = '<p style="color:var(--danger)">리포트를 불러오지 못했습니다.</p>';
+  }
+  viewer.scrollIntoView({ behavior: 'smooth' });
+}
+
+// ── Tabs ──
+function setupTabs() {
+  document.querySelectorAll('.nav-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const tab = btn.dataset.tab;
+      document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+      btn.classList.add('active');
+      document.getElementById('tab-' + tab).classList.add('active');
+      if (tab === 'reports') loadReports();
+    });
+  });
+}
+
+// ── Helpers ──
+function togglePre(preId, btnId) {
+  const pre = document.getElementById(preId);
+  const btn = document.getElementById(btnId);
+  const shown = pre.style.display !== 'none';
+  pre.style.display = shown ? 'none' : 'block';
+  btn.textContent = shown ? 'diff 보기 ▾' : 'diff 닫기 ▴';
+}
+
+function escHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}

package/public/index.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Commit Analyzer — AI 커밋 분석기</title>
+  <meta name="description" content="AI 기반 git 커밋 문서화 및 코드 리뷰 에이전트" />
+  <meta name="theme-color" content="#6366f1" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+  <!-- ── Header ── -->
+  <header class="header">
+    <div class="header-inner">
+      <div class="logo">
+        <span class="logo-icon">⚡</span>
+        <span class="logo-text">Commit Analyzer</span>
+        <span class="logo-badge">AI</span>
+      </div>
+      <nav class="header-nav">
+        <button class="nav-btn active" data-tab="analyze" id="btn-analyze">분석하기</button>
+        <button class="nav-btn" data-tab="reports" id="btn-reports">리포트</button>
+      </nav>
+    </div>
+  </header>
+
+  <!-- ── Main ── -->
+  <main class="main">
+
+    <!-- ── Tab: Analyze ── -->
+    <section class="tab-content active" id="tab-analyze">
+
+      <!-- API Key Warning -->
+      <div class="alert alert-warn" id="api-key-warn" style="display:none">
+        ⚠️ <strong>.env</strong> 파일에 <code>GEMINI_API_KEY</code>가 설정되지 않았습니다.
+        <code>c:\dev\commit-analyzer\.env</code> 파일을 생성하고 키를 입력해 주세요.
+      </div>
+
+      <!-- Project 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">📦 최근 커밋 분석</button>
+          <button class="mode-btn" id="mode-status" data-mode="status">🔍 현재 변경사항 분석</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>
+            <span class="btn-icon">🔍</span> 커밋 분석하기
+          </button>
+        </div>
+      </div>
+
+      <!-- Working Status Card (hidden until project selected in status mode) -->
+      <div class="card commit-card" id="status-card" style="display:none">
+        <h2 class="card-title">🔧 현재 변경사항 (미커밋)</h2>
+        <div class="commit-meta" id="status-meta"></div>
+        <div class="diff-toggle">
+          <button class="btn-ghost" id="status-diff-toggle-btn">diff 보기 ▾</button>
+          <pre class="diff-content" id="status-diff-content" style="display:none"></pre>
+        </div>
+      </div>
+
+      <!-- Commit Info Card (hidden until project selected) -->
+      <div class="card commit-card" id="commit-card" style="display:none">
+        <h2 class="card-title">📦 최근 커밋</h2>
+        <div class="commit-meta" id="commit-meta"></div>
+        <div class="diff-toggle">
+          <button class="btn-ghost" id="diff-toggle-btn">diff 보기 ▾</button>
+          <pre class="diff-content" id="diff-content" style="display:none"></pre>
+        </div>
+      </div>
+
+      <!-- Analysis Output -->
+      <div class="card result-card" id="result-card" style="display:none">
+        <div class="result-header">
+          <h2 class="card-title">📝 AI 분석 결과</h2>
+          <div class="result-actions">
+            <button class="btn-ghost" id="copy-btn">📋 복사</button>
+            <span class="report-saved" id="report-saved"></span>
+          </div>
+        </div>
+        <!-- Status bar -->
+        <div class="status-bar" id="status-bar">
+          <span class="status-dot loading"></span>
+          <span id="status-msg">분석 준비 중...</span>
+        </div>
+        <!-- Streaming output -->
+        <div class="analysis-body" id="analysis-body"></div>
+      </div>
+
+    </section>
+
+    <!-- ── Tab: Reports ── -->
+    <section class="tab-content" id="tab-reports">
+      <div class="card">
+        <h2 class="card-title">📁 저장된 리포트</h2>
+        <div id="reports-list" class="reports-list">
+          <p class="empty-state">아직 저장된 리포트가 없습니다.</p>
+        </div>
+      </div>
+      <div class="card" id="report-viewer" style="display:none">
+        <div class="result-header">
+          <h2 class="card-title" id="report-viewer-title">리포트</h2>
+          <button class="btn-ghost" id="close-report-btn">✕ 닫기</button>
+        </div>
+        <div class="analysis-body" id="report-viewer-body"></div>
+      </div>
+    </section>
+
+  </main>
+
+  <script src="/app.js"></script>
+</body>
+</html>