@principal-ade/code-quality-panels 0.1.4 → 0.1.6

package/dist/panels.bundle.js

@@ -106,34 +106,47 @@ 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$4 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$4);
+const __iconNode$7 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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$3 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$3);
+const __iconNode$6 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __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$2 = [
+const __iconNode$5 = [
   ["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);
+const Copy = createLucideIcon("copy", __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$1 = [
+const __iconNode$4 = [
+  ["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);
+/**
+ * @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",
     {
@@ -142,18 +155,46 @@ const __iconNode$1 = [
     }
   ]
 ];
-const Hexagon = createLucideIcon("hexagon", __iconNode$1);
+const Hexagon = createLucideIcon("hexagon", __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 = [
+const __iconNode$2 = [
+  ["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);
+/**
+ * @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: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ];
-const Terminal = createLucideIcon("terminal", __iconNode);
+const Terminal = createLucideIcon("terminal", __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: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+      key: "1xq2db"
+    }
+  ]
+];
+const Zap = createLucideIcon("zap", __iconNode);
 var ThemeContext;
 var getThemeContext = () => {
   if (typeof window !== "undefined") {
@@ -824,7 +865,7 @@ function checkFileExistsInTree(treeData, targetPath) {
     return filePath.endsWith(normalizedTarget) || filePath === normalizedTarget;
   });
 }
-const CommandLine$1 = ({ command, theme }) => {
+const CommandLine = ({ command, theme, label }) => {
   const [copied, setCopied] = React2__default.useState(false);
   const handleCopy = async () => {
     try {
@@ -835,42 +876,90 @@ const CommandLine$1 = ({ command, theme }) => {
       console.log("Copy:", command);
     }
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+    label && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: theme.colors.textMuted }, children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 12,
+          padding: "10px 14px",
+          borderRadius: 6,
+          backgroundColor: theme.colors.background,
+          border: `1px solid ${theme.colors.border}`,
+          fontFamily: "monospace",
+          fontSize: 13
+        },
+        children: [
+          /* @__PURE__ */ jsx("code", { style: { color: theme.colors.text }, children: command }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleCopy,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: 4,
+                border: "none",
+                backgroundColor: "transparent",
+                color: theme.colors.textMuted,
+                cursor: "pointer"
+              },
+              title: "Copy command",
+              children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+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: "📚" }
+  ];
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 12,
-        padding: "10px 14px",
-        borderRadius: 6,
-        backgroundColor: theme.colors.background,
-        border: `1px solid ${theme.colors.border}`,
-        fontFamily: "monospace",
-        fontSize: 13
+        display: "grid",
+        gridTemplateColumns: "repeat(2, 1fr)",
+        gap: 8,
+        padding: 12,
+        borderRadius: 8,
+        backgroundColor: theme.colors.surface,
+        border: `1px solid ${theme.colors.border}`
       },
-      children: [
-        /* @__PURE__ */ jsx("code", { style: { color: theme.colors.text }, children: command }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleCopy,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: 4,
-              border: "none",
-              backgroundColor: "transparent",
-              color: theme.colors.textMuted,
-              cursor: "pointer"
-            },
-            title: "Copy command",
-            children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
-          }
-        )
-      ]
+      children: metrics.map((m) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "6px 8px",
+            borderRadius: 4,
+            fontSize: 12
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: m.icon }),
+            /* @__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 })
+            ] })
+          ]
+        },
+        m.key
+      ))
     }
   );
 };
@@ -878,6 +967,7 @@ const QualityEmptyState = ({
   theme,
   hasWorkflow
 }) => {
+  const [showAdvanced, setShowAdvanced] = React2__default.useState(false);
   if (hasWorkflow) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -890,6 +980,28 @@ const QualityEmptyState = ({
           width: "100%"
         },
         children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "10px 14px",
+                borderRadius: 6,
+                backgroundColor: `${theme.colors.success}15`,
+                color: theme.colors.success,
+                fontSize: 13
+              },
+              children: [
+                /* @__PURE__ */ jsx(Check, { size: 16 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Workflow detected at ",
+                  WORKFLOW_FILE_PATH
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(
             "p",
             {
@@ -899,27 +1011,31 @@ const QualityEmptyState = ({
                 color: theme.colors.textMuted,
                 lineHeight: 1.5
               },
-              children: "Quality metrics will appear here after your next CI run completes."
+              children: "Quality metrics will appear here after your workflow runs. Push a commit to trigger it, or check the Actions tab for status."
             }
           ),
+          /* @__PURE__ */ jsx(MetricsPreview, { theme }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               style: {
                 display: "flex",
-                alignItems: "center",
+                alignItems: "flex-start",
                 gap: 8,
                 padding: "10px 14px",
                 borderRadius: 6,
-                backgroundColor: `${theme.colors.success}15`,
-                color: theme.colors.success,
-                fontSize: 13
+                backgroundColor: `${theme.colors.warning}10`,
+                fontSize: 12,
+                color: theme.colors.textMuted
               },
               children: [
-                /* @__PURE__ */ jsx(Check, { size: 16 }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  "Workflow detected at ",
-                  WORKFLOW_FILE_PATH
+                /* @__PURE__ */ jsx(Info, { size: 14, style: { flexShrink: 0, marginTop: 2 }, color: theme.colors.warning }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("strong", { style: { color: theme.colors.text }, children: "Using private npm packages?" }),
+                  /* @__PURE__ */ jsx("br", {}),
+                  "Add ",
+                  /* @__PURE__ */ jsx("code", { style: { backgroundColor: theme.colors.background, padding: "1px 4px", borderRadius: 3 }, children: "NPM_TOKEN" }),
+                  " to your repository secrets and ensure the workflow has access to it."
                 ] })
               ]
             }
@@ -939,26 +1055,138 @@ const QualityEmptyState = ({
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx(
-          "p",
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "h4",
+            {
+              style: {
+                margin: "0 0 12px 0",
+                fontSize: 14,
+                fontWeight: 600,
+                color: theme.colors.text
+              },
+              children: "Track 6 quality dimensions"
+            }
+          ),
+          /* @__PURE__ */ jsx(MetricsPreview, { theme })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
           {
             style: {
-              margin: 0,
-              fontSize: 14,
-              color: theme.colors.textMuted,
-              lineHeight: 1.5
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              padding: 16,
+              borderRadius: 8,
+              backgroundColor: theme.colors.surface,
+              border: `1px solid ${theme.colors.border}`
             },
-            children: "Track your code quality with automated analysis of tests, linting, types, formatting, dead code, and documentation."
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Zap, { size: 18, color: theme.colors.primary }),
+                    /* @__PURE__ */ jsx(
+                      "h4",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: 14,
+                          fontWeight: 600,
+                          color: theme.colors.text
+                        },
+                        children: "Quick Start"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: 13,
+                    color: theme.colors.textMuted,
+                    lineHeight: 1.5
+                  },
+                  children: "Run this in your project directory to set up automated quality tracking:"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CommandLine,
+                {
+                  command: "npx @principal-ai/quality-lens-cli init",
+                  theme
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    fontSize: 12,
+                    color: theme.colors.textMuted
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(GitBranch, { size: 14 }),
+                    /* @__PURE__ */ jsx("span", { children: "Then commit and push to start tracking" })
+                  ]
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setShowAdvanced(!showAdvanced),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: 0,
+              border: "none",
+              backgroundColor: "transparent",
+              color: theme.colors.textMuted,
+              fontSize: 13,
+              cursor: "pointer"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  size: 14,
+                  style: {
+                    transform: showAdvanced ? "rotate(90deg)" : "none",
+                    transition: "transform 0.2s"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { children: [
+                showAdvanced ? "Hide" : "Show",
+                " additional options"
+              ] })
+            ]
+          }
+        ),
+        showAdvanced && /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
               display: "flex",
               flexDirection: "column",
               gap: 16,
-              padding: 20,
+              padding: 16,
               borderRadius: 8,
               backgroundColor: theme.colors.surface,
               border: `1px solid ${theme.colors.border}`
@@ -970,157 +1198,71 @@ const QualityEmptyState = ({
                   style: {
                     display: "flex",
                     alignItems: "center",
-                    gap: 10,
-                    marginBottom: 4
+                    gap: 8
                   },
                   children: [
-                    /* @__PURE__ */ jsx(Terminal, { size: 20, color: theme.colors.text }),
+                    /* @__PURE__ */ jsx(Terminal, { size: 18, color: theme.colors.text }),
                     /* @__PURE__ */ jsx(
                       "h4",
                       {
                         style: {
                           margin: 0,
-                          fontSize: 15,
+                          fontSize: 14,
                           fontWeight: 600,
                           color: theme.colors.text
                         },
-                        children: "Get Started"
+                        children: "CLI Commands"
                       }
                     )
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      marginBottom: 8,
-                      fontSize: 13,
-                      color: theme.colors.textMuted
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 20,
-                            height: 20,
-                            borderRadius: "50%",
-                            backgroundColor: theme.colors.primary,
-                            color: theme.colors.background,
-                            fontSize: 11,
-                            fontWeight: 600
-                          },
-                          children: "1"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { children: "Install the CLI" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  CommandLine$1,
-                  {
-                    command: "npm install -g @principal-ai/quality-lens-cli",
-                    theme
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      marginBottom: 8,
-                      fontSize: 13,
-                      color: theme.colors.textMuted
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 20,
-                            height: 20,
-                            borderRadius: "50%",
-                            backgroundColor: theme.colors.primary,
-                            color: theme.colors.background,
-                            fontSize: 11,
-                            fontWeight: 600
-                          },
-                          children: "2"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { children: "Check what quality tools are available" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(CommandLine$1, { command: "quality-lens list", theme })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      marginBottom: 8,
-                      fontSize: 13,
-                      color: theme.colors.textMuted
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 20,
-                            height: 20,
-                            borderRadius: "50%",
-                            backgroundColor: theme.colors.primary,
-                            color: theme.colors.background,
-                            fontSize: 11,
-                            fontWeight: 600
-                          },
-                          children: "3"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { children: "Set up the GitHub Action" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(CommandLine$1, { command: "quality-lens init", theme })
-              ] }),
+              /* @__PURE__ */ jsx(
+                CommandLine,
+                {
+                  command: "npx @principal-ai/quality-lens-cli list",
+                  theme,
+                  label: "See available quality tools in your project"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CommandLine,
+                {
+                  command: "npx @principal-ai/quality-lens-cli run . --install",
+                  theme,
+                  label: "Run quality checks locally (auto-installs missing tools)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CommandLine,
+                {
+                  command: "npm install -g @principal-ai/quality-lens-cli",
+                  theme,
+                  label: "Install globally for faster repeated use"
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
                     display: "flex",
-                    alignItems: "center",
-                    gap: 6,
-                    paddingTop: 8,
-                    fontSize: 13,
+                    alignItems: "flex-start",
+                    gap: 8,
+                    padding: "10px 14px",
+                    borderRadius: 6,
+                    backgroundColor: `${theme.colors.warning}10`,
+                    fontSize: 12,
                     color: theme.colors.textMuted
                   },
                   children: [
-                    /* @__PURE__ */ jsx(ChevronRight, { size: 14 }),
-                    /* @__PURE__ */ jsx("span", { children: "Then commit and push to start tracking quality" })
+                    /* @__PURE__ */ jsx(Info, { size: 14, style: { flexShrink: 0, marginTop: 2 }, color: theme.colors.warning }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("strong", { style: { color: theme.colors.text }, children: "Private npm packages?" }),
+                      /* @__PURE__ */ jsx("br", {}),
+                      "If your project uses private @org packages, add ",
+                      /* @__PURE__ */ jsx("code", { style: { backgroundColor: theme.colors.background, padding: "1px 4px", borderRadius: 3 }, children: "NPM_TOKEN" }),
+                      " to your GitHub repository secrets under Settings → Secrets → Actions, and set the workflow environment if needed."
+                    ] })
                   ]
                 }
               )
@@ -1723,258 +1865,6 @@ function RepositoryQualityGrid({
     }
   );
 }
