claude-code-marketplace 0.3.2 → 0.4.0

package/package.json

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

package/public/app.js

@@ -42,6 +42,9 @@ const ICONS = {
   kebab:
     '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><circle cx="12" cy="5" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="19" r="2.5"/></svg>',
 };
+ICONS.readme = SVG(
+  '<path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/>',
+);
 ICONS.settings = ICONS.gear;
 ICONS.openEditor =
   '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M17.583 2.207a1.1 1.1 0 0 1 1.541.033l2.636 2.636a1.1 1.1 0 0 1 .033 1.541L10.68 17.53a1.1 1.1 0 0 1-.345.247l-4.56 1.903a.55.55 0 0 1-.725-.725l1.903-4.56a1.1 1.1 0 0 1 .247-.345zm.902 1.87-8.794 8.793-.946 2.268 2.268-.946 8.794-8.793z"/></svg>';
@@ -54,6 +57,7 @@ const COMP_LABELS = {
   hooks: 'Hooks',
   lspServers: 'LSP Servers',
   settings: 'Settings',
+  readme: 'README',
 };
 
 function updateArrow(p) {
@@ -505,41 +509,52 @@ function renderDetailComponents(pluginId, comps, hasDirAccess) {
   const entries = Object.entries(comps).filter(
     ([k, v]) => !k.startsWith('_') && (Array.isArray(v) ? v.length > 0 : v > 0),
   );
-  if (!entries.length) return '<div style="color:var(--text-dim);font-size:12px">No components found</div>';
+  if (!entries.length && !comps._readmePath)
+    return '<div style="color:var(--text-dim);font-size:12px">No components found</div>';
 
-  return entries
-    .map(([type, items]) => {
-      const names = Array.isArray(items) ? items : [];
-      const count = names.length || items;
-      let html = `<div class="detail-comp-group">
+  let readmeHtml = '';
+  if (comps._readmePath && hasDirAccess) {
+    readmeHtml = `<div class="readme-comp-item" onclick="openContentModal('${esc(pluginId)}', '${esc(comps._readmePath)}', 'readme')">
+      <span class="icon">${ICONS.readme}</span> ${esc(comps._readmePath)}
+    </div>`;
+  }
+
+  return (
+    readmeHtml +
+    entries
+      .map(([type, items]) => {
+        const names = Array.isArray(items) ? items : [];
+        const count = names.length || items;
+        let html = `<div class="detail-comp-group">
       <div class="detail-comp-header">
         <span class="comp-icon">${ICONS[type] || ''}</span>
         ${COMP_LABELS[type] || type}
         <span class="count">${count}</span>
       </div>`;
 
-      if (names.length) {
-        const configFile = configFiles[type];
-        const dir = COMP_HAS_DIR.has(type) ? type : null;
-        html += '<div class="detail-comp-items">';
-        for (const name of names) {
-          const clickPath = configFile || (dir ? `${dir}/${name}` : name);
-          const cls = hasDirAccess ? '' : ' disabled';
-          const click = hasDirAccess
-            ? ` onclick="openContentModal('${esc(pluginId)}', '${esc(clickPath)}', '${esc(type)}')"`
-            : '';
-          html += `<div class="detail-comp-item${cls}"${click}>
+        if (names.length) {
+          const configFile = configFiles[type];
+          const dir = COMP_HAS_DIR.has(type) ? type : null;
+          html += '<div class="detail-comp-items">';
+          for (const name of names) {
+            const clickPath = configFile || (dir ? `${dir}/${name}` : name);
+            const cls = hasDirAccess ? '' : ' disabled';
+            const click = hasDirAccess
+              ? ` onclick="openContentModal('${esc(pluginId)}', '${esc(clickPath)}', '${esc(type)}')"`
+              : '';
+            html += `<div class="detail-comp-item${cls}"${click}>
             <span class="icon">${type === 'skills' ? ICONS.folder : ICONS.file}</span>
             ${esc(name)}
           </div>`;
+          }
+          html += '</div>';
         }
-        html += '</div>';
-      }
 
-      html += '</div>';
-      return html;
-    })
-    .join('');
+        html += '</div>';
+        return html;
+      })
+      .join('')
+  );
 }
 
 const EXT_TO_LANG = {
@@ -611,6 +626,26 @@ async function openFolderInEditor({ pluginId, marketplaceName } = {}) {
   } catch {}
 }
 
