claude-code-workflow 6.1.4 → 6.2.2

package/ccw/src/templates/dashboard-js/views/hook-manager.js

@@ -11,10 +11,11 @@ async function renderHookManager() {
   if (statsGrid) statsGrid.style.display = 'none';
   if (searchInput) searchInput.parentElement.style.display = 'none';
 
-  // Load hook config if not already loaded
-  if (!hookConfig.global.hooks && !hookConfig.project.hooks) {
-    await loadHookConfig();
-  }
+  // Always reload hook config and available skills to get latest data
+  await Promise.all([
+    loadHookConfig(),
+    loadAvailableSkills()
+  ]);
 
   const globalHooks = hookConfig.global?.hooks || {};
   const projectHooks = hookConfig.project?.hooks || {};
@@ -29,21 +30,21 @@ async function renderHookManager() {
       <div class="hook-section mb-6">
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-foreground">Project Hooks</h3>
-            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-primary-light text-primary">.claude/settings.json</span>
+            <h3 class="text-lg font-semibold text-foreground">${t('hook.projectHooks')}</h3>
+            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-primary-light text-primary">${t('hook.projectFile')}</span>
             <button class="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1"
                     onclick="openHookCreateModal()">
-              <span>+</span> New Hook
+              <span>+</span> ${t('hook.newHook')}
             </button>
           </div>
-          <span class="text-sm text-muted-foreground">${projectHookCount} hooks configured</span>
+          <span class="text-sm text-muted-foreground">${projectHookCount} ${t('hook.hooksConfigured')}</span>
         </div>
 
         ${projectHookCount === 0 ? `
           <div class="hook-empty-state bg-card border border-border rounded-lg p-6 text-center">
             <div class="text-muted-foreground mb-3"><i data-lucide="webhook" class="w-10 h-10 mx-auto"></i></div>
-            <p class="text-muted-foreground">No hooks configured for this project</p>
-            <p class="text-sm text-muted-foreground mt-1">Create a hook to automate actions on tool usage</p>
+            <p class="text-muted-foreground">${t('empty.noHooks')}</p>
+            <p class="text-sm text-muted-foreground mt-1">${t('empty.createHookHint')}</p>
           </div>
         ` : `
           <div class="hook-grid grid gap-3">
@@ -56,16 +57,16 @@ async function renderHookManager() {
       <div class="hook-section mb-6">
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center gap-3">
-            <h3 class="text-lg font-semibold text-foreground">Global Hooks</h3>
-            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-muted text-muted-foreground">~/.claude/settings.json</span>
+            <h3 class="text-lg font-semibold text-foreground">${t('hook.globalHooks')}</h3>
+            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-muted text-muted-foreground">${t('hook.globalFile')}</span>
           </div>
-          <span class="text-sm text-muted-foreground">${globalHookCount} hooks configured</span>
+          <span class="text-sm text-muted-foreground">${globalHookCount} ${t('hook.hooksConfigured')}</span>
         </div>
 
         ${globalHookCount === 0 ? `
           <div class="hook-empty-state bg-card border border-border rounded-lg p-6 text-center">
-            <p class="text-muted-foreground">No global hooks configured</p>
-            <p class="text-sm text-muted-foreground mt-1">Global hooks apply to all Claude Code sessions</p>
+            <p class="text-muted-foreground">${t('empty.noGlobalHooks')}</p>
+            <p class="text-sm text-muted-foreground mt-1">${t('empty.globalHooksHint')}</p>
           </div>
         ` : `
           <div class="hook-grid grid gap-3">
@@ -74,25 +75,44 @@ async function renderHookManager() {
         `}
       </div>
 
+      <!-- Hook Wizards -->
+      <div class="hook-section mb-6">
+        <div class="flex items-center justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <h3 class="text-lg font-semibold text-foreground">${t('hook.wizards')}</h3>
+            <span class="badge px-2 py-0.5 text-xs font-semibold rounded-full bg-success/20 text-success">${t('hook.guidedSetup')}</span>
+          </div>
+          <span class="text-sm text-muted-foreground">${t('hook.wizardsDesc')}</span>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          ${renderWizardCard('memory-update')}
+          ${renderWizardCard('memory-setup')}
+          ${renderWizardCard('skill-context')}
+        </div>
+      </div>
+
       <!-- Quick Install Templates -->
       <div class="hook-section">
         <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">Quick Install Templates</h3>
-          <span class="text-sm text-muted-foreground">One-click hook installation</span>
+          <h3 class="text-lg font-semibold text-foreground">${t('hook.quickInstall')}</h3>
+          <span class="text-sm text-muted-foreground">${t('hook.oneClick')}</span>
         </div>
 
         <div class="hook-templates-grid grid grid-cols-1 md:grid-cols-2 gap-4">
-          ${renderQuickInstallCard('ccw-notify', 'CCW Dashboard Notify', 'Notify CCW dashboard when files are written', 'PostToolUse', 'Write')}
-          ${renderQuickInstallCard('log-tool', 'Tool Usage Logger', 'Log all tool executions to a file', 'PostToolUse', 'All')}
-          ${renderQuickInstallCard('lint-check', 'Auto Lint Check', 'Run ESLint on JavaScript/TypeScript files after write', 'PostToolUse', 'Write')}
-          ${renderQuickInstallCard('git-add', 'Auto Git Stage', 'Automatically stage written files to git', 'PostToolUse', 'Write')}
+          ${renderQuickInstallCard('session-context', t('hook.tpl.sessionContext'), t('hook.tpl.sessionContextDesc'), 'UserPromptSubmit', '')}
+          ${renderQuickInstallCard('codexlens-update', t('hook.tpl.codexlensSync'), t('hook.tpl.codexlensSyncDesc'), 'PostToolUse', 'Write|Edit')}
+          ${renderQuickInstallCard('ccw-notify', t('hook.tpl.ccwDashboardNotify'), t('hook.tpl.ccwDashboardNotifyDesc'), 'PostToolUse', 'Write')}
+          ${renderQuickInstallCard('log-tool', t('hook.tpl.toolLogger'), t('hook.tpl.toolLoggerDesc'), 'PostToolUse', 'All')}
+          ${renderQuickInstallCard('lint-check', t('hook.tpl.autoLint'), t('hook.tpl.autoLintDesc'), 'PostToolUse', 'Write')}
+          ${renderQuickInstallCard('git-add', t('hook.tpl.autoGitStage'), t('hook.tpl.autoGitStageDesc'), 'PostToolUse', 'Write')}
         </div>
       </div>
 
       <!-- Hook Environment Variables Reference -->
       <div class="hook-section mt-6">
         <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-foreground">Environment Variables Reference</h3>
+          <h3 class="text-lg font-semibold text-foreground">${t('hook.envVarsRef')}</h3>
         </div>
 
         <div class="bg-card border border-border rounded-lg p-4">
@@ -100,29 +120,29 @@ async function renderHookManager() {
             <div class="space-y-2">
               <div class="flex items-start gap-2">
                 <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_FILE_PATHS</code>
-                <span class="text-muted-foreground">Space-separated file paths affected</span>
+                <span class="text-muted-foreground">${t('hook.filePaths')}</span>
               </div>
               <div class="flex items-start gap-2">
                 <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_TOOL_NAME</code>
-                <span class="text-muted-foreground">Name of the tool being executed</span>
+                <span class="text-muted-foreground">${t('hook.toolName')}</span>
               </div>
               <div class="flex items-start gap-2">
                 <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_TOOL_INPUT</code>
-                <span class="text-muted-foreground">JSON input passed to the tool</span>
+                <span class="text-muted-foreground">${t('hook.toolInput')}</span>
               </div>
             </div>
             <div class="space-y-2">
               <div class="flex items-start gap-2">
                 <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_SESSION_ID</code>
-                <span class="text-muted-foreground">Current Claude session ID</span>
+                <span class="text-muted-foreground">${t('hook.sessionId')}</span>
               </div>
               <div class="flex items-start gap-2">
                 <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_PROJECT_DIR</code>
-                <span class="text-muted-foreground">Current project directory path</span>
+                <span class="text-muted-foreground">${t('hook.projectDir')}</span>
               </div>
               <div class="flex items-start gap-2">
                 <code class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">$CLAUDE_WORKING_DIR</code>
-                <span class="text-muted-foreground">Current working directory</span>
+                <span class="text-muted-foreground">${t('hook.workingDir')}</span>
               </div>
             </div>
           </div>
@@ -133,9 +153,164 @@ async function renderHookManager() {
 
   // Attach event listeners
   attachHookEventListeners();
-  
+
   // Initialize Lucide icons
   if (typeof lucide !== 'undefined') lucide.createIcons();
+
+  // Load available SKILLs for skill-context wizard
+  loadAvailableSkills();
+}
+
+// Load available SKILLs for skill-context wizard
+async function loadAvailableSkills() {
+  try {
+    const response = await fetch(`/api/skills?path=${encodeURIComponent(projectPath)}`);
+    if (!response.ok) throw new Error('Failed to load skills');
+    const data = await response.json();
+
+    const container = document.getElementById('skill-discovery-skill-context');
+    if (container && data.skills) {
+      if (data.skills.length === 0) {
+        container.innerHTML = `
+          <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.availableSkills')}</span>
+          <span class="text-muted-foreground ml-2">${t('hook.wizard.noSkillsFound').split('.')[0]}</span>
+        `;
+      } else {
+        const skillBadges = data.skills.map(skill => `
+          <span class="px-2 py-0.5 bg-emerald-500/10 text-emerald-500 rounded" title="${escapeHtml(skill.description)}">${escapeHtml(skill.name)}</span>
+        `).join('');
+        container.innerHTML = `
+          <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.availableSkills')}</span>
+          <div class="flex flex-wrap gap-1 mt-1">${skillBadges}</div>
+        `;
+      }
+    }
+
+    // Store skills for wizard use
+    window.availableSkills = data.skills || [];
+  } catch (err) {
+    console.error('Failed to load skills:', err);
+    const container = document.getElementById('skill-discovery-skill-context');
+    if (container) {
+      container.innerHTML = `
+        <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.availableSkills')}</span>
+        <span class="text-destructive ml-2">${t('toast.loadFailed', { error: err.message })}</span>
+      `;
+    }
+  }
+}
+
+// Call loadAvailableSkills after rendering hook manager
+const originalRenderHookManager = typeof renderHookManager === 'function' ? renderHookManager : null;
+
+function renderWizardCard(wizardId) {
+  const wizard = WIZARD_TEMPLATES[wizardId];
+  if (!wizard) return '';
+
+  // Get translated wizard name and description
+  const wizardName = wizardId === 'memory-update' ? t('hook.wizard.memoryUpdate') :
+                     wizardId === 'memory-setup' ? t('hook.wizard.memorySetup') :
+                     wizardId === 'skill-context' ? t('hook.wizard.skillContext') : wizard.name;
+  const wizardDesc = wizardId === 'memory-update' ? t('hook.wizard.memoryUpdateDesc') :
+                     wizardId === 'memory-setup' ? t('hook.wizard.memorySetupDesc') :
+                     wizardId === 'skill-context' ? t('hook.wizard.skillContextDesc') : wizard.description;
+
+  // Translate options
+  const getOptionName = (wizardId, optId) => {
+    if (wizardId === 'memory-update') {
+      if (optId === 'on-stop') return t('hook.wizard.onSessionEnd');
+      if (optId === 'periodic') return t('hook.wizard.periodicUpdate');
+      if (optId === 'count-based') return t('hook.wizard.countBasedUpdate');
+    }
+    if (wizardId === 'memory-setup') {
+      if (optId === 'file-read') return t('hook.wizard.fileReadTracker');
+      if (optId === 'file-write') return t('hook.wizard.fileWriteTracker');
+      if (optId === 'prompts') return t('hook.wizard.promptTracker');
+    }
+    if (wizardId === 'skill-context') {
+      if (optId === 'keyword') return t('hook.wizard.keywordMatching');
+      if (optId === 'auto') return t('hook.wizard.autoDetection');
+    }
+    return wizard.options.find(o => o.id === optId)?.name || '';
+  };
+
+  const getOptionDesc = (wizardId, optId) => {
+    if (wizardId === 'memory-update') {
+      if (optId === 'on-stop') return t('hook.wizard.onSessionEndDesc');
+      if (optId === 'periodic') return t('hook.wizard.periodicUpdateDesc');
+      if (optId === 'count-based') return t('hook.wizard.countBasedUpdateDesc');
+    }
+    if (wizardId === 'memory-setup') {
+      if (optId === 'file-read') return t('hook.wizard.fileReadTrackerDesc');
+      if (optId === 'file-write') return t('hook.wizard.fileWriteTrackerDesc');
+      if (optId === 'prompts') return t('hook.wizard.promptTrackerDesc');
+    }
+    if (wizardId === 'skill-context') {
+      if (optId === 'keyword') return t('hook.wizard.keywordMatchingDesc');
+      if (optId === 'auto') return t('hook.wizard.autoDetectionDesc');
+    }
+    return wizard.options.find(o => o.id === optId)?.description || '';
+  };
+
+  // Determine what to show in the tools/skills section
+  let toolsSection = '';
+  if (wizard.requiresSkillDiscovery) {
+    toolsSection = `
+      <div class="flex items-center gap-2 text-xs text-muted-foreground mb-4">
+        <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.event')}</span>
+        <span class="px-2 py-0.5 bg-amber-500/10 text-amber-500 rounded">UserPromptSubmit</span>
+      </div>
+      <div id="skill-discovery-${wizardId}" class="text-xs text-muted-foreground mb-4">
+        <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.availableSkills')}</span>
+        <span class="text-muted-foreground ml-2">${t('hook.wizard.loading')}</span>
+      </div>
+    `;
+  } else if (wizard.multiSelect) {
+    // memory-setup: lightweight tracking, no CLI tools
+    toolsSection = '';
+  } else {
+    toolsSection = `
+      <div class="flex items-center gap-2 text-xs text-muted-foreground mb-4">
+        <span class="font-mono bg-muted px-1.5 py-0.5 rounded">${t('hook.wizard.cliTools')}</span>
+        <span class="px-2 py-0.5 bg-blue-500/10 text-blue-500 rounded">gemini</span>
+        <span class="px-2 py-0.5 bg-purple-500/10 text-purple-500 rounded">qwen</span>
+        <span class="px-2 py-0.5 bg-green-500/10 text-green-500 rounded">codex</span>
+      </div>
+    `;
+  }
+
+  return `
+    <div class="hook-wizard-card bg-gradient-to-br from-primary/5 to-primary/10 border border-primary/20 rounded-lg p-5 hover:shadow-lg transition-all">
+      <div class="flex items-start justify-between mb-4">
+        <div class="flex items-center gap-3">
+          <div class="p-2.5 bg-primary/10 rounded-lg">
+            <i data-lucide="${wizard.icon}" class="w-6 h-6 text-primary"></i>
+          </div>
+          <div>
+            <h4 class="font-semibold text-foreground">${escapeHtml(wizardName)}</h4>
+            <p class="text-sm text-muted-foreground">${escapeHtml(wizardDesc)}</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="space-y-2 mb-4">
+        ${wizard.options.map(opt => `
+          <div class="flex items-center gap-2 text-sm text-muted-foreground">
+            <i data-lucide="check" class="w-4 h-4 text-success"></i>
+            <span>${escapeHtml(getOptionName(wizardId, opt.id))}: ${escapeHtml(getOptionDesc(wizardId, opt.id))}</span>
+          </div>
+        `).join('')}
+      </div>
+
+      ${toolsSection}
+
+      <button class="w-full px-4 py-2.5 text-sm bg-primary text-primary-foreground rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2"
+              onclick="openHookWizardModal('${wizardId}')">
+        <i data-lucide="wand-2" class="w-4 h-4"></i>
+        ${t('hook.openWizard')}
+      </button>
+    </div>
+  `;
 }
 
 function countHooks(hooks) {
@@ -156,8 +331,10 @@ function renderHooksByEvent(hooks, scope) {
 
     return hookList.map((hook, index) => {
       const matcher = hook.matcher || 'All tools';
-      const command = hook.command || 'N/A';
+      // Support both old format (hook.command) and new Claude Code format (hook.hooks[0].command)
+      const command = hook.hooks?.[0]?.command || hook.command || 'N/A';
       const args = hook.args || [];
+      const timeout = hook.hooks?.[0]?.timeout || hook.timeout;
 
       return `
         <div class="hook-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all">
@@ -194,9 +371,9 @@ function renderHooksByEvent(hooks, scope) {
               <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">matcher</span>
               <span class="text-muted-foreground">${escapeHtml(matcher)}</span>
             </div>
-            <div class="flex items-center gap-2">
+            <div class="flex items-start gap-2">
               <span class="font-mono text-xs bg-muted px-1.5 py-0.5 rounded shrink-0">command</span>
-              <span class="font-mono text-xs text-foreground">${escapeHtml(command)}</span>
+              <span class="font-mono text-xs text-foreground break-all line-clamp-3 overflow-hidden" title="${escapeHtml(command)}">${escapeHtml(command)}</span>
             </div>
             ${args.length > 0 ? `
               <div class="flex items-start gap-2">
@@ -213,6 +390,9 @@ function renderHooksByEvent(hooks, scope) {
 
 function renderQuickInstallCard(templateId, title, description, event, matcher) {
   const isInstalled = isHookTemplateInstalled(templateId);
+  const template = HOOK_TEMPLATES[templateId];
+  const category = template?.category || 'general';
+  const categoryTranslated = t(`hook.category.${category}`) || category;
 
   return `
     <div class="hook-template-card bg-card border border-border rounded-lg p-4 hover:shadow-md transition-all ${isInstalled ? 'border-success bg-success-light/30' : ''}">
@@ -224,6 +404,11 @@ function renderQuickInstallCard(templateId, title, description, event, matcher)
             <p class="text-xs text-muted-foreground">${escapeHtml(description)}</p>
           </div>
         </div>
+        <button class="p-1.5 text-muted-foreground hover:text-foreground hover:bg-hover rounded transition-colors"
+                onclick="viewTemplateDetails('${templateId}')"
+                title="${t('hook.viewDetails')}">
+          <i data-lucide="eye" class="w-4 h-4"></i>
+        </button>
       </div>
 
       <div class="hook-template-meta text-xs text-muted-foreground mb-3 flex items-center gap-3">
@@ -231,8 +416,9 @@ function renderQuickInstallCard(templateId, title, description, event, matcher)
           <span class="font-mono bg-muted px-1 py-0.5 rounded">${event}</span>
         </span>
         <span class="flex items-center gap-1">
-          Matches: <span class="font-medium">${matcher}</span>
+          ${t('hook.wizard.matches')} <span class="font-medium">${matcher}</span>
         </span>
+        <span class="px-1.5 py-0.5 bg-primary/10 text-primary rounded text-xs">${categoryTranslated}</span>
       </div>
 
       <div class="flex items-center gap-2">
@@ -240,18 +426,18 @@ function renderQuickInstallCard(templateId, title, description, event, matcher)
           <button class="flex-1 px-3 py-1.5 text-sm bg-destructive/10 text-destructive rounded hover:bg-destructive/20 transition-colors"
                   data-template="${templateId}"
                   data-action="uninstall">
-            Uninstall
+            ${t('hook.uninstall')}
           </button>
         ` : `
           <button class="flex-1 px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity"
                   data-template="${templateId}"
                   data-action="install-project">
-            Install (Project)
+            ${t('hook.installProject')}
           </button>
           <button class="px-3 py-1.5 text-sm bg-muted text-foreground rounded hover:bg-hover transition-colors"
                   data-template="${templateId}"
                   data-action="install-global">
-            Global
+            ${t('hook.installGlobal')}
           </button>
         `}
       </div>
@@ -263,18 +449,43 @@ function isHookTemplateInstalled(templateId) {
   const template = HOOK_TEMPLATES[templateId];
   if (!template) return false;
 
+  // Define unique patterns for each template type (more specific than just command)
+  const uniquePatterns = {
+    'session-context': 'hook session-context',
+    'codexlens-update': 'codexlens update',
+    'ccw-notify': 'api/hook',
+    'log-tool': 'tool-usage.log',
+    'lint-check': 'eslint',
+    'git-add': 'git add',
+    'memory-file-read': 'memory track --type file --action read',
+    'memory-file-write': 'memory track --type file --action write',
+    'memory-prompt-track': 'memory track --type topic',
+    'skill-context-auto': 'skill-context-auto'
+  };
+
+  // Use unique pattern if defined, otherwise fall back to command + args
+  const searchPattern = uniquePatterns[templateId] ||
+    (template.command + (template.args ? ' ' + template.args.join(' ') : ''));
+
   // Check project hooks
   const projectHooks = hookConfig.project?.hooks?.[template.event];
   if (projectHooks) {
     const hookList = Array.isArray(projectHooks) ? projectHooks : [projectHooks];
-    if (hookList.some(h => h.command === template.command)) return true;
+    if (hookList.some(h => {
+      // Check both old format (h.command) and new format (h.hooks[0].command)
+      const cmd = h.hooks?.[0]?.command || h.command || '';
+      return cmd.includes(searchPattern);
+    })) return true;
   }
 
   // Check global hooks
   const globalHooks = hookConfig.global?.hooks?.[template.event];
   if (globalHooks) {
     const hookList = Array.isArray(globalHooks) ? globalHooks : [globalHooks];
-    if (hookList.some(h => h.command === template.command)) return true;
+    if (hookList.some(h => {
+      const cmd = h.hooks?.[0]?.command || h.command || '';
+      return cmd.includes(searchPattern);
+    })) return true;
   }
 
   return false;
@@ -287,6 +498,12 @@ async function installHookTemplate(templateId, scope) {
     return;
   }
 
+  // Check if already installed
+  if (isHookTemplateInstalled(templateId)) {
+    showRefreshToast('Hook already installed', 'info');
+    return;
+  }
+
   const hookData = {
     command: template.command,
     args: template.args
@@ -303,11 +520,37 @@ async function uninstallHookTemplate(templateId) {
   const template = HOOK_TEMPLATES[templateId];
   if (!template) return;
 
+  // Extract unique identifier from template args for matching
+  // Template args format: ['-c', 'actual command...']
+  const templateArgs = template.args || [];
+  const templateFullCmd = templateArgs.length > 0 ? templateArgs.join(' ') : '';
+
+  // Define unique patterns for each template type
+  const uniquePatterns = {
+    'session-context': 'hook session-context',
+    'codexlens-update': 'codexlens update',
+    'ccw-notify': 'api/hook',
+    'log-tool': 'tool-usage.log',
+    'lint-check': 'eslint',
+    'git-add': 'git add',
+    'memory-file-read': 'memory track',
+    'memory-file-write': 'memory track',
+    'memory-prompt-track': 'memory track'
+  };
+
+  const uniquePattern = uniquePatterns[templateId] || template.command;
+
+  // Helper to check if a hook matches the template
+  const matchesTemplate = (h) => {
+    const hookCmd = h.hooks?.[0]?.command || h.command || '';
+    return hookCmd.includes(uniquePattern);
+  };
+
   // Find and remove from project hooks
   const projectHooks = hookConfig.project?.hooks?.[template.event];
   if (projectHooks) {
     const hookList = Array.isArray(projectHooks) ? projectHooks : [projectHooks];
-    const index = hookList.findIndex(h => h.command === template.command);
+    const index = hookList.findIndex(matchesTemplate);
     if (index !== -1) {
       await removeHook('project', template.event, index);
       return;
@@ -318,12 +561,14 @@ async function uninstallHookTemplate(templateId) {
   const globalHooks = hookConfig.global?.hooks?.[template.event];
   if (globalHooks) {
     const hookList = Array.isArray(globalHooks) ? globalHooks : [globalHooks];
-    const index = hookList.findIndex(h => h.command === template.command);
+    const index = hookList.findIndex(matchesTemplate);
     if (index !== -1) {
       await removeHook('global', template.event, index);
       return;
     }
   }
+
+  showRefreshToast('Hook not found', 'error');
 }
 
 function attachHookEventListeners() {
@@ -340,13 +585,36 @@ function attachHookEventListeners() {
       const hook = hookList[index];
 
       if (hook) {
+        // Support both Claude Code format (hooks[0].command) and legacy format (command + args)
+        let command = '';
+        let args = [];
+
+        if (hook.hooks && hook.hooks[0]) {
+          // Claude Code format: { hooks: [{ type: "command", command: "bash -c '...'" }] }
+          const fullCommand = hook.hooks[0].command || '';
+          // Try to split command and args for bash -c commands
+          const bashMatch = fullCommand.match(/^(bash|sh|cmd)\s+(-c)\s+(.+)$/s);
+          if (bashMatch) {
+            command = bashMatch[1];
+            args = [bashMatch[2], bashMatch[3]];
+          } else {
+            // For other commands, put the whole thing as command
+            command = fullCommand;
+            args = [];
+          }
+        } else {
+          // Legacy format: { command: "bash", args: ["-c", "..."] }
+          command = hook.command || '';
+          args = hook.args || [];
+        }
+
         openHookCreateModal({
           scope: scope,
           event: event,
           index: index,
           matcher: hook.matcher || '',
-          command: hook.command,
-          args: hook.args || []
+          command: command,
+          args: args
         });
       }
     });
@@ -360,7 +628,7 @@ function attachHookEventListeners() {
       const event = button.dataset.event;
       const index = parseInt(button.dataset.index);
 
-      if (confirm(`Remove this ${event} hook?`)) {
+      if (confirm(t('hook.deleteConfirm', { event: event }))) {
         await removeHook(scope, event, index);
       }
     });