feat: update check — CLI + UI sidebar banner with copy-to-clipboard

- /api/version endpoint compares local vs npm registry latest
- CLI shows update notice after server starts (non-blocking)
- UI sidebar footer shows yellow banner when outdated
- Hover: "Click to copy update command — paste into Claude Code"
- Click: copies prompt to clipboard, user pastes into CC to update

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

Author: ithiria894

bin/cli.mjs

@@ -60,6 +60,26 @@ if (!isMcpMode) {
   }
 }
 
+// ── Update check (non-blocking) ──
+async function checkForUpdate() {
+  try {
+    const { createRequire } = await import('node:module');
+    const require = createRequire(import.meta.url);
+    const pkg = require('../package.json');
+    const localVersion = pkg.version;
+
+    const resp = await fetch('https://registry.npmjs.org/@mcpware/claude-code-organizer/latest', { signal: AbortSignal.timeout(3000) });
+    if (!resp.ok) return null;
+    const data = await resp.json();
+    const latestVersion = data.version;
+
+    if (localVersion !== latestVersion) {
+      return { local: localVersion, latest: latestVersion };
+    }
+  } catch { /* silent — don't block startup */ }
+  return null;
+}
+
 if (isMcpMode) {
   // MCP server mode — AI clients connect via stdio
   await import('../src/mcp-server.mjs');
@@ -71,8 +91,20 @@ if (isMcpMode) {
   const portIdx = args.indexOf('--port');
   const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : 3847;
 
+  // Check for update in background (don't block server start)
+  const updatePromise = checkForUpdate();
+
   startServer(port);
 
+  // Show update notice after server starts (CLI users)
+  updatePromise.then(update => {
+    if (update) {
+      console.log(`\n  📦 New version available! You're not on the latest.`);
+      console.log(`     Run: npx @mcpware/claude-code-organizer@latest`);
+      console.log(`     Or:  npm update -g @mcpware/claude-code-organizer\n`);
+    }
+  });
+
   try {
     const openCmd = process.platform === 'darwin' ? 'open' : 'xdg-open';
     execSync(`${openCmd} http://localhost:${port}`, { stdio: 'ignore' });

package-lock.json

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

package.json

@@ -104,6 +104,27 @@ async function handleRequest(req, res) {
 
   // ── API routes ──
 
+  // GET /api/version — check for updates (UI calls this)
+  if (path === "/api/version" && req.method === "GET") {
+    const require = createRequire(import.meta.url);
+    const { version: local } = require("../package.json");
+    try {
+      const data = await new Promise((resolve, reject) => {
+        const req = https.get("https://registry.npmjs.org/@mcpware/claude-code-organizer/latest", { timeout: 3000 }, (res) => {
+          let body = "";
+          res.on("data", (c) => (body += c));
+          res.on("end", () => resolve(body));
+        });
+        req.on("error", reject);
+        req.on("timeout", () => { req.destroy(); reject(new Error("timeout")); });
+      });
+      const { version: latest } = JSON.parse(data);
+      return json(res, { local, latest, updateAvailable: latest !== local });
+    } catch {
+      return json(res, { local, latest: null, updateAvailable: false });
+    }
+  }
+
   // GET /api/scan — full scan of all customizations
   if (path === "/api/scan" && req.method === "GET") {
     const data = await freshScan();

src/server.mjs

@@ -92,12 +92,34 @@ async function init() {
     initializeScopeState();
     setupUi();
     renderAll();
+    checkForUpdate();
   } catch (error) {
     document.getElementById("loading").textContent = "Failed to load inventory";
     toast(error?.message || "Failed to load inventory", true);
   }
 }
 
+async function checkForUpdate() {
+  try {
+    const { updateAvailable } = await fetchJson("/api/version");
+    if (!updateAvailable) return;
+    const footer = document.querySelector(".sidebar-footer");
+    if (!footer) return;
+    const banner = document.createElement("div");
+    banner.className = "update-banner";
+    banner.innerHTML = "🔄 New version available — <code>npx @mcpware/claude-code-organizer@latest</code>";
+    banner.addEventListener("click", () => {
+      navigator.clipboard.writeText("Run npx @mcpware/claude-code-organizer@latest to update Claude Code Organizer to the latest version.").then(() => {
+        banner.innerHTML = "✅ Copied! Paste into Claude Code";
+        setTimeout(() => {
+          banner.innerHTML = "🔄 New version available — <code>npx @mcpware/claude-code-organizer@latest</code>";
+        }, 2000);
+      });
+    });
+    footer.prepend(banner);
+  } catch { /* silent */ }
+}
+
 async function fetchJson(url) {
   const res = await fetch(url);
   return res.json();

src/ui/app.js

@@ -254,6 +254,20 @@ body {
   padding: 1px 5px;
   border-radius: 3px;
 }
+.update-banner {
+  font-size: 0.65rem;
+  color: #f0c040 !important;
+  background: oklch(0.25 0.06 80);
+  padding: 6px 8px !important;
+  border-radius: 6px;
+  margin-bottom: 4px;
+  display: block;
+  text-align: center;
+}
+.update-banner:hover { background: oklch(0.30 0.07 80) !important; cursor: pointer; }
+.update-banner::after { content: "Click to copy update command — paste into Claude Code"; display: block; font-size: 0.55rem; opacity: 0; transition: opacity 150ms; margin-top: 2px; color: #d4c080; }
+.update-banner:hover::after { opacity: 1; }
+.update-banner code { background: oklch(0.20 0.04 80); padding: 1px 5px; border-radius: 3px; font-size: 0.6rem; }
 .s-cat-ico { font-size: 0.78rem; }
 .s-cat-nm { font-weight: 400; flex: 1; }
 .s-cat-cnt { font-size: 0.65rem; }