openclacky 1.3.10 → 1.4.0

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

@@ -49,6 +49,7 @@
       "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.",
       "pub.version.label": "Version",
 
       "publish.confirm.title": "Publish to the marketplace?",
@@ -100,12 +101,14 @@
       "extlist.verify.ok": "Checks passed",
       "extlist.verify.errors": "{{n}} error(s)",
       "extlist.verify.warnings": "{{n}} warning(s)",
-      "extlist.btn.publish": "Publish",
+      "extlist.btn.publish": "Publish to Marketplace",
       "extlist.btn.update": "Update",
-      "extlist.btn.pack": "Pack",
+      "extlist.btn.pack": "Pack (.zip)",
       "extlist.btn.packing": "Packing…",
       "extlist.btn.unpublish": "Unpublish",
       "extlist.btn.iterate": "Iterate",
+      "extlist.btn.delete": "Delete",
+      "extlist.delete.confirm": "Delete local extension \"{{id}}\"? This cannot be undone.",
       "extlist.iterate.seed": "Iterate on extension {{id}}",
       "extlist.changelog.prompt": "Changelog (optional):",
       "extlist.overwrite.confirm": "\"{{id}}\" is already published. Publish a new version?",
@@ -116,6 +119,44 @@
       "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}}",
+
+      "entry.warn.title": "Access entry point not configured",
+      "entry.warn.body": "This extension has UI panels but no entry point is set. Users won't know how to open it after installing.",
+      "entry.warn.setup": "Set up entry point",
+      "entry.warn.skip": "Ignore and continue",
+      "entry.hint": "Choose where users can open this extension after installing it.",
+      "entry.none": "This extension has no UI panels — no entry points needed.",
+      "entry.unset": "Not configured — click Edit to set up.",
+      "entry.slot.label": "Slot",
+      "entry.kind.panel": "Panel",
+      "entry.add": "Add entry point",
+      "entry.remove": "Remove",
+
+      "slot.sidebar.nav": "Sidebar nav",
+      "slot.sidebar.nav.top": "Sidebar nav (top)",
+      "slot.sidebar.nav.bottom": "Sidebar nav (bottom)",
+      "slot.sidebar.footer": "Sidebar footer",
+      "slot.main.workspace": "Main workspace",
+      "slot.session.aside": "Session aside",
+      "slot.settings.tabs": "Settings tab",
       "skills.section.cloud": "Cloud Skills",
       "skills.section.cloudHint": "Published to the platform",
       "skills.section.local": "Local Skills",
@@ -184,6 +225,7 @@
       "published.confirm": "确定要从市场下架 {{id}} 吗？",
       "err.generic": "出错了：{{msg}}",
       "err.version_conflict": "版本 {{ver}} 已发布过，请在上方输入更高的版本号后重试。",
+      "err.invalid_version": "版本号格式不对，请使用如 1.0.0 的格式。",
       "pub.version.label": "版本号",
 
       "publish.confirm.title": "确定发布到市场？",
@@ -235,12 +277,14 @@
       "extlist.verify.ok": "检查通过",
       "extlist.verify.errors": "{{n}} 个错误",
       "extlist.verify.warnings": "{{n}} 个警告",
-      "extlist.btn.publish": "发布",
-      "extlist.btn.update": "更新",
-      "extlist.btn.pack": "打包",
+      "extlist.btn.publish": "发布到市场",
+      "extlist.btn.update": "更新到市场",
+      "extlist.btn.pack": "打包(.zip)",
       "extlist.btn.packing": "打包中…",
       "extlist.btn.unpublish": "下架",
       "extlist.btn.iterate": "迭代",
+      "extlist.btn.delete": "删除",
+      "extlist.delete.confirm": "确定要删除本地扩展「{{id}}」吗？此操作不可恢复。",
       "extlist.iterate.seed": "迭代扩展 {{id}}",
       "extlist.changelog.prompt": "更新说明（可选）：",
       "extlist.overwrite.confirm": "「{{id}}」已经发布过了。要发布新版本吗？",
@@ -251,6 +295,45 @@
       "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}}",
