@alpaca-editor/core 1.0.4172 → 1.0.4174

package/src/editor/client/EditorShell.tsx

@@ -81,6 +81,7 @@ import {
   EditSession,
   FieldDescriptor,
   HistoryEntry,
+  NavigationHistoryEntry,
   InsertOption,
   LanguageVersions,
   LinkComponentOperation,
@@ -120,6 +121,7 @@ import { Toaster } from "../../components/ui/sonner";
 
 import { Tour } from "../../tour/Tour";
 import { usePageViewContext } from "../page-viewer/pageViewContext";
+import { QuickItemSwitcher } from "../QuickItemSwitcher";
 
 import {
   getComments,
@@ -373,6 +375,36 @@ export function EditorShell({
     );
   });
 
+  // Navigation history for browser history (view + item combinations)
+  const [navigationHistory, setNavigationHistory] = useState<
+    NavigationHistoryEntry[]
+  >(() => {
+    // Initialize from browse history with current view
+    if (!userInfo.browseHistory) return [];
+
+    return userInfo.browseHistory.map(
+      (entry): NavigationHistoryEntry => ({
+        viewName:
+          searchParams.get("view") ??
+          configuration.editor.views[0]?.name ??
+          "content-editor",
+        item: {
+          id: entry.itemId,
+          language: entry.itemLanguage,
+          version: entry.itemVersion,
+        },
+        timestamp: new Date(entry.visitedAt).getTime(),
+        displayName:
+          searchParams.get("view") ??
+          configuration.editor.views[0]?.name ??
+          "content-editor",
+        itemName: entry.itemName,
+        itemPath: entry.itemPath,
+        itemIcon: entry.icon,
+      }),
+    );
+  });
+
   const [centerPanelView, setCenterPanelView] = useState<ReactNode>();
   const [timings, setTimings] = useState<Timings>({});
 
@@ -388,7 +420,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 +441,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);
 
