@knotpad/app 0.1.0

package/components/kanban/kanban-column.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+
+type Props = {
+  id: string;
+  label: string;
+  color: string;
+  count: number;
+  children: React.ReactNode;
+  density?: "comfortable" | "compact";
+  isFilteredEmpty?: boolean;
+};
+
+export function KanbanColumn({
+  id,
+  label,
+  color,
+  count,
+  children,
+  density = "comfortable",
+  isFilteredEmpty = false,
+}: Props) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  return (
+    <section
+      ref={setNodeRef}
+      className={`flex w-full shrink-0 flex-col overflow-y-auto rounded-lg border md:w-64 md:min-h-0 ${color} bg-zinc-900/60 transition-colors ${
+        isOver ? "bg-zinc-800/80" : ""
+      }`}
+    >
+      <header className="sticky top-0 z-10 flex items-center justify-between border-b border-zinc-800 bg-zinc-950/95 px-3 py-2.5 backdrop-blur">
+        <span className="text-xs font-semibold text-zinc-400">{label}</span>
+        <span className="text-xs text-zinc-600">{count}</span>
+      </header>
+      <div
+        className={`flex flex-col overscroll-contain ${density === "compact" ? "gap-2 p-2" : "gap-3 p-3"} md:min-h-[120px]`}
+      >
+        {children}
+        {isFilteredEmpty ? (
+          <p className="py-6 text-center text-xs text-zinc-600">No matching tasks in this column</p>
+        ) : count === 0 ? (
+          <p className="py-6 text-center text-xs text-zinc-700">Drop here</p>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/components/kanban/kanban-status-context.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { KanbanStatusConfig } from "@/lib/kanban-status";
+
+const KanbanStatusContext = createContext<KanbanStatusConfig[] | null>(null);
+
+export function KanbanStatusProvider({
+  statuses,
+  children,
+}: {
+  statuses: KanbanStatusConfig[];
+  children: React.ReactNode;
+}) {
+  return (
+    <KanbanStatusContext.Provider value={statuses}>
+      {children}
+    </KanbanStatusContext.Provider>
+  );
+}
+
+export function useKanbanStatuses(): KanbanStatusConfig[] {
+  const ctx = useContext(KanbanStatusContext);
+  if (!ctx) {
+    throw new Error("useKanbanStatuses must be used within KanbanStatusProvider");
+  }
+  return ctx;
+}

package/components/landing/calendar-sandbox.test.tsx

@@ -0,0 +1,15 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { createMockWorkspace } from "@/components/landing/mock-workspace";
+import { CalendarSandbox } from "@/components/landing/calendar-sandbox";
+
+describe("CalendarSandbox", () => {
+  it("shows month grid with task chips", () => {
+    render(<CalendarSandbox workspace={createMockWorkspace()} />);
+
+    expect(screen.getByText("Calendar")).toBeInTheDocument();
+    expect(screen.getByText("June 2026")).toBeInTheDocument();
+    expect(screen.getByText("Tighten hero copy")).toBeInTheDocument();
+  });
+});

package/components/landing/calendar-sandbox.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useMemo } from "react";
+import type { MockWorkspace } from "@/components/landing/mock-workspace";
+
+const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+const STATUS_CHIP: Record<string, string> = {
+  Open: "bg-zinc-600",
+  "In Progress": "bg-blue-600",
+  Review: "bg-amber-600",
+  Done: "bg-emerald-600",
+};
+
+export function CalendarSandbox({ workspace }: { workspace: MockWorkspace }) {
+  const year = 2026;
+  const month = 5; // June (0-indexed)
+  const today = "2026-06-14";
+
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const startDow = firstDay.getDay();
+  const totalCells = Math.ceil((startDow + lastDay.getDate()) / 7) * 7;
+
+  const cellKeys: (string | null)[] = Array.from({ length: totalCells }, (_, i) => {
+    const d = i - startDow + 1;
+    if (d < 1 || d > lastDay.getDate()) return null;
+    return `2026-06-${String(d).padStart(2, "0")}`;
+  });
+
+  const weeks: (string | null)[][] = [];
+  for (let i = 0; i < cellKeys.length; i += 7) weeks.push(cellKeys.slice(i, i + 7));
+
+  const tasksByDate = useMemo(() => {
+    const map: Record<string, typeof workspace.tasks> = {};
+    for (const task of workspace.tasks) {
+      (map[task.dueDate] ??= []).push(task);
+    }
+    return map;
+  }, [workspace.tasks]);
+
+  return (
+    <div className="flex h-full flex-col rounded-xl border border-zinc-800 bg-zinc-950">
+      <div className="border-b border-zinc-800 px-4 py-2.5 flex items-center justify-between">
+        <div>
+          <p className="text-[11px] uppercase tracking-wider text-zinc-600">Calendar</p>
+          <p className="text-xs text-zinc-500">June 2026</p>
+        </div>
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="grid grid-cols-7 border-b border-zinc-800">
+          {DAYS.map((d) => (
+            <div key={d} className="py-1.5 text-center text-[11px] font-medium text-zinc-600">{d}</div>
+          ))}
+        </div>
+
+        <div className="flex-1 flex flex-col">
+          {weeks.map((week, wi) => (
+            <div key={wi} className="grid grid-cols-7 flex-1 border-b border-zinc-800/40">
+              {week.map((key, di) => {
+                const isToday = key === today;
+                const isCurrentMonth = key !== null;
+                const dayTasks = key ? (tasksByDate[key] ?? []) : [];
+
+                return (
+                  <div
+                    key={di}
+                    className={`border-r border-zinc-800/60 p-1.5 flex flex-col gap-1 ${
+                      !isCurrentMonth ? "bg-zinc-900/20" : ""
+                    }`}
+                  >
+                    {key && (
+                      <>
+                        <div className={`mb-0.5 flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-medium ${
+                          isToday ? "bg-blue-500 text-white" : "text-zinc-600"
+                        }`}>
+                          {new Date(key + "T00:00:00").getDate()}
+                        </div>
+                        <div className="flex flex-col gap-0.5">
+                          {dayTasks.slice(0, 3).map((task) => (
+                            <div
+                              key={task.id}
+                              className={`truncate rounded border border-black/20 px-1 py-0.5 text-[10px] text-white ${
+                                STATUS_CHIP[task.status] ?? "bg-zinc-600"
+                              }`}
+                              title={task.title}
+                            >
+                              {task.title}
+                            </div>
+                          ))}
+                          {dayTasks.length > 3 && (
+                            <span className="text-[10px] text-zinc-600 pl-0.5">+{dayTasks.length - 3} more</span>
+                          )}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/landing/graph-sandbox.test.tsx

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { createMockWorkspace } from "@/components/landing/mock-workspace";
+import { GraphSandbox } from "@/components/landing/graph-sandbox";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn(), refresh: vi.fn() }),
+  usePathname: () => "/",
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+class MockResizeObserver {
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+}
+global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+
+describe("GraphSandbox", () => {
+  it("renders the graph view header", () => {
+    render(<GraphSandbox workspace={createMockWorkspace()} />);
+
+    expect(screen.getByText("Graph")).toBeInTheDocument();
+    expect(screen.getByText("Relationship view")).toBeInTheDocument();
+  });
+});

package/components/landing/graph-sandbox.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import { GraphView } from "@/components/graph/graph-view";
+import type { GraphViewHandle } from "@/components/graph/graph-types";
+import type { GraphNode, GraphEdge } from "@/app/api/graph/route";
+import type { MockWorkspace } from "@/components/landing/mock-workspace";
+
+export function GraphSandbox({ workspace }: { workspace: MockWorkspace }) {
+  const graphRef = useRef<GraphViewHandle>(null);
+
+  const { nodes, edges } = useMemo(() => {
+    const n: GraphNode[] = [];
+    const e: GraphEdge[] = [];
+    const edgeSet = new Set<string>();
+
+    function addEdge(source: string, target: string, type: GraphEdge["type"]) {
+      const key = `${source}→${target}:${type}`;
+      if (edgeSet.has(key)) return;
+      edgeSet.add(key);
+      e.push({ source, target, type });
+    }
+
+    // Folder
+    n.push({ id: `folder-${workspace.folder.id}`, type: "folder", label: workspace.folder.name });
+
+    // Notes
+    for (const note of workspace.notes) {
+      n.push({ id: `note-${note.id}`, type: "note", label: note.title, href: "#" });
+      addEdge(`folder-${workspace.folder.id}`, `note-${note.id}`, "contains");
+    }
+
+    // Tasks and assignees
+    for (const task of workspace.tasks) {
+      const note = workspace.notes.find((n) => n.id === task.noteId);
+      if (!note) continue;
+
+      const isAgent = task.assignee === "agent";
+      const taskNodeId = `task-${task.id}`;
+      n.push({
+        id: taskNodeId,
+        type: isAgent ? "agent" : "task",
+        label: task.title,
+        status: task.status,
+      });
+      addEdge(`note-${note.id}`, taskNodeId, "contains");
+
+      // Person node
+      const person = workspace.team.find((t) => t.id === task.assignee);
+      if (person) {
+        const personId = `person-${person.id}`;
+        if (!n.some((x) => x.id === personId)) {
+          n.push({ id: personId, type: "person", label: person.name });
+        }
+        addEdge(taskNodeId, personId, "assigned");
+      }
+    }
+
+    return { nodes: n, edges: e };
+  }, [workspace]);
+
+  return (
+    <div className="h-full flex flex-col rounded-xl border border-zinc-800 bg-zinc-950 overflow-hidden">
+      <div className="border-b border-zinc-800 px-4 py-2.5">
+        <p className="text-[11px] uppercase tracking-wider text-zinc-600">Graph</p>
+        <p className="text-xs text-zinc-500">Relationship view</p>
+      </div>
+      <div className="flex-1 flex flex-col min-h-0">
+        <GraphView
+          ref={graphRef}
+          nodes={nodes}
+          edges={edges}
+          selectedNoteIds={[]}
+          searchQuery=""
+          onNoteSelect={() => {}}
+        />
+      </div>
+    </div>
+  );
+}

package/components/landing/kanban-sandbox.test.tsx

@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { createMockWorkspace } from "@/components/landing/mock-workspace";
+import { KanbanSandbox } from "@/components/landing/kanban-sandbox";
+
+describe("KanbanSandbox", () => {
+  it("groups mock tasks by status", () => {
+    render(<KanbanSandbox workspace={createMockWorkspace()} />);
+
+    expect(screen.getByText("Open")).toBeInTheDocument();
+    expect(screen.getByText("In Progress")).toBeInTheDocument();
+    expect(screen.getByText("Review")).toBeInTheDocument();
+    expect(screen.getByText("Done")).toBeInTheDocument();
+    expect(screen.getByText("Build interactive showcase")).toBeInTheDocument();
+  });
+
+  it("shows app-like board metadata on task cards", () => {
+    render(<KanbanSandbox workspace={createMockWorkspace()} />);
+
+    expect(screen.getAllByText("@agent").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("2026-06-15").length).toBeGreaterThan(0);
+  });
+});

package/components/landing/kanban-sandbox.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { MockTask, MockTaskStatus, MockWorkspace } from "@/components/landing/mock-workspace";
+
+const STATUSES: MockTaskStatus[] = ["Open", "In Progress", "Review", "Done"];
+
+export function KanbanSandbox({ workspace }: { workspace: MockWorkspace }) {
+  const [tasks, setTasks] = useState(workspace.tasks);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+
+  const grouped = useMemo(() => {
+    return Object.fromEntries(
+      STATUSES.map((status) => [status, tasks.filter((task) => task.status === status)])
+    ) as Record<MockTaskStatus, MockTask[]>;
+  }, [tasks]);
+
+  function moveTask(taskId: string, status: MockTaskStatus) {
+    setTasks((current) =>
+      current.map((task) => (task.id === taskId ? { ...task, status } : task))
+    );
+  }
+
+  const getPriorityColor = (priority?: string) => {
+    switch (priority) {
+      case "high":
+        return "bg-red-900/30 text-red-400 border-red-900/50";
+      case "medium":
+        return "bg-amber-900/30 text-amber-400 border-amber-900/50";
+      case "low":
+        return "bg-zinc-800 text-zinc-400 border-zinc-700";
+      default:
+        return "bg-zinc-800 text-zinc-500 border-zinc-700";
+    }
+  };
+
+  const getAssigneeColor = (assignee: string) => {
+    if (assignee === "agent") {
+      return "bg-blue-900/30 text-blue-400 border-blue-900/50";
+    }
+    return "bg-zinc-800 text-zinc-400 border-zinc-700";
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="grid gap-3 xl:grid-cols-4 flex-1">
+      {STATUSES.map((status) => (
+        <div
+          key={status}
+          onDragOver={(e) => e.preventDefault()}
+          onDrop={() => {
+            if (draggingId) moveTask(draggingId, status);
+            setDraggingId(null);
+          }}
+          className="rounded-xl border border-zinc-800 bg-zinc-950/80 p-3"
+        >
+          <div className="mb-3 flex items-center justify-between">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{status}</h3>
+            <span className="rounded-full border border-zinc-800 px-2 py-0.5 text-[11px] text-zinc-400">
+              {grouped[status].length}
+            </span>
+          </div>
+
+          <div className="min-h-[300px] space-y-2 rounded-lg bg-zinc-900/60 p-2">
+            {grouped[status].map((task) => (
+              <div
+                key={task.id}
+                draggable
+                onDragStart={() => setDraggingId(task.id)}
+                onDragEnd={() => setDraggingId(null)}
+                className="cursor-grab rounded-xl border border-zinc-800 bg-zinc-900 p-3 text-sm text-zinc-200 shadow-sm active:cursor-grabbing hover:border-zinc-700 transition-colors"
+              >
+                <div className="flex items-start justify-between gap-2 mb-2">
+                  <p className="text-sm text-zinc-100 leading-snug">{task.title}</p>
+                  {task.fileRef && (
+                    <span className="shrink-0 rounded border border-emerald-900/50 bg-emerald-900/20 px-1.5 py-0.5 text-[10px] text-emerald-400">
+                      &lt;{task.fileRef}&gt;
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-wrap items-center gap-2 mt-3">
+                  <span className={`rounded-full border px-2 py-0.5 text-[10px] font-medium ${getAssigneeColor(task.assignee)}`}>
+                    @{task.assignee}
+                  </span>
+                  {task.priority && (
+                    <span className={`rounded border px-1.5 py-0.5 text-[10px] font-medium ${getPriorityColor(task.priority)}`}>
+                      !{task.priority}
+                    </span>
+                  )}
+                  <span className="text-[10px] text-zinc-500">{task.dueDate}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      </div>
+
+    </div>
+  );
+}

package/components/landing/landing-showcase.test.tsx

@@ -0,0 +1,21 @@
+// @vitest-environment jsdom
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { WEB_ICON_PATH } from "@/lib/brand-icons";
+import { LandingShowcase } from "@/components/landing/landing-showcase";
+
+describe("LandingShowcase", () => {
+  it("prefers the dark icon asset for web metadata", () => {
+    expect(WEB_ICON_PATH).toBe("/icon_dark.svg");
+  });
+
+  it("renders four interactive tabs for the landing demo", () => {
+    render(<LandingShowcase />);
+
+    expect(screen.getByRole("tab", { name: "Notes" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Kanban" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "List" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Calendar" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Graph" })).toBeInTheDocument();
+  });
+});

package/components/landing/landing-showcase.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { createMockWorkspace } from "@/components/landing/mock-workspace";
+import { NotesSandbox } from "@/components/landing/notes-sandbox";
+import { KanbanSandbox } from "@/components/landing/kanban-sandbox";
+import { CalendarSandbox } from "@/components/landing/calendar-sandbox";
+import { GraphSandbox } from "@/components/landing/graph-sandbox";
+import { AppLogo } from "@/components/branding/app-logo";
+import { ListSandbox } from "@/components/landing/list-sandbox";
+
+const TABS = ["Notes", "Kanban", "List", "Calendar", "Graph"] as const;
+type Tab = (typeof TABS)[number];
+
+export function LandingShowcase() {
+  const [activeTab, setActiveTab] = useState<Tab>("Notes");
+  const workspace = useMemo(() => createMockWorkspace(), []);
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900 shadow-[0_24px_80px_rgba(0,0,0,0.35)]">
+      <div className="border-b border-zinc-800 px-4 py-3 sm:flex sm:items-center sm:justify-between">
+        <div className="mb-3 sm:mb-0">
+          <AppLogo className="h-5 w-auto" />
+        </div>
+        <div className="inline-flex rounded-lg border border-zinc-800 bg-zinc-950 p-1">
+          {TABS.map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              role="tab"
+              aria-selected={activeTab === tab}
+              onClick={() => setActiveTab(tab)}
+              className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
+                activeTab === tab
+                  ? "bg-zinc-800 text-zinc-100"
+                  : "text-zinc-500 hover:text-zinc-300"
+              }`}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="h-[420px] overflow-hidden bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.04),transparent_40%)] p-4 sm:p-6">
+        {activeTab === "Notes" && <NotesSandbox workspace={workspace} />}
+        {activeTab === "Kanban" && <KanbanSandbox workspace={workspace} />}
+        {activeTab === "List" && <ListSandbox workspace={workspace} />}
+        {activeTab === "Calendar" && <CalendarSandbox workspace={workspace} />}
+        {activeTab === "Graph" && <GraphSandbox workspace={workspace} />}
+      </div>
+    </div>
+  );
+}

package/components/landing/list-sandbox.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useMemo } from "react";
+import type { MockWorkspace } from "@/components/landing/mock-workspace";
+
+export function ListSandbox({ workspace }: { workspace: MockWorkspace }) {
+  const groupedByNote = useMemo(() => {
+    return workspace.notes.map((note) => ({
+      note,
+      tasks: workspace.tasks.filter((task) => task.noteId === note.id),
+    }));
+  }, [workspace]);
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "Open":
+        return "border-zinc-700 bg-zinc-900 text-zinc-300";
+      case "In Progress":
+        return "border-blue-900/50 bg-blue-950/40 text-blue-300";
+      case "Review":
+        return "border-amber-900/50 bg-amber-950/40 text-amber-300";
+      case "Done":
+        return "border-emerald-900/50 bg-emerald-950/40 text-emerald-300";
+      default:
+        return "border-zinc-700 bg-zinc-900 text-zinc-300";
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
+      <div className="border-b border-zinc-800 px-4 py-2.5">
+        <p className="text-[11px] uppercase tracking-wider text-zinc-600">All tasks</p>
+        <p className="text-xs text-zinc-500">{workspace.tasks.length} tasks · {workspace.notes.length} notes</p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {groupedByNote.map(({ note, tasks }) => (
+          <div key={note.id} className="px-3 md:px-6 py-3 border-b border-zinc-800/60">
+            <div className="mb-2 flex items-center gap-2">
+              <span className="text-xs font-medium text-zinc-400">{note.title}</span>
+              <span className="text-[11px] text-zinc-600">{tasks.length}</span>
+            </div>
+            <div className="space-y-0.5">
+              {tasks.map((task) => {
+                const assigneeLabel =
+                  task.assignee === "agent"
+                    ? "@agent"
+                    : `@${task.assignee}`;
+                const dueStr = task.dueDate
+                  ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
+                  : null;
+
+                return (
+                  <div
+                    key={task.id}
+                    className="flex items-start gap-3 rounded-md px-2 py-2 transition-colors hover:bg-zinc-800/40"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm truncate text-zinc-200">{task.title}</p>
+                      <div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-500">
+                        <span className="truncate text-zinc-600">{note.folder}</span>
+                        {dueStr && (
+                          <>
+                            <span>·</span>
+                            <span className="text-zinc-500">{dueStr}</span>
+                          </>
+                        )}
+                        <span>·</span>
+                        <span className={task.assignee === "agent" ? "text-blue-400" : "text-zinc-500"}>
+                          {assigneeLabel}
+                        </span>
+                      </div>
+                    </div>
+                    <span className={`shrink-0 rounded border px-2 py-0.5 text-[10px] font-medium ${getStatusColor(task.status)}`}>
+                      {task.status}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}