feat: add SpecDialog component for editing spec frontmatter

- Implement SpecDialog for managing spec details including title, read mode, priority, and keywords.
- Add validation and keyword management functionality.
- Integrate SpecDialog into SpecsSettingsPage for editing specs.

feat: create index file for specs components

- Export SpecCard, SpecDialog, and related types from a new index file for better organization.

feat: implement SpecsSettingsPage for managing specs and hooks

- Create main settings page with tabs for Project Specs, Personal Specs, Hooks, Injection, and Settings.
- Integrate SpecDialog and HookDialog for editing specs and hooks.
- Add search functionality and mock data for specs and hooks.

feat: add spec management API routes

- Implement API endpoints for listing specs, getting spec details, updating frontmatter, rebuilding indices, and initializing the spec system.
- Handle errors and responses appropriately for each endpoint.

ccw/frontend/src/components/shared/IssueCard.tsx

@@ -16,6 +16,7 @@ import {
   CheckCircle,
   Clock,
   XCircle,
+  Loader2,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Card } from '@/components/ui/Card';
@@ -61,20 +62,26 @@ const priorityLabelKeys: Record<Issue['priority'], string> = {
 
 // Status icon and color configuration (without labels for i18n)
 const statusVariantConfig: Record<Issue['status'], { icon: React.ElementType; color: string }> = {
-  open: { icon: AlertCircle, color: 'info' },
-  in_progress: { icon: Clock, color: 'warning' },
-  resolved: { icon: CheckCircle, color: 'success' },
-  closed: { icon: XCircle, color: 'muted' },
+  registered: { icon: AlertCircle, color: 'info' },
+  planning: { icon: Clock, color: 'warning' },
+  planned: { icon: Clock, color: 'warning' },
+  queued: { icon: Clock, color: 'warning' },
+  executing: { icon: Loader2, color: 'warning' },
   completed: { icon: CheckCircle, color: 'success' },
+  failed: { icon: XCircle, color: 'destructive' },
+  paused: { icon: Clock, color: 'muted' },
 };
 
 // Status label keys for i18n
 const statusLabelKeys: Record<Issue['status'], string> = {
-  open: 'issues.status.open',
-  in_progress: 'issues.status.inProgress',
-  resolved: 'issues.status.resolved',
-  closed: 'issues.status.closed',
+  registered: 'issues.status.registered',
+  planning: 'issues.status.planning',
+  planned: 'issues.status.planned',
+  queued: 'issues.status.queued',
+  executing: 'issues.status.executing',
   completed: 'issues.status.completed',
+  failed: 'issues.status.failed',
+  paused: 'issues.status.paused',
 };
 
 // ========== Priority Badge ==========
@@ -228,11 +235,11 @@ export function IssueCard({
                 <Edit className="w-4 h-4 mr-2" />
                 {formatMessage({ id: 'issues.actions.edit' })}
               </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'in_progress')}>
+              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'executing')}>
                 <Clock className="w-4 h-4 mr-2" />
                 {formatMessage({ id: 'issues.actions.startProgress' })}
               </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'resolved')}>
+              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'completed')}>
                 <CheckCircle className="w-4 h-4 mr-2" />
                 {formatMessage({ id: 'issues.actions.markResolved' })}
               </DropdownMenuItem>