openclacky 1.5.13 → 1.5.14

data/lib/clacky/web/core/aside.js

@@ -5,7 +5,12 @@
 // chrome so slot re-renders never disturb width or collapse state.
 //
 //   - drag #session-aside-resize to change width (persisted)
+//   - panels ask for extra width via Clacky.Aside.requestWidth(); the clamp
+//     lives here so no caller can push the mobile drawer off-screen
 //   - #btn-aside-collapse hides the column; #btn-aside-open brings it back
+//   - #btn-aside-fullscreen hides the chat column and lets the aside take
+//     the whole workspace (Esc or the button again to leave; collapsing the
+//     panel also leaves fullscreen)
 //   - when the slot is empty (no panels for this agent) CSS collapses the
 //     column on its own; the opener stays hidden in that case
 //
@@ -16,11 +21,106 @@
 (() => {
   const WIDTH_KEY = "clacky.aside.width";
   const OPEN_KEY  = "clacky.aside.open";
+  const FULLSCREEN_KEY = "clacky.aside.fullscreen";
   const MIN_W = 256;
   const maxW = () => Math.max(MIN_W, Math.round(window.innerWidth * 0.8));
+  // Matches the CSS breakpoint where the aside becomes a fixed overlay drawer.
+  const isNarrow = () => window.matchMedia("(max-width: 768px)").matches;
+  const widthRequests = new Map();
+  let nextWidthRequestId = 1;
+  let widthBeforeRequests = null;
+  let appliedRequestWidth = null;
+  let manuallyResizedWhileRequested = false;
 
   const $ = (id) => document.getElementById(id);
 
+  // Custom properties resolve to the authored token, not px — the CSS default
+  // is 16rem, so it needs converting. Every width set here (and the persisted
+  // one) is already px.
+  function currentWidth() {
+    const aside = $("session-aside");
+    if (!aside) return 0;
+    let raw = "";
+    try {
+      raw = getComputedStyle(aside).getPropertyValue("--session-aside-width").trim();
+    } catch (_e) { return 0; }
+    const n = parseFloat(raw);
+    if (!isFinite(n)) return 0;
+    if (/rem$/.test(raw)) {
+      const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+      return n * root;
+    }
+    return n;
+  }
+
+  function setWidth(px) {
+    const aside = $("session-aside");
+    if (aside) aside.style.setProperty("--session-aside-width", px + "px");
+  }
+
+  // Reconcile temporary requests centrally so nested panels can close in any
+  // order. For example, closing a Files preview while an 860px Git diff is
+  // still open must not make the later Git release restore a stale 700px width.
+  function reconcileRequestedWidths() {
+    if (!$('session-aside')) return;
+    const width = currentWidth();
+
+    if (widthRequests.size === 0) {
+      if (!manuallyResizedWhileRequested && widthBeforeRequests !== null &&
+          appliedRequestWidth !== null && Math.round(width) === appliedRequestWidth) {
+        setWidth(widthBeforeRequests);
+      }
+      widthBeforeRequests = null;
+      appliedRequestWidth = null;
+      manuallyResizedWhileRequested = false;
+      return;
+    }
+
+    if (widthBeforeRequests === null) widthBeforeRequests = width;
+    if (manuallyResizedWhileRequested) return;
+    const requested = Math.min(maxW(), Math.max(...widthRequests.values()));
+    const desired = Math.max(widthBeforeRequests, requested);
+    if (Math.round(width) !== Math.round(desired)) setWidth(desired);
+    appliedRequestWidth = Math.round(desired);
+  }
+
+  // Panels that need horizontal room (diff, file preview) ask for a wider
+  // aside. Narrow layouts deliberately ignore temporary requests because the
+  // aside is a fixed mobile drawer there. Persistent requests remain available
+  // for legacy panels that intentionally update the user's preferred width.
+  function requestWidth(px, opts) {
+    const aside = $("session-aside");
+    if (!aside || isNarrow()) return null;
+    const requested = Number(px);
+    if (!Number.isFinite(requested) || requested <= 0) return null;
+    const target = Math.min(maxW(), Math.max(MIN_W, requested));
+    if (opts && opts.persist) {
+      const preferred = Math.max(currentWidth(), target);
+      setWidth(preferred);
+      try { localStorage.setItem(WIDTH_KEY, String(preferred)); } catch (_e) { /* non-fatal */ }
+      if (widthRequests.size > 0) widthBeforeRequests = preferred;
+      return null;
+    }
+
+    const id = nextWidthRequestId++;
+    widthRequests.set(id, target);
+    reconcileRequestedWidths();
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      widthRequests.delete(id);
+      reconcileRequestedWidths();
+    };
+  }
+
+  function clampWidth() {
+    const w = currentWidth();
+    if (!w) return;
+    const max = maxW();
+    if (w > max) setWidth(max);
+  }
+
   function slotEmpty() {
     const slot = $("ext-slot-session-aside");
     return !slot || slot.childElementCount === 0;
@@ -40,6 +140,9 @@
     aside.classList.toggle("collapsed", !open);
     if (opener)  opener.style.display = (!open && !empty) ? "" : "none";
     if (overlay) overlay.classList.toggle("active", open && !empty);
+    // A fullscreen class with an empty slot would show an empty column over
+    // the whole workspace (the fullscreen rule outranks the empty-slot one).
+    if (empty) setFullscreen(false);
   }
 
   function isOpen() {
@@ -51,9 +154,28 @@
 
   function setOpen(open) {
     try { localStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch (_e) { /* ignore */ }
+    if (!open) setFullscreen(false);
     applyOpenState();
   }
 
+  function isFullscreen() {
+    try { return localStorage.getItem(FULLSCREEN_KEY) === "1"; } catch (_e) { return false; }
+  }
+
+  function applyFullscreenState() {
+    const chatPanel = $("chat-panel");
+    if (chatPanel) chatPanel.classList.toggle("aside-fullscreen", isFullscreen());
+    const btn = $("btn-aside-fullscreen");
+    if (btn && window.Clacky && Clacky.I18n) {
+      btn.title = Clacky.I18n.t(isFullscreen() ? "aside.exitFullscreen" : "aside.fullscreen");
+    }
+  }
+
+  function setFullscreen(on) {
+    try { localStorage.setItem(FULLSCREEN_KEY, on ? "1" : "0"); } catch (_e) { /* ignore */ }
+    applyFullscreenState();
+  }
+
   function initResize() {
     const aside  = $("session-aside");
     const handle = $("session-aside-resize");
@@ -72,7 +194,7 @@
       e.preventDefault();
       dragging = true;
       startX = e.clientX;
-      startW = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width"));
+      startW = currentWidth();
       handle.classList.add("active");
       aside.style.transition = "none";
       document.body.style.cursor = "col-resize";
@@ -93,8 +215,13 @@
       aside.style.transition = "";
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
-      const w = parseFloat(getComputedStyle(aside).getPropertyValue("--session-aside-width"));
+      const w = currentWidth();
       try { localStorage.setItem(WIDTH_KEY, w); } catch (_e) { /* ignore */ }
+      if (widthRequests.size > 0) {
+        widthBeforeRequests = w;
+        appliedRequestWidth = null;
+        manuallyResizedWhileRequested = true;
+      }
     });
   }
 
@@ -102,25 +229,47 @@
   // Expose setOpen so external code (e.g. WS dispatcher) can open/close the
   // aside panel programmatically without duplicating localStorage logic here.
   // open() is a no-op when the panel is already open — safe to call unconditionally.
-  if (window.Clacky) Clacky.Aside = {
+  const publicApi = () => ({
     open:  () => { if (!isOpen()) setOpen(true); },
     close: () => setOpen(false),
-  };
+    fullscreen: (on) => setFullscreen(on !== false),
+    requestWidth: requestWidth,
+  });
+  if (window.Clacky) Clacky.Aside = publicApi();
 
   function init() {
     // Re-assign in case Clacky was not yet defined when the IIFE ran.
-    if (window.Clacky) Clacky.Aside = {
-      open:  () => { if (!isOpen()) setOpen(true); },
-      close: () => setOpen(false),
-    };
+    if (window.Clacky) Clacky.Aside = publicApi();
     const collapse = $("btn-aside-collapse");
     const opener   = $("btn-aside-open");
     const overlay  = $("workspace-overlay");
+    const fsBtn    = $("btn-aside-fullscreen");
     if (collapse) collapse.addEventListener("click", () => setOpen(false));
     if (opener)   opener.addEventListener("click", () => setOpen(true));
     if (overlay)  overlay.addEventListener("click", () => setOpen(false));
+    if (fsBtn)    fsBtn.addEventListener("click", () => setFullscreen(!isFullscreen()));
+    document.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape" || !isFullscreen()) return;
+      // Let overlay panels (settings / skills) consume Esc first.
+      const blocked = ["settings-panel", "skills-panel"].some((id) => {
+        const el = document.getElementById(id);
+        return el && el.style.display && el.style.display !== "none";
+      });
+      if (!blocked) setFullscreen(false);
+    });
     initResize();
     applyOpenState();
