From f8405e12621b4da4f551e8a01a0567316d33d100 Mon Sep 17 00:00:00 2001
From: Shubham Agarwal <shubhamagarwal@Shubhams-MacBook-Pro.local>
Date: Mon, 17 Aug 2026 14:54:15 +0530
Subject: [PATCH 1/2] =?UTF-8?q?feat(ui):=20Agents=20Library=20row=20?=
 =?UTF-8?q?=E2=80=94=20connectors=20first,=20composer=20skill=20icon,=20ho?=
 =?UTF-8?q?ver=20names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Order the row counts as Connectors (plug) then Skills, matching the composer.
- Use the composer's `lightbulb` skill icon instead of `wrench` (which read as "tools").
- Show the actual connector/skill names on hover via the shared Tooltip primitive
  (renders above the Agents Library modal), replacing the plain title attribute.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ...20260817145404-agents-library-row-icons.md |  5 ++++
 .../trueforge-ui/src/atoms/AgentsLibrary.tsx  | 25 +++++++++++++------
 2 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/20260817145404-agents-library-row-icons.md

diff --git a/.changeset/20260817145404-agents-library-row-icons.md b/.changeset/20260817145404-agents-library-row-icons.md
new file mode 100644
index 000000000..b482fd9bc
--- /dev/null
+++ b/.changeset/20260817145404-agents-library-row-icons.md
@@ -0,0 +1,5 @@
+---
+'@truefoundry/trueforge-ui': patch
+---
+
+Agents Library rows: show connectors before skills, use the composer's lightbulb icon for skills, and reveal the connector/skill names in a tooltip on hover.
diff --git a/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx b/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx
index 93c051ce5..e0a1755d3 100644
--- a/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx
+++ b/packages/trueforge-ui/src/atoms/AgentsLibrary.tsx
@@ -11,6 +11,7 @@ import { useSearchAgentsList } from './lib/useSearchAgentsList.js';
 import { CenteredModal } from './primitives/CenteredModal.js';
 import SearchInput from './primitives/SearchInput.js';
 import { Skeleton } from './primitives/Skeleton.js';
+import { Tooltip } from './primitives/Tooltip.js';
 
 export type AgentsLibraryProps = {
   open: boolean;
@@ -36,6 +37,10 @@ function AgentLibraryRow({ agent, showEdit, onTry, onEdit }: AgentLibraryRowProp
   const modelName = spec?.model.name;
   const skillsCount = spec?.skills?.length ?? 0;
   const mcpCount = spec?.mcpServers?.length ?? 0;
+  const skillNames = (spec?.skills ?? []).map(s => (s as { name?: string }).name).filter(Boolean);
+  const mcpNames = (spec?.mcpServers ?? []).map(m => (m as { name?: string }).name).filter(Boolean);
+  const connectorsTitle = mcpNames.length ? `Connectors: ${mcpNames.join(', ')}` : `${mcpCount} connectors`;
+  const skillsTitle = skillNames.length ? `Skills: ${skillNames.join(', ')}` : `${skillsCount} skills`;
 
   return (
     <div
@@ -60,14 +65,18 @@ function AgentLibraryRow({ agent, showEdit, onTry, onEdit }: AgentLibraryRowProp
               <span className="truncate">{displayModelLabel(modelName)}</span>
             </span>
           ) : null}
-          <span className="inline-flex items-center gap-1 text-xs" aria-label={`${skillsCount} skills`}>
-            <Icon name="wrench" className="size-3.5" />
-            {skillsCount}
-          </span>
-          <span className="inline-flex items-center gap-1 text-xs" aria-label={`${mcpCount} MCP servers`}>
-            <Icon name="plug" className="size-3.5" />
-            {mcpCount}
-          </span>
+          <Tooltip content={connectorsTitle}>
+            <span className="inline-flex items-center gap-1 text-xs" aria-label={connectorsTitle}>
+              <Icon name="plug" className="size-3.5" />
+              {mcpCount}
+            </span>
+          </Tooltip>
+          <Tooltip content={skillsTitle}>
+            <span className="inline-flex items-center gap-1 text-xs" aria-label={skillsTitle}>
+              <Icon name="lightbulb" className="size-3.5" />
+              {skillsCount}
+            </span>
+          </Tooltip>
         </span>
       ) : null}
       <span className="flex shrink-0 items-center gap-1.5">

From b28f7331ed6b6f7d7291d2784460321ff4fc07fa Mon Sep 17 00:00:00 2001
From: Shubham Agarwal <shubhamagarwal@Shubhams-MacBook-Pro.local>
Date: Mon, 17 Aug 2026 15:11:47 +0530
Subject: [PATCH 2/2] test(ui): update AgentsLibrary row labels for
 connectors/skills tooltip

The row now labels the counts with the connector/skill names ("Connectors: github",
"Skills: paint") instead of "N MCP servers" / "N skills".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx b/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx
index 1f121d50c..e82a6ccdb 100644
--- a/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx
+++ b/packages/trueforge-ui/test/atoms/AgentsLibrary.test.tsx
@@ -152,8 +152,8 @@ describe('AgentsLibrary', () => {
     await waitFor(() => {
       expect(screen.getByText('gpt-5-5')).toBeInTheDocument();
     });
-    expect(screen.getByLabelText('1 skills')).toBeInTheDocument();
-    expect(screen.getByLabelText('1 MCP servers')).toBeInTheDocument();
+    expect(screen.getByLabelText('Connectors: github')).toBeInTheDocument();
+    expect(screen.getByLabelText('Skills: paint')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Try agent bare' })).toBeInTheDocument();
     expect(screen.queryByLabelText('0 skills')).not.toBeInTheDocument();
   });