@knotpad/app 0.1.0

package/app/page.tsx

@@ -0,0 +1,398 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+import { AppLogo } from "@/components/branding/app-logo";
+import DownloadCTA from "@/components/download-cta";
+import { LandingShowcase } from "@/components/landing/landing-showcase";
+
+export default async function RootPage() {
+  const session = await auth();
+  if (session) redirect("/notes");
+
+  // Local mode (NPX / Electron): skip the marketing landing — go straight
+  // to the login page which offers "Start writing" (guest, no account needed).
+  if (process.env.IS_CLOUD !== "true") redirect("/login");
+
+  return <LandingPage />;
+}
+
+function LandingPage() {
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "SoftwareApplication",
+    name: "Knotpad",
+    description:
+      "Note-first project management with AI agent task routing. Write the note — the tasks come with it.",
+    url: "https://knotpad.app",
+    applicationCategory: "ProductivityApplication",
+    operatingSystem: "Windows, macOS, Linux, Web",
+    offers: [
+      {
+        "@type": "Offer",
+        name: "Personal Free",
+        price: "0",
+        priceCurrency: "USD",
+        description: "Notes, tasks, Kanban, calendar, graph — fully offline",
+      },
+      {
+        "@type": "Offer",
+        name: "Personal Pro",
+        price: "5",
+        priceCurrency: "USD",
+        billingPeriod: "month",
+        description: "Cloud sync across devices with AES-256 encryption",
+      },
+      {
+        "@type": "Offer",
+        name: "Team Pro",
+        price: "5",
+        priceCurrency: "USD",
+        billingPeriod: "month per seat",
+        description: "Shared team workspace with cloud-only notes",
+      },
+    ],
+    publisher: {
+      "@type": "Organization",
+      name: "Nexstrive Services",
+      url: "https://knotpad.app",
+    },
+  };
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+
+      {/* Nav */}
+      <header className="flex items-center justify-between px-8 py-5 border-b border-zinc-900">
+        <div className="flex items-center gap-2">
+          <AppLogo className="h-7 w-auto" />
+          <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400 font-medium lowercase tracking-wider">beta</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Link href="/login" className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors">
+            sign in
+          </Link>
+          <Link
+            href="/register"
+            className="rounded-md bg-zinc-100 px-4 py-1.5 text-sm font-medium text-zinc-900 hover:bg-white transition-colors"
+          >
+            get started free →
+          </Link>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-4xl px-8 pt-24 pb-32 space-y-24">
+
+        {/* Hero */}
+        <section>
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-zinc-800 bg-zinc-900 px-3 py-1">
+            <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
+            <span className="text-xs text-zinc-400">local-first · no account to start</span>
+          </div>
+
+          <h1 className="mb-6 text-5xl font-semibold leading-tight tracking-tight text-zinc-100 sm:text-6xl">
+            Write the note.<br />
+            <span className="text-zinc-500">The tasks come with it.</span>
+          </h1>
+
+          <p className="mb-10 max-w-xl text-lg text-zinc-400 leading-relaxed">
+            Start in a note. Turn checkboxes into real tasks. Assign teammates or AI agents inline,
+            then manage the same work in Kanban, Calendar, and Graph without rewriting anything.
+          </p>
+
+          <DownloadCTA />
+
+          <p className="mt-4 text-xs text-zinc-700">
+            Free forever on your machine · $5/mo to sync · $5/seat for teams
+          </p>
+        </section>
+
+        {/* Product showcase */}
+        <section className="space-y-5">
+          <div>
+            <h2 className="text-base font-semibold text-zinc-200">One note, four views</h2>
+            <p className="mt-1 max-w-2xl text-sm text-zinc-500">
+              Write once in the note, then explore the same work in Kanban, List, Calendar, and Graph.
+            </p>
+          </div>
+          <LandingShowcase />
+        </section>
+
+        {/* Four pillars */}
+        <section className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {[
+            {
+              title: "Notes become tasks",
+              body: "Write the plan once. Knotpad turns checkbox lines into tracked work without sending you through a separate task form.",
+            },
+            {
+              title: "Your team and AI agents share the same source",
+              body: "Assign teammates or @agent in the note itself, then keep everyone aligned in one workflow instead of splitting work across tools.",
+            },
+            {
+              title: "One note, multiple views",
+              body: "Switch between Notes, Kanban, Calendar, and Graph without recreating the work or losing the context behind it.",
+            },
+            {
+              title: "Local-first by default",
+              body: "Start on your own machine, then add cloud sync only when you need it across devices or across a team.",
+            },
+          ].map((p) => (
+            <div key={p.title} className="space-y-2">
+              <h3 className="text-sm font-semibold text-zinc-200">{p.title}</h3>
+              <p className="text-sm text-zinc-500 leading-relaxed">{p.body}</p>
+            </div>
+          ))}
+        </section>
+
+        {/* MCP Integration */}
+        <section className="space-y-5">
+          <div>
+            <h2 className="text-base font-semibold text-zinc-200">AI agents work alongside your team</h2>
+            <p className="mt-1 max-w-2xl text-sm text-zinc-500">
+              Knotpad exposes a full MCP (Model Context Protocol) server. Connect Claude Code, Windsurf, Cursor, or any MCP-compatible tool so your AI assistant can read your workspace, claim tasks, and write notes back — all without leaving your terminal.
+            </p>
+          </div>
+
+          <div className="rounded-xl border border-zinc-800 bg-zinc-900/30 overflow-hidden">
+            <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-zinc-800">
+              <div className="p-6 space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-800 border border-zinc-700">
+                    <span className="text-lg font-bold text-zinc-200">M</span>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-semibold text-zinc-100">Model Context Protocol</h3>
+                    <p className="text-xs text-zinc-500">Standard for AI tool integration</p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-3">
+                    <p className="text-[11px] uppercase tracking-wider text-zinc-600 mb-2">How it works</p>
+                    <ul className="space-y-1.5 text-xs text-zinc-400">
+                      <li>Connect your AI tool with a single MCP token</li>
+                      <li>Your agent reads tasks, notes, and context automatically</li>
+                      <li>Claim work, update status, and append follow-up notes</li>
+                      <li>Changes sync bidirectionally — the note stays the source of truth</li>
+                    </ul>
+                  </div>
+
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-3">
+                    <p className="text-[11px] uppercase tracking-wider text-zinc-600 mb-2">Supported tools</p>
+                    <div className="flex flex-wrap gap-2">
+                      {["Claude Code", "Windsurf", "Cursor", "Trae", "Copilot"].map((tool) => (
+                        <span key={tool} className="rounded-full border border-zinc-700 bg-zinc-900 px-2 py-1 text-[10px] text-zinc-400">
+                          {tool}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-6 space-y-4">
+                <p className="text-[11px] uppercase tracking-wider text-zinc-600">What your agent can do</p>
+                <div className="space-y-2 text-xs">
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-3">
+                    <p className="text-zinc-200 font-medium">Pull tasks & plan with notes</p>
+                    <p className="text-zinc-500 mt-1">Discover open work, read full note context, and understand linked files before starting.</p>
+                  </div>
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-3">
+                    <p className="text-zinc-200 font-medium">Claim & update status</p>
+                    <p className="text-zinc-500 mt-1">Reserve tasks to avoid conflicts, then mark in_progress, review, or done as work progresses.</p>
+                  </div>
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-3">
+                    <p className="text-zinc-200 font-medium">Write & link notes</p>
+                    <p className="text-zinc-500 mt-1">Create new notes, append follow-up tasks, cross-reference other notes, and auto-parse checkboxes into real tasks.</p>
+                  </div>
+                  <div className="rounded-lg border border-zinc-800 bg-zinc-950 p-3">
+                    <p className="text-zinc-200 font-medium">Stay in sync</p>
+                    <p className="text-zinc-500 mt-1">Send heartbeats while working long tasks. Released work goes back to the queue with a reason.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Workspace model */}
+        <section className="space-y-5">
+          <div>
+            <h2 className="text-base font-semibold text-zinc-200">Personal or team. Your call.</h2>
+            <p className="text-sm text-zinc-500 mt-1">
+              Start alone. Add people when you're ready. Or never — the free version has every view and the full note→task workflow.
+              Switch between your personal and team workspaces in one click — your data follows you.
+            </p>
+          </div>
+          <div className="rounded-xl border border-zinc-800 bg-zinc-900/30 divide-y divide-zinc-800">
+            {[
+              {
+                label: "Personal Workspace",
+                sub: "Free on your machine · $5/mo if you want cloud sync",
+                detail: "Everything stays between you and your devices. Upgrade to sync across machines — your notes are AES-256 encrypted at rest and never stored in plaintext on our servers.",
+              },
+              {
+                label: "Team Workspace",
+                sub: "$5/seat/mo · owner pays, members join free",
+                detail: "One person holds the billing. Everyone else just accepts an invite. No awkward “ask your teammate to subscribe” moments.",
+              },
+              {
+                label: "Cloud-only Notes",
+                sub: "Some things shouldn't leave the server.",
+                detail: "Toggle any note to cloud-only. It streams to your team while they're in — but never downloads to their machine. When someone leaves the workspace, they lose access immediately. No local copy to walk away with.",
+              },
+            ].map((w) => (
+              <div key={w.label} className="p-5 space-y-1">
+                <p className="text-sm font-medium text-zinc-200">{w.label}</p>
+                <p className="text-xs text-zinc-500">{w.sub}</p>
+                <p className="text-sm text-zinc-500 leading-relaxed pt-1">{w.detail}</p>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Pricing */}
+        <section className="space-y-5">
+          <div>
+            <h2 className="text-base font-semibold text-zinc-200">Simple pricing.</h2>
+            <p className="text-sm text-zinc-500 mt-1">Free until you need more.</p>
+          </div>
+          <div className="rounded-xl border border-zinc-800 overflow-hidden">
+            <div className="grid sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x divide-zinc-800">
+
+              {/* Personal Free */}
+              <div className="p-8 flex flex-col h-full">
+                <div className="space-y-5">
+                  <div>
+                    <p className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-1">Personal · Free</p>
+                    <p className="text-3xl font-semibold text-zinc-100">$0</p>
+                    <p className="text-xs text-zinc-600 mt-0.5">no card · no account</p>
+                  </div>
+                  <ul className="space-y-2 text-sm text-zinc-400">
+                    {[
+                      "Notes → tasks, automatically",
+                      "Kanban, list, calendar, graph",
+                      "@agent with any MCP tool",
+                      "Fully offline after setup",
+                      "Your machine, your data",
+                    ].map((f) => (
+                      <li key={f} className="flex items-start gap-2">
+                        <span className="text-emerald-500 mt-0.5">✓</span> {f}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="mt-auto pt-5 space-y-2">
+                  <Link
+                    href="/download"
+                    className="inline-flex items-center justify-center w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 transition-colors"
+                  >
+                    Download desktop app →
+                  </Link>
+                  <div className="rounded-md border border-zinc-800 bg-zinc-900 px-3 py-2 flex justify-center">
+                    <code className="text-xs font-mono text-zinc-300">npx @knotpad/app</code>
+                  </div>
+                </div>
+              </div>
+
+              {/* Personal Pro */}
+              <div className="p-8 flex flex-col h-full bg-zinc-900/40">
+                <div className="space-y-5">
+                  <div>
+                    <p className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-1">Personal Pro</p>
+                    <p className="text-3xl font-semibold text-zinc-100">$5 <span className="text-lg font-normal text-zinc-500">/ mo</span></p>
+                    <p className="text-xs text-zinc-600 mt-0.5">cancel anytime</p>
+                  </div>
+                  <ul className="space-y-2 text-sm text-zinc-400">
+                    {[
+                      "Everything in Free",
+                      "Sync across your devices",
+                      "AES-256 encrypted at rest",
+                      "Cloud MCP for AI agents",
+                    ].map((f) => (
+                      <li key={f} className="flex items-start gap-2">
+                        <span className="text-blue-400 mt-0.5">✓</span> {f}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="mt-auto pt-5">
+                  <Link
+                    href="/register"
+                    className="inline-flex items-center justify-center w-full rounded-md bg-zinc-100 px-3 py-1.5 text-xs font-semibold text-zinc-900 hover:bg-white transition-colors"
+                  >
+                    Get started →
+                  </Link>
+                </div>
+              </div>
+
+              {/* Team Pro */}
+              <div className="p-8 flex flex-col h-full bg-zinc-900/60">
+                <div className="space-y-5">
+                  <div>
+                    <p className="text-xs font-medium uppercase tracking-wider text-zinc-500 mb-1">Team Pro</p>
+                    <p className="text-3xl font-semibold text-zinc-100">$5 <span className="text-lg font-normal text-zinc-500">/ seat / mo</span></p>
+                    <p className="text-xs text-zinc-600 mt-0.5">owner pays for the team</p>
+                  </div>
+                  <ul className="space-y-2 text-sm text-zinc-400">
+                    {[
+                      "Everything in Personal Pro",
+                      "Shared team workspace",
+                      "Owner's personal workspace included",
+                      "Teammates join free — owner covers their seat",
+                      "MCP token per person",
+                      "Cloud-only notes (access revoked on leave)",
+                      "Add or remove seats anytime",
+                    ].map((f) => (
+                      <li key={f} className="flex items-start gap-2">
+                        <span className="text-violet-400 mt-0.5">✓</span> {f}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div className="mt-auto pt-5">
+                  <Link
+                    href="/register"
+                    className="inline-flex items-center justify-center w-full rounded-md bg-zinc-100 px-3 py-1.5 text-xs font-semibold text-zinc-900 hover:bg-white transition-colors"
+                  >
+                    Start with your team →
+                  </Link>
+                </div>
+              </div>
+
+            </div>
+          </div>
+          <p className="text-xs text-zinc-600 text-center">
+            Every plan has the full feature set. Cloud plans add sync, backup, and collaboration.
+            Stripe handles payments — we never store your card.
+          </p>
+        </section>
+
+        {/* Footer */}
+        <footer className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between text-xs text-zinc-700 border-t border-zinc-900 pt-8">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-3">
+              <AppLogo className="h-5 w-auto" />
+              <span>Knotpad · a product of Nexstrive Services</span>
+            </div>
+            <p className="text-[11px] text-zinc-800">
+              Registration: 202303272747 (TR0292898-P) · Kuala Lumpur, Malaysia
+            </p>
+          </div>
+          <div className="flex items-center gap-4 flex-wrap">
+            <Link href="/login" className="hover:text-zinc-500 transition-colors">sign in</Link>
+            <Link href="/terms" className="hover:text-zinc-500 transition-colors">terms</Link>
+            <Link href="/privacy" className="hover:text-zinc-500 transition-colors">privacy</Link>
+            <span className="text-zinc-800">or just run it:</span>
+            <code className="font-mono hover:text-zinc-500 transition-colors">npx @knotpad/app</code>
+          </div>
+        </footer>
+
+      </main>
+    </div>
+  );
+}

package/app/privacy/page.tsx

@@ -0,0 +1,69 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { AppLogo } from "@/components/branding/app-logo";
+
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+  description:
+    "Privacy Policy for Knotpad — how we handle account, workspace, billing, and usage data.",
+};
+
+export default function PrivacyPage() {
+  return (
+    <main className="min-h-screen bg-zinc-950 px-6 py-12 text-zinc-100">
+      <div className="mx-auto max-w-3xl space-y-10">
+        <div className="space-y-4">
+          <Link href="/" className="inline-flex">
+            <AppLogo className="h-8 w-auto" />
+          </Link>
+          <div className="space-y-2">
+            <h1 className="text-3xl font-semibold tracking-tight">Privacy Policy</h1>
+            <p className="text-sm text-zinc-400">
+              This policy explains how Knotpad handles account, workspace, billing, and usage data.
+            </p>
+          </div>
+        </div>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Information we collect</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            Knotpad may process account details, workspace membership data, billing records, and the content
+            you choose to store or sync through the service.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">How we use information</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            We use this information to operate the product, authenticate access, support billing, improve
+            reliability, and provide customer support.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Storage and security</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            Knotpad supports local-first workflows and cloud features. When cloud storage is used, we apply
+            the security controls described in the product, including encrypted-at-rest storage where offered.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Sharing</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            We do not sell your data. Information may be shared with service providers only as needed to run
+            Knotpad features such as authentication, payments, and infrastructure operations.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Your choices</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            You can manage your account, workspace membership, and subscription settings inside Knotpad. You
+            may also stop using the service and request workspace access changes from the relevant owner.
+          </p>
+        </section>
+      </div>
+    </main>
+  );
+}

package/app/robots.tsx

@@ -0,0 +1,25 @@
+import type { MetadataRoute } from "next";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: [
+        "/api/",
+        "/settings/",
+        "/notes/",
+        "/calendar/",
+        "/kanban/",
+        "/list/",
+        "/graph/",
+        "/tasks/",
+        "/upgrade",
+        "/invite/",
+        "/mcp/",
+        "/_next/",
+      ],
+    },
+    sitemap: "https://knotpad.app/sitemap.xml",
+  };
+}

package/app/sitemap.tsx

@@ -0,0 +1,36 @@
+import type { MetadataRoute } from "next";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: "https://knotpad.app",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+    {
+      url: "https://knotpad.app/register",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.8,
+    },
+    {
+      url: "https://knotpad.app/login",
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 0.5,
+    },
+    {
+      url: "https://knotpad.app/terms",
+      lastModified: new Date(),
+      changeFrequency: "yearly",
+      priority: 0.3,
+    },
+    {
+      url: "https://knotpad.app/privacy",
+      lastModified: new Date(),
+      changeFrequency: "yearly",
+      priority: 0.3,
+    },
+  ];
+}

package/app/terms/page.tsx

@@ -0,0 +1,69 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { AppLogo } from "@/components/branding/app-logo";
+
+export const metadata: Metadata = {
+  title: "Terms of Service",
+  description:
+    "Terms of Service for Knotpad — note-first project management by Nexstrive Services.",
+};
+
+export default function TermsPage() {
+  return (
+    <main className="min-h-screen bg-zinc-950 px-6 py-12 text-zinc-100">
+      <div className="mx-auto max-w-3xl space-y-10">
+        <div className="space-y-4">
+          <Link href="/" className="inline-flex">
+            <AppLogo className="h-8 w-auto" />
+          </Link>
+          <div className="space-y-2">
+            <h1 className="text-3xl font-semibold tracking-tight">Terms of Service</h1>
+            <p className="text-sm text-zinc-400">
+              These terms govern your use of Knotpad and related services provided by Nexstrive.
+            </p>
+          </div>
+        </div>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Using Knotpad</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            You may use Knotpad for personal or business note-taking, task tracking, and collaboration in
+            accordance with these terms and all applicable laws.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Accounts and workspace access</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            You are responsible for maintaining the security of your account and for activity that occurs
+            within your workspaces. Team owners are responsible for managing member access appropriately.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Billing</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            Paid Knotpad plans renew according to the billing cycle presented at checkout. You may manage,
+            change, or cancel subscriptions through the billing tools made available in the product.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Acceptable use</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            You may not use Knotpad to violate the rights of others, distribute malicious software, or
+            interfere with the integrity, availability, or security of the service.
+          </p>
+        </section>
+
+        <section className="space-y-3">
+          <h2 className="text-lg font-medium text-zinc-200">Contact</h2>
+          <p className="text-sm leading-7 text-zinc-400">
+            For support or legal questions about these terms, contact Nexstrive through the support channel
+            associated with your Knotpad workspace or deployment.
+          </p>
+        </section>
+      </div>
+    </main>
+  );
+}