claude-code-marketplace 0.8.0 → 0.10.0

package/README.md

@@ -1,89 +1,53 @@
 # Claude Code Marketplace
 
-A web-based dashboard for browsing, installing, and managing [Claude Code](https://docs.anthropic.com/en/docs/claude-code) plugins across multiple marketplaces.
-
 [![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%">
-</p>
-
-<details>
-<summary>Light theme & file preview</summary>
-
-<p align="center">
-  <img src="assets/main-light.png" alt="Marketplace — light theme" width="100%">
-</p>
+**[Live Demo & Docs](https://nikiforovall.blog/claude-code-marketplace/)**
 
-<p align="center">
-  <img src="assets/prevew-light.png" alt="Plugin file preview" width="100%">
-</p>
+> Browse, install, and manage [Claude Code](https://docs.anthropic.com/en/docs/claude-code) plugins across multiple marketplaces.
 
-</details>
+![Marketplace dashboard](assets/shot-marketplace.png)
 
-## Quick Start
+## Getting Started
 
 ```bash
 npx claude-code-marketplace --open
 ```
 
-Or with a custom port:
-
-```bash
-npx claude-code-marketplace --port 8080
-```
-
-### Options
-
-```
---port <number>   Custom port (default: 3542)
---project <path>  Project directory for project-scoped plugins
---open            Open browser on start
-```
+That's it — the dashboard reads your `~/.claude/plugins/` registry and opens in the browser. All install/uninstall/enable/disable operations delegate to the official `claude plugin` CLI, so Claude Code must be installed and on your PATH.
 
 ## Features
 
 - **Multi-marketplace browser** — aggregate plugins from GitHub repos, git URLs, and local directories
-- **Scope management** — install, enable, and disable plugins per scope (user / project / local)
+- **Scope management** — install, enable, and disable plugins per scope, with `U`/`P`/`L` state badges (user / project / local)
 - **Component inspection** — browse skills, commands, agents, MCP servers, hooks, and LSP servers inside each plugin
 - **File preview** — read plugin source files directly in the browser with syntax highlighting
+- **Full catalog view** — marketplace info panel shows every plugin a source offers, installed or not
+- **User & project customizations** — your local `~/.claude/` and `./.claude/` skills, commands, agents, and hooks appear as browsable virtual marketplaces
 - **Marketplace actions** — add, update, and remove marketplace sources
-- **PWA support** — installable as a standalone desktop app with offline caching
-- **Dark / light theme** — styled with IBM Plex Mono, orange accent palette
+- **17 color themes** — Ember, Gruvbox, Catppuccin, Tokyo Night, Dracula, Nord, and more — each in light and dark
 - **Keyboard-first** — vim-style navigation, press `?` for shortcuts
+- **PWA support** — installable as a standalone desktop app
 
-## How It Works
-
-The server reads `~/.claude/plugins/` to discover installed marketplaces and plugin registries. Each marketplace points to a directory containing a `.claude-plugin/marketplace.json` manifest listing available plugins.
-
-The UI renders a tree of marketplaces with their plugins. Clicking a plugin opens its detail panel showing description, version, scope installation matrix, and filesystem-based component breakdown.
+![Plugin components and scope matrix](assets/shot-plugin-components.png)
 
-All plugin management operations (install, uninstall, enable, disable) delegate to `claude plugin` CLI commands.
+![File preview with syntax highlighting](assets/shot-file-preview.png)
 
-## Tech Stack
+![Dark theme — Tokyo Night](assets/shot-dark-theme.png)
 
-- **Frontend** — vanilla JS single-page app, no framework dependencies
-- **Backend** — Express.js serving static files + REST API
-- **Styling** — CSS custom properties with dark/light theme support
-- **Icons** — inline SVG (Feather-style, 24x24 viewBox)
-- **Linter** — Biome with husky pre-commit hook
+## Configuration
 
-## Development
-
-```bash
-git clone https://github.com/NikiforovAll/claude-code-marketplace.git
-cd claude-code-marketplace
-npm install
-npm run dev
 ```
-
-```bash
-npm run lint        # check with biome
-npm run lint:fix    # auto-fix
+--port <number>   Custom port (default: 3542, falls back if busy)
+--project <path>  Project directory for project-scoped plugins
+--dir <path>      Custom Claude config dir (default: ~/.claude)
+--open            Open browser on start
 ```
 
+The config dir can also be set via the `CLAUDE_CONFIG_DIR` environment variable.
+
 ## License
 
 MIT

package/package.json

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

package/public/app.js

@@ -1356,6 +1356,11 @@ function setFocusedRow(index, rows) {
   _focusedRowEl = row;
 }
 
+function getFocusedPluginId() {
+  if (_focusedRowEl?.dataset.rowType === 'plugin') return _focusedRowEl.dataset.rowId;
+  return null;
+}
+
 function getFocusedIndex(rows) {
   if (!focusedRowId) return -1;
   return rows.findIndex((r) => r.dataset.rowId === focusedRowId);
@@ -1408,7 +1413,13 @@ function handleKeydown(e) {
 
   if (matchKey(e, 'e')) {
     e.preventDefault();
-    toggleExpandAll();
+    const id = selectedPluginId || getFocusedPluginId();
+    if (id) {
+      openFolderInEditor({ pluginId: id });
+      toast('Opening in editor…', 'info');
+    } else {
+      toast('Select a plugin first', 'info');
+    }
     return;
   }
 

package/public/index.html

@@ -138,7 +138,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>E</kbd></td><td>Open plugin in editor</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>U</kbd></td><td>Open user CLAUDE.md</td></tr>

package/public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'cc-marketplace-v1';
+const CACHE_NAME = 'cc-marketplace-v2';
 const PRECACHE = ['/', '/style.css', '/app.js'];
 
 self.addEventListener('install', (e) => {

package/server.js

@@ -14,7 +14,13 @@ app.get('/hub-config', (_req, res) => {
 
 app.use(express.static(path.join(__dirname, 'public')));
 
-const CLAUDE_DIR = path.join(os.homedir(), '.claude');
+function getClaudeDir() {
+  const dir = getArg('dir') || process.env.CLAUDE_CONFIG_DIR || process.env.CLAUDE_DIR;
+  if (dir) return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
+  return path.join(os.homedir(), '.claude');
+}
+
+const CLAUDE_DIR = getClaudeDir();
 const PLUGINS_DIR = path.join(CLAUDE_DIR, 'plugins');
 
 let _marketplaceCache = null;