openclacky 1.3.11 → 1.4.1

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

@@ -49,6 +49,13 @@
       "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.",
+      "err.invalid_version": "Invalid version. Use format like 1.0.0.",
+      "err.name_taken": "The name \"{{id}}\" is already taken by another user.",
+      "rename.label": "Choose a new ID for your extension:",
+      "rename.placeholder": "e.g. my-ext-yourname",
+      "rename.hint": "Only lowercase letters, digits and hyphens. This will rename the local folder and update ext.yml.",
+      "rename.btn": "Rename & Publish",
+      "rename.renaming": "Renaming…",
       "pub.version.label": "Version",
 
       "publish.confirm.title": "Publish to the marketplace?",
@@ -88,6 +95,27 @@
       "pub.success": "Published successfully",
       "pub.done.close": "Done",
       "pub.retry": "Try again",
+      "pub.readme.placeholder": "## Overview\n\nDescribe what your extension does...",
+      "pub.screenshot.upload": "Upload screenshot",
+      "pub.screenshot.uploading": "Uploading…",
+      "pub.screenshot.section": "Screenshots",
+      "pub.screenshot.hint": "PNG / JPG / GIF, up to 5 MB each",
+      "pub.screenshot.err": "Upload failed: {{msg}}",
+      "pub.screenshot.err.type": "Only PNG / JPG / GIF are allowed",
+      "pub.screenshot.err.size": "File size must be under 5 MB",
+      "pub.readme.edit.title": "Edit README",
+      "readme.pane.editor": "Markdown editor",
+      "readme.pane.preview": "Preview",
+      "pub.readme.edit": "Edit",
+      "pub.readme.section": "Description",
+      "pub.readme.empty": "No description yet — click Edit to add one.",
+      "pub.readme.save.empty": "Description cannot be empty.",
+      "pub.readme.required": "Please add a description (README) before publishing.",
+      "pub.readme.required.skip": "Skip, publish anyway",
+      "pub.readme.required.edit": "Add description",
+      "pub.readme.save": "Save",
+      "pub.readme.saving": "Saving…",
+      "pub.readme.skip": "Skip",
       "extlist.section.cloud": "Published Extensions",
       "extlist.section.cloudHint": "Live on the marketplace",
       "extlist.section.local": "Local Extensions",
@@ -118,6 +146,25 @@
       "extlist.newExt.hint": "Opens an AI session that scaffolds and builds it for you.",
       "extlist.newExt.btn": "Create New Extension",
       "extlist.newExt.seed": "I want to build a new OpenClacky extension. Help me get started: ask me what the extension should do, then scaffold it and build it out step by step.",
+      "unit.panel": "panel",
+      "unit.panels": "panels",
+      "unit.agent": "agent",
+      "unit.agents": "agents",
+      "unit.api": "API",
+      "unit.apis": "APIs",
+      "unit.skill": "skill",
+      "unit.skills": "skills",
+
+      "meta.section": "Extension Info",
+      "meta.edit.title": "Edit Extension Info",
+      "meta.edit": "Edit",
+      "meta.name.label": "Display name",
+      "meta.desc.label": "Description",
+      "meta.save": "Save",
+      "meta.saving": "Saving…",
+      "meta.saved": "Saved",
+      "meta.save.err": "Save failed: {{msg}}",
+
       "skills.section.cloud": "Cloud Skills",
       "skills.section.cloudHint": "Published to the platform",
       "skills.section.local": "Local Skills",
@@ -186,6 +233,13 @@
       "published.confirm": "确定要从市场下架 {{id}} 吗？",
       "err.generic": "出错了：{{msg}}",
       "err.version_conflict": "版本 {{ver}} 已发布过，请在上方输入更高的版本号后重试。",
+      "err.invalid_version": "版本号格式不对，请使用如 1.0.0 的格式。",
+      "err.name_taken": "扩展名「{{id}}」已被其他用户占用。",
+      "rename.label": "请为你的扩展选择一个新 ID：",
+      "rename.placeholder": "例如 my-ext-yourname",
+      "rename.hint": "只能使用小写字母、数字和连字符。",
+      "rename.btn": "重命名并发布",
+      "rename.renaming": "重命名中…",
       "pub.version.label": "版本号",
 
       "publish.confirm.title": "确定发布到市场？",
@@ -225,6 +279,27 @@
       "pub.success": "已发布成功",
       "pub.done.close": "完成",
       "pub.retry": "重试",
