@principal-ade/code-quality-panels 0.1.13 → 0.1.15

package/dist/panels.bundle.js

@@ -106,47 +106,121 @@ 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$7 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$7);
+const __iconNode$d = [
+  ["path", { d: "M12 7v14", key: "1akyts" }],
+  [
+    "path",
+    {
+      d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+      key: "ruj8y"
+    }
+  ]
+];
+const BookOpen = createLucideIcon("book-open", __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$c = [
+  [
+    "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" }
+  ],
+  [
+    "path",
+    {
+      d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",
+      key: "e1hn23"
+    }
+  ]
+];
+const Braces = createLucideIcon("braces", __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$6 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$6);
+const __iconNode$b = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$5 = [
+const __iconNode$a = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$9 = [
   ["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$5);
+const Copy = createLucideIcon("copy", __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$4 = [
+const __iconNode$8 = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["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);
+/**
+ * @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 = [
+  [
+    "path",
+    {
+      d: "M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2",
+      key: "18mbvz"
+    }
+  ],
+  ["path", { d: "M6.453 15h11.094", key: "3shlmq" }],
+  ["path", { d: "M8.5 2h7", key: "csnxdl" }]
+];
+const FlaskConical = createLucideIcon("flask-conical", __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$6 = [
   ["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$4);
+const GitBranch = createLucideIcon("git-branch", __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$3 = [
+const __iconNode$5 = [
   [
     "path",
     {
@@ -155,30 +229,63 @@ const __iconNode$3 = [
     }
   ]
 ];
-const Hexagon = createLucideIcon("hexagon", __iconNode$3);
+const Hexagon = createLucideIcon("hexagon", __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$2 = [
+const __iconNode$4 = [
   ["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$2);
+const Info = createLucideIcon("info", __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$1 = [
+const __iconNode$3 = [
+  [
+    "path",
+    {
+      d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
+      key: "1s2grr"
+    }
+  ],
+  ["path", { d: "M20 2v4", key: "1rf3ol" }],
+  ["path", { d: "M22 4h-4", key: "gwowj6" }],
+  ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
+];
+const Sparkles = createLucideIcon("sparkles", __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$2 = [
   ["path", { d: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ];
-const Terminal = createLucideIcon("terminal", __iconNode$1);
+const Terminal = createLucideIcon("terminal", __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: "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);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -661,7 +768,8 @@ function QualityHexagonExpandable({
   onRefresh,
   isRefreshing = false,
   defaultExpanded = false,
-  onExpandChange
+  onExpandChange,
+  onMetricClick
 }) {
   const [expanded, setExpanded] = React2.useState(defaultExpanded);
   const handleToggleExpand = React2.useCallback(() => {
@@ -802,11 +910,28 @@ function QualityHexagonExpandable({
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onMetricClick == null ? void 0 : onMetricClick(key);
+                  },
                   style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    gap: 12
+                    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: {
@@ -939,12 +1064,12 @@ const CommandLine = ({ command, theme, label }) => {
 };
 const MetricsPreview = ({ theme }) => {
   const metrics = [
-    { key: "tests", label: "Tests", description: "Test coverage & pass rate", icon: "🧪" },
-    { key: "linting", label: "Linting", description: "ESLint code quality", icon: "📝" },
-    { key: "types", label: "Types", description: "TypeScript type safety", icon: "🔷" },
-    { key: "formatting", label: "Formatting", description: "Prettier code style", icon: "✨" },
-    { key: "deadCode", label: "Dead Code", description: "Unused exports & deps", icon: "🧹" },
-    { key: "documentation", label: "Docs", description: "Code documentation", icon: "📚" }
+    { key: "tests", label: "Tests", description: "Test coverage & pass rate", Icon: FlaskConical },
+    { key: "linting", label: "Linting", description: "ESLint code quality", Icon: FileSearch },
+    { key: "types", label: "Types", description: "TypeScript type safety", Icon: Braces },
+    { key: "formatting", label: "Formatting", description: "Prettier code style", Icon: Sparkles },
+    { key: "deadCode", label: "Dead Code", description: "Unused exports & deps", Icon: Trash2 },
+    { key: "documentation", label: "Docs", description: "Code documentation", Icon: BookOpen }
   ];
   return /* @__PURE__ */ jsx(
     "div",
@@ -970,7 +1095,7 @@ const MetricsPreview = ({ theme }) => {
             fontSize: 12
           },
           children: [
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: m.icon }),
+            /* @__PURE__ */ jsx(m.Icon, { size: 14, color: theme.colors.textMuted }),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
               /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: theme.colors.text }, children: m.label }),
               /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: theme.colors.textMuted }, children: m.description })
