From 39f81007de58aeac36de9bc8c1b60c29eb741483 Mon Sep 17 00:00:00 2001
From: Declan Brady <declan.brady@scale.com>
Date: Mon, 22 Jun 2026 23:29:40 +0000
Subject: [PATCH 1/2] feat(agentex-ui): grow chat input vertically for
 multi-line prompts

The plain-text prompt was a single-line input, so long messages scrolled
horizontally and users couldn't review what they had typed. Swap it for a
textarea that auto-grows up to 200px (matching the JSON / CodeMirror cap),
then scrolls internally. Align the surrounding row to items-end so the
send button stays anchored to the bottom as the input grows. Enter sends;
Shift+Enter inserts a newline.

Refs: AGX1-386
---
 .../primary-content/prompt-input.tsx          | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/agentex-ui/components/primary-content/prompt-input.tsx b/agentex-ui/components/primary-content/prompt-input.tsx
index 45f0f9db..2604005f 100644
--- a/agentex-ui/components/primary-content/prompt-input.tsx
+++ b/agentex-ui/components/primary-content/prompt-input.tsx
@@ -59,7 +59,7 @@ export function PromptInput({ prompt, setPrompt }: PromptInputProps) {
   const sendMessageMutation = useSendMessage({ agentexClient });
   const { data: task } = useTask({ agentexClient, taskId: taskID ?? '' });
 
-  const textInputRef = useRef<HTMLInputElement>(null);
+  const textInputRef = useRef<HTMLTextAreaElement>(null);
   const codeMirrorViewRef = useRef<EditorView | null>(null);
 
   const isTaskTerminal = useMemo(() => {
@@ -200,7 +200,7 @@ export function PromptInput({ prompt, setPrompt }: PromptInputProps) {
         </div>
       )}
       <div
-        className={`border-input dark:bg-input ${isDisabled ? 'bg-muted scale-90 cursor-not-allowed' : 'scale-100'} flex w-full items-center justify-between rounded-4xl border py-2 pr-2 pl-6 shadow-sm transition-transform duration-300 disabled:cursor-not-allowed`}
+        className={`border-input dark:bg-input ${isDisabled ? 'bg-muted scale-90 cursor-not-allowed' : 'scale-100'} flex w-full items-end justify-between rounded-4xl border py-2 pr-2 pl-6 shadow-sm transition-transform duration-300 disabled:cursor-not-allowed`}
       >
         {isSendingJSON ? (
           <DataInput
@@ -247,6 +247,11 @@ export function PromptInput({ prompt, setPrompt }: PromptInputProps) {
   );
 }
 
+// Cap the auto-grow height of the plain-text prompt textarea. Matches the
+// JSON / CodeMirror branch's `maxHeight="200px"` so both variants feel
+// consistent when authoring longer prompts.
+const TEXT_INPUT_MAX_HEIGHT_PX = 200;
+
 const TextInput = ({
   prompt,
   setPrompt,
@@ -262,20 +267,42 @@ const TextInput = ({
   isTaskTerminal: boolean;
   taskStatus: string | null | undefined;
   handleSendPrompt: () => void;
-  inputRef: React.RefObject<HTMLInputElement | null>;
+  inputRef: React.RefObject<HTMLTextAreaElement | null>;
 }) => {
+  // Auto-resize the textarea height to fit content up to the max, then scroll
+  // internally. Reset to 'auto' first so the height can shrink when the user
+  // deletes lines, not just grow.
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    const next = Math.min(el.scrollHeight, TEXT_INPUT_MAX_HEIGHT_PX);
+    el.style.height = `${next}px`;
+    el.style.overflowY =
+      el.scrollHeight > TEXT_INPUT_MAX_HEIGHT_PX ? 'auto' : 'hidden';
+  }, [prompt, inputRef]);
+
   return (
-    <input
+    <textarea
       ref={inputRef}
       id="prompt-text-input"
-      type="text"
+      rows={1}
       value={prompt}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
         setPrompt(e.target.value)
       }
-      onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter' && !isDisabled && prompt.trim()) {
-          handleSendPrompt();
+      onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        // Enter sends; Shift+Enter inserts a newline. Ignore Enter while an
+        // IME composition is active so it can commit the candidate normally.
+        if (
+          e.key === 'Enter' &&
+          !e.shiftKey &&
+          !e.nativeEvent.isComposing
+        ) {
+          e.preventDefault();
+          if (!isDisabled && prompt.trim()) {
+            handleSendPrompt();
+          }
         }
       }}
       disabled={isDisabled}
@@ -286,10 +313,11 @@ const TextInput = ({
             ? 'Select an agent to start'
             : 'Enter your prompt'
       }
-      className="mr-2 flex-1 outline-none focus:ring-0 focus:outline-none"
+      className="mr-2 flex-1 resize-none py-2 leading-6 outline-none focus:ring-0 focus:outline-none"
       style={{
         backgroundColor: 'inherit',
         cursor: 'inherit',
+        maxHeight: `${TEXT_INPUT_MAX_HEIGHT_PX}px`,
       }}
     />
   );

From 95f9771ad9e2053fa766b44a8f1e3749affd41ec Mon Sep 17 00:00:00 2001
From: Declan Brady <declan.brady@scale.com>
Date: Mon, 22 Jun 2026 19:54:57 -0400
Subject: [PATCH 2/2] style(agentex-ui): collapse Enter keydown condition to
 satisfy prettier

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 agentex-ui/components/primary-content/prompt-input.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/agentex-ui/components/primary-content/prompt-input.tsx b/agentex-ui/components/primary-content/prompt-input.tsx
index 2604005f..81738fd8 100644
--- a/agentex-ui/components/primary-content/prompt-input.tsx
+++ b/agentex-ui/components/primary-content/prompt-input.tsx
@@ -294,11 +294,7 @@ const TextInput = ({
       onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
         // Enter sends; Shift+Enter inserts a newline. Ignore Enter while an
         // IME composition is active so it can commit the candidate normally.
-        if (
-          e.key === 'Enter' &&
-          !e.shiftKey &&
-          !e.nativeEvent.isComposing
-        ) {
+        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
           e.preventDefault();
           if (!isDisabled && prompt.trim()) {
             handleSendPrompt();