fix(ui-rewrite): prevent prompt group key collision and add shared CardTag

Signed-off-by: Marek Dano <Marek.Dano@ibm.com>

Author: Marek Dano

client/src/components/ui/card-tag.test.tsx

@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { CardTag } from "./card-tag";
+
+describe("CardTag", () => {
+  it("renders a plain chip with no tooltip trigger by default", () => {
+    render(<CardTag>label</CardTag>);
+
+    const tag = screen.getByText("label");
+    expect(tag).toBeInTheDocument();
+    // No tooltip => not wrapped in a focusable trigger.
+    expect(tag.closest("button")).toBeNull();
+  });
+
+  it("applies the neutral variant classes", () => {
+    render(<CardTag variant="neutral">mime</CardTag>);
+
+    expect(screen.getByText("mime")).toHaveClass("bg-neutral-100");
+  });
+
+  it("exposes an accessible tooltip when tooltip text is provided", async () => {
+    render(<CardTag tooltip="More info">chip</CardTag>);
+
+    const trigger = screen.getByText("chip").closest("button");
+    expect(trigger).not.toBeNull();
+
+    // Radix opens the tooltip on focus, giving keyboard users the hint.
+    trigger!.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("More info");
+  });
+});

client/src/components/ui/card-tag.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const cardTagVariants = cva(
+  "inline-flex items-center rounded px-1.5 py-1 text-[10px] font-medium leading-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-tool-badge-bg text-white",
+        neutral: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface CardTagProps
+  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof cardTagVariants> {
+  /** Optional text shown in an accessible tooltip on hover/focus. */
+  tooltip?: string | null;
+}
+
+/**
+ * A compact tag chip used inside the tool/resource/prompt cards. Matches the
+ * Figma card-tag style (a small squared chip, not the pill-shaped `Badge`).
+ * When `tooltip` is provided the chip becomes an accessible tooltip trigger, so
+ * the hint works for keyboard and touch users instead of relying on native
+ * `title`.
+ */
+export function CardTag({ className, variant, tooltip, children, ...props }: CardTagProps) {
+  const tag = (
+    <span className={cn(cardTagVariants({ variant }), className)} {...props}>
+      {children}
+    </span>
+  );
+
+  if (!tooltip) {
+    return tag;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {tag}
+        </TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export { cardTagVariants };

client/src/pages/Prompts.test.tsx

@@ -169,12 +169,15 @@ describe("Prompts", () => {
     expect(within(card).queryByText("Prompt 8")).not.toBeInTheDocument();
     expect(within(card).getByText("+2")).toBeInTheDocument();
 
-    // A real description becomes the badge tooltip; filtered "None" descriptions do not.
-    expect(within(card).getByText("Prompt 0")).toHaveAttribute(
-      "title",
-      "First prompt description.",
-    );
-    expect(within(card).getByText("Prompt 1")).not.toHaveAttribute("title");
+    // A real description becomes an accessible tooltip; filtered "None" descriptions do not.
+    const describedTrigger = within(card).getByText("Prompt 0").closest("button");
+    expect(describedTrigger).not.toBeNull();
+    // Radix opens the tooltip on focus, giving keyboard users the description.
+    describedTrigger?.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("First prompt description.");
+
+    // "Prompt 1" has description "None", so it renders as a plain tag with no tooltip trigger.
+    expect(within(card).getByText("Prompt 1").closest("button")).toBeNull();
   });
 
   it("renders error state when prompts fail to load", async () => {

client/src/pages/Prompts.tsx

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { MessageSquareCode, MoreHorizontal, Plus } from "lucide-react";
 import { useIntl } from "react-intl";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { CardTag } from "@/components/ui/card-tag";
 import { Button } from "@/components/ui/button";
 import { useQuery } from "@/hooks/useQuery";
 import {
@@ -39,16 +40,20 @@ function buildPromptGroups(prompts: Prompt[], restPromptsLabel: string): PromptG
   const map = new Map<string, PromptGroup>();
 
   for (const prompt of prompts) {
-    const slug = prompt.gatewaySlug?.trim() || restPromptsLabel;
-    let group = map.get(slug);
+    const slug = prompt.gatewaySlug?.trim();
+    // Namespace the map key so gateway-less prompts (keyed "rest") can never
+    // merge into a real gateway whose slug happens to equal the localized
+    // "REST prompts" label. `label` stays purely for display.
+    const key = slug ? `gateway:${slug}` : "rest";
+    let group = map.get(key);
     if (!group) {
       group = {
-        key: slug,
-        label: slug,
+        key,
+        label: slug || restPromptsLabel,
         gatewayId: prompt.gatewayId,
         prompts: [],
       };
-      map.set(slug, group);
+      map.set(key, group);
     }
     group.prompts.push(prompt);
   }
@@ -102,24 +107,19 @@ function PromptGroupCard({ group }: { group: PromptGroup }) {
       <CardContent>
         <div className="flex flex-wrap gap-1">
           {visiblePrompts.map((prompt) => (
-            <span
-              key={prompt.id}
-              className="inline-flex items-center rounded bg-tool-badge-bg px-1.5 py-1 text-[10px] font-medium leading-none text-white"
-              title={getPromptDescription(prompt) ?? undefined}
-            >
+            <CardTag key={prompt.id} tooltip={getPromptDescription(prompt)}>
               {getPromptLabel(prompt)}
-            </span>
+            </CardTag>
           ))}
           {remainingCount > 0 && (
-            <span
-              className="inline-flex items-center rounded bg-tool-badge-bg px-1.5 py-1 text-[10px] font-medium leading-none text-white"
-              title={intl.formatMessage(
+            <CardTag
+              tooltip={intl.formatMessage(
                 { id: "prompts.card.morePromptsTitle" },
                 { count: remainingCount },
               )}
             >
               +{remainingCount}
-            </span>
+            </CardTag>
           )}
         </div>
       </CardContent>

client/src/pages/Resources.tsx

@@ -16,6 +16,7 @@ import { ResourceReadVisibility } from "@/generated/types";
 import type { ResourceGroup } from "@/types/resource";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { CardTag } from "@/components/ui/card-tag";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -139,24 +140,24 @@ const ResourceGroupCard = memo(function ResourceGroupCard({
       <CardContent>
         <div className="flex flex-wrap gap-1">
           {visibleResources.map((resource) => (
-            <span
+            <CardTag
               key={resource.id}
-              className="inline-flex items-center rounded bg-tool-badge-bg px-1.5 py-1 text-[10px] font-medium leading-none text-white"
-              title={resource.description ?? undefined}
+              variant="neutral"
+              tooltip={resource.description ?? undefined}
             >
               {resource.name}
-            </span>
+            </CardTag>
           ))}
           {remainingCount > 0 && (
-            <span
-              className="inline-flex items-center rounded bg-tool-badge-bg px-1.5 py-1 text-[10px] font-medium leading-none text-white"
-              title={intl.formatMessage(
+            <CardTag
+              variant="neutral"
+              tooltip={intl.formatMessage(
                 { id: "resources.card.moreResources" },
                 { count: remainingCount },
               )}
             >
               +{remainingCount}
-            </span>
+            </CardTag>
           )}
         </div>
       </CardContent>
@@ -490,3 +491,4 @@ export function Resources() {
     </div>
   );
 }
+

client/src/pages/Tools.test.tsx

@@ -322,8 +322,11 @@ describe("Tools", () => {
       expect(screen.getByText("Tool 1")).toBeInTheDocument();
     });
 
-    const toolBadge = screen.getByText("Tool 1");
-    expect(toolBadge).toHaveAttribute("title", "Description for tool 1");
+    const trigger = screen.getByText("Tool 1").closest("button");
+    expect(trigger).not.toBeNull();
+    // Radix opens the tooltip on focus, giving keyboard users the description.
+    trigger?.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Description for tool 1");
   });
 
   it("renders more options button for each tool group", async () => {
@@ -505,9 +508,11 @@ describe("Tools", () => {
     expect(screen.queryByText("Tool 11")).not.toBeInTheDocument();
     expect(screen.queryByText("Tool 12")).not.toBeInTheDocument();
 
-    // Should show +4 tag
-    expect(screen.getByText("+4")).toBeInTheDocument();
-    expect(screen.getByTitle("4 more tools")).toBeInTheDocument();
+    // Should show +4 tag, with the remaining count exposed as an accessible tooltip
+    const overflow = screen.getByText("+4");
+    expect(overflow).toBeInTheDocument();
+    overflow.closest("button")?.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("4 more tools");
   });
 
   it("displays all tools when count is 8 or less without +N tag", async () => {
@@ -544,9 +549,11 @@ describe("Tools", () => {
       expect(screen.getByText("gateway-with-nine-tools")).toBeInTheDocument();
     });
 
-    // Should show +1 tag
-    expect(screen.getByText("+1")).toBeInTheDocument();
-    expect(screen.getByTitle("1 more tool")).toBeInTheDocument();
+    // Should show +1 tag, with the singular "tool" wording in the tooltip
+    const overflow = screen.getByText("+1");
+    expect(overflow).toBeInTheDocument();
+    overflow.closest("button")?.focus();
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("1 more tool");
   });
 
   it("handles multiple gateways with different tool counts correctly", async () => {

client/src/pages/Tools.tsx

@@ -9,6 +9,7 @@ import { useRouter } from "@/router";
 import { extractApiErrorDetail, sanitizeError } from "@/utils/errors";
 import type { Tool, ToolGroup } from "@/types/tool";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { CardTag } from "@/components/ui/card-tag";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -103,24 +104,19 @@ function ToolGroupCard({
       <CardContent>
         <div className="flex flex-wrap gap-1">
           {visibleTools.map((tool) => (
-            <span
-              key={tool.id}
-              className="inline-flex items-center rounded bg-tool-badge-bg px-1.5 py-1 text-[10px] font-medium leading-none text-white"
-              title={tool.description}
-            >
+            <CardTag key={tool.id} tooltip={tool.description}>
               {tool.name}
-            </span>
+            </CardTag>
           ))}
           {remainingCount > 0 && (
-            <span
-              className="inline-flex items-center rounded bg-tool-badge-bg px-1.5 py-1 text-[10px] font-medium leading-none text-white"
-              title={intl.formatMessage(
+            <CardTag
+              tooltip={intl.formatMessage(
                 { id: "tools.card.moreToolsTitle" },
                 { count: remainingCount },
               )}
             >
               +{remainingCount}
-            </span>
+            </CardTag>
           )}
         </div>
       </CardContent>