claude-code-marketplace 0.2.1 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-marketplace",
-  "version": "0.2.1",
+  "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();
@@ -388,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}
@@ -503,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();
@@ -530,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}`;
@@ -649,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">

package/public/index.html

@@ -135,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

@@ -720,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;
@@ -997,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;
@@ -1004,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 });
 });