opencode-plugin-hub 0.1.2 → 0.1.4

package/src/gui/page.tsx

@@ -102,7 +102,7 @@ function noteIcon(tone: Tone): IconName {
 function readableError(error: unknown): string {
   const text = error instanceof Error ? error.message : String(error)
   if (/SchemaError|Missing key at/i.test(text)) {
-    return "插件窗口与后台服务版本不一致。点上方工具栏的「彻底重启」让两边换成同一版本。"
+    return "插件窗口与后台服务版本不一致。点工具栏的「彻底重启」让两边换成同一版本。"
   }
   if (/unknown method|not implemented|no such method|method.*not.*found/i.test(text)) {
     return "后台服务还是旧版本，暂时没有「彻底重启」能力。请先手动完全退出 OpenCode（并结束 serve --service）再打开一次。"
@@ -348,12 +348,18 @@ const CSS = `
 }
 
 /* cards */
-.ph-list { display: flex; flex-direction: column; gap: 8px; }
+.ph-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
+  gap: 10px;
+  align-items: stretch;
+}
 .ph-card {
+  position: relative;
   display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px;
+  flex-direction: column;
+  gap: 9px;
+  padding: 12px;
   border: 1px solid var(--ph-border);
   border-radius: 12px;
   background: var(--ph-layer);
@@ -364,22 +370,59 @@ const CSS = `
   background: var(--ph-layer-2);
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
 }
+/* Highlight cards whose plugin has a pending update. */
+.ph-card[data-stale="true"] {
+  border-color: color-mix(in srgb, var(--ph-accent) 36%, transparent);
+  background: color-mix(in srgb, var(--ph-accent) 5%, transparent);
+}
+/* While an install or update runs, pulse and sweep the card. */
+.ph-card[data-busy="true"] {
+  border-color: color-mix(in srgb, var(--ph-accent) 45%, transparent);
+  animation: ph-busy-pulse 1.1s ease-in-out infinite;
+}
+.ph-card[data-busy="true"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    100deg,
+    transparent 32%,
+    color-mix(in srgb, var(--ph-accent) 12%, transparent) 50%,
+    transparent 68%
+  );
+  background-size: 220% 100%;
+  animation: ph-shimmer 1.1s linear infinite;
+  pointer-events: none;
+}
+@keyframes ph-busy-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ph-accent) 20%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ph-accent) 8%, transparent);
+  }
+}
+.ph-card-main { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
+.ph-card-body { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
+.ph-card-body[role="button"] { cursor: pointer; border-radius: 6px; }
+.ph-card-head { display: flex; align-items: flex-start; gap: 9px; }
+.ph-card-titles { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
 .ph-tile {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
-  width: 38px;
-  height: 38px;
+  width: 32px;
+  height: 32px;
   border: 1px solid color-mix(in srgb, var(--ph-accent) 20%, transparent);
-  border-radius: 10px;
+  border-radius: 9px;
   background: color-mix(in srgb, var(--ph-accent) 10%, transparent);
   color: var(--ph-accent);
-  font-size: 15px;
+  font-size: 13px;
   font-weight: 700;
   overflow: hidden;
 }
-.ph-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
-.ph-card-body[role="button"] { cursor: pointer; border-radius: 6px; }
 .ph-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
 .ph-name {
   font-size: 13.5px;
@@ -409,7 +452,16 @@ const CSS = `
   text-transform: uppercase;
   color: var(--ph-faint);
 }
-.ph-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
+.ph-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid var(--ph-border);
+}
 
 /* badges and chips */
 .ph-badge {
@@ -471,6 +523,7 @@ button.ph-chip[data-active="true"] {
   border-color: color-mix(in srgb, var(--ph-accent) 32%, transparent);
   background: color-mix(in srgb, var(--ph-accent) 10%, transparent);
 }
+.ph-chip[data-disabled="true"] { opacity: 0.45; cursor: default; }
 .ph-chip-count { font-size: 9px; opacity: 0.7; }
 
 /* empty and loading */
@@ -617,10 +670,16 @@ button.ph-chip:focus-visible,
   max-height: calc(100vh - 24px);
   resize: both;
 }
-.ph-root[data-embedded="true"] .ph-toolbar {
+/* Notices and the toolbar share one sticky head, so a note raised after an
+   action (e.g. updating a plugin near the bottom of the list) is always on
+   screen instead of appearing far above the current scroll position. */
+.ph-head {
   position: sticky;
   top: 0;
   z-index: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
   padding: 6px 0;
   margin: -6px 0;
   background: color-mix(in srgb, var(--color-v2-background-bg-base, Canvas) 92%, transparent);
@@ -639,9 +698,7 @@ button.ph-chip:focus-visible,
 
 @media (max-width: 760px) {
   .ph-hero { flex-direction: column; }
-  .ph-card { flex-wrap: wrap; }
-  .ph-card-body { flex-basis: calc(100% - 50px); }
-  .ph-actions { width: 100%; justify-content: flex-start; padding-left: 50px; }
+  .ph-list { grid-template-columns: 1fr; }
   .ph-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 `
@@ -907,6 +964,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 
   const [updates, setUpdates] = createSignal<Map<string, UpdateInfo>>(new Map())
   const [checked, setChecked] = createSignal(false)
+  const [staleOnly, setStaleOnly] = createSignal(false)
 
   const [busyKeys, setBusyKeys] = createSignal<ReadonlySet<string>>(new Set())
   const [note, setNote] = createSignal<Note>()
@@ -977,7 +1035,9 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
         const result = await props.admin.browse({ force })
         setCatalog([...result.entries])
         setMeta(result)
-        if (result.error) notify(result.error, "error")
+        // A fallback source still shows the full list, so a network miss is a downgrade to note,
+        // not an error to alarm about. Only the stale built-in snapshot is worth a warning.
+        if (result.error) notify(result.error, result.source === "builtin" ? "warning" : "info")
         // Keep the installed view in sync with what the catalog just reported.
         await refresh()
       } catch (error) {
@@ -1009,7 +1069,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
           notify(result.message, "error")
           return
         }
-        notify(`${result.message}。点上方工具栏的「彻底重启」后生效`, "success")
+        notify(`${result.message}。点工具栏的「彻底重启」后生效`, "success")
         const latest = version || hits().find((hit) => hit.name === name)?.version || ""
         setCatalog((prev) => prev.map((entry) => (entry.pkg === name ? { ...entry, installed: true } : entry)))
         setHits((prev) =>
@@ -1040,7 +1100,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
           notify(result.message, "error")
           return
         }
-        notify(`${result.message}。点上方工具栏的「彻底重启」后生效`, "success")
+        notify(`${result.message}。点工具栏的「彻底重启」后生效`, "success")
         setCatalog((prev) =>
           prev.map((item) => (item.pkg === entry.name ? { ...item, installed: false } : item)),
         )
@@ -1169,6 +1229,11 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 
   const registryUrl = () => meta()?.registry || CATALOG_SOURCE_FALLBACK
   const outdated = createMemo(() => [...updates().values()].filter((item) => item.hasUpdate).length)
+  const visiblePlugins = createMemo(() => {
+    const plugins = state()?.plugins ?? []
+    if (!staleOnly()) return plugins
+    return plugins.filter((entry) => updates().get(entry.spec)?.hasUpdate === true)
+  })
   const bySpec = (spec: string) => updates().get(spec)
   const byPackage = createMemo(() => {
     const map = new Map<string, UpdateInfo>()
@@ -1178,6 +1243,8 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 
   const switchTab = (next: Tab) => {
     setTab(next)
+    // Leaving the installed view resets its "updatable only" filter.
+    if (next !== "installed") setStaleOnly(false)
     // The first look at the installed list also checks the registry, once.
     if (next !== "catalog" && !checked() && !isBusy("updates")) void checkUpdates(true)
   }
@@ -1215,6 +1282,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
   const catalogRow = (entry: CatalogEntry) => {
     const info = () => byPackage().get(entry.pkg)
     const stale = () => info()?.hasUpdate === true
+    const busy = () => isBusy(`install:${entry.pkg}`)
     const detail = () =>
       openDetail(entry.pkg, {
         version: entry.version,
@@ -1222,54 +1290,62 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
         repo: entry.repo,
       })
     return (
-      <article class="ph-card">
-        <div class="ph-tile">
-          <ui.Icon name={typeIcon(entry.type)} size="normal" />
-        </div>
-        <div
-          class="ph-card-body"
-          role="button"
-          tabindex="0"
-          onClick={() => (entry.pkg ? detail() : void openUrl(entry.repo))}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault()
-              if (entry.pkg) detail()
-              else void openUrl(entry.repo)
-            }
-          }}
-        >
-          <div class="ph-name-row">
-            <span class="ph-name">{entry.name}</span>
-            <Show when={entry.pkg}>
-              <span class="ph-pkg">{entry.pkg}</span>
-            </Show>
-            <Show when={entry.installed}>
-              <span class="ph-badge" data-tone="success">
-                已安装
-              </span>
-            </Show>
-            <Show when={stale()}>
-              <span class="ph-badge" data-tone="accent">
-                可更新 → v{info()!.latest}
-              </span>
-            </Show>
+      <article class="ph-card" data-stale={stale() ? "true" : undefined} data-busy={busy() ? "true" : undefined}>
+        <div class="ph-card-main">
+          <div class="ph-card-head">
+            <div class="ph-tile">
+              <ui.Icon name={typeIcon(entry.type)} size="normal" />
+            </div>
+            <div class="ph-card-titles">
+              <div class="ph-name-row">
+                <span class="ph-name">{entry.name}</span>
+              </div>
+              <Show when={entry.pkg}>
+                <span class="ph-pkg">{entry.pkg}</span>
+              </Show>
+            </div>
+            <div class="ph-chips">
+              <Show when={entry.installed}>
+                <span class="ph-badge" data-tone="success">
+                  已安装
+                </span>
+              </Show>
+              <Show when={stale()}>
+                <span class="ph-badge" data-tone="accent">
+                  可更新 → v{info()!.latest}
+                </span>
+              </Show>
+            </div>
           </div>
-          <div class="ph-desc ph-clamp">{entry.desc || entry.long || "—"}</div>
-          <div class="ph-meta">
-            <span class="ph-type">{TYPE_LABEL[entry.type] ?? entry.type}</span>
-            <Show when={entry.version}>
-              <span class="ph-dot" />
-              <span>v{entry.version}</span>
-            </Show>
-            <Show when={!entry.pkg}>
-              <span class="ph-dot" />
-              <span>仅 GitHub 发布</span>
-            </Show>
-            <Show when={entry.tags.length > 0}>
-              <span class="ph-dot" />
-              <span>{entry.tags.slice(0, 4).join(" / ")}</span>
-            </Show>
+          <div
+            class="ph-card-body"
+            role="button"
+            tabindex="0"
+            onClick={() => (entry.pkg ? detail() : void openUrl(entry.repo))}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                if (entry.pkg) detail()
+                else void openUrl(entry.repo)
+              }
+            }}
+          >
+            <div class="ph-desc ph-clamp">{entry.desc || entry.long || "—"}</div>
+            <div class="ph-meta">
+              <span class="ph-type">{TYPE_LABEL[entry.type] ?? entry.type}</span>
+              <Show when={entry.version}>
+                <span class="ph-dot" />
+                <span>v{entry.version}</span>
+              </Show>
+              <Show when={!entry.pkg}>
+                <span class="ph-dot" />
+                <span>仅 GitHub 发布</span>
+              </Show>
+              <Show when={entry.tags.length > 0}>
+                <span class="ph-dot" />
+                <span>{entry.tags.slice(0, 4).join(" / ")}</span>
+              </Show>
+            </div>
           </div>
         </div>
         <div class="ph-actions">
@@ -1291,7 +1367,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
               variant="ghost"
               size="small"
               icon="download"
-              busy={isBusy(`install:${entry.pkg}`)}
+              busy={busy()}
               onClick={() => void install(entry.pkg, info()!.latest)}
             >
               更新
@@ -1302,7 +1378,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
               variant="neutral"
               size="small"
               icon="download"
-              busy={isBusy(`install:${entry.pkg}`)}
+              busy={busy()}
               onClick={() => void install(entry.pkg)}
             >
               安装
@@ -1326,71 +1402,70 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
         npm: hit.npm,
       })
     return (
-      <article class="ph-card">
-        <div class="ph-tile">{initial(hit.name)}</div>
-        <div
-          class="ph-card-body"
-          role="button"
-          tabindex="0"
-          onClick={detail}
-          onKeyDown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              event.preventDefault()
-              detail()
-            }
-          }}
-        >
-          <div class="ph-name-row">
-            <span class="ph-name">{hit.name}</span>
-            <span class="ph-pkg">v{hit.version}</span>
-            <Show when={hit.installed}>
-              <span class="ph-badge" data-tone="success">
-                已安装{hit.current ? ` v${hit.current}` : ""}
-              </span>
-            </Show>
-            <Show when={hit.hasUpdate}>
-              <span class="ph-badge" data-tone="accent">
-                可更新 → v{hit.version}
-              </span>
-            </Show>
+      <article class="ph-card" data-busy={isBusy(`install:${hit.name}`) ? "true" : undefined}>
+        <div class="ph-card-main">
+          <div class="ph-card-head">
+            <div class="ph-tile">{initial(hit.name)}</div>
+            <div class="ph-card-titles">
+              <div class="ph-name-row">
+                <span class="ph-name">{hit.name}</span>
+              </div>
+              <span class="ph-pkg">v{hit.version}</span>
+            </div>
+            <div class="ph-chips">
+              <Show when={hit.installed}>
+                <span class="ph-badge" data-tone="success">
+                  已安装{hit.current ? ` v${hit.current}` : ""}
+                </span>
+              </Show>
+              <Show when={hit.hasUpdate}>
+                <span class="ph-badge" data-tone="accent">
+                  可更新 → v{hit.version}
+                </span>
+              </Show>
+            </div>
           </div>
