ltcai 0.1.1 → 0.1.2

package/README.md

@@ -28,6 +28,30 @@ Lattice AI/
 
 ---
 
+## 언어 지원
+
+웹 UI는 **한국어 / 영어** 전환을 지원합니다.
+
+- 로그인 페이지 우측 상단 **🌐 Languages** 버튼
+- 메인 화면 헤더 **🌐** 버튼
+- 선택한 언어는 브라우저에 저장됩니다
+
+---
+
+## 플랫폼 지원
+
+| 기능 | macOS (Apple Silicon) | Windows / Linux |
+|------|:---:|:---:|
+| 웹 UI / 클라우드 모델 (OpenAI, Groq 등) | ✅ | ✅ |
+| VS Code / Cursor 확장 | ✅ | ✅ |
+| Telegram 봇 | ✅ | ✅ |
+| MLX 로컬 모델 (Gemma, Qwen 등) | ✅ | ❌ Apple Silicon 전용 |
+| Ollama / vLLM / LM Studio 연동 | ✅ | ✅ |
+
+> Windows / Linux에서 로컬 모델을 사용하려면 서버 실행 후 웹 UI(`http://localhost:4825`)에서 Ollama 등을 설치할 수 있습니다.
+
+---
+
 ## 빠른 시작
 
 ### 설치 & 실행

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ltcai",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Lattice AI local MLX/cloud LLM workspace server",
   "bin": {
     "ltcai": "bin/ltcai.js",

package/server.py

@@ -1262,6 +1262,41 @@ async def change_password(req: ChangePasswordRequest, request: Request):
     save_users(users)
     return {"status": "ok", "message": "비밀번호가 변경되었습니다."}
 
+class UpdateProfileRequest(BaseModel):
+    name: Optional[str] = None
+    nickname: Optional[str] = None
+
+@app.patch("/account/profile")
+async def update_profile(req: UpdateProfileRequest, request: Request):
+    email = require_user(request)
+    if not email:
+        raise HTTPException(status_code=401, detail="인증이 필요합니다.")
+    if req.name is not None and not req.name.strip():
+        raise HTTPException(status_code=400, detail="이름을 입력해주세요.")
+    if req.nickname is not None and not req.nickname.strip():
+        raise HTTPException(status_code=400, detail="닉네임을 입력해주세요.")
+    users = load_users()
+    user = users.get(email)
+    if not user:
+        raise HTTPException(status_code=404, detail="사용자를 찾을 수 없습니다.")
+    if req.name is not None:
+        users[email]["name"] = req.name.strip()
+    if req.nickname is not None:
+        users[email]["nickname"] = req.nickname.strip()
+    save_users(users)
+    return {"status": "ok", "name": users[email]["name"], "nickname": users[email]["nickname"]}
+
+@app.get("/account/profile")
+async def get_profile(request: Request):
+    email = require_user(request)
+    if not email:
+        raise HTTPException(status_code=401, detail="인증이 필요합니다.")
+    users = load_users()
+    user = users.get(email)
+    if not user:
+        raise HTTPException(status_code=404, detail="사용자를 찾을 수 없습니다.")
+    return {"email": email, "name": user.get("name", ""), "nickname": user.get("nickname", "")}
+
 @app.get("/admin/summary")
 async def admin_summary(request: Request):
     _, users = require_admin(request)
@@ -1279,6 +1314,23 @@ async def admin_summary(request: Request):
         "last_message_at": last_timestamp,
     }
 
+@app.get("/admin/stats")
+async def admin_stats(request: Request):
+    require_admin(request)
+    history = get_history()
+    from collections import defaultdict
+    daily: dict = defaultdict(lambda: {"user": 0, "assistant": 0})
+    for item in history:
+        ts = item.get("timestamp", "")
+        day = ts[:10] if ts else "unknown"
+        role = item.get("role", "")
+        if role in ("user", "assistant"):
+            daily[day][role] += 1
+    sorted_days = sorted(daily.keys())[-14:]
+    return {
+        "daily": [{"date": d, "user": daily[d]["user"], "assistant": daily[d]["assistant"]} for d in sorted_days]
+    }
+
 @app.get("/admin/users")
 async def admin_users(request: Request):
     _, users = require_admin(request)
@@ -1333,6 +1385,17 @@ async def admin_delete_user(email: str, request: Request):
     save_users(users)
     return {"status": "ok", "deleted": deleted}
 
+@app.get("/admin/invite-link")
+async def admin_invite_link(request: Request):
+    require_admin(request)
+    host = request.headers.get("host", f"localhost:{PORT}")
+    scheme = "https" if request.headers.get("x-forwarded-proto") == "https" else "http"
+    if INVITE_GATE_ENABLED:
+        url = f"{scheme}://{host}/?code={INVITE_CODE}"
+    else:
+        url = f"{scheme}://{host}/"
+    return {"invite_url": url, "invite_code": INVITE_CODE, "gate_enabled": INVITE_GATE_ENABLED}
+
 # ── Invitation Logic ────────────────────────────────────────────────────────
 INVITE_CODE = env_value("LATTICEAI_INVITE_CODE", "gemma-lattice-ai")
 INVITE_GATE_ENABLED = env_bool("LATTICEAI_INVITE_GATE_ENABLED", default=False)

package/static/admin.html

@@ -522,6 +522,7 @@
             .field.full { grid-column: auto; }
         }
     </style>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 </head>
 
 <body>
@@ -578,6 +579,18 @@
                 </div>
             </section>
 
