feat: improve unlimited diagnostics UI with integrated slider design

- Replace separate unlimited checkbox with intuitive slider design
- Slider maximum position (100) now represents 'unlimited' value
- Internal value of -1 is set when slider is at maximum position
- Display 'Unlimited' text when slider is at max position
- Update all 18 language translations for the new UI text
- Update tests to reflect the new integrated design approach

This provides a cleaner, more intuitive interface for setting diagnostic limits
without the need for a separate checkbox control.

Author: hannesrudolph

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

@@ -272,13 +272,22 @@ export const ContextManagementSettings = ({
 							min={1}
 							max={100}
 							step={1}
-							value={[maxDiagnosticMessages ?? 50]}
-							onValueChange={([value]) => setCachedStateField("maxDiagnosticMessages", value)}
+							value={[
+								maxDiagnosticMessages !== undefined && maxDiagnosticMessages <= 0
+									? 100
+									: (maxDiagnosticMessages ?? 50),
+							]}
+							onValueChange={([value]) => {
+								// When slider reaches 100, set to -1 (unlimited)
+								setCachedStateField("maxDiagnosticMessages", value === 100 ? -1 : value)
+							}}
 							data-testid="max-diagnostic-messages-slider"
-							disabled={maxDiagnosticMessages === -1}
 						/>
-						<span className="w-10">
-							{maxDiagnosticMessages === -1 ? "∞" : (maxDiagnosticMessages ?? 50)}
+						<span className="w-20 text-sm font-medium">
+							{(maxDiagnosticMessages !== undefined && maxDiagnosticMessages <= 0) ||
+							maxDiagnosticMessages === 100
+								? t("settings:contextManagement.diagnostics.maxMessages.unlimitedLabel") || "Unlimited"
+								: (maxDiagnosticMessages ?? 50)}
 						</span>
 						<Button
 							variant="ghost"
@@ -290,18 +299,12 @@ export const ContextManagementSettings = ({
 							<span className="codicon codicon-discard" />
 						</Button>
 					</div>
-					<div className="flex items-center gap-2 mt-2">
-						<VSCodeCheckbox
-							checked={maxDiagnosticMessages === -1}
-							onChange={(e: any) =>
-								setCachedStateField("maxDiagnosticMessages", e.target.checked ? -1 : 50)
-							}
-							data-testid="max-diagnostic-messages-unlimited-checkbox">
-							{t("settings:contextManagement.diagnostics.maxMessages.unlimited")}
-						</VSCodeCheckbox>
-					</div>
 					<div className="text-vscode-descriptionForeground text-sm mt-1">
-						{t("settings:contextManagement.diagnostics.maxMessages.description")}
+						{(maxDiagnosticMessages !== undefined && maxDiagnosticMessages <= 0) ||
+						maxDiagnosticMessages === 100
+							? t("settings:contextManagement.diagnostics.maxMessages.unlimitedDescription") ||
+								"All diagnostic messages will be included. Use with caution as this may significantly increase token usage."
+							: t("settings:contextManagement.diagnostics.maxMessages.description")}
 					</div>
 				</div>
 			</Section>

webview-ui/src/components/settings/__tests__/ContextManagementSettings.spec.tsx

@@ -3,6 +3,19 @@
 import { render, screen, fireEvent, waitFor } from "@/utils/test-utils"
 import { ContextManagementSettings } from "../ContextManagementSettings"
 
+// Mock the translation hook
+vi.mock("@/hooks/useAppTranslation", () => ({
+	useAppTranslation: () => ({
+		t: (key: string) => {
+			// Return specific translations for our test cases
+			if (key === "settings:contextManagement.diagnostics.maxMessages.unlimitedLabel") {
+				return "Unlimited"
+			}
+			return key
+		},
+	}),
+}))
+
 // Mock the UI components
 vi.mock("@/components/ui", () => ({
 	...vi.importActual("@/components/ui"),
@@ -122,7 +135,7 @@ describe("ContextManagementSettings", () => {
 		fireEvent.change(slider, { target: { value: "100" } })
 
 		await waitFor(() => {
-			expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", 100)
+			expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", -1)
 		})
 	})
 
@@ -142,9 +155,17 @@ describe("ContextManagementSettings", () => {
 
 		expect(screen.getByText("25")).toBeInTheDocument()
 
-		// Update value
+		// Update value - 100 should display as "Unlimited"
 		rerender(<ContextManagementSettings {...defaultProps} maxDiagnosticMessages={100} />)
-		expect(screen.getByText("100")).toBeInTheDocument()
+		expect(
+			screen.getByText("settings:contextManagement.diagnostics.maxMessages.unlimitedLabel"),
+		).toBeInTheDocument()
+
+		// Test unlimited value (-1) displays as "Unlimited"
+		rerender(<ContextManagementSettings {...defaultProps} maxDiagnosticMessages={-1} />)
+		expect(
+			screen.getByText("settings:contextManagement.diagnostics.maxMessages.unlimitedLabel"),
+		).toBeInTheDocument()
 	})
 
 	it("renders other context management settings", () => {
@@ -161,7 +182,7 @@ describe("ContextManagementSettings", () => {
 	})
 
 	describe("Edge cases for maxDiagnosticMessages", () => {
-		it("handles zero value correctly", async () => {
+		it("handles zero value as unlimited", async () => {
 			const setCachedStateField = vi.fn()
 			render(
 				<ContextManagementSettings
@@ -171,13 +192,17 @@ describe("ContextManagementSettings", () => {
 				/>,
 			)
 
-			expect(screen.getByText("0")).toBeInTheDocument()
+			// Zero is now treated as unlimited
+			expect(
+				screen.getByText("settings:contextManagement.diagnostics.maxMessages.unlimitedLabel"),
+			).toBeInTheDocument()
 
 			const slider = screen.getByTestId("max-diagnostic-messages-slider")
-			expect(slider).toHaveValue("0")
+			// Zero should map to slider position 100 (unlimited)
+			expect(slider).toHaveValue("100")
 		})
 
-		it("handles negative values by displaying them", async () => {
+		it("handles negative values as unlimited", async () => {
 			const setCachedStateField = vi.fn()
 			render(
 				<ContextManagementSettings
@@ -187,11 +212,14 @@ describe("ContextManagementSettings", () => {
 				/>,
 			)
 
-			// Component displays the actual negative value in the text span
-			expect(screen.getByText("-10")).toBeInTheDocument()
+			// Component displays "Unlimited" for any negative value
+			expect(
+				screen.getByText("settings:contextManagement.diagnostics.maxMessages.unlimitedLabel"),
+			).toBeInTheDocument()
 
-			// Note: The actual slider behavior with negative values depends on the implementation
-			// In this case, we're just verifying the component renders without errors
+			// Slider should be at max position (100) for negative values
+			const slider = screen.getByTestId("max-diagnostic-messages-slider")
+			expect(slider).toHaveValue("100")
 		})
 
 		it("handles very large numbers by capping at maximum", async () => {
@@ -223,32 +251,33 @@ describe("ContextManagementSettings", () => {
 			fireEvent.change(slider, { target: { value: "150" } })
 
 			await waitFor(() => {
-				// Should be capped at 100 (the slider's max)
-				expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", 100)
+				// Should be capped at 100, which maps to -1 (unlimited)
+				expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", -1)
 			})
 		})
 
-		it("handles boundary value at minimum (0)", async () => {
+		it("handles boundary value at minimum (1)", async () => {
 			const setCachedStateField = vi.fn()
 			render(<ContextManagementSettings {...defaultProps} setCachedStateField={setCachedStateField} />)
 
 			const slider = screen.getByTestId("max-diagnostic-messages-slider")
-			fireEvent.change(slider, { target: { value: "0" } })
+			fireEvent.change(slider, { target: { value: "1" } })
 
 			await waitFor(() => {
-				expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", 0)
+				expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", 1)
 			})
 		})
 
-		it("handles boundary value at maximum (100)", async () => {
+		it("handles boundary value at maximum (100) as unlimited (-1)", async () => {
 			const setCachedStateField = vi.fn()
 			render(<ContextManagementSettings {...defaultProps} setCachedStateField={setCachedStateField} />)
 
 			const slider = screen.getByTestId("max-diagnostic-messages-slider")
 			fireEvent.change(slider, { target: { value: "100" } })
 
 			await waitFor(() => {
-				expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", 100)
+				// When slider is at 100, it should set the value to -1 (unlimited)
+				expect(setCachedStateField).toHaveBeenCalledWith("maxDiagnosticMessages", -1)
 			})
 		})
 

webview-ui/src/i18n/locales/ca/settings.json

@@ -475,7 +475,9 @@
 				"label": "Màxim de missatges de diagnòstic",
 				"description": "Nombre màxim de missatges de diagnòstic a incloure per fitxer. Aquest límit s'aplica tant a la inclusió automàtica (quan la casella està activada) com a les mencions manuals de @problems. Valors més alts proporcionen més context però augmenten l'ús de tokens.",
 				"resetTooltip": "Restablir al valor per defecte (50)",
-				"unlimited": "Missatges de diagnòstic il·limitats"
+				"unlimited": "Missatges de diagnòstic il·limitats",
+				"unlimitedLabel": "Il·limitat",
+				"unlimitedDescription": "S'inclouran tots els missatges de diagnòstic. Utilitzeu amb precaució ja que això pot augmentar significativament l'ús de tokens."
 			}
 		},
 		"condensingThreshold": {

webview-ui/src/i18n/locales/de/settings.json

@@ -475,7 +475,9 @@
 				"label": "Maximale Anzahl von Diagnosenachrichten",
 				"description": "Maximale Anzahl von Diagnosenachrichten, die pro Datei eingeschlossen werden. Dieses Limit gilt sowohl für die automatische Einbeziehung (wenn das Kontrollkästchen aktiviert ist) als auch für manuelle @problems-Erwähnungen. Höhere Werte bieten mehr Kontext, erhöhen aber den Token-Verbrauch.",
 				"resetTooltip": "Auf Standardwert zurücksetzen (50)",
-				"unlimited": "Unbegrenzte Diagnosenachrichten"
+				"unlimited": "Unbegrenzte Diagnosenachrichten",
+				"unlimitedLabel": "Unbegrenzt",
+				"unlimitedDescription": "Alle Diagnosenachrichten werden einbezogen. Mit Vorsicht verwenden, da dies den Token-Verbrauch erheblich erhöhen kann."
 			}
 		},
 		"condensingThreshold": {

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

@@ -475,7 +475,9 @@
 				"label": "Maximum diagnostic messages",
 				"description": "Maximum number of diagnostic messages to include per file. This limit applies to both automatic inclusion (when checkbox is enabled) and manual @problems mentions. Higher values provide more context but increase token usage.",
 				"resetTooltip": "Reset to default value (50)",
-				"unlimited": "Unlimited diagnostic messages"
+				"unlimited": "Unlimited diagnostic messages",
+				"unlimitedLabel": "Unlimited",
+				"unlimitedDescription": "All diagnostic messages will be included. Use with caution as this may significantly increase token usage."
 			}
 		},
 		"condensingThreshold": {

webview-ui/src/i18n/locales/es/settings.json

@@ -475,7 +475,9 @@
 				"label": "Máximo de mensajes de diagnóstico",
 				"description": "Número máximo de mensajes de diagnóstico a incluir por archivo. Este límite se aplica tanto a la inclusión automática (cuando la casilla está habilitada) como a las menciones manuales de @problems. Valores más altos proporcionan más contexto pero aumentan el uso de tokens.",
 				"resetTooltip": "Restablecer al valor predeterminado (50)",
-				"unlimited": "Mensajes de diagnóstico ilimitados"
+				"unlimited": "Mensajes de diagnóstico ilimitados",
+				"unlimitedLabel": "Ilimitado",
+				"unlimitedDescription": "Se incluirán todos los mensajes de diagnóstico. Úselo con precaución ya que esto puede aumentar significativamente el uso de tokens."
 			}
 		},
 		"condensingThreshold": {

webview-ui/src/i18n/locales/fr/settings.json

@@ -475,7 +475,9 @@
 				"label": "Nombre maximum de messages de diagnostic",
 				"description": "Nombre maximum de messages de diagnostic à inclure par fichier. Cette limite s'applique à la fois à l'inclusion automatique (lorsque la case est cochée) et aux mentions manuelles @problems. Des valeurs plus élevées fournissent plus de contexte mais augmentent l'utilisation des jetons.",
 				"resetTooltip": "Réinitialiser à la valeur par défaut (50)",
-				"unlimited": "Messages de diagnostic illimités"
+				"unlimited": "Messages de diagnostic illimités",
+				"unlimitedLabel": "Illimité",
+				"unlimitedDescription": "Tous les messages de diagnostic seront inclus. Utilisez avec prudence car cela peut augmenter considérablement l'utilisation des jetons."
 			}
 		},
 		"condensingThreshold": {

webview-ui/src/i18n/locales/hi/settings.json

@@ -475,7 +475,9 @@
 				"label": "अधिकतम नैदानिक ​​संदेश",
 				"description": "प्रति फ़ाइल शामिल किए जाने वाले नैदानिक ​​संदेशों की अधिकतम संख्या। यह सीमा स्वचालित समावेशन (जब चेकबॉक्स सक्षम है) और मैन्युअल @problems उल्लेख दोनों पर लागू होती है। उच्च मान अधिक संदर्भ प्रदान करते हैं लेकिन टोकन उपयोग बढ़ाते हैं।",
 				"resetTooltip": "डिफ़ॉल्ट मान पर रीसेट करें (50)",
-				"unlimited": "असीमित डायग्नोस्टिक संदेश"
+				"unlimited": "असीमित डायग्नोस्टिक संदेश",
+				"unlimitedLabel": "असीमित",
+				"unlimitedDescription": "सभी डायग्नोस्टिक संदेश शामिल किए जाएंगे। सावधानी से उपयोग करें क्योंकि यह टोकन उपयोग को काफी बढ़ा सकता है।"
 			}
 		},
 		"condensingThreshold": {

webview-ui/src/i18n/locales/id/settings.json

@@ -457,7 +457,9 @@
 				"label": "Pesan diagnostik maksimum",
 				"description": "Jumlah maksimum pesan diagnostik yang akan disertakan per file. Batas ini berlaku untuk penyertaan otomatis (ketika checkbox diaktifkan) dan penyebutan manual @problems. Nilai yang lebih tinggi memberikan lebih banyak konteks tetapi meningkatkan penggunaan token.",
 				"resetTooltip": "Reset ke nilai default (50)",
-				"unlimited": "Pesan diagnostik tidak terbatas"
+				"unlimited": "Pesan diagnostik tidak terbatas",
+				"unlimitedLabel": "Tak terbatas",
+				"unlimitedDescription": "Semua pesan diagnostik akan disertakan. Gunakan dengan hati-hati karena ini dapat meningkatkan penggunaan token secara signifikan."
 			}
 		},
 		"condensingThreshold": {

webview-ui/src/i18n/locales/it/settings.json

@@ -475,7 +475,9 @@
 				"label": "Numero massimo di messaggi diagnostici",
 				"description": "Numero massimo di messaggi diagnostici da includere per file. Questo limite si applica sia all'inclusione automatica (quando la casella è abilitata) che alle menzioni manuali di @problems. Valori più alti forniscono più contesto ma aumentano l'utilizzo dei token.",
 				"resetTooltip": "Ripristina al valore predefinito (50)",
-				"unlimited": "Messaggi diagnostici illimitati"
+				"unlimited": "Messaggi diagnostici illimitati",
+				"unlimitedLabel": "Illimitato",
+				"unlimitedDescription": "Verranno inclusi tutti i messaggi diagnostici. Usare con cautela poiché questo può aumentare significativamente l'utilizzo dei token."
 			}
 		},
 		"condensingThreshold": {