chore: properly show agents description (#2534)

Author: Konstantinov-Innokentii

platform/frontend/src/components/agent-dialog.tsx

@@ -36,6 +36,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { ExpandableText } from "@/components/ui/expandable-text";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { MultiSelectCombobox } from "@/components/ui/multi-select-combobox";
@@ -137,10 +138,12 @@ function SubagentPill({ agent, isSelected, onToggle }: SubagentPillProps) {
         <div className="p-4 border-b flex items-start justify-between gap-2">
           <div className="flex-1 min-w-0">
             <h4 className="font-semibold truncate">{agent.name}</h4>
-            {(agent.description || agent.systemPrompt) && (
-              <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
-                {agent.description || agent.systemPrompt}
-              </p>
+            {agent.description && (
+              <ExpandableText
+                text={agent.description}
+                maxLines={2}
+                className="text-sm text-muted-foreground mt-1"
+              />
             )}
           </div>
           <Button

platform/frontend/src/components/chat/agent-tools-display.tsx

@@ -3,6 +3,8 @@
 import { Bot, Wrench } from "lucide-react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ExpandableText } from "@/components/ui/expandable-text";
 import {
   HoverCard,
   HoverCardContent,
@@ -153,35 +155,29 @@ export function AgentToolsDisplay({
                 <span>{delegatedAgent.name}</span>
               </Button>
             </HoverCardTrigger>
-            <HoverCardContent
-              className="w-80 cursor-pointer"
-              align="start"
-              onClick={() => handleToggle(delegatedAgent.id)}
-            >
-              <div className="space-y-2">
-                <div className="flex items-center justify-between">
-                  <h4 className="text-sm font-semibold">
-                    {delegatedAgent.name}
-                  </h4>
-                  <span
-                    className={cn(
-                      "text-xs px-2 py-0.5 rounded",
-                      enabled
-                        ? "bg-green-100 text-green-700"
-                        : "bg-red-100 text-red-700",
-                    )}
-                  >
-                    {enabled ? "Enabled" : "Disabled"}
-                  </span>
-                </div>
+            <HoverCardContent className="w-80" align="start">
+              <div className="space-y-3">
+                <h4 className="text-sm font-semibold">{delegatedAgent.name}</h4>
                 {delegatedAgent.description && (
-                  <p className="text-xs text-muted-foreground">
-                    {delegatedAgent.description}
-                  </p>
+                  <ExpandableText
+                    text={delegatedAgent.description}
+                    maxLines={2}
+                    className="text-xs text-muted-foreground"
+                  />
                 )}
-                <p className="text-xs text-muted-foreground">
-                  Click to {enabled ? "disable" : "enable"} this agent
-                </p>
+                <label
+                  htmlFor={`chat-subagent-toggle-${delegatedAgent.id}`}
+                  className="flex items-center gap-3 cursor-pointer"
+                >
+                  <Checkbox
+                    id={`chat-subagent-toggle-${delegatedAgent.id}`}
+                    checked={enabled}
+                    onCheckedChange={() => handleToggle(delegatedAgent.id)}
+                  />
+                  <span className="text-sm font-medium">
+                    {enabled ? "Enabled" : "Enable"}
+                  </span>
+                </label>
                 <AgentToolsList agentId={delegatedAgent.id} />
               </div>
             </HoverCardContent>

platform/frontend/src/components/ui/expandable-text.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface ExpandableTextProps {
+  text: string;
+  maxLines?: number;
+  className?: string;
+}
+
+export function ExpandableText({
+  text,
+  maxLines = 2,
+  className,
+}: ExpandableTextProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLParagraphElement>(null);
+  const clampedRef = useRef<HTMLParagraphElement>(null);
+
+  // Check truncation by comparing heights (only when collapsed)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally re-run when text/maxLines props change
+  useEffect(() => {
+    // Skip truncation check when expanded - both elements have same height when expanded
+    if (isExpanded) return;
+
+    const checkTruncation = () => {
+      const measureEl = measureRef.current;
+      const clampedEl = clampedRef.current;
+      if (!measureEl || !clampedEl) return;
+
+      // Compare unclamped height to clamped height
+      const fullHeight = measureEl.offsetHeight;
+      const clampedHeight = clampedEl.offsetHeight;
+
+      setIsTruncated(fullHeight > clampedHeight + 2); // 2px tolerance
+    };
+
+    // Small delay to ensure DOM is updated
+    const timeoutId = setTimeout(checkTruncation, 0);
+
+    // Also check on resize
+    const container = containerRef.current;
+    if (!container) return () => clearTimeout(timeoutId);
+
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    resizeObserver.observe(container);
+
+    return () => {
+      clearTimeout(timeoutId);
+      resizeObserver.disconnect();
+    };
+  }, [text, maxLines, isExpanded]);
+
+  return (
+    <div ref={containerRef} className={cn("relative", className)}>
+      {/* Hidden element for measuring full text height */}
+      <p
+        ref={measureRef}
+        aria-hidden="true"
+        className="invisible absolute top-0 left-0 right-0 pointer-events-none break-words"
+      >
+        {text}
+      </p>
+
+      {/* Visible clamped text */}
+      <p
+        ref={clampedRef}
+        className={cn("break-words", !isExpanded && `line-clamp-${maxLines}`)}
+        style={
+          !isExpanded
+            ? {
+                display: "-webkit-box",
+                WebkitLineClamp: maxLines,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+              }
+            : undefined
+        }
+      >
+        {text}
+      </p>
+
+      {isTruncated && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="text-primary hover:underline text-inherit mt-1"
+        >
+          {isExpanded ? "Show less" : "Show more"}
+        </button>
+      )}
+    </div>
+  );
+}