viberadar 0.3.55 → 0.3.57

package/dist/ui/dashboard.html

@@ -42,18 +42,18 @@
       flex-shrink: 0;
       z-index: 10;
     }
-    header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
-    .header-project { margin-left: auto; font-size: 13px; color: var(--muted); }
-    .header-time    { font-size: 12px; color: var(--dim); }
-    .header-agent-rights {
-      font-size: 11px;
-      color: var(--muted);
-      padding: 2px 8px;
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      background: var(--bg);
-      white-space: nowrap;
-    }
+    header h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
+    .header-project { margin-left: auto; font-size: 13px; color: var(--muted); }
+    .header-time    { font-size: 12px; color: var(--dim); }
+    .header-agent-rights {
+      font-size: 11px;
+      color: var(--muted);
+      padding: 2px 8px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: var(--bg);
+      white-space: nowrap;
+    }
 
     /* ── Run All Tests button ────────────────────────────────────────────────── */
     #runAllBtn {
@@ -168,6 +168,32 @@
     .stat-value { font-size: 20px; font-weight: 700; color: var(--blue); }
     .stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
 
+
+    .observability-panel {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 14px;
+      margin-bottom: 12px;
+    }
+    .observability-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
+    .obs-metrics { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin-bottom:10px; }
+    .obs-metric { background: var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px; }
+    .obs-metric-v { font-size:18px; font-weight:700; color: var(--blue); }
+    .obs-metric-l { font-size:10px; color: var(--muted); text-transform: uppercase; }
+    .obs-columns { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
+    .obs-list { background: var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px; }
+    .obs-list h4 { font-size:12px; margin-bottom:6px; color: var(--text); }
+    .obs-row { font-size:12px; color: var(--muted); padding:4px 0; border-bottom:1px dashed var(--border); }
+    .obs-row:last-child { border-bottom:none; }
+    .obs-priority-high { color: var(--red); }
+    .obs-priority-medium { color: var(--yellow); }
+    .obs-priority-low { color: var(--green); }
+    .obs-catalog { margin-top:10px; background: var(--bg); border:1px solid var(--border); border-radius:6px; padding:8px; }
+    .obs-catalog h4 { font-size:12px; margin-bottom:6px; }
+    .obs-cat-row { display:grid; grid-template-columns: 1.8fr .6fr .8fr .7fr .8fr 1fr; gap:8px; font-size:11px; color:var(--muted); padding:5px 0; border-bottom:1px dashed var(--border); }
+    .obs-cat-row.head { color: var(--text); font-weight:600; text-transform:uppercase; font-size:10px; }
+
     /* ── Layout ──────────────────────────────────────────────────────────────── */
     .layout { display: flex; flex: 1; overflow: hidden; }
 
@@ -183,6 +209,30 @@
       gap: 14px;
     }
 
