@alpaca-editor/core 1.0.4059 → 1.0.4061

package/src/editor/FieldListField.tsx

@@ -22,7 +22,7 @@ import { FieldHistory } from "./FieldHistory";
 import {
   History,
   MessageCircle,
-  WandSparkles,  
+  WandSparkles,
   ExternalLink,
 } from "lucide-react";
 import { Checkbox } from "../components/ui/checkbox";
@@ -32,6 +32,11 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "../components/ui/popover";
+import {
+  Tooltip as InternalTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip";
 
 export default function FieldListField({
   field,
@@ -60,9 +65,9 @@ export default function FieldListField({
   // Field-specific subscription - only rerenders when THIS field changes
   const { isModified, isSaved } = useFieldModification(
     field.id,
-    fieldItem.id, 
+    fieldItem.id,
     fieldItem.language,
-    fieldItem.version
+    fieldItem.version,
   );
 
   const [showRawValue, setShowRawValue] = useState(false);
@@ -344,7 +349,10 @@ export default function FieldListField({
                   {!editContext.configuration.forceFullscreen && (
                     <SimpleIconButton
                       icon={
-                        <MessageCircle strokeWidth={1} className="h-3.5 w-3.5" />
+                        <MessageCircle
+                          strokeWidth={1}
+                          className="h-3.5 w-3.5"
+                        />
                       }
                       onClick={() => {
                         editContext.switchView("comments");
@@ -354,26 +362,35 @@ export default function FieldListField({
                     />
                   )}
                   {!readonly && renderGeneratorButtons}
-                  <Popover
-                    open={fieldHistoryOpen}
-                    onOpenChange={setFieldHistoryOpen}
-                  >
-                    <PopoverTrigger asChild>
-                      <button
-                        className="rounded p-1 transition-colors hover:bg-gray-100"
-                        aria-label="Field History"
+                  <InternalTooltip>
+                    <Popover
+                      open={fieldHistoryOpen}
+                      onOpenChange={setFieldHistoryOpen}
+                    >
+                      <PopoverTrigger asChild>
+                        <TooltipTrigger asChild>
+                          <button
+                            className="rounded p-1 transition-colors hover:bg-gray-100"
+                            aria-label="Field History"
+                          >
+                            <History strokeWidth={1} className="h-3.5 w-3.5" />
+                          </button>
+                        </TooltipTrigger>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        className="w-80 p-2"
+                        align="end"
+                        side="top"
                       >
-                        <History strokeWidth={1} className="h-3.5 w-3.5" />
-                      </button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-80 p-2" align="end" side="top">
-                      <FieldHistory
-                        field={field}
-                        onHover={(x) => setHistoryEntry(x)}
-                        onRevert={() => setFieldHistoryOpen(false)}
-                      />
-                    </PopoverContent>
-                  </Popover>
+                        <FieldHistory
+                          field={field}
+                          onHover={(x) => setHistoryEntry(x)}
+                          onRevert={() => setFieldHistoryOpen(false)}
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <TooltipContent>Field History</TooltipContent>
+                  </InternalTooltip>
                 </div>
               </>
             )}

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

@@ -9,7 +9,12 @@ import {
 } from "lucide-react";
 
 import { classNames } from "primereact/utils";
-import { IndexStatus, StagingStatus, ImportStatus } from "../../types";
+import {
+  IndexStatus,
+  StagingStatus,
+  ImportStatus,
+  CentroidsStatus,
+} from "../../types";
 import {
   getIndexStatus,
   cleanupBatches,
@@ -19,6 +24,8 @@ import {
   submitStaged,
   getStagingStatus,
   getImportStatus,
+  getCentroidsStatus,
+  startDirectGeneration,
 } from "../services/indexService";
 
 export function IndexOverview() {
@@ -31,8 +38,11 @@ export function IndexOverview() {
   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 {
@@ -44,6 +54,9 @@ export function IndexOverview() {
       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",
@@ -83,6 +96,23 @@ export function IndexOverview() {
     }
   };
 
+  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);
@@ -168,7 +198,7 @@ export function IndexOverview() {
   return (
     <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 border-b border-gray-200 pb-2">
+        <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>
@@ -191,29 +221,53 @@ export function IndexOverview() {
                 isSubmitting ||
                 inProgressCount > 0 ||
                 indexStatus?.rebuilding ||
-                importStatus?.isImporting
+                importStatus?.isImporting ||
+                centroidsStatus?.isPopulating
               ) {
                 return null;
               } else if (stagedCount > 0) {
+                const batchCost =
+                  staging?.estimatedBatchCost ?? staging?.estimatedCost ?? 0;
+                const directCost = staging?.estimatedDirectCost ?? 0;
                 return (
-                  <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..."
-                      : "Submit and Generate Embeddings"}
-                  </button>
+                  <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 (
@@ -250,7 +304,7 @@ export function IndexOverview() {
                   )}
                 >
                   <RefreshCw className="h-4 w-4" strokeWidth={1} />
-                  {isCollecting ? "Collecting..." : "Collect items"}
+                  {isCollecting ? "Collecting..." : "Rebuild Index"}
                 </button>
               );
             })()}
@@ -267,19 +321,21 @@ export function IndexOverview() {
               />
               <button
                 onClick={handlePopulateCentroids}
-                disabled={isPopulating}
+                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":
-                      !isPopulating,
+                      !centroidsStatus?.isPopulating && !isPopulating,
                     "cursor-not-allowed bg-gray-300 text-gray-500":
-                      isPopulating,
+                      centroidsStatus?.isPopulating || isPopulating,
                   },
                 )}
               >
                 <Database className="h-4 w-4" strokeWidth={1} />
-                {isPopulating ? "Populating..." : "Populate Centroids"}
+                {centroidsStatus?.isPopulating || isPopulating
+                  ? centroidsStatus?.status || "Populating..."
+                  : "Populate Centroids"}
               </button>
               <button
                 onClick={handleCleanup}
@@ -337,9 +393,11 @@ export function IndexOverview() {
                       ? "Generating Embeddings"
                       : importStatus?.isImporting
                         ? importStatus.status || "Importing embeddings"
-                        : indexStatus.rebuilding
-                          ? "Rebuilding"
-                          : "Ready";
+                        : centroidsStatus?.isPopulating
+                          ? centroidsStatus.status || "Populating centroids"
+                          : indexStatus.rebuilding
+                            ? "Rebuilding"
+                            : "Ready";
                   const statusClass =
                     statusLabel === "Rebuilding"
                       ? "text-orange-600"
@@ -349,7 +407,9 @@ export function IndexOverview() {
                           ? "text-indigo-600"
                           : importStatus?.isImporting
                             ? "text-purple-600"
-                            : "text-green-600";
+                            : centroidsStatus?.isPopulating
+                              ? "text-pink-600"
+                              : "text-green-600";
                   return (
                     <div
                       className={classNames("text-sm font-medium", statusClass)}
@@ -361,58 +421,87 @@ export function IndexOverview() {
               </div>
             </div>
 
-            <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>{staging?.fileCount ?? 0}</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 Cost</span>
-                <span>~${(staging?.estimatedCost ?? 0).toFixed(2)}</span>
-              </div>
-              {(() => {
-                const stagedCount = staging?.fileCount ?? 0;
-                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 ||
-                  indexStatus?.rebuilding ||
-                  importStatus?.isImporting
-                    ? ""
-                    : stagedCount > 0
-                      ? "Submit and Generate Embeddings"
-                      : inProgress
-                        ? "Generating Embeddings"
-                        : completedCount > 0
-                          ? "Import embeddings"
-                          : "Collect items";
+            {(() => {
+              const stagedCount = staging?.fileCount ?? 0;
+
+              // Only show staging section if there are staged files
+              if (stagedCount > 0) {
                 return (
-                  <div className="mt-2 text-xs text-gray-700">
-                    {nextStep && (
-                      <>
-                        Next step:{" "}
-                        <span className="font-medium">{nextStep}</span>
-                      </>
-                    )}
+                  <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>
                 );
-              })()}
-            </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>

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/page-editor-chrome/useInlineAICompletion.tsx

@@ -375,7 +375,7 @@ ONLY provide the completion text (what comes after the user's text), never repea
             content: contentUpToCursor,
           },
         },
-        { model: "gpt-4.1-nano" },
+        { model: "gpt-4.1-nano", sessionId: editContext.sessionId },
         { signal },
       );