From 7aab88b69adf8f6c3fa08bc1d3b8e8d172e35bf3 Mon Sep 17 00:00:00 2001
From: Harsh Jain <hjain4815@gmail.com>
Date: Mon, 6 Jul 2026 09:09:42 +0530
Subject: [PATCH 1/2] fix(queued-messages): clamp long queued messages to 3
 lines

Long queued messages (e.g. a pasted code block) previously rendered at full height, and this compounded with multiple queued messages, pushing the composer off-screen. Clamp to 3 lines with a fade mask and a 'Show more/less' toggle, mirroring the clamp pattern already used for sent messages in ChatThread's UserBubble.

Fixes #3150
---
 .../session-update/QueuedMessageView.tsx      | 57 ++++++++++++++++---
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx b/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx
index 27508e6e4c..453dc1acba 100644
--- a/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx
+++ b/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,56 @@ 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="shrink-0 text-gray-9 mt-0.5" />
         <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"
+              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">

From 96c72ed947f84da9fcfe62799a64b3a03a343a47 Mon Sep 17 00:00:00 2001
From: Harsh Jain <hjain4815@gmail.com>
Date: Mon, 6 Jul 2026 22:39:37 +0530
Subject: [PATCH 2/2] fix(queued-messages): add aria-expanded to show more/less
 toggle

Screen readers need aria-expanded on disclosure widgets to announce collapsed/expanded state. Addresses review feedback on the queued message clamp added for #3150.
---
 .../sessions/components/session-update/QueuedMessageView.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx b/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx
index 453dc1acba..83b4152bbf 100644
--- a/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx
+++ b/packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx
@@ -53,7 +53,7 @@ export function QueuedMessageView({
   return (
     <Box className="rounded-lg border border-gray-5 bg-card px-3 py-2">
       <Flex align="start" gap="2">
-        <Stack size={14} className="shrink-0 text-gray-9 mt-0.5" />
+        <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">
           <div
             ref={textRef}
@@ -73,6 +73,7 @@ export function QueuedMessageView({
           {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"
             >