@liguoshuai/pi-web-chat 1.10.2 → 2.0.0

package/README.md

@@ -1,10 +1,15 @@
 # pi-web-chat
 
+[![npm version](https://img.shields.io/npm/v/@liguoshuai/pi-web-chat.svg)](https://www.npmjs.com/package/@liguoshuai/pi-web-chat)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-brightgreen.svg)](https://nodejs.org/)
+
 一个 [pi](https://pi.dev) 编程代理的 Web 界面，风格参考 ChatGPT / Gemini ——
 左侧历史会话侧边栏 + 右侧对话区 + 底部输入框。底层通过 pi 的 **RPC 模式**
 (`pi --mode rpc`) 与 pi 子进程通信，前端走 WebSocket 流式渲染。
 
-> 项目主页：https://github.com/liguoshuai-1990/pi-web-chat
+> 📦 **NPM 软件包**：[`@liguoshuai/pi-web-chat`](https://www.npmjs.com/package/@liguoshuai/pi-web-chat)  
+> 🔗 **项目主页**：https://github.com/liguoshuai-1990/pi-web-chat
 
 ---
 
@@ -35,7 +40,7 @@
 
 ---
 
-### 2. 安装 pi 编程代理 (pi agent)
+### 2. 安装底层 pi 编程代理 (pi agent)
 
 `pi-web-chat` 通过 RPC 模式 (`pi --mode rpc`) 与底层 `pi` 命令行 Agent 子进程通信。若系统中尚未安装 `pi`，请选择以下任一方式进行全局安装：
 
@@ -92,39 +97,79 @@ pi
 
 ---
 
-### 4. 克隆与启动 pi-web-chat
+### 4. 安装与启动 pi-web-chat
 
-#### 克隆仓库与安装依赖
+#### 方式 A：通过 npm / pnpm 全局安装（推荐，最快捷）
 
 ```bash
-git clone https://github.com/liguoshuai-1990/pi-web-chat.git
-cd pi-web-chat
-npm install
+# 使用 npm 全局安装
+npm install -g @liguoshuai/pi-web-chat
+
+# 或使用 pnpm 全局安装
+pnpm add -g @liguoshuai/pi-web-chat
+```
+
+安装完成后，在终端任意目录下直接运行 `pi-web-chat` 命令启动：
+
+```bash
+# 启动 Web 服务（默认监听 3000 端口，工作目录为当前目录）
+pi-web-chat
+
+# 自定义端口和指定工作目录 (cwd)
+pi-web-chat --port 8080 --cwd /path/to/your/project
+```
+
+#### 方式 B：使用 npx 免安装即时运行
+
+无需全局安装，直接通过 npx 快速启动：
+
+```bash
+npx @liguoshuai/pi-web-chat
+# 或指定参数
+npx @liguoshuai/pi-web-chat --port 8080 --cwd /path/to/your/project
 ```
 
-#### 启动 Web 服务
+#### 方式 C：通过 Git 源码克隆与启动（适合二次开发）
 
 ```bash
+git clone https://github.com/liguoshuai-1990/pi-web-chat.git
+cd pi-web-chat
+npm install
 npm start
 ```
 
-#### 打开浏览器体验
-在浏览器中访问：
-👉 **http://localhost:3000**
+---
+
+### 5. 打开浏览器体验
+
+Web 服务启动后，在浏览器中访问：
+👉 **http://localhost:3000** （或自定义的端口）
 
 ---
 
-### 5. 命令行启动选项与全局 CLI（可选）
+### 6. CLI 命令行参数与选项
 
-你也可以通过 `bin/pi-web-chat.js` 指定工作目录或监听端口：
+`pi-web-chat` CLI 提供了便捷的命令行参数与环境变量支持：
 
-```bash
-# 指定端口和工作目录 (cwd)
-node bin/pi-web-chat.js --port 8080 --cwd /path/to/your/project
+```text
+用法:
+  pi-web-chat [选项]
+
+选项:
+  -p, --port <number>    指定 Web 服务监听端口（默认: 3000，或读取 PORT 环境变量）
+  -c, --cwd <path>       指定 pi 会话初始工作目录（默认: 当前终端路径 / 用户主目录）
+  -h, --help             显示帮助信息
+
+环境变量:
+  PORT                   服务端口（同 --port）
+  PI_BIN                 pi 可执行文件绝对路径（未设置时自动探测）
+  PI_SESSIONS_DIR        pi 会话数据存储目录（默认: ~/.pi/agent/sessions）
 
-# 或通过 npm 全局安装后在任意目录下启动
-npm install -g .
-pi-web-chat --port 8080
+运行示例:
+  pi-web-chat                                     # 默认端口 3000 启动
+  pi-web-chat --port 8080                         # 指定 8080 端口启动
+  pi-web-chat --port 8080 --cwd ~/projects/my-app # 指定端口与初始工作区
+  PORT=4000 pi-web-chat                           # 通过环境变量指定端口
 ```
 
 ---

package/docs/CHANGELOG.md

@@ -7,6 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [2.0.0] - 2026-08-30
+
+### Major Architecture Refactoring (Monorepo & Multi-Client Ecosystem)
+- **Monorepo 多端大仓库架构升级**：
+  - 项目重构为 `pi-chat` Monorepo，采用 pnpm Workspaces 进行多包统一管理。
+  - 核心架构拆分为 `clients/web`、`clients/android`、`clients/harmony`、`server`（VPS 网关）与 `packages/protocol`（跨端共享协议）。
+- **服务端网关统一解耦与单真源设计 (`@pi-chat/server`)**：
+  - 提取 `@pi-chat/server` 为统一后端网关核心，支持全双工 WebSocket、SSE 打字机增量推送（`/api/stream`）、多端统一 Token 鉴权（`AUTH_TOKEN`）、30s 心跳保活与空闲进程内存自动回收。
+  - `clients/web/server.js` 瘦身为极简适配层，保持对 `@liguoshuai/pi-web-chat` npm 发行版及 `pi-web-chat` 全局 CLI 的 100% 独立向后兼容。
+- **Android 原生端应用骨架 (`clients/android`)**：
+  - 基于 Kotlin + Jetpack Compose + Material 3 + OkHttp WebSocket + Coroutines/StateFlow 搭建，支持生成 APK 安装包。
+- **华为鸿蒙 OS 原生端应用骨架 (`clients/harmony`)**：
+  - 基于 ArkTS + 声明式 ArkUI (Stage 模型，API 12+) + `@ohos.net.webSocket` 搭建，支持生成 HAP 安装包。
+- **跨端标准通信协议 (`@pi-chat/protocol`)**：
+  - 统一 JSON Schema 标准、TypeScript 定义与自动容错校验器，三端交互格式完全对齐。
+
+---
+
+### Added & Published
+- **NPM 官方包发布与全局命令行安装支持 (Official NPM Package & Global CLI)**：
+  - 正式发布软件包至 npm 官方注册表（[`@liguoshuai/pi-web-chat`](https://www.npmjs.com/package/@liguoshuai/pi-web-chat)），支持通过 `npm i -g @liguoshuai/pi-web-chat` 或 `pnpm add -g @liguoshuai/pi-web-chat` 全局安装并随时随地使用 `pi-web-chat` 命令启动。
+  - 支持通过 `npx @liguoshuai/pi-web-chat` 免安装即时启动，并在 README 中完善了全局安装、npx 启动与源码安装三种模式的快速指引。
+
+### Fixed & Improved
+- **移动端附件导入功能全面重构与修复 (Mobile Attachment Import Fix)**：
+  - **移动端文件选择器唤起修复**：将上传触发器重构为标准可访问的 `<label for="imageFileInput">` 并配合 CSS `.sr-only-file-input`，彻底解决 iOS Safari、Android Chrome、移动端 WebView 及微信内置浏览器中因 `display: none` 导致异步 JS `.click()` 被浏览器安全策略拦截而无法调起系统相册/文件选择器的问题。
+  - **移动端格式与相机照片兼容性**：扩展对 iOS HEIC/HEIF 相机原图、AVIF、ICO、SVG 及大写扩展名的识别与支持。
+  - **移动端高清原图智能压缩降采样 (Client-side Downscale)**：针对手机拍摄的超高分辨率照片（12MP~48MP），自动使用 Canvas 进行等比下采样（最大 2048px）与高质量编码压缩，防止超大 Base64 数据挤爆移动端内存或造成 WebSocket 通信中断，同时确保所有主流大模型 Vision API 稳定解析。
+  - **文本与源码文件附件导入支持 (Text & Code Attachment Parsing)**：支持通过附件按钮、拖拽或剪贴板直接导入 `.py`、`.js`、`.json`、`.md`、`.txt`、`.log` 等各类代码和文本附件，自动提取并按对应语言 Markdown 代码块注入输入框。
+  - **预览交互与触控体验优化 (Touch UX & Preview Lightbox)**：输入框待发送图片缩略图支持点击直接弹出 Lightbox 大图预览，加大移动端单张删除按钮的触控热区（22px）与操作反馈。
+
+---
+
 ## [1.10.2] - 2026-08-30
 
 ### Fixed & Improved

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.10.2",
+  "version": "2.0.0",
   "description": "A ChatGPT/Gemini-style web UI for the pi coding agent, powered by pi's RPC mode.",
   "type": "module",
   "main": "server.js",
@@ -16,12 +16,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "start": "node server.js",
-    "dev": "node --watch server.js",
-    "test": "node --test",
-    "prepare": "node -e \"import('fs').then(fs => { try { fs.chmodSync('bin/pi-web-chat.js', 0o755); } catch {} })\""
-  },
   "keywords": [
     "pi",
     "coding-agent",
@@ -39,11 +33,21 @@
   },
   "homepage": "https://github.com/liguoshuai-1990/pi-web-chat#readme",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
+    "@liguoshuai/pi-chat-protocol": "2.0.0",
+    "@liguoshuai/pi-chat-server": "2.0.0",
     "express": "^4.21.2",
     "ws": "^8.18.0"
+  },
+  "scripts": {
+    "start": "node server.js",
+    "dev": "node --watch server.js",
+    "test": "node --test"
   }
-}
+}

package/public/app.js

@@ -20,6 +20,37 @@ window.onerror = function (message, source, lineno, colno, error) {
 };
 
 const API = ""; // same origin
+
+function getAuthToken() {
+  try {
+    const urlToken = new URLSearchParams(window.location.search).get("token");
+    if (urlToken) {
+      localStorage.setItem("pi_auth_token", urlToken);
+      return urlToken;
+    }
+    return localStorage.getItem("pi_auth_token") || "";
+  } catch {
+    return "";
+  }
+}
+
+function authFetch(url, options = {}) {
+  const token = getAuthToken();
+  const headers = { ...(options.headers || {}) };
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  return fetch(url, { ...options, headers }).then(async (res) => {
+    if (res.status === 401) {
+      const entered = prompt("Pi Gateway 开启了访问鉴权，请输入访问 Token：");
+      if (entered) {
+        localStorage.setItem("pi_auth_token", entered.trim());
+        window.location.reload();
+      }
+    }
+    return res;
+  });
+}
 const state = {
   ws: null,
   wsConnected: false,
@@ -120,7 +151,7 @@ async function loadServerConfig() {
   }
   try {
     const cwdParam = state.cwd ? `?cwd=${encodeURIComponent(state.cwd)}` : "";
-    const res = await fetch(`${API}/api/config${cwdParam}`);
+    const res = await authFetch(`${API}/api/config${cwdParam}`);
     const data = await res.json();
     if (data.home) state.homeDir = data.home;
     if (data.serverCwd) state.serverCwd = data.serverCwd;
@@ -199,7 +230,7 @@ async function confirmCwdChange() {
   if (!rawPath) return;
 
   try {
-    const res = await fetch(`${API}/api/validate-dir?path=${encodeURIComponent(rawPath)}`);
+    const res = await authFetch(`${API}/api/validate-dir?path=${encodeURIComponent(rawPath)}`);
     const data = await res.json();
     if (data.ok && data.path) {
       let recents = [];
@@ -489,7 +520,7 @@ const el = (tag, props = {}, children = []) => {
 // ---- Sidebar / sessions ----
 async function refreshSessions() {
   const cwd = state.cwd || "";
-  const res = await fetch(`${API}/api/sessions?cwd=${encodeURIComponent(cwd)}`);
+  const res = await authFetch(`${API}/api/sessions?cwd=${encodeURIComponent(cwd)}`);
   const data = await res.json();
   renderSidebar(data.sessions || []);
 }
@@ -579,7 +610,7 @@ async function deleteSession(file, title) {
     return;
   }
   try {
-    const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`, {
+    const res = await authFetch(`${API}/api/session?file=${encodeURIComponent(file)}`, {
       method: "DELETE",
     });
     const data = await res.json();
@@ -633,7 +664,7 @@ function initMobileToolbarFab() {
 async function syncSessionHistory(file, force = false) {
   if (!file) return;
   try {
-    const res = await fetch(`${API}/api/session?file=${encodeURIComponent(file)}`);
+    const res = await authFetch(`${API}/api/session?file=${encodeURIComponent(file)}`);
     if (!res.ok) return;
     const data = await res.json();
     if (!data || data.error) return;
@@ -812,7 +843,11 @@ function renderImagePreviews() {
   }
   bar.style.display = "flex";
   state.attachedImages.forEach((img, idx) => {
-    const item = el("div", { class: "image-preview-item" }, [
+    const item = el("div", {
+      class: "image-preview-item",
+      title: "点击查看大图",
+      onclick: () => openLightbox(img.url)
+    }, [
       el("img", { src: img.url, alt: "预览" }),
       el("button", {
         class: "image-preview-remove",
@@ -840,38 +875,173 @@ function detectImageMimeType(file) {
     bmp: "image/bmp",
     svg: "image/svg+xml",
     ico: "image/x-icon",
-    avif: "image/avif"
+    avif: "image/avif",
+    heic: "image/heic",
+    heif: "image/heif"
   };
   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 => {
+async function processImageFile(file) {
+  const mimeType = detectImageMimeType(file);
+  const dataUrl = await new Promise((resolve, reject) => {
     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.onload = () => resolve(reader.result);
+    reader.onerror = reject;
     reader.readAsDataURL(file);
   });
+
+  if (typeof dataUrl !== "string") return null;
+
+  // For SVG or GIF (which might be animated), or small images, keep original
+  if (mimeType.includes("svg") || mimeType.includes("gif") || (file.size && file.size < 800 * 1024)) {
+    const commaIdx = dataUrl.indexOf(",");
+    const base64 = commaIdx !== -1 ? dataUrl.slice(commaIdx + 1) : dataUrl;
+    return { data: base64, mimeType, url: dataUrl };
+  }
+
+  // Optimize large phone camera photos / oversized images via canvas downscale
+  try {
+    const img = await new Promise((resolve, reject) => {
+      const i = new Image();
+      i.onload = () => resolve(i);
+      i.onerror = reject;
+      i.src = dataUrl;
+    });
+
+    const maxDim = 2048;
+    let { width, height } = img;
+    if (width > maxDim || height > maxDim) {
+      if (width > height) {
+        height = Math.round((height * maxDim) / width);
+        width = maxDim;
+      } else {
+        width = Math.round((width * maxDim) / height);
+        height = maxDim;
+      }
+    }
+
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Canvas 2D unavailable");
+    ctx.drawImage(img, 0, 0, width, height);
+
+    const targetMime = (mimeType === "image/png" && file.size < 2 * 1024 * 1024) ? "image/png" : "image/jpeg";
+    const quality = 0.88;
+    const optimizedUrl = canvas.toDataURL(targetMime, quality);
+    const commaIdx = optimizedUrl.indexOf(",");
+    const base64 = commaIdx !== -1 ? optimizedUrl.slice(commaIdx + 1) : optimizedUrl;
+
+    return {
+      data: base64,
+      mimeType: targetMime,
+      url: optimizedUrl
+    };
+  } catch {
+    // Fallback to original base64 if canvas processing is unsupported
+    const commaIdx = dataUrl.indexOf(",");
+    const base64 = commaIdx !== -1 ? dataUrl.slice(commaIdx + 1) : dataUrl;
+    return { data: base64, mimeType, url: dataUrl };
+  }
+}
+
+function getLanguageFromFilename(filename) {
+  if (!filename) return "";
+  const ext = filename.split(".").pop().toLowerCase();
+  const langMap = {
+    js: "javascript", mjs: "javascript", cjs: "javascript",
+    ts: "typescript", tsx: "tsx", jsx: "jsx",
+    py: "python", pyw: "python",
+    rb: "ruby", rs: "rust", go: "go", java: "java",
+    c: "c", cpp: "cpp", cc: "cpp", cxx: "cpp", h: "c", hpp: "cpp",
+    sh: "bash", bash: "bash", zsh: "bash",
+    json: "json", yaml: "yaml", yml: "yaml", toml: "toml",
+    md: "markdown", markdown: "markdown",
+    html: "html", htm: "html", css: "css", scss: "scss", less: "less",
+    sql: "sql", xml: "xml", svg: "xml",
+    log: "log", env: "ini", ini: "ini", conf: "ini",
+    diff: "diff", patch: "diff", dockerfile: "dockerfile", makefile: "makefile"
+  };
+  return langMap[ext] || "";
 }
 
+function isTextFile(file) {
+  if (file.type && (file.type.startsWith("text/") || file.type.includes("json") || file.type.includes("xml") || file.type.includes("javascript") || file.type.includes("yaml"))) {
+    return true;
+  }
+  const name = file.name ? file.name.toLowerCase() : "";
+  return /\.(txt|md|markdown|json|js|mjs|cjs|ts|tsx|jsx|py|pyw|rb|php|java|c|cpp|cc|cxx|h|hpp|rs|go|sh|bash|zsh|sql|html|htm|css|scss|sass|less|vue|svelte|yaml|yml|toml|ini|env|xml|log|csv|tsv|diff|patch|dockerfile|makefile)$/i.test(name);
+}
+
+async function handleIncomingFiles(files) {
+  if (!files || files.length === 0) return;
+  const list = Array.from(files);
+
+  let imageCount = 0;
+  let textCount = 0;
+
+  for (const file of list) {
+    const isImg = (file.type && file.type.startsWith("image/")) ||
+      (file.name && /\.(png|jpe?g|webp|gif|bmp|svg|ico|avif|heic|heif)$/i.test(file.name));
+
+    if (isImg) {
+      try {
+        const imgObj = await processImageFile(file);
+        if (imgObj) {
+          state.attachedImages.push(imgObj);
+          renderImagePreviews();
+          imageCount++;
+        }
+      } catch (err) {
+        console.error("Failed to process image file:", err);
+      }
+    } else if (isTextFile(file)) {
+      if (file.size > 1024 * 1024) {
+        showToast(`文件 ${file.name} 较大，建议放入工作目录供 pi 访问`);
+        continue;
+      }
+      try {
+        const content = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsText(file);
+        });
+        if (typeof content === "string") {
+          const lang = getLanguageFromFilename(file.name);
+          const composer = $("#composer");
+          if (composer) {
+            const block = `[附件: ${file.name}]\n\`\`\`${lang}\n${content}\n\`\`\`\n`;
+            if (composer.value.trim()) {
+              composer.value = composer.value.trimEnd() + "\n\n" + block;
+            } else {
+              composer.value = block;
+            }
+            autoResize();
+            composer.focus();
+            textCount++;
+          }
+        }
+      } catch (err) {
+        console.error("Failed to read text file:", err);
+      }
+    } else {
+      showToast(`暂不支持直接解析该附件格式 (${file.name || "未知类型"})`);
+    }
+  }
+
+  if (imageCount > 0) {
+    showToast(`已添加 ${imageCount} 张图片附件`);
+  }
+  if (textCount > 0) {
+    showToast(`已导入 ${textCount} 个文本文件`);
+  }
+}
+
+const handleImageFiles = handleIncomingFiles;
+
 function exportCurrentSession() {
   const chatInner = $("#chat-inner");
   if (!chatInner || chatInner.children.length === 0) {
@@ -1428,7 +1598,9 @@ function connectWs(opts = {}) {
     state.activeToolCalls.clear();
   }
 
-  const url = `${proto}://${location.host}/ws?cwd=${cwd}${sess}`;
+  const token = getAuthToken();
+  const tokParam = token ? `&token=${encodeURIComponent(token)}` : "";
+  const url = `${proto}://${location.host}/ws?cwd=${cwd}${sess}${tokParam}`;
   const ws = new WebSocket(url);
   state.ws = ws;
   ws._gen = myGen;
@@ -1478,6 +1650,15 @@ function connectWs(opts = {}) {
     let obj;
     try { obj = JSON.parse(ev.data); } catch { return; }
     if (obj.type === "pong") return;
+
+    if (obj.type === "error" && (obj.code === "unauthorized" || (obj.message && obj.message.toLowerCase().includes("unauthorized")))) {
+      const entered = prompt("Pi Gateway 开启了访问鉴权，请输入访问 Token：");
+      if (entered) {
+        localStorage.setItem("pi_auth_token", entered.trim());
+        initWebSocket({ explicitNewSession: false, isReconnect: true });
+      }
+      return;
+    }
     handlePiMessage(obj);
   };
 }
@@ -2063,7 +2244,7 @@ function updateEmptyStateModelInfo() {
 
 async function setDefaultModel(m) {
   try {
-    const res = await fetch(`${API}/api/set-default-model`, {
+    const res = await authFetch(`${API}/api/set-default-model`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -2376,7 +2557,7 @@ function updateComposerUI() {
     if (sendBtn) {
       sendBtn.classList.add("stop");
       sendBtn.disabled = !state.wsConnected;
-      sendBtn.textContent = "■";
+      sendBtn.textContent = "";
       sendBtn.title = "中止当前生成";
     }
     if (steerBtn) {
@@ -2714,30 +2895,43 @@ async function init() {
     exportBtn.addEventListener("click", exportCurrentSession);
   }
 
-  // Image attach / file picker / paste / drag-and-drop
+  // Image and file attach / picker / paste / drag-and-drop
   const btnAttach = $("#btnAttachImage");
   const fileInput = $("#imageFileInput");
-  if (btnAttach && fileInput) {
-    btnAttach.addEventListener("click", () => fileInput.click());
+  if (fileInput) {
     fileInput.addEventListener("change", (e) => {
-      handleImageFiles(e.target.files);
+      handleIncomingFiles(e.target.files);
       fileInput.value = "";
     });
   }
 
-  // Image paste support
+  if (btnAttach) {
+    // If not a label (e.g. fallback button), click input
+    if (btnAttach.tagName !== "LABEL") {
+      btnAttach.addEventListener("click", () => fileInput?.click());
+    }
+    // Keyboard accessibility for Enter / Space
+    btnAttach.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        fileInput?.click();
+      }
+    });
+  }
+
+  // Image and file 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) {
+      if (items[i].kind === "file") {
         const file = items[i].getAsFile();
         if (file) files.push(file);
       }
     }
     if (files.length > 0) {
-      handleImageFiles(files);
+      handleIncomingFiles(files);
       const ta = $("#composer");
       if (ta) ta.focus();
     }
@@ -2747,7 +2941,7 @@ async function init() {
   window.addEventListener("dragover", (e) => e.preventDefault(), false);
   window.addEventListener("drop", (e) => e.preventDefault(), false);
 
-  // Drag and drop images to composer
+  // Drag and drop images and files to composer
   const composerBox = $("#composerInner") || $(".composer");
   if (composerBox) {
     composerBox.addEventListener("dragover", (e) => {
@@ -2765,7 +2959,7 @@ async function init() {
       e.stopPropagation();
       composerBox.classList.remove("drag-over");
       if (e.dataTransfer?.files) {
-        handleImageFiles(e.dataTransfer.files);
+        handleIncomingFiles(e.dataTransfer.files);
       }
     });
   }

package/public/index.html

@@ -106,12 +106,12 @@
       <div class="composer">
         <div class="image-preview-bar" id="imagePreviewBar" style="display:none;"></div>
         <div class="composer-inner" id="composerInner">
-          <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="添加附件 / 图片 (支持拖拽与截图粘贴)">
+          <input type="file" id="imageFileInput" class="sr-only-file-input" accept="image/*,.png,.jpg,.jpeg,.webp,.gif,.bmp,.svg,.heic,.heif,.ico,.avif,text/*,.txt,.md,.json,.js,.ts,.py,.sh,.html,.css,.yaml,.yml,.toml,.xml,.sql,.log,.csv" multiple>
+          <label class="attach-btn" id="btnAttachImage" for="imageFileInput" role="button" tabindex="0" 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>
+          </label>
           <textarea id="composer" rows="1" placeholder="给 pi 发消息…"></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>