@alpaca-editor/core 1.0.4063 → 1.0.4064

package/src/editor/ai/Agents.tsx

@@ -3,6 +3,7 @@ import React, { useState, useRef, useEffect } from "react";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Plus, X, History, MoreVertical, Trash } from "lucide-react";
 import { cn } from "../../lib/utils";
+import { MenuItem } from "../../config/types";
 
 import {
   Popover,
@@ -139,6 +140,10 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
                 userId: "", // Will be populated from backend if needed
                 updatedDate: new Date().toISOString(),
               };
+
+              // Automatically select the new agent
+              setActiveAgentIdWithStorage(agentId);
+
               return [...prevAgents, newAgent];
             }
           });
@@ -173,7 +178,6 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
           selectedAgentId = storedAgent.id;
         } else {
           // Fall back to the most recently updated agent
-          console.log("get most recent agent", activeAgentsResult);
           const mostRecentAgent = getMostRecentAgent(activeAgentsResult);
           selectedAgentId = mostRecentAgent?.id || null;
         }
@@ -268,6 +272,19 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
     setMenuPopoverOpen(false);
   };
 
+  const getTabsMenuItems = (): MenuItem[] => {
+    return [
+      {
+        id: "close-other",
+        label: "Close Other",
+        command: async () => {
+          await closeOtherAgents();
+        },
+        disabled: agents.length <= 1,
+      },
+    ];
+  };
+
   const openAgentFromHistory = async (agent: Agent) => {
     // Check if this agent is already open as a terminal
     const existingAgent = agents.find((a) => a.id === agent.id);
@@ -331,6 +348,35 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
                   : "hover:bg-gray-100",
               )}
               onClick={() => setActiveAgentIdWithStorage(agent.id)}
