@principal-ade/code-quality-panels 0.1.0 → 0.1.2

package/dist/panels.bundle.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React2, { forwardRef, createElement, createContext, useState, useEffect, useContext } from "react";
+import * as React2 from "react";
+import React2__default, { forwardRef, createElement, createContext, useState, useEffect, useContext } from "react";
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -105,7 +106,34 @@ 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 = [
+const __iconNode$4 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$4);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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 = [
+  ["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$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",
     {
@@ -114,7 +142,18 @@ const __iconNode = [
     }
   ]
 ];
-const Hexagon = createLucideIcon("hexagon", __iconNode);
+const Hexagon = createLucideIcon("hexagon", __iconNode$1);
+/**
+ * @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 = [
+  ["path", { d: "M12 19h8", key: "baeox8" }],
+  ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
+];
+const Terminal = createLucideIcon("terminal", __iconNode);
 var terminalTheme = {
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   fonts: {
@@ -296,7 +335,7 @@ var ThemeProvider = ({
   initialMode
 }) => {
   const [mode, setMode] = useState(initialMode);
-  const activeTheme = React2.useMemo(() => {
+  const activeTheme = React2__default.useMemo(() => {
     if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
       return customTheme;
     }
@@ -325,7 +364,7 @@ var ThemeProvider = ({
     mode,
     setMode
   };
-  return /* @__PURE__ */ React2.createElement(ThemeContextSingleton.Provider, {
+  return /* @__PURE__ */ React2__default.createElement(ThemeContextSingleton.Provider, {
     value
   }, children);
 };
@@ -404,7 +443,10 @@ function QualityHexagon({
   theme: theme2,
   showLabels = false,
   showValues = false,
-  className
+  className,
+  onVertexHover,
+  onVertexLeave,
+  onVertexClick
 }) {
   const themeColors = getThemeColors(theme2);
   const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
@@ -484,38 +526,71 @@ function QualityHexagon({
             style: { transition: "all 0.5s ease" }
           }
         ),
-        metricConfig.map(({ key, angle }) => {
-          let value = metrics[key];
+        metricConfig.map(({ key, label, color, angle }) => {
+          const rawValue = metrics[key];
+          let value = rawValue;
           if (key === "deadCode") {
             value = 100 - value;
           }
           const point = calculateMetricPoint(center, radius, angle, 100);
           const dataPoint = calculateMetricPoint(center, radius, angle, value);
-          return /* @__PURE__ */ jsxs("g", { children: [
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: point.x,
-                cy: point.y,
-                r: dotSize,
-                fill: "white",
-                stroke: colors.stroke,
-                strokeWidth: 1.5
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: dataPoint.x,
-                cy: dataPoint.y,
-                r: dotSize * 0.7,
-                fill: colors.fill,
-                stroke: colors.stroke,
-                strokeWidth: 1,
-                style: { opacity: 0.9 }
-              }
-            )
-          ] }, key);
+          const vertexInfo = {
+            key,
+            label,
+            value: rawValue,
+            color
+          };
+          const handleMouseEnter = () => {
+            onVertexHover == null ? void 0 : onVertexHover(vertexInfo);
+          };
+          const handleClick = (e) => {
+            e.stopPropagation();
+            onVertexClick == null ? void 0 : onVertexClick(vertexInfo);
+          };
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              onMouseEnter: handleMouseEnter,
+              onMouseLeave: onVertexLeave,
+              onClick: handleClick,
+              style: { cursor: onVertexHover || onVertexClick ? "pointer" : "default" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: point.x,
+                    cy: point.y,
+                    r: dotSize * 2.5,
+                    fill: "transparent"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: point.x,
+                    cy: point.y,
+                    r: dotSize,
+                    fill: "white",
+                    stroke: colors.stroke,
+                    strokeWidth: 1.5
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: dataPoint.x,
+                    cy: dataPoint.y,
+                    r: dotSize * 0.7,
+                    fill: colors.fill,
+                    stroke: colors.stroke,
+                    strokeWidth: 1,
+                    style: { opacity: 0.9 }
+                  }
+                )
+              ]
+            },
+            key
+          );
         }),
         /* @__PURE__ */ jsx(
           "text",
@@ -726,6 +801,202 @@ function QualityHexagonDetailed({
     }
   );
 }
