larkup 0.1.14 → 0.1.21

package/components/index/index-workspace.tsx

@@ -1,7 +1,8 @@
-"use client";
+'use client';
 
-import { useState, useEffect, useRef } from "react";
-import useSWR from "swr";
+import { useState, useEffect, useRef } from 'react';
+import useSWR from 'swr';
+import Link from 'next/link';
 import {
   AlertTriangle,
   Boxes,
@@ -16,22 +17,17 @@ import {
   Play,
   RotateCcw,
   Scissors,
-} from "lucide-react";
-import type {
-  ChunkingParams,
-  IndexRun,
-  IndexType,
-  VectorStoreId,
-} from "@larkup/core/types";
-import { getEmbeddingModel } from "@larkup/core/embeddings/registry";
-import { getVectorStore } from "@larkup/vector-stores/registry";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Progress } from "@/components/ui/progress";
-import { Badge } from "@/components/ui/badge";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Skeleton } from "@/components/ui/skeleton";
-import { toast } from "sonner";
+} from 'lucide-react';
+import type { ChunkingParams, IndexRun, IndexType, VectorStoreId } from '@larkup/core/types';
+import { getEmbeddingModel } from '@larkup/core/embeddings/registry';
+import { getVectorStore } from '@larkup/vector-stores/registry';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+import { toast } from 'sonner';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -42,7 +38,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
+} from '@/components/ui/alert-dialog';
+import { DialogFooter } from '../ui/dialog';
 
 const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
@@ -62,113 +59,122 @@ interface IndexStatus {
   };
 }
 
-const ACTIVE: IndexRun["status"][] = ["chunking", "embedding", "upserting"];
+const ACTIVE: IndexRun['status'][] = ['chunking', 'embedding', 'upserting'];
 
