@mcpware/claude-code-organizer 0.2.4 → 0.2.5

package/.claude-plugin/plugin.json

@@ -1,10 +1,10 @@
 {
   "name": "claude-code-organizer",
-  "version": "0.1.0",
+  "version": "0.2.5",
   "description": "Organize all your Claude Code memories, skills, MCP servers, and hooks — view by scope hierarchy, move between scopes via drag-and-drop",
   "author": {
-    "name": "mcpware",
-    "url": "https://github.com/mcpware"
+    "name": "ithiria894",
+    "url": "https://github.com/ithiria894"
   },
   "homepage": "https://github.com/mcpware/claude-code-organizer",
   "repository": "https://github.com/mcpware/claude-code-organizer",

package/.mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "claude-code-organizer": {
+      "type": "stdio",
+      "command": "node",
+      "args": ["./bin/cli.mjs"]
+    }
+  }
+}

package/README.ja.md

@@ -43,6 +43,21 @@ Claude Code に「これ覚えて」って言ったのに、**違うスコープ
 - **依存ゼロ** — 純粋な Node.js ビルトインモジュールのみ、SortableJS は CDN 経由
 - **ガチのファイル移動** — `~/.claude/` 内のファイルを実際に移動する。閲覧専用ツールじゃない
 
+## なぜビジュアルダッシュボード？
+
+Claude Code は CLI でファイルの一覧表示や移動ができる。じゃあなぜこのツールが必要？
+
+| やりたいこと | CLI / Skill | ビジュアルダッシュボード |
+|-------------|:-----------:|:-------------------:|
+| **全体像** — 全スコープのメモリ・スキル・MCPサーバーを一度に見る | 長いテキスト出力をスクロール | スコープツリーで一目瞭然 |
+| **スコープ横断の把握** — Global vs Workspace vs Project の継承関係を理解 | 複数コマンドを実行して頭の中で組み立てる | インデント付きツリー階層 |
+| **スコープ間でアイテム移動** | 正確なパスを覚えてコマンド入力 | ドラッグ＆ドロップ |
+| **中身をプレビュー** | ファイルを1つずつ `cat` | クリック → サイドパネル |
+| **横断検索** | `grep` + 手動フィルタリング | リアルタイム検索 + カテゴリフィルター |
+| **何を持っているか把握** | ディレクトリごとに自分でファイル数を数える | スコープ×カテゴリごとの自動カウント |
+
+テキスト出力では得られない**全体像**が手に入る — スコープツリー全体が見えて、置き場所の間違いを即座に発見、ドラッグで修正。コマンドを覚える必要もパスを打つ必要もない。
+
 ## クイックスタート
 
 ```bash

package/README.ko.md

@@ -43,6 +43,21 @@ Claude Code한테 "이거 기억해"라고 했는데, **엉뚱한 스코프에
 - **의존성 제로** — 순수 Node.js 내장 모듈, SortableJS는 CDN으로
 - **진짜 파일 이동** — `~/.claude/` 안의 파일을 실제로 옮깁니다. 보기만 하는 뷰어가 아닙니다
 
+## 왜 비주얼 대시보드인가?
+
+Claude Code는 CLI로도 파일 목록 확인과 이동이 가능합니다. 그런데 왜 이 도구가 필요할까요?
+
+| 하고 싶은 것 | CLI / Skill | 비주얼 대시보드 |
+|-------------|:-----------:|:-------------:|
+| **전체 그림** — 모든 스코프의 메모리, 스킬, MCP 서버를 한 번에 보기 | 긴 텍스트 출력 스크롤 | 스코프 트리로 한눈에 |
+| **스코프 간 인식** — Global vs Workspace vs Project 상속 관계 파악 | 여러 명령어 실행 후 머릿속으로 조합 | 들여쓰기된 트리 계층 |
+| **스코프 간 항목 이동** | 정확한 경로 기억 + 명령어 입력 | 드래그 앤 드롭 |
+| **내용 미리보기** | 파일 하나씩 `cat` | 클릭 → 사이드 패널 |
+| **전체 검색** | `grep` + 수동 필터링 | 실시간 검색 + 카테고리 필터 |
+| **보유 현황 파악** | 디렉토리별 파일 수를 직접 세기 | 스코프×카테고리별 자동 카운트 |
+
+텍스트 출력으로는 얻을 수 없는 **전체 그림**을 제공합니다 — 스코프 트리 전체가 보이고, 잘못 배치된 항목을 즉시 발견하고, 드래그로 수정. 명령어를 외울 필요도 경로를 입력할 필요도 없습니다.
+
 ## 빠른 시작
 
 ```bash

