npm - @raingor/pi-web-switch - Versions diffs - 0.7.0 → 0.8.0 - Mend

@raingor/pi-web-switch 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.ja.md +12 -0
package/README.md +12 -0
package/README.zh-CN.md +12 -0
package/dist/index.html +2 -2
package/package.json +1 -1
package/server/pi-reader.ts +44 -0
package/src/components/help/ChangelogButton.tsx +53 -0
package/src/components/layout/Sidebar.tsx +2 -1
package/src/components/sessions/MemoryPage.tsx +30 -11
package/src/components/settings/PackageBrowser.tsx +222 -0
package/src/components/settings/SettingsPage.tsx +97 -27
package/src/data/changelog.ts +55 -0
package/src/data/recommended-packages.ts +20 -0
package/src/index.css +22 -0
package/src/lib/translations/en.ts +42 -1
package/src/lib/translations/ja.ts +42 -1
package/src/lib/translations/zh-CN.ts +42 -1
package/src/lib/translations/zh-TW.ts +42 -1
package/vite.config.ts +11 -0

package/README.ja.md CHANGED Viewed

@@ -167,6 +167,18 @@ pi-web-switch/
 └── src/                   # React フロントエンド
 ```
+## 💬 コミュニティ
+ご質問・ご提案・バグ報告は **Telegram グループ** へどうぞ：
+👉 **[pi-web-switch Telegram グループに参加](https://t.me/+ODpy7_7NlOE4NzA1)**
+問題を報告する際は以下を添えてください：
+1. OS（macOS / Windows / Linux）
+2. バージョン —— `npm view @raingor/pi-web-switch version`
+3. 具体的な問題の説明とエラーのスクリーンショットまたはログ
 ## 🔗 リンク
 - **ホームページ：** [raingor.github.io/my-blog](https://raingor.github.io/my-blog/)

package/README.md CHANGED Viewed

@@ -330,6 +330,18 @@ pi-web-switch/
 └── src/                   # React frontend
 ```
