feat: Move slash commands to Settings tab with gear icon for discoverability

src/core/webview/webviewMessageHandler.ts

@@ -2776,7 +2776,12 @@ export const webviewMessageHandler = async (
 					TelemetryService.instance.captureTabShown(message.tab)
 				}
 
-				await provider.postMessageToWebview({ type: "action", action: "switchTab", tab: message.tab })
+				await provider.postMessageToWebview({
+					type: "action",
+					action: "switchTab",
+					tab: message.tab,
+					values: message.values,
+				})
 			}
 			break
 		}

src/i18n/locales/en/common.json

@@ -215,5 +215,9 @@
 		"preventCompletionWithOpenTodos": {
 			"description": "Prevent task completion when there are incomplete todos in the todo list"
 		}
+	},
+	"docsLink": {
+		"label": "Docs",
+		"url": "https://docs.roocode.com"
 	}
 }

webview-ui/src/App.tsx

@@ -143,7 +143,9 @@ const App = () => {
 				if (message.action === "switchTab" && message.tab) {
 					const targetTab = message.tab as Tab
 					switchTab(targetTab)
-					setCurrentSection(undefined)
+					// Extract targetSection from values if provided
+					const targetSection = message.values?.section as string | undefined
+					setCurrentSection(targetSection)
 					setCurrentMarketplaceTab(undefined)
 				} else {
 					// Handle other actions using the mapping

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

@@ -30,7 +30,6 @@ import { AutoApproveDropdown } from "./AutoApproveDropdown"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
 import { IndexingStatusBadge } from "./IndexingStatusBadge"
-import { SlashCommandsPopover } from "./SlashCommandsPopover"
 import { usePromptHistory } from "./hooks/usePromptHistory"
 
 interface ChatTextAreaProps {
@@ -1232,7 +1231,6 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								</button>
 							</StandardTooltip>
 						)}
-						{!isEditMode ? <SlashCommandsPopover /> : null}
 						{!isEditMode ? <IndexingStatusBadge /> : null}
 						<StandardTooltip content={t("chat:addImages")}>
 							<button

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from "react"
 import { getIconForFilePath, getIconUrlByName, getIconForDirectoryPath } from "vscode-material-icons"
+import { Settings } from "lucide-react"
 
 import type { ModeConfig } from "@roo-code/types"
 import type { Command } from "@roo/ExtensionMessage"
@@ -11,6 +12,10 @@ import {
 	SearchResult,
 } from "@src/utils/context-mentions"
 import { removeLeadingNonAlphanumeric } from "@src/utils/removeLeadingNonAlphanumeric"
+import { vscode } from "@src/utils/vscode"
+import { buildDocLink } from "@/utils/docLinks"
+import { Trans } from "react-i18next"
+import { t } from "i18next"
 
 interface ContextMenuProps {
 	onSelect: (type: ContextMenuOptionType, value?: string) => void
@@ -77,8 +82,6 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							fontWeight: "bold",
 							fontSize: "0.85em",
 							opacity: 0.8,
-							textTransform: "uppercase",
-							letterSpacing: "0.5px",
 						}}>
 						{option.label}
 					</span>
@@ -136,13 +139,13 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 					</div>
 				)
 			case ContextMenuOptionType.Problems:
-				return <span>Problems</span>
+				return <span>{t("chat:contextMenu.problems")}</span>
 			case ContextMenuOptionType.Terminal:
-				return <span>Terminal</span>
+				return <span>{t("chat:contextMenu.terminal")}</span>
 			case ContextMenuOptionType.URL:
-				return <span>Paste URL to fetch contents</span>
+				return <span>{t("chat:contextMenu.url")}</span>
 			case ContextMenuOptionType.NoResults:
-				return <span>No results found</span>
+				return <span>{t("chat:contextMenu.noResults")}</span>
 			case ContextMenuOptionType.Git:
 				if (option.value) {
 					return (
@@ -251,6 +254,17 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 		)
 	}
 
