viberadar 0.3.3 → 0.3.4

package/dist/ui/dashboard.html

@@ -339,6 +339,64 @@
       font-family: monospace;
     }
 
+    /* ── Feature drill-down ──────────────────────────────────────────────────── */
+    .drill-header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding-bottom: 14px;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+    }
+    .back-btn {
+      background: none;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--muted);
+      cursor: pointer;
+      padding: 5px 12px;
+      font-size: 12px;
+      flex-shrink: 0;
+      transition: background 0.1s, color 0.1s;
+    }
+    .back-btn:hover { background: var(--border); color: var(--text); }
+    .drill-title {
+      display: flex; align-items: center; gap: 8px;
+      font-size: 17px; font-weight: 700;
+    }
+    .drill-stats {
+      display: flex; gap: 16px;
+      font-size: 12px; color: var(--muted);
+      margin-left: auto;
+    }
+    .drill-desc {
+      font-size: 13px; color: var(--muted);
+      margin-bottom: 14px; line-height: 1.5;
+    }
+    .drill-section-label {
+      font-size: 10px; text-transform: uppercase;
+      letter-spacing: 0.5px; color: var(--muted);
+      margin: 14px 0 6px;
+    }
+    .file-rows { display: flex; flex-direction: column; gap: 2px; }
+    .file-row {
+      display: grid;
+      grid-template-columns: 22px 1fr auto;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: background 0.1s;
+    }
+    .file-row:hover  { background: var(--bg-card); }
+    .file-row.active { background: var(--bg-hover); border-left: 2px solid var(--blue); padding-left: 8px; }
+    .file-row-icon { font-size: 12px; }
+    .file-row-name { font-weight: 500; word-break: break-all; }
+    .file-row-dir  { font-size: 11px; color: var(--dim); text-align: right; word-break: break-word; }
+
     /* ── Misc ────────────────────────────────────────────────────────────────── */
     .loading { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--muted); font-size: 14px; }
     .empty   { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; }
@@ -388,6 +446,7 @@ let view = 'features';
 let searchQuery = '';
 let activeTypes = new Set();
 let activePanelKey = null;
+let drillFeatureKey = null;  // null = grid, string = inside a feature
 
 // ─── Color helpers ────────────────────────────────────────────────────────────
 const TYPE_COLORS = {
@@ -519,7 +578,18 @@ function renderSidebar() {
 // ─── Content ──────────────────────────────────────────────────────────────────
 function renderContent() {
   const c = document.getElementById('content');
-  view === 'features' ? renderFeatureCards(c) : renderModuleGrid(c);
+  if (view === 'features') {
+    drillFeatureKey ? renderFeatureDetail(c) : renderFeatureCards(c);
+  } else {
+    renderModuleGrid(c);
+  }
+}
+
+function backToFeatures() {
+  drillFeatureKey = null;
+  activePanelKey = null;
+  document.getElementById('panel').classList.remove('open');
+  renderContent();
 }
 
 function renderFeatureCards(c) {
@@ -566,7 +636,7 @@ function renderFeatureCards(c) {
           <span class="feature-progress-label" style="color:${covColor(pct)}">${f.testedCount}/${f.fileCount} ✓</span>
         </div>
       </div>`;
-    card.onclick = () => openFeaturePanel(f.key);
+    card.onclick = () => { drillFeatureKey = f.key; activePanelKey = null; document.getElementById('panel').classList.remove('open'); renderContent(); };
     grid.appendChild(card);
   });
 
@@ -602,6 +672,71 @@ function renderFeatureCards(c) {
   }
 }
 
+function renderFeatureDetail(c) {
+  const feat = D.features.find(f => f.key === drillFeatureKey);
+  if (!feat) { backToFeatures(); return; }
+
+  const mods = D.modules.filter(m => m.featureKeys && m.featureKeys.includes(drillFeatureKey));
+  const src  = mods.filter(m => m.type !== 'test');
+  const tst  = mods.filter(m => m.type === 'test');
+  const testedCount = src.filter(m => m.hasTests).length;
+  const pct  = src.length > 0 ? Math.round(testedCount / src.length * 100) : 0;
+
+  const q = searchQuery.toLowerCase();
+  const filteredSrc = q ? src.filter(m =>
+    m.name.toLowerCase().includes(q) || m.relativePath.toLowerCase().includes(q)
+  ) : src;
+  const filteredTst = q ? tst.filter(m =>
+    m.name.toLowerCase().includes(q) || m.relativePath.toLowerCase().includes(q)
+  ) : tst;
+
+  c.innerHTML = `
+    <div class="drill-header">
+      <button class="back-btn" onclick="backToFeatures()">← Все фичи</button>
+      <div class="drill-title">
+        <div style="width:10px;height:10px;border-radius:50%;background:${feat.color};flex-shrink:0"></div>
+        <span>${feat.label}</span>
+      </div>
+      <div class="drill-stats">
+        <span>${src.length} файлов</span>
+        <span style="color:${covColor(pct)}">${pct}% с тестами</span>
+        <span>${tst.length} тест-файлов</span>
+      </div>
+    </div>
+    ${feat.description ? `<div class="drill-desc">${feat.description}</div>` : ''}
+    <div class="file-rows" id="fileRows">
+      ${filteredSrc.length === 0 && !q
+        ? '<div style="font-size:13px;color:var(--dim)">Нет файлов — возможно паттерны в конфиге не совпадают</div>'
+        : filteredSrc.map(m => fileRow(m)).join('')
+      }
+      ${filteredTst.length > 0 ? `
+        <div class="drill-section-label">Тест-файлы (${filteredTst.length})</div>
+        ${filteredTst.map(m => fileRow(m, true)).join('')}
+      ` : ''}
+    </div>`;
+
+  c.querySelectorAll('.file-row[data-id]').forEach(row => {
+    row.onclick = () => {
+      const m = D.modules.find(m => m.id === row.dataset.id);
+      if (m) openModulePanel(m);
+    };
+  });
+}
+
+function fileRow(m, isTest = false) {
+  const parts = m.relativePath.replace(/\\/g, '/').split('/');
+  const name  = parts[parts.length - 1];
+  const dir   = parts.slice(0, -1).join('/');
+  const icon  = isTest ? '🧪' : (m.hasTests ? '✅' : '⬜');
+  const isActive = activePanelKey === m.id;
+  return `
+    <div class="file-row${isActive ? ' active' : ''}" data-id="${m.id}">
+      <span class="file-row-icon">${icon}</span>
+      <span class="file-row-name">${name}</span>
+      <span class="file-row-dir">${dir}</span>
+    </div>`;
+}
+
 function renderModuleGrid(c) {
   const q = searchQuery.toLowerCase();
   const list = D.modules.filter(m => {
@@ -833,6 +968,7 @@ document.querySelectorAll('.view-tab').forEach(tab => {
   tab.onclick = () => {
     if (tab.classList.contains('disabled')) return;
     view = tab.dataset.view;
+    drillFeatureKey = null;
     activePanelKey = null;
     searchQuery = '';
     activeTypes.clear();
@@ -871,7 +1007,7 @@ async function refreshData() {
     renderSidebar();
     renderContent();
 
-    // Re-open panel if it was open
+    // Re-render drill-down or re-open panel
     const panelOpen = document.getElementById('panel').classList.contains('open');
     if (panelOpen && activePanelKey) {
       if (activePanelKey === '__unmapped__') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viberadar",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Live module map with test coverage for vibecoding projects",
   "main": "./dist/cli.js",
   "bin": {