@alpaca-editor/core 1.0.4057 → 1.0.4061

package/src/editor/control-center/IndexOverview.tsx

@@ -1,49 +1,603 @@
-import { useEffect } from "react";
-import { useState } from "react";
-import { getIndexes } from "../services/indexService";
+import { useEffect, useState } from "react";
+import {
+  RefreshCw,
+  Database,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  Trash2,
+} from "lucide-react";
 
-import { IndexSettings } from "./IndexSettings";
 import { classNames } from "primereact/utils";
+import {
+  IndexStatus,
+  StagingStatus,
+  ImportStatus,
+  CentroidsStatus,
+} from "../../types";
+import {
+  getIndexStatus,
+  cleanupBatches,
+  populateCentroids,
+  processCompletedBatches,
+  collectAndUpload,
+  submitStaged,
+  getStagingStatus,
+  getImportStatus,
+  getCentroidsStatus,
+  startDirectGeneration,
+} from "../services/indexService";
 
 export function IndexOverview() {
-  const [indexes, setIndexes] = useState<string[] | undefined>(undefined);
-  const [selectedIndex, setSelectedIndex] = useState<string | undefined>(
-    undefined
-  );
+  const [indexStatus, setIndexStatus] = useState<IndexStatus | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCleaning, setIsCleaning] = useState(false);
+  const [isPopulating, setIsPopulating] = useState(false);
+  const [kCentroids, setKCentroids] = useState<number>(1024);
+  const [error, setError] = useState<string | null>(null);
+  const [isFinalizing, setIsFinalizing] = useState(false);
+  const [staging, setStaging] = useState<StagingStatus | null>(null);
+  const [importStatus, setImportStatus] = useState<ImportStatus | null>(null);
+  const [centroidsStatus, setCentroidsStatus] =
+    useState<CentroidsStatus | null>(null);
+  const [isCollecting, setIsCollecting] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isStartingDirect, setIsStartingDirect] = useState(false);
+
+  const fetchStatus = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const status = await getIndexStatus();
+      setIndexStatus(status || null);
+      const st = (await getStagingStatus()) as StagingStatus | null;
+      setStaging(st || null);
+      const importSt = (await getImportStatus()) as ImportStatus | null;
+      setImportStatus(importSt || null);
+      const centroidsSt =
+        (await getCentroidsStatus()) as CentroidsStatus | null;
+      setCentroidsStatus(centroidsSt || null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch index status",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCollectAndUpload = async () => {
+    try {
+      setIsCollecting(true);
+      setError(null);
+      await collectAndUpload();
+      await fetchStatus();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to collect and upload",
+      );
+    } finally {
+      setIsCollecting(false);
+    }
+  };
+
+  const handleSubmitStaged = async () => {
+    try {
+      setIsSubmitting(true);
+      setError(null);
+      await submitStaged();
+      await fetchStatus();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to submit staged files",
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleStartDirect = async () => {
+    try {
+      setIsStartingDirect(true);
+      setError(null);
+      await startDirectGeneration();
+      await fetchStatus();
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Failed to start direct generation",
+      );
+    } finally {
+      setIsStartingDirect(false);
+    }
+  };
+
+  const handleCleanup = async () => {
+    try {
+      setIsCleaning(true);
+      setError(null);
+      await cleanupBatches();
+      await fetchStatus();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to cleanup batches",
+      );
+    } finally {
+      setIsCleaning(false);
+    }
+  };
+
+  const handlePopulateCentroids = async () => {
+    try {
+      setIsPopulating(true);
+      setError(null);
+      await populateCentroids(kCentroids || 1024);
+      await fetchStatus();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to populate centroids",
+      );
+    } finally {
+      setIsPopulating(false);
+    }
+  };
+
+  const handleFinalize = async () => {
+    try {
+      setIsFinalizing(true);
+      setError(null);
+      await processCompletedBatches();
+      await fetchStatus();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to finalize rebuild",
+      );
+    } finally {
+      setIsFinalizing(false);
+    }
+  };
+
   useEffect(() => {
-    async function loadIndexes() {
-      const indexes = await getIndexes();
-      if (indexes.indexOf("master") === -1) {
-        indexes.push("master");
-      }
-      if (indexes.indexOf("media") === -1) {
-        indexes.push("media");
-      }
-      setIndexes(indexes);
-    }
-    loadIndexes();
+    fetchStatus();
+    // Poll for status updates every 60 seconds
+    const interval = setInterval(fetchStatus, 60000);
+    return () => clearInterval(interval);
   }, []);
