From 7679f21edf3f625f89c2a6e41cf2c4931d26f6eb Mon Sep 17 00:00:00 2001
From: Xinmin Zeng <135568692+fancyboi999@users.noreply.github.com>
Date: Sun, 7 Jun 2026 23:29:59 +0800
Subject: [PATCH] fix(frontend): truncate overflowing text in agent cards
 (#3391)

* fix(frontend): truncate overflowing text in agent cards

Long custom agent names, descriptions, skills and tool-group labels
overflowed the agent card and broke its layout (issue #3389). The title
already had `truncate`, but it never took effect: an ancestor flex
container lacked `min-w-0`, so the flex item refused to shrink below its
content width.

- Restore the truncation chain by adding `min-w-0` to the title's flex
  ancestors so `truncate` can finally take effect.
- Cap and ellipsize model / skill / tool-group badges via a small
  `TruncatedBadge` (`block max-w-full truncate`).
- Reveal the full value on hover, but only when the text is actually
  clipped (`TruncatedTooltip`, width + height detection), so names,
  descriptions and labels stay readable without popping redundant
  tooltips on short cards.

* fix(frontend): wrap unbreakable strings in agent card tooltips

A long token with no break opportunity (no spaces or hyphens) could still
overflow the tooltip horizontally. Add `break-words` next to the existing
`text-wrap` so such strings wrap instead of overflowing.

Addresses Copilot review feedback on tooltip wrapping robustness.

* fix(frontend): show agent card tooltips instantly

Drop the explicit `delayDuration` so card tooltips fall back to the
provider's default 0ms delay. Instant feedback is better UX for revealing
text that is already clipped, per maintainer review.

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
---
 .../workspace/agents/agent-card.tsx           | 113 ++++++++++++++----
 1 file changed, 93 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/workspace/agents/agent-card.tsx b/frontend/src/components/workspace/agents/agent-card.tsx
index ce1d8ce18..8cb7f6b7a 100644
--- a/frontend/src/components/workspace/agents/agent-card.tsx
+++ b/frontend/src/components/workspace/agents/agent-card.tsx
@@ -2,7 +2,7 @@
 
 import { BotIcon, MessageSquareIcon, Trash2Icon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { type ComponentProps, type ReactElement, useState } from "react";
 import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
@@ -23,14 +23,83 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useDeleteAgent } from "@/core/agents";
 import type { Agent } from "@/core/agents";
 import { useI18n } from "@/core/i18n/hooks";
+import { cn } from "@/lib/utils";
 
 interface AgentCardProps {
   agent: Agent;
 }
 
+/**
+ * Reveals the full text in a tooltip ONLY when its trigger is actually clipped.
+ * Clipping is measured on pointer enter against the trigger's own box, covering
+ * both single-line `truncate` (width) and multi-line `line-clamp` (height), so
+ * untruncated content never pops a redundant tooltip.
+ */
+function TruncatedTooltip({
+  text,
+  children,
+}: {
+  text: string;
+  children: ReactElement;
+}) {
+  const [truncated, setTruncated] = useState(false);
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        onPointerEnter={(e) => {
+          const el = e.currentTarget;
+          setTruncated(
+            el.scrollWidth > el.clientWidth ||
+              el.scrollHeight > el.clientHeight,
+          );
+        }}
+      >
+        {children}
+      </TooltipTrigger>
+      {truncated && (
+        <TooltipContent className="max-w-xs text-wrap break-words">
+          {text}
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+}
+
+/**
+ * Long, user-controlled labels (agent model, skills, tool groups) that must
+ * never break the card layout: width is capped to the parent and the text is
+ * truncated with an ellipsis, with the full value revealed on hover.
+ */
+function TruncatedBadge({
+  label,
+  variant,
+  className,
+}: {
+  label: string;
+  variant: ComponentProps<typeof Badge>["variant"];
+  className?: string;
+}) {
+  return (
+    <TruncatedTooltip text={label}>
+      <Badge
+        variant={variant}
+        className={cn("block max-w-full truncate", className)}
+      >
+        {label}
+      </Badge>
+    </TruncatedTooltip>
+  );
+}
+
 export function AgentCard({ agent }: AgentCardProps) {
   const { t } = useI18n();
   const router = useRouter();
@@ -55,27 +124,33 @@ export function AgentCard({ agent }: AgentCardProps) {
     <>
       <Card className="group flex flex-col transition-shadow hover:shadow-md">
         <CardHeader className="pb-3">
-          <div className="flex items-start justify-between gap-2">
-            <div className="flex items-center gap-2">
+          <div className="flex min-w-0 items-start justify-between gap-2">
+            <div className="flex min-w-0 items-center gap-2">
               <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
                 <BotIcon className="h-5 w-5" />
               </div>
               <div className="min-w-0">
-                <CardTitle className="truncate text-base">
-                  {agent.name}
-                </CardTitle>
+                <TruncatedTooltip text={agent.name}>
+                  <CardTitle className="truncate text-base">
+                    {agent.name}
+                  </CardTitle>
+                </TruncatedTooltip>
                 {agent.model && (
-                  <Badge variant="secondary" className="mt-0.5 text-xs">
-                    {agent.model}
-                  </Badge>
+                  <TruncatedBadge
+                    label={agent.model}
+                    variant="secondary"
+                    className="mt-0.5 text-xs"
+                  />
                 )}
               </div>
             </div>
           </div>
           {agent.description && (
-            <CardDescription className="mt-2 line-clamp-2 text-sm">
-              {agent.description}
-            </CardDescription>
+            <TruncatedTooltip text={agent.description}>
+              <CardDescription className="mt-2 line-clamp-2 text-sm">
+                {agent.description}
+              </CardDescription>
+            </TruncatedTooltip>
           )}
         </CardHeader>
 
@@ -83,22 +158,20 @@ export function AgentCard({ agent }: AgentCardProps) {
           <CardContent className="pt-0 pb-3">
             <div className="flex flex-wrap gap-1">
               {agent.tool_groups?.map((group) => (
-                <Badge
+                <TruncatedBadge
                   key={`tg:${group}`}
+                  label={group}
                   variant="outline"
                   className="text-xs"
-                >
-                  {group}
-                </Badge>
+                />
               ))}
               {agent.skills?.map((skill) => (
-                <Badge
+                <TruncatedBadge
                   key={`sk:${skill}`}
+                  label={skill}
                   variant="secondary"
                   className="text-xs"
-                >
-                  {skill}
-                </Badge>
+                />
               ))}
             </div>
           </CardContent>