@knotpad/app 0.1.0

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>
+  );
+}