ltcai 3.6.0 → 4.0.1

package/static/v3/js/core/shell.js

@@ -10,12 +10,13 @@ import { store } from "./store.js";
 import { api } from "./api.js";
 import * as c from "./components.js";
 import { createRouter } from "./router.js";
-import { GROUPS, ROUTES, ROUTE_BY_KEY, MODE_RANK, visibleRoutes, loadView } from "./routes.js";
+import { GROUPS, ROUTE_BY_KEY, MODE_RANK, visibleRoutes, loadView, groupLabel, localizeRoute } from "./routes.js";
+import { setI18nLanguage, t } from "./i18n.js";
 
 const MODES = [
-  { key: "basic", label: "Basic", icon: "circle" },
-  { key: "advanced", label: "Advanced", icon: "circles" },
-  { key: "admin", label: "Admin", icon: "shield-half" },
+  { key: "basic", labelKey: "shell.mode.basic", icon: "circle" },
+  { key: "advanced", labelKey: "shell.mode.advanced", icon: "circles" },
+  { key: "admin", labelKey: "shell.mode.admin", icon: "shield-half" },
 ];
 
 const ctxBase = { h, icon, api, store, c };
@@ -27,7 +28,7 @@ let currentRoute = null;
 export function boot(rootEl) {
   rootEl.classList.add("lt3-app");
   rootEl.append(
-    h("a.lt3-skip", { href: "#lt3-view" }, "Skip to content"),
+    h("a.lt3-skip", { href: "#lt3-view" }, t("shell.skip")),
     h("div.lt3-rail__scrim", { on: { click: closeDrawer } }),
     buildRail(),
     buildMain(),
@@ -36,7 +37,7 @@ export function boot(rootEl) {
   cacheEls(rootEl);
   store.subscribe(onStateChange);
 
-  router = createRouter({ onRoute: renderRoute, fallback: "home" });
+  router = createRouter({ onRoute: renderRoute, fallback: "knowledge-graph" });
   wireGlobalKeys();
   router.start();
 
@@ -46,19 +47,19 @@ export function boot(rootEl) {
 
 /* ── Rail ────────────────────────────────────────────────────────────────── */
 function buildRail() {
-  return h("aside.lt3-rail", { id: "lt3-rail", "aria-label": "Primary" },
+  return h("aside.lt3-rail", { id: "lt3-rail", "aria-label": t("shell.primary") },
     h("div.lt3-rail__brand",
       h("div.lt3-rail__logo", { html: latticeMark() }),
-      h("div.lt3-rail__word", h("b", "Lattice AI"), h("small", "Private runtime")),
-      h("button.lt3-iconbtn.lt3-iconbtn--sm.lt3-rail__close", { "aria-label": "Close menu", on: { click: closeDrawer } }, icon("x")),
+      h("div.lt3-rail__word", h("b", "Lattice AI"), h("small", t("shell.privateRuntime"))),
+      h("button.lt3-iconbtn.lt3-iconbtn--sm.lt3-rail__close", { "aria-label": t("shell.closeMenu"), on: { click: closeDrawer } }, icon("x")),
     ),
     h("div.lt3-rail__scope", { id: "lt3-scope" }),
     h("nav.lt3-rail__nav", { id: "lt3-nav", "aria-label": "Sections" }),
     h("div.lt3-rail__foot",
       h("div.lt3-rail__status", { id: "lt3-rail-status" }),
       h("div.lt3-rail__foot-row",
-        h("button.lt3-rail__user", { id: "lt3-user", "aria-label": "Account", on: { click: () => router.navigate("settings") } }),
-        h("button.lt3-iconbtn", { id: "lt3-theme", "aria-label": "Toggle theme", title: "Toggle theme", on: { click: () => store.toggleTheme() } }, icon("moon")),
+        h("button.lt3-rail__user", { id: "lt3-user", "aria-label": t("shell.account"), on: { click: () => router.navigate("account") } }),
+        h("button.lt3-iconbtn", { id: "lt3-theme", "aria-label": t("shell.toggleTheme"), title: t("shell.toggleTheme"), on: { click: () => store.toggleTheme() } }, icon("moon")),
       ),
     ),
   );
@@ -73,7 +74,7 @@ function renderNav() {
     const items = routes.filter((r) => r.group === group.id);
     if (!items.length) continue;
     const groupEl = h("div.lt3-navgroup",
-      h("div.lt3-navgroup__label", group.label),
+      h("div.lt3-navgroup__label", groupLabel(group)),
       items.map((r) => navItem(r)),
     );
     nav.append(groupEl);
@@ -109,7 +110,7 @@ function renderScope() {
   els.scope.replaceChildren(
     h("button.lt3-scope", { "aria-haspopup": "listbox", on: { click: openScopeMenu } },
       h("div.lt3-scope__icon", icon(ws.type === "organization" ? "building-community" : "user")),
-      h("div.lt3-scope__meta", h("b", ws.name), h("small", `${ws.type} · ${ws.your_role || "member"}`)),
+      h("div.lt3-scope__meta", h("b", ws.name), h("small", `${ws.type} · ${ws.your_role || t("shell.member")}`)),
       icon("selector"),
     ),
   );
@@ -120,7 +121,7 @@ function renderUser() {
   const initials = (u.nickname || u.email || "U").slice(0, 2);
   els.user.replaceChildren(
     h("span.lt3-avatar", initials),
-    h("div.lt3-rail__user-meta", h("b", u.nickname || u.email || "You"), h("small", u.role || "local")),
+    h("div.lt3-rail__user-meta", h("b", u.nickname || u.email || t("shell.you")), h("small", u.role || t("shell.local"))),
   );
 }
 
@@ -134,17 +135,17 @@ function updateThemeIcon() {
 function buildMain() {
   return h("div.lt3-main",
     h("header.lt3-topbar",
-      h("button.lt3-iconbtn.lt3-topbar__menu", { "aria-label": "Open menu", on: { click: openDrawer } }, icon("menu-2")),
+      h("button.lt3-iconbtn.lt3-topbar__menu", { "aria-label": t("shell.openMenu"), on: { click: openDrawer } }, icon("menu-2")),
       h("div.lt3-topbar__crumbs", { id: "lt3-crumbs" }),
       h("div.lt3-spacer"),
-      h("button.lt3-cmd-trigger", { "aria-label": "Search and commands", on: { click: openPalette } },
-        icon("search"), h("span", "Search & commands"), h("span.lt3-kbd", "⌘K")),
+      h("button.lt3-cmd-trigger", { "aria-label": t("shell.searchCommands"), on: { click: openPalette } },
+        icon("search"), h("span", { id: "lt3-cmd-text" }, t("shell.searchCommands")), h("span.lt3-kbd", "⌘K")),
       h("div", { id: "lt3-idxchip" }),
-      h("div.lt3-mode", { id: "lt3-mode", role: "tablist", "aria-label": "Workspace mode" },
+      h("div.lt3-mode", { id: "lt3-mode", role: "tablist", "aria-label": t("shell.workspaceMode") },
         MODES.map((m) => h("button", {
           type: "button", role: "tab", dataset: { mode: m.key },
           on: { click: () => store.setMode(m.key) },
-        }, icon(m.icon), h("span", m.label))),
+        }, icon(m.icon), h("span", t(m.labelKey)))),
       ),
     ),
     h("main.lt3-view", { id: "lt3-view", tabindex: "-1" },
@@ -155,13 +156,18 @@ function buildMain() {
 
 function renderMode() {
   $$("#lt3-mode button", els.root).forEach((b) => b.dataset.active = String(b.dataset.mode === store.get().mode));
+  $$("#lt3-mode button", els.root).forEach((b) => {
+    const mode = MODES.find((m) => m.key === b.dataset.mode);
+    const span = $("span", b);
+    if (mode && span) span.textContent = t(mode.labelKey);
+  });
 }
 
 function renderCrumbs() {
   const r = currentRoute;
   if (!r) return;
   const parts = [h("span.lt3-crumb", store.activeWorkspace().name)];
-  if (r.group === "admin") parts.push(icon("chevron-right"), h("span.lt3-crumb", "Admin"));
+  if (r.group === "admin") parts.push(icon("chevron-right"), h("span.lt3-crumb", t("shell.adminCrumb")));
   parts.push(icon("chevron-right"), h("span.lt3-crumb.lt3-crumb--current", r.title || r.label));
   els.crumbs.replaceChildren(...parts);
 }
@@ -171,6 +177,23 @@ function renderIndexChip() {
   renderRailStatus();
 }
 
+function renderChromeText() {
+  const skip = $(".lt3-skip", els.root);
+  if (skip) skip.textContent = t("shell.skip");
+  if (els.cmdText) els.cmdText.textContent = t("shell.searchCommands");
+  const rail = $("#lt3-rail", els.root);
+  if (rail) rail.setAttribute("aria-label", t("shell.primary"));
+  const mode = $("#lt3-mode", els.root);
+  if (mode) mode.setAttribute("aria-label", t("shell.workspaceMode"));
+  const user = $("#lt3-user", els.root);
+  if (user) user.setAttribute("aria-label", t("shell.account"));
+  const theme = $("#lt3-theme", els.root);
+  if (theme) {
+    theme.setAttribute("aria-label", t("shell.toggleTheme"));
+    theme.setAttribute("title", t("shell.toggleTheme"));
+  }
+}
+
 function renderRailStatus() {
   if (!els.railStatus) return;
   const status = store.get().indexStatus;
@@ -181,21 +204,21 @@ function renderRailStatus() {
   els.railStatus.replaceChildren(
     h("div.lt3-rail__status-top",
       h("span.lt3-rail__status-dot", { dataset: { state: unavailable ? "pending" : ready === keys.length ? "ready" : "partial" } }),
-      h("span", unavailable ? "Local index pending" : `${ready}/${keys.length} retrieval signals ready`),
+      h("span", unavailable ? t("shell.indexPending") : t("shell.indexReady", { ready, total: keys.length })),
     ),
-    h("div.lt3-rail__status-sub", unavailable ? "Start backend to sync live state" : "Graph · vector · hybrid"),
+    h("div.lt3-rail__status-sub", unavailable ? t("shell.startBackend") : t("shell.graphVectorHybrid")),
   );
 }
 
 /* ── View rendering ─────────────────────────────────────────────────────── */
 async function renderRoute({ key, params }) {
-  let route = ROUTE_BY_KEY[key] || ROUTE_BY_KEY.home;
+  let route = localizeRoute(ROUTE_BY_KEY[key] || ROUTE_BY_KEY.home);
   // Deep-linking into an admin area surfaces Admin mode so the rail matches.
   if (route.admin && store.get().mode !== "admin") store.setMode("admin");
   currentRoute = route;
   store.setRoute({ key: route.key, params });
 
-  document.title = `${route.title || route.label} · Lattice AI`;
+  document.title = t("shell.documentTitle", { title: route.title || route.label });
   markActive();
   renderCrumbs();
 
@@ -213,7 +236,7 @@ async function renderRoute({ key, params }) {
     outlet.replaceChildren(node);
   } catch (err) {
     console.error("[shell] view render failed:", route.view, err);
-    outlet.replaceChildren(c.errorState(`View "${route.label}" failed to load.`, () => renderRoute({ key: route.key, params })));
+    outlet.replaceChildren(c.errorState(t("shell.viewFailed", { label: route.label }), () => renderRoute({ key: route.key, params })));
   }
 }
 
@@ -230,6 +253,10 @@ function onStateChange(_state, change) {
     case "user": renderUser(); break;
     case "theme": updateThemeIcon(); break;
     case "index": renderIndexChip(); break;
+    case "language":
+      setI18nLanguage(store.get().lang);
+      renderNav(); renderScope(); renderUser(); renderMode(); renderCrumbs(); renderIndexChip(); renderChromeText(); renderCurrent();
+      break;
   }
 }
 
@@ -249,8 +276,8 @@ function openScopeMenu(ev) {
       w.workspace_id === store.get().workspaceId ? icon("check", "") : null,
     )),
     h("div.lt3-menu__sep"),
-    h("button.lt3-menu__item", { on: { click: () => { c.toast("Organization creation opens in Settings", "info"); closeMenus(); router.navigate("settings"); } } },
-      icon("plus"), "New organization"),
+    h("button.lt3-menu__item", { on: { click: () => { c.toast(t("shell.orgCreationOpens"), "info"); closeMenus(); router.navigate("workspace-admin"); } } },
+      icon("plus"), t("shell.newOrganization")),
   );
   document.body.append(menu);
   setTimeout(() => document.addEventListener("click", closeMenusOnce, { once: true }), 0);
@@ -267,16 +294,16 @@ function paletteItems() {
   const mode = store.get().mode;
   const currentRoutes = visibleRoutes(mode);
   const nav = currentRoutes.map((r) => ({
-    group: "Go to", label: r.title || r.label, icon: r.icon, hint: r.label === r.title ? r.group : r.label,
+    group: t("shell.goTo"), label: r.title || r.label, icon: r.icon, hint: r.label === r.title ? groupLabel(GROUPS.find((g) => g.id === r.group) || { labelKey: r.group }) : r.label,
     run: () => router.navigate(r.key),
   }));
   const actions = [
-    { group: "Actions", label: "Toggle light / dark theme", icon: "contrast", run: () => store.toggleTheme() },
-    { group: "Actions", label: "Mode: Basic", icon: "circle", run: () => store.setMode("basic") },
-    { group: "Actions", label: "Mode: Advanced", icon: "circles", run: () => store.setMode("advanced") },
-    { group: "Actions", label: "Mode: Admin", icon: "shield-half", run: () => store.setMode("admin") },
-    { group: "Actions", label: "New chat", icon: "message-plus", run: () => router.navigate("chat", { new: "1" }) },
-    { group: "Actions", label: "Run hybrid search", icon: "arrows-join", run: () => router.navigate("hybrid-search") },
+    { group: t("shell.actions"), label: t("shell.toggleLightDark"), icon: "contrast", run: () => store.toggleTheme() },
+    { group: t("shell.actions"), label: `${t("common.status")}: ${t("shell.mode.basic")}`, icon: "circle", run: () => store.setMode("basic") },
+    { group: t("shell.actions"), label: `${t("common.status")}: ${t("shell.mode.advanced")}`, icon: "circles", run: () => store.setMode("advanced") },
+    { group: t("shell.actions"), label: `${t("common.status")}: ${t("shell.mode.admin")}`, icon: "shield-half", run: () => store.setMode("admin") },
+    { group: t("shell.actions"), label: t("shell.newChat"), icon: "message-plus", run: () => router.navigate("chat", { new: "1" }) },
+    { group: t("shell.actions"), label: t("shell.runHybridSearch"), icon: "arrows-join", run: () => router.navigate("hybrid-search") },
   ];
   return [...nav, ...actions];
 }
@@ -287,8 +314,8 @@ function openPalette() {
   let active = 0, filtered = all;
 
   const listEl = h("div.lt3-palette__list");
-  const input = h("input", { type: "text", placeholder: "Search views, run a command…", "aria-label": "Command palette", autocomplete: "off" });
-  const palette = h("div.lt3-palette", { id: "lt3-palette", role: "dialog", "aria-modal": "true", "aria-label": "Command palette" },
+  const input = h("input", { type: "text", placeholder: t("shell.palettePlaceholder"), "aria-label": t("shell.commandPalette"), autocomplete: "off" });
+  const palette = h("div.lt3-palette", { id: "lt3-palette", role: "dialog", "aria-modal": "true", "aria-label": t("shell.commandPalette") },
     h("div.lt3-palette__input", icon("search"), input, h("span.lt3-kbd", "Esc")),
     listEl,
   );
@@ -298,7 +325,7 @@ function openPalette() {
 
   function renderList() {
     listEl.replaceChildren();
-    if (!filtered.length) { listEl.append(h("div.lt3-palette__empty", "No matches")); return; }
+    if (!filtered.length) { listEl.append(h("div.lt3-palette__empty", t("shell.noMatches"))); return; }
     let lastGroup = null;
     filtered.forEach((item, i) => {
       if (item.group !== lastGroup) { listEl.append(h("div.lt3-palette__group-label", item.group)); lastGroup = item.group; }
@@ -366,6 +393,7 @@ function cacheEls(root) {
     theme: $("#lt3-theme", root),
     crumbs: $("#lt3-crumbs", root),
     idxchip: $("#lt3-idxchip", root),
+    cmdText: $("#lt3-cmd-text", root),
     railStatus: $("#lt3-rail-status", root),
     outlet: $("#lt3-outlet", root),
     view: $("#lt3-view", root),
@@ -377,6 +405,7 @@ function cacheEls(root) {
   updateThemeIcon();
   renderIndexChip();
   renderRailStatus();
+  renderChromeText();
 }
 
 function latticeMark() {

package/static/v3/js/core/{store.34ebd5e6.js → store.7b2aa044.js}

@@ -9,6 +9,7 @@ const LS = {
   theme: "lt-theme",        // shared with the rest of Lattice (data-lt-theme)
   mode: "lt3-mode",
   workspace: "lt3-workspace",
+  lang: "lt3-lang",
 };
 
 function load(key, fallback) {
@@ -23,6 +24,7 @@ const VALID_MODES = ["basic", "advanced", "admin"];
 
 const state = {
   theme: load(LS.theme, ""),                 // "" → follow OS
+  lang: load(LS.lang, "en"),
   mode: VALID_MODES.includes(load(LS.mode)) ? load(LS.mode) : "basic",
   workspaceId: load(LS.workspace, "personal"),
   workspaces: [
@@ -30,7 +32,7 @@ const state = {
   ],
   user: { email: "", nickname: "You", role: "user" },
   indexStatus: null,
-  route: { key: "home", params: {} },
+  route: { key: "knowledge-graph", params: {} },
 };
 
 const subscribers = new Set();
@@ -67,6 +69,14 @@ export const store = {
     store.setTheme(effective === "dark" ? "light" : "dark");
   },
 
+  setLang(lang) {
+    const value = lang === "ko" ? "ko" : "en";
+    if (value === state.lang) return;
+    state.lang = value;
+    save(LS.lang, value);
+    emit({ type: "language" });
+  },
+
   /* ── Mode ──────────────────────────────────────────────── */
   setMode(mode) {
     if (!VALID_MODES.includes(mode) || mode === state.mode) return;

package/static/v3/js/core/store.js

@@ -9,6 +9,7 @@ const LS = {
   theme: "lt-theme",        // shared with the rest of Lattice (data-lt-theme)
   mode: "lt3-mode",
   workspace: "lt3-workspace",
+  lang: "lt3-lang",
 };
 
 function load(key, fallback) {
@@ -23,6 +24,7 @@ const VALID_MODES = ["basic", "advanced", "admin"];
 
 const state = {
   theme: load(LS.theme, ""),                 // "" → follow OS
+  lang: load(LS.lang, "en"),
   mode: VALID_MODES.includes(load(LS.mode)) ? load(LS.mode) : "basic",
   workspaceId: load(LS.workspace, "personal"),
   workspaces: [
@@ -30,7 +32,7 @@ const state = {
   ],
   user: { email: "", nickname: "You", role: "user" },
   indexStatus: null,
-  route: { key: "home", params: {} },
+  route: { key: "knowledge-graph", params: {} },
 };
 
 const subscribers = new Set();
@@ -67,6 +69,14 @@ export const store = {
     store.setTheme(effective === "dark" ? "light" : "dark");
   },
 
+  setLang(lang) {
+    const value = lang === "ko" ? "ko" : "en";
+    if (value === state.lang) return;
+    state.lang = value;
+    save(LS.lang, value);
+    emit({ type: "language" });
+  },
+
   /* ── Mode ──────────────────────────────────────────────── */
   setMode(mode) {
     if (!VALID_MODES.includes(mode) || mode === state.mode) return;

package/static/v3/js/views/account.eff40715.js

@@ -0,0 +1,143 @@
+import { t } from "../core/i18n.880e1fec.js";
+
+export async function render(ctx) {
+  const { h, icon, api, store, c, toast } = ctx;
+  const host = h("div.lt3-stack-6", c.loading({ lines: 4 }));
+
+  async function load() {
+    const [profile, sso] = await Promise.all([api.profile(), api.ssoConfig()]);
+    host.replaceChildren(
+      c.viewHeader({
+        eyebrow: t("account.eyebrow"),
+        title: t("account.title"),
+        sub: t("account.sub"),
+        actions: [c.sourceBadge(profile.ok ? "live" : "unavailable")],
+      }),
+      profile.ok && profile.data ? signedInPanel(profile.data, sso.data || {}) : authPanel(sso.data || {}),
+    );
+    if (profile.ok && profile.data) {
+      store.setUser({
+        email: profile.data.email || "",
+        nickname: profile.data.nickname || profile.data.name || profile.data.email || t("shell.you"),
+        role: profile.data.role || "user",
+      });
+    }
+  }
+
+  function authPanel(sso) {
+    const email = input("email", t("account.email"));
+    const password = input("password", t("account.password"));
+    const regEmail = input("email", t("account.email"));
+    const regName = input("text", t("account.name"));
+    const regNick = input("text", t("account.nickname"));
+    const regPassword = input("password", t("account.password"));
+
+    async function doLogin() {
+      const res = await api.login(email.value.trim(), password.value);
+      toast(resultText(res, t("account.loginOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+    async function doRegister() {
+      const res = await api.register({
+        email: regEmail.value.trim(),
+        password: regPassword.value,
+        name: regName.value.trim(),
+        nickname: regNick.value.trim(),
+      });
+      toast(resultText(res, t("account.registerOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+
+    return h("div.lt3-grid-2",
+      c.panel({
+        title: t("account.login"),
+        children: h("div.lt3-stack-4",
+          field(ctx, t("account.email"), email),
+          field(ctx, t("account.password"), password),
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: doLogin } }, icon("login"), t("account.login")),
+        ),
+      }),
+      c.panel({
+        title: t("account.register"),
+        sub: t("account.passwordRule"),
+        children: h("div.lt3-stack-4",
+          field(ctx, t("account.email"), regEmail),
+          field(ctx, t("account.name"), regName),
+          field(ctx, t("account.nickname"), regNick),
+          field(ctx, t("account.password"), regPassword),
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: doRegister } }, icon("user-plus"), t("account.register")),
+          sso && sso.enabled ? c.banner(t("account.sso"), "info") : null,
+        ),
+      }),
+    );
+  }
+
+  function signedInPanel(profile, sso) {
+    const name = input("text", t("account.name"), profile.name || "");
+    const nick = input("text", t("account.nickname"), profile.nickname || "");
+    const current = input("password", t("account.currentPassword"));
+    const next = input("password", t("account.newPassword"));
+
+    async function saveProfile() {
+      const res = await api.updateProfile({ name: name.value.trim(), nickname: nick.value.trim() });
+      toast(resultText(res, t("account.profileOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+    async function savePassword() {
+      const res = await api.changePassword(current.value, next.value);
+      toast(resultText(res, t("account.passwordOk")), res.ok ? "ok" : "err");
+      if (res.ok) { current.value = ""; next.value = ""; }
+    }
+    async function doLogout() {
+      const res = await api.logout();
+      toast(resultText(res, t("account.logoutOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+
+    return h("div.lt3-grid-2",
+      c.panel({
+        title: t("account.profile"),
+        actions: [c.statePill(t("account.signedIn"))],
+        children: h("div.lt3-stack-4",
+          h("dl.lt3-keyval",
+            h("dt", t("account.email")), h("dd", h("span.lt3-mono", profile.email || "—")),
+            h("dt", t("common.role")), h("dd", c.pill(profile.role || "user", "info")),
+            h("dt", t("account.sso")), h("dd", c.statePill(sso && sso.enabled ? "ready" : "idle")),
+          ),
+          field(ctx, t("account.name"), name),
+          field(ctx, t("account.nickname"), nick),
+          h("div.lt3-row-2",
+            h("button.lt3-btn.lt3-btn--primary", { on: { click: saveProfile } }, icon("device-floppy"), t("common.save")),
+            h("button.lt3-btn.lt3-btn--ghost", { on: { click: doLogout } }, icon("logout"), t("account.logout")),
+          ),
+        ),
+      }),
+      c.panel({
+        title: t("account.changePassword"),
+        sub: t("account.passwordRule"),
+        children: h("div.lt3-stack-4",
+          field(ctx, t("account.currentPassword"), current),
+          field(ctx, t("account.newPassword"), next),
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: savePassword } }, icon("key"), t("account.changePassword")),
+        ),
+      }),
+    );
+  }
+
+  await load();
+  return host;
+
+  function input(type, label, value = "") {
+    return h("input.lt3-input", { type, value, autocomplete: type === "password" ? "current-password" : "on", "aria-label": label });
+  }
+}
+
+function field({ h }, label, control) {
+  return h("div.lt3-field", h("label.lt3-label", label), control);
+}
+
+function resultText(res, okText) {
+  if (res && res.ok) return okText;
+  const data = (res && res.data) || {};
+  return String(data.detail || data.error || res?.error || t("common.unavailable"));
+}

package/static/v3/js/views/account.js

@@ -0,0 +1,143 @@
+import { t } from "../core/i18n.js";
+
+export async function render(ctx) {
+  const { h, icon, api, store, c, toast } = ctx;
+  const host = h("div.lt3-stack-6", c.loading({ lines: 4 }));
+
+  async function load() {
+    const [profile, sso] = await Promise.all([api.profile(), api.ssoConfig()]);
+    host.replaceChildren(
+      c.viewHeader({
+        eyebrow: t("account.eyebrow"),
+        title: t("account.title"),
+        sub: t("account.sub"),
+        actions: [c.sourceBadge(profile.ok ? "live" : "unavailable")],
+      }),
+      profile.ok && profile.data ? signedInPanel(profile.data, sso.data || {}) : authPanel(sso.data || {}),
+    );
+    if (profile.ok && profile.data) {
+      store.setUser({
+        email: profile.data.email || "",
+        nickname: profile.data.nickname || profile.data.name || profile.data.email || t("shell.you"),
+        role: profile.data.role || "user",
+      });
+    }
+  }
+
+  function authPanel(sso) {
+    const email = input("email", t("account.email"));
+    const password = input("password", t("account.password"));
+    const regEmail = input("email", t("account.email"));
+    const regName = input("text", t("account.name"));
+    const regNick = input("text", t("account.nickname"));
+    const regPassword = input("password", t("account.password"));
+
+    async function doLogin() {
+      const res = await api.login(email.value.trim(), password.value);
+      toast(resultText(res, t("account.loginOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+    async function doRegister() {
+      const res = await api.register({
+        email: regEmail.value.trim(),
+        password: regPassword.value,
+        name: regName.value.trim(),
+        nickname: regNick.value.trim(),
+      });
+      toast(resultText(res, t("account.registerOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+
+    return h("div.lt3-grid-2",
+      c.panel({
+        title: t("account.login"),
+        children: h("div.lt3-stack-4",
+          field(ctx, t("account.email"), email),
+          field(ctx, t("account.password"), password),
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: doLogin } }, icon("login"), t("account.login")),
+        ),
+      }),
+      c.panel({
+        title: t("account.register"),
+        sub: t("account.passwordRule"),
+        children: h("div.lt3-stack-4",
+          field(ctx, t("account.email"), regEmail),
+          field(ctx, t("account.name"), regName),
+          field(ctx, t("account.nickname"), regNick),
+          field(ctx, t("account.password"), regPassword),
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: doRegister } }, icon("user-plus"), t("account.register")),
+          sso && sso.enabled ? c.banner(t("account.sso"), "info") : null,
+        ),
+      }),
+    );
+  }
+
+  function signedInPanel(profile, sso) {
+    const name = input("text", t("account.name"), profile.name || "");
+    const nick = input("text", t("account.nickname"), profile.nickname || "");
+    const current = input("password", t("account.currentPassword"));
+    const next = input("password", t("account.newPassword"));
+
+    async function saveProfile() {
+      const res = await api.updateProfile({ name: name.value.trim(), nickname: nick.value.trim() });
+      toast(resultText(res, t("account.profileOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+    async function savePassword() {
+      const res = await api.changePassword(current.value, next.value);
+      toast(resultText(res, t("account.passwordOk")), res.ok ? "ok" : "err");
+      if (res.ok) { current.value = ""; next.value = ""; }
+    }
+    async function doLogout() {
+      const res = await api.logout();
+      toast(resultText(res, t("account.logoutOk")), res.ok ? "ok" : "err");
+      if (res.ok) load();
+    }
+
+    return h("div.lt3-grid-2",
+      c.panel({
+        title: t("account.profile"),
+        actions: [c.statePill(t("account.signedIn"))],
+        children: h("div.lt3-stack-4",
+          h("dl.lt3-keyval",
+            h("dt", t("account.email")), h("dd", h("span.lt3-mono", profile.email || "—")),
+            h("dt", t("common.role")), h("dd", c.pill(profile.role || "user", "info")),
+            h("dt", t("account.sso")), h("dd", c.statePill(sso && sso.enabled ? "ready" : "idle")),
+          ),
+          field(ctx, t("account.name"), name),
+          field(ctx, t("account.nickname"), nick),
+          h("div.lt3-row-2",
+            h("button.lt3-btn.lt3-btn--primary", { on: { click: saveProfile } }, icon("device-floppy"), t("common.save")),
+            h("button.lt3-btn.lt3-btn--ghost", { on: { click: doLogout } }, icon("logout"), t("account.logout")),
+          ),
+        ),
+      }),
+      c.panel({
+        title: t("account.changePassword"),
+        sub: t("account.passwordRule"),
+        children: h("div.lt3-stack-4",
+          field(ctx, t("account.currentPassword"), current),
+          field(ctx, t("account.newPassword"), next),
+          h("button.lt3-btn.lt3-btn--primary", { on: { click: savePassword } }, icon("key"), t("account.changePassword")),
+        ),
+      }),
+    );
+  }
+
+  await load();
+  return host;
+
+  function input(type, label, value = "") {
+    return h("input.lt3-input", { type, value, autocomplete: type === "password" ? "current-password" : "on", "aria-label": label });
+  }
+}
+
+function field({ h }, label, control) {
+  return h("div.lt3-field", h("label.lt3-label", label), control);
+}
+
+function resultText(res, okText) {
+  if (res && res.ok) return okText;
+  const data = (res && res.data) || {};
+  return String(data.detail || data.error || res?.error || t("common.unavailable"));
+}