@alpaca-editor/core 1.0.4170 → 1.0.4173

package/src/editor/client/EditorShell.tsx

@@ -120,6 +120,7 @@ import { Toaster } from "../../components/ui/sonner";
 
 import { Tour } from "../../tour/Tour";
 import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { QuickItemSwitcher } from "../QuickItemSwitcher";
 
 import {
   getComments,
@@ -388,7 +389,7 @@ export function EditorShell({
 
   const [enableCompletions, setEnableCompletions] = useState(false);
   const [showComponentNavigator, setShowComponentNavigator] = useState(
-    userPreferences.showComponentNavigator ?? true,
+    userPreferences.showComponentNavigator ?? false,
   );
   const [showAgentsPanel, setShowAgentsPanel] = useState(
     userPreferences.showAgentsPanel ?? false,
@@ -409,6 +410,11 @@ export function EditorShell({
 
   const [favorites, setFavorites] = useState<any[]>([]);
 
+  // Quick item switcher state
+  const [quickSwitcherVisible, setQuickSwitcherVisible] = useState(false);
+  const [quickSwitcherSelectedIndex, setQuickSwitcherSelectedIndex] =
+    useState(0);
+
   // Track initial load to know when to sync state from URL vs URL from state
   const [isInitialLoad, setIsInitialLoad] = useState(true);
 
@@ -1511,6 +1517,109 @@ export function EditorShell({
     [operations, ignoreBlur, sessionId],
   );
 
+  // Quick switcher handlers
+  const showQuickSwitcher = useCallback(
+    (show: boolean) => {
+      console.log(
+        `[QuickSwitcher] showQuickSwitcher called: show=${show}, historyLength=${browseHistory.length}`,
+      );
+      if (show && browseHistory.length > 1) {
+        setQuickSwitcherVisible(true);
+        // Start with index 1 (second item - previous item) for quick switching
+        setQuickSwitcherSelectedIndex(1);
+        console.log("[QuickSwitcher] Switcher opened, selected index: 1");
+        console.log(
+          "[QuickSwitcher] Browse history:",
+          browseHistory.map((h, i) => `[${i}] ${h.name}`),
+        );
+      } else {
+        setQuickSwitcherVisible(false);
+        console.log("[QuickSwitcher] Switcher closed");
+      }
+    },
+    [browseHistory],
+  );
+
+  const cycleQuickSwitcher = useCallback(
+    (direction: "next" | "prev" | "up" | "down") => {
+      console.log(
+        `[QuickSwitcher] cycleQuickSwitcher: direction=${direction}, visible=${quickSwitcherVisible}`,
+      );
+      if (!quickSwitcherVisible) return;
+      const maxItems = Math.min(5, browseHistory.length);
+
+      setQuickSwitcherSelectedIndex((current) => {
+        let newIndex = current;
+
+        // Determine grid layout (responsive columns)
+        // Matches the grid in QuickItemSwitcher: 2/3/4/5 columns
+        const getColumnsForWidth = () => {
+          const width = window.innerWidth;
+          if (width >= 1280) return 5; // xl
+          if (width >= 1024) return 4; // lg
+          if (width >= 768) return 3; // md
+          return 2; // default
+        };
+
+        const columns = getColumnsForWidth();
+
+        switch (direction) {
+          case "next":
+            newIndex = (current + 1) % maxItems;
+            break;
+          case "prev":
+            newIndex = (current - 1 + maxItems) % maxItems;
+            break;
+          case "down":
+            newIndex = current + columns;
+            if (newIndex >= maxItems) {
+              // Wrap to first row
+              newIndex = current % columns;
+            }
+            break;
+          case "up":
+            newIndex = current - columns;
+            if (newIndex < 0) {
+              // Wrap to last row
+              const currentCol = current % columns;
+              const rows = Math.ceil(maxItems / columns);
+              newIndex = (rows - 1) * columns + currentCol;
+              if (newIndex >= maxItems) {
+                newIndex = maxItems - columns + currentCol;
+              }
+            }
+            break;
+        }
+
+        console.log(
+          `[QuickSwitcher] Cycling from index ${current} to ${newIndex} (${columns} columns)`,
+        );
+        return newIndex;
+      });
+    },
+    [quickSwitcherVisible, browseHistory],
+  );
+
+  const handleQuickSwitcherSelect = useCallback(
+    (index: number) => {
+      console.log(`[QuickSwitcher] Selecting item at index ${index}`);
+      const selectedItem = browseHistory[index];
+      if (selectedItem) {
+        console.log(`[QuickSwitcher] Loading item:`, selectedItem);
+        loadItem(
+          {
+            id: selectedItem.id,
+            language: selectedItem.language,
+            version: selectedItem.version || 0,
+          },
+          { addToBrowseHistory: false },
+        );
+      }
+      setQuickSwitcherVisible(false);
+    },
+    [browseHistory, loadItem],
+  );
+
   const { handleKeyDown } = useKeyboardNavigation({
     editContextRef,
     operations,
@@ -1522,10 +1631,57 @@ export function EditorShell({
     showInfoToast,
     showErrorToast,
     executeCommand,
+    showQuickSwitcher,
+    cycleQuickSwitcher,
   });
 
   useGlobalEditorKeyDown(handleKeyDown);
 
+  // Global keydown/keyup handler to manage quick switcher
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!quickSwitcherVisible) return;
+
+      // Enter to select and close
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleQuickSwitcherSelect(quickSwitcherSelectedIndex);
+      }
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      // Close on Escape without selecting
+      if (event.key === "Escape" && quickSwitcherVisible) {
+        setQuickSwitcherVisible(false);
+      }
+      // Close and select when releasing Ctrl, Alt, or Meta (Win key)
+      if (
+        (event.key === "Control" ||
+          event.key === "Alt" ||
+          event.key === "Meta") &&
+        quickSwitcherVisible
+      ) {
+        // Small delay to ensure the key release is not part of the initial trigger
+        setTimeout(() => {
+          handleQuickSwitcherSelect(quickSwitcherSelectedIndex);
+        }, 50);
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("keyup", handleKeyUp);
+      };
+    }
+  }, [
+    quickSwitcherVisible,
+    quickSwitcherSelectedIndex,
+    handleQuickSwitcherSelect,
+  ]);
+
   // Global ctrl+click handler for GUID detection and navigation
   useEffect(() => {
     const isGuid = (text: string): boolean => {
@@ -1998,34 +2154,72 @@ export function EditorShell({
 
           console.log("Field action after setActiveFieldActions");
 
-          await executeFieldServerAction(
-            fieldDescriptor.item,
-            fieldDescriptor.fieldId,
-            contentEditorItem!.descriptor,
-            actionButton.action,
-            editContext!.sessionId,
-            selectedRange?.text || "",
-            parameters || {},
-            (data: any) => {
-              console.log("Field action progress", data);
-              // Update progress message if available
-              if (data?.responseText) {
-                op.message = data.responseText;
-                setActiveFieldActions((prevFieldActions) => [
-                  ...prevFieldActions,
-                ]);
-              }
-            },
-          );
-
-          console.log("Field action completed", op);
+          try {
+            await executeFieldServerAction(
+              fieldDescriptor.item,
+              fieldDescriptor.fieldId,
+              contentEditorItem!.descriptor,
+              actionButton.action,
+              editContext!.sessionId,
+              selectedRange?.text || "",
+              parameters || {},
+              (data: any) => {
+                console.log("Field action progress", data);
+                // Update progress message if available
+                if (data?.responseText) {
+                  op.message = data.responseText;
+                  setActiveFieldActions((prevFieldActions) => [
+                    ...prevFieldActions,
+                  ]);
+                }
+              },
+            );
 
-          itemsRepository.refreshItems([fieldDescriptor.item]);
+            console.log("Field action completed", op);
+
+            itemsRepository.refreshItems([fieldDescriptor.item]);
+
+            // Only mark as success if no websocket error has been reported
+            if (op.state === "running") {
+              op.state = "success";
+              // Auto-dismiss successful actions after a brief delay
+              setTimeout(() => {
+                setActiveFieldActions((prevFieldActions) =>
+                  prevFieldActions.filter(
+                    (x) =>
+                      !(
+                        x.field.fieldId === fieldDescriptor.fieldId &&
+                        x.field.item.id === fieldDescriptor.item.id &&
+                        x.field.item.language ===
+                          fieldDescriptor.item.language &&
+                        x.field.item.version === fieldDescriptor.item.version &&
+                        x.state === "success"
+                      ),
+                  ),
+                );
+              }, 500);
+            }
+            requestRefresh("immediate");
+          } catch (error) {
+            console.error("Field action failed", error);
+
+            // Mark as failed and show error message
+            op.state = "error";
+            op.message =
+              error instanceof Error ? error.message : "Field action failed";
+
+            // Update the field action state to show error
+            setActiveFieldActions((prevFieldActions) => {
+              const isSameField = (x: FieldAction) =>
+                x.field.fieldId == fieldDescriptor.fieldId &&
+                x.field.item.id == fieldItem.id &&
+                x.field.item.language == fieldItem.language &&
+                x.field.item.version == fieldItem.version;
+
+              return [...prevFieldActions.filter((x) => !isSameField(x)), op];
+            });
 
-          // Only mark as success if no websocket error has been reported
-          if (op.state === "running") {
-            op.state = "success";
-            // Auto-dismiss successful actions after a brief delay
+            // Auto-dismiss error after a longer delay
             setTimeout(() => {
               setActiveFieldActions((prevFieldActions) =>
                 prevFieldActions.filter(
@@ -2034,14 +2228,12 @@ export function EditorShell({
                       x.field.fieldId === fieldDescriptor.fieldId &&
                       x.field.item.id === fieldDescriptor.item.id &&
                       x.field.item.language === fieldDescriptor.item.language &&
-                      x.field.item.version === fieldDescriptor.item.version &&
-                      x.state === "success"
+                      x.field.item.version === fieldDescriptor.item.version
                     ),
                 ),
               );
-            }, 500);
+            }, 3000);
           }
-          requestRefresh("immediate");
         }
       },
       dismissFieldAction: (fieldDescriptor: FieldDescriptor) => {
@@ -2251,6 +2443,7 @@ export function EditorShell({
       setCurrentWizardId,
       favorites,
       loadFavorites,
+      isQuickSwitcherVisible: quickSwitcherVisible,
       // Context factory registry methods
       registerContextFactory: (
         name: string,
@@ -2700,6 +2893,13 @@ export function EditorShell({
             {dialog}
             <Toaster position="top-center" />{" "}
             <ConfirmationDialog ref={confirmationDialogRef} />
+            <QuickItemSwitcher
+              visible={quickSwitcherVisible}
+              items={browseHistory.slice(0, 5)}
+              selectedIndex={quickSwitcherSelectedIndex}
+              onSelect={handleQuickSwitcherSelect}
+              onClose={() => setQuickSwitcherVisible(false)}
+            />
             <EditContextMenu ref={contextMenuRef} />
             {media.mediaSelectorVisible && (
               <MediaSelector

package/src/editor/client/hooks/useSocketMessageHandler.ts

@@ -133,21 +133,21 @@ export function useSocketMessageHandler(deps: {
               version: 0,
             });
           }
-      } else {
-        await itemsRepository.refreshItems(
-          [message.payload.item],
-          message.payload.changes,
-        );
-        const changes = message?.payload?.changes;
-        const isVersionChange = changes?.versions === true;
-        if (
-          isVersionChange &&
-          message.payload.item.id === currentItemDescriptor?.id
-        ) {
-          await loadItemVersions();
+        } else {
+          await itemsRepository.refreshItems(
+            [message.payload.item],
+            message.payload.changes,
+          );
+          const changes = message?.payload?.changes;
+          const isVersionChange = changes?.versions === true;
+          if (
+            isVersionChange &&
+            message.payload.item.id === currentItemDescriptor?.id
+          ) {
+            await loadItemVersions();
+          }
         }
       }
-      }
 
       if (message.type === "item-version-added") {
         if (currentItemRef.current) {
@@ -334,6 +334,21 @@ export function useSocketMessageHandler(deps: {
         }
       }
 
+      // Agent WebSocket messages - forward to agent terminal via listeners
+      if (
+        message.type === "agent:name:updated" ||
+        message.type === "agent:status:changed" ||
+        message.type === "agent:run:start" ||
+        message.type === "agent:user:message" ||
+        message.type === "agent:run:delta" ||
+        message.type === "agent:run:status" ||
+        message.type === "agent:run:complete" ||
+        message.type === "agent:run:error"
+      ) {
+        // These messages are handled by AgentTerminal via socketMessageListeners
+        // Just pass through to listeners
+      }
+
       socketMessageListeners.current.forEach((listener) => listener(message));
     },
     [currentItemDescriptor, sessionId],

package/src/editor/client/ui/EditorChrome.tsx

@@ -65,7 +65,7 @@ export function EditorChrome(props: {
                   title: "Agents",
                   content: <Agents />,
                   initialSize: 70,
-                  noOverflow: true,
+                  noOverflow: false,
                 },
               ],
             }}

package/src/editor/commands/itemCommands.tsx

@@ -14,6 +14,10 @@ import {
   CopyMoveTargetSelectorDialog,
   CopyMoveTargetSelectorDialogProps,
 } from "../ui/CopyMoveTargetSelectorDialog";
+import {
+  TemplateSelectorDialog,
+  TemplateSelectorDialogProps,
+} from "../ui/TemplateSelectorDialog";
 import { defaultTranslateAll } from "./localizeItem/LocalizeItemUtils";
 import { TranslationStatus } from "../../config/types";
 import {
@@ -28,7 +32,9 @@ import {
   Upload,
   Globe,
   CopyPlus,
+  RefreshCw,
 } from "lucide-react";
+import { executeChangeTemplate } from "../services/editService";
 
 export type ItemCommandData = CommandData & {
   items: FullItem[];
@@ -42,6 +48,7 @@ export const deleteItemCommand: ItemCommand = {
   id: "deleteItem",
   label: "Delete",
   icon: <Trash2 strokeWidth={1} />,
+  keyBinding: "Delete",
   disabled: (context: ItemCommandContext) =>
     !context.data?.items || !context.data?.items[0]?.canDelete || false,
   execute: async (context: ItemCommandContext) => {
@@ -358,6 +365,76 @@ export const localizeItemCommand: LocalizeItemCommand = {
   },
 };
 
+export const changeTemplateCommand: ItemCommand = {
+  id: "changeTemplate",
+  label: "Change Template",
+  icon: <RefreshCw strokeWidth={1} />,
+  disabled: (context: ItemCommandContext) =>
+    !context.data?.items ||
+    context.data.items.length !== 1 ||
+    !context.data.items[0]?.canWriteItem ||
+    false,
+  execute: async (context: ItemCommandContext) => {
+    const item = context.data?.items[0];
+    if (!item) return;
+
+    // Open template selector dialog
+    const selectedTemplate = await context.openDialog<
+      ItemDescriptor,
+      TemplateSelectorDialogProps
+    >(TemplateSelectorDialog, {
+      currentItem: item,
+      editContext: context.editContext,
+    });
+
+    if (!selectedTemplate) return;
+
+    // Show confirmation dialog with warning
+    const confirmed = await new Promise<boolean>((resolve) => {
+      context.editContext.confirm({
+        message: (
+          <div>
+            Are you sure you want to change the template of <em>{item.name}</em>
+            ?
+            <div className="mt-4 text-sm">
+              <strong>Warning:</strong> Changing the template may result in data
+              loss for fields that are not present in the new template.
+            </div>
+          </div>
+        ),
+        header: "Change Template",
+        icon: <TriangleAlert strokeWidth={1} />,
+        accept: () => resolve(true),
+        reject: () => resolve(false),
+        showCancel: true,
+      });
+    });
+
+    if (!confirmed) return;
+
+    try {
+      // Execute the change template operation
+      const result = await executeChangeTemplate(
+        item.descriptor,
+        selectedTemplate.id,
+        context.editContext.sessionId,
+      );
+
+      if (result.type === "success") {
+        toast.success("Template changed successfully");
+        // Refresh the item to show updated template
+        context.editContext.loadItem(item.descriptor);
+      } else {
+        toast.error(result.details || "Failed to change template");
+      }
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to change template",
+      );
+    }
+  },
+};
+
 export const publishItemCommand: ItemCommand = {
   id: "publishItem",
   label: "Publish",

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

@@ -54,7 +54,10 @@ export function WebSocketMessages() {
       "suggested-edit-updated": "bg-indigo-100 text-indigo-800",
       "suggested-edit-deleted": "bg-red-100 text-red-800",
       "update-quota": "bg-gray-100 text-gray-800",
-      "agent-status-changed": "bg-violet-100 text-violet-800",
+      "agent:status:changed": "bg-violet-100 text-violet-800",
+      "agent:run:closed": "bg-red-100 text-red-800",
+      "agent:run:start": "bg-green-100 text-green-800",
+      "agent:name:updated": "bg-blue-100 text-blue-800",
     };
     return colors[type] || "bg-gray-100 text-gray-800";
   };