feat: collapsible rule bar explaining per-category inheritance rules (v0.13.2)

When Show Effective is active, a "How does each category inherit?" toggle
appears below the pills bar. Click to expand a list showing every category's
official scope rule (or "No official scope rule" for categories without one).
Follows the same toggle pattern as Context Budget's "What does this mean?".

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ithiria894

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpware/claude-code-organizer",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Organize all your Claude Code memories, skills, MCP servers, commands, agents, rules, and hooks — see what loads globally vs per-project, then move items between scopes",
   "type": "module",
   "files": [

package.json

@@ -539,6 +539,7 @@ function renderAll() {
   renderSidebar();
   renderContentHeader();
   renderPills();
+  renderRuleBar();
   renderMainContent();
   updateBulkBar();
 
@@ -757,6 +758,41 @@ function renderPills() {
   }
 }
 
+function renderRuleBar() {
+  const bar = document.getElementById("ruleBar");
+  const toggle = document.getElementById("ruleBarToggle");
+  const content = document.getElementById("ruleBarContent");
+  if (!bar || !toggle || !content) return;
+
+  if (!showEffective || !selectedScopeId || selectedScopeId === "global") {
+    bar.classList.add("hidden");
+    return;
+  }
+
+  bar.classList.remove("hidden");
+
+  // Build rule rows for all categories
+  const rows = CATEGORY_ORDER.map(cat => {
+    const config = CATEGORIES[cat];
+    if (!config) return "";
+    const rule = config.effectiveRule;
+    const noRule = !rule;
+    return `<div class="rule-row${noRule ? " rule-none" : ""}">
+      <span class="rule-cat">${config.icon} ${esc(config.filterLabel)}</span>
+      <span class="rule-text">${esc(rule || "No official scope rule")}</span>
+    </div>`;
+  }).join("");
+
+  content.innerHTML = rows;
+
+  // Toggle handler (re-attach each render since innerHTML may have changed)
+  toggle.onclick = () => {
+    content.classList.toggle("hidden");
+    toggle.querySelector(".ctx-toggle-arrow").textContent =
+      content.classList.contains("hidden") ? "▸" : "▾";
+  };
+}
+
 function renderMainContent() {
   const itemList = document.getElementById("itemList");
   const scope = getScopeById(selectedScopeId);

src/ui/app.js

@@ -46,6 +46,10 @@
           <button class="export-btn ctx-budget-btn" id="ctxBudgetBtn" type="button" title="Show context token budget for this scope">Context Budget</button>
         </div>
         <div class="filter-bar" id="pills"></div>
+        <div class="rule-bar hidden" id="ruleBar">
+          <div class="rule-bar-toggle" id="ruleBarToggle"><span class="ctx-toggle-arrow">▸</span> How does each category inherit?</div>
+          <div class="rule-bar-content hidden" id="ruleBarContent"></div>
+        </div>
       </div>
 
       <div class="item-list" id="itemList"></div>

src/ui/index.html

@@ -958,6 +958,14 @@ body {
 .s-tree-toggle { cursor: pointer; font-size: 0.7rem; opacity: 0.5; margin-left: auto; padding: 0 4px; }
 .s-tree-toggle:hover { opacity: 1; }
 .s-tree-toggle.active { opacity: 1; }
+.rule-bar { padding: 0 16px 6px; }
+.rule-bar-toggle { font-size: 0.68rem; color: var(--text-muted); cursor: pointer; user-select: none; }
+.rule-bar-toggle:hover { color: var(--accent); }
+.rule-bar-content { margin-top: 6px; font-size: 0.68rem; color: var(--text-muted); line-height: 1.7; }
+.rule-bar-content .rule-row { display: flex; gap: 8px; padding: 2px 0; }
+.rule-bar-content .rule-cat { font-weight: 700; color: var(--text-primary); min-width: 70px; flex-shrink: 0; }
+.rule-bar-content .rule-text { color: var(--text-muted); }
+.rule-bar-content .rule-none { opacity: 0.5; }
 .d-effective-wrap { padding: 0 0 8px; }
 .d-effective { font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; padding: 4px 0; }
 .theme-btn.active { background: var(--accent-light); color: var(--accent-text); border-color: var(--accent); }