claude-code-marketplace 0.4.2 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-marketplace",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Web UI for browsing and managing Claude Code marketplace plugins",
   "main": "server.js",
   "bin": {

package/public/app.js

@@ -123,6 +123,15 @@ document.addEventListener('DOMContentLoaded', () => {
   updateThemeColor(savedTheme !== 'dark');
 
   document.addEventListener('keydown', handleKeydown);
+
+  document.getElementById('treeContainer').addEventListener('click', (e) => {
+    const row = e.target.closest('.tree-row');
+    if (!row?.dataset.rowId) return;
+    const rowId = row.dataset.rowId;
+    const rows = getVisibleRows();
+    const idx = rows.findIndex((r) => r.dataset.rowId === rowId);
+    if (idx >= 0) setFocusedRow(idx, rows);
+  });
 });
 
 function syncHljsTheme() {
@@ -467,6 +476,7 @@ async function showDetail(pluginId) {
       <div class="detail-section">
         <p class="detail-desc">${esc(plugin.description || 'No description')}</p>
         ${metaRow}
+        ${renderPluginMetadata(plugin)}
       </div>
       ${scopeSection}
       <div class="detail-section">
@@ -515,6 +525,42 @@ function renderScopeMatrix(plugin) {
     .join('')}</div>`;
 }
 
+function shortUrl(url) {
+  return url
+    .replace(/^https?:\/\/(www\.)?/, '')
+    .replace(/\.git$/, '')
+    .replace(/\/$/, '');
+}
+
+function renderPluginMetadata(plugin) {
+  const meta = plugin.metadata || {};
+  const chips = [];
+  if (meta.category) chips.push(`<span class="meta-tag">${esc(meta.category)}</span>`);
+  if (meta.author) {
+    const name = typeof meta.author === 'object' ? meta.author.name : meta.author;
+    if (name) chips.push(`<span class="meta-chip">${esc(name)}</span>`);
+  }
+  if (meta.tags?.length) {
+    for (const t of meta.tags) chips.push(`<span class="meta-tag">${esc(t)}</span>`);
+  }
+  const links = [];
+  if (meta.homepage) {
+    links.push(
+      `<a class="meta-link" href="${esc(meta.homepage)}" target="_blank" rel="noopener">${esc(shortUrl(meta.homepage))}</a>`,
+    );
+  }
+  if (plugin.source && typeof plugin.source === 'string' && plugin.source.startsWith('http')) {
+    const href = plugin.source.replace(/\.git$/, '');
+    if (!meta.homepage || !plugin.source.includes(meta.homepage)) {
+      links.push(
+        `<a class="meta-link" href="${esc(href)}" target="_blank" rel="noopener">${esc(shortUrl(plugin.source))}</a>`,
+      );
+    }
+  }
+  if (!chips.length && !links.length) return '';
+  return `<div class="plugin-meta-bar">${chips.join('')}${links.join('')}</div>`;
+}
+
 function renderDetailComponents(pluginId, comps, hasDirAccess) {
   const configFiles = comps._configFiles || {};
   const entries = Object.entries(comps).filter(
@@ -1016,7 +1062,11 @@ function filterPlugins(plugins) {
   }
   if (searchFilter) {
     result = result.filter(
-      (p) => p.name.toLowerCase().includes(searchFilter) || (p.description || '').toLowerCase().includes(searchFilter),
+      (p) =>
+        p.name.toLowerCase().includes(searchFilter) ||
+        (p.description || '').toLowerCase().includes(searchFilter) ||
+        (p.metadata?.category || '').toLowerCase().includes(searchFilter) ||
+        (p.metadata?.tags || []).some((t) => t.toLowerCase().includes(searchFilter)),
     );
   }
   return result;
@@ -1157,7 +1207,8 @@ function handleKeydown(e) {
     }
     return;
   }
-  if ((tag === 'BUTTON' || tag === 'A') && (e.key === 'Enter' || e.key === ' ')) return;
+  if ((tag === 'BUTTON' || tag === 'A') && (e.key === 'Enter' || e.key === ' ') && !e.target.closest('#treeContainer'))
+    return;
 
   const openModal = document.querySelector('.modal-overlay.open');
   if (openModal) {

package/public/style.css

@@ -781,6 +781,39 @@ body.light .scope-toggle.local {
   letter-spacing: 0.03em;
 }
 
+.plugin-meta-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 8px;
+}
+.meta-tag {
+  font-size: 9px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+}
+.meta-chip {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.meta-link {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 260px;
+}
+.meta-link:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
 /* === SCOPE MATRIX === */
 
 .scope-matrix {

package/server.js

@@ -218,11 +218,22 @@ function loadMarketplaces() {
           const srcDir = path.resolve(installLocation, rawSource);
           if (fs.existsSync(srcDir)) originDir = srcDir;
         }
+        if (!originDir && typeof rawSource === 'object' && rawSource?.path) {
+          const srcDir = path.resolve(installLocation, rawSource.path);
+          if (fs.existsSync(srcDir)) originDir = srcDir;
+        }
         if (!originDir) {
           const pluginSubdir = path.join(installLocation, 'plugins', pd.name);
           if (fs.existsSync(pluginSubdir)) originDir = pluginSubdir;
           else if ((mData.plugins || []).length === 1) originDir = installLocation;
         }
+        if (!originDir) {
+          const cacheDir = path.join(PLUGINS_DIR, 'cache', name, pd.name);
+          if (fs.existsSync(cacheDir)) {
+            const latest = findLatestVersionDir(cacheDir);
+            if (latest) originDir = latest;
+          }
+        }
       }
 
       // Resolve plugin dir for filesystem-based component counts
@@ -250,11 +261,13 @@ function loadMarketplaces() {
         .find(d => d?.version && d.version !== 'unknown')?.version || null;
 
       let availableVersion = pd.version || null;
-      if (!availableVersion && installLocation) {
-        const sourceDir = pd.source || `plugins/${pd.name}`;
-        const pluginJson = path.join(installLocation, typeof sourceDir === 'string' ? sourceDir : pd.name, '.claude-plugin', 'plugin.json');
-        const pjData = readJsonSafe(pluginJson);
-        if (pjData?.version) availableVersion = pjData.version;
+      if (!availableVersion) {
+        const versionDir = pluginDir || originDir;
+        if (versionDir) {
+          const pluginJson = path.join(versionDir, '.claude-plugin', 'plugin.json');
+          const pjData = readJsonSafe(pluginJson);
+          if (pjData?.version) availableVersion = pjData.version;
+        }
       }
       const hasUpdate = isInstalled && semverNewer(availableVersion, installedVersion);