package/README.md

@@ -43,6 +43,21 @@ You have a deploy skill sitting in global, but it only makes sense for one repo.
 - **Zero dependencies** — Pure Node.js built-in modules, SortableJS via CDN
 - **Real file moves** — Actually moves files in `~/.claude/`, not just a viewer
 
+## Why a Visual Dashboard?
+
+Claude Code can already list and move files via CLI. So why does this tool exist?
+
+| What you need | CLI / Skill | Visual Dashboard |
+|---------------|:-----------:|:----------------:|
+| **Big picture** — see every memory, skill, MCP server across all scopes at once | Scroll through long text output | Scope tree, one glance |
+| **Cross-scope awareness** — understand Global vs Workspace vs Project inheritance | Run multiple commands, piece it together | Tree hierarchy with indentation |
+| **Move items between scopes** | Remember exact paths, type commands | Drag-and-drop |
+| **Preview content** | `cat` each file one by one | Click → side panel |
+| **Search across everything** | `grep` with manual filtering | Real-time search + category filters |
+| **Understand what you have** | Count files per directory yourself | Automatic counts per category per scope |
+
+The dashboard gives you the **big picture that text output can't** — you see the full scope tree, spot misplaced items instantly, and fix them with a drag. No commands to memorize, no paths to type.
+
 ## Quick Start
 
 ```bash

package/README.zh-CN.md

@@ -43,6 +43,21 @@
 - **零依赖** — 纯 Node.js 内置模块，SortableJS 走 CDN
 - **真·文件移动** — 直接操作 `~/.claude/` 目录里的文件，不是什么只读查看器
 
+## 为什么需要可视化仪表盘？
+
+Claude Code 用 CLI 就能列出和移动文件。那为什么还要这个工具？
+
+| 你想做的事 | CLI / Skill | 可视化仪表盘 |
+|-----------|:-----------:|:----------:|
+| **全局视野** — 一次看到所有作用域的记忆、技能、MCP 服务器 | 滚动一大段文本输出 | 作用域树，一目了然 |
+| **跨作用域感知** — 理解 Global vs Workspace vs Project 的继承关系 | 跑多条命令，脑内拼凑 | 带缩进的树状层级 |
+| **跨作用域移动** | 记住准确路径，敲命令 | 拖拽搞定 |
+| **预览内容** | 一个个 `cat` 文件 | 点击 → 侧边面板 |
+| **全局搜索** | `grep` + 手动筛选 | 实时搜索 + 分类过滤 |
+| **了解你有什么** | 自己数每个目录里的文件 | 按作用域×类别自动统计 |
+
+仪表盘给你**文字输出无法提供的全局视野** — 完整的作用域树一览无余，一眼发现放错位置的东西，拖一下就修好。不用背命令，不用打路径。
+
 ## 快速上手
 
 ```bash

package/README.zh-TW.md

@@ -43,6 +43,21 @@
 - **零相依** — 純 Node.js 內建模組，SortableJS 走 CDN
 - **真・檔案搬移** — 直接動 `~/.claude/` 裡的檔案，不是只能看的 viewer
 
