@raingor/pi-web-switch 0.3.1 → 0.3.3

package/src/components/settings/SettingsPage.tsx

@@ -1,32 +1,161 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } 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 type { PiConfig, UpdateCheckResult } from "@/types";
 import { cn } from "@/lib/utils";
 import {
-  Settings,
   Download,
   Upload,
   RotateCcw,
-  Sun,
-  Moon,
-  Monitor,
   Package,
   Plus,
-  Trash2,
-  CheckCircle2,
+  X,
+  Check,
+  Palette,
+  Type,
+  LayoutGrid,
+  Wrench,
+  Settings as SettingsIcon,
+  Zap,
+  CloudDownload,
+  RefreshCw,
 } from "lucide-react";
 
+type SettingsTab = "appearance" | "models" | "advanced";
+
+// Visual palette previews for the theme swatch picker (mirrors pi-desktop).
+const THEME_SWATCHES: {
+  value: "dark" | "light" | "light/dark";
+  labelKey: string;
+  bg: string;
+  dots: string[];
+}[] = [
+  { value: "dark", labelKey: "settings.dark", bg: "linear-gradient(145deg, #14141c, #0a0a0f)", dots: ["#00d4aa", "#7c5cfc", "#2a2a35"] },
+  { value: "light", labelKey: "settings.light", bg: "linear-gradient(145deg, #ffffff, #e9ecf2)", dots: ["#00b894", "#7c5cfc", "#c9ced8"] },
+  { value: "light/dark", labelKey: "settings.system", bg: "linear-gradient(105deg, #0a0a0f 49.5%, #f1f2f6 50.5%)", dots: ["#00d4aa", "#7c5cfc", "#9aa0ab"] },
+];
+
+const FONT_SIZE_KEY = "pi-font-size";
+
+function Card({
+  icon: Icon,
+  title,
+  desc,
+  children,
+}: {
+  icon: typeof Palette;
+  title: string;
+  desc?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="rounded-xl border border-gray-800 bg-gray-900/50">
+      <div className="flex items-center gap-3 border-b border-gray-800 px-6 py-4">
+        <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-700 bg-gray-800">
+          <Icon className="h-4 w-4 text-blue-400" />
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-gray-300">{title}</h2>
+          {desc && <p className="text-xs text-gray-500">{desc}</p>}
+        </div>
+      </div>
+      <div className="p-6">{children}</div>
+    </section>
+  );
+}
+
+function SettingRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between gap-4 border-b border-gray-800/60 py-3 last:border-b-0 last:pb-0 first:pt-0">
+      <span className="text-sm text-gray-400">{label}</span>
+      {children}
+    </div>
+  );
+}
+
 export function SettingsPage() {
   const { t } = useTranslation();
-  const { settings, auth, modelsJson, allProviders, allModels, updateSettings, setTheme, addPackage, removePackage, importConfig: importConfigAction, resetToDefaults } = useConfigStore();
+  const {
+    settings,
+    auth,
+    modelsJson,
+    allProviders,
+    allModels,
+    updateSettings,
+    setTheme,
+    addEnabledModel,
+    removeEnabledModel,
+    addPackage,
+    removePackage,
+    importConfig: importConfigAction,
+    resetToDefaults,
+  } = useConfigStore();
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [activeTab, setActiveTab] = useState<SettingsTab>("appearance");
   const [newPackage, setNewPackage] = useState("");
   const [importError, setImportError] = useState("");
   const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const [fontSize, setFontSize] = useState(() => {
+    const saved = Number(localStorage.getItem(FONT_SIZE_KEY));
+    return saved >= 12 && saved <= 24 ? saved : 16;
+  });
+  // pi core / extensions update check (Advanced tab).
+  const [updateResult, setUpdateResult] = useState<UpdateCheckResult | null>(null);
+  const [checkingUpdates, setCheckingUpdates] = useState(false);
+  const [updateError, setUpdateError] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const [applyMessage, setApplyMessage] = useState<{ ok: number; failNames: string[] } | null>(null);
+
+  const handleCheckUpdates = async () => {
+    setCheckingUpdates(true);
+    setUpdateError(false);
+    setApplyMessage(null);
+    try {
+      const res = await fetch("/api/pi/check-updates");
+      if (!res.ok) throw new Error("check failed");
+      setUpdateResult(await res.json());
+    } catch {
+      setUpdateError(true);
+    } finally {
+      setCheckingUpdates(false);
+    }
+  };
+
+  // One-click update: npm install <name>@latest for every updatable extension,
+  // then re-check so the list reflects the new installed versions.
+  const handleApplyUpdates = async () => {
+    const names = (updateResult?.extensions ?? []).filter((e) => e.hasUpdate).map((e) => e.name);
+    if (names.length === 0) return;
+    setApplying(true);
+    setApplyMessage(null);
+    try {
+      const res = await fetch("/api/pi/apply-updates", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ names }),
+      });
+      if (!res.ok) throw new Error("apply failed");
+      const { results } = (await res.json()) as {
+        results: { name: string; success: boolean; message?: string }[];
+      };
+      const failNames = results.filter((r) => !r.success).map((r) => r.name);
+      setApplyMessage({ ok: results.length - failNames.length, failNames });
+      const check = await fetch("/api/pi/check-updates");
+      if (check.ok) setUpdateResult(await check.json());
+    } catch {
+      setUpdateError(true);
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  // Apply + persist UI font size (root rem scaling).
+  useEffect(() => {
+    document.documentElement.style.fontSize = `${fontSize}px`;
+    localStorage.setItem(FONT_SIZE_KEY, String(fontSize));
+  }, [fontSize]);
 
   const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -38,301 +167,484 @@ export function SettingsPage() {
         await importConfigAction(result);
         setImportError("");
       } else {
-        setImportError("Invalid config file format");
+        setImportError(t("settings.import_error"));
       }
     };
     reader.readAsText(file);
   };
 
