@principal-ade/code-quality-panels 0.1.19 → 0.1.21

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$e = [
+const __iconNode$f = [
   ["path", { d: "M12 7v14", key: "1akyts" }],
   [
     "path",
@@ -116,14 +116,14 @@ const __iconNode$e = [
     }
   ]
 ];
-const BookOpen = createLucideIcon("book-open", __iconNode$e);
+const BookOpen = createLucideIcon("book-open", __iconNode$f);
 /**
  * @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$d = [
+const __iconNode$e = [
   [
     "path",
     { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
@@ -136,14 +136,14 @@ const __iconNode$d = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$d);
+const Braces = createLucideIcon("braces", __iconNode$e);
 /**
  * @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$c = [
+const __iconNode$d = [
   ["path", { d: "M12 20v-9", key: "1qisl0" }],
   ["path", { d: "M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z", key: "uouzyp" }],
   ["path", { d: "M14.12 3.88 16 2", key: "qol33r" }],
@@ -156,41 +156,41 @@ const __iconNode$c = [
   ["path", { d: "m8 2 1.88 1.88", key: "fmnt4t" }],
   ["path", { d: "M9 7.13V6a3 3 0 1 1 6 0v1.13", key: "1vgav8" }]
 ];
-const Bug = createLucideIcon("bug", __iconNode$c);
+const Bug = createLucideIcon("bug", __iconNode$d);
 /**
  * @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$b = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$b);
+const __iconNode$c = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$c);
 /**
  * @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$a = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$a);
+const __iconNode$b = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$b);
 /**
  * @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$9 = [
+const __iconNode$a = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$9);
+const Copy = createLucideIcon("copy", __iconNode$a);
 /**
  * @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$8 = [
+const __iconNode$9 = [
   [
     "path",
     {
@@ -202,14 +202,14 @@ const __iconNode$8 = [
   ["circle", { cx: "11.5", cy: "14.5", r: "2.5", key: "1bq0ko" }],
   ["path", { d: "M13.3 16.3 15 18", key: "2quom7" }]
 ];
-const FileSearch = createLucideIcon("file-search", __iconNode$8);
+const FileSearch = createLucideIcon("file-search", __iconNode$9);
 /**
  * @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$7 = [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -220,27 +220,27 @@ const __iconNode$7 = [
   ["path", { d: "M6.453 15h11.094", key: "3shlmq" }],
   ["path", { d: "M8.5 2h7", key: "csnxdl" }]
 ];
-const FlaskConical = createLucideIcon("flask-conical", __iconNode$7);
+const FlaskConical = createLucideIcon("flask-conical", __iconNode$8);
 /**
  * @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$6 = [
+const __iconNode$7 = [
   ["line", { x1: "6", x2: "6", y1: "3", y2: "15", key: "17qcm7" }],
   ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M18 9a9 9 0 0 1-9 9", key: "n2h4wq" }]
 ];
-const GitBranch = createLucideIcon("git-branch", __iconNode$6);
+const GitBranch = createLucideIcon("git-branch", __iconNode$7);
 /**
  * @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$6 = [
   [
     "path",
     {
@@ -249,26 +249,26 @@ const __iconNode$5 = [
     }
   ]
 ];
-const Hexagon = createLucideIcon("hexagon", __iconNode$5);
+const Hexagon = createLucideIcon("hexagon", __iconNode$6);
 /**
  * @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$5 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$4);
+const Info = createLucideIcon("info", __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$3 = [
+const __iconNode$4 = [
   [
     "path",
     {
@@ -280,32 +280,43 @@ const __iconNode$3 = [
   ["path", { d: "M22 4h-4", key: "gwowj6" }],
   ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
 ];
-const Sparkles = createLucideIcon("sparkles", __iconNode$3);
+const Sparkles = createLucideIcon("sparkles", __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$2 = [
+const __iconNode$3 = [
   ["path", { d: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ];
-const Terminal = createLucideIcon("terminal", __iconNode$2);
+const Terminal = createLucideIcon("terminal", __iconNode$3);
 /**
  * @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$1 = [
+const __iconNode$2 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-const Trash2 = createLucideIcon("trash-2", __iconNode$1);
+const Trash2 = createLucideIcon("trash-2", __iconNode$2);
+/**
+ * @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$1 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode$1);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -368,11 +379,31 @@ function getThemeColors(theme) {
     textColor: theme.colors.text,
     scoreColor: theme.colors.text,
     tierColors: {
-      none: { fill: "#808080", stroke: "#808080", bg: theme.colors.backgroundLight },
-      bronze: { fill: "#CD7F32", stroke: "#CD7F32", bg: theme.colors.backgroundLight },
-      silver: { fill: "#C0C0C0", stroke: "#C0C0C0", bg: theme.colors.backgroundLight },
-      gold: { fill: "#FFD700", stroke: "#FFD700", bg: theme.colors.backgroundLight },
-      platinum: { fill: "#E5E4E2", stroke: "#E5E4E2", bg: theme.colors.backgroundLight }
+      none: {
+        fill: "#808080",
+        stroke: "#808080",
+        bg: theme.colors.backgroundLight
+      },
+      bronze: {
+        fill: "#CD7F32",
+        stroke: "#CD7F32",
+        bg: theme.colors.backgroundLight
+      },
+      silver: {
+        fill: "#C0C0C0",
+        stroke: "#C0C0C0",
+        bg: theme.colors.backgroundLight
+      },
+      gold: {
+        fill: "#FFD700",
+        stroke: "#FFD700",
+        bg: theme.colors.backgroundLight
+      },
+      platinum: {
+        fill: "#E5E4E2",
+        stroke: "#E5E4E2",
+        bg: theme.colors.backgroundLight
+      }
     },
     metricColors: {
       types: theme.colors.warning,
@@ -395,13 +426,77 @@ function getValueColor$2(value, key) {
   if (effectiveValue >= 60) return "#E6A700";
   return "#C62828";
 }
+const LENS_TO_METRIC_MAP = {
+  // Linting tools
+  eslint: "linting",
+  biome: "linting",
+  "biome-lint": "linting",
+  oxlint: "linting",
+  // Type checking tools
+  typescript: "types",
+  flow: "types",
+  // Testing tools
+  test: "tests",
+  jest: "tests",
+  vitest: "tests",
+  "bun-test": "tests",
+  mocha: "tests",
+  playwright: "tests",
+  cypress: "tests",
+  // Formatting tools
+  prettier: "formatting",
+  "biome-format": "formatting",
+  // Dead code detection
+  knip: "deadCode",
+  depcheck: "deadCode",
+  // Documentation
+  typedoc: "documentation",
+  jsdoc: "documentation",
+  alexandria: "documentation"
+};
+function isMetricConfigured(metricKey, lensesRan) {
+  if (!lensesRan || lensesRan.length === 0) {
+    return true;
+  }
+  return lensesRan.some((lensId) => LENS_TO_METRIC_MAP[lensId] === metricKey);
+}
 const getMetricConfig = (themeColors) => [
-  { key: "formatting", label: "Format", color: themeColors.metricColors.formatting, angle: -120 },
-  { key: "linting", label: "Linting", color: themeColors.metricColors.linting, angle: -60 },
-  { key: "types", label: "Types", color: themeColors.metricColors.types, angle: 0 },
-  { key: "tests", label: "Tests", color: themeColors.metricColors.tests, angle: 60 },
-  { key: "deadCode", label: "Dead Code", color: themeColors.metricColors.deadCode, angle: 120 },
-  { key: "documentation", label: "Docs", color: themeColors.metricColors.documentation, angle: 180 }
+  {
+    key: "formatting",
+    label: "Format",
+    color: themeColors.metricColors.formatting,
+    angle: -120
+  },
+  {
+    key: "linting",
+    label: "Linting",
+    color: themeColors.metricColors.linting,
+    angle: -60
+  },
+  {
+    key: "types",
+    label: "Types",
+    color: themeColors.metricColors.types,
+    angle: 0
+  },
+  {
+    key: "tests",
+    label: "Tests",
+    color: themeColors.metricColors.tests,
+    angle: 60
+  },
+  {
+    key: "deadCode",
+    label: "Dead Code",
+    color: themeColors.metricColors.deadCode,
+    angle: 120
+  },
+  {
+    key: "documentation",
+    label: "Docs",
+    color: themeColors.metricColors.documentation,
+    angle: 180
+  }
 ];
 function calculateHexagonPoints(center, radius, metricConfig) {
   return metricConfig.map(({ angle }) => {
@@ -426,6 +521,7 @@ function QualityHexagon({
   showLabels = false,
   showValues = false,
   className,
+  lensesRan,
   onVertexHover,
   onVertexLeave,
   onVertexClick
@@ -442,17 +538,26 @@ function QualityHexagon({
   const dotSize = viewBoxSize * 0.015;
   const hexagonPoints = calculateHexagonPoints(center, radius, metricConfig);
   const dataPoints = metricConfig.map(({ key, angle }) => {
+    const configured = isMetricConfigured(key, lensesRan);
+    if (!configured) {
+      return calculateMetricPoint(center, radius, angle, 0);
+    }
     let value = metrics[key];
     if (key === "deadCode") {
       value = 100 - value;
     }
     return calculateMetricPoint(center, radius, angle, value);
   }).map((p) => `${p.x},${p.y}`).join(" ");
-  const metricsForAverage = { ...metrics };
-  metricsForAverage.deadCode = 100 - metricsForAverage.deadCode;
-  const averageScore = Math.round(
-    Object.values(metricsForAverage).reduce((a, b) => a + b, 0) / 6
+  const configuredMetrics = metricConfig.filter(
+    ({ key }) => isMetricConfigured(key, lensesRan)
   );
+  const metricsForAverage = configuredMetrics.map(({ key }) => {
+    const value = metrics[key];
+    return key === "deadCode" ? 100 - value : value;
+  });
+  const averageScore = metricsForAverage.length > 0 ? Math.round(
+    metricsForAverage.reduce((a, b) => a + b, 0) / metricsForAverage.length
+  ) : 0;
   const hexagon = /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -463,7 +568,11 @@ function QualityHexagon({
         /* @__PURE__ */ jsx("g", { className: "opacity-20", children: [20, 40, 60, 80, 100].map((percent) => /* @__PURE__ */ jsx(
           "polygon",
           {
-            points: calculateHexagonPoints(center, radius * percent / 100, metricConfig),
+            points: calculateHexagonPoints(
+              center,
+              radius * percent / 100,
+              metricConfig
+            ),
             fill: "none",
             stroke: themeColors.gridColor,
             strokeWidth: 0.5,
@@ -509,13 +618,20 @@ function QualityHexagon({
           }
         ),
         metricConfig.map(({ key, label, color, angle }) => {
+          const configured = isMetricConfigured(key, lensesRan);
           const rawValue = metrics[key];
           let value = rawValue;
           if (key === "deadCode") {
             value = 100 - value;
           }
+          const effectiveValue = configured ? value : 0;
           const point = calculateMetricPoint(center, radius, angle, 100);
-          const dataPoint = calculateMetricPoint(center, radius, angle, value);
+          const dataPoint = calculateMetricPoint(
+            center,
+            radius,
+            angle,
+            effectiveValue
+          );
           const vertexInfo = {
             key,
             label,
@@ -527,7 +643,9 @@ function QualityHexagon({
           };
           const handleClick = (e) => {
             e.stopPropagation();
-            onVertexClick == null ? void 0 : onVertexClick(vertexInfo);
+            if (configured) {
+              onVertexClick == null ? void 0 : onVertexClick(vertexInfo);
+            }
           };
           return /* @__PURE__ */ jsxs(
             "g",
@@ -535,7 +653,10 @@ function QualityHexagon({
               onMouseEnter: handleMouseEnter,
               onMouseLeave: onVertexLeave,
               onClick: handleClick,
-              style: { cursor: onVertexHover || onVertexClick ? "pointer" : "default" },
+              style: {
+                cursor: configured && (onVertexHover || onVertexClick) ? "pointer" : "default",
+                opacity: configured ? 1 : 0.4
+              },
               children: [
                 /* @__PURE__ */ jsx(
                   "circle",
@@ -552,12 +673,13 @@ function QualityHexagon({
                     cx: point.x,
                     cy: point.y,
                     r: dotSize,
-                    fill: "white",
-                    stroke: colors.stroke,
-                    strokeWidth: 1.5
+                    fill: configured ? "white" : themeColors.gridColor,
+                    stroke: configured ? colors.stroke : themeColors.gridColor,
+                    strokeWidth: 1.5,
+                    strokeDasharray: configured ? "none" : "2,2"
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                configured && /* @__PURE__ */ jsx(
                   "circle",
                   {
                     cx: dataPoint.x,
@@ -667,117 +789,190 @@ function QualityHexagonDetailed({
         backgroundColor: colors.bg
       },
       children: [
-        hasHeader && /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12
-        }, children: [
-          packageName ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: {
-                fontSize: 12,
-                color: theme.colors.textMuted
-              }, children: packageName.split("/")[0] }),
-              /* @__PURE__ */ jsx("span", { style: {
-                fontSize: 14,
-                fontWeight: 500,
-                color: colors.stroke
-              }, children: packageName.split("/")[1] })
-            ] }) : /* @__PURE__ */ jsx("span", { style: {
-              fontSize: 14,
-              fontWeight: 500,
-              color: colors.stroke
-            }, children: packageName }),
-            packageVersion && /* @__PURE__ */ jsxs("span", { style: {
-              fontSize: 12,
-              color: theme.colors.textMuted
-            }, children: [
-              "v",
-              packageVersion
-            ] })
-          ] }) : /* @__PURE__ */ jsx("span", {}),
-          onRefresh && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onRefresh,
-              disabled: isRefreshing,
-              style: {
-                padding: 6,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: 4,
-                background: theme.colors.surface,
-                color: theme.colors.textMuted,
-                cursor: isRefreshing ? "not-allowed" : "pointer",
-                opacity: isRefreshing ? 0.6 : 1
-              },
-              title: "Refresh",
-              children: /* @__PURE__ */ jsxs(
-                "svg",
+        hasHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12
+            },
+            children: [
+              packageName ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: theme.colors.textMuted
+                      },
+                      children: packageName.split("/")[0]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 14,
+                        fontWeight: 500,
+                        color: colors.stroke
+                      },
+                      children: packageName.split("/")[1]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: colors.stroke
+                    },
+                    children: packageName
+                  }
+                ),
+                packageVersion && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: theme.colors.textMuted
+                    },
+                    children: [
+                      "v",
+                      packageVersion
+                    ]
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("span", {}),
+              onRefresh && /* @__PURE__ */ jsx(
+                "button",
                 {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  onClick: onRefresh,
+                  disabled: isRefreshing,
                   style: {
-                    animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                    padding: 6,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: 4,
+                    background: theme.colors.surface,
+                    color: theme.colors.textMuted,
+                    cursor: isRefreshing ? "not-allowed" : "pointer",
+                    opacity: isRefreshing ? 0.6 : 1
                   },
-                  children: [
-                    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-                    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
-                    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
-                    /* @__PURE__ */ jsx("path", { d: "M16 16h5v5" })
-                  ]
+                  title: "Refresh",
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      style: {
+                        animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+                        /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+                        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
+                        /* @__PURE__ */ jsx("path", { d: "M16 16h5v5" })
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          flexWrap: "wrap",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 24
-        }, children: [
-          /* @__PURE__ */ jsx("div", { style: { flex: "1 1 200px", maxWidth: 300, aspectRatio: "1 / 1" }, children: /* @__PURE__ */ jsx(
-            QualityHexagon,
-            {
-              metrics,
-              tier,
-              theme,
-              showLabels: true,
-              showValues: false
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { style: { flex: "1 1 200px", minWidth: 200, display: "flex", flexDirection: "column", gap: 8, padding: "8px 24px" }, children: metricConfig.map(({ key, label }) => {
-            const value = metrics[key];
-            return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }, children: [
-              /* @__PURE__ */ jsxs("span", { style: {
-                fontSize: 14,
-                color: theme.colors.textMuted
-              }, children: [
-                label,
-                key === "deadCode" ? " ↓" : ""
-              ] }),
-              /* @__PURE__ */ jsxs("span", { style: {
-                fontSize: 14,
-                fontWeight: 500,
-                color: getValueColor$2(value, key)
-              }, children: [
-                value,
-                "%"
-              ] })
-            ] }, key);
-          }) })
-        ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 24
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { flex: "1 1 200px", maxWidth: 300, aspectRatio: "1 / 1" }, children: /* @__PURE__ */ jsx(
+                QualityHexagon,
+                {
+                  metrics,
+                  tier,
+                  theme,
+                  showLabels: true,
+                  showValues: false
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: "1 1 200px",
+                    minWidth: 200,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8,
+                    padding: "8px 24px"
+                  },
+                  children: metricConfig.map(({ key, label }) => {
+                    const value = metrics[key];
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          gap: 12
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 14,
+                                color: theme.colors.textMuted
+                              },
+                              children: [
+                                label,
+                                key === "deadCode" ? " ↓" : ""
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 14,
+                                fontWeight: 500,
+                                color: getValueColor$2(value, key)
+                              },
+                              children: [
+                                value,
+                                "%"
+                              ]
+                            }
+                          )
+                        ]
+                      },
+                      key
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -790,6 +985,7 @@ function QualityHexagonExpandable({
   packageName,
   packageVersion,
   packagePath,
+  lensesRan,
   onRefresh,
   isRefreshing = false,
   defaultExpanded = false,
@@ -820,79 +1016,109 @@ function QualityHexagonExpandable({
         flex: "1 1 200px"
       },
       children: [
-        hasHeader && /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 12
-        }, children: [
-          packageName ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-            packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: {
-                fontSize: 12,
-                color: theme.colors.textMuted
-              }, children: packageName.split("/")[0] }),
-              /* @__PURE__ */ jsx("span", { style: {
-                fontSize: 14,
-                fontWeight: 500,
-                color: colors.stroke
-              }, children: packageName.split("/")[1] })
-            ] }) : /* @__PURE__ */ jsx("span", { style: {
-              fontSize: 14,
-              fontWeight: 500,
-              color: colors.stroke
-            }, children: packageName }),
-            packageVersion && /* @__PURE__ */ jsxs("span", { style: {
-              fontSize: 12,
-              color: theme.colors.textMuted
-            }, children: [
-              "v",
-              packageVersion
-            ] })
-          ] }) : /* @__PURE__ */ jsx("span", {}),
-          onRefresh && /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: onRefresh,
-              disabled: isRefreshing,
-              style: {
-                padding: 6,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: 4,
-                background: theme.colors.surface,
-                color: theme.colors.textMuted,
-                cursor: isRefreshing ? "not-allowed" : "pointer",
-                opacity: isRefreshing ? 0.6 : 1
-              },
-              title: "Refresh",
-              children: /* @__PURE__ */ jsxs(
-                "svg",
+        hasHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12
+            },
+            children: [
+              packageName ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: theme.colors.textMuted
+                      },
+                      children: packageName.split("/")[0]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 14,
+                        fontWeight: 500,
+                        color: colors.stroke
+                      },
+                      children: packageName.split("/")[1]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: colors.stroke
+                    },
+                    children: packageName
+                  }
+                ),
+                packageVersion && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: theme.colors.textMuted
+                    },
+                    children: [
+                      "v",
+                      packageVersion
+                    ]
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("span", {}),
+              onRefresh && /* @__PURE__ */ jsx(
+                "button",
                 {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  onClick: onRefresh,
+                  disabled: isRefreshing,
                   style: {
-                    animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                    padding: 6,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: `1px solid ${theme.colors.border}`,
+                    borderRadius: 4,
+                    background: theme.colors.surface,
+                    color: theme.colors.textMuted,
+                    cursor: isRefreshing ? "not-allowed" : "pointer",
+                    opacity: isRefreshing ? 0.6 : 1
                   },
-                  children: [
-                    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-                    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
-                    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
-                    /* @__PURE__ */ jsx("path", { d: "M16 16h5v5" })
-                  ]
+                  title: "Refresh",
+                  children: /* @__PURE__ */ jsxs(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      style: {
+                        animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+                        /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" }),
+                        /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }),
+                        /* @__PURE__ */ jsx("path", { d: "M16 16h5v5" })
+                      ]
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -910,7 +1136,8 @@ function QualityHexagonExpandable({
                 tier,
                 theme,
                 showLabels: true,
-                showValues: false
+                showValues: false,
+                lensesRan
               }
             ) })
           }
