ltcai 0.3.0 → 0.3.1

package/static/lattice-reference.css

@@ -3051,24 +3051,49 @@ body.lattice-ref-graph {
     }
 
     .local-option-row {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 7px;
     }
 
-    .local-option-row label {
+    .local-option-btn {
+      min-width: 0;
+      height: 36px;
+      border: 1px solid rgba(111,66,232,0.18);
+      border-radius: 8px;
+      background: #fff;
+      color: var(--muted);
+      cursor: pointer;
       display: inline-flex;
       align-items: center;
+      justify-content: center;
       gap: 6px;
-      color: var(--muted);
+      padding: 0 9px;
       font-size: 12px;
-      line-height: 1.3;
-      white-space: normal;
+      font-weight: 650;
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
     }
 
-    .local-option-row input {
-      margin: 0;
-      accent-color: var(--accent);
+    .local-option-btn span {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .local-option-btn:hover {
+      border-color: rgba(111,66,232,0.42);
+      color: var(--accent);
+      background: rgba(111,66,232,0.07);
+    }
+
+    .local-option-btn.active {
+      border-color: rgba(111,66,232,0.48);
+      background: rgba(111,66,232,0.11);
+      color: var(--accent);
+      box-shadow: inset 0 0 0 1px rgba(111,66,232,0.12);
     }
 
     .local-audit-grid {
@@ -3815,7 +3840,7 @@ body.lattice-ref-graph {
             display: none;
             position: fixed;
             inset: 0;
-            background: rgba(14,16,42,0.45);
+            background: rgba(111,66,232,0.18);
             backdrop-filter: blur(4px);
             z-index: 1000;
             align-items: center;
@@ -3828,7 +3853,7 @@ body.lattice-ref-graph {
             display: none;
             position: fixed;
             inset: 0;
-            background: rgba(14,16,42,0.45);
+            background: rgba(111,66,232,0.18);
             backdrop-filter: blur(4px);
             z-index: 1000;
             align-items: center;
@@ -3836,8 +3861,8 @@ body.lattice-ref-graph {
         }
         .mcp-modal-overlay.open { display: flex; }
         .mcp-modal {
-            background: var(--surface, #1e293b);
-            border: 1px solid rgba(255,255,255,0.08);
+            background: rgba(255,255,255,0.96);
+            border: 1px solid rgba(111,66,232,0.16);
             border-radius: 16px;
             width: 100%;
             max-width: 560px;
@@ -3849,12 +3874,12 @@ body.lattice-ref-graph {
         }
         .mcp-modal-header {
             padding: 18px 20px;
-            border-bottom: 1px solid rgba(255,255,255,0.07);
+            border-bottom: 1px solid rgba(111,66,232,0.12);
             display: flex; align-items: center; justify-content: space-between;
         }
         .mcp-modal-header h3 { font-size: 15px; font-weight: 700; color: var(--text); }
         .mcp-modal-close { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 18px; padding: 2px 6px; border-radius: 6px; }
-        .mcp-modal-close:hover { color: var(--text); background: rgba(255,255,255,0.07); }
+        .mcp-modal-close:hover { color: var(--text); background: rgba(111,66,232,0.07); }
         .mcp-modal-body.lattice-ref-chat { flex: 1; overflow-y: auto; padding: 16px 20px; }
         .mcp-section-label { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin: 12px 0 8px; }
         .mcp-item {
@@ -3917,8 +3942,8 @@ body.lattice-ref-graph {
         }
         .mcp-delete-btn:hover { background: rgba(255,80,80,0.18); }
         .acct-modal {
-            background: var(--surface, #1e293b);
-            border: 1px solid rgba(255,255,255,0.08);
+            background: rgba(255,255,255,0.96);
+            border: 1px solid rgba(111,66,232,0.16);
             border-radius: 16px;
             width: 100%;
             max-width: 380px;
@@ -3929,24 +3954,24 @@ body.lattice-ref-graph {
         }
         .acct-tabs {
             display: flex;
-            border-bottom: 1px solid rgba(255,255,255,0.07);
+            border-bottom: 1px solid rgba(111,66,232,0.12);
         }
         .acct-tab {
             flex: 1; padding: 14px; font-size: 13px; font-weight: 500;
             background: none; border: none; color: var(--muted); cursor: pointer;
             transition: all .15s; border-bottom: 2px solid transparent;
         }
-        .acct-tab.active { color: var(--text, #f8fafc); border-bottom-color: var(--accent, #6366f1); }
+        .acct-tab.active { color: var(--text, #14162c); border-bottom-color: var(--accent, #6366f1); }
         .acct-body.lattice-ref-chat { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
         .acct-tab-panel { display: none; flex-direction: column; gap: 14px; }
         .acct-tab-panel.active { display: flex; }
         .pw-field { display: flex; flex-direction: column; gap: 5px; }
         .pw-field label { font-size: 11px; color: var(--muted); }
         .pw-field input {
-            background: rgba(14,16,42,0.25);
-            border: 1px solid rgba(255,255,255,0.08);
+            background: rgba(255,255,255,0.88);
+            border: 1px solid rgba(111,66,232,0.18);
             border-radius: 8px;
-            color: var(--text, #f8fafc);
+            color: var(--text, #14162c);
             padding: 8px 12px;
             font-size: 13px;
             outline: none;
@@ -3958,8 +3983,8 @@ body.lattice-ref-graph {
             flex: 1; padding: 8px; border-radius: 8px; border: none;
             cursor: pointer; font-size: 13px; font-weight: 500; transition: all .15s;
         }
-        .pw-cancel { background: rgba(255,255,255,0.06); color: var(--muted); }
-        .pw-cancel:hover { background: rgba(255,255,255,0.1); }
+        .pw-cancel { background: rgba(111,66,232,0.08); color: var(--muted); }
+        .pw-cancel:hover { background: rgba(111,66,232,0.13); }
         .pw-submit { background: var(--accent, #6366f1); color: #fff; }
         .pw-submit:hover { opacity: 0.85; }
         .pw-msg { font-size: 12px; min-height: 16px; }
@@ -3972,8 +3997,8 @@ body.lattice-ref-graph {
             position: absolute;
             top: calc(100% + 6px);
             right: 0;
-            background: #1e293b;
-            border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.96);
+            border: 1px solid rgba(111,66,232,0.16);
             border-radius: 10px;
             overflow: hidden;
             box-shadow: 0 8px 24px rgba(88,72,150,0.16);
@@ -3986,7 +4011,7 @@ body.lattice-ref-graph {
             padding: 9px 14px; font-size: 13px; cursor: pointer;
             color: var(--muted); transition: background .12s;
         }
-        .lang-option:hover { background: rgba(255,255,255,0.06); color: var(--text, #f8fafc); }
+        .lang-option:hover { background: rgba(111,66,232,0.07); color: var(--text, #14162c); }
         .lang-option.active { color: var(--accent, #6366f1); font-weight: 600; }
 
         .auth-lang-picker {
@@ -4188,13 +4213,13 @@ body.lattice-ref-graph {
             overflow: hidden;
             border-radius: var(--radius-sm);
             margin: 12px 0;
-            background: #060810;
+            background: rgba(255,255,255,0.86);
             border: 1px solid rgba(129,140,248,0.15);
-            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+            box-shadow: 0 4px 16px rgba(88,72,150,0.10);
         }
 
         .code-header {
-            background: rgba(10,12,20,0.9);
+            background: rgba(111,66,232,0.08);
             color: var(--muted);
             font-size: 11px;
             padding: 8px 12px;
@@ -4221,7 +4246,7 @@ body.lattice-ref-graph {
             white-space: pre;
             padding: 16px;
             font-size: 13px;
-            background: #060810;
+            background: rgba(255,255,255,0.86);
             scrollbar-width: thin;
             font-family: 'JetBrains Mono', 'Fira Code', monospace;
             line-height: 1.6;
@@ -4261,7 +4286,7 @@ body.lattice-ref-graph {
             display: none;
             position: fixed;
             inset: 0;
-            background: rgba(14,16,42,0.40);
+            background: rgba(111,66,232,0.18);
             z-index: 99;
             backdrop-filter: blur(2px);
         }
@@ -4709,8 +4734,8 @@ body.lattice-ref-graph {
 
         .auth-card {
             width: min(400px, 100%);
-            background: rgba(12,16,22,0.9);
-            border: 1px solid rgba(255,255,255,0.08);
+            background: rgba(255,255,255,0.94);
+            border: 1px solid rgba(111,66,232,0.16);
             border-radius: 20px;
             padding: 36px 32px;
             box-shadow: var(--shadow), 0 0 0 1px rgba(111,66,232,0.05);
@@ -5349,9 +5374,10 @@ body.lattice-ref-graph {
         .mcp-dropdown {
             display: none;
             margin-top: 8px;
-            border: 1px solid rgba(48, 167, 137, 0.22);
+            border: 1px solid rgba(111,66,232,0.16);
             border-radius: 10px;
-            background: rgba(23, 27, 32, 0.92);
+            background: rgba(255,255,255,0.92);
+            box-shadow: 0 16px 36px rgba(96,72,160,0.12);
             overflow: hidden;
         }
 
@@ -5365,7 +5391,12 @@ body.lattice-ref-graph {
             justify-content: space-between;
             gap: 12px;
             padding: 11px 14px;
-            border-bottom: 1px solid rgba(111,66,232,0.08);
+            border-bottom: 1px solid rgba(111,66,232,0.10);
+            color: var(--text);
+        }
+
+        .mcp-dropdown-item:hover {
+            background: rgba(111,66,232,0.05);
         }
 
         .mcp-dropdown-item:last-child {
@@ -5381,6 +5412,7 @@ body.lattice-ref-graph {
             display: block;
             font-size: 13px;
             margin-bottom: 2px;
+            color: var(--text);
         }
 
         .mcp-dropdown-item-info span {
@@ -5827,7 +5859,7 @@ body.lattice-ref-graph {
                 transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
                 border-right: 1px solid var(--border-strong);
                 box-shadow: 4px 0 32px rgba(88,72,150,0.18);
-                background: #141715;
+                background: #f6f0ff;
                 backdrop-filter: none;
                 -webkit-backdrop-filter: none;
             }
@@ -5888,7 +5920,7 @@ body.lattice-ref-graph {
             position: fixed;
             inset: 0;
             z-index: 9000;
-            background: rgba(10, 12, 15, 0.88);
+            background: rgba(111, 66, 232, 0.18);
             backdrop-filter: blur(14px);
             align-items: center;
             justify-content: center;
@@ -6243,8 +6275,8 @@ body.lattice-ref-graph {
 
         /* ── MCP 드롭다운 개선 ── */
         .mcp-dropdown {
-            background: rgba(10,14,20,0.97) !important;
-            border: 1px solid rgba(111,66,232,0.14) !important;
+            background: rgba(255,255,255,0.96) !important;
+            border: 1px solid rgba(111,66,232,0.16) !important;
             border-radius: var(--radius) !important;
             box-shadow: var(--shadow), 0 0 20px rgba(111,66,232,0.08) !important;
         }
@@ -6477,17 +6509,17 @@ body.lattice-ref-graph {
 
         .app-layout .code-container,
         .app-layout pre {
-            background: #171925;
+            background: rgba(255,255,255,0.88);
             border-color: rgba(218,225,255,0.10);
         }
 
         .app-layout .code-header {
-            background: #1d2030;
+            background: rgba(111,66,232,0.08);
             border-bottom-color: rgba(218,225,255,0.09);
         }
 
         .app-layout .input-area {
-            background: linear-gradient(0deg, rgba(39,41,55,0.98) 0%, rgba(39,41,55,0.78) 64%, transparent 100%);
+            background: linear-gradient(0deg, rgba(246,240,255,0.98) 0%, rgba(246,240,255,0.78) 64%, transparent 100%);
         }
 
         .app-layout .input-box {
@@ -6692,7 +6724,7 @@ body.lattice-ref-graph {
             align-items: center;
             justify-content: center;
             padding: 24px;
-            background: rgba(25, 21, 47, 0.24);
+            background: rgba(111, 66, 232, 0.18);
             backdrop-filter: blur(14px);
         }
         .workspace-modal-overlay.open,
@@ -6714,10 +6746,10 @@ body.lattice-ref-graph {
         .mode-modal {
             width: min(520px, 100%);
             background:
-                radial-gradient(circle at 18% 8%, rgba(111,75,246,0.28), transparent 32%),
-                linear-gradient(180deg, #211b3b, #151329);
-            color: #fff;
-            border-color: rgba(255,255,255,0.12);
+                radial-gradient(circle at 18% 8%, rgba(111,75,246,0.18), transparent 32%),
+                linear-gradient(180deg, #ffffff, #f6f0ff);
+            color: var(--text);
+            border-color: rgba(111,66,232,0.16);
         }
         .modal-kicker {
             color: var(--accent);

package/static/scripts/account.js

@@ -137,6 +137,12 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
             el.className = 'msg' + (ok ? ' ok' : '');
         }
 
+        function requestSetupAfterLogin() {
+            try {
+                sessionStorage.setItem('ltcai_force_setup_after_login', 'true');
+            } catch (_) {}
+        }
+
         async function doLogin() {
             const email = document.getElementById('login-email').value.trim();
             const password = document.getElementById('login-pw').value;
@@ -155,7 +161,8 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
                     localStorage.setItem('ltcai_user_email', data.email);
                     localStorage.setItem('ltcai_user_nickname', data.nickname || data.name || data.email);
                     localStorage.setItem('ltcai_is_admin', data.is_admin ? 'true' : 'false');
-                    window.location.href = '/chat';
+                    requestSetupAfterLogin();
+                    window.location.href = '/chat?setup=1';
                 } else {
                     const data = await res.json().catch(() => ({}));
                     setMsg('login-msg', data.detail || t('err_login_fail'));
@@ -197,7 +204,8 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
                             localStorage.setItem('ltcai_user_email', data.email);
                             localStorage.setItem('ltcai_user_nickname', data.nickname || data.name || data.email);
                             localStorage.setItem('ltcai_is_admin', data.is_admin ? 'true' : 'false');
-                            window.location.href = '/chat';
+                            requestSetupAfterLogin();
+                            window.location.href = '/chat?setup=1';
                         }
                     });
                 } else {

package/static/scripts/admin.js

@@ -1195,4 +1195,300 @@ document.querySelectorAll('[data-export-scope][data-export-format]').forEach(btn
     btn.addEventListener('click', () => exportAdminLogs(btn.dataset.exportScope, btn.dataset.exportFormat));
 });
 
+// ── Security & Audit Command Center (피드백 #5) ─────────────────────────────
+
+function ccEscape(value) {
+    if (value === null || value === undefined) return '';
+    const str = String(value);
+    return str
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+const CC_CARD_LABELS = {
+    events_today: '오늘 이벤트',
+    high_risk_events: 'High Risk',
+    risky_chats: '위험 채팅',
+    risky_files: '위험 파일',
+    secret_blocks: 'Secret 차단',
+    external_blocks: '외부 전송 차단',
+    admin_raw_views: '관리자 원문 조회',
+    review_required: '검토 필요',
+};
+
+let ccUserChart = null;
+let ccFieldChart = null;
+
+async function ccFetchJson(path) {
+    try {
+        const res = await apiFetch(path, { headers: adminHeaders() });
+        if (!res.ok) {
+            console.warn('Security CC fetch failed', path, res.status);
+            return null;
+        }
+        return await res.json();
+    } catch (e) {
+        console.warn('Security CC fetch error', path, e);
+        return null;
+    }
+}
+
+function renderCcCards(overview) {
+    const root = document.getElementById('security-cc-cards');
+    if (!root || !overview || !overview.cards) return;
+    const html = Object.entries(overview.cards).map(([key, value]) => `
+        <div class="audit-card">
+            <div class="audit-card-label">${ccEscape(CC_CARD_LABELS[key] || key)}</div>
+            <div class="audit-card-value">${ccEscape(value)}</div>
+        </div>
+    `).join('');
+    root.innerHTML = html;
+}
+
+function renderCcUsersTable(users) {
+    const wrap = document.getElementById('security-cc-users');
+    if (!wrap) return;
+    if (!users || users.length === 0) {
+        wrap.innerHTML = '<div class="preview" style="padding:14px">표시할 사용자가 없습니다.</div>';
+        return;
+    }
+    const rows = users.slice(0, 25).map(u => `
+        <tr data-cc-user="${ccEscape(u.email)}" style="cursor:pointer">
+            <td>${ccEscape(u.user)}</td>
+            <td>${ccEscape(u.total_chats)}</td>
+            <td style="color:#2c8a3f">${ccEscape(u.compliant_chats)}</td>
+            <td style="color:#b13030">${ccEscape(u.risky_chats)}</td>
+            <td>${ccEscape(u.uploaded_files)}</td>
+            <td style="color:#2c8a3f">${ccEscape(u.compliant_files)}</td>
+            <td style="color:#b13030">${ccEscape(u.risky_files)}</td>
+            <td>${ccEscape(u.high_risk_events)}</td>
+            <td>${ccEscape(u.risk_rate)}%</td>
+            <td>${ccEscape((u.last_activity_at || '').slice(0, 19).replace('T', ' '))}</td>
+        </tr>
+    `).join('');
+    wrap.innerHTML = `
+        <table class="data-table">
+            <thead><tr>
+                <th>사용자</th><th>총 채팅</th><th>준수 채팅</th><th>위험 채팅</th>
+                <th>총 파일</th><th>준수 파일</th><th>위험 파일</th>
+                <th>High</th><th>위험률</th><th>마지막 활동</th>
+            </tr></thead>
+            <tbody>${rows}</tbody>
+        </table>`;
+    wrap.querySelectorAll('tr[data-cc-user]').forEach(tr => {
+        tr.addEventListener('click', () => ccShowUserDrillDown(tr.dataset.ccUser));
+    });
+}
+
+function renderCcUserChart(users) {
+    const canvas = document.getElementById('security-cc-user-chart');
+    if (!canvas || typeof Chart === 'undefined') return;
+    const top = users.slice(0, 8);
+    const labels = top.map(u => u.user);
+    if (ccUserChart) { ccUserChart.destroy(); ccUserChart = null; }
+    ccUserChart = new Chart(canvas, {
+        type: 'bar',
+        data: {
+            labels,
+            datasets: [
+                { label: '준수 채팅', backgroundColor: '#5cb874', data: top.map(u => u.compliant_chats) },
+                { label: '위험 채팅', backgroundColor: '#e8636e', data: top.map(u => u.risky_chats) },
+                { label: '준수 파일', backgroundColor: '#7fb5e6', data: top.map(u => u.compliant_files) },
+                { label: '위험 파일', backgroundColor: '#d94c4c', data: top.map(u => u.risky_files) },
+            ]
+        },
+        options: {
+            responsive: true,
+            scales: { x: { stacked: true }, y: { stacked: true } },
+            plugins: { legend: { position: 'bottom' } },
+        }
+    });
+}
+
+function renderCcFieldChart(overview) {
+    const canvas = document.getElementById('security-cc-field-chart');
+    const legend = document.getElementById('security-cc-field-legend');
+    if (!canvas || typeof Chart === 'undefined') return;
+    const counts = overview?.field_counts || {};
+    const labels = Object.keys(counts);
+    const data = labels.map(l => counts[l]);
+    if (ccFieldChart) { ccFieldChart.destroy(); ccFieldChart = null; }
+    if (labels.length === 0) {
+        if (legend) legend.textContent = '감지된 민감정보 유형이 없습니다.';
+        return;
+    }
+    ccFieldChart = new Chart(canvas, {
+        type: 'doughnut',
+        data: { labels, datasets: [{ data, backgroundColor: ['#e8636e','#7fb5e6','#f0b14a','#5cb874','#9b6cd0','#3da9b6','#d18cd4','#a3a3a3'] }] },
+        options: { plugins: { legend: { position: 'bottom' } } }
+    });
+    if (legend) {
+        legend.innerHTML = labels.map((l, i) => `${ccEscape(l)}: ${ccEscape(data[i])}`).join(' · ');
+    }
+}
+
+async function ccShowUserDrillDown(email) {
+    const data = await ccFetchJson(`/admin/security/events?user=${encodeURIComponent(email)}`);
+    const wrap = document.getElementById('security-cc-timeline');
+    if (!wrap) return;
+    const events = (data && data.events) || [];
+    if (!events.length) {
+        wrap.innerHTML = `<div class="preview" style="padding:14px">${ccEscape(email)} 사용자에 대한 이벤트가 없습니다.</div>`;
+        return;
+    }
+    const rows = events.slice(0, 40).map(e => `
+        <tr>
+            <td>${ccEscape((e.timestamp || '').slice(0, 19).replace('T', ' '))}</td>
+            <td>${ccEscape(e.event_type || '')}</td>
+            <td>${ccEscape(e.sensitivity || 'none')}</td>
+            <td>${ccEscape((e.sensitive_labels || []).join(', '))}</td>
+            <td>${ccEscape((e.content_preview || '').slice(0, 80))}</td>
+        </tr>
+    `).join('');
+    wrap.innerHTML = `
+        <div style="margin-bottom:8px;color:var(--muted-text);font-size:12px">${ccEscape(email)} 사용자의 보안 이벤트 ${events.length}건</div>
+        <table class="data-table">
+            <thead><tr><th>시각</th><th>유형</th><th>민감도</th><th>라벨</th><th>마스킹 preview</th></tr></thead>
+            <tbody>${rows}</tbody>
+        </table>`;
+}
+
+async function loadSecurityCommandCenter() {
+    const [overview, usersResp, eventsResp, filesResp] = await Promise.all([
+        ccFetchJson('/admin/security/overview'),
+        ccFetchJson('/admin/security/users'),
+        ccFetchJson('/admin/security/events?limit=50'),
+        ccFetchJson('/admin/security/files'),
+    ]);
+
+    if (overview) {
+        renderCcCards(overview);
+        renderCcFieldChart(overview);
+    }
+    if (usersResp && Array.isArray(usersResp.users)) {
+        renderCcUsersTable(usersResp.users);
+        renderCcUserChart(usersResp.users);
+    }
+    if (eventsResp && Array.isArray(eventsResp.events)) {
+        const chats = eventsResp.events.filter(e => (e.sensitivity || 'none') !== 'none' && e.event_type === 'chat_message').slice(0, 20);
+        const chatWrap = document.getElementById('security-cc-chats');
+        if (chatWrap) {
+            chatWrap.innerHTML = chats.length ? `
+                <table class="data-table">
+                    <thead><tr><th>시각</th><th>사용자</th><th>민감도</th><th>라벨</th><th>마스킹 preview</th></tr></thead>
+                    <tbody>${chats.map(e => `
+                        <tr>
+                            <td>${ccEscape((e.timestamp || '').slice(0, 19).replace('T', ' '))}</td>
+                            <td>${ccEscape(e.user_nickname || e.user_email || 'Unknown')}</td>
+                            <td>${ccEscape(e.sensitivity)}</td>
+                            <td>${ccEscape((e.sensitive_labels || []).join(', '))}</td>
+                            <td>${ccEscape((e.content_preview || '').slice(0, 100))}</td>
+                        </tr>`).join('')}
+                    </tbody>
+                </table>` : '<div class="preview" style="padding:14px">감지된 민감 채팅이 없습니다.</div>';
+        }
+        const timelineWrap = document.getElementById('security-cc-timeline');
+        if (timelineWrap && !timelineWrap.querySelector('table')) {
+            const rows = eventsResp.events.slice(0, 30).map(e => `
+                <tr>
+                    <td>${ccEscape((e.timestamp || '').slice(0, 19).replace('T', ' '))}</td>
+                    <td>${ccEscape(e.event_type || '')}</td>
+                    <td>${ccEscape(e.user_nickname || e.user_email || 'Unknown')}</td>
+                    <td>${ccEscape(e.sensitivity || 'none')}</td>
+                </tr>
+            `).join('');
+            timelineWrap.innerHTML = rows ? `
+                <table class="data-table">
+                    <thead><tr><th>시각</th><th>유형</th><th>사용자</th><th>민감도</th></tr></thead>
+                    <tbody>${rows}</tbody>
+                </table>` : '<div class="preview" style="padding:14px">감사 이벤트가 없습니다.</div>';
+        }
+    }
+    if (filesResp && Array.isArray(filesResp.files)) {
+        const files = filesResp.files.filter(f => (f.sensitivity || 'none') !== 'none' || (f.sensitive_labels || []).length > 0).slice(0, 20);
+        const fileWrap = document.getElementById('security-cc-files');
+        if (fileWrap) {
+            fileWrap.innerHTML = files.length ? `
+                <table class="data-table">
+                    <thead><tr><th>파일</th><th>업로드 사용자</th><th>민감도</th><th>라벨</th><th>크기</th></tr></thead>
+                    <tbody>${files.map(f => `
+                        <tr>
+                            <td>${ccEscape(f.filename || f.file_id)}</td>
+                            <td>${ccEscape(f.user_nickname || f.user_email || 'Unknown')}</td>
+                            <td>${ccEscape(f.sensitivity || 'none')}</td>
+                            <td>${ccEscape((f.sensitive_labels || []).join(', '))}</td>
+                            <td>${ccEscape(f.bytes || '')}</td>
+                        </tr>`).join('')}
+                    </tbody>
+                </table>` : '<div class="preview" style="padding:14px">위험 등급 파일이 없습니다.</div>';
+        }
+    }
+}
+
+async function ccLoadRaw(scope) {
+    const pre = document.getElementById('security-cc-raw');
+    if (!pre) return;
+    pre.textContent = '불러오는 중...';
+    try {
+        const res = await apiFetch(`/admin/security/raw?scope=${encodeURIComponent(scope)}`, { headers: adminHeaders() });
+        if (!res.ok) { pre.textContent = `요청 실패 (HTTP ${res.status})`; return; }
+        const text = await res.text();
+        try {
+            pre.textContent = JSON.stringify(JSON.parse(text), null, 2);
+        } catch (_) {
+            pre.textContent = text;
+        }
+    } catch (e) {
+        pre.textContent = String(e);
+    }
+}
+
+async function ccExport(scope, format) {
+    try {
+        const res = await apiFetch('/admin/security/export', {
+            method: 'POST',
+            headers: { ...adminHeaders(), 'Content-Type': 'application/json' },
+            body: JSON.stringify({ scope, format }),
+        });
+        if (!res.ok) {
+            alert('보안 리포트 추출 실패 (HTTP ' + res.status + ')');
+            return;
+        }
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `security_${scope}.${format === 'xlsx' ? 'xlsx' : format}`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 5000);
+    } catch (e) {
+        alert(String(e));
+    }
+}
+
+document.getElementById('security-cc-export-toggle')?.addEventListener('click', () => {
+    const opts = document.getElementById('security-cc-export-options');
+    if (opts) opts.classList.toggle('open');
+});
+document.querySelectorAll('[data-cc-scope][data-cc-format]').forEach(btn => {
+    btn.addEventListener('click', () => ccExport(btn.dataset.ccScope, btn.dataset.ccFormat));
+});
+document.querySelectorAll('[data-cc-raw]').forEach(btn => {
+    btn.addEventListener('click', () => ccLoadRaw(btn.dataset.ccRaw));
+});
+
+// 보안 탭 진입 시 자동 로드
+document.querySelectorAll('[data-admin-nav="security"]').forEach(el => {
+    el.addEventListener('click', () => { setTimeout(loadSecurityCommandCenter, 50); });
+});
+// 메뉴 셀렉터를 모를 수도 있으니 hash 변경 시에도 시도
+window.addEventListener('hashchange', () => {
+    if (location.hash.indexOf('security') >= 0) loadSecurityCommandCenter();
+});
+
 loadDashboard();
+// 보안 콘솔도 첫 진입 시 로드 시도 (실패해도 무해)
+setTimeout(loadSecurityCommandCenter, 600);