@raingor/pi-web-switch 0.2.0

package/src/data/mock-config.ts

@@ -0,0 +1,261 @@
+import type { PiConfig, Provider, Model, PiSettings, PiAuth, PiModelsJson } from "@/types";
+
+// ─── Built-in Providers ───────────────────────────────────
+
+const BUILTIN_PROVIDERS: Provider[] = [
+  {
+    id: "anthropic",
+    name: "Anthropic",
+    type: "builtin",
+    api: "anthropic-messages",
+    hasAuth: true,
+    authMethod: "env",
+    models: [
+      { id: "claude-sonnet-4", name: "Claude 4 Sonnet", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: true },
+      { id: "claude-sonnet-4-5", name: "Claude 4.5 Sonnet", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: true },
+      { id: "claude-opus-4", name: "Claude 4 Opus", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 15, output: 75, cacheRead: 1.5, cacheWrite: 18.75 }, enabled: false },
+      { id: "claude-haiku-3-5", name: "Claude 3.5 Haiku", reasoning: false, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 0.8, output: 4, cacheRead: 0.08, cacheWrite: 1 }, enabled: true },
+    ],
+  },
+  {
+    id: "openai",
+    name: "OpenAI",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: true,
+    authMethod: "env",
+    models: [
+      { id: "gpt-4o", name: "GPT-4o", reasoning: false, input: ["text", "image"], contextWindow: 128000, maxTokens: 16384, cost: { input: 2.5, output: 10, cacheRead: 1.25, cacheWrite: 3.75 }, enabled: true },
+      { id: "gpt-4o-mini", name: "GPT-4o Mini", reasoning: false, input: ["text", "image"], contextWindow: 128000, maxTokens: 16384, cost: { input: 0.15, output: 0.6, cacheRead: 0.075, cacheWrite: 0.225 }, enabled: true },
+      { id: "gpt-5.1", name: "GPT-5.1", reasoning: true, input: ["text", "image"], contextWindow: 256000, maxTokens: 65536, cost: { input: 10, output: 40, cacheRead: 5, cacheWrite: 10 }, enabled: false },
+      { id: "o3-mini", name: "o3-mini", reasoning: true, input: ["text"], contextWindow: 200000, maxTokens: 100000, cost: { input: 1.1, output: 4.4, cacheRead: 0.55, cacheWrite: 1.65 }, enabled: false },
+    ],
+  },
+  {
+    id: "deepseek",
+    name: "DeepSeek",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: true,
+    authMethod: "env",
+    models: [
+      { id: "deepseek-chat", name: "DeepSeek V3", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.27, output: 1.1, cacheRead: 0.07, cacheWrite: 0.27 }, enabled: true },
+      { id: "deepseek-reasoner", name: "DeepSeek R1", reasoning: true, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.55, output: 2.19, cacheRead: 0.14, cacheWrite: 0.55 }, enabled: true },
+    ],
+  },
+  {
+    id: "opencode",
+    name: "OpenCode",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: true,
+    authMethod: "file",
+    models: [
+      { id: "deepseek-v4-flash-free", name: "DeepSeek V4 Flash (Free)", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }, enabled: true },
+      { id: "deepseek-v4-flash", name: "DeepSeek V4 Flash", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.3, output: 0.6, cacheRead: 0.15, cacheWrite: 0.3 }, enabled: true },
+    ],
+  },
+  {
+    id: "opencode-go",
+    name: "OpenCode Go",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: true,
+    authMethod: "file",
+    models: [
+      { id: "deepseek-v4-flash", name: "DeepSeek V4 Flash", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.3, output: 0.6, cacheRead: 0.15, cacheWrite: 0.3 }, enabled: true },
+      { id: "deepseek-v4-pro", name: "DeepSeek V4 Pro", reasoning: true, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 2, output: 8, cacheRead: 1, cacheWrite: 2 }, enabled: true },
+      { id: "glm-5.1", name: "GLM 5.1", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.5, output: 2, cacheRead: 0.25, cacheWrite: 0.5 }, enabled: true },
+      { id: "qwen3.7-max", name: "Qwen 3.7 Max", reasoning: true, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 1.5, output: 6, cacheRead: 0.75, cacheWrite: 1.5 }, enabled: true },
+      { id: "mimo-v2.5", name: "MiMo V2.5", reasoning: true, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 1.2, output: 4.8, cacheRead: 0.6, cacheWrite: 1.2 }, enabled: true },
+    ],
+  },
+  {
+    id: "sensenova",
+    name: "SenseNova",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: true,
+    authMethod: "env",
+    models: [
+      { id: "glm-5.2", name: "GLM 5.2", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.8, output: 2.4, cacheRead: 0.4, cacheWrite: 0.8 }, enabled: true },
+      { id: "deepseek-v4-flash", name: "DeepSeek V4 Flash", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.3, output: 0.6, cacheRead: 0.15, cacheWrite: 0.3 }, enabled: true },
+    ],
+  },
+  {
+    id: "google",
+    name: "Google Gemini",
+    type: "builtin",
+    api: "google-generative-ai",
+    hasAuth: true,
+    authMethod: "env",
+    models: [
+      { id: "gemini-2.5-flash", name: "Gemini 2.5 Flash", reasoning: false, input: ["text", "image"], contextWindow: 1048576, maxTokens: 8192, cost: { input: 0.15, output: 0.6, cacheRead: 0.075, cacheWrite: 0.15 }, enabled: true },
+      { id: "gemini-2.5-pro", name: "Gemini 2.5 Pro", reasoning: true, input: ["text", "image"], contextWindow: 1048576, maxTokens: 8192, cost: { input: 1.25, output: 10, cacheRead: 0.625, cacheWrite: 1.25 }, enabled: false },
+    ],
+  },
+  {
+    id: "openrouter",
+    name: "OpenRouter",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: false,
+    authMethod: "none",
+    models: [
+      { id: "openrouter/anthropic/claude-sonnet-4", name: "Claude 4 Sonnet (OpenRouter)", reasoning: true, input: ["text", "image"], contextWindow: 200000, maxTokens: 8192, cost: { input: 3, output: 15, cacheRead: 0.3, cacheWrite: 3.75 }, enabled: false },
+      { id: "openrouter/deepseek/deepseek-r1", name: "DeepSeek R1 (OpenRouter)", reasoning: true, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.55, output: 2.19, cacheRead: 0.14, cacheWrite: 0.55 }, enabled: false },
+    ],
+  },
+  {
+    id: "mistral",
+    name: "Mistral",
+    type: "builtin",
+    api: "mistral-conversations",
+    hasAuth: false,
+    authMethod: "none",
+    models: [
+      { id: "mistral-large", name: "Mistral Large", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 2, output: 6, cacheRead: 1, cacheWrite: 2 }, enabled: false },
+    ],
+  },
+  {
+    id: "github-copilot",
+    name: "GitHub Copilot",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: false,
+    authMethod: "none",
+    models: [
+      { id: "copilot-gpt-4o", name: "Copilot GPT-4o", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 4096, cost: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 }, enabled: false },
+    ],
+  },
+  {
+    id: "groq",
+    name: "Groq",
+    type: "builtin",
+    api: "openai-completions",
+    hasAuth: false,
+    authMethod: "none",
+    models: [
+      { id: "llama-3.3-70b", name: "Llama 3.3 70B", reasoning: false, input: ["text"], contextWindow: 128000, maxTokens: 8192, cost: { input: 0.59, output: 0.79, cacheRead: 0, cacheWrite: 0 }, enabled: false },
+    ],
+  },
+];
+
+// ─── Default Settings ─────────────────────────────────────
+
+export const DEFAULT_SETTINGS: PiSettings = {
+  lastChangelogVersion: "0.80.3",
+  defaultProvider: "sensenova",
+  defaultModel: "deepseek-v4-flash",
+  defaultThinkingLevel: "high",
+  defaultProjectTrust: "always",
+  theme: "light/dark",
+  hideThinkingBlock: true,
+  retry: { enabled: true },
+  packages: [
+    "npm:pi-hermes-memory",
+    "npm:@pi-unipi/notify",
+    "npm:context-mode",
+    "npm:pi-subagents",
+    "npm:pi-web-access",
+    "npm:pi-rtk-optimizer",
+    "npm:pi-puppeteer",
+    "npm:pi-intercom",
+    "npm:pi-prompt-template-model",
+  ],
+  terminal: { showTerminalProgress: true },
+  warnings: { anthropicExtraUsage: true },
+  treeFilterMode: "default",
+  doubleEscapeAction: "tree",
+  enabledModels: [
+    "opencode-go/deepseek-v4-flash",
+    "opencode-go/deepseek-v4-pro",
+    "opencode/deepseek-v4-flash-free",
+    "opencode-go/glm-5.1",
+    "opencode-go/qwen3.7-max",
+    "opencode-go/mimo-v2.5",
+    "sensenova/glm-5.2",
+    "sensenova/deepseek-v4-flash",
+  ],
+};
+
+// ─── Default Auth ─────────────────────────────────────────
+
+export const DEFAULT_AUTH: PiAuth = {
+  opencode: {
+    type: "api_key",
+    key: "sk-hqW3wtminBBkiTbjR57V15MClbOoZutz1StHXtv64HU0tiICeRDiA3DfC9vb0NGW",
+  },
+  "opencode-go": {
+    type: "api_key",
+    key: "sk-hqW3wtminBBkiTbjR57V15MClbOoZutz1StHXtv64HU0tiICeRDiA3DfC9vb0NGW",
+  },
+};
+
+// ─── Default models.json (empty — no custom providers yet) ─
+
+export const DEFAULT_MODELS_JSON: PiModelsJson = {
+  providers: {},
+};
+
+// ─── Full Config ──────────────────────────────────────────
+
+export const DEFAULT_PI_CONFIG: PiConfig = {
+  settings: DEFAULT_SETTINGS,
+  auth: DEFAULT_AUTH,
+  modelsJson: DEFAULT_MODELS_JSON,
+};
+
+// ─── Helper: get builtin providers ────────────────────────
+
+export function getBuiltinProviders(): Provider[] {
+  return BUILTIN_PROVIDERS;
+}
+
+// ─── Helper: merge custom providers from models.json ──────
+
+export function getCustomProviders(modelsJson: PiModelsJson | null): Provider[] {
+  if (!modelsJson) return [];
+  return Object.entries(modelsJson.providers).map(([id, cfg]) => ({
+    id,
+    name: id.charAt(0).toUpperCase() + id.slice(1),
+    type: "custom" as const,
+    baseUrl: cfg.baseUrl,
+    api: cfg.api,
+    apiKey: cfg.apiKey,
+    authHeader: cfg.authHeader,
+    headers: cfg.headers,
+    compat: cfg.compat,
+    hasAuth: !!cfg.apiKey,
+    authMethod: (cfg.apiKey ? "file" : "none") as "file" | "none",
+    models: (cfg.models ?? []).map((m) => ({ ...m, enabled: true })),
+  }));
+}
+
+// ─── Helper: all providers merged ─────────────────────────
+
+export function getAllProviders(config: PiConfig): Provider[] {
+  const builtins = getBuiltinProviders().map((p) => {
+    // Apply auth from settings
+    const authEntry = config.auth[p.id];
+    return {
+      ...p,
+      hasAuth: !!authEntry || p.hasAuth,
+      authMethod: authEntry ? "file" : p.authMethod,
+    };
+  });
+  const customs = getCustomProviders(config.modelsJson);
+  return [...builtins, ...customs];
+}
+
+// ─── Helper: all models flat ──────────────────────────────
+
+export function getAllModels(config: PiConfig): (Model & { providerId: string; providerName: string })[] {
+  return getAllProviders(config).flatMap((p) =>
+    p.models.map((m) => ({
+      ...m,
+      providerId: p.id,
+      providerName: p.name,
+    }))
+  );
+}