+## 💬 Community
+Join the **Telegram group** for questions, suggestions, and bug reports:
+👉 **[Join the pi-web-switch Telegram group](https://t.me/+ODpy7_7NlOE4NzA1)**
+When reporting an issue, please include:
+1. Your OS (macOS / Windows / Linux)
+2. Your version — `npm view @raingor/pi-web-switch version`
+3. A clear description plus any error screenshots or logs
 ## 🔗 Links
 - **Homepage:** [raingor.github.io/my-blog](https://raingor.github.io/my-blog/)

package/README.zh-CN.md CHANGED Viewed

@@ -205,6 +205,18 @@ pi-web-switch/
 └── src/                   # React 前端
 ```
+## 💬 交流群
+有任何疑问、建议或 bug 反馈，欢迎加入 **Telegram 交流群**：
+👉 **[加入 pi-web-switch Telegram 交流群](https://t.me/+ODpy7_7NlOE4NzA1)**
+提问时请附上：
+1. 你的系统（macOS / Windows / Linux）
+2. 版本号 —— `npm view @raingor/pi-web-switch version`
+3. 清晰的问题描述，以及报错截图或日志
 ## 🔗 相关链接
 - **个人主页：** [raingor.github.io/my-blog](https://raingor.github.io/my-blog/)

package/dist/index.html CHANGED Viewed

@@ -9,8 +9,8 @@
     <link rel="manifest" href="./manifest.webmanifest" />
     <meta name="theme-color" content="#05090d" />
     <meta name="description" content="Web UI for pi coding agent — configuration management, session browser, and usage dashboard" />
-    <script type="module" crossorigin src="./assets/main-E7tKVWGH.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/main-DHTj6wfH.css">
+    <script type="module" crossorigin src="./assets/main-DJ0fZLIg.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/main-K50Fa8uc.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@raingor/pi-web-switch",
   "private": false,
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.html",
   "description": "Web UI for pi coding agent — live configuration management, session browser, and memory viewer",

package/server/pi-reader.ts CHANGED Viewed

@@ -2754,6 +2754,50 @@ export function readSubagents(): SubagentsData {
   };
 }
+// ─── Package Search (npm registry) ─────────────────────────
+// pi packages are npm packages tagged for pi. The pi.dev/packages catalog is
+// SSR-only (no public JSON API — /api/packages returns 501), so we query the
+// public npm registry search endpoint directly, which supports fuzzy text and
+// returns name/description/downloads.
+export interface PackageSearchResult {
+  name: string;
+  description: string;
+  version: string;
+  downloads: number;
+  link: string;
+}
+export async function searchPackages(query: string): Promise<PackageSearchResult[]> {
+  const q = query.trim();
+  // Bias the search toward pi extensions. When the user types nothing we still
+  // surface the most popular pi packages.
+  const text = q ? `${q} pi` : "pi-extension";
+  const url = `https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(text)}&size=40`;
+  try {
+    const res = await fetchExternal(url, { signal: AbortSignal.timeout(REGISTRY_TIMEOUT_MS) });
+    if (!res.ok) return [];
+    const data = (await res.json()) as {
+      objects?: { package?: { name?: string; description?: string; version?: string; links?: { npm?: string } }; searchScore?: number }[];
+    };
+    const rows = (data.objects ?? [])
+      .map((o) => o.package)
+      .filter((p): p is NonNullable<typeof p> => !!p?.name)
+      // Keep pi-related packages only (name or description mentions pi).
+      .filter((p) => /(^|[@/-])pi([-/]|$)|pi coding|pi extension|pi agent/i.test(`${p.name} ${p.description ?? ""}`))
+      .map((p) => ({
+        name: p.name!,
+        description: p.description ?? "",
+        version: p.version ?? "",
+        downloads: 0,
+        link: p.links?.npm ?? `https://www.npmjs.com/package/${p.name}`,
+      }));
+    return rows;
+  } catch {
+    return [];
+  }
+}
 const AGENT_NAME_RE = /^[\w.-]+\.md$/;
 /**

package/src/components/help/ChangelogButton.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { Sparkles } from "lucide-react";
+import { Modal } from "@/components/ui/Modal";
+import { useTranslation } from "@/lib/i18n";
+import { CHANGELOG } from "@/data/changelog";
+/**
+ * "What's new" changelog dialog. Trigger lives in the sidebar footer (version
+ * strip). Entries come from src/data/changelog.ts with i18n item keys.
+ */
+export function ChangelogButton() {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        className="changelog-trigger"
+        title={t("changelog.title")}
+      >
+        <Sparkles className="h-3.5 w-3.5" />
+        <span>{t("changelog.button")}</span>
+      </button>
+      <Modal open={open} onClose={() => setOpen(false)} title={t("changelog.title")} size="lg">
+        <div className="space-y-5">
+          {CHANGELOG.map((entry) => (
+            <div key={entry.version}>
+              <div className="flex items-baseline gap-2">
+                <span
+                  className="rounded-md px-2 py-0.5 text-xs font-semibold"
+                  style={{ backgroundColor: "color-mix(in srgb, var(--signal-cyan) 16%, transparent)", color: "var(--signal-cyan, #38bdf8)" }}
+                >
+                  v{entry.version}
+                </span>
+                <span className="text-xs" style={{ color: "var(--subtle-text)" }}>{entry.date}</span>
+              </div>
+              <ul className="mt-2 space-y-1.5">
+                {entry.itemKeys.map((k) => (
+                  <li key={k} className="flex gap-2 text-sm leading-relaxed" style={{ color: "var(--muted-text)" }}>
+                    <span style={{ color: "var(--signal-cyan, #38bdf8)" }}>›</span>
+                    <span>{t(k)}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Modal>
+    </>
+  );
+}

package/src/components/layout/Sidebar.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ import {
 import { cn } from "@/lib/utils";
 import { useTranslation, LANGUAGES } from "@/lib/i18n";
 import { useState } from "react";
+import { ChangelogButton } from "@/components/help/ChangelogButton";
 // Telegram group invite link (same as the help dialog).
 const TELEGRAM_GROUP_URL = "https://t.me/+ODpy7_7NlOE4NzA1";
@@ -122,7 +123,7 @@ export function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
         <div className="version-strip">
           <span>{t("app.version")}</span>
-          <span>BUILD // STABLE</span>
+          <ChangelogButton />
         </div>
       </div>
     </aside>

package/src/components/sessions/MemoryPage.tsx CHANGED Viewed

@@ -372,7 +372,7 @@ function MemoryFileSection({
 export function MemoryPage() {
   const { t } = useTranslation();
-  const { initialized, allModels } = useConfigStore();
+  const { initialized, allModels, allProviders } = useConfigStore();
   const [files, setFiles] = useState<MemoryFile[]>([]);
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
@@ -396,6 +396,16 @@ export function MemoryPage() {
   // Capacity status (per-target chars vs limit) for progress bars
   const [status, setStatus] = useState<{ filename: string; target: string; chars: number; limit: number }[]>([]);
+  // Models eligible as the memory-write model: custom providers, plus built-in
+  // providers that have an API key actually saved (hasAuth). Built-ins without
+  // a key can't run, so they're excluded from the dropdown.
+  const eligibleModels = useMemo(() => {
+    const usableProviderIds = new Set(
+      allProviders.filter((p) => p.type === "custom" || p.hasAuth).map((p) => p.id)
+    );
+    return allModels.filter((m) => usableProviderIds.has(m.providerId));
+  }, [allModels, allProviders]);
   const loadStatus = useCallback(() => {
     fetch("/api/pi/memory/status")
       .then((r) => r.json())
@@ -493,7 +503,11 @@ export function MemoryPage() {
       });
       const { success } = (await res.json()) as { success: boolean };
       setCfgMsg({ ok: !!success, text: success ? t("memory.config_saved") : t("memory.config_save_failed") });
-      if (success) loadStatus();
+      if (success) {
+        loadStatus();
+        // Close the modal shortly after showing the success message.
+        setTimeout(() => setShowConfig(false), 600);
+      }
     } catch {
       setCfgMsg({ ok: false, text: t("memory.config_save_failed") });
     } finally {
@@ -724,20 +738,25 @@ export function MemoryPage() {
           <p className="text-xs" style={{ color: "var(--muted-text)" }}>{t("memory.config_desc")}</p>
           <div>
             <label className="mb-1 block text-xs" style={{ color: "var(--muted-text)" }}>{t("memory.config_model")}</label>
-            <input
-              type="text"
-              list="memory-model-options"
+            <select
               value={cfg.llmModelOverride}
               onChange={(e) => setCfg({ ...cfg, llmModelOverride: e.target.value })}
-              placeholder={t("memory.config_model_default")}
               className="w-full rounded-lg border px-3 py-1.5 text-sm outline-none focus:ring-1 focus:ring-blue-500"
               style={{ backgroundColor: "var(--card-bg)", borderColor: "var(--card-border)", color: "var(--page-text)" }}
-            />
-            <datalist id="memory-model-options">
-              {allModels.map((m) => (
-                <option key={`${m.providerId}/${m.id}`} value={`${m.providerId}/${m.id}`}>{m.providerName} · {m.name ?? m.id}</option>
+            >
+              <option value="">{t("memory.config_model_default")}</option>
+              {/* If the saved model isn't in the current model list (e.g. a
+                  provider was removed), still show it so it isn't silently lost. */}
+              {cfg.llmModelOverride &&
+                !eligibleModels.some((m) => `${m.providerId}/${m.id}` === cfg.llmModelOverride) && (
+                  <option value={cfg.llmModelOverride}>{cfg.llmModelOverride}</option>
+                )}
+              {eligibleModels.map((m) => (
+                <option key={`${m.providerId}/${m.id}`} value={`${m.providerId}/${m.id}`}>
+                  {m.providerName} · {m.name ?? m.id}
+                </option>
               ))}
-            </datalist>
+            </select>
           </div>
           <div className="flex gap-3">
             <div className="flex-1">

package/src/components/settings/PackageBrowser.tsx ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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,
@@ -102,6 +104,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;
@@ -569,6 +572,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 +602,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 +718,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}

package/src/data/changelog.ts ADDED Viewed

@@ -0,0 +1,55 @@
+// Version changelog shown in the "What's new" dialog. Newest first.
+// `items` are i18n keys so the entries localize with the active language.
+// When cutting a release, prepend a new entry here.
+export interface ChangelogEntry {
+  version: string;
+  date: string; // ISO date
+  itemKeys: string[];
+}
+export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.8.0",
+    date: "2026-08-27",
+    itemKeys: ["changelog.0_8_0_1", "changelog.0_8_0_2", "changelog.0_8_0_3"],
+  },
+  {
+    version: "0.7.0",
+    date: "2026-08-27",
+    itemKeys: [
+      "changelog.0_7_0_1",
+      "changelog.0_7_0_2",
+      "changelog.0_7_0_3",
+    ],
+  },
+  {
+    version: "0.6.2",
+    date: "2026-08-26",
+    itemKeys: ["changelog.0_6_2_1"],
+  },
+  {
+    version: "0.6.1",
+    date: "2026-08-26",
+    itemKeys: ["changelog.0_6_1_1"],
+  },
+  {
+    version: "0.6.0",
+    date: "2026-08-26",
+    itemKeys: [
+      "changelog.0_6_0_1",
+      "changelog.0_6_0_2",
+      "changelog.0_6_0_3",
+      "changelog.0_6_0_4",
+    ],
+  },
+  {
+    version: "0.5.0",
+    date: "2026-08-26",
+    itemKeys: [
+      "changelog.0_5_0_1",
+      "changelog.0_5_0_2",
+      "changelog.0_5_0_3",
+    ],
+  },
+];

package/src/data/recommended-packages.ts ADDED Viewed

@@ -0,0 +1,20 @@
+// Recommended pi extension packages, surfaced in Settings for one-click install.
+// Seeded from the maintainer's own setup. `descKey` points to an i18n string.
+export interface RecommendedPackage {
+  id: string; // exact value written to settings.packages, e.g. "npm:pi-hermes-memory"
+  name: string; // short display name
+  descKey: string;
+}
+export const RECOMMENDED_PACKAGES: RecommendedPackage[] = [
+  { id: "npm:pi-hermes-memory", name: "pi-hermes-memory", descKey: "pkg.hermes_memory" },
+  { id: "npm:context-mode", name: "context-mode", descKey: "pkg.context_mode" },
+  { id: "npm:pi-subagents", name: "pi-subagents", descKey: "pkg.subagents" },
+  { id: "npm:pi-web-access", name: "pi-web-access", descKey: "pkg.web_access" },
+  { id: "npm:pi-smart-fetch", name: "pi-smart-fetch", descKey: "pkg.smart_fetch" },
+  { id: "npm:pi-rtk-optimizer", name: "pi-rtk-optimizer", descKey: "pkg.rtk_optimizer" },
+  { id: "npm:pi-puppeteer", name: "pi-puppeteer", descKey: "pkg.puppeteer" },
+  { id: "npm:pi-intercom", name: "pi-intercom", descKey: "pkg.intercom" },
+  { id: "npm:pi-prompt-template-model", name: "pi-prompt-template-model", descKey: "pkg.prompt_template" },
+  { id: "npm:@pi-unipi/notify", name: "@pi-unipi/notify", descKey: "pkg.notify" },
+];

package/src/index.css CHANGED Viewed

@@ -710,3 +710,25 @@ table { border-collapse: collapse; }
   transform: translateY(-1px);
   box-shadow: 0 8px 22px color-mix(in srgb, #229ED9 22%, transparent);
 }
+/* ─── Changelog trigger (version strip) ─────────────────── */
+.changelog-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  color: var(--muted-text);
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+}
+.changelog-trigger:hover {
+  color: var(--signal-cyan);
+  border-color: color-mix(in srgb, var(--signal-cyan) 30%, var(--card-border));
+  background: color-mix(in srgb, var(--signal-cyan) 8%, transparent);
+}

package/src/lib/translations/en.ts CHANGED Viewed

@@ -126,7 +126,24 @@ const en: Record<string, string> = {
   "official_usage.no_result": "No quota result yet",
   "official_usage.no_result_desc": "Enter an official usage endpoint and API key, then save to test the query and display quota usage.",
   "app.subtitle": "Configuration Manager",
-  "app.version": "pi-switch v0.1.0",
+  "app.version": "pi-switch v0.7.0",
+  "changelog.button": "Changelog",
+  "changelog.title": "What's New",
+  "changelog.0_8_0_1": "Settings: added a package browser dialog with \"Recommended\" and \"Search\" tabs.",
+  "changelog.0_8_0_2": "Search tab fuzzy-searches npm for pi packages, filterable by All/Available/Installed.",
+  "changelog.0_8_0_3": "One-click install with an installed-state indicator.",
+  "changelog.0_7_0_1": "Added a floating \"User Guide\" button (bottom-right) with a project overview and per-module how-to.",
+  "changelog.0_7_0_2": "Added \"Join Telegram group\" entry points (sidebar + user guide dialog).",
+  "changelog.0_7_0_3": "Added this \"What’s New\" changelog dialog.",
+  "changelog.0_6_2_1": "Subagents: edit a custom agent’s model and thinking level directly from the panel.",
+  "changelog.0_6_1_1": "Fix: one-click optimize now runs in an async process, no longer freezing the dev server or auto-reloading the page.",
+  "changelog.0_6_0_1": "Memory: added \"Optimize Memory\" to consolidate all three memory files at once.",
+  "changelog.0_6_0_2": "Memory: added auto-write model config plus capacity limits and overflow strategy.",
+  "changelog.0_6_0_3": "Memory: added per-file capacity progress bars and live optimize progress.",
+  "changelog.0_6_0_4": "Settings: removed the GitHub Copilot config section.",
+  "changelog.0_5_0_1": "Added the \"Model Speed Test\" module, replacing \"Official Usage\".",
+  "changelog.0_5_0_2": "Speed test: one-click fetch models (stored separately) and a slow mode to avoid rate limits.",
+  "changelog.0_5_0_3": "Providers page hides built-in providers for a cleaner UI.",
   // Subagents
   "subagents.summary": "{0} agents · {1} chains",
@@ -459,6 +476,30 @@ const en: Record<string, string> = {
   "settings.packages": "Extensions & Packages",
   "settings.package_placeholder": "npm:package-name",
   "settings.add": "Add",
+  "settings.install": "Install",
+  "settings.browse_packages": "Browse & add packages",
+  "settings.tab_recommended": "Recommended",
+  "settings.tab_search": "Search",
+  "settings.filter_all": "All",
+  "settings.filter_available": "Available",
+  "settings.filter_installed": "Installed",
+  "settings.search_packages_placeholder": "Search packages (fuzzy)…",
+  "settings.no_packages_found": "No matching packages found",
+  "settings.installed": "Installed",
+  "settings.view_on_npm": "View on npm",
+  "settings.recommended_packages": "Recommended packages (one-click install)",
+  "settings.install_all_recommended": "Install all recommended",
+  "settings.add_custom_package": "Add another package manually…",
+  "pkg.hermes_memory": "Long-term memory (read/write + consolidation)",
+  "pkg.context_mode": "Large-output handling & knowledge base",
+  "pkg.subagents": "Subagents & multi-step orchestration",
+  "pkg.web_access": "Web fetch & search",
+  "pkg.smart_fetch": "Browser-fingerprint web fetch",
+  "pkg.rtk_optimizer": "RTK optimization & conventions",
+  "pkg.puppeteer": "Browser automation",
+  "pkg.intercom": "Cross-session coordination",
+  "pkg.prompt_template": "Custom prompt templates & models",
+  "pkg.notify": "Cross-platform notifications",
   "settings.no_packages": "No packages installed",
   "settings.import_export": "Import & Export",
   "settings.export": "Export Config",

package/src/lib/translations/ja.ts CHANGED Viewed

@@ -124,7 +124,24 @@ const ja: Record<string, string> = {
   "official_usage.no_result": "利用枠データはまだありません",
   "official_usage.no_result_desc": "公式使用量 URL と API Key を入力して保存すると、照会テストを行い利用枠を表示します。",
   "app.subtitle": "設定マネージャー",
-  "app.version": "pi-switch v0.1.0",
+  "app.version": "pi-switch v0.7.0",
+  "changelog.button": "変更履歴",
+  "changelog.title": "更新情報",
+  "changelog.0_8_0_1": "設定：「おすすめ」と「検索」タブを備えたパッケージ検索ダイアログを追加。",
+  "changelog.0_8_0_2": "検索タブは npm の pi パッケージをあいまい検索し、すべて/未インストール/インストール済みで絞り込み可能。",
+  "changelog.0_8_0_3": "ワンクリックインストールとインストール済み表示。",
+  "changelog.0_7_0_1": "右下にフローティング「使い方」ボタンを追加。プロジェクト概要と各モジュールの使い方を表示。",
+  "changelog.0_7_0_2": "「Telegram グループに参加」の入口を追加（サイドバー + 使い方ダイアログ）。",
+  "changelog.0_7_0_3": "この「更新情報」ダイアログを追加。",
+  "changelog.0_6_2_1": "サブエージェント：カスタムエージェントのモデルと思考レベルをパネルから直接編集可能に。",
+  "changelog.0_6_1_1": "修正：メモリ最適化を非同期プロセス化し、開発サーバーの停止やページ自動リロードを解消。",
+  "changelog.0_6_0_1": "メモリ：3 つのメモリファイルを一括統合する「メモリを最適化」を追加。",
+  "changelog.0_6_0_2": "メモリ：自動書き込みモデル設定、容量上限、上限超過戦略を追加。",
+  "changelog.0_6_0_3": "メモリ：ファイル別の容量プログレスバーと最適化のリアルタイム進捗を追加。",
+  "changelog.0_6_0_4": "設定：GitHub Copilot 設定セクションを削除。",
+  "changelog.0_5_0_1": "「モデル速度計測」モジュールを追加し、「公式使用量」を置き換え。",
+  "changelog.0_5_0_2": "計測：モデルのワンクリック取得（別途保存）とレート制限回避の低速モード。",
+  "changelog.0_5_0_3": "プロバイダーページで組み込みプロバイダーを非表示にしUIを簡素化。",
   // Subagents
   "subagents.summary": "{0} エージェント · {1} チェーン",
@@ -451,6 +468,30 @@ const ja: Record<string, string> = {
   "settings.packages": "拡張機能とパッケージ",
   "settings.package_placeholder": "npm:package-name",
   "settings.add": "追加",
+  "settings.install": "インストール",
+  "settings.browse_packages": "パッケージを検索して追加",
+  "settings.tab_recommended": "おすすめ",
+  "settings.tab_search": "検索",
+  "settings.filter_all": "すべて",
+  "settings.filter_available": "未インストール",
+  "settings.filter_installed": "インストール済み",
+  "settings.search_packages_placeholder": "パッケージを検索（あいまい）…",
+  "settings.no_packages_found": "一致するパッケージがありません",
+  "settings.installed": "インストール済み",
+  "settings.view_on_npm": "npm で見る",
+  "settings.recommended_packages": "おすすめパッケージ（ワンクリック）",
+  "settings.install_all_recommended": "おすすめを一括インストール",
+  "settings.add_custom_package": "他のパッケージを手動追加…",
+  "pkg.hermes_memory": "長期メモリ（読み書き・統合）",
+  "pkg.context_mode": "大出力処理と知識ベース",
+  "pkg.subagents": "サブエージェントと多段編成",
+  "pkg.web_access": "Web取得と検索",
+  "pkg.smart_fetch": "ブラウザ指紋レベルのWeb取得",
+  "pkg.rtk_optimizer": "RTK最適化と規約",
+  "pkg.puppeteer": "ブラウザ自動化",
+  "pkg.intercom": "セッション間連携",
+  "pkg.prompt_template": "カスタムプロンプトとモデル",
+  "pkg.notify": "クロスプラットフォーム通知",
   "settings.no_packages": "パッケージがインストールされていません",
   "settings.import_export": "インポートとエクスポート",
   "settings.export": "設定をエクスポート",

package/src/lib/translations/zh-CN.ts CHANGED Viewed

@@ -124,7 +124,24 @@ const zhCN: Record<string, string> = {
   "official_usage.no_result": "暂未获取额度数据",
   "official_usage.no_result_desc": "填写官方用量接口和 API Key，保存后会立即测试查询并显示额度。",
   "app.subtitle": "配置管理器",
-  "app.version": "pi-switch v0.1.0",
+  "app.version": "pi-switch v0.7.0",
+  "changelog.button": "更新日志",
+  "changelog.title": "版本更新说明",
+  "changelog.0_8_0_1": "设置：新增扩展包浏览弹窗，含「推荐安装」与「搜索」两个标签页。",
+  "changelog.0_8_0_2": "搜索标签支持模糊搜索 npm 上的 pi 扩展包，并可按全部/未安装/已安装筛选。",
+  "changelog.0_8_0_3": "扩展包一键安装，已安装状态自动标识。",
+  "changelog.0_7_0_1": "新增右下角浮动「使用说明」按钮，弹窗含项目总览与各板块使用指引。",
+  "changelog.0_7_0_2": "新增「加入 Telegram 交流群」入口（侧边栏 + 使用说明弹窗）。",
+  "changelog.0_7_0_3": "新增本「版本更新说明」弹窗。",
+  "changelog.0_6_2_1": "子代理：支持在面板里直接编辑自定义代理的模型和思考级别。",
+  "changelog.0_6_1_1": "修复：一键优化改用异步进程，不再导致开发服务器卡顿和页面自动刷新。",
+  "changelog.0_6_0_1": "记忆：新增「一键优化记忆」，一次整合三个记忆文件。",
+  "changelog.0_6_0_2": "记忆：新增自动写入记忆所用模型的配置，及容量上限与超限策略设置。",
+  "changelog.0_6_0_3": "记忆：新增各记忆文件的容量进度条与优化实时进度。",
+  "changelog.0_6_0_4": "设置：移除 GitHub Copilot 配置板块。",
+  "changelog.0_5_0_1": "新增「模型测速」模块，替代原「官方用量查询」。",
+  "changelog.0_5_0_2": "测速支持一键获取模型（独立本地存储）与慢速模式防限流。",
+  "changelog.0_5_0_3": "提供商页隐藏内置供应商，精简界面。",
   // Subagents
   "subagents.summary": "{0} 个代理 · {1} 个流水线",
@@ -451,6 +468,30 @@ const zhCN: Record<string, string> = {
   "settings.packages": "扩展与包",
   "settings.package_placeholder": "npm:package-name",
   "settings.add": "添加",
+  "settings.install": "安装",
+  "settings.browse_packages": "浏览并添加扩展包",
+  "settings.tab_recommended": "推荐安装",
+  "settings.tab_search": "搜索",
+  "settings.filter_all": "全部",
+  "settings.filter_available": "未安装",
+  "settings.filter_installed": "已安装",
+  "settings.search_packages_placeholder": "搜索扩展包（模糊匹配）…",
+  "settings.no_packages_found": "没有找到匹配的扩展包",
+  "settings.installed": "已安装",
+  "settings.view_on_npm": "在 npm 查看",
+  "settings.recommended_packages": "推荐扩展包（点击安装）",
+  "settings.install_all_recommended": "一键安装全部推荐",
+  "settings.add_custom_package": "手动添加其他包…",
+  "pkg.hermes_memory": "长期记忆系统（记忆读写与整合）",
+  "pkg.context_mode": "大输出处理与知识库检索",
+  "pkg.subagents": "子代理与多步编排",
+  "pkg.web_access": "网页抓取与搜索",
+  "pkg.smart_fetch": "浏览器指纹级网页抓取",
+  "pkg.rtk_optimizer": "RTK 优化与规范",
+  "pkg.puppeteer": "浏览器自动化",
+  "pkg.intercom": "多会话协作通信",
+  "pkg.prompt_template": "自定义提示词模板与模型",
+  "pkg.notify": "跨平台通知",
   "settings.no_packages": "未安装任何包",
   "settings.import_export": "导入与导出",
   "settings.export": "导出配置",

package/src/lib/translations/zh-TW.ts CHANGED Viewed

@@ -123,7 +123,24 @@ const zhTW: Record<string, string> = {
   "official_usage.no_result": "尚未取得額度資料",
   "official_usage.no_result_desc": "填寫官方用量介面與 API Key，儲存後會立即測試查詢並顯示額度。",
   "app.subtitle": "設定管理器",
-  "app.version": "pi-switch v0.1.0",
+  "app.version": "pi-switch v0.7.0",
+  "changelog.button": "更新日誌",
+  "changelog.title": "版本更新說明",
+  "changelog.0_8_0_1": "設定：新增擴充包瀏覽彈窗，含「推薦安裝」與「搜尋」兩個標籤頁。",
+  "changelog.0_8_0_2": "搜尋標籤支援模糊搜尋 npm 上的 pi 擴充包，並可按全部/未安裝/已安裝篩選。",
+  "changelog.0_8_0_3": "擴充包一鍵安裝，已安裝狀態自動標示。",
+  "changelog.0_7_0_1": "新增右下角浮動「使用說明」按鈕，彈窗含專案總覽與各板塊使用指引。",
+  "changelog.0_7_0_2": "新增「加入 Telegram 交流群」入口（側邊欄 + 使用說明彈窗）。",
+  "changelog.0_7_0_3": "新增本「版本更新說明」彈窗。",
+  "changelog.0_6_2_1": "子代理：支援在面板裡直接編輯自訂代理的模型和思考級別。",
+  "changelog.0_6_1_1": "修復：一鍵優化改用非同步進程，不再導致開發伺服器卡頓和頁面自動刷新。",
+  "changelog.0_6_0_1": "記憶：新增「一鍵優化記憶」，一次整合三個記憶檔。",
+  "changelog.0_6_0_2": "記憶：新增自動寫入記憶所用模型的設定，及容量上限與超限策略設置。",
+  "changelog.0_6_0_3": "記憶：新增各記憶檔的容量進度條與優化即時進度。",
+  "changelog.0_6_0_4": "設定：移除 GitHub Copilot 設定板塊。",
+  "changelog.0_5_0_1": "新增「模型測速」模組，替代原「官方用量查詢」。",
+  "changelog.0_5_0_2": "測速支援一鍵獲取模型（獨立本地儲存）與慢速模式防限流。",
+  "changelog.0_5_0_3": "提供商頁隱藏內建供應商，精簡介面。",
   // Subagents
   "subagents.summary": "{0} 個代理 · {1} 個流水線",
@@ -450,6 +467,30 @@ const zhTW: Record<string, string> = {
   "settings.packages": "擴充功能與套件",
   "settings.package_placeholder": "npm:package-name",
   "settings.add": "新增",
+  "settings.install": "安裝",
+  "settings.browse_packages": "瀏覽並新增擴充包",
+  "settings.tab_recommended": "推薦安裝",
+  "settings.tab_search": "搜尋",
+  "settings.filter_all": "全部",
+  "settings.filter_available": "未安裝",
+  "settings.filter_installed": "已安裝",
+  "settings.search_packages_placeholder": "搜尋擴充包（模糊匹配）…",
+  "settings.no_packages_found": "沒有找到匹配的擴充包",
+  "settings.installed": "已安裝",
+  "settings.view_on_npm": "在 npm 檢視",
+  "settings.recommended_packages": "推薦擴充包（點擊安裝）",
+  "settings.install_all_recommended": "一鍵安裝全部推薦",
+  "settings.add_custom_package": "手動新增其他包…",
+  "pkg.hermes_memory": "長期記憶系統（記憶讀寫與整合）",
+  "pkg.context_mode": "大輸出處理與知識庫檢索",
+  "pkg.subagents": "子代理與多步編排",
+  "pkg.web_access": "網頁抓取與搜尋",
+  "pkg.smart_fetch": "瀏覽器指紋級網頁抓取",
+  "pkg.rtk_optimizer": "RTK 優化與規範",
+  "pkg.puppeteer": "瀏覽器自動化",
+  "pkg.intercom": "多會話協作通訊",
+  "pkg.prompt_template": "自訂提示詞模板與模型",
+  "pkg.notify": "跨平台通知",
   "settings.no_packages": "未安裝任何套件",
   "settings.import_export": "匯入與匯出",
   "settings.export": "匯出設定",

package/vite.config.ts CHANGED Viewed

@@ -148,6 +148,17 @@ function piApiPlugin(): Plugin {
           res.setHeader("Content-Type", "application/json");
           res.end(JSON.stringify(data));
         },
+        "GET /api/pi/packages/search"(req, res) {
+          const parsed = new URL(req.url ?? "", "http://localhost");
+          const q = parsed.searchParams.get("q") ?? "";
+          pi.searchPackages(q).then((results: unknown) => {
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ results }));
+          }).catch(() => {
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ results: [] }));
+          });
+        },
         "POST /api/pi/subagents/update-agent"(req, res) {
           let body = "";
           req.on("data", (chunk: string) => (body += chunk));