ltcai 0.1.9 → 0.1.16

package/static/chat.html

@@ -8,7 +8,7 @@
 
     <!-- PWA -->
     <link rel="manifest" href="/manifest.json">
-    <meta name="theme-color" content="#2d5a3d">
+    <meta name="theme-color" content="#282a36">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -2724,30 +2724,31 @@
         }
     </style>
     <style>
-        /* Chat workspace refresh. Scoped to the signed-in app so the login page keeps its current look. */
+        /* Obsidian-inspired workspace refresh. Scoped to the signed-in app. */
         .app-layout {
-            --bg: #111312;
-            --surface: #181b19;
-            --surface-2: #20241f;
-            --surface-3: #282e27;
-            --accent: #41d39b;
-            --accent-2: #d8a642;
-            --accent-3: #d6c28f;
-            --accent-pink: #d98686;
-            --accent-soft: rgba(65, 211, 155, 0.11);
-            --text: #f3f1e8;
-            --muted: #b8b5a9;
-            --faint: #7f8278;
-            --border: rgba(243, 241, 232, 0.11);
-            --border-strong: rgba(243, 241, 232, 0.2);
-            --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
-            --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.24);
-            --glow-green: 0 0 28px rgba(65, 211, 155, 0.13);
+            --bg: #282a36;
+            --surface: #222431;
+            --surface-2: #2f3142;
+            --surface-3: #3a3d52;
+            --accent: #a77cff;
+            --accent-2: #f1c86d;
+            --accent-3: #7db7ff;
+            --accent-pink: #ff7db3;
+            --accent-soft: rgba(167, 124, 255, 0.13);
+            --text: #f7f7f2;
+            --muted: #c4c8d8;
+            --faint: #8d93ab;
+            --border: rgba(218, 225, 255, 0.13);
+            --border-strong: rgba(218, 225, 255, 0.23);
+            --shadow: 0 22px 64px rgba(5, 7, 12, 0.34);
+            --shadow-sm: 0 8px 24px rgba(5, 7, 12, 0.24);
+            --glow-green: 0 0 30px rgba(167, 124, 255, 0.14);
             position: relative;
             isolation: isolate;
             background:
+                radial-gradient(circle at 48% 42%, rgba(125,183,255,0.09), transparent 34%),
                 linear-gradient(180deg, rgba(255,255,255,0.018), transparent 34%),
