@industry-theme/file-city-panel 0.2.11 → 0.2.13

package/dist/panels.bundle.js

@@ -106,7 +106,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$5 = [
   [
     "path",
     {
@@ -115,14 +115,14 @@ const __iconNode$6 = [
     }
   ]
 ];
-const Activity = createLucideIcon("activity", __iconNode$6);
+const Activity = createLucideIcon("activity", __iconNode$5);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$4 = [
   ["path", { d: "M10 12h4", key: "a56b0p" }],
   ["path", { d: "M10 8h4", key: "1sr2af" }],
   ["path", { d: "M14 21v-3a2 2 0 0 0-4 0v3", key: "1rgiei" }],
@@ -135,28 +135,20 @@ const __iconNode$5 = [
   ],
   ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$5);
+const Building2 = createLucideIcon("building-2", __iconNode$4);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$3 = [
   ["path", { d: "M3 3v16a2 2 0 0 0 2 2h16", key: "c24i48" }],
   ["path", { d: "M18 17V9", key: "2bz60n" }],
   ["path", { d: "M13 17V5", key: "1frdt8" }],
   ["path", { d: "M8 17v-3", key: "17ska0" }]
 ];
-const ChartColumn = createLucideIcon("chart-column", __iconNode$4);
-/**
- * @license lucide-react v0.552.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$3 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$3);
+const ChartColumn = createLucideIcon("chart-column", __iconNode$3);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -14280,18 +14272,12 @@ function normalizePath(path) {
 function createCoverageHighlightLayers(buildings, fileCoverage) {
   const buildingsByPath = new Map(buildings.map((b) => [b.path, b]));
   const layerGroups = {
-    high: [],
-    // 80-100%
-    medium: [],
-    // 50-79%
-    low: [],
-    // 20-49%
-    veryLow: [],
-    // 1-19%
-    zero: [],
-    // 0%
+    covered: [],
+    // > 0% coverage - green
+    uncovered: [],
+    // 0% coverage - red
     noData: []
-    // No coverage data
+    // No coverage data (not applicable) - gray
   };
   for (const [path, building] of buildingsByPath) {
     const normalizedPath = normalizePath(path);
@@ -14302,32 +14288,201 @@ function createCoverageHighlightLayers(buildings, fileCoverage) {
         type: "file",
         renderStrategy: "fill"
       });
-    } else if (coverage >= 80) {
-      layerGroups.high.push({
+    } else if (coverage > 0) {
+      layerGroups.covered.push({
         path: building.path,
         type: "file",
         renderStrategy: "fill"
       });
-    } else if (coverage >= 50) {
-      layerGroups.medium.push({
+    } else {
+      layerGroups.uncovered.push({
+        path: building.path,
+        type: "file",
+        renderStrategy: "fill"
+      });
+    }
+  }
+  const layers = [];
+  if (layerGroups.covered.length > 0) {
+    layers.push({
+      id: "coverage-covered",
+      name: "Covered",
+      enabled: true,
+      color: "#22c55e",
+      // green
+      priority: 50,
+      items: layerGroups.covered
+    });
+  }
+  if (layerGroups.uncovered.length > 0) {
+    layers.push({
+      id: "coverage-uncovered",
+      name: "Not covered",
+      enabled: true,
+      color: "#ef4444",
+      // red
+      priority: 50,
+      items: layerGroups.uncovered
+    });
+  }
+  if (layerGroups.noData.length > 0) {
+    layers.push({
+      id: "coverage-nodata",
+      name: "No data",
+      enabled: true,
+      color: "#6b7280",
+      // gray
+      priority: 40,
+      items: layerGroups.noData
+    });
+  }
+  return layers;
+}
+function createEslintHighlightLayers(buildings, eslintMetrics) {
+  const buildingsByPath = new Map(buildings.map((b) => [b.path, b]));
+  const metricsByPath = new Map(eslintMetrics.map((m) => [normalizePath(m.file), m]));
+  const layerGroups = {
+    clean: [],
+    // 0 issues - green
+    minor: [],
+    // 1-3 issues - orange
+    moderate: [],
+    // 4-10 issues - orange-red
+    significant: [],
+    // 11-25 issues - red
+    severe: [],
+    // 26+ issues - dark red
+    noData: []
+    // No metric data
+  };
+  for (const [path, building] of buildingsByPath) {
+    const normalizedPath = normalizePath(path);
+    const metric = metricsByPath.get(normalizedPath);
+    if (!metric) {
+      layerGroups.noData.push({
         path: building.path,
         type: "file",
         renderStrategy: "fill"
       });
-    } else if (coverage >= 20) {
-      layerGroups.low.push({
+    } else {
+      const issues = metric.issueCount;
+      let bucket;
+      if (issues === 0) bucket = "clean";
+      else if (issues <= 3) bucket = "minor";
+      else if (issues <= 10) bucket = "moderate";
+      else if (issues <= 25) bucket = "significant";
+      else bucket = "severe";
+      layerGroups[bucket].push({
         path: building.path,
         type: "file",
         renderStrategy: "fill"
       });
-    } else if (coverage > 0) {
-      layerGroups.veryLow.push({
+    }
+  }
+  const layers = [];
+  if (layerGroups.clean.length > 0) {
+    layers.push({
+      id: "eslint-clean",
+      name: "0 issues",
+      enabled: true,
+      color: "#22c55e",
+      // green - only for no lint issues
+      priority: 50,
+      items: layerGroups.clean
+    });
+  }
+  if (layerGroups.minor.length > 0) {
+    layers.push({
+      id: "eslint-minor",
+      name: "1-3 issues",
+      enabled: true,
+      color: "#f97316",
+      // orange
+      priority: 50,
+      items: layerGroups.minor
+    });
+  }
+  if (layerGroups.moderate.length > 0) {
+    layers.push({
+      id: "eslint-moderate",
+      name: "4-10 issues",
+      enabled: true,
+      color: "#ea580c",
+      // orange-600 (darker orange)
+      priority: 50,
+      items: layerGroups.moderate
+    });
+  }
+  if (layerGroups.significant.length > 0) {
+    layers.push({
+      id: "eslint-significant",
+      name: "11-25 issues",
+      enabled: true,
+      color: "#ef4444",
+      // red
+      priority: 50,
+      items: layerGroups.significant
+    });
+  }
+  if (layerGroups.severe.length > 0) {
+    layers.push({
+      id: "eslint-severe",
+      name: "26+ issues",
+      enabled: true,
+      color: "#991b1b",
+      // dark red
+      priority: 50,
+      items: layerGroups.severe
+    });
+  }
+  if (layerGroups.noData.length > 0) {
+    layers.push({
+      id: "eslint-nodata",
+      name: "No data",
+      enabled: true,
+      color: "#6b7280",
+      // gray
+      priority: 40,
+      items: layerGroups.noData
+    });
+  }
+  return layers;
+}
+function createTypescriptHighlightLayers(buildings, typescriptMetrics) {
+  const buildingsByPath = new Map(buildings.map((b) => [b.path, b]));
+  const metricsByPath = new Map(typescriptMetrics.map((m) => [normalizePath(m.file), m]));
+  const layerGroups = {
+    clean: [],
+    // 0 issues - green
+    minor: [],
+    // 1-3 issues - orange
+    moderate: [],
+    // 4-10 issues - orange-red
+    significant: [],
+    // 11-25 issues - red
+    severe: [],
+    // 26+ issues - dark red
+    noData: []
+    // No metric data
+  };
+  for (const [path, building] of buildingsByPath) {
+    const normalizedPath = normalizePath(path);
+    const metric = metricsByPath.get(normalizedPath);
+    if (!metric) {
+      layerGroups.noData.push({
         path: building.path,
         type: "file",
         renderStrategy: "fill"
       });
     } else {
-      layerGroups.zero.push({
+      const issues = metric.issueCount;
+      let bucket;
+      if (issues === 0) bucket = "clean";
+      else if (issues <= 3) bucket = "minor";
+      else if (issues <= 10) bucket = "moderate";
+      else if (issues <= 25) bucket = "significant";
+      else bucket = "severe";
+      layerGroups[bucket].push({
         path: building.path,
         type: "file",
         renderStrategy: "fill"
@@ -14335,82 +14490,88 @@ function createCoverageHighlightLayers(buildings, fileCoverage) {
     }
   }
   const layers = [];
-  if (layerGroups.high.length > 0) {
+  if (layerGroups.clean.length > 0) {
     layers.push({
-      id: "coverage-high",
-      name: "80-100%",
+      id: "typescript-clean",
+      name: "0 errors",
       enabled: true,
       color: "#22c55e",
+      // green - only for no type errors
       priority: 50,
-      items: layerGroups.high
+      items: layerGroups.clean
     });
   }
-  if (layerGroups.medium.length > 0) {
+  if (layerGroups.minor.length > 0) {
     layers.push({
-      id: "coverage-medium",
-      name: "50-79%",
+      id: "typescript-minor",
+      name: "1-3 errors",
       enabled: true,
-      color: "#eab308",
+      color: "#f97316",
+      // orange
       priority: 50,
-      items: layerGroups.medium
+      items: layerGroups.minor
     });
   }
-  if (layerGroups.low.length > 0) {
+  if (layerGroups.moderate.length > 0) {
     layers.push({
-      id: "coverage-low",
-      name: "20-49%",
+      id: "typescript-moderate",
+      name: "4-10 errors",
       enabled: true,
-      color: "#f97316",
+      color: "#ea580c",
+      // orange-600 (darker orange)
       priority: 50,
-      items: layerGroups.low
+      items: layerGroups.moderate
     });
   }
-  if (layerGroups.veryLow.length > 0) {
+  if (layerGroups.significant.length > 0) {
     layers.push({
-      id: "coverage-verylow",
-      name: "1-19%",
+      id: "typescript-significant",
+      name: "11-25 errors",
       enabled: true,
       color: "#ef4444",
+      // red
       priority: 50,
-      items: layerGroups.veryLow
+      items: layerGroups.significant
     });
   }
-  if (layerGroups.zero.length > 0) {
+  if (layerGroups.severe.length > 0) {
     layers.push({
-      id: "coverage-zero",
-      name: "0%",
+      id: "typescript-severe",
+      name: "26+ errors",
       enabled: true,
       color: "#991b1b",
+      // dark red
       priority: 50,
-      items: layerGroups.zero
+      items: layerGroups.severe
     });
   }
   if (layerGroups.noData.length > 0) {
     layers.push({
-      id: "coverage-nodata",
+      id: "typescript-nodata",
       name: "No data",
       enabled: true,
       color: "#6b7280",
+      // gray
       priority: 40,
       items: layerGroups.noData
     });
   }
   return layers;
 }
-function createMetricHighlightLayers(buildings, metrics, metricId, _metricName) {
+function createPrettierHighlightLayers(buildings, prettierMetrics) {
   const buildingsByPath = new Map(buildings.map((b) => [b.path, b]));
-  const metricsByPath = new Map(metrics.map((m) => [normalizePath(m.file), m]));
+  const metricsByPath = new Map(prettierMetrics.map((m) => [normalizePath(m.file), m]));
   const layerGroups = {
     clean: [],
-    // 0 issues
+    // 0 issues - green
     minor: [],
-    // 1-3 issues
+    // 1-3 issues - orange
     moderate: [],
-    // 4-10 issues
+    // 4-10 issues - orange-red
     significant: [],
-    // 11-25 issues
+    // 11-25 issues - red
     severe: [],
-    // 26+ issues
+    // 26+ issues - dark red
     noData: []
     // No metric data
   };
@@ -14441,80 +14602,251 @@ function createMetricHighlightLayers(buildings, metrics, metricId, _metricName)
   const layers = [];
   if (layerGroups.clean.length > 0) {
     layers.push({
-      id: `${metricId}-clean`,
+      id: "prettier-clean",
       name: "0 issues",
       enabled: true,
       color: "#22c55e",
+      // green - only for perfect formatting
       priority: 50,
       items: layerGroups.clean
     });
   }
   if (layerGroups.minor.length > 0) {
     layers.push({
-      id: `${metricId}-minor`,
+      id: "prettier-minor",
       name: "1-3 issues",
       enabled: true,
-      color: "#84cc16",
+      color: "#f97316",
+      // orange
       priority: 50,
       items: layerGroups.minor
     });
   }
   if (layerGroups.moderate.length > 0) {
     layers.push({
-      id: `${metricId}-moderate`,
+      id: "prettier-moderate",
       name: "4-10 issues",
       enabled: true,
-      color: "#eab308",
+      color: "#ea580c",
+      // orange-600 (darker orange)
       priority: 50,
       items: layerGroups.moderate
     });
   }
   if (layerGroups.significant.length > 0) {
     layers.push({
-      id: `${metricId}-significant`,
+      id: "prettier-significant",
       name: "11-25 issues",
       enabled: true,
-      color: "#f97316",
+      color: "#ef4444",
+      // red
       priority: 50,
       items: layerGroups.significant
     });
   }
   if (layerGroups.severe.length > 0) {
     layers.push({
-      id: `${metricId}-severe`,
+      id: "prettier-severe",
       name: "26+ issues",
       enabled: true,
-      color: "#ef4444",
+      color: "#991b1b",
+      // dark red
       priority: 50,
       items: layerGroups.severe
     });
   }
   if (layerGroups.noData.length > 0) {
     layers.push({
-      id: `${metricId}-nodata`,
+      id: "prettier-nodata",
       name: "No data",
       enabled: true,
       color: "#6b7280",
+      // gray
       priority: 40,
       items: layerGroups.noData
     });
   }
   return layers;
 }
-function createEslintHighlightLayers(buildings, eslintMetrics) {
-  return createMetricHighlightLayers(buildings, eslintMetrics, "eslint");
-}
-function createTypescriptHighlightLayers(buildings, typescriptMetrics) {
-  return createMetricHighlightLayers(buildings, typescriptMetrics, "typescript");
-}
-function createPrettierHighlightLayers(buildings, prettierMetrics) {
-  return createMetricHighlightLayers(buildings, prettierMetrics, "prettier");
-}
 function createKnipHighlightLayers(buildings, knipMetrics) {
-  return createMetricHighlightLayers(buildings, knipMetrics, "knip");
+  const buildingsByPath = new Map(buildings.map((b) => [b.path, b]));
+  const metricsByPath = new Map(knipMetrics.map((m) => [normalizePath(m.file), m]));
+  const layerGroups = {
+    clean: [],
+    // 0 issues - green
+    minor: [],
+    // 1-3 issues - orange
+    moderate: [],
+    // 4-10 issues - orange-red
+    significant: [],
+    // 11-25 issues - red
+    severe: [],
+    // 26+ issues - dark red
+    noData: []
+    // No metric data
+  };
+  for (const [path, building] of buildingsByPath) {
+    const normalizedPath = normalizePath(path);
+    const metric = metricsByPath.get(normalizedPath);
+    if (!metric) {
+      layerGroups.noData.push({
+        path: building.path,
+        type: "file",
+        renderStrategy: "fill"
+      });
+    } else {
+      const issues = metric.issueCount;
+      let bucket;
+      if (issues === 0) bucket = "clean";
+      else if (issues <= 3) bucket = "minor";
+      else if (issues <= 10) bucket = "moderate";
+      else if (issues <= 25) bucket = "significant";
+      else bucket = "severe";
+      layerGroups[bucket].push({
+        path: building.path,
+        type: "file",
+        renderStrategy: "fill"
+      });
+    }
+  }
+  const layers = [];
+  if (layerGroups.clean.length > 0) {
+    layers.push({
+      id: "knip-clean",
+      name: "0 unused",
+      enabled: true,
+      color: "#22c55e",
+      // green - only for no dead code
+      priority: 50,
+      items: layerGroups.clean
+    });
+  }
+  if (layerGroups.minor.length > 0) {
+    layers.push({
+      id: "knip-minor",
+      name: "1-3 unused",
+      enabled: true,
+      color: "#f97316",
+      // orange
+      priority: 50,
+      items: layerGroups.minor
+    });
+  }
+  if (layerGroups.moderate.length > 0) {
+    layers.push({
+      id: "knip-moderate",
+      name: "4-10 unused",
+      enabled: true,
+      color: "#ea580c",
+      // orange-600 (darker orange)
+      priority: 50,
+      items: layerGroups.moderate
+    });
+  }
+  if (layerGroups.significant.length > 0) {
+    layers.push({
+      id: "knip-significant",
+      name: "11-25 unused",
+      enabled: true,
+      color: "#ef4444",
+      // red
+      priority: 50,
+      items: layerGroups.significant
+    });
+  }
+  if (layerGroups.severe.length > 0) {
+    layers.push({
+      id: "knip-severe",
+      name: "26+ unused",
+      enabled: true,
+      color: "#991b1b",
+      // dark red
+      priority: 50,
+      items: layerGroups.severe
+    });
+  }
+  if (layerGroups.noData.length > 0) {
+    layers.push({
+      id: "knip-nodata",
+      name: "No data",
+      enabled: true,
+      color: "#6b7280",
+      // gray
+      priority: 40,
+      items: layerGroups.noData
+    });
+  }
+  return layers;
 }
 function createAlexandriaHighlightLayers(buildings, alexandriaMetrics) {
-  return createMetricHighlightLayers(buildings, alexandriaMetrics, "alexandria");
+  const buildingsByPath = new Map(buildings.map((b) => [b.path, b]));
+  const metricsByPath = new Map(alexandriaMetrics.map((m) => [normalizePath(m.file), m]));
+  const layerGroups = {
+    documented: [],
+    // 0 issues - fully documented
+    needsDocs: [],
+    // > 0 issues - needs documentation
+    noData: []
+    // No data (not applicable)
+  };
+  for (const [path, building] of buildingsByPath) {
+    const normalizedPath = normalizePath(path);
+    const metric = metricsByPath.get(normalizedPath);
+    if (!metric) {
+      layerGroups.noData.push({
+        path: building.path,
+        type: "file",
+        renderStrategy: "fill"
+      });
+    } else if (metric.issueCount === 0) {
+      layerGroups.documented.push({
+        path: building.path,
+        type: "file",
+        renderStrategy: "fill"
+      });
+    } else {
+      layerGroups.needsDocs.push({
+        path: building.path,
+        type: "file",
+        renderStrategy: "fill"
+      });
+    }
+  }
+  const layers = [];
+  if (layerGroups.documented.length > 0) {
+    layers.push({
+      id: "alexandria-documented",
+      name: "Documented",
+      enabled: true,
+      color: "#22c55e",
+      // green
+      priority: 50,
+      items: layerGroups.documented
+    });
+  }
+  if (layerGroups.needsDocs.length > 0) {
+    layers.push({
+      id: "alexandria-needsdocs",
+      name: "Needs docs",
+      enabled: true,
+      color: "#ef4444",
+      // red
+      priority: 50,
+      items: layerGroups.needsDocs
+    });
+  }
+  if (layerGroups.noData.length > 0) {
+    layers.push({
+      id: "alexandria-nodata",
+      name: "No data",
+      enabled: true,
+      color: "#6b7280",
+      // gray
+      priority: 40,
+      items: layerGroups.noData
+    });
+  }
+  return layers;
 }
 function getLayersForColorMode(mode, buildings, qualityData, fileColorLayers, gitLayers) {
   var _a, _b, _c, _d, _e;
@@ -14582,9 +14914,8 @@ const CodeCityPanelContent = ({
   const [loading, setLoading] = useState(false);
   const [containerSize, setContainerSize] = useState(null);
   const contentContainerRef = useRef(null);
-  const [colorMode, setColorMode] = useState("fileTypes");
-  const [showColorModeDropdown, setShowColorModeDropdown] = useState(false);
-  const colorModeDropdownRef = useRef(null);
+  const sliceSelectedColorMode = (_b = (_a = context.getSlice("fileCityColorModes")) == null ? void 0 : _a.data) == null ? void 0 : _b.selectedColorMode;
+  const colorMode = sliceSelectedColorMode || "fileTypes";
   const [hoveredPackagePath, setHoveredPackagePath] = useState(null);
   const [selectedPackagePath, setSelectedPackagePath] = useState(null);
   useEffect(() => {
@@ -14625,12 +14956,12 @@ const CodeCityPanelContent = ({
   const gitSlice = context.getSlice("git");
   const agentHighlightLayersSlice = context.getSlice("agentHighlightLayers");
   const colorModesSlice = context.getSlice("fileCityColorModes");
-  const qualityData = (_a = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _a.qualityData;
+  const qualityData = (_c = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _c.qualityData;
   const fileColorLayersRegistered = useRef(false);
   const gitLayersRegistered = useRef(false);
   const agentLayersRegistered = useRef(false);
   const lastHasGitOrAgentLayers = useRef(null);
-  const currentRepoPath = (_b = context.currentScope.repository) == null ? void 0 : _b.path;
+  const currentRepoPath = (_d = context.currentScope.repository) == null ? void 0 : _d.path;
   const lastRepoPath = useRef(currentRepoPath);
   useEffect(() => {
     if (lastRepoPath.current !== currentRepoPath) {
@@ -14640,20 +14971,8 @@ const CodeCityPanelContent = ({
       agentLayersRegistered.current = false;
       lastHasGitOrAgentLayers.current = null;
       lastRepoPath.current = currentRepoPath;
-      setColorMode("fileTypes");
     }
   }, [currentRepoPath]);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (colorModeDropdownRef.current && !colorModeDropdownRef.current.contains(event.target)) {
-        setShowColorModeDropdown(false);
-      }
-    };
-    if (showColorModeDropdown) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [showColorModeDropdown]);
   useEffect(() => {
     if (!events) return;
     const cleanupHover = events.on("package:hover", (event) => {
@@ -14669,30 +14988,6 @@ const CodeCityPanelContent = ({
       cleanupSelect == null ? void 0 : cleanupSelect();
     };
   }, [events]);
-  const sliceSelectedColorMode = (_c = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _c.selectedColorMode;
-  useEffect(() => {
-    if (sliceSelectedColorMode) {
-      setColorMode(sliceSelectedColorMode);
-    }
-  }, [sliceSelectedColorMode]);
-  const availableColorModes = useMemo(() => {
-    var _a2;
-    const hasGitData = (gitSlice == null ? void 0 : gitSlice.data) && (gitSlice.data.staged.length > 0 || gitSlice.data.unstaged.length > 0 || gitSlice.data.untracked.length > 0 || gitSlice.data.deleted.length > 0);
-    const enabledModes = (_a2 = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _a2.enabledModes;
-    return COLOR_MODES.filter((mode) => {
-      if (mode.id === "fileTypes") return true;
-      if (mode.id === "git") return hasGitData;
-      if (sliceSelectedColorMode === mode.id) return true;
-      return (enabledModes == null ? void 0 : enabledModes.includes(mode.id)) ?? false;
-    });
-  }, [gitSlice == null ? void 0 : gitSlice.data, (_d = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _d.enabledModes, qualityData, sliceSelectedColorMode]);
-  useEffect(() => {
-    const currentModeAvailable = availableColorModes.some((m) => m.id === colorMode);
-    const selectedModeAvailable = sliceSelectedColorMode && availableColorModes.some((m) => m.id === sliceSelectedColorMode);
-    if (!currentModeAvailable && !selectedModeAvailable) {
-      setColorMode("fileTypes");
-    }
-  }, [availableColorModes, colorMode, sliceSelectedColorMode]);
   const currentColorModeConfig = useMemo(() => {
     return COLOR_MODES.find((m) => m.id === colorMode) || COLOR_MODES[0];
   }, [colorMode]);
@@ -14907,30 +15202,39 @@ const CodeCityPanelContent = ({
     groupedByExt.forEach((group, ext) => {
       var _a2;
       if (group.primary) {
+        const highlightLayer = highlightLayers.find(
+          (l) => l.id === `ext-${ext}-primary` || l.id === `ext-${ext}-primary-package-focus`
+        );
+        const isEnabled = (highlightLayer == null ? void 0 : highlightLayer.enabled) ?? group.primary.enabled;
         fileTypes.push({
           id: ext,
           name: group.primary.name,
           fillColor: group.primary.color,
           borderColor: (_a2 = group.secondary) == null ? void 0 : _a2.color,
           count: group.primary.items.length,
-          enabled: group.primary.enabled
+          enabled: isEnabled
         });
       }
     });
     return fileTypes.sort((a, b) => b.count - a.count);
-  }, [baseLayers]);
+  }, [baseLayers, highlightLayers]);
   const legendGitStatus = useMemo(() => {
     const gitLayers = baseLayers.filter(
       (layer) => layer.id.startsWith("git-highlight-")
     );
-    return gitLayers.map((layer) => ({
-      id: layer.id,
-      name: layer.name,
-      color: layer.color,
-      count: layer.items.length,
-      enabled: layer.enabled
-    }));
-  }, [baseLayers]);
+    return gitLayers.map((layer) => {
+      const highlightLayer = highlightLayers.find(
+        (l) => l.id === layer.id || l.id === `${layer.id}-package-focus`
+      );
+      return {
+        id: layer.id,
+        name: layer.name,
+        color: layer.color,
+        count: layer.items.length,
+        enabled: (highlightLayer == null ? void 0 : highlightLayer.enabled) ?? layer.enabled
+      };
+    });
+  }, [baseLayers, highlightLayers]);
   const legendAgentLayers = useMemo(() => {
     const agentLayers = highlightLayers.filter(
       (layer) => layer.id.startsWith("event-highlight")
@@ -14961,33 +15265,54 @@ const CodeCityPanelContent = ({
     const relevantLayers = baseLayers.filter(
       (layer) => layer.id.startsWith(prefix)
     );
-    return relevantLayers.map((layer) => ({
-      id: layer.id,
-      name: layer.name,
-      color: layer.color,
-      count: layer.items.length,
-      enabled: layer.enabled
-    }));
-  }, [baseLayers, colorMode]);
+    return relevantLayers.map((layer) => {
+      const highlightLayer = highlightLayers.find(
+        (l) => l.id === layer.id || l.id === `${layer.id}-package-focus`
+      );
+      return {
+        id: layer.id,
+        name: layer.name,
+        color: layer.color,
+        count: layer.items.length,
+        enabled: (highlightLayer == null ? void 0 : highlightLayer.enabled) ?? layer.enabled
+      };
+    });
+  }, [baseLayers, highlightLayers, colorMode]);
   const toggleGitStatus = useCallback((id2) => {
-    setHighlightLayers(
-      (prev) => prev.map((layer) => {
-        if (layer.id === id2) {
-          return { ...layer, enabled: !layer.enabled };
+    setHighlightLayers((prev) => {
+      const gitLayers = prev.filter((l) => l.id.startsWith("git-highlight-"));
+      const clickedLayer = gitLayers.find((l) => l.id === id2);
+      const otherGitLayers = gitLayers.filter((l) => l.id !== id2);
+      const isAlreadyIsolated = (clickedLayer == null ? void 0 : clickedLayer.enabled) && otherGitLayers.every((l) => !l.enabled);
+      return prev.map((layer) => {
+        if (!layer.id.startsWith("git-highlight-")) {
+          return layer;
         }
-        return layer;
-      })
-    );
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layer.id === id2 };
+        }
+      });
+    });
   }, []);
   const toggleAgentLayer = useCallback((id2) => {
-    setHighlightLayers(
-      (prev) => prev.map((layer) => {
-        if (layer.id === id2) {
-          return { ...layer, enabled: !layer.enabled };
+    setHighlightLayers((prev) => {
+      const agentLayers = prev.filter((l) => l.id.startsWith("event-highlight"));
+      const clickedLayer = agentLayers.find((l) => l.id === id2);
+      const otherAgentLayers = agentLayers.filter((l) => l.id !== id2);
+      const isAlreadyIsolated = (clickedLayer == null ? void 0 : clickedLayer.enabled) && otherAgentLayers.every((l) => !l.enabled);
+      return prev.map((layer) => {
+        if (!layer.id.startsWith("event-highlight")) {
+          return layer;
         }
-        return layer;
-      })
-    );
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layer.id === id2 };
+        }
+      });
+    });
   }, []);
   const clearAgentLayers = useCallback(() => {
     setHighlightLayers(
@@ -14996,24 +15321,52 @@ const CodeCityPanelContent = ({
     agentLayersRegistered.current = false;
   }, []);
   const toggleQualityMetric = useCallback((id2) => {
-    setHighlightLayers(
-      (prev) => prev.map((layer) => {
-        if (layer.id === id2) {
-          return { ...layer, enabled: !layer.enabled };
+    setHighlightLayers((prev) => {
+      const qualityPrefixes = ["coverage-", "eslint-", "typescript-", "prettier-", "knip-", "alexandria-"];
+      const isQualityLayer = (layerId) => qualityPrefixes.some((p) => layerId.startsWith(p));
+      const qualityLayers2 = prev.filter((l) => isQualityLayer(l.id));
+      const clickedLayer = qualityLayers2.find((l) => l.id === id2);
+      const otherQualityLayers = qualityLayers2.filter((l) => l.id !== id2);
+      const isAlreadyIsolated = (clickedLayer == null ? void 0 : clickedLayer.enabled) && otherQualityLayers.every((l) => !l.enabled);
+      return prev.map((layer) => {
+        if (!isQualityLayer(layer.id)) {
+          return layer;
         }
-        return layer;
-      })
-    );
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layer.id === id2 };
+        }
+      });
+    });
   }, []);
   const toggleFileType = useCallback((ext) => {
     setHighlightLayers((prev) => {
-      const primaryLayer = prev.find((l) => l.id === `ext-${ext}-primary`);
-      const newEnabled = primaryLayer ? !primaryLayer.enabled : true;
+      const isFileTypeLayer = (id2) => id2.startsWith("ext-") && (id2.endsWith("-primary") || id2.endsWith("-secondary"));
+      const fileTypeLayers = prev.filter((l) => isFileTypeLayer(l.id));
+      const extStates = /* @__PURE__ */ new Map();
+      fileTypeLayers.forEach((l) => {
+        const match = l.id.match(/^ext-(\w+)-(primary|secondary)$/);
+        if (match && match[2] === "primary") {
+          extStates.set(match[1], l.enabled);
+        }
+      });
+      const clickedEnabled = extStates.get(ext) ?? false;
+      const otherExts = Array.from(extStates.keys()).filter((e) => e !== ext);
+      const othersAllDisabled = otherExts.every((e) => !extStates.get(e));
+      const isAlreadyIsolated = clickedEnabled && othersAllDisabled;
       return prev.map((layer) => {
-        if (layer.id === `ext-${ext}-primary` || layer.id === `ext-${ext}-secondary`) {
-          return { ...layer, enabled: newEnabled };
+        if (!isFileTypeLayer(layer.id)) {
+          return layer;
+        }
+        const match = layer.id.match(/^ext-(\w+)-(primary|secondary)$/);
+        if (!match) return layer;
+        const layerExt = match[1];
+        if (isAlreadyIsolated) {
+          return { ...layer, enabled: true };
+        } else {
+          return { ...layer, enabled: layerExt === ext };
         }
-        return layer;
       });
     });
   }, []);
