@knotpad/app 0.1.0

package/README.md

@@ -0,0 +1,167 @@
+# Knotpad
+
+> Note-first project management. Write a note — tasks appear automatically.
+> Assign them to teammates or AI agents, right from your prose.
+
+---
+
+## Quick start (recommended)
+
+```bash
+npx @knotpad/app
+```
+
+That's it. Knotpad sets up a local database, syncs the schema, and opens your browser at `http://localhost:3000`.
+
+**Requirements:** Node 18+ and PostgreSQL running locally.
+
+Don't have PostgreSQL? Spin one up in 10 seconds:
+
+```bash
+docker run -d -p 5432:5432 \
+  -e POSTGRES_USER=brief \
+  -e POSTGRES_PASSWORD=brief \
+  -e POSTGRES_DB=brief \
+  postgres:16-alpine
+```
+
+Then `npx @knotpad/app`.
+
+**Update:**
+
+```bash
+npx @knotpad/app@latest
+```
+
+---
+
+## Docker (self-host)
+
+Download [`docker-compose.yml`](./docker-compose.yml), then:
+
+```bash
+# 1. Set your secrets
+cp .env.example .env
+# Edit .env: set NEXTAUTH_SECRET, MCP_SECRET (generate with: openssl rand -base64 32)
+
+# 2. Start everything
+docker compose up
+```
+
+App: `http://localhost:3000`
+MCP: `http://localhost:3001/mcp`
+
+---
+
+## How it works
+
+Write notes in plain markdown. Use `[ ]` checkboxes to create tasks:
+
+```markdown
+## Build Login Page
+
+The login screen should feel premium.
+
+### Tasks
+- [ ] Prepare typography @thillagen
+- [ ] Prepare design @iqbal
+- [ ] Build the page using <plan.md> @agent
+```
+
+On save, Knotpad:
+- Parses every `[ ]` and creates a task record with a UUID
+- Resolves `@mentions` to team members or the agent pool
+- Tasks appear in Kanban, List, Calendar, and Graph views immediately
+- Status changes propagate back to inline badges in the note
+
+---
+
+## Views
+
+| View | What it shows |
+|---|---|
+| **Notes** | Markdown editor with live task badges |
+| **Kanban** | Open → In Progress → Review → Done columns, drag to move |
+| **List** | Tasks grouped by note, sortable |
+| **Calendar** | Tasks by due date, drag to reschedule |
+| **Graph** | Obsidian-style relationship graph (notes, tasks, people, agents) |
+
+---
+
+## AI agent integration
+
+Knotpad is tool-agnostic. Generate your MCP token in **Settings → Agent Token**, then paste it into your preferred AI tool:
+
+**Claude Code:**
+```bash
+claude mcp add knotpad \
+  --url http://localhost:3001/mcp \
+  --token <your-mcp-token>
+```
+
+**Cursor / Windsurf / Trae:** The settings page auto-generates the correct config for each tool.
+
+### Agent workflow
+
+```bash
+# In your terminal (via Claude Code or any MCP client)
+> get_tasks()
+
+Available agent tasks (3):
+  [1] Build login page <plan.md>   · login_brief.md
+  [2] Write auth API endpoint       · api_spec.md
+  [3] Fix N+1 on user query        · db_notes.md
+
+Pick tasks (e.g. 1,3 or 'all'): 1
+
+✓ Claimed: Build login page → @agent:thillagen
+
+> update_task(1, "done")
+✓ Task marked done · note updated to [x] · audit logged
+```
+
+---
+
+## Pricing
+
+| | Free (Local) | Pro (Cloud) |
+|---|---|---|
+| Price | $0 forever | $5/seat/month |
+| Notes & tasks | Unlimited | Unlimited |
+| AI agents | Unlimited | Unlimited |
+| Views | All 5 | All 5 |
+| Cloud sync | — | AES-256 encrypted at rest |
+| Team seats | — | Invite unlimited humans |
+| Cloud backup | — | Automatic |
+| MCP | localhost | mcp.$NEXT_PUBLIC_APP_DOMAIN |
+
+---
+
+## Environment variables
+
+See [`.env.example`](./.env.example) for the full list. The key ones:
+
+```env
+DATABASE_URL="postgresql://brief:brief@localhost:5432/brief"
+NEXTAUTH_SECRET="generate: openssl rand -base64 32"
+MCP_SECRET="generate: openssl rand -base64 32"
+
+# Cloud/paid tier only
+STRIPE_SECRET_KEY=""
+STRIPE_WEBHOOK_SECRET=""
+STRIPE_PRICE_ID_PERSONAL_PRO=""
+STRIPE_PRICE_ID_TEAM_PRO=""
+IS_CLOUD="false"   # set to "true" on your VPS
+```
+
+---
+
+## Stack
+
+Next.js 16 · PostgreSQL · Prisma 7 · shadcn/ui · Tailwind CSS · NextAuth.js · Stripe · AES-256
+
+---
+
+## License
+
+MIT — Built by [Nexstrive](https://nexstrive.com)

package/app/(app)/calendar/page.tsx

@@ -0,0 +1,57 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { CalendarView } from "@/components/calendar/calendar-view";
+
+export default async function CalendarPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ note?: string; month?: string; folder?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { note: filterNoteId, month, folder: filterFolderId } = await searchParams;
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  if (!workspaceId) redirect("/login");
+
+  const tasks = await prisma.task.findMany({
+    where: {
+      workspaceId,
+      ...(filterNoteId ? { noteId: filterNoteId } : {}),
+      ...(filterFolderId && { note: { folderId: filterFolderId } }),
+      status: { not: "DONE" },
+    },
+    orderBy: { dueDate: "asc" },
+    include: {
+      note: { select: { id: true, title: true } },
+      assignee: { select: { id: true, name: true } },
+    },
+  });
+
+  const serialized = tasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    startDate: t.startDate?.toISOString() ?? null,
+    dueDate: t.dueDate?.toISOString() ?? null,
+    noteId: t.noteId,
+    noteTitle: t.note.title,
+    assigneeName: t.assignee?.name ?? null,
+    assigneeType: t.assigneeType,
+    claimedByAlias: t.claimedByAlias,
+  }));
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">
+          {filterFolderId ? "Filtered tasks" : "Calendar"}
+        </h1>
+      </div>
+      <CalendarView tasks={serialized} initialMonth={month} filterNoteId={filterNoteId} filterFolderId={filterFolderId} />
+    </div>
+  );
+}