+async function openReadmeModal(title, fetchUrl) {
+  _contentPluginId = null;
+  document.getElementById('contentModalTitle').textContent = `${title} \u2014 README`;
+  const tree = document.getElementById('contentTree');
+  const codeEl = getContentCodeEl();
+  const pathEl = document.getElementById('contentViewerPath');
+  tree.innerHTML = '';
+  pathEl.textContent = 'README.md';
+  codeEl.innerHTML = '<span style="color:var(--text-dim)">Loading...</span>';
+  document.getElementById('contentModal').classList.add('open');
+  try {
+    const res = await fetch(fetchUrl);
+    if (!res.ok) throw new Error('Not found');
+    const data = await res.json();
+    codeEl.innerHTML = highlightSource(data.content || '', data.name || 'README.md');
+  } catch {
+    codeEl.innerHTML = '<span style="color:var(--error)">Failed to load README</span>';
+  }
+}
+
 async function openContentModal(pluginId, initialPath, componentType) {
   _contentPluginId = pluginId;
   const plugin = findPlugin(pluginId);
@@ -752,6 +787,7 @@ function showMarketplaceDetail(name) {
           <span class="meta-value">${installed} installed / ${total} total</span>
         </div>
       </div>
+      ${m.readmeFile ? `<div class="detail-section"><h4>Documentation</h4><div class="readme-comp-item" onclick="openReadmeModal('${esc(m.name)}', '/api/marketplaces/${encodeURIComponent(m.name)}/readme')">${ICONS.readme} ${esc(m.readmeFile)}</div></div>` : ''}
       <div class="detail-section">
         <h4>Actions</h4>
         <div class="mkt-actions">

package/public/style.css

@@ -934,6 +934,31 @@ body.light .scope-toggle.local {
   background: none;
   color: var(--text-tertiary);
 }
+.readme-comp-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--accent);
+  cursor: pointer;
+  border: 1px dashed var(--border);
+  border-radius: 6px;
+  background: var(--bg-deep);
+  transition:
+    background 0.12s,
+    border-color 0.12s;
+  margin-bottom: 8px;
+}
+.readme-comp-item:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+}
+.readme-comp-item svg {
+  width: 14px;
+  height: 14px;
+  opacity: 0.7;
+}
 
 /* === TOAST === */
 

package/server.js

@@ -37,6 +37,12 @@ function readJsonSafe(filePath) {
   } catch { return null; }
 }
 
+function findReadmeFile(dirPath) {
+  try {
+    return fs.readdirSync(dirPath).find(f => f.toLowerCase() === 'readme.md') || null;
+  } catch { return null; }
+}
+
 function readJsonKey(filePath, key) {
   const data = readJsonSafe(filePath);
   return data ? (data[key] || {}) : {};
@@ -168,6 +174,8 @@ function loadMarketplaces() {
     marketplace.version = mData.version || null;
     marketplace.owner = mData.owner || null;
     marketplace.description = mData.description || null;
+    const mktReadme = findReadmeFile(installLocation);
+    if (mktReadme) marketplace.readmeFile = mktReadme;
 
     for (const pd of (mData.plugins || [])) {
       if (!pd.name) continue;
@@ -370,6 +378,9 @@ function countComponents(pluginDir, meta = {}) {
     }
   }
 
+  const readmeFile = findReadmeFile(pluginDir);
+  if (readmeFile) result._readmePath = readmeFile;
+
   result._configFiles = configFiles;
   return result;
 }
@@ -529,6 +540,18 @@ app.get('/api/marketplaces', (req, res) => {
   }
 });
 
+app.get('/api/marketplaces/:name/readme', (req, res) => {
+  const mktData = getCachedMarketplaces();
+  const m = mktData.find(m => m.name === req.params.name);
+  if (!m?.readmeFile) return res.status(404).json({ error: 'No README found' });
+  try {
+    const content = fs.readFileSync(path.join(m.installLocation, m.readmeFile), 'utf-8');
+    res.json({ type: 'file', content, name: m.readmeFile });
+  } catch {
+    res.status(404).json({ error: 'Failed to read README' });
+  }
+});
+
 app.get('/api/plugins/:pluginId/components', (req, res) => {
   res.setHeader('Cache-Control', 'no-store');
   const pluginId = decodeURIComponent(req.params.pluginId);