claudeup 4.5.4 → 4.6.0

package/src/ui/renderers/skillRenderers.js

@@ -1,16 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { STAR_RELIABILITY_INFO } from "../../data/skill-repos.js";
 import { SelectableRow, ListCategoryRow, ScopeSquares, MetaText, KeyValueLine, DetailSection, } from "../components/primitives/index.js";
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatStars(stars) {
+function formatStarsNum(stars) {
     if (!stars)
         return "";
     if (stars >= 1000000)
-        return `★ ${(stars / 1000000).toFixed(1)}M`;
+        return `${(stars / 1000000).toFixed(1)}M`;
     if (stars >= 10000)
-        return `★ ${Math.round(stars / 1000)}K`;
+        return `${Math.round(stars / 1000)}K`;
     if (stars >= 1000)
-        return `★ ${(stars / 1000).toFixed(1)}K`;
-    return `★ ${stars}`;
+        return `${(stars / 1000).toFixed(1)}K`;
+    return `${stars}`;
+}
+/** Star icon and color based on reliability classification */
+function starIcon(reliability) {
+    if (reliability === "mega-repo")
+        return "☆";
+    if (reliability === "skill-dump")
+        return "☆";
+    return "★";
+}
+function starColor(reliability) {
+    if (reliability === "mega-repo")
+        return "gray";
+    if (reliability === "skill-dump")
+        return "#888800";
+    return "yellow";
+}
+function formatStars(stars, reliability) {
+    if (!stars)
+        return "";
+    return `${starIcon(reliability)} ${formatStarsNum(stars)}`;
 }
 // ─── Category renderer ────────────────────────────────────────────────────────
 const categoryRenderer = {
@@ -37,24 +58,60 @@ const skillRenderer = {
         const { skill } = item;
         const hasUser = skill.installedScope === "user";
         const hasProject = skill.installedScope === "project";
-        const starsStr = formatStars(skill.stars);
+        const reliability = skill.starReliability;
+        const starsStr = formatStars(skill.stars, reliability);
+        const sColor = starColor(reliability);
         const displayName = truncateName(skill.name);
-        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: displayName }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null] }));
+        const indentLevel = item.indent ?? 1;
+        return (_jsxs(SelectableRow, { selected: isSelected, indent: indentLevel, children: [_jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected }), _jsx("span", { children: " " }), _jsx("span", { fg: isSelected ? "white" : skill.installed ? "white" : "gray", children: displayName }), skill.hasUpdate ? _jsx(MetaText, { text: " \u2B06", tone: "warning" }) : null, starsStr ? _jsx("span", { fg: sColor, children: `  ${starsStr}` }) : null] }));
     },
     renderDetail: ({ item }) => {
         const { skill } = item;
         const fm = skill.frontmatter;
         const description = fm?.description || skill.description || "Loading...";
-        const starsStr = formatStars(skill.stars);
-        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), _jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : "gray", children: skill.installedScope === "user" ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { fg: "gray", children: " ~/.claude/skills/" })] }), _jsxs("text", { children: [_jsx("span", { bg: "green", fg: "black", children: " p " }), _jsx("span", { fg: skill.installedScope === "project" ? "green" : "gray", children: skill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skill.installed
+        const reliability = skill.starReliability;
+        const starsStr = formatStars(skill.stars, reliability);
+        const sColor = starColor(reliability);
+        const reliabilityInfo = reliability ? STAR_RELIABILITY_INFO[reliability] : null;
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsx("strong", { children: skill.name }), starsStr ? _jsxs("span", { fg: sColor, children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: description }) }), fm?.category ? (_jsx(KeyValueLine, { label: "Category", value: _jsx("span", { fg: "cyan", children: fm.category }) })) : null, fm?.author ? (_jsx(KeyValueLine, { label: "Author", value: _jsx("span", { children: fm.author }) })) : null, fm?.version ? (_jsx(KeyValueLine, { label: "Version", value: _jsx("span", { children: fm.version }) })) : null, fm?.tags && fm.tags.length > 0 ? (_jsx(KeyValueLine, { label: "Tags", value: _jsx("span", { children: fm.tags.join(", ") }) })) : null, _jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skill.source.repo })] }), _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "          " }), _jsx("span", { fg: "gray", children: skill.repoPath })] })] }), reliabilityInfo && reliability !== "dedicated" && (_jsx("box", { marginTop: 1, children: _jsxs("text", { children: [_jsxs("span", { fg: sColor, children: [starIcon(reliability), " "] }), _jsx("span", { fg: sColor, children: _jsx("strong", { children: reliabilityInfo.label }) }), _jsxs("span", { fg: "gray", children: [" \u2014 ", reliabilityInfo.description] })] }) })), _jsxs(DetailSection, { children: [_jsx("text", { children: "─".repeat(24) }), _jsx("text", { children: _jsx("strong", { children: "Scopes:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { bg: "cyan", fg: "black", children: " u " }), _jsx("span", { fg: skill.installedScope === "user" ? "cyan" : "gray", children: skill.installedScope === "user" ? " ● " : " ○ " }), _jsx("span", { fg: "cyan", children: "User" }), _jsx("span", { fg: "gray", children: " ~/.claude/skills/" })] }), _jsxs("text", { children: [_jsx("span", { bg: "green", fg: "black", children: " p " }), _jsx("span", { fg: skill.installedScope === "project" ? "green" : "gray", children: skill.installedScope === "project" ? " ● " : " ○ " }), _jsx("span", { fg: "green", children: "Project" }), _jsx("span", { fg: "gray", children: " .claude/skills/" })] })] })] }), skill.hasUpdate && (_jsx("box", { marginTop: 1, children: _jsx("text", { bg: "yellow", fg: "black", children: " UPDATE AVAILABLE " }) })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: skill.installed
                             ? "Press u/p to toggle scope"
                             : "Press u/p to install" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
     },
 };
+// ─── Skill Set renderer ──────────────────────────────────────────────────────
+const MAX_SET_NAME_LEN = 28;
+const skillSetRenderer = {
+    renderRow: ({ item, isSelected }) => {
+        const { skillSet, expanded } = item;
+        const arrow = expanded ? "\u25BC" : "\u25B6";
+        const displayName = skillSet.name.length > MAX_SET_NAME_LEN
+            ? skillSet.name.slice(0, MAX_SET_NAME_LEN - 1) + "\u2026"
+            : skillSet.name;
+        // Count installed child skills
+        const installedCount = skillSet.loaded
+            ? skillSet.skills.filter((s) => s.installed).length
+            : 0;
+        const totalCount = skillSet.loaded ? skillSet.skills.length : "...";
+        const countStr = `(${installedCount}/${totalCount})`;
+        // Any child installed at user or project scope?
+        const hasUser = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "user");
+        const hasProject = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "project");
+        const starsStr = formatStars(skillSet.stars);
+        return (_jsxs(SelectableRow, { selected: isSelected, indent: 1, children: [_jsxs("span", { fg: isSelected ? "white" : "gray", children: [arrow, " "] }), _jsxs("span", { fg: isSelected ? "white" : "yellow", children: [skillSet.icon, " "] }), _jsx("span", { fg: isSelected ? "white" : "cyan", children: _jsx("strong", { children: displayName }) }), _jsxs("span", { fg: "gray", children: ["  ", countStr] }), starsStr ? _jsx(MetaText, { text: `  ${starsStr}`, tone: "warning" }) : null, _jsx("span", { children: "  " }), _jsx(ScopeSquares, { user: hasUser, project: hasProject, selected: isSelected })] }));
+    },
+    renderDetail: ({ item }) => {
+        const { skillSet, expanded } = item;
+        const starsStr = formatStars(skillSet.stars);
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("text", { fg: "cyan", children: [_jsxs("strong", { children: [skillSet.icon, " ", skillSet.name] }), starsStr ? _jsxs("span", { fg: "yellow", children: ["  ", starsStr] }) : null] }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "white", children: skillSet.description }) }), _jsx(DetailSection, { children: _jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Source    " }), _jsx("span", { fg: "#5c9aff", children: skillSet.repo })] }) }), skillSet.loading && (_jsx("box", { marginTop: 1, children: _jsx("text", { fg: "yellow", children: "Loading skills..." }) })), skillSet.error && (_jsx("box", { marginTop: 1, children: _jsxs("text", { fg: "red", children: ["Error: ", skillSet.error] }) })), skillSet.loaded && skillSet.skills.length > 0 && (_jsxs(DetailSection, { children: [_jsxs("text", { children: [_jsx("strong", { children: "Skills in this set:" }), _jsxs("span", { fg: "gray", children: [" ", "(", skillSet.skills.filter((s) => s.installed).length, "/", skillSet.skills.length, " installed)"] })] }), _jsx("box", { marginTop: 1, flexDirection: "column", children: skillSet.skills.map((s) => (_jsxs("text", { children: [_jsx("span", { fg: s.installedScope === "user" ? "cyan" : "gray", children: s.installedScope === "user" ? "\u25A0" : "\u25A1" }), _jsx("span", { fg: s.installedScope === "project" ? "green" : "gray", children: s.installedScope === "project" ? "\u25A0" : "\u25A1" }), _jsxs("span", { fg: s.installed ? "white" : "gray", children: [" ", s.name] })] }, s.id))) })] })), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "gray", children: expanded
+                            ? "Press Enter to collapse \u2022 u/p to install all"
+                            : "Press Enter to expand \u2022 u/p to install all" }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { bg: "#555555", fg: "white", children: " o " }), _jsx("span", { fg: "gray", children: " Open in browser" })] }) })] }));
+    },
+};
 // ─── Registry ─────────────────────────────────────────────────────────────────
 export const skillRenderers = {
     category: categoryRenderer,
     skill: skillRenderer,
+    skillset: skillSetRenderer,
 };
 /**
  * Dispatch rendering by item kind.
@@ -63,6 +120,9 @@ export function renderSkillRow(item, _index, isSelected) {
     if (item.kind === "category") {
         return skillRenderers.category.renderRow({ item, isSelected });
     }
+    if (item.kind === "skillset") {
+        return skillRenderers.skillset.renderRow({ item, isSelected });
+    }
     return skillRenderers.skill.renderRow({ item, isSelected });
 }
 export function renderSkillDetail(item) {
@@ -71,5 +131,8 @@ export function renderSkillDetail(item) {
     if (item.kind === "category") {
         return skillRenderers.category.renderDetail({ item });
     }
+    if (item.kind === "skillset") {
+        return skillRenderers.skillset.renderDetail({ item });
+    }
     return skillRenderers.skill.renderDetail({ item });
 }

package/src/ui/renderers/skillRenderers.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import type { ItemRenderer } from "../registry.js";
-import type { SkillBrowserItem, SkillCategoryItem, SkillSkillItem } from "../adapters/skillsAdapter.js";
+import type { SkillBrowserItem, SkillCategoryItem, SkillSkillItem, SkillSetItem } from "../adapters/skillsAdapter.js";
+import type { StarReliability } from "../../types/index.js";
+import { STAR_RELIABILITY_INFO } from "../../data/skill-repos.js";
 import {
   SelectableRow,
   ListCategoryRow,
@@ -14,12 +16,30 @@ import {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function formatStars(stars?: number): string {
+function formatStarsNum(stars?: number): string {
   if (!stars) return "";
-  if (stars >= 1000000) return `★ ${(stars / 1000000).toFixed(1)}M`;
-  if (stars >= 10000) return `★ ${Math.round(stars / 1000)}K`;
-  if (stars >= 1000) return `★ ${(stars / 1000).toFixed(1)}K`;
-  return `★ ${stars}`;
+  if (stars >= 1000000) return `${(stars / 1000000).toFixed(1)}M`;
+  if (stars >= 10000) return `${Math.round(stars / 1000)}K`;
+  if (stars >= 1000) return `${(stars / 1000).toFixed(1)}K`;
+  return `${stars}`;
+}
+
+/** Star icon and color based on reliability classification */
+function starIcon(reliability?: StarReliability): string {
+  if (reliability === "mega-repo") return "☆";
+  if (reliability === "skill-dump") return "☆";
+  return "★";
+}
+
+function starColor(reliability?: StarReliability): string {
+  if (reliability === "mega-repo") return "gray";
+  if (reliability === "skill-dump") return "#888800";
+  return "yellow";
+}
+
+function formatStars(stars?: number, reliability?: StarReliability): string {
+  if (!stars) return "";
+  return `${starIcon(reliability)} ${formatStarsNum(stars)}`;
 }
 
 // ─── Category renderer ────────────────────────────────────────────────────────
