pi-web-switch
pi 编码代理的 Web 管理面板 — 实时配置管理、会话浏览与记忆查看
🇬🇧 English ·
🇨🇳 中文 ·
🇯🇵 日本語
灵感来源于 cc-switch —— 可视化管理你的 pi 编码代理的提供商、模型、Token 用量、会话和设置。
直接从 ~/.pi/agent/ 读取真实数据 —— 无需模拟数据、无需数据库、无需额外后端。
---
## ✨ 功能特性
### 📊 仪表盘
- **使用统计** — 当天/7天/30天/自定义日期范围 + 自动刷新（5s/10s/30s/60s）
- **Token 明细** — 精确值 + 约等于显示（如 `1,631,022 ≈ 163.1万`），含输入/输出/缓存命中/缓存创建占比
- **成本追踪** — 逐日成本图 + Provider/Model 统计选项卡
- **缓存命中率** — 直观的进度条展示缓存效率
- **请求日志** — 详细日志表（时间、供应商、模型、Token、成本）
- **货币切换** — 美元/人民币实时换算（1 USD = 7.2 CNY）
- **小时/天粒度** — 当天视图按小时展示；7天/30天按天展示
### 📦 模型管理
- **模型网格** — 按提供商浏览所有模型，支持搜索和筛选
- **启用/禁用** — 切换模型开关，对应 `enabledModels` 配置
- **编辑模型** — 更新能力、成本、上下文窗口、最大 Token
- **添加模型** — 创建新模型，绑定到任意提供商
- **删除模型** — 移除自定义模型
### 🔌 提供商管理
- **提供商列表** — 可展开卡片展示所有内置和自定义提供商
- **自定义提供商** — 添加 Ollama、vLLM、LM Studio 或任意 OpenAI 兼容提供商
- **API Key 管理** — 为每个提供商设置/删除 API Key（保存到 `auth.json`）
- **提供商配置** — baseUrl、API 类型、自定义请求头、认证方式
### 💬 会话浏览
- **项目分组** — 自动将会话目录名解码为项目路径
- **会话浏览器** — 查看所有 100+ 个会话
- **会话详情** — 名称、时间、消息数、持续时间、使用的提供商/模型
- **搜索筛选** — 按项目名称过滤会话
- **删除会话** — 删除旧的会话文件（近 3 天有更新的会话受保护）
### 🧠 记忆查看 (pi-hermes-memory)
- **项目记忆** — 查看 `MEMORY.md` 内容，支持 Markdown 渲染
- **用户画像** — 显示 `USER.md` 偏好和设置
- **故障记录** — 浏览 `failures.md` 已知问题
- **实时同步** — 记忆文件在磁盘变更时内容即时更新
### 🌐 多语言
- **English** 🇬🇧 — 英文
- **简体中文** 🇨🇳 — 中文
- **繁體中文** 🇭🇰 — 繁体中文
- **日本語** 🇯🇵 — 日文
- 侧栏底部语言切换器，选择后跨会话保持
### ⚙️ 设置
- **默认值** — 默认提供商、模型、思考级别、项目信任级别
- **主题** — 浅色 / 深色 / 跟随系统，即时切换（CSS 变量双主题）
- **已启用模型** — 查看和管理完整的启用模型列表
- **扩展与包** — 管理 pi 的 packages 列表
- **导入/导出** — 下载完整配置为 JSON，从备份恢复
- **重置** — 恢复空白默认配置
## 🌗 主题支持
完整的浅色和深色模式，支持跟随系统。主题通过 CSS 自定义属性即时切换——无需刷新页面。所有组件均适配，包括侧栏、弹窗、表单、图表和滚动条。
## 🧱 内置提供商
应用内置了 **11 个内置提供商** 和 **26 个模型** 的定义（从 pi 的 Rust 源码硬编码）：
| 提供商 | 模型 |
|--------|------|
| Anthropic | Claude Sonnet 4, Sonnet 4.5, Opus 4, Haiku 3.5 |
| OpenAI | GPT-4o, GPT-4o-mini, GPT-5.1, o3-mini |
| DeepSeek | DeepSeek V3, DeepSeek R1 |
| OpenCode | DeepSeek V4 Flash (免费), DeepSeek V4 Flash |
| OpenCode Go | DeepSeek V4 Flash, V4 Pro, GLM 5.1, Qwen 3.7 Max, MiMo V2.5 |
| Google Gemini | Gemini 2.5 Flash, Gemini 2.5 Pro |
| OpenRouter | Claude Sonnet 4, DeepSeek R1 |
| Mistral | Mistral Large |
| GitHub Copilot | Copilot GPT-4o |
| Groq | Llama 3.3 70B |
## 🚀 快速开始
### 前置要求
- **pi 编码代理** 已安装并配置（确保 `~/.pi/agent/` 目录存在）
- Node.js 18+
### 安装与运行
```bash
git clone https://github.com/Raingor/pi-web-switch.git
cd pi-web-switch
npm install
npm run dev # 启动开发服务器（自动读取 ~/.pi/agent/）
npm run build # 构建生产版本
npm run preview # 预览生产构建
```
## 🏗️ 技术栈
React 19 + TypeScript 5.8 + Vite 6 + Tailwind CSS v4 + Zustand + Recharts + Lucide React + React Router v7
## 📦 Pi 扩展包
pi-web-switch 可安装为 **pi 编码代理扩展**，在 pi 会话中直接启动/停止仪表盘。
### 安装
在 `~/.pi/agent/settings.json` 的 packages 列表中添加 `npm:pi-web-switch`：
```json
{
"packages": ["npm:pi-web-switch"]
}
```
### 命令
安装后在 pi 会话中可用以下命令：
| 命令 | 说明 |
|------|------|
| `/pi-web-switch start` | 启动仪表盘 http://localhost:5173 |
| `/pi-web-switch stop` | 停止服务器 |
| `/pi-web-switch status` | 查看运行状态 |
### 包结构
```
pi-web-switch/
├── package.json # npm 包 + pi.extensions + pi.skills
├── pi-package/
│ ├── index.ts # 扩展入口：注册 /pi-web-switch 命令
│ └── skills/
│ └── pi-web-switch/
│ └── SKILL.md # 使用文档
├── server/
│ └── pi-reader.ts # 服务端：读取 ~/.pi/agent/ 文件
└── src/ # React 前端
```
## 🔗 相关链接
- **个人主页：** [raingor.github.io/my-blog](https://raingor.github.io/my-blog/)
- **GitHub：** [github.com/Raingor](https://github.com/Raingor)
## 📄 许可证
MIT