@alpaca-editor/core 1.0.4184 → 1.0.4185

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/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/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/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/services/agentService.ts

@@ -517,6 +517,19 @@ export interface GetAgentsResponse {
   hasMore: boolean;
 }
 
+export interface ProfileAgentsGroup {
+  profileId: string | null;
+  profileName: string;
+  profileSvgIcon?: string;
+  totalClosedCount: number;
+  agents: Agent[];
+}
+
+export interface GetAgentsGroupedResponse {
+  activeAgents: Agent[];
+  closedAgentsByProfile: ProfileAgentsGroup[];
+}
+
 /**
  * Gets all agents for the current user with pagination and search support
  */
@@ -550,6 +563,70 @@ export async function getActiveAgents(
   return result.data || { agents: [], totalCount: 0, hasMore: false };
 }
 
+/**
+ * Gets all active agents and closed agents grouped by profile for the current user
+ */
+export async function getAgentsGrouped(
+  searchTerm?: string,
+  includeShared: boolean = true,
+  includeOwned: boolean = true,
+): Promise<GetAgentsGroupedResponse> {
+  const queryParams = new URLSearchParams();
+
+  if (searchTerm) queryParams.append("searchTerm", searchTerm);
+  queryParams.append("includeShared", includeShared.toString());
+  queryParams.append("includeOwned", includeOwned.toString());
+
+  const queryString = queryParams.toString();
+  const url =
+    AGENT_BASE_URL +
+    "/getAgentsGroupedByProfile" +
+    (queryString ? `?${queryString}` : "");
+
+  const result = await get<GetAgentsGroupedResponse>(url);
+
+  if (result.type !== "success") {
+    throw new Error(
+      `Failed to get grouped agents: ${result.summary || "Unknown error"} ${result.details || ""}`,
+    );
+  }
+
+  return result.data || { activeAgents: [], closedAgentsByProfile: [] };
+}
+
+/**
+ * Gets more closed agents for a specific profile
+ */
+export async function getClosedAgentsByProfile(
+  profileId: string,
+  skip: number,
+  limit: number,
+  searchTerm?: string,
+): Promise<GetAgentsResponse> {
+  const queryParams = new URLSearchParams();
+
+  queryParams.append("profileId", profileId);
+  queryParams.append("skip", skip.toString());
+  queryParams.append("limit", limit.toString());
+  if (searchTerm) queryParams.append("searchTerm", searchTerm);
+
+  const queryString = queryParams.toString();
+  const url =
+    AGENT_BASE_URL +
+    "/getClosedAgentsByProfile" +
+    (queryString ? `?${queryString}` : "");
+
+  const result = await get<GetAgentsResponse>(url);
+
+  if (result.type !== "success") {
+    throw new Error(
+      `Failed to get closed agents by profile: ${result.summary || "Unknown error"} ${result.details || ""}`,
+    );
+  }
+
+  return result.data || { agents: [], totalCount: 0, hasMore: false };
+}
+
 /**
  * Gets all closed agents for the current user
  * @deprecated Use getActiveAgents() instead - the backend now returns all agents (including closed) by default

package/src/editor/services/serviceHelper.ts

@@ -2,47 +2,102 @@ export type ExecutionResult<T> = {
   type: "success" | "error" | "unauthorized";
   summary?: string;
   details?: string;
+  rawDetails?: string; // Original unprocessed error details (for logging/debugging)
   response: Response;
   data?: T;
 };
 
+/**
+ * Extracts a user-friendly error message from the response.
+ * Handles HTML error pages by extracting the title or exception details.
+ * Also extracts source file information if available.
+ */
+function extractErrorMessage(message: string): string {
+  // Check if it's an HTML error page
+  if (message.includes("<!DOCTYPE html>") || message.includes("<html>")) {
+    let errorMessage = "";
+
+    // Try to extract the title (which usually contains the error message)
+    const titleMatch = message.match(/<title>(.*?)<\/title>/i);
+    if (titleMatch && titleMatch[1]) {
+      // Remove "Server Error" prefix if present
+      errorMessage = titleMatch[1].replace(
+        /^Server Error in '.*?' Application\.\s*/i,
+        "",
+      );
+    }
+
+    // If no title, try h2 tag (exception message)
+    if (!errorMessage) {
+      const h2Match = message.match(/<h2>\s*<i>(.*?)<\/i>\s*<\/h2>/i);
+      if (h2Match && h2Match[1]) {
+        errorMessage = h2Match[1];
+      }
+    }
+
+    // If no h2, try Exception Details
+    if (!errorMessage) {
+      const exceptionMatch = message.match(
+        /<b>\s*Exception Details:\s*<\/b>(.*?)(?:<br>|<\/)/i,
+      );
+      if (exceptionMatch && exceptionMatch[1]) {
+        errorMessage = exceptionMatch[1].replace(/<[^>]*>/g, "").trim();
+      }
+    }
+
+    // Try to extract source file and line information
+    const sourceMatch = message.match(
+      /<b>\s*Source File:\s*<\/b>\s*([^<]+)<b>\s*&nbsp;&nbsp;\s*Line:\s*<\/b>\s*(\d+)/i,
+    );
+    if (sourceMatch && sourceMatch[1] && sourceMatch[2]) {
+      const fileName = sourceMatch[1].trim().split("\\").pop();
+      errorMessage += ` (${fileName}:${sourceMatch[2]})`;
+    }
+
+    if (errorMessage) {
+      return errorMessage;
+    }
+
+    // If we can't parse it, just strip all HTML tags
+    const cleaned = message.replace(/<[^>]*>/g, "").trim();
+    // Limit length for toast display
+    return cleaned.length > 200 ? cleaned.substring(0, 200) + "..." : cleaned;
+  }
+
+  return message;
+}
+
 export async function post<T>(
   url: string,
   body: any,
-  session?: string
+  session?: string,
 ): Promise<ExecutionResult<T>> {
   if (session) url += "?sessionId=" + session;
 
-  const response = await fetch(    
-    url,
-    {
-      method: "POST",
-      body: JSON.stringify(body),
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }
-  );
+  const response = await fetch(url, {
+    method: "POST",
+    body: JSON.stringify(body),
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
 
   return handleResponse<T>(response);
 }
 
 export async function get<T>(
   url: string,
-  session?: string
+  session?: string,
 ): Promise<ExecutionResult<T>> {
   if (session) url += "?sessionId=" + session;
-  const response = await fetch(
-    url,
-    {
-      method: "GET",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }
-  );
+  const response = await fetch(url, {
+    method: "GET",
+    credentials: "include",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
 
   return handleResponse<T>(response);
 }
@@ -54,17 +109,20 @@ async function handleResponse<T>(
     const data = await response.json();
     return {
       type: "error",
-      summary: data.summary,
-      details: data.details,
+      summary: data.summary ? extractErrorMessage(data.summary) : data.summary,
+      details: data.details ? extractErrorMessage(data.details) : data.details,
+      rawDetails: data.details || data.summary, // Preserve original for logging
       response,
     };
   }
 
   if (response.status === 500 || response.redirected) {
+    const rawText = await response.text();
     return {
       type: "error",
       summary: "Error",
-      details: await response.text(),
+      details: extractErrorMessage(rawText),
+      rawDetails: rawText, // Preserve full HTML error with stack trace
       response,
     };
   }
@@ -77,9 +135,15 @@ async function handleResponse<T>(
       response,
     };
   }
-  
+
   if (response.status !== 200) {
-    return { type: "error", response, details: await response.text() };
+    const rawText = await response.text();
+    return {
+      type: "error",
+      response,
+      details: extractErrorMessage(rawText),
+      rawDetails: rawText, // Preserve original for logging
+    };
   }
 
   if (!response.headers.get("content-type")?.includes("application/json")) {

package/src/revision.ts

@@ -1,2 +1,2 @@
-export const version = "1.0.4184";
-export const buildDate = "2025-10-23 01:46:04";
+export const version = "1.0.4185";
+export const buildDate = "2025-10-23 17:45:06";