@@ -75,18 +95,21 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
     const { skill } = item;
     const hasUser = skill.installedScope === "user";
     const hasProject = skill.installedScope === "project";
-    const starsStr = formatStars(skill.stars);
+    const reliability = skill.starReliability;
+    const starsStr = formatStars(skill.stars, reliability);
+    const sColor = starColor(reliability);
     const displayName = truncateName(skill.name);
+    const indentLevel = item.indent ?? 1;
 
     return (
-      <SelectableRow selected={isSelected} indent={1}>
+      <SelectableRow selected={isSelected} indent={indentLevel}>
         <ScopeSquares user={hasUser} project={hasProject} selected={isSelected} />
         <span> </span>
         <span fg={isSelected ? "white" : skill.installed ? "white" : "gray"}>
           {displayName}
         </span>
         {skill.hasUpdate ? <MetaText text=" ⬆" tone="warning" /> : null}
-        {starsStr ? <MetaText text={`  ${starsStr}`} tone="warning" /> : null}
+        {starsStr ? <span fg={sColor}>{`  ${starsStr}`}</span> : null}
       </SelectableRow>
     );
   },
@@ -95,13 +118,16 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
     const { skill } = item;
     const fm = skill.frontmatter;
     const description = fm?.description || skill.description || "Loading...";
