@raingor/pi-web-switch 0.3.3 → 0.4.1

package/README.ja.md

@@ -55,6 +55,8 @@
 - **カスタムプロバイダー** — Ollama、vLLM、LM Studio 等を追加
 - **API キー管理** — プロバイダーごとに API キーを設定/削除
 - **プロバイダー設定** — baseUrl、API タイプ、カスタムヘッダー
+- **有効モデルパネル** — 全プロバイダーの有効モデルを一覧表示し、ワンクリックで無効化/全無効化。各プロバイダーのモデルのオン/オフとリアルタイム同期
+- **モデルをオンライン取得** — プロバイダーの `/models` エンドポイントからモデル一覧を取得し、ワンクリックでインポート
 
 ### 💬 セッション
 - **プロジェクトグループ化** — ディレクトリ名を自動デコード
@@ -71,7 +73,7 @@
 - サイドバー下部の言語切替器、セッション間で保持
 
 ### ⚙️ 設定
-- デフォルト値、テーマ（Light/Dark/System）、有効モデル、パッケージ管理
+- デフォルト値、テーマ（Light/Dark/System）、画面ズーム（50%–200%）とフォントサイズ、パッケージ管理
 - インポート/エクスポート、リセット
 
 ## 🚀 始め方
@@ -84,6 +86,20 @@ npm run dev    # 開発サーバー起動（~/.pi/agent/ を自動読込）
 npm run build  # プロダクションビルド
 ```
 
+## 🖥️ デスクトップアプリ（Electron）
+
+pi-web-switch はデスクトップアプリ（macOS / Windows / Linux）としても利用でき、専用ブランドアイコンを備えています。
+
+```bash
+# 開発モードで実行（Vite 開発サーバー + Electron、HMR 対応）
+npm run electron:dev
+
+# インストーラー（DMG / NSIS / AppImage）を release/ にビルド
+npm run electron:build
+```
+
+アプリアイコンは `build/`（`icon.icns` / `icon.ico` / `icon.png`）にあり、プラットフォームごとに electron-builder へ組み込まれています。開発モードでは実行時に macOS の Dock アイコンを設定します。
+
 ## 🏗️ 技術スタック
 
 React 19 + TypeScript 5.8 + Vite 6 + Tailwind CSS v4 + Zustand + Recharts + Lucide React + React Router v7

package/README.md

@@ -56,6 +56,8 @@
 - **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
+- **Enabled Models Panel** — Cross-provider list of every enabled model with one-click disable / disable-all, kept in sync with each provider's per-model toggles
+- **Fetch Models Online** — Pull a provider's live model list from its `/models` endpoint and import with one click
 
 ### 💬 Sessions
 - **Project Grouping** — Auto-decodes session directory names into project paths
@@ -80,7 +82,7 @@
 ### ⚙️ 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
+- **Interface Zoom** — Scale the entire UI by percentage (50%–200%), plus a font-size slider
 - **Extensions & Packages** — Manage pi packages list
 - **Import/Export** — Download full config as JSON, restore from backup
 - **Reset** — Factory reset to blank configuration
@@ -135,6 +137,20 @@ npm run preview
 
 The dev server automatically serves pi configuration via Vite middleware at `/api/pi/*` — no separate backend process needed.
 
+## 🖥️ Desktop App (Electron)
+
+pi-web-switch also runs as a desktop app (macOS / Windows / Linux) with its own branded app icon.
+
+```bash
+# Run in development (Vite dev server + Electron with HMR)
+npm run electron:dev
+
+# Build installers (DMG / NSIS / AppImage) into release/
+npm run electron:build
+```
+
+App icons live in `build/` (`icon.icns` / `icon.ico` / `icon.png`) and are wired into electron-builder per platform; in development the macOS dock icon is set at runtime.
+
 ## 🏗️ Tech Stack
 
 | Layer | Technology |

package/README.zh-CN.md

@@ -55,6 +55,8 @@
 - **自定义提供商** — 添加 Ollama、vLLM、LM Studio 或任意 OpenAI 兼容提供商
 - **API Key 管理** — 为每个提供商设置/删除 API Key（保存到 `auth.json`）
 - **提供商配置** — baseUrl、API 类型、自定义请求头、认证方式
+- **已启用模型面板** — 跨提供商汇总所有已启用模型，支持一键禁用/全部禁用，并与各提供商内的模型开关实时同步
+- **在线获取模型** — 从提供商的 `/models` 端点拉取实时模型列表，一键导入
 
 ### 💬 会话浏览
 - **项目分组** — 自动将会话目录名解码为项目路径
@@ -79,7 +81,7 @@
 ### ⚙️ 设置
 - **默认值** — 默认提供商、模型、思考级别、项目信任级别
 - **主题** — 浅色 / 深色 / 跟随系统，即时切换（CSS 变量双主题）
-- **已启用模型** — 查看和管理完整的启用模型列表
+- **界面缩放** — 按百分比缩放整个界面（50%–200%），并提供字体大小调节
 - **扩展与包** — 管理 pi 的 packages 列表
 - **导入/导出** — 下载完整配置为 JSON，从备份恢复
 - **重置** — 恢复空白默认配置
@@ -122,6 +124,20 @@ npm run build  # 构建生产版本
 npm run preview # 预览生产构建
 ```
 
+## 🖥️ 桌面应用（Electron）
+
+pi-web-switch 同样提供桌面应用（macOS / Windows / Linux），并带有专属品牌图标。
+
+```bash
+# 开发模式运行（Vite 开发服务器 + Electron，支持 HMR）
+npm run electron:dev
+
+# 构建安装包（DMG / NSIS / AppImage）到 release/
+npm run electron:build
+```
+
+应用图标位于 `build/`（`icon.icns` / `icon.ico` / `icon.png`），已按平台接入 electron-builder；开发模式下会在运行时设置 macOS 程序坞图标。
+
 ## 🏗️ 技术栈
 
 React 19 + TypeScript 5.8 + Vite 6 + Tailwind CSS v4 + Zustand + Recharts + Lucide React + React Router v7

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@raingor/pi-web-switch",
   "private": false,
-  "version": "0.3.3",
+  "version": "0.4.1",
   "type": "module",
-  "main": "pi-package/index.ts",
+  "main": "dist-electron/main.js",
   "description": "Web UI for pi coding agent — live configuration management, session browser, and memory viewer",
   "keywords": [
     "pi-package",
@@ -26,8 +26,23 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "electron:dev": "node scripts/electron-dev.mjs",
+    "electron:build": "tsc -b && vite build && vite build --config vite.electron.config.ts && vite build --config vite.preload.config.ts && electron-builder",
+    "electron:preview": "vite build && vite build --config vite.electron.config.ts && vite build --config vite.preload.config.ts && env -u ELECTRON_RUN_AS_NODE npx electron ."
   },
+  "files": [
+    "pi-package",
+    "server",
+    "src",
+    "public",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "README.md",
+    "README.zh-CN.md",
+    "README.ja.md"
+  ],
   "pi": {
     "extensions": [
       "./pi-package/index.ts"
@@ -37,6 +52,10 @@
     ]
   },
   "dependencies": {
+    "@earendil-works/pi-agent-core": "^0.83.0",
+    "@earendil-works/pi-ai": "^0.83.0",
+    "@earendil-works/pi-coding-agent": "^0.83.0",
+    "@earendil-works/pi-tui": "^0.83.0",
     "lucide-react": "^0.487.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -49,10 +68,37 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "electron": "^43.2.0",
+    "electron-builder": "^26.15.3",
+    "electron-vite": "^5.0.0",
     "tailwindcss": "^4.1.4",
     "typescript": "~5.8.3",
     "undici": "^8.9.0",
     "vite": "^6.3.2",
+    "vite-plugin-electron": "^1.1.0",
     "vite-plugin-pwa": "^1.3.0"
+  },
+  "build": {
+    "appId": "com.raingor.pi-web-switch",
+    "productName": "pi-web-switch",
+    "directories": {
+      "output": "release"
+    },
+    "files": [
+      "dist/**/*",
+      "dist-electron/**/*"
+    ],
+    "mac": {
+      "target": "dmg",
+      "icon": "build/icon.icns"
+    },
+    "win": {
+      "target": "nsis",
+      "icon": "build/icon.ico"
+    },
+    "linux": {
+      "target": "AppImage",
+      "icon": "build/icon.png"
+    }
   }
 }

