feat(frontend): implement main dashboard page (#48)

Implement the main dashboard / projects list page for Syndarix as the landing
page after login. The implementation includes:

Dashboard Components:
- QuickStats: Overview cards showing active projects, agents, issues, approvals
- ProjectsSection: Grid/list view with filtering and sorting controls
- ProjectCardGrid: Rich project cards for grid view
- ProjectRowList: Compact rows for list view
- ActivityFeed: Real-time activity sidebar with connection status
- PerformanceCard: Performance metrics display
- EmptyState: Call-to-action for new users
- ProjectStatusBadge: Status indicator with icons
- ComplexityIndicator: Visual complexity dots
- ProgressBar: Accessible progress bar component

Features:
- Projects grid/list view with view mode toggle
- Filter by status (all, active, paused, completed, archived)
- Sort by recent, name, progress, or issues
- Quick stats overview with counts
- Real-time activity feed sidebar with live/reconnecting status
- Performance metrics card
- Create project button linking to wizard
- Responsive layout for mobile/desktop
- Loading skeleton states
- Empty state for new users

API Integration:
- useProjects hook for fetching projects (mock data until backend ready)
- useDashboardStats hook for statistics
- TanStack Query for caching and data fetching

Testing:
- 37 unit tests covering all dashboard components
- E2E test suite for dashboard functionality
- Accessibility tests (keyboard nav, aria attributes, heading hierarchy)

Technical:
- TypeScript strict mode compliance
- ESLint passing
- WCAG AA accessibility compliance
- Mobile-first responsive design
- Dark mode support via semantic tokens
- Follows design system guidelines

frontend/src/components/projects/wizard/steps/ClientModeStep.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * Step 3: Client Mode Selection
+ *
+ * Allows users to choose how they want to interact with Syndarix agents.
+ * Skipped for script complexity projects.
+ */
+
+import { Check, CheckCircle2 } from 'lucide-react';
+
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { SelectableCard } from '../SelectableCard';
+import { clientModeOptions } from '../constants';
+import type { WizardState, ClientMode } from '../types';
+
+interface ClientModeStepProps {
+  state: WizardState;
+  updateState: (updates: Partial<WizardState>) => void;
+}
+
+export function ClientModeStep({ state, updateState }: ClientModeStepProps) {
+  const handleSelect = (clientMode: ClientMode) => {
+    updateState({ clientMode });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-2xl font-bold">How Would You Like to Work?</h2>
+        <p className="mt-1 text-muted-foreground">
+          Choose how you want to interact with Syndarix agents.
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2" role="radiogroup" aria-label="Client interaction mode options">
+        {clientModeOptions.map((option) => {
+          const Icon = option.icon;
+          const isSelected = state.clientMode === option.id;
+
+          return (
+            <SelectableCard
+              key={option.id}
+              selected={isSelected}
+              onClick={() => handleSelect(option.id)}
+              className="h-full"
+              aria-label={`${option.label}: ${option.description}`}
+            >
+              <div className="flex h-full flex-col space-y-4">
+                <div className="flex items-start justify-between">
+                  <div
+                    className={cn(
+                      'flex h-12 w-12 items-center justify-center rounded-lg',
+                      isSelected ? 'bg-primary text-primary-foreground' : 'bg-muted'
+                    )}
+                  >
+                    <Icon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  {isSelected && (
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                      <Check className="h-4 w-4" aria-hidden="true" />
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold">{option.label}</h3>
+                  <p className="mt-1 text-muted-foreground">{option.description}</p>
+                </div>
+
+                <Separator />
+
+                <ul className="flex-1 space-y-2">
+                  {option.details.map((detail) => (
+                    <li key={detail} className="flex items-start gap-2 text-sm">
+                      <CheckCircle2
+                        className={cn(
+                          'mt-0.5 h-4 w-4 shrink-0',
+                          isSelected ? 'text-primary' : 'text-muted-foreground'
+                        )}
+                        aria-hidden="true"
+                      />
+                      <span className="text-muted-foreground">{detail}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </SelectableCard>
+          );
+        })}
+      </div>
+    </div>
+  );
+}