@raingor/pi-web-switch 0.4.2 → 0.4.4

package/src/main.tsx

@@ -39,10 +39,10 @@ function useThemeSync(initialized: boolean) {
 function LoadingScreen() {
   const { t } = useTranslation();
   return (
-    <div className="flex h-screen items-center justify-center bg-gray-950">
-      <div className="flex flex-col items-center gap-4">
-        <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-600 border-t-blue-500" />
-        <p className="text-sm text-gray-500">{t("loading.config")}</p>
+    <div className="loading-console">
+      <div className="loading-core">
+        <div className="loading-ring" />
+        <p>{t("loading.config")}</p>
       </div>
     </div>
   );
@@ -51,8 +51,8 @@ function LoadingScreen() {
 function ErrorScreen({ error, onRetry }: { error: string; onRetry: () => void }) {
   const { t } = useTranslation();
   return (
-    <div className="flex h-screen items-center justify-center bg-gray-950">
-      <div className="flex flex-col items-center gap-4 max-w-md text-center">
+    <div className="loading-console">
+      <div className="tech-panel relative z-10 flex max-w-md flex-col items-center gap-4 rounded-xl border p-8 text-center">
         <p className="text-lg font-semibold text-red-400">{t("loading.error_title")}</p>
         <p className="text-sm text-gray-400">{error}</p>
         <button
@@ -112,48 +112,101 @@ function applySavedFontSize() {
 applySavedZoom();
 function applySavedZoom() {
   const saved = Number(localStorage.getItem("pi-ui-zoom"));
+  document.documentElement.style.zoom = "";
   if (saved >= 50 && saved <= 200) {
-    document.documentElement.style.zoom = `${saved}%`;
+    document.documentElement.style.setProperty("--ui-zoom", String(saved / 100));
   }
 }
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <Root />
-  </StrictMode>
-);
+// ─── Service worker lifecycle ───────────────────────────
+// A production SW can remain registered when the same localhost origin is
+// later opened with Vite dev. Actively remove it in development; otherwise a
+// normal Cmd+R may be served an old HTML shell while Cmd+Shift+R bypasses it.
+const APP_CACHE_PREFIX = "pi-web-switch-";
+const DEV_SW_CLEANUP_KEY = "pi-web-switch-dev-sw-cleaned";
+
+async function clearAppCaches() {
+  if (!("caches" in window)) return;
+  const keys = await caches.keys();
+  await Promise.all(
+    keys.filter((key) => key.startsWith(APP_CACHE_PREFIX)).map((key) => caches.delete(key))
+  );
+}
 
-// ─── PWA: register service worker (production only — dev must not
-// cache HTML pages, or SPA routes like /providers can return stale HTML
-// to API fetches and break JSON parsing) ─────────────────────
-if ("serviceWorker" in navigator) {
-  if (import.meta.env.PROD) {
-    window.addEventListener("load", () => {
-      navigator.serviceWorker.register("/sw.js").catch((err) => {
-        console.warn("SW registration failed:", err);
-      });
-    });
-  } else {
-    // Dev: proactively unregister any leftover service worker (e.g. from a
-    // previous `vite preview` or production build on the same origin) and
-    // clear its caches. Dev module URLs are not hashed, so a stale SW would
-    // serve old code on every plain reload until a hard refresh.
-    window.addEventListener("load", () => {
-      navigator.serviceWorker
-        .getRegistrations()
-        .then((registrations) =>
-          Promise.all(registrations.map((reg) => reg.unregister()))
-        )
-        .then(() =>
-          window.caches
-            ? window.caches.keys().then((keys) =>
-                Promise.all(keys.map((k) => window.caches.delete(k)))
-              )
-            : undefined
-        )
-        .catch((err) => {
-          console.warn("SW cleanup failed:", err);
-        });
+function getAppBaseUrl() {
+  const moduleScript = Array.from(document.scripts).find(
+    (script) => script.type === "module" && script.src
+  );
+  return new URL("../", moduleScript?.src ?? document.baseURI);
+}
+
+async function configureServiceWorker() {
+  if (!("serviceWorker" in navigator)) return;
+
+  const appBaseUrl = getAppBaseUrl();
+
+  if (import.meta.env.DEV) {
+    try {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      const appRegistrations = registrations.filter(
+        (registration) => registration.scope === appBaseUrl.href
+      );
+      const hadController = Boolean(navigator.serviceWorker.controller);
+      const removed = await Promise.all(
+        appRegistrations.map((registration) => registration.unregister())
+      );
+      await clearAppCaches();
+
+      // If this document was already controlled by the old production worker,
+      // reload once after unregistering it so the first API/static requests are
+      // also guaranteed to bypass the old worker. sessionStorage prevents a
+      // reload loop if the browser reports the controller for one extra tick.
+      if (
+        hadController &&
+        removed.some(Boolean) &&
+        sessionStorage.getItem(DEV_SW_CLEANUP_KEY) !== "1"
+      ) {
+        sessionStorage.setItem(DEV_SW_CLEANUP_KEY, "1");
+        window.location.reload();
+        return;
+      }
+      sessionStorage.removeItem(DEV_SW_CLEANUP_KEY);
+    } catch (err) {
+      // Cache cleanup must never prevent React from mounting.
+      console.warn("SW cleanup failed:", err);
+    }
+    return;
+  }
+
+  try {
+    // Resolve from the built JS asset directory so this also works when the
+    // app is hosted under a subdirectory instead of the domain root.
+    const swUrl = new URL("sw.js", appBaseUrl);
+    const registration = await navigator.serviceWorker.register(swUrl, {
+      updateViaCache: "none",
     });
+    // Check on every application start instead of waiting for the browser's
+    // periodic service-worker update window.
+    await registration.update();
+  } catch (err) {
+    console.warn("SW registration failed:", err);
   }
-}
+}
+
+async function bootstrap() {
+  if (import.meta.env.DEV) {
+    await configureServiceWorker();
+  }
+
+  createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+      <Root />
+    </StrictMode>
+  );
+
+  if (import.meta.env.PROD) {
+    void configureServiceWorker();
+  }
+}
+
+void bootstrap();

package/src/types/index.ts

@@ -110,7 +110,6 @@ export interface PiSettings {
   treeFilterMode?: string;
   doubleEscapeAction?: string;
   enabledModels?: string[];
-  sessionExpiryDays?: number;
 }
 
 export interface PiAuth {

package/vite.config.ts

@@ -7,16 +7,12 @@ import type { Connect } from "vite";
 // ─── Pi Config API Plugin ───────────────────────────────
 
 function piApiPlugin(): Plugin {
-  // Lazy-load the server-side module (Node.js only)
-  let pi: typeof import("./server/pi-reader");
-  let builtins: typeof import("./src/data/builtin-providers");
-
   return {
     name: "pi-api",
     configureServer(server) {
-      // Load server-side modules
-      pi = require("./server/pi-reader");
-      builtins = require("./src/data/builtin-providers");
+      // Lazy-load the server-side module (Node.js only)
+      const pi = require("./server/pi-reader");
+      const builtins = require("./src/data/builtin-providers");
 
       // Warm the usage cache in the background so the dashboard's first
       // request doesn't block on scanning ~150MB of session JSONL.
@@ -27,15 +23,12 @@ function piApiPlugin(): Plugin {
           /* ignore warm-up failure */
         }
         try {
-          pi.readCopilotUsage();
+          pi.readChatgptUsage();
         } catch {
           /* ignore warm-up failure */
         }
       }, 0);
 
-      // Start the auto-expiry timer: scan once at startup, then every 24h.
-      try { pi.startAutoExpiryTimer(); } catch { /* ignore */ }
-
       const routes: Record<string, (req: Connect.IncomingMessage, res: any) => void> = {
         "GET /api/pi/settings"(_, res) {
           const data = pi.readSettings();
@@ -56,6 +49,48 @@ function piApiPlugin(): Plugin {
           res.setHeader("Content-Type", "application/json");
           res.end(JSON.stringify(data ?? {}));
         },
+        "GET /api/pi/official-usage-config"(_, res) {
+          const config = pi.readOfficialUsageConfig();
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({
+            endpoint: config.endpoint,
+            authMode: config.authMode,
+            keyCount: config.apiKeys.length,
+            maskedKeys: config.apiKeys.map((key: string) => key.length > 8 ? `${key.slice(0, 4)}••••${key.slice(-4)}` : "••••••••"),
+          }));
+        },
+        "POST /api/pi/official-usage-refresh"(_, res) {
+          pi.queryOfficialUsage(pi.readOfficialUsageConfig()).then((usage) => {
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ success: true, usage }));
+          }).catch((error) => {
+            res.statusCode = 400;
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ success: false, error: error instanceof Error ? error.message : "Official usage query failed" }));
+          });
+        },
+        "POST /api/pi/official-usage-query"(req, res) {
+          let body = "";
+          req.on("data", (chunk: string) => (body += chunk));
+          req.on("end", async () => {
+            try {
+              const input = JSON.parse(body);
+              const config = {
+                endpoint: typeof input.endpoint === "string" ? input.endpoint : "",
+                apiKeys: Array.isArray(input.apiKeys) ? input.apiKeys : [],
+                authMode: input.authMode,
+              };
+              const usage = await pi.queryOfficialUsage(config);
+              const saved = pi.writeOfficialUsageConfig(config);
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ success: saved, usage, error: saved ? undefined : "Failed to save configuration" }));
+            } catch (error) {
+              res.statusCode = 400;
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ success: false, error: error instanceof Error ? error.message : "Official usage query failed" }));
+            }
+          });
+        },
         "POST /api/pi/auth"(req, res) {
           let body = "";
           req.on("data", (chunk: string) => (body += chunk));
@@ -187,21 +222,6 @@ function piApiPlugin(): Plugin {
             }
           });
         },
