ltcai 2.2.1 → 2.2.7

package/static/scripts/chat.js

@@ -14,17 +14,133 @@ const chatViewport = document.getElementById('chat-viewport');
         let telegramHistorySyncEnabled = false;
         let telegramHistorySyncInFlight = false;
 
-        // ── 멀티 LLM 파이프라인 상태 ──
-        let pipelineConfig = { planning: null, executing: null, reviewing: null };
-        let pipelineActive = false; // true이면 전송 시 pipeline 모드
-
-        function openPipelineModal() {
-            document.getElementById('pipeline-overlay').style.display = 'flex';
-            loadPipelineModelOptions();
-        }
-        function closePipelineModal() {
-            document.getElementById('pipeline-overlay').style.display = 'none';
-        }
+	        // ── 멀티 LLM 파이프라인 상태 ──
+	        let pipelineConfig = { planning: null, executing: null, reviewing: null };
+	        let pipelineActive = false; // true이면 전송 시 pipeline 모드
+	        const MODAL_LAYER_IDS = [
+	            'acct-modal-overlay',
+	            'mcp-modal-overlay',
+	            'workspace-modal-overlay',
+	            'mode-modal-overlay',
+	            'model-overlay',
+	            'pipeline-overlay',
+	            'admin-overlay',
+	            'vpc-overlay',
+	            'status-overlay',
+	            'file-create-overlay',
+	            'file-editor-overlay',
+	            'local-browser-overlay',
+	            'advanced-settings-overlay',
+	            'cu-overlay',
+	            'setup-overlay',
+	            'onboarding-overlay',
+	            'perm-overlay',
+	        ];
+	        const MODAL_LAYER_SET = new Set(MODAL_LAYER_IDS);
+	        let activeModalLayerId = null;
+	        let restoreModalLayerId = null;
+	        let bodyOverflowBeforeModal = '';
+
+	        function modalLayerEl(id) {
+	            return document.getElementById(id);
+	        }
+
+	        function isModalLayerVisible(el) {
+	            if (!el) return false;
+	            return el.classList.contains('open') || getComputedStyle(el).display !== 'none';
+	        }
+
+	        function refreshBodyModalLock() {
+	            const hasOpen = MODAL_LAYER_IDS.some(id => isModalLayerVisible(modalLayerEl(id)));
+	            if (hasOpen) {
+	                if (!document.body.classList.contains('modal-open')) {
+	                    bodyOverflowBeforeModal = document.body.style.overflow || '';
+	                }
+	                document.body.classList.add('modal-open');
+	                document.body.style.overflow = 'hidden';
+	            } else {
+	                document.body.classList.remove('modal-open');
+	                document.body.style.overflow = bodyOverflowBeforeModal;
+	                bodyOverflowBeforeModal = '';
+	            }
+	        }
+
+	        function hideModalElement(id) {
+	            const el = modalLayerEl(id);
+	            if (!el) return;
+	            el.classList.remove('open');
+	            el.style.display = 'none';
+	            el.setAttribute('aria-hidden', 'true');
+	            if ('inert' in el) el.inert = true;
+	        }
+
+	        function showModalLayer(id, options = {}) {
+	            const el = modalLayerEl(id);
+	            if (!el) return;
+	            const current = activeModalLayerId && activeModalLayerId !== id ? activeModalLayerId : null;
+	            MODAL_LAYER_IDS.forEach(otherId => {
+	                if (otherId !== id) hideModalElement(otherId);
+	            });
+	            if (options.restorePrevious && current) restoreModalLayerId = current;
+	            else if (!options.keepRestore) restoreModalLayerId = null;
+	            el.removeAttribute('aria-hidden');
+	            if ('inert' in el) el.inert = false;
+	            el.classList.add('open');
+	            el.style.display = 'flex';
+	            activeModalLayerId = id;
+	            refreshBodyModalLock();
+	        }
+
+	        function closeModalLayer(id, options = {}) {
+	            hideModalElement(id);
+	            if (activeModalLayerId === id) activeModalLayerId = null;
+	            const restoreId = restoreModalLayerId;
+	            if (!options.skipRestore) restoreModalLayerId = null;
+	            refreshBodyModalLock();
+	            if (!options.skipRestore && restoreId && restoreId !== id) {
+	                showModalLayer(restoreId, { keepRestore: true });
+	            }
+	        }
+
+	        function closeAllModalLayers() {
+	            MODAL_LAYER_IDS.forEach(hideModalElement);
+	            activeModalLayerId = null;
+	            restoreModalLayerId = null;
+	            refreshBodyModalLock();
+	        }
+
+	        function dismissModalLayer(id) {
+	            if (id === 'perm-overlay') {
+	                resolvePermission(false);
+	                return;
+	            }
+	            closeModalLayer(id);
+	        }
+
+	        document.addEventListener('keydown', (event) => {
+	            if (event.key !== 'Escape') return;
+	            const visible = [...MODAL_LAYER_IDS].reverse().find(id => isModalLayerVisible(modalLayerEl(id)));
+	            if (!visible) return;
+	            event.preventDefault();
+	            dismissModalLayer(visible);
+	        });
+
+	        document.addEventListener('click', (event) => {
+	            const target = event.target;
+	            if (target && target.id && MODAL_LAYER_SET.has(target.id)) dismissModalLayer(target.id);
+	        });
+
+	        window.addEventListener('pagehide', closeAllModalLayers);
+	        window.addEventListener('popstate', closeAllModalLayers);
+	        window.addEventListener('hashchange', closeAllModalLayers);
+
+	        function openPipelineModal() {
+	            showModalLayer('pipeline-overlay');
+	            loadPipelineModelOptions();
+	        }
+	        function closePipelineModal() {
+	            closeModalLayer('pipeline-overlay');
+	        }
         function resetPipeline() {
             pipelineConfig = { planning: null, executing: null, reviewing: null };
             pipelineActive = false;
@@ -731,12 +847,12 @@ const chatViewport = document.getElementById('chat-viewport');
             focusChatInput();
         }
 
