openclacky 1.3.8 → 1.3.10

data/lib/clacky/default_extensions/ext-studio/panels/studio/view.js

@@ -29,7 +29,7 @@
       "verify.errors": "{{n}} error(s)",
       "verify.warnings": "{{n}} warning(s)",
       "verify.hint": "Hint",
-      "hint.reload": "After fixing, reload this page — extensions hot-reload per request.",
+      "hint.reload": "After fixing, reload this page to apply changes.",
       "publish.status": "Status",
       "publish.status.draft": "Draft",
       "publish.status.published": "Published",
@@ -39,18 +39,20 @@
       "btn.publish": "Publish to marketplace",
       "btn.publishing": "Publishing…",
       "btn.pack": "Pack (.zip)",
+      "btn.packing": "Packing…",
       "publish.needLicense": "Publishing requires an activated user license.",
       "publish.done": "Published {{id}} {{ver}} — {{status}}",
-      "publish.packed": "Packed → {{path}}",
       "publish.already": "Already published. Enable \"publish a new version\" to ship.",
       "published.title": "Your published extensions",
       "published.empty": "You haven't published anything yet.",
       "btn.unpublish": "Unpublish",
       "published.confirm": "Unpublish {{id}} from the marketplace?",
       "err.generic": "Something went wrong: {{msg}}",
+      "err.version_conflict": "Version {{ver}} has already been published. Please enter a higher version number above and try again.",
+      "pub.version.label": "Version",
 
       "publish.confirm.title": "Publish to the marketplace?",
-      "publish.confirm.body": "\"{{id}}\" will be packed and uploaded to the OpenClacky marketplace, where anyone can discover and install it. Make sure it's ready to share publicly.",
+      "publish.confirm.body": "\"{{id}}\" will be packed and uploaded to the extension marketplace, where anyone can discover and install it. Make sure it's ready to share publicly.",
       "publish.confirm.ok": "Publish",
       "publish.confirm.cancel": "Cancel",
       "bind.title": "Authorize this device",
@@ -67,7 +69,7 @@
 
       "pub.title.new": "Publish to the marketplace",
       "pub.title.update": "Publish a new version",
-      "pub.intro": "\"{{name}}\" will be packed and uploaded to the OpenClacky marketplace, where anyone can discover and install it.",
+      "pub.intro": "\"{{name}}\" will be packed and uploaded to the extension marketplace, where anyone can discover and install it.",
       "pub.version.new": "First release · v{{ver}}",
       "pub.version.update": "v{{prev}} → v{{ver}}",
       "pub.version.missing": "No version in ext.yml — add a \"version\" field before publishing.",
@@ -77,10 +79,13 @@
       "pub.readme.ok": "README.md detected",
       "pub.readme.missing": "No README.md — consider adding one so users understand your extension.",
       "pub.btn.publish": "Publish v{{ver}}",
+      "pub.btn.publishing": "Publishing…",
+      "pub.btn.done": "Done",
       "pub.btn.cancel": "Cancel",
       "pub.progress.packing": "Packing…",
       "pub.progress.uploading": "Uploading to marketplace…",
       "pub.done": "Published {{id}} v{{ver}} — {{status}}",
+      "pub.success": "Published successfully",
       "pub.done.close": "Done",
       "pub.retry": "Try again",
       "extlist.section.cloud": "Published Extensions",
@@ -98,6 +103,7 @@
       "extlist.btn.publish": "Publish",
       "extlist.btn.update": "Update",
       "extlist.btn.pack": "Pack",
+      "extlist.btn.packing": "Packing…",
       "extlist.btn.unpublish": "Unpublish",
       "extlist.btn.iterate": "Iterate",
       "extlist.iterate.seed": "Iterate on extension {{id}}",
@@ -105,7 +111,6 @@
       "extlist.overwrite.confirm": "\"{{id}}\" is already published. Publish a new version?",
       "extlist.unpublish.confirm": "Unpublish {{id}} from the marketplace?",
       "extlist.publishing": "Publishing…",
-      "extlist.packed": "Packed → {{path}}",
       "extlist.needLicense": "Publishing requires an activated user license.",
       "extlist.newExt.label": "Create a new extension",
       "extlist.newExt.hint": "Opens an AI session that scaffolds and builds it for you.",
