agent-loft 0.2.9 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-loft",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "type": "module",
   "description": "多个 agent 的工作台：把本机 Claude Code / Codex 放到一处统一管理，用飞书和 Web 页面随时驱动——会话、审批、模型切换都共用",
   "keywords": [

package/src/agents/claude/driver.ts

@@ -10,6 +10,7 @@ import {
 } from "@anthropic-ai/claude-agent-sdk";
 import os from "node:os";
 import type { AgentCommand } from "../../core/command-catalog.js";
+import { splitAttachmentNote } from "../../core/uploads.js";
 import { config } from "../../core/config.js";
 import type {
   AgentDriver,
@@ -78,15 +79,6 @@ function blocksOf(message: unknown): Block[] {
   return Array.isArray(content) ? (content as Block[]) : [];
 }
 
-/** 用户消息里我们自己拼进去的附件说明，历史里只留一行简述 */
-function cleanUserText(text: string): string {
-  const cut = [text.indexOf("[用户通过飞书发来了以下附件"), text.indexOf("[用户发来了以下附件")]
-    .filter((i) => i >= 0)
-    .sort((a, b) => a - b)[0];
-  if (cut === undefined) return text;
-  const files = (text.slice(cut).match(/^- /gm) ?? []).length;
-  return `${text.slice(0, cut).trim()}${files ? `\n\n📎 ${files} 个附件` : ""}`.trim();
-}
 
 export class ClaudeDriver implements AgentDriver {
   readonly id = "claude";
@@ -146,10 +138,17 @@ export class ClaudeDriver implements AgentDriver {
       if (msg.type === "user") {
         const texts = blocks.filter((b) => b.type === "text" && b.text).map((b) => b.text!);
         if (texts.length === 0) continue; // 纯 tool_result
-        const text = cleanUserText(texts.join("\n"));
-        if (!text || text.startsWith("<command-") || text.startsWith("<local-command")) continue;
+        // 我们自己拼进去的附件清单：从正文里拆出来，单独作为附件给前端展示
+        const { text, attachments } = splitAttachmentNote(texts.join("\n"));
+        if (!text && attachments.length === 0) continue;
+        if (text.startsWith("<command-") || text.startsWith("<local-command")) continue;
         flush();
-        out.push({ role: "user", text, ...(Number.isFinite(ts) ? { ts } : {}) });
+        out.push({
+          role: "user",
+          text,
+          ...(attachments.length ? { attachments } : {}),
+          ...(Number.isFinite(ts) ? { ts } : {}),
+        });
       } else if (msg.type === "assistant") {
         assistant ??= { role: "assistant", text: "", steps: [] };
         // 这一轮最后一条助手消息：分叉到这里为止，时间也取它的

package/src/agents/codex/driver.ts

@@ -6,6 +6,7 @@ import { describeRateLimits, readRateLimits, toQuota } from "./account.js";
 import { diagnose } from "./errors.js";
 import { CodexSession, summarize } from "./session.js";
 import { config, onConfigChange } from "../../core/config.js";
+import { splitAttachmentNote } from "../../core/uploads.js";
 import type {
   AgentDriver,
   AgentEvents,
@@ -114,12 +115,19 @@ export class CodexDriver implements AgentDriver {
       const ts = turn.startedAt ? turn.startedAt * 1000 : undefined;
       for (const item of turn.items ?? []) {
         if (item.type === "userMessage") {
-          const text = (item.content ?? [])
-            .map((c) => (c.type === "text" ? (c.text ?? "") : c.type === "localImage" ? "📎 图片" : ""))
+          const raw = (item.content ?? [])
+            .map((c) => (c.type === "text" ? (c.text ?? "") : ""))
             .filter(Boolean)
             .join("\n");
-          const cut = text.indexOf("[用户");
-          out.push({ role: "user", text: cut > 0 ? text.slice(0, cut).trim() || text : text, ...(ts ? { ts } : {}) });
+          // 附件清单拆出来单独展示；没有清单的图片（别处发的）只能留个占位
+          const { text, attachments } = splitAttachmentNote(raw);
+          const bareImages = attachments.length ? 0 : (item.content ?? []).filter((c) => c.type === "localImage").length;
+          out.push({
+            role: "user",
+            text: bareImages ? [text, ...Array(bareImages).fill("📎 图片")].filter(Boolean).join("\n") : text,
+            ...(attachments.length ? { attachments } : {}),
+            ...(ts ? { ts } : {}),
+          });
           continue;
         }
         assistant ??= { role: "assistant", text: "", steps: [] };

package/src/channels/web/api.ts

@@ -1,13 +1,14 @@
 // Web 的 REST 接口。实时的东西（事件流、发消息、点授权）走 WebSocket，见 server.ts。
 import crypto from "node:crypto";
 import fs from "node:fs";
+import path from "node:path";
 import type { IncomingMessage, ServerResponse } from "node:http";
 import { AGENT_IDS, config, listWorkspaceDirs, resolveWorkspacePath, saveConfig, type AppConfig } from "../../core/config.js";
 import { hub } from "../../core/hub.js";
 import { interactions } from "../../core/interactions.js";
 import { approve, listApproved, listPending, revoke } from "../../core/pairing.js";
 import { getConversation, updateConversation } from "../../core/store.js";
-import { saveBuffer } from "../../core/uploads.js";
+import { resolveUploadFile, saveBuffer, sniff } from "../../core/uploads.js";
 import type { SavedAttachment } from "../../core/types.js";
 import { listAllowlist, setAllowlist } from "../../agents/claude/permissions.js";
 import { feishuBots } from "../feishu/index.js";
@@ -26,7 +27,7 @@ import {
   validateSession,
   verifyPassword,
 } from "./auth.js";
-import { clientIp, cookies, HttpError, isHttps, readBody, readJsonBody, sendJson } from "./http.js";
+import { clientIp, cookies, HttpError, isHttps, readBody, readJsonBody, SECURITY_HEADERS, sendJson } from "./http.js";
 import { addSubscription, listSubscriptions, pushToAll, removeSubscription, vapidPublicKey } from "./push.js";
 
 export const COOKIE = "aim_session";
@@ -56,6 +57,36 @@ setInterval(() => {
   for (const [id, entry] of uploads) if (now - entry.at > 60 * 60 * 1000) uploads.delete(id);
 }, 10 * 60 * 1000).unref();
 
+/**
+ * 附件文件。只有按文件头确认是常见图片的才 inline 显示（缩略图 / 大图要用），其余一律当下载，
+ * 免得用户传上来的 HTML / SVG 在本站域名下被浏览器当网页执行
+ */
+const INLINE_IMAGE = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+
+function serveUpload(res: ServerResponse, requested: string, download: boolean): void {
+  const file = requested ? resolveUploadFile(requested) : undefined;
+  if (!file) throw new HttpError(404, "文件不存在（可能会话重置时已清理）");
+  const head = Buffer.alloc(12);
+  const fd = fs.openSync(file, "r");
+  try {
+    fs.readSync(fd, head, 0, 12, 0);
+  } finally {
+    fs.closeSync(fd);
+  }
+  const type = sniff(head)?.mediaType;
+  const inline = !download && !!type && INLINE_IMAGE.has(type);
+  const name = path.basename(file);
+  res.writeHead(200, {
+    ...SECURITY_HEADERS,
+    "Content-Type": inline ? type! : "application/octet-stream",
+    "Content-Length": fs.statSync(file).size,
+    "Content-Disposition": `${inline ? "inline" : "attachment"}; filename*=UTF-8''${encodeURIComponent(name)}`,
+    "Content-Security-Policy": "default-src 'none'; img-src 'self'; sandbox",
+    "Cache-Control": "private, max-age=3600",
+  });
+  fs.createReadStream(file).pipe(res);
+}
+
 // ---------- 飞书扫码创建应用 ----------
 
 type Registration = {
@@ -256,6 +287,12 @@ export async function handleApi(req: IncomingMessage, res: ServerResponse, url:
 
   if (!authed(req)) throw new HttpError(401, "请先登录");
 
+  // ----- 附件预览 / 下载：只给上传目录里的文件 -----
+  if (p === "/api/file" && method === "GET") {
+    serveUpload(res, url.searchParams.get("path") ?? "", url.searchParams.get("download") === "1");
+    return;
+  }
+
   // ----- 总览 -----
   if (p === "/api/bootstrap" && method === "GET") {
     sendJson(res, 200, {

package/src/core/footers.ts

@@ -17,6 +17,18 @@ const MAX_PER_SESSION = 1000;
 /** 存下来比对用的正文结尾长度 */
 const TAIL = 80;
 
+/** 用时按大小换单位：12.3秒 / 3分12秒 / 1小时5分 */
+export function formatDuration(ms: number): string {
+  const sec = ms / 1000;
+  if (sec < 60) return `${sec.toFixed(1)}秒`;
+  const total = Math.round(sec);
+  const h = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (h > 0) return `${h}小时${m ? `${m}分` : ""}`;
+  return `${m}分${s ? `${s}秒` : ""}`;
+}
+
 let store: Store | null = null;
 let timer: NodeJS.Timeout | null = null;
 

package/src/core/hub.ts

@@ -10,7 +10,7 @@
 import crypto from "node:crypto";
 import { EventEmitter } from "node:events";
 import { config, onConfigChange, resolveWorkspacePath } from "./config.js";
-import { attachFooters, copyFooters, recordFooter } from "./footers.js";
+import { attachFooters, copyFooters, formatDuration, recordFooter } from "./footers.js";
 import { interactions, SETTLEMENT_LABEL } from "./interactions.js";
 import {
   agentBinding,
@@ -23,9 +23,10 @@ import {
   updateConversation,
   type Conversation,
 } from "./store.js";
-import { clearUploads, ensureUploadsDir, KIND_LABEL } from "./uploads.js";
+import { attachmentInfo, clearUploads, ensureUploadsDir, KIND_LABEL } from "./uploads.js";
 import type {
   AgentDriver,
+  AttachmentInfo,
   AgentSession,
   ContextUsage,
   ApprovalDecision,
@@ -52,7 +53,7 @@ export type Origin = {
 };
 
 export type ConvEvent =
-  | { type: "user"; text: string; attachments: string[]; origin: Origin }
+  | { type: "user"; text: string; attachments: string[]; files?: AttachmentInfo[]; origin: Origin }
   | { type: "turn_start" }
   | { type: "step"; kind: StepKind; text: string }
   | { type: "delta"; text: string }
@@ -481,7 +482,7 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
         onText: (text) => alive() && this.emitEvent(key, { type: "text", text }),
         onResult: (result) => {
           if (!alive()) return;
-          const parts = [`用时 ${(result.durationMs / 1000).toFixed(1)}s`];
+          const parts = [`用时 ${formatDuration(result.durationMs)}`];
           if (result.costUsd !== undefined) parts.push(`约 $${result.costUsd.toFixed(4)}`);
           if (result.tokens !== undefined) parts.push(`${result.tokens} tokens`);
           const footer = parts.join("　");
@@ -677,6 +678,7 @@ class Hub extends EventEmitter<{ event: [EventEnvelope] }> {
       type: "user" as const,
       text: input.text,
       attachments: input.attachments.map((a) => `${KIND_LABEL[a.kind]} ${a.name}`),
+      files: input.attachments.map(attachmentInfo),
       origin,
     };
     const by = `${origin.name ?? "用户"}以消息作答`;

package/src/core/types.ts

@@ -18,6 +18,9 @@ export type SavedAttachment = {
 
 export type UserInput = { text: string; attachments: SavedAttachment[] };
 
+/** 给前端展示用的附件：能预览 / 下载（path 只在上传目录里有效，见 uploads.resolveUploadFile） */
+export type AttachmentInfo = { kind: AttachmentKind; name: string; path: string; size?: number };
+
 // ---------- 交互（审批 / 提问） ----------
 
 /**
@@ -145,6 +148,8 @@ export type HistoryMessage = {
   anchor?: string;
   /** 助手消息：这一轮的用时 / 费用 / tokens（agent-loft 自己记的，agent 记录里没有） */
   footer?: string;
+  /** 用户消息：带的附件（从消息里的附件清单解析出来） */
+  attachments?: AttachmentInfo[];
 };
 
 export type SessionOptions = {

package/src/core/uploads.ts

@@ -5,7 +5,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { dataDir } from "../home.js";
-import type { AttachmentKind, SavedAttachment } from "./types.js";
+import type { AttachmentInfo, AttachmentKind, SavedAttachment } from "./types.js";
 
 const uploadsRoot = path.join(dataDir, "uploads");
 
@@ -181,6 +181,55 @@ export function formatSize(bytes: number): string {
   return `${(bytes / 1024 / 1024).toFixed(1)}MB`;
 }
 
+/** 附件清单的开头（新旧两种写法），历史里靠它把清单从用户正文里切出去 */
+const NOTE_HEADS = ["[用户发来了以下附件", "[用户通过飞书发来了以下附件"];
+const LABEL_KIND = Object.fromEntries(Object.entries(KIND_LABEL).map(([k, v]) => [v, k])) as Record<string, AttachmentKind>;
+
+/**
+ * 从发给 agent 的消息里拆出用户原文和附件清单（describeAttachments 写的那段）。
+ * 清单每行形如「- 图片1：/路径/a.png（12.3KB，…）」
+ */
+export function splitAttachmentNote(text: string): { text: string; attachments: AttachmentInfo[] } {
+  const cut = NOTE_HEADS.map((h) => text.indexOf(h))
+    .filter((i) => i >= 0)
+    .sort((a, b) => a - b)[0];
+  if (cut === undefined) return { text, attachments: [] };
+  const attachments: AttachmentInfo[] = [];
+  for (const line of text.slice(cut).split("\n")) {
+    const m = /^- (图片|文件|语音|视频)\d+：(.+)（([^（）]*)）\s*$/.exec(line.trim());
+    if (!m) continue;
+    const file = m[2]!.trim();
+    const size = parseSize(m[3]!.split("，")[0]!);
+    attachments.push({ kind: LABEL_KIND[m[1]!] ?? "file", name: path.basename(file), path: file, ...(size ? { size } : {}) });
+  }
+  return { text: text.slice(0, cut).trim(), attachments };
+}
+
+function parseSize(s: string): number | undefined {
+  const m = /^([\d.]+)(B|KB|MB)$/.exec(s.trim());
+  if (!m) return undefined;
+  return Math.round(Number(m[1]) * (m[2] === "MB" ? 1024 * 1024 : m[2] === "KB" ? 1024 : 1));
+}
+
+export function attachmentInfo(a: SavedAttachment): AttachmentInfo {
+  return { kind: a.kind, name: a.name, path: a.path, size: a.size };
+}
+
+/**
+ * 前端要预览 / 下载的附件：只认上传目录里真实存在的普通文件（解析符号链接后再判断，
+ * 防止用 ../ 或链接读到别处）。不合法返回 undefined
+ */
+export function resolveUploadFile(p: string): string | undefined {
+  try {
+    const root = fs.realpathSync(uploadsRoot);
+    const real = fs.realpathSync(path.resolve(p));
+    if (!real.startsWith(root + path.sep)) return undefined;
+    return fs.statSync(real).isFile() ? real : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 /** 附件清单的文字说明，两个 agent 都用它告诉模型文件在哪。 */
 export function describeAttachments(
   saved: SavedAttachment[],

package/web/app.js

@@ -108,6 +108,23 @@ async function api(path, opts = {}) {
 }
 
 /** 回复下面的时间：今天只显示时分，今年显示月日，再早带上年份 */
+/** 用时按大小换单位：12.3秒 / 3分12秒 / 1小时5分（和服务端 formatDuration 一致） */
+function formatDuration(ms) {
+  const sec = ms / 1000;
+  if (sec < 60) return `${sec.toFixed(1)}秒`;
+  const total = Math.round(sec);
+  const hr = Math.floor(total / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  if (hr > 0) return `${hr}小时${m ? `${m}分` : ""}`;
+  return `${m}分${s ? `${s}秒` : ""}`;
+}
+
+/** 老版本记下的脚注是「用时 1234.5s」，显示时也换成时 / 分 / 秒 */
+function tidyFooter(footer) {
+  return footer?.replace(/用时 ([\d.]+)s/, (_, s) => `用时 ${formatDuration(Number(s) * 1000)}`) ?? "";
+}
+
 function clockTime(ts) {
   const d = new Date(ts);
   const now = new Date();
@@ -492,6 +509,12 @@ function renderLayout() {
     }
     lastDown = { key, at: now };
   });
+  ui.convList.addEventListener("contextmenu", (e) => {
+    const key = e.target.closest?.("[data-key]")?.dataset.key;
+    if (!key || !S.convs.has(key)) return;
+    e.preventDefault();
+    openConvContextMenu(key, { x: e.clientX, y: e.clientY });
+  });
   ui.convList.addEventListener("pointerover", (e) => {
     const title = e.target.closest?.(".conv-item")?.querySelector(".title");
     if (title && title !== marquee.el) startMarquee(title);
@@ -862,7 +885,7 @@ function renderSidebar() {
     keys.some((k) => askKeys.has(k))
       ? h("span", { class: "dot ask", title: "等你处理" })
       : keys.some((k) => S.convs.get(k)?.busy)
-        ? h("span", { class: "dot busy" })
+        ? h("span", { class: "conv-spin", title: "进行中" })
         : null;
   const open = (key) => {
     closeSide();
@@ -878,7 +901,7 @@ function renderSidebar() {
       {
         class: `conv-item${cls}${c.key === S.current ? " active" : ""}`,
         "data-key": c.key,
-        title: `${convTitle(c)}${forkNote(c)}\n${detail}\n双击重命名`,
+        title: `${convTitle(c)}${forkNote(c)}\n${detail}\n双击重命名，右键更多操作`,
         onclick: () => open(c.key),
       },
       orphan ? h("span", { class: "brand-icon lead fork-mark", html: ICON.fork }) : null,
@@ -1206,7 +1229,7 @@ function showMenu(anchor, items) {
         : h(
             "button",
             {
-              class: it.danger ? "btn danger" : "",
+              class: it.danger ? "danger" : "",
               onclick: () => {
                 closeMenu();
                 it.onclick();
@@ -1217,12 +1240,21 @@ function showMenu(anchor, items) {
     ),
   );
   document.body.append(menu);
-  const r = anchor.getBoundingClientRect();
+  // anchor 可以是元素（贴着它下沿弹出），也可以是 {x, y}（右键菜单，贴着鼠标弹出）
+  const r = anchor instanceof Element ? anchor.getBoundingClientRect() : { left: anchor.x, bottom: anchor.y };
   const w = menu.offsetWidth;
-  menu.style.top = `${Math.min(r.bottom + 4, innerHeight - menu.offsetHeight - 8)}px`;
+  menu.style.top = `${Math.max(8, Math.min(r.bottom + (anchor instanceof Element ? 4 : 0), innerHeight - menu.offsetHeight - 8))}px`;
   menu.style.left = `${Math.max(8, Math.min(r.left, innerWidth - w - 8))}px`;
   ui.menu = menu;
-  setTimeout(() => document.addEventListener("pointerdown", onOutsideMenu), 0);
+  setTimeout(() => {
+    document.addEventListener("pointerdown", onOutsideMenu);
+    document.addEventListener("keydown", onMenuKey);
+    addEventListener("blur", closeMenu);
+  }, 0);
+}
+
+function onMenuKey(e) {
+  if (e.key === "Escape") closeMenu();
 }
 
 function onOutsideMenu(e) {
@@ -1234,13 +1266,16 @@ function closeMenu() {
   ui.menu?.remove();
   ui.menu = null;
   document.removeEventListener("pointerdown", onOutsideMenu);
+  document.removeEventListener("keydown", onMenuKey);
+  removeEventListener("blur", closeMenu);
 }
 
 function openMoreMenu(anchor) {
   const c = S.convs.get(S.current);
   if (!c) return;
   showMenu(anchor, [
-    { label: "历史会话…", onclick: () => openSessions(false) },
+    // 飞书机器人在侧栏只占一行（点开最近活跃的那个聊天），它的其他聊天从这里找
+    ...(c.channel === "feishu" ? [{ label: "历史会话…", onclick: () => openBotConversations(c.channelId) }] : []),
     { label: "开新会话（清空上下文）", onclick: () => doAction("new") },
     c.canFork
       ? { label: "分叉成新对话", onclick: () => forkConversation() }
@@ -1253,6 +1288,59 @@ function openMoreMenu(anchor) {
   ]);
 }
 
+/** 侧栏会话的右键菜单：分叉 / 重命名 / 删除 */
+function openConvContextMenu(key, at) {
+  const c = S.convs.get(key);
+  if (!c) return;
+  showMenu(at, [
+    {
+      label: "分叉",
+      onclick: async () => {
+        if (c.canFork) return forkConversation(undefined, key);
+        // 不支持另开一条的：只能在原对话里分叉，先切过去
+        if (key !== S.current) await openConversation(key);
+        await doAction("fork");
+      },
+    },
+    { label: "重命名", onclick: () => renameConv(key) },
+    ...(c.channel === "web" ? [{ label: "删除", danger: true, onclick: () => deleteConv(key) }] : []),
+  ]);
+}
+
+/** 飞书机器人的历史会话：这个机器人的所有聊天，按活跃时间排，点一下打开 */
+function openBotConversations(botId) {
+  const bot = S.bots.find((b) => b.id === botId);
+  const convs = [...S.convs.values()]
+    .filter((c) => c.channel === "feishu" && c.channelId === botId && !c.hidden)
+    .sort((a, b) => b.activeAt - a.activeAt);
+  const body = h("div", { class: "modal-body" });
+  const close = modal({ title: `历史会话${bot ? ` · ${bot.name}` : ""}`, body });
+  fill(
+    body,
+    ...(convs.length === 0
+      ? [h("div", { class: "muted" }, "还没有会话")]
+      : convs.map((c) =>
+          h(
+            "button",
+            {
+              class: `list-item${c.key === S.current ? " on" : ""}`,
+              onclick: () => {
+                close();
+                if (c.key !== S.current) void openConversation(c.key);
+              },
+            },
+            h(
+              "div",
+              { class: "grow" },
+              h("div", { class: "t" }, convTitle(c)),
+              h("div", { class: "s" }, `${relTime(c.activeAt)} · ${agentLabel(c.agent)} · ${c.cwd}`),
+            ),
+            c.key === S.current ? "当前" : c.busy ? h("span", { class: "conv-spin", title: "进行中" }) : null,
+          ),
+        )),
+  );
+}
+
 // ---------- 打开会话 ----------
 
 function newDraft() {
@@ -1328,7 +1416,7 @@ async function openConversation(key) {
   S.allowedAgents = data.allowedAgents;
   fill(ui.msgInner, );
   for (const m of data.messages) {
-    if (m.role === "user") addItem({ type: "user", text: m.text, files: [], origin: null });
+    if (m.role === "user") addItem({ type: "user", text: m.text, files: m.attachments ?? [], origin: null });
     else addItem({ type: "ai", steps: m.steps ?? [], committed: m.text, partial: "", done: true, footer: m.footer, at: m.ts, anchor: m.anchor });
   }
   S.seq.set(key, 0);
@@ -1408,16 +1496,96 @@ function updateItem(item) {
   });
 }
 
+const fileUrl = (f, download) => `/api/file?path=${encodeURIComponent(f.path)}${download ? "&download=1" : ""}`;
+
+function fmtSize(n) {
+  if (!n) return "";
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/** 非图片附件：卡片（图标 + 文件名 + 大小），点一下下载 */
+function fileCard(f, gone) {
+  const ext = (f.name.match(/\.([^.]+)$/)?.[1] ?? "").slice(0, 4).toUpperCase();
+  return h(
+    gone ? "span" : "a",
+    {
+      class: `att-file${gone ? " gone" : ""}`,
+      ...(gone ? { title: "文件已清理（开新会话 / 切换目录时会清掉附件）" } : { href: fileUrl(f, true), download: f.name, title: `下载 ${f.name}` }),
+    },
+    h("span", { class: "att-ext" }, ext || "FILE"),
+    h(
+      "span",
+      { class: "att-meta" },
+      h("span", { class: "att-name" }, f.name),
+      h("span", { class: "att-size" }, gone ? "已清理" : fmtSize(f.size) || "下载"),
+    ),
+  );
+}
+
+/**
+ * 用户消息带的附件，排在气泡上面，顺序和发送时一致。
+ * files：新的是 {kind, name, path, size} 对象；老事件里只有「图片 a.png」这样的标签，只能显示名字
+ */
+function renderUserFiles(files) {
+  if (!files?.length) return null;
+  return h(
+    "div",
+    { class: "msg-atts" },
+    files.map((f) => {
+      if (typeof f === "string") return h("span", { class: "att-file gone" }, h("span", { class: "att-meta" }, h("span", { class: "att-name" }, f)));
+      if (f.kind !== "image") return fileCard(f);
+      const box = h("button", { class: "att-img", title: f.name, onclick: () => openLightbox(fileUrl(f), f.name, fileUrl(f, true)) });
+      const img = h("img", { src: fileUrl(f), alt: f.name, loading: "lazy" });
+      // 文件已经被清理：退回成「已清理」的文件卡片
+      img.onerror = () => box.replaceWith(fileCard(f, true));
+      box.append(img);
+      return box;
+    }),
+  );
+}
+
+/** 点缩略图看大图：点任意处或按 Esc 关闭 */
+function openLightbox(src, name, download) {
+  const close = () => {
+    overlay.remove();
+    document.removeEventListener("keydown", onKey, true);
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    }
+  };
+  const overlay = h(
+    "div",
+    { class: "lightbox", onclick: close },
+    h("img", { src, alt: name ?? "" }),
+    h(
+      "div",
+      { class: "lightbox-bar", onclick: (e) => e.stopPropagation() },
+      name ? h("span", { class: "lightbox-name" }, name) : null,
+      download ? h("a", { class: "lightbox-dl", href: download, download: name ?? "" }, "下载") : null,
+    ),
+  );
+  document.body.append(overlay);
+  document.addEventListener("keydown", onKey, true);
+}
+
 function renderItem(item) {
   switch (item.type) {
-    case "user":
+    case "user": {
+      const origin = item.origin && item.origin.channel !== "web" ? `来自${item.origin.name ?? item.origin.channel}` : "";
       return h(
         "div",
-        { class: "msg-user" },
-        item.origin && item.origin.channel !== "web" ? h("span", { class: "origin" }, `来自${item.origin.name ?? item.origin.channel}`) : null,
-        item.text,
-        item.files?.length ? h("div", { class: "files" }, `📎 ${item.files.join("、")}`) : null,
+        { class: "msg-user-group" },
+        // 只发了附件、没有文字：「来自飞书」挂在附件上面
+        !item.text && origin ? h("span", { class: "origin" }, origin) : null,
+        renderUserFiles(item.files),
+        item.text ? h("div", { class: "msg-user" }, origin ? h("span", { class: "origin" }, origin) : null, item.text) : null,
       );
+    }
     case "ai":
       return renderAi(item);
     case "notice":
@@ -1445,10 +1613,14 @@ function renderAi(item) {
           h(
             "summary",
             {},
-            working ? h("span", { class: "spinner" }) : null,
-            working
-              ? `正在处理… ${item.steps[item.steps.length - 1]}`
-              : `${item.segment ? "" : "已完成 "}${item.steps.length} 步${item.segment ? "过程" : ""}`,
+            h(
+              "span",
+              { class: `steps-text${working ? " shimmer" : ""}` },
+              working
+                ? item.steps[item.steps.length - 1].split("\n")[0]
+                : `${item.segment ? "" : "已完成 "}${item.steps.length} 步${item.segment ? "过程" : ""}`,
+            ),
+            h("span", { class: "chev" }, "›"),
           ),
           h("ol", {}, item.steps.map((s) => h("li", {}, s))),
         )
@@ -1457,7 +1629,7 @@ function renderAi(item) {
     "div",
     { class: "msg-ai" },
     steps,
-    body ? renderMarkdown(body) : working && item.steps.length === 0 ? h("div", { class: "thinking" }, h("span", { class: "spinner" }), "思考中…") : null,
+    body ? renderMarkdown(body) : working && item.steps.length === 0 ? h("div", { class: "thinking" }, h("span", { class: "shimmer" }, "思考中…")) : null,
     item.error ? h("div", { class: "error-box" }, item.error) : null,
     item.done && !item.segment && (body || item.footer)
       ? h(
@@ -1468,7 +1640,7 @@ function renderAi(item) {
             ? h("button", { class: "icon-btn", title: "从这里分叉成新对话", onclick: () => forkConversation(item.anchor) }, icon("fork"))
             : null,
           item.footer || item.at
-            ? h("span", { class: "footer-note" }, [item.footer, item.at ? clockTime(item.at) : ""].filter(Boolean).join("　"))
+            ? h("span", { class: "footer-note" }, [item.at ? clockTime(item.at) : "", tidyFooter(item.footer)].filter(Boolean).join("　"))
             : null,
         )
       : null,
@@ -1496,7 +1668,7 @@ function applyEvent(env) {
         S.items = S.items.filter((i) => i !== S.turnAi);
         S.turnAi = null;
       }
-      addItem({ type: "user", text: ev.text, files: ev.attachments, origin: ev.origin });
+      addItem({ type: "user", text: ev.text, files: ev.files ?? ev.attachments, origin: ev.origin });
       currentAi();
       return;
     }
@@ -1924,25 +2096,28 @@ function setBusy(busy) {
 
 function renderChips() {
   if (!ui.chips) return;
+  const remove = (u) => {
+    S.uploads = S.uploads.filter((x) => x !== u);
+    if (u.url) URL.revokeObjectURL(u.url);
+    renderChips();
+  };
   fill(ui.chips, 
     ...S.uploads.map((u) =>
-      h(
-        "span",
-        { class: "chip" },
-        u.uploading ? h("span", { class: "spinner" }) : u.kind === "image" ? "🖼" : "📄",
-        h("span", {}, u.name),
-        h(
-          "button",
-          {
-            title: "移除",
-            onclick: () => {
-              S.uploads = S.uploads.filter((x) => x !== u);
-              renderChips();
-            },
-          },
-          "×",
-        ),
-      ),
+      u.url
+        ? h(
+            "span",
+            { class: `chip-img${u.uploading ? " uploading" : ""}`, title: u.name },
+            h("img", { src: u.url, alt: u.name, onclick: () => openLightbox(u.url, u.name) }),
+            u.uploading ? h("span", { class: "spinner" }) : null,
+            h("button", { class: "chip-x", title: "移除", onclick: () => remove(u) }, "×"),
+          )
+        : h(
+            "span",
+            { class: "chip" },
+            u.uploading ? h("span", { class: "spinner" }) : "📄",
+            h("span", {}, u.name),
+            h("button", { title: "移除", onclick: () => remove(u) }, "×"),
+          ),
     ),
   );
   updateSendBtn();
@@ -1997,6 +2172,8 @@ async function addFiles(files) {
   }
   for (const file of files) {
     const u = { name: file.name || "粘贴的图片.png", kind: file.type.startsWith("image/") ? "image" : "file", uploading: true };
+    // 图片用本地文件直接做缩略图，不用等上传完、也不用再从服务器取
+    if (u.kind === "image") u.url = URL.createObjectURL(file);
     S.uploads.push(u);
     renderChips();
     try {
@@ -2005,9 +2182,11 @@ async function addFiles(files) {
         body: file,
         headers: { "Content-Type": file.type || "application/octet-stream" },
       });
-      Object.assign(u, { id: res.id, kind: res.kind, uploading: false });
+      Object.assign(u, { id: res.id, kind: res.kind, uploading: false, serverName: res.name });
+      if (u.kind !== "image" && u.url) (URL.revokeObjectURL(u.url), delete u.url);
     } catch (err) {
       S.uploads = S.uploads.filter((x) => x !== u);
+      if (u.url) URL.revokeObjectURL(u.url);
       toast(`${u.name} 上传失败：${err.message}`);
     }
     renderChips();
@@ -2040,6 +2219,7 @@ async function sendMessage() {
   }
   ui.input.value = "";
   autosize();
+  for (const u of S.uploads) if (u.url) URL.revokeObjectURL(u.url);
   S.uploads = [];
   renderChips();
   updateSendBtn();
@@ -2281,10 +2461,10 @@ async function doAction(action, value, extra = {}) {
 }
 
 /** 分叉成一条新对话（anchor 给了就到那条回复为止），然后切过去。原对话不动 */
-async function forkConversation(anchor) {
-  if (!S.current) return;
+async function forkConversation(anchor, key = S.current) {
+  if (!key) return;
   try {
-    const res = await api(`/api/conversations/${encodeURIComponent(S.current)}/fork`, {
+    const res = await api(`/api/conversations/${encodeURIComponent(key)}/fork`, {
       method: "POST",
       body: anchor ? { anchor } : {},
     });
@@ -2690,13 +2870,65 @@ function renameConv(key = S.current) {
   input.select();
 }
 
-async function deleteConv() {
-  if (!confirm("从列表里删除这条会话？（agent 那边的记录还在，之后能从「历史会话」恢复）")) return;
+/**
+ * 确认弹窗（替代浏览器自带的 confirm），样式和重命名弹窗一致。
+ * 回车确认、Esc / 点外面取消；resolve 成 true / false
+ */
+function confirmDialog({ title, message, sub, confirmText = "确定", danger = false }) {
+  return new Promise((resolve) => {
+    const ok = h("button", { class: `btn ${danger ? "danger-fill" : "primary"}` }, confirmText);
+    const cancel = h("button", { class: "btn ghost" }, "取消");
+    const done = (v) => {
+      overlay.classList.add("leaving");
+      setTimeout(() => overlay.remove(), 120);
+      document.removeEventListener("keydown", onKey, true);
+      resolve(v);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        done(false);
+      } else if (e.key === "Enter" && !e.isComposing) {
+        e.preventDefault();
+        done(true);
+      }
+    };
+    ok.onclick = () => done(true);
+    cancel.onclick = () => done(false);
+    const overlay = h(
+      "div",
+      { class: "overlay dialog-overlay", onclick: (e) => e.target === overlay && done(false) },
+      h(
+        "div",
+        { class: "dialog confirm-dialog" },
+        h("h3", {}, title),
+        sub ? h("p", { class: "dialog-sub" }, sub) : null,
+        message ? h("p", { class: "dialog-msg" }, message) : null,
+        h("div", { class: "dialog-foot" }, cancel, ok),
+      ),
+    );
+    document.body.append(overlay);
+    document.addEventListener("keydown", onKey, true);
+    ok.focus();
+  });
+}
+
+async function deleteConv(key = S.current) {
+  if (!key) return;
+  const c = S.convs.get(key);
+  const sure = await confirmDialog({
+    title: "删除会话？",
+    sub: c ? [agentIcon(c.agent), h("span", {}, `${convTitle(c)} · ${baseName(c.cwd)}`)] : null,
+    message: "只从列表里移除，agent 那边的会话记录还在。",
+    confirmText: "删除",
+    danger: true,
+  });
+  if (!sure) return;
   try {
-    await api(`/api/conversations/${encodeURIComponent(S.current)}`, { method: "DELETE" });
-    const c = S.convs.get(S.current);
+    await api(`/api/conversations/${encodeURIComponent(key)}`, { method: "DELETE" });
     if (c) c.hidden = true;
-    newDraft();
+    if (key === S.current) newDraft();
+    else renderSidebar();
   } catch (err) {
     toast(err.message);
   }
@@ -3183,7 +3415,7 @@ function commandsTab(cfg, panel) {
           {
             class: "btn",
             onclick: async () => {
-              if (!confirm(`把 ${agentLabel(agent)} 的命令顺序和显示恢复成默认？`)) return;
+              if (!(await confirmDialog({ title: "恢复默认？", message: `把 ${agentLabel(agent)} 的命令顺序和显示恢复成默认。`, confirmText: "恢复默认" }))) return;
               await save({ order: [], hidden: [] });
               await load(agent);
             },
@@ -3442,7 +3674,7 @@ function feishuTab(cfg, panel) {
           {
             class: "btn danger",
             onclick: async () => {
-              if (!confirm(`删除机器人「${b.name}」？`)) return;
+              if (!(await confirmDialog({ title: `删除机器人「${b.name}」？`, confirmText: "删除", danger: true }))) return;
               bots.splice(i, 1);
               if (!b._new) await saveConfig(cfg, { feishu: { bots } });
               render();
@@ -3700,7 +3932,7 @@ async function systemTab(panel) {
             class: "btn",
             disabled: !sys.underSystemd,
             onclick: async () => {
-              if (!confirm("重启 agent-loft？进行中的对话会被中断。")) return;
+              if (!(await confirmDialog({ title: "重启 agent-loft？", message: "进行中的对话会被中断。", confirmText: "重启", danger: true }))) return;
               try {
                 await api("/api/system/restart", { method: "POST" });
                 toast("正在重启…");

package/web/style.css

@@ -516,9 +516,15 @@ button.conv-group:hover {
   flex-shrink: 0;
 }
 
-.dot.busy {
-  background: var(--accent);
-  animation: pulse 1.2s infinite;
+/* 进行中：Codex 那种细圈转圈，一段弧在淡色圆环上转 */
+.conv-spin {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: 1.5px solid color-mix(in srgb, var(--fg-faint) 28%, transparent);
+  border-top-color: var(--fg-soft);
+  animation: spin 0.75s linear infinite;
 }
 
 .dot.ask {
@@ -749,7 +755,6 @@ button.conv-group:hover {
   gap: 6px;
   padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
   min-height: 52px;
-  border-bottom: 1px solid transparent;
   /*
    * iOS 26+ 的主屏 PWA 会在页面顶端叠一层系统的模糊渐变（Liquid Glass 边缘效果），CSS 关不掉。
    * WebKit 只在顶端有「fixed / sticky、铺满宽度、高于 10px、纯色不透明」的元素时跳过它，
@@ -944,7 +949,7 @@ button.conv-group:hover {
 .messages-inner {
   max-width: 820px;
   margin: 0 auto;
-  padding: 16px 20px 24px;
+  padding: 16px 20px 40px;
   display: flex;
   flex-direction: column;
   gap: 18px;
@@ -1008,6 +1013,109 @@ button.conv-group:hover {
   border-bottom-color: var(--fg);
 }
 
+/* 用户消息：附件在上、气泡在下，整组靠右 */
+.msg-user-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 0;
+}
+
+.msg-user-group > .origin {
+  font-size: 12px;
+  color: var(--fg-faint);
+}
+
+.msg-atts {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 6px;
+  max-width: 85%;
+}
+
+.att-img {
+  width: 128px;
+  height: 128px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-soft);
+  cursor: zoom-in;
+}
+
+.att-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.att-file {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 240px;
+  max-width: 100%;
+  padding: 8px 12px 8px 8px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg);
+  color: var(--fg);
+  text-decoration: none;
+  transition: background 0.12s;
+}
+
+a.att-file:hover {
+  background: var(--bg-soft);
+}
+
+.att-file.gone {
+  opacity: 0.6;
+}
+
+.att-ext {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #fff;
+  background: var(--accent);
+}
+
+.att-meta {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.att-name {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.att-size {
+  font-size: 12px;
+  color: var(--fg-faint);
+}
+
+@media (max-width: 768px) {
+  .att-img {
+    width: 96px;
+    height: 96px;
+  }
+}
+
 .msg-user {
   align-self: flex-end;
   max-width: 85%;
@@ -1025,11 +1133,6 @@ button.conv-group:hover {
   margin-bottom: 2px;
 }
 
-.msg-user .files {
-  margin-top: 6px;
-  font-size: 13px;
-  color: var(--fg-soft);
-}
 
 .msg-ai {
   display: flex;
@@ -1043,32 +1146,69 @@ button.conv-group:hover {
   color: var(--fg-soft);
 }
 
+/* 过程摘要：一行，太长就省略；折叠箭头在文字后面 */
 .steps summary {
   cursor: pointer;
   list-style: none;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+  width: fit-content;
+  max-width: 100%;
   padding: 2px 0;
   user-select: none;
 }
 
-.steps summary::-webkit-details-marker {
-  display: none;
+.steps summary .steps-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.steps summary::before {
-  content: "›";
+.steps summary .chev {
+  flex-shrink: 0;
   display: inline-block;
   transition: transform 0.15s;
   font-size: 16px;
   line-height: 1;
 }
 
-.steps[open] summary::before {
+.steps[open] summary .chev {
   transform: rotate(90deg);
 }
 
+/* 还在跑命令 / 工具：一道光从左扫到右 */
+.shimmer {
+  color: transparent;
+  background: linear-gradient(
+      90deg,
+      var(--fg-faint) 0%,
+      var(--fg-faint) 40%,
+      var(--fg) 50%,
+      var(--fg-faint) 60%,
+      var(--fg-faint) 100%
+    )
+    0 0 / 250% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: shimmer 1.8s linear infinite;
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0% 0;
+  }
+}
+
+.steps summary::-webkit-details-marker {
+  display: none;
+}
+
+
 .steps ol {
   margin: 4px 0 0;
   padding: 6px 0 6px 14px;
@@ -1457,6 +1597,26 @@ button.conv-group:hover {
 
 .composer-wrap {
   padding: 0 16px calc(12px + env(safe-area-inset-bottom));
+  position: relative;
+  z-index: 2;
+}
+
+/* 输入框上沿的渐变：聊天内容滚到底部时柔和地淡出，不是被一刀切开（和顶栏下沿对称）。
+   右边让出滚动条的宽度，免得把滚动条也盖淡 */
+.composer-wrap::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 10px;
+  bottom: 100%;
+  height: 32px;
+  pointer-events: none;
+  background: linear-gradient(
+    to top,
+    var(--bg),
+    color-mix(in srgb, var(--bg) 70%, transparent) 40%,
+    color-mix(in srgb, var(--bg) 0%, transparent)
+  );
 }
 
 .composer-box {
@@ -1901,6 +2061,34 @@ button.ctx-item:hover {
   background: var(--bg-hover);
 }
 
+.confirm-dialog .dialog-sub {
+  margin-bottom: 0;
+  min-width: 0;
+}
+
+.confirm-dialog .dialog-sub > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dialog-msg {
+  margin: 12px 0 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fg-soft);
+}
+
+.dialog-foot .btn.danger-fill {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: #fff;
+}
+
+.dialog-foot .btn.danger-fill:hover {
+  background: color-mix(in srgb, var(--danger) 88%, #000);
+}
+
 .dialog-foot .btn.primary {
   background: var(--accent);
   border-color: var(--accent);
@@ -2100,6 +2288,10 @@ button.list-item:hover {
   background: var(--bg-hover);
 }
 
+.menu button.danger {
+  color: var(--danger);
+}
+
 /* 贴着按钮弹出的选择面板（模型 / agent） */
 .popover {
   min-width: 220px;
@@ -2338,7 +2530,7 @@ button.list-item:hover {
   }
 
   .messages-inner {
-    padding: 12px 14px 20px;
+    padding: 12px 14px 36px;
   }
 
   .msg-user {
@@ -2602,3 +2794,132 @@ button.list-item:hover {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* ---------- 滚动条：细、无边框、无轨道，像 Codex ---------- */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--fg-faint) 32%, transparent);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--fg-faint) 55%, transparent);
+}
+::-webkit-scrollbar-button {
+  display: none;
+}
+/* 不认 ::-webkit-scrollbar 的浏览器（Firefox）用标准属性；Chrome 里设了标准属性会盖掉上面的，所以分开 */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--fg-faint) 40%, transparent) transparent;
+  }
+}
+
+/* ---------- 图片附件：缩略图 + 点开看大图 ---------- */
+.chip-img {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--bg-soft);
+  flex-shrink: 0;
+}
+.chip-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  cursor: zoom-in;
+}
+.chip-img.uploading img {
+  opacity: 0.5;
+}
+.chip-img .spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -6px 0 0 -6px;
+  pointer-events: none;
+}
+.chip-img .chip-x {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 13px;
+  line-height: 18px;
+  text-align: center;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.chip-img:hover .chip-x {
+  opacity: 1;
+}
+@media (hover: none) {
+  .chip-img .chip-x {
+    opacity: 1;
+  }
+}
+
+
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: rgba(0, 0, 0, 0.82);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 24px;
+  cursor: zoom-out;
+  animation: fade-in 0.12s ease-out;
+}
+.lightbox img {
+  max-width: 100%;
+  max-height: calc(100% - 32px);
+  object-fit: contain;
+  border-radius: 6px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+}
+
+.lightbox-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  cursor: default;
+}
+
+.lightbox-name {
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 13px;
+}
+
+.lightbox-dl {
+  color: #fff;
+  font-size: 13px;
+  text-decoration: none;
+  padding: 4px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+}
+
+.lightbox-dl:hover {
+  background: rgba(255, 255, 255, 0.26);
+}