opencode-plugin-hub 0.1.1 → 0.1.3

package/src/gui/page.tsx

@@ -17,11 +17,8 @@ type Note = { text: string; tone: Tone }
 
 const PAGE = 24
 
-const SOURCE_LABEL: Record<string, string> = {
-  network: "社区目录 · 已更新",
-  cache: "社区目录 · 本地缓存",
-  builtin: "社区目录 · 内置快照",
-}
+const CATALOG_SOURCE_FALLBACK = "https://github.com/awesome-opencode/awesome-opencode"
+const CATALOG_SOURCE_TITLE = "精选目录来自 awesome-opencode 社区维护的 registry.json，不是 OpenCode 官方推荐"
 
 const TYPE_LABEL: Record<string, string> = {
   plugins: "插件",
@@ -72,16 +69,6 @@ function relativeDate(value: string): string {
   return `${Math.floor(days / 365)} 年前`
 }
 
-function formatDate(epoch: number): string {
-  if (!epoch) return ""
-  return new Date(epoch).toLocaleString("zh-CN", {
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  })
-}
-
 function initial(name: string): string {
   const base = name.replace(/^@/, "").split("/").pop() ?? name
   const cleaned = base.replace(/^opencode[-_]?/i, "")
@@ -115,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）再打开一次。"
@@ -195,7 +182,22 @@ const CSS = `
   font-size: 12px;
   line-height: 1.6;
   color: var(--ph-muted);
-  max-width: 54ch;
+  max-width: 72ch;
+}
+.ph-inline-source {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ph-accent);
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+}
+.ph-inline-source:hover { text-decoration: underline; }
+.ph-inline-source:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ph-accent) 55%, transparent);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
 .ph-path {
   overflow: hidden;
@@ -346,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);
@@ -362,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;
@@ -407,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 {
@@ -469,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 */
@@ -595,10 +650,36 @@ button.ph-chip:focus-visible,
   max-width: none;
   padding: 0 0 8px;
 }
-.ph-root[data-embedded="true"] .ph-toolbar {
+/* The host caps "x-large" at 980x600. Give the standalone hub more room and
+   let the dialog be resized from its bottom-right corner, within the window. */
+[data-component="dialog-v2"][data-size="x-large"]:has(.ph-root[data-embedded="true"]) [data-slot="dialog-container"] {
+  width: min(100vw - 48px, 1180px);
+  height: min(100vh - 88px, 780px);
+  min-width: min(100vw - 48px, 720px);
+  min-height: min(100vh - 88px, 480px);
+  max-width: calc(100vw - 24px);
+  max-height: calc(100vh - 24px);
+  resize: both;
+}
+[data-component="dialog-v2"][data-size="x-large"]:has(.ph-detail) [data-slot="dialog-container"] {
+  width: min(100vw - 48px, 1180px);
+  height: min(100vh - 88px, 780px);
+  min-width: min(100vw - 48px, 720px);
+  min-height: min(100vh - 88px, 480px);
+  max-width: calc(100vw - 24px);
+  max-height: calc(100vh - 24px);
+  resize: both;
+}
+/* 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);
@@ -617,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)); }
 }
 `
@@ -885,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>()
@@ -987,7 +1067,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) =>
@@ -1018,7 +1098,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)),
         )
@@ -1145,8 +1225,13 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
     return list
   })
 
-  const installable = createMemo(() => visible().filter((entry) => entry.pkg).length)
+  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>()
@@ -1156,6 +1241,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)
   }
@@ -1193,6 +1280,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,
@@ -1200,54 +1288,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">
@@ -1269,7 +1365,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)}
             >
               更新
@@ -1280,7 +1376,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)}
             >
               安装
@@ -1304,71 +1400,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="源码仓库">
@@ -1413,35 +1508,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">
@@ -1460,7 +1564,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)}
             >
               更新
@@ -1471,7 +1575,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)}
             >
               移除
@@ -1496,7 +1600,16 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
             <h2 class="ph-title">插件中心</h2>
           </Show>
           <p class="ph-sub">
