npm - @raingor/pi-web-switch - Versions diffs - 0.2.0 → 0.3.1 - Mend

@raingor/pi-web-switch 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/index.html +5 -1
package/package.json +19 -6
package/public/apple-touch-icon.png +0 -0
package/public/icon-192.png +0 -0
package/public/icon-512.png +0 -0
package/public/manifest.webmanifest +31 -0
package/public/sw.js +81 -0
package/src/App.tsx +0 -4
package/src/components/dashboard/DashboardPage.tsx +30 -17
package/src/components/layout/Sidebar.tsx +0 -4
package/src/main.tsx +10 -1
package/src/store/config-store.ts +5 -1

package/index.html CHANGED Viewed

@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>pi-switch — pi Configuration Manager</title>
     <link rel="icon" type="image/svg+xml" href="/pi.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <meta name="theme-color" content="#2563eb" />
+    <meta name="description" content="Web UI for pi coding agent — configuration management, session browser, and usage dashboard" />
   </head>
   <body class="bg-gray-950 text-gray-100 antialiased">
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,10 +1,18 @@
 {
   "name": "@raingor/pi-web-switch",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
+  "main": "pi-package/index.ts",
   "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"],
+  "keywords": [
+    "pi-package",
+    "pi",
+    "pi-coding-agent",
+    "dashboard",
+    "configuration",
+    "web-ui"
+  ],
   "author": "Raingor",
   "license": "MIT",
   "repository": {
@@ -21,8 +29,12 @@
     "preview": "vite preview"
   },
   "pi": {
-    "extensions": ["./pi-package/index.ts"],
-    "skills": ["./pi-package/skills"]
+    "extensions": [
+      "./pi-package/index.ts"
+    ],
+    "skills": [
+      "./pi-package/skills"
+    ]
   },
   "dependencies": {
     "lucide-react": "^0.487.0",
@@ -39,6 +51,7 @@
     "@vitejs/plugin-react": "^4.4.1",
     "tailwindcss": "^4.1.4",
     "typescript": "~5.8.3",
-    "vite": "^6.3.2"
+    "vite": "^6.3.2",
+    "vite-plugin-pwa": "^1.3.0"
   }
-}
+}

package/public/apple-touch-icon.png ADDED Viewed

Binary file

package/public/icon-192.png ADDED Viewed

Binary file

package/public/icon-512.png ADDED Viewed

Binary file

package/public/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "name": "pi-web-switch",
+  "short_name": "pi-switch",
+  "description": "Web UI for pi coding agent — configuration management, session browser, and usage dashboard",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0a0a0a",
+  "theme_color": "#2563eb",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

package/public/sw.js ADDED Viewed

@@ -0,0 +1,81 @@
+// ─── pi-web-switch Service Worker ───────────────────────
+// Cache-first for static assets, network-first for API calls.
+// Bump CACHE_VERSION to invalidate old caches on deploy.
+const CACHE_VERSION = "pi-web-switch-v1";
+const STATIC_CACHE = `${CACHE_VERSION}-static`;
+const RUNTIME_CACHE = `${CACHE_VERSION}-runtime`;
+const PRECACHE_URLS = [
+  "/",
+  "/index.html",
+  "/manifest.webmanifest",
+  "/icon-192.png",
+  "/icon-512.png",
+  "/apple-touch-icon.png",
+];
+// ─── Install: precache core assets ─────────────────────
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches
+      .open(STATIC_CACHE)
+      .then((cache) => cache.addAll(PRECACHE_URLS))
+      .then(() => self.skipWaiting())
+  );
+});
+// ─── Activate: clean old caches ────────────────────────
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((k) => !k.startsWith(CACHE_VERSION))
+            .map((k) => caches.delete(k))
+        )
+      )
+      .then(() => self.clients.claim())
+  );
+});
+// ─── Fetch: strategy by request type ───────────────────
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+  // Only handle GET; ignore cross-origin and chrome-extension.
+  if (request.method !== "GET") return;
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return;
+  // API calls: network-first, fallback to cache.
+  if (url.pathname.startsWith("/api/")) {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const copy = response.clone();
+          caches.open(RUNTIME_CACHE).then((cache) => cache.put(request, copy));
+          return response;
+        })
+        .catch(() => caches.match(request))
+    );
+    return;
+  }
+  // Static assets: cache-first, then network (and cache the result).
+  event.respondWith(
+    caches.match(request).then((cached) => {
+      if (cached) return cached;
+      return fetch(request).then((response) => {
+        if (!response || response.status !== 200 || response.type !== "basic") {
+          return response;
+        }
+        const copy = response.clone();
+        caches.open(RUNTIME_CACHE).then((cache) => cache.put(request, copy));
+        return response;
+      });
+    })
+  );
+});

