feat(20-02): add compatibleAdapters prop to SkillCard and wire Browse/Trending tabs

- Add optional compatibleAdapters prop to SkillCardProps interface
- Render 'Works with: ...' line when compatibleAdapters is provided and non-empty
- Pass COMPATIBLE_ADAPTER_LABELS to all Browse tab SkillCard renders
- Pass COMPATIBLE_ADAPTER_LABELS to all Trending tab SkillCard renders (gainingTraction, recentlyUpdated, youMightLike)
- Installed tab SkillCards intentionally omit compatibleAdapters (already agent-scoped)
This commit is contained in:
Mikkel Georgsen 2026-04-01 12:04:17 +02:00
parent 46a448eb33
commit 579efec891
2 changed files with 13 additions and 0 deletions

View file

@ -23,6 +23,7 @@ export interface SkillCardProps {
isReadOnly?: boolean;
source?: "managed" | "native";
className?: string;
compatibleAdapters?: string[];
}
export function SkillCard({
@ -37,6 +38,7 @@ export function SkillCard({
isReadOnly = false,
source,
className,
compatibleAdapters,
}: SkillCardProps) {
return (
<Card className={cn("flex flex-col", className)}>
@ -77,6 +79,13 @@ export function SkillCard({
<p className="text-xs text-muted-foreground line-clamp-2">{skill.description}</p>
)}
{/* Row 2b: compatible adapters (Browse/Trending only) */}
{compatibleAdapters && compatibleAdapters.length > 0 && (
<p className="text-[10px] text-muted-foreground mt-1">
Works with: {compatibleAdapters.join(", ")}
</p>
)}
{/* Row 3: source badge + rating + actions (push right) */}
<div className="flex items-center gap-2 mt-auto pt-2">
<Badge variant="secondary" className="text-xs">{skill.sourceId}</Badge>

View file

@ -387,6 +387,7 @@ export function SkillBrowser() {
skill={skill}
isInstalled={!!skill.activeVersionId}
hasUpdate={false}
compatibleAdapters={COMPATIBLE_ADAPTER_LABELS}
onInstall={() => setInstallDialog({ skillId: skill.id })}
onUpdate={() => setInstallDialog({ skillId: skill.id, isUpdate: true })}
onRollback={() => handleRollback(skill.id)}
@ -546,6 +547,7 @@ export function SkillBrowser() {
skill={skill}
isInstalled={!!skill.activeVersionId}
hasUpdate={false}
compatibleAdapters={COMPATIBLE_ADAPTER_LABELS}
onInstall={() => setInstallDialog({ skillId: skill.id })}
onUpdate={() => setInstallDialog({ skillId: skill.id, isUpdate: true })}
onRollback={() => handleRollback(skill.id)}
@ -565,6 +567,7 @@ export function SkillBrowser() {
skill={skill}
isInstalled={!!skill.activeVersionId}
hasUpdate={false}
compatibleAdapters={COMPATIBLE_ADAPTER_LABELS}
onInstall={() => setInstallDialog({ skillId: skill.id })}
onUpdate={() => setInstallDialog({ skillId: skill.id, isUpdate: true })}
onRollback={() => handleRollback(skill.id)}
@ -584,6 +587,7 @@ export function SkillBrowser() {
skill={skill}
isInstalled={!!skill.activeVersionId}
hasUpdate={false}
compatibleAdapters={COMPATIBLE_ADAPTER_LABELS}
onInstall={() => setInstallDialog({ skillId: skill.id })}
onUpdate={() => setInstallDialog({ skillId: skill.id, isUpdate: true })}
onRollback={() => handleRollback(skill.id)}