agent-loft 0.2.31 → 0.2.32

package/web/css/skills.css

@@ -0,0 +1,368 @@
+/* ---------- 技能页（版式沿用定时任务页的 .tasks-page / .task-card） ---------- */
+
+.skill-head-btns {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.skill-tabs {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.skill-tabs .seg {
+  display: inline-flex;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--bg-soft);
+}
+
+.skill-tabs .seg button {
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: var(--fg-soft);
+  white-space: nowrap;
+}
+
+.skill-tabs .seg button.on {
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.skill-search {
+  flex: 1;
+  min-width: 160px;
+  padding: 7px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-input);
+  color: var(--fg);
+  font: inherit;
+  font-size: 13px;
+}
+
+.skill-list-box {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.skill-card .skill-name {
+  font-family: var(--mono);
+  font-size: 15px;
+}
+
+.skill-card .btn {
+  padding: 5px 12px;
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.skill-warn {
+  color: var(--danger);
+}
+
+.skill-note {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--fg-soft);
+}
+
+.skill-empty {
+  padding: 32px 0;
+  text-align: center;
+  font-size: 13px;
+  color: var(--fg-faint);
+}
+
+.skills-page .badge,
+.skill-detail .badge {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--bg-soft);
+  color: var(--fg-soft);
+  white-space: nowrap;
+}
+
+.skill-detail .badge.ok {
+  color: var(--ok);
+}
+
+/* 查看 */
+.skill-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.skill-desc {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.skill-section h4 {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg-soft);
+}
+
+.skill-md {
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-size: 14px;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+.skill-vars {
+  margin: 0 0 8px;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.skill-vars li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.skill-var-desc {
+  color: var(--fg-soft);
+}
+
+.skill-files {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.skill-file {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  text-align: left;
+}
+
+.skill-file:hover {
+  background: var(--bg-hover);
+}
+
+.skill-file span {
+  color: var(--fg-faint);
+  flex-shrink: 0;
+}
+
+.skill-file-preview:empty {
+  display: none;
+}
+
+.skill-file-name {
+  margin: 10px 0 6px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--fg-soft);
+}
+
+.skill-file-preview pre,
+.skill-raw {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--code-bg);
+  font-family: var(--mono);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+/* 编辑 */
+.skill-body-input {
+  font-family: var(--mono) !important;
+  font-size: 13px !important;
+}
+
+.skill-var-edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skill-var-edit:empty {
+  display: none;
+}
+
+.skill-var-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.skill-var-hosts[hidden] {
+  display: none;
+}
+
+.skill-var-hosts {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.skill-var-hosts span {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+.skill-var-hosts input {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--mono);
+  font-size: 13px;
+}
+
+.skill-guard {
+  color: var(--ok) !important;
+}
+
+.skill-pending {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--warn-border);
+  background: var(--warn-bg);
+  font-size: 13px;
+}
+
+.skill-pending .btn {
+  flex-shrink: 0;
+}
+
+.skill-var-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.skill-var-line input:not([type="checkbox"]) {
+  flex: 1;
+  min-width: 0;
+}
+
+.skill-var-line input:first-child {
+  font-family: var(--mono);
+  flex: 0 1 220px;
+}
+
+.skill-var-line label {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 13px;
+  white-space: nowrap;
+  color: var(--fg-soft);
+}
+
+.skill-var-edit + .btn,
+.skill-var-row .btn,
+.skill-upload-btns .btn {
+  align-self: flex-start;
+}
+
+.task-form .btn.ghost,
+.skill-var-row .btn.ghost {
+  border-color: transparent;
+  background: var(--bg-soft);
+}
+
+.skill-var-row {
+  display: flex;
+  gap: 6px;
+}
+
+.skill-var-row input {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--mono);
+}
+
+.skill-visibility {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skill-people {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+}
+
+.skill-people[hidden] {
+  display: none;
+}
+
+.skill-person {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 14px;
+}
+
+.skill-upload-btns {
+  display: flex;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+/* @ 补全：在弹窗里的输入框下面弹出 */
+.mention-wrap {
+  position: relative;
+}
+
+.slash-menu.below {
+  top: calc(100% + 4px);
+  bottom: auto;
+  max-height: 240px;
+}
+
+@media (max-width: 640px) {
+  .skills-page .tasks-head {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .skill-head-btns .btn {
+    padding: 7px 10px;
+  }
+
+  .skill-var-line {
+    flex-wrap: wrap;
+  }
+
+  .skill-var-line input:first-child {
+    flex: 1 1 100%;
+  }
+}

package/web/index.html

@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="/css/settings.css" />
     <link rel="stylesheet" href="/css/schedule.css" />
     <link rel="stylesheet" href="/css/tasks.css" />
+    <link rel="stylesheet" href="/css/skills.css" />
     <link rel="stylesheet" href="/css/mobile.css" />
   </head>
   <body>

package/web/lib/dom.js

@@ -34,6 +34,7 @@ export const ICON = {
   clip: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.4 11.6-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5"/></svg>',
   mic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>',
   more: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="19" cy="12" r="1.8"/></svg>',
+  spark: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9Z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8Z"/></svg>',
   clock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
   down: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg>',
   gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>',

package/web/lib/ws.js

@@ -201,6 +201,10 @@ function onWsMessage(msg) {
       // 自己的定时任务变了：定时任务页开着的话会去重新拉（views/tasks.js）
       document.dispatchEvent(new Event("aim:tasks"));
       return;
+    case "skills":
+      // 技能变了（自己的、装了的、广场上的）：技能页重新拉，@ 补全的缓存作废
+      document.dispatchEvent(new Event("aim:skills"));
+      return;
     case "notice":
       // 正看着这条会话就不打扰；普通网页靠 Web Push，这里只给桌面端
       if (!desktop) return;

package/web/state.js

@@ -21,7 +21,7 @@ export const S = {
   loadToken: 0,
   /** 登录的用户 { id, name, role } */
   user: null,
-  /** 主区域在显示什么：null 是对话（或新对话），"tasks" 是定时任务页 */
+  /** 主区域在显示什么：null 是对话（或新对话），"tasks" 是定时任务页，"skills" 是技能页 */
   view: null,
 };
 

package/web/views/composer.js

@@ -8,6 +8,7 @@ import { addItem, openConversation, openLightbox, renderEmpty, scrollToBottom }
 import { renderScheduled } from "./schedule.js";
 import { cancelVoice, SpeechRec, toggleVoice } from "./voice.js";
 import { closeSlashMenu, commandUsage, oneLine, slashKeydown, updateSlashMenu } from "./slash.js";
+import { attachMention } from "./mention.js";
 import { doAction, openModelPicker, openSessions } from "./conv-actions.js";
 
 // ---------- 输入框 ----------
@@ -16,16 +17,21 @@ export function renderComposer() {
   cancelVoice();
   ui.input = h("textarea", {
     rows: 1,
-    placeholder: "随心输入",
+    placeholder: "随心输入，@ 选技能",
     oninput: () => {
       // 识别过程中用户自己动了输入框，以用户为准，停掉识别
       cancelVoice();
       autosize();
       void updateSlashMenu();
+      void ui.mention.update();
     },
-    onblur: () => setTimeout(closeSlashMenu, 150),
+    onblur: () =>
+      setTimeout(() => {
+        closeSlashMenu();
+        ui.mention.close();
+      }, 150),
     onkeydown: (e) => {
-      if (slashKeydown(e)) {
+      if (slashKeydown(e) || ui.mention.keydown(e)) {
         e.preventDefault();
         return;
       }
@@ -62,6 +68,10 @@ export function renderComposer() {
   ui.chips = h("div", { class: "chips" });
   ui.schedBar = h("div", { class: "sched-bar", hidden: true });
   ui.slashMenu = h("div", { class: "slash-menu", hidden: true });
+  ui.mentionMenu = h("div", { class: "slash-menu", hidden: true });
+  ui.mention = attachMention(ui.input, ui.mentionMenu, {
+    onEmpty: () => import("./skills.js").then((m) => m.openSkills()),
+  });
   ui.composer = h(
     "div",
     {
@@ -78,6 +88,7 @@ export function renderComposer() {
       },
     },
     ui.slashMenu,
+    ui.mentionMenu,
     ui.chips,
     ui.input,
     h(
@@ -253,6 +264,7 @@ export async function sendMessage() {
     return;
   }
   closeSlashMenu();
+  ui.mention.close();
   let key;
   let res;
   setSending(true);

package/web/views/layout.js

@@ -47,6 +47,14 @@ function openSettings() {
   );
 }
 
+/** 技能页：第一次打开时才加载 */
+export function openSkillsView() {
+  import("./skills.js").then(
+    (m) => m.openSkills(),
+    (err) => toast(`技能页加载失败，刷新页面再试：${err.message}`),
+  );
+}
+
 /** 定时任务页：第一次打开时才加载 */
 export function openTasksView() {
   import("./tasks.js").then(
@@ -81,6 +89,7 @@ export async function boot() {
   // 地址里带了会话就打开它；否则打开「最近」里最近活跃的那个对话，一个都没有才进新对话页
   const latest = [...S.convs.values()].filter((c) => !c.hidden).sort((a, b) => b.activeAt - a.activeAt)[0];
   if (fromHash === "tasks") openTasksView();
+  else if (fromHash === "skills") openSkillsView();
   else if (fromHash && S.convs.has(fromHash)) await openConversation(fromHash);
   else if (latest) await openConversation(latest.key);
   else newDraft();
@@ -170,6 +179,7 @@ function renderLayout() {
     ),
     // 「最近」上面的入口，像 ChatGPT 的 Tasks。当前在任务页时高亮（renderSidebar 里切换）
     (ui.tasksNav = h("button", { class: "btn new-chat side-nav", onclick: () => openTasksView() }, icon("clock"), "定时任务")),
+    (ui.skillsNav = h("button", { class: "btn new-chat side-nav", onclick: () => openSkillsView() }, icon("spark"), "技能")),
     ui.convList,
     h(
       "div",

package/web/views/mention.js

@@ -0,0 +1,193 @@
+import { fill, h } from "../lib/dom.js";
+import { api } from "../lib/api.js";
+
+// ---------- @ 技能补全 ----------
+//
+// 光标前面是「@xxx」（@ 在开头或者前面是空白、标点）时弹出能用的技能，选中后补成「@name 」。
+// 输入框和定时任务的「要做的事」共用：发出去之后由服务端认消息里的 @name（skill-runtime.ts），
+// 前端只负责补全，不用另外传选了哪些。
+// 列表缓存半分钟；技能有变化时服务端推 { t: "skills" }，缓存作废。
+
+let cache = null;
+document.addEventListener("aim:skills", () => (cache = null));
+
+async function loadSkills() {
+  if (cache && Date.now() - cache.at < 30_000) return cache.list;
+  const data = await api("/api/skills/mention");
+  cache = { at: Date.now(), list: data.skills };
+  return data.skills;
+}
+
+/** 光标前的 @ 片段：返回 { start, query }，不在 @ 里就是 null */
+function mentionAt(input) {
+  const pos = input.selectionStart ?? input.value.length;
+  if (pos !== (input.selectionEnd ?? pos)) return null;
+  const m = /(^|[\s(（，。,.!！?？:：;；"'“”‘’、])@([a-z0-9_-]*)$/i.exec(input.value.slice(0, pos));
+  if (!m) return null;
+  return { start: pos - m[2].length - 1, query: m[2].toLowerCase() };
+}
+
+function match(list, q) {
+  if (!q) return list;
+  const tiers = [[], [], []];
+  for (const s of list) {
+    if (s.name.startsWith(q)) tiers[0].push(s);
+    else if (s.name.includes(q)) tiers[1].push(s);
+    else if (s.description.toLowerCase().includes(q)) tiers[2].push(s);
+  }
+  return tiers.flat();
+}
+
+/**
+ * 给一个输入框挂上 @ 补全。menu 是放菜单的元素（调用方决定放哪、怎么定位，样式用 .slash-menu）。
+ * onEmpty：一个技能都没有时，菜单里给个入口（去技能页）。返回 { update, keydown, close }：
+ * 输入框的 input / keydown / blur 里分别调用。
+ */
+export function attachMention(input, menu, { onEmpty, onPicked } = {}) {
+  const st = { open: false, items: [], index: 0, token: 0, at: null };
+
+  const close = () => {
+    st.open = false;
+    st.items = [];
+    st.index = 0;
+    st.token++;
+    menu.hidden = true;
+  };
+
+  const highlight = () => {
+    menu.querySelectorAll(".slash-item").forEach((el, i) => el.classList.toggle("on", i === st.index));
+    menu.querySelector(".slash-item.on")?.scrollIntoView({ block: "nearest" });
+  };
+
+  const pick = (s) => {
+    const at = mentionAt(input);
+    if (!at) return close();
+    const before = input.value.slice(0, at.start);
+    const after = input.value.slice(input.selectionStart);
+    const insert = `@${s.name}${after.startsWith(" ") ? "" : " "}`;
+    input.value = `${before}${insert}${after}`;
+    const caret = before.length + insert.length;
+    input.setSelectionRange(caret, caret);
+    close();
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.focus();
+    onPicked?.(s);
+  };
+
+  const render = (items, note) => {
+    st.open = true;
+    menu.hidden = false;
+    if (!items) {
+      fill(menu, h("div", { class: "slash-empty" }, note ?? h("span", { class: "spinner" })));
+      return;
+    }
+    fill(
+      menu,
+      items.map((s, i) =>
+        h(
+          "button",
+          {
+            class: `slash-item${i === st.index ? " on" : ""}`,
+            type: "button",
+            onmousedown: (e) => {
+              e.preventDefault();
+              pick(s);
+            },
+            onmousemove: () => {
+              if (st.index !== i) {
+                st.index = i;
+                highlight();
+              }
+            },
+          },
+          h(
+            "div",
+            { class: "slash-head" },
+            h("span", { class: "slash-name" }, `@${s.name}`),
+            s.kind === "machine" ? h("span", { class: "badge" }, "本机") : null,
+          ),
+          h("div", { class: "slash-desc" }, s.description || "（无说明）"),
+        ),
+      ),
+    );
+    highlight();
+  };
+
+  const update = async () => {
+    const at = mentionAt(input);
+    if (!at) return close();
+    const token = ++st.token;
+    if (!st.open) render(null);
+    let list;
+    try {
+      list = await loadSkills();
+    } catch (err) {
+      if (token === st.token) render(null, `读取技能失败：${err.message}`);
+      return;
+    }
+    const now = mentionAt(input);
+    if (token !== st.token || !now) return;
+    if (list.length === 0) {
+      if (now.query || !onEmpty) return close();
+      st.items = [];
+      st.open = true;
+      menu.hidden = false;
+      fill(
+        menu,
+        h(
+          "button",
+          {
+            class: "slash-item on",
+            type: "button",
+            onmousedown: (e) => {
+              e.preventDefault();
+              close();
+              onEmpty();
+            },
+          },
+          h("div", { class: "slash-head" }, h("span", { class: "slash-name" }, "还没有技能")),
+          h("div", { class: "slash-desc" }, "去「技能」页新建、上传，或者从技能广场安装"),
+        ),
+      );
+      return;
+    }
+    const items = match(list, now.query);
+    if (items.length === 0) return close();
+    st.items = items;
+    st.index = Math.min(st.index, items.length - 1);
+    render(items);
+  };
+
+  /** 菜单开着时接管方向键 / Tab / 回车 / Esc；返回 true 表示已处理 */
+  const keydown = (e) => {
+    if (!st.open) return false;
+    if (e.isComposing) return false;
+    if (e.key === "Escape") {
+      close();
+      return true;
+    }
+    if (st.items.length === 0) return false;
+    switch (e.key) {
+      case "ArrowDown":
+        st.index = (st.index + 1) % st.items.length;
+        highlight();
+        return true;
+      case "ArrowUp":
+        st.index = (st.index - 1 + st.items.length) % st.items.length;
+        highlight();
+        return true;
+      case "Tab":
+        pick(st.items[st.index]);
+        return true;
+      case "Enter":
+        if (e.shiftKey) return false;
+        pick(st.items[st.index]);
+        return true;
+    }
+    return false;
+  };
+
+  // 光标移动（点击、方向键离开 @ 片段）也要跟着开关
+  input.addEventListener("click", () => void update());
+  return { update, keydown, close, get open() { return st.open; } };
+}

package/web/views/messages.js

@@ -13,9 +13,9 @@ import { changeCwd, forkConversation } from "./conv-actions.js";
 
 // ---------- 打开会话 ----------
 
-/** 从定时任务页回到对话：把输入框放回来 */
+/** 从定时任务页、技能页回到对话：把输入框放回来 */
 function leaveTasksView() {
-  if (S.view !== "tasks") return;
+  if (!S.view) return;
   S.view = null;
   ui.main.classList.remove("tasks-view");
 }