@knotpad/app 0.1.0

package/components/tasks/task-list-types.ts

@@ -0,0 +1,20 @@
+export type Task = {
+  id: string;
+  title: string;
+  status: string;
+  priority?: string | null;
+  startDate: string | Date | null;
+  dueDate: string | Date | null;
+  assigneeType: "HUMAN" | "AGENT";
+  claimedBy: string | null;
+  claimedByAlias: string | null;
+  assignee: { id: string; name: string | null; email: string | null; image: string | null } | null;
+  note: { id: string; title: string; folder?: { id: string; name: string } | null };
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+};
+
+export type SortField = "title" | "status" | "dueDate" | "priority" | "assignee" | "note" | "updatedAt";
+export type SortDirection = "asc" | "desc";
+
+export type Props = { tasks: Task[]; groupBy?: "status" | "note" };

package/components/tasks/task-list.test.tsx

@@ -0,0 +1,175 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TaskList } from "@/components/tasks/task-list";
+import type { Task } from "@/components/tasks/task-list-types";
+
+const pushMock = vi.fn();
+const refreshMock = vi.fn();
+let pathname = "/list";
+let searchParams = new URLSearchParams();
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: pushMock, refresh: refreshMock }),
+  usePathname: () => pathname,
+  useSearchParams: () => searchParams,
+}));
+
+vi.mock("@/components/kanban/kanban-status-context", () => ({
+  useKanbanStatuses: () => [
+    { key: "TODO", label: "To Do", isVisible: true },
+    { key: "DONE", label: "Done", isVisible: true },
+  ],
+}));
+
+vi.mock("@/components/tasks/task-table-row", () => ({
+  TaskTableRow: ({
+    task,
+    detailHref,
+    isSelected,
+    onSelect,
+  }: {
+    task: Task;
+    detailHref?: string;
+    isSelected: boolean;
+    onSelect: () => void;
+  }) => (
+    <tr data-testid="task-row" data-selected={isSelected ? "true" : "false"}>
+      <td>
+        <input
+          aria-label={`Select ${task.title}`}
+          type="checkbox"
+          checked={isSelected}
+          onChange={onSelect}
+        />
+      </td>
+      <td>
+        {detailHref ? <a href={detailHref}>{task.title}</a> : task.title}
+      </td>
+    </tr>
+  ),
+}));
+
+vi.mock("@/components/tasks/task-row", () => ({
+  TaskRow: () => <div data-testid="task-row" />,
+}));
+
+function makeTask(overrides: Partial<Task>): Task {
+  return {
+    id: overrides.id ?? "t1",
+    title: overrides.title ?? "Task",
+    status: overrides.status ?? "TODO",
+    priority: overrides.priority ?? "medium",
+    startDate: overrides.startDate ?? null,
+    dueDate: overrides.dueDate ?? null,
+    assigneeType: overrides.assigneeType ?? "HUMAN",
+    claimedBy: overrides.claimedBy ?? null,
+    claimedByAlias: overrides.claimedByAlias ?? null,
+    assignee: overrides.assignee ?? null,
+    note: overrides.note ?? { id: "n1", title: "Launch" },
+    createdAt: overrides.createdAt,
+    updatedAt: overrides.updatedAt,
+  };
+}
+
+beforeEach(() => {
+  pushMock.mockReset();
+  refreshMock.mockReset();
+  pathname = "/list";
+  searchParams = new URLSearchParams();
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("TaskList", () => {
+  it("shows a clearer bulk-selection bar after selecting a task", async () => {
+    const user = userEvent.setup();
+
+    render(<TaskList tasks={[makeTask({ id: "t1", title: "Alpha" })]} />);
+
+    await user.click(screen.getByLabelText("Select Alpha"));
+
+    expect(screen.getByText("1 task selected")).toBeInTheDocument();
+  });
+
+  it("applies the overdue saved view preset", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <TaskList
+        tasks={[
+          makeTask({ id: "t1", title: "Overdue task", dueDate: "2026-06-01T00:00:00.000Z" }),
+          makeTask({ id: "t2", title: "Fresh task", dueDate: "2026-06-20T00:00:00.000Z" }),
+        ]}
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Overdue" }));
+
+    expect(screen.getAllByTestId("task-row")).toHaveLength(1);
+    expect(screen.getByText("Overdue task")).toBeInTheDocument();
+    expect(screen.queryByText("Fresh task")).not.toBeInTheDocument();
+  });
+
+  it("loads saved sort preferences on first render", () => {
+    window.localStorage.setItem("brief:list-sort-field", JSON.stringify("updatedAt"));
+    window.localStorage.setItem("brief:list-sort-direction", JSON.stringify("desc"));
+
+    render(
+      <TaskList
+        tasks={[
+          makeTask({ id: "t1", title: "Older task", updatedAt: "2026-06-10T10:00:00.000Z" }),
+          makeTask({ id: "t2", title: "Newer task", updatedAt: "2026-06-12T10:00:00.000Z" }),
+        ]}
+      />
+    );
+
+    expect(screen.getAllByTestId("task-row").map((row) => row.textContent)).toEqual([
+      "Newer task",
+      "Older task",
+    ]);
+  });
+
+  it("persists sort preferences after a user changes the table sort", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <TaskList
+        tasks={[
+          makeTask({ id: "t1", title: "Bravo" }),
+          makeTask({ id: "t2", title: "Alpha" }),
+        ]}
+      />
+    );
+
+    await user.click(screen.getByRole("columnheader", { name: /title/i }));
+    await user.click(screen.getByRole("columnheader", { name: /title/i }));
+
+    expect(window.localStorage.getItem("brief:list-sort-field")).toBe(JSON.stringify("title"));
+    expect(window.localStorage.getItem("brief:list-sort-direction")).toBe(JSON.stringify("desc"));
+  });
+
+  it("shows filtered empty-state guidance when no tasks match the current view", () => {
+    searchParams = new URLSearchParams("status=DONE");
+
+    render(<TaskList tasks={[]} />);
+
+    expect(screen.getByText("No tasks match this view.")).toBeInTheDocument();
+    expect(
+      screen.getByText("Clear one or more filters, or create tasks from a note.")
+    ).toBeInTheDocument();
+  });
+
+  it("passes a task detail link for the title", () => {
+    render(<TaskList tasks={[makeTask({ id: "t1", title: "Alpha" })]} />);
+
+    expect(screen.getByRole("link", { name: "Alpha" })).toHaveAttribute(
+      "href",
+      "/tasks/t1?from=%2Flist%3F"
+    );
+  });
+});