+function QualityHexagonExpandable({
+  metrics,
+  tier,
+  theme: theme2,
+  className,
+  packageName,
+  packageVersion,
+  onRefresh,
+  isRefreshing = false,
+  defaultExpanded = false
+}) {
+  const [expanded, setExpanded] = React2.useState(defaultExpanded);
+  const themeColors = getThemeColors(theme2);
+  const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
+  const metricConfig = getMetricConfig(themeColors);
+  const hasHeader = packageName || onRefresh;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        padding: 16,
+        borderRadius: 8,
+        backgroundColor: colors.bg,
+        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: theme2.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: theme2.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 ${theme2.colors.border}`,
+                borderRadius: 4,
+                background: theme2.colors.surface,
+                color: theme2.colors.textMuted,
+                cursor: isRefreshing ? "not-allowed" : "pointer",
+                opacity: isRefreshing ? 0.6 : 1
+              },
+              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",
+          {
+            onClick: () => setExpanded(!expanded),
+            style: {
+              cursor: "pointer",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsx(
+              QualityHexagon,
+              {
+                metrics,
+                tier,
+                theme: theme2,
+                showLabels: true,
+                showValues: false
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              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 ${theme2.colors.border}`,
+              marginTop: 8
+            }, children: metricConfig.map(({ key, label, color }) => {
+              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: theme2.colors.textMuted
+                }, children: [
+                  label,
+                  key === "deadCode" ? " ↓" : ""
+                ] }),
+                /* @__PURE__ */ jsxs("span", { style: {
+                  fontSize: 14,
+                  fontWeight: 500,
+                  color
+                }, children: [
+                  value,
+                  "%"
+                ] })
+              ] }, key);
+            }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => setExpanded(!expanded),
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              cursor: "pointer",
+              padding: 4
+            },
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: theme2.colors.textMuted,
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: {
+                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.3s ease"
+                },
+                children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function calculateQualityTier(metrics) {
   const metricsForAverage = { ...metrics };
   metricsForAverage.deadCode = 100 - metricsForAverage.deadCode;
@@ -736,6 +1007,322 @@ function calculateQualityTier(metrics) {
   if (average >= 40) return "bronze";
   return "none";
 }
+const WORKFLOW_FILE_PATH = ".github/workflows/quality-lens.yml";
+function checkFileExistsInTree(treeData, targetPath) {
+  if (!(treeData == null ? void 0 : treeData.allFiles)) return false;
+  const normalizedTarget = targetPath.replace(/^\//, "").toLowerCase();
+  return treeData.allFiles.some((file) => {
+    const filePath = (file.relativePath || file.path || "").toLowerCase();
+    return filePath.endsWith(normalizedTarget) || filePath === normalizedTarget;
+  });
+}
+const CommandLine = ({ command, theme: theme2 }) => {
+  const [copied, setCopied] = React2__default.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      console.log("Copy:", command);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "10px 14px",
+        borderRadius: 6,
+        backgroundColor: theme2.colors.background,
+        border: `1px solid ${theme2.colors.border}`,
+        fontFamily: "monospace",
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ jsx("code", { style: { color: theme2.colors.text }, children: command }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopy,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 4,
+              border: "none",
+              backgroundColor: "transparent",
+              color: theme2.colors.textMuted,
+              cursor: "pointer"
+            },
+            title: "Copy command",
+            children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme2.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+const QualityEmptyState = ({
+  theme: theme2,
+  hasWorkflow
+}) => {
+  if (hasWorkflow) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          padding: "16px 0",
+          gap: 16,
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                margin: 0,
+                fontSize: 14,
+                color: theme2.colors.textMuted,
+                lineHeight: 1.5
+              },
+              children: "Quality metrics will appear here after your next CI run completes."
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "10px 14px",
+                borderRadius: 6,
+                backgroundColor: `${theme2.colors.success}15`,
+                color: theme2.colors.success,
+                fontSize: 13
+              },
+              children: [
+                /* @__PURE__ */ jsx(Check, { size: 16 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Workflow detected at ",
+                  WORKFLOW_FILE_PATH
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        padding: "16px 0",
+        gap: 16,
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: 14,
+              color: theme2.colors.textMuted,
+              lineHeight: 1.5
+            },
+            children: "Track your code quality with automated analysis of tests, linting, types, formatting, dead code, and documentation."
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 16,
+              padding: 20,
+              borderRadius: 8,
+              backgroundColor: theme2.colors.surface,
+              border: `1px solid ${theme2.colors.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    marginBottom: 4
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Terminal, { size: 20, color: theme2.colors.text }),
+                    /* @__PURE__ */ jsx(
+                      "h4",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: 15,
+                          fontWeight: 600,
+                          color: theme2.colors.text
+                        },
+                        children: "Get Started"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 8,
+                      fontSize: 13,
+                      color: theme2.colors.textMuted
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            backgroundColor: theme2.colors.primary,
+                            color: theme2.colors.background,
+                            fontSize: 11,
+                            fontWeight: 600
+                          },
+                          children: "1"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: "Install the CLI" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CommandLine,
+                  {
+                    command: "npm install -g @principal-ai/quality-lens-cli",
+                    theme: theme2
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 8,
+                      fontSize: 13,
+                      color: theme2.colors.textMuted
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            backgroundColor: theme2.colors.primary,
+                            color: theme2.colors.background,
+                            fontSize: 11,
+                            fontWeight: 600
+                          },
+                          children: "2"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: "Check what quality tools are available" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens list", theme: theme2 })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 8,
+                      fontSize: 13,
+                      color: theme2.colors.textMuted
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            backgroundColor: theme2.colors.primary,
+                            color: theme2.colors.background,
+                            fontSize: 11,
+                            fontWeight: 600
+                          },
+                          children: "3"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: "Set up the GitHub Action" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens init", theme: theme2 })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    paddingTop: 8,
+                    fontSize: 13,
+                    color: theme2.colors.textMuted
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronRight, { size: 14 }),
+                    /* @__PURE__ */ jsx("span", { children: "Then commit and push to start tracking quality" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 const mockPackages = [
   {
     name: "@principal-ade/code-quality-panels",
@@ -756,11 +1343,15 @@ const QualityHexagonPanelContent = ({
 }) => {
   var _a;
   const { theme: theme2 } = useTheme();
-  const [refreshingPackages, setRefreshingPackages] = React2.useState(/* @__PURE__ */ new Set());
+  const [refreshingPackages, setRefreshingPackages] = React2__default.useState(/* @__PURE__ */ new Set());
   const qualitySlice = context.getSlice("quality");
   const hasQualitySlice = context.hasSlice("quality");
   const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
-  const packages = React2.useMemo(() => {
+  const fileTreeSlice = context.getSlice("fileTree");
+  const hasWorkflow = React2__default.useMemo(() => {
+    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;
     if ((_a2 = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a2.packages) {
       return qualitySlice.data.packages;
@@ -770,20 +1361,6 @@ const QualityHexagonPanelContent = ({
     }
     return mockPackages;
   }, [(_a = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a.packages, hasQualitySlice]);
-  const handleRefreshPackage = async (packageName) => {
-    setRefreshingPackages((prev) => new Set(prev).add(packageName));
-    try {
-      if (context.hasSlice("quality")) {
-        await context.refresh("repository", "quality");
-      }
-    } finally {
-      setRefreshingPackages((prev) => {
-        const next = new Set(prev);
-        next.delete(packageName);
-        return next;
-      });
-    }
-  };
   const handleRefreshAll = async () => {
     const allNames = packages.map((p) => p.name);
     setRefreshingPackages(new Set(allNames));
@@ -795,7 +1372,7 @@ const QualityHexagonPanelContent = ({
       setRefreshingPackages(/* @__PURE__ */ new Set());
     }
   };
-  React2.useEffect(() => {
+  React2__default.useEffect(() => {
     const unsubscribers = [
       events.on("principal-ade.quality-panel:refresh", async () => {
         await handleRefreshAll();
@@ -820,93 +1397,679 @@ 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__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
-        padding: 20,
         fontFamily: theme2.fonts.body,
         height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        gap: 16,
+        minHeight: 0,
         backgroundColor: theme2.colors.background,
         color: theme2.colors.text,
         overflowY: "auto",
         boxSizing: "border-box"
       },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: 20,
+            display: "flex",
+            flexDirection: "column",
+            gap: 16
+          },
+          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: theme2.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 ${theme2.colors.border}`,
+                    fontSize: 12,
+                    color: theme2.colors.textMuted,
+                    cursor: "help"
+                  },
+                  children: "?"
+                }
+              ),
+              packages.length > 1 && /* @__PURE__ */ jsxs("span", { style: {
+                fontSize: 14,
+                color: theme2.colors.textMuted
+              }, children: [
+                packages.length,
+                " packages"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 16, minHeight: 0 }, children: isLoading ? /* @__PURE__ */ jsx("div", { style: {
+              padding: 40,
+              textAlign: "center",
+              color: theme2.colors.textMuted
+            }, children: "Loading quality metrics..." }) : packages.length === 0 ? /* @__PURE__ */ jsx(
+              QualityEmptyState,
+              {
+                theme: theme2,
+                hasWorkflow
+              }
+            ) : packages.map((pkg) => {
+              const tier = calculateQualityTier(pkg.metrics);
+              return /* @__PURE__ */ jsx(
+                QualityHexagonExpandable,
+                {
+                  metrics: pkg.metrics,
+                  tier,
+                  theme: theme2,
+                  packageName: pkg.name,
+                  packageVersion: pkg.version
+                },
+                pkg.name
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+};
+const QualityHexagonPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(QualityHexagonPanelContent, { ...props }) });
+};
+const METRIC_OPTIONS = [
+  { key: "types", label: "Types" },
+  { key: "documentation", label: "Docs" },
+  { key: "tests", label: "Tests" },
+  { key: "deadCode", label: "Dead Code" },
+  { key: "formatting", label: "Format" },
+  { key: "linting", label: "Linting" }
+];
+function flattenRepositories(repositories) {
+  const items = [];
+  for (const repo of repositories) {
+    for (const pkg of repo.packages) {
+      items.push({
+        key: `${repo.id}:${pkg.name}`,
+        repositoryId: repo.id,
+        repositoryName: repo.name,
+        packageName: pkg.name,
+        version: pkg.version,
+        metrics: pkg.metrics,
+        tier: calculateQualityTier(pkg.metrics)
+      });
+    }
+  }
+  return items;
+}
+function calculateOverallTier(items) {
+  if (items.length === 0) return "none";
+  const avgMetrics = items.reduce(
+    (acc, item) => ({
+      tests: acc.tests + item.metrics.tests / items.length,
+      deadCode: acc.deadCode + item.metrics.deadCode / items.length,
+      linting: acc.linting + item.metrics.linting / items.length,
+      formatting: acc.formatting + item.metrics.formatting / items.length,
+      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 }
+  );
+  return calculateQualityTier(avgMetrics);
+}
+function formatLabel(item, showRepositoryName, isSameAsRepo) {
+  if (!showRepositoryName || isSameAsRepo) {
+    return item.packageName;
+  }
+  return `${item.repositoryName} / ${item.packageName}`;
+}
+function getValueColor(value, key, theme2) {
+  const effectiveValue = key === "deadCode" ? 100 - value : value;
+  if (effectiveValue >= 80) return theme2.colors.success;
+  if (effectiveValue >= 60) return theme2.colors.warning;
+  return theme2.colors.error;
+}
+function RepositoryQualityGridItem({
+  item,
+  theme: theme2,
+  onClick,
+  onVertexClick,
+  showRepositoryName = true,
+  selectedMetric,
+  className
+}) {
+  const [hoveredVertex, setHoveredVertex] = React2.useState(null);
+  const isSameAsRepo = item.packageName === item.repositoryName;
+  const label = formatLabel(item, showRepositoryName, isSameAsRepo);
+  const tierColors = {
+    none: theme2.colors.muted,
+    bronze: theme2.colors.warning,
+    silver: theme2.colors.secondary,
+    gold: theme2.colors.accent,
+    platinum: theme2.colors.primary
+  };
+  const displayInfo = React2.useMemo(() => {
+    if (selectedMetric) {
+      const option = METRIC_OPTIONS.find((o) => o.key === selectedMetric);
+      if (option) {
+        const value = item.metrics[selectedMetric];
+        return {
+          label: option.label,
+          value,
+          valueColor: getValueColor(value, selectedMetric, theme2)
+        };
+      }
+    }
+    if (hoveredVertex) {
+      return {
+        label: hoveredVertex.label,
+        value: hoveredVertex.value,
+        valueColor: getValueColor(hoveredVertex.value, hoveredVertex.key, theme2)
+      };
+    }
+    return null;
+  }, [selectedMetric, hoveredVertex, item.metrics, theme2]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      onClick,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 8,
+        padding: 12,
+        borderRadius: 8,
+        backgroundColor: theme2.colors.surface,
+        border: `1px solid ${theme2.colors.border}`,
+        cursor: onClick ? "pointer" : "default",
+        transition: "all 0.2s ease"
+      },
+      onMouseEnter: (e) => {
+        if (onClick) {
+          e.currentTarget.style.borderColor = tierColors[item.tier];
+          e.currentTarget.style.transform = "translateY(-2px)";
+        }
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = theme2.colors.border;
+        e.currentTarget.style.transform = "translateY(0)";
+        setHoveredVertex(null);
+      },
       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: theme2.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 ${theme2.colors.border}`,
-                fontSize: 12,
-                color: theme2.colors.textMuted,
-                cursor: "help"
-              },
-              children: "?"
-            }
-          ),
-          packages.length > 1 && /* @__PURE__ */ jsxs("span", { style: {
-            fontSize: 14,
-            color: theme2.colors.textMuted
-          }, children: [
-            packages.length,
-            " packages"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: isLoading ? /* @__PURE__ */ jsx("div", { style: {
-          padding: 40,
-          textAlign: "center",
-          color: theme2.colors.textMuted
-        }, children: "Loading quality metrics..." }) : packages.length === 0 ? /* @__PURE__ */ jsx("div", { style: {
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              height: 24,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 8,
+              width: "100%",
+              minHeight: 24
+            },
+            children: displayInfo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: theme2.colors.text
+                  },
+                  children: displayInfo.label
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: displayInfo.valueColor
+                  },
+                  children: [
+                    displayInfo.value,
+                    "%"
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: theme2.colors.textMuted }, children: "Hover a corner" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsx(
+          QualityHexagon,
+          {
+            metrics: item.metrics,
+            tier: item.tier,
+            theme: theme2,
+            showLabels: false,
+            showValues: false,
+            onVertexHover: setHoveredVertex,
+            onVertexLeave: () => setHoveredVertex(null),
+            onVertexClick: onVertexClick ? (vertex) => onVertexClick(item, vertex) : void 0
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: theme2.colors.text,
+                    textAlign: "center"
+                  },
+                  children: label
+                }
+              ),
+              item.version && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: 10,
+                    color: theme2.colors.textMuted
+                  },
+                  children: [
+                    "v",
+                    item.version
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+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: theme2,
+  onItemClick,
+  onVertexClick,
+  className,
+  showRepositoryName = true,
+  showSummary = true
+}) {
+  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]);
+  const tierColors = {
+    none: theme2.colors.muted,
+    bronze: theme2.colors.warning,
+    silver: theme2.colors.secondary,
+    gold: theme2.colors.accent,
+    platinum: theme2.colors.primary
+  };
+  const tierLabels = {
+    none: "No Data",
+    bronze: "Bronze",
+    silver: "Silver",
+    gold: "Gold",
+    platinum: "Platinum"
+  };
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(className),
+        style: {
           padding: 40,
           textAlign: "center",
-          color: theme2.colors.textMuted
-        }, children: "No packages found" }) : packages.map((pkg) => {
-          const tier = calculateQualityTier(pkg.metrics);
-          return /* @__PURE__ */ jsx(
-            QualityHexagonDetailed,
-            {
-              metrics: pkg.metrics,
-              tier,
-              theme: theme2,
-              packageName: pkg.name,
-              packageVersion: pkg.version,
-              onRefresh: () => handleRefreshPackage(pkg.name),
-              isRefreshing: refreshingPackages.has(pkg.name)
+          color: theme2.colors.textMuted,
+          backgroundColor: theme2.colors.background,
+          borderRadius: 8
+        },
+        children: "No repositories to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        backgroundColor: theme2.colors.background,
+        fontFamily: theme2.fonts.body
+      },
+      children: [
+        showSummary && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              flexWrap: "wrap",
+              gap: 12,
+              padding: "12px 16px",
+              backgroundColor: theme2.colors.surface,
+              border: `1px solid ${theme2.colors.border}`
             },
-            pkg.name
-          );
-        }) })
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: theme2.colors.text
+                    },
+                    children: [
+                      items.length,
+                      " ",
+                      items.length === 1 ? "package" : "packages"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted }, children: "•" }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: theme2.colors.textMuted
+                    },
+                    children: [
+                      repositories.length,
+                      " ",
+                      repositories.length === 1 ? "repository" : "repositories"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: selectedMetric ?? "",
+                    onChange: (e) => setSelectedMetric(e.target.value ? e.target.value : null),
+                    style: {
+                      padding: "4px 8px",
+                      fontSize: 13,
+                      backgroundColor: theme2.colors.background,
+                      color: theme2.colors.text,
+                      border: `1px solid ${theme2.colors.border}`,
+                      borderRadius: 4,
+                      cursor: "pointer",
+                      outline: "none"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", children: "Select metric..." }),
+                      METRIC_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.key, children: option.label }, option.key))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      padding: "4px 12px",
+                      backgroundColor: theme2.colors.backgroundLight,
+                      borderRadius: 16,
+                      border: `1px solid ${tierColors[overallTier]}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            width: 8,
+                            height: 8,
+                            borderRadius: "50%",
+                            backgroundColor: tierColors[overallTier]
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: tierColors[overallTier]
+                          },
+                          children: tierLabels[overallTier]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+              gap: 12,
+              padding: 16
+            },
+            children: sortedItems.map((item) => /* @__PURE__ */ jsx(
+              RepositoryQualityGridItem,
+              {
+                item,
+                theme: theme2,
+                onClick: onItemClick ? () => onItemClick(item) : void 0,
+                onVertexClick,
+                showRepositoryName,
+                selectedMetric
+              },
+              item.key
+            ))
+          }
+        )
       ]
     }
   );
