claude-code-marketplace 0.2.1 → 0.3.1

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.1",
   "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();
@@ -88,17 +91,20 @@ document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('addMarketplaceBtn').addEventListener('click', openAddMarketplace);
   document.getElementById('helpBtn').addEventListener('click', showHelpModal);
 
-  // Enter key in modal
-  document.getElementById('marketplaceSource').addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      submitAddMarketplace();
-    }
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      closeModal('addMarketplaceModal');
-    }
-  });
+  function bindModalKeys(inputId, modalId, onSubmit) {
+    document.getElementById(inputId).addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onSubmit();
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeModal(modalId);
+      }
+    });
+  }
+  bindModalKeys('marketplaceSource', 'addMarketplaceModal', submitAddMarketplace);
+  bindModalKeys('projectPathInput', 'projectPickerModal', submitProjectPicker);
 
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme === 'dark') {
@@ -138,6 +144,7 @@ async function loadProject() {
     const data = await res.json();
     document.getElementById('projectPath').textContent = shortenPath(data.path);
     document.getElementById('projectBtn').title = data.path;
+    saveRecentProject(data.path);
   } catch {}
 }
 
@@ -178,25 +185,68 @@ async function refresh() {
   toast('Data refreshed', 'success');
 }
 
-async function changeProject() {
-  // Try native directory picker API first, fall back to prompt
-  let dirPath = null;
-  if (window.showDirectoryPicker) {
-    try {
-      const handle = await window.showDirectoryPicker({ mode: 'read' });
-      dirPath = handle.name;
-      // showDirectoryPicker doesn't give full path — fall back to prompt with the name as hint
-      dirPath = prompt('Confirm project directory (browser cannot read full path):', dirPath);
-    } catch (e) {
-      if (e.name === 'AbortError') return;
-    }
+function getRecentProjects() {
+  try {
+    return JSON.parse(localStorage.getItem('recentProjects') || '[]');
+  } catch {
+    return [];
   }
-  if (!dirPath) {
-    const current = document.getElementById('projectBtn').title;
-    dirPath = prompt('Project directory:', current);
+}
+
+function saveRecentProject(projectPath) {
+  const recent = getRecentProjects().filter((p) => p !== projectPath);
+  recent.unshift(projectPath);
+  localStorage.setItem('recentProjects', JSON.stringify(recent.slice(0, 10)));
+}
+
+function removeRecentProject(projectPath, e) {
+  e.stopPropagation();
+  const recent = getRecentProjects().filter((p) => p !== projectPath);
+  localStorage.setItem('recentProjects', JSON.stringify(recent));
+  renderRecentProjects();
+}
+
+function renderRecentProjects() {
+  const container = document.getElementById('recentProjectsList');
+  const current = document.getElementById('projectBtn').title;
+  const recent = getRecentProjects().filter((p) => p !== current);
+  if (!recent.length) {
+    container.innerHTML = '';
+    return;
   }
-  if (!dirPath) return;
+  const escAttr = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+  const escJs = (s) => s.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+  container.innerHTML =
+    '<div class="recent-projects-label">Recent</div>' +
+    recent
+      .map(
+        (p) =>
+          `<div class="recent-project-item" onclick="selectRecentProject('${escJs(p)}')">` +
+          `<span>${escAttr(p)}</span>` +
+          `<button class="recent-project-remove" onclick="removeRecentProject('${escJs(p)}', event)" title="Remove">&#10005;</button>` +
+          `</div>`,
+      )
+      .join('');
+}
 
+function selectRecentProject(projectPath) {
+  document.getElementById('projectPathInput').value = projectPath;
+}
+
+function changeProject() {
+  const current = document.getElementById('projectBtn').title;
+  document.getElementById('projectPathInput').value = current;
+  renderRecentProjects();
+  document.getElementById('projectPickerModal').classList.add('open');
+  setTimeout(() => document.getElementById('projectPathInput').focus(), 100);
+}
+
+async function submitProjectPicker() {
+  const dirPath = document.getElementById('projectPathInput').value.trim();
+  if (!dirPath) return;
+  const btn = document.getElementById('projectPickerSubmit');
+  btn.disabled = true;
+  btn.textContent = 'Switching...';
   try {
     const res = await fetch('/api/project', {
       method: 'PUT',
@@ -208,11 +258,15 @@ async function changeProject() {
       toast(err.error, 'error');
       return;
     }
+    closeModal('projectPickerModal');
     await loadProject();
     await loadData();
     toast('Project switched', 'success');
   } catch (err) {
     toast(err.message, 'error');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Switch';
   }
 }
 
@@ -388,7 +442,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 +560,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 +588,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 +731,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

@@ -95,6 +95,28 @@
     </div>
   </div>
 
+  <!-- Project picker modal -->
+  <div class="modal-overlay" id="projectPickerModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>Switch Project</h3>
+        <button class="modal-close" onclick="closeModal('projectPickerModal')">&#10005;</button>
+      </div>
+      <div class="modal-body">
+        <div class="modal-field">
+          <label>Project directory</label>
+          <input type="text" id="projectPathInput" placeholder="/path/to/project" autocomplete="off">
+          <span class="modal-hint">Full path to the project directory</span>
+        </div>
+        <div id="recentProjectsList"></div>
+        <div class="modal-actions">
+          <button class="action-btn" onclick="closeModal('projectPickerModal')">Cancel</button>
+          <button class="action-btn primary" id="projectPickerSubmit" onclick="submitProjectPicker()">Switch</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Help modal -->
   <div class="modal-overlay" id="helpModal">
     <div class="modal help-modal" onclick="event.stopPropagation()">
@@ -135,7 +157,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;
@@ -1072,6 +1096,52 @@ body.light .scope-toggle.local {
   margin-top: 16px;
 }
 
+/* === RECENT PROJECTS === */
+
+.recent-projects-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.recent-project-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+}
+
+.recent-project-item:hover {
+  background: var(--hover-bg);
+  color: var(--text-primary);
+}
+
+.recent-project-remove {
+  margin-left: auto;
+  opacity: 0;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 4px;
+}
+
+.recent-project-item:hover .recent-project-remove {
+  opacity: 1;
+}
+
+.recent-project-remove:hover {
+  color: var(--danger);
+}
+
 /* === HELP MODAL === */
 
 .help-modal {

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))
@@ -540,10 +552,11 @@ app.get('/api/plugins/:pluginId/preview/*', (req, res) => {
   const pluginDir = resolvePluginDir(pluginId, marketplaces);
   if (!pluginDir) return res.status(404).json({ error: 'Plugin not found' });
 
-  const fullPath = path.resolve(pluginDir, relPath);
+  let fullPath = path.resolve(pluginDir, relPath);
   if (!fullPath.startsWith(path.resolve(pluginDir))) {
     return res.status(403).json({ error: 'Access denied' });
   }
+  if (!fs.existsSync(fullPath) && fs.existsSync(fullPath + '.md')) fullPath += '.md';
 
   try {
     const stat = fs.statSync(fullPath);
@@ -562,6 +575,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 });
 });
@@ -569,9 +630,11 @@ app.get('/api/project', (req, res) => {
 app.put('/api/project', (req, res) => {
   const newPath = req.body.path;
   if (!newPath) return res.status(400).json({ error: 'path required' });
-  const resolved = newPath.startsWith('~') ? newPath.replace('~', os.homedir()) : newPath;
+  const expanded = newPath.startsWith('~') ? newPath.replace('~', os.homedir()) : newPath;
+  const resolved = path.resolve(expanded);
   if (!fs.existsSync(resolved)) return res.status(400).json({ error: 'Directory does not exist' });
   projectPath = resolved;
+  invalidateCache();
   res.json({ path: projectPath });
 });