feat: improve HookItem UI with copy duplication and file navigation

- Remove link icon from hook item header
- Style source tag (project/global) as grey badge matching matchers
- Change copy button to duplicate hook with unique ID suffix
- Add open-in-editor functionality to navigate directly to hook in YAML
- Change folder icon to file icon for the open button
- Add HookItem component tests

Changes:
- packages/types: Add hooks/openFile message type
- webviewMessageHandler: Handle hooks/openFile message
- HooksService: Add openHookInEditor method
- HooksSettings: Update copy and open handlers
- HookItem: UI improvements and icon changes

Author: taltas

packages/types/src/vscode-extension-host.ts

@@ -618,6 +618,7 @@ export interface WebviewMessage {
 		| "hooks/reorder"
 		| "hooks/move"
 		| "hooks/openFolder"
+		| "hooks/openFile"
 		| "hooks/reload"
 	text?: string
 	editedMessageContent?: string

src/core/webview/webviewMessageHandler.ts

@@ -3480,6 +3480,24 @@ export const webviewMessageHandler = async (
 			break
 		}
 
+		case "hooks/openFile": {
+			try {
+				const hooksService = provider.getHooksService()
+				if (!hooksService) {
+					throw new Error("HooksService not available")
+				}
+				if (!message.hookId) {
+					throw new Error("Missing required field: hookId")
+				}
+				await hooksService.openHookInEditor(message.hookId)
+			} catch (error) {
+				const errorMessage = error instanceof Error ? error.message : String(error)
+				provider.log(`Error opening hook file: ${errorMessage}`)
+				await provider.postMessageToWebview({ type: "hooks/error", error: errorMessage })
+			}
+			break
+		}
+
 		case "hooks/reload": {
 			try {
 				const hooksService = provider.getHooksService()

src/services/hooks/HooksService.ts

@@ -335,6 +335,44 @@ export class HooksService {
 		await vscode.commands.executeCommand("revealFileInOS", uri)
 	}
 
+	/**
+	 * Open the hooks file in the editor and scroll to a specific hook
+	 *
+	 * @param hookId - The ID of the hook to scroll to
+	 */
+	public async openHookInEditor(hookId: string): Promise<void> {
+		// Find the hook to determine its source file
+		const hooks = await this.loadHooks()
+		const hook = hooks.find((h) => h.id === hookId)
+
+		if (!hook) {
+			throw new Error(`Hook not found: ${hookId}`)
+		}
+
+		// Get the file path based on hook source
+		const filePath = this.getHooksFilePath(hook.source)
+		if (!filePath) {
+			throw new Error(`Cannot find hooks file for source: ${hook.source}`)
+		}
+
+		// Open the document
+		const uri = vscode.Uri.file(filePath)
+		const doc = await vscode.workspace.openTextDocument(uri)
+		const editor = await vscode.window.showTextDocument(doc)
+
+		// Search for the hook ID in the file and scroll to it
+		const text = doc.getText()
+		const hookIdPattern = `id: ${hookId}`
+		const position = text.indexOf(hookIdPattern)
+
+		if (position !== -1) {
+			const line = doc.positionAt(position).line
+			const range = new vscode.Range(line, 0, line, 0)
+			editor.revealRange(range, vscode.TextEditorRevealType.InCenter)
+			editor.selection = new vscode.Selection(line, 0, line, 0)
+		}
+	}
+
 	/**
 	 * Start watching hooks files for external changes
 	 */

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

@@ -4,6 +4,7 @@ import { DndContext, DragOverlay, closestCenter } from "@dnd-kit/core"
 
 import { hookEventTypes, type HookEventType, type HookWithMetadata } from "@roo-code/types"
 
+import { vscode } from "@/utils/vscode"
 import { Button, Checkbox } from "@/components/ui"
 
 import { SectionHeader } from "./SectionHeader"
@@ -133,36 +134,37 @@ export const HooksSettings: React.FC = () => {
 		}
 	}, [hookToDelete, deleteHook])
 
-	// Handler for copying hook configuration
+	// Handler for duplicating a hook
 	const handleCopyHook = useCallback(
 		(hookId: string) => {
 			const hook = hooks.find((h) => h.id === hookId)
 			if (hook) {
-				// Copy the hook configuration as JSON to clipboard
-				const hookConfig = {
-					id: hook.id,
+				// Generate a 10-character random hash
+				const randomHash = Math.random().toString(36).substring(2, 12)
+				const newId = `${hook.id}-${randomHash}`
+
+				// Create duplicated hook (starts disabled for safety)
+				const duplicatedHook: HookWithMetadata = {
+					id: newId,
 					name: hook.name,
-					enabled: hook.enabled,
+					enabled: false, // Duplicated hooks start disabled
 					action: hook.action,
 					matchers: hook.matchers,
+					eventType: hook.eventType,
+					source: hook.source,
 				}
-				navigator.clipboard
-					.writeText(JSON.stringify(hookConfig, null, 2))
-					.then(() => {
-						console.log(`[HooksSettings] Copied hook ${hookId} to clipboard`)
-					})
-					.catch((err) => {
-						console.error(`[HooksSettings] Failed to copy hook: ${err}`)
-					})
+
+				// Add the duplicated hook under the same event type
+				createHook(hook.eventType, duplicatedHook, hook.source)
+				console.log(`[HooksSettings] Duplicated hook ${hookId} as ${newId}`)
 			}
 		},
-		[hooks],
+		[hooks, createHook],
 	)
 
-	// Handler for opening hook folder (placeholder for Phase 5)
+	// Handler for opening hook file and scrolling to the hook definition
 	const handleOpenHookFolder = useCallback((hookId: string) => {
-		// Placeholder - in real implementation, this would open the folder containing the hook
-		console.log(`[HooksSettings] Open folder for hook: ${hookId}`)
+		vscode.postMessage({ type: "hooks/openFile", hookId })
 	}, [])
 
 	return (

webview-ui/src/components/settings/HooksSettings/HookItem.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react"
-import { ChevronDown, ChevronRight, GripVertical, Link2, Copy, Trash2, FolderOpen } from "lucide-react"
+import { ChevronDown, ChevronRight, GripVertical, Copy, Trash2, FileText } from "lucide-react"
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 
 import type { HookWithMetadata } from "@roo-code/types"
 
 import { cn } from "@/lib/utils"
-import { Button, Checkbox } from "@/components/ui"
+import { Button, ToggleSwitch } from "@/components/ui"
 
 import { HookConfigTab } from "./HookConfigTab"
 import { HookCommandTab } from "./HookCommandTab"
@@ -97,20 +97,14 @@ export const HookItem: React.FC<HookItemProps> = ({
 					onClick={(e) => e.stopPropagation()}>
 					<GripVertical className="w-4 h-4" />
 				</div>
-
 				{/* Expand/collapse indicator */}
 				{isExpanded ? (
 					<ChevronDown className="w-4 h-4 text-vscode-foreground" />
 				) : (
 					<ChevronRight className="w-4 h-4 text-vscode-foreground" />
 				)}
-
-				{/* Link icon */}
-				<Link2 className="w-4 h-4 text-vscode-descriptionForeground" />
-
-				{/* Hook ID */}
-				<span className="font-mono text-sm text-vscode-foreground">{hook.id}</span>
-
+				{/* Hook name */}
+				<span className="font-mono text-sm text-vscode-foreground">{hook.name}</span>
 				{/* Matcher badges */}
 				{matcherBadges.length > 0 && (
 					<div className="flex gap-1">
@@ -119,46 +113,58 @@ export const HookItem: React.FC<HookItemProps> = ({
 						</span>
 					</div>
 				)}
-
 				{/* Source badge */}
-				<span className="text-xs text-vscode-descriptionForeground ml-auto">{hook.source}</span>
-
-				{/* Action buttons */}
+				<span className="text-xs bg-vscode-badge-background text-vscode-badge-foreground px-1.5 py-0.5 rounded ml-auto">
+					{hook.source}
+				</span>
 				<div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
 					<Button
 						variant="ghost"
 						size="icon"
 						className="w-6 h-6 opacity-60 hover:opacity-100"
-						onClick={onCopy}
-						title="Copy hook">
-						<Copy className="w-3.5 h-3.5" />
+						onClick={onDelete}
+						title="Delete hook">
+						<Trash2 className="w-3.5 h-3.5" />
 					</Button>
 					<Button
 						variant="ghost"
 						size="icon"
 						className="w-6 h-6 opacity-60 hover:opacity-100"
-						onClick={onDelete}
-						title="Delete hook">
-						<Trash2 className="w-3.5 h-3.5" />
+						onClick={onCopy}
+						title="Copy hook">
+						<Copy className="w-3.5 h-3.5" />
 					</Button>
 					<Button
 						variant="ghost"
 						size="icon"
 						className="w-6 h-6 opacity-60 hover:opacity-100"
 						onClick={onOpenFolder}
-						title="Open folder">
-						<FolderOpen className="w-3.5 h-3.5" />
+						title="Open in editor">
+						<FileText className="w-3.5 h-3.5" />
 					</Button>
 
+					{/* Status indicator */}
+					<div
+						style={{
+							width: "8px",
+							height: "8px",
+							borderRadius: "50%",
+							background: hook.enabled
+								? "var(--vscode-testing-iconPassed)"
+								: "var(--vscode-descriptionForeground)",
+							marginLeft: "4px",
+						}}
+						title={hook.enabled ? "Enabled" : "Disabled"}
+					/>
+
 					{/* Enable toggle */}
-					<div className="flex items-center ml-1">
-						<Checkbox
-							id={`hook-enabled-${hook.id}`}
-							checked={hook.enabled}
-							onCheckedChange={onToggleEnabled}
-							disabled={disabled}
-						/>
-					</div>
+					<ToggleSwitch
+						checked={hook.enabled}
+						onChange={onToggleEnabled}
+						disabled={disabled}
+						size="medium"
+						aria-label={`Toggle ${hook.id} hook`}
+					/>
 				</div>
 			</div>