@raingor/pi-web-switch 0.2.0

package/README.ja.md

@@ -0,0 +1,137 @@
+<p align="center">
+  <img src="public/pi.svg" width="80" height="80" alt="pi-switch logo" />
+</p>
+
+<h1 align="center">pi-web-switch</h1>
+
+<p align="center">
+  <strong>pi コーディングエージェントの Web 管理パネル — リアルタイム設定管理、セッションブラウザ、メモリビューア</strong>
+</p>
+
+<p align="center">
+  <a href="README.md">🇬🇧 English</a> ·
+  <a href="README.zh-CN.md">🇨🇳 中文</a> ·
+  <a href="README.ja.md">🇯🇵 日本語</a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react" alt="React 19" />
+  <img src="https://img.shields.io/badge/TypeScript-5.8-3178C6?logo=typescript" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Tailwind-4-06B6D4?logo=tailwindcss" alt="Tailwind v4" />
+  <img src="https://img.shields.io/badge/Vite-6-646CFF?logo=vite" alt="Vite 6" />
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License" />
+</p>
+
+<p align="center">
+  <a href="https://github.com/farion1231/cc-switch">cc-switch</a> にインスパイアされた、<a href="https://pi.dev">pi コーディングエージェント</a>のプロバイダー、モデル、トークン使用量、セッション、設定を管理するビジュアルダッシュボード。
+</p>
+
+<p align="center">
+  <strong><code>~/.pi/agent/</code> から直接データを読み取り</strong> — モックデータ、データベース、追加バックエンド不要。
+</p>
+
+---
+
+## ✨ 機能
+
+### 📊 ダッシュボード
+- **使用統計** — 今日/7日/30日/カスタム日付範囲 + 自動更新（5s/10s/30s/60s）
+- **トークン明細** — 正確な値 + 概算表示（例 `1,631,022 ≈ 163.1万`）、入出力/キャッシュ内訳
+- **コスト追跡** — 日次コストチャート + Provider/Model 統計タブ
+- **キャッシュヒット率** — 進行状況バーで表示
+- **リクエストログ** — 時間、プロバイダー、モデル、トークン、コストの詳細表
+- **通貨切替** — USD/CNY リアルタイム換算（1 USD = 7.2 CNY）
+- **時間粒度** — 今日は時間別、7日/30日は日別表示
+
+### 📦 モデル管理
+- **モデルグリッド** — 全プロバイダーのモデルを検索・フィルターで閲覧
+- **有効/無効** — モデルのオン/オフ切り替え
+- **モデル編集** — 機能、コスト、コンテキストウィンドウ、最大トークンを更新
+- **モデル追加** — 任意のプロバイダーに新しいモデルを作成
+- **モデル削除** — カスタムモデルを削除
+
+### 🔌 プロバイダー管理
+- **プロバイダー一覧** — 全ビルトイン・カスタムプロバイダーを表示
+- **カスタムプロバイダー** — Ollama、vLLM、LM Studio 等を追加
+- **API キー管理** — プロバイダーごとに API キーを設定/削除
+- **プロバイダー設定** — baseUrl、API タイプ、カスタムヘッダー
+
+### 💬 セッション
+- **プロジェクトグループ化** — ディレクトリ名を自動デコード
+- **セッションブラウザ** — 100+ の全セッションを表示
+- **セッション詳細** — 名前、時間、メッセージ数、所要時間、使用モデル
+- **検索とフィルター** — プロジェクト名で絞り込み
+- **セッション削除** — 3日以内に更新されたものは保護
+
+### 🧠 メモリ (pi-hermes-memory)
+- プロジェクトメモリ / ユーザープロファイル / 障害記録を Markdown 表示
+
+### 🌐 多言語
+- English 🇬🇧 / 简体中文 🇨🇳 / 繁體中文 🇭🇰 / 日本語 🇯🇵
+- サイドバー下部の言語切替器、セッション間で保持
+
+### ⚙️ 設定
+- デフォルト値、テーマ（Light/Dark/System）、有効モデル、パッケージ管理
+- インポート/エクスポート、リセット
+
+## 🚀 始め方
+
+```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  # プロダクションビルド
+```
+
+## 🏗️ 技術スタック
+
+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

package/README.md