-        function openAdvancedSettingsPanel() {
-            document.getElementById('advanced-settings-overlay')?.classList.add('open');
-        }
+	        function openAdvancedSettingsPanel() {
+	            showModalLayer('advanced-settings-overlay');
+	        }
 
-        function closeAdvancedSettingsPanel() {
-            document.getElementById('advanced-settings-overlay')?.classList.remove('open');
+	        function closeAdvancedSettingsPanel() {
+	            closeModalLayer('advanced-settings-overlay');
         }
 
         function updateWorkspaceModeUi() {
@@ -778,19 +894,19 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         function selectWorkspace(kind) {
-            setWorkspacePreference(kind);
-            document.getElementById('workspace-modal-overlay')?.classList.remove('open');
-            updateWorkspaceModeUi();
-            openModeSelector();
-        }
+	            setWorkspacePreference(kind);
+	            closeModalLayer('workspace-modal-overlay');
+	            updateWorkspaceModeUi();
+	            openModeSelector();
+	        }
 
-        function openModeSelector() {
-            updateWorkspaceModeUi();
-            document.getElementById('mode-modal-overlay')?.classList.add('open');
-        }
+	        function openModeSelector() {
+	            updateWorkspaceModeUi();
+	            showModalLayer('mode-modal-overlay');
+	        }
 
-        function closeModeSelector() {
-            document.getElementById('mode-modal-overlay')?.classList.remove('open');
+	        function closeModeSelector() {
+	            closeModalLayer('mode-modal-overlay');
         }
 
         function selectMode(mode) {
@@ -829,12 +945,12 @@ const chatViewport = document.getElementById('chat-viewport');
         async function startOnboardingIfNeeded(force = false) {
             updateWorkspaceModeUi();
             const forceAfterLogin = consumeSetupAfterLoginFlag();
-            const hasLoadedModel = await modelLoadedForChat();
-            if (!force && !forceAfterLogin && onboardingComplete() && hasLoadedModel) {
-                document.getElementById('onboarding-overlay')?.classList.remove('open');
-                return;
-            }
-            document.getElementById('onboarding-overlay')?.classList.add('open');
+	            const hasLoadedModel = await modelLoadedForChat();
+	            if (!force && !forceAfterLogin && onboardingComplete() && hasLoadedModel) {
+	                closeModalLayer('onboarding-overlay');
+	                return;
+	            }
+	            showModalLayer('onboarding-overlay');
             if (forceAfterLogin || !hasLoadedModel) {
                 renderPcAnalysis();
             } else {
@@ -1051,7 +1167,7 @@ const chatViewport = document.getElementById('chat-viewport');
                 // Top pick callout
                 const top = rec.top_pick;
                 const topHtml = top ? `
-                    <div style="border:1px solid #16a34a;background:#f0fdf4;border-radius:10px;padding:10px 12px;margin:8px 0">
+                    <div style="border:1px solid var(--success);background:var(--accent-soft);color:var(--text);border-radius:10px;padding:10px 12px;margin:8px 0">
                         <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>
@@ -1362,12 +1478,12 @@ const chatViewport = document.getElementById('chat-viewport');
             `);
         }
 
-        function finishOnboarding(mode) {
-            selectMode(mode);
-            setOnboardingComplete();
-            document.getElementById('onboarding-overlay')?.classList.remove('open');
-            showChat();
-        }
+	        function finishOnboarding(mode) {
+	            selectMode(mode);
+	            setOnboardingComplete();
+	            closeModalLayer('onboarding-overlay');
+	            showChat();
+	        }
 
         function switchAcctTab(tab) {
             ['profile', 'password'].forEach(t => {
@@ -1390,10 +1506,10 @@ const chatViewport = document.getElementById('chat-viewport');
                     document.getElementById('profile-nickname').value = data.nickname || '';
                 }
             } catch {}
-            document.getElementById('acct-modal-overlay').classList.add('open');
+            showModalLayer('acct-modal-overlay');
         }
         function closeAcctModal() {
-            document.getElementById('acct-modal-overlay').classList.remove('open');
+            closeModalLayer('acct-modal-overlay');
         }
         document.addEventListener('click', (e) => {
             const overlay = document.getElementById('acct-modal-overlay');
@@ -1707,7 +1823,7 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         async function openModelPanel() {
-            document.getElementById('model-overlay').style.display = 'flex';
+            showModalLayer('model-overlay');
             document.getElementById('model-list').innerHTML = '<div class="sensitivity-preview">실행 엔진과 모델 목록을 불러오는 중입니다...</div>';
             try {
                 const res = await apiFetch('/engines');
@@ -1742,7 +1858,7 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         function closeModelPanel() {
-            document.getElementById('model-overlay').style.display = 'none';
+            closeModalLayer('model-overlay');
         }
 
         async function installEngine(engineId) {
@@ -2194,7 +2310,9 @@ const chatViewport = document.getElementById('chat-viewport');
             if (!t) {
                 t = document.createElement('div');
                 t.id = 'ltcai-toast';
-                t.style.cssText = 'position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.96);color:#14162c;border:1px solid rgba(111,66,232,0.16);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:600;z-index:9999;box-shadow:0 8px 24px rgba(88,72,150,0.16);pointer-events:none;transition:opacity .2s;';
+                // Styling lives in static/css/responsive.css (#ltcai-toast) so the
+                // toast is token-driven and adapts to light/dark. Only the opacity
+                // animation state is toggled inline below.
                 document.body.appendChild(t);
             }
             t.textContent = msg;
@@ -2204,7 +2322,7 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         function closeAdminPanel() {
-            document.getElementById('admin-overlay').style.display = 'none';
+            closeModalLayer('admin-overlay');
         }
 
         // ── VPC Panel ────────────────────────────────────────
@@ -2235,7 +2353,7 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         async function openVpcPanel() {
-            document.getElementById('vpc-overlay').style.display = 'flex';
+            showModalLayer('vpc-overlay');
             try {
                 const res = await apiFetch('/vpc/status');
                 if (res.ok) fillVpcPanelForm(await res.json());
@@ -2243,7 +2361,7 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         function closeVpcPanel() {
-            document.getElementById('vpc-overlay').style.display = 'none';
+            closeModalLayer('vpc-overlay');
         }
 
         function selectVpcProvider(name, btn) {
@@ -2293,7 +2411,7 @@ const chatViewport = document.getElementById('chat-viewport');
 
         // ── Status Summary Panel ─────────────────────────────
         async function openStatusPanel() {
-            document.getElementById('status-overlay').style.display = 'flex';
+            showModalLayer('status-overlay');
             document.getElementById('status-panel-body').innerHTML = '<div class="sensitivity-preview">상태를 불러오는 중...</div>';
             try {
                 const mode = getCurrentMode();
@@ -2362,7 +2480,7 @@ const chatViewport = document.getElementById('chat-viewport');
         }
 
         function closeStatusPanel() {
-            document.getElementById('status-overlay').style.display = 'none';
+            closeModalLayer('status-overlay');
         }
 
         // ── 파일 생성 패널 ────────────────────────────────────
@@ -2415,11 +2533,11 @@ const chatViewport = document.getElementById('chat-viewport');
                 </div>`;
             }
             document.getElementById('file-create-form').innerHTML = formHtml;
-            document.getElementById('file-create-overlay').style.display = 'flex';
+            showModalLayer('file-create-overlay');
         }
 
         function closeFileCreate() {
-            document.getElementById('file-create-overlay').style.display = 'none';
+            closeModalLayer('file-create-overlay');
         }
 
         function _formatBytes(b) {
@@ -2507,24 +2625,24 @@ const chatViewport = document.getElementById('chat-viewport');
                 document.getElementById('perm-title').textContent = '파일 접근 요청';
                 document.getElementById('perm-path').textContent = path;
                 document.getElementById('perm-desc').textContent = `AI가 아래 경로에 대한 "${actionLabel}" 작업을 요청합니다. 허용하시겠습니까?`;
-                document.getElementById('perm-overlay').style.display = 'flex';
+                showModalLayer('perm-overlay', { restorePrevious: true });
             });
         }
 
         function resolvePermission(allowed) {
-            document.getElementById('perm-overlay').style.display = 'none';
+            closeModalLayer('perm-overlay');
             if (_permResolve) { _permResolve(allowed); _permResolve = null; }
         }
 
         let _localCurrentPath = '~';
 
         async function openLocalBrowser() {
-            document.getElementById('local-browser-overlay').style.display = 'flex';
+            showModalLayer('local-browser-overlay');
             await localNav(_localCurrentPath || '~');
         }
 
         function closeLocalBrowser() {
-            document.getElementById('local-browser-overlay').style.display = 'none';
+            closeModalLayer('local-browser-overlay');
         }
 
         async function localNav(path) {
@@ -2710,8 +2828,8 @@ const chatViewport = document.getElementById('chat-viewport');
                     document.getElementById('editor-filepath').textContent = path;
                     document.getElementById('file-editor-content').value = text;
                     document.getElementById('editor-status').textContent = '';
-                    document.getElementById('local-browser-overlay').style.display = 'none';
-                    document.getElementById('file-editor-overlay').style.display = 'flex';
+                    closeModalLayer('local-browser-overlay', { skipRestore: true });
+                    showModalLayer('file-editor-overlay');
                 } catch(e) {
                     resultEl.innerHTML = `
                         <div class="sensitivity-preview">⚠️ 문서 읽기 실패: ${escapeHtml(e.message)}<br>
@@ -2761,15 +2879,15 @@ const chatViewport = document.getElementById('chat-viewport');
                 document.getElementById('editor-filepath').textContent = path;
                 document.getElementById('file-editor-content').value = content;
                 document.getElementById('editor-status').textContent = '';
-                document.getElementById('local-browser-overlay').style.display = 'none';
-                document.getElementById('file-editor-overlay').style.display = 'flex';
+                closeModalLayer('local-browser-overlay', { skipRestore: true });
+                showModalLayer('file-editor-overlay');
             } catch(e) {
                 resultEl.innerHTML = `<div class="sensitivity-preview">${escapeHtml(e.message)}</div>`;
             }
         }
 
         function closeFileEditor() {
-            document.getElementById('file-editor-overlay').style.display = 'none';
+            closeModalLayer('file-editor-overlay');
         }
 
         async function saveLocalFile() {
@@ -2860,8 +2978,8 @@ const chatViewport = document.getElementById('chat-viewport');
                 document.getElementById('file-editor-content').value = text;
                 document.getElementById('editor-status').textContent = '⚠️ 이미지/표 등 비텍스트 요소는 표시되지 않을 수 있습니다';
                 document.getElementById('editor-status').style.color = 'var(--accent-2)';
-                document.getElementById('local-browser-overlay').style.display = 'none';
-                document.getElementById('file-editor-overlay').style.display = 'flex';
+                closeModalLayer('local-browser-overlay', { skipRestore: true });
+                showModalLayer('file-editor-overlay');
             } catch(e) {
                 resultEl.innerHTML = `<div class="sensitivity-preview">텍스트 추출 실패: ${escapeHtml(e.message)}</div>`;
             }
@@ -4186,12 +4304,12 @@ const chatViewport = document.getElementById('chat-viewport');
         let cuAgentAbort = null;
 
         async function openCuPanel() {
-            document.getElementById('cu-overlay').style.display = 'flex';
+            showModalLayer('cu-overlay');
             await cuRefreshStatus();
         }
 
         function closeCuPanel() {
-            document.getElementById('cu-overlay').style.display = 'none';
+            closeModalLayer('cu-overlay');
         }
 
         async function cuRefreshStatus() {
@@ -4358,12 +4476,12 @@ const chatViewport = document.getElementById('chat-viewport');
     let _wizItems = [];   // items selected by user in step 2
 
     function openSetupWizard() {
-        document.getElementById('setup-overlay').classList.add('open');
+        showModalLayer('setup-overlay');
         _runStep1();
     }
 
     function closeSetupWizard() {
-        document.getElementById('setup-overlay').classList.remove('open');
+        closeModalLayer('setup-overlay');
     }
 
     // Prevent click-through on overlay background
@@ -4678,12 +4796,12 @@ const chatViewport = document.getElementById('chat-viewport');
     let _mcpCurrentTab = 'registry';
 
     async function openMcpModal() {
-        document.getElementById('mcp-modal-overlay').classList.add('open');
+        showModalLayer('mcp-modal-overlay');
         await renderMcpModal(_mcpCurrentTab);
     }
 
     function closeMcpModal() {
-        document.getElementById('mcp-modal-overlay').classList.remove('open');
+        closeModalLayer('mcp-modal-overlay');
     }
 
     function switchMcpTab(tab, btn) {

package/static/scripts/ux.js

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Lattice AI — Shared UX runtime (v2.2.1)
+ * Lattice AI — Shared UX runtime (v2.2.2)
  *
  * 모든 페이지에서 로드된다. 페이지마다 일부 요소가 없을 수 있으므로 전부
  * 방어적으로(존재 확인 후) 동작한다. 기존 chat.js / graph.js / admin.js 의

package/static/sw.js

@@ -1,12 +1,14 @@
 // Lattice AI Service Worker — enables PWA install on Android/iOS
 // Strategy: network-first for API, cache-first for static assets.
-const CACHE = "ltcai-v110";
+const CACHE = "ltcai-v226";
 const STATIC = [
   "/",
   "/workspace",
-  "/static/lattice-reference.css",
-  "/static/workspace.css",
   "/static/css/tokens.css",
+  "/static/css/reference/base.css",
+  "/static/css/reference/chat.css",
+  "/static/css/responsive.css",
+  "/static/workspace.css",
   "/static/scripts/chat.js",
   "/static/scripts/admin.js",
   "/static/scripts/graph.js",

package/static/workflows.html

@@ -4,10 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Workflow Designer — Lattice AI</title>
-  <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" />
+  <script src="/static/scripts/ux.js?v=2.2.7"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.7" />
+  <link rel="stylesheet" href="/static/platform.css?v=2.2.7" />
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.7" />
 </head>
 <body>
   <main>

package/static/workspace.css

@@ -5,6 +5,7 @@
   --bg: var(--lt-bg, #f6f7f9);
   --surface: var(--lt-surface, #ffffff);
   --surface-2: var(--lt-surface-2, #f0f4f8);
+  --input: var(--lt-input, var(--surface));
   --ink: var(--lt-ink, #101828);
   --muted: var(--lt-muted, #667085);
   --line: var(--lt-line, #d9e0e8);
@@ -199,8 +200,8 @@ h2 {
 }
 
 .secondary-action {
-  background: #e6efff;
-  color: #174ea6;
+  background: var(--accent-soft, #e6efff);
+  color: var(--blue);
   padding: 0 12px;
   font-weight: 700;
 }
@@ -317,7 +318,7 @@ h2 {
 
 .list-item {
   border: 1px solid var(--line);
-  background: #fbfcfe;
+  background: var(--surface-2);
   border-radius: 8px;
   padding: 12px;
   display: grid;
@@ -354,8 +355,9 @@ h2 {
 .tag {
   font-size: 11px;
   font-weight: 800;
-  color: #344054;
-  background: #edf2f7;
+  color: var(--ink);
+  background: var(--surface-2);
+  border: 1px solid var(--line);
   border-radius: 999px;
   padding: 3px 8px;
 }
@@ -373,7 +375,7 @@ input, select, textarea {
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
-  background: #fff;
+  background: var(--input);
   min-height: 38px;
   padding: 9px 10px;
 }
@@ -445,6 +447,11 @@ textarea {
   position: absolute;
   opacity: 0;
   pointer-events: none;
+  /* 절대배치 + width:auto 인 체크박스는 컨테이닝 블록(뷰포트) 폭만큼 늘어나
+   * 가로 오버플로우를 만든다. 1px 박스로 가둬 레이아웃에 영향 없게 한다. */
+  width: 1px;
+  height: 1px;
+  margin: 0;
 }
 
 .toggle-row span {
@@ -463,7 +470,7 @@ textarea {
   top: 3px;
   left: 3px;
   border-radius: 50%;
-  background: white;
+  background: var(--surface);
   transition: transform 160ms ease;
 }
 
@@ -592,10 +599,10 @@ textarea {
 .quickswitch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
 .switch-chip {
   display: inline-flex; align-items: center; gap: 6px;
-  border: 1px solid var(--line); background: #fbfcfe; color: var(--ink);
+  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
   border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer;
 }
-.switch-chip.active { border-color: var(--blue); background: #eef2ff; color: var(--blue); }
+.switch-chip.active { border-color: var(--blue); background: var(--accent-soft, #eef2ff); color: var(--blue); }
 
 /* Entity explorer */
 .entity-card { text-align: left; cursor: pointer; width: 100%; font: inherit; }
@@ -610,10 +617,10 @@ textarea {
 /* Skill marketplace tabs */
 .tab-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
 .tab {
-  border: 1px solid var(--line); background: #fbfcfe; color: var(--muted);
+  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
   border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 13px; cursor: pointer;
 }
-.tab.active { border-color: var(--blue); background: #eef2ff; color: var(--blue); }
+.tab.active { border-color: var(--blue); background: var(--accent-soft, #eef2ff); color: var(--blue); }
 .tab-count {
   display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px;
   border-radius: 999px; background: var(--red); color: #fff; font-size: 11px;
@@ -628,7 +635,7 @@ textarea {
 }
 .capability-card {
   display: flex; align-items: center; gap: 10px;
-  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fbfcfe;
+  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--surface-2);
 }
 .capability-card i { font-size: 18px; }
 .capability-card.off i { color: var(--muted); }
@@ -645,7 +652,7 @@ textarea {
   min-width: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: #fbfcfe;
+  background: var(--surface-2);
   padding: 14px;
   display: grid;
   gap: 7px;
@@ -686,7 +693,7 @@ textarea {
 .skill-progress-track {
   height: 7px;
   border-radius: 999px;
-  background: #e5eaf2;
+  background: var(--surface-3, var(--surface-2));
   overflow: hidden;
 }
 .skill-progress-track span {
@@ -720,3 +727,57 @@ textarea {
   .small-action { min-height: 44px; }
   .workspace-rail a { min-height: 44px; display: flex; align-items: center; }
 }
+
+:root[data-lt-theme="dark"] main {
+  background:
+    radial-gradient(circle at 80% 14%, rgba(167, 139, 250, 0.12), transparent 30%),
+    linear-gradient(180deg, var(--bg) 0%, #10122c 100%);
+}
+
+:root[data-lt-theme="dark"] .workspace-band,
+:root[data-lt-theme="dark"] .workspace-panel,
+:root[data-lt-theme="dark"] .metric-card {
+  background: rgba(22, 22, 58, 0.92);
+  border-color: rgba(160, 170, 230, 0.22);
+  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
+}
+
+:root[data-lt-theme="dark"] input,
+:root[data-lt-theme="dark"] select,
+:root[data-lt-theme="dark"] textarea,
+:root[data-lt-theme="dark"] .list-item,
+:root[data-lt-theme="dark"] .health-card,
+:root[data-lt-theme="dark"] .capability-card,
+:root[data-lt-theme="dark"] .switch-chip,
+:root[data-lt-theme="dark"] .tab,
+:root[data-lt-theme="dark"] .tag {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(160, 170, 230, 0.22);
+  color: var(--ink);
+}
+
+:root[data-lt-theme="dark"] input::placeholder,
+:root[data-lt-theme="dark"] textarea::placeholder {
+  color: rgba(226, 232, 255, 0.48);
+}
+
+:root[data-lt-theme="dark"] .status-pill,
+:root[data-lt-theme="dark"] .workspace-role-pill {
+  background: rgba(255, 255, 255, 0.10);
+  color: var(--blue);
+}
+
+:root[data-lt-theme="dark"] .status-complete {
+  background: rgba(52, 211, 153, 0.16);
+  color: #86efac;
+}
+
+:root[data-lt-theme="dark"] .status-running {
+  background: rgba(251, 191, 36, 0.16);
+  color: #fbbf24;
+}
+
+:root[data-lt-theme="dark"] .status-failed {
+  background: rgba(244, 113, 113, 0.16);
+  color: #fca5a5;
+}