@raingor/pi-web-switch 0.7.1 → 0.8.2

package/src/components/settings/PackageBrowser.tsx

@@ -0,0 +1,222 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Search, Plus, Check, Loader2, ExternalLink, Sparkles } from "lucide-react";
+import { Modal } from "@/components/ui/Modal";
+import { useTranslation } from "@/lib/i18n";
+import { RECOMMENDED_PACKAGES } from "@/data/recommended-packages";
+
+interface PackageSearchResult {
+  name: string;
+  description: string;
+  version: string;
+  downloads: number;
+  link: string;
+}
+
+type PackageFilter = "all" | "installed" | "available";
+type Tab = "recommended" | "search";
+
+interface PackageBrowserProps {
+  open: boolean;
+  onClose: () => void;
+  installed: Set<string>; // ids like "npm:pkg-name"
+  onInstall: (id: string) => void;
+}
+
+/** One package row with an install / installed control. */
+function PackageRow({
+  name,
+  description,
+  link,
+  installed,
+  onInstall,
+}: {
+  name: string;
+  description: string;
+  link?: string;
+  installed: boolean;
+  onInstall: () => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div
+      className="flex items-center gap-3 rounded-lg border px-3 py-2"
+      style={{ borderColor: "var(--card-border)", backgroundColor: "var(--card-bg)" }}
+    >
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-sm font-medium" style={{ color: "var(--page-text)" }}>{name}</span>
+          <a
+            href={link ?? `https://www.npmjs.com/package/${name}`}
+            target="_blank"
+            rel="noreferrer"
+            className="shrink-0"
+            style={{ color: "var(--subtle-text)" }}
+            title={t("settings.view_on_npm")}
+          >
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+        {description && (
+          <p className="truncate text-xs" style={{ color: "var(--muted-text)" }}>{description}</p>
+        )}
+      </div>
+      {installed ? (
+        <span className="flex shrink-0 items-center gap-1 rounded-lg border px-3 py-1.5 text-xs font-medium"
+          style={{ borderColor: "rgba(16,185,129,0.4)", color: "#10b981" }}>
+          <Check className="h-3.5 w-3.5" />
+          {t("settings.installed")}
+        </span>
+      ) : (
+        <button
+          onClick={onInstall}
+          className="flex shrink-0 items-center gap-1 rounded-lg border border-blue-600/50 bg-blue-600/10 px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-600/20"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          {t("settings.install")}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Package browser modal with two tabs:
+ *  - Recommended: the curated list from src/data/recommended-packages.ts
+ *  - Search: fuzzy npm-registry search for any pi package
+ * Installing writes "npm:<name>" into settings.packages.
+ */
+export function PackageBrowser({ open, onClose, installed, onInstall }: PackageBrowserProps) {
+  const { t } = useTranslation();
+  const [tab, setTab] = useState<Tab>("recommended");
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<PackageSearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [justAdded, setJustAdded] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState<PackageFilter>("all");
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  const runSearch = useCallback((q: string) => {
+    setLoading(true);
+    fetch(`/api/pi/packages/search?q=${encodeURIComponent(q)}`)
+      .then((r) => r.json())
+      .then((d: { results?: PackageSearchResult[] }) => setResults(d.results ?? []))
+      .catch(() => setResults([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  // Load popular packages the first time the Search tab is opened; debounce typing.
+  useEffect(() => {
+    if (!open || tab !== "search") return;
+    window.clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => runSearch(query), 350);
+    return () => window.clearTimeout(debounceRef.current);
+  }, [query, open, tab, runSearch]);
+
+  const isInstalledId = (name: string) => {
+    const id = `npm:${name}`;
+    return installed.has(id) || justAdded.has(id);
+  };
+
+  const handleInstall = (id: string) => {
+    onInstall(id);
+    setJustAdded((prev) => new Set(prev).add(id));
+  };
+
+  // Search-tab results after the installed/available filter.
+  const filtered = results.filter((pkg) => {
+    if (filter === "installed") return isInstalledId(pkg.name);
+    if (filter === "available") return !isInstalledId(pkg.name);
+    return true;
+  });
+  const installedCount = results.filter((p) => isInstalledId(p.name)).length;
+
+  return (
+    <Modal open={open} onClose={onClose} title={t("settings.browse_packages")} size="lg">
+      <div className="space-y-4">
+        {/* Tabs */}
+        <div className="flex gap-1 rounded-lg p-1" style={{ backgroundColor: "var(--card-bg)" }}>
+          {(["recommended", "search"] as Tab[]).map((tKey) => (
+            <button
+              key={tKey}
+              onClick={() => setTab(tKey)}
+              className={`flex flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${tab === tKey ? "bg-blue-600/15 text-blue-400" : "text-gray-400 hover:text-gray-200"}`}
+            >
+              {tKey === "recommended" ? <Sparkles className="h-3.5 w-3.5" /> : <Search className="h-3.5 w-3.5" />}
+              {t(`settings.tab_${tKey}`)}
+            </button>
+          ))}
+        </div>
+
+        {tab === "recommended" ? (
+          <div className="max-h-[55vh] space-y-1.5 overflow-y-auto">
+            {RECOMMENDED_PACKAGES.map((pkg) => (
+              <PackageRow
+                key={pkg.id}
+                name={pkg.name}
+                description={t(pkg.descKey)}
+                installed={installed.has(pkg.id) || justAdded.has(pkg.id)}
+                onInstall={() => handleInstall(pkg.id)}
+              />
+            ))}
+          </div>
+        ) : (
+          <>
+            {/* Search box */}
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" style={{ color: "var(--subtle-text)" }} />
+              <input
+                type="text"
+                autoFocus
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("settings.search_packages_placeholder")}
+                className="w-full rounded-lg border py-2 pl-9 pr-3 text-sm outline-none focus:ring-1 focus:ring-blue-500"
+                style={{ backgroundColor: "var(--card-bg)", borderColor: "var(--card-border)", color: "var(--page-text)" }}
+              />
+            </div>
+
+            {/* Installed / available filter */}
+            <div className="flex gap-1 rounded-lg p-1" style={{ backgroundColor: "var(--card-bg)" }}>
+              {(["all", "available", "installed"] as PackageFilter[]).map((f) => {
+                const count = f === "all" ? results.length : f === "installed" ? installedCount : results.length - installedCount;
+                return (
+                  <button
+                    key={f}
+                    onClick={() => setFilter(f)}
+                    className={`flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${filter === f ? "bg-blue-600/15 text-blue-400" : "text-gray-400 hover:text-gray-200"}`}
+                  >
+                    {t(`settings.filter_${f}`)} ({count})
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Results */}
+            <div className="max-h-[42vh] space-y-1.5 overflow-y-auto">
+              {loading && results.length === 0 ? (
+                <div className="flex items-center justify-center py-10">
+                  <Loader2 className="h-5 w-5 animate-spin" style={{ color: "var(--muted-text)" }} />
+                </div>
+              ) : filtered.length === 0 ? (
+                <p className="py-10 text-center text-sm" style={{ color: "var(--muted-text)" }}>
+                  {t("settings.no_packages_found")}
+                </p>
+              ) : (
+                filtered.map((pkg) => (
+                  <PackageRow
+                    key={pkg.name}
+                    name={pkg.name}
+                    description={pkg.description}
+                    link={pkg.link}
+                    installed={isInstalledId(pkg.name)}
+                    onInstall={() => handleInstall(`npm:${pkg.name}`)}
+                  />
+                ))
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/src/components/settings/SettingsPage.tsx

@@ -11,6 +11,8 @@ import {
 } from "@/lib/config";
 import type { PiConfig, UpdateCheckResult } from "@/types";
 import { cn } from "@/lib/utils";
+import { RECOMMENDED_PACKAGES } from "@/data/recommended-packages";
+import { PackageBrowser } from "./PackageBrowser";
 import {
   Download,
   Upload,
@@ -89,7 +91,6 @@ export function SettingsPage() {
     auth,
     modelsJson,
     allProviders,
-    allModels,
     updateSettings,
     setTheme,
     addPackage,
@@ -102,6 +103,7 @@ export function SettingsPage() {
   const [newPackage, setNewPackage] = useState("");
   const [importError, setImportError] = useState("");
   const [showResetConfirm, setShowResetConfirm] = useState(false);
+  const [showPackageBrowser, setShowPackageBrowser] = useState(false);
   const [fontSize, setFontSize] = useState(() => {
     const saved = Number(localStorage.getItem(FONT_SIZE_KEY));
     return saved >= 12 && saved <= 24 ? saved : 16;
@@ -132,10 +134,16 @@ export function SettingsPage() {
     }
   };
 
-  // One-click update: npm install <name>@latest for every updatable extension,
-  // then re-check so the list reflects the new installed versions.
+  // Names of everything that can be updated: pi core (routed to `pi update`
+  // server-side) plus every outdated extension.
+  const updatableNames = [
+    ...(updateResult?.pi?.hasUpdate ? [updateResult.pi.name] : []),
+    ...(updateResult?.extensions ?? []).filter((e) => e.hasUpdate).map((e) => e.name),
+  ];
+
+  // One-click update, 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);
+    const names = updatableNames;
     if (names.length === 0) return;
     setApplying(true);
     setApplyMessage(null);
@@ -221,7 +229,18 @@ export function SettingsPage() {
   // ── 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);
+  // Only providers that are actually usable belong in the defaults lists: a saved
+  // API key (auth.json / models.json override) or a custom provider. A stale
+  // saved value is kept so the selects don't render blank.
+  const providerOptions = allProviders.filter(
+    (p) =>
+      p.type === "custom" ||
+      p.hasAuth ||
+      !!p.apiKey ||
+      !!auth?.[p.id]?.key ||
+      p.id === settings?.defaultProvider
+  );
+  const modelProviders = providerOptions.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)]
@@ -262,13 +281,6 @@ export function SettingsPage() {
     updateSettings(clearModel ? { defaultProvider: v, defaultModel: undefined } : { defaultProvider: v || undefined });
   };
 
-  const enabledModels = settings?.enabledModels ?? [];
-  const themeLabelKey: Record<string, string> = {
-    light: "settings.light",
-    dark: "settings.dark",
-    "light/dark": "settings.system",
-  };
-
   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") },
@@ -287,25 +299,6 @@ export function SettingsPage() {
         </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 ──────────────────────────────────────── */}
@@ -428,7 +421,7 @@ export function SettingsPage() {
                 className={cn(selectCls, "w-56")}
               >
                 <option value="">{t("settings.none")}</option>
-                {allProviders.map((p) => (
+                {providerOptions.map((p) => (
                   <option key={p.id} value={p.id}>{p.name}</option>
                 ))}
               </select>
@@ -490,7 +483,7 @@ export function SettingsPage() {
                 <RefreshCw className={cn("h-4 w-4", checkingUpdates && "animate-spin")} />
                 {t("settings.check_updates")}
               </button>
-              {(updateResult?.extensions ?? []).some((e) => e.hasUpdate) && (
+              {updatableNames.length > 0 && (
                 <button
                   onClick={handleApplyUpdates}
                   disabled={applying || checkingUpdates}
@@ -569,6 +562,15 @@ export function SettingsPage() {
           </Card>
 
           <Card icon={Package} title={t("settings.packages")}>
+            <div className="mb-4">
+              <button
+                onClick={() => setShowPackageBrowser(true)}
+                className="flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500"
+              >
+                <Plus className="h-4 w-4" />
+                {t("settings.browse_packages")}
+              </button>
+            </div>
             {(settings?.packages ?? []).length > 0 && (
               <div className="mb-4 flex flex-wrap gap-1.5">
                 {(settings?.packages ?? []).map((pkg) => (
@@ -590,33 +592,84 @@ export function SettingsPage() {
             {(settings?.packages ?? []).length === 0 && (
               <p className="mb-4 text-sm text-gray-500">{t("settings.no_packages")}</p>
             )}
-            <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>
+
+            {/* Recommended packages — one-click install */}
+            {(() => {
+              const installed = new Set(settings?.packages ?? []);
+              const recommended = RECOMMENDED_PACKAGES.filter((p) => !installed.has(p.id));
+              if (recommended.length === 0) return null;
+              return (
+                <div className="mb-4">
+                  <p className="mb-2 text-xs font-medium" style={{ color: "var(--muted-text)" }}>
+                    {t("settings.recommended_packages")}
+                  </p>
+                  <div className="space-y-1.5">
+                    {recommended.map((pkg) => (
+                      <div
+                        key={pkg.id}
+                        className="flex items-center gap-3 rounded-lg border border-gray-700 bg-gray-800/50 px-3 py-2"
+                      >
+                        <div className="min-w-0 flex-1">
+                          <p className="truncate text-sm text-gray-200">{pkg.name}</p>
+                          <p className="truncate text-xs text-gray-500">{t(pkg.descKey)}</p>
+                        </div>
+                        <button
+                          onClick={() => addPackage(pkg.id)}
+                          className="flex shrink-0 items-center gap-1 rounded-lg border border-blue-600/50 bg-blue-600/10 px-3 py-1.5 text-xs font-medium text-blue-400 hover:bg-blue-600/20"
+                        >
+                          <Plus className="h-3.5 w-3.5" />
+                          {t("settings.install")}
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                  <button
+                    onClick={() => {
+                      const list = settings?.packages ?? [];
+                      const toAdd = recommended.map((p) => p.id);
+                      updateSettings({ packages: [...list, ...toAdd] });
+                    }}
+                    className="mt-2 flex items-center gap-1.5 rounded-lg border border-gray-700 bg-gray-800 px-3 py-1.5 text-xs text-gray-300 hover:bg-gray-700"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    {t("settings.install_all_recommended")}
+                  </button>
+                </div>
+              );
+            })()}
+
+            <details className="mb-1">
+              <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-300">
+                {t("settings.add_custom_package")}
+              </summary>
+              <div className="mt-2 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>
+            </details>
           </Card>
 
           <Card icon={Download} title={t("settings.import_export")}>
@@ -655,6 +708,13 @@ export function SettingsPage() {
         </div>
       )}
 
+      <PackageBrowser
+        open={showPackageBrowser}
+        onClose={() => setShowPackageBrowser(false)}
+        installed={new Set(settings?.packages ?? [])}
+        onInstall={(id) => addPackage(id)}
+      />
+
       {/* Reset Confirm */}
       <Modal
         open={showResetConfirm}