@alpaca-editor/core 1.0.4184 → 1.0.4186

package/src/agents-view/ProfileAgentsGroup.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import {
+  Agent,
+  ProfileAgentsGroup as ProfileGroup,
+} from "../editor/services/agentService";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { AgentCard } from "./AgentCard";
+import { SecretAgentIcon } from "../editor/ui/Icons";
+
+interface ProfileAgentsGroupProps {
+  profileGroup: ProfileGroup;
+  isExpanded: boolean;
+  isLoadingMore: boolean;
+  hasMore: boolean;
+  onToggle: () => void;
+  onLoadMore: () => void;
+  onAgentClick: (agent: Agent) => void;
+  onResumeAgent: (agent: Agent) => void;
+  onCloseAgent: (agentId: string, agentName: string) => void;
+  onDeleteAgent: (
+    agentId: string,
+    agentName: string,
+    event: React.MouseEvent,
+  ) => void;
+  formatDateTime: (dateString: string) => string;
+}
+
+export function ProfileAgentsGroup({
+  profileGroup,
+  isExpanded,
+  isLoadingMore,
+  hasMore,
+  onToggle,
+  onLoadMore,
+  onAgentClick,
+  onResumeAgent,
+  onCloseAgent,
+  onDeleteAgent,
+  formatDateTime,
+}: ProfileAgentsGroupProps) {
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white shadow-sm">
+      {/* Group Header */}
+      <button
+        onClick={onToggle}
+        className="flex w-full items-center gap-3 bg-gray-50 p-3 text-left transition-colors hover:bg-gray-100"
+      >
+        {/* Profile Icon */}
+        <div className="flex-shrink-0">
+          {profileGroup.profileSvgIcon ? (
+            <div
+              className="flex h-6 w-6 items-center justify-center text-gray-500 [&>svg]:h-full [&>svg]:w-full"
+              dangerouslySetInnerHTML={{
+                __html: profileGroup.profileSvgIcon,
+              }}
+            />
+          ) : (
+            <SecretAgentIcon
+              size={24}
+              strokeWidth={1}
+              className="text-gray-500"
+            />
+          )}
+        </div>
+
+        {/* Profile Name */}
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate font-medium text-gray-900">
+            {profileGroup.profileName}
+          </h3>
+        </div>
+
+        {/* Closed Agents Count Badge */}
+        <div className="flex-shrink-0 rounded-full bg-gray-200 px-3 py-1 text-xs font-medium text-gray-700">
+          {profileGroup.totalClosedCount} closed agent
+          {profileGroup.totalClosedCount !== 1 ? "s" : ""}
+        </div>
+
+        {/* Chevron Icon */}
+        <div className="flex-shrink-0 text-gray-500">
+          {isExpanded ? (
+            <ChevronUp className="size-5" strokeWidth={1} />
+          ) : (
+            <ChevronDown className="size-5" strokeWidth={1} />
+          )}
+        </div>
+      </button>
+
+      {/* Expandable Content */}
+      {isExpanded && (
+        <div className="space-y-2 p-3">
+          {profileGroup.agents.map((agent) => (
+            <AgentCard
+              key={agent.id}
+              agent={agent}
+              onClick={onAgentClick}
+              onResume={onResumeAgent}
+              onClose={onCloseAgent}
+              onDelete={onDeleteAgent}
+              formatDateTime={formatDateTime}
+            />
+          ))}
+
+          {/* Load More Button */}
+          {hasMore && (
+            <div className="flex justify-center pt-2">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onLoadMore();
+                }}
+                disabled={isLoadingMore}
+                className="rounded-lg border border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+              >
+                {isLoadingMore ? "Loading..." : "Load More"}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/config/config.tsx

@@ -71,6 +71,8 @@ import { loadInsertOptions } from "../editor/services/editService";
 import { getDefaultTourSteps } from "../tour/default-tour";
 import { Translation } from "../editor/sidebar/Translations";
 import { EditView } from "../editor/views/EditView";
+import { ParheliaView } from "../editor/views/ParheliaView";
+import { AnimatedSunIcon } from "../editor/ui/Icons";
 import { InsertMenuTemplate } from "../editor/context-menu/InsertMenu";
 
 import { Status } from "../editor/control-center/Status";
@@ -733,8 +735,15 @@ export const getConfiguration = (): EditorConfiguration => {
           expandTreeNode: "bafb88a1-506a-4671-b47b-1947730d25f6",
         },
       },
-      defaultPinnedViews: ["ai", "content-editor"],
+      defaultPinnedViews: ["parhelia", "ai", "content-editor"],
       views: [
+        // {
+        //   name: "parhelia",
+        //   title: "Parhelia",
+        //   icon: <AnimatedSunIcon strokeWidth={1} />,
+        //   defaultCenterPanelView: <ParheliaView />,
+        //   hideViewSelector: false,
+        // },
         {
           name: "splash-screen",
           title: "Splash Screen",

package/src/editor/ConfirmationDialog.tsx

@@ -68,7 +68,7 @@ const ConfirmationDialog = forwardRef<
       >
         <DialogHeader className="space-y-0 px-6 pt-3 pb-2">
           <DialogTitle className="text-lg font-semibold">
-            {props?.header || "Confirmation"}
+            {props?.header || ("Confirmation" as any)}
           </DialogTitle>
         </DialogHeader>
         <div className="px-6 py-4">

package/src/editor/ImageEditButton.tsx

@@ -85,7 +85,9 @@ export function ImageEditButton({
   return (
     <DropdownMenu open={showMenu} onOpenChange={setShowMenu}>
       {triggerButton ? (
-        <DropdownMenuTrigger asChild>{triggerButton}</DropdownMenuTrigger>
+        <DropdownMenuTrigger asChild>
+          {triggerButton as any}
+        </DropdownMenuTrigger>
       ) : (
         defaultTriggerButton
       )}
@@ -99,7 +101,7 @@ export function ImageEditButton({
               setShowMenu(false);
             }}
           >
-            {action.icon}
+            {action.icon as any}
             {action.label}
           </DropdownMenuItem>
         ))}

package/src/editor/ai/AgentProfilesOverview.tsx

@@ -42,7 +42,7 @@ export const AgentProfilesOverview: React.FC<AgentProfilesOverviewProps> = ({
           <button
             key={profile.id}
             onClick={() => onSelectProfile(profile.id)}
-            className="group flex flex-col gap-3 rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:border-blue-300 hover:shadow-md focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none"
+            className="group flex flex-col gap-3 rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:border-blue-300 hover:shadow-md"
             data-testid="agent-profile-card"
             data-profile-id={profile.id}
           >
@@ -78,4 +78,3 @@ export const AgentProfilesOverview: React.FC<AgentProfilesOverviewProps> = ({
     </div>
   );
 };
-

package/src/editor/ai/Agents.tsx

@@ -289,7 +289,7 @@ export const Agents = React.memo(function Agents({
           }
         }
         if (message.type === "agent:run:start") {
-          const { agentId, agentName } = message.payload;
+          const { agentId, agentName, autoSelect } = message.payload;
 
           if (!agentId || !agentName) {
             console.warn(
@@ -320,7 +320,7 @@ export const Agents = React.memo(function Agents({
               };
               return updatedAgents;
             } else {
-              // Add new agent to the array (but don't activate it - user may be in a different browser instance)
+              // Add new agent to the array
               const newAgent: Agent = {
                 id: agentId,
                 name: agentName,
@@ -332,6 +332,11 @@ export const Agents = React.memo(function Agents({
               return [...prevAgents, newAgent];
             }
           });
+
+          // Auto-switch to the spawned agent if requested
+          if (autoSelect === true) {
+            setActiveAgentIdWithStorage(agentId);
+          }
         } else if (message.type === "agent:info:updated") {
           const { agentId, agentName, agentDescription } =
             message.payload || {};

package/src/editor/client/EditorShell.tsx

@@ -1518,6 +1518,24 @@ export function EditorShell({
     switchView();
   };
 
+  // Listen for switch-view commands from agents via websocket
+  useEffect(() => {
+    const handleSwitchView = (message: { type: string; payload: any }) => {
+      if (message.type === "switch-view" && message.payload?.viewName) {
+        try {
+          switchView(message.payload.viewName);
+        } catch (error) {
+          console.error("Error switching view:", error);
+        }
+      }
+    };
+
+    const unsubscribe = addSocketMessageListener(handleSwitchView);
+    return () => {
+      unsubscribe();
+    };
+  }, [addSocketMessageListener, switchView]);
+
   const [dialog, setDialog] = useState<ReactNode>(null);
 
   const openDialog: OpenDialog = useCallback(

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

@@ -50,6 +50,7 @@ export function EditorChrome(props: {
         showAgentsPanel &&
         !editContext.currentWizardId &&
         ![
+          "parhelia",
           "splash-screen",
           "open-page",
           "new-page",

package/src/editor/commands/componentCommands.tsx

@@ -95,6 +95,9 @@ function getInsertCommand(
   if (!item) return null;
   if (!item.placeholders || item.placeholders.length === 0) return null;
   if (editContext.mode === "suggestions") return null;
+  // Don't show insert for layout components when showLayoutComponents is disabled
+  if (item.layoutId && !editContext.showLayoutComponents) return null;
+
   return {
     id: "insert",
     icon: <Plus size={defaultIconSize} />,
@@ -114,6 +117,10 @@ function getDuplicateCommand(
   if (components.length !== 1) return null;
   if (editContext.mode === "suggestions") return null;
 
+  const component = components[0];
+  // Don't show duplicate for layout components when showLayoutComponents is disabled
+  if (component.layoutId && !editContext.showLayoutComponents) return null;
+
   return {
     id: "duplicate",
     icon: <Copy size={defaultIconSize} />,
@@ -205,6 +212,9 @@ async function getDesignCommand(
   if (components.length !== 1 || isPlaceholder(components[0])) return null;
   const component = components[0];
   if (!component || !component.datasourceItem) return null;
+  // Don't show design for layout components when showLayoutComponents is disabled
+  if (component.layoutId && !editContext.showLayoutComponents) return null;
+
   const item = await editContext.itemsRepository.getItem(
     component.datasourceItem,
   );
@@ -243,6 +253,9 @@ async function getLinkToMasterCommand(
 ): Promise<ComponentCommand | null> {
   if (!components.length) return null;
   if (editContext.page?.item?.masterLanguages?.length === 0) return null;
+  // Don't show for layout components when showLayoutComponents is disabled
+  if (components.some((c) => c.layoutId && !editContext.showLayoutComponents))
+    return null;
 
   return getCheckboxCommand(
     components,
@@ -304,6 +317,9 @@ async function getInheritChildrenFromMasterCommand(
   if (editContext.page?.item?.masterLanguages?.length === 0) return null;
   if (components.find((x) => !x.placeholders || x.placeholders.length === 0))
     return null;
+  // Don't show for layout components when showLayoutComponents is disabled
+  if (components.some((c) => c.layoutId && !editContext.showLayoutComponents))
+    return null;
 
   return getCheckboxCommand(
     components,
@@ -345,7 +361,9 @@ function getDeleteCommand(
       ((!isPlaceholder(c) && !c.layoutId) ||
         c.layoutId === editContext.page?.item.id) &&
       !isLocked(c, editContext) &&
-      editContext.page?.item.canWriteItem,
+      editContext.page?.item.canWriteItem &&
+      // When showLayoutComponents is disabled, layout components should not be editable
+      (editContext.showLayoutComponents || !c.layoutId),
   );
 
   if (applicableComponents.length === 0) return null;

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

@@ -177,9 +177,10 @@ export function DateTimeFieldEditor({
         <PopoverTrigger asChild>
           <Button
             variant="outline"
+            size="sm"
             data-empty={!date}
             className={cn(
-              "bg-gray-5 justify-start p-1 text-left text-xs font-normal",
+              "bg-gray-5 justify-start px-2 text-left text-xs font-normal",
               !date && "text-muted-foreground",
             )}
             disabled={readOnly}
@@ -205,7 +206,7 @@ export function DateTimeFieldEditor({
 
       <div
         className={cn(
-          "bg-gray-5 flex items-center justify-start gap-1 px-2 text-left text-xs font-normal",
+          "bg-gray-5 flex h-8 items-center justify-start gap-1 rounded-sm px-2 text-left text-xs font-normal",
           !date && "text-muted-foreground",
         )}
       >
@@ -216,7 +217,7 @@ export function DateTimeFieldEditor({
           <PopoverTrigger asChild>
             <Button
               variant="ghost"
-              className="bg-gray-5 h-8 w-12 p-1 text-xs"
+              className="bg-gray-5 h-8 w-12 p-0 text-xs"
               disabled={readOnly || !date}
             >
               {hours.toString().padStart(2, "0")}
@@ -249,7 +250,7 @@ export function DateTimeFieldEditor({
           <PopoverTrigger asChild>
             <Button
               variant="ghost"
-              className="bg-gray-5 h-7.5 w-12 text-xs"
+              className="bg-gray-5 h-8 w-12 p-0 text-xs"
               disabled={readOnly || !date}
             >
               {minutes.toString().padStart(2, "0")}

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

@@ -186,7 +186,10 @@ export function FrameMenu({
     loadCommands();
   }, [component]);
 
-  const isDraggable = true; // component.canBeMoved && !component.layoutId;
+  // Determine if draggable - layout components should not be draggable when showLayoutComponents is disabled
+  const isLayoutReadonlyCheck =
+    component.layoutId && !editContext.showLayoutComponents;
+  const isDraggable = component.canBeMoved && !isLayoutReadonlyCheck;
 
   const commandButtons = commands
     .filter(
@@ -257,11 +260,14 @@ export function FrameMenu({
   }
 
   const isShared = component.isShared;
-  const isReadonly = editContext.mode === "preview" || compareView;
   const isLayout = component.layoutId;
+  // Layout components should be read-only when showLayoutComponents is disabled
+  const isLayoutReadonly = isLayout && !editContext.showLayoutComponents;
+  const isReadonly =
+    editContext.mode === "preview" || compareView || isLayoutReadonly;
 
   function getColor() {
-    if (isReadonly) return "readonly";
+    if (isReadonly && !isLayoutReadonly) return "readonly";
     if (editContext?.mode === "suggestions") return "suggestions";
     if (isLayout) return "layout";
     if (isShared) return "shared";

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

@@ -487,18 +487,8 @@ export function PageViewerFrame({
 
       let componentId = findNearestEditableComponentId(target as HTMLElement);
 
-      // If layout components are hidden, block selection on layout components
-      if (
-        componentId &&
-        editContextRef.current &&
-        editContextRef.current.page &&
-        editContextRef.current.showLayoutComponents === false
-      ) {
-        const comp = getComponentById(componentId, editContextRef.current.page);
-        if (comp?.layoutId) {
-          componentId = undefined;
-        }
-      }
+      // Layout components can still be selected even when showLayoutComponents is false
+      // They will be displayed in read-only mode
       const currentOverlayName = editContextRef.current?.currentOverlay;
       const isGeneratorOverlay = !!(
         currentOverlayName &&
@@ -530,12 +520,7 @@ export function PageViewerFrame({
               for (const el of all) {
                 const id = el.getAttribute("data-component-id");
                 if (!id) continue;
-                // Skip layout components when hidden
-                if (
-                  editContextRef.current?.showLayoutComponents === false &&
-                  getComponentById(id, page)?.layoutId
-                )
-                  continue;
+                // Layout components are now selectable even when showLayoutComponents is false
                 orderedIds.push(id);
               }
             }
@@ -688,17 +673,8 @@ export function PageViewerFrame({
 
       let componentId = findNearestEditableComponentId(target as HTMLElement);
 
-      if (
-        componentId &&
-        editContextRef.current &&
-        editContextRef.current.page &&
-        editContextRef.current.showLayoutComponents === false
-      ) {
-        const comp = getComponentById(componentId, editContextRef.current.page);
-        if (comp?.layoutId) {
-          componentId = undefined;
-        }
-      }
+      // Layout components can now be right-clicked even when showLayoutComponents is false
+      // Context menu will show limited/read-only actions
 
       if (componentId) {
         // Only change selection if right-clicking on a component that's not in the current selection
@@ -721,13 +697,8 @@ export function PageViewerFrame({
         .map((id) => getComponentById(id, pageViewContextRef.current!.page!))
         .filter((x) => x) as Component[];
 
-      // If layout components are hidden, do not show context menu for them
-      if (
-        editContextRef.current?.showLayoutComponents === false &&
-        selectedComponents.some((c) => c.layoutId)
-      ) {
-        return;
-      }
+      // Context menu will now show for layout components even when showLayoutComponents is false
+      // Commands will be appropriately filtered/disabled
 
       const iframeRect = iframe.getBoundingClientRect();
       const adjustedEvent = new MouseEvent("contextmenu", {

package/src/editor/reviews/Comment.tsx

@@ -12,6 +12,7 @@ import { openAiAgentForComment } from "./commentAi";
 import { useDebouncedCallback } from "use-debounce";
 import { CommentView } from "./CommentView";
 import { CommentEditor } from "./CommentEditor";
+import { toast } from "sonner";
 
 export function Comment({
   comment,
@@ -71,8 +72,28 @@ export function Comment({
         )?.rawValue;
       }
 
-      await createOrUpdateComment(comment);
+      const result = await createOrUpdateComment(comment);
+
+      if (result.type === "error" || result.type === "unauthorized") {
+        console.error("Failed to save comment:", result);
+        if (result.rawDetails) {
+          console.error(
+            "Full error details (including stack trace):\n",
+            result.rawDetails,
+          );
+        }
+        toast.error(
+          result.details || result.summary || "Failed to save comment",
+        );
+        return;
+      }
+
       setIsEditing(false);
+    } catch (error) {
+      console.error("Failed to save comment:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save comment",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -91,15 +112,75 @@ export function Comment({
   };
 
   const handleDelete = async () => {
-    await deleteComment(comment);
+    try {
+      const result = await deleteComment(comment);
+
+      if (result.type === "error" || result.type === "unauthorized") {
+        console.error("Failed to delete comment:", result);
+        if (result.rawDetails) {
+          console.error(
+            "Full error details (including stack trace):\n",
+            result.rawDetails,
+          );
+        }
+        toast.error(
+          result.details || result.summary || "Failed to delete comment",
+        );
+      }
+    } catch (error) {
+      console.error("Failed to delete comment:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete comment",
+      );
+    }
   };
 
   const handleResolve = async () => {
-    await resolveComment(comment);
+    try {
+      const result = await resolveComment(comment);
+
+      if (result.type === "error" || result.type === "unauthorized") {
+        console.error("Failed to resolve comment:", result);
+        if (result.rawDetails) {
+          console.error(
+            "Full error details (including stack trace):\n",
+            result.rawDetails,
+          );
+        }
+        toast.error(
+          result.details || result.summary || "Failed to resolve comment",
+        );
+      }
+    } catch (error) {
+      console.error("Failed to resolve comment:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to resolve comment",
+      );
+    }
   };
 
   const handleUnresolve = async () => {
-    await unresolveComment(comment);
+    try {
+      const result = await unresolveComment(comment);
+
+      if (result.type === "error" || result.type === "unauthorized") {
+        console.error("Failed to unresolve comment:", result);
+        if (result.rawDetails) {
+          console.error(
+            "Full error details (including stack trace):\n",
+            result.rawDetails,
+          );
+        }
+        toast.error(
+          result.details || result.summary || "Failed to unresolve comment",
+        );
+      }
+    } catch (error) {
+      console.error("Failed to unresolve comment:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Failed to unresolve comment",
+      );
+    }
   };
 
   const handleAiAction = async () =>

package/src/editor/reviews/CommentDisplayPopover.tsx

@@ -109,9 +109,9 @@ export function CommentDisplayPopover({
       }}
       enableIframeClickDetection={true}
     >
-      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverTrigger asChild>{children as any}</PopoverTrigger>
       <PopoverContent
-        ref={contentRef}
+        ref={contentRef as any}
         tabIndex={-1}
         className="w-96 p-4"
         side="bottom"

package/src/editor/reviews/CommentPopover.tsx

@@ -163,11 +163,11 @@ export function CommentPopover({
       )}
       {!position && (
         <PopoverTrigger asChild>
-          {children ?? <MessageCirclePlus size={16} strokeWidth={1} />}
+          {(children ?? <MessageCirclePlus size={16} strokeWidth={1} />) as any}
         </PopoverTrigger>
       )}
       <PopoverContent
-        ref={contentRef}
+        ref={contentRef as any}
         tabIndex={-1}
         className="w-96 p-4"
         data-testid="add-comment-popover"

package/src/editor/reviews/SuggestionDisplayPopover.tsx

@@ -265,7 +265,7 @@ export function SuggestionDisplayPopover({
       }}
       enableIframeClickDetection={true}
     >
-      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverTrigger asChild>{children as any}</PopoverTrigger>
       <PopoverContent className="w-96 p-4" side="bottom" align="start">
         <div className="space-y-3">
           {/* Header */}