viberadar 0.3.2 → 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,9 +636,105 @@ 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);
   });
+
+  // ── Unmapped card ──────────────────────────────────────────────────────────
+  if (!q) {
+    const unmappedSrc = D.modules.filter(m =>
+      m.type !== 'test' && (!m.featureKeys || m.featureKeys.length === 0)
+    );
+    if (unmappedSrc.length > 0) {
+      const isActive = activePanelKey === '__unmapped__';
+      const card = document.createElement('div');
+      card.className = 'feature-card' + (isActive ? ' active' : '');
+      card.style.borderStyle = 'dashed';
+      card.style.opacity = '0.75';
+      card.innerHTML = `
+        <div class="feature-accent" style="background:var(--yellow)"></div>
+        <div class="feature-body">
+          <div class="feature-title">
+            <span style="color:var(--yellow)">⚠ Unmapped</span>
+            <span class="feature-file-count">${unmappedSrc.length} ${pluralFiles(unmappedSrc.length)}</span>
+          </div>
+          <div class="feature-desc">Файлы вне карты фич — не входят ни в одну фичу</div>
+          <div class="feature-progress-wrap">
+            <div class="feature-progress-bar">
+              <div class="feature-progress-fill" style="width:100%;background:var(--border)"></div>
+            </div>
+            <span class="feature-progress-label" style="color:var(--dim)">нет привязки</span>
+          </div>
+        </div>`;
+      card.onclick = () => openUnmappedPanel(unmappedSrc);
+      grid.appendChild(card);
+    }
+  }
+}
+
+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) {
@@ -726,6 +892,71 @@ function openModulePanel(m) {
   document.getElementById('panel').classList.add('open');
 }
 
+function openUnmappedPanel(files) {
+  activePanelKey = '__unmapped__';
+  renderContent();
+
+  // Group by top-level directory
+  const byDir = {};
+  files.forEach(m => {
+    const parts = m.relativePath.replace(/\\/g, '/').split('/');
+    const dir = parts.length > 1 ? parts[0] : '(root)';
+    if (!byDir[dir]) byDir[dir] = [];
+    byDir[dir].push(m);
+  });
+  const dirs = Object.keys(byDir).sort();
+
+  // Build plain-text list for copying to AI agent
+  const plainList = files
+    .map(m => '- ' + m.relativePath.replace(/\\/g, '/'))
+    .join('\n');
+
+  const promptText =
+    `В проекте ${files.length} файлов без привязки к фичам (unmapped).\n` +
+    `Изучи список ниже и обнови viberadar.config.json:\n` +
+    `добавь эти файлы в существующие фичи или создай новые.\n\n` +
+    plainList;
+
+  document.getElementById('panelContent').innerHTML = `
+    <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
+      <span style="font-size:16px">⚠</span>
+      <div class="panel-title" style="color:var(--yellow)">Unmapped файлы</div>
+    </div>
+    <div class="panel-subtitle">
+      Не входят ни в одну фичу.<br>
+      Запусти <code style="color:var(--blue)">npx viberadar init</code> — агент предложит куда добавить.
+    </div>
+
+    <button id="copyUnmapped" style="
+      width:100%; padding:8px 12px; margin-bottom:16px;
+      background:var(--bg); border:1px solid var(--border);
+      border-radius:6px; color:var(--blue); font-size:12px;
+      cursor:pointer; text-align:left;
+    ">📋 Скопировать список для AI-агента</button>
+
+    ${dirs.map(dir => `
+      <div class="panel-section">
+        <div class="panel-section-label">${dir}/ (${byDir[dir].length})</div>
+        <div class="file-list">
+          ${byDir[dir].map(m => fileItem(m)).join('')}
+        </div>
+      </div>
+    `).join('')}`;
+
+  document.getElementById('copyUnmapped').onclick = function() {
+    navigator.clipboard.writeText(promptText).then(() => {
+      this.textContent = '✅ Скопировано! Вставь в AI-агента';
+      this.style.color = 'var(--green)';
+      setTimeout(() => {
+        this.textContent = '📋 Скопировать список для AI-агента';
+        this.style.color = 'var(--blue)';
+      }, 3000);
+    });
+  };
+
+  document.getElementById('panel').classList.add('open');
+}
+
 function closePanel() {
   activePanelKey = null;
   document.getElementById('panel').classList.remove('open');
@@ -737,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();
@@ -775,10 +1007,15 @@ 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 (view === 'features' && D.features) {
+      if (activePanelKey === '__unmapped__') {
+        const unmapped = D.modules.filter(m =>
+          m.type !== 'test' && (!m.featureKeys || m.featureKeys.length === 0)
+        );
+        openUnmappedPanel(unmapped);
+      } else if (view === 'features' && D.features) {
         openFeaturePanel(activePanelKey);
       } else {
         const m = D.modules.find(m => m.id === activePanelKey);

package/package.json

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