@knotpad/app 0.1.0 → 0.1.2

package/components/sync/sync-indicator.tsx

@@ -1,171 +0,0 @@
-"use client";
-
-import { useEffect, useState, useCallback } from "react";
-import { CheckCircle2, Loader2, AlertTriangle, WifiOff, XCircle } from "lucide-react";
-import { useOnlineStatus } from "@/lib/client/online-status";
-
-type SyncStatus = "synced" | "syncing" | "conflict" | "offline" | "lapsed" | "idle";
-
-type SyncState = {
-  status: SyncStatus;
-  lastSyncedAt: string | null;
-  unresolvedConflicts: number;
-  isPro: boolean;
-  isCloud: boolean;
-};
-
-function timeAgo(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime();
-  const mins = Math.floor(diff / 60_000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins} min${mins === 1 ? "" : "s"} ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs} hr${hrs === 1 ? "" : "s"} ago`;
-  return `${Math.floor(hrs / 24)}d ago`;
-}
-
-export function SyncIndicator({ onConflictClick, refreshSignal }: { onConflictClick?: () => void; refreshSignal?: number }) {
-  const [state, setState] = useState<SyncState>({
-    status: "idle",
-    lastSyncedAt: null,
-    unresolvedConflicts: 0,
-    isPro: false,
-    isCloud: false,
-  });
-  const [syncing, setSyncing] = useState(false);
-
-  const fetchStatus = useCallback(async () => {
-    try {
-      const res = await fetch("/api/sync/status");
-      if (!res.ok) return;
-      const data = await res.json();
-      setState({
-        status:
-          data.unresolvedConflicts > 0
-            ? "conflict"
-            : !data.isPro
-            ? "lapsed"
-            : !data.isCloud
-            ? "idle"
-            : "synced",
-        lastSyncedAt: data.lastSyncedAt,
-        unresolvedConflicts: data.unresolvedConflicts,
-        isPro: data.isPro,
-        isCloud: data.isCloud,
-      });
-    } catch {
-      setState((prev) => ({ ...prev, status: "offline" }));
-    }
-  }, []);
-
-  // Reflect connectivity instantly: flip to "offline" the moment the browser
-  // loses the network, and re-fetch real status as soon as it returns.
-  const online = useOnlineStatus(
-    useCallback(
-      (isOnline: boolean) => {
-        if (isOnline) {
-          void fetchStatus();
-        } else {
-          setState((prev) => ({ ...prev, status: "offline" }));
-        }
-      },
-      [fetchStatus]
-    )
-  );
-
-  // Poll every 5 minutes (only while online — offline polling just errors out)
-  useEffect(() => {
-    if (!online) {
-      setState((prev) => ({ ...prev, status: "offline" }));
-      return;
-    }
-    void fetchStatus();
-    const interval = setInterval(() => void fetchStatus(), 5 * 60_000);
-    return () => clearInterval(interval);
-  }, [fetchStatus, online]);
-
-  // Re-fetch immediately when parent signals a conflict was resolved
-  useEffect(() => {
-    if (refreshSignal === undefined || refreshSignal === 0) return;
-    void fetchStatus();
-  }, [refreshSignal, fetchStatus]);
-
-  async function handleSyncNow() {
-    setSyncing(true);
-    setState((prev) => ({ ...prev, status: "syncing" }));
-    try {
-      const res = await fetch("/api/sync/trigger", { method: "POST" });
-      if (res.ok) {
-        await fetchStatus();
-      } else {
-        setState((prev) => ({ ...prev, status: "offline" }));
-      }
-    } catch {
-      setState((prev) => ({ ...prev, status: "offline" }));
-    } finally {
-      setSyncing(false);
-    }
-  }
-
-  // Always render — local-only users see "Local only", pro users see sync status
-
-  return (
-    <div className="border-t border-zinc-800 px-3 py-2">
-      {state.status === "conflict" && (
-        <button
-          onClick={onConflictClick}
-          className="flex w-full items-center gap-1.5 text-left text-xs text-amber-400 hover:text-amber-300 transition-colors"
-        >
-          <AlertTriangle size={12} className="shrink-0" />
-          <span className="truncate">
-            {state.unresolvedConflicts} conflict
-            {state.unresolvedConflicts !== 1 ? "s" : ""} need review
-          </span>
-        </button>
-      )}
-
-      {state.status === "synced" && (
-        <button
-          onClick={handleSyncNow}
-          disabled={syncing}
-          className="flex w-full items-center gap-1.5 text-left text-xs text-zinc-600 hover:text-zinc-400 transition-colors disabled:pointer-events-none"
-        >
-          <CheckCircle2 size={12} className="shrink-0 text-emerald-600" />
-          <span className="truncate">
-            {state.lastSyncedAt
-              ? `Synced · ${timeAgo(state.lastSyncedAt)}`
-              : "Synced"}
-          </span>
-        </button>
-      )}
-
-      {state.status === "syncing" && (
-        <div className="flex items-center gap-1.5 text-xs text-blue-400">
-          <Loader2 size={12} className="shrink-0 animate-spin" />
-          <span>Syncing…</span>
-        </div>
-      )}
-
-      {state.status === "offline" && (
-        <div className="flex items-center gap-1.5 text-xs text-zinc-600">
-          <WifiOff size={12} className="shrink-0" />
-          <span className="truncate">Sync paused · No connection</span>
-        </div>
-      )}
-
-      {state.status === "lapsed" && (
-        <div className="flex items-center gap-1.5 text-xs text-zinc-600">
-          <XCircle size={12} className="shrink-0" />
-          <span className="truncate">Sync paused · Pro required</span>
-        </div>
-      )}
-
-      {state.status === "idle" && (
-        <div className="flex items-center gap-1.5 text-xs text-zinc-700">
-          <span className="h-1.5 w-1.5 rounded-full bg-zinc-700" />
-          <span>Local only</span>
-        </div>
-      )}
-    </div>
-  );
-}

package/components/tasks/snippet-thread.tsx

@@ -1,119 +0,0 @@
-import Link from "next/link";
-import { FileText } from "lucide-react";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-
-type Reference = {
-  noteId: string;
-  noteTitle: string;
-  snippet: string;
-};
-
-type Props = { references: Reference[]; taskTitle?: string };
-
-export function SnippetThread({ references, taskTitle }: Props) {
-  // Each reference may contain multiple paragraphs joined by "\n---\n".
-  type Block = { noteId: string; noteTitle: string; paragraphs: string[]; href: string };
-
-  const blocks: Block[] = references
-    .filter((r) => r.snippet)
-    .map((r) => ({
-      noteId: r.noteId,
-      noteTitle: r.noteTitle,
-      href: taskTitle
-        ? `/notes/${r.noteId}?q=${encodeURIComponent(taskTitle)}`
-        : `/notes/${r.noteId}`,
-      paragraphs: r.snippet
-        .split(/\n---\n/)
-        .map((p) => p.trim())
-        .filter(Boolean),
-    }));
-
-  const totalParagraphs = blocks.reduce((n, b) => n + b.paragraphs.length, 0);
-
-  const hasAnyReference = references.length > 0;
-
-  return (
-    <div className="flex flex-col gap-4">
-      <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
-        {blocks.length > 0
-          ? `Referenced in ${blocks.length} ${blocks.length === 1 ? "note" : "notes"} · ${totalParagraphs} ${totalParagraphs === 1 ? "paragraph" : "paragraphs"}`
-          : hasAnyReference
-          ? "References found but no preview available"
-          : "No references found"}
-      </h3>
-
-      {blocks.length === 0 && (
-        <p className="text-sm text-zinc-600">
-          {hasAnyReference
-            ? "The notes that reference this task exist but snippets couldn't be extracted. Open the notes directly to view context."
-            : "Use ((task title)) in any note to create a cross-reference that appears here."}
-        </p>
-      )}
-
-      {blocks.map((block) => (
-        <div key={block.noteId} className="rounded-lg border border-zinc-800 bg-zinc-900/60">
-          {/* Note header */}
-          <div className="flex items-center justify-between gap-2 border-b border-zinc-800/60 px-3 py-2">
-            <div className="flex items-center gap-1.5 min-w-0">
-              <FileText size={12} className="shrink-0 text-zinc-500" />
-              <span className="truncate text-xs font-medium text-zinc-400">{block.noteTitle}</span>
-              {block.paragraphs.length > 1 && (
-                <span className="shrink-0 rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-500">
-                  {block.paragraphs.length} locations
-                </span>
-              )}
-            </div>
-            <Link
-              href={block.href}
-              className="shrink-0 text-xs text-zinc-600 hover:text-zinc-300 transition-colors"
-            >
-              Open ↗
-            </Link>
-          </div>
-
-          {/* Paragraphs */}
-          <div className="divide-y divide-zinc-800/40">
-            {block.paragraphs.map((para, pi) => (
-              <div key={pi} className="px-3 py-2.5">
-                <ReactMarkdown
-                  remarkPlugins={[remarkGfm]}
-                  components={{
-                    // Render inline — no block wrappers that would add spacing
-                    p: ({ children }) => (
-                      <p className="text-xs leading-5 text-zinc-400">{children}</p>
-                    ),
-                    li: ({ children }) => (
-                      <li className="text-xs leading-5 text-zinc-400 list-none">{children}</li>
-                    ),
-                    input: () => null, // suppress checkbox inputs — show as text only
-                    code: ({ children }) => (
-                      <code className="rounded bg-zinc-800 px-1 font-mono text-[11px] text-emerald-400">{children}</code>
-                    ),
-                    strong: ({ children }) => (
-                      <strong className="font-semibold text-zinc-300">{children}</strong>
-                    ),
-                    em: ({ children }) => (
-                      <em className="italic text-zinc-400">{children}</em>
-                    ),
-                    h1: ({ children }) => (
-                      <p className="text-xs font-semibold text-zinc-300">{children}</p>
-                    ),
-                    h2: ({ children }) => (
-                      <p className="text-xs font-semibold text-zinc-300">{children}</p>
-                    ),
-                    h3: ({ children }) => (
-                      <p className="text-xs font-semibold text-zinc-300">{children}</p>
-                    ),
-                  }}
-                >
-                  {para}
-                </ReactMarkdown>
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/components/tasks/status-dot.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
-
-// Maps a status' stored `border-*-700` color key (see lib/kanban-status.ts and
-// the BADGE_STYLE_MAP in task-badge.tsx) to a solid fill for a small dot. A dot
-// keeps the UI compact and consistent regardless of how long a custom status
-// label is.
-const DOT_COLOR_MAP: Record<string, string> = {
-  "border-zinc-700": "bg-zinc-500",
-  "border-red-700": "bg-red-500",
-  "border-orange-700": "bg-orange-500",
-  "border-amber-700": "bg-amber-500",
-  "border-yellow-700": "bg-yellow-500",
-  "border-lime-700": "bg-lime-500",
-  "border-green-700": "bg-green-500",
-  "border-emerald-700": "bg-emerald-500",
-  "border-teal-700": "bg-teal-500",
-  "border-cyan-700": "bg-cyan-500",
-  "border-sky-700": "bg-sky-500",
-  "border-blue-700": "bg-blue-500",
-  "border-indigo-700": "bg-indigo-500",
-  "border-violet-700": "bg-violet-500",
-  "border-purple-700": "bg-purple-500",
-  "border-fuchsia-700": "bg-fuchsia-500",
-  "border-pink-700": "bg-pink-500",
-  "border-rose-700": "bg-rose-500",
-};
-
-const FALLBACK = "bg-zinc-500";
-
-type Props = { status: string; className?: string };
-
-export function StatusDot({ status, className = "" }: Props) {
-  const kanbanStatuses = useKanbanStatuses();
-  const config = kanbanStatuses.find((s) => s.key === status);
-  const label = config?.label ?? status.replace("_", " ");
-  const bg = config?.color ? (DOT_COLOR_MAP[config.color] ?? FALLBACK) : FALLBACK;
-
-  return (
-    <span
-      title={label}
-      aria-label={label}
-      className={`inline-block h-2.5 w-2.5 shrink-0 rounded-full ${bg} ${className}`}
-    />
-  );
-}

package/components/tasks/task-badge.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
-
-const BADGE_STYLE_MAP: Record<string, string> = {
-  "border-zinc-700": "bg-zinc-800 text-zinc-400 border-zinc-700",
-  "border-red-700": "bg-red-950 text-red-300 border-red-700",
-  "border-orange-700": "bg-orange-950 text-orange-300 border-orange-700",
-  "border-amber-700": "bg-amber-950 text-amber-300 border-amber-700",
-  "border-yellow-700": "bg-yellow-950 text-yellow-300 border-yellow-700",
-  "border-lime-700": "bg-lime-950 text-lime-300 border-lime-700",
-  "border-green-700": "bg-green-950 text-green-300 border-green-700",
-  "border-emerald-700": "bg-emerald-950 text-emerald-300 border-emerald-700",
-  "border-teal-700": "bg-teal-950 text-teal-300 border-teal-700",
-  "border-cyan-700": "bg-cyan-950 text-cyan-300 border-cyan-700",
-  "border-sky-700": "bg-sky-950 text-sky-300 border-sky-700",
-  "border-blue-700": "bg-blue-950 text-blue-300 border-blue-700",
-  "border-indigo-700": "bg-indigo-950 text-indigo-300 border-indigo-700",
-  "border-violet-700": "bg-violet-950 text-violet-300 border-violet-700",
-  "border-purple-700": "bg-purple-950 text-purple-300 border-purple-700",
-  "border-fuchsia-700": "bg-fuchsia-950 text-fuchsia-300 border-fuchsia-700",
-  "border-pink-700": "bg-pink-950 text-pink-300 border-pink-700",
-  "border-rose-700": "bg-rose-950 text-rose-300 border-rose-700",
-};
-
-export type TaskStatus = string;
-
-type Props = { status: string; className?: string };
-
-export function TaskBadge({ status, className = "" }: Props) {
-  const kanbanStatuses = useKanbanStatuses();
-  const config = kanbanStatuses.find((s) => s.key === status);
-  const label = config?.label ?? status.replace("_", " ");
-  const styleClass = config?.color ? (BADGE_STYLE_MAP[config.color] ?? BADGE_STYLE_MAP["border-zinc-700"]) : BADGE_STYLE_MAP["border-zinc-700"];
-
-  return (
-    <span
-      className={`inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-medium leading-none ${styleClass} ${className}`}
-    >
-      {label}
-    </span>
-  );
-}

package/components/tasks/task-detail.test.tsx

@@ -1,187 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { TaskDetail } from "@/components/tasks/task-detail";
-
-const refreshMock = vi.fn();
-
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ refresh: refreshMock }),
-}));
-
-vi.mock("@/components/kanban/kanban-status-context", () => ({
-  useKanbanStatuses: () => [
-    { key: "OPEN", label: "Open", color: "border-zinc-700" },
-    { key: "DONE", label: "Done", color: "border-green-700" },
-  ],
-}));
-
-vi.mock("@/components/tasks/snippet-thread", () => ({
-  SnippetThread: () => <div data-testid="snippet-thread" />,
-}));
-
-beforeEach(() => {
-  refreshMock.mockReset();
-  vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true }));
-});
-
-afterEach(() => {
-  cleanup();
-  vi.useRealTimers();
-  vi.unstubAllGlobals();
-});
-
-describe("TaskDetail", () => {
-  it("shows summary chips for overdue, assignee type, references, and updated time", () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date("2026-06-14T12:00:00.000Z"));
-
-    render(
-      <TaskDetail
-        backHref="/list"
-        task={{
-          id: "t1",
-          title: "Ship copy",
-          status: "OPEN",
-          assigneeType: "AGENT",
-          claimedBy: null,
-          claimedByAlias: null,
-          fileRefs: [],
-          startDate: null,
-          dueDate: "2026-06-10T00:00:00.000Z",
-          note: { id: "n1", title: "Launch" },
-          assignee: null,
-          auditLogs: [
-            {
-              id: "a1",
-              action: "UPDATED",
-              detail: null,
-              createdAt: "2026-06-14T10:00:00.000Z",
-              user: null,
-            },
-          ],
-          references: [
-            { noteId: "n2", noteTitle: "Spec", snippet: "Alpha" },
-            { noteId: "n3", noteTitle: "Plan", snippet: "Beta" },
-          ],
-        }}
-      />
-    );
-
-    expect(screen.getByText("Overdue")).toBeInTheDocument();
-    expect(screen.getByText("Agent task")).toBeInTheDocument();
-    expect(screen.getByText("References 2")).toBeInTheDocument();
-    expect(screen.getByText("Updated 2h ago")).toBeInTheDocument();
-  });
-
-  it("shows a contextual back label when returning to list", () => {
-    render(
-      <TaskDetail
-        backHref="/list?folder=f1"
-        task={{
-          id: "t1",
-          title: "Ship copy",
-          status: "OPEN",
-          assigneeType: "HUMAN",
-          claimedBy: null,
-          claimedByAlias: null,
-          fileRefs: [],
-          startDate: null,
-          dueDate: null,
-          note: { id: "n1", title: "Launch" },
-          assignee: null,
-          auditLogs: [],
-          references: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("Back to List")).toBeInTheDocument();
-  });
-
-  it("emphasizes the source note as a continue-working action", () => {
-    render(
-      <TaskDetail
-        backHref="/list"
-        task={{
-          id: "t1",
-          title: "Ship copy",
-          status: "OPEN",
-          assigneeType: "HUMAN",
-          claimedBy: null,
-          claimedByAlias: null,
-          fileRefs: [],
-          startDate: null,
-          dueDate: null,
-          note: { id: "n1", title: "Launch" },
-          assignee: null,
-          auditLogs: [],
-          references: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("Continue in source note")).toBeInTheDocument();
-  });
-
-  it("shows a success message after updating the due date", async () => {
-    const { container } = render(
-      <TaskDetail
-        backHref="/list"
-        task={{
-          id: "t1",
-          title: "Ship copy",
-          status: "OPEN",
-          assigneeType: "HUMAN",
-          claimedBy: null,
-          claimedByAlias: null,
-          fileRefs: [],
-          startDate: null,
-          dueDate: null,
-          note: { id: "n1", title: "Launch" },
-          assignee: null,
-          auditLogs: [],
-          references: [],
-        }}
-      />
-    );
-
-    const dueDateInput = container.querySelectorAll('input[type="date"]')[1];
-
-    if (!(dueDateInput instanceof HTMLInputElement)) {
-      throw new Error("Expected due date input");
-    }
-
-    fireEvent.change(dueDateInput, { target: { value: "2026-06-20" } });
-
-    expect(await screen.findByText("Due date updated.")).toBeInTheDocument();
-    expect(refreshMock).toHaveBeenCalled();
-  });
-
-  it("shows the task priority in the detail view", () => {
-    render(
-      <TaskDetail
-        backHref="/list"
-        task={{
-          id: "t1",
-          title: "Ship copy",
-          status: "OPEN",
-          priority: "high",
-          assigneeType: "HUMAN",
-          claimedBy: null,
-          claimedByAlias: null,
-          fileRefs: [],
-          startDate: null,
-          dueDate: null,
-          note: { id: "n1", title: "Launch" },
-          assignee: null,
-          auditLogs: [],
-          references: [],
-        }}
-      />
-    );
-
-    expect(screen.getByText("Priority")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("high")).toBeInTheDocument();
-  });
-});