@knotpad/app 0.1.5 → 0.1.6

package/components/tasks/task-row.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import type { Task } from "./task-list-types";
+
+export function TaskRow({
+  task,
+  status,
+  overdue,
+  updating,
+  detailHref,
+  onStatusChange,
+}: {
+  task: Task;
+  status: string;
+  overdue: boolean;
+  updating: boolean;
+  detailHref: string;
+  onStatusChange: (id: string, s: string) => void;
+}) {
+  const kanbanStatuses = useKanbanStatuses();
+
+  const assigneeLabel =
+    task.assigneeType === "AGENT"
+      ? task.claimedByAlias
+        ? `@agent:${task.claimedByAlias}`
+        : "@agent"
+      : task.assignee?.name
+      ? `@${task.assignee.name}`
+      : null;
+
+  const dueDateStr = task.dueDate
+    ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
+    : null;
+
+  return (
+    <div className={`flex items-start gap-3 rounded-md px-3 py-2.5 transition-colors group ${overdue ? "bg-red-950/20 hover:bg-red-950/30" : "hover:bg-zinc-800/50"}`}>
+      <div className="flex-1 min-w-0">
+        <Link href={detailHref} className="block group-hover:text-white transition-colors">
+          <p className={`text-sm truncate ${overdue ? "text-red-300" : "text-zinc-200"}`}>
+            {overdue && <span className="mr-1.5 text-red-400">!</span>}
+            {task.title}
+          </p>
+          <div className="mt-0.5 flex items-center gap-2 text-xs text-zinc-600">
+            <span className="truncate">{task.note.title}</span>
+            {dueDateStr && (
+              <>
+                <span>·</span>
+                <span className={overdue ? "text-red-400 font-medium" : "text-zinc-500"}>
+                  {overdue ? "Due " : ""}{dueDateStr}
+                </span>
+              </>
+            )}
+            {assigneeLabel && (
+              <>
+                <span>·</span>
+                <span className={task.assigneeType === "AGENT" ? "text-blue-500" : "text-zinc-500"}>
+                  {assigneeLabel}
+                </span>
+              </>
+            )}
+          </div>
+        </Link>
+      </div>
+
+      <select
+        value={status}
+        disabled={updating}
+        onChange={(e) => onStatusChange(task.id, e.target.value)}
+        className={`rounded border px-2 py-1 text-xs focus:outline-none ring-focus disabled:opacity-50 cursor-pointer ${
+          overdue
+            ? "border-red-800/60 bg-red-950/40 text-red-300"
+            : "border-zinc-700 bg-zinc-900 text-zinc-400"
+        }`}
+      >
+        {kanbanStatuses.map((s) => (
+          <option key={s.key} value={s.key}>
+            {s.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/components/tasks/task-table-row.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import type { Task } from "./task-list-types";
+
+export function TaskTableRow({
+  task,
+  status,
+  overdue,
+  updating,
+  onStatusChange,
+  isSelected,
+  onSelect,
+  kanbanStatuses,
+  detailHref,
+  onUpdateDueDate,
+  onUpdateAssignee,
+}: {
+  task: Task;
+  status: string;
+  overdue: boolean;
+  updating: boolean;
+  onStatusChange: (taskId: string, newStatus: string) => void;
+  isSelected: boolean;
+  onSelect: () => void;
+  kanbanStatuses: { key: string; label: string; color?: string }[];
+  detailHref: string;
+  onUpdateDueDate?: (taskId: string, dueDate: string | null) => void;
+  onUpdateAssignee?: (taskId: string, assigneeType: "HUMAN" | "AGENT", assigneeId?: string) => void;
+}) {
+  // Format relative time (e.g., "2h ago", "3d ago")
+  function formatRelativeTime(date: string | Date | undefined): string {
+    if (!date) return "-";
+    const then = new Date(date);
+    const now = new Date();
+    const diffMs = now.getTime() - then.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return then.toLocaleDateString();
+  }
+
+  // Get priority badge color
+  function getPriorityColor(priority?: string | null): string {
+    switch (priority?.toLowerCase()) {
+      case "critical": return "text-red-500 font-semibold";
+      case "high": return "text-red-400";
+      case "medium": return "text-yellow-400";
+      case "low": return "text-green-400";
+      default: return "text-zinc-500";
+    }
+  }
+
+  // Get assignee label
+  // Inline edit states
+  const [editingDueDate, setEditingDueDate] = useState(false);
+  const [editingAssignee, setEditingAssignee] = useState(false);
+  const [tempDueDate, setTempDueDate] = useState<string>("");
+  const [tempAssignee, setTempAssignee] = useState<string>("");
+  const [saving, setSaving] = useState(false);
+
+  const assigneeLabel =
+    task.assigneeType === "AGENT"
+      ? task.claimedByAlias
+        ? `@agent:${task.claimedByAlias}`
+        : "@agent"
+      : task.assignee?.name
+      ? `@${task.assignee.name}`
+      : task.assignee?.email
+      ? `@${task.assignee.email.split("@")[0]}`
+      : "-";
+
+  const rowClassName = isSelected
+    ? `ring-1 ring-inset ring-blue-900/30 ${overdue ? "bg-red-950/10" : "bg-blue-950/20"}`
+    : overdue
+      ? "bg-red-950/10 hover:bg-red-950/20"
+      : "hover:bg-zinc-800/30";
+
+  return (
+    <tr className={rowClassName}>
+      {/* Checkbox */}
+      <td className="px-3 py-2">
+        <input
+          type="checkbox"
+          checked={isSelected}
+          onChange={onSelect}
+          className="rounded border-zinc-600 bg-zinc-800 text-blue-600"
+        />
+      </td>
+
+      {/* Title */}
+      <td className="px-4 py-2">
+        <div className="flex items-center gap-2">
+          <Link
+            href={detailHref}
+            className="block truncate text-left text-sm text-zinc-200 hover:text-zinc-100"
+            title={task.title}
+          >
+              {task.title}
+          </Link>
+          {overdue && <span className="text-xs text-red-400">overdue</span>}
+        </div>
+      </td>
+
+      {/* Status dropdown */}
+      <td className="px-4 py-2">
+        <select
+          value={status}
+          disabled={updating}
+          onChange={(e) => onStatusChange(task.id, e.target.value)}
+          className={`text-xs rounded border px-2 py-1 bg-zinc-900 border-zinc-700 text-zinc-300 ${
+            updating ? "opacity-50" : ""
+          }`}
+        >
+          {kanbanStatuses.map((s) => (
+            <option key={s.key} value={s.key}>
+              {s.label}
+            </option>
+          ))}
+        </select>
+      </td>
+
+      {/* Due date - inline editable */}
+      <td className="px-4 py-2">
+        {editingDueDate ? (
+          <div className="flex items-center gap-1">
+            <input
+              type="date"
+              value={tempDueDate}
+              onChange={(e) => setTempDueDate(e.target.value)}
+              className="text-xs bg-zinc-800 border border-zinc-700 rounded px-1 py-0.5 text-zinc-300 w-28"
+              autoFocus
+            />
+            <button
+              onClick={async () => {
+                setSaving(true);
+                await onUpdateDueDate?.(task.id, tempDueDate || null);
+                setSaving(false);
+                setEditingDueDate(false);
+              }}
+              disabled={saving}
+              className="text-xs text-green-500 hover:text-green-400"
+            >
+              ✓
+            </button>
+            <button
+              onClick={() => setEditingDueDate(false)}
+              className="text-xs text-red-500 hover:text-red-400"
+            >
+              ✕
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => {
+              setTempDueDate(task.dueDate ? new Date(task.dueDate).toISOString().split("T")[0] : "");
+              setEditingDueDate(true);
+            }}
+            className={`text-xs ${overdue ? "text-red-400 font-medium" : "text-zinc-400"} hover:text-zinc-200 transition-colors text-left`}
+          >
+            {task.dueDate
+              ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
+              : "-"}
+          </button>
+        )}
+      </td>
+
+      {/* Priority */}
+      <td className="px-4 py-2">
+        <span className={`text-xs ${getPriorityColor(task.priority)}`}>
+          {task.priority || "-"}
+        </span>
+      </td>
+
+      {/* Assignee - inline editable */}
+      <td className="px-4 py-2">
+        {editingAssignee ? (
+          <div className="flex items-center gap-1">
+            <select
+              value={tempAssignee}
+              onChange={(e) => setTempAssignee(e.target.value)}
+              className="text-xs bg-zinc-800 border border-zinc-700 rounded px-1 py-0.5 text-zinc-300"
+              autoFocus
+            >
+              <option value="">Unassigned</option>
+              <option value="AGENT">@agent</option>
+              <option value="HUMAN">Human</option>
+            </select>
+            <button
+              onClick={async () => {
+                setSaving(true);
+                // "" = unassigned (HUMAN with no assignee), "AGENT" = agent task,
+                // "HUMAN:<id>" = assigned to specific human
+                const assigneeType = tempAssignee === "" ? "HUMAN" : tempAssignee.split(":")[0] as "HUMAN" | "AGENT";
+                const assigneeId = tempAssignee.includes(":") ? tempAssignee.split(":")[1] : null;
+                await onUpdateAssignee?.(task.id, assigneeType, assigneeId ?? undefined);
+                setSaving(false);
+                setEditingAssignee(false);
+              }}
+              disabled={saving}
+              className="text-xs text-green-500 hover:text-green-400"
+            >
+              ✓
+            </button>
+            <button
+              onClick={() => setEditingAssignee(false)}
+              className="text-xs text-red-500 hover:text-red-400"
+            >
+              ✕
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => {
+              const currentAssignee = task.assigneeType === "AGENT"
+                ? task.claimedByAlias
+                  ? `AGENT:${task.claimedBy}`
+                  : "AGENT"
+                : task.assignee?.id
+                  ? `HUMAN:${task.assignee.id}`
+                  : "";
+              setTempAssignee(currentAssignee);
+              setEditingAssignee(true);
+            }}
+            className={`text-xs ${task.assigneeType === "AGENT" ? "text-blue-400" : "text-zinc-400"} hover:text-zinc-200 transition-colors text-left`}
+          >
+            {assigneeLabel}
+          </button>
+        )}
+      </td>
+
+      {/* Note/Folder */}
+      <td className="px-4 py-2">
+        <Link
+          href={`/notes/${task.note.id}`}
+          className="block text-xs text-zinc-500 hover:text-zinc-300 truncate max-w-[150px]"
+          title={task.note.title}
+        >
+          {task.note.folder && (
+            <span className="text-zinc-600">{task.note.folder.name} / </span>
+          )}
+          {task.note.title}
+        </Link>
+      </td>
+
+      {/* Updated */}
+      <td className="px-4 py-2">
+        <span className="text-xs text-zinc-500">
+          {formatRelativeTime(task.updatedAt)}
+        </span>
+      </td>
+    </tr>
+  );
+}

package/components/ui/skeleton.tsx

@@ -0,0 +1,3 @@
+export function Skeleton({ className = "" }: { className?: string }) {
+  return <div className={`animate-pulse rounded bg-zinc-800/70 ${className}`} />;
+}

package/components/ui/toast.test.tsx

@@ -0,0 +1,42 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ToastProvider, useToast } from "./toast";
+
+function Trigger() {
+  const toast = useToast();
+  return <button onClick={() => toast("Saved!", "success")}>fire</button>;
+}
+
+describe("ToastProvider", () => {
+  it("shows a toast when triggered, then dismisses it", async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <Trigger />
+      </ToastProvider>
+    );
+
+    // Nothing shown initially.
+    expect(screen.queryByText("Saved!")).toBeNull();
+
+    // Firing a toast renders its message.
+    await user.click(screen.getByText("fire"));
+    expect(await screen.findByText("Saved!")).toBeInTheDocument();
+
+    // Clicking dismiss removes it.
+    await user.click(screen.getByLabelText("Dismiss"));
+    await waitFor(() => expect(screen.queryByText("Saved!")).toBeNull());
+  });
+
+  it("is a no-op outside a provider (default context)", () => {
+    // useToast falls back to a noop so consumers never crash if unwrapped.
+    function Lone() {
+      const toast = useToast();
+      return <button onClick={() => toast("x")}>ok</button>;
+    }
+    render(<Lone />);
+    expect(screen.getByText("ok")).toBeInTheDocument();
+  });
+});

package/components/ui/toast.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+import { Check, AlertTriangle, Info, X } from "lucide-react";
+
+type Variant = "success" | "error" | "info";
+type Toast = { id: number; message: string; variant: Variant };
+
+const ToastCtx = createContext<(message: string, variant?: Variant) => void>(
+  () => {}
+);
+
+export function useToast() {
+  return useContext(ToastCtx);
+}
+
+const VARIANT: Record<Variant, { ring: string; icon: React.ReactNode }> = {
+  success: { ring: "border-emerald-700/60", icon: <Check size={15} className="text-emerald-400" /> },
+  error: { ring: "border-red-700/60", icon: <AlertTriangle size={15} className="text-red-400" /> },
+  info: { ring: "border-zinc-700", icon: <Info size={15} className="text-zinc-400" /> },
+};
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = useCallback((message: string, variant: Variant = "info") => {
+    const id = Date.now() + Math.random();
+    setToasts((t) => [...t, { id, message, variant }]);
+    setTimeout(() => {
+      setToasts((t) => t.filter((x) => x.id !== id));
+    }, 4000);
+  }, []);
+
+  const dismiss = (id: number) => setToasts((t) => t.filter((x) => x.id !== id));
+
+  return (
+    <ToastCtx.Provider value={toast}>
+      {children}
+      {/* Sits above the mobile bottom-nav (bottom-20) and bottom-right on desktop. */}
+      <div
+        className="pointer-events-none fixed inset-x-0 bottom-20 z-[200] flex flex-col items-center gap-2 px-4 md:inset-x-auto md:right-4 md:bottom-4 md:items-end"
+        role="region"
+        aria-live="polite"
+        aria-label="Notifications"
+      >
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={`pointer-events-auto flex w-full max-w-sm items-center gap-2.5 rounded-lg border bg-zinc-900 px-3 py-2.5 shadow-xl ${VARIANT[t.variant].ring}`}
+          >
+            <span className="shrink-0">{VARIANT[t.variant].icon}</span>
+            <span className="flex-1 text-sm text-zinc-200">{t.message}</span>
+            <button
+              onClick={() => dismiss(t.id)}
+              aria-label="Dismiss"
+              className="shrink-0 text-zinc-600 transition-colors hover:text-zinc-300"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastCtx.Provider>
+  );
+}

