claude-code-marketplace 0.3.0 → 0.3.1

package/package.json

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

package/public/app.js

@@ -91,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') {
@@ -141,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 {}
 }
 
@@ -181,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',
@@ -211,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';
   }
 }
 

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()">

package/public/style.css

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

@@ -552,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);
@@ -629,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 });
 });