claudeup 4.5.4 → 4.6.0

package/src/services/skills-manager.js

@@ -1,7 +1,7 @@
 import fs from "fs-extra";
 import path from "node:path";
 import os from "node:os";
-import { RECOMMENDED_SKILLS } from "../data/skill-repos.js";
+import { RECOMMENDED_SKILLS, classifyStarReliability } from "../data/skill-repos.js";
 const SKILLS_API_BASE = "https://us-central1-claudish-6da10.cloudfunctions.net/skills";
 const treeCache = new Map();
 // ─── Path helpers ──────────────────────────────────────────────────────────────
@@ -48,6 +48,51 @@ async function fetchGitTree(repo) {
     treeCache.set(repo, { etag, tree, fetchedAt: Date.now() });
     return tree;
 }
+// ─── Skill Set fetching ──────────────────────────────────────────────────────
+/**
+ * Fetch all skills from a skill set repo using the GitHub Tree API.
+ * Returns SkillInfo[] with installed status marked via disk scan.
+ */
+export async function fetchSkillSetSkills(repo, projectPath) {
+    const tree = await fetchGitTree(repo);
+    // Find all SKILL.md blobs
+    const skillBlobs = tree.tree.filter((entry) => entry.type === "blob" && entry.path.endsWith("/SKILL.md"));
+    const userInstalled = await getInstalledSkillNames("user");
+    const projectInstalled = await getInstalledSkillNames("project", projectPath);
+    const slugify = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+    const source = {
+        label: repo,
+        repo,
+        skillsPath: "",
+    };
+    return skillBlobs.map((blob) => {
+        // Derive skill name from parent directory of SKILL.md
+        const parts = blob.path.split("/");
+        const name = parts[parts.length - 2]; // e.g. "huggingface-datasets"
+        const repoPath = blob.path; // e.g. "skills/huggingface-datasets/SKILL.md"
+        const slug = slugify(name);
+        const isUser = userInstalled.has(slug) || userInstalled.has(name);
+        const isProj = projectInstalled.has(slug) || projectInstalled.has(name);
+        const installed = isUser || isProj;
+        const installedScope = isProj
+            ? "project"
+            : isUser
+                ? "user"
+                : null;
+        return {
+            id: `${repo}/${blob.path.replace("/SKILL.md", "")}`,
+            name,
+            source,
+            repoPath,
+            gitBlobSha: blob.sha,
+            frontmatter: null,
+            installed,
+            installedScope,
+            hasUpdate: false,
+            description: "",
+        };
+    });
+}
 // ─── Frontmatter parser ───────────────────────────────────────────────────────
 function parseYamlFrontmatter(content) {
     const frontmatterMatch = content.match(/^---\s*\n([\s\S]*?)\n---/);
@@ -134,6 +179,7 @@ function mapApiSkillToSkillInfo(raw) {
         repo,
         skillsPath: "",
     };
+    const stars = typeof raw.stars === "number" ? raw.stars : undefined;
     return {
         id: `${repo}/${skillPath}`,
         name: raw.name || skillPath,
@@ -145,7 +191,8 @@ function mapApiSkillToSkillInfo(raw) {
         installed: false,
         installedScope: null,
         hasUpdate: false,
-        stars: typeof raw.stars === "number" ? raw.stars : undefined,
+        stars,
+        starReliability: classifyStarReliability(repo, stars),
     };
 }
 export async function fetchPopularSkills(limit = 30) {
@@ -196,6 +243,7 @@ export async function fetchAvailableSkills(_repos, projectPath) {
             installedScope: null,
             hasUpdate: false,
             isRecommended: true,
+            starReliability: classifyStarReliability(rec.repo, rec.stars),
         };
         return markInstalled(skill);
     });

package/src/services/skills-manager.ts

@@ -7,7 +7,7 @@ import type {
 	SkillFrontmatter,
 	GitTreeResponse,
 } from "../types/index.js";
-import { RECOMMENDED_SKILLS } from "../data/skill-repos.js";
+import { RECOMMENDED_SKILLS, classifyStarReliability } from "../data/skill-repos.js";
 
 const SKILLS_API_BASE =
 	"https://us-central1-claudish-6da10.cloudfunctions.net/skills";
