@clazic/urban 0.2.4 → 0.2.6

package/web/scripts/api.js

@@ -0,0 +1,41 @@
+export async function getJson(url) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json();
+}
+
+export async function postJson(url, body = {}) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json().catch(() => ({}));
+}
+
+export async function patchJson(url, body = {}) {
+  const response = await fetch(url, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json().catch(() => ({}));
+}
+
+export async function putJson(url, body = {}) {
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json().catch(() => ({}));
+}
+
+export async function deleteJson(url) {
+  const response = await fetch(url, { method: "DELETE" });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json().catch(() => ({}));
+}

package/web/scripts/app.js

@@ -0,0 +1,76 @@
+import { connect, subscribe } from "./sse.js";
+import { bindShell, setSseStatus, syncShell } from "./shell.js";
+import { navigateTo } from "./router.js";
+import { store } from "./store.js";
+import { getJson } from "./api.js";
+import { showCommandPalette, hideCommandPalette } from "./components/command-palette.js";
+import { mountPipelineFooter } from "./components/pipeline-footer.js";
+
+async function loadGlobalHealth() {
+  try {
+    const [failures, stats] = await Promise.all([
+      getJson("/api/failures/count"),
+      getJson("/api/stats"),
+    ]);
+    store.failuresCount = failures.count || 0;
+
+    const set = (id, val) => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      el.textContent = val != null && val !== "" ? String(val) : "";
+      el.style.display = val != null && val !== "" ? "" : "none";
+    };
+    set("nav-failures-count", store.failuresCount || null);
+    set("nav-reports-count", stats.total_reports || null);
+    set("nav-pending-count", stats.pending_count || null);
+  } catch (error) {
+    console.error("global health load failed", error);
+  }
+}
+
+function bindGlobalEvents() {
+  window.addEventListener("popstate", (event) => {
+    const path = event.state?.path || window.location.pathname || "/";
+    navigateTo(path, false).then(syncShell);
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      hideCommandPalette();
+      document.getElementById("drawer-overlay")?.classList.add("hidden");
+      document.getElementById("report-drawer")?.classList.remove("open");
+      document.getElementById("stage-track-panel")?.classList.remove("open");
+      document.getElementById("stage-toast")?.classList.remove("open");
+    }
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
+      event.preventDefault();
+      showCommandPalette();
+    }
+  });
+}
+
+async function init() {
+  bindShell();
+  bindGlobalEvents();
+  connect();
+  subscribe("connection", ({ connected }) => setSseStatus(connected));
+  subscribe("message", async (data) => {
+    if (["pending", "item_stage", "failure", "done", "session:done", "wiki:updated"].includes(data.type)) {
+      await loadGlobalHealth();
+    }
+  });
+  await loadGlobalHealth();
+  await navigateTo(window.location.pathname || "/", false);
+  syncShell();
+  mountPipelineFooter().catch((err) => console.error("[pipeline-footer] mount failed", err));
+}
+
+const originalNavigate = navigateTo;
+window.app = {
+  navigateTo: async (path, push = true) => {
+    await originalNavigate(path, push);
+    syncShell();
+  },
+};
+
+init();

package/web/scripts/components/command-palette.js

