@industry-theme/repository-composition-panels 0.2.14 → 0.2.15

package/dist/panels.bundle.js

@@ -129,18 +129,18 @@ 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$r = [
+const __iconNode$s = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$r);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$s);
 /**
  * @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$q = [
+const __iconNode$r = [
   [
     "path",
     {
@@ -151,93 +151,93 @@ const __iconNode$q = [
   ["path", { d: "m3.3 7 8.7 5 8.7-5", key: "g66t2b" }],
   ["path", { d: "M12 22V12", key: "d0xqtd" }]
 ];
-const Box = createLucideIcon("box", __iconNode$q);
+const Box = createLucideIcon("box", __iconNode$r);
 /**
  * @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$p = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$p);
+const __iconNode$q = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$q);
 /**
  * @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$o = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$o);
+const __iconNode$p = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$p);
 /**
  * @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$n = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$n);
+const __iconNode$o = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$o);
 /**
  * @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$m = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$m);
+const __iconNode$n = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$n);
 /**
  * @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$l = [
+const __iconNode$m = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$l);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$m);
 /**
  * @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$k = [
+const __iconNode$l = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$k);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$l);
 /**
  * @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$j = [
+const __iconNode$k = [
   ["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$j);
+const Copy = createLucideIcon("copy", __iconNode$k);
 /**
  * @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$i = [
+const __iconNode$j = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$i);
+const ExternalLink = createLucideIcon("external-link", __iconNode$j);
 /**
  * @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$h = [
+const __iconNode$i = [
   [
     "path",
     {
@@ -249,14 +249,14 @@ const __iconNode$h = [
   ["path", { d: "M10 12.5 8 15l2 2.5", key: "1tg20x" }],
   ["path", { d: "m14 12.5 2 2.5-2 2.5", key: "yinavb" }]
 ];
-const FileCode = createLucideIcon("file-code", __iconNode$h);
+const FileCode = createLucideIcon("file-code", __iconNode$i);
 /**
  * @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$g = [
+const __iconNode$h = [
   [
     "path",
     {
@@ -267,14 +267,14 @@ const __iconNode$g = [
   ["path", { d: "M12 17h.01", key: "p32p05" }],
   ["path", { d: "M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3", key: "mhlwft" }]
 ];
-const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$g);
+const FileQuestionMark = createLucideIcon("file-question-mark", __iconNode$h);
 /**
  * @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$f = [
+const __iconNode$g = [
   [
     "path",
     {
@@ -285,14 +285,14 @@ const __iconNode$f = [
   ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
   ["path", { d: "m10 18 3-3-3-3", key: "18f6ys" }]
 ];
-const FileSymlink = createLucideIcon("file-symlink", __iconNode$f);
+const FileSymlink = createLucideIcon("file-symlink", __iconNode$g);
 /**
  * @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$e = [
+const __iconNode$f = [
   [
     "path",
     {
@@ -305,14 +305,14 @@ const __iconNode$e = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$e);
+const FileText = createLucideIcon("file-text", __iconNode$f);
 /**
  * @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$d = [
+const __iconNode$e = [
   [
     "path",
     {
@@ -321,14 +321,14 @@ const __iconNode$d = [
     }
   ]
 ];
-const FolderOpen = createLucideIcon("folder-open", __iconNode$d);
+const FolderOpen = createLucideIcon("folder-open", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -337,27 +337,27 @@ const __iconNode$c = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$c);
+const Folder = createLucideIcon("folder", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$c = [
   ["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$b);
+const GitBranch = createLucideIcon("git-branch", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   [
     "path",
     {
@@ -380,35 +380,35 @@ const __iconNode$a = [
     }
   ]
 ];
-const Layers = createLucideIcon("layers", __iconNode$a);
+const Layers = createLucideIcon("layers", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$a = [
   ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
   ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
   ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
   ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
 ];
-const LayoutGrid = createLucideIcon("layout-grid", __iconNode$9);
+const LayoutGrid = createLucideIcon("layout-grid", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$8);
+const __iconNode$9 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -420,50 +420,50 @@ const __iconNode$7 = [
   ["polyline", { points: "3.29 7 12 12 20.71 7", key: "ousv84" }],
   ["path", { d: "m7.5 4.27 9 5.15", key: "1c824w" }]
 ];
-const Package = createLucideIcon("package", __iconNode$7);
+const Package = createLucideIcon("package", __iconNode$8);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$6);
+const Plus = createLucideIcon("plus", __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$5 = [
+const __iconNode$6 = [
   ["path", { d: "m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", key: "7g6ntu" }],
   ["path", { d: "m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z", key: "ijws7r" }],
   ["path", { d: "M7 21h10", key: "1b0cd5" }],
   ["path", { d: "M12 3v18", key: "108xh3" }],
   ["path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2", key: "3gwbw2" }]
 ];
-const Scale = createLucideIcon("scale", __iconNode$5);
+const Scale = createLucideIcon("scale", __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$4 = [
+const __iconNode$5 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __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$3 = [
+const __iconNode$4 = [
   [
     "path",
     {
@@ -473,14 +473,14 @@ const __iconNode$3 = [
   ],
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
 ];
-const Settings = createLucideIcon("settings", __iconNode$3);
+const Settings = createLucideIcon("settings", __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$2 = [
+const __iconNode$3 = [
   ["path", { d: "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", key: "1m0v6g" }],
   [
     "path",
@@ -490,18 +490,36 @@ const __iconNode$2 = [
     }
   ]
 ];
-const SquarePen = createLucideIcon("square-pen", __iconNode$2);
+const SquarePen = createLucideIcon("square-pen", __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$1 = [
+const __iconNode$2 = [
   ["path", { d: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ];
-const Terminal = createLucideIcon("terminal", __iconNode$1);
+const Terminal = createLucideIcon("terminal", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$1);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -9271,6 +9289,373 @@ const FilterBar = ({
     }
   );
 };
+const LensRow = ({ lens }) => {
+  const { theme } = useTheme();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const getStatusDisplay = () => {
+    if (lens.ready) {
+      return { icon: Check, color: "#10b981", label: "Ready" };
+    }
+    if (lens.partial) {
+      return { icon: TriangleAlert, color: "#f59e0b", label: "Partial" };
+    }
+    if (lens.checks.some((c) => c.satisfied)) {
+      return { icon: X, color: "#ef4444", label: "Missing" };
+    }
+    return { icon: Minus, color: theme.colors.textSecondary, label: "Not configured" };
+  };
+  const status = getStatusDisplay();
+  const StatusIcon = status.icon;
+  const hasDetails = lens.checks.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${theme.colors.border}`
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => hasDetails && setIsExpanded(!isExpanded),
+            disabled: !hasDetails,
+            style: {
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "10px 12px",
+              backgroundColor: "transparent",
+              border: "none",
+              cursor: hasDetails ? "pointer" : "default",
+              textAlign: "left",
+              color: theme.colors.text
+            },
+            children: [
+              hasDetails && (isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, color: theme.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: theme.colors.textSecondary })),
+              !hasDetails && /* @__PURE__ */ jsx("div", { style: { width: 14 } }),
+              /* @__PURE__ */ jsx(StatusIcon, { size: 16, color: status.color }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    flex: 1,
+                    fontSize: theme.fontSizes[1],
+                    fontWeight: 500,
+                    color: lens.ready ? theme.colors.text : theme.colors.textSecondary
+                  },
+                  children: lens.displayName
+                }
+              ),
+              lens.missing.length > 0 && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    fontSize: theme.fontSizes[0],
+                    color: status.color,
+                    padding: "2px 6px",
+                    backgroundColor: status.color + "15",
+                    borderRadius: "4px"
+                  },
+                  children: [
+                    lens.missing.length,
+                    " missing"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && hasDetails && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "0 12px 12px 34px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px"
+            },
+            children: lens.checks.map((check, idx) => /* @__PURE__ */ jsx(RequirementRow, { check }, idx))
+          }
+        )
+      ]
+    }
+  );
+};
+const RequirementRow = ({ check }) => {
+  const { theme } = useTheme();
+  const { requirement, satisfied, foundValue } = check;
+  const typeLabels = {
+    devDependency: "dep",
+    script: "script",
+    config: "config"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontSize: theme.fontSizes[0],
+        padding: "4px 0"
+      },
+      children: [
+        satisfied ? /* @__PURE__ */ jsx(Check, { size: 12, color: "#10b981" }) : /* @__PURE__ */ jsx(X, { size: 12, color: "#ef4444" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              padding: "1px 4px",
+              backgroundColor: theme.colors.backgroundTertiary,
+              color: theme.colors.textSecondary,
+              borderRadius: "3px",
+              fontSize: "10px",
+              fontWeight: 500,
+              textTransform: "uppercase"
+            },
+            children: typeLabels[requirement.type] || requirement.type
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: satisfied ? theme.colors.text : theme.colors.textSecondary,
+              fontFamily: "monospace"
+            },
+            children: requirement.name
+          }
+        ),
+        satisfied && foundValue && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: theme.colors.textSecondary,
+              marginLeft: "auto",
+              fontFamily: "monospace"
+            },
+            children: foundValue.length > 30 ? foundValue.slice(0, 30) + "..." : foundValue
+          }
+        ),
+        !satisfied && requirement.suggestedFix && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              color: theme.colors.textSecondary,
+              marginLeft: "auto",
+              fontStyle: "italic"
+            },
+            children: [
+              "(add: ",
+              requirement.suggestedFix,
+              ")"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const LensReadinessSection = ({
+  lensReadiness
+}) => {
+  const { theme } = useTheme();
+  if (!lensReadiness || Object.keys(lensReadiness).length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "16px",
+          textAlign: "center",
+          color: theme.colors.textSecondary,
+          fontSize: theme.fontSizes[1]
+        },
+        children: "No lens readiness data available"
+      }
+    );
+  }
+  const sortedLenses = Object.values(lensReadiness).sort((a, b) => {
+    if (a.ready && !b.ready) return -1;
+    if (!a.ready && b.ready) return 1;
+    if (a.partial && !b.partial) return -1;
+    if (!a.partial && b.partial) return 1;
+    return a.displayName.localeCompare(b.displayName);
+  });
+  const readyCount = sortedLenses.filter((l) => l.ready).length;
+  const totalCount = sortedLenses.length;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          borderBottom: `1px solid ${theme.colors.border}`,
+          backgroundColor: theme.colors.backgroundTertiary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: theme.fontSizes[0],
+                fontWeight: 600,
+                color: theme.colors.textSecondary,
+                textTransform: "uppercase",
+                letterSpacing: "0.5px"
+              },
+              children: "Quality Lenses"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                fontSize: theme.fontSizes[0],
+                color: readyCount === totalCount ? "#10b981" : theme.colors.textSecondary,
+                fontWeight: 500
+              },
+              children: [
+                readyCount,
+                "/",
+                totalCount,
+                " ready"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { children: sortedLenses.map((lens) => /* @__PURE__ */ jsx(LensRow, { lens }, lens.lensId)) })
+  ] });
+};
+const OtherScriptsSection = ({
+  commands,
+  onCommandClick
+}) => {
+  const { theme } = useTheme();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const nonLensCommands = commands.filter((cmd) => !cmd.isLensCommand);
+  if (nonLensCommands.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { borderTop: `1px solid ${theme.colors.border}` }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        style: {
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: "8px 12px",
+          backgroundColor: theme.colors.backgroundTertiary,
+          border: "none",
+          cursor: "pointer",
+          textAlign: "left"
+        },
+        children: [
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 14, color: theme.colors.textSecondary }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: theme.colors.textSecondary }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: theme.fontSizes[0],
+                fontWeight: 600,
+                color: theme.colors.textSecondary,
+                textTransform: "uppercase",
+                letterSpacing: "0.5px"
+              },
+              children: "Other Scripts"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: theme.fontSizes[0],
+                color: theme.colors.textSecondary,
+                marginLeft: "auto"
+              },
+              children: nonLensCommands.length
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          padding: "8px 12px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px"
+        },
+        children: nonLensCommands.map((cmd, idx) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "6px 10px",
+              backgroundColor: theme.colors.backgroundSecondary,
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: "4px",
+              color: theme.colors.text,
+              cursor: "pointer",
+              textAlign: "left",
+              transition: "border-color 0.15s ease"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.borderColor = theme.colors.primary;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.borderColor = theme.colors.border;
+            },
+            children: [
+              /* @__PURE__ */ jsx(Terminal, { size: 12, color: theme.colors.textSecondary }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontWeight: 500,
+                    fontSize: theme.fontSizes[1],
+                    minWidth: "60px"
+                  },
+                  children: cmd.name
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    flex: 1,
+                    fontSize: theme.fontSizes[0],
+                    color: theme.colors.textSecondary,
+                    fontFamily: "monospace",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: cmd.command
+                }
+              ),
+              /* @__PURE__ */ jsx(ExternalLink, { size: 10, color: theme.colors.textSecondary })
+            ]
+          },
+          idx
+        ))
+      }
+    )
+  ] });
+};
 const dependencyTypeOrder = {
   peer: 0,
   production: 1,
@@ -9577,13 +9962,13 @@ const PackageCard = ({
   onPackageClick,
   standalone = false
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { theme } = useTheme();
   const [activeTab, setActiveTab] = useState("dependencies");
   const [activeFilters, setActiveFilters] = useState(/* @__PURE__ */ new Set());
   const [searchQuery, setSearchQuery] = useState("");
   const [showInfoModal, setShowInfoModal] = useState(false);
-  const configFiles = useMemo(() => {
+  useMemo(() => {
     if (!pkg.configFiles) return [];
     return Object.entries(pkg.configFiles).filter(([, config]) => config == null ? void 0 : config.exists).map(([name, config]) => ({ name, ...config }));
   }, [pkg.configFiles]);
@@ -9753,8 +10138,7 @@ const PackageCard = ({
           },
           children: [
             { id: "dependencies", label: "Dependencies", count: dependencyItems.length },
-            { id: "configs", label: "Configs", count: configFiles.length },
-            { id: "commands", label: "Commands", count: commands.length }
+            { id: "lenses", label: "Lenses", count: ((_c = pkg.qualityMetrics) == null ? void 0 : _c.lensReadiness) ? Object.values(pkg.qualityMetrics.lensReadiness).filter((l) => l.ready).length : 0, total: ((_d = pkg.qualityMetrics) == null ? void 0 : _d.lensReadiness) ? Object.keys(pkg.qualityMetrics.lensReadiness).length : 0 }
           ].map((tab) => /* @__PURE__ */ jsxs(
             "button",
             {
@@ -9784,7 +10168,7 @@ const PackageCard = ({
                       borderRadius: "10px",
                       fontSize: theme.fontSizes[0]
                     },
-                    children: tab.count
+                    children: "total" in tab ? `${tab.count}/${tab.total}` : tab.count
                   }
                 )
               ]
@@ -9793,109 +10177,17 @@ const PackageCard = ({
           ))
         }
       ),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, padding: activeTab === "dependencies" ? "0" : "12px", overflow: "auto" }, children: [
-        activeTab === "commands" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: commands.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }, children: "No commands available" }) : commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              padding: "8px 12px",
-              backgroundColor: theme.colors.backgroundTertiary,
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: "6px",
-              color: theme.colors.text,
-              cursor: "pointer",
-              textAlign: "left"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Terminal, { size: 14, color: theme.colors.accent }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme.fontSizes[1] }, children: cmd.name }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: theme.fontSizes[0],
-                      color: theme.colors.textSecondary,
-                      fontFamily: "monospace",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap"
-                    },
-                    children: cmd.command
-                  }
-                )
-              ] }),
-              cmd.isLensCommand && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    padding: "2px 6px",
-                    backgroundColor: theme.colors.accent + "20",
-                    color: theme.colors.accent,
-                    borderRadius: "4px",
-                    fontSize: theme.fontSizes[0]
-                  },
-                  children: cmd.lensId
-                }
-              ),
-              /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme.colors.textSecondary })
-            ]
-          },
-          idx
-        )) }),
-        activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: configFiles.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }, children: "No config files detected" }) : configFiles.map((config, idx) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => onConfigClick == null ? void 0 : onConfigClick(config),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              padding: "8px 12px",
-              backgroundColor: theme.colors.backgroundTertiary,
-              border: `1px solid ${theme.colors.border}`,
-              borderRadius: "6px",
-              color: theme.colors.text,
-              cursor: "pointer",
-              textAlign: "left"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Settings, { size: 14, color: theme.colors.textSecondary }),
-              /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme.fontSizes[1] }, children: config.name }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      fontSize: theme.fontSizes[0],
-                      color: theme.colors.textSecondary,
-                      fontFamily: "monospace"
-                    },
-                    children: config.path
-                  }
-                )
-              ] }),
-              config.isInline && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    padding: "2px 6px",
-                    backgroundColor: theme.colors.textSecondary + "20",
-                    color: theme.colors.textSecondary,
-                    borderRadius: "4px",
-                    fontSize: theme.fontSizes[0]
-                  },
-                  children: "inline"
-                }
-              )
-            ]
-          },
-          idx
-        )) }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, padding: activeTab === "dependencies" ? "0" : "0", overflow: "auto" }, children: [
+        activeTab === "lenses" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
+          /* @__PURE__ */ jsx(LensReadinessSection, { lensReadiness: (_e = pkg.qualityMetrics) == null ? void 0 : _e.lensReadiness }),
+          /* @__PURE__ */ jsx(
+            OtherScriptsSection,
+            {
+              commands,
+              onCommandClick: (cmd) => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path)
+            }
+          )
+        ] }),
         activeTab === "dependencies" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
           dependencyItems.length === 0 ? /* @__PURE__ */ jsxs(
             "div",
@@ -10070,8 +10362,7 @@ const PackageCard = ({
               },
               children: [
                 { id: "dependencies", label: "Deps", count: dependencyItems.length },
-                { id: "configs", label: "Configs", count: configFiles.length },
-                { id: "commands", label: "Commands", count: commands.length }
+                { id: "lenses", label: "Lenses", count: ((_f = pkg.qualityMetrics) == null ? void 0 : _f.lensReadiness) ? Object.values(pkg.qualityMetrics.lensReadiness).filter((l) => l.ready).length : 0, total: ((_g = pkg.qualityMetrics) == null ? void 0 : _g.lensReadiness) ? Object.keys(pkg.qualityMetrics.lensReadiness).length : 0 }
               ].map((tab) => /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -10101,7 +10392,7 @@ const PackageCard = ({
                           borderRadius: "10px",
                           fontSize: theme.fontSizes[0]
                         },
-                        children: tab.count
+                        children: "total" in tab ? `${tab.count}/${tab.total}` : tab.count
                       }
                     )
                   ]
@@ -10110,109 +10401,17 @@ const PackageCard = ({
               ))
             }
           ),
