@liguoshuai/pi-web-chat 1.10.3 → 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,7 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
-## [1.10.3] - 2026-08-30
+## [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)**：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liguoshuai/pi-web-chat",
-  "version": "1.10.3",
+  "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;
@@ -1567,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;
@@ -1617,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);
   };
 }
@@ -2202,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({
@@ -2515,7 +2557,7 @@ function updateComposerUI() {
     if (sendBtn) {
       sendBtn.classList.add("stop");
       sendBtn.disabled = !state.wsConnected;
-      sendBtn.textContent = "■";
+      sendBtn.textContent = "";
       sendBtn.title = "中止当前生成";
     }
     if (steerBtn) {

package/public/style.css

@@ -1026,6 +1026,14 @@ body {
 .composer .send-btn.stop { background: var(--danger); }
 .composer .send-btn.stop:hover:not(:disabled) { background: #f87171; }
 .composer .send-btn.stop:active:not(:disabled) { transform: scale(0.95); }
+.composer .send-btn.stop:empty::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-radius: 2px;
+  display: block;
+}
 .composer .steer-btn {
   display: inline-flex;
   align-items: center;