@@ -923,62 +1150,82 @@ function QualityHexagonExpandable({
               gridTemplateRows: expanded ? "1fr" : "0fr",
               transition: "grid-template-rows 0.3s ease"
             },
-            children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: 8,
-              padding: "8px 24px",
-              borderTop: `1px solid ${theme.colors.border}`,
-              marginTop: 8
-            }, children: metricConfig.map(({ key, label }) => {
-              const value = metrics[key];
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onMetricClick == null ? void 0 : onMetricClick(key);
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: 12,
-                    cursor: onMetricClick ? "pointer" : "default",
-                    padding: "4px 8px",
-                    margin: "0 -8px",
-                    borderRadius: 4,
-                    transition: "background-color 0.15s ease"
-                  },
-                  onMouseEnter: (e) => {
-                    if (onMetricClick) {
-                      e.currentTarget.style.backgroundColor = theme.colors.surface;
-                    }
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("span", { style: {
-                      fontSize: 14,
-                      color: theme.colors.textMuted
-                    }, children: [
-                      label,
-                      key === "deadCode" ? " ↓" : ""
-                    ] }),
-                    /* @__PURE__ */ jsxs("span", { style: {
-                      fontSize: 14,
-                      fontWeight: 500,
-                      color: getValueColor$2(value, key)
-                    }, children: [
-                      value,
-                      "%"
-                    ] })
-                  ]
+            children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 8,
+                  padding: "8px 24px",
+                  borderTop: `1px solid ${theme.colors.border}`,
+                  marginTop: 8
                 },