+}
+const mockRepositories = [
+  {
+    id: "platform",
+    name: "platform",
+    packages: [
+      {
+        name: "@org/core",
+        version: "2.0.0",
+        metrics: { tests: 94, deadCode: 4, linting: 98, formatting: 100, types: 97, documentation: 90 }
+      },
+      {
+        name: "@org/ui-components",
+        version: "2.0.0",
+        metrics: { tests: 85, deadCode: 8, linting: 95, formatting: 98, types: 92, documentation: 80 }
+      },
+      {
+        name: "@org/hooks",
+        version: "2.0.0",
+        metrics: { tests: 88, deadCode: 6, linting: 96, formatting: 100, types: 94, documentation: 85 }
+      }
+    ]
+  },
+  {
+    id: "backend",
+    name: "backend-services",
+    packages: [
+      {
+        name: "backend-services",
+        version: "1.5.0",
+        metrics: { tests: 80, deadCode: 15, linting: 90, formatting: 95, types: 85, documentation: 72 }
+      }
+    ]
+  },
+  {
+    id: "docs",
+    name: "documentation-site",
+    packages: [
+      {
+        name: "documentation-site",
+        version: "1.0.0",
+        metrics: { tests: 45, deadCode: 25, linting: 75, formatting: 85, types: 60, documentation: 95 }
+      }
+    ]
+  }
+];
+const RepositoryQualityGridPanelContent = ({
+  context,
+  events
+}) => {
+  var _a;
+  const { theme: theme2 } = useTheme();
+  const qualitySlice = context.getSlice("repositoriesQuality");
+  const hasQualitySlice = context.hasSlice("repositoriesQuality");
+  const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
+  const repositories = React2__default.useMemo(() => {
+    var _a2;
+    if ((_a2 = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a2.repositories) {
+      return qualitySlice.data.repositories;
+    }
+    if (hasQualitySlice) {
+      return [];
+    }
+    return mockRepositories;
+  }, [(_a = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a.repositories, hasQualitySlice]);
+  const handleItemClick = (item) => {
+    events.emit({
+      type: "principal-ade.repository-quality-grid:item:click",
+      source: "principal-ade.repository-quality-grid-panel",
+      timestamp: Date.now(),
+      payload: {
+        repositoryId: item.repositoryId,
+        repositoryName: item.repositoryName,
+        packageName: item.packageName,
+        tier: item.tier
+      }
+    });
+  };
+  const handleVertexClick = (item, vertex) => {
+    events.emit({
+      type: "principal-ade.repository-quality-grid:vertex:click",
+      source: "principal-ade.repository-quality-grid-panel",
+      timestamp: Date.now(),
+      payload: {
+        repositoryId: item.repositoryId,
+        repositoryName: item.repositoryName,
+        packageName: item.packageName,
+        metric: vertex.key,
+        label: vertex.label,
+        value: vertex.value
+      }
+    });
+  };
+  const handleRefresh = async () => {
+    if (context.hasSlice("repositoriesQuality")) {
+      await context.refresh("workspace", "repositoriesQuality");
+    }
+  };
+  React2__default.useEffect(() => {
+    const unsubscribers = [
+      events.on("principal-ade.repository-quality-grid:refresh", async () => {
+        await handleRefresh();
+      })
+    ];
+    return () => unsubscribers.forEach((unsub) => unsub());
+  }, [events, context]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontFamily: theme2.fonts.body,
+        height: "100%",
+        minHeight: 0,
+        backgroundColor: theme2.colors.background,
+        color: theme2.colors.text,
+        overflowY: "auto",
+        boxSizing: "border-box"
+      },
+      children: isLoading ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: 40,
+            textAlign: "center",
+            color: theme2.colors.textMuted
+          },
+          children: "Loading repository quality metrics..."
+        }
+      ) : repositories.length === 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            padding: 40,
+            textAlign: "center",
+            color: theme2.colors.textMuted
+          },
+          children: "No repositories with quality metrics found."
+        }
+      ) : /* @__PURE__ */ jsx(
+        RepositoryQualityGrid,
+        {
+          repositories,
+          theme: theme2,
+          onItemClick: handleItemClick,
+          onVertexClick: handleVertexClick,
+          showRepositoryName: true,
+          showSummary: true
+        }
+      )
+    }
+  );
 };
