@yfwu2020/dsh-selection-explain 0.10.6 → 0.11.0

package/lib/client.js

@@ -117,6 +117,10 @@ var PILL_POS = "/selection-explain/api/pill";
 var PANEL_SIZE = "/selection-explain/api/panel";
 var HISTORY = "/selection-explain/api/history";
 var MODELS = "/selection-explain/api/models";
+var ATTACH = "/selection-explain/api/attach";
+var ATTACHMENT = "/selection-explain/api/attachment";
+var ATTACH_MAX_ITEMS = 10;
+var ATTACH_MAX_ITEM_BYTES = 20 * 1024 * 1024;
 var SETTINGS = "/selection-explain/api/settings";
 var ROUTE = "/selection-explain/api/route";
 var SPEECH_API = "/selection-explain/api/speech";
@@ -441,12 +445,97 @@ var CSS = [
   "background:transparent;color:var(--dsw-alias-label-secondary,inherit);opacity:.5;font:inherit;font-size:11px;",
   "line-height:1;display:inline-flex;align-items:center;justify-content:center}",
   ".dsh-sel-quotechip-x:hover{opacity:1;background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.16))}",
+  // ── 附件（composer 第一行，和引用同栏）──
+  // 引用是竖着排的卡片（有出处 + 一段文字），附件是横着一排的缩略图 —— 两种形状，
+  // 所以是**两条独立的条**、共用 ask 的第一行区域，而不是把附件塞进引用卡片里。
+  // 横向溢出就滚动（附件最多 10 件，小窗宽度装不下是常态），滚动条藏起来不占高度。
+  ".dsh-sel-attach{display:none;flex-direction:row;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;",
+  "scrollbar-width:none;padding:1px 0 0}",
+  '.dsh-sel-attach[data-show="1"]{display:flex}',
+  ".dsh-sel-attach::-webkit-scrollbar{width:0;height:0;display:none}",
+  // 40px 见方：比主会话的 64px 小一圈（小窗的 composer 整体是收着的：按钮 26、输入 13px）
+  ".dsh-sel-thumb{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:9px;overflow:hidden;",
+  "border:1px solid var(--dsw-alias-border-l3,rgba(140,140,140,.35));background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.14));",
+  "display:grid;place-items:center;color:var(--dsw-alias-label-secondary,inherit)}",
+  ".dsh-sel-thumb img{width:100%;height:100%;object-fit:cover;display:block}",
+  ".dsh-sel-thumb svg{width:15px;height:15px;opacity:.55}",
+  '.dsh-sel-thumb[data-state="error"]{border-color:color-mix(in srgb,var(--sel-bad,#e5534b) 70%,transparent)}',
+  '.dsh-sel-thumb[data-state="error"] svg{opacity:.9;color:var(--sel-bad,#e5534b)}',
+  // 转圈 + 不定态进度条：fetch 拿不到上传进度，所以**不假装知道百分比**
+  // （主会话在"首次报告字节之前"用的也是不定态）
+  ".dsh-sel-attachspin{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.42)}",
+  ".dsh-sel-attachspin svg{width:16px;height:16px;opacity:1;color:var(--sel-a1,#0d9488);animation:dsh-sel-spin .9s linear infinite}",
+  ".dsh-sel-attachbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(140,140,140,.35);overflow:hidden}",
+  ".dsh-sel-attachbar i{display:block;height:100%;width:38%;background:var(--sel-a1,#0d9488);animation:dsh-sel-indeterminate 1.1s ease-in-out infinite}",
+  "@keyframes dsh-sel-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}",
+  // 移除：缩略图/文件卡右上角。**常驻可见**（触摸设备上没有 hover，藏起来就删不掉了）
+  // 兜底色必须是**中性灰 + 白字**：主题变量缺席时（非 DSH 宿主 / 测试页）
+  // 原来的 `bg-layer-2 → #3a3f46` 配 `label-primary → CanvasText`（浅色方案下是黑）
+  // 会画成"深底黑叉"，实拍就是一坨看不出是什么的黑点。
+  ".dsh-sel-attachx{position:absolute;top:-5px;right:-5px;width:15px;height:15px;padding:0;border-radius:50%;",
+  "border:1px solid var(--dsw-alias-bg-layer-1,Canvas);background:var(--dsw-alias-bg-layer-2,rgba(120,120,120,.92));",
+  "color:var(--dsw-alias-label-primary,#fff);font:inherit;font-size:9px;line-height:1;cursor:pointer;",
+  "display:grid;place-items:center;opacity:.85}",
+  ".dsh-sel-attachx:hover{opacity:1}",
+  // 文件卡：和缩略图同高（40px），名字一行、扩展名 + 字节数一行小字
+  ".dsh-sel-fcard{position:relative;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;height:40px;",
+  "padding:0 7px 0 6px;border-radius:9px;border:1px solid var(--dsw-alias-border-l3,rgba(140,140,140,.35));",
+  "background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.1));font-size:11.5px;line-height:1.35}",
+  '.dsh-sel-fcard[data-state="error"]{border-color:color-mix(in srgb,var(--sel-bad,#e5534b) 70%,transparent)}',
+  ".dsh-sel-fico{flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;",
+  "background:linear-gradient(160deg,#3f6ee0,#7aa2ff);color:#fff}",
+  ".dsh-sel-fico svg{width:13px;height:13px;opacity:1}",
+  ".dsh-sel-fname{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
+  ".dsh-sel-fmeta{font-size:10.5px;opacity:.6;letter-spacing:.3px;white-space:nowrap}",
+  ".dsh-sel-fretry{flex:0 0 auto;height:16px;padding:0 6px;border-radius:8px;cursor:pointer;font:inherit;font-size:10.5px;",
+  "line-height:14px;color:var(--sel-bad,#e5534b);border:1px solid color-mix(in srgb,var(--sel-bad,#e5534b) 50%,transparent);",
+  "background:transparent}",
+  ".dsh-sel-fretry:hover{background:color-mix(in srgb,var(--sel-bad,#e5534b) 12%,transparent)}",
+  // 附件出错时的说明行（贴在附件条下面，一行小字）
+  ".dsh-sel-attachnote{display:none;margin:0;padding:0 2px;font-size:11px;line-height:1.6;color:var(--sel-warn-fg,#b45309)}",
+  '.dsh-sel-attachnote[data-show="1"]{display:block}',
+  // ＋ 入口：圆形浅底（和主会话 composer 的 ＋ 同款），放在工具行**最左**
+  ".dsh-sel-add{background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.14));color:var(--dsw-alias-label-primary,CanvasText)}",
+  ".dsh-sel-add:hover{background:var(--dsw-alias-interactive-bg-active,rgba(140,140,140,.22))}",
+  '.dsh-sel-add[data-busy="1"]{opacity:.6}',
+  // 拖放遮罩：铺满面板（面板本身 overflow:hidden，所以内缩 6px 的圆角块正好贴住内容区）
+  ".dsh-sel-drop{position:absolute;inset:6px;z-index:9;display:none;flex-direction:column;align-items:center;",
+  "justify-content:center;gap:9px;border:2px dashed var(--sel-a1,#0d9488);border-radius:13px;",
+  "background:color-mix(in srgb,var(--dsw-alias-bg-layer-1,Canvas) 88%,transparent);pointer-events:none}",
+  '.dsh-sel-panel[data-dropping="1"] .dsh-sel-drop{display:flex}',
+  ".dsh-sel-drop-art{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;",
+  "background:var(--sel-a1-soft);color:var(--sel-a1,#0d9488)}",
+  ".dsh-sel-drop-art svg{width:25px;height:25px}",
+  ".dsh-sel-drop-title{font-size:14px;font-weight:600}",
+  ".dsh-sel-drop-hint{font-size:11.5px;opacity:.7}",
   // 气泡里的引用块（用户消息）：引用在上、问题在下 —— 和发出去给模型的那份顺序一致
   ".dsh-sel-bq{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}",
   ".dsh-sel-bqitem{padding:3px 8px;border-radius:8px;border-left:2px solid color-mix(in srgb,var(--sel-a1,#0d9488) 45%,transparent);",
   "background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.14));font-size:11.5px;line-height:1.55;",
   "opacity:.82;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}",
   ".dsh-sel-bqitem b{font-weight:600;opacity:.75;margin-right:5px}",
+  // 气泡里的附件：图片是缩略图（点开原图），文件是一张卡（点一下下载）。
+  // 和输入框上面那条 rail 是**同一个东西的两个阶段**（发送前 / 发送后），
+  // 所以尺寸、圆角、配色都对齐：缩略图 40px、文件卡同高。
+  ".dsh-sel-bqattach{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}",
+  // ⚠️ flex:0 0 auto 会让这个盒子的宽度由**图片自己**撑出来，于是图片上的 max-width:100%
+  // 变成"相对于自己"（循环引用）→ 一张 810px 宽的图会照原样渲染并溢出气泡（实测量到 810x180）。
+  // 必须允许它收缩（flex:0 1 auto + min-width:0），百分比才有一个确定的参照。
+  ".dsh-sel-bqimgwrap{flex:0 1 auto;min-width:0;max-width:100%;display:block;border-radius:9px;overflow:hidden;line-height:0;",
+  "border:1px solid var(--dsw-alias-border-l3,rgba(140,140,140,.35))}",
+  // 上限 180px 高、最宽占满气泡：小窗本来就窄，缩略图不能把气泡撑爆
+  ".dsh-sel-bqimg{display:block;max-width:100%;max-height:180px;width:auto;height:auto;border-radius:8px;cursor:zoom-in}",
+  ".dsh-sel-bqimgfail{display:inline-block;padding:5px 9px;border-radius:8px;font-size:11.5px;opacity:.7;",
+  "background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.14))}",
+  ".dsh-sel-bqfile{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 9px;border-radius:9px;",
+  "text-decoration:none;color:inherit;cursor:pointer;font-size:11.5px;line-height:1.35;",
+  "border:1px solid var(--dsw-alias-border-l3,rgba(140,140,140,.35));",
+  "background:var(--dsw-alias-interactive-bg-hover,rgba(140,140,140,.1))}",
+  ".dsh-sel-bqfile:hover{border-color:color-mix(in srgb,var(--sel-a1,#0d9488) 45%,transparent)}",
+  ".dsh-sel-bqfileext{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.4px;padding:0 5px;",
+  "border-radius:5px;line-height:15px;background:var(--sel-fill,#0f766e);color:var(--sel-fill-fg,#fff)}",
+  ".dsh-sel-bqfilename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}",
+  ".dsh-sel-bqfilemeta{flex:0 0 auto;font-size:10.5px;opacity:.6}",
   // 「引用整条」：贴在助手气泡末尾，**平时不出现**（正文优先），鼠标移到这条消息上才浮出来。
   // 键盘 Tab 也能到（:focus-visible 同样点亮），触屏上另有浮标那条路。
   ".dsh-sel-bubquote{margin-top:7px;display:inline-flex;align-items:center;gap:4px;padding:2px 9px;",
@@ -1128,6 +1217,21 @@ function micIcon() {
   svg.appendChild(stem);
   return svg;
 }
+function spinnerIcon() {
+  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("width", "14");
+  svg.setAttribute("height", "14");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.7");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("aria-hidden", "true");
+  var arc = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  arc.setAttribute("d", "M8 1.8a6.2 6.2 0 1 1-4.4 1.8");
+  svg.appendChild(arc);
+  return svg;
+}
 function sendIcon() {
   var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("viewBox", "0 0 16 16");
@@ -1178,6 +1282,34 @@ function quoteIcon() {
   }
   return svg;
 }
+function plusIcon() {
+  var svg = iconCanvas(14);
+  iconPath(svg, "M8 3.4v9.2M3.4 8h9.2");
+  return svg;
+}
+function docIcon() {
+  var svg = iconCanvas(14);
+  iconPath(svg, "M4.3 1.9h4.4l3 3v9.2H4.3z");
+  iconPath(svg, "M8.5 1.9v3.2h3.2");
+  return svg;
+}
+function imageIcon() {
+  var svg = iconCanvas(14);
+  iconPath(svg, "M2.6 3.2h10.8v9.6H2.6z");
+  var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  dot.setAttribute("cx", "5.7");
+  dot.setAttribute("cy", "6.3");
+  dot.setAttribute("r", "0.9");
+  svg.appendChild(dot);
+  iconPath(svg, "M2.6 10.9l3.1-2.9 2.5 2.3 2.3-2.1 2.9 2.7");
+  return svg;
+}
+function retryIcon() {
+  var svg = iconCanvas(13);
+  iconPath(svg, "M12.6 8a4.6 4.6 0 1 1-1.6-3.5");
+  iconPath(svg, "M12.9 2.6v3.1h-3.1");
+  return svg;
+}
 
 // src/client/index.js
 var import_react = __toESM(require("react"), 1);
@@ -3935,7 +4067,12 @@ function createQuotesController(env) {
   function exportTurns() {
     var out = [];
     for (var i = 0; i < env.state.turns.length; i += 1) {
-      out.push({ role: env.state.turns[i].role, text: sentTextOf(env.state.turns[i]) });
+      var turn = env.state.turns[i];
+      out.push({
+        role: turn.role,
+        text: sentTextOf(turn),
+        ...turn.attachments && turn.attachments.length > 0 ? { attachments: turn.attachments } : {}
+      });
     }
     return out;
   }
@@ -3954,6 +4091,383 @@ function createQuotesController(env) {
   };
 }
 
+// src/client/attach.js
+function encodeAttachmentRef(ref) {
+  var json = JSON.stringify(ref || {});
+  if (typeof TextEncoder === "function") {
+    var bytes = new TextEncoder().encode(json);
+    var binary = "";
+    for (var i = 0; i < bytes.length; i += 1) binary += String.fromCharCode(bytes[i]);
+    json = binary;
+  }
+  return btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function attachmentUrl(kind, ref, download) {
+  return ATTACHMENT + "?kind=" + (kind === "file" ? "file" : "image") + "&ref=" + encodeAttachmentRef(ref) + (download ? "&download=1" : "");
+}
+function formatBytes(bytes) {
+  var value = typeof bytes === "number" && isFinite(bytes) ? bytes : 0;
+  if (value < 1024) return value + " B";
+  if (value < 1024 * 1024) return (value / 1024).toFixed(1) + " KB";
+  return (value / 1024 / 1024).toFixed(1) + " MB";
+}
+function extensionOf(name) {
+  var match = /\.([A-Za-z0-9]+)$/.exec(String(name || ""));
+  return match ? match[1].toUpperCase() : "FILE";
+}
+function fileToBase64(file) {
+  return new Promise(function(resolve, reject) {
+    var reader = new FileReader();
+    reader.onload = function() {
+      var result = String(reader.result || "");
+      var comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : "");
+    };
+    reader.onerror = function() {
+      reject(reader.error || new Error("\u8BFB\u53D6\u6587\u4EF6\u5931\u8D25"));
+    };
+    reader.readAsDataURL(file);
+  });
+}
+function looksLikeDirectory(file) {
+  return file && file.size === 0 && !file.type && !/\.[A-Za-z0-9]+$/.test(String(file.name || ""));
+}
+function createAttachController(env) {
+  var seq = 0;
+  function items() {
+    return env.state.attachments;
+  }
+  function note(text) {
+    env.state.attachNote = text || "";
+    renderNote();
+  }
+  function renderNote() {
+    if (!env.attachNote) return;
+    env.attachNote.textContent = env.state.attachNote || "";
+    env.attachNote.setAttribute("data-show", env.state.attachNote ? "1" : "0");
+  }
+  function busy() {
+    var list = items();
+    for (var i = 0; i < list.length; i += 1) if (list[i].status === "uploading") return true;
+    return false;
+  }
+  function payload() {
+    var out = [];
+    var list = items();
+    for (var i = 0; i < list.length; i += 1) {
+      if (list[i].status === "done" && list[i].ref) out.push({ kind: list[i].kind, ref: list[i].ref });
+    }
+    return out;
+  }
+  function describe(explicit) {
+    var list = explicit || items();
+    var names = [];
+    for (var i = 0; i < list.length; i += 1) {
+      if (list[i].status !== "done" || !list[i].ref) continue;
+      names.push(list[i].name + (list[i].kind === "image" ? "\uFF08\u56FE\u7247\uFF09" : "\uFF08\u6587\u4EF6\uFF09"));
+    }
+    if (names.length === 0) return "";
+    return "\u3010\u672C\u6761\u6D88\u606F\u5E26\u4E86\u9644\u4EF6\u3011" + names.join("\u3001");
+  }
+  function clear() {
+    var list = items();
+    for (var i = 0; i < list.length; i += 1) revoke(list[i]);
+    env.state.attachments = [];
+    env.state.attachNote = "";
+    render();
+  }
+  function revoke(item) {
+    if (item && item.url && typeof URL !== "undefined" && URL.revokeObjectURL) {
+      try {
+        URL.revokeObjectURL(item.url);
+      } catch (error) {
+      }
+    }
+  }
+  function remove(id) {
+    var list = items();
+    for (var i = 0; i < list.length; i += 1) {
+      if (list[i].id === id) {
+        revoke(list[i]);
+        list.splice(i, 1);
+        break;
+      }
+    }
+    env.state.attachNote = "";
+    render();
+    env.refreshAskState();
+  }
+  function addFiles(files) {
+    var list = items();
+    var incoming = [];
+    for (var i = 0; i < files.length; i += 1) incoming.push(files[i]);
+    if (incoming.length === 0) return;
+    var rejected = [];
+    for (var j = 0; j < incoming.length; j += 1) {
+      var file = incoming[j];
+      if (looksLikeDirectory(file)) {
+        rejected.push("\u300C" + (file.name || "\u672A\u547D\u540D") + "\u300D\u662F\u6587\u4EF6\u5939\uFF0C\u4E0D\u652F\u6301");
+        continue;
+      }
+      if (list.length >= ATTACH_MAX_ITEMS) {
+        rejected.push("\u4E00\u6B21\u6700\u591A\u5E26 " + ATTACH_MAX_ITEMS + " \u4EF6\u9644\u4EF6");
+        break;
+      }
+      if (file.size > ATTACH_MAX_ITEM_BYTES) {
+        rejected.push("\u300C" + file.name + "\u300D\u8D85\u8FC7\u5355\u4EF6\u4E0A\u9650 " + formatBytes(ATTACH_MAX_ITEM_BYTES));
+        continue;
+      }
+      list.push(createItem(file));
+    }
+    note(rejected.join("\uFF1B"));
+    render();
+    env.refreshAskState();
+    var pending = list.filter(function(item) {
+      return item.status === "uploading" && !item.started;
+    });
+    var chain = Promise.resolve();
+    pending.forEach(function(item) {
+      chain = chain.then(function() {
+        return upload(item);
+      });
+    });
+  }
+  function createItem(file) {
+    var isImage = /^image\//.test(String(file.type || ""));
+    var item = {
+      id: ++seq,
+      kind: isImage ? "image" : "file",
+      name: file.name || (isImage ? "\u7C98\u8D34\u7684\u56FE\u7247" : "\u672A\u547D\u540D\u6587\u4EF6"),
+      size: typeof file.size === "number" ? file.size : 0,
+      mediaType: file.type || "application/octet-stream",
+      file,
+      // 缩略图先用本地 object URL 显示（不必等上传完），失败时回落到图标
+      url: isImage && typeof URL !== "undefined" && URL.createObjectURL ? URL.createObjectURL(file) : "",
+      status: "uploading",
+      started: false,
+      ref: null,
+      error: ""
+    };
+    return item;
+  }
+  function upload(item) {
+    if (item.started) return Promise.resolve();
+    item.started = true;
+    item.status = "uploading";
+    item.error = "";
+    render();
+    return fileToBase64(item.file).then(function(data) {
+      return fetch(ATTACH, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          items: [{ kind: item.kind, name: item.name, mediaType: item.mediaType, data }]
+        })
+      });
+    }).then(function(response) {
+      return response.json().catch(function() {
+        return {};
+      }).then(function(body) {
+        if (!response.ok || !body || body.ok !== true) {
+          throw new Error(body && body.error || "HTTP " + response.status);
+        }
+        var first = body.items && body.items[0];
+        if (!first || !first.ref) throw new Error("\u4E0A\u4F20\u540E\u6CA1\u6709\u62FF\u5230\u9644\u4EF6\u5F15\u7528");
+        item.ref = first.ref;
+        item.status = "done";
+        item.file = null;
+        if (first.ref.name) item.name = String(first.ref.name);
+        if (typeof first.ref.bytes === "number") item.size = first.ref.bytes;
+        if (env.state.attachNote.indexOf(item.name) >= 0) note("");
+      });
+    }).catch(function(error) {
+      item.status = "error";
+      item.error = String(error && error.message || error);
+      note("\u300C" + item.name + "\u300D" + item.error);
+    }).then(function() {
+      render();
+      env.refreshAskState();
+    });
+  }
+  function retry(id) {
+    var list = items();
+    for (var i = 0; i < list.length; i += 1) {
+      if (list[i].id === id && list[i].status === "error") {
+        if (!list[i].file) {
+          note("\u8FD9\u4E00\u4EF6\u5DF2\u7ECF\u6CA1\u6CD5\u91CD\u8BD5\u4E86\uFF0C\u8BF7\u91CD\u65B0\u6DFB\u52A0");
+          return;
+        }
+        list[i].started = false;
+        upload(list[i]);
+        return;
+      }
+    }
+  }
+  function render() {
+    var box = env.attachBox;
+    if (!box) return;
+    var list = items();
+    box.textContent = "";
+    box.setAttribute("data-show", list.length > 0 ? "1" : "0");
+    for (var i = 0; i < list.length; i += 1) {
+      box.appendChild(list[i].kind === "image" ? thumbNode(list[i]) : fileNode(list[i]));
+    }
+    renderNote();
+  }
+  function removeButton(item) {
+    var button = el("button", "dsh-sel-attachx", "\u2715");
+    button.type = "button";
+    button.title = "\u79FB\u9664\u300C" + item.name + "\u300D";
+    button.setAttribute("aria-label", "\u79FB\u9664\u9644\u4EF6 " + item.name);
+    listen(button, "click", function(event) {
+      event.stopPropagation();
+      remove(item.id);
+    });
+    return button;
+  }
+  function thumbNode(item) {
+    var node = el("span", "dsh-sel-thumb");
+    node.setAttribute("data-state", item.status);
+    node.title = item.name;
+    if (item.url) {
+      var img = document.createElement("img");
+      img.src = item.url;
+      img.alt = item.name;
+      node.appendChild(img);
+    } else {
+      node.appendChild(imageIcon());
+    }
+    if (item.status === "uploading") {
+      var spin = el("span", "dsh-sel-attachspin");
+      spin.appendChild(spinnerIcon());
+      node.appendChild(spin);
+      var bar = el("span", "dsh-sel-attachbar");
+      bar.appendChild(el("i"));
+      node.appendChild(bar);
+    } else if (item.status === "error") {
+      var retryBox = el("span", "dsh-sel-attachspin");
+      retryBox.style.background = "transparent";
+      retryBox.title = "\u4E0A\u4F20\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u8BD5";
+      var retryButton = el("button", "dsh-sel-attachx", "");
+      retryButton.type = "button";
+      retryButton.style.position = "static";
+      retryButton.style.width = "20px";
+      retryButton.style.height = "20px";
+      retryButton.setAttribute("aria-label", "\u91CD\u8BD5\u4E0A\u4F20 " + item.name);
+      retryButton.appendChild(retryIcon());
+      listen(retryButton, "click", function(event) {
+        event.stopPropagation();
+        retry(item.id);
+      });
+      retryBox.appendChild(retryButton);
+      node.appendChild(retryBox);
+    }
+    node.appendChild(removeButton(item));
+    return node;
+  }
+  function fileNode(item) {
+    var node = el("span", "dsh-sel-fcard");
+    node.setAttribute("data-state", item.status);
+    var icon = el("span", "dsh-sel-fico");
+    icon.appendChild(docIcon());
+    node.appendChild(icon);
+    node.appendChild(el("span", "dsh-sel-fname", item.name));
+    var meta = extensionOf(item.name) + " \xB7 " + formatBytes(item.size);
+    if (item.status === "uploading") meta = "\u6B63\u5728\u4E0A\u4F20\u2026";
+    node.appendChild(el("span", "dsh-sel-fmeta", meta));
+    if (item.status === "error") {
+      var retryButton = el("button", "dsh-sel-fretry", "\u91CD\u8BD5");
+      retryButton.type = "button";
+      listen(retryButton, "click", function(event) {
+        event.stopPropagation();
+        retry(item.id);
+      });
+      node.appendChild(retryButton);
+    }
+    node.appendChild(removeButton(item));
+    return node;
+  }
+  function pick() {
+    if (!env.attachInput) return;
+    env.attachInput.value = "";
+    env.attachInput.click();
+  }
+  function handlePaste(event) {
+    var files = event.clipboardData && event.clipboardData.files;
+    if (!files || files.length === 0) return;
+    event.preventDefault();
+    addFiles(files);
+    env.setStatus("\u5DF2\u4ECE\u526A\u8D34\u677F\u6DFB\u52A0 " + files.length + " \u4EF6\u9644\u4EF6");
+  }
+  function isFileDrag(event) {
+    var transfer = event.dataTransfer;
+    if (!transfer) return false;
+    var types = transfer.types;
+    if (!types) return false;
+    for (var i = 0; i < types.length; i += 1) {
+      if (types[i] === "Files") return true;
+    }
+    return false;
+  }
+  function wireDrop() {
+    var depth = 0;
+    var panel = env.panel;
+    if (!panel) return;
+    function show() {
+      panel.setAttribute("data-dropping", "1");
+    }
+    function hide() {
+      depth = 0;
+      panel.removeAttribute("data-dropping");
+    }
+    listen(panel, "dragenter", function(event) {
+      if (!isFileDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      depth += 1;
+      show();
+    });
+    listen(panel, "dragover", function(event) {
+      if (!isFileDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.dataTransfer.dropEffect !== void 0) event.dataTransfer.dropEffect = "copy";
+    });
+    listen(panel, "dragleave", function(event) {
+      if (!isFileDrag(event)) return;
+      event.stopPropagation();
+      depth -= 1;
+      if (depth <= 0) hide();
+    });
+    listen(panel, "drop", function(event) {
+      if (!isFileDrag(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      hide();
+      var files = event.dataTransfer.files;
+      if (files && files.length > 0) {
+        addFiles(files);
+        env.setStatus("\u5DF2\u6DFB\u52A0 " + files.length + " \u4EF6\u9644\u4EF6");
+      }
+    });
+  }
+  return {
+    items,
+    addFiles,
+    remove,
+    clear,
+    retry,
+    render,
+    busy,
+    payload,
+    describe,
+    note,
+    pick,
+    handlePaste,
+    wireDrop
+  };
+}
+
 // src/client/bridge.js
 function bridgeBody() {
   if (window.__dshSelBridge) return;
@@ -4515,6 +5029,7 @@ function createPanelController(env) {
     env.state.turns = [];
     env.state.toolDigest = "";
     env.clearQuotes();
+    env.clearAttachments();
     env.state.parts = cached && cached.parts || { translation: "", detail: "" };
     env.state.stage = "";
     env.state.raw = "";
@@ -6339,7 +6854,9 @@ function createHistoryController(env) {
       if (turn.role === "user") {
         var usig = (turn.text || "") + "|" + (turn.quotes || []).map(function(item) {
           return item.text;
-        }).join("\0");
+        }).join("\0") + "|" + (turn.attachments || []).map(function(item) {
+          return (item.kind || "") + ":" + String(item.ref && item.ref.attachmentId || "");
+        }).join(",");
         if (node.__sig !== usig) {
           node.__sig = usig;
           fillUserBubble(node, turn);
@@ -6393,6 +6910,10 @@ function createHistoryController(env) {
   function fillUserBubble(node, turn) {
     node.textContent = "";
     var quotes = turn.quotes || [];
+    var attachments = turn.attachments || [];
+    if (attachments.length > 0) {
+      node.appendChild(attachmentStrip(attachments));
+    }
     if (quotes.length > 0) {
       var box = el("div", "dsh-sel-bq");
       for (var i = 0; i < quotes.length; i += 1) {
@@ -6404,7 +6925,57 @@ function createHistoryController(env) {
       }
       node.appendChild(box);
     }
-    if (turn.text) node.appendChild(el("div", null, turn.text));
+    var display = displayTextOf(turn);
+    if (display) node.appendChild(el("div", null, display));
+  }
+  function attachmentStrip(attachments) {
+    var strip = el("div", "dsh-sel-bqattach");
+    for (var i = 0; i < attachments.length; i += 1) {
+      var item = attachments[i] || {};
+      var ref = item.ref || {};
+      if (item.kind === "image") {
+        strip.appendChild(attachmentImage(ref));
+      } else {
+        strip.appendChild(attachmentFile(ref));
+      }
+    }
+    return strip;
+  }
+  function attachmentImage(ref) {
+    var link = document.createElement("a");
+    link.className = "dsh-sel-bqimgwrap";
+    link.href = attachmentUrl("image", ref);
+    link.target = "_blank";
+    link.rel = "noreferrer noopener";
+    link.title = "\u70B9\u51FB\u67E5\u770B\u539F\u56FE" + (ref.name ? "\uFF1A" + ref.name : "");
+    var img = document.createElement("img");
+    img.className = "dsh-sel-bqimg";
+    img.src = link.href;
+    img.alt = ref.name || "\u56FE\u7247";
+    img.loading = "lazy";
+    img.addEventListener("error", function() {
+      var box = el("span", "dsh-sel-bqimgfail", "\u56FE\u7247\u5DF2\u4E0D\u5728\u9644\u4EF6\u4ED3\u91CC");
+      if (link.parentNode) link.parentNode.replaceChild(box, link);
+    });
+    link.appendChild(img);
+    return link;
+  }
+  function attachmentFile(ref) {
+    var link = document.createElement("a");
+    link.className = "dsh-sel-bqfile";
+    link.href = attachmentUrl("file", ref, true);
+    link.rel = "noreferrer noopener";
+    link.title = "\u4E0B\u8F7D\uFF1A" + (ref.name || "\u6587\u4EF6");
+    link.appendChild(el("span", "dsh-sel-bqfileext", ref.name ? extensionOf(ref.name) : "FILE"));
+    link.appendChild(el("span", "dsh-sel-bqfilename", ref.name || "\u6587\u4EF6"));
+    if (typeof ref.bytes === "number") link.appendChild(el("span", "dsh-sel-bqfilemeta", formatBytes(ref.bytes)));
+    return link;
+  }
+  function displayTextOf(turn) {
+    var text = turn.text || "";
+    if (!text) return "";
+    if (!turn.attachments || turn.attachments.length === 0) return text;
+    return text.replace(/^【本条消息带了附件】[^\n]*\n?/, "");
   }
   function bubbleFor(turn) {
     var bubble = el("div", "dsh-sel-bubble " + (turn.role === "user" ? "dsh-sel-bubble-user" : "dsh-sel-bubble-bot"));
@@ -6539,7 +7110,10 @@ function createConversationController(env) {
       env.askSend.setAttribute("aria-label", generating ? "\u505C\u6B62" : "\u53D1\u9001");
       env.askSend.title = generating ? "\u505C\u6B62\u751F\u6210\uFF08\u70B9\u4E00\u4E0B\u6253\u65AD\u8FD9\u6B21\u8F93\u51FA\uFF09" : "\u53D1\u9001\uFF08Enter\uFF09";
     }
-    env.askSend.disabled = generating ? false : !String(env.askBox.value || "").trim() && env.state.quotes.length === 0;
+    var waitingAttachments = env.attachmentsBusy();
+    env.askSend.disabled = generating ? false : waitingAttachments || !String(env.askBox.value || "").trim() && env.state.quotes.length === 0 && env.state.attachments.length === 0;
+    var placeholder = env.state.attachments.length > 0 ? "\u5C31\u8FD9\u6BB5\u6587\u5B57\u7EE7\u7EED\u8FFD\u95EE\u2026\uFF08Enter \u53D1\u9001\uFF0CShift+Enter \u6362\u884C\uFF09" : "\u5C31\u8FD9\u6BB5\u6587\u5B57\u7EE7\u7EED\u8FFD\u95EE\u2026\uFF08\u53EF\u62D6\u5165\u56FE\u7247 / \u6587\u4EF6\uFF0C\u6216 \u2318V \u7C98\u8D34\uFF09";
+    if (env.askBox.placeholder !== placeholder) env.askBox.placeholder = placeholder;
   }
   function stopCurrent() {
     if (env.state.askRequest) {
@@ -6572,7 +7146,12 @@ function createConversationController(env) {
     }
     var asked = String(question || "").trim();
     var quotes = env.state.quotes.slice();
-    if (!asked && quotes.length === 0 || !env.state.payload) return;
+    var attachments = env.attachmentsPayload();
+    if (!asked && quotes.length === 0 && attachments.length === 0 || !env.state.payload) return;
+    if (env.attachmentsBusy()) {
+      env.setStatus("\u9644\u4EF6\u8FD8\u5728\u4E0A\u4F20\uFF0C\u7A0D\u7B49\u4E00\u4E0B\u2026");
+      return;
+    }
     if (env.state.resolvingQuotes) {
       env.setStatus("\u6B63\u5728\u53D6\u5F15\u7528\u7684\u4E0A\u4E0B\u6587\u2026");
       return;
@@ -6586,24 +7165,31 @@ function createConversationController(env) {
       env.renderQuotes();
       refreshAskState();
     }
+    var attachmentsNote = env.attachmentsDescribe();
+    if (attachments.length > 0) {
+      env.clearAttachments();
+      refreshAskState();
+    }
     if (quotes.length === 0) {
-      sendAsk(asked, quotes);
+      sendAsk(asked, quotes, attachments, attachmentsNote);
       return;
     }
     env.state.resolvingQuotes = true;
     env.resolveQuoteContexts(quotes).then(function(resolved) {
       env.state.resolvingQuotes = false;
-      sendAsk(asked, resolved);
+      sendAsk(asked, resolved, attachments, attachmentsNote);
     });
   }
-  function sendAsk(asked, quotes) {
+  function sendAsk(asked, quotes, attachments, attachmentsNote) {
     var payload = env.state.payload;
     if (!payload) return;
+    var withAttachments = attachments || [];
     var sent = env.composeQuestion(quotes, asked);
+    if (attachmentsNote) sent = attachmentsNote + "\n" + sent;
     if (env.state.turns.length === 0 && (env.state.raw.trim() || env.state.parts.translation || env.state.parts.detail)) {
       env.state.turns.push({ role: "assistant", text: env.seedHistoryFromExplanation(), seed: true, hidden: true });
     }
-    env.state.turns.push({ role: "user", text: asked || QUOTE_ONLY_QUESTION, quotes, sent });
+    env.state.turns.push({ role: "user", text: asked || QUOTE_ONLY_QUESTION, quotes, sent, attachments: withAttachments });
     var answerTurn = {
       role: "assistant",
       text: "",
@@ -6636,7 +7222,11 @@ function createConversationController(env) {
     var historyTurns = env.state.turns.slice(0, env.state.turns.length - 2);
     var history = historyTurns.map(function(turn, index) {
       var keepRaw = env.FOLD_HISTORY_KEEP_LATEST && index === historyTurns.length - 1;
-      return { role: turn.role, text: env.historyTextOf(turn, keepRaw) };
+      return {
+        role: turn.role,
+        text: env.historyTextOf(turn, keepRaw),
+        ...turn.attachments && turn.attachments.length > 0 ? { attachments: turn.attachments } : {}
+      };
     });
     env.state.stopped = false;
     var askController = new AbortController();
@@ -6683,6 +7273,8 @@ function createConversationController(env) {
         sessionId: env.panelOrCurrentSessionId(),
         question: sent,
         history,
+        // 附件只带**引用**（图片/文件都已经在 host 的附件服务里），body 不会因为一张截图胖几 MB
+        ...withAttachments.length > 0 ? { attachments: withAttachments } : {},
         // 网页输出要跟着当前深浅走：深色 Harness 里给一张白底页面会很刺眼
         ...env.state.webAnswer ? { webAnswer: true, theme: env.currentSurfaceTheme() } : {},
         ...env.state.modelChoice ? { provider: env.state.modelChoice.provider, model: env.state.modelChoice.model } : {},
@@ -8565,6 +9157,14 @@ function apply(ctx) {
      * 只属于**下一条**提问（发送即清空）；关掉面板不清 —— 回来接着写还看得见。
      */
     quotes: [],
+    /**
+     * 待发送的附件：[{ id, kind:'image'|'file', name, size, mediaType, file, url, status, ref, error }]。
+     * 和引用同一条规矩 —— 只属于**下一条**追问，发送即清空；
+     * 区别是上传状态挂在每一项上（逐件上传、逐件重试，见 attach.js）。
+     */
+    attachments: [],
+    /** 附件条下面那行提示（"文件夹不支持""一次最多 10 件"之类），空串就不显示。 */
+    attachNote: "",
     /** 最近一次"可以引用"的选区：[{ text, label, rect, source }]（浮标据此显示）。 */
     quoteSelection: null,
     /** 正在取引用的会话上下文（这期间再按 Enter 不能空发一条）。 */
@@ -8685,14 +9285,25 @@ function apply(ctx) {
   var askRow = el("div", "dsh-sel-ask");
   var quotesBox = el("div", "dsh-sel-quotes");
   askRow.appendChild(quotesBox);
+  var attachBox = el("div", "dsh-sel-attach");
+  askRow.appendChild(attachBox);
+  var attachNote = el("p", "dsh-sel-attachnote");
+  askRow.appendChild(attachNote);
+  var attachInput = el("input");
+  attachInput.type = "file";
+  attachInput.multiple = true;
+  attachInput.style.display = "none";
+  attachInput.setAttribute("aria-hidden", "true");
+  attachInput.tabIndex = -1;
+  askRow.appendChild(attachInput);
   var askBox = el("textarea", "dsh-sel-askbox");
   askBox.rows = 1;
   askBox.placeholder = "\u5C31\u8FD9\u6BB5\u6587\u5B57\u7EE7\u7EED\u8FFD\u95EE\u2026\uFF08Enter \u53D1\u9001\uFF0CShift+Enter \u6362\u884C\uFF09";
   var webMode = el("span", "dsh-sel-pref");
-  webMode.appendChild(el("span", "dsh-sel-preftext", "\u8F93\u51FA\u504F\u597D"));
+  webMode.title = "\u8F93\u51FA\u504F\u597D\uFF1AMarkdown\uFF08\u9ED8\u8BA4\u6587\u5B57\u56DE\u7B54\uFF09/ \u7F51\u9875\uFF08\u590D\u6742\u95EE\u9898\u751F\u6210 HTML \u9875\u9762\uFF09";
   var prefSeg = el("span", "dsh-sel-seg");
   prefSeg.setAttribute("role", "radiogroup");
-  prefSeg.setAttribute("aria-label", "\u8F93\u51FA\u504F\u597D");
+  prefSeg.setAttribute("aria-label", "\u8F93\u51FA\u504F\u597D\uFF1AMarkdown \u6216\u7F51\u9875");
   var prefPill = el("span", "dsh-sel-segpill");
   var cellMd = el("button", "dsh-sel-segcell");
   cellMd.type = "button";
@@ -8773,7 +9384,13 @@ function apply(ctx) {
   captureRow.appendChild(voiceActionSlot);
   captureRow.appendChild(voiceStop);
   var askTools = el("div", "dsh-sel-asktools");
+  var addButton = el("button", "dsh-sel-iconbtn dsh-sel-add");
+  addButton.type = "button";
+  addButton.setAttribute("aria-label", "\u6DFB\u52A0\u56FE\u7247\u6216\u6587\u4EF6");
+  addButton.title = "\u6DFB\u52A0\u56FE\u7247\u6216\u6587\u4EF6\uFF08\u4E5F\u53EF\u4EE5\u76F4\u63A5\u7C98\u8D34\u6216\u62D6\u8FDB\u6765\uFF09";
+  addButton.appendChild(plusIcon());
   var askSpacer = el("span", "dsh-sel-askspace");
+  askTools.appendChild(addButton);
   askTools.appendChild(webMode);
   askTools.appendChild(askSpacer);
   askTools.appendChild(modelPill);
@@ -8837,6 +9454,14 @@ function apply(ctx) {
   panel.appendChild(head);
   panel.appendChild(body);
   panel.appendChild(askRow);
+  var dropMask = el("div", "dsh-sel-drop");
+  dropMask.setAttribute("aria-hidden", "true");
+  var dropArt = el("div", "dsh-sel-drop-art");
+  dropArt.appendChild(plusIcon());
+  dropMask.appendChild(dropArt);
+  dropMask.appendChild(el("div", "dsh-sel-drop-title", "\u677E\u5F00\u5373\u6DFB\u52A0\u4E3A\u8FD9\u6761\u8FFD\u95EE\u7684\u9644\u4EF6"));
+  dropMask.appendChild(el("div", "dsh-sel-drop-hint", "\u56FE\u7247\u76F4\u63A5\u7ED9\u6A21\u578B\u770B \xB7 \u6587\u4EF6\u5B58\u6210\u53EA\u8BFB\u8DEF\u5F84\u6309\u9700\u8BFB\u53D6"));
+  panel.appendChild(dropMask);
   layer.appendChild(panel);
   var settingsController = createSettingsController({
     get state() {
@@ -9125,6 +9750,9 @@ function apply(ctx) {
     get clearQuotes() {
       return quotesController.clearQuotes;
     },
+    get clearAttachments() {
+      return attachController.clear;
+    },
     get renderTurns() {
       return historyController.renderTurns;
     },
@@ -9518,6 +10146,18 @@ function apply(ctx) {
     get composeQuestion() {
       return quotesController.composeQuestion;
     },
+    get attachmentsPayload() {
+      return attachController.payload;
+    },
+    get attachmentsBusy() {
+      return attachController.busy;
+    },
+    get attachmentsDescribe() {
+      return attachController.describe;
+    },
+    get clearAttachments() {
+      return attachController.clear;
+    },
     get seedHistoryFromExplanation() {
       return historyController.seedHistoryFromExplanation;
     },
@@ -9630,6 +10270,29 @@ function apply(ctx) {
       return panelController.buildPayload;
     }
   });
+  var attachController = createAttachController({
+    get state() {
+      return state;
+    },
+    get panel() {
+      return panel;
+    },
+    get attachBox() {
+      return attachBox;
+    },
+    get attachNote() {
+      return attachNote;
+    },
+    get attachInput() {
+      return attachInput;
+    },
+    get setStatus() {
+      return panelController.setStatus;
+    },
+    get refreshAskState() {
+      return conversationController.refreshAskState;
+    }
+  });
   var modelsController = createModelsController({
     get state() {
       return state;
@@ -10162,7 +10825,7 @@ function apply(ctx) {
     event.preventDefault();
     event.stopPropagation();
     var question = askBox.value;
-    if (!question.trim() && state.quotes.length === 0) return;
+    if (!question.trim() && state.quotes.length === 0 && state.attachments.length === 0) return;
     conversationController.ask(question);
   });
   var offAskInput = listen(askBox, "input", function() {
@@ -10175,9 +10838,21 @@ function apply(ctx) {
       return;
     }
     var question = askBox.value;
-    if (!question.trim() && state.quotes.length === 0) return;
+    if (!question.trim() && state.quotes.length === 0 && state.attachments.length === 0) return;
     conversationController.ask(question);
   });
+  var offAttachPick = listen(attachInput, "change", function() {
+    attachController.addFiles(attachInput.files || []);
+    attachInput.value = "";
+  });
+  var offAttachButton = listen(addButton, "click", function(event) {
+    event.stopPropagation();
+    attachController.pick();
+  });
+  var offAttachPaste = listen(panel, "paste", function(event) {
+    attachController.handlePaste(event);
+  });
+  attachController.wireDrop();
   var offMic = listen(micButton, "click", function(event) {
     event.stopPropagation();
     voiceController.startVoice();
@@ -10773,6 +11448,9 @@ function apply(ctx) {
       offAskKey();
       offAskInput();
       offAskSend();
+      offAttachPick();
+      offAttachButton();
+      offAttachPaste();
       offMic();
       offVoiceCancel();
       offVoiceStop();