feat: add overriddenBy property to ModeWithSource and display in ModeEnableDisableDialog

Author: mechanicmuthu

src/services/ModeManager.ts

@@ -14,7 +14,11 @@ export interface ModeState {
 // Internal type used when returning modes to callers (webview/handlers).
 // Extends the canonical ModeConfig with source information and an optional
 // UI-only `overridesBuiltin` flag used by the webview.
-export type ModeWithSource = ModeConfig & { source: ModeSource; overridesBuiltin?: boolean }
+export type ModeWithSource = ModeConfig & {
+	source: ModeSource
+	overridesBuiltin?: boolean
+	overriddenBy?: ModeSource
+}
 
 /**
  * ModeManager handles mode operations including enable/disable functionality,
@@ -42,6 +46,14 @@ export class ModeManager {
 			const customOverride = customModes.find((m) => m.slug === mode.slug)
 			if (!customOverride) {
 				allModes.push({ ...mode, source: "builtin" })
+			} else {
+				// Add overridden built-in mode with override information
+				allModes.push({
+					...mode,
+					source: "builtin",
+					disabled: customOverride.disabled,
+					overriddenBy: customOverride.source as ModeSource,
+				})
 			}
 		}
 

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

@@ -43,6 +43,7 @@ export type ModeSource = "builtin" | "global" | "project"
 export interface ModeWithSource extends ModeConfig {
 	source: ModeSource
 	disabled?: boolean
+	overriddenBy?: ModeSource
 }
 
 interface ModeEnableDisableDialogProps {
@@ -222,6 +223,11 @@ export const ModeEnableDisableDialog: React.FC<ModeEnableDisableDialogProps> = (
 						<Badge variant="outline" className={cn("source-badge text-xs px-1.5 py-0.5", mode.source)}>
 							{SOURCE_INFO[mode.source].icon} {mode.source}
 						</Badge>
+						{mode.overriddenBy && (
+							<Badge variant="secondary" className="text-xs px-1.5 py-0.5">
+								Overridden by {mode.overriddenBy}
+							</Badge>
+						)}
 					</div>
 					{mode.description && (
 						<p className={cn("mode-description text-xs mt-1 truncate", mode.disabled && "disabled")}>