feat: global CSS overlay

src/core/webview/webviewMessageHandler.ts

@@ -42,6 +42,7 @@ import { SYSTEM_PROMPT } from "../prompts/system"
 import { buildApiHandler } from "../../api"
 import { GlobalState } from "../../schemas"
 import { MultiSearchReplaceDiffStrategy } from "../diff/strategies/multi-search-replace"
+import { getCustomCssPath } from "../../shared/storagePathManager"
 
 export const webviewMessageHandler = async (provider: ClineProvider, message: WebviewMessage) => {
 	// Utility functions provided for concise get/update of global state via contextProxy API.
@@ -957,6 +958,81 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await updateGlobalState("maxReadFileLine", message.value)
 			await provider.postStateToWebview()
 			break
+		case "openCustomCssFile": {
+			try {
+				const globalStoragePath = provider.context.globalStorageUri.fsPath
+				const customCssPath = await getCustomCssPath(globalStoragePath)
+				const customCssDir = path.dirname(customCssPath)
+
+				// Ensure directory exists
+				try {
+					await fs.mkdir(customCssDir, { recursive: true })
+				} catch (mkdirError) {
+					// Ignore if directory already exists, re-throw otherwise
+					if ((mkdirError as NodeJS.ErrnoException)?.code !== "EEXIST") {
+						throw mkdirError
+					}
+				}
+
+				// Ensure file exists
+				try {
+					await fs.stat(customCssPath)
+				} catch (statError) {
+					if ((statError as NodeJS.ErrnoException)?.code === "ENOENT") {
+						// File doesn't exist, create it with a comment
+						await fs.writeFile(
+							customCssPath,
+							`/* ${t("common:custom_css.initial_comment", { path: customCssDir })} */\n`,
+							"utf8",
+						)
+						provider.log(`Created custom CSS file at: ${customCssPath}`)
+					} else {
+						// Other stat error
+						throw statError
+					}
+				}
+
+				// Open the file
+				await vscode.commands.executeCommand("vscode.open", vscode.Uri.file(customCssPath))
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error opening or creating custom CSS file: ${errorMessage}`)
+				vscode.window.showErrorMessage(t("common:errors.open_custom_css", { error: errorMessage }))
+			}
+			break
+		}
+		case "closeCustomCssFile": {
+			try {
+				const globalStoragePath = provider.context.globalStorageUri.fsPath
+				const customCssPath = await getCustomCssPath(globalStoragePath)
+				const customCssUri = vscode.Uri.file(customCssPath)
+
+				// Find and close the tab for the custom.css file
+				let tabToClose: vscode.Tab | undefined
+				for (const tabGroup of vscode.window.tabGroups.all) {
+					tabToClose = tabGroup.tabs.find(
+						(tab) =>
+							tab.input instanceof vscode.TabInputText && tab.input.uri.fsPath === customCssUri.fsPath,
+					)
+					if (tabToClose) break // Found the tab
+				}
+
+				if (tabToClose) {
+					const success = await vscode.window.tabGroups.close(tabToClose)
+					if (success) {
+						provider.log(`Closed custom CSS file tab: ${customCssPath}`)
+					} else {
+						provider.log(`Failed to close custom CSS file tab: ${customCssPath}`)
+					}
+				} else {
+					provider.log(`Custom CSS file tab not found: ${customCssPath}`)
+				}
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error closing custom CSS file editor: ${errorMessage}`)
+			}
+			break
+		}
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}
@@ -972,6 +1048,27 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 				await provider.postStateToWebview()
 			}
 			break
