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

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/features/issues/components/IssueTable.tsx

@@ -0,0 +1,265 @@
+'use client';
+
+/**
+ * IssueTable Component
+ *
+ * Sortable table displaying issues with selection support.
+ *
+ * @module features/issues/components/IssueTable
+ */
+
+import { ChevronUp, ChevronDown, MoreVertical, Bot, User, CircleDot } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Card } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type { IssueSummary, IssueSort, IssueSortField, IssueSortDirection } from '../types';
+
+/**
+ * Convert our sort direction to ARIA sort value
+ */
+function toAriaSortValue(
+  field: IssueSortField,
+  currentField: IssueSortField,
+  direction: IssueSortDirection
+): 'ascending' | 'descending' | 'none' | undefined {
+  if (field !== currentField) return undefined;
+  return direction === 'asc' ? 'ascending' : 'descending';
+}
+
+import { StatusBadge } from './StatusBadge';
+import { PriorityBadge } from './PriorityBadge';
+import { SyncStatusIndicator } from './SyncStatusIndicator';
+
+interface IssueTableProps {
+  issues: IssueSummary[];
+  selectedIssues: string[];
+  onSelectionChange: (ids: string[]) => void;
+  onIssueClick: (id: string) => void;
+  sort: IssueSort;
+  onSortChange: (sort: IssueSort) => void;
+  className?: string;
+}
+
+export function IssueTable({
+  issues,
+  selectedIssues,
+  onSelectionChange,
+  onIssueClick,
+  sort,
+  onSortChange,
+  className,
+}: IssueTableProps) {
+  const handleSelectAll = () => {
+    if (selectedIssues.length === issues.length) {
+      onSelectionChange([]);
+    } else {
+      onSelectionChange(issues.map((i) => i.id));
+    }
+  };
+
+  const handleSelectIssue = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (selectedIssues.includes(id)) {
+      onSelectionChange(selectedIssues.filter((i) => i !== id));
+    } else {
+      onSelectionChange([...selectedIssues, id]);
+    }
+  };
+
+  const handleSort = (field: IssueSortField) => {
+    if (sort.field === field) {
+      onSortChange({
+        field,
+        direction: sort.direction === 'asc' ? 'desc' : 'asc',
+      });
+    } else {
+      onSortChange({ field, direction: 'desc' });
+    }
+  };
+
+  const SortIcon = ({ field }: { field: IssueSortField }) => {
+    if (sort.field !== field) return null;
+    return sort.direction === 'asc' ? (
+      <ChevronUp className="ml-1 inline h-4 w-4" aria-hidden="true" />
+    ) : (
+      <ChevronDown className="ml-1 inline h-4 w-4" aria-hidden="true" />
+    );
+  };
+
+  const allSelected = selectedIssues.length === issues.length && issues.length > 0;
+  const someSelected = selectedIssues.length > 0 && !allSelected;
+
+  return (
+    <Card className={className}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12">
+              <Checkbox
+                checked={allSelected}
+                ref={(el) => {
+                  if (el) {
+                    (el as unknown as HTMLInputElement).indeterminate = someSelected;
+                  }
+                }}
+                onCheckedChange={handleSelectAll}
+                aria-label={allSelected ? 'Deselect all issues' : 'Select all issues'}
+              />
+            </TableHead>
+            <TableHead
+              className="w-20 cursor-pointer select-none"
+              onClick={() => handleSort('number')}
+              role="button"
+              tabIndex={0}
+              aria-sort={toAriaSortValue('number', sort.field, sort.direction)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSort('number')}
+            >
+              #
+              <SortIcon field="number" />
+            </TableHead>
+            <TableHead>Title</TableHead>
+            <TableHead className="w-32">Status</TableHead>
+            <TableHead
+              className="w-24 cursor-pointer select-none"
+              onClick={() => handleSort('priority')}
+              role="button"
+              tabIndex={0}
+              aria-sort={toAriaSortValue('priority', sort.field, sort.direction)}
+              onKeyDown={(e) => e.key === 'Enter' && handleSort('priority')}
+            >
+              Priority
+              <SortIcon field="priority" />
+            </TableHead>
+            <TableHead className="w-40">Assignee</TableHead>
+            <TableHead className="w-28">Sprint</TableHead>
+            <TableHead className="w-10">Sync</TableHead>
+            <TableHead className="w-10">
+              <span className="sr-only">Actions</span>
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {issues.map((issue) => (
+            <TableRow
+              key={issue.id}
+              className="cursor-pointer"
+              onClick={() => onIssueClick(issue.id)}
+              data-testid={`issue-row-${issue.id}`}
+            >
+              <TableCell onClick={(e) => handleSelectIssue(issue.id, e)}>
+                <Checkbox
+                  checked={selectedIssues.includes(issue.id)}
+                  onCheckedChange={() => {}}
+                  aria-label={`Select issue ${issue.number}`}
+                />
+              </TableCell>
+              <TableCell className="font-mono text-sm text-muted-foreground">
+                {issue.number}
+              </TableCell>
+              <TableCell>
+                <div className="space-y-1">
+                  <p className="font-medium">{issue.title}</p>
+                  <div className="flex flex-wrap gap-1">
+                    {issue.labels.slice(0, 3).map((label) => (
+                      <Badge key={label} variant="secondary" className="text-xs">
+                        {label}
+                      </Badge>
+                    ))}
+                    {issue.labels.length > 3 && (
+                      <Badge variant="outline" className="text-xs">
+                        +{issue.labels.length - 3}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <StatusBadge status={issue.status} />
+              </TableCell>
+              <TableCell>
+                <PriorityBadge priority={issue.priority} />
+              </TableCell>
+              <TableCell>
+                {issue.assignee ? (
+                  <div className="flex items-center gap-2">
+                    <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+                      {issue.assignee.type === 'agent' ? (
+                        <Bot className="h-3 w-3" aria-hidden="true" />
+                      ) : (
+                        <User className="h-3 w-3" aria-hidden="true" />
+                      )}
+                    </div>
+                    <span className="text-sm">{issue.assignee.name}</span>
+                  </div>
+                ) : (
+                  <span className="text-sm text-muted-foreground">Unassigned</span>
+                )}
+              </TableCell>
+              <TableCell>
+                {issue.sprint ? (
+                  <Badge variant="outline" className="text-xs">
+                    {issue.sprint}
+                  </Badge>
+                ) : (
+                  <span className="text-xs text-muted-foreground">Backlog</span>
+                )}
+              </TableCell>
+              <TableCell>
+                <SyncStatusIndicator status={issue.sync_status} />
+              </TableCell>
+              <TableCell onClick={(e) => e.stopPropagation()}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-8 w-8"
+                      aria-label={`Actions for issue ${issue.number}`}
+                    >
+                      <MoreVertical className="h-4 w-4" aria-hidden="true" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => onIssueClick(issue.id)}>
+                      View Details
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>Edit</DropdownMenuItem>
+                    <DropdownMenuItem>Assign</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>Sync with Tracker</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {issues.length === 0 && (
+        <div className="py-12 text-center">
+          <CircleDot className="mx-auto h-12 w-12 text-muted-foreground" aria-hidden="true" />
+          <h3 className="mt-4 font-semibold">No issues found</h3>
+          <p className="text-muted-foreground">Try adjusting your search or filters</p>
+        </div>
+      )}
+    </Card>
+  );
+}