feat: frontmatter config UI, scanner fixes, MCP panel scope-follow

- Skill/agent/memory frontmatter editor in detail panel (model, when_to_use, description, maxTurns)
- Collapsible metadata section with universal data-tooltip component
- Scanner reads both settings.json + settings.local.json for approval state
- Scanner checks enableAllProjectMcpServers flag
- MCP Controls panel follows scope switches (parity with Context Budget)
- POST /api/save-frontmatter endpoint for writing frontmatter changes

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

Author: ithiria894

src/scanner.mjs

@@ -624,19 +624,26 @@ async function scanMcpServers(scope) {
 
   // Add approval state for project-scoped servers from .mcp.json
   // Mirrors ccsrc getProjectMcpServerStatus: approved/rejected/pending
+  // CC merges settings from multiple sources; read both settings.json and
+  // settings.local.json then merge (local wins for enableAllProjectMcpServers).
   if (scope.id !== "global") {
     try {
-      const userSettingsRaw = await safeReadFile(join(CLAUDE_DIR, "settings.json"));
-      if (userSettingsRaw) {
-        const userSettings = JSON.parse(userSettingsRaw);
-        const enabled = Array.isArray(userSettings.enabledMcpjsonServers) ? userSettings.enabledMcpjsonServers : [];
-        const disabled = Array.isArray(userSettings.disabledMcpjsonServers) ? userSettings.disabledMcpjsonServers : [];
-        for (const item of items) {
-          if (item.fileName === ".mcp.json") {
-            if (enabled.includes(item.name)) item.approvalState = "approved";
-            else if (disabled.includes(item.name)) item.approvalState = "rejected";
-            else item.approvalState = "pending";
-          }
+      const enabled = new Set();
+      const disabled = new Set();
+      let enableAll = false;
+      for (const sf of ["settings.json", "settings.local.json"]) {
+        const raw = await safeReadFile(join(CLAUDE_DIR, sf));
+        if (!raw) continue;
+        const s = JSON.parse(raw);
+        if (Array.isArray(s.enabledMcpjsonServers)) s.enabledMcpjsonServers.forEach(n => enabled.add(n));
+        if (Array.isArray(s.disabledMcpjsonServers)) s.disabledMcpjsonServers.forEach(n => disabled.add(n));
+        if (s.enableAllProjectMcpServers) enableAll = true;
+      }
+      for (const item of items) {
+        if (item.fileName === ".mcp.json") {
+          if (disabled.has(item.name)) item.approvalState = "rejected";
+          else if (enableAll || enabled.has(item.name)) item.approvalState = "approved";
+          else item.approvalState = "pending";
         }
       }
     } catch {}

src/server.mjs

@@ -629,6 +629,26 @@ async function handleRequest(req, res) {
     }
   }
 
+  // POST /api/save-frontmatter — write updated markdown file content (skills, agents, memories)
+  if (path === "/api/save-frontmatter" && req.method === "POST") {
+    try {
+      const body = await readBody(req);
+      const { path: filePath, content } = body;
+      if (!filePath || !isAbsolute(filePath) || !isPathAllowed(filePath)) {
+        return json(res, { ok: false, error: "Invalid or disallowed path" }, 400);
+      }
+      if (!filePath.endsWith(".md")) {
+        return json(res, { ok: false, error: "Only .md files can be updated" }, 400);
+      }
+      const { writeFile: wf } = await import("node:fs/promises");
+      await wf(filePath, content, "utf-8");
+      cachedData = null;
+      return json(res, { ok: true });
+    } catch (err) {
+      return json(res, { ok: false, error: err.message }, 500);
+    }
+  }
+
   // GET /api/session-preview?path=... — parse JSONL session into structured conversation
   if (path === "/api/session-preview" && req.method === "GET") {
     const filePath = url.searchParams.get("path");

src/ui/app.js

@@ -216,6 +216,8 @@ function setupSidebarTree() {
       expandScopePath(selectedScopeId);
       if (isContextBudgetOpen()) {
         openContextBudget(selectedScopeId);
+      } else if (!document.getElementById("mcpControlsPanel").classList.contains("hidden")) {
+        openMcpControlsPanel();
       }
       const cat = catRow.dataset.cat;
       if (activeFilters.size === 1 && activeFilters.has(cat)) {
@@ -246,6 +248,8 @@ function setupSidebarTree() {
     expandScopePath(selectedScopeId);
     if (isContextBudgetOpen()) {
       openContextBudget(selectedScopeId);
+    } else if (!document.getElementById("mcpControlsPanel").classList.contains("hidden")) {
+      openMcpControlsPanel();
     } else if (selectedItem && selectedItem.scopeId !== selectedScopeId) {
       closeDetail();
     }
@@ -418,6 +422,17 @@ function setupDetailPanel() {
     document.getElementById("costBreakdown").classList.add("hidden");
     document.querySelector(".detail-body").classList.remove("hidden");
   });
+
+  // Metadata collapsible toggle
+  const metaToggle = document.getElementById("detailMetaToggle");
+  const metaBody = document.getElementById("detailMetaBody");
+  if (metaToggle && metaBody) {
+    metaToggle.addEventListener("click", () => {
+      metaBody.classList.toggle("hidden");
+      metaToggle.classList.toggle("open");
+      metaToggle.querySelector(".d-meta-arrow").textContent = metaBody.classList.contains("hidden") ? "▸" : "▾";
+    });
+  }
 }
 
 function formatTokenCount(n) {
@@ -1183,6 +1198,9 @@ function renderDetailPanel(resetPreview = false) {
   // Why it applies (Effective Behavior section)
   renderEffectiveBehavior(selectedItem);
 
+  // Frontmatter config (model, when_to_use, description, maxTurns etc.)
+  renderItemConfig(selectedItem);
+
   // CC Actions — contextual prompt buttons
   renderCcActions(selectedItem);
 
@@ -1281,6 +1299,142 @@ function renderEffectiveBehavior(item) {
   text.textContent = why;
 }
 
+// ── Item Config (frontmatter fields for skills, agents, memories) ─────────────
+
+const ITEM_CONFIG_FIELDS = {
+  skill: [
+    { key: "model", label: "Model", type: "select", options: ["", "opus", "sonnet", "haiku", "inherit"], labels: ["(not set) — uses default model", "opus", "sonnet", "haiku", "inherit"], tooltip: "When set, Claude Code uses this model instead of your session default when running this skill. Official SKILL.md frontmatter field." },
+    { key: "when_to_use", label: "When to use", type: "text", placeholder: "(not set) — describe when AI should auto-trigger this skill", tooltip: "Claude Code may auto-invoke skills based on context. Setting this gives more specific guidance on when this skill should be triggered." },
+  ],
+  agent: [
+    { key: "model", label: "Model", type: "select", options: ["", "opus", "sonnet", "haiku", "inherit"], labels: ["(not set) — uses default model", "opus", "sonnet", "haiku", "inherit"], tooltip: "When set, Claude Code uses this model instead of your session default when running this agent." },
+    { key: "maxTurns", label: "Max turns", type: "number", placeholder: "(not set) — no limit", tooltip: "Maximum number of agentic turns before the agent stops. Prevents runaway agents from burning tokens indefinitely." },
+  ],
+  memory: [
+    { key: "description", label: "Description", type: "text", placeholder: "(not set) — one-line summary for Claude to decide relevance", tooltip: "Claude Code uses this to decide whether this memory is relevant to the current conversation. A clear description improves recall accuracy." },
+  ],
+};
+
+let _itemConfigTimers = {};
+
+function getItemFilePath(item) {
+  if (item.category === "skill") return `${item.path}/SKILL.md`;
+  if (item.category === "agent") return `${item.path}`;
+  if (item.category === "memory") return item.path;
+  return null;
+}
+
+async function renderItemConfig(item) {
+  const wrap = document.getElementById("detailItemConfig");
+  if (!wrap) return;
+
+  const fields = item ? ITEM_CONFIG_FIELDS[item.category] : null;
+  if (!fields) { wrap.classList.add("hidden"); wrap.innerHTML = ""; return; }
+
+  const filePath = getItemFilePath(item);
+  if (!filePath) { wrap.classList.add("hidden"); return; }
+
+  // Read file to get current frontmatter values
+  let fm = {};
+  try {
+    const res = await fetchJson(`/api/file-content?path=${encodeURIComponent(filePath)}`);
+    if (!res.ok) { wrap.classList.add("hidden"); return; }
+    fm = parseFrontmatter(res.content);
+  } catch { wrap.classList.add("hidden"); return; }
+
+  // Build HTML
+  let html = "";
+  for (const field of fields) {
+    html += `<div class="d-item-config-row">`;
+    html += `<span class="d-info-label" data-tooltip="${esc(field.tooltip)}">${esc(field.label)}</span>`;
+
+    if (field.type === "select") {
+      html += `<select class="d-item-select" data-fm-key="${esc(field.key)}" data-fm-path="${esc(filePath)}">`;
+      for (let i = 0; i < field.options.length; i++) {
+        const val = field.options[i];
+        const label = field.labels?.[i] || val;
+        const sel = (fm[field.key] || "") === val ? " selected" : "";
+        html += `<option value="${esc(val)}"${sel}>${esc(label)}</option>`;
+      }
+      html += `</select>`;
+    } else if (field.type === "number") {
+      const val = fm[field.key] || "";
+      html += `<input type="number" class="d-item-input d-item-number" data-fm-key="${esc(field.key)}" data-fm-path="${esc(filePath)}" value="${esc(val)}" placeholder="${esc(field.placeholder || "")}" min="1">`;
+    } else {
+      const val = fm[field.key] || "";
+      html += `<input type="text" class="d-item-input" data-fm-key="${esc(field.key)}" data-fm-path="${esc(filePath)}" value="${esc(val)}" placeholder="${esc(field.placeholder || "")}">`;
+    }
+    html += `</div>`;
+  }
+
+  wrap.innerHTML = html;
+  wrap.classList.remove("hidden");
+
+  // Bind events
+  wrap.querySelectorAll("select[data-fm-key]").forEach(sel => {
+    sel.addEventListener("change", () => saveFrontmatterField(sel.dataset.fmPath, sel.dataset.fmKey, sel.value));
+  });
+  wrap.querySelectorAll("input[data-fm-key]").forEach(inp => {
+    inp.addEventListener("input", () => {
+      const k = inp.dataset.fmKey;
+      clearTimeout(_itemConfigTimers[k]);
+      _itemConfigTimers[k] = setTimeout(() => saveFrontmatterField(inp.dataset.fmPath, inp.dataset.fmKey, inp.value), 600);
+    });
+  });
+}
+
+function parseFrontmatter(content) {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) return {};
+  const fm = {};
+  for (const line of match[1].split("\n")) {
+    const colon = line.indexOf(":");
+    if (colon < 1) continue;
+    const key = line.slice(0, colon).trim();
+    const val = line.slice(colon + 1).trim();
+    fm[key] = val;
+  }
+  return fm;
+}
+
+async function saveFrontmatterField(filePath, key, value) {
+  try {
+    const res = await fetchJson(`/api/file-content?path=${encodeURIComponent(filePath)}`);
+    if (!res.ok) return;
+
+    let content = res.content;
+    const fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
+
+    if (!fmMatch) {
+      const newFm = value ? `---\n${key}: ${value}\n---\n` : "";
+      content = newFm + content;
+    } else {
+      let fmBody = fmMatch[1];
+      const lineRegex = new RegExp(`^${key}:.*$`, "m");
+
+      if (value) {
+        if (lineRegex.test(fmBody)) {
+          fmBody = fmBody.replace(lineRegex, `${key}: ${value}`);
+        } else {
+          fmBody += `\n${key}: ${value}`;
+        }
+      } else {
+        fmBody = fmBody.replace(lineRegex, "").replace(/\n{2,}/g, "\n").trim();
+      }
+      content = `---\n${fmBody}\n---` + content.slice(fmMatch[0].length);
+    }
+
+    await fetchJson("/api/save-frontmatter", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: filePath, content }),
+    });
+    toast(`Updated ${key} for ${selectedItem?.name || "item"}`);
+  } catch (err) {
+    toast(`Failed to save: ${err.message}`, true);
+  }
+}
+
 function renderCcActions(item) {
   const container = document.getElementById("detailCcActions");
   const btnRow = document.getElementById("ccBtnRow");

src/ui/index.html

@@ -79,43 +79,52 @@ <h2 id="detailTitle">Select an item</h2>
       </div>
 
       <div class="detail-body">
-        <div class="d-info-grid">
-          <div class="d-info-cell">
-            <span class="d-info-label">Scope</span>
-            <span class="d-info-val" id="detailScope">—</span>
-          </div>
-          <div class="d-info-cell">
-            <span class="d-info-label">Type</span>
-            <span class="d-info-val" id="detailType">—</span>
-          </div>
-          <div class="d-info-cell">
-            <span class="d-info-label">Size</span>
-            <span class="d-info-val" id="detailSize">—</span>
-          </div>
-        </div>
+        <!-- Frontmatter config — dynamically populated per category -->
+        <div class="d-item-config hidden" id="detailItemConfig"></div>
 
-        <div class="d-desc-wrap">
-          <span class="d-info-label">Description</span>
-          <div class="d-desc" id="detailDesc">Select an item to inspect its metadata and preview.</div>
+        <!-- Collapsible metadata -->
+        <div class="d-meta-toggle" id="detailMetaToggle">
+          <span class="d-meta-arrow">▸</span> Metadata <span class="d-meta-hint">(scope, size, dates…)</span>
         </div>
+        <div class="d-meta-body hidden" id="detailMetaBody">
+          <div class="d-info-grid">
+            <div class="d-info-cell">
+              <span class="d-info-label">Scope</span>
+              <span class="d-info-val" id="detailScope">—</span>
+            </div>
+            <div class="d-info-cell">
+              <span class="d-info-label">Type</span>
+              <span class="d-info-val" id="detailType">—</span>
+            </div>
+            <div class="d-info-cell">
+              <span class="d-info-label">Size</span>
+              <span class="d-info-val" id="detailSize">—</span>
+            </div>
+          </div>
 
-        <div class="d-effective-wrap hidden" id="detailEffective">
-          <span class="d-info-label">Why it applies</span>
-          <div class="d-effective" id="detailEffectiveText">—</div>
-        </div>
+          <div class="d-desc-wrap">
+            <span class="d-info-label">Description</span>
+            <div class="d-desc" id="detailDesc">Select an item to inspect its metadata and preview.</div>
+          </div>
 
-        <div class="d-info-grid" id="detailDates">
-          <div class="d-info-cell">
-            <span class="d-info-label">Created</span>
-            <span class="d-info-val">—</span>
+          <div class="d-effective-wrap hidden" id="detailEffective">
+            <span class="d-info-label">Why it applies</span>
+            <div class="d-effective" id="detailEffectiveText">—</div>
           </div>
-          <div class="d-info-cell">
-            <span class="d-info-label">Modified</span>
-            <span class="d-info-val">—</span>
+
+          <div class="d-info-grid" id="detailDates">
+            <div class="d-info-cell">
+              <span class="d-info-label">Created</span>
+              <span class="d-info-val">—</span>
+            </div>
+            <div class="d-info-cell">
+              <span class="d-info-label">Modified</span>
+              <span class="d-info-val">—</span>
+            </div>
           </div>
-        </div>
 
-        <div class="d-path" id="detailPath">—</div>
+          <div class="d-path" id="detailPath">—</div>
+        </div>
 
         <div class="d-field d-field-preview">
           <div class="d-preview" id="previewContent">Select an item to preview</div>

src/ui/style.css

@@ -1070,6 +1070,37 @@ body {
 .st-ancestor { color: oklch(0.58 0.14 160); border-color: oklch(0.58 0.14 160); }
 .st-shadowed { color: var(--text-muted); border-color: var(--text-muted); opacity: 0.8; }
 .st-conflict { color: oklch(0.65 0.15 55); border-color: oklch(0.65 0.15 55); }
+/* Universal tooltip — add data-tooltip="..." to any element */
+[data-tooltip] { position: relative; cursor: help; }
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  background: var(--surface-inset);
+  color: var(--text-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 0.65rem;
+  font-weight: 400;
+  font-style: normal;
+  text-transform: none;
+  letter-spacing: normal;
+  text-decoration: none;
+  line-height: 1.5;
+  white-space: normal;
+  width: max-content;
+  max-width: 260px;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+[data-tooltip]:hover::after { opacity: 1; }
+
+/* Scope-tag overrides (keep for backward compat) */
 .scope-tag[data-tooltip] { position: relative; cursor: help; }
 .scope-tag[data-tooltip]::after {
   content: attr(data-tooltip);
@@ -1112,6 +1143,24 @@ body {
 .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; }
+
+/* Item config (frontmatter fields — skills, agents, memories) */
+.d-item-config { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 8px; }
+.d-item-config-row { display: flex; flex-direction: column; gap: 2px; }
+.d-item-select, .d-item-input { font-size: 0.78rem; padding: 4px 8px; border: 1px solid var(--border-light); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary); font-family: inherit; }
+.d-item-select:focus, .d-item-input:focus { outline: none; border-color: var(--accent); }
+.d-item-input { width: 100%; box-sizing: border-box; }
+.d-item-input::placeholder { color: var(--text-faint); font-size: 0.72rem; }
+.d-item-number { width: 80px; }
+
+/* Collapsible metadata toggle */
+.d-meta-toggle { font-size: 0.7rem; font-weight: 600; color: var(--text-faint); cursor: pointer; padding: 6px 0 2px; user-select: none; letter-spacing: 0.3px; text-transform: uppercase; }
+.d-meta-toggle:hover { color: var(--text-secondary); }
+.d-meta-hint { font-weight: 400; font-size: 0.62rem; color: var(--text-faint); }
+.d-meta-arrow { display: inline-block; transition: transform 0.15s; font-size: 0.6rem; }
+.d-meta-toggle.open .d-meta-arrow { transform: rotate(90deg); }
+.d-meta-body { padding: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
+
 .theme-btn.active { background: var(--accent-light); color: var(--accent-text); border-color: var(--accent); }
 
 .ctx-budget-summary { padding: 16px 20px; border-bottom: 1px solid var(--border-light); }