+		case "loadCustomCssContent": {
+			let cssContent = ""
+			try {
+				const globalStoragePath = provider.context.globalStorageUri.fsPath
+				const customCssPath = await getCustomCssPath(globalStoragePath)
+				// Check if file exists before attempting to read
+				if (await fileExistsAtPath(customCssPath)) {
+					cssContent = await fs.readFile(customCssPath, "utf8")
+					provider.log(`Loaded custom CSS content from: ${customCssPath}`)
+				} else {
+					provider.log(`Custom CSS file not found at: ${customCssPath}. Sending empty content.`)
+				}
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error reading custom CSS file: ${errorMessage}`)
+				// Send empty content in case of error
+			}
+			// Send content (or empty string on error/not found) back to webview
+			await provider.postMessageToWebview({ type: "customCssContent", text: cssContent })
+			break
+		}
 		case "enhancementApiConfigId":
 			await updateGlobalState("enhancementApiConfigId", message.text)
 			await provider.postStateToWebview()

src/i18n/locales/ca/common.json

@@ -55,7 +55,8 @@
 		"failed_delete_repo": "Ha fallat l'eliminació del repositori o branca associada: {{error}}",
 		"failed_remove_directory": "Ha fallat l'eliminació del directori de tasques: {{error}}",
 		"custom_storage_path_unusable": "La ruta d'emmagatzematge personalitzada \"{{path}}\" no és utilitzable, s'utilitzarà la ruta predeterminada",
-		"cannot_access_path": "No es pot accedir a la ruta {{path}}: {{error}}"
+		"cannot_access_path": "No es pot accedir a la ruta {{path}}: {{error}}",
+		"open_custom_css": "Error en obrir o crear el fitxer CSS personalitzat: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "No s'ha seleccionat contingut de terminal",
@@ -89,5 +90,8 @@
 		"path_placeholder": "D:\\RooCodeStorage",
 		"enter_absolute_path": "Introdueix una ruta completa (p. ex. D:\\RooCodeStorage o /home/user/storage)",
 		"enter_valid_path": "Introdueix una ruta vàlida"
+	},
+	"custom_css": {
+		"initial_comment": "Afegeix aquí les teves regles CSS personalitzades. Aquestes regles sobreescriuran els estils predeterminats. Aquest editor es tancarà automàticament quan facis clic a 'Fet', i el contingut d'aquest fitxer s'aplicarà immediatament cada cop que facis 'Desa'. Recorda, si Roo Code es comporta de manera inesperada a causa de les edicions en aquest fitxer, pots editar o eliminar manualment custom.css a {{path}} per recuperar-lo."
 	}
 }

src/i18n/locales/de/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "Fehler beim Löschen des zugehörigen Shadow-Repositorys oder -Zweigs: {{error}}",
 		"failed_remove_directory": "Fehler beim Entfernen des Aufgabenverzeichnisses: {{error}}",
 		"custom_storage_path_unusable": "Benutzerdefinierter Speicherpfad \"{{path}}\" ist nicht verwendbar, Standardpfad wird verwendet",
-		"cannot_access_path": "Zugriff auf Pfad {{path}} nicht möglich: {{error}}"
+		"cannot_access_path": "Zugriff auf Pfad {{path}} nicht möglich: {{error}}",
+		"open_custom_css": "Fehler beim Öffnen oder Erstellen der benutzerdefinierten CSS-Datei: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "Kein Terminal-Inhalt ausgewählt",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "Bitte gib einen absoluten Pfad ein (z.B. D:\\RooCodeStorage oder /home/user/storage)",
 		"enter_valid_path": "Bitte gib einen gültigen Pfad ein"
 	},
+	"custom_css": {
+		"initial_comment": "Füge hier deine benutzerdefinierten CSS-Regeln hinzu. Diese Regeln überschreiben die Standardstile. Dieser Editor wird automatisch geschlossen, wenn du auf 'Fertig' klickst, und der Inhalt dieser Datei wird bei jedem 'Speichern' sofort angewendet. Denk daran, wenn Roo Code aufgrund von Änderungen in dieser Datei unerwartet reagiert, kannst du custom.css unter {{path}} manuell bearbeiten oder löschen, um es wiederherzustellen."
+	},
 	"input": {
 		"task_prompt": "Was soll Roo tun?",
 		"task_placeholder": "Gib deine Aufgabe hier ein"

src/i18n/locales/en/common.json

@@ -51,7 +51,8 @@
 		"failed_remove_directory": "Failed to remove task directory: {{error}}",
 		"custom_storage_path_unusable": "Custom storage path \"{{path}}\" is unusable, will use default path",
 		"cannot_access_path": "Cannot access path {{path}}: {{error}}",
-		"failed_update_project_mcp": "Failed to update project MCP servers"
+		"failed_update_project_mcp": "Failed to update project MCP servers",
+		"open_custom_css": "Error opening or creating custom CSS file: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "No terminal content selected",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "Please enter an absolute path (e.g. D:\\RooCodeStorage or /home/user/storage)",
 		"enter_valid_path": "Please enter a valid path"
 	},
+	"custom_css": {
+		"initial_comment": "Add your custom CSS rules here. These rules will override the default styles. This editor will close automatically when you click 'Done', and the contents of this file will be applied immediately each time you 'Save'. Remember, if Roo Code behaves unexpectedly due to edits in this file, you can manually edit or delete custom.css at {{path}} to recover."
+	},
 	"input": {
 		"task_prompt": "What should Roo do?",
 		"task_placeholder": "Type your task here"

src/i18n/locales/es/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "Error al eliminar el repositorio o rama asociada: {{error}}",
 		"failed_remove_directory": "Error al eliminar el directorio de tareas: {{error}}",
 		"custom_storage_path_unusable": "La ruta de almacenamiento personalizada \"{{path}}\" no es utilizable, se usará la ruta predeterminada",
-		"cannot_access_path": "No se puede acceder a la ruta {{path}}: {{error}}"
+		"cannot_access_path": "No se puede acceder a la ruta {{path}}: {{error}}",
+		"open_custom_css": "Error al abrir o crear el archivo CSS personalizado: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "No hay contenido de terminal seleccionado",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "Por favor, ingresa una ruta absoluta (por ejemplo, D:\\RooCodeStorage o /home/user/storage)",
 		"enter_valid_path": "Por favor, ingresa una ruta válida"
 	},
+	"custom_css": {
+		"initial_comment": "Añade aquí tus reglas CSS personalizadas. Estas reglas sobrescribirán los estilos predeterminados. Este editor se cerrará automáticamente cuando hagas clic en 'Hecho', y el contenido de este archivo se aplicará inmediatamente cada vez que hagas clic en 'Guardar'. Recuerda, si Roo Code se comporta de forma inesperada debido a las ediciones en este archivo, puedes editar o eliminar manualmente custom.css en {{path}} para recuperarlo."
+	},
 	"input": {
 		"task_prompt": "¿Qué debe hacer Roo?",
 		"task_placeholder": "Escribe tu tarea aquí"

src/i18n/locales/fr/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "Échec de la suppression du repo fantôme ou de la branche associée : {{error}}",
 		"failed_remove_directory": "Échec de la suppression du répertoire de tâches : {{error}}",
 		"custom_storage_path_unusable": "Le chemin de stockage personnalisé \"{{path}}\" est inutilisable, le chemin par défaut sera utilisé",
-		"cannot_access_path": "Impossible d'accéder au chemin {{path}} : {{error}}"
+		"cannot_access_path": "Impossible d'accéder au chemin {{path}} : {{error}}",
+		"open_custom_css": "Erreur lors de l'ouverture ou de la création du fichier CSS personnalisé : {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "Aucun contenu de terminal sélectionné",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "Veuillez entrer un chemin absolu (ex. D:\\RooCodeStorage ou /home/user/storage)",
 		"enter_valid_path": "Veuillez entrer un chemin valide"
 	},
+	"custom_css": {
+		"initial_comment": "Ajoutez ici vos règles CSS personnalisées. Ces règles remplaceront les styles par défaut. Cet éditeur se fermera automatiquement lorsque vous cliquerez sur 'Terminé', et le contenu de ce fichier sera appliqué immédiatement à chaque 'Enregistrer'. N'oubliez pas que si Roo Code se comporte de manière inattendue en raison des modifications apportées à ce fichier, vous pouvez modifier ou supprimer manuellement custom.css à l'adresse {{path}} pour le récupérer."
+	},
 	"input": {
 		"task_prompt": "Que doit faire Roo ?",
 		"task_placeholder": "Écris ta tâche ici"

src/i18n/locales/hi/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "संबंधित शैडो रिपॉजिटरी या ब्रांच हटाने में विफल: {{error}}",
 		"failed_remove_directory": "टास्क डायरेक्टरी हटाने में विफल: {{error}}",
 		"custom_storage_path_unusable": "कस्टम स्टोरेज पाथ \"{{path}}\" उपयोग योग्य नहीं है, डिफ़ॉल्ट पाथ का उपयोग किया जाएगा",
-		"cannot_access_path": "पाथ {{path}} तक पहुंच नहीं पा रहे हैं: {{error}}"
+		"cannot_access_path": "पाथ {{path}} तक पहुंच नहीं पा रहे हैं: {{error}}",
+		"open_custom_css": "कस्टम CSS फ़ाइल खोलने या बनाने में त्रुटि: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "कोई टर्मिनल सामग्री चयनित नहीं",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "कृपया एक पूर्ण पाथ दर्ज करें (उदाहरण: D:\\RooCodeStorage या /home/user/storage)",
 		"enter_valid_path": "कृपया एक वैध पाथ दर्ज करें"
 	},
+	"custom_css": {
+		"initial_comment": "यहां अपने कस्टम CSS नियम जोड़ें। ये नियम डिफ़ॉल्ट शैलियों को ओवरराइड करेंगे। यह संपादक 'पूर्ण' पर क्लिक करने पर स्वचालित रूप से बंद हो जाएगा, और इस फ़ाइल की सामग्री हर बार 'सहेजें' पर तुरंत लागू हो जाएगी। याद रखें, यदि इस फ़ाइल में संपादन के कारण Roo Code अप्रत्याशित रूप से व्यवहार करता है, तो आप पुनर्प्राप्त करने के लिए {{path}} पर custom.css को मैन्युअल रूप से संपादित या हटा सकते हैं।"
+	},
 	"input": {
 		"task_prompt": "Roo को क्या करना है?",
 		"task_placeholder": "अपना कार्य यहाँ लिखें"

src/i18n/locales/it/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "Impossibile eliminare il repository o il ramo associato: {{error}}",
 		"failed_remove_directory": "Impossibile rimuovere la directory delle attività: {{error}}",
 		"custom_storage_path_unusable": "Il percorso di archiviazione personalizzato \"{{path}}\" non è utilizzabile, verrà utilizzato il percorso predefinito",
-		"cannot_access_path": "Impossibile accedere al percorso {{path}}: {{error}}"
+		"cannot_access_path": "Impossibile accedere al percorso {{path}}: {{error}}",
+		"open_custom_css": "Errore durante l'apertura o la creazione del file CSS personalizzato: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "Nessun contenuto del terminale selezionato",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "Inserisci un percorso assoluto (ad esempio D:\\RooCodeStorage o /home/user/storage)",
 		"enter_valid_path": "Inserisci un percorso valido"
 	},
+	"custom_css": {
+		"initial_comment": "Aggiungi qui le tue regole CSS personalizzate. Queste regole sovrascriveranno gli stili predefiniti. Questo editor si chiuderà automaticamente quando fai clic su 'Fatto', e il contenuto di questo file verrà applicato immediatamente ogni volta che fai clic su 'Salva'. Ricorda, se Roo Code si comporta in modo imprevisto a causa delle modifiche in questo file, puoi modificare o eliminare manualmente custom.css in {{path}} per ripristinarlo."
+	},
 	"input": {
 		"task_prompt": "Cosa deve fare Roo?",
 		"task_placeholder": "Scrivi il tuo compito qui"

src/i18n/locales/ja/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "関連するシャドウリポジトリまたはブランチの削除に失敗しました：{{error}}",
 		"failed_remove_directory": "タスクディレクトリの削除に失敗しました：{{error}}",
 		"custom_storage_path_unusable": "カスタムストレージパス \"{{path}}\" が使用できないため、デフォルトパスを使用します",
-		"cannot_access_path": "パス {{path}} にアクセスできません：{{error}}"
+		"cannot_access_path": "パス {{path}} にアクセスできません：{{error}}",
+		"open_custom_css": "カスタムCSSファイルのオープンまたは作成中にエラーが発生しました：{{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "選択されたターミナルコンテンツがありません",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "絶対パスを入力してください（例：D:\\RooCodeStorage または /home/user/storage）",
 		"enter_valid_path": "有効なパスを入力してください"
 	},
+	"custom_css": {
+		"initial_comment": "ここにカスタムCSSルールを追加します。これらのルールはデフォルトのスタイルを上書きします。このエディターは「完了」をクリックすると自動的に閉じられ、このファイルの内容は「保存」するたびにすぐに適用されます。このファイルの編集によりRoo Codeが予期せず動作した場合、{{path}}にあるcustom.cssを手動で編集または削除して回復できることを覚えておいてください。"
+	},
 	"input": {
 		"task_prompt": "Rooにどんなことをさせますか？",
 		"task_placeholder": "タスクをここに入力してください"

src/i18n/locales/ko/common.json

@@ -51,7 +51,8 @@
 		"failed_delete_repo": "관련 shadow 저장소 또는 브랜치 삭제 실패: {{error}}",
 		"failed_remove_directory": "작업 디렉토리 제거 실패: {{error}}",
 		"custom_storage_path_unusable": "사용자 지정 저장 경로 \"{{path}}\"를 사용할 수 없어 기본 경로를 사용합니다",
-		"cannot_access_path": "경로 {{path}}에 접근할 수 없습니다: {{error}}"
+		"cannot_access_path": "경로 {{path}}에 접근할 수 없습니다: {{error}}",
+		"open_custom_css": "사용자 지정 CSS 파일을 열거나 생성하는 중 오류 발생: {{error}}"
 	},
 	"warnings": {
 		"no_terminal_content": "선택된 터미널 내용이 없습니다",
@@ -86,6 +87,9 @@
 		"enter_absolute_path": "절대 경로를 입력하세요 (예: D:\\RooCodeStorage 또는 /home/user/storage)",
 		"enter_valid_path": "유효한 경로를 입력하세요"
 	},
+	"custom_css": {
+		"initial_comment": "여기에 사용자 지정 CSS 규칙을 추가하세요. 이 규칙은 기본 스타일을 덮어씁니다. 이 편집기는 '완료'를 클릭하면 자동으로 닫히며, 이 파일의 내용은 '저장'할 때마다 즉시 적용됩니다. 이 파일 편집으로 인해 Roo Code가 예기치 않게 작동하는 경우, {{path}}에서 custom.css를 수동으로 편집하거나 삭제하여 복구할 수 있음을 기억하세요."
+	},
 	"input": {
 		"task_prompt": "Roo에게 무엇을 시킬까요?",
 		"task_placeholder": "여기에 작업을 입력하세요"