-                linear-gradient(135deg, #141715 0%, #101210 52%, #171611 100%);
+                linear-gradient(135deg, #292b38 0%, #242632 52%, #2f3040 100%);
         }
 
         .app-layout::before {
@@ -2757,21 +2758,35 @@
             z-index: -1;
             pointer-events: none;
             background:
-                linear-gradient(rgba(243,241,232,0.035) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(243,241,232,0.025) 1px, transparent 1px);
-            background-size: 44px 44px;
-            mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.08));
+                radial-gradient(circle, rgba(247,247,242,0.7) 1px, transparent 1.8px),
+                linear-gradient(rgba(157,177,255,0.13) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(157,177,255,0.09) 1px, transparent 1px);
+            background-size: 76px 76px, 48px 48px, 48px 48px;
+            background-position: 18px 22px, 0 0, 0 0;
+            mask-image: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.09));
+        }
+
+        .app-layout::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            z-index: -1;
+            pointer-events: none;
+            background:
+                linear-gradient(116deg, transparent 0 42%, rgba(125,183,255,0.08) 42.15%, transparent 42.35% 100%),
+                linear-gradient(28deg, transparent 0 58%, rgba(167,124,255,0.08) 58.15%, transparent 58.35% 100%);
+            opacity: 0.72;
         }
 
         .app-layout .sidebar {
-            background: rgba(20, 23, 21, 0.96);
-            border-right-color: rgba(243, 241, 232, 0.1);
+            background: rgba(30, 32, 43, 0.94);
+            border-right-color: rgba(218,225,255,0.13);
             box-shadow: inset -1px 0 0 rgba(255,255,255,0.025);
         }
 
         @media (max-width: 768px) {
             .app-layout .sidebar {
-                background: #141715;
+                background: #222431;
                 backdrop-filter: none;
                 -webkit-backdrop-filter: none;
             }
@@ -2785,9 +2800,9 @@
 
         .app-layout .logo-box,
         .app-layout .user-avatar {
-            background: linear-gradient(135deg, #41d39b 0%, #d8a642 100%);
-            color: #101210;
-            box-shadow: 0 10px 24px rgba(0,0,0,0.26);
+            background: radial-gradient(circle at 35% 30%, #ffffff 0 16%, #a77cff 17% 62%, #5b6cff 100%);
+            color: #171926;
+            box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 10px 24px rgba(0,0,0,0.28), 0 0 26px rgba(167,124,255,0.18);
         }
 
         .app-layout .brand-title {
@@ -2799,20 +2814,20 @@
 
         .app-layout .history-item:hover,
         .app-layout .history-item.active {
-            background: rgba(243,241,232,0.055);
+            background: rgba(167,124,255,0.10);
             border-left-color: var(--accent);
         }
 
         .app-layout .history-item.active {
-            border-color: rgba(65,211,155,0.22);
+            border-color: rgba(167,124,255,0.24);
         }
 
         .app-layout .new-chat-btn,
         .app-layout .status-btn,
         .app-layout .setup-wizard-sidebar-btn,
         .app-layout .admin-btn {
-            background: rgba(243,241,232,0.045);
-            border-color: rgba(243,241,232,0.1);
+            background: rgba(247,247,242,0.045);
+            border-color: rgba(218,225,255,0.12);
             color: var(--text);
             box-shadow: none;
         }
@@ -2821,8 +2836,8 @@
         .app-layout .status-btn:hover,
         .app-layout .setup-wizard-sidebar-btn:hover,
         .app-layout .admin-btn:hover {
-            background: rgba(65,211,155,0.1);
-            border-color: rgba(65,211,155,0.28);
+            background: rgba(167,124,255,0.12);
+            border-color: rgba(167,124,255,0.3);
             color: var(--accent);
         }
 
@@ -2831,15 +2846,15 @@
         }
 
         .app-layout .chat-header {
-            background: rgba(18, 20, 18, 0.88);
-            border-bottom-color: rgba(243,241,232,0.09);
+            background: rgba(33, 35, 48, 0.82);
+            border-bottom-color: rgba(218,225,255,0.12);
             box-shadow: 0 1px 0 rgba(255,255,255,0.025);
         }
 
         .app-layout .model-badge,
         .app-layout .status-pill {
-            background: rgba(243,241,232,0.045);
-            border-color: rgba(243,241,232,0.1);
+            background: rgba(247,247,242,0.045);
+            border-color: rgba(218,225,255,0.13);
             color: var(--muted);
         }
 
@@ -2848,44 +2863,45 @@
         }
 
         .app-layout .status-pill.vpc-ready {
-            background: rgba(65,211,155,0.09);
-            border-color: rgba(65,211,155,0.24);
+            background: rgba(32,184,170,0.11);
+            border-color: rgba(32,184,170,0.28);
+            color: #7ee3d7;
         }
 
         .app-layout .status-dot {
-            background: var(--accent);
-            box-shadow: 0 0 8px rgba(65,211,155,0.55);
+            background: #f7f7f2;
+            box-shadow: 0 0 8px rgba(247,247,242,0.7), 0 0 18px rgba(167,124,255,0.36);
         }
 
         .app-layout .ops-card {
-            background: rgba(24, 27, 25, 0.88);
-            border-color: rgba(243,241,232,0.11);
+            background: rgba(34, 36, 49, 0.82);
+            border-color: rgba(218,225,255,0.14);
             box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.035);
         }
 
         .app-layout .ops-card.primary {
-            background: linear-gradient(135deg, rgba(65,211,155,0.11), rgba(24,27,25,0.92) 58%);
-            border-color: rgba(65,211,155,0.24);
+            background: linear-gradient(135deg, rgba(167,124,255,0.16), rgba(34,36,49,0.9) 58%);
+            border-color: rgba(167,124,255,0.28);
         }
 
         .app-layout .ops-card.interactive:hover {
-            background: linear-gradient(135deg, rgba(65,211,155,0.13), rgba(24,27,25,0.96) 62%);
-            border-color: rgba(65,211,155,0.34);
-            box-shadow: var(--shadow), 0 0 24px rgba(65,211,155,0.1);
+            background: linear-gradient(135deg, rgba(167,124,255,0.18), rgba(34,36,49,0.96) 62%);
+            border-color: rgba(167,124,255,0.38);
+            box-shadow: var(--shadow), 0 0 26px rgba(167,124,255,0.13);
         }
 
         .app-layout .ops-card.primary .ops-icon,
         .app-layout .empty-icon,
         .app-layout .empty-state > div[style] {
-            background: rgba(65,211,155,0.1) !important;
-            border-color: rgba(65,211,155,0.2) !important;
+            background: rgba(167,124,255,0.12) !important;
+            border-color: rgba(167,124,255,0.24) !important;
             color: var(--accent) !important;
             box-shadow: none !important;
         }
 
         .app-layout .ops-card:not(.primary) .ops-icon {
-            background: rgba(243,241,232,0.045);
-            border-color: rgba(243,241,232,0.08);
+            background: rgba(247,247,242,0.045);
+            border-color: rgba(218,225,255,0.1);
             color: var(--accent-3);
         }
 
@@ -2896,28 +2912,28 @@
         }
 
         .app-layout .empty-chip {
-            background: rgba(24,27,25,0.82);
-            border-color: rgba(243,241,232,0.1);
+            background: rgba(34,36,49,0.82);
+            border-color: rgba(218,225,255,0.12);
             color: var(--muted);
             box-shadow: none;
         }
 
         .app-layout .empty-chip:hover {
-            background: rgba(65,211,155,0.08);
-            border-color: rgba(65,211,155,0.26);
+            background: rgba(167,124,255,0.10);
+            border-color: rgba(167,124,255,0.28);
             box-shadow: 0 10px 28px rgba(0,0,0,0.2);
         }
 
         .app-layout .user .bubble {
-            background: #2b604c;
-            border-color: rgba(65,211,155,0.22);
-            color: #f5fff9;
+            background: linear-gradient(135deg, rgba(98,89,196,0.96), rgba(45,116,156,0.92));
+            border-color: rgba(167,124,255,0.24);
+            color: #fbfbff;
             box-shadow: 0 8px 24px rgba(0,0,0,0.22);
         }
 
         .app-layout .ai .bubble {
-            background: rgba(27, 30, 28, 0.94);
-            border-color: rgba(243,241,232,0.11);
+            background: rgba(34, 36, 49, 0.9);
+            border-color: rgba(218,225,255,0.13);
             box-shadow: 0 8px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.035);
         }
 
