feat(content): generalize custom instructions and enhance refresh UX

- Refactor custom instructions management to a generic 'content' system, introducing `GlobalContentIds`.
- Implement new `openContent`, `updateContent`, and `refreshContent` methods in `ClineProvider` to handle various content types.
- Update webview message interfaces (`WebviewMessage`, `ExtensionMessage`) to support content IDs and a new `contentRefreshed` event.
- Enhance the custom instructions UI in the webview with a dedicated `useRefreshableContent` hook.
- Add visual feedback for content refresh operations, including a loading spinner and a success message.

Author: devxpain

src/core/webview/ClineProvider.ts

@@ -37,6 +37,7 @@ import { Package } from "../../shared/package"
 import { findLast } from "../../shared/array"
 import { supportPrompt } from "../../shared/support-prompt"
 import { GlobalFileNames } from "../../shared/globalFileNames"
+import { GlobalContentIds } from "../../shared/globalContentIds"
 import { ExtensionMessage } from "../../shared/ExtensionMessage"
 import { Mode, defaultModeSlug } from "../../shared/modes"
 import { experimentDefault, experiments, EXPERIMENT_IDS } from "../../shared/experiments"
@@ -996,45 +997,75 @@ export class ClineProvider
 		return getSettingsDirectoryPath(globalStoragePath)
 	}
 
