From f5ccdd5ff80f4ae19653eaee9e56e61c0e33d36f Mon Sep 17 00:00:00 2001
From: Mikkel Georgsen <msgeorgsen@gmail.com>
Date: Wed, 1 Apr 2026 12:04:17 +0200
Subject: [PATCH] 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)
---
 ui/src/components/SkillCard.tsx | 9 +++++++++
 ui/src/pages/SkillBrowser.tsx   | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/ui/src/components/SkillCard.tsx b/ui/src/components/SkillCard.tsx
index 4c4bb161..f549e253 100644
--- a/ui/src/components/SkillCard.tsx
+++ b/ui/src/components/SkillCard.tsx
@@ -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>
diff --git a/ui/src/pages/SkillBrowser.tsx b/ui/src/pages/SkillBrowser.tsx
index f8cbaf31..341a30d4 100644
--- a/ui/src/pages/SkillBrowser.tsx
+++ b/ui/src/pages/SkillBrowser.tsx
@@ -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)}