webcake-storefront-mcp 1.1.2 → 1.1.4

package/dist/changelog.json

@@ -0,0 +1,44 @@
+[
+  {
+    "v": "1.1.4",
+    "d": "23/06/2026",
+    "type": "Added",
+    "en": "The remote landing page served by the serve command now includes a \"What's new\" section that renders a version timeline loaded from a build-time…",
+    "vi": "Trang landing của lệnh serve nay có thêm mục \"Có gì mới\" hiển thị timeline lịch sử phiên bản được tải từ file changelog.json sinh ra lúc build (từ…"
+  },
+  {
+    "v": "1.1.3",
+    "d": "23/06/2026",
+    "type": "Changed",
+    "en": "The install command's interactive wizard now runs a three-step flow: environment selection (prod / staging / local), authentication, then IDE…",
+    "vi": "Trình hướng dẫn tương tác của lệnh install nay chạy theo 3 bước: chọn môi trường (prod / staging / local), xác thực, rồi cấu hình IDE."
+  },
+  {
+    "v": "1.1.2",
+    "d": "23/06/2026",
+    "type": "Fixed",
+    "en": "The server no longer crashes at startup in container environments built with npm ci --ignore-scripts; the better-sqlite3 native SQLite module has…",
+    "vi": "Server không còn bị crash khi khởi động trong môi trường container được build bằng npm ci --ignore-scripts; module SQLite native better-sqlite3 đã…"
+  },
+  {
+    "v": "1.1.1",
+    "d": "23/06/2026",
+    "type": "Added",
+    "en": "The serve command's OAuth token store now optionally uses Postgres (via DATABASE_URL) for durable persistence across restarts and shared state…",
+    "vi": "Kho lưu trữ token OAuth của lệnh serve nay hỗ trợ tùy chọn sử dụng Postgres (qua DATABASE_URL) để lưu token bền vững qua các lần khởi động lại và…"
+  },
+  {
+    "v": "1.1.0",
+    "d": "23/06/2026",
+    "type": "Added",
+    "en": "The serve (remote Streamable-HTTP) mode now embeds a full OAuth 2.1 Authorization Server at /authorize, /token, /revoke, /register, and…",
+    "vi": "Chế độ serve (remote Streamable-HTTP) nay tích hợp sẵn một Authorization Server OAuth 2.1 đầy đủ tại các endpoint /authorize, /token, /revoke,…"
+  },
+  {
+    "v": "1.0.3",
+    "d": "23/06/2026",
+    "type": "Added",
+    "en": "MIT license (Copyright vuluu2k) added to the package.",
+    "vi": "Thêm giấy phép MIT (Copyright vuluu2k) vào package."
+  }
+]

package/dist/index.js

@@ -8,7 +8,7 @@ Usage: npx -y webcake-storefront-mcp [command] [options]
 
 Commands:
   (none)             start the stdio MCP server (use this in IDE configs)
-  install            configure the server in your IDE(s) — interactive or via flags
+  install            configure the server in your IDE(s) — interactive (env + browser login/token) or via flags
   uninstall          remove the server from your IDE configs
   login              grab your token via the browser (saved to the local config db)
   serve [--port N]   run the remote Streamable-HTTP server (default 8787; or PORT env)

package/dist/install.js