+      "pub.readme.placeholder": "## 简介\n\n描述你的扩展的功能…",
+      "pub.screenshot.upload": "上传截图",
+      "pub.screenshot.uploading": "上传中…",
+      "pub.screenshot.section": "截图",
+      "pub.screenshot.hint": "PNG / JPG / GIF，每张最大 5 MB",
+      "pub.screenshot.err": "上传失败：{{msg}}",
+      "pub.screenshot.err.type": "仅支持 PNG / JPG / GIF 格式",
+      "pub.screenshot.err.size": "文件大小不能超过 5 MB",
+      "pub.readme.edit.title": "编辑使用说明",
+      "readme.pane.editor": "Markdown 编写",
+      "readme.pane.preview": "预览",
+      "pub.readme.edit": "编辑",
+      "pub.readme.section": "使用说明",
+      "pub.readme.empty": "暂无说明 — 点击编辑添加。",
+      "pub.readme.save.empty": "使用说明不能为空。",
+      "pub.readme.required": "发布前请先填写使用说明。",
+      "pub.readme.required.skip": "忽略，继续发布",
+      "pub.readme.required.edit": "去填写",
+      "pub.readme.save": "保存",
+      "pub.readme.saving": "保存中…",
+      "pub.readme.skip": "跳过",
       "extlist.section.cloud": "已发布扩展",
       "extlist.section.cloudHint": "已上架到市场",
       "extlist.section.local": "本地扩展",
@@ -255,6 +330,25 @@
       "extlist.newExt.hint": "打开一个 AI 会话，帮你生成并开发它。",
       "extlist.newExt.btn": "新建扩展",
       "extlist.newExt.seed": "我想开发一个新的 OpenClacky 扩展。请引导我开始：先问清楚这个扩展要做什么，然后帮我搭好骨架并一步步开发出来。",
+      "unit.panel": "个面板",
+      "unit.panels": "个面板",
+      "unit.agent": "个 Agent",
+      "unit.agents": "个 Agent",
+      "unit.api": "个 API",
+      "unit.apis": "个 API",
+      "unit.skill": "个技能",
+      "unit.skills": "个技能",
+
+      "meta.section": "扩展信息",
+      "meta.edit.title": "编辑扩展信息",
+      "meta.edit": "编辑",
+      "meta.name.label": "显示名称",
+      "meta.desc.label": "描述",
+      "meta.save": "保存",
+      "meta.saving": "保存中…",
+      "meta.saved": "已保存",
+      "meta.save.err": "保存失败：{{msg}}",
+
       "skills.section.cloud": "云端 Skills",
       "skills.section.cloudHint": "已发布到平台",
       "skills.section.local": "本地 Skills",
@@ -316,6 +410,22 @@
     return data;
   }
 
+  async function patchJson(path, body) {
+    const res = await fetch(api(path), {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body || {}),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      const err = new Error(data.error || `Request failed (${res.status})`);
+      err.status = res.status;
+      err.data = data;
+      throw err;
+    }
+    return data;
+  }
+
   async function downloadPack(ext_id) {
     const res = await fetch(api("/pack"), {
       method: "POST",
@@ -383,7 +493,6 @@
     box.appendChild(bodyEl);
     box.appendChild(footer);
     overlay.appendChild(box);
-    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
     document.body.appendChild(overlay);
     return { overlay, bodyEl, footer, close };
   }
@@ -477,13 +586,16 @@
     }
   }
 
+  function isSemver(v) {
+    return /^\d+\.\d+\.\d+$/.test(v);
+  }
+
   // 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; 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.
+  // (version + notes) through progress → done.
+  // `prevVersionOrPromise` may be a value or a Promise.
   // Resolves true when a publish succeeded, false otherwise.
-  function runPublishFlow(ext, prevVersionOrPromise) {
+
+  function runPublishFlow(ext, prevVersionOrPromise, { onPublishDone } = {}) {
     return new Promise((resolve) => {
       let currentVersion = ext.version || "";
       let isUpdate = false;
@@ -493,8 +605,15 @@
       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: "?" });
+        const valid = isSemver(currentVersion);
+        verInput.classList.toggle("studio-input-error", !!currentVersion && !valid);
+        publishBtn.disabled = !valid;
+        publishBtn.textContent = valid ? t("pub.btn.publish", { ver: currentVersion }) : t("pub.btn.publish", { ver: currentVersion || "?" });
+        if (currentVersion && !valid) {
+          setProgress(t("err.invalid_version"), true);
+        } else {
+          status.style.display = "none";
+        }
       });
       verField.appendChild(verInput);
 
@@ -563,6 +682,13 @@
         if (done || publishBtn.disabled) return;
         const ver = currentVersion;
         if (!ver) return;
+        if (!isSemver(ver)) {
+          setProgress(t("err.invalid_version", { ver }), true);
+          verInput.classList.add("studio-input-error");
+          verInput.focus();
+          verInput.select();
+          return;
+        }
 
         publishBtn.disabled = true;
         publishBtn.textContent = t("pub.btn.publishing");
@@ -583,15 +709,20 @@
           });
 
           if (data === null) { resetButtons(); return; }
