@knotpad/app 0.1.0

package/components/tasks/task-detail.tsx

@@ -0,0 +1,458 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { X, FileText, Clock } from "lucide-react";
+import Link from "next/link";
+import { TaskBadge } from "./task-badge";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import { SnippetThread } from "./snippet-thread";
+
+type AuditEntry = {
+  id: string;
+  action: string;
+  detail: string | null;
+  createdAt: string;
+  user: { id: string; name: string | null } | null;
+};
+
+type Reference = { noteId: string; noteTitle: string; snippet: string };
+
+type Task = {
+  id: string;
+  title: string;
+  status: string;
+  priority?: string | null;
+  assigneeType: "HUMAN" | "AGENT";
+  claimedBy: string | null;
+  claimedByAlias: string | null;
+  fileRefs: string[];
+  startDate: string | null;
+  dueDate: string | null;
+  note: { id: string; title: string };
+  assignee: { id: string; name: string | null; email: string | null; image: string | null } | null;
+  auditLogs: AuditEntry[];
+  references: Reference[];
+};
+
+type Props = { task: Task; backHref: string };
+
+// Format relative time (e.g., "3d ago", "2h ago", "5m ago")
+function formatRelativeTime(date: string | Date): string {
+  const now = new Date();
+  const then = new Date(date);
+  const diffMs = now.getTime() - then.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+  const diffWeek = Math.floor(diffDay / 7);
+  const diffMonth = Math.floor(diffDay / 30);
+  const diffYear = Math.floor(diffDay / 365);
+
+  if (diffSec < 60) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHour < 24) return `${diffHour}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  if (diffWeek < 4) return `${diffWeek}w ago`;
+  if (diffMonth < 12) return `${diffMonth}mo ago`;
+  return `${diffYear}y ago`;
+}
+
+// Format date for date input (YYYY-MM-DD) in local timezone
+function formatDateForInput(date: string | Date | null): string {
+  if (!date) return "";
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function getBackLabel(backHref: string): string {
+  if (backHref.startsWith("/list")) return "Back to List";
+  if (backHref.startsWith("/kanban")) return "Back to Kanban";
+  if (backHref.startsWith("/calendar")) return "Back to Calendar";
+  if (backHref.startsWith("/notes")) return "Back to Note";
+  return "Back";
+}
+
+export function TaskDetail({ task, backHref }: Props) {
+  const router = useRouter();
+  const kanbanStatuses = useKanbanStatuses();
+  const statusOptions = kanbanStatuses.map((s) => s.key);
+  const backLabel = getBackLabel(backHref);
+  const [status, setStatus] = useState<string>(task.status);
+  const [updating, setUpdating] = useState(false);
+  const [error, setError] = useState("");
+  const [successMessage, setSuccessMessage] = useState("");
+  const [startDate, setStartDate] = useState<string>(formatDateForInput(task.startDate));
+  const [savingStart, setSavingStart] = useState(false);
+  const [dueDate, setDueDate] = useState<string>(formatDateForInput(task.dueDate));
+  const [savingDue, setSavingDue] = useState(false);
+  const [showAllActivity, setShowAllActivity] = useState(false);
+  const [priority, setPriority] = useState<string>(task.priority ?? "medium");
+  const [savingPriority, setSavingPriority] = useState(false);
+
+  // Sync local state when task prop changes (e.g., after router.refresh())
+  useEffect(() => {
+    setStatus(task.status);
+    setPriority(task.priority ?? "medium");
+    setStartDate(formatDateForInput(task.startDate));
+    setDueDate(formatDateForInput(task.dueDate));
+  }, [task.dueDate, task.priority, task.startDate, task.status]);
+
+  async function handleStatusChange(newStatus: string) {
+    if (newStatus === status) return;
+    const prev = status;
+    setUpdating(true);
+    setStatus(newStatus);
+    setError("");
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (!res.ok) throw new Error("patch failed");
+      router.refresh();
+    } catch {
+      setStatus(prev);
+      setError("Failed to update status. Please try again.");
+    } finally {
+      setUpdating(false);
+    }
+  }
+
+  async function handleStartDateChange(val: string) {
+    const prev = startDate;
+    setStartDate(val);
+    setSavingStart(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ startDate: val || null }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      setStartDate(prev);
+      setError("Failed to update start date.");
+    } finally {
+      setSavingStart(false);
+    }
+  }
+
+  async function handleDueDateChange(val: string) {
+    const prev = dueDate;
+    setDueDate(val);
+    setSavingDue(true);
+    setError("");
+    setSuccessMessage("");
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ dueDate: val || null }),
+      });
+      if (!res.ok) throw new Error();
+      setSuccessMessage(val ? "Due date updated." : "Due date cleared.");
+      router.refresh();
+    } catch {
+      setDueDate(prev);
+      setError("Failed to update due date.");
+    } finally {
+      setSavingDue(false);
+    }
+  }
+
+  async function handlePriorityChange(newPriority: string) {
+    const normalizedPriority = newPriority.toLowerCase();
+    if (normalizedPriority === priority) return;
+    const prev = priority;
+    setPriority(normalizedPriority);
+    setSavingPriority(true);
+    setError("");
+    setSuccessMessage("");
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ priority: normalizedPriority.toUpperCase() }),
+      });
+      if (!res.ok) throw new Error();
+      setSuccessMessage("Priority updated.");
+      router.refresh();
+    } catch {
+      setPriority(prev);
+      setError("Failed to update priority.");
+    } finally {
+      setSavingPriority(false);
+    }
+  }
+
+  // Task 2.5.4 - Assignee picker
+  const [assigneeType, setAssigneeType] = useState<"HUMAN" | "AGENT">(task.assigneeType);
+  const [savingAssignee, setSavingAssignee] = useState(false);
+
+  async function handleAssigneeChange(type: "HUMAN" | "AGENT") {
+    const prev = assigneeType;
+    setAssigneeType(type);
+    setSavingAssignee(true);
+    setError("");
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ assigneeType: type }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      setAssigneeType(prev);
+      setError("Failed to update assignee.");
+    } finally {
+      setSavingAssignee(false);
+    }
+  }
+
+  const displayLogs = showAllActivity ? task.auditLogs : task.auditLogs.slice(0, 5);
+  const hasMoreLogs = task.auditLogs.length > 5;
+  const summaryChips = [
+    dueDate && new Date(dueDate) < new Date() && status !== "DONE" ? "Overdue" : null,
+    assigneeType === "AGENT" ? "Agent task" : "Human task",
+    `References ${task.references.length}`,
+    task.auditLogs[0]?.createdAt ? `Updated ${formatRelativeTime(task.auditLogs[0].createdAt)}` : null,
+  ].filter((chip): chip is string => Boolean(chip));
+
+  const auditSection = task.auditLogs.length > 0 && (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <label className="text-xs font-medium text-zinc-500">Activity</label>
+        {hasMoreLogs && (
+          <button
+            onClick={() => setShowAllActivity(!showAllActivity)}
+            className="text-xs text-zinc-400 hover:text-zinc-300 transition-colors"
+          >
+            {showAllActivity ? "Show less" : `Show ${task.auditLogs.length - 5} more`}
+          </button>
+        )}
+      </div>
+      <div className="space-y-2">
+        {displayLogs.map((log) => (
+          <div key={log.id} className="flex items-start gap-2 text-xs">
+            <Clock size={11} className="mt-0.5 shrink-0 text-zinc-600" />
+            <div className="min-w-0 space-y-1">
+              <div className="flex flex-wrap items-center gap-1">
+                <span className="font-medium text-zinc-300">{log.user?.name ?? "System"}</span>
+                <span className="text-zinc-500">{log.action.replace(/_/g, " ")}</span>
+              </div>
+              {log.detail && (
+                <p className="text-zinc-600 truncate">{log.detail}</p>
+              )}
+              <p className="text-zinc-700" title={new Date(log.createdAt).toLocaleString()}>
+                {formatRelativeTime(log.createdAt)}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3 md:px-6">
+        <Link
+          href={backHref}
+          className="flex items-center gap-1.5 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+        >
+          <X size={14} />
+          <span>{backLabel}</span>
+        </Link>
+        <nav className="min-w-0 text-xs text-zinc-600">
+          <Link href={`/notes/${task.note.id}`} className="block truncate hover:text-zinc-400 transition-colors">
+            {task.note.title}
+          </Link>
+        </nav>
+      </div>
+
+      {error && (
+        <div className="border-b border-red-800/40 bg-red-950/40 px-4 py-2 flex items-center justify-between gap-3 md:px-6">
+          <p className="text-sm text-red-300">{error}</p>
+          <button onClick={() => setError("")} className="text-red-500 hover:text-red-300 text-lg leading-none shrink-0">×</button>
+        </div>
+      )}
+
+      {successMessage && !error && (
+        <div className="border-b border-emerald-800/40 bg-emerald-950/40 px-4 py-2 md:px-6">
+          <p className="text-sm text-emerald-300">{successMessage}</p>
+        </div>
+      )}
+
+      {summaryChips.length > 0 && (
+        <div className="flex flex-wrap gap-2 border-b border-zinc-800 px-4 py-2 md:px-6">
+          {summaryChips.map((chip) => (
+            <span
+              key={chip}
+              className="rounded-full border border-zinc-800 bg-zinc-900 px-2.5 py-1 text-xs text-zinc-300"
+            >
+              {chip}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Body */}
+      <div className="flex flex-1 flex-col overflow-y-auto md:flex-row md:overflow-hidden md:divide-x md:divide-zinc-800">
+        {/* Left — task details */}
+        <div className="flex w-full shrink-0 flex-col gap-6 border-b border-zinc-800 p-4 md:w-[380px] md:overflow-y-auto md:border-b-0 md:p-6">
+          <h1 className="text-xl font-semibold text-zinc-100 leading-snug">{task.title}</h1>
+
+          {/* Status */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-zinc-500">Status</label>
+            <div className="flex flex-wrap gap-1.5">
+              {statusOptions.map((s) => (
+                <button
+                  key={s}
+                  disabled={updating}
+                  onClick={() => handleStatusChange(s)}
+                  className={`transition-opacity disabled:opacity-50 ${
+                    status === s ? "ring-1 ring-white/20 rounded" : "opacity-60 hover:opacity-90"
+                  }`}
+                >
+                  <TaskBadge status={s} />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Assignee - Task 2.5.4 */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-zinc-500">Assignee</label>
+            <select
+              value={assigneeType}
+              onChange={(e) => handleAssigneeChange(e.target.value as "HUMAN" | "AGENT")}
+              disabled={savingAssignee}
+              className={`text-sm bg-zinc-800 border border-zinc-700 rounded px-2 py-1 w-full cursor-pointer ${
+                savingAssignee ? "opacity-50" : ""
+              } ${task.assigneeType === "AGENT" ? "text-blue-400" : "text-zinc-300"}`}
+            >
+              <option value="HUMAN">Human</option>
+              <option value="AGENT">Agent</option>
+            </select>
+            {savingAssignee && <span className="text-xs text-zinc-500">Saving...</span>}
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-zinc-500">
+              Priority {savingPriority && <span className="font-normal text-zinc-600">saving...</span>}
+            </label>
+            <select
+              value={priority}
+              onChange={(e) => handlePriorityChange(e.target.value)}
+              disabled={savingPriority}
+              className={`w-full rounded border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm text-zinc-300 ${
+                savingPriority ? "opacity-50" : ""
+              }`}
+            >
+              <option value="low">low</option>
+              <option value="medium">medium</option>
+              <option value="high">high</option>
+              <option value="critical">critical</option>
+            </select>
+          </div>
+
+          {/* Source note */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-zinc-500">Continue in source note</label>
+            <Link
+              href={`/notes/${task.note.id}`}
+              className="flex items-center gap-1.5 text-sm text-zinc-300 hover:text-white transition-colors"
+            >
+              <FileText size={13} />
+              {task.note.title}
+            </Link>
+          </div>
+
+          {/* File refs */}
+          {task.fileRefs.length > 0 && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium text-zinc-500">File references</label>
+              <div className="flex flex-wrap gap-1.5">
+                {task.fileRefs.map((f) => (
+                  <span
+                    key={f}
+                    className="rounded border border-zinc-700 bg-zinc-800 px-2 py-0.5 font-mono text-xs text-emerald-400"
+                  >
+                    {f}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Start date */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-zinc-500">
+              Start date {savingStart && <span className="text-zinc-600 font-normal">saving…</span>}
+            </label>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(e) => handleStartDateChange(e.target.value)}
+              className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-base text-zinc-300 focus:border-zinc-500 focus:outline-none ring-focus [color-scheme:dark]"
+            />
+            {startDate && (
+              <button
+                onClick={() => handleStartDateChange("")}
+                className="block text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
+              >
+                Clear date
+              </button>
+            )}
+          </div>
+
+          {/* Due date */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium text-zinc-500">
+              Due date {savingDue && <span className="text-zinc-600 font-normal">saving…</span>}
+            </label>
+            <input
+              type="date"
+              value={dueDate}
+              onChange={(e) => handleDueDateChange(e.target.value)}
+              className="rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-base text-zinc-300 focus:border-zinc-500 focus:outline-none ring-focus [color-scheme:dark]"
+            />
+            {dueDate && (
+              <button
+                onClick={() => handleDueDateChange("")}
+                className="block text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
+              >
+                Clear date
+              </button>
+            )}
+          </div>
+
+          {/* Audit trail — desktop only here; on mobile it moves below the
+              note references (see bottom of this layout). */}
+          {auditSection && <div className="hidden md:block">{auditSection}</div>}
+        </div>
+
+        {/* Right — snippet thread */}
+        <div className="flex-1 p-4 md:overflow-y-auto md:p-6">
+          <SnippetThread references={task.references} taskTitle={task.title} />
+        </div>
+
+        {/* Audit trail — mobile only, after note references */}
+        {auditSection && (
+          <div className="border-t border-zinc-800 p-4 md:hidden">{auditSection}</div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+// @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 { TaskListFilters } from "@/components/tasks/task-list-filters";
+
+const pushMock = vi.fn();
+let pathname = "/list";
+let searchParams = new URLSearchParams();
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: pushMock, refresh: vi.fn() }),
+  usePathname: () => pathname,
+  useSearchParams: () => searchParams,
+}));
+
+beforeEach(() => {
+  pushMock.mockReset();
+  pathname = "/list";
+  searchParams = new URLSearchParams();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("TaskListFilters", () => {
+  it("shows active filter chips and removes only the clicked chip", async () => {
+    const user = userEvent.setup();
+    searchParams = new URLSearchParams(
+      "note=n1&folder=f1&status=DONE&assigneeType=AGENT&overdue=true&hasDueDate=true"
+    );
+
+    render(
+      <TaskListFilters
+        folders={[{ id: "f1", name: "Product" }]}
+        filterFolderId="f1"
+        statusFilter="DONE"
+        assigneeFilter="AGENT"
+        overdueOnly="true"
+        hasDueDateFilter="true"
+      />
+    );
+
+    expect(screen.getByRole("button", { name: "Folder: Product ×" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Status: DONE ×" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Assignee: AGENT ×" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Overdue ×" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Has due date ×" })).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Status: DONE ×" }));
+
+    expect(pushMock).toHaveBeenCalledWith(
+      "/list?note=n1&folder=f1&assigneeType=AGENT&overdue=true&hasDueDate=true"
+    );
+  });
+
+  it("clears only filter params and preserves unrelated query state", async () => {
+    const user = userEvent.setup();
+    searchParams = new URLSearchParams("note=n1&folder=f1&status=DONE&overdue=true");
+
+    render(
+      <TaskListFilters
+        folders={[{ id: "f1", name: "Product" }]}
+        filterFolderId="f1"
+        statusFilter="DONE"
+        overdueOnly="true"
+      />
+    );
+
+    await user.click(screen.getByRole("button", { name: "Clear all" }));
+
+    expect(pushMock).toHaveBeenCalledWith("/list?note=n1");
+  });
+});

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

@@ -0,0 +1,163 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+type Props = {
+  folders: { id: string; name: string }[];
+  filterFolderId?: string;
+  statusFilter?: string;
+  assigneeFilter?: string;
+  overdueOnly?: string;
+  hasDueDateFilter?: string;
+};
+
+export function TaskListFilters({
+  folders,
+  filterFolderId,
+  statusFilter,
+  assigneeFilter,
+  overdueOnly,
+  hasDueDateFilter,
+}: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  function pushParams(params: URLSearchParams) {
+    const query = params.toString();
+    router.push(query ? `${pathname}?${query}` : pathname);
+  }
+
+  function setParam(key: string, value: string | null) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) params.set(key, value);
+    else params.delete(key);
+    pushParams(params);
+  }
+
+  function toggleParam(key: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (params.get(key) === "true") params.delete(key);
+    else params.set(key, "true");
+    pushParams(params);
+  }
+
+  function clearFilters() {
+    const params = new URLSearchParams(searchParams.toString());
+    for (const key of ["folder", "status", "assigneeType", "overdue", "hasDueDate"]) {
+      params.delete(key);
+    }
+    pushParams(params);
+  }
+
+  const hasActiveFilters = Boolean(
+    statusFilter || assigneeFilter || overdueOnly || hasDueDateFilter || filterFolderId
+  );
+  const activeFilters: { key: string; label: string }[] = [];
+
+  if (filterFolderId) {
+    const folderName = folders.find((folder) => folder.id === filterFolderId)?.name ?? filterFolderId;
+    activeFilters.push({ key: "folder", label: `Folder: ${folderName}` });
+  }
+  if (statusFilter) {
+    activeFilters.push({ key: "status", label: `Status: ${statusFilter}` });
+  }
+  if (assigneeFilter) {
+    activeFilters.push({ key: "assigneeType", label: `Assignee: ${assigneeFilter}` });
+  }
+  if (overdueOnly === "true") {
+    activeFilters.push({ key: "overdue", label: "Overdue" });
+  }
+  if (hasDueDateFilter === "true") {
+    activeFilters.push({ key: "hasDueDate", label: "Has due date" });
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 px-3 md:px-6 py-2 border-b border-zinc-800/50 bg-zinc-900/30">
+      {/* Folder Filter */}
+      {folders.length > 0 && (
+        <select
+          value={filterFolderId || ""}
+          onChange={(e) => setParam("folder", e.target.value || null)}
+          className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-300"
+        >
+          <option value="">All folders</option>
+          {folders.map((f) => (
+            <option key={f.id} value={f.id}>{f.name}</option>
+          ))}
+        </select>
+      )}
+
+      {/* Status Filter */}
+      <select
+        value={statusFilter || ""}
+        onChange={(e) => setParam("status", e.target.value || null)}
+        className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-300"
+      >
+        <option value="">All statuses</option>
+        <option value="TODO,DOING">Active (To Do / Doing)</option>
+        <option value="DONE">Done</option>
+        <option value="ARCHIVED">Archived</option>
+      </select>
+
+      {/* Assignee Filter */}
+      <select
+        value={assigneeFilter || ""}
+        onChange={(e) => setParam("assigneeType", e.target.value || null)}
+        className="text-xs bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-zinc-300"
+      >
+        <option value="">All assignees</option>
+        <option value="HUMAN">Human</option>
+        <option value="AGENT">Agent</option>
+      </select>
+
+      {/* Overdue Toggle */}
+      <button
+        onClick={() => toggleParam("overdue")}
+        className={`text-xs px-2 py-1 rounded border transition-colors ${
+          overdueOnly === "true"
+            ? "bg-red-900/30 border-red-700 text-red-300"
+            : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-zinc-300"
+        }`}
+      >
+        Overdue only
+      </button>
+
+      {/* Has Due Date Toggle */}
+      <button
+        onClick={() => toggleParam("hasDueDate")}
+        className={`text-xs px-2 py-1 rounded border transition-colors ${
+          hasDueDateFilter === "true"
+            ? "bg-blue-900/30 border-blue-700 text-blue-300"
+            : "bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-zinc-300"
+        }`}
+      >
+        Has due date
+      </button>
+
+      {activeFilters.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {activeFilters.map((filter) => (
+            <button
+              key={filter.key}
+              onClick={() => setParam(filter.key, null)}
+              className="rounded-full border border-zinc-700 bg-zinc-800 px-2 py-1 text-xs text-zinc-300"
+            >
+              {filter.label} ×
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Clear Filters */}
+      {hasActiveFilters && (
+        <button
+          onClick={clearFilters}
+          className="text-xs text-zinc-500 hover:text-zinc-300 ml-2"
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+}