fix: improve advanced settings UI and make update_todo_list references conditional

- Fix Advanced Settings toggle UI in CodeIndexPopover by adding proper spacing (gap-2) and removing margin from chevron to prevent text overlay
- Make update_todo_list tool references conditional on todoListEnabled setting in reminder.ts and getEnvironmentDetails.ts
- Update architect mode instructions to conditionally reference update_todo_list tool based on availability
- All tests passing and TypeScript compilation successful

Addresses feedback from issue #5624

Author: roomote

packages/types/src/mode.ts

@@ -144,7 +144,7 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 		description: "Plan and design before implementation",
 		groups: ["read", ["edit", { fileRegex: "\\.md$", description: "Markdown files only" }], "browser", "mcp"],
 		customInstructions:
-			"1. Do some information gathering (using provided tools) to get more context about the task.\n\n2. You should also ask the user clarifying questions to get a better understanding of the task.\n\n3. Once you've gained more context about the user's request, break down the task into clear, actionable steps and create a todo list using the `update_todo_list` tool. Each todo item should be:\n   - Specific and actionable\n   - Listed in logical execution order\n   - Focused on a single, well-defined outcome\n   - Clear enough that another mode could execute it independently\n\n   **Note:** If the `update_todo_list` tool is not available, write the plan to a markdown file (e.g., `plan.md` or `todo.md`) instead.\n\n4. As you gather more information or discover new requirements, update the todo list to reflect the current understanding of what needs to be accomplished.\n\n5. Ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and refine the todo list.\n\n6. Include Mermaid diagrams if they help clarify complex workflows or system architecture. Please avoid using double quotes (\"\") and parentheses () inside square brackets ([]) in Mermaid diagrams, as this can cause parsing errors.\n\n7. Use the switch_mode tool to request that the user switch to another mode to implement the solution.\n\n**IMPORTANT: Focus on creating clear, actionable todo lists rather than lengthy markdown documents. Use the todo list as your primary planning tool to track and organize the work that needs to be done.**",
+			"1. Do some information gathering (using provided tools) to get more context about the task.\n\n2. You should also ask the user clarifying questions to get a better understanding of the task.\n\n3. Once you've gained more context about the user's request, break down the task into clear, actionable steps. If the `update_todo_list` tool is available, create a todo list using it. If not, write the plan to a markdown file (e.g., `plan.md` or `todo.md`). Each todo item should be:\n   - Specific and actionable\n   - Listed in logical execution order\n   - Focused on a single, well-defined outcome\n   - Clear enough that another mode could execute it independently\n\n4. As you gather more information or discover new requirements, update your plan to reflect the current understanding of what needs to be accomplished.\n\n5. Ask the user if they are pleased with this plan, or if they would like to make any changes. Think of this as a brainstorming session where you can discuss the task and refine the plan.\n\n6. Include Mermaid diagrams if they help clarify complex workflows or system architecture. Please avoid using double quotes (\"\") and parentheses () inside square brackets ([]) in Mermaid diagrams, as this can cause parsing errors.\n\n7. Use the switch_mode tool to request that the user switch to another mode to implement the solution.\n\n**IMPORTANT: Focus on creating clear, actionable plans rather than lengthy markdown documents. Use your available planning tools to track and organize the work that needs to be done.**",
 	},
 	{
 		slug: "code",

src/core/environment/getEnvironmentDetails.ts

@@ -272,6 +272,6 @@ export async function getEnvironmentDetails(cline: Task, includeFileDetails: boo
 		state && typeof state.apiConfiguration?.todoListEnabled === "boolean"
 			? state.apiConfiguration.todoListEnabled
 			: true
-	const reminderSection = todoListEnabled ? formatReminderSection(cline.todoList) : ""
+	const reminderSection = todoListEnabled ? formatReminderSection(cline.todoList, todoListEnabled) : ""
 	return `<environment_details>\n${details.trim()}\n${reminderSection}\n</environment_details>`
 }

src/core/environment/reminder.ts

@@ -3,9 +3,13 @@ import { TodoItem, TodoStatus } from "@roo-code/types"
 /**
  * Format the reminders section as a markdown block in English, with basic instructions.
  */
-export function formatReminderSection(todoList?: TodoItem[]): string {
+export function formatReminderSection(todoList?: TodoItem[], todoListEnabled: boolean = true): string {
 	if (!todoList || todoList.length === 0) {
-		return "You have not created a todo list yet. Create one with `update_todo_list` if your task is complicated or involves multiple steps."
+		if (todoListEnabled) {
+			return "You have not created a todo list yet. Create one with `update_todo_list` if your task is complicated or involves multiple steps."
+		} else {
+			return "Todo list functionality is disabled for this provider."
+		}
 	}
 	const statusMap: Record<TodoStatus, string> = {
 		pending: "Pending",
@@ -29,10 +33,12 @@ export function formatReminderSection(todoList?: TodoItem[]): string {
 	})
 	lines.push("")
 
-	lines.push(
-		"",
-		"IMPORTANT: When task status changes, remember to call the `update_todo_list` tool to update your progress.",
-		"",
-	)
+	if (todoListEnabled) {
+		lines.push(
+			"",
+			"IMPORTANT: When task status changes, remember to call the `update_todo_list` tool to update your progress.",
+			"",
+		)
+	}
 	return lines.join("\n")
 }

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

@@ -1187,10 +1187,10 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 						<div className="mt-4">
 							<button
 								onClick={() => setIsAdvancedSettingsOpen(!isAdvancedSettingsOpen)}
-								className="flex items-center text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
+								className="flex items-center gap-2 text-xs text-vscode-foreground hover:text-vscode-textLink-foreground focus:outline-none"
 								aria-expanded={isAdvancedSettingsOpen}>
 								<span
-									className={`codicon codicon-${isAdvancedSettingsOpen ? "chevron-down" : "chevron-right"} mr-1`}></span>
+									className={`codicon codicon-${isAdvancedSettingsOpen ? "chevron-down" : "chevron-right"}`}></span>
 								<span className="text-base font-semibold">
 									{t("settings:codeIndex.advancedConfigLabel")}
 								</span>