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

package/dist/panels.bundle.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React2 from "react";
-import React2__default, { forwardRef, createElement, createContext, useState, useEffect, useContext } from "react";
+import React2__default, { forwardRef, createElement, createContext, useContext } from "react";
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -154,158 +154,6 @@ const __iconNode = [
   ["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: {
-    body: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
-    heading: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace',
-    monospace: '"SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace'
-  },
-  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
-  fontScale: 1,
-  fontWeights: {
-    body: 400,
-    heading: 500,
-    bold: 600,
-    light: 300,
-    medium: 500,
-    semibold: 600
-  },
-  lineHeights: {
-    body: 1.6,
-    heading: 1.3,
-    tight: 1.4,
-    relaxed: 1.8
-  },
-  breakpoints: ["640px", "768px", "1024px", "1280px"],
-  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
-  radii: [0, 2, 4, 6, 8, 12, 16, 24],
-  shadows: [
-    "none",
-    "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    "0 2px 4px 0 rgba(0, 0, 0, 0.06)",
-    "0 4px 6px 0 rgba(0, 0, 0, 0.07)",
-    "0 8px 12px 0 rgba(0, 0, 0, 0.08)",
-    "0 16px 24px 0 rgba(0, 0, 0, 0.10)"
-  ],
-  zIndices: [0, 1, 10, 20, 30, 40, 50],
-  colors: {
-    text: "#e4e4e4",
-    background: "rgba(10, 10, 10, 0.85)",
-    primary: "#66b3ff",
-    secondary: "#80c4ff",
-    accent: "#66ff99",
-    highlight: "rgba(102, 179, 255, 0.15)",
-    muted: "rgba(26, 26, 26, 0.8)",
-    success: "#66ff99",
-    warning: "#ffcc66",
-    error: "#ff6666",
-    info: "#66b3ff",
-    border: "rgba(255, 255, 255, 0.1)",
-    backgroundSecondary: "rgba(15, 15, 15, 0.9)",
-    backgroundTertiary: "rgba(20, 20, 20, 0.9)",
-    backgroundLight: "rgba(255, 255, 255, 0.05)",
-    backgroundHover: "rgba(102, 179, 255, 0.08)",
-    surface: "rgba(15, 15, 15, 0.95)",
-    textSecondary: "rgba(255, 255, 255, 0.7)",
-    textTertiary: "rgba(255, 255, 255, 0.5)",
-    textMuted: "rgba(255, 255, 255, 0.4)",
-    highlightBg: "rgba(255, 235, 59, 0.25)",
-    highlightBorder: "rgba(255, 235, 59, 0.5)"
-  },
-  modes: {
-    light: {
-      text: "#1a1a1a",
-      background: "rgba(255, 255, 255, 0.9)",
-      primary: "#0066cc",
-      secondary: "#0052a3",
-      accent: "#00cc88",
-      highlight: "rgba(0, 102, 204, 0.08)",
-      muted: "rgba(245, 245, 245, 0.8)",
-      success: "#00cc88",
-      warning: "#ffaa00",
-      error: "#ff3333",
-      info: "#0066cc",
-      border: "rgba(0, 0, 0, 0.1)",
-      backgroundSecondary: "rgba(250, 250, 250, 0.9)",
-      backgroundTertiary: "rgba(245, 245, 245, 0.9)",
-      backgroundLight: "rgba(0, 0, 0, 0.02)",
-      backgroundHover: "rgba(0, 102, 204, 0.04)",
-      surface: "rgba(255, 255, 255, 0.95)",
-      textSecondary: "rgba(0, 0, 0, 0.6)",
-      textTertiary: "rgba(0, 0, 0, 0.4)",
-      textMuted: "rgba(0, 0, 0, 0.3)",
-      highlightBg: "rgba(255, 235, 59, 0.3)",
-      highlightBorder: "rgba(255, 235, 59, 0.6)"
-    }
-  },
-  buttons: {
-    primary: {
-      color: "white",
-      bg: "primary",
-      borderWidth: 0,
-      "&:hover": {
-        bg: "secondary"
-      }
-    },
-    secondary: {
-      color: "primary",
-      bg: "transparent",
-      borderWidth: 1,
-      borderStyle: "solid",
-      borderColor: "primary",
-      "&:hover": {
-        bg: "highlight"
-      }
-    },
-    ghost: {
-      color: "text",
-      bg: "transparent",
-      "&:hover": {
-        bg: "backgroundHover"
-      }
-    }
-  },
-  text: {
-    heading: {
-      fontFamily: "heading",
-      fontWeight: "heading",
-      lineHeight: "heading"
-    },
-    body: {
-      fontFamily: "body",
-      fontWeight: "body",
-      lineHeight: "body"
-    },
-    caption: {
-      fontSize: 1,
-      color: "textSecondary"
-    }
-  },
-  cards: {
-    primary: {
-      bg: "surface",
-      border: "1px solid",
-      borderColor: "border",
-      borderRadius: 1
-    },
-    secondary: {
-      bg: "backgroundSecondary",
-      border: "1px solid",
-      borderColor: "border",
-      borderRadius: 1
-    }
-  }
-};
-function getMode(theme2, mode) {
-  if (!mode || !theme2.modes || !theme2.modes[mode]) {
-    return theme2.colors;
-  }
-  return {
-    ...theme2.colors,
-    ...theme2.modes[mode]
-  };
-}
 var ThemeContext;
 var getThemeContext = () => {
   if (typeof window !== "undefined") {
@@ -329,46 +177,6 @@ var useTheme = () => {
   }
   return context;
 };
-var ThemeProvider = ({
-  children,
-  theme: customTheme = theme,
-  initialMode
-}) => {
-  const [mode, setMode] = useState(initialMode);
-  const activeTheme = React2__default.useMemo(() => {
-    if (!mode || !customTheme.modes || !customTheme.modes[mode]) {
-      return customTheme;
-    }
-    return {
-      ...customTheme,
-      colors: getMode(customTheme, mode)
-    };
-  }, [customTheme, mode]);
-  useEffect(() => {
-    if (!initialMode) {
-      const savedMode = localStorage.getItem("principlemd-theme-mode");
-      if (savedMode) {
-        setMode(savedMode);
-      }
-    }
-  }, [initialMode]);
-  useEffect(() => {
-    if (mode) {
-      localStorage.setItem("principlemd-theme-mode", mode);
-    } else {
-      localStorage.removeItem("principlemd-theme-mode");
-    }
-  }, [mode]);
-  const value = {
-    theme: activeTheme,
-    mode,
-    setMode
-  };
-  return /* @__PURE__ */ React2__default.createElement(ThemeContextSingleton.Provider, {
-    value
-  }, children);
-};
-var theme = terminalTheme;
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -385,31 +193,31 @@ function clsx() {
 function cn(...inputs) {
   return clsx(inputs);
 }
-function getThemeColors(theme2) {
+function getThemeColors(theme) {
   return {
-    gridColor: theme2.colors.border,
-    axisColor: theme2.colors.muted,
-    textColor: theme2.colors.text,
-    scoreColor: theme2.colors.text,
+    gridColor: theme.colors.border,
+    axisColor: theme.colors.muted,
+    textColor: theme.colors.text,
+    scoreColor: theme.colors.text,
     tierColors: {
-      none: { fill: theme2.colors.muted, stroke: theme2.colors.border, bg: theme2.colors.backgroundLight },
-      bronze: { fill: theme2.colors.warning, stroke: theme2.colors.warning, bg: theme2.colors.backgroundLight },
-      silver: { fill: theme2.colors.secondary, stroke: theme2.colors.secondary, bg: theme2.colors.backgroundLight },
-      gold: { fill: theme2.colors.accent, stroke: theme2.colors.accent, bg: theme2.colors.backgroundLight },
-      platinum: { fill: theme2.colors.primary, stroke: theme2.colors.primary, bg: theme2.colors.backgroundLight }
+      none: { fill: theme.colors.muted, stroke: theme.colors.border, bg: theme.colors.backgroundLight },
+      bronze: { fill: theme.colors.warning, stroke: theme.colors.warning, bg: theme.colors.backgroundLight },
+      silver: { fill: theme.colors.secondary, stroke: theme.colors.secondary, bg: theme.colors.backgroundLight },
+      gold: { fill: theme.colors.accent, stroke: theme.colors.accent, bg: theme.colors.backgroundLight },
+      platinum: { fill: theme.colors.primary, stroke: theme.colors.primary, bg: theme.colors.backgroundLight }
     },
     metricColors: {
-      types: theme2.colors.warning,
-      documentation: theme2.colors.info,
-      tests: theme2.colors.success,
-      deadCode: theme2.colors.error,
-      formatting: theme2.colors.accent,
-      linting: theme2.colors.primary
+      types: theme.colors.warning,
+      documentation: theme.colors.info,
+      tests: theme.colors.success,
+      deadCode: theme.colors.error,
+      formatting: theme.colors.accent,
+      linting: theme.colors.primary
     },
     qualityIndicators: {
-      good: theme2.colors.success,
-      medium: theme2.colors.warning,
-      poor: theme2.colors.error
+      good: theme.colors.success,
+      medium: theme.colors.warning,
+      poor: theme.colors.error
     }
   };
 }
@@ -440,7 +248,7 @@ function calculateMetricPoint(center, radius, angle, value) {
 function QualityHexagon({
   metrics,
   tier,
-  theme: theme2,
+  theme,
   showLabels = false,
   showValues = false,
   className,
@@ -448,7 +256,7 @@ function QualityHexagon({
   onVertexLeave,
   onVertexClick
 }) {
-  const themeColors = getThemeColors(theme2);
+  const themeColors = getThemeColors(theme);
   const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
   const metricConfig = getMetricConfig(themeColors);
   const viewBoxSize = 300;
@@ -644,7 +452,7 @@ function QualityHexagon({
 function QualityHexagonCompact({
   metrics,
   tier,
-  theme: theme2,
+  theme,
   className
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("w-20 h-20", className), children: /* @__PURE__ */ jsx(
@@ -652,7 +460,7 @@ function QualityHexagonCompact({
     {
       metrics,
       tier,
-      theme: theme2,
+      theme,
       showLabels: false,
       showValues: false
     }
@@ -661,14 +469,14 @@ function QualityHexagonCompact({
 function QualityHexagonDetailed({
   metrics,
   tier,
-  theme: theme2,
+  theme,
   className,
   packageName,
   packageVersion,
   onRefresh,
   isRefreshing = false
 }) {
-  const themeColors = getThemeColors(theme2);
+  const themeColors = getThemeColors(theme);
   const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
   const metricConfig = getMetricConfig(themeColors);
   const hasHeader = packageName || onRefresh;
@@ -695,7 +503,7 @@ function QualityHexagonDetailed({
             packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { style: {
                 fontSize: 12,
-                color: theme2.colors.textMuted
+                color: theme.colors.textMuted
               }, children: packageName.split("/")[0] }),
               /* @__PURE__ */ jsx("span", { style: {
                 fontSize: 14,
@@ -709,7 +517,7 @@ function QualityHexagonDetailed({
             }, children: packageName }),
             packageVersion && /* @__PURE__ */ jsxs("span", { style: {
               fontSize: 12,
-              color: theme2.colors.textMuted
+              color: theme.colors.textMuted
             }, children: [
               "v",
               packageVersion
@@ -725,10 +533,10 @@ function QualityHexagonDetailed({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                border: `1px solid ${theme2.colors.border}`,
+                border: `1px solid ${theme.colors.border}`,
                 borderRadius: 4,
-                background: theme2.colors.surface,
-                color: theme2.colors.textMuted,
+                background: theme.colors.surface,
+                color: theme.colors.textMuted,
                 cursor: isRefreshing ? "not-allowed" : "pointer",
                 opacity: isRefreshing ? 0.6 : 1
               },
@@ -770,7 +578,7 @@ function QualityHexagonDetailed({
             {
               metrics,
               tier,
-              theme: theme2,
+              theme,
               showLabels: true,
               showValues: false
             }
@@ -781,7 +589,7 @@ function QualityHexagonDetailed({
             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
+                color: theme.colors.textMuted
               }, children: [
                 label,
                 key === "deadCode" ? " ↓" : ""
@@ -804,7 +612,7 @@ function QualityHexagonDetailed({
 function QualityHexagonExpandable({
   metrics,
   tier,
-  theme: theme2,
+  theme,
   className,
   packageName,
   packageVersion,
@@ -813,7 +621,7 @@ function QualityHexagonExpandable({
   defaultExpanded = false
 }) {
   const [expanded, setExpanded] = React2.useState(defaultExpanded);
-  const themeColors = getThemeColors(theme2);
+  const themeColors = getThemeColors(theme);
   const colors = themeColors.tierColors[tier] ?? themeColors.tierColors.none;
   const metricConfig = getMetricConfig(themeColors);
   const hasHeader = packageName || onRefresh;
@@ -841,7 +649,7 @@ function QualityHexagonExpandable({
             packageName.startsWith("@") && packageName.includes("/") ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { style: {
                 fontSize: 12,
-                color: theme2.colors.textMuted
+                color: theme.colors.textMuted
               }, children: packageName.split("/")[0] }),
               /* @__PURE__ */ jsx("span", { style: {
                 fontSize: 14,
@@ -855,7 +663,7 @@ function QualityHexagonExpandable({
             }, children: packageName }),
             packageVersion && /* @__PURE__ */ jsxs("span", { style: {
               fontSize: 12,
-              color: theme2.colors.textMuted
+              color: theme.colors.textMuted
             }, children: [
               "v",
               packageVersion
@@ -871,10 +679,10 @@ function QualityHexagonExpandable({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                border: `1px solid ${theme2.colors.border}`,
+                border: `1px solid ${theme.colors.border}`,
                 borderRadius: 4,
-                background: theme2.colors.surface,
-                color: theme2.colors.textMuted,
+                background: theme.colors.surface,
+                color: theme.colors.textMuted,
                 cursor: isRefreshing ? "not-allowed" : "pointer",
                 opacity: isRefreshing ? 0.6 : 1
               },
@@ -919,7 +727,7 @@ function QualityHexagonExpandable({
               {
                 metrics,
                 tier,
-                theme: theme2,
+                theme,
                 showLabels: true,
                 showValues: false
               }
@@ -939,14 +747,14 @@ function QualityHexagonExpandable({
               flexDirection: "column",
               gap: 8,
               padding: "8px 24px",
-              borderTop: `1px solid ${theme2.colors.border}`,
+              borderTop: `1px solid ${theme.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
+                  color: theme.colors.textMuted
                 }, children: [
                   label,
                   key === "deadCode" ? " ↓" : ""
@@ -980,7 +788,7 @@ function QualityHexagonExpandable({
                 height: "16",
                 viewBox: "0 0 24 24",
                 fill: "none",
-                stroke: theme2.colors.textMuted,
+                stroke: theme.colors.textMuted,
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
@@ -1016,7 +824,7 @@ function checkFileExistsInTree(treeData, targetPath) {
     return filePath.endsWith(normalizedTarget) || filePath === normalizedTarget;
   });
 }
-const CommandLine = ({ command, theme: theme2 }) => {
+const CommandLine$1 = ({ command, theme }) => {
   const [copied, setCopied] = React2__default.useState(false);
   const handleCopy = async () => {
     try {
@@ -1037,13 +845,13 @@ const CommandLine = ({ command, theme: theme2 }) => {
         gap: 12,
         padding: "10px 14px",
         borderRadius: 6,
-        backgroundColor: theme2.colors.background,
-        border: `1px solid ${theme2.colors.border}`,
+        backgroundColor: theme.colors.background,
+        border: `1px solid ${theme.colors.border}`,
         fontFamily: "monospace",
         fontSize: 13
       },
       children: [
-        /* @__PURE__ */ jsx("code", { style: { color: theme2.colors.text }, children: command }),
+        /* @__PURE__ */ jsx("code", { style: { color: theme.colors.text }, children: command }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1055,11 +863,11 @@ const CommandLine = ({ command, theme: theme2 }) => {
               padding: 4,
               border: "none",
               backgroundColor: "transparent",
-              color: theme2.colors.textMuted,
+              color: theme.colors.textMuted,
               cursor: "pointer"
             },
             title: "Copy command",
-            children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme2.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
+            children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
           }
         )
       ]
@@ -1067,7 +875,7 @@ const CommandLine = ({ command, theme: theme2 }) => {
   );
 };
 const QualityEmptyState = ({
-  theme: theme2,
+  theme,
   hasWorkflow
 }) => {
   if (hasWorkflow) {
@@ -1088,7 +896,7 @@ const QualityEmptyState = ({
               style: {
                 margin: 0,
                 fontSize: 14,
-                color: theme2.colors.textMuted,
+                color: theme.colors.textMuted,
                 lineHeight: 1.5
               },
               children: "Quality metrics will appear here after your next CI run completes."
@@ -1103,8 +911,8 @@ const QualityEmptyState = ({
                 gap: 8,
                 padding: "10px 14px",
                 borderRadius: 6,
-                backgroundColor: `${theme2.colors.success}15`,
-                color: theme2.colors.success,
+                backgroundColor: `${theme.colors.success}15`,
+                color: theme.colors.success,
                 fontSize: 13
               },
               children: [
@@ -1137,7 +945,7 @@ const QualityEmptyState = ({
             style: {
               margin: 0,
               fontSize: 14,
-              color: theme2.colors.textMuted,
+              color: theme.colors.textMuted,
               lineHeight: 1.5
             },
             children: "Track your code quality with automated analysis of tests, linting, types, formatting, dead code, and documentation."
@@ -1152,8 +960,8 @@ const QualityEmptyState = ({
               gap: 16,
               padding: 20,
               borderRadius: 8,
-              backgroundColor: theme2.colors.surface,
-              border: `1px solid ${theme2.colors.border}`
+              backgroundColor: theme.colors.surface,
+              border: `1px solid ${theme.colors.border}`
             },
             children: [
               /* @__PURE__ */ jsxs(
@@ -1166,7 +974,7 @@ const QualityEmptyState = ({
                     marginBottom: 4
                   },
                   children: [
-                    /* @__PURE__ */ jsx(Terminal, { size: 20, color: theme2.colors.text }),
+                    /* @__PURE__ */ jsx(Terminal, { size: 20, color: theme.colors.text }),
                     /* @__PURE__ */ jsx(
                       "h4",
                       {
@@ -1174,7 +982,7 @@ const QualityEmptyState = ({
                           margin: 0,
                           fontSize: 15,
                           fontWeight: 600,
-                          color: theme2.colors.text
+                          color: theme.colors.text
                         },
                         children: "Get Started"
                       }
@@ -1192,7 +1000,7 @@ const QualityEmptyState = ({
                       gap: 8,
                       marginBottom: 8,
                       fontSize: 13,
-                      color: theme2.colors.textMuted
+                      color: theme.colors.textMuted
                     },
                     children: [
                       /* @__PURE__ */ jsx(
@@ -1205,8 +1013,8 @@ const QualityEmptyState = ({
                             width: 20,
                             height: 20,
                             borderRadius: "50%",
-                            backgroundColor: theme2.colors.primary,
-                            color: theme2.colors.background,
+                            backgroundColor: theme.colors.primary,
+                            color: theme.colors.background,
                             fontSize: 11,
                             fontWeight: 600
                           },
@@ -1218,10 +1026,10 @@ const QualityEmptyState = ({
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  CommandLine,
+                  CommandLine$1,
                   {
                     command: "npm install -g @principal-ai/quality-lens-cli",
-                    theme: theme2
+                    theme
                   }
                 )
               ] }),
@@ -1235,7 +1043,7 @@ const QualityEmptyState = ({
                       gap: 8,
                       marginBottom: 8,
                       fontSize: 13,
-                      color: theme2.colors.textMuted
+                      color: theme.colors.textMuted
                     },
                     children: [
                       /* @__PURE__ */ jsx(
@@ -1248,8 +1056,8 @@ const QualityEmptyState = ({
                             width: 20,
                             height: 20,
                             borderRadius: "50%",
-                            backgroundColor: theme2.colors.primary,
-                            color: theme2.colors.background,
+                            backgroundColor: theme.colors.primary,
+                            color: theme.colors.background,
                             fontSize: 11,
                             fontWeight: 600
                           },
@@ -1260,7 +1068,7 @@ const QualityEmptyState = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens list", theme: theme2 })
+                /* @__PURE__ */ jsx(CommandLine$1, { command: "quality-lens list", theme })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs(
@@ -1272,7 +1080,7 @@ const QualityEmptyState = ({
                       gap: 8,
                       marginBottom: 8,
                       fontSize: 13,
-                      color: theme2.colors.textMuted
+                      color: theme.colors.textMuted
                     },
                     children: [
                       /* @__PURE__ */ jsx(
@@ -1285,8 +1093,8 @@ const QualityEmptyState = ({
                             width: 20,
                             height: 20,
                             borderRadius: "50%",
-                            backgroundColor: theme2.colors.primary,
-                            color: theme2.colors.background,
+                            backgroundColor: theme.colors.primary,
+                            color: theme.colors.background,
                             fontSize: 11,
                             fontWeight: 600
                           },
@@ -1297,7 +1105,7 @@ const QualityEmptyState = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens init", theme: theme2 })
+                /* @__PURE__ */ jsx(CommandLine$1, { command: "quality-lens init", theme })
               ] }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -1308,7 +1116,7 @@ const QualityEmptyState = ({
                     gap: 6,
                     paddingTop: 8,
                     fontSize: 13,
-                    color: theme2.colors.textMuted
+                    color: theme.colors.textMuted
                   },
                   children: [
                     /* @__PURE__ */ jsx(ChevronRight, { size: 14 }),
@@ -1342,7 +1150,7 @@ const QualityHexagonPanelContent = ({
   events
 }) => {
   var _a;
-  const { theme: theme2 } = useTheme();
+  const { theme } = useTheme();
   const [refreshingPackages, setRefreshingPackages] = React2__default.useState(/* @__PURE__ */ new Set());
   const qualitySlice = context.getSlice("quality");
   const hasQualitySlice = context.hasSlice("quality");
@@ -1381,11 +1189,11 @@ const QualityHexagonPanelContent = ({
     return () => unsubscribers.forEach((unsub) => unsub());
   }, [events, context, packages]);
   const tierColors = {
-    none: theme2.colors.muted,
-    bronze: theme2.colors.warning,
-    silver: theme2.colors.secondary,
-    gold: theme2.colors.accent,
-    platinum: theme2.colors.primary
+    none: theme.colors.muted,
+    bronze: theme.colors.warning,
+    silver: theme.colors.secondary,
+    gold: theme.colors.accent,
+    platinum: theme.colors.primary
   };
   const overallTier = packages.length > 0 ? calculateQualityTier(
     packages.reduce((acc, pkg) => ({
@@ -1401,11 +1209,11 @@ const QualityHexagonPanelContent = ({
     "div",
     {
       style: {
-        fontFamily: theme2.fonts.body,
+        fontFamily: theme.fonts.body,
         height: "100%",
         minHeight: 0,
-        backgroundColor: theme2.colors.background,
-        color: theme2.colors.text,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
         overflowY: "auto",
         boxSizing: "border-box"
       },
@@ -1428,7 +1236,7 @@ const QualityHexagonPanelContent = ({
                     margin: 0,
                     fontSize: 20,
                     fontWeight: 600,
-                    color: theme2.colors.text
+                    color: theme.colors.text
                   },
                   children: "Code Quality"
                 }
@@ -1444,9 +1252,9 @@ const QualityHexagonPanelContent = ({
                     width: 18,
                     height: 18,
                     borderRadius: "50%",
-                    border: `1px solid ${theme2.colors.border}`,
+                    border: `1px solid ${theme.colors.border}`,
                     fontSize: 12,
-                    color: theme2.colors.textMuted,
+                    color: theme.colors.textMuted,
                     cursor: "help"
                   },
                   children: "?"
@@ -1454,7 +1262,7 @@ const QualityHexagonPanelContent = ({
               ),
               packages.length > 1 && /* @__PURE__ */ jsxs("span", { style: {
                 fontSize: 14,
-                color: theme2.colors.textMuted
+                color: theme.colors.textMuted
               }, children: [
                 packages.length,
                 " packages"
@@ -1463,11 +1271,11 @@ const QualityHexagonPanelContent = ({
             /* @__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
+              color: theme.colors.textMuted
             }, children: "Loading quality metrics..." }) : packages.length === 0 ? /* @__PURE__ */ jsx(
               QualityEmptyState,
               {
-                theme: theme2,
+                theme,
                 hasWorkflow
               }
             ) : packages.map((pkg) => {
@@ -1477,7 +1285,7 @@ const QualityHexagonPanelContent = ({
                 {
                   metrics: pkg.metrics,
                   tier,
-                  theme: theme2,
+                  theme,
                   packageName: pkg.name,
                   packageVersion: pkg.version
                 },
@@ -1490,9 +1298,7 @@ const QualityHexagonPanelContent = ({
     }
   );
 };
-const QualityHexagonPanel = (props) => {
-  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(QualityHexagonPanelContent, { ...props }) });
-};
+const QualityHexagonPanel = QualityHexagonPanelContent;
 const METRIC_OPTIONS = [
   { key: "types", label: "Types" },
   { key: "documentation", label: "Docs" },
@@ -1539,15 +1345,15 @@ function formatLabel(item, showRepositoryName, isSameAsRepo) {
   }
   return `${item.repositoryName} / ${item.packageName}`;
 }
-function getValueColor(value, key, theme2) {
+function getValueColor(value, key, theme) {
   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;
+  if (effectiveValue >= 80) return theme.colors.success;
+  if (effectiveValue >= 60) return theme.colors.warning;
+  return theme.colors.error;
 }
 function RepositoryQualityGridItem({
   item,
-  theme: theme2,
+  theme,
   onClick,
   onVertexClick,
   showRepositoryName = true,
@@ -1558,11 +1364,11 @@ function RepositoryQualityGridItem({
   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
+    none: theme.colors.muted,
+    bronze: theme.colors.warning,
+    silver: theme.colors.secondary,
+    gold: theme.colors.accent,
+    platinum: theme.colors.primary
   };
   const displayInfo = React2.useMemo(() => {
     if (selectedMetric) {
@@ -1572,7 +1378,7 @@ function RepositoryQualityGridItem({
         return {
           label: option.label,
           value,
-          valueColor: getValueColor(value, selectedMetric, theme2)
+          valueColor: getValueColor(value, selectedMetric, theme)
         };
       }
     }
@@ -1580,11 +1386,11 @@ function RepositoryQualityGridItem({
       return {
         label: hoveredVertex.label,
         value: hoveredVertex.value,
-        valueColor: getValueColor(hoveredVertex.value, hoveredVertex.key, theme2)
+        valueColor: getValueColor(hoveredVertex.value, hoveredVertex.key, theme)
       };
     }
     return null;
-  }, [selectedMetric, hoveredVertex, item.metrics, theme2]);
+  }, [selectedMetric, hoveredVertex, item.metrics, theme]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1597,8 +1403,8 @@ function RepositoryQualityGridItem({
         gap: 8,
         padding: 12,
         borderRadius: 8,
-        backgroundColor: theme2.colors.surface,
-        border: `1px solid ${theme2.colors.border}`,
+        backgroundColor: theme.colors.surface,
+        border: `1px solid ${theme.colors.border}`,
         cursor: onClick ? "pointer" : "default",
         transition: "all 0.2s ease"
       },
@@ -1609,7 +1415,7 @@ function RepositoryQualityGridItem({
         }
       },
       onMouseLeave: (e) => {
-        e.currentTarget.style.borderColor = theme2.colors.border;
+        e.currentTarget.style.borderColor = theme.colors.border;
         e.currentTarget.style.transform = "translateY(0)";
         setHoveredVertex(null);
       },
@@ -1633,7 +1439,7 @@ function RepositoryQualityGridItem({
                   style: {
                     fontSize: 14,
                     fontWeight: 500,
-                    color: theme2.colors.text
+                    color: theme.colors.text
                   },
                   children: displayInfo.label
                 }
@@ -1652,7 +1458,7 @@ function RepositoryQualityGridItem({
                   ]
                 }
               )
-            ] }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: theme2.colors.textMuted }, children: "Hover a corner" })
+            ] }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: theme.colors.textMuted }, children: "Hover a corner" })
           }
         ),
         /* @__PURE__ */ jsx("div", { style: { width: 200, height: 200 }, children: /* @__PURE__ */ jsx(
@@ -1660,7 +1466,7 @@ function RepositoryQualityGridItem({
           {
             metrics: item.metrics,
             tier: item.tier,
-            theme: theme2,
+            theme,
             showLabels: false,
             showValues: false,
             onVertexHover: setHoveredVertex,
@@ -1684,7 +1490,7 @@ function RepositoryQualityGridItem({
                   style: {
                     fontSize: 12,
                     fontWeight: 500,
-                    color: theme2.colors.text,
+                    color: theme.colors.text,
                     textAlign: "center"
                   },
                   children: label
@@ -1695,7 +1501,7 @@ function RepositoryQualityGridItem({
                 {
                   style: {
                     fontSize: 10,
-                    color: theme2.colors.textMuted
+                    color: theme.colors.textMuted
                   },
                   children: [
                     "v",
@@ -1717,7 +1523,7 @@ function calculateAverageScore(metrics) {
 }
 function RepositoryQualityGrid({
   repositories,
-  theme: theme2,
+  theme,
   onItemClick,
   onVertexClick,
   className,
@@ -1739,11 +1545,11 @@ function RepositoryQualityGrid({
     });
   }, [items, selectedMetric]);
   const tierColors = {
-    none: theme2.colors.muted,
-    bronze: theme2.colors.warning,
-    silver: theme2.colors.secondary,
-    gold: theme2.colors.accent,
-    platinum: theme2.colors.primary
+    none: theme.colors.muted,
+    bronze: theme.colors.warning,
+    silver: theme.colors.secondary,
+    gold: theme.colors.accent,
+    platinum: theme.colors.primary
   };
   const tierLabels = {
     none: "No Data",
@@ -1760,8 +1566,8 @@ function RepositoryQualityGrid({
         style: {
           padding: 40,
           textAlign: "center",
-          color: theme2.colors.textMuted,
-          backgroundColor: theme2.colors.background,
+          color: theme.colors.textMuted,
+          backgroundColor: theme.colors.background,
           borderRadius: 8
         },
         children: "No repositories to display"
@@ -1776,8 +1582,8 @@ function RepositoryQualityGrid({
         display: "flex",
         flexDirection: "column",
         gap: 16,
-        backgroundColor: theme2.colors.background,
-        fontFamily: theme2.fonts.body
+        backgroundColor: theme.colors.background,
+        fontFamily: theme.fonts.body
       },
       children: [
         showSummary && /* @__PURE__ */ jsxs(
@@ -1790,8 +1596,8 @@ function RepositoryQualityGrid({
               flexWrap: "wrap",
               gap: 12,
               padding: "12px 16px",
-              backgroundColor: theme2.colors.surface,
-              border: `1px solid ${theme2.colors.border}`
+              backgroundColor: theme.colors.surface,
+              border: `1px solid ${theme.colors.border}`
             },
             children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
@@ -1801,7 +1607,7 @@ function RepositoryQualityGrid({
                     style: {
                       fontSize: 14,
                       fontWeight: 500,
-                      color: theme2.colors.text
+                      color: theme.colors.text
                     },
                     children: [
                       items.length,
@@ -1810,13 +1616,13 @@ function RepositoryQualityGrid({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textMuted }, children: "•" }),
+                /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textMuted }, children: "•" }),
                 /* @__PURE__ */ jsxs(
                   "span",
                   {
                     style: {
                       fontSize: 14,
-                      color: theme2.colors.textMuted
+                      color: theme.colors.textMuted
                     },
                     children: [
                       repositories.length,
@@ -1835,9 +1641,9 @@ function RepositoryQualityGrid({
                     style: {
                       padding: "4px 8px",
                       fontSize: 13,
-                      backgroundColor: theme2.colors.background,
-                      color: theme2.colors.text,
-                      border: `1px solid ${theme2.colors.border}`,
+                      backgroundColor: theme.colors.background,
+                      color: theme.colors.text,
+                      border: `1px solid ${theme.colors.border}`,
                       borderRadius: 4,
                       cursor: "pointer",
                       outline: "none"
@@ -1856,7 +1662,7 @@ function RepositoryQualityGrid({
                       alignItems: "center",
                       gap: 8,
                       padding: "4px 12px",
-                      backgroundColor: theme2.colors.backgroundLight,
+                      backgroundColor: theme.colors.backgroundLight,
                       borderRadius: 16,
                       border: `1px solid ${tierColors[overallTier]}`
                     },
@@ -1903,7 +1709,7 @@ function RepositoryQualityGrid({
               RepositoryQualityGridItem,
               {
                 item,
-                theme: theme2,
+                theme,
                 onClick: onItemClick ? () => onItemClick(item) : void 0,
                 onVertexClick,
                 showRepositoryName,
@@ -1917,70 +1723,273 @@ 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 }
+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
       },
-      {
-        name: "@org/ui-components",
-        version: "2.0.0",
-        metrics: { tests: 85, deadCode: 8, linting: 95, formatting: 98, types: 92, documentation: 80 }
+      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
       },
-      {
-        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 }
-      }
-    ]
-  }
-];
+      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
 }) => {
   var _a;
-  const { theme: theme2 } = useTheme();
+  const { theme } = 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]);
+    return [];
+  }, [(_a = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a.repositories]);
   const handleItemClick = (item) => {
     events.emit({
       type: "principal-ade.repository-quality-grid:item:click",
@@ -2026,11 +2035,11 @@ const RepositoryQualityGridPanelContent = ({
     "div",
     {
       style: {
-        fontFamily: theme2.fonts.body,
+        fontFamily: theme.fonts.body,
         height: "100%",
         minHeight: 0,
-        backgroundColor: theme2.colors.background,
-        color: theme2.colors.text,
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
         overflowY: "auto",
         boxSizing: "border-box"
       },
@@ -2040,25 +2049,15 @@ const RepositoryQualityGridPanelContent = ({
           style: {
             padding: 40,
             textAlign: "center",
-            color: theme2.colors.textMuted
+            color: theme.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(
+      ) : repositories.length === 0 ? /* @__PURE__ */ jsx(RepositoryQualityEmptyState, { theme }) : /* @__PURE__ */ jsx(
         RepositoryQualityGrid,
         {
           repositories,
-          theme: theme2,
+          theme,
           onItemClick: handleItemClick,
           onVertexClick: handleVertexClick,
           showRepositoryName: true,
@@ -2068,9 +2067,7 @@ const RepositoryQualityGridPanelContent = ({
     }
   );
 };
-const RepositoryQualityGridPanel = (props) => {
-  return /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RepositoryQualityGridPanelContent, { ...props }) });
-};
+const RepositoryQualityGridPanel = RepositoryQualityGridPanelContent;
 const panels = [
   {
     metadata: {