+
+          // Name taken by another user — show inline rename form.
+          if (!data.ok && data.name_taken) {
+            showRenameForm(ext, data.error);
+            modal.close();
+            resolve(false);
+            return;
+          }
+
           if (!data.ok) throw new Error(data.error || "Publish failed");
 
           done = true;
-          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.btn.done");
-          publishBtn.onclick = () => { modal.close(); resolve(true); };
+          modal.close();
+          resolve(true);
         } catch (e) {
           const msg = e.message || "";
           const isConflict = /must be greater than/i.test(msg);
@@ -611,7 +742,83 @@
     });
   }
 
-  // ── Shared: extension list + current selection ─────────────────────────
+  // Show an inline modal that lets the creator pick a new extension ID when
+  // the current name is already taken by another user on the marketplace.
+  // On confirm: calls set_id to rename the local folder + ext.yml, then
+  // immediately re-triggers the full publish flow with the new id.
+  function showRenameForm(ext, serverError) {
+    const slugFormat = /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/;
+
+    const errorMsg = el("p", { class: "studio-modal-status studio-modal-status-error",
+                                text: t("err.name_taken", { id: ext.id }) });
+
+    const field = el("div", { class: "studio-field" });
+    field.appendChild(el("label", { class: "studio-label", text: t("rename.label") }));
+    const input = el("input", { class: "studio-input", type: "text",
+                                 value: ext.id, placeholder: t("rename.placeholder") });
+    const hint = el("p", { class: "studio-field-hint", text: t("rename.hint") });
+    field.appendChild(input);
+    field.appendChild(hint);
+
+    const status = el("p", { class: "studio-modal-status" });
+    status.style.display = "none";
+
+    let done = false;
+    const modal = openModal({
+      title: t("rename.btn"),
+      body: el("div", null, [field, errorMsg, status]),
+      buttons: [
+        { label: t("pub.btn.cancel"), keepOpen: false, onClick: () => {} },
+        { label: t("rename.btn"), primary: true, keepOpen: true, onClick: () => submit() },
+      ],
+    });
+
+    const confirmBtn = modal.footer.querySelector(".studio-btn-primary");
+    const cancelBtn  = modal.footer.querySelector(".studio-btn:not(.studio-btn-primary)");
+
+    input.addEventListener("input", () => {
+      const val = input.value.trim();
+      const valid = val.length >= 2 && val.length <= 64 && slugFormat.test(val) && val !== ext.id;
+      confirmBtn.disabled = !valid;
+      input.classList.toggle("studio-input-error", !!val && !slugFormat.test(val));
+      status.style.display = "none";
+    });
+    // Disable confirm until user types a valid different id.
+    confirmBtn.disabled = true;
+
+    async function submit() {
+      if (done || confirmBtn.disabled) return;
+      const newId = input.value.trim();
+      confirmBtn.disabled = true;
+      confirmBtn.textContent = t("rename.renaming");
+      cancelBtn.disabled = true;
+      input.disabled = true;
+      status.style.display = "none";
+
+      try {
+        await postJson("/set_id", { ext_id: ext.id, new_id: newId });
+        done = true;
+        modal.close();
+        // Re-trigger the full publish flow with the renamed extension.
+        // Reload store first so the new id is visible.
+        await store.reload();
+        const renamed = store.extensions.find((e) => e.id === newId);
+        if (renamed) {
+          const ok = await runPublishFlow(renamed, null, { skipEntryCheck: true });
+          if (ok) store.reload();
+        }
+      } catch (e) {
+        status.textContent = t("err.generic", { msg: e.message });
+        status.style.display = "";
+        status.className = "studio-modal-status studio-modal-status-error";
+        confirmBtn.disabled = false;
+        confirmBtn.textContent = t("rename.btn");
+        cancelBtn.disabled = false;
+        input.disabled = false;
+      }
+    }
+  }
+
   // Both tabs care about "which local extension am I working on", so we keep a
   // tiny page-level store and let each tab subscribe to changes.
   const store = {
@@ -642,7 +849,7 @@
     }
     const select = el("select", { class: "studio-select" });
     store.extensions.forEach((e) => {
-      const opt = el("option", { value: e.id, text: `${e.name} (${e.id})` });
+      const opt = el("option", { value: e.id, text: e.name ? `${e.name} (${e.id})` : e.id });
       if (e.id === store.selectedId) opt.selected = true;
       select.appendChild(opt);
     });
@@ -713,32 +920,6 @@
       if (box) { box.innerHTML = ""; }
     }
 