-export function IndexWorkspace() {
+export function IndexWorkspace({
+  onDone,
+  onClose,
+}: { onDone?: () => void; onClose?: () => void } = {}) {
   const [starting, setStarting] = useState(false);
-  const { data, isLoading, mutate } = useSWR<IndexStatus>(
-    "/api/index",
-    fetcher,
-    {
-      refreshInterval: (d) =>
-        d?.run && ACTIVE.includes(d.run.status) ? 1000 : 0,
-    },
-  );
+  const [isIndexing, setIsIndexing] = useState(false);
+
+  const { data, isLoading, mutate } = useSWR<IndexStatus>('/api/index', fetcher, {
+    refreshInterval: (d) => (d?.run && ACTIVE.includes(d.run.status) ? 1000 : 0),
+  });
 
-  // Show a warning toast whenever the run's warning message changes
   const lastWarning = useRef<string | undefined>(undefined);
   useEffect(() => {
     const warning = data?.run?.warning;
     if (warning && warning !== lastWarning.current) {
-      toast.warning(warning, { id: "rate-limit-warning", duration: 70_000 });
+      toast.warning(warning, { id: 'rate-limit-warning', duration: 70_000 });
     } else if (!warning && lastWarning.current) {
-      toast.dismiss("rate-limit-warning");
-      toast.success("Rate limit resolved — resuming indexing.", {
+      toast.dismiss('rate-limit-warning');
+      toast.success('Rate limit resolved — resuming indexing.', {
         duration: 3000,
       });
     }
     lastWarning.current = warning;
   }, [data?.run?.warning]);
 
+  useEffect(() => {
+    const status = data?.run?.status;
+    const isNowActive = Boolean(data?.run && status && ACTIVE.includes(status));
+
+    if (isNowActive) {
+      setIsIndexing(true);
+    } else if (isIndexing && status === 'completed') {
+      setIsIndexing(false);
+      toast.success('Indexing completed successfully!');
+      onClose?.();
+    }
+  }, [data?.run?.status, isIndexing, onClose]);
+
   if (isLoading || !data) {
     return (
-      <div className="px-6 py-6 md:px-8">
+      <div className="py-4">
         <Skeleton className="h-40 w-full" />
       </div>
     );
   }
 
-  const { run, ready, blockers, docCount, charCount, unindexedCount, config } =
-    data;
+  const { run, ready, blockers, docCount, charCount, unindexedCount, config } = data;
   const running = Boolean(run && ACTIVE.includes(run.status));
 
   async function build(incremental = false) {
     setStarting(true);
     try {
-      const res = await fetch("/api/index", {
-        method: "POST",
+      const res = await fetch('/api/index', {
+        method: 'POST',
         body: JSON.stringify({ incremental }),
-        headers: { "Content-Type": "application/json" },
+        headers: { 'Content-Type': 'application/json' },
       });
       const body = await res.json();
       if (!res.ok) {
-        toast.error(body.error ?? "Could not start indexing.");
-        return;
-      }
-      toast.success("Indexing started.");
-      mutate();
-    } catch {
-      toast.error("Could not start indexing.");
-    } finally {
-      setStarting(false);
-    }
-  }
-
-  async function cancel() {
-    setStarting(true);
-    try {
-      const res = await fetch("/api/index", { method: "DELETE" });
-      if (!res.ok) {
-        toast.error("Could not cancel indexing.");
+        toast.error(body.error ?? 'Could not start indexing.');
         return;
       }
-      toast.success("Indexing cancelled.");
+      toast.success('Indexing started.');
       mutate();
+      onDone?.();
     } catch {
-      toast.error("Could not cancel indexing.");
+      toast.error('Could not start indexing.');
     } finally {
       setStarting(false);
     }
   }
 
   return (
-    <div className="space-y-6 px-6 py-6 md:px-8">
-      <ConfigSummary
-        config={config}
-        docCount={docCount}
-        charCount={charCount}
-      />
-
+    <div className="space-y-6">
       {!ready && (
         <Alert variant="default">
           <AlertTriangle className="size-4 text-orange-500!" />
-          <AlertTitle className="text-orange-500!">
-            Not ready to index
-          </AlertTitle>
+          <AlertTitle className="text-orange-500!">Not ready to index</AlertTitle>
           <AlertDescription>
-            <ul className="list-disc pl-4">
-              {blockers.map((b) => (
-                <li key={b}>{b}</li>
-              ))}
+            <ul className="list-disc pl-4 mt-2 space-y-2">
+              {blockers.map((b) => {
+                if (b === 'MISSING_EMBEDDING_API_KEY') {
+                  return (
+                    <li key={b} className="flex flex-col items-start gap-3">
+                      <span>An API key for your chosen embedding model is required.</span>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        render={<Link href="/settings">Go to AI Models in Settings</Link>}
+                      />
+                    </li>
+                  );
+                }
+                return <li key={b}>{b}</li>;
+              })}
             </ul>
           </AlertDescription>
         </Alert>
       )}
 
+      {run?.status === 'failed' && !run.error?.toLowerCase().includes('corpus cleared') && (
+        <Alert variant="destructive">
+          <AlertTriangle className="size-4" />
+          <AlertTitle>Indexing failed</AlertTitle>
+          <AlertDescription className="wrap-break-word">
+            {run.error ?? 'An unknown error occurred during indexing.'}
+          </AlertDescription>
+        </Alert>
+      )}
+
       <RunCard run={run} running={running} />
 
       {/* Pre-indexing warning — only shown before the very first run */}
-      {ready && !run && (
+      {/* {ready && !run && (
         <Alert>
           <Info className="size-4 text-blue-500!" />
           <AlertTitle className="text-blue-600 dark:text-blue-400">
@@ -201,73 +207,30 @@ export function IndexWorkspace() {
             </ul>
           </AlertDescription>
         </Alert>
-      )}
+      )} */}
 
-      <div className="flex items-center gap-3">
+      <div className="flex w-full items-center justify-between pt-4 mt-2">
+        <Button onClick={() => onClose?.()} size="lg" variant="outline">
+          Cancel
+        </Button>
         <Button
-          onClick={() => build(run?.status === "completed")}
+          onClick={() => build(run?.status === 'completed')}
           disabled={
-            !ready ||
-            running ||
-            starting ||
-            (run?.status === "completed" && unindexedCount === 0)
+            !ready || running || starting || (run?.status === 'completed' && unindexedCount === 0)
           }
           size="lg"
         >
           {running || starting ? (
-            <Loader2 className="size-4 animate-spin" />
+            <Loader2 className="size-4 animate-spin mr-2" />
           ) : (
-            <Play className="size-4" />
+            <Play className="size-4 mr-2" />
           )}
           {running
-            ? "Indexing…"
-            : run?.status === "completed"
-              ? `Index new documents (${unindexedCount})`
-              : `Start indexing (${unindexedCount})`}
+            ? 'Indexing…'
+            : run?.status === 'completed'
+            ? `Index new documents (${unindexedCount})`
+            : `Start indexing (${unindexedCount})`}
         </Button>
-        {running && (
-          <Button
-            onClick={cancel}
-            disabled={starting}
-            size="lg"
-            variant="destructive"
-          >
-            Cancel
-          </Button>
-        )}
-        {run?.status === "completed" && (
-          <AlertDialog>
-            <AlertDialogTrigger
-              render={
-                <Button
-                  disabled={!ready || running || starting}
-                  size="lg"
-                  variant="outline"
-                >
-                  <RotateCcw className="size-4 mr-2" />
-                  Re-Index
-                </Button>
-              }
-            />
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
-                  Are you sure you want to re-index?
-                </AlertDialogTitle>
-                <AlertDialogDescription>
-                  This will rebuild the entire index from scratch. All documents
-                  will be re-processed.
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction onClick={() => build(false)}>
-                  Continue
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        )}
       </div>
     </div>
   );
@@ -278,7 +241,7 @@ function ConfigSummary({
   docCount,
   charCount,
 }: {
-  config: IndexStatus["config"];
+  config: IndexStatus['config'];
   docCount: number;
   charCount: number;
 }) {
@@ -288,29 +251,29 @@ function ConfigSummary({
   const items = [
     {
       icon: Cpu,
-      label: "Embedding model",
+      label: 'Embedding model',
       value: model?.label ?? config.embeddingModelId,
       hint: model ? `${model.dimensions} dims` : undefined,
     },
     {
       icon: Database,
-      label: "Vector store",
+      label: 'Vector store',
       value: store?.label ?? config.vectorStore,
     },
     {
       icon: Boxes,
-      label: "Index type",
+      label: 'Index type',
       value: config.indexType.toUpperCase(),
     },
     {
       icon: Scissors,
-      label: "Chunking",
+      label: 'Chunking',
       value: `${config.chunking.chunkSize} / ${config.chunking.chunkOverlap}`,
-      hint: "size / overlap",
+      hint: 'size / overlap',
     },
     {
       icon: FileText,
-      label: "Corpus",
+      label: 'Corpus',
       value: `${docCount.toLocaleString()} docs`,
       hint: `${charCount.toLocaleString()} chars`,
     },
@@ -348,32 +311,18 @@ function ConfigSummary({
   );
 }
 
-const STATUS_COPY: Record<
-  IndexRun["status"],
-  { label: string; phase?: string }
-> = {
-  idle: { label: "Idle" },
-  chunking: { label: "Chunking", phase: "Splitting documents into chunks" },
-  embedding: { label: "Embedding", phase: "Generating vector embeddings" },
-  upserting: { label: "Storing", phase: "Writing vectors to the store" },
-  completed: { label: "Completed" },
-  failed: { label: "Failed" },
+const STATUS_COPY: Record<IndexRun['status'], { label: string; phase?: string }> = {
+  idle: { label: 'Idle' },
+  chunking: { label: 'Chunking', phase: 'Splitting documents into chunks' },
+  embedding: { label: 'Embedding', phase: 'Generating vector embeddings' },
+  upserting: { label: 'Storing', phase: 'Writing vectors to the store' },
+  completed: { label: 'Completed' },
+  failed: { label: 'Failed' },
 };
 
 function RunCard({ run, running }: { run: IndexRun | null; running: boolean }) {
-  if (!run) {
-    return (
-      <Card>
-        <CardContent className="flex flex-col items-center justify-center gap-1 py-12 text-center">
-          <Hash className="mb-1 size-6 text-muted-foreground/60" />
-          <p className="text-sm font-medium">No index built yet</p>
-          <p className="text-sm text-muted-foreground">
-            Build a Larkup index to embed your corpus and make it
-            searchable.
-          </p>
-        </CardContent>
-      </Card>
-    );
+  if (!run || run.status === 'failed') {
+    return <></>;
   }
 
   const copy = STATUS_COPY[run.status];
@@ -381,17 +330,15 @@ function RunCard({ run, running }: { run: IndexRun | null; running: boolean }) {
     run.totalChunks > 0
       ? Math.round((run.processedChunks / run.totalChunks) * 100)
       : running
-        ? 5
-        : 0;
+      ? 5
+      : 0;
 
   return (
     <Card>
       <CardHeader className="flex-row items-center justify-between">
         <CardTitle className="flex items-center gap-2 text-base">
-          {run.status === "completed" ? (
+          {run.status === 'completed' ? (
             <CheckCircle2 className="size-4 text-primary" />
-          ) : run.status === "failed" ? (
-            <AlertTriangle className="size-4 text-destructive" />
           ) : (
             <Loader2 className="size-4 animate-spin text-primary" />
           )}
@@ -400,52 +347,28 @@ function RunCard({ run, running }: { run: IndexRun | null; running: boolean }) {
         <StatusBadge status={run.status} />
       </CardHeader>
       <CardContent className="space-y-4">
-        {run.status === "failed" ? (
-          <Alert variant="destructive">
-            <AlertTriangle className="size-4" />
-            <AlertTitle>Indexing failed</AlertTitle>
-            <AlertDescription>{run.error}</AlertDescription>
-          </Alert>
-        ) : (
-          <>
-            <div className="space-y-2">
-              <div className="flex items-center justify-between text-sm">
-                <span className="text-muted-foreground">
-                  {copy.phase ?? "Done"}
-                </span>
-                <span className="font-mono tabular-nums">
-                  {run.processedChunks.toLocaleString()}
-                  {run.totalChunks > 0 &&
-                    ` / ${run.totalChunks.toLocaleString()}`}{" "}
-                  chunks
-                </span>
-              </div>
-              <Progress
-                value={pct}
-                className="**:data-[slot=progress-indicator]:bg-green-600"
-              />
-            </div>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">{copy.phase ?? 'Done'}</span>
+            <span className="font-mono tabular-nums">
+              {run.processedChunks.toLocaleString()}
+              {run.totalChunks > 0 && ` / ${run.totalChunks.toLocaleString()}`} chunks
+            </span>
+          </div>
+          <Progress value={pct} className="**:data-[slot=progress-indicator]:bg-green-600" />
+        </div>
 
-            <dl className="grid grid-cols-2 gap-4 pt-1 sm:grid-cols-4">
-              <Stat label="Documents" value={run.docCount.toLocaleString()} />
-              <Stat label="Chunks" value={run.totalChunks.toLocaleString()} />
-              <Stat
-                label="Dimensions"
-                value={run.dimensions ? run.dimensions.toLocaleString() : "—"}
-              />
-              <Stat
-                label="Duration"
-                value={
-                  run.durationMs
-                    ? `${(run.durationMs / 1000).toFixed(1)}s`
-                    : running
-                      ? "running…"
-                      : "—"
-                }
-              />
-            </dl>
-          </>
-        )}
+        <dl className="grid grid-cols-2 gap-4 pt-1 sm:grid-cols-4">
+          <Stat label="Documents" value={run.docCount.toLocaleString()} />
+          <Stat label="Chunks" value={run.totalChunks.toLocaleString()} />
+          <Stat label="Dimensions" value={run.dimensions ? run.dimensions.toLocaleString() : '—'} />
+          <Stat
+            label="Duration"
+            value={
+              run.durationMs ? `${(run.durationMs / 1000).toFixed(1)}s` : running ? 'running…' : '—'
+            }
+          />
+        </dl>
       </CardContent>
     </Card>
   );
@@ -460,14 +383,10 @@ function Stat({ label, value }: { label: string; value: string }) {
   );
 }
 
-function StatusBadge({ status }: { status: IndexRun["status"] }) {
-  if (status === "completed")
-    return (
-      <Badge className="bg-primary/12 text-primary hover:bg-primary/12">
-        Ready
-      </Badge>
-    );
-  if (status === "failed") return <Badge variant="destructive">Failed</Badge>;
+function StatusBadge({ status }: { status: IndexRun['status'] }) {
+  if (status === 'completed')
+    return <Badge className="bg-primary/12 text-primary hover:bg-primary/12">Ready</Badge>;
+  if (status === 'failed') return <Badge variant="destructive">Failed</Badge>;
   if (ACTIVE.includes(status))
     return (
       <span className="flex items-center gap-1.5 text-xs font-medium text-green-600">