@clazic/urban 0.2.5 → 0.2.7

package/web/old/scripts/app.js

@@ -0,0 +1,2618 @@
+    // ─── App State ───
+    const app = window.app = {
+      currentPage: '/',
+      theme: localStorage.getItem('urban.theme') || 'dark',
+      sidebarPinned: localStorage.getItem('urban.sidebarPinned') === 'true',
+      sseConnected: false,
+      lastSync: 0,
+      stats: {},
+      _extPipeline: new Map(),   // docid → stage (외부 수집 항목 SSE 추적)
+      _lastServerPipeline: {},   // /api/health 에서 폴링한 파이프라인 카운트
+      _lastFailCount: 0,         // 마지막 실패 카운트
+
+      // ─── Init ───
+      async init() {
+        this.applyTheme();
+        this.applySidebarPin();
+        this.setupEventListeners();
+        this.connectSSE();
+        window.addEventListener('popstate', (e) => {
+          if (e.state?.path) this.navigateTo(e.state.path, false);
+          else this.navigateTo(window.location.pathname || '/', false);
+        });
+        this.loadStats();
+        this.loadExternalSources();
+        const initPath = window.location.pathname || '/';
+        this.navigateTo(initPath, false);
+        setInterval(() => this.loadStats(), 30000);
+        // 마지막 동기화 시간 1분마다 갱신 (방금 → N분 전)
+        setInterval(() => { if (this.lastSync > 0) this.updateStatusBar(); }, 60000);
+        // 파이프라인 상태바는 SSE 이벤트로 실시간 갱신 (폴링 제거)
+        // 서버 DB에서 저장된 설정 로드 (localStorage 덮어쓰기)
+        this.loadPrefs();
+      },
+
+      async loadPrefs() {
+        try {
+          const prefs = await fetch('/api/prefs').then(r => r.json());
+          if (prefs.theme && prefs.theme !== this.theme) {
+            this.theme = prefs.theme;
+            localStorage.setItem('urban.theme', this.theme);
+            this.applyTheme();
+          }
+          if (prefs.sidebarPinned !== this.sidebarPinned) {
+            this.sidebarPinned = prefs.sidebarPinned;
+            localStorage.setItem('urban.sidebarPinned', this.sidebarPinned);
+            this.applySidebarPin();
+          }
+        } catch { /* 서버 미응답 시 localStorage 값 유지 */ }
+      },
+
+      savePrefs(patch) {
+        localStorage.setItem('urban.theme', this.theme);
+        localStorage.setItem('urban.sidebarPinned', this.sidebarPinned);
+        fetch('/api/prefs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(patch) }).catch(() => {});
+      },
+
+      // ─── Theme ───
+      applyTheme() {
+        // 'dark' → 'urban-dark', 'system' → media query CSS가 처리
+        const themeAttr = this.theme === 'dark' ? 'urban-dark' : this.theme;
+        document.documentElement.setAttribute('data-theme', themeAttr);
+        // 두 테마 버튼 아이콘 동기화 (다크→☀️ 라이트→🌙 시스템→반반)
+        const cls = this.theme === 'light' ? 'fas fa-moon'
+          : this.theme === 'dark'  ? 'fas fa-sun'
+          : 'fas fa-circle-half-stroke';
+        const label = this.theme === 'light' ? '라이트 모드'
+          : this.theme === 'dark'  ? '다크 모드'
+          : '시스템 모드';
+        document.getElementById('sidebar-theme-icon')?.setAttribute('class', cls);
+        const headerBtn = document.getElementById('theme-btn');
+        if (headerBtn) {
+          headerBtn.querySelector('i')?.setAttribute('class', cls);
+          headerBtn.title = label;
+        }
+      },
+
+      toggleTheme() {
+        const themes = ['dark', 'light', 'system'];
+        const idx = themes.indexOf(this.theme);
+        this.theme = themes[(idx + 1) % themes.length];
+        this.applyTheme();
+        this.savePrefs({ theme: this.theme });
+      },
+
+      // ─── Sidebar Pin ───
+      applySidebarPin() {
+        const sidebar = document.getElementById('sidebar');
+        const pinBtn = document.getElementById('sidebar-pin-btn');
+        if (!sidebar || !pinBtn) return;
+        if (this.sidebarPinned) {
+          sidebar.classList.add('expanded', 'pinned');
+          pinBtn.classList.add('pinned');
+          pinBtn.title = '사이드바 고정 해제';
+        } else {
+          sidebar.classList.remove('pinned', 'expanded');
+          pinBtn.classList.remove('pinned');
+          pinBtn.title = '사이드바 고정';
+        }
+      },
+
+      toggleSidebarPin() {
+        this.sidebarPinned = !this.sidebarPinned;
+        this.applySidebarPin();
+        this.savePrefs({ sidebarPinned: this.sidebarPinned });
+      },
+
+      // ─── Navigation ───
+      setupEventListeners() {
+        // Sidebar nav (data-page 버튼만)
+        document.querySelectorAll('.sidebar-item[data-page]').forEach(btn => {
+          btn.addEventListener('click', () => {
+            const page = btn.dataset.page;
+            this.navigateTo(page);
+          });
+        });
+
+        // Sidebar hover (핀 고정 시 무시)
+        const sidebar = document.getElementById('sidebar');
+        sidebar.addEventListener('mouseenter', () => { if (!this.sidebarPinned) sidebar.classList.add('expanded'); });
+        sidebar.addEventListener('mouseleave', () => { if (!this.sidebarPinned) sidebar.classList.remove('expanded'); });
+
+        // Pin button
+        document.getElementById('sidebar-pin-btn').addEventListener('click', () => this.toggleSidebarPin());
+
+        // Theme (헤더 + 사이드바 모두)
+        document.getElementById('theme-btn').addEventListener('click', () => this.toggleTheme());
+        document.getElementById('sidebar-theme-btn').addEventListener('click', () => this.toggleTheme());
+
+        // Search
+        document.getElementById('search-main').addEventListener('keydown', (e) => {
+          if (e.key === 'Enter') {
+            const q = e.target.value.trim();
+            if (q) this.navigateTo(`/search?q=${encodeURIComponent(q)}`);
+          }
+        });
+
+        // #search-hero는 pages/home.html에서 동적 로드 — 이벤트 위임 사용
+        document.addEventListener('keydown', (e) => {
+          if (e.target.id === 'search-hero' && e.key === 'Enter') {
+            const q = e.target.value.trim();
+            if (q) this.navigateTo(`/search?q=${encodeURIComponent(q)}`);
+          }
+        });
+
+        // 토스트 외부 클릭 시 닫기
+        document.addEventListener('click', (e) => {
+          const toast = document.getElementById('stage-toast');
+          if (toast && toast.classList.contains('open') && !toast.contains(e.target)) {
+            this.closeStageToast();
+          }
+        }, { capture: true });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+          if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            this.showCommandPalette();
+          }
+          if (e.key === 'Escape') {
+            this.hideCommandPalette();
+            this.closeDrawer();
+            this.closeStageToast();
+          }
+          // Number keys for nav (only when no input focused and no overlay open)
+          const overlayOpen = !document.getElementById('cmd-overlay').classList.contains('hidden');
+          const key = parseInt(e.key);
+          if (key >= 1 && key <= 9 && !overlayOpen && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
+            const buttons = document.querySelectorAll('.sidebar-item');
+            if (buttons[key - 1]) buttons[key - 1].click();
+          }
+        });
+
+      },
+
+      async navigateTo(path, push = true) {
+        const [route, query] = path.split('?');
+        const pageName = route.slice(1) || 'home';
+
+        // HTML 프래그먼트 fetch (메모리 캐시)
+        if (!this._pageCache) this._pageCache = {};
+        if (!this._pageCache[pageName]) {
+          try {
+            const html = await fetch(`/pages/${pageName}.html`).then(r => {
+              if (!r.ok) throw new Error(`${r.status}`);
+              return r.text();
+            });
+            this._pageCache[pageName] = html;
+          } catch(e) {
+            console.error('Page load failed:', pageName, e);
+            return;
+          }
+        }
+
+        const view = document.getElementById('view');
+        if (!view) return;
+        view.innerHTML = this._pageCache[pageName];
+
+        // sidebar active 업데이트
+        document.querySelectorAll('.sidebar-item').forEach(btn => {
+          btn.classList.toggle('active', btn.dataset.page === route);
+        });
+
+        this.currentPage = route;
+        if (push) history.pushState({ path }, '', path);
+
+        // 페이지별 초기화
+        if (route === '/search' && query) {
+          const params = new URLSearchParams(query);
+          const q = params.get('q');
+          if (q) {
+            const el = document.getElementById('search-q');
+            if (el) { el.value = q; this.searchReports(); }
+          }
+        } else if (route === '/catalog') { this.loadCatalog();
+        } else if (route === '/wiki') { this.loadWiki();
+        } else if (route === '/graph') { this.loadGraph();
+        } else if (route === '/pending') { this.loadPending();
+        } else if (route === '/failures') { this.loadFailures();
+        } else if (route === '/schedules') { this.loadSchedules();
+        } else if (route === '/bookmarks') { this.loadBookmarks();
+        } else if (route === '/settings') { this.loadSettings(); }
+      },
+
+      // ─── SSE ───
+      connectSSE() {
+        this._sseEverConnected = false;
+        try {
+          this.evtSource = new EventSource('/api/events');
+
+          this.evtSource.onmessage = (e) => {
+            try {
+              const data = JSON.parse(e.data);
+              this.handleSSEEvent(data);
+            } catch (err) {
+              console.error('SSE parse error:', err);
+            }
+          };
+
+          this.evtSource.addEventListener('connected', () => {
+            if (this._sseEverConnected) {
+              // 재연결 → 이전 진행 중/오류 카드 상태 초기화
+              this._resetAllCards();
+            }
+            this._sseEverConnected = true;
+            this.setSseStatus(true);
+          });
+
+          this.evtSource.onerror = () => {
+            this.setSseStatus(false);
+          };
+        } catch (e) {
+          console.error('SSE connection failed:', e);
+          this.setSseStatus(false);
+        }
+      },
+
+      _resetAllCards() {
+        // 진행 중이던 진행바 숨김
+        document.querySelectorAll('.ext-progress').forEach(el => { el.style.display = 'none'; });
+        // 실패/진행 중 배지 초기화
+        const transientBadges = new Set(['실패', '대기', '↓', '변환', 'AI']);
+        document.querySelectorAll('.ext-status-badge').forEach(el => {
+          if (transientBadges.has(el.textContent)) el.style.cssText = 'display:none';
+        });
+        // "재시도" / "..." 버튼 → "수집"으로 복원
+        document.querySelectorAll('.ext-collect-btn').forEach(btn => {
+          if (btn.textContent === '재시도' || btn.textContent === '...') {
+            btn.disabled = false;
+            btn.textContent = '수집';
+          }
+        });
+      },
+
+      handleSSEEvent(data) {
+        // 마지막 동기화: 실제 KB 저장 완료 이벤트에만 갱신
+        // (다운로드 진행 중, 변환 중 등 중간 단계는 제외)
+        const isSavedEvent = data.type && (
+          data.type === 'session:done' ||   // 보고서 1건 완전 처리 완료
+          data.type === 'wiki:updated' ||   // Wiki 페이지 저장됨
+          data.type === 'done'              // 파이프라인 완료 신호
+        );
+        if (isSavedEvent) {
+          this.lastSync = Date.now();
+        }
+        this.updateStatusBar();
+
+        // session:done / wiki:updated 는 실제 DB 변경 → 전체 통계 갱신
+        // 중간 단계(collect:download 등)는 SSE 카운터로만 처리 (loadStats 불필요)
+        if (['done', 'failure', 'pending', 'session:done', 'wiki:updated'].includes(data.type)) {
+          this.loadStats();
+        }
+        if (data.type === 'pending' || data.type === 'item_stage') {
+          this.loadPending();
+          // 추적 패널이 열려 있고 해당 항목이면 자동 새로고침
+          if (data.type === 'item_stage' && this._trackingDocid) {
+            if (!data.docid || data.docid === this._trackingDocid) {
+              this.showStageTrack(this._trackingDocid);
+            }
+          }
+          // 단계 토스트 팝업이 열려있으면 즉시 본문 갱신
+          if (this._stageToastCurrentStage) {
+            this._refreshStagePillBody(this._stageToastCurrentStage);
+          }
+        }
+
+        // 실패 목록 아이템 진행상황 업데이트 (docid → data-docid 매핑)
+        const docid = data.docid;
+        if (docid) {
+          const failureItem = document.querySelector(`.list-item[data-docid="${docid}"]`);
+          if (failureItem) {
+            const hash = failureItem.dataset.hash;
+            const STAGE_MAP = {
+              'extract:start':    [60, 'AI 분석 중...'],
+              'extract:complete': [75, '그래프 업데이트...'],
+              'graph:updated':    [88, '위키 생성 중...'],
+              'wiki:updated':     [95, '마무리 중...'],
+              'session:done':     [100, '완료', true],
+              'collect:download': [20, '다운로드 중...'],
+              'collect:convert':  [45, 'MD 변환 중...'],
+              'extract:error':    [100, `오류: ${(data.error||'').slice(0,50)}`, false, true],
+              'graph:error':      [100, `그래프 오류: ${(data.error||'').slice(0,40)}`, false, true],
+              'wiki:error':       [100, `위키 오류: ${(data.error||'').slice(0,40)}`, false, true],
+            };
+            const args = STAGE_MAP[data.type];
+            if (args) this._setFailureProgress(hash, ...args);
+            // 완료 시 뱃지 갱신
+            if (data.type === 'session:done') {
+              const badge = document.querySelector(`.failure-status-badge[data-hash="${hash}"]`);
+              if (badge) { badge.textContent = '완료'; badge.className = 'badge success failure-status-badge'; }
+            }
+          }
+        }
+
+        // 외부 검색 카드 진행률 업데이트 (docid 기반)
+        if (!docid) return;
+
+        switch (data.type) {
+          case 'collect:start':
+            this._setCardProgress(docid, 5, '수집 시작...');
+            this._updateStatusBadge(docid, '대기', '#888');
+            break;
+          case 'collect:download':
+            this._setCardProgress(docid, 20, '다운로드 중...');
+            this._updateStatusBadge(docid, '↓', '#2563eb');
+            break;
+          case 'collect:convert':
+            this._setCardProgress(docid, 45, 'MD 변환 중...');
+            this._updateStatusBadge(docid, '변환', '#7c3aed');
+            break;
+          case 'extract:start':
+            this._setCardProgress(docid, 60, 'AI 분석 중...');
+            this._updateStatusBadge(docid, 'AI', '#d97706');
+            break;
+          case 'extract:complete':
+            this._setCardProgress(docid, 75, '그래프 업데이트...');
+            break;
+          case 'graph:updated':
+            this._setCardProgress(docid, 88, '위키 생성 중...');
+            break;
+          case 'wiki:updated':
+            this._setCardProgress(docid, 95, '아카이브...');
+            break;
+          case 'session:done': {
+            this._setCardProgress(docid, 100, '완료', true);
+            this._updateStatusBadge(docid, '완료', '#16a34a');
+            const btn = document.querySelector(`.ext-collect-btn[data-docid="${docid}"]`);
+            if (btn) { btn.textContent = '수집됨'; btn.style.opacity = '0.5'; }
+            const chk = document.querySelector(`.ext-item-check[data-docid="${docid}"]`);
+            if (chk) { chk.checked = false; chk.disabled = true; }
+            break;
+          }
+          case 'session:skip':
+            this._setCardProgress(docid, 100, '이미 수집됨', true);
+            this._updateStatusBadge(docid, '중복', '#888');
+            break;
+          case 'collect:error':
+          case 'extract:error':
+          case 'graph:error':
+          case 'wiki:error': {
+            const errMsg = data.error ? data.error.slice(0, 60) : '오류';
+            this._setCardProgress(docid, 100, `오류: ${errMsg}`, false, true);
+            this._updateStatusBadge(docid, '실패', '#dc2626');
+            const errBtn = document.querySelector(`.ext-collect-btn[data-docid="${docid}"]`);
+            if (errBtn) { errBtn.disabled = false; errBtn.textContent = '재시도'; }
+            // 3초 후 진행바 숨김
+            setTimeout(() => {
+              const prog = document.querySelector(`.ext-progress[data-docid="${docid}"]`);
+              if (prog) prog.style.display = 'none';
+            }, 3000);
+            break;
+          }
+        }
+
+        // ── 외부 수집 파이프라인 카운터 SSE 추적 (하단 상태바) ──
+        const EXT_STAGE = {
+          'collect:start':    'downloading',
+          'collect:download': 'downloading',
+          'collect:convert':  'converting',
+          'extract:start':    'extracting',
+          'extract:complete': 'graph',
+          'graph:updated':    'wiki',
+          'wiki:updated':     'wiki',
+        };
+        const extStage = EXT_STAGE[data.type];
+        if (extStage) {
+          // collect:start / collect:download 는 새 항목 진입점 — 이후 단계는 이미 추적 중인 것만
+          if (this._extPipeline.has(docid) || data.type === 'collect:start' || data.type === 'collect:download') {
+            this._extPipeline.set(docid, extStage);
+            this._refreshPipelineBar();
+          }
+        } else if (data.type === 'session:done' || data.type === 'session:skip' || data.type === 'session:meta-updated') {
+          if (this._extPipeline.delete(docid)) this._refreshPipelineBar();
+        } else if (['collect:error', 'extract:error', 'graph:error', 'wiki:error'].includes(data.type)) {
+          if (this._extPipeline.delete(docid)) this._refreshPipelineBar();
+        }
+      },
+
+      setSseStatus(connected) {
+        this.sseConnected = connected;
+        const ind = document.getElementById('sse-status');
+        const text = document.getElementById('status-text');
+        if (connected) {
+          ind.classList.remove('disconnected');
+          text.textContent = 'SSE 연결됨';
+        } else {
+          ind.classList.add('disconnected');
+          text.textContent = 'SSE 연결 끊김';
+        }
+      },
+
+      updateStatusBar() {
+        const minAgo = Math.floor((Date.now() - this.lastSync) / 60000);
+        const syncText = minAgo === 0 ? '방금' : `${minAgo}분 전`;
+        document.getElementById('status-sync').textContent = `마지막 동기화 ${syncText}`;
+      },
+
+      // 서버 파이프라인 + SSE 추적 외부 수집 항목을 합산해 파이프라인 바 갱신
+      _refreshPipelineBar() {
+        const merged = Object.assign({}, this._lastServerPipeline);
+        for (const stage of this._extPipeline.values()) {
+          merged[stage] = (merged[stage] || 0) + 1;
+        }
+        this.renderPipelineBar(merged, this._lastFailCount);
+      },
+
+      // ─── API Calls ───
+      async loadStats() {
+        try {
+          const [stats, health, failures] = await Promise.all([
+            fetch('/api/stats').then(r => r.json()),
+            fetch('/api/health').then(r => r.json()),
+            fetch('/api/failures/count').then(r => r.json()),
+          ]);
+
+          this.stats = stats;
+          const _s = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = (val || 0).toLocaleString('ko-KR'); };
+          _s('stat-total',   stats.total_reports);
+          _s('stat-week',    stats.week_collected);
+          _s('stat-pending', stats.pending_count);
+          _s('stat-queue',   stats.queue_size);
+
+          // Health (home 페이지 외에서는 요소가 없을 수 있음)
+          const dbEl = document.getElementById('db-status');
+          if (dbEl) dbEl.textContent = health.db.ok ? `${health.db.size_mb}MB` : '❌ 오류';
+          const llmEl = document.getElementById('llm-status');
+          if (llmEl) llmEl.textContent = `${health.llm_cache.entries} (적중률 ${health.llm_cache.hit_rate_pct}%)`;
+
+          // 파이프라인 상태바 칩 렌더링 (서버 데이터 저장 → SSE 추적분 합산)
+          this._lastServerPipeline = health.pipeline || {};
+          this._lastFailCount = failures.count || 0;
+          this._refreshPipelineBar();
+
+          // Recent reports
+          const recentHtml = (stats.recent_reports || [])
+            .map(r => `
+              <div class="list-item" style="cursor:pointer;" onclick="window.app.showReportDetail('${this.escapeHtml(r.hash)}')">
+                <div style="flex:1;min-width:0;">
+                  <div class="list-item-title">${this.escapeHtml(r.title || '제목 없음')}</div>
+                  <div class="list-item-meta">
+                    <span>${this.escapeHtml(r.source || '')}</span>
+                    <span>${r.created_at ? new Date(r.created_at).toLocaleDateString('ko-KR') : ''}</span>
+                  </div>
+                </div>
+                <i class="fas fa-chevron-right" style="color:var(--text-tertiary);font-size:12px;flex-shrink:0;"></i>
+              </div>
+            `).join('');
+          document.getElementById('recent-reports').innerHTML = recentHtml || '<div class="empty-state">최근 보고서 없음</div>';
+
+          // Failures banner
+          const banner = document.getElementById('failures-banner');
+          if (failures.count > 0) {
+            banner.classList.remove('hidden');
+            document.getElementById('failures-count').textContent = failures.count;
+          } else {
+            banner.classList.add('hidden');
+          }
+
+          this.lastSync = Date.now();
+          this.updateStatusBar();
+        } catch (e) {
+          console.error('Failed to load stats:', e);
+        }
+      },
+
+      // ─── 검색 탭 전환 ───
+      switchSearchTab(tab) {
+        const searchPage = document.getElementById('page-search');
+        searchPage.querySelectorAll('.search-tab').forEach(el => el.classList.remove('active'));
+        searchPage.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+        document.getElementById(`search-tab-${tab}`).classList.add('active');
+        searchPage.querySelector(`.tab-btn[data-tab="${tab}"]`).classList.add('active');
+      },
+
+      // ─── 외부 소스 목록 동적 로드 ───
+      async loadExternalSources() {
+        try {
+          const data = await fetch('/api/skills').then(r => r.json());
+          const container = document.getElementById('ext-source-checkboxes');
+          if (!container) return;
+          container.innerHTML = '';
+          for (const skill of (data.skills || [])) {
+            const label = document.createElement('label');
+            label.className = 'source-pill';
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            checkbox.dataset.sourceId = skill.id;
+            checkbox.checked = true;
+            label.appendChild(checkbox);
+            label.appendChild(document.createTextNode(skill.name));
+            container.appendChild(label);
+          }
+          if ((data.skills || []).length === 0) {
+            container.innerHTML = '<span style="color:var(--text-tertiary);font-size:var(--text-sm);">등록된 외부 소스 없음</span>';
+          }
+        } catch (e) {
+          console.warn('스킬 목록 로드 실패:', e);
+        }
+      },
+
+      // ─── 외부 검색 ───
+      async searchExternal() {
+        const q = document.getElementById('ext-search-q').value.trim();
+        if (!q) return;
+
+        const sources = [...document.querySelectorAll('#ext-source-checkboxes input[type=checkbox]:checked')]
+          .map(el => el.dataset.sourceId);
+        if (sources.length === 0) {
+          alert('검색할 소스를 하나 이상 선택하세요');
+          return;
+        }
+
+        document.getElementById('ext-search-loading').style.display = '';
+        document.getElementById('ext-search-results').innerHTML = '';
+        document.getElementById('ext-collect-toolbar').style.display = 'none';
+        this._extItems = {};
+
+        try {
+          const params = new URLSearchParams({ q, sources: sources.join(','), limit: 20 });
+          const data = await fetch(`/api/search/external?${params}`).then(r => r.json());
+
+          let html = '';
+          let hasCollectable = false;
+          for (const [sourceId, sourceData] of Object.entries(data.sources || {})) {
+            if (sourceData.status === 'error') {
+              html += `<div style="padding:var(--space-3);color:var(--error);border-bottom:1px solid var(--border-subtle);">
+                <strong>${this.escapeHtml(sourceId.toUpperCase())}</strong> 검색 실패: ${this.escapeHtml(sourceData.error || '')}
+              </div>`;
+              continue;
+            }
+            for (const item of (sourceData.items || [])) {
+              if (item.docid) this._extItems[item.docid] = item;
+              if (!item.collected) hasCollectable = true;
+              html += this.renderExternalResultCard(item);
+            }
+          }
+
+          const meta = `<div style="padding:var(--space-2) var(--space-3);background:var(--surface-raised);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm);color:var(--text-secondary);">
+            총 ${data.totalCount}건 · ${data.elapsed_ms}ms
+          </div>`;
+
+          document.getElementById('ext-search-results').innerHTML =
+            html ? meta + html : '<div class="empty-state">결과 없음</div>';
+
+          if (hasCollectable) {
+            document.getElementById('ext-collect-toolbar').style.display = 'flex';
+            const countEl = document.getElementById('ext-selected-count');
+            if (countEl) countEl.textContent = '0개 선택됨';
+            const allChk = document.getElementById('ext-select-all');
+            if (allChk) { allChk.checked = false; allChk.indeterminate = false; }
+          }
+        } catch (e) {
+          console.error('External search failed:', e);
+          document.getElementById('ext-search-results').innerHTML =
+            '<div class="empty-state">외부 검색 실패</div>';
+        } finally {
+          document.getElementById('ext-search-loading').style.display = 'none';
+        }
+      },
+
+      renderExternalResultCard(item) {
+        const badgeClass = item.source === 'prism' ? 'prism' : item.source === 'nanet' ? 'nanet' : 'default';
+        const badgeText = item.source === 'prism' ? 'PRISM' : item.source === 'nanet' ? '국회도서관' : item.source;
+        const year = item.year && item.year !== '미상' ? item.year : '';
+        const fileSize = item.fileSize > 0 ? `${(item.fileSize / 1048576).toFixed(1)}MB` : '';
+        const fileName = item.fileName && item.fileName !== '파일명없음' ? item.fileName : '';
+        const summary = (item.summary || item.outline || item.contentPreview || '').slice(0, 150);
+        const safeDocid = this.escapeHtml(item.docid);
+
+        const checkbox = item.collected
+          ? `<input type="checkbox" class="ext-item-check" data-docid="${safeDocid}" disabled style="margin-top:2px;flex-shrink:0;" />`
+          : `<input type="checkbox" class="ext-item-check" data-docid="${safeDocid}" style="margin-top:2px;flex-shrink:0;" onchange="window.app.onItemCheckChange()" />`;
+
+        const collectBtn = item.collected
+          ? `<button class="button" style="flex-shrink:0;font-size:var(--text-xs);opacity:0.5;cursor:default;" disabled>수집됨</button>`
+          : `<button class="button ext-collect-btn" data-docid="${safeDocid}" style="flex-shrink:0;font-size:var(--text-xs);" onclick="window.app.collectExternalItem(this.dataset.docid)">수집</button>`;
+
+        const collectedBadge = item.collected
+          ? `<span class="source-badge" style="background:var(--success);color:white;">수집됨</span>`
+          : '';
+
+        return `<div class="list-item ext-result-card" data-docid="${safeDocid}" style="padding:var(--space-3);border-bottom:1px solid var(--border-subtle);">
+          <div style="display:flex;align-items:flex-start;gap:var(--space-2);width:100%;">
+            ${checkbox}
+            <div style="flex:1;min-width:0;">
+              <div class="list-item-title" style="margin-bottom:var(--space-1);">
+                <span class="source-badge ${badgeClass}">${badgeText}</span>${collectedBadge}<span class="ext-status-badge" data-docid="${safeDocid}"></span>${this.escapeHtml(item.title)}
+              </div>
+              <div class="list-item-meta" style="display:flex;gap:var(--space-3);flex-wrap:wrap;">
+                ${item.institution ? `<span>${this.escapeHtml(item.institution)}</span>` : ''}
+                ${year ? `<span>${year}</span>` : ''}
+                ${fileSize ? `<span>${fileSize}</span>` : ''}
+                ${fileName ? `<span style="color:var(--text-tertiary);font-style:italic;">${this.escapeHtml(fileName)}</span>` : ''}
+              </div>
+              ${summary ? `<div style="margin-top:var(--space-1);font-size:var(--text-sm);color:var(--text-secondary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${this.escapeHtml(summary)}</div>` : ''}
+              <div class="ext-progress" data-docid="${safeDocid}" style="display:none;margin-top:var(--space-2);">
+                <div class="ext-progress-bar"><div class="ext-progress-fill"></div></div>
+                <div class="ext-progress-label" style="font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px;"></div>
+              </div>
+            </div>
+            <div style="flex-shrink:0;align-self:flex-start;margin-left:auto;">${collectBtn}</div>
+          </div>
+        </div>`;
+      },
+
+      async collectExternalItem(docid) {
+        const item = this._extItems?.[docid];
+        if (!item) return;
+        await this._startCollect([item]);
+      },
+
+      async collectSelectedItems() {
+        const checked = [...document.querySelectorAll('.ext-item-check:checked:not(:disabled)')]
+          .map(el => el.dataset.docid)
+          .filter(Boolean);
+        if (checked.length === 0) { alert('수집할 항목을 선택하세요.'); return; }
+        const items = checked.map(d => this._extItems?.[d]).filter(Boolean);
+        await this._startCollect(items);
+      },
+
+      async _startCollect(items) {
+        if (!items.length) return;
+        try {
+          const res = await fetch('/api/search/external/collect', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ items }),
+          });
+          if (!res.ok) throw new Error(`HTTP ${res.status}`);
+          // 진행률은 SSE로 수신
+          for (const item of items) {
+            this._setCardProgress(item.docid, 0, '대기 중...');
+            const btn = document.querySelector(`.ext-collect-btn[data-docid="${item.docid}"]`);
+            if (btn) { btn.disabled = true; btn.textContent = '...'; }
+          }
+        } catch (e) {
+          console.error('Collect failed:', e);
+          alert('수집 요청 실패: ' + e.message);
+        }
+      },
+
+      toggleSelectAll(checked) {
+        document.querySelectorAll('.ext-item-check:not(:disabled)').forEach(el => { el.checked = checked; });
+        this.onItemCheckChange();
+      },
+
+      onItemCheckChange() {
+        const total = document.querySelectorAll('.ext-item-check:not(:disabled):checked').length;
+        const countEl = document.getElementById('ext-selected-count');
+        if (countEl) countEl.textContent = `${total}개 선택됨`;
+        const allEl = document.getElementById('ext-select-all');
+        const allCount = document.querySelectorAll('.ext-item-check:not(:disabled)').length;
+        if (allEl) allEl.indeterminate = total > 0 && total < allCount;
+        if (allEl) allEl.checked = allCount > 0 && total === allCount;
+      },
+
+      _setCardProgress(docid, pct, label, done = false, error = false) {
+        const prog = document.querySelector(`.ext-progress[data-docid="${docid}"]`);
+        if (!prog) return;
+        prog.style.display = '';
+        const fill = prog.querySelector('.ext-progress-fill');
+        const lbl = prog.querySelector('.ext-progress-label');
+        if (fill) {
+          fill.style.width = `${Math.min(100, pct)}%`;
+          fill.style.background = error ? 'var(--danger)' : done ? 'var(--success)' : 'var(--accent)';
+        }
+        if (lbl) lbl.textContent = label;
+      },
+
+      _updateStatusBadge(docid, text, color) {
+        const badge = document.querySelector(`.ext-status-badge[data-docid="${docid}"]`);
+        if (!badge) return;
+        badge.textContent = text;
+        badge.style.cssText = `display:inline-block;margin:0 4px;padding:1px 6px;border-radius:9px;font-size:10px;font-weight:600;background:${color};color:white;`;
+      },
+
+      escapeHtml(str) {
+        return String(str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+      },
+
+      async searchReports() {
+        const q = document.getElementById('search-q').value.trim();
+        const source = document.getElementById('search-source').value;
+        const fts = document.getElementById('search-fts').checked ? '1' : '0';
+
+        if (!q) return;
+
+        const el = document.getElementById('search-results');
+        el.innerHTML = '<div class="empty-state"><span class="loading loading-spinner loading-sm"></span></div>';
+
+        try {
+          const params = new URLSearchParams({ q, source, fts, limit: 50 });
+          const data = await fetch(`/api/search?${params}`).then(r => r.json());
+
+          const isFts = fts === '1';
+          const items = data.items || [];
+
+          const meta = items.length > 0
+            ? `<div style="padding:var(--space-2) var(--space-4);background:var(--surface-raised);border-bottom:1px solid var(--border-subtle);font-size:11px;color:var(--text-tertiary);">총 ${data.total ?? items.length}건</div>`
+            : '';
+
+          const html = items.map(r => {
+            // FTS(위키) 결과: slug만 있음
+            if (isFts && r.slug) {
+              const safeSlug = this.escapeHtml(r.slug);
+              const safeTitle = this.escapeHtml(r.title || r.slug);
+              return `
+                <div class="list-item" style="cursor:pointer;gap:var(--space-3);" onclick="app.navigateTo('/wiki');app.wikiNavigate('${safeSlug}');">
+                  <div style="flex:1;min-width:0;">
+                    <div class="list-item-title">${safeTitle}</div>
+                    <div class="list-item-meta"><span style="color:var(--accent);font-size:11px;">📖 위키</span></div>
+                  </div>
+                  <i class="fas fa-arrow-right" style="color:var(--text-tertiary);font-size:12px;flex-shrink:0;"></i>
+                </div>`;
+            }
+            // 보고서 결과
+            const hash = this.escapeHtml(r.hash || '');
+            const title = this.escapeHtml(r.title || '제목 없음');
+            const hasPdf = !!(r.archive_path);
+            const hasMd  = !!(r.md_path);
+            const hasFileOnly = !hasPdf && !hasMd && !!(r.file_path);
+            const hasAny = hasPdf || hasMd || hasFileOnly;
+            const dateStr = r.created_at ? new Date(r.created_at).toLocaleDateString('ko-KR') : '';
+            const dlBtnStyle = `display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);font-size:11px;text-decoration:none;background:var(--surface-raised);transition:all .15s;`;
+            const dlBtnHover = `onmouseover="this.style.borderColor='var(--accent)';this.style.color='var(--accent)'" onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--text-secondary)'"`;
+            return `
+              <div class="list-item" style="gap:var(--space-3);">
+                <div style="flex:1;min-width:0;cursor:pointer;" onclick="app.showReportDetail('${hash}')">
+                  <div class="list-item-title">${title}</div>
+                  <div class="list-item-meta">
+                    ${r.source ? `<span>${this.escapeHtml(r.source)}</span>` : ''}
+                    ${dateStr ? `<span>${dateStr}</span>` : ''}
+                    ${r.url ? `<a href="${this.escapeHtml(r.url)}" target="_blank" rel="noopener" onclick="event.stopPropagation()" style="color:var(--accent);font-size:11px;" title="${this.escapeHtml(r.url)}">원문 ↗</a>` : ''}
+                  </div>
+                </div>
+                <div style="display:flex;gap:6px;flex-shrink:0;align-items:center;" onclick="event.stopPropagation()">
+                  ${hasPdf ? `
+                    <a href="/api/reports/${hash}/file" download title="PDF 다운로드"
+                       style="${dlBtnStyle}" ${dlBtnHover}>
+                      <i class="fas fa-file-pdf" style="font-size:10px;"></i> PDF
+                    </a>` : ''}
+                  ${hasMd ? `
+                    <a href="/api/reports/${hash}/md" download title="MD 다운로드"
+                       style="${dlBtnStyle}" ${dlBtnHover}>
+                      <i class="fas fa-file-lines" style="font-size:10px;"></i> MD
+                    </a>` : ''}
+                  ${hasFileOnly ? `
+                    <a href="/api/reports/${hash}/file" download title="파일 다운로드"
+                       style="${dlBtnStyle}" ${dlBtnHover}>
+                      <i class="fas fa-download" style="font-size:10px;"></i> 다운로드
+                    </a>` : ''}
+                  ${!hasAny ? `
+                    <span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-tertiary);font-size:11px;cursor:default;" title="파일 없음">
+                      <i class="fas fa-file-slash" style="font-size:10px;"></i> 파일 없음
+                    </span>` : ''}
+                </div>
+              </div>`;
+          }).join('');
+
+          el.innerHTML = meta + (html || '<div class="empty-state">결과 없음</div>');
+        } catch (e) {
+          console.error('Search failed:', e);
+          el.innerHTML = '<div class="empty-state">검색 실패</div>';
+        }
+      },
+
+      async loadCatalog(page = 1) {
+        try {
+          const source = document.getElementById('catalog-source').value;
+          const status = document.getElementById('catalog-status').value;
+          const lang = document.getElementById('catalog-lang').value;
+          const q = document.getElementById('catalog-q').value.trim();
+          const params = new URLSearchParams({ page, limit: 20 });
+          if (source) params.set('source', source);
+          if (status) params.set('status', status);
+          if (lang) params.set('lang', lang);
+          if (q) params.set('q', q);
+          const data = await fetch(`/api/reports?${params}`).then(r => r.json());
+
+          const html = (data.items || [])
+            .map(r => `
+              <div class="list-item" style="cursor:pointer;" onclick="window.app.showReportDetail('${this.escapeHtml(r.hash)}')">
+                <div style="flex:1;min-width:0;">
+                  <div class="list-item-title">${this.escapeHtml(r.title || '제목 없음')}</div>
+                  <div class="list-item-meta">
+                    <span>${this.escapeHtml(r.source || '')}</span>
+                    <span>${r.created_at ? new Date(r.created_at).toLocaleDateString('ko-KR') : ''}</span>
+                    <span class="badge ${r.status === 'INDEXED' ? 'success' : r.status === 'FAILED' ? 'error' : ''}">${r.status}</span>
+                  </div>
+                </div>
+                <i class="fas fa-chevron-right" style="color:var(--text-tertiary);font-size:12px;flex-shrink:0;"></i>
+              </div>
+            `).join('');
+
+          document.getElementById('catalog-list').innerHTML = html || '<div class="empty-state">보고서 없음</div>';
+
+          // Pagination
+          const totalPages = Math.ceil(data.total / data.limit);
+          const paginationHtml = Array.from({ length: totalPages }, (_, i) => i + 1)
+            .map(p => `<button class="button ${p === page ? 'button-primary' : ''}" onclick="app.loadCatalog(${p})">${p}</button>`)
+            .join('');
+          document.getElementById('catalog-pagination').innerHTML = paginationHtml;
+        } catch (e) {
+          console.error('Load catalog failed:', e);
+        }
+      },
+
+      // ─── 위키 (#30) ───
+      _wikiCurrentSlug: 'INDEX',
+
+      async loadWiki() {
+        await this.wikiNavigate('INDEX');
+        this._loadWikiNav();
+      },
+
+      async wikiNavigate(slug) {
+        this._wikiCurrentSlug = slug;
+        const el = document.getElementById('wiki-content');
+        el.innerHTML = '<div class="empty-state"><div class="loading"></div></div>';
+        try {
+          const encodedSlug = slug.split('/').map(encodeURIComponent).join('/');
+          const data = await fetch(`/api/wiki/${encodedSlug}`).then(r => r.json());
+          // YAML 프론트매터 제거 (--- ... --- 블록)
+          let content = data.content || '';
+          content = content.replace(/^---\n[\s\S]*?\n---\n?/, '');
+          // 파일명 헤더 제거 (## topics/파일명.md ... 형식)
+          content = content.replace(/^##\s+[^\n]+\.md[^\n]*\n?/m, '');
+          // core_information 메타 블록 제거 (**core_information:** ~ *** 까지)
+          content = content.replace(/\*\*core_information:\*\*[\s\S]*?\*{3,}\s*/m, '');
+          // [제목](report:hash) → marked 전에 HTML span으로 변환 (report: 스킴은 브라우저가 해석 불가)
+          content = content.replace(/\[([^\]]+)\]\(report:([a-f0-9]+)\)/g,
+            (_, title, hash) => `<span class="report-cite-link" data-hash="${hash}" style="color:var(--color-primary,#4c6ef5);cursor:pointer;text-decoration:underline;">${title}</span>`);
+          // [[슬러그]] 위키 링크 → 클릭 가능한 마크다운 링크로 변환
+          content = content.replace(/\[\[([^\]]+)\]\]/g, (_, slug) => `[${slug}](#wiki-${slug.replace(/\s/g,'_')})`);
+          const rawHtml = marked.parse(content);
+          el.innerHTML = rawHtml;
+          // report-cite-link → showReportDetail 팝업
+          el.querySelectorAll('.report-cite-link').forEach(span => {
+            span.addEventListener('click', () => this.showReportDetail(span.dataset.hash));
+          });
+          // [[슬러그]] 링크 → wikiNavigate 연결
+          el.querySelectorAll('a[href^="#wiki-"]').forEach(a => {
+            const slug = decodeURIComponent(a.getAttribute('href').replace('#wiki-', '').replace(/_/g, ' '));
+            a.href = 'javascript:void(0)';
+            a.style.cursor = 'pointer';
+            a.addEventListener('click', e => { e.preventDefault(); this.wikiNavigate(slug); });
+          });
+          // 내부 위키 링크 인터셉트 [[slug]] → wikiNavigate
+          el.querySelectorAll('a').forEach(a => {
+            const href = a.getAttribute('href') || '';
+            if (href.startsWith('#') || href.startsWith('http') || href.startsWith('javascript')) return;
+            a.addEventListener('click', e => {
+              e.preventDefault();
+              const target = href.replace(/\.md$/, '').replace(/^\//, '');
+              this.wikiNavigate(target);
+            });
+          });
+          // 활성 nav 아이템 업데이트
+          document.querySelectorAll('#wiki-nav-list .wiki-nav-item').forEach(item => {
+            item.classList.toggle('active', item.dataset.slug === slug);
+          });
+        } catch (e) {
+          el.innerHTML = `<div class="empty-state">페이지를 찾을 수 없습니다: ${this.escapeHtml(slug)}</div>`;
+        }
+      },
+
+      async _loadWikiNav() {
+        try {
+          const data = await fetch('/api/wiki/INDEX').then(r => r.json());
+          // INDEX 내용에서 링크 추출
+          const links = [...(data.content || '').matchAll(/\[\[([^\]]+)\]\]/g)].map(m => m[1]);
+          const mdLinks = [...(data.content || '').matchAll(/\[([^\]]+)\]\(([^)]+\.md[^)]*)\)/g)].map(m => ({ label: m[1], slug: m[2].replace(/\.md$/, '') }));
+          const navList = document.getElementById('wiki-nav-list');
+          const items = [{ label: 'INDEX', slug: 'INDEX' }, ...links.map(l => ({ label: l, slug: l })), ...mdLinks];
+          const seen = new Set();
+          navList.innerHTML = items.filter(item => {
+            if (seen.has(item.slug)) return false;
+            seen.add(item.slug); return true;
+          }).map(item => `<div class="wiki-nav-item${item.slug === this._wikiCurrentSlug ? ' active' : ''}" data-slug="${this.escapeHtml(item.slug)}" onclick="window.app.wikiNavigate('${this.escapeHtml(item.slug)}')">${this.escapeHtml(item.label)}</div>`).join('');
+        } catch {}
+      },
+
+      // ─── 그래프 시각화 (#33) ───
+      _graph: { nodes: [], edges: [], sim: null, canvas: null, ctx: null, zoom: 1, panX: 0, panY: 0, dragging: null, hoveredNode: null },
+
+      setGraphType(btn) {
+        document.querySelectorAll('#graph-type-btns .graph-type-btn').forEach(b => b.classList.remove('button-primary'));
+        btn.classList.add('button-primary');
+        this.loadGraph();
+      },
+
+      async loadGraph() {
+        const typeFilter = document.querySelector('#graph-type-btns .graph-type-btn.button-primary')?.dataset.value || '';
+        const topN = parseInt(document.getElementById('graph-top-n')?.value || '100', 10);
+        const params = new URLSearchParams({ compact: 'true', top: topN });
+        if (typeFilter) params.set('type', typeFilter);
+
+        document.getElementById('graph-empty').style.display = 'flex';
+        try {
+          const data = await fetch(`/api/graph?${params}`).then(r => r.json());
+          const nodes = data.nodes || [];
+          const edges = data.edges || [];
+
+          document.getElementById('graph-node-count').textContent = (data.stats?.nodeCount ?? nodes.length).toLocaleString('ko-KR');
+          document.getElementById('graph-edge-count').textContent = (data.stats?.edgeCount ?? edges.length).toLocaleString('ko-KR');
+          document.getElementById('graph-cluster-count').textContent = data.stats?.communityCount ? data.stats.communityCount.toLocaleString('ko-KR') : '-';
+
+          document.getElementById('graph-empty').style.display = nodes.length ? 'none' : 'flex';
+          if (!nodes.length) { document.getElementById('graph-empty').querySelector('div:last-child').textContent = '그래프 데이터 없음'; return; }
+
+          this._initGraphCanvas(nodes, edges);
+        } catch (e) {
+          document.getElementById('graph-empty').querySelector('div:last-child').textContent = '그래프 로드 실패';
+        }
+      },
+
+      _initGraphCanvas(nodes, edges) {
+        const g = this._graph;
+        const container = document.getElementById('graph-canvas');
+        const canvas = document.getElementById('graph-canvas-el');
+        const ctx = canvas.getContext('2d');
+        g.canvas = canvas; g.ctx = ctx;
+
+        // 캔버스 크기 설정
+        const resize = () => {
+          canvas.width = container.clientWidth * devicePixelRatio;
+          canvas.height = container.clientHeight * devicePixelRatio;
+          canvas.style.width = container.clientWidth + 'px';
+          canvas.style.height = container.clientHeight + 'px';
+          // setTransform 으로 절대값 설정 — ctx.scale 누적 방지
+          ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+        };
+        resize();
+        // 이미 초기화된 경우 pan/zoom 유지 (재진입 시 화면 튐 방지)
+        const isFirstLoad = !g._initialized;
+        if (isFirstLoad) {
+          g.panX = container.clientWidth / 2;
+          g.panY = container.clientHeight / 2;
+          g.zoom = 1;
+          g._initialized = true;
+        }
+
+        // 전체 노드가 캔버스에 맞도록 자동 조정
+        const fitAll = () => {
+          if (!g.nodes.length) return;
+          let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+          for (const n of g.nodes) {
+            minX = Math.min(minX, n.x); maxX = Math.max(maxX, n.x);
+            minY = Math.min(minY, n.y); maxY = Math.max(maxY, n.y);
+          }
+          const w = container.clientWidth, h = container.clientHeight;
+          const pad = 60;
+          const scaleX = (w - pad * 2) / Math.max(maxX - minX, 1);
+          const scaleY = (h - pad * 2) / Math.max(maxY - minY, 1);
+          g.zoom = Math.min(scaleX, scaleY, 3);
+          g.panX = w / 2 - ((minX + maxX) / 2) * g.zoom;
+          g.panY = h / 2 - ((minY + maxY) / 2) * g.zoom;
+        };
+
+        // 색상 맵 — 진한 색상으로 업데이트
+        const typeColors = { topic: '#ea6c00', org: '#1d6ed8', report: '#7c3aed', default: '#4b5563' };
+        const clusterColors = ['#ea6c00','#1d6ed8','#7c3aed','#059669','#dc2626','#d97706','#0891b2','#db2777'];
+
+        // 노드 초기화 (위치는 아래에서 계층적으로 배치)
+        g.nodes = nodes.map(n => ({ ...n, x: 0, y: 0, vx: 0, vy: 0 }));
+        g.edges = edges;
+
+        // 인덱스 맵
+        const nodeById = new Map(g.nodes.map(n => [n.id, n]));
+
+        // ─ 양방향 인접 맵 ─
+        const adjacency = new Map(g.nodes.map(n => [n.id, []]));
+        for (const e of g.edges) {
+          adjacency.get(e.source)?.push(e.target);
+          adjacency.get(e.target)?.push(e.source);
+        }
+
+        // ─ 계층적 초기 배치 ─
+        // 1) org: 바깥 원형
+        const orgNodes   = g.nodes.filter(n => n.type === 'org');
+        const topicNodes = g.nodes.filter(n => n.type === 'topic');
+        const otherNodes = g.nodes.filter(n => n.type !== 'org' && n.type !== 'topic');
+        const orgR = Math.max(160, orgNodes.length * 70);
+
+        orgNodes.forEach((n, i) => {
+          const angle = (i / Math.max(orgNodes.length, 1)) * Math.PI * 2;
+          n.x = Math.cos(angle) * orgR + (Math.random() - 0.5) * 10;
+          n.y = Math.sin(angle) * orgR + (Math.random() - 0.5) * 10;
+        });
+
+        // 2) topic: org 방향 중간 링 (orgR * 0.60) — org 하위
+        // topic → report → org 2단계 탐색으로 속한 org 방향 결정
+        for (const n of topicNodes) {
+          const reportNeighbors = (adjacency.get(n.id) || []).map(id => nodeById.get(id)).filter(nb => nb?.type === 'report');
+          const orgScore = new Map();
+          for (const rpt of reportNeighbors) {
+            for (const orgId of (adjacency.get(rpt.id) || [])) {
+              const orgNode = nodeById.get(orgId);
+              if (orgNode?.type === 'org') orgScore.set(orgId, (orgScore.get(orgId) || 0) + 1);
+            }
+          }
+          let bestOrg = null, bestScore = 0;
+          for (const [orgId, score] of orgScore) {
+            if (score > bestScore) { bestScore = score; bestOrg = nodeById.get(orgId); }
+          }
+          if (bestOrg) {
+            const angle = Math.atan2(bestOrg.y, bestOrg.x);
+            const dist = orgR * 0.60 + (Math.random() - 0.5) * 50;
+            n.x = Math.cos(angle) * dist + (Math.random() - 0.5) * 35;
+            n.y = Math.sin(angle) * dist + (Math.random() - 0.5) * 35;
+          } else {
+            n.x = (Math.random() - 0.5) * orgR * 0.6;
+            n.y = (Math.random() - 0.5) * orgR * 0.6;
+          }
+        }
+
+        // 3) report: org 방향 안쪽 링 (orgR * 0.30) — topic 하위 (가장 내부)
+        // report → org 직접 연결로 방향 결정
+        for (const n of otherNodes) { // report
+          const neighbors = adjacency.get(n.id) || [];
+          const orgParent = neighbors.map(id => nodeById.get(id)).find(nb => nb?.type === 'org');
+          if (orgParent) {
+            const angle = Math.atan2(orgParent.y, orgParent.x);
+            const dist = orgR * 0.30 + (Math.random() - 0.5) * 50;
+            n.x = Math.cos(angle) * dist + (Math.random() - 0.5) * 30;
+            n.y = Math.sin(angle) * dist + (Math.random() - 0.5) * 30;
+          } else {
+            n.x = (Math.random() - 0.5) * orgR * 0.3;
+            n.y = (Math.random() - 0.5) * orgR * 0.3;
+          }
+        }
+
+        // ─ Force simulation (D3-스타일 alpha decay) ─
+        // g._simAlpha: 1.0 → 0으로 감쇠, 0.005 미만이면 정지
+        g._simAlpha = 1.0;
+
+        const simulate = () => {
+          if (g._simAlpha < 0.005) return;
+          const a = g._simAlpha;
+          g._simAlpha *= 0.992;   // 감쇠율 — 약 280프레임에서 0.1 이하
+
+          const repulsion = 1200;
+          const spring   = 0.04;
+          const edgeLen  = 90;
+
+          // 속도 감쇠 (마찰)
+          for (const n of g.nodes) { n.vx *= 0.75; n.vy *= 0.75; }
+
+          // 중심 인력 — 노드가 화면 밖으로 탈출하지 못하도록
+          for (const n of g.nodes) {
+            n.vx -= n.x * 0.04 * a;
+            n.vy -= n.y * 0.04 * a;
+          }
+
+          // 반발력 (샘플링으로 성능 최적화)
+          const sample = g.nodes.length > 150 ? g.nodes.filter((_, i) => i % 3 === 0) : g.nodes;
+          for (let i = 0; i < g.nodes.length; i++) {
+            const na = g.nodes[i];
+            for (const nb of sample) {
+              if (na === nb) continue;
+              const dx = na.x - nb.x, dy = na.y - nb.y;
+              const d2 = dx * dx + dy * dy + 1;
+              const f  = (repulsion * a) / d2;
+              na.vx += dx * f; na.vy += dy * f;
+            }
+          }
+
+          // 엣지 인력 (spring) — org 연결은 더 강하고 짧게
+          for (const e of g.edges) {
+            const na = nodeById.get(e.source), nb = nodeById.get(e.target);
+            if (!na || !nb) continue;
+            const isOrgEdge = na.type === 'org' || nb.type === 'org';
+            const springK = isOrgEdge ? spring * 2.5 : spring;
+            const targetLen = isOrgEdge ? edgeLen * 0.65 : edgeLen;
+            const dx = nb.x - na.x, dy = nb.y - na.y;
+            const d  = Math.sqrt(dx * dx + dy * dy) || 1;
+            const f  = (d - targetLen) * springK * a;
+            const fx = (dx / d) * f, fy = (dy / d) * f;
+            // org는 더 무거워서 덜 움직임 (작은 노드가 주로 따라옴)
+            const orgMass = 3;
+            if (isOrgEdge) {
+              if (na.type === 'org') { na.vx += fx / orgMass; na.vy += fy / orgMass; nb.vx -= fx; nb.vy -= fy; }
+              else { na.vx += fx; na.vy += fy; nb.vx -= fx / orgMass; nb.vy -= fy / orgMass; }
+            } else {
+              na.vx += fx; na.vy += fy; nb.vx -= fx; nb.vy -= fy;
+            }
+          }
+
+          // 위치 업데이트 + 속도 상한 (폭발 방지)
+          for (const n of g.nodes) {
+            const speed = Math.sqrt(n.vx * n.vx + n.vy * n.vy);
+            if (speed > 15) { n.vx = (n.vx / speed) * 15; n.vy = (n.vy / speed) * 15; }
+            n.x += n.vx; n.y += n.vy;
+          }
+        };
+
+        // 사전 워밍업: 80스텝 미리 실행 → 첫 프레임이 이미 안정된 배치로 시작
+        g._simAlpha = 1.0;
+        for (let i = 0; i < 80; i++) simulate();
+        // 사전 워밍업 후 전체 보기 자동 맞춤
+        if (isFirstLoad) fitAll();
+
+        const draw = () => {
+
+          const w = canvas.width / devicePixelRatio;
+          const h = canvas.height / devicePixelRatio;
+          ctx.clearRect(0, 0, w, h);
+          ctx.save();
+          ctx.translate(g.panX, g.panY);
+          ctx.scale(g.zoom, g.zoom);
+
+          // 엣지 — primary-primary 엣지와 secondary 연결 엣지 구분
+          // 1) secondary 연결 엣지 (더 연하게)
+          ctx.strokeStyle = '#64748b';
+          ctx.lineWidth = 0.8;
+          ctx.globalAlpha = 0.35;
+          ctx.beginPath();
+          for (const e of g.edges) {
+            const a = nodeById.get(e.source), b = nodeById.get(e.target);
+            if (!a || !b) continue;
+            if (!a.secondary && !b.secondary) continue; // primary-primary는 다음 패스
+            ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
+          }
+          ctx.stroke();
+          // 2) primary-primary 엣지 (진하게)
+          ctx.strokeStyle = '#94a3b8';
+          ctx.lineWidth = 1.2;
+          ctx.globalAlpha = 0.75;
+          ctx.beginPath();
+          for (const e of g.edges) {
+            const a = nodeById.get(e.source), b = nodeById.get(e.target);
+            if (!a || !b) continue;
+            if (a.secondary || b.secondary) continue; // secondary 연결은 이미 그림
+            ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
+          }
+          ctx.stroke();
+          ctx.globalAlpha = 1;
+
+          // 노드 — 타입 기반 크기: org(최대) → topic → report(최소), 각 약 2배 차이
+          const typeBaseR = { org: 14, topic: 7, report: 4 };
+          const typeMaxR  = { org: 22, topic: 12, report: 7 };
+
+          // 현재 활성 타입 필터 — 색상 기준 결정
+          const _activeTypeFilter = document.querySelector('#graph-type-btns .graph-type-btn.button-primary')?.dataset.value ?? '';
+          const _maxDeg = g.nodes.length ? Math.max(...g.nodes.map(n => n.degree || 0), 1) : 1;
+
+          for (const n of g.nodes) {
+            const isSecondary = !!n.secondary; // typeFilter 시 이웃 노드 (dim 처리)
+            const base = typeBaseR[n.type] ?? 5;
+            const max  = typeMaxR[n.type]  ?? 9;
+            const rFull = Math.min(max, base + (n.degree || 0) * 0.25);
+            const r = isSecondary ? rFull * 0.7 : rFull; // secondary는 70% 크기
+
+            // 필터별 색상 기준
+            // 모든 타입: 타입별 고유색 (세 종류 구분)
+            // 토픽/보고서: 커뮤니티 클러스터색 (그룹 파악)
+            // 기관: 연결도 기반 명도 (허브 기관 강조)
+            let color;
+            if (_activeTypeFilter === '') {
+              color = typeColors[n.type] || typeColors.default;
+            } else if (_activeTypeFilter === 'org') {
+              const t = (n.degree || 0) / _maxDeg;
+              const l = Math.round(72 - t * 44);
+              color = `hsl(215,78%,${l}%)`;
+            } else {
+              color = n.cluster_id != null
+                ? clusterColors[n.cluster_id % clusterColors.length]
+                : (typeColors[n.type] || typeColors.default);
+            }
+
+            const isHover = n === g.hoveredNode;
+            const labelColor = typeColors[n.type] || typeColors.default;
+
+            ctx.beginPath();
+            ctx.arc(n.x, n.y, r, 0, Math.PI * 2);
+            ctx.fillStyle = isHover ? '#ffffff' : color;
+            ctx.globalAlpha = isSecondary ? 0.30 : 1;
+            ctx.fill();
+            ctx.strokeStyle = isHover ? color : (isSecondary ? 'rgba(0,0,0,0.08)' : 'rgba(0,0,0,0.18)');
+            ctx.lineWidth = isHover ? 2.5 : 1;
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+
+            // 레이블 — secondary 노드는 hover 시에만 표시
+            if (!isSecondary || isHover) {
+              const fontSize = Math.max(9, Math.min(13, 11 / g.zoom));
+              ctx.font = `${isHover ? 'bold ' : ''}${fontSize}px -apple-system,sans-serif`;
+              ctx.textAlign = 'center';
+              const label = n.label || n.id;
+              const tw = ctx.measureText(label).width;
+              ctx.globalAlpha = isSecondary ? 0.55 : 1;
+              ctx.fillStyle = 'rgba(255,255,255,0.88)';
+              ctx.fillRect(n.x - tw/2 - 2, n.y - r - fontSize - 2, tw + 4, fontSize + 2);
+              ctx.fillStyle = isHover ? '#000000' : labelColor;
+              ctx.fillText(label, n.x, n.y - r - 3);
+              ctx.globalAlpha = 1;
+            }
+          }
+          ctx.restore();
+          simulate();
+          g._animFrame = requestAnimationFrame(draw);
+        };
+
+        if (g._animFrame) cancelAnimationFrame(g._animFrame);
+        g._animFrame = requestAnimationFrame(draw);
+        g._nodeById = nodeById;
+        g._fitAll = fitAll;
+
+        // ─ 이벤트 ─
+        const toGraph = (cx, cy) => ({
+          x: (cx - g.panX) / g.zoom,
+          y: (cy - g.panY) / g.zoom,
+        });
+        const hitNode = (gx, gy) => {
+          const typeBaseR = { org: 14, topic: 7, report: 4 };
+          const typeMaxR  = { org: 22, topic: 12, report: 7 };
+          for (const n of g.nodes) {
+            const base = typeBaseR[n.type] ?? 5;
+            const max  = typeMaxR[n.type]  ?? 9;
+            const r = Math.min(max, base + (n.degree || 0) * 0.25) + 4; // +4 여유
+            if ((n.x - gx) ** 2 + (n.y - gy) ** 2 < r * r) return n;
+          }
+          return null;
+        };
+
+        let lastPan = null;
+        let dragPrev = null;
+
+        canvas.onmousedown = e => {
+          const { x, y } = toGraph(e.offsetX, e.offsetY);
+          const hit = hitNode(x, y);
+          if (hit) {
+            g.dragging = hit;
+            dragPrev = { x, y };
+            // org 드래그 시 연결된 모든 이웃 노드를 그룹으로 수집
+            g.dragGroup = hit.type === 'org'
+              ? (adjacency.get(hit.id) || []).map(id => nodeById.get(id)).filter(Boolean)
+              : [];
+          } else {
+            lastPan = { x: e.offsetX, y: e.offsetY };
+          }
+        };
+
+        canvas.onmousemove = e => {
+          const { x, y } = toGraph(e.offsetX, e.offsetY);
+          g.hoveredNode = hitNode(x, y);
+          const tip = document.getElementById('graph-tooltip');
+          if (g.hoveredNode) {
+            tip.style.display = 'block';
+            tip.style.left = (e.offsetX + 12) + 'px';
+            tip.style.top = (e.offsetY - 8) + 'px';
+            const n = g.hoveredNode;
+            tip.innerHTML = `<strong>${this.escapeHtml(n.label || n.id)}</strong><br><span style="color:var(--text-tertiary)">${n.type} · degree ${n.degree || 0}</span>`;
+          } else { tip.style.display = 'none'; }
+
+          if (g.dragging) {
+            const dx = x - dragPrev.x;
+            const dy = y - dragPrev.y;
+            g.dragging.x = x; g.dragging.y = y;
+            g.dragging.vx = 0; g.dragging.vy = 0;
+            // 그룹 노드도 같은 delta 이동 (org의 자식들이 따라옴)
+            for (const gn of (g.dragGroup || [])) {
+              gn.x += dx; gn.y += dy;
+              gn.vx = 0; gn.vy = 0;
+            }
+            dragPrev = { x, y };
+          } else if (lastPan) {
+            g.panX += e.offsetX - lastPan.x; g.panY += e.offsetY - lastPan.y;
+            lastPan = { x: e.offsetX, y: e.offsetY };
+          }
+        };
+
+        canvas.onmouseup = () => { g.dragging = null; g.dragGroup = []; lastPan = null; dragPrev = null; };
+        canvas.onmouseleave = () => { g.dragging = null; g.dragGroup = []; lastPan = null; dragPrev = null; document.getElementById('graph-tooltip').style.display = 'none'; };
+        canvas.onclick = e => {
+          const { x, y } = toGraph(e.offsetX, e.offsetY);
+          const hit = hitNode(x, y);
+          if (hit?.type === 'report') this.showReportDetail(hit.id.replace(/^report:/, ''));
+        };
+        canvas.onwheel = e => {
+          e.preventDefault();
+          const factor = e.deltaY < 0 ? 1.1 : 0.9;
+          const ox = e.offsetX, oy = e.offsetY;
+          g.panX = ox - (ox - g.panX) * factor;
+          g.panY = oy - (oy - g.panY) * factor;
+          g.zoom *= factor;
+          g.zoom = Math.min(8, Math.max(0.1, g.zoom));
+        };
+
+        // 윈도우 리사이즈 대응 — 이전 핸들러 제거 후 재등록
+        if (g._resizeHandler) window.removeEventListener('resize', g._resizeHandler);
+        g._resizeHandler = () => resize();
+        window.addEventListener('resize', g._resizeHandler);
+      },
+
+      graphZoom(f) {
+        const g = this._graph;
+        const c = document.getElementById('graph-canvas');
+        const cx = c.clientWidth / 2, cy = c.clientHeight / 2;
+        g.panX = cx - (cx - g.panX) * f;
+        g.panY = cy - (cy - g.panY) * f;
+        g.zoom = Math.min(8, Math.max(0.1, g.zoom * f));
+      },
+
+      graphReset() {
+        const g = this._graph;
+        if (g._fitAll) { g._fitAll(); return; }
+        const c = document.getElementById('graph-canvas');
+        g.panX = c.clientWidth / 2; g.panY = c.clientHeight / 2; g.zoom = 1;
+      },
+
+      async exportGraphReport() {
+        try {
+          const r = await fetch('/api/graph/report', { method: 'POST' });
+          const d = await r.json();
+          if (d.ok) { alert('GRAPH_REPORT.md 생성 완료'); this.loadGraph(); }
+          else alert('실패: ' + (d.error || ''));
+        } catch (e) { alert('오류: ' + e.message); }
+      },
+
+      async loadPending() {
+        try {
+          const data = await fetch('/api/pending').then(r => r.json());
+          const all = data.items || [];
+
+          // ── 파이프라인 단계 정의 ──
+          const STAGES = [
+            { key: 'waiting',    label: '대기',      color: '#6b7280', icon: '⏳' },
+            { key: 'queued',     label: '큐 대기',   color: '#64748b', icon: '📋' },
+            { key: 'downloading',label: '다운로드',  color: '#f59e0b', icon: '⬇️' },
+            { key: 'converting', label: 'MD변환',    color: '#f97316', icon: '📄' },
+            { key: 'extracting', label: 'AI추출',    color: '#ec4899', icon: '🤖' },
+            { key: 'graph',      label: '그래프저장',color: '#3b82f6', icon: '🔗' },
+            { key: 'wiki',       label: '위키변환',  color: '#8b5cf6', icon: '📖' },
+            { key: 'done',       label: '완료',      color: '#10b981', icon: '✅' },
+          ];
+
+          // 단계별 카운트
+          const counts = {};
+          for (const s of STAGES) counts[s.key] = 0;
+          counts.failed = 0;
+          for (const item of all) {
+            if (item.status in counts) counts[item.status]++;
+          }
+
+          // ── 파이프라인 요약 렌더링 ──
+          const pipelineEl = document.getElementById('pending-pipeline');
+          if (pipelineEl) {
+            const hasActivity = STAGES.some(s => counts[s.key] > 0) || counts.failed > 0;
+            if (!hasActivity) {
+              pipelineEl.style.display = 'none';
+            } else {
+              pipelineEl.style.display = 'flex';
+              const parts = STAGES.map((s, i) => {
+                const n = counts[s.key];
+                const badge = `<span style="display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:12px;background:${n > 0 ? s.color + '22' : 'transparent'};border:1px solid ${n > 0 ? s.color + '66' : 'var(--border-subtle)'};color:${n > 0 ? s.color : 'var(--text-tertiary)'};">${s.icon} ${s.label}<strong style="margin-left:3px;">${n}</strong></span>`;
+                const arrow = i < STAGES.length - 1 ? `<span style="color:var(--text-tertiary);margin:0 2px;">→</span>` : '';
+                return badge + arrow;
+              }).join('');
+              const failedBadge = counts.failed > 0
+                ? `<span style="margin-left:6px;padding:3px 8px;border-radius:12px;background:#ef444422;border:1px solid #ef444466;color:#ef4444;">❌ 실패 <strong>${counts.failed}</strong></span>`
+                : '';
+              pipelineEl.innerHTML = parts + failedBadge;
+            }
+          }
+
+          // ── 아이템 목록: 활성 단계 + 대기 표시, 완료/거절은 제외 ──
+          const activeStatuses = new Set(['waiting', 'queued', 'downloading', 'converting', 'extracting', 'graph', 'wiki', 'failed']);
+          const items = all.filter(item => activeStatuses.has(item.status));
+
+          // 정렬: 활성(downloading→converting→extracting→graph→wiki) → 큐 대기(queued) → 대기(waiting) → 실패(failed)
+          const stageOrder = { downloading: 0, converting: 1, extracting: 2, graph: 3, wiki: 4, queued: 5, waiting: 6, failed: 7 };
+          items.sort((a, b) => (stageOrder[a.status] ?? 9) - (stageOrder[b.status] ?? 9));
+
+          const html = items.map(item => {
+            let d = {};
+            try { d = JSON.parse(item.data || '{}'); } catch {}
+            const title = d.title || item.docid || '제목 없음';
+            const keyword = d.keyword ? `<span style="opacity:.7;">[${this.escapeHtml(d.keyword)}]</span>` : '';
+            const isWaiting = item.status === 'waiting';
+            const isActive = ['queued', 'downloading', 'converting', 'extracting', 'graph', 'wiki'].includes(item.status);
+            const stage = STAGES.find(s => s.key === item.status) ?? { label: item.status, color: '#6b7280', icon: '?' };
+
+            // 활성 단계 애니메이션 점
+            const spinner = isActive
+              ? `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${stage.color};margin-right:4px;animation:pulse 1.2s ease-in-out infinite;"></span>`
+              : '';
+
+            const safeDocid = this.escapeHtml(item.docid);
+            return `
+            <div class="list-item" style="gap:var(--space-3);cursor:pointer;" onclick="app.showStageTrack('${safeDocid}')">
+              <div style="flex:1;min-width:0;">
+                <div class="list-item-title">${this.escapeHtml(title)}</div>
+                <div class="list-item-meta" style="align-items:center;gap:var(--space-2);">
+                  <span style="display:inline-flex;align-items:center;padding:2px 7px;border-radius:10px;font-size:11px;background:${stage.color}22;border:1px solid ${stage.color}55;color:${stage.color};">${spinner}${stage.icon} ${stage.label}</span>
+                  <span>${this.escapeHtml(item.source||'')} ${keyword}</span>
+                </div>
+              </div>
+              <div style="display:flex;gap:6px;flex-shrink:0;" onclick="event.stopPropagation()">
+                ${isWaiting ? `<button class="button" onclick="app.approvePending('${safeDocid}')" style="height:30px;padding:0 10px;font-size:var(--text-xs);border-radius:5px;">다운로드</button>` : ''}
+                ${isWaiting ? `<button onclick="app.rejectPending('${safeDocid}')" style="height:30px;padding:0 10px;font-size:var(--text-xs);border-radius:5px;border:1px solid var(--border);background:none;color:var(--text-secondary);cursor:pointer;">거절</button>` : ''}
+              </div>
+            </div>`;
+          }).join('');
+
+          document.getElementById('pending-list').innerHTML = html || '<div class="empty-state"><div style="font-size:13px;color:var(--text-secondary);margin-bottom:6px;">수집 대기 항목 없음 ✓</div><div style="font-size:11px;color:var(--text-tertiary);">스케줄 탭에서 수집을 실행하거나 검색 결과에서 추가하세요</div></div>';
+        } catch (e) {
+          console.error('Load pending failed:', e);
+        }
+      },
+
+      async approvePending(id) {
+        try {
+          await fetch(`/api/pending/${id}/approve`, { method: 'POST' });
+          this.loadPending();
+        } catch (e) {
+          alert('승인 실패');
+        }
+      },
+
+      async rejectPending(id) {
+        try {
+          await fetch(`/api/pending/${id}/reject`, { method: 'POST' });
+          this.loadPending();
+        } catch (e) {
+          alert('거절 실패');
+        }
+      },
+
+      // ── 파일 상태 추적 패널 ──
+      async showStageTrack(docid) {
+        const overlay = document.getElementById('stage-track-overlay');
+        const panel   = document.getElementById('stage-track-panel');
+        const content = document.getElementById('stage-track-content');
+        if (!panel) return;
+
+        // 열기 & 로딩
+        overlay.style.display = 'block';
+        panel.style.display = 'flex';
+        content.innerHTML = '<div class="loading" style="margin:40px auto;"></div>';
+
+        try {
+          const item = await fetch(`/api/pending/${encodeURIComponent(docid)}`).then(r => r.json());
+          let d = {};
+          try { d = JSON.parse(item.data || '{}'); } catch {}
+          const title = d.title || item.docid || '제목 없음';
+          const stageLog = item.stage_log || [];
+
+          const STAGES = [
+            { key: 'waiting',    label: '대기',        color: '#6b7280', icon: '⏳' },
+            { key: 'queued',     label: '큐 대기',     color: '#64748b', icon: '📋' },
+            { key: 'downloading',label: '다운로드',    color: '#f59e0b', icon: '⬇️' },
+            { key: 'converting', label: 'MD변환',      color: '#f97316', icon: '📄' },
+            { key: 'extracting', label: 'AI추출',      color: '#ec4899', icon: '🤖' },
+            { key: 'graph',      label: '그래프저장',  color: '#3b82f6', icon: '🔗' },
+            { key: 'wiki',       label: '위키변환',    color: '#8b5cf6', icon: '📖' },
+            { key: 'done',       label: '완료',        color: '#10b981', icon: '✅' },
+            { key: 'failed',     label: '실패',        color: '#ef4444', icon: '❌' },
+            { key: 'dismissed',  label: '거절',        color: '#6b7280', icon: '🚫' },
+          ];
+
+          const fmtDuration = ms => {
+            if (ms < 1000) return `${ms}ms`;
+            if (ms < 60000) return `${(ms/1000).toFixed(1)}초`;
+            return `${Math.floor(ms/60000)}분 ${Math.floor((ms%60000)/1000)}초`;
+          };
+          const fmtTime = ts => new Date(ts).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+          // 타임라인 렌더링
+          const timelineHtml = stageLog.length === 0
+            ? '<p style="color:var(--text-tertiary);text-align:center;margin-top:40px;">기록 없음 (이전 항목)</p>'
+            : stageLog.map((entry, i) => {
+                const s = STAGES.find(x => x.key === entry.stage) ?? { label: entry.stage, color: '#6b7280', icon: '?' };
+                const isLast = i === stageLog.length - 1;
+                const isCurrent = isLast && !['done', 'failed', 'dismissed'].includes(entry.stage);
+                return `
+                <div style="display:flex;gap:12px;position:relative;">
+                  <!-- 세로선 -->
+                  ${!isLast ? `<div style="position:absolute;left:11px;top:24px;bottom:-8px;width:2px;background:var(--border-subtle);"></div>` : ''}
+                  <!-- 원형 아이콘 -->
+                  <div style="flex-shrink:0;width:24px;height:24px;border-radius:50%;background:${s.color}22;border:2px solid ${s.color};display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:2px;">
+                    ${isCurrent ? `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${s.color};animation:pulse 1.2s ease-in-out infinite;"></span>` : s.icon}
+                  </div>
+                  <!-- 내용 -->
+                  <div style="flex:1;padding-bottom:16px;">
+                    <div style="font-weight:600;font-size:var(--text-xs);color:${s.color};">${s.label}</div>
+                    <div style="font-size:11px;color:var(--text-tertiary);margin-top:2px;">${fmtTime(entry.ts)}</div>
+                    ${entry.duration_ms > 0 ? `<div style="font-size:11px;color:var(--text-secondary);margin-top:3px;padding:2px 7px;background:var(--surface-raised);border-radius:4px;display:inline-block;">소요 ${fmtDuration(entry.duration_ms)}</div>` : ''}
+                  </div>
+                </div>`;
+              }).join('');
+
+          // 현재 단계 진행 중이면 다음 단계 예고
+          const currentStage = item.status;
+          const currentIdx = STAGES.findIndex(s => s.key === currentStage);
+          const nextStage = currentIdx >= 0 && currentIdx < STAGES.length - 1 ? STAGES[currentIdx + 1] : null;
+          const pendingNextHtml = (nextStage && !['done','failed','dismissed'].includes(currentStage))
+            ? `<div style="display:flex;gap:12px;opacity:.4;">
+                <div style="flex-shrink:0;width:24px;height:24px;border-radius:50%;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;">${nextStage.icon}</div>
+                <div style="padding-bottom:8px;"><div style="font-size:var(--text-xs);color:var(--text-tertiary);">${nextStage.label} (대기 중)</div></div>
+               </div>`
+            : '';
+
+          content.innerHTML = `
+            <div style="margin-bottom:var(--space-4);">
+              <div style="font-size:var(--text-xs);color:var(--text-tertiary);margin-bottom:4px;">${this.escapeHtml(item.source || '')}</div>
+              <div style="font-weight:600;font-size:var(--text-sm);line-height:1.4;">${this.escapeHtml(title)}</div>
+              <div style="font-size:11px;color:var(--text-tertiary);margin-top:4px;word-break:break-all;">${this.escapeHtml(item.docid)}</div>
+            </div>
+            <hr style="border:none;border-top:1px solid var(--border-subtle);margin-bottom:var(--space-4);">
+            <div style="font-size:var(--text-xs);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-3);">처리 단계 이력</div>
+            <div>${timelineHtml}</div>
+            ${pendingNextHtml}
+          `;
+
+          // 실시간 갱신: SSE item_stage 이벤트 시 자동 새로고침
+          this._trackingDocid = docid;
+        } catch (e) {
+          content.innerHTML = '<p style="color:var(--error);padding:20px;">로드 실패</p>';
+        }
+      },
+
+      closeStageTrack() {
+        document.getElementById('stage-track-overlay').style.display = 'none';
+        document.getElementById('stage-track-panel').style.display = 'none';
+        this._trackingDocid = null;
+      },
+
+      // ── 파이프라인 상태바 칩 렌더링 ──
+      renderPipelineBar(p, failCount) {
+        const el = document.getElementById('status-jobs');
+        if (!el) return;
+        const PIPE = [
+          { key: 'waiting',    label: '대기',    color: '#6b7280' },
+          { key: 'queued',     label: '큐대기',  color: '#64748b' },
+          { key: 'downloading',label: '다운로드',color: '#f59e0b' },
+          { key: 'converting', label: 'MD변환',  color: '#f97316' },
+          { key: 'extracting', label: 'AI추출',  color: '#ec4899' },
+          { key: 'graph',      label: '그래프',  color: '#3b82f6' },
+          { key: 'wiki',       label: '위키',    color: '#8b5cf6' },
+          { key: 'done',       label: '완료',    color: '#10b981' },
+          { key: 'failed',     label: '실패',    color: '#ef4444' },
+        ];
+        el.innerHTML = PIPE.map((s, i) => {
+          const n = s.key === 'failed' ? (failCount || 0) : (p[s.key] || 0);
+          const active = n > 0;
+          const chipStyle = active ? `color:${s.color};` : '';
+          const clickAttr = active
+            ? `onclick="app.showStagePill('${s.key}','${s.label}','${s.color}')" title="${s.label} ${n}건 보기"`
+            : '';
+          const chip = `<button class="stage-chip${active ? ' active' : ''}" style="${chipStyle}" ${clickAttr}>${s.label}(${n})</button>`;
+          const sep = i < PIPE.length - 1 ? `<span class="stage-chip-sep">|</span>` : '';
+          return chip + sep;
+        }).join('');
+      },
+
+      // ── 파이프라인 단계 표시줄 렌더링 ──
+      _renderStagePipe(status) {
+        if (status === 'waiting' || status === 'queued') return '';
+        const PCT   = { downloading: 35, converting: 55, extracting: 70, graph: 85, wiki: 95, done: 100 };
+        const LABEL = { downloading: '다운로드 중', converting: 'MD 변환 중', extracting: 'AI 추출 중', graph: '그래프 구축 중', wiki: '위키 생성 중', done: '완료', failed: '실패' };
+        const isFailed = status === 'failed';
+        const isDone   = status === 'done';
+        const pct   = isFailed ? 0 : (PCT[status] ?? 0);
+        const label = LABEL[status] ?? status;
+        const color = isDone ? 'var(--success,#27ae60)' : isFailed ? 'var(--error,#e74c3c)' : 'var(--accent)';
+        const textColor = isFailed ? 'var(--error,#e74c3c)' : isDone ? 'var(--success,#27ae60)' : 'var(--text-tertiary)';
+        return `<div style="margin-top:6px;">
+          <div style="height:4px;background:var(--border-subtle,#eee);border-radius:2px;overflow:hidden;">
+            <div style="height:100%;width:${pct}%;background:${color};border-radius:2px;transition:width .4s ease;"></div>
+          </div>
+          <div style="margin-top:3px;font-size:10px;color:${textColor};display:flex;justify-content:space-between;align-items:center;">
+            <span>${label}</span><span style="font-variant-numeric:tabular-nums;">${pct}%</span>
+          </div>
+        </div>`;
+      },
+
+      // ── 단계 토스트 본문만 갱신 (폴링용) ──
+      async _refreshStagePillBody(stage) {
+        const body = document.getElementById('stage-toast-body');
+        if (!body) return;
+        try {
+          let rows = [];
+          if (stage === 'failed') {
+            const data = await fetch('/api/failures?dismissed=false').then(r => r.json());
+            rows = (data.items || []).map(it => ({
+              title: it.title || it.docid || '제목 없음',
+              sub: it.source || '',
+              status: 'failed',
+            }));
+          } else {
+            const data = await fetch('/api/pending').then(r => r.json());
+            rows = (data.items || [])
+              .filter(it => it.status === stage)
+              .map(it => {
+                let d = {};
+                try { d = JSON.parse(it.data || '{}'); } catch {}
+                return { title: d.title || it.docid || '제목 없음', sub: it.source || '', status: it.status };
+              });
+          }
+          if (rows.length === 0) {
+            body.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-tertiary);font-size:var(--text-xs);">항목 없음</div>';
+            return;
+          }
+          body.innerHTML = rows.map(r => `
+            <div class="stage-toast-item">
+              <div class="stage-toast-item-title">${this.escapeHtml(r.title)}</div>
+              ${r.sub ? `<div class="stage-toast-item-sub">${this.escapeHtml(r.sub)}</div>` : ''}
+              ${this._renderStagePipe(r.status)}
+            </div>`).join('');
+        } catch {
+          /* 폴링 실패는 무시 */
+        }
+      },
+
+      // ── 단계 토스트 표시 (아래서 위로 슬라이드) ──
+      async showStagePill(stage, label, color) {
+        // 기존 토스트 + 갱신 인터벌 닫기
+        this.closeStageToast();
+        const toast = document.getElementById('stage-toast');
+        const titleEl = document.getElementById('stage-toast-title');
+        const body = document.getElementById('stage-toast-body');
+        if (!toast) return;
+
+        this._stageToastCurrentStage = stage;
+        titleEl.textContent = `${label} 항목`;
+        titleEl.style.color = color;
+        body.innerHTML = '<div style="padding:20px;text-align:center;"><div class="loading" style="margin:0 auto;width:20px;height:20px;"></div></div>';
+
+        toast.style.display = 'flex';
+        requestAnimationFrame(() => requestAnimationFrame(() => toast.classList.add('open')));
+
+        await this._refreshStagePillBody(stage);
+
+        // 2초마다 자동 갱신 (진행 상태 실시간 반영)
+        this._stageToastTimer = setInterval(() => this._refreshStagePillBody(stage), 2000);
+      },
+
+      closeStageToast() {
+        if (this._stageToastTimer) {
+          clearInterval(this._stageToastTimer);
+          this._stageToastTimer = null;
+        }
+        this._stageToastCurrentStage = null;
+        const toast = document.getElementById('stage-toast');
+        if (!toast) return;
+        toast.classList.remove('open');
+        setTimeout(() => { if (!toast.classList.contains('open')) toast.style.display = 'none'; }, 200);
+      },
+
+      async loadFailures() {
+        try {
+          const data = await fetch('/api/failures?dismissed=false').then(r => r.json());
+          const html = (data.items || [])
+            .map(item => `
+              <div class="list-item" data-hash="${item.hash}" data-docid="${item.docid || item.hash}">
+                <div style="flex:1;min-width:0;">
+                  <div class="list-item-title" style="cursor:pointer;" onclick="window.app.showReportDetail('${item.hash}')">${this.escapeHtml(item.title || '제목 없음')}</div>
+                  <div class="list-item-meta" style="flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1);">
+                    <span class="badge error failure-status-badge" data-hash="${item.hash}">${item.status}</span>
+                    ${item.failed_stage ? `<span class="badge" style="background:var(--warning-bg,#fff3cd);color:var(--warning,#856404);font-size:var(--text-xs);">${item.failed_stage}</span>` : ''}
+                    ${item.attempt != null ? `<span style="font-size:var(--text-xs);color:var(--text-secondary);">시도 ${item.attempt}회</span>` : ''}
+                    <span style="color:var(--error);font-size:var(--text-xs);max-width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;" title="${this.escapeHtml(item.failed_reason || item.last_error || item.error_message || '')}" class="failure-error-msg" data-hash="${item.hash}">${this.escapeHtml(item.failed_reason || item.last_error || item.error_message || '')}</span>
+                    ${item.source ? `<span>${this.escapeHtml(item.source)}</span>` : ''}
+                  </div>
+                  <!-- 진행상황 바 (재시도 시 표시) -->
+                  <div class="failure-progress" data-hash="${item.hash}" style="display:none;margin-top:var(--space-2);">
+                    <div style="display:flex;align-items:center;gap:var(--space-2);">
+                      <div style="flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;">
+                        <div class="failure-progress-bar" data-hash="${item.hash}" style="height:100%;background:var(--accent);width:0%;transition:width 0.4s;border-radius:2px;"></div>
+                      </div>
+                      <span class="failure-progress-label" data-hash="${item.hash}" style="font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap;min-width:80px;text-align:right;"></span>
+                    </div>
+                  </div>
+                </div>
+                <div style="display:flex;gap:var(--space-2);flex-shrink:0;">
+                  <button class="button failure-retry-btn" data-hash="${item.hash}" onclick="window.app.retryFailure('${item.hash}')"><i class="fas fa-redo"></i></button>
+                  <button class="button button-danger" onclick="window.app.dismissFailure('${item.hash}')"><i class="fas fa-eye-slash"></i></button>
+                </div>
+              </div>
+            `).join('');
+          document.getElementById('failures-list').innerHTML = html || '<div class="empty-state">실패 항목 없음 ✓</div>';
+        } catch (e) {
+          console.error('Load failures failed:', e);
+        }
+      },
+
+      async retryFailure(hash) {
+        try {
+          const r = await fetch(`/api/failures/${hash}/retry`, { method: 'POST' });
+          if (r.ok) {
+            // 즉시 UI 상태 업데이트 (SSE 연결 전 피드백)
+            this._setFailureProgress(hash, 5, '재시도 대기 중...');
+            const btn = document.querySelector(`.failure-retry-btn[data-hash="${hash}"]`);
+            if (btn) btn.disabled = true;
+            const badge = document.querySelector(`.failure-status-badge[data-hash="${hash}"]`);
+            if (badge) { badge.textContent = '대기중'; badge.className = 'badge failure-status-badge'; badge.style.background = '#888'; }
+          } else alert('재시도 실패');
+        } catch (e) { alert('오류: ' + e.message); }
+      },
+
+      _setFailureProgress(hash, pct, label, done = false, error = false) {
+        const bar   = document.querySelector(`.failure-progress-bar[data-hash="${hash}"]`);
+        const lbl   = document.querySelector(`.failure-progress-label[data-hash="${hash}"]`);
+        const wrap  = document.querySelector(`.failure-progress[data-hash="${hash}"]`);
+        if (!wrap) return;
+        wrap.style.display = 'block';
+        if (bar) { bar.style.width = `${pct}%`; bar.style.background = error ? 'var(--error)' : 'var(--accent)'; }
+        if (lbl) lbl.textContent = label;
+        if (done || error) {
+          setTimeout(() => {
+            wrap.style.display = 'none';
+            if (done) this.loadFailures();
+          }, done ? 1500 : 4000);
+        }
+      },
+
+      async retryAllFailures() {
+        try {
+          const r = await fetch('/api/failures/retry-all', { method: 'POST' });
+          const d = await r.json();
+          if (d.ok) { alert(`${d.queued ?? '전체'} 건 재시도 큐 등록`); this.loadFailures(); }
+          else alert('전체 재시도 실패');
+        } catch (e) { alert('오류: ' + e.message); }
+      },
+
+      async dismissFailure(hash) {
+        try {
+          await fetch(`/api/failures/${hash}/dismiss`, { method: 'POST' });
+          this.loadFailures();
+        } catch (e) { alert('무시 실패'); }
+      },
+
+      async dismissAllFailures() {
+        if (!confirm('모든 실패 항목을 목록에서 숨기시겠습니까?\n(삭제가 아니라 목록에서 숨기는 것입니다)')) return;
+        try {
+          await fetch('/api/failures/dismiss-all', { method: 'POST' });
+          this.loadFailures(); this.loadStats();
+        } catch (e) { alert('오류: ' + e.message); }
+      },
+
+      async resetAllData() {
+        const confirmed = confirm(
+          '⚠️ 전체 초기화\n\n다음 항목이 모두 삭제됩니다:\n• 수집된 보고서, 재시도 큐, 캐시, 이력\n• 위키 파일 전체\n• 그래프 DB\n• inbox, archive, logs 폴더 내용\n\n인증정보·스케줄 설정·backup 폴더는 유지됩니다.\n\n정말 계속하시겠습니까?'
+        );
+        if (!confirmed) return;
+        try {
+          const r = await fetch('/api/reset', { method: 'POST' });
+          const d = await r.json();
+          if (d.ok) {
+            alert('초기화 완료. 페이지를 새로고침합니다.');
+            location.reload();
+          } else {
+            alert('초기화 실패: ' + (d.error ?? '알 수 없는 오류'));
+          }
+        } catch (e) { alert('오류: ' + e.message); }
+      },
+
+      async loadSchedules() {
+        try {
+          const data = await fetch('/api/schedules').then(r => r.json());
+          const typeLabel = { daily: '매일', weekly: '매주', interval: '주기', cron: 'Cron', manual: '수동' };
+          const html = (data.items || [])
+            .map(item => {
+              let sourcesArr = [];
+              try { sourcesArr = JSON.parse(item.sources); } catch { sourcesArr = item.sources ? item.sources.split(',').map(s => s.trim()) : []; }
+              const sourcesDisplay = Array.isArray(sourcesArr) ? sourcesArr.join(', ') : (item.sources || '');
+              const schedLabel = (typeLabel[item.schedule_type] || item.schedule_type) + (item.schedule_value ? ` (${item.schedule_value})` : '');
+              return `
+              <div class="list-item" style="gap:var(--space-3);">
+                <div style="flex:1;min-width:0;">
+                  <div class="list-item-title">${this.escapeHtml(item.keyword)}</div>
+                  <div class="list-item-meta">
+                    <span>${this.escapeHtml(schedLabel)}</span>
+                    <span>${this.escapeHtml(sourcesDisplay)}</span>
+                  </div>
+                </div>
+                <div style="display:flex;gap:6px;flex-shrink:0;">
+                  <button id="run-btn-${item.id}" onclick="app.runScheduleNow(${item.id}, '${this.escapeHtml(item.keyword).replace(/'/g, "\\'")}')"
+                    style="height:30px;padding:0 10px;font-size:var(--text-xs);border-radius:5px;border:1px solid var(--accent);background:none;color:var(--accent);cursor:pointer;font-weight:500;display:flex;align-items:center;gap:4px;">
+                    <i class="fas fa-play"></i> 지금 실행
+                  </button>
+                  <button onclick="app.toggleSchedule(${item.id})"
+                    style="height:30px;padding:0 10px;font-size:var(--text-xs);border-radius:5px;border:1px solid var(--border);background:${item.is_active ? 'var(--accent)' : 'none'};color:${item.is_active ? '#fff' : 'var(--text-secondary)'};cursor:pointer;font-weight:500;">
+                    ${item.is_active ? '활성' : '비활성'}
+                  </button>
+                  <button onclick="app.editSchedule(${item.id})"
+                    style="height:30px;padding:0 10px;font-size:var(--text-xs);border-radius:5px;border:1px solid var(--border);background:none;color:var(--text-secondary);cursor:pointer;">
+                    <i class="fas fa-pencil-alt"></i>
+                  </button>
+                  <button onclick="app.deleteSchedule(${item.id}, '${this.escapeHtml(item.keyword).replace(/'/g, "\\'")}')"
+                    style="height:30px;padding:0 10px;font-size:var(--text-xs);border-radius:5px;border:1px solid var(--border);background:none;color:var(--error,#e74c3c);cursor:pointer;">
+                    <i class="fas fa-trash"></i>
+                  </button>
+                </div>
+              </div>
+            `}).join('');
+          document.getElementById('schedules-list').innerHTML = html || '<div class="empty-state">스케줄 없음</div>';
+        } catch (e) {
+          console.error('Load schedules failed:', e);
+        }
+      },
+
+      toggleScheduleForm() {
+        const form = document.getElementById('schedule-form');
+        form.classList.toggle('hidden');
+        if (!form.classList.contains('hidden')) {
+          window.app.loadScheduleSources();
+        }
+      },
+
+      async loadScheduleSources() {
+        const container = document.getElementById('schedule-sources-list');
+        if (!container) return;
+        try {
+          const data = await fetch('/api/skills').then(r => r.json());
+          const skills = data.skills || [];
+          if (skills.length === 0) {
+            container.innerHTML = '<span style="color:var(--text-tertiary);font-size:var(--text-sm);">등록된 소스 없음</span>';
+            return;
+          }
+          container.innerHTML = skills.map(s => `
+            <label style="display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:3px;cursor:pointer;font-size:var(--text-xs);user-select:none;transition:background .12s;">
+              <input type="checkbox" value="${s.id}" style="accent-color:var(--accent);" />
+              ${this.escapeHtml(s.name || s.id)}
+            </label>
+          `).join('');
+        } catch (e) {
+          container.innerHTML = '<span style="color:var(--error);font-size:var(--text-sm);">소스 목록 로드 실패</span>';
+        }
+      },
+
+      _updateScheduleTypeUI(type) {
+        const timeG = document.getElementById('schedule-time-group');
+        const dowG  = document.getElementById('schedule-dow-group');
+        const intG  = document.getElementById('schedule-interval-group');
+        if (!timeG) return;
+        timeG.style.display = (type === 'daily' || type === 'weekly') ? '' : 'none';
+        dowG.style.display  = (type === 'weekly') ? '' : 'none';
+        intG.style.display  = (type === 'interval') ? '' : 'none';
+      },
+
+      async createSchedule() {
+        try {
+          const keyword = document.getElementById('schedule-keyword').value.trim();
+          const sourcesArr = [...document.querySelectorAll('#schedule-sources-list input[type=checkbox]:checked')].map(c => c.value);
+          const sources = JSON.stringify(sourcesArr);
+          if (!keyword) { alert('키워드를 입력하세요.'); return; }
+          if (!sourcesArr.length) { alert('소스를 1개 이상 선택하세요.'); return; }
+          const scheduleType = document.getElementById('schedule-type').value;
+          // schedule_value 구성 — 타입별
+          let scheduleValue = null;
+          if (scheduleType === 'daily') {
+            scheduleValue = document.getElementById('schedule-time').value || '09:00';
+          } else if (scheduleType === 'weekly') {
+            const dow  = document.getElementById('schedule-dow').value;
+            const time = document.getElementById('schedule-time').value || '09:00';
+            scheduleValue = `${dow} ${time}`;
+          } else if (scheduleType === 'interval') {
+            scheduleValue = document.getElementById('schedule-interval').value.trim() || '6h';
+          }
+          const data = {
+            keyword,
+            sources,
+            schedule_type: scheduleType,
+            schedule_value: scheduleValue,
+            auto_approve: document.getElementById('schedule-auto-approve').checked,
+          };
+          await fetch('/api/schedules', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
+          this.toggleScheduleForm();
+          this.loadSchedules();
+        } catch (e) {
+          alert('스케줄 생성 실패');
+        }
+      },
+
+      async runScheduleNow(id, keyword) {
+        const btn = document.getElementById(`run-btn-${id}`);
+        if (!btn || btn.disabled) return;
+        btn.disabled = true;
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 실행 중...';
+        btn.style.opacity = '0.6';
+        try {
+          const res = await fetch(`/api/schedules/${id}/run`, { method: 'POST' });
+          if (res.ok) {
+            btn.innerHTML = '<i class="fas fa-check"></i> 시작됨';
+            btn.style.color = 'var(--success, #27ae60)';
+            btn.style.borderColor = 'var(--success, #27ae60)';
+            setTimeout(() => {
+              btn.disabled = false;
+              btn.innerHTML = '<i class="fas fa-play"></i> 지금 실행';
+              btn.style.color = 'var(--accent)';
+              btn.style.borderColor = 'var(--accent)';
+              btn.style.opacity = '1';
+            }, 3000);
+          } else {
+            throw new Error(`HTTP ${res.status}`);
+          }
+        } catch (e) {
+          btn.disabled = false;
+          btn.innerHTML = '<i class="fas fa-play"></i> 지금 실행';
+          btn.style.color = 'var(--accent)';
+          btn.style.borderColor = 'var(--accent)';
+          btn.style.opacity = '1';
+          alert(`"${keyword}" 실행 실패: ${e.message}`);
+        }
+      },
+
+      async toggleSchedule(id) {
+        try {
+          await fetch(`/api/schedules/${id}/toggle`, { method: 'POST' });
+          this.loadSchedules();
+        } catch (e) {
+          alert('토글 실패');
+        }
+      },
+
+      async editSchedule(id) {
+        try {
+          const data = await fetch('/api/schedules').then(r => r.json());
+          const item = (data.items || []).find(s => s.id === id);
+          if (!item) { alert('스케줄을 찾을 수 없습니다.'); return; }
+
+          // 편집 모달 표시
+          document.getElementById('edit-schedule-id').value = id;
+          document.getElementById('edit-schedule-keyword').value = item.keyword || '';
+          document.getElementById('edit-schedule-auto-approve').checked = !!item.auto_approve;
+
+          // schedule_type / value 설정
+          const typeEl = document.getElementById('edit-schedule-type');
+          typeEl.value = item.schedule_type || 'daily';
+          this._updateEditScheduleTypeUI(item.schedule_type || 'daily');
+          const sv = item.schedule_value || '';
+          if (item.schedule_type === 'daily') {
+            document.getElementById('edit-schedule-time').value = sv || '09:00';
+          } else if (item.schedule_type === 'weekly') {
+            const parts = sv.trim().split(/\s+/);
+            document.getElementById('edit-schedule-dow').value = parts[0] || 'monday';
+            document.getElementById('edit-schedule-time').value = parts[1] || '09:00';
+          } else if (item.schedule_type === 'interval') {
+            document.getElementById('edit-schedule-interval').value = sv;
+          } else if (item.schedule_type === 'cron') {
+            document.getElementById('edit-schedule-cron').value = sv;
+          }
+
+          // 소스 로드 후 체크
+          let selectedSources = [];
+          try { selectedSources = JSON.parse(item.sources); } catch { selectedSources = item.sources ? item.sources.split(',').map(s => s.trim()) : []; }
+          await this.loadEditScheduleSources(selectedSources);
+
+          // 모달 표시
+          const modal = document.getElementById('schedule-edit-modal');
+          modal.classList.remove('hidden');
+          modal.style.display = 'flex';
+        } catch (e) {
+          alert('스케줄 로드 실패: ' + e.message);
+        }
+      },
+
+      async loadEditScheduleSources(selectedSources = []) {
+        const container = document.getElementById('edit-schedule-sources-list');
+        if (!container) return;
+        try {
+          const data = await fetch('/api/skills').then(r => r.json());
+          const skills = data.skills || [];
+          if (skills.length === 0) {
+            container.innerHTML = '<span style="color:var(--text-tertiary);font-size:var(--text-sm);">등록된 소스 없음</span>';
+            return;
+          }
+          container.innerHTML = skills.map(s => `
+            <label style="display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:3px;cursor:pointer;font-size:var(--text-xs);user-select:none;transition:background .12s;">
+              <input type="checkbox" value="${s.id}" ${selectedSources.includes(s.id) ? 'checked' : ''} style="accent-color:var(--accent);" />
+              ${this.escapeHtml(s.name || s.id)}
+            </label>
+          `).join('');
+        } catch (e) {
+          container.innerHTML = '<span style="color:var(--error);font-size:var(--text-sm);">소스 목록 로드 실패</span>';
+        }
+      },
+
+      _updateEditScheduleTypeUI(type) {
+        const timeG = document.getElementById('edit-schedule-time-group');
+        const dowG  = document.getElementById('edit-schedule-dow-group');
+        const intG  = document.getElementById('edit-schedule-interval-group');
+        const cronG = document.getElementById('edit-schedule-cron-group');
+        if (!timeG) return;
+        timeG.style.display = (type === 'daily' || type === 'weekly') ? '' : 'none';
+        dowG.style.display  = (type === 'weekly') ? '' : 'none';
+        intG.style.display  = (type === 'interval') ? '' : 'none';
+        cronG.style.display = (type === 'cron') ? '' : 'none';
+      },
+
+      closeEditModal() {
+        const modal = document.getElementById('schedule-edit-modal');
+        modal.classList.add('hidden');
+        modal.style.display = 'none';
+      },
+
+      async saveEditSchedule() {
+        try {
+          const id = document.getElementById('edit-schedule-id').value;
+          const keyword = document.getElementById('edit-schedule-keyword').value.trim();
+          const sources = [...document.querySelectorAll('#edit-schedule-sources-list input[type=checkbox]:checked')].map(c => c.value);
+          if (!keyword) { alert('키워드를 입력하세요.'); return; }
+          if (sources.length === 0) { alert('소스를 1개 이상 선택하세요.'); return; }
+          const scheduleType = document.getElementById('edit-schedule-type').value;
+          let scheduleValue = null;
+          if (scheduleType === 'daily') {
+            scheduleValue = document.getElementById('edit-schedule-time').value || '09:00';
+          } else if (scheduleType === 'weekly') {
+            const dow  = document.getElementById('edit-schedule-dow').value;
+            const time = document.getElementById('edit-schedule-time').value || '09:00';
+            scheduleValue = `${dow} ${time}`;
+          } else if (scheduleType === 'interval') {
+            scheduleValue = document.getElementById('edit-schedule-interval').value.trim() || '6h';
+          } else if (scheduleType === 'cron') {
+            scheduleValue = document.getElementById('edit-schedule-cron').value.trim();
+          }
+          const body = {
+            keyword,
+            sources: JSON.stringify(sources),
+            schedule_type: scheduleType,
+            schedule_value: scheduleValue,
+            auto_approve: document.getElementById('edit-schedule-auto-approve').checked,
+          };
+          const r = await fetch(`/api/schedules/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+          if (!r.ok) throw new Error(await r.text());
+          this.closeEditModal();
+          this.loadSchedules();
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+
+      async deleteSchedule(id, keyword) {
+        if (!confirm(`"${keyword}" 스케줄을 삭제하시겠습니까?`)) return;
+        try {
+          const r = await fetch(`/api/schedules/${id}`, { method: 'DELETE' });
+          if (!r.ok) throw new Error(await r.text());
+          this.loadSchedules();
+        } catch (e) {
+          alert('삭제 실패: ' + e.message);
+        }
+      },
+
+      async loadBookmarks() {
+        try {
+          const data = await fetch('/api/bookmarks').then(r => r.json());
+          const html = (data.items || [])
+            .map(item => `
+              <div class="list-item">
+                <div class="list-item-title">북마크</div>
+              </div>
+            `).join('');
+          document.getElementById('bookmarks-list').innerHTML = html || '<div class="empty-state"><div style="font-size:13px;color:var(--text-secondary);margin-bottom:6px;">북마크된 보고서가 없습니다</div><div style="font-size:11px;color:var(--text-tertiary);">보고서 상세에서 <i class=\'fas fa-star\' style=\'color:var(--accent-dim);\'></i> 아이콘으로 추가하세요</div></div>';
+        } catch (e) {
+          console.error('Load bookmarks failed:', e);
+        }
+      },
+
+      switchSettingsTab(tabName) {
+        // 탭 버튼 active 상태 전환
+        document.querySelectorAll('#settings-tab-bar .tab-btn').forEach(btn => {
+          btn.classList.toggle('active', btn.dataset.tab === tabName);
+        });
+        // 탭 패널 active 상태 전환
+        ['source-auth', 'llm-config', 'general'].forEach(t => {
+          const el = document.getElementById(`settings-tab-${t}`);
+          if (el) el.classList.toggle('active', t === tabName);
+        });
+      },
+
+      async loadSettings() {
+        try {
+          const data = await fetch('/api/settings').then(r => r.json());
+          const config = data.config ?? {};
+
+          // 소스 인증 탭
+          document.getElementById('settings-nanet-userid').value = config['source.nanet.userId'] ?? '';
+          document.getElementById('settings-nanet-password').value = config['source.nanet.password'] ?? '';
+
+          // LLM 설정 탭
+          const provider = config['llm.provider'] ?? '';
+          const radio = document.querySelector(`input[name="llm-provider"][value="${provider}"]`);
+          // ollama 전용 설정 로드
+          const ollamaModel = document.getElementById('settings-ollama-model');
+          const ollamaHost  = document.getElementById('settings-ollama-host');
+          const ollamaPort  = document.getElementById('settings-ollama-port');
+          const ollamaUrl   = document.getElementById('settings-ollama-url');
+          if (ollamaModel) ollamaModel.value = config['llm.ollama.model'] ?? 'gemma4:e2b';
+          if (ollamaHost)  ollamaHost.value  = config['llm.ollama.host']  ?? 'localhost';
+          if (ollamaPort)  ollamaPort.value  = config['llm.ollama.port']  ?? '11434';
+          if (ollamaUrl)   ollamaUrl.value   = config['llm.ollama.httpUrl'] ?? 'http://localhost:11434/v1/chat/completions';
+          const ollamaConfig = document.getElementById('ollama-config');
+          if (ollamaConfig) ollamaConfig.style.display = provider === 'ollama' ? 'block' : 'none';
+          if (radio) radio.checked = true;
+
+          // 일반 탭 — lint 스케줄
+          const scheduleType = config['lint.scheduleType'] ?? 'disabled';
+          document.getElementById('settings-lint-schedule-type').value = scheduleType;
+          document.getElementById('settings-lint-schedule-time').value = config['lint.scheduleTime'] ?? '03:00';
+          document.getElementById('settings-lint-schedule-day').value = config['lint.scheduleDay'] ?? 'sunday';
+          document.getElementById('settings-lint-schedule-cron').value = config['lint.scheduleCron'] ?? '';
+          document.getElementById('settings-lint-auto-fix').checked = config['lint.autoFix'] === 'true';
+          document.getElementById('settings-lint-semantic').checked = config['lint.semantic'] === 'true';
+          document.getElementById('settings-lint-notify').checked = config['lint.notifyOnWarning'] === 'true';
+          this._updateLintScheduleUI(scheduleType);
+          // cron 타입이면 저장된 표현식을 5-필드로 분해
+          if (scheduleType === 'cron') {
+            this._parseCronToFields(config['lint.scheduleCron'] ?? '');
+          }
+          // Leiden 커뮤니티 감지 주기
+          const leidenCronVal = config['leiden.cron'] ?? '* * * * *';
+          const leidenPresets = ['* * * * *', '*/5 * * * *', '*/10 * * * *', '*/30 * * * *', '0 * * * *'];
+          const leidenPresetEl = document.getElementById('settings-leiden-preset');
+          const leidenCronEl = document.getElementById('settings-leiden-cron');
+          if (leidenPresetEl) {
+            if (leidenPresets.includes(leidenCronVal)) {
+              leidenPresetEl.value = leidenCronVal;
+            } else {
+              leidenPresetEl.value = 'custom';
+              if (leidenCronEl) leidenCronEl.value = leidenCronVal;
+            }
+            this._updateLeidenCronUI(leidenPresetEl.value);
+          }
+          // 동시 다운로드 수
+          const dlConc = document.getElementById('settings-download-concurrency');
+          if (dlConc) dlConc.value = config['download.concurrency'] ?? '3';
+          // 대기→큐 배치 크기
+          const batchSizeEl = document.getElementById('settings-waiting-batch-size');
+          if (batchSizeEl) batchSizeEl.value = config['pipeline.waiting_batch_size'] ?? '20';
+          // 피더 실행 간격
+          const feederIntervalEl = document.getElementById('settings-feeder-interval');
+          if (feederIntervalEl) feederIntervalEl.value = config['pipeline.feeder_interval_sec'] ?? '10';
+          // 데이터 저장 경로
+          const dataDirInput = document.getElementById('settings-data-dir');
+          const dataDirCurrent = document.getElementById('settings-data-dir-current');
+          const storedDir = config['data.dir'] ?? '';
+          const runtimeDir = config['_runtime.dataDir'] ?? '';
+          if (dataDirInput) dataDirInput.value = storedDir;
+          if (dataDirCurrent && runtimeDir) {
+            dataDirCurrent.textContent = `현재 실행 중: ${runtimeDir}${storedDir && storedDir !== runtimeDir ? ' → 재시작 후 적용 예정: ' + storedDir : ''}`;
+          }
+        } catch (e) {
+          console.error('Load settings failed:', e);
+        }
+      },
+
+      _updateLintScheduleUI(type) {
+        const timeGroup = document.getElementById('lint-time-group');
+        const dayGroup  = document.getElementById('lint-day-group');
+        const cronGroup = document.getElementById('lint-cron-group');
+        if (!timeGroup) return;
+        timeGroup.style.display = (type === 'daily' || type === 'weekly') ? '' : 'none';
+        dayGroup.style.display  = type === 'weekly' ? '' : 'none';
+        cronGroup.style.display = type === 'cron'   ? '' : 'none';
+        if (type === 'cron') this._onCronFieldChange();
+      },
+
+      // Cron 5-필드 → hidden input 동기화 + 자연어 미리보기
+      _onCronFieldChange() {
+        const min   = document.getElementById('cron-f-min')?.value.trim()   || '*';
+        const hour  = document.getElementById('cron-f-hour')?.value.trim()  || '*';
+        const day   = document.getElementById('cron-f-day')?.value.trim()   || '*';
+        const month = document.getElementById('cron-f-month')?.value.trim() || '*';
+        const dow   = document.getElementById('cron-f-dow')?.value.trim()   || '*';
+        const expr  = `${min} ${hour} ${day} ${month} ${dow}`;
+        const hiddenEl = document.getElementById('settings-lint-schedule-cron');
+        if (hiddenEl) hiddenEl.value = expr;
+        const previewEl = document.getElementById('cron-nl-preview');
+        if (previewEl) previewEl.textContent = this._cronToNaturalLanguage(expr);
+      },
+
+      // 프리셋 버튼 → 5-필드 채우기
+      _setCronPreset(expr) {
+        const parts = expr.split(' ');
+        const ids = ['cron-f-min','cron-f-hour','cron-f-day','cron-f-month','cron-f-dow'];
+        ids.forEach((id, i) => {
+          const el = document.getElementById(id);
+          if (el) el.value = parts[i] ?? '*';
+        });
+        this._onCronFieldChange();
+      },
+
+      // loadSettings 시 저장된 cron 표현식 → 5-필드 분해
+      _parseCronToFields(expr) {
+        if (!expr) return;
+        const parts = expr.trim().split(/\s+/);
+        if (parts.length !== 5) return;
+        const ids = ['cron-f-min','cron-f-hour','cron-f-day','cron-f-month','cron-f-dow'];
+        ids.forEach((id, i) => {
+          const el = document.getElementById(id);
+          if (el) el.value = parts[i];
+        });
+        this._onCronFieldChange();
+      },
+
+      // cron 표현식 → 한국어 자연어 설명
+      _cronToNaturalLanguage(expr) {
+        if (!expr) return '';
+        const [min, hour, day, month, dow] = expr.trim().split(/\s+/);
+        if (!min) return '';
+        const DOW_KO = ['일','월','화','수','목','금','토'];
+
+        if (expr === '* * * * *')    return '매 1분마다 실행';
+        if (/^\*\/(\d+) \* \* \* \*$/.test(expr)) {
+          const n = expr.match(/^\*\/(\d+)/)[1];
+          return `매 ${n}분마다 실행`;
+        }
+        if (/^0 \*\/(\d+) \* \* \*$/.test(expr)) {
+          const n = expr.match(/^0 \*\/(\d+)/)[1];
+          return `매 ${n}시간마다 실행`;
+        }
+        if (expr === '0 * * * *')    return '매시간 정각에 실행';
+
+        const hh = parseInt(hour, 10), mm = parseInt(min, 10);
+        const timeStr = (!isNaN(hh) && !isNaN(mm))
+          ? `${hh < 12 ? '오전' : '오후'} ${hh < 12 ? hh : hh - 12 || 12}시 ${mm > 0 ? mm + '분' : '정각'}`
+          : null;
+
+        if (dow !== '*' && !isNaN(parseInt(dow, 10)) && day === '*' && month === '*' && timeStr) {
+          return `매주 ${DOW_KO[parseInt(dow, 10)] ?? dow}요일 ${timeStr}에 실행`;
+        }
+        if (dow === '*' && day === '*' && month === '*' && timeStr) {
+          return `매일 ${timeStr}에 실행`;
+        }
+        return `실행 주기: ${expr}`;
+      },
+
+      _updateLeidenCronUI(value) {
+        const cronGroup = document.getElementById('leiden-cron-group');
+        if (cronGroup) cronGroup.style.display = value === 'custom' ? '' : 'none';
+      },
+
+      async saveLeidenConfig() {
+        try {
+          const presetEl = document.getElementById('settings-leiden-preset');
+          const cronEl   = document.getElementById('settings-leiden-cron');
+          if (!presetEl) return;
+          const presetVal = presetEl.value;
+          const cronVal   = presetVal === 'custom' ? (cronEl?.value.trim() ?? '') : presetVal;
+          if (!cronVal) return alert('Cron 표현식을 입력하세요.');
+          const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings: { 'leiden.cron': cronVal } }),
+          });
+          if (!res.ok) throw new Error('서버 오류');
+          alert('Leiden 스케줄이 저장되었습니다.');
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+
+      async saveSourceAuth() {
+        try {
+          const settings = {
+            'source.nanet.userId': document.getElementById('settings-nanet-userid').value.trim(),
+            'source.nanet.password': document.getElementById('settings-nanet-password').value,
+          };
+          const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings }),
+          });
+          if (!res.ok) throw new Error('서버 오류');
+          alert('인증정보가 저장되었습니다.');
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+
+      async saveLintConfig() {
+        try {
+          const settings = {
+            'lint.scheduleType':    document.getElementById('settings-lint-schedule-type').value,
+            'lint.scheduleTime':    document.getElementById('settings-lint-schedule-time').value,
+            'lint.scheduleDay':     document.getElementById('settings-lint-schedule-day').value,
+            'lint.scheduleCron':    document.getElementById('settings-lint-schedule-cron').value.trim(),
+            'lint.autoFix':         String(document.getElementById('settings-lint-auto-fix').checked),
+            'lint.semantic':        String(document.getElementById('settings-lint-semantic').checked),
+            'lint.notifyOnWarning': String(document.getElementById('settings-lint-notify').checked),
+          };
+          const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings }),
+          });
+          if (!res.ok) throw new Error('서버 오류');
+          alert('Lint 스케줄 설정이 저장되었습니다.');
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+
+      async saveDataDir() {
+        try {
+          const val = document.getElementById('settings-data-dir').value.trim();
+          if (!val) { alert('경로를 입력해주세요.'); return; }
+          const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings: { 'data.dir': val } }),
+          });
+          if (!res.ok) throw new Error('서버 오류');
+          alert(`데이터 저장 경로가 저장되었습니다.\n경로: ${val}\n\n데몬을 재시작해야 적용됩니다.`);
+          // 현재 실행 경로 표시 업데이트
+          const currentEl = document.getElementById('settings-data-dir-current');
+          const runtimeDir = currentEl?.textContent?.match(/현재 실행 중: ([^\s→]+)/)?.[1] ?? '';
+          if (currentEl && runtimeDir) {
+            currentEl.textContent = `현재 실행 중: ${runtimeDir} → 재시작 후 적용 예정: ${val}`;
+          }
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+
+      async saveDownloadConfig() {
+        try {
+          const val = parseInt(document.getElementById('settings-download-concurrency').value, 10);
+          if (isNaN(val) || val < 1 || val > 10) {
+            alert('동시 다운로드 수는 1~10 사이의 숫자여야 합니다.');
+            return;
+          }
+          const batchVal = parseInt(document.getElementById('settings-waiting-batch-size')?.value ?? '20', 10);
+          if (isNaN(batchVal) || batchVal < 1 || batchVal > 200) {
+            alert('대기→큐 배치 크기는 1~200 사이의 숫자여야 합니다.');
+            return;
+          }
+          const feederVal = parseInt(document.getElementById('settings-feeder-interval')?.value ?? '10', 10);
+          if (isNaN(feederVal) || feederVal < 1 || feederVal > 3600) {
+            alert('피더 실행 간격은 1~3600초 사이의 숫자여야 합니다.');
+            return;
+          }
+          const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings: {
+              'download.concurrency': String(val),
+              'pipeline.waiting_batch_size': String(batchVal),
+              'pipeline.feeder_interval_sec': String(feederVal),
+            }}),
+          });
+          if (!res.ok) throw new Error('서버 오류');
+          alert(`저장 완료 — 동시 다운로드 ${val}개 / 배치 ${batchVal}건 / 간격 ${feederVal}초. 다음 tick부터 적용됩니다.`);
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+
+      // ─── 커맨드 팔레트 (#32) ───
+      _cmdItems: [],
+      _cmdSelected: 0,
+
+      showCommandPalette() {
+        document.getElementById('cmd-overlay').classList.remove('hidden');
+        const input = document.getElementById('cmd-input');
+        input.value = '';
+        this._renderCmdResults('');
+        requestAnimationFrame(() => input.focus());
+      },
+
+      hideCommandPalette() {
+        document.getElementById('cmd-overlay').classList.add('hidden');
+      },
+
+      onCmdInput(q) {
+        this._cmdSelected = 0;
+        this._renderCmdResults(q);
+        if (q.length >= 2) this._fetchCmdResults(q);
+      },
+
+      onCmdKey(e) {
+        const items = document.querySelectorAll('.cmd-item');
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          this._cmdSelected = Math.min(this._cmdSelected + 1, items.length - 1);
+          items.forEach((el, i) => el.classList.toggle('selected', i === this._cmdSelected));
+          items[this._cmdSelected]?.scrollIntoView({ block: 'nearest' });
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          this._cmdSelected = Math.max(this._cmdSelected - 1, 0);
+          items.forEach((el, i) => el.classList.toggle('selected', i === this._cmdSelected));
+          items[this._cmdSelected]?.scrollIntoView({ block: 'nearest' });
+        } else if (e.key === 'Enter') {
+          items[this._cmdSelected]?.click();
+        } else if (e.key === 'Escape') {
+          this.hideCommandPalette();
+        }
+      },
+
+      _staticCmds: [
+        { label: '대시보드', icon: 'fa-home', action: () => window.app.navigateTo('/') },
+        { label: '보고서 목록', icon: 'fa-list', action: () => window.app.navigateTo('/catalog') },
+        { label: '검색', icon: 'fa-search', action: () => window.app.navigateTo('/search') },
+        { label: '그래프 시각화', icon: 'fa-spider', action: () => window.app.navigateTo('/graph') },
+        { label: '위키', icon: 'fa-book', action: () => window.app.navigateTo('/wiki') },
+        { label: '대기 항목', icon: 'fa-bell', action: () => window.app.navigateTo('/pending') },
+        { label: '실패 현황', icon: 'fa-exclamation-triangle', action: () => window.app.navigateTo('/failures') },
+        { label: '스케줄 관리', icon: 'fa-clock', action: () => window.app.navigateTo('/schedules') },
+        { label: '설정', icon: 'fa-cog', action: () => window.app.navigateTo('/settings') },
+        { label: '위키 재빌드', icon: 'fa-sync', action: async () => { const r = await fetch('/api/wiki/rebuild',{method:'POST'}); const d = await r.json(); alert(d.ok ? `완료 (${d.updated}개 갱신)` : '실패'); } },
+        { label: '전체 재시도', icon: 'fa-redo', action: () => window.app.retryAllFailures() },
+        { label: '백업', icon: 'fa-save', action: async () => { const r = await fetch('/api/backup',{method:'POST'}); const d = await r.json(); alert(d.ok ? '백업 완료' : '실패'); } },
+      ],
+
+      _renderCmdResults(q) {
+        const el = document.getElementById('cmd-results');
+        if (!q) {
+          el.innerHTML = `<div class="cmd-group-label">명령어</div>` +
+            this._staticCmds.map((cmd, i) =>
+              `<div class="cmd-item${i===0?' selected':''}" onclick="window.app._execCmd(${i})">
+                <span class="cmd-item-icon"><i class="fas ${this.escapeHtml(cmd.icon)}"></i></span>
+                ${this.escapeHtml(cmd.label)}
+              </div>`).join('');
+          this._cmdItems = this._staticCmds.map(c => c.action);
+          return;
+        }
+        const matched = this._staticCmds.filter(c => c.label.includes(q));
+        let html = '';
+        if (matched.length) {
+          html += `<div class="cmd-group-label">명령어</div>` +
+            matched.map((cmd, i) =>
+              `<div class="cmd-item${i===0?' selected':''}" onclick="window.app._execCmd(${i})">
+                <span class="cmd-item-icon"><i class="fas ${this.escapeHtml(cmd.icon)}"></i></span>
+                ${this.escapeHtml(cmd.label)}
+              </div>`).join('');
+        }
+        this._cmdItems = matched.map(c => c.action);
+        if (!html) html = '<div class="cmd-empty">검색 중…</div>';
+        el.innerHTML = html;
+      },
+
+      async _fetchCmdResults(q) {
+        try {
+          const data = await fetch(`/api/search/suggest?q=${encodeURIComponent(q)}&limit=6`).then(r => r.json());
+          const items = data.suggestions || [];
+          if (!items.length) return;
+          const el = document.getElementById('cmd-results');
+          const existing = el.innerHTML;
+          const staticCount = this._cmdItems.length;
+          const reportHtml = `<div class="cmd-group-label">보고서 · 위키</div>` +
+            items.map((item, i) => {
+              const idx = staticCount + i;
+              return `<div class="cmd-item" onclick="window.app._execCmd(${idx})">
+                <span class="cmd-item-icon"><i class="fas ${item.type === 'report' ? 'fa-file-alt' : 'fa-book'}"></i></span>
+                ${this.escapeHtml(item.label)}
+                <span class="cmd-item-desc">${item.type}</span>
+              </div>`;
+            }).join('');
+          el.innerHTML = (existing.includes('cmd-empty') ? '' : existing) + reportHtml;
+          this._cmdItems = [
+            ...this._cmdItems,
+            ...items.map(item => () => {
+              window.app.hideCommandPalette();
+              if (item.type === 'report') window.app.showReportDetail(item.id);
+              else if (item.type === 'wiki') { window.app.navigateTo('/wiki'); window.app.wikiNavigate(item.id); }
+            }),
+          ];
+        } catch {}
+      },
+
+      _execCmd(idx) {
+        const fn = this._cmdItems[idx];
+        if (fn) { this.hideCommandPalette(); fn(); }
+      },
+
+      // ─── 보고서 상세 드로어 (#29) ───
+      async showReportDetail(hash) {
+        document.getElementById('drawer-overlay').classList.add('open');
+        document.getElementById('report-drawer').classList.add('open');
+        document.getElementById('drawer-title').textContent = '불러오는 중…';
+        document.getElementById('drawer-body').innerHTML = '<div class="empty-state"><div class="loading"></div></div>';
+        document.getElementById('drawer-actions').innerHTML = '';
+        try {
+          const data = await fetch(`/api/reports/${encodeURIComponent(hash)}/summary`).then(r => r.json());
+          const report = await fetch(`/api/reports/${encodeURIComponent(hash)}`).then(r => r.json()).catch(() => ({}));
+          document.getElementById('drawer-title').textContent = data.title || report.title || '보고서';
+          const topics = (data.topics || []).map(t => {
+            const name = typeof t === 'string' ? t : (t.name ?? '');
+            return name ? `<span class="topic-chip">${this.escapeHtml(name)}</span>` : '';
+          }).join('');
+          const createdAt = data.createdAt ? new Date(data.createdAt).toLocaleDateString('ko-KR', { year:'numeric', month:'long', day:'numeric' }) : '-';
+          document.getElementById('drawer-body').innerHTML = `
+            <div class="detail-meta-row">
+              ${data.source ? `<span class="badge">${this.escapeHtml(data.source)}</span>` : ''}
+              ${data.status ? `<span class="badge ${data.status === 'INDEXED' ? 'success' : ''}">${data.status}</span>` : ''}
+              ${report.year ? `<span class="badge">${this.escapeHtml(report.year)}</span>` : ''}
+            </div>
+            ${data.summary ? `<div class="detail-section"><div class="detail-section-label">요약</div><p style="font-size:var(--text-sm);line-height:1.7;color:var(--text-secondary);">${this.escapeHtml(data.summary)}</p></div>` : ''}
+            ${topics ? `<div class="detail-section"><div class="detail-section-label">토픽</div><div>${topics}</div></div>` : ''}
+            ${data.url ? `<div class="detail-section"><div class="detail-section-label">원본 URL</div><a href="${this.escapeHtml(data.url)}" target="_blank" rel="noopener" style="font-size:var(--text-sm);color:var(--accent);word-break:break-all;">${this.escapeHtml(data.url)}</a></div>` : ''}
+            <div class="detail-section" style="margin-top:var(--space-4);">
+              <div class="detail-section-label">수집 일시</div>
+              <span style="font-size:var(--text-sm);color:var(--text-secondary);">${createdAt}</span>
+            </div>`;
+          document.getElementById('drawer-actions').innerHTML = `
+            ${data.url ? `<a href="${this.escapeHtml(data.url)}" target="_blank" rel="noopener" class="button"><i class="fas fa-external-link-alt"></i> 원본 열기</a>` : ''}
+            <button class="button" onclick="window.app.downloadReportFile('${encodeURIComponent(hash)}')"><i class="fas fa-download"></i> 파일 다운로드</button>`;
+        } catch (e) {
+          document.getElementById('drawer-body').innerHTML = `<div class="empty-state">상세 정보를 불러올 수 없습니다</div>`;
+        }
+      },
+
+      async downloadReportFile(encodedHash) {
+        const url = `/api/reports/${encodedHash}/file`;
+        try {
+          // 파일 존재 여부 먼저 확인 (GET, 실제 다운로드 전)
+          const res = await fetch(url);
+          if (!res.ok) {
+            alert('원본 파일을 찾을 수 없습니다.\n(수집 시 원본이 보관되지 않았거나 삭제되었습니다)');
+            return;
+          }
+          const blob = await res.blob();
+          const disposition = res.headers.get('Content-Disposition') || '';
+          const match = disposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/i);
+          const fileName = match ? decodeURIComponent(match[1].trim()) : 'download';
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(blob);
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          setTimeout(() => URL.revokeObjectURL(a.href), 10000);
+        } catch (e) {
+          alert('다운로드 오류: ' + e.message);
+        }
+      },
+
+      closeDrawer() {
+        document.getElementById('drawer-overlay').classList.remove('open');
+        document.getElementById('report-drawer').classList.remove('open');
+      },
+
+      onLlmProviderChange() {
+        const selected = document.querySelector('input[name="llm-provider"]:checked');
+        const ollamaConfig = document.getElementById('ollama-config');
+        if (ollamaConfig) ollamaConfig.style.display = selected?.value === 'ollama' ? 'block' : 'none';
+      },
+
+      updateOllamaUrl() {
+        const host = document.getElementById('settings-ollama-host')?.value.trim() || 'localhost';
+        const port = document.getElementById('settings-ollama-port')?.value.trim() || '11434';
+        const urlEl = document.getElementById('settings-ollama-url');
+        if (urlEl) urlEl.value = `http://${host}:${port}/v1/chat/completions`;
+      },
+
+      async saveLlmConfig() {
+        try {
+          const selected = document.querySelector('input[name="llm-provider"]:checked');
+          if (!selected) { alert('LLM을 선택해주세요.'); return; }
+          const settings = { 'llm.provider': selected.value };
+          if (selected.value === 'ollama') {
+            const model = document.getElementById('settings-ollama-model')?.value.trim();
+            const host  = document.getElementById('settings-ollama-host')?.value.trim() || 'localhost';
+            const port  = document.getElementById('settings-ollama-port')?.value.trim() || '11434';
+            const url   = `http://${host}:${port}/v1/chat/completions`;
+            if (model) settings['llm.ollama.model']   = model;
+            settings['llm.ollama.host']    = host;
+            settings['llm.ollama.port']    = port;
+            settings['llm.ollama.httpUrl'] = url;
+          }
+          const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ settings }),
+          });
+          if (!res.ok) throw new Error('서버 오류');
+          alert(`LLM이 "${selected.value}"로 저장되었습니다.`);
+        } catch (e) {
+          alert('저장 실패: ' + e.message);
+        }
+      },
+    };
+
+    // hash 기반 네비게이션 → SPA router(popstate)로 전환됨
+
+    // ─── Init ───
+    app.init();