+
+      "entry.section": "访问入口",
+      "entry.warn.title": "未配置访问入口",
+      "entry.warn.body": "该扩展包含 UI 面板，但尚未设置访问入口。安装后用户可能不知道如何打开它。",
+      "entry.warn.setup": "去设置",
+      "entry.warn.skip": "忽略，继续发布",
+      "entry.hint": "选择用户安装扩展后可以从哪里打开它。",
+      "entry.none": "该扩展没有 UI 面板，无需配置访问入口。",
+      "entry.unset": "尚未配置 — 点击编辑设置。",
+      "entry.slot.label": "挂载位置",
+      "entry.kind.panel": "面板",
+      "entry.add": "添加入口",
+      "entry.remove": "删除",
+
+      "slot.sidebar.nav": "侧边栏导航",
+      "slot.sidebar.nav.top": "侧边栏导航（顶部）",
+      "slot.sidebar.nav.bottom": "侧边栏导航（底部）",
+      "slot.sidebar.footer": "侧边栏底部",
+      "slot.main.workspace": "主工作区",
+      "slot.session.aside": "会话侧栏",
+      "slot.settings.tabs": "设置页标签",
       "skills.section.cloud": "云端 Skills",
       "skills.section.cloudHint": "已发布到平台",
       "skills.section.local": "本地 Skills",
@@ -379,7 +462,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 };
   }
@@ -473,14 +555,47 @@
     }
   }
 
+  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.
   // Resolves true when a publish succeeded, false otherwise.
-  function runPublishFlow(ext, prevVersionOrPromise) {
+  function checkEntryPoints(ext) {
+    const hasPanels = (ext.units || []).some((u) => u.kind === "panel");
+    const hasEntries = Array.isArray(ext.entry_points) && ext.entry_points.length > 0;
+    if (!hasPanels || hasEntries) return Promise.resolve(true);
+
     return new Promise((resolve) => {
+      const overlay = el("div", { class: "studio-modal-overlay" });
+      const modal = el("div", { class: "studio-modal", style: "max-width:400px" });
+      overlay.appendChild(modal);
+      document.body.appendChild(overlay);
+
+      function close(result) { document.body.removeChild(overlay); resolve(result); }
+
+      modal.appendChild(el("h3", { class: "studio-modal-title", text: t("entry.warn.title") }));
+      modal.appendChild(el("p", { style: "font-size:13px;color:var(--color-text-secondary);margin:0 0 20px", text: t("entry.warn.body") }));
+
+      const footer = el("div", { class: "studio-modal-footer" });
+      const skipBtn = el("button", { class: "studio-btn studio-btn-ghost", text: t("entry.warn.skip") });
+      skipBtn.addEventListener("click", () => close(true));
+      const setupBtn = el("button", { class: "studio-btn studio-btn-primary", text: t("entry.warn.setup") });
+      setupBtn.addEventListener("click", () => { close(false); openMetaEditModal(ext, () => store.reload()); });
+      footer.appendChild(skipBtn);
+      footer.appendChild(setupBtn);
+      modal.appendChild(footer);
+    });
+  }
+
+  function runPublishFlow(ext, prevVersionOrPromise) {
+    return checkEntryPoints(ext).then((proceed) => {
+      if (!proceed) return false;
+      return new Promise((resolve) => {
       let currentVersion = ext.version || "";
       let isUpdate = false;
 
@@ -489,8 +604,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);
 
@@ -559,6 +681,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");
@@ -605,9 +734,8 @@
         }
       }
     });
-  }
+  }); }
 
-  // ── Shared: extension list + current selection ─────────────────────────
   // 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 = {
@@ -638,7 +766,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);
     });
@@ -710,29 +838,9 @@
     }
 
     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);
-      }
+      container.appendChild(buildExtInfoCard(ext, () => openMetaEditModal(ext, () => store.reload().then(rebuild))));
     }
 
     function rebuild() {
@@ -745,7 +853,7 @@
         return;
       }
 
-      container.appendChild(el("div", { class: "studio-detail" }));
+      renderDetail();
 
       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 }));