@@ -0,0 +1,277 @@
+<p align="center">
+  <img src="public/pi.svg" width="80" height="80" alt="pi-switch logo" />
+</p>
+
+<h1 align="center">pi-web-switch</h1>
+
+<p align="center">
+  <strong>Web UI for pi coding agent — live configuration management, session browser, and memory viewer</strong>
+</p>
+
+<p align="center">
+  <a href="README.md">🇬🇧 English</a> ·
+  <a href="README.zh-CN.md">🇨🇳 中文</a> ·
+  <a href="README.ja.md">🇯🇵 日本語</a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react" alt="React 19" />
+  <img src="https://img.shields.io/badge/TypeScript-5.8-3178C6?logo=typescript" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Tailwind-4-06B6D4?logo=tailwindcss" alt="Tailwind v4" />
+  <img src="https://img.shields.io/badge/Vite-6-646CFF?logo=vite" alt="Vite 6" />
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License" />
+</p>
+
+<p align="center">
+  Inspired by <a href="https://github.com/farion1231/cc-switch">cc-switch</a> — a visual dashboard for managing your <a href="https://pi.dev">pi coding agent</a> providers, models, token usage, sessions, and settings.
+</p>
+
+<p align="center">
+  <strong>Reads data directly from <code>~/.pi/agent/</code></strong> — no mock data, no database, no backend setup required.
+</p>
+
+---
+
+## ✨ Features
+
+### 📊 Dashboard
+- **Usage Statistics** — Today / 7 days / 30 days / Custom date range selector with auto-refresh (5s/10s/30s/60s)
+- **Token Breakdown** — Exact token count with approximate display (e.g. `1,631,022 ≈ 1.6M`) and Input/Output/Cache Hit/Cache Create breakdown
+- **Cost Tracking** — Daily cost chart + Provider/Model stats tabs with aggregated data
+- **Cache Hit Rate** — Visual progress bar showing cache efficiency
+- **Request Log** — Detailed log table with time, provider, model, tokens, cost
+- **Currency Switch** — Toggle between USD and CNY with real-time conversion (1 USD = 7.2 CNY)
+- **Hourly/Daily Granularity** — Today view shows per-hour data; 7d/30d views show per-day data
+- All data sourced from **real pi session files** (`~/.pi/agent/sessions/*.jsonl`)
+
+### 📦 Models
+- **Model Grid** — Browse all built-in and custom models with search and filter
+- **Enable/Disable** — Toggle models on/off to match your `enabledModels` config
+- **Edit Model** — Update capabilities, cost, context window, max tokens
+- **Add Model** — Create new models for any provider
+- **Delete Model** — Remove custom models
+
+### 🔌 Providers
+- **Provider List** — Expandable cards for all built-in and custom providers
+- **Custom Providers** — Add Ollama, vLLM, LM Studio, or any OpenAI-compatible provider
+- **API Key Management** — Set/remove API keys per provider (saved to `auth.json`)
+- **Provider Configuration** — baseUrl, API type, custom headers, auth method
+
+### 💬 Sessions
+- **Project Grouping** — Auto-decodes session directory names into project paths
+- **Session Browser** — View all 100+ sessions across projects
+- **Session Details** — Name, timestamp, message count, duration, provider/model used
+- **Search & Filter** — Filter sessions by project name
+- **Delete Sessions** — Remove old session files (sessions updated within 3 days are protected)
+
+### 🧠 Memory (pi-hermes-memory)
+- **Project Memories** — View `MEMORY.md` content with Markdown rendering
+- **User Profile** — Display `USER.md` preferences and settings
+- **Failure Records** — Browse `failures.md` known issues
+- **Live Sync** — Content updates immediately when memory files change on disk
+
+### 🌐 Multi-language
+- **English** 🇬🇧 — Default
+- **Simplified Chinese** 🇨🇳 — 简体中文
+- **Traditional Chinese** 🇭🇰 — 繁體中文
+- **Japanese** 🇯🇵 — 日本語
+- Language switcher in sidebar footer, persists across sessions
+
+### ⚙️ Settings
+- **Defaults** — Default provider, model, thinking level, project trust
+- **Theme** — Light / Dark / System with immediate toggle (CSS variables for both modes)
+- **Enabled Models** — View and manage the full enabled models list
+- **Extensions & Packages** — Manage pi packages list
+- **Import/Export** — Download full config as JSON, restore from backup
+- **Reset** — Factory reset to blank configuration
+
+## 🌗 Theme Support
+
+Full light and dark mode with system-follow support. Theme toggles instantly via CSS custom properties — no page reload needed. All components adapt including sidebar, modals, forms, charts, and scrollbars.
+
+## 🧱 Built-in Providers
+
+The app ships with definitions for **11 built-in providers** and **26 models** (hardcoded from pi's Rust source):
+
+| Provider | Models |
+|----------|--------|
+| 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 (Free), DeepSeek V4 Flash |
+| OpenCode Go | DeepSeek V4 Flash, V4 Pro, GLM 5.1, Qwen 3.7 Max, MiMo V2.5 |
+| SenseNova | GLM 5.2, DeepSeek V4 Flash |
+| 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 |
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- **pi coding agent** installed and configured (so `~/.pi/agent/` exists)
+- Node.js 18+
+
+### Setup
+
+```bash
+# Clone
+git clone https://github.com/Raingor/pi-web-switch.git
+cd pi-web-switch
+
+# Install dependencies
+npm install
+
+# Start dev server (reads ~/.pi/agent/ automatically)
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+The dev server automatically serves pi configuration via Vite middleware at `/api/pi/*` — no separate backend process needed.
+
+## 🏗️ Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Framework | [React 19](https://react.dev/) |
+| Language | [TypeScript 5.8](https://www.typescriptlang.org/) |
+| Build | [Vite 6](https://vitejs.dev/) |
+| Styling | [Tailwind CSS v4](https://tailwindcss.com/) |
+| State | [Zustand](https://github.com/pmndrs/zustand) |
+| Charts | [Recharts](https://recharts.org/) |
+| Icons | [Lucide React](https://lucide.dev/) |
+| Routing | [React Router v7](https://reactrouter.com/) |
+
+## 🗂️ Project Structure
+
+```
+pi-web-switch/
+├── index.html
+├── package.json
+├── vite.config.ts          # Vite config + pi API plugin (middleware)
+├── tsconfig.json
+├── server/
+│   └── pi-reader.ts        # Server-side module: reads ~/.pi/agent/ files + parses sessions
+├── public/
+│   └── pi.svg
+└── src/
+    ├── main.tsx            # Entry point + theme sync + init gate + i18n provider
+    ├── App.tsx             # Router setup (6 routes)
+    ├── index.css           # Tailwind + CSS theme variables (light/dark)
+    ├── types/index.ts      # All TypeScript interfaces
+    ├── data/
+    │   └── builtin-providers.ts  # Hardcoded built-in provider definitions
+    ├── store/
+    │   └── config-store.ts # Zustand store (fetches from /api/pi/*)
+    ├── lib/
+    │   ├── utils.ts        # Formatting helpers (tokens, cost with USD/CNY)
+    │   ├── i18n.tsx        # Multi-language system (React Context + hook)
+    │   ├── currency.ts     # Currency switching (USD/CNY toggle)
+    │   ├── config.ts       # Config import/export helpers
+    │   └── translations/   # Translation files (en, zh-CN, zh-TW, ja)
+    └── components/
+        ├── layout/          # AppShell, Sidebar (6 nav items + language switcher)
+        ├── ui/              # StatCard, Badge, Modal, EmptyState
+        ├── dashboard/       # DashboardPage + charts (hourly/daily granularity)
+        ├── models/          # ModelsPage + forms
+        ├── providers/       # ProvidersPage + forms
+        ├── sessions/        # SessionsPage + MemoryPage
+        └── settings/        # SettingsPage
+```
+
+## 💾 Data Source
+
+All data is read directly from **`~/.pi/agent/`** on your machine via a Vite middleware API plugin — no mock data, no database, no external service.
+
+| File | Purpose |
+|------|---------|
+| `~/.pi/agent/settings.json` | Default provider, model, theme, enabled models, packages |
+| `~/.pi/agent/auth.json` | API keys per provider |
+| `~/.pi/agent/models.json` | Custom provider definitions (baseUrl, API type, models) |
+| `~/.pi/agent/sessions/*.jsonl` | Session history with token usage, model, provider per message |
+| `~/.pi/agent/pi-hermes-memory/*.md` | Hermes memory (MEMORY.md, USER.md, failures.md) |
+
+Changes made in the UI are written back to these files in real time — the pi agent picks them up on next reload.
+
+### Sessions & Usage
+
+- The app parses **106+ JSONL session files** from `sessions/` directory
+- Each assistant message's API usage data (tokens, cost) is extracted and aggregated
+- Dashboard shows real token consumption, costs, and request volumes across all sessions
+- Sessions list groups by project (decoded from directory names) with 24+ project groups
+
+## 🧩 API Routes
+
+The Vite dev server exposes these endpoints at `/api/pi/*`:
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/pi/settings` | Read `settings.json` |
+| POST | `/api/pi/settings` | Write `settings.json` |
+| GET | `/api/pi/auth` | Read `auth.json` |
+| POST | `/api/pi/auth` | Write `auth.json` |
+| GET | `/api/pi/models` | Read `models.json` |
+| POST | `/api/pi/models` | Write `models.json` |
+| GET | `/api/pi/builtin-providers` | List hardcoded built-in providers |
+| GET | `/api/pi/usage` | Aggregated token/cost/request data from sessions |
+| GET | `/api/pi/usage-range` | Date-range filtered usage with hourly/daily breakdown |
+| GET | `/api/pi/sessions` | Session list grouped by project |
+| DELETE | `/api/pi/session?path=` | Delete a session file (path must be under sessions/) |
+| GET | `/api/pi/memory` | Read MEMORY.md, USER.md, failures.md |
+
+## 📦 Pi Package
+
+pi-web-switch can be installed as a **pi coding agent extension**, allowing you to start/stop the dashboard directly from your pi session.
+
+### Install
+
+Add `npm:pi-web-switch` to your `~/.pi/agent/settings.json` packages list:
+
+```json
+{
+  "packages": ["npm:pi-web-switch"]
+}
+```
+
+Or use the Settings page in the dashboard to add it.
+
+### Commands
+
+Once installed, the following commands are available in your pi session:
+
+| Command | Description |
+|---------|-------------|
+| `/pi-web-switch start` | Launch the dashboard at `http://localhost:5173` |
+| `/pi-web-switch stop` | Stop the server |
+| `/pi-web-switch status` | Check if the dashboard is running |
+
+### Package Structure
+
+```
+pi-web-switch/
+├── package.json           # npm package with pi.extensions + pi.skills
+├── pi-package/
+│   ├── index.ts           # Extension entry: registers /pi-web-switch command
+│   └── skills/
+│       └── pi-web-switch/
+│           └── SKILL.md   # Usage documentation
+├── server/
+│   └── pi-reader.ts       # Server-side: reads ~/.pi/agent/ files
+└── src/                   # React frontend
+```
+
+## 🔗 Links
+
+- **Homepage:** [raingor.github.io/my-blog](https://raingor.github.io/my-blog/)
+- **GitHub:** [github.com/Raingor](https://github.com/Raingor)
+
+## 📄 License
+
+MIT

package/README.zh-CN.md

@@ -0,0 +1,176 @@
+<p align="center">
+  <img src="public/pi.svg" width="80" height="80" alt="pi-switch logo" />
+</p>
+
+<h1 align="center">pi-web-switch</h1>
+
+<p align="center">
+  <strong>pi 编码代理的 Web 管理面板 — 实时配置管理、会话浏览与记忆查看</strong>
+</p>
+
+<p align="center">
+  <a href="README.md">🇬🇧 English</a> ·
+  <a href="README.zh-CN.md">🇨🇳 中文</a> ·
+  <a href="README.ja.md">🇯🇵 日本語</a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/React-19-61DAFB?logo=react" alt="React 19" />
+  <img src="https://img.shields.io/badge/TypeScript-5.8-3178C6?logo=typescript" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Tailwind-4-06B6D4?logo=tailwindcss" alt="Tailwind v4" />
+  <img src="https://img.shields.io/badge/Vite-6-646CFF?logo=vite" alt="Vite 6" />
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT License" />
+</p>
+
+<p align="center">
+  灵感来源于 <a href="https://github.com/farion1231/cc-switch">cc-switch</a> —— 可视化管理你的 <a href="https://pi.dev">pi 编码代理</a>的提供商、模型、Token 用量、会话和设置。
+</p>
+
+<p align="center">
+  <strong>直接从 <code>~/.pi/agent/</code> 读取真实数据</strong> —— 无需模拟数据、无需数据库、无需额外后端。
+</p>
+
+---
+
+## ✨ 功能特性
+
+### 📊 仪表盘
+- **使用统计** — 当天/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 |
+| SenseNova | GLM 5.2, DeepSeek V4 Flash |
+| 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

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pi-switch — pi Configuration Manager</title>
+    <link rel="icon" type="image/svg+xml" href="/pi.svg" />
+  </head>
+  <body class="bg-gray-950 text-gray-100 antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@raingor/pi-web-switch",
+  "private": false,
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Web UI for pi coding agent — live configuration management, session browser, and memory viewer",
+  "keywords": ["pi-package", "pi", "pi-coding-agent", "dashboard", "configuration", "web-ui"],
+  "author": "Raingor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Raingor/pi-web-switch.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Raingor/pi-web-switch/issues"
+  },
+  "homepage": "https://github.com/Raingor/pi-web-switch#readme",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "pi": {
+    "extensions": ["./pi-package/index.ts"],
+    "skills": ["./pi-package/skills"]
+  },
+  "dependencies": {
+    "lucide-react": "^0.487.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.5.0",
+    "recharts": "^2.15.3",
+    "zustand": "^5.0.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.4",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "tailwindcss": "^4.1.4",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.2"
+  }
+}