ltcai 2.1.0 → 2.2.1

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.1"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.1" />
+  <link rel="stylesheet" href="/static/platform.css?v=2.2.1" />
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1" />
 </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

@@ -227,7 +227,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 my_status: '내 상태 보기', auto_setup: '자동 설정',
                 nav_home: '홈', nav_chat: '채팅', nav_workspace: 'Workspace OS', nav_knowledge: '지식 그래프',
                 nav_pipeline: '파이프라인', nav_files: '내 컴퓨터',
-                nav_model_status: '모델 상태', nav_runtime: '런타임 설정',
+                nav_model_status: '모델 상태', nav_runtime: '실행 방식 설정',
                 nav_advanced_settings: '고급 설정',
                 history_search_ph: '대화 검색...', new_chat: 'New Chat',
                 history_section: '대화', history_empty: '아직 저장된 대화가 없습니다.',
@@ -235,7 +235,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 confirm_delete_chat: '이 대화를 삭제할까요?',
                 home_greeting: '안녕하세요, {name}님',
                 home_greeting_short: '안녕하세요',
-                ops_ai_model: 'AI 모델', ops_local_runtime: '로컬 런타임',
+                ops_ai_model: 'AI 모델', ops_local_runtime: '내 컴퓨터에서 실행',
                 ops_admin_network: '관리자 네트워크', ops_admin_security: '관리자 보안',
                 ops_pipeline_value: '멀티 LLM 파이프라인',
                 ops_pipeline_meta: 'Plan → Execute → Review 모델 설정',
@@ -248,7 +248,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 home_recent_files: '최근 파일', home_open_files: '파일 열기', home_no_files: '파일이 없습니다',
                 chat_intro_title: 'Lattice AI',
                 chat_intro_desc: '로컬 모델, 파일, 지식 그래프, 멀티모달 작업을 한 대화 흐름에서 연결하는 개인 AI 워크스페이스입니다.',
-                chat_cap_file: '파일 생성', chat_cap_knowledge: '지식 정리', chat_cap_runtime: '로컬 런타임',
+                chat_cap_file: '파일 생성', chat_cap_knowledge: '지식 정리', chat_cap_runtime: '내 컴퓨터에서 실행',
                 // 계정 모달
                 tab_profile: '프로필', tab_password: '비밀번호',
                 label_name: '이름', label_nickname: '닉네임',
@@ -283,12 +283,12 @@ const chatViewport = document.getElementById('chat-viewport');
                 mode_default: '기본 모드',
                 mode_default_sub: '대화, 파일 생성, 지식 정리를 한 화면에서',
                 mode_advanced: '고급 모드',
-                mode_advanced_sub: '모델 상태, 런타임 설정, 고급 설정',
+                mode_advanced_sub: '같은 기능을 더 자세한 설명으로 표시',
                 mode_admin: '관리자 모드',
-                mode_admin_sub: '운영자용 관리자 대시보드',
+                mode_admin_sub: '사용자, 정책, 감사 로그 관리',
                 // 패널 제목
                 model_switcher: '모델 스위처',
-                model_switcher_sub: '실행 엔진을 설치하고, 엔진에 맞는 local/cloud LLM을 선택합니다.',
+                model_switcher_sub: '제작 국가, 제작 회사, 실행 방식, 인터넷 사용 여부를 확인하고 모델을 선택합니다.',
                 // 권한 다이얼로그
                 perm_title: '파일 접근 요청', btn_deny: '거부', btn_allow: '허용',
             },
@@ -306,7 +306,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 my_status: 'My Status', auto_setup: 'Auto Setup',
                 nav_home: 'Home', nav_chat: 'Chat', nav_workspace: 'Workspace OS', nav_knowledge: 'Knowledge Graph',
                 nav_pipeline: 'Pipeline', nav_files: 'My Computer',
