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

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
  *
@@ -1471,6 +1482,17 @@ 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;
@@ -1536,7 +1558,8 @@ const QualityHexagonPanelContent = ({
         overflowY: "auto",
         boxSizing: "border-box",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        position: "relative"
       },
       children: [
         /* @__PURE__ */ jsxs("div", { style: {
@@ -1565,7 +1588,8 @@ const QualityHexagonPanelContent = ({
           /* @__PURE__ */ jsx(
             "span",
             {
-              title: "Platinum: 90%+ avg | Gold: 75%+ | Silver: 60%+ | Bronze: 40%+",
+              onClick: () => setShowHelpOverlay(true),
+              title: "Click for help",
               style: {
                 display: "inline-flex",
                 alignItems: "center",
@@ -1576,7 +1600,7 @@ const QualityHexagonPanelContent = ({
                 border: `1px solid ${theme.colors.border}`,
                 fontSize: 11,
                 color: theme.colors.textMuted,
-                cursor: "help"
+                cursor: "pointer"
               },
               children: "?"
             }
@@ -1649,6 +1673,133 @@ const QualityHexagonPanelContent = ({
               );
             }) })
           }
+        ),
+        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}`
+                },
+                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" })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          }
         )
       ]
     }
@@ -1873,11 +2024,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,
@@ -1891,16 +2037,8 @@ function RepositoryQualityGrid({
   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",