+    applyFullscreenState();
+
+    // A width set while the window was wide survives into the narrow layout,
+    // where the aside is a fixed drawer — clamp it back on resize so it cannot
+    // sit off-screen. (Persisted widths are already filtered on load.)
+    let clampScheduled = false;
+    window.addEventListener("resize", () => {
+      if (clampScheduled) return;
+      clampScheduled = true;
+      requestAnimationFrame(() => { clampScheduled = false; clampWidth(); });
+    });
 
     // Re-evaluate opener visibility whenever the slot content changes (panels
     // re-render on session / agent switch).

data/lib/clacky/web/core/ext.js

@@ -48,6 +48,7 @@ Clacky.ext = (() => {
   const _dataSources = {};            // name => fn
   const _subscribers = {};            // event => [handler]
   const _slotRenderers = {};          // slot => [{ fn, extId, agents, panel, order, tab }]
+  const _slotTabActivators = {};      // tabbed slot => activate(tabId) from the latest render
   const _workspaces = {};             // id => { id, title, render, extId }
   let   _currentExtId = null;         // set while an extension file is loading
 
@@ -581,6 +582,9 @@ Clacky.ext = (() => {
   // render pass. The host chrome (resize / collapse) lives in the surrounding
   // DOM and is not touched here. Re-rendered wholesale on every session switch.
   function renderTabbedSlot(slot, container, ctx) {
+    // Invalidate any activator captured by a previous render of this slot;
+    // if this pass finds no renderers it must stay invalid.
+    _slotTabActivators[slot] = null;
     container.replaceChildren();
     const profile = (ctx && ctx.agentProfile) || context.agentProfile;
     const renderCtx = Object.assign({}, context, ctx || {});
@@ -607,6 +611,7 @@ Clacky.ext = (() => {
     const rendered = {};
 
     function activate(id) {
+      if (!tabBtns[id]) return false;
       Object.keys(tabBtns).forEach((k) => tabBtns[k].classList.toggle("active", k === id));
       Object.keys(bodyEls).forEach((k) => bodyEls[k].classList.toggle("active", k === id));
       if (!rendered[id]) {
@@ -624,7 +629,9 @@ Clacky.ext = (() => {
           else body.appendChild(node);
         }
       }
+      return true;
     }
+    _slotTabActivators[slot] = activate;
 
     renderers.forEach((entry) => {
       const id = entry.tab.id;
@@ -698,6 +705,14 @@ Clacky.ext = (() => {
     return Object.keys(_slotRenderers).filter((s) => _slotRenderers[s].length > 0);
   }
 
+  // Programmatically activate a tab in a tabbed slot (e.g. switch the session
+  // aside to the preview tab when the user clicks an HTML file or a localhost
+  // link in chat). Returns true when the slot is rendered and the tab exists.
+  function activateTab(slot, tabId) {
+    const activate = _slotTabActivators[slot];
+    return activate ? !!activate(tabId) : false;
+  }
+
   // Update the current session context (host calls this on every session
   // switch) and re-render all slots so panels match the new agent profile.
   // Runs the previous session's view-level teardowns first (event listeners /
@@ -756,6 +771,7 @@ Clacky.ext = (() => {
     emit,
     renderSlot,
     slots,
+    activateTab,
     // Host-only: look up a registered workspace by id. Returns
     // { id, title, render, extId } or undefined. Used by the Router when
     // handling the `ext-workspace` view — extensions never call this.

data/lib/clacky/web/features/billing/view.js

@@ -290,6 +290,37 @@ const BillingView = (() => {
 
   // ── Tooltips ─────────────────────────────────────────────────────────────────
 
+  // Measured while hidden so the real size is known before choosing a side.
+  // The clamp matters on narrow viewports: flipping a 200px-wide tooltip left of
+  // a cursor near the left edge would otherwise push it off-screen.
+  //
+  // Below MOBILE_TOOLTIP_MAX_WIDTH the tooltip is as wide as 58%-73% of the chart,
+  // so following the pointer covers the data no matter which side it flips to.
+  // There it docks just outside `chart` instead, keeping the plot fully visible.
+  const MOBILE_TOOLTIP_MAX_WIDTH = 768;
+
+  function _placeTooltip(tooltip, e, chart) {
+    tooltip.style.display = "block";
+    tooltip.style.visibility = "hidden";
+    const rect = tooltip.getBoundingClientRect();
+
+    if (chart && window.innerWidth <= MOBILE_TOOLTIP_MAX_WIDTH) {
+      const chartRect = chart.getBoundingClientRect();
+      const below = chartRect.bottom + 8;
+      const top = below + rect.height > window.innerHeight ? chartRect.top - 8 - rect.height : below;
+      tooltip.style.left = `${Math.max(8, Math.min(chartRect.left, window.innerWidth - 8 - rect.width))}px`;
+      tooltip.style.top = `${Math.max(8, top)}px`;
+      tooltip.style.visibility = "visible";
+      return;
+    }
+
+    const ovfX = e.clientX + 15 + rect.width - window.innerWidth;
+    const ovfY = e.clientY - 10 + rect.height - window.innerHeight;
+    tooltip.style.left = ovfX > 0 ? `${Math.max(8, e.clientX - 15 - rect.width)}px` : `${e.clientX + 15}px`;
+    tooltip.style.top = ovfY > 0 ? `${Math.max(8, e.clientY - 10 - rect.height)}px` : `${e.clientY - 10}px`;
+    tooltip.style.visibility = "visible";
+  }
+
   function _bindChartTooltip() {
     const container = document.getElementById("billing-chart-container");
     const tooltip = document.getElementById("billing-tooltip");
@@ -334,14 +365,7 @@ const BillingView = (() => {
           <span class="tooltip-value">${output}</span>
         </div>
       `;
-      tooltip.style.display = "block";
-      tooltip.style.visibility = "hidden";
-      const rect = tooltip.getBoundingClientRect();
-      const ovfX = e.clientX + 15 + rect.width - window.innerWidth;
-      const ovfY = e.clientY - 10 + rect.height - window.innerHeight;
-      tooltip.style.left = ovfX > 0 ? `${e.clientX - 15 - rect.width}px` : `${e.clientX + 15}px`;
-      tooltip.style.top = ovfY > 0 ? `${e.clientY - 10 - rect.height}px` : `${e.clientY - 10}px`;
-      tooltip.style.visibility = "visible";
+      _placeTooltip(tooltip, e, container);
     });
 
     container.addEventListener("mouseleave", () => {
@@ -376,27 +400,59 @@ const BillingView = (() => {
           <span class="tooltip-value">${cell.dataset.cost}</span>
         </div>
       `;
-      tooltip.style.display = "block";
-      tooltip.style.left = `${e.clientX + 15}px`;
-      tooltip.style.top = `${e.clientY - 10}px`;
+      _placeTooltip(tooltip, e, grid);
     });
 
     grid.addEventListener("mouseleave", () => {
       tooltip.style.display = "none";
+      tooltip.style.visibility = "";
     });
   }
 
+  // The dots are r="3" in viewBox units, which the responsive SVG scales down to
+  // under 5px on a phone — far too small to hit. Snap to the nearest point on the
+  // x axis instead so the whole column width is clickable.
+  function _nearestTrendDot(svg, clientX, clientY) {
+    const count = parseInt(svg.dataset.count, 10);
+    const xStep = parseFloat(svg.dataset.xStep);
+    const plotLeft = parseFloat(svg.dataset.plotLeft);
+    if (!count || !xStep) return null;
+    const ctm = svg.getScreenCTM();
+    if (!ctm) return null;
+    const point = svg.createSVGPoint();
+    point.x = clientX;
+    point.y = clientY;
+    const x = point.matrixTransform(ctm.inverse()).x;
+    const index = Math.max(0, Math.min(count - 1, Math.round((x - plotLeft) / xStep)));
+    return svg.querySelector(`.billing-trend-dot[data-index="${index}"]`);
+  }
+
   function _bindTrendTooltip() {
     const svg = document.querySelector(".billing-trend-svg");
     const tooltip = document.getElementById("billing-tooltip");
     if (!svg || !tooltip) return;
 
+    const crosshairX = svg.querySelector(".billing-trend-crosshair-x");
+    const crosshairY = svg.querySelector(".billing-trend-crosshair-y");
+
     svg.addEventListener("mousemove", (e) => {
-      const dot = e.target.closest(".billing-trend-dot");
+      const dot = _nearestTrendDot(svg, e.clientX, e.clientY);
       if (!dot) {
         tooltip.style.display = "none";
         return;
       }
+      svg.querySelectorAll(".billing-trend-dot.is-active").forEach(d => d.classList.remove("is-active"));
+      dot.classList.add("is-active");
+      if (crosshairX && crosshairY) {
+        const cx = dot.getAttribute("cx");
+        const cy = dot.getAttribute("cy");
+        crosshairX.setAttribute("x1", cx);
+        crosshairX.setAttribute("x2", cx);
+        crosshairY.setAttribute("y1", cy);
+        crosshairY.setAttribute("y2", cy);
+        crosshairX.classList.add("is-visible");
+        crosshairY.classList.add("is-visible");
+      }
       tooltip.innerHTML = `
         <div class="tooltip-header">
           <span class="tooltip-date">${dot.dataset.date}</span>
@@ -406,18 +462,14 @@ const BillingView = (() => {
           <span class="tooltip-value">${dot.dataset.cost}</span>
         </div>
       `;
-      tooltip.style.display = "block";
-      tooltip.style.visibility = "hidden";
-      const rect = tooltip.getBoundingClientRect();
-      const ovf = e.clientX + 15 + rect.width - window.innerWidth;
-      tooltip.style.left = ovf > 0 ? `${e.clientX - 15 - rect.width}px` : `${e.clientX + 15}px`;
-      tooltip.style.top = `${e.clientY - 10}px`;
-      tooltip.style.visibility = "visible";
+      _placeTooltip(tooltip, e, svg);
     });
 
     svg.addEventListener("mouseleave", () => {
       tooltip.style.display = "none";
       tooltip.style.visibility = "";
+      svg.querySelectorAll(".billing-trend-dot.is-active").forEach(d => d.classList.remove("is-active"));
+      svg.querySelectorAll(".billing-trend-crosshair").forEach(l => l.classList.remove("is-visible"));
     });
   }
 
@@ -641,7 +693,7 @@ const BillingView = (() => {
           <h4>${I18n.t("billing.costTrend") || "Cost Trend"}</h4>
         </div>
         <div class="billing-trend-chart">
-          <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid meet" class="billing-trend-svg">
+          <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="xMidYMid meet" class="billing-trend-svg" data-plot-left="${pad.left}" data-x-step="${xStep}" data-count="${costs.length}">
             ${yLabels.map(l => `
               <line x1="${pad.left}" y1="${l.y}" x2="${w - pad.right}" y2="${l.y}" class="billing-trend-grid-line" />
               <text x="${pad.left - 6}" y="${l.y + 4}" class="billing-trend-y-label">${currencySymbol}${_formatCost(l.val)}</text>
@@ -656,11 +708,13 @@ const BillingView = (() => {
               </linearGradient>
             </defs>
             <polygon points="${areaPoints}" fill="url(#billing-trend-grad)" class="billing-trend-area" />
+            <line class="billing-trend-crosshair billing-trend-crosshair-x" x1="0" y1="${pad.top}" x2="0" y2="${pad.top + plotH}" />
+            <line class="billing-trend-crosshair billing-trend-crosshair-y" x1="${pad.left}" y1="0" x2="${w - pad.right}" y2="0" />
             <polyline points="${points}" fill="none" class="billing-trend-line" />
             ${costs.map((c, i) => {
               const cx = pad.left + i * xStep;
               const cy = pad.top + plotH - ((c - minCost) / range) * plotH;
-              return `<circle cx="${cx}" cy="${cy}" r="3" class="billing-trend-dot" data-date="${days[i].date}" data-cost="${currencySymbol}${_formatCost(c)}" />`;
+              return `<circle cx="${cx}" cy="${cy}" r="3" class="billing-trend-dot" data-index="${i}" data-date="${days[i].date}" data-cost="${currencySymbol}${_formatCost(c)}" />`;
             }).join("")}
           </svg>
         </div>

data/lib/clacky/web/features/skills/store.js

@@ -262,7 +262,7 @@ const SkillsStore = (() => {
         const res  = await fetch(`/api/skills/${encodeURIComponent(name)}/content`);
         const data = await res.json();
         if (!data.ok) throw new Error(data.error || "Load failed");
-        return { ok: true, content: data.content || "", path: data.path };
+        return { ok: true, content: data.content || "", path: data.path, fields: data.fields };
       } catch (e) {
         return { ok: false, error: e.message };
       }
@@ -285,6 +285,23 @@ const SkillsStore = (() => {
       }
     },
 
+    /** Update a custom skill's editable fields (name/name_zh/description/description_zh/body). */
+    async updateSkillFields(name, fields) {
+      try {
+        const res  = await fetch(`/api/skills/${encodeURIComponent(name)}/content`, {
+          method:  "PUT",
+          headers: { "Content-Type": "application/json" },
+          body:    JSON.stringify({ fields })
+        });
+        const data = await res.json();
+        if (!res.ok || !data.ok) throw new Error(data.error || "Save failed");
+        await Skills.load();
+        return { ok: true };
+      } catch (e) {
+        return { ok: false, error: e.message };
+      }
+    },
+
     /** Import a skill: validate url/path, open a session, run /skill-add. */
     async importSkill(url) {
       const trimmed = (url || "").trim();

data/lib/clacky/web/features/skills/view.js

@@ -596,16 +596,137 @@ const SkillsView = (() => {
   async function _editSkill(skill) {
     const res = await Skills.fetchSkillContent(skill.name);
     if (!res.ok) { alert(I18n.t("skills.editFail") + ": " + res.error); return; }
+    _openSkillFormEditor(skill, res);
+  }
+
+  function _openSkillFormEditor(skill, res) {
+    const f = res.fields || {};
+
+    let overlay = document.getElementById("skill-editor-overlay");
+    if (overlay) overlay.remove();
+
+    overlay = document.createElement("div");
+    overlay.id = "skill-editor-overlay";
+    overlay.className = "modal-overlay";
+
+    const cancelLabel = I18n.t("modal.cancel");
+    const saveLabel   = I18n.t("modal.save");
+
+    overlay.innerHTML = `
+      <div class="modal-box skill-editor-box">
+        <div class="modal-header">
+          <h3 class="modal-title"></h3>
+          <button class="modal-close-btn" title="${cancelLabel}"></button>
+        </div>
+        <div class="modal-body">
+          <div class="modal-field">
+            <label class="modal-label" for="se-name">${I18n.t("skills.edit.name")}</label>
+            <input type="text" id="se-name" class="modal-input skill-editor-name">
+            <span class="form-hint">${I18n.t("skills.edit.nameHint")}</span>
+          </div>
+          <div class="modal-field">
+            <label class="modal-label" for="se-name-zh">${I18n.t("skills.edit.nameZh")}</label>
+            <input type="text" id="se-name-zh" class="modal-input skill-editor-name-zh">
+          </div>
+          <div class="modal-field">
+            <label class="modal-label" for="se-desc">${I18n.t("skills.edit.description")}</label>
+            <textarea id="se-desc" class="modal-input skill-editor-description" rows="2"></textarea>
+          </div>
+          <div class="modal-field">
+            <label class="modal-label" for="se-desc-zh">${I18n.t("skills.edit.descriptionZh")}</label>
+            <textarea id="se-desc-zh" class="modal-input skill-editor-description-zh" rows="2"></textarea>
+          </div>
+          <div class="modal-field">
+            <label class="modal-label" for="se-body">${I18n.t("skills.edit.body")}</label>
+            <textarea id="se-body" class="modal-input skill-editor-body-input" rows="10"></textarea>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <span class="skill-editor-status"></span>
+          <button class="btn-secondary skill-editor-cancel">${cancelLabel}</button>
+          <button class="btn-secondary skill-editor-markdown">${I18n.t("skills.edit.editMarkdown")}</button>
+          <button class="btn-primary skill-editor-save">${saveLabel}</button>
+        </div>
+      </div>`;
+
+    document.body.appendChild(overlay);
+    overlay.querySelector(".modal-title").textContent = I18n.t("skills.edit.title") + ": " + skill.name;
+
+    const nameInput   = overlay.querySelector(".skill-editor-name");
+    const nameZhInput = overlay.querySelector(".skill-editor-name-zh");
+    const descInput   = overlay.querySelector(".skill-editor-description");
+    const descZhInput = overlay.querySelector(".skill-editor-description-zh");
+    const bodyInput   = overlay.querySelector(".skill-editor-body-input");
+    const status      = overlay.querySelector(".skill-editor-status");
+    const closeBtn    = overlay.querySelector(".modal-close-btn");
+    const cancelBtn   = overlay.querySelector(".skill-editor-cancel");
+    const markdownBtn = overlay.querySelector(".skill-editor-markdown");
+    const saveBtn     = overlay.querySelector(".skill-editor-save");
+
+    nameInput.value   = f.name || skill.name || "";
+    nameZhInput.value = f.name_zh || "";
+    descInput.value   = f.description || "";
+    descZhInput.value = f.description_zh || "";
+    bodyInput.value   = f.body || "";
+
+    // Auto-grow textareas so the modal body is the only scroll container.
+    [descInput, descZhInput, bodyInput].forEach((ta) => {
+      const autoResize = () => {
+        ta.style.height = "auto";
+        ta.style.height = ta.scrollHeight + "px";
+      };
+      ta.addEventListener("input", autoResize);
+      autoResize();
+    });
 
-    CodeEditor.open({
-      content: res.content,
-      title: skill.name,
-      language: "markdown",
-      onSave: async (newContent) => {
-        const r = await Skills.updateSkillContent(skill.name, newContent);
-        if (!r.ok) throw new Error(r.error);
+    function close() {
+      overlay.remove();
+    }
+
+    closeBtn.addEventListener("click", close);
+    cancelBtn.addEventListener("click", close);
+
+    markdownBtn.addEventListener("click", () => {
+      close();
+      CodeEditor.open({
+        content: res.content,
+        title: skill.name,
+        language: "markdown",
+        onSave: async (newContent) => {
+          const r = await Skills.updateSkillContent(skill.name, newContent);
+          if (!r.ok) throw new Error(r.error);
+        }
+      });
+    });
+
+    saveBtn.addEventListener("click", async () => {
+      const name = nameInput.value.trim();
+      if (!name) {
+        nameInput.classList.add("input-error");
+        nameInput.focus();
+        return;
       }
+
+      const fields = {
+        name:           name,
+        name_zh:        nameZhInput.value.trim(),
+        description:    descInput.value.trim(),
+        description_zh: descZhInput.value.trim(),
+        body:           bodyInput.value
+      };
+
+      saveBtn.disabled = true;
+      status.textContent = I18n.t("modal.saving");
+      status.className = "skill-editor-status";
+      const r = await Skills.updateSkillFields(skill.name, fields);
+      if (r.ok) { close(); return; }
+
+      status.textContent = I18n.t("skills.edit.saveFail") + (r.error ? ": " + r.error : "");
+      status.className = "skill-editor-status skill-editor-status-error";
+      saveBtn.disabled = false;
     });
+
+    setTimeout(() => nameInput.focus(), 50);
   }
 
   async function _doImportFromBar() {