@mcpware/claude-code-organizer 0.1.4 → 0.2.0

package/README.md

@@ -2,9 +2,27 @@
 
 **Organize all your Claude Code memories, skills, MCP servers, and hooks — view by scope hierarchy, move between scopes via drag-and-drop.**
 
-Claude Code saves your customizations across scattered directories with encoded paths. This tool gives you a visual dashboard to see everything, understand which scope each item applies to, and move items between scopes with one click.
+<video src="docs/demo.webm" autoplay loop muted playsinline width="100%"></video>
 
-![Claude Code Organizer Dashboard](docs/dashboard.png)
+## The Problem
+
+Ever asked Claude Code to "remember this", only to find it saved the memory to the wrong scope?
+
+You're inside a project folder, you tell Claude to remember a preference — and it saves it to that project's scope. Switch to another project, and Claude has no idea. That memory is trapped.
+
+The reverse happens too — skills or memories sitting in global scope that really only apply to one repo, leaking into everything else.
+
+Want to fix it? You'd have to manually dig through `~/.claude/` and its encoded-path folders (`-home-user-projects-my-app/`), find the right file, and move it yourself.
+
+**Claude Code Organizer fixes this.**
+
+### Example: Project → Global
+
+You told Claude to remember "I prefer TypeScript + ESM" while inside a project, but that preference applies everywhere. Open the dashboard, drag that memory from Project scope to Global scope. Done.
+
+### Example: Global → Project
+
+You have a deploy skill sitting in global, but it only makes sense for one repo. Drag it into that Project scope — other projects won't see it anymore.
 
 ---
 
@@ -30,6 +48,10 @@ npm install -g @mcpware/claude-code-organizer
 claude-code-organizer
 ```
 
+Or paste this into Claude Code:
+
+> Run `npx @mcpware/claude-code-organizer` — it's a dashboard for managing Claude Code settings. Tell me the URL when it's ready.
+
 Opens a dashboard at `http://localhost:3847`. Works with your real `~/.claude/` directory.
 
 ## What It Manages
@@ -47,12 +69,12 @@ Opens a dashboard at `http://localhost:3847`. Works with your real `~/.claude/`
 ## Scope Hierarchy
 
 ```
-Global                          <- applies everywhere
-  AlltrueAi (workspace)         <- applies to all sub-projects
-    ai-security-control-plane   <- project-specific
-    rule-processor              <- project-specific
-  MyGithub (project)            <- independent project
-  Documents (project)           <- independent project
+Global                       <- applies everywhere
+  Company (workspace)        <- applies to all sub-projects
+    CompanyRepo1             <- project-specific
+    CompanyRepo2             <- project-specific
+  SideProjects (project)     <- independent project
+  Documents (project)        <- independent project
 ```
 
 Child scopes inherit parent scope's memories, skills, and MCP servers.
@@ -120,6 +142,6 @@ MIT
 
 ## Author
 