+            <section class="panel" style="margin-bottom:0;">
+                <div class="panel-header">
+                    <div>
+                        <h3>메시지 활동 (최근 14일)</h3>
+                        <p>사용자 메시지와 AI 응답 수를 날짜별로 표시합니다.</p>
+                    </div>
+                </div>
+                <div class="panel-body" style="padding:16px 20px;">
+                    <canvas id="activity-chart" height="80"></canvas>
+                </div>
+            </section>
+
             <section class="panel-grid">
                 <article class="panel">
                     <div class="panel-header">
@@ -668,6 +681,26 @@
                 </div>
             </section>
 
+            <section class="panel">
+                <div class="panel-header">
+                    <div>
+                        <h3>초대 링크</h3>
+                        <p>새 사용자를 초대할 링크를 확인하고 복사합니다.</p>
+                    </div>
+                </div>
+                <div class="panel-body">
+                    <div style="display:flex;gap:8px;align-items:center;">
+                        <input id="invite-link-input" type="text" readonly
+                            style="flex:1;background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#f8fafc;padding:8px 12px;font-size:13px;outline:none;">
+                        <button onclick="copyInviteLink()" id="copy-invite-btn"
+                            style="background:#6366f1;color:#fff;border:none;border-radius:8px;padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;transition:opacity .15s;">
+                            복사
+                        </button>
+                    </div>
+                    <div id="invite-gate-info" style="font-size:12px;color:#94a3b8;margin-top:8px;"></div>
+                </div>
+            </section>
+
             <section class="panel">
                 <div class="panel-header">
                     <div>
@@ -710,6 +743,45 @@
             };
         }
 
