opencode-plugin-hub 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencode-plugin-hub",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Plugin manager for OpenCode Desktop: browse community plugins, search npm, inspect README and downloads, install and update without editing JSON.",
   "type": "module",
   "license": "MIT",

package/src/contract.ts

@@ -131,6 +131,8 @@ export const CatalogResult = Schema.Struct({
   entries: Schema.Array(CatalogEntry),
   /** `network`, `cache` or `builtin`. */
   source: Schema.String,
+  /** The registry URL the entries came from. Optional for older cached results. */
+  registry: Schema.optional(Schema.String),
   fetchedAt: Schema.Number,
   error: Schema.String,
 })

package/src/gui/catalog.ts

@@ -27,6 +27,8 @@ export interface CatalogResultValue {
   entries: CatalogEntryValue[]
   /** Where the list came from: `network`, `cache` or `builtin`. */
   source: string
+  /** The registry URL the entries came from. */
+  registry: string
   /** Epoch milliseconds of the data, 0 for the built-in snapshot. */
   fetchedAt: number
   error: string
@@ -129,7 +131,7 @@ function toEntries(raw: RawEntry[], installed: Set<string>): CatalogEntryValue[]
   return out
 }
 
-async function fetchRemote(): Promise<RawEntry[]> {
+async function fetchRemote(): Promise<{ entries: RawEntry[]; url: string }> {
   let lastError = ""
   for (const url of SOURCES) {
     try {
@@ -143,7 +145,7 @@ async function fetchRemote(): Promise<RawEntry[]> {
         lastError = "registry 格式不是数组"
         continue
       }
-      return body as RawEntry[]
+      return { entries: body as RawEntry[], url }
     } catch (error) {
       lastError = describe(error)
     }
@@ -153,6 +155,8 @@ async function fetchRemote(): Promise<RawEntry[]> {
 
 interface CacheFile {
   fetchedAt: number
+  /** The source URL that produced this cache. Older caches do not have it. */
+  url?: string
   entries: RawEntry[]
 }
 
@@ -167,11 +171,11 @@ async function readCache(): Promise<CacheFile | undefined> {
   }
 }
 
-async function writeCache(entries: RawEntry[]): Promise<number> {
+async function writeCache(entries: RawEntry[], url: string): Promise<number> {
   const fetchedAt = Date.now()
   try {
     await mkdir(cacheDir(), { recursive: true })
-    await writeFile(cacheFile(), JSON.stringify({ fetchedAt, entries }), "utf8")
+    await writeFile(cacheFile(), JSON.stringify({ fetchedAt, url, entries }), "utf8")
   } catch {
     // A failed cache write still leaves the in-memory result usable.
   }
@@ -186,17 +190,30 @@ export async function browse(installed: Set<string>, force: boolean): Promise<Ca
   const cache = await readCache()
   const fresh = cache !== undefined && Date.now() - cache.fetchedAt < TTL
   if (cache && fresh && !force) {
-    return { entries: toEntries(cache.entries, installed), source: "cache", fetchedAt: cache.fetchedAt, error: "" }
+    return {
+      entries: toEntries(cache.entries, installed),
+      source: "cache",
+      registry: cache.url ?? SOURCES[0]!,
+      fetchedAt: cache.fetchedAt,
+      error: "",
+    }
   }
   try {
     const remote = await fetchRemote()
-    const fetchedAt = await writeCache(remote)
-    return { entries: toEntries(remote, installed), source: "network", fetchedAt, error: "" }
+    const fetchedAt = await writeCache(remote.entries, remote.url)
+    return {
+      entries: toEntries(remote.entries, installed),
+      source: "network",
+      registry: remote.url,
+      fetchedAt,
+      error: "",
+    }
   } catch (error) {
     if (cache) {
       return {
         entries: toEntries(cache.entries, installed),
         source: "cache",
+        registry: cache.url ?? SOURCES[0]!,
         fetchedAt: cache.fetchedAt,
         error: describe(error),
       }
@@ -204,6 +221,7 @@ export async function browse(installed: Set<string>, force: boolean): Promise<Ca
     return {
       entries: toEntries(SNAPSHOT.map(toRaw), installed),
       source: "builtin",
+      registry: SOURCES[0]!,
       fetchedAt: 0,
       error: describe(error),
     }

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）再打开一次。"
@@ -173,7 +160,7 @@ const CSS = `
     radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ph-accent) 13%, transparent) 0%, transparent 52%),
     var(--ph-layer);
 }
-.ph-hero-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.ph-hero-copy { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
 .ph-kicker {
   display: flex;
   align-items: center;
@@ -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;
@@ -209,23 +211,6 @@ const CSS = `
   border-radius: 5px;
   background: var(--ph-layer-2);
 }
-.ph-hero-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
-.ph-stats {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(92px, 1fr));
-  gap: 8px;
-  align-content: center;
-}
-.ph-stat {
-  min-width: 92px;
-  padding: 10px 12px;
-  border: 1px solid var(--ph-border);
-  border-radius: 10px;
-  background: var(--ph-layer-2);
-}
-.ph-stat b { display: block; font-size: 18px; font-weight: 650; line-height: 1.2; color: var(--ph-strong); }
-.ph-stat span { font-size: 10.5px; color: var(--ph-muted); }
-.ph-stat[data-tone="accent"] b { color: var(--ph-accent); }
 
 /* notice */
 .ph-notice {
@@ -300,6 +285,11 @@ const CSS = `
   font-size: 9.5px;
   font-weight: 600;
 }
+.ph-count-alert {
+  background: color-mix(in srgb, var(--ph-accent) 14%, transparent);
+  color: var(--ph-accent);
+  white-space: nowrap;
+}
 .ph-tab[data-active="true"] .ph-count {
   background: color-mix(in srgb, var(--ph-accent) 16%, transparent);
   color: var(--ph-accent);
@@ -607,6 +597,26 @@ button.ph-chip:focus-visible,
   max-width: none;
   padding: 0 0 8px;
 }
+/* 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;
+}
 .ph-root[data-embedded="true"] .ph-toolbar {
   position: sticky;
   top: 0;
@@ -629,7 +639,6 @@ button.ph-chip:focus-visible,
 
 @media (max-width: 760px) {
   .ph-hero { flex-direction: column; }
-  .ph-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .ph-card { flex-wrap: wrap; }
   .ph-card-body { flex-basis: calc(100% - 50px); }
   .ph-actions { width: 100%; justify-content: flex-start; padding-left: 50px; }
@@ -1000,7 +1009,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) =>
@@ -1031,7 +1040,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)),
         )
@@ -1158,7 +1167,7 @@ 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 bySpec = (spec: string) => updates().get(spec)
   const byPackage = createMemo(() => {
@@ -1179,13 +1188,18 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
     void checkUpdates(true)
   })
 
-  const tabButton = (id: Tab, label: string, icon: IconName, count?: number | string) => (
+  const tabButton = (id: Tab, label: string, icon: IconName, count?: number | string, alert?: number) => (
     <button class="ph-tab" data-active={tab() === id} onClick={() => switchTab(id)}>
       <ui.Icon name={icon} size="small" />
       {label}
       <Show when={count !== undefined && count !== ""}>
         <span class="ph-count">{count}</span>
       </Show>
+      <Show when={alert !== undefined && alert > 0}>
+        <span class="ph-count ph-count-alert" title={`${alert} 个可更新`}>
+          {alert} 可更新
+        </span>
+      </Show>
     </button>
   )
 
@@ -1504,58 +1518,20 @@ 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>
           </div>
-          <div class="ph-hero-actions">
-            <ui.Button
-              variant="neutral"
-              size="small"
-              icon="open-file"
-              busy={isBusy("config")}
-              onClick={() => void openConfig()}
-            >
-              打开配置
-            </ui.Button>
-            <ui.Button
-              variant="ghost"
-              size="small"
-              icon="refresh"
-              busy={isBusy("reload")}
-              onClick={() => void reload()}
-            >
-              重载配置
-            </ui.Button>
-            <ui.Button
-              variant="ghost"
-              size="small"
-              icon="outline-rotate-clockwise"
-              busy={isBusy("restart")}
-              onClick={() => void restartApp()}
-            >
-              彻底重启
-            </ui.Button>
-          </div>
-        </div>
-        <div class="ph-stats">
-          <div class="ph-stat">
-            <b>{state()?.plugins.length ?? "—"}</b>
-            <span>已安装</span>
-          </div>
-          <div class="ph-stat" data-tone={outdated() > 0 ? "accent" : ""}>
-            <b>{checked() ? outdated() : "—"}</b>
-            <span>可更新</span>
-          </div>
-          <div class="ph-stat">
-            <b>{meta() ? catalog().length : "—"}</b>
-            <span>精选条目</span>
-          </div>
-          <div class="ph-stat">
-            <b>{meta() ? catalog().filter((entry) => entry.pkg).length : "—"}</b>
-            <span>可直接安装</span>
-          </div>
         </div>
       </section>
 
@@ -1577,20 +1553,36 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
         <div class="ph-tabs" role="tablist">
           {tabButton("catalog", "精选目录", "extensions", meta() ? catalog().length : undefined)}
           {tabButton("search", "npm 搜索", "magnifying-glass", searched() ? hits().length : undefined)}
-          {tabButton("installed", "已安装", "checklist", state()?.plugins.length ?? 0)}
+          {tabButton("installed", "已安装", "checklist", state()?.plugins.length ?? 0, outdated())}
         </div>
         <span class="ph-spacer" />
-        <Show when={props.embedded}>
-          <ui.Button
-            variant="ghost"
-            size="small"
-            icon="open-file"
-            busy={isBusy("config")}
-            onClick={() => void openConfig()}
-          >
-            配置
-          </ui.Button>
-        </Show>
+        <ui.Button
+          variant="ghost"
+          size="small"
+          icon="open-file"
+          busy={isBusy("config")}
+          onClick={() => void openConfig()}
+        >
+          打开配置
+        </ui.Button>
+        <ui.Button
+          variant="ghost"
+          size="small"
+          icon="refresh"
+          busy={isBusy("reload")}
+          onClick={() => void reload()}
+        >
+          重载配置
+        </ui.Button>
+        <ui.Button
+          variant="neutral"
+          size="small"
+          icon="outline-rotate-clockwise"
+          busy={isBusy("restart")}
+          onClick={() => void restartApp()}
+        >
+          彻底重启
+        </ui.Button>
         <Show when={tab() === "catalog"}>
           <ui.Button
             variant="ghost"
@@ -1639,7 +1631,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()}
@@ -1667,17 +1659,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}>
@@ -1824,7 +1805,7 @@ 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>
               }
             >
@@ -1838,7 +1819,7 @@ export function PluginHubPage(props: { ctx: Context; admin: AdminClient; embedde
 
       <footer class="ph-footer">
         <div class="ph-footer-note">
-          安装和移除只改配置，不会立即生效：插件与模型目录都是启动时快照的。改完点顶部的「彻底重启」，应用会自动退出并重新打开。
+          安装和移除只改配置，不会立即生效：插件与模型目录都是启动时快照的。改完点上方工具栏的「彻底重启」，应用会自动退出并重新打开。
         </div>
       </footer>
     </div>
@@ -1848,11 +1829,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>