-    function renderDetail() {
-      const detail = container.querySelector(".studio-detail");
-      if (!detail) return;
-      detail.innerHTML = "";
-      const ext = store.selected();
-      if (!ext) return;
-
-      detail.appendChild(el("h4", { class: "studio-detail-name", text: ext.name }));
-      if (ext.description) detail.appendChild(el("p", { class: "studio-detail-desc", text: ext.description }));
-
-      const meta = el("dl", { class: "studio-meta" });
-      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);
-      detail.appendChild(meta);
-
-      detail.appendChild(el("div", { class: "studio-label", text: t("detail.units") }));
-      if (!ext.units.length) {
-        detail.appendChild(el("p", { class: "studio-empty", text: t("detail.noUnits") }));
-      } else {
-        const list = el("div", { class: "studio-units" });
-        ext.units.forEach((u) => list.appendChild(el("span", { class: "studio-unit-chip", text: `${u.kind} · ${u.id}` })));
-        detail.appendChild(list);
-      }
-    }
-
     function rebuild() {
       if (!container) return;
       container.innerHTML = "";
@@ -749,8 +930,6 @@
         return;
       }
 
-      container.appendChild(el("div", { class: "studio-detail" }));
-
       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" }));
@@ -759,7 +938,6 @@
       container.appendChild(el("div", { class: "studio-verify" }));
       container.appendChild(el("p", { class: "studio-hint", text: t("hint.reload") }));
 
-      renderDetail();
       runVerify();
     }
 
@@ -777,6 +955,306 @@
   }
 
   // ── Publish tab ──────────────────────────────────────────────────────────
