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/components/terminal-dashboard/DashboardToolbar.tsx

@@ -256,6 +256,7 @@ export function DashboardToolbar({ activePanel, onTogglePanel, isFileSidebarOpen
           isActive={activePanel === 'scheduler'}
           onClick={() => onTogglePanel('scheduler')}
           dot={isSchedulerActive}
+          loading={isSchedulerActive}
         />
         <ToolbarButton
           icon={FolderOpen}
@@ -331,6 +332,7 @@ function ToolbarButton({
   onClick,
   badge,
   dot,
+  loading,
 }: {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
@@ -338,6 +340,7 @@ function ToolbarButton({
   onClick: () => void;
   badge?: number;
   dot?: boolean;
+  loading?: boolean;
 }) {
   return (
     <button
@@ -349,7 +352,11 @@ function ToolbarButton({
           : 'text-muted-foreground hover:text-foreground hover:bg-muted'
       )}
     >
-      <Icon className="w-3.5 h-3.5" />
+      {loading ? (
+        <Loader2 className="w-3.5 h-3.5 animate-spin" />
+      ) : (
+        <Icon className="w-3.5 h-3.5" />
+      )}
       <span>{label}</span>
       {badge !== undefined && badge > 0 && (
         <Badge variant="secondary" className="text-[10px] px-1.5 py-0 ml-0.5">
@@ -357,7 +364,12 @@ function ToolbarButton({
         </Badge>
       )}
       {dot && (
-        <span className="ml-0.5 w-2 h-2 rounded-full bg-primary shrink-0" />
+        <span
+          className={cn(
+            'ml-0.5 w-2 h-2 rounded-full bg-primary shrink-0',
+            loading && 'animate-pulse'
+          )}
+        />
       )}
     </button>
   );