+        let activityChartInstance = null;
+        function renderActivityChart(daily) {
+            const labels = daily.map(d => d.date);
+            const userData = daily.map(d => d.user);
+            const aiData = daily.map(d => d.assistant);
+            const ctx = document.getElementById('activity-chart').getContext('2d');
+            if (activityChartInstance) activityChartInstance.destroy();
+            activityChartInstance = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels,
+                    datasets: [
+                        { label: '사용자', data: userData, backgroundColor: 'rgba(99,102,241,0.7)', borderRadius: 4 },
+                        { label: 'AI', data: aiData, backgroundColor: 'rgba(168,85,247,0.5)', borderRadius: 4 }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    plugins: { legend: { labels: { color: '#94a3b8', font: { size: 12 } } } },
+                    scales: {
+                        x: { ticks: { color: '#64748b' }, grid: { color: 'rgba(255,255,255,0.04)' } },
+                        y: { ticks: { color: '#64748b', stepSize: 1 }, grid: { color: 'rgba(255,255,255,0.04)' }, beginAtZero: true }
+                    }
+                }
+            });
+        }
+
+        async function copyInviteLink() {
+            const url = document.getElementById('invite-link-input').value;
+            const btn = document.getElementById('copy-invite-btn');
+            try {
+                await navigator.clipboard.writeText(url);
+                btn.textContent = '복사됨 ✅';
+                setTimeout(() => btn.textContent = '복사', 2000);
+            } catch {
+                document.getElementById('invite-link-input').select();
+            }
+        }
+
         function esc(value) {
             return String(value ?? '')
                 .replace(/&/g, '&amp;')
@@ -926,12 +998,14 @@
             access.style.display = 'none';
 
             try {
-                const [healthRes, vpcRes, summaryRes, usersRes, sensitivityRes] = await Promise.all([
+                const [healthRes, vpcRes, summaryRes, usersRes, sensitivityRes, inviteRes, statsRes] = await Promise.all([
                     apiFetch('/health'),
                     apiFetch('/vpc/status'),
                     apiFetch('/admin/summary', { headers: adminHeaders() }),
                     apiFetch('/admin/users', { headers: adminHeaders() }),
-                    apiFetch('/admin/sensitivity', { headers: adminHeaders() })
+                    apiFetch('/admin/sensitivity', { headers: adminHeaders() }),
+                    apiFetch('/admin/invite-link', { headers: adminHeaders() }),
+                    apiFetch('/admin/stats', { headers: adminHeaders() })
                 ]);
 
                 const health = healthRes.ok ? await healthRes.json() : null;
@@ -939,11 +1013,20 @@
                 const summary = summaryRes.ok ? await summaryRes.json() : null;
                 const users = usersRes.ok ? await usersRes.json() : null;
                 const sensitivity = sensitivityRes.ok ? await sensitivityRes.json() : null;
+                const invite = inviteRes.ok ? await inviteRes.json() : null;
+                const stats = statsRes.ok ? await statsRes.json() : null;
 
                 renderSummary(health, summary, vpc);
                 fillVpcForm(vpc);
                 renderUsers(users);
                 renderSensitivity(sensitivity);
+                if (invite) {
+                    document.getElementById('invite-link-input').value = invite.invite_url;
+                    document.getElementById('invite-gate-info').textContent = invite.gate_enabled
+                        ? `초대 코드: ${invite.invite_code} — 초대 게이트 활성화됨`
+                        : '초대 게이트 비활성화 상태 — 링크 없이도 접근 가능합니다.';
+                }
+                if (stats) renderActivityChart(stats.daily);
 
                 const failedSections = [];
                 if (!summaryRes.ok) failedSections.push('요약');

package/static/indexd.html

@@ -407,7 +407,7 @@
             background: rgba(255,255,255,0.04);
         }
 
-        .pw-modal-overlay {
+        .acct-modal-overlay {
             display: none;
             position: fixed;
             inset: 0;
@@ -417,20 +417,31 @@
             align-items: center;
             justify-content: center;
         }
-        .pw-modal-overlay.open { display: flex; }
-        .pw-modal {
+        .acct-modal-overlay.open { display: flex; }
+        .acct-modal {
             background: var(--surface, #1e293b);
             border: 1px solid rgba(255,255,255,0.08);
             border-radius: 16px;
-            padding: 28px;
             width: 100%;
-            max-width: 360px;
+            max-width: 380px;
             display: flex;
             flex-direction: column;
-            gap: 16px;
             box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+            overflow: hidden;
+        }
+        .acct-tabs {
+            display: flex;
+            border-bottom: 1px solid rgba(255,255,255,0.07);
+        }
+        .acct-tab {
+            flex: 1; padding: 14px; font-size: 13px; font-weight: 500;
+            background: none; border: none; color: var(--muted); cursor: pointer;
+            transition: all .15s; border-bottom: 2px solid transparent;
         }
-        .pw-modal h3 { font-size: 15px; font-weight: 600; margin: 0; }
+        .acct-tab.active { color: var(--text, #f8fafc); border-bottom-color: var(--accent, #6366f1); }
+        .acct-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
+        .acct-tab-panel { display: none; flex-direction: column; gap: 14px; }
+        .acct-tab-panel.active { display: flex; }
         .pw-field { display: flex; flex-direction: column; gap: 5px; }
         .pw-field label { font-size: 11px; color: var(--muted); }
         .pw-field input {
@@ -457,6 +468,41 @@
         .pw-msg.error { color: #f87171; }
         .pw-msg.success { color: #4ade80; }
 
+        .lang-picker { position: relative; }
+        .lang-picker-menu {
+            display: none;
+            position: absolute;
+            top: calc(100% + 6px);
+            right: 0;
+            background: #1e293b;
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+            z-index: 200;
+            min-width: 90px;
+        }
+        .lang-picker-menu.open { display: block; }
+        .lang-option {
+            display: flex; align-items: center; gap: 8px;
+            padding: 9px 14px; font-size: 13px; cursor: pointer;
+            color: var(--muted); transition: background .12s;
+        }
+        .lang-option:hover { background: rgba(255,255,255,0.06); color: var(--text, #f8fafc); }
+        .lang-option.active { color: var(--accent, #6366f1); font-weight: 600; }
+
+        .auth-lang-picker {
+            position: absolute; top: 20px; right: 20px;
+        }
+        .auth-lang-btn {
+            background: rgba(255,255,255,0.07);
+            border: 1px solid rgba(255,255,255,0.12);
+            color: #94a3b8; font-size: 12px; padding: 5px 10px;
+            border-radius: 8px; cursor: pointer; transition: all .15s;
+        }
+        .auth-lang-btn:hover { background: rgba(255,255,255,0.12); color: #f8fafc; }
+        .auth-lang-picker .lang-picker-menu { top: calc(100% + 6px); right: 0; }
+
         .messages-viewport {
             flex: 1;
             overflow-y: auto;
@@ -2764,28 +2810,37 @@
     <div id="auth-overlay" class="auth-overlay">
         <div class="auth-orb auth-orb-1"></div>
         <div class="auth-orb auth-orb-2"></div>
+        <div class="auth-lang-picker lang-picker" id="auth-lang-picker">
+            <button class="auth-lang-btn" id="auth-lang-btn" onclick="toggleLangMenu('auth-lang-picker')">🌐 Languages</button>
+            <div class="lang-picker-menu" id="auth-lang-picker-menu">
+                <div class="lang-option" id="auth-lang-ko" onclick="setLang('ko')">🇰🇷 한국어</div>
+                <div class="lang-option" id="auth-lang-en" onclick="setLang('en')">🇺🇸 English</div>
+            </div>
+        </div>
         <div class="auth-card">
             <div id="login-form">
                 <div class="auth-logo"><i class="ti ti-brain"></i></div>
-                <h2 class="auth-title">Lattice AI</h2>
-                <p class="auth-subtitle">Local AI Workspace — Apple Silicon</p>
-                <input class="auth-input" type="email" id="login-email" placeholder="이메일 주소">
-                <input class="auth-input" type="password" id="login-pw" placeholder="비밀번호">
-                <button class="auth-submit" onclick="handleLogin()">로그인</button>
-                <p class="auth-switch">계정이 없으신가요?
-                    <a href="#" onclick="toggleAuth(true)">회원가입</a></p>
+                <h2 class="auth-title" data-i18n="login_title">Lattice AI</h2>
+                <p class="auth-subtitle" data-i18n="login_sub">Local AI Workspace — Apple Silicon</p>
+                <input class="auth-input" type="email" id="login-email" placeholder="이메일 주소" data-i18n-ph="ph_email">
+                <input class="auth-input" type="password" id="login-pw" placeholder="비밀번호" data-i18n-ph="ph_password">
+                <button class="auth-submit" onclick="handleLogin()" data-i18n="btn_login">로그인</button>
+                <p class="auth-switch"><span data-i18n="no_account">계정이 없으신가요?</span>
+                    <a href="#" onclick="toggleAuth(true)" data-i18n="go_register">회원가입</a></p>
             </div>
             <div id="register-form" style="display: none;">
                 <div class="auth-logo"><i class="ti ti-user-plus"></i></div>
-                <h2 class="auth-title">계정 만들기</h2>
-                <p class="auth-subtitle">Lattice AI 워크스페이스에 참여하세요</p>
-                <input class="auth-input" type="email" id="reg-email" placeholder="이메일 주소">
-                <input class="auth-input" type="password" id="reg-pw" placeholder="비밀번호">
-                <input class="auth-input" type="text" id="reg-name" placeholder="이름">
-                <input class="auth-input" type="text" id="reg-nickname" placeholder="별명">
-                <button class="auth-submit" onclick="handleRegister()">가입하기</button>
-                <p class="auth-switch">이미 계정이 있나요?
-                    <a href="#" onclick="toggleAuth(false)">로그인</a></p>
+                <h2 class="auth-title" data-i18n="register_title">계정 만들기</h2>
+                <p class="auth-subtitle" data-i18n="register_sub">Lattice AI 워크스페이스에 참여하세요</p>
+                <input class="auth-input" type="email" id="reg-email" placeholder="이메일 주소" data-i18n-ph="ph_email">
+                <input class="auth-input" type="password" id="reg-pw" placeholder="비밀번호 (4자 이상)" data-i18n-ph="ph_new_pw">
+                <input class="auth-input" type="password" id="reg-pw2" placeholder="비밀번호 확인" data-i18n-ph="ph_pw_confirm">
+                <input class="auth-input" type="text" id="reg-name" placeholder="이름" data-i18n-ph="ph_fullname">
+                <input class="auth-input" type="text" id="reg-nickname" placeholder="닉네임" data-i18n-ph="ph_nick">
+                <div id="reg-msg" style="font-size:12px;min-height:16px;margin-bottom:4px;"></div>
+                <button class="auth-submit" id="reg-submit-btn" onclick="handleRegister()" data-i18n="btn_register">가입하기</button>
+                <p class="auth-switch"><span data-i18n="have_account">이미 계정이 있나요?</span>
+                    <a href="#" onclick="toggleAuth(false)" data-i18n="go_login">로그인</a></p>
             </div>
         </div>
     </div>
@@ -2811,9 +2866,9 @@
                 <!-- History items -->
             </div>
             <div class="sidebar-footer">
-                <button id="admin-btn" class="admin-btn" onclick="openAdminPanel()"><i class="ti ti-shield-lock"></i> 관리자 대시보드</button>
-                <button class="status-btn" onclick="openStatusPanel()"><i class="ti ti-info-circle"></i> 내 상태 보기</button>
-                <button id="setup-wizard-btn" class="setup-wizard-sidebar-btn" onclick="openSetupWizard()"><i class="ti ti-sparkles"></i> 자동 설정</button>
+                <button id="admin-btn" class="admin-btn" onclick="openAdminPanel()"><i class="ti ti-shield-lock"></i> <span data-i18n="admin_dashboard">관리자 대시보드</span></button>
+                <button class="status-btn" onclick="openStatusPanel()"><i class="ti ti-info-circle"></i> <span data-i18n="my_status">내 상태 보기</span></button>
+                <button id="setup-wizard-btn" class="setup-wizard-sidebar-btn" onclick="openSetupWizard()"><i class="ti ti-sparkles"></i> <span data-i18n="auto_setup">자동 설정</span></button>
                 <button id="new-chat-btn" class="new-chat-btn"><i class="ti ti-plus"></i> New Chat</button>
             </div>
         </aside>
@@ -2832,30 +2887,59 @@
                 </div>
                 <div class="header-pills">
                     <div class="status-pill"><i class="ti ti-device-desktop"></i> Local</div>
-                    <button onclick="openPwModal()" class="logout-btn" title="비밀번호 변경"><i class="ti ti-user"></i></button>
-                    <button onclick="logout()" class="logout-btn">로그아웃</button>
+                    <div class="lang-picker" id="header-lang-picker">
+                        <button class="logout-btn" id="lang-btn" onclick="toggleLangMenu('header-lang-picker')" title="Language">🌐</button>
+                        <div class="lang-picker-menu" id="header-lang-picker-menu">
+                            <div class="lang-option" id="header-lang-ko" onclick="setLang('ko')">🇰🇷 한국어</div>
+                            <div class="lang-option" id="header-lang-en" onclick="setLang('en')">🇺🇸 English</div>
+                        </div>
+                    </div>
+                    <button onclick="openAcctModal()" class="logout-btn" title="계정 설정"><i class="ti ti-user"></i></button>
+                    <button onclick="logout()" class="logout-btn" data-i18n="logout">로그아웃</button>
                 </div>
             </header>
 
-            <div class="pw-modal-overlay" id="pw-modal-overlay">
-                <div class="pw-modal">
-                    <h3>🔐 비밀번호 변경</h3>
-                    <div class="pw-field">
-                        <label>현재 비밀번호</label>
-                        <input type="password" id="pw-cur" placeholder="현재 비밀번호">
-                    </div>
-                    <div class="pw-field">
-                        <label>새 비밀번호</label>
-                        <input type="password" id="pw-new" placeholder="새 비밀번호 (4자 이상)">
+            <div class="acct-modal-overlay" id="acct-modal-overlay">
+                <div class="acct-modal">
+                    <div class="acct-tabs">
+                        <button class="acct-tab active" id="tab-profile" onclick="switchAcctTab('profile')" data-i18n="tab_profile">프로필</button>
+                        <button class="acct-tab" id="tab-password" onclick="switchAcctTab('password')" data-i18n="tab_password">비밀번호</button>
                     </div>
-                    <div class="pw-field">
-                        <label>새 비밀번호 확인</label>
-                        <input type="password" id="pw-new2" placeholder="새 비밀번호 재입력">
-                    </div>
-                    <div class="pw-msg" id="pw-msg"></div>
-                    <div class="pw-actions">
-                        <button class="pw-cancel" onclick="closePwModal()">취소</button>
-                        <button class="pw-submit" id="pw-submit-btn" onclick="submitPwChange()">변경</button>
+                    <div class="acct-body">
+                        <div class="acct-tab-panel active" id="panel-profile">
+                            <div class="pw-field">
+                                <label data-i18n="label_name">이름</label>
+                                <input type="text" id="profile-name" placeholder="이름" data-i18n-ph="ph_name">
+                            </div>
+                            <div class="pw-field">
+                                <label data-i18n="label_nickname">닉네임</label>
+                                <input type="text" id="profile-nickname" placeholder="닉네임" data-i18n-ph="ph_nickname">
+                            </div>
+                            <div class="pw-msg" id="profile-msg"></div>
+                            <div class="pw-actions">
+                                <button class="pw-cancel" onclick="closeAcctModal()" data-i18n="btn_cancel">취소</button>
+                                <button class="pw-submit" id="profile-submit-btn" onclick="submitProfileChange()" data-i18n="btn_save">저장</button>
+                            </div>
+                        </div>
+                        <div class="acct-tab-panel" id="panel-password">
+                            <div class="pw-field">
+                                <label data-i18n="label_cur_pw">현재 비밀번호</label>
+                                <input type="password" id="pw-cur" placeholder="현재 비밀번호" data-i18n-ph="ph_cur_pw">
+                            </div>
+                            <div class="pw-field">
+                                <label data-i18n="label_new_pw">새 비밀번호</label>
+                                <input type="password" id="pw-new" placeholder="새 비밀번호 (4자 이상)" data-i18n-ph="ph_new_pw">
+                            </div>
+                            <div class="pw-field">
+                                <label data-i18n="label_new_pw2">새 비밀번호 확인</label>
+                                <input type="password" id="pw-new2" placeholder="새 비밀번호 재입력" data-i18n-ph="ph_new_pw2">
+                            </div>
+                            <div class="pw-msg" id="pw-msg"></div>
+                            <div class="pw-actions">
+                                <button class="pw-cancel" onclick="closeAcctModal()" data-i18n="btn_cancel">취소</button>
+                                <button class="pw-submit" id="pw-submit-btn" onclick="submitPwChange()" data-i18n="btn_change">변경</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -2872,16 +2956,16 @@
                 <div class="ops-card interactive" onclick="openVpcPanel()">
                     <div>
                         <div class="ops-label">PRIVATE VPC</div>
-                        <div id="ops-vpc" class="ops-value">설정 안 됨</div>
-                        <div id="ops-vpc-meta" class="ops-meta">클릭하여 VPC 연결 설정</div>
+                        <div id="ops-vpc" class="ops-value" data-i18n="vpc_not_set">설정 안 됨</div>
+                        <div id="ops-vpc-meta" class="ops-meta" data-i18n="vpc_click_to_set">클릭하여 VPC 연결 설정</div>
                     </div>
                     <div class="ops-icon"><i class="ti ti-cloud-lock"></i></div>
                 </div>
                 <div class="ops-card interactive" onclick="openAdminPanel()">
                     <div>
                         <div class="ops-label">SECURITY</div>
-                        <div class="ops-value">민감정보 감시</div>
-                        <div id="security-admin-meta" class="ops-meta">관리자 대시보드 접근</div>
+                        <div class="ops-value" data-i18n="security_monitor">민감정보 감시</div>
+                        <div id="security-admin-meta" class="ops-meta" data-i18n="admin_dashboard_access">관리자 대시보드 접근</div>
                     </div>
                     <div class="ops-icon"><i class="ti ti-shield-check"></i></div>
                 </div>
@@ -2890,12 +2974,12 @@
             <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>무엇을 만들까요?</h1>
-                    <p>로컬 모델, 이미지 분석, 코드 생성, 프라이빗 VPC — 모든 걸 한 화면에서 이어가세요.</p>
+                    <h1 data-i18n="empty_title">무엇을 만들까요?</h1>
+                    <p data-i18n="empty_sub">로컬 모델, 이미지 분석, 코드 생성, 프라이빗 VPC — 모든 걸 한 화면에서 이어가세요.</p>
                     <div class="empty-grid">
-                        <div class="empty-chip" onclick="document.getElementById('user-input').value='보고서 초안을 만들어줘';document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-file-text"></i></span>파일 생성 · 코드 초안</div>
-                        <div class="empty-chip" onclick="document.getElementById('user-input').value='VPC 보안 구성을 점검해줘';document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-shield-check"></i></span>VPC 보안 구성 점검</div>
-                        <div class="empty-chip" onclick="document.getElementById('user-input').value='이 내용을 지식베이스에 정리해줘';document.getElementById('user-input').focus()"><span class="empty-chip-icon"><i class="ti ti-brain"></i></span>로컬 지식 정리</div>
+                        <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>
                 </div>
             </div>
@@ -2918,16 +3002,16 @@
                             <i class="ti ti-paperclip" style="font-size: 20px;"></i>
                             <input type="file" id="doc-input" accept=".pdf,.docx,.xlsx,.pptx,.txt,.md,.csv" hidden onchange="attachDocument(this)">
                         </label>
-                        <textarea id="user-input" placeholder="Lattice AI에게 작업을 지시하세요..." rows="1"></textarea>
+                        <textarea id="user-input" placeholder="Lattice AI에게 작업을 지시하세요..." rows="1" data-i18n-ph="ph_input"></textarea>
                         <button class="send-btn" id="send-btn"><i class="ti ti-send"></i></button>
                     </div>
                     <div class="file-toolbar">
-                        <span class="file-toolbar-label">파일 만들기</span>
+                        <span class="file-toolbar-label" data-i18n="create_file">파일 만들기</span>
                         <button class="file-type-btn" onclick="openFileCreate('docx')"><i class="ti ti-file-word"></i> DOCX</button>
                         <button class="file-type-btn" onclick="openFileCreate('xlsx')"><i class="ti ti-file-spreadsheet"></i> XLSX</button>
                         <button class="file-type-btn" onclick="openFileCreate('pptx')"><i class="ti ti-presentation"></i> PPTX</button>
                         <button class="file-type-btn" onclick="openFileCreate('pdf')"><i class="ti ti-file-type-pdf"></i> PDF</button>
-                        <button class="file-type-btn" onclick="openLocalBrowser()"><i class="ti ti-folder-open"></i> 로컬 파일</button>
+                        <button class="file-type-btn" onclick="openLocalBrowser()"><i class="ti ti-folder-open"></i> <span data-i18n="local_files">로컬 파일</span></button>
                     </div>
                 </div>
             </div>
@@ -2938,8 +3022,8 @@
         <section class="model-panel">
             <div class="model-panel-header">
                 <div>
-                    <h2>모델 스위처</h2>
-                    <p style="color: var(--muted); font-size: 12px; margin-top: 4px;">실행 엔진을 설치하고, 엔진에 맞는 local/cloud LLM을 선택합니다.</p>
+                    <h2 data-i18n="model_switcher">모델 스위처</h2>
+                    <p style="color: var(--muted); font-size: 12px; margin-top: 4px;" data-i18n="model_switcher_sub">실행 엔진을 설치하고, 엔진에 맞는 local/cloud LLM을 선택합니다.</p>
                 </div>
                 <button class="admin-close" onclick="closeModelPanel()"><i class="ti ti-x"></i></button>
             </div>
@@ -2951,12 +3035,12 @@
     <div id="perm-overlay" class="perm-overlay" style="display:none">
         <div class="perm-dialog">
             <div class="perm-icon"><i class="ti ti-shield-lock"></i></div>
-            <div class="perm-title" id="perm-title">파일 접근 요청</div>
+            <div class="perm-title" id="perm-title" data-i18n="perm_title">파일 접근 요청</div>
             <div class="perm-path" id="perm-path"></div>
             <div class="perm-desc" id="perm-desc"></div>
             <div class="perm-actions">
-                <button class="perm-deny-btn" onclick="resolvePermission(false)">거부</button>
-                <button class="perm-allow-btn" onclick="resolvePermission(true)">허용</button>
+                <button class="perm-deny-btn" onclick="resolvePermission(false)" data-i18n="btn_deny">거부</button>
+                <button class="perm-allow-btn" onclick="resolvePermission(true)" data-i18n="btn_allow">허용</button>
             </div>
         </div>
     </div>
@@ -3285,17 +3369,36 @@
         }
 
         async function handleRegister() {
-            const email = document.getElementById('reg-email').value;
+            const email = document.getElementById('reg-email').value.trim();
             const password = document.getElementById('reg-pw').value;
-            const name = document.getElementById('reg-name').value;
-            const nickname = document.getElementById('reg-nickname').value;
-            const res = await apiFetch('/register', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email, password, name, nickname })
-            });
-            if (res.ok) { alert("가입 완료! 로그인 해주세요."); toggleAuth(false); }
-            else { alert("가입 실패: " + (await res.json()).detail); }
+            const password2 = document.getElementById('reg-pw2').value;
+            const name = document.getElementById('reg-name').value.trim();
+            const nickname = document.getElementById('reg-nickname').value.trim();
+            const msg = document.getElementById('reg-msg');
+            const btn = document.getElementById('reg-submit-btn');
+            const setMsg = (text, isError) => {
+                msg.textContent = text;
+                msg.style.color = isError ? '#f87171' : '#4ade80';
+            };
+            if (!email || !password || !password2 || !name || !nickname) return setMsg('모든 항목을 입력해주세요.', true);
+            if (password.length < 4) return setMsg('비밀번호는 4자 이상이어야 합니다.', true);
+            if (password !== password2) return setMsg('비밀번호가 일치하지 않습니다.', true);
+            btn.disabled = true; btn.textContent = '가입 중...';
+            try {
+                const res = await apiFetch('/register', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ email, password, name, nickname })
+                });
+                if (res.ok) {
+                    setMsg('✅ 가입 완료! 로그인 해주세요.', false);
+                    setTimeout(() => toggleAuth(false), 1200);
+                } else {
+                    const data = await res.json();
+                    setMsg(data.detail || '가입 실패', true);
+                }
+            } catch { setMsg('서버 연결 실패', true); }
+            finally { btn.disabled = false; btn.textContent = '가입하기'; }
         }
 
         async function handleLogin() {
@@ -3336,22 +3439,197 @@
             location.reload();
         }
 
-        function openPwModal() {
-            document.getElementById('pw-cur').value = '';
-            document.getElementById('pw-new').value = '';
-            document.getElementById('pw-new2').value = '';
-            const msg = document.getElementById('pw-msg');
-            msg.textContent = '';
-            msg.className = 'pw-msg';
-            document.getElementById('pw-modal-overlay').classList.add('open');
+        const I18N = {
+            ko: {
+                // 인증
+                login_title: 'Lattice AI', login_sub: 'Local AI Workspace — Apple Silicon',
+                ph_email: '이메일 주소', ph_password: '비밀번호', btn_login: '로그인',
+                no_account: '계정이 없으신가요?', go_register: '회원가입',
+                register_title: '계정 만들기', register_sub: 'Lattice AI 워크스페이스에 참여하세요',
+                ph_new_pw: '비밀번호 (4자 이상)', ph_pw_confirm: '비밀번호 확인',
+                ph_fullname: '이름', ph_nick: '닉네임',
+                btn_register: '가입하기', have_account: '이미 계정이 있나요?', go_login: '로그인',
+                // 헤더 / 사이드바
+                logout: '로그아웃', admin_dashboard: '관리자 대시보드',
+                my_status: '내 상태 보기', auto_setup: '자동 설정',
+                // 계정 모달
+                tab_profile: '프로필', tab_password: '비밀번호',
+                label_name: '이름', label_nickname: '닉네임',
+                label_cur_pw: '현재 비밀번호', label_new_pw: '새 비밀번호', label_new_pw2: '새 비밀번호 확인',
+                ph_name: '이름', ph_nickname: '닉네임', ph_cur_pw: '현재 비밀번호',
+                ph_new_pw2: '새 비밀번호 재입력',
+                btn_save: '저장', btn_change: '변경', btn_cancel: '취소',
+                // ops 스트립
+                vpc_not_set: '설정 안 됨', vpc_click_to_set: '클릭하여 VPC 연결 설정',
+                security_monitor: '민감정보 감시', admin_dashboard_access: '관리자 대시보드 접근',
+                // 빈 화면
+                empty_title: '무엇을 만들까요?',
+                empty_sub: '로컬 모델, 이미지 분석, 코드 생성, 프라이빗 VPC — 모든 걸 한 화면에서 이어가세요.',
+                chip_file: '파일 생성 · 코드 초안', chip_vpc: 'VPC 보안 구성 점검', chip_kb: '로컬 지식 정리',
+                chip_file_prompt: '보고서 초안을 만들어줘',
+                chip_vpc_prompt: 'VPC 보안 구성을 점검해줘',
+                chip_kb_prompt: '이 내용을 지식베이스에 정리해줘',
+                // 입력창
+                ph_input: 'Lattice AI에게 작업을 지시하세요...',
+                // 파일 툴바
+                create_file: '파일 만들기', local_files: '로컬 파일',
+                // 패널 제목
+                model_switcher: '모델 스위처',
+                model_switcher_sub: '실행 엔진을 설치하고, 엔진에 맞는 local/cloud LLM을 선택합니다.',
+                // 권한 다이얼로그
+                perm_title: '파일 접근 요청', btn_deny: '거부', btn_allow: '허용',
+            },
+            en: {
+                // Auth
+                login_title: 'Lattice AI', login_sub: 'Local AI Workspace — Apple Silicon',
+                ph_email: 'Email address', ph_password: 'Password', btn_login: 'Log in',
+                no_account: "Don't have an account?", go_register: 'Sign up',
+                register_title: 'Create Account', register_sub: 'Join the Lattice AI workspace',
+                ph_new_pw: 'Password (min. 4 chars)', ph_pw_confirm: 'Confirm password',
+                ph_fullname: 'Full name', ph_nick: 'Nickname',
+                btn_register: 'Sign up', have_account: 'Already have an account?', go_login: 'Log in',
+                // Header / Sidebar
+                logout: 'Logout', admin_dashboard: 'Admin Dashboard',
+                my_status: 'My Status', auto_setup: 'Auto Setup',
+                // Account modal
+                tab_profile: 'Profile', tab_password: 'Password',
+                label_name: 'Name', label_nickname: 'Nickname',
+                label_cur_pw: 'Current Password', label_new_pw: 'New Password', label_new_pw2: 'Confirm New Password',
+                ph_name: 'Name', ph_nickname: 'Nickname', ph_cur_pw: 'Current password',
+                ph_new_pw2: 'Confirm new password',
+                btn_save: 'Save', btn_change: 'Change', btn_cancel: 'Cancel',
+                // Ops strip
+                vpc_not_set: 'Not configured', vpc_click_to_set: 'Click to set up VPC',
+                security_monitor: 'Sensitive data monitor', admin_dashboard_access: 'Admin dashboard access',
+                // Empty state
+                empty_title: 'What would you like to build?',
+                empty_sub: 'Local models, image analysis, code generation, private VPC — all in one workspace.',
+                chip_file: 'Create file · Code draft', chip_vpc: 'Review VPC security', chip_kb: 'Organize knowledge',
+                chip_file_prompt: 'Draft a report for me',
+                chip_vpc_prompt: 'Review my VPC security configuration',
+                chip_kb_prompt: 'Organize this into my knowledge base',
+                // Input
+                ph_input: 'Ask Lattice AI anything...',
+                // File toolbar
+                create_file: 'Create file', local_files: 'Local files',
+                // Panel titles
+                model_switcher: 'Model Switcher',
+                model_switcher_sub: 'Install a runtime engine and select a local/cloud LLM.',
+                // Permission dialog
+                perm_title: 'File Access Request', btn_deny: 'Deny', btn_allow: 'Allow',
+            }
+        };
+        let currentLang = localStorage.getItem('ltcai_lang') || 'ko';
+
+        function t(key) { return (I18N[currentLang] || I18N.ko)[key] || key; }
+
+        function applyI18n() {
+            document.querySelectorAll('[data-i18n]').forEach(el => {
+                el.textContent = t(el.dataset.i18n);
+            });
+            document.querySelectorAll('[data-i18n-ph]').forEach(el => {
+                el.placeholder = t(el.dataset.i18nPh);
+            });
+            // 언어 선택기 active 표시 업데이트
+            ['auth', 'header'].forEach(prefix => {
+                ['ko', 'en'].forEach(lang => {
+                    const el = document.getElementById(`${prefix}-lang-${lang}`);
+                    if (el) el.classList.toggle('active', lang === currentLang);
+                });
+            });
+            const authBtn = document.getElementById('auth-lang-btn');
+            if (authBtn) authBtn.textContent = `🌐 ${currentLang === 'ko' ? '한국어' : 'English'}`;
         }
-        function closePwModal() {
-            document.getElementById('pw-modal-overlay').classList.remove('open');
+
+        function toggleLangMenu(pickerId) {
+            const menu = document.getElementById(`${pickerId}-menu`);
+            if (!menu) return;
+            const isOpen = menu.classList.contains('open');
+            document.querySelectorAll('.lang-picker-menu').forEach(m => m.classList.remove('open'));
+            if (!isOpen) menu.classList.add('open');
         }
+
+        function setLang(lang) {
+            currentLang = lang;
+            localStorage.setItem('ltcai_lang', lang);
+            document.querySelectorAll('.lang-picker-menu').forEach(m => m.classList.remove('open'));
+            applyI18n();
+        }
+
         document.addEventListener('click', (e) => {
-            const overlay = document.getElementById('pw-modal-overlay');
-            if (e.target === overlay) closePwModal();
+            if (!e.target.closest('.lang-picker')) {
+                document.querySelectorAll('.lang-picker-menu').forEach(m => m.classList.remove('open'));
+            }
         });
+
+        function switchAcctTab(tab) {
+            ['profile', 'password'].forEach(t => {
+                document.getElementById(`tab-${t}`).classList.toggle('active', t === tab);
+                document.getElementById(`panel-${t}`).classList.toggle('active', t === tab);
+            });
+        }
+        async function openAcctModal() {
+            ['profile-msg', 'pw-msg'].forEach(id => {
+                const el = document.getElementById(id);
+                el.textContent = ''; el.className = 'pw-msg';
+            });
+            ['pw-cur', 'pw-new', 'pw-new2'].forEach(id => document.getElementById(id).value = '');
+            switchAcctTab('profile');
+            try {
+                const res = await fetch('/account/profile');
+                if (res.ok) {
+                    const data = await res.json();
+                    document.getElementById('profile-name').value = data.name || '';
+                    document.getElementById('profile-nickname').value = data.nickname || '';
+                }
+            } catch {}
+            document.getElementById('acct-modal-overlay').classList.add('open');
+        }
+        function closeAcctModal() {
+            document.getElementById('acct-modal-overlay').classList.remove('open');
+        }
+        document.addEventListener('click', (e) => {
+            const overlay = document.getElementById('acct-modal-overlay');
+            if (e.target === overlay) closeAcctModal();
+        });
+        async function submitProfileChange() {
+            const name = document.getElementById('profile-name').value.trim();
+            const nickname = document.getElementById('profile-nickname').value.trim();
+            const msg = document.getElementById('profile-msg');
+            const btn = document.getElementById('profile-submit-btn');
+            if (!name || !nickname) {
+                msg.textContent = '이름과 닉네임을 입력해주세요.';
+                msg.className = 'pw-msg error';
+                return;
+            }
+            btn.disabled = true; btn.textContent = '저장 중...';
+            try {
+                const res = await fetch('/account/profile', {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name, nickname })
+                });
+                const data = await res.json();
+                if (res.ok) {
+                    currentUserNickname = data.nickname;
+                    localStorage.setItem('ltcai_user_nickname', data.nickname);
+                    document.getElementById('user-nickname-display').innerText = data.nickname;
+                    const av = document.getElementById('user-avatar-initial');
+                    if (av) av.textContent = (data.nickname || 'G')[0].toUpperCase();
+                    msg.textContent = '✅ 프로필이 변경되었습니다.';
+                    msg.className = 'pw-msg success';
+                    setTimeout(closeAcctModal, 1500);
+                } else {
+                    msg.textContent = data.detail || '저장 실패';
+                    msg.className = 'pw-msg error';
+                }
+            } catch {
+                msg.textContent = '서버 연결 실패';
+                msg.className = 'pw-msg error';
+            } finally {
+                btn.disabled = false; btn.textContent = '저장';
+            }
+        }
         async function submitPwChange() {
             const cur = document.getElementById('pw-cur').value;
             const nw = document.getElementById('pw-new').value;
@@ -3373,8 +3651,7 @@
                 msg.className = 'pw-msg error';
                 return;
             }
-            btn.disabled = true;
-            btn.textContent = '변경 중...';
+            btn.disabled = true; btn.textContent = '변경 중...';
             try {
                 const res = await fetch('/account/change-password', {
                     method: 'POST',
@@ -3385,7 +3662,7 @@
                 if (res.ok) {
                     msg.textContent = '✅ 비밀번호가 변경되었습니다.';
                     msg.className = 'pw-msg success';
-                    setTimeout(closePwModal, 1500);
+                    setTimeout(closeAcctModal, 1500);
                 } else {
                     msg.textContent = data.detail || '변경 실패';
                     msg.className = 'pw-msg error';
@@ -3394,8 +3671,7 @@
                 msg.textContent = '서버 연결 실패';
                 msg.className = 'pw-msg error';
             } finally {
-                btn.disabled = false;
-                btn.textContent = '변경';
+                btn.disabled = false; btn.textContent = '변경';
             }
         }
 
@@ -5269,6 +5545,7 @@
         window.addEventListener('focus', tryClipboardReadFallback);
 
         document.getElementById('new-chat-btn').onclick = startNewChat;
+        applyI18n();
         loadModelStatus();
         loadVpcStatus();
         restoreCurrentConversation();