-                nav_model_status: 'Model Status', nav_runtime: 'Runtime Settings',
+                nav_model_status: 'Model Status', nav_runtime: 'Execution Settings',
                 nav_advanced_settings: 'Advanced Settings',
                 history_search_ph: 'Search chats...', new_chat: 'New Chat',
                 history_section: 'Chats', history_empty: 'No saved chats yet.',
@@ -314,7 +314,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 confirm_delete_chat: 'Delete this chat?',
                 home_greeting: 'Hello, {name}',
                 home_greeting_short: 'Hello',
-                ops_ai_model: 'AI model', ops_local_runtime: 'Local runtime',
+                ops_ai_model: 'AI model', ops_local_runtime: 'Runs on this computer',
                 ops_admin_network: 'Admin Network', ops_admin_security: 'Admin Security',
                 ops_pipeline_value: 'Multi-LLM Pipeline',
                 ops_pipeline_meta: 'Plan → Execute → Review model setup',
@@ -327,7 +327,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 home_recent_files: 'Recent Files', home_open_files: 'Open Files', home_no_files: 'No files yet',
                 chat_intro_title: 'Lattice AI',
                 chat_intro_desc: 'A personal AI workspace that connects local models, files, knowledge graphs, and multimodal work in one conversation flow.',
-                chat_cap_file: 'File creation', chat_cap_knowledge: 'Knowledge organizing', chat_cap_runtime: 'Local runtime',
+                chat_cap_file: 'File creation', chat_cap_knowledge: 'Knowledge organizing', chat_cap_runtime: 'Runs on this computer',
                 // Account modal
                 tab_profile: 'Profile', tab_password: 'Password',
                 label_name: 'Name', label_nickname: 'Nickname',
@@ -367,7 +367,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 mode_admin_sub: 'Admin dashboard for operators',
                 // Panel titles
                 model_switcher: 'Model Switcher',
-                model_switcher_sub: 'Install a runtime engine and select a local/cloud LLM.',
+                model_switcher_sub: 'Check maker country, maker company, execution method, internet use, then select a model.',
                 // Permission dialog
                 perm_title: 'File Access Request', btn_deny: 'Deny', btn_allow: 'Allow',
             }
