agent-loft 0.2.31 → 0.2.33

package/web/css/sidebar.css

@@ -324,13 +324,13 @@ button.conv-group:hover {
   min-height: 48px;
 }
 
-.side-gear {
-  margin-left: auto;
+/* 没有额度可显示：连上面的分隔线一起藏起来 */
+.side-bottom[hidden] {
+  display: none;
 }
 
-/* 桌面端里：设置在顶栏「更多」里，侧栏底部只留额度（额度由桌面端统一查好推过来） */
-.desktop-settings .side-gear {
-  display: none;
+.conv-item .chat-mark {
+  color: var(--fg-soft);
 }
 
 /* ---- 侧栏底部的额度 ---- */

package/web/css/skills.css

@@ -0,0 +1,385 @@
+/* ---------- 技能（设置里的一页，卡片沿用定时任务页的 .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%;
+  }
+}
+
+/* 设置里的技能页 */
+.skills-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.skills-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.skills-head .skill-note {
+  flex: 1;
+}

package/web/css/topbar.css

@@ -155,6 +155,18 @@
   gap: 6px;
 }
 
+.top-title .conv-mode-icon {
+  display: inline-grid;
+  flex-shrink: 0;
+  margin-left: 4px;
+  color: var(--fg-soft);
+}
+
+.top-title .conv-mode-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
 .top-title .conv-name {
   font-size: 15px;
   font-weight: 500;
@@ -203,3 +215,122 @@
 .in-desktop .side-top :is(button, a, input, select, textarea, label) {
   -webkit-app-region: no-drag;
 }
+
+/* ---- 右上角「更多」：菜单项 + 当前会话的 token 用量 ---- */
+.top-menu {
+  min-width: 248px;
+}
+
+.top-menu .pop-item svg {
+  width: 16px;
+  height: 16px;
+  color: var(--fg-soft);
+}
+
+/* 分布的四种颜色：固定顺序（输入、缓存写入、缓存读取、输出），深色模式用为深色底挑的那一档 */
+.usage {
+  --usage-input: #2a78d6;
+  --usage-cwrite: #eb6834;
+  --usage-cread: #1baf7a;
+  --usage-output: #eda100;
+  padding: 6px 12px 8px;
+  font-size: 12px;
+  color: var(--fg-soft);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-color-scheme: dark) {
+  .usage {
+    --usage-input: #3987e5;
+    --usage-cwrite: #d95926;
+    --usage-cread: #199e70;
+    --usage-output: #c98500;
+  }
+}
+
+.usage .u-input {
+  background: var(--usage-input);
+}
+
+.usage .u-cwrite {
+  background: var(--usage-cwrite);
+}
+
+.usage .u-cread {
+  background: var(--usage-cread);
+}
+
+.usage .u-output {
+  background: var(--usage-output);
+}
+
+.usage-empty {
+  color: var(--fg-faint);
+}
+
+.usage-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 6px;
+}
+
+.usage-head b {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+/* 段与段之间留 2px 底色的缝，两端圆角；很小的一段也至少看得见 */
+.usage-bar {
+  display: flex;
+  gap: 2px;
+  height: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.usage-bar i {
+  flex: 1 1 0;
+  min-width: 3px;
+}
+
+.usage-row {
+  display: grid;
+  grid-template-columns: 8px 1fr auto 3.2em;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+
+.usage-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+.usage-name {
+  color: var(--fg);
+  min-width: 0;
+}
+
+.usage-name small {
+  margin-left: 6px;
+  color: var(--fg-faint);
+  font-size: 11px;
+}
+
+.usage-num {
+  color: var(--fg);
+}
+
+.usage-pct {
+  text-align: right;
+  color: var(--fg-faint);
+}
+
+.usage-foot {
+  margin-top: 6px;
+  color: var(--fg-faint);
+}

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,10 +34,12 @@ 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>',
   fork: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="7" r="2"/><path d="M6 7v10"/><path d="M18 9c0 5-6 4-11.2 8.6"/></svg>',
+  chat: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-12.3 7.5L3 20.5l1.6-5A8.4 8.4 0 1 1 21 11.5Z"/></svg>',
   copy: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
   x: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>',
   plus: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>',
@@ -68,7 +70,7 @@ ICON.codex = ICON.logo;
 /**
  * 星星加载动画（回复末尾、打开会话时用）。开屏那个带台面的完整 logo 动画直接写在 index.html 里。
  * 每个实例的渐变 id 唯一，避免页面里有隐藏的同 id 渐变时画不出来。
- * 回复流式输出时整条消息会反复重建，动画按全局时钟设负的起始延迟，重建后接着播、不会一抖一抖地重来。
+ * 动画按全局时钟设负的起始延迟：回复被授权卡片分成几段时，新一段的动画接着播、不会一抖一抖地重来。
  */
 let loaderSeq = 0;
 

package/web/lib/markdown.js

@@ -8,29 +8,99 @@ import { h, toast } from "./dom.js";
 marked.setOptions({ gfm: true, breaks: true });
 
 export function renderMarkdown(text) {
-  const html = DOMPurify.sanitize(marked.parse(text ?? ""), { ADD_ATTR: ["target"] });
-  const div = h("div", { class: "md", html });
-  for (const a of div.querySelectorAll("a")) {
+  const div = h("div", { class: "md" });
+  patchMarkdown(div, text);
+  return div;
+}
+
+/**
+ * 把 div 里的 markdown 更新成 text，只重画变了的块（段落、列表、代码块…）。
+ * 流式输出时前面的块不再变，每帧只需重画最后一两块；选中的文字、代码块的横向滚动也不会被冲掉。
+ * live = 还在输出：最后一块随时会变，先不高亮，等它定下来再高亮。
+ * 按块拼起来和整段解析的结果一样（marked 的 parser 本来就是逐块拼接的）。
+ */
+export function patchMarkdown(div, text, { live = false } = {}) {
+  const tokens = marked.lexer(text ?? "");
+  const links = JSON.stringify(tokens.links ?? {});
+  // 引用式链接的定义可能在后面才出现（流式输出时地址还会一点点变长），会影响前面的块：定义变了就整个重画
+  if (div._links !== links) {
+    div._links = links;
+    div._blocks = [];
+    div.replaceChildren();
+  }
+  // HTML 块（<details>、<div align> 之类）的开闭标签常常不在同一块里，分开解析会被浏览器提前补上结束标签：
+  // 从第一个 HTML 块起到结尾合成一块
+  const cut = tokens.findIndex((t) => t.type === "html");
+  const chunks = cut < 0 ? tokens.map((t) => [t]) : [...tokens.slice(0, cut).map((t) => [t]), tokens.slice(cut)];
+  const raws = chunks.map((c) => c.map((t) => t.raw).join(""));
+  const blocks = (div._blocks ??= []);
+  const last = chunks.length - 1;
+  let i = 0;
+  // 还在输出时画的块没高亮，只有它仍是正在输出的最后一块才能接着用
+  while (i < blocks.length && i <= last && blocks[i].raw === raws[i] && (blocks[i].final || (live && i === last))) i++;
+  for (const b of blocks.splice(i)) {
+    for (const n of b.nodes) {
+      if (n.nodeType === Node.ELEMENT_NODE) for (const code of n.querySelectorAll("pre code")) lazyHighlight.unobserve(code);
+      n.remove();
+    }
+  }
+  for (; i <= last; i++) {
+    const final = !(live && i === last);
+    const chunk = chunks[i];
+    chunk.links = tokens.links;
+    // 在本页的元素里解析（DOMPurify 直接返回的节点属于另一个 document，搬过来后 IntersectionObserver 就不灵了）
+    const box = document.createElement("div");
+    box.innerHTML = DOMPurify.sanitize(marked.parser(chunk), { ADD_ATTR: ["target"] });
+    decorate(box, final);
+    const nodes = [...box.childNodes];
+    div.append(...nodes);
+    blocks.push({ raw: raws[i], final, nodes });
+  }
+}
+
+/** 链接新窗口打开；代码块加上语言 + 复制按钮的头，滚到附近了再高亮 */
+function decorate(root, highlight) {
+  for (const a of root.querySelectorAll("a")) {
     a.target = "_blank";
     a.rel = "noopener noreferrer";
   }
-  for (const pre of div.querySelectorAll("pre")) {
+  for (const pre of root.querySelectorAll("pre")) {
     const code = pre.querySelector("code");
     if (!code) continue;
     const lang = /language-([\w+-]+)/.exec(code.className)?.[1] ?? "";
-    try {
-      if (lang && hljs.getLanguage(lang)) hljs.highlightElement(code);
-      else if (code.textContent.length < 20000) {
-        code.innerHTML = hljs.highlightAuto(code.textContent).value;
-        code.classList.add("hljs");
-      }
-    } catch {
-      // 高亮失败就原样显示
-    }
     const copy = h("button", { class: "copy-btn", onclick: () => copyText(code.textContent, copy) }, "复制");
     pre.prepend(h("div", { class: "code-head" }, h("span", {}, lang || "code"), copy));
+    if (highlight) lazyHighlight.observe(code);
+  }
+}
+
+/**
+ * 高亮（尤其是自动识别语言）很慢：长会话一打开几十个代码块会卡住。
+ * 只在代码块快滚进视口时才高亮；高亮不改变文字和行高，不会让内容跳。
+ */
+const lazyHighlight = new IntersectionObserver(
+  (entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      lazyHighlight.unobserve(e.target);
+      highlight(e.target);
+    }
+  },
+  // 代码块在消息区这种滚动容器里：rootMargin 只放大视口，scrollMargin 才放大滚动容器的裁剪范围（不支持的浏览器忽略它）
+  { rootMargin: "800px 0px", scrollMargin: "800px 0px" },
+);
+
+function highlight(code) {
+  const lang = /language-([\w+-]+)/.exec(code.className)?.[1] ?? "";
+  try {
+    if (lang && hljs.getLanguage(lang)) hljs.highlightElement(code);
+    else if (code.textContent.length < 20000) {
+      code.innerHTML = hljs.highlightAuto(code.textContent).value;
+      code.classList.add("hljs");
+    }
+  } catch {
+    // 高亮失败就原样显示
   }
-  return div;
 }
 
 export async function copyText(text, btn) {