@knotpad/app 0.1.0

package/app/(app)/loading.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6">
+      <Image
+        src="/knotpad_logo_full.svg"
+        alt="Knotpad"
+        width={200}
+        height={60}
+        className="h-16 w-auto"
+        priority
+      />
+      <p className="text-sm text-zinc-500">Welcome to Knotpad</p>
+      <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-700 border-t-zinc-400" />
+    </div>
+  );
+}

package/app/(app)/notes/[noteId]/page.tsx

@@ -0,0 +1,84 @@
+import { auth } from "@/auth";
+import { redirect, notFound } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { decryptContent } from "@/lib/note-crypto";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { NoteEditor } from "@/components/notes/note-editor";
+
+export default async function NotePage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ noteId: string }>;
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { noteId } = await params;
+  const { q: highlight } = await searchParams;
+
+  const activeWs = await getActiveWorkspaceId(session.user.id);
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, workspaceId: activeWs ?? undefined },
+    include: {
+      workspace: {
+        include: {
+          members: {
+            include: { user: { select: { id: true, name: true, email: true } } },
+          },
+        },
+      },
+    },
+  });
+  if (!member) redirect("/login");
+
+  const [note, allNotes, allTasks] = await Promise.all([
+    prisma.note.findFirst({
+      where: { id: noteId, workspaceId: member.workspaceId },
+      include: {
+        folder: { select: { id: true, name: true } },
+        tasks: {
+          orderBy: { createdAt: "asc" },
+          include: { assignee: { select: { id: true, name: true, email: true } } },
+        },
+      },
+    }),
+    prisma.note.findMany({
+      where: { workspaceId: member.workspaceId },
+      orderBy: { updatedAt: "desc" },
+      select: { id: true, title: true },
+    }),
+    prisma.task.findMany({
+      where: { workspaceId: member.workspaceId, status: { not: "DONE" } },
+      orderBy: { createdAt: "desc" },
+      take: 200,
+      select: { id: true, title: true, note: { select: { title: true } } },
+    }),
+  ]);
+
+  if (!note) notFound();
+
+  const decryptedContent = await decryptContent(note.content, member.workspaceId);
+
+  const members = member.workspace.members
+    .map((m) => ({
+      handle: `@${(m.user.name ?? m.user.email ?? "user").toLowerCase().replace(/\s+/g, "")}`,
+      label: (m.user.name ?? m.user.email ?? "Unknown") + (m.userId === session.user.id ? " (you)" : ""),
+      isAgent: false,
+    }));
+
+  const notesList = allNotes
+    .filter((n) => n.id !== noteId)
+    .map((n) => ({ id: n.id, title: n.title }));
+
+  const tasksList = allTasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    noteTitle: t.note.title,
+  }));
+
+  // key by note id so the editor fully remounts (fresh state + flush of the
+  // previous note's pending save) when navigating between notes via tabs/links.
+  return <NoteEditor key={note.id} note={{ ...note, content: decryptedContent }} members={members} notesList={notesList} tasksList={tasksList} highlight={highlight} />;
+}

package/app/(app)/notes/layout.tsx

@@ -0,0 +1,30 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { NoteTabs } from "@/components/notes/note-tabs";
+
+/**
+ * Wraps the notes routes with a browser-style tab strip. Only mounts on
+ * /notes/* so the board/list/calendar views stay tab-free.
+ */
+export default async function NotesLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  const notes = workspaceId
+    ? await prisma.note.findMany({
+        where: { workspaceId },
+        orderBy: { updatedAt: "desc" },
+        select: { id: true, title: true },
+      })
+    : [];
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <NoteTabs notes={notes} />
+      <div className="flex flex-1 flex-col overflow-hidden">{children}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+
+export default async function NotesHome() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  const latestNote = workspaceId
+    ? await prisma.note.findFirst({
+        where: { workspaceId },
+        orderBy: { updatedAt: "desc" },
+        select: { id: true },
+      })
+    : null;
+  if (latestNote) redirect(`/notes/${latestNote.id}`);
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-6">
+      <div className="max-w-xs space-y-2">
+        <h2 className="text-lg font-semibold text-zinc-300">No notes yet</h2>
+        <p className="text-sm text-zinc-500">
+          Click the{" "}
+          <span className="font-mono text-xs bg-zinc-800 px-1.5 py-0.5 rounded text-zinc-400">
+            +
+          </span>{" "}
+          button in the panel to create your first note.
+        </p>
+        <p className="text-xs text-zinc-600 mt-3">
+          Write{" "}
+          <code className="bg-zinc-800 px-1 rounded text-zinc-400">- [ ] task @you</code>{" "}
+          inside a note to create tasks automatically.
+        </p>
+      </div>
+    </div>
+  );
+}

