@clazic/urban 0.2.5 → 0.2.7

package/web/scripts/pages/pending.js

@@ -0,0 +1,503 @@
+import { getJson, postJson } from "../api.js";
+import { qs, escapeHtml } from "../dom.js";
+import { renderPipelineBar } from "../components/pipeline-strip.js";
+import { subscribe } from "../sse.js";
+
+let unsubscribeItemStage = null;
+let unsubscribeKordoc = null;
+let unsubscribeKordocInline = null;
+let trackedDocid = null;
+let reloadTimer = null;
+let currentStageLog = null;
+
+// kordoc 이벤트 로그 버퍼
+const logBuffer = [];
+const LOG_MAX = 100;
+
+// rAF 배칭 상태
+let pendingKordoc = [];
+let rafHandle = null;
+
+let unsubscribePipelineStats = null;
+
+/**
+ * 실패 항목 재시도. block_cache 히트 시 사용자에게 해제 여부 확인 후 force=true 로 재호출.
+ */
+async function retryPendingItem(docid, { force = false } = {}) {
+  try {
+    const res = await fetch(`/api/pending/${encodeURIComponent(docid)}/retry`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ force }),
+    });
+    const body = await res.json().catch(() => ({}));
+
+    if (res.status === 409 && body?.reason === "blocked_by_cache") {
+      const msg = [
+        `이 항목은 과거 수집에서 차단 학습되었습니다.`,
+        ``,
+        `  상태: ${body.status}`,
+        body.detail ? `  사유: ${body.detail}` : null,
+        ``,
+        `차단 캐시를 해제하고 재시도하시겠습니까?`,
+      ].filter(Boolean).join("\n");
+      if (window.confirm(msg)) {
+        return retryPendingItem(docid, { force: true });
+      }
+      return { ok: false, cancelled: true };
+    }
+    if (!res.ok) {
+      throw new Error(body?.error || `재시도 실패 (HTTP ${res.status})`);
+    }
+    return body;
+  } catch (error) {
+    console.error("retryPendingItem failed", error);
+    alert(`재시도 실패: ${error.message}`);
+    return { ok: false, error: error.message };
+  }
+}
+
+function schedulePendingReload() {
+  clearTimeout(reloadTimer);
+  reloadTimer = setTimeout(() => {
+    loadPending().catch((error) => console.error("pending reload failed", error));
+    if (trackedDocid) showStageTrack(trackedDocid).catch(() => {});
+  }, 180);
+}
+
+async function loadPending() {
+  const data = await getJson("/api/pending");
+  const items = data.items || [];
+  const pipeline = qs("#pending-pipeline");
+  const list = qs("#pending-list");
+  const counts = Object.fromEntries(["waiting", "queued", "downloading", "converting", "extracting", "graph", "wiki", "done"].map((key) => [key, 0]));
+  let failedCount = 0;
+
+  items.forEach((item) => {
+    if (item.status in counts) counts[item.status] += 1;
+    if (item.status === "failed") failedCount += 1;
+  });
+
+  renderPipelineBar(pipeline, counts, failedCount);
+
+  if (list) {
+    list.innerHTML = items.filter((item) => ["waiting", "queued", "downloading", "converting", "extracting", "graph", "wiki", "failed"].includes(item.status)).map((item) => {
+      const isFailed = item.status === "failed";
+      const failedMeta = isFailed && item.failed_reason ? `<div class="card-sub" style="color:var(--danger); margin-top:2px" title="${escapeHtml(item.failed_reason)}">실패${item.failed_stage ? `·${escapeHtml(item.failed_stage)}` : ""}: ${escapeHtml(String(item.failed_reason).slice(0, 120))}</div>` : "";
+      return `
+      <div class="t-row pending-row" data-pending-row="${escapeHtml(item.docid)}">
+        <div><input type="checkbox" data-pending-select="${escapeHtml(item.docid)}" /></div>
+        <div>
+          <div>${escapeHtml(item.display_title || item.title || item.raw_filename || item.docid || "항목")}</div>
+          <div class="card-sub">${escapeHtml(item.source || "")}</div>
+          ${failedMeta}
+          ${item.status === "converting" ? (() => {
+            let inner = "", cls = "";
+            try {
+              const p = item.kordoc_progress ? JSON.parse(item.kordoc_progress) : null;
+              if (p?.stage) {
+                const label = KORDOC_STAGE_LABELS[p.stage] ?? p.stage;
+                const hasPages = typeof p.current === "number" && typeof p.total === "number";
+                const hasPct = typeof p.percent === "number";
+                const modelHint = (p.stage === "ocr" && p.model) ? ` · ${p.model}` : "";
+                if (hasPages || hasPct) {
+                  const pct = hasPages ? (p.total > 0 ? Math.round((p.current / p.total) * 100) : 0) : p.percent;
+                  const countLabel = hasPages ? `${p.current}/${p.total}` : `${pct}%`;
+                  inner = `<div class="kordoc-progress-row"><span>${escapeHtml(label)} ${countLabel}${escapeHtml(modelHint)}</span><div class="kordoc-bar"><div class="kordoc-bar-fill" style="width:${pct}%"></div></div><span class="kordoc-pct">${pct}%</span></div>`;
+                  cls = "is-progress";
+                } else {
+                  // 진행 정보 없는 단계 → 로딩 바 (is-start는 바 없어 시각적 피드백 없음)
+                  inner = `<span>▶ ${escapeHtml(label)}${escapeHtml(modelHint)}</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`;
+                  cls = "is-loading";
+                }
+              } else {
+                // kordoc_progress 없음 = probe 이벤트 도착 전 초기 변환 단계
+                inner = `<span>변환 준비 중</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`;
+                cls = "is-loading";
+              }
+            } catch {}
+            const fileTag = item.raw_filename ? `<div class="card-sub" style="margin-bottom:2px;font-size:0.78em;opacity:0.65">${escapeHtml(item.raw_filename)}</div>` : "";
+            return `${fileTag}<div class="kordoc-inline-status${cls ? " " + cls : ""}" data-kordoc-docid="${escapeHtml(item.docid)}">${inner}</div>`;
+          })() : ""}
+        </div>
+        <div><span class="chip ${isFailed ? "chip-danger" : ""}">${escapeHtml(item.status || "")}</span></div>
+        <div>${item.found_at ? new Date(item.found_at).toLocaleDateString("ko-KR") : (item.created_at ? new Date(item.created_at).toLocaleDateString("ko-KR") : "")}</div>
+        <div class="pending-actions">
+          <button class="btn sm ghost" data-track-id="${escapeHtml(item.docid)}">상세</button>
+        </div>
+        <div class="pending-actions">
+          ${item.status === "waiting" ? `<button class="btn sm" data-approve-id="${escapeHtml(item.docid)}">승인</button><button class="btn sm danger" data-reject-id="${escapeHtml(item.docid)}">거절</button>` : ""}
+          ${isFailed ? `<button class="btn sm" data-retry-id="${escapeHtml(item.docid)}">재시도</button>` : ""}
+        </div>
+      </div>
+    `;}).join("") || '<div class="empty-state">대기 항목 없음</div>';
+
+    list.querySelectorAll("[data-approve-id]").forEach((button) => button.addEventListener("click", async () => {
+      await postJson(`/api/pending/${encodeURIComponent(button.dataset.approveId)}/approve`);
+      await loadPending();
+    }));
+
+    list.querySelectorAll("[data-reject-id]").forEach((button) => button.addEventListener("click", async () => {
+      await postJson(`/api/pending/${encodeURIComponent(button.dataset.rejectId)}/reject`);
+      await loadPending();
+    }));
+
+    list.querySelectorAll("[data-retry-id]").forEach((button) => button.addEventListener("click", async () => {
+      const docid = button.dataset.retryId;
+      await retryPendingItem(docid, { force: false });
+      await loadPending();
+    }));
+
+    list.querySelectorAll("[data-track-id]").forEach((button) => button.addEventListener("click", () => showStageTrack(button.dataset.trackId)));
+  }
+}
+
+function formatDuration(ms) {
+  if (ms == null) return "";
+  return ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+/** item_stage 이벤트: 해당 행의 status chip + kordoc 인디케이터 직접 업데이트 */
+function updateRowStatus(docid, newStatus) {
+  const row = document.querySelector(`[data-pending-row="${CSS.escape(docid)}"]`);
+  if (!row) return false;
+
+  // status chip
+  const chip = row.querySelector(".chip");
+  if (chip) {
+    chip.textContent = newStatus;
+    chip.className = `chip${newStatus === "failed" ? " chip-danger" : ""}`;
+  }
+
+  // converting 진입 시 kordoc 인디케이터 초기화
+  if (newStatus === "converting") {
+    let kordocEl = row.querySelector("[data-kordoc-docid]");
+    if (!kordocEl) {
+      // 아직 div 없음 → 제목 column에 삽입
+      const infoCol = row.children[1];
+      if (infoCol) {
+        kordocEl = document.createElement("div");
+        kordocEl.dataset.kordocDocid = docid;
+        infoCol.appendChild(kordocEl);
+      }
+    }
+    if (kordocEl && !kordocEl.className.includes("is-progress") && !kordocEl.className.includes("is-done")) {
+      kordocEl.innerHTML = `<span>변환 준비 중</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`;
+      kordocEl.className = "kordoc-inline-status is-loading";
+    }
+  }
+
+  return true;
+}
+
+/** item_stage done/dismissed: 해당 행 즉시 제거 */
+function removeRowByDocid(docid) {
+  document.querySelector(`[data-pending-row="${CSS.escape(docid)}"]`)?.remove();
+}
+
+const KORDOC_STAGE_LABELS = { convert: "변환", render: "렌더링", probe: "속도측정", ocr: "OCR", proofread: "교정", merge: "병합" };
+
+function updateKordocInline(payload) {
+  const { docid, kordocStage, phase, current, total, error, from, to, message, model } = payload;
+  const el = document.querySelector(`[data-kordoc-docid="${CSS.escape(docid)}"]`);
+  if (!el) return;
+
+  if (kordocStage === "provider_fallback") {
+    el.textContent = `⇢ ${from ?? "?"} → ${to ?? "?"}`;
+    el.className = "kordoc-inline-status is-fallback";
+    return;
+  }
+
+  const label = KORDOC_STAGE_LABELS[kordocStage] ?? kordocStage;
+
+  // ocr·proofread는 페이지마다 stage_start가 반복 발생 — start는 무시, progress/done만 처리
+  const CYCLE_STAGES = new Set(["ocr", "proofread"]);
+  if (phase === "start" && CYCLE_STAGES.has(kordocStage)) {
+    // OCR 모델명을 첫 start 이벤트에서 캡처해 progress 표시에 활용
+    if (kordocStage === "ocr" && !el.dataset.ocrModel) {
+      const modelName = model || message?.match(/\((.+?)\)/)?.[1];
+      if (modelName) el.dataset.ocrModel = modelName;
+    }
+    return;
+  }
+
+  if (phase === "start") {
+    // 모든 단계 시작: 로딩 바 표시 (is-start는 바 없어 시각적 피드백 없음)
+    el.innerHTML = `<span>▶ ${escapeHtml(label)}</span><div class="kordoc-bar"><div class="kordoc-bar-fill"></div></div>`;
+    el.className = "kordoc-inline-status is-loading";
+  } else if (phase === "progress") {
+    const hasPages = typeof current === "number" && typeof total === "number";
+    const pct = payload.percent ?? (hasPages && total > 0 ? Math.round((current / total) * 100) : 0);
+    const countLabel = hasPages ? `${current}/${total}` : `${pct}%`;
+    // progress 이벤트에서도 model 캡처 (페이지 재로드 후 start 이벤트를 못 받은 경우 대비)
+    if (kordocStage === "ocr" && !el.dataset.ocrModel) {
+      const modelName = model || message?.match(/\((.+?)\)/)?.[1];
+      if (modelName) el.dataset.ocrModel = modelName;
+    }
+    // render 총 페이지 수 캐시 (done 상태 표시용)
+    if (kordocStage === "render" && hasPages) el.dataset.renderTotal = String(total);
+    const modelHint = kordocStage === "ocr" && el.dataset.ocrModel ? ` · ${el.dataset.ocrModel}` : "";
+    el.innerHTML = `<div class="kordoc-progress-row"><span>${escapeHtml(label)} ${countLabel}${escapeHtml(modelHint)}</span><div class="kordoc-bar"><div class="kordoc-bar-fill" style="width:${pct}%"></div></div><span class="kordoc-pct">${pct}%</span></div>`;
+    el.className = "kordoc-inline-status is-progress";
+  } else if (phase === "done") {
+    const ocrModel = kordocStage === "ocr" && el.dataset.ocrModel ? ` · ${el.dataset.ocrModel}` : "";
+    const renderPages = kordocStage === "render" && el.dataset.renderTotal ? ` · ${el.dataset.renderTotal}장` : "";
+    el.textContent = `✓ ${label}${ocrModel}${renderPages} ${formatDuration(payload.duration_ms)}`.trimEnd();
+    el.className = "kordoc-inline-status is-done";
+  } else if (phase === "error") {
+    el.textContent = `✗ ${label}: ${error ?? ""}`;
+    el.className = "kordoc-inline-status is-error";
+  }
+}
+
+function appendLogLine({ kind, text }) {
+  const ts = new Date().toTimeString().slice(0, 8);
+  logBuffer.push({ ts, kind, text });
+  if (logBuffer.length > LOG_MAX) logBuffer.shift();
+  renderLog();
+}
+
+function renderLog() {
+  const container = document.getElementById("kordoc-event-log");
+  const section = document.getElementById("kordoc-event-log-section");
+  if (!container) return;
+  if (section) section.hidden = false;
+  container.innerHTML = logBuffer.map((e) =>
+    `<div class="log-line is-${e.kind}">${escapeHtml(e.ts)}  ${escapeHtml(e.text)}</div>`
+  ).join("");
+  container.scrollTop = container.scrollHeight;
+}
+
+function updateKordocPanel(payload) {
+  const { kordocStage, phase, current, total, duration_ms, error, from, to, reason, message, model } = payload;
+  const section = document.getElementById("kordoc-substages");
+  if (section) section.hidden = false;
+
+  if (kordocStage === "provider_fallback") {
+    appendLogLine({ kind: "fallback", text: `⇢ ${from ?? "?"} → ${to ?? "?"} (${reason ?? ""})` });
+    return;
+  }
+
+  const li = section?.querySelector(`li[data-sub="${kordocStage}"]`);
+  if (!li) return;
+  const icon = li.querySelector(".icon");
+  const meta = li.querySelector(".meta");
+  li.classList.remove("is-start", "is-done", "is-error");
+
+  if (phase === "start") {
+    li.classList.add("is-start");
+    if (icon) icon.textContent = "▶";
+    if (meta) {
+      if (kordocStage === "ocr") {
+        // 모델명은 start 첫 발생 시 캡처 (페이지마다 반복 발생하므로 기존 값 유지)
+        const modelName = model || message?.match(/\((.+?)\)/)?.[1];
+        if (modelName) li.dataset.ocrModel = modelName;
+        meta.textContent = li.dataset.ocrModel || "";
+      } else {
+        meta.textContent = "";
+      }
+    }
+    const modelSuffix = kordocStage === "ocr" && (model || message?.match(/\((.+?)\)/)?.[1])
+      ? ` (${model || message.match(/\((.+?)\)/)[1]})` : "";
+    appendLogLine({ kind: "start", text: `${kordocStage} start${modelSuffix}` });
+  } else if (phase === "progress") {
+    if (icon) icon.textContent = "…";
+    if (typeof current === "number" && typeof total === "number") {
+      if (meta) meta.textContent = `${current}/${total}`;
+      const fill = li.querySelector(".progress-fill");
+      if (fill) fill.style.width = `${Math.max(0, Math.min(100, (current / total) * 100))}%`;
+      // render 총 페이지 수 캐시
+      if (kordocStage === "render") li.dataset.renderTotal = String(total);
+    }
+  } else if (phase === "done") {
+    li.classList.add("is-done");
+    if (icon) icon.textContent = "✅";
+    if (meta) {
+      const ocrModel = kordocStage === "ocr" && li.dataset.ocrModel ? `${li.dataset.ocrModel} · ` : "";
+      const renderPages = kordocStage === "render" && li.dataset.renderTotal ? `${li.dataset.renderTotal}장 · ` : "";
+      meta.textContent = `${ocrModel}${renderPages}${formatDuration(duration_ms)}`;
+    }
+    appendLogLine({ kind: "done", text: `${kordocStage} done ${formatDuration(duration_ms)}` });
+  } else if (phase === "error") {
+    li.classList.add("is-error");
+    if (icon) icon.textContent = "✗";
+    if (meta) meta.textContent = error ?? "";
+    appendLogLine({ kind: "error", text: `${kordocStage} ERROR: ${error ?? "unknown"}` });
+  }
+}
+
+function scheduleKordocUpdate(payload) {
+  pendingKordoc.push(payload);
+  if (rafHandle) return;
+  rafHandle = requestAnimationFrame(() => {
+    const batch = pendingKordoc;
+    pendingKordoc = [];
+    rafHandle = null;
+    const latestByKey = new Map();
+    for (const p of batch) {
+      const key = `${p.kordocStage}:${p.phase === "progress" ? "progress" : p.phase}`;
+      latestByKey.set(key, p);
+    }
+    for (const p of latestByKey.values()) updateKordocPanel(p);
+  });
+}
+
+function resetKordocPanel() {
+  logBuffer.length = 0;
+  const substages = document.getElementById("kordoc-substages");
+  if (substages) {
+    substages.hidden = true;
+    substages.querySelectorAll("li").forEach((li) => {
+      li.classList.remove("is-start", "is-done", "is-error");
+      const icon = li.querySelector(".icon");
+      const meta = li.querySelector(".meta");
+      const fill = li.querySelector(".progress-fill");
+      if (icon) icon.textContent = "○";
+      if (meta) meta.textContent = "";
+      if (fill) fill.style.width = "0";
+    });
+  }
+  const logSection = document.getElementById("kordoc-event-log-section");
+  if (logSection) logSection.hidden = true;
+  const logEl = document.getElementById("kordoc-event-log");
+  if (logEl) { logEl.innerHTML = ""; logEl.classList.remove("is-collapsed"); }
+}
+
+async function showStageTrack(docid) {
+  trackedDocid = docid;
+  resetKordocPanel();
+  unsubscribeKordoc?.();
+  unsubscribeKordoc = subscribe("kordoc_stage", (payload) => {
+    if (payload?.docid !== trackedDocid) return;
+    scheduleKordocUpdate(payload);
+  });
+
+  document.getElementById("drawer-overlay")?.classList.remove("hidden");
+  document.getElementById("stage-track-panel")?.classList.add("open");
+  const content = document.getElementById("stage-track-content");
+  if (!content) return;
+  content.innerHTML = '<div class="loading-state"><div class="loading" style="margin:0 auto;"></div></div>';
+  try {
+    const item = await getJson(`/api/pending/${encodeURIComponent(docid)}`);
+    currentStageLog = item.stage_log ?? [];
+    content.innerHTML = currentStageLog.map((entry) => `
+      <div class="stage-toast-item">
+        <div class="stage-toast-item-title">${escapeHtml(entry.stage)}</div>
+        <div class="stage-toast-item-sub">${new Date(entry.ts).toLocaleTimeString("ko-KR")} ${entry.duration_ms ? `· ${entry.duration_ms}ms` : ""}</div>
+      </div>
+    `).join("") || '<div class="empty-state">기록 없음</div>';
+
+    // stage_log에서 kordoc 서브스테이지 복원
+    const kordocEntries = currentStageLog.filter((e) => e.stage === "extracting" && e.sub);
+    for (const e of kordocEntries) {
+      if (e.sub === "kordoc:provider_fallback") {
+        updateKordocPanel({ docid, kordocStage: "provider_fallback", phase: "start",
+          from: e.meta?.from, to: e.meta?.to, reason: e.meta?.reason });
+      } else {
+        const sub = e.sub.replace(/^kordoc:/, "");
+        updateKordocPanel({ docid, kordocStage: sub,
+          phase: e.phase === "end" ? "done" : e.phase,
+          duration_ms: e.duration_ms, error: e.error });
+      }
+    }
+  } catch (error) {
+    content.innerHTML = '<div class="empty-state">로드 실패</div>';
+  }
+}
+
+function bindBulkActions() {
+  qs("#pending-select-all")?.addEventListener("change", (event) => {
+    document.querySelectorAll("[data-pending-select]").forEach((el) => {
+      el.checked = event.currentTarget.checked;
+    });
+  });
+
+  qs("#pending-approve-selected")?.addEventListener("click", async () => {
+    const ids = Array.from(document.querySelectorAll("[data-pending-select]:checked")).map((el) => el.dataset.pendingSelect);
+    await Promise.all(ids.map((id) => postJson(`/api/pending/${encodeURIComponent(id)}/approve`)));
+    await loadPending();
+  });
+
+  qs("#pending-reject-selected")?.addEventListener("click", async () => {
+    const ids = Array.from(document.querySelectorAll("[data-pending-select]:checked")).map((el) => el.dataset.pendingSelect);
+    await Promise.all(ids.map((id) => postJson(`/api/pending/${encodeURIComponent(id)}/reject`)));
+    await loadPending();
+  });
+}
+
+export async function mount() {
+  bindBulkActions();
+  unsubscribeItemStage = subscribe("item_stage", (payload) => {
+    const { docid, stage, phase } = payload ?? {};
+    if (!docid) return;
+
+    // 새 항목 진입 or 실패 → 전체 재조회 (행 데이터·에러 메시지 필요)
+    if ((stage === "waiting" && phase === "start") || phase === "error") {
+      schedulePendingReload();
+      return;
+    }
+    // 완료·기각 → 행 즉시 제거
+    if ((stage === "done" || stage === "dismissed") && phase === "end") {
+      removeRowByDocid(docid);
+      return;
+    }
+    // 상태 전환 → chip + kordoc 인디케이터 직접 업데이트
+    if (phase === "start") {
+      const found = updateRowStatus(docid, stage);
+      // 행이 아직 없으면 (예: 다른 탭에서 추가된 항목) 전체 재조회
+      if (!found) schedulePendingReload();
+    }
+  });
+
+  // pipeline_stats SSE → 파이프라인 카운터 직접 갱신 (폴링 없이)
+  unsubscribePipelineStats = subscribe("pipeline_stats", (payload) => {
+    if (!payload?.byStatus) return;
+    const pipeline = qs("#pending-pipeline");
+    if (!pipeline) return;
+    const failedCount = payload.byStatus.failed || 0;
+    renderPipelineBar(pipeline, payload.byStatus, failedCount);
+  });
+
+  unsubscribeKordocInline = subscribe("kordoc_stage", (payload) => {
+    if (payload?.docid) updateKordocInline(payload);
+  });
+
+  document.getElementById("kordoc-log-toggle")?.addEventListener("click", () => {
+    document.getElementById("kordoc-event-log")?.classList.toggle("is-collapsed");
+  });
+  document.getElementById("kordoc-copy-log")?.addEventListener("click", async () => {
+    const text = JSON.stringify(currentStageLog ?? [], null, 2);
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (err) {
+      console.warn("clipboard error", err);
+    }
+  });
+  document.getElementById("stage-track-close-btn")?.addEventListener("click", () => {
+    document.getElementById("drawer-overlay")?.classList.add("hidden");
+    document.getElementById("stage-track-panel")?.classList.remove("open");
+    unsubscribeKordoc?.();
+    unsubscribeKordoc = null;
+    trackedDocid = null;
+  });
+
+  await loadPending();
+}
+
+export async function unmount() {
+  unsubscribeItemStage?.();
+  unsubscribeItemStage = null;
+  unsubscribeKordoc?.();
+  unsubscribeKordoc = null;
+  unsubscribeKordocInline?.();
+  unsubscribeKordocInline = null;
+  unsubscribePipelineStats?.();
+  unsubscribePipelineStats = null;
+  trackedDocid = null;
+  currentStageLog = null;
+  clearTimeout(reloadTimer);
+  if (rafHandle) { cancelAnimationFrame(rafHandle); rafHandle = null; }
+  pendingKordoc = [];
+}
+
+export default { mount, unmount };

package/web/scripts/pages/schedules.js

@@ -0,0 +1,134 @@
+import { getJson, postJson, patchJson, deleteJson } from "../api.js";
+import { qs, qsa, escapeHtml } from "../dom.js";
+
+async function loadSources(targetId) {
+  const wrap = qs(`#${targetId}`);
+  if (!wrap) return;
+  const data = await getJson("/api/skills");
+  wrap.innerHTML = (data.skills || []).map((skill) => `
+    <label class="chip"><input type="checkbox" value="${escapeHtml(skill.id)}" /> <span>${escapeHtml(skill.name || skill.id)}</span></label>
+  `).join("");
+}
+
+function selectedSources(targetId) {
+  return qsa(`#${targetId} input[type="checkbox"]:checked`).map((el) => el.value);
+}
+
+async function loadSchedules() {
+  const data = await getJson("/api/schedules");
+  const items = data.items || [];
+  if (qs("#schedule-stat-total")) qs("#schedule-stat-total").textContent = String(items.length);
+  if (qs("#schedule-stat-active")) qs("#schedule-stat-active").textContent = String(items.filter((item) => item.is_active).length);
+  if (qs("#schedule-stat-auto-approve")) qs("#schedule-stat-auto-approve").textContent = String(items.filter((item) => item.auto_approve).length);
+  if (qs("#schedule-stat-next")) qs("#schedule-stat-next").textContent = items.find((item) => item.next_run_at)?.next_run_at ? "예정" : "-";
+  const list = qs("#schedules-list");
+  if (!list) return;
+  list.innerHTML = items.map((item) => `
+    <div class="t-row schedules-row">
+      <div>
+        <div style="font-weight:510;font-size:13.5px;">${escapeHtml(item.keyword)}</div>
+        <div style="font-size:12px;color:var(--label-3);margin-top:2px;">${escapeHtml((() => { try { return JSON.parse(item.sources || "[]").join(" · "); } catch { return item.sources || ""; } })())} · ${item.is_active ? "활성" : "비활성"}</div>
+      </div>
+      <span class="chip">${escapeHtml(item.schedule_type || "")}</span>
+      <span style="font-size:12.5px;color:var(--label-2);font-family:var(--ff-mono);">${escapeHtml(item.schedule_value || "-")}</span>
+      <div>${item.auto_approve ? '<span class="chip ok">자동</span>' : '<span class="chip">수동</span>'}</div>
+      <div class="schedules-actions" style="display:flex;gap:6px;">
+        <button class="btn sm" data-edit-id="${item.id}">수정</button>
+        <button class="btn sm" data-toggle-id="${item.id}">토글</button>
+        <button class="btn sm danger" data-delete-id="${item.id}">삭제</button>
+      </div>
+    </div>
+  `).join("") || '<div class="empty-state">스케줄 없음</div>';
+  qsa("[data-edit-id]").forEach((button) => button.addEventListener("click", () => openEdit(button.dataset.editId, items)));
+  qsa("[data-toggle-id]").forEach((button) => button.addEventListener("click", async () => {
+    await postJson(`/api/schedules/${button.dataset.toggleId}/toggle`);
+    loadSchedules();
+  }));
+  qsa("[data-delete-id]").forEach((button) => button.addEventListener("click", async () => {
+    await deleteJson(`/api/schedules/${button.dataset.deleteId}`);
+    loadSchedules();
+  }));
+}
+
+async function createSchedule() {
+  const keyword = qs("#schedule-keyword")?.value.trim();
+  if (!keyword) return;
+  let scheduleValue = qs("#schedule-time")?.value || "";
+  if (qs("#schedule-type")?.value === "weekly") scheduleValue = `${qs("#schedule-dow")?.value || "monday"} ${qs("#schedule-time")?.value || "09:00"}`;
+  if (qs("#schedule-type")?.value === "interval") scheduleValue = qs("#schedule-interval")?.value || "";
+  const body = {
+    keyword,
+    sources: JSON.stringify(selectedSources("schedule-sources-list")),
+    schedule_type: qs("#schedule-type")?.value || "daily",
+    schedule_value: scheduleValue,
+    auto_approve: Boolean(qs("#schedule-auto-approve")?.checked),
+  };
+  await postJson("/api/schedules", body);
+  qs("#schedule-form")?.classList.add("hidden");
+  loadSchedules();
+}
+
+async function openEdit(id, items) {
+  const item = items.find((entry) => String(entry.id) === String(id));
+  if (!item) return;
+  qs("#schedule-edit-modal")?.classList.remove("hidden");
+  qs("#edit-schedule-id").value = item.id;
+  qs("#edit-schedule-keyword").value = item.keyword || "";
+  qs("#edit-schedule-type").value = item.schedule_type || "daily";
+  qs("#edit-schedule-auto-approve").checked = Boolean(item.auto_approve);
+  qs("#edit-schedule-time").value = item.schedule_value || "09:00";
+  qs("#edit-schedule-interval").value = item.schedule_value || "";
+  qs("#edit-schedule-cron").value = item.schedule_value || "";
+  await loadSources("edit-schedule-sources-list");
+  let selected = [];
+  try { selected = JSON.parse(item.sources || "[]"); } catch {}
+  qsa('#edit-schedule-sources-list input[type="checkbox"]').forEach((checkbox) => {
+    checkbox.checked = selected.includes(checkbox.value);
+  });
+}
+
+async function saveEdit() {
+  const id = qs("#edit-schedule-id")?.value;
+  if (!id) return;
+  await patchJson(`/api/schedules/${id}`, {
+    keyword: qs("#edit-schedule-keyword")?.value.trim() || "",
+    sources: JSON.stringify(selectedSources("edit-schedule-sources-list")),
+    schedule_type: qs("#edit-schedule-type")?.value || "daily",
+    schedule_value: qs("#edit-schedule-time")?.value || "",
+    auto_approve: Boolean(qs("#edit-schedule-auto-approve")?.checked),
+  });
+  qs("#schedule-edit-modal")?.classList.add("hidden");
+  loadSchedules();
+}
+
+export async function mount() {
+  await loadSources("schedule-sources-list");
+  await loadSchedules();
+  qsa('[data-action="toggle-schedule-form"]').forEach((button) => button.addEventListener("click", () => qs("#schedule-form")?.classList.toggle("hidden")));
+  qs('[data-action="refresh-schedules"]')?.addEventListener("click", loadSchedules);
+  qs("#schedule-type")?.addEventListener("change", () => {
+    const type = qs("#schedule-type").value;
+    qs("#schedule-dow-group")?.classList.toggle("hidden", type !== "weekly");
+    qs("#schedule-interval-group")?.classList.toggle("hidden", type !== "interval");
+  });
+  qs("#edit-schedule-type")?.addEventListener("change", () => {
+    const type = qs("#edit-schedule-type").value;
+    qs("#edit-schedule-dow-group")?.classList.toggle("hidden", type !== "weekly");
+    qs("#edit-schedule-interval-group")?.classList.toggle("hidden", type !== "interval");
+    qs("#edit-schedule-cron-group")?.classList.toggle("hidden", type !== "cron");
+  });
+  qs("#schedule-create")?.addEventListener("click", createSchedule);
+  qs("#schedule-edit-save")?.addEventListener("click", saveEdit);
+  qs("#schedule-edit-delete")?.addEventListener("click", async () => {
+    const id = qs("#edit-schedule-id")?.value;
+    if (!id) return;
+    await deleteJson(`/api/schedules/${id}`);
+    qs("#schedule-edit-modal")?.classList.add("hidden");
+    loadSchedules();
+  });
+  qsa('[data-action="close-edit-schedule"]').forEach((button) => button.addEventListener("click", () => qs("#schedule-edit-modal")?.classList.add("hidden")));
+}
+
+export async function unmount() {}
+
+export default { mount, unmount };