-          <div class="ph-desc ph-clamp">{hit.description || "—"}</div>
-          <div class="ph-meta">
-            <span title={`周下载 ${hit.weekly.toLocaleString()} 次`}>
-              <ui.Icon name="download" size="small" />
-              {formatCount(hit.weekly)}/周
-            </span>
-            <span class="ph-dot" />
-            <span title={`月下载 ${hit.monthly.toLocaleString()} 次`}>{formatCount(hit.monthly)}/月</span>
-            <Show when={hit.publisher}>
-              <span class="ph-dot" />
-              <span>by {hit.publisher}</span>
-            </Show>
-            <Show when={hit.license}>
-              <span class="ph-dot" />
-              <span>{hit.license}</span>
-            </Show>
-            <Show when={hit.published}>
+          <div
+            class="ph-card-body"
+            role="button"
+            tabindex="0"
+            onClick={detail}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault()
+                detail()
+              }
+            }}
+          >
+            <div class="ph-desc ph-clamp">{hit.description || "—"}</div>
+            <div class="ph-meta">
+              <span title={`周下载 ${hit.weekly.toLocaleString()} 次`}>
+                <ui.Icon name="download" size="small" />
+                {formatCount(hit.weekly)}/周
+              </span>
               <span class="ph-dot" />