-                key
-              );
-            }) }) })
+                children: metricConfig.map(({ key, label }) => {
+                  const value = metrics[key];
+                  const configured = isMetricConfigured(key, lensesRan);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (configured) {
+                          onMetricClick == null ? void 0 : onMetricClick(key);
+                        }
+                      },
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 12,
+                        cursor: configured && onMetricClick ? "pointer" : "default",
+                        padding: "4px 8px",
+                        margin: "0 -8px",
+                        borderRadius: 4,
+                        transition: "background-color 0.15s ease",
+                        opacity: configured ? 1 : 0.5
+                      },
+                      onMouseEnter: (e) => {
+                        if (configured && onMetricClick) {
+                          e.currentTarget.style.backgroundColor = theme.colors.surface;
+                        }
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.backgroundColor = "transparent";
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              fontSize: 14,
+                              color: theme.colors.textMuted
+                            },
+                            children: [
+                              label,
+                              key === "deadCode" ? " ↓" : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: 14,
+                              fontWeight: 500,
+                              color: configured ? getValueColor$2(value, key) : theme.colors.textMuted
+                            },
+                            title: configured ? void 0 : "Not configured",
+                            children: configured ? `${value}%` : "N/A"
+                          }
+                        )
+                      ]
+                    },
+                    key
+                  );
+                })
+              }
+            ) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1015,10 +1262,26 @@ function QualityHexagonExpandable({
     }
   );
 }