package/components/tasks/task-list.tsx

@@ -0,0 +1,481 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import { isOverdue } from "@/lib/task-utils";
+import { loadPreference, savePreference } from "@/lib/view-preferences";
+import { TaskRow } from "./task-row";
+import { TaskTableRow } from "./task-table-row";
+import type { Task, SortField, SortDirection, Props } from "./task-list-types";
+
+type SavedView = "all" | "overdue" | "unscheduled" | "agent";
+
+// Table header component with sort indicators
+function TableHeader({ field, label, className = "", sortField, sortDirection, onSortClick }: {
+  field: SortField;
+  label: string;
+  className?: string;
+  sortField: SortField;
+  sortDirection: SortDirection;
+  onSortClick: (field: SortField) => void;
+}) {
+  const isActive = sortField === field;
+  return (
+    <th
+      onClick={() => onSortClick(field)}
+      className={`cursor-pointer px-4 py-3 text-left text-xs font-medium text-zinc-400 hover:text-zinc-200 transition-colors ${className}`}
+    >
+      <div className="flex items-center gap-1">
+        {label}
+        {isActive && (
+          <span className="text-zinc-300">
+            {sortDirection === "asc" ? "↑" : "↓"}
+          </span>
+        )}
+      </div>
+    </th>
+  );
+}
+
+export function TaskList({ tasks, groupBy = "status" }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const kanbanStatuses = useKanbanStatuses();
+  const statusOrder = kanbanStatuses.filter((s) => s.isVisible).map((s) => s.key);
+  const statusOptions = kanbanStatuses.map((s) => s.key);
+  const [optimistic, setOptimistic] = useState<Record<string, string>>({});
+  const [updating, setUpdating] = useState<string | null>(null);
+  const [statusError, setStatusError] = useState<string | null>(null);
+  
+  // Sorting state
+  const [sortField, setSortField] = useState<SortField>(() =>
+    loadPreference("brief:list-sort-field", "dueDate")
+  );
+  const [sortDirection, setSortDirection] = useState<SortDirection>(() =>
+    loadPreference("brief:list-sort-direction", "asc")
+  );
+  const [savedView, setSavedView] = useState<SavedView>(() =>
+    loadPreference("brief:list-saved-view", "all")
+  );
+  
+  // Selected tasks for bulk actions
+  const [selectedTasks, setSelectedTasks] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    savePreference("brief:list-sort-field", sortField);
+    savePreference("brief:list-sort-direction", sortDirection);
+  }, [sortDirection, sortField]);
+
+  useEffect(() => {
+    savePreference("brief:list-saved-view", savedView);
+  }, [savedView]);
+
+  useEffect(() => {
+    setSelectedTasks(new Set());
+  }, [savedView]);
+
+  function getStatus(t: Task): string {
+    return optimistic[t.id] ?? t.status;
+  }
+
+  function taskDetailHref(taskId: string) {
+    const from = `${pathname}?${searchParams.toString()}`;
+    return `/tasks/${taskId}?from=${encodeURIComponent(from)}`;
+  }
+
+  // Sorting function
+  function sortTasks(tasksToSort: Task[]): Task[] {
+    return [...tasksToSort].sort((a, b) => {
+      let comparison = 0;
+      
+      switch (sortField) {
+        case "title":
+          comparison = a.title.localeCompare(b.title);
+          break;
+        case "status":
+          const aStatusIndex = statusOrder.indexOf(getStatus(a));
+          const bStatusIndex = statusOrder.indexOf(getStatus(b));
+          comparison = (aStatusIndex === -1 ? 999 : aStatusIndex) - (bStatusIndex === -1 ? 999 : bStatusIndex);
+          break;
+        case "dueDate":
+          const aDue = a.dueDate ? new Date(a.dueDate).getTime() : Infinity;
+          const bDue = b.dueDate ? new Date(b.dueDate).getTime() : Infinity;
+          comparison = aDue - bDue;
+          break;
+        case "priority":
+          const priorityOrder = { critical: 0, high: 1, medium: 2, low: 3 };
+          const aPriority = priorityOrder[(a.priority?.toLowerCase() || "medium") as keyof typeof priorityOrder] ?? 2;
+          const bPriority = priorityOrder[(b.priority?.toLowerCase() || "medium") as keyof typeof priorityOrder] ?? 2;
+          comparison = aPriority - bPriority;
+          break;
+        case "assignee":
+          const aAssignee = a.assignee?.name || a.claimedByAlias || "";
+          const bAssignee = b.assignee?.name || b.claimedByAlias || "";
+          comparison = aAssignee.localeCompare(bAssignee);
+          break;
+        case "note":
+          comparison = a.note.title.localeCompare(b.note.title);
+          break;
+        case "updatedAt":
+          const aUpdated = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+          const bUpdated = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+          comparison = aUpdated - bUpdated;
+          break;
+      }
+      
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+  }
+
+  // Handle column header click for sorting
+  function handleSortClick(field: SortField) {
+    if (sortField === field) {
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      setSortField(field);
+      setSortDirection("asc");
+    }
+  }
+
+  // Toggle task selection
+  function toggleTaskSelection(taskId: string) {
+    const newSelected = new Set(selectedTasks);
+    if (newSelected.has(taskId)) {
+      newSelected.delete(taskId);
+    } else {
+      newSelected.add(taskId);
+    }
+    setSelectedTasks(newSelected);
+  }
+
+  // Select/deselect all tasks
+  function toggleAllTasks() {
+    if (selectedTasks.size === filteredTasks.length) {
+      setSelectedTasks(new Set());
+    } else {
+      setSelectedTasks(new Set(filteredTasks.map((task) => task.id)));
+    }
+  }
+
+  async function changeStatus(taskId: string, newStatus: string) {
+    const prevStatus = getStatus(tasks.find((t) => t.id === taskId)!);
+    setOptimistic((prev) => ({ ...prev, [taskId]: newStatus }));
+    setUpdating(taskId);
+    setStatusError(null);
+    try {
+      const res = await fetch(`/api/tasks/${taskId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (!res.ok) throw new Error(`${res.status}`);
+      router.refresh();
+    } catch {
+      // Revert optimistic state and surface the error
+      setOptimistic((prev) => ({ ...prev, [taskId]: prevStatus }));
+      setStatusError("Couldn't update status — please try again.");
+    } finally {
+      setUpdating(null);
+    }
+  }
+
+  // Inline edit handlers (Tasks 2.3.1-2.3.3)
+  async function updateDueDate(taskId: string, dueDate: string | null) {
+    try {
+      const res = await fetch(`/api/tasks/${taskId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ dueDate }),
+      });
+      if (!res.ok) throw new Error(`${res.status}`);
+      router.refresh();
+    } catch {
+      setStatusError("Couldn't update due date — please try again.");
+    }
+  }
+
+  async function updateAssignee(taskId: string, assigneeType: "HUMAN" | "AGENT", assigneeId?: string) {
+    try {
+      const body: Record<string, unknown> = { assigneeType };
+      if (assigneeType === "AGENT") {
+        body.assigneeId = null;
+      } else {
+        // Explicitly send assigneeId (or null to unassign)
+        body.assigneeId = assigneeId ?? null;
+      }
+      const res = await fetch(`/api/tasks/${taskId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error(`${res.status}`);
+      router.refresh();
+    } catch {
+      setStatusError("Couldn't update assignee — please try again.");
+    }
+  }
+
+  const errorBanner = statusError ? (
+    <div className="flex items-center justify-between gap-2 border-b border-red-800/40 bg-red-950/40 px-3 md:px-6 py-2">
+      <span className="text-sm text-red-300">{statusError}</span>
+      <button onClick={() => setStatusError(null)} className="text-zinc-500 hover:text-zinc-300 text-xs">✕</button>
+    </div>
+  ) : null;
+
+  const hasActiveFilters = [
+    "note",
+    "folder",
+    "status",
+    "assigneeType",
+    "overdue",
+    "hasDueDate",
+  ].some((key) => {
+    const value = searchParams.get(key);
+    return value !== null && value !== "";
+  });
+
+  const filteredTasks = tasks.filter((task) => {
+    if (savedView === "overdue") {
+      return isOverdue({ ...task, status: getStatus(task) });
+    }
+
+    if (savedView === "unscheduled") {
+      return !task.startDate && !task.dueDate;
+    }
+
+    if (savedView === "agent") {
+      return task.assigneeType === "AGENT";
+    }
+
+    return true;
+  });
+
+  const showFilteredEmptyState = hasActiveFilters || savedView !== "all";
+  const savedViewOptions: { key: SavedView; label: string }[] = [
+    { key: "all", label: "All" },
+    { key: "overdue", label: "Overdue" },
+    { key: "unscheduled", label: "Unscheduled" },
+    { key: "agent", label: "Agent" },
+  ];
+
+  const savedViewBar = (
+    <div className="flex flex-wrap items-center gap-2 border-b border-zinc-800/60 px-3 py-3 md:px-6">
+      <span className="text-xs uppercase tracking-wide text-zinc-500">Views</span>
+      <div className="inline-flex flex-wrap rounded-md border border-zinc-800 bg-zinc-950 p-1">
+        {savedViewOptions.map((option) => (
+          <button
+            key={option.key}
+            type="button"
+            onClick={() => setSavedView(option.key)}
+            className={
+              savedView === option.key
+                ? "rounded px-2 py-1 text-xs bg-zinc-800 text-zinc-200"
+                : "rounded px-2 py-1 text-xs text-zinc-500 hover:text-zinc-300"
+            }
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  if (filteredTasks.length === 0) {
+    return (
+      <>
+        {errorBanner}
+        {savedViewBar}
+        <div className="flex flex-col items-center justify-center gap-3 py-24 text-center">
+          {showFilteredEmptyState ? (
+            <>
+              <p className="text-zinc-500">No tasks match this view.</p>
+              <p className="text-sm text-zinc-600">
+                Clear one or more filters, or create tasks from a note.
+              </p>
+            </>
+          ) : (
+            <>
+              <p className="text-zinc-500">No tasks yet.</p>
+              <p className="text-sm text-zinc-600">
+                Write{" "}
+                <code className="rounded bg-zinc-800 px-1 py-0.5 text-xs text-zinc-400">
+                  - [ ] task
+                </code>{" "}
+                in a note to create tasks automatically.
+              </p>
+            </>
+          )}
+        </div>
+      </>
+    );
+  }
+
+  if (groupBy === "note") {
+    const noteMap = new Map<string, { title: string; tasks: Task[] }>();
+    for (const t of filteredTasks) {
+      if (!noteMap.has(t.note.id)) {
+        noteMap.set(t.note.id, { title: t.note.title, tasks: [] });
+      }
+      noteMap.get(t.note.id)!.tasks.push(t);
+    }
+
+    return (
+      <>
+        {errorBanner}
+        {savedViewBar}
+        <div className="divide-y divide-zinc-800/60">
+          {[...noteMap.entries()].map(([noteId, { title, tasks: noteTasks }]) => (
+            <div key={noteId} className="px-3 md:px-6 py-4">
+              <div className="mb-3 flex items-center gap-2">
+                <Link href={`/notes/${noteId}`} className="text-sm font-medium text-zinc-300 hover:text-white">
+                  {title}
+                </Link>
+                <span className="text-xs text-zinc-600">{noteTasks.length}</span>
+              </div>
+              <div className="space-y-1">
+                {noteTasks
+                  .sort((a, b) => statusOrder.indexOf(getStatus(a)) - statusOrder.indexOf(getStatus(b)))
+                  .map((task) => (
+                    <TaskRow
+                      key={task.id}
+                      task={task}
+                      status={getStatus(task)}
+                      overdue={isOverdue({ ...task, status: getStatus(task) })}
+                      updating={updating === task.id}
+                      detailHref={taskDetailHref(task.id)}
+                      onStatusChange={changeStatus}
+                    />
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  // When groupBy === "status", show sortable table view
+  // Collect orphaned tasks (status not in visible statusOrder) so they aren't shown twice
+  const visibleTasks = filteredTasks.filter((t) => statusOrder.includes(getStatus(t)));
+  const orphanedTasks = filteredTasks.filter((t) => !statusOrder.includes(getStatus(t)));
+  const sortedTasks = sortTasks(visibleTasks);
+  const sortedOrphanedTasks = sortTasks(orphanedTasks);
+
+  // Return sortable table view for status grouping
+  return (
+    <>
+      {errorBanner}
+      {savedViewBar}
+      
+      {/* Bulk action bar */}
+      {selectedTasks.size > 0 && (
+        <div className="sticky top-0 z-10 flex items-center gap-4 border-b border-blue-900/30 bg-blue-950/30 px-4 py-3">
+          <span className="text-sm text-blue-100">
+            {selectedTasks.size} task{selectedTasks.size === 1 ? "" : "s"} selected
+          </span>
+          <div className="flex items-center gap-2">
+            <select
+              onChange={(e) => {
+                if (e.target.value) {
+                  // Bulk status change - would need API endpoint
+                  alert(`Would change ${selectedTasks.size} tasks to ${e.target.value}`);
+                  e.target.value = "";
+                }
+              }}
+              className="rounded border border-blue-900/40 bg-zinc-900 px-2 py-1 text-xs text-zinc-200"
+            >
+              <option value="">Set status...</option>
+              {statusOptions.map((s) => (
+                <option key={s} value={s}>{s}</option>
+              ))}
+            </select>
+            <button
+              onClick={() => setSelectedTasks(new Set())}
+              className="text-xs text-blue-200/80 hover:text-blue-100"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Sortable Table View */}
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead className="border-b border-zinc-800 bg-zinc-900/50">
+            <tr>
+              <th className="px-3 py-3 w-8">
+                <input
+                  type="checkbox"
+                  checked={selectedTasks.size === filteredTasks.length && filteredTasks.length > 0}
+                  onChange={toggleAllTasks}
+                  className="rounded border-zinc-600 bg-zinc-800 text-blue-600"
+                />
+              </th>
+              <TableHeader field="title" label="Title" className="w-[35%]" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+              <TableHeader field="status" label="Status" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+              <TableHeader field="dueDate" label="Due" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+              <TableHeader field="priority" label="Priority" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+              <TableHeader field="assignee" label="Assignee" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+              <TableHeader field="note" label="Note/Folder" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+              <TableHeader field="updatedAt" label="Updated" sortField={sortField} sortDirection={sortDirection} onSortClick={handleSortClick} />
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-zinc-800/60">
+            {sortedTasks.map((task) => (
+              <TaskTableRow
+                key={task.id}
+                task={task}
+                status={getStatus(task)}
+                overdue={isOverdue({ ...task, status: getStatus(task) })}
+                updating={updating === task.id}
+                onStatusChange={changeStatus}
+                isSelected={selectedTasks.has(task.id)}
+                onSelect={() => toggleTaskSelection(task.id)}
+                kanbanStatuses={kanbanStatuses}
+                detailHref={taskDetailHref(task.id)}
+                onUpdateDueDate={updateDueDate}
+                onUpdateAssignee={updateAssignee}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Orphaned tasks section */}
+      {sortedOrphanedTasks.length > 0 && (
+        <div className="mt-6 border-t border-zinc-800">
+          <div className="px-4 py-3 bg-zinc-900/30">
+            <span className="inline-flex items-center rounded border border-zinc-600 bg-zinc-800/60 px-2 py-0.5 text-xs font-medium text-zinc-400">
+              Uncategorized
+            </span>
+            <span className="ml-2 text-xs text-zinc-600">{sortedOrphanedTasks.length} tasks with custom status</span>
+          </div>
+          <table className="w-full">
+            <tbody className="divide-y divide-zinc-800/60">
+              {sortedOrphanedTasks.map((task) => (
+                <TaskTableRow
+                  key={task.id}
+                  task={task}
+                  status={getStatus(task)}
+                  overdue={isOverdue({ ...task, status: getStatus(task) })}
+                  updating={updating === task.id}
+                  onStatusChange={changeStatus}
+                  isSelected={selectedTasks.has(task.id)}
+                  onSelect={() => toggleTaskSelection(task.id)}
+                  kanbanStatuses={kanbanStatuses}
+                  detailHref={taskDetailHref(task.id)}
+                  onUpdateDueDate={updateDueDate}
+                  onUpdateAssignee={updateAssignee}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </>
+  );
+}