@@ -650,11 +650,8 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         async function _loadHomeDashboard() {
-            const mode = getCurrentMode();
-
-            // 자동 설정 카드: 고급/관리자 모드만
             const setupCard = document.getElementById('home-setup-card');
-            if (setupCard) setupCard.style.display = (mode === 'advanced' || mode === 'admin') ? 'flex' : 'none';
+            if (setupCard) setupCard.style.display = 'flex';
 
             // 모델 + sysinfo 병렬 fetch
             try {
@@ -953,7 +950,7 @@ const chatViewport = document.getElementById('chat-viewport');
             const selected = models.find(item => item.checked && !item.disabled && (item.model_id || item.action?.model_id))
                 || models.find(item => !item.disabled && (item.model_id || item.action?.model_id));
             const zero = onboardingRecs?.summary?.zero_config || onboardingEnv?.zero_config?.recommend || {};
-            const modelId = selected?.model_id || selected?.action?.model_id || zero.model_id || 'mlx-community/Llama-3.2-3B-Instruct-4bit';
+            const modelId = selected?.model_id || selected?.action?.model_id || zero.model_id || 'mlx-community/gemma-4-12b-it-4bit';
             const engineItem = (onboardingRecs?.engines || []).find(item => item.checked && !item.disabled);
             const runtime = engineItem?.name || (zero.runtime === 'mlx' ? 'MLX' : zero.runtime) || 'MLX';
             return {
@@ -1058,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>
@@ -1351,7 +1355,7 @@ const chatViewport = document.getElementById('chat-viewport');
                     <button class="onboarding-mode" onclick="finishOnboarding('advanced')">
                         <i class="ti ti-terminal-2"></i>
                         <h3>고급 모드</h3>
-                        <p>모델 상태, 런타임 설정, 고급 설정까지 함께 다룹니다.</p>
+                        <p>같은 기능을 유지하면서 모델, 메모리, 실행 방식 설명을 더 자세히 표시합니다.</p>
                     </button>
                     ${adminCard}
                 </div>
@@ -1528,7 +1532,7 @@ const chatViewport = document.getElementById('chat-viewport');
             const isUnavailable = unsupported || (!isLocalEngine && engineMissing) || keyMissing || verifyFailed;
             const badge = unsupported ? '현재 환경 미지원'
                 : engineMissing && isLocalEngine ? '설치 후 자동 로드'
-                : engineMissing ? '엔진 설치 필요'
+                : engineMissing ? '실행 도구 설치 필요'
                 : needsPull ? '다운로드 후 자동 로드'
                 : keyMissing ? `필요: ${model.requires || 'API key'}`
                 : verifyFailed ? `실패: ${model.verify_reason || '검증 실패'}`
@@ -1539,29 +1543,67 @@ const chatViewport = document.getElementById('chat-viewport');
             const action = isLocalEngine
                 ? `selectModelByCard('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`
                 : `loadSelectedModel('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`;
+            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(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';
             if (raw.includes('claude')) return 'Claude';
             if (raw.includes('grok')) return 'Grok';
             if (raw.includes('gemini')) return 'Gemini';
-            if (raw.includes('mistral') || raw.includes('mixtral')) return 'Mistral';
             if (raw.includes('qwen')) return 'Qwen';
             if (raw.includes('llama')) return 'Llama';
             if (raw.includes('gemma')) return 'Gemma';
-            if (raw.includes('phi')) return 'Phi';
-            if (raw.includes('deepseek')) return 'DeepSeek';
             return (model?.family || '기타');
         }
 
@@ -1642,17 +1684,17 @@ const chatViewport = document.getElementById('chat-viewport');
             const cloudEngines = cachedEngineList.filter(engine => engine.kind === 'cloud');
             const isLocal = modelPanelFilter === 'local';
             const target = isLocal ? localEngines : cloudEngines;
-            const emptyText = isLocal ? '등록된 로컬 엔진이 없습니다.' : '등록된 클라우드 엔진이 없습니다.';
+            const emptyText = isLocal ? '내 컴퓨터에서 실행할 수 있는 항목이 없습니다.' : '인터넷 연결 후 사용할 수 있는 항목이 없습니다.';
 
             modelList.innerHTML = `
-                <div class="model-group-title">EXECUTION ENGINES</div>
+                <div class="model-group-title">실행 방식</div>
                 <div class="model-filter">
-                    <button class="model-filter-btn ${isLocal ? 'active' : ''}" onclick="setModelPanelFilter('local')">Local LLM</button>
-                    <button class="model-filter-btn ${!isLocal ? 'active' : ''}" onclick="setModelPanelFilter('cloud')">Cloud LLM</button>
+                    <button class="model-filter-btn ${isLocal ? 'active' : ''}" onclick="setModelPanelFilter('local')">내 컴퓨터에서만 실행</button>
+                    <button class="model-filter-btn ${!isLocal ? 'active' : ''}" onclick="setModelPanelFilter('cloud')">인터넷 연결 후 사용</button>
                 </div>
                 ${!isLocal ? `
                     <div style="display:flex;justify-content:flex-end;margin:-2px 0 8px;">
-                        <button class="admin-action" onclick="verifyCloudModels(true)"><i class="ti ti-activity"></i> Cloud 실사용 테스트</button>
+                        <button class="admin-action" onclick="verifyCloudModels(true)"><i class="ti ti-activity"></i> 인터넷 모델 실사용 테스트</button>
                     </div>
                 ` : ''}
                 ${target.length ? target.map(engineCardHtml).join('') : `<div class="sensitivity-preview">${emptyText}</div>`}
@@ -1680,7 +1722,7 @@ const chatViewport = document.getElementById('chat-viewport');
 
         async function verifyCloudModels(force = true) {
             const modelList = document.getElementById('model-list');
-            modelList.innerHTML = `<div class="sensitivity-preview">Cloud 모델 실사용 테스트 중입니다... (provider별로 수 초~수십 초)</div>`;
+            modelList.innerHTML = `<div class="sensitivity-preview">인터넷 모델 실사용 테스트 중입니다... (연결 방식별로 수 초~수십 초)</div>`;
             try {
                 const res = await apiFetch('/engines/verify-cloud', {
                     method: 'POST',
@@ -1688,9 +1730,9 @@ const chatViewport = document.getElementById('chat-viewport');
                     body: JSON.stringify({ force })
                 });
                 const data = await res.json();
-                if (!res.ok) throw new Error(data.detail || 'Cloud 실사용 테스트 실패');
+                if (!res.ok) throw new Error(data.detail || '인터넷 모델 실사용 테스트 실패');
                 await openModelPanel();
-                addMessage('ai', `Cloud 모델 실사용 테스트를 완료했습니다. 실패한 모델은 잠금 상태로 표시됩니다.`);
+                addMessage('ai', `인터넷 모델 실사용 테스트를 완료했습니다. 실패한 모델은 잠금 상태로 표시됩니다.`);
             } catch (e) {
                 modelList.innerHTML = `
                     <div class="sensitivity-preview">${escapeHtml(e.message)}</div>
@@ -1832,7 +1874,7 @@ const chatViewport = document.getElementById('chat-viewport');
                         </div>
                     </div>
                     <div id="model-download-detail" class="model-download-detail">
-                        엔진 설치, 모델 다운로드, 서버 시작, 로드까지 자동으로 진행합니다. 첫 실행은 수 분이 걸릴 수 있습니다.
+                        실행 도구 설치, 모델 다운로드, 연결 준비, 로드까지 자동으로 진행합니다. 첫 실행은 수 분이 걸릴 수 있습니다.
                     </div>
                 </div>
             `;
@@ -3566,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">
@@ -3578,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;
@@ -4363,7 +4434,7 @@ const chatViewport = document.getElementById('chat-viewport');
         const keys = env.api_keys || {};
 
         const mlxLabel = mlx.available
-            ? (mlx.mlx_lm && mlx.mlx_vlm ? 'MLX-LM · MLX-VLM 설치됨' : mlx.mlx_lm ? 'MLX-LM 설치됨' : '부분 설치')
+            ? (mlx.mlx_vlm ? 'MLX-VLM 설치됨' : 'MLX 설치됨 · MLX-VLM 필요')
             : '미설치';
 
         const cloudKeys = Object.entries(keys).filter(([,v]) => v).map(([k]) => k.toUpperCase());
@@ -4378,7 +4449,7 @@ const chatViewport = document.getElementById('chat-viewport');
             { icon: mlx.available ? '✅' : '⚠️', label: 'MLX', value: mlxLabel, ok: mlx.available },
             { icon: tools.ollama ? '✅' : '○',  label: 'Ollama', value: tools.ollama ? '설치됨' : '미설치', ok: true },
             { icon: tools.brew   ? '✅' : '○',  label: 'Homebrew', value: tools.brew ? '설치됨' : '미설치', ok: true },
-            { icon: cloudKeys.length ? '✅' : '○', label: 'Cloud API',
+            { icon: cloudKeys.length ? '✅' : '○', label: '인터넷 AI',
               value: cloudKeys.length ? cloudKeys.join(', ') : '없음', ok: true },
             { icon: env.os === 'Darwin' ? '🍎' : '🐧',
               label: '운영체제',
@@ -4607,10 +4678,6 @@ const chatViewport = document.getElementById('chat-viewport');
     let _mcpCurrentTab = 'registry';
 
     async function openMcpModal() {
-        if (getCurrentMode() === 'default') {
-            showToast('고급 모드에서 사용할 수 있습니다.');
-            return;
-        }
         document.getElementById('mcp-modal-overlay').classList.add('open');
         await renderMcpModal(_mcpCurrentTab);
     }