@@ -755,7 +863,6 @@
       container.appendChild(el("div", { class: "studio-verify" }));
       container.appendChild(el("p", { class: "studio-hint", text: t("hint.reload") }));
 
-      renderDetail();
       runVerify();
     }
 
@@ -773,6 +880,166 @@
   }
 
   // ── Publish tab ──────────────────────────────────────────────────────────
+
+  const PANEL_SLOTS = [
+    { value: "sidebar.nav",        labelKey: "slot.sidebar.nav" },
+    { value: "sidebar.nav.top",    labelKey: "slot.sidebar.nav.top" },
+    { value: "sidebar.nav.bottom", labelKey: "slot.sidebar.nav.bottom" },
+    { value: "sidebar.footer",     labelKey: "slot.sidebar.footer" },
+    { value: "main.workspace",     labelKey: "slot.main.workspace" },
+    { value: "session.aside",      labelKey: "slot.session.aside" },
+    { value: "settings.tabs",      labelKey: "slot.settings.tabs" },
+  ];
+
+  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);
+
+    const panelUnits = (ext.units || []).filter((u) => u.kind === "panel");
+    if (panelUnits.length) {
+      card.appendChild(el("div", { class: "studio-label studio-section-label", text: t("entry.section") }));
+      const eps = Array.isArray(ext.entry_points) && ext.entry_points.length ? ext.entry_points : null;
+      if (eps) {
+        const chips = el("div", { class: "studio-units" });
+        eps.forEach((ep) => {
+          const slotDef = PANEL_SLOTS.find((s) => s.value === ep.slot);
+          const label = slotDef ? t(slotDef.labelKey) : (ep.slot || ep.kind);
+          chips.appendChild(el("span", { class: "studio-unit-chip", text: label }));
+        });
+        card.appendChild(chips);
+      } else {
+        card.appendChild(el("p", { class: "studio-empty", text: t("entry.unset") }));
+      }
+    }
+
+    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 openMetaEditModal(ext, onSaved) {
+    let entries = Array.isArray(ext.entry_points) ? ext.entry_points.map((ep) => ({ ...ep })) : [];
+    const panelUnits = (ext.units || []).filter((u) => u.kind === "panel");
+
+    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);
+
+    if (panelUnits.length) {
+      const entryField = el("div", { class: "studio-field" });
+      entryField.appendChild(el("label", { class: "studio-label", text: t("entry.section") }));
+      entryField.appendChild(el("p", { class: "studio-hint", style: "margin:0 0 8px", text: t("entry.hint") }));
+
+      const listEl = el("div", { class: "studio-entry-list" });
+
+      function renderEntryList() {
+        listEl.innerHTML = "";
+        entries.forEach((ep, idx) => {
+          const row = el("div", { class: "studio-entry-row" });
+
+          const slotSel = el("select", { class: "studio-select" });
+          PANEL_SLOTS.forEach(({ value, labelKey }) => {
+            const opt = el("option", { value, text: t(labelKey) });
+            if (ep.slot === value) opt.selected = true;
+            slotSel.appendChild(opt);
+          });
+          if (!ep.slot) entries[idx].slot = PANEL_SLOTS[0].value;
+          slotSel.addEventListener("change", () => { entries[idx].slot = slotSel.value; });
+
+          const removeBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: "✕" });
+          removeBtn.title = t("entry.remove");
+          removeBtn.addEventListener("click", () => { entries.splice(idx, 1); renderEntryList(); });
+
+          row.appendChild(slotSel);
+          row.appendChild(removeBtn);
+          listEl.appendChild(row);
+        });
+
+        const addBtn = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: `+ ${t("entry.add")}` });
+        addBtn.addEventListener("click", () => {
+          const du = panelUnits[0];
+          entries.push({ panel_id: du ? du.id : "", slot: PANEL_SLOTS[0].value });
+          renderEntryList();
+        });
+        listEl.appendChild(addBtn);
+      }
+
+      renderEntryList();
+      entryField.appendChild(listEl);
+      modal.appendChild(entryField);
+    }
+
+    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 {
+        const payload = entries.map((ep) => ({ unit_id: ep.panel_id, slot: ep.slot }));
+        await postJson("/set_meta", {
+          ext_id: ext.id,
+          name: nameInput.value.trim(),
+          description: descInput.value.trim(),
+          entry_points: payload,
+        });
+        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);
+  }
+
   function createPublishPanel() {
     let container = null;
     let unsub = null;
@@ -810,13 +1077,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) => {
@@ -826,7 +1107,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;
@@ -839,6 +1120,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 }) }));
       }
     }
