@liguoshuai/pi-web-chat 1.9.0 → 1.10.1

package/README.md

@@ -11,12 +11,16 @@
 ## 📸 功能特性
 
 - 💬 **流式对话** —— 文本逐字流式渲染，带打字光标与 Markdown 高亮
+- 🖼️ **多模态图片支持** —— 支持截图粘贴（Ctrl+V）、文件拖拽及附件上传，可在对话中渲染图片缩略图与大图预览
+- 📥 **会话一键导出** —— 顶栏支持一键将当前完整会话导出为标准 Markdown（`.md`）文件
 - ⚡ **后台任务持久化** —— 关闭网页/标签页不中断正在生成的任务，重新进入自动回放（Backfill）追平进度
 - 🌐 **多端/多设备同步协同** —— 多个浏览器标签页或多设备（手机/电脑）可同时连入同一会话，实时双向同步
 - 🧭 **运行时实时插入指令 (Steer)** —— 生成过程中可随时插入转向指令指导 AI 调整后续行动
-- 🗂️ **会话历史与管理** —— 自动读取并显示 `~/.pi/agent/sessions/` 下所有历史会话，实时自动落盘
+- 🗂️ **会话历史与管理** —— 自动读取并显示 `~/.pi/agent/sessions/` 下所有历史会话，实时自动落盘与删除
 - ⚙️ **工具与思考过程折叠** —— bash / read / write / edit 等工具调用与 thinking 思考卡片实时展开/收起
-- 🧩 **动态模型切换** —— 顶栏模型胶囊，零延迟覆盖所有 pi 已配置的模型
+- 🧩 **动态模型切换** —— 顶栏模型胶囊，零延迟覆盖所有 pi 已配置的模型，支持深度思考级别调节
+- ⌨️ **丰富快捷键** —— 支持 `Ctrl/Cmd+M`（切模型）、`Ctrl/Cmd+Shift+N`（新建）、`Ctrl/Cmd+K`（搜索）、`Ctrl/Cmd+B`（折叠侧边栏）、`Esc`（中断/关闭）
+- 🛡️ **安全加固** —— WebSocket 跨站劫持 (CSWSH) Origin 防护与 Markdown 属性逃逸防御
 - 🔄 **断线自动重连与心跳** —— 带指数退避自动重连、双向心跳 Ping/Pong 检测
 - 📋 **快捷复制** —— 支持代码块、工具指令、回答全文一键复制
 - 📱 **移动端响应式** —— Viewport `100dvh` 优化、顶栏常驻固定、滚动置顶/置底快捷悬浮按钮（FAB）

package/docs/CHANGELOG.md