@@ -0,0 +1,88 @@
+import { qs, escapeHtml } from "../dom.js";
+import { store } from "../store.js";
+
+let debounceTimer = null;
+
+export function showCommandPalette() {
+  const overlay = qs("#cmd-overlay");
+  const input = qs("#cmd-input");
+  if (!overlay || !input) return;
+  overlay.classList.remove("hidden");
+  input.value = "";
+  renderResults([]);
+  input.focus();
+  input.addEventListener("input", onInput);
+  input.addEventListener("keydown", onKeydown);
+}
+
+export function hideCommandPalette() {
+  const overlay = qs("#cmd-overlay");
+  const input = qs("#cmd-input");
+  overlay?.classList.add("hidden");
+  if (input) {
+    input.removeEventListener("input", onInput);
+    input.removeEventListener("keydown", onKeydown);
+  }
+  clearTimeout(debounceTimer);
+}
+
+function onInput(event) {
+  const q = event.target.value.trim();
+  clearTimeout(debounceTimer);
+  if (!q) { renderResults([]); return; }
+  debounceTimer = setTimeout(() => fetchSuggestions(q), 200);
+}
+
+function onKeydown(event) {
+  if (event.key === "Escape") hideCommandPalette();
+  if (event.key === "Enter") {
+    const q = event.target.value.trim();
+    if (q) {
+      hideCommandPalette();
+      window.app?.navigateTo(`/search?q=${encodeURIComponent(q)}`);
+    }
+  }
+}
+
+async function fetchSuggestions(q) {
+  try {
+    const res = await fetch(`/api/search/suggest?q=${encodeURIComponent(q)}&limit=12`);
+    const data = await res.json();
+    renderResults(data.suggestions || []);
+  } catch {
+    renderResults([]);
+  }
+}
+
+function renderResults(items) {
+  const el = qs("#cmd-results");
+  if (!el) return;
+  if (!items.length) {
+    el.innerHTML = "";
+    return;
+  }
+  el.innerHTML = items.map((item) => {
+    const meta = item.type === "wiki"
+      ? (item.source ? `링크 ${item.source}개` : "")
+      : (item.source ? `<span class="cmd-result-source">${escapeHtml(item.source)}</span>` : "");
+    const date = item.created_at ? `<span class="cmd-result-date">${new Date(item.created_at).toLocaleDateString("ko-KR")}</span>` : "";
+    return `
+    <button class="cmd-result" type="button" data-id="${escapeHtml(item.id)}" data-label="${escapeHtml(item.label)}" data-type="${escapeHtml(item.type)}">
+      <span class="cmd-result-type">${item.type === "wiki" ? "위키" : "보고서"}</span>
+      <span class="cmd-result-body">
+        <span class="cmd-result-label">${escapeHtml(item.label)}</span>
+        <span class="cmd-result-meta">${meta}${date}</span>
+      </span>
+    </button>`;
+  }).join("");
+  el.querySelectorAll(".cmd-result").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      hideCommandPalette();
+      if (btn.dataset.type === "wiki") {
+        window.app?.navigateTo(`/wiki#${encodeURIComponent(btn.dataset.id)}`);
+      } else {
+        window.app?.navigateTo(`/search?q=${encodeURIComponent(btn.dataset.label || btn.dataset.id)}`);
+      }
+    });
+  });
+}

package/web/scripts/components/drawer.js

@@ -0,0 +1,9 @@
+export function openDrawer(id) {
+  document.getElementById("drawer-overlay")?.classList.remove("hidden");
+  document.getElementById(id)?.classList.add("open");
+}
+
+export function closeDrawer(id) {
+  document.getElementById("drawer-overlay")?.classList.add("hidden");
+  document.getElementById(id)?.classList.remove("open");
+}

package/web/scripts/components/file-viewer.js