-function calculateQualityTier(metrics) {
-  const metricsForAverage = { ...metrics };
-  metricsForAverage.deadCode = 100 - metricsForAverage.deadCode;
-  const average = Object.values(metricsForAverage).reduce((a, b) => a + b, 0) / 6;
+function calculateQualityTier(metrics, lensesRan) {
+  const allMetricKeys = [
+    "formatting",
+    "linting",
+    "types",
+    "tests",
+    "deadCode",
+    "documentation"
+  ];
+  const configuredKeys = allMetricKeys.filter(
+    (key) => isMetricConfigured(key, lensesRan)
+  );
+  if (configuredKeys.length === 0) {
+    return "none";
+  }
+  const values = configuredKeys.map((key) => {
+    const value = metrics[key];
+    return key === "deadCode" ? 100 - value : value;
+  });
+  const average = values.reduce((a, b) => a + b, 0) / values.length;
   if (average >= 90) return "platinum";
   if (average >= 75) return "gold";
   if (average >= 60) return "silver";
@@ -1089,12 +1352,42 @@ const CommandLine = ({ command, theme, label }) => {
 };
 const MetricsPreview = ({ theme }) => {
   const metrics = [
-    { key: "formatting", label: "Formatting", description: "Prettier code style", Icon: Sparkles },
-    { key: "linting", label: "Linting", description: "ESLint code quality", Icon: FileSearch },
-    { key: "types", label: "Types", description: "TypeScript type safety", Icon: Braces },
-    { key: "tests", label: "Tests", description: "Test coverage & pass rate", Icon: FlaskConical },
-    { key: "deadCode", label: "Dead Code", description: "Unused exports & deps", Icon: Trash2 },
-    { key: "documentation", label: "Docs", description: "Code documentation", Icon: BookOpen }
+    {
+      key: "formatting",
+      label: "Formatting",
+      description: "Prettier code style",
+      Icon: Sparkles
+    },
+    {
+      key: "linting",
+      label: "Linting",
+      description: "ESLint code quality",
+      Icon: FileSearch
+    },
+    {
+      key: "types",
+      label: "Types",
+      description: "TypeScript type safety",
+      Icon: Braces
+    },
+    {
+      key: "tests",
+      label: "Tests",
+      description: "Test coverage & pass rate",
+      Icon: FlaskConical
+    },
+    {
+      key: "deadCode",
+      label: "Dead Code",
+      description: "Unused exports & deps",
+      Icon: Trash2
+    },
+    {
+      key: "documentation",
+      label: "Docs",
+      description: "Code documentation",
+      Icon: BookOpen
+    }
   ];
   return /* @__PURE__ */ jsx(
     "div",
@@ -1198,13 +1491,32 @@ const QualityEmptyState = ({
                 color: theme.colors.textMuted
               },
               children: [
-                /* @__PURE__ */ jsx(Info, { size: 14, style: { flexShrink: 0, marginTop: 2 }, color: theme.colors.warning }),
+                /* @__PURE__ */ jsx(
+                  Info,
+                  {
+                    size: 14,
+                    style: { flexShrink: 0, marginTop: 2 },
+                    color: theme.colors.warning
+                  }
+                ),
                 /* @__PURE__ */ jsxs("div", { children: [
                   /* @__PURE__ */ jsx("strong", { style: { color: theme.colors.text }, children: "Using private npm packages?" }),
                   /* @__PURE__ */ jsx("br", {}),
-                  "Add ",
-                  /* @__PURE__ */ jsx("code", { style: { backgroundColor: theme.colors.background, padding: "1px 4px", borderRadius: 3 }, children: "NPM_TOKEN" }),
-                  " to your repository secrets and ensure the workflow has access to it."
+                  "Add",
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "code",
+                    {
+                      style: {
+                        backgroundColor: theme.colors.background,
+                        padding: "1px 4px",
+                        borderRadius: 3
+                      },
+                      children: "NPM_TOKEN"
+                    }
+                  ),
+                  " ",
+                  "to your repository secrets and ensure the workflow has access to it."
                 ] })
               ]
             }
@@ -1424,13 +1736,32 @@ const QualityEmptyState = ({
                     color: theme.colors.textMuted
                   },
                   children: [
-                    /* @__PURE__ */ jsx(Info, { size: 14, style: { flexShrink: 0, marginTop: 2 }, color: theme.colors.warning }),
+                    /* @__PURE__ */ jsx(
+                      Info,
+                      {
+                        size: 14,
+                        style: { flexShrink: 0, marginTop: 2 },
+                        color: theme.colors.warning
+                      }
+                    ),
                     /* @__PURE__ */ jsxs("div", { children: [
                       /* @__PURE__ */ jsx("strong", { style: { color: theme.colors.text }, children: "Private npm packages?" }),
                       /* @__PURE__ */ jsx("br", {}),
-                      "If your project uses private @org packages, add ",
-                      /* @__PURE__ */ jsx("code", { style: { backgroundColor: theme.colors.background, padding: "1px 4px", borderRadius: 3 }, children: "NPM_TOKEN" }),
-                      " to your GitHub repository secrets under Settings → Secrets → Actions, and set the workflow environment if needed."
+                      "If your project uses private @org packages, add",
+                      " ",
+                      /* @__PURE__ */ jsx(
+                        "code",
+                        {
+                          style: {
+                            backgroundColor: theme.colors.background,
+                            padding: "1px 4px",
+                            borderRadius: 3
+                          },
+                          children: "NPM_TOKEN"
+                        }
+                      ),
+                      " ",
+                      "to your GitHub repository secrets under Settings → Secrets → Actions, and set the workflow environment if needed."
                     ] })
                   ]
                 }
@@ -1471,12 +1802,26 @@ const QualityHexagonPanelContent = ({
   var _a;
   const { theme } = useTheme();
   const [refreshingPackages, setRefreshingPackages] = React2__default.useState(/* @__PURE__ */ new Set());
+  const [showHelpOverlay, setShowHelpOverlay] = React2__default.useState(false);
+  const [copiedCommand, setCopiedCommand] = React2__default.useState(null);
+  const handleCopyCommand = async (command) => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopiedCommand(command);
+      setTimeout(() => setCopiedCommand(null), 2e3);
+    } catch {
+      console.log("Copy:", command);
+    }
+  };
   const qualitySlice = context.getSlice("quality");
   const hasQualitySlice = context.hasSlice("quality");
   const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
   const fileTreeSlice = context.getSlice("fileTree");
   const hasWorkflow = React2__default.useMemo(() => {
-    return checkFileExistsInTree((fileTreeSlice == null ? void 0 : fileTreeSlice.data) ?? void 0, WORKFLOW_FILE_PATH);
+    return checkFileExistsInTree(
+      (fileTreeSlice == null ? void 0 : fileTreeSlice.data) ?? void 0,
+      WORKFLOW_FILE_PATH
+    );
   }, [fileTreeSlice == null ? void 0 : fileTreeSlice.data]);
   const packages = React2__default.useMemo(() => {
     var _a2;
@@ -1514,15 +1859,37 @@ const QualityHexagonPanelContent = ({
     gold: "#FFD700",
     platinum: "#E5E4E2"
   };
+  const allLensesRan = React2__default.useMemo(() => {
+    const lensSet = /* @__PURE__ */ new Set();
+    for (const pkg of packages) {
+      if (pkg.lensesRan) {
+        for (const lens of pkg.lensesRan) {
+          lensSet.add(lens);
+        }
+      }
+    }
+    return lensSet.size > 0 ? Array.from(lensSet) : void 0;
+  }, [packages]);
   const overallTier = packages.length > 0 ? calculateQualityTier(
-    packages.reduce((acc, pkg) => ({
-      tests: acc.tests + pkg.metrics.tests / packages.length,
-      deadCode: acc.deadCode + pkg.metrics.deadCode / packages.length,
-      linting: acc.linting + pkg.metrics.linting / packages.length,
-      formatting: acc.formatting + pkg.metrics.formatting / packages.length,
-      types: acc.types + pkg.metrics.types / packages.length,
-      documentation: acc.documentation + pkg.metrics.documentation / packages.length
-    }), { tests: 0, deadCode: 0, linting: 0, formatting: 0, types: 0, documentation: 0 })
+    packages.reduce(
+      (acc, pkg) => ({
+        tests: acc.tests + pkg.metrics.tests / packages.length,
+        deadCode: acc.deadCode + pkg.metrics.deadCode / packages.length,
+        linting: acc.linting + pkg.metrics.linting / packages.length,
+        formatting: acc.formatting + pkg.metrics.formatting / packages.length,
+        types: acc.types + pkg.metrics.types / packages.length,
+        documentation: acc.documentation + pkg.metrics.documentation / packages.length
+      }),
+      {
+        tests: 0,
+        deadCode: 0,
+        linting: 0,
+        formatting: 0,
+        types: 0,
+        documentation: 0
+      }
+    ),
+    allLensesRan
   ) : "none";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1536,59 +1903,73 @@ const QualityHexagonPanelContent = ({
         overflowY: "auto",
         boxSizing: "border-box",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          height: 40,
-          flexShrink: 0,
-          padding: "0 16px",
-          borderBottom: `1px solid ${theme.colors.border}`,
-          boxSizing: "border-box"
-        }, children: [
-          /* @__PURE__ */ jsx(Hexagon, { size: 20, color: tierColors[overallTier] }),
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              style: {
-                margin: 0,
-                fontSize: 14,
-                fontWeight: 600,
-                color: theme.colors.text
-              },
-              children: "Code Quality"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              title: "Platinum: 90%+ avg | Gold: 75%+ | Silver: 60%+ | Bronze: 40%+",
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: 16,
-                height: 16,
-                borderRadius: "50%",
-                border: `1px solid ${theme.colors.border}`,
-                fontSize: 11,
-                color: theme.colors.textMuted,
-                cursor: "help"
-              },
-              children: "?"
-            }
-          ),
-          packages.length > 1 && /* @__PURE__ */ jsxs("span", { style: {
-            fontSize: 13,
-            color: theme.colors.textMuted
-          }, children: [
-            packages.length,
-            " packages"
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              height: 40,
+              flexShrink: 0,
+              padding: "0 16px",
+              borderBottom: `1px solid ${theme.colors.border}`,
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Hexagon, { size: 20, color: tierColors[overallTier] }),
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: theme.colors.text
+                  },
+                  children: "Code Quality"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: () => setShowHelpOverlay(true),
+                  title: "Click for help",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 16,
+                    height: 16,
+                    borderRadius: "50%",
+                    border: `1px solid ${theme.colors.border}`,
+                    fontSize: 11,
+                    color: theme.colors.textMuted,
+                    cursor: "pointer"
+                  },
+                  children: "?"
+                }
+              ),
+              packages.length > 1 && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 13,
+                    color: theme.colors.textMuted
+                  },
+                  children: [
+                    packages.length,
+                    " packages"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -1600,54 +1981,229 @@ const QualityHexagonPanelContent = ({
               flex: 1,
               minHeight: 0
             },
-            children: /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 16, minHeight: 0 }, children: isLoading ? /* @__PURE__ */ jsx("div", { style: {
-              padding: 40,
-              textAlign: "center",
-              color: theme.colors.textMuted
-            }, children: "Loading quality metrics..." }) : packages.length === 0 ? /* @__PURE__ */ jsx(
-              QualityEmptyState,
+            children: /* @__PURE__ */ jsx(
+              "div",
               {
-                theme,
-                hasWorkflow
-              }
-            ) : packages.map((pkg) => {
-              const tier = calculateQualityTier(pkg.metrics);
-              const packagePath = pkg.path ?? "";
-              return /* @__PURE__ */ jsx(
-                QualityHexagonExpandable,
-                {
-                  metrics: pkg.metrics,
-                  tier,
-                  theme,
-                  packageName: pkg.name,
-                  packageVersion: pkg.version,
-                  packagePath,
-                  onExpandChange: (expanded, info) => {
-                    events.emit({
-                      type: "package:select",
-                      source: "principal-ade.quality-hexagon-panel",
-                      timestamp: Date.now(),
-                      payload: expanded ? {
-                        packagePath: info.packagePath ?? "",
-                        packageName: info.packageName
-                      } : null
-                    });
-                  },
-                  onMetricClick: (metric) => {
-                    const colorMode = METRIC_TO_COLOR_MODE[metric];
-                    if (colorMode) {
-                      events.emit({
-                        type: "quality:colorMode:select",
-                        source: "principal-ade.quality-hexagon-panel",
-                        timestamp: Date.now(),
-                        payload: { colorMode }
-                      });
-                    }
+                style: { display: "flex", flexWrap: "wrap", gap: 16, minHeight: 0 },
+                children: isLoading ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      padding: 40,
+                      textAlign: "center",
+                      color: theme.colors.textMuted
+                    },
+                    children: "Loading quality metrics..."
                   }
+                ) : packages.length === 0 ? /* @__PURE__ */ jsx(QualityEmptyState, { theme, hasWorkflow }) : packages.map((pkg) => {
+                  const tier = calculateQualityTier(pkg.metrics, pkg.lensesRan);
+                  const packagePath = pkg.path ?? "";
+                  return /* @__PURE__ */ jsx(
+                    QualityHexagonExpandable,
+                    {
+                      metrics: pkg.metrics,
+                      tier,
+                      theme,
+                      packageName: pkg.name,
+                      packageVersion: pkg.version,
+                      packagePath,
+                      lensesRan: pkg.lensesRan,
+                      onExpandChange: (expanded, info) => {
+                        events.emit({
+                          type: "package:select",
+                          source: "principal-ade.quality-hexagon-panel",
+                          timestamp: Date.now(),
+                          payload: expanded ? {
+                            packagePath: info.packagePath ?? "",
+                            packageName: info.packageName
+                          } : null
+                        });
+                      },
+                      onMetricClick: (metric) => {
+                        const colorMode = METRIC_TO_COLOR_MODE[metric];
+                        if (colorMode) {
+                          events.emit({
+                            type: "quality:colorMode:select",
+                            source: "principal-ade.quality-hexagon-panel",
+                            timestamp: Date.now(),
+                            payload: { colorMode }
+                          });
+                        }
+                      }
+                    },
+                    pkg.name
+                  );
+                })
+              }
+            )
+          }
+        ),
+        showHelpOverlay && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              zIndex: 100
+            },
+            onClick: () => setShowHelpOverlay(false),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  backgroundColor: theme.colors.surface,
+                  borderRadius: 8,
+                  padding: 20,
+                  maxWidth: 400,
+                  width: "90%",
+                  border: `1px solid ${theme.colors.border}`
                 },