-  const buildConfigForExport = (): PiConfig => ({
-    settings: settings ?? { theme: "dark", packages: [], enabledModels: [] },
-    auth: auth ?? {},
-    modelsJson: modelsJson ?? { providers: {} },
-  });
-
   const handleExport = () => {
-    const cfg = buildConfigForExport();
+    const cfg: PiConfig = {
+      settings: settings ?? { theme: "dark", packages: [], enabledModels: [] },
+      auth: auth ?? {},
+      modelsJson: modelsJson ?? { providers: {} },
+    };
     saveLocalBackup(cfg);
     exportConfig(cfg);
   };
 
-  const providerOptions = allProviders.map((p) => ({
-    value: p.id,
-    label: p.name,
-  }));
+  // ── Default model select: composite `providerId/modelId` values, but the
+  // settings file stores the bare model id (that's what pi expects on disk).
+  const modelValue = (providerId: string, modelId: string) => `${providerId}/${modelId}`;
+  const modelProviders = allProviders.filter((p) => p.models.length > 0);
+  const scopedId = settings?.defaultProvider;
+  const groupedModelOptions = scopedId
+    ? [...modelProviders.filter((p) => p.id === scopedId), ...modelProviders.filter((p) => p.id !== scopedId)]
+    : modelProviders;
+
+  const selectedModelValue = (() => {
+    const id = settings?.defaultModel;
+    if (!id) return "";
+    const dp = settings?.defaultProvider;
+    if (dp && allProviders.find((p) => p.id === dp)?.models.some((m) => m.id === id)) {
+      return modelValue(dp, id);
+    }
+    const owner = allProviders.find((p) => p.models.some((m) => m.id === id));
+    return owner ? modelValue(owner.id, id) : id; // stale ids display as-is
+  })();
+
+  const handleDefaultModelChange = (v: string) => {
+    if (!v) {
+      updateSettings({ defaultModel: undefined });
+      return;
+    }
+    const idx = v.indexOf("/"); // model ids may themselves contain '/'
+    const providerId = idx >= 0 ? v.slice(0, idx) : "";
+    const modelId = idx >= 0 ? v.slice(idx + 1) : v;
+    // Keep the provider in sync so the (provider, model) pair stays consistent.
+    updateSettings(providerId ? { defaultProvider: providerId, defaultModel: modelId } : { defaultModel: modelId });
+  };
+
+  const handleDefaultProviderChange = (v: string) => {
+    // Drop a default model that doesn't belong to the newly picked provider.
+    let clearModel = false;
+    if (v && settings?.defaultModel) {
+      const provider = allProviders.find((p) => p.id === v);
+      if (provider && !provider.models.some((m) => m.id === settings.defaultModel)) {
+        clearModel = true;
+      }
+    }
+    updateSettings(clearModel ? { defaultProvider: v, defaultModel: undefined } : { defaultProvider: v || undefined });
+  };
+
+  // Display names that appear under several providers need the provider name
+  // appended to stay distinguishable.
+  const modelNameCounts = allModels.reduce<Record<string, number>>((acc, m) => {
+    const name = m.name || m.id;
+    acc[name] = (acc[name] ?? 0) + 1;
+    return acc;
+  }, {});
+  const modelTagLabel = (m: (typeof allModels)[number]) => {
+    const name = m.name || m.id;
+    return (modelNameCounts[name] ?? 0) > 1 ? `${name} · ${m.providerName}` : name;
+  };
+
+  const enabledModels = settings?.enabledModels ?? [];
+  const themeLabelKey: Record<string, string> = {
+    light: "settings.light",
+    dark: "settings.dark",
+    "light/dark": "settings.system",
+  };
 