@@ -15185,117 +15538,18 @@ const CodeCityPanelContent = ({
                   }
                 )
               ] }) }),
-              availableColorModes.length > 1 && /* @__PURE__ */ jsxs(
-                "div",
+              colorMode !== "fileTypes" && /* @__PURE__ */ jsx(
+                "span",
                 {
-                  ref: colorModeDropdownRef,
-                  style: { position: "relative" },
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        onClick: () => setShowColorModeDropdown(!showColorModeDropdown),
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          gap: "6px",
-                          padding: "4px 10px",
-                          fontSize: theme2.fontSizes[0],
-                          fontFamily: theme2.fonts.body,
-                          color: theme2.colors.text,
-                          backgroundColor: theme2.colors.background,
-                          border: `1px solid ${theme2.colors.border}`,
-                          borderRadius: "4px",
-                          cursor: "pointer",
-                          transition: "all 0.15s ease",
-                          minWidth: "120px"
-                        },
-                        title: "Change color mode",
-                        children: [
-                          /* @__PURE__ */ jsx("span", { style: { flex: 1, textAlign: "left" }, children: currentColorModeConfig.name }),
-                          /* @__PURE__ */ jsx(
-                            ChevronDown,
-                            {
-                              size: 14,
-                              style: {
-                                transform: showColorModeDropdown ? "rotate(180deg)" : "rotate(0deg)",
-                                transition: "transform 0.15s ease"
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    showColorModeDropdown && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: "100%",
-                          left: 0,
-                          right: 0,
-                          marginTop: "4px",
-                          backgroundColor: theme2.colors.background,
-                          border: `1px solid ${theme2.colors.border}`,
-                          borderRadius: "4px",
-                          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-                          zIndex: 100,
-                          overflow: "hidden",
-                          minWidth: "160px"
-                        },
-                        children: availableColorModes.map((mode) => /* @__PURE__ */ jsxs(
-                          "button",
-                          {
-                            onClick: () => {
-                              setColorMode(mode.id);
-                              setShowColorModeDropdown(false);
-                            },
-                            style: {
-                              display: "flex",
-                              flexDirection: "column",
-                              alignItems: "flex-start",
-                              width: "100%",
-                              padding: "8px 12px",
-                              fontSize: theme2.fontSizes[0],
-                              fontFamily: theme2.fonts.body,
-                              color: mode.id === colorMode ? theme2.colors.primary : theme2.colors.text,
-                              backgroundColor: mode.id === colorMode ? theme2.colors.primary + "15" : "transparent",
-                              border: "none",
-                              cursor: "pointer",
-                              transition: "background-color 0.15s ease",
-                              textAlign: "left"
-                            },
-                            onMouseEnter: (e) => {
-                              if (mode.id !== colorMode) {
-                                e.currentTarget.style.backgroundColor = theme2.colors.backgroundLight;
-                              }
-                            },
-                            onMouseLeave: (e) => {
-                              if (mode.id !== colorMode) {
-                                e.currentTarget.style.backgroundColor = "transparent";
-                              }
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx("span", { style: { fontWeight: mode.id === colorMode ? 600 : 400 }, children: mode.name }),
-                              /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  style: {
-                                    fontSize: theme2.fontSizes[0],
-                                    fontFamily: theme2.fonts.body,
-                                    color: theme2.colors.textSecondary,
-                                    marginTop: "2px"
-                                  },
-                                  children: mode.description
-                                }
-                              )
-                            ]
-                          },
-                          mode.id
-                        ))
-                      }
-                    )
-                  ]
+                  style: {
+                    padding: "4px 10px",
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.body,
+                    color: theme2.colors.primary,
+                    backgroundColor: theme2.colors.primary + "15",
+                    borderRadius: "4px"
+                  },
+                  children: currentColorModeConfig.name
                 }
               ),
               (legendFileTypes.length > 0 || legendGitStatus.length > 0 || legendQualityMetrics.length > 0) && /* @__PURE__ */ jsx(