@@ -2930,45 +2946,45 @@
 
         .app-layout .code-container,
         .app-layout pre {
-            background: #0d0f0d;
-            border-color: rgba(243,241,232,0.08);
+            background: #171925;
+            border-color: rgba(218,225,255,0.10);
         }
 
         .app-layout .code-header {
-            background: #121411;
-            border-bottom-color: rgba(243,241,232,0.07);
+            background: #1d2030;
+            border-bottom-color: rgba(218,225,255,0.09);
         }
 
         .app-layout .input-area {
-            background: linear-gradient(0deg, rgba(17,19,18,0.98) 0%, rgba(17,19,18,0.78) 64%, transparent 100%);
+            background: linear-gradient(0deg, rgba(39,41,55,0.98) 0%, rgba(39,41,55,0.78) 64%, transparent 100%);
         }
 
         .app-layout .input-box {
-            background: rgba(24, 27, 25, 0.96);
-            border-color: rgba(243,241,232,0.12);
+            background: rgba(34, 36, 49, 0.94);
+            border-color: rgba(218,225,255,0.15);
             box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.035);
         }
 
         .app-layout .input-box:focus-within {
-            border-color: rgba(65,211,155,0.36);
-            box-shadow: var(--shadow), 0 0 0 3px rgba(65,211,155,0.06);
+            border-color: rgba(167,124,255,0.42);
+            box-shadow: var(--shadow), 0 0 0 3px rgba(167,124,255,0.08);
         }
 
         .app-layout .action-btn:hover,
         .app-layout .file-type-btn:hover {
-            background: rgba(65,211,155,0.08);
+            background: rgba(167,124,255,0.10);
             color: var(--accent);
-            border-color: rgba(65,211,155,0.24);
+            border-color: rgba(167,124,255,0.28);
         }
 
         .app-layout .send-btn {
-            background: #41d39b;
-            color: #0b120e;
-            box-shadow: 0 8px 20px rgba(0,0,0,0.24);
+            background: #f7f7f2;
+            color: #242632;
+            box-shadow: 0 8px 20px rgba(0,0,0,0.24), 0 0 22px rgba(247,247,242,0.12);
         }
 
         .app-layout .send-btn:hover {
-            background: #5ee2ae;
+            background: #ffffff;
             box-shadow: 0 10px 24px rgba(0,0,0,0.28);
         }
     </style>
