shadok-ai 0.17.36 → 0.17.37

package/README.md

@@ -254,6 +254,9 @@ Enter to skip; you can add it later from the web UI).
   with a command goes to the agent bare, without shadok's context line or
   ledger update ahead of it, since Claude Code reads a command only when `/`
   comes first.
+  The ✦ button beside the paperclip opens the same menu without typing, like
+  an emoji picker: the chosen skill goes in **front** of what you already
+  wrote (which becomes its argument), replacing a command already there.
 - **Files you hand an agent** — paste or drop a file into the composer, or pick
   one with the 📎 button beside it (an image, a PDF, a CSV…), and it becomes a **chip** above the text box: a
   thumbnail for an image, a named tag for anything else, each with a ✕ to
@@ -301,6 +304,14 @@ Enter to skip; you can add it later from the web UI).
   - **The detail panel.** Its numbers, where it runs (group by group: each
     agent, its schedule, its runs), the secrets agents running it get, and its
     feedback.
+  - **Creating.** The new-skill form asks for a **name** (what people see) and
+    a **technical name** (what agents call it, `/name:name`), proposed from the
+    name until you type your own. Choose it then: it is the skill's repository
+    and plugin name, so it cannot be changed afterwards. A name already taken
+    gets a number (`-2`, `-3`…), and the form says so before you create it.
+  - **Renaming.** Click a skill's name at the top of its editor to rename it
+    (Enter saves, Escape cancels). Only the displayed name changes: agents keep
+    calling it by its technical name, so attached agents are not disturbed.
   - **Sharing.** A skill is shared with **only me**, with **one or more
     groups**, or with **everyone**. Sharing keeps lists short; it is not a
     lock. "Only me" hides the skill from everyone else. A group skill is offered

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.17.36",
+  "version": "0.17.37",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test --test-timeout=120000 test/*.ts context/*/test/*.test.mjs",

package/public/index.html

@@ -1771,6 +1771,7 @@
   .slash-menu[hidden] { display: none; }
   .slash-item { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
   .slash-item[aria-selected="true"] { background: var(--amber-soft); }
+  .slash-empty { padding: 8px 10px; color: var(--text-dim); font-size: 13px; }
   .slash-name { font-family: var(--mono); font-size: 13px; flex: none; }
   .slash-desc { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
   .cmp-attach {
@@ -2489,6 +2490,11 @@
   .fp-col.fp-doc { padding: 22px 26px; background: var(--bg); }
   .fp-doc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
   .fp-doc-head h1 { font-size: 20px; font-weight: 650; }
+  /* The skill's name, renamed in place: reads as a title until hovered/focused. */
+  .fp-main .fp-doc-head input.fp-title-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 20px; font-weight: 650; color: var(--text);
+    background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin-left: -7px; }
+  .fp-main .fp-doc-head input.fp-title-in:hover { border-color: var(--line); }
+  .fp-main .fp-doc-head input.fp-title-in:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
   .fp-doc-head .fp-sub { margin-top: 4px; }
   .fp-doc textarea { border-radius: 10px; padding: 10px 12px; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); font-family: var(--sans); }
   .fp-doc textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
@@ -3752,6 +3758,11 @@
         <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M21 11.5l-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6l7.9-7.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
       </button>
       <input type="file" id="attachInput" multiple hidden>
+      <!-- Pick a skill like an emoji: opens the `/` menu with every skill attached
+           to this agent; the choice goes in at the head of the prompt. -->
+      <button type="button" id="skillBtn" class="cmp-attach" title="Add a skill to this prompt" aria-label="Add a skill" aria-haspopup="listbox">
+        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z M18.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg>
+      </button>
       <div id="slashMenu" class="slash-menu" role="listbox" aria-label="Commands" hidden></div>
       <textarea id="promptInput" rows="1"
         placeholder="Write your prompt — Enter to send, Shift+Enter for a new line"></textarea>
@@ -9952,9 +9963,19 @@
     slash.cache.set(sessionId, { at: Date.now(), list });
     return list;
   }