@@ -5,6 +5,7 @@ import { homedir } from "node:os";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import { createInterface } from "node:readline/promises";
+import { runLogin } from "./auth/login.js";
 const SERVER_KEY = "webcake-storefront";
 function parseArgs(argv) {
     const o = { uninstall: false, ides: [] };
@@ -100,34 +101,72 @@ function applyToIde(ide, opts, launch, env) {
     writeJson(cfg.path, json);
     return `${ide}: configured (${cfg.path})`;
 }
-async function promptMissing(opts) {
-    if (!process.stdin.isTTY)
-        return;
+/**
+ * Interactive wizard (TTY only): pick environment → authenticate (browser login,
+ * recommended, or paste a token) → pick IDEs. Mirrors webcake-landing-mcp's
+ * installer. Returns whether a browser login completed (token then lives in the
+ * local config db, so it is NOT written into the IDE env block).
+ */
+async function promptInteractive(opts) {
+    let loggedIn = false;
+    if (!process.stdin.isTTY || !process.stdout.isTTY)
+        return { loggedIn };
     const rl = createInterface({ input: process.stdin, output: process.stderr });
     try {
-        if (!opts.ides.length) {
-            const ans = (await rl.question(`IDE(s) [${ALL_IDES.join(", ")}, all]: `)).trim();
-            opts.ides = ans === "all" || ans === "" ? ALL_IDES : ans.split(",").map((s) => s.trim());
+        // 1) Environment — drives which API/app URLs are used (default prod).
+        if (!opts.uninstall && !opts.env && !process.env.WEBCAKE_ENV) {
+            const e = (await rl.question("Environment [prod] / staging / local: ")).trim().toLowerCase();
+            if (e === "staging" || e === "local")
+                opts.env = e;
         }
+        if (opts.env)
+            process.env.WEBCAKE_ENV = opts.env; // so the login flow opens the right app
+        // 2) Authentication — browser login (recommended) or paste a token. An explicit
+        //    --token/--jwt or an ambient WEBCAKE_TOKEN skips this entirely.
         if (!opts.uninstall && !opts.token && !process.env.WEBCAKE_TOKEN) {
-            const t = (await rl.question("Token (paste JWT, or leave blank to set later): ")).trim();
-            if (t)
-                opts.token = t;
+            console.error("\nHow do you want to connect your WebCake account?");
+            console.error("  1) Log in via browser   (recommended — opens WebCake, saves a token)");
+            console.error("  2) Paste a token manually");
+            const choice = (await rl.question("Choose [1]: ")).trim() || "1";
+            if (choice === "1") {
+                try {
+                    rl.pause();
+                    await runLogin([]); // loopback browser flow → saves token + session to local config db
+                    loggedIn = true;
+                }
+                catch (e) {
+                    console.error(`Login didn't complete (${e?.message ?? e}). Paste a token now, or run \`npx -y webcake-storefront-mcp login\` later.`);
+                }
+            }
+            if (!loggedIn && choice !== "1") {
+                const t = (await rl.question("  Token (paste JWT): ")).trim();
+                if (t)
+                    opts.token = t;
+                const s = (await rl.question("  Session id (x-session-id): ")).trim();
+                if (s)
+                    opts.sessionId = s;
+            }
         }
-        if (!opts.uninstall && !opts.sessionId && !process.env.WEBCAKE_SESSION_ID) {
-            const s = (await rl.question("Session id (x-session-id, or leave blank to set later): ")).trim();
-            if (s)
-                opts.sessionId = s;
+        // 3) IDEs to configure.
+        if (!opts.ides.length) {
+            const ans = (await rl.question(`\nIDE(s) to configure [${ALL_IDES.join(", ")}, all]: `)).trim();
+            opts.ides = ans === "all" || ans === "" ? ALL_IDES : ans.split(",").map((s) => s.trim());
         }
         // Site is chosen at runtime — use the list_my_sites / switch_site tools in chat.
     }
     finally {
-        rl.close();
+        try {
+            rl.close();
+        }
+        catch {
+            /* already closed */
+        }
     }
+    return { loggedIn };
 }
 export async function runInstaller(argv) {
     const opts = parseArgs(argv);
-    await promptMissing(opts);
+    const { loggedIn } = await promptInteractive(opts);
     let ides = opts.ides.length ? opts.ides : ALL_IDES;
     if (ides.includes("all"))
         ides = ALL_IDES;
@@ -136,6 +175,9 @@ export async function runInstaller(argv) {
     console.error(opts.uninstall ? "Removing webcake-storefront MCP…" : "Configuring webcake-storefront MCP…");
     for (const ide of ides)
         console.error("  " + applyToIde(ide, opts, launch, env));
-    if (!opts.uninstall)
+    if (!opts.uninstall) {
+        if (loggedIn)
+            console.error("\n✓ Logged in — your token is saved to the local config (no token written into IDE files).");
         console.error("\nDone. Restart your IDE to pick up the new MCP server.");
+    }
 }

package/dist/legal.js

@@ -13,7 +13,7 @@ function page(title, bodyHtml) {
 <style>
   :root{color-scheme:light dark}
   body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;color:#1e293b;background:#f8fafc}
-  @media(prefers-color-scheme:dark){body{color:#e2e8f0;background:#0f172a}}
+  @media(prefers-color-scheme:dark){body{color:#eaf1ee;background:#0f1714}a{color:#6fe6c0}}
   main{max-width:760px;margin:0 auto;padding:48px 24px 80px}
   h1{font-size:1.9rem;margin:0 0 4px}
   h2{font-size:1.2rem;margin:32px 0 8px}

package/dist/web-guide.js

@@ -14,7 +14,11 @@
  *
  * Self-contained (inline CSS + JS, no external fonts/trackers) so it loads instantly.
  */
-const MCP_REMOTE_URL = "https://store.toolvn.io.vn/mcp";
+import { readFileSync } from "node:fs";
+// The SPA page (on the builder app) that shows the user their personal remote
+// connector link with login already built in — see builderx_spa McpRemoteStore.vue
+// (/mcp-remote-store). The raw MCP endpoint itself is {ENDPOINT} = <origin>/mcp.
+const MCP_REMOTE_URL = "https://webcake.io/mcp-remote-store";
 const INSTALL_CMD = "npx -y webcake-storefront-mcp install";
 const INSTALL_ALL_CMD = "npx -y webcake-storefront-mcp install --ide all --token &lt;TOKEN&gt; --session &lt;SESSION&gt;";
 const GITHUB_URL = "https://github.com/vuluu2k/webcake-storefront-mcp";
@@ -226,15 +230,15 @@ const T = {
             '<b>Mở lại ứng dụng AI.</b> Khi thấy <code class="inl">webcake-storefront</code> xuất hiện trong danh sách công cụ là bạn đã kết nối thành công — hãy thử nói "Tạo cho tôi trang sản phẩm…"',
         ],
         m1Note: "Muốn cài cho nhiều ứng dụng cùng lúc — dùng lệnh này:",
-        m2Tag: "Cách ② · Dùng ngay trên trình duyệt (claude.ai) — không cần cài gì",
-        m2Sub: "Phù hợp khi bạn dùng Claude trên web (claude.ai) hoặc không muốn cài thêm gì trên máy. Chỉ cần thêm địa chỉ kết nối, đăng nhập WebCake là dùng được.",
+        m2Tag: "Cách ② · Dùng link — không cần cài gì",
+        m2Sub: "Phù hợp khi bạn dùng Claude trên web (claude.ai), máy không cài được phần mềm, hoặc dùng theo nhóm.",
         m2Steps: [
-            '<b>Copy địa chỉ kết nối</b> bên dưới:<a class="btn" href="{REMOTE}">{REMOTE} {ARROW}</a>',
-            '<b>Mở ứng dụng AI của bạn:</b><br>• claude.ai: vào <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: mở file <code class="inl">.mcp.json</code>',
-            "<b>Dán địa chỉ vừa copy vào</b> — trình duyệt sẽ mở trang đăng nhập WebCake tự động:<pre>{REMOTE}</pre>",
-            "<b>Bấm Thêm</b> (hoặc lưu file). Khi biểu tượng WebCake chuyển màu tím là kết nối thành công. Nói \"Tạo cho tôi trang…\" là bắt đầu được.",
+            '<b>Lấy link riêng của bạn</b> (đã gắn sẵn mã đăng nhập) — mở trang dưới đây rồi bấm <b>Copy</b>:<a class="btn" href="{REMOTE}">Mở {REMOTE_HOST} {ARROW}</a>',
+            '<b>Vào nơi thêm kết nối</b> trong ứng dụng:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: mở file <code class="inl">.mcp.json</code>',
+            "<b>Dán link</b> bạn vừa copy (trông giống như):<pre>{ENDPOINT}?jwt=&lt;MÃ CỦA BẠN&gt;&amp;session_id=&lt;PHIÊN CỦA BẠN&gt;</pre>",
+            "<b>Bấm Add</b> (hoặc lưu file) rồi chờ một chút. Khi biểu tượng WebCake chuyển xanh là dùng được.",
         ],
-        m2Note: "Bạn chỉ cần đăng nhập một lần. Sau đó có thể chuyển đổi giữa các cửa hàng của mình ngay trong cuộc trò chuyện.",
+        m2Note: "⚠️ Link có chứa mã đăng nhập riêng của bạn — hãy coi như mật khẩu, đừng chia sẻ cho ai.",
         toolsH2: "Trợ lý có thể giúp bạn làm gì",
         toolsSub: "Nói chuyện bình thường với trợ lý — bạn không cần biết tên công cụ hay lệnh nào cả.",
         toolGroups: [
@@ -278,6 +282,9 @@ const T = {
         promptSub: "Bạn có thể nói tự nhiên bằng tiếng Việt. Ví dụ:",
         promptEx: "Tạo cho tôi một trang sản phẩm trên WebCake cho thương hiệu [tên thương hiệu].\nTrang cần có: ảnh sản phẩm lớn, tên và giá, mô tả ngắn, nút \"Mua ngay\".\nKiểm tra kỹ trước khi lưu, rồi xuất bản lên cửa hàng của tôi.",
         faqH2: "Câu hỏi thường gặp",
+        newH2: "Có gì mới",
+        newBadge: "MỚI",
+        clMore: "Xem tất cả thay đổi",
         starH2: "Thấy hữu ích? Tặng dự án một ngôi sao nhé",
         starP: "Đây là dự án miễn phí, mã nguồn mở — mỗi ngôi sao là một lời động viên để dự án tiếp tục phát triển và giúp nhiều người tìm ra nó hơn.",
         starBtn: "Tặng sao trên GitHub",
@@ -289,6 +296,7 @@ const T = {
             { href: "#build", label: "Tạo được gì" },
             { href: "#connect", label: "Kết nối" },
             { href: "#tools", label: "Trợ lý làm gì" },
+            { href: "#new", label: "Có gì mới" },
             { href: "#faq", label: "Hỏi đáp" },
         ],
     },
@@ -384,15 +392,15 @@ const T = {
             '<b>Reopen your AI app.</b> When you see <code class="inl">webcake-storefront</code> in the tools list, you\'re connected — try saying "Create a product page for…"',
         ],
         m1Note: "Want to set up multiple apps at once — use this command:",
-        m2Tag: "Option ② · In your browser (claude.ai) — nothing to install",
-        m2Sub: "Best if you use Claude on the web (claude.ai) or prefer not to install anything. Just add the connection address, sign in to WebCake, and you're ready.",
+        m2Tag: "Way ② · Use a link — nothing to install",
+        m2Sub: "Best if you use Claude on the web (claude.ai), can't install software, or work as a team.",
         m2Steps: [
-            '<b>Copy the connection address</b> below:<a class="btn" href="{REMOTE}">{REMOTE} {ARROW}</a>',
-            '<b>Open your AI app:</b><br>• claude.ai: go to <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: open <code class="inl">.mcp.json</code>',
-            "<b>Paste the address you copied</b> — your browser will open the WebCake login page automatically:<pre>{REMOTE}</pre>",
-            "<b>Click Add</b> (or save the file). When the WebCake icon turns purple, you're connected. Just say \"Create a page for…\" to get started.",
+            '<b>Get your personal link</b> (your login is built in) — open the page below and hit <b>Copy</b>:<a class="btn" href="{REMOTE}">Open {REMOTE_HOST} {ARROW}</a>',
+            '<b>Open where you add a connection</b> in your app:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: open <code class="inl">.mcp.json</code>',
+            "<b>Paste the link</b> you just copied (it looks like):<pre>{ENDPOINT}?jwt=&lt;YOUR TOKEN&gt;&amp;session_id=&lt;YOUR SESSION&gt;</pre>",
+            "<b>Click Add</b> (or save the file) and wait a moment. When the WebCake icon turns green, you're good to go.",
         ],
-        m2Note: "You only need to sign in once. After that you can switch between your stores anytime during a conversation.",
+        m2Note: "⚠️ This link contains your personal login — treat it like a password and don't share it.",
         toolsH2: "What your assistant can help you do",
         toolsSub: "Just talk to your assistant naturally — you don't need to know any tool names or commands.",
         toolGroups: [
@@ -436,6 +444,9 @@ const T = {
         promptSub: "You can speak naturally. For example:",
         promptEx: "Create a product page on my WebCake store for [brand name].\nThe page should have: a large product image, name and price, a short description, and a \"Buy Now\" button.\nPlease check everything looks right before saving, then publish it to my store.",
         faqH2: "Frequently asked questions",
+        newH2: "What's new",
+        newBadge: "NEW",
+        clMore: "See all changes",
         starH2: "Find it useful? Give the project a star",
         starP: "It's a free, open-source project — every star is a little encouragement to keep it growing and helps more people find it.",
         starBtn: "Star on GitHub",
@@ -447,10 +458,38 @@ const T = {
             { href: "#build", label: "What you build" },
             { href: "#connect", label: "Connect" },
             { href: "#tools", label: "What it does" },
+            { href: "#new", label: "What's new" },
             { href: "#faq", label: "FAQ" },
         ],
     },
 };
+const CHANGELOG = loadChangelog();
+function loadChangelog() {
+    try {
+        const raw = readFileSync(new URL("./changelog.json", import.meta.url), "utf8");
+        const data = JSON.parse(raw);
+        return Array.isArray(data) ? data : [];
+    }
+    catch {
+        return [];
+    }
+}
+// English Keep-a-Changelog section names → short Vietnamese tags (en uses the raw name).
+const CL_TYPE_VI = {
+    Added: "Thêm mới",
+    Changed: "Cải tiến",
+    Fixed: "Sửa lỗi",
+    Removed: "Gỡ bỏ",
+    Deprecated: "Ngừng dùng",
+    Security: "Bảo mật",
+    Internal: "Nội bộ",
+};
+function clTag(type, lang) {
+    if (!type)
+        return "";
+    const label = lang === "vi" ? (CL_TYPE_VI[type] ?? "") : type;
+    return label ? ` <span class="cl-tag">${label}</span>` : "";
+}
 function steps(items) {
     return items
         .map((body, i) => `<li><span class="n">${i + 1}</span><div class="body">${body}</div></li>`)
@@ -504,8 +543,10 @@ export function guideHtml(origin, lang = "vi") {
         ],
     };
     const jsonLdScript = JSON.stringify(jsonLd).replace(/</g, "\\u003c");
+    const remoteHost = MCP_REMOTE_URL.replace("https://", "");
     const fill = (s) => s
         .replaceAll("{REMOTE}", MCP_REMOTE_URL)
+        .replaceAll("{REMOTE_HOST}", remoteHost)
         .replaceAll("{ENDPOINT}", endpoint)
         .replaceAll("{ARROW}", icon("arrow"));
     return `<!doctype html>
@@ -546,10 +587,10 @@ export function guideHtml(origin, lang = "vi") {
   :root{--g:#108B67;--g7:#0c6f52;--ink:#11121e;--mut:#5e5f7a;--bg:#f6f5ff;--card:#ffffff;
     --line:rgba(16,14,40,.09);--shadow:0 1px 2px rgba(16,14,40,.05),0 6px 20px -12px rgba(16,14,40,.18);--code:#0e0d1a;
     --ic-fg:#0c6f52;--btn-hover:#0c6f52;--navbg:rgba(246,245,255,.82)}
-  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#e8e6ff;--mut:#9a98b8;--bg:#0c0b14;--card:#141320;
-    --line:rgba(255,255,255,.07);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.7);--code:#07060f;--g7:#5fe0b3;--ic-fg:#8aecc9;--btn-hover:#16a07a;--navbg:rgba(12,11,20,.82)}}
-  :root[data-theme="dark"]{--ink:#e8e6ff;--mut:#9a98b8;--bg:#0c0b14;--card:#141320;
-    --line:rgba(255,255,255,.07);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -14px rgba(0,0,0,.7);--code:#07060f;--g7:#5fe0b3;--ic-fg:#8aecc9;--btn-hover:#16a07a;--navbg:rgba(12,11,20,.82)}
+  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#eaf1ee;--mut:#9fb0a9;--bg:#0f1714;--card:#18211d;
+    --line:rgba(255,255,255,.09);--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px -16px rgba(0,0,0,.6);--code:#0b120f;--g:#16a37c;--g7:#6fe6c0;--ic-fg:#8aecc9;--btn-hover:#1cba8d;--navbg:rgba(15,23,20,.82)}}
+  :root[data-theme="dark"]{--ink:#eaf1ee;--mut:#9fb0a9;--bg:#0f1714;--card:#18211d;
+    --line:rgba(255,255,255,.09);--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 34px -16px rgba(0,0,0,.6);--code:#0b120f;--g:#16a37c;--g7:#6fe6c0;--ic-fg:#8aecc9;--btn-hover:#1cba8d;--navbg:rgba(15,23,20,.82)}
   *{box-sizing:border-box}
   html{scroll-behavior:auto}
   html.smooth{scroll-behavior:smooth}
@@ -605,12 +646,12 @@ export function guideHtml(origin, lang = "vi") {
     text-transform:uppercase;letter-spacing:.04em;flex-wrap:wrap}
   .tag .ic{width:30px;height:30px;border-radius:9px}
   .tag .ic .i{width:16px;height:16px}
-  pre{margin:0;background:var(--code);color:#e8e6ff;border-radius:11px;padding:12px 14px;overflow-x:auto;
+  pre{margin:0;background:var(--code);color:#e7efe9;border-radius:11px;padding:12px 14px;overflow-x:auto;
     border:1px solid rgba(255,255,255,.06);font:600 .82rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
   .codewrap{position:relative}
   .codewrap pre{padding-right:46px}
   .copy{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
-    border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.06);color:#cfc9ff;
+    border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.06);color:#cdd8d2;
     transition:background .15s ease,color .15s ease,border-color .15s ease}
   .copy:hover{background:rgba(255,255,255,.13);color:#fff}
   .copy svg{width:15px;height:15px}
@@ -699,6 +740,26 @@ export function guideHtml(origin, lang = "vi") {
     display:flex;gap:18px;flex-wrap:wrap;align-items:center}
   footer a{color:var(--g7);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
   footer a:hover{text-decoration:underline}
+  .cl-wrap{padding:24px 26px 12px}
+  .cl{position:relative;margin:0;padding:0 0 0 24px;list-style:none}
+  .cl::before{content:"";position:absolute;left:6px;top:8px;bottom:14px;width:2px;
+    background:linear-gradient(var(--g),rgba(16,139,103,.08))}
+  .cl li{position:relative;padding:0 0 18px}
+  .cl li:last-child{padding-bottom:0}
+  .cl li::before{content:"";position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;
+    background:var(--card);border:2.5px solid var(--g);box-sizing:border-box}
+  .cl li.is-new::before{box-shadow:0 0 0 0 rgba(16,139,103,.5);animation:ring 2s infinite}
+  @keyframes ring{70%{box-shadow:0 0 0 8px rgba(16,139,103,0)}100%{box-shadow:0 0 0 0 rgba(16,139,103,0)}}
+  .cl .v{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.97rem;flex-wrap:wrap}
+  .cl-tag{font-size:.68rem;font-weight:700;color:var(--g7);background:rgba(16,139,103,.12);
+    border:1px solid var(--line);padding:1px 8px;border-radius:999px;margin-left:8px}
+  .cl .date{color:var(--mut);font-size:.79rem;margin-left:8px;font-weight:500}
+  .cl .t{color:var(--mut);font-size:.91rem;margin:3px 0 0;max-width:62ch}
+  .new{font-size:.64rem;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--g);
+    padding:2px 7px;border-radius:999px;animation:blink 1.8s ease-in-out infinite}
+  @keyframes blink{50%{opacity:.55}}
+  .cl-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.86rem;font-weight:600;color:var(--g7);text-decoration:none}
+  .cl-more:hover{gap:9px}
   @media(max-width:640px){
     .wrap{padding:30px 15px 56px}
     header{flex-wrap:wrap;gap:12px}
@@ -709,6 +770,7 @@ export function guideHtml(origin, lang = "vi") {
     .method{padding:18px 15px}
     .card{padding:18px}
     .tip{padding:11px 12px}
+    .cl-wrap{padding:18px 16px 10px}
     .langsw{padding:6px 10px}
     .uses li,.feat li{padding:14px}
     .flow{flex-direction:column;align-items:stretch;overflow:visible;padding:16px}
@@ -746,7 +808,7 @@ export function guideHtml(origin, lang = "vi") {
     </div>
   </header>
 
-  <p class="hero-in" style="display:flex;gap:9px;flex-wrap:wrap"><span class="pill"><span class="dot"></span> ${t.running}</span><span class="pill">WebCake · StoreCake</span></p>
+  <p class="hero-in" style="display:flex;gap:9px;flex-wrap:wrap"><span class="pill"><span class="dot"></span> ${t.running}</span><span class="pill">WebCake · StoreCake</span>${CHANGELOG[0] ? `<span class="pill">v${CHANGELOG[0].v}</span>` : ""}</p>
 
   <p class="lead hero-in">${t.leadPre}<b class="grad">${t.leadGrad}</b>${t.leadPost}</p>
 
@@ -823,6 +885,16 @@ export function guideHtml(origin, lang = "vi") {
     <li class="glass reveal">${tile("wand")} <span><pre style="background:transparent;color:inherit;border:none;padding:0;font-size:.88rem;white-space:pre-wrap">${t.promptEx}</pre></span></li>
   </ul>
 
+  ${CHANGELOG.length
+        ? `<h2 id="new" class="reveal">${t.newH2}</h2>
+  <div class="glass cl-wrap reveal">
+    <ul class="cl">
+      ${CHANGELOG.map((c, i) => `<li class="${i === 0 ? "is-new" : ""}"><span class="v">v${c.v}${i === 0 ? ` <span class="new">${t.newBadge}</span>` : ""}${clTag(c.type, L)}<span class="date">${c.d}</span></span><p class="t">${L === "en" ? c.en : c.vi}</p></li>`).join("\n      ")}
+    </ul>
+    <a class="cl-more" href="${GITHUB_URL}/blob/main/${L === "en" ? "CHANGELOG.md" : "CHANGELOG.vi.md"}">${t.clMore} ${icon("arrow")}</a>
+  </div>`
+        : ""}
+
   <h2 id="faq" class="reveal">${t.faqH2}</h2>
   ${faq.map((f) => `<details class="glass reveal"><summary>${f.q}</summary><p>${f.a}</p></details>`).join("\n  ")}
 
@@ -910,7 +982,7 @@ export function ogImageSvg() {
     return `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" fill="none" font-family="system-ui,-apple-system,Segoe UI,Roboto,sans-serif">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="1200" y2="630" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#0c0b14"/><stop offset="1" stop-color="#16122a"/>
+      <stop stop-color="#0f1714"/><stop offset="1" stop-color="#0c241c"/>
     </linearGradient>
     <radialGradient id="glow" cx="0" cy="0" r="1" gradientTransform="translate(960 70) rotate(130) scale(620)" gradientUnits="userSpaceOnUse">
       <stop stop-color="#108B67" stop-opacity="0.40"/><stop offset="1" stop-color="#108B67" stop-opacity="0"/>
@@ -934,12 +1006,12 @@ export function ogImageSvg() {
   <text x="90" y="300" fill="#ffffff" font-size="64" font-weight="800" letter-spacing="-2">Bạn nói điều mình muốn —</text>
   <text x="90" y="380" fill="#ffffff" font-size="64" font-weight="800" letter-spacing="-2">AI dựng trang, kiểm tra,</text>
   <text x="90" y="460" fill="#108B67" font-size="64" font-weight="800" letter-spacing="-2">đăng lên là xong.</text>
-  <text x="90" y="534" fill="#9a98b8" font-size="28" font-weight="500">Không cần kéo-thả · Không cần biết lập trình · Luôn xem trước khi lưu</text>
+  <text x="90" y="534" fill="#9fb0a9" font-size="28" font-weight="500">Không cần kéo-thả · Không cần biết lập trình · Luôn xem trước khi lưu</text>
   <g transform="translate(90 560)">
     <rect width="540" height="52" rx="12" fill="#108B67"/>
     <text x="270" y="34" fill="#ffffff" font-size="22" font-weight="700" text-anchor="middle">store.toolvn.io.vn</text>
   </g>
-  <text x="1110" y="600" fill="#5b5a7a" font-size="22" font-weight="600" text-anchor="end">github.com/vuluu2k/webcake-storefront-mcp</text>
+  <text x="1110" y="600" fill="#5a7269" font-size="22" font-weight="600" text-anchor="end">github.com/vuluu2k/webcake-storefront-mcp</text>
 </svg>`;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-storefront-mcp",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "MCP server for the WebCake/StoreCake storefront builder — page CRUD, page authoring, products, orders, and more",
   "mcpName": "io.github.vuluu2k/webcake-storefront-mcp",
   "license": "MIT",
@@ -24,7 +24,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsc && node scripts/copy-assets.mjs",
+    "build": "node scripts/gen-changelog.mjs && tsc && node scripts/copy-assets.mjs",
     "start": "node dist/index.js",
     "serve": "node dist/index.js serve",
     "dev": "tsc --watch",