@@ -3864,22 +3880,26 @@
 
         function modelOptionHtml(model, group, engine) {
             const engineMissing = engine && !engine.installed;
+            const isLocalEngine = engine && (engine.kind === 'local' || engine.kind === 'local-server');
+            const unsupported = engine?.supported === false;
             const keyMissing = model.available === false;
             const verifyFailed = engine?.kind === 'cloud' && model.verified === false;
             const verifyUnknown = engine?.kind === 'cloud' && model.verified == null;
             const supportsPull = model.pullable === true;
             const needsPull = supportsPull && engine.installed && model.pulled === false;
-            const isUnavailable = engineMissing || keyMissing || verifyFailed;
-            const badge = engineMissing ? '엔진 설치 필요'
-                : needsPull ? '클릭하여 다운로드'
+            const isUnavailable = unsupported || (!isLocalEngine && engineMissing) || keyMissing || verifyFailed;
+            const badge = unsupported ? '현재 환경 미지원'
+                : engineMissing && isLocalEngine ? '설치 후 자동 로드'
+                : engineMissing ? '엔진 설치 필요'
+                : needsPull ? '다운로드 후 자동 로드'
                 : keyMissing ? `필요: ${model.requires || 'API key'}`
                 : verifyFailed ? `실패: ${model.verify_reason || '검증 실패'}`
                 : verifyUnknown ? '실사용 테스트 필요'
                 : (model.tag || group);
-            const icon = isUnavailable ? 'ti-lock' : needsPull ? 'ti-cloud-download' : verifyUnknown ? 'ti-activity' : 'ti-switch-3';
-            const cls = needsPull ? ' needs-pull' : '';
-            const action = needsPull
-                ? `pullAndLoadModel('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`
+            const icon = isUnavailable ? 'ti-lock' : (engineMissing || needsPull) ? 'ti-cloud-download' : verifyUnknown ? 'ti-activity' : 'ti-switch-3';
+            const cls = (engineMissing || needsPull) && isLocalEngine ? ' needs-pull' : '';
+            const action = isLocalEngine
+                ? `prepareAndLoadModel('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`
                 : `loadSelectedModel('${encodeURIComponent(model.id)}', '${engine?.id || ''}')`;
             return `
                 <button class="model-option${cls}" ${isUnavailable ? 'disabled' : ''} onclick="${action}">
@@ -3939,9 +3959,11 @@
         }
 
         function engineCardHtml(engine) {
-            const state = engine.installed ? '설치됨' : '설치 필요';
+            const waitingForServer = engine.id === 'lmstudio' && engine.installed && engine.server_ready === false;
+            const unsupported = engine.supported === false;
+            const state = unsupported ? '미지원' : waitingForServer ? '서버 대기' : engine.installed ? '설치됨' : '설치 필요';
             const needsApiKey = engine.kind === 'cloud' && !!engine.requires;
-            const installButton = !needsApiKey && engine.installable && !engine.installed
+            const installButton = !unsupported && !needsApiKey && engine.installable && !engine.installed
                 ? `<button class="admin-action" onclick="installEngine('${engine.id}')"><i class="ti ti-download"></i> 설치</button>`
                 : '';
             const requirement = needsApiKey
@@ -3964,7 +3986,7 @@
                             ${engine.note ? `<span>${escapeHtml(engine.note)}</span>` : ''}
                         </div>
                         <div class="engine-actions">
-                            <span class="engine-state ${engine.installed ? 'ready' : ''}">${state}</span>
+                            <span class="engine-state ${engine.installed && !waitingForServer && !unsupported ? 'ready' : ''}">${state}</span>
                             ${installButton}
                         </div>
                     </div>
@@ -4109,19 +4131,21 @@
             }
         }
 
-        async function pullAndLoadModel(encodedId, engine = '') {
+        async function prepareAndLoadModel(encodedId, engine = '') {
             const modelId = decodeURIComponent(encodedId);
             const displayName = compactModelName(modelId);
-            document.getElementById('model-list').innerHTML = `<div class="sensitivity-preview"><b>${escapeHtml(displayName)}</b> 다운로드 중입니다... (네트워크 속도에 따라 수 분이 걸릴 수 있습니다)</div>`;
+            document.getElementById('model-list').innerHTML = `<div class="sensitivity-preview"><b>${escapeHtml(displayName)}</b> 준비 중입니다...<br>엔진 설치, 모델 다운로드, 서버 시작, 로드까지 자동으로 진행합니다. 첫 실행은 수 분이 걸릴 수 있습니다.</div>`;
             try {
-                const pullRes = await apiFetch('/engines/pull-model', {
+                const res = await apiFetch('/engines/prepare-model', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ model: modelId })
+                    body: JSON.stringify({ model: modelId, engine, user_email: currentUserEmail || null })
                 });
-                const pullData = await pullRes.json();
-                if (!pullRes.ok) throw new Error(pullData.detail || 'pull 실패');
-                await loadSelectedModel(encodedId, engine);
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.detail || '모델 준비에 실패했습니다.');
+                closeModelPanel();
+                await loadModelStatus();
+                addMessage('ai', `<b>${escapeHtml(compactModelName(data.current || modelId))}</b> 로드 되었습니다.`);
             } catch (e) {
                 document.getElementById('model-list').innerHTML = `
                     <div class="sensitivity-preview">${escapeHtml(e.message)}</div>
@@ -4130,6 +4154,10 @@
             }
         }
 
+        async function pullAndLoadModel(encodedId, engine = '') {
+            return prepareAndLoadModel(encodedId, engine);
+        }
+
         function fillVpcForm(config) {
             if (!config) return;
             document.getElementById('vpc-provider').value = config.provider || '';