-              <span>{relativeDate(hit.published)}更新</span>
+              <span title={`月下载 ${hit.monthly.toLocaleString()} 次`}>{formatCount(hit.monthly)}/月</span>
+              <Show when={hit.publisher}>
+                <span class="ph-dot" />
+                <span>by {hit.publisher}</span>
+              </Show>
+              <Show when={hit.published}>
+                <span class="ph-dot" />
+                <span>{relativeDate(hit.published)}更新</span>
+              </Show>
+            </div>
+            <Show when={hit.keywords.length > 0}>
+              <div class="ph-chips">
+                <For each={hit.keywords.slice(0, 3)}>{(keyword) => <span class="ph-chip">{keyword}</span>}</For>
+              </div>
             </Show>
           </div>
-          <Show when={hit.keywords.length > 0}>
-            <div class="ph-chips">
-              <For each={hit.keywords}>{(keyword) => <span class="ph-chip">{keyword}</span>}</For>
-            </div>
-          </Show>
         </div>
         <div class="ph-actions">
           <Show when={hit.homepage}>
-            <ui.Button
-              variant="ghost-muted"
-              size="small"
-              icon="globe"
-              onClick={() => void openUrl(hit.homepage)}
-            >
-              主页
-            </ui.Button>
+            <ui.Tooltip value="主页">
+              <ui.IconButton icon="globe" size="small" label="主页" onClick={() => void openUrl(hit.homepage)} />
+            </ui.Tooltip>
           </Show>
           <Show when={hit.repo}>
             <ui.Tooltip value="源码仓库">
