Merge branch 'main' into feature/roo-473-show-all-tool-uses-immediately-rather-than-on-partial-false

src/api/providers/openrouter.ts

@@ -220,7 +220,8 @@ export class OpenRouterHandler extends BaseProvider implements SingleCompletionH
 		// even if you don't request them. This is not the default for
 		// other providers (including Gemini), so we need to explicitly disable
 		// them unless the user has explicitly configured reasoning.
-		// Note: Gemini 3 models use reasoning_details format and should not be excluded.
+		// Note: Gemini 3 models use reasoning_details format with thought signatures,
+		// but we handle this via skip_thought_signature_validator injection below.
 		if (
 			(modelId === "google/gemini-2.5-pro-preview" || modelId === "google/gemini-2.5-pro") &&
 			typeof reasoning === "undefined"
@@ -250,8 +251,13 @@ export class OpenRouterHandler extends BaseProvider implements SingleCompletionH
 		const isNativeProtocol = toolProtocol === TOOL_PROTOCOL.NATIVE
 		const isGemini = modelId.startsWith("google/gemini")
 
-		// For Gemini with native protocol: inject fake reasoning.encrypted blocks for tool calls
-		// This is required when switching from other models to Gemini to satisfy API validation
+		// For Gemini with native protocol: inject fake reasoning.encrypted block for tool calls
+		// This is required when switching from other models to Gemini to satisfy API validation.
+		// Per OpenRouter documentation (conversation with Toven, Nov 2025):
+		// - Create ONE reasoning_details entry per assistant message with tool calls
+		// - Set `id` to the FIRST tool call's ID from the tool_calls array
+		// - Set `data` to "skip_thought_signature_validator" to bypass signature validation
+		// - Set `index` to 0
 		if (isNativeProtocol && isGemini) {
 			openAiMessages = openAiMessages.map((msg) => {
 				if (msg.role === "assistant") {
@@ -263,17 +269,19 @@ export class OpenRouterHandler extends BaseProvider implements SingleCompletionH
 						const hasEncrypted = existingDetails?.some((d) => d.type === "reasoning.encrypted") ?? false
 
 						if (!hasEncrypted) {
-							const fakeEncrypted = toolCalls.map((tc, idx) => ({
-								id: tc.id,
+							// Create ONE fake encrypted block with the FIRST tool call's ID
+							// This is the documented format from OpenRouter for skipping thought signature validation
+							const fakeEncrypted = {
 								type: "reasoning.encrypted",
 								data: "skip_thought_signature_validator",
+								id: toolCalls[0].id,
 								format: "google-gemini-v1",
-								index: (existingDetails?.length ?? 0) + idx,
-							}))
+								index: 0,
+							}
 
 							return {
 								...msg,
-								reasoning_details: [...(existingDetails ?? []), ...fakeEncrypted],
+								reasoning_details: [...(existingDetails ?? []), fakeEncrypted],
 							}
 						}
 					}

src/core/assistant-message/NativeToolCallParser.ts

@@ -16,7 +16,7 @@ import type {
 	ApiStreamToolCallDeltaChunk,
 	ApiStreamToolCallEndChunk,
 } from "../../api/transform/stream"
-import { MCP_TOOL_PREFIX, MCP_TOOL_SEPARATOR, parseMcpToolName } from "../../utils/mcp-name"
+import { MCP_TOOL_PREFIX, MCP_TOOL_SEPARATOR, parseMcpToolName, normalizeMcpToolName } from "../../utils/mcp-name"
 
 /**
  * Helper type to extract properly typed native arguments for a given tool.
@@ -52,7 +52,7 @@ export type ToolCallStreamEvent = ApiStreamToolCallStartChunk | ApiStreamToolCal
  */
 export class NativeToolCallParser {
 	// Streaming state management for argument accumulation (keyed by tool call id)
-	// Note: name is string to accommodate dynamic MCP tools (mcp_serverName_toolName)
+	// Note: name is string to accommodate dynamic MCP tools (mcp--serverName--toolName)
 	private static streamingToolCalls = new Map<
 		string,
 		{
@@ -199,7 +199,7 @@ export class NativeToolCallParser {
 	/**
 	 * Start streaming a new tool call.
 	 * Initializes tracking for incremental argument parsing.
-	 * Accepts string to support both ToolName and dynamic MCP tools (mcp_serverName_toolName).
+	 * Accepts string to support both ToolName and dynamic MCP tools (mcp--serverName--toolName).
 	 */
 	public static startStreamingToolCall(id: string, name: string): void {
 		this.streamingToolCalls.set(id, {
@@ -575,10 +575,16 @@ export class NativeToolCallParser {
 		arguments: string
 	}): ToolUse<TName> | McpToolUse | null {
 		// Check if this is a dynamic MCP tool (mcp--serverName--toolName)
+		// Also handle models that output underscores instead of hyphens (mcp__serverName__toolName)
 		const mcpPrefix = MCP_TOOL_PREFIX + MCP_TOOL_SEPARATOR
 
-		if (typeof toolCall.name === "string" && toolCall.name.startsWith(mcpPrefix)) {
-			return this.parseDynamicMcpTool(toolCall)
+		if (typeof toolCall.name === "string") {
+			// Normalize the tool name to handle models that output underscores instead of hyphens
+			const normalizedName = normalizeMcpToolName(toolCall.name)
+			if (normalizedName.startsWith(mcpPrefix)) {
+				// Pass the original tool call but with normalized name for parsing
+				return this.parseDynamicMcpTool({ ...toolCall, name: normalizedName })
+			}
 		}
 
 		// Resolve tool alias to canonical name
@@ -865,11 +871,15 @@ export class NativeToolCallParser {
 			// Parse the arguments - these are the actual tool arguments passed directly
 			const args = JSON.parse(toolCall.arguments || "{}")
 
+			// Normalize the tool name to handle models that output underscores instead of hyphens
+			// e.g., mcp__serverName__toolName -> mcp--serverName--toolName
+			const normalizedName = normalizeMcpToolName(toolCall.name)
+
 			// Extract server_name and tool_name from the tool name itself
 			// Format: mcp--serverName--toolName (using -- separator)
-			const parsed = parseMcpToolName(toolCall.name)
+			const parsed = parseMcpToolName(normalizedName)
 			if (!parsed) {
-				console.error(`Invalid dynamic MCP tool name format: ${toolCall.name}`)
+				console.error(`Invalid dynamic MCP tool name format: ${toolCall.name} (normalized: ${normalizedName})`)
 				return null
 			}
 

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"
 
@@ -89,7 +88,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(

src/core/prompts/tools/native-tools/__tests__/mcp_server.spec.ts

@@ -89,7 +89,7 @@ describe("getMcpServerTools", () => {
 
 		// Should only have one tool (from project server)
 		expect(result).toHaveLength(1)
-		expect(getFunction(result[0]).name).toBe("mcp--context7--resolve-library-id")
+		expect(getFunction(result[0]).name).toBe("mcp--context7--resolve___library___id")
 		// Project server takes priority
 		expect(getFunction(result[0]).description).toBe("Project description")
 	})

src/core/task/Task.ts

@@ -90,6 +90,7 @@ import { TerminalRegistry } from "../../integrations/terminal/TerminalRegistry"
 // utils
 import { calculateApiCostAnthropic, calculateApiCostOpenAI } from "../../shared/cost"
 import { getWorkspacePath } from "../../utils/path"
+import { sanitizeToolUseId } from "../../utils/tool-id"
 
 // prompts
 import { formatResponse } from "../prompts/responses"
@@ -3435,7 +3436,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 							if (mcpBlock.id) {
 								assistantContent.push({
 									type: "tool_use" as const,
-									id: mcpBlock.id,
+									id: sanitizeToolUseId(mcpBlock.id),
 									name: mcpBlock.name, // Original dynamic name
 									input: mcpBlock.arguments, // Direct tool arguments
 								})
@@ -3456,7 +3457,7 @@ export class Task extends EventEmitter<TaskEvents> implements TaskLike {
 
 								assistantContent.push({
 									type: "tool_use" as const,
-									id: toolCallId,
+									id: sanitizeToolUseId(toolCallId),
 									name: toolNameForHistory,
 									input,
 								})

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 })

src/utils/__tests__/mcp-name.spec.ts

@@ -2,9 +2,12 @@ import {
 	sanitizeMcpName,
 	buildMcpToolName,
 	parseMcpToolName,
+	decodeMcpName,
+	normalizeMcpToolName,
 	isMcpTool,
 	MCP_TOOL_SEPARATOR,
 	MCP_TOOL_PREFIX,
+	HYPHEN_ENCODING,
 } from "../mcp-name"
 
 describe("mcp-name utilities", () => {
@@ -13,6 +16,10 @@ describe("mcp-name utilities", () => {
 			expect(MCP_TOOL_SEPARATOR).toBe("--")
 			expect(MCP_TOOL_PREFIX).toBe("mcp")
 		})
+
+		it("should have correct hyphen encoding", () => {
+			expect(HYPHEN_ENCODING).toBe("___")
+		})
 	})
 
 	describe("isMcpTool", () => {
@@ -53,9 +60,10 @@ describe("mcp-name utilities", () => {
 			expect(sanitizeMcpName("test#$%^&*()")).toBe("test")
 		})
 
-		it("should keep valid characters (alphanumeric, underscore, dash)", () => {
+		it("should keep alphanumeric and underscores, but encode hyphens", () => {
 			expect(sanitizeMcpName("server_name")).toBe("server_name")
-			expect(sanitizeMcpName("server-name")).toBe("server-name")
+			// Hyphens are now encoded as triple underscores
+			expect(sanitizeMcpName("server-name")).toBe("server___name")
 			expect(sanitizeMcpName("Server123")).toBe("Server123")
 		})
 
@@ -63,12 +71,16 @@ describe("mcp-name utilities", () => {
 			// Dots and colons are NOT allowed due to AWS Bedrock restrictions
 			expect(sanitizeMcpName("server.name")).toBe("servername")
 			expect(sanitizeMcpName("server:name")).toBe("servername")
-			expect(sanitizeMcpName("awslabs.aws-documentation-mcp-server")).toBe("awslabsaws-documentation-mcp-server")
+			// Hyphens are encoded as triple underscores
+			expect(sanitizeMcpName("awslabs.aws-documentation-mcp-server")).toBe(
+				"awslabsaws___documentation___mcp___server",
+			)
 		})
 
 		it("should prepend underscore if name starts with non-letter/underscore", () => {
 			expect(sanitizeMcpName("123server")).toBe("_123server")
-			expect(sanitizeMcpName("-server")).toBe("_-server")
+			// Hyphen at start is encoded to ___, which starts with underscore (valid)
+			expect(sanitizeMcpName("-server")).toBe("___server")
 			// Dots are removed, so ".server" becomes "server" which starts with a letter
 			expect(sanitizeMcpName(".server")).toBe("server")
 		})
@@ -79,15 +91,17 @@ describe("mcp-name utilities", () => {
 			expect(sanitizeMcpName("Server")).toBe("Server")
 		})
 
-		it("should replace double-hyphen sequences with single hyphen to avoid separator conflicts", () => {
-			expect(sanitizeMcpName("server--name")).toBe("server-name")
-			expect(sanitizeMcpName("test---server")).toBe("test-server")
-			expect(sanitizeMcpName("my----tool")).toBe("my-tool")
+		it("should replace double-hyphen sequences with single hyphen then encode", () => {
+			// Double hyphens become single hyphen, then encoded as ___
+			expect(sanitizeMcpName("server--name")).toBe("server___name")
+			expect(sanitizeMcpName("test---server")).toBe("test___server")
+			expect(sanitizeMcpName("my----tool")).toBe("my___tool")
 		})
 
 		it("should handle complex names with multiple issues", () => {
 			expect(sanitizeMcpName("My Server @ Home!")).toBe("My_Server__Home")
-			expect(sanitizeMcpName("123-test server")).toBe("_123-test_server")
+			// Hyphen is encoded as ___
+			expect(sanitizeMcpName("123-test server")).toBe("_123___test_server")
 		})
 
 		it("should return placeholder for names that become empty after sanitization", () => {
@@ -95,6 +109,28 @@ describe("mcp-name utilities", () => {
 			// Spaces become underscores, which is a valid character, so it returns "_"
 			expect(sanitizeMcpName("   ")).toBe("_")
 		})
+
+		it("should encode hyphens as triple underscores for model compatibility", () => {
+			// This is the key feature: hyphens are encoded so they survive model tool calling
+			expect(sanitizeMcpName("atlassian-jira_search")).toBe("atlassian___jira_search")
+			expect(sanitizeMcpName("atlassian-confluence_search")).toBe("atlassian___confluence_search")
+		})
+	})
+
+	describe("decodeMcpName", () => {
+		it("should decode triple underscores back to hyphens", () => {
+			expect(decodeMcpName("server___name")).toBe("server-name")
+			expect(decodeMcpName("atlassian___jira_search")).toBe("atlassian-jira_search")
+		})
+
+		it("should not modify names without triple underscores", () => {
+			expect(decodeMcpName("server_name")).toBe("server_name")
+			expect(decodeMcpName("tool")).toBe("tool")
+		})
+
+		it("should handle multiple encoded hyphens", () => {
+			expect(decodeMcpName("a___b___c")).toBe("a-b-c")
+		})
 	})
 
 	describe("buildMcpToolName", () => {
@@ -125,6 +161,11 @@ describe("mcp-name utilities", () => {
 		it("should preserve underscores in server and tool names", () => {
 			expect(buildMcpToolName("my_server", "my_tool")).toBe("mcp--my_server--my_tool")
 		})
+
+		it("should encode hyphens in tool names", () => {
+			// Hyphens are encoded as triple underscores
+			expect(buildMcpToolName("onellm", "atlassian-jira_search")).toBe("mcp--onellm--atlassian___jira_search")
+		})
 	})
 
 	describe("parseMcpToolName", () => {
@@ -151,8 +192,7 @@ describe("mcp-name utilities", () => {
 			})
 		})
 
-		it("should correctly handle server names with underscores (fixed from old behavior)", () => {
-			// With the new -- separator, server names with underscores work correctly
+		it("should correctly handle server names with underscores", () => {
 			expect(parseMcpToolName("mcp--my_server--tool")).toEqual({
 				serverName: "my_server",
 				toolName: "tool",
@@ -166,6 +206,14 @@ describe("mcp-name utilities", () => {
 			})
 		})
 
+		it("should decode triple underscores back to hyphens", () => {
+			// This is the key feature: encoded hyphens are decoded back
+			expect(parseMcpToolName("mcp--onellm--atlassian___jira_search")).toEqual({
+				serverName: "onellm",
+				toolName: "atlassian-jira_search",
+			})
+		})
+
 		it("should return null for malformed names", () => {
 			expect(parseMcpToolName("mcp--")).toBeNull()
 			expect(parseMcpToolName("mcp--server")).toBeNull()
@@ -183,7 +231,6 @@ describe("mcp-name utilities", () => {
 		})
 
 		it("should preserve sanitized names through roundtrip with underscores", () => {
-			// Names with underscores now work correctly through roundtrip
 			const toolName = buildMcpToolName("my_server", "my_tool")
 			const parsed = parseMcpToolName(toolName)
 			expect(parsed).toEqual({
@@ -193,7 +240,6 @@ describe("mcp-name utilities", () => {
 		})
 
 		it("should handle spaces that get converted to underscores", () => {
-			// "my server" becomes "my_server" after sanitization
 			const toolName = buildMcpToolName("my server", "get tool")
 			const parsed = parseMcpToolName(toolName)
 			expect(parsed).toEqual({
@@ -210,5 +256,95 @@ describe("mcp-name utilities", () => {
 				toolName: "get_current_forecast",
 			})
 		})
+
+		it("should preserve hyphens through roundtrip via encoding/decoding", () => {
+			// This is the key test: hyphens survive the roundtrip
+			const toolName = buildMcpToolName("onellm", "atlassian-jira_search")
+			expect(toolName).toBe("mcp--onellm--atlassian___jira_search")
+
+			const parsed = parseMcpToolName(toolName)
+			expect(parsed).toEqual({
+				serverName: "onellm",
+				toolName: "atlassian-jira_search", // Hyphen is preserved!
+			})
+		})
+
+		it("should handle tool names with multiple hyphens", () => {
+			const toolName = buildMcpToolName("server", "get-user-profile")
+			const parsed = parseMcpToolName(toolName)
+			expect(parsed).toEqual({
+				serverName: "server",
+				toolName: "get-user-profile",
+			})
+		})
+	})
+
+	describe("normalizeMcpToolName", () => {
+		it("should convert underscore separators to hyphen separators", () => {
+			expect(normalizeMcpToolName("mcp__server__tool")).toBe("mcp--server--tool")
+		})
+
+		it("should not modify names that already have hyphen separators", () => {
+			expect(normalizeMcpToolName("mcp--server--tool")).toBe("mcp--server--tool")
+		})
+
+		it("should not modify non-MCP tool names", () => {
+			expect(normalizeMcpToolName("read_file")).toBe("read_file")
+			expect(normalizeMcpToolName("some__tool")).toBe("some__tool")
+		})
+
+		it("should preserve triple underscores (encoded hyphens) while normalizing separators", () => {
+			// Model outputs: mcp__onellm__atlassian___jira_search
+			// Should become: mcp--onellm--atlassian___jira_search
+			expect(normalizeMcpToolName("mcp__onellm__atlassian___jira_search")).toBe(
+				"mcp--onellm--atlassian___jira_search",
+			)
+		})
+
+		it("should handle multiple encoded hyphens", () => {
+			expect(normalizeMcpToolName("mcp__server__get___user___profile")).toBe("mcp--server--get___user___profile")
+		})
+	})
+
+	describe("model compatibility - full flow", () => {
+		it("should handle the complete flow: build -> model mangles -> normalize -> parse", () => {
+			// Step 1: Build the tool name (hyphens encoded as ___)
+			const builtName = buildMcpToolName("onellm", "atlassian-jira_search")
+			expect(builtName).toBe("mcp--onellm--atlassian___jira_search")
+
+			// Step 2: Model mangles the separators (-- becomes __)
+			const mangledName = "mcp__onellm__atlassian___jira_search"
+
+			// Step 3: Normalize the separators back (__ becomes --)
+			const normalizedName = normalizeMcpToolName(mangledName)
+			expect(normalizedName).toBe("mcp--onellm--atlassian___jira_search")
+
+			// Step 4: Parse the normalized name (decodes ___ back to -)
+			const parsed = parseMcpToolName(normalizedName)
+			expect(parsed).toEqual({
+				serverName: "onellm",
+				toolName: "atlassian-jira_search", // Original hyphen is preserved!
+			})
+		})
+
+		it("should handle tool names with multiple hyphens through the full flow", () => {
+			// Build
+			const builtName = buildMcpToolName("server", "get-user-profile")
+			expect(builtName).toBe("mcp--server--get___user___profile")
+
+			// Model mangles
+			const mangledName = "mcp__server__get___user___profile"
+
+			// Normalize
+			const normalizedName = normalizeMcpToolName(mangledName)
+			expect(normalizedName).toBe("mcp--server--get___user___profile")
+
+			// Parse
+			const parsed = parseMcpToolName(normalizedName)
+			expect(parsed).toEqual({
+				serverName: "server",
+				toolName: "get-user-profile",
+			})
+		})
 	})
 })

src/utils/__tests__/path.spec.ts

@@ -153,8 +153,13 @@ describe("Path Utilities", () => {
 			expect(getReadablePath(desktop, filePath)).toBe(filePath.toPosix())
 		})
 
-		it("should handle undefined relative path", () => {
-			expect(getReadablePath(cwd)).toBe("project")
+		it("should return empty string when relative path is undefined", () => {
+			expect(getReadablePath(cwd)).toBe("")
+		})
+
+		it("should return cwd basename when relative path is empty string", () => {
+			// Empty string resolves to cwd, which returns basename
+			expect(getReadablePath(cwd, "")).toBe("project")
 		})
 
 		it("should handle parent directory traversal", () => {

src/utils/__tests__/tool-id.spec.ts

@@ -0,0 +1,71 @@
+import { sanitizeToolUseId } from "../tool-id"
+
+describe("sanitizeToolUseId", () => {
+	describe("valid IDs pass through unchanged", () => {
+		it("should preserve alphanumeric IDs", () => {
+			expect(sanitizeToolUseId("toolu_01AbC")).toBe("toolu_01AbC")
+		})
+
+		it("should preserve IDs with underscores", () => {
+			expect(sanitizeToolUseId("tool_use_123")).toBe("tool_use_123")
+		})
+
+		it("should preserve IDs with hyphens", () => {
+			expect(sanitizeToolUseId("tool-with-hyphens")).toBe("tool-with-hyphens")
+		})
+
+		it("should preserve mixed valid characters", () => {
+			expect(sanitizeToolUseId("toolu_01AbC-xyz_789")).toBe("toolu_01AbC-xyz_789")
+		})
+
+		it("should handle empty string", () => {
+			expect(sanitizeToolUseId("")).toBe("")
+		})
+	})
+
+	describe("invalid characters get replaced with underscore", () => {
+		it("should replace dots with underscores", () => {
+			expect(sanitizeToolUseId("tool.with.dots")).toBe("tool_with_dots")
+		})
+
+		it("should replace colons with underscores", () => {
+			expect(sanitizeToolUseId("tool:with:colons")).toBe("tool_with_colons")
+		})
+
+		it("should replace slashes with underscores", () => {
+			expect(sanitizeToolUseId("tool/with/slashes")).toBe("tool_with_slashes")
+		})
+
+		it("should replace backslashes with underscores", () => {
+			expect(sanitizeToolUseId("tool\\with\\backslashes")).toBe("tool_with_backslashes")
+		})
+
+		it("should replace spaces with underscores", () => {
+			expect(sanitizeToolUseId("tool with spaces")).toBe("tool_with_spaces")
+		})
+
+		it("should replace multiple invalid characters", () => {
+			expect(sanitizeToolUseId("mcp.server:tool/name")).toBe("mcp_server_tool_name")
+		})
+	})
+
+	describe("real-world MCP tool use ID patterns", () => {
+		it("should sanitize MCP server-prefixed IDs with dots", () => {
+			// MCP tool names often include server names with dots
+			expect(sanitizeToolUseId("toolu_mcp.linear.create_issue")).toBe("toolu_mcp_linear_create_issue")
+		})
+
+		it("should sanitize IDs with URL-like patterns", () => {
+			expect(sanitizeToolUseId("toolu_https://api.example.com/tool")).toBe("toolu_https___api_example_com_tool")
+		})
+
+		it("should sanitize IDs with special characters from server names", () => {
+			expect(sanitizeToolUseId("call_mcp--posthog--query-run")).toBe("call_mcp--posthog--query-run")
+		})
+
+		it("should preserve valid native tool call IDs", () => {
+			// Standard Anthropic tool_use IDs
+			expect(sanitizeToolUseId("toolu_01H2X3Y4Z5")).toBe("toolu_01H2X3Y4Z5")
+		})
+	})
+})

src/utils/mcp-name.ts

@@ -17,6 +17,52 @@ export const MCP_TOOL_SEPARATOR = "--"
  */
 export const MCP_TOOL_PREFIX = "mcp"
 
+/**
+ * Encoding for hyphens in tool names.
+ * We use triple underscores because:
+ * 1. It's unlikely to appear naturally in tool names
+ * 2. It's safe for all API providers
+ * 3. It allows us to preserve hyphens through the encoding/decoding process
+ *
+ * This solves the problem where models (especially Claude) convert hyphens to underscores
+ * in tool names when using native tool calling. By encoding hyphens as triple underscores,
+ * we can decode them back to hyphens when parsing the tool name.
+ */
+export const HYPHEN_ENCODING = "___"
+
+/**
+ * Normalize an MCP tool name by converting underscore separators back to hyphens.
+ * This handles the case where models (especially Claude) convert hyphens to underscores
+ * in tool names when using native tool calling.
+ *
+ * For example: "mcp__server__tool" -> "mcp--server--tool"
+ *
+ * @param toolName - The tool name that may have underscore separators
+ * @returns The normalized tool name with hyphen separators
+ */
+export function normalizeMcpToolName(toolName: string): string {
+	// Only normalize if it looks like an MCP tool with underscore separators
+	if (toolName.startsWith("mcp__")) {
+		// Replace double underscores with double hyphens for the separators
+		// We need to be careful to only replace the separators, not the encoded hyphens (triple underscores)
+		// Pattern: mcp__server__tool -> mcp--server--tool
+		// But: mcp__server__tool___name should become mcp--server--tool___name (preserve triple underscores)
+
+		// First, temporarily replace triple underscores with a placeholder
+		const placeholder = "\x00HYPHEN\x00"
+		let normalized = toolName.replace(/___/g, placeholder)
+
+		// Now replace double underscores (separators) with double hyphens
+		normalized = normalized.replace(/__/g, "--")
+
+		// Restore triple underscores from placeholder
+		normalized = normalized.replace(new RegExp(placeholder, "g"), "___")
+
+		return normalized
+	}
+	return toolName
+}
+
 /**
  * Check if a tool name is an MCP tool (starts with the MCP prefix and separator).
  *
@@ -29,10 +75,9 @@ export function isMcpTool(toolName: string): boolean {
 
 /**
  * Sanitize a name to be safe for use in API function names.
- * This removes special characters and ensures the name starts correctly.
- *
- * Note: This does NOT remove dashes from names, but the separator "--" is
- * distinct enough (double hyphen) that single hyphens in names won't conflict.
+ * This removes special characters, ensures the name starts correctly,
+ * and encodes hyphens as triple underscores to preserve them through
+ * the model's tool calling process.
  *
  * @param name - The original name (e.g., MCP server name or tool name)
  * @returns A sanitized name that conforms to API requirements
@@ -51,6 +96,11 @@ export function sanitizeMcpName(name: string): string {
 	// Replace any double-hyphen sequences with single hyphen to avoid separator conflicts
 	sanitized = sanitized.replace(/--+/g, "-")
 
+	// Encode single hyphens as triple underscores to preserve them
+	// This allows us to decode them back to hyphens when parsing
+	// e.g., "atlassian-jira_search" -> "atlassian___jira_search"
+	sanitized = sanitized.replace(/-/g, HYPHEN_ENCODING)
+
 	// Ensure the name starts with a letter or underscore
 	if (sanitized.length > 0 && !/^[a-zA-Z_]/.test(sanitized)) {
 		sanitized = "_" + sanitized
@@ -90,11 +140,20 @@ export function buildMcpToolName(serverName: string, toolName: string): string {
 }
 
 /**
- * Parse an MCP tool function name back into server and tool names.
- * This handles sanitized names by splitting on the "--" separator.
+ * Decode a sanitized name back to its original form by converting
+ * triple underscores back to hyphens.
  *
- * Note: This returns the sanitized names, not the original names.
- * The original names cannot be recovered from the sanitized version.
+ * @param sanitizedName - The sanitized name with encoded hyphens
+ * @returns The decoded name with hyphens restored
+ */
+export function decodeMcpName(sanitizedName: string): string {
+	return sanitizedName.replace(new RegExp(HYPHEN_ENCODING, "g"), "-")
+}
+
+/**
+ * Parse an MCP tool function name back into server and tool names.
+ * This handles sanitized names by splitting on the "--" separator
+ * and decoding triple underscores back to hyphens.
  *
  * @param mcpToolName - The full MCP tool name (e.g., "mcp--weather--get_forecast")
  * @returns An object with serverName and toolName, or null if parsing fails
@@ -121,5 +180,9 @@ export function parseMcpToolName(mcpToolName: string): { serverName: string; too
 		return null
 	}
 
-	return { serverName, toolName }
+	// Decode triple underscores back to hyphens
+	return {
+		serverName: decodeMcpName(serverName),
+		toolName: decodeMcpName(toolName),
+	}
 }

src/utils/path.ts

@@ -80,7 +80,12 @@ function normalizePath(p: string): string {
 }
 
 export function getReadablePath(cwd: string, relPath?: string): string {
-	relPath = relPath || ""
+	// If relPath is undefined, return empty string instead of allowing path.resolve
+	// to return cwd (which would then show misleading cwd basename in UI)
+	if (relPath === undefined) {
+		return ""
+	}
+
 	// path.resolve is flexible in that it will resolve relative paths like '../../' to the cwd and even ignore the cwd if the relPath is actually an absolute path
 	const absolutePath = path.resolve(cwd, relPath)
 	if (arePathsEqual(cwd, path.join(os.homedir(), "Desktop"))) {

src/utils/tool-id.ts

@@ -0,0 +1,7 @@
+/**
+ * Sanitize a tool_use ID to match API validation pattern: ^[a-zA-Z0-9_-]+$
+ * Replaces any invalid character with underscore.
+ */
+export function sanitizeToolUseId(id: string): string {
+	return id.replace(/[^a-zA-Z0-9_-]/g, "_")
+}

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>

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"
@@ -81,27 +82,33 @@ 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")}</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")}</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

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" } })
 								}>

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>

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"
 
@@ -47,12 +46,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

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,
@@ -593,17 +592,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")}>

webview-ui/src/components/settings/About.tsx

@@ -1,17 +1,7 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
-import {
-	Info,
-	Download,
-	Upload,
-	TriangleAlert,
-	Bug,
-	Lightbulb,
-	Shield,
-	MessageCircle,
-	MessagesSquare,
-} from "lucide-react"
+import { Download, Upload, TriangleAlert, Bug, Lightbulb, Shield, MessageCircle, MessagesSquare } from "lucide-react"
 import { VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import type { TelemetrySetting } from "@roo-code/types"
@@ -38,19 +28,14 @@ export const About = ({ telemetrySetting, setTelemetrySetting, debug, setDebug,
 
 	return (
 		<div className={cn("flex flex-col gap-2", className)} {...props}>
-			<SectionHeader
-				description={
-					Package.sha
-						? `Version: ${Package.version} (${Package.sha.slice(0, 8)})`
-						: `Version: ${Package.version}`
-				}>
-				<div className="flex items-center gap-2">
-					<Info className="w-4" />
-					<div>{t("settings:sections.about")}</div>
-				</div>
-			</SectionHeader>
+			<SectionHeader>{t("settings:sections.about")}</SectionHeader>
 
 			<Section>
+				<p>
+					{Package.sha
+						? `Version: ${Package.version} (${Package.sha.slice(0, 8)})`
+						: `Version: ${Package.version}`}
+				</p>
 				<SearchableSetting
 					settingId="about-telemetry"
 					section="about"

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"
 
@@ -108,12 +108,7 @@ 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">

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"
 
@@ -109,12 +108,7 @@ 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>
 				<SearchableSetting

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"
@@ -31,12 +30,7 @@ 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>
 				<SearchableSetting

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, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Button } from "@/components/ui"
@@ -108,10 +108,7 @@ 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>

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"
 
@@ -47,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)

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"
 
@@ -24,12 +23,7 @@ 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>
 				<SearchableSetting

webview-ui/src/components/settings/NotificationSettings.tsx

@@ -1,7 +1,6 @@
 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"
@@ -28,12 +27,7 @@ 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>
 				<SearchableSetting

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"
 
@@ -139,10 +138,7 @@ const PromptsSettings = ({
 	return (
 		<div>
 			<SectionHeader description={t("settings:prompts.description")}>
-				<div className="flex items-center gap-2">
-					<MessageSquare className="w-4" />
-					<div>{t("settings:sections.prompts")}</div>
-				</div>
+				{t("settings:sections.prompts")}
 			</SectionHeader>
 
 			<Section>

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>
 	)

webview-ui/src/components/settings/SettingsView.tsx

@@ -12,7 +12,6 @@ import React, {
 import {
 	CheckCheck,
 	SquareMousePointer,
-	Webhook,
 	GitBranch,
 	Bell,
 	Database,
@@ -28,6 +27,7 @@ import {
 	Plug,
 	Server,
 	Users2,
+	ArrowLeft,
 } from "lucide-react"
 
 import {
@@ -632,8 +632,16 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 	return (
 		<Tab>
 			<TabHeader className="flex justify-between items-center gap-2">
-				<h3 className="text-vscode-foreground m-0 flex-shrink-0">{t("settings:header.title")}</h3>
-				<div className="flex items-center gap-2">
+				<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 items-center gap-2 shrink-0">
 					{isIndexingComplete && (
 						<SettingsSearch index={searchIndex} onNavigate={handleSearchNavigate} sections={sections} />
 					)}
@@ -654,11 +662,6 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 							{t("settings:common.save")}
 						</Button>
 					</StandardTooltip>
-					<StandardTooltip content={t("settings:header.doneButtonTooltip")}>
-						<Button variant="secondary" onClick={() => checkUnsaveChanges(onDone)}>
-							{t("settings:common.done")}
-						</Button>
-					</StandardTooltip>
 				</div>
 			</TabHeader>
 
@@ -729,12 +732,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone, t
 						{/* Providers Section */}
 						{renderTab === "providers" && (
 							<div>
-								<SectionHeader>
-									<div className="flex items-center gap-2">
-										<Webhook className="w-4" />
-										<div>{t("settings:sections.providers")}</div>
-									</div>
-								</SectionHeader>
+								<SectionHeader>{t("settings:sections.providers")}</SectionHeader>
 
 								<Section>
 									<ApiConfigManager

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"
@@ -103,12 +103,7 @@ 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 */}

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"
@@ -88,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 */}

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 { SetCachedStateField } from "./types"
@@ -51,12 +50,7 @@ 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">

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

@@ -1,4 +1,5 @@
 {
+	"back": "Torna a la vista de tasques",
 	"common": {
 		"save": "Desar",
 		"done": "Fet",

webview-ui/src/i18n/locales/de/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Zurück zur Aufgabenansicht",
 	"common": {
 		"save": "Speichern",
 		"done": "Fertig",

webview-ui/src/i18n/locales/en/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Back to tasks view",
 	"common": {
 		"save": "Save",
 		"done": "Done",
@@ -12,7 +13,7 @@
 		"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...",

webview-ui/src/i18n/locales/es/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Volver a la vista de tareas",
 	"common": {
 		"save": "Guardar",
 		"done": "Hecho",

webview-ui/src/i18n/locales/fr/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Retour à la vue des tâches",
 	"common": {
 		"save": "Enregistrer",
 		"done": "Terminé",

webview-ui/src/i18n/locales/hi/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "टास्क व्यू पर वापस जाओ",
 	"common": {
 		"save": "सहेजें",
 		"done": "पूर्ण",

webview-ui/src/i18n/locales/id/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Kembali ke tampilan tugas",
 	"common": {
 		"save": "Simpan",
 		"done": "Selesai",

webview-ui/src/i18n/locales/it/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Torna alla vista attività",
 	"common": {
 		"save": "Salva",
 		"done": "Fatto",

webview-ui/src/i18n/locales/ja/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "タスク ビューに戻る",
 	"common": {
 		"save": "保存",
 		"done": "完了",

webview-ui/src/i18n/locales/ko/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "작업 보기로 돌아가기",
 	"common": {
 		"save": "저장",
 		"done": "완료",

webview-ui/src/i18n/locales/nl/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Terug naar takenoverzicht",
 	"common": {
 		"save": "Opslaan",
 		"done": "Gereed",

webview-ui/src/i18n/locales/pl/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Wróć do widoku zadań",
 	"common": {
 		"save": "Zapisz",
 		"done": "Gotowe",

webview-ui/src/i18n/locales/pt-BR/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Voltar para a visão de tarefas",
 	"common": {
 		"save": "Salvar",
 		"done": "Concluído",

webview-ui/src/i18n/locales/ru/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Назад к списку задач",
 	"common": {
 		"save": "Сохранить",
 		"done": "Готово",

webview-ui/src/i18n/locales/tr/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Görev görünümüne dön",
 	"common": {
 		"save": "Kaydet",
 		"done": "Tamamlandı",

webview-ui/src/i18n/locales/vi/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "Quay lại chế độ xem tác vụ",
 	"common": {
 		"save": "Lưu",
 		"done": "Hoàn thành",

webview-ui/src/i18n/locales/zh-CN/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "返回任务视图",
 	"common": {
 		"save": "保存",
 		"done": "完成",

webview-ui/src/i18n/locales/zh-TW/settings.json

@@ -1,4 +1,5 @@
 {
+	"back": "返回工作檢視",
 	"common": {
 		"save": "儲存",
 		"done": "完成",