-    const starsStr = formatStars(skill.stars);
+    const reliability = skill.starReliability;
+    const starsStr = formatStars(skill.stars, reliability);
+    const sColor = starColor(reliability);
+    const reliabilityInfo = reliability ? STAR_RELIABILITY_INFO[reliability] : null;
 
     return (
       <box flexDirection="column">
         <text fg="cyan">
           <strong>{skill.name}</strong>
-          {starsStr ? <span fg="yellow">  {starsStr}</span> : null}
+          {starsStr ? <span fg={sColor}>  {starsStr}</span> : null}
         </text>
 
         <box marginTop={1}>
@@ -138,6 +164,16 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
           </text>
         </DetailSection>
 
+        {reliabilityInfo && reliability !== "dedicated" && (
+          <box marginTop={1}>
+            <text>
+              <span fg={sColor}>{starIcon(reliability)} </span>
+              <span fg={sColor}><strong>{reliabilityInfo.label}</strong></span>
+              <span fg="gray"> — {reliabilityInfo.description}</span>
+            </text>
+          </box>
+        )}
+
         <DetailSection>
           <text>{"─".repeat(24)}</text>
           <text><strong>Scopes:</strong></text>
@@ -185,14 +221,137 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
   },
 };
 
+// ─── Skill Set renderer ──────────────────────────────────────────────────────
+
+const MAX_SET_NAME_LEN = 28;
+
+const skillSetRenderer: ItemRenderer<SkillSetItem> = {
+  renderRow: ({ item, isSelected }) => {
+    const { skillSet, expanded } = item;
+    const arrow = expanded ? "\u25BC" : "\u25B6";
+    const displayName =
+      skillSet.name.length > MAX_SET_NAME_LEN
+        ? skillSet.name.slice(0, MAX_SET_NAME_LEN - 1) + "\u2026"
+        : skillSet.name;
+
+    // Count installed child skills
+    const installedCount = skillSet.loaded
+      ? skillSet.skills.filter((s) => s.installed).length
+      : 0;
+    const totalCount = skillSet.loaded ? skillSet.skills.length : "...";
+    const countStr = `(${installedCount}/${totalCount})`;
+
+    // Any child installed at user or project scope?
+    const hasUser = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "user");
+    const hasProject = skillSet.loaded && skillSet.skills.some((s) => s.installedScope === "project");
+
+    const starsStr = formatStars(skillSet.stars);
+
+    return (
+      <SelectableRow selected={isSelected} indent={1}>
+        <span fg={isSelected ? "white" : "gray"}>{arrow} </span>
+        <span fg={isSelected ? "white" : "yellow"}>{skillSet.icon} </span>
+        <span fg={isSelected ? "white" : "cyan"}>
+          <strong>{displayName}</strong>
+        </span>
+        <span fg="gray">  {countStr}</span>
+        {starsStr ? <MetaText text={`  ${starsStr}`} tone="warning" /> : null}
+        <span>  </span>
+        <ScopeSquares user={hasUser} project={hasProject} selected={isSelected} />
+      </SelectableRow>
+    );
+  },
+
+  renderDetail: ({ item }) => {
+    const { skillSet, expanded } = item;
+    const starsStr = formatStars(skillSet.stars);
+
+    return (
+      <box flexDirection="column">
+        <text fg="cyan">
+          <strong>
+            {skillSet.icon} {skillSet.name}
+          </strong>
+          {starsStr ? <span fg="yellow">  {starsStr}</span> : null}
+        </text>
+
+        <box marginTop={1}>
+          <text fg="white">{skillSet.description}</text>
+        </box>
+
+        <DetailSection>
+          <text>
+            <span fg="gray">Source    </span>
+            <span fg="#5c9aff">{skillSet.repo}</span>
+          </text>
+        </DetailSection>
+
+        {skillSet.loading && (
+          <box marginTop={1}>
+            <text fg="yellow">Loading skills...</text>
+          </box>
+        )}
+
+        {skillSet.error && (
+          <box marginTop={1}>
+            <text fg="red">Error: {skillSet.error}</text>
+          </box>
+        )}
+
+        {skillSet.loaded && skillSet.skills.length > 0 && (
+          <DetailSection>
+            <text>
+              <strong>Skills in this set:</strong>
+              <span fg="gray">
+                {" "}
+                ({skillSet.skills.filter((s) => s.installed).length}/
+                {skillSet.skills.length} installed)
+              </span>
+            </text>
+            <box marginTop={1} flexDirection="column">
+              {skillSet.skills.map((s) => (
+                <text key={s.id}>
+                  <span fg={s.installedScope === "user" ? "cyan" : "gray"}>
+                    {s.installedScope === "user" ? "\u25A0" : "\u25A1"}
+                  </span>
+                  <span fg={s.installedScope === "project" ? "green" : "gray"}>
+                    {s.installedScope === "project" ? "\u25A0" : "\u25A1"}
+                  </span>
+                  <span fg={s.installed ? "white" : "gray"}> {s.name}</span>
+                </text>
+              ))}
+            </box>
+          </DetailSection>
+        )}
+
+        <box marginTop={1}>
+          <text fg="gray">
+            {expanded
+              ? "Press Enter to collapse \u2022 u/p to install all"
+              : "Press Enter to expand \u2022 u/p to install all"}
+          </text>
+        </box>
+        <box>
+          <text>
+            <span bg="#555555" fg="white"> o </span>
+            <span fg="gray"> Open in browser</span>
+          </text>
+        </box>
+      </box>
+    );
+  },
+};
+
 // ─── Registry ─────────────────────────────────────────────────────────────────
 
 export const skillRenderers: {
   category: ItemRenderer<SkillCategoryItem>;
   skill: ItemRenderer<SkillSkillItem>;
+  skillset: ItemRenderer<SkillSetItem>;
 } = {
   category: categoryRenderer,
   skill: skillRenderer,
+  skillset: skillSetRenderer,
 };
 
 /**
@@ -206,6 +365,9 @@ export function renderSkillRow(
   if (item.kind === "category") {
     return skillRenderers.category.renderRow({ item, isSelected });
   }
+  if (item.kind === "skillset") {
+    return skillRenderers.skillset.renderRow({ item, isSelected });
+  }
   return skillRenderers.skill.renderRow({ item, isSelected });
 }
 
@@ -216,5 +378,8 @@ export function renderSkillDetail(
   if (item.kind === "category") {
     return skillRenderers.category.renderDetail({ item });
   }
+  if (item.kind === "skillset") {
+    return skillRenderers.skillset.renderDetail({ item });
+  }
   return skillRenderers.skill.renderDetail({ item });
 }

package/src/ui/screens/PluginsScreen.js

@@ -650,6 +650,6 @@ export function PluginsScreen() {
             isActive: isSearchActive,
             query: pluginsState.searchQuery,
             placeholder: searchPlaceholder,
-        }, footerHints: footerHints, listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderPluginRow, maxHeight: dimensions.listPanelHeight }), pluginsState.searchQuery && selectableItems.length === 0 && (_jsx(EmptyFilterState, { query: pluginsState.searchQuery, entityName: "plugins" }))] }), detailPanel: renderPluginDetail(selectedItem, pluginsState.collapsedMarketplaces) }));
+        }, footerHints: footerHints, listPanel: _jsxs("box", { flexDirection: "column", children: [_jsx(ScrollableList, { items: selectableItems, selectedIndex: pluginsState.selectedIndex, renderItem: renderPluginRow, maxHeight: dimensions.listPanelHeight, getKey: (item) => item.id }), pluginsState.searchQuery && selectableItems.length === 0 && (_jsx(EmptyFilterState, { query: pluginsState.searchQuery, entityName: "plugins" }))] }), detailPanel: renderPluginDetail(selectedItem, pluginsState.collapsedMarketplaces) }));
 }
 export default PluginsScreen;

package/src/ui/screens/PluginsScreen.tsx

@@ -821,6 +821,7 @@ export function PluginsScreen() {
 						selectedIndex={pluginsState.selectedIndex}
 						renderItem={renderPluginRow}
 						maxHeight={dimensions.listPanelHeight}
+						getKey={(item) => item.id}
 					/>
 					{pluginsState.searchQuery && selectableItems.length === 0 && (
 						<EmptyFilterState query={pluginsState.searchQuery} entityName="plugins" />