package/src/data/mock-usage.ts

@@ -0,0 +1,153 @@
+import type { UsageRecord } from "@/types";
+
+// Generate 30 days of mock usage data
+function generateMockUsage(): UsageRecord[] {
+  const records: UsageRecord[] = [];
+  const today = new Date();
+  const modelProviderPairs = [
+    { providerId: "opencode-go", modelId: "deepseek-v4-flash", baseTokens: 1_200_000, baseCost: 0.36 },
+    { providerId: "opencode-go", modelId: "deepseek-v4-pro", baseTokens: 400_000, baseCost: 0.80 },
+    { providerId: "opencode-go", modelId: "glm-5.1", baseTokens: 250_000, baseCost: 0.125 },
+    { providerId: "opencode-go", modelId: "qwen3.7-max", baseTokens: 180_000, baseCost: 0.27 },
+    { providerId: "opencode-go", modelId: "mimo-v2.5", baseTokens: 300_000, baseCost: 0.36 },
+    { providerId: "opencode", modelId: "deepseek-v4-flash-free", baseTokens: 800_000, baseCost: 0 },
+    { providerId: "opencode", modelId: "deepseek-v4-flash", baseTokens: 200_000, baseCost: 0.06 },
+    { providerId: "sensenova", modelId: "glm-5.2", baseTokens: 350_000, baseCost: 0.28 },
+    { providerId: "sensenova", modelId: "deepseek-v4-flash", baseTokens: 500_000, baseCost: 0.15 },
+    { providerId: "anthropic", modelId: "claude-sonnet-4", baseTokens: 150_000, baseCost: 0.45 },
+    { providerId: "anthropic", modelId: "claude-haiku-3-5", baseTokens: 90_000, baseCost: 0.036 },
+    { providerId: "openai", modelId: "gpt-4o", baseTokens: 80_000, baseCost: 0.20 },
+    { providerId: "openai", modelId: "gpt-4o-mini", baseTokens: 120_000, baseCost: 0.018 },
+    { providerId: "deepseek", modelId: "deepseek-chat", baseTokens: 60_000, baseCost: 0.0162 },
+    { providerId: "google", modelId: "gemini-2.5-flash", baseTokens: 40_000, baseCost: 0.006 },
+  ];
+
+  for (let day = 29; day >= 0; day--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - day);
+    const dateStr = date.toISOString().split("T")[0]!;
+
+    for (const pair of modelProviderPairs) {
+      // Add some daily variance (±40%)
+      const variance = 0.6 + Math.random() * 0.8;
+      const dayOfWeek = date.getDay();
+      const weekendFactor = dayOfWeek === 0 || dayOfWeek === 6 ? 0.5 : 1.0;
+      const trendFactor = 1 + (29 - day) * 0.01; // slight upward trend
+
+      const inputRatio = 0.7 + Math.random() * 0.1;
+      const baseTokens = pair.baseTokens * variance * weekendFactor * trendFactor;
+      const inputTokens = Math.round(baseTokens * inputRatio);
+      const outputTokens = Math.round(baseTokens * (1 - inputRatio));
+      const cacheReadTokens = Math.round(inputTokens * 0.3 * Math.random());
+      const cacheWriteTokens = Math.round(inputTokens * 0.1 * Math.random());
+      const requests = Math.round(20 + Math.random() * 60);
+
+      records.push({
+        date: dateStr!,
+        providerId: pair.providerId,
+        modelId: pair.modelId,
+        inputTokens,
+        outputTokens,
+        cacheReadTokens,
+        cacheWriteTokens,
+        requests,
+        cost: pair.baseCost * variance * weekendFactor * trendFactor,
+      });
+    }
+  }
+
+  return records;
+}
+
+export const MOCK_USAGE_DATA = generateMockUsage();
+
+// Aggregate helpers
+
+export function getDailyAggregates(): {
+  date: string;
+  totalTokens: number;
+  totalCost: number;
+  totalRequests: number;
+  inputTokens: number;
+  outputTokens: number;
+}[] {
+  const daily = new Map<string, {
+    totalTokens: number; totalCost: number; totalRequests: number;
+    inputTokens: number; outputTokens: number;
+  }>();
+
+  for (const r of MOCK_USAGE_DATA) {
+    const d = daily.get(r.date) ?? {
+      totalTokens: 0, totalCost: 0, totalRequests: 0,
+      inputTokens: 0, outputTokens: 0,
+    };
+    d.totalTokens += r.inputTokens + r.outputTokens + r.cacheReadTokens + r.cacheWriteTokens;
+    d.totalCost += r.cost;
+    d.totalRequests += r.requests;
+    d.inputTokens += r.inputTokens;
+    d.outputTokens += r.outputTokens;
+    daily.set(r.date, d);
+  }
+
+  return Array.from(daily.entries())
+    .map(([date, agg]) => ({ date, ...agg }))
+    .sort((a, b) => a.date.localeCompare(b.date));
+}
+
+export function getProviderSummaries() {
+  const sums = new Map<string, {
+    totalTokens: number; totalCost: number; totalRequests: number;
+  }>();
+
+  for (const r of MOCK_USAGE_DATA) {
+    const s = sums.get(r.providerId) ?? { totalTokens: 0, totalCost: 0, totalRequests: 0 };
+    s.totalTokens += r.inputTokens + r.outputTokens + r.cacheReadTokens + r.cacheWriteTokens;
+    s.totalCost += r.cost;
+    s.totalRequests += r.requests;
+    sums.set(r.providerId, s);
+  }
+
+  return Array.from(sums.entries()).map(([providerId, s]) => ({ providerId, ...s }));
+}
+
+export function getModelSummaries() {
+  const sums = new Map<string, {
+    providerId: string; totalTokens: number; totalCost: number; totalRequests: number; count: number;
+  }>();
+
+  for (const r of MOCK_USAGE_DATA) {
+    const key = `${r.providerId}/${r.modelId}`;
+    const s = sums.get(key) ?? { providerId: r.providerId, totalTokens: 0, totalCost: 0, totalRequests: 0, count: 0 };
+    s.totalTokens += r.inputTokens + r.outputTokens + r.cacheReadTokens + r.cacheWriteTokens;
+    s.totalCost += r.cost;
+    s.totalRequests += r.requests;
+    s.count++;
+    sums.set(key, s);
+  }
+
+  return Array.from(sums.entries()).map(([key, s]) => {
+    const [providerId, modelId] = key.split("/");
+    return {
+      modelId: modelId!,
+      providerId: s.providerId,
+      totalTokens: s.totalTokens,
+      totalCost: s.totalCost,
+      totalRequests: s.totalRequests,
+      avgTokensPerRequest: Math.round(s.totalTokens / s.totalRequests),
+    };
+  });
+}
+
+export function getTotals() {
+  let totalTokens = 0;
+  let totalCost = 0;
+  let totalRequests = 0;
+
+  for (const r of MOCK_USAGE_DATA) {
+    totalTokens += r.inputTokens + r.outputTokens + r.cacheReadTokens + r.cacheWriteTokens;
+    totalCost += r.cost;
+    totalRequests += r.requests;
+  }
+
+  return { totalTokens, totalCost, totalRequests };
+}