package/app/(app)/error.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle } from "lucide-react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Surfaces in the server/console; hook a real error tracker here later.
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+      <AlertTriangle size={28} className="text-amber-500" />
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-zinc-300">Something went wrong</p>
+        <p className="max-w-sm text-xs text-zinc-600">
+          This view failed to load. You can retry, or head back to your notes.
+        </p>
+      </div>
+      <button
+        onClick={reset}
+        className="rounded-md border border-zinc-700 px-3 py-1.5 text-sm text-zinc-300 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-100"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/app/(app)/graph/page.tsx

@@ -0,0 +1,32 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { GraphPage } from "@/components/graph/graph-page";
+
+export default async function GraphRoute({
+  searchParams,
+}: {
+  searchParams: Promise<{ notes?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { notes: notesParam } = await searchParams;
+  const selectedNoteIds = notesParam ? notesParam.split(",").filter(Boolean) : [];
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">
+          Graph
+          {selectedNoteIds.length > 0 && (
+            <span className="ml-2 text-xs font-normal text-zinc-500">
+              — {selectedNoteIds.length} note{selectedNoteIds.length > 1 ? "s" : ""} selected
+            </span>
+          )}
+        </h1>
+      </div>
+      <GraphPage selectedNoteIds={selectedNoteIds} />
+    </div>
+  );
+}

package/app/(app)/guide/page.tsx

@@ -0,0 +1,21 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { GuideView } from "@/components/guide/guide-view";
+
+export const metadata = {
+  title: "User Guide - Knotpad",
+};
+
+export default async function GuidePage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">User Guide</h1>
+      </div>
+      <GuideView />
+    </div>
+  );
+}

