ltcai 0.1.25 → 0.1.27

package/static/chat.html

@@ -534,6 +534,44 @@
         }
         .mcp-install-btn:hover { background: rgba(34,211,160,0.15); }
         .mcp-install-btn.installed { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--faint); }
+        /* MCP 소스 배지 */
+        .mcp-source-badge {
+            font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
+            text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0;
+        }
+        .mcp-source-badge.claude-code { background: rgba(100,180,255,0.12); color: #64b4ff; border: 1px solid rgba(100,180,255,0.2); }
+        .mcp-source-badge.custom { background: rgba(255,180,60,0.12); color: #ffb43c; border: 1px solid rgba(255,180,60,0.2); }
+        /* MCP 탭 */
+        .mcp-tabs { display: flex; gap: 4px; padding: 12px 20px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
+        .mcp-tab {
+            padding: 7px 14px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 600;
+            color: var(--faint); cursor: pointer; border: none; background: none;
+            border-bottom: 2px solid transparent; transition: all .15s;
+        }
+        .mcp-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(34,211,160,0.06); }
+        .mcp-tab:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.04); }
+        /* Custom MCP 추가 폼 */
+        .mcp-add-form { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
+        .mcp-add-form label { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
+        .mcp-add-form input, .mcp-add-form textarea, .mcp-add-form select {
+            width: 100%; padding: 8px 11px; border-radius: 8px; font-size: 13px;
+            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
+            color: var(--text); outline: none; transition: border .15s; box-sizing: border-box;
+        }
+        .mcp-add-form input:focus, .mcp-add-form textarea:focus { border-color: rgba(34,211,160,0.4); }
+        .mcp-add-form .field-hint { font-size: 10.5px; color: var(--faint); margin-top: -6px; }
+        .mcp-submit-btn {
+            padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 700;
+            background: rgba(34,211,160,0.12); border: 1px solid rgba(34,211,160,0.3);
+            color: var(--accent); cursor: pointer; transition: all .15s; align-self: flex-end;
+        }
+        .mcp-submit-btn:hover { background: rgba(34,211,160,0.22); }
+        .mcp-delete-btn {
+            padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+            background: rgba(255,80,80,0.08); border: 1px solid rgba(255,80,80,0.2);
+            color: #ff6b6b; cursor: pointer; transition: all .15s; flex-shrink: 0;
+        }
+        .mcp-delete-btn:hover { background: rgba(255,80,80,0.18); }
         .acct-modal {
             background: var(--surface, #1e293b);
             border: 1px solid rgba(255,255,255,0.08);
@@ -3028,10 +3066,331 @@
             background: #ffffff;
             box-shadow: 0 10px 24px rgba(0,0,0,0.28);
         }
+
+        /* PPT reference skin: light workspace, indigo navigation, modal-first flow. */
+        :root {
+            --bg: #f8f6ff;
+            --surface: #ffffff;
+            --surface-2: #f3f0ff;
+            --surface-3: #ece7ff;
+            --accent: #6f4bf6;
+            --accent-2: #ffb84d;
+            --accent-3: #7868ff;
+            --accent-soft: rgba(111,75,246,0.10);
+            --danger: #ef4444;
+            --text: #24223d;
+            --muted: #625f7c;
+            --faint: #9690b2;
+            --border: rgba(111,75,246,0.13);
+            --border-strong: rgba(111,75,246,0.24);
+            --shadow: 0 24px 68px rgba(86,70,160,0.16);
+            --shadow-sm: 0 10px 28px rgba(86,70,160,0.10);
+        }
+        body::before {
+            background:
+                radial-gradient(circle at 76% 14%, rgba(111,75,246,0.12), transparent 30%),
+                radial-gradient(circle at 8% 80%, rgba(196,181,253,0.26), transparent 35%),
+                linear-gradient(180deg, #fbfaff 0%, #f6f2ff 100%);
+        }
+        .bg-grid {
+            opacity: 0.28;
+            background-image:
+                radial-gradient(circle, rgba(111,75,246,0.28) 1px, transparent 1.8px),
+                linear-gradient(rgba(111,75,246,0.06) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(111,75,246,0.05) 1px, transparent 1px);
+            background-size: 84px 84px, 48px 48px, 48px 48px;
+            mask-image: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.04));
+        }
+        .app-layout::after {
+            background:
+                linear-gradient(115deg, transparent 0 40%, rgba(111,75,246,0.08) 40.15%, transparent 40.4% 100%),
+                radial-gradient(ellipse at 5% 88%, rgba(111,75,246,0.16), transparent 35%);
+        }
+        .app-layout .sidebar {
+            background: rgba(255,255,255,0.88);
+            border-right-color: rgba(111,75,246,0.12);
+            box-shadow: 12px 0 46px rgba(86,70,160,0.08);
+        }
+        .app-layout .sidebar-header,
+        .app-layout .user-strip,
+        .app-layout .sidebar-footer,
+        .app-layout .sidebar-primary-actions,
+        .app-layout .chat-header {
+            border-color: rgba(111,75,246,0.10);
+        }
+        .app-layout .logo-box,
+        .app-layout .user-avatar {
+            background: linear-gradient(135deg, #6f4bf6, #9b87ff);
+            color: #fff;
+            box-shadow: 0 14px 28px rgba(111,75,246,0.22);
+        }
+        .app-layout .brand-title,
+        .app-layout .empty-state h1 {
+            color: #24223d;
+        }
+        .app-layout .brand-subtitle,
+        .app-layout .user-strip,
+        .app-layout .history-item,
+        .app-layout .logout-btn {
+            color: var(--muted);
+        }
+        .app-layout .sidebar-search input,
+        .app-layout .mcp-add-form input,
+        .app-layout .mcp-add-form textarea,
+        .app-layout .mcp-add-form select,
+        .app-layout .pw-field input {
+            background: #fbfaff;
+            border-color: rgba(111,75,246,0.12);
+            color: var(--text);
+        }
+        .app-layout .new-chat-btn,
+        .app-layout .status-btn,
+        .app-layout .setup-wizard-sidebar-btn,
+        .app-layout .admin-btn {
+            background: #fff;
+            border-color: rgba(111,75,246,0.13);
+            color: var(--text);
+            box-shadow: 0 8px 22px rgba(86,70,160,0.06);
+        }
+        .app-layout .new-chat-btn:hover,
+        .app-layout .status-btn:hover,
+        .app-layout .setup-wizard-sidebar-btn:hover,
+        .app-layout .admin-btn:hover,
+        .app-layout .history-item:hover,
+        .app-layout .history-item.active {
+            background: #f1ecff;
+            border-color: rgba(111,75,246,0.25);
+            color: var(--accent);
+        }
+        .app-layout .chat-header {
+            background: rgba(255,255,255,0.78);
+            box-shadow: 0 8px 28px rgba(86,70,160,0.08);
+        }
+        .app-layout .model-badge,
+        .app-layout .status-pill,
+        .app-layout .logout-btn {
+            background: rgba(255,255,255,0.78);
+            border-color: rgba(111,75,246,0.14);
+            color: var(--muted);
+        }
+        .app-layout .model-badge {
+            color: var(--text);
+        }
+        .app-layout .status-dot {
+            background: var(--accent);
+            box-shadow: 0 0 0 4px rgba(111,75,246,0.10), 0 0 18px rgba(111,75,246,0.30);
+        }
+        .app-layout .ops-card,
+        .app-layout .empty-chip,
+        .app-layout .ai .bubble,
+        .app-layout .acct-modal,
+        .app-layout .mcp-modal {
+            background: rgba(255,255,255,0.86);
+            border-color: rgba(111,75,246,0.13);
+            box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.9);
+        }
+        .app-layout .ops-card.primary {
+            background: linear-gradient(135deg, rgba(111,75,246,0.12), rgba(255,255,255,0.92) 62%);
+            border-color: rgba(111,75,246,0.23);
+        }
+        .app-layout .ops-card.interactive:hover,
+        .app-layout .empty-chip:hover {
+            background: #f3efff;
+            border-color: rgba(111,75,246,0.30);
+            box-shadow: 0 18px 42px rgba(86,70,160,0.16);
+        }
+        .app-layout .ops-card.primary .ops-icon,
+        .app-layout .ops-card:not(.primary) .ops-icon,
+        .app-layout .empty-state > div[style] {
+            background: linear-gradient(135deg, rgba(111,75,246,0.14), rgba(155,135,255,0.12)) !important;
+            border-color: rgba(111,75,246,0.18) !important;
+            color: var(--accent) !important;
+        }
+        .app-layout .messages-viewport {
+            background: transparent;
+        }
+        .app-layout .user .bubble {
+            background: linear-gradient(135deg, #6f4bf6, #7366ff);
+            color: #fff;
+            border-color: rgba(111,75,246,0.28);
+            box-shadow: 0 14px 32px rgba(111,75,246,0.22);
+        }
+        .app-layout .input-area {
+            background: linear-gradient(0deg, rgba(248,246,255,0.98) 0%, rgba(248,246,255,0.76) 64%, transparent 100%);
+        }
+        .app-layout .input-box {
+            background: rgba(255,255,255,0.92);
+            border-color: rgba(111,75,246,0.16);
+            box-shadow: 0 18px 54px rgba(86,70,160,0.15);
+        }
+        .app-layout textarea {
+            color: var(--text);
+        }
+        .app-layout .send-btn {
+            background: linear-gradient(135deg, #6f4bf6, #796cff);
+            color: #fff;
+            box-shadow: 0 14px 30px rgba(111,75,246,0.24);
+        }
+        .workspace-modal-overlay,
+        .mode-modal-overlay {
+            display: none;
+            position: fixed;
+            inset: 0;
+            z-index: 1400;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+            background: rgba(25, 21, 47, 0.24);
+            backdrop-filter: blur(14px);
+        }
+        .workspace-modal-overlay.open,
+        .mode-modal-overlay.open {
+            display: flex;
+        }
+        .workspace-modal,
+        .mode-modal {
+            width: min(620px, 100%);
+            border-radius: 20px;
+            background:
+                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,248,255,0.94));
+            border: 1px solid rgba(111,75,246,0.16);
+            box-shadow: 0 30px 90px rgba(60,45,130,0.24);
+            padding: 30px;
+            color: var(--text);
+            position: relative;
+        }
+        .mode-modal {
+            width: min(520px, 100%);
+            background:
+                radial-gradient(circle at 18% 8%, rgba(111,75,246,0.28), transparent 32%),
+                linear-gradient(180deg, #211b3b, #151329);
+            color: #fff;
+            border-color: rgba(255,255,255,0.12);
+        }
+        .modal-kicker {
+            color: var(--accent);
+            font-size: 11px;
+            font-weight: 800;
+            letter-spacing: .08em;
+            text-transform: uppercase;
+            text-align: center;
+            margin-bottom: 8px;
+        }
+        .mode-modal .modal-kicker { color: #b9aaff; }
+        .workspace-modal h2,
+        .mode-modal h2 {
+            text-align: center;
+            font-size: 24px;
+            margin-bottom: 7px;
+        }
+        .workspace-modal p,
+        .mode-modal p {
+            text-align: center;
+            color: var(--muted);
+            font-size: 13px;
+            line-height: 1.6;
+            margin-bottom: 22px;
+        }
+        .mode-modal p { color: #b8b2d4; }
+        .workspace-options,
+        .mode-options {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 14px;
+        }
+        .workspace-card,
+        .mode-card {
+            border-radius: 16px;
+            border: 1px solid rgba(111,75,246,0.14);
+            background: #fff;
+            padding: 22px 18px;
+            cursor: pointer;
+            text-align: center;
+            transition: transform .18s, box-shadow .18s, border-color .18s;
+        }
+        .workspace-card:hover,
+        .workspace-card.selected,
+        .mode-card:hover,
+        .mode-card.selected {
+            transform: translateY(-3px);
+            border-color: rgba(111,75,246,0.42);
+            box-shadow: 0 18px 44px rgba(86,70,160,0.18);
+        }
+        .mode-card {
+            background: rgba(255,255,255,0.08);
+            border-color: rgba(255,255,255,0.12);
+            color: #fff;
+            position: relative;
+        }
+        .mode-card.selected::after {
+            content: '✓';
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #7b6dff;
+            display: grid;
+            place-items: center;
+            font-size: 12px;
+        }
+        .workspace-icon,
+        .mode-icon {
+            width: 58px;
+            height: 58px;
+            margin: 0 auto 14px;
+            border-radius: 20px;
+            display: grid;
+            place-items: center;
+            color: #fff;
+            font-size: 26px;
+            background: linear-gradient(135deg, #6f4bf6, #9b87ff);
+            box-shadow: 0 14px 30px rgba(111,75,246,0.24);
+        }
+        .workspace-card h3,
+        .mode-card h3 {
+            font-size: 15px;
+            margin-bottom: 7px;
+        }
+        .workspace-card span,
+        .mode-card span {
+            display: block;
+            color: var(--muted);
+            font-size: 12px;
+            line-height: 1.45;
+        }
+        .mode-card span { color: #c9c3e2; }
+        .modal-footnote {
+            color: var(--faint);
+            font-size: 12px;
+            text-align: center;
+            margin-top: 18px;
+        }
+        .mode-close {
+            position: absolute;
+            top: 14px;
+            right: 14px;
+            border: 0;
+            background: rgba(255,255,255,0.08);
+            color: #c9c3e2;
+            border-radius: 10px;
+            width: 32px;
+            height: 32px;
+            cursor: pointer;
+        }
+        @media (max-width: 768px) {
+            .app-layout .sidebar { background: #fff; }
+            .workspace-options,
+            .mode-options { grid-template-columns: 1fr; }
+            .workspace-modal,
+            .mode-modal { padding: 24px 18px; }
+        }
     </style>
+    <link rel="stylesheet" href="/static/lattice-reference.css">
 </head>
 
-<body>
+<body class="lattice-ref-chat">
     <!-- 배경 장식 -->
     <div class="bg-shapes">
         <div class="bg-orb bg-orb-1"></div>
@@ -3060,6 +3419,13 @@
                     <div style="font-size:10.5px;color:var(--faint)">Local Workspace</div>
                 </div>
             </div>
+            <nav class="reference-side-nav" aria-label="Lattice AI navigation">
+                <button class="reference-nav-item active"><i class="ti ti-home"></i><span>홈</span></button>
+                <button class="reference-nav-item" onclick="startNewChat()"><i class="ti ti-message-circle"></i><span>채팅</span></button>
+                <button class="reference-nav-item" onclick="openDataGraph()"><i class="ti ti-chart-dots-3"></i><span>지식 그래프</span></button>
+                <button class="reference-nav-item" onclick="openLocalBrowser()"><i class="ti ti-file"></i><span>파일</span></button>
+                <button class="reference-nav-item" onclick="openSetupWizard()"><i class="ti ti-settings"></i><span>설정</span></button>
+            </nav>
             <div class="sidebar-search">
                 <div class="sidebar-search-wrap">
                     <i class="ti ti-search"></i>
@@ -3095,6 +3461,7 @@
                     <div id="vpc-header-pill" class="status-pill hide-mobile"><i class="ti ti-network"></i> VPC 대기</div>
                 </div>
                 <div class="header-pills">
+                    <button class="status-pill" onclick="openModeSelector()" id="mode-pill"><i class="ti ti-layout-grid"></i> 기본 모드</button>
                     <div class="status-pill"><i class="ti ti-device-desktop"></i> Local</div>
                     <div class="lang-picker" id="header-lang-picker">
                         <button class="logout-btn" id="lang-btn" onclick="toggleLangMenu('header-lang-picker')" title="Language">🌐</button>
@@ -3160,6 +3527,11 @@
                         <h3><i class="ti ti-plug-connected"></i> MCP 서버 관리</h3>
                         <button class="mcp-modal-close" onclick="closeMcpModal()"><i class="ti ti-x"></i></button>
                     </div>
+                    <div class="mcp-tabs" id="mcp-tabs">
+                        <button class="mcp-tab active" onclick="switchMcpTab('registry',this)">🗂 레지스트리</button>
+                        <button class="mcp-tab" onclick="switchMcpTab('claude-code',this)">🤖 Claude Code</button>
+                        <button class="mcp-tab" onclick="switchMcpTab('custom',this)">➕ 직접 추가</button>
+                    </div>
                     <div class="mcp-modal-body" id="mcp-modal-body">
                         <div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">로딩 중...</div>
                     </div>
@@ -3203,14 +3575,56 @@
 
             <div class="messages-viewport" id="chat-viewport">
                 <div class="empty-state" id="empty-state">
-                    <div style="width:64px;height:64px;background:linear-gradient(135deg,rgba(34,211,160,0.18),rgba(129,140,248,0.12));border:1px solid rgba(34,211,160,0.18);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--accent);margin:0 auto 18px;box-shadow:0 0 32px rgba(34,211,160,0.14)"><i class="ti ti-sparkles"></i></div>
-                    <h1 data-i18n="empty_title">무엇을 만들까요?</h1>
-                    <p data-i18n="empty_sub">로컬 모델, 이미지 분석, 코드 생성, 프라이빗 VPC — 모든 걸 한 화면에서 이어가세요.</p>
-                    <div class="empty-grid">
-                        <div class="empty-chip" id="chip-file" onclick="document.getElementById('user-input').value=t('chip_file_prompt');document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-file-text"></i></span><span data-i18n="chip_file">파일 생성 · 코드 초안</span></div>
-                        <div class="empty-chip" id="chip-vpc" onclick="document.getElementById('user-input').value=t('chip_vpc_prompt');document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-shield-check"></i></span><span data-i18n="chip_vpc">VPC 보안 구성 점검</span></div>
-                        <div class="empty-chip" id="chip-kb" onclick="document.getElementById('user-input').value=t('chip_kb_prompt');document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-brain"></i></span><span data-i18n="chip_kb">로컬 지식 정리</span></div>
-                    </div>
+                    <section class="reference-home">
+                        <div class="reference-home-head">
+                            <h1>안녕하세요, 사용자님 👋</h1>
+                            <p>Basic Mode에서 로컬 AI, 지식 그래프, 파일, 자동 설정을 한 화면에서 관리하세요.</p>
+                        </div>
+                        <div class="reference-card-grid">
+                            <article class="reference-dash-card">
+                                <div class="reference-card-icon"><i class="ti ti-activity"></i></div>
+                                <h3>AI 상태</h3>
+                                <p><span class="green-dot"></span> 실행 중</p>
+                                <div class="reference-stat-row"><span>모델</span><strong>Gemma 4 26B</strong></div>
+                                <div class="reference-progress"><span style="width:45%"></span></div>
+                                <button onclick="openModelPanel()"><i class="ti ti-cube"></i> 모델 변경</button>
+                            </article>
+                            <article class="reference-dash-card">
+                                <div class="reference-card-icon"><i class="ti ti-chart-dots-3"></i></div>
+                                <h3>지식 그래프</h3>
+                                <div class="reference-stat-row"><span>대화</span><strong>12개</strong></div>
+                                <div class="reference-stat-row"><span>파일</span><strong>5개</strong></div>
+                                <div class="reference-stat-row"><span>연결</span><strong>48개</strong></div>
+                                <button onclick="openDataGraph()"><i class="ti ti-chart-dots"></i> 그래프 보기</button>
+                            </article>
+                            <article class="reference-dash-card">
+                                <div class="reference-card-icon"><i class="ti ti-tool"></i></div>
+                                <h3>자동 설정</h3>
+                                <p>설치 가능한 도구</p>
+                                <div class="reference-big-number">3개</div>
+                                <button onclick="openSetupWizard()"><i class="ti ti-wand"></i> 설정 시작</button>
+                            </article>
+                        </div>
+                        <div class="reference-lists">
+                            <article>
+                                <header><i class="ti ti-message-circle"></i> 최근 채팅 <button onclick="startNewChat()">전체 보기</button></header>
+                                <p>Lattice AI의 기능과 활용 방법에 대해 알려줘 <span>오전 10:30</span></p>
+                                <p>RAG와 벡터 검색의 차이점은 무엇인가요? <span>어제</span></p>
+                                <p>파이썬으로 웹 크롤링하는 예제 코드 작성해줘 <span>어제</span></p>
+                            </article>
+                            <article>
+                                <header><i class="ti ti-file-text"></i> 최근 파일 <button onclick="openLocalBrowser()">전체 보기</button></header>
+                                <p>Lattice AI 사용자 가이드.pdf <span>2.4 MB</span></p>
+                                <p>AI 모델 성능 비교.xlsx <span>1.1 MB</span></p>
+                                <p>프로젝트 계획서.docx <span>856 KB</span></p>
+                            </article>
+                        </div>
+                        <div class="empty-grid">
+                            <div class="empty-chip" id="chip-file" onclick="document.getElementById('user-input').value=t('chip_file_prompt');document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-file-text"></i></span><span data-i18n="chip_file">파일 생성 · 코드 초안</span></div>
+                            <div class="empty-chip" id="chip-vpc" onclick="document.getElementById('user-input').value=t('chip_vpc_prompt');document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-shield-check"></i></span><span data-i18n="chip_vpc">VPC 보안 구성 점검</span></div>
+                            <div class="empty-chip" id="chip-kb" onclick="document.getElementById('user-input').value=t('chip_kb_prompt');document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-brain"></i></span><span data-i18n="chip_kb">로컬 지식 정리</span></div>
+                        </div>
+                    </section>
                 </div>
             </div>
 
@@ -3248,6 +3662,48 @@
         </main>
     </div>
 
+    <div class="workspace-modal-overlay" id="workspace-modal-overlay">
+        <section class="workspace-modal" role="dialog" aria-modal="true" aria-labelledby="workspace-title">
+            <div class="modal-kicker">Lattice AI</div>
+            <h2 id="workspace-title" data-i18n="workspace_title">워크스페이스 선택</h2>
+            <p data-i18n="workspace_sub">사용 목적에 맞는 시작 공간을 고르면 홈 화면과 기본 도구가 그 흐름에 맞춰 정리됩니다.</p>
+            <div class="workspace-options">
+                <button class="workspace-card" onclick="selectWorkspace('personal')">
+                    <div class="workspace-icon"><i class="ti ti-user"></i></div>
+                    <h3 data-i18n="workspace_personal">개인 워크스페이스</h3>
+                    <span data-i18n="workspace_personal_sub">개인 프로젝트, 로컬 파일, 지식베이스 중심</span>
+                </button>
+                <button class="workspace-card" onclick="selectWorkspace('company')">
+                    <div class="workspace-icon"><i class="ti ti-building-skyscraper"></i></div>
+                    <h3 data-i18n="workspace_company">회사 워크스페이스</h3>
+                    <span data-i18n="workspace_company_sub">SSO, 보안 정책, 팀 운영 대시보드 중심</span>
+                </button>
+            </div>
+            <div class="modal-footnote" data-i18n="workspace_note">나중에 상단 모드 버튼에서 다시 바꿀 수 있습니다.</div>
+        </section>
+    </div>
+
+    <div class="mode-modal-overlay" id="mode-modal-overlay" onclick="if(event.target===this)closeModeSelector()">
+        <section class="mode-modal" role="dialog" aria-modal="true" aria-labelledby="mode-title">
+            <button class="mode-close" onclick="closeModeSelector()" title="닫기"><i class="ti ti-x"></i></button>
+            <div class="modal-kicker">Mode Select</div>
+            <h2 id="mode-title" data-i18n="mode_title">모드 선택</h2>
+            <p data-i18n="mode_sub">작업 성격에 맞춰 Lattice AI의 화면 밀도와 기본 프롬프트를 전환합니다.</p>
+            <div class="mode-options">
+                <button class="mode-card selected" id="mode-card-default" onclick="selectMode('default')">
+                    <div class="mode-icon"><i class="ti ti-layout-dashboard"></i></div>
+                    <h3 data-i18n="mode_default">기본 모드</h3>
+                    <span data-i18n="mode_default_sub">대화, 파일 생성, 지식 정리를 한 화면에서</span>
+                </button>
+                <button class="mode-card" id="mode-card-code" onclick="selectMode('code')">
+                    <div class="mode-icon"><i class="ti ti-terminal-2"></i></div>
+                    <h3 data-i18n="mode_code">코딩 모드</h3>
+                    <span data-i18n="mode_code_sub">계획, 실행, 리뷰 파이프라인 중심</span>
+                </button>
+            </div>
+        </section>
+    </div>
+
     <div id="model-overlay" class="model-overlay">
         <section class="model-panel">
             <div class="model-panel-header">
@@ -3883,6 +4339,20 @@
                 ph_input: 'Lattice AI에게 작업을 지시하세요...',
                 // 파일 툴바
                 create_file: '파일 만들기', local_files: '로컬 파일',
+                // 워크스페이스 / 모드
+                workspace_title: '워크스페이스 선택',
+                workspace_sub: '사용 목적에 맞는 시작 공간을 고르면 홈 화면과 기본 도구가 그 흐름에 맞춰 정리됩니다.',
+                workspace_personal: '개인 워크스페이스',
+                workspace_personal_sub: '개인 프로젝트, 로컬 파일, 지식베이스 중심',
+                workspace_company: '회사 워크스페이스',
+                workspace_company_sub: 'SSO, 보안 정책, 팀 운영 대시보드 중심',
+                workspace_note: '나중에 상단 모드 버튼에서 다시 바꿀 수 있습니다.',
+                mode_title: '모드 선택',
+                mode_sub: '작업 성격에 맞춰 Lattice AI의 화면 밀도와 기본 프롬프트를 전환합니다.',
+                mode_default: '기본 모드',
+                mode_default_sub: '대화, 파일 생성, 지식 정리를 한 화면에서',
+                mode_code: '코딩 모드',
+                mode_code_sub: '계획, 실행, 리뷰 파이프라인 중심',
                 // 패널 제목
                 model_switcher: '모델 스위처',
                 model_switcher_sub: '실행 엔진을 설치하고, 엔진에 맞는 local/cloud LLM을 선택합니다.',
@@ -3922,6 +4392,20 @@
                 ph_input: 'Ask Lattice AI anything...',
                 // File toolbar
                 create_file: 'Create file', local_files: 'Local files',
+                // Workspace / mode
+                workspace_title: 'Select Workspace',
+                workspace_sub: 'Choose a starting space so the home view and default tools match how you work.',
+                workspace_personal: 'Personal Workspace',
+                workspace_personal_sub: 'Personal projects, local files, and knowledge base',
+                workspace_company: 'Company Workspace',
+                workspace_company_sub: 'SSO, security policy, and team operations',
+                workspace_note: 'You can change this later from the mode button.',
+                mode_title: 'Mode Select',
+                mode_sub: 'Switch Lattice AI density and defaults based on the job.',
+                mode_default: 'Default Mode',
+                mode_default_sub: 'Chat, file creation, and knowledge in one view',
+                mode_code: 'Code Mode',
+                mode_code_sub: 'Plan, execute, and review pipeline first',
                 // Panel titles
                 model_switcher: 'Model Switcher',
                 model_switcher_sub: 'Install a runtime engine and select a local/cloud LLM.',
@@ -3964,6 +4448,7 @@
             localStorage.setItem('ltcai_lang', lang);
             document.querySelectorAll('.lang-picker-menu').forEach(m => m.classList.remove('open'));
             applyI18n();
+            updateWorkspaceModeUi();
         }
 
         document.addEventListener('click', (e) => {
@@ -3972,6 +4457,66 @@
             }
         });
 
+        function workspaceLabel(kind) {
+            if (kind === 'company') return currentLang === 'ko' ? '회사' : 'Company';
+            return currentLang === 'ko' ? '개인' : 'Personal';
+        }
+
+        function modeLabel(mode) {
+            if (mode === 'code') return currentLang === 'ko' ? '코딩 모드' : 'Code Mode';
+            return currentLang === 'ko' ? '기본 모드' : 'Default Mode';
+        }
+
+        function updateWorkspaceModeUi() {
+            const workspace = localStorage.getItem('ltcai_workspace') || 'personal';
+            const mode = localStorage.getItem('ltcai_mode') || 'default';
+            const pill = document.getElementById('mode-pill');
+            if (pill) pill.innerHTML = `<i class="ti ti-layout-grid"></i> ${workspaceLabel(workspace)} · ${modeLabel(mode)}`;
+            document.querySelectorAll('.workspace-card').forEach((card, index) => {
+                const kind = index === 1 ? 'company' : 'personal';
+                card.classList.toggle('selected', kind === workspace);
+            });
+            ['default', 'code'].forEach(item => {
+                const el = document.getElementById(`mode-card-${item}`);
+                if (el) el.classList.toggle('selected', item === mode);
+            });
+        }
+
+        function maybeShowWorkspaceModal() {
+            updateWorkspaceModeUi();
+            if (!localStorage.getItem('ltcai_workspace')) {
+                document.getElementById('workspace-modal-overlay')?.classList.add('open');
+            }
+        }
+
+        function selectWorkspace(kind) {
+            localStorage.setItem('ltcai_workspace', kind === 'company' ? 'company' : 'personal');
+            document.getElementById('workspace-modal-overlay')?.classList.remove('open');
+            updateWorkspaceModeUi();
+            openModeSelector();
+        }
+
+        function openModeSelector() {
+            updateWorkspaceModeUi();
+            document.getElementById('mode-modal-overlay')?.classList.add('open');
+        }
+
+        function closeModeSelector() {
+            document.getElementById('mode-modal-overlay')?.classList.remove('open');
+        }
+
+        function selectMode(mode) {
+            localStorage.setItem('ltcai_mode', mode === 'code' ? 'code' : 'default');
+            updateWorkspaceModeUi();
+            closeModeSelector();
+            const input = document.getElementById('user-input');
+            if (input && !input.value.trim()) {
+                input.placeholder = mode === 'code'
+                    ? (currentLang === 'ko' ? '무엇을 구현하거나 고칠까요?' : 'What should we build or fix?')
+                    : t('ph_input');
+            }
+        }
+
         function switchAcctTab(tab) {
             ['profile', 'password'].forEach(t => {
                 document.getElementById(`tab-${t}`).classList.toggle('active', t === tab);
@@ -6382,6 +6927,7 @@
 
         document.getElementById('new-chat-btn').onclick = startNewChat;
         applyI18n();
+        maybeShowWorkspaceModal();
 
         // Session check — redirect to /account if not logged in
         (async function restoreSession() {
@@ -6765,8 +7311,28 @@
             setTimeout(() => el.classList.add('visible'), 80 + i * 90);
         });
 
+        const zero = env.zero_config || {};
+        const zeroRec = zero.recommend || {};
+        const zeroPlan = zero.plan || {};
+        if (zeroRec.model_id || zeroRec.runtime || zeroRec.backend) {
+            const planCount = (zeroPlan.steps || []).length;
+            const el = document.createElement('div');
+            el.className = 'scan-row zero-config-row';
+            el.innerHTML = `
+                <span class="scan-icon">⚙️</span>
+                <div>
+                    <div class="scan-label">Zero-Config 추천</div>
+                    <div class="scan-value">${escapeHtml([zeroRec.runtime, zeroRec.backend, zeroRec.model_id].filter(Boolean).join(' · '))}</div>
+                    <div class="scan-value" style="margin-top:4px;color:var(--faint)">${planCount ? escapeHtml(`${planCount}개 설치/검증 단계 준비됨`) : '추가 설치 단계 없음'}</div>
+                </div>`;
+            grid.appendChild(el);
+            setTimeout(() => el.classList.add('visible'), 80 + rows.length * 90);
+        }
+
         const sum = _wizRecs?.summary || {};
-        _subtitle(`${escapeHtml(chip.name || 'Unknown')} · RAM ${env.ram_gb}GB · 여유 ${env.disk_free_gb}GB`);
+        const zeroSummary = sum.zero_config || {};
+        const recSuffix = zeroSummary.model_id ? ` · ${zeroSummary.model_id}` : '';
+        _subtitle(`${escapeHtml(chip.name || 'Unknown')} · RAM ${env.ram_gb}GB · 여유 ${env.disk_free_gb}GB${escapeHtml(recSuffix)}`);
         _footInfo(`추천 최대 모델 크기: ${sum.max_model_gb || '?'}GB`);
         setTimeout(() => {
             _footBtns(`
@@ -6952,18 +7518,39 @@
 
     <script>
     // ── MCP 관리 모달 ────────────────────────────────────────────────────────
+    let _mcpCurrentTab = 'registry';
+
     async function openMcpModal() {
         document.getElementById('mcp-modal-overlay').classList.add('open');
-        await renderMcpModal();
+        await renderMcpModal(_mcpCurrentTab);
     }
 
     function closeMcpModal() {
         document.getElementById('mcp-modal-overlay').classList.remove('open');
     }
 
-    async function renderMcpModal() {
+    function switchMcpTab(tab, btn) {
+        _mcpCurrentTab = tab;
+        document.querySelectorAll('.mcp-tab').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        renderMcpModal(tab);
+    }
+
+    async function renderMcpModal(tab) {
+        tab = tab || _mcpCurrentTab || 'registry';
         const body = document.getElementById('mcp-modal-body');
         body.innerHTML = '<div style="color:var(--faint);font-size:13px;text-align:center;padding:24px">로딩 중...</div>';
+
+        if (tab === 'claude-code') {
+            await renderMcpClaudeCode(body);
+        } else if (tab === 'custom') {
+            await renderMcpCustom(body);
+        } else {
+            await renderMcpRegistry(body);
+        }
+    }
+
+    async function renderMcpRegistry(body) {
         try {
             const [installedRes, toolsRes] = await Promise.all([
                 apiFetch('/mcp/installed'),
@@ -7015,6 +7602,148 @@
         }
     }
 
+    async function renderMcpClaudeCode(body) {
+        try {
+            const res = await apiFetch('/mcp/claude-code-servers');
+            const data = res.ok ? await res.json() : { servers: [] };
+            const servers = data.servers || [];
+
+            if (!servers.length) {
+                body.innerHTML = `
+                    <div style="color:var(--faint);font-size:13px;text-align:center;padding:32px 24px;">
+                        <div style="font-size:28px;margin-bottom:10px">🤖</div>
+                        <div><strong>Claude Code MCP 없음</strong></div>
+                        <div style="margin-top:6px;font-size:11px">~/.claude/settings.json에 mcpServers 항목이 없습니다.</div>
+                        <div style="margin-top:4px;font-size:11px">Claude Code에서 MCP를 설치하면 여기에 자동으로 표시됩니다.</div>
+                    </div>`;
+                return;
+            }
+
+            let html = '<div class="mcp-section-label">Claude Code에서 설치된 MCP</div>';
+            html += servers.map(srv => `
+                <div class="mcp-item">
+                    <div class="mcp-item-icon">${srv.icon || '🤖'}</div>
+                    <div class="mcp-item-info">
+                        <div class="mcp-item-name" style="display:flex;align-items:center;gap:6px;">
+                            ${escapeHtml(srv.name)}
+                            <span class="mcp-source-badge claude-code">Claude Code</span>
+                        </div>
+                        <div class="mcp-item-desc" title="${escapeHtml(srv.package || '')}">${escapeHtml(srv.package || '')}</div>
+                        ${srv.env_vars && srv.env_vars.length ? `<div class="mcp-item-desc" style="margin-top:2px">ENV: ${escapeHtml(srv.env_vars.map(e=>e.name).join(', '))}</div>` : ''}
+                    </div>
+                    <span class="mcp-item-status">활성</span>
+                </div>
+            `).join('');
+            body.innerHTML = html;
+        } catch (e) {
+            body.innerHTML = `<div style="color:#ff6b6b;font-size:13px;text-align:center;padding:24px">로드 실패: ${escapeHtml(e.message)}</div>`;
+        }
+    }
+
+    async function renderMcpCustom(body) {
+        // Load existing custom MCPs
+        let existingHtml = '';
+        try {
+            const res = await apiFetch('/mcp/custom');
+            const data = res.ok ? await res.json() : { custom: [] };
+            const customs = data.custom || [];
+            if (customs.length) {
+                existingHtml = '<div class="mcp-section-label">직접 추가한 MCP</div>';
+                existingHtml += customs.map(c => `
+                    <div class="mcp-item" id="mcp-custom-item-${escapeHtml(c.id)}">
+                        <div class="mcp-item-icon">${c.icon || '🔌'}</div>
+                        <div class="mcp-item-info">
+                            <div class="mcp-item-name" style="display:flex;align-items:center;gap:6px;">
+                                ${escapeHtml(c.name)}
+                                <span class="mcp-source-badge custom">Custom</span>
+                            </div>
+                            <div class="mcp-item-desc" title="${escapeHtml(c.package||'')}">${escapeHtml(c.package||'')}</div>
+                            ${c.description ? `<div class="mcp-item-desc">${escapeHtml(c.description)}</div>` : ''}
+                        </div>
+                        <button class="mcp-delete-btn" onclick="deleteCustomMcp('${escapeHtml(c.id)}')">삭제</button>
+                    </div>
+                `).join('');
+            }
+        } catch {}
+
+        body.innerHTML = existingHtml + `
+            <div class="mcp-section-label" style="margin-top:${existingHtml?'16px':'4px'}">새 MCP 추가</div>
+            <div class="mcp-add-form">
+                <div>
+                    <label>이름 *</label>
+                    <input id="mcp-add-name" type="text" placeholder="예: my-database" />
+                </div>
+                <div>
+                    <label>패키지 / 명령어 *</label>
+                    <input id="mcp-add-package" type="text" placeholder="예: @company/mcp-server 또는 npx mcp-server" />
+                    <div class="field-hint">npm 패키지명 또는 실행 명령어</div>
+                </div>
+                <div>
+                    <label>설명</label>
+                    <input id="mcp-add-desc" type="text" placeholder="이 MCP가 하는 일 (선택)" />
+                </div>
+                <div>
+                    <label>필요한 환경변수 (쉼표 구분)</label>
+                    <input id="mcp-add-envs" type="text" placeholder="예: API_KEY, BASE_URL" />
+                    <div class="field-hint">서버 실행 시 필요한 env var 이름들</div>
+                </div>
+                <div style="display:flex;align-items:center;gap:8px;">
+                    <input id="mcp-add-icon" type="text" placeholder="🔌" style="width:56px;text-align:center;" maxlength="4" />
+                    <label style="margin:0">아이콘 (이모지)</label>
+                </div>
+                <div id="mcp-add-error" style="color:#ff6b6b;font-size:12px;display:none;"></div>
+                <button class="mcp-submit-btn" onclick="submitCustomMcp()">➕ MCP 추가</button>
+            </div>
+        `;
+    }
+
+    async function submitCustomMcp() {
+        const name = document.getElementById('mcp-add-name').value.trim();
+        const pkg = document.getElementById('mcp-add-package').value.trim();
+        const desc = document.getElementById('mcp-add-desc').value.trim();
+        const envsRaw = document.getElementById('mcp-add-envs').value.trim();
+        const icon = document.getElementById('mcp-add-icon').value.trim() || '🔌';
+        const errEl = document.getElementById('mcp-add-error');
+        errEl.style.display = 'none';
+
+        if (!name) { errEl.textContent = '이름을 입력해주세요.'; errEl.style.display='block'; return; }
+        if (!pkg)  { errEl.textContent = '패키지를 입력해주세요.'; errEl.style.display='block'; return; }
+
+        const env_vars = envsRaw ? envsRaw.split(',').map(s=>({name:s.trim(),description:''})).filter(e=>e.name) : [];
+        try {
+            const res = await apiFetch('/mcp/custom', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, package: pkg, description: desc, icon, env_vars }),
+            });
+            if (res.ok) {
+                await renderMcpModal('custom');
+            } else {
+                const d = await res.json().catch(()=>({}));
+                errEl.textContent = d.detail || '추가 실패';
+                errEl.style.display = 'block';
+            }
+        } catch (e) {
+            errEl.textContent = e.message || '네트워크 오류';
+            errEl.style.display = 'block';
+        }
+    }
+
+    async function deleteCustomMcp(id) {
+        if (!confirm('이 MCP를 삭제하시겠습니까?')) return;
+        try {
+            const res = await apiFetch('/mcp/custom/' + encodeURIComponent(id), { method: 'DELETE' });
+            if (res.ok) {
+                await renderMcpModal('custom');
+            } else {
+                const d = await res.json().catch(()=>({}));
+                alert(d.detail || '삭제 실패');
+            }
+        } catch (e) {
+            alert(e.message || '네트워크 오류');
+        }
+    }
+
     async function installMcp(id) {
         const btn = document.querySelector(`#mcp-item-${CSS.escape(id)} .mcp-install-btn`);
         if (btn) { btn.disabled = true; btn.textContent = '설치 중...'; }
@@ -7025,7 +7754,7 @@
                 body: JSON.stringify({ mcp_id: id }),
             });
             if (res.ok) {
-                await renderMcpModal();
+                await renderMcpModal('registry');
             } else {
                 const d = await res.json().catch(() => ({}));
                 if (btn) { btn.disabled = false; btn.textContent = '설치'; }