@@ -85,6 +85,66 @@ async function fetchGitTree(repo: string): Promise<GitTreeResponse> {
 	return tree;
 }
 
+// ─── Skill Set fetching ──────────────────────────────────────────────────────
+
+/**
+ * Fetch all skills from a skill set repo using the GitHub Tree API.
+ * Returns SkillInfo[] with installed status marked via disk scan.
+ */
+export async function fetchSkillSetSkills(
+	repo: string,
+	projectPath?: string,
+): Promise<SkillInfo[]> {
+	const tree = await fetchGitTree(repo);
+
+	// Find all SKILL.md blobs
+	const skillBlobs = tree.tree.filter(
+		(entry) => entry.type === "blob" && entry.path.endsWith("/SKILL.md"),
+	);
+
+	const userInstalled = await getInstalledSkillNames("user");
+	const projectInstalled = await getInstalledSkillNames("project", projectPath);
+
+	const slugify = (name: string) =>
+		name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+	const source: SkillSource = {
+		label: repo,
+		repo,
+		skillsPath: "",
+	};
+
+	return skillBlobs.map((blob) => {
+		// Derive skill name from parent directory of SKILL.md
+		const parts = blob.path.split("/");
+		const name = parts[parts.length - 2]; // e.g. "huggingface-datasets"
+		const repoPath = blob.path; // e.g. "skills/huggingface-datasets/SKILL.md"
+		const slug = slugify(name);
+
+		const isUser = userInstalled.has(slug) || userInstalled.has(name);
+		const isProj = projectInstalled.has(slug) || projectInstalled.has(name);
+		const installed = isUser || isProj;
+		const installedScope: "user" | "project" | null = isProj
+			? "project"
+			: isUser
+				? "user"
+				: null;
+
+		return {
+			id: `${repo}/${blob.path.replace("/SKILL.md", "")}`,
+			name,
+			source,
+			repoPath,
+			gitBlobSha: blob.sha,
+			frontmatter: null,
+			installed,
+			installedScope,
+			hasUpdate: false,
+			description: "",
+		};
+	});
+}
+
 // ─── Frontmatter parser ───────────────────────────────────────────────────────
 
 function parseYamlFrontmatter(content: string): Partial<SkillFrontmatter> {
@@ -190,6 +250,7 @@ function mapApiSkillToSkillInfo(raw: any): SkillInfo {
 		repo,
 		skillsPath: "",
 	};
+	const stars = typeof raw.stars === "number" ? raw.stars : undefined;
 	return {
 		id: `${repo}/${skillPath}`,
 		name: (raw.name as string) || skillPath,
@@ -201,7 +262,8 @@ function mapApiSkillToSkillInfo(raw: any): SkillInfo {
 		installed: false,
 		installedScope: null,
 		hasUpdate: false,
-		stars: typeof raw.stars === "number" ? raw.stars : undefined,
+		stars,
+		starReliability: classifyStarReliability(repo, stars),
 	};
 }
 
@@ -263,6 +325,7 @@ export async function fetchAvailableSkills(
 			installedScope: null,
 			hasUpdate: false,
 			isRecommended: true,
+			starReliability: classifyStarReliability(rec.repo, rec.stars),
 		};
 		return markInstalled(skill);
 	});

package/src/types/index.ts

@@ -168,6 +168,35 @@ export interface SkillInfo {
 	stars?: number;
 	/** Short description (from API, before frontmatter is loaded) */
 	description?: string;
+	/** How reliable the star count is as a quality signal for this skill */
+	starReliability?: "dedicated" | "mega-repo" | "skill-dump";
+}
+
+/** How reliable the star count is as a quality signal for this skill */
+export type StarReliability = "dedicated" | "mega-repo" | "skill-dump";
+
+/** A skill set — a group of skills from a single repo */
+export interface SkillSetInfo {
+	/** Unique key, e.g. "huggingface/skills" */
+	id: string;
+	/** Display name, e.g. "Hugging Face" */
+	name: string;
+	/** Repo description */
+	description: string;
+	/** GitHub owner/repo */
+	repo: string;
+	/** Icon/emoji for display */
+	icon: string;
+	/** GitHub star count */
+	stars?: number;
+	/** Individual skills within this set (fetched lazily via Tree API) */
+	skills: SkillInfo[];
+	/** Whether skills have been fetched yet */
+	loaded: boolean;
+	/** Loading state */
+	loading: boolean;
+	/** Error if fetch failed */
+	error?: string;
 }
 
 // ─── GitHub Tree API types ────────────────────────────────────────────────────

