feat(hook): add display name to template ID mapping and improve translation fallback logic

ccw/frontend/src/components/hook/HookCard.tsx

@@ -99,23 +99,57 @@ function getTriggerVariant(trigger: HookTriggerType): 'default' | 'secondary' |
 // ========== Component ==========
 
 // ========== Hook Name Translation ==========
+// Mapping from display name to template ID for translation lookup
+const DISPLAY_NAME_TO_TEMPLATE_ID: Record<string, string> = {
+  // Notification hooks
+  'Session Start Notify': 'session-start-notify',
+  'Session State Watch': 'session-state-watch',
+  'Stop Notify': 'stop-notify',
+  // Automation hooks
+  'Auto Format on Write': 'auto-format-on-write',
+  'Auto Lint on Write': 'auto-lint-on-write',
+  'Block Sensitive Files': 'block-sensitive-files',
+  'Git Auto Stage': 'git-auto-stage',
+  // Indexing hooks
+  'Post Edit Index': 'post-edit-index',
+  'Session End Summary': 'session-end-summary',
+  'Project State Inject': 'project-state-inject',
+  // Memory V2 hooks
+  'Memory V2 Extract': 'memory-v2-extract',
+  'Memory V2 Auto Consolidate': 'memory-v2-auto-consolidate',
+  'Memory Sync Dashboard': 'memory-sync-dashboard',
+};
 
 /**
  * Get translated hook name if available
  * Falls back to original name if no translation exists
  */
 function getHookDisplayName(name: string, formatMessage: (msg: { id: string }) => string): string {
+  // First try direct translation with the name (for template IDs)
   const translationKey = `cliHooks.templates.templates.${name}.name`;
-  // Try to get translation, fallback to original name
   try {
     const translated = formatMessage({ id: translationKey });
-    // If translation returns the key itself, no translation exists
     if (translated && !translated.includes('cliHooks.templates.templates')) {
       return translated;
     }
   } catch {
-    // Translation not found
+    // Direct translation not found
   }
+
+  // Try mapping display name to template ID
+  const templateId = DISPLAY_NAME_TO_TEMPLATE_ID[name];
+  if (templateId) {
+    const mappedKey = `cliHooks.templates.templates.${templateId}.name`;
+    try {
+      const translated = formatMessage({ id: mappedKey });
+      if (translated && !translated.includes('cliHooks.templates.templates')) {
+        return translated;
+      }
+    } catch {
+      // Mapping found but no translation
+    }
+  }
+
   return name;
 }
 
@@ -166,7 +200,7 @@ export function HookCard({
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 flex-wrap">
                 <span className="text-sm font-medium text-foreground truncate">
-                  {hook.name}
+                  {displayName}
                 </span>
                 <Badge
                   variant={getTriggerVariant(hook.trigger)}

ccw/frontend/src/hooks/useLoops.ts

@@ -86,7 +86,7 @@ export function useLoops(options: UseLoopsOptions = {}): UseLoopsReturn {
     return loops;
   })();
 
-  // Group by status for Kanban
+  // Group by status for Kanban (use filteredLoops to respect search filter)
   const loopsByStatus: Record<Loop['status'], Loop[]> = {
     created: [],
     running: [],
@@ -95,7 +95,7 @@ export function useLoops(options: UseLoopsOptions = {}): UseLoopsReturn {
     failed: [],
   };
 
-  for (const loop of allLoops) {
+  for (const loop of filteredLoops) {
     loopsByStatus[loop.status].push(loop);
   }