+
+  const getBatchStatusIcon = (status?: string) => {
+    switch (status?.toLowerCase()) {
+      case "completed":
+        return (
+          <CheckCircle className="h-4 w-4 text-green-500" strokeWidth={1} />
+        );
+      case "failed":
+        return <AlertCircle className="h-4 w-4 text-red-500" strokeWidth={1} />;
+      case "processing":
+        return <Clock className="h-4 w-4 text-blue-500" strokeWidth={1} />;
+      default:
+        return (
+          <AlertCircle className="h-4 w-4 text-yellow-500" strokeWidth={1} />
+        );
+    }
+  };
+
+  const getBatchStatusLabelStyles = (status?: string) => {
+    switch (status?.toLowerCase()) {
+      case "completed":
+        return "bg-green-100 text-green-700";
+      case "failed":
+        return "bg-red-100 text-red-700";
+      case "processing":
+        return "bg-blue-100 text-blue-700";
+      default:
+        return "bg-yellow-100 text-yellow-700";
+    }
+  };
+
   return (
-    <div className="flex items-stretch h-full">
-      <div className="flex flex-col gap-2 border-r border-gray-200">
-        <div className="flex items-center justify-center p-2 min-w-40 border-b border-gray-200">
-          Index
+    <div className="flex h-full items-stretch">
+      <div className="flex min-w-96 flex-col gap-4 p-4">
+        <div className="flex items-center justify-between gap-4 border-b border-gray-200 pb-2">
+          <div className="flex items-center gap-2">
+            <Database className="h-5 w-5" strokeWidth={1} />
+            <span className="font-semibold">Search Index</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {(() => {
+              const stagedCount = staging?.fileCount ?? 0;
+              const batches = indexStatus?.batches || [];
+              const completedCount = batches.filter(
+                (b) => (b.status || "").toLowerCase() === "completed",
+              ).length;
+              const inProgressCount = batches.filter((b) => {
+                const s = (b.status || "").toLowerCase();
+                return (
+                  s === "submitted" || s === "processing" || s === "queued"
+                );
+              }).length;
+              if (
+                isCollecting ||
+                isSubmitting ||
+                inProgressCount > 0 ||
+                indexStatus?.rebuilding ||
+                importStatus?.isImporting ||
+                centroidsStatus?.isPopulating
+              ) {
+                return null;
+              } else if (stagedCount > 0) {
+                const batchCost =
+                  staging?.estimatedBatchCost ?? staging?.estimatedCost ?? 0;
+                const directCost = staging?.estimatedDirectCost ?? 0;
+                return (
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={handleSubmitStaged}
+                      disabled={isSubmitting || stagedCount === 0}
+                      className={classNames(
+                        "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
+                        {
+                          "bg-amber-600 text-white hover:bg-amber-700":
+                            !isSubmitting && stagedCount > 0,
+                          "cursor-not-allowed bg-gray-300 text-gray-500":
+                            isSubmitting || stagedCount === 0,
+                        },
+                      )}
+                    >
+                      <CheckCircle className="h-4 w-4" strokeWidth={1} />
+                      {isSubmitting
+                        ? "Submitting..."
+                        : `Batch (~$${batchCost.toFixed(2)})`}
+                    </button>
+                    <button
+                      onClick={handleStartDirect}
+                      disabled={isStartingDirect || stagedCount === 0}
+                      className={classNames(
+                        "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
+                        {
+                          "bg-rose-600 text-white hover:bg-rose-700":
+                            !isStartingDirect && stagedCount > 0,
+                          "cursor-not-allowed bg-gray-300 text-gray-500":
+                            isStartingDirect || stagedCount === 0,
+                        },
+                      )}
+                    >
+                      <CheckCircle className="h-4 w-4" strokeWidth={1} />
+                      {isStartingDirect
+                        ? "Starting..."
+                        : `Direct (~$${directCost.toFixed(2)})`}
+                    </button>
+                  </div>
+                );
+              } else if (completedCount > 0) {
+                return (
+                  <button
+                    onClick={handleFinalize}
+                    disabled={isFinalizing}
+                    className={classNames(
+                      "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
+                      {
+                        "bg-green-600 text-white hover:bg-green-700":
+                          !isFinalizing,
+                        "cursor-not-allowed bg-gray-300 text-gray-500":
+                          isFinalizing,
+                      },
+                    )}
+                  >
+                    <CheckCircle className="h-4 w-4" strokeWidth={1} />
+                    {isFinalizing ? "Importing..." : "Import embeddings"}
+                  </button>
+                );
+              }
+              return (
+                <button
+                  onClick={handleCollectAndUpload}
+                  disabled={isCollecting}
+                  className={classNames(
+                    "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
+                    {
+                      "bg-indigo-600 text-white hover:bg-indigo-700":
+                        !isCollecting,
+                      "cursor-not-allowed bg-gray-300 text-gray-500":
+                        isCollecting,
+                    },
+                  )}
+                >
+                  <RefreshCw className="h-4 w-4" strokeWidth={1} />
+                  {isCollecting ? "Collecting..." : "Rebuild Index"}
+                </button>
+              );
+            })()}
+
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                min={1}
+                value={kCentroids}
+                onChange={(e) =>
+                  setKCentroids(parseInt(e.target.value) || 1024)
+                }
+                className="w-24 rounded border border-gray-300 px-2 py-1 text-sm"
+              />
+              <button
+                onClick={handlePopulateCentroids}
+                disabled={centroidsStatus?.isPopulating || isPopulating}
+                className={classNames(
+                  "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
+                  {
+                    "bg-purple-500 text-white hover:bg-purple-600":
+                      !centroidsStatus?.isPopulating && !isPopulating,
+                    "cursor-not-allowed bg-gray-300 text-gray-500":
+                      centroidsStatus?.isPopulating || isPopulating,
+                  },
+                )}
+              >
+                <Database className="h-4 w-4" strokeWidth={1} />
+                {centroidsStatus?.isPopulating || isPopulating
+                  ? centroidsStatus?.status || "Populating..."
+                  : "Populate Centroids"}
+              </button>
+              <button
+                onClick={handleCleanup}
+                disabled={isCleaning}
+                className={classNames(
+                  "flex items-center gap-2 rounded px-3 py-1.5 text-sm font-medium transition-colors",
+                  {
+                    "bg-gray-100 text-gray-700 hover:bg-gray-200": !isCleaning,
+                    "cursor-not-allowed bg-gray-300 text-gray-500": isCleaning,
+                  },
+                )}
+              >
+                <Trash2 className="h-4 w-4" strokeWidth={1} />
+                {isCleaning ? "Cleaning..." : "Cleanup"}
+              </button>
+            </div>
+          </div>
         </div>
-        {indexes?.map((index) => (
-          <div
-            key={index}
-            onClick={() => setSelectedIndex(index)}
-            className={classNames(
-              "cursor-pointer p-2 px-6 hover:bg-gray-100 text-sm",
-              selectedIndex === index && "bg-gray-100"
+
+        {error && (
+          <div className="rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+            {error}
+          </div>
+        )}
+
+        {isLoading && !indexStatus ? (
+          <div className="flex items-center justify-center py-8">
+            <RefreshCw
+              className="h-6 w-6 animate-spin text-gray-400"
+              strokeWidth={1}
+            />
+          </div>
+        ) : indexStatus ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="rounded bg-gray-50 p-3">
+                <div className="text-sm text-gray-600">Indexed Items</div>
+                <div className="text-2xl font-semibold">
+                  {indexStatus.numberOfIndexedItems?.toLocaleString() ?? "0"}
+                </div>
+              </div>
+              <div className="rounded bg-gray-50 p-3">
+                <div className="text-sm text-gray-600">Status</div>
+                {(() => {
+                  const batches = indexStatus?.batches || [];
+                  const inProgress = batches.some((b) => {
+                    const s = (b.status || "").toLowerCase();
+                    return (
+                      s === "submitted" || s === "processing" || s === "queued"
+                    );
+                  });
+                  const statusLabel = isCollecting
+                    ? "Collecting items"
+                    : isSubmitting || inProgress
+                      ? "Generating Embeddings"
+                      : importStatus?.isImporting
+                        ? importStatus.status || "Importing embeddings"
+                        : centroidsStatus?.isPopulating
+                          ? centroidsStatus.status || "Populating centroids"
+                          : indexStatus.rebuilding
+                            ? "Rebuilding"
+                            : "Ready";
+                  const statusClass =
+                    statusLabel === "Rebuilding"
+                      ? "text-orange-600"
+                      : statusLabel === "Generating Embeddings"
+                        ? "text-blue-600"
+                        : statusLabel === "Collecting items"
+                          ? "text-indigo-600"
+                          : importStatus?.isImporting
+                            ? "text-purple-600"
+                            : centroidsStatus?.isPopulating
+                              ? "text-pink-600"
+                              : "text-green-600";
+                  return (
+                    <div
+                      className={classNames("text-sm font-medium", statusClass)}
+                    >
+                      {statusLabel}
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
+
+            {(() => {
+              const stagedCount = staging?.fileCount ?? 0;
+
+              // Only show staging section if there are staged files
+              if (stagedCount > 0) {
+                return (
+                  <div className="rounded bg-gray-50 p-3">
+                    <div className="flex items-center justify-between text-sm text-gray-600">
+                      <span>Staged Files</span>
+                      <span>{stagedCount}</span>
+                    </div>
+                    <div className="mt-1 flex items-center justify-between text-sm text-gray-600">
+                      <span>Estimated Input Tokens</span>
+                      <span>
+                        {(staging?.estimatedInputTokens ?? 0).toLocaleString()}
+                      </span>
+                    </div>
+                    <div className="mt-1 flex items-center justify-between text-sm text-gray-600">
+                      <span>Estimated Batch Cost</span>
+                      <span>
+                        ~$
+                        {(
+                          staging?.estimatedBatchCost ??
+                          staging?.estimatedCost ??
+                          0
+                        ).toFixed(2)}
+                      </span>
+                    </div>
+                    <div className="mt-1 flex items-center justify-between text-sm text-gray-600">
+                      <span>Estimated Direct Cost</span>
+                      <span>
+                        ~${(staging?.estimatedDirectCost ?? 0).toFixed(2)}
+                      </span>
+                    </div>
+                    <div className="mt-2 text-xs text-gray-700">
+                      Next step:{" "}
+                      <span className="font-medium">
+                        Choose: Batch or Direct generation
+                      </span>
+                    </div>
+                  </div>
+                );
+              }
+
+              // Show next step info even when no staged files (but not "Rebuild Index")
+              const batches = indexStatus?.batches || [];
+              const completedCount = batches.filter(
+                (b) => (b.status || "").toLowerCase() === "completed",
+              ).length;
+              const inProgress = batches.some((b) => {
+                const s = (b.status || "").toLowerCase();
+                return (
+                  s === "submitted" || s === "processing" || s === "queued"
+                );
+              });
+              const nextStep =
+                isCollecting ||
+                isSubmitting ||
+                isStartingDirect ||
+                indexStatus?.rebuilding ||
+                importStatus?.isImporting ||
+                centroidsStatus?.isPopulating
+                  ? ""
+                  : inProgress
+                    ? "Generating Embeddings"
+                    : completedCount > 0
+                      ? "Import embeddings"
+                      : ""; // Don't show "Rebuild Index" as next step
+
+              if (nextStep) {
+                return (
+                  <div className="rounded bg-gray-50 p-3">
+                    <div className="text-xs text-gray-700">
+                      Next step: <span className="font-medium">{nextStep}</span>
+                    </div>
+                  </div>
+                );
+              }
+
+              return null;
+            })()}
+
+            {indexStatus.batches && indexStatus.batches.length > 0 && (
+              <div>
+                <h3 className="mb-2 text-sm font-medium text-gray-700">
+                  Recent Batches
+                </h3>
+                <div className="space-y-2 overflow-y-auto">
+                  {indexStatus.batches.map((batch) => (
+                    <div
+                      key={batch.id}
+                      className="rounded bg-gray-50 p-2 text-sm"
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          {getBatchStatusIcon(batch.status)}
+                          <span
+                            className={`rounded px-2 py-0.5 text-xs font-medium ${getBatchStatusLabelStyles(batch.status)}`}
+                          >
+                            {batch.status ?? "Unknown"}
+                          </span>
+                          <span className="font-mono text-xs">
+                            {batch.id?.slice(-8) ?? "Unknown"}
+                          </span>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-gray-600">
+                            {batch.numberOfItems ?? 0} items
+                          </div>
+                          <div className="text-xs text-gray-500">
+                            {batch.created
+                              ? new Date(batch.created).toLocaleDateString()
+                              : "Unknown"}
+                          </div>
+                        </div>
+                      </div>
+                      {((batch.firstErrors && batch.firstErrors.length > 0) ||
+                        batch.errorMessage) && (
+                        <div className="mt-1 text-xs text-red-600">
+                          {(() => {
+                            const messages =
+                              batch.firstErrors && batch.firstErrors.length > 0
+                                ? batch.firstErrors.slice(0, 3)
+                                : batch.errorMessage
+                                  ? [batch.errorMessage]
+                                  : [];
+                            const shownCount = messages.length;
+                            const totalCount =
+                              batch.errorCount && batch.errorCount > 0
+                                ? batch.errorCount
+                                : shownCount;
+                            const suffix =
+                              totalCount > shownCount
+                                ? ` (+${totalCount - shownCount} more)`
+                                : "";
+                            return `${messages.join(" · ")}${suffix}`;
+                          })()}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
             )}
-          >
-            {index}
+
+            {indexStatus.latestEmbeddedItems &&
+              indexStatus.latestEmbeddedItems.length > 0 && (
+                <div>
+                  <h3 className="mb-2 text-sm font-medium text-gray-700">
+                    Latest Embeddings Generated
+                  </h3>
+                  <div className="max-h-72 space-y-1 overflow-y-auto">
+                    {indexStatus.latestEmbeddedItems.slice(0, 50).map((it) => (
+                      <div
+                        key={it.itemId + it.created}
+                        className="flex items-center justify-between rounded bg-gray-50 p-2 text-sm"
+                      >
+                        <div className="min-w-0">
+                          <div className="truncate font-medium">
+                            {it.name || it.itemId.slice(-8)}
+                          </div>
+                          {it.path && (
+                            <div className="truncate text-xs text-gray-500">
+                              {it.path}
+                            </div>
+                          )}
+                        </div>
+                        <div className="ml-2 shrink-0 text-xs text-gray-500">
+                          {new Date(it.created).toLocaleString()}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
           </div>
-        ))}
-      </div>
-      <div className="flex-1 p-2">
-        {selectedIndex && <IndexSettings index={{ name: selectedIndex }} />}
+        ) : null}
       </div>
     </div>
   );

package/src/editor/control-center/Status.tsx

@@ -91,7 +91,7 @@ export function Status() {
       name: "content",
       defaultSize: "auto",
       content: (
-        <div className="absolute inset-0 overflow-auto">
+        <div className="absolute inset-0 overflow-auto rounded-xl bg-white">
           {selectedPanel ? (
             selectedPanel.content
           ) : (

package/src/editor/field-types/CheckboxEditor.tsx

@@ -34,6 +34,7 @@ export function CheckboxEditor({
       key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
       checked={field.value}
       disabled={readOnly}
+      className="focus-shadow"
       onCheckedChange={(checked) => {
         setIsUpdating(true);
         editContext.operations.editField({

package/src/editor/media-selector/AiImageSearch.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState, useRef } from "react";
 
 import { useDebouncedCallback } from "use-debounce";
 import { createEditorAiContext } from "../ai/editorAiContext";
-import { executePrompt, executeSearch } from "../services/aiService";
+import { executePrompt } from "../services/aiService";
+import { executeSearch } from "../services/searchService";
 import { useEditContext } from "../client/editContext";
 import { ProgressSpinner } from "primereact/progressspinner";
 import { InputText } from "primereact/inputtext";

package/src/editor/media-selector/TreeSelector.tsx

@@ -7,7 +7,7 @@ import { ItemTreeNodeData, getChildren } from "../services/contentService";
 import { useEditContext } from "../client/editContext";
 import { Button } from "../../components/ui/button";
 import { UploadButton } from "../../components/ui/upload-button";
-import { executeSearch } from "../services/aiService";
+import { executeSearch } from "../services/searchService";
 import { ClockIcon, Upload } from "lucide-react";
 
 import DialogButtons from "../ui/DialogButtons";

package/src/editor/menubar/PageSelector.tsx

@@ -11,7 +11,7 @@ import { ResultItem } from "../ui/ItemSearch";
 import { ScrollingContentTree } from "../ScrollingContentTree";
 import { ItemTreeNodeData } from "../services/contentService";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { executeSearch } from "../services/aiService";
+import { executeSearch } from "../services/searchService";
 import { ItemList } from "../ui/ItemList";
 import { DotsVerticalIcon } from "@radix-ui/react-icons";
 import {