@@ -848,7 +1131,10 @@
       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))));
 
       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 }));
@@ -924,6 +1210,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" });
@@ -938,7 +1233,7 @@
 
       const actions = el("div", { class: "studio-actions" });
       actions.appendChild(el("button", { class: "studio-btn studio-btn-primary", text: t("extlist.btn.iterate"), onclick: () => createExtension(t("extlist.iterate.seed", { id: ext.id })) }));
-      const un = el("button", { class: "studio-btn studio-btn-ghost", text: t("extlist.btn.unpublish") });
+      const un = el("button", { class: "studio-btn studio-btn-ghost studio-btn-sm", text: t("extlist.btn.unpublish") });
       un.addEventListener("click", async () => {
         if (!window.confirm(t("extlist.unpublish.confirm", { id: ext.id }))) return;
         un.disabled = true;
@@ -965,13 +1260,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);
 
@@ -980,6 +1276,12 @@
       packBtn.addEventListener("click", () => doPack(ext, packBtn));
       actions.appendChild(packBtn);
       card.appendChild(actions);
+
+      if (!published) {
+        const delBtn = el("button", { class: "studio-btn studio-btn-danger", text: t("extlist.btn.delete") });
+        delBtn.addEventListener("click", () => doDelete(ext, delBtn));
+        actions.appendChild(delBtn);
+      }
       return card;
     }
 
@@ -995,6 +1297,25 @@
       }
     }
 
+    async function doDelete(ext, btn) {
+      if (!confirm(t("extlist.delete.confirm", { id: ext.id }))) return;
+      btn.disabled = true;
+      try {
+        const res = await fetch("/api/ext/ext-studio/local", {
+          method: "DELETE",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ ext_id: ext.id }),
+        });
+        let data = {};
+        try { data = await res.json(); } catch (_e) {}
+        if (!res.ok) throw new Error(data?.error || `Error ${res.status}`);
+        await reload(); rebuild();
+      } catch (e) {
+        alert(t("err.generic", { msg: e.message }));
+        btn.disabled = false;
+      }
+    }
+
     async function doPublish(ext, prevVersion) {
       const ok = await runPublishFlow(ext, prevVersion);
       if (ok) { await reload(); rebuild(); }
@@ -1304,25 +1625,23 @@
     .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); }
     .studio-btn-primary { background: var(--color-button-primary); color: var(--color-button-primary-text); border-color: transparent; }
     .studio-btn-primary:hover { background: var(--color-button-primary-hover); color: var(--color-button-primary-text); }
     .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 { color: var(--color-error); border-color: var(--color-error-border); }
     .studio-btn-danger:hover { background: var(--color-error-bg); color: var(--color-error); }
     .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); }
@@ -1344,6 +1663,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%; }
@@ -1366,8 +1691,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; }
@@ -1390,6 +1715,21 @@
     .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-entry-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
+    .studio-entry-row { display: flex; align-items: stretch; gap: 8px; }
+    .studio-entry-arrow { font-size: 12px; color: var(--color-text-tertiary); flex-shrink: 0; }
+    .studio-entry-row .studio-select { flex: 1; width: auto; padding: 6px 28px 6px 8px; }
+    .studio-entry-row .studio-select:focus { border-color: var(--color-accent-primary); outline: none; }
+    .studio-btn-sm { padding: 4px 10px; font-size: 12px; }
+    .studio-entry-row .studio-btn-sm { padding: 0 10px; }
   `;
   document.head.appendChild(style);
 })();