@@ -1435,35 +1510,44 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
   const installedRow = (entry: PluginEntry) => {
     const info = () => bySpec(entry.spec)
     const stale = () => info()?.hasUpdate === true
+    const busy = () => isBusy(`install:${entry.name}`)
     const current = () => info()?.current || entry.version
     const unchecked = () => (info()?.error ?? "") !== ""
     return (
-      <article class="ph-card">
-        <div class="ph-tile">{initial(entry.name)}</div>
-        <div class="ph-card-body">
-          <div class="ph-name-row">
-            <span class="ph-name">{entry.name}</span>
-            {versionLabel(current(), info()?.latest ?? "", stale())}
-            <Show when={entry.kind === "path"}>
-              <span class="ph-badge">本地目录</span>
-            </Show>
-            <Show when={stale()}>
-              <span class="ph-badge" data-tone="accent">
-                可更新 → v{info()!.latest}
-              </span>
-            </Show>
-            <Show when={unchecked()}>
-              <span class="ph-badge" data-tone="warning">
-                未能检查
-              </span>
-            </Show>
+      <article class="ph-card" data-stale={stale() ? "true" : undefined} data-busy={busy() ? "true" : undefined}>
+        <div class="ph-card-main">
+          <div class="ph-card-head">
+            <div class="ph-tile">{initial(entry.name)}</div>
+            <div class="ph-card-titles">
+              <div class="ph-name-row">
+                <span class="ph-name">{entry.name}</span>
+              </div>
+              <span class="ph-pkg">{entry.spec}</span>
+            </div>
+            <div class="ph-chips">
+              <Show when={stale()}>
+                <span class="ph-badge" data-tone="accent">
+                  可更新 → v{info()!.latest}
+                </span>
+              </Show>
+              <Show when={unchecked()}>
+                <span class="ph-badge" data-tone="warning">
+                  未能检查
+                </span>
+              </Show>
+              <Show when={entry.kind === "path"}>
+                <span class="ph-badge">本地目录</span>
+              </Show>
+            </div>
           </div>
-          <div class="ph-meta">
-            <span class="ph-pkg">{entry.spec}</span>
-            <Show when={stale() && entry.kind === "path"}>
-              <span class="ph-dot" />
-              <span>更新会覆盖目录内容，原文件自动备份</span>
-            </Show>
+          <div class="ph-card-body">
+            <div class="ph-meta">
+              {versionLabel(current(), info()?.latest ?? "", stale())}
+              <Show when={stale() && entry.kind === "path"}>
+                <span class="ph-dot" />
+                <span>更新会覆盖目录内容，原文件自动备份</span>
+              </Show>
+            </div>
           </div>
         </div>
         <div class="ph-actions">
@@ -1482,7 +1566,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
               variant="ghost"
               size="small"
               icon="download"
-              busy={isBusy(`install:${entry.name}`)}
+              busy={busy()}
               onClick={() => void install(info()!.name, info()!.latest)}
             >
               更新
@@ -1493,7 +1577,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
               variant="ghost-muted"
               size="small"
               icon="trash"
-              busy={isBusy(`install:${entry.name}`)}
+              busy={busy()}
               onClick={() => void uninstall(entry)}
             >
               移除
@@ -1535,21 +1619,22 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
         </div>
       </section>
 
-      <Show when={note()}>
-        <div class="ph-notice" data-tone={note()!.tone}>
-          <ui.Icon name={noteIcon(note()!.tone)} size="small" />
-          <span>{note()!.text}</span>
-        </div>
-      </Show>
+      <div class="ph-head">
+        <Show when={note()}>
+          <div class="ph-notice" data-tone={note()!.tone}>
+            <ui.Icon name={noteIcon(note()!.tone)} size="small" />
+            <span>{note()!.text}</span>
+          </div>
+        </Show>
 
-      <Show when={state()?.error}>
-        <div class="ph-notice" data-tone="error">
-          <ui.Icon name="circle-exclamation" size="small" />
-          <span>{state()!.error}</span>
-        </div>
-      </Show>
+        <Show when={state()?.error}>
+          <div class="ph-notice" data-tone="error">
+            <ui.Icon name="circle-exclamation" size="small" />
+            <span>{state()!.error}</span>
+          </div>
+        </Show>
 
-      <div class="ph-toolbar">
+        <div class="ph-toolbar">
         <div class="ph-tabs" role="tablist">
           {tabButton("catalog", "精选目录", "extensions", meta() ? catalog().length : undefined)}
           {tabButton("search", "npm 搜索", "magnifying-glass", searched() ? hits().length : undefined)}
@@ -1621,7 +1706,8 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
           >
             检查更新
           </ui.Button>
-        </Show>
+          </Show>
+        </div>
       </div>
 
       <Switch>
@@ -1793,6 +1879,21 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
               <h3 class="ph-h3">
                 已安装 <span class="ph-count">{state()?.plugins.length ?? 0}</span>
               </h3>
+              <div class="ph-chips">
+                <button
+                  class="ph-chip"
+                  data-active={staleOnly()}
+                  data-disabled={outdated() === 0 ? "true" : undefined}
+                  title={outdated() === 0 ? "检查更新后再来看可更新的插件" : "只显示有新版本的插件"}
+                  onClick={() => {
+                    if (outdated() > 0) setStaleOnly(!staleOnly())
+                  }}
+                >
+                  可更新
+                  <span class="ph-chip-count">{outdated()}</span>
+                </button>
+              </div>
+              <span class="ph-spacer" />
               <Show when={checked()}>
                 <span class="ph-meta">
                   检查过 npm registry{outdated() > 0 ? ` · ${outdated()} 个可更新` : " · 全部已是最新"}
@@ -1809,9 +1910,23 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
                 </div>
               }
             >
-              <div class="ph-list">
-                <For each={state()?.plugins ?? []}>{(entry) => installedRow(entry)}</For>
-              </div>
+              <Show
+                when={visiblePlugins().length > 0}
+                fallback={
+                  <div class="ph-empty">
+                    <ui.Icon name="checklist" size="large" />
+                    <strong>没有可更新的插件</strong>
+                    <span>已安装的插件都已是最新版本。点工具栏的「检查更新」可以再查一次。</span>
+                    <ui.Button variant="ghost" size="small" onClick={() => setStaleOnly(false)}>
+                      显示全部
+                    </ui.Button>
+                  </div>
+                }
+              >
+                <div class="ph-list">
+                  <For each={visiblePlugins()}>{(entry) => installedRow(entry)}</For>
+                </div>
+              </Show>
             </Show>
           </section>
         </Match>
@@ -1819,7 +1934,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 
       <footer class="ph-footer">
         <div class="ph-footer-note">
-          安装和移除只改配置，不会立即生效：插件与模型目录都是启动时快照的。改完点上方工具栏的「彻底重启」，应用会自动退出并重新打开。
+          安装和移除只改配置，不会立即生效：插件与模型目录都是启动时快照的。改完点工具栏的「彻底重启」，应用会自动退出并重新打开。
         </div>
       </footer>
     </div>