package/instrumentation.tsx

@@ -0,0 +1,23 @@
+/**
+ * Next.js instrumentation hook — runs once when the server starts,
+ * before any request handlers.
+ *
+ * Local mode (IS_CLOUD=false):
+ *   1. Initialise PGlite (async dynamic import + file open)
+ *   2. Apply any pending SQL migrations to the local DB
+ *
+ * Cloud mode (IS_CLOUD=true):
+ *   No-op. Prisma clients are synchronously initialised at module load,
+ *   and migrations are applied to Neon by the deploy pipeline.
+ */
+export async function register() {
+  if (process.env.NEXT_RUNTIME !== "nodejs") return;
+  if (process.env.IS_CLOUD === "true") return;
+
+  const { initLocalPrisma } = await import("./lib/prisma");
+  await initLocalPrisma();
+
+  const g = global as never as Record<string, unknown>;
+  const { runLocalMigrations } = await import("./lib/db-init");
+  await runLocalMigrations(g.briefPglite as Parameters<typeof runLocalMigrations>[0]);
+}

package/lib/api-error.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from "next/server";
+import type { z } from "zod";
+
+/**
+ * Standard JSON error shape: `{ error, code? }`. Use across all route handlers
+ * so clients can rely on a single contract.
+ */
+export function apiError(message: string, status = 400, code?: string) {
+  return NextResponse.json(
+    code ? { error: message, code } : { error: message },
+    { status }
+  );
+}
+
+export const unauthorized = () => apiError("Unauthorized", 401);
+export const noWorkspace = () => apiError("No workspace", 404);
+export const notFound = (message = "Not found") => apiError(message, 404);
+
+type ParseOk<T> = { data: T; response?: undefined };
+type ParseErr = { data?: undefined; response: NextResponse };
+
+/**
+ * Parse + validate a JSON request body against a zod schema.
+ * On failure returns `{ response }` (a ready-to-return 400) so handlers can do:
+ *
+ *   const parsed = await parseJson(req, schema);
+ *   if (parsed.response) return parsed.response;
+ *   const { ... } = parsed.data;
+ */
+export async function parseJson<T extends z.ZodTypeAny>(
+  req: Request,
+  schema: T
+): Promise<ParseOk<z.infer<T>> | ParseErr> {
+  let raw: unknown;
+  try {
+    raw = await req.json();
+  } catch {
+    return { response: apiError("Invalid JSON body", 400, "INVALID_JSON") };
+  }
+  const result = schema.safeParse(raw);
+  if (!result.success) {
+    const first = result.error.issues[0];
+    const path = first?.path.join(".");
+    const message = first
+      ? `${path ? path + ": " : ""}${first.message}`
+      : "Invalid request";
+    return { response: apiError(message, 400, "VALIDATION") };
+  }
+  return { data: result.data };
+}