@@ -7,6 +7,63 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.10.1] - 2026-08-30
+
+### Improved
+- **附件上传图标与交互优化 (Attachment Icon & UX)**：
+  - 将输入框上传图标更换为美观清晰的标准曲别针附件矢量图标（Paperclip 📎）。
+  - 优化按钮尺寸（`32px × 32px` 标准圆形）、对称内边距与悬停/按压交互动效。
+- **文件与拖拽兼容性增强 (Upload Compatibility)**：
+  - 完善文件类型扩展（支持 `image/*` 及 `.png, .jpg, .jpeg, .webp, .gif, .bmp, .svg, .ico, .avif`）。
+  - 增强 MIME 类型缺失时的扩展名自动推断与回退处理机制。
+  - 增加全局 Drag & Drop 默认事件拦截，防止图片拖拽偏离输入框时误触浏览器页面跳转。
+
+---
+
+## [1.10.0] - 2026-08-30
+
+### Security
+- **WebSocket 跨站劫持 (CSWSH) 防护与 Origin 校验**：
+  - 在 `server.js` 增加 `verifyClient` 来源校验，严格拦截非授权外部网页发起的跨域 WebSocket 连接，防御针对本地服务与命令执行的 CSWSH 攻击。
+  - 支持同源、`localhost`、`127.0.0.1` 及通过 `ALLOWED_ORIGINS` 环境变量配置的反向代理域名白名单。
+- **路径与系统配置写入加固**：
+  - 加固 `/api/set-default-model` 接口，严格校验客户端传入的目标工作目录，防止任意路径操作。
+- **Markdown 链接协议与属性逃逸 XSS 防护**：
+  - 增强链接协议校验（仅允许 `http:`、`https:`、`mailto:`），修复 URL 包含特定引号实体时在属性反转义下的 XSS 逃逸隐患。
+
+### Added
+- **多模态图片输入与预览支持 (Multimodal Image Attachments & Lightbox)**：
+  - 输入框支持截图粘贴（`Ctrl+V` / `Cmd+V`）、本地图片文件拖拽（Drag & Drop）以及附件图标上传。
+  - 输入框上方显示待发送图片缩略图胶囊，支持单张移除。
+  - 消息气泡中支持渲染用户上传的多张图片缩略图，点击可弹出全屏大图预览（Lightbox）。
+  - 加载历史会话记录时自动提取并渲染历史消息中的图片附件。
+- **对话导出为 Markdown 功能 (Export Chat as Markdown)**：
+  - 顶栏新增“导出”按钮，一键将当前会话（包含会话名称、模型信息、工作目录、思考过程、工具调用与对话正文）导出为标准 Markdown（`.md`）文件下载。
+- **全局快捷键扩充 (Keyboard Shortcuts)**：
+  - `Ctrl/Cmd + Shift + N`：快速新建会话。
+  - `Ctrl/Cmd + K` 或 `Ctrl + /`：快速聚焦侧边栏搜索框。
+  - `Ctrl/Cmd + B`：快速切换侧边栏展开/折叠。
+  - `Escape`：支持快速关闭大图预览、搜索框失焦、关闭菜单及模态框。
+- **侧边栏搜索体验优化**：
+  - 搜索结果为空时展示“未找到匹配的会话”空提示。
+  - 会话列表刷新时自动保持当前搜索过滤词。
+- **自动化单元测试套件**：
+  - 新增基于 `node --test` 的单元测试，覆盖安全规则、Origin 校验与路径穿越检查。
+
+### Changed
+- **段落排版与换行优化**：Markdown 段落内单换行符自动转为 `<br>`，优化 AI 输出文本的行间结构与排版体验。
+- **跨平台工程化优化**：优化 `package.json` 中的 `prepare` 脚本，避免 Windows 下执行 `chmod` 报错；将 `rpctest.mjs` 整理归入 `scripts/` 目录。
+
+---
+
+## [1.9.1] - 2026-08-29
+
+### Added
+- **侧边栏底部开源项目跳转链接 (Repository Link in Sidebar Bottom)**：
+  - 在侧边栏底部元信息区域增加 `pi-web-chat` 项目开源仓库链接（`https://github.com/liguoshuai-1990/pi-web-chat`），方便用户快速跳转与查阅源码。
+
+---
+
 ## [1.9.0] - 2026-08-29
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -19,7 +19,8 @@
   "scripts": {
     "start": "node server.js",
     "dev": "node --watch server.js",
-    "prepare": "chmod +x bin/pi-web-chat.js"
+    "test": "node --test",
+    "prepare": "node -e \"import('fs').then(fs => { try { fs.chmodSync('bin/pi-web-chat.js', 0o755); } catch {} })\""
   },
   "keywords": [
     "pi",

package/public/app.js

@@ -43,6 +43,7 @@ const state = {
   sessionId: null,
   isBackfilling: false,
   aborting: false,
+  attachedImages: [], // Array of { data: string (base64), mimeType: string, url: string }
 };
 
 let toastTimer = null;
@@ -358,7 +359,7 @@ function renderInlineMd(text) {
     if (para.length === 0) return;
     const block = para.join("\n").trim();
     para = [];
-    outHtml += "<p>" + mdInlineBlock(block) + "</p>";
+    outHtml += "<p>" + mdInlineBlock(block).replace(/\n/g, "<br>") + "</p>";
   }
   for (const seg of out) {
     if (seg.kind === "table") {
@@ -420,6 +421,15 @@ function renderInlineMd(text) {
   return outHtml;
 }
 
+function sanitizeUrl(url) {
+  if (!url) return "#";
+  const trimmed = url.trim();
+  if (/^(https?:\/\/|mailto:)/i.test(trimmed)) {
+    return escapeHtml(trimmed);
+  }
+  return "#";
+}
+
 // helper state bag attached to the function during line scan
 function mdInlineBlock(text) {
   let s = escapeHtml(text);
@@ -432,8 +442,11 @@ function mdInlineBlock(text) {
   s = s.replace(/(^|[^*])\*([^*\s](?:[^*]*?[^*\s])?)\*(?!\*)/g, "$1<em>$2</em>");
   // italic (underscore): only match boundary/space so identifier_names are preserved
   s = s.replace(/(^|[\s(\[<,;:])_([^_\s](?:[^_]*?[^_\s])?)_(?=[\s)\]>,;:!?.]|$)/g, "$1<em>$2</em>");
-  // links [txt](url)
-  s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+  // links [txt](url) - strictly sanitize URL
+  s = s.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, (match, txt, url) => {
+    const safeUrl = sanitizeUrl(url);
+    return `<a href="${safeUrl}" target="_blank" rel="noopener">${txt}</a>`;
+  });
   return s;
 }
 
@@ -516,6 +529,31 @@ function renderSidebar(sessions) {
     ]);
     list.appendChild(item);
   });