+
+  function buildExtInfoCard(ext, onEdit) {
+    const card = el("div", { class: "studio-detail" });
+
+    const head = el("div", { class: "studio-detail-head" });
+    head.appendChild(el("h4", { class: "studio-detail-name", text: ext.name || ext.id }));
+    const editBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("meta.edit") });
+    editBtn.addEventListener("click", onEdit);
+    head.appendChild(editBtn);
+    card.appendChild(head);
+
+    if (ext.description) card.appendChild(el("p", { class: "studio-detail-desc", text: ext.description }));
+
+    const infoRow = el("div", { class: "studio-info-row" });
+    infoRow.appendChild(el("span", { class: "studio-info-label", text: t("detail.version") }));
+    infoRow.appendChild(el("span", { class: "studio-info-value", text: ext.version || "—" }));
+    card.appendChild(infoRow);
+
+    card.appendChild(el("div", { class: "studio-label studio-section-label", text: t("detail.units") }));
+    if (!(ext.units || []).length) {
+      card.appendChild(el("p", { class: "studio-empty", text: t("detail.noUnits") }));
+    } else {
+      const list = el("div", { class: "studio-units" });
+      ext.units.forEach((u) => list.appendChild(el("span", { class: "studio-unit-chip", text: u.kind })));
+      card.appendChild(list);
+    }
+
+    return card;
+  }
+
+  function buildReadmeCard(extId, currentReadme, onEdit) {
+    const card = el("div", { class: "studio-detail studio-readme-card" });
+
+    const head = el("div", { class: "studio-detail-head" });
+    head.appendChild(el("h4", { class: "studio-detail-name", text: t("pub.readme.section") }));
+    const editBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("pub.readme.edit") });
+    editBtn.addEventListener("click", onEdit);
+    head.appendChild(editBtn);
+    card.appendChild(head);
+
+    if (currentReadme && currentReadme.trim()) {
+      const preview = el("div", { class: "studio-readme-preview extension-readme-body studio-readme-card-preview" });
+      preview.innerHTML = typeof marked !== "undefined"
+        ? marked.parse(currentReadme, { breaks: true, gfm: true })
+        : `<pre>${currentReadme}</pre>`;
+      card.appendChild(preview);
+    } else {
+      card.appendChild(el("p", { class: "studio-empty", text: t("pub.readme.empty") }));
+    }
+
+    return card;
+  }
+
+  function openMetaEditModal(ext, onSaved) {
+    const overlay = el("div", { class: "studio-modal-overlay" });
+    overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+
+    const modal = el("div", { class: "studio-modal" });
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    function close() { document.body.removeChild(overlay); }
+
+    modal.appendChild(el("h3", { class: "studio-modal-title", text: t("meta.edit.title") }));
+
+    const nameField = el("div", { class: "studio-field" });
+    nameField.appendChild(el("label", { class: "studio-label", text: t("meta.name.label") }));
+    const nameInput = el("input", { class: "studio-input", value: ext.name || "" });
+    nameField.appendChild(nameInput);
+    modal.appendChild(nameField);
+
+    const descField = el("div", { class: "studio-field" });
+    descField.appendChild(el("label", { class: "studio-label", text: t("meta.desc.label") }));
+    const descInput = el("textarea", { class: "studio-textarea", rows: "5", text: ext.description || "" });
+    descField.appendChild(descInput);
+    modal.appendChild(descField);
+
+    const statusEl = el("span", { class: "studio-form-status" });
+    const footer = el("div", { class: "studio-modal-footer" });
+    const cancelBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("pub.btn.cancel"), onclick: close });
+    const saveBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("meta.save") });
+
+    saveBtn.addEventListener("click", async () => {
+      saveBtn.disabled = true;
+      saveBtn.textContent = t("meta.saving");
+      statusEl.textContent = "";
+      try {
+        await postJson("/set_meta", {
+          ext_id: ext.id,
+          name: nameInput.value.trim(),
+          description: descInput.value.trim(),
+        });
+        close();
+        if (onSaved) onSaved();
+      } catch (e) {
+        saveBtn.disabled = false;
+        saveBtn.textContent = t("meta.save");
+        statusEl.textContent = t("meta.save.err", { msg: e.message });
+      }
+    });
+
+    footer.appendChild(statusEl);
+    footer.appendChild(cancelBtn);
+    footer.appendChild(saveBtn);
+    modal.appendChild(footer);
+  }
+
+  // Standalone README + screenshot editor modal, reachable from the published
+  // extension list at any time (not just after first publish).
+
+  // Prompt user to fill in README before publishing.
+  // Returns a Promise that resolves when the user is ready to continue.
+  // If readme is missing, shows a dialog: "Add description" opens the editor,
+  // "Skip" proceeds without filling in.
+  // Options:
+  //   onSaved(readme) — called after user saves the readme in the editor,
+  //                     use this to trigger a UI refresh in the calling panel.
+  function confirmReadme(ext, { onSaved } = {}) {
+    if (ext.readme && ext.readme.trim()) return Promise.resolve();
+    return new Promise((resolve) => {
+      const overlay = el("div", { class: "studio-modal-overlay" });
+      const box = el("div", { class: "studio-modal", style: "max-width:420px;padding:24px 28px 20px" });
+      box.appendChild(el("h3", { class: "studio-modal-title", style: "margin-bottom:10px", text: t("pub.readme.section") }));
+      box.appendChild(el("p", { style: "margin-bottom:20px;color:var(--color-text-secondary);font-size:14px", text: t("pub.readme.required") }));
+      const footer = el("div", { class: "studio-modal-footer" });
+      const skipBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("pub.readme.required.skip") });
+      const editBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("pub.readme.required.edit") });
+      function close(goEdit) {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+        if (goEdit) {
+          openReadmeEditModal(ext.id, ext.readme || "", (saved) => {
+            ext.readme = saved;
+            if (onSaved) onSaved(saved);
+            resolve();
+          });
+        } else {
+          resolve();
+        }
+      }
+      skipBtn.addEventListener("click", () => close(false));
+      editBtn.addEventListener("click", () => close(true));
+      footer.appendChild(skipBtn);
+      footer.appendChild(editBtn);
+      box.appendChild(footer);
+      overlay.appendChild(box);
+      document.body.appendChild(overlay);
+    });
+  }
+
+  function openReadmeEditModal(extId, initialReadme, onSaved) {
+    // Use a wider full-overlay modal with a split editor/preview layout.
+    const overlay = el("div", { class: "studio-modal-overlay studio-readme-overlay" });
+    const box = el("div", { class: "studio-modal studio-readme-modal" });
+    overlay.appendChild(box);
+    document.body.appendChild(overlay);
+    function close() { if (overlay.parentNode) overlay.parentNode.removeChild(overlay); }
+
+    box.appendChild(el("h3", { class: "studio-modal-title", text: t("pub.readme.edit.title") }));
+
+    // Split pane: left = textarea, right = rendered preview
+    const splitPane = el("div", { class: "studio-readme-split" });
+
+    const editorPane = el("div", { class: "studio-readme-pane" });
+    editorPane.appendChild(el("div", { class: "studio-readme-pane-label", text: t("readme.pane.editor") }));
+    const readmeArea = el("textarea", {
+      class: "studio-textarea studio-readme-textarea",
+      placeholder: t("pub.readme.placeholder"),
+    });
+    // Pre-fill with existing readme content
+    if (initialReadme) {
+      readmeArea.value = initialReadme;
+    }
+    editorPane.appendChild(readmeArea);
+    splitPane.appendChild(editorPane);
+
+    const previewPane = el("div", { class: "studio-readme-pane" });
+    previewPane.appendChild(el("div", { class: "studio-readme-pane-label", text: t("readme.pane.preview") }));
+    const previewBody = el("div", { class: "studio-readme-preview extension-readme-body" });
+    previewPane.appendChild(previewBody);
+    splitPane.appendChild(previewPane);
+
+    box.appendChild(splitPane);
+
+    // Render helper
+    function renderPreview() {
+      const md = readmeArea.value;
+      previewBody.innerHTML = md && typeof marked !== "undefined"
+        ? marked.parse(md, { breaks: true, gfm: true })
+        : (md ? `<pre>${md}</pre>` : "");
+    }
+
+    // Live preview on input
+    readmeArea.addEventListener("input", renderPreview);
+
+    // Initial preview if there's pre-filled content
+    if (readmeArea.value) renderPreview();
+
+    // Screenshots section
+    const screenshotsSection = el("div", { class: "studio-readme-screenshots" });
+
+    const screenshotRow = el("div", { class: "studio-readme-screenshots-row" });
+
+    const fileInput = el("input", { type: "file", accept: "image/png,image/jpeg,image/gif", style: "display:none" });
+    screenshotsSection.appendChild(fileInput);
+
+    const uploadBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("pub.screenshot.upload") });
+    uploadBtn.addEventListener("click", () => fileInput.click());
+    screenshotRow.appendChild(uploadBtn);
+    screenshotRow.appendChild(el("span", { class: "studio-readme-screenshots-hint", text: t("pub.screenshot.hint") }));
+    screenshotsSection.appendChild(screenshotRow);
+
+    const screenshotErr = el("p", { class: "studio-modal-status studio-modal-status-error", style: "display:none;margin-top:6px" });
+    screenshotsSection.appendChild(screenshotErr);
+    fileInput.addEventListener("change", async () => {
+      const file = fileInput.files[0];
+      if (!file) return;
+      fileInput.value = "";
+      screenshotErr.style.display = "none";
+      if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
+        screenshotErr.textContent = t("pub.screenshot.err", { msg: t("pub.screenshot.err.type") });
+        screenshotErr.style.display = "";
+        return;
+      }
+      if (file.size > 5 * 1024 * 1024) {
+        screenshotErr.textContent = t("pub.screenshot.err", { msg: t("pub.screenshot.err.size") });
+        screenshotErr.style.display = "";
+        return;
+      }
+      uploadBtn.disabled = true;
+      uploadBtn.textContent = t("pub.screenshot.uploading");
+      screenshotErr.style.display = "none";
+      try {
+        const form = new FormData();
+        form.append("ext_id", extId);
+        form.append("file", file);
+        const res = await fetch("/api/ext/ext-studio/screenshot", { method: "POST", body: form });
+        const json = await res.json();
+        if (!res.ok || !json.ok) throw new Error(json.error || "upload failed");
+        // Insert ![](url) at cursor position in the editor.
+        // Ensure the image tag is on its own line by adding newlines if needed.
+        const mdImg = `![](${json.url})`;
+        const start = readmeArea.selectionStart;
+        const end = readmeArea.selectionEnd;
+        const before = readmeArea.value.slice(0, start);
+        const after = readmeArea.value.slice(end);
+        const prefix = before.length > 0 && !before.endsWith("\n") ? "\n" : "";
+        const suffix = after.length > 0 && !after.startsWith("\n") ? "\n" : "";
+        const inserted = prefix + mdImg + suffix;
+        readmeArea.value = before + inserted + after;
+        readmeArea.selectionStart = readmeArea.selectionEnd = start + inserted.length;
+        readmeArea.focus();
+        readmeArea.dispatchEvent(new Event("input"));
+      } catch (e) {
+        screenshotErr.textContent = t("pub.screenshot.err", { msg: e.message });
+        screenshotErr.style.display = "";
+      } finally {
+        uploadBtn.disabled = false;
+        uploadBtn.textContent = t("pub.screenshot.upload");
+      }
+    });
+
+    box.appendChild(screenshotsSection);
+
+    const statusEl = el("p", { class: "studio-modal-status", style: "display:none;margin-top:8px" });
+    box.appendChild(statusEl);
+
+    const footer = el("div", { class: "studio-modal-footer" });
+    const cancelBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("pub.btn.cancel") });
+    cancelBtn.addEventListener("click", close);
+    const saveBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("pub.readme.save") });
+    saveBtn.addEventListener("click", async () => {
+      const readme = readmeArea.value.trim();
+      if (!readme) {
+        statusEl.className = "studio-modal-status studio-modal-status-error";
+        statusEl.textContent = t("pub.readme.save.empty");
+        statusEl.style.display = "";
+        readmeArea.focus();
+        return;
+      }
+      saveBtn.disabled = true;
+      saveBtn.textContent = t("pub.readme.saving");
+      cancelBtn.disabled = true;
+      statusEl.style.display = "none";
+      try {
+        await patchJson("/readme", { ext_id: extId, readme });
+        close();
+        if (onSaved) onSaved(readme);
+      } catch (e) {
+        statusEl.textContent = t("err.generic", { msg: e.message });
+        statusEl.style.display = "";
+        saveBtn.disabled = false;
+        saveBtn.textContent = t("pub.readme.save");
+        cancelBtn.disabled = false;
+      }
+    });
+    footer.appendChild(cancelBtn);
+    footer.appendChild(saveBtn);
+    box.appendChild(footer);
+  }
+
   function createPublishPanel() {
     let container = null;
     let unsub = null;
@@ -789,13 +1267,14 @@
     async function doPublish() {
       const ext = store.selected();
       if (!ext) return;
+      await confirmReadme(ext, { onSaved: () => rebuild() });
       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);
+      const ok = await runPublishFlow(ext, prevVersionPromise, { onPublishDone: loadPublished });
       if (ok) loadPublished();
     }
 