-        "POST /api/pi/session/auto-expire"(req, res) {
-          let body = "";
-          req.on("data", (chunk: string) => (body += chunk));
-          req.on("end", () => {
-            try {
-              const result = pi.autoExpireSessions();
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ success: true, ...result }));
-            } catch {
-              res.statusCode = 500;
-              res.setHeader("Content-Type", "application/json");
-              res.end(JSON.stringify({ success: false, error: "Auto-expire failed" }));
-            }
-          });
-        },
         "GET /api/pi/session-preview"(req, res) {
           const parsedUrl = new URL(req.url!, "http://localhost");
           const p = parsedUrl.searchParams.get("path") || "";
@@ -312,6 +332,14 @@ function piApiPlugin(): Plugin {
         // Strip query string
         const pathOnly = url.split("?")[0];
 
+        // Automatically archive sessions that have been inactive for more
+        // than two weeks. This is recoverable through the existing trash tab.
+        if (method === "POST" && pathOnly === "/api/pi/sessions/auto-trash") {
+          const result = pi.autoTrashStaleSessions(14);
+          res.setHeader("Content-Type", "application/json");
+          return res.end(JSON.stringify(result));
+        }
+
         // Handle DELETE /api/pi/session?path=... (move to trash) and /api/pi/trash?path=... (permanent)
         if (method === "DELETE" && (pathOnly === "/api/pi/session" || pathOnly === "/api/pi/trash")) {
           const parsedUrl = new URL(url, "http://localhost");
@@ -335,45 +363,11 @@ function piApiPlugin(): Plugin {
           const range = parsedUrl.searchParams.get("range") || "today";
           const fromParam = parsedUrl.searchParams.get("from") || "";
           const toParam = parsedUrl.searchParams.get("to") || "";
-
-          const now = new Date();
-          // Date buckets follow China time (UTC+8) regardless of system timezone
-          const localDateStr = (dt: Date) =>
-            new Intl.DateTimeFormat("en-CA", {
-              timeZone: "Asia/Shanghai",
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-            }).format(dt);
-          let fromDate: string;
-          let toDate = localDateStr(now);
-
-          if (range === "today") {
-            fromDate = toDate;
-          } else if (range === "7d") {
-            const d = new Date(now); d.setDate(d.getDate() - 6); fromDate = localDateStr(d);
-          } else if (range === "30d") {
-            const d = new Date(now); d.setDate(d.getDate() - 29); fromDate = localDateStr(d);
-          } else if (range === "custom" && fromParam) {
-            fromDate = fromParam;
-            if (toParam) toDate = toParam;
-          } else {
-            fromDate = toDate;
+          if (parsedUrl.searchParams.get("refresh") === "1") {
+            pi.clearUsageCache();
+            pi.clearChatgptUsageCache();
           }
 
-          const allRecords = pi.readAllUsage();
-          const usage = pi.getUsageByRange(allRecords, fromDate, toDate);
-          res.setHeader("Content-Type", "application/json");
-          return res.end(JSON.stringify(usage));
-        }
-
-        // Handle GET /api/pi/cindy-usage-range?range=today|7d|30d|custom&from=...&to=...
-        if (method === "GET" && pathOnly === "/api/pi/cindy-usage-range") {
-          const parsedUrl = new URL(url, "http://localhost");
-          const range = parsedUrl.searchParams.get("range") || "today";
-          const fromParam = parsedUrl.searchParams.get("from") || "";
-          const toParam = parsedUrl.searchParams.get("to") || "";
-
           const now = new Date();
           // Date buckets follow China time (UTC+8) regardless of system timezone
           const localDateStr = (dt: Date) =>
@@ -399,83 +393,7 @@ function piApiPlugin(): Plugin {
             fromDate = toDate;
           }
 
-          const allRecords = pi.readCindyUsage();
-          const usage = pi.getUsageByRange(allRecords, fromDate, toDate);
-          res.setHeader("Content-Type", "application/json");
-          return res.end(JSON.stringify(usage));
-        }
-
-        // Handle GET /api/pi/claude-usage-range?range=today|7d|30d|custom&from=...&to=...
-        if (method === "GET" && pathOnly === "/api/pi/claude-usage-range") {
-          const parsedUrl = new URL(url, "http://localhost");
-          const range = parsedUrl.searchParams.get("range") || "today";
-          const fromParam = parsedUrl.searchParams.get("from") || "";
-          const toParam = parsedUrl.searchParams.get("to") || "";
-
-          const now = new Date();
-          // Date buckets follow China time (UTC+8) regardless of system timezone
-          const localDateStr = (dt: Date) =>
-            new Intl.DateTimeFormat("en-CA", {
-              timeZone: "Asia/Shanghai",
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-            }).format(dt);
-          let fromDate: string;
-          let toDate = localDateStr(now);
-
-          if (range === "today") {
-            fromDate = toDate;
-          } else if (range === "7d") {
-            const d = new Date(now); d.setDate(d.getDate() - 6); fromDate = localDateStr(d);
-          } else if (range === "30d") {
-            const d = new Date(now); d.setDate(d.getDate() - 29); fromDate = localDateStr(d);
-          } else if (range === "custom" && fromParam) {
-            fromDate = fromParam;
-            if (toParam) toDate = toParam;
-          } else {
-            fromDate = toDate;
-          }
-
-          const allRecords = pi.readClaudeUsage();
-          const usage = pi.getUsageByRange(allRecords, fromDate, toDate);
-          res.setHeader("Content-Type", "application/json");
-          return res.end(JSON.stringify(usage));
-        }
-
-        // Handle GET /api/pi/codex-usage-range?range=today|7d|30d|custom&from=...&to=...
-        if (method === "GET" && pathOnly === "/api/pi/codex-usage-range") {
-          const parsedUrl = new URL(url, "http://localhost");
-          const range = parsedUrl.searchParams.get("range") || "today";
-          const fromParam = parsedUrl.searchParams.get("from") || "";
-          const toParam = parsedUrl.searchParams.get("to") || "";
-
-          const now = new Date();
-          // Date buckets follow China time (UTC+8) regardless of system timezone
-          const localDateStr = (dt: Date) =>
-            new Intl.DateTimeFormat("en-CA", {
-              timeZone: "Asia/Shanghai",
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-            }).format(dt);
-          let fromDate: string;
-          let toDate = localDateStr(now);
-
-          if (range === "today") {
-            fromDate = toDate;
-          } else if (range === "7d") {
-            const d = new Date(now); d.setDate(d.getDate() - 6); fromDate = localDateStr(d);
-          } else if (range === "30d") {
-            const d = new Date(now); d.setDate(d.getDate() - 29); fromDate = localDateStr(d);
-          } else if (range === "custom" && fromParam) {
-            fromDate = fromParam;
-            if (toParam) toDate = toParam;
-          } else {
-            fromDate = toDate;
-          }
-
-          const allRecords = pi.readCodexUsage();
+          const allRecords = pi.readAllUsage();
           const usage = pi.getUsageByRange(allRecords, fromDate, toDate);
           res.setHeader("Content-Type", "application/json");
           return res.end(JSON.stringify(usage));
@@ -502,33 +420,18 @@ function piApiPlugin(): Plugin {
           return { fromDate, toDate };
         };
 
-        // Handle GET /api/pi/all-usage-range
-        if (method === "GET" && pathOnly === "/api/pi/all-usage-range") {
-          const parsedUrl = new URL(url, "http://localhost");
-          const range = parsedUrl.searchParams.get("range") || "today";
-          const fromParam = parsedUrl.searchParams.get("from") || "";
-          const toParam = parsedUrl.searchParams.get("to") || "";
-          const { fromDate, toDate } = resolveDateRange(range, fromParam, toParam);
-          const allRecords = pi.readAllCombinedUsage();
-          const usage = pi.getUsageByRange(allRecords, fromDate, toDate);
-          res.setHeader("Content-Type", "application/json");
-          return res.end(JSON.stringify(usage));
-        }
-
-        // Handle provider-filtered endpoints: /api/pi/{provider}-usage-range
-        // Copilot is read from the local ~/.copilot/session-store.db (no
-        // GitHub REST API, no PAT), so it shares the same sync pipeline as
-        // the other local sources.
-        const providerMatch = pathOnly.match(/^\/api\/pi\/(atomcode|copilot|opencode|gemini|grok)-usage-range$/);
-        if (method === "GET" && providerMatch) {
-          const providerId = providerMatch[1]!;
+        // Handle GET /api/pi/chatgpt-usage-range using local Codex Desktop
+        // rollout JSONL files under ~/.codex/sessions and archived_sessions.
+        if (method === "GET" && pathOnly === "/api/pi/chatgpt-usage-range") {
           const parsedUrl = new URL(url, "http://localhost");
           const range = parsedUrl.searchParams.get("range") || "today";
           const fromParam = parsedUrl.searchParams.get("from") || "";
           const toParam = parsedUrl.searchParams.get("to") || "";
+          if (parsedUrl.searchParams.get("refresh") === "1") {
+            pi.clearChatgptUsageCache();
+          }
           const { fromDate, toDate } = resolveDateRange(range, fromParam, toParam);
-          const allRecords = pi.filterByProvider(pi.readAllCombinedUsage(), providerId);
-          const usage = pi.getUsageByRange(allRecords, fromDate, toDate);
+          const usage = pi.getUsageByRange(pi.readChatgptUsage(), fromDate, toDate);
           res.setHeader("Content-Type", "application/json");
           return res.end(JSON.stringify(usage));
         }
@@ -571,8 +474,6 @@ export default defineConfig({
     rollupOptions: {
       input: {
         main: path.resolve(__dirname, "index.html"),
-        // Menu-bar popup (used by the Electron tray app)
-        popup: path.resolve(__dirname, "electron/popup.html"),
       },
     },
   },