agent-loft 0.2.30 → 0.2.32

package/web/css/tasks.css

@@ -0,0 +1,455 @@
+/* ---------- 定时任务 ---------- */
+
+/* 侧栏「最近」上面的入口：和「新聊天」同一个样子 */
+.side-nav {
+  display: flex;
+  justify-content: flex-start;
+  width: calc(100% - 20px);
+  margin: 2px 10px 6px;
+  padding: 7px 10px;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.side-nav svg {
+  width: 16px;
+  height: 16px;
+}
+
+.side-nav:hover,
+.side-nav.active {
+  background: var(--bg-hover);
+}
+
+.conv-item .task-mark {
+  color: var(--fg-soft);
+}
+
+/* 任务页不要输入框，也不要「回到底部」 */
+.main.tasks-view .composer-wrap,
+.main.tasks-view .to-bottom {
+  display: none;
+}
+
+.tasks-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 8px;
+}
+
+.tasks-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.tasks-head .grow {
+  flex: 1;
+  min-width: 0;
+}
+
+.tasks-head h2 {
+  margin: 0 0 6px;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.tasks-head p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--fg-soft);
+}
+
+.tasks-head .btn {
+  flex-shrink: 0;
+}
+
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.task-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 14px 12px 16px;
+  background: var(--bg);
+}
+
+.task-card.off .task-title,
+.task-card.off .task-meta,
+.task-card.off .task-prompt {
+  opacity: 0.6;
+}
+
+.task-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.task-title {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  text-align: left;
+  font-size: 16px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 0;
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--fg-soft);
+}
+
+/* 分隔点挂在前一项的末尾：换行时点留在行尾，不会出现在下一行开头 */
+.task-meta span:not(:last-child)::after {
+  content: "·";
+  margin: 0 8px;
+  color: var(--fg-faint);
+}
+
+.task-prompt {
+  margin-top: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--fg-soft);
+  white-space: pre-wrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.task-run {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  margin-top: 10px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: var(--bg-soft);
+  font-size: 13px;
+  text-align: left;
+}
+
+button.task-run:hover {
+  background: var(--bg-hover);
+}
+
+.task-run.compact {
+  margin-top: 2px;
+  padding: 6px 10px;
+  background: transparent;
+}
+
+.task-run.muted {
+  color: var(--fg-faint);
+}
+
+.task-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  border: 1px solid currentColor;
+}
+
+.task-status .conv-spin {
+  width: 10px;
+  height: 10px;
+}
+
+.task-status.ok {
+  color: var(--ok);
+}
+
+.task-status.quiet {
+  color: var(--fg-faint);
+}
+
+.task-status.bad {
+  color: var(--danger);
+}
+
+.task-status.run {
+  color: var(--accent);
+}
+
+.task-run-at {
+  flex-shrink: 0;
+  color: var(--fg-faint);
+}
+
+.task-run-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-soft);
+}
+
+.task-history summary {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--fg-faint);
+  cursor: pointer;
+}
+
+.task-history summary:hover {
+  color: var(--fg-soft);
+}
+
+/* 开关 */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch .slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 999px;
+  background: var(--border);
+  transition: background 0.15s;
+}
+
+.switch .slider::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s;
+}
+
+.switch input:checked + .slider {
+  background: var(--accent);
+}
+
+.switch input:checked + .slider::before {
+  transform: translateX(16px);
+}
+
+.switch input:focus-visible + .slider {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* 空状态 + 例子 */
+.tasks-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 32px 0 8px;
+  text-align: center;
+}
+
+.tasks-empty-icon svg {
+  width: 40px;
+  height: 40px;
+  color: var(--fg-faint);
+}
+
+.tasks-empty .t {
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.tasks-empty > .s {
+  font-size: 13px;
+  color: var(--fg-soft);
+  margin-bottom: 10px;
+}
+
+.task-examples {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+  width: 100%;
+}
+
+.task-example {
+  text-align: left;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+
+.task-example:hover {
+  background: var(--bg-hover);
+}
+
+.task-example .t {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.task-example .s {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--fg-soft);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.tasks-tip {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--fg-faint);
+  text-align: center;
+}
+
+/* 表单 */
+.task-form [hidden] {
+  display: none !important;
+}
+
+.task-form textarea {
+  resize: vertical;
+  font: inherit;
+  line-height: 1.6;
+}
+
+.task-dedicated {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 频率：上面选种类，下面填具体时间 */
+.task-freq-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-freq {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.task-freq:empty {
+  display: none;
+}
+
+.field .task-freq input,
+.field .task-freq select {
+  width: auto;
+  color-scheme: light dark;
+}
+
+.field .task-freq input:not(.narrow):not([type="time"]) {
+  flex: 1;
+  min-width: 180px;
+}
+
+.field .task-freq .narrow {
+  width: 84px;
+}
+
+.freq-word {
+  font-size: 14px;
+  color: var(--fg-soft);
+}
+
+.day-chips {
+  display: flex;
+  gap: 4px;
+}
+
+.day-chip {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.day-chip.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+.task-static {
+  font-size: 14px;
+  color: var(--fg-soft);
+  padding: 2px 0;
+}
+
+.task-cwd {
+  justify-content: flex-start;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 对话里：定时任务这次判断不用提醒，折叠成一行 */
+.silent-run {
+  font-size: 13px;
+  color: var(--fg-faint);
+}
+
+.silent-run summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+.silent-run summary::-webkit-details-marker {
+  display: none;
+}
+
+.silent-run summary:hover {
+  color: var(--fg-soft);
+}
+
+.silent-run[open] summary {
+  margin-bottom: 8px;
+}
+
+@media (max-width: 640px) {
+  .tasks-head h2 {
+    font-size: 21px;
+  }
+}

package/web/index.html

@@ -24,6 +24,8 @@
     <link rel="stylesheet" href="/css/overlay.css" />
     <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

@@ -197,6 +197,14 @@ function onWsMessage(msg) {
     case "ix":
       upsertInteraction(msg.interaction);
       return;
+    case "tasks":
+      // 自己的定时任务变了：定时任务页开着的话会去重新拉（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,6 +21,8 @@ export const S = {
   loadToken: 0,
   /** 登录的用户 { id, name, role } */
   user: null,
+  /** 主区域在显示什么：null 是对话（或新对话），"tasks" 是定时任务页，"skills" 是技能页 */
+  view: null,
 };
 
 export const isAdmin = () => S.user?.role === "admin";

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/conv-actions.js

@@ -198,12 +198,16 @@ export async function openSessions(all) {
 }
 
 /** 目录选择器：一层层点进去选，也能手动输入。只能在 workspaceRoot 之内 */
-export async function changeCwd() {
+/**
+ * 选工作目录。pick 给了就是别处借用（定时任务的表单）：从 pick.current 开始，选好交给 pick.onPick，
+ * 不动当前对话。
+ */
+export async function changeCwd(pick) {
   // 还没发消息的新对话：只记下选择，创建会话时带过去
-  const draft = !S.current;
-  const conv = draft ? null : S.convs.get(S.current);
-  const current = draft ? (S.draftCwd ?? S.workspaceRoot ?? "") : (conv?.cwd ?? "");
-  const goLabel = draft ? "使用此目录" : "切换到此目录";
+  const draft = !pick && !S.current;
+  const conv = draft || pick ? null : S.convs.get(S.current);
+  const current = pick ? pick.current : draft ? (S.draftCwd ?? S.workspaceRoot ?? "") : (conv?.cwd ?? "");
+  const goLabel = pick || draft ? "使用此目录" : "切换到此目录";
   let showHidden = localStorage.getItem("aim.cwdHidden") === "1";
   let listing = null;
   let seq = 0;
@@ -231,9 +235,9 @@ export async function changeCwd() {
     list,
   );
   const go = h("button", { class: "btn primary", disabled: true }, goLabel);
-  const note = h("span", { class: "muted grow" }, draft ? "发送第一条消息时在这个目录开会话" : "切换后开新会话");
+  const note = h("span", { class: "muted grow" }, pick ? "" : draft ? "发送第一条消息时在这个目录开会话" : "切换后开新会话");
   const close = modal({
-    title: draft ? "选择工作目录" : "切换工作目录",
+    title: pick || draft ? "选择工作目录" : "切换工作目录",
     body,
     foot: h("div", { class: "modal-foot", style: { alignItems: "center" } }, note, go),
   });
@@ -241,6 +245,10 @@ export async function changeCwd() {
   go.onclick = async () => {
     if (!listing) return;
     close();
+    if (pick) {
+      pick.onPick(listing.path);
+      return;
+    }
     if (draft) {
       S.draftCwd = listing.path === listing.root ? null : listing.path;
       if (!S.current) renderEmpty();

package/web/views/layout.js

@@ -47,6 +47,22 @@ function openSettings() {
   );
 }
 
+/** 技能页：第一次打开时才加载 */
+export function openSkillsView() {
+  import("./skills.js").then(
+    (m) => m.openSkills(),
+    (err) => toast(`技能页加载失败，刷新页面再试：${err.message}`),
+  );
+}
+
+/** 定时任务页：第一次打开时才加载 */
+export function openTasksView() {
+  import("./tasks.js").then(
+    (m) => m.openTasks(),
+    (err) => toast(`定时任务页加载失败，刷新页面再试：${err.message}`),
+  );
+}
+
 export async function boot() {
   const me = await api("/api/me");
   if (!me.authed) return showAuth();
@@ -72,7 +88,9 @@ export async function boot() {
   const fromHash = decodeURIComponent(location.hash.slice(1));
   // 地址里带了会话就打开它；否则打开「最近」里最近活跃的那个对话，一个都没有才进新对话页
   const latest = [...S.convs.values()].filter((c) => !c.hidden).sort((a, b) => b.activeAt - a.activeAt)[0];
-  if (fromHash && S.convs.has(fromHash)) await openConversation(fromHash);
+  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();
   // 点了桌面端的系统通知 / 菜单栏里的待处理项：跳到对应会话
@@ -159,6 +177,9 @@ function renderLayout() {
       { class: "side-top" },
       h("button", { class: "btn new-chat", onclick: () => (newDraft(), closeSide()) }, icon("compose"), "新聊天"),
     ),
+    // 「最近」上面的入口，像 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",