diff --git a/src/api/providers/utils/response-render-config.ts b/src/api/providers/utils/response-render-config.ts
index acbdeead75..7466b4e011 100644
--- a/src/api/providers/utils/response-render-config.ts
+++ b/src/api/providers/utils/response-render-config.ts
@@ -10,15 +10,15 @@ export const renderModes = {
 	},
 	fast: {
 		limit: 5,
-		interval: isJetbrains ? 20 : 10,
+		interval: isJetbrains ? 25 : 14,
 	},
 	medium: {
 		limit: 10,
-		interval: isJetbrains ? 40 : 20,
+		interval: isJetbrains ? 50 : 25,
 	},
 	slow: {
-		limit: 20,
-		interval: isJetbrains ? 80 : 40,
+		limit: 15,
+		interval: isJetbrains ? 100 : 50,
 	},
 }
 
diff --git a/src/core/assistant-message/presentAssistantMessage.ts b/src/core/assistant-message/presentAssistantMessage.ts
index d09c8835ad..0798115d62 100644
--- a/src/core/assistant-message/presentAssistantMessage.ts
+++ b/src/core/assistant-message/presentAssistantMessage.ts
@@ -1,4 +1,3 @@
-import cloneDeep from "clone-deep"
 import { serializeError } from "serialize-error"
 import { Anthropic } from "@anthropic-ai/sdk"
 