-                pkg.name
-              );
-            }) })
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        marginBottom: 16
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "h3",
+                          {
+                            style: {
+                              margin: 0,
+                              fontSize: 16,
+                              fontWeight: 600,
+                              color: theme.colors.text
+                            },
+                            children: "Quality Lens CLI"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => setShowHelpOverlay(false),
+                            style: {
+                              background: "none",
+                              border: "none",
+                              cursor: "pointer",
+                              padding: 4,
+                              display: "flex",
+                              color: theme.colors.textMuted
+                            },
+                            children: /* @__PURE__ */ jsx(X, { size: 18 })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      style: {
+                        fontSize: 13,
+                        color: theme.colors.textMuted,
+                        margin: "0 0 12px 0"
+                      },
+                      children: "Run quality checks locally with the CLI:"
+                    }
+                  ),
+                  [
+                    {
+                      cmd: "npx @principal-ai/quality-lens-cli init",
+                      label: "Initialize quality lens in your project"
+                    },
+                    {
+                      cmd: "npx @principal-ai/quality-lens-cli list",
+                      label: "List available quality lenses"
+                    }
+                  ].map(({ cmd, label }) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: theme.colors.textMuted }, children: label }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          gap: 8,
+                          padding: "8px 12px",
+                          borderRadius: 6,
+                          backgroundColor: theme.colors.background,
+                          border: `1px solid ${theme.colors.border}`,
+                          fontFamily: "monospace",
+                          fontSize: 12,
+                          marginTop: 4
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("code", { style: { color: theme.colors.text }, children: cmd }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: () => handleCopyCommand(cmd),
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                padding: 4,
+                                border: "none",
+                                backgroundColor: "transparent",
+                                color: theme.colors.textMuted,
+                                cursor: "pointer"
+                              },
+                              title: "Copy command",
+                              children: copiedCommand === cmd ? /* @__PURE__ */ jsx(Check, { size: 14, color: theme.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }, cmd)),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        marginTop: 16,
+                        padding: 12,
+                        backgroundColor: theme.colors.background,
+                        borderRadius: 6,
+                        fontSize: 12,
+                        color: theme.colors.textMuted
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("strong", { style: { color: theme.colors.text }, children: "Tiers:" }),
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              marginTop: 8,
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 4
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: "🏆 Platinum: 90%+ average" }),
+                              /* @__PURE__ */ jsx("span", { children: "🥇 Gold: 75%+ average" }),
+                              /* @__PURE__ */ jsx("span", { children: "🥈 Silver: 60%+ average" }),
+                              /* @__PURE__ */ jsx("span", { children: "🥉 Bronze: 40%+ average" })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       ]
@@ -1692,7 +2248,14 @@ function calculateOverallTier(items) {
       types: acc.types + item.metrics.types / items.length,
       documentation: acc.documentation + item.metrics.documentation / items.length
     }),
-    { tests: 0, deadCode: 0, linting: 0, formatting: 0, types: 0, documentation: 0 }
+    {
+      tests: 0,
+      deadCode: 0,
+      linting: 0,
+      formatting: 0,
+      types: 0,
+      documentation: 0
+    }
   );
   return calculateQualityTier(avgMetrics);
 }
@@ -1873,11 +2436,6 @@ function RepositoryQualityGridItem({
     }
   );
 }