@@ -132,7 +137,7 @@
       "skills.shadow.tooltip": "Local copy shadows a same-named brand skill",
       "skills.newSkill.label": "Create a new skill with /skill-creator",
       "skills.newSkill.btn": "Create New Skill",
-      "skills.promo.text": "Publish your skills & build your own brand on OpenClacky.",
+      "skills.promo.text": "Publish your skills & build your own brand.",
       "skills.promo.link": "Learn more →",
       "skills.locked": "Creator license required to publish cloud skills.",
       "skills.publishing": "Publishing…",
@@ -159,7 +164,7 @@
       "verify.errors": "{{n}} 个错误",
       "verify.warnings": "{{n}} 个警告",
       "verify.hint": "提示",
-      "hint.reload": "修复后刷新本页 —— 扩展每次请求热重载。",
+      "hint.reload": "修复问题后，刷新页面即可生效。",
       "publish.status": "状态",
       "publish.status.draft": "草稿",
       "publish.status.published": "已发布",
@@ -169,18 +174,20 @@
       "btn.publish": "发布到市场",
       "btn.publishing": "发布中…",
       "btn.pack": "打包 (.zip)",
+      "btn.packing": "打包中…",
       "publish.needLicense": "发布需要已激活的用户授权。",
       "publish.done": "已发布 {{id}} {{ver}} — {{status}}",
-      "publish.packed": "已打包 → {{path}}",
       "publish.already": "已发布过。勾选「发布新版本」后再试。",
       "published.title": "你发布的扩展",
       "published.empty": "你还没有发布任何扩展。",
       "btn.unpublish": "下架",
       "published.confirm": "确定要从市场下架 {{id}} 吗？",
       "err.generic": "出错了：{{msg}}",
+      "err.version_conflict": "版本 {{ver}} 已发布过，请在上方输入更高的版本号后重试。",
+      "pub.version.label": "版本号",
 
       "publish.confirm.title": "确定发布到市场？",
-      "publish.confirm.body": "「{{id}}」将被打包并上传到 OpenClacky 市场，任何人都能发现并安装它。请确认它已准备好公开分享。",
+      "publish.confirm.body": "「{{id}}」将被打包并上传到扩展市场，任何人都能发现并安装它。请确认它已准备好公开分享。",
       "publish.confirm.ok": "发布",
       "publish.confirm.cancel": "取消",
       "bind.title": "授权此设备",
@@ -197,7 +204,7 @@
 
       "pub.title.new": "发布到市场",
       "pub.title.update": "发布新版本",
-      "pub.intro": "「{{name}}」将被打包并上传到 OpenClacky 市场，任何人都能发现并安装它。",
+      "pub.intro": "「{{name}}」将被打包并上传到扩展市场，任何人都能发现并安装它。",
       "pub.version.new": "首次发布 · v{{ver}}",
       "pub.version.update": "v{{prev}} → v{{ver}}",
       "pub.version.missing": "ext.yml 里没有 version — 请先补上 version 字段再发布。",
@@ -207,10 +214,13 @@
       "pub.readme.ok": "已检测到 README.md",
       "pub.readme.missing": "未找到 README.md — 建议补一份，方便用户了解你的扩展。",
       "pub.btn.publish": "发布 v{{ver}}",
+      "pub.btn.publishing": "发布中…",
+      "pub.btn.done": "完成",
       "pub.btn.cancel": "取消",
       "pub.progress.packing": "打包中…",
       "pub.progress.uploading": "上传到市场…",
       "pub.done": "已发布 {{id}} v{{ver}} — {{status}}",
+      "pub.success": "已发布成功",
       "pub.done.close": "完成",
       "pub.retry": "重试",
       "extlist.section.cloud": "已发布扩展",
@@ -228,6 +238,7 @@
       "extlist.btn.publish": "发布",
       "extlist.btn.update": "更新",
       "extlist.btn.pack": "打包",
+      "extlist.btn.packing": "打包中…",
       "extlist.btn.unpublish": "下架",
       "extlist.btn.iterate": "迭代",
       "extlist.iterate.seed": "迭代扩展 {{id}}",
@@ -235,7 +246,6 @@
       "extlist.overwrite.confirm": "「{{id}}」已经发布过了。要发布新版本吗？",
       "extlist.unpublish.confirm": "确定要从市场下架 {{id}} 吗？",
       "extlist.publishing": "发布中…",
