From bdc06008f9909310fa02f87190ef9fd67ba8d70a Mon Sep 17 00:00:00 2001
From: Avi Gaba <ivaavimusicproductions@gmail.com>
Date: Mon, 30 Mar 2026 13:54:37 +0530
Subject: [PATCH 1/4] Polish upload affordances and file page guidance

---
 app/files/page.tsx                          |  10 +-
 components/Sandboxes/NoSandboxFiles.tsx     |  44 +++++----
 components/Sidebar/NewChatButton.tsx        |   2 +-
 components/Sidebar/RecentChats/ChatItem.tsx |  10 +-
 components/VercelChat/ChatInput.tsx         |   1 +
 components/VercelChat/FileMentionsInput.tsx |  36 ++++++-
 components/VercelChat/mentionsStyles.ts     | 103 +++++++++++---------
 components/ui/button.tsx                    |   2 +-
 components/ui/dialog.tsx                    |   2 +-
 9 files changed, 134 insertions(+), 76 deletions(-)

diff --git a/app/files/page.tsx b/app/files/page.tsx
index 8ae81821f..5a270dbc8 100644
--- a/app/files/page.tsx
+++ b/app/files/page.tsx
@@ -2,7 +2,15 @@ import SandboxFileTree from "@/components/Sandboxes/SandboxFileTree";
 
 export default async function FilesPage() {
   return (
-    <div className="px-6 md:px-12 py-8">
+    <div className="px-6 md:px-12 py-8 space-y-6">
+      <div className="max-w-3xl">
+        <h1 className="text-left font-heading text-3xl font-bold">
+          Files
+        </h1>
+        <p className="mt-2 text-lg text-muted-foreground font-light font-sans">
+          Upload repository files for your agent sandbox, including code, docs, assets, and reference material.
+        </p>
+      </div>
       <SandboxFileTree />
     </div>
   );
diff --git a/components/Sandboxes/NoSandboxFiles.tsx b/components/Sandboxes/NoSandboxFiles.tsx
index aefcacbf7..41429cf2e 100644
--- a/components/Sandboxes/NoSandboxFiles.tsx
+++ b/components/Sandboxes/NoSandboxFiles.tsx
@@ -21,23 +21,33 @@ export default function NoSandboxFiles({
   });
 
   return (
-    <div
-      {...getRootProps()}
-      role="region"
-      aria-label="File upload dropzone"
-      className={cn(
-        "w-full max-w-md rounded-lg p-8 border-2 border-dashed transition-all",
-        isDragging
-          ? "border-primary bg-primary/5"
-          : "border-muted-foreground/25",
-      )}
-    >
-      <input {...getInputProps()} aria-label="Upload files" />
-      <div className="flex flex-col items-center gap-3 text-muted-foreground">
-        <Upload className="h-8 w-8" />
-        <p className="text-sm">
-          No files yet. Drag and drop files here to upload.
-        </p>
+    <div className="w-full max-w-md min-h-[400px]">
+      <div
+        {...getRootProps()}
+        role="region"
+        aria-label="File upload dropzone"
+        className={cn(
+          "w-full max-w-md rounded-lg p-8 border-2 border-dashed transition-all",
+          // Note: Intentionally NOT using cursor-pointer here. Since click-to-upload
+          // is disabled (see noClick: true in useDragAndDrop hook), showing a hand
+          // cursor would mislead users into thinking clicking opens a file picker.
+          isDragging
+            ? "border-primary bg-primary/5"
+            : "border-muted-foreground/25",
+        )}
+      >
+        <input {...getInputProps()} aria-label="Upload files" />
+        <div className="flex flex-col items-center gap-3 text-muted-foreground">
+          <Upload className="h-8 w-8" />
+          <div className="space-y-2 text-center">
+            <h2 className="text-base font-medium text-foreground">
+              Repository Files
+            </h2>
+            <p className="text-sm">
+              No files yet. Drag and drop files here to upload them into the agent sandbox workspace.
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/components/Sidebar/NewChatButton.tsx b/components/Sidebar/NewChatButton.tsx
index 750d83398..d13df287a 100644
--- a/components/Sidebar/NewChatButton.tsx
+++ b/components/Sidebar/NewChatButton.tsx
@@ -12,7 +12,7 @@ const NewChatButton = ({ isExpanded, email, onClick }: NewChatButtonProps) => (
     <button
       type="button"
       className={cn(
-        "inline-flex items-center h-10 rounded-lg whitespace-nowrap overflow-hidden transition-all duration-200 text-sm font-normal text-foreground hover:bg-muted",
+        "inline-flex items-center h-10 rounded-lg whitespace-nowrap overflow-hidden transition-all duration-200 text-sm font-normal text-foreground hover:bg-muted cursor-pointer",
         isExpanded ? "w-full justify-start gap-2 px-3" : "w-10 justify-center mx-auto gap-0"
       )}
       onClick={onClick}
diff --git a/components/Sidebar/RecentChats/ChatItem.tsx b/components/Sidebar/RecentChats/ChatItem.tsx
index e6da1bad1..3f9c4f0d8 100644
--- a/components/Sidebar/RecentChats/ChatItem.tsx
+++ b/components/Sidebar/RecentChats/ChatItem.tsx
@@ -107,7 +107,7 @@ const ChatItem = ({
             onSelect(event.shiftKey);
           }}
           className={cn(
-            "shrink-0 w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center",
+            "shrink-0 w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center cursor-pointer",
             isSelected
               ? "bg-primary border-primary"
               : "border-border hover:border-primary/50"
@@ -121,7 +121,7 @@ const ChatItem = ({
       )}
 
       <button
-        className="flex-grow text-left truncate min-w-0"
+        className="flex-grow text-left truncate min-w-0 cursor-pointer"
         type="button"
         onClick={handleClick}
       >
@@ -134,7 +134,7 @@ const ChatItem = ({
         <button
           ref={setButtonRef}
           className={cn(
-            `shrink-0 p-1 text-muted-foreground hover:text-foreground dark:hover:text-muted-foreground transition-colors duration-150 ${
+            `shrink-0 p-1 text-muted-foreground hover:text-foreground dark:hover:text-muted-foreground transition-colors duration-150 cursor-pointer ${
               showOptions ? "opacity-100" : "opacity-0"
             }`,
             {
@@ -167,7 +167,7 @@ const ChatItem = ({
         >
           <button
             type="button"
-            className="w-full text-left px-3 py-2 hover:bg-muted dark:hover:bg-dark-bg-tertiary text-sm dark:text-muted-foreground flex items-center gap-2 transition-colors"
+            className="w-full text-left px-3 py-2 hover:bg-muted dark:hover:bg-dark-bg-tertiary text-sm dark:text-muted-foreground flex items-center gap-2 transition-colors cursor-pointer"
             onClick={onRenameClick}
             role="menuitem"
           >
@@ -176,7 +176,7 @@ const ChatItem = ({
           </button>
           <button
             type="button"
-            className="w-full text-left px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-sm text-red-500 dark:text-red-400 flex items-center gap-2 transition-colors"
+            className="w-full text-left px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-sm text-red-500 dark:text-red-400 flex items-center gap-2 transition-colors cursor-pointer"
             onClick={onDeleteClick}
             role="menuitem"
           >
diff --git a/components/VercelChat/ChatInput.tsx b/components/VercelChat/ChatInput.tsx
index 58edbbe2b..57fc77ec1 100644
--- a/components/VercelChat/ChatInput.tsx
+++ b/components/VercelChat/ChatInput.tsx
@@ -79,6 +79,7 @@ export function ChatInput() {
             onChange={setInput}
             disabled={isDisabled || hasPendingUploads}
             model={model}
+            disableInternalScroll={messages.length === 0}
           />
           <PromptInputToolbar>
             <PromptInputTools>
diff --git a/components/VercelChat/FileMentionsInput.tsx b/components/VercelChat/FileMentionsInput.tsx
index 09c36883a..a7c047bf2 100644
--- a/components/VercelChat/FileMentionsInput.tsx
+++ b/components/VercelChat/FileMentionsInput.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { MentionsInput, Mention, OnChangeHandlerFunc, SuggestionDataItem } from "react-mentions";
 import { Card } from "@/components/ui/card";
-import { mentionsStyles } from "./mentionsStyles";
+import { getMentionsStyles } from "./mentionsStyles";
 import useFileMentionSuggestions, { GroupedSuggestion } from "@/hooks/useFileMentionSuggestions";
 import { useBatchSignedUrls } from "@/hooks/useBatchSignedUrls";
 import { SuggestionItem } from "./SuggestionItem";
@@ -13,14 +13,41 @@ interface FileMentionsInputProps {
 	onChange: (newValue: string) => void;
 	disabled: boolean;
 	model: string;
+	disableInternalScroll?: boolean;
 }
 
-export default function FileMentionsInput({ value, onChange, disabled, model }: FileMentionsInputProps) {
+export default function FileMentionsInput({
+	value,
+	onChange,
+	disabled,
+	model,
+	disableInternalScroll = false,
+}: FileMentionsInputProps) {
 	const [portalHost, setPortalHost] = useState<Element | undefined>(undefined);
+	const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
 	useEffect(() => {
 		if (typeof window !== "undefined") setPortalHost(document.body);
 	}, []);
 
+	const adjustHeight = useCallback(() => {
+		if (!disableInternalScroll) {
+			return;
+		}
+
+		const textarea = inputRef.current;
+		if (!textarea) {
+			return;
+		}
+
+		textarea.style.height = "44px";
+		textarea.style.height = `${textarea.scrollHeight}px`;
+	}, [disableInternalScroll]);
+
+	useEffect(() => {
+		adjustHeight();
+	}, [adjustHeight, value]);
+
 	const handleMentionsChange: OnChangeHandlerFunc = (_event, newValue) => {
 		onChange(newValue);
 	};
@@ -36,6 +63,7 @@ export default function FileMentionsInput({ value, onChange, disabled, model }:
 			onChange={handleMentionsChange}
 			disabled={disabled}
 			className="w-full text-[14px] leading-[1.6] pb-2 md:pb-0 text-foreground [&_textarea]:placeholder:text-muted-foreground"
+			inputRef={inputRef}
 			suggestionsPortalHost={portalHost}
 			allowSuggestionsAboveCursor
 			customSuggestionsContainer={(children) => (
@@ -53,7 +81,7 @@ export default function FileMentionsInput({ value, onChange, disabled, model }:
 					if (form) form.requestSubmit();
 				}
 			}}
-			style={mentionsStyles}
+			style={getMentionsStyles({ disableInternalScroll })}
 		>
 			<Mention
 				trigger="@"
diff --git a/components/VercelChat/mentionsStyles.ts b/components/VercelChat/mentionsStyles.ts
index 5f3081d9e..d96cdda52 100644
--- a/components/VercelChat/mentionsStyles.ts
+++ b/components/VercelChat/mentionsStyles.ts
@@ -1,50 +1,61 @@
-export const mentionsStyles = {
-  control: {
-    minHeight: 44,
-    border: "none",
-    outline: "none",
-    background: "transparent",
-    width: "100%",
-  },
-  "&multiLine": {
-    highlighter: {
-      padding: "12px 20px",
-      fontSize: 14,
-      lineHeight: 1.6,
-      maxHeight: 180,
-      overflow: "hidden",
-      color: "transparent",
-      whiteSpace: "pre-wrap",
-    },
-    input: {
-      padding: "12px 20px",
-      outline: "none",
-      fontSize: 14,
-      lineHeight: 1.6,
+interface MentionsStyleOptions {
+  disableInternalScroll?: boolean;
+}
+
+export function getMentionsStyles({
+  disableInternalScroll = false,
+}: MentionsStyleOptions = {}) {
+  const maxHeight = disableInternalScroll ? undefined : 180;
+  const overflowY = disableInternalScroll ? "hidden" : "auto";
+
+  return {
+    control: {
       minHeight: 44,
-      maxHeight: 180,
-      overflowY: "auto",
-      resize: "none",
-      boxSizing: "border-box",
-      color: "inherit",
-      backgroundColor: "transparent",
+      border: "none",
+      outline: "none",
+      background: "transparent",
+      width: "100%",
     },
-  },
-  "&singleLine": {
-    highlighter: {
-      padding: "12px 20px",
-      fontSize: 14,
-      lineHeight: 1.6,
-      color: "transparent",
-      whiteSpace: "pre",
+    "&multiLine": {
+      highlighter: {
+        padding: "12px 20px",
+        fontSize: 14,
+        lineHeight: 1.6,
+        maxHeight,
+        overflow: "hidden",
+        color: "transparent",
+        whiteSpace: "pre-wrap",
+      },
+      input: {
+        padding: "12px 20px",
+        outline: "none",
+        fontSize: 14,
+        lineHeight: 1.6,
+        minHeight: 44,
+        maxHeight,
+        overflowY,
+        resize: "none",
+        boxSizing: "border-box" as const,
+        color: "inherit",
+        backgroundColor: "transparent",
+      },
     },
-    input: {
-      padding: "12px 20px",
-      outline: "none",
-      fontSize: 14,
-      lineHeight: 1.6,
-      color: "inherit",
-      backgroundColor: "transparent",
+    "&singleLine": {
+      highlighter: {
+        padding: "12px 20px",
+        fontSize: 14,
+        lineHeight: 1.6,
+        color: "transparent",
+        whiteSpace: "pre",
+      },
+      input: {
+        padding: "12px 20px",
+        outline: "none",
+        fontSize: 14,
+        lineHeight: 1.6,
+        color: "inherit",
+        backgroundColor: "transparent",
+      },
     },
-  },
-} as const;
\ No newline at end of file
+  } as const;
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index e88987572..094de1da1 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
   {
     variants: {
       variant: {
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 94bb07815..0aeec2536 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

From acd6a3a4b2717804ebe377b5754a2e0bf46421a0 Mon Sep 17 00:00:00 2001
From: Avi Gaba <ivaavimusicproductions@gmail.com>
Date: Mon, 30 Mar 2026 14:37:21 +0530
Subject: [PATCH 2/4] Reset composer height when autosize is disabled

---
 components/VercelChat/FileMentionsInput.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/VercelChat/FileMentionsInput.tsx b/components/VercelChat/FileMentionsInput.tsx
index a7c047bf2..4a0795b34 100644
--- a/components/VercelChat/FileMentionsInput.tsx
+++ b/components/VercelChat/FileMentionsInput.tsx
@@ -31,12 +31,13 @@ export default function FileMentionsInput({
 	}, []);
 
 	const adjustHeight = useCallback(() => {
-		if (!disableInternalScroll) {
+		const textarea = inputRef.current;
+		if (!textarea) {
 			return;
 		}
 
-		const textarea = inputRef.current;
-		if (!textarea) {
+		if (!disableInternalScroll) {
+			textarea.style.height = "";
 			return;
 		}
 

From 2745a69093eff188de953adfe529f53bc78b7761 Mon Sep 17 00:00:00 2001
From: Avi Gaba <ivaavimusicproductions@gmail.com>
Date: Tue, 31 Mar 2026 00:53:42 +0530
Subject: [PATCH 3/4] Narrow files page guidance scope

---
 app/files/page.tsx                          |  10 +-
 components/Sandboxes/FilesPageHeader.tsx    |  11 +++
 components/Sandboxes/NoSandboxFiles.tsx     |  44 ++++-----
 components/Sidebar/NewChatButton.tsx        |   2 +-
 components/Sidebar/RecentChats/ChatItem.tsx |  10 +-
 components/VercelChat/ChatInput.tsx         |   1 -
 components/VercelChat/FileMentionsInput.tsx |  37 +------
 components/VercelChat/mentionsStyles.ts     | 103 +++++++++-----------
 components/ui/button.tsx                    |   2 +-
 components/ui/dialog.tsx                    |   2 +-
 10 files changed, 88 insertions(+), 134 deletions(-)
 create mode 100644 components/Sandboxes/FilesPageHeader.tsx

diff --git a/app/files/page.tsx b/app/files/page.tsx
index 5a270dbc8..1877bc085 100644
--- a/app/files/page.tsx
+++ b/app/files/page.tsx
@@ -1,16 +1,10 @@
+import FilesPageHeader from "@/components/Sandboxes/FilesPageHeader";
 import SandboxFileTree from "@/components/Sandboxes/SandboxFileTree";
 
 export default async function FilesPage() {
   return (
     <div className="px-6 md:px-12 py-8 space-y-6">
-      <div className="max-w-3xl">
-        <h1 className="text-left font-heading text-3xl font-bold">
-          Files
-        </h1>
-        <p className="mt-2 text-lg text-muted-foreground font-light font-sans">
-          Upload repository files for your agent sandbox, including code, docs, assets, and reference material.
-        </p>
-      </div>
+      <FilesPageHeader />
       <SandboxFileTree />
     </div>
   );
diff --git a/components/Sandboxes/FilesPageHeader.tsx b/components/Sandboxes/FilesPageHeader.tsx
new file mode 100644
index 000000000..bb1744ae1
--- /dev/null
+++ b/components/Sandboxes/FilesPageHeader.tsx
@@ -0,0 +1,11 @@
+export default function FilesPageHeader() {
+  return (
+    <div className="max-w-3xl">
+      <h1 className="text-left font-heading text-3xl font-bold">Files</h1>
+      <p className="mt-2 text-lg text-muted-foreground font-light font-sans">
+        Upload repository files for your agent sandbox, including code, docs,
+        assets, and reference material.
+      </p>
+    </div>
+  );
+}
diff --git a/components/Sandboxes/NoSandboxFiles.tsx b/components/Sandboxes/NoSandboxFiles.tsx
index 41429cf2e..aefcacbf7 100644
--- a/components/Sandboxes/NoSandboxFiles.tsx
+++ b/components/Sandboxes/NoSandboxFiles.tsx
@@ -21,33 +21,23 @@ export default function NoSandboxFiles({
   });
 
   return (
-    <div className="w-full max-w-md min-h-[400px]">
-      <div
-        {...getRootProps()}
-        role="region"
-        aria-label="File upload dropzone"
-        className={cn(
-          "w-full max-w-md rounded-lg p-8 border-2 border-dashed transition-all",
-          // Note: Intentionally NOT using cursor-pointer here. Since click-to-upload
-          // is disabled (see noClick: true in useDragAndDrop hook), showing a hand
-          // cursor would mislead users into thinking clicking opens a file picker.
-          isDragging
-            ? "border-primary bg-primary/5"
-            : "border-muted-foreground/25",
-        )}
-      >
-        <input {...getInputProps()} aria-label="Upload files" />
-        <div className="flex flex-col items-center gap-3 text-muted-foreground">
-          <Upload className="h-8 w-8" />
-          <div className="space-y-2 text-center">
-            <h2 className="text-base font-medium text-foreground">
-              Repository Files
-            </h2>
-            <p className="text-sm">
-              No files yet. Drag and drop files here to upload them into the agent sandbox workspace.
-            </p>
-          </div>
-        </div>
+    <div
+      {...getRootProps()}
+      role="region"
+      aria-label="File upload dropzone"
+      className={cn(
+        "w-full max-w-md rounded-lg p-8 border-2 border-dashed transition-all",
+        isDragging
+          ? "border-primary bg-primary/5"
+          : "border-muted-foreground/25",
+      )}
+    >
+      <input {...getInputProps()} aria-label="Upload files" />
+      <div className="flex flex-col items-center gap-3 text-muted-foreground">
+        <Upload className="h-8 w-8" />
+        <p className="text-sm">
+          No files yet. Drag and drop files here to upload.
+        </p>
       </div>
     </div>
   );
diff --git a/components/Sidebar/NewChatButton.tsx b/components/Sidebar/NewChatButton.tsx
index d13df287a..750d83398 100644
--- a/components/Sidebar/NewChatButton.tsx
+++ b/components/Sidebar/NewChatButton.tsx
@@ -12,7 +12,7 @@ const NewChatButton = ({ isExpanded, email, onClick }: NewChatButtonProps) => (
     <button
       type="button"
       className={cn(
-        "inline-flex items-center h-10 rounded-lg whitespace-nowrap overflow-hidden transition-all duration-200 text-sm font-normal text-foreground hover:bg-muted cursor-pointer",
+        "inline-flex items-center h-10 rounded-lg whitespace-nowrap overflow-hidden transition-all duration-200 text-sm font-normal text-foreground hover:bg-muted",
         isExpanded ? "w-full justify-start gap-2 px-3" : "w-10 justify-center mx-auto gap-0"
       )}
       onClick={onClick}
diff --git a/components/Sidebar/RecentChats/ChatItem.tsx b/components/Sidebar/RecentChats/ChatItem.tsx
index 3f9c4f0d8..e6da1bad1 100644
--- a/components/Sidebar/RecentChats/ChatItem.tsx
+++ b/components/Sidebar/RecentChats/ChatItem.tsx
@@ -107,7 +107,7 @@ const ChatItem = ({
             onSelect(event.shiftKey);
           }}
           className={cn(
-            "shrink-0 w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center cursor-pointer",
+            "shrink-0 w-4 h-4 rounded border-2 transition-all duration-150 flex items-center justify-center",
             isSelected
               ? "bg-primary border-primary"
               : "border-border hover:border-primary/50"
@@ -121,7 +121,7 @@ const ChatItem = ({
       )}
 
       <button
-        className="flex-grow text-left truncate min-w-0 cursor-pointer"
+        className="flex-grow text-left truncate min-w-0"
         type="button"
         onClick={handleClick}
       >
@@ -134,7 +134,7 @@ const ChatItem = ({
         <button
           ref={setButtonRef}
           className={cn(
-            `shrink-0 p-1 text-muted-foreground hover:text-foreground dark:hover:text-muted-foreground transition-colors duration-150 cursor-pointer ${
+            `shrink-0 p-1 text-muted-foreground hover:text-foreground dark:hover:text-muted-foreground transition-colors duration-150 ${
               showOptions ? "opacity-100" : "opacity-0"
             }`,
             {
@@ -167,7 +167,7 @@ const ChatItem = ({
         >
           <button
             type="button"
-            className="w-full text-left px-3 py-2 hover:bg-muted dark:hover:bg-dark-bg-tertiary text-sm dark:text-muted-foreground flex items-center gap-2 transition-colors cursor-pointer"
+            className="w-full text-left px-3 py-2 hover:bg-muted dark:hover:bg-dark-bg-tertiary text-sm dark:text-muted-foreground flex items-center gap-2 transition-colors"
             onClick={onRenameClick}
             role="menuitem"
           >
@@ -176,7 +176,7 @@ const ChatItem = ({
           </button>
           <button
             type="button"
-            className="w-full text-left px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-sm text-red-500 dark:text-red-400 flex items-center gap-2 transition-colors cursor-pointer"
+            className="w-full text-left px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/30 text-sm text-red-500 dark:text-red-400 flex items-center gap-2 transition-colors"
             onClick={onDeleteClick}
             role="menuitem"
           >
diff --git a/components/VercelChat/ChatInput.tsx b/components/VercelChat/ChatInput.tsx
index 57fc77ec1..58edbbe2b 100644
--- a/components/VercelChat/ChatInput.tsx
+++ b/components/VercelChat/ChatInput.tsx
@@ -79,7 +79,6 @@ export function ChatInput() {
             onChange={setInput}
             disabled={isDisabled || hasPendingUploads}
             model={model}
-            disableInternalScroll={messages.length === 0}
           />
           <PromptInputToolbar>
             <PromptInputTools>
diff --git a/components/VercelChat/FileMentionsInput.tsx b/components/VercelChat/FileMentionsInput.tsx
index 4a0795b34..09c36883a 100644
--- a/components/VercelChat/FileMentionsInput.tsx
+++ b/components/VercelChat/FileMentionsInput.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { MentionsInput, Mention, OnChangeHandlerFunc, SuggestionDataItem } from "react-mentions";
 import { Card } from "@/components/ui/card";
-import { getMentionsStyles } from "./mentionsStyles";
+import { mentionsStyles } from "./mentionsStyles";
 import useFileMentionSuggestions, { GroupedSuggestion } from "@/hooks/useFileMentionSuggestions";
 import { useBatchSignedUrls } from "@/hooks/useBatchSignedUrls";
 import { SuggestionItem } from "./SuggestionItem";
@@ -13,42 +13,14 @@ interface FileMentionsInputProps {
 	onChange: (newValue: string) => void;
 	disabled: boolean;
 	model: string;
-	disableInternalScroll?: boolean;
 }
 
-export default function FileMentionsInput({
-	value,
-	onChange,
-	disabled,
-	model,
-	disableInternalScroll = false,
-}: FileMentionsInputProps) {
+export default function FileMentionsInput({ value, onChange, disabled, model }: FileMentionsInputProps) {
 	const [portalHost, setPortalHost] = useState<Element | undefined>(undefined);
-	const inputRef = useRef<HTMLTextAreaElement | null>(null);
-
 	useEffect(() => {
 		if (typeof window !== "undefined") setPortalHost(document.body);
 	}, []);
 
-	const adjustHeight = useCallback(() => {
-		const textarea = inputRef.current;
-		if (!textarea) {
-			return;
-		}
-
-		if (!disableInternalScroll) {
-			textarea.style.height = "";
-			return;
-		}
-
-		textarea.style.height = "44px";
-		textarea.style.height = `${textarea.scrollHeight}px`;
-	}, [disableInternalScroll]);
-
-	useEffect(() => {
-		adjustHeight();
-	}, [adjustHeight, value]);
-
 	const handleMentionsChange: OnChangeHandlerFunc = (_event, newValue) => {
 		onChange(newValue);
 	};
@@ -64,7 +36,6 @@ export default function FileMentionsInput({
 			onChange={handleMentionsChange}
 			disabled={disabled}
 			className="w-full text-[14px] leading-[1.6] pb-2 md:pb-0 text-foreground [&_textarea]:placeholder:text-muted-foreground"
-			inputRef={inputRef}
 			suggestionsPortalHost={portalHost}
 			allowSuggestionsAboveCursor
 			customSuggestionsContainer={(children) => (
@@ -82,7 +53,7 @@ export default function FileMentionsInput({
 					if (form) form.requestSubmit();
 				}
 			}}
-			style={getMentionsStyles({ disableInternalScroll })}
+			style={mentionsStyles}
 		>
 			<Mention
 				trigger="@"
diff --git a/components/VercelChat/mentionsStyles.ts b/components/VercelChat/mentionsStyles.ts
index d96cdda52..5f3081d9e 100644
--- a/components/VercelChat/mentionsStyles.ts
+++ b/components/VercelChat/mentionsStyles.ts
@@ -1,61 +1,50 @@
-interface MentionsStyleOptions {
-  disableInternalScroll?: boolean;
-}
-
-export function getMentionsStyles({
-  disableInternalScroll = false,
-}: MentionsStyleOptions = {}) {
-  const maxHeight = disableInternalScroll ? undefined : 180;
-  const overflowY = disableInternalScroll ? "hidden" : "auto";
-
-  return {
-    control: {
-      minHeight: 44,
-      border: "none",
+export const mentionsStyles = {
+  control: {
+    minHeight: 44,
+    border: "none",
+    outline: "none",
+    background: "transparent",
+    width: "100%",
+  },
+  "&multiLine": {
+    highlighter: {
+      padding: "12px 20px",
+      fontSize: 14,
+      lineHeight: 1.6,
+      maxHeight: 180,
+      overflow: "hidden",
+      color: "transparent",
+      whiteSpace: "pre-wrap",
+    },
+    input: {
+      padding: "12px 20px",
       outline: "none",
-      background: "transparent",
-      width: "100%",
+      fontSize: 14,
+      lineHeight: 1.6,
+      minHeight: 44,
+      maxHeight: 180,
+      overflowY: "auto",
+      resize: "none",
+      boxSizing: "border-box",
+      color: "inherit",
+      backgroundColor: "transparent",
     },
-    "&multiLine": {
-      highlighter: {
-        padding: "12px 20px",
-        fontSize: 14,
-        lineHeight: 1.6,
-        maxHeight,
-        overflow: "hidden",
-        color: "transparent",
-        whiteSpace: "pre-wrap",
-      },
-      input: {
-        padding: "12px 20px",
-        outline: "none",
-        fontSize: 14,
-        lineHeight: 1.6,
-        minHeight: 44,
-        maxHeight,
-        overflowY,
-        resize: "none",
-        boxSizing: "border-box" as const,
-        color: "inherit",
-        backgroundColor: "transparent",
-      },
+  },
+  "&singleLine": {
+    highlighter: {
+      padding: "12px 20px",
+      fontSize: 14,
+      lineHeight: 1.6,
+      color: "transparent",
+      whiteSpace: "pre",
     },
-    "&singleLine": {
-      highlighter: {
-        padding: "12px 20px",
-        fontSize: 14,
-        lineHeight: 1.6,
-        color: "transparent",
-        whiteSpace: "pre",
-      },
-      input: {
-        padding: "12px 20px",
-        outline: "none",
-        fontSize: 14,
-        lineHeight: 1.6,
-        color: "inherit",
-        backgroundColor: "transparent",
-      },
+    input: {
+      padding: "12px 20px",
+      outline: "none",
+      fontSize: 14,
+      lineHeight: 1.6,
+      color: "inherit",
+      backgroundColor: "transparent",
     },
-  } as const;
-}
+  },
+} as const;
\ No newline at end of file
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 094de1da1..e88987572 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 0aeec2536..94bb07815 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

From 034cae126e1920772529d1d2ac8e1ad2d498c529 Mon Sep 17 00:00:00 2001
From: Avi Gaba <ivaavimusicproductions@gmail.com>
Date: Tue, 31 Mar 2026 11:34:22 +0530
Subject: [PATCH 4/4] Refine files page upload guidance copy

---
 components/Sandboxes/FilesPageHeader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Sandboxes/FilesPageHeader.tsx b/components/Sandboxes/FilesPageHeader.tsx
index bb1744ae1..b2012c27e 100644
--- a/components/Sandboxes/FilesPageHeader.tsx
+++ b/components/Sandboxes/FilesPageHeader.tsx
@@ -3,8 +3,8 @@ export default function FilesPageHeader() {
     <div className="max-w-3xl">
       <h1 className="text-left font-heading text-3xl font-bold">Files</h1>
       <p className="mt-2 text-lg text-muted-foreground font-light font-sans">
-        Upload repository files for your agent sandbox, including code, docs,
-        assets, and reference material.
+        Upload repository files for your agent, including images, songs, docs,
+        and reference material.
       </p>
     </div>
   );