-  const modelOptions = allModels.map((m) => ({
-    value: `${m.providerId}/${m.id}`,
-    label: `${m.providerName} / ${m.name || m.id}`,
-  }));
+  const tabs: { key: SettingsTab; icon: typeof Palette; label: string }[] = [
+    { key: "appearance", icon: Palette, label: t("settings.appearance") },
+    { key: "models", icon: LayoutGrid, label: t("settings.tab_models") },
+    { key: "advanced", icon: Wrench, label: t("settings.tab_advanced") },
+  ];
+
+  const selectCls =
+    "rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-white";
 
   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>
+      {/* ── Hero ─────────────────────────────────────────── */}
+      <header>
+        <div className="text-[11px] font-semibold uppercase tracking-widest text-blue-400">
+          pi · workspace
+        </div>
+        <h1 className="mt-1 text-2xl font-bold text-white">{t("settings.title")}</h1>
+        <p className="mt-1 text-sm text-gray-400">{t("settings.subtitle")}</p>
+        <div className="mt-4 grid max-w-lg grid-cols-3 gap-3">
+          <div className="rounded-xl border border-gray-800 bg-gray-900/50 px-4 py-3">
+            <div className="text-xl font-bold text-white">{allProviders.length}</div>
+            <div className="text-xs text-gray-500">{t("settings.stat_providers")}</div>
+          </div>
+          <div className="rounded-xl border border-gray-800 bg-gray-900/50 px-4 py-3">
+            <div className="text-xl font-bold text-white">
+              {enabledModels.length}
+              <small className="ml-0.5 text-xs font-normal text-gray-500">/ {allModels.length}</small>
+            </div>
+            <div className="text-xs text-gray-500">{t("settings.stat_enabled")}</div>
+          </div>
+          <div className="rounded-xl border border-gray-800 bg-gray-900/50 px-4 py-3">
+            <div className="pt-1 text-sm font-bold text-white">
+              {t(themeLabelKey[settings?.theme ?? "light/dark"] ?? "settings.system")}
+            </div>
+            <div className="mt-0.5 text-xs text-gray-500">{t("settings.stat_theme")}</div>
+          </div>
+        </div>
+      </header>
+
+      {/* ── Tab nav ──────────────────────────────────────── */}
+      <nav className="flex gap-2 border-b border-gray-800 pb-3">
+        {tabs.map(({ key, icon: Icon, label }) => (
+          <button
+            key={key}
+            onClick={() => setActiveTab(key)}
+            className={cn(
+              "flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm transition-all",
+              activeTab === key
+                ? "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-3.5 w-3.5" />
+            {label}
+          </button>
+        ))}
+      </nav>
 
-      {/* 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>
+      {/* ── Appearance ───────────────────────────────────── */}
+      {activeTab === "appearance" && (
+        <div className="space-y-6">
+          <Card icon={Palette} title={t("settings.theme")} desc={t("settings.theme_desc")}>
+            <div className="grid grid-cols-3 gap-3 max-w-xl">
+              {THEME_SWATCHES.map((s) => {
+                const active = (settings?.theme ?? "light/dark") === s.value;
+                return (
+                  <button
+                    key={s.value}
+                    onClick={() => setTheme(s.value)}
+                    className={cn(
+                      "overflow-hidden rounded-xl border text-left transition-all",
+                      active ? "border-blue-500 ring-1 ring-blue-500/40" : "border-gray-700 hover:border-gray-600"
+                    )}
+                  >
+                    <div
+                      className="flex h-16 items-end gap-1.5 p-2.5"
+                      style={{ background: s.bg }}
+                    >
+                      {s.dots.map((d) => (
+                        <span key={d} className="h-2.5 w-2.5 rounded-full" style={{ background: d }} />
+                      ))}
+                    </div>
+                    <div className="flex items-center justify-between bg-gray-800 px-3 py-2">
+                      <span className={cn("text-xs font-medium", active ? "text-blue-400" : "text-gray-400")}>
+                        {t(s.labelKey)}
+                      </span>
+                      {active && <Check className="h-3.5 w-3.5 text-blue-400" />}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+            <div className="mt-5 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"
+                />
+                {t("settings.hide_thinking")}
+              </label>
+            </div>
+          </Card>
+
+          <Card icon={Type} title={t("settings.font_size")} desc={t("settings.font_size_desc")}>
+            <div className="flex max-w-xl items-center gap-4">
+              <input
+                type="range"
+                min={12}
+                max={24}
+                step={1}
+                value={fontSize}
+                onChange={(e) => setFontSize(Number(e.target.value))}
+                className="flex-1 accent-blue-500"
+              />
+              <span className="w-12 rounded-lg border border-gray-700 bg-gray-800 px-2 py-1 text-center text-xs text-gray-300">
+                {fontSize}px
+              </span>
+            </div>
+          </Card>
         </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>
+      )}
+
+      {/* ── Models ───────────────────────────────────────── */}
+      {activeTab === "models" && (
+        <div className="space-y-6">
+          <Card icon={SettingsIcon} title={t("settings.defaults")}>
+            <SettingRow label={t("settings.default_provider")}>
               <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"
+                onChange={(e) => handleDefaultProviderChange(e.target.value)}
+                className={cn(selectCls, "w-56")}
               >
-                <option value="">— None —</option>
-                {providerOptions.map((o) => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
+                <option value="">{t("settings.none")}</option>
+                {allProviders.map((p) => (
+                  <option key={p.id} value={p.id}>{p.name}</option>
                 ))}
               </select>
-            </div>
-            <div>
-              <label className="block text-xs font-medium text-gray-400">Default Model</label>
+            </SettingRow>
+            <SettingRow label={t("settings.default_model")}>
               <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"
+                value={selectedModelValue}
+                onChange={(e) => handleDefaultModelChange(e.target.value)}
+                className={cn(selectCls, "w-56")}
               >
-                <option value="">— None —</option>
-                {modelOptions.map((o) => (
-                  <option key={o.value} value={o.value}>{o.label}</option>
+                <option value="">{t("settings.none")}</option>
+                {groupedModelOptions.map((p) => (
+                  <optgroup key={p.id} label={p.name}>
+                    {p.models.map((m) => (
+                      <option key={modelValue(p.id, m.id)} value={modelValue(p.id, m.id)}>
+                        {(m.name || m.id) + " · " + p.name}
+                      </option>
+                    ))}
+                  </optgroup>
                 ))}
               </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>
+            </SettingRow>
+            <SettingRow label={t("settings.default_thinking")}>
               <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"
+                className={cn(selectCls, "w-56")}
               >
                 {["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>
+            </SettingRow>
+            <SettingRow label={t("settings.project_trust")}>
               <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"
+                className={cn(selectCls, "w-56")}
               >
-                {["prompt", "always", "never"].map((t) => (
-                  <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}</option>
+                {["prompt", "always", "never"].map((v) => (
+                  <option key={v} value={v}>{v.charAt(0).toUpperCase() + v.slice(1)}</option>
                 ))}
               </select>
+            </SettingRow>
+          </Card>
+
+          <Card icon={Zap} title={t("settings.enabled_models")} desc={t("settings.enabled_models_desc")}>
+            <div className="flex flex-wrap gap-1.5">
+              {allModels.map((m) => {
+                const ref = `${m.providerId}/${m.id}`;
+                const on = enabledModels.includes(ref);
+                return (
+                  <button
+                    key={ref}
+                    onClick={() => (on ? removeEnabledModel(ref) : addEnabledModel(ref))}
+                    className={cn(
+                      "rounded-md border px-2.5 py-1 text-xs transition-colors",
+                      on
+                        ? "border-blue-500/50 bg-blue-500/10 text-blue-400"
+                        : "border-gray-700 bg-gray-800 text-gray-400 hover:border-gray-600"
+                    )}
+                  >
+                    {modelTagLabel(m)}
+                  </button>
+                );
+              })}
             </div>
-          </div>
+          </Card>
         </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 (
+      {/* ── Advanced ─────────────────────────────────────── */}
+      {activeTab === "advanced" && (
+        <div className="space-y-6">
+          <Card icon={CloudDownload} title={t("settings.updates_title")} desc={t("settings.updates_desc")}>
+            <div className="flex flex-wrap items-center gap-2">
+              <button
+                onClick={handleCheckUpdates}
+                disabled={checkingUpdates || applying}
+                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 disabled:opacity-60"
+              >
+                <RefreshCw className={cn("h-4 w-4", checkingUpdates && "animate-spin")} />
+                {t("settings.check_updates")}
+              </button>
+              {(updateResult?.extensions ?? []).some((e) => e.hasUpdate) && (
                 <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"
-                  )}
+                  onClick={handleApplyUpdates}
+                  disabled={applying || checkingUpdates}
+                  className="flex items-center gap-2 rounded-lg border border-amber-500 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-400 hover:bg-amber-500/20 disabled:opacity-60"
                 >
-                  <Icon className="h-4 w-4" />
-                  {label}
-                  {active && <CheckCircle2 className="h-3.5 w-3.5 ml-1" />}
+                  <CloudDownload className={cn("h-4 w-4", applying && "animate-pulse")} />
+                  {applying ? t("settings.updating") : t("settings.update_all")}
                 </button>
+              )}
+            </div>
+            {updateError && <p className="mt-3 text-sm text-red-400">{t("settings.updates_failed")}</p>}
+            {applyMessage && (
+              <div className="mt-3 space-y-1">
+                {applyMessage.ok > 0 && (
+                  <p className="text-sm text-emerald-400">{t("settings.update_success", String(applyMessage.ok))}</p>
+                )}
+                {applyMessage.failNames.length > 0 && (
+                  <p className="text-sm text-red-400">
+                    {t("settings.update_failed_names", String(applyMessage.failNames.length), applyMessage.failNames.join(", "))}
+                  </p>
+                )}
+              </div>
+            )}
+            {updateResult && (() => {
+              const rows = [...(updateResult.pi ? [updateResult.pi] : []), ...updateResult.extensions];
+              const updatable = rows.filter((r) => r.hasUpdate).length;
+              return (
+                <div className="mt-4 space-y-1.5">
+                  <p className={cn("text-xs font-semibold", updatable > 0 ? "text-amber-400" : "text-emerald-400")}>
+                    {updatable > 0
+                      ? t("settings.updates_summary", String(updatable))
+                      : t("settings.updates_all_latest")}
+                  </p>
+                  {rows.map((r) => (
+                    <div
+                      key={r.name}
+                      className={cn(
+                        "flex items-center justify-between gap-3 rounded-lg border bg-gray-800/30 px-3 py-2",
+                        r.hasUpdate ? "border-amber-500/60" : "border-gray-800"
+                      )}
+                    >
+                      <div className="flex min-w-0 items-center gap-2">
+                        <span className="truncate font-mono text-xs text-gray-200">{r.name}</span>
+                        {updateResult.pi && r.name === updateResult.pi.name && (
+                          <span className="rounded border border-gray-700 bg-gray-800 px-1.5 py-0.5 text-[10px] text-gray-500">
+                            core
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex shrink-0 items-center gap-2">
+                        <span className="font-mono text-[11px] text-gray-500">
+                          {r.latest === null ? `${r.installed} → ?` : r.hasUpdate ? `${r.installed} → ${r.latest}` : r.installed}
+                        </span>
+                        {r.latest === null ? (
+                          <span className="rounded border border-gray-700 px-1.5 py-0.5 text-[10px] text-gray-500">
+                            {t("settings.updates_lookup_failed")}
+                          </span>
+                        ) : r.hasUpdate ? (
+                          <span className="rounded border border-amber-500 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400">
+                            {t("settings.update_available")}
+                          </span>
+                        ) : (
+                          <span className="rounded border border-emerald-600/60 px-1.5 py-0.5 text-[10px] text-emerald-400">
+                            {t("settings.updates_up_to_date")}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                  {updatable > 0 && (
+                    <p className="pt-1 text-[11px] text-gray-500">{t("settings.updates_hint")}</p>
+                  )}
+                </div>
               );
-            })}
-          </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>
+            })()}
+          </Card>
 
-      {/* 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"
+          <Card icon={Package} title={t("settings.packages")}>
+            {(settings?.packages ?? []).length > 0 && (
+              <div className="mb-4 flex flex-wrap gap-1.5">
+                {(settings?.packages ?? []).map((pkg) => (
+                  <span
+                    key={pkg}
+                    className="flex items-center gap-1.5 rounded-md border border-gray-700 bg-gray-800 px-2.5 py-1 text-xs text-gray-300"
                   >
-                    <Trash2 className="h-3.5 w-3.5" />
-                  </button>
-                </div>
-              ))
+                    {pkg}
+                    <button
+                      onClick={() => removePackage(pkg)}
+                      className="text-gray-500 hover:text-red-400"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))}
+              </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>
-              ))
+            {(settings?.packages ?? []).length === 0 && (
+              <p className="mb-4 text-sm text-gray-500">{t("settings.no_packages")}</p>
             )}
-          </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>
+            <div className="flex max-w-md gap-2">
+              <input
+                type="text"
+                value={newPackage}
+                onChange={(e) => setNewPackage(e.target.value)}
+                placeholder={t("settings.package_placeholder")}
+                className="flex-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-white placeholder-gray-500"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && newPackage.trim()) {
+                    addPackage(newPackage.trim());
+                    setNewPackage("");
+                  }
+                }}
+              />
+              <button
+                onClick={() => {
+                  if (newPackage.trim()) {
+                    addPackage(newPackage.trim());
+                    setNewPackage("");
+                  }
+                }}
+                className="flex items-center gap-1 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-300 hover:bg-gray-700"
+              >
+                <Plus className="h-3.5 w-3.5" />
+                {t("settings.add")}
+              </button>
+            </div>
+          </Card>
 
-      {/* 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>
+          <Card icon={Download} title={t("settings.import_export")}>
+            <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" />
+                {t("settings.export")}
+              </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" />
+                {t("settings.import")}
+              </button>
+              <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" />
+                {t("settings.reset")}
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".json"
+                className="hidden"
+                onChange={handleImport}
+              />
+            </div>
+            {importError && <p className="mt-3 text-sm text-red-400">{importError}</p>}
+          </Card>
         </div>
-      </section>
+      )}
 
       {/* Reset Confirm */}
       <Modal
         open={showResetConfirm}
         onClose={() => setShowResetConfirm(false)}
-        title="Reset Configuration?"
+        title={t("settings.reset_title")}
       >
         <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>
+          <p className="text-sm text-gray-400">{t("settings.reset_confirm")}</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
+              {t("settings.cancel")}
             </button>
             <button
               onClick={() => {
@@ -341,11 +653,11 @@ export function SettingsPage() {
               }}
               className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500"
             >
-              Reset
+              {t("settings.reset_action")}
             </button>
           </div>
         </div>
       </Modal>
     </div>
   );
-}
+}