claude-code-marketplace 0.5.7 → 0.5.9

package/README.md

@@ -2,7 +2,9 @@
 
 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)
+[![npm version](https://img.shields.io/npm/v/claude-code-marketplace)](https://www.npmjs.com/package/claude-code-marketplace)
+[![license](https://img.shields.io/npm/l/claude-code-marketplace)](LICENSE)
+[![npm downloads](https://img.shields.io/npm/dm/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%">

package/package.json

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

package/public/app.js

@@ -7,6 +7,7 @@ let componentCache = {};
 const detailHistory = [];
 let focusedRowId = null;
 let _focusedRowEl = null;
+let treeContainer;
 
 function matchKey(e, ...keys) {
   if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return false;
@@ -91,11 +92,13 @@ function updateArrow(p) {
 
 // --- Init ---
 document.addEventListener('DOMContentLoaded', () => {
+  treeContainer = document.getElementById('treeContainer');
   document.getElementById('contentOpenEditor').innerHTML = ICONS.openEditor;
   document.getElementById('contentCopyPath').innerHTML = ICONS.copyPath;
   restoreAppState();
   loadProject();
   loadData();
+  initSidebarResize();
 
   let searchTimer;
   document.getElementById('searchInput').addEventListener('input', (e) => {
@@ -1168,13 +1171,13 @@ function shortenPath(p) {
     .replace(/^\/home\/[^/]+/i, home);
 }
 
-let toastTimeout;
 function toast(msg, type = 'info') {
-  const el = document.getElementById('toast');
+  const container = document.getElementById('toast');
+  const el = document.createElement('div');
+  el.className = `toast toast-${type}`;
   el.textContent = msg;
-  el.className = `toast ${type} show`;
-  clearTimeout(toastTimeout);
-  toastTimeout = setTimeout(() => el.classList.remove('show'), 3000);
+  container.appendChild(el);
+  setTimeout(() => el.remove(), 3000);
 }
 
 function closeModal(id) {
@@ -1218,7 +1221,19 @@ async function submitAddMarketplace() {
 // --- Keyboard Navigation ---
 
 function getVisibleRows() {
-  return [...document.querySelectorAll('#treeContainer .tree-row')].filter((r) => r.offsetParent !== null);
+  return [...treeContainer.querySelectorAll('.tree-row')].filter((r) => r.offsetParent !== null);
+}
+
+function scrollRowIntoView(row) {
+  const rowTop = row.getBoundingClientRect().top - treeContainer.getBoundingClientRect().top + treeContainer.scrollTop;
+  const rowBottom = rowTop + row.offsetHeight;
+  const cTop = treeContainer.scrollTop;
+  const cBottom = cTop + treeContainer.clientHeight;
+  if (rowTop < cTop) {
+    treeContainer.scrollTop = rowTop;
+  } else if (rowBottom > cBottom) {
+    treeContainer.scrollTop = rowBottom - treeContainer.clientHeight;
+  }
 }
 
 function setFocusedRow(index, rows) {
@@ -1232,7 +1247,7 @@ function setFocusedRow(index, rows) {
   index = Math.max(0, Math.min(index, rows.length - 1));
   const row = rows[index];
   row.classList.add('focused');
-  row.scrollIntoView({ block: 'nearest' });
+  scrollRowIntoView(row);
   focusedRowId = row.dataset.rowId;
   _focusedRowEl = row;
 }
@@ -1299,6 +1314,12 @@ function handleKeydown(e) {
     return;
   }
 
+  if (matchKey(e, 't')) {
+    e.preventDefault();
+    toggleTheme();
+    return;
+  }
+
   const rows = getVisibleRows();
   const idx = getFocusedIndex(rows);
 
@@ -1382,6 +1403,46 @@ if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js');
 }
 
+function initSidebarResize() {
+  const handle = document.getElementById('resizeHandle');
+  const treePanel = document.getElementById('treePanel');
+  const STORAGE_KEY = 'marketplace-sidebar-width';
+
+  const saved = parseInt(localStorage.getItem(STORAGE_KEY), 10);
+  if (saved) document.documentElement.style.setProperty('--sidebar-w', `${saved}px`);
+
+  let dragging = false;
+  let startX, startW, maxW, currentW;
+
+  handle.addEventListener('mousedown', (e) => {
+    dragging = true;
+    startX = e.clientX;
+    startW = treePanel.getBoundingClientRect().width;
+    currentW = startW;
+    const detailMinW = parseInt(getComputedStyle(document.getElementById('detailPanel')).minWidth, 10);
+    maxW = treePanel.parentElement.clientWidth - detailMinW - handle.offsetWidth;
+    handle.classList.add('is-dragging');
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!dragging) return;
+    currentW = Math.max(200, Math.min(maxW, startW + e.clientX - startX));
+    document.documentElement.style.setProperty('--sidebar-w', `${currentW}px`);
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (!dragging) return;
+    dragging = false;
+    handle.classList.remove('is-dragging');
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    localStorage.setItem(STORAGE_KEY, currentW);
+  });
+}
+
 // #region HUB_INTEGRATION
 (async function initHub() {
   const cfg = await fetch('/hub-config')

package/public/index.html

@@ -46,24 +46,25 @@
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
       Refresh
     </button>
+    <button class="topbar-btn" id="themeBtn" title="Toggle theme">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+    </button>
     <button class="topbar-btn" id="helpBtn" title="Keyboard shortcuts (?)">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/></svg>
       <kbd style="font-size:10px">?</kbd>
     </button>
-    <button class="topbar-btn" id="themeBtn" title="Toggle theme">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
-    </button>
     <a class="topbar-btn" href="https://github.com/NikiforovAll/claude-code-marketplace" target="_blank" rel="noopener" title="GitHub">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
     </a>
   </div>
 
   <div class="main-layout">
-    <div class="tree-panel">
+    <div class="tree-panel" id="treePanel">
       <div class="tree-container" id="treeContainer">
         <div class="loading">Loading marketplaces...</div>
       </div>
     </div>
+    <div class="resize-handle" id="resizeHandle"></div>
     <div class="detail-panel" id="detailPanel">
       <div class="detail-empty">
         <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"><path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
@@ -72,7 +73,7 @@
     </div>
   </div>
 
-  <div class="toast" id="toast"></div>
+  <div class="toast-container" id="toast"></div>
 
   <!-- Add marketplace modal -->
   <div class="modal-overlay" id="addMarketplaceModal">
@@ -134,6 +135,7 @@
               <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>T</kbd></td><td>Toggle theme</td></tr>
               <tr><td><kbd>Esc</kbd></td><td>Close panel / blur input</td></tr>
             </table>
           </div>

package/public/style.css

@@ -279,11 +279,25 @@ body {
 /* === TREE PANEL === */
 
 .tree-panel {
-  flex: 1;
+  flex: 0 0 var(--sidebar-w, 400px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-width: 400px;
+  min-width: 200px;
+}
+
+.resize-handle {
+  width: 4px;
+  flex-shrink: 0;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.15s;
+  position: relative;
+  z-index: 1;
+}
+.resize-handle:hover,
+.resize-handle.is-dragging {
+  background: var(--accent);
 }
 
 .tree-expand-toggle {
@@ -670,8 +684,8 @@ body.light .scope-toggle.local {
 /* === DETAIL PANEL === */
 
 .detail-panel {
-  width: 500px;
-  flex-shrink: 0;
+  flex: 1;
+  min-width: 300px;
   background: var(--bg-surface);
   border-left: 1px solid var(--border);
   display: flex;
@@ -995,37 +1009,47 @@ body.light .scope-toggle.local {
 
 /* === TOAST === */
 
-.toast {
+.toast-container {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
-  padding: 10px 16px;
+  bottom: 16px;
+  right: 16px;
+  z-index: 100;
+}
+
+.toast {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
   border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-  font-family: var(--mono);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  opacity: 0;
-  transform: translateY(10px);
-  transition: all 300ms ease;
-  max-width: 400px;
+  padding: 8px 14px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  animation: slideIn 0.2s ease;
 }
-.toast.show {
-  opacity: 1;
-  transform: translateY(0);
+
+.toast.toast-success {
+  border-color: #2ea043;
+  color: #2ea043;
 }
-.toast.success {
-  background: var(--success);
-  color: #000;
+
+.toast.toast-error {
+  border-color: #f85149;
+  color: #f85149;
 }
-.toast.error {
-  background: var(--error);
-  color: #fff;
+
+.toast.toast-info {
+  border-color: var(--accent);
+  color: var(--accent);
 }
-.toast.info {
-  background: var(--accent);
-  color: #fff;
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* === MODAL === */

package/server.js

@@ -427,9 +427,8 @@ const VIRTUAL_PREFIX = '_custom/';
 const SCOPE_LABELS = { user: 'User Customizations', project: 'Project Customizations' };
 const EMPTY_SCOPE = { installed: false, enabled: false, version: null, installPath: null };
 
-function scanCustomizations(basePath, scope) {
+function rescanVirtualComponents(basePath, scope) {
   const components = countComponents(basePath);
-
   // Strip .md extensions from command/agent names for cleaner display
   components.commands = components.commands.map(n => n.replace(/\.md$/, ''));
   components.agents = components.agents.map(n => n.replace(/\.md$/, ''));
@@ -461,6 +460,12 @@ function scanCustomizations(basePath, scope) {
   }
   if (claudeMdFiles.length) components.claudeMd = claudeMdFiles;
 
+  return components;
+}
+
+function scanCustomizations(basePath, scope) {
+  const components = rescanVirtualComponents(basePath, scope);
+
   const hasAny = Object.values(components).some(v => Array.isArray(v) && v.length > 0);
   if (!hasAny) return null;
 
@@ -605,7 +610,10 @@ app.get('/api/plugins/:pluginId/components', (req, res) => {
   const plugin = findPlugin(pluginId, mktData);
 
   if (plugin?.isVirtual) {
-    return res.json({ ...plugin.components, _pluginDir: plugin._pluginDir });
+    const scope = plugin.fullId.replace(VIRTUAL_PREFIX, '');
+    const comps = rescanVirtualComponents(plugin._pluginDir, scope);
+    comps._pluginDir = plugin._pluginDir;
+    return res.json(comps);
   }
   if (!plugin?._pluginDir) return res.status(404).json({ error: 'Plugin directory not found', pluginId });