-            浏览社区精选、搜索 npm 上的 OpenCode 插件。安装前先看下载量、README 和主页，确认它到底能做什么。
+            浏览{" "}
+            <button
+              type="button"
+              class="ph-inline-source"
+              title={CATALOG_SOURCE_TITLE}
+              onClick={() => void openUrl(registryUrl())}
+            >
+              awesome-opencode
+            </button>{" "}
+            社区维护的精选目录、搜索 npm 上的 OpenCode 插件。安装前先看下载量、README 和主页，确认它到底能做什么。
           </p>
           <div class="ph-path" title={state()?.configPath}>
             配置：<code>{state()?.configPath ?? "读取中…"}</code> · <code>{state()?.configKey ?? "plugins"}[]</code>
@@ -1504,21 +1617,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)}
@@ -1590,7 +1704,8 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
           >
             检查更新
           </ui.Button>
-        </Show>
+          </Show>
+        </div>
       </div>
 
       <Switch>
@@ -1600,7 +1715,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
               <div class="ph-filter-row">
                 <div class="ph-grow">
                   <ui.TextInput
-                    label="筛选社区精选插件"
+                    label="筛选 awesome-opencode 精选插件"
                     placeholder="按名称、描述或标签筛选，例如 memory / auth / token"
                     type="search"
                     value={filter()}
@@ -1628,17 +1743,6 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
                   </For>
                 </div>
               </div>
-              <div class="ph-meta">
-                <span>{SOURCE_LABEL[meta()?.source ?? ""] ?? "加载中…"}</span>
-                <span class="ph-dot" />
-                <span>
-                  {catalog().length} 个条目 · {installable()} 个可安装
-                </span>
-                <Show when={meta()?.fetchedAt}>
-                  <span class="ph-dot" />
-                  <span>更新于 {formatDate(meta()!.fetchedAt)}</span>
-                </Show>
-              </div>
             </div>
 
             <Show when={isBusy("catalog") && catalog().length === 0}>
@@ -1773,6 +1877,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()} 个可更新` : " · 全部已是最新"}
@@ -1785,13 +1904,27 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
                 <div class="ph-empty">
                   <ui.Icon name="extensions" size="large" />
                   <strong>还没有安装插件</strong>
-                  <span>去「精选目录」看看社区推荐，或者在「npm 搜索」里找长尾插件。</span>
+                  <span>去「精选目录」看看 awesome-opencode 的推荐，或者在「npm 搜索」里找长尾插件。</span>
                 </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>
@@ -1799,7 +1932,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 
       <footer class="ph-footer">
         <div class="ph-footer-note">
-          安装和移除只改配置，不会立即生效：插件与模型目录都是启动时快照的。改完点上方工具栏的「彻底重启」，应用会自动退出并重新打开。
+          安装和移除只改配置，不会立即生效：插件与模型目录都是启动时快照的。改完点工具栏的「彻底重启」，应用会自动退出并重新打开。
         </div>
       </footer>
     </div>
@@ -1809,11 +1942,24 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 /** The standalone x-large dialog opened from the titlebar pill and the ⌘⌥P shortcut. */
 export function PluginHubDialog(props: { ctx: Context; admin: AdminClient; onClose: () => void }) {
   const ui = props.ctx.ui
+  const openSettings = () => {
+    props.onClose()
+    // Let the dialog unmount before the host swaps in the Settings view.
+    setTimeout(() => props.ctx.layout.settings("hub"), 0)
+  }
   return (
     <ui.Dialog
       title="插件中心"
       size="x-large"
-      footer={<ui.Button onClick={props.onClose}>关闭</ui.Button>}
+      footer={
+        <div class="ph-dialog-footer">
+          <span class="ph-footer-note">拖动右下角可调整大小</span>
+          <ui.Button size="small" variant="ghost" icon="settings-gear" onClick={openSettings}>
+            在设置中打开
+          </ui.Button>
+          <ui.Button size="small" onClick={props.onClose}>关闭</ui.Button>
+        </div>
+      }
     >
       <PluginHubPage ctx={props.ctx} admin={props.admin} embedded />
     </ui.Dialog>