fix: scope badges show styled tooltip on hover explaining what each status means (v0.13.9)

Global: "Available globally from ~/.claude/ — applies to all projects"
Ancestor: "From a parent directory — Claude Code loads CLAUDE.md by walking up"
Shadowed: "Overridden by a project-scoped item with the same name"
Conflict: "Same name in both scopes — Claude Code does not guarantee which applies"

Tooltips use the same CSS style as pill tooltips (themed, max-width, fade-in).

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

Author: ithiria894

package-lock.json

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

package.json

@@ -914,10 +914,10 @@ function renderItem(item) {
   const isFromAncestor = showEffective && effectiveAncestorKeys.has(key);
   const isShadowed     = isFromGlobal && effectiveShadowedKeys.has(key);
   const isConflict     = showEffective && effectiveConflictKeys.has(key);
-  const effectiveBadge = isShadowed     ? `<span class="scope-tag st-shadowed">Shadowed</span>`
-                       : isConflict     ? `<span class="scope-tag st-conflict">⚠ Conflict</span>`
-                       : isFromAncestor ? `<span class="scope-tag st-ancestor">Ancestor</span>`
-                       : isFromGlobal   ? `<span class="scope-tag st-global">Global</span>`
+  const effectiveBadge = isShadowed     ? `<span class="scope-tag st-shadowed" data-tooltip="This item is overridden by a project-scoped item with the same name">Shadowed</span>`
+                       : isConflict     ? `<span class="scope-tag st-conflict" data-tooltip="Same name exists in both user and project scope — Claude Code does not guarantee which one applies">⚠ Conflict</span>`
+                       : isFromAncestor ? `<span class="scope-tag st-ancestor" data-tooltip="From a parent directory — Claude Code loads CLAUDE.md files by walking up from the working directory">Ancestor</span>`
+                       : isFromGlobal   ? `<span class="scope-tag st-global" data-tooltip="Available globally from ~/.claude/ — applies to all projects on this machine">Global</span>`
                        : "";
   const actions = (item.locked || isFromGlobal) ? "" : `
     <span class="item-actions">

src/ui/app.js

@@ -984,6 +984,34 @@ 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.6; text-decoration: line-through; }
 .st-conflict { color: oklch(0.65 0.15 55); border-color: oklch(0.65 0.15 55); }
+.scope-tag[data-tooltip] { position: relative; cursor: help; }
+.scope-tag[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  background: var(--surface-elevated, #1a1a2e);
+  color: var(--text-secondary, #ccc);
+  border: 1px solid var(--border-light, #333);
+  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);
+}
+.scope-tag[data-tooltip]:hover::after { opacity: 1; }
 .s-tree-toggle { cursor: pointer; font-size: 0.7rem; opacity: 0.5; margin-left: auto; padding: 0 4px; }
 .s-tree-toggle:hover { opacity: 1; }
 .s-tree-toggle.active { opacity: 1; }