claude-code-marketplace 0.6.0 → 0.7.0

package/package.json

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

package/public/app.js

@@ -48,11 +48,14 @@ ICONS.readme = SVG(
 );
 ICONS.settings = ICONS.gear;
 ICONS.claudeMd = ICONS.readme;
+ICONS.agentsMd = ICONS.readme;
+ICONS.agentSkills = ICONS.skills;
 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_DIR_MAP = { skills: 'skills', commands: 'commands', agents: 'agents', agentSkills: '~agents' };
+const COMP_HAS_DIR = new Set(Object.keys(COMP_DIR_MAP));
 const COMP_LABELS = {
   skills: 'Skills',
   commands: 'Commands',
@@ -62,10 +65,13 @@ const COMP_LABELS = {
   lspServers: 'LSP Servers',
   settings: 'Settings',
   claudeMd: 'CLAUDE.md',
+  agentsMd: 'AGENTS.md',
+  agentSkills: 'Agent Skills (not-supported)',
   readme: 'README',
 };
 
 const VIRTUAL_ROOT_PREFIX = '~root/';
+const VIRTUAL_AGENTS_PREFIX = '~agents/';
 
 function encodePathSegments(p) {
   return p.split('/').map(encodeURIComponent).join('/');
@@ -81,6 +87,12 @@ function claudeMdLabel(name, count) {
   return count > 1 ? 'CLAUDE.md (.claude/)' : name;
 }
 
+function compItemLabel(type, name, count) {
+  if (type === 'claudeMd') return claudeMdLabel(name, count);
+  if (type === 'agentsMd' && name.startsWith(VIRTUAL_ROOT_PREFIX)) return name.slice(VIRTUAL_ROOT_PREFIX.length);
+  return name;
+}
+
 function updateArrow(p) {
   if (!p.hasUpdate) return '';
   const title =
@@ -203,7 +215,12 @@ async function loadData() {
     }
 
     renderTree();
-    if (selectedPluginId) showDetail(selectedPluginId);
+    if (selectedPluginId) {
+      showDetail(selectedPluginId);
+    } else {
+      const userCustom = marketplaces.flatMap((m) => m.plugins).find((p) => p.fullId === '_custom/user');
+      if (userCustom) showDetail('_custom/user');
+    }
 
     // Prefetch components for all plugins in background
     for (const m of marketplaces) {
@@ -603,7 +620,8 @@ function renderDetailComponents(pluginId, comps, hasDirAccess) {
       .map(([type, items]) => {
         const names = Array.isArray(items) ? items : [];
         const count = names.length || items;
-        let html = `<div class="detail-comp-group">
+        const groupCls = type === 'agentSkills' || type === 'agentsMd' ? ' view-only' : '';
+        let html = `<div class="detail-comp-group${groupCls}">
       <div class="detail-comp-header">
         <span class="comp-icon">${ICONS[type] || ''}</span>
         ${COMP_LABELS[type] || type}
@@ -612,7 +630,7 @@ function renderDetailComponents(pluginId, comps, hasDirAccess) {
 
         if (names.length) {
           const configFile = configFiles[type];
-          const dir = COMP_HAS_DIR.has(type) ? type : null;
+          const dir = COMP_DIR_MAP[type] || null;
           html += '<div class="detail-comp-items">';
           for (const name of names) {
             const clickPath = configFile || (dir ? `${dir}/${name}` : name);
@@ -620,9 +638,10 @@ function renderDetailComponents(pluginId, comps, hasDirAccess) {
             const click = hasDirAccess
               ? ` onclick="openContentModal('${escJs(pluginId)}', '${escJs(clickPath)}', '${escJs(type)}')"`
               : '';
+            const isFolder = type === 'skills' || type === 'agentSkills';
             html += `<div class="detail-comp-item${cls}"${click}>
-            <span class="icon">${type === 'skills' ? ICONS.folder : ICONS.file}</span>
-            ${esc(type === 'claudeMd' ? claudeMdLabel(name, names.length) : name)}
+            <span class="icon">${isFolder ? ICONS.folder : ICONS.file}</span>
+            ${esc(compItemLabel(type, name, names.length))}
           </div>`;
           }
           html += '</div>';
@@ -732,10 +751,12 @@ async function copyToClipboard(text, btn) {
 async function copyContentPath(event) {
   if (!_contentPluginDir) return;
   const relativePath = getContentRelativePath();
+  const parentDir = _contentPluginDir.replace(/\/[^/]+\/?$/, '');
   let full;
   if (relativePath.startsWith(VIRTUAL_ROOT_PREFIX)) {
-    const parentDir = _contentPluginDir.replace(/\/[^/]+\/?$/, '');
     full = `${parentDir}/${relativePath.slice(VIRTUAL_ROOT_PREFIX.length)}`;
+  } else if (relativePath.startsWith(VIRTUAL_AGENTS_PREFIX)) {
+    full = `${parentDir}/.agents/skills/${relativePath.slice(VIRTUAL_AGENTS_PREFIX.length)}`;
   } else {
     full = relativePath ? `${_contentPluginDir}/${relativePath}` : _contentPluginDir;
   }
@@ -798,6 +819,15 @@ async function loadContentTree(pluginId, treePath, container, depth, autoSelect)
     const data = await res.json();
 
     if (data.type === 'directory') {
+      if (!data.entries.length) {
+        container.innerHTML =
+          '<div style="color:var(--text-dim);font-size:11px;padding:8px 12px">(empty directory)</div>';
+        if (autoSelect) {
+          const codeEl = getContentCodeEl();
+          codeEl.innerHTML = '<span style="color:var(--text-dim)">No files in this directory</span>';
+        }
+        return;
+      }
       let firstFile = null;
       let preferredFile = null;
       for (const entry of data.entries) {
@@ -843,7 +873,11 @@ async function loadContentTree(pluginId, treePath, container, depth, autoSelect)
 async function loadContentFile(pluginId, filePath) {
   const codeEl = getContentCodeEl();
   const pathEl = document.getElementById('contentViewerPath');
-  pathEl.textContent = filePath.startsWith(VIRTUAL_ROOT_PREFIX) ? filePath.slice(VIRTUAL_ROOT_PREFIX.length) : filePath;
+  pathEl.textContent = filePath.startsWith(VIRTUAL_ROOT_PREFIX)
+    ? filePath.slice(VIRTUAL_ROOT_PREFIX.length)
+    : filePath.startsWith(VIRTUAL_AGENTS_PREFIX)
+      ? `.agents/skills/${filePath.slice(VIRTUAL_AGENTS_PREFIX.length)}`
+      : filePath;
   pathEl.dataset.rawPath = filePath;
   codeEl.innerHTML = '<span style="color:var(--text-dim)">Loading...</span>';
 
@@ -1320,6 +1354,13 @@ function handleKeydown(e) {
     return;
   }
 
+  if (matchKey(e, 'u') || matchKey(e, 'p')) {
+    e.preventDefault();
+    const scope = matchKey(e, 'u') ? 'user' : 'project';
+    openCustomClaudeMd(scope);
+    return;
+  }
+
   const rows = getVisibleRows();
   const idx = getFocusedIndex(rows);
 
@@ -1382,6 +1423,19 @@ function handleKeydown(e) {
   }
 }
 
+async function openCustomClaudeMd(scope) {
+  const pluginId = `_custom/${scope}`;
+  const plugin = findPlugin(pluginId);
+  if (!plugin) return;
+  const comps = (await fetchComponents(pluginId)) || {};
+  const files = comps.claudeMd;
+  if (!files?.length) return;
+  // prefer the root CLAUDE.md over the .claude/ one
+  const file = files.find((f) => !f.startsWith('~root/')) || files[0];
+  showDetail(pluginId);
+  openContentModal(pluginId, file, 'claudeMd');
+}
+
 let _helpModalHandler = null;
 
 function showHelpModal() {

package/public/index.html

@@ -136,6 +136,8 @@
               <tr><td><kbd>E</kbd></td><td>Expand / Collapse all</td></tr>
               <tr><td><kbd>R</kbd></td><td>Refresh data</td></tr>
               <tr><td><kbd>T</kbd></td><td>Toggle theme</td></tr>
+              <tr><td><kbd>U</kbd></td><td>Open user CLAUDE.md</td></tr>
+              <tr><td><kbd>P</kbd></td><td>Open project CLAUDE.md</td></tr>
               <tr><td><kbd>Esc</kbd></td><td>Close panel / blur input</td></tr>
             </table>
           </div>

package/public/style.css

@@ -14,14 +14,15 @@
   --accent-text: #f0a070;
   --accent-dim: rgba(232, 111, 51, 0.22);
   --accent-glow: rgba(232, 111, 51, 0.55);
+  --gold: #d9b667;
   --success: #3ecf8e;
   --success-dim: rgba(62, 207, 142, 0.18);
   --warning: #f0b429;
   --warning-dim: rgba(240, 180, 41, 0.18);
-  --error: #ef4444;
-  --error-dim: rgba(239, 68, 68, 0.18);
-  --team: #c4956a;
-  --team-dim: rgba(196, 149, 106, 0.18);
+  --error: #ef5350;
+  --error-dim: rgba(239, 83, 80, 0.18);
+  --team: #60a5fa;
+  --team-dim: rgba(96, 165, 250, 0.18);
   --plan: #86a886;
   --plan-dim: rgba(134, 168, 134, 0.18);
   --mono: 'IBM Plex Mono', monospace;
@@ -37,23 +38,24 @@
 
 body.light {
   --bg-deep: #e8e6e3;
-  --bg-surface: #f4f3f1;
-  --bg-elevated: #dddbd8;
+  --bg-surface: #efede9;
+  --bg-elevated: #f7f4f0;
   --bg-hover: #d2d0cc;
-  --border: #a09b94;
+  --border: #cfcbc4;
   --text-primary: #0a0a0a;
-  --text-secondary: #333333;
-  --text-tertiary: #555555;
-  --text-muted: #777777;
+  --text-secondary: #444444;
+  --text-tertiary: #666666;
+  --text-muted: #888888;
   --accent-text: #b85a20;
   --accent-dim: rgba(232, 111, 51, 0.18);
   --accent-glow: rgba(232, 111, 51, 0.5);
+  --gold: #a8842f;
   --success: #1a8a5a;
   --success-dim: rgba(26, 138, 90, 0.15);
   --warning: #b07d0a;
   --warning-dim: rgba(176, 125, 10, 0.15);
-  --error: #c53030;
-  --error-dim: rgba(197, 48, 48, 0.15);
+  --error: #c0392b;
+  --error-dim: rgba(192, 57, 43, 0.15);
   --plan: #5a7a5a;
   --plan-dim: rgba(90, 122, 90, 0.15);
 
@@ -156,14 +158,14 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  background: var(--bg-elevated);
+  background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: 6px;
   padding: 6px 10px;
-  transition: border-color 0.15s ease;
+  transition: box-shadow 0.15s ease;
 }
 .topbar-search:focus-within {
-  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-dim);
 }
 .topbar-search svg {
   color: var(--text-muted);
@@ -183,7 +185,7 @@ body {
 }
 
 .topbar-select {
-  background: var(--bg-elevated);
+  background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--text-secondary);
@@ -194,7 +196,7 @@ body {
   cursor: pointer;
 }
 .topbar-select:focus {
-  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-dim);
 }
 .topbar-select option {
   background: var(--bg-surface);
@@ -1177,17 +1179,17 @@ body.light .scope-toggle.local {
 .modal-field input[type='text'] {
   width: 100%;
   padding: 8px 10px;
-  background: var(--bg-elevated);
+  background: var(--bg-deep);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--text-primary);
   font-family: var(--mono);
   font-size: 12px;
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: box-shadow 0.15s ease;
 }
 .modal-field input[type='text']:focus {
-  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-dim);
 }
 .modal-field input[type='text']::placeholder {
   color: var(--text-muted);
@@ -1389,3 +1391,10 @@ kbd {
   color: var(--text-muted);
   opacity: 0.6;
 }
+
+.detail-comp-group.view-only {
+  opacity: 0.55;
+}
+.detail-comp-group.view-only:hover {
+  opacity: 0.85;
+}

package/server.js

@@ -478,6 +478,21 @@ function rescanVirtualComponents(basePath, scope) {
   }
   if (claudeMdFiles.length) components.claudeMd = claudeMdFiles;
 
+  if (scope === 'project') {
+    const parentAgents = path.join(basePath, '..', 'AGENTS.md');
+    if (fs.existsSync(parentAgents)) components.agentsMd = ['~root/AGENTS.md'];
+  }
+
+  const agentSkillsDir = path.join(basePath, '..', '.agents', 'skills');
+  if (fs.existsSync(agentSkillsDir) && fs.statSync(agentSkillsDir).isDirectory()) {
+    try {
+      const dirs = fs.readdirSync(agentSkillsDir).filter(d => {
+        try { return fs.statSync(path.join(agentSkillsDir, d)).isDirectory(); } catch { return false; }
+      });
+      if (dirs.length) components.agentSkills = dirs;
+    } catch {}
+  }
+
   return components;
 }
 
@@ -585,6 +600,9 @@ function resolvePluginDir(fullId, marketplaces) {
 }
 
 function resolveVirtualRelPath(pluginId, relPath) {
+  if ((pluginId === '_custom/user' || pluginId === '_custom/project') && relPath.startsWith('~agents/')) {
+    return path.join('..', '.agents', 'skills', relPath.slice('~agents/'.length));
+  }
   return pluginId === '_custom/project' && relPath.startsWith('~root/')
     ? path.join('..', relPath.slice(6))
     : relPath;
@@ -592,8 +610,13 @@ function resolveVirtualRelPath(pluginId, relPath) {
 
 function isPathAllowed(fullPath, pluginDir, pluginId) {
   if (fullPath.startsWith(path.resolve(pluginDir))) return true;
+  const parent = path.resolve(pluginDir, '..');
   if (pluginId === '_custom/project') {
-    return fullPath === path.join(path.resolve(pluginDir, '..'), 'CLAUDE.md');
+    if (fullPath === path.join(parent, 'CLAUDE.md') || fullPath === path.join(parent, 'AGENTS.md')) return true;
+  }
+  if (pluginId === '_custom/user' || pluginId === '_custom/project') {
+    const agentsRoot = path.join(parent, '.agents', 'skills');
+    if (fullPath === agentsRoot || fullPath.startsWith(agentsRoot + path.sep)) return true;
   }
   return false;
 }