@knotpad/app 0.1.4 → 0.1.6

package/components/sync/sync-indicator.tsx

@@ -0,0 +1,171 @@
+"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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,47 @@
+"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

@@ -0,0 +1,43 @@
+"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

@@ -0,0 +1,187 @@
+// @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();
+  });
+});