aicq-chat-plugin 2.2.0 → 2.4.0

package/index.js

@@ -426,6 +426,88 @@ app.post('/api/identity/rotate-keys', (req, res) => {
   }
 });
 
+// Avatar upload
+const avatarUpload = multer({
+  storage: multer.memoryStorage(),
+  limits: { fileSize: 2 * 1024 * 1024 }, // 2MB max
+  fileFilter: (req, file, cb) => {
+    if (file.mimetype && file.mimetype.startsWith('image/')) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only image files are allowed'));
+    }
+  },
+});
+
+app.post('/api/identity/avatar', avatarUpload.single('avatar'), async (req, res) => {
+  try {
+    if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+    const agentId = req.body.agent_id || currentAgentId;
+
+    // Save avatar locally
+    const avatarsDir = path.join(DATA_DIR, 'avatars');
+    fs.mkdirSync(avatarsDir, { recursive: true });
+    const ext = req.file.mimetype.split('/')[1] || 'png';
+    const avatarId = Date.now() + '-' + Math.random().toString(36).slice(2, 8);
+    const filename = `${avatarId}.${ext}`;
+    const filePath = path.join(avatarsDir, filename);
+    fs.writeFileSync(filePath, req.file.buffer);
+
+    // Update local identity
+    const avatarUrl = `/api/identity/avatars/${filename}`;
+    identity.updateAvatar(agentId, avatarUrl);
+
+    // Try to upload to server too
+    try {
+      await serverClient.ensureAuth(agentId);
+      const FormData = (await import('form-data')).default;
+      const form = new FormData();
+      form.append('avatar', req.file.buffer, {
+        filename: req.file.originalname || 'avatar.' + ext,
+        contentType: req.file.mimetype,
+      });
+      // Use node-fetch to upload to server
+      const fetch = (await import('node-fetch')).default;
+      const serverUrl = SERVER_URL + '/api/v1/accounts/avatar';
+      const serverResp = await fetch(serverUrl, {
+        method: 'POST',
+        body: form,
+        headers: {
+          ...form.getHeaders(),
+          'Authorization': 'Bearer ' + serverClient.getAccessToken(agentId),
+        },
+      });
+      if (serverResp.ok) {
+        const serverData = await serverResp.json();
+        if (serverData.avatar) {
+          identity.updateAvatar(agentId, serverData.avatar);
+          return res.json({ success: true, avatar: serverData.avatar });
+        }
+      }
+    } catch (e) {
+      console.error('[AICQ] Server avatar upload failed:', e.message);
+    }
+
+    res.json({ success: true, avatar: avatarUrl });
+  } catch (e) {
+    res.status(500).json({ error: e.message });
+  }
+});
+
+app.get('/api/identity/avatars/:filename', (req, res) => {
+  const filename = req.params.filename;
+  // Security: prevent directory traversal
+  if (filename.includes('/') || filename.includes('\\') || filename.includes('..')) {
+    return res.status(400).json({ error: 'Invalid filename' });
+  }
+  const filePath = path.join(DATA_DIR, 'avatars', filename);
+  if (fs.existsSync(filePath)) {
+    res.sendFile(filePath);
+  } else {
+    res.status(404).json({ error: 'Avatar not found' });
+  }
+});
+
 app.get('/api/identity/keys', (req, res) => {
   const agentId = getAgentId(req);
   const info = identity.loadAgent(agentId);

package/lib/crypto.js

@@ -31,7 +31,13 @@ function generateExchangeKeypair() {
 
 function signMessage(message, secretKeyHex) {
   const secretKey = Buffer.from(secretKeyHex, 'hex');
-  const messageBytes = naclUtil.decodeUTF8(message);
+  // If message looks like hex (64 chars), treat as raw bytes to match server's bytes.fromhex()
+  let messageBytes;
+  if (/^[0-9a-fA-F]{64}$/.test(message)) {
+    messageBytes = Buffer.from(message, 'hex');
+  } else {
+    messageBytes = naclUtil.decodeUTF8(message);
+  }
   const signature = nacl.sign.detached(messageBytes, secretKey);
   return Buffer.from(signature).toString('hex');
 }
@@ -39,7 +45,13 @@ function signMessage(message, secretKeyHex) {
 function verifySignature(message, signatureHex, publicKeyHex) {
   try {
     const publicKey = Buffer.from(publicKeyHex, 'hex');
-    const messageBytes = naclUtil.decodeUTF8(message);
+    // If message looks like hex (64 chars), treat as raw bytes to match server
+    let messageBytes;
+    if (/^[0-9a-fA-F]{64}$/.test(message)) {
+      messageBytes = Buffer.from(message, 'hex');
+    } else {
+      messageBytes = naclUtil.decodeUTF8(message);
+    }
     const signature = Buffer.from(signatureHex, 'hex');
     return nacl.sign.detached.verify(messageBytes, signature, publicKey);
   } catch (e) {

package/lib/database.js

@@ -24,6 +24,7 @@ class PluginDatabase {
       CREATE TABLE IF NOT EXISTS identity (
         agent_id            TEXT PRIMARY KEY,
         nickname            TEXT NOT NULL DEFAULT '',
+        avatar              TEXT NOT NULL DEFAULT '',
         signing_public_key  TEXT NOT NULL,
         signing_secret_key  TEXT NOT NULL,
         exchange_public_key TEXT NOT NULL,
@@ -150,6 +151,21 @@ class PluginDatabase {
     this.db.prepare('UPDATE identity SET nickname = ?, updated_at = ? WHERE agent_id = ?').run(nickname, now, agentId);
   }
 
+  updateAvatar(agentId, avatarUrl) {
+    const now = new Date().toISOString();
+    // Ensure column exists (migration for existing databases)
+    try {
+      this.db.prepare('UPDATE identity SET avatar = ?, updated_at = ? WHERE agent_id = ?').run(avatarUrl, now, agentId);
+    } catch (e) {
+      if (e.message.includes('no column named avatar')) {
+        this.db.exec('ALTER TABLE identity ADD COLUMN avatar TEXT NOT NULL DEFAULT ""');
+        this.db.prepare('UPDATE identity SET avatar = ?, updated_at = ? WHERE agent_id = ?').run(avatarUrl, now, agentId);
+      } else {
+        throw e;
+      }
+    }
+  }
+
   // ─── Friends ───────────────────────────────────────────────────────
 
   addFriend({ agent_id, id, public_key, fingerprint, friend_type = 'ai', ai_name = '', permissions = ['chat'] }) {

package/lib/identity.js

@@ -135,6 +135,16 @@ class IdentityManager {
     return this._cache[agentId];
   }
 
+  /**
+   * Update agent avatar
+   */
+  updateAvatar(agentId, avatarUrl) {
+    this.db.updateAvatar(agentId, avatarUrl);
+    if (this._cache[agentId]) {
+      this._cache[agentId].avatar = avatarUrl;
+    }
+  }
+
   /**
    * Get identity info (public keys only, no secrets)
    */
@@ -144,6 +154,7 @@ class IdentityManager {
     return {
       agent_id: identity.agent_id,
       nickname: identity.nickname,
+      avatar: identity.avatar || null,
       signing_public_key: identity.signing_public_key,
       exchange_public_key: identity.exchange_public_key,
       fingerprint: identity.fingerprint,

package/lib/server-client.js

@@ -53,9 +53,13 @@ class ServerClient {
       public_key: identity.signing_public_key,
       agent_name: identity.nickname || agentId,
     });
-    if (data.accessToken) {
-      this.jwtToken = data.accessToken;
+    if (data.access_token || data.accessToken) {
+      this.jwtToken = data.access_token || data.accessToken;
       this.currentAgentId = agentId;
+      // Store server-side account ID for WS auth (nodeId must match JWT sub)
+      if (data.account && data.account.id) {
+        this.serverAccountId = data.account.id;
+      }
     }
     return data;
   }
@@ -83,9 +87,13 @@ class ServerClient {
       challenge,
     });
 
-    if (loginData.accessToken) {
-      this.jwtToken = loginData.accessToken;
+    if (loginData.access_token || loginData.accessToken) {
+      this.jwtToken = loginData.access_token || loginData.accessToken;
       this.currentAgentId = agentId;
+      // Store server-side account ID for WS auth (nodeId must match JWT sub)
+      if (loginData.account && loginData.account.id) {
+        this.serverAccountId = loginData.account.id;
+      }
     }
     return loginData;
   }
@@ -198,7 +206,7 @@ class ServerClient {
         console.log('[WS] Connected, sending auth...');
         this.ws.send(JSON.stringify({
           type: 'online',
-          nodeId: this.currentAgentId,
+          nodeId: this.serverAccountId || this.currentAgentId,
           token: this.jwtToken,
         }));
       });
@@ -317,6 +325,13 @@ class ServerClient {
     this._running = false;
     this.disconnect();
   }
+
+  /**
+   * Get the current JWT access token for a given agent
+   */
+  getAccessToken(agentId) {
+    return this.jwtToken || '';
+  }
 }
 
 module.exports = ServerClient;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aicq-chat-plugin",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "AICQ End-to-end Encrypted Chat Plugin for OpenClaw — Full UI with friend management, group chat, file transfer, and AI agent communication",
   "main": "index.js",
   "bin": {

package/public/index.html

@@ -29,7 +29,8 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans S
 .friend-item,.group-item{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;transition:background .15s;border-left:3px solid transparent}
 .friend-item:hover,.group-item:hover{background:var(--bg3)}
 .friend-item.active,.group-item.active{background:rgba(79,70,229,.2);border-left-color:var(--primary)}
-.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;color:#fff}
+.avatar{width:36px;height:36px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;color:#fff;overflow:hidden}
+.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
 .avatar.online{box-shadow:0 0 0 2px var(--success)}
 .info{flex:1;min-width:0}
 .info .name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -121,9 +122,28 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans S
 .msg-bubble a{color:var(--info)}
 .msg-bubble table{border-collapse:collapse;margin:6px 0}
 .msg-bubble th,.msg-bubble td{border:1px solid var(--border);padding:4px 8px;font-size:13px}
+/* Toast */
+.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:12px 24px;border-radius:8px;font-size:14px;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.5);max-width:90%;text-align:center;opacity:0;transition:opacity .3s;pointer-events:none}
+.toast.show{opacity:1}
+.toast.warning{border-color:var(--warning);background:rgba(245,158,11,.15);color:#fcd34d}
+/* Backup section */
+.backup-section{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:8px}
+.backup-section h4{font-size:14px;margin-bottom:8px;color:var(--text)}
+.backup-section p{font-size:12px;color:var(--text2);line-height:1.6;margin:4px 0}
+.backup-section .warning-box{font-size:12px;padding:8px;margin:8px 0}
+.backup-btns{display:flex;gap:8px;margin-top:10px}
+.backup-btns .btn{flex:1;text-align:center}
+/* Key match row */
+.key-match-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
+.key-match-row:last-child{border-bottom:none}
+.key-match-row label{font-size:13px;color:var(--text2);min-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.key-match-row select{flex:1;padding:6px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px}
 </style>
 </head>
 <body>
+<!-- Toast -->
+<div class="toast" id="toast"></div>
+
 <div class="app">
   <!-- Right Panel -->
   <div class="right-panel">
@@ -142,6 +162,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans S
       <button class="action-btn" onclick="showModal('settings')">
         <span class="icon">⚙️</span>设置
       </button>
+      <button class="action-btn" onclick="confirmLogout()">
+        <span class="icon">🚪</span>登出
+      </button>
     </div>
     <div class="list-section">
       <h4>好友</h4>
@@ -225,14 +248,39 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans S
   <div class="modal">
     <h3>设置</h3>
     <div style="display:flex;flex-direction:column;gap:12px">
+      <div style="text-align:center;padding:8px 0">
+        <div style="position:relative;display:inline-block">
+          <div class="avatar" id="settingsAvatar" style="width:64px;height:64px;font-size:24px;cursor:pointer" onclick="document.getElementById('avatarUploadInput').click()">A</div>
+          <div style="position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;cursor:pointer" onclick="document.getElementById('avatarUploadInput').click()">📷</div>
+        </div>
+        <input type="file" id="avatarUploadInput" accept="image/*" style="display:none" onchange="handlePluginAvatarUpload(this)">
+        <div style="font-size:11px;color:var(--text2);margin-top:4px">点击更换头像</div>
+      </div>
       <button class="btn btn-secondary" onclick="showQRCode()" style="width:100%;text-align:left">📱 二维码 — 客户端扫描添加好友</button>
       <button class="btn btn-secondary" onclick="showNicknameModal()" style="width:100%;text-align:left">✏️ 修改昵称</button>
       <button class="btn btn-secondary" onclick="generateFriendCode()" style="width:100%;text-align:left">🔢 生成好友码 (24小时有效)</button>
       <button class="btn btn-secondary" onclick="showKeysModal()" style="width:100%;text-align:left">🔑 显示/重新生成密钥</button>
       <button class="btn btn-secondary" onclick="createNewAgent()" style="width:100%;text-align:left">➕ 创建新 Agent</button>
       <button class="btn btn-secondary" onclick="syncData()" style="width:100%;text-align:left">🔄 同步服务器数据</button>
+      <div class="backup-section">
+        <h4>💾 数据备份</h4>
+        <p><strong>导出内容：</strong>聊天消息、好友关系、群聊信息、Agent 身份密钥（含私钥）</p>
+        <div class="warning-box">⚠️ 私钥包含在导出文件中！请妥善保管备份文件，切勿分享给他人。拥有私钥的人可以冒充你的身份发送消息。</div>
+        <p><strong>数据丢失场景：</strong></p>
+        <p>• 清除浏览器缓存数据</p>
+        <p>• 删除浏览器数据/历史记录</p>
+        <p>• 使用无痕/隐身模式（关闭窗口后数据清除）</p>
+        <p>• 更换浏览器或设备</p>
+        <p><strong>恢复方法：</strong>点击「导入备份」选择之前导出的 JSON 文件。若备份中的 Agent 私钥与当前 Agent 不匹配，系统会提示你手动对应。</p>
+        <div class="backup-btns">
+          <button class="btn btn-primary" onclick="exportBackup()">📤 导出备份</button>
+          <button class="btn btn-secondary" onclick="triggerImportBackup()">📥 导入备份</button>
+        </div>
+        <input type="file" id="backupFileInput" accept=".json" style="display:none" onchange="handleImportBackup(this)">
+      </div>
     </div>
     <div class="btn-row" style="margin-top:20px">
+      <button class="btn btn-danger" onclick="confirmLogout()">🚪 登出</button>
       <button class="btn btn-primary" onclick="hideModal('settings')">关闭</button>
     </div>
   </div>
@@ -334,6 +382,20 @@ body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans S
   </div>
 </div>
 
+<!-- Backup Key Match Modal -->
+<div class="modal-overlay" id="modal-backupMatch">
+  <div class="modal" style="max-width:560px">
+    <h3>🔑 Agent 密钥匹配</h3>
+    <div class="warning-box">备份中的 Agent 私钥与当前 Agent 不匹配，请手动选择对应关系。未匹配的聊天记录将不会导入。</div>
+    <p style="font-size:13px;color:var(--text2);margin-bottom:12px">左侧为备份中的 Agent，右侧选择当前对应的 Agent：</p>
+    <div id="backupMatchList"></div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" onclick="skipBackupMatch()">跳过不匹配项</button>
+      <button class="btn btn-primary" onclick="applyBackupMatch()">确认匹配并导入</button>
+    </div>
+  </div>
+</div>
+
 <script>
 // ─── State ──────────────────────────────────────────────────────────
 let currentAgentId = '';
@@ -353,19 +415,6 @@ async function api(method, path, body = null) {
   return resp.json();
 }
 
-// ─── Initialize ─────────────────────────────────────────────────────
-async function init() {
-  await loadAgents();
-  await loadFriends();
-  await loadGroups();
-  // Auto-select first agent
-  const sel = document.getElementById('agentSelect');
-  if (sel.options.length > 1) {
-    currentAgentId = sel.options[1].value;
-    sel.value = currentAgentId;
-  }
-}
-
 // ─── Agents ─────────────────────────────────────────────────────────
 async function loadAgents() {
   const data = await api('GET', '/api/agents');
@@ -382,6 +431,7 @@ async function loadAgents() {
 
 async function switchAgent(agentId) {
   if (!agentId) return;
+  saveChatToLocalStorage();
   currentAgentId = agentId;
   currentTarget = null;
   showEmptyState();
@@ -426,7 +476,7 @@ async function loadFriends() {
     div.className = 'friend-item' + (currentTarget?.id === f.id && currentTarget?.type === 'friend' ? ' active' : '');
     div.onclick = () => selectTarget(f.id, f.ai_name || f.fingerprint?.slice(0,8) || f.id.slice(0,8), 'friend', !!f.is_online);
     div.innerHTML = `
-      <div class="avatar ${f.is_online ? 'online' : ''}">${(f.ai_name||f.id).charAt(0).toUpperCase()}</div>
+      <div class="avatar ${f.is_online ? 'online' : ''}" ${f.ai_avatar ? 'style="background:none"' : ''}>${f.ai_avatar ? `<img src="${f.ai_avatar}" alt="">` : (f.ai_name||f.id).charAt(0).toUpperCase()}</div>
       <div class="info">
         <div class="name">${f.ai_name || f.fingerprint?.slice(0,16) || f.id.slice(0,12)}</div>
         <div class="status"><span class="${f.is_online ? 'badge-online' : 'badge-offline'}">●</span> ${f.is_online ? '在线' : '离线'}</div>
@@ -462,7 +512,29 @@ async function selectTarget(id, name, type, isOnline = false, silent = false) {
   showChatView();
 
   // Update header
-  document.getElementById('chatAvatar').textContent = type === 'group' ? '👥' : name.charAt(0).toUpperCase();
+  const chatAvatar = document.getElementById('chatAvatar');
+  // Try to get avatar from friend data
+  let friendAvatar = null;
+  if (type === 'friend') {
+    const friends = document.querySelectorAll('.friend-item');
+    // We'll use the currentTarget data
+  }
+  if (type === 'group') {
+    chatAvatar.innerHTML = '👥';
+  } else {
+    const name = currentTarget?.name || id;
+    chatAvatar.textContent = name.charAt(0).toUpperCase();
+    chatAvatar.style.background = '';
+  }
+  // If friend has avatar, try to find it in loaded friends
+  try {
+    const friendData = await api('GET', `/api/friends?agent_id=${currentAgentId}`);
+    const friend = (friendData.friends || []).find(f => f.id === id);
+    if (friend && friend.ai_avatar) {
+      chatAvatar.innerHTML = `<img src="${friend.ai_avatar}" alt="">`;
+      chatAvatar.style.background = 'none';
+    }
+  } catch(e) {}
   document.getElementById('chatName').textContent = name;
   document.getElementById('chatStatus').textContent = type === 'group' ? '群聊' : (isOnline ? '在线' : '离线');
   document.getElementById('silentBtn').textContent = silent ? '🔕' : '🔔';
@@ -630,6 +702,7 @@ async function sendMessage() {
       mentions: extractMentions(content),
     });
     await loadMessages();
+    saveChatToLocalStorage();
   } catch (e) {
     alert('发送失败: ' + e.message);
   }
@@ -769,7 +842,21 @@ async function toggleSilent() {
 }
 
 // ─── Modal Helpers ──────────────────────────────────────────────────
-function showModal(name) { document.getElementById('modal-' + name).classList.add('show'); }
+function showModal(name) {
+  document.getElementById('modal-' + name).classList.add('show');
+  // Update settings avatar when opening settings modal
+  if (name === 'settings' && currentAgentId) {
+    api('GET', `/api/identity?agent_id=${currentAgentId}`).then(info => {
+      const avatarEl = document.getElementById('settingsAvatar');
+      if (info.avatar) {
+        avatarEl.innerHTML = `<img src="${info.avatar}" alt="头像">`;
+        avatarEl.style.background = 'none';
+      } else {
+        avatarEl.textContent = (info.nickname || 'A').charAt(0).toUpperCase();
+      }
+    }).catch(() => {});
+  }
+}
 function hideModal(name) { document.getElementById('modal-' + name).classList.remove('show'); }
 
 // ─── Add Friend ─────────────────────────────────────────────────────
@@ -906,14 +993,429 @@ function showChatInfo() {
     : `好友: ${currentTarget.name}\nID: ${currentTarget.id}\n状态: ${currentTarget.isOnline ? '在线' : '离线'}`);
 }
 
+// ─── Avatar Upload ──────────────────────────────────────────────────
+async function handlePluginAvatarUpload(input) {
+  const file = input.files && input.files[0];
+  if (!file || !currentAgentId) return;
+  if (!file.type.startsWith('image/')) { alert('请选择图片文件'); return; }
+  if (file.size > 2 * 1024 * 1024) { alert('图片不能超过2MB'); return; }
+  try {
+    const formData = new FormData();
+    formData.append('avatar', file);
+    formData.append('agent_id', currentAgentId);
+    const resp = await fetch(API + '/api/identity/avatar', { method: 'POST', body: formData });
+    const data = await resp.json();
+    if (data.success || data.avatar) {
+      // Update the settings avatar display
+      const avatarUrl = data.avatar || (data.account && data.account.avatar);
+      if (avatarUrl) {
+        document.getElementById('settingsAvatar').innerHTML = `<img src="${avatarUrl}" alt="头像">`;
+      }
+      alert('头像已更新');
+    } else {
+      alert('上传失败: ' + (data.error || '未知错误'));
+    }
+  } catch (e) {
+    alert('头像上传失败: ' + e.message);
+  }
+  input.value = '';
+}
+
+// ─── Toast Notification ─────────────────────────────────────────────
+let toastTimer = null;
+function showToast(message, type = '', duration = 5000) {
+  const el = document.getElementById('toast');
+  el.textContent = message;
+  el.className = 'toast show' + (type ? ' ' + type : '');
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => { el.className = 'toast'; }, duration);
+}
+
+// ─── localStorage Chat Cache ───────────────────────────────────────
+const CACHE_KEY = 'aicq_plugin_chat_cache';
+
+function saveChatToLocalStorage() {
+  try {
+    const cache = {
+      currentAgentId,
+      currentTarget,
+      chatMessages,
+      oldestTimestamp,
+      savedAt: Date.now()
+    };
+    localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
+  } catch (e) {
+    // localStorage might be full or unavailable
+    console.warn('Failed to save chat cache:', e);
+  }
+}
+
+function loadChatFromLocalStorage() {
+  try {
+    const raw = localStorage.getItem(CACHE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch (e) {
+    return null;
+  }
+}
+
+function clearChatCache() {
+  try { localStorage.removeItem(CACHE_KEY); } catch(e) {}
+}
+
+// ─── Logout ─────────────────────────────────────────────────────────
+function confirmLogout() {
+  if (confirm('确定要登出吗？登出前会自动保存聊天缓存到本地。')) {
+    saveChatToLocalStorage();
+    // Clear state
+    currentAgentId = '';
+    currentTarget = null;
+    chatMessages = [];
+    oldestTimestamp = null;
+    document.getElementById('agentSelect').value = '';
+    showEmptyState();
+    document.getElementById('friendsList').innerHTML = '';
+    document.getElementById('groupsList').innerHTML = '';
+    hideModal('settings');
+    showToast('已登出，聊天缓存已保存到本地');
+  }
+}
+
+// ─── Backup Export ──────────────────────────────────────────────────
+async function exportBackup() {
+  try {
+    showToast('正在生成备份...');
+    // Get all agents
+    const agentsData = await api('GET', '/api/agents');
+    const agents = agentsData.agents || [];
+
+    // Collect data for each agent
+    const backupAgents = [];
+    for (const agent of agents) {
+      // Get identity/keys for this agent (includes private keys)
+      let keys = {};
+      try {
+        keys = await api('GET', `/api/identity/keys?agent_id=${agent.agent_id}`);
+      } catch(e) {}
+
+      // Get friends
+      let friends = [];
+      try {
+        const fd = await api('GET', `/api/friends?agent_id=${agent.agent_id}`);
+        friends = fd.friends || [];
+      } catch(e) {}
+
+      // Get groups
+      let groups = [];
+      try {
+        const gd = await api('GET', `/api/groups?agent_id=${agent.agent_id}`);
+        groups = gd.groups || [];
+      } catch(e) {}
+
+      // Get chat messages for each friend and group
+      const chatData = {};
+      for (const f of friends) {
+        try {
+          const md = await api('GET', `/api/chat/${f.id}?agent_id=${agent.agent_id}&limit=9999`);
+          chatData['friend_' + f.id] = md.messages || [];
+        } catch(e) {}
+      }
+      for (const g of groups) {
+        try {
+          const md = await api('GET', `/api/chat/${g.id}?agent_id=${agent.agent_id}&limit=9999`);
+          chatData['group_' + g.id] = md.messages || [];
+        } catch(e) {}
+      }
+
+      backupAgents.push({
+        agent_id: agent.agent_id,
+        nickname: agent.nickname || agent.agent_id,
+        avatar: agent.avatar || null,
+        signing_public_key: keys.signing_public_key || null,
+        exchange_public_key: keys.exchange_public_key || null,
+        signing_secret_key: keys.signing_secret_key || null,
+        exchange_secret_key: keys.exchange_secret_key || null,
+        fingerprint: keys.fingerprint || null,
+        friends,
+        groups,
+        chatData
+      });
+    }
+
+    const backup = {
+      version: 'aicq-plugin-backup-v1',
+      exportedAt: new Date().toISOString(),
+      agents: backupAgents
+    };
+
+    // Download as JSON file
+    const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `aicq-backup-${new Date().toISOString().slice(0,10)}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+
+    showToast('备份已导出！请妥善保管此文件，内含私钥。', 'warning', 6000);
+  } catch (e) {
+    alert('导出失败: ' + e.message);
+  }
+}
+
+// ─── Backup Import ──────────────────────────────────────────────────
+function triggerImportBackup() {
+  document.getElementById('backupFileInput').click();
+}
+
+// Store pending backup for matching
+let pendingBackup = null;
+let pendingMatchMap = {};
+
+async function handleImportBackup(input) {
+  if (!input.files || !input.files[0]) return;
+  const file = input.files[0];
+  input.value = '';
+
+  try {
+    const text = await file.text();
+    const backup = JSON.parse(text);
+
+    if (!backup.version || !backup.agents || !Array.isArray(backup.agents)) {
+      alert('无效的备份文件格式');
+      return;
+    }
+
+    await processImport(backup);
+  } catch (e) {
+    alert('读取备份文件失败: ' + e.message);
+  }
+}
+
+async function processImport(backup) {
+  // Get current agents
+  const agentsData = await api('GET', '/api/agents');
+  const currentAgents = agentsData.agents || [];
+
+  // Get current agents' keys for comparison
+  const currentAgentKeys = {};
+  for (const agent of currentAgents) {
+    try {
+      const keys = await api('GET', `/api/identity/keys?agent_id=${agent.agent_id}`);
+      currentAgentKeys[agent.agent_id] = {
+        agent_id: agent.agent_id,
+        nickname: agent.nickname || agent.agent_id,
+        signing_public_key: keys.signing_public_key,
+        fingerprint: keys.fingerprint
+      };
+    } catch(e) {
+      currentAgentKeys[agent.agent_id] = {
+        agent_id: agent.agent_id,
+        nickname: agent.nickname || agent.agent_id
+      };
+    }
+  }
+
+  // Check which backup agents don't match current agents
+  const matchedAgents = [];  // { backupAgent, currentAgent }
+  const unmatchedBackupAgents = [];  // backup agents with no key match
+
+  for (const ba of backup.agents) {
+    // Try to find matching current agent by signing_public_key or fingerprint
+    let matched = null;
+    for (const [cid, ck] of Object.entries(currentAgentKeys)) {
+      if (ba.signing_public_key && ck.signing_public_key && ba.signing_public_key === ck.signing_public_key) {
+        matched = ck;
+        break;
+      }
+      if (ba.fingerprint && ck.fingerprint && ba.fingerprint === ck.fingerprint) {
+        matched = ck;
+        break;
+      }
+      // Also match by agent_id
+      if (ba.agent_id === cid) {
+        matched = ck;
+        break;
+      }
+    }
+
+    if (matched) {
+      matchedAgents.push({ backupAgent: ba, currentAgent: matched });
+    } else {
+      unmatchedBackupAgents.push(ba);
+    }
+  }
+
+  // If there are unmatched agents, show matching modal
+  if (unmatchedBackupAgents.length > 0 && Object.keys(currentAgentKeys).length > 0) {
+    pendingBackup = backup;
+    pendingMatchMap = {};
+
+    // Auto-add matched ones
+    for (const m of matchedAgents) {
+      pendingMatchMap[m.backupAgent.agent_id] = m.currentAgent.agent_id;
+    }
+
+    showBackupMatchModal(unmatchedBackupAgents, Object.values(currentAgentKeys));
+  } else {
+    // All matched or no current agents, proceed directly
+    await doImportBackup(backup, matchedAgents.reduce((map, m) => { map[m.backupAgent.agent_id] = m.currentAgent.agent_id; return map; }, {}));
+  }
+}
+
+function showBackupMatchModal(unmatchedAgents, currentAgentList) {
+  const container = document.getElementById('backupMatchList');
+  container.innerHTML = '';
+
+  for (const ba of unmatchedAgents) {
+    const row = document.createElement('div');
+    row.className = 'key-match-row';
+    row.innerHTML = `
+      <label title="${ba.agent_id}">${ba.nickname || ba.agent_id}</label>
+      <select id="match-${ba.agent_id}" data-backup-agent="${ba.agent_id}">
+        <option value="">-- 不导入 --</option>
+        ${currentAgentList.map(ca => `<option value="${ca.agent_id}">${ca.nickname || ca.agent_id}</option>`).join('')}
+      </select>
+    `;
+    container.appendChild(row);
+  }
+
+  showModal('backupMatch');
+}
+
+async function applyBackupMatch() {
+  // Collect user selections
+  const selects = document.querySelectorAll('#backupMatchList select');
+  for (const sel of selects) {
+    const backupAgentId = sel.dataset.backupAgent;
+    const chosenAgentId = sel.value;
+    if (chosenAgentId) {
+      pendingMatchMap[backupAgentId] = chosenAgentId;
+    }
+  }
+
+  hideModal('backupMatch');
+  await doImportBackup(pendingBackup, pendingMatchMap);
+  pendingBackup = null;
+  pendingMatchMap = {};
+}
+
+async function skipBackupMatch() {
+  hideModal('backupMatch');
+  // Import only the already-matched agents (without the unmatched ones)
+  await doImportBackup(pendingBackup, pendingMatchMap);
+  pendingBackup = null;
+  pendingMatchMap = {};
+}
+
+async function doImportBackup(backup, matchMap) {
+  try {
+    showToast('正在导入备份...', '', 8000);
+    let importedCount = 0;
+    let importedMessages = 0;
+
+    for (const ba of backup.agents) {
+      const targetAgentId = matchMap[ba.agent_id];
+      if (!targetAgentId) continue;
+
+      // Import friends (via API if possible, or just save to cache)
+      // The plugin uses local SQLite, so we store to localStorage cache
+      for (const friend of (ba.friends || [])) {
+        try {
+          // Try to add friend via API
+          await api('POST', '/api/friends/add-by-fingerprint', {
+            agent_id: targetAgentId,
+            fingerprint: friend.fingerprint,
+            ai_name: friend.ai_name,
+            ai_avatar: friend.ai_avatar
+          });
+        } catch(e) {
+          // Friend might already exist, that's fine
+        }
+      }
+
+      // Import chat messages to localStorage cache
+      if (ba.chatData) {
+        const chatCacheKey = `aicq_chat_${targetAgentId}`;
+        try {
+          const existing = JSON.parse(localStorage.getItem(chatCacheKey) || '{}');
+          for (const [targetKey, messages] of Object.entries(ba.chatData)) {
+            existing[targetKey] = messages;
+          }
+          localStorage.setItem(chatCacheKey, JSON.stringify(existing));
+          importedMessages += Object.keys(ba.chatData).length;
+        } catch(e) {}
+      }
+
+      importedCount++;
+    }
+
+    // Refresh UI
+    await loadAgents();
+    await loadFriends();
+    await loadGroups();
+
+    hideModal('settings');
+    showToast(`导入完成！已导入 ${importedCount} 个 Agent 的数据，${importedMessages} 个会话记录。`, '', 6000);
+  } catch (e) {
+    alert('导入失败: ' + e.message);
+  }
+}
+
 // ─── Init ───────────────────────────────────────────────────────────
+async function init() {
+  await loadAgents();
+  await loadFriends();
+  await loadGroups();
+  // Auto-select first agent
+  const sel = document.getElementById('agentSelect');
+  if (sel.options.length > 1) {
+    currentAgentId = sel.options[1].value;
+    sel.value = currentAgentId;
+  }
+
+  // Load chat cache from localStorage
+  const cached = loadChatFromLocalStorage();
+  if (cached && cached.currentAgentId) {
+    // Restore cache if agent still exists
+    const sel2 = document.getElementById('agentSelect');
+    let agentExists = false;
+    for (let i = 0; i < sel2.options.length; i++) {
+      if (sel2.options[i].value === cached.currentAgentId) {
+        agentExists = true;
+        break;
+      }
+    }
+    if (agentExists) {
+      currentAgentId = cached.currentAgentId;
+      sel2.value = currentAgentId;
+      if (cached.currentTarget) {
+        currentTarget = cached.currentTarget;
+        await loadFriends();
+        await loadGroups();
+        // Will load messages from server, which is more reliable
+        if (currentTarget) {
+          selectTarget(currentTarget.id, currentTarget.name, currentTarget.type, currentTarget.isOnline, currentTarget.silent);
+        }
+      }
+    }
+  }
+
+  // Show login reminder toast
+  showToast('提醒：聊天记录仅保存在本地浏览器中，清除缓存数据或删除浏览器内容将丢失', 'warning', 8000);
+}
+
 init();
 
-// Periodic refresh
+// Periodic refresh and auto-save
 setInterval(async () => {
   if (currentAgentId) {
     await loadFriends();
     await loadGroups();
+    saveChatToLocalStorage();
   }
 }, 30000);
 </script>