package/src/App.tsx CHANGED Viewed

@@ -1,8 +1,6 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AppShell } from "@/components/layout/AppShell";
 import { DashboardPage } from "@/components/dashboard/DashboardPage";
-import { ModelsPage } from "@/components/models/ModelsPage";
-import { ProvidersPage } from "@/components/providers/ProvidersPage";
 import { SessionsPage } from "@/components/sessions/SessionsPage";
 import { MemoryPage } from "@/components/sessions/MemoryPage";
 import { SettingsPage } from "@/components/settings/SettingsPage";
@@ -13,8 +11,6 @@ export default function App() {
       <Routes>
         <Route element={<AppShell />}>
           <Route path="/" element={<DashboardPage />} />
-          <Route path="/models" element={<ModelsPage />} />
-          <Route path="/providers" element={<ProvidersPage />} />
           <Route path="/sessions" element={<SessionsPage />} />
           <Route path="/memory" element={<MemoryPage />} />
           <Route path="/settings" element={<SettingsPage />} />

package/src/components/dashboard/DashboardPage.tsx CHANGED Viewed

@@ -99,7 +99,20 @@ const CHART_LABELS: Record<string, string> = {
 // ─── Helpers ────────────────────────────────────────────
-function formatTokensShort(n: number): string {
+function formatTokensShort(n: number, lang: string = "en"): string {
+  // 中文：亿 / 万
+  if (lang.startsWith("zh")) {
+    if (n >= 100_000_000) return `${(n / 100_000_000).toFixed(2)}亿`;
+    if (n >= 10_000) return `${(n / 10_000).toFixed(1)}万`;
+    return n.toLocaleString("zh-CN");
+  }
+  // 日文：億 / 万
+  if (lang.startsWith("ja")) {
+    if (n >= 100_000_000) return `${(n / 100_000_000).toFixed(2)}億`;
+    if (n >= 10_000) return `${(n / 10_000).toFixed(1)}万`;
+    return n.toLocaleString("ja-JP");
+  }
+  // 英文：M / K
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
   return n.toString();
@@ -183,7 +196,7 @@ function StatCard({
 // ─── Breakdown Row ──────────────────────────────────────
-function BreakdownRow({ label, value, total, color }: { label: string; value: number; total: number; color: string }) {
+function BreakdownRow({ label, value, total, color, lang = "en" }: { label: string; value: number; total: number; color: string; lang?: string }) {
   const pct = total > 0 ? (value / total) * 100 : 0;
   return (
     <div className="flex items-center justify-between py-1.5">
@@ -192,7 +205,7 @@ function BreakdownRow({ label, value, total, color }: { label: string; value: nu
         <span className="text-xs" style={{ color: "var(--muted-text)" }}>{label}</span>
       </div>
       <div className="flex items-center gap-2">
-        <span className="text-xs font-medium" style={{ color: "var(--page-text)" }}>{formatTokensShort(value)}</span>
+        <span className="text-xs font-medium" style={{ color: "var(--page-text)" }}>{formatTokensShort(value, lang)}</span>
         <span className="text-xs" style={{ color: "var(--subtle-text)" }}>({pct.toFixed(1)}%)</span>
       </div>
     </div>
@@ -202,7 +215,7 @@ function BreakdownRow({ label, value, total, color }: { label: string; value: nu
 // ─── Main Component ─────────────────────────────────────
 export function DashboardPage() {
-  const { t } = useTranslation();
+  const { t, lang } = useTranslation();
   const { currency, toggle: toggleCurrency } = useCurrency();
   const { initialized } = useConfigStore();
   const [range, setRange] = useState<RangeKey>("today");
@@ -389,13 +402,13 @@ export function DashboardPage() {
               title={t("dashboard.total_tokens")}
               value={data.totalTokens.toLocaleString("en-US")}
               icon={<Activity className="h-4 w-4" style={{ color: "#3b82f6" }} />}
-              subtitle={`≈ ${formatTokensShort(data.totalTokens)}`}
+              subtitle={`≈ ${formatTokensShort(data.totalTokens, lang)}`}
             >
               <div className="mt-3 space-y-0.5 border-t pt-3" style={{ borderColor: "var(--card-border)" }}>
-                <BreakdownRow label={t("dashboard.input")} value={data.totalInput} total={data.totalTokens} color="#3b82f6" />
-                <BreakdownRow label={t("dashboard.output")} value={data.totalOutput} total={data.totalTokens} color="#10b981" />
-                <BreakdownRow label={t("dashboard.cache_create")} value={data.totalCacheWrite} total={data.totalTokens} color="#f59e0b" />
-                <BreakdownRow label={t("dashboard.cache_hit")} value={data.totalCacheRead} total={data.totalTokens} color="#8b5cf6" />
+                <BreakdownRow label={t("dashboard.input")} value={data.totalInput} total={data.totalTokens} color="#3b82f6" lang={lang} />
+                <BreakdownRow label={t("dashboard.output")} value={data.totalOutput} total={data.totalTokens} color="#10b981" lang={lang} />
+                <BreakdownRow label={t("dashboard.cache_create")} value={data.totalCacheWrite} total={data.totalTokens} color="#f59e0b" lang={lang} />
+                <BreakdownRow label={t("dashboard.cache_hit")} value={data.totalCacheRead} total={data.totalTokens} color="#8b5cf6" lang={lang} />
               </div>
             </StatCard>
@@ -509,8 +522,8 @@ export function DashboardPage() {
                           <td className="px-4 py-2.5 whitespace-nowrap" style={{ color: "var(--page-text)" }}>{r.timestamp}</td>
                           <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{r.providerId}</td>
                           <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{r.modelId}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.input)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.output)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.input, lang)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(r.output, lang)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{currency === "CNY" ? `¥${(r.cost * USD_TO_CNY).toFixed(4)}` : formatCostShort(r.cost)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{r.requests}</td>
                           <td className="px-4 py-2.5 text-center">
@@ -545,9 +558,9 @@ export function DashboardPage() {
                       data.providerStats.map((p, i) => (
                         <tr key={i} className="border-b" style={{ borderColor: "var(--card-border)" }}>
                           <td className="px-4 py-2.5 font-medium" style={{ color: "var(--page-text)" }}>{p.providerId}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalTokens)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalInput)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalOutput)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalTokens, lang)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalInput, lang)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(p.totalOutput, lang)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{currency === "CNY" ? `¥${(p.totalCost * USD_TO_CNY).toFixed(4)}` : formatCostShort(p.totalCost)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{p.totalRequests}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{p.modelCount}</td>
@@ -579,9 +592,9 @@ export function DashboardPage() {
                         <tr key={i} className="border-b" style={{ borderColor: "var(--card-border)" }}>
                           <td className="px-4 py-2.5 font-medium" style={{ color: "var(--page-text)" }}>{m.modelId}</td>
                           <td className="px-4 py-2.5" style={{ color: "var(--page-text)" }}>{m.providerId}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalTokens)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalInput)}</td>
-                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalOutput)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalTokens, lang)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalInput, lang)}</td>
+                          <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{formatTokensShort(m.totalOutput, lang)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{currency === "CNY" ? `¥${(m.totalCost * USD_TO_CNY).toFixed(4)}` : formatCostShort(m.totalCost)}</td>
                           <td className="px-4 py-2.5 text-right font-mono" style={{ color: "var(--page-text)" }}>{m.totalRequests}</td>
                         </tr>

package/src/components/layout/Sidebar.tsx CHANGED Viewed

@@ -1,8 +1,6 @@
 import { NavLink } from "react-router-dom";
 import {
   LayoutDashboard,
-  Box,
-  Plug,
   Settings,
   Pi,
   History,
@@ -15,8 +13,6 @@ import { useState } from "react";
 const navItems = [
   { to: "/", icon: LayoutDashboard, key: "nav.dashboard" },
-  { to: "/models", icon: Box, key: "nav.models" },
-  { to: "/providers", icon: Plug, key: "nav.providers" },
   { to: "/sessions", icon: History, key: "nav.sessions" },
   { to: "/memory", icon: Brain, key: "nav.memory" },
   { to: "/settings", icon: Settings, key: "nav.settings" },

package/src/main.tsx CHANGED Viewed

@@ -103,4 +103,13 @@ createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Root />
   </StrictMode>
-);
+);
+// ─── PWA: register service worker ──────────────────────
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/sw.js").catch((err) => {
+      console.warn("SW registration failed:", err);
+    });
+  });
+}

package/src/store/config-store.ts CHANGED Viewed

@@ -421,7 +421,11 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
     if (ok) {
       set({ modelsJson: updated });
       const { auth } = get();
-      set({ allProviders: mergeProviders(auth ?? {}, updated) });
+      const newAllProviders = mergeProviders(auth ?? {}, updated);
+      const newAllModels = newAllProviders.flatMap((p) =>
+        p.models.map((m) => ({ ...m, providerId: p.id, providerName: p.name }))
+      );
+      set({ allProviders: newAllProviders, allModels: newAllModels });
     }
   },