feat: Add Role Analysis Reviewer Agent and validation template

- Introduced Role Analysis Reviewer Agent to validate role analysis outputs against templates and quality standards.
- Created a detailed validation ruleset for the system-architect role, including mandatory and recommended sections.
- Added JSON validation report structure for output.
- Implemented execution command for validation process.

test: Add UX tests for HookCard component

- Created comprehensive tests for HookCard component, focusing on delete confirmation UX pattern.
- Verified confirmation dialog appearance, deletion functionality, and button interactions.
- Ensured proper handling of state updates and visual feedback for enabled/disabled status.

test: Add UX tests for ThemeSelector component

- Developed tests for ThemeSelector component, emphasizing delete confirmation UX pattern.
- Validated confirmation dialog display, deletion actions, and toast notifications for undo functionality.
- Ensured proper management of theme slots and state updates.

feat: Implement useDebounce hook

- Added useDebounce hook to delay expensive computations or API calls, enhancing performance.

feat: Create System Architect Analysis Template

- Developed a comprehensive template for system architect role analysis, covering required sections such as architecture overview, data model, state machine, error handling strategy, observability requirements, configuration model, and boundary scenarios.
- Included examples and templates for each section to guide users in producing SPEC.md-level precision modeling.

ccw/frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,29 @@
+// ========================================
+// useDebounce Hook
+// ========================================
+// Debounces a value to delay expensive computations or API calls.
+
+import { useState, useEffect } from 'react';
+
+/**
+ * Debounces a value.
+ *
+ * @param value The value to debounce.
+ * @param delay The debounce delay in milliseconds.
+ * @returns The debounced value.
+ */
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

ccw/frontend/src/hooks/useDeepWiki.ts

@@ -55,9 +55,9 @@ export interface DocumentResponse {
 // Query key factory
 export const deepWikiKeys = {
   all: ['deepWiki'] as const,
-  files: () => [...deepWikiKeys.all, 'files'] as const,
+  files: (projectPath: string) => [...deepWikiKeys.all, 'files', projectPath] as const,
   doc: (path: string) => [...deepWikiKeys.all, 'doc', path] as const,
-  stats: () => [...deepWikiKeys.all, 'stats'] as const,
+  stats: (projectPath: string) => [...deepWikiKeys.all, 'stats', projectPath] as const,
   search: (query: string) => [...deepWikiKeys.all, 'search', query] as const,
 };
 
@@ -134,7 +134,7 @@ export function useDeepWikiFiles(options: UseDeepWikiFilesOptions = {}): UseDeep
   const projectPath = useWorkflowStore(selectProjectPath);
 
   const query = useQuery({
-    queryKey: deepWikiKeys.files(),
+    queryKey: deepWikiKeys.files(projectPath ?? ''),
     queryFn: fetchDeepWikiFiles,
     staleTime,
     enabled: enabled && !!projectPath,
@@ -212,12 +212,13 @@ export interface UseDeepWikiStatsReturn {
  */
 export function useDeepWikiStats(options: UseDeepWikiStatsOptions = {}): UseDeepWikiStatsReturn {
   const { staleTime = STALE_TIME, enabled = true } = options;
+  const projectPath = useWorkflowStore(selectProjectPath);
 
   const query = useQuery({
-    queryKey: deepWikiKeys.stats(),
+    queryKey: deepWikiKeys.stats(projectPath ?? ''),
     queryFn: fetchDeepWikiStats,
     staleTime,
-    enabled,
+    enabled: enabled && !!projectPath,
     retry: 2,
   });