@raingor/pi-web-switch 0.4.0 → 0.4.2

package/src/components/dashboard/DashboardPage.tsx

@@ -67,8 +67,10 @@ interface UsageRangeData {
     totalCost: number;
     totalRequests: number;
   }[];
+  notice?: "no-config" | "api-error";
 }
 
+type SourceKey = "all" | "pi" | "cindy-pi" | "claude" | "codex" | "opencode" | "gemini" | "grok" | "atomcode" | "copilot";
 type RangeKey = "today" | "7d" | "30d" | "custom";
 type TabKey = "log" | "provider" | "model";
 type SortDir = "asc" | "desc";
@@ -115,21 +117,35 @@ function formatCostShort(n: number): string {
 }
 
 function formatDateShort(dateStr: string): string {
-  const d = new Date(dateStr + "T00:00:00");
-  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  // Parse as a China-time (UTC+8) calendar date and format in that timezone.
+  const [y, m, dNum] = dateStr.split("-").map(Number);
+  if (!y || !m || !dNum) return dateStr;
+  const d = new Date(Date.UTC(y, m - 1, dNum));
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    timeZone: "Asia/Shanghai",
+  });
 }
 
-function localDateStr(d: Date): string {
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+function cnTodayStr(): string {
+  // "YYYY-MM-DD" in China time (UTC+8), independent of system timezone.
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(new Date());
 }
 
 /** Previous period of equal length, for period-over-period trends. */
 function getPrevRange(range: RangeKey): { from: string; to: string } | null {
-  const now = new Date();
   const shift = (days: number) => {
-    const d = new Date(now);
-    d.setDate(d.getDate() - days);
-    return localDateStr(d);
+    // Start from China-time "today" and shift by whole days using UTC math.
+    const [y, m, dNum] = cnTodayStr().split("-").map(Number);
+    const t = Date.UTC(y ?? 0, (m ?? 1) - 1, dNum ?? 1) - days * 86400000;
+    const d = new Date(t);
+    return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, "0")}-${String(d.getUTCDate()).padStart(2, "0")}`;
   };
   if (range === "today") return { from: shift(1), to: shift(1) };
   if (range === "7d") return { from: shift(13), to: shift(7) };
@@ -270,6 +286,7 @@ export function DashboardPage() {
   const { t, lang } = useTranslation();
   const { currency, toggle: toggleCurrency } = useCurrency();
   const { initialized } = useConfigStore();
+  const [source, setSource] = useState<SourceKey>("pi");
   const [range, setRange] = useState<RangeKey>("today");
   const [customFrom, setCustomFrom] = useState("");
   const [customTo, setCustomTo] = useState("");
@@ -288,9 +305,20 @@ export function DashboardPage() {
 
   const customInvalid = range === "custom" && !!customFrom && !!customTo && customFrom > customTo;
 
-  const fetchData = useCallback(() => {
+  const fetchData = useCallback((force = false) => {
     if (!initialized || customInvalid) return;
-    let url = "/api/pi/usage-range?range=" + range;
+    let baseUrl = "/api/pi/usage-range";
+    if (source === "all") baseUrl = "/api/pi/all-usage-range";
+    else if (source === "cindy-pi") baseUrl = "/api/pi/cindy-usage-range";
+    else if (source === "claude") baseUrl = "/api/pi/claude-usage-range";
+    else if (source === "codex") baseUrl = "/api/pi/codex-usage-range";
+    else if (source === "opencode") baseUrl = "/api/pi/opencode-usage-range";
+    else if (source === "gemini") baseUrl = "/api/pi/gemini-usage-range";
+    else if (source === "grok") baseUrl = "/api/pi/grok-usage-range";
+    else if (source === "atomcode") baseUrl = "/api/pi/atomcode-usage-range";
+    else if (source === "copilot") baseUrl = "/api/pi/copilot-usage-range";
+    // force=true adds refresh=1 so the API rescan bypasses its 30s session cache
+    let url = `${baseUrl}?range=${range}${force ? "&refresh=1" : ""}`;
     if (range === "custom" && customFrom) {
       url += `&from=${customFrom}&to=${customTo || customFrom}`;
     }
@@ -308,19 +336,22 @@ export function DashboardPage() {
     // Previous period of equal length → period-over-period trend on stat cards
     const prev = getPrevRange(range);
     if (prev) {
-      fetch(`/api/pi/usage-range?range=custom&from=${prev.from}&to=${prev.to}`)
+      fetch(`${baseUrl}?range=custom&from=${prev.from}&to=${prev.to}`)
         .then((r) => r.json())
         .then((p) => setPrevTotals({ tokens: p.totalTokens ?? 0, cost: p.totalCost ?? 0 }))
         .catch(() => setPrevTotals(null));
     } else {
       setPrevTotals(null);
     }
-  }, [initialized, range, customFrom, customTo, customInvalid]);
+  }, [initialized, source, range, customFrom, customTo, customInvalid]);
 
   useEffect(() => { fetchData(); }, [fetchData]);
 
-  // Reset request-log pagination when the queried range changes
-  useEffect(() => { setLogPage(1); }, [range, customFrom, customTo]);
+  // Reset request-log pagination when the queried range or source changes
+  useEffect(() => { setLogPage(1); }, [range, customFrom, customTo, source]);
+
+  // Reset loading state when source changes
+  useEffect(() => { setLoading(true); }, [source]);
 
   // Auto-refresh with configurable interval (seconds)
   useEffect(() => {
@@ -329,7 +360,7 @@ export function DashboardPage() {
     return () => clearInterval(id);
   }, [autoRefresh, refreshInterval, fetchData]);
 
-  const today = new Date().toISOString().split("T")[0];
+  const today = cnTodayStr();
 
   // Chart data: hourly for "today", daily for 7d/30d/custom
   const rawBreakdown = range === "today" ? data?.hourlyBreakdown : data?.dailyBreakdown;
@@ -384,6 +415,35 @@ export function DashboardPage() {
 
   return (
     <div className="space-y-5">
+      {/* Source Selector: Pi / Cindy-Pi */}
+      <div className="flex items-center gap-1 rounded-lg border p-0.5" style={{ borderColor: "var(--card-border)", backgroundColor: "var(--page-bg)" }}>
+        {([
+          { key: "all" as SourceKey, label: "dashboard.source_all", icon: "📊" },
+          { key: "pi" as SourceKey, label: "dashboard.source_pi", icon: "🖥" },
+          { key: "cindy-pi" as SourceKey, label: "dashboard.source_cindy_pi", icon: "🤖" },
+          { key: "claude" as SourceKey, label: "dashboard.source_claude", icon: "🧠" },
+          { key: "codex" as SourceKey, label: "dashboard.source_codex", icon: "⚡" },
+          { key: "opencode" as SourceKey, label: "dashboard.source_opencode", icon: "🔷" },
+          { key: "gemini" as SourceKey, label: "dashboard.source_gemini", icon: "✨" },
+          { key: "grok" as SourceKey, label: "dashboard.source_grok", icon: "🌀" },
+          { key: "atomcode" as SourceKey, label: "dashboard.source_atomcode", icon: "⚛️" },
+          { key: "copilot" as SourceKey, label: "dashboard.source_copilot", icon: "🐙" },
+        ]).map((s) => (
+          <button
+            key={s.key}
+            onClick={() => setSource(s.key)}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-xs font-medium transition-colors flex items-center gap-1.5",
+              source === s.key ? "text-white" : "hover:bg-gray-800/30"
+            )}
+            style={source === s.key ? { backgroundColor: "#3b82f6", color: "#fff" } : { color: "var(--muted-text)" }}
+          >
+            <span>{s.icon}</span>
+            <span>{t(s.label)}</span>
+          </button>
+        ))}
+      </div>
+
       {/* Title + Time Range Selector + Currency Toggle */}
       <div className="flex items-center justify-between flex-wrap gap-3">
         <div>
@@ -392,6 +452,18 @@ export function DashboardPage() {
             {data ? t("dashboard.requests_count", String(data.requestLog.length), formatCost(data.totalCost, currency)) : ""}
             {lastUpdated && <span className="ml-2">· {t("dashboard.last_updated", lastUpdated)}</span>}
           </p>
+          {data?.notice && (
+            <p
+              className="mt-1 inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs"
+              style={{
+                borderColor: data.notice === "no-config" ? "#f59e0b" : "#ef4444",
+                color: data.notice === "no-config" ? "#f59e0b" : "#f87171",
+                backgroundColor: data.notice === "no-config" ? "#f59e0b11" : "#ef444411",
+              }}
+            >
+              {data.notice === "no-config" ? t("dashboard.copilot_not_configured") : t("dashboard.copilot_api_error")}
+            </p>
+          )}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -404,7 +476,7 @@ export function DashboardPage() {
             {currency}
           </button>
           <button
-            onClick={() => { fetchData(); }}
+            onClick={() => { fetchData(true); }}
             className="flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors hover:bg-gray-800/30"
             style={{ borderColor: "var(--card-border)", color: "var(--muted-text)", backgroundColor: "var(--card-bg)" }}
             title={t("dashboard.refresh_now")}

package/src/components/layout/AppShell.tsx

@@ -1,18 +1,25 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import { Sidebar } from "./Sidebar";
 
 export function AppShell() {
+  const location = useLocation();
+  const isFullHeightPage = location.pathname.startsWith("/chat");
+
   return (
     <div className="flex h-screen overflow-hidden">
       <Sidebar />
       <main
-        className="flex-1 overflow-y-auto"
+        className={isFullHeightPage ? "flex-1 overflow-hidden" : "flex-1 overflow-y-auto"}
         style={{ backgroundColor: "var(--page-bg)" }}
       >
-        <div className="mx-auto max-w-7xl px-8 py-8">
+        {isFullHeightPage ? (
           <Outlet />
-        </div>
+        ) : (
+          <div className="mx-auto max-w-7xl px-8 py-8">
+            <Outlet />
+          </div>
+        )}
       </main>
     </div>
   );
-}
+}

package/src/components/layout/Sidebar.tsx

@@ -4,9 +4,9 @@ import {
   Settings,
   History,
   Brain,
-  Globe,
   Plug,
   Users,
+  Globe,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useTranslation, LANGUAGES } from "@/lib/i18n";
@@ -33,10 +33,21 @@ export function Sidebar() {
         borderColor: "var(--sidebar-border)",
       }}
     >
-      {/* Logo */}
+      {/* Logo — pt-12 leaves room for the macOS traffic-light buttons in the
+          immersive (hiddenInset) title bar so they don't overlap the logo.
+          WebkitAppRegion: drag restores window dragging since the native
+          title bar is hidden. */}
       <div
-        className="flex items-center gap-3 border-b px-6 py-5"
-        style={{ borderColor: "var(--sidebar-border)" }}
+        className="flex items-center gap-3 border-b px-6 pt-12 pb-5"
+        style={{
+          borderColor: "var(--sidebar-border)",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          // Electron-only: lets the user drag the frameless (hiddenInset) window
+          // from the sidebar header. TypeScript doesn't know the non-standard
+          // -webkit-app-region property, so cast it explicitly.
+          ...({ WebkitAppRegion: "drag" } as React.CSSProperties),
+        }}
       >
         <img src="/pi.svg" alt="pi-switch" className="h-9 w-9 rounded-lg" />
         <div>

package/src/components/providers/ProvidersModelsPage.tsx

@@ -73,19 +73,20 @@ function isValidHttpUrl(value: string): boolean {
 const DEFAULT_CONTEXT_WINDOW = 262144;
 const DEFAULT_MAX_TOKENS = 32768;
 
-// Sanitize to a config-safe id: lowercase letters, digits and hyphens only
+// Sanitize to a config-safe id: letters (any script), digits and hyphens.
+// pi shows this key verbatim in its model picker badge, so keep it readable.
 function sanitizeProviderId(name: string): string {
   return name
     .trim()
     .toLowerCase()
     .replace(/\s+/g, "-")
-    .replace(/[^a-z0-9-]/g, "")
+    .replace(/[^\p{L}\p{N}-]/gu, "")
     .replace(/-+/g, "-")
     .replace(/^-|-$/g, "");
 }
 
-// Non-ASCII names (e.g. 中文) sanitize to "" — fall back to the endpoint hostname
-// so the provider still gets a valid id while keeping the original display name.
+// Empty or symbol-only names fall back to the endpoint hostname so the
+// provider still gets a valid id while keeping the original display name.
 function deriveProviderId(name: string, baseUrl: string): string {
   const fromName = sanitizeProviderId(name);
   if (fromName || !name.trim()) return fromName;
@@ -114,11 +115,11 @@ interface ParsedImport {
 }
 
 const IMPORT_LABEL_RE =
-  /(?<![\w/.\-])(apikey|api_key|api-key|key|token|secret|密钥|金鑰|baseurl|base_url|base-url|url|endpoint|地址|接口|provider|name|名称|名稱|供应商|供應商|model_ids?|modelids?|models?|模型)\s*[:：](?!\/\/)/gi;
+  /(?<![\w/.\-])(apikey|api_key|api-key|keys?|token|secret|密钥|金鑰|baseurl|base_url|base-url|url|endpoint|地址|接口|provider|name|名称|名稱|供应商|供應商|model_ids?|modelids?|models?|模型)\s*[:：](?!\/\/)/gi;
 
 function importField(label: string): "name" | "baseUrl" | "apiKey" | "models" {
   const l = label.toLowerCase();
-  if (/^(apikey|api_key|api-key|key|token|secret|密钥|金鑰)$/.test(l)) return "apiKey";
+  if (/^(apikey|api_key|api-key|keys?|token|secret|密钥|金鑰)$/.test(l)) return "apiKey";
   if (/^(baseurl|base_url|base-url|url|endpoint|地址|接口)$/.test(l)) return "baseUrl";
   if (/^(provider|name|名称|名稱|供应商|供應商)$/.test(l)) return "name";
   return "models";
@@ -294,15 +295,19 @@ export function ProvidersModelsPage() {
     // builtin provider's model list so duplicates keep their models.
     const sourceProvider = allProviders.find((p) => p.id === id);
     const sourceModels = existing?.models ?? sourceProvider?.models ?? [];
+    const sourceName = sourceProvider?.name ?? id;
+    // Derive the new key from the display name so pi's model picker badge
+    // matches what the user sees in this UI.
+    const baseId = sanitizeProviderId(sourceName) || id;
     const suffix = "-copy";
-    let newId = sanitizeProviderId(id + suffix);
+    let newId = sanitizeProviderId(baseId + suffix);
     // Ensure uniqueness against existing provider ids
     const taken = new Set(allProviders.map((p) => p.id));
     let i = 2;
-    while (taken.has(newId)) newId = sanitizeProviderId(`${id}-copy${i++}`);
+    while (taken.has(newId)) newId = sanitizeProviderId(`${baseId}-copy${i++}`);
     // Copy config but clear apiKey; carry models + headers + overrides
     const cfg: CustomProviderConfig = {
-      name: `${sourceProvider?.name ?? id} (copy)`,
+      name: `${sourceName} (copy)`,
       baseUrl: existing?.baseUrl ?? sourceProvider?.baseUrl,
       api: existing?.api ?? sourceProvider?.api,
       headers: existing?.headers,
@@ -430,6 +435,7 @@ export function ProvidersModelsPage() {
               provider={selected}
               onDelete={() => setDeleteConfirm(selected.id)}
               onDuplicate={() => handleDuplicateProvider(selected.id)}
+              onRenamed={(newId) => setSelectedId(newId)}
             />
           ) : (
             <div className="flex h-40 items-center justify-center text-sm text-gray-500">
@@ -597,7 +603,7 @@ function TestConnectionButton({ baseUrl, apiKey }: { baseUrl: string; apiKey?: s
 
 // ─── Provider Detail Panel ────────────────────────────────
 
-function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provider; onDelete: () => void; onDuplicate: () => void }) {
+function ProviderDetail({ provider, onDelete, onDuplicate, onRenamed }: { provider: Provider; onDelete: () => void; onDuplicate: () => void; onRenamed: (newId: string) => void }) {
   const { t } = useTranslation();
   const { currency } = useCurrency();
   const {
@@ -605,6 +611,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
     settings,
     updateSettings,
     updateCustomProvider,
+    renameCustomProvider,
     setProviderAuth,
     removeProviderAuth,
     addModel,
@@ -651,6 +658,9 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
   const [supportsDeveloperRole, setSupportsDeveloperRole] = useState(
     provider.compat?.supportsDeveloperRole ?? false
   );
+  const [supportsFinishReason, setSupportsFinishReason] = useState(
+    provider.compat?.supportsFinishReason ?? true
+  );
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "error">("idle");
 
   // ─── Quick add (inline, one-liner) ───
@@ -850,7 +860,7 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
   const urlInvalid = baseUrl.trim() !== "" && !isValidHttpUrl(baseUrl.trim());
 
   const dirty =
-    (isCustom && (providerName !== (provider.name ?? "") || baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions") || supportsDeveloperRole !== (provider.compat?.supportsDeveloperRole ?? true))) ||
+    (isCustom && (providerName !== (provider.name ?? "") || baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions") || supportsDeveloperRole !== (provider.compat?.supportsDeveloperRole ?? true) || supportsFinishReason !== (provider.compat?.supportsFinishReason ?? true))) ||
     (!isCustom && (baseUrl !== (provider.baseUrl ?? "") || api !== (provider.api ?? "openai-completions"))) ||
     apiKey !== savedKey;
 
@@ -858,13 +868,24 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
     setSaveState("saving");
     let ok = true;
     if (isCustom) {
-      ok = await updateCustomProvider(provider.id, {
+      const cfgPatch = {
         name: providerName || undefined,
         baseUrl: baseUrl || undefined,
         api,
         apiKey: apiKey || undefined,
-        compat: { supportsDeveloperRole },
-      });
+        compat: { ...provider.compat, supportsDeveloperRole, supportsFinishReason },
+      };
+      // pi's model picker shows the provider key, not the display name, so
+      // rename the key too when the name changes (references get rewritten).
+      const nameChanged = providerName !== (provider.name ?? "");
+      const newId = nameChanged ? sanitizeProviderId(providerName) : "";
+      const taken = new Set(useConfigStore.getState().allProviders.map((p) => p.id));
+      if (newId && newId !== provider.id && !taken.has(newId)) {
+        ok = await renameCustomProvider(provider.id, newId, cfgPatch);
+        if (ok) onRenamed(newId);
+      } else {
+        ok = await updateCustomProvider(provider.id, cfgPatch);
+      }
     } else {
       // Builtin providers: baseUrl / api are persisted as a models.json
       // override (so the user can point them at a proxy/gateway), while the
@@ -1032,6 +1053,21 @@ function ProviderDetail({ provider, onDelete, onDuplicate }: { provider: Provide
         </label>
       </div>
 
+      {/* Finish Reason Support */}
+      <div className="flex items-center gap-2">
+        <input
+          id="supports-finish-reason"
+          type="checkbox"
+          checked={supportsFinishReason}
+          onChange={(e) => setSupportsFinishReason(e.target.checked)}
+          className="rounded border-gray-600 bg-gray-800 text-blue-500"
+        />
+        <label htmlFor="supports-finish-reason" className="text-sm text-gray-400">
+          <span>{t("compat.supports_finish_reason")}</span>
+          <span className="ml-2 text-xs text-gray-500">{t("compat.supports_finish_reason_desc")}</span>
+        </label>
+      </div>
+
       {/* Save / Test / Feedback row */}
       <div className="flex flex-wrap items-center gap-3">
         {dirty && (
@@ -1724,6 +1760,23 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
             onChange={(e) => setContextWindow(parseInt(e.target.value) || DEFAULT_CONTEXT_WINDOW)}
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
+          <div className="mt-1 flex flex-wrap gap-1">
+            {[32_768, 128_000, 200_000, 1_000_000].map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => setContextWindow(v)}
+                className={cn(
+                  "rounded border px-1.5 py-0.5 text-[10px] font-mono transition-colors",
+                  (form.contextWindow ?? DEFAULT_CONTEXT_WINDOW) === v
+                    ? "border-blue-500 bg-blue-500/20 text-blue-300"
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-500 hover:text-gray-200"
+                )}
+              >
+                {formatTokens(v)}
+              </button>
+            ))}
+          </div>
         </div>
         <div>
           <label className="block text-xs font-medium text-gray-400">{t("models.max_tokens")}</label>
@@ -1733,6 +1786,23 @@ function ModelForm({ initial, onSubmit, onCancel }: ModelFormProps) {
             onChange={(e) => setMaxTokens(parseInt(e.target.value) || DEFAULT_MAX_TOKENS)}
             className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
           />
+          <div className="mt-1 flex flex-wrap gap-1">
+            {[4096, 8192, 16_384, 32_768, 65_536, 131_072].map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => setMaxTokens(v)}
+                className={cn(
+                  "rounded border px-1.5 py-0.5 text-[10px] font-mono transition-colors",
+                  (form.maxTokens ?? DEFAULT_MAX_TOKENS) === v
+                    ? "border-blue-500 bg-blue-500/20 text-blue-300"
+                    : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-500 hover:text-gray-200"
+                )}
+              >
+                {formatTokens(v)}
+              </button>
+            ))}
+          </div>
         </div>
       </div>