@@ -814,13 +1293,27 @@
       }
     }
 
+    function renderPublishedSkeleton(box) {
+      const card = el("div", { class: "studio-skill-card studio-skeleton-card" });
+      const head = el("div", { class: "studio-skill-head" });
+      head.appendChild(el("span", { class: "studio-skeleton studio-skeleton-name" }));
+      head.appendChild(el("span", { class: "studio-skeleton studio-skeleton-badge" }));
+      head.appendChild(el("span", { class: "studio-skeleton studio-skeleton-ver" }));
+      head.appendChild(el("span", { class: "studio-skeleton studio-skeleton-btn" }));
+      card.appendChild(head);
+      box.appendChild(card);
+    }
+
     async function loadPublished() {
       const box = container.querySelector(".studio-published");
       if (!box) return;
       box.innerHTML = "";
       box.appendChild(el("div", { class: "studio-label", text: t("published.title") }));
+      renderPublishedSkeleton(box);
       try {
         const data = await getJson("/published");
+        box.innerHTML = "";
+        box.appendChild(el("div", { class: "studio-label", text: t("published.title") }));
         const exts = data.extensions || [];
         if (!exts.length) { box.appendChild(el("p", { class: "studio-empty", text: t("published.empty") })); return; }
         exts.forEach((e) => {
@@ -830,7 +1323,7 @@
           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") });
+          const unpubBtn = el("button", { class: "studio-btn studio-btn-danger studio-btn-sm", text: t("btn.unpublish") });
           unpubBtn.style.marginLeft = "auto";
           unpubBtn.addEventListener("click", async () => {
             if (!window.confirm(t("published.confirm", { id: e.id }))) return;
@@ -843,6 +1336,8 @@
           box.appendChild(card);
         });
       } catch (e) {
+        box.innerHTML = "";
+        box.appendChild(el("div", { class: "studio-label", text: t("published.title") }));
         box.appendChild(el("p", { class: "studio-empty", text: t("err.generic", { msg: e.message }) }));
       }
     }
@@ -852,7 +1347,19 @@
       container.innerHTML = "";
       container.appendChild(renderPicker(rebuild));
 
-      if (!store.selected()) return;
+      const ext = store.selected();
+      if (!ext) return;
+
+      container.appendChild(buildExtInfoCard(
+        ext,
+        () => openMetaEditModal(ext, () => store.reload().then(rebuild))
+      ));
+
+      container.appendChild(buildReadmeCard(
+        ext.id,
+        ext.readme,
+        () => openReadmeEditModal(ext.id, ext.readme, () => store.reload().then(rebuild))
+      ));
 
       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 }));