package/app/(app)/kanban/loading.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function KanbanLoading() {
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <Skeleton className="h-4 w-20" />
+      </div>
+      <div className="flex flex-1 flex-col gap-3 overflow-hidden p-3 md:flex-row md:p-4">
+        {[0, 1, 2].map((c) => (
+          <div
+            key={c}
+            className="flex w-full shrink-0 flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/40 p-2 md:w-64"
+          >
+            <Skeleton className="mb-1 h-4 w-24" />
+            {[0, 1, 2].map((card) => (
+              <Skeleton key={card} className="h-14 w-full" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/(app)/kanban/page.tsx

@@ -0,0 +1,59 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { KanbanBoard } from "@/components/kanban/kanban-board";
+
+export default async function KanbanPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ note?: string; folder?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { note: filterNoteId, folder: filterFolderId } = await searchParams;
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  if (!workspaceId) redirect("/login");
+
+  const tasks = await prisma.task.findMany({
+    where: {
+      workspaceId,
+      ...(filterNoteId && { noteId: filterNoteId }),
+      ...(filterFolderId && { note: { folderId: filterFolderId } }),
+    },
+    orderBy: { createdAt: "asc" },
+    include: {
+      note: { select: { id: true, title: true, folder: { select: { id: true, name: true } } } },
+      assignee: { select: { id: true, name: true, email: true } },
+    },
+  });
+
+  // Serialize dates for the client component
+  const serialized = tasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    claimedBy: t.claimedBy,
+    claimedByAlias: t.claimedByAlias,
+    lastHeartbeat: t.lastHeartbeat?.toISOString() ?? null,
+    assigneeType: t.assigneeType,
+    assignee: t.assignee,
+    note: t.note,
+    dueDate: t.dueDate?.toISOString() ?? null,
+  }));
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">
+          {filterNoteId || filterFolderId ? "Filtered tasks" : "Kanban"}
+        </h1>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <KanbanBoard tasks={serialized} filterNoteId={filterNoteId} filterFolderId={filterFolderId} />
+      </div>
+    </div>
+  );
+}

package/app/(app)/layout.tsx

@@ -0,0 +1,122 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { IconBar } from "@/components/layout/icon-bar";
+import { NotesPanel } from "@/components/layout/notes-panel";
+import { ProBanner } from "@/components/layout/pro-banner";
+import { AppShell } from "@/components/layout/app-shell";
+import { PaywallScreen } from "@/components/layout/paywall-screen";
+import { SessionProvider } from "next-auth/react";
+import { getActiveWorkspaceId, listUserWorkspaces } from "@/lib/workspace";
+import { getKanbanStatuses } from "@/lib/kanban-status";
+import { isWorkspacePro } from "@/lib/license";
+import { KanbanStatusProvider } from "@/components/kanban/kanban-status-context";
+import { CommandPaletteProvider } from "@/components/command/command-palette";
+import { BackupScheduler } from "@/components/layout/backup-scheduler";
+
+// Cap the shell's eager note/task fetch so navigation stays fast at scale.
+const LAYOUT_LIST_CAP = 500;
+
+const IS_CLOUD = process.env.IS_CLOUD === "true";
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const [workspaceId, allWorkspaces] = await Promise.all([
+    getActiveWorkspaceId(session.user.id),
+    listUserWorkspaces(session.user.id),
+  ]);
+
+  if (!workspaceId) {
+    // On cloud, a user with no Pro-accessible workspace isn't missing
+    // membership — they're FREE-only and must upgrade or be invited to a team.
+    if (IS_CLOUD) return <PaywallScreen />;
+    redirect("/login");
+  }
+
+  const workspaces = IS_CLOUD ? allWorkspaces.filter((w) => w.isPro) : allWorkspaces;
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, workspaceId },
+    include: {
+      workspace: {
+        include: {
+          notes: {
+            orderBy: { updatedAt: "desc" },
+            // Bounded so the shell (and command-palette index) stay fast on
+            // large workspaces. Matches the cap on GET /api/notes.
+            take: LAYOUT_LIST_CAP,
+            include: {
+              folder: { select: { id: true, name: true } },
+              _count: { select: { tasks: true } },
+              tasks: {
+                where: { status: { in: ["CLAIMED", "IN_PROGRESS", "REVIEW"] } },
+                select: { id: true },
+              },
+            },
+          },
+          folders: { orderBy: { name: "asc" }, select: { id: true, name: true } },
+          tasks: {
+            orderBy: { updatedAt: "desc" },
+            take: LAYOUT_LIST_CAP,
+            select: {
+              id: true,
+              title: true,
+              status: true,
+              note: { select: { id: true, title: true } },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!member) redirect("/login");
+
+  const notes = member.workspace.notes.map((n) => ({
+    id: n.id,
+    title: n.title,
+    taskCount: n._count.tasks,
+    activeTaskCount: n.tasks.length,
+    isLocked: n.isLocked,
+    folderId: n.folderId,
+  }));
+  const folders = member.workspace.folders;
+  const tasks = member.workspace.tasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    note: t.note,
+  }));
+  const latestNoteId = notes[0]?.id;
+  const notesHref = latestNoteId ? `/notes/${latestNoteId}` : "/notes";
+
+  const commandData = {
+    notes: notes.map((n) => ({ id: n.id, title: n.title })),
+    tasks: tasks.map((t) => ({ id: t.id, title: t.title, note: t.note })),
+    folders,
+    notesHref,
+  };
+
+  const kanbanStatuses = await getKanbanStatuses(workspaceId);
+
+  return (
+    <SessionProvider>
+      <BackupScheduler />
+      <KanbanStatusProvider statuses={kanbanStatuses}>
+        <CommandPaletteProvider data={commandData}>
+          <div className="flex h-full flex-col overflow-hidden">
+            <ProBanner initialIsPro={isWorkspacePro(member.workspace)} />
+            <div className="flex flex-1 min-h-0 overflow-hidden">
+              <IconBar latestNoteId={latestNoteId} />
+              <AppShell panel={<NotesPanel notes={notes} folders={folders} tasks={tasks} workspaces={workspaces} activeWorkspaceId={workspaceId} />}>
+                {children}
+              </AppShell>
+            </div>
+          </div>
+        </CommandPaletteProvider>
+      </KanbanStatusProvider>
+    </SessionProvider>
+  );
+}

package/app/(app)/list/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ListLoading() {
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-3 py-3 md:px-6">
+        <Skeleton className="h-4 w-24" />
+      </div>
+      <div className="flex flex-col gap-4 px-3 py-4 md:px-6">
+        {[0, 1, 2].map((g) => (
+          <div key={g} className="space-y-2">
+            <Skeleton className="h-3 w-20" />
+            {[0, 1, 2].map((r) => (
+              <Skeleton key={r} className="h-10 w-full" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/(app)/list/page.tsx

@@ -0,0 +1,137 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { TaskList } from "@/components/tasks/task-list";
+import { TaskListFilters } from "@/components/tasks/task-list-filters";
+import { TaskStatus } from "@/app/generated/prisma/client";
+
+export default async function ListPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ 
+    note?: string; 
+    sort?: string; 
+    folder?: string; 
+    status?: string;
+    assigneeType?: string;
+    overdue?: string;
+    hasDueDate?: string;
+  }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { 
+    note: filterNoteId, 
+    sort = "status", 
+    folder: filterFolderId,
+    status: statusFilter,
+    assigneeType: assigneeFilter,
+    overdue: overdueOnly,
+    hasDueDate: hasDueDateFilter,
+  } = await searchParams;
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  if (!workspaceId) redirect("/login");
+
+  // Build status filter condition
+  const statusFilterCondition = statusFilter
+    ? { status: { in: statusFilter.split(",") as TaskStatus[] } }
+    : {};
+
+  // Build assignee filter condition
+  const assigneeFilterCondition = assigneeFilter
+    ? { assigneeType: assigneeFilter as "HUMAN" | "AGENT" }
+    : {};
+
+  // Build overdue filter condition
+  const now = new Date();
+  const overdueFilterCondition = overdueOnly === "true"
+    ? { dueDate: { lt: now }, NOT: { status: "DONE" as TaskStatus } }
+    : {};
+
+  // Build hasDueDate filter condition
+  const hasDueDateCondition = hasDueDateFilter === "true"
+    ? { dueDate: { not: null } }
+    : {};
+
+  // Get folders for filter dropdown
+  const foldersPromise = prisma.folder.findMany({
+    where: { workspaceId },
+    select: { id: true, name: true },
+    orderBy: { name: "asc" },
+  });
+
+  const [tasks, filterNote, folders] = await Promise.all([
+    prisma.task.findMany({
+      where: {
+        workspaceId,
+        ...(filterNoteId && { noteId: filterNoteId }),
+        ...(filterFolderId && { note: { folderId: filterFolderId } }),
+        ...statusFilterCondition,
+        ...assigneeFilterCondition,
+        ...overdueFilterCondition,
+        ...hasDueDateCondition,
+      },
+      orderBy: { createdAt: "desc" },
+      include: {
+        note: { select: { id: true, title: true, folder: { select: { id: true, name: true } } } },
+        assignee: { select: { id: true, name: true, email: true, image: true } },
+      },
+    }),
+    filterNoteId
+      ? prisma.note.findFirst({ where: { id: filterNoteId, workspaceId }, select: { title: true } })
+      : Promise.resolve(null),
+    foldersPromise,
+  ]);
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex items-center justify-between border-b border-zinc-800 px-3 md:px-6 py-3">
+        <div className="flex items-center gap-2">
+          <h1 className="text-sm font-semibold text-zinc-300">
+            {filterNoteId || filterFolderId ? "Filtered tasks" : "All Tasks"}
+          </h1>
+          {filterNote && (
+            <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">
+              {filterNote.title}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2 text-xs text-zinc-500">
+          <span>Sort:</span>
+          {(() => {
+            const params = new URLSearchParams();
+            if (filterNoteId) params.set("note", filterNoteId);
+            if (filterFolderId) params.set("folder", filterFolderId);
+            const baseQuery = params.toString();
+            return (
+              <>
+                <a href={`?${baseQuery ? baseQuery + "&" : ""}sort=status`}
+                  className={sort === "status" ? "text-zinc-300" : "hover:text-zinc-300"}>Status</a>
+                <span>/</span>
+                <a href={`?${baseQuery ? baseQuery + "&" : ""}sort=note`}
+                  className={sort === "note" ? "text-zinc-300" : "hover:text-zinc-300"}>Note</a>
+              </>
+            );
+          })()}
+        </div>
+      </div>
+
+      {/* Filter Bar - Tasks 2.4.1-2.4.5 */}
+      <TaskListFilters
+        folders={folders}
+        filterFolderId={filterFolderId}
+        statusFilter={statusFilter}
+        assigneeFilter={assigneeFilter}
+        overdueOnly={overdueOnly}
+        hasDueDateFilter={hasDueDateFilter}
+      />
+
+      <div className="flex-1 overflow-y-auto">
+        <TaskList tasks={tasks} groupBy={sort === "note" ? "note" : "status"} />
+      </div>
+    </div>
+  );
+}