package/lib/backup/backup-runner.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { shouldRunScheduledBackup } from "@/lib/backup/backup-runner";
+
+describe("shouldRunScheduledBackup", () => {
+  it("runs only when the schedule is enabled and due", () => {
+    expect(
+      shouldRunScheduledBackup({
+        isElectron: true,
+        isCloudWorkspace: false,
+        scheduleEnabled: true,
+        destinationPath: "C:/Backups",
+        cadence: "DAILY",
+        lastBackupAt: new Date("2026-06-10T08:00:00.000Z"),
+        now: new Date("2026-06-11T08:01:00.000Z"),
+      })
+    ).toBe(true);
+  });
+
+  it("skips cloud workspaces", () => {
+    expect(
+      shouldRunScheduledBackup({
+        isElectron: true,
+        isCloudWorkspace: true,
+        scheduleEnabled: true,
+        destinationPath: "C:/Backups",
+        cadence: "DAILY",
+        lastBackupAt: null,
+        now: new Date("2026-06-13T00:00:00.000Z"),
+      })
+    ).toBe(false);
+  });
+});

package/lib/backup/backup-runner.ts

@@ -0,0 +1,19 @@
+import { isBackupDue } from "@/lib/backup/backup-schedule";
+import type { BackupCadence } from "@/lib/backup/types";
+
+export function shouldRunScheduledBackup(input: {
+  isElectron: boolean;
+  isCloudWorkspace: boolean;
+  scheduleEnabled: boolean;
+  destinationPath: string | null;
+  cadence: BackupCadence;
+  lastBackupAt: Date | null;
+  now?: Date;
+}) {
+  if (!input.isElectron) return false;
+  if (input.isCloudWorkspace) return false;
+  if (!input.scheduleEnabled) return false;
+  if (!input.destinationPath) return false;
+
+  return isBackupDue(input.cadence, input.lastBackupAt, input.now ?? new Date());
+}