@@ -928,6 +1435,15 @@
       return el("span", { class: "studio-skill-badge studio-skill-badge-" + kind, text });
     }
 
+    function formatUnitCounts(counts) {
+      if (!counts || typeof counts !== "object") return "";
+      return Object.keys(counts).map((kind) => {
+        const n = parseInt(counts[kind], 10);
+        if (!n) return null;
+        return `${n} ${t("unit." + kind + (n > 1 ? "s" : ""))}`;
+      }).filter(Boolean).join(" · ");
+    }
+
     function cloudCard(ext) {
       const card = el("div", { class: "studio-skill-card" });
       const head = el("div", { class: "studio-skill-head" });
@@ -969,13 +1485,14 @@
 
       const meta = el("div", { class: "studio-skill-meta" });
       if (ext.version) meta.appendChild(el("span", { text: "v" + ext.version }));
-      if (ext.units && ext.units.length) meta.appendChild(el("span", { text: ext.units.map((u) => u.kind).join(" · ") }));
+      const unitsText = formatUnitCounts(ext.unit_counts);
+      if (unitsText) meta.appendChild(el("span", { text: unitsText }));
       card.appendChild(meta);
 
       const actions = el("div", { class: "studio-actions" });
       const pub = el("button", { class: "studio-btn studio-btn-primary", text: published ? t("extlist.btn.update") : t("extlist.btn.publish") });
-      pub.disabled = !licensed() || !!ext.error_count;
-      pub.title = licensed() ? (ext.error_count ? t("extlist.verify.errors", { n: ext.error_count }) : "") : t("extlist.needLicense");
+      pub.disabled = !!ext.error_count;
+      pub.title = ext.error_count ? t("extlist.verify.errors", { n: ext.error_count }) : "";
       pub.addEventListener("click", () => doPublish(ext, cloudEntry ? cloudEntry.version : null));
       actions.appendChild(pub);
 
@@ -1025,7 +1542,9 @@
     }
 
     async function doPublish(ext, prevVersion) {
-      const ok = await runPublishFlow(ext, prevVersion);
+      await confirmReadme(ext, { onSaved: () => { reload().then(rebuild); } });
+      const onDone = async () => { await reload(); rebuild(); };
+      const ok = await runPublishFlow(ext, prevVersion, { onPublishDone: onDone });
       if (ok) { await reload(); rebuild(); }
     }
 