+	const handleSettingsClick = (e: React.MouseEvent) => {
+		// Prevent any default behavior
+		e.preventDefault()
+		// Switch to settings tab and navigate to slash commands section
+		vscode.postMessage({
+			type: "switchTab",
+			tab: "settings",
+			values: { section: "slashCommands" },
+		})
+	}
+
 	return (
 		<div
 			style={{
@@ -275,14 +289,63 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 					overflowY: "auto",
 					overflowX: "hidden",
 				}}>
+				{/* Settings button for slash commands */}
+				{searchQuery === "/" && (
+					<div className="p-2 flex items-start gap-4 justify-between">
+						{searchQuery.length === 1 && (
+							<div className="text-sm">
+								<p className="font-bold text-base text-vscode-foreground mt-1 mb-0.5">Slash Commands</p>
+								<p className="text-xs mt-0.5 -mb-1">
+									<Trans
+										i18nKey="settings:slashCommands.description"
+										components={{
+											DocsLink: (
+												<a
+													href={buildDocLink(
+														"features/slash-commands",
+														"slash_commands_settings",
+													)}
+													target="_blank"
+													rel="noopener noreferrer"
+													className="text-vscode-textLink-foreground hover:underline">
+													{t("common:docsLink.label")}
+												</a>
+											),
+										}}
+									/>
+								</p>
+							</div>
+						)}
+						<button
+							className="mt-1 cursor-pointer"
+							onClick={handleSettingsClick}
+							onMouseDown={(e) => {
+								e.stopPropagation()
+								e.preventDefault()
+							}}
+							onMouseEnter={(e) => {
+								e.currentTarget.style.opacity = "1"
+								e.currentTarget.style.backgroundColor = "var(--vscode-list-hoverBackground)"
+							}}
+							onMouseLeave={(e) => {
+								e.currentTarget.style.opacity = "0.7"
+								e.currentTarget.style.backgroundColor = "transparent"
+							}}
+							title={t("chat:slashCommands.manageCommands")}>
+							<Settings size={16} />
+						</button>
+					</div>
+				)}
 				{filteredOptions && filteredOptions.length > 0 ? (
 					filteredOptions.map((option, index) => (
 						<div
 							key={`${option.type}-${option.value || index}`}
 							onClick={() => isOptionSelectable(option) && onSelect(option.type, option.value)}
 							style={{
 								padding:
-									option.type === ContextMenuOptionType.SectionHeader ? "8px 6px 4px 6px" : "4px 6px",
+									option.type === ContextMenuOptionType.SectionHeader
+										? "16px 8px 4px 8px"
+										: "4px 8px",
 								cursor: isOptionSelectable(option) ? "pointer" : "default",
 								color: "var(--vscode-dropdown-foreground)",
 								display: "flex",
@@ -367,7 +430,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 							color: "var(--vscode-foreground)",
 							opacity: 0.7,
 						}}>
-						<span>No results found</span>
+						<span>{t("chat:contextMenu.noResults")}</span>
 					</div>
 				)}
 			</div>

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

@@ -0,0 +1,28 @@
+import React from "react"
+
+import type { Command } from "@roo/ExtensionMessage"
+
+interface SlashCommandItemSimpleProps {
+	command: Command
+	onClick?: (command: Command) => void
+}
+
+export const SlashCommandItemSimple: React.FC<SlashCommandItemSimpleProps> = ({ command, onClick }) => {
+	return (
+		<div
+			className="px-4 py-2 text-sm flex items-center hover:bg-vscode-list-hoverBackground cursor-pointer"
+			onClick={() => onClick?.(command)}>
+			{/* Command name */}
+			<div className="flex-1 min-w-0">
+				<div>
+					<span className="truncate text-vscode-foreground">/{command.name}</span>
+					{command.description && (
+						<div className="text-xs text-vscode-descriptionForeground truncate mt-0.5">
+							{command.description}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}