larkup 0.1.14

package/components/configure/store-fields.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+import { KeyRound, Eye, EyeOff } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { visibleFields } from "@larkup/vector-stores/registry"
+import type { IndexType, VectorStoreDescriptor } from "@larkup/core/types"
+
+interface StoreFieldsProps {
+  store: VectorStoreDescriptor
+  values: Record<string, string>
+  errors: Record<string, string>
+  onChange: (key: string, value: string) => void
+  /** Global index type — controls showWhenIndexType visibility (e.g. sparse model for hybrid/lexical) */
+  indexType?: IndexType
+}
+
+/**
+ * Renders ONLY the fields the selected store needs, honoring `showWhen`
+ * dependencies (e.g. LanceDB local-vs-cloud). Driven entirely by the
+ * registry, so adding a new store requires no changes here.
+ */
+export function StoreFields({
+  store,
+  values,
+  errors,
+  onChange,
+  indexType,
+}: StoreFieldsProps) {
+  const fields = visibleFields(store, values, indexType)
+  const [showPasswords, setShowPasswords] = useState<Record<string, boolean>>({})
+
+  const togglePassword = (key: string) => {
+    setShowPasswords((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
+  return (
+    <div className="grid gap-5 sm:grid-cols-2">
+      {fields.map((field) => {
+        const value = values[field.key] ?? field.defaultValue ?? ""
+        const error = errors[field.key]
+        const fieldId = `store-${field.key}`
+
+        return (
+          <div
+            key={field.key}
+            className={cn(
+              "space-y-1.5",
+              field.type === "select" && "sm:col-span-1",
+            )}
+          >
+            <div className="flex items-center gap-1.5">
+              <Label htmlFor={fieldId}>{field.label}</Label>
+              {field.required && (
+                <span className="text-destructive" aria-hidden>
+                  *
+                </span>
+              )}
+              {field.secret && (
+                <Badge
+                  variant="outline"
+                  className="h-4 gap-1 px-1 text-[9px] font-mono uppercase text-muted-foreground"
+                >
+                  <KeyRound className="size-2.5" />
+                  secret
+                </Badge>
+              )}
+            </div>
+
+            {field.type === "select" ? (
+              <Select
+                value={value}
+                onValueChange={(v) => onChange(field.key, (v as string) ?? "")}
+              >
+                <SelectTrigger id={fieldId} className="w-full">
+                  <SelectValue placeholder={`Select ${field.label}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options?.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : field.type === "password" ? (
+              <div className="relative">
+                <Input
+                  id={fieldId}
+                  type={showPasswords[field.key] ? "text" : "password"}
+                  placeholder={field.placeholder}
+                  value={value}
+                  spellCheck={false}
+                  autoComplete="off"
+                  className={cn(
+                    "font-mono text-sm pr-9",
+                    error && "border-destructive",
+                  )}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                />
+                <button
+                  type="button"
+                  onClick={() => togglePassword(field.key)}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                  tabIndex={-1}
+                >
+                  {showPasswords[field.key] ? (
+                    <EyeOff className="size-4" />
+                  ) : (
+                    <Eye className="size-4" />
+                  )}
+                </button>
+              </div>
+            ) : (
+              <Input
+                id={fieldId}
+                type="text"
+                placeholder={field.placeholder}
+                value={value}
+                spellCheck={false}
+                autoComplete="off"
+                className={cn(
+                  field.type === "path" && "font-mono text-sm",
+                  error && "border-destructive",
+                )}
+                onChange={(e) => onChange(field.key, e.target.value)}
+              />
+            )}
+
+            {error ? (
+              <p className="text-xs text-destructive">{error}</p>
+            ) : field.help ? (
+              <p className="text-xs text-muted-foreground leading-relaxed">
+                {field.help}
+              </p>
+            ) : null}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/components/data/corpus-panel.tsx

@@ -0,0 +1,499 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { formatErrorMessage } from "@/lib/error-formatter";
+import {
+  FileText,
+  Trash2,
+  ClipboardPaste,
+  FileUp,
+  Globe,
+  Pencil,
+  Loader2,
+  X,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import type { DocumentSource, SourceDocument } from "@larkup/core/types";
+import { GenericAlert } from "@/components/alerts/generic-alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils";
+
+const SOURCE_META: Record<
+  DocumentSource,
+  { label: string; icon: typeof Globe }
+> = {
+  scrape: { label: "Scraped", icon: Globe },
+  paste: { label: "Pasted", icon: ClipboardPaste },
+  upload: { label: "Uploaded", icon: FileUp },
+};
+
+export function CorpusPanel({
+  documents,
+  onChanged,
+}: {
+  documents: SourceDocument[];
+  onChanged: () => void;
+}) {
+  const [active, setActive] = useState<SourceDocument | null>(null);
+  const [deleteTask, setDeleteTask] = useState<
+    | { type: "single"; doc: SourceDocument }
+    | { type: "all" }
+    | { type: "selected" }
+    | null
+  >(null);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const [page, setPage] = useState(0);
+
+  const PAGE_SIZE = 10;
+  const totalPages = Math.max(1, Math.ceil(documents.length / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages - 1);
+  const pageDocuments = documents.slice(
+    safePage * PAGE_SIZE,
+    (safePage + 1) * PAGE_SIZE,
+  );
+
+  const allPageSelected =
+    pageDocuments.length > 0 &&
+    pageDocuments.every((d) => selectedIds.has(d.id));
+
+  async function del(id: string) {
+    await fetch(`/api/documents?id=${id}`, { method: "DELETE" });
+    toast.message("Document deleted");
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+    onChanged();
+  }
+  async function delSelected() {
+    if (selectedIds.size === 0) return;
+    const ids = Array.from(selectedIds).join(",");
+    await fetch(`/api/documents?ids=${ids}`, { method: "DELETE" });
+    toast.message(`Deleted ${selectedIds.size} document(s)`);
+    setSelectedIds(new Set());
+    onChanged();
+  }
+  async function clearAll() {
+    await fetch("/api/documents", { method: "DELETE" });
+    toast.message("Corpus cleared");
+    setSelectedIds(new Set());
+    onChanged();
+  }
+
+  if (documents.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-border px-6 py-14 text-center">
+        <FileText className="size-7 text-muted-foreground/60" />
+        <p className="mt-3 text-sm font-medium">Your corpus is empty</p>
+        <p className="mt-1 max-w-sm text-xs text-muted-foreground">
+          Scrape the web, paste text, or upload files. Everything you collect is
+          stored locally and ready to index in the next step.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between pb-3">
+        <p className="text-sm text-muted-foreground">
+          <span className="font-medium text-foreground">
+            {documents.length}
+          </span>{" "}
+          document{documents.length === 1 ? "" : "s"} in corpus
+        </p>
+        <div className="flex items-center gap-2">
+          {selectedIds.size > 0 && (
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-8 text-xs text-muted-foreground hover:text-destructive"
+              onClick={() => setDeleteTask({ type: "selected" })}
+            >
+              <Trash2 className="size-3.5" />
+              Delete {selectedIds.size} selected
+            </Button>
+          )}
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-8 text-xs text-muted-foreground hover:text-destructive"
+            onClick={() => setDeleteTask({ type: "all" })}
+          >
+            <Trash2 className="size-3.5" />
+            Clear corpus
+          </Button>
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-border">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={allPageSelected}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      const next = new Set(selectedIds);
+                      pageDocuments.forEach((d) => next.add(d.id));
+                      setSelectedIds(next);
+                    } else {
+                      const next = new Set(selectedIds);
+                      pageDocuments.forEach((d) => next.delete(d.id));
+                      setSelectedIds(next);
+                    }
+                  }}
+                  aria-label="Select all on page"
+                />
+              </TableHead>
+              <TableHead>Title</TableHead>
+              <TableHead className="w-28">Source</TableHead>
+              <TableHead className="w-24 text-right">Chars</TableHead>
+              <TableHead className="w-20" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pageDocuments.map((doc) => {
+              const meta = SOURCE_META[doc.source];
+              const Icon = meta.icon;
+              return (
+                <TableRow key={doc.id}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedIds.has(doc.id)}
+                      onCheckedChange={(checked) => {
+                        const next = new Set(selectedIds);
+                        if (checked) next.add(doc.id);
+                        else next.delete(doc.id);
+                        setSelectedIds(next);
+                      }}
+                      aria-label="Select document"
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <button
+                      type="button"
+                      onClick={() => setActive(doc)}
+                      className="group flex flex-col items-start text-left"
+                    >
+                      <span className="line-clamp-1 text-sm font-medium group-hover:text-primary">
+                        {doc.title}
+                      </span>
+                      {doc.url && (
+                        <span className="line-clamp-1 text-xs text-muted-foreground">
+                          {doc.url}
+                        </span>
+                      )}
+                    </button>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="secondary" className="gap-1 font-normal">
+                      <Icon className="size-3" />
+                      {meta.label}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right text-xs text-muted-foreground tabular-nums">
+                    {doc.charCount.toLocaleString()}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center justify-end gap-4">
+                      <button
+                        type="button"
+                        aria-label="Edit document"
+                        onClick={() => setActive(doc)}
+                        className="text-muted-foreground transition-colors hover:text-primary"
+                      >
+                        <Pencil className="size-4" />
+                      </button>
+                      <button
+                        type="button"
+                        aria-label="Delete document"
+                        onClick={() => setDeleteTask({ type: "single", doc })}
+                        className="text-muted-foreground transition-colors hover:text-destructive"
+                      >
+                        <Trash2 className="size-4" />
+                      </button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </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, documents.length)} of{" "}
+            {documents.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 cursor-pointer"
+            >
+              <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 cursor-pointer"
+            >
+              <ChevronRight className="size-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      <DocumentDialog
+        doc={active}
+        onOpenChange={(o) => !o && setActive(null)}
+        onSaved={() => {
+          setActive(null);
+          onChanged();
+        }}
+        onDelete={(id) => {
+          if (active) {
+            setDeleteTask({ type: "single", doc: active });
+          }
+        }}
+      />
+
+      <GenericAlert
+        open={deleteTask !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleteTask(null);
+        }}
+        title={
+          deleteTask?.type === "all"
+            ? "Clear corpus"
+            : deleteTask?.type === "selected"
+              ? "Delete selected documents"
+              : "Delete document"
+        }
+        description={
+          deleteTask?.type === "all"
+            ? "Are you sure you want to delete all documents in the corpus? This action cannot be undone."
+            : deleteTask?.type === "selected"
+              ? `Are you sure you want to delete ${selectedIds.size} selected documents?`
+              : `Are you sure you want to delete "${
+                  deleteTask?.type === "single" ? deleteTask.doc.title : ""
+                }"?`
+        }
+        actionText="Delete"
+        variant="destructive"
+        onAction={() => {
+          if (deleteTask?.type === "all") {
+            clearAll();
+          } else if (deleteTask?.type === "selected") {
+            delSelected();
+          } else if (deleteTask?.type === "single") {
+            del(deleteTask.doc.id);
+            if (active?.id === deleteTask.doc.id) {
+              setActive(null);
+            }
+          }
+        }}
+      />
+    </>
+  );
+}
+
+function DocumentDialog({
+  doc,
+  onOpenChange,
+  onSaved,
+  onDelete,
+}: {
+  doc: SourceDocument | null;
+  onOpenChange: (open: boolean) => void;
+  onSaved: () => void;
+  onDelete: (id: string) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [title, setTitle] = useState("");
+  const [url, setUrl] = useState("");
+  const [content, setContent] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  // Reset local state whenever a different document is opened.
+  useEffect(() => {
+    if (doc) {
+      setEditing(false);
+      setTitle(doc.title);
+      setUrl(doc.url ?? "");
+      setContent(doc.content);
+    }
+  }, [doc]);
+
+  async function save() {
+    if (!doc) return;
+    if (!content.trim()) {
+      toast.error("Content can't be empty.");
+      return;
+    }
+    setSaving(true);
+    try {
+      const res = await fetch("/api/documents", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          id: doc.id,
+          title: title.trim() || "Untitled",
+          url: url.trim(),
+          content,
+        }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        toast.error(body.error ? formatErrorMessage(new Error(body.error)) : "Failed to save document.");
+        return;
+      }
+      toast.success("Document saved");
+      onSaved();
+    } catch (err) {
+      toast.error(formatErrorMessage(err) || "Could not reach the server.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <Dialog open={!!doc} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-2xl max-h-[80%]">
+        <DialogHeader>
+          <DialogTitle className="text-balance">
+            {editing ? "Edit document" : doc?.title}
+          </DialogTitle>
+          {!editing && doc?.url && (
+            <DialogDescription className="break-all">
+              {doc.url}
+            </DialogDescription>
+          )}
+          {editing && (
+            <DialogDescription>
+              Changes are saved to this server&apos;s corpus. Re-index to apply
+              them to search.
+            </DialogDescription>
+          )}
+        </DialogHeader>
+
+        {editing ? (
+          <div className="grid gap-4 overflow-y-auto pr-2 pb-2" style={{ maxHeight: "calc(80vh - 150px)" }}>
+            <div className="grid gap-2">
+              <Label htmlFor="doc-title">Title</Label>
+              <Input
+                id="doc-title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Untitled"
+              />
+            </div>
+            <div className="grid gap-2">
+              <Label htmlFor="doc-url">URL (optional)</Label>
+              <Input
+                id="doc-url"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                placeholder="https://…"
+              />
+            </div>
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="doc-content">Content</Label>
+                <span className="text-xs text-muted-foreground tabular-nums ">
+                  {content.length.toLocaleString()} chars
+                </span>
+              </div>
+              <Textarea
+                id="doc-content"
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                rows={14}
+                className="resize-none font-mono text-xs leading-relaxed"
+              />
+            </div>
+          </div>
+        ) : (
+          <ScrollArea className="max-h-[60vh] rounded-md border border-border bg-muted/30">
+            <pre
+              className={cn(
+                "whitespace-pre-wrap break-all px-4 py-3 font-mono text-xs leading-relaxed text-foreground",
+              )}
+            >
+              {doc?.content}
+            </pre>
+          </ScrollArea>
+        )}
+
+        <DialogFooter className="flex-row items-center justify-between gap-2 sm:justify-between">
+          {editing ? (
+            <>
+              <Button
+                variant="ghost"
+                onClick={() => setEditing(false)}
+                disabled={saving}
+              >
+                <X className="size-4" />
+                Cancel
+              </Button>
+              <Button onClick={() => void save()} disabled={saving}>
+                {saving && <Loader2 className="size-4 animate-spin" />}
+                Save changes
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="ghost"
+                className="text-muted-foreground hover:text-destructive"
+                onClick={() => doc && onDelete(doc.id)}
+              >
+                <Trash2 className="size-4" />
+                Delete
+              </Button>
+              <Button onClick={() => setEditing(true)}>
+                <Pencil className="size-4" />
+                Edit
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}