-      "extlist.packed": "已打包 → {{path}}",
       "extlist.needLicense": "发布需要已激活的用户授权。",
       "extlist.newExt.label": "新建扩展",
       "extlist.newExt.hint": "打开一个 AI 会话，帮你生成并开发它。",
@@ -262,7 +272,7 @@
       "skills.shadow.tooltip": "本地副本覆盖了同名品牌 skill",
       "skills.newSkill.label": "用 /skill-creator 创建新 skill",
       "skills.newSkill.btn": "创建新 Skill",
-      "skills.promo.text": "发布你的 skill，在 OpenClacky 上打造自己的品牌。",
+      "skills.promo.text": "发布你的 skill，打造自己的品牌。",
       "skills.promo.link": "了解更多 →",
       "skills.locked": "发布云端 skill 需要创作者授权。",
       "skills.publishing": "发布中…",
@@ -302,6 +312,28 @@
     return data;
   }
 
+  async function downloadPack(ext_id) {
+    const res = await fetch(api("/pack"), {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ext_id }),
+    });
+    if (!res.ok) {
+      let msg = `Request failed (${res.status})`;
+      try { msg = (await res.json()).error || msg; } catch (_e) {}
+      throw new Error(msg);
+    }
+    const blob = await res.blob();
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement("a");
+    a.href     = url;
+    a.download = `${ext_id}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
   // Skills tab talks to host-owned endpoints (not the ext prefix). We surface
   // the HTTP status so the caller can treat 403 as "locked" rather than error.
   async function getHost(path) {
@@ -443,47 +475,48 @@
 
   // Unified publish flow: one modal that walks the creator from a release form
   // (version + notes) through progress → device binding (if needed) → done.
-  // The creator owns the version in ext.yml; a new release must be greater than
-  // the currently published version — the backend enforces that. `prevVersion`
-  // is the latest published version when updating, or null for a first release.
+  // The creator owns the version; if it conflicts with the latest published
+  // version they can bump it inline — the modal writes it back to ext.yml
+  // before uploading. `prevVersionOrPromise` may be a value or a Promise.
   // Resolves true when a publish succeeded, false otherwise.
-  function runPublishFlow(ext, prevVersion) {
+  function runPublishFlow(ext, prevVersionOrPromise) {
     return new Promise((resolve) => {
-      const version = ext.version;
-      const isUpdate = !!prevVersion;
-
-      const intro = el("p", { class: "studio-modal-status", text: t("pub.intro", { name: ext.name }) });
-
-      const verText = !version
-        ? t("pub.version.missing")
-        : isUpdate
-          ? t("pub.version.update", { prev: prevVersion, ver: version })
-          : t("pub.version.new", { ver: version });
-      const verLine = el("p", { class: "studio-modal-code", text: verText });
-
-      const unitList = (ext.units || []).map((u) => u.kind).join(" · ");
-      const unitsLine = unitList
-        ? el("p", { class: "studio-skill-hint", text: t("pub.units", { units: unitList }) })
-        : null;
+      let currentVersion = ext.version || "";
+      let isUpdate = false;
+
+      const verField = el("div", { class: "studio-field" });
+      verField.appendChild(el("label", { class: "studio-label", text: t("pub.version.label") }));
+      const verInput = el("input", { class: "studio-input", type: "text", value: currentVersion, placeholder: "1.0.0" });
+      verInput.addEventListener("input", () => {
+        currentVersion = verInput.value.trim();
+        publishBtn.disabled = !currentVersion;
+        publishBtn.textContent = currentVersion ? t("pub.btn.publish", { ver: currentVersion }) : t("pub.btn.publish", { ver: "?" });
+      });
+      verField.appendChild(verInput);
 
-      const notesLabel = el("label", { class: "studio-label", text: t("pub.notes.label") });
-      const notes = el("textarea", { class: "studio-textarea", rows: "3", placeholder: t("pub.notes.placeholder") });
+      const notesField = el("div", { class: "studio-field" });
+      notesField.appendChild(el("label", { class: "studio-label", text: t("pub.notes.label") }));
+      const notes = el("textarea", { class: "studio-textarea", rows: "4", placeholder: t("pub.notes.placeholder") });
+      notesField.appendChild(notes);
 
       const status = el("p", { class: "studio-modal-status" });
       status.style.display = "none";
 
-      const bodyChildren = [intro, verLine];
-      if (unitsLine) bodyChildren.push(unitsLine);
-      bodyChildren.push(notesLabel, notes, status);
+      const bodyChildren = [
+        el("p", { class: "studio-modal-intro", text: t("pub.intro", { name: ext.name }) }),
+        verField,
+        notesField,
+        status,
+      ];
 
       let done = false;
       const modal = openModal({
-        title: isUpdate ? t("pub.title.update") : t("pub.title.new"),
+        title: t("pub.title.new"),
         body: el("div", null, bodyChildren),
         buttons: [
           { label: t("pub.btn.cancel"), keepOpen: false, onClick: () => { if (!done) resolve(false); } },
           {
-            label: version ? t("pub.btn.publish", { ver: version }) : t("pub.btn.publish", { ver: "?" }),
+            label: currentVersion ? t("pub.btn.publish", { ver: currentVersion }) : t("pub.btn.publish", { ver: "?" }),
             primary: true,
             keepOpen: true,
             onClick: () => submit(),
@@ -493,50 +526,82 @@
 
       const publishBtn = modal.footer.querySelector(".studio-btn-primary");
       const cancelBtn = modal.footer.querySelector(".studio-btn:not(.studio-btn-primary)");
-      if (!version) publishBtn.disabled = true;
+      if (!currentVersion) publishBtn.disabled = true;
+
+      Promise.resolve(prevVersionOrPromise).then((prevVersion) => {
+        if (done || !prevVersion) return;
+        isUpdate = true;
+        const titleEl = modal.overlay.querySelector(".studio-modal-title");
+        if (titleEl) titleEl.textContent = t("pub.title.update");
+        if (prevVersion !== currentVersion) {
+          currentVersion = prevVersion;
+          verInput.value = currentVersion;
+          publishBtn.disabled = false;
+          publishBtn.textContent = t("pub.btn.publish", { ver: currentVersion });
+        }
+      });
 
-      function setProgress(msg) {
+      function setProgress(msg, isError) {
         status.style.display = "";
         status.textContent = msg;
+        status.className = "studio-modal-status" + (isError ? " studio-modal-status-error" : "");
+      }
+
+      function resetButtons() {
+        publishBtn.disabled = !currentVersion;
+        publishBtn.textContent = currentVersion ? t("pub.btn.publish", { ver: currentVersion }) : t("pub.btn.publish", { ver: "?" });
+        cancelBtn.disabled = false;
+        notes.disabled = false;
+        verInput.disabled = false;
       }
 
       async function submit() {
         if (done || publishBtn.disabled) return;
+        const ver = currentVersion;
+        if (!ver) return;
+
         publishBtn.disabled = true;
+        publishBtn.textContent = t("pub.btn.publishing");
         cancelBtn.disabled = true;
         notes.disabled = true;
-        setProgress(t("pub.progress.packing"));
+        verInput.disabled = true;
+        status.style.display = "none";
+
         try {
-          setProgress(t("pub.progress.uploading"));
+          if (ver !== ext.version) {
+            await postJson("/set_version", { ext_id: ext.id, version: ver });
+          }
+
           const data = await publishWithBinding({
             ext_id: ext.id,
             force: isUpdate,
             changelog: notes.value.trim(),
           });
-          if (data === null) {
-            publishBtn.disabled = false;
-            cancelBtn.disabled = false;
-            notes.disabled = false;
-            status.style.display = "none";
-            return;
-          }
+
+          if (data === null) { resetButtons(); return; }
           if (!data.ok) throw new Error(data.error || "Publish failed");
+
           done = true;
-          setProgress(t("pub.done", {
-            id: data.ext_id,
-            ver: data.version || version,
-            status: data.status || "",
-          }));
-          publishBtn.style.display = "none";
-          cancelBtn.textContent = t("pub.done.close");
-          cancelBtn.disabled = false;
-          cancelBtn.onclick = () => { modal.close(); resolve(true); };
-        } catch (e) {
-          setProgress(t("err.generic", { msg: e.message }));
+          const successLabel = el("span", { class: "studio-pub-success", text: t("pub.success") });
+          modal.footer.insertBefore(successLabel, modal.footer.firstChild);
+          cancelBtn.style.display = "none";
           publishBtn.disabled = false;
-          publishBtn.textContent = t("pub.retry");
-          cancelBtn.disabled = false;
-          notes.disabled = false;
+          publishBtn.textContent = t("pub.btn.done");
+          publishBtn.onclick = () => { modal.close(); resolve(true); };
+        } catch (e) {
+          const msg = e.message || "";
+          const isConflict = /must be greater than/i.test(msg);
+          if (isConflict) {
+            setProgress(t("err.version_conflict", { ver }), true);
+            verInput.classList.add("studio-input-error");
+            verInput.disabled = false;
+            verInput.focus();
+            verInput.select();
+            verInput.addEventListener("input", () => verInput.classList.remove("studio-input-error"), { once: true });
+          } else {
+            setProgress(t("err.generic", { msg }), true);
+          }
+          resetButtons();
         }
       }
     });
@@ -586,6 +651,7 @@
   function createDebugPanel() {
     let container = null;
     let unsub = null;
+    let summaryFadeTimer = null;
 
     async function runVerify() {
       const ext = store.selected();
@@ -597,6 +663,8 @@
         renderVerify(data);
       } catch (e) {
         renderError(e);
+      } finally {
+        if (status) status.textContent = t("btn.recheck");
       }
     }
 
@@ -607,16 +675,22 @@
       const errs = (data.issues || []).filter((i) => i.level === "error");
       const warns = (data.issues || []).filter((i) => i.level === "warning");
 
-      const summary = el("div", { class: data.ok ? "studio-verify-ok" : "studio-verify-fail" });
-      if (data.ok && !warns.length) {
-        summary.textContent = "✓ " + t("verify.ok");
-      } else {
-        const parts = [];
-        if (errs.length) parts.push(t("verify.errors", { n: errs.length }));
-        if (warns.length) parts.push(t("verify.warnings", { n: warns.length }));
-        summary.textContent = parts.join(" · ");
+      const summary = container.querySelector(".studio-verify-summary");
+      if (summary) {
+        clearTimeout(summaryFadeTimer);
+        summary.textContent = "";
+        if (data.ok && !warns.length) {
+          summary.textContent = "✓ " + t("verify.ok");
+          summary.className = "studio-verify-summary studio-verify-ok";
+          summaryFadeTimer = setTimeout(() => { summary.textContent = ""; }, 3000);
+        } else {
+          const parts = [];
+          if (errs.length) parts.push(t("verify.errors", { n: errs.length }));
+          if (warns.length) parts.push(t("verify.warnings", { n: warns.length }));
+          summary.textContent = parts.join(" · ");
+          summary.className = "studio-verify-summary studio-verify-fail";
+        }
       }
-      box.appendChild(summary);
 
       (data.issues || []).forEach((i) => {
         const item = el("div", { class: "studio-issue studio-issue-" + i.level });
@@ -630,7 +704,9 @@
 
     function renderError(e) {
       const box = container.querySelector(".studio-verify");
-      if (box) { box.innerHTML = ""; box.appendChild(el("div", { class: "studio-verify-fail", text: t("err.generic", { msg: e.message }) })); }
+      const summary = container.querySelector(".studio-verify-summary");
+      if (summary) { summary.textContent = t("err.generic", { msg: e.message }); summary.className = "studio-verify-summary studio-verify-fail"; }
+      if (box) { box.innerHTML = ""; }
     }
 
     function renderDetail() {
@@ -647,7 +723,6 @@
       const row = (label, value) => { meta.appendChild(el("dt", { text: label })); meta.appendChild(el("dd", { text: value || "—" })); };
       row(t("detail.version"), ext.version);
       row(t("detail.layer"), ext.layer);
-      row(t("detail.origin"), ext.origin);
       detail.appendChild(meta);
 
       detail.appendChild(el("div", { class: "studio-label", text: t("detail.units") }));
@@ -674,6 +749,7 @@
 
       const bar = el("div", { class: "studio-actions" });
       bar.appendChild(el("button", { class: "studio-btn studio-btn-primary studio-verify-status", text: t("btn.recheck"), onclick: runVerify }));
+      bar.appendChild(el("span", { class: "studio-verify-summary" }));
       container.appendChild(bar);
 
       container.appendChild(el("div", { class: "studio-verify" }));
@@ -709,24 +785,28 @@
     async function doPublish() {
       const ext = store.selected();
       if (!ext) return;
-      let prevVersion = null;
-      try {
-        const data = await getJson("/published");
-        const match = (data.extensions || []).find((e) => e.id === ext.id);
-        prevVersion = match ? match.version : null;
-      } catch (_e) { /* treat as first release */ }
-      const ok = await runPublishFlow(ext, prevVersion);
+      const prevVersionPromise = getJson("/published")
+        .then((data) => {
+          const match = (data.extensions || []).find((e) => e.id === ext.id);
+          return match ? match.version : null;
+        })
+        .catch(() => null);
+      const ok = await runPublishFlow(ext, prevVersionPromise);
       if (ok) loadPublished();
     }
 
     async function doPack() {
       const ext = store.selected();
       if (!ext) return;
+      const btn = container.querySelector(".studio-pack-btn");
+      const orig = btn ? btn.textContent : null;
+      if (btn) { btn.disabled = true; btn.textContent = t("btn.packing"); }
       try {
-        const data = await postJson("/pack", { ext_id: ext.id });
-        feedback(t("publish.packed", { path: data.path }), "success");
+        await downloadPack(ext.id);
       } catch (e) {
         feedback(t("err.generic", { msg: e.message }), "error");
+      } finally {
+        if (btn) { btn.disabled = false; btn.textContent = orig; }
       }
     }
 
@@ -740,17 +820,23 @@
         const exts = data.extensions || [];
         if (!exts.length) { box.appendChild(el("p", { class: "studio-empty", text: t("published.empty") })); return; }
         exts.forEach((e) => {
-          const row = el("div", { class: "studio-published-row" });
-          row.appendChild(el("span", { class: "studio-published-name", text: `${e.name}${e.version ? " v" + e.version : ""} [${e.status}]` }));
-          row.appendChild(el("button", {
-            class: "studio-btn studio-btn-danger", text: t("btn.unpublish"),
-            onclick: async () => {
-              if (!window.confirm(t("published.confirm", { id: e.id }))) return;
-              try { await postJson("/unpublish", { ext_id: e.id }); loadPublished(); }
-              catch (err) { feedback(t("err.generic", { msg: err.message }), "error"); }
-            },
-          }));
-          box.appendChild(row);
+          const card = el("div", { class: "studio-skill-card" });
+          const head = el("div", { class: "studio-skill-head" });
+          head.appendChild(el("span", { class: "studio-skill-name", text: e.name || e.id }));
+          const statusKind = e.status === "draft" ? "local" : "published";
+          head.appendChild(el("span", { class: `studio-skill-badge studio-skill-badge-${statusKind}`, text: e.status === "draft" ? t("extlist.badge.draft") : t("extlist.badge.published") }));
+          if (e.version) head.appendChild(el("span", { style: "font-size:11px;color:var(--color-text-muted);", text: "v" + e.version }));
+          const unpubBtn = el("button", { class: "studio-btn studio-btn-danger", text: t("btn.unpublish") });
+          unpubBtn.style.marginLeft = "auto";
+          unpubBtn.addEventListener("click", async () => {
+            if (!window.confirm(t("published.confirm", { id: e.id }))) return;
+            unpubBtn.disabled = true;
+            try { await postJson("/unpublish", { ext_id: e.id }); loadPublished(); }
+            catch (err) { unpubBtn.disabled = false; feedback(t("err.generic", { msg: err.message }), "error"); }
+          });
+          head.appendChild(unpubBtn);
+          card.appendChild(head);
+          box.appendChild(card);
         });
       } catch (e) {
         box.appendChild(el("p", { class: "studio-empty", text: t("err.generic", { msg: e.message }) }));
@@ -766,7 +852,7 @@
 
       const bar = el("div", { class: "studio-actions" });
       bar.appendChild(el("button", { class: "studio-btn studio-btn-primary studio-publish-btn", text: t("btn.publish"), onclick: doPublish }));
-      bar.appendChild(el("button", { class: "studio-btn studio-btn-ghost", text: t("btn.pack"), onclick: doPack }));
+      bar.appendChild(el("button", { class: "studio-btn studio-btn-ghost studio-pack-btn", text: t("btn.pack"), onclick: doPack }));
       container.appendChild(bar);
 
       container.appendChild(el("div", { class: "studio-feedback" }));
@@ -890,17 +976,22 @@
       actions.appendChild(pub);
 
       actions.appendChild(el("button", { class: "studio-btn", text: t("extlist.btn.iterate"), onclick: () => createExtension(t("extlist.iterate.seed", { id: ext.id })) }));
-      actions.appendChild(el("button", { class: "studio-btn studio-btn-ghost", text: t("extlist.btn.pack"), onclick: () => doPack(ext) }));
+      const packBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("extlist.btn.pack") });
+      packBtn.addEventListener("click", () => doPack(ext, packBtn));
+      actions.appendChild(packBtn);
       card.appendChild(actions);
       return card;
     }
 
-    async function doPack(ext) {
+    async function doPack(ext, btn) {
+      const orig = btn ? btn.textContent : null;
+      if (btn) { btn.disabled = true; btn.textContent = t("extlist.btn.packing"); }
       try {
-        const data = await postJson("/pack", { ext_id: ext.id });
-        alert(t("extlist.packed", { path: data.path }));
+        await downloadPack(ext.id);
       } catch (e) {
         alert(t("err.generic", { msg: e.message }));
+      } finally {
+        if (btn) { btn.disabled = false; btn.textContent = orig; }
       }
     }
 
@@ -1210,6 +1301,8 @@
     .studio-page .studio-panel { padding: 0; }
     .studio-field { margin-bottom: 14px; }
     .studio-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); margin-bottom: 6px; }
+    .studio-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+    .studio-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
     .studio-select, .studio-textarea { width: 100%; box-sizing: border-box; background: var(--color-bg-input); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 7px 8px; color: var(--color-text-primary); font-size: 13px; font-family: inherit; }
     .studio-select:focus, .studio-textarea:focus { border-color: var(--color-accent-primary); outline: none; }
     .studio-empty { color: var(--color-text-muted); font-size: 12px; margin: 4px 0; }
@@ -1222,7 +1315,7 @@
     .studio-meta dd { margin: 0; color: var(--color-text-primary); }
     .studio-units { display: flex; flex-wrap: wrap; gap: 6px; }
     .studio-unit-chip { display: inline-flex; background: var(--color-bg-hover); color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 2px 8px; font-size: 12px; }
-    .studio-actions { display: flex; gap: 8px; margin: 12px 0; }
+    .studio-actions { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
     .studio-skill-promo .studio-actions { margin: 12px 0 0; }
     .studio-btn { padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-primary); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 13px; font-weight: 500; }
     .studio-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
@@ -1231,11 +1324,13 @@
     .studio-btn-primary:disabled { opacity: 0.6; cursor: default; }
     .studio-btn-danger { color: var(--color-error); border-color: var(--color-error-border); padding: 4px 10px; }
     .studio-btn-danger:hover { background: var(--color-error-bg); color: var(--color-error); }
-    .studio-btn-ghost { border-color: transparent; color: var(--color-text-tertiary); font-weight: 400; }
-    .studio-btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text-secondary); }
+    .studio-btn-ghost { color: var(--color-text-secondary); font-weight: 500; }
+    .studio-btn-ghost:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
     .studio-verify { margin-top: 8px; }
-    .studio-verify-ok { color: var(--color-success); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
-    .studio-verify-fail { color: var(--color-error); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
+    .studio-verify-summary { font-size: 13px; font-weight: 600; }
+    .studio-verify-ok { color: var(--color-success); font-size: 12px; font-weight: 600; }
+    .studio-verify-fail { color: var(--color-error); font-size: 12px; font-weight: 600; }
+    .studio-verify > *:first-child { margin-bottom: 8px; }
     .studio-issue { border-left: 3px solid var(--color-border-primary); padding: 6px 10px; margin-bottom: 8px; background: var(--color-bg-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
     .studio-issue-error { border-left-color: var(--color-error); }
     .studio-issue-warning { border-left-color: var(--color-warning, var(--color-text-tertiary)); }
@@ -1244,13 +1339,13 @@
     .studio-issue-file { font-size: 11px; font-family: monospace; color: var(--color-text-muted); margin-top: 2px; }
     .studio-issue-hint { font-size: 11px; color: var(--color-text-secondary); margin-top: 4px; font-style: italic; }
     .studio-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; cursor: pointer; }
-    .studio-feedback { font-size: 12px; margin: 8px 0; min-height: 14px; line-height: 1.4; }
+    .studio-feedback { font-size: 12px; margin: 6px 0 0; line-height: 1.4; }
     .studio-feedback-success { color: var(--color-success); }
     .studio-feedback-error { color: var(--color-error); }
     .studio-feedback-warn { color: var(--color-warning, var(--color-text-secondary)); }
     .studio-published { margin-top: 16px; border-top: 1px solid var(--color-border-primary); padding-top: 12px; }
-    .studio-published-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 12px; }
-    .studio-published-name { color: var(--color-text-primary); }
+    .studio-published-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 12px; border-bottom: 1px solid var(--color-border-primary); }
+    .studio-published-name { display: flex; align-items: center; gap: 6px; color: var(--color-text-primary); }
     .studio-page { width: 100%; }
     .studio-page-head { margin-bottom: 20px; }
     .studio-page-title { margin: 0; font-size: 22px; font-weight: 600; color: var(--color-text-primary); }
@@ -1263,7 +1358,7 @@
     .studio-skill-section { margin-bottom: 28px; }
     .studio-skill-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
     .studio-skill-hint { font-size: 11px; color: var(--color-text-muted); }
-    .studio-skill-card { border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px); padding: 14px 16px; margin: 0 0 10px; background: var(--color-bg-secondary); }
+    .studio-skill-card { border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px); padding: 12px; margin: 0 0 10px; background: var(--color-bg-secondary); }
     .studio-skill-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
     .studio-skill-name { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
     .studio-skill-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; }
@@ -1272,17 +1367,29 @@
     .studio-skill-badge-changed { background: var(--color-warning-bg, var(--color-bg-hover)); color: var(--color-warning, var(--color-text-secondary)); }
     .studio-skill-badge-shadow { background: var(--color-bg-hover); color: var(--color-text-secondary); }
     .studio-skill-desc { margin: 6px 0 8px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
-    .studio-skill-meta { display: flex; gap: 12px; font-size: 11px; color: var(--color-text-muted); margin-bottom: 8px; }
+    .studio-skill-meta { display: flex; gap: 12px; font-size: 11px; color: var(--color-text-muted); }
     .studio-skill-promo { border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px); padding: 16px 18px; margin: 0 0 24px; background: var(--color-bg-secondary); }
     .studio-skill-promo-text { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
-    .studio-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
-    .studio-modal { background: var(--color-bg-primary, var(--color-bg-secondary)); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px); padding: 20px 22px; width: 420px; max-width: calc(100vw - 40px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
-    .studio-modal-title { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--color-text-primary); }
+    .studio-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: studio-overlay-in 0.15s ease; }
+    .studio-modal { background: var(--color-bg-primary, var(--color-bg-secondary)); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md, 8px); padding: 28px 28px 22px; width: 520px; max-width: calc(100vw - 40px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); animation: studio-modal-in 0.2s cubic-bezier(0.34,1.4,0.64,1); }
+    @keyframes studio-overlay-in { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes studio-modal-in { from { opacity: 0; transform: scale(0.93) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+    .studio-modal-title { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--color-text-primary); }
+    .studio-modal-intro { margin: 0 0 16px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
+    .studio-pub-meta { display: flex; align-items: center; gap: 10px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm, 6px); padding: 10px 14px; margin-bottom: 16px; }
+    .studio-pub-version { font-size: 13px; font-weight: 600; color: var(--color-text-primary); font-family: monospace; }
+    .studio-pub-units { font-size: 12px; color: var(--color-text-tertiary); }
+    .studio-pub-units::before { content: "·"; margin-right: 10px; }
     .studio-modal-body { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
     .studio-modal-status { margin: 0 0 8px; font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
+    .studio-modal-status-error { color: var(--color-error); }
+    .studio-input { width: 100%; box-sizing: border-box; background: var(--color-bg-input); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 7px 10px; color: var(--color-text-primary); font-size: 13px; font-family: monospace; }
+    .studio-input:focus { border-color: var(--color-accent-primary); outline: none; }
+    .studio-input-error { border-color: var(--color-error) !important; }
     .studio-modal-code { margin: 0 0 8px; font-size: 13px; font-family: monospace; color: var(--color-text-primary); }
     .studio-modal-link { display: inline-block; font-size: 13px; color: var(--color-accent-primary); }
-    .studio-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
+    .studio-modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border-primary); }
+    .studio-pub-success { margin-right: auto; font-size: 13px; font-weight: 500; color: var(--color-success); }
   `;
   document.head.appendChild(style);
 })();