feat(ui): add task management UI with list, detail, and create pages

Implements Task 19: Task List + Task Detail + Status Transitions UI

New components:
- useTasks hook: TanStack Query hooks (useTasks, useTask, useCreateTask, useUpdateTask)
- Task list page: shadcn Table with status filter, pagination, status badges
- Task detail page: Full task info with valid status transition buttons
- New task form: Create task with title, description, assigneeId, dueDate

Key features:
- Status transitions match backend logic: Open→Assigned→InProgress→Review→Done
- Review status allows back-transition to InProgress (only bidirectional)
- Only valid next states shown as buttons (VALID_TRANSITIONS map)
- Status badge colors: Open=gray, Assigned=blue, InProgress=yellow, Review=red, Done=green
- TanStack Query with automatic cache invalidation on mutations
- Next.js 15+ async params pattern (use() hook)

TDD:
- 3 task list tests (renders rows, status badges, new task button)
- 3 task detail tests (Open→Assigned, InProgress→Review, Review→Done+InProgress)

All tests pass (31/31). Build succeeds.

frontend/src/app/(protected)/tasks/[id]/page.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { use } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useTask, useUpdateTask } from '@/hooks/useTasks';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+const VALID_TRANSITIONS: Record<string, string[]> = {
+  Open: ['Assigned'],
+  Assigned: ['InProgress'],
+  InProgress: ['Review'],
+  Review: ['Done', 'InProgress'],
+};
+
+const statusColors: Record<string, string> = {
+  Open: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+  Assigned: 'bg-primary text-primary-foreground hover:bg-primary/80',
+  InProgress: 'bg-yellow-500 text-black hover:bg-yellow-500/80',
+  Review: 'bg-destructive text-destructive-foreground hover:bg-destructive/80',
+  Done: 'bg-green-500 text-white hover:bg-green-500/80',
+};
+
+export default function TaskDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const resolvedParams = use(params);
+  const router = useRouter();
+  const { data: task, isLoading, error } = useTask(resolvedParams.id);
+  const { mutate: updateTask, isPending } = useUpdateTask();
+
+  if (isLoading) return <div className="p-8">Loading task...</div>;
+  if (error || !task) return <div className="p-8 text-red-500">Failed to load task.</div>;
+
+  const validTransitions = VALID_TRANSITIONS[task.status] || [];
+
+  const handleTransition = (newStatus: string) => {
+    updateTask({ id: task.id, data: { status: newStatus } });
+  };
+
+  const getTransitionLabel = (status: string, newStatus: string) => {
+    if (status === 'Review' && newStatus === 'InProgress') return 'Back to InProgress';
+    if (newStatus === 'Done') return 'Mark as Done';
+    return `Move to ${newStatus}`;
+  };
+
+  return (
+    <div className="flex-1 space-y-4 p-8 pt-6">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <Button variant="ghost" size="sm" asChild className="mb-2 -ml-3">
+            <Link href="/tasks">← Back to Tasks</Link>
+          </Button>
+          <h2 className="text-3xl font-bold tracking-tight">Task Details</h2>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle className="text-2xl">{task.title}</CardTitle>
+              <CardDescription className="mt-2 text-base">
+                {task.description || 'No description provided.'}
+              </CardDescription>
+            </div>
+            <Badge className={`text-sm px-3 py-1 ${statusColors[task.status] || 'bg-secondary'}`}>
+              {task.status}
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Assignee</p>
+              <p className="mt-1">{task.assigneeId || 'Unassigned'}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Created By</p>
+              <p className="mt-1">{task.createdById}</p>
+            </div>
+            <div>
+              <p className="text-sm font-medium text-muted-foreground">Created At</p>
+              <p className="mt-1">{new Date(task.createdAt).toLocaleString()}</p>
+            </div>
+            {task.dueDate && (
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">Due Date</p>
+                <p className="mt-1">{new Date(task.dueDate).toLocaleDateString()}</p>
+              </div>
+            )}
+          </div>
+
+          {validTransitions.length > 0 && (
+            <div className="pt-6 border-t">
+              <h3 className="text-lg font-medium mb-4">Actions</h3>
+              <div className="flex flex-wrap gap-2">
+                {validTransitions.map((nextStatus) => (
+                  <Button
+                    key={nextStatus}
+                    onClick={() => handleTransition(nextStatus)}
+                    disabled={isPending}
+                    variant={nextStatus === 'Done' ? 'default' : 'outline'}
+                    className={nextStatus === 'Done' ? 'bg-green-600 hover:bg-green-700' : ''}
+                  >
+                    {isPending ? 'Updating...' : getTransitionLabel(task.status, nextStatus)}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}