claude-code-marketplace 0.2.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Oleksii Nikiforov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,6 +2,8 @@
 
 A web-based dashboard for browsing, installing, and managing [Claude Code](https://docs.anthropic.com/en/docs/claude-code) plugins across multiple marketplaces.
 
+[![npm](https://img.shields.io/npm/v/claude-code-marketplace)](https://www.npmjs.com/package/claude-code-marketplace)
+
 <p align="center">
   <img src="assets/main-dark.png" alt="Marketplace — dark theme" width="100%">
 </p>

package/package.json

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

package/public/app.js

@@ -43,6 +43,8 @@ const ICONS = {
     '<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.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>';
 const COMP_HAS_DIR = new Set(['skills', 'commands', 'agents']);
 const COMP_LABELS = {
   skills: 'Skills',
@@ -65,6 +67,7 @@ function updateArrow(p) {
 
 // --- Init ---
 document.addEventListener('DOMContentLoaded', () => {
+  document.getElementById('contentOpenEditor').innerHTML = ICONS.openEditor;
   restoreAppState();
   loadProject();
   loadData();
@@ -101,10 +104,10 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   const savedTheme = localStorage.getItem('theme');
-  if (savedTheme === 'light') {
-    document.body.classList.add('light');
-  } else if (savedTheme === 'dark') {
+  if (savedTheme === 'dark') {
     document.body.classList.add('dark-forced');
+  } else {
+    document.body.classList.add('light');
   }
   syncHljsTheme();
 
@@ -225,7 +228,9 @@ function renderTree() {
     return;
   }
 
-  let html = '';
+  const allIds = marketplaces.map((m) => `m_${safeId(m.name)}`);
+  const allExpanded = allIds.length > 0 && allIds.every((id) => expandedNodes.has(id));
+  let html = `<div class="tree-expand-toggle" id="toggleExpandBtn" onclick="toggleExpandAll()">${allExpanded ? 'Collapse All' : 'Expand All'}</div>`;
 
   for (const m of marketplaces) {
     const mid = safeId(m.name);
@@ -386,7 +391,10 @@ async function showDetail(pluginId) {
   panel.innerHTML = `
     <div class="detail-header">
       <h3>${headerIcon} ${esc(plugin.name)} ${plugin.version ? `<span class="version">v${esc(plugin.version)}</span>` : ''}</h3>
-      <button class="detail-close" onclick="closeDetail()">\u2715</button>
+      <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>` : ''}
+        <button class="detail-close" onclick="closeDetail()">\u2715</button>
+      </div>
     </div>
     <div class="detail-body">
       ${updateBanner}
@@ -501,6 +509,7 @@ const EXT_TO_LANG = {
 
 const PREFERRED_FILE = 'SKILL.MD';
 let _contentCodeEl = null;
+let _contentPluginId = null;
 
 function highlightSource(text, fileName) {
   const ext = (fileName || '').split('.').pop().toLowerCase();
@@ -528,7 +537,31 @@ function getContentCodeEl() {
   return _contentCodeEl;
 }
 
+async function openInEditor() {
+  if (!_contentPluginId) return;
+  const relativePath = document.getElementById('contentViewerPath').textContent || '';
+  try {
+    await fetch('/api/open-in-editor', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pluginId: _contentPluginId, relativePath }),
+    });
+  } catch {}
+}
+
+async function openFolderInEditor({ pluginId, marketplaceName } = {}) {
+  if (!pluginId && !marketplaceName) return;
+  try {
+    await fetch('/api/open-folder-in-editor', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pluginId, marketplaceName }),
+    });
+  } catch {}
+}
+
 async function openContentModal(pluginId, initialPath, componentType) {
+  _contentPluginId = pluginId;
   const plugin = findPlugin(pluginId);
   const label = COMP_LABELS[componentType] || componentType;
   document.getElementById('contentModalTitle').textContent = `${plugin?.name || pluginId} \u2014 ${label}`;
@@ -647,7 +680,10 @@ function showMarketplaceDetail(name) {
   panel.innerHTML = `
     <div class="detail-header">
       <h3>${ICONS.marketplace} ${esc(m.name)} ${m.version ? `<span class="version">v${esc(m.version)}</span>` : ''}</h3>
-      <button class="detail-close" onclick="closeDetail()">\u2715</button>
+      <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>` : ''}
+        <button class="detail-close" onclick="closeDetail()">\u2715</button>
+      </div>
     </div>
     <div class="detail-body">
       <div class="detail-section">
@@ -810,6 +846,17 @@ function toggleChildren(id) {
   }
 }
 
+function toggleExpandAll() {
+  const allIds = marketplaces.map((m) => `m_${safeId(m.name)}`);
+  const collapse = allIds.length > 0 && allIds.every((id) => expandedNodes.has(id));
+  for (const id of allIds) {
+    if (collapse) expandedNodes.delete(id);
+    else expandedNodes.add(id);
+  }
+  saveExpandedNodes();
+  renderTree();
+}
+
 function findPlugin(id) {
   for (const m of marketplaces) {
     const p = m.plugins.find((p) => p.fullId === id);
@@ -998,6 +1045,12 @@ function handleKeydown(e) {
     return;
   }
 
+  if (matchKey(e, 'e')) {
+    e.preventDefault();
+    toggleExpandAll();
+    return;
+  }
+
   if (matchKey(e, 'r')) {
     e.preventDefault();
     refresh();

package/public/index.html

@@ -110,6 +110,7 @@
               <tr><td><kbd>?</kbd></td><td>Show keyboard shortcuts</td></tr>
               <tr><td><kbd>/</kbd></td><td>Focus search</td></tr>
               <tr><td><kbd>S</kbd></td><td>Focus scope filter</td></tr>
+              <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>Esc</kbd></td><td>Close panel / blur input</td></tr>
             </table>
@@ -134,7 +135,10 @@
     <div class="modal content-modal" onclick="event.stopPropagation()">
       <div class="modal-header">
         <h3 id="contentModalTitle">File Preview</h3>
-        <button class="modal-close" onclick="closeModal('contentModal')">&#10005;</button>
+        <div class="modal-header-actions">
+          <button class="modal-action-btn" id="contentOpenEditor" title="Open in VS Code" onclick="openInEditor()"></button>
+          <button class="modal-close" onclick="closeModal('contentModal')">&#10005;</button>
+        </div>
       </div>
       <div class="content-modal-body">
         <div class="content-tree" id="contentTree"></div>

package/public/style.css

@@ -31,8 +31,8 @@
   --scope-user-dim: rgba(196, 149, 106, 0.18);
   --scope-project: #7ab5a0;
   --scope-project-dim: rgba(122, 181, 160, 0.18);
-  --scope-local: #f0b429;
-  --scope-local-dim: rgba(240, 180, 41, 0.18);
+  --scope-local: #8a9bb5;
+  --scope-local-dim: rgba(138, 155, 181, 0.18);
 }
 
 body.light {
@@ -57,43 +57,12 @@ body.light {
   --plan: #5a7a5a;
   --plan-dim: rgba(90, 122, 90, 0.15);
 
-  --scope-user: #9a6d3a;
-  --scope-user-dim: rgba(154, 109, 58, 0.15);
+  --scope-user: #8a7055;
+  --scope-user-dim: rgba(138, 112, 85, 0.12);
   --scope-project: #4d8a72;
   --scope-project-dim: rgba(77, 138, 114, 0.15);
-  --scope-local: #b07d0a;
-  --scope-local-dim: rgba(176, 125, 10, 0.15);
-}
-
-@media (prefers-color-scheme: light) {
-  body:not(.dark-forced) {
-    --bg-deep: #e8e6e3;
-    --bg-surface: #f4f3f1;
-    --bg-elevated: #dddbd8;
-    --bg-hover: #d2d0cc;
-    --border: #a09b94;
-    --text-primary: #0a0a0a;
-    --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);
-    --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);
-    --plan: #5a7a5a;
-    --plan-dim: rgba(90, 122, 90, 0.15);
-    --scope-user: #9a6d3a;
-    --scope-user-dim: rgba(154, 109, 58, 0.15);
-    --scope-project: #4d8a72;
-    --scope-project-dim: rgba(77, 138, 114, 0.15);
-    --scope-local: #b07d0a;
-    --scope-local-dim: rgba(176, 125, 10, 0.15);
-  }
+  --scope-local: #6b7d96;
+  --scope-local-dim: rgba(107, 125, 150, 0.12);
 }
 
 /* === RESET === */
@@ -110,7 +79,7 @@ body {
   background: var(--bg-deep);
   color: var(--text-primary);
   line-height: 1.5;
-  height: 100vh;
+  height: calc(100vh / 1.2);
   display: flex;
   zoom: 1.2;
   flex-direction: column;
@@ -303,6 +272,7 @@ body {
 .main-layout {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -316,8 +286,22 @@ body {
   min-width: 400px;
 }
 
+.tree-expand-toggle {
+  padding: 4px 12px;
+  font-size: 10px;
+  color: var(--text-muted);
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-family: var(--mono);
+}
+.tree-expand-toggle:hover {
+  color: var(--accent);
+}
+
 .tree-container {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -459,65 +443,51 @@ body {
   border-color: rgba(196, 149, 106, 0.4);
   color: rgba(196, 149, 106, 0.5);
 }
-.scope-toggle.user.active {
-  background: var(--scope-user-dim);
-  color: var(--scope-user);
-  border-color: var(--scope-user);
-}
+.scope-toggle.user.active,
 .scope-toggle.user.disabled {
   background: var(--scope-user-dim);
   color: var(--scope-user);
   border-color: var(--scope-user);
-  opacity: 0.4;
-  text-decoration: line-through;
 }
 
 .scope-toggle.project {
   border-color: rgba(122, 181, 160, 0.4);
   color: rgba(122, 181, 160, 0.5);
 }
-.scope-toggle.project.active {
-  background: var(--scope-project-dim);
-  color: var(--scope-project);
-  border-color: var(--scope-project);
-}
+.scope-toggle.project.active,
 .scope-toggle.project.disabled {
   background: var(--scope-project-dim);
   color: var(--scope-project);
   border-color: var(--scope-project);
-  opacity: 0.4;
-  text-decoration: line-through;
 }
 
 .scope-toggle.local {
-  border-color: rgba(240, 180, 41, 0.4);
-  color: rgba(240, 180, 41, 0.5);
-}
-.scope-toggle.local.active {
-  background: var(--scope-local-dim);
-  color: var(--scope-local);
-  border-color: var(--scope-local);
+  border-color: rgba(138, 155, 181, 0.4);
+  color: rgba(138, 155, 181, 0.5);
 }
+.scope-toggle.local.active,
 .scope-toggle.local.disabled {
   background: var(--scope-local-dim);
   color: var(--scope-local);
   border-color: var(--scope-local);
+}
+.scope-toggle.disabled {
   opacity: 0.4;
   text-decoration: line-through;
 }
 
 /* Light theme: boost inactive scope contrast further */
 body.light .scope-toggle.user {
-  border-color: rgba(154, 109, 58, 0.5);
-  color: rgba(154, 109, 58, 0.6);
+  border-color: rgba(138, 112, 85, 0.4);
+  color: rgba(138, 112, 85, 0.5);
 }
 body.light .scope-toggle.project {
   border-color: rgba(77, 138, 114, 0.5);
   color: rgba(77, 138, 114, 0.6);
 }
 body.light .scope-toggle.local {
-  border-color: rgba(176, 125, 10, 0.5);
-  color: rgba(176, 125, 10, 0.6);
+  border-color: rgba(107, 125, 150, 0.4);
+  color: rgba(107, 125, 150, 0.5);
 }
 
 /* === BADGES === */
@@ -652,7 +622,7 @@ body.light .scope-toggle.local {
 .tree-desc-inline {
   font-size: 11px;
   color: var(--text-muted);
-  opacity: 0.8;
+  opacity: 0.95;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -750,6 +720,12 @@ body.light .scope-toggle.local {
   font-size: 11px;
   font-weight: 400;
 }
+.detail-header-actions,
+.modal-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 .detail-close {
   background: transparent;
   border: 1px solid transparent;
@@ -1027,6 +1003,20 @@ body.light .scope-toggle.local {
   font-size: 13px;
   font-weight: 600;
 }
+.modal-action-btn {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+}
+.modal-action-btn:hover {
+  color: var(--accent);
+  background: var(--hover);
+}
 .modal-close {
   background: none;
   border: none;
@@ -1034,6 +1024,10 @@ body.light .scope-toggle.local {
   cursor: pointer;
   font-size: 16px;
   padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
 }
 .modal-body {
   padding: 16px;

package/server.js

@@ -202,6 +202,21 @@ function loadMarketplaces() {
 
       const compKeys = ['skills', 'commands', 'agents', 'mcpServers', 'hooks', 'lspServers'];
 
+      // Resolve origin dir from marketplace source
+      let originDir = null;
+      if (installLocation) {
+        const rawSource = pd.source;
+        if (typeof rawSource === 'string' && rawSource) {
+          const srcDir = path.resolve(installLocation, rawSource);
+          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;
+        }
+      }
+
       // Resolve plugin dir for filesystem-based component counts
       let pluginDir = null;
       for (const s of ['user', 'project', 'local']) {
@@ -209,11 +224,7 @@ function loadMarketplaces() {
         const resolved = resolveInstallPath(ip);
         if (resolved) { pluginDir = resolved; break; }
       }
-      if (!pluginDir && installLocation) {
-        const pluginSubdir = path.join(installLocation, 'plugins', pd.name);
-        if (fs.existsSync(pluginSubdir)) pluginDir = pluginSubdir;
-        else if ((mData.plugins || []).length === 1) pluginDir = installLocation;
-      }
+      if (!pluginDir) pluginDir = originDir;
 
       const fsComps = pluginDir ? countComponents(pluginDir) : null;
       const components = {};
@@ -253,6 +264,7 @@ function loadMarketplaces() {
         installedScopes,
         components,
         _pluginDir: pluginDir,
+        _originDir: originDir,
         _fsComps: fsComps,
         metadata: Object.fromEntries(
           Object.entries(pd).filter(([k]) => !['name', 'description', 'source', 'version', ...compKeys].includes(k))
@@ -562,6 +574,54 @@ app.get('/api/plugins/:pluginId/preview/*', (req, res) => {
   }
 });
 
+function openVSCode(args, res) {
+  execFile('code', args, { shell: true }, (err) => {
+    if (err) return res.status(500).json({ error: 'Failed to open editor' });
+    res.json({ ok: true });
+  });
+}
+
+app.post('/api/open-in-editor', (req, res) => {
+  const { pluginId, relativePath } = req.body;
+  if (!pluginId) return res.status(400).json({ error: 'pluginId required' });
+
+  const marketplaces = getCachedMarketplaces();
+  const pluginDir = resolvePluginDir(pluginId, marketplaces);
+  if (!pluginDir) return res.status(404).json({ error: 'Plugin not found' });
+
+  const args = ['-n', pluginDir];
+
+  const pluginJson = path.join(pluginDir, '.claude-plugin', 'plugin.json');
+  if (fs.existsSync(pluginJson)) args.push(pluginJson);
+
+  if (relativePath) {
+    const fullPath = path.resolve(pluginDir, relativePath);
+    if (fullPath.startsWith(path.resolve(pluginDir))) {
+      args.push(fullPath);
+    }
+  }
+
+  openVSCode(args, res);
+});
+
+app.post('/api/open-folder-in-editor', (req, res) => {
+  const { pluginId, marketplaceName } = req.body;
+  const marketplaces = getCachedMarketplaces();
+  let folder;
+
+  if (pluginId) {
+    const plugin = findPlugin(pluginId, marketplaces);
+    folder = plugin?._originDir || plugin?._pluginDir || null;
+  } else if (marketplaceName) {
+    const m = marketplaces.find(m => m.name === marketplaceName);
+    folder = m?.installLocation || null;
+  }
+
+  if (!folder) return res.status(404).json({ error: 'Directory not found' });
+
+  openVSCode(['-n', folder], res);
+});
+
 app.get('/api/project', (req, res) => {
   res.json({ path: projectPath });
 });