@raingor/pi-web-switch 0.2.0

package/src/components/settings/SettingsPage.tsx

@@ -0,0 +1,351 @@
+import { useState, useRef } from "react";
+import { useConfigStore } from "@/store/config-store";
+import { useTranslation } from "@/lib/i18n";
+import { Badge } from "@/components/ui/Badge";
+import { Modal } from "@/components/ui/Modal";
+import { exportConfig, parseImportFile, saveLocalBackup } from "@/lib/config";
+import type { PiConfig } from "@/types";
+import { cn } from "@/lib/utils";
+import {
+  Settings,
+  Download,
+  Upload,
+  RotateCcw,
+  Sun,
+  Moon,
+  Monitor,
+  Package,
+  Plus,
+  Trash2,
+  CheckCircle2,
+} from "lucide-react";
+
+export function SettingsPage() {
+  const { t } = useTranslation();
+  const { settings, auth, modelsJson, allProviders, allModels, updateSettings, setTheme, addPackage, removePackage, importConfig: importConfigAction, resetToDefaults } = useConfigStore();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [newPackage, setNewPackage] = useState("");
+  const [importError, setImportError] = useState("");
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
+
+  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = async (ev) => {
+      const result = parseImportFile(ev.target?.result as string);
+      if (result) {
+        await importConfigAction(result);
+        setImportError("");
+      } else {
+        setImportError("Invalid config file format");
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  const buildConfigForExport = (): PiConfig => ({
+    settings: settings ?? { theme: "dark", packages: [], enabledModels: [] },
+    auth: auth ?? {},
+    modelsJson: modelsJson ?? { providers: {} },
+  });
+
+  const handleExport = () => {
+    const cfg = buildConfigForExport();
+    saveLocalBackup(cfg);
+    exportConfig(cfg);
+  };
+
+  const providerOptions = allProviders.map((p) => ({
+    value: p.id,
+    label: p.name,
+  }));
+
+  const modelOptions = allModels.map((m) => ({
+    value: `${m.providerId}/${m.id}`,
+    label: `${m.providerName} / ${m.name || m.id}`,
+  }));
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-white">Settings</h1>
+        <p className="mt-1 text-sm text-gray-400">Configure pi agent preferences</p>
+      </div>
+
+      {/* Default Provider/Model */}
+      <section className="rounded-xl border border-gray-800 bg-gray-900/50">
+        <div className="border-b border-gray-800 px-6 py-4">
+          <h2 className="text-sm font-semibold text-gray-300">Defaults</h2>
+        </div>
+        <div className="space-y-4 p-6">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="block text-xs font-medium text-gray-400">Default Provider</label>
+              <select
+                value={settings?.defaultProvider ?? ""}
+                onChange={(e) => updateSettings({ defaultProvider: e.target.value })}
+                className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+              >
+                <option value="">— None —</option>
+                {providerOptions.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-400">Default Model</label>
+              <select
+                value={settings?.defaultModel ?? ""}
+                onChange={(e) => updateSettings({ defaultModel: e.target.value })}
+                className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+              >
+                <option value="">— None —</option>
+                {modelOptions.map((o) => (
+                  <option key={o.value} value={o.value}>{o.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="block text-xs font-medium text-gray-400">Default Thinking Level</label>
+              <select
+                value={settings?.defaultThinkingLevel ?? "medium"}
+                onChange={(e) => updateSettings({ defaultThinkingLevel: e.target.value })}
+                className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+              >
+                {["off", "minimal", "low", "medium", "high", "xhigh"].map((l) => (
+                  <option key={l} value={l}>{l.charAt(0).toUpperCase() + l.slice(1)}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-400">Project Trust</label>
+              <select
+                value={settings?.defaultProjectTrust ?? "prompt"}
+                onChange={(e) => updateSettings({ defaultProjectTrust: e.target.value })}
+                className="mt-1 w-full rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white"
+              >
+                {["prompt", "always", "never"].map((t) => (
+                  <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Theme */}
+      <section className="rounded-xl border border-gray-800 bg-gray-900/50">
+        <div className="border-b border-gray-800 px-6 py-4">
+          <h2 className="text-sm font-semibold text-gray-300">Appearance</h2>
+        </div>
+        <div className="p-6">
+          <div className="flex gap-3">
+            {[
+              { value: "light" as const, icon: Sun, label: "Light" },
+              { value: "dark" as const, icon: Moon, label: "Dark" },
+              { value: "light/dark" as const, icon: Monitor, label: "System" },
+            ].map(({ value, icon: Icon, label }) => {
+              const active = (settings?.theme ?? "light/dark") === value;
+              return (
+                <button
+                  key={value}
+                  onClick={() => setTheme(value)}
+                  className={cn(
+                    "flex items-center gap-2 rounded-lg border px-4 py-3 text-sm transition-all",
+                    active
+                      ? "border-blue-500 bg-blue-500/10 text-blue-400"
+                      : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                  )}
+                >
+                  <Icon className="h-4 w-4" />
+                  {label}
+                  {active && <CheckCircle2 className="h-3.5 w-3.5 ml-1" />}
+                </button>
+              );
+            })}
+          </div>
+          <div className="mt-4 flex items-center gap-3">
+            <label className="flex items-center gap-2 text-sm text-gray-400">
+              <input
+                type="checkbox"
+                checked={settings?.hideThinkingBlock ?? false}
+                onChange={(e) => updateSettings({ hideThinkingBlock: e.target.checked })}
+                className="rounded border-gray-600 bg-gray-800 text-blue-500"
+              />
+              Hide thinking blocks
+            </label>
+          </div>
+        </div>
+      </section>
+
+      {/* Enabled Models */}
+      <section className="rounded-xl border border-gray-800 bg-gray-900/50">
+        <div className="border-b border-gray-800 px-6 py-4">
+          <h2 className="text-sm font-semibold text-gray-300">Enabled Models</h2>
+        </div>
+        <div className="p-6">
+          <div className="space-y-2">
+            {(settings?.enabledModels ?? []).length === 0 ? (
+              <p className="text-sm text-gray-500">No models enabled. Enable models from the Models page.</p>
+            ) : (
+              (settings?.enabledModels ?? []).map((ref) => (
+                <div key={ref} className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 px-4 py-2.5">
+                  <div className="flex items-center gap-2">
+                    <CheckCircle2 className="h-4 w-4 text-emerald-400" />
+                    <span className="text-sm text-gray-200">{ref}</span>
+                  </div>
+                  <button
+                    onClick={() => useConfigStore.getState().removeEnabledModel(ref)}
+                    className="rounded p-1 text-gray-500 hover:bg-gray-700 hover:text-red-400"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Packages */}
+      <section className="rounded-xl border border-gray-800 bg-gray-900/50">
+        <div className="border-b border-gray-800 px-6 py-4">
+          <h2 className="text-sm font-semibold text-gray-300">Extensions & Packages</h2>
+        </div>
+        <div className="p-6 space-y-4">
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={newPackage}
+              onChange={(e) => setNewPackage(e.target.value)}
+              placeholder="npm:package-name"
+              className="flex-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-white placeholder-gray-500"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && newPackage) {
+                  addPackage(newPackage);
+                  setNewPackage("");
+                }
+              }}
+            />
+            <button
+              onClick={() => {
+                if (newPackage) {
+                  addPackage(newPackage);
+                  setNewPackage("");
+                }
+              }}
+              className="flex items-center gap-1 rounded-lg bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-500"
+            >
+              <Plus className="h-4 w-4" />
+              Add
+            </button>
+          </div>
+          <div className="space-y-2">
+            {(settings?.packages ?? []).length === 0 ? (
+              <p className="text-sm text-gray-500">No packages installed</p>
+            ) : (
+              (settings?.packages ?? []).map((pkg) => (
+                <div key={pkg} className="flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/30 px-4 py-2.5">
+                  <div className="flex items-center gap-2">
+                    <Package className="h-4 w-4 text-blue-400" />
+                    <span className="text-sm text-gray-200">{pkg}</span>
+                  </div>
+                  <button
+                    onClick={() => removePackage(pkg)}
+                    className="rounded p-1 text-gray-500 hover:bg-gray-700 hover:text-red-400"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* Import/Export */}
+      <section className="rounded-xl border border-gray-800 bg-gray-900/50">
+        <div className="border-b border-gray-800 px-6 py-4">
+          <h2 className="text-sm font-semibold text-gray-300">Import & Export</h2>
+        </div>
+        <div className="p-6 space-y-4">
+          <div className="flex flex-wrap gap-3">
+            <button
+              onClick={handleExport}
+              className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+            >
+              <Download className="h-4 w-4" />
+              Export Config
+            </button>
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              className="flex items-center gap-2 rounded-lg border border-gray-700 bg-gray-800 px-4 py-2 text-sm text-gray-300 hover:bg-gray-700"
+            >
+              <Upload className="h-4 w-4" />
+              Import Config
+            </button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".json"
+              className="hidden"
+              onChange={handleImport}
+            />
+          </div>
+          {importError && <p className="text-sm text-red-400">{importError}</p>}
+        </div>
+      </section>
+
+      {/* Danger Zone */}
+      <section className="rounded-xl border border-red-900/30 bg-red-950/20">
+        <div className="border-b border-red-900/30 px-6 py-4">
+          <h2 className="text-sm font-semibold text-red-400">Danger Zone</h2>
+        </div>
+        <div className="p-6">
+          <button
+            onClick={() => setShowResetConfirm(true)}
+            className="flex items-center gap-2 rounded-lg border border-red-700 bg-red-900/30 px-4 py-2 text-sm text-red-400 hover:bg-red-900/50"
+          >
+            <RotateCcw className="h-4 w-4" />
+            Reset to Defaults
+          </button>
+        </div>
+      </section>
+
+      {/* Reset Confirm */}
+      <Modal
+        open={showResetConfirm}
+        onClose={() => setShowResetConfirm(false)}
+        title="Reset Configuration?"
+      >
+        <div className="space-y-4">
+          <p className="text-sm text-gray-400">
+            This will reset all settings, auth keys, and custom providers to defaults.
+            Changes are written directly to your pi config files (~/.pi/agent/).
+            This action cannot be undone.
+          </p>
+          <div className="flex justify-end gap-3">
+            <button
+              onClick={() => setShowResetConfirm(false)}
+              className="rounded-lg px-4 py-2 text-sm text-gray-400 hover:bg-gray-800"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => {
+                resetToDefaults();
+                setShowResetConfirm(false);
+              }}
+              className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500"
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+}

package/src/components/ui/Badge.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+interface BadgeProps {
+  children: string;
+  variant?: "default" | "success" | "warning" | "error" | "info";
+  className?: string;
+}
+
+const variants = {
+  default: "bg-gray-800 text-gray-300",
+  success: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+  warning: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+  error: "bg-red-500/10 text-red-400 border-red-500/20",
+  info: "bg-blue-500/10 text-blue-400 border-blue-500/20",
+};
+
+export function Badge({ children, variant = "default", className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium border",
+        variants[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/components/ui/EmptyState.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+interface EmptyStateProps {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div className={cn("flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-700 p-12 text-center", className)}>
+      <div className="mb-4 text-gray-500">{icon}</div>
+      <h3 className="text-lg font-medium text-gray-300">{title}</h3>
+      {description && <p className="mt-1 text-sm text-gray-500">{description}</p>}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  );
+}

package/src/components/ui/Modal.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg";
+}
+
+export function Modal({ open, onClose, title, children, size = "md" }: ModalProps) {
+  if (!open) return null;
+
+  const sizeClasses = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+      <div
+        className={`relative w-full ${sizeClasses[size]} mx-4 rounded-xl border border-gray-700 bg-gray-900 shadow-2xl`}
+      >
+        <div className="flex items-center justify-between border-b border-gray-800 px-6 py-4">
+          <h2 className="text-lg font-semibold text-white">{title}</h2>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1 text-gray-400 hover:bg-gray-800 hover:text-white"
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="px-6 py-4">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/StatCard.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+interface StatCardProps {
+  title: string;
+  value: string;
+  subtitle?: string;
+  icon: ReactNode;
+  trend?: { value: string; positive: boolean };
+  className?: string;
+}
+
+export function StatCard({ title, value, subtitle, icon, trend, className }: StatCardProps) {
+  return (
+    <div className={cn("rounded-xl border border-gray-800 bg-gray-900/50 p-5 backdrop-blur-sm", className)}>
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-gray-400">{title}</p>
+          <p className="text-2xl font-bold tracking-tight text-white">{value}</p>
+          {subtitle && <p className="text-xs text-gray-500">{subtitle}</p>}
+          {trend && (
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 text-xs font-medium",
+                trend.positive ? "text-emerald-400" : "text-red-400"
+              )}
+            >
+              <span>{trend.positive ? "↑" : "↓"}</span>
+              {trend.value}
+            </span>
+          )}
+        </div>
+        <div className="rounded-lg bg-blue-500/10 p-2.5 text-blue-400">{icon}</div>
+      </div>
+    </div>
+  );
+}

package/src/data/builtin-providers.ts

@@ -0,0 +1,148 @@
+// ─── Built-in Providers ───────────────────────────────────
+// These are hardcoded in pi's Rust source and not exposed as config files.
+// We maintain this list to display known providers in the UI.
+
+import type { Provider } from "@/types";
+
+export 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 },
+    ],
+  },
+];
+
+export function getBuiltinProviders(): Provider[] {
+  return BUILTIN_PROVIDERS;
+}