ux: improve auto-approve timer visibility in follow-up suggestions (#10048)

Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
Co-authored-by: Roo Code <[email protected]>

Author: 3 people

webview-ui/src/components/chat/FollowUpSuggest.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from "react"
-import { ClipboardCopy } from "lucide-react"
+import { ClipboardCopy, Timer } from "lucide-react"
 
 import { Button, StandardTooltip } from "@/components/ui"
 
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { SuggestionItem } from "@roo-code/types"
+import { cn } from "@/lib/utils"
 
 const DEFAULT_FOLLOWUP_TIMEOUT_MS = 60000
 const COUNTDOWN_INTERVAL_MS = 1000
@@ -111,18 +112,24 @@ export const FollowUpSuggest = ({
 					<div key={`${suggestion.answer}-${ts}`} className="w-full relative group">
 						<Button
 							variant="outline"
-							className="text-left whitespace-normal break-words w-full h-auto px-3 py-2 justify-start pr-8 rounded-xl"
+							className={cn(
+								"text-left whitespace-normal break-words w-full h-auto px-3 py-2 justify-start pr-8 rounded-xl",
+								isFirstSuggestion &&
+									countdown !== null &&
+									!suggestionSelected &&
+									!isAnswered &&
+									"border-vscode-foreground/60 rounded-b-none -mb-1",
+							)}
 							onClick={(event) => handleSuggestionClick(suggestion, event)}
 							aria-label={suggestion.answer}>
 							{suggestion.answer}
-							{isFirstSuggestion && countdown !== null && !suggestionSelected && !isAnswered && (
-								<span
-									className="ml-2 px-1.5 py-0.5 text-xs rounded-full bg-vscode-badge-background text-vscode-badge-foreground"
-									title={t("chat:followUpSuggest.autoSelectCountdown", { count: countdown })}>
-									{t("chat:followUpSuggest.countdownDisplay", { count: countdown })}
-								</span>
-							)}
 						</Button>
+						{isFirstSuggestion && countdown !== null && !suggestionSelected && !isAnswered && (
+							<p className="rounded-b-xl border-1 border-t-0 border-vscode-foreground/60 text-vscode-descriptionForeground text-xs m-0 mt-1 px-3 pt-2 pb-2">
+								<Timer className="size-3 inline-block -mt-0.5 mr-1 animate-pulse" />
+								{t("chat:followUpSuggest.timerPrefix", { seconds: countdown })}
+							</p>
+						)}
 						{suggestion.mode && (
 							<div className="absolute bottom-0 right-0 text-[10px] bg-vscode-badge-background text-vscode-badge-foreground px-1 py-0.5 border border-vscode-badge-background flex items-center gap-0.5">
 								<span className="codicon codicon-arrow-right" style={{ fontSize: "8px" }} />

webview-ui/src/components/chat/__tests__/FollowUpSuggest.spec.tsx

@@ -12,12 +12,13 @@ vi.mock("@src/i18n/TranslationContext", () => ({
 			if (key === "chat:followUpSuggest.countdownDisplay" && options?.count !== undefined) {
 				return `${options.count}s`
 			}
-			if (key === "chat:followUpSuggest.autoSelectCountdown" && options?.count !== undefined) {
-				return `Auto-selecting in ${options.count} seconds`
-			}
 			if (key === "chat:followUpSuggest.copyToInput") {
 				return "Copy to input"
 			}
+			if (key === "chat:followUpSuggest.timerPrefix" && options?.seconds !== undefined) {
+				return "Auto-approve enabled. Selecting in " + options.seconds + "s…"
+			}
+
 			return key
 		},
 	}),
@@ -93,8 +94,9 @@ describe("FollowUpSuggest", () => {
 			defaultTestState,
 		)
 
-		// Should show initial countdown (3 seconds)
+		// Should countdown and mention
 		expect(screen.getByText(/3s/)).toBeInTheDocument()
+		expect(screen.getByText(/Selecting in 3s/)).toBeInTheDocument()
 	})
 
 	it("should not display countdown timer when isAnswered is true", () => {

webview-ui/src/i18n/locales/ca/chat.json

@@ -341,8 +341,7 @@
 	},
 	"followUpSuggest": {
 		"copyToInput": "Copy to input (same as shift + click)",
-		"autoSelectCountdown": "Auto-selecting in {{count}}s",
-		"countdownDisplay": "{{count}}s"
+		"timerPrefix": "Auto-approve enabled. Selecting in {{seconds}}s…"
 	},
 	"browser": {
 		"session": "Browser Session",