larkup 0.1.14

package/components/data/jobs-panel.tsx

@@ -0,0 +1,485 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+  CheckCircle2,
+  CircleDashed,
+  Loader2,
+  Octagon,
+  TriangleAlert,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  AlertTriangle,
+  Copy,
+  XIcon,
+  Square,
+} from "lucide-react";
+import type { CrawlJob, CrawlJobStatus } from "@larkup/core/types";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+const PAGE_SIZE = 8;
+
+const STATUS: Record<
+  CrawlJobStatus,
+  {
+    label: string;
+    icon: typeof Loader2;
+    className: string;
+    badgeVariant: string;
+  }
+> = {
+  queued: {
+    label: "Queued",
+    icon: CircleDashed,
+    className: "text-orange-500 border-orange-500/30 bg-orange-500/10",
+    badgeVariant: "outline",
+  },
+  running: {
+    label: "Running",
+    icon: Loader2,
+    className: "text-primary border-primary/30 bg-primary/10",
+    badgeVariant: "outline",
+  },
+  completed: {
+    label: "Completed",
+    icon: CheckCircle2,
+    className: "text-green-600 border-green-600/50 bg-green-600/10",
+    badgeVariant: "outline",
+  },
+  failed: {
+    label: "Failed",
+    icon: TriangleAlert,
+    className: "text-destructive border-destructive/30 bg-destructive/10",
+    badgeVariant: "outline",
+  },
+  cancelled: {
+    label: "Cancelled",
+    icon: Octagon,
+    className: "text-muted-foreground border-muted-foreground/30 bg-muted/30",
+    badgeVariant: "outline",
+  },
+};
+
+function progressFor(job: CrawlJob): number {
+  const domainTargets = job.targets.filter((t) => t.scope === "domain").length;
+  const denom =
+    domainTargets > 0 ? domainTargets * job.pageLimit : job.targets.length;
+  if (denom === 0) return 0;
+  if (job.status === "completed") return 100;
+  return Math.min(99, Math.round((job.pagesCrawled / denom) * 100));
+}
+
+export function JobsPanel({
+  jobs,
+  onChanged,
+}: {
+  jobs: CrawlJob[];
+  onChanged: () => void;
+}) {
+  const [page, setPage] = useState(0);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [confirmDelete, setConfirmDelete] = useState<{
+    ids: string[];
+    label: string;
+  } | null>(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const [confirmCancel, setConfirmCancel] = useState<{
+    id: string;
+    label: string;
+  } | null>(null);
+  const [cancelling, setCancelling] = useState(false);
+
+  const totalPages = Math.max(1, Math.ceil(jobs.length / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages - 1);
+  const pageJobs = jobs.slice(safePage * PAGE_SIZE, (safePage + 1) * PAGE_SIZE);
+
+  const allPageSelected =
+    pageJobs.length > 0 && pageJobs.every((j) => selected.has(j.id));
+  const somePageSelected = pageJobs.some((j) => selected.has(j.id));
+
+  function toggleAll() {
+    const next = new Set(selected);
+    if (allPageSelected) {
+      pageJobs.forEach((j) => next.delete(j.id));
+    } else {
+      pageJobs.forEach((j) => next.add(j.id));
+    }
+    setSelected(next);
+  }
+
+  function toggleOne(id: string) {
+    const next = new Set(selected);
+    next.has(id) ? next.delete(id) : next.add(id);
+    setSelected(next);
+  }
+
+  async function executeCancel(id: string) {
+    setCancelling(true);
+    try {
+      await fetch(`/api/jobs/${id}`, { method: "DELETE" });
+      toast.message("Job cancelled");
+      onChanged();
+    } finally {
+      setCancelling(false);
+      setConfirmCancel(null);
+    }
+  }
+
+  function requestCancel(id: string) {
+    const label = `"${jobs.find((j) => j.id === id)?.keywords ?? id}"`;
+    setConfirmCancel({ id, label });
+  }
+
+  async function executeDelete(ids: string[]) {
+    setDeleting(true);
+    try {
+      await Promise.all(
+        ids.map((id) =>
+          fetch(`/api/jobs/${id}?remove=1`, { method: "DELETE" }),
+        ),
+      );
+      setSelected((prev) => {
+        const next = new Set(prev);
+        ids.forEach((id) => next.delete(id));
+        return next;
+      });
+      toast.success(
+        ids.length === 1 ? "Job removed" : `${ids.length} jobs removed`,
+      );
+      onChanged();
+    } finally {
+      setDeleting(false);
+      setConfirmDelete(null);
+    }
+  }
+
+  function requestDelete(ids: string[]) {
+    const label =
+      ids.length === 1
+        ? `"${jobs.find((j) => j.id === ids[0])?.keywords ?? ids[0]}"`
+        : `${ids.length} selected jobs`;
+    setConfirmDelete({ ids, label });
+  }
+
+  if (jobs.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border py-10 text-center">
+        <p className="text-sm text-muted-foreground">No ETL jobs yet.</p>
+        <p className="mt-1 text-xs text-muted-foreground/60">
+          Start a web scrape to aggregate sources here.
+        </p>
+      </div>
+    );
+  }
+
+  const selectedArray = Array.from(selected);
+  const removableSelected = selectedArray.filter((id) => {
+    const j = jobs.find((j) => j.id === id);
+    return j && j.status !== "running" && j.status !== "queued";
+  });
+
+  return (
+    <>
+      {/* Bulk action bar */}
+      {selected.size > 0 && (
+        <div className="mb-2 flex items-center justify-between rounded-md border border-border bg-muted/40 px-3 py-1.5">
+          <span className="text-xs text-muted-foreground">
+            {selected.size} selected
+          </span>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-6 gap-1.5 text-xs text-destructive hover:text-destructive"
+            disabled={removableSelected.length === 0}
+            onClick={() => requestDelete(removableSelected)}
+          >
+            <Trash2 className="size-3" />
+            Delete ({removableSelected.length})
+          </Button>
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="w-full overflow-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="border-b border-border">
+              <th className="pb-2 pl-1 pr-2 text-left">
+                <Checkbox
+                  checked={allPageSelected}
+                  onCheckedChange={toggleAll}
+                  aria-label="Select all on page"
+                  className="size-3.5"
+                />
+              </th>
+              <th className="pb-2 pr-3 text-left font-medium text-muted-foreground">
+                Title / Keywords
+              </th>
+              <th className="pb-2 pr-3 text-right font-medium text-muted-foreground whitespace-nowrap">
+                Pages
+              </th>
+              <th className="pb-2 pr-3 text-left font-medium text-muted-foreground">
+                Status
+              </th>
+              <th className="pb-2 text-right font-medium text-muted-foreground" />
+            </tr>
+          </thead>
+          <tbody>
+            {pageJobs.map((job) => {
+              const s = STATUS[job.status];
+              const Icon = s.icon;
+              const active =
+                job.status === "running" || job.status === "queued";
+              const pct = progressFor(job);
+
+              const domainTargets = job.targets.filter(
+                (t) => t.scope === "domain",
+              ).length;
+              const denom =
+                domainTargets > 0
+                  ? domainTargets * job.pageLimit
+                  : job.targets.length;
+
+              return (
+                <tr
+                  key={job.id}
+                  className={cn(
+                    "border-b border-border/50 transition-colors last:border-0",
+                    selected.has(job.id) && "bg-muted/30",
+                  )}
+                >
+                  {/* Checkbox */}
+                  <td className="py-2 pl-1 pr-2">
+                    <Checkbox
+                      checked={selected.has(job.id)}
+                      onCheckedChange={() => toggleOne(job.id)}
+                      aria-label={`Select job ${job.keywords}`}
+                      className="size-3.5"
+                    />
+                  </td>
+
+                  {/* Title */}
+                  <td className="py-2 pr-3 max-w-36">
+                    <p className="truncate font-medium text-foreground leading-tight">
+                      {job.keywords}
+                    </p>
+                    <p className="text-muted-foreground/70 text-[10px]">
+                      {job.targets.length} target
+                      {job.targets.length === 1 ? "" : "s"}
+                    </p>
+                  </td>
+
+                  {/* Pages crawled + progress */}
+                  <td className="py-2 pr-3 text-right tabular-nums">
+                    <span className="text-green-700">
+                      {job.pagesCrawled} / {denom}
+                    </span>
+                    {active && (
+                      <div className="mt-1 h-0.5 w-full rounded-full bg-muted overflow-hidden">
+                        <div
+                          className="h-full rounded-full bg-green-600 transition-all"
+                          style={{ width: `${pct}%` }}
+                        />
+                      </div>
+                    )}
+                  </td>
+
+                  {/* Status badge */}
+                  <td className="py-2 pr-3">
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        s.className,
+                        "gap-1 px-1.5 py-0.5 font-mono text-[10px] whitespace-nowrap",
+                      )}
+                    >
+                      <Icon
+                        className={cn(
+                          "size-2.5 shrink-0",
+                          job.status === "running" && "animate-spin",
+                        )}
+                      />
+                      {s.label}
+                    </Badge>
+                  </td>
+
+                  {/* Action */}
+                  <td className="py-2 text-right">
+                    <div className="flex items-center justify-end gap-1">
+                      {job.targets.some((t) => t.status === "failed") && (
+                        <button
+                          onClick={() => {
+                            const failedUrls = job.targets
+                              .filter((t) => t.status === "failed")
+                              .map((t) => t.url)
+                              .join("\n");
+                            navigator.clipboard.writeText(failedUrls);
+                            toast.success("Failed URLs copied to clipboard");
+                          }}
+                          className="rounded p-1 text-muted-foreground hover:text-foreground transition-colors"
+                          title="Copy failed URLs"
+                        >
+                          <Copy className="size-3" />
+                        </button>
+                      )}
+                      {active ? (
+                        <button
+                          onClick={() => requestCancel(job.id)}
+                          className="cursor-pointer rounded-xl  p-1 text-muted-foreground hover:text-foreground transition-colors"
+                          title="Cancel job"
+                        >
+                          <Square className="size-3.5 text-orange-400" />
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => requestDelete([job.id])}
+                          className="rounded p-1 text-muted-foreground hover:text-destructive transition-colors"
+                          title="Remove job"
+                        >
+                          <Trash2 className="size-3" />
+                        </button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
+          <span>
+            {safePage * PAGE_SIZE + 1}–
+            {Math.min((safePage + 1) * PAGE_SIZE, jobs.length)} of {jobs.length}
+          </span>
+          <div className="flex items-center gap-1">
+            <button
+              disabled={safePage === 0}
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+              className="rounded p-1 hover:bg-muted disabled:opacity-40 transition-colors"
+            >
+              <ChevronLeft className="size-3.5" />
+            </button>
+            <span className="tabular-nums">
+              {safePage + 1} / {totalPages}
+            </span>
+            <button
+              disabled={safePage >= totalPages - 1}
+              onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+              className="rounded p-1 hover:bg-muted disabled:opacity-40 transition-colors"
+            >
+              <ChevronRight className="size-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Confirm delete dialog */}
+      <Dialog
+        open={!!confirmDelete}
+        onOpenChange={(open) => !open && setConfirmDelete(null)}
+      >
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-4 text-destructive" />
+              Confirm deletion
+            </DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove{" "}
+              <span className="font-medium text-foreground">
+                {confirmDelete?.label}
+              </span>
+              ? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setConfirmDelete(null)}
+              disabled={deleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              disabled={deleting}
+              onClick={() => confirmDelete && executeDelete(confirmDelete.ids)}
+            >
+              {deleting ? (
+                <Loader2 className="size-3 animate-spin" />
+              ) : (
+                <Trash2 className="size-3" />
+              )}
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Confirm cancel dialog */}
+      <Dialog
+        open={!!confirmCancel}
+        onOpenChange={(open) => !open && setConfirmCancel(null)}
+      >
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="size-4 text-orange-500" />
+              Confirm cancellation
+            </DialogTitle>
+            <DialogDescription>
+              Are you sure you want to cancel the job{" "}
+              <span className="font-medium text-foreground">
+                {confirmCancel?.label}
+              </span>
+              ? In-progress pages will be discarded.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setConfirmCancel(null)}
+              disabled={cancelling}
+            >
+              Go Back
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              disabled={cancelling}
+              onClick={() => confirmCancel && executeCancel(confirmCancel.id)}
+            >
+              {cancelling ? (
+                <Loader2 className="size-3 animate-spin" />
+              ) : (
+                <Octagon className="size-3" />
+              )}
+              Cancel Job
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/components/data/paste-panel.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { formatErrorMessage } from "@/lib/error-formatter";
+import { Plus, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+export function PastePanel({ onAdded }: { onAdded: () => void }) {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  async function submit() {
+    if (!content.trim()) {
+      toast.error("Nothing to add — paste some text first.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const res = await fetch("/api/documents", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title: title.trim() || "Pasted text",
+          content,
+          source: "paste",
+        }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
+      toast.success("Added to corpus");
+      setTitle("");
+      setContent("");
+      onAdded();
+    } catch (err) {
+      toast.error(formatErrorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="paste-title">Title</Label>
+        <Input
+          id="paste-title"
+          placeholder="e.g. TUHH — About page"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="paste-content">Content</Label>
+        <Textarea
+          id="paste-content"
+          placeholder="Paste any text, markdown, or notes here…"
+          className="min-h-48 font-mono text-xs leading-relaxed bg-white"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+        />
+        <p className="text-xs text-muted-foreground tabular-nums">
+          {content.length.toLocaleString()} characters
+        </p>
+      </div>
+      <Button onClick={submit} disabled={saving}>
+        {saving ? (
+          <Loader2 className="size-4 animate-spin" />
+        ) : (
+          <Plus className="size-4" />
+        )}
+        Add to corpus
+      </Button>
+    </div>
+  );
+}