viberadar 0.3.39 → 0.3.40

package/dist/ui/dashboard.html

@@ -234,7 +234,8 @@
     .type-count { margin-left: auto; font-size: 11px; color: var(--dim); }
 
     /* ── Content area ────────────────────────────────────────────────────────── */
-    .content { flex: 1; overflow-y: auto; padding: 18px 20px; }
+    .content { flex: 1; overflow-y: auto; padding: 18px 20px; transition: padding-bottom 0.25s ease; }
+    .content.panel-open { padding-bottom: 300px; }
 
     /* ── Feature cards ───────────────────────────────────────────────────────── */
     .features-grid {
@@ -481,59 +482,56 @@
 
     /* ── Test-type cards inside feature detail ───────────────────────────────── */
     .test-type-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 10px;
-      margin-bottom: 20px;
+      display: flex;
+      gap: 8px;
+      margin-bottom: 14px;
+      flex-wrap: wrap;
+      align-items: center;
     }
     .test-type-card {
+      display: flex;
+      align-items: center;
+      gap: 8px;
       background: var(--bg-card);
       border: 1px solid var(--border);
+      border-left: 3px solid transparent;
       border-radius: 8px;
-      padding: 14px 16px;
+      padding: 7px 12px;
       cursor: pointer;
       transition: background 0.15s, border-color 0.15s;
-      position: relative;
-      overflow: hidden;
-    }
-    .test-type-card:hover { background: var(--bg-hover); border-color: var(--dim); }
-    .test-type-card .tt-accent {
-      position: absolute; top: 0; left: 0; right: 0; height: 3px;
+      flex-shrink: 0;
     }
+    .test-type-card:hover { background: var(--bg-hover); }
+    .test-type-card .tt-accent { display: none; } /* replaced by border-left */
     .test-type-card .tt-label {
       font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
-      color: var(--muted); margin-bottom: 6px; margin-top: 2px;
+      color: var(--muted); white-space: nowrap;
     }
     .test-type-card .tt-count {
-      font-size: 26px; font-weight: 700; line-height: 1;
-      margin-bottom: 4px;
+      font-size: 18px; font-weight: 700; line-height: 1;
     }
     .test-type-card .tt-sub {
-      font-size: 11px; color: var(--dim);
-    }
-    .test-type-card.tt-empty .tt-count { color: var(--dim); }
-    .test-type-card.tt-empty { opacity: 0.7; }
-    .test-type-card.tt-active {
-      background: var(--bg-hover);
-      border-width: 2px;
+      font-size: 11px; color: var(--dim); white-space: nowrap;
     }
+    .test-type-card.tt-empty { opacity: 0.65; }
+    .test-type-card.tt-active { background: var(--bg-hover); }
     .test-type-card.tt-failed {
       border-color: var(--red) !important;
-      border-width: 2px;
       background: rgba(248, 81, 73, 0.06);
     }
+    .tt-chip-actions { display: flex; gap: 4px; margin-left: 4px; }
     .tt-run-btn {
-      display: block; width: 100%; margin-top: 8px;
-      padding: 3px 0;
+      display: inline-block; margin: 0;
+      padding: 3px 9px;
       background: transparent; border: 1px solid var(--border);
       border-radius: 4px; color: var(--muted); font-size: 10px;
-      cursor: pointer; text-align: center;
+      cursor: pointer; white-space: nowrap;
       transition: background 0.1s, color 0.1s, border-color 0.1s;
     }
     .tt-run-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--dim); }
     .tt-run-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .tt-fix-btn { border-color: var(--red); color: var(--red); font-weight: 600; }
-    .tt-fix-btn:hover { background: rgba(248, 81, 73, 0.15); color: var(--red); border-color: var(--red); }
+    .tt-fix-btn { border-color: var(--yellow); color: var(--yellow); font-weight: 600; }
+    .tt-fix-btn:hover { background: rgba(255,200,0,0.1); color: var(--yellow); border-color: var(--yellow); }
     .file-rows { display: flex; flex-direction: column; gap: 2px; }
     .file-row {
       display: flex;
@@ -1510,27 +1508,29 @@ function renderFeatureCards(c) {
 function testTypeCard(type, label, icon, color, count, active, featureKey, failedCount = 0) {
   const empty = count === 0 && type !== 'source';
   const hasFailed = failedCount > 0 && type !== 'source';
-  const subLabel = empty ? 'нет тестов' : (type === 'source' ? 'код приложения' : pluralFiles(count));
+  const subLabel = type === 'source' ? 'файлов' : (empty ? 'нет тестов' : pluralFiles(count));
+  const accentColor = hasFailed ? 'var(--red)' : color;
+  const countColor  = hasFailed ? 'var(--red)' : (active || !empty ? color : 'var(--dim)');
+
   const runBtn = !empty && type !== 'source' && featureKey
     ? `<button class="tt-run-btn" onclick="event.stopPropagation();runTests('${featureKey}','${type}')">▶ запустить</button>`
     : '';
   const fixAllBtn = hasFailed && D.agent && featureKey
-    ? `<button class="tt-run-btn tt-fix-btn" onclick="event.stopPropagation();runAgentTask('fix-tests-all','${featureKey}','${type}')">🔧 починить всё</button>`
+    ? `<button class="tt-run-btn tt-fix-btn" onclick="event.stopPropagation();runAgentTask('fix-tests-all','${featureKey}','${type}')">🔧 починить</button>`
     : '';
-  const accentColor = hasFailed && !active ? 'var(--red)' : color;
-  const countColor  = hasFailed ? 'var(--red)' : (active || !empty ? color : 'var(--dim)');
-  const failedNote  = hasFailed
-    ? `<div style="font-size:11px;color:var(--red);margin-top:2px;font-weight:600">❌ ${failedCount} упало</div>`
+  const failedBadge = hasFailed
+    ? `<span style="font-size:10px;color:var(--red);font-weight:700;white-space:nowrap">❌ ${failedCount}</span>`
     : '';
+  const actions = (runBtn || fixAllBtn) ? `<div class="tt-chip-actions">${runBtn}${fixAllBtn}</div>` : '';
+
   return `
     <div class="test-type-card${empty ? ' tt-empty' : ''}${active ? ' tt-active' : ''}${hasFailed ? ' tt-failed' : ''}"
-         data-testtype="${type}" style="${active ? 'border-color:' + color : ''}">
-      <div class="tt-accent" style="background:${accentColor}"></div>
-      <div class="tt-label">${icon} ${label}</div>
-      <div class="tt-count" style="color:${countColor}">${count}</div>
-      <div class="tt-sub">${subLabel}</div>
-      ${failedNote}
-      ${fixAllBtn || runBtn}
+         data-testtype="${type}" style="border-left-color:${accentColor}${active ? ';border-color:' + color : ''}">
+      <span class="tt-label">${icon} ${label}</span>
+      <span class="tt-count" style="color:${countColor}">${count}</span>
+      <span class="tt-sub">${subLabel}</span>
+      ${failedBadge}
+      ${actions}
     </div>`;
 }
 
@@ -2309,7 +2309,15 @@ function connectSSE() {
   };
 }
 
-init().then(() => { restoreSessions(); connectSSE(); });
+init().then(() => {
+  restoreSessions();
+  connectSSE();
+  // Sync content padding with terminal panel open state automatically
+  new MutationObserver(() => {
+    const isOpen = document.getElementById('agentPanel').classList.contains('open');
+    document.getElementById('content').classList.toggle('panel-open', isOpen);
+  }).observe(document.getElementById('agentPanel'), { attributes: true, attributeFilter: ['class'] });
+});
 </script>
 </body>
 </html>

package/package.json

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