feat(#17): implement Kanban board view

- Drag-and-drop with @dnd-kit
- Four status columns (Not Started, In Progress, Paused, Completed)
- Task cards with priority badges and due dates
- PDA-friendly design (calm colors, gentle language)
- 70 tests (87% coverage)
- Demo page at /demo/kanban

apps/web/src/components/kanban/task-card.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import type { Task } from "@mosaic/shared";
+import { TaskPriority } from "@mosaic/shared";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Calendar, Flag } from "lucide-react";
+import { format } from "date-fns";
+
+interface TaskCardProps {
+  task: Task;
+}
+
+const priorityConfig = {
+  [TaskPriority.HIGH]: {
+    label: "High",
+    className: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+  },
+  [TaskPriority.MEDIUM]: {
+    label: "Medium",
+    className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  },
+  [TaskPriority.LOW]: {
+    label: "Low",
+    className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
+  },
+};
+
+export function TaskCard({ task }: TaskCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: task.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const isOverdue =
+    task.dueDate &&
+    new Date(task.dueDate) < new Date() &&
+    task.status !== "COMPLETED";
+
+  const isDueSoon =
+    task.dueDate &&
+    !isOverdue &&
+    new Date(task.dueDate).getTime() - new Date().getTime() <
+      3 * 24 * 60 * 60 * 1000; // 3 days
+
+  const priorityInfo = priorityConfig[task.priority];
+
+  return (
+    <article
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={`
+        bg-white dark:bg-gray-800 
+        rounded-lg shadow-sm border border-gray-200 dark:border-gray-700
+        p-4 space-y-3
+        cursor-grab active:cursor-grabbing
+        transition-all duration-200
+        hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600
+        ${isDragging ? "opacity-50" : "opacity-100"}
+      `}
+    >
+      {/* Task Title */}
+      <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2">
+        {task.title}
+      </h4>
+
+      {/* Task Metadata */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {/* Priority Badge */}
+        <span
+          data-priority={task.priority}
+          className={`
+            inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium
+            ${priorityInfo.className}
+          `}
+        >
+          <Flag className="w-3 h-3" aria-hidden="true" />
+          {priorityInfo.label}
+        </span>
+
+        {/* Due Date */}
+        {task.dueDate && (
+          <span
+            className={`
+              inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs
+              ${
+                isOverdue
+                  ? "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                  : isDueSoon
+                    ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+                    : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+              }
+            `}
+          >
+            <Calendar className="w-3 h-3" aria-label="Due date" />
+            {format(new Date(task.dueDate), "MMM d")}
+          </span>
+        )}
+      </div>
+    </article>
+  );
+}