fix(frontend): show agent skill badges with empty tool groups (#5326)

* fix(frontend): show skill badges with empty tool groups

* test(frontend): cover agent skill badges with empty tool groups

* test(frontend): cover agents without badge content

frontend/src/components/workspace/agents/agent-card.tsx

@@ -162,7 +162,8 @@ export function AgentCard({ agent }: AgentCardProps) {
           )}
         </CardHeader>
 
-        {(agent.tool_groups?.length ?? agent.skills?.length ?? 0) > 0 && (
+        {((agent.tool_groups?.length ?? 0) > 0 ||
+          (agent.skills?.length ?? 0) > 0) && (
           <CardContent className="pt-0 pb-3">
             <div className="flex flex-wrap gap-1">
               {agent.tool_groups?.map((group) => (

frontend/tests/e2e/agent-chat.spec.ts

@@ -32,6 +32,51 @@ test.describe("Agent chat", () => {
     });
   });
 
+  for (const { label, toolGroups } of [
+    { label: "empty", toolGroups: [] },
+    { label: "unrestricted", toolGroups: null },
+  ]) {
+    test(`agent gallery shows skill badges with ${label} tool groups`, async ({
+      page,
+    }) => {
+      mockLangGraphAPI(page, {
+        agents: [
+          {
+            ...MOCK_AGENTS[0]!,
+            tool_groups: toolGroups,
+            skills: ["data-analysis"],
+          },
+        ],
+      });
+
+      await page.goto("/workspace/agents");
+
+      const card = page.locator('[data-slot="card"]').filter({
+        has: page.getByText("test-agent", { exact: true }),
+      });
+      await expect(card).toBeVisible({ timeout: 15_000 });
+      await expect(
+        card.getByText("data-analysis", { exact: true }),
+      ).toBeVisible();
+    });
+  }
+
+  test("agent gallery hides the badge block with no tool groups or skills", async ({
+    page,
+  }) => {
+    mockLangGraphAPI(page, {
+      agents: [{ ...MOCK_AGENTS[0]!, tool_groups: [], skills: [] }],
+    });
+
+    await page.goto("/workspace/agents");
+
+    const card = page.locator('[data-slot="card"]').filter({
+      has: page.getByText("test-agent", { exact: true }),
+    });
+    await expect(card).toBeVisible({ timeout: 15_000 });
+    await expect(card.locator('[data-slot="card-content"]')).toHaveCount(0);
+  });
+
   test("agent chat page loads with input box and AI disclaimer", async ({
     page,
   }) => {

frontend/tests/e2e/utils/mock-api.ts

@@ -52,6 +52,7 @@ export type MockAgent = {
   description?: string;
   system_prompt?: string;
   tool_groups?: string[] | null;
+  skills?: string[] | null;
 };
 
 export type MockSkill = {