package/app/(app)/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AppHome() {
+  redirect("/notes");
+}

package/app/(app)/settings/agent-token/page.tsx

@@ -0,0 +1,59 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { AgentTokenSettings } from "@/components/settings/agent-token-settings";
+import { getMcpUrl } from "@/lib/mcp-url";
+
+export default async function AgentTokenPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const memberships = await prisma.workspaceMember.findMany({
+    where: { userId: session.user.id, revokedAt: null },
+    include: { workspace: true },
+    orderBy: { joinedAt: "asc" },
+  });
+  if (!memberships.length) redirect("/login");
+
+  const tokens = await prisma.mcpToken.findMany({
+    where: {
+      userId: session.user.id,
+      workspaceId: { in: memberships.map((m) => m.workspaceId) },
+      revokedAt: null,
+    },
+  });
+
+  const tokenByWorkspace = Object.fromEntries(tokens.map((t) => [t.workspaceId, t]));
+
+  const workspaces = memberships.map((m) => {
+    const t = tokenByWorkspace[m.workspaceId] ?? null;
+    return {
+      id: m.workspaceId,
+      name: m.workspace.name,
+      slug: m.workspace.slug,
+      existingToken: t
+        ? { id: t.id, alias: t.alias, lastUsed: t.lastUsed?.toISOString() ?? null }
+        : null,
+    };
+  });
+
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000";
+  const mcpUrl = getMcpUrl(appUrl, process.env.NEXT_PUBLIC_MCP_URL);
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-200">Agent Token</h2>
+        <p className="text-sm text-zinc-500 mt-1">
+          Generate a personal MCP token, then reuse the setup templates below whenever you reconnect an AI agent.
+        </p>
+      </div>
+      <AgentTokenSettings
+        workspaces={workspaces}
+        mcpUrl={mcpUrl}
+        appUrl={appUrl}
+        userId={session.user.id}
+      />
+    </div>
+  );
+}

package/app/(app)/settings/backup/page.tsx

@@ -0,0 +1,49 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { BackupRestoreSettings } from "@/components/settings/backup-restore-settings";
+
+export default async function BackupPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, revokedAt: null },
+    include: {
+      workspace: {
+        include: {
+          backupSettings: true,
+        },
+      },
+    },
+  });
+  if (!member) redirect("/login");
+
+  const initialSettings = member.workspace.backupSettings
+    ? {
+        scheduleEnabled: member.workspace.backupSettings.scheduleEnabled,
+        scheduleCadence: member.workspace.backupSettings.scheduleCadence,
+        destinationPath: member.workspace.backupSettings.destinationPath,
+        includeMarkdownZip: member.workspace.backupSettings.includeMarkdownZip,
+        lastBackupAt: member.workspace.backupSettings.lastBackupAt?.toISOString() ?? null,
+        lastBackupStatus: member.workspace.backupSettings.lastBackupStatus,
+        lastBackupError: member.workspace.backupSettings.lastBackupError,
+      }
+    : null;
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-200">Backup & Restore</h2>
+        <p className="mt-1 text-sm text-zinc-500">
+          Configure local backups, download exports, and restore from a backup file.
+        </p>
+      </div>
+      <BackupRestoreSettings
+        isCloudWorkspace={member.workspace.isCloud}
+        isOwner={member.role !== "MEMBER"}
+        initialSettings={initialSettings}
+      />
+    </div>
+  );
+}

package/app/(app)/settings/billing/page.tsx