-  function closeSlash() { slashMenu.hidden = true; slash.list = []; }
+  function closeSlash() { slashMenu.hidden = true; slash.list = []; slash.picker = false; }
   function paintSlash() {
     slashMenu.textContent = "";
+    if (slash.picker && !slash.list.length) {
+      // Only ATTACHED skills run (they load as a plugin at spawn), so an empty
+      // menu says where to attach one rather than staying silently shut.
+      const d = document.createElement("div");
+      d.className = "slash-empty";
+      d.textContent = "No skill attached to this agent yet. Attach one from the Skills page, then reload the agent.";
+      slashMenu.appendChild(d);
+      slashMenu.hidden = false;
+      return;
+    }
     slash.list.forEach((c, i) => {
       const b = document.createElement("button");
       b.type = "button";
@@ -9985,16 +10006,34 @@
   function pickSlash(i) {
     const c = slash.list[i];
     if (!c) return;
-    promptInput.value = "/" + c.name + " ";
+    // From the picker the prompt may already hold text: a `/command` only runs at
+    // the very start (isSlashCommand), so the skill goes in FRONT and the text
+    // becomes its argument; a command already there is replaced, not stacked.
+    const rest = slash.picker ? promptInput.value.replace(/^\/[A-Za-z][\w:.-]*\s*/, "") : "";
+    promptInput.value = "/" + c.name + " " + rest;
     promptInput.setSelectionRange(promptInput.value.length, promptInput.value.length);
     closeSlash();
     promptInput.dispatchEvent(new Event("input"));
     promptInput.focus();
   }
   promptInput.addEventListener("input", updateSlash);
+  const skillBtn = $("skillBtn");
+  // mousedown would blur the textarea, whose blur handler closes the menu.
+  skillBtn.addEventListener("mousedown", (e) => e.preventDefault());
+  skillBtn.addEventListener("click", async () => {
+    if (!active) return;
+    if (!slashMenu.hidden && slash.picker) { closeSlash(); return; }
+    const all = await slashCommands(active.sessionId);
+    slash.list = all.slice(0, 40);
+    slash.at = 0;
+    slash.picker = true;
+    paintSlash();
+    promptInput.focus(); // arrows / Enter / Escape go through its keydown
+  });
   promptInput.addEventListener("blur", () => setTimeout(closeSlash, 100));
 
   promptInput.addEventListener("keydown", (e) => {
+    if (!slashMenu.hidden && slash.picker && !slash.list.length && e.key === "Escape") { e.preventDefault(); closeSlash(); return; }
     if (!slashMenu.hidden && slash.list.length) {
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
@@ -11685,8 +11724,31 @@
     const scroll = facEl("div", { class: "fp-scroll" });
     m.appendChild(scroll);
     const title = facEl("input", { type: "text", id: "fpTitle", placeholder: "Daily marketing summary", autocomplete: "off" });
-    const slugHint = facEl("div", { class: "fp-hint", text: "Agents see it under a short technical name, made from this one." });
-    title.addEventListener("input", () => { const sl = facSlug(title.value); slugHint.textContent = sl ? `Agents will see it as ${sl}:${sl}.` : "Agents see it under a short technical name, made from this one."; });
+    // The technical name agents call it by (`/<name>:<name>`): proposed from the
+    // name above until the person types their own, then left alone. Unlike the
+    // displayed name it can NOT be changed later (it is the repo, the plugin and
+    // every attachment's key), so it is chosen here or never.
+    const slug = facEl("input", { type: "text", id: "fpSlug", placeholder: "daily-marketing-summary", autocomplete: "off", spellcheck: "false", maxlength: "40", style: "font-family:var(--mono)" });
+    let slugTouched = false;
+    const slugHint = facEl("div", { class: "fp-hint" });
+    const paintSlug = () => {
+      const sl = facSlug(slug.value);
+      const taken = sl && fac.data && fac.data.skills.some((x) => x.name === sl);
+      slugHint.textContent = !sl ? "Lowercase letters, digits and dashes. It cannot be changed later."
+        : sl.length < 2 ? "At least 2 characters."
+        : taken ? `${sl} is already used: it will be saved as ${sl}-2 (or the next free number).`
+        : `Agents will call it /${sl}:${sl}. It cannot be changed later.`;
+    };
+    title.addEventListener("input", () => { if (!slugTouched) slug.value = facSlug(title.value); paintSlug(); });
+    slug.addEventListener("input", () => {
+      // Light clean-up while typing (a trailing dash must survive, "my-" is on its
+      // way to "my-skill"); the full facSlug runs when it is sent.
+      const v = slug.value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+/, "").replace(/--+/g, "-");
+      if (v !== slug.value) slug.value = v;
+      slugTouched = !!v; // emptied → follows the name again (at its next edit, or on Create)
+      paintSlug();
+    });
+    paintSlug();
     const desc = facEl("textarea", { rows: "4", id: "fpDescIn",
       placeholder: "Writes a short summary of yesterday's marketing numbers (traffic, signups, campaigns) and posts it in #marketing. Use it every morning, or when someone asks for the marketing summary." });
     const tags = facEl("input", { type: "text", placeholder: "reporting, slack" });
@@ -11702,7 +11764,7 @@
       const v = (scroll.querySelector('input[name="fpScope"]:checked') || {}).value || "me";
       const scope = v === "groups" ? { groups: [...ids] } : v;
       try {
-        const out = await facCall("POST", "/factory/skills", { title: title.value.trim(), description: desc.value.trim(), scope, tags: tags.value });
+        const out = await facCall("POST", "/factory/skills", { title: title.value.trim(), name: facSlug(slug.value) || facSlug(title.value) || undefined, description: desc.value.trim(), scope, tags: tags.value });
         await facLoad();
         facEdit(out.skill.id, true);
       } catch (e) { facMsg(e.message, true); }
@@ -11711,7 +11773,9 @@
       facEl("div", { class: "fp-bar" }, [facEl("button", { class: "fp-link", text: "← Skills", onclick: () => facGo("list") })]),
       facEl("h1", { text: "New skill" }),
       facEl("div", { class: "fp-sub", text: "A short set of instructions an agent follows to do one job." }),
-      facEl("div", { class: "fp-field" }, [facEl("label", { for: "fpTitle", text: "Name" }), title, slugHint]),
+      facEl("div", { class: "fp-field" }, [facEl("label", { for: "fpTitle", text: "Name" }), title,
+        facEl("div", { class: "fp-hint", text: "What people see. You can rename it any time." })]),
+      facEl("div", { class: "fp-field" }, [facEl("label", { for: "fpSlug", text: "Technical name" }), slug, slugHint]),
       facEl("div", { class: "fp-field" }, [facEl("label", { for: "fpDescIn", text: "What does it do, and when should it be used?" }), desc,
         facEl("div", { class: "fp-hint", text: "An agent reads this to decide to use the skill. You can refine it later." })]),
       facEl("div", { class: "fp-field" }, [facEl("span", { class: "fp-label", text: "Shared with" }),
@@ -11830,7 +11894,29 @@
     const ed = fac.ed;
     const dirty = () => ed.desc !== ed.saved.desc || ed.body !== ed.saved.body;
     // Center content per tab
-    center.appendChild(facEl("div", { class: "fp-doc-head" }, [facAvatar(s, "lg"), facEl("div", {}, [facEl("h1", { text: facTitle(s) }),
+    // The name is edited in place: it is only the DISPLAY title (PUT …/meta), the
+    // technical name agents call it by (`<name>:<name>`) stays put, so attached
+    // agents and typed `/` commands keep working after a rename.
+    const nameIn = facEl("input", { type: "text", class: "fp-title-in", value: facTitle(s), maxlength: "80",
+      "aria-label": "Skill name", title: `Click to rename. Agents still call it ${s.name}:${s.name}.` });
+    const saveName = async () => {
+      const v = nameIn.value.trim();
+      if (!v) { nameIn.value = facTitle(s); return; }
+      if (v === facTitle(s)) return;
+      try {
+        await facCall("PUT", `/factory/skills/${s.id}/meta`, { title: v });
+        await facLoad();
+        // A blur caused by clicking another skill in the list: that click already
+        // rendered the other one — repainting here would race it.
+        if (fac.view === "edit" && fac.sel && fac.sel.id === s.id) facRender();
+      } catch (e) { nameIn.value = facTitle(s); facMsg(e.message, true); }
+    };
+    nameIn.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") { e.preventDefault(); nameIn.blur(); }
+      if (e.key === "Escape") { nameIn.value = facTitle(s); nameIn.blur(); }
+    });
+    nameIn.addEventListener("blur", saveName);
+    center.appendChild(facEl("div", { class: "fp-doc-head" }, [facAvatar(s, "lg"), facEl("div", { style: "flex:1;min-width:0" }, [nameIn,
       facEl("div", { class: "fp-sub" }, [
         facStatus(s).includes("draft") ? facEl("span", { class: "fp-ver draft", text: "draft changes" }) : facEl("span", { class: "fp-ver live", text: "saved" }),
         "  ", ...facSharedLabels(s.owner).map((x) => facEl("span", { class: "fp-gp", text: x }))])])]));