@oharness/server 0.11.0 → 0.12.0

package/dist/page/client/composer.js

@@ -557,10 +557,18 @@ let offerLoaded = false;
 let offer = { connectors: [], plugins: [], skills: [], agents: [] };
 /** The connectors on offer rather than the ones already here. */
 let market = [];
+/** Servers found in Claude Code's and Codex's config, offered beside them. */
+let foreignMarket = [];
 /** The connector whose sign-in is open in a browser tab, if any. */
 let authorizing = null;
 /** The connector being added right now, so its row can say so. */
 let adding = null;
+/** The plugins on offer, from our own list; fetched when that screen opens. */
+let pluginMarket = [];
+/** The plugin whose install was asked for once and is waiting to be confirmed. */
+let confirming = null;
+/** The plugin downloading right now. */
+let installing = null;
 let attachQuery = "";
 let attachCursor = 0;
 /** Guards against a slow answer to an old keystroke landing after a new one. */
@@ -603,7 +611,7 @@ function attachRows() {
   if (attachView === "skills" || attachView === "plugins" || attachView === "connectors") {
     const kind = attachView;
     const items =
-      kind === "skills" ? offer.skills || []
+      kind === "skills" ? usableSkills()
       : kind === "plugins" ? offer.plugins || []
       : offer.connectors || [];
     const row = (entry) => ({
@@ -641,11 +649,11 @@ function attachRows() {
       ...(!items.length ? [{ type: "hint", label: t(empty[kind]) }] : []),
       ...(hidden > 0 ? [{ type: "hint", label: t("add.andMore", { n: hidden }) }] : []),
       // Browse is only a different question where there is somewhere to browse:
-      // connectors have a registry of ones not installed, skills and plugins
-      // are whatever is on this machine already. "More" only when the menu
-      // is holding some back; with everything in view it is the catalogue.
-      ...(kind === "connectors"
-        ? [{ type: "market", kind, icon: "search", label: t(hidden > 0 ? "add.browse" : "add.browseAll") }]
+      // connectors have a registry of ones not installed and plugins a market,
+      // skills are whatever is on this machine already. "More" only when the
+      // menu is holding some back; with everything in view it is the catalogue.
+      ...(kind === "connectors" || kind === "plugins"
+        ? [{ type: "market", kind, icon: "search", label: t(hidden > 0 ? "add.browse" : "add.browseAll." + kind) }]
         : []),
       { type: "manage", kind, icon: "settings", label: t("add.manage") },
     ];
@@ -680,7 +688,7 @@ function attachRows() {
      * under the name is the one a person would think of. Someone after the
      * video tools types "video", and only the description contains it.
      */
-    const skills = (offer.skills || [])
+    const skills = usableSkills()
       .filter((skill) =>
         !query ||
         skill.name.toLowerCase().includes(query) ||
@@ -779,7 +787,7 @@ function attachRows() {
 
   const connectors = (offer.connectors || []).length;
   const plugins = (offer.plugins || []).length;
-  const skills = (offer.skills || []).length;
+  const skills = usableSkills().length;
   return [
     // What goes with the message: from this machine, first. Two rows for
     // files and folders, because the dialogs behind them are two: only macOS
@@ -834,6 +842,21 @@ function attachRows() {
       sub: skills ? String(skills) : "",
       into: true,
     },
+    // What this person already set up in Claude Code or Codex and has not
+    // brought over yet. At the top level, one click from the +: a section
+    // two screens in is a section nobody goes looking for. Gone once there is
+    // nothing left to add.
+    ...(foreignWaiting() > 0
+      ? [{
+          type: "market",
+          kind: "imports",
+          icon: "import",
+          // Each tool's own mark: the row is about where these come from.
+          marks: ["claude", "codex"],
+          label: t("add.importFrom"),
+          sub: String(foreignWaiting()),
+        }]
+      : []),
   ];
 }
 
@@ -842,7 +865,45 @@ function notChoice(row) {
   return row.type === "group" || row.type === "sep";
 }
 
+/**
+ * Repaint the menu, gliding from the height it had to the one it needs.
+ *
+ * Every repaint goes through here — a new screen, a list that arrived from
+ * the server after the menu opened, a filter narrowing it — because any one
+ * of them that changed the height in a single frame was the jolt. A glide
+ * already under way is interrupted from wherever it got to, not restarted
+ * from where it began.
+ */
+let attachResize = null;
 function paintAttachMenu() {
+  const visible = !attachMenu.hidden;
+  const before = visible ? attachMenu.offsetHeight : 0;
+  if (attachResize) {
+    attachResize.cancel();
+    attachResize = null;
+  }
+  paintAttachRows();
+  if (!visible || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  const after = attachMenu.offsetHeight;
+  if (Math.abs(after - before) < 2) return;
+  attachMenu.classList.add("resizing");
+  const glide = attachMenu.animate([{ height: before + "px" }, { height: after + "px" }], {
+    duration: 200,
+    easing: "cubic-bezier(.2,.8,.2,1)",
+  });
+  attachResize = glide;
+  const done = () => {
+    if (attachResize !== glide) return;
+    attachResize = null;
+    attachMenu.classList.remove("resizing");
+  };
+  glide.onfinish = done;
+  glide.oncancel = () => {
+    if (attachResize === glide || !attachResize) attachMenu.classList.remove("resizing");
+  };
+}
+
+function paintAttachRows() {
   const rows = attachRows();
   if (attachCursor >= rows.length) attachCursor = Math.max(0, rows.length - 1);
   // The list opens with the cursor at 0, and 0 is a heading whenever the list
@@ -870,7 +931,13 @@ function paintAttachMenu() {
       "menu-item" + ((row.ref && referenced(row.ref)) || row.on ? " on" : "") + (i === attachCursor ? " cursor" : ""),
     );
     item.setAttribute("role", "button");
-    item.appendChild(row.mark ? connectorMark(row.mark, row.label) : svgIcon(row.icon));
+    if (row.marks) {
+      const pair = el("span", "mark-pair");
+      for (const source of row.marks) pair.appendChild(vendorMark(source));
+      item.appendChild(pair);
+    } else {
+      item.appendChild(row.mark ? connectorMark(row.mark, row.label) : svgIcon(row.icon));
+    }
     if (row.note) {
       item.classList.add("stacked");
       const stack = el("span", "stack");
@@ -1049,15 +1116,27 @@ async function withPreview(file) {
 }
 
 function showAttachView(view) {
+  const from = attachView;
+  const before = attachMenu.hidden ? 0 : attachMenu.offsetHeight;
   attachView = view;
   // No row is under the keyboard until a key moves there. Opening onto a
   // highlighted first row, with the pointer highlighting a second, made the
   // menu look like it had two selections and no rhythm.
   attachCursor = -1;
   paintAttachMenu();
+  // Into a list slides in from the right, back out from the left, so the
+  // menu reads as a stack of screens rather than one that changed its mind.
+  if (before && from !== view) slideAttachBody(view === "root" ? "slide-back" : "slide-in");
   attachMenu.focus();
 }
 
+function slideAttachBody(name) {
+  attachBody.classList.remove("slide-in", "slide-back");
+  void attachBody.offsetWidth; // restart the animation
+  attachBody.classList.add(name);
+}
+
+
 // --- browsing connectors and plugins ---------------------------------------
 /**
  * What is on offer, in a dialog rather than in the menu.
@@ -1076,37 +1155,100 @@ let marketKind = "connectors";
 const marketSearch = document.getElementById("mk-search");
 marketSearch.addEventListener("input", () => paintMarket());
 
+/**
+ * Which list the import tab sits beside. Bringing things in from Claude Code
+ * and Codex is its own tab, not a section of the catalogue: those rows are
+ * this person's own setup, and a shelf of them between "in this session" and
+ * seventy vendors read as one more vendor list.
+ */
+let marketHome = "connectors";
+const marketTabs = document.getElementById("mk-tabs");
+
+function paintMarketTabs() {
+  const tabbed = marketKind === "connectors" || marketKind === "plugins" || marketKind === "imports";
+  marketTabs.hidden = !tabbed;
+  if (!tabbed) return;
+  marketTabs.replaceChildren();
+  const tab = (kind, build) => {
+    const button = el("button", "mk-tab" + (marketKind === kind ? " on" : ""));
+    button.type = "button";
+    button.setAttribute("role", "tab");
+    button.setAttribute("aria-selected", String(marketKind === kind));
+    build(button);
+    button.addEventListener("click", () => {
+      if (marketKind !== kind) void openMarket(kind);
+    });
+    marketTabs.appendChild(button);
+  };
+  tab(marketHome, (button) => button.appendChild(document.createTextNode(t(marketHome === "plugins" ? "add.plugins" : "add.connectors"))));
+  tab("imports", (button) => {
+    button.appendChild(vendorMark("claude"));
+    button.appendChild(vendorMark("codex"));
+    button.appendChild(document.createTextNode(t("market.tab.import")));
+    const waiting = foreignWaiting();
+    if (waiting) button.appendChild(el("span", "mk-tab-count", String(waiting)));
+  });
+}
+
 async function openMarket(kind) {
+  if (kind === "connectors" || kind === "plugins") marketHome = kind;
   marketKind = kind;
   // Cleared on open: a query left over from the last screen would hide most of
   // this one and look like an empty catalogue.
   marketSearch.value = "";
   marketSearch.placeholder = t("menu.search");
-  const titles = { plugins: "add.plugins", skills: "add.skills", connectors: "add.connectors" };
-  const notes = { plugins: "market.pluginsNote", skills: "market.skillsNote", connectors: "market.connectorsNote" };
-  document.getElementById("mk-title").textContent = t(titles[kind] || titles.connectors);
+  const titles = { plugins: "add.plugins", skills: "add.skills", connectors: "add.connectors", imports: "add.importFrom" };
+  const notes = { plugins: "market.pluginsNote", skills: "market.skillsNote", connectors: "market.connectorsNote", imports: "market.importsNote" };
+  // The import tab belongs to the list it sits beside, so the dialog keeps
+  // that list's name and only the sentence under it changes.
+  document.getElementById("mk-title").textContent = t(titles[kind === "imports" ? marketHome : kind] || titles.connectors);
+  paintMarketTabs();
   document.getElementById("mk-note").textContent = t(notes[kind] || notes.connectors);
-  marketList.replaceChildren(el("div", "mk-desc", t("market.loading")));
-  marketDialog.showModal();
+  // A tab switch keeps the old list up until the new one is ready: a
+  // "Loading…" line in between collapses the dialog for a frame.
+  const switching = marketDialog.open;
+  if (!switching) marketList.replaceChildren(el("div", "mk-desc", t("market.loading")));
+  marketDialog.classList.remove("closing");
+  // Rows play their entrance once per opening, not on every repaint.
+  marketDialog.classList.add("fresh");
+  // Already open when one list links to another — the plugins screen
+  // pointing at the import screen — and showModal on an open dialog throws.
+  if (!marketDialog.open) marketDialog.showModal();
 
   const context = await getJson("/context");
   if (!context.error) offer = context;
-  if (kind === "connectors") {
+  if (kind === "connectors" || kind === "imports" || kind === "plugins") {
     const body = await getJson("/registry");
     market = body.error ? [] : body.connectors || [];
+    foreignMarket = body.error ? [] : body.imports || [];
+  }
+  if (kind === "plugins") {
+    confirming = null;
+    const body = await getJson("/plugin-market");
+    pluginMarket = body.error ? [] : body.plugins || [];
   }
+  paintMarketTabs();
   paintMarket();
+  if (switching) {
+    marketList.classList.remove("swap");
+    void marketList.offsetWidth;
+    marketList.classList.add("swap");
+    marketList.scrollTop = 0;
+  }
+  setTimeout(() => marketDialog.classList.remove("fresh"), 400);
 }
 
 function paintMarket() {
   marketList.replaceChildren();
   const query = (marketSearch.value || "").trim().toLowerCase();
+  if (marketKind === "imports") return paintImports(query);
   const hit = (entry) =>
     !query ||
     (entry.name || "").toLowerCase().includes(query) ||
     (entry.title || "").toLowerCase().includes(query) ||
     (entry.description || "").toLowerCase().includes(query) ||
-    (entry.label || "").toLowerCase().includes(query);
+    (entry.label || "").toLowerCase().includes(query) ||
+    (entry.publisher || "").toLowerCase().includes(query);
   const installed = (
     marketKind === "plugins" ? offer.plugins || []
     : marketKind === "skills" ? offer.skills || []
@@ -1120,10 +1262,28 @@ function paintMarket() {
     marketList.appendChild(grid);
   }
 
-  // Only connectors have somewhere to come from yet. Saying so beats an
-  // "Available" heading over an empty space that reads as a failed load.
-  const available = marketKind === "connectors" ? market.filter((one) => !one.installed && hit(one)) : [];
-  if (available.length) {
+
+  // Skills have nowhere to come from yet. Saying so beats an "Available"
+  // heading over an empty space that reads as a failed load.
+  const available =
+    marketKind === "connectors" ? market.filter((one) => !one.installed && hit(one))
+    : marketKind === "plugins" ? pluginMarket.filter((one) => !one.installed && hit(one))
+    : [];
+  if ((marketKind === "plugins" || marketKind === "connectors") && available.length) {
+    // Seventy rows under one heading is a wall; under seven it is a shelf.
+    // Connectors share the plugins' shelves, so a vendor sits on the same one
+    // in both dialogs, plus one of their own for the servers run locally.
+    const shelves = marketKind === "connectors" ? ["local", ...PLUGIN_CATEGORIES] : PLUGIN_CATEGORIES;
+    const paint = marketKind === "connectors" ? offerRow : pluginOfferRow;
+    for (const category of shelves) {
+      const rows = available.filter((one) => (shelves.includes(one.category) ? one.category : "other") === category);
+      if (!rows.length) continue;
+      marketList.appendChild(el("div", "mk-group", t("market.cat." + category)));
+      const grid = el("div", "mk-grid");
+      for (const entry of rows) grid.appendChild(paint(entry));
+      marketList.appendChild(grid);
+    }
+  } else if (available.length) {
     marketList.appendChild(el("div", "mk-group", t("market.available")));
     const grid = el("div", "mk-grid");
     for (const entry of available) grid.appendChild(offerRow(entry));
@@ -1141,14 +1301,16 @@ function paintMarket() {
  * browser's own placeholder, which is uglier than the fallback and arrives at
  * a different moment in every browser.
  */
-function connectorMark(id, label) {
+function connectorMark(id, label, route = "/connector-icon", fallback) {
   const letter = (label || id || "?").trim().charAt(0).toUpperCase();
   // A stable hue per connector, so the tile is the same colour every time
   // rather than a different one each render.
   let hash = 0;
   for (let i = 0; i < id.length; i++) hash = (hash * 31 + id.charCodeAt(i)) % 360;
-  const mono = el("span", "mk-mono", letter);
-  mono.style.background = "hsl(" + hash + " 42% 42%)";
+  // A caller with a better placeholder than a letter — a plugin with no site
+  // keeps the plugin glyph it always had — passes it in.
+  const mono = fallback || el("span", "mk-mono", letter);
+  if (!fallback) mono.style.background = "hsl(" + hash + " 42% 42%)";
 
   const img = new Image();
   img.className = "mk-logo";
@@ -1157,7 +1319,7 @@ function connectorMark(id, label) {
     if (isDarkFlatGlyph(img)) img.classList.add("invert-dark");
     mono.replaceWith(img);
   });
-  img.src = q("/connector-icon?id=" + encodeURIComponent(id));
+  img.src = q(route + "?id=" + encodeURIComponent(id));
   return mono;
 }
 
@@ -1218,7 +1380,11 @@ function installedRow(entry) {
   const row = el("div", "mk-item");
   const isPlugin = marketKind === "plugins";
   const isSkill = marketKind === "skills";
-  row.appendChild(isPlugin ? svgIcon("plugin") : isSkill ? svgIcon("skill") : connectorMark(entry.name, entry.name));
+  row.appendChild(
+    isPlugin ? connectorMark(entry.name, entry.title || entry.name, "/plugin-icon", svgIcon("plugin"))
+    : isSkill ? svgIcon("skill")
+    : connectorMark(entry.name, entry.name),
+  );
 
   const naming = el("div", "mk-naming");
   // A plugin may carry a display title over its id; the id is still what a
@@ -1236,11 +1402,18 @@ function installedRow(entry) {
   // A runtime plugin says so in its source; a skill carries its own flag. Reading
   // only one of them is how the two that ship here — memory and the media
   // plugin — ended up as the only rows in the panel with no provenance at all.
+  // Claude Code's and Codex's are named for the tool that put them there:
+  // that is where one gets fixed, and where removing it would take it from.
   const tag =
     entry.builtin || entry.source === "builtin" ? "built-in"
     : entry.source === "runtime" ? "runtime"
     : "";
   if (tag) heading.appendChild(el("span", "mk-tag", tag));
+  if (entry.source === "claude" || entry.source === "codex") heading.appendChild(vendorChip(entry.source));
+  if (isSkill && entry.disabled) {
+    row.classList.add("off");
+    heading.appendChild(el("span", "mk-tag", t("market.off")));
+  }
   naming.appendChild(heading);
   // A skill has nothing to connect to and nothing to be offline from, so the
   // slot that carries a connector's state carries what the skill is for —
@@ -1254,7 +1427,11 @@ function installedRow(entry) {
       : entry.needsAuth
         ? t("add.needsAuth")
         : entry.error || t("add.offline");
-  if (detail) naming.appendChild(el("div", "mk-desc", detail));
+  if (detail) {
+    const line = el("div", "mk-desc", detail);
+    line.title = detail;
+    naming.appendChild(line);
+  }
   row.appendChild(naming);
 
   const acts = el("div", "mk-acts");
@@ -1262,22 +1439,42 @@ function installedRow(entry) {
   // and repeating it on every row distinguishes nothing. What is worth saying
   // per row is the part that would otherwise surprise someone: this plugin
   // declares servers, and they are not running.
-  const idle = isPlugin && entry.source === "claude" ? (entry.servers || []).length : 0;
+  const here = new Set((offer.connectors || []).map((one) => one.name));
+  const idle = isPlugin && (entry.source === "claude" || entry.source === "codex")
+    ? (entry.servers || []).filter((name) => !here.has(name)).length
+    : 0;
   // Two keys rather than a plural engine: this is the only place in the page
   // where the count is usually one, and "1 servers" is worth the extra string.
+  // A button, because the next question is always "then how do I start it".
   if (idle) {
     const said = idle === 1 ? t("market.serverIdle") : t("market.serversIdle", { n: idle });
-    acts.appendChild(el("span", "mk-state", said));
+    const go = el("button", "mk-btn", said);
+    go.type = "button";
+    go.title = t("add.importFrom");
+    go.addEventListener("click", () => void openMarket("imports"));
+    acts.appendChild(go);
   }
   const ref = { kind: isPlugin ? "plugin" : isSkill ? "skill" : "connector", value: entry.name, label: entry.name };
-  const attach = el("button", "mk-icon-btn", referenced(ref) ? "✓" : "+");
-  attach.type = "button";
-  attach.title = t("market.attach");
-  attach.addEventListener("click", () => {
-    toggleRef(ref);
-    attach.textContent = referenced(ref) ? "✓" : "+";
-  });
-  acts.appendChild(attach);
+  // A skill that is off cannot be loaded, so it cannot be attached either.
+  if (!(isSkill && entry.disabled)) {
+    const attach = el("button", "mk-icon-btn", referenced(ref) ? "✓" : "+");
+    attach.type = "button";
+    attach.title = t("market.attach");
+    attach.addEventListener("click", () => {
+      toggleRef(ref);
+      attach.textContent = referenced(ref) ? "✓" : "+";
+    });
+    acts.appendChild(attach);
+  }
+
+  // Off rather than removed: most of these are files another tool put on
+  // disk, and deleting one to hide it here would take it from that tool too.
+  if (isSkill) {
+    const toggle = el("button", "mk-btn", t(entry.disabled ? "market.enable" : "market.disable"));
+    toggle.type = "button";
+    toggle.addEventListener("click", () => void setSkill(entry.name, Boolean(entry.disabled)));
+    acts.appendChild(toggle);
+  }
 
   // A connector that asked to be signed in to gets the one button that moves
   // it forward, in front of the one that removes it.
@@ -1293,8 +1490,17 @@ function installedRow(entry) {
     acts.appendChild(go);
   }
 
-  // Removal is a connector's alone: a plugin is a directory on disk and a
-  // skill is a file in one, and neither is undone from a composer menu.
+  // A plugin this menu installed can be taken away by it. Any other plugin is
+  // a directory somebody put on disk, and a skill is a file in one; neither is
+  // undone from a composer menu.
+  if (isPlugin && entry.market) {
+    const drop = el("button", "mk-icon-btn drop", "×");
+    drop.type = "button";
+    drop.title = t("add.remove");
+    drop.disabled = Boolean(installing);
+    drop.addEventListener("click", () => void installPlugin(entry.market, true));
+    acts.appendChild(drop);
+  }
   if (!isPlugin && !isSkill) {
     const drop = el("button", "mk-icon-btn drop", "×");
     drop.type = "button";
@@ -1330,6 +1536,250 @@ function offerRow(entry) {
   return row;
 }
 
+/** Claude Code's or Codex's app icon; see tool-icons.ts. */
+function vendorMark(source, size) {
+  const mark = el("span", "vendor-mark");
+  mark.setAttribute("aria-hidden", "true");
+  if (size) mark.style.width = mark.style.height = size + "px";
+  const img = document.createElement("img");
+  img.alt = "";
+  img.decoding = "async";
+  img.src = q("/tool-icon?id=" + (source === "codex" ? "codex" : "claude"));
+  mark.appendChild(img);
+  return mark;
+}
+
+/** "Claude Code" or "Codex" with its mark, where a row says whose it is. */
+function vendorChip(source) {
+  const chip = el("span", "vendor-chip");
+  chip.appendChild(vendorMark(source));
+  chip.appendChild(document.createTextNode(source === "codex" ? "Codex" : "Claude Code"));
+  return chip;
+}
+
+/**
+ * One row per server name. The same server set up in both tools — or twice
+ * in one — is one thing to add, so it is listed once, under both tools'
+ * marks, and the declaration that would work is the one the button adds.
+ */
+function mergeForeign(list) {
+  const usable = (one) => !one.reason && !(one.missingEnv || []).length;
+  const byName = new Map();
+  for (const one of list) {
+    const key = one.scope === "plugin" ? "plugin:" + one.plugin + ":" + one.name : one.name;
+    const group = byName.get(key) || [];
+    group.push(one);
+    byName.set(key, group);
+  }
+  return [...byName.values()].map((group) => {
+    const best = group.find(usable) || group[0];
+    return { ...best, sources: [...new Set(group.map((one) => one.source))] };
+  });
+}
+
+/**
+ * Everything worth bringing over from Claude Code and Codex, on one screen.
+ *
+ * Skills, agents and plugins are read where they lie and need nothing done,
+ * so the only rows are servers: those in the two tools' own config files
+ * first, then those inside their plugins, under the plugin that brought each.
+ */
+function paintImports(query) {
+  const hit = (one) =>
+    !query ||
+    one.name.toLowerCase().includes(query) ||
+    (one.pluginTitle || one.plugin || "").toLowerCase().includes(query) ||
+    (one.target || "").toLowerCase().includes(query);
+  const here = new Set((offer.connectors || []).map((one) => one.name));
+  const waiting = mergeForeign(foreignMarket.filter((one) => !one.installed && !here.has(one.name) && hit(one)));
+
+  const files = waiting.filter((one) => one.scope !== "plugin");
+  if (files.length) {
+    marketList.appendChild(el("div", "mk-group", t("market.fromConfig")));
+    const grid = el("div", "mk-grid");
+    for (const entry of files) grid.appendChild(foreignRow(entry));
+    marketList.appendChild(grid);
+  }
+  const bundled = waiting.filter((one) => one.scope === "plugin");
+  if (bundled.length) {
+    marketList.appendChild(el("div", "mk-group", t("market.fromPlugins")));
+    const grid = el("div", "mk-grid");
+    for (const entry of bundled) grid.appendChild(foreignRow(entry));
+    marketList.appendChild(grid);
+  }
+  if (!files.length && !bundled.length) {
+    marketList.appendChild(el("div", "mk-desc mk-empty", t(query ? "market.empty" : "market.allImported")));
+  }
+}
+
+/**
+ * One server from Claude Code's or Codex's config.
+ *
+ * Offered, never started on its own: it is a process, and often a key, the
+ * person set up for another program. The row says where it was found and
+ * what it reaches, and — when the file has a key written out in it — that
+ * adding it copies that key, because that is the one consequence of the
+ * click a reader would not guess.
+ */
+function foreignRow(entry) {
+  const row = el("div", "mk-item");
+  row.appendChild(connectorMark(entry.name, entry.name));
+
+  const naming = el("div", "mk-naming");
+  const heading = el("div", "mk-name", entry.name);
+  for (const source of entry.sources || [entry.source]) heading.appendChild(vendorChip(source));
+  naming.appendChild(heading);
+  const missing = entry.missingEnv || [];
+  const problem = entry.reason
+    ? t("market.reason." + entry.reason)
+    : missing.length
+      ? t("market.needsEnv", { names: missing.join(", ") })
+      : "";
+  const where = [
+    entry.scope === "plugin" ? t("market.scope.inPlugin", { name: entry.pluginTitle || entry.plugin }) : t("market.scope." + entry.scope),
+    entry.target,
+  ].filter(Boolean).join(" · ");
+  naming.appendChild(el("div", problem ? "mk-desc warn" : "mk-desc", problem || where));
+  if (!problem && entry.inlineSecret) naming.appendChild(el("div", "mk-desc", t("market.inlineSecret")));
+  row.title = entry.file;
+  row.appendChild(naming);
+
+  const acts = el("div", "mk-acts");
+  const key = foreignKey(entry);
+  // A row that cannot be added says why in its text; the button steps back
+  // rather than sitting there as a bright block that does nothing.
+  const add = el("button", problem ? "mk-btn" : "mk-btn go", t(key === adding ? "market.importing" : "market.import"));
+  add.type = "button";
+  add.disabled = Boolean(adding) || Boolean(problem);
+  add.addEventListener("click", () => void importConnector(entry));
+  acts.appendChild(add);
+  row.appendChild(acts);
+  return row;
+}
+
+/** Add one found in Claude Code's or Codex's config, by where it was found. */
+function foreignKey(entry) {
+  return [entry.source, entry.scope, entry.plugin || "", entry.name].join(":");
+}
+
+async function importConnector(entry) {
+  if (adding) return;
+  adding = foreignKey(entry);
+  paintMarket();
+  const body = await api(
+    "/connector",
+    { import: { source: entry.source, scope: entry.scope, name: entry.name, ...(entry.plugin ? { plugin: entry.plugin } : {}) } },
+    3 * 60_000,
+  );
+  adding = null;
+  if (body.error) {
+    addNotice(body.error, "err");
+    return void paintMarket();
+  }
+  if (body.connectors) offer = { connectors: body.connectors, plugins: body.plugins || [], skills: body.skills || [], agents: body.agents || [] };
+  // By name: the same server is often in both tools, and once one is here
+  // the other would be a second copy of it.
+  for (const one of foreignMarket) if (one.name === entry.name) one.installed = true;
+  for (const one of market) if (one.id === entry.name) one.installed = true;
+  paintMarketTabs();
+  paintMarket();
+}
+
+/** Switch a skill off or back on. */
+async function setSkill(name, enabled) {
+  const body = await api("/skill", { name: name, enabled: enabled });
+  if (body.error) return void addNotice(body.error, "err");
+  if (body.skills) offer = { connectors: body.connectors || [], plugins: body.plugins || [], skills: body.skills, agents: body.agents || [] };
+  paintMarket();
+}
+
+/** The shelves the plugin list is cut into, in the order they are shown. */
+const PLUGIN_CATEGORIES = ["build", "data", "monitor", "dev", "web", "design", "work", "other"];
+
+/**
+ * One plugin on offer.
+ *
+ * Installing downloads somebody else's repository and, for a plugin with
+ * servers, connects to them — so the first click says exactly that, and only
+ * the second one does it. A dialog would say the same thing further from the
+ * row it is about.
+ */
+function pluginOfferRow(entry) {
+  const row = el("div", "mk-item");
+  row.appendChild(connectorMark(entry.id, entry.label, "/plugin-icon", svgIcon("plugin")));
+
+  const naming = el("div", "mk-naming");
+  const heading = el("div", "mk-name", entry.label);
+  if (entry.publisher && entry.publisher !== entry.label) heading.appendChild(el("span", "mk-tag", entry.publisher));
+  naming.appendChild(heading);
+  const asking = confirming === entry.id;
+  naming.appendChild(el("div", asking ? "mk-desc warn" : "mk-desc", asking ? consent(entry) : entry.description));
+  if (!asking) naming.appendChild(el("div", "mk-desc", provides(entry.provides || {})));
+  row.appendChild(naming);
+
+  const acts = el("div", "mk-acts");
+  const label = installing === entry.id ? "market.installing" : asking ? "market.confirm" : "market.install";
+  const add = el("button", "mk-btn go", t(label));
+  add.type = "button";
+  add.disabled = Boolean(installing);
+  add.addEventListener("click", () => {
+    if (!asking) {
+      confirming = entry.id;
+      return void paintMarket();
+    }
+    void installPlugin(entry.id, false);
+  });
+  acts.appendChild(add);
+  if (asking && !installing) {
+    const cancel = el("button", "mk-btn", t("market.cancel"));
+    cancel.type = "button";
+    cancel.addEventListener("click", () => {
+      confirming = null;
+      paintMarket();
+    });
+    acts.appendChild(cancel);
+  }
+  row.appendChild(acts);
+  return row;
+}
+
+/** "37 skills · 3 agents · 1 connector", from what the list says the plugin holds. */
+function provides(what) {
+  const parts = [];
+  if (what.skills) parts.push(t(what.skills === 1 ? "market.oneSkill" : "market.skills", { n: what.skills }));
+  if (what.agents) parts.push(t(what.agents === 1 ? "market.oneAgent" : "market.agents", { n: what.agents }));
+  const servers = (what.servers || []).length;
+  if (servers) parts.push(t(servers === 1 ? "market.oneServer" : "market.servers", { n: servers }));
+  return parts.join(" · ");
+}
+
+/** What the second click agrees to, said before it is made. */
+function consent(entry) {
+  const servers = (entry.provides && entry.provides.servers) || [];
+  return t(servers.length ? "market.consentServers" : "market.consent", {
+    publisher: entry.publisher || entry.label,
+    servers: servers.join(", "),
+  });
+}
+
+/** Install a plugin from the list, or remove one it installed. */
+async function installPlugin(id, remove) {
+  if (installing) return;
+  installing = remove ? null : id;
+  confirming = null;
+  paintMarket();
+  const body = await api("/plugin-market", { id: id, remove: remove === true }, 5 * 60_000);
+  installing = null;
+  if (body.error) {
+    addNotice(body.error, "err");
+    return void paintMarket();
+  }
+  if (body.plugins) offer = { connectors: body.connectors || [], plugins: body.plugins, skills: body.skills || [], agents: body.agents || [] };
+  for (const entry of pluginMarket) if (entry.id === id) entry.installed = remove !== true;
+  if (!remove) addNotice(t("market.installedNotice", { name: (pluginMarket.find((one) => one.id === id) || { label: id }).label }));
+  paintMarket();
+}
+
 /**
  * Add a connector, or take one away.
  *
@@ -1378,7 +1828,23 @@ async function authorizeConnector(id) {
 
 document.getElementById("mk-close").appendChild(svgIcon("close"));
 document.getElementById("mk-close").setAttribute("aria-label", t("market.close"));
-document.getElementById("mk-close").addEventListener("click", () => marketDialog.close());
+document.getElementById("mk-close").addEventListener("click", () => closeMarket());
+// Escape closes it too, and should leave the same way the button does.
+marketDialog.addEventListener("cancel", (e) => {
+  e.preventDefault();
+  closeMarket();
+});
+
+/** Fade the dialog out before it goes, rather than vanishing mid-frame. */
+function closeMarket() {
+  if (!marketDialog.open || marketDialog.classList.contains("closing")) return;
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return void marketDialog.close();
+  marketDialog.classList.add("closing");
+  setTimeout(() => {
+    marketDialog.classList.remove("closing");
+    marketDialog.close();
+  }, 140);
+}
 
 async function loadMentionFiles() {
   const seq = ++attachSeq;
@@ -1437,6 +1903,22 @@ function openAttachMenu() {
     offer = body;
     paintAttachMenu();
   });
+  // For the import row's count; the dialog fetches its own. Kept between
+  // opens, so after the first the row is there from the first frame.
+  void getJson("/registry").then((body) => {
+    if (body.error) return;
+    foreignMarket = body.imports || [];
+    if (!attachMenu.hidden && attachView === "root") paintAttachMenu();
+  });
+}
+
+/**
+ * How many servers from Claude Code and Codex could be added now: not here
+ * already, usable, and counted once when both tools declare the same one.
+ */
+function foreignWaiting() {
+  const here = new Set((offer.connectors || []).map((one) => one.name));
+  return new Set(foreignMarket.filter((one) => !one.installed && !one.reason && !here.has(one.name)).map((one) => one.name)).size;
 }
 
 /**
@@ -1496,10 +1978,18 @@ function moveAttachCursor(e) {
 
 const inputMirror = document.getElementById("input-mirror");
 
+/**
+ * The skills the model can load. The offer also carries the ones switched
+ * off, for the list that switches them back on; nothing else should see them.
+ */
+function usableSkills() {
+  return (offer.skills || []).filter((skill) => !skill.disabled);
+}
+
 /** Every name an @ can stand for. */
 function mentionNames() {
   return new Map([
-    ...(offer.skills || []).map((skill) => [skill.name, "skill"]),
+    ...usableSkills().map((skill) => [skill.name, "skill"]),
     ...(offer.plugins || []).map((plugin) => [plugin.name, "plugin"]),
   ]);
 }