@clazic/urban 0.2.5 → 0.2.7

package/web/scripts/pages/search.js

@@ -0,0 +1,655 @@
+import { getJson, postJson } from "../api.js";
+import { qs, qsa, escapeHtml } from "../dom.js";
+import { openDrawer, closeDrawer } from "../components/drawer.js";
+import { openFileViewer } from "../components/file-viewer.js";
+import { subscribe } from "../sse.js";
+
+let extItems = {};
+let lastFtsItems = [];
+
+const INTERNAL_SOURCES = ["prism", "nanet", "dbpia"];
+const EXTERNAL_SOURCES = ["prism", "nanet", "dbpia"];
+
+function switchTab(name) {
+  qsa("[data-search-tab]").forEach((el) => {
+    const active = el.dataset.searchTab === name;
+    el.classList.toggle("active", active);
+    el.classList.toggle("hidden", !active);
+  });
+  qsa("[data-tab]").forEach((el) => el.classList.toggle("active", el.dataset.tab === name));
+}
+
+function highlightKeyword(text, q) {
+  if (!q) return escapeHtml(text);
+  const escaped = escapeHtml(text);
+  const terms = q.trim().split(/\s+/).filter(Boolean).map((t) =>
+    t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+  );
+  if (!terms.length) return escaped;
+  const re = new RegExp(`(${terms.join("|")})`, "gi");
+  return escaped.replace(re, "<mark>$1</mark>");
+}
+
+function bindChipGroup(wrap) {
+  // mount 가 여러 번 호출돼도 중복 바인딩 방지
+  if (wrap.dataset.chipBound === "1") return;
+  wrap.dataset.chipBound = "1";
+  wrap.addEventListener("click", (e) => {
+    const btn = e.target.closest("[data-source]");
+    if (!btn) return;
+    if (btn.dataset.source === "") {
+      wrap.querySelectorAll('[data-source]:not([data-source=""])').forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+      return;
+    }
+    btn.classList.toggle("active");
+    const selected = qsa('[data-source].active:not([data-source=""])', wrap);
+    const allBtn = wrap.querySelector('[data-source=""]');
+    if (allBtn) allBtn.classList.toggle("active", selected.length === 0);
+  });
+}
+
+function renderChipGroup(selector, sources) {
+  const wrap = qs(selector);
+  if (!wrap) return;
+  wrap.innerHTML = `
+    <button class="search-filter-pill active" data-source="" type="button">모든 소스</button>
+    ${sources.map((source) => `<button class="search-filter-pill" data-source="${escapeHtml(source)}" type="button">${escapeHtml(source.toUpperCase())}</button>`).join("")}
+  `;
+  bindChipGroup(wrap);
+}
+
+function getSelectedSources(selector, fallback) {
+  const selected = qsa(`${selector} [data-source].active:not([data-source=""])`)
+    .map((chip) => chip.dataset.source)
+    .filter(Boolean);
+  return selected.length ? selected : fallback;
+}
+
+function renderInternalResults(items, q, fts) {
+  return items.map((item, idx) => {
+    if (fts === "1" && item.slug) {
+      // snippet은 서버가 <mark> 포함 HTML로 내려주므로 escape 금지
+      // body/snippet 부재 시 title만 표시
+      const snippetHtml = item.snippet
+        ? `<div class="result-snippet">${item.snippet}</div>`
+        : (item.body
+            ? `<div class="result-snippet">${escapeHtml(item.body.slice(0, 160))}…</div>`
+            : "");
+      return `<div class="result result-wiki" data-wiki-idx="${idx}" data-wiki-slug="${escapeHtml(item.slug)}" role="button" tabindex="0">
+        <div class="result-body">
+          <div class="result-title"><span class="chip">WIKI</span> ${highlightKeyword(item.title || item.slug, q)}</div>
+          ${snippetHtml}
+        </div>
+      </div>`;
+    }
+    let snippet = "";
+    let institution = "";
+    let pubYear = item.year || "";
+    if (item.extracted_json) {
+      try {
+        const ext = JSON.parse(item.extracted_json);
+        snippet = ext.summary_120 || "";
+        const pubByRel = ext.relations?.find((r) => r.relation === "published_by" && r.target_type === "org");
+        if (pubByRel) institution = pubByRel.target;
+        else {
+          const writerOrg = ext.entities?.find((e) => e.kind === "organization" && /작성|주관|발행|발간/.test(e.role));
+          institution = writerOrg?.name || ext.entities?.find((e) => e.kind === "organization")?.name || "";
+        }
+        if (!pubYear) {
+          const yearRel = ext.relations?.find((r) => r.relation === "published_in" && r.target_type === "year");
+          pubYear = yearRel?.target || "";
+        }
+      } catch {}
+    }
+    const filePath = item.archive_path || item.file_path || "";
+    const fileName = filePath ? filePath.split("/").pop() : "";
+    const mdPath = item.md_path || "";
+    const metaParts = [institution, pubYear].filter(Boolean);
+    const srcKey = (item.source || "").toLowerCase();
+    const srcClass = srcKey === "prism" ? "prism" : srcKey === "nanet" ? "nanet" : "";
+    const sourceBadge = item.source ? `<span class="chip sm ${srcClass}">${escapeHtml(item.source.toUpperCase())}</span>` : "";
+    const score = item.score != null ? `<span class="result-score-pct">${Math.round(item.score * 100)}% match</span>` : "";
+    return `<div class="result result-report" data-hash="${escapeHtml(item.hash || "")}" data-raw-path="${escapeHtml(filePath)}" data-md-path="${escapeHtml(mdPath)}" role="button" tabindex="0">
+      <div class="result-body">
+        <div class="result-title">${highlightKeyword(item.title || "제목 없음", q)}</div>
+        ${snippet ? `<div class="result-snippet">${escapeHtml(snippet)}</div>` : ""}
+        ${metaParts.length ? `<div class="result-row"><span class="result-author">${escapeHtml(metaParts.join(" · "))}</span></div>` : ""}
+        ${fileName ? `<div class="result-filename">${escapeHtml(fileName)}</div>` : ""}
+      </div>
+      <div class="result-score">${sourceBadge}${score}</div>
+    </div>`;
+  }).join("") || '<div class="empty-state">결과 없음</div>';
+}
+
+function renderWikiMarkdown(markdown = "") {
+  // [[slug]] → 클릭 가능한 앵커로 치환 (drawer 내부에서 동일 drawer 재로드)
+  const replaced = markdown.replace(/\[\[([^\]]+)\]\]/g, (_, slug) => {
+    const trimmed = slug.trim();
+    return `<a href="#" class="wiki-inline-link" data-wiki-slug="${escapeHtml(trimmed)}">${escapeHtml(trimmed)}</a>`;
+  });
+  if (window.marked?.parse) return window.marked.parse(replaced);
+  // marked 미로드 fallback: pre + escape
+  return `<pre class="wiki-fallback-pre">${escapeHtml(replaced)}</pre>`;
+}
+
+async function openWikiDrawer(slug, { title, body } = {}) {
+  const drawerTitle = qs("#drawer-title");
+  const drawerBody = qs("#drawer-body");
+  const drawerActions = qs("#drawer-actions");
+  if (!drawerBody) return;
+
+  // 다른 용도(file-viewer 등)에서 남긴 drawer-wide 제거
+  document.getElementById("report-drawer")?.classList.remove("drawer-wide");
+
+  if (drawerTitle) drawerTitle.textContent = title || slug;
+  drawerBody.innerHTML = '<div class="loading-state"><div class="loading" style="margin:0 auto;"></div></div>';
+  if (drawerActions) {
+    const isDeletable = /^(topics|orgs|reports)\//.test(slug);
+    drawerActions.innerHTML = `
+      <a class="btn ghost" href="/wiki#${encodeURIComponent(slug)}">위키 페이지 열기</a>
+      ${isDeletable
+        ? `<button class="btn danger" id="wiki-delete-btn" type="button">
+             <i class="fa-solid fa-trash"></i><span>삭제</span>
+           </button>`
+        : ""}
+    `;
+    qs("#wiki-delete-btn", drawerActions)?.addEventListener("click", async () => {
+      if (!confirm(`"${slug}" 위키 페이지를 삭제하시겠습니까?\n\nFTS 색인과 파일이 제거됩니다.\n그래프 노드는 유지되며 다음 인제스트 시 자동 복구됩니다.`)) return;
+      try {
+        const encoded = slug.split("/").map(encodeURIComponent).join("/");
+        const res = await fetch(`/api/wiki/${encoded}`, { method: "DELETE" });
+        if (!res.ok) {
+          const err = await res.json().catch(() => ({}));
+          alert(`삭제 실패: ${err?.error || res.statusText}`);
+          return;
+        }
+        // 검색 결과 카드 즉시 제거
+        lastFtsItems = lastFtsItems.filter((it) => it.slug !== slug);
+        document.querySelector(`.result-wiki[data-wiki-slug="${CSS.escape(slug)}"]`)?.remove();
+        closeDrawer("report-drawer");
+      } catch (e) {
+        alert(`삭제 오류: ${e.message}`);
+      }
+    });
+  }
+  openDrawer("report-drawer");
+
+  // body가 이미 있으면 바로 렌더, 없으면 API에서 로드
+  let markdown = body || "";
+  if (!markdown) {
+    try {
+      const encoded = slug.split("/").map(encodeURIComponent).join("/");
+      const data = await getJson(`/api/wiki/${encoded}`);
+      const raw = data.content || "";
+      const fmMatch = raw.match(/^---\r?\n[\s\S]*?\r?\n---\r?\n?/);
+      markdown = fmMatch ? raw.slice(fmMatch[0].length) : raw;
+    } catch {
+      drawerBody.innerHTML = `<div class="empty-state">위키 내용을 불러올 수 없습니다: ${escapeHtml(slug)}</div>`;
+      return;
+    }
+  }
+
+  drawerBody.innerHTML = `<div class="prose viewer-prose">${renderWikiMarkdown(markdown)}</div>`;
+
+  // 드로어 내부 [[위키링크]] 클릭 → 같은 드로어 내에서 교체 로드
+  qsa(".wiki-inline-link", drawerBody).forEach((link) => {
+    link.addEventListener("click", (e) => {
+      e.preventDefault();
+      const nextSlug = link.dataset.wikiSlug;
+      if (nextSlug) openWikiDrawer(nextSlug);
+    });
+  });
+}
+
+function bindWikiResultClicks(wrap) {
+  qsa(".result-wiki", wrap).forEach((el) => {
+    const handler = () => {
+      const idx = Number(el.dataset.wikiIdx);
+      const item = lastFtsItems[idx];
+      if (!item) return;
+      openWikiDrawer(item.slug, { title: item.title, body: item.body });
+    };
+    el.addEventListener("click", handler);
+    el.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handler();
+      }
+    });
+  });
+}
+
+function bindReportResultClicks(wrap) {
+  qsa(".result-report", wrap).forEach((el) => {
+    const handler = () => {
+      const hash = el.dataset.hash;
+      if (!hash) return;
+      const rawPath = el.dataset.rawPath || null;
+      const mdPath = el.dataset.mdPath || null;
+      if (!rawPath && !mdPath) return; // hash만 있고 파일 없음 → 무반응
+      openFileViewer(hash, rawPath, mdPath);
+    };
+    el.addEventListener("click", handler);
+    el.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handler();
+      }
+    });
+  });
+}
+
+function pickSnippet(item) {
+  return (item.summary || item.outline || item.contentPreview || "").trim();
+}
+
+function renderExternalCard(item, q) {
+  const srcKey = (item.source || "").toLowerCase();
+  const srcClass = srcKey === "prism" ? "prism"
+    : srcKey === "nanet" ? "nanet"
+    : srcKey === "dbpia" ? "dbpia"
+    : "";
+  const sourceBadge = item.source
+    ? `<span class="chip sm ${srcClass}">${escapeHtml(item.source.toUpperCase())}</span>`
+    : "";
+
+  // 스니펫: 서버에서 toPlainText로 1차 정제되어 내려오지만,
+  // slice(0,800) 중간 자르기로 태그 파편이 남을 수 있어 방어적 2차 정제.
+  const snippetRaw = pickSnippet(item)
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  const snippet = snippetRaw
+    ? `<div class="result-snippet">${escapeHtml(snippetRaw.slice(0, 160))}${snippetRaw.length > 160 ? "…" : ""}</div>`
+    : "";
+
+  const authors = Array.isArray(item.authors) && item.authors.length
+    ? item.authors.slice(0, 3).join(", ") + (item.authors.length > 3 ? " 외" : "")
+    : "";
+  const metaParts = [item.institution, item.year, authors].filter(Boolean);
+  const metaRow = metaParts.length
+    ? `<div class="result-row"><span class="result-author">${escapeHtml(metaParts.join(" · "))}</span></div>`
+    : "";
+
+  const fileLine = item.fileName
+    ? `<div class="result-filename">${escapeHtml(item.fileName)}</div>`
+    : "";
+
+  const downloadUnsupported = item.downloadSupported === false;
+  const externalUrl = typeof item.url === "string" && item.url.startsWith("http") ? item.url : "";
+
+  // Phase K-2: pending_items 기반 진행 상태 복원
+  const IN_PROGRESS_LABEL = {
+    waiting: '대기 중', queued: '큐 대기', downloading: '다운로드 중', converting: '변환 중',
+    extracting: '추출 중', graph: '그래프 갱신', wiki: '위키 작성',
+  };
+  const STAGE_RANK_INITIAL = {
+    waiting:0, queued:1, downloading:2, converting:3, extracting:4, graph:5, wiki:6, done:7, failed:7,
+  };
+  const pendingStatus = item.pendingStatus;
+  const inProgress = pendingStatus && IN_PROGRESS_LABEL[pendingStatus];
+
+  let collectArea;
+  if (item.collected) {
+    collectArea = `<button class="btn sm collected-done" disabled type="button">
+         <i class="fa-solid fa-check"></i><span>수집됨</span>
+       </button>`;
+  } else if (pendingStatus === 'failed') {
+    collectArea = `<button class="btn sm" data-collect-docid="${escapeHtml(item.docid)}" type="button"
+         title="${escapeHtml(item.failedReason || '이전 시도 실패 — 재시도 가능')}">
+         <i class="fa-solid fa-rotate-right"></i><span>재시도</span>
+       </button>`;
+  } else if (inProgress) {
+    collectArea = `<button class="btn sm in-progress" disabled type="button" data-stage="${pendingStatus}">
+         <i class="fa-solid fa-spinner fa-spin"></i><span>${IN_PROGRESS_LABEL[pendingStatus]}</span>
+       </button>`;
+  } else if (downloadUnsupported) {
+    collectArea = externalUrl
+      ? `<a class="btn sm ghost" href="${escapeHtml(externalUrl)}" target="_blank" rel="noopener noreferrer"
+             title="이 소스는 서지정보 검색 전용입니다. 원문은 외부 링크에서 확인하세요.">
+           <i class="fa-solid fa-up-right-from-square"></i><span>원문 열기</span>
+         </a>`
+      : `<button class="btn sm" disabled type="button"
+               title="이 소스는 서지정보 검색 전용입니다.">
+           <i class="fa-solid fa-circle-info"></i><span>서지정보 전용</span>
+         </button>`;
+  } else {
+    collectArea = `<button class="btn sm primary" data-collect-docid="${escapeHtml(item.docid)}" type="button">
+         <i class="fa-solid fa-cloud-arrow-down"></i><span>수집</span>
+       </button>`;
+  }
+
+  const rootClass = item.collected
+    ? "result result-external is-collected"
+    : (downloadUnsupported ? "result result-external is-readonly"
+      : (inProgress ? "result result-external is-in-progress"
+        : "result result-external"));
+  const checkDisabled = (item.collected || downloadUnsupported || inProgress) ? "disabled" : "";
+  const initialRank = inProgress ? STAGE_RANK_INITIAL[pendingStatus] : -1;
+
+  return `<div class="${rootClass}" data-docid="${escapeHtml(item.docid)}" data-stage-rank="${initialRank}">
+    <input type="checkbox"
+           class="ext-item-check result-check"
+           data-docid="${escapeHtml(item.docid)}"
+           ${checkDisabled}
+           aria-label="선택" />
+    <div class="result-body">
+      <div class="result-title">${highlightKeyword(item.title || "제목 없음", q)}</div>
+      ${snippet}
+      ${metaRow}
+      ${fileLine}
+    </div>
+    <div class="result-score">
+      ${sourceBadge}
+      ${collectArea}
+    </div>
+  </div>`;
+}
+
+async function searchReports() {
+  const q = qs("#search-q")?.value.trim();
+  if (!q) return;
+  const selected = getSelectedSources("#search-source-chips", INTERNAL_SOURCES);
+  const source = selected.join(",");
+  const fts = qs("#search-fts")?.checked ? "1" : "0";
+  const params = new URLSearchParams({ q, source, fts, limit: "50" });
+  const wrap = qs("#search-results");
+  const header = qs("#search-results-header");
+  if (header) header.hidden = true;
+  if (wrap) wrap.innerHTML = '<div class="loading-state"><div class="loading" style="margin:0 auto;"></div></div>';
+
+  const startedAt = Date.now();
+  try {
+    const data = await getJson(`/api/search?${params}`);
+    const items = data.items || [];
+    lastFtsItems = fts === "1" ? items : [];
+    if (wrap) wrap.innerHTML = renderInternalResults(items, q, fts);
+    if (header) {
+      const elapsed = ((Date.now() - startedAt) / 1000).toFixed(2);
+      const countEl = qs("#search-results-count");
+      if (countEl) countEl.textContent = `${items.length}건 · ${elapsed}초`;
+      header.hidden = false;
+    }
+    if (wrap) {
+      if (fts === "1") bindWikiResultClicks(wrap);
+      else bindReportResultClicks(wrap);
+    }
+  } catch {
+    if (wrap) wrap.innerHTML = '<div class="empty-state">검색 실패</div>';
+  }
+}
+
+function bindExternalActions() {
+  const collectToolbar = qs("#ext-collect-toolbar");
+  const selectedCount = qs("#ext-selected-count");
+  const checks = qsa(".ext-item-check");
+
+  function syncSelectedCount() {
+    const checked = qsa(".ext-item-check:checked").length;
+    if (selectedCount) selectedCount.textContent = `${checked}개 선택됨`;
+    if (collectToolbar) collectToolbar.hidden = checks.length === 0;
+  }
+
+  qsa("[data-collect-docid]").forEach((button) => {
+    button.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      const docid = button.dataset.collectDocid;
+      const item = extItems[docid];
+      if (!item) {
+        console.warn("[collect] item not found for docid:", docid, "keys:", Object.keys(extItems));
+        return;
+      }
+      button.disabled = true;
+      const originalHTML = button.innerHTML;
+      button.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i><span>수집 중</span>';
+      try {
+        await postJson("/api/search/external/collect", { items: [item] });
+        // 응답은 202 즉시반환 — 실제 완료는 SSE collect:* 이벤트로 갱신
+      } catch (err) {
+        console.error("[collect] 요청 실패:", err);
+        button.disabled = false;
+        button.innerHTML = originalHTML;
+        return;
+      }
+      syncSelectedCount();
+    });
+  });
+
+  checks.forEach((check) => {
+    check.addEventListener("change", syncSelectedCount);
+    check.addEventListener("click", (e) => e.stopPropagation());
+  });
+  qs("#ext-select-all")?.addEventListener("change", (event) => {
+    checks.forEach((check) => {
+      if (check.disabled) return;  // 수집됨 카드 스킵
+      check.checked = event.currentTarget.checked;
+    });
+    syncSelectedCount();
+  });
+  syncSelectedCount();
+}
+
+/**
+ * SSE 이벤트로 외부 검색 카드 상태 갱신
+ * - collect:download / collect:convert → 스피너 + 단계 라벨
+ * - session:skip (already_indexed) → 수집됨 상태
+ * - collect:error → 실패 아이콘, 재시도 가능 상태
+ */
+const STAGE_RANK = { download:2, convert:3, extract:4, graph:5, wiki:6, done:7, error:7 };
+const STATE_TO_MARKUP = {
+  download: { label:'다운로드 중', icon:'fa-spinner fa-spin', disabled:true },
+  convert:  { label:'변환 중',     icon:'fa-spinner fa-spin', disabled:true },
+  extract:  { label:'추출 중',     icon:'fa-spinner fa-spin', disabled:true },
+  graph:    { label:'그래프 갱신', icon:'fa-spinner fa-spin', disabled:true },
+  wiki:     { label:'위키 작성',   icon:'fa-spinner fa-spin', disabled:true },
+  error:    { label:'실패 · 재시도', icon:'fa-triangle-exclamation', disabled:false },
+};
+
+function updateExternalCardByDocid(docid, state) {
+  const card = document.querySelector(`.result-external[data-docid="${CSS.escape(docid)}"]`);
+  if (!card) return;
+  // 단조 규칙: 과거 단계 이벤트 무시 (SSE 순서 역전 방어)
+  const prevRank = parseInt(card.dataset.stageRank || '-1', 10);
+  const nextRank = STAGE_RANK[state] ?? -1;
+  if (state !== 'done' && state !== 'error' && nextRank <= prevRank) return;
+  card.dataset.stageRank = String(nextRank);
+
+  const btn = card.querySelector("[data-collect-docid], .btn.collected-done, .btn.in-progress, .btn");
+  if (!btn) return;
+
+  if (state === "done") {
+    card.classList.add("is-collected");
+    card.classList.remove("is-in-progress");
+    btn.outerHTML = '<button class="btn sm collected-done" disabled type="button"><i class="fa-solid fa-check"></i><span>수집됨</span></button>';
+    const check = card.querySelector(".ext-item-check");
+    if (check) { check.disabled = true; check.checked = false; }
+    return;
+  }
+  const cfg = STATE_TO_MARKUP[state];
+  if (!cfg) return;
+  btn.disabled = cfg.disabled;
+  btn.className = `btn sm ${state === 'error' ? '' : 'in-progress'}`;
+  btn.innerHTML = `<i class="fa-solid ${cfg.icon}"></i><span>${cfg.label}</span>`;
+  if (state !== 'error') card.classList.add("is-in-progress");
+  const check = card.querySelector(".ext-item-check");
+  if (check && cfg.disabled) { check.disabled = true; check.checked = false; }
+}
+
+let _sseSubscribed = false;
+function ensureCollectSseSubscribed() {
+  if (_sseSubscribed) return;
+  _sseSubscribed = true;
+  subscribe("collect:download", (d) => d?.docid && updateExternalCardByDocid(d.docid, "download"));
+  subscribe("collect:convert",  (d) => d?.docid && updateExternalCardByDocid(d.docid, "convert"));
+  subscribe("collect:error", (d) => {
+    if (!d?.docid) return;
+    // reason 별 UI 분기 (Phase 0 P0-6)
+    const REASON_UI = {
+      download_unsupported: { label: "서지정보 전용",    retryable: false, showExternal: true },
+      license_out_of_scope: { label: "구독 범위 밖",     retryable: false, showExternal: true },
+      external_link:        { label: "외부 연계자료",    retryable: false, showExternal: true },
+      thesis_unsupported:   { label: "학위논문 미지원",  retryable: false, showExternal: true },
+      publisher_disallow:   { label: "출판사 비허용",    retryable: false, showExternal: true },
+      link_missing:         { label: "원문 링크 없음",   retryable: false, showExternal: true },
+      session_expired:      { label: "재로그인 필요",    retryable: true,  showExternal: false },
+      unknown_error:        { label: "실패 · 재시도",    retryable: true,  showExternal: false },
+    };
+    const ui = REASON_UI[d.reason] || REASON_UI.unknown_error;
+
+    if (!ui.retryable) {
+      const card = document.querySelector(`.result-external[data-docid="${CSS.escape(d.docid)}"]`);
+      const btn = card?.querySelector("[data-collect-docid], .btn");
+      if (btn) {
+        btn.outerHTML = ui.showExternal && d.url
+          ? `<a class="btn sm ghost" href="${d.url}" target="_blank" rel="noopener noreferrer" title="${ui.label}"><i class="fa-solid fa-up-right-from-square"></i><span>${ui.label}</span></a>`
+          : `<button class="btn sm" disabled type="button" title="${ui.label}"><i class="fa-solid fa-circle-info"></i><span>${ui.label}</span></button>`;
+      }
+      // 체크박스도 비활성화
+      const check = card?.querySelector(".ext-item-check");
+      if (check) { check.disabled = true; check.checked = false; }
+      return;
+    }
+    updateExternalCardByDocid(d.docid, "error");
+  });
+  subscribe("session:skip",     (d) => d?.docid && updateExternalCardByDocid(d.docid, "done"));
+  // 파이프라인 최종 완료 시그널 (wiki 또는 ingest 완료)
+  subscribe("wiki:updated",     (d) => d?.docid && updateExternalCardByDocid(d.docid, "done"));
+  // Phase K-2: extract/graph/wiki 단계 전환 이벤트 반영
+  subscribe("item_stage", (d) => {
+    if (!d?.docid) return;
+    const MAP = {
+      extracting: 'extract',
+      graph: 'graph',
+      wiki: 'wiki',
+      done: 'done',
+      failed: 'error',
+    };
+    const state = MAP[d.stage];
+    if (state) updateExternalCardByDocid(d.docid, state);
+  });
+}
+
+async function searchExternal() {
+  const q = qs("#ext-search-q")?.value.trim();
+  if (!q) return;
+  const sources = getSelectedSources("#ext-source-chips", EXTERNAL_SOURCES);
+  const wrap = qs("#ext-search-results");
+  const header = qs("#ext-search-results-header");
+  const loading = qs("#search-loading");
+  const collectToolbar = qs("#ext-collect-toolbar");
+  extItems = {};
+  if (header) header.hidden = true;
+  if (collectToolbar) collectToolbar.hidden = true;
+  if (loading) loading.hidden = false;
+  if (wrap) wrap.innerHTML = '<div class="loading-state"><div class="loading" style="margin:0 auto;"></div></div>';
+
+  const startedAt = Date.now();
+  try {
+    // strict 토글: 기본 true (확인된 것만). localStorage 저장.
+    const includeUnknown = localStorage.getItem("urban.dbpia.includeUnknown") === "1";
+    const strict = includeUnknown ? "0" : "1";
+
+    const params = new URLSearchParams({ q, sources: sources.join(","), limit: "20", strict });
+    const data = await getJson(`/api/search/external?${params}`);
+
+    // warmupMode: cache row < 50 → 토글 무효화 + 배너 노출 + 강제 unknown 포함
+    const warmupMode = !!data.warmupMode;
+    const banner = qs("#ext-warmup-banner");
+    const toggle = qs("#ext-include-unknown");
+    if (banner) banner.hidden = !warmupMode;
+    if (toggle) toggle.disabled = warmupMode;
+    if (warmupMode && toggle) toggle.checked = true; // 시각적으로 "미확인 포함"
+
+    let total = 0;
+    const html = Object.values(data.sources || {}).map((sourceData) => {
+      total += sourceData.count || 0;
+      const cards = (sourceData.items || []).map((item) => {
+        extItems[item.docid] = item;
+        return renderExternalCard(item, q);
+      }).join("") || '<div class="empty-state">결과 없음</div>';
+      return `<section class="search-section-block">
+        <div class="search-section-head">
+          <div class="search-section-kicker">External</div>
+          <h2 class="search-section-title">${escapeHtml((sourceData.sourceId || "").toUpperCase())}</h2>
+        </div>
+        <div class="search-results-stack">${cards}</div>
+      </section>`;
+    }).join("");
+
+    if (wrap) wrap.innerHTML = html || '<div class="empty-state">결과 없음</div>';
+    if (header) {
+      const elapsed = ((Date.now() - startedAt) / 1000).toFixed(2);
+      const countEl = qs("#ext-search-results-count");
+      if (countEl) countEl.textContent = `${total}건 · ${elapsed}초`;
+      header.hidden = false;
+    }
+    bindExternalActions();
+  } catch {
+    if (wrap) wrap.innerHTML = '<div class="empty-state">외부 검색 실패</div>';
+  } finally {
+    if (loading) loading.hidden = true;
+  }
+}
+
+export async function mount(_root, params) {
+  switchTab("external");
+  renderChipGroup("#search-source-chips", INTERNAL_SOURCES);
+  renderChipGroup("#ext-source-chips", EXTERNAL_SOURCES);
+
+  // 외부 수집 상태 실시간 갱신 — SSE 구독 (첫 mount에서 1회만)
+  ensureCollectSseSubscribed();
+
+  // 전역 drawer 닫기 버튼/오버레이 — 중복 바인딩 방지
+  const closeBtn = qs("#drawer-close-btn");
+  if (closeBtn && !closeBtn.dataset.boundSearch) {
+    closeBtn.addEventListener("click", () => closeDrawer("report-drawer"));
+    closeBtn.dataset.boundSearch = "1";
+  }
+  const overlay = qs("#drawer-overlay");
+  if (overlay && !overlay.dataset.boundSearch) {
+    overlay.addEventListener("click", () => closeDrawer("report-drawer"));
+    overlay.dataset.boundSearch = "1";
+  }
+
+  qsa("[data-tab]").forEach((button) => button.addEventListener("click", () => switchTab(button.dataset.tab)));
+  qsa("[data-sort]").forEach((button) => button.addEventListener("click", () => {
+    qsa("[data-sort]").forEach((b) => b.classList.remove("active"));
+    button.classList.add("active");
+  }));
+
+  qs("#search-submit")?.addEventListener("click", searchReports);
+  qs("#ext-search-submit")?.addEventListener("click", searchExternal);
+  qs("#ext-collect-submit")?.addEventListener("click", async () => {
+    const selected = qsa(".ext-item-check:checked").map((el) => extItems[el.dataset.docid]).filter(Boolean);
+    if (selected.length) await postJson("/api/search/external/collect", { items: selected });
+  });
+
+  qs("#search-q")?.addEventListener("keydown", (e) => { if (e.key === "Enter") searchReports(); });
+  qs("#ext-search-q")?.addEventListener("keydown", (e) => { if (e.key === "Enter") searchExternal(); });
+
+  // 미확인 자료 포함 토글 — 초기값 복원 + 변경 시 재검색
+  const includeUnknownToggle = qs("#ext-include-unknown");
+  if (includeUnknownToggle) {
+    includeUnknownToggle.checked = localStorage.getItem("urban.dbpia.includeUnknown") === "1";
+    includeUnknownToggle.addEventListener("change", (e) => {
+      if (e.currentTarget.disabled) return;  // warmupMode 중에는 토글 무효
+      localStorage.setItem("urban.dbpia.includeUnknown", e.currentTarget.checked ? "1" : "0");
+      if (qs("#ext-search-q")?.value.trim()) searchExternal();
+    });
+  }
+
+  const initialQ = params.get("q");
+  if (initialQ && qs("#search-q")) {
+    qs("#search-q").value = initialQ;
+    searchReports();
+  }
+}
+
+export async function unmount() {
+  extItems = {};
+  lastFtsItems = [];
+  closeDrawer("report-drawer");
+}
+
+export default { mount, unmount };