-[mcpware](https://github.com/mcpware) — Building tools for the Claude Code ecosystem.
+[ithiria894](https://github.com/ithiria894) — Building tools for the Claude Code ecosystem.
 
 See also: [@mcpware/instagram-mcp](https://github.com/mcpware/instagram-mcp)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpware/claude-code-organizer",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Organize all your Claude Code memories, skills, MCP servers, and hooks — view by scope hierarchy, move between scopes via drag-and-drop",
   "type": "module",
   "bin": {

package/server.json

@@ -6,12 +6,12 @@
     "url": "https://github.com/mcpware/claude-code-organizer",
     "source": "github"
   },
-  "version": "0.1.3",
+  "version": "0.2.0",
   "packages": [
     {
       "registryType": "npm",
       "identifier": "@mcpware/claude-code-organizer",
-      "version": "0.1.3",
+      "version": "0.2.0",
       "transport": {
         "type": "stdio"
       }

package/src/mover.mjs

@@ -10,7 +10,7 @@
  * Pure data module. No HTTP, no UI.
  */
 
-import { rename, mkdir, readFile, writeFile } from "node:fs/promises";
+import { rename, mkdir, readFile, writeFile, rm, unlink } from "node:fs/promises";
 import { join, dirname, basename } from "node:path";
 import { homedir } from "node:os";
 import { existsSync } from "node:fs";
@@ -193,6 +193,66 @@ export async function moveItem(item, toScopeId, scopes) {
   }
 }
 
+// ── Delete functions ─────────────────────────────────────────────────
+
+async function deleteMemory(item) {
+  await unlink(item.path);
+  return { ok: true, deleted: item.path, message: `Deleted memory "${item.name}"` };
+}
+
+async function deleteSkill(item) {
+  await rm(item.path, { recursive: true, force: true });
+  return { ok: true, deleted: item.path, message: `Deleted skill "${item.name}"` };
+}
+
+async function deleteMcp(item) {
+  const mcpJson = item.path;
+  let content;
+  try {
+    content = JSON.parse(await readFile(mcpJson, "utf-8"));
+  } catch {
+    return { ok: false, error: `Cannot read .mcp.json: ${mcpJson}` };
+  }
+
+  if (!content.mcpServers?.[item.name]) {
+    return { ok: false, error: `Server "${item.name}" not found in ${mcpJson}` };
+  }
+
+  delete content.mcpServers[item.name];
+  await writeFile(mcpJson, JSON.stringify(content, null, 2) + "\n");
+
+  return { ok: true, deleted: mcpJson, message: `Deleted MCP server "${item.name}"` };
+}
+
+/**
+ * Delete an item permanently.
+ */
+export async function deleteItem(item, scopes) {
+  if (item.locked) {
+    return { ok: false, error: `${item.name} is locked and cannot be deleted` };
+  }
+
+  const deletableCategories = ["memory", "skill", "mcp"];
+  if (!deletableCategories.includes(item.category)) {
+    return { ok: false, error: `${item.category} items cannot be deleted` };
+  }
+
+  try {
+    switch (item.category) {
+      case "memory":
+        return await deleteMemory(item);
+      case "skill":
+        return await deleteSkill(item);
+      case "mcp":
+        return await deleteMcp(item);
+      default:
+        return { ok: false, error: `Unknown category: ${item.category}` };
+    }
+  } catch (err) {
+    return { ok: false, error: `Delete failed: ${err.message}` };
+  }
+}
+
 /**
  * Get valid destination scopes for an item.
  * Returns only scopes where this category of item can live.

package/src/scanner.mjs

@@ -49,7 +49,7 @@ function parseFrontmatter(content) {
 
 /**
  * Resolve an encoded project dir name back to a real filesystem path.
- * E.g. "-home-nicole-AlltrueAi-ai-security-control-plane" → "/home/nicole/AlltrueAi/ai-security-control-plane"
+ * E.g. "-home-user-mycompany-repo1" → "/home/user/mycompany/repo1"
  *
  * Strategy: starting from root, greedily match the longest existing directory
  * at each level by consuming segments from the encoded name.
@@ -120,7 +120,7 @@ async function discoverScopes() {
 
     // Decode encoded path: try to find the real directory on disk.
     // The encoding replaces / with - and prepends -.
-    // E.g. -home-nicole-AlltrueAi-ai-security-control-plane → /home/nicole/AlltrueAi/ai-security-control-plane
+    // E.g. -home-user-mycompany-repo1 → /home/user/mycompany/repo1
     // Since directory names can contain dashes, we resolve by checking which real path exists.
     const realPath = await resolveEncodedProjectPath(d.name);
     if (!realPath) continue;

package/src/server.mjs

@@ -8,7 +8,7 @@ import { createServer } from "node:http";
 import { readFile } from "node:fs/promises";
 import { join, extname } from "node:path";
 import { scan } from "./scanner.mjs";
-import { moveItem, getValidDestinations } from "./mover.mjs";
+import { moveItem, deleteItem, getValidDestinations } from "./mover.mjs";
 
 const UI_DIR = join(import.meta.dirname, "ui");
 
@@ -84,6 +84,22 @@ async function handleRequest(req, res) {
     return json(res, result, result.ok ? 200 : 400);
   }
 
+  // POST /api/delete — delete an item
+  if (path === "/api/delete" && req.method === "POST") {
+    const { itemPath } = await readBody(req);
+
+    if (!cachedData) await freshScan();
+
+    const item = cachedData.items.find(i => i.path === itemPath && !i.locked);
+    if (!item) return json(res, { ok: false, error: "Item not found or locked" }, 400);
+
+    const result = await deleteItem(item, cachedData.scopes);
+
+    if (result.ok) await freshScan();
+
+    return json(res, result, result.ok ? 200 : 400);
+  }
+
   // GET /api/destinations?path=...&category=... — valid move destinations
   if (path === "/api/destinations" && req.method === "GET") {
     if (!cachedData) await freshScan();
@@ -95,6 +111,55 @@ async function handleRequest(req, res) {
     return json(res, { ok: true, destinations, currentScopeId: item.scopeId });
   }
 
+  // POST /api/restore — restore a deleted file (for undo)
+  if (path === "/api/restore" && req.method === "POST") {
+    const { filePath, content, isDir } = await readBody(req);
+    if (!filePath || !filePath.startsWith("/")) {
+      return json(res, { ok: false, error: "Invalid path" }, 400);
+    }
+    try {
+      const { mkdir, writeFile: wf } = await import("node:fs/promises");
+      const { dirname } = await import("node:path");
+      await mkdir(dirname(filePath), { recursive: true });
+      if (isDir) {
+        // For skills: restore SKILL.md inside the directory
+        await mkdir(filePath, { recursive: true });
+        const skillPath = join(filePath, "SKILL.md");
+        await wf(skillPath, content, "utf-8");
+      } else {
+        await wf(filePath, content, "utf-8");
+      }
+      await freshScan();
+      return json(res, { ok: true, message: "Restored successfully" });
+    } catch (err) {
+      return json(res, { ok: false, error: `Restore failed: ${err.message}` }, 400);
+    }
+  }
+
+  // POST /api/restore-mcp — restore a deleted MCP server entry
+  if (path === "/api/restore-mcp" && req.method === "POST") {
+    const { name, config, mcpJsonPath } = await readBody(req);
+    if (!name || !config || !mcpJsonPath) {
+      return json(res, { ok: false, error: "Missing name, config, or mcpJsonPath" }, 400);
+    }
+    try {
+      let content = { mcpServers: {} };
+      try {
+        content = JSON.parse(await readFile(mcpJsonPath, "utf-8"));
+        if (!content.mcpServers) content.mcpServers = {};
+      } catch { /* file doesn't exist, start fresh */ }
+      content.mcpServers[name] = config;
+      const { writeFile: wf, mkdir: mk } = await import("node:fs/promises");
+      const { dirname } = await import("node:path");
+      await mk(dirname(mcpJsonPath), { recursive: true });
+      await wf(mcpJsonPath, JSON.stringify(content, null, 2) + "\n");
+      await freshScan();
+      return json(res, { ok: true, message: `Restored MCP server "${name}"` });
+    } catch (err) {
+      return json(res, { ok: false, error: `Restore failed: ${err.message}` }, 400);
+    }
+  }
+
   // GET /api/file-content?path=... — read file content for detail panel
   if (path === "/api/file-content" && req.method === "GET") {
     const filePath = url.searchParams.get("path");
@@ -121,6 +186,12 @@ async function handleRequest(req, res) {
     return serveFile(res, join(UI_DIR, "app.js"));
   }
 
+  // Suppress favicon 404
+  if (path === "/favicon.ico") {
+    res.writeHead(204);
+    return res.end();
+  }
+
   // ── 404 ──
   res.writeHead(404);
   res.end("Not found");
@@ -128,7 +199,7 @@ async function handleRequest(req, res) {
 
 // ── Start server ─────────────────────────────────────────────────────
 
-export function startServer(port = 3847) {
+export function startServer(port = 3847, maxRetries = 10) {
   const server = createServer(async (req, res) => {
     try {
       await handleRequest(req, res);
@@ -139,9 +210,25 @@ export function startServer(port = 3847) {
     }
   });
 
-  server.listen(port, () => {
-    console.log(`Claude Inventory running at http://localhost:${port}`);
+  let attempt = 0;
+  function tryListen(p) {
+    server.listen(p, () => {
+      console.log(`Claude Code Organizer running at http://localhost:${p}`);
+    });
+  }
+
+  server.on("error", (err) => {
+    if (err.code === "EADDRINUSE" && attempt < maxRetries) {
+      attempt++;
+      const nextPort = port + attempt;
+      console.log(`Port ${port + attempt - 1} in use, trying ${nextPort}...`);
+      tryListen(nextPort);
+    } else {
+      console.error(`Failed to start server: ${err.message}`);
+      process.exit(1);
+    }
   });
 
+  tryListen(port);
   return server;
 }

package/src/ui/app.js

@@ -14,6 +14,10 @@ let data = null;         // { scopes, items, counts }
 let activeFilters = new Set(); // empty = show all, or set of "memory", "skill", "mcp", etc.
 let selectedItem = null; // currently selected item object
 let pendingDrag = null;  // { item, fromScopeId, toScopeId, revertFn }
+let pendingDelete = null; // item to delete
+let draggingItem = null; // item currently being dragged
+let expandState = { scopes: new Set(), cats: new Set() }; // track expanded sections
+let bulkSelected = new Set(); // paths of selected items for bulk ops
 
 // ── Category config ──────────────────────────────────────────────────
 
@@ -44,6 +48,9 @@ async function init() {
   setupSearch();
   setupDetailPanel();
   setupModals();
+  setupBulkBar();
+  setupScopeDropZones();
+  setupExpandToggle();
 }
 
 async function fetchJson(url) {
@@ -155,6 +162,17 @@ function renderScope(scope, depth) {
     (categories[item.category] ??= []).push(item);
   }
 
+  // Sort memory items: feedback last, then alphabetical within each subType
+  if (categories.memory) {
+    const subTypeOrder = { project: 0, reference: 1, user: 2, feedback: 3 };
+    categories.memory.sort((a, b) => {
+      const oa = subTypeOrder[a.subType] ?? 2;
+      const ob = subTypeOrder[b.subType] ?? 2;
+      if (oa !== ob) return oa - ob;
+      return a.name.localeCompare(b.name);
+    });
+  }
+
   // Count sub-projects
   const subInfo = childScopes.length > 0 ? `${childScopes.length} sub-projects` : "";
 
@@ -205,15 +223,20 @@ function renderItem(item) {
   const icon = ITEM_ICONS[item.category] || "📄";
   const locked = item.locked ? " locked" : "";
   const badgeClass = `b-${item.subType || item.category}`;
+  const checked = bulkSelected.has(item.path) ? " checked" : "";
+
+  const checkbox = item.locked ? "" : `<input type="checkbox" class="row-chk" data-path="${esc(item.path)}"${checked}>`;
 
   const actions = item.locked ? "" : `
     <span class="row-acts">
       <button class="rbtn" data-action="move">Move</button>
       <button class="rbtn" data-action="open">Open</button>
+      <button class="rbtn rbtn-danger" data-action="delete">Delete</button>
     </span>`;
 
   return `
     <div class="item-row${locked}" data-path="${esc(item.path)}" data-category="${item.category}">
+      ${checkbox}
       <span class="row-ico">${icon}</span>
       <span class="row-name">${esc(item.name)}</span>
       <span class="row-badge ${badgeClass}">${esc(item.subType || item.category)}</span>
@@ -241,10 +264,58 @@ function esc(s) {
 
 // ── SortableJS init ──────────────────────────────────────────────────
 
+function saveExpandState() {
+  expandState.scopes.clear();
+  expandState.cats.clear();
+  document.querySelectorAll(".scope-hdr").forEach(hdr => {
+    const body = hdr.nextElementSibling;
+    if (body && !body.classList.contains("c")) {
+      expandState.scopes.add(hdr.dataset.scopeId);
+    }
+  });
+  document.querySelectorAll(".cat-hdr").forEach(hdr => {
+    const body = hdr.nextElementSibling;
+    const scopeId = hdr.closest(".scope-block")?.querySelector(".scope-hdr")?.dataset.scopeId || "";
+    const catKey = `${scopeId}::${hdr.dataset.cat}`;
+    if (body && !body.classList.contains("c")) {
+      expandState.cats.add(catKey);
+    }
+  });
+}
+
+function restoreExpandState() {
+  // Scopes default open — collapse those NOT in saved state (only if we have saved state)
+  const hasSavedState = expandState.scopes.size > 0 || expandState.cats.size > 0;
+  document.querySelectorAll(".scope-hdr").forEach(hdr => {
+    const body = hdr.nextElementSibling;
+    const tog = hdr.querySelector(".scope-tog");
+    if (hasSavedState && !expandState.scopes.has(hdr.dataset.scopeId)) {
+      body?.classList.add("c");
+      tog?.classList.add("c");
+    }
+  });
+
+  // Categories default collapsed — expand those in saved state
+  document.querySelectorAll(".cat-hdr").forEach(hdr => {
+    const body = hdr.nextElementSibling;
+    const tog = hdr.querySelector(".cat-tog");
+    const scopeId = hdr.closest(".scope-block")?.querySelector(".scope-hdr")?.dataset.scopeId || "";
+    const catKey = `${scopeId}::${hdr.dataset.cat}`;
+
+    if (expandState.cats.has(catKey)) {
+      body?.classList.remove("c");
+      tog?.classList.remove("c");
+    } else {
+      body?.classList.add("c");
+      tog?.classList.add("c");
+    }
+  });
+}
+
 function initSortable() {
   document.querySelectorAll(".sortable-zone").forEach(el => {
     const group = el.dataset.group;
-    if (!group || group === "none") return; // non-movable categories
+    if (!group || group === "none") return;
 
     Sortable.create(el, {
       group,
@@ -257,7 +328,15 @@ function initSortable() {
       scrollSensitivity: 100,
       scrollSpeed: 15,
       bubbleScroll: true,
+      onStart(evt) {
+        const itemPath = evt.item.dataset.path;
+        draggingItem = data.items.find(i => i.path === itemPath);
+      },
       onEnd(evt) {
+        draggingItem = null;
+        // Remove all drop-target highlights
+        document.querySelectorAll(".scope-block.drop-target").forEach(b => b.classList.remove("drop-target"));
+
         if (evt.from === evt.to) return;
 
         const itemEl = evt.item;
@@ -270,7 +349,6 @@ function initSortable() {
         const fromScope = data.scopes.find(s => s.id === fromScopeId);
         const toScope = data.scopes.find(s => s.id === toScopeId);
 
-        // Revert function
         const oldParent = evt.from;
         const oldIndex = evt.oldIndex;
         const revertFn = () => {
@@ -278,14 +356,13 @@ function initSortable() {
           else oldParent.insertBefore(itemEl, oldParent.children[oldIndex]);
         };
 
-        // Show confirm with full details
         pendingDrag = { item, fromScopeId, toScopeId, revertFn };
         showDragConfirm(item, fromScope, toScope);
       }
     });
   });
 
-  // Scope header toggle — default OPEN (show structure)
+  // Scope header toggle — default OPEN
   document.querySelectorAll(".scope-hdr").forEach(hdr => {
     hdr.addEventListener("click", () => {
       const body = hdr.nextElementSibling;
@@ -295,14 +372,13 @@ function initSortable() {
     });
   });
 
-  // Category toggle — default COLLAPSED (hide items)
-  document.querySelectorAll(".cat-hdr").forEach(hdr => {
-    const body = hdr.nextElementSibling;
-    const tog = hdr.querySelector(".cat-tog");
-    body.classList.add("c");
-    tog.classList.add("c");
+  // Category toggle — restore state or default collapsed
+  restoreExpandState();
 
+  document.querySelectorAll(".cat-hdr").forEach(hdr => {
     hdr.addEventListener("click", () => {
+      const body = hdr.nextElementSibling;
+      const tog = hdr.querySelector(".cat-tog");
       body.classList.toggle("c");
       tog.classList.toggle("c");
     });
@@ -311,7 +387,7 @@ function initSortable() {
   // Item click → detail panel
   document.querySelectorAll(".item-row").forEach(row => {
     row.addEventListener("click", (e) => {
-      if (e.target.closest(".rbtn")) return; // don't trigger on button click
+      if (e.target.closest(".rbtn")) return;
       const path = row.dataset.path;
       const item = data.items.find(i => i.path === path);
       if (item) showDetail(item, row);
@@ -332,6 +408,229 @@ function initSortable() {
         openMoveModal(item);
       } else if (btn.dataset.action === "open") {
         window.open(`vscode://file${item.path}`, "_blank");
+      } else if (btn.dataset.action === "delete") {
+        openDeleteModal(item);
+      }
+    });
+  });
+
+  // Checkbox handlers for bulk select
+  document.querySelectorAll(".row-chk").forEach(chk => {
+    chk.addEventListener("change", (e) => {
+      e.stopPropagation();
+      const path = chk.dataset.path;
+      if (chk.checked) bulkSelected.add(path);
+      else bulkSelected.delete(path);
+      updateBulkBar();
+    });
+    chk.addEventListener("click", (e) => e.stopPropagation());
+  });
+}
+
+// ── Bulk operations ─────────────────────────────────────────────────
+
+function updateBulkBar() {
+  const bar = document.getElementById("bulkBar");
+  if (bulkSelected.size === 0) {
+    bar.classList.add("hidden");
+    return;
+  }
+  bar.classList.remove("hidden");
+  document.getElementById("bulkCount").textContent = `${bulkSelected.size} selected`;
+}
+
+function setupBulkBar() {
+  document.getElementById("bulkClear").addEventListener("click", () => {
+    bulkSelected.clear();
+    document.querySelectorAll(".row-chk").forEach(c => c.checked = false);
+    updateBulkBar();
+  });
+
+  document.getElementById("bulkDelete").addEventListener("click", async () => {
+    if (bulkSelected.size === 0) return;
+    const count = bulkSelected.size;
+    const paths = [...bulkSelected];
+
+    // Confirm
+    if (!confirm(`Delete ${count} item(s)? This cannot be undone.`)) return;
+
+    let ok = 0, fail = 0;
+    for (const p of paths) {
+      const result = await doDelete(p, true); // true = skip refresh
+      if (result.ok) ok++;
+      else fail++;
+    }
+
+    bulkSelected.clear();
+    await refreshUI();
+    toast(`Deleted ${ok} item(s)${fail ? `, ${fail} failed` : ""}`);
+  });
+
+  document.getElementById("bulkMove").addEventListener("click", async () => {
+    if (bulkSelected.size === 0) return;
+    const paths = [...bulkSelected];
+
+    // All selected items must be same category for move
+    const items = paths.map(p => data.items.find(i => i.path === p)).filter(Boolean);
+    const categories = new Set(items.map(i => i.category));
+    if (categories.size > 1) {
+      return toast("Cannot bulk-move items of different types", true);
+    }
+
+    // Use first item to get destinations, then move all
+    openBulkMoveModal(items);
+  });
+}
+
+async function openBulkMoveModal(items) {
+  const first = items[0];
+  const res = await fetchJson(`/api/destinations?path=${encodeURIComponent(first.path)}`);
+  if (!res.ok) return toast(res.error, true);
+
+  const listEl = document.getElementById("moveDestList");
+  const allScopeMap = {};
+  for (const s of data.scopes) allScopeMap[s.id] = s;
+  for (const s of res.destinations) allScopeMap[s.id] = s;
+
+  function getDepth(scope) {
+    let depth = 0, cur = scope;
+    while (cur.parentId) { depth++; cur = allScopeMap[cur.parentId] || { parentId: null }; }
+    return depth;
+  }
+
+  const ordered = [];
+  function addWithChildren(parentId) {
+    for (const s of res.destinations) {
+      if ((s.parentId || null) === parentId) { ordered.push(s); addWithChildren(s.id); }
+    }
+  }
+  addWithChildren(null);
+
+  listEl.innerHTML = ordered.map(scope => {
+    const depth = getDepth(scope);
+    const indentPx = depth > 0 ? ` style="padding-left:${depth * 28}px"` : "";
+    const icon = scope.id === "global" ? "🌐" : (SCOPE_ICONS[scope.type] || "📂");
+    return `<div class="dest" data-scope-id="${esc(scope.id)}"${indentPx}>
+      <span class="di">${icon}</span>
+      <span class="dn">${esc(scope.name)}</span>
+      <span class="dp">${esc(scope.tag)}</span>
+    </div>`;
+  }).join("");
+
+  let selectedDest = null;
+  listEl.querySelectorAll(".dest").forEach(d => {
+    d.addEventListener("click", () => {
+      listEl.querySelectorAll(".dest").forEach(x => x.classList.remove("sel"));
+      d.classList.add("sel");
+      selectedDest = d.dataset.scopeId;
+      document.getElementById("moveConfirm").disabled = false;
+    });
+  });
+
+  document.getElementById("moveConfirm").disabled = true;
+  document.getElementById("moveConfirm").onclick = async () => {
+    if (!selectedDest) return;
+    closeMoveModal();
+    let ok = 0, fail = 0;
+    for (const item of items) {
+      const result = await doMove(item.path, selectedDest, true); // true = skip refresh
+      if (result.ok) ok++;
+      else fail++;
+    }
+    bulkSelected.clear();
+    await refreshUI();
+    toast(`Moved ${ok} item(s)${fail ? `, ${fail} failed` : ""}`);
+  };
+
+  document.getElementById("moveModal").classList.remove("hidden");
+}
+
+// ── Scope card drop zones (document-level, bypass SortableJS) ────────
+// SortableJS intercepts per-element dragover events on sortable containers.
+// Using document-level listeners in capture phase ensures highlighting works.
+
+function setupScopeDropZones() {
+  document.addEventListener("dragover", (e) => {
+    if (!draggingItem) return;
+
+    // Find the innermost scope-block under cursor
+    const scopeBlock = e.target.closest(".scope-block");
+
+    // Clear all highlights
+    document.querySelectorAll(".scope-block.drop-target").forEach(b => b.classList.remove("drop-target"));
+
+    if (scopeBlock) {
+      const hdr = scopeBlock.querySelector(":scope > .scope-hdr");
+      const scopeId = hdr?.dataset.scopeId;
+      if (scopeId && scopeId !== draggingItem.scopeId) {
+        e.preventDefault();
+        scopeBlock.classList.add("drop-target");
+      }
+    }
+  }, true); // capture phase
+
+  document.addEventListener("drop", (e) => {
+    if (!draggingItem) return;
+
+    const scopeBlock = e.target.closest(".scope-block");
+    document.querySelectorAll(".scope-block.drop-target").forEach(b => b.classList.remove("drop-target"));
+
+    if (!scopeBlock) return;
+    const hdr = scopeBlock.querySelector(":scope > .scope-hdr");
+    const scopeId = hdr?.dataset.scopeId;
+    if (!scopeId || scopeId === draggingItem.scopeId) return;
+
+    // If drop landed inside a sortable zone, SortableJS onEnd handles it
+    if (e.target.closest(".sortable-zone")) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const item = draggingItem;
+    const fromScope = data.scopes.find(s => s.id === item.scopeId);
+    const toScope = data.scopes.find(s => s.id === scopeId);
+
+    pendingDrag = { item, fromScopeId: item.scopeId, toScopeId: scopeId, revertFn: () => {} };
+    showDragConfirm(item, fromScope, toScope);
+    draggingItem = null;
+  }, true); // capture phase
+
+  document.addEventListener("dragend", () => {
+    draggingItem = null;
+    document.querySelectorAll(".scope-block.drop-target").forEach(b => b.classList.remove("drop-target"));
+  }, true); // capture phase
+}
+
+// ── Expand/Collapse toggle ───────────────────────────────────────────
+
+let allExpanded = false;
+
+function setupExpandToggle() {
+  const btn = document.getElementById("expandToggle");
+  btn.addEventListener("click", () => {
+    allExpanded = !allExpanded;
+    btn.innerHTML = allExpanded
+      ? '<span class="toggle-icon expanded"></span> Collapse all'
+      : '<span class="toggle-icon"></span> Expand all';
+
+    // Scopes always stay open — only categories toggle
+    // Expand all = categories open; Collapse all = categories closed (default)
+    document.querySelectorAll(".scope-hdr").forEach(hdr => {
+      const body = hdr.nextElementSibling;
+      const tog = hdr.querySelector(".scope-tog");
+      body?.classList.remove("c");
+      tog?.classList.remove("c");
+    });
+
+    document.querySelectorAll(".cat-hdr").forEach(hdr => {
+      const body = hdr.nextElementSibling;
+      const tog = hdr.querySelector(".cat-tog");
+      if (allExpanded) {
+        body?.classList.remove("c");
+        tog?.classList.remove("c");
+      } else {
+        body?.classList.add("c");
+        tog?.classList.add("c");
       }
     });
   });
@@ -342,10 +641,63 @@ function initSortable() {
 function setupSearch() {
   document.getElementById("searchInput").addEventListener("input", function () {
     const q = this.value.toLowerCase();
+    const btn = document.getElementById("expandToggle");
+
+    // Auto-expand when searching, collapse back when cleared
+    if (q && !allExpanded) {
+      allExpanded = true;
+      btn.innerHTML = '<span class="toggle-icon expanded"></span> Collapse all';
+      document.querySelectorAll(".scope-hdr").forEach(hdr => {
+        hdr.nextElementSibling?.classList.remove("c");
+        hdr.querySelector(".scope-tog")?.classList.remove("c");
+      });
+      document.querySelectorAll(".cat-hdr").forEach(hdr => {
+        hdr.nextElementSibling?.classList.remove("c");
+        hdr.querySelector(".cat-tog")?.classList.remove("c");
+      });
+    } else if (!q && allExpanded) {
+      allExpanded = false;
+      btn.innerHTML = '<span class="toggle-icon"></span> Expand all';
+      document.querySelectorAll(".cat-hdr").forEach(hdr => {
+        hdr.nextElementSibling?.classList.add("c");
+        hdr.querySelector(".cat-tog")?.classList.add("c");
+      });
+    }
+
+    // 1. Show/hide individual item rows
     document.querySelectorAll(".item-row").forEach(row => {
       const text = row.textContent.toLowerCase();
       row.style.display = (!q || text.includes(q)) ? "" : "none";
     });
+
+    // 2. Hide category sections where all items are hidden
+    document.querySelectorAll(".cat-hdr").forEach(catHdr => {
+      const catBody = catHdr.nextElementSibling;
+      if (!catBody) return;
+      const rows = catBody.querySelectorAll(".item-row");
+      const anyVisible = rows.length === 0 || [...rows].some(r => r.style.display !== "none");
+      catHdr.style.display = anyVisible ? "" : "none";
+      catBody.style.display = anyVisible ? "" : "none";
+    });
+
+    // 3. Hide scope blocks bottom-up (deepest first so parents see child visibility)
+    const allBlocks = [...document.querySelectorAll(".scope-block")];
+    allBlocks.reverse().forEach(block => {
+      const hdr = block.querySelector(":scope > .scope-hdr");
+      const body = block.querySelector(":scope > .scope-body");
+      if (!hdr || !body) return;
+
+      // Check if any direct category content is visible
+      const catHdrs = body.querySelectorAll(":scope > .cat-hdr");
+      const anyCatVisible = [...catHdrs].some(ch => ch.style.display !== "none");
+
+      // Check if any child scope-block is visible
+      const childScopes = body.querySelectorAll(":scope > .child-scopes > .scope-block");
+      const anyChildVisible = [...childScopes].some(cb => cb.style.display !== "none");
+
+      const visible = !q || anyCatVisible || anyChildVisible;
+      block.style.display = visible ? "" : "none";
+    });
   });
 }
 
@@ -359,6 +711,9 @@ function setupDetailPanel() {
   document.getElementById("detailMove").addEventListener("click", () => {
     if (selectedItem && !selectedItem.locked) openMoveModal(selectedItem);
   });
+  document.getElementById("detailDelete").addEventListener("click", () => {
+    if (selectedItem && !selectedItem.locked) openDeleteModal(selectedItem);
+  });
 }
 
 function showDetail(item, rowEl) {
@@ -375,12 +730,56 @@ function showDetail(item, rowEl) {
   document.getElementById("detailDate").textContent = item.mtime || "—";
   document.getElementById("detailPath").textContent = item.path;
 
-  // Show/hide move button
+  // Show/hide move and delete buttons
   document.getElementById("detailMove").style.display = item.locked ? "none" : "";
+  document.getElementById("detailDelete").style.display = item.locked ? "none" : "";
 
   // Highlight row
   document.querySelectorAll(".item-row.selected").forEach(r => r.classList.remove("selected"));
   if (rowEl) rowEl.classList.add("selected");
+
+  // Load preview
+  loadPreview(item);
+}
+
+async function loadPreview(item) {
+  const el = document.getElementById("previewContent");
+  el.textContent = "Loading...";
+
+  try {
+    // MCP: show config directly from item data
+    if (item.category === "mcp") {
+      el.textContent = JSON.stringify(item.mcpConfig || {}, null, 2);
+      return;
+    }
+
+    // Hook: show command/prompt inline
+    if (item.category === "hook") {
+      el.textContent = item.description || "(no content)";
+      return;
+    }
+
+    // Plugin: directory, no single file to preview
+    if (item.category === "plugin") {
+      el.textContent = `Plugin directory: ${item.path}`;
+      return;
+    }
+
+    // Skill: read SKILL.md inside the directory
+    let filePath = item.path;
+    if (item.category === "skill") {
+      filePath = item.path + "/SKILL.md";
+    }
+
+    const res = await fetchJson(`/api/file-content?path=${encodeURIComponent(filePath)}`);
+    if (res.ok) {
+      el.textContent = res.content;
+    } else {
+      el.textContent = res.error || "Cannot load preview";
+    }
+  } catch {
+    el.textContent = "Failed to load preview";
+  }
 }
 
 function closeDetail() {
@@ -427,6 +826,26 @@ function showDragConfirm(item, fromScope, toScope) {
 
 // ── Modals ───────────────────────────────────────────────────────────
 
+function openDeleteModal(item) {
+  pendingDelete = item;
+  const catConfig = CATEGORIES[item.category] || { icon: "📄", label: item.category };
+  const scope = data.scopes.find(s => s.id === item.scopeId);
+
+  document.getElementById("deletePreview").innerHTML = `
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
+      <span style="font-size:1.1rem;">${catConfig.icon}</span>
+      <div>
+        <div style="font-weight:700;color:var(--text-primary);font-size:0.88rem;">${esc(item.name)}</div>
+        <div style="font-size:0.65rem;color:var(--text-muted);margin-top:2px;">${esc(scope?.name || item.scopeId)} · ${esc(item.category)}</div>
+      </div>
+    </div>
+    <div style="font-size:0.68rem;color:#dc2626;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light);">
+      ${item.category === "skill" ? "This will delete the entire skill folder and all its files." : "This will permanently delete the file."}
+    </div>`;
+
+  document.getElementById("deleteModal").classList.remove("hidden");
+}
+
 function setupModals() {
   // Drag confirm
   document.getElementById("dcCancel").addEventListener("click", () => {
@@ -455,6 +874,25 @@ function setupModals() {
       pendingDrag = null;
     }
   });
+
+  // Delete modal
+  document.getElementById("deleteCancel").addEventListener("click", () => {
+    document.getElementById("deleteModal").classList.add("hidden");
+    pendingDelete = null;
+  });
+  document.getElementById("deleteConfirm").addEventListener("click", async () => {
+    document.getElementById("deleteModal").classList.add("hidden");
+    if (pendingDelete) {
+      await doDelete(pendingDelete.path);
+      pendingDelete = null;
+    }
+  });
+  document.getElementById("deleteModal").addEventListener("click", (e) => {
+    if (e.target === document.getElementById("deleteModal")) {
+      document.getElementById("deleteModal").classList.add("hidden");
+      pendingDelete = null;
+    }
+  });
 }
 
 async function openMoveModal(item) {
@@ -545,7 +983,19 @@ function closeMoveModal() {
 
 // ── API calls ────────────────────────────────────────────────────────
 
-async function doMove(itemPath, toScopeId) {
+async function refreshUI() {
+  saveExpandState();
+  data = await fetchJson("/api/scan");
+  renderPills();
+  renderTree();
+  closeDetail();
+}
+
+async function doMove(itemPath, toScopeId, skipRefresh = false) {
+  // Find item before move for undo info
+  const item = data.items.find(i => i.path === itemPath);
+  const fromScopeId = item?.scopeId;
+
   const response = await fetch("/api/move", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -553,27 +1003,115 @@ async function doMove(itemPath, toScopeId) {
   });
   const result = await response.json();
 
-  if (result.ok) {
-    toast(result.message);
-    // Refresh everything
-    data = await fetchJson("/api/scan");
-    renderPills();
-    renderTree();
-    closeDetail();
-  } else {
-    toast(result.error, true);
+  if (!skipRefresh) {
+    if (result.ok) {
+      const undoFn = async () => {
+        // Move back: result.to is the new path, fromScopeId is where it came from
+        const undoResult = await fetch("/api/move", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ itemPath: result.to, toScopeId: fromScopeId }),
+        }).then(r => r.json());
+        if (undoResult.ok) { toast("Move undone"); await refreshUI(); }
+        else toast(undoResult.error, true);
+      };
+      toast(result.message, false, undoFn);
+      await refreshUI();
+    } else {
+      toast(result.error, true);
+    }
   }
 
   return result;
 }
 
-// ── Toast ────────────────────────────────────────────────────────────
+async function doDelete(itemPath, skipRefresh = false) {
+  // Backup content before delete for undo
+  const item = data.items.find(i => i.path === itemPath);
+  let backupContent = null;
+  let mcpBackup = null;
+  if (item) {
+    try {
+      if (item.category === "mcp") {
+        // MCP: backup the server config from item data
+        mcpBackup = { name: item.name, config: item.mcpConfig, mcpJsonPath: item.path };
+      } else {
+        let readPath = item.path;
+        if (item.category === "skill") readPath = item.path + "/SKILL.md";
+        const backup = await fetchJson(`/api/file-content?path=${encodeURIComponent(readPath)}`);
+        if (backup.ok) backupContent = backup.content;
+      }
+    } catch { /* best effort */ }
+  }
 
-function toast(msg, isError = false) {
+  const response = await fetch("/api/delete", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ itemPath }),
+  });
+  const result = await response.json();
+
+  if (!skipRefresh) {
+    if (result.ok) {
+      let undoFn = null;
+      if (mcpBackup) {
+        // MCP undo: re-add the server entry to .mcp.json
+        undoFn = async () => {
+          const restoreResult = await fetch("/api/restore-mcp", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(mcpBackup),
+          }).then(r => r.json());
+          if (restoreResult.ok) { toast("Delete undone"); await refreshUI(); }
+          else toast(restoreResult.error, true);
+        };
+      } else if (backupContent) {
+        undoFn = async () => {
+          const restoreResult = await fetch("/api/restore", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              filePath: item.path,
+              content: backupContent,
+              isDir: item.category === "skill",
+            }),
+          }).then(r => r.json());
+          if (restoreResult.ok) { toast("Delete undone"); await refreshUI(); }
+          else toast(restoreResult.error, true);
+        };
+      }
+      toast(result.message, false, undoFn);
+      await refreshUI();
+    } else {
+      toast(result.error, true);
+    }
+  }
+
+  return result;
+}
+
+// ── Toast with optional Undo ─────────────────────────────────────────
+
+let toastTimer = null;
+
+function toast(msg, isError = false, undoFn = null) {
   const el = document.getElementById("toast");
-  document.getElementById("toastMsg").textContent = msg;
-  el.className = isError ? "toast error" : "toast";
-  setTimeout(() => el.classList.add("hidden"), 4000);
+  if (toastTimer) clearTimeout(toastTimer);
+
+  if (undoFn) {
+    document.getElementById("toastMsg").innerHTML =
+      `${esc(msg)} <button class="toast-undo" id="toastUndo">Undo</button>`;
+    el.className = "toast";
+    document.getElementById("toastUndo").onclick = async () => {
+      el.classList.add("hidden");
+      await undoFn();
+    };
+    toastTimer = setTimeout(() => el.classList.add("hidden"), 8000); // longer for undo
+  } else {
+    document.getElementById("toastMsg").textContent = msg;
+    el.className = isError ? "toast error" : "toast";
+    toastTimer = setTimeout(() => el.classList.add("hidden"), 4000);
+  }
 }
 
 // ── Start ────────────────────────────────────────────────────────────

package/src/ui/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>Claude Inventory</title>
+  <title>Claude Code Organizer</title>
   <link rel="stylesheet" href="/style.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
@@ -13,13 +13,16 @@
     <div class="tree-area">
       <!-- Header -->
       <div class="page-hdr">
-        <div class="logo">C</div>
-        <h1>Claude Inventory</h1>
+        <div class="logo"><svg width="20" height="20" viewBox="0 0 248 248" fill="none"><path d="M52.4285 162.873L98.7844 136.879L99.5485 134.602L98.7844 133.334H96.4921L88.7237 132.862L62.2346 132.153L39.3113 131.207L17.0249 130.026L11.4214 128.844L6.2 121.873L6.7094 118.447L11.4214 115.257L18.171 115.847L33.0711 116.911L55.485 118.447L71.6586 119.392L95.728 121.873H99.5485L100.058 120.337L98.7844 119.392L97.7656 118.447L74.5877 102.732L49.4995 86.1905L36.3823 76.62L29.3779 71.7757L25.8121 67.2858L24.2839 57.3608L30.6515 50.2716L39.3113 50.8623L41.4763 51.4531L50.2636 58.1879L68.9842 72.7209L93.4357 90.6804L97.0015 93.6343L98.4374 92.6652L98.6571 91.9801L97.0015 89.2625L83.757 65.2772L69.621 40.8192L63.2534 30.6579L61.5978 24.632C60.9565 22.1032 60.579 20.0111 60.579 17.4246L67.8381 7.49965L71.9133 6.19995L81.7193 7.49965L85.7946 11.0443L91.9074 24.9865L101.714 46.8451L116.996 76.62L121.453 85.4816L123.873 93.6343L124.764 96.1155H126.292V94.6976L127.566 77.9197L129.858 57.3608L132.15 30.8942L132.915 23.4505L136.608 14.4708L143.994 9.62643L149.725 12.344L154.437 19.0788L153.8 23.4505L150.998 41.6463L145.522 70.1215L141.957 89.2625H143.994L146.414 86.7813L156.093 74.0206L172.266 53.698L179.398 45.6635L187.803 36.802L193.152 32.5484H203.34L210.726 43.6549L207.415 55.1159L196.972 68.3492L188.312 79.5739L175.896 96.2095L168.191 109.585L168.882 110.689L170.738 110.53L198.755 104.504L213.91 101.787L231.994 98.7149L240.144 102.496L241.036 106.395L237.852 114.311L218.495 119.037L195.826 123.645L162.07 131.592L161.696 131.893L162.137 132.547L177.36 133.925L183.855 134.279H199.774L229.447 136.524L237.215 141.605L241.8 147.867L241.036 152.711L229.065 158.737L213.019 154.956L175.45 145.977L162.587 142.787H160.805V143.85L171.502 154.366L191.242 172.089L215.82 195.011L217.094 200.682L213.91 205.172L210.599 204.699L188.949 188.394L180.544 181.069L161.696 165.118H160.422V166.772L164.752 173.152L187.803 207.771L188.949 218.405L187.294 221.832L181.308 223.959L174.813 222.777L161.187 203.754L147.305 182.486L136.098 163.345L134.745 164.2L128.075 235.42L125.019 239.082L117.887 241.8L111.902 237.31L108.718 229.984L111.902 215.452L115.722 196.547L118.779 181.541L121.58 162.873L123.291 156.636L123.14 156.219L121.773 156.449L107.699 175.752L86.304 204.699L69.3663 222.777L65.291 224.431L58.2867 220.768L58.9235 214.27L62.8713 208.48L86.304 178.705L100.44 160.155L109.551 149.507L109.462 147.967L108.959 147.924L46.6977 188.512L35.6182 189.93L30.7788 185.44L31.4156 178.115L33.7079 175.752L52.4285 162.873Z" fill="#fff"/></svg></div>
+        <h1>Claude Code Organizer</h1>
         <span class="spacer"></span>
         <div class="pills" id="pills">
           <!-- Rendered by app.js -->
         </div>
-        <input class="search" placeholder="Search..." id="searchInput">
+        <div class="hdr-actions">
+          <input class="search" placeholder="Search name, type, description..." id="searchInput">
+          <button class="expand-toggle" id="expandToggle" title="Expand / Collapse all"><span class="toggle-icon"></span> Expand all</button>
+        </div>
       </div>
 
       <!-- Tree content — rendered by app.js -->
@@ -37,17 +40,24 @@
         <h2 id="detailTitle">—</h2>
         <button class="detail-x" id="detailClose">&times;</button>
       </div>
-      <div class="detail-bd">
+      <div class="detail-meta">
         <div class="df"><div class="dl">Type</div><div class="dv" id="detailType">—</div></div>
         <div class="df"><div class="dl">Scope</div><div class="dv" id="detailScope">—</div></div>
         <div class="df"><div class="dl">Description</div><div class="dv" id="detailDesc">—</div></div>
-        <div class="df"><div class="dl">Size</div><div class="dv" id="detailSize">—</div></div>
-        <div class="df"><div class="dl">Modified</div><div class="dv" id="detailDate">—</div></div>
+        <div class="df-row">
+          <div class="df"><div class="dl">Size</div><div class="dv" id="detailSize">—</div></div>
+          <div class="df"><div class="dl">Modified</div><div class="dv" id="detailDate">—</div></div>
+        </div>
         <div class="df"><div class="dl">Path</div><div class="dv" id="detailPath" style="font-size:0.65rem;word-break:break-all;">—</div></div>
       </div>
+      <div class="detail-preview">
+        <div class="preview-hdr"><span class="preview-label">PREVIEW</span></div>
+        <pre class="preview-content" id="previewContent">Select an item to preview</pre>
+      </div>
       <div class="detail-ft">
         <button class="btn btn-p" id="detailOpen">Open in Editor</button>
         <button class="btn btn-s" id="detailMove">Move to...</button>
+        <button class="btn btn-danger" id="detailDelete">Delete</button>
       </div>
     </div>
   </div>
@@ -80,6 +90,29 @@
     </div>
   </div>
 
+  <!-- Delete confirm modal -->
+  <div class="modal-bg hidden" id="deleteModal">
+    <div class="modal">
+      <h3>Delete Item</h3>
+      <div class="modal-sub">This will permanently delete the file from disk</div>
+      <div class="move-preview" id="deletePreview">
+        <!-- Rendered by app.js -->
+      </div>
+      <div class="modal-btns">
+        <button class="btn btn-s" id="deleteCancel">Cancel</button>
+        <button class="btn btn-danger" id="deleteConfirm">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bulk action bar -->
+  <div class="bulk-bar hidden" id="bulkBar">
+    <span class="bulk-count" id="bulkCount">0 selected</span>
+    <button class="btn btn-p btn-sm" id="bulkMove">Move all</button>
+    <button class="btn btn-danger btn-sm" id="bulkDelete">Delete all</button>
+    <button class="btn btn-s btn-sm" id="bulkClear">Clear</button>
+  </div>
+
   <!-- Toast -->
   <div class="toast hidden" id="toast"><span id="toastMsg">Done</span></div>
 

package/src/ui/style.css

@@ -1,5 +1,5 @@
 /* ══════════════════════════════════════════════════════════
-   Claude Inventory Manager — Styles
+   Claude Code Organizer — Styles
    Edit this file freely. No logic here.
    ══════════════════════════════════════════════════════════ */
 
@@ -52,7 +52,12 @@ body {
 .logo { width:32px; height:32px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:700; flex-shrink:0; }
 .page-hdr h1 { font-size:1.25rem; color:var(--text-primary); font-weight:700; letter-spacing:-0.4px; }
 .spacer { flex:1; }
-.search { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 14px; color:var(--text-primary); font-size:0.78rem; width:200px; font-family:inherit; outline:none; transition:all 0.15s; }
+.hdr-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
+.expand-toggle { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 12px; color:var(--text-secondary); font-size:0.72rem; cursor:pointer; font-family:inherit; font-weight:500; transition:all 0.15s; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
+.expand-toggle:hover { background:var(--hover); border-color:var(--scope-border); }
+.toggle-icon { display:inline-block; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid var(--text-muted); transition:transform 0.15s; }
+.toggle-icon.expanded { transform:rotate(90deg); }
+.search { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 14px; color:var(--text-primary); font-size:0.78rem; width:260px; font-family:inherit; outline:none; transition:all 0.15s; }
 .search:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
 .search::placeholder { color:var(--text-faint); }
 .pills { display:flex; gap:4px; flex-wrap:wrap; }
@@ -89,6 +94,14 @@ body {
 .scope-body { padding:0 0 6px; }
 .scope-body.c { display:none; }
 
+/* Drop zone highlighting — entire scope card lights up */
+.scope-block.drop-target > .scope-hdr {
+  background:var(--accent-light);
+  border-color:var(--accent);
+  box-shadow:0 0 0 3px rgba(91,95,199,0.15);
+  transition:all 0.12s;
+}
+
 .inherit {
   font-size:0.68rem; color:var(--accent-text); padding:6px 14px 10px 40px;
   font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
@@ -153,6 +166,7 @@ body {
 .item-row:hover .row-acts { opacity:1; }
 .rbtn { background:var(--surface); border:1px solid var(--border); border-radius:5px; color:var(--text-secondary); padding:3px 8px; cursor:pointer; font-size:0.6rem; font-family:inherit; transition:all 0.12s; }
 .rbtn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
+.rbtn-danger:hover { background:#dc2626; color:#fff; border-color:#dc2626; }
 
 /* ── Detail panel ── */
 .detail { width:340px; border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; background:var(--surface); }
@@ -161,10 +175,16 @@ body {
 .detail-hdr h2 { font-size:0.88rem; color:var(--text-primary); flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .detail-x { background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:1.1rem; transition:color 0.1s; }
 .detail-x:hover { color:var(--text-primary); }
-.detail-bd { flex:1; overflow-y:auto; padding:18px 20px; }
-.df { margin-bottom:16px; }
+.detail-meta { padding:16px 20px 8px; border-bottom:1px solid var(--border-light); flex-shrink:0; }
+.df { margin-bottom:12px; }
+.df-row { display:flex; gap:20px; }
+.df-row .df { flex:1; }
 .dl { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:4px; font-weight:600; }
 .dv { font-size:0.78rem; color:var(--text-secondary); line-height:1.4; }
+.detail-preview { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
+.preview-hdr { padding:12px 20px 6px; flex-shrink:0; }
+.preview-label { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
+.preview-content { flex:1; overflow-y:auto; padding:0 20px 16px; font-size:0.68rem; line-height:1.55; color:var(--text-secondary); white-space:pre-wrap; word-break:break-word; font-family:'SF Mono','Cascadia Code','Fira Code','Courier New',monospace; margin:0; background:transparent; }
 .detail-ft { padding:16px 20px; border-top:1px solid var(--border-light); display:flex; gap:8px; }
 .btn { padding:7px 16px; border-radius:8px; font-size:0.73rem; cursor:pointer; font-family:inherit; border:1px solid var(--border); font-weight:500; transition:all 0.15s; }
 .btn-p { background:var(--accent); color:#fff; border-color:var(--accent); }
@@ -172,6 +192,8 @@ body {
 .btn-p:disabled { opacity:0.4; cursor:not-allowed; }
 .btn-s { background:var(--surface); color:var(--text-secondary); }
 .btn-s:hover { background:var(--hover); }
+.btn-danger { background:#dc2626; color:#fff; border-color:#dc2626; }
+.btn-danger:hover { background:#b91c1c; }
 
 /* ── Modals ── */
 .modal-bg { position:fixed; inset:0; background:rgba(30,32,40,0.25); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(3px); }
@@ -192,9 +214,18 @@ body {
 .dest .dp { color:var(--text-muted); font-size:0.6rem; margin-left:auto; }
 .dest-indent { margin-left:24px; }
 
+/* ── Checkbox & Bulk bar ── */
+.row-chk { width:14px; height:14px; cursor:pointer; accent-color:var(--accent); flex-shrink:0; margin:0; }
+.bulk-bar { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 20px; display:flex; align-items:center; gap:12px; z-index:200; box-shadow:0 4px 20px rgba(0,0,0,0.12); }
+.bulk-bar.hidden { display:none; }
+.bulk-count { font-size:0.75rem; font-weight:600; color:var(--text-primary); }
+.btn-sm { padding:5px 12px; font-size:0.68rem; }
+
 .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text-primary); color:#fff; padding:12px 28px; border-radius:12px; font-size:0.78rem; z-index:200; box-shadow:0 4px 20px rgba(0,0,0,0.12); font-weight:500; transition:opacity 0.3s; }
 .toast.hidden { display:none; }
 .toast.error { background:#dc2626; }
+.toast-undo { background:none; border:1px solid rgba(255,255,255,0.4); color:#fff; padding:3px 10px; border-radius:6px; cursor:pointer; font-size:0.7rem; font-family:inherit; font-weight:600; margin-left:10px; transition:all 0.12s; }
+.toast-undo:hover { background:rgba(255,255,255,0.2); border-color:#fff; }
 
 /* ── Scrollbar ── */
 ::-webkit-scrollbar { width:6px; }