when the assistant says to act mode we render a custom highlight with hotkey suggestion (RooCodeInc#3708)

* when the assistant says to act mode we render a custom highlight with hotkey suggestion

* changeset

* console

---------

Co-authored-by: Cline Evaluation <[email protected]>

Author: pashpashpash

.changeset/beige-drinks-chew.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+when the assistant says to act mode we render a custom highlight with hotkey suggestion

webview-ui/src/components/common/MarkdownBlock.tsx

@@ -10,6 +10,27 @@ import type { Node } from "unist"
 import { useExtensionState } from "@/context/ExtensionStateContext"
 import { CODE_BLOCK_BG_COLOR } from "@/components/common/CodeBlock"
 import MermaidBlock from "@/components/common/MermaidBlock"
+import { vscode } from "@/utils/vscode"
+
+// Styled component for Act Mode text with more specific styling
+const ActModeHighlight: React.FC = () => (
+	<span
+		onClick={() => {
+			vscode.postMessage({
+				type: "togglePlanActMode",
+				chatSettings: {
+					mode: "act",
+				},
+			})
+		}}
+		title="Click to toggle to Act Mode"
+		className="text-[var(--vscode-textLink-foreground)] hover:opacity-90 cursor-pointer inline-flex items-center gap-1">
+		<div className="p-1 rounded-[12px] bg-[var(--vscode-editor-background)] flex items-center justify-end w-4 border-[1px] border-[var(--vscode-input-border)]">
+			<div className="rounded-full bg-[var(--vscode-textLink-foreground)] w-2 h-2" />
+		</div>
+		Act Mode (⌘⇧A)
+	</span>
+)
 
 interface MarkdownBlockProps {
 	markdown?: string
@@ -55,6 +76,68 @@ const remarkUrlToLink = () => {
 	}
 }
 
+/**
+ * Custom remark plugin that highlights "to Act Mode" mentions and adds keyboard shortcut hint
+ */
+const remarkHighlightActMode = () => {
+	return (tree: Node) => {
+		visit(tree, "text", (node: any, index, parent) => {
+			// Case-insensitive regex to match "to Act Mode" in various capitalizations
+			// Using word boundaries to avoid matching within words
+			// Added negative lookahead to avoid matching if already followed by the shortcut
+			const actModeRegex = /\bto\s+Act\s+Mode\b(?!\s*\(⌘⇧A\))/i
+
+			if (!node.value.match(actModeRegex)) return
+
+			// Split the text by the matches
+			const parts = node.value.split(actModeRegex)
+			const matches = node.value.match(actModeRegex)
+
+			if (!matches || parts.length <= 1) return
+
+			const children: any[] = []
+
+			parts.forEach((part: string, i: number) => {
+				// Add the text before the match
+				if (part) children.push({ type: "text", value: part })
+
+				// Add the match, but only make "Act Mode" bold (not the "to" part)
+				if (matches[i]) {
+					// Extract "to" and "Act Mode" parts
+					const matchText = matches[i]
+					const toIndex = matchText.toLowerCase().indexOf("to")
+					const actModeIndex = matchText.toLowerCase().indexOf("act mode", toIndex + 2)
+
+					if (toIndex !== -1 && actModeIndex !== -1) {
+						// Add "to" as regular text
+						const toPart = matchText.substring(toIndex, actModeIndex).trim()
+						children.push({ type: "text", value: toPart + " " })
+
+						// Add "Act Mode" as bold with keyboard shortcut
+						const actModePart = matchText.substring(actModeIndex)
+						children.push({
+							type: "strong",
+							children: [{ type: "text", value: `${actModePart} (⌘⇧A)` }],
+						})
+					} else {
+						// Fallback if we can't parse it correctly
+						children.push({ type: "text", value: matchText + " " })
+						children.push({
+							type: "strong",
+							children: [{ type: "text", value: `(⌘⇧A)` }],
+						})
+					}
+				}
+			})
+
+			// Replace the original text node with our new nodes
+			if (parent) {
+				parent.children.splice(index, 1, ...children)
+			}
+		})
+	}
+}
+
 /**
  * Custom remark plugin that prevents filenames with extensions from being parsed as bold text
  * For example: __init__.py should not be rendered as bold "init" followed by ".py"
@@ -286,6 +369,7 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 		remarkPlugins: [
 			remarkPreventBoldFilenames,
 			remarkUrlToLink,
+			remarkHighlightActMode,
 			remarkMath,
 			() => {
 				return (tree) => {
@@ -329,6 +413,27 @@ const MarkdownBlock = memo(({ markdown }: MarkdownBlockProps) => {
 					}
 					return <code {...props} />
 				},
+				strong: (props: ComponentProps<"strong">) => {
+					// Check if this is an "Act Mode" strong element by looking for the keyboard shortcut
+					// Handle both string children and array of children cases
+					const childrenText = React.Children.toArray(props.children)
+						.map((child) => {
+							if (typeof child === "string") return child
+							if (typeof child === "object" && "props" in child && child.props.children)
+								return String(child.props.children)
+							return ""
+						})
+						.join("")
+
+					// Case-insensitive check for "Act Mode (⌘⇧A)" pattern
+					// This ensures we only style the exact "Act Mode" mentions with keyboard shortcut
+					// Using case-insensitive flag to catch all capitalization variations
+					if (/^act mode\s*\(⌘⇧A\)$/i.test(childrenText)) {
+						return <ActModeHighlight />
+					}
+
+					return <strong {...props} />
+				},
 			},
 		},
 	})