reasonix 0.26.1 → 0.27.0

package/README.md

@@ -118,6 +118,14 @@ Scoped starter tickets — each with background, code pointers, acceptance crite
 - [#21 · Dashboard design](https://github.com/esengine/reasonix/discussions/21) — react against the [proposed mockup](https://esengine.github.io/reasonix/design/agent-dashboard.html)
 - [#22 · Future feature wishlist](https://github.com/esengine/reasonix/discussions/22) — what would you build into Reasonix next?
 
+**Already using Reasonix and willing to help others discover it?** Publish blog posts, articles, screenshots, talks, or videos to [**Show and tell**](https://github.com/esengine/reasonix/discussions/categories/show-and-tell). The project has no marketing budget — community word of mouth is how new users find it. Sustained advocates earn the badge below, displayed next to the contributors wall once awarded:
+
+<p align="center">
+  <a href="https://github.com/esengine/reasonix/discussions/categories/show-and-tell">
+    <img src="https://img.shields.io/badge/REASONIX-📣%20ADVOCATE-c4b5fd?style=for-the-badge&labelColor=0d1117" alt="Reasonix Advocate badge — earned by sustained advocates"/>
+  </a>
+</p>
+
 **Before your first PR**: read [`CONTRIBUTING.md`](./CONTRIBUTING.md) — short, strict rules (comments, errors, libraries-over-hand-rolled). `tests/comment-policy.test.ts` enforces the comment ones; `npm run verify` is the pre-push gate. By participating you agree to the [Code of Conduct](./CODE_OF_CONDUCT.md). Security issues → [SECURITY.md](./SECURITY.md).
 
 <p align="center">

package/README.zh-CN.md

@@ -118,6 +118,14 @@ npx reasonix code   # 首次运行粘贴 DeepSeek API Key，之后会记住
 - [#21 · Dashboard 设计](https://github.com/esengine/reasonix/discussions/21) —— 对着[设计稿](https://esengine.github.io/reasonix/design/agent-dashboard.html)拍砖
 - [#22 · 未来功能愿望单](https://github.com/esengine/reasonix/discussions/22) —— 你希望 Reasonix 长出什么功能？
 
+**正在使用 Reasonix，愿意让更多人了解它？** 欢迎将相关博客、文章、截图、演讲或视频发布到 [**Show and tell**](https://github.com/esengine/reasonix/discussions/categories/show-and-tell)。项目没有营销预算，新用户主要通过社区口碑找到这里。持续参与传播的用户将获得下方这枚徽章，颁发后会展示在贡献者墙旁：
+
+<p align="center">
+  <a href="https://github.com/esengine/reasonix/discussions/categories/show-and-tell">
+    <img src="https://img.shields.io/badge/REASONIX-📣%20ADVOCATE-c4b5fd?style=for-the-badge&labelColor=0d1117" alt="Reasonix Advocate 徽章 —— 授予持续参与传播的用户"/>
+  </a>
+</p>
+
 **第一次提 PR 之前**：先读 [`CONTRIBUTING.md`](./CONTRIBUTING.md) —— 短小、严格的项目规则（注释、错误处理、用现成库不手写）。`tests/comment-policy.test.ts` 静态强制执行注释那部分，`npm run verify` 是 push 前的闸。参与本项目即同意 [行为准则](./CODE_OF_CONDUCT.md)。安全相关问题请走 [SECURITY.md](./SECURITY.md)。
 
 <p align="center">

package/dashboard/app.css

@@ -690,8 +690,19 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
 .crumbs .sep { color: var(--fg-4); }
 
 /* ── Sessions panel ──────────────────────────────────────────────────── */
-.sessions-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; min-height: 540px; }
-.sessions-list { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; }
+.sessions-grid {
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr);
+  /* `minmax(0, 1fr)` on the row + `min-height: 0` on the children is the
+     standard recipe for "let the inner overflow:auto take effect" — without
+     it the grid items default to min-height: auto (= content size) and
+     grow past the parent's max-height, dragging .app-body along. */
+  grid-template-rows: minmax(0, 1fr);
+  gap: 14px;
+  min-height: 540px;
+  max-height: calc(100vh - 140px);
+}
+.sessions-list { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; min-height: 0; min-width: 0; }
 .sessions-list .ssl-h { padding: 10px 12px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; gap: 8px; }
 .sessions-list .ssl-h input {
   flex: 1; background: var(--bg-input); border: 1px solid var(--bd); border-radius: var(--r);
@@ -710,7 +721,7 @@ main { padding: 32px 40px 60px 32px; min-width: 0; }
 .ssl-row .meta { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4); margin-top: 2px; }
 .ssl-row .meta .v { color: var(--fg-2); }
 
-.sessions-detail { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 14px 16px; overflow: auto; }
+.sessions-detail { background: var(--bg-elev); border: 1px solid var(--bd); border-radius: var(--r); padding: 14px 16px; overflow: auto; min-height: 0; min-width: 0; }
 .sessions-detail-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bd); }
 .sessions-detail-h .name { font-family: var(--font-mono); font-size: 14px; color: var(--fg-0); font-weight: 600; }
 .sessions-detail-h .ws   { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }

package/dashboard/dist/app.js

@@ -19013,7 +19013,33 @@ var en = {
     promptsTitle: "Prompts \xB7 {count}",
     colName: "name",
     colDesc: "description",
-    colUri: "uri"
+    colUri: "uri",
+    marketplace: "marketplace",
+    marketplaceSearch: "search the registry\u2026",
+    marketplaceLoading: "loading registry\u2026",
+    marketplaceMore: "load 5 more pages",
+    marketplaceMoreLabel: "load 50 more  \xB7  showing {shown} / {total}",
+    marketplaceMoreHint: "fetches more pages from the registry",
+    marketplaceMoreCachedHint: "more entries already cached locally",
+    marketplaceExhausted: "all pages loaded",
+    marketplaceExhaustedFull: "showing all {total} entries \u2014 registry exhausted",
+    marketplaceCount: "{loaded} loaded \xB7 {matched} match \xB7 source: {source}{cached}",
+    marketplaceCachedSuffix: " \xB7 cached",
+    marketplaceNoMatches: "No matches. Try different terms or load more pages.",
+    marketplaceInstall: "Install",
+    marketplacePickHint: "Pick a server on the left, then Install.",
+    marketplaceInstalled: "installed \u2192 {spec}",
+    marketplaceInstalledBridged: "installed + bridged \u2192 {spec}",
+    marketplaceAlready: "already installed",
+    marketplaceNeedsEnv: "needs env: {names}",
+    marketplaceSourceTag: "[{source}]",
+    marketplaceNoInstall: "smithery listing \u2014 install metadata not exposed; use `npx -y @smithery/cli install {name}` directly",
+    marketplaceFetchOnInstall: "Smithery listing \u2014 install detail fetched on Install. http servers map to streamable-http remotes; stdio servers run via @smithery/cli.",
+    marketplaceInstalledBadge: "installed",
+    marketplaceUninstall: "Uninstall",
+    marketplaceEnvTitle: "Required environment variables",
+    marketplaceEnvHint: "Set these in your shell before next `reasonix code` so the bridged server can authenticate.",
+    marketplaceRestartHint: "Spec written to ~/.reasonix/config.json. Restart `reasonix code` to bridge the server (live hot-reload is on the roadmap)."
   },
   memory: {
     loading: "loading memory\u2026",
@@ -19500,7 +19526,33 @@ var zhCN = {
     promptsTitle: "\u63D0\u793A \xB7 {count}",
     colName: "\u540D\u79F0",
     colDesc: "\u63CF\u8FF0",
-    colUri: "URI"
+    colUri: "URI",
+    marketplace: "\u5E02\u573A",
+    marketplaceSearch: "\u641C\u7D22\u6CE8\u518C\u8868\u2026",
+    marketplaceLoading: "\u52A0\u8F7D\u6CE8\u518C\u8868\u2026",
+    marketplaceMore: "\u518D\u52A0\u8F7D 5 \u9875",
+    marketplaceMoreLabel: "\u518D\u52A0\u8F7D 50 \u6761  \xB7  \u5F53\u524D {shown} / {total}",
+    marketplaceMoreHint: "\u9700\u8981\u4ECE\u8FDC\u7AEF\u6CE8\u518C\u8868\u518D\u62C9\u51E0\u9875",
+    marketplaceMoreCachedHint: "\u672C\u5730\u7F13\u5B58\u5DF2\u6709\u66F4\u591A\u6761\u76EE",
+    marketplaceExhausted: "\u5DF2\u52A0\u8F7D\u5168\u90E8\u9875",
+    marketplaceExhaustedFull: "\u5DF2\u5C55\u793A\u5168\u90E8 {total} \u6761 \u2014 \u6CE8\u518C\u8868\u8017\u5C3D",
+    marketplaceCount: "\u5DF2\u8F7D\u5165 {loaded} \xB7 \u5339\u914D {matched} \xB7 \u6765\u6E90\uFF1A{source}{cached}",
+    marketplaceCachedSuffix: " \xB7 \u7F13\u5B58\u4E2D",
+    marketplaceNoMatches: "\u65E0\u5339\u914D\u7ED3\u679C\u3002\u6362\u5173\u952E\u8BCD\u6216\u52A0\u8F7D\u66F4\u591A\u9875\u3002",
+    marketplaceInstall: "\u5B89\u88C5",
+    marketplacePickHint: "\u5728\u5DE6\u4FA7\u9009\u62E9\u670D\u52A1\u5668\uFF0C\u7136\u540E\u70B9\u5B89\u88C5\u3002",
+    marketplaceInstalled: "\u5DF2\u5B89\u88C5 \u2192 {spec}",
+    marketplaceInstalledBridged: "\u5DF2\u5B89\u88C5\u5E76\u6865\u63A5 \u2192 {spec}",
+    marketplaceAlready: "\u5DF2\u5B89\u88C5\u8FC7",
+    marketplaceNeedsEnv: "\u9700\u8BBE\u7F6E\u73AF\u5883\u53D8\u91CF\uFF1A{names}",
+    marketplaceSourceTag: "[{source}]",
+    marketplaceNoInstall: "Smithery \u5217\u8868\u9879 \u2014 \u4E0D\u66B4\u9732\u5B89\u88C5\u5143\u6570\u636E\uFF1B\u8BF7\u76F4\u63A5 `npx -y @smithery/cli install {name}`",
+    marketplaceFetchOnInstall: "Smithery \u5217\u8868 \u2014 \u5B89\u88C5\u65F6\u518D\u62C9\u8BE6\u60C5\u3002HTTP \u670D\u52A1\u6620\u5C04\u4E3A streamable-http \u8FDC\u7AEF\uFF1Bstdio \u670D\u52A1\u901A\u8FC7 @smithery/cli \u8FD0\u884C\u3002",
+    marketplaceInstalledBadge: "\u5DF2\u5B89\u88C5",
+    marketplaceUninstall: "\u5378\u8F7D",
+    marketplaceEnvTitle: "\u5FC5\u9700\u7684\u73AF\u5883\u53D8\u91CF",
+    marketplaceEnvHint: "\u4E0B\u6B21\u542F\u52A8 `reasonix code` \u4E4B\u524D\u5728 shell \u91CC\u8BBE\u597D\uFF0C\u6865\u63A5\u7684\u670D\u52A1\u5668\u624D\u80FD\u6B63\u5E38\u9274\u6743\u3002",
+    marketplaceRestartHint: "\u5DF2\u5199\u5165 ~/.reasonix/config.json\u3002\u91CD\u542F `reasonix code` \u540E\u670D\u52A1\u5668\u624D\u4F1A\u771F\u6B63\u6865\u63A5\uFF08\u70ED\u91CD\u8F7D\u5728\u8DEF\u7EBF\u56FE\u4E0A\uFF09\u3002"
   },
   memory: {
     loading: "\u52A0\u8F7D\u8BB0\u5FC6\u2026",
@@ -23432,6 +23484,24 @@ function HooksPanel() {
 }
 
 // dashboard/src/panels/mcp.ts
+function specForEntry(e3) {
+  if (!e3.install) return null;
+  const localName = e3.name.split("/").pop() ?? e3.name;
+  const safe = localName.replace(/[^a-zA-Z0-9_-]/g, "-").replace(/^-+|-+$/g, "") || "mcp";
+  const trail = e3.install.extraArgs?.length ? ` ${e3.install.extraArgs.join(" ")}` : "";
+  if (e3.install.runtime === "remote" && e3.install.url) {
+    if (e3.install.transport === "streamable-http") return `${safe}=streamable+${e3.install.url}`;
+    return `${safe}=${e3.install.url}`;
+  }
+  if (e3.install.runtime === "npm" && e3.install.packageId) {
+    const pinned = e3.install.version ? `${e3.install.packageId}@${e3.install.version}` : e3.install.packageId;
+    return `${safe}=npx -y ${pinned}${trail}`;
+  }
+  if (e3.install.runtime === "pypi" && e3.install.packageId) {
+    return `${safe}=uvx ${e3.install.packageId}${trail}`;
+  }
+  return null;
+}
 function specLabel(spec) {
   const eq = spec.indexOf("=");
   return eq > 0 ? spec.slice(0, eq) : spec;
@@ -23451,6 +23521,57 @@ function McpPanel() {
   const [open, setOpen] = p2(null);
   const [openUnbridged, setOpenUnbridged] = p2(null);
   const [filter, setFilter] = p2("all");
+  const [registry, setRegistry] = p2(null);
+  const [registryQuery, setRegistryQuery] = p2("");
+  const [registryLoading, setRegistryLoading] = p2(false);
+  const [openRegistry, setOpenRegistry] = p2(null);
+  const [displayLimit, setDisplayLimit] = p2(50);
+  const loadRegistry = x2(async (q3, pages, limit) => {
+    setRegistryLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (q3.trim()) params.set("q", q3.trim());
+      params.set("pages", String(pages));
+      params.set("maxPages", String(Math.max(20, pages)));
+      params.set("limit", String(limit));
+      const r3 = await api(`/mcp/registry?${params.toString()}`);
+      setRegistry(r3);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setRegistryLoading(false);
+    }
+  }, []);
+  _2(() => {
+    if (filter !== "marketplace") return;
+    if (registry) return;
+    void loadRegistry("", 1, displayLimit);
+  }, [filter, registry, loadRegistry, displayLimit]);
+  _2(() => {
+    if (filter !== "marketplace") return;
+    setDisplayLimit(50);
+    const handle = setTimeout(() => void loadRegistry(registryQuery, 1, 50), 300);
+    return () => clearTimeout(handle);
+  }, [registryQuery, filter, loadRegistry]);
+  const installFromRegistry = x2(async (entry) => {
+    setBusy(true);
+    try {
+      const r3 = await api("/mcp/registry/install", { method: "POST", body: { name: entry.name } });
+      if (r3.alreadyPresent) {
+        setInfo(t4("mcp.marketplaceAlready"));
+      } else if (r3.bridged) {
+        setInfo(t4("mcp.marketplaceInstalledBridged", { spec: r3.spec }));
+      } else {
+        setInfo(t4("mcp.marketplaceInstalled", { spec: r3.spec }));
+      }
+      setTimeout(() => setInfo(null), 5e3);
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
   const load = x2(async () => {
     try {
       setData(await api("/mcp"));
@@ -23470,9 +23591,7 @@ function McpPanel() {
         method: "POST",
         body: { spec: newSpec.trim() }
       });
-      setInfo(
-        r3.requiresRestart ? t4("mcp.savedRestart") : t4("mcp.saved")
-      );
+      setInfo(r3.requiresRestart ? t4("mcp.savedRestart") : t4("mcp.saved"));
       setTimeout(() => setInfo(null), 4e3);
       setNewSpec("");
       await load();
@@ -23499,14 +23618,16 @@ function McpPanel() {
     },
     [load]
   );
-  if (!data && !error) return html4`<div class="card" style="color:var(--fg-3)">${t4("mcp.loading")}</div>`;
+  if (!data && !error)
+    return html4`<div class="card" style="color:var(--fg-3)">${t4("mcp.loading")}</div>`;
   if (error && !data) return html4`<div class="card accent-err">${error}</div>`;
   if (!data) return null;
   const liveCount = data.servers.length;
   const unbridgedSpecs = (specs ?? []).filter((spec) => !data.servers.some((s3) => s3.spec === spec));
   const unbridgedCount = unbridgedSpecs.length;
-  const showLive = filter !== "unbridged";
-  const showUnbridged = filter !== "live";
+  const showLive = filter === "all" || filter === "live";
+  const showUnbridged = filter === "all" || filter === "unbridged";
+  const showMarketplace = filter === "marketplace";
   return html4`
     <div class="sessions-grid">
       <div class="sessions-list">
@@ -23518,25 +23639,63 @@ function McpPanel() {
             <span class=${`chip-f ${filter === "all" ? "active" : ""}`} onClick=${() => setFilter("all")}>${t4("mcp.all")} <span class="ct">${liveCount + unbridgedCount}</span></span>
             <span class=${`chip-f ${filter === "live" ? "active" : ""}`} onClick=${() => setFilter("live")}>${t4("mcp.live")} <span class="ct">${liveCount}</span></span>
             <span class=${`chip-f ${filter === "unbridged" ? "active" : ""}`} onClick=${() => setFilter("unbridged")}>${t4("mcp.unbridged")} <span class="ct">${unbridgedCount}</span></span>
+            <span class=${`chip-f ${filter === "marketplace" ? "active" : ""}`} onClick=${() => setFilter("marketplace")}>${t4("mcp.marketplace")}</span>
           </div>
         </div>
-        <div style="padding:8px 12px;display:flex;gap:6px">
-          <input
-            type="text"
-            placeholder=${t4("mcp.specPlaceholder")}
-            value=${newSpec}
-            onInput=${(e3) => setNewSpec(e3.target.value)}
-            style="flex:1;font-size:11px"
-          />
-          <button class="btn primary" disabled=${busy || !newSpec.trim()} onClick=${addSpec}>+</button>
-        </div>
+        ${showMarketplace ? html4`
+              <div style="padding:8px 12px;display:flex;gap:6px">
+                <input
+                  type="text"
+                  placeholder=${t4("mcp.marketplaceSearch")}
+                  value=${registryQuery}
+                  onInput=${(e3) => setRegistryQuery(e3.target.value)}
+                  style="flex:1;font-size:11px"
+                />
+              </div>
+              ${registry ? html4`<div style="padding:0 12px 6px;font-size:11px;color:var(--fg-3)">
+                      ${t4("mcp.marketplaceCount", {
+    loaded: registry.loaded,
+    matched: registry.matched,
+    source: registry.source,
+    cached: registry.fromCache ? t4("mcp.marketplaceCachedSuffix") : ""
+  })}
+                    </div>` : null}
+            ` : html4`
+              <div style="padding:8px 12px;display:flex;gap:6px">
+                <input
+                  type="text"
+                  placeholder=${t4("mcp.specPlaceholder")}
+                  value=${newSpec}
+                  onInput=${(e3) => setNewSpec(e3.target.value)}
+                  style="flex:1;font-size:11px"
+                />
+                <button class="btn primary" disabled=${busy || !newSpec.trim()} onClick=${addSpec}>+</button>
+              </div>
+            `}
         ${info ? html4`<div style="padding:0 12px 8px"><span class="pill ok">${info}</span></div>` : null}
         ${error ? html4`<div class="card accent-err" style="margin:0 12px 8px">${error}</div>` : null}
 
         <div class="ssl-rows">
-          ${liveCount === 0 && unbridgedCount === 0 ? html4`<div style="color:var(--fg-3);padding:14px;font-size:12px">
+          ${!showMarketplace && liveCount === 0 && unbridgedCount === 0 ? html4`<div style="color:var(--fg-3);padding:14px;font-size:12px">
                 ${t4("mcp.noServers")}
               </div>` : null}
+          ${showMarketplace ? renderMarketplaceRows({
+    registry,
+    registryLoading,
+    openRegistry,
+    setOpenRegistry: (e3) => {
+      setOpenRegistry(e3);
+      setOpen(null);
+      setOpenUnbridged(null);
+    },
+    loadMore: () => {
+      const nextLimit = displayLimit + 50;
+      setDisplayLimit(nextLimit);
+      const pagesNeeded = Math.ceil(nextLimit / 30) + 3;
+      void loadRegistry(registryQuery, pagesNeeded, nextLimit);
+    },
+    installedSpecs: new Set(specs ?? [])
+  }) : null}
           ${showLive ? data.servers.map(
     (s3) => html4`
                   <div
@@ -23571,7 +23730,17 @@ function McpPanel() {
       </div>
 
       <div class="sessions-detail">
-        ${openUnbridged != null ? html4`
+        ${openRegistry != null ? renderRegistryDetail({
+    entry: openRegistry,
+    busy,
+    installedSpec: (() => {
+      const spec = specForEntry(openRegistry);
+      return spec && (specs ?? []).includes(spec) ? spec : null;
+    })(),
+    onInstall: () => installFromRegistry(openRegistry),
+    onUninstall: (spec) => removeSpec(spec),
+    onClose: () => setOpenRegistry(null)
+  }) : openUnbridged != null ? html4`
               <div class="sessions-detail-h">
                 <span class="name">${specLabel(openUnbridged)}</span>
                 <span class="ws"><span class="pill">${t4("mcp.unbridgedTitle")}</span></span>
@@ -23595,7 +23764,7 @@ function McpPanel() {
                 </div>
               </div>
             ` : open == null ? html4`<div style="color:var(--fg-3);font-size:13px;text-align:center;padding:60px 20px">
-                ${t4("mcp.pickHint")}
+                ${showMarketplace ? t4("mcp.marketplacePickHint") : t4("mcp.pickHint")}
               </div>` : html4`
                 <div class="sessions-detail-h">
                   <span class="name">${open.label}</span>
@@ -23664,6 +23833,131 @@ function McpPanel() {
     </div>
   `;
 }
+function renderLoadMoreFooter({
+  registry,
+  registryLoading,
+  loadMore
+}) {
+  if (!registry) return null;
+  const shown = registry.entries.length;
+  const total = registry.matched;
+  const moreCached = total > shown;
+  const moreOnNetwork = registry.hasMore;
+  const canDoSomething = moreCached || moreOnNetwork;
+  if (canDoSomething) {
+    const label = registryLoading ? t4("mcp.marketplaceLoading") : t4("mcp.marketplaceMoreLabel", {
+      shown,
+      total: moreOnNetwork ? `${total}+` : `${total}`
+    });
+    return html4`<div style="padding:10px 12px;display:flex;align-items:center;gap:10px">
+      <button class="btn primary" disabled=${registryLoading} onClick=${loadMore}>${label}</button>
+      <span style="font-size:11px;color:var(--fg-3)">
+        ${moreOnNetwork ? t4("mcp.marketplaceMoreHint") : t4("mcp.marketplaceMoreCachedHint")}
+      </span>
+    </div>`;
+  }
+  return html4`<div style="padding:12px;background:var(--bg-elev-2,rgba(36,143,242,0.07));border-top:1px solid var(--bd);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-2)">
+    <span style="color:var(--c-ok)">✓</span>
+    <span>${t4("mcp.marketplaceExhaustedFull", { total })}</span>
+  </div>`;
+}
+function renderMarketplaceRows({
+  registry,
+  registryLoading,
+  openRegistry,
+  setOpenRegistry,
+  loadMore,
+  installedSpecs
+}) {
+  if (!registry && registryLoading) {
+    return html4`<div style="color:var(--fg-3);padding:14px;font-size:12px">${t4("mcp.marketplaceLoading")}</div>`;
+  }
+  if (!registry || registry.entries.length === 0) {
+    return html4`<div style="color:var(--fg-3);padding:14px;font-size:12px">${t4("mcp.marketplaceNoMatches")}</div>`;
+  }
+  return html4`
+    ${registry.entries.map((e3) => {
+    const sel = openRegistry?.name === e3.name;
+    const tag2 = t4("mcp.marketplaceSourceTag", { source: e3.source });
+    const spec = specForEntry(e3);
+    const installed = spec !== null && installedSpecs.has(spec);
+    const pop = e3.popularity !== void 0 ? html4` <span class="dim">· ${fmtNum(e3.popularity)}</span>` : null;
+    const icon = e3.iconUrl ? html4`<img src=${e3.iconUrl} alt="" style="width:16px;height:16px;border-radius:3px;margin-right:6px;vertical-align:middle;object-fit:cover" loading="lazy" referrerpolicy="no-referrer" onError=${(ev) => ev.target.style.display = "none"} />` : null;
+    return html4`
+        <div class=${`ssl-row ${sel ? "sel" : ""}`} onClick=${() => setOpenRegistry(e3)}>
+          <span class="name">${icon}${e3.name} <span class="pill">${tag2}</span>${installed ? html4` <span class="pill ok">${t4("mcp.marketplaceInstalledBadge")}</span>` : null}</span>
+          <span class="preview">${e3.description}</span>
+          <span class="meta">${pop}</span>
+        </div>
+      `;
+  })}
+    ${renderLoadMoreFooter({ registry, registryLoading, loadMore })}
+  `;
+}
+function renderRegistryDetail({
+  entry,
+  busy,
+  installedSpec,
+  onInstall,
+  onUninstall,
+  onClose
+}) {
+  const installable = !!entry.install || entry.source === "smithery";
+  const installed = installedSpec !== null;
+  const specPreview = entry.install ? `${entry.install.runtime} \xB7 ${entry.install.transport}${entry.install.packageId ? ` \xB7 ${entry.install.packageId}` : entry.install.url ? ` \xB7 ${entry.install.url}` : ""}${entry.install.version ? `@${entry.install.version}` : ""}` : "";
+  const icon = entry.iconUrl ? html4`<img src=${entry.iconUrl} alt="" style="width:24px;height:24px;border-radius:4px;margin-right:8px;vertical-align:middle;object-fit:cover" loading="lazy" referrerpolicy="no-referrer" onError=${(ev) => ev.target.style.display = "none"} />` : null;
+  return html4`
+    <div class="sessions-detail-h">
+      <span class="name">${icon}${entry.name}${installed ? html4` <span class="pill ok">${t4("mcp.marketplaceInstalledBadge")}</span>` : null}</span>
+      <span class="ws">${t4("mcp.marketplaceSourceTag", { source: entry.source })}${entry.popularity !== void 0 ? ` \xB7 ${fmtNum(entry.popularity)} uses` : ""}${entry.homepage ? html4` · <a href=${entry.homepage} target="_blank" rel="noopener noreferrer">homepage</a>` : ""}</span>
+      <span class="actions">
+        ${installed ? html4`<button
+                class="btn"
+                disabled=${busy}
+                onClick=${() => onUninstall(installedSpec)}
+                style="border-color:var(--c-err);color:var(--c-err)"
+              >${t4("mcp.marketplaceUninstall")}</button>` : html4`<button class="btn primary" disabled=${busy || !installable} onClick=${onInstall}>${t4("mcp.marketplaceInstall")}</button>`}
+        <button class="btn ghost" onClick=${onClose}>${t4("common.back")}</button>
+      </span>
+    </div>
+
+    <div class="card" style="margin-bottom:12px">
+      <div class="card-b" style="font-size:13px;line-height:1.6">${entry.description || "\u2014"}</div>
+    </div>
+
+    ${entry.install ? html4`<div class="card" style="margin-bottom:12px">
+            <div class="card-h"><span class="title">${t4("mcp.spec")}</span></div>
+            <div class="card-b">
+              <code class="mono" style="font-size:11.5px;color:var(--fg-2);word-break:break-all;display:block">${specPreview}</code>
+              ${installedSpec ? html4`<div style="margin-top:8px;font-size:11px;color:var(--fg-3)">
+                      <span class="dim">on disk:</span> <code class="mono">${installedSpec}</code>
+                    </div>` : null}
+            </div>
+          </div>` : entry.source === "smithery" ? html4`<div class="card" style="margin-bottom:12px">
+              <div class="card-b" style="font-size:13px;line-height:1.6;color:var(--fg-3)">
+                ${t4("mcp.marketplaceFetchOnInstall")}
+              </div>
+            </div>` : null}
+
+    ${entry.install?.requiredEnv?.length ? html4`<div class="card accent-brand" style="margin-bottom:12px">
+            <div class="card-h"><span class="title">${t4("mcp.marketplaceEnvTitle")}</span></div>
+            <div class="card-b" style="font-size:13px">
+              ${entry.install.requiredEnv.map(
+    (name) => html4`<div><code class="mono" style="color:var(--c-warn)">${name}</code></div>`
+  )}
+              <div style="margin-top:6px;color:var(--fg-3);font-size:12px">
+                ${t4("mcp.marketplaceEnvHint")}
+              </div>
+            </div>
+          </div>` : null}
+
+    ${installed ? html4`<div class="card accent-warn">
+            <div class="card-b" style="font-size:12.5px;line-height:1.6">
+              ${t4("mcp.marketplaceRestartHint")}
+            </div>
+          </div>` : null}
+  `;
+}
 
 // dashboard/src/panels/memory.ts
 function MemoryPanel() {