-          /* @__PURE__ */ jsxs("div", { style: { padding: activeTab === "dependencies" ? "0" : "12px", maxHeight: "300px", overflow: "auto" }, children: [
-            activeTab === "commands" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: commands.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }, children: "No commands available" }) : commands.map((cmd, idx) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path),
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  padding: "8px 12px",
-                  backgroundColor: theme.colors.backgroundTertiary,
-                  border: `1px solid ${theme.colors.border}`,
-                  borderRadius: "6px",
-                  color: theme.colors.text,
-                  cursor: "pointer",
-                  textAlign: "left"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Terminal, { size: 14, color: theme.colors.accent }),
-                  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme.fontSizes[1] }, children: cmd.name }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: theme.fontSizes[0],
-                          color: theme.colors.textSecondary,
-                          fontFamily: "monospace",
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        },
-                        children: cmd.command
-                      }
-                    )
-                  ] }),
-                  cmd.isLensCommand && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        padding: "2px 6px",
-                        backgroundColor: theme.colors.accent + "20",
-                        color: theme.colors.accent,
-                        borderRadius: "4px",
-                        fontSize: theme.fontSizes[0]
-                      },
-                      children: cmd.lensId
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(ExternalLink, { size: 12, color: theme.colors.textSecondary })
-                ]
-              },
-              idx
-            )) }),
-            activeTab === "configs" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: configFiles.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }, children: "No config files detected" }) : configFiles.map((config, idx) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => onConfigClick == null ? void 0 : onConfigClick(config),
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                  padding: "8px 12px",
-                  backgroundColor: theme.colors.backgroundTertiary,
-                  border: `1px solid ${theme.colors.border}`,
-                  borderRadius: "6px",
-                  color: theme.colors.text,
-                  cursor: "pointer",
-                  textAlign: "left"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Settings, { size: 14, color: theme.colors.textSecondary }),
-                  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: theme.fontSizes[1] }, children: config.name }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: theme.fontSizes[0],
-                          color: theme.colors.textSecondary,
-                          fontFamily: "monospace"
-                        },
-                        children: config.path
-                      }
-                    )
-                  ] }),
-                  config.isInline && /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        padding: "2px 6px",
-                        backgroundColor: theme.colors.textSecondary + "20",
-                        color: theme.colors.textSecondary,
-                        borderRadius: "4px",
-                        fontSize: theme.fontSizes[0]
-                      },
-                      children: "inline"
-                    }
-                  )
-                ]
-              },
-              idx
-            )) }),
+          /* @__PURE__ */ jsxs("div", { style: { padding: activeTab === "dependencies" ? "0" : "0", maxHeight: "300px", overflow: "auto" }, children: [
+            activeTab === "lenses" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+              /* @__PURE__ */ jsx(LensReadinessSection, { lensReadiness: (_h = pkg.qualityMetrics) == null ? void 0 : _h.lensReadiness }),
+              /* @__PURE__ */ jsx(
+                OtherScriptsSection,
+                {
+                  commands,
+                  onCommandClick: (cmd) => onCommandClick == null ? void 0 : onCommandClick(cmd, pkg.packageData.path)
+                }
+              )
+            ] }),
             activeTab === "dependencies" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
               dependencyItems.length === 0 ? /* @__PURE__ */ jsxs(
                 "div",