@bolloon/bolloon-agent 0.3.1 → 0.3.3

package/dist/web/client-hearth.js

@@ -0,0 +1,67 @@
+/**
+ * client-hearth.ts — judgeness 前端模块 (占位实现)
+ *
+ * 防御期: 接 routes-hearth.ts, 渲染最小骨架 UI (My Hearth / Discover / Visit).
+ * 真实样式与组件待相持期接入 bolloon 现有 ui 设计 (HIG 等参考).
+ *
+ * 这个文件会被 esbuild 打包进 dist/web/client.js (与 src/web/client.ts 一致链路).
+ *
+ * 部署约定: 本文件 import 的 url 都是 '/api/hearth/*', 与 server.ts 端口 54188 对齐.
+ */
+// 默认接受 JSON-LD (agent 头等公民); 人类用 ?view=human 切
+async function fetchHearth(path, opts = {}) {
+    const res = await fetch(path, { headers: { Accept: opts.json ? 'application/ld+json' : '*/*' } });
+    if (!res.ok)
+        throw new Error(`hearth fetch ${path} -> ${res.status}`);
+    return await res.json();
+}
+// 三视图 stub: 由主 client.ts 路由到 #/hearth / #/hearth/discover / #/hearth/visit/<pk>
+export async function renderMyHearth(root) {
+    root.innerHTML = '<h1>My Hearth</h1><p>Loading…</p>';
+    try {
+        const data = await fetchHearth('/api/hearth');
+        root.innerHTML = `
+      <h1>My Hearth</h1>
+      <dl>
+        <dt>Service</dt><dd>${data.service} v${data.version}</dd>
+        <dt>Root</dt><dd><code>${data.rootPath}</code></dd>
+        <dt>Description count</dt><dd>${data.descriptionCount}</dd>
+        <dt>Visibility channels</dt><dd>${data.visibilityChannels}</dd>
+        <dt>Allowlist count</dt><dd>${data.allowlistCount}</dd>
+        <dt>Defense mode</dt><dd>${data.defenseMode ? 'ON (write APIs disabled)' : 'OFF (反攻期)'}</dd>
+      </dl>
+      <p>视图: <a href="#/hearth/discover">Discover</a> · <a href="#/hearth/visit/__self__">Visit self</a></p>`;
+    }
+    catch (e) {
+        root.innerHTML = `<h1>My Hearth</h1><p style="color:red">Error: ${e.message}</p>`;
+    }
+}
+export async function renderDiscover(root) {
+    root.innerHTML = '<h1>Discover</h1><p>Searching…</p>';
+    try {
+        const data = await fetchHearth('/api/hearth/discover');
+        // data 可能是 JSON-LD @graph 或 list
+        const items = Array.isArray(data) ? data : (data['@graph'] ?? []);
+        const cards = items.slice(0, 50).map((it) => {
+            const id = it['@id'] ?? it.descriptionId ?? '?';
+            const vis = it.visibility ?? '?';
+            const state = it.openState ?? '?';
+            return `<li><code>${id}</code> · <span>${vis}</span> · <span>${state}</span></li>`;
+        }).join('');
+        root.innerHTML = `<h1>Discover</h1><ul>${cards || '<li>(no results)</li>'}</ul>`;
+    }
+    catch (e) {
+        root.innerHTML = `<h1>Discover</h1><p style="color:red">Error: ${e.message}</p>`;
+    }
+}
+export async function renderVisit(root, _pubkey) {
+    root.innerHTML = `<h1>Visit</h1><p>Visit 视图待相持期实现 (plan §C2).</p>`;
+}
+// 注册 router hook — 主 client.ts 在启动时调用
+export function registerHearthRoutes(router, getRoot) {
+    router.on('/hearth', () => void renderMyHearth(getRoot()));
+    router.on('/hearth/discover', () => void renderDiscover(getRoot()));
+    router.on('/hearth/visit/:pk', (_p, params) => {
+        void renderVisit(getRoot(), params['pk'] ?? '__self__');
+    });
+}

