@knotpad/app 0.1.0 → 0.1.2

package/components/guide/guide-view.tsx

@@ -1,522 +0,0 @@
-"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

@@ -1,128 +0,0 @@
-// @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);
-  });
-});