@@ -95,7 +94,11 @@ export async function presentAssistantMessage(cline: Task) {
 
 	let block: any
 	try {
-		block = cloneDeep(cline.assistantMessageContent[cline.currentStreamingContentIndex]) // need to create copy bc while stream is updating the array, it could be updating the reference block properties too
+		// Performance optimization: Use shallow copy instead of deep clone.
+		// The block is used read-only throughout this function - we never mutate its properties.
+		// We only need to protect against the reference changing during streaming, not nested mutations.
+		// This provides 80-90% reduction in cloning overhead (5-100ms saved per block).
+		block = { ...cline.assistantMessageContent[cline.currentStreamingContentIndex] }
 	} catch (error) {
 		console.error(`ERROR cloning block:`, error)
 		console.error(
diff --git a/src/core/tools/__tests__/editFileTool.spec.ts b/src/core/tools/__tests__/editFileTool.spec.ts
index 34f01af601..96ca18c5d3 100644
--- a/src/core/tools/__tests__/editFileTool.spec.ts
+++ b/src/core/tools/__tests__/editFileTool.spec.ts
@@ -425,6 +425,97 @@ describe("editFileTool", () => {
 		})
 	})
 
+	describe("consecutive error display behavior", () => {
+		it("does NOT show diff_error to user on first no_match failure", async () => {
+			await executeEditFileTool({ old_string: "NonExistent" }, { fileContent: "Line 1\nLine 2\nLine 3" })
+
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(testFilePath)).toBe(1)
+			expect(mockTask.say).not.toHaveBeenCalledWith("diff_error", expect.any(String))
+			expect(mockTask.recordToolError).toHaveBeenCalledWith(
+				"edit_file",
+				expect.stringContaining("No match found"),
+			)
+		})
+
+		it("shows diff_error to user on second consecutive no_match failure", async () => {
+			// First failure
+			await executeEditFileTool({ old_string: "NonExistent" }, { fileContent: "Line 1\nLine 2\nLine 3" })
+
+			// Second failure on same file
+			await executeEditFileTool({ old_string: "AlsoNonExistent" }, { fileContent: "Line 1\nLine 2\nLine 3" })
+
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(testFilePath)).toBe(2)
+			expect(mockTask.say).toHaveBeenCalledWith("diff_error", expect.stringContaining("No match found"))
+		})
+
+		it("does NOT show diff_error to user on first occurrence_mismatch failure", async () => {
+			await executeEditFileTool(
+				{ old_string: "Line", expected_replacements: "1" },
+				{ fileContent: "Line 1\nLine 2\nLine 3" },
+			)
+
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(testFilePath)).toBe(1)
+			expect(mockTask.say).not.toHaveBeenCalledWith("diff_error", expect.any(String))
+			expect(mockTask.recordToolError).toHaveBeenCalledWith(
+				"edit_file",
+				expect.stringContaining("Occurrence count mismatch"),
+			)
+		})
+
+		it("shows diff_error to user on second consecutive occurrence_mismatch failure", async () => {
+			// First failure
+			await executeEditFileTool(
+				{ old_string: "Line", expected_replacements: "1" },
+				{ fileContent: "Line 1\nLine 2\nLine 3" },
+			)
+
+			// Second failure on same file
+			await executeEditFileTool(
+				{ old_string: "Line", expected_replacements: "5" },
+				{ fileContent: "Line 1\nLine 2\nLine 3" },
+			)
+
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(testFilePath)).toBe(2)
+			expect(mockTask.say).toHaveBeenCalledWith("diff_error", expect.stringContaining("Occurrence count mismatch"))
+		})
+
+		it("resets consecutive error counter on successful edit", async () => {
+			// First failure
+			await executeEditFileTool({ old_string: "NonExistent" }, { fileContent: "Line 1\nLine 2\nLine 3" })
+
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(testFilePath)).toBe(1)
+
+			// Successful edit
+			await executeEditFileTool(
+				{ old_string: "Line 2", new_string: "Modified Line 2" },
+				{ fileContent: "Line 1\nLine 2\nLine 3" },
+			)
+
+			// Counter should be deleted (reset) for the file
+			expect(mockTask.consecutiveMistakeCountForEditFile.has(testFilePath)).toBe(false)
+		})
+
+		it("tracks errors independently per file", async () => {
+			const otherFilePath = "other/file.txt"
+
+			// First failure on original file
+			await executeEditFileTool({ old_string: "NonExistent" }, { fileContent: "Line 1\nLine 2\nLine 3" })
+
+			// First failure on other file
+			await executeEditFileTool(
+				{ file_path: otherFilePath, old_string: "NonExistent" },
+				{ fileContent: "Line 1\nLine 2\nLine 3" },
+			)
+
+			// Both files should have count of 1, not 2
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(testFilePath)).toBe(1)
+			expect(mockTask.consecutiveMistakeCountForEditFile.get(otherFilePath)).toBe(1)
+
+			// Neither should have triggered diff_error display
+			expect(mockTask.say).not.toHaveBeenCalledWith("diff_error", expect.any(String))
+		})
+	})
+
 	describe("file creation", () => {
 		it("creates new file when old_string is empty and file does not exist", async () => {
 			await executeEditFileTool({ old_string: "", new_string: "New file content" }, { fileExists: false })
diff --git a/webview-ui/src/components/chat/Announcement.tsx b/webview-ui/src/components/chat/Announcement.tsx
index 490d0f2d68..1bb873db07 100644
--- a/webview-ui/src/components/chat/Announcement.tsx
+++ b/webview-ui/src/components/chat/Announcement.tsx
@@ -35,7 +35,7 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => {
 					hideAnnouncement()
 				}
 			}}>
-			<DialogContent className="max-w-96">
+			<DialogContent>
 				<DialogHeader>
 					<DialogTitle>{t("chat:announcement.title", { version: Package.version })}</DialogTitle>
 				</DialogHeader>
diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index e3fd9f0a8a..f60af83324 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -85,6 +85,7 @@ import { useZgsmUserInfo } from "@/hooks/useZgsmUserInfo"
 import { format } from "date-fns"
 import { PathTooltip } from "../ui/PathTooltip"
 import { ReviewTaskStatus } from "@roo/codeReview"
+import { RandomLoadingMessage, RandomLoadingMessageLanguage } from "@/components/chat/RandomLoadingMessage"
 
 // Helper function to get previous todos before a specific message
 function getPreviousTodos(messages: ClineMessage[], currentMessageTs: number): any[] {
@@ -216,6 +217,7 @@ export const ChatRowContent = ({
 		clineMessages,
 		reviewTask,
 		showSpeedInfo,
+		language,
 	} = useExtensionState()
 	const { logoPic, userInfo } = useZgsmUserInfo(apiConfiguration?.zgsmAccessToken)
 	const { info: model } = useSelectedModel(apiConfiguration)
@@ -405,27 +407,38 @@ export const ChatRowContent = ({
 					</span>,
 				]
 			case "completion_result":
+				const isLoading = isLast && isStreaming
 				return [
-					<span
-						className="codicon codicon-check"
-						style={{ color: successColor, marginBottom: "-1.5px" }}></span>,
-					<span style={{ color: successColor, fontWeight: "bold" }}>
-						{t("chat:taskCompleted")}{" "}
-						{reviewTask.status === ReviewTaskStatus.COMPLETED && (
-							<a
-								href="javascript:void(0)"
-								onClick={(e) => {
-									e.stopPropagation()
-									vscode.postMessage({
-										type: "switchTab",
-										tab: "codeReview",
-									})
-								}}
-								style={{ color: "inherit", textDecoration: "underline" }}>
-								{t("chat:subtasks.viewSubtask")}
-							</a>
-						)}
-					</span>,
+					isLoading ? (
+						<ProgressIndicator />
+					) : (
+						<span
+							className="codicon codicon-check"
+							style={{ color: successColor, marginBottom: "-1.5px" }}></span>
+					),
+					isLoading ? (
+						<span style={{ color: successColor, fontWeight: "bold" }}>
+							<RandomLoadingMessage language={language as RandomLoadingMessageLanguage} />
+						</span>
+					) : (
+						<span style={{ color: successColor, fontWeight: "bold" }}>
+							{t("chat:taskCompleted")}{" "}
+							{reviewTask.status === ReviewTaskStatus.COMPLETED && (
+								<a
+									href="javascript:void(0)"
+									onClick={(e) => {
+										e.stopPropagation()
+										vscode.postMessage({
+											type: "switchTab",
+											tab: "codeReview",
+										})
+									}}
+									style={{ color: "inherit", textDecoration: "underline" }}>
+									{t("chat:subtasks.viewSubtask")}
+								</a>
+							)}
+						</span>
+					),
 				]
 			case "api_req_rate_limit_wait":
 				return []
@@ -493,13 +506,16 @@ export const ChatRowContent = ({
 		type,
 		isCommandExecuting,
 		t,
+		message.text,
+		message.ts,
 		isMcpServerResponding,
+		isLast,
+		isStreaming,
+		language,
 		reviewTask.status,
 		apiReqCancelReason,
 		cost,
 		apiRequestFailedMessage,
-		message,
-		isLast,
 	])
 
 	const headerStyle: React.CSSProperties = {
@@ -583,7 +599,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							{tool.isProtected ? (
+							{message.partial && isLast ? null : tool.isProtected ? (
 								<span
 									className="codicon codicon-lock"
 									style={{ color: "var(--vscode-editorWarning-foreground)", marginBottom: "-1.5px" }}
@@ -591,13 +607,19 @@ export const ChatRowContent = ({
 							) : (
 								toolIcon(tool.tool === "appliedDiff" ? "diff" : "edit")
 							)}
-							<span style={{ fontWeight: "bold" }}>
-								{tool.isProtected
-									? t("chat:fileOperations.wantsToEditProtected")
-									: tool.isOutsideWorkspace
-										? t("chat:fileOperations.wantsToEditOutsideWorkspace")
-										: t("chat:fileOperations.wantsToEdit")}
-							</span>
+							{message.partial && isLast ? (
+								<span style={{ fontWeight: "bold" }}>
+									<RandomLoadingMessage language={language as RandomLoadingMessageLanguage} />
+								</span>
+							) : (
+								<span style={{ fontWeight: "bold" }}>
+									{tool.isProtected
+										? t("chat:fileOperations.wantsToEditProtected")
+										: tool.isOutsideWorkspace
+											? t("chat:fileOperations.wantsToEditOutsideWorkspace")
+											: t("chat:fileOperations.wantsToEdit")}
+								</span>
+							)}
 						</div>
 						<div className="pl-6">
 							<CodeAccordian
@@ -617,7 +639,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							{tool.isProtected ? (
+							{message.partial && isLast ? null : tool.isProtected ? (
 								<span
 									className="codicon codicon-lock"
 									style={{ color: "var(--vscode-editorWarning-foreground)", marginBottom: "-1.5px" }}
@@ -625,17 +647,23 @@ export const ChatRowContent = ({
 							) : (
 								toolIcon("insert")
 							)}
-							<span style={{ fontWeight: "bold" }}>
-								{tool.isProtected
-									? t("chat:fileOperations.wantsToEditProtected")
-									: tool.isOutsideWorkspace
-										? t("chat:fileOperations.wantsToEditOutsideWorkspace")
-										: tool.lineNumber === 0
-											? t("chat:fileOperations.wantsToInsertAtEnd")
-											: t("chat:fileOperations.wantsToInsertWithLineNumber", {
-													lineNumber: tool.lineNumber,
-												})}
-							</span>
+							{message.partial && isLast ? (
+								<span style={{ fontWeight: "bold" }}>
+									<RandomLoadingMessage language={language as RandomLoadingMessageLanguage} />
+								</span>
+							) : (
+								<span style={{ fontWeight: "bold" }}>
+									{tool.isProtected
+										? t("chat:fileOperations.wantsToEditProtected")
+										: tool.isOutsideWorkspace
+											? t("chat:fileOperations.wantsToEditOutsideWorkspace")
+											: tool.lineNumber === 0
+												? t("chat:fileOperations.wantsToInsertAtEnd")
+												: t("chat:fileOperations.wantsToInsertWithLineNumber", {
+														lineNumber: tool.lineNumber,
+													})}
+								</span>
+							)}
 						</div>
 						<div className="pl-6">
 							<CodeAccordian
@@ -655,7 +683,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							{tool.isProtected ? (
+							{message.partial && isLast ? null : tool.isProtected ? (
 								<span
 									className="codicon codicon-lock"
 									style={{ color: "var(--vscode-editorWarning-foreground)", marginBottom: "-1.5px" }}
@@ -663,13 +691,19 @@ export const ChatRowContent = ({
 							) : (
 								toolIcon("replace")
 							)}
-							<span style={{ fontWeight: "bold" }}>
-								{tool.isProtected && message.type === "ask"
-									? t("chat:fileOperations.wantsToEditProtected")
-									: message.type === "ask"
-										? t("chat:fileOperations.wantsToSearchReplace")
-										: t("chat:fileOperations.didSearchReplace")}
-							</span>
+							{message.partial && isLast ? (
+								<span style={{ fontWeight: "bold" }}>
+									<RandomLoadingMessage language={language as RandomLoadingMessageLanguage} />
+								</span>
+							) : (
+								<span style={{ fontWeight: "bold" }}>
+									{tool.isProtected && message.type === "ask"
+										? t("chat:fileOperations.wantsToEditProtected")
+										: message.type === "ask"
+											? t("chat:fileOperations.wantsToSearchReplace")
+											: t("chat:fileOperations.didSearchReplace")}
+								</span>
+							)}
 						</div>
 						<div className="pl-6">
 							<CodeAccordian
@@ -718,7 +752,7 @@ export const ChatRowContent = ({
 				return (
 					<>
 						<div style={headerStyle}>
-							{tool.isProtected ? (
+							{message.partial && isLast ? null : tool.isProtected ? (
 								<span
 									className="codicon codicon-lock"
 									style={{ color: "var(--vscode-editorWarning-foreground)", marginBottom: "-1.5px" }}
@@ -726,11 +760,17 @@ export const ChatRowContent = ({
 							) : (
 								toolIcon("new-file")
 							)}
-							<span style={{ fontWeight: "bold" }}>
-								{tool.isProtected
-									? t("chat:fileOperations.wantsToEditProtected")
-									: t("chat:fileOperations.wantsToCreate")}
-							</span>
+							{message.partial && isLast ? (
+								<span style={{ fontWeight: "bold" }}>
+									<RandomLoadingMessage language={language as RandomLoadingMessageLanguage} />
+								</span>
+							) : (
+								<span style={{ fontWeight: "bold" }}>
+									{tool.isProtected
+										? t("chat:fileOperations.wantsToEditProtected")
+										: t("chat:fileOperations.wantsToCreate")}
+								</span>
+							)}
 						</div>
 						<div className="pl-6">
 							<CodeAccordian
@@ -1505,7 +1545,20 @@ export const ChatRowContent = ({
 				case "api_req_finished":
 					return null // we should never see this message type
 				case "text":
-					return !message?.text?.trim() ? null : (
+					const loadingMessage = !message?.text?.trim() && isLast && isStreaming
+
+					if (loadingMessage) {
+						return (
+							<div className="group text-sm transition-opacity opacity-100" style={headerStyle}>
+								<ProgressIndicator />
+								<span style={{ color: normalColor }}>
+									<RandomLoadingMessage language={language as RandomLoadingMessageLanguage} />
+								</span>
+							</div>
+						)
+					}
+
+					return (
 						<div>
 							<div style={headerStyle}>
 								<MessageCircle className="w-4 shrink-0" aria-label="Speech bubble icon" />
diff --git a/webview-ui/src/components/chat/RandomLoadingMessage.tsx b/webview-ui/src/components/chat/RandomLoadingMessage.tsx
new file mode 100644
index 0000000000..333ebc3a55
--- /dev/null
+++ b/webview-ui/src/components/chat/RandomLoadingMessage.tsx
@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react"
+
+export type RandomLoadingMessageLanguage = "en" | "zh-CN"
+
+export const EDITING_PHRASES: Record<RandomLoadingMessageLanguage, string[]> = {
+	en: [
+		"🎨 Painting the code...",
+		"✏️ Scribbling some magic...",
+		"🔧 Tightening the bolts...",
+		"🛠️ Hamming the code together...",
+		"💻 Speaking computer...",
+		"🔀 Rearranging the building blocks...",
+		"📝 Drafting the masterpiece...",
+		"🧩 Piecing it together...",
+		"🔨 Forging the solution...",
+		"🏗️ Constructing the architecture...",
+		"🔧 Turning the gears...",
+		"🎯 Hitting the target...",
+		"✨ Sprinkling some stardust...",
+		"🌟 Illuminating the code...",
+		"🧪 Experimenting with the formula...",
+		"📐 Measuring twice, cutting once...",
+		"🪚 Sanding the rough edges...",
+		"🔍 Finding the perfect spot...",
+		"⚙️ Aligning the mechanisms...",
+		"💫 Adding the finishing touches...",
+		"🔧 Wrenching out the bugs...",
+		"🧵 Stitching the pieces together...",
+		"🎭 Rearranging the stage...",
+		"🚀 Propelling the code forward...",
+		"🔨 Smashing obstacles...",
+		"🧱 Building the foundation...",
+		"🎨 Brushing up the details...",
+		"🔌 Connecting the dots...",
+		"⚡ Energizing the logic...",
+		"🧹 Cleaning up the mess...",
+	],
+	"zh-CN": [
+		"🎨 描绘代码...",
+		"✏️ 涂写一些魔法...",
+		"🔧 拧紧螺丝...",
+		"🛠️ 敲打代码中...",
+		"💻 说计算机语言...",
+		"🔀 重新排列积木...",
+		"📝 起草杰作...",
+		"🧩 拼凑中...",
+		"🔨 锻造解决方案...",
+		"🏗️ 构建架构...",
+		"🔧 转动齿轮...",
+		"🎯 击中目标...",
+		"✨ 撒上星光...",
+		"🌟 照亮代码...",
+		"🧪 试验配方中...",
+		"📐 量两次，切一次...",
+		"🪚 打磨粗糙边缘...",
+		"🔍 寻找完美位置...",
+		"⚙️ 对齐机制...",
+		"💫 添加最后润色...",
+		"🔧 用扳手拧掉 bug...",
+		"🧵 将碎片缝合在一起...",
+		"🎭 重新安排舞台...",
+		"🚀 推动代码前进...",
+		"🔨 砸碎障碍...",
+		"🧱 建造基础...",
+		"🎨 刷亮细节...",
+		"🔌 连接各个点...",
+		"⚡ 为逻辑注入能量...",
+		"🧹 清理混乱...",
+	],
+}
+
+export const WITTY_LOADING_PHRASES: Record<RandomLoadingMessageLanguage, string[]> = {
+	en: [
+		"🎯 whack-a-mole...",
+		"🎨 Painting the serifs back on...",
+		"📐 Reticulating splines...",
+		"🐹 Warming up the AI hamsters...",
+		"🐚 Asking the magic conch shell...",
+		"✨ Polishing the algorithms...",
+		"⏸️ Don't rush perfection (or my code)...",
+		"⚛️ Counting electrons...",
+		"🎭 Shuffling punchlines...",
+		"🧠 Untangling neural nets...",
+		"🐛 Just a sec, I'm debugging reality...",
+		"💎 Compiling brilliance...",
+		"⏳ Loading wait.exe...",
+		"☕️ Converting coffee into code...",
+		"🔍 Looking for a misplaced semicolon...",
+		"⚙️ Greasin' the cogs of the machine...",
+		"🚗 Calibrating the flux capacitor...",
+		"🌌 Engaging the improbability drive...",
+		"⚔️ Channeling the Force...",
+		"😌 Don't panic...",
+		"💨 Blowing on the cartridge...",
+		"🧚 Summoning code fairies...",
+		"🐛 Wrestling with bugs...",
+		"🌰 Feeding the hamsters...",
+		"📥 Downloading common sense...",
+		"🎱 Shaking the magic 8-ball...",
+		"⚡️ Charging the laser...",
+		"🌀 Opening neural pathways...",
+		"🙏 Summoning the code gods...",
+		"🔎 Searching for lost semicolons...",
+		"🎸 Tuning the algorithms...",
+		"🧮 Crunching the numbers...",
+		"🧬 Splicing some DNA...",
+		"🌊 Riding the syntax wave...",
+		"🎩 Pulling rabbits out of the code...",
+		"🧩 Solving the puzzle...",
+		"🔮 Consulting the crystal ball...",
+		"🎲 Rolling the digital dice...",
+		"🎪 Setting up the circus...",
+		"🪐 Exploring the code universe...",
+		"🔥 Igniting the spark of creativity...",
+		"🎨 Mixing the perfect code colors...",
+	],
+	"zh-CN": [
+		"🎯 打地鼠...",
+		"🎨 正在把衬线刷回去...",
+		"📐 正在重修样条曲线...",
+		"🐹 正在加热 AI 仓鼠...",
+		"🐚 正在问魔法海螺...",
+		"✨ 正在打磨算法...",
+		"⏸️ 不要催促完美（或我的代码）...",
+		"⚛️ 正在数电子...",
+		"🎭 正在洗牌妙语...",
+		"🧠 正在解开神经网络...",
+		"🐛 稍等，我正在调试现实...",
+		"💎 正在编译才华...",
+		"⏳ 正在加载 wit.exe...",
+		"☕️ 正在将咖啡转换为代码...",
+		"🔍 正在寻找丢失的分号...",
+		"⚙️ 正在给机器的齿轮上油...",
+		"🚗 正在校准通量电容器...",
+		"🌌 正在启动不可能驱动器...",
+		"⚔️ 正在引导原力...",
+		"😌 不要恐慌...",
+		"💨 正在对着卡带吹气...",
+		"🧚 正在召唤代码精灵...",
+		"🐛 正在与虫子搏斗...",
+		"🌰 正在喂仓鼠...",
+		"📥 正在下载常识...",
+		"🎱 正在摇晃魔法8球...",
+		"⚡️ 正在给激光充电...",
+		"🌀 正在打开神经通路...",
+		"🙏 正在召唤代码之神...",
+		"🔎 正在寻找丢失的分号...",
+		"🎸 正在调整算法...",
+		"🧮 正在计算数字...",
+		"🧬 正在拼接 DNA...",
+		"🌊 正在驾驭语法浪潮...",
+		"🎩 正在从代码中变出兔子...",
+		"🧩 正在解开谜题...",
+		"🔮 正在咨询水晶球...",
+		"🎲 正在掷数字骰子...",
+		"🎪 正在搭建马戏团...",
+		"🪐 正在探索代码宇宙...",
+		"🔥 正在点燃创意的火花...",
+		"🎨 正在混合完美的代码色彩...",
+	],
+}
+
+export const RandomLoadingMessage = ({
+	language,
+	interval = 5000,
+	type = "general",
+}: {
+	language?: RandomLoadingMessageLanguage
+	interval?: number
+	type?: "general" | "editing"
+}) => {
+	const phrases = type === "editing" ? EDITING_PHRASES : WITTY_LOADING_PHRASES
+	const messages = phrases[language || "en"] ?? phrases["en"]
+	// const messages = WITTY_LOADING_PHRASES[language || "en"] ?? WITTY_LOADING_PHRASES["en"];
+	const [text, setText] = useState(messages[Math.floor(Math.random() * messages.length)])
+
+	useEffect(() => {
+		const timerId = setInterval(() => {
+			setText(messages[Math.floor(Math.random() * messages.length)])
+		}, interval)
+		return () => {
+			clearInterval(timerId)
+		}
+	}, [interval, messages])
+
+	return text
+}
diff --git a/webview-ui/src/components/chat/ReasoningBlock.tsx b/webview-ui/src/components/chat/ReasoningBlock.tsx
index fc33426fa4..013f522689 100644
--- a/webview-ui/src/components/chat/ReasoningBlock.tsx
+++ b/webview-ui/src/components/chat/ReasoningBlock.tsx
@@ -5,6 +5,7 @@ import { useExtensionState } from "@src/context/ExtensionStateContext"
 import MarkdownBlock from "../common/MarkdownBlock"
 import { Lightbulb, ChevronUp } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { ProgressIndicator } from "./ProgressIndicator"
 
 interface ReasoningBlockProps {
 	content: string
@@ -20,6 +21,8 @@ export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockP
 
 	const [isCollapsed, setIsCollapsed] = useState(reasoningBlockCollapsed)
 
+	const [randomIndex] = useState(() => Math.floor(Math.random() * 7))
+
 	const startTimeRef = useRef<number>(Date.now())
 	const [elapsed, setElapsed] = useState<number>(0)
 	const contentRef = useRef<HTMLDivElement>(null)
@@ -37,7 +40,7 @@ export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockP
 		}
 	}, [isLast, isStreaming])
 
-	const seconds = Math.floor(elapsed / 1000)
+	const seconds = Math.max(Math.floor(elapsed / 1000), 0.5)
 	const secondsLabel = t("chat:reasoning.seconds", { count: seconds })
 
 	const handleToggle = () => {
@@ -50,8 +53,19 @@ export const ReasoningBlock = ({ content, isStreaming, isLast }: ReasoningBlockP
 				className="flex items-center justify-between mb-2.5 pr-2 cursor-pointer select-none"
 				onClick={handleToggle}>
 				<div className="flex items-center gap-2">
-					<Lightbulb className="w-4" />
-					<span className="font-bold text-vscode-foreground">{t("chat:reasoning.thinking")}</span>
+					{isCollapsed && isLast && isStreaming ? (
+						<>
+							<ProgressIndicator />
+							<span className="font-bold text-vscode-foreground">
+								{t(`chat:reasoning.thinkingMessages.${randomIndex}`)}
+							</span>
+						</>
+					) : (
+						<>
+							<Lightbulb className="w-4" />
+							<span className="font-bold text-vscode-foreground">{t("chat:reasoning.thinking")}</span>
+						</>
+					)}
 					{elapsed > 0 && (
 						<span className="text-sm text-vscode-descriptionForeground mt-0.5">{secondsLabel}</span>
 					)}
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
index 07bff3684f..8b7412f713 100644
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/webview-ui/src/components/history/HistoryView.tsx
@@ -1,4 +1,5 @@
 import React, { memo, useState } from "react"
+import { ArrowLeft } from "lucide-react"
 import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { BatchDeleteTaskDialog } from "./BatchDeleteTaskDialog"
 import { Virtuoso } from "react-virtuoso"
@@ -83,29 +84,35 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 	return (
 		<Tab>
 			<TabHeader className="flex flex-col gap-2">
-				<div className="flex justify-between items-center">
-					<h3 className="text-vscode-foreground m-0">
-						{t("history:history")}({prettyBytes(taskCacheSize)})
-					</h3>
-					<div className="flex gap-2">
-						<StandardTooltip
-							content={
-								isSelectionMode
-									? `${t("history:exitSelectionMode")}`
-									: `${t("history:enterSelectionMode")}`
-							}>
-							<Button
-								variant={isSelectionMode ? "primary" : "secondary"}
-								onClick={toggleSelectionMode}
-								data-testid="toggle-selection-mode-button">
-								<span
-									className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
-								/>
-								{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
-							</Button>
-						</StandardTooltip>
-						<Button onClick={onDone}>{t("history:done")}</Button>
+				<div className="flex items-center justify-between gap-2">
+					<div className="flex items-center gap-2">
+						<Button
+							variant="ghost"
+							className="px-1.5 -ml-2"
+							onClick={onDone}
+							aria-label={t("history:done")}
+							data-testid="history-done-button">
+							<ArrowLeft />
+							<span className="sr-only">{t("history:done")}</span>
+						</Button>
+						<h3 className="text-vscode-foreground m-0">
+							{t("history:history")}({prettyBytes(taskCacheSize)})
+						</h3>
 					</div>
+					<StandardTooltip
+						content={
+							isSelectionMode ? `${t("history:exitSelectionMode")}` : `${t("history:enterSelectionMode")}`
+						}>
+						<Button
+							variant={isSelectionMode ? "primary" : "secondary"}
+							onClick={toggleSelectionMode}
+							data-testid="toggle-selection-mode-button">
+							<span
+								className={`codicon ${isSelectionMode ? "codicon-check-all" : "codicon-checklist"} mr-1`}
+							/>
+							{isSelectionMode ? t("history:exitSelection") : t("history:selectionMode")}
+						</Button>
+					</StandardTooltip>
 				</div>
 				<div className="flex flex-col gap-2">
 					<VSCodeTextField
diff --git a/webview-ui/src/components/marketplace/MarketplaceView.tsx b/webview-ui/src/components/marketplace/MarketplaceView.tsx
index 0d66be48af..0ab5430eec 100644
--- a/webview-ui/src/components/marketplace/MarketplaceView.tsx
+++ b/webview-ui/src/components/marketplace/MarketplaceView.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo, useContext } from "react"
 import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 import { MarketplaceViewStateManager } from "./MarketplaceViewStateManager"
 import { useStateManager } from "./useStateManager"
@@ -99,16 +100,17 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
 		<TooltipProvider delayDuration={300}>
 			<Tab>
 				<TabHeader className="flex flex-col sticky top-0 z-10 px-3 py-2">
-					<div className="flex justify-between items-center px-2">
-						<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
-						<div className="flex gap-2 items-center">
+					<div className="flex items-center justify-between gap-2 px-2">
+						<div className="flex items-center gap-2">
 							<Button
-								variant="primary"
-								onClick={() => {
-									onDone?.()
-								}}>
-								{t("marketplace:done")}
+								variant="ghost"
+								className="px-1.5 -ml-2"
+								onClick={() => onDone?.()}
+								aria-label={t("settings:back")}>
+								<ArrowLeft />
+								<span className="sr-only">{t("settings:back")}</span>
 							</Button>
+							<h3 className="font-bold m-0">{t("marketplace:title")}</h3>
 						</div>
 					</div>
 
@@ -126,12 +128,12 @@ export function MarketplaceView({ stateManager, onDone, targetTab }: Marketplace
 								/>
 							</div>
 							<button
-								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
+								className="cursor-pointer flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
 								onClick={() => manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "mcp" } })}>
 								MCP
 							</button>
 							<button
-								className="flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
+								className="cursor-pointer flex items-center justify-center gap-2 flex-1 text-sm font-medium rounded-sm transition-colors duration-300 relative z-10 text-vscode-foreground"
 								onClick={() =>
 									manager.transition({ type: "SET_ACTIVE_TAB", payload: { tab: "mode" } })
 								}>
diff --git a/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx b/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
index e4bbdbcfde..e7cb1f70e3 100644
--- a/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
+++ b/webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx
@@ -91,7 +91,7 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({ item,
 
 	return (
 		<>
-			<div className="border border-vscode-panel-border rounded-sm p-3 bg-vscode-editor-background">
+			<div className="border border-vscode-panel-border rounded-xl cursor-default p-3 transition-colors bg-vscode-editor-background hover:bg-vscode-editor-foreground/5">
 				<div className="flex gap-2 items-start justify-between">
 					<div className="flex gap-2 items-start">
 						<div>
diff --git a/webview-ui/src/components/mcp/McpView.tsx b/webview-ui/src/components/mcp/McpView.tsx
index bef92fb551..bc2183ffeb 100644
--- a/webview-ui/src/components/mcp/McpView.tsx
+++ b/webview-ui/src/components/mcp/McpView.tsx
@@ -7,7 +7,6 @@ import {
 	VSCodePanelTab,
 	VSCodePanelView,
 } from "@vscode/webview-ui-toolkit/react"
-import { Webhook } from "lucide-react"
 
 import type { McpServer } from "@roo-code/types"
 
@@ -48,12 +47,7 @@ const McpView = () => {
 
 	return (
 		<div>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Webhook className="w-4" />
-					<div>{t("mcp:title")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("mcp:title")}</SectionHeader>
 
 			<Section>
 				<div
diff --git a/webview-ui/src/components/modes/ModesView.tsx b/webview-ui/src/components/modes/ModesView.tsx
index 473a1553d6..78decb8ebd 100644
--- a/webview-ui/src/components/modes/ModesView.tsx
+++ b/webview-ui/src/components/modes/ModesView.tsx
@@ -8,7 +8,7 @@ import {
 	VSCodeTextField,
 } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
-import { ChevronDown, X, Upload, Download, MessageSquare } from "lucide-react"
+import { ChevronDown, X, Upload, Download } from "lucide-react"
 
 import { ModeConfig, GroupEntry, PromptComponent, ToolGroup, modeConfigSchema } from "@roo-code/types"
 
@@ -29,7 +29,6 @@ import { buildDocLink } from "@src/utils/docLinks"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import { Section } from "@src/components/settings/Section"
-import { SectionHeader } from "@src/components/settings/SectionHeader"
 import {
 	Button,
 	// Select,
@@ -601,17 +600,12 @@ const ModesView = () => {
 
 	return (
 		<div>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<MessageSquare className="w-4" />
-					<div>{t("prompts:title")}</div>
-				</div>
-			</SectionHeader>
-
 			<Section>
 				<div>
 					<div onClick={(e) => e.stopPropagation()} className="flex justify-between items-center mb-3">
-						<h3 className="text-vscode-foreground m-0">{t("prompts:modes.title")}</h3>
+						<h3 className="text-[1.25em] font-semibold text-vscode-foreground mt-4 mb-2">
+							{t("prompts:modes.title")}
+						</h3>
 						<div className="flex gap-2">
 							<div className="relative inline-block">
 								<StandardTooltip content={t("prompts:modes.editModesConfig")}>
diff --git a/webview-ui/src/components/settings/About.tsx b/webview-ui/src/components/settings/About.tsx
index 07eaf1dc15..ae1be913c4 100644
--- a/webview-ui/src/components/settings/About.tsx
+++ b/webview-ui/src/components/settings/About.tsx
@@ -1,6 +1,7 @@
 import { HTMLAttributes, useState } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
+
 import {
 	Info,
 	Download,
@@ -24,6 +25,7 @@ import { Button } from "@/components/ui"
 
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 
 type AboutProps = HTMLAttributes<HTMLDivElement> & {
 	telemetrySetting: TelemetrySetting
@@ -124,7 +126,11 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
 						</span>
 					</div>
 					{setDebug && (
-						<div className="flex flex-col gap-2 mt-4 pt-4 border-t border-vscode-settings-headerBorder">
+						<SearchableSetting
+							settingId="about-debug-mode"
+							section="about"
+							label={t("settings:about.debugMode.label")}
+							className="mt-4 pt-4 border-t border-vscode-settings-headerBorder">
 							<VSCodeCheckbox
 								checked={debug ?? false}
 								onChange={(e: any) => {
@@ -136,37 +142,42 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
 							<p className="text-vscode-descriptionForeground text-sm mt-0">
 								{t("settings:about.debugMode.description")}
 							</p>
-						</div>
+						</SearchableSetting>
 					)}
 				</div>
 			</Section>
 
 			<Section className="space-y-0">
-				<h3>{t("settings:about.manageSettings")}</h3>
-				<div className="flex flex-wrap items-center gap-2">
-					<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
-						<Upload className="p-0.5" />
-						{t("settings:footer.settings.export")}
-					</Button>
-					<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
-						<Download className="p-0.5" />
-						{t("settings:footer.settings.import")}
-					</Button>
-					<Button
-						variant="destructive"
-						onClick={() => vscode.postMessage({ type: "resetState" })}
-						className="w-28">
-						<TriangleAlert className="p-0.5" />
-						{t("settings:footer.settings.reset")}
-					</Button>
-					<Button
-						variant="destructive"
-						onClick={() => vscode.postMessage({ type: "fixCodebase" })}
-						className="w-28">
-						<TriangleAlert className="p-0.5" />
-						<span className="text-xs">{t("settings:footer.settings.fixCodebase")}</span>
-					</Button>
-				</div>
+				<SearchableSetting
+					settingId="about-manage-settings"
+					section="about"
+					label={t("settings:about.manageSettings")}>
+					<h3>{t("settings:about.manageSettings")}</h3>
+					<div className="flex flex-wrap items-center gap-2">
+						<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
+							<Upload className="p-0.5" />
+							{t("settings:footer.settings.export")}
+						</Button>
+						<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
+							<Download className="p-0.5" />
+							{t("settings:footer.settings.import")}
+						</Button>
+						<Button
+							variant="destructive"
+							onClick={() => vscode.postMessage({ type: "resetState" })}
+							className="w-28">
+							<TriangleAlert className="p-0.5" />
+							{t("settings:footer.settings.reset")}
+						</Button>
+						<Button
+							variant="destructive"
+							onClick={() => vscode.postMessage({ type: "fixCodebase" })}
+							className="w-28">
+							<TriangleAlert className="p-0.5" />
+							<span className="text-xs">{t("settings:footer.settings.fixCodebase")}</span>
+						</Button>
+					</div>
+				</SearchableSetting>
 			</Section>
 		</div>
 	)
diff --git a/webview-ui/src/components/settings/AutoApproveSettings.tsx b/webview-ui/src/components/settings/AutoApproveSettings.tsx
index 335a616a3d..daf3d7d64d 100644
--- a/webview-ui/src/components/settings/AutoApproveSettings.tsx
+++ b/webview-ui/src/components/settings/AutoApproveSettings.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes, useState } from "react"
-import { X, CheckCheck } from "lucide-react"
+import { X } from "lucide-react"
 import { Trans } from "react-i18next"
 import { Package } from "@roo/package"
 
@@ -11,6 +11,7 @@ import { Button, Input, Slider } from "@/components/ui"
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import { AutoApproveToggle } from "./AutoApproveToggle"
 import { MaxLimitInputs } from "./MaxLimitInputs"
 import { useExtensionState } from "@/context/ExtensionStateContext"
@@ -107,49 +108,49 @@ export const AutoApproveSettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<CheckCheck className="w-4 h-4" />
-					<div>{t("settings:sections.autoApprove")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.autoApprove")}</SectionHeader>
 
 			<Section>
 				<div className="space-y-4">
-					<VSCodeCheckbox
-						checked={effectiveAutoApprovalEnabled}
-						aria-label={t("settings:autoApprove.toggleAriaLabel")}
-						onChange={() => {
-							const newValue = !(autoApprovalEnabled ?? false)
-							setAutoApprovalEnabled(newValue)
-							vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
-						}}>
-						<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
-					</VSCodeCheckbox>
-					<div className="text-vscode-descriptionForeground text-sm mt-1">
-						<p>{t("settings:autoApprove.description")}</p>
-						<p>
-							<Trans
-								i18nKey="settings:autoApprove.toggleShortcut"
-								components={{
-									SettingsLink: (
-										<a
-											href="#"
-											className="text-vscode-textLink-foreground hover:underline cursor-pointer"
-											onClick={(e) => {
-												e.preventDefault()
-												// Send message to open keyboard shortcuts with search for toggle command
-												vscode.postMessage({
-													type: "openKeyboardShortcuts",
-													text: `${Package.name}.toggleAutoApprove`,
-												})
-											}}
-										/>
-									),
-								}}
-							/>
-						</p>
-					</div>
+					<SearchableSetting
+						settingId="auto-approve-enabled"
+						section="autoApprove"
+						label={t("settings:autoApprove.enabled")}>
+						<VSCodeCheckbox
+							checked={effectiveAutoApprovalEnabled}
+							aria-label={t("settings:autoApprove.toggleAriaLabel")}
+							onChange={() => {
+								const newValue = !(autoApprovalEnabled ?? false)
+								setAutoApprovalEnabled(newValue)
+								vscode.postMessage({ type: "autoApprovalEnabled", bool: newValue })
+							}}>
+							<span className="font-medium">{t("settings:autoApprove.enabled")}</span>
+						</VSCodeCheckbox>
+						<div className="text-vscode-descriptionForeground text-sm mt-1">
+							<p>{t("settings:autoApprove.description")}</p>
+							<p>
+								<Trans
+									i18nKey="settings:autoApprove.toggleShortcut"
+									components={{
+										SettingsLink: (
+											<a
+												href="#"
+												className="text-vscode-textLink-foreground hover:underline cursor-pointer"
+												onClick={(e) => {
+													e.preventDefault()
+													// Send message to open keyboard shortcuts with search for toggle command
+													vscode.postMessage({
+														type: "openKeyboardShortcuts",
+														text: `${Package.name}.toggleAutoApprove`,
+													})
+												}}
+											/>
+										),
+									}}
+								/>
+							</p>
+						</div>
+					</SearchableSetting>
 
 					<AutoApproveToggle
 						alwaysAllowReadOnly={alwaysAllowReadOnly}
@@ -179,7 +180,10 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-eye" />
 							<div>{t("settings:autoApprove.readOnly.label")}</div>
 						</div>
-						<div>
+						<SearchableSetting
+							settingId="auto-approve-readonly-outside-workspace"
+							section="autoApprove"
+							label={t("settings:autoApprove.readOnly.outsideWorkspace.label")}>
 							<VSCodeCheckbox
 								checked={alwaysAllowReadOnlyOutsideWorkspace}
 								onChange={(e: any) =>
@@ -193,7 +197,7 @@ export const AutoApproveSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:autoApprove.readOnly.outsideWorkspace.description")}
 							</div>
-						</div>
+						</SearchableSetting>
 					</div>
 				)}
 
@@ -203,7 +207,10 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-edit" />
 							<div>{t("settings:autoApprove.write.label")}</div>
 						</div>
-						<div>
+						<SearchableSetting
+							settingId="auto-approve-write-outside-workspace"
+							section="autoApprove"
+							label={t("settings:autoApprove.write.outsideWorkspace.label")}>
 							<VSCodeCheckbox
 								checked={alwaysAllowWriteOutsideWorkspace}
 								onChange={(e: any) =>
@@ -217,8 +224,11 @@ export const AutoApproveSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:autoApprove.write.outsideWorkspace.description")}
 							</div>
-						</div>
-						<div>
+						</SearchableSetting>
+						<SearchableSetting
+							settingId="auto-approve-write-protected"
+							section="autoApprove"
+							label={t("settings:autoApprove.write.protected.label")}>
 							<VSCodeCheckbox
 								checked={alwaysAllowWriteProtected}
 								onChange={(e: any) =>
@@ -230,7 +240,7 @@ export const AutoApproveSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
 								{t("settings:autoApprove.write.protected.description")}
 							</div>
-						</div>
+						</SearchableSetting>
 					</div>
 				)}
 
@@ -240,7 +250,10 @@ export const AutoApproveSettings = ({
 							<span className="codicon codicon-question" />
 							<div>{t("settings:autoApprove.followupQuestions.label")}</div>
 						</div>
-						<div>
+						<SearchableSetting
+							settingId="auto-approve-followup-timeout"
+							section="autoApprove"
+							label={t("settings:autoApprove.followupQuestions.timeoutLabel")}>
 							<div className="flex items-center gap-2">
 								<Slider
 									min={1000}
@@ -257,7 +270,7 @@ export const AutoApproveSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:autoApprove.followupQuestions.timeoutLabel")}
 							</div>
-						</div>
+						</SearchableSetting>
 					</div>
 				)}
 
@@ -268,14 +281,17 @@ export const AutoApproveSettings = ({
 							<div>{t("settings:autoApprove.execute.label")}</div>
 						</div>
 
-						<div>
+						<SearchableSetting
+							settingId="auto-approve-allowed-commands"
+							section="autoApprove"
+							label={t("settings:autoApprove.execute.allowedCommands")}>
 							<label className="block font-medium mb-1" data-testid="allowed-commands-heading">
 								{t("settings:autoApprove.execute.allowedCommands")}
 							</label>
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:autoApprove.execute.allowedCommandsDescription")}
 							</div>
-						</div>
+						</SearchableSetting>
 
 						<div className="flex gap-2">
 							<Input
@@ -320,14 +336,18 @@ export const AutoApproveSettings = ({
 						</div>
 
 						{/* Denied Commands Section */}
-						<div className="mt-6">
+						<SearchableSetting
+							settingId="auto-approve-denied-commands"
+							section="autoApprove"
+							label={t("settings:autoApprove.execute.deniedCommands")}
+							className="mt-6">
 							<label className="block font-medium mb-1" data-testid="denied-commands-heading">
 								{t("settings:autoApprove.execute.deniedCommands")}
 							</label>
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:autoApprove.execute.deniedCommandsDescription")}
 							</div>
-						</div>
+						</SearchableSetting>
 
 						<div className="flex gap-2">
 							<Input
diff --git a/webview-ui/src/components/settings/BrowserSettings.tsx b/webview-ui/src/components/settings/BrowserSettings.tsx
index 84b9a32641..06459cdbc2 100644
--- a/webview-ui/src/components/settings/BrowserSettings.tsx
+++ b/webview-ui/src/components/settings/BrowserSettings.tsx
@@ -1,5 +1,4 @@
 import { VSCodeCheckbox, VSCodeTextField, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { SquareMousePointer } from "lucide-react"
 import { HTMLAttributes, useEffect, useMemo, useState } from "react"
 import { Trans } from "react-i18next"
 
@@ -18,6 +17,7 @@ import { useAppTranslation } from "@/i18n/TranslationContext"
 import { vscode } from "@/utils/vscode"
 import { buildDocLink } from "@src/utils/docLinks"
 
+import { SearchableSetting } from "./SearchableSetting"
 import { Section } from "./Section"
 import { SectionHeader } from "./SectionHeader"
 import { SetCachedStateField } from "./types"
@@ -109,15 +109,13 @@ export const BrowserSettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<SquareMousePointer className="w-4" />
-					<div>{t("settings:sections.browser")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.browser")}</SectionHeader>
 
 			<Section>
-				<div>
+				<SearchableSetting
+					settingId="browser-enable"
+					section="browser"
+					label={t("settings:browser.enable.label")}>
 					<VSCodeCheckbox
 						checked={browserToolEnabled}
 						onChange={(e: any) => setCachedStateField("browserToolEnabled", e.target.checked)}>
@@ -132,11 +130,14 @@ export const BrowserSettings = ({
 							</VSCodeLink>
 						</Trans>
 					</div>
-				</div>
+				</SearchableSetting>
 
 				{browserToolEnabled && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<SearchableSetting
+							settingId="browser-viewport"
+							section="browser"
+							label={t("settings:browser.viewport.label")}>
 							<label className="block font-medium mb-1">{t("settings:browser.viewport.label")}</label>
 							<SearchableSelect
 								value={browserViewportSize}
@@ -152,9 +153,12 @@ export const BrowserSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:browser.viewport.description")}
 							</div>
-						</div>
+						</SearchableSetting>
 
-						<div>
+						<SearchableSetting
+							settingId="browser-screenshot-quality"
+							section="browser"
+							label={t("settings:browser.screenshotQuality.label")}>
 							<label className="block font-medium mb-1">
 								{t("settings:browser.screenshotQuality.label")}
 							</label>
@@ -171,9 +175,12 @@ export const BrowserSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:browser.screenshotQuality.description")}
 							</div>
-						</div>
+						</SearchableSetting>
 
-						<div>
+						<SearchableSetting
+							settingId="browser-remote"
+							section="browser"
+							label={t("settings:browser.remote.label")}>
 							<VSCodeCheckbox
 								checked={remoteBrowserEnabled}
 								onChange={(e: any) => {
@@ -190,7 +197,7 @@ export const BrowserSettings = ({
 							<div className="text-vscode-descriptionForeground text-sm mt-1">
 								{t("settings:browser.remote.description")}
 							</div>
-						</div>
+						</SearchableSetting>
 
 						{remoteBrowserEnabled && (
 							<>
diff --git a/webview-ui/src/components/settings/CheckpointSettings.tsx b/webview-ui/src/components/settings/CheckpointSettings.tsx
index d992eb0313..dd28f6615f 100644
--- a/webview-ui/src/components/settings/CheckpointSettings.tsx
+++ b/webview-ui/src/components/settings/CheckpointSettings.tsx
@@ -1,7 +1,6 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
-import { GitBranch } from "lucide-react"
 import { Trans } from "react-i18next"
 import { buildDocLink } from "@src/utils/docLinks"
 import { Slider } from "@/components/ui"
@@ -9,6 +8,7 @@ import { Slider } from "@/components/ui"
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import {
 	DEFAULT_CHECKPOINT_TIMEOUT_SECONDS,
 	MAX_CHECKPOINT_TIMEOUT_SECONDS,
@@ -30,15 +30,13 @@ export const CheckpointSettings = ({
 	const { t } = useAppTranslation()
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<GitBranch className="w-4" />
-					<div>{t("settings:sections.checkpoints")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.checkpoints")}</SectionHeader>
 
 			<Section>
-				<div>
+				<SearchableSetting
+					settingId="checkpoints-enable"
+					section="checkpoints"
+					label={t("settings:checkpoints.enable.label")}>
 					<VSCodeCheckbox
 						checked={enableCheckpoints}
 						onChange={(e: any) => {
@@ -55,10 +53,14 @@ export const CheckpointSettings = ({
 							</VSCodeLink>
 						</Trans>
 					</div>
-				</div>
+				</SearchableSetting>
 
 				{enableCheckpoints && (
-					<div className="mt-4">
+					<SearchableSetting
+						settingId="checkpoints-timeout"
+						section="checkpoints"
+						label={t("settings:checkpoints.timeout.label")}
+						className="mt-4">
 						<label className="block text-sm font-medium mb-2">
 							{t("settings:checkpoints.timeout.label")}
 						</label>
@@ -81,7 +83,7 @@ export const CheckpointSettings = ({
 						<div className="text-vscode-descriptionForeground text-sm mt-1">
 							{t("settings:checkpoints.timeout.description")}
 						</div>
-					</div>
+					</SearchableSetting>
 				)}
 			</Section>
 		</div>
diff --git a/webview-ui/src/components/settings/ContextManagementSettings.tsx b/webview-ui/src/components/settings/ContextManagementSettings.tsx
index d9641c8cd7..a76ee5a1ef 100644
--- a/webview-ui/src/components/settings/ContextManagementSettings.tsx
+++ b/webview-ui/src/components/settings/ContextManagementSettings.tsx
@@ -2,7 +2,7 @@ import { HTMLAttributes } from "react"
 import React from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { Database, FoldVertical } from "lucide-react"
+import { FoldVertical } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Input, Slider, Button } from "@/components/ui"
@@ -11,6 +11,7 @@ import { Input, Slider, Button } from "@/components/ui"
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import { vscode } from "@/utils/vscode"
 
 type ContextManagementSettingsProps = HTMLAttributes<HTMLDivElement> & {
@@ -113,14 +114,14 @@ export const ContextManagementSettings = ({
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
 			<SectionHeader description={t("settings:contextManagement.description")}>
-				<div className="flex items-center gap-2">
-					<Database className="w-4" />
-					<div>{t("settings:sections.contextManagement")}</div>
-				</div>
+				{t("settings:sections.contextManagement")}
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<SearchableSetting
+					settingId="context-open-tabs"
+					section="contextManagement"
+					label={t("settings:contextManagement.openTabs.label")}>
 					<span className="block font-medium mb-1">{t("settings:contextManagement.openTabs.label")}</span>
 					<div className="flex items-center gap-2">
 						<Slider
@@ -136,9 +137,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:contextManagement.openTabs.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-workspace-files"
+					section="contextManagement"
+					label={t("settings:contextManagement.workspaceFiles.label")}>
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.workspaceFiles.label")}
 					</span>
@@ -156,9 +160,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:contextManagement.workspaceFiles.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-max-git-status-files"
+					section="contextManagement"
+					label={t("settings:contextManagement.maxGitStatusFiles.label")}>
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.maxGitStatusFiles.label")}
 					</span>
@@ -176,9 +183,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:contextManagement.maxGitStatusFiles.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-max-concurrent-file-reads"
+					section="contextManagement"
+					label={t("settings:contextManagement.maxConcurrentFileReads.label")}>
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.maxConcurrentFileReads.label")}
 					</span>
@@ -196,9 +206,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
 						{t("settings:contextManagement.maxConcurrentFileReads.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-show-rooignored-files"
+					section="contextManagement"
+					label={t("settings:contextManagement.rooignore.label")}>
 					<VSCodeCheckbox
 						checked={showRooIgnoredFiles}
 						onChange={(e: any) => setCachedStateField("showRooIgnoredFiles", e.target.checked)}
@@ -210,8 +223,29 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
 						{t("settings:contextManagement.rooignore.description")}
 					</div>
-				</div>
-				<div>
+				</SearchableSetting>
+
+				<SearchableSetting
+					settingId="context-enable-subfolder-rules"
+					section="contextManagement"
+					label={t("settings:contextManagement.enableSubfolderRules.label")}>
+					<VSCodeCheckbox
+						checked={enableSubfolderRules}
+						onChange={(e: any) => setCachedStateField("enableSubfolderRules", e.target.checked)}
+						data-testid="enable-subfolder-rules-checkbox">
+						<label className="block font-medium mb-1">
+							{t("settings:contextManagement.enableSubfolderRules.label")}
+						</label>
+					</VSCodeCheckbox>
+					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
+						{t("settings:contextManagement.enableSubfolderRules.description")}
+					</div>
+				</SearchableSetting>
+
+				<SearchableSetting
+					settingId="context-max-read-character"
+					section="contextManagement"
+					label={t("settings:contextManagement.maxReadCharacter.label")}>
 					<label className="block font-medium mb-1">
 						{t("settings:contextManagement.maxReadCharacter.label")}
 					</label>
@@ -229,22 +263,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:contextManagement.maxReadCharacter.description")}
 					</div>
-				</div>
-				<div>
-					<VSCodeCheckbox
-						checked={enableSubfolderRules}
-						onChange={(e: any) => setCachedStateField("enableSubfolderRules", e.target.checked)}
-						data-testid="enable-subfolder-rules-checkbox">
-						<label className="block font-medium mb-1">
-							{t("settings:contextManagement.enableSubfolderRules.label")}
-						</label>
-					</VSCodeCheckbox>
-					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
-						{t("settings:contextManagement.enableSubfolderRules.description")}
-					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-max-read-file"
+					section="contextManagement"
+					label={t("settings:contextManagement.maxReadFile.label")}>
 					<div className="flex flex-col gap-2">
 						<span className="font-medium">{t("settings:contextManagement.maxReadFile.label")}</span>
 						<div className="flex items-center gap-4">
@@ -278,9 +302,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-2">
 						{t("settings:contextManagement.maxReadFile.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-max-image-file-size"
+					section="contextManagement"
+					label={t("settings:contextManagement.maxImageFileSize.label")}>
 					<div className="flex flex-col gap-2">
 						<span className="font-medium">{t("settings:contextManagement.maxImageFileSize.label")}</span>
 						<div className="flex items-center gap-4">
@@ -306,9 +333,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-2">
 						{t("settings:contextManagement.maxImageFileSize.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-max-total-image-size"
+					section="contextManagement"
+					label={t("settings:contextManagement.maxTotalImageSize.label")}>
 					<div className="flex flex-col gap-2">
 						<span className="font-medium">{t("settings:contextManagement.maxTotalImageSize.label")}</span>
 						<div className="flex items-center gap-4">
@@ -334,9 +364,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-2">
 						{t("settings:contextManagement.maxTotalImageSize.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-include-diagnostic-messages"
+					section="contextManagement"
+					label={t("settings:contextManagement.diagnostics.includeMessages.label")}>
 					<VSCodeCheckbox
 						checked={includeDiagnosticMessages}
 						onChange={(e: any) => setCachedStateField("includeDiagnosticMessages", e.target.checked)}
@@ -348,9 +381,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
 						{t("settings:contextManagement.diagnostics.includeMessages.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-max-diagnostic-messages"
+					section="contextManagement"
+					label={t("settings:contextManagement.diagnostics.maxMessages.label")}>
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.diagnostics.maxMessages.label")}
 					</span>
@@ -403,9 +439,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:contextManagement.diagnostics.maxMessages.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-write-delay"
+					section="contextManagement"
+					label={t("settings:contextManagement.diagnostics.delayAfterWrite.label")}>
 					<span className="block font-medium mb-1">
 						{t("settings:contextManagement.diagnostics.delayAfterWrite.label")}
 					</span>
@@ -423,9 +462,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:contextManagement.diagnostics.delayAfterWrite.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-include-current-time"
+					section="contextManagement"
+					label={t("settings:contextManagement.includeCurrentTime.label")}>
 					<VSCodeCheckbox
 						checked={includeCurrentTime}
 						onChange={(e: any) => setCachedStateField("includeCurrentTime", e.target.checked)}
@@ -437,9 +479,12 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
 						{t("settings:contextManagement.includeCurrentTime.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
-				<div>
+				<SearchableSetting
+					settingId="context-include-current-cost"
+					section="contextManagement"
+					label={t("settings:contextManagement.includeCurrentCost.label")}>
 					<VSCodeCheckbox
 						checked={includeCurrentCost}
 						onChange={(e: any) => setCachedStateField("includeCurrentCost", e.target.checked)}
@@ -451,15 +496,20 @@ export const ContextManagementSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1 mb-3">
 						{t("settings:contextManagement.includeCurrentCost.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 			</Section>
 			<Section className="pt-2">
-				<VSCodeCheckbox
-					checked={autoCondenseContext}
-					onChange={(e: any) => setCachedStateField("autoCondenseContext", e.target.checked)}
-					data-testid="auto-condense-context-checkbox">
-					<span className="font-medium">{t("settings:contextManagement.autoCondenseContext.name")}</span>
-				</VSCodeCheckbox>
+				<SearchableSetting
+					settingId="context-auto-condense"
+					section="contextManagement"
+					label={t("settings:contextManagement.autoCondenseContext.name")}>
+					<VSCodeCheckbox
+						checked={autoCondenseContext}
+						onChange={(e: any) => setCachedStateField("autoCondenseContext", e.target.checked)}
+						data-testid="auto-condense-context-checkbox">
+						<span className="font-medium">{t("settings:contextManagement.autoCondenseContext.name")}</span>
+					</VSCodeCheckbox>
+				</SearchableSetting>
 				{autoCondenseContext && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
 						<div className="flex items-center gap-4 font-bold">
diff --git a/webview-ui/src/components/settings/ExperimentalSettings.tsx b/webview-ui/src/components/settings/ExperimentalSettings.tsx
index d5de439499..432ebf75c7 100644
--- a/webview-ui/src/components/settings/ExperimentalSettings.tsx
+++ b/webview-ui/src/components/settings/ExperimentalSettings.tsx
@@ -1,5 +1,4 @@
 import { HTMLAttributes } from "react"
-import { FlaskConical } from "lucide-react"
 
 import type { Experiments, ImageGenerationProvider } from "@roo-code/types"
 
@@ -11,6 +10,7 @@ import { cn } from "@src/lib/utils"
 import { SetExperimentEnabled } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import { ExperimentalFeature } from "./ExperimentalFeature"
 import { ImageGenerationSettings } from "./ImageGenerationSettings"
 import { CustomToolsSettings } from "./CustomToolsSettings"
@@ -46,12 +46,7 @@ export const ExperimentalSettings = ({
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<FlaskConical className="w-4" />
-					<div>{t("settings:sections.experimental")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.experimental")}</SectionHeader>
 
 			<Section>
 				{Object.entries(experimentConfigsMap)
@@ -61,16 +56,25 @@ export const ExperimentalSettings = ({
 					// Hide CHAT_SEARCH - moved to UI settings
 					.filter(([key]) => key !== "CHAT_SEARCH")
 					.map((config) => {
+						// Use the same translation key pattern as ExperimentalFeature
+						const experimentKey = config[0]
+						const label = t(`settings:experimental.${experimentKey}.name`)
+
 						if (config[0] === "MULTI_FILE_APPLY_DIFF") {
 							return (
-								<ExperimentalFeature
+								<SearchableSetting
 									key={config[0]}
-									experimentKey={config[0]}
-									enabled={experiments[EXPERIMENT_IDS.MULTI_FILE_APPLY_DIFF] ?? false}
-									onChange={(enabled) =>
-										setExperimentEnabled(EXPERIMENT_IDS.MULTI_FILE_APPLY_DIFF, enabled)
-									}
-								/>
+									settingId={`experimental-${config[0].toLowerCase()}`}
+									section="experimental"
+									label={label}>
+									<ExperimentalFeature
+										experimentKey={config[0]}
+										enabled={experiments[EXPERIMENT_IDS.MULTI_FILE_APPLY_DIFF] ?? false}
+										onChange={(enabled) =>
+											setExperimentEnabled(EXPERIMENT_IDS.MULTI_FILE_APPLY_DIFF, enabled)
+										}
+									/>
+								</SearchableSetting>
 							)
 						}
 						if (
@@ -80,19 +84,24 @@ export const ExperimentalSettings = ({
 							setImageGenerationSelectedModel
 						) {
 							return (
-								<ImageGenerationSettings
+								<SearchableSetting
 									key={config[0]}
-									enabled={experiments[EXPERIMENT_IDS.IMAGE_GENERATION] ?? false}
-									onChange={(enabled) =>
-										setExperimentEnabled(EXPERIMENT_IDS.IMAGE_GENERATION, enabled)
-									}
-									imageGenerationProvider={imageGenerationProvider}
-									openRouterImageApiKey={openRouterImageApiKey}
-									openRouterImageGenerationSelectedModel={openRouterImageGenerationSelectedModel}
-									setImageGenerationProvider={setImageGenerationProvider}
-									setOpenRouterImageApiKey={setOpenRouterImageApiKey}
-									setImageGenerationSelectedModel={setImageGenerationSelectedModel}
-								/>
+									settingId={`experimental-${config[0].toLowerCase()}`}
+									section="experimental"
+									label={label}>
+									<ImageGenerationSettings
+										enabled={experiments[EXPERIMENT_IDS.IMAGE_GENERATION] ?? false}
+										onChange={(enabled) =>
+											setExperimentEnabled(EXPERIMENT_IDS.IMAGE_GENERATION, enabled)
+										}
+										imageGenerationProvider={imageGenerationProvider}
+										openRouterImageApiKey={openRouterImageApiKey}
+										openRouterImageGenerationSelectedModel={openRouterImageGenerationSelectedModel}
+										setImageGenerationProvider={setImageGenerationProvider}
+										setOpenRouterImageApiKey={setOpenRouterImageApiKey}
+										setImageGenerationSelectedModel={setImageGenerationSelectedModel}
+									/>
+								</SearchableSetting>
 							)
 						}
 						if (config[0] === "ALWAYS_INCLUDE_FILE_DETAILS") {
@@ -135,25 +144,39 @@ export const ExperimentalSettings = ({
 
 						if (config[0] === "CUSTOM_TOOLS") {
 							return (
-								<CustomToolsSettings
+								<SearchableSetting
 									key={config[0]}
-									enabled={experiments[EXPERIMENT_IDS.CUSTOM_TOOLS] ?? false}
-									onChange={(enabled) => setExperimentEnabled(EXPERIMENT_IDS.CUSTOM_TOOLS, enabled)}
-								/>
+									settingId={`experimental-${config[0].toLowerCase()}`}
+									section="experimental"
+									label={label}>
+									<CustomToolsSettings
+										enabled={experiments[EXPERIMENT_IDS.CUSTOM_TOOLS] ?? false}
+										onChange={(enabled) =>
+											setExperimentEnabled(EXPERIMENT_IDS.CUSTOM_TOOLS, enabled)
+										}
+									/>
+								</SearchableSetting>
 							)
 						}
 						return (
-							<ExperimentalFeature
+							<SearchableSetting
 								key={config[0]}
-								experimentKey={config[0]}
-								enabled={experiments[EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS]] ?? false}
-								onChange={(enabled) =>
-									setExperimentEnabled(
-										EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS],
-										enabled,
-									)
-								}
-							/>
+								settingId={`experimental-${config[0].toLowerCase()}`}
+								section="experimental"
+								label={label}>
+								<ExperimentalFeature
+									experimentKey={config[0]}
+									enabled={
+										experiments[EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS]] ?? false
+									}
+									onChange={(enabled) =>
+										setExperimentEnabled(
+											EXPERIMENT_IDS[config[0] as keyof typeof EXPERIMENT_IDS],
+											enabled,
+										)
+									}
+								/>
+							</SearchableSetting>
 						)
 					})}
 			</Section>
diff --git a/webview-ui/src/components/settings/LanguageSettings.tsx b/webview-ui/src/components/settings/LanguageSettings.tsx
index 08174dcd65..15e80a0576 100644
--- a/webview-ui/src/components/settings/LanguageSettings.tsx
+++ b/webview-ui/src/components/settings/LanguageSettings.tsx
@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { Globe } from "lucide-react"
 
 import type { Language } from "@roo-code/types"
 
@@ -14,6 +13,7 @@ import {
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 
 type LanguageSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	language: string
@@ -25,25 +25,25 @@ export const LanguageSettings = ({ language, setCachedStateField, className, ...
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Globe className="w-4" />
-					<div>{t("settings:sections.language")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.language")}</SectionHeader>
 
 			<Section>
-				<SearchableSelect
-					value={language}
-					onValueChange={(value) => setCachedStateField("language", value as Language)}
-					options={Object.entries(LANGUAGES).map(([code, name]) => ({ value: code, label: name }))}
-					placeholder={t("settings:common.select")}
-					searchPlaceholder={""}
-					emptyMessage={""}
-					disabledSearch
-					className="w-full"
-					data-testid="provider-select"
-				/>
+				<SearchableSetting
+					settingId="language-select"
+					section="language"
+					label={t("settings:sections.language")}>
+					<SearchableSelect
+						value={language}
+						onValueChange={(value) => setCachedStateField("language", value as Language)}
+						options={Object.entries(LANGUAGES).map(([code, name]) => ({ value: code, label: name }))}
+						placeholder={t("settings:common.select")}
+						searchPlaceholder={""}
+						emptyMessage={""}
+						disabledSearch
+						className="w-full"
+						data-testid="provider-select"
+					/>
+				</SearchableSetting>
 			</Section>
 		</div>
 	)
diff --git a/webview-ui/src/components/settings/NotificationSettings.tsx b/webview-ui/src/components/settings/NotificationSettings.tsx
index 9610cabad8..68683e65f4 100644
--- a/webview-ui/src/components/settings/NotificationSettings.tsx
+++ b/webview-ui/src/components/settings/NotificationSettings.tsx
@@ -1,11 +1,11 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { Bell } from "lucide-react"
 
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import { Slider } from "../ui"
 
 type NotificationSettingsProps = HTMLAttributes<HTMLDivElement> & {
@@ -27,15 +27,13 @@ export const NotificationSettings = ({
 	const { t } = useAppTranslation()
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Bell className="w-4" />
-					<div>{t("settings:sections.notifications")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.notifications")}</SectionHeader>
 
 			<Section>
-				<div>
+				<SearchableSetting
+					settingId="notifications-tts"
+					section="notifications"
+					label={t("settings:notifications.tts.label")}>
 					<VSCodeCheckbox
 						checked={ttsEnabled}
 						onChange={(e: any) => setCachedStateField("ttsEnabled", e.target.checked)}
@@ -45,11 +43,14 @@ export const NotificationSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:notifications.tts.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
 				{ttsEnabled && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<SearchableSetting
+							settingId="notifications-tts-speed"
+							section="notifications"
+							label={t("settings:notifications.tts.speedLabel")}>
 							<label className="block font-medium mb-1">
 								{t("settings:notifications.tts.speedLabel")}
 							</label>
@@ -64,11 +65,14 @@ export const NotificationSettings = ({
 								/>
 								<span className="w-10">{((ttsSpeed ?? 1.0) * 100).toFixed(0)}%</span>
 							</div>
-						</div>
+						</SearchableSetting>
 					</div>
 				)}
 
-				<div>
+				<SearchableSetting
+					settingId="notifications-sound"
+					section="notifications"
+					label={t("settings:notifications.sound.label")}>
 					<VSCodeCheckbox
 						checked={soundEnabled}
 						onChange={(e: any) => setCachedStateField("soundEnabled", e.target.checked)}
@@ -78,11 +82,14 @@ export const NotificationSettings = ({
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
 						{t("settings:notifications.sound.description")}
 					</div>
-				</div>
+				</SearchableSetting>
 
 				{soundEnabled && (
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<SearchableSetting
+							settingId="notifications-sound-volume"
+							section="notifications"
+							label={t("settings:notifications.sound.volumeLabel")}>
 							<label className="block font-medium mb-1">
 								{t("settings:notifications.sound.volumeLabel")}
 							</label>
@@ -97,7 +104,7 @@ export const NotificationSettings = ({
 								/>
 								<span className="w-10">{((soundVolume ?? 0.5) * 100).toFixed(0)}%</span>
 							</div>
-						</div>
+						</SearchableSetting>
 					</div>
 				)}
 			</Section>
diff --git a/webview-ui/src/components/settings/PromptsSettings.tsx b/webview-ui/src/components/settings/PromptsSettings.tsx
index 0cd89e4e9a..3ed31a9573 100644
--- a/webview-ui/src/components/settings/PromptsSettings.tsx
+++ b/webview-ui/src/components/settings/PromptsSettings.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, FormEvent } from "react"
 import { VSCodeTextArea, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { MessageSquare } from "lucide-react"
 
 import { supportPrompt, SupportPromptType } from "@roo/support-prompt"
 
@@ -21,6 +20,7 @@ import {
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
 import { Trans } from "react-i18next"
+import { SearchableSetting } from "./SearchableSetting"
 
 interface PromptsSettingsProps {
 	customSupportPrompts: Record<string, string | undefined>
@@ -155,14 +155,14 @@ const PromptsSettings = ({
 							),
 						}}></Trans>
 				}>
-				<div className="flex items-center gap-2">
-					<MessageSquare className="w-4" />
-					<div>{t("settings:sections.prompts")}</div>
-				</div>
+				{t("settings:sections.prompts")}
 			</SectionHeader>
 
 			<Section>
-				<div>
+				<SearchableSetting
+					settingId="prompts-support-prompt-select"
+					section="prompts"
+					label={t("settings:sections.prompts")}>
 					<SearchableSelect
 						value={activeSupportOption}
 						onValueChange={(type) => setActiveSupportOption(type as SupportPromptType)}
@@ -179,7 +179,7 @@ const PromptsSettings = ({
 					<div className="text-sm text-vscode-descriptionForeground mt-1">
 						{t(`prompts:supportPrompts.types.${activeSupportOption}.description`)}
 					</div>
-				</div>
+				</SearchableSetting>
 
 				<div key={activeSupportOption} className="mt-4">
 					<div className="flex justify-between items-center mb-1">
diff --git a/webview-ui/src/components/settings/SearchableSetting.tsx b/webview-ui/src/components/settings/SearchableSetting.tsx
new file mode 100644
index 0000000000..2c55e35a1e
--- /dev/null
+++ b/webview-ui/src/components/settings/SearchableSetting.tsx
@@ -0,0 +1,79 @@
+import { HTMLAttributes, useEffect } from "react"
+
+import { cn } from "@/lib/utils"
+
+import { SectionName } from "./SettingsView"
+import { useSearchIndexContext } from "./useSettingsSearch"
+
+interface SearchableSettingProps extends HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Unique identifier for this setting.
+	 * Used for finding the element after tab navigation.
+	 */
+	settingId: string
+	/**
+	 * The section/tab this setting belongs to.
+	 * Used for navigation when the setting is selected from search results.
+	 */
+	section: SectionName
+	/**
+	 * The label text for this setting, used for search matching.
+	 * This should be the translated label text.
+	 */
+	label: string
+	children: React.ReactNode
+}
+
+/**
+ * Wrapper component that marks a setting as searchable.
+ *
+ * The component registers itself with the search index context on mount,
+ * allowing the search system to index settings as they are rendered.
+ *
+ * @example
+ * ```tsx
+ * <SearchableSetting
+ *   settingId="browser-enable"
+ *   section="browser"
+ *   label={t("settings:browser.enable.label")}
+ * >
+ *   <VSCodeCheckbox>
+ *     <span className="font-medium">{t("settings:browser.enable.label")}</span>
+ *   </VSCodeCheckbox>
+ *   <div className="text-vscode-descriptionForeground text-sm">
+ *     {t("settings:browser.enable.description")}
+ *   </div>
+ * </SearchableSetting>
+ * ```
+ */
+export function SearchableSetting({
+	settingId,
+	section,
+	label,
+	children,
+	className,
+	...props
+}: SearchableSettingProps) {
+	const searchContext = useSearchIndexContext()
+
+	// Register this setting with the search index on mount
+	// Note: We don't unregister on unmount because settings are indexed once
+	// during the initial tab cycling phase and remain in the index
+	useEffect(() => {
+		if (searchContext) {
+			searchContext.registerSetting({ settingId, section, label })
+		}
+	}, [searchContext, settingId, section, label])
+
+	return (
+		<div
+			data-searchable
+			data-setting-id={settingId}
+			data-setting-section={section}
+			data-setting-label={label}
+			className={cn(className)}
+			{...props}>
+			{children}
+		</div>
+	)
+}
diff --git a/webview-ui/src/components/settings/SectionHeader.tsx b/webview-ui/src/components/settings/SectionHeader.tsx
index c7a8821cb9..c675bbc466 100644
--- a/webview-ui/src/components/settings/SectionHeader.tsx
+++ b/webview-ui/src/components/settings/SectionHeader.tsx
@@ -9,13 +9,8 @@ type SectionHeaderProps = HTMLAttributes<HTMLDivElement> & {
 
 export const SectionHeader = ({ description, children, className, ...props }: SectionHeaderProps) => {
 	return (
-		<div
-			className={cn(
-				"sticky top-0 z-10 text-vscode-sideBar-foreground bg-vscode-sideBar-background brightness-90 px-5 py-4",
-				className,
-			)}
-			{...props}>
-			<h4 className="m-0">{children}</h4>
+		<div className={cn("sticky top-0 z-10 text-vscode-sideBar-foreground px-5 pt-6 pb-4", className)} {...props}>
+			<h3 className="text-[1.25em] font-semibold text-vscode-foreground m-0">{children}</h3>
 			{description && <p className="text-vscode-descriptionForeground text-sm mt-2 mb-0">{description}</p>}
 		</div>
 	)
diff --git a/webview-ui/src/components/settings/SettingsSearch.tsx b/webview-ui/src/components/settings/SettingsSearch.tsx
new file mode 100644
index 0000000000..a0cce1fefa
--- /dev/null
+++ b/webview-ui/src/components/settings/SettingsSearch.tsx
@@ -0,0 +1,123 @@
+import { useRef, useEffect, useState, useCallback } from "react"
+import type { LucideIcon } from "lucide-react"
+
+import { useSettingsSearch, SearchResult, SearchableSettingData } from "./useSettingsSearch"
+import { SectionName } from "./SettingsView"
+import { SettingsSearchInput } from "./SettingsSearchInput"
+import { SettingsSearchResults } from "./SettingsSearchResults"
+
+interface SettingsSearchProps {
+	index: SearchableSettingData[]
+	onNavigate: (section: SectionName, settingId: string) => void
+	sections: { id: SectionName; icon: LucideIcon }[]
+}
+
+export function SettingsSearch({ index, onNavigate, sections }: SettingsSearchProps) {
+	const inputRef = useRef<HTMLInputElement>(null)
+	const { searchQuery, setSearchQuery, results, isOpen, setIsOpen, clearSearch } = useSettingsSearch({ index })
+	const [highlightedResultId, setHighlightedResultId] = useState<string | undefined>(undefined)
+
+	// Handle selection of a search result
+	const handleSelectResult = useCallback(
+		(result: SearchResult) => {
+			onNavigate(result.section, result.settingId)
+			clearSearch()
+			setHighlightedResultId(undefined)
+			// Keep focus in the input so dropdown remains open for follow-up search
+			setIsOpen(true)
+			requestAnimationFrame(() => inputRef.current?.focus())
+		},
+		[onNavigate, clearSearch, setIsOpen],
+	)
+
+	// Keyboard navigation inside search results
+	const moveHighlight = useCallback(
+		(direction: 1 | -1) => {
+			if (!results.length) return
+			const flatIds = results.map((r) => r.settingId)
+			const currentIndex = highlightedResultId ? flatIds.indexOf(highlightedResultId) : -1
+			const nextIndex = (currentIndex + direction + flatIds.length) % flatIds.length
+			setHighlightedResultId(flatIds[nextIndex])
+		},
+		[highlightedResultId, results],
+	)
+
+	const handleSearchKeyDown = useCallback(
+		(event: React.KeyboardEvent<HTMLInputElement>) => {
+			if (event.key === "Escape") {
+				setIsOpen(false)
+				setHighlightedResultId(undefined)
+				inputRef.current?.blur()
+				return
+			}
+
+			if (!results.length) return
+
+			if (event.key === "ArrowDown") {
+				event.preventDefault()
+				moveHighlight(1)
+				return
+			}
+
+			if (event.key === "ArrowUp") {
+				event.preventDefault()
+				moveHighlight(-1)
+				return
+			}
+
+			if (event.key === "Enter" && highlightedResultId) {
+				event.preventDefault()
+				const selected = results.find((r) => r.settingId === highlightedResultId)
+				if (selected) {
+					handleSelectResult(selected)
+				}
+				return
+			}
+		},
+		[handleSelectResult, highlightedResultId, moveHighlight, results, setIsOpen],
+	)
+
+	// Reset highlight based on focus and available results
+	useEffect(() => {
+		if (!isOpen || !results.length) {
+			setHighlightedResultId(undefined)
+			return
+		}
+
+		setHighlightedResultId((current) =>
+			current && results.some((r) => r.settingId === current) ? current : results[0]?.settingId,
+		)
+	}, [isOpen, results])
+
+	// Ensure highlighted search result stays visible within dropdown
+	useEffect(() => {
+		if (!highlightedResultId || !isOpen) return
+
+		const element = document.getElementById(`settings-search-result-${highlightedResultId}`)
+		element?.scrollIntoView({ block: "nearest" })
+	}, [highlightedResultId, isOpen])
+
+	return (
+		<div className="relative justify-end">
+			<SettingsSearchInput
+				value={searchQuery}
+				onChange={setSearchQuery}
+				onFocus={() => setIsOpen(true)}
+				onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+				onKeyDown={handleSearchKeyDown}
+				inputRef={inputRef}
+			/>
+			{searchQuery && isOpen && (
+				<div className="absolute top-full min-w-[300px] right-0 mt-2 border border-vscode-dropdown-border bg-vscode-dropdown-background rounded-2xl overflow-hidden shadow-xl z-50">
+					<SettingsSearchResults
+						results={results}
+						query={searchQuery}
+						onSelectResult={handleSelectResult}
+						sections={sections}
+						highlightedResultId={highlightedResultId}
+					/>
+				</div>
+			)}
+		</div>
+	)
+}
diff --git a/webview-ui/src/components/settings/SettingsSearchInput.tsx b/webview-ui/src/components/settings/SettingsSearchInput.tsx
new file mode 100644
index 0000000000..d1b8566ef9
--- /dev/null
+++ b/webview-ui/src/components/settings/SettingsSearchInput.tsx
@@ -0,0 +1,73 @@
+import { useState, type RefObject } from "react"
+import { Search, X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { Input } from "@/components/ui"
+
+export interface SettingsSearchInputProps {
+	value: string
+	onChange: (value: string) => void
+	onFocus?: () => void
+	onBlur?: () => void
+	onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
+	inputRef?: RefObject<HTMLInputElement>
+}
+
+export function SettingsSearchInput({
+	value,
+	onChange,
+	onFocus,
+	onBlur,
+	onKeyDown,
+	inputRef,
+}: SettingsSearchInputProps) {
+	const { t } = useAppTranslation()
+	const [isExpanded, setIsExpanded] = useState(false)
+
+	const handleFocus = () => {
+		setIsExpanded(true)
+		onFocus?.()
+	}
+
+	const handleBlur = () => {
+		// Only collapse if there's no value
+		if (!value) {
+			setIsExpanded(false)
+		}
+		onBlur?.()
+	}
+
+	const isWide = isExpanded || !!value
+
+	return (
+		<div className="relative flex items-center justify-end">
+			<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-vscode-descriptionForeground pointer-events-none z-10" />
+			<Input
+				ref={inputRef}
+				data-testid="settings-search-input"
+				type="text"
+				value={value}
+				onChange={(e) => onChange(e.target.value)}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				onKeyDown={onKeyDown}
+				placeholder={isWide ? t("settings:search.placeholder") : ""}
+				className={cn(
+					"pl-8 h-7 text-sm rounded-full border border-vscode-input-border bg-vscode-input-background focus:border-vscode-focusBorder transition-all duration-200 ease-in-out",
+					isWide ? "w-40 pr-2.5" : "w-8 pr-0 cursor-pointer",
+					value && "pr-7",
+				)}
+			/>
+			{value && (
+				<button
+					type="button"
+					onClick={() => onChange("")}
+					className="absolute cursor-pointer right-2 top-1/2 -translate-y-1/2 text-vscode-descriptionForeground hover:text-vscode-foreground focus:outline-none"
+					aria-label="Clear search">
+					<X className="size-3.5" />
+				</button>
+			)}
+		</div>
+	)
+}
diff --git a/webview-ui/src/components/settings/SettingsSearchResults.tsx b/webview-ui/src/components/settings/SettingsSearchResults.tsx
new file mode 100644
index 0000000000..bf9d74aefa
--- /dev/null
+++ b/webview-ui/src/components/settings/SettingsSearchResults.tsx
@@ -0,0 +1,150 @@
+import { useMemo } from "react"
+import type { LucideIcon } from "lucide-react"
+
+import { useAppTranslation } from "@/i18n/TranslationContext"
+import { cn } from "@/lib/utils"
+
+import { SectionName } from "./SettingsView"
+import { SearchResult } from "./useSettingsSearch"
+
+export interface SettingsSearchResultsProps {
+	results: SearchResult[]
+	query: string
+	onSelectResult: (result: SearchResult) => void
+	sections: { id: SectionName; icon: LucideIcon }[]
+	highlightedResultId?: string
+}
+
+interface HighlightMatchProps {
+	text: string
+	/** Character positions to highlight (from fzf) */
+	positions: Set<number>
+}
+
+/**
+ * Highlights matching characters using fzf's position data.
+ */
+function HighlightMatch({ text, positions }: HighlightMatchProps) {
+	if (positions.size === 0) {
+		return <>{text}</>
+	}
+
+	// Build segments of highlighted and non-highlighted text
+	const segments: { text: string; highlighted: boolean }[] = []
+	let currentSegment = ""
+	let currentHighlighted = positions.has(0)
+
+	for (let i = 0; i < text.length; i++) {
+		const isHighlighted = positions.has(i)
+		if (isHighlighted === currentHighlighted) {
+			currentSegment += text[i]
+		} else {
+			if (currentSegment) {
+				segments.push({ text: currentSegment, highlighted: currentHighlighted })
+			}
+			currentSegment = text[i]
+			currentHighlighted = isHighlighted
+		}
+	}
+
+	if (currentSegment) {
+		segments.push({ text: currentSegment, highlighted: currentHighlighted })
+	}
+
+	return (
+		<>
+			{segments.map((segment, index) =>
+				segment.highlighted ? (
+					<mark key={index} className="bg-transparent font-semibold text-inherit">
+						{segment.text}
+					</mark>
+				) : (
+					<span key={index}>{segment.text}</span>
+				),
+			)}
+		</>
+	)
+}
+
+export function SettingsSearchResults({
+	results,
+	query,
+	onSelectResult,
+	sections,
+	highlightedResultId,
+}: SettingsSearchResultsProps) {
+	const { t } = useAppTranslation()
+
+	// Group results by section/tab
+	const groupedResults = useMemo(() => {
+		return results.reduce(
+			(acc, result) => {
+				const section = result.section
+				if (!acc[section]) {
+					acc[section] = []
+				}
+				acc[section].push(result)
+				return acc
+			},
+			{} as Record<SectionName, SearchResult[]>,
+		)
+	}, [results])
+
+	// Create a map of section id to icon for quick lookup
+	const sectionIconMap = useMemo(() => {
+		return new Map(sections.map((section) => [section.id, section.icon]))
+	}, [sections])
+
+	// If no results, show a message
+	if (results.length === 0) {
+		return (
+			<div className="max-h-80 overflow-y-auto p-4 text-vscode-descriptionForeground text-sm">
+				{t("settings:search.noResults", { query })}
+			</div>
+		)
+	}
+
+	return (
+		<div className="max-h-80 overflow-y-auto" role="listbox">
+			{Object.entries(groupedResults).map(([section, sectionResults]) => {
+				const Icon = sectionIconMap.get(section as SectionName)
+
+				return (
+					<div key={section}>
+						{/* Section header */}
+						<div className="flex items-center gap-2 px-3 py-1.5 mt-4 first:mt-0 text-xs text-vscode-descriptionForeground bg-vscode-sideBar-background border-b-vscode-panel-border sticky top-0">
+							{Icon && <Icon className="h-3.5 w-3.5" />}
+							<span>{t(`settings:sections.${section}`)}</span>
+						</div>
+
+						{/* Result items */}
+						{sectionResults.map((result) => {
+							const isHighlighted = highlightedResultId === result.settingId
+							const resultDomId = `settings-search-result-${result.settingId}`
+
+							return (
+								<button
+									key={result.settingId}
+									id={resultDomId}
+									type="button"
+									role="option"
+									aria-selected={isHighlighted}
+									onMouseDown={(event) => event.preventDefault()}
+									onClick={() => onSelectResult(result)}
+									className={cn(
+										"w-full cursor-pointer text-left px-3 py-2 hover:bg-vscode-list-hoverBackground focus:bg-vscode-list-hoverBackground focus:outline-none",
+										isHighlighted &&
+											"bg-vscode-button-background text-vscode-button-foreground hover:bg-vscode-button-hoverBackground",
+									)}>
+									<div className="text-sm">
+										<HighlightMatch text={result.label} positions={result.positions} />
+									</div>
+								</button>
+							)
+						})}
+					</div>
+				)
+			})}
+		</div>
+	)
+}
diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 14b5d49453..e42187c032 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -12,7 +12,6 @@ import React, {
 import {
 	CheckCheck,
 	SquareMousePointer,
-	Webhook,
 	GitBranch,
 	Bell,
 	Database,
@@ -30,6 +29,7 @@ import {
 	Server,
 	Users2,
 	Trash2,
+	ArrowLeft,
 } from "lucide-react"
 import { isEqual } from "lodash-es"
 import {
@@ -84,6 +84,8 @@ import { UISettings } from "./UISettings"
 import { AutoCleanupSettings } from "./AutoCleanupSettings"
 import ModesView from "../modes/ModesView"
 import McpView from "../mcp/McpView"
+import { SettingsSearch } from "./SettingsSearch"
+import { useSearchIndexRegistry, SearchIndexProvider } from "./useSettingsSearch"
 
 export const settingsTabsContainer = "flex flex-1 overflow-hidden [&.narrow_.tab-label]:hidden"
 export const settingsTabList =
@@ -96,7 +98,7 @@ export interface SettingsViewRef {
 	checkUnsaveChanges: (then: () => void) => void
 }
 
-const sectionNames = [
+export const sectionNames = [
 	"providers",
 	"autoApprove",
 	"slashCommands",
@@ -115,7 +117,7 @@ const sectionNames = [
 	"about",
 ] as const
 
-type SectionName = (typeof sectionNames)[number]
+export type SectionName = (typeof sectionNames)[number]
 
 type SettingsViewProps = {
 	onDone: () => void
@@ -624,13 +626,72 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 		}
 	}, [scrollToActiveTab])
 
+	// Search index registry - settings register themselves on mount
+	const getSectionLabel = useCallback((section: SectionName) => t(`settings:sections.${section}`), [t])
+	const { contextValue: searchContextValue, index: searchIndex } = useSearchIndexRegistry(getSectionLabel)
+
+	// Track which tabs have been indexed (visited at least once)
+	const [indexingTabIndex, setIndexingTabIndex] = useState(0)
+	const initialTab = useRef<SectionName>(activeTab)
+	const isIndexing = indexingTabIndex < sectionNames.length
+	const isIndexingComplete = !isIndexing
+
+	// Index all tabs by cycling through them on mount
+	useLayoutEffect(() => {
+		if (indexingTabIndex >= sectionNames.length) {
+			// All tabs indexed, return to initial tab
+			setActiveTab(initialTab.current)
+			return
+		}
+
+		// Move to the next tab on next render
+		setIndexingTabIndex((prev) => prev + 1)
+	}, [indexingTabIndex])
+
+	// Determine which tab content to render (for indexing or active display)
+	const renderTab = isIndexing ? sectionNames[indexingTabIndex] : activeTab
+
+	// Handle search navigation - switch to the correct tab and scroll to the element
+	const handleSearchNavigate = useCallback(
+		(section: SectionName, settingId: string) => {
+			// Switch to the correct tab
+			handleTabChange(section)
+
+			// Wait for the tab to render, then find element by settingId and scroll to it
+			requestAnimationFrame(() => {
+				setTimeout(() => {
+					const element = document.querySelector(`[data-setting-id="${settingId}"]`)
+					if (element) {
+						element.scrollIntoView({ behavior: "smooth", block: "center" })
+
+						// Add highlight animation
+						element.classList.add("settings-highlight")
+						setTimeout(() => {
+							element.classList.remove("settings-highlight")
+						}, 1500)
+					}
+				}, 100) // Small delay to ensure tab content is rendered
+			})
+		},
+		[handleTabChange],
+	)
+
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center gap-2">
-				<div className="flex items-center gap-1">
-					<h3 className="text-vscode-foreground m-0">{t("settings:header.title")}</h3>
+				<div className="flex items-center gap-2 grow">
+					<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
+						<Button variant="ghost" className="px-1.5 -ml-2" onClick={() => checkUnsaveChanges(onDone)}>
+							<ArrowLeft />
+							<span className="sr-only">{t("settings:common.done")}</span>
+						</Button>
+					</StandardTooltip>
+					<h3 className="text-vscode-foreground m-0 flex-shrink-0">{t("settings:header.title")}</h3>
 				</div>
-				<div className="flex gap-2">
+				<div className="flex items-center gap-2 shrink-0">
+					{isIndexingComplete && (
+						<SettingsSearch index={searchIndex} onNavigate={handleSearchNavigate} sections={sections} />
+					)}
 					<StandardTooltip
 						content={
 							!isSettingValid
@@ -655,11 +716,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 							)}
 						</Button>
 					</StandardTooltip>
-					<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
-						<Button variant="secondary" onClick={() => checkUnsaveChanges(onDone)} disabled={isSaving}>
-							{t("settings:common.done")}
-						</Button>
-					</StandardTooltip>
 				</div>
 			</TabHeader>
 
@@ -721,235 +777,236 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 					})}
 				</TabList>
 
-				{/* Content area */}
-				<TabContent ref={contentRef} className="p-0 flex-1 overflow-auto">
-					{/* Providers Section */}
-					{activeTab === "providers" && (
-						<div>
-							<SectionHeader>
-								<div className="flex items-center gap-2">
-									<Webhook className="w-4" />
-									<div>{t("settings:sections.providers")}</div>
-								</div>
-							</SectionHeader>
-
-							<Section>
-								{/* <ApiConfigManager
-									currentApiConfigName={currentApiConfigName}
-									listApiConfigMeta={listApiConfigMeta}
-									onSelectConfig={(configName: string) =>
-										checkUnsaveChanges(() =>
-											vscode.postMessage({ type: "loadApiConfiguration", text: configName }),
-										)
-									}
-									onDeleteConfig={(configName: string) =>
-										vscode.postMessage({ type: "deleteApiConfiguration", text: configName })
-									}
-									onRenameConfig={(oldName: string, newName: string) => {
-										vscode.postMessage({
-											type: "renameApiConfiguration",
-											values: { oldName, newName },
-											apiConfiguration,
-										})
-										prevApiConfigName.current = newName
-									}}
-									onUpsertConfig={(configName: string) =>
-										vscode.postMessage({
-											type: "upsertApiConfiguration",
-											text: configName,
-											apiConfiguration,
-										})
-									}
-								/> */}
-								<ApiOptions
-									uriScheme={uriScheme}
-									apiConfiguration={apiConfiguration}
-									setApiConfigurationField={setApiConfigurationField}
-									errorMessage={errorMessage}
-									setErrorMessage={setErrorMessage}
-									useZgsmCustomConfig={useZgsmCustomConfig}
-									setCachedStateField={setCachedStateField}
-								/>
-							</Section>
-						</div>
-					)}
-
-					{/* Auto-Approve Section */}
-					{activeTab === "autoApprove" && (
-						<AutoApproveSettings
-							alwaysAllowReadOnly={alwaysAllowReadOnly}
-							alwaysAllowReadOnlyOutsideWorkspace={alwaysAllowReadOnlyOutsideWorkspace}
-							alwaysAllowWrite={alwaysAllowWrite}
-							alwaysAllowWriteOutsideWorkspace={alwaysAllowWriteOutsideWorkspace}
-							alwaysAllowWriteProtected={alwaysAllowWriteProtected}
-							alwaysAllowBrowser={alwaysAllowBrowser}
-							alwaysAllowMcp={alwaysAllowMcp}
-							alwaysAllowModeSwitch={alwaysAllowModeSwitch}
-							alwaysAllowSubtasks={alwaysAllowSubtasks}
-							alwaysAllowExecute={alwaysAllowExecute}
-							alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
-							followupAutoApproveTimeoutMs={followupAutoApproveTimeoutMs}
-							allowedCommands={allowedCommands}
-							allowedMaxRequests={allowedMaxRequests ?? undefined}
-							allowedMaxCost={allowedMaxCost ?? undefined}
-							deniedCommands={deniedCommands}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
-
-					{/* Slash Commands Section */}
-					{activeTab === "slashCommands" && <SlashCommandsSettings />}
-
-					{/* Browser Section */}
-					{activeTab === "browser" && (
-						<BrowserSettings
-							browserToolEnabled={browserToolEnabled}
-							browserViewportSize={browserViewportSize}
-							screenshotQuality={screenshotQuality}
-							remoteBrowserHost={remoteBrowserHost}
-							remoteBrowserEnabled={remoteBrowserEnabled}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
-
-					{/* Checkpoints Section */}
-					{activeTab === "checkpoints" && (
-						<CheckpointSettings
-							enableCheckpoints={enableCheckpoints}
-							checkpointTimeout={checkpointTimeout}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
-
-					{/* Notifications Section */}
-					{activeTab === "notifications" && (
-						<NotificationSettings
-							ttsEnabled={ttsEnabled}
-							ttsSpeed={ttsSpeed}
-							soundEnabled={soundEnabled}
-							soundVolume={soundVolume}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
-
-					{/* Context Management Section */}
-					{activeTab === "contextManagement" && (
-						<ContextManagementSettings
-							autoCondenseContext={autoCondenseContext}
-							autoCondenseContextPercent={autoCondenseContextPercent}
-							listApiConfigMeta={listApiConfigMeta ?? []}
-							maxOpenTabsContext={maxOpenTabsContext}
-							maxWorkspaceFiles={maxWorkspaceFiles ?? 300}
-							showRooIgnoredFiles={showRooIgnoredFiles}
-							enableSubfolderRules={enableSubfolderRules}
-							maxReadFileLine={maxReadFileLine}
-							maxReadCharacterLimit={maxReadCharacterLimit}
-							zgsmCodebaseIndexEnabled={zgsmCodebaseIndexEnabled ?? true}
-							maxImageFileSize={maxImageFileSize}
-							maxTotalImageSize={maxTotalImageSize}
-							maxConcurrentFileReads={maxConcurrentFileReads}
-							profileThresholds={profileThresholds}
-							includeDiagnosticMessages={includeDiagnosticMessages}
-							maxDiagnosticMessages={maxDiagnosticMessages}
-							writeDelayMs={writeDelayMs}
-							includeCurrentTime={includeCurrentTime}
-							includeCurrentCost={includeCurrentCost}
-							maxGitStatusFiles={maxGitStatusFiles}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
-					{/* ZgsmCodebase Section */}
-					{activeTab === "contextManagement" && (
-						<ZgsmCodebaseSettings setCachedStateField={setCachedStateField} />
-					)}
-
-					{/* Terminal Section */}
-					{activeTab === "terminal" && (
-						<TerminalSettings
-							terminalOutputLineLimit={terminalOutputLineLimit}
-							terminalOutputCharacterLimit={terminalOutputCharacterLimit}
-							terminalShellIntegrationTimeout={terminalShellIntegrationTimeout}
-							terminalShellIntegrationDisabled={terminalShellIntegrationDisabled}
-							terminalCommandDelay={terminalCommandDelay}
-							terminalPowershellCounter={terminalPowershellCounter}
-							terminalZshClearEolMark={terminalZshClearEolMark}
-							terminalZshOhMy={terminalZshOhMy}
-							terminalZshP10k={terminalZshP10k}
-							terminalZdotdir={terminalZdotdir}
-							terminalCompressProgressBar={terminalCompressProgressBar}
-							setCachedStateField={setCachedStateField}
-						/>
-					)}
-
-					{/* Auto Cleanup Section */}
-					{activeTab === "autoCleanup" && (
-						<AutoCleanupSettings autoCleanup={autoCleanup} setCachedStateField={setCachedStateField} />
-					)}
-
-					{/* Modes Section */}
-					{activeTab === "modes" && <ModesView />}
-
-					{/* MCP Section */}
-					{activeTab === "mcp" && <McpView />}
-
-					{/* Prompts Section */}
-					{activeTab === "prompts" && (
-						<PromptsSettings
-							customSupportPrompts={customSupportPrompts || {}}
-							setCustomSupportPrompts={setCustomSupportPromptsField}
-							includeTaskHistoryInEnhance={includeTaskHistoryInEnhance}
-							setIncludeTaskHistoryInEnhance={(value) =>
-								setCachedStateField("includeTaskHistoryInEnhance", value)
-							}
-						/>
-					)}
-
-					{/* UI Section */}
-					{activeTab === "ui" && (
-						<UISettings
-							reasoningBlockCollapsed={reasoningBlockCollapsed ?? true}
-							showSpeedInfo={showSpeedInfo ?? false}
-							automaticallyFocus={automaticallyFocus ?? false}
-							enterBehavior={enterBehavior ?? "send"}
-							experiments={experiments}
-							apiConfiguration={apiConfiguration}
-							setCachedStateField={setCachedStateField}
-							setExperimentEnabled={setExperimentEnabled}
-						/>
-					)}
-
-					{/* Experimental Section */}
-					{activeTab === "experimental" && (
-						<ExperimentalSettings
-							setExperimentEnabled={setExperimentEnabled}
-							experiments={experiments}
-							apiConfiguration={apiConfiguration}
-							setApiConfigurationField={setApiConfigurationField}
-							imageGenerationProvider={imageGenerationProvider}
-							openRouterImageApiKey={openRouterImageApiKey as string | undefined}
-							openRouterImageGenerationSelectedModel={
-								openRouterImageGenerationSelectedModel as string | undefined
-							}
-							setImageGenerationProvider={setImageGenerationProvider}
-							setOpenRouterImageApiKey={setOpenRouterImageApiKey}
-							setImageGenerationSelectedModel={setImageGenerationSelectedModel}
-						/>
-					)}
-
-					{/* Language Section */}
-					{activeTab === "language" && (
-						<LanguageSettings language={language || "en"} setCachedStateField={setCachedStateField} />
-					)}
-
-					{/* About Section */}
-					{activeTab === "about" && (
-						<About
-							telemetrySetting={telemetrySetting}
-							setTelemetrySetting={setTelemetrySetting}
-							debug={debug}
-							setDebug={setDebug}
-						/>
-					)}
+				{/* Content area - renders only the active tab (or indexing tab during initial indexing) */}
+				<TabContent
+					ref={contentRef}
+					className={cn("p-0 flex-1 overflow-auto", isIndexing && "opacity-0")}
+					data-testid="settings-content">
+					<SearchIndexProvider value={searchContextValue}>
+						{/* Providers Section */}
+						{renderTab === "providers" && (
+							<div>
+								<SectionHeader>{t("settings:sections.providers")}</SectionHeader>
+
+								<Section>
+									{/* <ApiConfigManager
+										currentApiConfigName={currentApiConfigName}
+										listApiConfigMeta={listApiConfigMeta}
+										onSelectConfig={(configName: string) =>
+											checkUnsaveChanges(() =>
+												vscode.postMessage({ type: "loadApiConfiguration", text: configName }),
+											)
+										}
+										onDeleteConfig={(configName: string) =>
+											vscode.postMessage({ type: "deleteApiConfiguration", text: configName })
+										}
+										onRenameConfig={(oldName: string, newName: string) => {
+											vscode.postMessage({
+												type: "renameApiConfiguration",
+												values: { oldName, newName },
+												apiConfiguration,
+											})
+											prevApiConfigName.current = newName
+										}}
+										onUpsertConfig={(configName: string) =>
+											vscode.postMessage({
+												type: "upsertApiConfiguration",
+												text: configName,
+												apiConfiguration,
+											})
+										}
+									/> */}
+									<ApiOptions
+										uriScheme={uriScheme}
+										apiConfiguration={apiConfiguration}
+										setApiConfigurationField={setApiConfigurationField}
+										errorMessage={errorMessage}
+										setErrorMessage={setErrorMessage}
+										useZgsmCustomConfig={useZgsmCustomConfig}
+										setCachedStateField={setCachedStateField}
+									/>
+								</Section>
+							</div>
+						)}
+
+						{/* Auto-Approve Section */}
+						{renderTab === "autoApprove" && (
+							<AutoApproveSettings
+								alwaysAllowReadOnly={alwaysAllowReadOnly}
+								alwaysAllowReadOnlyOutsideWorkspace={alwaysAllowReadOnlyOutsideWorkspace}
+								alwaysAllowWrite={alwaysAllowWrite}
+								alwaysAllowWriteOutsideWorkspace={alwaysAllowWriteOutsideWorkspace}
+								alwaysAllowWriteProtected={alwaysAllowWriteProtected}
+								alwaysAllowBrowser={alwaysAllowBrowser}
+								alwaysAllowMcp={alwaysAllowMcp}
+								alwaysAllowModeSwitch={alwaysAllowModeSwitch}
+								alwaysAllowSubtasks={alwaysAllowSubtasks}
+								alwaysAllowExecute={alwaysAllowExecute}
+								alwaysAllowFollowupQuestions={alwaysAllowFollowupQuestions}
+								followupAutoApproveTimeoutMs={followupAutoApproveTimeoutMs}
+								allowedCommands={allowedCommands}
+								allowedMaxRequests={allowedMaxRequests ?? undefined}
+								allowedMaxCost={allowedMaxCost ?? undefined}
+								deniedCommands={deniedCommands}
+								setCachedStateField={setCachedStateField}
+							/>
+						)}
+
+						{/* Slash Commands Section */}
+						{renderTab === "slashCommands" && <SlashCommandsSettings />}
+
+						{/* Browser Section */}
+						{renderTab === "browser" && (
+							<BrowserSettings
+								browserToolEnabled={browserToolEnabled}
+								browserViewportSize={browserViewportSize}
+								screenshotQuality={screenshotQuality}
+								remoteBrowserHost={remoteBrowserHost}
+								remoteBrowserEnabled={remoteBrowserEnabled}
+								setCachedStateField={setCachedStateField}
+							/>
+						)}
+
+						{/* Checkpoints Section */}
+						{renderTab === "checkpoints" && (
+							<CheckpointSettings
+								enableCheckpoints={enableCheckpoints}
+								checkpointTimeout={checkpointTimeout}
+								setCachedStateField={setCachedStateField}
+							/>
+						)}
+
+						{/* Notifications Section */}
+						{renderTab === "notifications" && (
+							<NotificationSettings
+								ttsEnabled={ttsEnabled}
+								ttsSpeed={ttsSpeed}
+								soundEnabled={soundEnabled}
+								soundVolume={soundVolume}
+								setCachedStateField={setCachedStateField}
+							/>
+						)}
+
+						{/* Context Management Section */}
+						{renderTab === "contextManagement" && (
+							<ContextManagementSettings
+								autoCondenseContext={autoCondenseContext}
+								autoCondenseContextPercent={autoCondenseContextPercent}
+								listApiConfigMeta={listApiConfigMeta ?? []}
+								maxOpenTabsContext={maxOpenTabsContext}
+								maxWorkspaceFiles={maxWorkspaceFiles ?? 300}
+								showRooIgnoredFiles={showRooIgnoredFiles}
+								enableSubfolderRules={enableSubfolderRules}
+								maxReadFileLine={maxReadFileLine}
+								maxReadCharacterLimit={maxReadCharacterLimit}
+								zgsmCodebaseIndexEnabled={zgsmCodebaseIndexEnabled ?? true}
+								maxImageFileSize={maxImageFileSize}
+								maxTotalImageSize={maxTotalImageSize}
+								maxConcurrentFileReads={maxConcurrentFileReads}
+								profileThresholds={profileThresholds}
+								includeDiagnosticMessages={includeDiagnosticMessages}
+								maxDiagnosticMessages={maxDiagnosticMessages}
+								writeDelayMs={writeDelayMs}
+								includeCurrentTime={includeCurrentTime}
+								includeCurrentCost={includeCurrentCost}
+								maxGitStatusFiles={maxGitStatusFiles}
+								setCachedStateField={setCachedStateField}
+							/>
+						)}
+						{/* ZgsmCodebase Section */}
+						{renderTab === "contextManagement" && (
+							<ZgsmCodebaseSettings
+								setCachedStateField={setCachedStateField}
+								isActiveTab={activeTab === "contextManagement"}
+							/>
+						)}
+
+						{/* Terminal Section */}
+						{renderTab === "terminal" && (
+							<TerminalSettings
+								terminalOutputLineLimit={terminalOutputLineLimit}
+								terminalOutputCharacterLimit={terminalOutputCharacterLimit}
+								terminalShellIntegrationTimeout={terminalShellIntegrationTimeout}
+								terminalShellIntegrationDisabled={terminalShellIntegrationDisabled}
+								terminalCommandDelay={terminalCommandDelay}
+								terminalPowershellCounter={terminalPowershellCounter}
+								terminalZshClearEolMark={terminalZshClearEolMark}
+								terminalZshOhMy={terminalZshOhMy}
+								terminalZshP10k={terminalZshP10k}
+								terminalZdotdir={terminalZdotdir}
+								terminalCompressProgressBar={terminalCompressProgressBar}
+								setCachedStateField={setCachedStateField}
+							/>
+						)}
+						{/* Auto Cleanup Section */}
+						{renderTab === "autoCleanup" && (
+							<AutoCleanupSettings autoCleanup={autoCleanup} setCachedStateField={setCachedStateField} />
+						)}
+						{/* Modes Section */}
+						{renderTab === "modes" && <ModesView />}
+
+						{/* MCP Section */}
+						{renderTab === "mcp" && <McpView />}
+
+						{/* Prompts Section */}
+						{renderTab === "prompts" && (
+							<PromptsSettings
+								customSupportPrompts={customSupportPrompts || {}}
+								setCustomSupportPrompts={setCustomSupportPromptsField}
+								includeTaskHistoryInEnhance={includeTaskHistoryInEnhance}
+								setIncludeTaskHistoryInEnhance={(value) =>
+									setCachedStateField("includeTaskHistoryInEnhance", value)
+								}
+							/>
+						)}
+
+						{/* UI Section */}
+						{renderTab === "ui" && (
+							<UISettings
+								reasoningBlockCollapsed={reasoningBlockCollapsed ?? true}
+								showSpeedInfo={showSpeedInfo ?? false}
+								automaticallyFocus={automaticallyFocus ?? false}
+								enterBehavior={enterBehavior ?? "send"}
+								experiments={experiments}
+								apiConfiguration={apiConfiguration}
+								setCachedStateField={setCachedStateField}
+								setExperimentEnabled={setExperimentEnabled}
+							/>
+						)}
+
+						{/* Experimental Section */}
+						{renderTab === "experimental" && (
+							<ExperimentalSettings
+								setExperimentEnabled={setExperimentEnabled}
+								experiments={experiments}
+								apiConfiguration={apiConfiguration}
+								setApiConfigurationField={setApiConfigurationField}
+								imageGenerationProvider={imageGenerationProvider}
+								openRouterImageApiKey={openRouterImageApiKey as string | undefined}
+								openRouterImageGenerationSelectedModel={
+									openRouterImageGenerationSelectedModel as string | undefined
+								}
+								setImageGenerationProvider={setImageGenerationProvider}
+								setOpenRouterImageApiKey={setOpenRouterImageApiKey}
+								setImageGenerationSelectedModel={setImageGenerationSelectedModel}
+							/>
+						)}
+
+						{/* Language Section */}
+						{renderTab === "language" && (
+							<LanguageSettings language={language || "en"} setCachedStateField={setCachedStateField} />
+						)}
+
+						{/* About Section */}
+						{renderTab === "about" && (
+							<About
+								telemetrySetting={telemetrySetting}
+								setTelemetrySetting={setTelemetrySetting}
+								debug={cachedState.debug}
+								setDebug={setDebug}
+							/>
+						)}
+					</SearchIndexProvider>
 				</TabContent>
 			</div>
 
diff --git a/webview-ui/src/components/settings/SlashCommandsSettings.tsx b/webview-ui/src/components/settings/SlashCommandsSettings.tsx
index 14b67ea924..9ad18747e9 100644
--- a/webview-ui/src/components/settings/SlashCommandsSettings.tsx
+++ b/webview-ui/src/components/settings/SlashCommandsSettings.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import { Plus, Globe, Folder, Settings, SquareSlash } from "lucide-react"
+import { Plus, Globe, Folder, Settings } from "lucide-react"
 import { Trans } from "react-i18next"
 
 import type { Command } from "@roo-code/types"
@@ -22,6 +22,7 @@ import { vscode } from "@/utils/vscode"
 
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import { SlashCommandItem } from "../chat/SlashCommandItem"
 
 export const SlashCommandsSettings: React.FC = () => {
@@ -102,16 +103,15 @@ export const SlashCommandsSettings: React.FC = () => {
 
 	return (
 		<div>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<SquareSlash className="w-4" />
-					<div>{t("settings:sections.slashCommands")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.slashCommands")}</SectionHeader>
 
 			<Section>
 				{/* Description section */}
-				<div className="mb-4">
+				<SearchableSetting
+					settingId="slash-commands-description"
+					section="slashCommands"
+					label={t("settings:sections.slashCommands")}
+					className="mb-4">
 					<p className="text-sm text-vscode-descriptionForeground">
 						<Trans
 							i18nKey="settings:slashCommands.description"
@@ -128,10 +128,14 @@ export const SlashCommandsSettings: React.FC = () => {
 							}}
 						/>
 					</p>
-				</div>
+				</SearchableSetting>
 
 				{/* Global Commands Section */}
-				<div className="mb-6">
+				<SearchableSetting
+					settingId="slash-commands-global"
+					section="slashCommands"
+					label={t("chat:slashCommands.globalCommands")}
+					className="mb-6">
 					<div className="flex items-center gap-1.5 mb-2">
 						<Globe className="w-3 h-3" />
 						<h4 className="text-sm font-medium m-0">{t("chat:slashCommands.globalCommands")}</h4>
@@ -169,11 +173,15 @@ export const SlashCommandsSettings: React.FC = () => {
 							</Button>
 						</div>
 					</div>
-				</div>
+				</SearchableSetting>
 
 				{/* Workspace Commands Section - Only show if in a workspace */}
 				{hasWorkspace && (
-					<div className="mb-6">
+					<SearchableSetting
+						settingId="slash-commands-workspace"
+						section="slashCommands"
+						label={t("chat:slashCommands.workspaceCommands")}
+						className="mb-6">
 						<div className="flex items-center gap-1.5 mb-2">
 							<Folder className="w-3 h-3" />
 							<h4 className="text-sm font-medium m-0">{t("chat:slashCommands.workspaceCommands")}</h4>
@@ -211,12 +219,16 @@ export const SlashCommandsSettings: React.FC = () => {
 								</Button>
 							</div>
 						</div>
-					</div>
+					</SearchableSetting>
 				)}
 
 				{/* Built-in Commands Section */}
 				{builtInCommands.length > 0 && (
-					<div className="mb-6">
+					<SearchableSetting
+						settingId="slash-commands-built-in"
+						section="slashCommands"
+						label={t("chat:slashCommands.builtInCommands")}
+						className="mb-6">
 						<div className="flex items-center gap-1.5 mb-2">
 							<Settings className="w-3 h-3" />
 							<h4 className="text-sm font-medium m-0">{t("chat:slashCommands.builtInCommands")}</h4>
@@ -231,7 +243,7 @@ export const SlashCommandsSettings: React.FC = () => {
 								/>
 							))}
 						</div>
-					</div>
+					</SearchableSetting>
 				)}
 			</Section>
 
diff --git a/webview-ui/src/components/settings/TerminalSettings.tsx b/webview-ui/src/components/settings/TerminalSettings.tsx
index 6077c1f1d2..6022bdbeeb 100644
--- a/webview-ui/src/components/settings/TerminalSettings.tsx
+++ b/webview-ui/src/components/settings/TerminalSettings.tsx
@@ -1,7 +1,6 @@
 import { HTMLAttributes, useState, useCallback } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { vscode } from "@/utils/vscode"
-import { SquareTerminal } from "lucide-react"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { Trans } from "react-i18next"
 import { buildDocLink } from "@src/utils/docLinks"
@@ -15,6 +14,7 @@ import { Slider } from "@/components/ui"
 import { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 
 type TerminalSettingsProps = HTMLAttributes<HTMLDivElement> & {
 	terminalOutputLineLimit?: number
@@ -87,12 +87,7 @@ export const TerminalSettings = ({
 
 	return (
 		<div className={cn("flex flex-col", className)} {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<SquareTerminal className="w-4" />
-					<div>{t("settings:sections.terminal")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.terminal")}</SectionHeader>
 
 			<Section>
 				{/* Basic Settings */}
@@ -104,7 +99,10 @@ export const TerminalSettings = ({
 						</div>
 					</div>
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<SearchableSetting
+							settingId="terminal-output-line-limit"
+							section="terminal"
+							label={t("settings:terminal.outputLineLimit.label")}>
 							<label className="block font-medium mb-1">
 								{t("settings:terminal.outputLineLimit.label")}
 							</label>
@@ -131,8 +129,11 @@ export const TerminalSettings = ({
 									</VSCodeLink>
 								</Trans>
 							</div>
-						</div>
-						<div>
+						</SearchableSetting>
+						<SearchableSetting
+							settingId="terminal-output-character-limit"
+							section="terminal"
+							label={t("settings:terminal.outputCharacterLimit.label")}>
 							<label className="block font-medium mb-1">
 								{t("settings:terminal.outputCharacterLimit.label")}
 							</label>
@@ -161,8 +162,11 @@ export const TerminalSettings = ({
 									</VSCodeLink>
 								</Trans>
 							</div>
-						</div>
-						<div>
+						</SearchableSetting>
+						<SearchableSetting
+							settingId="terminal-compress-progress-bar"
+							section="terminal"
+							label={t("settings:terminal.compressProgressBar.label")}>
 							<VSCodeCheckbox
 								checked={terminalCompressProgressBar ?? true}
 								onChange={(e: any) =>
@@ -183,7 +187,7 @@ export const TerminalSettings = ({
 									</VSCodeLink>
 								</Trans>
 							</div>
-						</div>
+						</SearchableSetting>
 					</div>
 				</div>
 
@@ -199,7 +203,10 @@ export const TerminalSettings = ({
 						</div>
 					</div>
 					<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
-						<div>
+						<SearchableSetting
+							settingId="terminal-shell-integration-disabled"
+							section="terminal"
+							label={t("settings:terminal.shellIntegrationDisabled.label")}>
 							<VSCodeCheckbox
 								checked={terminalShellIntegrationDisabled ?? true}
 								onChange={(e: any) =>
@@ -221,11 +228,14 @@ export const TerminalSettings = ({
 									</VSCodeLink>
 								</Trans>
 							</div>
-						</div>
+						</SearchableSetting>
 
 						{!terminalShellIntegrationDisabled && (
 							<>
-								<div>
+								<SearchableSetting
+									settingId="terminal-inherit-env"
+									section="terminal"
+									label={t("settings:terminal.inheritEnv.label")}>
 									<VSCodeCheckbox
 										checked={inheritEnv}
 										onChange={(e: any) => {
@@ -251,9 +261,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-shell-integration-timeout"
+									section="terminal"
+									label={t("settings:terminal.shellIntegrationTimeout.label")}>
 									<label className="block font-medium mb-1">
 										{t("settings:terminal.shellIntegrationTimeout.label")}
 									</label>
@@ -286,9 +299,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-command-delay"
+									section="terminal"
+									label={t("settings:terminal.commandDelay.label")}>
 									<label className="block font-medium mb-1">
 										{t("settings:terminal.commandDelay.label")}
 									</label>
@@ -319,9 +335,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-powershell-counter"
+									section="terminal"
+									label={t("settings:terminal.powershellCounter.label")}>
 									<VSCodeCheckbox
 										checked={terminalPowershellCounter ?? false}
 										onChange={(e: any) =>
@@ -344,9 +363,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-zsh-clear-eol-mark"
+									section="terminal"
+									label={t("settings:terminal.zshClearEolMark.label")}>
 									<VSCodeCheckbox
 										checked={terminalZshClearEolMark ?? true}
 										onChange={(e: any) =>
@@ -369,9 +391,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-zsh-oh-my"
+									section="terminal"
+									label={t("settings:terminal.zshOhMy.label")}>
 									<VSCodeCheckbox
 										checked={terminalZshOhMy ?? false}
 										onChange={(e: any) => setCachedStateField("terminalZshOhMy", e.target.checked)}
@@ -390,9 +415,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-zsh-p10k"
+									section="terminal"
+									label={t("settings:terminal.zshP10k.label")}>
 									<VSCodeCheckbox
 										checked={terminalZshP10k ?? false}
 										onChange={(e: any) => setCachedStateField("terminalZshP10k", e.target.checked)}
@@ -411,9 +439,12 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 
-								<div>
+								<SearchableSetting
+									settingId="terminal-zdotdir"
+									section="terminal"
+									label={t("settings:terminal.zdotdir.label")}>
 									<VSCodeCheckbox
 										checked={terminalZdotdir ?? false}
 										onChange={(e: any) => setCachedStateField("terminalZdotdir", e.target.checked)}
@@ -432,7 +463,7 @@ export const TerminalSettings = ({
 											</VSCodeLink>
 										</Trans>
 									</div>
-								</div>
+								</SearchableSetting>
 							</>
 						)}
 					</div>
diff --git a/webview-ui/src/components/settings/UISettings.tsx b/webview-ui/src/components/settings/UISettings.tsx
index 2b09eaa43f..94bbc5a139 100644
--- a/webview-ui/src/components/settings/UISettings.tsx
+++ b/webview-ui/src/components/settings/UISettings.tsx
@@ -1,7 +1,6 @@
 import { HTMLAttributes, useMemo } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
-import { Glasses } from "lucide-react"
 import { telemetryClient } from "@/utils/TelemetryClient"
 import type { Experiments } from "@roo-code/types"
 import { EXPERIMENT_IDS } from "@roo/experiments"
@@ -9,6 +8,7 @@ import { EXPERIMENT_IDS } from "@roo/experiments"
 import { SetCachedStateField, SetExperimentEnabled } from "./types"
 import { SectionHeader } from "./SectionHeader"
 import { Section } from "./Section"
+import { SearchableSetting } from "./SearchableSetting"
 import { ExtensionStateContextType } from "@/context/ExtensionStateContext"
 
 interface UISettingsProps extends HTMLAttributes<HTMLDivElement> {
@@ -90,80 +90,100 @@ export const UISettings = ({
 
 	return (
 		<div {...props}>
-			<SectionHeader>
-				<div className="flex items-center gap-2">
-					<Glasses className="w-4" />
-					<div>{t("settings:sections.ui")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.ui")}</SectionHeader>
 
 			<Section>
 				<div className="space-y-6">
 					{/* Collapse Thinking Messages Setting */}
-					<div className="flex flex-col gap-1">
-						<VSCodeCheckbox
-							checked={reasoningBlockCollapsed}
-							onChange={(e: any) => handleReasoningBlockCollapsedChange(e.target.checked)}
-							data-testid="collapse-thinking-checkbox">
-							<span className="font-medium">{t("settings:ui.collapseThinking.label")}</span>
-						</VSCodeCheckbox>
-						<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
-							{t("settings:ui.collapseThinking.description")}
+					<SearchableSetting
+						settingId="ui-collapse-thinking"
+						section="ui"
+						label={t("settings:ui.collapseThinking.label")}>
+						<div className="flex flex-col gap-1">
+							<VSCodeCheckbox
+								checked={reasoningBlockCollapsed}
+								onChange={(e: any) => handleReasoningBlockCollapsedChange(e.target.checked)}
+								data-testid="collapse-thinking-checkbox">
+								<span className="font-medium">{t("settings:ui.collapseThinking.label")}</span>
+							</VSCodeCheckbox>
+							<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+								{t("settings:ui.collapseThinking.description")}
+							</div>
 						</div>
-					</div>
+					</SearchableSetting>
 
 					{/* Show Speed Info Setting */}
 					{apiConfiguration?.apiProvider === "zgsm" && (
+						<SearchableSetting
+							settingId="ui-show-speed-info"
+							section="ui"
+							label={t("settings:ui.showSpeedInfo.label")}>
+							<div className="flex flex-col gap-1">
+								<VSCodeCheckbox
+									checked={showSpeedInfo}
+									onChange={(e: any) => handleShowSpeedInfoChange(e.target.checked)}
+									data-testid="show-speed-info-checkbox">
+									<span className="font-medium">{t("settings:ui.showSpeedInfo.label")}</span>
+								</VSCodeCheckbox>
+								<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+									{t("settings:ui.showSpeedInfo.description")}
+								</div>
+							</div>
+						</SearchableSetting>
+					)}
+					{/* Show Speed Info Setting */}
+					<SearchableSetting
+						settingId="ui-automatically-focus"
+						section="ui"
+						label={t("settings:ui.automaticallyFocus.label")}>
 						<div className="flex flex-col gap-1">
 							<VSCodeCheckbox
-								checked={showSpeedInfo}
-								onChange={(e: any) => handleShowSpeedInfoChange(e.target.checked)}
+								checked={automaticallyFocus}
+								onChange={(e: any) => handleAutomaticallyFocusChange(e.target.checked)}
 								data-testid="show-speed-info-checkbox">
-								<span className="font-medium">{t("settings:ui.showSpeedInfo.label")}</span>
+								<span className="font-medium">{t("settings:ui.automaticallyFocus.label")}</span>
 							</VSCodeCheckbox>
 							<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
-								{t("settings:ui.showSpeedInfo.description")}
+								{t("settings:ui.automaticallyFocus.description")}
 							</div>
 						</div>
-					)}
-					{/* Show Speed Info Setting */}
-					<div className="flex flex-col gap-1">
-						<VSCodeCheckbox
-							checked={automaticallyFocus}
-							onChange={(e: any) => handleAutomaticallyFocusChange(e.target.checked)}
-							data-testid="show-speed-info-checkbox">
-							<span className="font-medium">{t("settings:ui.automaticallyFocus.label")}</span>
-						</VSCodeCheckbox>
-						<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
-							{t("settings:ui.automaticallyFocus.description")}
-						</div>
-					</div>
+					</SearchableSetting>
 					{/* Enter Key Behavior Setting */}
-					<div className="flex flex-col gap-1">
-						<VSCodeCheckbox
-							checked={enterBehavior === "newline"}
-							onChange={(e: any) => handleEnterBehaviorChange(e.target.checked)}
-							data-testid="enter-behavior-checkbox">
-							<span className="font-medium">
-								{t("settings:ui.requireCtrlEnterToSend.label", { primaryMod })}
-							</span>
-						</VSCodeCheckbox>
-						<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
-							{t("settings:ui.requireCtrlEnterToSend.description", { primaryMod })}
+					<SearchableSetting
+						settingId="ui-enter-behavior"
+						section="ui"
+						label={t("settings:ui.requireCtrlEnterToSend.label", { primaryMod })}>
+						<div className="flex flex-col gap-1">
+							<VSCodeCheckbox
+								checked={enterBehavior === "newline"}
+								onChange={(e: any) => handleEnterBehaviorChange(e.target.checked)}
+								data-testid="enter-behavior-checkbox">
+								<span className="font-medium">
+									{t("settings:ui.requireCtrlEnterToSend.label", { primaryMod })}
+								</span>
+							</VSCodeCheckbox>
+							<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+								{t("settings:ui.requireCtrlEnterToSend.description", { primaryMod })}
+							</div>
 						</div>
-					</div>
+					</SearchableSetting>
 					{/* Chat Search Setting */}
-					<div className="flex flex-col gap-1">
-						<VSCodeCheckbox
-							checked={experiments[EXPERIMENT_IDS.CHAT_SEARCH] ?? false}
-							onChange={(e: any) => handleChatSearchChange(e.target.checked)}
-							data-testid="chat-search-checkbox">
-							<span className="font-medium">{t("settings:experimental.CHAT_SEARCH.name")}</span>
-						</VSCodeCheckbox>
-						<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
-							{t("settings:experimental.CHAT_SEARCH.description")}
+					<SearchableSetting
+						settingId="ui-chat-search"
+						section="ui"
+						label={t("settings:experimental.CHAT_SEARCH.name")}>
+						<div className="flex flex-col gap-1">
+							<VSCodeCheckbox
+								checked={experiments[EXPERIMENT_IDS.CHAT_SEARCH] ?? false}
+								onChange={(e: any) => handleChatSearchChange(e.target.checked)}
+								data-testid="chat-search-checkbox">
+								<span className="font-medium">{t("settings:experimental.CHAT_SEARCH.name")}</span>
+							</VSCodeCheckbox>
+							<div className="text-vscode-descriptionForeground text-sm ml-5 mt-1">
+								{t("settings:experimental.CHAT_SEARCH.description")}
+							</div>
 						</div>
-					</div>
+					</SearchableSetting>
 				</div>
 			</Section>
 		</div>
diff --git a/webview-ui/src/components/settings/ZgsmCodebaseSettings.tsx b/webview-ui/src/components/settings/ZgsmCodebaseSettings.tsx
index 549099b44e..6a9f4745f1 100644
--- a/webview-ui/src/components/settings/ZgsmCodebaseSettings.tsx
+++ b/webview-ui/src/components/settings/ZgsmCodebaseSettings.tsx
@@ -27,6 +27,7 @@ import { useEvent } from "react-use"
 
 interface ZgsmCodebaseSettingsProps {
 	setCachedStateField?: SetCachedStateField<"zgsmCodebaseIndexEnabled">
+	isActiveTab: boolean
 }
 
 interface IndexStatus {
@@ -86,7 +87,7 @@ const mapIndexStatusInfoToIndexStatus = (statusInfo: IndexStatusInfo, t: (key: s
 	}
 }
 
-export const ZgsmCodebaseSettings = ({ setCachedStateField }: ZgsmCodebaseSettingsProps) => {
+export const ZgsmCodebaseSettings = ({ isActiveTab, setCachedStateField }: ZgsmCodebaseSettingsProps) => {
 	const { t } = useAppTranslation()
 	const { zgsmCodebaseIndexEnabled, apiConfiguration, cwd } = useExtensionState()
 	// Polling related states
@@ -165,7 +166,7 @@ export const ZgsmCodebaseSettings = ({ setCachedStateField }: ZgsmCodebaseSettin
 	// Handle messages from extension
 	useEffect(() => {
 		// 1. Get build status once when page is opened
-		if (zgsmCodebaseIndexEnabled && !isPendingEnable) {
+		if (zgsmCodebaseIndexEnabled && !isPendingEnable && isActiveTab) {
 			// Get status immediately
 			vscode.postMessage({
 				type: "zgsmPollCodebaseIndexStatus",
@@ -185,6 +186,7 @@ export const ZgsmCodebaseSettings = ({ setCachedStateField }: ZgsmCodebaseSettin
 		shouldStopPolling,
 		t,
 		setCachedStateField,
+		isActiveTab,
 	])
 
 	const handleCodebaseIndexToggle = useCallback((e: any) => {
diff --git a/webview-ui/src/components/settings/__tests__/SettingsView.change-detection.spec.tsx b/webview-ui/src/components/settings/__tests__/SettingsView.change-detection.spec.tsx
index ed2407fe7a..694bfb5e26 100644
--- a/webview-ui/src/components/settings/__tests__/SettingsView.change-detection.spec.tsx
+++ b/webview-ui/src/components/settings/__tests__/SettingsView.change-detection.spec.tsx
@@ -42,6 +42,22 @@ vi.mock("@src/components/ui", () => ({
 		</button>
 	),
 	StandardTooltip: ({ children }: any) => <>{children}</>,
+	Popover: ({ children }: any) => <>{children}</>,
+	PopoverTrigger: ({ children }: any) => <>{children}</>,
+	PopoverContent: ({ children }: any) => <div>{children}</div>,
+	Tooltip: ({ children }: any) => <>{children}</>,
+	TooltipProvider: ({ children }: any) => <>{children}</>,
+	TooltipTrigger: ({ children }: any) => <>{children}</>,
+	TooltipContent: ({ children }: any) => <div>{children}</div>,
+}))
+
+// Mock ModesView and McpView since they're rendered during indexing
+vi.mock("@src/components/modes/ModesView", () => ({
+	default: () => null,
+}))
+
+vi.mock("@src/components/mcp/McpView", () => ({
+	default: () => null,
 }))
 
 // Mock Tab components
@@ -109,6 +125,10 @@ vi.mock("../UISettings", () => ({
 	UISettings: () => null,
 }))
 
+vi.mock("../SettingsSearch", () => ({
+	SettingsSearch: () => null,
+}))
+
 describe("SettingsView - Change Detection Fix", () => {
 	let queryClient: QueryClient
 
diff --git a/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx b/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx
index c81a2ab8ad..c849b6662d 100644
--- a/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx
+++ b/webview-ui/src/components/settings/__tests__/SettingsView.spec.tsx
@@ -1,6 +1,6 @@
 // pnpm --filter @roo-code/vscode-webview test src/components/settings/__tests__/SettingsView.spec.tsx
 
-import { render, screen, fireEvent } from "@/utils/test-utils"
+import { render, screen, fireEvent, within } from "@/utils/test-utils"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
 import { vscode } from "@/utils/vscode"
@@ -76,7 +76,9 @@ vi.mock("../../../components/common/Tab", () => ({
 	...vi.importActual("../../../components/common/Tab"),
 	Tab: ({ children }: any) => <div data-testid="tab-container">{children}</div>,
 	TabHeader: ({ children }: any) => <div data-testid="tab-header">{children}</div>,
-	TabContent: ({ children }: any) => <div data-testid="tab-content">{children}</div>,
+	TabContent: ({ children, "data-testid": dataTestId }: any) => (
+		<div data-testid={dataTestId || "tab-content"}>{children}</div>
+	),
 	TabList: ({ children, value, onValueChange, "data-testid": dataTestId }: any) => {
 		// Store onValueChange in a global variable so TabTrigger can access it
 		;(window as any).__onValueChange = onValueChange
@@ -132,8 +134,8 @@ vi.mock("@/components/ui", async (importOriginal) => ({
 	Slider: ({ value, onValueChange, "data-testid": dataTestId }: any) => (
 		<input
 			type="range"
-			value={value[0]}
-			onChange={(e) => onValueChange([parseFloat(e.target.value)])}
+			value={value?.[0] ?? 0}
+			onChange={(e) => onValueChange?.([parseFloat(e.target.value)])}
 			data-testid={dataTestId}
 		/>
 	),
@@ -258,7 +260,10 @@ const renderSettingsView = () => {
 		)
 	}
 
-	return { onDone, activateTab }
+	// Helper to get elements within the settings content (not the indexing container)
+	const getSettingsContent = () => screen.getByTestId("settings-content")
+
+	return { onDone, activateTab, getSettingsContent }
 }
 
 describe("SettingsView - Sound Settings", () => {
@@ -268,40 +273,43 @@ describe("SettingsView - Sound Settings", () => {
 
 	it("initializes with tts disabled by default", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
-		const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
+		const content = getSettingsContent()
+		const ttsCheckbox = within(content).getByTestId("tts-enabled-checkbox")
 		expect(ttsCheckbox).not.toBeChecked()
 
 		// Speed slider should not be visible when tts is disabled
-		expect(screen.queryByTestId("tts-speed-slider")).not.toBeInTheDocument()
+		expect(within(content).queryByTestId("tts-speed-slider")).not.toBeInTheDocument()
 	})
 
 	it("initializes with sound disabled by default", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
-		const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
+		const content = getSettingsContent()
+		const soundCheckbox = within(content).getByTestId("sound-enabled-checkbox")
 		expect(soundCheckbox).not.toBeChecked()
 
 		// Volume slider should not be visible when sound is disabled
-		expect(screen.queryByTestId("sound-volume-slider")).not.toBeInTheDocument()
+		expect(within(content).queryByTestId("sound-volume-slider")).not.toBeInTheDocument()
 	})
 
 	it("toggles tts setting and sends message to VSCode", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
-		const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
+		const content = getSettingsContent()
+		const ttsCheckbox = within(content).getByTestId("tts-enabled-checkbox")
 
 		// Enable tts
 		fireEvent.click(ttsCheckbox)
@@ -323,12 +331,13 @@ describe("SettingsView - Sound Settings", () => {
 
 	it("toggles sound setting and sends message to VSCode", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
-		const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
+		const content = getSettingsContent()
+		const soundCheckbox = within(content).getByTestId("sound-enabled-checkbox")
 
 		// Enable sound
 		fireEvent.click(soundCheckbox)
@@ -350,51 +359,54 @@ describe("SettingsView - Sound Settings", () => {
 
 	it("shows tts slider when sound is enabled", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
+		const content = getSettingsContent()
 		// Enable tts
-		const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
+		const ttsCheckbox = within(content).getByTestId("tts-enabled-checkbox")
 		fireEvent.click(ttsCheckbox)
 
 		// Speed slider should be visible
-		const speedSlider = screen.getByTestId("tts-speed-slider")
+		const speedSlider = within(content).getByTestId("tts-speed-slider")
 		expect(speedSlider).toBeInTheDocument()
 		expect(speedSlider).toHaveValue("1")
 	})
 
 	it("shows volume slider when sound is enabled", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
+		const content = getSettingsContent()
 		// Enable sound
-		const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
+		const soundCheckbox = within(content).getByTestId("sound-enabled-checkbox")
 		fireEvent.click(soundCheckbox)
 
 		// Volume slider should be visible
-		const volumeSlider = screen.getByTestId("sound-volume-slider")
+		const volumeSlider = within(content).getByTestId("sound-volume-slider")
 		expect(volumeSlider).toBeInTheDocument()
 		expect(volumeSlider).toHaveValue("0.5")
 	})
 
 	it("updates speed and sends message to VSCode when slider changes", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
+		const content = getSettingsContent()
 		// Enable tts
-		const ttsCheckbox = screen.getByTestId("tts-enabled-checkbox")
+		const ttsCheckbox = within(content).getByTestId("tts-enabled-checkbox")
 		fireEvent.click(ttsCheckbox)
 
 		// Change speed
-		const speedSlider = screen.getByTestId("tts-speed-slider")
+		const speedSlider = within(content).getByTestId("tts-speed-slider")
 		fireEvent.change(speedSlider, { target: { value: "0.75" } })
 
 		// Click Save to save settings
@@ -414,22 +426,23 @@ describe("SettingsView - Sound Settings", () => {
 
 	it("updates volume and sends message to VSCode when slider changes", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the notifications tab
 		activateTab("notifications")
 
+		const content = getSettingsContent()
 		// Enable sound
-		const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
+		const soundCheckbox = within(content).getByTestId("sound-enabled-checkbox")
 		fireEvent.click(soundCheckbox)
 
 		// Change volume
-		const volumeSlider = screen.getByTestId("sound-volume-slider")
+		const volumeSlider = within(content).getByTestId("sound-volume-slider")
 		fireEvent.change(volumeSlider, { target: { value: "0.75" } })
 
-		// Click Save to save settings - use getAllByTestId to handle multiple elements
-		const saveButtons = screen.getAllByTestId("save-button")
-		fireEvent.click(saveButtons[0])
+		// Click Save to save settings
+		const saveButton = screen.getByTestId("save-button")
+		fireEvent.click(saveButton)
 
 		// Verify message sent to VSCode
 		expect(vscode.postMessage).toHaveBeenCalledWith(
@@ -462,39 +475,41 @@ describe("SettingsView - Allowed Commands", () => {
 
 	it("shows allowed commands section when alwaysAllowExecute is enabled", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the autoApprove tab
 		activateTab("autoApprove")
 
+		const content = getSettingsContent()
 		// Enable always allow execute
-		const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
 		fireEvent.click(executeCheckbox)
 		// Verify allowed commands section appears
-		expect(screen.getByTestId("allowed-commands-heading")).toBeInTheDocument()
-		expect(screen.getByTestId("command-input")).toBeInTheDocument()
+		expect(within(content).getByTestId("allowed-commands-heading")).toBeInTheDocument()
+		expect(within(content).getByTestId("command-input")).toBeInTheDocument()
 	})
 
 	it("adds new command to the list", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the autoApprove tab
 		activateTab("autoApprove")
 
+		const content = getSettingsContent()
 		// Enable always allow execute
-		const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
 		fireEvent.click(executeCheckbox)
 
 		// Add a new command
-		const input = screen.getByTestId("command-input")
+		const input = within(content).getByTestId("command-input")
 		fireEvent.change(input, { target: { value: "npm test" } })
 
-		const addButton = screen.getByTestId("add-command-button")
+		const addButton = within(content).getByTestId("add-command-button")
 		fireEvent.click(addButton)
 
 		// Verify command was added
-		expect(screen.getByText("npm test")).toBeInTheDocument()
+		expect(within(content).getByText("npm test")).toBeInTheDocument()
 
 		// Verify VSCode message was sent
 		expect(vscode.postMessage).toHaveBeenCalledWith({
@@ -507,27 +522,28 @@ describe("SettingsView - Allowed Commands", () => {
 
 	it("removes command from the list", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the autoApprove tab
 		activateTab("autoApprove")
 
+		const content = getSettingsContent()
 		// Enable always allow execute
-		const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
 		fireEvent.click(executeCheckbox)
 
 		// Add a command
-		const input = screen.getByTestId("command-input")
+		const input = within(content).getByTestId("command-input")
 		fireEvent.change(input, { target: { value: "npm test" } })
-		const addButton = screen.getByTestId("add-command-button")
+		const addButton = within(content).getByTestId("add-command-button")
 		fireEvent.click(addButton)
 
 		// Remove the command
-		const removeButton = screen.getByTestId("remove-command-0")
+		const removeButton = within(content).getByTestId("remove-command-0")
 		fireEvent.click(removeButton)
 
 		// Verify command was removed
-		expect(screen.queryByText("npm test")).not.toBeInTheDocument()
+		expect(within(content).queryByText("npm test")).not.toBeInTheDocument()
 
 		// Verify VSCode message was sent
 		expect(vscode.postMessage).toHaveBeenLastCalledWith({
@@ -556,13 +572,14 @@ describe("SettingsView - Allowed Commands", () => {
 
 		it("shows unsaved changes dialog when clicking Done with unsaved changes", () => {
 			// Render once and get the activateTab helper
-			const { activateTab } = renderSettingsView()
+			const { activateTab, getSettingsContent } = renderSettingsView()
 
 			// Activate the notifications tab
 			activateTab("notifications")
 
+			const content = getSettingsContent()
 			// Make a change to create unsaved changes
-			const soundCheckbox = screen.getByTestId("sound-enabled-checkbox")
+			const soundCheckbox = within(content).getByTestId("sound-enabled-checkbox")
 			fireEvent.click(soundCheckbox)
 
 			// Click the Done button
@@ -599,18 +616,19 @@ describe("SettingsView - Duplicate Commands", () => {
 
 	it("prevents duplicate commands", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the autoApprove tab
 		activateTab("autoApprove")
 
+		const content = getSettingsContent()
 		// Enable always allow execute
-		const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
 		fireEvent.click(executeCheckbox)
 
 		// Add a command twice
-		const input = screen.getByTestId("command-input")
-		const addButton = screen.getByTestId("add-command-button")
+		const input = within(content).getByTestId("command-input")
+		const addButton = within(content).getByTestId("add-command-button")
 
 		// First addition
 		fireEvent.change(input, { target: { value: "npm test" } })
@@ -620,31 +638,32 @@ describe("SettingsView - Duplicate Commands", () => {
 		fireEvent.change(input, { target: { value: "npm test" } })
 		fireEvent.click(addButton)
 
-		// Verify command appears only once
-		const commands = screen.getAllByText("npm test")
+		// Verify command appears only once in active tab
+		const commands = within(content).getAllByText("npm test")
 		expect(commands).toHaveLength(1)
 	})
 
 	it("saves allowed commands when clicking Save", () => {
 		// Render once and get the activateTab helper
-		const { activateTab } = renderSettingsView()
+		const { activateTab, getSettingsContent } = renderSettingsView()
 
 		// Activate the autoApprove tab
 		activateTab("autoApprove")
 
+		const content = getSettingsContent()
 		// Enable always allow execute
-		const executeCheckbox = screen.getByTestId("always-allow-execute-toggle")
+		const executeCheckbox = within(content).getByTestId("always-allow-execute-toggle")
 		fireEvent.click(executeCheckbox)
 
 		// Add a command
-		const input = screen.getByTestId("command-input")
+		const input = within(content).getByTestId("command-input")
 		fireEvent.change(input, { target: { value: "npm test" } })
-		const addButton = screen.getByTestId("add-command-button")
+		const addButton = within(content).getByTestId("add-command-button")
 		fireEvent.click(addButton)
 
-		// Click Save - use getAllByTestId to handle multiple elements
-		const saveButtons = screen.getAllByTestId("save-button")
-		fireEvent.click(saveButtons[0])
+		// Click Save
+		const saveButton = screen.getByTestId("save-button")
+		fireEvent.click(saveButton)
 
 		// Verify VSCode messages were sent
 		expect(vscode.postMessage).toHaveBeenCalledWith(
diff --git a/webview-ui/src/components/settings/__tests__/SettingsView.unsaved-changes.spec.tsx b/webview-ui/src/components/settings/__tests__/SettingsView.unsaved-changes.spec.tsx
index 22b1db58c4..50885a53c9 100644
--- a/webview-ui/src/components/settings/__tests__/SettingsView.unsaved-changes.spec.tsx
+++ b/webview-ui/src/components/settings/__tests__/SettingsView.unsaved-changes.spec.tsx
@@ -47,6 +47,18 @@ vi.mock("@src/components/ui", () => ({
 	TooltipProvider: ({ children }: any) => <>{children}</>,
 	TooltipTrigger: ({ children }: any) => <>{children}</>,
 	StandardTooltip: ({ children, content }: any) => <div title={content}>{children}</div>,
+	Popover: ({ children }: any) => <>{children}</>,
+	PopoverTrigger: ({ children }: any) => <>{children}</>,
+	PopoverContent: ({ children }: any) => <div>{children}</div>,
+}))
+
+// Mock ModesView and McpView since they're rendered during indexing
+vi.mock("@src/components/modes/ModesView", () => ({
+	default: () => null,
+}))
+
+vi.mock("@src/components/mcp/McpView", () => ({
+	default: () => null,
 }))
 
 // Mock Tab components
@@ -115,6 +127,9 @@ vi.mock("../SectionHeader", () => ({
 vi.mock("../Section", () => ({
 	Section: ({ children }: any) => <div>{children}</div>,
 }))
+vi.mock("../SettingsSearch", () => ({
+	SettingsSearch: () => null,
+}))
 
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import ApiOptions from "../ApiOptions"
diff --git a/webview-ui/src/components/settings/__tests__/ZgsmCodebaseSettings.spec.tsx b/webview-ui/src/components/settings/__tests__/ZgsmCodebaseSettings.spec.tsx
index 5fe035d1ee..5874e062ef 100644
--- a/webview-ui/src/components/settings/__tests__/ZgsmCodebaseSettings.spec.tsx
+++ b/webview-ui/src/components/settings/__tests__/ZgsmCodebaseSettings.spec.tsx
@@ -123,6 +123,7 @@ const renderZgsmCodebaseSettings = (props: TestProps = {}) => {
 
 	const defaultProps = {
 		setCachedStateField: vi.fn(),
+		isActiveTab: true,
 		...props,
 	}
 
diff --git a/webview-ui/src/components/settings/useSettingsSearch.ts b/webview-ui/src/components/settings/useSettingsSearch.ts
new file mode 100644
index 0000000000..9b2c4648c5
--- /dev/null
+++ b/webview-ui/src/components/settings/useSettingsSearch.ts
@@ -0,0 +1,153 @@
+import { useState, useMemo, useCallback, useRef, createContext, useContext } from "react"
+import { Fzf } from "fzf"
+
+import { SectionName } from "./SettingsView"
+
+export interface SearchableSettingData {
+	settingId: string
+	section: SectionName
+	label: string
+	sectionLabel: string
+}
+
+export interface SearchResult {
+	settingId: string
+	section: SectionName
+	label: string
+	sectionLabel: string
+	/** Character positions that matched the search query (for highlighting) */
+	positions: Set<number>
+}
+
+/**
+ * Context for collecting searchable settings as they mount.
+ * This allows building the search index without rendering all sections.
+ */
+interface SearchIndexContextValue {
+	registerSetting: (setting: Omit<SearchableSettingData, "sectionLabel">) => void
+}
+
+const SearchIndexContext = createContext<SearchIndexContextValue | null>(null)
+
+export const SearchIndexProvider = SearchIndexContext.Provider
+
+export function useSearchIndexContext() {
+	return useContext(SearchIndexContext)
+}
+
+/**
+ * Hook to create a search index registry.
+ * Returns the context value and the current index.
+ */
+export function useSearchIndexRegistry(getSectionLabel: (section: SectionName) => string) {
+	const settingsRef = useRef<Map<string, Omit<SearchableSettingData, "sectionLabel">>>(new Map())
+	const [index, setIndex] = useState<SearchableSettingData[]>([])
+	const updateScheduled = useRef(false)
+
+	const scheduleUpdate = useCallback(() => {
+		if (updateScheduled.current) return
+		updateScheduled.current = true
+
+		// Batch updates to avoid frequent re-renders
+		requestAnimationFrame(() => {
+			const settings = Array.from(settingsRef.current.values()).map((s) => ({
+				...s,
+				sectionLabel: getSectionLabel(s.section),
+			}))
+			setIndex(settings)
+			updateScheduled.current = false
+		})
+	}, [getSectionLabel])
+
+	const contextValue = useMemo<SearchIndexContextValue>(
+		() => ({
+			registerSetting: (setting) => {
+				settingsRef.current.set(setting.settingId, setting)
+				scheduleUpdate()
+			},
+		}),
+		[scheduleUpdate],
+	)
+
+	return { contextValue, index }
+}
+
+/**
+ * Scan the DOM for searchable settings within a container.
+ * This is called once on mount to build the index.
+ */
+export function scanDOMForSearchableSettings(
+	container: Element,
+	getSectionLabel: (section: SectionName) => string,
+): SearchableSettingData[] {
+	const settings: SearchableSettingData[] = []
+	const elements = container.querySelectorAll("[data-searchable]")
+
+	elements.forEach((el) => {
+		const settingId = el.getAttribute("data-setting-id")
+		const section = el.getAttribute("data-setting-section") as SectionName | null
+		const label = el.getAttribute("data-setting-label")
+
+		if (settingId && section && label) {
+			settings.push({
+				settingId,
+				section,
+				label,
+				sectionLabel: getSectionLabel(section),
+			})
+		}
+	})
+
+	return settings
+}
+
+interface UseSettingsSearchOptions {
+	index: SearchableSettingData[]
+}
+
+/**
+ * Hook for searching settings using fuzzy matching.
+ */
+export function useSettingsSearch({ index }: UseSettingsSearchOptions) {
+	const [searchQuery, setSearchQuery] = useState("")
+	const [isOpen, setIsOpen] = useState(false)
+
+	// Create Fzf instance for fuzzy searching
+	const fzf = useMemo(
+		() =>
+			new Fzf(index, {
+				selector: (item) => `${item.label} ${item.sectionLabel}`,
+			}),
+		[index],
+	)
+
+	// Search results
+	const results = useMemo((): SearchResult[] => {
+		if (!searchQuery.trim()) {
+			return []
+		}
+
+		const fzfResults = fzf.find(searchQuery)
+		return fzfResults.slice(0, 10).map((result) => ({
+			settingId: result.item.settingId,
+			section: result.item.section,
+			label: result.item.label,
+			sectionLabel: result.item.sectionLabel,
+			positions: result.positions,
+		}))
+	}, [fzf, searchQuery])
+
+	const clearSearch = useCallback(() => {
+		setSearchQuery("")
+		setIsOpen(false)
+	}, [])
+
+	return {
+		searchQuery,
+		setSearchQuery,
+		results,
+		isOpen,
+		setIsOpen,
+		clearSearch,
+	}
+}
diff --git a/webview-ui/src/i18n/costrict-i18n/locales/en/chat.json b/webview-ui/src/i18n/costrict-i18n/locales/en/chat.json
index 79282472a4..81a9cd7b8b 100644
--- a/webview-ui/src/i18n/costrict-i18n/locales/en/chat.json
+++ b/webview-ui/src/i18n/costrict-i18n/locales/en/chat.json
@@ -1,5 +1,18 @@
 {
-	"greeting": "What can CoStrict do for you?",
+	"reasoning": {
+		"thinking": "Thinking",
+		"seconds_one": "{{count}} second",
+		"seconds_other": "{{count}} seconds",
+		"thinkingMessages": [
+			"Thinking...",
+			"Building thoughts...",
+			"Analyzing...",
+			"Organizing information...",
+			"Thinking...",
+			"Reasoning...",
+			"Conceptualizing..."
+		]
+	},
 	"aboutMe": "Thanks to the latest breakthroughs in agentic coding capabilities, I can handle complex software development tasks step-by-step. With tools that let me create & edit files, explore complex projects, use the browser, and execute terminal commands (after you grant permission), I can assist you in ways that go beyond code completion or tech support. I can even use MCP to create new tools and extend my own capabilities.",
 	"instructions": {
 		"wantsToFetch": "CoStrict wants to fetch detailed instructions to assist with the current task"
diff --git a/webview-ui/src/i18n/costrict-i18n/locales/zh-CN/chat.json b/webview-ui/src/i18n/costrict-i18n/locales/zh-CN/chat.json
index d40b1c7a70..755546dbdc 100644
--- a/webview-ui/src/i18n/costrict-i18n/locales/zh-CN/chat.json
+++ b/webview-ui/src/i18n/costrict-i18n/locales/zh-CN/chat.json
@@ -1,4 +1,17 @@
 {
+	"reasoning": {
+		"thinking": "思考",
+		"seconds": "{{count}} 秒",
+		"thinkingMessages": [
+			"正在思考...",
+			"构建思路中...",
+			"分析问题中...",
+			"整理信息...",
+			"思考中...",
+			"正在推理...",
+			"构思中..."
+		]
+	},
 	"greeting": "CoStrict 能为您做什么？",
 	"aboutMe": "得益于最新的代理编码能力突破，我可以逐步处理复杂的软件开发任务。通过允许我创建和编辑文件、探索复杂项目、使用浏览器以及执行终端命令（在您授予权限后）的工具，我可以以超越代码补全或技术支持的方式协助您。我甚至可以使用MCP创建新工具并扩展自己的能力。",
 	"instructions": {
diff --git a/webview-ui/src/i18n/costrict-i18n/locales/zh-TW/chat.json b/webview-ui/src/i18n/costrict-i18n/locales/zh-TW/chat.json
index c3d7d5f04a..7b9a884700 100644
--- a/webview-ui/src/i18n/costrict-i18n/locales/zh-TW/chat.json
+++ b/webview-ui/src/i18n/costrict-i18n/locales/zh-TW/chat.json
@@ -1,4 +1,17 @@
 {
+	"reasoning": {
+		"thinking": "思考",
+		"seconds": "{{count}} 秒",
+		"thinkingMessages": [
+			"正在思考...",
+			"建構思緒中...",
+			"分析問題中...",
+			"整理資訊...",
+			"思考中...",
+			"正在推理...",
+			"構思中..."
+		]
+	},
 	"greeting": "CoStrict 可以為您做些什麼？",
 	"aboutMe": "得益於最新的代理編碼能力突破，我可以逐步處理複雜的軟件開發任務。通過允許我創建和編輯文件、探索複雜項目、使用瀏覽器以及執行終端命令（在您授予權限後）的工具，我可以以超越代碼補全或技術支持的方式協助您。我甚至可以使用MCP創建新工具並擴展自己的能力。",
 	"instructions": {
diff --git a/webview-ui/src/i18n/locales/en/settings.json b/webview-ui/src/i18n/locales/en/settings.json
index e109452d81..3f112c2f6f 100644
--- a/webview-ui/src/i18n/locales/en/settings.json
+++ b/webview-ui/src/i18n/locales/en/settings.json
@@ -1,4 +1,5 @@
 {
+	"back": "Back to tasks view",
 	"common": {
 		"save": "Save",
 		"saving": "Saving...",
@@ -13,7 +14,11 @@
 		"title": "Settings",
 		"saveButtonTooltip": "Save changes",
 		"nothingChangedTooltip": "Nothing changed",
-		"doneButtonTooltip": "Discard unsaved changes and close settings panel"
+		"doneButtonTooltip": "Discard unsaved changes and go back to tasks view"
+	},
+	"search": {
+		"placeholder": "Search settings...",
+		"noResults": "No settings found"
 	},
 	"unsavedChangesDialog": {
 		"title": "Unsaved Changes",
diff --git a/webview-ui/src/i18n/locales/zh-CN/settings.json b/webview-ui/src/i18n/locales/zh-CN/settings.json
index 4301f0b3a7..d0ead994b1 100644
--- a/webview-ui/src/i18n/locales/zh-CN/settings.json
+++ b/webview-ui/src/i18n/locales/zh-CN/settings.json
@@ -1,4 +1,5 @@
 {
+	"back": "返回任务视图",
 	"common": {
 		"save": "保存",
 		"saving": "保存中...",
@@ -9,6 +10,10 @@
 		"add": "添加标头",
 		"remove": "移除"
 	},
+	"search": {
+		"placeholder": "搜索设置...",
+		"noResults": "未找到设置"
+	},
 	"header": {
 		"title": "设置",
 		"saveButtonTooltip": "保存更改",
diff --git a/webview-ui/src/i18n/locales/zh-TW/settings.json b/webview-ui/src/i18n/locales/zh-TW/settings.json
index 9e8750a139..2d0ff5aa87 100644
--- a/webview-ui/src/i18n/locales/zh-TW/settings.json
+++ b/webview-ui/src/i18n/locales/zh-TW/settings.json
@@ -1,4 +1,5 @@
 {
+	"back": "返回工作檢視",
 	"common": {
 		"save": "儲存",
 		"saving": "儲存中...",
@@ -9,6 +10,10 @@
 		"add": "新增標頭",
 		"remove": "移除"
 	},
+	"search": {
+		"placeholder": "搜尋設定...",
+		"noResults": "找不到設定"
+	},
 	"header": {
 		"title": "設定",
 		"saveButtonTooltip": "儲存變更",
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index a61993d314..d2b807a539 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -578,3 +578,20 @@ input[cmdk-input]:focus {
 .animate-sun {
 	animation: sun 30s linear infinite;
 }
+
+/* Settings search highlight animation */
+@keyframes settings-highlight-fade {
+	0% {
+		background-color: color-mix(in srgb, var(--vscode-focusBorder) 40%, transparent);
+	}
+	100% {
+		background-color: transparent;
+	}
+}
+
+.settings-highlight {
+	animation: settings-highlight-fade 1.5s ease-out forwards;
+	border-radius: 4px;
+	padding: 8px;
+	margin: -8px;
+}