Fix follow-up suggestion mode rendering crash

Author: edelauna

src/core/tools/AskFollowupQuestionTool.ts

@@ -6,7 +6,7 @@ import { BaseTool, ToolCallbacks } from "./BaseTool"
 
 interface Suggestion {
 	text: string
-	mode?: string
+	mode?: unknown
 }
 
 interface AskFollowupQuestionParams {
@@ -17,6 +17,19 @@ interface AskFollowupQuestionParams {
 export class AskFollowupQuestionTool extends BaseTool<"ask_followup_question"> {
 	readonly name = "ask_followup_question" as const
 
+	private getSuggestionMode(mode: unknown): string | undefined {
+		if (typeof mode === "string" && mode.trim().length > 0) {
+			return mode
+		}
+
+		if (mode && typeof mode === "object" && "mode_slug" in mode) {
+			const modeSlug = (mode as { mode_slug?: unknown }).mode_slug
+			return typeof modeSlug === "string" && modeSlug.trim().length > 0 ? modeSlug : undefined
+		}
+
+		return undefined
+	}
+
 	async execute(params: AskFollowupQuestionParams, task: Task, callbacks: ToolCallbacks): Promise<void> {
 		const { question, follow_up } = params
 		const { handleError, pushToolResult } = callbacks
@@ -42,7 +55,7 @@ export class AskFollowupQuestionTool extends BaseTool<"ask_followup_question"> {
 			// Transform follow_up suggestions to the format expected by task.ask
 			const follow_up_json = {
 				question,
-				suggest: follow_up.map((s) => ({ answer: s.text, mode: s.mode })),
+				suggest: follow_up.map((s) => ({ answer: s.text, mode: this.getSuggestionMode(s.mode) })),
 			}
 
 			task.consecutiveMistakeCount = 0

src/core/tools/__tests__/askFollowupQuestionTool.spec.ts

@@ -137,6 +137,22 @@ describe("AskFollowupQuestionTool", () => {
 		expect(mockTask.ask).toHaveBeenCalledWith("followup", expectedJson, false)
 	})
 
+	it("should normalize malformed object mode values", async () => {
+		const params = {
+			question: "Switch mode?",
+			follow_up: [{ text: "Use code mode", mode: { mode_slug: "code" } }],
+		} as any
+
+		await tool.execute(params, mockTask, mockCallbacks)
+
+		const expectedJson = JSON.stringify({
+			question: "Switch mode?",
+			suggest: [{ answer: "Use code mode", mode: "code" }],
+		})
+
+		expect(mockTask.ask).toHaveBeenCalledWith("followup", expectedJson, false)
+	})
+
 	it("should say user_feedback and push tool result after user answers", async () => {
 		const params = {
 			question: "Which approach?",

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

@@ -59,6 +59,19 @@ export const MAX_IMAGES_PER_MESSAGE = 20 // This is the Anthropic limit.
 
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
+const getSuggestionMode = (mode: unknown): string | undefined => {
+	if (typeof mode === "string" && mode.trim().length > 0) {
+		return mode
+	}
+
+	if (mode && typeof mode === "object" && "mode_slug" in mode) {
+		const modeSlug = (mode as { mode_slug?: unknown }).mode_slug
+		return typeof modeSlug === "string" && modeSlug.trim().length > 0 ? modeSlug : undefined
+	}
+
+	return undefined
+}
+
 const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewProps> = (
 	{ isHidden, showAnnouncement, hideAnnouncement },
 	ref,
@@ -1358,12 +1371,13 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			}
 
 			// Check if we need to switch modes
-			if (suggestion.mode) {
+			const suggestionMode = getSuggestionMode(suggestion.mode)
+			if (suggestionMode) {
 				// Only switch modes if it's a manual click (event exists) or auto-approval is allowed
 				const isManualClick = !!event
 				if (isManualClick || alwaysAllowModeSwitch) {
 					// Switch mode without waiting
-					switchToMode(suggestion.mode)
+					switchToMode(suggestionMode)
 				}
 			}
 

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

@@ -11,6 +11,19 @@ import { cn } from "@/lib/utils"
 const DEFAULT_FOLLOWUP_TIMEOUT_MS = 60000
 const COUNTDOWN_INTERVAL_MS = 1000
 
+const getSuggestionMode = (mode: unknown): string | undefined => {
+	if (typeof mode === "string" && mode.trim().length > 0) {
+		return mode
+	}
+
+	if (mode && typeof mode === "object" && "mode_slug" in mode) {
+		const modeSlug = (mode as { mode_slug?: unknown }).mode_slug
+		return typeof modeSlug === "string" && modeSlug.trim().length > 0 ? modeSlug : undefined
+	}
+
+	return undefined
+}
+
 interface FollowUpSuggestProps {
 	suggestions?: SuggestionItem[]
 	onSuggestionClick?: (suggestion: SuggestionItem, event?: React.MouseEvent) => void
@@ -111,6 +124,7 @@ export const FollowUpSuggest = ({
 		<div className="flex mb-2 flex-col h-full gap-2">
 			{suggestions.map((suggestion, index) => {
 				const isFirstSuggestion = index === 0
+				const suggestionMode = getSuggestionMode(suggestion.mode)
 
 				return (
 					<div key={`${suggestion.answer}-${ts}`} className="w-full relative group">
@@ -134,10 +148,10 @@ export const FollowUpSuggest = ({
 								{t("chat:followUpSuggest.timerPrefix", { seconds: countdown })}
 							</p>
 						)}
-						{suggestion.mode && (
+						{suggestionMode && (
 							<div className="absolute bottom-0 right-0 text-[10px] text-vscode-badge-foreground pl-1 pr-2.5 pt-0.5 pb-1.5 flex items-center gap-0.5 bg-transparent rounded-xl">
 								<span className="codicon codicon-arrow-right" style={{ fontSize: "8px" }} />
-								{suggestion.mode}
+								{suggestionMode}
 							</div>
 						)}
 						<StandardTooltip content={t("chat:followUpSuggest.copyToInput")}>

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

@@ -243,6 +243,23 @@ describe("FollowUpSuggest", () => {
 		expect(container.firstChild).toBeNull()
 	})
 
+	it("should render malformed object mode values without crashing", () => {
+		const suggestions = [{ answer: "Use code mode", mode: { mode_slug: "code" } }] as any
+
+		renderWithTestProviders(
+			<FollowUpSuggest
+				suggestions={suggestions}
+				onSuggestionClick={mockOnSuggestionClick}
+				ts={123}
+				onCancelAutoApproval={mockOnCancelAutoApproval}
+			/>,
+			defaultTestState,
+		)
+
+		expect(screen.getByText("Use code mode")).toBeInTheDocument()
+		expect(screen.getByText("code")).toBeInTheDocument()
+	})
+
 	it("should stop countdown when user manually responds (isAnswered becomes true)", () => {
 		const { rerender } = renderWithTestProviders(
 			<FollowUpSuggest