package/public/pi.svg

@@ -1,4 +1,47 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
-  <rect width="32" height="32" rx="6" fill="#2563eb"/>
-  <text x="16" y="22" text-anchor="middle" font-size="18" font-weight="bold" fill="white" font-family="system-ui">π</text>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none">
+  <defs>
+    <!-- Brand blue diagonal gradient -->
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#6ba6fb"/>
+      <stop offset="0.5" stop-color="#2563eb"/>
+      <stop offset="1" stop-color="#1e40af"/>
+    </linearGradient>
+    <!-- Soft top gloss for a tactile, premium feel -->
+    <linearGradient id="gloss" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffffff" stop-opacity="0.28"/>
+      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
+    </linearGradient>
+    <!-- Subtle vertical shading on the pi glyph -->
+    <linearGradient id="piGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#d9e6ff"/>
+    </linearGradient>
+    <!-- Toggle knob highlight -->
+    <radialGradient id="knob" cx="0.35" cy="0.3" r="0.85">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#cdd9f2"/>
+    </radialGradient>
+    <filter id="softShadow" x="-30%" y="-30%" width="160%" height="160%">
+      <feDropShadow dx="0" dy="7" stdDeviation="11" flood-color="#0a2a6b" flood-opacity="0.38"/>
+    </filter>
+    <filter id="knobShadow" x="-60%" y="-60%" width="220%" height="220%">
+      <feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="#0a2a6b" flood-opacity="0.35"/>
+    </filter>
+  </defs>
+
+  <!-- Squircle background -->
+  <rect x="0" y="0" width="512" height="512" rx="115" fill="url(#bg)"/>
+  <!-- Top gloss highlight -->
+  <rect x="0" y="0" width="512" height="250" rx="115" fill="url(#gloss)"/>
+
+  <!-- Toggle switch track (behind the pi) -->
+  <rect x="92" y="217" width="328" height="78" rx="39" fill="#ffffff" opacity="0.20"/>
+  <rect x="92" y="217" width="328" height="78" rx="39" fill="none" stroke="#ffffff" stroke-opacity="0.25" stroke-width="2"/>
+  <!-- Toggle knob in the "on" position -->
+  <circle cx="378" cy="256" r="30" fill="url(#knob)" filter="url(#knobShadow)"/>
+
+  <!-- Pi glyph -->
+  <text x="256" y="256" text-anchor="middle" dominant-baseline="central"
+        font-family="-apple-system, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
+        font-size="258" font-weight="700" fill="url(#piGrad)" filter="url(#softShadow)">π</text>
+</svg>