package/dist/web/client.js

@@ -839,7 +839,7 @@
       "'": "'"
     })[c]);
   }
-  function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }, timestamp) {
     const messagesEl2 = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
     const messagesContainers2 = ctx.messagesContainers || /* @__PURE__ */ new Map();
     const currentChannelId2 = ctx.currentChannelId;
@@ -908,9 +908,20 @@
       return;
     }
     const rawContent = segments.filter((s) => s.type === "text" || s.type === "final").map((s) => s.content || "").join("\n");
+    let timeLabel = "";
+    try {
+      if (timestamp !== void 0 && timestamp !== null) {
+        const d = timestamp instanceof Date ? timestamp : new Date(timestamp);
+        if (!isNaN(d.getTime())) {
+          timeLabel = d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+        }
+      }
+    } catch {
+    }
+    if (!timeLabel) timeLabel = (/* @__PURE__ */ new Date()).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
     const time = document.createElement("div");
     time.className = "time";
-    time.textContent = (/* @__PURE__ */ new Date()).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+    time.textContent = timeLabel;
     if (type === "ai") {
       div.appendChild(buildMessageActions(div, rawContent, ctx));
     }
@@ -2210,16 +2221,27 @@
       const session = await res.json();
       const msgs = session.messages || [];
       if (msgs.length > 0) {
+        let lastType = null;
+        let lastContent = null;
+        const dedupedMsgs = msgs.filter((m) => {
+          const same = lastType === m.type && lastContent === m.content;
+          lastType = m.type;
+          lastContent = m.content;
+          return !same;
+        });
         const frag = document.createDocumentFragment();
         const tmpContainer = document.createElement("div");
         tmpContainer.style.display = "none";
-        for (const msg of msgs) {
-          addMessage2(msg.content, msg.type, false, tmpContainer, msg.metadata?.usedJudgmentIds || []);
+        for (const msg of dedupedMsgs) {
+          addMessage2(msg.content, msg.type, false, tmpContainer, msg.metadata?.usedJudgmentIds || [], msg.timestamp);
         }
         while (tmpContainer.firstChild) {
           frag.appendChild(tmpContainer.firstChild);
         }
         container.appendChild(frag);
+        if (dedupedMsgs.length !== msgs.length) {
+          console.log(`[loadSession] \u53BB\u91CD ${msgs.length - dedupedMsgs.length} \u6761\u76F8\u90BB\u91CD\u590D\u6D88\u606F (${msgs.length} \u2192 ${dedupedMsgs.length})`);
+        }
       } else {
         addMessage2("\u4F60\u597D\uFF01\u6211\u662F Bolloon Agent\u3002\u6709\u4EC0\u4E48\u6211\u53EF\u4EE5\u5E2E\u4F60\u7684\u5417\uFF1F", "ai", false, container);
       }
@@ -2244,9 +2266,21 @@ ${data.error || "channel not found"}`, "error");
       const session = await res.json();
       container.innerHTML = "";
       if (session.messages && session.messages.length > 0) {
-        session.messages.forEach((msg) => {
-          addMessage2(msg.content, msg.type, false, container, msg.metadata?.usedJudgmentIds || []);
+        const rawMsgs = session.messages;
+        let lastType = null;
+        let lastContent = null;
+        const deduped = rawMsgs.filter((m) => {
+          const same = lastType === m.type && lastContent === m.content;
+          lastType = m.type;
+          lastContent = m.content;
+          return !same;
         });
+        deduped.forEach((msg) => {
+          addMessage2(msg.content, msg.type, false, container, msg.metadata?.usedJudgmentIds || [], msg.timestamp);
+        });
+        if (deduped.length !== rawMsgs.length) {
+          console.log(`[loadSession-v2] \u53BB\u91CD ${rawMsgs.length - deduped.length} \u6761`);
+        }
       } else {
         addMessage2("\u4F60\u597D\uFF01\u6211\u662F Bolloon Agent\u3002\u6709\u4EC0\u4E48\u6211\u53EF\u4EE5\u5E2E\u4F60\u7684\u5417\uFF1F", "ai", false, container);
       }
@@ -2256,8 +2290,8 @@ ${data.error || "channel not found"}`, "error");
       addMessage2("\u4F60\u597D\uFF01\u6211\u662F Bolloon Agent\u3002\u6709\u4EC0\u4E48\u6211\u53EF\u4EE5\u5E2E\u4F60\u7684\u5417\uFF1F", "ai", false, container);
     }
   }