package/lib/backup/backup-schedule.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { getNextBackupDueAt, isBackupDue } from "@/lib/backup/backup-schedule";
+
+describe("backup schedule cadence", () => {
+  it("marks a daily backup due after 24 hours", () => {
+    const lastBackupAt = new Date("2026-06-10T08:00:00.000Z");
+    const now = new Date("2026-06-11T08:01:00.000Z");
+
+    expect(isBackupDue("DAILY", lastBackupAt, now)).toBe(true);
+  });
+
+  it("returns the next monthly due date from the last success time", () => {
+    const lastBackupAt = new Date("2026-01-31T09:00:00.000Z");
+
+    expect(getNextBackupDueAt("MONTHLY", lastBackupAt)?.toISOString()).toBe(
+      "2026-02-28T09:00:00.000Z"
+    );
+  });
+
+  it("treats a missing last backup as immediately due", () => {
+    expect(isBackupDue("WEEKLY", null, new Date("2026-06-13T00:00:00.000Z"))).toBe(true);
+  });
+});

package/lib/backup/backup-schedule.ts

@@ -0,0 +1,55 @@
+import type { BackupCadence } from "@/lib/backup/types";
+
+function getDaysInMonth(year: number, monthIndex: number) {
+  return new Date(Date.UTC(year, monthIndex + 1, 0)).getUTCDate();
+}
+
+function addMonthsClamped(date: Date, monthsToAdd: number) {
+  const year = date.getUTCFullYear();
+  const monthIndex = date.getUTCMonth();
+  const day = date.getUTCDate();
+  const nextMonthIndex = monthIndex + monthsToAdd;
+  const targetYear = year + Math.floor(nextMonthIndex / 12);
+  const normalizedMonthIndex = ((nextMonthIndex % 12) + 12) % 12;
+  const targetDay = Math.min(day, getDaysInMonth(targetYear, normalizedMonthIndex));
+
+  return new Date(
+    Date.UTC(
+      targetYear,
+      normalizedMonthIndex,
+      targetDay,
+      date.getUTCHours(),
+      date.getUTCMinutes(),
+      date.getUTCSeconds(),
+      date.getUTCMilliseconds()
+    )
+  );
+}
+
+export function getNextBackupDueAt(
+  cadence: BackupCadence,
+  lastBackupAt: Date | null
+): Date | null {
+  if (!lastBackupAt) return null;
+
+  if (cadence === "DAILY") {
+    return new Date(lastBackupAt.getTime() + 24 * 60 * 60 * 1000);
+  }
+
+  if (cadence === "WEEKLY") {
+    return new Date(lastBackupAt.getTime() + 7 * 24 * 60 * 60 * 1000);
+  }
+
+  return addMonthsClamped(lastBackupAt, 1);
+}
+
+export function isBackupDue(
+  cadence: BackupCadence,
+  lastBackupAt: Date | null,
+  now = new Date()
+): boolean {
+  if (!lastBackupAt) return true;
+
+  const nextDueAt = getNextBackupDueAt(cadence, lastBackupAt);
+  return nextDueAt !== null && now >= nextDueAt;
+}