diff --git a/ccw/frontend/src/components/cli-endpoints/CliEndpointFormDialog.tsx b/ccw/frontend/src/components/cli-endpoints/CliEndpointFormDialog.tsx
new file mode 100644
index 00000000..7ecc9ec1
--- /dev/null
+++ b/ccw/frontend/src/components/cli-endpoints/CliEndpointFormDialog.tsx
@@ -0,0 +1,270 @@
+// ========================================
+// CLI Endpoint Form Dialog
+// ========================================
+// Dialog for creating and editing CLI endpoints
+
+import { useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/Dialog';
+import { Input } from '@/components/ui/Input';
+import { Textarea } from '@/components/ui/Textarea';
+import { Button } from '@/components/ui/Button';
+import { Label } from '@/components/ui/Label';
+import { Switch } from '@/components/ui/Switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/Select';
+import type { CliEndpoint } from '@/lib/api';
+
+export type CliEndpointFormMode = 'create' | 'edit';
+
+export interface CliEndpointSavePayload {
+  name: string;
+  type: CliEndpoint['type'];
+  enabled: boolean;
+  config: Record<string, unknown>;
+}
+
+export interface CliEndpointFormDialogProps {
+  mode: CliEndpointFormMode;
+  endpoint?: CliEndpoint;
+  open: boolean;
+  onClose: () => void;
+  onSave: (payload: CliEndpointSavePayload) => Promise<void>;
+}
+
+interface FormErrors {
+  name?: string;
+  type?: string;
+  configJson?: string;
+}
+
+function safeStringifyConfig(config: unknown): string {
+  try {
+    return JSON.stringify(config ?? {}, null, 2);
+  } catch {
+    return '{}';
+  }
+}
+
+function parseConfigJson(
+  configJson: string
+): { ok: true; value: Record<string, unknown> } | { ok: false; errorKey: string } {
+  const trimmed = configJson.trim();
+  if (!trimmed) {
+    return { ok: true, value: {} };
+  }
+
+  try {
+    const parsed = JSON.parse(trimmed) as unknown;
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return { ok: false, errorKey: 'validation.configMustBeObject' };
+    }
+    return { ok: true, value: parsed as Record<string, unknown> };
+  } catch {
+    return { ok: false, errorKey: 'validation.invalidJson' };
+  }
+}
+
+export function CliEndpointFormDialog({
+  mode,
+  endpoint,
+  open,
+  onClose,
+  onSave,
+}: CliEndpointFormDialogProps) {
+  const { formatMessage } = useIntl();
+  const isEditing = mode === 'edit';
+
+  const [name, setName] = useState('');
+  const [type, setType] = useState<CliEndpoint['type']>('custom');
+  const [enabled, setEnabled] = useState(true);
+  const [configJson, setConfigJson] = useState('{}');
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const dialogTitle = useMemo(() => {
+    return isEditing
+      ? formatMessage({ id: 'cliEndpoints.dialog.editTitle' }, { id: endpoint?.id ?? '' })
+      : formatMessage({ id: 'cliEndpoints.dialog.createTitle' });
+  }, [formatMessage, isEditing, endpoint?.id]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (isEditing && endpoint) {
+      setName(endpoint.name);
+      setType(endpoint.type);
+      setEnabled(endpoint.enabled);
+      setConfigJson(safeStringifyConfig(endpoint.config));
+    } else {
+      setName('');
+      setType('custom');
+      setEnabled(true);
+      setConfigJson('{}');
+    }
+    setErrors({});
+    setIsSubmitting(false);
+  }, [open, isEditing, endpoint]);
+
+  const handleSubmit = async () => {
+    const nextErrors: FormErrors = {};
+
+    if (!name.trim()) {
+      nextErrors.name = 'validation.nameRequired';
+    }
+    if (!type) {
+      nextErrors.type = 'validation.typeRequired';
+    }
+
+    const parsedConfig = parseConfigJson(configJson);
+    if (!parsedConfig.ok) {
+      nextErrors.configJson = parsedConfig.errorKey;
+    }
+
+    if (Object.keys(nextErrors).length > 0) {
+      setErrors(nextErrors);
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await onSave({
+        name: name.trim(),
+        type,
+        enabled,
+        config: (parsedConfig as { ok: true; value: Record<string, unknown> }).value,
+      });
+      onClose();
+    } catch (err) {
+      console.error('Failed to save CLI endpoint:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[720px]">
+        <DialogHeader>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {isEditing && endpoint && (
+            <div className="space-y-2">
+              <Label htmlFor="cli-endpoint-id">{formatMessage({ id: 'cliEndpoints.id' })}</Label>
+              <Input
+                id="cli-endpoint-id"
+                value={endpoint.id}
+                disabled
+                className="font-mono"
+              />
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="cli-endpoint-name">
+                {formatMessage({ id: 'cliEndpoints.form.name' })} *
+              </Label>
+              <Input
+                id="cli-endpoint-name"
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                  if (errors.name) setErrors((prev) => ({ ...prev, name: undefined }));
+                }}
+                placeholder={formatMessage({ id: 'cliEndpoints.form.namePlaceholder' })}
+                error={!!errors.name}
+              />
+              {errors.name && (
+                <p className="text-xs text-destructive">
+                  {formatMessage({ id: `cliEndpoints.${errors.name}` })}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="cli-endpoint-type">
+                {formatMessage({ id: 'cliEndpoints.form.type' })} *
+              </Label>
+              <Select
+                value={type}
+                onValueChange={(v) => {
+                  setType(v as CliEndpoint['type']);
+                  if (errors.type) setErrors((prev) => ({ ...prev, type: undefined }));
+                }}
+              >
+                <SelectTrigger id="cli-endpoint-type" className={errors.type ? 'border-destructive' : undefined}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="litellm">{formatMessage({ id: 'cliEndpoints.type.litellm' })}</SelectItem>
+                  <SelectItem value="custom">{formatMessage({ id: 'cliEndpoints.type.custom' })}</SelectItem>
+                  <SelectItem value="wrapper">{formatMessage({ id: 'cliEndpoints.type.wrapper' })}</SelectItem>
+                </SelectContent>
+              </Select>
+              {errors.type && (
+                <p className="text-xs text-destructive">
+                  {formatMessage({ id: `cliEndpoints.${errors.type}` })}
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between rounded-md border border-border p-3">
+            <div>
+              <p className="text-sm font-medium text-foreground">{formatMessage({ id: 'cliEndpoints.form.enabled' })}</p>
+              <p className="text-xs text-muted-foreground">{formatMessage({ id: 'cliEndpoints.form.enabledHint' })}</p>
+            </div>
+            <Switch checked={enabled} onCheckedChange={setEnabled} />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="cli-endpoint-config">{formatMessage({ id: 'cliEndpoints.form.configJson' })}</Label>
+            <Textarea
+              id="cli-endpoint-config"
+              value={configJson}
+              onChange={(e) => {
+                setConfigJson(e.target.value);
+                if (errors.configJson) setErrors((prev) => ({ ...prev, configJson: undefined }));
+              }}
+              placeholder={formatMessage({ id: 'cliEndpoints.form.configJsonPlaceholder' })}
+              className={errors.configJson ? 'font-mono border-destructive' : 'font-mono'}
+              rows={10}
+            />
+            {errors.configJson && (
+              <p className="text-xs text-destructive">
+                {formatMessage({ id: `cliEndpoints.${errors.configJson}` })}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose} disabled={isSubmitting}>
+            {formatMessage({ id: 'common.actions.cancel' })}
+          </Button>
+          <Button onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting
+              ? formatMessage({ id: 'common.actions.saving' })
+              : formatMessage({ id: 'common.actions.save' })}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default CliEndpointFormDialog;
diff --git a/ccw/frontend/src/components/hook/HookWizard.tsx b/ccw/frontend/src/components/hook/HookWizard.tsx
index ddcf5e33..d5f6b5b5 100644
--- a/ccw/frontend/src/components/hook/HookWizard.tsx
+++ b/ccw/frontend/src/components/hook/HookWizard.tsx
@@ -14,7 +14,6 @@ import {
 } from '@/components/ui/Dialog';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { Textarea } from '@/components/ui/Textarea';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import {
@@ -27,7 +26,6 @@ import {
 import {
   ChevronLeft,
   ChevronRight,
-  X,
   Brain,
   Shield,
   Sparkles,
@@ -36,13 +34,12 @@ import {
   Plus,
   Trash2,
 } from 'lucide-react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { fetchSkills, type Skill, type SkillsResponse, createHook } from '@/lib/api';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { fetchSkills, type Skill, type SkillsResponse, saveHook } from '@/lib/api';
 import { cn } from '@/lib/utils';
 import {
   detect,
   getShell,
-  getShellCommand,
   getShellName,
   checkCompatibility,
   getPlatformName,
@@ -52,59 +49,182 @@ import {
 
 // ========== Types ==========
 
-/**
- * Supported wizard types
- */
 export type WizardType = 'memory-update' | 'danger-protection' | 'skill-context';
 
-/**
- * Wizard step number
- */
 type WizardStep = 1 | 2 | 3;
 
-/**
- * Component props
- */
 export interface HookWizardProps {
-  /** Type of wizard to launch */
   wizardType: WizardType;
-  /** Whether the dialog is open */
   open: boolean;
-  /** Callback when dialog is closed */
   onClose: () => void;
 }
 
-/**
- * Memory update wizard configuration
- */
 interface MemoryUpdateConfig {
-  claudePath: string;
-  updateFrequency: 'session-end' | 'hourly' | 'daily';
-  sections: string[];
+  tool: 'gemini' | 'qwen' | 'codex' | 'opencode';
+  threshold: number;
+  timeout: number;
 }
 
-/**
- * Danger protection wizard configuration
- */
 interface DangerProtectionConfig {
-  keywords: string;
-  confirmationMessage: string;
-  allowBypass: boolean;
+  selectedOptions: string[];
 }
 
-/**
- * Skill context wizard configuration
- */
 interface SkillContextConfig {
-  keywordSkillPairs: Array<{ keyword: string; skill: string }>;
-  priority: 'high' | 'medium' | 'low';
+  mode: 'keyword' | 'auto';
+  skillConfigs: Array<{ skill: string; keywords: string }>;
+}
+
+// ========== Hook Templates (from old hook-manager.js) ==========
+
+interface HookTemplate {
+  event: string;
+  matcher: string;
+  command: string;
+  args: string[];
+  timeout?: number;
+}
+
+const HOOK_TEMPLATES: Record<string, HookTemplate> = {
+  'memory-update-queue': {
+    event: 'Stop',
+    matcher: '',
+    command: 'node',
+    args: ['-e', "require('child_process').spawnSync(process.platform==='win32'?'cmd':'ccw',process.platform==='win32'?['/c','ccw','tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'gemini'})]:['tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'gemini'})],{stdio:'inherit'})"],
+  },
+  'skill-context-keyword': {
+    event: 'UserPromptSubmit',
+    matcher: '',
+    command: 'node',
+    args: ['-e', "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify({prompt:p.user_prompt||''})],{stdio:'inherit'})"],
+  },
+  'skill-context-auto': {
+    event: 'UserPromptSubmit',
+    matcher: '',
+    command: 'node',
+    args: ['-e', "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify({mode:'auto',prompt:p.user_prompt||''})],{stdio:'inherit'})"],
+  },
+  'danger-bash-confirm': {
+    event: 'PreToolUse',
+    matcher: 'Bash',
+    command: 'bash',
+    args: ['-c', 'INPUT=$(cat); CMD=$(echo "$INPUT" | jq -r ".tool_input.command // empty"); DANGEROUS_PATTERNS="rm -rf|rmdir|del /|format |shutdown|reboot|kill -9|pkill|mkfs|dd if=|chmod 777|chown -R|>/dev/|wget.*\\|.*sh|curl.*\\|.*bash"; if echo "$CMD" | grep -qiE "$DANGEROUS_PATTERNS"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"ask\\",\\"permissionDecisionReason\\":\\"Potentially dangerous command detected: requires user confirmation\\"}}" && exit 0; fi; exit 0'],
+    timeout: 5000,
+  },
+  'danger-file-protection': {
+    event: 'PreToolUse',
+    matcher: 'Write|Edit',
+    command: 'bash',
+    args: ['-c', 'INPUT=$(cat); FILE=$(echo "$INPUT" | jq -r ".tool_input.file_path // .tool_input.path // empty"); PROTECTED=".env|.git/|package-lock.json|yarn.lock|.credentials|secrets|id_rsa|.pem$|.key$"; if echo "$FILE" | grep -qiE "$PROTECTED"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"deny\\",\\"permissionDecisionReason\\":\\"Protected file cannot be modified: $FILE\\"}}" && exit 0; fi; exit 0'],
+    timeout: 5000,
+  },
+  'danger-git-destructive': {
+    event: 'PreToolUse',
+    matcher: 'Bash',
+    command: 'bash',
+    args: ['-c', 'INPUT=$(cat); CMD=$(echo "$INPUT" | jq -r ".tool_input.command // empty"); GIT_DANGEROUS="git push.*--force|git push.*-f|git reset --hard|git clean -fd|git checkout.*--force|git branch -D|git rebase.*-f"; if echo "$CMD" | grep -qiE "$GIT_DANGEROUS"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"ask\\",\\"permissionDecisionReason\\":\\"Destructive git operation detected: $CMD\\"}}" && exit 0; fi; exit 0'],
+    timeout: 5000,
+  },
+  'danger-network-confirm': {
+    event: 'PreToolUse',
+    matcher: 'Bash|WebFetch',
+    command: 'bash',
+    args: ['-c', 'INPUT=$(cat); TOOL=$(echo "$INPUT" | jq -r ".tool_name // empty"); if [ "$TOOL" = "WebFetch" ]; then URL=$(echo "$INPUT" | jq -r ".tool_input.url // empty"); echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"ask\\",\\"permissionDecisionReason\\":\\"Network request to: $URL\\"}}" && exit 0; fi; CMD=$(echo "$INPUT" | jq -r ".tool_input.command // empty"); NET_CMDS="curl|wget|nc |netcat|ssh |scp |rsync|ftp "; if echo "$CMD" | grep -qiE "^($NET_CMDS)"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"ask\\",\\"permissionDecisionReason\\":\\"Network command requires confirmation: $CMD\\"}}" && exit 0; fi; exit 0'],
+    timeout: 5000,
+  },
+  'danger-system-paths': {
+    event: 'PreToolUse',
+    matcher: 'Write|Edit|Bash',
+    command: 'bash',
+    args: ['-c', 'INPUT=$(cat); TOOL=$(echo "$INPUT" | jq -r ".tool_name // empty"); if [ "$TOOL" = "Bash" ]; then CMD=$(echo "$INPUT" | jq -r ".tool_input.command // empty"); SYS_PATHS="/etc/|/usr/|/bin/|/sbin/|/boot/|/sys/|/proc/|C:\\\\Windows|C:\\\\Program Files"; if echo "$CMD" | grep -qiE "$SYS_PATHS"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"ask\\",\\"permissionDecisionReason\\":\\"System path operation requires confirmation\\"}}" && exit 0; fi; else FILE=$(echo "$INPUT" | jq -r ".tool_input.file_path // .tool_input.path // empty"); SYS_PATHS="/etc/|/usr/|/bin/|/sbin/|C:\\\\Windows|C:\\\\Program Files"; if echo "$FILE" | grep -qiE "$SYS_PATHS"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"deny\\",\\"permissionDecisionReason\\":\\"Cannot modify system file: $FILE\\"}}" && exit 0; fi; fi; exit 0'],
+    timeout: 5000,
+  },
+  'danger-permission-change': {
+    event: 'PreToolUse',
+    matcher: 'Bash',
+    command: 'bash',
+    args: ['-c', 'INPUT=$(cat); CMD=$(echo "$INPUT" | jq -r ".tool_input.command // empty"); PERM_CMDS="chmod|chown|chgrp|setfacl|icacls|takeown|cacls"; if echo "$CMD" | grep -qiE "^($PERM_CMDS)"; then echo "{\\"hookSpecificOutput\\":{\\"hookEventName\\":\\"PreToolUse\\",\\"permissionDecision\\":\\"ask\\",\\"permissionDecisionReason\\":\\"Permission change requires confirmation: $CMD\\"}}" && exit 0; fi; exit 0'],
+    timeout: 5000,
+  },
+};
+
+// Danger protection option definitions
+const DANGER_OPTIONS = [
+  { id: 'bash-confirm', templateId: 'danger-bash-confirm', labelKey: 'cliHooks.wizards.dangerProtection.options.bashConfirm', descKey: 'cliHooks.wizards.dangerProtection.options.bashConfirmDesc' },
+  { id: 'file-protection', templateId: 'danger-file-protection', labelKey: 'cliHooks.wizards.dangerProtection.options.fileProtection', descKey: 'cliHooks.wizards.dangerProtection.options.fileProtectionDesc' },
+  { id: 'git-destructive', templateId: 'danger-git-destructive', labelKey: 'cliHooks.wizards.dangerProtection.options.gitDestructive', descKey: 'cliHooks.wizards.dangerProtection.options.gitDestructiveDesc' },
+  { id: 'network-confirm', templateId: 'danger-network-confirm', labelKey: 'cliHooks.wizards.dangerProtection.options.networkConfirm', descKey: 'cliHooks.wizards.dangerProtection.options.networkConfirmDesc' },
+  { id: 'system-paths', templateId: 'danger-system-paths', labelKey: 'cliHooks.wizards.dangerProtection.options.systemPaths', descKey: 'cliHooks.wizards.dangerProtection.options.systemPathsDesc' },
+  { id: 'permission-change', templateId: 'danger-permission-change', labelKey: 'cliHooks.wizards.dangerProtection.options.permissionChange', descKey: 'cliHooks.wizards.dangerProtection.options.permissionChangeDesc' },
+] as const;
+
+// ========== convertToClaudeCodeFormat (ported from old hook-manager.js) ==========
+
+function convertToClaudeCodeFormat(hookData: {
+  command: string;
+  args: string[];
+  matcher?: string;
+  timeout?: number;
+}): Record<string, unknown> {
+  let commandStr = hookData.command || '';
+
+  if (hookData.args && Array.isArray(hookData.args)) {
+    if (commandStr === 'bash' && hookData.args.length >= 2 && hookData.args[0] === '-c') {
+      const script = hookData.args[1];
+      const escapedScript = script.replace(/'/g, "'\\''");
+      commandStr = `bash -c '${escapedScript}'`;
+      if (hookData.args.length > 2) {
+        const additionalArgs = hookData.args.slice(2).map(arg =>
+          arg.includes(' ') && !arg.startsWith('"') && !arg.startsWith("'")
+            ? `"${arg.replace(/"/g, '\\"')}"`
+            : arg
+        );
+        commandStr += ' ' + additionalArgs.join(' ');
+      }
+    } else if (commandStr === 'node' && hookData.args.length >= 2 && hookData.args[0] === '-e') {
+      const script = hookData.args[1];
+      const isWindows = typeof navigator !== 'undefined' && navigator.userAgent.includes('Win');
+      if (isWindows) {
+        const escapedScript = script.replace(/"/g, '\\"');
+        commandStr = `node -e "${escapedScript}"`;
+      } else {
+        const escapedScript = script.replace(/'/g, "'\\''");
+        commandStr = `node -e '${escapedScript}'`;
+      }
+      if (hookData.args.length > 2) {
+        const additionalArgs = hookData.args.slice(2).map(arg =>
+          arg.includes(' ') && !arg.startsWith('"') && !arg.startsWith("'")
+            ? `"${arg.replace(/"/g, '\\"')}"`
+            : arg
+        );
+        commandStr += ' ' + additionalArgs.join(' ');
+      }
+    } else {
+      const quotedArgs = hookData.args.map(arg =>
+        arg.includes(' ') && !arg.startsWith('"') && !arg.startsWith("'")
+          ? `"${arg.replace(/"/g, '\\"')}"`
+          : arg
+      );
+      commandStr = `${commandStr} ${quotedArgs.join(' ')}`.trim();
+    }
+  }
+
+  const converted: Record<string, unknown> = {
+    hooks: [{
+      type: 'command',
+      command: commandStr,
+      ...(hookData.timeout ? { timeout: Math.ceil(hookData.timeout / 1000) } : {}),
+    }],
+  };
+
+  if (hookData.matcher) {
+    converted.matcher = hookData.matcher;
+  }
+
+  return converted;
 }
 
 // ========== Wizard Definitions ==========
 
-/**
- * Wizard metadata for each type
- */
 const WIZARD_METADATA = {
   'memory-update': {
     title: 'cliHooks.wizards.memoryUpdate.title',
@@ -117,7 +237,7 @@ const WIZARD_METADATA = {
     title: 'cliHooks.wizards.dangerProtection.title',
     description: 'cliHooks.wizards.dangerProtection.description',
     icon: Shield,
-    trigger: 'UserPromptSubmit' as const,
+    trigger: 'PreToolUse' as const,
     platformRequirements: DEFAULT_PLATFORM_REQUIREMENTS['danger-protection'],
   },
   'skill-context': {
@@ -129,15 +249,6 @@ const WIZARD_METADATA = {
   },
 } as const;
 
-// ========== Helper Functions ==========
-
-/**
- * Get wizard icon component
- */
-function getWizardIcon(type: WizardType) {
-  return WIZARD_METADATA[type].icon;
-}
-
 // ========== Main Component ==========
 
 export function HookWizard({
@@ -149,6 +260,8 @@ export function HookWizard({
   const queryClient = useQueryClient();
   const [currentStep, setCurrentStep] = useState<WizardStep>(1);
   const [detectedPlatform, setDetectedPlatform] = useState<Platform>('linux');
+  const [scope, setScope] = useState<'project' | 'global'>('project');
+  const [saving, setSaving] = useState(false);
 
   // Fetch available skills for skill-context wizard
   const { data: skillsData, isLoading: skillsLoading } = useQuery<SkillsResponse>({
@@ -157,16 +270,6 @@ export function HookWizard({
     enabled: open && wizardType === 'skill-context',
   });
 
-  // Mutation for creating hook
-  const createMutation = useMutation({
-    mutationFn: createHook,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['hooks'] });
-      onClose();
-      setCurrentStep(1);
-    },
-  });
-
   // Detect platform on mount
   useEffect(() => {
     if (open) {
@@ -176,20 +279,18 @@ export function HookWizard({
 
   // Wizard configuration state
   const [memoryConfig, setMemoryConfig] = useState<MemoryUpdateConfig>({
-    claudePath: '.claude/CLAUDE.md',
-    updateFrequency: 'session-end',
-    sections: ['all'],
+    tool: 'gemini',
+    threshold: 5,
+    timeout: 300,
   });
 
   const [dangerConfig, setDangerConfig] = useState<DangerProtectionConfig>({
-    keywords: 'delete\nrm\nformat\ndrop\ntruncate\nshutdown',
-    confirmationMessage: 'Are you sure you want to perform this action: {action}?',
-    allowBypass: true,
+    selectedOptions: ['bash-confirm', 'file-protection', 'git-destructive'],
   });
 
   const [skillConfig, setSkillConfig] = useState<SkillContextConfig>({
-    keywordSkillPairs: [{ keyword: '', skill: '' }],
-    priority: 'medium',
+    mode: 'keyword',
+    skillConfigs: [{ skill: '', keywords: '' }],
   });
 
   // Check platform compatibility
@@ -218,60 +319,83 @@ export function HookWizard({
   };
 
   const handleComplete = async () => {
-    let hookConfig: {
-      name: string;
-      description: string;
-      trigger: string;
-      matcher?: string;
-      command: string;
-    };
+    setSaving(true);
+    try {
+      switch (wizardType) {
+        case 'memory-update': {
+          const selectedTool = memoryConfig.tool;
+          const template = HOOK_TEMPLATES['memory-update-queue'];
+          const hookData = {
+            command: template.command,
+            args: ['-e', `require('child_process').spawnSync(process.platform==='win32'?'cmd':'ccw',process.platform==='win32'?['/c','ccw','tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})]:['tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})],{stdio:'inherit'})`],
+          };
+          const converted = convertToClaudeCodeFormat(hookData);
+          await saveHook(scope, template.event, converted);
+          break;
+        }
 
-    const wizardName = formatMessage({ id: WIZARD_METADATA[wizardType].title });
+        case 'danger-protection': {
+          for (const optionId of dangerConfig.selectedOptions) {
+            const option = DANGER_OPTIONS.find(o => o.id === optionId);
+            if (!option) continue;
+            const template = HOOK_TEMPLATES[option.templateId];
+            if (!template) continue;
+            const hookData = {
+              command: template.command,
+              args: [...template.args],
+              matcher: template.matcher,
+              timeout: template.timeout,
+            };
+            const converted = convertToClaudeCodeFormat(hookData);
+            await saveHook(scope, template.event, converted);
+          }
+          break;
+        }
 
-    switch (wizardType) {
-      case 'memory-update':
-        hookConfig = {
-          name: `memory-update-${Date.now()}`,
-          description: `${wizardName}: Update ${memoryConfig.claudePath} on ${memoryConfig.updateFrequency}`,
-          trigger: wizardMetadata.trigger,
-          command: buildMemoryUpdateCommand(memoryConfig, detectedPlatform),
-        };
-        break;
+        case 'skill-context': {
+          if (skillConfig.mode === 'auto') {
+            const template = HOOK_TEMPLATES['skill-context-auto'];
+            const hookData = {
+              command: template.command,
+              args: [...template.args],
+            };
+            const converted = convertToClaudeCodeFormat(hookData);
+            await saveHook(scope, template.event, converted);
+          } else {
+            const validConfigs = skillConfig.skillConfigs.filter(c => c.skill && c.keywords);
+            if (validConfigs.length === 0) break;
+            const configJson = validConfigs.map(c => ({
+              skill: c.skill,
+              keywords: c.keywords.split(',').map(k => k.trim()).filter(k => k),
+            }));
+            const paramsStr = JSON.stringify({ configs: configJson });
+            const hookData = {
+              command: 'node',
+              args: ['-e', `const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify(Object.assign(${paramsStr},{prompt:p.user_prompt||''}))],{stdio:'inherit'})`],
+            };
+            const converted = convertToClaudeCodeFormat(hookData);
+            await saveHook(scope, 'UserPromptSubmit', converted);
+          }
+          break;
+        }
+      }
 
-      case 'danger-protection':
-        hookConfig = {
-          name: `danger-protection-${Date.now()}`,
-          description: `${wizardName}: Confirm dangerous operations`,
-          trigger: wizardMetadata.trigger,
-          matcher: buildDangerMatcher(dangerConfig),
-          command: buildDangerProtectionCommand(dangerConfig, detectedPlatform),
-        };
-        break;
-
-      case 'skill-context':
-        hookConfig = {
-          name: `skill-context-${Date.now()}`,
-          description: `${wizardName}: Load SKILL based on keywords`,
-          trigger: wizardMetadata.trigger,
-          matcher: buildSkillMatcher(skillConfig),
-          command: buildSkillContextCommand(skillConfig, detectedPlatform),
-        };
-        break;
-
-      default:
-        return;
+      queryClient.invalidateQueries({ queryKey: ['hooks'] });
+      handleClose();
+    } catch (err) {
+      console.error('Failed to create hook:', err);
+    } finally {
+      setSaving(false);
     }
-
-    await createMutation.mutateAsync(hookConfig);
   };
 
-  // Step renderers
+  // ========== Step Renderers ==========
+
   const renderStep1 = () => {
-    const WizardIcon = getWizardIcon(wizardType);
+    const WizardIcon = WIZARD_METADATA[wizardType].icon;
 
     return (
       <div className="space-y-4">
-        {/* Introduction */}
         <div className="flex items-center gap-3 pb-4 border-b">
           <div className="p-3 rounded-lg bg-primary/10">
             <WizardIcon className="w-6 h-6 text-primary" />
@@ -286,7 +410,6 @@ export function HookWizard({
           </div>
         </div>
 
-        {/* Platform Detection */}
         <Card className="p-4">
           <div className="flex items-center gap-3">
             <CheckCircle className={cn(
@@ -309,7 +432,6 @@ export function HookWizard({
             </Badge>
           </div>
 
-          {/* Compatibility Issues */}
           {!compatibilityCheck.compatible && compatibilityCheck.issues.length > 0 && (
             <div className="mt-3 flex items-start gap-2 p-3 bg-destructive/10 rounded-lg">
               <AlertTriangle className="w-4 h-4 text-destructive shrink-0 mt-0.5" />
@@ -319,16 +441,13 @@ export function HookWizard({
                 </p>
                 <ul className="mt-1 space-y-1">
                   {compatibilityCheck.issues.map((issue, i) => (
-                    <li key={i} className="text-xs text-destructive/80">
-                      {issue}
-                    </li>
+                    <li key={i} className="text-xs text-destructive/80">{issue}</li>
                   ))}
                 </ul>
               </div>
             </div>
           )}
 
-          {/* Compatibility Warnings */}
           {compatibilityCheck.warnings.length > 0 && (
             <div className="mt-3 flex items-start gap-2 p-3 bg-yellow-500/10 rounded-lg">
               <AlertTriangle className="w-4 h-4 text-yellow-600 shrink-0 mt-0.5" />
@@ -338,9 +457,7 @@ export function HookWizard({
                 </p>
                 <ul className="mt-1 space-y-1">
                   {compatibilityCheck.warnings.map((warning, i) => (
-                    <li key={i} className="text-xs text-yellow-600/80">
-                      {warning}
-                    </li>
+                    <li key={i} className="text-xs text-yellow-600/80">{warning}</li>
                   ))}
                 </ul>
               </div>
@@ -348,7 +465,6 @@ export function HookWizard({
           )}
         </Card>
 
-        {/* Trigger Event */}
         <Card className="p-4">
           <p className="text-sm text-muted-foreground mb-2">
             {formatMessage({ id: 'cliHooks.wizards.steps.triggerEvent' })}
@@ -387,7 +503,6 @@ export function HookWizard({
           </p>
         </div>
 
-        {/* Summary */}
         <Card className="p-4 space-y-3">
           <div className="flex items-center justify-between">
             <span className="text-sm text-muted-foreground">
@@ -416,16 +531,52 @@ export function HookWizard({
             </span>
           </div>
 
-          {/* Configuration Summary */}
           {renderConfigSummary()}
         </Card>
 
+        {/* Scope Selection */}
+        <Card className="p-4">
+          <p className="text-sm font-medium text-foreground mb-3">
+            {formatMessage({ id: 'cliHooks.wizards.steps.review.installTo' })}
+          </p>
+          <div className="flex gap-4">
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="wizardScope"
+                value="project"
+                checked={scope === 'project'}
+                onChange={() => setScope('project')}
+                className="accent-primary"
+              />
+              <span className="text-sm text-foreground">
+                {formatMessage({ id: 'cliHooks.wizards.steps.review.scopeProject' })}
+              </span>
+              <span className="text-xs text-muted-foreground">(.claude/settings.json)</span>
+            </label>
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input
+                type="radio"
+                name="wizardScope"
+                value="global"
+                checked={scope === 'global'}
+                onChange={() => setScope('global')}
+                className="accent-primary"
+              />
+              <span className="text-sm text-foreground">
+                {formatMessage({ id: 'cliHooks.wizards.steps.review.scopeGlobal' })}
+              </span>
+              <span className="text-xs text-muted-foreground">(~/.claude/settings.json)</span>
+            </label>
+          </div>
+        </Card>
+
         {/* Command Preview */}
         <Card className="p-4">
           <p className="text-xs text-muted-foreground mb-2">
             {formatMessage({ id: 'cliHooks.wizards.steps.review.commandPreview' })}
           </p>
-          <pre className="text-xs font-mono bg-muted p-3 rounded-lg overflow-x-auto">
+          <pre className="text-xs font-mono bg-muted p-3 rounded-lg overflow-x-auto whitespace-pre-wrap break-all">
             {getPreviewCommand()}
           </pre>
         </Card>
@@ -433,209 +584,267 @@ export function HookWizard({
     );
   };
 
-  // Configuration renderers
+  // ========== Configuration Renderers ==========
+
   const renderMemoryUpdateConfig = () => (
     <div className="space-y-4">
       <div>
         <label className="text-sm font-medium text-foreground">
-          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.claudePath' })}
-        </label>
-        <Input
-          value={memoryConfig.claudePath}
-          onChange={(e) => setMemoryConfig({ ...memoryConfig, claudePath: e.target.value })}
-          placeholder=".claude/CLAUDE.md"
-          className="mt-1 font-mono"
-        />
-      </div>
-
-      <div>
-        <label className="text-sm font-medium text-foreground">
-          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.updateFrequency' })}
+          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.cliTool' })}
         </label>
         <Select
-          value={memoryConfig.updateFrequency}
-          onValueChange={(value: any) => setMemoryConfig({ ...memoryConfig, updateFrequency: value })}
+          value={memoryConfig.tool}
+          onValueChange={(value: MemoryUpdateConfig['tool']) => setMemoryConfig({ ...memoryConfig, tool: value })}
         >
           <SelectTrigger className="mt-1">
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="session-end">
-              {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.frequency.sessionEnd' })}
-            </SelectItem>
-            <SelectItem value="hourly">
-              {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.frequency.hourly' })}
-            </SelectItem>
-            <SelectItem value="daily">
-              {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.frequency.daily' })}
-            </SelectItem>
+            <SelectItem value="gemini">Gemini</SelectItem>
+            <SelectItem value="qwen">Qwen</SelectItem>
+            <SelectItem value="codex">Codex</SelectItem>
+            <SelectItem value="opencode">OpenCode</SelectItem>
           </SelectContent>
         </Select>
-      </div>
-    </div>
-  );
-
-  const renderDangerProtectionConfig = () => (
-    <div className="space-y-4">
-      <div>
-        <label className="text-sm font-medium text-foreground">
-          {formatMessage({ id: 'cliHooks.wizards.dangerProtection.keywords' })}
-        </label>
         <p className="text-xs text-muted-foreground mt-1">
-          {formatMessage({ id: 'cliHooks.wizards.dangerProtection.keywordsHelp' })}
+          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.cliToolHelp' })}
         </p>
-        <Textarea
-          value={dangerConfig.keywords}
-          onChange={(e) => setDangerConfig({ ...dangerConfig, keywords: e.target.value })}
-          placeholder="delete\nrm\nformat"
-          className="mt-1 font-mono text-sm"
-          rows={5}
-        />
       </div>
 
       <div>
         <label className="text-sm font-medium text-foreground">
-          {formatMessage({ id: 'cliHooks.wizards.dangerProtection.confirmationMessage' })}
+          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.threshold' })}
         </label>
         <Input
-          value={dangerConfig.confirmationMessage}
-          onChange={(e) => setDangerConfig({ ...dangerConfig, confirmationMessage: e.target.value })}
-          placeholder="Are you sure you want to {action}?"
+          type="number"
+          value={memoryConfig.threshold}
+          onChange={(e) => setMemoryConfig({ ...memoryConfig, threshold: Math.max(1, Math.min(20, parseInt(e.target.value) || 1)) })}
+          min={1}
+          max={20}
           className="mt-1"
         />
+        <p className="text-xs text-muted-foreground mt-1">
+          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.thresholdHelp' })}
+        </p>
       </div>
 
-      <div className="flex items-center gap-2">
-        <input
-          type="checkbox"
-          id="allow-bypass"
-          checked={dangerConfig.allowBypass}
-          onChange={(e) => setDangerConfig({ ...dangerConfig, allowBypass: e.target.checked })}
-          className="rounded"
-        />
-        <label htmlFor="allow-bypass" className="text-sm text-foreground">
-          {formatMessage({ id: 'cliHooks.wizards.dangerProtection.allowBypass' })}
+      <div>
+        <label className="text-sm font-medium text-foreground">
+          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.timeout' })}
         </label>
+        <Input
+          type="number"
+          value={memoryConfig.timeout}
+          onChange={(e) => setMemoryConfig({ ...memoryConfig, timeout: Math.max(60, Math.min(1800, parseInt(e.target.value) || 60)) })}
+          min={60}
+          max={1800}
+          step={60}
+          className="mt-1"
+        />
+        <p className="text-xs text-muted-foreground mt-1">
+          {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.timeoutHelp' })}
+        </p>
       </div>
     </div>
   );
 
-  const renderSkillContextConfig = () => {
-    const skills: Skill[] = skillsData?.skills ?? [];
-
-    const addPair = () => {
-      setSkillConfig({
-        ...skillConfig,
-        keywordSkillPairs: [...skillConfig.keywordSkillPairs, { keyword: '', skill: '' }],
+  const renderDangerProtectionConfig = () => {
+    const toggleOption = (optionId: string) => {
+      setDangerConfig(prev => {
+        const selected = prev.selectedOptions.includes(optionId)
+          ? prev.selectedOptions.filter(id => id !== optionId)
+          : [...prev.selectedOptions, optionId];
+        return { selectedOptions: selected };
       });
     };
 
-    const removePair = (index: number) => {
-      setSkillConfig({
-        ...skillConfig,
-        keywordSkillPairs: skillConfig.keywordSkillPairs.filter((_, i) => i !== index),
-      });
-    };
-
-    const updatePair = (index: number, field: 'keyword' | 'skill', value: string) => {
-      const newPairs = [...skillConfig.keywordSkillPairs];
-      newPairs[index][field] = value;
-      setSkillConfig({ ...skillConfig, keywordSkillPairs: newPairs });
-    };
-
     return (
-      <div className="space-y-4">
-        {skillsLoading ? (
-          <p className="text-sm text-muted-foreground">
-            {formatMessage({ id: 'cliHooks.wizards.skillContext.loadingSkills' })}
-          </p>
-        ) : (
-          <div className="space-y-3">
-            {skillConfig.keywordSkillPairs.map((pair, index) => (
-              <div key={index} className="flex items-center gap-2">
-                <Input
-                  value={pair.keyword}
-                  onChange={(e) => updatePair(index, 'keyword', e.target.value)}
-                  placeholder={formatMessage({ id: 'cliHooks.wizards.skillContext.keywordPlaceholder' })}
-                  className="flex-1"
-                />
-                <Select value={pair.skill} onValueChange={(value) => updatePair(index, 'skill', value)}>
-                  <SelectTrigger className="flex-1">
-                    <SelectValue placeholder={formatMessage({ id: 'cliHooks.wizards.skillContext.selectSkill' })} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {skills.map((skill) => (
-                      <SelectItem key={skill.name} value={skill.name}>
-                        {skill.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                {skillConfig.keywordSkillPairs.length > 1 && (
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => removePair(index)}
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                )}
-              </div>
-            ))}
-            <Button variant="outline" size="sm" onClick={addPair} className="w-full">
-              <Plus className="w-4 h-4 mr-1" />
-              {formatMessage({ id: 'cliHooks.wizards.skillContext.addPair' })}
-            </Button>
-          </div>
-        )}
-
-        <div>
-          <label className="text-sm font-medium text-foreground">
-            {formatMessage({ id: 'cliHooks.wizards.skillContext.priority' })}
-          </label>
-          <Select
-            value={skillConfig.priority}
-            onValueChange={(value: any) => setSkillConfig({ ...skillConfig, priority: value })}
+      <div className="space-y-3">
+        <p className="text-sm text-muted-foreground">
+          {formatMessage({ id: 'cliHooks.wizards.dangerProtection.selectProtections' })}
+        </p>
+        {DANGER_OPTIONS.map(option => (
+          <label
+            key={option.id}
+            className={cn(
+              'flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors',
+              dangerConfig.selectedOptions.includes(option.id)
+                ? 'border-primary bg-primary/5'
+                : 'border-border hover:border-primary/50'
+            )}
           >
-            <SelectTrigger className="mt-1">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="high">
-                {formatMessage({ id: 'cliHooks.wizards.skillContext.priorityHigh' })}
-              </SelectItem>
-              <SelectItem value="medium">
-                {formatMessage({ id: 'cliHooks.wizards.skillContext.priorityMedium' })}
-              </SelectItem>
-              <SelectItem value="low">
-                {formatMessage({ id: 'cliHooks.wizards.skillContext.priorityLow' })}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+            <input
+              type="checkbox"
+              checked={dangerConfig.selectedOptions.includes(option.id)}
+              onChange={() => toggleOption(option.id)}
+              className="mt-0.5 accent-primary"
+            />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-foreground">
+                {formatMessage({ id: option.labelKey })}
+              </p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                {formatMessage({ id: option.descKey })}
+              </p>
+            </div>
+          </label>
+        ))}
       </div>
     );
   };
 
-  // Config summary for review step
+  const renderSkillContextConfig = () => {
+    const skills: Skill[] = skillsData?.skills ?? [];
+
+    const addConfig = () => {
+      setSkillConfig(prev => ({
+        ...prev,
+        skillConfigs: [...prev.skillConfigs, { skill: '', keywords: '' }],
+      }));
+    };
+
+    const removeConfig = (index: number) => {
+      setSkillConfig(prev => ({
+        ...prev,
+        skillConfigs: prev.skillConfigs.filter((_, i) => i !== index),
+      }));
+    };
+
+    const updateConfig = (index: number, field: 'skill' | 'keywords', value: string) => {
+      setSkillConfig(prev => {
+        const newConfigs = [...prev.skillConfigs];
+        newConfigs[index] = { ...newConfigs[index], [field]: value };
+        return { ...prev, skillConfigs: newConfigs };
+      });
+    };
+
+    return (
+      <div className="space-y-4">
+        {/* Mode Selection */}
+        <div>
+          <label className="text-sm font-medium text-foreground">
+            {formatMessage({ id: 'cliHooks.wizards.skillContext.mode' })}
+          </label>
+          <div className="flex gap-3 mt-2">
+            <label className={cn(
+              'flex-1 flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors',
+              skillConfig.mode === 'keyword' ? 'border-primary bg-primary/5' : 'border-border'
+            )}>
+              <input
+                type="radio"
+                name="skillMode"
+                value="keyword"
+                checked={skillConfig.mode === 'keyword'}
+                onChange={() => setSkillConfig(prev => ({ ...prev, mode: 'keyword' }))}
+                className="accent-primary"
+              />
+              <div>
+                <p className="text-sm font-medium">{formatMessage({ id: 'cliHooks.wizards.skillContext.modeKeyword' })}</p>
+                <p className="text-xs text-muted-foreground">{formatMessage({ id: 'cliHooks.wizards.skillContext.modeKeywordDesc' })}</p>
+              </div>
+            </label>
+            <label className={cn(
+              'flex-1 flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors',
+              skillConfig.mode === 'auto' ? 'border-primary bg-primary/5' : 'border-border'
+            )}>
+              <input
+                type="radio"
+                name="skillMode"
+                value="auto"
+                checked={skillConfig.mode === 'auto'}
+                onChange={() => setSkillConfig(prev => ({ ...prev, mode: 'auto' }))}
+                className="accent-primary"
+              />
+              <div>
+                <p className="text-sm font-medium">{formatMessage({ id: 'cliHooks.wizards.skillContext.modeAuto' })}</p>
+                <p className="text-xs text-muted-foreground">{formatMessage({ id: 'cliHooks.wizards.skillContext.modeAutoDesc' })}</p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        {/* Keyword mode: skill config list */}
+        {skillConfig.mode === 'keyword' && (
+          <>
+            {skillsLoading ? (
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'cliHooks.wizards.skillContext.loadingSkills' })}
+              </p>
+            ) : (
+              <div className="space-y-3">
+                {skillConfig.skillConfigs.map((config, index) => (
+                  <div key={index} className="flex items-center gap-2">
+                    <Select value={config.skill} onValueChange={(value) => updateConfig(index, 'skill', value)}>
+                      <SelectTrigger className="w-[160px]">
+                        <SelectValue placeholder={formatMessage({ id: 'cliHooks.wizards.skillContext.selectSkill' })} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {skills.map((skill) => (
+                          <SelectItem key={skill.name} value={skill.name}>
+                            {skill.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <Input
+                      value={config.keywords}
+                      onChange={(e) => updateConfig(index, 'keywords', e.target.value)}
+                      placeholder={formatMessage({ id: 'cliHooks.wizards.skillContext.keywordsPlaceholder' })}
+                      className="flex-1"
+                    />
+                    {skillConfig.skillConfigs.length > 1 && (
+                      <Button variant="ghost" size="icon" onClick={() => removeConfig(index)}>
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    )}
+                  </div>
+                ))}
+                <Button variant="outline" size="sm" onClick={addConfig} className="w-full">
+                  <Plus className="w-4 h-4 mr-1" />
+                  {formatMessage({ id: 'cliHooks.wizards.skillContext.addPair' })}
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Auto mode: info display */}
+        {skillConfig.mode === 'auto' && (
+          <Card className="p-4 bg-muted/30">
+            <p className="text-sm text-muted-foreground">
+              {formatMessage({ id: 'cliHooks.wizards.skillContext.autoDescription' })}
+            </p>
+            {!skillsLoading && skills.length > 0 && (
+              <div className="mt-2 flex flex-wrap gap-1">
+                {skills.map(s => (
+                  <Badge key={s.name} variant="secondary" className="text-xs">{s.name}</Badge>
+                ))}
+              </div>
+            )}
+          </Card>
+        )}
+      </div>
+    );
+  };
+
+  // ========== Config Summary ==========
+
   const renderConfigSummary = () => {
     switch (wizardType) {
       case 'memory-update':
         return (
           <div className="space-y-2 text-sm">
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.claudePath' })}
-              </span>
-              <span className="font-mono">{memoryConfig.claudePath}</span>
+              <span className="text-muted-foreground">CLI Tool</span>
+              <Badge variant="secondary">{memoryConfig.tool}</Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                {formatMessage({ id: 'cliHooks.wizards.memoryUpdate.updateFrequency' })}
-              </span>
-              <span>
-                {formatMessage({ id: `cliHooks.wizards.memoryUpdate.frequency.${memoryConfig.updateFrequency}` })}
-              </span>
+              <span className="text-muted-foreground">Threshold</span>
+              <span>{memoryConfig.threshold} paths</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Timeout</span>
+              <span>{memoryConfig.timeout}s</span>
             </div>
           </div>
         );
@@ -643,23 +852,18 @@ export function HookWizard({
       case 'danger-protection':
         return (
           <div className="space-y-2 text-sm">
-            <div>
-              <span className="text-muted-foreground">
-                {formatMessage({ id: 'cliHooks.wizards.dangerProtection.keywords' })}:
-              </span>
-              <div className="mt-1 flex flex-wrap gap-1">
-                {dangerConfig.keywords.split('\n').filter(Boolean).map((kw, i) => (
-                  <Badge key={i} variant="secondary" className="text-xs">
-                    {kw.trim()}
+            <span className="text-muted-foreground">
+              {formatMessage({ id: 'cliHooks.wizards.dangerProtection.selectedProtections' })}:
+            </span>
+            <div className="mt-1 flex flex-wrap gap-1">
+              {dangerConfig.selectedOptions.map(id => {
+                const opt = DANGER_OPTIONS.find(o => o.id === id);
+                return opt ? (
+                  <Badge key={id} variant="secondary" className="text-xs">
+                    {formatMessage({ id: opt.labelKey })}
                   </Badge>
-                ))}
-              </div>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">
-                {formatMessage({ id: 'cliHooks.wizards.dangerProtection.allowBypass' })}
-              </span>
-              <span>{dangerConfig.allowBypass ? 'Yes' : 'No'}</span>
+                ) : null;
+              })}
             </div>
           </div>
         );
@@ -667,30 +871,35 @@ export function HookWizard({
       case 'skill-context':
         return (
           <div className="space-y-2 text-sm">
-            <div>
-              <span className="text-muted-foreground">
-                {formatMessage({ id: 'cliHooks.wizards.skillContext.keywordMappings' })}:
-              </span>
-              <div className="mt-1 space-y-1">
-                {skillConfig.keywordSkillPairs
-                  .filter((p) => p.keyword && p.skill)
-                  .map((pair, i) => (
-                    <div key={i} className="flex items-center gap-2 text-xs">
-                      <Badge variant="outline">{pair.keyword}</Badge>
-                      <span className="text-muted-foreground">{'->'}</span>
-                      <Badge variant="secondary">{pair.skill}</Badge>
-                    </div>
-                  ))}
-              </div>
-            </div>
             <div className="flex items-center justify-between">
               <span className="text-muted-foreground">
-                {formatMessage({ id: 'cliHooks.wizards.skillContext.priority' })}
-              </span>
-              <span>
-                {formatMessage({ id: `cliHooks.wizards.skillContext.priority${skillConfig.priority.charAt(0).toUpperCase()}${skillConfig.priority.slice(1)}` })}
+                {formatMessage({ id: 'cliHooks.wizards.skillContext.mode' })}
               </span>
+              <Badge variant="secondary">
+                {skillConfig.mode === 'auto'
+                  ? formatMessage({ id: 'cliHooks.wizards.skillContext.modeAuto' })
+                  : formatMessage({ id: 'cliHooks.wizards.skillContext.modeKeyword' })
+                }
+              </Badge>
             </div>
+            {skillConfig.mode === 'keyword' && (
+              <div>
+                <span className="text-muted-foreground">
+                  {formatMessage({ id: 'cliHooks.wizards.skillContext.keywordMappings' })}:
+                </span>
+                <div className="mt-1 space-y-1">
+                  {skillConfig.skillConfigs
+                    .filter(c => c.skill && c.keywords)
+                    .map((config, i) => (
+                      <div key={i} className="flex items-center gap-2 text-xs">
+                        <Badge variant="outline">{config.keywords}</Badge>
+                        <span className="text-muted-foreground">{'->'}</span>
+                        <Badge variant="secondary">{config.skill}</Badge>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
           </div>
         );
 
@@ -699,25 +908,51 @@ export function HookWizard({
     }
   };
 
-  // Get command preview for review step
+  // ========== Command Preview ==========
+
   const getPreviewCommand = (): string => {
     switch (wizardType) {
-      case 'memory-update':
-        return buildMemoryUpdateCommand(memoryConfig, detectedPlatform);
-      case 'danger-protection':
-        return buildDangerProtectionCommand(dangerConfig, detectedPlatform);
-      case 'skill-context':
-        return buildSkillContextCommand(skillConfig, detectedPlatform);
+      case 'memory-update': {
+        const selectedTool = memoryConfig.tool;
+        return `node -e "require('child_process').spawnSync(process.platform==='win32'?'cmd':'ccw',process.platform==='win32'?['/c','ccw','tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})]:['tool','exec','memory_queue',JSON.stringify({action:'add',path:process.env.CLAUDE_PROJECT_DIR,tool:'${selectedTool}'})],{stdio:'inherit'})"`;
+      }
+      case 'danger-protection': {
+        const templates = dangerConfig.selectedOptions
+          .map(id => DANGER_OPTIONS.find(o => o.id === id))
+          .filter(Boolean)
+          .map(opt => {
+            const tpl = HOOK_TEMPLATES[opt!.templateId];
+            return tpl ? `[${tpl.event}/${tpl.matcher || '*'}] ${tpl.command} ${tpl.args[0]} ...` : '';
+          })
+          .filter(Boolean);
+        return templates.length > 0
+          ? templates.join('\n')
+          : '# No protections selected';
+      }
+      case 'skill-context': {
+        if (skillConfig.mode === 'auto') {
+          return `node -e "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify({mode:'auto',prompt:p.user_prompt||''})],{stdio:'inherit'})"`;
+        }
+        const validConfigs = skillConfig.skillConfigs.filter(c => c.skill && c.keywords);
+        if (validConfigs.length === 0) return '# No SKILL configurations yet';
+        const configJson = validConfigs.map(c => ({
+          skill: c.skill,
+          keywords: c.keywords.split(',').map(k => k.trim()).filter(k => k),
+        }));
+        const paramsStr = JSON.stringify({ configs: configJson });
+        return `node -e "const p=JSON.parse(process.env.HOOK_INPUT||'{}');require('child_process').spawnSync('ccw',['tool','exec','skill_context_loader',JSON.stringify(Object.assign(${paramsStr},{prompt:p.user_prompt||''}))],{stdio:'inherit'})"`;
+      }
       default:
         return '';
     }
   };
 
-  // Navigation buttons
+  // ========== Navigation ==========
+
   const renderNavigation = () => (
     <DialogFooter className="gap-2">
       {currentStep > 1 && (
-        <Button variant="outline" onClick={handlePrevious} disabled={createMutation.isPending}>
+        <Button variant="outline" onClick={handlePrevious} disabled={saving}>
           <ChevronLeft className="w-4 h-4 mr-1" />
           {formatMessage({ id: 'cliHooks.wizards.navigation.previous' })}
         </Button>
@@ -728,20 +963,18 @@ export function HookWizard({
           <ChevronRight className="w-4 h-4 ml-1" />
         </Button>
       ) : (
-        <Button onClick={handleComplete} disabled={createMutation.isPending}>
-          {createMutation.isPending
+        <Button onClick={handleComplete} disabled={saving}>
+          {saving
             ? formatMessage({ id: 'cliHooks.wizards.navigation.creating' })
             : formatMessage({ id: 'cliHooks.wizards.navigation.create' })
           }
         </Button>
       )}
-      <Button variant="ghost" onClick={handleClose} disabled={createMutation.isPending}>
-        <X className="w-4 h-4" />
-      </Button>
     </DialogFooter>
   );
 
-  // Step indicator
+  // ========== Step Indicator ==========
+
   const renderStepIndicator = () => (
     <div className="flex items-center justify-center gap-2 pb-4">
       {[1, 2, 3].map((step) => (
@@ -761,7 +994,7 @@ export function HookWizard({
           {step < 3 && (
             <div
               className={cn(
-                'w-8 h-0.5 mx-1',
+                'w-12 h-0.5 mx-1',
                 currentStep > step ? 'bg-green-500' : 'bg-muted'
               )}
             />
@@ -795,36 +1028,3 @@ export function HookWizard({
 }
 
 export default HookWizard;
-
-// ========== Command Builders ==========
-
-function buildMemoryUpdateCommand(config: MemoryUpdateConfig, platform: Platform): string {
-  const shellCmd = getShellCommand(getShell(platform));
-  const command = `echo "Updating ${config.claudePath} at ${config.updateFrequency}"`;
-  return JSON.stringify([...shellCmd, command]);
-}
-
-function buildDangerMatcher(config: DangerProtectionConfig): string {
-  const keywords = config.keywords.split('\n').filter(Boolean).join('|');
-  return `(${keywords})`;
-}
-
-function buildDangerProtectionCommand(config: DangerProtectionConfig, platform: Platform): string {
-  const shellCmd = getShellCommand(getShell(platform));
-  const command = `echo "Checking for dangerous operations: ${config.keywords.split('\n').filter(Boolean).join(', ')}"`;
-  return JSON.stringify([...shellCmd, command]);
-}
-
-function buildSkillMatcher(config: SkillContextConfig): string {
-  const keywords = config.keywordSkillPairs
-    .filter((p) => p.keyword)
-    .map((p) => p.keyword)
-    .join('|');
-  return `(${keywords})`;
-}
-
-function buildSkillContextCommand(config: SkillContextConfig, platform: Platform): string {
-  const pairs = config.keywordSkillPairs.filter((p) => p.keyword && p.skill);
-  const command = `echo "Loading SKILL based on keywords: ${pairs.map((p) => p.keyword).join(', ')}"`;
-  return JSON.stringify([...getShellCommand(getShell(platform)), command]);
-}
diff --git a/ccw/frontend/src/components/mcp/CcwToolsMcpCard.tsx b/ccw/frontend/src/components/mcp/CcwToolsMcpCard.tsx
index 9720531f..30055ef4 100644
--- a/ccw/frontend/src/components/mcp/CcwToolsMcpCard.tsx
+++ b/ccw/frontend/src/components/mcp/CcwToolsMcpCard.tsx
@@ -151,17 +151,12 @@ export function CcwToolsMcpCard({
   };
 
   const handleEnableAll = () => {
-    CCW_MCP_TOOLS.forEach((tool) => {
-      if (!enabledTools.includes(tool.name)) {
-        onToggleTool(tool.name, true);
-      }
-    });
+    const allToolNames = CCW_MCP_TOOLS.map((t) => t.name);
+    onUpdateConfig({ enabledTools: allToolNames });
   };
 
   const handleDisableAll = () => {
-    enabledTools.forEach((toolName) => {
-      onToggleTool(toolName, false);
-    });
+    onUpdateConfig({ enabledTools: [] });
   };
 
   const handleConfigSave = () => {
diff --git a/ccw/frontend/src/components/shared/SkillCreateDialog.tsx b/ccw/frontend/src/components/shared/SkillCreateDialog.tsx
index fc95e576..2a3ed796 100644
--- a/ccw/frontend/src/components/shared/SkillCreateDialog.tsx
+++ b/ccw/frontend/src/components/shared/SkillCreateDialog.tsx
@@ -177,7 +177,7 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl
                   <Folder className="w-5 h-5" />
                   <div>
                     <div className="font-medium text-sm">{formatMessage({ id: 'skills.create.locationProject' })}</div>
-                    <div className="text-xs text-muted-foreground">{formatMessage({ id: 'skills.create.locationProjectHint' })}</div>
+                    <div className="text-xs text-muted-foreground">{`.${cliType}/skills/`}</div>
                   </div>
                 </div>
               </button>
@@ -195,7 +195,7 @@ export function SkillCreateDialog({ open, onOpenChange, onCreated, cliType = 'cl
                   <User className="w-5 h-5" />
                   <div>
                     <div className="font-medium text-sm">{formatMessage({ id: 'skills.create.locationUser' })}</div>
-                    <div className="text-xs text-muted-foreground">{formatMessage({ id: 'skills.create.locationUserHint' })}</div>
+                    <div className="text-xs text-muted-foreground">{`~/.${cliType}/skills/`}</div>
                   </div>
                 </div>
               </button>
diff --git a/ccw/frontend/src/hooks/index.ts b/ccw/frontend/src/hooks/index.ts
index d0794e31..bdcb8f54 100644
--- a/ccw/frontend/src/hooks/index.ts
+++ b/ccw/frontend/src/hooks/index.ts
@@ -170,6 +170,9 @@ export type {
 export {
   useCliEndpoints,
   useToggleCliEndpoint,
+  useCreateCliEndpoint,
+  useUpdateCliEndpoint,
+  useDeleteCliEndpoint,
   cliEndpointsKeys,
   useCliInstallations,
   useInstallCliTool,
@@ -298,4 +301,4 @@ export type {
   UseRebuildIndexReturn,
   UseUpdateIndexReturn,
   UseCancelIndexingReturn,
-} from './useCodexLens';
\ No newline at end of file
+} from './useCodexLens';
diff --git a/ccw/frontend/src/hooks/useCli.ts b/ccw/frontend/src/hooks/useCli.ts
index ddd11e98..6ece8b2c 100644
--- a/ccw/frontend/src/hooks/useCli.ts
+++ b/ccw/frontend/src/hooks/useCli.ts
@@ -10,6 +10,9 @@ import { sanitizeErrorMessage } from '../utils/errorSanitizer';
 import {
   fetchCliEndpoints,
   toggleCliEndpoint,
+  createCliEndpoint,
+  updateCliEndpoint,
+  deleteCliEndpoint,
   type CliEndpoint,
   type CliEndpointsResponse,
 } from '../lib/api';
@@ -121,6 +124,101 @@ export function useToggleCliEndpoint() {
   };
 }
 
+export function useCreateCliEndpoint() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (endpoint: Omit<CliEndpoint, 'id'>) => createCliEndpoint(endpoint),
+    onSuccess: (created) => {
+      queryClient.setQueryData<CliEndpointsResponse>(cliEndpointsKeys.lists(), (old) => {
+        if (!old) return { endpoints: [created] };
+        return { endpoints: [created, ...old.endpoints] };
+      });
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: cliEndpointsKeys.all });
+    },
+  });
+
+  return {
+    createEndpoint: mutation.mutateAsync,
+    isCreating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export function useUpdateCliEndpoint() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: ({ endpointId, updates }: { endpointId: string; updates: Partial<CliEndpoint> }) =>
+      updateCliEndpoint(endpointId, updates),
+    onMutate: async ({ endpointId, updates }) => {
+      await queryClient.cancelQueries({ queryKey: cliEndpointsKeys.all });
+      const previous = queryClient.getQueryData<CliEndpointsResponse>(cliEndpointsKeys.lists());
+
+      queryClient.setQueryData<CliEndpointsResponse>(cliEndpointsKeys.lists(), (old) => {
+        if (!old) return old;
+        return {
+          endpoints: old.endpoints.map((e) => (e.id === endpointId ? { ...e, ...updates } : e)),
+        };
+      });
+
+      return { previous };
+    },
+    onError: (_err, _vars, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(cliEndpointsKeys.lists(), context.previous);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: cliEndpointsKeys.all });
+    },
+  });
+
+  return {
+    updateEndpoint: (endpointId: string, updates: Partial<CliEndpoint>) =>
+      mutation.mutateAsync({ endpointId, updates }),
+    isUpdating: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
+export function useDeleteCliEndpoint() {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: (endpointId: string) => deleteCliEndpoint(endpointId),
+    onMutate: async (endpointId) => {
+      await queryClient.cancelQueries({ queryKey: cliEndpointsKeys.all });
+      const previous = queryClient.getQueryData<CliEndpointsResponse>(cliEndpointsKeys.lists());
+
+      queryClient.setQueryData<CliEndpointsResponse>(cliEndpointsKeys.lists(), (old) => {
+        if (!old) return old;
+        return {
+          endpoints: old.endpoints.filter((e) => e.id !== endpointId),
+        };
+      });
+
+      return { previous };
+    },
+    onError: (_err, _endpointId, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(cliEndpointsKeys.lists(), context.previous);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: cliEndpointsKeys.all });
+    },
+  });
+
+  return {
+    deleteEndpoint: mutation.mutateAsync,
+    isDeleting: mutation.isPending,
+    error: mutation.error,
+  };
+}
+
 // ========================================
 // useCliInstallations Hook
 // ========================================
diff --git a/ccw/frontend/src/locales/en/cli-hooks.json b/ccw/frontend/src/locales/en/cli-hooks.json
index 84ce94d1..3c9a0962 100644
--- a/ccw/frontend/src/locales/en/cli-hooks.json
+++ b/ccw/frontend/src/locales/en/cli-hooks.json
@@ -104,7 +104,10 @@
         "hookType": "Hook Type",
         "trigger": "Trigger Event",
         "platform": "Platform",
-        "commandPreview": "Command Preview"
+        "commandPreview": "Command Preview",
+        "installTo": "Install To",
+        "scopeProject": "Project",
+        "scopeGlobal": "Global"
       }
     },
     "navigation": {
@@ -117,36 +120,49 @@
       "title": "Memory Update Wizard",
       "description": "Configure hook to update CLAUDE.md on session end",
       "shortDescription": "Update CLAUDE.md automatically",
-      "claudePath": "CLAUDE.md Path",
-      "updateFrequency": "Update Frequency",
-      "frequency": {
-        "sessionEnd": "Session End",
-        "hourly": "Hourly",
-        "daily": "Daily"
-      }
+      "cliTool": "CLI Tool",
+      "cliToolHelp": "CLI tool for CLAUDE.md generation",
+      "threshold": "Threshold (paths)",
+      "thresholdHelp": "Number of paths to trigger batch update (1-20)",
+      "timeout": "Timeout (seconds)",
+      "timeoutHelp": "Auto-flush queue after this time (60-1800)"
     },
     "dangerProtection": {
       "title": "Danger Protection Wizard",
       "description": "Configure confirmation hook for dangerous operations",
       "shortDescription": "Confirm dangerous operations",
-      "keywords": "Dangerous Keywords",
-      "keywordsHelp": "Enter one keyword per line",
-      "confirmationMessage": "Confirmation Message",
-      "allowBypass": "Allow bypass with --force flag"
+      "selectProtections": "Select the protections you want to enable",
+      "selectedProtections": "Selected Protections",
+      "options": {
+        "bashConfirm": "Dangerous Commands",
+        "bashConfirmDesc": "Confirm before rm -rf, shutdown, kill, format, etc.",
+        "fileProtection": "Sensitive Files",
+        "fileProtectionDesc": "Block modifications to .env, .git/, secrets, keys",
+        "gitDestructive": "Git Operations",
+        "gitDestructiveDesc": "Confirm force push, hard reset, branch delete",
+        "networkConfirm": "Network Access",
+        "networkConfirmDesc": "Confirm curl, wget, ssh, WebFetch requests",
+        "systemPaths": "System Paths",
+        "systemPathsDesc": "Block/confirm operations on /etc, /usr, C:\\Windows",
+        "permissionChange": "Permission Changes",
+        "permissionChangeDesc": "Confirm chmod, chown, icacls operations"
+      }
     },
     "skillContext": {
       "title": "SKILL Context Wizard",
       "description": "Configure hook to load SKILL based on prompt keywords",
       "shortDescription": "Auto-load SKILL based on keywords",
       "loadingSkills": "Loading available skills...",
-      "keywordPlaceholder": "Enter keyword",
       "selectSkill": "Select skill",
-      "addPair": "Add Keyword-Skill Pair",
-      "priority": "Priority",
-      "priorityHigh": "High",
-      "priorityMedium": "Medium",
-      "priorityLow": "Low",
-      "keywordMappings": "Keyword Mappings"
+      "addPair": "Add Skill Configuration",
+      "keywordMappings": "Keyword Mappings",
+      "keywordsPlaceholder": "react,workflow,api",
+      "mode": "Detection Mode",
+      "modeKeyword": "Keyword Matching",
+      "modeKeywordDesc": "Load specific SKILLs when keywords are detected",
+      "modeAuto": "Auto Detection",
+      "modeAutoDesc": "Automatically detect and load SKILLs by name",
+      "autoDescription": "Auto detection mode will scan user prompts for SKILL names and automatically load matching context. All available skills are shown below."
     }
   }
 }
diff --git a/ccw/frontend/src/locales/en/cli-manager.json b/ccw/frontend/src/locales/en/cli-manager.json
index 23aab5a8..7e92105d 100644
--- a/ccw/frontend/src/locales/en/cli-manager.json
+++ b/ccw/frontend/src/locales/en/cli-manager.json
@@ -28,6 +28,32 @@
       "delete": "Delete Endpoint",
       "toggle": "Toggle Endpoint"
     },
+    "dialog": {
+      "createTitle": "Add Endpoint",
+      "editTitle": "Edit Endpoint ({id})"
+    },
+    "form": {
+      "name": "Name",
+      "namePlaceholder": "My endpoint",
+      "type": "Type",
+      "enabled": "Enabled",
+      "enabledHint": "Enable or disable this endpoint",
+      "configJson": "Configuration (JSON)",
+      "configJsonPlaceholder": "{\n  \n}"
+    },
+    "validation": {
+      "nameRequired": "Name is required",
+      "typeRequired": "Type is required",
+      "invalidJson": "Invalid JSON",
+      "configMustBeObject": "Configuration must be a JSON object"
+    },
+    "messages": {
+      "created": "Endpoint created",
+      "updated": "Endpoint updated",
+      "deleted": "Endpoint deleted",
+      "saveFailed": "Failed to save endpoint",
+      "deleteFailed": "Failed to delete endpoint"
+    },
     "deleteConfirm": "Are you sure you want to delete the endpoint \"{id}\"?",
     "emptyState": {
       "title": "No CLI Endpoints Found",
diff --git a/ccw/frontend/src/locales/zh/cli-hooks.json b/ccw/frontend/src/locales/zh/cli-hooks.json
index 36d55ff8..53435710 100644
--- a/ccw/frontend/src/locales/zh/cli-hooks.json
+++ b/ccw/frontend/src/locales/zh/cli-hooks.json
@@ -104,7 +104,10 @@
         "hookType": "钩子类型",
         "trigger": "触发事件",
         "platform": "平台",
-        "commandPreview": "命令预览"
+        "commandPreview": "命令预览",
+        "installTo": "安装到",
+        "scopeProject": "项目",
+        "scopeGlobal": "全局"
       }
     },
     "navigation": {
@@ -117,36 +120,49 @@
       "title": "记忆更新向导",
       "description": "配置钩子以在会话结束时更新 CLAUDE.md",
       "shortDescription": "自动更新 CLAUDE.md",
-      "claudePath": "CLAUDE.md 路径",
-      "updateFrequency": "更新频率",
-      "frequency": {
-        "sessionEnd": "会话结束时",
-        "hourly": "每小时",
-        "daily": "每天"
-      }
+      "cliTool": "CLI 工具",
+      "cliToolHelp": "用于生成 CLAUDE.md 的 CLI 工具",
+      "threshold": "阈值（路径数）",
+      "thresholdHelp": "触发批量更新的路径数量（1-20）",
+      "timeout": "超时时间（秒）",
+      "timeoutHelp": "超过此时间自动刷新队列（60-1800）"
     },
     "dangerProtection": {
       "title": "危险操作保护向导",
       "description": "配置危险操作的确认钩子",
       "shortDescription": "确认危险操作",
-      "keywords": "危险关键词",
-      "keywordsHelp": "每行输入一个关键词",
-      "confirmationMessage": "确认消息",
-      "allowBypass": "允许使用 --force 标志绕过"
+      "selectProtections": "选择要启用的保护类型",
+      "selectedProtections": "已选保护",
+      "options": {
+        "bashConfirm": "危险命令",
+        "bashConfirmDesc": "执行 rm -rf、shutdown、kill、format 等命令前确认",
+        "fileProtection": "敏感文件",
+        "fileProtectionDesc": "阻止修改 .env、.git/、密钥等敏感文件",
+        "gitDestructive": "Git 操作",
+        "gitDestructiveDesc": "强制推送、硬重置、删除分支前确认",
+        "networkConfirm": "网络访问",
+        "networkConfirmDesc": "执行 curl、wget、ssh、WebFetch 请求前确认",
+        "systemPaths": "系统路径",
+        "systemPathsDesc": "阻止/确认对 /etc、/usr、C:\\Windows 的操作",
+        "permissionChange": "权限变更",
+        "permissionChangeDesc": "执行 chmod、chown、icacls 操作前确认"
+      }
     },
     "skillContext": {
       "title": "SKILL 上下文向导",
       "description": "配置钩子以根据提示关键词加载 SKILL",
       "shortDescription": "根据关键词自动加载 SKILL",
       "loadingSkills": "正在加载可用的技能...",
-      "keywordPlaceholder": "输入关键词",
       "selectSkill": "选择技能",
-      "addPair": "添加关键词-技能对",
-      "priority": "优先级",
-      "priorityHigh": "高",
-      "priorityMedium": "中",
-      "priorityLow": "低",
-      "keywordMappings": "关键词映射"
+      "addPair": "添加技能配置",
+      "keywordMappings": "关键词映射",
+      "keywordsPlaceholder": "react,workflow,api",
+      "mode": "检测模式",
+      "modeKeyword": "关键词匹配",
+      "modeKeywordDesc": "检测到关键词时加载对应 SKILL",
+      "modeAuto": "自动检测",
+      "modeAutoDesc": "自动检测并按名称加载 SKILL",
+      "autoDescription": "自动检测模式将扫描用户提示中的 SKILL 名称，并自动加载匹配的上下文。所有可用技能如下所示。"
     }
   }
 }
diff --git a/ccw/frontend/src/locales/zh/cli-manager.json b/ccw/frontend/src/locales/zh/cli-manager.json
index 46d36aed..a2dac754 100644
--- a/ccw/frontend/src/locales/zh/cli-manager.json
+++ b/ccw/frontend/src/locales/zh/cli-manager.json
@@ -28,6 +28,32 @@
       "delete": "删除端点",
       "toggle": "切换端点"
     },
+    "dialog": {
+      "createTitle": "添加端点",
+      "editTitle": "编辑端点（{id}）"
+    },
+    "form": {
+      "name": "名称",
+      "namePlaceholder": "我的端点",
+      "type": "类型",
+      "enabled": "启用",
+      "enabledHint": "启用或禁用该端点",
+      "configJson": "配置（JSON）",
+      "configJsonPlaceholder": "{\n  \n}"
+    },
+    "validation": {
+      "nameRequired": "名称不能为空",
+      "typeRequired": "类型不能为空",
+      "invalidJson": "JSON 格式不正确",
+      "configMustBeObject": "配置必须是 JSON 对象"
+    },
+    "messages": {
+      "created": "端点已创建",
+      "updated": "端点已更新",
+      "deleted": "端点已删除",
+      "saveFailed": "保存端点失败",
+      "deleteFailed": "删除端点失败"
+    },
     "deleteConfirm": "确定要删除端点 \"{id}\" 吗?",
     "emptyState": {
       "title": "未找到 CLI 端点",
diff --git a/ccw/frontend/src/pages/EndpointsPage.test.tsx b/ccw/frontend/src/pages/EndpointsPage.test.tsx
new file mode 100644
index 00000000..75060f52
--- /dev/null
+++ b/ccw/frontend/src/pages/EndpointsPage.test.tsx
@@ -0,0 +1,131 @@
+// ========================================
+// Endpoints Page Tests
+// ========================================
+// Tests for the CLI endpoints page with i18n
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@/test/i18n';
+import userEvent from '@testing-library/user-event';
+import { EndpointsPage } from './EndpointsPage';
+import type { CliEndpoint } from '@/lib/api';
+
+const mockEndpoints: CliEndpoint[] = [
+  {
+    id: 'ep-1',
+    name: 'Endpoint 1',
+    type: 'custom',
+    enabled: true,
+    config: { foo: 'bar' },
+  },
+];
+
+const createEndpointMock = vi.fn();
+const updateEndpointMock = vi.fn();
+const deleteEndpointMock = vi.fn();
+const toggleEndpointMock = vi.fn();
+
+vi.mock('@/hooks', () => ({
+  useCliEndpoints: () => ({
+    endpoints: mockEndpoints,
+    litellmEndpoints: [],
+    customEndpoints: mockEndpoints,
+    wrapperEndpoints: [],
+    totalCount: mockEndpoints.length,
+    enabledCount: mockEndpoints.length,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: vi.fn(),
+    invalidate: vi.fn(),
+  }),
+  useToggleCliEndpoint: () => ({
+    toggleEndpoint: toggleEndpointMock,
+    isToggling: false,
+    error: null,
+  }),
+  useCreateCliEndpoint: () => ({
+    createEndpoint: createEndpointMock,
+    isCreating: false,
+    error: null,
+  }),
+  useUpdateCliEndpoint: () => ({
+    updateEndpoint: updateEndpointMock,
+    isUpdating: false,
+    error: null,
+  }),
+  useDeleteCliEndpoint: () => ({
+    deleteEndpoint: deleteEndpointMock,
+    isDeleting: false,
+    error: null,
+  }),
+}));
+
+vi.mock('@/hooks/useNotifications', () => ({
+  useNotifications: () => ({
+    success: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+describe('EndpointsPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // confirm() used for delete
+    // @ts-expect-error - test override
+    global.confirm = vi.fn(() => true);
+  });
+
+  it('should render page title', () => {
+    render(<EndpointsPage />, { locale: 'en' });
+    expect(screen.getByText(/CLI Endpoints/i)).toBeInTheDocument();
+  });
+
+  it('should open create dialog and call createEndpoint', async () => {
+    const user = userEvent.setup();
+    createEndpointMock.mockResolvedValueOnce({ id: 'ep-2' });
+
+    render(<EndpointsPage />, { locale: 'en' });
+
+    await user.click(screen.getByRole('button', { name: /Add Endpoint/i }));
+
+    expect(screen.getByText(/Add Endpoint/i)).toBeInTheDocument();
+
+    await user.type(screen.getByLabelText(/^Name/i), 'New Endpoint');
+    await user.click(screen.getByRole('button', { name: /^Save$/i }));
+
+    await waitFor(() => {
+      expect(createEndpointMock).toHaveBeenCalledWith({
+        name: 'New Endpoint',
+        type: 'custom',
+        enabled: true,
+        config: {},
+      });
+    });
+  });
+
+  it('should open edit dialog when edit clicked', async () => {
+    const user = userEvent.setup();
+    updateEndpointMock.mockResolvedValueOnce({});
+
+    render(<EndpointsPage />, { locale: 'en' });
+
+    await user.click(screen.getByRole('button', { name: /Edit Endpoint/i }));
+
+    expect(screen.getByText(/Edit Endpoint/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^ID$/i)).toHaveValue('ep-1');
+  });
+
+  it('should call deleteEndpoint when delete confirmed', async () => {
+    const user = userEvent.setup();
+    deleteEndpointMock.mockResolvedValueOnce(undefined);
+
+    render(<EndpointsPage />, { locale: 'en' });
+
+    await user.click(screen.getByRole('button', { name: /Delete Endpoint/i }));
+
+    await waitFor(() => {
+      expect(deleteEndpointMock).toHaveBeenCalledWith('ep-1');
+    });
+  });
+});
+
diff --git a/ccw/frontend/src/pages/EndpointsPage.tsx b/ccw/frontend/src/pages/EndpointsPage.tsx
index 408bcea6..d950fc36 100644
--- a/ccw/frontend/src/pages/EndpointsPage.tsx
+++ b/ccw/frontend/src/pages/EndpointsPage.tsx
@@ -25,9 +25,11 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
-import { useCliEndpoints, useToggleCliEndpoint } from '@/hooks';
+import { useCliEndpoints, useCreateCliEndpoint, useDeleteCliEndpoint, useToggleCliEndpoint, useUpdateCliEndpoint } from '@/hooks';
+import { useNotifications } from '@/hooks/useNotifications';
 import type { CliEndpoint } from '@/lib/api';
 import { cn } from '@/lib/utils';
+import { CliEndpointFormDialog, type CliEndpointFormMode, type CliEndpointSavePayload } from '@/components/cli-endpoints/CliEndpointFormDialog';
 
 // ========== Endpoint Card Component ==========
 
@@ -37,7 +39,7 @@ interface EndpointCardProps {
   onToggleExpand: () => void;
   onToggle: (endpointId: string, enabled: boolean) => void;
   onEdit: (endpoint: CliEndpoint) => void;
-  onDelete: (endpointId: string) => void;
+  onDelete: (endpointId: string) => void | Promise<void>;
 }
 
 function EndpointCard({ endpoint, isExpanded, onToggleExpand, onToggle, onEdit, onDelete }: EndpointCardProps) {
@@ -94,6 +96,7 @@ function EndpointCard({ endpoint, isExpanded, onToggleExpand, onToggle, onEdit,
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
+              aria-label={formatMessage({ id: 'cliEndpoints.actions.toggle' })}
               onClick={(e) => {
                 e.stopPropagation();
                 onToggle(endpoint.id, !endpoint.enabled);
@@ -105,6 +108,7 @@ function EndpointCard({ endpoint, isExpanded, onToggleExpand, onToggle, onEdit,
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
+              aria-label={formatMessage({ id: 'cliEndpoints.actions.edit' })}
               onClick={(e) => {
                 e.stopPropagation();
                 onEdit(endpoint);
@@ -116,6 +120,7 @@ function EndpointCard({ endpoint, isExpanded, onToggleExpand, onToggle, onEdit,
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
+              aria-label={formatMessage({ id: 'cliEndpoints.actions.delete' })}
               onClick={(e) => {
                 e.stopPropagation();
                 onDelete(endpoint.id);
@@ -152,9 +157,13 @@ function EndpointCard({ endpoint, isExpanded, onToggleExpand, onToggle, onEdit,
 
 export function EndpointsPage() {
   const { formatMessage } = useIntl();
+  const { success, error: showError } = useNotifications();
   const [searchQuery, setSearchQuery] = useState('');
   const [typeFilter, setTypeFilter] = useState<'all' | 'litellm' | 'custom' | 'wrapper'>('all');
   const [expandedEndpoints, setExpandedEndpoints] = useState<Set<string>>(new Set());
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogMode, setDialogMode] = useState<CliEndpointFormMode>('create');
+  const [editingEndpoint, setEditingEndpoint] = useState<CliEndpoint | undefined>(undefined);
 
   const {
     endpoints,
@@ -168,6 +177,9 @@ export function EndpointsPage() {
   } = useCliEndpoints();
 
   const { toggleEndpoint } = useToggleCliEndpoint();
+  const { createEndpoint, isCreating } = useCreateCliEndpoint();
+  const { updateEndpoint, isUpdating } = useUpdateCliEndpoint();
+  const { deleteEndpoint, isDeleting } = useDeleteCliEndpoint();
 
   const toggleExpand = (endpointId: string) => {
     setExpandedEndpoints((prev) => {
@@ -185,16 +197,45 @@ export function EndpointsPage() {
     toggleEndpoint(endpointId, enabled);
   };
 
-  const handleDelete = (endpointId: string) => {
-    if (confirm(formatMessage({ id: 'cliEndpoints.deleteConfirm' }, { id: endpointId }))) {
-      // TODO: Implement delete functionality
-      console.log('Delete endpoint:', endpointId);
-    }
+  const handleAdd = () => {
+    setDialogMode('create');
+    setEditingEndpoint(undefined);
+    setDialogOpen(true);
   };
 
   const handleEdit = (endpoint: CliEndpoint) => {
-    // TODO: Implement edit dialog
-    console.log('Edit endpoint:', endpoint);
+    setDialogMode('edit');
+    setEditingEndpoint(endpoint);
+    setDialogOpen(true);
+  };
+
+  const handleDelete = async (endpointId: string) => {
+    if (!confirm(formatMessage({ id: 'cliEndpoints.deleteConfirm' }, { id: endpointId }))) return;
+
+    try {
+      await deleteEndpoint(endpointId);
+      success(formatMessage({ id: 'cliEndpoints.messages.deleted' }));
+    } catch (err) {
+      console.error('Failed to delete CLI endpoint:', err);
+      showError(formatMessage({ id: 'cliEndpoints.messages.deleteFailed' }));
+    }
+  };
+
+  const handleDialogSave = async (payload: CliEndpointSavePayload) => {
+    try {
+      if (dialogMode === 'edit' && editingEndpoint) {
+        await updateEndpoint(editingEndpoint.id, payload);
+        success(formatMessage({ id: 'cliEndpoints.messages.updated' }));
+        return;
+      }
+
+      await createEndpoint(payload);
+      success(formatMessage({ id: 'cliEndpoints.messages.created' }));
+    } catch (err) {
+      console.error('Failed to save CLI endpoint:', err);
+      showError(formatMessage({ id: 'cliEndpoints.messages.saveFailed' }));
+      throw err;
+    }
   };
 
   // Filter endpoints by search query and type
@@ -234,7 +275,7 @@ export function EndpointsPage() {
             <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
             {formatMessage({ id: 'common.actions.refresh' })}
           </Button>
-          <Button>
+          <Button onClick={handleAdd} disabled={isCreating || isUpdating || isDeleting}>
             <Plus className="w-4 h-4 mr-2" />
             {formatMessage({ id: 'cliEndpoints.actions.add' })}
           </Button>
@@ -327,6 +368,14 @@ export function EndpointsPage() {
           ))}
         </div>
       )}
+
+      <CliEndpointFormDialog
+        mode={dialogMode}
+        endpoint={editingEndpoint}
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        onSave={handleDialogSave}
+      />
     </div>
   );
 }