@@ -1333,18 +1852,16 @@
     .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 { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
     .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; }
     .studio-hint { color: var(--color-text-tertiary); font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
     .studio-detail { border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px; background: var(--color-bg-secondary); }
-    .studio-detail-name { margin: 0 0 4px; font-size: 14px; color: var(--color-text-primary); }
-    .studio-detail-desc { margin: 0 0 10px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
-    .studio-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; font-size: 12px; }
-    .studio-meta dt { color: var(--color-text-tertiary); }
-    .studio-meta dd { margin: 0; color: var(--color-text-primary); }
+    .studio-detail-name { margin: 0; font-size: 14px; color: var(--color-text-primary); }
+    .studio-detail-desc { margin: 4px 0 0; font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
     .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; align-items: center; gap: 8px; margin: 12px 0; }
+    .studio-actions { display: flex; align-items: center; gap: 8px; margin: 12px 0 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); }
@@ -1373,6 +1890,12 @@
     .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; }
+    @keyframes studio-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
+    .studio-skeleton { display: inline-block; border-radius: 4px; background: linear-gradient(90deg, var(--color-bg-hover) 25%, var(--color-border-primary) 50%, var(--color-bg-hover) 75%); background-size: 200px 100%; animation: studio-shimmer 1.4s infinite; }
+    .studio-skeleton-name { width: 120px; height: 14px; }
+    .studio-skeleton-badge { width: 44px; height: 16px; border-radius: 10px; }
+    .studio-skeleton-ver { width: 36px; height: 12px; }
+    .studio-skeleton-btn { width: 44px; height: 26px; margin-left: auto; border-radius: 6px; }
     .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%; }
@@ -1395,8 +1918,8 @@
     .studio-skill-badge-local { background: var(--color-bg-hover); color: var(--color-text-tertiary); }
     .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); }
+    .studio-skill-desc { margin: 6px 0 6px; 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-top: 6px; }
     .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; animation: studio-overlay-in 0.15s ease; }
@@ -1419,6 +1942,33 @@
     .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: 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); }
+    .studio-section { margin-bottom: 20px; }
+    .studio-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+    .studio-info-row { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; }
+    .studio-info-label { font-size: 12px; color: var(--color-text-tertiary); flex-shrink: 0; }
+    .studio-info-value { font-size: 13px; color: var(--color-text-primary); }
+    .studio-section-label { margin-top: 10px; margin-bottom: 6px; }
+    .studio-detail-head .studio-detail-name { margin: 0; }
+    .studio-form-status { font-size: 12px; color: var(--color-text-tertiary); }
+    .studio-btn-sm { padding: 4px 10px; font-size: 12px; }
+    .studio-readme-overlay { align-items: center; justify-content: center; }
+    .studio-readme-modal { width: min(1200px, calc(100vw - 48px)); height: calc(100vh - 80px); max-width: calc(100vw - 48px); border-radius: var(--radius-md, 8px); margin: 0; padding: 24px 28px 20px; display: flex; flex-direction: column; }
+    .studio-readme-modal .studio-modal-title { margin-bottom: 16px; flex-shrink: 0; }
+    .studio-readme-split { display: flex; gap: 14px; flex: 1; min-height: 0; margin-bottom: 18px; }
+    .studio-readme-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+    .studio-readme-pane-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; padding-bottom: 6px; border-bottom: 1px solid var(--color-border-primary); margin-bottom: 8px; }
+    .studio-readme-textarea { flex: 1; resize: none; font-family: monospace; font-size: 12.5px; line-height: 1.65; border-radius: var(--radius-sm); }
+    .studio-readme-preview { flex: 1; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--color-bg-secondary); font-size: 13px; line-height: 1.75; }
+    .studio-readme-preview > *:first-child { margin-top: 0; }
+    .studio-readme-preview img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
+    .studio-readme-screenshots { border-top: 1px solid var(--color-border-primary); padding-top: 14px; margin-bottom: 6px; }
+    .studio-readme-screenshots-row { display: flex; align-items: center; gap: 10px; }
+    .studio-readme-screenshots-hint { font-size: 11px; color: var(--color-text-muted); }
+    .studio-readme-card { margin-top: 8px; }
+    .studio-readme-card-preview { max-height: 200px; overflow-y: auto; font-size: 13px; }
+    .extension-readme-body img { max-width: min(800px, 100%); height: auto; }
+    .studio-link-btn { background: none; border: none; padding: 0; font-size: 12px; color: var(--color-accent-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+    .studio-link-btn:hover { color: var(--color-accent-hover); }
   `;
   document.head.appendChild(style);
 })();