-const CommandLine = ({ command, theme }) => {
-  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: theme.colors.background,
-        border: `1px solid ${theme.colors.border}`,
-        fontFamily: "monospace",
-        fontSize: 13
-      },
-      children: [
-        /* @__PURE__ */ jsx("code", { style: { color: theme.colors.text }, children: command }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleCopy,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: 4,
-              border: "none",
-              backgroundColor: "transparent",
-              color: theme.colors.textMuted,
-              cursor: "pointer"
-            },
-            title: "Copy command",
-            children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
-          }
-        )
-      ]
-    }
-  );
-};
-const RepositoryQualityEmptyState = ({ theme }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 40,
-        gap: 24,
-        height: "100%",
-        minHeight: 400
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 64,
-              height: 64,
-              borderRadius: 16,
-              backgroundColor: theme.colors.surface,
-              border: `1px solid ${theme.colors.border}`
-            },
-            children: /* @__PURE__ */ jsx(Hexagon, { size: 32, color: theme.colors.textMuted })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: 400 }, children: [
-          /* @__PURE__ */ jsx(
-            "h3",
-            {
-              style: {
-                margin: "0 0 8px 0",
-                fontSize: 18,
-                fontWeight: 600,
-                color: theme.colors.text
-              },
-              children: "No Quality Metrics"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                margin: 0,
-                fontSize: 14,
-                color: theme.colors.textMuted,
-                lineHeight: 1.5
-              },
-              children: "Configure the Quality Lens GitHub Action on your repositories to track code quality metrics across your projects."
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: 16,
-              padding: 20,
-              borderRadius: 8,
-              backgroundColor: theme.colors.surface,
-              border: `1px solid ${theme.colors.border}`,
-              width: "100%",
-              maxWidth: 400
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 10,
-                    marginBottom: 4
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Terminal, { size: 20, color: theme.colors.text }),
-                    /* @__PURE__ */ jsx(
-                      "h4",
-                      {
-                        style: {
-                          margin: 0,
-                          fontSize: 15,
-                          fontWeight: 600,
-                          color: theme.colors.text
-                        },
-                        children: "Get Started"
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      marginBottom: 8,
-                      fontSize: 13,
-                      color: theme.colors.textMuted
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 20,
-                            height: 20,
-                            borderRadius: "50%",
-                            backgroundColor: theme.colors.primary,
-                            color: theme.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
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      marginBottom: 8,
-                      fontSize: 13,
-                      color: theme.colors.textMuted
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: 20,
-                            height: 20,
-                            borderRadius: "50%",
-                            backgroundColor: theme.colors.primary,
-                            color: theme.colors.background,
-                            fontSize: 11,
-                            fontWeight: 600
-                          },
-                          children: "2"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { children: "Initialize in each repository" })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens init", theme })
-              ] }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 6,
-                    paddingTop: 8,
-                    fontSize: 13,
-                    color: theme.colors.textMuted
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(ChevronRight, { size: 14 }),
-                    /* @__PURE__ */ jsx("span", { children: "Commit, push, and quality data will appear after CI runs" })
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
 const RepositoryQualityGridPanelContent = ({
   context,
   events
@@ -2053,7 +1943,7 @@ const RepositoryQualityGridPanelContent = ({
           },
           children: "Loading repository quality metrics..."
         }
-      ) : repositories.length === 0 ? /* @__PURE__ */ jsx(RepositoryQualityEmptyState, { theme }) : /* @__PURE__ */ jsx(
+      ) : repositories.length === 0 ? /* @__PURE__ */ jsx(QualityEmptyState, { theme, hasWorkflow: false }) : /* @__PURE__ */ jsx(
         RepositoryQualityGrid,
         {
           repositories,