@@ -0,0 +1,120 @@
+import { renderPdfViewer } from './pdf-viewer.js';
+
+function openFileDrawer() {
+  document.getElementById('report-drawer')?.classList.add('open');
+  let backdrop = document.getElementById('file-viewer-backdrop');
+  if (!backdrop) {
+    backdrop = document.createElement('div');
+    backdrop.id = 'file-viewer-backdrop';
+    backdrop.className = 'file-backdrop';
+    document.body.appendChild(backdrop);
+    // 다음 프레임에 show 클래스 부여 → opacity 트랜지션 활성화
+    requestAnimationFrame(() => backdrop.classList.add('show'));
+  } else {
+    backdrop.classList.add('show');
+  }
+  backdrop.onclick = closeFileDrawer;
+}
+
+function closeFileDrawer() {
+  const rd = document.getElementById('report-drawer');
+  rd?.classList.remove('open', 'drawer-wide');
+  document.getElementById('file-viewer-backdrop')?.remove();
+  const tb = document.getElementById('drawer-pdf-toolbar');
+  if (tb) { tb.innerHTML = ''; tb.classList.add('hidden'); }
+}
+
+let _rhwp = null;
+
+async function getRhwp() {
+  if (_rhwp) return _rhwp;
+  const mod = await import('/rhwp.js');
+  await mod.default('/rhwp_bg.wasm');
+  _rhwp = mod;
+  return _rhwp;
+}
+
+async function loadMd(hash) {
+  const resp = await fetch(`/api/reports/${hash}/md`);
+  if (!resp.ok) throw new Error('MD 파일 없음');
+  const text = await resp.text();
+  return window.marked?.parse(text) || `<pre>${text.replace(/</g, '&lt;')}</pre>`;
+}
+
+async function loadRaw(hash, ext, body) {
+  if (ext === 'pdf') {
+    await renderPdfViewer(body, `/api/reports/${hash}/preview`);
+  } else if (ext === 'hwp' || ext === 'hwpx') {
+    body.innerHTML = '<div class="viewer-loading"><i class="fa-solid fa-spinner fa-spin"></i> HWP 파서 초기화 중...</div>';
+    const rhwp = await getRhwp();
+    const resp = await fetch(`/api/reports/${hash}/preview`);
+    const bytes = new Uint8Array(await resp.arrayBuffer());
+    const doc = new rhwp.HwpDocument(bytes);
+    const total = doc.pageCount();
+    const limit = Math.min(total, 10);
+    const parts = [];
+    for (let i = 0; i < limit; i++) parts.push(doc.renderPageHtml(i));
+    doc.free();
+    body.innerHTML = `<div class="hwp-viewer">${parts.map(p => `<div class="hwp-page">${p}</div>`).join('')}</div>`;
+    if (total > 10) body.insertAdjacentHTML('beforeend', `<p class="viewer-note">최초 10페이지만 표시 (전체 ${total}페이지)</p>`);
+  } else {
+    body.innerHTML = `<div class="viewer-unsupported"><i class="fa-regular fa-file"></i><p>미리보기 미지원 형식 (${ext || '알 수 없음'})</p><p>아래 버튼으로 다운로드하세요.</p></div>`;
+  }
+}
+
+export async function openFileViewer(hash, rawPath, mdPath) {
+  const drawerTitle = document.getElementById('drawer-title');
+  const drawerBody = document.getElementById('drawer-body');
+  const drawerActions = document.getElementById('drawer-actions');
+  if (!drawerBody) return;
+
+  const rawExt = (rawPath || '').split('.').pop().toLowerCase();
+  const hasMd = !!mdPath;
+  const hasRaw = !!rawPath;
+
+  document.getElementById('report-drawer')?.classList.add('drawer-wide');
+  drawerTitle.textContent = '보고서 원문';
+
+  // 탭 헤더
+  const tabs = [];
+  if (hasMd) tabs.push({ id: 'md', label: 'MD 변환본' });
+  if (hasRaw) tabs.push({ id: 'raw', label: `원본 (${rawExt.toUpperCase()})` });
+
+  const tabsHtml = tabs.length > 1
+    ? `<div class="viewer-tabs">${tabs.map((t, i) => `<button class="viewer-tab${i === 0 ? ' active' : ''}" data-tab="${t.id}">${t.label}</button>`).join('')}</div>`
+    : '';
+
+  drawerBody.innerHTML = `${tabsHtml}<div class="viewer-content viewer-loading"><i class="fa-solid fa-spinner fa-spin"></i> 불러오는 중...</div>`;
+  drawerActions.innerHTML = [
+    rawPath ? `<a class="btn ghost" href="/api/reports/${hash}/file" download>원본 다운로드</a>` : '',
+    mdPath ? `<a class="btn ghost" href="/api/reports/${hash}/md" download>MD 다운로드</a>` : '',
+  ].join('');
+  openFileDrawer();
+
+  const content = drawerBody.querySelector('.viewer-content');
+
+  async function showTab(tabId) {
+    drawerBody.querySelectorAll('.viewer-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === tabId));
+    content.innerHTML = '<div class="viewer-loading"><i class="fa-solid fa-spinner fa-spin"></i> 불러오는 중...</div>';
+    try {
+      if (tabId === 'md') {
+        const html = await loadMd(hash);
+        content.innerHTML = `<div class="viewer-prose">${html}</div>`;
+      } else {
+        await loadRaw(hash, rawExt, content);
+      }
+    } catch (err) {
+      if (tabId === 'md' && hasRaw) {
+        await showTab('raw');
+        return;
+      }
+      content.innerHTML = `<div class="viewer-error"><i class="fa-solid fa-circle-exclamation"></i> 로드 실패: ${err.message}</div>`;
+    }
+  }
+
+  drawerBody.querySelectorAll('.viewer-tab').forEach(btn => {
+    btn.addEventListener('click', () => showTab(btn.dataset.tab));
+  });
+
+  await showTab(tabs[0]?.id || 'raw');
+}

package/web/scripts/components/pdf-viewer.js

@@ -0,0 +1,188 @@
+let _pdfjsLib = null;
+
+async function getPdfjs() {
+  if (_pdfjsLib) return _pdfjsLib;
+  const mod = await import('/pdfjs/pdf.min.mjs');
+  mod.GlobalWorkerOptions.workerSrc = '/pdfjs/pdf.worker.min.mjs';
+  _pdfjsLib = mod;
+  return mod;
+}
+
+export async function renderPdfViewer(container, pdfUrl) {
+  container.innerHTML = '<div class="viewer-loading"><i class="fa-solid fa-spinner fa-spin"></i> PDF 로딩 중...</div>';
+
+  const pdfjsLib = await getPdfjs();
+  const resp = await fetch(pdfUrl);
+  const data = new Uint8Array(await resp.arrayBuffer());
+  const pdf = await pdfjsLib.getDocument({ data }).promise;
+  const totalPages = pdf.numPages;
+
+  let scale = 1.2;
+  let currentPage = 1;
+  const rendered = new Set();
+  const visibleRatios = new Map(); // page → intersectionRatio
+  let observer = null;
+
+  // ── 툴바 ──────────────────────────────────────────────────────────────
+  const toolbarSlot = document.getElementById('drawer-pdf-toolbar');
+  if (toolbarSlot) {
+    toolbarSlot.innerHTML = `
+      <div class="pdf-toolbar">
+        <div class="pdf-toolbar-left">
+          <button class="btn sm" id="pdf-prev"><i class="fa-solid fa-chevron-left"></i></button>
+          <span class="pdf-page-info">
+            <input class="pdf-page-input" id="pdf-page-num" type="number" min="1" max="${totalPages}" value="1" />
+            <span class="pdf-page-sep">/ ${totalPages}</span>
+          </span>
+          <button class="btn sm" id="pdf-next"><i class="fa-solid fa-chevron-right"></i></button>
+        </div>
+        <div class="pdf-toolbar-right">
+          <button class="btn sm" id="pdf-zoom-out"><i class="fa-solid fa-minus"></i></button>
+          <span class="pdf-zoom-label" id="pdf-zoom-label">${Math.round(scale * 100)}%</span>
+          <button class="btn sm" id="pdf-zoom-in"><i class="fa-solid fa-plus"></i></button>
+          <button class="btn sm" id="pdf-fit">맞춤</button>
+        </div>
+      </div>`;
+    toolbarSlot.classList.remove('hidden');
+  }
+
+  // ── 스크롤 컨테이너 + 페이지 플레이스홀더 ───────────────────────────
+  container.innerHTML = `<div class="pdf-scroll" id="pdf-scroll"></div>`;
+  const scroll = container.querySelector('#pdf-scroll');
+
+  // 페이지 플레이스홀더 생성 (높이는 첫 페이지 렌더 후 조정)
+  for (let i = 1; i <= totalPages; i++) {
+    const item = document.createElement('div');
+    item.className = 'pdf-page-item';
+    item.dataset.page = String(i);
+    // 임시 최소 높이 — 실제 렌더 시 캔버스로 대체
+    item.style.minHeight = '800px';
+    scroll.appendChild(item);
+  }
+
+  const pageInput = document.getElementById('pdf-page-num');
+  const zoomLabel = document.getElementById('pdf-zoom-label');
+
+  // ── 단일 페이지 렌더 ─────────────────────────────────────────────────
+  async function renderPage(num) {
+    const item = scroll.querySelector(`[data-page="${num}"]`);
+    if (!item) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    const page = await pdf.getPage(num);
+    const viewport = page.getViewport({ scale: scale * dpr });
+
+    // 기존 캔버스 제거 후 새로 생성
+    item.innerHTML = '';
+    const canvas = document.createElement('canvas');
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    const cssW = viewport.width / dpr;
+    const cssH = viewport.height / dpr;
+    canvas.style.width = `${cssW}px`;
+    canvas.style.height = `${cssH}px`;
+    item.style.minHeight = '';
+    item.style.height = `${cssH + 24}px`; // 24px 상하 패딩 포함
+    item.appendChild(canvas);
+
+    await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
+    rendered.add(num);
+  }
+
+  // ── IntersectionObserver 설정 ────────────────────────────────────────
+  function setupObserver() {
+    if (observer) observer.disconnect();
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const num = parseInt(entry.target.dataset.page, 10);
+          if (entry.isIntersecting) {
+            visibleRatios.set(num, entry.intersectionRatio);
+            if (!rendered.has(num)) renderPage(num);
+          } else {
+            visibleRatios.delete(num);
+          }
+        });
+        // 현재 가장 많이 보이는 페이지를 현재 페이지로 표시
+        let bestPage = null;
+        let bestRatio = -1;
+        visibleRatios.forEach((ratio, num) => {
+          if (ratio > bestRatio) { bestRatio = ratio; bestPage = num; }
+        });
+        if (bestPage && bestPage !== currentPage) {
+          currentPage = bestPage;
+          if (pageInput) pageInput.value = currentPage;
+          const prevBtn = document.getElementById('pdf-prev');
+          const nextBtn = document.getElementById('pdf-next');
+          if (prevBtn) prevBtn.disabled = currentPage <= 1;
+          if (nextBtn) nextBtn.disabled = currentPage >= totalPages;
+        }
+      },
+      { root: scroll, threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0] }
+    );
+    scroll.querySelectorAll('.pdf-page-item').forEach((el) => observer.observe(el));
+  }
+
+  // ── 줌 변경 시 전체 재렌더 ──────────────────────────────────────────
+  async function reRenderAll() {
+    rendered.clear();
+    visibleRatios.clear();
+    // 현재 뷰포트에 보이는 페이지들 즉시 재렌더
+    const items = scroll.querySelectorAll('.pdf-page-item');
+    const scrollRect = scroll.getBoundingClientRect();
+    for (const item of items) {
+      const rect = item.getBoundingClientRect();
+      const visible = rect.top < scrollRect.bottom && rect.bottom > scrollRect.top;
+      if (visible) {
+        const num = parseInt(item.dataset.page, 10);
+        await renderPage(num);
+      }
+    }
+    setupObserver();
+  }
+
+  // ── 특정 페이지로 스크롤 ────────────────────────────────────────────
+  function scrollToPage(num) {
+    const item = scroll.querySelector(`[data-page="${num}"]`);
+    if (item) item.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  // ── 너비 맞춤 ───────────────────────────────────────────────────────
+  async function fitWidth() {
+    const availWidth = scroll.clientWidth - 40;
+    const page1 = await pdf.getPage(1);
+    const vp = page1.getViewport({ scale: 1.0 });
+    // vp.width = PDF pt × 1.0 → CSS px at 96dpi; canvas는 scale*dpr로 렌더링되고 CSS는 scale*page_width
+    scale = Math.min(availWidth / vp.width, 2.5);
+    if (zoomLabel) zoomLabel.textContent = `${Math.round(scale * 100)}%`;
+    await reRenderAll();
+  }
+
+  // ── 툴바 이벤트 ─────────────────────────────────────────────────────
+  document.getElementById('pdf-prev')?.addEventListener('click', () => {
+    if (currentPage > 1) scrollToPage(--currentPage);
+  });
+  document.getElementById('pdf-next')?.addEventListener('click', () => {
+    if (currentPage < totalPages) scrollToPage(++currentPage);
+  });
+  document.getElementById('pdf-zoom-in')?.addEventListener('click', () => {
+    scale = Math.min(scale + 0.2, 4);
+    if (zoomLabel) zoomLabel.textContent = `${Math.round(scale * 100)}%`;
+    reRenderAll();
+  });
+  document.getElementById('pdf-zoom-out')?.addEventListener('click', () => {
+    scale = Math.max(scale - 0.2, 0.4);
+    if (zoomLabel) zoomLabel.textContent = `${Math.round(scale * 100)}%`;
+    reRenderAll();
+  });
+  document.getElementById('pdf-fit')?.addEventListener('click', fitWidth);
+  pageInput?.addEventListener('change', () => {
+    const n = Math.max(1, Math.min(totalPages, parseInt(pageInput.value) || 1));
+    currentPage = n;
+    scrollToPage(n);
+  });
+
+  // ── 초기 렌더 ───────────────────────────────────────────────────────
+  // 120% 고정 스케일로 첫 번째 보이는 페이지 렌더 → Observer 시작
+  requestAnimationFrame(() => reRenderAll());
+}