From b9d47a8cf59df1660bb212ae63f03cb23fa993e9 Mon Sep 17 00:00:00 2001
From: anvyle <lanvy1120@gmail.com>
Date: Thu, 9 Apr 2026 22:10:51 +0200
Subject: [PATCH] fix(copilot): auto-size editable step textareas on initial
 render and input

- Replace <input type="text"> with <textarea> for step descriptions
- Use ref callback to set height from scrollHeight on every render so
  long descriptions wrap to multiple lines by default without interaction
- Bump countdown ring container from 20px to 24px and text from 9px to
  11px for better legibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../tools/DecomposeGoal/DecomposeGoal.tsx     | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/DecomposeGoal/DecomposeGoal.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/DecomposeGoal/DecomposeGoal.tsx
index fde9c67dc4..dbab6ddd7e 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/tools/DecomposeGoal/DecomposeGoal.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/tools/DecomposeGoal/DecomposeGoal.tsx
@@ -27,7 +27,7 @@ import {
   ToolIcon,
 } from "./helpers";
 
-const COUNTDOWN_SECONDS = 99;
+const COUNTDOWN_SECONDS = 60;
 const RADIUS = 15;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 
@@ -191,21 +191,27 @@ export function DecomposeGoalTool({ part, isLastMessage }: Props) {
 
                   {editableSteps.map((step, i) => (
                     <div key={step.step_id} className="flex flex-col">
-                      <div className="flex items-center gap-2 py-1">
-                        <span className="w-5 shrink-0 text-xs text-slate-400">
+                      <div className="flex items-start gap-2 py-1">
+                        <span className="w-5 shrink-0 pt-1 text-xs text-slate-400">
                           {i + 1}.
                         </span>
-                        <input
-                          type="text"
+                        <textarea
+                          ref={(el) => {
+                            if (el) {
+                              el.style.height = "auto";
+                              el.style.height = `${el.scrollHeight}px`;
+                            }
+                          }}
                           value={step.description}
                           onChange={(e) => handleStepChange(i, e.target.value)}
-                          className="flex-1 rounded border border-slate-200 px-2 py-1 text-sm focus:border-neutral-400 focus:outline-none"
+                          rows={1}
+                          className="flex-1 resize-none overflow-hidden rounded border border-slate-200 px-2 py-1 text-sm focus:border-neutral-400 focus:outline-none"
                           placeholder="Step description"
                         />
                         <button
                           type="button"
                           onClick={() => handleStepDelete(i)}
-                          className="text-slate-400 hover:text-red-500"
+                          className="mt-1 text-slate-400 hover:text-red-500"
                           aria-label="Remove step"
                         >
                           <TrashIcon size={14} />
@@ -248,10 +254,10 @@ export function DecomposeGoalTool({ part, isLastMessage }: Props) {
                       <span className="group/label inline-flex items-center gap-1">
                         <span className="inline-flex items-center gap-1 group-hover/label:hidden">
                           Starting in
-                          <span className="relative inline-flex h-5 w-5 items-center justify-center">
+                          <span className="relative inline-flex h-6 w-6 items-center justify-center">
                             <svg
-                              width="20"
-                              height="20"
+                              width="24"
+                              height="24"
                               viewBox="0 0 34 34"
                               className="absolute -rotate-90"
                             >
@@ -277,7 +283,7 @@ export function DecomposeGoalTool({ part, isLastMessage }: Props) {
                                 className="text-neutral-600 transition-[stroke-dashoffset] duration-1000 ease-linear"
                               />
                             </svg>
-                            <span className="relative z-10 text-[9px] font-semibold tabular-nums text-neutral-700">
+                            <span className="relative z-10 text-[11px] font-semibold tabular-nums text-neutral-700">
                               {secondsLeft}
                             </span>
                           </span>