claude-code-memory-explorer 0.10.0 → 0.11.1

package/public/style.css

@@ -23,12 +23,17 @@
   --scope-project: #7ab5a0;
   --scope-local: #8a9bb5;
   --scope-rule: #a89bc4;
+  --scope-skill: #7a9bc4;
   --scope-memory: #c4a06a;
   --scope-agent-memory: #8aa8a3;
   --scope-policy: #b58a8a;
   --font-mono: 'IBM Plex Mono', monospace;
   --font-serif: 'Playfair Display', serif;
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /* elevation: shadow-1 for resting cards, shadow-2 for floating layers (popovers, modals, toasts) */
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15);
+  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
+  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.35);
 }
 /* #endregion VARIABLES */
 
@@ -39,6 +44,8 @@
   box-sizing: border-box;
 }
 body {
+  /* native widgets (select popups, form controls) follow color-scheme, not CSS vars */
+  color-scheme: dark;
   background: var(--bg-deep);
   color: var(--text-primary);
   font-family: var(--font-sans);
@@ -176,7 +183,7 @@ body {
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--shadow-2);
 }
 .theme-menu.open {
   display: block;
@@ -236,23 +243,38 @@ body {
 .budget-bar {
   background: var(--bg-surface);
   border-bottom: 1px solid var(--border);
-  padding: 6px 16px 8px;
+  padding: 4px 16px 6px;
   flex-shrink: 0;
+  cursor: pointer;
+}
+.budget-bar:hover .budget-label {
+  color: var(--text-secondary);
+}
+body.fp-mode .budget-bar {
+  border-bottom-color: var(--accent);
+}
+/* Footprint highlight: fade everything that costs nothing, mark what loads */
+body.fp-mode .tree-item:not(.fp-hit) {
+  opacity: 0.35;
+}
+body.fp-mode .tree-item.fp-hit {
+  box-shadow: inset 2px 0 0 var(--accent);
 }
 .budget-label {
   display: flex;
   justify-content: space-between;
-  font-size: 10px;
+  font-size: 9px;
   color: var(--text-muted);
-  margin-bottom: 4px;
+  margin-bottom: 3px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
 .budget-track {
-  height: 6px;
+  height: 4px;
   background: var(--bg-elevated);
   border-radius: 3px;
   overflow: hidden;
+  box-shadow: var(--shadow-inset);
 }
 .budget-segments {
   display: flex;
@@ -260,8 +282,17 @@ body {
 }
 .budget-segment {
   height: 100%;
-  transition: width 0.3s;
+  transition:
+    width 0.3s,
+    opacity 0.15s;
   position: relative;
+  cursor: pointer;
+}
+.budget-segment:hover {
+  filter: brightness(1.2);
+}
+.budget-segment.seg-dim {
+  opacity: 0.3;
 }
 .budget-segment:first-child {
   border-radius: 3px 0 0 3px;
@@ -321,16 +352,28 @@ body {
 /* #endregion MAIN_LAYOUT */
 
 /* #region TREE */
+/* filled sticky section bars — same depth language as the marketplace tree headers */
 .tree-group-header {
-  padding: 8px 12px 4px;
+  padding: 7px 12px;
   font-size: 10px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--text-muted);
+  color: var(--text-tertiary);
   display: flex;
   align-items: center;
   gap: 6px;
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  margin-top: -1px;
+}
+.tree-content > .tree-group-header:first-child {
+  border-top: none;
+  margin-top: 0;
 }
 .tree-subgroup-header {
   padding: 6px 12px 2px 20px;
@@ -391,6 +434,7 @@ body.light .tree-agent-item .file-name {
 .tree-item.selected {
   background: var(--accent-dim);
   color: var(--accent);
+  box-shadow: inset 2px 0 0 var(--accent);
 }
 .tree-item .tree-chevron,
 .tree-item .tree-chevron-spacer {
@@ -429,6 +473,8 @@ body.light .tree-agent-item .file-name {
   font-size: 10px;
   color: var(--text-muted);
   font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.7;
   flex-shrink: 0;
 }
 .tree-child .file-name {
@@ -456,40 +502,75 @@ body.light .tree-conditional .file-name {
 }
 .preview-title .file-path {
   font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--text-tertiary);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.preview-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  max-width: 90ch;
+  margin: 0 0 8px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  cursor: default;
+}
+.preview-desc.expanded {
+  -webkit-line-clamp: unset;
+}
 .preview-badges {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
+  align-items: center;
 }
 .preview-imports {
   display: flex;
-  gap: 8px;
+  gap: 6px;
   flex-wrap: wrap;
-  margin-top: 6px;
+  margin-top: 8px;
+}
+.preview-imports .import-link {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 9px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-text);
+  text-decoration: none;
+}
+.preview-imports .import-link:hover {
+  border-color: var(--accent);
+  text-decoration: none;
+}
+.preview-imports .import-link.unresolved {
+  background: transparent;
+  border-style: dashed;
 }
 .preview-filepath {
-  padding: 5px 16px;
+  margin-top: 8px;
   font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--text-tertiary);
-  background: var(--bg-deep);
-  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--text-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .preview-code {
   font-family: var(--font-mono);
-  font-size: 13px;
+  font-size: 14px;
   line-height: 1.6;
   color: var(--text-primary);
-  white-space: pre-wrap;
-  word-break: break-word;
+  /* pre (not pre-wrap): keeps markdown tables and code aligned; long lines scroll horizontally */
+  white-space: pre;
   padding: 12px 16px;
   margin: 0;
   overflow: auto;
@@ -510,6 +591,17 @@ body.light .tree-conditional .file-name {
   color: var(--text-muted);
   opacity: 0.6;
 }
+.hl-fm-block {
+  display: inline-block;
+  min-width: 100%;
+  width: max-content;
+  padding: 4px 10px;
+  margin-bottom: 16px;
+  background: var(--bg-elevated);
+  border-left: 2px solid var(--accent);
+  border-radius: 0 4px 4px 0;
+  opacity: 0.85;
+}
 .import-link {
   color: var(--accent);
   cursor: pointer;
@@ -620,6 +712,10 @@ body.light .tree-conditional .file-name {
   background: rgba(168, 155, 196, 0.18);
   color: var(--scope-rule);
 }
+.scope-skill {
+  background: rgba(122, 155, 196, 0.18);
+  color: var(--scope-skill);
+}
 .scope-memory {
   background: rgba(196, 149, 106, 0.18);
   color: var(--scope-memory);
@@ -642,13 +738,21 @@ body.light .tree-conditional .file-name {
 }
 .tag-badge {
   display: inline-block;
-  font-size: 9px;
-  padding: 1px 5px;
+  font-size: 10px;
+  padding: 1px 6px;
   background: var(--bg-elevated);
+  border: 1px solid var(--border);
   border-radius: 3px;
   color: var(--text-tertiary);
   font-family: var(--font-mono);
 }
+.tag-badge .tag-k {
+  color: var(--text-muted);
+  margin-right: 5px;
+}
+.tag-badge .tag-k::after {
+  content: ':';
+}
 /* #endregion BADGES */
 
 /* #region SUMMARY_BAR */
@@ -695,11 +799,15 @@ body.light .tree-conditional .file-name {
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 8px;
+  box-shadow: var(--shadow-2);
   width: 440px;
   max-width: 90vw;
   max-height: 80vh;
   overflow-y: auto;
 }
+.modal.modal-wide {
+  width: 1140px;
+}
 .modal-header {
   display: flex;
   align-items: center;
@@ -785,17 +893,29 @@ body.light .tree-conditional .file-name {
 .modal-close-btn:hover {
   background: var(--bg-hover);
 }
+/* matches the marketplace app's action-btn look */
 .action-btn {
-  padding: 6px 14px;
+  padding: 4px 10px;
   border-radius: 4px;
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
   border: 1px solid var(--border);
   background: var(--bg-elevated);
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 12px;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 .action-btn:hover {
-  background: var(--bg-hover);
+  border-color: var(--accent);
+  color: var(--text-secondary);
+}
+.action-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
 }
 .action-btn.primary {
   background: var(--accent);
@@ -806,12 +926,10 @@ body.light .tree-conditional .file-name {
   filter: brightness(1.1);
 }
 .action-btn.danger {
-  background: var(--error);
-  border-color: var(--error);
-  color: #fff;
+  color: var(--error);
 }
 .action-btn.danger:hover {
-  filter: brightness(1.1);
+  border-color: var(--error);
 }
 .modal-filepath {
   font-family: 'IBM Plex Mono', monospace;
@@ -823,6 +941,7 @@ body.light .tree-conditional .file-name {
   padding: 6px 8px;
   margin: 8px 0 12px;
   word-break: break-all;
+  box-shadow: var(--shadow-inset);
 }
 .preview-actions {
   margin-left: auto;
@@ -857,13 +976,18 @@ body.light .tree-conditional .file-name {
   padding-right: 12px;
 }
 kbd {
-  background: var(--bg-elevated);
+  background: var(--bg-hover);
   border: 1px solid var(--border);
-  border-radius: 3px;
-  padding: 1px 5px;
+  border-radius: 4px;
+  padding: 2px 6px;
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 11px;
   color: var(--text-secondary);
+  white-space: nowrap;
+}
+.topbar-btn kbd {
+  font-size: 10px;
+  line-height: 1;
 }
 .recent-projects-label {
   font-size: 11px;
@@ -939,6 +1063,7 @@ kbd {
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: 6px;
+  box-shadow: var(--shadow-2);
   padding: 8px 14px;
   font-size: 12px;
   color: var(--text-secondary);
@@ -967,9 +1092,10 @@ kbd {
 
 /* #region LIGHT_THEME */
 body.light {
+  color-scheme: light;
   --bg-deep: #e8e6e3;
   --bg-surface: #efede9;
-  --bg-elevated: #fbfaf9;
+  --bg-elevated: #f7f4f0;
   --bg-hover: #d2d0cc;
   --border: #cfcbc4;
   --text-primary: #0a0a0a;
@@ -980,6 +1106,9 @@ body.light {
   --accent-dim: rgba(232, 111, 51, 0.18);
   --accent-glow: rgba(232, 111, 51, 0.5);
   --success: #1a8a5a;
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
+  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 /* #endregion LIGHT_THEME */
 
@@ -1007,3 +1136,854 @@ body.light {
   }
 }
 /* #endregion RESPONSIVE */
+
+/* #region ANALYZER */
+.analysis-box {
+  margin: 12px 16px 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-surface);
+  padding: 12px 14px;
+  font-family: var(--font-mono);
+  box-shadow: var(--shadow-1);
+}
+.analysis-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.analysis-title {
+  font-family: var(--font-serif);
+  font-size: 15px;
+  color: var(--text-primary);
+}
+.analysis-meta {
+  flex: 1;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.analysis-summary {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.analysis-empty {
+  margin-top: 10px;
+  font-size: 12px;
+  color: var(--success);
+}
+.analysis-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.analysis-status-error {
+  color: var(--error);
+}
+.analysis-stalled {
+  color: var(--text-muted);
+  font-style: italic;
+}
+.analysis-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  flex-shrink: 0;
+  animation: spin 0.9s linear infinite;
+}
+.analysis-card {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-1);
+  overflow: hidden;
+  transition:
+    opacity 0.25s,
+    transform 0.25s,
+    max-height 0.3s,
+    margin 0.3s,
+    padding 0.3s,
+    border-color 0.15s;
+}
+.analysis-card:hover {
+  border-color: var(--accent-dim);
+}
+.analysis-card.leaving {
+  opacity: 0;
+  transform: translateX(24px);
+  max-height: 0;
+  margin-top: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-width: 0;
+}
+/* severity marker: same dot language as the filter pills and dashboard tiles */
+.analysis-card-head::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--text-tertiary);
+}
+.analysis-card.sev-high .analysis-card-head::before {
+  background: var(--error);
+}
+.analysis-card.sev-med .analysis-card-head::before {
+  background: var(--warning);
+}
+.analysis-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.analysis-card-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.analysis-card-detail {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.analysis-card-suggestion {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--accent-text);
+  line-height: 1.5;
+}
+.analysis-card-suggestion::before {
+  content: 'fix: ';
+  color: var(--text-muted);
+}
+.analysis-card-files {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.kind-badge {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--bg-hover);
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+.kind-badge.kind-contradiction,
+.kind-badge.kind-invalidate {
+  background: var(--error-dim);
+  color: var(--error);
+}
+.kind-badge.kind-duplicate,
+.kind-badge.kind-merge {
+  background: var(--warning-dim);
+  color: var(--warning);
+}
+.kind-badge.kind-promote {
+  background: var(--success-dim);
+  color: var(--success);
+}
+.analysis-card-title {
+  flex: 1;
+}
+.action-btn.primary {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+.action-btn.primary:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* per-card actions — appear on hover */
+.card-actions {
+  display: flex;
+  gap: 6px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+.analysis-card:hover .card-actions {
+  opacity: 1;
+}
+.card-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 2px 8px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.card-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+.card-btn svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* file chips — under the title, scope-tagged */
+.file-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 9px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--accent-text);
+  text-decoration: none;
+}
+.file-chip svg {
+  width: 10px;
+  height: 10px;
+  opacity: 0.7;
+}
+a.file-chip:hover {
+  border-color: var(--accent);
+}
+.file-chip .fscope {
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.85;
+}
+.file-chip .fscope-memory {
+  color: var(--scope-memory);
+}
+.file-chip .fscope-skill {
+  color: var(--scope-skill);
+}
+.file-chip .fscope-agent {
+  color: var(--scope-agent-memory);
+}
+.file-chip .fscope-user {
+  color: var(--scope-user);
+}
+.file-chip .fscope-project {
+  color: var(--scope-project);
+}
+.file-chip .fscope-local {
+  color: var(--scope-local);
+}
+.no-files {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* severity filter strip */
+.runs-strip {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+.runs-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin-right: 2px;
+}
+.run-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 3px 10px;
+  border-radius: 5px;
+  border: 1px solid var(--border);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  background: var(--bg-elevated);
+  user-select: none;
+}
+.run-chip:hover {
+  border-color: var(--accent);
+  color: var(--text-primary);
+}
+.run-chip-x {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1;
+  padding: 0;
+  margin-right: -4px;
+  cursor: pointer;
+}
+.run-chip-x:hover {
+  color: var(--error);
+}
+.run-chip.active {
+  border-color: var(--accent);
+  color: var(--accent-text);
+  background: var(--accent-dim);
+}
+/* user-scope runs are shared across projects — tint the chip to set them apart */
+.run-chip-user {
+  border-color: rgba(192, 128, 80, 0.45);
+}
+.run-chip-user.active {
+  border-color: var(--scope-user);
+  color: var(--scope-user);
+  background: rgba(192, 128, 80, 0.12);
+}
+.sev-strip {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.sev-pill {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 2px 10px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  color: var(--text-tertiary);
+  cursor: pointer;
+  background: var(--bg-elevated);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.sev-pill .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+.sev-pill[data-sev='high'] .dot {
+  background: var(--error);
+}
+.sev-pill[data-sev='med'] .dot {
+  background: var(--warning);
+}
+.sev-pill[data-sev='low'] .dot {
+  background: var(--text-muted);
+}
+.sev-pill.active {
+  border-color: var(--accent);
+  color: var(--text-primary);
+  background: var(--accent-dim);
+}
+.sev-pill:hover {
+  border-color: var(--accent);
+}
+.dismissed-note {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.dismissed-note a {
+  color: var(--accent-text);
+  cursor: pointer;
+  text-decoration: none;
+}
+.dismissed-note a:hover {
+  text-decoration: underline;
+}
+
+/* scope picker */
+.scope-panel {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 14px;
+  margin-top: 10px;
+  box-shadow: var(--shadow-1);
+}
+.scope-panel-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+.scope-tree {
+  font-size: 12px;
+}
+.scope-group {
+  margin-bottom: 6px;
+}
+.scope-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 4px;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+}
+.scope-row:hover {
+  background: var(--bg-hover);
+}
+.scope-row input {
+  accent-color: var(--accent);
+  cursor: pointer;
+  pointer-events: none;
+}
+.scope-tag {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 0 6px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.scope-tag.t-memory {
+  background: rgba(196, 160, 106, 0.18);
+  color: var(--scope-memory);
+}
+.scope-tag.t-skill {
+  background: rgba(122, 155, 196, 0.18);
+  color: var(--scope-skill);
+}
+.scope-tag.t-agent {
+  background: rgba(138, 168, 163, 0.18);
+  color: var(--scope-agent-memory);
+}
+.scope-tag.t-claudemd {
+  background: rgba(122, 181, 160, 0.18);
+  color: var(--scope-project);
+}
+.scope-tag.t-user {
+  background: rgba(192, 128, 80, 0.18);
+  color: var(--scope-user);
+}
+.scope-tag.t-cross {
+  background: rgba(155, 130, 190, 0.18);
+  color: var(--scope-rule);
+}
+.scope-meta {
+  color: var(--text-muted);
+  font-size: 10px;
+  margin-left: auto;
+}
+.scope-children {
+  margin-left: 26px;
+  border-left: 1px solid var(--border);
+  padding-left: 10px;
+}
+.scope-caret {
+  width: 14px;
+  text-align: center;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.scope-group.collapsed .scope-children {
+  display: none;
+}
+/* keep the footer (count + model + run) visible: the tree scrolls, not the modal */
+.scope-tree {
+  max-height: 48vh;
+  overflow-y: auto;
+}
+.scope-footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+.scope-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex: 1;
+}
+/* segmented model toggle — a native <select> popup ignores the page theme on
+   some platforms, so the options are plain buttons */
+.scope-model {
+  display: inline-flex;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.scope-model-opt {
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  border-right: 1px solid var(--border);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+.scope-model-opt:last-child {
+  border-right: none;
+}
+.scope-model-opt:hover {
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+.scope-model-opt.active {
+  background: var(--bg-tertiary);
+  color: var(--accent);
+}
+/* #endregion ANALYZER */
+
+/* #region HEALTH */
+.topbar-btn.active {
+  border-color: var(--accent);
+  color: var(--accent-text);
+  background: var(--accent-dim);
+}
+.health-view {
+  padding: 4px 0 24px;
+}
+
+/* tree annotations — counts from the latest run */
+.tree-health {
+  flex-shrink: 0;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  line-height: 1;
+  min-width: 16px;
+  padding: 2px 5px;
+  border-radius: 9px;
+  text-align: center;
+}
+.tree-health.th-high {
+  background: var(--error-dim);
+  color: var(--error);
+}
+.tree-health.th-med {
+  background: var(--warning-dim);
+  color: var(--warning);
+}
+.tree-health.th-low {
+  background: var(--bg-hover);
+  color: var(--text-tertiary);
+}
+.tree-health.th-clean {
+  min-width: 0;
+  width: 7px;
+  height: 7px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid var(--success);
+  opacity: 0.7;
+}
+
+/* dashboard tiles */
+.hv-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+}
+.hv-tile {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-1);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.hv-tile.hv-ring-tile {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+.hv-ring {
+  position: relative;
+  width: 68px;
+  height: 68px;
+  flex-shrink: 0;
+}
+.hv-ring svg {
+  width: 100%;
+  height: 100%;
+}
+.hv-ring-val {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 19px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+}
+.hv-tile-txt {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.hv-lbl {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  color: var(--text-tertiary);
+}
+.hv-lbl .dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.dot.sev-dot-high {
+  background: var(--error);
+}
+.dot.sev-dot-med {
+  background: var(--warning);
+}
+.dot.sev-dot-low {
+  background: var(--text-muted);
+}
+.hv-sub {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hv-num {
+  font-size: 26px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  line-height: 1.1;
+}
+.hv-num i {
+  font-style: normal;
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+.hv-num-high {
+  color: var(--error);
+}
+.hv-num-med {
+  color: var(--warning);
+}
+.hv-num-low {
+  color: var(--text-tertiary);
+}
+.hv-num-clean {
+  color: var(--success);
+}
+
+/* run trend — stacked mini-columns, oldest → newest */
+.hv-trend-tile {
+  min-width: 120px;
+}
+.hv-trend {
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
+  height: 44px;
+  margin-top: auto;
+}
+.hv-trun {
+  display: flex;
+  flex-direction: column-reverse;
+  width: 16px;
+  cursor: pointer;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+  opacity: 0.75;
+}
+.hv-trun:hover,
+.hv-trun.cur {
+  opacity: 1;
+}
+.hv-trun.cur {
+  outline: 1px solid var(--accent);
+  outline-offset: 1px;
+}
+.hv-trun i {
+  display: block;
+}
+.hv-trun .th {
+  background: var(--error);
+}
+.hv-trun .tm {
+  background: var(--warning);
+}
+.hv-trun .tl {
+  background: var(--text-muted);
+}
+.hv-trun .tz {
+  height: 3px;
+  background: var(--success);
+}
+
+/* memory map — audited files sized by lines, colored by worst finding */
+/* filled section bar — mirrors the marketplace detail-panel component headers */
+.hv-map-label {
+  margin-top: 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  color: var(--text-tertiary);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.hv-map {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 6px;
+  margin-top: 10px;
+}
+.hv-cell {
+  position: relative;
+  min-height: 56px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-1);
+  padding: 8px 30px 8px 10px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+  transition: filter 0.15s;
+}
+.hv-cell:hover {
+  filter: brightness(1.25);
+}
+.hv-cell.active {
+  outline: 1px solid var(--accent);
+  outline-offset: 1px;
+}
+.hv-cell.hv-clean {
+  background: var(--bg-elevated);
+}
+.hv-cell.hv-low {
+  background: var(--bg-hover);
+}
+.hv-cell.hv-med {
+  background: var(--warning-dim);
+  border-color: var(--warning);
+}
+.hv-cell.hv-high {
+  background: var(--error-dim);
+  border-color: var(--error);
+}
+.hv-cell-name {
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hv-cell-meta {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+}
+.hv-cell-n {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  min-width: 16px;
+  text-align: center;
+  padding: 2px 4px;
+  border-radius: 8px;
+  background: var(--bg-deep);
+}
+.hv-cn-high {
+  color: var(--error);
+}
+.hv-cn-med {
+  color: var(--warning);
+}
+.hv-cn-low {
+  color: var(--text-tertiary);
+}
+
+/* per-file findings inside the file preview — compact rows, click to expand */
+.preview-findings {
+  margin: 12px 16px 0;
+  max-width: 50%;
+  min-width: 420px;
+}
+.pf-card {
+  margin-top: 6px;
+  padding: 6px 10px;
+}
+.pf-card .analysis-card-head {
+  cursor: pointer;
+}
+.pf-card:not(.expanded) .analysis-card-detail,
+.pf-card:not(.expanded) .analysis-card-suggestion {
+  display: none;
+}
+.pf-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+
+/* fix queue */
+.fix-check {
+  accent-color: var(--accent);
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  cursor: pointer;
+  margin: 0;
+}
+.fix-plan-btn {
+  border-color: var(--accent);
+  color: var(--accent-text);
+  background: var(--accent-dim);
+}
+/* #endregion HEALTH */