-  function addMessage2(content, type, save = true, container, usedJudgmentIds = []) {
-    return MR_addMessage(content, type, save, container, usedJudgmentIds, getRendererCtx());
+  function addMessage2(content, type, save = true, container, usedJudgmentIds = [], timestamp = void 0) {
+    return MR_addMessage(content, type, save, container, usedJudgmentIds, getRendererCtx(), timestamp);
   }
   function finalizeTimelineAsMessage2() {
     return MR_finalizeTimelineAsMessage(getRendererCtx());
@@ -2435,13 +2469,13 @@ ${data.error || "channel not found"}`, "error");
               const container = messagesContainers.get(targetChannelId) || messagesEl;
               if (msg.type === "ai") {
                 if (!MR_hasStreamingText()) {
-                  addMessage2(msg.content, "ai", true, container, lastUsedJudgmentIds || []);
+                  addMessage2(msg.content, "ai", true, container, lastUsedJudgmentIds || [], msg.timestamp);
                 } else {
                   MR_replaceStreamingText?.(msg.content);
                   MR_finalizeTimelineAsMessage(getRendererCtx());
                 }
               } else if (msg.type === "user") {
-                if (msg.source === "remote" || msg.source === "local") {
+                if (msg.source === "remote") {
                   addMessage2(msg.content, "user", true, container);
                 }
               }
@@ -2526,22 +2560,19 @@ ${data.error || "channel not found"}`, "error");
             addMessage2(data.content, "user", true, container);
           }
         } else if (data.type === "ai") {
+          const allPreviews = container.querySelectorAll(".message-ai.preview");
+          allPreviews.forEach((el) => el.remove());
+          currentPreviewBubble = null;
           addMessage2(data.content || "", "ai", true, container, lastUsedJudgmentIds || []);
-          if (currentPreviewBubble) {
-            currentPreviewBubble.remove();
-            currentPreviewBubble = null;
-          }
         } else if (data.type === "reply-preview") {
           const previewContent = data.content || "";
-          if (!currentPreviewBubble) {
-            currentPreviewBubble = addMessage2(previewContent, "ai", true, container, []);
-            if (currentPreviewBubble) {
-              currentPreviewBubble.classList.add("preview");
-            }
-          } else {
-            currentPreviewBubble.replaceWith(addMessage2(previewContent, "ai", true, container, []));
-            const msgs = container.querySelectorAll(".message-ai.preview");
-            currentPreviewBubble = msgs.length > 0 ? msgs[msgs.length - 1] : null;
+          const oldPreviews = container.querySelectorAll(".message-ai.preview");
+          oldPreviews.forEach((el) => el.remove());
+          addMessage2(previewContent, "ai", false, container, []);
+          const newPreview = container.querySelector(".message-ai:not(.preview):last-of-type") || container.lastElementChild;
+          if (newPreview) {
+            newPreview.classList.add("preview");
+            currentPreviewBubble = newPreview;
           }
         } else if (data.type === "stream") {
           if (false) handleStreamTokenEvent(data);
@@ -2615,6 +2646,10 @@ ${data.error || "channel not found"}`, "error");
     persistLastMessageToServer("user", text);
     const channel = channels.find((c) => c.id === currentChannelId);
     const channelDid = channel?.did || "";
+    const attachmentsForSend = pendingAttachments.slice();
+    pendingAttachments = [];
+    const chipsEl = document.getElementById("input-attachment-chips");
+    if (chipsEl) chipsEl.innerHTML = "";
     console.log("[\u53D1\u9001\u6D88\u606F] \u9891\u9053 DID:", channelDid);
     try {
       const res = await fetch("/message", {
@@ -2623,7 +2658,9 @@ ${data.error || "channel not found"}`, "error");
         body: JSON.stringify({
           text,
           channelId: currentChannelId,
-          channelDid
+          channelDid,
+          attachments: attachmentsForSend
+          // 后端解析为 LLM contextHint
         })
       });
       if (!res.ok) {
@@ -2982,11 +3019,103 @@ ${data.error || "channel not found"}`, "error");
     }, true);
   }
   var inputArea = document.querySelector(".input-area");
+  var pendingAttachments = [];
+  function fileToBase64Local(file) {
+    return new Promise((resolve2, reject) => {
+      const r = new FileReader();
+      r.onerror = () => reject(r.error || new Error("FileReader error"));
+      r.onload = () => {
+        const s = String(r.result || "");
+        const idx = s.indexOf(",");
+        resolve2(idx >= 0 ? s.slice(idx + 1) : s);
+      };
+      r.readAsDataURL(file);
+    });
+  }
+  function appendAttachmentChip(name) {
+    let chipsEl = document.getElementById("input-attachment-chips");
+    if (!chipsEl) {
+      chipsEl = document.createElement("div");
+      chipsEl.id = "input-attachment-chips";
+      chipsEl.style.cssText = "padding:8px 12px 4px;display:flex;gap:8px;flex-wrap:wrap;font-size:13px;";
+      if (inputArea && inputArea.parentNode) inputArea.parentNode.insertBefore(chipsEl, inputArea);
+    }
+    const chip = document.createElement("span");
+    chip.className = "attach-chip";
+    chip.style.cssText = "background:linear-gradient(135deg,#dbeafe,#e0e7ff);border:1px solid #6366f1;border-radius:14px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;color:#3730a3;font-weight:500;box-shadow:0 1px 3px rgba(99,102,241,0.18);animation:attach-pop-in 0.25s ease-out;";
+    chip.textContent = `\u{1F4CE} ${name}`;
+    chip.title = "\u9644\u4EF6\u5DF2\u52A0\u5165\u672C\u6761\u6D88\u606F";
+    chipsEl.appendChild(chip);
+    return chipsEl;
+  }
+  function ensureFileDropOverlay() {
+    let overlay = document.getElementById("file-drop-overlay");
+    if (overlay) return overlay;
+    overlay = document.createElement("div");
+    overlay.id = "file-drop-overlay";
+    overlay.style.cssText = "position:fixed;inset:0;background:rgba(99,102,241,0.18);backdrop-filter:blur(2px);z-index:9998;display:none;align-items:center;justify-content:center;pointer-events:none;transition:opacity 0.18s;";
+    overlay.innerHTML = `
+    <div style="
+      background:white;
+      border:3px dashed #6366f1;
+      border-radius:18px;
+      padding:48px 64px;
+      box-shadow:0 24px 60px rgba(99,102,241,0.25);
+      color:#4338ca;
+      text-align:center;
+      max-width:520px;
+      animation:attach-pulse 1.4s ease-in-out infinite;
+    ">
+      <div style="font-size:64px;line-height:1;margin-bottom:16px;">\u{1F4E5}</div>
+      <div style="font-size:22px;font-weight:600;margin-bottom:8px;">\u677E\u5F00\u4E0A\u4F20\u5230 Bolloon</div>
+      <div style="font-size:14px;color:#64748b;">\u62D6\u5165\u6587\u4EF6\u7ACB\u5373\u4F5C\u4E3A\u9644\u4EF6\u53D1\u7ED9 AI, \u6700\u5927 10MB/\u6587\u4EF6</div>
+    </div>
+  `;
+    document.body.appendChild(overlay);
+    return overlay;
+  }
+  function ensureAttachStyles() {
+    if (document.getElementById("attach-style-tag")) return;
+    const s = document.createElement("style");
+    s.id = "attach-style-tag";
+    s.textContent = `
+    @keyframes attach-pop-in {
+      0% { transform: scale(0.6); opacity: 0; }
+      60% { transform: scale(1.08); opacity: 1; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+    @keyframes attach-pulse {
+      0%, 100% { transform: scale(1); box-shadow: 0 24px 60px rgba(99,102,241,0.25); }
+      50%      { transform: scale(1.04); box-shadow: 0 30px 80px rgba(99,102,241,0.4); }
+    }
+    @keyframes attach-success-flash {
+      0% { background: linear-gradient(135deg,#dcfce7,#bbf7d0); }
+      100% { background: linear-gradient(135deg,#dbeafe,#e0e7ff); }
+    }
+    .drop-target {
+      outline: 3px dashed #6366f1 !important;
+      outline-offset: 4px !important;
+      background-color: rgba(99,102,241,0.08) !important;
+    }
+  `;
+    document.head.appendChild(s);
+  }
+  ensureAttachStyles();
+  var _dropStyle = document.createElement("style");
+  _dropStyle.textContent = `
+  body.file-drag-active { outline: 4px dashed #6366f1; outline-offset: -8px; }
+`;
+  document.head.appendChild(_dropStyle);
   if (input && inputArea) {
     const onDragOver = (e) => {
-      if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes("application/x-bolloon-judgment")) {
+      if (!e.dataTransfer) return;
+      const types = Array.from(e.dataTransfer.types || []);
+      const hasJudgment = types.includes("application/x-bolloon-judgment");
+      const hasFiles = types.includes("Files");
+      if (hasJudgment || hasFiles) {
         e.preventDefault();
-        e.dataTransfer.dropEffect = "copy";
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = hasFiles ? "copy" : "copy";
         inputArea.classList.add("drop-target");
       }
     };
@@ -2995,27 +3124,166 @@ ${data.error || "channel not found"}`, "error");
         inputArea.classList.remove("drop-target");
       }
     };
-    const onDrop = (e) => {
+    const onDrop = async (e) => {
       inputArea.classList.remove("drop-target");
-      const raw = e.dataTransfer.getData("application/x-bolloon-judgment");
-      if (!raw) return;
-      e.preventDefault();
-      try {
-        const { id, decision } = JSON.parse(raw);
-        const prefix = input.value.trim() ? input.value.trim() + "\n" : "";
-        input.value = `${prefix}\u6309\u6211\u7684\u5224\u65AD #${id?.substring(0, 8) || ""} \u6267\u884C: ${decision}`;
-        input.focus();
-        input.style.transition = "box-shadow 0.3s";
-        input.style.boxShadow = "0 0 0 2px #2563eb";
-        setTimeout(() => {
-          input.style.boxShadow = "";
-        }, 800);
-      } catch {
+      if (!e.dataTransfer) return;
+      const types = Array.from(e.dataTransfer.types || []);
+      if (types.includes("application/x-bolloon-judgment")) {
+        const raw = e.dataTransfer.getData("application/x-bolloon-judgment");
+        if (!raw) return;
+        e.preventDefault();
+        try {
+          const { id, decision } = JSON.parse(raw);
+          const prefix = input.value.trim() ? input.value.trim() + "\n" : "";
+          input.value = `${prefix}\u6309\u6211\u7684\u5224\u65AD #${id?.substring(0, 8) || ""} \u6267\u884C: ${decision}`;
+          input.focus();
+          input.style.transition = "box-shadow 0.3s";
+          input.style.boxShadow = "0 0 0 2px #2563eb";
+          setTimeout(() => {
+            input.style.boxShadow = "";
+          }, 800);
+        } catch {
+        }
+        return;
+      }
+      if (types.includes("Files")) {
+        e.preventDefault();
+        const ov = document.getElementById("file-drop-overlay");
+        if (ov) ov.style.display = "none";
+        document.body.classList.remove("file-drag-active");
+        const files = Array.from(e.dataTransfer.files || []);
+        if (files.length === 0) return;
+        const totalBytes = files.reduce((s, f) => s + f.size, 0);
+        const fmtSize = (b) => b < 1024 ? `${b}B` : b < 1024 * 1024 ? `${(b / 1024).toFixed(1)}KB` : `${(b / 1024 / 1024).toFixed(2)}MB`;
+        if (typeof showSimpleToast === "function") {
+          showSimpleToast(`\u{1F4E5} \u6536\u5230 ${files.length} \u4E2A\u6587\u4EF6 (${fmtSize(totalBytes)}), \u4E0A\u4F20\u4E2D\u2026`);
+        }
+        const chipsEl = appendAttachmentChip(`\u23F3 \u4E0A\u4F20\u4E2D ${files.length} \u4E2A (${fmtSize(totalBytes)})\u2026`);
+        inputArea.classList.add("drop-target");
+        setTimeout(() => inputArea.classList.remove("drop-target"), 600);
+        for (const file of files) {
+          try {
+            const progressChip = document.createElement("span");
+            progressChip.style.cssText = "background:#fef3c7;color:#92400e;border:1px solid #fbbf24;border-radius:14px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;font-weight:500;animation:attach-pop-in 0.25s ease-out;";
+            progressChip.innerHTML = `\u23F3 <strong>${file.name}</strong> \u8BFB\u53D6\u4E2D\u2026`;
+            chipsEl.appendChild(progressChip);
+            const dataB64 = await fileToBase64Local(file);
+            progressChip.innerHTML = `\u23F3 <strong>${file.name}</strong> \u4E0A\u4F20\u4E2D (${fmtSize(file.size)})\u2026`;
+            const res = await fetch("/api/attachments/upload", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({
+                filename: file.name,
+                mimeType: file.type || "application/octet-stream",
+                content: dataB64
+              })
+            });
+            if (!res.ok) {
+              const errText = await res.text().catch(() => "");
+              throw new Error(`HTTP ${res.status}: ${errText}`);
+            }
+            const out = await res.json();
+            if (!out.ok) throw new Error(out.error || "upload failed");
+            pendingAttachments.push({
+              attachmentId: out.attachmentId,
+              filename: out.filename,
+              mimeType: out.mimeType,
+              size: out.size,
+              url: out.url
+            });
+            const prefix = input.value ? input.value + "\n" : "";
+            input.value = `${prefix}\u{1F4CE} ${out.filename}`;
+            input.focus();
+            progressChip.style.background = "linear-gradient(135deg,#dcfce7,#bbf7d0)";
+            progressChip.style.borderColor = "#16a34a";
+            progressChip.style.color = "#15803d";
+            progressChip.innerHTML = `\u2705 <strong>${out.filename}</strong> (${fmtSize(out.size)})`;
+            input.style.transition = "box-shadow 0.4s ease, transform 0.2s ease";
+            input.style.boxShadow = "0 0 0 3px #16a34a, 0 0 18px rgba(34,197,94,0.4)";
+            input.style.transform = "scale(1.005)";
+            setTimeout(() => {
+              input.style.boxShadow = "0 0 0 2px #16a34a";
+              input.style.transform = "";
+            }, 200);
+            setTimeout(() => {
+              input.style.boxShadow = "";
+            }, 1200);
+            if (typeof showSimpleToast === "function") {
+              showSimpleToast(`\u2705 \u9644\u4EF6 ${out.filename} (${fmtSize(out.size)}) \u5DF2\u4E0A\u4F20, \u7B49\u5F85\u53D1\u9001`);
+            }
+          } catch (err) {
+            console.error("[drag-file] \u4E0A\u4F20\u5931\u8D25:", err);
+            if (chipsEl) {
+              const failChip = document.createElement("span");
+              failChip.style.cssText = "background:#fee2e2;color:#b91c1c;border:1px solid #ef4444;border-radius:14px;padding:5px 12px;display:inline-flex;align-items:center;gap:6px;font-weight:500;animation:attach-pop-in 0.25s ease-out;";
+              failChip.innerHTML = `\u274C <strong>${file.name}</strong>: ${err?.message || "\u4E0A\u4F20\u5931\u8D25"}`;
+              chipsEl.appendChild(failChip);
+            }
+            if (typeof showSimpleToast === "function") {
+              showSimpleToast(`\u274C ${file.name} \u4E0A\u4F20\u5931\u8D25: ${err?.message || ""}`);
+            }
+          }
+        }
+        if (pendingAttachments.length > 0) {
+          const ready = document.createElement("span");
+          ready.style.cssText = "background:#f1f5f9;color:#0f172a;border:1px dashed #94a3b8;border-radius:12px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-style:italic;";
+          ready.innerHTML = `\u{1F4E8} \u5171 ${pendingAttachments.length} \u4E2A\u9644\u4EF6\u5F85\u53D1\u9001, \u6309 \u21A9 \u53D1\u9001`;
+          chipsEl.appendChild(ready);
+        }
+        return;
       }
     };
     inputArea.addEventListener("dragover", onDragOver);
     inputArea.addEventListener("dragleave", onDragLeave);
     inputArea.addEventListener("drop", onDrop);
+    let pageDragDepth = 0;
+    const onPageDragEnter = (e) => {
+      if (!e.dataTransfer) return;
+      const types = Array.from(e.dataTransfer.types || []);
+      if (types.includes("Files")) {
+        e.preventDefault();
+        pageDragDepth++;
+        const overlay = ensureFileDropOverlay();
+        overlay.style.display = "flex";
+        document.body.classList.add("file-drag-active");
+      }
+    };
+    const onPageDragOver = (e) => {
+      if (!e.dataTransfer) return;
+      const types = Array.from(e.dataTransfer.types || []);
+      if (types.includes("Files")) {
+        e.preventDefault();
+      }
+    };
+    const onPageDragLeave = (e) => {
+      if (!e.dataTransfer) return;
+      const types = Array.from(e.dataTransfer.types || []);
+      if (types.includes("Files")) {
+        pageDragDepth = Math.max(0, pageDragDepth - 1);
+        if (pageDragDepth === 0) {
+          const overlay = document.getElementById("file-drop-overlay");
+          if (overlay) overlay.style.display = "none";
+          document.body.classList.remove("file-drag-active");
+        }
+      }
+    };
+    window.addEventListener("dragenter", onPageDragEnter);
+    window.addEventListener("dragover", onPageDragOver);
+    window.addEventListener("dragleave", onPageDragLeave);
+    const onPageDrop = (e) => {
+      if (!e.dataTransfer) return;
+      const types = Array.from(e.dataTransfer.types || []);
+      if (types.includes("Files") && e.target !== input && !inputArea?.contains(e.target)) {
+        e.preventDefault();
+      }
+      if (types.includes("Files")) {
+        pageDragDepth = 0;
+        const overlay = document.getElementById("file-drop-overlay");
+        if (overlay) overlay.style.display = "none";
+        document.body.classList.remove("file-drag-active");
+      }
+    };
+    window.addEventListener("drop", onPageDrop);
   }
   if (themeToggle) {
     themeToggle.addEventListener("click", toggleTheme);