@alpaca-editor/core 1.0.4094 → 1.0.4096

package/src/editor/control-center/setup-steps/{AiSetupStep.tsx → AiSetupStep/index.tsx}

@@ -1,21 +1,16 @@
 import React, { useCallback, useMemo, useState } from "react";
-import { Card } from "../../../components/ui/card";
-import { Button } from "../../../components/ui/button";
-import { Select } from "../../../components/ui/select";
-import { Input } from "../../../components/ui/input";
-import { useEditContext } from "../../client/editContext";
-import { ItemDescriptor } from "../../pageModel";
-import { getChildren } from "../../services/contentService";
-import type { ItemTreeNodeData } from "../../services/contentService";
-import {
-  CheckCircle,
-  RefreshCw,
-  SparklesIcon,
-  AlertCircle,
-} from "lucide-react";
-import { contentItemId } from "../../../config/config";
-
-type StepState = "idle" | "checking" | "success" | "error";
+import { Card } from "../../../../components/ui/card";
+import { useEditContext } from "../../../client/editContext";
+import { ItemDescriptor } from "../../../pageModel";
+import { getChildren } from "../../../services/contentService";
+import type { ItemTreeNodeData } from "../../../services/contentService";
+import { SparklesIcon } from "lucide-react";
+import { contentItemId } from "../../../../config/config";
+import { RequiredContainersList } from "./required-containers/RequiredContainersList";
+import { ProviderSection } from "./provider/ProviderSection";
+import { GenerateToolsSection } from "./tools/GenerateToolsSection";
+
+export type StepState = "idle" | "checking" | "success" | "error";
 
 function findByName(
   items: ItemTreeNodeData[],
@@ -577,7 +572,7 @@ export function AiSetupStep() {
     } finally {
       setAiBusy(false);
     }
-  }, [aiProvider, editContext, userLang, resolvePathUnderContent]);
+  }, [aiProvider, editContext, userLang, resolvePathUnderContent, apiKey]);
 
   const checkRequiredContainers = useCallback(async () => {
     try {
@@ -659,119 +654,31 @@ export function AiSetupStep() {
       title="AI setup"
       description="Add an AI endpoint (OpenAI, Azure OpenAI, or OpenRouter)."
     >
-      <div className="flex flex-col gap-2">
-        {requiredContainers
-          .filter((rc) => containerStates[rc.name] === "error")
-          .map((rc) => (
-            <div
-              key={rc.name}
-              className="flex items-center justify-between gap-2"
-            >
-              <div className="flex items-center gap-2">
-                {containerStates[rc.name] === "checking" ? (
-                  <RefreshCw
-                    strokeWidth={1}
-                    className="h-4 w-4 animate-spin text-amber-600"
-                  />
-                ) : containerStates[rc.name] === "success" ? (
-                  <CheckCircle
-                    strokeWidth={1}
-                    className="h-4 w-4 text-green-600"
-                  />
-                ) : (
-                  <AlertCircle
-                    strokeWidth={1}
-                    className="h-4 w-4 text-red-600"
-                  />
-                )}
-                <span className="text-sm text-gray-700">
-                  {containerStates[rc.name] === "checking"
-                    ? `Checking ${rc.name}...`
-                    : containerStates[rc.name] === "success"
-                      ? `${rc.name} present`
-                      : `${rc.name} missing`}
-                </span>
-              </div>
-              {containerStates[rc.name] !== "success" && (
-                <Button
-                  size="sm"
-                  onClick={() => createContainer(rc.name, rc.templateId)}
-                  disabled={!editorSettingsItem || !!busyMap[rc.name]}
-                >
-                  {busyMap[rc.name] ? (
-                    <RefreshCw
-                      strokeWidth={1}
-                      className="h-4 w-4 animate-spin"
-                    />
-                  ) : (
-                    <CheckCircle strokeWidth={1} className="h-4 w-4" />
-                  )}
-                  Fix
-                </Button>
-              )}
-            </div>
-          ))}
-      </div>
-      {containersError && (
-        <div className="mt-2 rounded border border-yellow-200 bg-yellow-50 p-2 text-xs whitespace-pre-wrap text-yellow-800">
-          {containersError}
-        </div>
-      )}
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">
-          <CheckCircle strokeWidth={1} className="h-4 w-4 text-green-600" />
-          <span className="text-sm text-gray-700">
-            Select provider and add endpoint
-          </span>
-        </div>
-      </div>
-      <div className="mt-3 flex items-center gap-2">
-        <Select
-          value={aiProvider}
-          onValueChange={setAiProvider}
-          options={aiOptions}
-          placeholder="Choose provider"
-        />
-        {aiProvider && (
-          <Input
-            type="password"
-            placeholder="API key"
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-            className="w-56"
-          />
-        )}
-        <Button
-          size="sm"
-          disabled={!aiProvider || !apiKey || aiBusy}
-          onClick={createAiEndpoint}
-        >
-          {aiBusy ? (
-            <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
-          ) : (
-            <CheckCircle strokeWidth={1} className="h-4 w-4" />
-          )}
-          Add endpoint
-        </Button>
-      </div>
-      <div className="mt-4 flex items-center gap-2">
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={toolsBusy}
-          onClick={ensureAiToolsAndGenerate}
-        >
-          {toolsBusy ? (
-            <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
-          ) : (
-            <CheckCircle strokeWidth={1} className="h-4 w-4" />
-          )}
-          Generate AI tool items
-        </Button>
-        {toolsError && (
-          <span className="text-xs text-red-600">{toolsError}</span>
-        )}
-      </div>
+      <RequiredContainersList
+        requiredContainers={requiredContainers}
+        containerStates={containerStates}
+        busyMap={busyMap}
+        canFix={!!editorSettingsItem}
+        containersError={containersError}
+        onFixContainer={createContainer}
+      />
+
+      <ProviderSection
+        aiProvider={aiProvider}
+        aiOptions={aiOptions}
+        onProviderChange={setAiProvider}
+        apiKey={apiKey}
+        onApiKeyChange={setApiKey}
+        aiBusy={aiBusy}
+        onAddEndpoint={createAiEndpoint}
+      />
+
+      <GenerateToolsSection
+        toolsBusy={toolsBusy}
+        toolsError={toolsError}
+        onGenerateTools={ensureAiToolsAndGenerate}
+      />
+
       {aiError && (
         <div className="mt-2 rounded border border-red-200 bg-red-50 p-2 text-xs whitespace-pre-wrap text-red-700">
           {aiError}

package/src/editor/control-center/setup-steps/AiSetupStep/provider/ProviderSection.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Select } from "../../../../../components/ui/select";
+import { Input } from "../../../../../components/ui/input";
+import { Button } from "../../../../../components/ui/button";
+import { CheckCircle, RefreshCw } from "lucide-react";
+
+interface ProviderOption {
+  value: string;
+  label: string;
+}
+
+interface ProviderSectionProps {
+  aiProvider: string;
+  aiOptions: ProviderOption[];
+  onProviderChange: (value: string) => void;
+  apiKey: string;
+  onApiKeyChange: (value: string) => void;
+  aiBusy: boolean;
+  onAddEndpoint: () => void;
+}
+
+export function ProviderSection(props: ProviderSectionProps) {
+  const {
+    aiProvider,
+    aiOptions,
+    onProviderChange,
+    apiKey,
+    onApiKeyChange,
+    aiBusy,
+    onAddEndpoint,
+  } = props;
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <CheckCircle strokeWidth={1} className="h-4 w-4 text-green-600" />
+          <span className="text-sm text-gray-700">
+            Select provider and add endpoint
+          </span>
+        </div>
+      </div>
+      <div className="mt-3 flex items-center gap-2">
+        <Select
+          value={aiProvider}
+          onValueChange={onProviderChange}
+          options={aiOptions}
+          placeholder="Choose provider"
+        />
+        {aiProvider && (
+          <Input
+            type="password"
+            placeholder="API key"
+            value={apiKey}
+            onChange={(e) => onApiKeyChange(e.target.value)}
+            className="w-56"
+          />
+        )}
+        <Button
+          size="sm"
+          disabled={!aiProvider || !apiKey || aiBusy}
+          onClick={onAddEndpoint}
+        >
+          {aiBusy ? (
+            <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+          ) : (
+            <CheckCircle strokeWidth={1} className="h-4 w-4" />
+          )}
+          Add endpoint
+        </Button>
+      </div>
+    </>
+  );
+}

package/src/editor/control-center/setup-steps/AiSetupStep/required-containers/RequiredContainersList.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { Button } from "../../../../../components/ui/button";
+import { AlertCircle, CheckCircle, RefreshCw } from "lucide-react";
+import type { StepState } from "../index";
+
+interface RequiredContainerDef {
+  name: string;
+  templateId: string;
+}
+
+interface RequiredContainersListProps {
+  requiredContainers: RequiredContainerDef[];
+  containerStates: Record<string, StepState>;
+  busyMap: Record<string, boolean>;
+  canFix: boolean;
+  containersError: string | null;
+  onFixContainer: (name: string, templateId: string) => void;
+}
+
+export function RequiredContainersList(props: RequiredContainersListProps) {
+  const {
+    requiredContainers,
+    containerStates,
+    busyMap,
+    canFix,
+    containersError,
+    onFixContainer,
+  } = props;
+
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        {requiredContainers
+          .filter((rc) => containerStates[rc.name] === "error")
+          .map((rc) => (
+            <div
+              key={rc.name}
+              className="flex items-center justify-between gap-2"
+            >
+              <div className="flex items-center gap-2">
+                {containerStates[rc.name] === "checking" ? (
+                  <RefreshCw
+                    strokeWidth={1}
+                    className="h-4 w-4 animate-spin text-amber-600"
+                  />
+                ) : containerStates[rc.name] === "success" ? (
+                  <CheckCircle
+                    strokeWidth={1}
+                    className="h-4 w-4 text-green-600"
+                  />
+                ) : (
+                  <AlertCircle
+                    strokeWidth={1}
+                    className="h-4 w-4 text-red-600"
+                  />
+                )}
+                <span className="text-sm text-gray-700">
+                  {containerStates[rc.name] === "checking"
+                    ? `Checking ${rc.name}...`
+                    : containerStates[rc.name] === "success"
+                      ? `${rc.name} present`
+                      : `${rc.name} missing`}
+                </span>
+              </div>
+              {containerStates[rc.name] !== "success" && (
+                <Button
+                  size="sm"
+                  onClick={() => onFixContainer(rc.name, rc.templateId)}
+                  disabled={!canFix || !!busyMap[rc.name]}
+                >
+                  {busyMap[rc.name] ? (
+                    <RefreshCw
+                      strokeWidth={1}
+                      className="h-4 w-4 animate-spin"
+                    />
+                  ) : (
+                    <CheckCircle strokeWidth={1} className="h-4 w-4" />
+                  )}
+                  Fix
+                </Button>
+              )}
+            </div>
+          ))}
+      </div>
+      {containersError && (
+        <div className="mt-2 rounded border border-yellow-200 bg-yellow-50 p-2 text-xs whitespace-pre-wrap text-yellow-800">
+          {containersError}
+        </div>
+      )}
+    </>
+  );
+}

package/src/editor/control-center/setup-steps/AiSetupStep/tools/GenerateToolsSection.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Button } from "../../../../../components/ui/button";
+import { CheckCircle, RefreshCw } from "lucide-react";
+
+interface GenerateToolsSectionProps {
+  toolsBusy: boolean;
+  toolsError: string | null;
+  onGenerateTools: () => void;
+}
+
+export function GenerateToolsSection(props: GenerateToolsSectionProps) {
+  const { toolsBusy, toolsError, onGenerateTools } = props;
+
+  return (
+    <div className="mt-4 flex items-center gap-2">
+      <Button
+        size="sm"
+        variant="outline"
+        disabled={toolsBusy}
+        onClick={onGenerateTools}
+      >
+        {toolsBusy ? (
+          <RefreshCw strokeWidth={1} className="h-4 w-4 animate-spin" />
+        ) : (
+          <CheckCircle strokeWidth={1} className="h-4 w-4" />
+        )}
+        Generate AI tool items
+      </Button>
+      {toolsError && <span className="text-xs text-red-600">{toolsError}</span>}
+    </div>
+  );
+}

package/src/editor/menubar/toolbar-sections/EditControls.tsx

@@ -56,6 +56,7 @@ export function EditControls({
           icon={<MessagesSquare strokeWidth={1} className="h-6 w-6 p-1" />}
           label="Write suggestions"
           size="large"
+          data-testid="suggestions-mode-button"
           onClick={() => editContext?.setMode("suggestions")}
         >
           {totalCount > 0 && (

package/src/editor/page-editor-chrome/InlineEditor.tsx

@@ -48,6 +48,73 @@ export function InlineEditor({
     );
   };
 
+  // Helper: set innerHTML and log with stack trace when content changes
+  function setInnerHTMLWithStackTrace(
+    element: HTMLElement,
+    nextHTML: string,
+    meta: {
+      source: string;
+      fieldId?: string | null;
+      itemId?: string | null;
+      language?: string | null;
+      version?: number | null;
+    },
+  ): boolean {
+    const prevHTML = element.innerHTML ?? "";
+    if (prevHTML === nextHTML) return false;
+
+    element.innerHTML = nextHTML;
+
+    // try {
+    //   const resolvedFieldId =
+    //     meta.fieldId ?? element.getAttribute("data-fieldid");
+    //   const resolvedItemId = meta.itemId ?? element.getAttribute("data-itemid");
+    //   const resolvedLanguage =
+    //     meta.language ?? element.getAttribute("data-language");
+    //   const resolvedVersion =
+    //     meta.version ??
+    //     (element.getAttribute("data-version")
+    //       ? parseInt(element.getAttribute("data-version") as string, 10)
+    //       : null);
+
+    //   // Log concise info and stack trace
+    //   // Limit previews to keep console tidy
+    //   const preview = (s: string) =>
+    //     s.length > 200 ? s.slice(0, 200) + "…" : s;
+    //   console.groupCollapsed(
+    //     `[InlineEditor] DOM field update (${meta.source}) ${nextHTML} `,
+    //   );
+
+    //   const modifiedFieldValue = modifiedFieldsContext?.modifiedFields.find(
+    //     (x) =>
+    //       x.fieldId === resolvedFieldId &&
+    //       x.item.id === resolvedItemId &&
+    //       x.item.language === resolvedLanguage &&
+    //       x.item.version === resolvedVersion,
+    //   )?.value;
+
+    //   console.log({
+    //     fieldId: resolvedFieldId,
+    //     itemId: resolvedItemId,
+    //     language: resolvedLanguage,
+    //     version: resolvedVersion,
+    //     prevLength: prevHTML.length,
+    //     nextLength: nextHTML.length,
+    //     prevPreview: preview(prevHTML),
+    //     nextPreview: preview(nextHTML),
+    //     modifiedFieldsContext: modifiedFieldsContext?.modifiedFields,
+    //     repository: contextRef.current?.itemsRepository,
+    //     modifiedFieldValue,
+    //   });
+    //   console.trace();
+    //   console.groupEnd();
+    // } catch {
+    //   // no-op logging failure
+    // }
+
+    return true;
+  }
+
   const debouncedSetFieldvalue = useThrottledCallback(
     (capturedValue, fieldId, fieldName, itemId, language, version) => {
       // Use the value captured at mutation time to avoid cross-field leakage
@@ -362,12 +429,24 @@ export function InlineEditor({
         }
         // Update focused field element with the merged plain text value.
 
-        element.innerHTML = mergedValue;
+        setInnerHTMLWithStackTrace(element as HTMLElement, mergedValue, {
+          source: "updateFocusedFieldContent:mergedValue",
+          fieldId,
+          itemId,
+          language,
+          version,
+        });
         contentWasUpdated = true;
       } else {
         if (element.innerHTML !== baseValue) {
           // If suggestions mode is off, update with the base value.
-          element.innerHTML = baseValue;
+          setInnerHTMLWithStackTrace(element as HTMLElement, baseValue, {
+            source: "updateFocusedFieldContent:baseValue",
+            fieldId,
+            itemId,
+            language,
+            version,
+          });
           contentWasUpdated = true;
         }
       }
@@ -540,7 +619,18 @@ export function InlineEditor({
             if (fieldType && isTextFieldType(fieldType)) {
               const next = field?.value ? (field.value as string) : "";
               if (element.innerHTML !== next) {
-                element.innerHTML = next;
+                setInnerHTMLWithStackTrace(element as HTMLElement, next, {
+                  source: "updateFieldsWithSuggestions:modifiedField",
+                  fieldId: element.getAttribute("data-fieldid"),
+                  itemId: element.getAttribute("data-itemid"),
+                  language: element.getAttribute("data-language"),
+                  version: element.getAttribute("data-version")
+                    ? parseInt(
+                        element.getAttribute("data-version") as string,
+                        10,
+                      )
+                    : null,
+                });
               }
             }
           }
@@ -645,7 +735,17 @@ export function InlineEditor({
         // If showSuggestedEdits is false, update with the base value.
         if (!context.showSuggestedEdits && context.mode !== "suggestions") {
           if (fieldElement.innerHTML !== originalValue) {
-            fieldElement.innerHTML = originalValue;
+            setInnerHTMLWithStackTrace(
+              fieldElement as HTMLElement,
+              originalValue,
+              {
+                source: "updateFieldsWithSuggestions:baselineOnly",
+                fieldId,
+                itemId,
+                language,
+                version,
+              },
+            );
           }
 
           return;
@@ -700,7 +800,17 @@ export function InlineEditor({
         // If showSuggestedEditsDiff is false, show only the merged text
         if (!context.showSuggestedEditsDiff) {
           if (fieldElement.innerHTML !== mergedValue) {
-            fieldElement.innerHTML = mergedValue;
+            setInnerHTMLWithStackTrace(
+              fieldElement as HTMLElement,
+              mergedValue,
+              {
+                source: "updateFieldsWithSuggestions:mergedNoDiff",
+                fieldId,
+                itemId,
+                language,
+                version,
+              },
+            );
           }
           return;
         }
@@ -725,7 +835,13 @@ export function InlineEditor({
 
         // Update the element's innerHTML with the diff markup.
         if (fieldElement.innerHTML !== diffHTML) {
-          fieldElement.innerHTML = diffHTML;
+          setInnerHTMLWithStackTrace(fieldElement as HTMLElement, diffHTML, {
+            source: "updateFieldsWithSuggestions:diffMarkup",
+            fieldId,
+            itemId,
+            language,
+            version,
+          });
         }
       });
     };
@@ -823,7 +939,13 @@ export function InlineEditor({
 
       // write it in
       if (el.innerHTML !== value) {
-        el.innerHTML = value;
+        setInnerHTMLWithStackTrace(el as HTMLElement, value, {
+          source: "resetAllFieldsToBaselineOrLocal",
+          fieldId,
+          itemId,
+          language,
+          version,
+        });
       }
     });
   }, [context.mode, context.showSuggestedEdits, context.suggestedEdits]);

package/src/page-wizard/steps/ContentStep.tsx

@@ -84,6 +84,7 @@ export function ContentStep({
   const [message, setMessage] = useState<string>();
   const [isCreatingComponents, setIsCreatingComponents] = useState(false);
   const [pageItem, setPageItem] = useState<ItemDescriptor>();
+  const [showDataObject, setShowDataObject] = useState(false);
 
   // New state for name and language functionality
   const [isGenerating, setIsGenerating] = useState(false);
@@ -1192,6 +1193,51 @@ export function ContentStep({
           }
         >
           <div>{customInstructionsPanel()}</div>
+          <div className="mt-2">
+            <button
+              className="flex items-center text-xs text-blue-600 hover:underline"
+              onClick={() => setShowDataObject(!showDataObject)}
+            >
+              <ChevronDown
+                strokeWidth={1}
+                className={`mr-1 h-4 w-4 transition-transform duration-200 ${showDataObject ? "rotate-180" : "rotate-0"}`}
+              />
+              {showDataObject
+                ? "Hide data available to instructions"
+                : "Show data available to instructions"}
+            </button>
+            <div className="mt-2 text-xs text-gray-600">
+              <div className="font-medium">
+                Referencing data in instructions
+              </div>
+              <div>Use curly braces to inject values from the data object:</div>
+              <div className="mt-1 grid gap-1">
+                <div>
+                  <code>{"{title}"}</code> inserts <code>data.title</code>
+                </div>
+                <div>
+                  <code>{"{data.user.name}"}</code> inserts a nested property
+                </div>
+                <div>
+                  <code>{"{items.filter(x => x.active).length}"}</code> supports
+                  JavaScript expressions
+                </div>
+                <div>
+                  <code>{"{data}"}</code> inserts the entire data object as JSON
+                </div>
+              </div>
+              <div className="mt-1">
+                Arrays/objects are inserted as JSON text.
+              </div>
+            </div>
+            {showDataObject && (
+              <div className="mt-2 rounded border border-gray-200 bg-gray-50 p-2">
+                <pre className="max-h-64 overflow-auto text-xs break-words whitespace-pre-wrap">
+                  {JSON.stringify(data, null, 2)}
+                </pre>
+              </div>
+            )}
+          </div>
         </WizardBox>
       </div>
       {pageItem && (

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4094";
-export const buildDate = "2025-09-18 16:11:16";
+export const version = "1.0.4096";
+export const buildDate = "2025-09-19 08:03:30";