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

package/dist/panels.bundle.js

@@ -443,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;
@@ -523,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",
@@ -1457,6 +1493,14 @@ const QualityHexagonPanelContent = ({
 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) {
@@ -1495,13 +1539,22 @@ function formatLabel(item, showRepositoryName, isSameAsRepo) {
   }
   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 = {
@@ -1511,6 +1564,27 @@ function RepositoryQualityGridItem({
     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",
     {
@@ -1526,8 +1600,7 @@ function RepositoryQualityGridItem({
         backgroundColor: theme2.colors.surface,
         border: `1px solid ${theme2.colors.border}`,
         cursor: onClick ? "pointer" : "default",
-        transition: "all 0.2s ease",
-        minWidth: 100
+        transition: "all 0.2s ease"
       },
       onMouseEnter: (e) => {
         if (onClick) {
@@ -1538,16 +1611,63 @@ function RepositoryQualityGridItem({
       onMouseLeave: (e) => {
         e.currentTarget.style.borderColor = theme2.colors.border;
         e.currentTarget.style.transform = "translateY(0)";
+        setHoveredVertex(null);
       },
       children: [
         /* @__PURE__ */ jsx(
-          QualityHexagonCompact,
+          "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
+            theme: theme2,
+            showLabels: false,
+            showValues: false,
+            onVertexHover: setHoveredVertex,
+            onVertexLeave: () => setHoveredVertex(null),
+            onVertexClick: onVertexClick ? (vertex) => onVertexClick(item, vertex) : void 0
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1555,8 +1675,7 @@ function RepositoryQualityGridItem({
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
-              gap: 2,
-              maxWidth: 120
+              gap: 2
             },
             children: [
               /* @__PURE__ */ jsx(
@@ -1566,13 +1685,8 @@ function RepositoryQualityGridItem({
                     fontSize: 12,
                     fontWeight: 500,
                     color: theme2.colors.text,
-                    textAlign: "center",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    maxWidth: "100%"
+                    textAlign: "center"
                   },
-                  title: label,
                   children: label
                 }
               ),
@@ -1596,16 +1710,34 @@ 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: 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,
@@ -1655,9 +1787,10 @@ function RepositoryQualityGrid({
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
+              flexWrap: "wrap",
+              gap: 12,
               padding: "12px 16px",
               backgroundColor: theme2.colors.surface,
-              borderRadius: 8,
               border: `1px solid ${theme2.colors.border}`
             },
             children: [
@@ -1693,44 +1826,67 @@ function RepositoryQualityGrid({
                   }
                 )
               ] }),
-              /* @__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__ */ 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(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: tierColors[overallTier]
+                          },
+                          children: tierLabels[overallTier]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
             ]
           }
         ),
@@ -1738,17 +1894,20 @@ function RepositoryQualityGrid({
           "div",
           {
             style: {
-              display: "flex",
-              flexWrap: "wrap",
-              gap: 12
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+              gap: 12,
+              padding: 16
             },
-            children: items.map((item) => /* @__PURE__ */ jsx(
+            children: sortedItems.map((item) => /* @__PURE__ */ jsx(
               RepositoryQualityGridItem,
               {
                 item,
                 theme: theme2,
                 onClick: onItemClick ? () => onItemClick(item) : void 0,
-                showRepositoryName
+                onVertexClick,
+                showRepositoryName,
+                selectedMetric
               },
               item.key
             ))
@@ -1758,6 +1917,160 @@ function RepositoryQualityGrid({
     }
   );
 }
+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 RepositoryQualityGridPanel = (props) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RepositoryQualityGridPanelContent, { ...props }) });
+};
 const panels = [
   {
     metadata: {
@@ -1784,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 () => {
@@ -1800,6 +2135,7 @@ export {
   QualityHexagonPanel,
   RepositoryQualityGrid,
   RepositoryQualityGridItem,
+  RepositoryQualityGridPanel,
   calculateQualityTier,
   onPackageLoad,
   onPackageUnload,