package/src/ui/adapters/skillsAdapter.js

@@ -2,7 +2,7 @@
  * Builds the flat list of items for the SkillsScreen list panel.
  * Extracted from SkillsScreen so it can be tested independently.
  */
-export function buildSkillBrowserItems({ recommended, popular, installed, searchResults, query, isSearchLoading, }) {
+export function buildSkillBrowserItems({ recommended, popular, installed, searchResults, query, isSearchLoading, skillSets = [], expandedSets = new Set(), }) {
     const lowerQuery = query.toLowerCase();
     const items = [];
     // ── INSTALLED: always shown at top (if any) ──
@@ -18,7 +18,7 @@ export function buildSkillBrowserItems({ recommended, popular, installed, search
             categoryKey: "installed",
             count: installedFiltered.length,
             tone: "purple",
-            star: "● ",
+            star: "\u25CF ",
         });
         for (const skill of installedFiltered) {
             items.push({
@@ -29,21 +29,60 @@ export function buildSkillBrowserItems({ recommended, popular, installed, search
             });
         }
     }
-    // ── RECOMMENDED: always shown, filtered when searching ──
+    // ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
+    const filteredSets = lowerQuery
+        ? skillSets.filter((s) => {
+            if (s.name.toLowerCase().includes(lowerQuery))
+                return true;
+            if (s.description.toLowerCase().includes(lowerQuery))
+                return true;
+            if (s.loaded && s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery)))
+                return true;
+            return false;
+        })
+        : skillSets;
     const filteredRec = lowerQuery
         ? recommended.filter((s) => s.name.toLowerCase().includes(lowerQuery) ||
             (s.description || "").toLowerCase().includes(lowerQuery))
         : recommended;
+    const recommendedCount = filteredSets.length + filteredRec.length;
     items.push({
         id: "cat:recommended",
         kind: "category",
         label: "Recommended",
         title: "Recommended",
         categoryKey: "recommended",
-        count: filteredRec.length,
+        count: recommendedCount,
         tone: "green",
-        star: "★ ",
+        star: "\u2605 ",
     });
+    // Skill sets first within recommended
+    for (const set of filteredSets) {
+        const isExpanded = expandedSets.has(set.id);
+        items.push({
+            id: `skillset:${set.id}`,
+            kind: "skillset",
+            label: set.name,
+            skillSet: set,
+            expanded: isExpanded,
+        });
+        // When expanded, show child skills as indented skill items
+        if (isExpanded && set.loaded) {
+            const childSkills = lowerQuery
+                ? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
+                : set.skills;
+            for (const skill of childSkills) {
+                items.push({
+                    id: `skill:${skill.id}`,
+                    kind: "skill",
+                    label: skill.name,
+                    skill,
+                    indent: 2,
+                });
+            }
+        }
+    }
+    // Then individual recommended skills
     for (const skill of filteredRec) {
         items.push({
             id: `skill:${skill.id}`,
@@ -82,18 +121,27 @@ export function buildSkillBrowserItems({ recommended, popular, installed, search
         return items;
     }
     // ── POPULAR (default, no search query) — only skills with meaningful stars ──
-    const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
-    if (popularWithStars.length > 0) {
+    // Dedup by name — API can return same skill name from different repos
+    const seenPopular = new Set();
+    const popularDeduped = popular
+        .filter((s) => (s.stars ?? 0) >= 5)
+        .filter((s) => {
+        if (seenPopular.has(s.name))
+            return false;
+        seenPopular.add(s.name);
+        return true;
+    });
+    if (popularDeduped.length > 0) {
         items.push({
             id: "cat:popular",
             kind: "category",
             label: "Popular",
             title: "Popular",
             categoryKey: "popular",
-            count: popularWithStars.length,
+            count: popularDeduped.length,
             tone: "teal",
         });
-        for (const skill of popularWithStars) {
+        for (const skill of popularDeduped) {
             items.push({
                 id: `skill:${skill.id}`,
                 kind: "skill",

package/src/ui/adapters/skillsAdapter.ts

@@ -1,4 +1,4 @@
-import type { SkillInfo } from "../../types/index.js";
+import type { SkillInfo, SkillSetInfo } from "../../types/index.js";
 
 // ─── Item types ───────────────────────────────────────────────────────────────
 
@@ -19,9 +19,19 @@ export interface SkillSkillItem {
   kind: "skill";
   label: string;
   skill: SkillInfo;
+  /** Extra indent level for child skills inside an expanded skill set */
+  indent?: number;
 }
 
-export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem;
+export interface SkillSetItem {
+  id: string;
+  kind: "skillset";
+  label: string;
+  skillSet: SkillSetInfo;
+  expanded: boolean;
+}
+
+export type SkillBrowserItem = SkillCategoryItem | SkillSkillItem | SkillSetItem;
 
 // ─── Adapter ─────────────────────────────────────────────────────────────────
 
@@ -32,6 +42,8 @@ export interface BuildSkillBrowserItemsArgs {
   searchResults: SkillInfo[];
   query: string;
   isSearchLoading: boolean;
+  skillSets?: SkillSetInfo[];
+  expandedSets?: Set<string>;
 }
 
 /**
@@ -45,6 +57,8 @@ export function buildSkillBrowserItems({
   searchResults,
   query,
   isSearchLoading,
+  skillSets = [],
+  expandedSets = new Set(),
 }: BuildSkillBrowserItemsArgs): SkillBrowserItem[] {
   const lowerQuery = query.toLowerCase();
   const items: SkillBrowserItem[] = [];
@@ -63,7 +77,7 @@ export function buildSkillBrowserItems({
       categoryKey: "installed",
       count: installedFiltered.length,
       tone: "purple",
-      star: "● ",
+      star: "\u25CF ",
     });
     for (const skill of installedFiltered) {
       items.push({
@@ -75,7 +89,16 @@ export function buildSkillBrowserItems({
     }
   }
 
-  // ── RECOMMENDED: always shown, filtered when searching ──
+  // ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
+  const filteredSets = lowerQuery
+    ? skillSets.filter((s) => {
+        if (s.name.toLowerCase().includes(lowerQuery)) return true;
+        if (s.description.toLowerCase().includes(lowerQuery)) return true;
+        if (s.loaded && s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery))) return true;
+        return false;
+      })
+    : skillSets;
+
   const filteredRec = lowerQuery
     ? recommended.filter(
         (s) =>
@@ -84,16 +107,47 @@ export function buildSkillBrowserItems({
       )
     : recommended;
 
+  const recommendedCount = filteredSets.length + filteredRec.length;
+
   items.push({
     id: "cat:recommended",
     kind: "category",
     label: "Recommended",
     title: "Recommended",
     categoryKey: "recommended",
-    count: filteredRec.length,
+    count: recommendedCount,
     tone: "green",
-    star: "★ ",
+    star: "\u2605 ",
   });
+
+  // Skill sets first within recommended
+  for (const set of filteredSets) {
+    const isExpanded = expandedSets.has(set.id);
+    items.push({
+      id: `skillset:${set.id}`,
+      kind: "skillset",
+      label: set.name,
+      skillSet: set,
+      expanded: isExpanded,
+    });
+    // When expanded, show child skills as indented skill items
+    if (isExpanded && set.loaded) {
+      const childSkills = lowerQuery
+        ? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
+        : set.skills;
+      for (const skill of childSkills) {
+        items.push({
+          id: `skill:${skill.id}`,
+          kind: "skill",
+          label: skill.name,
+          skill,
+          indent: 2,
+        });
+      }
+    }
+  }
+
+  // Then individual recommended skills
   for (const skill of filteredRec) {
     items.push({
       id: `skill:${skill.id}`,
@@ -135,18 +189,26 @@ export function buildSkillBrowserItems({
   }
 
   // ── POPULAR (default, no search query) — only skills with meaningful stars ──
-  const popularWithStars = popular.filter((s) => (s.stars ?? 0) >= 5);
-  if (popularWithStars.length > 0) {
+  // Dedup by name — API can return same skill name from different repos
+  const seenPopular = new Set<string>();
+  const popularDeduped = popular
+    .filter((s) => (s.stars ?? 0) >= 5)
+    .filter((s) => {
+      if (seenPopular.has(s.name)) return false;
+      seenPopular.add(s.name);
+      return true;
+    });
+  if (popularDeduped.length > 0) {
     items.push({
       id: "cat:popular",
       kind: "category",
       label: "Popular",
       title: "Popular",
       categoryKey: "popular",
-      count: popularWithStars.length,
+      count: popularDeduped.length,
       tone: "teal",
     });
-    for (const skill of popularWithStars) {
+    for (const skill of popularDeduped) {
       items.push({
         id: `skill:${skill.id}`,
         kind: "skill",

package/src/ui/components/ScrollableList.js

@@ -1,22 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
-import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
-export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, onSelect, focused = false, }) {
+export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, showScrollIndicators = true, getKey, }) {
     const [scrollOffset, setScrollOffset] = useState(0);
-    // Handle keyboard navigation
-    useKeyboardHandler((input, key) => {
-        if (!focused || !onSelect)
-            return;
-        if (key.upArrow || input === "k") {
-            const newIndex = Math.max(0, selectedIndex - 1);
-            onSelect(newIndex);
-        }
-        else if (key.downArrow || input === "j") {
-            const newIndex = Math.min(items.length - 1, selectedIndex + 1);
-            onSelect(newIndex);
-        }
-    });
-    // Account for scroll indicators in available space
     const hasItemsAbove = scrollOffset > 0;
     const hasItemsBelow = scrollOffset + maxHeight < items.length;
     const indicatorLines = (showScrollIndicators && hasItemsAbove ? 1 : 0) +
@@ -25,15 +10,18 @@ export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, sh
     // Adjust scroll offset to keep selected item visible
     useEffect(() => {
         if (selectedIndex < scrollOffset) {
-            // Selected is above viewport - scroll up
             setScrollOffset(selectedIndex);
         }
         else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
-            // Selected is below viewport - scroll down
             setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
         }
     }, [selectedIndex, effectiveMaxHeight, scrollOffset]);
-    // Calculate visible items - strictly limited to effectiveMaxHeight
+    // Reset scroll when items change drastically (e.g. search)
+    useEffect(() => {
+        if (scrollOffset >= items.length) {
+            setScrollOffset(Math.max(0, items.length - effectiveMaxHeight));
+        }
+    }, [items.length, scrollOffset, effectiveMaxHeight]);
     const visibleItems = useMemo(() => {
         const start = scrollOffset;
         const end = Math.min(scrollOffset + effectiveMaxHeight, items.length);
@@ -43,6 +31,6 @@ export function ScrollableList({ items, selectedIndex, renderItem, maxHeight, sh
         }));
     }, [items, scrollOffset, effectiveMaxHeight]);
     const itemsBelow = items.length - scrollOffset - effectiveMaxHeight;
-    return (_jsxs("box", { flexDirection: "column", children: [showScrollIndicators && hasItemsAbove && (_jsxs("text", { fg: "cyan", children: ["\u2191 ", scrollOffset, " more"] })), visibleItems.map(({ item, originalIndex }) => (_jsx("box", { width: "100%", overflow: "hidden", children: renderItem(item, originalIndex, originalIndex === selectedIndex) }, originalIndex))), showScrollIndicators && hasItemsBelow && (_jsxs("text", { fg: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
+    return (_jsxs("box", { flexDirection: "column", children: [showScrollIndicators && hasItemsAbove && (_jsxs("text", { fg: "cyan", children: ["\u2191 ", scrollOffset, " more"] })), visibleItems.map(({ item, originalIndex }) => (_jsx("box", { width: "100%", overflow: "hidden", children: renderItem(item, originalIndex, originalIndex === selectedIndex) }, getKey ? getKey(item, originalIndex) : `${originalIndex}`))), showScrollIndicators && hasItemsBelow && (_jsxs("text", { fg: "cyan", children: ["\u2193 ", itemsBelow, " more"] }))] }));
 }
 export default ScrollableList;

package/src/ui/components/ScrollableList.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
 
 interface ScrollableListProps<T> {
 	/** Array of items to display */
@@ -8,14 +7,12 @@ interface ScrollableListProps<T> {
 	selectedIndex: number;
 	/** Render function for each item */
 	renderItem: (item: T, index: number, isSelected: boolean) => React.ReactNode;
-	/** Maximum visible height (number of lines) - REQUIRED for proper rendering */
+	/** Maximum visible height (number of lines) */
 	maxHeight: number;
 	/** Show scroll indicators */
 	showScrollIndicators?: boolean;
-	/** Called when selection changes (arrow keys) */
-	onSelect?: (index: number) => void;
-	/** Whether this list should receive keyboard input */
-	focused?: boolean;
+	/** Item key extractor */
+	getKey?: (item: T, index: number) => string;
 }
 
 export function ScrollableList<T>({
@@ -24,25 +21,10 @@ export function ScrollableList<T>({
 	renderItem,
 	maxHeight,
 	showScrollIndicators = true,
-	onSelect,
-	focused = false,
+	getKey,
 }: ScrollableListProps<T>) {
 	const [scrollOffset, setScrollOffset] = useState(0);
 
-	// Handle keyboard navigation
-	useKeyboardHandler((input, key) => {
-		if (!focused || !onSelect) return;
-
-		if (key.upArrow || input === "k") {
-			const newIndex = Math.max(0, selectedIndex - 1);
-			onSelect(newIndex);
-		} else if (key.downArrow || input === "j") {
-			const newIndex = Math.min(items.length - 1, selectedIndex + 1);
-			onSelect(newIndex);
-		}
-	});
-
-	// Account for scroll indicators in available space
 	const hasItemsAbove = scrollOffset > 0;
 	const hasItemsBelow = scrollOffset + maxHeight < items.length;
 	const indicatorLines =
@@ -53,15 +35,19 @@ export function ScrollableList<T>({
 	// Adjust scroll offset to keep selected item visible
 	useEffect(() => {
 		if (selectedIndex < scrollOffset) {
-			// Selected is above viewport - scroll up
 			setScrollOffset(selectedIndex);
 		} else if (selectedIndex >= scrollOffset + effectiveMaxHeight) {
-			// Selected is below viewport - scroll down
 			setScrollOffset(selectedIndex - effectiveMaxHeight + 1);
 		}
 	}, [selectedIndex, effectiveMaxHeight, scrollOffset]);
 
-	// Calculate visible items - strictly limited to effectiveMaxHeight
+	// Reset scroll when items change drastically (e.g. search)
+	useEffect(() => {
+		if (scrollOffset >= items.length) {
+			setScrollOffset(Math.max(0, items.length - effectiveMaxHeight));
+		}
+	}, [items.length, scrollOffset, effectiveMaxHeight]);
+
 	const visibleItems = useMemo(() => {
 		const start = scrollOffset;
 		const end = Math.min(scrollOffset + effectiveMaxHeight, items.length);
@@ -75,19 +61,20 @@ export function ScrollableList<T>({
 
 	return (
 		<box flexDirection="column">
-			{/* Scroll up indicator */}
 			{showScrollIndicators && hasItemsAbove && (
 				<text fg="cyan">↑ {scrollOffset} more</text>
 			)}
 
-			{/* Visible items - strictly limited */}
 			{visibleItems.map(({ item, originalIndex }) => (
-				<box key={originalIndex} width="100%" overflow="hidden">
+				<box
+					key={getKey ? getKey(item, originalIndex) : `${originalIndex}`}
+					width="100%"
+					overflow="hidden"
+				>
 					{renderItem(item, originalIndex, originalIndex === selectedIndex)}
 				</box>
 			))}
 
-			{/* Scroll down indicator */}
 			{showScrollIndicators && hasItemsBelow && (
 				<text fg="cyan">↓ {itemsBelow} more</text>
 			)}