package/src/index.css

@@ -0,0 +1,217 @@
+@import "tailwindcss";
+
+/* ─── Theme Variables ──────────────────────────────────── */
+
+:root,
+.light {
+  --color-scheme: light;
+  --page-bg: #f9fafb;
+  --page-text: #111827;
+  --card-bg: #ffffff;
+  --card-border: #e5e7eb;
+  --card-header-border: #e5e7eb;
+  --card-header-text: #374151;
+  --input-bg: #ffffff;
+  --input-border: #d1d5db;
+  --input-text: #111827;
+  --muted-text: #6b7280;
+  --subtle-text: #9ca3af;
+  --accent-bg: #eff6ff;
+  --hover-bg: #f3f4f6;
+  --sidebar-bg: #ffffff;
+  --sidebar-border: #e5e7eb;
+  --sidebar-logo: #1e40af;
+  --sidebar-active-bg: #eff6ff;
+  --sidebar-active-text: #2563eb;
+  --sidebar-text: #6b7280;
+  --sidebar-hover-bg: #f3f4f6;
+  --sidebar-hover-text: #374151;
+  --scrollbar-thumb: #d1d5db;
+  --scrollbar-thumb-hover: #9ca3af;
+}
+
+.dark {
+  --color-scheme: dark;
+  --page-bg: #030712;
+  --page-text: #f3f4f6;
+  --card-bg: rgba(17, 24, 39, 0.5);
+  --card-border: #1f2937;
+  --card-header-border: #1f2937;
+  --card-header-text: #d1d5db;
+  --input-bg: #1f2937;
+  --input-border: #374151;
+  --input-text: #ffffff;
+  --muted-text: #9ca3af;
+  --subtle-text: #6b7280;
+  --accent-bg: rgba(37, 99, 235, 0.1);
+  --hover-bg: rgba(31, 41, 55, 0.5);
+  --sidebar-bg: #030712;
+  --sidebar-border: #1f2937;
+  --sidebar-logo: #2563eb;
+  --sidebar-active-bg: rgba(37, 99, 235, 0.1);
+  --sidebar-active-text: #60a5fa;
+  --sidebar-text: #9ca3af;
+  --sidebar-hover-bg: #1f2937;
+  --sidebar-hover-text: #e5e7eb;
+  --scrollbar-thumb: #4b5563;
+  --scrollbar-thumb-hover: #6b7280;
+}
+
+:root {
+  color-scheme: var(--color-scheme, dark);
+}
+
+body {
+  font-family: "Inter", "SF Pro", system-ui, -apple-system, sans-serif;
+  background-color: var(--page-bg);
+  color: var(--page-text);
+}
+
+/* Theme-aware utility classes */
+.theme-card {
+  background-color: var(--card-bg);
+  border-color: var(--card-border);
+}
+
+.theme-input {
+  background-color: var(--input-bg);
+  border-color: var(--input-border);
+  color: var(--input-text);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+/* Smooth transitions for theme toggle */
+* {
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+/* ─── Light Mode Overrides ──────────────────────────────
+   Remap hardcoded Tailwind dark-mode classes to light colors.
+   This is needed because most components use fixed classes
+   like text-white, text-gray-400, bg-gray-950, border-gray-800, etc. */
+
+.light .text-white,
+.light .text-gray-100 {
+  color: #111827;
+}
+.light .text-gray-200,
+.light .text-gray-300 {
+  color: #374151;
+}
+.light .text-gray-400 {
+  color: #6b7280;
+}
+.light .text-gray-500,
+.light .text-gray-600 {
+  color: #9ca3af;
+}
+.light .bg-gray-950,
+.light .bg-gray-900,
+.light .bg-gray-900\/50,
+.light .bg-gray-900\/30,
+.light .bg-gray-900\/70 {
+  background-color: #ffffff;
+}
+.light .bg-gray-800,
+.light .bg-gray-800\/30,
+.light .bg-gray-800\/50,
+.light .bg-gray-800\/20 {
+  background-color: #f3f4f6;
+}
+.light .bg-black\/60 {
+  background-color: rgba(107, 114, 128, 0.5);
+}
+.light .border-gray-800,
+.light .border-gray-800\/50,
+.light .border-gray-700 {
+  border-color: #e5e7eb;
+}
+.light .border-gray-700 {
+  border-color: #d1d5db;
+}
+.light .border-gray-600 {
+  border-color: #d1d5db;
+}
+.light .text-blue-400 {
+  color: #2563eb;
+}
+.light .bg-blue-600 {
+  background-color: #2563eb;
+}
+.light .bg-blue-500\/10,
+.light .bg-blue-600\/10 {
+  background-color: #eff6ff;
+}
+.light .text-emerald-400 {
+  color: #059669;
+}
+.light .text-amber-400 {
+  color: #d97706;
+}
+.light .text-purple-400 {
+  color: #7c3aed;
+}
+.light .text-red-400 {
+  color: #dc2626;
+}
+.light .bg-red-600 {
+  background-color: #dc2626;
+}
+.light .bg-red-950\/20 {
+  background-color: #fef2f2;
+}
+.light .border-red-700,
+.light .border-red-900\/30 {
+  border-color: #fca5a5;
+}
+.light .bg-emerald-500\/10 {
+  background-color: #f0fdf4;
+}
+.light .text-emerald-400 {
+  color: #059669;
+}
+.light .bg-amber-500\/10 {
+  background-color: #fffbeb;
+}
+.light .hover\:bg-gray-800 {
+  &:hover {
+    background-color: #e5e7eb;
+  }
+}
+.light .hover\:bg-gray-700 {
+  &:hover {
+    background-color: #d1d5db;
+  }
+}
+.light .hover\:text-gray-200 {
+  &:hover {
+    color: #374151;
+  }
+}
+.light .placeholder-gray-500 {
+  &::placeholder {
+    color: #9ca3af;
+  }
+}
+.light input,
+.light select,
+.light textarea {
+  background-color: #ffffff;
+  border-color: #d1d5db;
+  color: #111827;
+}

package/src/lib/config.ts

@@ -0,0 +1,56 @@
+// ─── Config persistence helpers ──────────────────────────
+// Pi config is now read/written directly to ~/.pi/agent/ via the API.
+// This file provides localStorage-based import/export for backup.
+
+import type { PiConfig, ExportPayload } from "@/types";
+
+const STORAGE_KEY = "pi-web-switch-config";
+
+export function saveLocalBackup(config: PiConfig): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(config, null, 2));
+  } catch {
+    // localStorage might be full
+  }
+}
+
+export function loadLocalBackup(): PiConfig | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return JSON.parse(raw) as PiConfig;
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+export function exportConfig(config: PiConfig, filename?: string): void {
+  const payload: ExportPayload = {
+    version: "0.1.0",
+    exportedAt: new Date().toISOString(),
+    config,
+  };
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename ?? `pi-web-switch-config-${new Date().toISOString().split("T")[0]}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function parseImportFile(json: string): PiConfig | null {
+  try {
+    const payload = JSON.parse(json) as ExportPayload;
+    if (payload.config?.settings && payload.config?.auth) {
+      return payload.config;
+    }
+    // Try raw config
+    if (json.includes("defaultProvider")) {
+      return JSON.parse(json) as PiConfig;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}