@raingor/pi-web-switch 0.3.3 → 0.4.0

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.0",
   "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"
@@ -49,10 +64,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/server/pi-reader.ts

@@ -550,7 +550,7 @@ function decodeProjectName(dirName: string): { projectPath: string; projectName:
   }
   // Use the last 1-2 path segments as the project name
   const segments = displayName.split("/").filter(Boolean);
-  const projectName = segments.length > 0 ? segments[segments.length - 1] : dirName;
+  const projectName = segments.length > 0 ? (segments[segments.length - 1] ?? dirName) : dirName;
   return { projectPath: decoded, projectName };
 }
 
@@ -588,7 +588,7 @@ export function listSessions(): ProjectGroup[] {
 
     group.totalSessions = group.sessions.length;
     if (group.sessions.length > 0) {
-      group.lastActive = group.sessions[0].timestamp; // already sorted newest-first
+      group.lastActive = group.sessions[0]?.timestamp ?? ""; // already sorted newest-first
     }
   }
 
@@ -1147,91 +1147,188 @@ export async function testProviderConnection(
 
 
 /**
- * Fetch the model list from a provider's /models endpoint server-side.
- * Returns { id, contextWindow, maxTokens } for each model so the frontend
- * can create full model objects on import.
+ * Fetch the model list from a provider's endpoint server-side.
+ * Supports multiple source types:
+ *   - OpenAI-compatible /models (default)
+ *   - OpenRouter /models (returns pricing, modality, context_length, top_provider.max_completion_tokens)
+ *   - Ollama /api/tags (returns model names + capabilities via /api/show)
+ *
+ * Returns full model metadata so the frontend can prefill the add-model form:
+ *   { id, name, contextWindow, maxTokens, reasoning, vision, cost }
+ *
+ * Reasoning / vision / contextWindow are also heuristically inferred from
+ * the model id when the endpoint doesn't report them.
  */
+export interface FetchedModel {
+  id: string;
+  name?: string;
+  contextWindow?: number;
+  maxTokens?: number;
+  reasoning?: boolean;
+  vision?: boolean;
+  audio?: boolean;
+  cost?: { input: number; output: number; cacheRead?: number; cacheWrite?: number };
+  source: string; // "openai" | "openrouter" | "ollama" | "heuristic"
+}
+
+// Parse a numeric value, handling K/M suffixes (e.g. "128k" → 128000)
+function toNum(v: any): number | undefined {
+  if (typeof v === "number") return v;
+  if (typeof v !== "string") return undefined;
+  const m = v.match(/^([0-9]+)([KkMm]?)$/);
+  if (!m) return undefined;
+  const n = parseInt(m[1] ?? "0", 10);
+  const u = (m[2] ?? "").toUpperCase();
+  return u === "K" ? n * 1000 : u === "M" ? n * 1_000_000 : n;
+}
+
+// Heuristic reasoning detection (server-side; mirrors client guessModelMeta)
+const REASONING_RE = /(^|[/_\-])(r1|o1|o3|o4|z1|reasoner|reasoning|qwq|deepseek-r|think)([/_\-:]|$)/i;
+const VISION_RE = /(vision|[-_]vl\b|multimodal|gpt-4o|gpt-5|claude-(sonnet|opus)|gemini|llama-.*vision|qwen.*vl|glm-.*v\b)/i;
+const AUDIO_RE = /(audio|whisper|tts|speech)/i;
+function heuristicFlags(id: string): { reasoning?: boolean; vision?: boolean; audio?: boolean; contextWindow?: number } {
+  const k = id.toLowerCase();
+  const reasoning = REASONING_RE.test(k);
+  const vision = VISION_RE.test(k);
+  const audio = AUDIO_RE.test(k);
+  let contextWindow: number | undefined;
+  if (/[-_](1m|1024k|1048576)\b/i.test(k)) contextWindow = 1_048_576;
+  else if (/[-_](256k)\b/i.test(k)) contextWindow = 262_144;
+  else if (/[-_](128k)\b/i.test(k)) contextWindow = 131_072;
+  else if (/[-_](64k)\b/i.test(k)) contextWindow = 65_536;
+  else if (/[-_](32k)\b/i.test(k)) contextWindow = 32_768;
+  else if (/[-_](16k)\b/i.test(k)) contextWindow = 16_384;
+  else if (/[-_](8k)\b/i.test(k)) contextWindow = 8192;
+  return { reasoning, vision, audio, contextWindow };
+}
+
+function isOpenRouter(baseUrl: string, host: string): boolean {
+  return host === "openrouter.ai" || host.endsWith(".openrouter.ai") ||
+    baseUrl.includes("openrouter.ai");
+}
+
+async function fetchJson(url: URL, headers: Record<string, string>, timeoutMs = 15000) {
+  const res = await fetchExternal(url, { headers, signal: AbortSignal.timeout(timeoutMs) });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const text = await res.text();
+  const trimmed = text.trimStart();
+  const ctype = res.headers.get("content-type") ?? "";
+  if (trimmed.startsWith("<") || ctype.includes("text/html")) {
+    // The endpoint returned an HTML page (often a site root / 404 served as 200)
+    // instead of JSON — almost always a wrong base URL (missing /v1 prefix, etc.).
+    throw new Error(`endpoint returned HTML, not JSON (check base URL): ${url.toString()}`);
+  }
+  try {
+    return JSON.parse(text);
+  } catch {
+    throw new Error(`invalid JSON from ${url.toString()}`);
+  }
+}
+
+function makeHeaders(key: string, providerId?: string, host?: string): Record<string, string> {
+  const headers: Record<string, string> = {};
+  if (!key) return headers;
+  if (providerId === "anthropic" || (host && host.endsWith("api.anthropic.com"))) {
+    headers["x-api-key"] = key;
+    headers["anthropic-version"] = "2023-06-01";
+  } else if (providerId === "google" || (host && host.endsWith("generativelanguage.googleapis.com"))) {
+    // Google uses query param; caller handles it
+  } else {
+    headers["Authorization"] = `Bearer ${key}`;
+  }
+  return headers;
+}
+
 export async function fetchProviderModels(
   baseUrl: string,
   apiKey?: string,
   providerId?: string
-): Promise<{
-  models: { id: string; contextWindow?: number; maxTokens?: number; vision?: boolean }[];
-  error?: string;
-}> {
-  let url: URL;
+): Promise<{ models: FetchedModel[]; error?: string }> {
+  let key = apiKey ?? "";
+  if (key.startsWith("$")) key = process.env[key.slice(1)] ?? "";
+
+  let base: URL;
   try {
-    url = new URL(baseUrl.replace(/\/+$/, "") + "/models");
+    base = new URL(baseUrl.replace(/\/+$/, ""));
   } catch {
     return { models: [], error: "invalid URL" };
   }
-  if (url.protocol !== "http:" && url.protocol !== "https:") {
+  if (base.protocol !== "http:" && base.protocol !== "https:") {
     return { models: [], error: "invalid URL" };
   }
+  const host = base.hostname;
 
-  let key = apiKey ?? "";
-  if (key.startsWith("$")) key = process.env[key.slice(1)] ?? "";
-
-  // Auth differs per vendor: Anthropic uses x-api-key, Google passes ?key=,
-  // everything else follows the OpenAI convention (Bearer token).
-  const host = url.hostname;
-  const headers: Record<string, string> = {};
-  if (key) {
-    if (providerId === "anthropic" || host.endsWith("api.anthropic.com")) {
-      headers["x-api-key"] = key;
-      headers["anthropic-version"] = "2023-06-01";
-    } else if (providerId === "google" || host.endsWith("generativelanguage.googleapis.com")) {
-      url.searchParams.set("key", key);
-    } else {
-      headers["Authorization"] = `Bearer ${key}`;
+  try {
+    // ── Ollama: /api/tags (no /models) ──────────────────
+    // Heuristic: local port 11434 or hostname "localhost" + path includes ollama
+    const isOllama = host === "localhost" && base.port === "11434";
+    if (isOllama) {
+      const tagsUrl = new URL("/api/tags", base);
+      const data = await fetchJson(tagsUrl, {});
+      const models: FetchedModel[] = [];
+      const models_ = data?.models ?? [];
+      for (const m of models_) {
+        const id = typeof m === "string" ? m : m.name ?? m.model ?? "";
+        if (!id) continue;
+        const flags = heuristicFlags(id);
+        // Ollama details: try /api/show for richer info (best-effort, ignore errors)
+        let cw: number | undefined = flags.contextWindow;
+        let mt: number | undefined;
+        try {
+          const showUrl = new URL("/api/show", base);
+          const show = await fetch(showUrl.toString(), {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name: id }),
+            signal: AbortSignal.timeout(5000),
+          }).then((r) => r.json());
+          cw = toNum(show?.model_info?.[`${show?.modelfile?.split("\n").find((l: string) => l.startsWith("FROM")) ?? ""}`]) ?? cw;
+          if (show?.context_length) cw = toNum(show.context_length) ?? cw;
+        } catch { /* ignore */ }
+        models.push({
+          id,
+          contextWindow: cw,
+          maxTokens: mt,
+          reasoning: flags.reasoning,
+          vision: flags.vision,
+          audio: flags.audio,
+          source: "ollama",
+        });
+      }
+      return { models };
     }
-  }
 
-  try {
-    const res = await fetchExternal(url, {
-      headers,
-      signal: AbortSignal.timeout(15000),
-    });
-    if (!res.ok) {
-      return { models: [], error: `HTTP ${res.status}` };
+    // ── OpenRouter /models returns rich metadata ────────
+    // Append to the full base path (preserve prefixes like /v1 or /v1beta).
+    // Using new URL("/models", base) would resolve against the origin and drop the prefix.
+    const modelsUrl = new URL(base.toString().replace(/\/+$/, "") + "/models");
+    if (providerId === "google" || host.endsWith("generativelanguage.googleapis.com")) {
+      if (key) modelsUrl.searchParams.set("key", key);
     }
-    const data = await res.json();
-
-    // Parse a numeric value, handling K/M suffixes (e.g. "128k" → 128000)
-    const toNum = (v: any): number | undefined => {
-      if (typeof v === "number") return v;
-      if (typeof v !== "string") return undefined;
-      const m = v.match(/^([0-9]+)([KkMm]?)$/);
-      if (!m) return undefined;
-      const n = parseInt(m[1], 10);
-      const u = m[2].toUpperCase();
-      return u === "K" ? n * 1000 : u === "M" ? n * 1_000_000 : n;
-    };
+    const headers = makeHeaders(key, providerId, host);
+    const data = await fetchJson(modelsUrl, headers, isOpenRouter(baseUrl, host) ? 20000 : 15000);
 
-    // Normalize various /models response shapes into { id, contextWindow, maxTokens }
     const seen = new Set<string>();
-    const models: { id: string; contextWindow?: number; maxTokens?: number; vision?: boolean }[] = [];
-    const pushModel = (
-      id: string,
-      contextWindow?: number,
-      maxTokens?: number,
-      vision?: boolean
-    ) => {
-      const v = (id ?? "").trim();
+    const models: FetchedModel[] = [];
+    const pushModel = (m: FetchedModel) => {
+      const v = (m.id ?? "").trim();
       if (!v || seen.has(v)) return;
       seen.add(v);
-      models.push({ id: v, contextWindow, maxTokens: maxTokens || undefined, vision });
+      // Apply heuristic defaults for fields the endpoint didn't provide
+      const flags = heuristicFlags(v);
+      m.reasoning = m.reasoning ?? flags.reasoning;
+      m.vision = m.vision ?? flags.vision;
+      m.audio = m.audio ?? flags.audio;
+      m.contextWindow = m.contextWindow ?? flags.contextWindow;
+      models.push(m);
     };
 
-    // Detect image-input support from vendor metadata; undefined when unknown.
-    // Mistral: capabilities.vision · OpenRouter: architecture.input_modalities /
-    // architecture.modality ("text+image->text") · misc gateways: supports_vision
+    // Vision / modality detectors (vendor-specific shapes)
     const visionOf = (item: any): boolean | undefined => {
       if (!item || typeof item !== "object") return undefined;
       if (typeof item.capabilities?.vision === "boolean") return item.capabilities.vision;
       if (item.supports_vision === true || item.vision === true) return true;
-      const mods =
-        item.architecture?.input_modalities ?? item.input_modalities ?? item.modalities;
+      const mods = item.architecture?.input_modalities ?? item.input_modalities ?? item.modalities;
       if (Array.isArray(mods)) return mods.includes("image");
       const modality = item.architecture?.modality;
       if (typeof modality === "string") {
@@ -1239,12 +1336,35 @@ export async function fetchProviderModels(
       }
       return undefined;
     };
+    const audioOf = (item: any): boolean | undefined => {
+      const mods = item.architecture?.input_modalities ?? item.input_modalities ?? item.modalities;
+      if (Array.isArray(mods)) return mods.includes("audio");
+      return undefined;
+    };
+    const reasoningOf = (item: any): boolean | undefined => {
+      // OpenRouter doesn't directly expose a reasoning flag, but some providers
+      // indicate it via architecture or the id contains reasoner/r1/o1/o3.
+      if (item?.reasoning === true || item?.supports_reasoning === true) return true;
+      return undefined;
+    };
+    const parseCost = (pricing: any): FetchedModel["cost"] | undefined => {
+      if (!pricing) return undefined;
+      // OpenRouter: pricing.prompt, pricing.completion, pricing.cache_read, pricing.cache_write
+      // Values are per-token; multiply by 1e6 for $/M.
+      const toDollar = (v: any) => typeof v === "string" ? parseFloat(v) * 1_000_000 : (typeof v === "number" ? v * 1_000_000 : undefined);
+      const input = toDollar(pricing.prompt ?? pricing.input);
+      const output = toDollar(pricing.completion ?? pricing.output);
+      const cacheRead = toDollar(pricing.cache_read ?? pricing.cacheRead);
+      const cacheWrite = toDollar(pricing.cache_write ?? pricing.cacheWrite);
+      if (input === undefined && output === undefined) return undefined;
+      return { input: input ?? 0, output: output ?? 0, cacheRead, cacheWrite };
+    };
 
     const parseItem = (item: any) => {
-      // Google returns `name: "models/gemini-2.5-pro"` — strip the prefix
       const rawId = typeof item === "string" ? item : item?.id ?? item?.model ?? item?.name ?? "";
       const id = typeof rawId === "string" ? rawId.replace(/^models\//, "") : "";
-      // Common context window fields: context_length, max_context, context_window
+      if (!id) return;
+      const name = typeof item?.name === "string" ? item.name : undefined;
       const cw =
         toNum(item?.context_length) ??
         toNum(item?.max_context) ??
@@ -1252,28 +1372,37 @@ export async function fetchProviderModels(
         toNum(item?.inputTokenLimit) ??
         toNum(item?.max_tokens) ??
         undefined;
-      // Common max output fields: max_output_tokens, max_completion_tokens
       const mt =
         toNum(item?.max_output_tokens) ??
+        toNum(item?.top_provider?.max_completion_tokens) ??
         toNum(item?.max_completion_tokens) ??
         toNum(item?.outputTokenLimit) ??
         toNum(item?.max_tokens) ??
         undefined;
-      pushModel(id, cw, mt, visionOf(item));
+      const isOR = isOpenRouter(baseUrl, host);
+      pushModel({
+        id,
+        name: name !== id ? name : undefined,
+        contextWindow: cw,
+        maxTokens: mt,
+        reasoning: reasoningOf(item),
+        vision: visionOf(item),
+        audio: audioOf(item),
+        cost: isOR ? parseCost(item.pricing) : undefined,
+        source: isOR ? "openrouter" : "openai",
+      });
     };
 
     if (Array.isArray(data)) {
       data.forEach(parseItem);
     } else if (data && typeof data === "object") {
       const dataArr = data.data ?? data.models ?? data.models_list ?? null;
-      if (Array.isArray(dataArr)) {
-        dataArr.forEach(parseItem);
-      }
+      if (Array.isArray(dataArr)) dataArr.forEach(parseItem);
     }
 
     return { models };
   } catch (e: any) {
-    const msg = e?.name === "TimeoutError" ? "timeout" : e?.message || String(e);
+    const msg = e?.name === "TimeoutError" ? "timeout" : e?.cause?.code || e?.message || String(e);
     return { models: [], error: msg };
   }
 }

package/src/components/layout/Sidebar.tsx

@@ -2,7 +2,6 @@ import { NavLink } from "react-router-dom";
 import {
   LayoutDashboard,
   Settings,
-  Pi,
   History,
   Brain,
   Globe,
@@ -39,10 +38,7 @@ export function Sidebar() {
         className="flex items-center gap-3 border-b px-6 py-5"
         style={{ borderColor: "var(--sidebar-border)" }}
       >
-        <div className="flex h-9 w-9 items-center justify-center rounded-lg"
-          style={{ backgroundColor: "#3b82f6" }}>
-          <Pi className="h-5 w-5" style={{ color: "#ffffff" }} />
-        </div>
+        <img src="/pi.svg" alt="pi-switch" className="h-9 w-9 rounded-lg" />
         <div>
           <h1 className="text-base font-semibold" style={{ color: "var(--page-text)" }}>pi-switch</h1>
           <p className="text-xs" style={{ color: "var(--subtle-text)" }}>{t("app.subtitle")}</p>