+## 點解要用視覺化儀表板？
+
+Claude Code 用 CLI 都可以 list 同搬 file。咁點解仲要呢個工具？
+
+| 你想做嘅嘢 | CLI / Skill | 視覺化儀表板 |
+|-----------|:-----------:|:----------:|
+| **全局視野** — 一次睇晒所有 scope 嘅記憶、技能、MCP 伺服器 | Scroll 一大段 text output | Scope tree，一眼睇晒 |
+| **跨 scope 認知** — 理解 Global vs Workspace vs Project 嘅繼承關係 | 行幾條 command，自己喺腦入面砌 | 有縮排嘅 tree 層級 |
+| **跨 scope 搬移** | 記住準確路徑，打 command | 拖拉搞掂 |
+| **預覽內容** | 逐個 `cat` 檔案 | 撳一下 → 側邊面板 |
+| **全局搜尋** | `grep` + 自己 filter | 即時搜尋 + 分類篩選 |
+| **了解你有咩** | 自己數每個目錄幾多個 file | 按 scope × 類別自動統計 |
+
+儀表板俾你**text output 做唔到嘅全局視野** — 成個 scope tree 一覽無遺，一眼就見到擺錯位嘅嘢，拖一下就搞掂。唔使背 command，唔使打 path。
+
 ## 快速開始
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcpware/claude-code-organizer",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "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.2.4",
+  "version": "0.2.5",
   "packages": [
     {
       "registryType": "npm",
       "identifier": "@mcpware/claude-code-organizer",
-      "version": "0.2.4",
+      "version": "0.2.5",
       "transport": {
         "type": "stdio"
       }

package/skills/organize/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: organize
+description: Open the Claude Code Organizer dashboard — view and manage all memories, skills, MCP servers, hooks, and configs across scopes
+argument-hint: [--port <number>]
+allowed-tools: [Bash, Read]
+---
+
+# Organize — Claude Code Dashboard
+
+Launch the Claude Code Organizer dashboard to visually manage all your customizations.
+
+## What to do
+
+1. Run the organizer server:
+
+```bash
+npx @mcpware/claude-code-organizer $ARGUMENTS
+```
+
+2. Tell the user the dashboard is opening in their browser at `http://localhost:3847` (or the next available port).
+
+3. If the user provides `--port <number>`, pass it through as the argument.
+
+## What this does
+
+Opens a drag-and-drop web dashboard showing:
+- All memories, skills, MCP servers, hooks, configs, and plugins
+- Organized by scope hierarchy (Global → Workspace → Project)
+- Move items between scopes via drag-and-drop
+- Search, filter, and preview any item
+- Delete items with undo support

package/src/scanner.mjs

@@ -175,6 +175,44 @@ async function discoverScopes() {
   return scopes;
 }
 
+// ── Skill bundle detection (via skills-lock.json) ───────────────────
+
+/**
+ * Load skill bundle info from skills-lock.json files.
+ * Returns a Map of skillName → { source, sourceType }.
+ *
+ * Checks:
+ * 1. Project-level: <repoDir>/skills-lock.json (version 1)
+ * 2. Global: ~/.agents/.skill-lock.json (version 3)
+ */
+async function loadSkillBundles(repoDir) {
+  const bundles = new Map();
+
+  // Paths to check (project-level first, then global)
+  const lockPaths = [];
+  if (repoDir) lockPaths.push(join(repoDir, "skills-lock.json"));
+  lockPaths.push(join(HOME, ".agents", ".skill-lock.json"));
+
+  for (const lockPath of lockPaths) {
+    const content = await safeReadFile(lockPath);
+    if (!content) continue;
+    try {
+      const lock = JSON.parse(content);
+      const skills = lock.skills || {};
+      for (const [name, entry] of Object.entries(skills)) {
+        if (!bundles.has(name) && entry.source) {
+          bundles.set(name, {
+            source: entry.source,
+            sourceType: entry.sourceType || "unknown",
+          });
+        }
+      }
+    } catch {}
+  }
+
+  return bundles;
+}
+
 // ── Item scanners ────────────────────────────────────────────────────
 
 async function scanMemories(scope) {
@@ -224,10 +262,14 @@ async function scanSkills(scope) {
     if (await exists(dir)) skillDirs.push(dir);
   }
 
+  // Load bundle info from skills-lock.json
+  const bundleMap = await loadSkillBundles(scope.repoDir);
+
   for (const skillsRoot of skillDirs) {
     const entries = await readdir(skillsRoot, { withFileTypes: true });
     for (const entry of entries) {
-      if (!entry.isDirectory()) continue;
+      // Support both real directories and symlinks pointing to directories
+      if (!entry.isDirectory() && !entry.isSymbolicLink()) continue;
       // Skip "private" directory (usually copies of global skills)
       if (entry.name === "private") continue;
 
@@ -268,6 +310,9 @@ async function scanSkills(scope) {
         if (fs) totalSize += fs.size;
       }
 
+      // Bundle detection from skills-lock.json
+      const bundleInfo = bundleMap.get(entry.name);
+
       items.push({
         category: "skill",
         scopeId: scope.id,
@@ -280,6 +325,7 @@ async function scanSkills(scope) {
         fileCount,
         mtime: s ? s.mtime.toISOString().slice(0, 10) : "",
         path: skillDir,
+        bundle: bundleInfo?.source || null,
       });
     }
   }

package/src/ui/app.js

@@ -192,7 +192,61 @@ function renderScope(scope, depth) {
   // Render each category
   for (const [cat, catItems] of Object.entries(categories)) {
     const catConfig = CATEGORIES[cat] || { icon: "📄", label: cat.toUpperCase(), group: null };
-    html += `
+
+    // Skills: group by bundle if any items have bundle info
+    if (cat === "skill") {
+      const bundled = {};   // source → items[]
+      const unbundled = []; // items without bundle
+      for (const item of catItems) {
+        if (item.bundle) {
+          (bundled[item.bundle] ??= []).push(item);
+        } else {
+          unbundled.push(item);
+        }
+      }
+
+      const hasBundles = Object.keys(bundled).length > 0;
+
+      html += `
+        <div class="cat-hdr" data-cat="${esc(cat)}">
+          <span class="cat-tog">▼</span>
+          <span class="cat-ico">${catConfig.icon}</span>
+          <span class="cat-nm">${catConfig.label}</span>
+          <span class="cat-cnt">${catItems.length}</span>
+        </div>
+        <div class="cat-body" data-cat="${esc(cat)}">`;
+
+      // Render each bundle as a collapsible sub-group
+      for (const [source, bundleItems] of Object.entries(bundled)) {
+        const bundleName = source.split("/").pop(); // "pbakaus/impeccable" → "impeccable"
+        const bundleLabel = source; // full "owner/repo"
+        html += `
+          <div class="bundle-hdr" data-bundle="${esc(source)}">
+            <span class="bundle-tog">▼</span>
+            <span class="bundle-ico">📦</span>
+            <span class="bundle-nm">${esc(bundleName)}</span>
+            <span class="bundle-src">${esc(bundleLabel)}</span>
+            <span class="bundle-cnt">${bundleItems.length}</span>
+          </div>
+          <div class="bundle-body" data-bundle="${esc(source)}">
+            <div class="sortable-zone" data-scope="${esc(scope.id)}" data-group="${catConfig.group || 'none'}">
+              ${bundleItems.map(item => renderItem(item)).join("")}
+            </div>
+          </div>`;
+      }
+
+      // Render unbundled skills flat (no group header)
+      if (unbundled.length > 0) {
+        html += `
+          <div class="sortable-zone" data-scope="${esc(scope.id)}" data-group="${catConfig.group || 'none'}">
+            ${unbundled.map(item => renderItem(item)).join("")}
+          </div>`;
+      }
+
+      html += `</div>`;
+    } else {
+      // Non-skill categories: render flat as before
+      html += `
         <div class="cat-hdr" data-cat="${esc(cat)}">
           <span class="cat-tog">▼</span>
           <span class="cat-ico">${catConfig.icon}</span>
@@ -204,6 +258,7 @@ function renderScope(scope, depth) {
             ${catItems.map(item => renderItem(item)).join("")}
           </div>
         </div>`;
+    }
   }
 
   // Render child scopes
@@ -281,6 +336,15 @@ function saveExpandState() {
       expandState.cats.add(catKey);
     }
   });
+  // Save bundle expand state
+  document.querySelectorAll(".bundle-hdr").forEach(hdr => {
+    const body = hdr.nextElementSibling;
+    const scopeId = hdr.closest(".scope-block")?.querySelector(".scope-hdr")?.dataset.scopeId || "";
+    const bundleKey = `${scopeId}::bundle::${hdr.dataset.bundle}`;
+    if (body && !body.classList.contains("c")) {
+      expandState.cats.add(bundleKey);
+    }
+  });
 }
 
 function restoreExpandState() {
@@ -384,6 +448,24 @@ function initSortable() {
     });
   });
 
+  // Bundle toggle — default collapsed
+  document.querySelectorAll(".bundle-hdr").forEach(hdr => {
+    const body = hdr.nextElementSibling;
+    const tog = hdr.querySelector(".bundle-tog");
+    // Default collapsed
+    const scopeId = hdr.closest(".scope-block")?.querySelector(".scope-hdr")?.dataset.scopeId || "";
+    const bundleKey = `${scopeId}::bundle::${hdr.dataset.bundle}`;
+    if (!expandState.cats.has(bundleKey)) {
+      body?.classList.add("c");
+      tog?.classList.add("c");
+    }
+    hdr.addEventListener("click", (e) => {
+      e.stopPropagation();
+      body.classList.toggle("c");
+      tog.classList.toggle("c");
+    });
+  });
+
   // Item click → detail panel
   document.querySelectorAll(".item-row").forEach(row => {
     row.addEventListener("click", (e) => {
@@ -633,6 +715,19 @@ function setupExpandToggle() {
         tog?.classList.add("c");
       }
     });
+
+    // Also expand/collapse bundles
+    document.querySelectorAll(".bundle-hdr").forEach(hdr => {
+      const body = hdr.nextElementSibling;
+      const tog = hdr.querySelector(".bundle-tog");
+      if (allExpanded) {
+        body?.classList.remove("c");
+        tog?.classList.remove("c");
+      } else {
+        body?.classList.add("c");
+        tog?.classList.add("c");
+      }
+    });
   });
 }
 
@@ -670,7 +765,22 @@ function setupSearch() {
       row.style.display = (!q || text.includes(q)) ? "" : "none";
     });
 
-    // 2. Hide category sections where all items are hidden
+    // 2a. Hide bundle groups where all items are hidden
+    document.querySelectorAll(".bundle-hdr").forEach(bundleHdr => {
+      const bundleBody = bundleHdr.nextElementSibling;
+      if (!bundleBody) return;
+      const rows = bundleBody.querySelectorAll(".item-row");
+      const anyVisible = rows.length === 0 || [...rows].some(r => r.style.display !== "none");
+      bundleHdr.style.display = anyVisible ? "" : "none";
+      bundleBody.style.display = anyVisible ? "" : "none";
+      // When searching, auto-expand visible bundles
+      if (q && anyVisible) {
+        bundleBody.classList.remove("c");
+        bundleHdr.querySelector(".bundle-tog")?.classList.remove("c");
+      }
+    });
+
+    // 2b. Hide category sections where all items are hidden
     document.querySelectorAll(".cat-hdr").forEach(catHdr => {
       const catBody = catHdr.nextElementSibling;
       if (!catBody) return;

package/src/ui/style.css

@@ -128,6 +128,25 @@ body {
 .cat-body { padding:0; }
 .cat-body.c { display:none; }
 
+/* ══════════════════════════════════════
+   BUNDLE SUB-GROUP — Inside skill category
+   ══════════════════════════════════════ */
+.bundle-hdr {
+  display:flex; align-items:center; gap:8px;
+  padding:6px 12px; margin:3px 0 2px 64px; cursor:pointer;
+  background:var(--surface); border:1px solid var(--border-light);
+  border-radius:7px; user-select:none; transition:all 0.15s;
+}
+.bundle-hdr:hover { background:var(--hover); border-color:var(--border); }
+.bundle-tog { width:12px; text-align:center; color:var(--text-faint); font-size:0.55rem; transition:transform 0.15s; flex-shrink:0; }
+.bundle-tog.c { transform:rotate(-90deg); }
+.bundle-ico { font-size:0.75rem; }
+.bundle-nm { font-size:0.68rem; color:var(--text-secondary); font-weight:600; }
+.bundle-src { font-size:0.58rem; color:var(--text-faint); font-family:'SF Mono','Cascadia Code','Fira Code','Courier New',monospace; }
+.bundle-cnt { font-size:0.58rem; color:var(--text-muted); margin-left:auto; font-weight:500; }
+.bundle-body { padding:0; }
+.bundle-body.c { display:none; }
+
 /* ══════════════════════════════════════
    ITEM ROW — Least prominent
    ══════════════════════════════════════ */