@@ -1306,14 +1431,14 @@ const mockPackages = [
     }
   }
 ];
-const METRIC_OPTIONS$1 = [
-  { key: "types", label: "Types", colorMode: "typescript" },
-  { key: "documentation", label: "Docs", colorMode: "alexandria" },
-  { key: "tests", label: "Tests", colorMode: "coverage" },
-  { key: "deadCode", label: "Dead Code", colorMode: "knip" },
-  { key: "formatting", label: "Format", colorMode: "prettier" },
-  { key: "linting", label: "Linting", colorMode: "eslint" }
-];
+const METRIC_TO_COLOR_MODE = {
+  types: "typescript",
+  documentation: "alexandria",
+  tests: "coverage",
+  deadCode: "knip",
+  formatting: "prettier",
+  linting: "eslint"
+};
 const QualityHexagonPanelContent = ({
   context,
   events
@@ -1321,7 +1446,6 @@ const QualityHexagonPanelContent = ({
   var _a;
   const { theme } = useTheme();
   const [refreshingPackages, setRefreshingPackages] = React2__default.useState(/* @__PURE__ */ new Set());
-  const [selectedMetric, setSelectedMetric] = React2__default.useState(null);
   const qualitySlice = context.getSlice("quality");
   const hasQualitySlice = context.hasSlice("quality");
   const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
@@ -1350,31 +1474,6 @@ const QualityHexagonPanelContent = ({
       setRefreshingPackages(/* @__PURE__ */ new Set());
     }
   };
-  const handleMetricChange = (metric) => {
-    setSelectedMetric(metric);
-    if (metric) {
-      const option = METRIC_OPTIONS$1.find((o) => o.key === metric);
-      if (option) {
-        events.emit({
-          type: "quality:colorMode:select",
-          source: "principal-ade.quality-hexagon-panel",
-          timestamp: Date.now(),
-          payload: {
-            colorMode: option.colorMode
-          }
-        });
-      }
-    } else {
-      events.emit({
-        type: "quality:colorMode:select",
-        source: "principal-ade.quality-hexagon-panel",
-        timestamp: Date.now(),
-        payload: {
-          colorMode: "fileTypes"
-        }
-      });
-    }
-  };
   React2__default.useEffect(() => {
     const unsubscribers = [
       events.on("principal-ade.quality-panel:refresh", async () => {
@@ -1400,7 +1499,7 @@ const QualityHexagonPanelContent = ({
       documentation: acc.documentation + pkg.metrics.documentation / packages.length
     }), { tests: 0, deadCode: 0, linting: 0, formatting: 0, types: 0, documentation: 0 })
   ) : "none";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -1410,83 +1509,73 @@ const QualityHexagonPanelContent = ({
         backgroundColor: theme.colors.background,
         color: theme.colors.text,
         overflowY: "auto",
-        boxSizing: "border-box"
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column"
       },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            padding: 20,
-            display: "flex",
-            flexDirection: "column",
-            gap: 16
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }, children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-                /* @__PURE__ */ jsx(Hexagon, { size: 24, color: tierColors[overallTier] }),
-                /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    style: {
-                      margin: 0,
-                      fontSize: 20,
-                      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: 18,
-                      height: 18,
-                      borderRadius: "50%",
-                      border: `1px solid ${theme.colors.border}`,
-                      fontSize: 12,
-                      color: theme.colors.textMuted,
-                      cursor: "help"
-                    },
-                    children: "?"
-                  }
-                ),
-                packages.length > 1 && /* @__PURE__ */ jsxs("span", { style: {
-                  fontSize: 14,
-                  color: theme.colors.textMuted
-                }, children: [
-                  packages.length,
-                  " packages"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "select",
-                {
-                  value: selectedMetric ?? "",
-                  onChange: (e) => handleMetricChange(e.target.value ? e.target.value : null),
-                  style: {
-                    padding: "6px 12px",
-                    fontSize: 13,
-                    backgroundColor: theme.colors.background,
-                    color: theme.colors.text,
-                    border: `1px solid ${theme.colors.border}`,
-                    borderRadius: 4,
-                    cursor: "pointer",
-                    outline: "none"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", children: "Show in File City..." }),
-                    METRIC_OPTIONS$1.map((option) => /* @__PURE__ */ jsx("option", { value: option.key, children: option.label }, option.key))
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 16, minHeight: 0 }, children: isLoading ? /* @__PURE__ */ jsx("div", { style: {
+      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__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: 16,
+              display: "flex",
+              flexDirection: "column",
+              gap: 16,
+              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
@@ -1518,14 +1607,25 @@ const QualityHexagonPanelContent = ({
                         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
               );
             }) })
-          ]
-        }
-      )
+          }
+        )
+      ]
     }
   );
 };