@yiarce/dsh-chat 0.0.0-stage → 0.1.1

package/page.js

@@ -0,0 +1,1819 @@
+import { ChatHistoryClient } from "./history-client.js";
+import { entryId } from "./history-model.js";
+import { createMediaClient } from "./media-client.js";
+import { mountChatContextMenu } from "./context-menu.js";
+
+/**
+ * @param {HTMLElement} root
+ * @param {{fetcher?: (url: string, init?: RequestInit) => Promise<{ok: boolean, status: number, json: () => Promise<any>}>, baseURL?: string, onMessage?: () => void, uploadImage?: (file: File, signal: AbortSignal, onProgress: (loaded: number, total: number) => void) => Promise<{url: string}>, loadStickerImage?: (url: string, signal: AbortSignal) => Promise<string>, searchStickers?: (keyword: string, signal: AbortSignal, page?: number) => Promise<{images: Array<{url: string, alt: string}>, hasMore: boolean}>}} options
+ * @returns {() => void}
+ */
+export function mountChat(root, { fetcher = window.fetch.bind(window), baseURL = new URL('api/yiarce-chat/page', document.baseURI).href, onMessage = () => {}, searchStickers = null, loadStickerImage = null, uploadImage = null } = {}) {
+const transport = (url, init) => fetcher(new URL(url, baseURL).href, init);
+const media = createMediaClient({ baseURL, fetcher });
+searchStickers ??= media.searchStickers;
+loadStickerImage ??= media.loadStickerImage;
+uploadImage ??= media.uploadImage;
+
+// ---------------------------------------------------------------------------
+// 极简 protobuf 编解码（只覆盖 proto/chat.proto 里用到的字段类型），
+// 不依赖任何 CDN，页面离线也能用。
+// ---------------------------------------------------------------------------
+const DEFS = {
+  clientFrame: { fields: [
+    { n: 1, name: 'joinRoom', t: 'msg:joinRoom' },
+    { n: 2, name: 'leaveRoom', t: 'msg:leaveRoom' },
+    { n: 3, name: 'roomChat', t: 'msg:roomChat' },
+    { n: 4, name: 'privateChat', t: 'msg:privateChat' },
+    { n: 5, name: 'ping', t: 'msg:ping' },
+  ]},
+  joinRoom: { fields: [{ n: 1, name: 'roomId', t: 'uint32' }] },
+  leaveRoom: { fields: [{ n: 1, name: 'roomId', t: 'uint32' }] },
+  roomChat: { fields: [
+    { n: 1, name: 'roomId', t: 'uint32' },
+    { n: 2, name: 'content', t: 'string' },
+    { n: 3, name: 'sticker', t: 'msg:sticker' },
+    { n: 4, name: 'clientMessageId', t: 'string' },
+  ]},
+  privateChat: { fields: [
+    { n: 1, name: 'toUserId', t: 'string' },
+    { n: 2, name: 'content', t: 'string' },
+    { n: 3, name: 'sticker', t: 'msg:sticker' },
+    { n: 4, name: 'clientMessageId', t: 'string' },
+  ]},
+  sticker: { fields: [
+    { n: 1, name: 'url', t: 'string' },
+    { n: 2, name: 'alt', t: 'string' },
+  ]},
+  ping: { fields: [] },
+
+  serverFrame: { fields: [
+    { n: 1, name: 'roomStat', t: 'msg:roomStat' },
+    { n: 2, name: 'message', t: 'msg:chatMessage' },
+    { n: 3, name: 'notice', t: 'msg:systemNotice' },
+    { n: 4, name: 'leaveResult', t: 'msg:leaveResult' },
+    { n: 5, name: 'pong', t: 'msg:pong' },
+    { n: 6, name: 'error', t: 'msg:chatError' },
+    { n: 7, name: 'self', t: 'msg:selfProfile' },
+  ]},
+  roomStat: { fields: [
+    { n: 1, name: 'roomId', t: 'uint32' },
+    { n: 2, name: 'messageCount', t: 'uint64' },
+    { n: 3, name: 'memberCount', t: 'uint32' },
+  ]},
+  chatMessage: { fields: [
+    { n: 1, name: 'seq', t: 'uint64' },
+    { n: 2, name: 'roomId', t: 'uint32' },
+    { n: 3, name: 'fromUserId', t: 'string' },
+    { n: 4, name: 'fromNickname', t: 'string' },
+    { n: 5, name: 'fromAvatar', t: 'string' },
+    { n: 6, name: 'toUserId', t: 'string' },
+    { n: 7, name: 'content', t: 'string' },
+    { n: 8, name: 'sentAtMs', t: 'int64' },
+    { n: 9, name: 'privateMsg', t: 'bool' },
+    { n: 10, name: 'sticker', t: 'msg:sticker' },
+    { n: 11, name: 'clientMessageId', t: 'string' },
+  ]},
+  systemNotice: { fields: [
+    { n: 1, name: 'roomId', t: 'uint32' },
+    { n: 2, name: 'text', t: 'string' },
+    { n: 3, name: 'sentAtMs', t: 'int64' },
+  ]},
+  leaveResult: { fields: [{ n: 1, name: 'roomId', t: 'uint32' }] },
+  pong: { fields: [] },
+  chatError: { fields: [
+    { n: 1, name: 'code', t: 'enum' },
+    { n: 2, name: 'message', t: 'string' },
+    { n: 3, name: 'clientMessageId', t: 'string' },
+  ]},
+  selfProfile: { fields: [
+    { n: 1, name: 'userId', t: 'string' },
+    { n: 2, name: 'nickname', t: 'string' },
+    { n: 3, name: 'avatar', t: 'string' },
+  ]},
+};
+
+const ENC = new TextEncoder();
+const DEC = new TextDecoder();
+
+function writeVarint(out, n) {
+  n = Math.floor(n);
+  if (n < 0) throw new Error('不支持负数 varint');
+  while (n > 127) {
+    out.push((n & 127) | 128);
+    n = Math.floor(n / 128);
+  }
+  out.push(n & 127);
+}
+
+function readVarint(b, p) {
+  let r = 0, m = 1;
+  for (;;) {
+    if (p >= b.length) throw new Error('varint 越界');
+    const x = b[p++];
+    r += (x & 127) * m;
+    if (x < 128) return [r, p];
+    m *= 128;
+    if (m > Number.MAX_SAFE_INTEGER) throw new Error('varint 超出安全整数范围');
+  }
+}
+
+function encodeMsg(name, obj) {
+  const def = DEFS[name];
+  if (!def) throw new Error('未知消息类型: ' + name);
+  if (def.oneof?.filter(key => obj[key] !== undefined && obj[key] !== null).length > 1) throw new Error('消息只能包含一种正文');
+  const out = [];
+  for (const f of def.fields) {
+    const v = obj[f.name];
+    if (v === undefined || v === null) continue;
+    if (f.t.startsWith('msg:')) {
+      const sub = encodeMsg(f.t.slice(4), v);
+      writeVarint(out, (f.n << 3) | 2);
+      writeVarint(out, sub.length);
+      for (const byte of sub) out.push(byte);
+    } else if (f.t === 'string') {
+      if (v === '') continue;
+      const bytes = ENC.encode(v);
+      writeVarint(out, (f.n << 3) | 2);
+      writeVarint(out, bytes.length);
+      for (const byte of bytes) out.push(byte);
+    } else if (f.t === 'bool') {
+      if (!v) continue;
+      writeVarint(out, (f.n << 3) | 0);
+      out.push(1);
+    } else {
+      if (v === 0) continue;
+      writeVarint(out, (f.n << 3) | 0);
+      writeVarint(out, v);
+    }
+  }
+  return new Uint8Array(out);
+}
+
+function decodeMsg(name, bytes) {
+  const def = DEFS[name];
+  if (!def) throw new Error('未知消息类型: ' + name);
+  const obj = {};
+  let p = 0;
+  while (p < bytes.length) {
+    let key;
+    [key, p] = readVarint(bytes, p);
+    const num = Math.floor(key / 8);
+    const wire = key % 8;
+    const f = def.fields.find((x) => x.n === num);
+    if (wire === 0) {
+      let v;
+      [v, p] = readVarint(bytes, p);
+      if (f) obj[f.name] = f.t === 'bool' ? v !== 0 : v;
+    } else if (wire === 2) {
+      let len;
+      [len, p] = readVarint(bytes, p);
+      const chunk = bytes.subarray(p, p + len);
+      p += len;
+      if (!f) continue;
+      if (def.oneof?.includes(f.name)) for (const key of def.oneof) delete obj[key];
+      if (f.t === 'string') obj[f.name] = DEC.decode(chunk);
+      else if (f.t.startsWith('msg:')) obj[f.name] = decodeMsg(f.t.slice(4), chunk);
+    } else if (wire === 5) {
+      p += 4;
+    } else if (wire === 1) {
+      p += 8;
+    } else {
+      throw new Error('不支持的 wire type: ' + wire);
+    }
+  }
+  return obj;
+}
+
+
+const $ = id => root.querySelector('[id="' + id + '"]');
+const contextEntries = new WeakMap();
+const hiddenLocalMessages = new Set();
+const deletedEntryKeys = new Set();
+const CONTROL_PREFIX = '\u2063yiarce-chat:';
+const contacts = new Map();
+const friendRequests = new Map();
+const localImageURLs = new Set();
+const state = { ws: null, me: null, rooms: new Set(), opened: false, sessions: new Map(), active: 'room:1', pendingRoom: null };
+const ERROR_NAMES = ['未知错误', '请求无效', '尚未加入房间', '对方不在线', '服务器繁忙'];
+let connected = false;
+let lastUserID = null;
+let lastProfile = null;
+let feedbackTimer;
+let connectionTimer;
+let historyEpoch = 0;
+const sessionRevisions = new Map();
+const recordStore = new ChatHistoryClient({ baseURL, onEvent: applyHistoryEvent, onError: historyError });
+const make = (tag, cls, text) => { const el = document.createElement(tag); if (cls) el.className = cls; if (text !== undefined) el.textContent = text; return el; };
+const timeStr = ms => ms ? new Date(Number(ms)).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false }) : '';
+function session(kind, id, name, avatar = '') {
+  const key = kind + ':' + id;
+  if (kind === 'room' && Number(id) === 1) name = '广场';
+  if (!state.sessions.has(key)) state.sessions.set(key, { key, kind, id, name: name || (kind === 'room' ? id + ' 号房' : id), avatar, entries: [], loaded: false, loading: null, loadVersion: 0, displayFloor: 0, clearedRevision: -1, detachedEntries: new Map(), messageCount: 0, localNew: true, unread: 0, draft: '', draftSticker: null, draftVersion: 0, preview: '', updated: 0, count: null, members: null });
+  const item = state.sessions.get(key);
+  if (name) item.name = name;
+  if (avatar) item.avatar = avatar;
+  return item;
+}
+function current() { return state.sessions.get(state.active); }
+function contactOf(id) { return contacts.get(String(id))?.relation || null; }
+function isFriend(id) { return contactOf(id) === 'friend'; }
+function isBlocked(id) { return contactOf(id) === 'blocked'; }
+function requestOf(id, direction, status) { return [...friendRequests.values()].find(value => value.peerId === String(id) && (!direction || value.direction === direction) && (!status || value.status === status)); }
+function controlMessage(type, fields = {}) { return CONTROL_PREFIX + JSON.stringify({ plugin: 'yiarce-chat', type, ...fields }); }
+function parseControl(message) {
+  if (typeof message?.content !== 'string' || !message.content.startsWith(CONTROL_PREFIX)) return null;
+  try { const value = JSON.parse(message.content.slice(CONTROL_PREFIX.length)); return value?.plugin === 'yiarce-chat' && typeof value.type === 'string' ? value : null; } catch { return null; }
+}
+function setContactLocal(userId, relation, profile = {}) {
+  const id = String(userId); if (!id || id === String(state.me?.id || lastUserID)) return;
+  if (relation === 'none') contacts.delete(id); else contacts.set(id, { userId: id, nickname: profile.nickname || contacts.get(id)?.nickname || '', avatar: profile.avatar || contacts.get(id)?.avatar || '', relation });
+  renderSessions(); renderHeader();
+}
+function setRequestLocal(value) { if (value?.requestId) friendRequests.set(value.requestId, { ...value, peerId: String(value.peerId) }); }
+async function saveContact(id, relation, profile = {}) { setContactLocal(id, relation, profile); await recordStore.contact(id, relation, profile); }
+async function saveRequest(value) { setRequestLocal(value); await recordStore.requestFriend(value); }
+function sendControl(peerId, type, fields = {}) {
+  if (!connected || !state.ws || isBlocked(peerId)) return false;
+  return sendClientFrame({ privateChat: { toUserId: String(peerId), clientMessageId: crypto.randomUUID(), content: controlMessage(type, { ...fields, toUserId: String(peerId) }) } });
+}
+function addRequestCard(request) {
+  const item = session('private', request.peerId, request.nickname, request.avatar);
+  const existing = item.entries.find(entry => entry.friendRequest?.requestId === request.requestId);
+  if (existing) existing.friendRequest = request;
+  else addEntry(item, { id: 'request:' + request.requestId, friendRequest: request, message: { fromUserId: request.peerId, fromNickname: request.nickname, fromAvatar: request.avatar, sentAtMs: request.created }, sendStatus: 'sent' });
+  if (current() === item) renderMessages(); renderSessions();
+}
+async function handleControlMessage(message, control) {
+  const mine = String(message.fromUserId) === String(state.me?.id || lastUserID);
+  const peerId = mine ? String(message.toUserId) : String(message.fromUserId);
+  if (!peerId || isBlocked(peerId)) return;
+  const profile = { nickname: message.fromNickname || peerId, avatar: message.fromAvatar || '' };
+  const base = { requestId: String(control.requestId || ''), peerId, nickname: profile.nickname, avatar: profile.avatar, created: Number(control.createdAt) || Date.now() };
+  if (control.type === 'friend-request' && !mine) {
+    if (!base.requestId || isFriend(peerId)) return;
+    const request = { ...base, direction: 'incoming', status: 'pending' }; await saveRequest(request); addRequestCard(request); return;
+  }
+  if (control.type === 'friend-accept' && !mine) { const request = requestOf(peerId, 'outgoing'); if (request) { request.status = 'accepted'; await saveRequest(request); await saveContact(peerId, 'friend', profile); } return; }
+  if (control.type === 'friend-reject' && !mine) { const request = requestOf(peerId, 'outgoing'); if (request) { request.status = 'rejected'; await saveRequest(request); } return; }
+  if (control.type === 'friend-release' && !mine) { const request = requestOf(peerId, 'outgoing', 'rejected'); if (request) { request.status = 'released'; await saveRequest(request); } }
+}
+async function handleRequestAction(request, action) {
+  if (action === 'accept') { await saveRequest({ ...request, status: 'accepted' }); await saveContact(request.peerId, 'friend', request); sendControl(request.peerId, 'friend-accept', { requestId: request.requestId }); }
+  else if (action === 'reject') { await saveRequest({ ...request, status: 'rejected' }); sendControl(request.peerId, 'friend-reject', { requestId: request.requestId }); }
+  else if (action === 'release') { await saveRequest({ ...request, status: 'released' }); sendControl(request.peerId, 'friend-release', { requestId: request.requestId }); }
+  addRequestCard({ ...request, status: action === 'accept' ? 'accepted' : action === 'reject' ? 'rejected' : 'released' });
+}
+
+function avatarFor(item, mine = false) {
+  const el = make('span', 'yc-avatar' + (item.kind === 'room' ? ' yc-room-avatar' : ''));
+  if (item.kind === 'room') {
+    el.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="3"/><path d="M3 20v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6M21 20v-2a6 6 0 0 0-4-5.65"/></svg>';
+  } else {
+    el.textContent = Array.from(item.name || '?')[0];
+  }
+  if (item.kind !== 'room' && item.avatar) {
+    try {
+      const url = new URL(item.avatar);
+      if (url.protocol === 'https:') {
+        const image = make('img'); image.src = url.href; image.alt = ''; image.referrerPolicy = 'no-referrer';
+        image.onerror = () => { image.remove(); el.textContent = Array.from(item.name || '?')[0]; };
+        el.replaceChildren(image);
+      }
+    } catch {}
+  }
+  if (mine) el.classList.add('yc-my-avatar');
+  return el;
+}
+function renderProfile() {
+  const profile = state.me || lastProfile;
+  $('myName').textContent = profile?.nickname || '未登录';
+  $('myName').title = profile ? '用户 ID: ' + profile.id : '';
+  $('myAvatar').replaceChildren(avatarFor({ name: profile?.nickname || '我', avatar: profile?.avatar }, true));
+}
+function renderSessions() {
+  const filter = $('search').value.trim().toLowerCase();
+  const items = [...state.sessions.values()].sort((a, b) => b.updated - a.updated);
+  $('sessionCount').textContent = String(items.length);
+  const fragment = document.createDocumentFragment();
+  for (const item of items) {
+    if (filter && !(item.name + ' ' + item.id).toLowerCase().includes(filter)) continue;
+    const button = make('button', 'yc-session' + (item.key === state.active ? ' is-active' : ''));
+    button.type = 'button'; button.setAttribute('aria-current', item.key === state.active ? 'true' : 'false');
+    button.dataset.sessionKey = item.key;
+    const info = make('span', 'yc-session-info');
+    const top = make('span', 'yc-session-top'); top.append(make('strong', '', item.name), make('time', '', timeStr(item.updated)));
+    const bottom = make('span', 'yc-session-bottom');
+    bottom.append(make('span', 'yc-preview', item.preview || (item.kind === 'room' ? state.rooms.has(Number(item.id)) ? '已加入房间' : '连接后加入聊天' : '发起一段新的对话')));
+    if (item.unread) bottom.append(make('b', 'yc-unread', item.unread > 99 ? '99+' : String(item.unread)));
+    info.append(top, bottom); button.append(avatarFor(item), info);
+    button.onclick = () => selectSession(item.key); fragment.append(button);
+  }
+  if (!fragment.childNodes.length) fragment.append(make('p', 'yc-list-empty', '没有找到会话'));
+  $('sessions').replaceChildren(fragment);
+}
+// Overlay scrollbar: its visibility never changes the message viewport width.
+const messageViewport = $('messageViewport');
+const messageScrollArea = make('div', 'yc-message-scroll-area');
+const messageScroll = make('div', 'yc-message-scroll');
+const messageScrollThumb = make('div', 'yc-message-scroll-thumb');
+messageScroll.hidden = true; messageScroll.tabIndex = 0;
+messageScroll.setAttribute('role', 'scrollbar');
+messageScroll.setAttribute('aria-label', '滚动聊天记录');
+messageScroll.setAttribute('aria-orientation', 'vertical');
+messageScroll.setAttribute('aria-controls', 'messageViewport');
+messageScroll.setAttribute('aria-valuemin', '0');
+messageScroll.append(messageScrollThumb);
+messageViewport.before(messageScrollArea); messageScrollArea.append(messageViewport, messageScroll);
+const messageScrollLife = new AbortController();
+let messageScrollDrag = null;
+let messageScrollFrame = null;
+function endMessageScrollDrag() {
+  const drag = messageScrollDrag; messageScrollDrag = null;
+  if (drag && messageScroll.hasPointerCapture(drag.id)) messageScroll.releasePointerCapture(drag.id);
+  messageScroll.classList.remove('is-dragging');
+}
+function syncMessageScroll() {
+  messageScrollFrame = null;
+  if (!alive) return;
+  const max = Math.max(0, messageViewport.scrollHeight - messageViewport.clientHeight);
+  messageScroll.hidden = max < 1 || messageViewport.clientHeight < 1;
+  if (messageScroll.hidden) { endMessageScrollDrag(); return; }
+  const height = messageScroll.clientHeight;
+  const thumbHeight = Math.min(height, Math.max(28, height * messageViewport.clientHeight / messageViewport.scrollHeight));
+  const progress = Math.max(0, Math.min(1, messageViewport.scrollTop / max));
+  messageScrollThumb.style.height = thumbHeight + 'px';
+  messageScrollThumb.style.transform = 'translateY(' + progress * (height - thumbHeight) + 'px)';
+  messageScroll.setAttribute('aria-valuemax', String(Math.round(max)));
+  messageScroll.setAttribute('aria-valuenow', String(Math.round(progress * max)));
+}
+function scheduleMessageScroll() {
+  if (messageScrollFrame === null) messageScrollFrame = requestAnimationFrame(syncMessageScroll);
+}
+messageScroll.addEventListener('pointerdown', event => {
+  if (event.button !== 0) return;
+  const max = messageViewport.scrollHeight - messageViewport.clientHeight;
+  const thumb = messageScrollThumb.getBoundingClientRect();
+  const travel = messageScroll.clientHeight - thumb.height;
+  if (max <= 0 || travel <= 0) return;
+  event.preventDefault(); messageScroll.focus({ preventScroll: true });
+  if (event.clientY < thumb.top || event.clientY > thumb.bottom) {
+    const y = event.clientY - messageScroll.getBoundingClientRect().top - thumb.height / 2;
+    messageViewport.scrollTop = Math.max(0, Math.min(1, y / travel)) * max;
+    scheduleMessageScroll();
+  }
+  messageScrollDrag = { id: event.pointerId, y: event.clientY, scroll: messageViewport.scrollTop };
+  messageScroll.setPointerCapture(event.pointerId); messageScroll.classList.add('is-dragging');
+}, { signal: messageScrollLife.signal });
+messageScroll.addEventListener('pointermove', event => {
+  if (!messageScrollDrag || messageScrollDrag.id !== event.pointerId) return;
+  const max = messageViewport.scrollHeight - messageViewport.clientHeight;
+  const travel = messageScroll.clientHeight - messageScrollThumb.offsetHeight;
+  if (travel > 0) messageViewport.scrollTop = messageScrollDrag.scroll + (event.clientY - messageScrollDrag.y) / travel * max;
+  scheduleMessageScroll();
+}, { signal: messageScrollLife.signal });
+for (const type of ['pointerup', 'pointercancel', 'lostpointercapture']) {
+  messageScroll.addEventListener(type, endMessageScrollDrag, { signal: messageScrollLife.signal });
+}
+messageScroll.addEventListener('keydown', event => {
+  if (event.ctrlKey || event.altKey || event.metaKey) return;
+  const max = messageViewport.scrollHeight - messageViewport.clientHeight;
+  const steps = { ArrowUp: -40, ArrowDown: 40, PageUp: -messageViewport.clientHeight * 0.85, PageDown: messageViewport.clientHeight * 0.85 };
+  if (event.key in steps) messageViewport.scrollTop += steps[event.key];
+  else if (event.key === 'Home') messageViewport.scrollTop = 0;
+  else if (event.key === 'End') messageViewport.scrollTop = max;
+  else return;
+  event.preventDefault(); event.stopPropagation(); scheduleMessageScroll();
+}, { signal: messageScrollLife.signal });
+messageScroll.addEventListener('wheel', event => {
+  if (event.ctrlKey || !event.deltaY) return;
+  event.preventDefault();
+  const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? messageViewport.clientHeight : 1;
+  messageViewport.scrollTop += event.deltaY * unit; scheduleMessageScroll();
+}, { passive: false, signal: messageScrollLife.signal });
+messageViewport.addEventListener('scroll', scheduleMessageScroll, { passive: true, signal: messageScrollLife.signal });
+const messageScrollResize = new ResizeObserver(scheduleMessageScroll);
+for (const element of [messageViewport, $('messages')]) messageScrollResize.observe(element);
+
+// Shared bounded image cache/queue for candidates and message bubbles.
+function messageImageURL(value) {
+  if (typeof value !== 'string') return null;
+  try {
+    const url = new URL(value);
+    if (!['http:', 'https:'].includes(url.protocol) || !url.hostname || url.username || url.password || url.href.length > 2048) return null;
+    return url.href;
+  } catch {}
+  return null;
+}
+
+function createStickerMedia() {
+  const controller = new AbortController();
+  const cache = new Map();
+  const jobs = new Map();
+  const queue = [];
+  let active = 0;
+  let bytes = 0;
+  const pump = () => {
+    while (!controller.signal.aborted && active < 3 && queue.length) {
+      const job = queue.shift();
+      ++active;
+      Promise.resolve().then(() => loadStickerImage(job.url, controller.signal)).then(data => {
+        if (controller.signal.aborted) throw new Error('cancelled');
+        if (typeof data !== 'string' || !/^data:image\/(jpeg|png|gif|webp);base64,/.test(data)) throw new Error('图片数据无效');
+        cache.set(job.url, data); bytes += data.length;
+        while (cache.size > 24 || bytes > 16 * 1024 * 1024) {
+          const key = cache.keys().next().value;
+          bytes -= cache.get(key).length; cache.delete(key);
+        }
+        job.resolve(data);
+      }).catch(job.reject).finally(() => { jobs.delete(job.url); --active; pump(); });
+    }
+  };
+  return {
+    get(url, signal) {
+      if (!loadStickerImage || !messageImageURL(url)) return Promise.reject(new Error('图片地址或加载通道无效'));
+      if (signal.aborted || controller.signal.aborted) return Promise.reject(new Error('cancelled'));
+      let promise;
+      if (cache.has(url)) {
+        const data = cache.get(url); cache.delete(url); cache.set(url, data);
+        promise = Promise.resolve(data);
+      } else {
+        promise = jobs.get(url);
+        if (!promise) {
+          promise = new Promise((resolve, reject) => queue.push({ url, resolve, reject }));
+          jobs.set(url, promise); pump();
+        }
+      }
+      return new Promise((resolve, reject) => {
+        const abort = () => { signal.removeEventListener('abort', abort); reject(new Error('cancelled')); };
+        signal.addEventListener('abort', abort, { once: true });
+        promise.then(resolve, reject).finally(() => signal.removeEventListener('abort', abort));
+      });
+    },
+    evict(url) {
+      const data = cache.get(url);
+      if (data) { bytes -= data.length; cache.delete(url); }
+    },
+    dispose() {
+      controller.abort();
+      for (const job of queue.splice(0)) job.reject(new Error('cancelled'));
+      cache.clear(); jobs.clear(); bytes = 0;
+    },
+  };
+}
+let stickerMedia = createStickerMedia();
+let messageImages = new WeakMap();
+const messageImageObserver = new IntersectionObserver(entries => {
+  for (const entry of entries) {
+    if (!entry.isIntersecting) continue;
+    messageImageObserver.unobserve(entry.target);
+    messageImages.get(entry.target)?.();
+  }
+}, { root: $('messageViewport'), rootMargin: '150px 0px' });
+const messageMediaController = new AbortController();
+function stickerMessageNode(sticker, localURL = null) {
+  const box = make('div', 'yc-message-sticker');
+  const url = messageImageURL(sticker.url);
+  box.setAttribute('role', 'group');
+  box.setAttribute('aria-label', '聊天图片');
+  const image = make('img'); image.alt = ''; image.decoding = 'async'; image.referrerPolicy = 'no-referrer';
+  const retry = make('button', 'yc-sticker-retry', '图片加载失败 · 点击重试');
+  retry.type = 'button'; retry.hidden = true;
+  box.append(image, retry);
+  let loading = false;
+  const failed = () => {
+    loading = false; box.classList.remove('is-loaded'); box.setAttribute('aria-busy', 'false');
+    image.removeAttribute('src'); retry.hidden = false;
+  };
+  image.onload = () => {
+    const ratio = image.naturalWidth / image.naturalHeight;
+    if (Number.isFinite(ratio) && ratio > 0) {
+      box.style.aspectRatio = String(ratio);
+      box.style.width = Math.min(220, 220 * ratio) + 'px';
+    }
+    loading = false; box.classList.add('is-loaded'); box.setAttribute('aria-busy', 'false');
+  };
+  image.onerror = () => { stickerMedia.evict(url); failed(); };
+  const load = async () => {
+    if (loading || !alive || messageMediaController.signal.aborted) return;
+    loading = true; retry.hidden = true; box.setAttribute('aria-busy', 'true');
+    try {
+      if (!localURL && !url) throw new Error('图片地址无效');
+      const data = localURL && localImageURLs.has(localURL) ? localURL : loadStickerImage ? await stickerMedia.get(url, messageMediaController.signal) : url;
+      if (!alive || !box.isConnected) { loading = false; return; }
+      image.src = data;
+    } catch {
+      if (alive && box.isConnected) failed();
+    }
+  };
+  retry.onclick = load;
+  messageImages.set(box, load); messageImageObserver.observe(box);
+  return box;
+}
+function resetMessageImages() {
+  messageImageObserver.disconnect(); messageImages = new WeakMap();
+}
+
+// Local files stay in drafts until the user sends the message.
+const composerToolbar = make('div', 'yc-composer-toolbar');
+composerToolbar.setAttribute('role', 'group');
+composerToolbar.setAttribute('aria-label', '聊天工具');
+const emojiButton = make('button', 'yc-composer-tool');
+emojiButton.type = 'button';
+emojiButton.setAttribute('aria-label', '选择 Emoji');
+emojiButton.setAttribute('aria-expanded', 'false');
+emojiButton.title = '表情';
+emojiButton.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 14a4.5 4.5 0 0 0 8 0"/><circle cx="9" cy="9" r=".8" fill="currentColor" stroke="none"/><circle cx="15" cy="9" r=".8" fill="currentColor" stroke="none"/></svg>';
+const imageUploadButton = make('button', 'yc-composer-tool yc-upload-image');
+imageUploadButton.type = 'button'; imageUploadButton.hidden = !uploadImage;
+imageUploadButton.setAttribute('aria-label', '上传本地图片');
+imageUploadButton.title = '上传 JPG、PNG、GIF、WebP 图片，单张最大 7MB';
+imageUploadButton.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8" cy="8" r="1.5"/><path d="m3 17 5-5 4 4 4-6 5 7"/></svg>';
+const imageUploadInput = make('input');
+imageUploadInput.type = 'file'; imageUploadInput.accept = 'image/jpeg,image/png,image/gif,image/webp'; imageUploadInput.hidden = true;
+composerToolbar.append(emojiButton, imageUploadButton);
+$('messageInput').before(composerToolbar);
+$('composer').append(imageUploadInput);
+imageUploadButton.onclick = () => { if (!imageUploadButton.disabled) imageUploadInput.click(); };
+imageUploadInput.onchange = () => {
+  const file = imageUploadInput.files?.[0]; imageUploadInput.value = '';
+  stageDraftImage(file);
+};
+function releaseLocalURL(url) {
+  if (localImageURLs.delete(url)) URL.revokeObjectURL(url);
+}
+function releaseEntryImage(entry) {
+  if (entry.localImage) {
+    releaseLocalURL(entry.localImage.url); entry.localImage = null;
+  }
+  entry.uploadNode = null; entry.statusNode = null;
+}
+function releaseAllLocalImages() {
+  for (const url of localImageURLs) URL.revokeObjectURL(url);
+  localImageURLs.clear();
+}
+function stageDraftImage(file) {
+  const item = current();
+  if (!file || !uploadImage || !item || composerInput.disabled) return;
+  const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+  if (!allowed.includes(file.type) && (file.type || !/\.(jpe?g|png|gif|webp)$/i.test(file.name))) { log('仅支持 JPG、PNG、GIF、WebP 图片', 'err'); return; }
+  if (!file.size || file.size > 7 * 1024 * 1024) { log('请选择不超过 7MB 的图片', 'err'); return; }
+  const url = URL.createObjectURL(file); localImageURLs.add(url);
+  releaseLocalURL(item.draftSticker?.url);
+  item.draftSticker = { url, file }; ++item.draftVersion;
+  closeEmoji(); closeStickers(); syncComposer(); composerInput.focus();
+}
+
+// The attachment and textarea share the same composer editing area.
+const composerEditor = make('div', 'yc-composer-editor');
+const draftStickerPreview = make('div', 'yc-draft-sticker');
+draftStickerPreview.hidden = true;
+draftStickerPreview.setAttribute('role', 'group');
+draftStickerPreview.setAttribute('aria-label', '待发送图片');
+const draftStickerImage = make('img');
+draftStickerImage.alt = ''; draftStickerImage.decoding = 'async'; draftStickerImage.referrerPolicy = 'no-referrer';
+const removeDraftSticker = make('button', 'yc-draft-sticker-remove', '×');
+removeDraftSticker.type = 'button'; removeDraftSticker.title = '移除图片'; removeDraftSticker.setAttribute('aria-label', '移除待发送图片');
+const retryDraftSticker = make('button', 'yc-draft-sticker-retry', '重试');
+retryDraftSticker.type = 'button'; retryDraftSticker.hidden = true; retryDraftSticker.setAttribute('aria-label', '重新加载待发送图片');
+draftStickerPreview.append(draftStickerImage, retryDraftSticker, removeDraftSticker);
+const composerInput = $('messageInput');
+composerInput.before(composerEditor); composerEditor.append(draftStickerPreview, composerInput);
+// Basic Unicode emoji: no network requests or image stickers.
+const emojiGroups = [
+  { name: '笑脸', items: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👻 💀 👽 🤖 💩' },
+  { name: '手势与爱心', items: '👋 🤚 🖐️ ✋ 🖖 👌 🤏 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 👇 ☝️ 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 👐 🤲 🤝 🙏 💪 🫶 ❤️ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💔 ❣️ 💕 💞 💓 💗 💖 💘 💝 💯 💢 💥 💫 💦 💤' },
+  { name: '动物与自然', items: '🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐨 🐯 🦁 🐮 🐷 🐸 🐵 🐔 🐧 🐦 🐤 🦆 🦉 🦋 🐝 🐞 🐢 🐍 🐙 🦑 🦀 🐬 🐳 🦈 🐊 🐘 🦒 🦌 🐕 🐈 🐇 🌵 🎄 🌲 🌳 🌴 🌱 🌿 🍀 🍁 🍂 🌸 🌼 🌻 🌹 🌷 🌺 🌈 ☀️ 🌤️ ☁️ 🌧️ ⛈️ ❄️ 🌙 ⭐ 🌟 🔥 💧' },
+  { name: '食物', items: '🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥝 🍅 🥑 🥦 🥕 🌽 🥔 🍠 🥐 🍞 🥖 🥨 🧀 🥚 🍳 🥓 🥩 🍗 🍔 🍟 🍕 🌭 🥪 🌮 🌯 🍜 🍲 🍛 🍣 🍱 🥟 🍙 🍚 🍢 🍡 🍦 🍨 🍩 🍪 🎂 🍰 🧁 🍫 🍬 🍭 🍮 🍯 🥛 ☕ 🍵 🧋 🧃 🍺 🍻 🥂 🍷' },
+  { name: '活动与物品', items: '⚽ 🏀 🏈 ⚾ 🎾 🏐 🏓 🏸 🥊 🎯 🎮 🎲 🧩 🎨 🎤 🎧 🎸 🎹 🎺 🏆 🥇 🎉 🎊 🎈 🎁 🎀 🧸 🚗 🚕 🚌 🚓 🚑 🚒 🚲 ✈️ 🚀 🚁 🚢 🚂 🏠 🏢 🏥 🏫 🏖️ 🏕️ 🗻 📱 💻 ⌨️ 🖥️ 📷 💡 🔦 📚 📖 ✏️ 📝 💌 📦 🔑 🔒 🔔 ✅ ❌ ❓ ❗ 💬' },
+].map(group => ({ ...group, items: group.items.split(' ') }));
+const knownEmoji = new Set(emojiGroups.flatMap(group => group.items));
+let recentEmoji = [];
+try {
+  const saved = JSON.parse(localStorage.getItem('yc-recent-emoji') || '[]');
+  if (Array.isArray(saved)) recentEmoji = [...new Set(saved.filter(value => knownEmoji.has(value)))].slice(0, 22);
+} catch { /* Storage may be unavailable in embedded views. */ }
+const emojiLife = new AbortController();
+const emojiPanel = make('section', 'yc-emoji-panel');
+emojiPanel.hidden = true; emojiPanel.setAttribute('aria-label', 'Emoji 表情');
+const emojiBody = make('div', 'yc-emoji-body');
+const emojiTabs = make('div', 'yc-emoji-tabs');
+emojiTabs.setAttribute('role', 'group'); emojiTabs.setAttribute('aria-label', '表情分类');
+emojiPanel.append(emojiBody, emojiTabs); composerToolbar.append(emojiPanel);
+function closeEmoji() {
+  emojiPanel.hidden = true; emojiButton.setAttribute('aria-expanded', 'false');
+}
+function insertEmoji(value) {
+  if (composerInput.disabled || composing) return;
+  const start = composerInput.selectionStart, end = composerInput.selectionEnd;
+  const next = composerInput.value.slice(0, start) + value + composerInput.value.slice(end);
+  if (next.length > composerInput.maxLength || Array.from(next.trim()).length > 1000) {
+    log('消息最多 1000 字', 'err'); return;
+  }
+  composerInput.setRangeText(value, start, end, 'end');
+  composerInput.dispatchEvent(new Event('input', { bubbles: true }));
+  composerInput.focus();
+  recentEmoji = [value, ...recentEmoji.filter(item => item !== value)].slice(0, 22);
+  try { localStorage.setItem('yc-recent-emoji', JSON.stringify(recentEmoji)); } catch { /* Optional history. */ }
+}
+function renderEmoji() {
+  emojiBody.replaceChildren();
+  const addGroup = (name, items) => {
+    if (!items.length) return;
+    emojiBody.append(make('div', 'yc-emoji-heading', name));
+    const grid = make('div', 'yc-emoji-grid');
+    for (const value of items) {
+      const button = make('button', 'yc-emoji-item', value);
+      button.type = 'button'; button.setAttribute('aria-label', value);
+      button.onclick = () => insertEmoji(value); grid.append(button);
+    }
+    emojiBody.append(grid);
+  };
+  addGroup('最近表情', recentEmoji);
+  addGroup('全部表情', [...knownEmoji]);
+  emojiBody.scrollTop = 0;
+}
+const emojiTab = make('button', 'yc-emoji-tab');
+emojiTab.type = 'button'; emojiTab.title = 'Emoji';
+emojiTab.setAttribute('aria-label', 'Emoji');
+emojiTab.setAttribute('aria-pressed', 'true');
+emojiTab.innerHTML = emojiButton.innerHTML;
+emojiTab.onclick = renderEmoji;
+emojiTabs.append(emojiTab);
+// Keep the textarea selection while choosing with the mouse.
+emojiPanel.addEventListener('mousedown', event => {
+  if (event.target.closest('button')) event.preventDefault();
+}, { signal: emojiLife.signal });
+emojiButton.onclick = () => {
+  if (!emojiPanel.hidden) { closeEmoji(); return; }
+  closeStickers(); renderEmoji(); emojiPanel.hidden = false;
+  emojiButton.setAttribute('aria-expanded', 'true');
+};
+document.addEventListener('pointerdown', event => {
+  if (!emojiPanel.contains(event.target) && !emojiButton.contains(event.target)) closeEmoji();
+}, { signal: emojiLife.signal });
+emojiPanel.addEventListener('keydown', event => {
+  if (event.key === 'Escape') { event.stopPropagation(); closeEmoji(); emojiButton.focus(); }
+}, { signal: emojiLife.signal });
+
+let draftStickerKey = '';
+let draftStickerController = null;
+function syncDraftSticker() {
+  const item = current();
+  const url = item?.draftSticker?.url;
+  const key = url ? item.key + ':' + url : '';
+  composerEditor.classList.toggle('has-sticker', Boolean(url));
+  if (key === draftStickerKey) return;
+  draftStickerKey = key;
+  draftStickerController?.abort(); draftStickerController = null;
+  draftStickerImage.onload = draftStickerImage.onerror = null;
+  draftStickerImage.removeAttribute('src');
+  draftStickerPreview.classList.remove('is-loaded'); retryDraftSticker.hidden = true;
+  draftStickerPreview.hidden = !url;
+  draftStickerPreview.setAttribute('aria-busy', 'false');
+  if (!url) return;
+  const load = async () => {
+    draftStickerController?.abort();
+    const controller = draftStickerController = new AbortController();
+    const valid = () => alive && !controller.signal.aborted && draftStickerKey === key;
+    retryDraftSticker.hidden = true; draftStickerPreview.setAttribute('aria-busy', 'true');
+    const failed = () => {
+      if (!valid()) return;
+      stickerMedia.evict(url); draftStickerPreview.classList.remove('is-loaded');
+      draftStickerPreview.setAttribute('aria-busy', 'false'); retryDraftSticker.hidden = false;
+    };
+    draftStickerImage.onload = () => {
+      if (!valid()) return;
+      draftStickerPreview.classList.add('is-loaded'); draftStickerPreview.setAttribute('aria-busy', 'false');
+    };
+    draftStickerImage.onerror = failed;
+    try {
+      const data = localImageURLs.has(url) ? url : loadStickerImage ? await stickerMedia.get(url, controller.signal) : url;
+      if (valid()) draftStickerImage.src = data;
+    } catch { failed(); }
+  };
+  retryDraftSticker.onclick = load;
+  void load();
+}
+removeDraftSticker.onclick = () => {
+  const item = current();
+  if (!item?.draftSticker) return;
+  releaseLocalURL(item.draftSticker.url);
+  item.draftSticker = null; ++item.draftVersion;
+  syncComposer(); scheduleStickers();
+  if (!composerInput.disabled) composerInput.focus();
+};
+
+// Search candidates
+const stickerPanel = make('section', 'yc-sticker-panel');
+stickerPanel.hidden = true;
+stickerPanel.setAttribute('aria-label', '表情搜索候选');
+const stickerStatus = make('div', 'yc-sticker-status');
+stickerStatus.setAttribute('role', 'status');
+const stickerList = make('div', 'yc-sticker-list');
+stickerList.setAttribute('role', 'listbox');
+stickerList.setAttribute('aria-label', '表情候选，左右键选择');
+stickerList.tabIndex = 0;
+const stickerId = 'yc-stickers-' + crypto.randomUUID();
+stickerList.id = stickerId;
+const stickerScroll = make('div', 'yc-sticker-scroll');
+const stickerThumb = make('div', 'yc-sticker-thumb');
+stickerScroll.hidden = true;
+stickerScroll.tabIndex = 0;
+stickerScroll.setAttribute('role', 'scrollbar');
+stickerScroll.setAttribute('aria-label', '横向浏览表情');
+stickerScroll.setAttribute('aria-orientation', 'horizontal');
+stickerScroll.setAttribute('aria-controls', stickerId);
+stickerScroll.setAttribute('aria-valuemin', '0');
+stickerScroll.append(stickerThumb);
+let stickerSelected = -1;
+let stickerKeyword = '';
+stickerPanel.append(stickerStatus, stickerList, stickerScroll);
+if (searchStickers) $('composer').prepend(stickerPanel);
+let stickerTimer;
+let stickerRequest;
+let stickerObserver;
+let stickerObserveImages;
+let stickerNextPage = 2;
+let stickerMoreLoading = false;
+let stickerHasMore = false;
+let stickerFailedIndex = -1;
+const stickerSeen = new Set();
+let stickerGeneration = 0;
+let composing = false;
+let stickerDrag = null;
+function closeStickers() {
+  clearTimeout(stickerTimer);
+  stickerObserver?.disconnect(); stickerObserver = null;
+  stickerObserveImages = null;
+  stickerNextPage = 2;
+  stickerMoreLoading = false;
+  stickerHasMore = false;
+  stickerFailedIndex = -1;
+  stickerSeen.clear();
+  stickerRequest?.abort(); stickerRequest = null;
+  ++stickerGeneration;
+  endStickerDrag();
+  stickerScroll.hidden = true;
+  stickerPanel.hidden = true;
+  stickerList.replaceChildren();
+  stickerSelected = -1;
+  stickerKeyword = '';
+  stickerList.removeAttribute('aria-activedescendant');
+}
+function syncStickerScroll() {
+  const max = Math.max(0, stickerList.scrollWidth - stickerList.clientWidth);
+  stickerScroll.hidden = stickerPanel.hidden || max < 1;
+  if (stickerScroll.hidden) return;
+  const width = stickerScroll.clientWidth;
+  const thumb = Math.min(width, Math.max(30, width * stickerList.clientWidth / stickerList.scrollWidth));
+  const progress = Math.max(0, Math.min(1, stickerList.scrollLeft / max));
+  stickerThumb.style.width = thumb + 'px';
+  stickerThumb.style.transform = 'translateX(' + progress * (width - thumb) + 'px)';
+  stickerScroll.setAttribute('aria-valuemax', String(Math.round(max)));
+  stickerScroll.setAttribute('aria-valuenow', String(Math.round(progress * max)));
+}
+function endStickerDrag() {
+  const drag = stickerDrag;
+  stickerDrag = null;
+  if (drag && stickerScroll.hasPointerCapture(drag.id)) stickerScroll.releasePointerCapture(drag.id);
+  stickerScroll.classList.remove('is-dragging');
+}
+stickerScroll.addEventListener('pointerdown', event => {
+  if (event.button !== 0) return;
+  event.preventDefault();
+  stickerScroll.focus({ preventScroll: true });
+  const thumb = stickerThumb.getBoundingClientRect();
+  const max = stickerList.scrollWidth - stickerList.clientWidth;
+  const travel = stickerScroll.clientWidth - thumb.width;
+  if (max <= 0 || travel <= 0) return;
+  if (event.clientX < thumb.left || event.clientX > thumb.right) {
+    const x = event.clientX - stickerScroll.getBoundingClientRect().left - thumb.width / 2;
+    stickerList.scrollLeft = Math.max(0, Math.min(1, x / travel)) * max;
+    syncStickerScroll();
+  }
+  stickerDrag = { id: event.pointerId, x: event.clientX, scroll: stickerList.scrollLeft };
+  stickerScroll.setPointerCapture(event.pointerId);
+  stickerScroll.classList.add('is-dragging');
+});
+stickerScroll.addEventListener('pointermove', event => {
+  if (!stickerDrag || stickerDrag.id !== event.pointerId) return;
+  const travel = stickerScroll.clientWidth - stickerThumb.offsetWidth;
+  const max = stickerList.scrollWidth - stickerList.clientWidth;
+  if (travel > 0) stickerList.scrollLeft = stickerDrag.scroll + (event.clientX - stickerDrag.x) / travel * max;
+  syncStickerScroll();
+});
+for (const type of ['pointerup', 'pointercancel', 'lostpointercapture']) stickerScroll.addEventListener(type, endStickerDrag);
+stickerScroll.addEventListener('keydown', event => {
+  const max = stickerList.scrollWidth - stickerList.clientWidth;
+  const steps = { ArrowLeft: -104, ArrowRight: 104, PageUp: -stickerList.clientWidth, PageDown: stickerList.clientWidth };
+  if (event.key in steps) stickerList.scrollLeft += steps[event.key];
+  else if (event.key === 'Home') stickerList.scrollLeft = 0;
+  else if (event.key === 'End') stickerList.scrollLeft = max;
+  else return;
+  event.preventDefault(); event.stopPropagation(); syncStickerScroll();
+});
+stickerList.addEventListener('scroll', syncStickerScroll, { passive: true });
+const stickerResize = new ResizeObserver(syncStickerScroll);
+stickerResize.observe(stickerList);
+
+function selectSticker(index, reveal = false) {
+  const cards = stickerList.children;
+  if (!cards.length) return;
+  stickerSelected = Math.max(0, Math.min(index, cards.length - 1));
+  for (let i = 0; i < cards.length; ++i) {
+    const selected = i === stickerSelected;
+    cards[i].classList.toggle('is-selected', selected);
+    cards[i].setAttribute('aria-selected', String(selected));
+  }
+  const card = cards[stickerSelected];
+  stickerList.setAttribute('aria-activedescendant', card.id);
+  prefetchStickerPage();
+  stickerStatus.textContent = stickerKeyword + ' · ' + (stickerSelected + 1) + ' / ' + cards.length + ' · ← → 选择 · Esc 关闭';
+  if (reveal) {
+    const bounds = stickerList.getBoundingClientRect();
+    const target = card.getBoundingClientRect();
+    if (target.left < bounds.left) stickerList.scrollLeft += target.left - bounds.left;
+    else if (target.right > bounds.right) stickerList.scrollLeft += target.right - bounds.right;
+  }
+}
+function stickerKey(event) {
+  if (composing || event.isComposing || event.keyCode === 229 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey || stickerPanel.hidden) return false;
+  if (event.key === 'Escape') {
+    event.preventDefault(); event.stopPropagation(); closeStickers();
+    $('messageInput').focus(); return true;
+  }
+  if (!stickerList.children.length) return false;
+  if (event.key === 'Enter') {
+    event.preventDefault(); event.stopPropagation(); insertSelectedSticker(); return true;
+  }
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return false;
+  event.preventDefault(); event.stopPropagation();
+  selectSticker(stickerSelected + (event.key === 'ArrowRight' ? 1 : -1), true);
+  return true;
+}
+stickerList.addEventListener('keydown', stickerKey);
+
+function loadVisibleStickerImages(controller, generation) {
+  const queue = [];
+  let active = 0;
+  const current = () => alive && !controller.signal.aborted && generation === stickerGeneration;
+  const pump = () => {
+    while (current() && active < 3 && queue.length) {
+      const image = queue.shift();
+      ++active;
+      Promise.resolve().then(() => stickerMedia.get(image.dataset.remoteUrl, controller.signal)).then(dataURL => {
+        if (!current()) return;
+        if (typeof dataURL !== 'string' || !/^data:image\/(jpeg|png|gif|webp);base64,/.test(dataURL)) throw new Error('图片数据无效');
+        image.src = dataURL;
+        delete image.dataset.remoteUrl;
+      }).catch(() => {
+        if (!current()) return;
+        image.classList.remove('is-loaded');
+      }).finally(() => { --active; pump(); });
+    }
+  };
+  stickerObserver = new IntersectionObserver(entries => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+      stickerObserver?.unobserve(entry.target);
+      queue.push(entry.target);
+    }
+    pump();
+  }, { root: stickerList, rootMargin: '0px 100px' });
+  stickerObserveImages = () => {
+    for (const image of stickerList.querySelectorAll('img[data-remote-url]')) {
+      if (image.dataset.observed) continue;
+      image.dataset.observed = 'true';
+      stickerObserver.observe(image);
+    }
+  };
+  stickerObserveImages();
+}
+
+function appendStickerImages(images) {
+  const fragment = document.createDocumentFragment();
+  for (const item of images) {
+    const normalized = messageImageURL(item.url);
+    if (!normalized) continue;
+    const url = new URL(normalized);
+    if (stickerSeen.has(url.href)) continue;
+    stickerSeen.add(url.href);
+    const card = make('div', 'yc-sticker-card');
+    const index = stickerList.children.length + fragment.childNodes.length;
+    card.id = stickerId + '-' + index;
+    card.setAttribute('role', 'option');
+    card.setAttribute('aria-selected', 'false');
+    card.setAttribute('aria-label', typeof item.alt === 'string' && item.alt ? item.alt : '表情 ' + (index + 1));
+    card.onmouseenter = () => selectSticker(index);
+    card.onmousedown = event => event.preventDefault();
+    card.dataset.stickerUrl = url.href;
+    card.onclick = () => { selectSticker(index, true); insertSelectedSticker(); };
+    const image = make('img');
+    image.alt = '';
+    image.onload = () => { image.classList.add('is-loaded'); };
+
+    image.referrerPolicy = 'no-referrer';
+    image.loading = 'lazy'; image.decoding = 'async';
+    image.onerror = () => { stickerMedia.evict(url.href); image.classList.remove('is-loaded'); };
+    if (loadStickerImage) image.dataset.remoteUrl = url.href;
+    else image.src = url.href;
+    card.append(image); fragment.append(card);
+  }
+  const count = fragment.childNodes.length;
+  stickerList.append(fragment);
+  stickerObserveImages?.();
+  return count;
+}
+
+async function prefetchStickerPage() {
+  if (!stickerHasMore || stickerMoreLoading || !stickerRequest || stickerRequest.signal.aborted || stickerSelected < 0 || stickerFailedIndex === stickerSelected) return;
+  if (stickerList.children.length - stickerSelected - 1 > 10) return;
+  const generation = stickerGeneration;
+  const controller = stickerRequest;
+  const page = stickerNextPage;
+  stickerMoreLoading = true;
+  try {
+    const result = await searchStickers(stickerKeyword, controller.signal, page);
+    if (!alive || controller.signal.aborted || generation !== stickerGeneration) return;
+    if (!result || !Array.isArray(result.images) || typeof result.hasMore !== 'boolean') throw new Error('无法读取下一页表情');
+    const added = appendStickerImages(result.images);
+    stickerNextPage = page + 1;
+    stickerHasMore = result.hasMore && added > 0;
+    stickerFailedIndex = -1;
+    syncStickerScroll();
+    stickerStatus.textContent = '已加载 ' + stickerList.children.length + ' 张表情';
+  } catch (error) {
+    if (!alive || controller.signal.aborted || generation !== stickerGeneration) return;
+    stickerFailedIndex = stickerSelected;
+    log('下一页表情加载失败，切换选中图片可重试', 'err');
+  } finally {
+    if (generation === stickerGeneration) stickerMoreLoading = false;
+  }
+}
+
+function scheduleStickers() {
+  closeStickers();
+  const keyword = $('messageInput').value.trim();
+  const keywordLength = Array.from(keyword).length;
+  if (!emojiPanel.hidden || !searchStickers || composing || current()?.draftSticker || $('messageInput').disabled || keywordLength < 2 || keywordLength > 4) return;
+  const generation = stickerGeneration;
+  const sessionKey = state.active;
+  stickerTimer = setTimeout(async () => {
+    const controller = stickerRequest = new AbortController();
+    stickerStatus.textContent = '正在搜索表情…';
+    try {
+      const result = await searchStickers(keyword, controller.signal);
+      if (!alive || generation !== stickerGeneration || sessionKey !== state.active) return;
+      if (!result || !Array.isArray(result.images) || typeof result.hasMore !== 'boolean') throw new Error('无法读取表情搜索结果');
+      const count = appendStickerImages(result.images);
+      // Reveal only after valid candidate cards exist, so the panel opens at full height.
+      stickerPanel.hidden = count === 0;
+      stickerList.scrollLeft = 0;
+      syncStickerScroll();
+      if (loadStickerImage) loadVisibleStickerImages(controller, generation);
+      stickerKeyword = keyword;
+      stickerHasMore = result.hasMore && count > 0;
+      if (count) selectSticker(0);
+      else stickerStatus.textContent = '没有找到相关表情';
+    } catch (error) {
+      if (!alive || generation !== stickerGeneration || controller.signal.aborted) return;
+      stickerStatus.textContent = error.message || '表情搜索暂不可用';
+    }
+  }, 350);
+}
+
+// Preserve existing text nodes when composer state changes without new text.
+function syncComposerText(id, text) {
+  const node = $(id);
+  if (node.textContent !== text) node.textContent = text;
+}
+function syncComposer() {
+  const item = current();
+  const available = connected && state.me && recordStore.ready && item?.loaded && (item.kind === 'private' || state.rooms.has(Number(item.id)));
+  $('messageInput').disabled = !available;
+  emojiButton.disabled = !available;
+  if (!available) closeEmoji();
+  $('btnSend').disabled = !available || (!$('messageInput').value.trim() && !item?.draftSticker);
+  syncComposerText('charCount', Array.from($('messageInput').value).length + ' / 1000');
+  imageUploadButton.disabled = !available;
+  syncDraftSticker();
+}
+function renderHeader() {
+  const item = current();
+  const members = item?.kind === 'room' && connected && state.rooms.has(Number(item.id)) ? item.members : null;
+  $('conversationTitle').textContent = item?.kind === 'room' ? item.name + '(' + (members ?? '—') + ')' : item?.name || '选择一个会话';
+  $('conversationMeta').textContent = item?.kind === 'private' ? 'ID: ' + item.id : '';
+  $('conversationMeta').hidden = item?.kind !== 'private';
+  syncComposer();
+}
+function scrollLatest() {
+  const box = $('messageViewport'); box.scrollTop = box.scrollHeight; $('btnLatest').hidden = true;
+}
+function nearBottom() { const box = $('messageViewport'); return box.scrollHeight - box.scrollTop - box.clientHeight < 80; }
+function messageNode(entry) {
+  if (entry.friendRequest) {
+    const card = make('article', 'yc-friend-request-card');
+    card.append(make('strong', '', entry.friendRequest.direction === 'incoming' ? '好友申请' : entry.friendRequest.status === 'accepted' ? '已成为好友' : entry.friendRequest.status === 'rejected' ? '申请已拒绝' : '好友申请中'));
+    card.append(make('p', '', entry.friendRequest.nickname + ' 请求添加你为好友'));
+    if (entry.friendRequest.direction === 'incoming' && entry.friendRequest.status === 'pending') {
+      const actions = make('div', 'yc-friend-request-actions');
+      for (const [label, action] of [['同意','accept'],['拒绝','reject'],['稍后处理',null]]) { const button = make('button', '', label); button.type = 'button'; if (action) button.onclick = () => void handleRequestAction(entry.friendRequest, action).catch(error => log(error.message || '操作失败', 'err')); actions.append(button); }
+      card.append(actions);
+    }
+    return card;
+  }
+  if (entry.system) return make('p', 'yc-system-message', entry.text);
+  const m = entry.message;
+  const attachment = m.sticker || (entry.localImage ? { url: entry.localImage.url } : null);
+  const mine = m.fromUserId === (state.me?.id || lastUserID);
+  const row = make('article', 'yc-message' + (mine ? ' is-mine' : ''));
+  const identity = { name: m.fromNickname || m.fromUserId || '用户', avatar: m.fromAvatar };
+  const person = make('button', 'yc-message-avatar'); person.type = 'button'; person.title = mine ? '我' : '私聊 ' + identity.name;
+  person.setAttribute('aria-label', person.title); person.append(avatarFor(identity));
+  person.onclick = () => { if (!mine) { const peer = session('private', m.fromUserId, identity.name, m.fromAvatar); selectSession(peer.key); } };
+  const content = make('div', 'yc-message-content');
+  const meta = make('div', 'yc-message-meta'); meta.append(make('span', '', mine ? '我' : identity.name), make('time', '', timeStr(m.sentAtMs)));
+  const bubble = make('div', 'yc-bubble' + (attachment ? ' yc-sticker-bubble' : ''), attachment ? undefined : entry.imagePending ? (entry.sendStatus === 'uploading' ? '图片上传中…' : '图片上传未完成') + (m.content ? '\n' + m.content : '') : (m.content || ''));
+  if (attachment) {
+    const picture = stickerMessageNode(attachment, entry.localImage?.url);
+    if (entry.localImage) {
+      const overlay = make('div', 'yc-image-upload');
+      overlay.setAttribute('role', 'progressbar');
+      overlay.setAttribute('aria-label', '图片上传进度');
+      overlay.setAttribute('aria-valuemin', '0'); overlay.setAttribute('aria-valuemax', '100');
+      overlay.innerHTML = '<span class="yc-image-upload-ring" aria-hidden="true"><svg viewBox="0 0 40 40"><circle class="yc-image-upload-track" cx="20" cy="20" r="17"/><circle class="yc-image-upload-fill" cx="20" cy="20" r="17" pathLength="100"/></svg></span><span class="yc-image-upload-text"></span>';
+      entry.uploadNode = overlay; picture.append(overlay);
+    }
+    bubble.append(picture);
+    if (m.content) bubble.append(make('div', 'yc-sticker-caption', m.content));
+  }
+  if (mine) {
+    const status = make('span', 'yc-message-send-status');
+    status.setAttribute('role', 'status');
+    entry.statusNode = status;
+    syncMessageStatus(entry);
+    bubble.append(status);
+  }
+  content.append(meta, bubble);
+  entry.rowNode = row;
+  contextEntries.set(row, entry);
+  row.append(person, content); return row;
+}
+function renderMessages(force = false) {
+  const box = $('messageViewport'); const top = box.scrollTop;
+  const bottom = force || nearBottom();
+  const item = current();
+  const entries = item?.entries || [];
+  resetMessageImages();
+  for (const row of $('messages').children) { const entry = contextEntries.get(row); if (entry) detachMessageRow(entry); }
+  $('messages').replaceChildren(...entries.map(messageNode));
+  if (bottom) scrollLatest(); else box.scrollTop = top;
+}
+function selectSession(key) {
+  contextActions.close(); closeEmoji(); closeStickers();
+  const previous = current();
+  if (previous) { previous.draft = $('messageInput').value; recordStore.draft(previous.key, previous.draft); void recordStore.flushDraft(previous.key).catch(historyError); }
+  state.active = key;
+  const item = current(); if (!item) return;
+  item.unread = 0; $('messageInput').value = item.draft;
+  renderSessions(); renderHeader(); renderMessages(true);
+  if (recordStore.ready) {
+    if (item.localNew) void recordStore.session(item).catch(historyError);
+    void recordStore.read(key).catch(historyError);
+    void loadSessionMessages(item);
+  }
+  if (!$('messageInput').disabled) $('messageInput').focus();
+}
+function detachMessageRow(entry) {
+  for (const image of entry.rowNode?.querySelectorAll('.yc-message-sticker') || []) messageImageObserver.unobserve(image);
+  entry.rowNode = null; entry.statusNode = null; entry.uploadNode = null;
+}
+function addEntry(item, entry) {
+  entry.id ||= entryId(entry.message);
+  if (item.entries.some(value => value.id === entry.id)) return;
+  const bottom = nearBottom(), active = item.key === state.active;
+  item.entries.push(entry); item.messageCount = Math.max(item.messageCount, item.entries.length);
+  const excess = Math.max(0, item.entries.length - 1000);
+  const anchor = active && excess ? $('messages').children[excess] : null;
+  const anchorTop = anchor?.getBoundingClientRect().top;
+  for (let i = 0; i < excess; i++) {
+    const oldest = item.entries.shift(); oldest.evicted = true;
+    item.displayFloor = Math.max(item.displayFloor, oldest.order || 0);
+    const row = oldest.rowNode; detachMessageRow(oldest); row?.remove();
+    const job = pendingSends.get(oldest.message?.clientMessageId);
+    if (job?.entry === oldest) item.detachedEntries.set(oldest.id, oldest);
+    // A display eviction must not cancel an upload or a sent message's acknowledgement.
+    if (job?.entry !== oldest) releaseEntryImage(oldest);
+  }
+  if (active) {
+    $('messages').append(messageNode(entry));
+    if (bottom) scrollLatest();
+    else if (anchor?.isConnected) messageViewport.scrollTop += anchor.getBoundingClientRect().top - anchorTop;
+  }
+}
+function log(text, cls) {
+  if (!alive) return;
+  $('feedback').textContent = text; $('feedback').hidden = false;
+  $('feedback').classList.toggle('is-error', cls === 'err');
+  clearTimeout(feedbackTimer); feedbackTimer = setTimeout(() => { if (alive) $('feedback').hidden = true; }, 6000);
+}
+function setStatus(text, ok) {
+  $('status').textContent = text; $('status').title = text;
+  $('presenceDot').classList.toggle('is-online', Boolean(ok));
+}
+function refreshRooms() { renderSessions(); renderHeader(); }
+function setConnected(on) {
+  connected = on;
+  if (!on) {
+    if (clearPendingSends()) log('连接已断开，消息未确认发送，请重试', 'err');
+    closeStickers();
+  }
+  $('btnConnect').disabled = on;
+  $('btnQuit').disabled = !on;
+  $('btnRelogin').disabled = on || !loginReady;
+  $('loginBox').hidden = true;
+  renderProfile(); refreshRooms();
+}
+function sendClientFrame(obj) {
+  if (!state.ws || state.ws.readyState !== WebSocket.OPEN) { log('尚未连接，请先连接聊天服务', 'err'); return false; }
+  try { state.ws.send(encodeMsg('clientFrame', obj)); return true; }
+  catch { log('消息发送失败，请重试', 'err'); return false; }
+}
+async function renderMessage(m) {
+  const control = m.privateMsg ? parseControl(m) : null;
+  if (control) { await handleControlMessage(m, control); return; }
+  if (m.clientMessageId && hiddenLocalMessages.has(m.fromUserId + ":" + m.clientMessageId)) return;
+  const mine = m.fromUserId === (state.me?.id || lastUserID);
+  if (m.privateMsg && !mine && !isFriend(m.fromUserId)) return;
+  if (!m.privateMsg && !mine && isBlocked(m.fromUserId)) return;
+  const item = m.privateMsg ? session('private', mine ? m.toUserId : m.fromUserId, mine ? undefined : m.fromNickname, mine ? '' : m.fromAvatar) : session('room', m.roomId);
+  const epoch = historyEpoch, atBottom = nearBottom();
+  const read = item.key === state.active && !document.hidden && document.hasFocus();
+  try {
+    const result = await recordStore.put(item, { id: entryId(m), message: m, sendStatus: 'sent' }, { read });
+    if (!alive || epoch !== historyEpoch || result.ignored) return;
+    const confirmed = mine && confirmPendingSend(m, item);
+    if (!confirmed && result.entry) mergeStoredEntry(item, result.entry);
+    if (result.session) applyStoredSession(result.session, result.revision);
+    if (!mine) {
+      onMessage();
+      if (item.key === state.active && !atBottom) $('btnLatest').hidden = false;
+      if (read) void recordStore.read(item.key).catch(historyError);
+    }
+    renderSessions();
+    if (mine && item.key === state.active) scrollLatest();
+  } catch (error) {
+    historyError(error);
+    if (alive && epoch === historyEpoch && !mine && item.loaded) addEntry(item, { id: entryId(m), message: m, sendStatus: 'sent' });
+  }
+}
+async function handleFrame(f) {
+  if (f.self) {
+    const nextAccount = JSON.stringify([state.serverKey, String(f.self.userId)]);
+    if (recordStore.account && recordStore.account !== nextAccount || lastUserID && lastUserID !== f.self.userId) {
+      clearPendingSends(); releaseAllLocalImages(); stickerMedia.dispose(); stickerMedia = createStickerMedia();
+      recordStore.close(); sessionRevisions.clear(); hiddenLocalMessages.clear(); deletedEntryKeys.clear(); contacts.clear(); friendRequests.clear(); ++historyEpoch;
+      state.sessions.clear(); state.active = 'room:1'; $('messageInput').value = ''; session('room', 1);
+    }
+    lastUserID = f.self.userId;
+    state.me = { id: f.self.userId, nickname: f.self.nickname, avatar: f.self.avatar };
+    lastProfile = state.me;
+    try {
+      await recordStore.open(f.self.userId, state.serverKey);
+      if (!alive || state.me?.id !== f.self.userId) return;
+      await loadSessionMessages(current());
+    } catch (error) { historyError(error); }
+    renderProfile(); renderSessions(); renderHeader(); renderMessages(true); setStatus('已连接', true); return;
+  }
+  if (f.roomStat) {
+    const info = f.roomStat; state.rooms.add(info.roomId);
+    const item = session('room', info.roomId); item.count = info.messageCount || 0; item.members = info.memberCount || 0;
+    if (state.pendingRoom === info.roomId) { state.pendingRoom = null; selectSession(item.key); }
+    if (recordStore.ready && item.localNew) void recordStore.session(item).catch(historyError);
+    refreshRooms(); return;
+  }
+  if (f.message) { await renderMessage(f.message); return; }
+  // Room notices (joins/leaves) are temporarily hidden to avoid noisy timelines.
+  if (f.notice) return;
+  if (f.leaveResult) {
+    state.rooms.delete(f.leaveResult.roomId);
+    for (const job of pendingSends.values()) {
+      if (job.item.key === 'room:' + f.leaveResult.roomId) failPendingSend(job.id, '已退出房间，消息未发送');
+    }
+    refreshRooms(); return;
+  }
+  if (f.error) {
+    failPendingSend(f.error.clientMessageId, (ERROR_NAMES[f.error.code] || '发送失败') + ': ' + f.error.message);
+    state.pendingRoom = null; log((ERROR_NAMES[f.error.code] || '发送失败') + ': ' + f.error.message, 'err');
+  }
+}
+const pendingSends = new Map();
+function syncMessageStatus(entry) {
+  const overlay = entry.uploadNode;
+  if (overlay) {
+    const uploading = entry.sendStatus === 'uploading';
+    overlay.hidden = !uploading;
+    const percent = Math.max(0, Math.min(100, entry.uploadPercent || 0));
+    overlay.classList.toggle('is-processing', percent >= 100);
+    overlay.style.setProperty('--upload-progress', String(percent));
+    overlay.setAttribute('aria-valuenow', String(percent));
+    const text = percent >= 100 ? '处理中…' : '上传中 ' + percent + '%';
+    overlay.setAttribute('aria-valuetext', text);
+    const label = overlay.querySelector('.yc-image-upload-text');
+    if (label.textContent !== text) label.textContent = text;
+  }
+  const status = entry.statusNode;
+  if (!status) return;
+  const sending = entry.sendStatus === 'sending';
+  const failed = entry.sendStatus === 'failed';
+  status.hidden = !sending && !failed;
+  status.classList.toggle('is-sending', sending);
+  status.classList.toggle('is-failed', failed);
+  status.textContent = failed ? '!' : '';
+  status.title = failed ? entry.sendError || '发送失败' : sending ? '发送中' : '';
+  status.setAttribute('aria-label', status.title);
+}
+function failPendingSend(id, reason = '发送失败') {
+  const job = pendingSends.get(id);
+  if (!job) return false;
+  pendingSends.delete(id); clearTimeout(job.timer); job.controller?.abort();
+  job.entry.sendStatus = 'failed'; job.entry.sendError = reason;
+  if (job.entry.localImage) job.entry.localImage.file = null;
+  syncMessageStatus(job.entry);
+  void persistEntry(job.item, job.entry).finally(() => {
+    if (job.entry.evicted) {
+      job.item.displayFloor = Math.max(job.item.displayFloor, job.entry.order || 0);
+      job.item.detachedEntries.delete(job.entry.id);
+    }
+  });
+  if (job.entry.evicted) releaseEntryImage(job.entry);
+  return true;
+}
+function clearPendingSends() {
+  const hadPending = pendingSends.size > 0;
+  for (const id of pendingSends.keys()) failPendingSend(id, '连接已断开，消息发送未完成');
+  return hadPending;
+}
+function confirmPendingSend(message, item) {
+  if (!message.clientMessageId) return false;
+  // Also reconcile a late confirmation after a timeout or disconnect.
+  const job = pendingSends.get(message.clientMessageId);
+  const entry = job?.item === item ? job.entry : item.detachedEntries.get(entryId(message)) || item.entries.find(entry => entry.message?.clientMessageId === message.clientMessageId);
+  if (!entry) return false;
+  if (job?.item === item) {
+    pendingSends.delete(message.clientMessageId); clearTimeout(job.timer);
+  }
+  entry.message = message; entry.sendStatus = 'sent'; entry.imagePending = false;
+  syncMessageStatus(entry);
+  if (entry.statusNode) {
+    const time = entry.statusNode.closest('.yc-message-content')?.querySelector('time');
+    if (time) time.textContent = timeStr(message.sentAtMs);
+  }
+  if (entry.evicted) { releaseEntryImage(entry); item.detachedEntries.delete(entry.id); }
+  return true;
+}
+function insertSelectedSticker() {
+  const card = stickerList.children[stickerSelected];
+  const item = current();
+  if (!card || stickerPanel.hidden || !item || composing || composerInput.disabled) return;
+  const url = messageImageURL(card.dataset.stickerUrl);
+  if (!url) { log('图片地址无效', 'err'); return; }
+  releaseLocalURL(item.draftSticker?.url);
+  item.draftSticker = { url };
+  // The current 2–4 character input is the search query, not the caption.
+  item.draft = ''; ++item.draftVersion; composerInput.value = '';
+  recordStore.draft(item.key, item.draft);
+  closeStickers(); syncComposer(); composerInput.focus();
+}
+
+function canFinishSend(job) {
+  return alive && connected && state.ws === job.ws && (state.me?.id || lastUserID) === job.owner &&
+    pendingSends.get(job.id) === job && state.sessions.get(job.item.key) === job.item && !job.entry.removed &&
+    (job.item.kind === 'private' || state.rooms.has(Number(job.item.id)));
+}
+async function sendPreparedMessage(job) {
+  if (!canFinishSend(job)) { failPendingSend(job.id, '会话或连接已变化，消息未发送'); return; }
+  const { item, entry, id } = job;
+  const message = entry.message;
+  if (message.sticker && !messageImageURL(message.sticker.url)) { failPendingSend(id, "图片尚未上传完成"); return; }
+  const body = { clientMessageId: id, content: message.content, ...(message.sticker ? { sticker: message.sticker } : {}) };
+  entry.sendStatus = 'sending'; entry.imagePending = false; syncMessageStatus(entry);
+  if (!await persistEntry(item, entry)) { failPendingSend(id, '记录保存失败，消息未发送'); return; }
+  if (!canFinishSend(job)) return;
+  const frame = item.kind === 'room' ? { roomChat: { roomId: Number(item.id), ...body } } : { privateChat: { toUserId: String(item.id), ...body } };
+  if (!sendClientFrame(frame)) { failPendingSend(id); return; }
+  // The acknowledgement deadline begins after the upload has finished.
+  job.timer = setTimeout(() => failPendingSend(id, '未收到发送确认，请检查连接'), 15000);
+}
+async function uploadMessageImage(job) {
+  const file = job.entry.localImage.file;
+  try {
+    const result = await uploadImage(file, job.controller.signal, (loaded, total) => {
+      if (pendingSends.get(job.id) !== job || job.controller.signal.aborted || total <= 0) return;
+      job.entry.uploadPercent = Math.max(job.entry.uploadPercent || 0, Math.floor(Math.min(1, loaded / total) * 100));
+      syncMessageStatus(job.entry);
+    });
+    if (job.controller.signal.aborted || pendingSends.get(job.id) !== job) return;
+    const url = messageImageURL(result?.url);
+    if (!url) throw new Error('图床返回的图片地址无效');
+    job.entry.message.sticker = { url };
+    job.entry.localImage.file = null;
+    await sendPreparedMessage(job);
+  } catch (error) {
+    if (pendingSends.get(job.id) !== job) return;
+    failPendingSend(job.id, error.message === 'transport' ? '图片上传连接中断或超时' : error.message || '图片上传失败');
+  }
+}
+function sendMessage() {
+  if (!connected || composing || !recordStore.ready || !current()?.loaded) return;
+  const item = current(); const content = $('messageInput').value.trim();
+  const sticker = item?.draftSticker;
+  if (!item || (!sticker && !content)) return;
+  if (Array.from(content).length > 1000) { log('消息最多 1000 字', 'err'); return; }
+  const local = Boolean(sticker?.file && localImageURLs.has(sticker.url));
+  const attachmentURL = sticker ? local ? sticker.url : messageImageURL(sticker.url) : null;
+  if (sticker && !attachmentURL) { log('图片地址无效', 'err'); return; }
+  if (item.kind === 'room' && !state.rooms.has(Number(item.id))) { log('请先加入当前房间', 'err'); return; }
+  const id = crypto.randomUUID();
+  const entry = { message: {
+    clientMessageId: id, content, ...(attachmentURL ? { sticker: { url: attachmentURL } } : {}),
+    fromUserId: state.me?.id || lastUserID,
+    fromNickname: state.me?.nickname || lastProfile?.nickname,
+    fromAvatar: state.me?.avatar || lastProfile?.avatar,
+    sentAtMs: Date.now(), privateMsg: item.kind === 'private',
+    ...(item.kind === 'room' ? { roomId: Number(item.id) } : { toUserId: String(item.id) }),
+  }, sendStatus: local ? 'uploading' : 'sending', uploadPercent: 0,
+    imagePending: local, localImage: local ? { url: sticker.url, file: sticker.file } : null };
+  entry.id = entryId(entry.message);
+  if (item.kind === 'private' && !isFriend(item.id)) {
+    entry.sendStatus = 'failed'; entry.sendError = isBlocked(item.id) ? '已屏蔽该用户' : '对方不是好友，消息未发送';
+    item.draft = ''; item.draftSticker = null; $('messageInput').value = ''; syncComposer(); addEntry(item, entry); void persistEntry(item, entry); renderMessages(); return;
+  }
+  const job = { id, item, entry, timer: null, controller: local ? new AbortController() : null, ws: state.ws, owner: state.me?.id || lastUserID };
+  pendingSends.set(id, job);
+  // Transfer ownership of the local preview from the draft into this message.
+  item.draft = ''; item.draftSticker = null; item.draftBarrier = id; ++item.draftVersion;
+  $('messageInput').value = ''; closeEmoji(); closeStickers(); syncComposer();
+  item.preview = '我: ' + (attachmentURL ? '[图片]' + (content ? ' ' + content : '') : content);
+  item.updated = entry.message.sentAtMs;
+  addEntry(item, entry); renderSessions(); scrollLatest();
+  recordStore.cancelDraft(item.key);
+  void beginStoredSend(job, local);
+  if (!$('messageInput').disabled) $('messageInput').focus();
+}
+
+let alive = true;
+let busy = false;
+let loginEndpoint = './login';
+let credentialEndpoint = './login';
+let usingAccount = false;
+let loginReady = false;
+let pollTimer;
+let ownedAttempt;
+let authGeneration = 0;
+const life = new AbortController();
+const AUTH_ERRORS = {
+  'auth-expired': '登录已过期，请重新扫码',
+  storage: '读取或保存登录信息失败，请重试',
+  network: '账号服务连接失败，请重试',
+  business: '账号服务暂时不可用',
+  'invalid-response': '账号服务响应异常',
+  transport: '无法连接 DSH，请稍后重试',
+};
+async function loginRequest(endpoint, action, data = {}) {
+  const response = await transport(endpoint, {
+    method: action ? 'POST' : 'GET', credentials: 'same-origin', cache: 'no-store',
+    ...(action ? { headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, ...data }) } : {}),
+    signal: AbortSignal.any([life.signal, AbortSignal.timeout(20000)]),
+  });
+  if (!response.ok) {
+    let data;
+    try { data = await response.json(); } catch {}
+    const error = new Error(data?.error || 'transport');
+    error.status = response.status;
+    throw error;
+  }
+  return response.json();
+}
+function showLoginError(error) {
+  if (!alive) return;
+  const text = AUTH_ERRORS[error.message] || '操作失败，请稍后重试';
+  setStatus(text, false); log(text, 'err');
+  if (!$('loginBox').hidden) $('loginHint').textContent = text;
+}
+function showLogin(view) {
+  $('loginBox').hidden = false;
+  const attempt = view?.attempt;
+  const qr = typeof attempt?.qrcode === 'string' && /^data:image\/png;base64,[A-Za-z0-9+/=\r\n]+$/.test(attempt.qrcode) ? attempt.qrcode : '';
+  $('qr').hidden = !qr;
+  if (qr) $('qr').src = qr; else $('qr').removeAttribute('src');
+  $('loginHint').textContent = attempt?.phase === 'scanned' ? '扫码成功，请在微信中确认' : attempt?.phase === 'expired' ? '二维码已过期，请重新获取' : attempt?.phase === 'loading' ? '正在获取二维码…' : '请使用微信扫码登录';
+  $('btnLogin').textContent = attempt ? '刷新二维码' : '扫码登录';
+  if (attempt?.error || view?.error) showLoginError(new Error(attempt?.error || view.error));
+}
+async function getCredential() { return loginRequest(credentialEndpoint, 'credential'); }
+async function cancelOwnedAttempt() {
+  clearTimeout(pollTimer);
+  const id = ownedAttempt; ownedAttempt = null;
+  if (id) { try { await loginRequest(loginEndpoint, 'cancel', { id }); } catch {} }
+}
+async function discover() {
+  if (busy || state.ws) return;
+  busy = true; $('btnConnect').disabled = true;
+  const generation = ++authGeneration;
+  try {
+    await cancelOwnedAttempt();
+    const endpoint = new URL('../yiarce-account/chat-token', baseURL).href;
+    let credential;
+    const response = await transport(endpoint, { method: 'POST', credentials: 'same-origin', cache: 'no-store', signal: AbortSignal.any([life.signal, AbortSignal.timeout(20000)]) });
+    if (response.status === 404) {
+      usingAccount = false; loginEndpoint = credentialEndpoint = './login'; loginReady = true;
+    } else {
+      usingAccount = true; credentialEndpoint = endpoint; loginEndpoint = new URL('../yiarce-account', baseURL).href;
+      if (response.status !== 401) {
+        if (!response.ok) throw new Error('transport');
+        credential = await response.json();
+      }
+    }
+    if (!alive || generation !== authGeneration) return;
+    loginReady = true;
+    if (credential) { connect(credential.wsUrl); return; }
+    if (!usingAccount) {
+      try {
+        const credential = await getCredential();
+        if (alive && generation === authGeneration) connect(credential.wsUrl);
+        return;
+      } catch (error) { if (error.status !== 401) throw error; }
+    }
+    const view = await loginRequest(loginEndpoint);
+    if (alive && generation === authGeneration) { showLogin(view); setStatus('请先登录后进入聊天', false); }
+  } catch (error) { showLoginError(error); }
+  finally {
+    busy = false;
+    if (alive && !state.ws) { $('btnConnect').disabled = false; $('btnRelogin').disabled = !loginReady; }
+  }
+}
+async function beginLogin() {
+  if (!loginReady || busy || state.ws) return;
+  busy = true;
+  const generation = ++authGeneration;
+  $('btnLogin').disabled = true;
+  try {
+    await cancelOwnedAttempt();
+    const view = await loginRequest(loginEndpoint, 'begin');
+    if (!alive || generation !== authGeneration) return;
+    ownedAttempt = view.attempt?.id; showLogin(view);
+    pollTimer = setTimeout(() => pollLogin(generation), 1500);
+  } catch (error) { showLoginError(error); }
+  finally { busy = false; if (alive) $('btnLogin').disabled = false; }
+}
+async function pollLogin(generation) {
+  if (!alive || generation !== authGeneration) return;
+  try {
+    const view = await loginRequest(loginEndpoint);
+    if (!alive || generation !== authGeneration) return;
+    if (view.phase === 'signed-in' && view.profile) {
+      ownedAttempt = null;
+      const credential = await getCredential();
+      if (alive && generation === authGeneration) connect(credential.wsUrl);
+      return;
+    }
+    showLogin(view);
+    if (!view.attempt || ['expired', 'error'].includes(view.attempt.phase)) return;
+    pollTimer = setTimeout(() => pollLogin(generation), 1500);
+  } catch (error) { showLoginError(error); }
+}
+
+function connect(wsUrl) {
+  if (state.ws || !alive) return;
+  const url = new URL(wsUrl);
+  if (!['ws:', 'wss:'].includes(url.protocol) || !url.searchParams.get('token') || url.username || url.password) throw new Error('invalid-response');
+  if (location.protocol === 'https:' && url.protocol === 'ws:') {
+    setStatus('当前使用 HTTPS，请将 CHAT_SERVER 配置为 HTTPS/WSS 地址', false);
+    return;
+  }
+  const ws = new WebSocket(url.href);
+  ws.binaryType = 'arraybuffer';
+  state.serverKey = url.origin + url.pathname;
+  state.ws = ws;
+  state.opened = false;
+  $('btnConnect').disabled = true;
+  $('btnQuit').disabled = false;
+  $('btnRelogin').disabled = true;
+  $('loginBox').hidden = true;
+  setStatus('正在连接聊天服务…', false);
+  const timeout = connectionTimer = setTimeout(() => {
+    if (ws.readyState === WebSocket.CONNECTING) ws.close();
+  }, 20000);
+  ws.onopen = () => {
+    clearTimeout(timeout);
+    if (!alive) { ws.close(); return; }
+    state.opened = true;
+    setConnected(true);
+    setStatus('已连接', true);
+  };
+  let frameQueue = Promise.resolve();
+  ws.onmessage = event => {
+    if (!alive || state.ws !== ws || !(event.data instanceof ArrayBuffer)) return;
+    let frame;
+    try { frame = decodeMsg('serverFrame', new Uint8Array(event.data)); }
+    catch { log('收到无法识别的消息', 'err'); return; }
+    frameQueue = frameQueue.then(async () => {
+      if (alive && state.ws === ws) await handleFrame(frame);
+    }).catch(historyError);
+  };
+  ws.onerror = () => { if (alive) setStatus('连接失败，请检查聊天服务地址或重新登录', false); };
+  ws.onclose = () => {
+    clearTimeout(timeout);
+    if (!alive || state.ws !== ws) return;
+    state.ws = null;
+    state.rooms.clear(); state.pendingRoom = null;
+    state.me = null;
+    refreshRooms();
+    setConnected(false);
+    setStatus(state.opened ? '连接已断开，点击连接 / 重试可重新进入' : '连接失败：登录已过期或聊天服务不可用', false);
+  };
+}
+
+$('btnConnect').addEventListener('click', () => { $('accountMenu').open = false; discover(); });
+$('btnLogin').addEventListener('click', beginLogin);
+$('btnRelogin').addEventListener('click', () => { if (!busy && !state.ws) { $('accountMenu').open = false; showLogin(null); beginLogin(); } });
+$('btnQuit').addEventListener('click', () => { $('accountMenu').open = false; state.ws?.close(); });
+$('composer').addEventListener('submit', event => { event.preventDefault(); sendMessage(); });
+$('messageInput').addEventListener('input', () => { if (current()) { current().draft = $('messageInput').value; ++current().draftVersion; recordStore.draft(current().key, current().draft); } syncComposer(); scheduleStickers(); });
+$('messageInput').addEventListener('compositionstart', () => { composing = true; closeStickers(); });
+$('messageInput').addEventListener('compositionend', () => { composing = false; scheduleStickers(); });
+$('messageInput').addEventListener('keydown', event => {
+  if (event.key === 'Enter' && event.repeat) { event.preventDefault(); return; }
+  if (stickerKey(event)) return;
+  if (event.key !== 'Enter' || event.isComposing || event.keyCode === 229) return;
+  event.preventDefault();
+  if (event.ctrlKey) {
+    const input = $('messageInput');
+    if (input.disabled || input.value.length - (input.selectionEnd - input.selectionStart) >= input.maxLength) return;
+    input.setRangeText('\n', input.selectionStart, input.selectionEnd, 'end');
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  } else {
+    sendMessage();
+  }
+});
+$('search').addEventListener('input', renderSessions);
+$('btnLatest').addEventListener('click', () => { scrollLatest(); if (current()) { current().unread = 0; renderSessions(); if (recordStore.ready) void recordStore.read(current().key).catch(historyError); } });
+$('messageViewport').addEventListener('scroll', () => { if (nearBottom()) $('btnLatest').hidden = true; });
+function historyError(error) {
+  if (alive) log(error?.message || '聊天记录保存或读取失败', 'err');
+}
+function applyStoredSession(meta, revision = -1, allowDraft = false) {
+  if (!meta) return null;
+  const known = sessionRevisions.get(meta.key) ?? -1;
+  if (revision >= 0 && revision < known) return state.sessions.get(meta.key);
+  if (revision >= 0) sessionRevisions.set(meta.key, revision);
+  const item = session(meta.kind, meta.id, meta.name, meta.avatar);
+  item.localNew = false;
+  item.preview = meta.preview; item.updated = meta.updated; item.unread = meta.unread; item.messageCount = meta.messageCount;
+  const hydrateDraft = !item.draftHydrated; item.draftHydrated = true;
+  if (!recordStore.dirty(meta.key) && !item.draftBarrier && (hydrateDraft || allowDraft)) {
+    item.draft = meta.draft || '';
+    if (current() === item) $('messageInput').value = item.draft;
+  }
+  return item;
+}
+function mergeStoredEntry(item, saved) {
+  if (saved.revision <= item.clearedRevision || deletedEntryKeys.has(JSON.stringify([item.key, saved.id]))) return null;
+  let entry = item.detachedEntries.get(saved.id) || item.entries.find(value => value.id === saved.id);
+  const job = pendingSends.get(saved.message.clientMessageId);
+  if (!entry && job?.item === item && job.entry.id === saved.id) entry = job.entry;
+  if (entry) {
+    if ((entry.revision || 0) > saved.revision) return entry;
+    const priorImage = entry.message.sticker?.url, priorMissing = entry.imagePending;
+    Object.assign(entry, saved); entry.storageSaved = true;
+    if (job?.entry === entry && ['sent', 'failed'].includes(saved.sendStatus)) {
+      pendingSends.delete(job.id); clearTimeout(job.timer); job.controller?.abort();
+      if (entry.localImage) entry.localImage.file = null;
+    }
+    syncMessageStatus(entry);
+    if (entry.evicted) {
+      item.displayFloor = Math.max(item.displayFloor, saved.order || 0);
+      if (!pendingSends.has(saved.message.clientMessageId)) { releaseEntryImage(entry); item.detachedEntries.delete(entry.id); }
+    }
+    else if (current() === item && !entry.localImage && (priorImage !== entry.message.sticker?.url || priorMissing !== entry.imagePending)) renderMessages();
+    return entry;
+  }
+  if (item.loaded && saved.order && saved.order <= item.displayFloor) return null;
+  if (!item.loaded) {
+    if (item.loading) { item.loadingBuffer.set(saved.id, saved); if (item.loadingBuffer.size > 1000) item.loadingBuffer.delete(item.loadingBuffer.keys().next().value); }
+    return null;
+  }
+  entry = { ...saved, storageSaved: true }; addEntry(item, entry); return entry;
+}
+async function loadSessionMessages(item) {
+  if (!item || item.loaded || !recordStore.ready) return;
+  if (item.loading) return item.loading;
+  const epoch = historyEpoch, version = item.loadVersion;
+  item.loadingBuffer = new Map();
+  item.loading = (async () => {
+    try {
+      const result = await recordStore.recent(item.key);
+      if (!alive || epoch !== historyEpoch || version !== item.loadVersion || state.sessions.get(item.key) !== item) return;
+      const entries = new Map(result.entries.filter(entry => entry.revision > item.clearedRevision && !deletedEntryKeys.has(JSON.stringify([item.key, entry.id]))).map(entry => [entry.id, entry]));
+      for (const entry of item.loadingBuffer.values()) if (entry.revision > result.revision && !deletedEntryKeys.has(JSON.stringify([item.key, entry.id]))) entries.set(entry.id, entry);
+      item.entries = [...entries.values()].slice(-1000).map(entry => ({ ...entry, storageSaved: true }));
+      item.loaded = true; item.displayFloor = item.entries.length ? (item.entries[0].order || 1) - 1 : 0;
+      if (current() === item) renderMessages(true);
+    } catch (error) { historyError(error); }
+    finally {
+      if (version === item.loadVersion) { item.loading = null; item.loadingBuffer.clear(); }
+      if (alive) syncComposer();
+    }
+  })();
+  return item.loading;
+}
+async function reconcileLoadedMessages(item) {
+  const epoch = historyEpoch;
+  try {
+    const existing = item.entries.filter(entry => entry.storageSaved).map(entry => entry.id);
+    for await (const result of recordStore.sync(item.key, existing)) {
+      if (!alive || epoch !== historyEpoch || state.sessions.get(item.key) !== item) return;
+      const returned = new Set(result.entries.map(entry => entry.id));
+      for (const id of result.requested) {
+        const entry = item.entries.find(value => value.id === id);
+        if (entry && !returned.has(id) && (entry.revision || 0) <= result.revision) discardLocalEntry(item, entry);
+      }
+      for (const saved of [...result.entries, ...(result.recent || [])]) mergeStoredEntry(item, saved);
+      if (current() === item) renderMessages();
+    }
+  } catch (error) { historyError(error); }
+}
+function forgetSessionMessages(item, cutoff = Infinity, pendingIds = []) {
+  if (Number.isFinite(cutoff)) item.clearedRevision = Math.max(item.clearedRevision, cutoff);
+  ++item.loadVersion; item.loading = null; item.loadingBuffer?.clear();
+  const erased = entry => cutoff === Infinity || pendingIds.includes(entry.id) || entry.storageSaved && (entry.revision || 0) <= cutoff;
+  for (const job of [...pendingSends.values()]) if (job.item === item && erased(job.entry)) discardLocalEntry(item, job.entry);
+  for (const entry of [...item.detachedEntries.values()]) if (erased(entry)) discardLocalEntry(item, entry);
+  for (const entry of [...item.entries]) if (erased(entry)) discardLocalEntry(item, entry);
+  item.loaded = true;
+  if (!item.entries.length) { item.messageCount = 0; item.unread = 0; item.preview = ''; item.updated = 0; }
+  if (current() === item) { renderMessages(); $('btnLatest').hidden = true; }
+}
+function removeStoredSession(item) {
+  if (!item || item.key === 'room:1') return;
+  forgetSessionMessages(item); releaseLocalURL(item.draftSticker?.url); recordStore.cancelDraft(item.key);
+  const active = current() === item;
+  state.sessions.delete(item.key);
+  if (active) selectSession('room:1');
+}
+function applyHistoryEvent(event) {
+  if (!alive) return;
+  if (event.type === 'snapshot') {
+    contacts.clear(); for (const contact of event.contacts || []) contacts.set(String(contact.userId), contact);
+    friendRequests.clear(); for (const request of event.requests || []) { setRequestLocal(request); if (request.status === 'pending' || request.status === 'accepted' || request.status === 'rejected') addRequestCard(request); }
+    const known = new Set(event.sessions.map(item => item.key));
+    for (const item of [...state.sessions.values()]) if (!known.has(item.key) && !item.localNew) removeStoredSession(item);
+    for (const meta of event.sessions) {
+      const item = applyStoredSession(meta, event.revision, true);
+      if (item.loaded) void reconcileLoadedMessages(item);
+    }
+    void loadSessionMessages(current());
+    if (current() && !document.hidden && document.hasFocus()) void recordStore.read(current().key).catch(historyError);
+  } else if (event.type === 'contact' || event.type === 'request') {
+    contacts.clear(); for (const contact of event.contacts || []) contacts.set(String(contact.userId), contact);
+    friendRequests.clear(); for (const request of event.requests || []) { setRequestLocal(request); if (request.status === 'pending' || request.status === 'accepted' || request.status === 'rejected') addRequestCard(request); }
+  } else if (event.type === 'remove') {
+    const item = state.sessions.get(event.key);
+    if (event.revision < (sessionRevisions.get(event.key) ?? -1)) { if (item) forgetSessionMessages(item, event.revision, event.pendingIds); }
+    else { sessionRevisions.set(event.key, event.revision); removeStoredSession(item); }
+  } else {
+    if (!state.sessions.has(event.key) && event.revision < (sessionRevisions.get(event.key) ?? -1)) return;
+    // Metadata is versioned separately from messages to tolerate HTTP/SSE reordering.
+    const item = applyStoredSession(event.session, event.revision, event.type === 'draft' && event.client !== recordStore.client);
+    if (!item) return;
+    if (event.type === 'clear') forgetSessionMessages(item, event.revision, event.pendingIds);
+    else if (event.type === 'delete') {
+      deletedEntryKeys.add(JSON.stringify([event.key, event.id])); item.loadingBuffer?.delete(event.id);
+      const entry = item.entries.find(value => value.id === event.id) || [...pendingSends.values()].find(job => job.item === item && job.entry.id === event.id)?.entry;
+      if (entry) discardLocalEntry(item, entry);
+      if (current() === item) renderMessages();
+    } else if (event.type === 'message') mergeStoredEntry(item, event.entry);
+  }
+  renderSessions(); renderHeader();
+}
+async function persistEntry(item, entry, options = {}) {
+  if (entry.removed) return false;
+  try {
+    const result = await recordStore.put(item, entry, options);
+    if (result.ignored) { discardLocalEntry(item, entry); if (current() === item) renderMessages(); return false; }
+    entry.storageSaved = true;
+    if (result.entry) entry.revision = Math.max(entry.revision || 0, result.entry.revision || 0);
+    return true;
+  } catch (error) { historyError(error); if (entry.evicted && !pendingSends.has(entry.message.clientMessageId)) item.detachedEntries.delete(entry.id); return false; }
+}
+async function beginStoredSend(job, local) {
+  const saved = await persistEntry(job.item, job.entry, { clearDraft: true });
+  if (job.item.draftBarrier === job.id) job.item.draftBarrier = null;
+  if (!saved) { failPendingSend(job.id, '记录保存失败，消息未发送'); return; }
+  if (!canFinishSend(job)) return;
+  if (local) await uploadMessageImage(job); else await sendPreparedMessage(job);
+}
+function discardLocalEntry(item, entry) {
+  entry.removed = true; item.detachedEntries.delete(entry.id);
+  deletedEntryKeys.add(JSON.stringify([item.key, entry.id]));
+  if (entry.message?.clientMessageId) {
+    hiddenLocalMessages.add(entry.message.fromUserId + ':' + entry.message.clientMessageId);
+    const job = pendingSends.get(entry.message.clientMessageId);
+    if (job?.entry === entry) { job.controller?.abort(); clearTimeout(job.timer); pendingSends.delete(job.id); }
+  }
+  detachMessageRow(entry); releaseEntryImage(entry);
+  const index = item.entries.indexOf(entry);
+  if (index >= 0) item.entries.splice(index, 1);
+}
+async function addFriend(message) {
+  const id = String(message.fromUserId); if (!connected || isFriend(id) || isBlocked(id)) return;
+  if (requestOf(id, 'outgoing', 'pending')) { log('好友申请已发送，正在等待对方处理'); return; }
+  const request = { requestId: crypto.randomUUID(), peerId: id, direction: 'outgoing', status: 'pending', nickname: message.fromNickname || id, avatar: message.fromAvatar || '', created: Date.now() };
+  if (!sendControl(id, 'friend-request', { requestId: request.requestId, createdAt: request.created })) { log('好友申请发送失败', 'err'); return; }
+  await saveRequest(request); addRequestCard(request); log('好友申请已发送');
+}
+async function deleteFriend(message) { await saveContact(message.fromUserId, 'none', message); log('已删除好友'); }
+async function toggleBlock(message) {
+  const id = String(message.fromUserId); if (isFriend(id)) return;
+  const relation = isBlocked(id) ? 'none' : 'blocked'; await saveContact(id, relation, message); log(relation === 'blocked' ? '已屏蔽该用户' : '已解除屏蔽');
+}
+function clearLocalMessages(item) {
+  if (state.sessions.get(item.key) !== item) return;
+  return recordStore.change('clear', item.key);
+}
+const contextActions = mountChatContextMenu(root, {
+  input: composerInput, current, latest: scrollLatest, feedback: log,
+  sessionFor: button => state.sessions.get(button.dataset.sessionKey),
+  entryFor: row => {
+    const entry = contextEntries.get(row), item = current();
+    return entry && item?.entries.includes(entry) ? { item, entry } : null;
+  },
+  isSelf: id => id === (state.me?.id || lastUserID),
+  relation: id => contactOf(id),
+  pendingFriend: id => Boolean(requestOf(id, 'outgoing', 'pending')),
+  addFriend,
+  deleteFriend,
+  toggleBlock,
+  privateChat: message => {
+    if (!message.fromUserId || message.fromUserId === (state.me?.id || lastUserID)) return;
+    const peer = session("private", message.fromUserId, message.fromNickname || message.fromUserId, message.fromAvatar);
+    selectSession(peer.key);
+  },
+  clear: clearLocalMessages,
+  delete: (item, entry) => {
+    if (state.sessions.get(item.key) !== item || !item.entries.includes(entry)) return;
+    return recordStore.change('delete', item.key, entry.id);
+  },
+  remove: item => {
+    if (item.key === 'room:1' || state.sessions.get(item.key) !== item) return;
+    return recordStore.change('remove', item.key);
+  },
+});
+// Clipboard files are staged locally, just like files chosen with the image button.
+composerInput.addEventListener("paste", event => {
+  if (composerInput.disabled || composerInput.readOnly || !uploadImage) return;
+  const clipboard = event.clipboardData;
+  if (!clipboard) return;
+  const imageItem = [...clipboard.items].find(item => item.kind === "file" && item.type.startsWith("image/"));
+  const image = imageItem?.getAsFile() || [...clipboard.files].find(file => file.type.startsWith("image/"));
+  if (!image) return;
+  event.preventDefault();
+  stageDraftImage(image);
+}, { signal: life.signal });
+const onFocus = () => {
+  if (!document.hidden && document.hasFocus() && root.getClientRects().length && current()) { current().unread = 0; renderSessions(); if (recordStore.ready) void recordStore.read(current().key).catch(historyError); }
+};
+const onKey = event => { if (event.key === 'Escape') { $('accountMenu').open = false; closeEmoji(); } };
+root.addEventListener('keydown', onKey);
+window.addEventListener('focus', onFocus);
+document.addEventListener('visibilitychange', onFocus);
+const dispose = () => {
+  if (!alive) return;
+  alive = false; ++authGeneration; clearPendingSends(); releaseAllLocalImages();
+  if (current()) recordStore.draft(current().key, $('messageInput').value);
+  recordStore.close();
+  contextActions.dispose();
+  emojiLife.abort(); emojiPanel.remove();
+  imageUploadInput.onchange = null; imageUploadInput.remove(); composerToolbar.remove();
+  endMessageScrollDrag(); messageScrollLife.abort(); messageScrollResize.disconnect();
+  if (messageScrollFrame !== null) cancelAnimationFrame(messageScrollFrame);
+  messageScrollArea.before(messageViewport); messageScrollArea.remove();
+  draftStickerController?.abort(); draftStickerImage.onload = draftStickerImage.onerror = null;
+  composerEditor.before(composerInput); composerEditor.remove();
+  messageMediaController.abort(); messageImageObserver.disconnect(); stickerMedia.dispose();
+  closeStickers(); stickerResize.disconnect(); stickerPanel.remove();
+  clearTimeout(pollTimer); clearTimeout(feedbackTimer); clearTimeout(connectionTimer);
+  life.abort(); state.ws?.close();
+  if (ownedAttempt) transport(loginEndpoint, { method: 'POST', credentials: 'same-origin', keepalive: true, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'cancel', id: ownedAttempt }) }).catch(() => {});
+  root.removeEventListener('keydown', onKey);
+  window.removeEventListener('focus', onFocus);
+  document.removeEventListener('visibilitychange', onFocus);
+  window.removeEventListener('pagehide', dispose);
+};
+window.addEventListener('pagehide', dispose, { once: true });
+session('room', 1); renderProfile(); renderSessions(); renderHeader();
+discover();
+return dispose;
+}