From 41ce469901c70df507f6190b105b752bcdc463b9 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Tue, 2 Jun 2026 20:19:38 +0530
Subject: [PATCH] Move queued prompt preview into composer

---
 apps/web/components/chat/index.tsx       |  9 ++----
 apps/web/components/chat/input/index.tsx | 35 +++++++++++++++++++++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/chat/index.tsx b/apps/web/components/chat/index.tsx
index 36a7c583..1c604f9a 100644
--- a/apps/web/components/chat/index.tsx
+++ b/apps/web/components/chat/index.tsx
@@ -1322,13 +1322,8 @@ export function ChatSidebar({
 							</div>
 						))}
 						{(status === "submitted" || status === "streaming") && (
-							<div className="flex items-center gap-2">
+							<div className="flex gap-2">
 								<SuperLoader label="Thinking…" />
-								{messageQueue.length > 0 && (
-									<span className="rounded-full border border-white/8 bg-white/[0.03] px-2 py-0.5 text-[10px] font-medium tracking-[0.12em] text-white/32">
-										QUEUED
-									</span>
-								)}
 							</div>
 						)}
 					</div>
@@ -1428,6 +1423,8 @@ export function ChatSidebar({
 									? "Structuring response…"
 									: "Waiting for input…"
 					}
+					queuedMessagePreview={messageQueue[0]?.text ?? null}
+					queuedMessageCount={messageQueue.length}
 					showStatusStrip={showInputStatusStrip}
 					onExpandedChange={setIsInputExpanded}
 					chainOfThoughtComponent={
diff --git a/apps/web/components/chat/input/index.tsx b/apps/web/components/chat/input/index.tsx
index b17ad6aa..5e6a7219 100644
--- a/apps/web/components/chat/input/index.tsx
+++ b/apps/web/components/chat/input/index.tsx
@@ -18,6 +18,8 @@ interface ChatInputProps {
 	sendDisabled?: boolean
 	sendDisabledTooltip?: string
 	activeStatus?: string
+	queuedMessagePreview?: string | null
+	queuedMessageCount?: number
 	chainOfThoughtComponent?: React.ReactNode
 	onExpandedChange?: (expanded: boolean) => void
 	/** Model + space controls on one row with send; textarea full-width above */
@@ -36,6 +38,8 @@ export default function ChatInput({
 	sendDisabled = false,
 	sendDisabledTooltip,
 	activeStatus,
+	queuedMessagePreview,
+	queuedMessageCount = 0,
 	chainOfThoughtComponent,
 	onExpandedChange,
 	stackedToolbar,
@@ -45,6 +49,7 @@ export default function ChatInput({
 	const [isExpanded, setIsExpanded] = useState(false)
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
 	const isSendDisabled = !value.trim() || sendDisabled
+	const hasQueuedPreview = !!queuedMessagePreview && queuedMessageCount > 0
 	const resolvedSendDisabledTooltip =
 		sendDisabled && value.trim()
 			? sendDisabledTooltip
@@ -110,7 +115,8 @@ export default function ChatInput({
 					<button
 						type="button"
 						className={cn(
-							"w-full p-3 pr-4 flex items-center justify-between cursor-pointer bg-transparent border-0 text-left",
+							"w-full p-3 pr-4 flex items-center justify-between cursor-pointer bg-transparent border-0 text-left transition-[padding] duration-200",
+							hasQueuedPreview && "pb-1.5",
 							!chainOfThoughtComponent && "disabled:cursor-not-allowed",
 						)}
 						onClick={() => {
@@ -135,6 +141,33 @@ export default function ChatInput({
 							/>
 						)}
 					</button>
+					{hasQueuedPreview && (
+						<motion.div
+							initial={{ height: 0, opacity: 0 }}
+							animate={{ height: "auto", opacity: 1 }}
+							transition={{ duration: 0.18, ease: "easeOut" }}
+							className="overflow-hidden px-12 pr-4 pb-3"
+						>
+							<div className="flex min-w-0 items-center gap-2 rounded-lg border border-white/[0.06] bg-black/[0.16] px-2.5 py-1.5">
+								<span className="shrink-0 text-[10px] font-medium tracking-[0.12em] text-white/32">
+									QUEUED
+								</span>
+								<span
+									className={cn(
+										"min-w-0 flex-1 truncate text-xs text-[#6A7484]",
+										dmSansClassName(),
+									)}
+								>
+									{queuedMessagePreview}
+								</span>
+								{queuedMessageCount > 1 && (
+									<span className="shrink-0 text-[10px] text-white/28">
+										+{queuedMessageCount - 1}
+									</span>
+								)}
+							</div>
+						</motion.div>
+					)}
 				</>
 			) : null}
 			{stackedToolbar ? (