From 058ffc2ba024b9f4e506d661b45ea25d723de1e1 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Wed, 13 May 2026 08:53:44 +0000
Subject: [PATCH] feat: enhance subtask button visibility with prominent link
 styling

Make the "View task" / "Go to subtask" buttons in ChatRow more visually
prominent by using the VSCode link color with a subtle background,
replacing the previous muted description foreground color that was
barely visible.

Changes:
- ChatRow.tsx: Updated both "Go to subtask" buttons (newTask tool and
  subtask_result) to use text-vscode-textLink-foreground with a
  bg-vscode-textLink-foreground/10 background, font-medium weight,
  padding, and rounded corners for a button-like appearance
- index.css: Added --color-vscode-textLink-activeForeground CSS
  variable for hover state support

Addresses #12358
---
 webview-ui/src/components/chat/ChatRow.tsx | 4 ++--
 webview-ui/src/index.css                   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index 2fd3a274f6..dc514230fa 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/webview-ui/src/components/chat/ChatRow.tsx
@@ -872,7 +872,7 @@ export const ChatRowContent = ({
 							<div>
 								{childTaskId && !isFollowedBySubtaskResult && (
 									<button
-										className="cursor-pointer flex gap-1 items-center mt-2 text-vscode-descriptionForeground hover:text-vscode-descriptionForeground hover:underline font-normal"
+										className="cursor-pointer flex gap-1 items-center mt-2 px-2 py-1 rounded text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground bg-vscode-textLink-foreground/10 hover:bg-vscode-textLink-foreground/20 font-medium transition-colors"
 										onClick={() =>
 											vscode.postMessage({ type: "showTaskWithId", text: childTaskId })
 										}>
@@ -1032,7 +1032,7 @@ export const ChatRowContent = ({
 							<MarkdownBlock markdown={message.text} />
 							{completedChildTaskId && (
 								<button
-									className="cursor-pointer flex gap-1 items-center mt-2 text-vscode-descriptionForeground hover:text-vscode-descriptionForeground hover:underline font-normal"
+									className="cursor-pointer flex gap-1 items-center mt-2 px-2 py-1 rounded text-vscode-textLink-foreground hover:text-vscode-textLink-activeForeground bg-vscode-textLink-foreground/10 hover:bg-vscode-textLink-foreground/20 font-medium transition-colors"
 									onClick={() =>
 										vscode.postMessage({ type: "showTaskWithId", text: completedChildTaskId })
 									}>
diff --git a/webview-ui/src/index.css b/webview-ui/src/index.css
index ebb9a2fb90..734839e08a 100644
--- a/webview-ui/src/index.css
+++ b/webview-ui/src/index.css
@@ -139,6 +139,7 @@
 	--color-vscode-widget-shadow: var(--vscode-widget-shadow);
 
 	--color-vscode-textLink-foreground: var(--vscode-textLink-foreground);
+	--color-vscode-textLink-activeForeground: var(--vscode-textLink-activeForeground);
 
 	--color-vscode-textCodeBlock-background: var(--vscode-textCodeBlock-background);