@@ -0,0 +1,53 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { BillingDashboard } from "@/components/billing/billing-dashboard";
+
+export default async function BillingPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, revokedAt: null },
+    include: {
+      workspace: {
+        include: { _count: { select: { members: { where: { revokedAt: null } } } } },
+      },
+    },
+    orderBy: { joinedAt: "asc" },
+  });
+  if (!member) redirect("/login");
+
+  const { workspace } = member;
+
+  // A guest (local, no-password account) must create a real account before they
+  // can pay — surfaced as a claim step in the dashboard.
+  const me = await prisma.user.findUnique({
+    where: { id: session.user.id },
+    select: { email: true, passwordHash: true },
+  });
+  const isGuest = !!me?.email?.endsWith("@local.brief") && !me?.passwordHash;
+
+  return (
+    <div className="max-w-lg space-y-6">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-200">Billing</h2>
+        <p className="text-sm text-zinc-500 mt-1">
+          Manage your subscription and seats.
+        </p>
+      </div>
+      <BillingDashboard
+        isPro={workspace.isPro}
+        isOwner={member.role === "OWNER"}
+        memberCount={workspace._count.members}
+        seatCount={workspace.seatCount}
+        stripeId={workspace.stripeId}
+        planType={workspace.planType}
+        licenseType={workspace.licenseType}
+        workspaceType={workspace.type}
+        workspaceId={workspace.id}
+        isGuest={isGuest}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { CalendarFeedsSettings } from "@/components/settings/calendar-feeds-settings";
+import { CalendarGeneralSettings } from "@/components/settings/calendar-general-settings";
+
+export default async function CalendarSettingsPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const feeds = await prisma.calendarFeed.findMany({
+    where: { userId: session.user.id },
+    orderBy: { createdAt: "asc" },
+    select: { id: true, label: true, color: true, enabled: true, lastFetchedAt: true, lastError: true },
+  });
+
+  return (
+    <div className="max-w-lg space-y-8">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-200">Calendars</h2>
+        <p className="text-sm text-zinc-500 mt-1">
+          Connect read-only calendar subscriptions (Google, Apple, etc.) to see your busy times
+          on the Knotpad calendar. This is import-only — Knotpad never edits these calendars.
+        </p>
+      </div>
+
+      <CalendarGeneralSettings />
+
+      <CalendarFeedsSettings
+        feeds={feeds.map((f) => ({
+          id: f.id,
+          label: f.label,
+          color: f.color,
+          enabled: f.enabled,
+          lastFetchedAt: f.lastFetchedAt?.toISOString() ?? null,
+          lastError: f.lastError,
+        }))}
+      />
+    </div>
+  );
+}

package/app/(app)/settings/layout.test.tsx

@@ -0,0 +1,39 @@
+// @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 SettingsLayout from "@/app/(app)/settings/layout";
+
+const { mockUsePathname } = vi.hoisted(() => ({
+  mockUsePathname: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  usePathname: mockUsePathname,
+}));
+
+describe("SettingsLayout", () => {
+  beforeEach(() => {
+    mockUsePathname.mockReset();
+    mockUsePathname.mockReturnValue("/settings/workspace");
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("filters visible settings tabs from the search field", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SettingsLayout>
+        <div>Body</div>
+      </SettingsLayout>
+    );
+
+    await user.type(screen.getByPlaceholderText("Search settings"), "agent");
+
+    expect(screen.getByText("Agent Token")).toBeInTheDocument();
+    expect(screen.queryByText("Workspace")).not.toBeInTheDocument();
+  });
+});

package/app/(app)/settings/layout.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const tabs = [
+  { href: "/settings/workspace", label: "Workspace" },
+  { href: "/settings/team", label: "Team" },
+  { href: "/settings/billing", label: "Billing" },
+  { href: "/settings/security", label: "Security" },
+  { href: "/settings/backup", label: "Backup & Restore" },
+  { href: "/settings/calendar", label: "Calendars" },
+  { href: "/settings/agent-token", label: "Agent Token" },
+];
+
+const descriptions: Record<string, string> = {
+  "/settings/workspace": "Rename the workspace, adjust defaults, and manage shared workspace behavior.",
+  "/settings/team": "Invite people, manage access, and keep ownership clear.",
+  "/settings/billing": "Review plan status, limits, and billing controls.",
+  "/settings/security": "Manage authentication and account security settings.",
+  "/settings/backup": "Export, restore, and protect your workspace data.",
+  "/settings/calendar": "Control calendars, feeds, and scheduling defaults.",
+  "/settings/agent-token": "Create and revoke agent access with clear operational consequences.",
+};
+
+export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const [query, setQuery] = useState("");
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleTabs = tabs.filter((tab) => tab.label.toLowerCase().includes(normalizedQuery));
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-4 py-3 md:px-6">
+        <h1 className="text-sm font-semibold text-zinc-300">Settings</h1>
+        <p className="mt-1 max-w-2xl text-xs text-zinc-500">
+          {descriptions[pathname] ?? "Manage your workspace configuration."}
+        </p>
+      </div>
+      <div className="flex flex-1 flex-col overflow-hidden md:flex-row">
+        <nav className="min-w-0 shrink-0 border-b border-zinc-800 py-2 md:w-52 md:border-b-0 md:border-r md:py-3">
+          <div className="px-2 pb-2">
+            <input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search settings"
+              className="w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm text-zinc-300 outline-none placeholder:text-zinc-500"
+            />
+          </div>
+          <div className="flex gap-1 overflow-x-auto px-2 [&::-webkit-scrollbar]:hidden md:flex-col md:space-y-0.5">
+            {visibleTabs.map((t) => (
+            <Link
+              key={t.href}
+              href={t.href}
+              className={`flex shrink-0 items-center whitespace-nowrap rounded-md px-3 py-2 text-sm transition-colors ${
+                pathname === t.href
+                  ? "bg-zinc-800 text-zinc-200"
+                  : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
+              }`}
+            >
+              {t.label}
+            </Link>
+            ))}
+          </div>
+        </nav>
+        <div className="min-w-0 flex-1 overflow-y-auto px-4 py-5 md:px-8 md:py-6">{children}</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+import { redirect } from "next/navigation";
+export default function SettingsRoot() {
+  redirect("/settings/workspace");
+}