package/public/sw.js

@@ -1,14 +1,20 @@
 // ─── pi-web-switch Service Worker ───────────────────────
-// Cache-first for static assets, network-first for API calls.
-// Bump CACHE_VERSION to invalidate old caches on deploy.
+// Strategy:
+//   - HTML navigation (index.html / SPA routes): NETWORK-FIRST.
+//     Every refresh must hit the network so deploys show up on a plain
+//     Cmd+R reload; the cached copy is only a fallback for offline use.
+//   - Static assets (hashed js/css): CACHE-FIRST — safe because Vite
+//     fingerprints filenames, so a new deploy means new URLs.
+//   - API calls: NETWORK-FIRST, fallback to cache.
+// Bump CACHE_VERSION when the SW logic changes to purge old caches.
 
-const CACHE_VERSION = "pi-web-switch-v1";
+const CACHE_VERSION = "pi-web-switch-v2";
 const STATIC_CACHE = `${CACHE_VERSION}-static`;
 const RUNTIME_CACHE = `${CACHE_VERSION}-runtime`;
 
+// NOTE: index.html is intentionally NOT precached. Pre-caching it would
+// make Cmd+R reloads serve the stale page after a deploy.
 const PRECACHE_URLS = [
-  "/",
-  "/index.html",
   "/manifest.webmanifest",
   "/icon-192.png",
   "/icon-512.png",
@@ -64,6 +70,23 @@ self.addEventListener("fetch", (event) => {
     return;
   }
 
+  // HTML navigation: network-first so a plain refresh always gets the
+  // latest build. Fall back to the last cached copy only when offline.
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          if (response && response.status === 200 && response.type === "basic") {
+            const copy = response.clone();
+            caches.open(RUNTIME_CACHE).then((cache) => cache.put("/index.html", copy));
+          }
+          return response;
+        })
+        .catch(() => caches.match("/index.html"))
+    );
+    return;
+  }
+
   // Static assets: cache-first, then network (and cache the result).
   event.respondWith(
     caches.match(request).then((cached) => {