-	// Custom Instructions
+	private async getContentPath(contentId: string): Promise<string | undefined> {
+		const settingsDir = await this.ensureSettingsDirectoryExists()
+		switch (contentId) {
+			case GlobalContentIds.customInstructions:
+				return path.join(settingsDir, GlobalFileNames.customInstructions)
+			default:
+				this.log(`Unknown contentId: ${contentId}`)
+				return undefined
+		}
+	}
+
+	// Content
+
+	async openContent(contentId: string): Promise<void> {
+		const filePath = await this.getContentPath(contentId)
+
+		if (!filePath) {
+			this.log(`File path could not be determined for contentId: ${contentId}`)
+			return
+		}
 
-	async updateCustomInstructions(instructions?: string) {
-		const settingsDirPath = await this.ensureSettingsDirectoryExists()
-		const customInstructionsFilePath = path.join(settingsDirPath, GlobalFileNames.customInstructions)
+		const uri = vscode.Uri.file(filePath)
+		await vscode.commands.executeCommand("vscode.open", uri, {
+			preview: false,
+			preserveFocus: true,
+		})
+		await vscode.commands.executeCommand("workbench.action.files.revert")
+	}
 
-		if (instructions && instructions.trim()) {
-			await fs.writeFile(customInstructionsFilePath, instructions.trim(), "utf-8")
+	async refreshContent(contentId: string): Promise<void> {
+		const content = await this.readContent(contentId)
+		await this.updateContent(contentId, content)
+		this.postMessageToWebview({
+			type: "contentRefreshed",
+			contentId: contentId,
+			success: true, // Assuming success for now
+		})
+	}
+
+	async updateContent(contentId: string, content?: string) {
+		const filePath = await this.getContentPath(contentId)
+
+		if (!filePath) {
+			this.log(`File path could not be determined for contentId: ${contentId}`)
+			return
+		}
+
+		if (content && content.trim()) {
+			await fs.writeFile(filePath, content.trim(), "utf-8")
+			this.log(`Updated content file: ${filePath}`)
 		} else {
-			// If instructions are empty or undefined, delete the file if it exists
 			try {
-				await fs.unlink(customInstructionsFilePath)
+				await fs.unlink(filePath)
+				this.log(`Deleted content file: ${filePath}`)
 			} catch (error) {
-				// Ignore if file doesn't exist
-				if ((error as NodeJS.ErrnoException).code !== "ENOENT") {
+				if (error.code !== "ENOENT") {
+					this.log(`Error deleting content file: ${error.message}`)
 					throw error
 				}
 			}
 		}
+		// Update the webview state
 		await this.postStateToWebview()
 	}
 
-	async openCustomInstructionsFile(): Promise<void> {
-		const settingsDirPath = await this.ensureSettingsDirectoryExists()
-		const customInstructionsFilePath = path.join(settingsDirPath, GlobalFileNames.customInstructions)
-		const fileUri = vscode.Uri.file(customInstructionsFilePath)
-		await vscode.commands.executeCommand("vscode.open", fileUri, { preview: false, preserveFocus: true })
-		await vscode.commands.executeCommand("workbench.action.files.revert", fileUri)
-	}
-
-	async refreshCustomInstructions(): Promise<void> {
-		const content = await this.readCustomInstructionsFromFile()
-		await this.updateCustomInstructions(content)
-	}
+	private async readContent(contentId: string): Promise<string> {
+		const filePath = await this.getContentPath(contentId)
 
-	private async readCustomInstructionsFromFile(): Promise<string | undefined> {
-		const settingsDirPath = await this.ensureSettingsDirectoryExists()
-		const customInstructionsFilePath = path.join(settingsDirPath, GlobalFileNames.customInstructions)
-		return await safeReadFile(customInstructionsFilePath)
+		return filePath ? ((await safeReadFile(filePath)) ?? "") : ""
 	}
 
 	// MCP
@@ -1511,7 +1542,7 @@ export class ClineProvider
 		return {
 			apiConfiguration: providerSettings,
 			lastShownAnnouncementId: stateValues.lastShownAnnouncementId,
-			customInstructions: await this.readCustomInstructionsFromFile(),
+			customInstructions: await this.readContent(GlobalContentIds.customInstructions),
 			apiModelId: stateValues.apiModelId,
 			alwaysAllowReadOnly: stateValues.alwaysAllowReadOnly ?? false,
 			alwaysAllowReadOnlyOutsideWorkspace: stateValues.alwaysAllowReadOnlyOutsideWorkspace ?? false,

src/core/webview/webviewMessageHandler.ts

@@ -14,9 +14,9 @@ import { RouterName, toRouterName, ModelRecord } from "../../shared/api"
 import { supportPrompt } from "../../shared/support-prompt"
 
 import { checkoutDiffPayloadSchema, checkoutRestorePayloadSchema, WebviewMessage } from "../../shared/WebviewMessage"
+import { GlobalContentIds } from "../../shared/globalContentIds"
 import { checkExistKey } from "../../shared/checkExistApiConfig"
 import { experimentDefault } from "../../shared/experiments"
-import { GlobalFileNames } from "../../shared/globalFileNames"
 import { Terminal } from "../../integrations/terminal/Terminal"
 import { openFile, openImage } from "../../integrations/misc/open-file"
 import { selectImages } from "../../integrations/misc/process-images"
@@ -131,13 +131,23 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await provider.initClineWithTask(message.text, message.images)
 			break
 		case "customInstructions":
-			await provider.updateCustomInstructions(message.text)
+			await provider.updateContent(GlobalContentIds.customInstructions, message.text)
 			break
-		case "openCustomInstructionsFile":
-			await provider.openCustomInstructionsFile()
+		case "openContent":
+			if (message.contentId) {
+				// Check for contentId instead of filePath
+				await provider.openContent(message.contentId)
+			} else {
+				console.error("openContent message missing contentId")
+			}
 			break
-		case "refreshCustomInstructions":
-			await provider.refreshCustomInstructions()
+		case "refreshContent":
+			if (message.contentId) {
+				await provider.refreshContent(message.contentId)
+			} else {
+				// Handle error or log if contentId is missing
+				console.error("refreshContent message missing contentId")
+			}
 			break
 		case "alwaysAllowReadOnly":
 			await updateGlobalState("alwaysAllowReadOnly", message.bool ?? undefined)

src/shared/ExtensionMessage.ts

@@ -73,6 +73,7 @@ export interface ExtensionMessage {
 		| "indexingStatusUpdate"
 		| "indexCleared"
 		| "codebaseIndexConfig"
+		| "contentRefreshed"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -105,6 +106,7 @@ export interface ExtensionMessage {
 	customMode?: ModeConfig
 	slug?: string
 	success?: boolean
+	contentId?: string
 	values?: Record<string, any>
 	requestId?: string
 	promptText?: string

src/shared/WebviewMessage.ts

@@ -51,6 +51,7 @@ export interface WebviewMessage {
 		| "openImage"
 		| "openFile"
 		| "openMention"
+		| "openContent"
 		| "cancelTask"
 		| "updateVSCodeSetting"
 		| "getVSCodeSetting"
@@ -118,8 +119,7 @@ export interface WebviewMessage {
 		| "deleteCustomMode"
 		| "setopenAiCustomModelInfo"
 		| "openCustomModesSettings"
-		| "openCustomInstructionsFile"
-		| "refreshCustomInstructions"
+		| "refreshContent"
 		| "checkpointDiff"
 		| "checkpointRestore"
 		| "deleteMcpServer"
@@ -172,6 +172,7 @@ export interface WebviewMessage {
 	modeConfig?: ModeConfig
 	timeout?: number
 	payload?: WebViewMessagePayload
+	contentId?: string
 	source?: "global" | "project"
 	requestId?: string
 	ids?: string[]

src/shared/globalContentIds.ts

@@ -0,0 +1,3 @@
+export const GlobalContentIds = {
+	customInstructions: "customInstructions" as const,
+}

webview-ui/src/components/modes/ModesView.tsx

@@ -44,6 +44,8 @@ import {
 	CommandGroup,
 	Input,
 } from "@src/components/ui"
+import { GlobalContentIds } from "../../../../src/shared/globalContentIds"
+import { useRefreshableContent } from "../../hooks/useRefreshableContent"
 
 // Get all available groups that should show in prompts view
 const availableGroups = (Object.keys(TOOL_GROUPS) as ToolGroup[]).filter((group) => !TOOL_GROUPS[group].alwaysAvailable)
@@ -79,6 +81,10 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 	// 3. Still sending the mode change to the backend for persistence
 	const [visualMode, setVisualMode] = useState(mode)
 
+	const { isRefreshing, showRefreshSuccess, refreshContent } = useRefreshableContent(
+		GlobalContentIds.customInstructions,
+	)
+
 	// Memoize modes to preserve array order
 	const modes = useMemo(() => getAllModes(customModes), [customModes])
 
@@ -1045,7 +1051,8 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								size="icon"
 								onClick={() => {
 									vscode.postMessage({
-										type: "openCustomInstructionsFile",
+										type: "openContent",
+										contentId: GlobalContentIds.customInstructions,
 									})
 								}}
 								title={t("prompts:globalCustomInstructions.openFile")}>
@@ -1054,17 +1061,19 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 							<Button
 								variant="ghost"
 								size="icon"
-								onClick={() => {
-									vscode.postMessage({
-										type: "refreshCustomInstructions",
-									})
-								}}
-								title={t("prompts:globalCustomInstructions.refreshFile")}>
-								<span className="codicon codicon-refresh"></span>
+								onClick={refreshContent}
+								title={t("prompts:globalCustomInstructions.refreshFile")}
+								disabled={isRefreshing}>
+								<span
+									className={`codicon codicon-${isRefreshing ? "loading codicon-modifier-spin" : "refresh"}`}></span>
 							</Button>
 						</div>
 					</div>
-
+					{showRefreshSuccess && (
+						<div className="text-xs text-vscode-textLink-foreground mb-2">
+							{t("prompts:globalCustomInstructions.refreshSuccess")}
+						</div>
+					)}
 					<div className="text-sm text-vscode-descriptionForeground mb-2">
 						<Trans i18nKey="prompts:globalCustomInstructions.description">
 							<VSCodeLink
@@ -1084,7 +1093,7 @@ const ModesView = ({ onDone }: ModesViewProps) => {
 								((e as any).target as HTMLTextAreaElement).value
 							setCustomInstructions(value || undefined)
 							vscode.postMessage({
-								type: "customInstructions",
+								type: GlobalContentIds.customInstructions,
 								text: value.trim() || undefined,
 							})
 						}}

webview-ui/src/hooks/useRefreshableContent.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect, useCallback } from "react"
+import { vscode } from "../utils/vscode"
+import type { ExtensionMessage } from "../../../src/shared/ExtensionMessage"
+
+interface UseRefreshableContentResult {
+	isRefreshing: boolean
+	showRefreshSuccess: boolean
+	refreshContent: () => void
+}
+
+export function useRefreshableContent(contentId: string): UseRefreshableContentResult {
+	const [isRefreshing, setIsRefreshing] = useState(false)
+	const [showRefreshSuccess, setShowRefreshSuccess] = useState(false)
+
+	useEffect(() => {
+		const handleMessage = (event: MessageEvent<ExtensionMessage>) => {
+			const message = event.data
+			if (message.type === "contentRefreshed" && message.contentId === contentId) {
+				setIsRefreshing(false)
+				if (message.success) {
+					setShowRefreshSuccess(true)
+					const timer = setTimeout(() => {
+						setShowRefreshSuccess(false)
+					}, 3000)
+					return () => clearTimeout(timer)
+				}
+			}
+		}
+
+		window.addEventListener("message", handleMessage)
+		return () => {
+			window.removeEventListener("message", handleMessage)
+		}
+	}, [contentId])
+
+	const refreshContent = useCallback(() => {
+		setIsRefreshing(true)
+		vscode.postMessage({
+			type: "refreshContent",
+			contentId,
+		})
+	}, [contentId])
+
+	return { isRefreshing, showRefreshSuccess, refreshContent }
+}

webview-ui/src/i18n/locales/en/prompts.json

@@ -50,6 +50,7 @@
 		"description": "These instructions apply to all modes. They provide a base set of behaviors that can be enhanced by mode-specific instructions below. <0>Learn more</0>",
 		"openFile": "Open custom instructions file",
 		"refreshFile": "Refresh custom instructions from file",
+		"refreshSuccess": "Custom instructions refreshed!",
 		"loadFromFile": "Instructions can also be loaded from the <span>.roo/rules/</span> folder in your workspace (.roorules and .clinerules are deprecated and will stop working soon)."
 	},
 	"systemPrompt": {