@knotpad/app 0.1.5 → 0.1.6

package/components/guide/guide-view.tsx

@@ -0,0 +1,522 @@
+"use client";
+
+import { useState } from "react";
+import {
+  FileText,
+  Kanban,
+  List,
+  Calendar,
+  Network,
+  Settings,
+  Bell,
+  Search,
+  Users,
+  Shield,
+  Zap,
+  BookOpen,
+} from "lucide-react";
+
+type Section = {
+  id: string;
+  icon: typeof FileText;
+  title: string;
+  content: React.ReactNode;
+};
+
+const sections: Section[] = [
+  {
+    id: "overview",
+    icon: BookOpen,
+    title: "Overview",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          <strong className="text-zinc-100">Knotpad</strong> is a note-first project management tool designed for 
+          individuals and teams who want to organize their work around written context rather than just task lists.
+        </p>
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          Unlike traditional project management tools that start with tasks, Knotpad starts with <strong className="text-zinc-100">notes</strong>. 
+          Each note can contain multiple tasks, and tasks can be viewed across different perspectives: Kanban boards, 
+          list views, calendar timelines, and relationship graphs.
+        </p>
+        <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
+          <h4 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-2">Core Concepts</h4>
+          <ul className="space-y-2 text-sm text-zinc-300">
+            <li className="flex items-start gap-2">
+              <span className="text-zinc-500">•</span>
+              <span><strong>Notes:</strong> Your primary documents - project specs, meeting notes, ideas, or any written context</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-zinc-500">•</span>
+              <span><strong>Tasks:</strong> Action items extracted from notes with status, priority, and assignment</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-zinc-500">•</span>
+              <span><strong>Folders:</strong> Organize notes into collections for better navigation</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-zinc-500">•</span>
+              <span><strong>Workspaces:</strong> Separate environments for different teams or projects</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "notes",
+    icon: FileText,
+    title: "Notes & Editor",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          The <strong className="text-zinc-100">Notes</strong> module is your main workspace for writing and editing. 
+          Notes support rich formatting and can contain tasks that appear across all views.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Creating Notes</h4>
+            <p className="text-xs text-zinc-400">
+              Click the "+" button in the notes panel or press ⌘+N (Ctrl+N on Windows) to create a new note. 
+              Notes are auto-saved as you type.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Task Extraction</h4>
+            <p className="text-xs text-zinc-400">
+              Type "- [ ]" or "1. [ ]" at the start of a line to create a task checkbox.
+              These tasks automatically appear in your Kanban, List, and Calendar views.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Folders</h4>
+            <p className="text-xs text-zinc-400">
+              Organize notes by dragging them into folders. Create folders from the sidebar menu. 
+              Folders help group related projects or contexts together.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "kanban",
+    icon: Kanban,
+    title: "Kanban Board",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          The <strong className="text-zinc-100">Kanban</strong> view displays tasks as cards organized by status columns. 
+          Drag and drop tasks between columns to update their status.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Status Columns</h4>
+            <p className="text-xs text-zinc-400">
+              Default columns: Open, Claimed, In Progress, Review, Done. 
+              Admins can customize columns in Settings → Kanban Statuses.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Task Cards</h4>
+            <p className="text-xs text-zinc-400">
+              Each card shows the task title, priority indicator, assignee, and linked note. 
+              Click any card to open its note in the editor.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Claiming Tasks</h4>
+            <p className="text-xs text-zinc-400">
+              Click "Claim" on a task to take ownership and start working on it.
+              Tasks auto-release if you go offline for too long, allowing others to pick them up.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "list",
+    icon: List,
+    title: "List View",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          The <strong className="text-zinc-100">List</strong> view provides a compact, filterable table of all tasks. 
+          Great for quick scanning and bulk operations.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Sorting & Filtering</h4>
+            <p className="text-xs text-zinc-400">
+              Click column headers to sort. Use the search bar to filter by task title, 
+              note name, or assignee. Filter by status using the dropdown.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Inline Editing</h4>
+            <p className="text-xs text-zinc-400">
+              Click any task title to edit it inline. Status and priority can be changed 
+              via dropdown menus on each row.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Bulk Selection</h4>
+            <p className="text-xs text-zinc-400">
+              Select multiple tasks using checkboxes to perform bulk actions like
+              changing status or priority for several tasks at once.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "calendar",
+    icon: Calendar,
+    title: "Calendar",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          The <strong className="text-zinc-100">Calendar</strong> view shows tasks with due dates across a monthly timeline. 
+          External calendar feeds (Google/Apple) can be overlaid for context.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Setting Due Dates</h4>
+            <p className="text-xs text-zinc-400">
+              Click the "+" button next to a task or use the date picker in task details
+              to set start and due dates. Tasks with dates appear on the calendar.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Calendar Feeds</h4>
+            <p className="text-xs text-zinc-400">
+              Add external calendars in Settings → Calendar Feeds. Paste your Google/Apple 
+              calendar's "secret iCal URL" to overlay meetings alongside tasks.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Day Detail</h4>
+            <p className="text-xs text-zinc-400">
+              Click any date to see all tasks and events for that day. 
+              Drag tasks between days to reschedule their due dates.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "graph",
+    icon: Network,
+    title: "Graph View",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          The <strong className="text-zinc-100">Graph</strong> view visualizes relationships between notes and tasks 
+          as a network diagram. Useful for understanding connections in complex projects.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Node Types</h4>
+            <p className="text-xs text-zinc-400">
+              Notes appear as larger nodes, tasks as smaller nodes.
+              Lines show relationships between notes and their tasks.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Navigation</h4>
+            <p className="text-xs text-zinc-400">
+              Click and drag to pan, scroll to zoom. Click a node to focus on it 
+              and see only its connected items. Double-click to open the note.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Task References</h4>
+            <p className="text-xs text-zinc-400">
+              When you mention a task ID in another note, a reference link is created. 
+              These references appear as connections in the graph view.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "search",
+    icon: Search,
+    title: "Search & Command",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          <strong className="text-zinc-100">Command Palette</strong> (⌘K) is your quick access tool 
+          for finding notes, tasks, and actions without leaving the keyboard.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Opening the Palette</h4>
+            <p className="text-xs text-zinc-400">
+              Press ⌘+K (Ctrl+K) or click the search icon in the sidebar. 
+              Type to filter results instantly across notes and tasks.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Quick Actions</h4>
+            <p className="text-xs text-zinc-400">
+              Type "/" to see available commands like "Create note", "Go to Kanban", 
+              or "Toggle theme". Navigate with arrow keys, confirm with Enter.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "notifications",
+    icon: Bell,
+    title: "Notifications",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          Stay informed about task assignments, status changes, and team activity 
+          through the notification system.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Notification Types</h4>
+            <p className="text-xs text-zinc-400">
+              • <strong>Task Assigned:</strong> Someone assigned you a task<br />
+              • <strong>Status Change:</strong> A task you own changed status<br />
+              • <strong>Invite Accepted:</strong> Someone joined your workspace<br />
+              • <strong>Takeover:</strong> Your stale claim was released
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Managing Notifications</h4>
+            <p className="text-xs text-zinc-400">
+              Click the bell icon to open the notification panel. 
+              Mark individual items read or "Mark all read" to clear the list.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "team",
+    icon: Users,
+    title: "Team & Collaboration",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          <strong className="text-zinc-100">Workspaces</strong> are collaborative environments where teams 
+          share notes and tasks. Personal workspaces are private by default.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Inviting Members</h4>
+            <p className="text-xs text-zinc-400">
+              Go to Settings → Team Members. Enter email addresses to send invites. 
+              New members can be Admins (full access) or Members (can edit, can't manage).
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Task Assignment</h4>
+            <p className="text-xs text-zinc-400">
+              Click the assignee area on any task to assign it to a team member. 
+              Assigned tasks appear in their personal views and notifications.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Workspace Switcher</h4>
+            <p className="text-xs text-zinc-400">
+              Use the workspace dropdown in the sidebar to switch between personal 
+              and team workspaces. Each workspace has isolated notes and tasks.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "settings",
+    icon: Settings,
+    title: "Settings",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          Customize your Knotpad experience through the various settings panels.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Workspace Settings</h4>
+            <p className="text-xs text-zinc-400">
+              Rename workspace, update slug (URL identifier), manage cloud sync preferences. 
+              Only owners and admins can change workspace settings.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Kanban Statuses</h4>
+            <p className="text-xs text-zinc-400">
+              Customize the columns in your Kanban board. Add, rename, reorder, or hide statuses. 
+              Each status has a color for visual organization.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Calendar Feeds</h4>
+            <p className="text-xs text-zinc-400">
+              Add external calendar URLs (Google, Apple, Outlook) to overlay on your task calendar. 
+              Feeds are personal - other members don't see your calendar events.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Backup & Export</h4>
+            <p className="text-xs text-zinc-400">
+              Schedule automatic backups or export your workspace data as JSON or Markdown ZIP. 
+              Backups include all notes, tasks, and folder structure.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "security",
+    icon: Shield,
+    title: "Security & Privacy",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          Knotpad is designed with security in mind for both personal and team use.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Authentication</h4>
+            <p className="text-xs text-zinc-400">
+              Secure password-based login with session management.
+              All passwords are hashed using bcrypt before storage.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Data Encryption</h4>
+            <p className="text-xs text-zinc-400">
+              Calendar feed URLs are encrypted at rest using per-row salts.
+              All data is served over HTTPS. Notes are stored securely with workspace-level isolation.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Device Sessions</h4>
+            <p className="text-xs text-zinc-400">
+              View and manage active logins from Settings → Security. 
+              Revoke access from devices you no longer use.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "pro",
+    icon: Zap,
+    title: "Pro Features",
+    content: (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-300 leading-relaxed">
+          Upgrade to Pro to unlock additional capabilities for power users and teams.
+        </p>
+        <div className="grid gap-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Cloud Sync</h4>
+            <p className="text-xs text-zinc-400">
+              Pro workspaces sync across all your devices in real-time. 
+              Access your notes and tasks from desktop, web, and mobile apps.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Team Workspaces</h4>
+            <p className="text-xs text-zinc-400">
+              Create unlimited team workspaces with multiple members. 
+              Perfect for agencies, departments, or project teams.
+            </p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+            <h4 className="text-xs font-medium text-zinc-200 mb-1">Priority Support</h4>
+            <p className="text-xs text-zinc-400">
+              Pro users get priority response on feedback and support requests. 
+              Direct access to the product team for feature requests.
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+];
+
+export function GuideView() {
+  const [activeSection, setActiveSection] = useState<string>("overview");
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  const activeContent = sections.find((s) => s.id === activeSection);
+
+  return (
+    <div className="flex flex-1 overflow-hidden relative">
+      {/* Mobile sidebar toggle */}
+      <button
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+        className="lg:hidden absolute top-4 left-4 z-20 p-2 rounded-md bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-zinc-200"
+        aria-label="Toggle menu"
+      >
+        <BookOpen size={16} />
+      </button>
+
+      {/* Sidebar */}
+      <aside className={`fixed inset-y-0 left-0 z-10 w-64 border-r border-zinc-800 bg-zinc-950 overflow-y-auto transform transition-transform duration-200 lg:relative lg:transform-none ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
+        <nav className="p-2 space-y-0.5">
+          {sections.map((section) => {
+            const Icon = section.icon;
+            const isActive = section.id === activeSection;
+            return (
+              <button
+                key={section.id}
+                onClick={() => {
+                  setActiveSection(section.id);
+                  setSidebarOpen(false);
+                }}
+                className={`w-full flex items-center gap-2.5 rounded-md px-3 py-2 text-left text-xs transition-colors ${
+                  isActive
+                    ? "bg-zinc-800 text-zinc-200"
+                    : "text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-300"
+                }`}
+              >
+                <Icon size={14} className={isActive ? "text-zinc-200" : "text-zinc-500"} />
+                <span className="font-medium">{section.title}</span>
+              </button>
+            );
+          })}
+        </nav>
+      </aside>
+
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-0 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Content */}
+      <main className="flex-1 overflow-y-auto p-4 lg:p-6 lg:ml-0">
+        {activeContent && (
+          <div className="max-w-2xl mt-12 lg:mt-0">
+            <div className="flex items-center gap-3 mb-6">
+              <activeContent.icon size={20} className="text-zinc-400" />
+              <h2 className="text-lg font-semibold text-zinc-100">{activeContent.title}</h2>
+            </div>
+            {activeContent.content}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

package/components/kanban/kanban-board.test.tsx

@@ -0,0 +1,128 @@
+// @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 { KanbanBoard } from "@/components/kanban/kanban-board";
+import type { KanbanTask } from "@/components/kanban/kanban-board";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn(), refresh: vi.fn() }),
+}));
+
+vi.mock("@/components/kanban/kanban-status-context", () => ({
+  useKanbanStatuses: () => [
+    { key: "OPEN", label: "Open", color: "border-zinc-700", isVisible: true },
+    { key: "DONE", label: "Done", color: "border-zinc-700", isVisible: true },
+  ],
+}));
+
+vi.mock("@/components/kanban/kanban-card", () => ({
+  KanbanCard: ({ task }: { task: KanbanTask }) => <div data-testid="kanban-card">{task.title}</div>,
+}));
+
+function makeTask(overrides: Partial<KanbanTask> = {}): KanbanTask {
+  return {
+    id: overrides.id ?? "t1",
+    title: overrides.title ?? "Ship notes polish",
+    status: overrides.status ?? "OPEN",
+    claimedBy: overrides.claimedBy ?? null,
+    claimedByAlias: overrides.claimedByAlias ?? null,
+    lastHeartbeat: overrides.lastHeartbeat ?? null,
+    assigneeType: overrides.assigneeType ?? "HUMAN",
+    assignee: overrides.assignee ?? null,
+    note: overrides.note ?? { id: "n1", title: "Launch" },
+    dueDate: overrides.dueDate ?? null,
+  };
+}
+
+function getColumnBody(label: string) {
+  const header = screen.getByText(label).closest("header");
+
+  if (!(header instanceof HTMLElement) || !(header.nextElementSibling instanceof HTMLElement)) {
+    throw new Error(`Could not find column body for ${label}`);
+  }
+
+  return { header, body: header.nextElementSibling };
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("KanbanBoard", () => {
+  it("shows density controls, makes headers sticky, and saves compact mode", async () => {
+    const user = userEvent.setup();
+
+    render(<KanbanBoard tasks={[makeTask()]} />);
+
+    expect(screen.getByRole("button", { name: "Comfortable" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Compact" })).toBeInTheDocument();
+
+    const { header, body } = getColumnBody("Open");
+    expect(header.className).toContain("sticky");
+    expect(header.className).toContain("top-0");
+    expect(body.className).toContain("gap-3");
+    expect(body.className).toContain("p-3");
+
+    await user.click(screen.getByRole("button", { name: "Compact" }));
+
+    expect(body.className).toContain("gap-2");
+    expect(body.className).toContain("p-2");
+    expect(window.localStorage.getItem("brief:kanban-density")).toBe(JSON.stringify("compact"));
+  });
+
+  it("loads the saved density preference on first render", () => {
+    window.localStorage.setItem("brief:kanban-density", JSON.stringify("compact"));
+
+    render(<KanbanBoard tasks={[makeTask()]} />);
+
+    const { body } = getColumnBody("Open");
+    expect(body.className).toContain("gap-2");
+    expect(body.className).toContain("p-2");
+    expect(screen.getByRole("button", { name: "Compact" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("filters the board down to overdue tasks", async () => {
+    const user = userEvent.setup();
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    const overdueTask = makeTask({
+      id: "overdue-task",
+      title: "Past due follow-up",
+      dueDate: yesterday.toISOString(),
+    });
+    const futureTask = makeTask({
+      id: "future-task",
+      title: "Upcoming review",
+      dueDate: tomorrow.toISOString(),
+    });
+
+    render(<KanbanBoard tasks={[overdueTask, futureTask]} />);
+
+    await user.click(screen.getByRole("button", { name: "Overdue" }));
+
+    expect(screen.getByText(overdueTask.title)).toBeInTheDocument();
+    expect(screen.queryByText(futureTask.title)).not.toBeInTheDocument();
+  });
+
+  it("shows filtered-empty column messaging when quick filters hide cards", async () => {
+    const user = userEvent.setup();
+    const futureHumanTask = makeTask({
+      id: "future-human-task",
+      title: "Upcoming human review",
+    });
+
+    render(<KanbanBoard tasks={[futureHumanTask]} />);
+
+    await user.click(screen.getByRole("button", { name: "Agent" }));
+
+    expect(screen.getAllByText("No matching tasks in this column")).toHaveLength(2);
+  });
+});