-const QualityHexagonPanel = (props) => {
-  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(QualityHexagonPanelContent, { ...props }) });
+const RepositoryQualityGridPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RepositoryQualityGridPanelContent, { ...props }) });
 };
 const panels = [
   {
@@ -934,6 +2097,28 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Quality Hexagon Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "principal-ade.repository-quality-grid-panel",
+      name: "Repository Quality Grid",
+      icon: "⬡",
+      version: "0.1.0",
+      author: "Principal ADE",
+      description: "Display quality metrics for multiple repositories in a flat grid layout. Supports filtering by metric type, sorting, and comparing quality across projects.",
+      slices: ["repositoriesQuality"],
+      tools: []
+    },
+    component: RepositoryQualityGridPanel,
+    onMount: async (context) => {
+      console.log("Repository Quality Grid Panel mounted");
+      if (context.hasSlice("repositoriesQuality") && !context.isSliceLoading("repositoriesQuality")) {
+        await context.refresh("workspace", "repositoriesQuality");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Repository Quality Grid Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -946,7 +2131,11 @@ export {
   QualityHexagon,
   QualityHexagonCompact,
   QualityHexagonDetailed,
+  QualityHexagonExpandable,
   QualityHexagonPanel,
+  RepositoryQualityGrid,
+  RepositoryQualityGridItem,
+  RepositoryQualityGridPanel,
   calculateQualityTier,
   onPackageLoad,
   onPackageUnload,