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/__tests__/SettingsTabNavigation.spec.tsx

@@ -0,0 +1,150 @@
+import React from "react"
+import { render, waitFor } from "@testing-library/react"
+import { vi } from "vitest"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+import App from "../App"
+import TranslationProvider from "../i18n/TranslationContext"
+
+// Mock vscode API
+const mockPostMessage = vi.fn()
+vi.mock("../utils/vscode", () => ({
+	vscode: {
+		postMessage: (message: any) => mockPostMessage(message),
+	},
+}))
+
+// Mock extension state
+const mockExtensionState = {
+	didHydrateState: true,
+	showWelcome: false,
+	shouldShowAnnouncement: false,
+	telemetrySetting: "off" as const,
+	telemetryKey: undefined,
+	machineId: "test-machine-id",
+	cloudUserInfo: null,
+	cloudIsAuthenticated: false,
+	cloudApiUrl: undefined,
+	renderContext: "editor" as const,
+	mdmCompliant: true,
+	currentApiConfigName: "test-config",
+	listApiConfigMeta: [],
+	apiConfiguration: {},
+	experiments: {},
+	customModes: [],
+	mode: { slug: "code", name: "Code" },
+	clineMessages: [],
+	taskHistory: [],
+	version: "1.0.0",
+	writeDelayMs: 100,
+	requestDelaySeconds: 1,
+	enableCheckpoints: false,
+	maxOpenTabsContext: 10,
+	maxWorkspaceFiles: 100,
+	showRooIgnoredFiles: false,
+	maxReadFileLine: 1000,
+	maxImageFileSize: 5,
+	maxTotalImageSize: 20,
+	mcpEnabled: false,
+	enableMcpServerCreation: false,
+	sharingEnabled: false,
+	organizationAllowList: {
+		enabled: false,
+		allowed: [],
+		providers: {},
+	},
+	autoCondenseContext: false,
+	autoCondenseContextPercent: 50,
+	profileThresholds: {},
+	hasOpenedModeSelector: false,
+	remoteControlEnabled: false,
+	taskSyncEnabled: false,
+	featureRoomoteControlEnabled: false,
+	// Add missing properties required by ChatView components
+	openedTabs: [],
+	filePaths: [],
+	commands: [],
+	gitCommits: [],
+	browserToolEnabled: false,
+	mcpServers: [],
+}
+
+vi.mock("../context/ExtensionStateContext", () => ({
+	ExtensionStateContextProvider: ({ children }: { children: React.ReactNode }) => children,
+	useExtensionState: () => mockExtensionState,
+}))
+
+describe("Settings Tab Navigation", () => {
+	let queryClient: QueryClient
+
+	beforeEach(() => {
+		queryClient = new QueryClient({
+			defaultOptions: {
+				queries: { retry: false },
+				mutations: { retry: false },
+			},
+		})
+		mockPostMessage.mockClear()
+	})
+
+	it("should navigate to slash commands section when handleSettingsClick is called", async () => {
+		const { container } = render(
+			<QueryClientProvider client={queryClient}>
+				<TranslationProvider>
+					<App />
+				</TranslationProvider>
+			</QueryClientProvider>,
+		)
+
+		// Simulate message from ContextMenu to switch to settings tab with targetSection
+		const messageEvent = new MessageEvent("message", {
+			data: {
+				type: "action",
+				action: "switchTab",
+				tab: "settings",
+				values: { section: "slashCommands" },
+			},
+		})
+		window.dispatchEvent(messageEvent)
+
+		// Wait for the settings view to render
+		await waitFor(() => {
+			const slashCommandsTab = container.querySelector('[data-testid="tab-slashCommands"]')
+			expect(slashCommandsTab).toBeTruthy()
+		})
+
+		// Verify the slash commands tab is active
+		const slashCommandsTab = container.querySelector('[data-testid="tab-slashCommands"]')
+		expect(slashCommandsTab?.getAttribute("aria-selected")).toBe("true")
+	})
+
+	it("should switch to settings tab without a specific section", async () => {
+		const { container } = render(
+			<QueryClientProvider client={queryClient}>
+				<TranslationProvider>
+					<App />
+				</TranslationProvider>
+			</QueryClientProvider>,
+		)
+
+		// Simulate message to switch to settings tab without targetSection
+		const messageEvent = new MessageEvent("message", {
+			data: {
+				type: "action",
+				action: "switchTab",
+				tab: "settings",
+			},
+		})
+		window.dispatchEvent(messageEvent)
+
+		// Wait for the settings view to render
+		await waitFor(() => {
+			const providersTab = container.querySelector('[data-testid="tab-providers"]')
+			expect(providersTab).toBeTruthy()
+		})
+
+		// Verify the default providers tab is active
+		const providersTab = container.querySelector('[data-testid="tab-providers"]')
+		expect(providersTab?.getAttribute("aria-selected")).toBe("true")
+	})
+})

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