feat: add buildDocLink utility and 21 Internal Links to Docs

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

@@ -40,6 +40,7 @@ import TaskHeader from "./TaskHeader"
 import AutoApproveMenu from "./AutoApproveMenu"
 import SystemPromptWarning from "./SystemPromptWarning"
 import { CheckpointWarning } from "./CheckpointWarning"
+import { buildDocLink } from "@src/utils/docLinks"
 
 export interface ChatViewProps {
 	isHidden: boolean
@@ -1258,7 +1259,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 								i18nKey="chat:about"
 								components={{
 									DocsLink: (
-										<a href="https://docs.roocode.com/" target="_blank" rel="noopener noreferrer">
+										<a href={buildDocLink("", "welcome")} target="_blank" rel="noopener noreferrer">
 											the docs
 										</a>
 									),

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

@@ -1,6 +1,7 @@
 import { useCallback } from "react"
 import { useTranslation, Trans } from "react-i18next"
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"
+import { buildDocLink } from "../../utils/docLinks"
 
 export const CommandExecutionError = () => {
 	const { t } = useTranslation()
@@ -28,7 +29,7 @@ export const CommandExecutionError = () => {
 					/>
 				</div>
 				<a
-					href="http://docs.roocode.com/troubleshooting/shell-integration/"
+					href={buildDocLink("troubleshooting/shell-integration/", "error_tooltip")}
 					className="underline"
 					style={{ color: "inherit" }}>
 					{t("chat:shellIntegration.troubleshooting")}

webview-ui/src/components/mcp/McpView.tsx

@@ -23,6 +23,7 @@ import {
 	DialogDescription,
 	DialogFooter,
 } from "@src/components/ui"
+import { buildDocLink } from "@src/utils/docLinks"
 
 import { Tab, TabContent, TabHeader } from "../common/Tab"
 
@@ -62,13 +63,10 @@ const McpView = ({ onDone }: McpViewProps) => {
 						marginTop: "5px",
 					}}>
 					<Trans i18nKey="mcp:description">
-						<VSCodeLink href="https://github.com/modelcontextprotocol" style={{ display: "inline" }}>
-							Model Context Protocol
-						</VSCodeLink>
 						<VSCodeLink
-							href="https://github.com/modelcontextprotocol/servers"
+							href={buildDocLink("features/mcp/using-mcp-in-roo", "mcp_settings")}
 							style={{ display: "inline" }}>
-							community-made servers
+							Learn More
 						</VSCodeLink>
 					</Trans>
 				</div>
@@ -86,14 +84,25 @@ const McpView = ({ onDone }: McpViewProps) => {
 								}}>
 								<span style={{ fontWeight: "500" }}>{t("mcp:enableServerCreation.title")}</span>
 							</VSCodeCheckbox>
-							<p
+							<div
 								style={{
 									fontSize: "12px",
 									marginTop: "5px",
 									color: "var(--vscode-descriptionForeground)",
 								}}>
-								{t("mcp:enableServerCreation.description")}
-							</p>
+								<Trans i18nKey="mcp:enableServerCreation.description">
+									<VSCodeLink
+										href={buildDocLink(
+											"features/mcp/using-mcp-in-roo#how-to-use-roo-to-create-an-mcp-server",
+											"mcp_server_creation",
+										)}
+										style={{ display: "inline" }}>
+										Learn about server creation
+									</VSCodeLink>
+									<strong>new</strong>
+								</Trans>
+								<p style={{ marginTop: "8px" }}>{t("mcp:enableServerCreation.hint")}</p>
+							</div>
 						</div>
 
 						{/* Server List */}
@@ -130,6 +139,21 @@ const McpView = ({ onDone }: McpViewProps) => {
 								{t("mcp:editProjectMCP")}
 							</Button>
 						</div>
+						<div
+							style={{
+								marginTop: "15px",
+								fontSize: "12px",
+								color: "var(--vscode-descriptionForeground)",
+							}}>
+							<VSCodeLink
+								href={buildDocLink(
+									"features/mcp/using-mcp-in-roo#editing-mcp-settings-files",
+									"mcp_edit_settings",
+								)}
+								style={{ display: "inline" }}>
+								{t("mcp:learnMoreEditingSettings")}
+							</VSCodeLink>
+						</div>
 					</>
 				)}
 			</TabContent>

webview-ui/src/components/prompts/PromptsView.tsx

@@ -1,6 +1,12 @@
 import React, { useState, useEffect, useMemo, useCallback, useRef } from "react"
 import { Button } from "@/components/ui/button"
-import { VSCodeCheckbox, VSCodeRadioGroup, VSCodeRadio, VSCodeTextArea } from "@vscode/webview-ui-toolkit/react"
+import {
+	VSCodeCheckbox,
+	VSCodeRadioGroup,
+	VSCodeRadio,
+	VSCodeTextArea,
+	VSCodeLink,
+} from "@vscode/webview-ui-toolkit/react"
 
 import { useExtensionState } from "@src/context/ExtensionStateContext"
 import {
@@ -19,9 +25,9 @@ import { supportPrompt, SupportPromptType } from "@roo/shared/support-prompt"
 import { TOOL_GROUPS, ToolGroup } from "@roo/shared/tools"
 import { vscode } from "@src/utils/vscode"
 import { Tab, TabContent, TabHeader } from "../common/Tab"
-import i18next from "i18next"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { Trans } from "react-i18next"
+import { buildDocLink } from "@src/utils/docLinks"
 import {
 	Select,
 	SelectContent,
@@ -515,7 +521,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					</div>
 
 					<div className="text-sm text-vscode-descriptionForeground mb-3">
-						{t("prompts:modes.createModeHelpText")}
+						<Trans i18nKey="prompts:modes.createModeHelpText">
+							<VSCodeLink
+								href={buildDocLink("basic-usage/using-modes", "prompts_view_modes")}
+								style={{ display: "inline" }}></VSCodeLink>
+							<VSCodeLink
+								href={buildDocLink("features/custom-modes", "prompts_view_modes")}
+								style={{ display: "inline" }}></VSCodeLink>
+						</Trans>
 					</div>
 
 					<div className="flex items-center gap-1 mb-3">
@@ -611,6 +624,34 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 							</PopoverContent>
 						</Popover>
 					</div>
+					{/* API Configuration - Moved Here */}
+					<div className="mb-3">
+						<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
+						<div className="mb-2">
+							<Select
+								value={currentApiConfigName}
+								onValueChange={(value) => {
+									vscode.postMessage({
+										type: "loadApiConfiguration",
+										text: value,
+									})
+								}}>
+								<SelectTrigger className="w-full">
+									<SelectValue placeholder={t("settings:common.select")} />
+								</SelectTrigger>
+								<SelectContent>
+									{(listApiConfigMeta || []).map((config) => (
+										<SelectItem key={config.id} value={config.name}>
+											{config.name}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
+								{t("prompts:apiConfiguration.select")}
+							</div>
+						</div>
+					</div>
 				</div>
 
 				<div className="mb-5">
@@ -764,34 +805,6 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 
 					{/* Mode settings */}
 					<>
-						<div className="mb-3">
-							<div className="font-bold mb-1">{t("prompts:apiConfiguration.title")}</div>
-							<div className="mb-2">
-								<Select
-									value={currentApiConfigName}
-									onValueChange={(value) => {
-										vscode.postMessage({
-											type: "loadApiConfiguration",
-											text: value,
-										})
-									}}>
-									<SelectTrigger className="w-full">
-										<SelectValue placeholder={t("settings:common.select")} />
-									</SelectTrigger>
-									<SelectContent>
-										{(listApiConfigMeta || []).map((config) => (
-											<SelectItem key={config.id} value={config.name}>
-												{config.name}
-											</SelectItem>
-										))}
-									</SelectContent>
-								</Select>
-								<div className="text-xs mt-1.5 text-vscode-descriptionForeground">
-									{t("prompts:apiConfiguration.select")}
-								</div>
-							</div>
-						</div>
-
 						{/* Show tools for all modes */}
 						<div className="mb-4">
 							<div className="flex justify-between items-center mb-1">
@@ -1049,6 +1062,15 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 												}}
 											/>
 										),
+										"1": (
+											<VSCodeLink
+												href={buildDocLink(
+													"features/footgun-prompting",
+													"prompts_advanced_system_prompt",
+												)}
+												style={{ display: "inline" }}></VSCodeLink>
+										),
+										"2": <strong />,
 									}}
 								/>
 							</div>
@@ -1060,9 +1082,14 @@ const PromptsView = ({ onDone }: PromptsViewProps) => {
 					<h3 className="text-vscode-foreground mb-3">{t("prompts:globalCustomInstructions.title")}</h3>
 
 					<div className="text-sm text-vscode-descriptionForeground mb-2">
-						{t("prompts:globalCustomInstructions.description", {
-							language: i18next.language,
-						})}
+						<Trans i18nKey="prompts:globalCustomInstructions.description">
+							<VSCodeLink
+								href={buildDocLink(
+									"features/custom-instructions#global-custom-instructions",
+									"prompts_global_custom_instructions",
+								)}
+								style={{ display: "inline" }}></VSCodeLink>
+						</Trans>
 					</div>
 					<VSCodeTextArea
 						value={customInstructions || ""}

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

@@ -52,6 +52,7 @@ import { DiffSettingsControl } from "./DiffSettingsControl"
 import { TemperatureControl } from "./TemperatureControl"
 import { RateLimitSecondsControl } from "./RateLimitSecondsControl"
 import { BedrockCustomArn } from "./providers/BedrockCustomArn"
+import { buildDocLink } from "@src/utils/docLinks"
 
 export interface ApiOptionsProps {
 	uriScheme: string | undefined
@@ -253,8 +254,9 @@ const ApiOptions = ({
 			openai: "openai-compatible",
 		}
 
+		const slug = slugs[selectedProvider] || selectedProvider
 		return {
-			url: `https://docs.roocode.com/providers/${slugs[selectedProvider] || selectedProvider}`,
+			url: buildDocLink(`providers/${slug}`, "provider_docs"),
 			name,
 		}
 	}, [selectedProvider])

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

@@ -1,10 +1,12 @@
-import { VSCodeButton, VSCodeCheckbox, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, 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"
 
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Slider } from "@/components/ui"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { vscode } from "@/utils/vscode"
+import { buildDocLink } from "@src/utils/docLinks"
 
 import { Section } from "./Section"
 import { SectionHeader } from "./SectionHeader"
@@ -112,7 +114,13 @@ export const BrowserSettings = ({
 						<span className="font-medium">{t("settings:browser.enable.label")}</span>
 					</VSCodeCheckbox>
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
-						{t("settings:browser.enable.description")}
+						<Trans i18nKey="settings:browser.enable.description">
+							<VSCodeLink
+								href={buildDocLink("features/browser-use", "settings_browser_tool")}
+								style={{ display: "inline" }}>
+								{" "}
+							</VSCodeLink>
+						</Trans>
 					</div>
 				</div>
 

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

@@ -1,7 +1,9 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"
+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 { SetCachedStateField } from "./types"
 import { SectionHeader } from "./SectionHeader"
@@ -32,9 +34,15 @@ export const CheckpointSettings = ({ enableCheckpoints, setCachedStateField, ...
 						}}>
 						<span className="font-medium">{t("settings:checkpoints.enable.label")}</span>
 					</VSCodeCheckbox>
-					<p className="text-vscode-descriptionForeground text-sm mt-0">
-						{t("settings:checkpoints.enable.description")}
-					</p>
+					<div className="text-vscode-descriptionForeground text-sm mt-1">
+						<Trans i18nKey="settings:checkpoints.enable.description">
+							<VSCodeLink
+								href={buildDocLink("features/checkpoints", "settings_checkpoints")}
+								style={{ display: "inline" }}>
+								{" "}
+							</VSCodeLink>
+						</Trans>
+					</div>
 				</div>
 			</Section>
 		</div>