agent-loft 0.2.29 → 0.2.31

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/css/topbar.css

@@ -0,0 +1,205 @@
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  position: relative;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
+  min-height: 52px;
+  /*
+   * iOS 26+ 的主屏 PWA 会在页面顶端叠一层系统的模糊渐变（Liquid Glass 边缘效果），CSS 关不掉。
+   * WebKit 只在顶端有「fixed / sticky、铺满宽度、高于 10px、纯色不透明」的元素时跳过它，
+   * 并改用这个颜色延伸到状态栏。所以顶栏要 sticky + 不透明底色，不能是普通的流式元素。
+   */
+  background: var(--bg);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+/* 保险：主屏 PWA 里再在最顶端放一条 fixed 的纯色细条（同样是为了让 WebKit 跳过边缘模糊）。
+   层级低于顶栏和侧栏，和顶栏同色，看不出来 */
+.edge-strip {
+  display: none;
+}
+
+@media (display-mode: standalone) and (max-width: 768px) {
+  .edge-strip {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: max(12px, env(safe-area-inset-top));
+    background: var(--bg);
+    pointer-events: none;
+    z-index: 4;
+  }
+}
+
+/* 顶栏下沿：渐变 + 模糊，聊天内容滚上去时柔和地消失在顶栏后面 */
+/*
+ * 顶栏浮在聊天内容上面：内容一直滚到窗口顶端，经过顶栏时先变模糊、再淡出到底色，
+ * 没有分界线（参考 Claude 桌面端）。顶栏自身比按钮行高出一截，多出来的部分就是过渡带。
+ * iOS 主屏 PWA 例外，见下面的媒体查询。
+ */
+.topbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  padding-bottom: 20px;
+  background: linear-gradient(
+    to bottom,
+    var(--bg) 0%,
+    var(--bg) calc(100% - 22px),
+    color-mix(in srgb, var(--bg) 75%, transparent) calc(100% - 13px),
+    color-mix(in srgb, var(--bg) 30%, transparent) calc(100% - 5px),
+    color-mix(in srgb, var(--bg) 0%, transparent) 100%
+  );
+  pointer-events: none;
+}
+
+.topbar > * {
+  pointer-events: auto;
+}
+
+/* 模糊层：上实下虚，越往下越清楚，和渐变叠在一起 */
+.topbar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
+  pointer-events: none;
+}
+
+/* 内容让出顶栏按钮行的高度（.main 前缀是为了压过手机端的 padding 简写） */
+.main .messages-inner {
+  padding-top: calc(72px + env(safe-area-inset-top));
+}
+
+.messages {
+  scroll-padding-top: calc(72px + env(safe-area-inset-top));
+}
+
+/* iOS 主屏 PWA：顶端必须是不透明的 sticky 元素才能避开系统的边缘模糊，回到普通顶栏 + 下方淡出 */
+@media (display-mode: standalone) and (max-width: 768px) {
+  .topbar {
+    position: sticky;
+    padding-bottom: 8px;
+    background: var(--bg);
+  }
+
+  .topbar::before {
+    display: none;
+  }
+
+  .topbar::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 100%;
+    height: 24px;
+    pointer-events: none;
+    background: linear-gradient(
+      to bottom,
+      var(--bg),
+      color-mix(in srgb, var(--bg) 60%, transparent) 40%,
+      color-mix(in srgb, var(--bg) 0%, transparent)
+    );
+  }
+
+  .main .messages-inner {
+    padding-top: 16px;
+  }
+}
+
+.topbar .menu-btn {
+  display: none;
+}
+
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  flex-shrink: 0;
+  color: var(--fg-soft);
+}
+
+.icon-btn:hover {
+  background: var(--bg-hover);
+}
+
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+.top-title {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.top-title .conv-name {
+  font-size: 15px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  max-width: 100%;
+  white-space: nowrap;
+}
+
+.pill:hover {
+  background: var(--bg-hover);
+}
+
+
+.pill .sub {
+  color: var(--fg-faint);
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pill svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* 桌面端（Agent Loft for macOS）里：顶栏和侧栏顶部按住能拖动窗口，里面的按钮照常能点 */
+.in-desktop .topbar,
+.in-desktop .side-top {
+  -webkit-app-region: drag;
+}
+.in-desktop .topbar :is(button, a, input, select, textarea, label, .conv-name),
+.in-desktop .side-top :is(button, a, input, select, textarea, label) {
+  -webkit-app-region: no-drag;
+}

package/web/index.html

@@ -14,7 +14,18 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="stylesheet" href="/vendor/hljs-light.css" media="(prefers-color-scheme: light)" />
     <link rel="stylesheet" href="/vendor/hljs-dark.css" media="(prefers-color-scheme: dark)" />
-    <link rel="stylesheet" href="/style.css" />
+    <!-- 顺序就是层叠顺序，不要随意调换 -->
+    <link rel="stylesheet" href="/css/base.css" />
+    <link rel="stylesheet" href="/css/sidebar.css" />
+    <link rel="stylesheet" href="/css/topbar.css" />
+    <link rel="stylesheet" href="/css/messages.css" />
+    <link rel="stylesheet" href="/css/loader.css" />
+    <link rel="stylesheet" href="/css/composer.css" />
+    <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/mobile.css" />
   </head>
   <body>
     <div id="app"><div class="boot"><span class="loft-loader xl" role="img" aria-label="加载中"><svg viewBox="96 56 320 388" aria-hidden="true"><defs><linearGradient id="boot-g" gradientUnits="userSpaceOnUse" x1="104" y1="104" x2="408" y2="408"><stop offset="0" stop-color="#3b82f6"/><stop offset="1" stop-color="#06b6d4"/></linearGradient></defs><path class="ll-shadow" d="M256 296L404 364L256 432L108 364Z" fill="url(#boot-g)"/><path class="ll-plate" d="M256 252L404 320L256 388L108 320Z" fill="url(#boot-g)"/><path class="ll-star ll-l" d="M152 186C158.46 217.54 158.46 217.54 190 224C158.46 230.46 158.46 230.46 152 262C145.54 230.46 145.54 230.46 114 224C145.54 217.54 145.54 217.54 152 186Z" fill="url(#boot-g)"/><path class="ll-star ll-c" d="M256 82C268.92 145.08 268.92 145.08 332 158C268.92 170.92 268.92 170.92 256 234C243.08 170.92 243.08 170.92 180 158C243.08 145.08 243.08 145.08 256 82Z" fill="url(#boot-g)"/><path class="ll-star ll-r" d="M360 186C366.46 217.54 366.46 217.54 398 224C366.46 230.46 366.46 230.46 360 262C353.54 230.46 353.54 230.46 322 224C353.54 217.54 353.54 217.54 360 186Z" fill="url(#boot-g)"/></svg></span></div></div>

package/web/lib/api.js

@@ -0,0 +1,26 @@
+import { showAuth } from "../views/auth.js";
+
+export async function api(path, opts = {}) {
+  const res = await fetch(path, {
+    method: opts.method ?? "GET",
+    credentials: "same-origin",
+    headers: opts.body !== undefined && !(opts.body instanceof Blob) ? { "Content-Type": "application/json" } : opts.headers,
+    body: opts.body === undefined ? undefined : opts.body instanceof Blob ? opts.body : JSON.stringify(opts.body),
+  });
+  let data = null;
+  try {
+    data = await res.json();
+  } catch {
+    // 没有 body
+  }
+  if (res.status === 401 && !path.startsWith("/api/me") && !path.startsWith("/api/login")) {
+    showAuth();
+    throw new Error("请先登录");
+  }
+  if (!res.ok) {
+    const err = new Error(data?.error ?? `请求失败（${res.status}）`);
+    err.status = res.status;
+    throw err;
+  }
+  return data;
+}