@cocaxcode/ai-context-inspector 0.2.0 → 0.3.1

package/dist/{chunk-UFTX3Z5M.js → chunk-UKKIDJCN.js}

@@ -1242,39 +1242,74 @@ async function runAllScanners(config) {
 
 // src/report/styles.ts
 var CSS_STYLES = `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+   AI Context Inspector \u2014 Dashboard Styles
+   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
 :root {
   --bg: #0a0a0f;
+  --bg-alt: #0e0e16;
   --bg-card: #12121a;
   --bg-card-hover: #1a1a25;
   --border: #2a2a3a;
+  --border-hover: #3a3a4a;
   --text: #e0e0e8;
   --text-dim: #8888a0;
   --text-bright: #ffffff;
   --accent: #00d4ff;
   --accent-dim: #0099bb;
+  --accent-glow: #00d4ff30;
   --green: #00e676;
   --red: #ff5252;
   --orange: #ffab40;
   --purple: #b388ff;
+  --pink: #ff80ab;
+  --blue: #4285f4;
   --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
   --font-sans: system-ui, -apple-system, sans-serif;
-  --radius: 8px;
+  --radius: 10px;
+  --radius-sm: 6px;
+  --shadow: 0 2px 12px rgba(0,0,0,0.3);
+  --shadow-hover: 0 4px 20px rgba(0,212,255,0.1);
+  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
+  :root:not([data-theme="dark"]) {
     --bg: #f5f5f8;
+    --bg-alt: #eeeef3;
     --bg-card: #ffffff;
     --bg-card-hover: #f0f0f5;
     --border: #d0d0dd;
+    --border-hover: #b0b0c0;
     --text: #2a2a3a;
     --text-dim: #666680;
     --text-bright: #000000;
     --accent: #0088cc;
     --accent-dim: #006699;
+    --accent-glow: #0088cc20;
+    --shadow: 0 2px 12px rgba(0,0,0,0.08);
+    --shadow-hover: 0 4px 20px rgba(0,136,204,0.1);
   }
 }
 
+[data-theme="light"] {
+  --bg: #f5f5f8;
+  --bg-alt: #eeeef3;
+  --bg-card: #ffffff;
+  --bg-card-hover: #f0f0f5;
+  --border: #d0d0dd;
+  --border-hover: #b0b0c0;
+  --text: #2a2a3a;
+  --text-dim: #666680;
+  --text-bright: #000000;
+  --accent: #0088cc;
+  --accent-dim: #006699;
+  --accent-glow: #0088cc20;
+  --shadow: 0 2px 12px rgba(0,0,0,0.08);
+  --shadow-hover: 0 4px 20px rgba(0,136,204,0.1);
+}
+
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
@@ -1285,6 +1320,72 @@ body {
   min-height: 100vh;
 }
 
+/* \u2500\u2500 Nav Bar \u2500\u2500 */
+.nav-bar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: color-mix(in srgb, var(--bg) 85%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  padding: 0.5rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.nav-link {
+  padding: 0.3rem 0.7rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  color: var(--text-dim);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all var(--transition);
+  border: 1px solid transparent;
+}
+
+.nav-link:hover {
+  color: var(--accent);
+  background: var(--accent-glow);
+  border-color: var(--accent);
+}
+
+.nav-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.nav-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 0.3rem 0.6rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: all var(--transition);
+  font-family: var(--font-mono);
+}
+
+.nav-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-glow);
+}
+
+/* \u2500\u2500 Container \u2500\u2500 */
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -1294,21 +1395,22 @@ body {
 /* \u2500\u2500 Header \u2500\u2500 */
 .header {
   text-align: center;
-  padding: 2rem 0 1.5rem;
-  border-bottom: 1px solid var(--border);
-  margin-bottom: 1.5rem;
+  padding: 2.5rem 0 2rem;
+  margin-bottom: 2rem;
 }
 
 .header h1 {
   font-family: var(--font-mono);
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   color: var(--accent);
   margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
 }
 
 .header .subtitle {
   color: var(--text-dim);
   font-size: 0.85rem;
+  font-family: var(--font-mono);
 }
 
 .badges {
@@ -1336,21 +1438,174 @@ body {
 .badge--green { border-color: var(--green); color: var(--green); }
 .badge--purple { border-color: var(--purple); color: var(--purple); }
 .badge--orange { border-color: var(--orange); color: var(--orange); }
-.badge--blue { border-color: #4285f4; color: #4285f4; }
+.badge--blue { border-color: var(--blue); color: var(--blue); }
+.badge--pink { border-color: var(--pink); color: var(--pink); }
+
+/* \u2500\u2500 Stats Grid \u2500\u2500 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.2rem 1rem;
+  text-align: center;
+  transition: all var(--transition);
+  cursor: default;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--stat-color, var(--accent));
+  opacity: 0.8;
+}
+
+.stat-card:hover {
+  border-color: var(--stat-color, var(--accent));
+  box-shadow: var(--shadow-hover);
+  transform: translateY(-2px);
+}
+
+.stat-icon {
+  font-size: 1.5rem;
+  margin-bottom: 0.3rem;
+  display: block;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--stat-color, var(--accent));
+  line-height: 1.1;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-family: var(--font-mono);
+  margin-top: 0.3rem;
+}
+
+/* \u2500\u2500 Ecosystem Map \u2500\u2500 */
+.ecosystem-map {
+  margin: 2rem 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-alt);
+  overflow: hidden;
+  position: relative;
+}
+
+.ecosystem-svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.eco-connection {
+  stroke: var(--border);
+  stroke-width: 1.5;
+  fill: none;
+  stroke-dasharray: 6 4;
+  animation: dashFlow 20s linear infinite;
+}
+
+.eco-connection--active {
+  stroke: var(--accent);
+  stroke-width: 2;
+  opacity: 0.6;
+}
+
+@keyframes dashFlow {
+  to { stroke-dashoffset: -100; }
+}
+
+.eco-node {
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.eco-node:hover {
+  transform: scale(1.1);
+}
+
+.eco-node-circle {
+  transition: all 0.2s ease;
+}
+
+.eco-node:hover .eco-node-circle {
+  filter: brightness(1.3);
+}
+
+.eco-center-circle {
+  filter: drop-shadow(0 0 12px var(--accent-glow));
+}
+
+.eco-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  fill: var(--text);
+  text-anchor: middle;
+  pointer-events: none;
+}
+
+.eco-label--center {
+  font-size: 14px;
+  font-weight: 700;
+  fill: var(--text-bright);
+}
+
+.eco-label--count {
+  font-size: 10px;
+  fill: var(--text-dim);
+}
+
+.eco-item-circle {
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.eco-item-circle:hover {
+  opacity: 1;
+}
+
+.eco-dimmed {
+  opacity: 0.2;
+}
 
 /* \u2500\u2500 Search \u2500\u2500 */
 .search-bar {
   position: sticky;
-  top: 0;
+  top: 45px;
   z-index: 10;
-  background: var(--bg);
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   padding: 0.75rem 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
 .search-bar input {
-  width: 100%;
-  padding: 0.6rem 1rem;
+  flex: 1;
+  padding: 0.65rem 1rem 0.65rem 2.5rem;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--bg-card);
@@ -1358,11 +1613,47 @@ body {
   font-family: var(--font-mono);
   font-size: 0.85rem;
   outline: none;
-  transition: border-color 0.2s;
+  transition: all var(--transition);
 }
 
 .search-bar input:focus {
   border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.85rem;
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  pointer-events: none;
+}
+
+.search-bar-inner {
+  position: relative;
+  flex: 1;
+}
+
+.search-results-count {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+
+.search-kbd {
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  padding: 0.1rem 0.4rem;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  position: absolute;
+  right: 0.7rem;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  opacity: 0.6;
 }
 
 /* \u2500\u2500 Sections \u2500\u2500 */
@@ -1371,29 +1662,48 @@ body {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
+  box-shadow: var(--shadow);
+  animation: fadeInUp 0.4s ease both;
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
+  padding: 0.85rem 1.2rem;
   background: var(--bg-card);
   cursor: pointer;
   user-select: none;
-  transition: background 0.2s;
+  transition: background var(--transition);
+  gap: 1rem;
 }
 
 .section-header:hover {
   background: var(--bg-card-hover);
 }
 
+.section-header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.section-icon {
+  font-size: 1.1rem;
+}
+
 .section-header h2 {
   font-size: 1rem;
   font-family: var(--font-mono);
   color: var(--text-bright);
 }
 
+.section-header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 .section-header .count {
   font-size: 0.8rem;
   color: var(--text-dim);
@@ -1401,35 +1711,47 @@ body {
 }
 
 .section-header .arrow {
-  transition: transform 0.2s;
+  transition: transform var(--transition);
   color: var(--text-dim);
+  font-size: 0.7rem;
+}
+
+.section-content {
+  max-height: 8000px;
+  overflow: hidden;
+  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
+  opacity: 1;
+  padding: 1rem 1.2rem;
+  border-top: 1px solid var(--border);
 }
 
 .section.collapsed .section-content {
-  display: none;
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top-color: transparent;
 }
 
 .section.collapsed .arrow {
   transform: rotate(-90deg);
 }
 
-.section-content {
-  padding: 1rem;
-  border-top: 1px solid var(--border);
-}
-
 /* \u2500\u2500 Cards \u2500\u2500 */
 .card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
-  padding: 1rem;
+  padding: 1rem 1.2rem;
   margin-bottom: 0.75rem;
-  transition: border-color 0.2s;
+  transition: all var(--transition);
+  animation: fadeInUp 0.3s ease both;
+  position: relative;
 }
 
 .card:hover {
-  border-color: var(--accent-dim);
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-hover);
 }
 
 .card:last-child {
@@ -1444,6 +1766,7 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .card-meta {
@@ -1452,6 +1775,53 @@ body {
   margin-bottom: 0.5rem;
 }
 
+/* \u2500\u2500 Copy Button \u2500\u2500 */
+.copy-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all var(--transition);
+  font-family: var(--font-mono);
+  opacity: 0;
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+}
+
+.card:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.copy-btn--copied {
+  color: var(--green) !important;
+  border-color: var(--green) !important;
+}
+
+/* \u2500\u2500 Size Bar \u2500\u2500 */
+.size-bar {
+  height: 3px;
+  background: var(--border);
+  border-radius: 2px;
+  margin-top: 0.3rem;
+  overflow: hidden;
+}
+
+.size-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
+  transition: width 0.6s ease;
+}
+
 /* \u2500\u2500 Tool badges \u2500\u2500 */
 .tool-badge {
   display: inline-block;
@@ -1497,6 +1867,7 @@ body {
 .status--error { background: #ff525220; color: var(--red); }
 .status--active { background: #00e67620; color: var(--green); }
 .status--configured { background: #00d4ff20; color: var(--accent); }
+.status--detected { background: #b388ff20; color: var(--purple); }
 
 /* \u2500\u2500 Tool list \u2500\u2500 */
 .tool-list {
@@ -1505,11 +1876,12 @@ body {
 }
 
 .tool-list li {
-  padding: 0.3rem 0;
+  padding: 0.35rem 0;
   font-size: 0.8rem;
   border-bottom: 1px solid var(--border);
   display: flex;
   gap: 0.5rem;
+  align-items: baseline;
 }
 
 .tool-list li:last-child {
@@ -1520,33 +1892,37 @@ body {
   font-family: var(--font-mono);
   color: var(--accent);
   white-space: nowrap;
+  font-size: 0.8rem;
 }
 
 .tool-desc {
   color: var(--text-dim);
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 0.78rem;
 }
 
 /* \u2500\u2500 Preview \u2500\u2500 */
 .preview {
   background: var(--bg);
   border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 0.5rem;
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
   margin-top: 0.5rem;
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: 0.73rem;
   color: var(--text-dim);
   white-space: pre-wrap;
   word-break: break-all;
-  max-height: 150px;
+  max-height: 200px;
   overflow-y: auto;
   display: none;
+  line-height: 1.5;
 }
 
 .preview.open {
   display: block;
+  animation: fadeIn 0.2s ease;
 }
 
 .preview-toggle {
@@ -1557,15 +1933,17 @@ body {
   cursor: pointer;
   font-family: var(--font-mono);
   padding: 0;
+  transition: color var(--transition);
 }
 
 .preview-toggle:hover {
+  color: var(--accent-dim);
   text-decoration: underline;
 }
 
 /* \u2500\u2500 Groups \u2500\u2500 */
 .tool-group {
-  margin-bottom: 1rem;
+  margin-bottom: 1.2rem;
 }
 
 .tool-group:last-child {
@@ -1576,22 +1954,30 @@ body {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.3rem;
+  margin-bottom: 0.6rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--border);
 }
 
 /* \u2500\u2500 Empty state \u2500\u2500 */
 .empty-state {
   text-align: center;
-  padding: 3rem;
+  padding: 4rem 2rem;
   color: var(--text-dim);
 }
 
+.empty-state-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  display: block;
+  opacity: 0.5;
+}
+
 .empty-state h3 {
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   margin-bottom: 0.5rem;
   color: var(--text);
+  font-family: var(--font-mono);
 }
 
 /* \u2500\u2500 Scope badge \u2500\u2500 */
@@ -1601,41 +1987,176 @@ body {
   border-radius: 3px;
   font-weight: 600;
   text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .scope-badge--project { background: var(--accent); color: var(--bg); }
 .scope-badge--user { background: var(--purple); color: var(--bg); }
+.scope-badge--vscode { background: #007acc; color: #fff; }
+.scope-badge--desktop { background: var(--orange); color: var(--bg); }
+
+/* \u2500\u2500 Warnings \u2500\u2500 */
+.warning-card {
+  background: var(--bg-card);
+  border: 1px solid var(--orange);
+  border-left: 4px solid var(--orange);
+  border-radius: var(--radius);
+  padding: 0.8rem 1rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.warning-card:last-child { margin-bottom: 0; }
+
+.warning-scanner {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--orange);
+  margin-bottom: 0.2rem;
+}
 
 /* \u2500\u2500 Footer \u2500\u2500 */
 .footer {
   text-align: center;
-  padding: 1.5rem 0;
-  margin-top: 1rem;
+  padding: 2rem 0;
+  margin-top: 2rem;
   border-top: 1px solid var(--border);
   font-size: 0.75rem;
   color: var(--text-dim);
   font-family: var(--font-mono);
 }
 
+.footer a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}
+
+/* \u2500\u2500 Animations \u2500\u2500 */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
 /* \u2500\u2500 Responsive \u2500\u2500 */
+@media (max-width: 1024px) {
+  .stats-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 @media (max-width: 768px) {
   .container { padding: 1rem; }
+  .nav-bar { padding: 0.5rem 1rem; flex-wrap: wrap; }
+  .nav-links { display: none; }
   .badges { gap: 0.5rem; }
   .badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
+  .stat-number { font-size: 1.5rem; }
+  .header h1 { font-size: 1.3rem; }
+  .ecosystem-map { display: none; }
+  .section-content { padding: 0.75rem; }
+}
+
+@media (max-width: 480px) {
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .nav-actions { gap: 0.3rem; }
+}
+
+/* \u2500\u2500 Print \u2500\u2500 */
+@media print {
+  .nav-bar, .search-bar, .ecosystem-map, .nav-btn, .copy-btn, .preview-toggle { display: none !important; }
+  body { background: #fff; color: #000; }
+  .container { max-width: 100%; padding: 1rem; }
+  .card, .section { break-inside: avoid; box-shadow: none; border-color: #ccc; }
+  .section-content { max-height: none !important; opacity: 1 !important; }
+  .header h1 { color: #000; }
+  .stat-card { border-color: #ccc; }
+  .stat-number { color: #333; }
 }
 `;
 
 // src/report/scripts.ts
 var JS_SCRIPTS = `
 document.addEventListener('DOMContentLoaded', () => {
-  // Section collapse/expand
+
+  // \u2500\u2500 Scroll helper with offset for sticky nav + search \u2500\u2500
+  const SCROLL_OFFSET = 110
+
+  function scrollToSection(targetId) {
+    const target = document.getElementById(targetId)
+    if (!target) return
+    if (target.classList.contains('collapsed')) {
+      target.classList.remove('collapsed')
+      const content = target.querySelector('.section-content')
+      if (content) {
+        content.style.maxHeight = content.scrollHeight + 'px'
+        setTimeout(() => { content.style.maxHeight = '' }, 400)
+      }
+    }
+    const y = target.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET
+    window.scrollTo({ top: y, behavior: 'smooth' })
+    target.style.boxShadow = '0 0 0 2px var(--accent)'
+    setTimeout(() => { target.style.boxShadow = '' }, 1500)
+  }
+
+  // \u2500\u2500 Animated Counters \u2500\u2500
+  document.querySelectorAll('.stat-number').forEach(el => {
+    const target = parseInt(el.getAttribute('data-target') || '0')
+    if (target === 0) { el.textContent = '0'; return }
+    let current = 0
+    const step = Math.max(1, Math.ceil(target / 25))
+    const interval = setInterval(() => {
+      current = Math.min(current + step, target)
+      el.textContent = current
+      if (current >= target) clearInterval(interval)
+    }, 35)
+  })
+
+  // \u2500\u2500 Section Collapse/Expand \u2500\u2500
   document.querySelectorAll('.section-header').forEach(header => {
     header.addEventListener('click', () => {
-      header.closest('.section').classList.toggle('collapsed')
+      const section = header.closest('.section')
+      if (!section) return
+      const content = section.querySelector('.section-content')
+      if (!content) return
+
+      if (section.classList.contains('collapsed')) {
+        // Expand
+        section.classList.remove('collapsed')
+        content.style.maxHeight = content.scrollHeight + 'px'
+        setTimeout(() => { content.style.maxHeight = '' }, 400)
+      } else {
+        // Collapse
+        content.style.maxHeight = content.scrollHeight + 'px'
+        requestAnimationFrame(() => {
+          content.style.maxHeight = '0px'
+          section.classList.add('collapsed')
+        })
+      }
     })
   })
 
-  // Preview toggle
+  // \u2500\u2500 Preview Toggle \u2500\u2500
   document.querySelectorAll('.preview-toggle').forEach(btn => {
     btn.addEventListener('click', (e) => {
       e.stopPropagation()
@@ -1647,55 +2168,522 @@ document.addEventListener('DOMContentLoaded', () => {
     })
   })
 
-  // Global search
+  // \u2500\u2500 Global Search \u2500\u2500
   const searchInput = document.getElementById('search-input')
+  const resultsCount = document.querySelector('.search-results-count')
+  const searchKbd = document.querySelector('.search-kbd')
+
   if (searchInput) {
     searchInput.addEventListener('input', (e) => {
       const query = e.target.value.toLowerCase().trim()
+      let visible = 0
+      let total = 0
+
       document.querySelectorAll('[data-searchable]').forEach(el => {
         const text = el.getAttribute('data-searchable').toLowerCase()
-        el.style.display = (!query || text.includes(query)) ? '' : 'none'
+        const match = !query || text.includes(query)
+        el.style.display = match ? '' : 'none'
+        total++
+        if (match) visible++
       })
+
+      if (resultsCount) {
+        resultsCount.textContent = query ? visible + ' / ' + total : ''
+      }
+      if (searchKbd) {
+        searchKbd.style.display = query ? 'none' : ''
+      }
+    })
+
+    searchInput.addEventListener('focus', () => {
+      if (searchKbd) searchKbd.style.display = 'none'
+    })
+
+    searchInput.addEventListener('blur', () => {
+      if (searchKbd && !searchInput.value) searchKbd.style.display = ''
     })
   }
+
+  // \u2500\u2500 Keyboard Shortcuts \u2500\u2500
+  document.addEventListener('keydown', (e) => {
+    // Ignore when typing in input
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+      if (e.key === 'Escape') {
+        e.target.value = ''
+        e.target.dispatchEvent(new Event('input'))
+        e.target.blur()
+      }
+      return
+    }
+
+    if (e.key === '/') {
+      e.preventDefault()
+      if (searchInput) searchInput.focus()
+    }
+  })
+
+  // \u2500\u2500 Nav Links (scroll to section) \u2500\u2500
+  document.querySelectorAll('.nav-link[data-target]').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault()
+      scrollToSection(link.getAttribute('data-target'))
+    })
+  })
+
+  // \u2500\u2500 Ecosystem Map (click to scroll) \u2500\u2500
+  document.querySelectorAll('.eco-cat-node[data-section]').forEach(node => {
+    node.addEventListener('click', () => {
+      scrollToSection(node.getAttribute('data-section'))
+    })
+    node.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        scrollToSection(node.getAttribute('data-section'))
+      }
+    })
+  })
+
+  // \u2500\u2500 Ecosystem Map Tooltips \u2500\u2500
+  const ecoTooltip = document.getElementById('eco-tooltip')
+  const ecoTooltipText = document.getElementById('eco-tooltip-text')
+
+  document.querySelectorAll('.eco-item[data-tooltip]').forEach(item => {
+    item.addEventListener('mouseenter', () => {
+      if (!ecoTooltip || !ecoTooltipText) return
+      const text = item.getAttribute('data-tooltip')
+      ecoTooltipText.textContent = text
+      const textLen = Math.min(text.length * 6.5 + 20, 220)
+      const rect = ecoTooltip.querySelector('rect')
+      if (rect) {
+        rect.setAttribute('width', textLen)
+        ecoTooltipText.setAttribute('x', textLen / 2)
+      }
+      const circle = item.querySelector('circle')
+      if (circle) {
+        const cx = parseFloat(circle.getAttribute('cx'))
+        const cy = parseFloat(circle.getAttribute('cy'))
+        ecoTooltip.setAttribute('transform', 'translate(' + (cx - textLen / 2) + ',' + (cy - 38) + ')')
+      }
+      ecoTooltip.style.display = ''
+    })
+    item.addEventListener('mouseleave', () => {
+      if (ecoTooltip) ecoTooltip.style.display = 'none'
+    })
+  })
+
+  // \u2500\u2500 Theme Toggle \u2500\u2500
+  const themeToggle = document.getElementById('theme-toggle')
+  if (themeToggle) {
+    themeToggle.addEventListener('click', () => {
+      const html = document.documentElement
+      const current = html.getAttribute('data-theme')
+      const next = current === 'light' ? 'dark' : 'light'
+      html.setAttribute('data-theme', next)
+      themeToggle.innerHTML = next === 'light' ? '☀' : '☾'
+    })
+  }
+
+  // \u2500\u2500 Export JSON \u2500\u2500
+  const exportBtn = document.getElementById('export-btn')
+  if (exportBtn) {
+    exportBtn.addEventListener('click', () => {
+      const dataEl = document.getElementById('scan-data')
+      if (!dataEl) return
+      const text = dataEl.textContent || ''
+      const fallback = () => {
+        const ta = document.createElement('textarea')
+        ta.value = text
+        ta.style.position = 'fixed'
+        ta.style.opacity = '0'
+        document.body.appendChild(ta)
+        ta.select()
+        document.execCommand('copy')
+        document.body.removeChild(ta)
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).catch(fallback)
+      } else {
+        fallback()
+      }
+      const orig = exportBtn.innerHTML
+      exportBtn.textContent = '\\u2713'
+      setTimeout(() => { exportBtn.innerHTML = orig }, 1500)
+    })
+  }
+
+  // \u2500\u2500 Copy Buttons \u2500\u2500
+  document.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation()
+      const text = btn.getAttribute('data-copy') || ''
+      const fallback = () => {
+        const ta = document.createElement('textarea')
+        ta.value = text
+        ta.style.position = 'fixed'
+        ta.style.opacity = '0'
+        document.body.appendChild(ta)
+        ta.select()
+        document.execCommand('copy')
+        document.body.removeChild(ta)
+      }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).catch(fallback)
+      } else {
+        fallback()
+      }
+      btn.classList.add('copy-btn--copied')
+      btn.textContent = '\\u2713'
+      setTimeout(() => {
+        btn.classList.remove('copy-btn--copied')
+        btn.textContent = 'copiar'
+      }, 1500)
+    })
+  })
+
 })
 `;
 
-// src/report/sections.ts
+// src/report/ecosystem-map.ts
 function esc(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function buildCategories(result, summary) {
+  return [
+    {
+      id: "section-mcp",
+      label: "MCP",
+      icon: "\u2699",
+      count: summary.totalMcpServers,
+      color: "#00d4ff",
+      items: result.mcpServers.slice(0, 6).map((s) => ({
+        name: s.name,
+        detail: `${s.introspection?.tools.length ?? 0} tools`
+      }))
+    },
+    {
+      id: "section-context",
+      label: "Contexto",
+      icon: "\u{1F4C4}",
+      count: summary.totalFiles,
+      color: "#b388ff",
+      items: result.contextFiles.slice(0, 6).map((f) => ({
+        name: f.path,
+        detail: f.tool
+      }))
+    },
+    {
+      id: "section-skills",
+      label: "Skills",
+      icon: "\u26A1",
+      count: summary.totalSkills,
+      color: "#ffab40",
+      items: result.skills.slice(0, 6).map((s) => ({
+        name: s.name
+      }))
+    },
+    {
+      id: "section-agents",
+      label: "Agents",
+      icon: "\u{1F916}",
+      count: summary.totalAgents,
+      color: "#00e676",
+      items: result.agents.slice(0, 6).map((a) => ({
+        name: a.name,
+        detail: a.model
+      }))
+    },
+    {
+      id: "section-memories",
+      label: "Memorias",
+      icon: "\u{1F9E0}",
+      count: summary.totalMemories,
+      color: "#ff80ab",
+      items: result.memories.slice(0, 6).map((m) => ({
+        name: m.type,
+        detail: m.status
+      }))
+    }
+  ];
+}
+var COCAXCODE_ICON = `<g transform="translate(-16,-16)">
+  <defs>
+    <linearGradient id="cxc-g1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22d3ee"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+    <linearGradient id="cxc-g2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0891b2"/>
+      <stop offset="100%" stop-color="#0e7490"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" fill="#0a0a0c" rx="4"/>
+  <rect x="9" y="7.5" width="16" height="18.5" rx="4" fill="url(#cxc-g2)" opacity="0.5"/>
+  <rect x="8" y="6.5" width="16" height="18.5" rx="4" fill="url(#cxc-g1)"/>
+  <path d="M11.5,11 L18,16 L11.5,21" fill="none" stroke="#0a0a0c" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="19" y1="20" x2="21.5" y2="20" stroke="#0a0a0c" stroke-width="1.8" stroke-linecap="round">
+    <animate attributeName="x1" values="19;21.5;19" dur="1.4s" repeatCount="indefinite"/>
+    <animate attributeName="x2" values="21.5;24;21.5" dur="1.4s" repeatCount="indefinite"/>
+  </line>
+</g>`;
+function renderEcosystemMap(result, summary) {
+  const categories = buildCategories(result, summary);
+  const totalItems = summary.totalMcpServers + summary.totalFiles + summary.totalSkills + summary.totalAgents + summary.totalMemories;
+  if (totalItems === 0) return "";
+  const W = 900;
+  const H = 480;
+  const cx = W / 2;
+  const cy = H / 2;
+  const catRadius = 165;
+  const itemRadius = 55;
+  const startAngle = -Math.PI / 2;
+  let defs = "";
+  let connections = "";
+  let itemNodes = "";
+  let catNodes = "";
+  defs += `<defs>
+    <filter id="eco-glow" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
+    </filter>
+    <filter id="eco-glow-center" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="10" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <radialGradient id="eco-bg-grad" cx="50%" cy="50%" r="55%">
+      <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.03"/>
+      <stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/>
+    </radialGradient>
+  </defs>`;
+  let bg = `<rect width="${W}" height="${H}" fill="none"/>
+    <circle cx="${cx}" cy="${cy}" r="280" fill="url(#eco-bg-grad)"/>`;
+  bg += `<circle cx="${cx}" cy="${cy}" r="${catRadius}" fill="none"
+    stroke="var(--border)" stroke-width="0.5" stroke-dasharray="4 8" opacity="0.4"/>`;
+  categories.forEach((cat, i) => {
+    const angle = startAngle + i / categories.length * Math.PI * 2;
+    const x = cx + Math.cos(angle) * catRadius;
+    const y = cy + Math.sin(angle) * catRadius;
+    const dimmed = cat.count === 0;
+    const opacity = dimmed ? 0.2 : 1;
+    const midX = (cx + x) / 2;
+    const midY = (cy + y) / 2;
+    const perpX = -(y - cy) * 0.08;
+    const perpY = (x - cx) * 0.08;
+    connections += `<path d="M${cx},${cy} Q${midX + perpX},${midY + perpY} ${x},${y}"
+      fill="none" stroke="${cat.color}" stroke-width="${dimmed ? 0.8 : 1.5}"
+      opacity="${dimmed ? 0.15 : 0.35}"
+      stroke-dasharray="${dimmed ? "3 6" : "6 4"}"
+      ${!dimmed ? `style="animation: eco-dash 15s linear infinite; animation-delay: ${i * 0.5}s"` : ""}/>`;
+    if (!dimmed && cat.items.length > 0) {
+      const maxItems = Math.min(cat.items.length, 6);
+      const arcSpread = Math.min(Math.PI * 0.6, maxItems * 0.25);
+      cat.items.slice(0, maxItems).forEach((item, j) => {
+        const itemAngle = angle - arcSpread / 2 + (maxItems > 1 ? j / (maxItems - 1) * arcSpread : 0);
+        const ix = x + Math.cos(itemAngle) * itemRadius;
+        const iy = y + Math.sin(itemAngle) * itemRadius;
+        connections += `<line x1="${x}" y1="${y}" x2="${ix}" y2="${iy}"
+          stroke="${cat.color}" stroke-width="0.7" opacity="0.2"/>`;
+        const shortName = item.name.length > 15 ? item.name.slice(0, 13) + ".." : item.name;
+        itemNodes += `<g class="eco-item" data-tooltip="${esc(item.name)}${item.detail ? " (" + esc(item.detail) + ")" : ""}">
+          <circle cx="${ix}" cy="${iy}" r="4.5" fill="${cat.color}" opacity="0.5"
+            class="eco-item-dot"/>
+          <circle cx="${ix}" cy="${iy}" r="4.5" fill="transparent" stroke="${cat.color}"
+            stroke-width="1" opacity="0.3"/>
+          <title>${esc(item.name)}${item.detail ? " \u2014 " + esc(item.detail) : ""}</title>
+        </g>`;
+      });
+      if (cat.count > maxItems) {
+        const extra = cat.count - maxItems;
+        const moreAngle = angle + arcSpread / 2 + 0.35;
+        const mx = x + Math.cos(moreAngle) * (itemRadius * 0.85);
+        const my = y + Math.sin(moreAngle) * (itemRadius * 0.85);
+        itemNodes += `<text x="${mx}" y="${my}"
+          font-family="var(--font-mono)" font-size="9" fill="${cat.color}"
+          opacity="0.5" text-anchor="middle" dominant-baseline="middle">+${extra}</text>`;
+      }
+    }
+    const nodeR = dimmed ? 24 : 32;
+    const labelY = y - nodeR - 10;
+    catNodes += `<g class="eco-cat-node" data-section="${cat.id}"
+      style="cursor:pointer;opacity:${opacity}" role="button" tabindex="0">
+      <!-- Hit area -->
+      <circle cx="${x}" cy="${y}" r="${nodeR + 8}" fill="transparent"/>
+      <!-- Outer glow ring -->
+      ${!dimmed ? `<circle cx="${x}" cy="${y}" r="${nodeR + 3}" fill="none"
+        stroke="${cat.color}" stroke-width="1" opacity="0.15"
+        style="animation: eco-pulse 3s ease-in-out infinite; animation-delay: ${i * 0.4}s"/>` : ""}
+      <!-- Main circle -->
+      <circle cx="${x}" cy="${y}" r="${nodeR}" fill="${cat.color}"
+        opacity="${dimmed ? 0.08 : 0.12}" stroke="${cat.color}"
+        stroke-width="${dimmed ? 1 : 2}" class="eco-cat-circle"
+        ${!dimmed ? 'filter="url(#eco-glow)"' : ""}/>
+      <!-- Count inside -->
+      <text x="${x}" y="${y + 1}" text-anchor="middle" dominant-baseline="middle"
+        font-family="var(--font-mono)" font-size="${dimmed ? 14 : 18}"
+        font-weight="700" fill="${cat.color}" opacity="${dimmed ? 0.3 : 0.9}">${cat.count}</text>
+      <!-- Label + icon ABOVE circle -->
+      <text x="${x}" y="${labelY}" text-anchor="middle" dominant-baseline="auto"
+        font-family="var(--font-mono)" font-size="11" font-weight="600"
+        fill="${cat.color}" opacity="${dimmed ? 0.3 : 0.85}">${cat.icon} ${cat.label}</text>
+    </g>`;
+  });
+  const projectName = result.project.name.length > 20 ? result.project.name.slice(0, 18) + ".." : result.project.name;
+  const centerNode = `<g class="eco-center">
+    <!-- Outer pulse ring -->
+    <circle cx="${cx}" cy="${cy}" r="48" fill="none" stroke="var(--accent)"
+      stroke-width="1" opacity="0.2"
+      style="animation: eco-pulse 4s ease-in-out infinite"/>
+    <!-- Main circle -->
+    <circle cx="${cx}" cy="${cy}" r="42" fill="var(--bg-alt)" stroke="var(--accent)"
+      stroke-width="2.5" filter="url(#eco-glow-center)"/>
+    <!-- cocaxcode icon in center -->
+    <g transform="translate(${cx},${cy - 8}) scale(0.85)">
+      ${COCAXCODE_ICON}
+    </g>
+    <!-- Project name below icon -->
+    <text x="${cx}" y="${cy + 20}" text-anchor="middle" dominant-baseline="auto"
+      font-family="var(--font-mono)" font-size="10" font-weight="600"
+      fill="var(--text-bright)" opacity="0.9">${esc(projectName)}</text>
+    <!-- Total count -->
+    <text x="${cx}" y="${cy + 32}" text-anchor="middle" dominant-baseline="auto"
+      font-family="var(--font-mono)" font-size="8.5"
+      fill="var(--text-dim)">${totalItems} elementos</text>
+  </g>`;
+  const tooltip = `<g id="eco-tooltip" style="display:none;pointer-events:none">
+    <rect x="0" y="0" width="160" height="28" rx="4"
+      fill="var(--bg-card)" stroke="var(--border)" stroke-width="1" opacity="0.95"/>
+    <text x="80" y="18" text-anchor="middle" font-family="var(--font-mono)"
+      font-size="10" fill="var(--text)" id="eco-tooltip-text"></text>
+  </g>`;
+  const watermark = `<text x="${W - 12}" y="${H - 10}" text-anchor="end"
+    font-family="var(--font-mono)" font-size="9" fill="var(--text-dim)" opacity="0.3"
+    letter-spacing="0.05em">cocaxcode</text>`;
+  const svgContent = `${defs}${bg}${connections}${itemNodes}${catNodes}${centerNode}${tooltip}${watermark}`;
+  return `
+    <div class="ecosystem-map">
+      <svg class="ecosystem-svg" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg"
+        role="img" aria-label="Mapa del ecosistema AI del proyecto">
+        <style>
+          @keyframes eco-dash { to { stroke-dashoffset: -80; } }
+          @keyframes eco-pulse { 0%,100% { opacity: 0.15; transform-origin: center; } 50% { opacity: 0.4; } }
+          .eco-cat-node:hover .eco-cat-circle { stroke-width: 3; opacity: 0.25; }
+          .eco-cat-node:hover { filter: brightness(1.2); }
+          .eco-cat-node:focus { outline: none; }
+          .eco-cat-node:focus .eco-cat-circle { stroke-width: 3; stroke-dasharray: 4 2; }
+          .eco-item-dot { transition: r 0.2s, opacity 0.2s; }
+          .eco-item:hover .eco-item-dot { r: 7; opacity: 0.8; }
+        </style>
+        ${svgContent}
+      </svg>
+    </div>`;
+}
+
+// src/report/sections.ts
+function esc2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function renderNavBar(summary) {
+  const links = [
+    { id: "section-mcp", label: "MCP", count: summary.totalMcpServers },
+    { id: "section-context", label: "Contexto", count: summary.totalFiles },
+    { id: "section-skills", label: "Skills", count: summary.totalSkills },
+    { id: "section-agents", label: "Agents", count: summary.totalAgents },
+    { id: "section-memories", label: "Memorias", count: summary.totalMemories }
+  ];
+  const navLinks = links.filter((l) => l.count > 0).map(
+    (l) => `<a class="nav-link" data-target="${l.id}">${l.label} (${l.count})</a>`
+  ).join("");
+  return `
+    <nav class="nav-bar">
+      <div class="nav-links">
+        <span style="font-family:var(--font-mono);font-size:0.8rem;color:var(--accent);margin-right:0.5rem">&gt;_</span>
+        ${navLinks}
+      </div>
+      <div class="nav-actions">
+        <button class="nav-btn" id="theme-toggle" title="Cambiar tema">&#9790;</button>
+        <button class="nav-btn" id="export-btn" title="Exportar JSON">&#128203;</button>
+      </div>
+    </nav>`;
+}
 function renderHeader(project, summary, scanDuration) {
   const date = new Date(project.scannedAt).toLocaleString();
   return `
     <header class="header">
       <h1>&gt; ai-context-inspector</h1>
-      <div class="subtitle">${esc(project.name)} &mdash; ${date} &mdash; ${scanDuration}ms</div>
+      <div class="subtitle">${esc2(project.name)} &mdash; ${date} &mdash; ${scanDuration}ms</div>
       <div class="badges">
         <span class="badge badge--accent">${summary.totalMcpServers} MCPs</span>
         <span class="badge badge--green">${summary.totalTools} tools</span>
         <span class="badge badge--purple">${summary.totalFiles} archivos</span>
         <span class="badge badge--orange">${summary.totalSkills} skills</span>
         <span class="badge badge--blue">${summary.totalAgents} agents</span>
-        <span class="badge badge--accent">${summary.totalMemories} memorias</span>
+        <span class="badge badge--pink">${summary.totalMemories} memorias</span>
       </div>
     </header>`;
 }
+function renderStatsGrid(summary) {
+  const stats = [
+    {
+      icon: "\u2699\uFE0F",
+      value: summary.totalMcpServers,
+      label: "MCP Servers",
+      color: "#00d4ff"
+    },
+    {
+      icon: "\u{1F6E0}\uFE0F",
+      value: summary.totalTools,
+      label: "MCP Tools",
+      color: "#00e676"
+    },
+    {
+      icon: "\u{1F4C4}",
+      value: summary.totalFiles,
+      label: "Archivos AI",
+      color: "#b388ff"
+    },
+    {
+      icon: "\u26A1",
+      value: summary.totalSkills,
+      label: "Skills",
+      color: "#ffab40"
+    },
+    {
+      icon: "\u{1F916}",
+      value: summary.totalAgents,
+      label: "Agents",
+      color: "#4285f4"
+    },
+    {
+      icon: "\u{1F9E0}",
+      value: summary.totalMemories,
+      label: "Memorias",
+      color: "#ff80ab"
+    }
+  ];
+  const cards = stats.map(
+    (s) => `
+      <div class="stat-card" style="--stat-color: ${s.color}">
+        <span class="stat-icon">${s.icon}</span>
+        <span class="stat-number" data-target="${s.value}">0</span>
+        <span class="stat-label">${s.label}</span>
+      </div>`
+  ).join("");
+  return `<div class="stats-grid">${cards}</div>`;
+}
 function renderMcpServers(servers) {
   if (servers.length === 0) return "";
-  const cards = servers.map((s) => {
+  const cards = servers.map((s, i) => {
     const intro = s.introspection;
     const statusClass = intro ? `status--${intro.status}` : "status--configured";
     const statusText = intro ? intro.status === "ok" ? "OK" : intro.status === "timeout" ? "Timeout" : "Error" : "No introspectado";
     let toolsHtml = "";
     if (intro && intro.tools.length > 0) {
       const items = intro.tools.map(
-        (t) => `<li data-searchable="${esc(t.name + " " + (t.description ?? ""))}"><span class="tool-name">${esc(t.name)}</span><span class="tool-desc">${esc(t.description ?? "")}</span></li>`
+        (t) => `<li data-searchable="${esc2(t.name + " " + (t.description ?? ""))}"><span class="tool-name">${esc2(t.name)}</span><span class="tool-desc">${esc2(t.description ?? "")}</span></li>`
       ).join("");
       toolsHtml = `<div class="card-meta">${intro.tools.length} tools</div><ul class="tool-list">${items}</ul>`;
     }
@@ -1707,13 +2695,17 @@ function renderMcpServers(servers) {
     if (intro && intro.prompts.length > 0) {
       promptsHtml = `<div class="card-meta" style="margin-top:0.5rem">${intro.prompts.length} prompts</div>`;
     }
-    const serverVersion = intro?.serverInfo ? ` v${esc(intro.serverInfo.version)}` : "";
-    const errorHtml = intro?.error ? `<div class="card-meta" style="color:var(--red)">${esc(intro.error)}</div>` : "";
-    const configHtml = s.config.command ? `<div class="card-meta">${esc(s.config.command)} ${esc((s.config.args ?? []).join(" "))}</div>` : s.config.url ? `<div class="card-meta">${esc(s.config.url)}</div>` : "";
+    const serverVersion = intro?.serverInfo ? ` v${esc2(intro.serverInfo.version)}` : "";
+    const errorHtml = intro?.error ? `<div class="card-meta" style="color:var(--red)">${esc2(intro.error)}</div>` : "";
+    const cmdStr = s.config.command ? `${s.config.command} ${(s.config.args ?? []).join(" ")}` : s.config.url ?? "";
+    const configHtml = cmdStr ? `<div class="card-meta">${esc2(cmdStr)}</div>` : "";
+    const copyData = cmdStr || s.name;
     return `
-        <div class="card" data-searchable="${esc(s.name + " " + (intro?.serverInfo?.name ?? ""))}">
+        <div class="card" data-searchable="${esc2(s.name + " " + (intro?.serverInfo?.name ?? ""))}"
+          style="animation-delay: ${i * 0.05}s">
+          <button class="copy-btn" data-copy="${esc2(copyData)}">copiar</button>
           <div class="card-title">
-            <span>${esc(s.name)}${serverVersion}</span>
+            <span>${esc2(s.name)}${serverVersion}</span>
             <span class="status ${statusClass}">${statusText}</span>
             <span class="scope-badge scope-badge--${s.source}">${s.source}</span>
           </div>
@@ -1729,10 +2721,13 @@ function renderMcpServers(servers) {
     0
   );
   return `
-    <div class="section">
+    <div class="section" id="section-mcp">
       <div class="section-header">
-        <h2>MCP Servers</h2>
-        <div>
+        <div class="section-header-left">
+          <span class="section-icon">\u2699\uFE0F</span>
+          <h2>MCP Servers</h2>
+        </div>
+        <div class="section-header-right">
           <span class="count">${servers.length} servers &middot; ${totalTools} tools</span>
           <span class="arrow">&#9660;</span>
         </div>
@@ -1742,6 +2737,7 @@ function renderMcpServers(servers) {
 }
 function renderContextFiles(files) {
   if (files.length === 0) return "";
+  const maxSize = Math.max(...files.map((f) => f.size), 1);
   const groups = /* @__PURE__ */ new Map();
   for (const f of files) {
     const existing = groups.get(f.tool) ?? [];
@@ -1750,16 +2746,21 @@ function renderContextFiles(files) {
   }
   let groupsHtml = "";
   for (const [tool, toolFiles] of groups) {
-    const items = toolFiles.map((f) => {
-      const previewHtml = f.preview ? `<button class="preview-toggle">Ver contenido</button><div class="preview">${esc(f.preview)}</div>` : "";
-      const errorHtml = f.error ? `<span class="status status--error">${f.error}</span>` : "";
+    const items = toolFiles.map((f, i) => {
+      const previewHtml = f.preview ? `<button class="preview-toggle">Ver contenido</button><div class="preview">${esc2(f.preview)}</div>` : "";
+      const errorHtml = f.error ? `<span class="status status--error">${esc2(f.error)}</span>` : "";
       const sizeStr = f.size > 0 ? formatBytes(f.size) : "";
-      const typeIcon = f.type === "directory" ? "&#128193;" : "&#128196;";
+      const typeIcon = f.type === "directory" ? "\u{1F4C1}" : "\u{1F4C4}";
+      const sizePercent = f.size > 0 ? Math.max(3, f.size / maxSize * 100) : 0;
+      const sizeBar = f.size > 0 ? `<div class="size-bar"><div class="size-bar-fill" style="width:${sizePercent}%"></div></div>` : "";
       const childrenHtml = f.children && f.children.length > 0 ? `<div class="card-meta" style="margin-top:0.3rem">${f.children.length} archivos dentro</div>` : "";
       return `
-          <div class="card" data-searchable="${esc(f.path + " " + tool)}">
-            <div class="card-title">${typeIcon} ${esc(f.path)} ${errorHtml}</div>
+          <div class="card" data-searchable="${esc2(f.path + " " + tool)}"
+            style="animation-delay: ${i * 0.04}s">
+            <button class="copy-btn" data-copy="${esc2(f.path)}">copiar</button>
+            <div class="card-title">${typeIcon} ${esc2(f.path)} ${errorHtml}</div>
             <div class="card-meta">${sizeStr} &middot; <span class="scope-badge scope-badge--${f.scope}">${f.scope}</span></div>
+            ${sizeBar}
             ${childrenHtml}
             ${previewHtml}
           </div>`;
@@ -1774,10 +2775,13 @@ function renderContextFiles(files) {
       </div>`;
   }
   return `
-    <div class="section">
+    <div class="section" id="section-context">
       <div class="section-header">
-        <h2>Archivos de Contexto</h2>
-        <div>
+        <div class="section-header-left">
+          <span class="section-icon">\u{1F4C4}</span>
+          <h2>Archivos de Contexto</h2>
+        </div>
+        <div class="section-header-right">
           <span class="count">${files.length} archivos &middot; ${groups.size} herramientas</span>
           <span class="arrow">&#9660;</span>
         </div>
@@ -1787,23 +2791,27 @@ function renderContextFiles(files) {
 }
 function renderSkills(skills) {
   if (skills.length === 0) return "";
-  const items = skills.map((s) => {
-    const triggersHtml = s.triggers ? `<div class="card-meta">${s.triggers.map((t) => esc(t)).join(", ")}</div>` : "";
+  const items = skills.map((s, i) => {
+    const triggersHtml = s.triggers ? `<div class="card-meta">${s.triggers.map((t) => esc2(t)).join(", ")}</div>` : "";
     return `
-        <div class="card" data-searchable="${esc(s.name + " " + (s.description ?? ""))}">
+        <div class="card" data-searchable="${esc2(s.name + " " + (s.description ?? ""))}"
+          style="animation-delay: ${i * 0.04}s">
           <div class="card-title">
-            ${esc(s.name)}
+            \u26A1 ${esc2(s.name)}
             <span class="scope-badge scope-badge--${s.scope}">${s.scope}</span>
           </div>
-          ${s.description ? `<div class="card-meta">${esc(s.description)}</div>` : ""}
+          ${s.description ? `<div class="card-meta">${esc2(s.description)}</div>` : ""}
           ${triggersHtml}
         </div>`;
   }).join("");
   return `
-    <div class="section">
+    <div class="section" id="section-skills">
       <div class="section-header">
-        <h2>Skills</h2>
-        <div>
+        <div class="section-header-left">
+          <span class="section-icon">\u26A1</span>
+          <h2>Skills</h2>
+        </div>
+        <div class="section-header-right">
           <span class="count">${skills.length}</span>
           <span class="arrow">&#9660;</span>
         </div>
@@ -1813,25 +2821,29 @@ function renderSkills(skills) {
 }
 function renderAgents(agents) {
   if (agents.length === 0) return "";
-  const items = agents.map((a) => {
-    const modelHtml = a.model ? `<span class="badge badge--green">${esc(a.model)}</span>` : "";
-    const memoryHtml = a.hasMemory ? '<span class="badge badge--accent">memoria</span>' : "";
+  const items = agents.map((a, i) => {
+    const modelHtml = a.model ? `<span class="badge badge--green" style="font-size:0.65rem;padding:0.1rem 0.5rem">${esc2(a.model)}</span>` : "";
+    const memoryHtml = a.hasMemory ? '<span class="badge badge--pink" style="font-size:0.65rem;padding:0.1rem 0.5rem">\u{1F9E0} memoria</span>' : "";
     return `
-        <div class="card" data-searchable="${esc(a.name + " " + (a.description ?? ""))}">
+        <div class="card" data-searchable="${esc2(a.name + " " + (a.description ?? ""))}"
+          style="animation-delay: ${i * 0.04}s">
           <div class="card-title">
-            ${esc(a.name)}
+            \u{1F916} ${esc2(a.name)}
             ${modelHtml}
             ${memoryHtml}
             <span class="scope-badge scope-badge--${a.scope}">${a.scope}</span>
           </div>
-          ${a.description ? `<div class="card-meta">${esc(a.description)}</div>` : ""}
+          ${a.description ? `<div class="card-meta">${esc2(a.description)}</div>` : ""}
         </div>`;
   }).join("");
   return `
-    <div class="section">
+    <div class="section" id="section-agents">
       <div class="section-header">
-        <h2>Agents</h2>
-        <div>
+        <div class="section-header-left">
+          <span class="section-icon">\u{1F916}</span>
+          <h2>Agents</h2>
+        </div>
+        <div class="section-header-right">
           <span class="count">${agents.length}</span>
           <span class="arrow">&#9660;</span>
         </div>
@@ -1841,23 +2853,33 @@ function renderAgents(agents) {
 }
 function renderMemories(memories) {
   if (memories.length === 0) return "";
-  const items = memories.map((m) => {
-    const detailsHtml = m.details ? `<div class="card-meta">${Object.entries(m.details).map(([k, v]) => `${esc(k)}: ${esc(String(v))}`).join(" &middot; ")}</div>` : "";
+  const items = memories.map((m, i) => {
+    const detailEntries = m.details ? Object.entries(m.details).filter(
+      ([k]) => k !== "preview"
+    ) : [];
+    const detailsHtml = detailEntries.length > 0 ? `<div class="card-meta">${detailEntries.map(([k, v]) => `${esc2(k)}: ${esc2(String(v))}`).join(" &middot; ")}</div>` : "";
+    const previewVal = m.details && typeof m.details.preview === "string" ? m.details.preview : null;
+    const previewHtml = previewVal ? `<button class="preview-toggle">Ver contenido</button><div class="preview">${esc2(previewVal)}</div>` : "";
     return `
-        <div class="card" data-searchable="${esc(m.type)}">
+        <div class="card" data-searchable="${esc2(m.type + " " + (m.path ?? ""))}"
+          style="animation-delay: ${i * 0.04}s">
           <div class="card-title">
-            ${esc(m.type)}
+            \u{1F9E0} ${esc2(m.type)}
             <span class="status status--${m.status}">${m.status}</span>
           </div>
-          <div class="card-meta">${m.source}${m.path ? ` &middot; ${esc(m.path)}` : ""}</div>
+          <div class="card-meta">${m.source}${m.path ? ` &middot; ${esc2(m.path)}` : ""}</div>
           ${detailsHtml}
+          ${previewHtml}
         </div>`;
   }).join("");
   return `
-    <div class="section">
+    <div class="section" id="section-memories">
       <div class="section-header">
-        <h2>Memorias</h2>
-        <div>
+        <div class="section-header-left">
+          <span class="section-icon">\u{1F9E0}</span>
+          <h2>Memorias</h2>
+        </div>
+        <div class="section-header-right">
           <span class="count">${memories.length}</span>
           <span class="arrow">&#9660;</span>
         </div>
@@ -1865,14 +2887,40 @@ function renderMemories(memories) {
       <div class="section-content">${items}</div>
     </div>`;
 }
+function renderWarnings(warnings) {
+  if (warnings.length === 0) return "";
+  const items = warnings.map(
+    (w) => `
+      <div class="warning-card">
+        <div class="warning-scanner">${esc2(w.scanner)}${w.path ? ` &mdash; ${esc2(w.path)}` : ""}</div>
+        <div>${esc2(w.message)}</div>
+      </div>`
+  ).join("");
+  return `
+    <div class="section" id="section-warnings">
+      <div class="section-header">
+        <div class="section-header-left">
+          <span class="section-icon">\u26A0\uFE0F</span>
+          <h2>Advertencias</h2>
+        </div>
+        <div class="section-header-right">
+          <span class="count">${warnings.length}</span>
+          <span class="arrow">&#9660;</span>
+        </div>
+      </div>
+      <div class="section-content">${items}</div>
+    </div>`;
+}
 function renderEmptyState() {
   return `
     <div class="empty-state">
+      <span class="empty-state-icon">\u{1F50D}</span>
       <h3>No se encontr\xF3 configuraci\xF3n AI en este proyecto</h3>
       <p>Este proyecto no tiene archivos de configuraci\xF3n de herramientas AI.</p>
-      <p style="margin-top:1rem;font-size:0.85rem">
+      <p style="margin-top:1rem;font-size:0.85rem;color:var(--text-dim)">
         Herramientas soportadas: Claude, Cursor, Windsurf, Copilot, Gemini,
-        Codex, Aider, Cline, Continue, Amazon Q, Augment, Replit, Firebase Studio
+        Codex, OpenCode, Aider, Cline, Roo, Continue, Amazon Q, Augment,
+        Replit, Firebase Studio, Tabnine, Sourcegraph
       </p>
     </div>`;
 }
@@ -1894,14 +2942,46 @@ function computeSummary(result) {
 function generateHtml(result) {
   const summary = computeSummary(result);
   const isEmpty = summary.totalMcpServers === 0 && summary.totalFiles === 0 && summary.totalSkills === 0 && summary.totalAgents === 0 && summary.totalMemories === 0;
+  const navBar = renderNavBar(summary);
   const header = renderHeader(result.project, summary, result.scanDuration);
+  const statsGrid = renderStatsGrid(summary);
+  const ecosystemMap = renderEcosystemMap(result, summary);
   const content = isEmpty ? renderEmptyState() : [
     renderMcpServers(result.mcpServers),
     renderContextFiles(result.contextFiles),
     renderSkills(result.skills),
     renderAgents(result.agents),
-    renderMemories(result.memories)
+    renderMemories(result.memories),
+    renderWarnings(result.warnings)
   ].join("");
+  const exportData = {
+    project: result.project.name,
+    scannedAt: result.project.scannedAt,
+    scanDuration: result.scanDuration,
+    summary,
+    mcpServers: result.mcpServers.map((s) => ({
+      name: s.name,
+      source: s.source,
+      transport: s.config.transport,
+      tools: s.introspection?.tools.length ?? 0
+    })),
+    contextFiles: result.contextFiles.map((f) => ({
+      path: f.path,
+      tool: f.tool,
+      scope: f.scope
+    })),
+    skills: result.skills.map((s) => ({ name: s.name, scope: s.scope })),
+    agents: result.agents.map((a) => ({
+      name: a.name,
+      scope: a.scope,
+      model: a.model
+    })),
+    memories: result.memories.map((m) => ({
+      type: m.type,
+      source: m.source,
+      status: m.status
+    }))
+  };
   return `<!DOCTYPE html>
 <html lang="es">
 <head>
@@ -1911,16 +2991,25 @@ function generateHtml(result) {
   <style>${CSS_STYLES}</style>
 </head>
 <body>
+  ${navBar}
   <div class="container">
     ${header}
+    ${statsGrid}
+    ${ecosystemMap}
     <div class="search-bar">
-      <input type="text" id="search-input" placeholder="Buscar tools, archivos, skills, agents..." />
+      <div class="search-bar-inner">
+        <span class="search-icon">\u{1F50D}</span>
+        <input type="text" id="search-input" placeholder="Buscar tools, archivos, skills, agents..." />
+        <span class="search-kbd">/</span>
+      </div>
+      <span class="search-results-count"></span>
     </div>
     ${content}
     <footer class="footer">
       Generado por ai-context-inspector &mdash; ${new Date(result.project.scannedAt).toLocaleString()}
     </footer>
   </div>
+  <script type="application/json" id="scan-data">${JSON.stringify(exportData)}</script>
   <script>${JS_SCRIPTS}</script>
 </body>
 </html>`;