package/app/(app)/settings/security/page.tsx

@@ -0,0 +1,43 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { SecuritySettings } from "@/components/settings/security-settings";
+
+export default async function SecurityPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id },
+    include: { workspace: true, user: { select: { passwordHash: true, twoFactorEnabled: true } } },
+  });
+  if (!member) redirect("/login");
+
+  const devices = await prisma.deviceSession.findMany({
+    where: { userId: session.user.id, revokedAt: null },
+    orderBy: { lastActive: "desc" },
+  });
+
+  return (
+    <div className="max-w-lg space-y-6">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-200">Security</h2>
+        <p className="text-sm text-zinc-500 mt-1">
+          Manage connected devices, change your password, and restore from cloud.
+        </p>
+      </div>
+      <SecuritySettings
+        isPro={member.workspace.isPro}
+        isOwner={member.role === "OWNER"}
+        devices={devices.map((d) => ({
+          id: d.id,
+          deviceName: d.deviceName,
+          deviceId: d.deviceId,
+          lastActive: d.lastActive.toISOString(),
+        }))}
+        hasPassword={!!member.user.passwordHash}
+        twoFactorEnabled={member.user.twoFactorEnabled}
+      />
+    </div>
+  );
+}

package/app/(app)/settings/team/page.tsx

@@ -0,0 +1,74 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { TeamSettings } from "@/components/settings/team-settings";
+
+export default async function TeamSettingsPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, revokedAt: null },
+    include: {
+      workspace: {
+        include: {
+          members: { where: { revokedAt: null }, include: { user: true } },
+          invites: { where: { acceptedAt: null, expiresAt: { gt: new Date() } } },
+          mcpTokens: {
+            where: { revokedAt: null },
+            include: { user: { select: { id: true, name: true, email: true } } },
+            orderBy: { createdAt: "desc" },
+          },
+        },
+      },
+    },
+  });
+  if (!member) redirect("/login");
+
+  const members = member.workspace.members.map((m) => ({
+    id: m.id,
+    userId: m.userId,
+    name: m.user.name ?? m.user.email ?? "Unknown",
+    email: m.user.email ?? "",
+    role: m.role,
+    joinedAt: m.joinedAt.toISOString(),
+    isCurrentUser: m.userId === session.user.id,
+  }));
+
+  const pendingInvites = member.workspace.invites.map((inv) => ({
+    id: inv.id,
+    email: inv.email,
+    role: inv.role,
+    token: inv.token,
+    expiresAt: inv.expiresAt.toISOString(),
+  }));
+
+  const canManage = member.role === "OWNER" || member.role === "ADMIN";
+
+  const mcpTokens = member.workspace.mcpTokens.map((t) => ({
+    id: t.id,
+    alias: t.alias,
+    userName: t.user.name ?? t.user.email ?? "Unknown",
+    userId: t.userId,
+    lastUsed: t.lastUsed?.toISOString() ?? null,
+  }));
+
+  return (
+    <div className="max-w-2xl space-y-8">
+      <div>
+        <h2 className="text-base font-semibold text-zinc-200">Team</h2>
+        <p className="text-sm text-zinc-500 mt-1">
+          Invite people and manage workspace access.
+        </p>
+      </div>
+      <TeamSettings
+        members={members}
+        pendingInvites={pendingInvites}
+        canManage={canManage}
+        currentUserId={session.user.id}
+        workspaceId={member.workspaceId}
+        mcpTokens={mcpTokens}
+      />
+    </div>
+  );
+}

package/app/(app)/settings/workspace/page.tsx

@@ -0,0 +1,27 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { WorkspaceSettingsClient } from "@/components/settings/workspace-settings-client";
+import { getKanbanStatuses } from "@/lib/kanban-status";
+
+export default async function WorkspaceSettingsPage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, revokedAt: null },
+    include: { workspace: true },
+  });
+  if (!member) redirect("/login");
+
+  const isOwnerOrAdmin = member.role === "OWNER" || member.role === "ADMIN";
+  const kanbanStatuses = await getKanbanStatuses(member.workspace.id);
+
+  return (
+    <WorkspaceSettingsClient
+      workspace={member.workspace}
+      kanbanStatuses={kanbanStatuses}
+      canEdit={isOwnerOrAdmin}
+    />
+  );
+}