claude-code-marketplace 0.5.11 → 0.5.13

package/package.json

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

package/public/style.css

@@ -334,11 +334,11 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 12px;
-  font-size: 12px;
+  padding: 7px 12px;
+  font-size: 13px;
   cursor: pointer;
   transition: background 0.1s ease;
-  min-height: 34px;
+  min-height: 38px;
   flex-wrap: nowrap;
   border-left: 2px solid transparent;
 }
@@ -360,7 +360,7 @@ body {
   position: sticky;
   top: 0;
   z-index: 2;
-  font-size: 11px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   padding: 8px 12px;
@@ -395,8 +395,8 @@ body {
   opacity: 0.45;
 }
 .tree-icon svg {
-  width: 14px;
-  height: 14px;
+  width: 15px;
+  height: 15px;
 }
 .tree-label {
   flex-shrink: 0;
@@ -405,7 +405,7 @@ body {
   color: var(--text-secondary);
 }
 .version {
-  font-size: 10px;
+  font-size: 11px;
   color: var(--accent);
   background: var(--accent-dim);
   padding: 1px 5px;
@@ -421,8 +421,8 @@ body {
   color: var(--text-primary);
 }
 .tree-meta {
-  font-size: 10px;
-  color: var(--text-muted);
+  font-size: 11px;
+  color: var(--text-tertiary);
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -456,37 +456,50 @@ body {
   border-color: rgba(196, 149, 106, 0.4);
   color: rgba(196, 149, 106, 0.5);
 }
-.scope-toggle.user.active,
-.scope-toggle.user.disabled {
+.scope-toggle.user.active {
   background: var(--scope-user-dim);
   color: var(--scope-user);
   border-color: var(--scope-user);
 }
+.scope-toggle.user.disabled {
+  background: transparent;
+  color: var(--scope-user);
+  border-color: var(--scope-user);
+}
 
 .scope-toggle.project {
   border-color: rgba(122, 181, 160, 0.4);
   color: rgba(122, 181, 160, 0.5);
 }
-.scope-toggle.project.active,
-.scope-toggle.project.disabled {
+.scope-toggle.project.active {
   background: var(--scope-project-dim);
   color: var(--scope-project);
   border-color: var(--scope-project);
 }
+.scope-toggle.project.disabled {
+  background: transparent;
+  color: var(--scope-project);
+  border-color: var(--scope-project);
+}
 
 .scope-toggle.local {
   border-color: rgba(138, 155, 181, 0.4);
   color: rgba(138, 155, 181, 0.5);
 }
-.scope-toggle.local.active,
-.scope-toggle.local.disabled {
+.scope-toggle.local.active {
   background: var(--scope-local-dim);
   color: var(--scope-local);
   border-color: var(--scope-local);
 }
+.scope-toggle.local.disabled {
+  background: transparent;
+  color: var(--scope-local);
+  border-color: var(--scope-local);
+}
 .scope-toggle.disabled {
-  border-style: dashed;
-  opacity: 0.6;
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+  opacity: 0.75;
 }
 
 /* Light theme: boost inactive scope contrast further */
@@ -633,9 +646,9 @@ body.light .scope-toggle.local {
 }
 
 .tree-desc-inline {
-  font-size: 11px;
-  color: var(--text-muted);
-  opacity: 0.95;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  opacity: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/server.js

@@ -256,6 +256,7 @@ function loadMarketplaces() {
 
       const fsComps = pluginDir ? countComponents(pluginDir) : null;
       const components = {};
+      const inlineConfig = {};
       for (const k of compKeys) {
         if (fsComps && Array.isArray(fsComps[k]) && fsComps[k].length > 0) {
           if (Array.isArray(pd[k]) && pd[k].length > 0) {
@@ -266,10 +267,19 @@ function loadMarketplaces() {
           }
         } else if (Array.isArray(pd[k]) && pd[k].length > 0) {
           components[k] = pd[k].map(p => typeof p === 'string' ? path.basename(p) : (p.name || String(p)));
+        } else if (pd[k] && typeof pd[k] === 'object') {
+          components[k] = Object.keys(pd[k]);
+          inlineConfig[k] = pd[k];
         } else if (pd[k]) {
-          components[k] = Array.isArray(pd[k]) ? [] : [String(pd[k])];
+          components[k] = [String(pd[k])];
         }
       }
+      if (fsComps?._configFiles) components._configFiles = fsComps._configFiles;
+      if (fsComps?._readmePath) components._readmePath = fsComps._readmePath;
+      for (const k of Object.keys(inlineConfig)) {
+        if (!components._configFiles) components._configFiles = {};
+        if (!components._configFiles[k]) components._configFiles[k] = `${INLINE_PREFIX}${k}`;
+      }
 
       const installedVersion = [scopeDetails.user, scopeDetails.project, scopeDetails.local]
         .find(d => d?.version && d.version !== 'unknown')?.version || null;
@@ -301,6 +311,8 @@ function loadMarketplaces() {
         components,
         _pluginDir: toUnixPath(pluginDir),
         _originDir: toUnixPath(originDir),
+        _installLocation: toUnixPath(installLocation),
+        _inlineConfig: Object.keys(inlineConfig).length ? inlineConfig : null,
         _fsComps: fsComps,
         metadata: Object.fromEntries(
           Object.entries(pd).filter(([k]) => !['name', 'description', 'source', 'version', ...compKeys].includes(k))
@@ -429,6 +441,7 @@ function findFiles(dir, ext) {
 }
 
 const VIRTUAL_PREFIX = '_custom/';
+const INLINE_PREFIX = '__inline__/';
 const SCOPE_LABELS = { user: 'User Customizations', project: 'Project Customizations' };
 const EMPTY_SCOPE = { installed: false, enabled: false, version: null, installPath: null };
 
@@ -623,14 +636,21 @@ app.get('/api/plugins/:pluginId/components', (req, res) => {
   if (!plugin?._pluginDir) return res.status(404).json({ error: 'Plugin directory not found', pluginId });
 
   const comps = plugin.components || plugin._fsComps || countComponents(plugin._pluginDir, plugin.metadata);
-  const result = { ...comps, _pluginDir: plugin._pluginDir };
-  res.json(result);
+  res.json({ ...comps, _pluginDir: plugin._pluginDir });
 });
 
 app.get('/api/plugins/:pluginId/preview/*', (req, res) => {
   const pluginId = decodeURIComponent(req.params.pluginId);
   const relPath = req.params[0];
   const marketplaces = getCachedMarketplaces();
+
+  if (relPath.startsWith(INLINE_PREFIX)) {
+    const type = relPath.slice(INLINE_PREFIX.length);
+    const inline = findPlugin(pluginId, marketplaces)?._inlineConfig?.[type];
+    if (inline === undefined) return res.status(404).json({ error: 'Inline config not found' });
+    return res.json({ type: 'file', content: JSON.stringify({ [type]: inline }, null, 2), name: `${type}.json` });
+  }
+
   const pluginDir = resolvePluginDir(pluginId, marketplaces);
   if (!pluginDir) return res.status(404).json({ error: 'Plugin not found' });
 
@@ -677,7 +697,13 @@ app.post('/api/open-in-editor', (req, res) => {
   const pluginJson = path.join(pluginDir, '.claude-plugin', 'plugin.json');
   if (fs.existsSync(pluginJson)) args.push(pluginJson);
 
-  if (relativePath) {
+  if (relativePath && relativePath.startsWith(INLINE_PREFIX)) {
+    const installLocation = findPlugin(pluginId, marketplaces)?._installLocation;
+    if (installLocation) {
+      const mktJson = path.join(installLocation, '.claude-plugin', 'marketplace.json');
+      if (fs.existsSync(mktJson)) args.push(mktJson);
+    }
+  } else if (relativePath) {
     const fullPath = path.resolve(pluginDir, resolveVirtualRelPath(pluginId, relativePath));
     if (isPathAllowed(fullPath, pluginDir, pluginId)) args.push(fullPath);
   }