ltcai 2.2.0 → 2.2.2

package/static/platform.css

@@ -1,19 +1,23 @@
 /* Lattice AI v2.0 — shared styling for the Agentic Workspace Platform pages
    (Plugin SDK, Workflow Designer, Multi-Agent Runtime, Realtime Activity). */
 :root {
-  --bg: #0f1115;
-  --panel: #16191f;
-  --panel-2: #1c2027;
-  --border: rgba(255, 255, 255, 0.08);
-  --text: #e7ecf3;
-  --muted: #94a3b8;
-  --accent: #378ADD;
-  --accent-2: #5ea7ec;
+  /* Consume tokens.css semantic tokens so these pages follow light & dark themes.
+     tokens.css is linked before platform.css, so var() resolves at runtime. */
+  --bg: var(--lt-bg, #0f1115);
+  --panel: var(--lt-surface, #16191f);
+  --panel-2: var(--lt-surface-2, #1c2027);
+  --border: var(--lt-line, rgba(255, 255, 255, 0.08));
+  --text: var(--lt-ink, #e7ecf3);
+  --muted: var(--lt-ink-soft, #64748b);
+  --accent: var(--lt-accent, #6E4AE6);
+  --accent-2: var(--lt-accent, #5ea7ec);
   --ok: #34d399;
   --warn: #fbbf24;
   --err: #f87171;
 }
 * { box-sizing: border-box; }
+html, body { overflow-x: hidden; }
+body { min-width: 320px; }
 body {
   margin: 0;
   background: var(--bg);
@@ -27,15 +31,15 @@ header.app {
   padding: 14px 24px; border-bottom: 1px solid var(--border);
   background: rgba(22, 25, 31, 0.8); position: sticky; top: 0; backdrop-filter: blur(8px); z-index: 5;
 }
-header.app .brand { font-weight: 700; font-size: 16px; color: #fff; letter-spacing: .3px; }
+header.app .brand { font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: .3px; }
 header.app .brand small { color: var(--accent); font-weight: 600; margin-left: 6px; }
 header.app nav { display: flex; gap: 14px; flex-wrap: wrap; }
-header.app nav a { color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 6px; }
-header.app nav a:hover, header.app nav a.active { color: #fff; background: var(--panel-2); }
+header.app nav a { color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 6px; min-height: 44px; display: inline-flex; align-items: center; }
+header.app nav a:hover, header.app nav a.active { color: var(--text); background: var(--panel-2); }
 main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 80px; }
 h1 { font-size: 22px; margin: 0 0 4px; }
 .sub { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
-.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
+.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
 .card {
   background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
   padding: 16px 18px;
@@ -54,22 +58,47 @@ h1 { font-size: 22px; margin: 0 0 4px; }
 button, .btn {
   background: var(--accent); color: #fff; border: none; border-radius: 8px;
   padding: 7px 14px; font-size: 13px; cursor: pointer; font-weight: 600;
+  min-height: 44px;
 }
 button.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
 button:hover { filter: brightness(1.08); }
 button:disabled { opacity: .5; cursor: not-allowed; }
 textarea, input, select {
   width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
-  border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: inherit;
+  border-radius: 8px; padding: 9px 11px; font-size: 16px; font-family: inherit;
+  min-height: 44px;
 }
 textarea { min-height: 90px; resize: vertical; }
 label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
 pre {
-  background: #0b0d11; border: 1px solid var(--border); border-radius: 10px;
-  padding: 12px; overflow: auto; font-size: 12px; color: #cbd5e1; max-height: 360px;
+  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
+  padding: 12px; overflow: auto; font-size: 12px; color: var(--text); max-height: 360px;
+  max-width: 100%; overflow-wrap: anywhere;
 }
 .empty { color: var(--muted); text-align: center; padding: 50px 0; }
 .section { margin-top: 28px; }
 .timeline-item { border-left: 2px solid var(--border); padding: 6px 0 6px 14px; margin-left: 6px; font-size: 13px; }
 .timeline-item .t-meta { color: var(--muted); font-size: 11px; }
-.toast { position: fixed; bottom: 20px; right: 20px; background: var(--panel-2); border: 1px solid var(--border); padding: 12px 16px; border-radius: 10px; font-size: 13px; max-width: 360px; }
+.toast {
+  position: fixed;
+  bottom: max(20px, env(safe-area-inset-bottom));
+  left: auto;
+  right: max(12px, env(safe-area-inset-right));
+  background: var(--panel-2); border: 1px solid var(--border);
+  padding: 12px 16px; border-radius: 10px; font-size: 13px;
+  max-width: min(360px, calc(100vw - 24px));
+}
+
+/* 키보드 포커스 링 (tokens.css 의 :focus-visible 와 별개로 이 페이지에서도 보장) */
+:focus-visible {
+  outline: 2px solid var(--accent, #6E4AE6);
+  outline-offset: 2px;
+}
+
+/* 폰: 패딩 축소 + 단일 열 + 헤더 컴팩트 */
+@media (max-width: 600px) {
+  header.app { padding: 12px 14px; }
+  main { padding: 18px 14px 64px; }
+  .grid { grid-template-columns: 1fr; }
+  h1 { font-size: 20px; }
+}

package/static/plugins.html

@@ -2,9 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Plugin SDK — Lattice AI</title>
-  <link rel="stylesheet" href="/static/platform.css" />
+  <script src="/static/scripts/ux.js?v=2.2.2"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.2" />
+  <link rel="stylesheet" href="/static/platform.css?v=2.2.2" />
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.2" />
 </head>
 <body>
   <main>

package/static/scripts/admin.js

@@ -587,12 +587,12 @@ function renderUsers(users) {
             <tbody>
                 ${latestUsers.map(user => `
                     <tr>
-                        <td>${esc(user.email)}</td>
-                        <td>${esc(user.name || '-')}</td>
-                        <td>${esc(user.nickname || '-')}</td>
-                        <td><span class="role">${esc(roleLabel(user.role))}</span></td>
-                        <td>${permissionTag(statusLabel(user), user.disabled ? 'medium' : 'low')}</td>
-                        <td>
+                        <td data-label="${t('label_email')}">${esc(user.email)}</td>
+                        <td data-label="${t('label_name')}">${esc(user.name || '-')}</td>
+                        <td data-label="${t('label_nickname')}">${esc(user.nickname || '-')}</td>
+                        <td data-label="${t('label_perm')}"><span class="role">${esc(roleLabel(user.role))}</span></td>
+                        <td data-label="${t('label_status')}">${permissionTag(statusLabel(user), user.disabled ? 'medium' : 'low')}</td>
+                        <td data-label="${t('label_actions')}">
                             <div class="actions">
                                 <button class="table-btn" data-action="role" data-email="${esc(user.email)}" data-next-role="${user.role === 'admin' ? 'user' : 'admin'}">
                                     ${user.role === 'admin' ? t('btn_revoke_admin') : t('btn_grant_admin')}
@@ -635,15 +635,15 @@ function renderPermissions(users) {
                     const isAdmin = user.role === 'admin';
                     return `
                         <tr>
-                            <td>
+                            <td data-label="${t('label_user')}">
                                 <strong>${esc(user.nickname || user.name || user.email)}</strong>
                                 <div class="preview">${esc(user.email)}</div>
                             </td>
-                            <td>${permissionTag(statusLabel(user), active ? 'low' : 'medium')}</td>
-                            <td>${permissionTag(active ? t('permission_allowed') : t('permission_blocked'), active ? 'low' : 'medium')}</td>
-                            <td>${permissionTag(active ? t('permission_allowed') : t('permission_blocked'), active ? 'low' : 'medium')}</td>
-                            <td>${permissionTag(isAdmin && active ? t('permission_granted') : t('permission_not_granted'), isAdmin && active ? 'low' : 'medium')}</td>
-                            <td>
+                            <td data-label="${t('label_status')}">${permissionTag(statusLabel(user), active ? 'low' : 'medium')}</td>
+                            <td data-label="${t('permission_default')}">${permissionTag(active ? t('permission_allowed') : t('permission_blocked'), active ? 'low' : 'medium')}</td>
+                            <td data-label="${t('permission_advanced')}">${permissionTag(active ? t('permission_allowed') : t('permission_blocked'), active ? 'low' : 'medium')}</td>
+                            <td data-label="${t('permission_admin')}">${permissionTag(isAdmin && active ? t('permission_granted') : t('permission_not_granted'), isAdmin && active ? 'low' : 'medium')}</td>
+                            <td data-label="${t('label_actions')}">
                                 <div class="actions">
                                     <button class="table-btn" data-action="role" data-email="${esc(user.email)}" data-next-role="${isAdmin ? 'user' : 'admin'}">
                                         ${isAdmin ? t('btn_revoke_admin') : t('btn_grant_admin')}
@@ -773,12 +773,12 @@ function renderAudit(audit) {
             <tbody>
                 ${users.map(user => `
                     <tr>
-                        <td><strong>${esc(user.nickname || user.email || 'Unknown')}</strong><div class="preview">${esc(user.email || '')}</div></td>
-                        <td>${esc(user.user_messages || 0)} / ${esc(user.assistant_messages || 0)}</td>
-                        <td>${esc(user.document_uploads || 0)}</td>
-                        <td>${permissionTag(user.sensitive_events || 0, (user.high_sensitive_events || 0) ? 'high' : ((user.sensitive_events || 0) ? 'medium' : 'low'))}</td>
-                        <td>${esc(user.clear_events || 0)} / ${esc(user.delete_events || 0)}</td>
-                        <td>${esc(formatTime(user.last_activity_at))}</td>
+                        <td data-label="${t('label_user')}"><strong>${esc(user.nickname || user.email || 'Unknown')}</strong><div class="preview">${esc(user.email || '')}</div></td>
+                        <td data-label="AI Use">${esc(user.user_messages || 0)} / ${esc(user.assistant_messages || 0)}</td>
+                        <td data-label="Uploads">${esc(user.document_uploads || 0)}</td>
+                        <td data-label="Sensitive">${permissionTag(user.sensitive_events || 0, (user.high_sensitive_events || 0) ? 'high' : ((user.sensitive_events || 0) ? 'medium' : 'low'))}</td>
+                        <td data-label="Clear/Delete">${esc(user.clear_events || 0)} / ${esc(user.delete_events || 0)}</td>
+                        <td data-label="Last Active">${esc(formatTime(user.last_activity_at))}</td>
                     </tr>
                 `).join('')}
             </tbody>
@@ -800,11 +800,11 @@ function renderAudit(audit) {
             <tbody>
                 ${events.map(event => `
                     <tr>
-                        <td>${esc(formatTime(event.timestamp))}</td>
-                        <td>${esc(auditEventLabel(event))}</td>
-                        <td>${esc(event.user_nickname || event.user_email || 'Unknown')}</td>
-                        <td>${esc(auditTarget(event))}</td>
-                        <td>${permissionTag(event.sensitivity || 'none', event.sensitivity === 'high' ? 'high' : (event.sensitivity && event.sensitivity !== 'none' ? 'medium' : 'low'))}</td>
+                        <td data-label="Time">${esc(formatTime(event.timestamp))}</td>
+                        <td data-label="Event">${esc(auditEventLabel(event))}</td>
+                        <td data-label="${t('label_user')}">${esc(event.user_nickname || event.user_email || 'Unknown')}</td>
+                        <td data-label="Target/Data">${esc(auditTarget(event))}</td>
+                        <td data-label="Risk">${permissionTag(event.sensitivity || 'none', event.sensitivity === 'high' ? 'high' : (event.sensitivity && event.sensitivity !== 'none' ? 'medium' : 'low'))}</td>
                     </tr>
                 `).join('')}
             </tbody>
@@ -1377,16 +1377,16 @@ function renderCcUsersTable(users) {
     }
     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>
+            <td data-label="사용자">${ccEscape(u.user)}</td>
+            <td data-label="총 채팅">${ccEscape(u.total_chats)}</td>
+            <td data-label="준수 채팅" style="color:#2c8a3f">${ccEscape(u.compliant_chats)}</td>
+            <td data-label="위험 채팅" style="color:#b13030">${ccEscape(u.risky_chats)}</td>
+            <td data-label="총 파일">${ccEscape(u.uploaded_files)}</td>
+            <td data-label="준수 파일" style="color:#2c8a3f">${ccEscape(u.compliant_files)}</td>
+            <td data-label="위험 파일" style="color:#b13030">${ccEscape(u.risky_files)}</td>
+            <td data-label="High">${ccEscape(u.high_risk_events)}</td>
+            <td data-label="위험률">${ccEscape(u.risk_rate)}%</td>
+            <td data-label="마지막 활동">${ccEscape((u.last_activity_at || '').slice(0, 19).replace('T', ' '))}</td>
         </tr>
     `).join('');
     wrap.innerHTML = `

package/static/scripts/chat.js

@@ -1055,15 +1055,22 @@ const chatViewport = document.getElementById('chat-viewport');
                         <div style="font-weight:700">⭐ Best for this PC — ${escapeHtml(top.name || top.id)} ${badge('recommended')}</div>
                         <div style="font-size:12px;opacity:0.8;margin-top:3px">${escapeHtml(top.reason || '')}</div>
                         <div style="font-size:12px;margin-top:4px">${escapeHtml(top.size || '')} · ${escapeHtml(ram(top))} · ${escapeHtml(nextStep(rec.engine))}</div>
+                        ${modelSourceLine(top) ? `<div style="font-size:11px;opacity:0.7;margin-top:3px">${escapeHtml(modelSourceLine(top))}</div>` : ''}
                     </div>` : '';
 
                 const rows = families.map((fam) => {
                     const best = fam.best;
-                    const items = (fam.models || []).map((m) => `
-                        <div style="display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:12px;opacity:${m.status === 'not_recommended' ? 0.55 : 1}">
-                            <span>${escapeHtml(m.name || m.id)}</span>
-                            <span style="white-space:nowrap">${escapeHtml(m.size || '')} · ${escapeHtml(ram(m))} ${badge(m.status)}</span>
-                        </div>`).join('');
+                    const items = (fam.models || []).map((m) => {
+                        const src = modelSourceLine(m);
+                        return `
+                        <div style="padding:4px 0;font-size:12px;opacity:${m.status === 'not_recommended' ? 0.55 : 1}">
+                            <div style="display:flex;justify-content:space-between;gap:8px">
+                                <span>${escapeHtml(m.name || m.id)}</span>
+                                <span style="white-space:nowrap">${escapeHtml(m.size || '')} · ${escapeHtml(ram(m))} ${badge(m.status)}</span>
+                            </div>
+                            ${src ? `<div style="font-size:11px;opacity:0.65;margin-top:2px">${escapeHtml(src)}</div>` : ''}
+                        </div>`;
+                    }).join('');
                     return `
                         <details style="margin:6px 0;border:1px solid var(--border,#e5e7eb);border-radius:8px;padding:8px 10px">
                             <summary style="cursor:pointer;font-weight:600">${escapeHtml(fam.family)} ${best ? badge(best.status) : ''}${best ? ` <span style="font-weight:400;opacity:0.7">${escapeHtml(best.name || '')}</span>` : ''}</summary>
@@ -1536,25 +1543,58 @@ const chatViewport = document.getElementById('chat-viewport');
             const action = isLocalEngine
                 ? `selectModelByCard('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`
                 : `loadSelectedModel('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`;
-            const sourceLine = [
-                model.source_country,
-                model.source_company,
-                model.execution_method,
-                model.internet_requirement,
-                model.model_name || model.name,
-            ].filter(Boolean).join(' · ');
-            const detailLine = sourceLine || `${model.id} · ${badge}`;
+            const chipsHtml = modelSourceChipsHtml(model);
+            const detailLine = chipsHtml ? `${model.id} · ${badge}` : `${model.id} · ${badge}`;
             return `
                 <button class="model-option${cls}" ${isUnavailable ? 'disabled' : ''} onclick="${action}">
                     <div>
                         <strong>${escapeHtml(model.name || compactModelName(model.id))}</strong>
-                        <span>${escapeHtml(detailLine)}${sourceLine ? `<br>${escapeHtml(model.id)} · ${escapeHtml(badge)}` : ''}</span>
+                        ${chipsHtml}
+                        <span>${escapeHtml(detailLine)}</span>
                     </div>
                     <i class="ti ${icon}"></i>
                 </button>
             `;
         }
 
+        // 모델 출처 정보를 비전문가도 읽기 쉬운 라벨 칩으로 렌더링한다.
+        // 필드: source_country / source_company / execution_method / internet_requirement / model_name
+        // 누락된 필드는 자동으로 생략(graceful degrade)한다.
+        function modelSourceChips(model) {
+            if (!model) return [];
+            return [
+                ['국가', model.source_country],
+                ['회사', model.source_company],
+                ['실행', model.execution_method],
+                ['인터넷', model.internet_requirement],
+                ['모델명', model.model_name || model.name],
+            ].filter(([, value]) => value != null && String(value).trim() !== '');
+        }
+
+        function modelSourceChipsHtml(model) {
+            const chips = modelSourceChips(model);
+            if (!chips.length) return '';
+            const chipStyle = 'display:inline-flex;align-items:center;gap:3px;padding:2px 8px;'
+                + 'border:1px solid var(--border,#e5e7eb);border-radius:999px;'
+                + 'background:var(--surface-2,#f3f4f6);color:var(--text,#111);'
+                + 'font-size:11px;line-height:1.4;white-space:nowrap;';
+            const inner = chips.map(([label, value]) =>
+                `<span class="model-source-chip" style="${chipStyle}"><b style="font-weight:700;opacity:0.7">${escapeHtml(label)}:</b> ${escapeHtml(String(value))}</span>`
+            ).join('');
+            return `<span class="model-source-chips" style="display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px">${inner}</span>`;
+        }
+
+        // 한 줄짜리 평문 출처(국가 · 회사 · 실행 · 인터넷) — 좁은 행/요약용.
+        function modelSourceLine(model) {
+            if (!model) return '';
+            return [
+                model.source_country,
+                model.source_company,
+                model.execution_method,
+                model.internet_requirement,
+            ].filter(value => value != null && String(value).trim() !== '').join(' · ');
+        }
+
         function normalizedFamily(model) {
             const raw = `${model?.family || ''} ${model?.name || ''} ${model?.id || ''}`.toLowerCase();
             if (raw.includes('gpt')) return 'GPT';
@@ -3568,10 +3608,18 @@ const chatViewport = document.getElementById('chat-viewport');
 
         function attachDocument(input) {
             const file = input.files[0];
+            if (!file) return;
+            attachDocumentFile(file);
+            input.value = '';
+        }
+
+        // 파일을 직접 첨부 (드래그앤드롭 / 붙여넣기 / 파일 선택 공용 경로)
+        function attachDocumentFile(file) {
             if (!file) return;
             attachedDocFile = file;
             attachedDocContent = null;
             const row = document.getElementById('attach-preview-row');
+            if (!row) return;
             row.style.display = 'flex';
             row.innerHTML = `
                 <div class="attach-chip">
@@ -3580,9 +3628,30 @@ const chatViewport = document.getElementById('chat-viewport');
                     <button onclick="removeAttachedDoc()" title="제거">×</button>
                 </div>
                 <span style="font-size:11px;color:var(--muted);align-self:center">첨부됨 — 전송 시 AI가 파일을 읽습니다</span>`;
-            input.value = '';
         }
 
+        // 채팅 영역에 파일을 끌어다 놓으면 첨부 (Drag & Drop)
+        (function setupChatDropZone() {
+            const zone = document.querySelector('.main-chat') || document.body;
+            if (!zone) return;
+            const hasFiles = (e) => e.dataTransfer && Array.prototype.indexOf.call(e.dataTransfer.types || [], 'Files') !== -1;
+            ['dragenter', 'dragover'].forEach(ev => zone.addEventListener(ev, (e) => {
+                if (!hasFiles(e)) return;
+                e.preventDefault();
+                zone.classList.add('drag-over');
+            }));
+            zone.addEventListener('dragleave', (e) => {
+                if (e.target === zone) zone.classList.remove('drag-over');
+            });
+            zone.addEventListener('drop', (e) => {
+                zone.classList.remove('drag-over');
+                if (!hasFiles(e)) return;
+                e.preventDefault();
+                const file = e.dataTransfer.files && e.dataTransfer.files[0];
+                if (file) attachDocumentFile(file);
+            });
+        })();
+
         function removeAttachedDoc() {
             attachedDocFile = null;
             attachedDocContent = null;

package/static/scripts/graph.js

@@ -181,6 +181,7 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     let rawGraph = { nodes: [], edges: [] };
     let graph = { nodes: [], edges: [] };
     let hiddenTypes = new Set();
+    let hiddenEdgeTypes = new Set();
     let selected = null;
     let hovered = null;
     let dragging = null;
@@ -500,6 +501,21 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     window.runLocalIndex = runLocalIndex;
     window.approveLocalPermission = approveLocalPermission;
 
+    /* 테마 색상 — CSS 변수에서 캔버스 배경/텍스트를 읽어 다크모드 대응 */
+    let themeColors = { bg: '#ffffff', text: '#14162c', surface: '#ffffff' };
+    function refreshThemeColors() {
+      const cs = getComputedStyle(document.documentElement);
+      const read = (name, fallback) => {
+        const v = (cs.getPropertyValue(name) || '').trim();
+        return v || fallback;
+      };
+      themeColors = {
+        bg: read('--bg', '#ffffff'),
+        text: read('--text', '#14162c'),
+        surface: read('--surface', read('--surface-2', '#ffffff')),
+      };
+    }
+
     function nodeColor(type) {
       return (TYPE_CONFIG[type] || {}).color || '#8fa8bb';
     }
@@ -641,6 +657,7 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       const byId = Object.fromEntries(rawGraph.nodes.map(node => [node.id, node]));
       graph.edges = rawGraph.edges
         .filter(edge => nodeSet.has(edge.from) && nodeSet.has(edge.to))
+        .filter(edge => !hiddenEdgeTypes.has(edge.type))
         .map(edge => ({ ...edge, source: byId[edge.from], target: byId[edge.to] }));
       renderFocusChip();
     }
@@ -808,16 +825,26 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       }
       container.innerHTML = ordered.map(type => {
         const style = edgeStyle(type);
+        const checked = hiddenEdgeTypes.has(type) ? '' : 'checked';
         return `
-          <div class="legend-item">
+          <label class="filter-item">
+            <input type="checkbox" ${checked} onchange="toggleEdgeType(decodeURIComponent('${encodeURIComponent(type)}'), this.checked)">
             <span class="legend-line" style="border-top-color:${style.color}; border-top-width:${Math.max(2, style.width)}px;"></span>
-            <span class="legend-name">${escapeHtml(style.label || type)}</span>
-            <span class="legend-meta">${edgeCounts[type] || 0}</span>
-          </div>
+            <span class="filter-name">${escapeHtml(style.label || type)}</span>
+            <span class="filter-count">${edgeCounts[type] || 0}</span>
+          </label>
         `;
       }).join('');
     }
 
+    function toggleEdgeType(type, visible) {
+      if (visible) hiddenEdgeTypes.delete(type);
+      else hiddenEdgeTypes.add(type);
+      applyFilter();
+      wakeUp();
+    }
+    window.toggleEdgeType = toggleEdgeType;
+
     function toggleType(type, visible) {
       if (visible) hiddenTypes.delete(type);
       else hiddenTypes.add(type);
@@ -929,6 +956,9 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       ctx.translate(cam.tx, cam.ty);
       ctx.scale(cam.scale, cam.scale);
 
+      // LOD: 줌이 너무 작거나 노드가 많으면 레이블 생략 (모바일 성능)
+      const showLabels = cam.scale >= 0.5 && graph.nodes.length <= 220;
+
       const active = hovered || selected;
       const neighborSet = active ? neighborIds(active) : null;
 
@@ -997,8 +1027,8 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
           ctx.globalAlpha = alpha;
         }
 
-        // 레이블 항상 노드 아래에 표시
-        {
+        // 레이블 표시 (LOD: 줌이 작거나 노드가 많으면 생략 — 모바일 성능)
+        if (showLabels || isSelected || isHovered || isSearchHit) {
           const label = node.title.slice(0, 24);
           const fs = Math.max(9.5, 12 / cam.scale);
           ctx.font = `600 ${fs}px "SF Pro Display","Inter",system-ui`;
@@ -1008,8 +1038,9 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
           const ly = node.y + gap + fs;
           const pad = 4 / cam.scale;
           const br  = 5 / cam.scale;
-          // 흰 배경 pill
-          ctx.fillStyle = alpha > 0.5 ? 'rgba(255,255,255,0.88)' : 'rgba(255,255,255,0.22)';
+          // 테마 대응 배경 pill (라이트=흰색, 다크=surface)
+          ctx.globalAlpha = alpha > 0.5 ? alpha * 0.88 : alpha * 0.22;
+          ctx.fillStyle = themeColors.surface;
           ctx.beginPath();
           if (ctx.roundRect) {
             ctx.roundRect(lx - pad, ly - fs, lw + pad * 2, fs + pad * 1.6, br);
@@ -1017,14 +1048,17 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
             ctx.rect(lx - pad, ly - fs, lw + pad * 2, fs + pad * 1.6);
           }
           ctx.fill();
-          ctx.fillStyle = alpha > 0.5 ? '#14162c' : 'rgba(20,22,44,0.3)';
+          ctx.globalAlpha = alpha > 0.5 ? alpha : alpha * 0.3;
+          ctx.fillStyle = themeColors.text;
           ctx.fillText(label, lx, ly);
+          ctx.globalAlpha = alpha;
         }
 
         ctx.globalAlpha = 1;
       });
 
       ctx.restore();
+      drawMinimap();
       if (kineticEnergy > 0.04 || dragging) animFrameId = requestAnimationFrame(draw);
     }
 
@@ -1627,10 +1661,134 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       });
     });
 
-    window.addEventListener('resize', () => {
+    // 리사이즈/회전/키보드(visualViewport) 시 캔버스 재측정 + 자동 재맞춤
+    // (기존엔 backing store만 리사이즈해서 모바일에서 그래프가 화면 밖으로 나갔음)
+    let resizeFitTimer = null;
+    function handleViewportChange() {
       resize();
       wakeUp();
-    });
+      clearTimeout(resizeFitTimer);
+      resizeFitTimer = setTimeout(() => { resize(); fitToScreen(); }, 180);
+    }
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('orientationchange', handleViewportChange);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', handleViewportChange);
+    }
+
+    /* ──────────────────────────────────────────────────────────────────
+       v2.2.1 그래프 1급 UI: 줌 버튼 · 전체화면 · 미니맵 · 카드뷰 · 테마대응
+       ────────────────────────────────────────────────────────────────── */
+    // 캔버스가 터치를 직접 소유 (브라우저 기본 제스처와 충돌 방지)
+    if (canvas && canvas.style) canvas.style.touchAction = 'none';
+
+    function zoomBy(factor) {
+      const px = width / 2, py = height / 2;
+      const next = clamp(cam.scale * factor, 0.07, 6);
+      cam.tx = px - (px - cam.tx) * (next / cam.scale);
+      cam.ty = py - (py - cam.ty) * (next / cam.scale);
+      cam.scale = next;
+      wakeUp();
+    }
+
+    const stageEl = document.querySelector('.stage');
+    function toggleFullscreen() {
+      const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+      if (!fsEl && stageEl) {
+        (stageEl.requestFullscreen || stageEl.webkitRequestFullscreen || function () {}).call(stageEl);
+      } else {
+        (document.exitFullscreen || document.webkitExitFullscreen || function () {}).call(document);
+      }
+    }
+    document.addEventListener('fullscreenchange', handleViewportChange);
+    document.addEventListener('webkitfullscreenchange', handleViewportChange);
+
+    // 미니맵 — 전체 노드 개요 + 현재 뷰포트 사각형 (클릭 시 그 지점으로 이동)
+    const minimap = document.getElementById('minimap');
+    const mmCtx = minimap ? minimap.getContext('2d') : null;
+    function drawMinimap() {
+      if (!mmCtx || !minimap || minimap.offsetParent === null) return;
+      const W = minimap.width, H = minimap.height;
+      mmCtx.clearRect(0, 0, W, H);
+      if (!graph.nodes.length) return;
+      let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+      graph.nodes.forEach(n => { x0 = Math.min(x0, n.x); x1 = Math.max(x1, n.x); y0 = Math.min(y0, n.y); y1 = Math.max(y1, n.y); });
+      const pad = 8, gw = Math.max(1, x1 - x0), gh = Math.max(1, y1 - y0);
+      const s = Math.min((W - pad * 2) / gw, (H - pad * 2) / gh);
+      const ox = pad - x0 * s + (W - pad * 2 - gw * s) / 2;
+      const oy = pad - y0 * s + (H - pad * 2 - gh * s) / 2;
+      graph.nodes.forEach(n => {
+        mmCtx.fillStyle = nodeColor(n.type);
+        mmCtx.beginPath();
+        mmCtx.arc(ox + n.x * s, oy + n.y * s, 1.6, 0, Math.PI * 2);
+        mmCtx.fill();
+      });
+      const vx0 = (0 - cam.tx) / cam.scale, vy0 = (0 - cam.ty) / cam.scale;
+      const vx1 = (width - cam.tx) / cam.scale, vy1 = (height - cam.ty) / cam.scale;
+      mmCtx.strokeStyle = 'rgba(110,74,230,0.95)';
+      mmCtx.lineWidth = 1.2;
+      mmCtx.strokeRect(ox + vx0 * s, oy + vy0 * s, (vx1 - vx0) * s, (vy1 - vy0) * s);
+      minimap._map = { ox, oy, s };
+    }
+    if (minimap) {
+      minimap.addEventListener('click', (event) => {
+        const m = minimap._map; if (!m) return;
+        const rect = minimap.getBoundingClientRect();
+        const mx = (event.clientX - rect.left) * (minimap.width / rect.width);
+        const my = (event.clientY - rect.top) * (minimap.height / rect.height);
+        cam.tx = width / 2 - ((mx - m.ox) / m.s) * cam.scale;
+        cam.ty = height / 2 - ((my - m.oy) / m.s) * cam.scale;
+        wakeUp();
+      });
+    }
+
+    // 모바일 카드 뷰 — 노드를 탭 가능한 카드 목록으로 (캔버스가 너무 빽빽할 때)
+    const graphCardList = document.getElementById('graph-card-list');
+    function renderGraphCards() {
+      if (!graphCardList) return;
+      if (!graph.nodes.length) {
+        graphCardList.innerHTML = `<p class="search-empty">${t('search_empty')}</p>`;
+        return;
+      }
+      graphCardList.innerHTML = '<div class="search-list">' + graph.nodes.slice(0, 400).map(n => `
+        <button class="search-item" data-node-id="${escapeHtml(n.id)}">
+          <div class="search-item-top">
+            <span class="type-badge" style="background:${nodeColor(n.type)}">${escapeHtml(n.type || '')}</span>
+            <span class="search-item-title">${escapeHtml(n.title || n.id)}</span>
+          </div>
+          ${n.summary ? `<p class="search-item-summary">${escapeHtml(n.summary)}</p>` : ''}
+        </button>
+      `).join('') + '</div>';
+    }
+    function toggleGraphCardView() {
+      document.body.classList.toggle('graph-card-view');
+      if (document.body.classList.contains('graph-card-view')) renderGraphCards();
+    }
+    if (graphCardList) {
+      graphCardList.addEventListener('click', (event) => {
+        const target = event.target.closest('[data-node-id]');
+        if (!target) return;
+        const node = graph.nodes.find(n => n.id === target.dataset.nodeId);
+        if (!node) return;
+        document.body.classList.remove('graph-card-view');
+        selected = node;
+        showDetail(node);
+        centerOnNode(node, Math.max(cam.scale, 1));
+      });
+    }
+
+    // 테마(라이트/다크) 변경 시 캔버스 색상 갱신
+    refreshThemeColors();
+    try {
+      const themeObserver = new MutationObserver(() => { refreshThemeColors(); wakeUp(); });
+      themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-lt-theme'] });
+    } catch (e) { /* noop */ }
+
+    const bindClick = (id, fn) => { const el = document.getElementById(id); if (el) el.addEventListener('click', fn); };
+    bindClick('zoom-in-btn', () => zoomBy(1.25));
+    bindClick('zoom-out-btn', () => zoomBy(1 / 1.25));
+    bindClick('fullscreen-btn', toggleFullscreen);
+    bindClick('view-toggle-btn', toggleGraphCardView);
 
     resize();
     applyI18n();