-function calculateAverageScore(metrics) {
-  const adjusted = { ...metrics };
-  adjusted.deadCode = 100 - adjusted.deadCode;
-  return Object.values(adjusted).reduce((a, b) => a + b, 0) / 6;
-}
 function RepositoryQualityGrid({
   repositories,
   theme,
@@ -1887,20 +2445,19 @@ function RepositoryQualityGrid({
   showRepositoryName = true,
   showSummary = true
 }) {
-  const [selectedMetric, setSelectedMetric] = React2.useState(null);
-  const items = React2.useMemo(() => flattenRepositories(repositories), [repositories]);
+  const [selectedMetric, setSelectedMetric] = React2.useState(
+    null
+  );
+  const items = React2.useMemo(
+    () => flattenRepositories(repositories),
+    [repositories]
+  );
   const overallTier = React2.useMemo(() => calculateOverallTier(items), [items]);
   const sortedItems = React2.useMemo(() => {
-    return [...items].sort((a, b) => {
-      if (selectedMetric) {
-        const aVal = selectedMetric === "deadCode" ? 100 - a.metrics[selectedMetric] : a.metrics[selectedMetric];
-        const bVal = selectedMetric === "deadCode" ? 100 - b.metrics[selectedMetric] : b.metrics[selectedMetric];
-        return bVal - aVal;
-      } else {
-        return calculateAverageScore(b.metrics) - calculateAverageScore(a.metrics);
-      }
-    });
-  }, [items, selectedMetric]);
+    return [...items].sort(
+      (a, b) => a.packageName.localeCompare(b.packageName)
+    );
+  }, [items]);
   const tierColors = {
     none: "#808080",
     bronze: "#CD7F32",
@@ -1994,7 +2551,9 @@ function RepositoryQualityGrid({
                   "select",
                   {
                     value: selectedMetric ?? "",
-                    onChange: (e) => setSelectedMetric(e.target.value ? e.target.value : null),
+                    onChange: (e) => setSelectedMetric(
+                      e.target.value ? e.target.value : null
+                    ),
                     style: {
                       padding: "4px 8px",
                       fontSize: 13,
@@ -2086,8 +2645,12 @@ const RepositoryQualityGridPanelContent = ({
 }) => {
   var _a;
   const { theme } = useTheme();
-  const [selectedItemKey, setSelectedItemKey] = React2__default.useState(null);
-  const qualitySlice = context.getSlice("repositoriesQuality");
+  const [selectedItemKey, setSelectedItemKey] = React2__default.useState(
+    null
+  );
+  const qualitySlice = context.getSlice(
+    "repositoriesQuality"
+  );
   const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
   const repositories = React2__default.useMemo(() => {
     var _a2;
@@ -2249,7 +2812,13 @@ function getPackageSummary(results) {
       failCount++;
     }
   }
-  return { totalErrors, totalWarnings, passCount, failCount, lensCount: results.length };
+  return {
+    totalErrors,
+    totalWarnings,
+    passCount,
+    failCount,
+    lensCount: results.length
+  };
 }
 function LensDataDebugPanel$1({
   data,
@@ -2259,13 +2828,21 @@ function LensDataDebugPanel$1({
   onFileClick,
   onPackageSelect
 }) {
-  const packageGroups = React2.useMemo(() => groupResultsByPackage((data == null ? void 0 : data.results) ?? []), [data == null ? void 0 : data.results]);
-  const packageNames = React2.useMemo(() => Array.from(packageGroups.keys()), [packageGroups]);
+  const packageGroups = React2.useMemo(
+    () => groupResultsByPackage((data == null ? void 0 : data.results) ?? []),
+    [data == null ? void 0 : data.results]
+  );
+  const packageNames = React2.useMemo(
+    () => Array.from(packageGroups.keys()),
+    [packageGroups]
+  );
   const [selectedPackage, setSelectedPackage] = React2.useState(
     initialSelectedPackage || (packageNames.length === 1 ? packageNames[0] : null)
   );
   const [expandedLens, setExpandedLens] = React2.useState(null);
-  const [expandedFiles, setExpandedFiles] = React2.useState(/* @__PURE__ */ new Set());
+  const [expandedFiles, setExpandedFiles] = React2.useState(
+    /* @__PURE__ */ new Set()
+  );
   const handlePackageSelect = (pkg) => {
     setSelectedPackage(pkg);
     setExpandedLens(null);
@@ -2300,82 +2877,112 @@ function LensDataDebugPanel$1({
         fontSize: 13
       },
       children: [
-        packageNames.length > 1 && /* @__PURE__ */ jsx("div", { style: {
-          display: "flex",
-          flexWrap: "wrap",
-          gap: 8,
-          marginBottom: 8
-        }, children: packageNames.map((pkg) => {
-          const summary = getPackageSummary(packageGroups.get(pkg) || []);
-          const isSelected = selectedPackage === pkg;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => handlePackageSelect(pkg),
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                padding: "8px 12px",
-                borderRadius: 6,
-                border: `1px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
-                backgroundColor: isSelected ? theme.colors.surface : "transparent",
-                color: theme.colors.text,
-                cursor: "pointer",
-                transition: "all 0.15s ease"
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: pkg }),
-                /* @__PURE__ */ jsxs("span", { style: {
-                  fontSize: 11,
-                  padding: "2px 6px",
-                  borderRadius: 4,
-                  backgroundColor: summary.totalErrors > 0 ? getSeverityBg("error") : summary.totalWarnings > 0 ? getSeverityBg("warning") : "rgba(34, 197, 94, 0.1)",
-                  color: summary.totalErrors > 0 ? getSeverityColor("error") : summary.totalWarnings > 0 ? getSeverityColor("warning") : "#22c55e"
-                }, children: [
-                  summary.passCount,
-                  "/",
-                  summary.lensCount,
-                  " pass"
-                ] })
-              ]
+        packageNames.length > 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 8,
+              marginBottom: 8
             },
-            pkg
-          );
-        }) }),
-        packageNames.length === 1 && /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-          padding: "8px 12px",
-          backgroundColor: theme.colors.surface,
-          borderRadius: 6,
-          marginBottom: 8
-        }, children: [
-          /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: theme.colors.text }, children: packageNames[0] }),
-          (() => {
-            const summary = getPackageSummary(selectedResults);
-            return /* @__PURE__ */ jsxs("span", { style: {
-              fontSize: 11,
-              padding: "2px 6px",
-              borderRadius: 4,
-              backgroundColor: summary.totalErrors > 0 ? getSeverityBg("error") : summary.totalWarnings > 0 ? getSeverityBg("warning") : "rgba(34, 197, 94, 0.1)",
-              color: summary.totalErrors > 0 ? getSeverityColor("error") : summary.totalWarnings > 0 ? getSeverityColor("warning") : "#22c55e"
-            }, children: [
-              summary.passCount,
-              "/",
-              summary.lensCount,
-              " pass"
-            ] });
-          })()
-        ] }),
-        !selectedPackage && packageNames.length > 1 && /* @__PURE__ */ jsx("div", { style: {
-          padding: 24,
-          textAlign: "center",
-          color: theme.colors.textMuted,
-          backgroundColor: theme.colors.surface,
-          borderRadius: 6
-        }, children: "Select a package above to view lens results" }),
+            children: packageNames.map((pkg) => {
+              const summary = getPackageSummary(packageGroups.get(pkg) || []);
+              const isSelected = selectedPackage === pkg;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handlePackageSelect(pkg),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "8px 12px",
+                    borderRadius: 6,
+                    border: `1px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
+                    backgroundColor: isSelected ? theme.colors.surface : "transparent",
+                    color: theme.colors.text,
+                    cursor: "pointer",
+                    transition: "all 0.15s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: pkg }),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 11,
+                          padding: "2px 6px",
+                          borderRadius: 4,
+                          backgroundColor: summary.totalErrors > 0 ? getSeverityBg("error") : summary.totalWarnings > 0 ? getSeverityBg("warning") : "rgba(34, 197, 94, 0.1)",
+                          color: summary.totalErrors > 0 ? getSeverityColor("error") : summary.totalWarnings > 0 ? getSeverityColor("warning") : "#22c55e"
+                        },
+                        children: [
+                          summary.passCount,
+                          "/",
+                          summary.lensCount,
+                          " pass"
+                        ]
+                      }
+                    )
+                  ]
+                },
+                pkg
+              );
+            })
+          }
+        ),
+        packageNames.length === 1 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              padding: "8px 12px",
+              backgroundColor: theme.colors.surface,
+              borderRadius: 6,
+              marginBottom: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: theme.colors.text }, children: packageNames[0] }),
+              (() => {
+                const summary = getPackageSummary(selectedResults);
+                return /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 11,
+                      padding: "2px 6px",
+                      borderRadius: 4,
+                      backgroundColor: summary.totalErrors > 0 ? getSeverityBg("error") : summary.totalWarnings > 0 ? getSeverityBg("warning") : "rgba(34, 197, 94, 0.1)",
+                      color: summary.totalErrors > 0 ? getSeverityColor("error") : summary.totalWarnings > 0 ? getSeverityColor("warning") : "#22c55e"
+                    },
+                    children: [
+                      summary.passCount,
+                      "/",
+                      summary.lensCount,
+                      " pass"
+                    ]
+                  }
+                );
+              })()
+            ]
+          }
+        ),
+        !selectedPackage && packageNames.length > 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: 24,
+              textAlign: "center",
+              color: theme.colors.textMuted,
+              backgroundColor: theme.colors.surface,
+              borderRadius: 6
+            },
+            children: "Select a package above to view lens results"
+          }
+        ),
         selectedPackage && selectedResults.map((result, idx) => {
           var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
           const lensKey = `${((_a = result.lens) == null ? void 0 : _a.id) ?? "unknown"}-${idx}`;
@@ -2430,34 +3037,53 @@ function LensDataDebugPanel$1({
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                        /* @__PURE__ */ jsx("span", { style: {
-                          padding: "2px 6px",
-                          borderRadius: 4,
-                          fontSize: 11,
-                          backgroundColor: ((_e = result.execution) == null ? void 0 : _e.success) ? "rgba(34, 197, 94, 0.1)" : "rgba(239, 68, 68, 0.1)",
-                          color: ((_f = result.execution) == null ? void 0 : _f.success) ? "#22c55e" : "#ef4444"
-                        }, children: ((_g = result.execution) == null ? void 0 : _g.success) ? "pass" : "fail" }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              padding: "2px 6px",
+                              borderRadius: 4,
+                              fontSize: 11,
+                              backgroundColor: ((_e = result.execution) == null ? void 0 : _e.success) ? "rgba(34, 197, 94, 0.1)" : "rgba(239, 68, 68, 0.1)",
+                              color: ((_f = result.execution) == null ? void 0 : _f.success) ? "#22c55e" : "#ef4444"
+                            },
+                            children: ((_g = result.execution) == null ? void 0 : _g.success) ? "pass" : "fail"
+                          }
+                        ),
                         hasIssues && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
-                          (((_i = (_h = result.metrics) == null ? void 0 : _h.issuesBySeverity) == null ? void 0 : _i.error) ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { style: {
-                            padding: "2px 6px",
-                            borderRadius: 4,
-                            fontSize: 11,
-                            backgroundColor: getSeverityBg("error"),
-                            color: getSeverityColor("error")
-                          }, children: [
-                            ((_k = (_j = result.metrics) == null ? void 0 : _j.issuesBySeverity) == null ? void 0 : _k.error) ?? 0,
-                            " errors"
-                          ] }),
-                          (((_m = (_l = result.metrics) == null ? void 0 : _l.issuesBySeverity) == null ? void 0 : _m.warning) ?? 0) > 0 && /* @__PURE__ */ jsxs("span", { style: {
-                            padding: "2px 6px",
-                            borderRadius: 4,
-                            fontSize: 11,
-                            backgroundColor: getSeverityBg("warning"),
-                            color: getSeverityColor("warning")
-                          }, children: [
-                            ((_o = (_n = result.metrics) == null ? void 0 : _n.issuesBySeverity) == null ? void 0 : _o.warning) ?? 0,
-                            " warnings"
-                          ] })
+                          (((_i = (_h = result.metrics) == null ? void 0 : _h.issuesBySeverity) == null ? void 0 : _i.error) ?? 0) > 0 && /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                padding: "2px 6px",
+                                borderRadius: 4,
+                                fontSize: 11,
+                                backgroundColor: getSeverityBg("error"),
+                                color: getSeverityColor("error")
+                              },
+                              children: [
+                                ((_k = (_j = result.metrics) == null ? void 0 : _j.issuesBySeverity) == null ? void 0 : _k.error) ?? 0,
+                                " errors"
+                              ]
+                            }
+                          ),
+                          (((_m = (_l = result.metrics) == null ? void 0 : _l.issuesBySeverity) == null ? void 0 : _m.warning) ?? 0) > 0 && /* @__PURE__ */ jsxs(
+                            "span",
+                            {
+                              style: {
+                                padding: "2px 6px",
+                                borderRadius: 4,
+                                fontSize: 11,
+                                backgroundColor: getSeverityBg("warning"),
+                                color: getSeverityColor("warning")
+                              },
+                              children: [
+                                ((_o = (_n = result.metrics) == null ? void 0 : _n.issuesBySeverity) == null ? void 0 : _o.warning) ?? 0,
+                                " ",
+                                "warnings"
+                              ]
+                            }
+                          )
                         ] }),
                         /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: theme.colors.textMuted }, children: [
                           ((_p = result.metrics) == null ? void 0 : _p.filesAnalyzed) ?? 0,
@@ -2467,235 +3093,412 @@ function LensDataDebugPanel$1({
                     ]
                   }
                 ),
