@alpaca-editor/core 1.0.4172 → 1.0.4174

package/src/agents-view/AgentsView.tsx

@@ -0,0 +1,431 @@
+import React, { useState, useEffect } from "react";
+import {
+  AgentDetails,
+  getActiveAgents,
+  getAgent,
+  closeAgent,
+  deleteAgent,
+} from "../editor/services/agentService";
+import { getAgentStatusConfig } from "../editor/ai/AgentStatusBadge";
+import { cn } from "../lib/utils";
+import { Trash, X, RefreshCw, Play } from "lucide-react";
+import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+import { useEditContext } from "../editor/client/editContext";
+import { SecretAgentIcon } from "../editor/ui/Icons";
+
+/**
+ * Agents overview view that displays all non-closed agents for the current user
+ * grouped by profile with interactive controls
+ */
+export function AgentsView() {
+  const editContext = useEditContext();
+  const [agents, setAgents] = useState<AgentDetails[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const loadAgents = async () => {
+    try {
+      setError(null);
+      // Get basic agent list
+      const basicAgents = await getActiveAgents(1000);
+
+      // Fetch full details for each agent
+      const detailsPromises = basicAgents.map((agent) =>
+        getAgent(agent.id).catch(() => null),
+      );
+      const agentDetails = await Promise.all(detailsPromises);
+
+      // Filter out any failed fetches and set the agents
+      const validAgents = agentDetails.filter(
+        (a): a is AgentDetails => a !== null,
+      );
+      setAgents(validAgents);
+    } catch (err: any) {
+      console.error("Failed to load agents:", err);
+      setError(
+        err?.message || "Failed to load agents. Please try again later.",
+      );
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    loadAgents();
+  }, []);
+
+  // Subscribe to websocket messages for real-time agent updates
+  useEffect(() => {
+    if (!editContext?.addSocketMessageListener) return;
+
+    const unsubscribe = editContext.addSocketMessageListener(
+      (message: { type: string; payload: any }) => {
+        if (message.type === "agent:run:start") {
+          const { agentId, agentName } = message.payload;
+
+          if (!agentId || !agentName) {
+            console.warn(
+              "Invalid agent:run:start message payload:",
+              message.payload,
+            );
+            return;
+          }
+
+          setAgents((prevAgents) => {
+            // Check if agent already exists
+            const existingAgentIndex = prevAgents.findIndex(
+              (agent) => agent.id === agentId,
+            );
+
+            if (existingAgentIndex !== -1) {
+              // Update existing agent
+              const updatedAgents = [...prevAgents];
+              const existingAgent = updatedAgents[existingAgentIndex]!;
+              updatedAgents[existingAgentIndex] = {
+                ...existingAgent,
+                name: agentName,
+                status: "running" as const,
+                updatedDate: new Date().toISOString(),
+              };
+              return updatedAgents;
+            } else {
+              // Add new agent - reload to get full details
+              loadAgents();
+              return prevAgents;
+            }
+          });
+        } else if (message.type === "agent:status:changed") {
+          // Update agent status in real-time
+          const { agentId, status } = message.payload || {};
+          if (!agentId) return;
+
+          setAgents((prevAgents) => {
+            const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
+
+            if (existingIndex !== -1) {
+              const updatedAgents = [...prevAgents];
+              const existingAgent = updatedAgents[existingIndex]!;
+              updatedAgents[existingIndex] = {
+                ...existingAgent,
+                status,
+                updatedDate: new Date().toISOString(),
+              };
+              return updatedAgents;
+            }
+
+            return prevAgents;
+          });
+        } else if (message.type === "agent:run:closed") {
+          // Remove agent from list when closed
+          const { agentId } = message.payload || {};
+          if (!agentId) return;
+
+          setAgents((prevAgents) => prevAgents.filter((a) => a.id !== agentId));
+        }
+      },
+    );
+
+    return unsubscribe;
+  }, [editContext?.addSocketMessageListener]);
+
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    await loadAgents();
+  };
+
+  const handleResumeAgent = (agent: AgentDetails) => {
+    editContext?.switchView("page-editor");
+    editContext?.setShowAgentsPanel?.(true);
+    // Delay for panel mount, then dispatch event to open existing agent
+    setTimeout(() => {
+      window.dispatchEvent(
+        new CustomEvent("editor:openAgent", {
+          detail: { agentId: agent.id },
+        }),
+      );
+    }, 500);
+  };
+
+  const handleCloseAgent = async (agentId: string, agentName: string) => {
+    editContext?.confirm({
+      header: "Close Agent",
+      message: `Are you sure you want to close "${agentName}"? This will stop its execution if running.`,
+      acceptLabel: "Close Agent",
+      accept: async () => {
+        try {
+          await closeAgent(agentId);
+          setAgents((prev) => prev.filter((a) => a.id !== agentId));
+        } catch (err: any) {
+          console.error("Failed to close agent:", err);
+          editContext?.showToast(
+            `Failed to close agent: ${err?.message || "Unknown error"}`,
+          );
+        }
+      },
+      showCancel: true,
+    });
+  };
+
+  const handleDeleteAgent = async (
+    agentId: string,
+    agentName: string,
+    event: React.MouseEvent,
+  ) => {
+    event.stopPropagation();
+
+    editContext?.confirm({
+      header: "Delete Agent",
+      message: `Are you sure you want to permanently delete "${agentName}"? This action cannot be undone.`,
+      acceptLabel: "Delete Agent",
+      accept: async () => {
+        try {
+          await deleteAgent(agentId);
+          setAgents((prev) => prev.filter((a) => a.id !== agentId));
+        } catch (err: any) {
+          console.error("Failed to delete agent:", err);
+          editContext?.showToast(
+            `Failed to delete agent: ${err?.message || "Unknown error"}`,
+          );
+        }
+      },
+      showCancel: true,
+    });
+  };
+
+  const formatDateTime = (dateString: string) => {
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleString();
+    } catch {
+      return dateString;
+    }
+  };
+
+  const filteredAgents = agents.filter((agent) => {
+    if (!searchTerm.trim()) return true;
+    const search = searchTerm.toLowerCase();
+    return (
+      agent.name.toLowerCase().includes(search) ||
+      agent.profileName?.toLowerCase().includes(search) ||
+      agent.id.toLowerCase().includes(search)
+    );
+  });
+
+  // Group agents by profile
+  const groupedAgents = filteredAgents.reduce(
+    (acc, agent) => {
+      const profileName = agent.profileName || "Unknown Profile";
+      if (!acc[profileName]) {
+        acc[profileName] = [];
+      }
+      acc[profileName].push(agent);
+      return acc;
+    },
+    {} as Record<string, AgentDetails[]>,
+  );
+
+  // Sort profile groups by name
+  const sortedProfileGroups = Object.entries(groupedAgents).sort(([a], [b]) =>
+    a.localeCompare(b),
+  );
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-sm text-gray-500">Loading agents...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="max-w-md text-center">
+          <div className="mb-4 text-sm text-red-600">{error}</div>
+          <button
+            onClick={handleRefresh}
+            className="rounded bg-blue-500 px-4 py-2 text-xs text-white hover:bg-blue-600"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="border-b border-gray-200 bg-white p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">My Agents</h2>
+            <p className="text-xs text-gray-500">
+              Showing {filteredAgents.length} active agent
+              {filteredAgents.length !== 1 ? "s" : ""}
+            </p>
+          </div>
+          <SimpleIconButton
+            onClick={handleRefresh}
+            icon={
+              <RefreshCw
+                className={cn("size-4", refreshing && "animate-spin")}
+                strokeWidth={1.5}
+              />
+            }
+            label="Refresh"
+            disabled={refreshing}
+            className="text-gray-600 hover:text-gray-800"
+          />
+        </div>
+
+        {/* Search */}
+        <input
+          type="text"
+          placeholder="Search by name, profile, or agent ID..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full rounded border border-gray-200 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+        />
+      </div>
+
+      {/* Agents List */}
+      <div className="flex-1 overflow-auto">
+        {filteredAgents.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-sm text-gray-500">
+            {searchTerm.trim()
+              ? "No agents match your search"
+              : "No active agents found"}
+          </div>
+        ) : (
+          <div className="space-y-6 p-4">
+            {sortedProfileGroups.map(([profileName, profileAgents]) => (
+              <div key={profileName}>
+                <h3 className="mb-2 text-xs font-semibold tracking-wide text-gray-500 uppercase">
+                  {profileName} ({profileAgents.length})
+                </h3>
+                <div className="space-y-2">
+                  {profileAgents.map((agent) => {
+                    const statusConfig = getAgentStatusConfig(agent);
+                    return (
+                      <div
+                        key={agent.id}
+                        className="cursor-pointer rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-shadow hover:shadow-md"
+                        onClick={() => {
+                          // Only select the agent in the agents panel; do not switch views
+                          window.dispatchEvent(
+                            new CustomEvent("editor:selectAgent", {
+                              detail: { agentId: agent.id },
+                            }),
+                          );
+                        }}
+                      >
+                        <div className="flex items-start justify-between">
+                          {/* Agent Icon */}
+                          <div className="mr-3 flex-shrink-0">
+                            {agent.profileSvgIcon ? (
+                              <div
+                                className="flex h-6 w-6 items-center justify-center text-gray-400 [&>svg]:h-full [&>svg]:w-full"
+                                dangerouslySetInnerHTML={{
+                                  __html: agent.profileSvgIcon,
+                                }}
+                              />
+                            ) : (
+                              <SecretAgentIcon
+                                size={24}
+                                strokeWidth={1}
+                                className="text-gray-400"
+                              />
+                            )}
+                          </div>
+
+                          <div className="min-w-0 flex-1">
+                            {/* Agent Name & Status */}
+                            <div className="mb-1 flex items-center gap-2">
+                              <div
+                                className={cn(
+                                  "h-2 w-2 flex-shrink-0 rounded-full",
+                                  statusConfig.color,
+                                  statusConfig.shouldPulse && "animate-pulse",
+                                )}
+                                title={statusConfig.label}
+                              />
+                              <h4 className="truncate font-medium text-gray-900">
+                                {agent.name}
+                              </h4>
+                            </div>
+
+                            {/* Agent Details */}
+                            <div className="space-y-1 text-xs text-gray-600">
+                              <div className="flex items-center gap-2">
+                                <span className="font-medium">Updated:</span>
+                                <span>{formatDateTime(agent.updatedDate)}</span>
+                              </div>
+                              {agent.messageCount > 0 && (
+                                <div className="flex items-center gap-2">
+                                  <span className="font-medium">Messages:</span>
+                                  <span>{agent.messageCount}</span>
+                                </div>
+                              )}
+                              {agent.totalCost > 0 && (
+                                <div className="flex items-center gap-2">
+                                  <span className="font-medium">Cost:</span>
+                                  <span>${agent.totalCost.toFixed(4)}</span>
+                                  <span className="text-gray-400">
+                                    ({agent.totalTokensUsed.toLocaleString()}{" "}
+                                    tokens)
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+
+                          {/* Actions */}
+                          <div className="ml-3 flex gap-1">
+                            <SimpleIconButton
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleResumeAgent(agent);
+                              }}
+                              icon={
+                                <Play className="size-3" strokeWidth={1.5} />
+                              }
+                              label="Resume Agent"
+                              className="text-blue-600 opacity-60 hover:text-blue-700 hover:opacity-100"
+                            />
+                            <SimpleIconButton
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleCloseAgent(agent.id, agent.name);
+                              }}
+                              icon={<X className="size-3" strokeWidth={1.5} />}
+                              label="Close Agent"
+                              className="text-gray-600 opacity-60 hover:text-gray-800 hover:opacity-100"
+                            />
+                            <SimpleIconButton
+                              onClick={(e) =>
+                                handleDeleteAgent(agent.id, agent.name, e)
+                              }
+                              icon={
+                                <Trash className="size-3" strokeWidth={1.5} />
+                              }
+                              label="Delete Agent"
+                              className="text-red-600 opacity-60 hover:text-red-700 hover:opacity-100"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/context-menu.tsx

@@ -326,7 +326,7 @@ function ContextMenuItem({
       data-variant={variant}
       data-disabled={disabled ? "" : undefined}
       className={cn(
-        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "hover:text-accent-foreground focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none hover:bg-[#f6eeff] focus:bg-[#f6eeff] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       onMouseDown={handleMouseDown}
@@ -361,7 +361,7 @@ function ContextMenuCheckboxItem({
       data-testid="context-menu-checkbox-item"
       data-disabled={(rest as any).disabled ? "" : undefined}
       className={cn(
-        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "hover:text-accent-foreground focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none hover:bg-[#f6eeff] focus:bg-[#f6eeff] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       onClick={handle}
@@ -410,7 +410,7 @@ function ContextMenuRadioItem({
       data-testid="context-menu-radio-item"
       data-disabled={(rest as any).disabled ? "" : undefined}
       className={cn(
-        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "hover:text-accent-foreground focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none hover:bg-[#f6eeff] focus:bg-[#f6eeff] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       onClick={handle}
@@ -539,7 +539,7 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       data-disabled={disabled ? "" : undefined}
       className={cn(
-        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "hover:text-accent-foreground focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none hover:bg-[#f6eeff] focus:bg-[#f6eeff] data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
       onMouseEnter={openSub}

package/src/config/config.tsx

@@ -47,6 +47,7 @@ import { Titlebar } from "../editor/Titlebar";
 import { NoWriteLanguageAccess } from "../editor/editor-warnings/NoLanguageWriteAccess";
 import { NoWorkflowWriteAccess } from "../editor/editor-warnings/NoWorkflowWriteAccess";
 import { SplashScreen } from "../splash-screen/SplashScreen";
+import { AgentsView } from "../agents-view/AgentsView";
 import { createEditToolbar } from "../editor/menubar/ToolbarFactory";
 
 import { Validation } from "../editor/sidebar/Validation";
@@ -81,6 +82,7 @@ import { About } from "../editor/control-center/About";
 import { WebSocketMessages } from "../editor/control-center/WebSocketMessages";
 import { LatestFeedback } from "../editor/control-center/LatestFeedback";
 import { AllAgentsPanel } from "../editor/control-center/AllAgentsPanel";
+import { ParheliaSetupOverview } from "../editor/control-center/parhelia-setup/Overview";
 import { DbSetupStep } from "../editor/control-center/setup-steps/DbSetupStep";
 import { SettingsSetupStep } from "../editor/control-center/setup-steps/SettingsSetupStep";
 import { AiSetupStep } from "../editor/control-center/setup-steps/AiSetupStep";
@@ -137,6 +139,8 @@ import {
   Video,
   X,
   Expand,
+  Download,
+  Bot,
 } from "lucide-react";
 
 import { Completions } from "../editor/sidebar/Completions";
@@ -360,6 +364,47 @@ const openImageMediaItemButton: ClientFieldButton = {
   description: "Opens the media item in the content editor",
 };
 
+const openAttachmentButton: ClientFieldButton = {
+  label: "Open",
+  icon: (<ExternalLink strokeWidth={1} size={16} />) as React.ReactNode,
+  visible: ({ field }) => !!(field.value as any)?.src,
+  clientAction: ({ field }) => {
+    const src = (field.value as any)?.src;
+    if (src) {
+      window.open(src, "_blank", "noopener,noreferrer");
+    }
+  },
+  isGenerator: false,
+  id: "open-attachment",
+  description: "Opens the attachment in a new tab",
+};
+
+const downloadAttachmentButton: ClientFieldButton = {
+  label: "Download",
+  icon: (<Download strokeWidth={1} size={16} />) as React.ReactNode,
+  visible: ({ field }) => !!(field.value as any)?.src,
+  clientAction: ({ field }) => {
+    const src = (field.value as any)?.src;
+    const fileName = (field.value as any)?.fileName;
+    const mimeType = (field.value as any)?.mimeType;
+
+    if (src) {
+      const link = document.createElement("a");
+      link.href = src;
+      link.download = fileName || "";
+      if (mimeType) {
+        link.type = mimeType;
+      }
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  },
+  isGenerator: false,
+  id: "download-attachment",
+  description: "Downloads the attachment file",
+};
+
 const pageEditorRightSidebar = {
   title: "COMPONENT NAVIGATOR & HISTORY",
   panels: [
@@ -576,6 +621,7 @@ export const getConfiguration = (): EditorConfiguration => {
       },
       attachment: {
         editor: AttachmentEditor,
+        buttons: [openAttachmentButton, downloadAttachmentButton],
       },
     },
     editorWarnings: [
@@ -628,6 +674,12 @@ export const getConfiguration = (): EditorConfiguration => {
               icon: <Settings strokeWidth={1} />,
               content: <Setup />,
             },
+            {
+              id: "parhelia-setup",
+              title: "Parhelia Setup",
+              icon: <Settings strokeWidth={1} />,
+              content: <ParheliaSetupOverview />,
+            },
             {
               id: "info",
               title: "System Info",
@@ -707,6 +759,15 @@ export const getConfiguration = (): EditorConfiguration => {
           defaultCenterPanelView: <NewPage />,
           hideViewSelector: true,
         },
+        {
+          name: "agents-overview",
+          title: "My Agents",
+          icon: <Bot strokeWidth={1} />,
+
+          defaultCenterPanelView: <AgentsView />,
+          hideViewSelector: false,
+          menuBar: <></>,
+        },
         {
           name: "page-editor",
           title: "Edit",

package/src/editor/ConfirmationDialog.tsx

@@ -7,6 +7,7 @@ import {
   DialogFooter,
 } from "../components/ui/dialog";
 import { Button } from "../components/ui/button";
+import { AlertTriangle } from "lucide-react";
 
 export type ConfirmationDialogProps = {};
 
@@ -62,29 +63,60 @@ const ConfirmationDialog = forwardRef<
   return (
     <Dialog open={visible} onOpenChange={setVisible}>
       <DialogContent
-        className="sm:max-w-[425px]"
+        className="gap-0 p-0 sm:max-w-[480px]"
         data-testid="confirmation-dialog"
       >
-        <DialogHeader>
-          <DialogTitle>{props?.header || "Confirm"}</DialogTitle>
+        <DialogHeader className="space-y-0 px-6 pt-3 pb-2">
+          <DialogTitle className="text-lg font-semibold">
+            {props?.header || "Confirmation"}
+          </DialogTitle>
         </DialogHeader>
-        <div className="flex items-center gap-3 p-3">
-          {props?.icon && <div className="text-2xl">{props.icon}</div>}
-          <div className="flex-1">{props?.message}</div>
+        <div className="px-6 py-4">
+          <div className="flex gap-4">
+            {props?.icon ? (
+              <div className="flex-shrink-0 pt-0.5 text-amber-500">
+                {props.icon}
+              </div>
+            ) : (
+              <div className="flex-shrink-0 pt-0.5">
+                <AlertTriangle
+                  className="h-5 w-5 text-amber-500"
+                  strokeWidth={1.5}
+                />
+              </div>
+            )}
+            <div className="flex-1 space-y-2">
+              <div className="text-sm leading-relaxed text-gray-700">
+                {props?.message}
+              </div>
+            </div>
+          </div>
         </div>
-        <DialogFooter className="gap-2 border-t p-2">
+        <DialogFooter className="gap-2 border-t bg-gray-50 px-6 py-3 sm:gap-2">
           {props?.showCancel && (
-            <Button variant="ghost" onClick={handleCancel}>
+            <Button
+              variant="outline"
+              onClick={handleCancel}
+              className="min-w-[90px]"
+            >
               Cancel
             </Button>
           )}
           {props?.rejectLabel && (
-            <Button variant="destructive" onClick={handleReject}>
+            <Button
+              variant="outline"
+              onClick={handleReject}
+              className="min-w-[90px]"
+            >
               {props.rejectLabel}
             </Button>
           )}
           {showAccept && (
-            <Button onClick={handleAccept}>
+            <Button
+              onClick={handleAccept}
+              variant="destructive"
+              className="min-w-[90px]"
+            >
               {props?.acceptLabel || "Yes"}
             </Button>
           )}