ltcai 0.1.26 → 0.1.28

package/static/chat.html

@@ -3066,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>
@@ -3098,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>
@@ -3133,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>
@@ -3246,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>
 
@@ -3291,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">
@@ -3926,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을 선택합니다.',
@@ -3965,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.',
@@ -4007,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) => {
@@ -4015,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);
@@ -6425,6 +6927,7 @@
 
         document.getElementById('new-chat-btn').onclick = startNewChat;
         applyI18n();
+        maybeShowWorkspaceModal();
 
         // Session check — redirect to /account if not logged in
         (async function restoreSession() {
@@ -6808,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(`