+              onContextMenu={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // Capture coordinates before state update to avoid pooled/react event issues
+                const contextEvent = {
+                  clientX: e.clientX,
+                  clientY: e.clientY,
+                  pageX: e.pageX,
+                  pageY: e.pageY,
+                  screenX: (e as any).screenX,
+                  screenY: (e as any).screenY,
+                  button: 2,
+                  buttons: 2,
+                  ctrlKey: e.ctrlKey,
+                  shiftKey: e.shiftKey,
+                  altKey: e.altKey,
+                  preventDefault: () => {},
+                } as any;
+
+                // Show the menu first at the correct position
+                setTimeout(() => {
+                  editContext?.showContextMenu(
+                    contextEvent,
+                    getTabsMenuItems(),
+                  );
+                  // Then update the active tab on the next tick to avoid interfering with positioning
+                }, 200);
+                setActiveAgentIdWithStorage(agent.id);
+              }}
             >
               <span className="truncate">{agent.name}</span>
               {agents.length > 1 && (
@@ -415,13 +461,23 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
             </PopoverTrigger>
             <PopoverContent className="w-48 p-0" align="end">
               <div className="py-1">
-                <button
-                  onClick={closeOtherAgents}
-                  disabled={agents.length <= 1}
-                  className="w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400"
-                >
-                  Close Other
-                </button>
+                {getTabsMenuItems().map((item) =>
+                  item.separator ? (
+                    <div key={item.id} className="my-1 h-px bg-gray-100" />
+                  ) : (
+                    <button
+                      key={item.id}
+                      onClick={async (e) => {
+                        if (item.command) await item.command(e);
+                        setMenuPopoverOpen(false);
+                      }}
+                      disabled={!!item.disabled}
+                      className="w-full px-3 py-2 text-left text-xs hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-400"
+                    >
+                      {item.label}
+                    </button>
+                  ),
+                )}
               </div>
             </PopoverContent>
           </Popover>

package/src/editor/client/EditorClient.tsx

@@ -129,6 +129,7 @@ import { usePageWizard } from "../../page-wizard/usePageWizard";
 import { requestQuota } from "../services/aiService";
 
 import { Shrink, Monitor, Smartphone } from "lucide-react";
+import { Agents } from "../ai/Agents";
 
 export type FieldAction = {
   field: FieldDescriptor;
@@ -363,8 +364,11 @@ export function EditorClient({
   const [focusFieldComponentId, setFocusFieldComponentId] = useState<string>();
 
   const [enableCompletions, setEnableCompletions] = useState(false);
-  const [showRightSidebar, setShowRightSidebar] = useState(
-    userPreferences.showRightSidebar ?? true,
+  const [showComponentNavigator, setShowComponentNavigator] = useState(
+    userPreferences.showComponentNavigator ?? true,
+  );
+  const [showAgentsPanel, setShowAgentsPanel] = useState(
+    userPreferences.showAgentsPanel ?? false,
   );
   const [activeEditorTab, setActiveEditorTab] = useState<string | null>(null);
   const [hideNonEditableComponents, setHideNonEditableComponents] = useState(
@@ -490,14 +494,24 @@ export function EditorClient({
     setIsTourActive(true);
   }, [setIsTourActive]);
 
-  const handleSetShowRightSidebar = useCallback(
+  const handleSetShowComponentNavigator = useCallback(
+    (value: boolean | ((prev: boolean) => boolean)) => {
+      const newValue =
+        typeof value === "function" ? value(showComponentNavigator) : value;
+      setShowComponentNavigator(newValue);
+      setUserPreferences({ showComponentNavigator: newValue });
+    },
+    [showComponentNavigator, setShowComponentNavigator, setUserPreferences],
+  );
+
+  const handleSetShowAgentsPanel = useCallback(
     (value: boolean | ((prev: boolean) => boolean)) => {
       const newValue =
-        typeof value === "function" ? value(showRightSidebar) : value;
-      setShowRightSidebar(newValue);
-      setUserPreferences({ showRightSidebar: newValue });
+        typeof value === "function" ? value(showAgentsPanel) : value;
+      setShowAgentsPanel(newValue);
+      setUserPreferences({ showAgentsPanel: newValue });
     },
-    [showRightSidebar, setShowRightSidebar, setUserPreferences],
+    [showAgentsPanel, setShowAgentsPanel, setUserPreferences],
   );
 
   const handleSetHideNonEditableComponents = useCallback(
@@ -1001,6 +1015,10 @@ export function EditorClient({
   const isMobile = useMediaQuery("(max-width: 768px)");
 
   useEffect(() => {
+    // Suppress auto-start tour when `noTour` query parameter is present
+    if (searchParams.get("noTour") !== null) {
+      return;
+    }
     const tour = configuration.activeTour;
     const key =
       tour === "default" ? "editor.tourShown" : "editor.tourShown." + tour;
@@ -1281,7 +1299,10 @@ export function EditorClient({
 
   useEffect(() => {
     // Handle fullscreen on initial load only
-    if (isInitialLoad && (searchParams.get("fullscreen") || configuration.forceFullscreen)) {
+    if (
+      isInitialLoad &&
+      (searchParams.get("fullscreen") || configuration.forceFullscreen)
+    ) {
       pageViewContext.setFullscreen(true);
     }
     const handleMessage = (event: MessageEvent) => {
@@ -1295,7 +1316,13 @@ export function EditorClient({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, [isInitialLoad, searchParams, pathname, pageViewContext, configuration.forceFullscreen]);
+  }, [
+    isInitialLoad,
+    searchParams,
+    pathname,
+    pageViewContext,
+    configuration.forceFullscreen,
+  ]);
 
   const loadHistory = useDebouncedCallback(async (item: ItemDescriptor) => {
     const result = await getEditHistory(item);
@@ -1552,8 +1579,11 @@ export function EditorClient({
   );
 
   useEffect(() => {
-    if (pageViewContext.fullscreen && !searchParams.get("fullscreen") && 
-        !configuration.forceFullscreen)
+    if (
+      pageViewContext.fullscreen &&
+      !searchParams.get("fullscreen") &&
+      !configuration.forceFullscreen
+    )
       setShowFullscreenHint(true);
   }, [pageViewContext.fullscreen, configuration.forceFullscreen]);
 
@@ -2419,8 +2449,10 @@ export function EditorClient({
       setShowSuggestedEditsDiff,
       enableCompletions,
       setEnableCompletions,
-      showRightSidebar,
-      setShowRightSidebar: handleSetShowRightSidebar,
+      showComponentNavigator,
+      setShowComponentNavigator: handleSetShowComponentNavigator,
+      showAgentsPanel,
+      setShowAgentsPanel: handleSetShowAgentsPanel,
       activeEditorTab,
       setActiveEditorTab,
       hideNonEditableComponents,
@@ -2514,8 +2546,10 @@ export function EditorClient({
     setShowSuggestedEdits,
     showSuggestedEditsDiff,
     setShowSuggestedEditsDiff,
-    showRightSidebar,
-    handleSetShowRightSidebar,
+    showComponentNavigator,
+    handleSetShowComponentNavigator,
+    showAgentsPanel,
+    handleSetShowAgentsPanel,
     activeEditorTab,
     setActiveEditorTab,
     hideNonEditableComponents,
@@ -2791,7 +2825,7 @@ export function EditorClient({
         />
         {/* Control buttons in top right corner */}
         <div className="fixed top-4 right-4 z-[9999] flex gap-2">
-          {/* Device toggle button */}          
+          {/* Device toggle button */}
           <button
             onClick={() => {
               const currentDevice = pageViewContext.device;
@@ -2807,8 +2841,17 @@ export function EditorClient({
               }
             }}
             className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40"
-            aria-label={pageViewContext.device === "desktop" ? "Switch to mobile view" : "Switch to desktop view"}
-            title={pageViewContext.device === "desktop" ? "Switch to mobile view" : "Switch to desktop view"}
+            aria-label={
+              pageViewContext.device === "desktop"
+                ? "Switch to mobile view"
+                : "Switch to desktop view"
+            }
+            title={
+              pageViewContext.device === "desktop"
+                ? "Switch to mobile view"
+                : "Switch to desktop view"
+            }
+            data-testid="fullscreen-device-toggle"
           >
             {pageViewContext.device === "desktop" ? (
               <Smartphone className="h-5 w-5" />
@@ -2816,17 +2859,18 @@ export function EditorClient({
               <Monitor className="h-5 w-5" />
             )}
           </button>
-          
+
           {/* Exit fullscreen button */}
           {!configuration.forceFullscreen && (
-          <button
-            onClick={() => pageViewContext.setFullscreen(false)}
-            className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40"
-            aria-label="Exit fullscreen"
-            title="Return to normal view"
-          >
-            <Shrink className="h-5 w-5" />
-          </button>
+            <button
+              onClick={() => pageViewContext.setFullscreen(false)}
+              className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-black/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-black/40"
+              aria-label="Exit fullscreen"
+              title="Return to normal view"
+              data-testid="fullscreen-exit-button"
+            >
+              <Shrink className="h-5 w-5" />
+            </button>
           )}
         </div>
       </div>
@@ -2842,6 +2886,7 @@ export function EditorClient({
               setShowFullscreenHint(false);
             }, 600);
           }}
+          data-testid="fullscreen-hint-overlay"
         >
           <div className="fixed top-3 left-1/2 -translate-x-1/2 transform rounded-sm bg-gray-200 p-12">
             Press Ctrl + F11 to exit fullscreen mode
@@ -2857,17 +2902,41 @@ export function EditorClient({
         centerPanelView={centerPanelView}
         rightSidebar={
           currentView.rightSidebar &&
-          showRightSidebar && (
+          showComponentNavigator && (
             <SidebarView
               sidebar={currentView.rightSidebar}
               editContext={editContext}
               active={true}
               detached={true}
-              onClose={() => handleSetShowRightSidebar(false)}
+              onClose={() => handleSetShowComponentNavigator(false)}
             />
           )
         }
         rightSidebarTitle={currentView.rightSidebar?.title}
+        farRightSidebar={
+          showAgentsPanel && (
+            <SidebarView
+              sidebar={{
+                title: "Agents",
+                panels: [
+                  {
+                    name: "agents",
+                    title: "Agents",
+                    content: <Agents />,
+                    initialSize: 70,
+                    noOverflow: true,
+                  },
+                ],
+              }}
+              editContext={editContext}
+              active={true}
+              detached={true}
+              paddingRight={true}
+              onClose={() => handleSetShowAgentsPanel(false)}
+            />
+          )
+        }
+        farRightSidebarTitle={"AGENTS"}
       />
 
       {isTourActive && <Tour tourStopCallback={() => setIsTourActive(false)} />}

package/src/editor/client/editContext.ts

@@ -322,8 +322,11 @@ export type EditContextType = {
   getQuotaWarningMessage: () => string | null;
   isMobile: boolean;
 
-  showRightSidebar: boolean;
-  setShowRightSidebar: React.Dispatch<React.SetStateAction<boolean>>;
+  showComponentNavigator: boolean;
+  setShowComponentNavigator: React.Dispatch<React.SetStateAction<boolean>>;
+
+  showAgentsPanel: boolean;
+  setShowAgentsPanel: React.Dispatch<React.SetStateAction<boolean>>;
 
   activeEditorTab: string | null;
   setActiveEditorTab: React.Dispatch<React.SetStateAction<string | null>>;

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

@@ -246,6 +246,7 @@ export const TreeSelector = ({
               </div>
             )}
             <div
+              data-testid="media-selector-tree"
               className={`absolute inset-0 overflow-auto p-2 ${isPopoverOpen ? "pointer-events-none" : ""}`}
             >
               <ContentTree

package/src/editor/menubar/VersionSelector.tsx

@@ -92,7 +92,10 @@ export function VersionSelector({
       </PopoverTrigger>
       <PopoverContent className="w-64 p-0" align="start">
         <Command>
-          <CommandList className="max-h-[30vh]">
+          <CommandList
+            className="max-h-[30vh]"
+            data-testid="version-selector-list"
+          >
             <CommandEmpty>No versions available</CommandEmpty>
             <CommandGroup>
               {versions.length > 0 && (

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

@@ -1,6 +1,7 @@
 import { useEditContext } from "../../client/editContext";
 import { SimpleIconButton } from "../../ui/SimpleIconButton";
 import { Layers } from "lucide-react";
+import { SecretAgentIcon } from "../../ui/Icons";
 import { EnterFullScreenIcon } from "@radix-ui/react-icons";
 import { CompareIcon } from "../../ui/Icons";
 
@@ -25,9 +26,21 @@ export function UtilityControls() {
         label="Component Navigator"
         size="large"
         data-testid="component-navigator-button"
-        selected={editContext.showRightSidebar}
+        selected={editContext.showComponentNavigator}
         onClick={() =>
-          editContext.setShowRightSidebar(!editContext.showRightSidebar)
+          editContext.setShowComponentNavigator(
+            !editContext.showComponentNavigator,
+          )
+        }
+      />
+      <SimpleIconButton
+        icon={<SecretAgentIcon />}
+        label="Agents"
+        size="large"
+        data-testid="agents-panel-button"
+        selected={editContext.showAgentsPanel}
+        onClick={() =>
+          editContext.setShowAgentsPanel(!editContext.showAgentsPanel)
         }
       />
     </>

package/src/editor/page-viewer/EditorForm.tsx

@@ -12,6 +12,7 @@ import { Spinner } from "../ui/Spinner";
 import { PageViewContext } from "./pageViewContext";
 import { SimpleTabs, Tab } from "../ui/SimpleTabs";
 import { ChevronLeft, X } from "lucide-react";
+import { ComponentTree } from "../sidebar/ComponentTree";
 
 export function EditorForm({
   pageViewContext,
@@ -322,6 +323,18 @@ export function EditorForm({
       ),
       id: "advanced",
     });
+  // Component tree tab
+  tabPanels.push({
+    label: "Components",
+    content: (
+      <div className="relative h-full">
+        <div className="absolute inset-0 overflow-auto">
+          <ComponentTree />
+        </div>
+      </div>
+    ),
+    id: "tree",
+  });
 
   return (
     <div className="flex h-full flex-col" data-testid="editor-sidepanel">

package/src/editor/page-viewer/PageViewerFrame.tsx

@@ -775,7 +775,8 @@ export function PageViewerFrame({
         "relative flex h-full w-full flex-col items-center select-none",
 
         className,
-        editContext.showRightSidebar && "pr-0",
+        (editContext.showComponentNavigator || editContext.showAgentsPanel) &&
+          "pr-0",
       )}
     >
       {!editContext.pageView.fullscreen && (

package/src/editor/reviews/Comment.tsx

@@ -7,6 +7,7 @@ import {
   resolveComment,
   unresolveComment,
 } from "../services/reviewsService";
+import { startAgent, StartAgentRequest } from "../services/agentService";
 import { useDebouncedCallback } from "use-debounce";
 import { CommentView } from "./CommentView";
 import { CommentEditor } from "./CommentEditor";
@@ -99,15 +100,70 @@ export function Comment({
     await unresolveComment(comment);
   };
 
-  const handleAiAction = () => {
-    // TODO: Implement AI action
-    // editContext?.showAiPopup(event as any, {
-    //   initialPrompt:
-    //     'Please help me resolve this comment: "' +
-    //     comment.text +
-    //     '"',
-    //   hiddenSystemPrompt: getHiddenSystemPrompt(comment),
-    // });
+  const handleAiAction = async () => {
+    if (!editContext) return;
+
+    // Respect quota if available
+    if ((editContext as any).isQuotaExceeded) {
+      editContext.showToast?.(
+        "AI quota exceeded. Please try again later or adjust settings.",
+      );
+      return;
+    }
+
+    const selectedText = (() => {
+      if (
+        typeof comment.rangeStart === "number" &&
+        typeof comment.rangeEnd === "number" &&
+        comment.fieldValue
+      ) {
+        try {
+          return comment.fieldValue.substring(
+            Math.max(0, comment.rangeStart),
+            Math.max(comment.rangeStart, comment.rangeEnd),
+          );
+        } catch {
+          return undefined;
+        }
+      }
+      return undefined;
+    })();
+
+    const promptParts: string[] = [];
+    const text = (comment.text || "").trim();
+    if (text) promptParts.push(`Comment: "${text}"`);
+    if (comment.fieldName) promptParts.push(`Field: ${comment.fieldName}`);
+    if (comment.itemName) promptParts.push(`Item: ${comment.itemName}`);
+    if (selectedText) promptParts.push(`Selected text: "${selectedText}"`);
+
+    const initialPrompt =
+      promptParts.length > 0
+        ? `Please help resolve this review comment. ${promptParts.join(" | ")}`
+        : "Please help resolve this review comment.";
+
+    const agentId = crypto.randomUUID();
+
+    const request: StartAgentRequest = {
+      agentId,
+      message: initialPrompt,
+      sessionId: editContext.sessionId,
+      profileId: "Editor",
+      itemid: comment.mainItemId || editContext.currentItemDescriptor?.id || "",
+      language: comment.language,
+      version: comment.version,
+      selectedText: selectedText,
+      addContextContent: true,
+      addSelectedComponents: false,
+      profile: "Editor",
+    };
+
+    try {
+      editContext.setShowAgentsPanel(true);
+      await startAgent(request);
+    } catch (e) {
+      console.error("Failed to start agent for comment:", e);
+      editContext.showToast?.("Failed to start AI agent for this comment.");
+    }
   };
 
   if (isEditing) {

package/src/editor/reviews/CommentEditor.tsx

@@ -82,6 +82,7 @@ export function CommentEditor({
     <div className="space-y-3">
       <Textarea
         ref={textareaRef}
+        data-testid="add-comment-textarea"
         value={text}
         onChange={(e) => setText(e.target.value)}
         onKeyDown={handleKeyDown}
@@ -129,13 +130,19 @@ export function CommentEditor({
 
       {/* Action Buttons */}
       <div className="flex justify-end gap-2">
-        <ActionButton variant="outline" onClick={onCancel} disabled={isSaving}>
+        <ActionButton
+          variant="outline"
+          onClick={onCancel}
+          disabled={isSaving}
+          data-testid="add-comment-cancel"
+        >
           {cancelLabel}
         </ActionButton>
         <ActionButton
           onClick={handleSave}
           disabled={!text.trim() || isSaving}
           className="flex items-center gap-1"
+          data-testid="add-comment-submit"
         >
           {compact && <Send size={14} strokeWidth={1} />}
           {isSaving ? "Saving..." : submitLabel}

package/src/editor/reviews/CommentPopover.tsx

@@ -178,6 +178,7 @@ export function CommentPopover({
         ref={contentRef}
         tabIndex={-1}
         className="w-96 p-4"
+        data-testid="add-comment-popover"
         side="bottom"
         align="start"
         onOpenAutoFocus={(e) => {

package/src/editor/reviews/CommentView.tsx

@@ -81,15 +81,26 @@ export function CommentView({
     return (
       <div
         className={`${compact ? "mt-2" : "mt-3"} flex items-center border-t pt-${compact ? "2" : "3"} text-xs`}
+        data-testid="comment-context-info"
       >
         {showItemName && (
-          <div className="text-2xs text-gray-500">{comment.itemName}</div>
+          <div
+            className="text-2xs text-gray-500"
+            data-testid="comment-item-name"
+          >
+            {comment.itemName}
+          </div>
         )}
         {showFieldName && showItemName && (
           <div className="text-2xs mx-2 text-gray-500">&gt;</div>
         )}
         {showFieldName && (
-          <div className="text-2xs text-gray-500">{comment.fieldName}</div>
+          <div
+            className="text-2xs text-gray-500"
+            data-testid="comment-field-name"
+          >
+            {comment.fieldName}
+          </div>
         )}
       </div>
     );
@@ -118,6 +129,7 @@ export function CommentView({
               <SimpleIconButton
                 icon={<Edit className="h-3.5 w-3.5" strokeWidth={1} />}
                 label="Edit"
+                data-testid="comment-action-edit"
                 onClick={onEdit}
               />
             )}
@@ -130,11 +142,16 @@ export function CommentView({
                   <button
                     className="hover:bg-gray-5 cursor-pointer rounded-full p-[6px]"
                     title="Delete"
+                    data-testid="comment-action-delete"
                   >
                     <Trash2 className="h-3.5 w-3.5" strokeWidth={1} />
                   </button>
                 </PopoverTrigger>
-                <PopoverContent className="w-auto p-2" align="end">
+                <PopoverContent
+                  className="w-auto p-2"
+                  align="end"
+                  data-testid="comment-delete-popover"
+                >
                   <Button
                     variant="outline"
                     size="sm"
@@ -152,6 +169,7 @@ export function CommentView({
               <SimpleIconButton
                 icon={<Check className="h-3.5 w-3.5" strokeWidth={1} />}
                 label="Resolve"
+                data-testid="comment-action-resolve"
                 onClick={onResolve}
               />
             )}
@@ -170,6 +188,7 @@ export function CommentView({
                       formatDate(new Date(comment.resolvedDate!)) +
                       ")"
                     }
+                    data-testid="comment-resolved-indicator"
                   >
                     <Check
                       className="h-3.5 w-3.5 text-green-500"
@@ -195,6 +214,7 @@ export function CommentView({
               <SimpleIconButton
                 icon={<Sparkles className="h-3.5 w-3.5" strokeWidth={1} />}
                 label="AI"
+                data-testid="comment-action-ai"
                 onClick={onAiAction}
               />
             )}
@@ -205,6 +225,7 @@ export function CommentView({
       {/* Comment Text */}
       <div
         className={`${compact ? "text-sm" : "text-sm"} whitespace-pre-wrap text-gray-700`}
+        data-testid="comment-text"
       >
         {comment.text}
       </div>