+  filterSessions();
+}
+
+function filterSessions(query) {
+  const q = (query !== undefined ? query : ($("#sidebarSearch")?.value || "")).toLowerCase().trim();
+  const list = $("#sessionList");
+  if (!list) return;
+  const items = list.querySelectorAll(".session-item");
+  let visibleCount = 0;
+  items.forEach((it) => {
+    const titleEl = it.querySelector(".session-item-name") || it.querySelector(".title");
+    const text = titleEl ? titleEl.textContent.toLowerCase() : it.textContent.toLowerCase();
+    const match = !q || text.includes(q);
+    it.style.display = match ? "" : "none";
+    if (match) visibleCount++;
+  });
+  let emptyTip = list.querySelector(".sidebar-search-empty");
+  if (items.length > 0 && visibleCount === 0 && q) {
+    if (!emptyTip) {
+      emptyTip = el("div", { class: "sidebar-search-empty", text: "未找到匹配的会话" });
+      list.appendChild(emptyTip);
+    }
+  } else if (emptyTip) {
+    emptyTip.remove();
+  }
 }
 
 function startNewSession(askConfirm = true) {
@@ -672,8 +710,18 @@ function reconstructFromEntries(entries) {
     const m = e.message;
     if (!m || m.role === "bashExecution") continue;
     if (m.role === "user") {
-      // skip "bash execution" pseudo-users (those have role user but content type special)
-      out.push({ role: "user", text: extractContentText(m.content), ts: m.timestamp });
+      // Extract optional images from user message content array
+      let images = [];
+      if (Array.isArray(m.content)) {
+        images = m.content
+          .filter(c => c && (c.type === "image" || c.mimeType))
+          .map(c => ({
+            data: c.data,
+            mimeType: c.mimeType || "image/png",
+            url: c.data ? `data:${c.mimeType || "image/png"};base64,${c.data}` : (c.url || "")
+          }));
+      }
+      out.push({ role: "user", text: extractContentText(m.content), images, ts: m.timestamp });
     } else if (m.role === "assistant") {
       const rawContent = Array.isArray(m.content) ? m.content : (m.content ? [{ type: "text", text: String(m.content) }] : []);
       const content = rawContent.map(part => {
@@ -734,14 +782,178 @@ function showEmptyState(show) {
   document.querySelector("#emptyState").style.display = show ? "flex" : "none";
 }
 
+function openLightbox(src) {
+  const box = $("#imageLightbox");
+  const img = $("#lightboxImg");
+  if (!box || !img) return;
+  img.src = src;
+  box.style.display = "flex";
+}
+
+function closeLightbox() {
+  const box = $("#imageLightbox");
+  if (box) box.style.display = "none";
+}
+
+function removeAttachedImage(index) {
+  if (index >= 0 && index < state.attachedImages.length) {
+    state.attachedImages.splice(index, 1);
+    renderImagePreviews();
+  }
+}
+
+function renderImagePreviews() {
+  const bar = $("#imagePreviewBar");
+  if (!bar) return;
+  bar.innerHTML = "";
+  if (!state.attachedImages || state.attachedImages.length === 0) {
+    bar.style.display = "none";
+    return;
+  }
+  bar.style.display = "flex";
+  state.attachedImages.forEach((img, idx) => {
+    const item = el("div", { class: "image-preview-item" }, [
+      el("img", { src: img.url, alt: "预览" }),
+      el("button", {
+        class: "image-preview-remove",
+        type: "button",
+        title: "移除此图片",
+        onclick: (e) => {
+          e.stopPropagation();
+          removeAttachedImage(idx);
+        }
+      }, ["×"])
+    ]);
+    bar.appendChild(item);
+  });
+}
+
+function detectImageMimeType(file) {
+  if (file.type && file.type.startsWith("image/")) return file.type;
+  const ext = file.name ? file.name.split(".").pop().toLowerCase() : "";
+  const map = {
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    webp: "image/webp",
+    gif: "image/gif",
+    bmp: "image/bmp",
+    svg: "image/svg+xml",
+    ico: "image/x-icon",
+    avif: "image/avif"
+  };
+  return map[ext] || "image/png";
+}
+
+function handleImageFiles(files) {
+  if (!files || files.length === 0) return;
+  const imageFiles = Array.from(files).filter(f => {
+    return (f.type && f.type.startsWith("image/")) ||
+      (f.name && /\.(png|jpe?g|webp|gif|bmp|svg|ico|avif)$/i.test(f.name));
+  });
+  if (imageFiles.length === 0) return;
+
+  imageFiles.forEach(file => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result !== "string") return;
+      const commaIdx = result.indexOf(",");
+      const base64 = commaIdx !== -1 ? result.slice(commaIdx + 1) : result;
+      const mimeType = detectImageMimeType(file);
+      state.attachedImages.push({
+        data: base64,
+        mimeType,
+        url: result
+      });
+      renderImagePreviews();
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+function exportCurrentSession() {
+  const chatInner = $("#chat-inner");
+  if (!chatInner || chatInner.children.length === 0) {
+    showToast("当前会话没有内容可导出");
+    return;
+  }
+  const sessionTitle = $("#topSessionName")?.textContent || "pi-chat-export";
+  let md = `# ${sessionTitle}\n\n`;
+  md += `> 导出时间: ${new Date().toLocaleString()}\n`;
+  if (state.currentModel?.id) {
+    md += `> 模型: ${state.currentModel.provider ? state.currentModel.provider + " / " : ""}${state.currentModel.name || state.currentModel.id}\n`;
+  }
+  if (state.cwd) {
+    md += `> 工作目录: \`${state.cwd}\`\n`;
+  }
+  md += `\n---\n\n`;
+
+  const msgs = chatInner.querySelectorAll(".msg");
+  msgs.forEach(msg => {
+    if (msg.classList.contains("user")) {
+      const isSteer = !!msg.querySelector(".steer-badge");
+      const bubble = msg.querySelector(".bubble");
+      const text = bubble ? bubble.innerText.replace("🧭 指导指令", "").trim() : "";
+      md += `### 👤 User${isSteer ? " (🧭 指导指令)" : ""}\n\n${text}\n\n`;
+    } else if (msg.classList.contains("assistant")) {
+      md += `### 🤖 pi\n\n`;
+      const thinking = msg.querySelector(".thinking-body");
+      if (thinking && thinking.innerText.trim()) {
+        md += `<details><summary>💭 思考过程</summary>\n\n${thinking.innerText.trim()}\n\n</details>\n\n`;
+      }
+      const tools = msg.querySelectorAll(".tool-block");
+      tools.forEach(tool => {
+        const name = tool.querySelector(".name")?.innerText || "tool";
+        const args = tool.querySelector(".args")?.innerText || "";
+        const body = tool.querySelector(".tool-body")?.innerText || "";
+        md += `\`\`\`bash\n# Tool: ${name} ${args}\n${body.trim()}\n\`\`\`\n\n`;
+      });
+      const paragraphs = msg.querySelectorAll(".content > div:not(.thinking-block):not(.tool-block)");
+      paragraphs.forEach(p => {
+        md += `${p.innerText.trim()}\n\n`;
+      });
+    }
+  });
+
+  const blob = new Blob([md], { type: "text/markdown;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  const safeName = sessionTitle.replace(/[/\\?%*:|"<>]/g, "_").slice(0, 40);
+  a.download = `${safeName}_${new Date().toISOString().slice(0, 10)}.md`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  showToast("对话已导出为 Markdown 文件");
+}
+
 function appendMessageNode(role, m) {
   if (role === "user") {
     const isSteer = m.isSteer || false;
     const steerBadge = isSteer ? el("span", { class: "steer-badge", text: "🧭 指导指令" }) : null;
-    const bubble = el("div", { class: "bubble" + (isSteer ? " steer" : "") }, [
-      steerBadge,
-      document.createTextNode(m.text || "")
-    ]);
+    const bubbleChildren = [steerBadge];
+    if (m.text) {
+      bubbleChildren.push(document.createTextNode(m.text));
+    }
+    if (m.images && m.images.length > 0) {
+      const imgsContainer = el("div", { class: "msg-images" });
+      m.images.forEach(img => {
+        const src = img.url || (img.data ? `data:${img.mimeType || "image/png"};base64,${img.data}` : "");
+        if (!src) return;
+        const imgEl = el("img", {
+          class: "msg-image-thumb",
+          src,
+          alt: "用户上传图片",
+          title: "点击查看大图",
+          onclick: () => openLightbox(src)
+        });
+        imgsContainer.appendChild(imgEl);
+      });
+      bubbleChildren.push(imgsContainer);
+    }
+    const bubble = el("div", { class: "bubble" + (isSteer ? " steer" : "") }, bubbleChildren);
     const node = el("div", { class: "msg user" }, [bubble]);
     $("#chat-inner").appendChild(node);
     scrollBottom();
@@ -2243,8 +2455,16 @@ function submitPrompt() {
 
   const ta = $("#composer");
   const text = ta ? ta.value.trim() : "";
+  const imagesToSend = (state.attachedImages && state.attachedImages.length > 0)
+    ? state.attachedImages.map(img => ({
+        type: "image",
+        data: img.data,
+        mimeType: img.mimeType
+      }))
+    : undefined;
+
   const hint = $(".composer-hint");
-  if (!text) return;
+  if (!text && (!imagesToSend || imagesToSend.length === 0)) return;
   if (!state.wsConnected) {
     if (hint) hint.textContent = "发送失败：WebSocket 未连接。正在尝试重连…";
     scheduleReconnect(0);
@@ -2255,8 +2475,11 @@ function submitPrompt() {
 
   if (hint) hint.textContent = "pi 会执行命令与读写你的文件 —— 请注意操作内容。"; // restore default
   // Render the user's message locally for instant feedback.
-  appendMessageNode("user", { text });
+  appendMessageNode("user", { text, images: state.attachedImages ? [...state.attachedImages] : [] });
+  
   ta.value = "";
+  state.attachedImages = [];
+  renderImagePreviews();
   autoResize();
 
   state.streaming = true;
@@ -2266,10 +2489,10 @@ function submitPrompt() {
   refreshStreamingContent();
 
   // Set session name from the first prompt of a brand-new session.
-  if (state.currentSessionFile == null) {
+  if (state.currentSessionFile == null && text) {
     sendWs({ type: "set_session_name", name: text.slice(0, 60).replace(/\s+/g, " ") });
   }
-  sendWs({ type: "prompt", message: text });
+  sendWs({ type: "prompt", message: text, images: imagesToSend });
 }
 
 function autoResize() {
@@ -2409,20 +2632,139 @@ async function init() {
     });
   }
 
-  // Keyboard shortcut: Ctrl+M / Cmd+M to toggle model selector, Escape to abort if streaming
+  // Keyboard shortcuts:
+  // Ctrl+M / Cmd+M: toggle model selector
+  // Ctrl+Shift+N / Cmd+Shift+N: new session
+  // Ctrl+K / Cmd+K or Ctrl+/: search sidebar
+  // Ctrl+B / Cmd+B: toggle sidebar
+  // Escape: abort if streaming, close modals / lightbox / search
   window.addEventListener("keydown", (e) => {
-    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "m") {
+    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+    const isCmdOrCtrl = isMac ? e.metaKey : e.ctrlKey;
+
+    if (isCmdOrCtrl && e.shiftKey && e.key.toLowerCase() === "n") {
+      e.preventDefault();
+      startNewSession(true);
+      return;
+    }
+    if ((isCmdOrCtrl && e.key.toLowerCase() === "k") || (e.ctrlKey && e.key === "/")) {
+      e.preventDefault();
+      const search = $("#sidebarSearch");
+      if (search) {
+        if (window.innerWidth <= 768) {
+          $(".app").classList.add("sidebar-open");
+        }
+        search.focus();
+        search.select();
+      }
+      return;
+    }
+    if (isCmdOrCtrl && e.key.toLowerCase() === "b") {
+      e.preventDefault();
+      toggleSidebar();
+      return;
+    }
+    if (isCmdOrCtrl && e.key.toLowerCase() === "m") {
       e.preventDefault();
       toggleModelMenu();
-    } else if (e.key === "Escape" && state.streaming) {
+      return;
+    }
+    if (e.key === "Escape") {
+      const lightbox = $("#imageLightbox");
+      if (lightbox && lightbox.style.display !== "none") {
+        closeLightbox();
+        return;
+      }
       const isMenuOpen = $("#modelMenu")?.classList.contains("open") || $("#thinkingMenu")?.classList.contains("open");
       const isModalOpen = $("#cwdModal")?.classList.contains("open");
-      if (!isMenuOpen && !isModalOpen) {
+      if (isMenuOpen || isModalOpen) {
+        if ($("#modelMenu")) $("#modelMenu").classList.remove("open");
+        if ($("#thinkingMenu")) $("#thinkingMenu").classList.remove("open");
+        if (isModalOpen) closeCwdModal();
+        return;
+      }
+      if (state.streaming) {
         abortGeneration();
+        return;
+      }
+      if (document.activeElement === $("#sidebarSearch")) {
+        $("#sidebarSearch").blur();
       }
     }
   });
 
+  // Export chat button
+  const exportBtn = $("#btnExportChat");
+  if (exportBtn) {
+    exportBtn.addEventListener("click", exportCurrentSession);
+  }
+
+  // Image attach / file picker / paste / drag-and-drop
+  const btnAttach = $("#btnAttachImage");
+  const fileInput = $("#imageFileInput");
+  if (btnAttach && fileInput) {
+    btnAttach.addEventListener("click", () => fileInput.click());
+    fileInput.addEventListener("change", (e) => {
+      handleImageFiles(e.target.files);
+      fileInput.value = "";
+    });
+  }
+
+  // Image paste support
+  document.addEventListener("paste", (e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const files = [];
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf("image") !== -1) {
+        const file = items[i].getAsFile();
+        if (file) files.push(file);
+      }
+    }
+    if (files.length > 0) {
+      handleImageFiles(files);
+      const ta = $("#composer");
+      if (ta) ta.focus();
+    }
+  });
+
+  // Global preventDefault to avoid browser opening dragged images in new tab
+  window.addEventListener("dragover", (e) => e.preventDefault(), false);
+  window.addEventListener("drop", (e) => e.preventDefault(), false);
+
+  // Drag and drop images to composer
+  const composerBox = $("#composerInner") || $(".composer");
+  if (composerBox) {
+    composerBox.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      composerBox.classList.add("drag-over");
+    });
+    composerBox.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      composerBox.classList.remove("drag-over");
+    });
+    composerBox.addEventListener("drop", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      composerBox.classList.remove("drag-over");
+      if (e.dataTransfer?.files) {
+        handleImageFiles(e.dataTransfer.files);
+      }
+    });
+  }
+
+  // Lightbox close listeners
+  const lightboxEl = $("#imageLightbox");
+  if (lightboxEl) {
+    lightboxEl.addEventListener("click", (e) => {
+      if (e.target === lightboxEl || e.target.id === "lightboxClose") {
+        closeLightbox();
+      }
+    });
+  }
+
   document.addEventListener("click", (e) => {
     if (!e.target.closest("#modelMenu") && !e.target.closest("#modelPill") && !e.target.closest("#emptyChangeModelBtn")) {
       const m = $("#modelMenu");
@@ -2448,12 +2790,7 @@ async function init() {
 
   // sidebar search (client side filter)
   $("#sidebarSearch").addEventListener("input", (e) => {
-    const q = e.target.value.toLowerCase();
-    document.querySelectorAll(".session-item").forEach((it) => {
-      const titleEl = it.querySelector(".title");
-      const text = titleEl ? titleEl.textContent.toLowerCase() : it.textContent.toLowerCase();
-      it.style.display = text.includes(q) ? "" : "none";
-    });
+    filterSessions(e.target.value);
   });
 
   // Restore sidebar state for desktop, collapse by default on mobile

package/public/index.html

@@ -24,7 +24,11 @@
       <div class="sidebar-bottom">
         <div id="connStatus" class="conn-status" title="点击可重新连接"><span id="connDot" style="color: var(--danger);">●</span>&nbsp;<span id="connLabel">连接中…</span></div>
         <div class="sidebar-bottom-meta">
-          <a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a>
+          <div class="sidebar-bottom-links">
+            <a href="https://pi.dev" target="_blank" rel="noopener">pi.dev</a>
+            <span class="sidebar-link-sep">·</span>
+            <a href="https://github.com/liguoshuai-1990/pi-web-chat" target="_blank" rel="noopener">pi-web-chat</a>
+          </div>
           <span id="appVersion" class="app-version" title="pi-web-chat 版本"></span>
         </div>
       </div>
@@ -59,6 +63,14 @@
             <span class="thinking-label" id="thinkingPillLabel">High</span>
           </button>
         </div>
+        <button class="btn-topbar-action" id="btnExportChat" title="导出当前对话为 Markdown">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
+          <span class="topbar-action-label">导出</span>
+        </button>
         <div class="model-menu" id="modelMenu"></div>
         <div class="thinking-menu" id="thinkingMenu"></div>
       </div>
@@ -92,8 +104,15 @@
       </div>
 
       <div class="composer">
+        <div class="image-preview-bar" id="imagePreviewBar" style="display:none;"></div>
         <div class="composer-inner" id="composerInner">
-          <textarea id="composer" rows="1" placeholder="给 pi 发消息…  (Enter 发送，Shift+Enter 换行)"></textarea>
+          <input type="file" id="imageFileInput" accept="image/*,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg" multiple style="display:none;">
+          <button class="attach-btn" id="btnAttachImage" type="button" title="添加附件 / 图片 (支持拖拽与截图粘贴)">
+            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+            </svg>
+          </button>
+          <textarea id="composer" rows="1" placeholder="给 pi 发消息…  (Enter 发送，Shift+Enter 换行，支持粘贴/拖拽图片)"></textarea>
           <button class="steer-btn" id="steerBtn" title="在 AI 运行过程中插入指导指令" style="display:none;">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
             <span>插入指令</span>
@@ -135,6 +154,12 @@
     </svg>
   </button>
 
+  <!-- Image Lightbox Modal -->
+  <div class="image-lightbox" id="imageLightbox" style="display:none;">
+    <button class="lightbox-close" id="lightboxClose" title="关闭大图">&times;</button>
+    <img id="lightboxImg" src="" alt="大图预览">
+  </div>
+
   <!-- Toast notification -->
   <div class="toast" id="toast"></div>
   <script src="/app.js"></script>

package/public/style.css

@@ -217,7 +217,80 @@ body {
 .is-resizing .sidebar {
   transition: none !important;
 }
-.sidebar-empty { color: var(--text-dim); font-size: 13px; padding: 20px 12px; text-align: center; }
+/* Message Images */
+.msg-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+.msg.user .msg-images {
+  justify-content: flex-end;
+}
+.msg-image-thumb {
+  width: 90px;
+  height: 90px;
+  border-radius: 8px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.msg-image-thumb:hover {
+  transform: scale(1.04);
+  opacity: 0.9;
+}
+
+/* Image Lightbox */
+.image-lightbox {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  cursor: zoom-out;
+  animation: fade 0.15s ease;
+}
+.image-lightbox img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+  cursor: default;
+}
+.lightbox-close {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  border: none;
+  color: #fff;
+  font-size: 24px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar-search-empty {
+  color: var(--text-dim);
+  font-size: 12.5px;
+  padding: 16px 12px;
+  text-align: center;
+}
 
 .sidebar-bottom {
   flex-shrink: 0;
@@ -235,6 +308,20 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
+}
+.sidebar-bottom-links {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sidebar-link-sep {
+  color: var(--text-dim);
+  font-size: 11px;
 }
 .app-version {
   font-size: 11px;
@@ -737,16 +824,28 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.badge-default {
-  font-size: 10px;
-  padding: 1px 6px;
-  border-radius: 999px;
-  background: rgba(59, 130, 246, 0.18);
-  color: #60a5fa;
-  font-weight: 600;
-  line-height: 1.3;
+.btn-topbar-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  border-radius: 8px;
+  padding: 5px 9px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
   flex-shrink: 0;
 }
+.btn-topbar-action:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+.topbar-action-label {
+  font-weight: 500;
+}
 .empty-model-features {
   display: flex;
   align-items: center;
@@ -780,25 +879,98 @@ body {
 }
 .suggestions .chip:hover { border-color: var(--text-dim); color: var(--text); }
 
-/* ---------- Composer ---------- */
+/* ---------- Composer & Image Upload ---------- */
 .composer {
-  padding: 16px 24px 24px;
+  padding: 12px 24px 20px;
   background: var(--bg);
 }
+.image-preview-bar {
+  max-width: 820px;
+  margin: 0 auto 8px auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 4px 0;
+}
+.image-preview-item {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: #111;
+  flex-shrink: 0;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+.image-preview-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.image-preview-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+  padding: 0;
+  transition: background 0.15s;
+}
+.image-preview-remove:hover {
+  background: var(--danger, #ef4444);
+}
+
 .composer-inner {
   max-width: 820px; margin: 0 auto;
   background: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: 24px;
-  padding: 6px 8px 6px 18px;
+  padding: 6px 8px 6px 8px;
   display: flex; align-items: flex-end; gap: 8px;
-  transition: border-color .15s;
+  transition: border-color .15s, box-shadow .15s;
+}
+.composer-inner.drag-over {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(16, 163, 127, 0.3);
 }
 .composer-inner:focus-within { border-color: var(--text-dim); }
 .composer-inner.aborting {
   border-color: var(--danger);
   box-shadow: 0 0 0 1px var(--danger);
 }
+.composer .attach-btn {
+  width: 32px;
+  height: 32px;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
+  flex-shrink: 0;
+}
+.composer .attach-btn:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+.composer .attach-btn:active {
+  transform: scale(0.92);
+}
 .composer textarea {
   flex: 1; background: transparent; border: none; outline: none; resize: none;
   color: var(--text); font-family: inherit; font-size: 15px; line-height: 20px;

package/scripts/rpctest.mjs

@@ -0,0 +1,49 @@
+import { spawn } from "child_process";
+import os from "os";
+import path from "path";
+import { existsSync } from "fs";
+
+function resolvePiBin() {
+  if (process.env.PI_BIN && existsSync(process.env.PI_BIN)) return process.env.PI_BIN;
+  const home = os.homedir();
+  const candidates = [
+    path.join(home, ".npm-global/bin/pi"),
+    "/usr/local/bin/pi",
+    "/usr/bin/pi",
+  ];
+  for (const c of candidates) if (existsSync(c)) return c;
+  return "pi";
+}
+
+const PI_BIN = resolvePiBin();
+const SESSIONS_DIR = process.env.PI_SESSIONS_DIR || path.join(os.homedir(), ".pi/agent/sessions");
+
+console.log("Spawning pi...");
+const proc = spawn(PI_BIN, ["--mode", "rpc", "--session-dir", SESSIONS_DIR], {
+  cwd: os.homedir(),
+  env: { ...process.env, PI_SKIP_VERSION_CHECK: "1" }
+});
+
+proc.stdout.on("data", (d) => {
+  console.log("STDOUT:", d.toString().trim());
+});
+proc.stderr.on("data", (d) => {
+  console.error("STDERR:", d.toString().trim());
+});
+proc.on("exit", (code, sig) => console.log("EXIT:", code, "sig:", sig));
+
+// Send set_session_name FIRST, then prompt
+setTimeout(() => {
+  console.log("Sending set_session_name...");
+  proc.stdin.write(JSON.stringify({ id: "1", type: "set_session_name", name: "My New Web Session Name" }) + "\n");
+}, 500);
+
+setTimeout(() => {
+  console.log("Sending prompt...");
+  proc.stdin.write(JSON.stringify({ id: "2", type: "prompt", message: "Say exactly: OK" }) + "\n");
+}, 1000);
+
+setTimeout(() => {
+  console.log("Killing...");
+  proc.kill("SIGTERM");
+}, 12000);

package/server.js

@@ -492,6 +492,10 @@ class PiAgent {
     this.pending.clear();
     for (const s of this.sockets) { try { s.close(); } catch {} }
     this.sockets.clear();
+    this.buffer = "";
+    this.eventBuffer = [];
+    this.bufferHead = 0;
+    this.lastUserPrompt = null;
     try { this.proc && this.proc.kill("SIGTERM"); } catch {}
   }
 }
@@ -574,9 +578,21 @@ app.post("/api/set-default-model", async (req, res) => {
     }
 
     const isProject = scope === "project" && reqCwd;
-    const settingsPath = isProject
-      ? path.join(normalizeCwd(reqCwd), ".pi", "settings.json")
-      : path.join(home(), ".pi", "agent", "settings.json");
+    let settingsPath;
+    if (isProject) {
+      const resolvedCwd = normalizeCwd(reqCwd);
+      try {
+        const s = await stat(resolvedCwd);
+        if (!s.isDirectory()) {
+          return res.status(400).json({ ok: false, error: "指定的工作目录不是一个有效目录" });
+        }
+      } catch {
+        return res.status(400).json({ ok: false, error: "指定的工作目录不存在或无权访问" });
+      }
+      settingsPath = path.join(resolvedCwd, ".pi", "settings.json");
+    } else {
+      settingsPath = path.join(home(), ".pi", "agent", "settings.json");
+    }
 
     await mkdir(path.dirname(settingsPath), { recursive: true });
 
@@ -917,7 +933,47 @@ const httpServer = app.listen(PORT, () => {
   console.log(`pi-web-chat on http://localhost:${PORT}`);
 });
 
-const wss = new WebSocketServer({ server: httpServer, path: "/ws" });
+// Origin check helper to defend against Cross-Site WebSocket Hijacking (CSWSH)
+function isAllowedOrigin(origin, host) {
+  if (!origin) return true; // Direct non-browser clients (curl, electron, etc.)
+  try {
+    const originUrl = new URL(origin);
+    const originHost = originUrl.host;
+    // Direct match with Host header (same-origin)
+    if (originHost.toLowerCase() === (host || "").toLowerCase()) return true;
+
+    // Allow localhost / 127.0.0.1 loopback variations
+    const isLocalOrigin = originUrl.hostname === "localhost" || originUrl.hostname === "127.0.0.1" || originUrl.hostname === "::1";
+    const hostName = (host || "").split(":")[0].toLowerCase();
+    const isLocalHost = hostName === "localhost" || hostName === "127.0.0.1" || hostName === "::1";
+    if (isLocalOrigin && isLocalHost) return true;
+
+    // Custom allowed origins from ALLOWED_ORIGINS env var (comma-separated)
+    if (process.env.ALLOWED_ORIGINS) {
+      const allowed = process.env.ALLOWED_ORIGINS.split(",").map(s => s.trim().toLowerCase());
+      if (allowed.includes(origin.toLowerCase()) || allowed.includes(originUrl.origin.toLowerCase())) {
+        return true;
+      }
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+const wss = new WebSocketServer({
+  server: httpServer,
+  path: "/ws",
+  verifyClient: (info, callback) => {
+    const origin = info.origin || info.req.headers.origin;
+    const host = info.req.headers.host;
+    if (!isAllowedOrigin(origin, host)) {
+      console.warn(`[pi-web-chat] Rejected WebSocket connection from unauthorized origin: ${origin} (host: ${host})`);
+      return callback(false, 403, "Forbidden: Cross-origin WebSocket connection denied");
+    }
+    callback(true);
+  }
+});
 
 // WebSocket server heartbeat (ping/pong at protocol level)
 const heartbeatInterval = setInterval(() => {