fix(queued-messages): clamp long queued messages to 3 lines

packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx

@@ -1,10 +1,12 @@
+import { useLayoutEffect, useRef, useState } from "react";
 import {
   ArrowBendDownLeft,
+  CaretDown,
   PencilSimple,
   Stack,
   Trash,
 } from "@phosphor-icons/react";
-import { Button } from "@posthog/quill";
+import { Button, cn } from "@posthog/quill";
 import { Box, Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import { MarkdownRenderer } from "../../../editor/components/MarkdownRenderer";
 import type { QueuedMessage } from "../../sessionStore";
@@ -29,15 +31,57 @@ export function QueuedMessageView({
     ? "Inject this message into the current turn at the next tool boundary."
     : "Interrupt the current turn and resend with this message.";
 
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  // Only meaningful while collapsed: expanding removes the clamp so scrollHeight === clientHeight.
+  // We keep the prior result when expanded so the "Show less" trigger stays put.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-measure when the message text changes.
+  useLayoutEffect(() => {
+    if (isExpanded) return;
+    const el = textRef.current;
+    if (!el) return;
+    const measure = () =>
+      setIsOverflowing(el.scrollHeight - el.clientHeight > 1);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [message.content, isExpanded]);
+
   return (
     <Box className="rounded-lg border border-gray-5 bg-card px-3 py-2">
-      <Flex align="center" gap="2">
-        <Stack size={14} className="shrink-0 text-gray-9" />
+      <Flex align="start" gap="2">
+        <Stack size={14} className="mt-0.5 shrink-0 text-gray-9" />
         <Box className="min-w-0 flex-1 font-medium text-[13px] text-gray-12 [&>*:last-child]:mb-0">
-          {hasFileMentions(message.content) ? (
-            parseFileMentions(message.content)
-          ) : (
-            <MarkdownRenderer content={message.content} />
+          <div
+            ref={textRef}
+            className={cn(
+              !isExpanded && "max-h-[3lh] overflow-hidden",
+              !isExpanded &&
+                isOverflowing &&
+                "[mask-image:linear-gradient(to_bottom,black_45%,transparent)]",
+            )}
+          >
+            {hasFileMentions(message.content) ? (
+              parseFileMentions(message.content)
+            ) : (
+              <MarkdownRenderer content={message.content} />
+            )}
+          </div>
+          {isOverflowing && (
+            <button
+              type="button"
+              aria-expanded={isExpanded}
+              onClick={() => setIsExpanded((v) => !v)}
+              className="mt-1 flex items-center gap-0.5 text-muted-foreground text-xs hover:text-foreground"
+            >
+              Show {isExpanded ? "less" : "more"}
+              <CaretDown
+                className={cn("size-3", isExpanded && "rotate-180")}
+              />
+            </button>
           )}
         </Box>
         <Flex align="center" gap="1" className="shrink-0">