@@ -1151,6 +1188,44 @@ export function EditorShell({
     [browseHistory, setBrowseHistory],
   );
 
+  // Add entry to navigation history (view + item combination)
+  const addNavigationEntry = useCallback((view: string, item?: FullItem) => {
+    const navEntry: NavigationHistoryEntry = {
+      viewName: view,
+      item: item
+        ? {
+            id: item.id,
+            language: item.language,
+            version: item.version,
+          }
+        : undefined,
+      timestamp: Date.now(),
+      displayName: view,
+      itemName: item?.name,
+      itemPath: item?.path,
+      itemIcon: item?.icon,
+    };
+
+    setNavigationHistory((history) => {
+      // Remove duplicates with same view + item identity (including version),
+      // and also handle entries with no item (both undefined)
+      const filtered = history.filter((entry) => {
+        const sameView = entry.viewName === view;
+        const bothNoItem = !entry.item && !item;
+        const sameItem =
+          !!entry.item &&
+          !!item &&
+          entry.item.id === item.id &&
+          entry.item.language === item.language &&
+          entry.item.version === item.version;
+        return !(sameView && (bothNoItem || sameItem));
+      });
+
+      // Add new entry at the beginning and limit to 25 items
+      return [navEntry, ...filtered].slice(0, 25);
+    });
+  }, []);
+
   const loadItem = useCallback(
     async (
       itemToLoad: ItemDescriptor | string,
@@ -1196,6 +1271,8 @@ export function EditorShell({
         options?.addToBrowseHistory === undefined
       ) {
         addToBrowseHistory(item);
+        // Also add to navigation history with current view
+        addNavigationEntry(viewName, item);
       }
 
       return item;
@@ -1206,6 +1283,7 @@ export function EditorShell({
       viewName,
       loadHistory,
       addToBrowseHistory,
+      addNavigationEntry,
     ],
   );
 
@@ -1416,6 +1494,9 @@ export function EditorShell({
       // Track previous view name before switching
       setPreviousViewName(editContext.viewName);
 
+      // Add to navigation history with current item
+      addNavigationEntry(viewName, contentEditorItem);
+
       if (typeof document.startViewTransition === "function") {
         document.startViewTransition(() => {
           flushSync(() => {
@@ -1511,6 +1592,155 @@ export function EditorShell({
     [operations, ignoreBlur, sessionId],
   );
 
+  // Quick switcher handlers
+  const showQuickSwitcher = useCallback(
+    (show: boolean) => {
+      console.log(
+        `[QuickSwitcher] showQuickSwitcher called: show=${show}, historyLength=${navigationHistory.length}`,
+      );
+      if (show && navigationHistory.length > 1) {
+        setQuickSwitcherVisible(true);
+        // Start with index 1 (second entry - previous entry) for quick switching
+        setQuickSwitcherSelectedIndex(1);
+        console.log("[QuickSwitcher] Switcher opened, selected index: 1");
+        console.log(
+          "[QuickSwitcher] Navigation history:",
+          navigationHistory.map((h, i) => `[${i}] ${h.displayName}`),
+        );
+      } else {
+        setQuickSwitcherVisible(false);
+        console.log("[QuickSwitcher] Switcher closed");
+      }
+    },
+    [navigationHistory],
+  );
+
+  const cycleQuickSwitcher = useCallback(
+    (direction: "next" | "prev" | "up" | "down") => {
+      console.log(
+        `[QuickSwitcher] cycleQuickSwitcher: direction=${direction}, visible=${quickSwitcherVisible}`,
+      );
+      if (!quickSwitcherVisible) return;
+      const maxItems = Math.min(5, navigationHistory.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 entry at index ${index}`);
+      const selectedEntry = navigationHistory[index];
+      if (selectedEntry) {
+        console.log(`[QuickSwitcher] Navigating to:`, selectedEntry);
+
+        // First switch view
+        if (selectedEntry.viewName !== viewName) {
+          switchView(selectedEntry.viewName, { skipConfirmation: true });
+        }
+
+        // Then load item if it exists and is different from current
+        if (selectedEntry.item) {
+          const isDifferentItem =
+            !contentEditorItem ||
+            contentEditorItem.id !== selectedEntry.item.id ||
+            contentEditorItem.language !== selectedEntry.item.language ||
+            contentEditorItem.version !== selectedEntry.item.version;
+
+          if (isDifferentItem) {
+            console.log(
+              `[QuickSwitcher] Loading different item:`,
+              selectedEntry.item,
+            );
+            loadItem(
+              {
+                id: selectedEntry.item.id,
+                language: selectedEntry.item.language,
+                version: selectedEntry.item.version,
+              },
+              { addToBrowseHistory: false, skipViewChange: true },
+            );
+          } else {
+            console.log(`[QuickSwitcher] Same item, skipping reload`);
+          }
+        }
+
+        // Move selected entry to first position in navigation history by identity
+        setNavigationHistory((history) => {
+          const filtered = history.filter((entry) => {
+            const sameView = entry.viewName === selectedEntry.viewName;
+            const bothNoItem = !entry.item && !selectedEntry.item;
+            const sameItem =
+              !!entry.item &&
+              !!selectedEntry.item &&
+              entry.item.id === selectedEntry.item.id &&
+              entry.item.language === selectedEntry.item.language &&
+              entry.item.version === selectedEntry.item.version;
+            return !(sameView && (bothNoItem || sameItem));
+          });
+          return [selectedEntry, ...filtered].slice(0, 25);
+        });
+      }
+      setQuickSwitcherVisible(false);
+    },
+    [
+      navigationHistory,
+      loadItem,
+      switchView,
+      viewName,
+      contentEditorItem,
+      setNavigationHistory,
+    ],
+  );
+
   const { handleKeyDown } = useKeyboardNavigation({
     editContextRef,
     operations,
@@ -1522,10 +1752,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 => {
@@ -1614,8 +1891,8 @@ export function EditorShell({
     };
 
     const handleCtrlClick = async (event: globalThis.MouseEvent) => {
-      // Only proceed if Ctrl+Shift (or Cmd+Shift on Mac) is pressed
-      if ((!event.ctrlKey && !event.metaKey) || !event.shiftKey) return;
+      // Only proceed if Ctrl (or Cmd on Mac) is pressed
+      if (!event.ctrlKey && !event.metaKey) return;
 
       const target = event.target as Element;
       const text = getTextFromElement(target);
@@ -2287,6 +2564,7 @@ export function EditorShell({
       setCurrentWizardId,
       favorites,
       loadFavorites,
+      isQuickSwitcherVisible: quickSwitcherVisible,
       // Context factory registry methods
       registerContextFactory: (
         name: string,
@@ -2736,6 +3014,13 @@ export function EditorShell({
             {dialog}
             <Toaster position="top-center" />{" "}
             <ConfirmationDialog ref={confirmationDialogRef} />
+            <QuickItemSwitcher
+              visible={quickSwitcherVisible}
+              entries={navigationHistory.slice(0, 5)}
+              selectedIndex={quickSwitcherSelectedIndex}
+              onSelect={handleQuickSwitcherSelect}
+              onClose={() => setQuickSwitcherVisible(false)}
+            />
             <EditContextMenu ref={contextMenuRef} />
             {media.mediaSelectorVisible && (
               <MediaSelector

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

@@ -334,21 +334,6 @@ 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

@@ -48,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) => {

package/src/editor/control-center/parhelia-setup/Overview.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from "react";
+import {
+  applySetup,
+  getSetupStatus,
+  SetupCategoryDto,
+} from "../../services/setupService";
+import { RefreshCw } from "lucide-react";
+
+export function ParheliaSetupOverview() {
+  const [categories, setCategories] = useState<SetupCategoryDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [applying, setApplying] = useState(false);
+  const [includeDeps, setIncludeDeps] = useState(true);
+
+  const load = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const status = await getSetupStatus(false);
+      setCategories(status.categories || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load setup status");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  return (
+    <div className="h-full overflow-auto p-4">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-lg font-semibold text-gray-800">
+          Parhelia Setup
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="mr-2 flex items-center gap-2 text-sm text-gray-700">
+            <input
+              type="checkbox"
+              checked={includeDeps}
+              onChange={(e) => setIncludeDeps(e.target.checked)}
+            />
+            Include dependencies
+          </label>
+          <button
+            onClick={load}
+            disabled={loading || applying}
+            className="flex items-center gap-2 rounded bg-gray-100 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <RefreshCw className="h-4 w-4" strokeWidth={1} />
+            {loading ? "Refreshing..." : "Refresh"}
+          </button>
+          <button
+            onClick={async () => {
+              try {
+                setApplying(true);
+                setError(null);
+                const keys = categories
+                  .flatMap((c) => c.items)
+                  .filter((i) => i.status === "Missing")
+                  .map((i) => i.key);
+                if (keys.length === 0) return;
+                await applySetup(keys, includeDeps);
+                await load();
+              } catch (e) {
+                setError(
+                  e instanceof Error ? e.message : "Failed to apply setup",
+                );
+              } finally {
+                setApplying(false);
+              }
+            }}
+            disabled={loading || applying}
+            className="flex items-center gap-2 rounded bg-indigo-600 px-3 py-1.5 text-sm text-white hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {applying ? "Applying..." : "Create Missing"}
+          </button>
+          <button
+            onClick={async () => {
+              try {
+                setApplying(true);
+                setError(null);
+                const keys = categories
+                  .flatMap((c) => c.items)
+                  .filter((i) => i.status === "Outdated")
+                  .map((i) => i.key);
+                if (keys.length === 0) return;
+                await applySetup(keys, includeDeps);
+                await load();
+              } catch (e) {
+                setError(
+                  e instanceof Error ? e.message : "Failed to apply setup",
+                );
+              } finally {
+                setApplying(false);
+              }
+            }}
+            disabled={loading || applying}
+            className="flex items-center gap-2 rounded bg-amber-600 px-3 py-1.5 text-sm text-white hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {applying ? "Applying..." : "Update Outdated"}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-3 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {categories.map((cat) => (
+          <div key={cat.name}>
+            <div className="mb-2 text-sm font-semibold text-gray-700">
+              {cat.name}
+            </div>
+            <div className="divide-y rounded border">
+              {cat.items.map((it) => (
+                <div
+                  key={it.key}
+                  className="flex items-center justify-between px-3 py-2 text-sm"
+                >
+                  <div className="min-w-0">
+                    <div className="truncate font-medium">{it.key}</div>
+                    <div className="truncate text-xs text-gray-500">
+                      {it.targetPath}
+                    </div>
+                  </div>
+                  <div className="ml-3 shrink-0">
+                    <span
+                      className={`rounded px-2 py-0.5 text-xs font-medium ${
+                        it.status === "Missing"
+                          ? "bg-yellow-100 text-yellow-700"
+                          : it.status === "UpToDate"
+                            ? "bg-green-100 text-green-700"
+                            : it.status === "Outdated"
+                              ? "bg-amber-100 text-amber-700"
+                              : it.status === "Modified"
+                                ? "bg-blue-100 text-blue-700"
+                                : "bg-gray-100 text-gray-700"
+                      }`}
+                    >
+                      {it.status}
+                    </span>
+                  </div>
+                  <div className="ml-3 shrink-0">
+                    {it.status === "Missing" || it.status === "Outdated" ? (
+                      <button
+                        onClick={async () => {
+                          try {
+                            setApplying(true);
+                            setError(null);
+                            await applySetup([it.key], includeDeps);
+                            await load();
+                          } catch (e) {
+                            setError(
+                              e instanceof Error
+                                ? e.message
+                                : "Failed to apply setup",
+                            );
+                          } finally {
+                            setApplying(false);
+                          }
+                        }}
+                        disabled={loading || applying}
+                        className="rounded bg-gray-800 px-2 py-1 text-xs text-white hover:bg-black disabled:cursor-not-allowed disabled:opacity-50"
+                      >
+                        {it.status === "Missing" ? "Install" : "Update"}
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -1,9 +1,8 @@
 "use client";
 
 import { useMemo } from "react";
-import { Download, ExternalLink, FileIcon, ImageOff } from "lucide-react";
+import { FileIcon, ImageOff } from "lucide-react";
 
-import { Button } from "../../components/ui/button";
 import { cn } from "../../lib/utils";
 import { AttachmentField } from "../fieldTypes";
 
@@ -86,38 +85,18 @@ export function AttachmentEditor({ field, readOnly }: AttachmentEditorProps) {
 
   if (isImage) {
     return (
-      <div className="flex flex-col items-start gap-2">
-        <div
-          className={cn(
-            "focus-shadow flex max-h-72 w-full max-w-xs items-center justify-center overflow-hidden rounded border border-gray-300 bg-gray-50",
-            readOnly && "opacity-80",
-          )}
-        >
-          <img
-            src={src}
-            alt={fileName ?? "Attachment"}
-            className="max-h-72 w-full object-contain"
-            loading="lazy"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <Button asChild size="xs" variant="secondary">
-            <a href={src} target="_blank" rel="noopener noreferrer">
-              <ExternalLink className="h-3.5 w-3.5" strokeWidth={1} /> Open
-            </a>
-          </Button>
-          <Button asChild size="xs" variant="secondary">
-            <a
-              href={src}
-              download={fileName ?? true}
-              {...(field?.value?.mimeType
-                ? { type: field.value.mimeType }
-                : {})}
-            >
-              <Download className="h-3.5 w-3.5" strokeWidth={1} /> Download
-            </a>
-          </Button>
-        </div>
+      <div
+        className={cn(
+          "focus-shadow flex max-h-72 w-full max-w-xs items-center justify-center overflow-hidden rounded border border-gray-300 bg-gray-50",
+          readOnly && "opacity-80",
+        )}
+      >
+        <img
+          src={src}
+          alt={fileName ?? "Attachment"}
+          className="max-h-72 w-full object-contain"
+          loading="lazy"
+        />
       </div>
     );
   }
@@ -133,22 +112,6 @@ export function AttachmentEditor({ field, readOnly }: AttachmentEditorProps) {
           </span>
         )}
       </div>
-      <div className="flex items-center gap-2">
-        <Button asChild size="xs" variant="secondary">
-          <a href={src} target="_blank" rel="noopener noreferrer">
-            <ExternalLink className="h-3.5 w-3.5" strokeWidth={1} /> Open
-          </a>
-        </Button>
-        <Button asChild size="xs" variant="secondary">
-          <a
-            href={src}
-            download={fileName ?? true}
-            {...(field?.value?.mimeType ? { type: field.value.mimeType } : {})}
-          >
-            <Download className="h-3.5 w-3.5" strokeWidth={1} /> Download
-          </a>
-        </Button>
-      </div>
     </div>
   );
 }