@clazic/urban 0.2.5 → 0.2.6

package/web/scripts/pages/home.js

@@ -0,0 +1,231 @@
+import { getJson } from "../api.js";
+import { qs, escapeHtml } from "../dom.js";
+import { renderStat } from "../components/stat-cards.js";
+import { renderPipelineBar } from "../components/pipeline-strip.js";
+import { openFileViewer } from "../components/file-viewer.js";
+import { store } from "../store.js";
+import { subscribe } from "../sse.js";
+
+let _unsubPipelineStats = null;
+
+const SOURCE_COLORS = {
+  prism: "oklch(58% 0.14 255)",
+  nanet: "oklch(65% 0.14 50)",
+  국토연구원: "oklch(62% 0.14 145)",
+  "lh연구원": "oklch(62% 0.12 20)",
+};
+
+function relativeTime(dateStr) {
+  if (!dateStr) return "";
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}분 전`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}시간 전`;
+  return `${Math.floor(hours / 24)}일 전`;
+}
+
+function sourceChipClass(source) {
+  const s = (source || "").toLowerCase();
+  if (s === "prism") return "prism";
+  if (s === "nanet") return "nanet";
+  return "";
+}
+
+export async function mount() {
+  const eyebrow = document.getElementById("home-eyebrow");
+  if (eyebrow) {
+    const now = new Date();
+    const days = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"];
+    const y = now.getFullYear(), m = now.getMonth() + 1, d = now.getDate();
+    const wd = days[now.getDay()];
+    eyebrow.textContent = `🗓️ 오늘의 개요 · ${y}년 ${m}월 ${d}일 (${wd})`;
+  }
+  document.querySelector('[data-action="refresh-home"]')?.addEventListener("click", loadHome);
+  await loadHome();
+
+  _unsubPipelineStats = subscribe("pipeline_stats", (d) => {
+    if (!d?.byStatus) return;
+    applyPipelineStats(d.byStatus, d.byStatus.failed ?? null);
+  });
+}
+
+export async function unmount() {
+  _unsubPipelineStats?.();
+  _unsubPipelineStats = null;
+}
+
+function applyPipelineStats(b, failCount) {
+  // "다운로드 대기" = 승인 대기 + 큐 등록 단계만
+  renderStat("stat-pending", (b.waiting || 0) + (b.queued || 0));
+  // "처리 중" = 다운로드 이후 모든 활성 단계
+  renderStat("stat-queue", (b.downloading || 0) + (b.converting || 0) +
+    (b.extracting || 0) + (b.graph || 0) + (b.wiki || 0));
+  if (failCount != null) renderStat("stat-failures", failCount);
+  renderPipelineBar(qs("#home-pipeline"), b, failCount ?? b.failed ?? 0);
+}
+
+async function loadHome() {
+  try {
+    const [stats, health, failures, pipelineStats] = await Promise.all([
+      getJson("/api/stats"),
+      getJson("/api/health"),
+      getJson("/api/failures/count"),
+      getJson("/api/pipeline/stats"),
+    ]);
+
+    renderStat("stat-total", stats.total_reports);
+    const failureCount = failures.count || 0;
+    applyPipelineStats(pipelineStats.byStatus || {}, failureCount);
+
+    const weekDelta = qs("#stat-week-delta");
+    if (weekDelta && stats.week_collected != null) {
+      weekDelta.textContent = `↑${stats.week_collected}`;
+    }
+
+    const db = qs("#db-status");
+    const llm = qs("#llm-status");
+    const recent = qs("#recent-reports");
+    const failBanner = qs("#failures-banner");
+    const failCount = qs("#failures-count");
+    const homeSse = qs("#home-sse-status");
+
+    if (db) db.textContent = health.db?.ok ? `${health.db.size_mb}MB` : "오류";
+    if (llm) llm.textContent = `${health.llm_cache?.entries ?? 0} · 적중률 ${health.llm_cache?.hit_rate_pct ?? 0}%`;
+
+    const diskEl = qs("#disk-status");
+    const uptimeEl = qs("#uptime-status");
+    if (diskEl) diskEl.textContent = health.disk ? `${health.disk.free_gb}GB 여유` : "-";
+    if (uptimeEl && health.uptime_s != null) {
+      const h = Math.floor(health.uptime_s / 3600);
+      const m = Math.floor((health.uptime_s % 3600) / 60);
+      uptimeEl.textContent = h > 0 ? `${h}h ${m}m` : `${m}m`;
+    }
+
+    const footerDot = document.getElementById("footer-dot");
+    const footerStatus = document.getElementById("footer-status");
+    const footerUptime = document.getElementById("footer-uptime");
+    if (footerDot) footerDot.className = `dot${health.status === "ok" ? "" : health.status === "degraded" ? " warn" : " err"}`;
+    if (footerStatus) footerStatus.textContent = health.status === "ok" ? "LIVE" : health.status === "degraded" ? "DEGRADED" : "ERROR";
+    if (footerUptime && health.uptime_s != null) {
+      const h = Math.floor(health.uptime_s / 3600);
+      const m = Math.floor((health.uptime_s % 3600) / 60);
+      footerUptime.textContent = `uptime ${h > 0 ? `${h}h ${m}m` : `${m}m`}`;
+    }
+
+    if (recent) {
+      recent.onclick = (e) => {
+        const row = e.target.closest('.home-recent-row');
+        if (!row) return;
+        const clickedT2 = e.target.closest('.home-recent-t2');
+        const clickedT3 = e.target.closest('.home-recent-t3');
+        if (clickedT2) {
+          openFileViewer(row.dataset.hash, row.dataset.rawPath, null);
+        } else if (clickedT3) {
+          openFileViewer(row.dataset.hash, null, row.dataset.mdPath);
+        } else {
+          openFileViewer(row.dataset.hash, row.dataset.rawPath, row.dataset.mdPath);
+        }
+      };
+      recent.innerHTML = (stats.recent_reports || []).map((item) => {
+        const srcClass = sourceChipClass(item.source);
+        const time = relativeTime(item.created_at);
+        const rawFile = (item.file_path || "").split(/[\\/]/).pop() || null;
+        const mdFile = (item.md_path || "").split(/[\\/]/).pop() || null;
+        const metaParts = [
+          item.year ? `${item.year}년` : null,
+          rawFile || null,
+        ].filter(Boolean);
+        const effectiveStatus = (item.status === 'indexed' && !item.md_path) ? 'partial' : item.status;
+        const statusClass = effectiveStatus ? effectiveStatus.toLowerCase() : "";
+        const statusLabel = effectiveStatus === 'partial' ? 'PARTIAL' : escapeHtml(item.status || '');
+        return `<div class="home-recent-row" data-hash="${escapeHtml(item.hash || "")}" data-raw-path="${escapeHtml(item.file_path || "")}" data-md-path="${escapeHtml(item.md_path || "")}">
+          <div class="home-recent-body">
+            <div class="home-recent-t1">${escapeHtml(item.title || "제목 없음")}</div>
+            ${metaParts.length ? `<div class="home-recent-t2">${metaParts.map(escapeHtml).join(" · ")}</div>` : ""}
+            ${mdFile ? `<div class="home-recent-t3"><i class="fa-solid fa-arrow-right-long"></i> ${escapeHtml(mdFile)}</div>` : ""}
+          </div>
+          <div class="home-recent-badges">
+            ${item.source ? `<span class="home-src-badge ${srcClass}">${escapeHtml(item.source.toUpperCase())}</span>` : ""}
+            ${effectiveStatus ? `<span class="home-status-badge ${statusClass}">${statusLabel}</span>` : ""}
+          </div>
+          ${time ? `<span class="home-recent-time mono">${time}</span>` : ""}
+          <span class="home-recent-chev"><i class="fa-solid fa-chevron-right"></i></span>
+        </div>`;
+      }).join("") || '<div class="empty-state">최근 보고서 없음</div>';
+    }
+
+    renderSourceDistribution(stats.recent_reports || [], stats.total_by_source || {});
+    renderWeeklyChart(stats.daily_counts || []);
+
+    if (failBanner && failCount) {
+      failCount.textContent = failureCount;
+      failBanner.hidden = !(failureCount > 0);
+    }
+    if (homeSse) homeSse.textContent = store.sseConnected ? "정상" : "끊김";
+  } catch (error) {
+    console.error("home load failed", error);
+  }
+}
+
+function renderSourceDistribution(recentReports, totalBySource) {
+  const el = qs("#source-distribution");
+  if (!el) return;
+
+  let sources = {};
+  if (Object.keys(totalBySource).length > 0) {
+    sources = totalBySource;
+  } else {
+    for (const item of recentReports) {
+      const s = item.source || "기타";
+      sources[s] = (sources[s] || 0) + 1;
+    }
+  }
+
+  const total = Object.values(sources).reduce((a, b) => a + b, 0) || 1;
+  const sorted = Object.entries(sources).sort((a, b) => b[1] - a[1]);
+
+  const colors = ["oklch(58% 0.14 255)", "oklch(55% 0.16 145)", "oklch(62% 0.15 50)", "oklch(58% 0.12 20)", "oklch(55% 0.08 280)"];
+
+  el.innerHTML = sorted.map(([name, count], i) => {
+    const pct = Math.round((count / total) * 100);
+    const color = SOURCE_COLORS[name.toLowerCase()] || colors[i % colors.length];
+    return `<div class="home-src-row">
+      <span class="home-src-sw" style="background:${color}"></span>
+      <span class="home-src-n">${escapeHtml(name)}</span>
+      <span class="home-src-c mono">${count.toLocaleString()}</span>
+      <span class="home-src-pct">${pct}%</span>
+    </div>`;
+  }).join("") || '<div class="empty-state">데이터 없음</div>';
+}
+
+function renderWeeklyChart(dailyCounts) {
+  const el = qs("#home-chart");
+  if (!el) return;
+
+  const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
+  const today = new Date();
+  const days = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(today);
+    d.setDate(today.getDate() - (6 - i));
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    return { key, label: dayNames[d.getDay()], count: 0 };
+  });
+
+  for (const { day, cnt } of dailyCounts) {
+    const slot = days.find((d) => d.key === day);
+    if (slot) slot.count = cnt;
+  }
+
+  const max = Math.max(...days.map((d) => d.count), 1);
+
+  el.innerHTML = days.map((d) => {
+    const h = Math.max(Math.round((d.count / max) * 100), 4);
+    return `<div class="home-chart-col">
+      <div class="home-chart-bar" style="height:${h}%" title="${d.count}건"></div>
+      <span class="home-chart-lbl">${d.label}</span>
+    </div>`;
+  }).join("");
+}
+
+export default { mount, unmount };