On Windows, Hooks tab in modal should show .ps1 file extension

webview-ui/src/components/cline-rules/ClineRulesToggleModal.tsx

@@ -25,6 +25,15 @@ import NewRuleRow from "./NewRuleRow"
 import RuleRow from "./RuleRow"
 import RulesToggleList from "./RulesToggleList"
 
+const getHookDisplayName = (hookName: string, absolutePath: string, isWindows: boolean): string => {
+	if (!isWindows) {
+		return hookName
+	}
+
+	const filename = absolutePath.split(/[/\\]/).pop()
+	return filename || `${hookName}.ps1`
+}
+
 const ClineRulesToggleModal: React.FC = () => {
 	const {
 		globalClineRulesToggles = {},
@@ -697,9 +706,9 @@ const ClineRulesToggleModal: React.FC = () => {
 									<div className="flex items-center gap-2 px-5 py-3 mb-4 bg-vscode-inputValidation-warningBackground border-l-[3px] border-vscode-inputValidation-warningBorder">
 										<i className="codicon codicon-warning text-sm" />
 										<span className="text-base">
-											Hook toggling is not yet supported on Windows in this foundation PR. Hooks can be created,
-											edited, and deleted, and execute whenever the hook file exists. Coming next: JSON-backed
-											hook enabled/disabled state across platforms.
+											Hook toggling is not yet supported on Windows in this foundation PR. Hooks can be
+											created, edited, and deleted, and execute whenever the hook file exists. Coming next:
+											JSON-backed hook enabled/disabled state across platforms.
 										</span>
 									</div>
 								)}
@@ -713,6 +722,7 @@ const ClineRulesToggleModal: React.FC = () => {
 											.map((hook) => (
 												<HookRow
 													absolutePath={hook.absolutePath}
+													displayName={getHookDisplayName(hook.name, hook.absolutePath, isWindows)}
 													enabled={hook.enabled}
 													hookName={hook.name}
 													isGlobal={true}
@@ -750,6 +760,7 @@ const ClineRulesToggleModal: React.FC = () => {
 												.map((hook) => (
 													<HookRow
 														absolutePath={hook.absolutePath}
+														displayName={getHookDisplayName(hook.name, hook.absolutePath, isWindows)}
 														enabled={hook.enabled}
 														hookName={hook.name}
 														isGlobal={false}

webview-ui/src/components/cline-rules/HookRow.tsx

@@ -7,6 +7,7 @@ import { FileServiceClient } from "@/services/grpc-client"
 
 interface HookRowProps {
 	hookName: string
+	displayName?: string
 	enabled: boolean
 	absolutePath: string
 	isGlobal: boolean
@@ -18,6 +19,7 @@ interface HookRowProps {
 
 const HookRow: React.FC<HookRowProps> = ({
 	hookName,
+	displayName,
 	enabled,
 	absolutePath,
 	isGlobal,
@@ -52,7 +54,7 @@ const HookRow: React.FC<HookRowProps> = ({
 		<div className="mb-2.5">
 			<div className="flex items-center px-2 py-4 rounded bg-text-block-background max-h-4">
 				<span className="flex-1 overflow-hidden break-all whitespace-normal flex items-center mr-1">
-					<span className="ph-no-capture">{hookName}</span>
+					<span className="ph-no-capture">{displayName ?? hookName}</span>
 				</span>
 
 				{/* Toggle Switch */}

webview-ui/src/components/cline-rules/NewRuleRow.tsx

@@ -5,6 +5,7 @@ import { useClickAway } from "react-use"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { FileServiceClient } from "@/services/grpc-client"
+import { isMacOSOrLinux } from "@/utils/platformUtils"
 
 interface NewRuleRowProps {
 	isGlobal: boolean
@@ -29,11 +30,22 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal, ruleType, existingHoo
 	const [filename, setFilename] = useState("")
 	const inputRef = useRef<HTMLInputElement>(null)
 	const [error, setError] = useState<string | null>(null)
+	const isWindows = !isMacOSOrLinux()
 
 	const componentRef = useRef<HTMLDivElement>(null)
 
+	const normalizeHookTypeName = (name: string): string => {
+		return isWindows && name.endsWith(".ps1") ? name.slice(0, -4) : name
+	}
+
+	const formatHookTypeForDisplay = (name: string): string => {
+		return isWindows ? `${name}.ps1` : name
+	}
+
+	const existingHookTypes = useMemo(() => new Set(existingHooks.map((name) => normalizeHookTypeName(name))), [existingHooks])
+
 	// Calculate available hook types by filtering out existing hooks
-	const availableHookTypes = useMemo(() => HOOK_TYPES.filter((type) => !existingHooks.includes(type.name)), [existingHooks])
+	const availableHookTypes = useMemo(() => HOOK_TYPES.filter((type) => !existingHookTypes.has(type.name)), [existingHookTypes])
 
 	// Focus the input when expanded
 	useEffect(() => {
@@ -197,7 +209,7 @@ const NewRuleRow: React.FC<NewRuleRowProps> = ({ isGlobal, ruleType, existingHoo
 								</option>
 								{availableHookTypes.map((hook) => (
 									<option key={hook.name} title={hook.description} value={hook.name}>
-										{hook.name}
+										{formatHookTypeForDisplay(hook.name)}
 									</option>
 								))}
 							</select>