claude-code-marketplace 0.3.2 → 0.4.1

package/package.json

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

package/public/app.js

@@ -42,9 +42,14 @@ 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>';
+ICONS.copyPath =
+  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 const COMP_HAS_DIR = new Set(['skills', 'commands', 'agents']);
 const COMP_LABELS = {
   skills: 'Skills',
@@ -54,6 +59,7 @@ const COMP_LABELS = {
   hooks: 'Hooks',
   lspServers: 'LSP Servers',
   settings: 'Settings',
+  readme: 'README',
 };
 
 function updateArrow(p) {
@@ -68,6 +74,7 @@ function updateArrow(p) {
 // --- Init ---
 document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('contentOpenEditor').innerHTML = ICONS.openEditor;
+  document.getElementById('contentCopyPath').innerHTML = ICONS.copyPath;
   restoreAppState();
   loadProject();
   loadData();
@@ -443,7 +450,7 @@ async function showDetail(pluginId) {
     <div class="detail-header">
       <h3>${headerIcon} ${esc(plugin.name)} ${plugin.version ? `<span class="version">v${esc(plugin.version)}</span>` : ''}</h3>
       <div class="detail-header-actions">
-        ${plugin._pluginDir ? `<button class="modal-action-btn" title="Open in VS Code" onclick="openFolderInEditor({pluginId:'${esc(plugin.fullId)}'})">${ICONS.openEditor}</button>` : ''}
+        ${plugin._pluginDir ? `<button class="modal-action-btn" title="${esc(plugin._pluginDir)}" onclick="copyPluginPath('${escJs(plugin._pluginDir)}', event)">${ICONS.copyPath}</button><button class="modal-action-btn" title="Open in VS Code" onclick="openFolderInEditor({pluginId:'${esc(plugin.fullId)}',event})">${ICONS.openEditor}</button>` : ''}
         <button class="detail-close" onclick="closeDetail()">\u2715</button>
       </div>
     </div>
@@ -505,41 +512,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 = {
@@ -561,6 +579,7 @@ const EXT_TO_LANG = {
 const PREFERRED_FILE = 'SKILL.MD';
 let _contentCodeEl = null;
 let _contentPluginId = null;
+let _contentPluginDir = null;
 
 function highlightSource(text, fileName) {
   const ext = (fileName || '').split('.').pop().toLowerCase();
@@ -588,31 +607,94 @@ function getContentCodeEl() {
   return _contentCodeEl;
 }
 
-async function openInEditor() {
-  if (!_contentPluginId) return;
-  const relativePath = document.getElementById('contentViewerPath').textContent || '';
+async function postAndFlash(endpoint, data, btn) {
   try {
-    await fetch('/api/open-in-editor', {
+    await fetch(endpoint, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ pluginId: _contentPluginId, relativePath }),
+      body: JSON.stringify(data),
     });
+    if (btn) flashButton(btn);
   } catch {}
 }
 
-async function openFolderInEditor({ pluginId, marketplaceName } = {}) {
+async function openInEditor(event) {
+  if (!_contentPluginId) return;
+  const relativePath = document.getElementById('contentViewerPath').textContent || '';
+  await postAndFlash('/api/open-in-editor', { pluginId: _contentPluginId, relativePath }, event?.currentTarget);
+}
+
+const CHECKMARK_SVG =
+  '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>';
+
+function flashButton(btn) {
+  if (btn._flashTimeout) clearTimeout(btn._flashTimeout);
+  if (!btn._flashOrig) btn._flashOrig = btn.innerHTML;
+  btn.innerHTML = CHECKMARK_SVG;
+  btn.classList.add('copy-success');
+  btn._flashTimeout = setTimeout(() => {
+    btn.innerHTML = btn._flashOrig;
+    btn.classList.remove('copy-success');
+    btn._flashOrig = null;
+    btn._flashTimeout = null;
+  }, 1000);
+}
+
+async function copyToClipboard(text, btn) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+  }
+  if (btn) flashButton(btn);
+}
+
+async function copyContentPath(event) {
+  if (!_contentPluginDir) return;
+  const relativePath = document.getElementById('contentViewerPath').textContent || '';
+  const full = relativePath ? `${_contentPluginDir}/${relativePath}` : _contentPluginDir;
+  await copyToClipboard(full, event?.currentTarget);
+}
+
+async function copyPluginPath(pluginDir, event) {
+  if (pluginDir) await copyToClipboard(pluginDir, event?.currentTarget);
+}
+
+async function openFolderInEditor({ pluginId, marketplaceName, event } = {}) {
   if (!pluginId && !marketplaceName) return;
+  await postAndFlash('/api/open-folder-in-editor', { pluginId, marketplaceName }, event?.currentTarget);
+}
+
+async function openReadmeModal(title, fetchUrl) {
+  _contentPluginId = null;
+  _contentPluginDir = 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 {
-    await fetch('/api/open-folder-in-editor', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ pluginId, marketplaceName }),
-    });
-  } catch {}
+    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 comps = await fetchComponents(pluginId);
+  _contentPluginDir = comps?._pluginDir || null;
   const plugin = findPlugin(pluginId);
   const label = COMP_LABELS[componentType] || componentType;
   document.getElementById('contentModalTitle').textContent = `${plugin?.name || pluginId} \u2014 ${label}`;
@@ -732,7 +814,7 @@ function showMarketplaceDetail(name) {
     <div class="detail-header">
       <h3>${ICONS.marketplace} ${esc(m.name)} ${m.version ? `<span class="version">v${esc(m.version)}</span>` : ''}</h3>
       <div class="detail-header-actions">
-        ${m.installLocation ? `<button class="modal-action-btn" title="Open in VS Code" onclick="openFolderInEditor({marketplaceName:'${esc(m.name)}'})">${ICONS.openEditor}</button>` : ''}
+        ${m.installLocation ? `<button class="modal-action-btn" title="${esc(m.installLocation)}" onclick="copyPluginPath('${escJs(m.installLocation)}', event)">${ICONS.copyPath}</button><button class="modal-action-btn" title="Open in VS Code" onclick="openFolderInEditor({marketplaceName:'${esc(m.name)}',event})">${ICONS.openEditor}</button>` : ''}
         <button class="detail-close" onclick="closeDetail()">\u2715</button>
       </div>
     </div>
@@ -752,6 +834,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">
@@ -968,6 +1051,11 @@ function esc(str) {
     .replace(/'/g, '&#39;');
 }
 
+function escJs(str) {
+  if (!str) return '';
+  return str.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+
 function shortenPath(p) {
   if (!p) return '';
   const home = '~';

package/public/index.html

@@ -158,7 +158,8 @@
       <div class="modal-header">
         <h3 id="contentModalTitle">File Preview</h3>
         <div class="modal-header-actions">
-          <button class="modal-action-btn" id="contentOpenEditor" title="Open in VS Code" onclick="openInEditor()"></button>
+          <button class="modal-action-btn" id="contentCopyPath" title="Copy path" onclick="copyContentPath(event)"></button>
+          <button class="modal-action-btn" id="contentOpenEditor" title="Open in VS Code" onclick="openInEditor(event)"></button>
           <button class="modal-close" onclick="closeModal('contentModal')">&#10005;</button>
         </div>
       </div>

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 === */
 
@@ -1017,6 +1042,21 @@ body.light .scope-toggle.local {
   color: var(--accent);
   background: var(--hover);
 }
+.modal-action-btn.copy-success {
+  color: var(--success, #22c55e);
+  animation: copy-flash 0.3s ease;
+}
+@keyframes copy-flash {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 .modal-close {
   background: none;
   border: none;

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);