-                isExpanded && /* @__PURE__ */ jsxs("div", { style: {
-                  padding: 12,
-                  backgroundColor: theme.colors.backgroundLight,
-                  borderTop: `1px solid ${theme.colors.border}`
-                }, children: [
-                  /* @__PURE__ */ jsxs("div", { style: {
-                    display: "grid",
-                    gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
-                    gap: 8,
-                    marginBottom: 16,
-                    padding: 12,
-                    backgroundColor: theme.colors.surface,
-                    borderRadius: 4
-                  }, children: [
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: theme.colors.textMuted }, children: "Files Analyzed" }),
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: theme.colors.text }, children: ((_q = result.metrics) == null ? void 0 : _q.filesAnalyzed) ?? 0 })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: theme.colors.textMuted }, children: "Total Issues" }),
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: 16, fontWeight: 600, color: theme.colors.text }, children: ((_r = result.metrics) == null ? void 0 : _r.totalIssues) ?? 0 })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: theme.colors.textMuted }, children: "Duration" }),
-                      /* @__PURE__ */ jsxs("div", { style: { fontSize: 16, fontWeight: 600, color: theme.colors.text }, children: [
-                        ((_s = result.execution) == null ? void 0 : _s.duration) ?? 0,
-                        "ms"
-                      ] })
-                    ] }),
-                    result.coverage && /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: theme.colors.textMuted }, children: "Coverage" }),
-                      /* @__PURE__ */ jsxs("div", { style: { fontSize: 16, fontWeight: 600, color: theme.colors.text }, children: [
-                        result.coverage.line,
-                        "%"
-                      ] })
-                    ] })
-                  ] }),
-                  filesWithIssues.size > 0 ? /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsxs("div", { style: {
-                      fontSize: 12,
-                      fontWeight: 600,
-                      color: theme.colors.textMuted,
-                      marginBottom: 8
-                    }, children: [
-                      "Files with Issues (",
-                      filesWithIssues.size,
-                      ")"
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: Array.from(filesWithIssues.entries()).map(([file, issues]) => {
-                      const isFileExpanded = expandedFiles.has(file);
-                      return /* @__PURE__ */ jsxs(
+                isExpanded && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      padding: 12,
+                      backgroundColor: theme.colors.backgroundLight,
+                      borderTop: `1px solid ${theme.colors.border}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
                         "div",
                         {
                           style: {
-                            border: `1px solid ${theme.colors.border}`,
-                            borderRadius: 4,
-                            overflow: "hidden"
+                            display: "grid",
+                            gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))",
+                            gap: 8,
+                            marginBottom: 16,
+                            padding: 12,
+                            backgroundColor: theme.colors.surface,
+                            borderRadius: 4
                           },
                           children: [
-                            /* @__PURE__ */ jsxs(
-                              "div",
-                              {
-                                onClick: () => toggleFile(file),
-                                style: {
-                                  display: "flex",
-                                  alignItems: "center",
-                                  justifyContent: "space-between",
-                                  padding: "8px 10px",
-                                  backgroundColor: theme.colors.surface,
-                                  cursor: "pointer"
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                                    /* @__PURE__ */ jsx(
-                                      "svg",
-                                      {
-                                        width: "12",
-                                        height: "12",
-                                        viewBox: "0 0 24 24",
-                                        fill: "none",
-                                        stroke: theme.colors.textMuted,
-                                        strokeWidth: "2",
-                                        style: {
-                                          transform: isFileExpanded ? "rotate(90deg)" : "rotate(0deg)",
-                                          transition: "transform 0.15s ease"
-                                        },
-                                        children: /* @__PURE__ */ jsx("polyline", { points: "9,18 15,12 9,6" })
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsx(
-                                      "span",
-                                      {
-                                        style: {
-                                          color: theme.colors.text,
-                                          cursor: onFileClick ? "pointer" : "default"
-                                        },
-                                        onClick: (e) => {
-                                          if (onFileClick) {
-                                            e.stopPropagation();
-                                            onFileClick(file);
-                                          }
-                                        },
-                                        children: file
-                                      }
-                                    )
-                                  ] }),
-                                  /* @__PURE__ */ jsxs("span", { style: {
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: { fontSize: 11, color: theme.colors.textMuted },
+                                  children: "Files Analyzed"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: 16,
+                                    fontWeight: 600,
+                                    color: theme.colors.text
+                                  },
+                                  children: ((_q = result.metrics) == null ? void 0 : _q.filesAnalyzed) ?? 0
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: { fontSize: 11, color: theme.colors.textMuted },
+                                  children: "Total Issues"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: 16,
+                                    fontWeight: 600,
+                                    color: theme.colors.text
+                                  },
+                                  children: ((_r = result.metrics) == null ? void 0 : _r.totalIssues) ?? 0
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: { fontSize: 11, color: theme.colors.textMuted },
+                                  children: "Duration"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: 16,
+                                    fontWeight: 600,
+                                    color: theme.colors.text
+                                  },
+                                  children: [
+                                    ((_s = result.execution) == null ? void 0 : _s.duration) ?? 0,
+                                    "ms"
+                                  ]
+                                }
+                              )
+                            ] }),
+                            result.coverage && /* @__PURE__ */ jsxs("div", { children: [
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
                                     fontSize: 11,
-                                    padding: "2px 6px",
-                                    borderRadius: 4,
-                                    backgroundColor: getSeverityBg("error"),
-                                    color: getSeverityColor("error")
-                                  }, children: [
-                                    issues.length,
-                                    " issues"
-                                  ] })
-                                ]
+                                    color: theme.colors.textMuted
+                                  },
+                                  children: "Coverage"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: 16,
+                                    fontWeight: 600,
+                                    color: theme.colors.text
+                                  },
+                                  children: [
+                                    result.coverage.line,
+                                    "%"
+                                  ]
+                                }
+                              )
+                            ] })
+                          ]
+                        }
+                      ),
+                      filesWithIssues.size > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              fontSize: 12,
+                              fontWeight: 600,
+                              color: theme.colors.textMuted,
+                              marginBottom: 8
+                            },
+                            children: [
+                              "Files with Issues (",
+                              filesWithIssues.size,
+                              ")"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 4
+                            },
+                            children: Array.from(filesWithIssues.entries()).map(
+                              ([file, issues]) => {
+                                const isFileExpanded = expandedFiles.has(file);
+                                return /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      border: `1px solid ${theme.colors.border}`,
+                                      borderRadius: 4,
+                                      overflow: "hidden"
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxs(
+                                        "div",
+                                        {
+                                          onClick: () => toggleFile(file),
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "space-between",
+                                            padding: "8px 10px",
+                                            backgroundColor: theme.colors.surface,
+                                            cursor: "pointer"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxs(
+                                              "div",
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 6
+                                                },
+                                                children: [
+                                                  /* @__PURE__ */ jsx(
+                                                    "svg",
+                                                    {
+                                                      width: "12",
+                                                      height: "12",
+                                                      viewBox: "0 0 24 24",
+                                                      fill: "none",
+                                                      stroke: theme.colors.textMuted,
+                                                      strokeWidth: "2",
+                                                      style: {
+                                                        transform: isFileExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                                                        transition: "transform 0.15s ease"
+                                                      },
+                                                      children: /* @__PURE__ */ jsx("polyline", { points: "9,18 15,12 9,6" })
+                                                    }
+                                                  ),
+                                                  /* @__PURE__ */ jsx(
+                                                    "span",
+                                                    {
+                                                      style: {
+                                                        color: theme.colors.text,
+                                                        cursor: onFileClick ? "pointer" : "default"
+                                                      },
+                                                      onClick: (e) => {
+                                                        if (onFileClick) {
+                                                          e.stopPropagation();
+                                                          onFileClick(file);
+                                                        }
+                                                      },
+                                                      children: file
+                                                    }
+                                                  )
+                                                ]
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsxs(
+                                              "span",
+                                              {
+                                                style: {
+                                                  fontSize: 11,
+                                                  padding: "2px 6px",
+                                                  borderRadius: 4,
+                                                  backgroundColor: getSeverityBg("error"),
+                                                  color: getSeverityColor("error")
+                                                },
+                                                children: [
+                                                  issues.length,
+                                                  " issues"
+                                                ]
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ),
+                                      isFileExpanded && /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          style: {
+                                            padding: 8,
+                                            backgroundColor: theme.colors.background,
+                                            borderTop: `1px solid ${theme.colors.border}`,
+                                            maxHeight: 300,
+                                            overflow: "auto"
+                                          },
+                                          children: issues.map((issue, issueIdx) => /* @__PURE__ */ jsxs(
+                                            "div",
+                                            {
+                                              onClick: () => onFileClick == null ? void 0 : onFileClick(file, issue.line),
+                                              style: {
+                                                display: "flex",
+                                                gap: 8,
+                                                padding: "6px 8px",
+                                                borderRadius: 4,
+                                                cursor: onFileClick ? "pointer" : "default",
+                                                transition: "background-color 0.1s ease"
+                                              },
+                                              onMouseEnter: (e) => {
+                                                e.currentTarget.style.backgroundColor = theme.colors.surface;
+                                              },
+                                              onMouseLeave: (e) => {
+                                                e.currentTarget.style.backgroundColor = "transparent";
+                                              },
+                                              children: [
+                                                /* @__PURE__ */ jsxs(
+                                                  "span",
+                                                  {
+                                                    style: {
+                                                      fontSize: 11,
+                                                      color: theme.colors.textMuted,
+                                                      minWidth: 45
+                                                    },
+                                                    children: [
+                                                      "L",
+                                                      issue.line
+                                                    ]
+                                                  }
+                                                ),
+                                                /* @__PURE__ */ jsx(
+                                                  "span",
+                                                  {
+                                                    style: {
+                                                      fontSize: 10,
+                                                      padding: "1px 4px",
+                                                      borderRadius: 3,
+                                                      backgroundColor: getSeverityBg(
+                                                        issue.severity
+                                                      ),
+                                                      color: getSeverityColor(
+                                                        issue.severity
+                                                      ),
+                                                      textTransform: "uppercase"
+                                                    },
+                                                    children: issue.severity.charAt(0)
+                                                  }
+                                                ),
+                                                /* @__PURE__ */ jsx(
+                                                  "span",
+                                                  {
+                                                    style: {
+                                                      flex: 1,
+                                                      fontSize: 12,
+                                                      color: theme.colors.text
+                                                    },
+                                                    children: issue.message
+                                                  }
+                                                ),
+                                                issue.rule && /* @__PURE__ */ jsx(
+                                                  "span",
+                                                  {
+                                                    style: {
+                                                      fontSize: 10,
+                                                      color: theme.colors.textMuted,
+                                                      opacity: 0.7
+                                                    },
+                                                    children: issue.rule
+                                                  }
+                                                )
+                                              ]
+                                            },
+                                            issueIdx
+                                          ))
+                                        }
+                                      )
+                                    ]
+                                  },
+                                  file
+                                );
                               }
-                            ),
-                            isFileExpanded && /* @__PURE__ */ jsx("div", { style: {
+                            )
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            padding: 16,
+                            textAlign: "center",
+                            color: theme.colors.textMuted,
+                            backgroundColor: theme.colors.surface,
+                            borderRadius: 4
+                          },
+                          children: "No issues found"
+                        }
+                      ),
+                      result.fileMetrics && result.fileMetrics.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              fontSize: 12,
+                              fontWeight: 600,
+                              color: theme.colors.textMuted,
+                              marginBottom: 8
+                            },
+                            children: [
+                              "File Metrics (",
+                              result.fileMetrics.length,
+                              ")"
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 2,
                               padding: 8,
-                              backgroundColor: theme.colors.background,
-                              borderTop: `1px solid ${theme.colors.border}`,
-                              maxHeight: 300,
-                              overflow: "auto"
-                            }, children: issues.map((issue, issueIdx) => /* @__PURE__ */ jsxs(
+                              backgroundColor: theme.colors.surface,
+                              borderRadius: 4
+                            },
+                            children: result.fileMetrics.map((fm, idx2) => /* @__PURE__ */ jsxs(
                               "div",
                               {
-                                onClick: () => onFileClick == null ? void 0 : onFileClick(file, issue.line),
                                 style: {
                                   display: "flex",
-                                  gap: 8,
-                                  padding: "6px 8px",
-                                  borderRadius: 4,
-                                  cursor: onFileClick ? "pointer" : "default",
-                                  transition: "background-color 0.1s ease"
-                                },
-                                onMouseEnter: (e) => {
-                                  e.currentTarget.style.backgroundColor = theme.colors.surface;
-                                },
-                                onMouseLeave: (e) => {
-                                  e.currentTarget.style.backgroundColor = "transparent";
+                                  alignItems: "center",
+                                  justifyContent: "space-between",
+                                  padding: "4px 8px"
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsxs("span", { style: {
-                                    fontSize: 11,
-                                    color: theme.colors.textMuted,
-                                    minWidth: 45
-                                  }, children: [
-                                    "L",
-                                    issue.line
-                                  ] }),
-                                  /* @__PURE__ */ jsx("span", { style: {
-                                    fontSize: 10,
-                                    padding: "1px 4px",
-                                    borderRadius: 3,
-                                    backgroundColor: getSeverityBg(issue.severity),
-                                    color: getSeverityColor(issue.severity),
-                                    textTransform: "uppercase"
-                                  }, children: issue.severity.charAt(0) }),
-                                  /* @__PURE__ */ jsx("span", { style: {
-                                    flex: 1,
-                                    fontSize: 12,
-                                    color: theme.colors.text
-                                  }, children: issue.message }),
-                                  issue.rule && /* @__PURE__ */ jsx("span", { style: {
-                                    fontSize: 10,
-                                    color: theme.colors.textMuted,
-                                    opacity: 0.7
-                                  }, children: issue.rule })
+                                  /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      style: { color: theme.colors.text, fontSize: 12 },
+                                      children: fm.file
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs(
+                                    "span",
+                                    {
+                                      style: {
+                                        fontSize: 12,
+                                        fontWeight: 500,
+                                        color: fm.score >= 80 ? "#22c55e" : fm.score >= 60 ? "#f59e0b" : "#ef4444"
+                                      },
+                                      children: [
+                                        fm.score,
+                                        "%"
+                                      ]
+                                    }
+                                  )
                                 ]
                               },
-                              issueIdx
-                            )) })
-                          ]
-                        },
-                        file
-                      );
-                    }) })
-                  ] }) : /* @__PURE__ */ jsx("div", { style: {
-                    padding: 16,
-                    textAlign: "center",
-                    color: theme.colors.textMuted,
-                    backgroundColor: theme.colors.surface,
-                    borderRadius: 4
-                  }, children: "No issues found" }),
-                  result.fileMetrics && result.fileMetrics.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
-                    /* @__PURE__ */ jsxs("div", { style: {
-                      fontSize: 12,
-                      fontWeight: 600,
-                      color: theme.colors.textMuted,
-                      marginBottom: 8
-                    }, children: [
-                      "File Metrics (",
-                      result.fileMetrics.length,
-                      ")"
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      gap: 2,
-                      padding: 8,
-                      backgroundColor: theme.colors.surface,
-                      borderRadius: 4
-                    }, children: result.fileMetrics.map((fm, idx2) => /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          padding: "4px 8px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx("span", { style: { color: theme.colors.text, fontSize: 12 }, children: fm.file }),
-                          /* @__PURE__ */ jsxs("span", { style: {
-                            fontSize: 12,
-                            fontWeight: 500,
-                            color: fm.score >= 80 ? "#22c55e" : fm.score >= 60 ? "#f59e0b" : "#ef4444"
-                          }, children: [
-                            fm.score,
-                            "%"
-                          ] })
-                        ]
-                      },
-                      idx2
-                    )) })
-                  ] })
-                ] })
+                              idx2
+                            ))
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
               ]
             },
             lensKey
@@ -2738,45 +3541,68 @@ const LensDataDebugPanelContent = ({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          height: 40,
-          flexShrink: 0,
-          padding: "0 16px",
-          borderBottom: `1px solid ${theme.colors.border}`,
-          boxSizing: "border-box"
-        }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-            /* @__PURE__ */ jsx(Bug, { size: 18, color: theme.colors.primary }),
-            /* @__PURE__ */ jsx(
-              "h2",
-              {
-                style: {
-                  margin: 0,
-                  fontSize: 14,
-                  fontWeight: 600,
-                  color: theme.colors.text
-                },
-                children: "Lens Data Debug"
-              }
-            )
-          ] }),
-          (lensResultsSlice == null ? void 0 : lensResultsSlice.data) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, fontSize: 11, color: theme.colors.textMuted }, children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              new Set(lensResultsSlice.data.results.map((r2) => {
-                var _a;
-                return ((_a = r2.package) == null ? void 0 : _a.name) ?? "unknown";
-              })).size,
-              " packages"
-            ] }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              lensResultsSlice.data.results.length,
-              " results"
-            ] })
-          ] })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              height: 40,
+              flexShrink: 0,
+              padding: "0 16px",
+              borderBottom: `1px solid ${theme.colors.border}`,
+              boxSizing: "border-box"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ jsx(Bug, { size: 18, color: theme.colors.primary }),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: theme.colors.text
+                    },
+                    children: "Lens Data Debug"
+                  }
+                )
+              ] }),
+              (lensResultsSlice == null ? void 0 : lensResultsSlice.data) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    fontSize: 11,
+                    color: theme.colors.textMuted
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      new Set(
+                        lensResultsSlice.data.results.map(
+                          (r2) => {
+                            var _a;
+                            return ((_a = r2.package) == null ? void 0 : _a.name) ?? "unknown";
+                          }
+                        )
+                      ).size,
+                      " ",
+                      "packages"
+                    ] }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      lensResultsSlice.data.results.length,
+                      " results"
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -2785,19 +3611,38 @@ const LensDataDebugPanelContent = ({
               minHeight: 0,
               overflow: "auto"
             },
-            children: isLoading ? /* @__PURE__ */ jsx("div", { style: {
-              padding: 40,
-              textAlign: "center",
-              color: theme.colors.textMuted
-            }, children: "Loading lens results..." }) : !hasSlice || !(lensResultsSlice == null ? void 0 : lensResultsSlice.data) ? /* @__PURE__ */ jsxs("div", { style: {
-              padding: 40,
-              textAlign: "center",
-              color: theme.colors.textMuted
-            }, children: [
-              /* @__PURE__ */ jsx(Bug, { size: 48, color: theme.colors.border, style: { marginBottom: 16 } }),
-              /* @__PURE__ */ jsx("div", { style: { fontSize: 14, marginBottom: 8 }, children: "No lens data available" }),
-              /* @__PURE__ */ jsx("div", { style: { fontSize: 12 }, children: "Run quality-lens-cli or check that the lensResults slice is configured." })
-            ] }) : /* @__PURE__ */ jsx(
+            children: isLoading ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: 40,
+                  textAlign: "center",
+                  color: theme.colors.textMuted
+                },
+                children: "Loading lens results..."
+              }
+            ) : !hasSlice || !(lensResultsSlice == null ? void 0 : lensResultsSlice.data) ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: 40,
+                  textAlign: "center",
+                  color: theme.colors.textMuted
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Bug,
+                    {
+                      size: 48,
+                      color: theme.colors.border,
+                      style: { marginBottom: 16 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 14, marginBottom: 8 }, children: "No lens data available" }),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 12 }, children: "Run quality-lens-cli or check that the lensResults slice is configured." })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(
               LensDataDebugPanel$1,
               {
                 data: lensResultsSlice.data,
@@ -2881,10 +3726,26 @@ function getMetricIcon(key) {
 }
 const METRIC_CONFIG = [
   { key: "types", label: "Types", description: "Type safety score" },
-  { key: "documentation", label: "Documentation", description: "Documentation coverage" },
-  { key: "tests", label: "Tests", description: "Test coverage and passing rate" },
-  { key: "deadCode", label: "Dead Code", description: "Unused code detected" },
-  { key: "formatting", label: "Formatting", description: "Code formatting consistency" },
+  {
+    key: "documentation",
+    label: "Documentation",
+    description: "Documentation coverage"
+  },
+  {
+    key: "tests",
+    label: "Tests",
+    description: "Test coverage and passing rate"
+  },
+  {
+    key: "deadCode",
+    label: "Dead Code",
+    description: "Unused code detected"
+  },
+  {
+    key: "formatting",
+    label: "Formatting",
+    description: "Code formatting consistency"
+  },
   { key: "linting", label: "Linting", description: "Linting compliance" }
 ];
 function QualityMetricsList({