+    .mode-switch {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .mode-switch-btn {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      background: var(--bg);
+      color: var(--muted);
+      font-size: 12px;
+      cursor: pointer;
+      transition: border-color 0.1s, background 0.1s, color 0.1s;
+    }
+    .mode-switch-btn:hover { background: var(--bg-hover); color: var(--text); }
+    .mode-switch-btn.active { border-color: var(--blue); color: var(--text); }
+    .mode-switch-hint { font-size: 10px; color: var(--dim); }
+
     .view-tabs {
       display: flex;
       background: var(--bg);
@@ -246,6 +296,33 @@
     .content { flex: 1; overflow-y: auto; padding: 18px 20px; transition: padding-bottom 0.25s ease; }
     .content.panel-open { padding-bottom: 300px; }
 
+    .onboarding-block {
+      background: linear-gradient(135deg, rgba(88,166,255,0.12), rgba(63,185,80,0.08));
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 14px 16px;
+      margin-bottom: 14px;
+    }
+    .onboarding-block h3 { font-size: 14px; margin-bottom: 6px; }
+    .onboarding-block p { font-size: 12px; color: var(--muted); line-height: 1.5; }
+
+    .obs-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 12px;
+    }
+    .obs-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 14px;
+    }
+    .obs-title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
+    .obs-value { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
+    .obs-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
+    .obs-list { display: flex; flex-direction: column; gap: 6px; }
+    .obs-list-item { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
+
     /* ── Feature cards ───────────────────────────────────────────────────────── */
     .features-grid {
       display: grid;
@@ -548,6 +625,13 @@
     .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; flex-shrink: 0; }
+    .file-row-select {
+      width: 14px;
+      height: 14px;
+      accent-color: var(--blue);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
     .file-row-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
     .file-row-dir  { font-size: 11px; color: var(--dim); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
     .file-row-agent-btn {
@@ -738,11 +822,66 @@
       white-space: nowrap;
     }
     .file-row-more-item:hover { background: var(--border); }
-    .agent-terminal {
-      flex: 1;
-      overflow-y: auto;
-      padding: 10px 16px;
-      font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
+
+    .bulk-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 10px;
+      padding: 8px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      flex-wrap: wrap;
+    }
+    .bulk-actions-count { font-size: 12px; color: var(--muted); }
+    .bulk-actions-btn {
+      padding: 6px 10px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      color: var(--text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .bulk-actions-btn.primary {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+    .bulk-actions-btn:hover:not(:disabled) { background: var(--bg-hover); }
+    .bulk-actions-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .feature-file-filters {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 10px;
+    }
+    .feature-filter-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--bg-card);
+      color: var(--muted);
+      font-size: 12px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .feature-filter-toggle:hover { background: var(--bg-hover); color: var(--text); }
+    .feature-filter-toggle input {
+      width: 14px;
+      height: 14px;
+      accent-color: var(--blue);
+      cursor: pointer;
+    }
+    .feature-filter-meta { color: var(--dim); font-size: 11px; }
+    .agent-terminal {
+      flex: 1;
+      overflow-y: auto;
+      padding: 10px 16px;
+      font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
       font-size: 12px;
       line-height: 1.5;
     }
@@ -801,10 +940,10 @@
 <header>
   <span style="font-size:20px">🔭</span>
   <h1>VibeRadar</h1>
-  <span class="header-project" id="projectName">—</span>
-  <span class="header-time" id="scannedAt"></span>
-  <span class="header-agent-rights" id="headerAgentRights" title="Права/режим выполнения агента">🔐 —</span>
-  <button id="runAllBtn" onclick="runAllTests()" title="Запустить все unit и integration тесты">▶ Все тесты</button>
+  <span class="header-project" id="projectName">—</span>
+  <span class="header-time" id="scannedAt"></span>
+  <span class="header-agent-rights" id="headerAgentRights" title="Права/режим выполнения агента">🔐 —</span>
+  <button id="runAllBtn" onclick="runAllTests()" title="Запустить все unit и integration тесты">▶ Все тесты</button>
   <button id="termBtn" onclick="toggleAgentPanel()" title="Показать/скрыть терминал агента">📟 Terminal</button>
   <div style="position:relative">
     <button id="agentBtn" onclick="toggleAgentMenu()" title="Настройки агента">🤖 —</button>
@@ -843,6 +982,7 @@
 
 <div class="layout">
   <aside class="sidebar">
+    <div class="mode-switch" id="modeSwitch"></div>
     <div class="view-tabs" id="viewTabs">
       <div class="view-tab" data-view="features">Features</div>
       <div class="view-tab" data-view="files">Files</div>
@@ -878,67 +1018,150 @@
 <script>
 // ─── State ────────────────────────────────────────────────────────────────────
 let D = null;
+let contextMode = 'qa';
 let view = 'features';
 let searchQuery = '';
 let activeTypes = new Set();
-let activePanelKey = null;
-let drillFeatureKey = null;   // null = grid, '__unmapped__' = unmapped, string = feature key
+let activePanelKey = null;
+let drillFeatureKey = null;   // null = grid, '__unmapped__' = unmapped, string = feature key
 let drillTestType   = null;   // null = feature overview, 'unit'|'integration'|'e2e' = test type drill
+let showOnlyUntestedInFeature = false; // source tab in feature detail
+const selectedSourceFiles = new Set(); // normalized relative paths for batch actions
 let e2ePlan         = null;   // current E2E plan object
 let e2ePlanLoading  = false;
-// ─── Run All Tests button ──────────────────────────────────────────────────────
-let runAllRunning = false;
-
-function clearFeatureHash() {
-  if (!window.location.hash) return;
-  history.replaceState(null, '', window.location.pathname + window.location.search);
-}
-
-function buildFeatureTabUrl(featureKey) {
-  const url = new URL(window.location.href);
-  url.hash = `feature=${encodeURIComponent(featureKey)}`;
-  return url.toString();
-}
-
-function openFeatureInNewTab(featureKey) {
-  window.open(buildFeatureTabUrl(featureKey), '_blank', 'noopener');
-}
-
-function setFeatureDrill(featureKey, syncHash = true) {
-  view = 'features';
-  drillFeatureKey = featureKey;
-  drillTestType = null;
-  activePanelKey = null;
-  document.getElementById('panel').classList.remove('open');
-  if (syncHash) {
-    if (featureKey) window.location.hash = `feature=${encodeURIComponent(featureKey)}`;
-    else clearFeatureHash();
-  }
-  renderContent();
+const modeStore = {
+  qa: { view: 'features', searchQuery: '', activeTypes: new Set(), drillFeatureKey: null, drillTestType: null, activePanelKey: null, showOnlyUntestedInFeature: false },
+  observability: { view: 'files', searchQuery: '', activeTypes: new Set(), drillFeatureKey: null, drillTestType: null, activePanelKey: null, showOnlyUntestedInFeature: false },
+};
+
+function getModeFromPath(pathname = window.location.pathname) {
+  if (pathname.startsWith('/radar/observability')) return 'observability';
+  return 'qa';
+}
+
+function routePathForMode(mode) {
+  return mode === 'observability' ? '/radar/observability' : '/radar/qa';
+}
+
+function setModeRoute(mode, replace = false) {
+  const target = routePathForMode(mode) + window.location.search + window.location.hash;
+  if (replace) history.replaceState(null, '', target);
+  else history.pushState(null, '', target);
+}
+
+function saveModeState(mode) {
+  modeStore[mode] = {
+    view,
+    searchQuery,
+    activeTypes: new Set(activeTypes),
+    drillFeatureKey,
+    drillTestType,
+    activePanelKey,
+    showOnlyUntestedInFeature,
+  };
 }
 
-function applyHashRoute() {
-  const hash = (window.location.hash || '').replace(/^#/, '');
-  if (!hash) {
-    if (view === 'features' && drillFeatureKey) {
-      drillFeatureKey = null;
-      drillTestType = null;
-      activePanelKey = null;
-    }
-    return;
-  }
-  const params = new URLSearchParams(hash);
-  const featureKey = params.get('feature');
-  if (!featureKey) return;
-  const isKnownFeature = Array.isArray(D?.features) && D.features.some(f => f.key === featureKey);
-  if (featureKey === '__unmapped__' || isKnownFeature) {
-    view = 'features';
-    drillFeatureKey = featureKey;
-    drillTestType = null;
-    activePanelKey = null;
-  }
+function restoreModeState(mode) {
+  const state = modeStore[mode];
+  view = state.view;
+  searchQuery = state.searchQuery;
+  activeTypes = new Set(state.activeTypes);
+  drillFeatureKey = state.drillFeatureKey;
+  drillTestType = state.drillTestType;
+  activePanelKey = state.activePanelKey;
+  showOnlyUntestedInFeature = !!state.showOnlyUntestedInFeature;
 }
 
+function switchMode(nextMode) {
+  if (nextMode === contextMode) return;
+  saveModeState(contextMode);
+  contextMode = nextMode;
+  restoreModeState(contextMode);
+  if (contextMode === 'observability') {
+    view = 'files';
+    drillFeatureKey = null;
+    drillTestType = null;
+    activePanelKey = null;
+    clearFeatureHash();
+  }
+  setModeRoute(contextMode);
+  document.getElementById('searchInput').value = searchQuery;
+  document.getElementById('panel').classList.remove('open');
+  renderStats();
+  renderSidebar();
+  renderContent();
+}
+// ─── Run All Tests button ──────────────────────────────────────────────────────
+let runAllRunning = false;
+
+function escapeHtml(text) {
+  return String(text || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+
+function clearFeatureHash() {
+  if (!window.location.hash) return;
+  history.replaceState(null, '', window.location.pathname + window.location.search);
+}
+
+function buildFeatureTabUrl(featureKey) {
+  const url = new URL(window.location.href);
+  url.hash = `feature=${encodeURIComponent(featureKey)}`;
+  return url.toString();
+}
+
+function openFeatureInNewTab(featureKey) {
+  window.open(buildFeatureTabUrl(featureKey), '_blank', 'noopener');
+}
+
+function setFeatureDrill(featureKey, syncHash = true) {
+  view = 'features';
+  drillFeatureKey = featureKey;
+  drillTestType = null;
+  activePanelKey = null;
+  selectedSourceFiles.clear();
+  document.getElementById('panel').classList.remove('open');
+  if (syncHash) {
+    if (featureKey) window.location.hash = `feature=${encodeURIComponent(featureKey)}`;
+    else clearFeatureHash();
+  }
+  renderContent();
+}
+
+function selectedFilesForFeature(featureKey, visibleSourceFiles = null) {
+  const visibleSet = visibleSourceFiles ? new Set(visibleSourceFiles.map(p => p.replace(/\\/g, '/'))) : null;
+  return Array.from(selectedSourceFiles).filter((relPath) => {
+    if (visibleSet && !visibleSet.has(relPath)) return false;
+    const mod = D?.modules?.find((m) => m.relativePath.replace(/\\/g, '/') === relPath);
+    return !!mod && mod.type !== 'test' && mod.featureKeys?.includes(featureKey);
+  });
+}
+
+function applyHashRoute() {
+  const hash = (window.location.hash || '').replace(/^#/, '');
+  if (!hash) {
+    if (view === 'features' && drillFeatureKey) {
+      drillFeatureKey = null;
+      drillTestType = null;
+      activePanelKey = null;
+    }
+    return;
+  }
+  const params = new URLSearchParams(hash);
+  const featureKey = params.get('feature');
+  if (!featureKey) return;
+  const isKnownFeature = Array.isArray(D?.features) && D.features.some(f => f.key === featureKey);
+  if (featureKey === '__unmapped__' || isKnownFeature) {
+    view = 'features';
+    drillFeatureKey = featureKey;
+    drillTestType = null;
+    activePanelKey = null;
+  }
+}
+
 function updateRunAllBtn(state) {
   const btn = document.getElementById('runAllBtn');
   if (!btn) return;
@@ -1167,10 +1390,13 @@ function setAgentRunning(val) {
 }
 
 // Returns array of normalized relative paths affected by a given task
-function getTaskFilePaths(task, featureKey, filePath) {
+function getTaskFilePaths(task, featureKey, filePath, selectedFilePaths) {
   if ((task === 'write-tests-file' || task === 'fix-tests') && filePath) {
     return [filePath.replace(/\\/g, '/')];
   }
+  if ((task === 'write-tests-selected' || task === 'refresh-tests-selected') && Array.isArray(selectedFilePaths)) {
+    return selectedFilePaths.map(p => p.replace(/\\/g, '/'));
+  }
   if ((task === 'write-tests' || task === 'fix-tests-all') && featureKey && D?.modules) {
     return D.modules
       .filter(m => m.featureKeys?.includes(featureKey) && m.type !== 'test' && (!m.hasTests || m.testStale))
@@ -1254,36 +1480,36 @@ async function copyPromptForFile(featureKey, relPath, dropdown) {
 }
 
 // ─── Agent menu ─────────────────────────────────────────────────────────────
-const CLAUDE_MODELS = [
-  { id: 'claude-sonnet-4-6', checkId: 'amSonnet46Check' },
-  { id: 'claude-opus-4-5',   checkId: 'amOpus45Check'   },
-  { id: 'claude-haiku-3-5',  checkId: 'amHaiku35Check'  },
-];
-
-function updateAgentRightsInfo() {
-  const el = document.getElementById('headerAgentRights');
-  if (!el || !D) return;
-  const runtime = D.agentRuntime || {};
-  const sandbox = runtime.codexSandboxMode || 'read-only';
-  const approval = runtime.approvalPolicy || 'never';
-
-  if (D.agent === 'codex') {
-    el.textContent = `🔐 Codex: ${sandbox}, approval: ${approval}`;
-    el.title = 'Права/режим выполнения Codex';
-    return;
-  }
-  if (D.agent === 'claude') {
-    el.textContent = '🔐 Claude: managed by Claude CLI';
-    el.title = 'Права определяются Claude CLI';
-    return;
-  }
-  el.textContent = '🔐 Агент не выбран';
-  el.title = 'Выбери агента в меню';
-}
-
-function updateAgentBtn() {
-  const btn = document.getElementById('agentBtn');
-  if (!D) return;
+const CLAUDE_MODELS = [
+  { id: 'claude-sonnet-4-6', checkId: 'amSonnet46Check' },
+  { id: 'claude-opus-4-5',   checkId: 'amOpus45Check'   },
+  { id: 'claude-haiku-3-5',  checkId: 'amHaiku35Check'  },
+];
+
+function updateAgentRightsInfo() {
+  const el = document.getElementById('headerAgentRights');
+  if (!el || !D) return;
+  const runtime = D.agentRuntime || {};
+  const sandbox = runtime.codexSandboxMode || 'read-only';
+  const approval = runtime.approvalPolicy || 'never';
+
+  if (D.agent === 'codex') {
+    el.textContent = `🔐 Codex: ${sandbox}, approval: ${approval}`;
+    el.title = 'Права/режим выполнения Codex';
+    return;
+  }
+  if (D.agent === 'claude') {
+    el.textContent = '🔐 Claude: managed by Claude CLI';
+    el.title = 'Права определяются Claude CLI';
+    return;
+  }
+  el.textContent = '🔐 Агент не выбран';
+  el.title = 'Выбери агента в меню';
+}
+
+function updateAgentBtn() {
+  const btn = document.getElementById('agentBtn');
+  if (!D) return;
   const a = D.agent;
   const m = D.model;
   // Button label: agent + model shortname
@@ -1343,7 +1569,7 @@ async function reauthAgent() {
   await fetch('/api/agent-reauth', { method: 'POST' });
 }
 
-async function runAgentTask(task, featureKey, filePath) {
+async function runAgentTask(task, featureKey, filePath, selectedFilePaths) {
   document.getElementById('agentPanel').classList.add('open');
   document.getElementById('termBtn').classList.add('term-active');
   if (!agentRunning) {
@@ -1352,7 +1578,12 @@ async function runAgentTask(task, featureKey, filePath) {
   await fetch('/api/run-agent', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ task, featureKey, filePath: filePath || undefined }),
+    body: JSON.stringify({
+      task,
+      featureKey,
+      filePath: filePath || undefined,
+      selectedFilePaths: Array.isArray(selectedFilePaths) ? selectedFilePaths : undefined,
+    }),
   });
 }
 
@@ -1425,28 +1656,40 @@ async function init() {
     ]);
     D = await res.json();
 
-    if (statusRes) {
-      const status = await statusRes.json().catch(() => ({}));
-      D.agentRunning = status.agentRunning ?? false;
-    }
-    updateAgentBtn();
-    updateAgentRightsInfo();
-
-    document.getElementById('projectName').textContent = D.projectName;
-    document.getElementById('scannedAt').textContent =
-      new Date(D.scannedAt).toLocaleTimeString();
-
-    view = D.hasConfig ? 'features' : 'files';
-    applyHashRoute();
+    if (statusRes) {
+      const status = await statusRes.json().catch(() => ({}));
+      D.agentRunning = status.agentRunning ?? false;
+    }
+    updateAgentBtn();
+    updateAgentRightsInfo();
+
+    document.getElementById('projectName').textContent = D.projectName;
+    document.getElementById('scannedAt').textContent =
+      new Date(D.scannedAt).toLocaleTimeString();
+
+    contextMode = getModeFromPath();
+    view = D.hasConfig ? 'features' : 'files';
+    applyHashRoute();
 
     if (!D.hasConfig) {
       document.querySelector('[data-view="features"]').classList.add('disabled');
+      modeStore.qa.view = 'files';
+    }
+    modeStore.qa.view = D.hasConfig ? modeStore.qa.view : 'files';
+    restoreModeState(contextMode);
+    if (contextMode === 'observability') {
+      view = 'files';
+      drillFeatureKey = null;
+      drillTestType = null;
+      activePanelKey = null;
     }
+    setModeRoute(contextMode, true);
+    document.getElementById('searchInput').value = searchQuery;
 
     document.getElementById('loading').style.display = 'none';
-    renderStats();
-    renderSidebar();
-    renderContent();
+    renderStats();
+    renderSidebar();
+    renderContent();
   } catch (err) {
     document.getElementById('loading').textContent = '❌ Failed to load: ' + err.message;
   }
@@ -1460,7 +1703,21 @@ function renderStats() {
   const pct = src.length ? Math.round(tested / src.length * 100) : 0;
 
   let items;
-  if (D.hasConfig && D.features) {
+  if (contextMode === 'observability') {
+    const serviceSources = src.filter(m => m.type === 'service' || m.type === 'util' || m.type === 'other');
+    const errorSignal = Object.values(D.testErrors || {}).reduce((acc, v) => acc + (v?.failed || 0), 0);
+    const totalBytes = src.reduce((acc, m) => acc + (m.size || 0), 0);
+    const avgKb = src.length ? Math.round(totalBytes / src.length / 1024) : 0;
+    const noiseRatio = src.length ? Math.round((src.filter(m => !m.hasTests).length / src.length) * 100) : 0;
+    const missingStructured = serviceSources.filter(m => !m.hasTests).length;
+    items = [
+      { v: serviceSources.length, l: 'Log Sources' },
+      { v: avgKb + 'kb', l: 'Avg Volume/File' },
+      { v: noiseRatio + '%', l: 'Noise Ratio' },
+      { v: errorSignal, l: 'Error Signal', c: errorSignal ? '#f85149' : undefined },
+      { v: missingStructured, l: 'Missing Fields', c: missingStructured ? '#e3b341' : undefined },
+    ];
+  } else if (D.hasConfig && D.features) {
     const unmapped = src.filter(m => !m.isInfra && (!m.featureKeys || m.featureKeys.length === 0)).length;
     items = [
       { v: D.features.length,   l: 'Features' },
@@ -1486,13 +1743,44 @@ function renderStats() {
   ).join('');
 }
 
+function renderModeSwitch() {
+  const root = document.getElementById('modeSwitch');
+  const modes = [
+    { key: 'qa', label: 'QA Coverage', hint: 'Покрытие, пробелы, тренды' },
+    { key: 'observability', label: 'Observability', hint: 'Логи, шум, error signal' },
+  ];
+  root.innerHTML = modes.map(m => `
+    <button class="mode-switch-btn ${contextMode === m.key ? 'active' : ''}" data-mode="${m.key}">
+      <span>${m.label}</span>
+      <span class="mode-switch-hint">${m.hint}</span>
+    </button>
+  `).join('');
+  root.querySelectorAll('.mode-switch-btn').forEach(btn => {
+    btn.onclick = () => switchMode(btn.dataset.mode);
+  });
+}
+
 // ─── Sidebar ──────────────────────────────────────────────────────────────────
 function renderSidebar() {
+  renderModeSwitch();
+  const tabs = document.getElementById('viewTabs');
+  const extra = document.getElementById('sidebarExtra');
+
+  if (contextMode === 'observability') {
+    tabs.style.display = 'none';
+    extra.innerHTML = `
+      <div class="sidebar-label">Observability focus</div>
+      <div style="font-size:12px;color:var(--muted);padding:0 6px;line-height:1.45">
+        Источники логов и качество сигналов для triage инцидентов.
+      </div>`;
+    return;
+  }
+
+  tabs.style.display = 'flex';
   document.querySelectorAll('.view-tab').forEach(t =>
     t.classList.toggle('active', t.dataset.view === view)
   );
 
-  const extra = document.getElementById('sidebarExtra');
   if (view !== 'files') { extra.innerHTML = ''; return; }
 
   const types = [...new Set(D.modules.map(m => m.type))].sort();
@@ -1528,6 +1816,11 @@ function renderSidebar() {
 // ─── Content ──────────────────────────────────────────────────────────────────
 function renderContent() {
   const c = document.getElementById('content');
+  if (contextMode === 'observability') {
+    renderObservability(c);
+    return;
+  }
+
   if (view === 'features') {
     if (drillFeatureKey === '__unmapped__') renderUnmappedDetail(c);
     else if (drillFeatureKey) renderFeatureDetail(c);
@@ -1537,6 +1830,66 @@ function renderContent() {
   }
 }
 
+function renderQaOnboarding() {
+  return `<div class="onboarding-block"><h3>QA Coverage: что это?</h3><p>Этот экран помогает найти пробелы в тестах: сначала проверь покрытие по фичам, затем открой критичные непокрытые файлы и запусти генерацию/фиксы тестов.</p></div>`;
+}
+
+function renderObservability(c) {
+  const src = D.modules.filter(m => m.type !== 'test');
+  const sourceGroups = [
+    { label: 'Service', count: src.filter(m => m.type === 'service').length },
+    { label: 'Util', count: src.filter(m => m.type === 'util').length },
+    { label: 'Other', count: src.filter(m => m.type === 'other').length },
+  ].filter(x => x.count > 0);
+  const errorSignal = Object.values(D.testErrors || {}).reduce((acc, v) => acc + (v?.failed || 0), 0);
+  const missingStructured = src.filter(m => (m.type === 'service' || m.type === 'util') && !m.hasTests).slice(0, 8);
+  const noisy = [...src]
+    .sort((a, b) => (b.size || 0) - (a.size || 0))
+    .slice(0, 5)
+    .map(m => ({ name: m.name, rel: m.relativePath, kb: Math.round((m.size || 0) / 1024) }));
+
+  c.innerHTML = `
+    <div class="onboarding-block">
+      <h3>Observability: что это?</h3>
+      <p>Экран для контроля signal-to-noise: откуда идут логи, где растёт объём, сколько шума и какие поля/сигналы нужно структурировать в первую очередь.</p>
+    </div>
+
+    <div class="obs-grid">
+      <div class="obs-card">
+        <div class="obs-title">Источники логов</div>
+        <div class="obs-list">
+          ${sourceGroups.map(g => `<div class="obs-list-item"><span>${g.label}</span><strong>${g.count}</strong></div>`).join('') || '<div class="obs-sub">Нет данных</div>'}
+        </div>
+      </div>
+
+      <div class="obs-card">
+        <div class="obs-title">Volume (top files)</div>
+        <div class="obs-list">
+          ${noisy.map(n => `<div class="obs-list-item"><span title="${n.rel}">${n.name}</span><strong>${n.kb}kb</strong></div>`).join('') || '<div class="obs-sub">Нет файлов</div>'}
+        </div>
+      </div>
+
+      <div class="obs-card">
+        <div class="obs-title">Noise ratio</div>
+        <div class="obs-value">${src.length ? Math.round((src.filter(m => !m.hasTests).length / src.length) * 100) : 0}%</div>
+        <div class="obs-sub">Доля источников без тестового контроля (proxy для noisy логирования).</div>
+      </div>
+
+      <div class="obs-card">
+        <div class="obs-title">Error signal</div>
+        <div class="obs-value" style="color:${errorSignal ? 'var(--red)' : 'var(--green)'}">${errorSignal}</div>
+        <div class="obs-sub">Сумма упавших тестов из последнего прогона как индикатор нестабильности сигналов.</div>
+      </div>
+
+      <div class="obs-card" style="grid-column:1 / -1">
+        <div class="obs-title">Missing structured fields (candidates)</div>
+        <div class="obs-list">
+          ${missingStructured.map(m => `<div class="obs-list-item"><span>${m.relativePath}</span><strong>needs schema</strong></div>`).join('') || '<div class="obs-sub">Явных кандидатов не найдено</div>'}
+        </div>
+      </div>
+    </div>`;
+}
+
 function backToFeatureDetail() {
   drillTestType = null;
   activePanelKey = null;
@@ -1544,9 +1897,62 @@ function backToFeatureDetail() {
   renderContent();
 }
 
-function backToFeatures() {
-  setFeatureDrill(null);
-}
+function backToFeatures() {
+  setFeatureDrill(null);
+}
+
+
+function toPct(v) {
+  return Math.round((v || 0) * 100) + '%';
+}
+
+function renderObservabilityOverview(c) {
+  const o = D.observability;
+  if (!o) return '';
+  const metrics = [
+    ['noise_ratio', toPct(o.metrics.noise_ratio)],
+    ['error_actionability', toPct(o.metrics.error_actionability)],
+    ['structured_completeness', toPct(o.metrics.structured_completeness)],
+    ['coverage_of_key_flows', toPct(o.metrics.coverage_of_key_flows)],
+  ];
+  const noisy = (o.topNoisyPatterns || []).slice(0, 5).map(i =>
+    `<div class="obs-row"><span class="obs-priority-${i.priority}">[${i.priority}]</span> ${escapeHtml(i.pattern)} · x${i.count} → <b>${i.recommendation}</b></div>`
+  ).join('') || '<div class="obs-row">Нет шумных паттернов</div>';
+
+  const missing = (o.missingCriticalLogs || []).slice(0, 5).map(i =>
+    `<div class="obs-row"><span class="obs-priority-${i.priority}">[${i.priority}]</span> ${escapeHtml(i.pattern)} → <b>${i.recommendation}</b></div>`
+  ).join('') || '<div class="obs-row">Критичные логи покрыты</div>';
+
+  const catalogRows = (o.catalog || []).slice(0, 10).map(i =>
+    `<div class="obs-cat-row"><span>${escapeHtml(i.modulePath)}</span><span>${i.level}</span><span>${i.format}</span><span>${i.frequency}</span><span>${escapeHtml(i.owner)}</span><span>${i.recommendation}</span></div>`
+  ).join('');
+
+  return `
+    <div class="observability-panel">
+      <div class="observability-title">Observability</div>
+      <div class="obs-metrics">
+        ${metrics.map(([l,v]) => `<div class="obs-metric"><div class="obs-metric-v">${v}</div><div class="obs-metric-l">${l}</div></div>`).join('')}
+      </div>
+      <div class="obs-columns">
+        <div class="obs-list">
+          <h4>Top noisy patterns</h4>
+          ${noisy}
+        </div>
+        <div class="obs-list">
+          <h4>Missing critical logs</h4>
+          ${missing}
+        </div>
+      </div>
+      <div class="obs-catalog">
+        <h4>Каталог источников логов (top 10)</h4>
+        <div class="obs-cat-row head"><span>module</span><span>level</span><span>format</span><span>frequency</span><span>owner</span><span>action</span></div>
+        ${catalogRows || '<div class="obs-row">Логи не найдены</div>'}
+      </div>
+      <div class="obs-row" style="margin-top:8px">
+        Классификация: мусор ${o.classification.trash} · полезно ${o.classification.useful} · критично ${o.classification.critical}
+      </div>
+    </div>`;
+}
 
 function renderFeatureCards(c) {
   if (!D.hasConfig || !D.features) {
@@ -1579,7 +1985,7 @@ function renderFeatureCards(c) {
       </div>
     </div>` : '';
 
-  c.innerHTML = setupBanner + '<div class="features-grid" id="featGrid"></div>';
+  c.innerHTML = setupBanner + renderObservabilityOverview(c) + '<div class="features-grid" id="featGrid"></div>';
   const grid = document.getElementById('featGrid');
 
   list.forEach(f => {
@@ -1622,22 +2028,22 @@ function renderFeatureCards(c) {
           ▶ Написать тесты (${f.fileCount - f.testedCount} без тестов)
         </button>` : ''}
       </div>`;
-    card.onmousedown = (e) => {
-      if (e.button === 1 && !e.target.closest('.agent-card-btn')) e.preventDefault();
-    };
-    card.onauxclick = (e) => {
-      if (e.button !== 1 || e.target.closest('.agent-card-btn')) return;
-      e.preventDefault();
-      openFeatureInNewTab(f.key);
-    };
-    card.onclick = (e) => {
-      if (e.target.closest('.agent-card-btn')) return; // don't drill on agent btn click
-      if (e.metaKey || e.ctrlKey) {
-        openFeatureInNewTab(f.key);
-        return;
-      }
-      setFeatureDrill(f.key);
-    };
+    card.onmousedown = (e) => {
+      if (e.button === 1 && !e.target.closest('.agent-card-btn')) e.preventDefault();
+    };
+    card.onauxclick = (e) => {
+      if (e.button !== 1 || e.target.closest('.agent-card-btn')) return;
+      e.preventDefault();
+      openFeatureInNewTab(f.key);
+    };
+    card.onclick = (e) => {
+      if (e.target.closest('.agent-card-btn')) return; // don't drill on agent btn click
+      if (e.metaKey || e.ctrlKey) {
+        openFeatureInNewTab(f.key);
+        return;
+      }
+      setFeatureDrill(f.key);
+    };
     const agentBtn = card.querySelector('.agent-card-btn');
     if (agentBtn) {
       agentBtn.onclick = (e) => {
@@ -1678,21 +2084,21 @@ function renderFeatureCards(c) {
             <span class="feature-progress-label" style="color:var(--dim)">нет привязки</span>
           </div>
         </div>`;
-      card.onmousedown = (e) => {
-        if (e.button === 1) e.preventDefault();
-      };
-      card.onauxclick = (e) => {
-        if (e.button !== 1) return;
-        e.preventDefault();
-        openFeatureInNewTab('__unmapped__');
-      };
-      card.onclick = (e) => {
-        if (e.metaKey || e.ctrlKey) {
-          openFeatureInNewTab('__unmapped__');
-          return;
-        }
-        setFeatureDrill('__unmapped__');
-      };
+      card.onmousedown = (e) => {
+        if (e.button === 1) e.preventDefault();
+      };
+      card.onauxclick = (e) => {
+        if (e.button !== 1) return;
+        e.preventDefault();
+        openFeatureInNewTab('__unmapped__');
+      };
+      card.onclick = (e) => {
+        if (e.metaKey || e.ctrlKey) {
+          openFeatureInNewTab('__unmapped__');
+          return;
+        }
+        setFeatureDrill('__unmapped__');
+      };
       grid.appendChild(card);
     }
   }
@@ -1884,11 +2290,12 @@ function renderFeatureDetail(c) {
     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 mods = D.modules.filter(m => m.featureKeys && m.featureKeys.includes(drillFeatureKey));
+  const src  = mods.filter(m => m.type !== 'test');
+  const untestedSrc = src.filter(m => !m.hasTests);
+  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 unitCount        = feat.unitTestCount        ?? tst.filter(m => m.testType === 'unit').length;
   const integrationCount = feat.integrationTestCount ?? tst.filter(m => m.testType === 'integration').length;
@@ -1900,20 +2307,28 @@ function renderFeatureDetail(c) {
   const integrationFailed = tst.filter(m => m.testType === 'integration' && te[m.relativePath.replace(/\\/g, '/')]).length;
   const e2eFailed         = tst.filter(m => m.testType === 'e2e'         && te[m.relativePath.replace(/\\/g, '/')]).length;
 
-  // Determine what list to show based on active tab
-  // null or 'source' → source files; test type → test files of that type
-  const activeTab  = drillTestType || 'source';
-  const listFiles  = activeTab === 'source' ? src : tst.filter(m => m.testType === activeTab);
-  const isTestList = activeTab !== 'source';
-  const meta       = TEST_TYPE_META[activeTab];
-  const listLabel  = meta
-    ? `${meta.icon} ${meta.label} тесты (${listFiles.length})`
-    : `📁 Файлы фичи (${listFiles.length})`;
+  // Determine what list to show based on active tab
+  // null or 'source' → source files; test type → test files of that type
+  const activeTab  = drillTestType || 'source';
+  const sourceList = showOnlyUntestedInFeature ? untestedSrc : src;
+  const listFiles  = activeTab === 'source' ? sourceList : tst.filter(m => m.testType === activeTab);
+  const isTestList = activeTab !== 'source';
+  const showUntestedToggle = activeTab === 'source';
+  const meta       = TEST_TYPE_META[activeTab];
+  const listLabel  = meta
+    ? `${meta.icon} ${meta.label} тесты (${listFiles.length})`
+    : `📁 Файлы фичи (${listFiles.length})`;
 
   const q = searchQuery.toLowerCase();
   const filtered = q ? listFiles.filter(m =>
     m.name.toLowerCase().includes(q) || m.relativePath.toLowerCase().includes(q)
   ) : listFiles;
+  const selectableSource = !isTestList && !!D.agent;
+  const visibleSourcePaths = selectableSource
+    ? filtered.map(m => m.relativePath.replace(/\\/g, '/'))
+    : [];
+  const selectedVisible = selectableSource ? selectedFilesForFeature(drillFeatureKey, filtered.map(m => m.relativePath)) : [];
+  const selectedCount = selectedVisible.length;
 
   c.innerHTML = `
     <div class="drill-header">
@@ -1939,16 +2354,81 @@ function renderFeatureDetail(c) {
       ${testTypeCard('integration', 'Integration', '🔗', '#58a6ff',  integrationCount, activeTab === 'integration', drillFeatureKey, integrationFailed)}
       ${testTypeCard('e2e',         'E2E',         '🎭', '#d2a8ff',  e2eCount,         activeTab === 'e2e',         drillFeatureKey, e2eFailed)}
     </div>
-
-    <div class="drill-section-label">${listLabel}</div>
-    <div class="file-rows" id="fileRows">
-      ${filtered.length === 0
-        ? `<div style="padding:20px;text-align:center;border:1px dashed var(--border);border-radius:8px;color:var(--dim);font-size:13px">
-            ${isTestList ? 'Нет тестов этого типа для данной фичи' : 'Нет файлов — возможно паттерны в конфиге не совпадают'}
-          </div>`
-        : filtered.map(m => fileRow(m, isTestList, drillFeatureKey)).join('')
-      }
-    </div>`;
+
+    <div class="drill-section-label">${listLabel}</div>
+    ${showUntestedToggle ? `
+      <div class="feature-file-filters">
+        <label class="feature-filter-toggle">
+          <input type="checkbox" id="untestedOnlyToggle" ${showOnlyUntestedInFeature ? 'checked' : ''}>
+          <span>Только без тестов</span>
+          <span class="feature-filter-meta">(${untestedSrc.length})</span>
+        </label>
+      </div>` : ''}
+    ${selectableSource ? `
+      <div class="bulk-actions">
+        <span class="bulk-actions-count">Выбрано файлов: <b>${selectedCount}</b></span>
+        <button class="bulk-actions-btn" id="bulkSelectAllBtn" ${visibleSourcePaths.length === 0 ? 'disabled' : ''}>☑ Выбрать все (${visibleSourcePaths.length})</button>
+        <button class="bulk-actions-btn" id="bulkClearBtn" ${selectedCount === 0 ? 'disabled' : ''}>Снять выбор</button>
+        <button class="bulk-actions-btn primary" id="bulkWriteTestsBtn" ${selectedCount === 0 ? 'disabled' : ''}>✍ Написать тесты для выбранных</button>
+        <button class="bulk-actions-btn" id="bulkRefreshTestsBtn" ${selectedCount === 0 ? 'disabled' : ''}>↻ Актуализировать тесты</button>
+      </div>` : ''}
+    <div class="file-rows" id="fileRows">
+      ${filtered.length === 0
+        ? `<div style="padding:20px;text-align:center;border:1px dashed var(--border);border-radius:8px;color:var(--dim);font-size:13px">
+            ${isTestList
+              ? 'Нет тестов этого типа для данной фичи'
+              : (showOnlyUntestedInFeature
+                  ? 'Все файлы этой фичи уже покрыты тестами'
+                  : 'Нет файлов — возможно паттерны в конфиге не совпадают')}
+          </div>`
+        : filtered.map(m => fileRow(m, isTestList, drillFeatureKey, selectableSource)).join('')
+      }
+    </div>`;
+
+  const untestedOnlyToggle = document.getElementById('untestedOnlyToggle');
+  if (untestedOnlyToggle) {
+    untestedOnlyToggle.onchange = (e) => {
+      showOnlyUntestedInFeature = !!e.target.checked;
+      renderContent();
+    };
+  }
+
+  if (selectableSource) {
+    const allVisibleSelected = visibleSourcePaths.length > 0 && visibleSourcePaths.every((p) => selectedSourceFiles.has(p));
+    const bulkSelectAllBtn = document.getElementById('bulkSelectAllBtn');
+    if (bulkSelectAllBtn) {
+      bulkSelectAllBtn.textContent = allVisibleSelected
+        ? `☑ Выбраны все (${visibleSourcePaths.length})`
+        : `☑ Выбрать все (${visibleSourcePaths.length})`;
+      bulkSelectAllBtn.onclick = () => {
+        visibleSourcePaths.forEach((p) => selectedSourceFiles.add(p));
+        renderContent();
+      };
+    }
+    const bulkClearBtn = document.getElementById('bulkClearBtn');
+    if (bulkClearBtn) {
+      bulkClearBtn.onclick = () => {
+        selectedVisible.forEach((p) => selectedSourceFiles.delete(p));
+        renderContent();
+      };
+    }
+    const bulkWriteTestsBtn = document.getElementById('bulkWriteTestsBtn');
+    if (bulkWriteTestsBtn) {
+      bulkWriteTestsBtn.onclick = () => {
+        runAgentTask('write-tests-selected', drillFeatureKey, null, selectedVisible);
+        selectedVisible.forEach((p) => selectedSourceFiles.delete(p));
+        renderContent();
+      };
+    }
+    const bulkRefreshTestsBtn = document.getElementById('bulkRefreshTestsBtn');
+    if (bulkRefreshTestsBtn) {
+      bulkRefreshTestsBtn.onclick = () => {
+        runAgentTask('refresh-tests-selected', drillFeatureKey, null, selectedVisible);
+        selectedVisible.forEach((p) => selectedSourceFiles.delete(p));
+        renderContent();
+      };
+    }
+  }
 
   c.querySelectorAll('.test-type-card[data-testtype]').forEach(card => {
     card.onclick = async () => {
@@ -2106,7 +2586,7 @@ function renderUnmappedDetail(c) {
   });
 }
 
-function fileRow(m, isTest = false, featureKey = null) {
+function fileRow(m, isTest = false, featureKey = null, selectable = false) {
   const relPath = m.relativePath.replace(/\\/g, '/');
   const parts   = relPath.split('/');
   const name    = parts[parts.length - 1];
@@ -2119,6 +2599,7 @@ function fileRow(m, isTest = false, featureKey = null) {
     ? `<span class="file-agent-spinner ${agentState}" title="${agentState === 'running' ? 'Агент работает…' : 'В очереди…'}"></span>`
     : (testErr ? '❌' : isTest ? '🧪' : (m.testStale ? '⚠️' : m.hasTests ? '✅' : '⬜'));
   const isActive = activePanelKey === m.id;
+  const isSelected = selectedSourceFiles.has(relPath);
 
   // Write-test button for source files
   // In feature drill-down (featureKey set), show button even for isInfra files — user explicitly added them to the feature
@@ -2167,8 +2648,14 @@ function fileRow(m, isTest = false, featureKey = null) {
       </div>`
     : '';
 
+  const selectBox = selectable
+    ? `<input type="checkbox" class="file-row-select" ${isSelected ? 'checked' : ''}
+         onclick="event.stopPropagation();toggleSourceSelection('${relPath}', this.checked)">`
+    : '';
+
   return `
     <div class="file-row${isActive ? ' active' : ''}${testErr ? ' has-errors' : ''}" data-id="${m.id}">
+      ${selectBox}
       <span class="file-row-icon">${icon}</span>
       <span class="file-row-name">${name}</span>
       ${errBadge}
@@ -2180,6 +2667,13 @@ function fileRow(m, isTest = false, featureKey = null) {
     ${errHtml}`;
 }
 
+function toggleSourceSelection(relPath, checked) {
+  const n = relPath.replace(/\\/g, '/');
+  if (checked) selectedSourceFiles.add(n);
+  else selectedSourceFiles.delete(n);
+  renderContent();
+}
+
 function renderModuleGrid(c) {
   const q = searchQuery.toLowerCase();
   const list = D.modules.filter(m => {
@@ -2429,36 +2923,54 @@ function closePanel() {
 }
 
 // ─── Events ───────────────────────────────────────────────────────────────────
-document.querySelectorAll('.view-tab').forEach(tab => {
-  tab.onclick = () => {
-    if (tab.classList.contains('disabled')) return;
-    view = tab.dataset.view;
-    drillFeatureKey = null;
+document.querySelectorAll('.view-tab').forEach(tab => {
+  tab.onclick = () => {
+    if (contextMode !== 'qa') return;
+    if (tab.classList.contains('disabled')) return;
+    view = tab.dataset.view;
+    drillFeatureKey = null;
     drillTestType = null;
+    selectedSourceFiles.clear();
     activePanelKey = null;
     searchQuery = '';
-    activeTypes.clear();
-    document.getElementById('searchInput').value = '';
-    document.getElementById('panel').classList.remove('open');
-    if (view !== 'features') clearFeatureHash();
-    renderSidebar();
-    renderContent();
-  };
-});
+    activeTypes.clear();
+    document.getElementById('searchInput').value = '';
+    document.getElementById('panel').classList.remove('open');
+    if (view !== 'features') clearFeatureHash();
+    renderSidebar();
+    renderContent();
+  };
+});
 
 document.getElementById('searchInput').oninput = e => {
   searchQuery = e.target.value.toLowerCase();
   renderContent();
 };
 
-document.getElementById('panelClose').onclick = closePanel;
-document.addEventListener('keydown', e => { if (e.key === 'Escape') closePanel(); });
-window.addEventListener('hashchange', () => {
-  if (!D) return;
-  applyHashRoute();
-  renderSidebar();
-  renderContent();
-});
+document.getElementById('panelClose').onclick = closePanel;
+document.addEventListener('keydown', e => { if (e.key === 'Escape') closePanel(); });
+window.addEventListener('hashchange', () => {
+  if (!D || contextMode !== 'qa') return;
+  applyHashRoute();
+  renderSidebar();
+  renderContent();
+});
+
+
+window.addEventListener('popstate', () => {
+  if (!D) return;
+  const routeMode = getModeFromPath();
+  if (routeMode !== contextMode) {
+    saveModeState(contextMode);
+    contextMode = routeMode;
+    restoreModeState(contextMode);
+  }
+  if (contextMode === 'qa') applyHashRoute();
+  document.getElementById('searchInput').value = searchQuery;
+  renderStats();
+  renderSidebar();
+  renderContent();
+});
 
 // ─── Live reload ──────────────────────────────────────────────────────────────
 function setLiveDot(color, title) {
@@ -2476,11 +2988,11 @@ async function refreshData() {
     document.getElementById('scannedAt').textContent =
       new Date(D.scannedAt).toLocaleTimeString();
 
-    renderStats();
-    renderSidebar();
-    renderContent();
-    updateAgentBtn();
-    updateAgentRightsInfo();
+    renderStats();
+    renderSidebar();
+    renderContent();
+    updateAgentBtn();
+    updateAgentRightsInfo();
 
     // Re-render drill-down or re-open panel
     const panelOpen = document.getElementById('panel').classList.contains('open');
@@ -2515,12 +3027,12 @@ function connectSSE() {
   });
 
   es.addEventListener('agent-queued', (e) => {
-    const { queueLength, title, task, featureKey, filePath } = JSON.parse(e.data);
+    const { queueLength, title, task, featureKey, filePath, selectedFilePaths } = JSON.parse(e.data);
     updateQueueBadge(queueLength);
     document.getElementById('agentPanel').classList.add('open');
     document.getElementById('termBtn').classList.add('term-active');
     // Track queued paths for spinner
-    getTaskFilePaths(task, featureKey, filePath).forEach(p => agentQueuedPaths.add(p));
+    getTaskFilePaths(task, featureKey, filePath, selectedFilePaths).forEach(p => agentQueuedPaths.add(p));
     renderContent();
     // Append queue notification to the currently running session (or active)
     const targetId = runningSessionId || activeSessionId;
@@ -2531,10 +3043,10 @@ function connectSSE() {
 
   es.addEventListener('agent-started', (e) => {
     setAgentRunning(true);
-    const { title, queueLength = 0, task, featureKey, filePath } = JSON.parse(e.data);
+    const { title, queueLength = 0, task, featureKey, filePath, selectedFilePaths } = JSON.parse(e.data);
     updateQueueBadge(queueLength);
     // Move paths from queued → running (current task)
-    const startedPaths = getTaskFilePaths(task, featureKey, filePath);
+    const startedPaths = getTaskFilePaths(task, featureKey, filePath, selectedFilePaths);
     startedPaths.forEach(p => { agentQueuedPaths.delete(p); agentRunningPaths.add(p); });
     renderContent();
     // Close previous session (queue case: agent-done not fired between tasks)
@@ -2575,37 +3087,37 @@ function connectSSE() {
     renderContent();
   });
 
-  es.addEventListener('agent-summary', (e) => {
-    const {
-      passed, failed, files = [],
-      testedFileCount = files.length,
-      passedFileCount = Math.max(0, testedFileCount - (failed > 0 ? 1 : 0)),
-      failedFileCount = failed > 0 ? 1 : 0,
-      autoFixQueued = false,
-    } = JSON.parse(e.data);
-    const allOk = failed === 0;
-    const box = document.createElement('div');
-    box.style.cssText = `
-      margin: 10px 0 4px;
-      padding: 10px 14px;
+  es.addEventListener('agent-summary', (e) => {
+    const {
+      passed, failed, files = [],
+      testedFileCount = files.length,
+      passedFileCount = Math.max(0, testedFileCount - (failed > 0 ? 1 : 0)),
+      failedFileCount = failed > 0 ? 1 : 0,
+      autoFixQueued = false,
+    } = JSON.parse(e.data);
+    const allOk = failed === 0;
+    const box = document.createElement('div');
+    box.style.cssText = `
+      margin: 10px 0 4px;
+      padding: 10px 14px;
       border-radius: 8px;
       border: 1px solid ${allOk ? 'var(--green)' : 'var(--red)'};
       background: ${allOk ? '#0d2a1a' : '#2a0d0d'};
       font-family: inherit;
-    `;
-    box.innerHTML = `
-      <div style="font-size:13px;font-weight:700;color:${allOk ? 'var(--green)' : 'var(--red)'}">
-        ${allOk ? '✅' : '⚠️'} Тесты: ${allOk ? 'всё ок' : 'есть падения'}
-      </div>
-      <div style="font-size:11px;color:var(--muted);margin-top:4px">
-        Файлы: ${testedFileCount} • passed: ${passedFileCount} • failed: ${failedFileCount}
-      </div>
-      <div style="font-size:11px;color:var(--muted);margin-top:2px">
-        Тест-кейсы: ${passed} passed${failed > 0 ? ` • ${failed} failed` : ''}
-      </div>
-      ${autoFixQueued ? `<div style="font-size:11px;color:var(--yellow);margin-top:4px">🛠️ Автоисправление поставлено в очередь</div>` : ''}
-      ${files.map(f => `<div style="font-size:11px;color:var(--dim);margin-top:3px">📄 ${f}</div>`).join('')}
-    `;
+    `;
+    box.innerHTML = `
+      <div style="font-size:13px;font-weight:700;color:${allOk ? 'var(--green)' : 'var(--red)'}">
+        ${allOk ? '✅' : '⚠️'} Тесты: ${allOk ? 'всё ок' : 'есть падения'}
+      </div>
+      <div style="font-size:11px;color:var(--muted);margin-top:4px">
+        Файлы: ${testedFileCount} • passed: ${passedFileCount} • failed: ${failedFileCount}
+      </div>
+      <div style="font-size:11px;color:var(--muted);margin-top:2px">
+        Тест-кейсы: ${passed} passed${failed > 0 ? ` • ${failed} failed` : ''}
+      </div>
+      ${autoFixQueued ? `<div style="font-size:11px;color:var(--yellow);margin-top:4px">🛠️ Автоисправление поставлено в очередь</div>` : ''}
+      ${files.map(f => `<div style="font-size:11px;color:var(--dim);margin-top:3px">📄 ${f}</div>`).join('')}
+    `;
     const targetId = runningSessionId || activeSessionId;
     if (targetId) {
       appendToSession(targetId, box);