@alpaca-editor/core 1.0.4134 → 1.0.4140

package/src/editor/FieldListField.tsx

@@ -1,5 +1,3 @@
-import { Tooltip } from "primereact/tooltip";
-
 import { useEditContext, useFieldsEditContext } from "./client/editContext";
 import { useFieldModification } from "./client/fieldModificationStore";
 import { EditorConfiguration } from "../config/types";
@@ -35,7 +33,7 @@ import {
   PopoverTrigger,
 } from "../components/ui/popover";
 import {
-  Tooltip as InternalTooltip,
+  Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
@@ -244,19 +242,21 @@ export default function FieldListField({
       className={classNames}
     >
       {validationBarClassNames && (
-        <>
-          <div
-            className={validationBarClassNames}
-            id={"validation_" + field.id}
-          />
-          <Tooltip target={"#validation_" + field.id}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={validationBarClassNames}
+              id={"validation_" + field.id}
+            />
+          </TooltipTrigger>
+          <TooltipContent>
             {validators
               .filter((x) => x.result > 1)
               .map((x) => (
                 <div key={x.validator}>{x.message}</div>
               ))}
-          </Tooltip>
-        </>
+          </TooltipContent>
+        </Tooltip>
       )}
 
       <div className="flex-1">
@@ -443,7 +443,7 @@ export default function FieldListField({
                     />
                   )}
                   {!readonly && renderGeneratorButtons}
-                  <InternalTooltip>
+                  <Tooltip>
                     <Popover
                       open={fieldHistoryOpen}
                       onOpenChange={(open) => {
@@ -476,7 +476,7 @@ export default function FieldListField({
                       </PopoverContent>
                     </Popover>
                     <TooltipContent>Field History</TooltipContent>
-                  </InternalTooltip>
+                  </Tooltip>
                 </div>
               </>
             )}

package/src/editor/Terminal.tsx

@@ -97,7 +97,7 @@ export const Terminal = forwardRef<
         setMessages([...messageRef.current, { type: "response", text }]);
       }
     };
-    // @ts-ignore primereact TerminalService event bus
+    // @ts-ignore
     TerminalService.on("response", responseHandler);
     return () => {
       // @ts-ignore

package/src/editor/Titlebar.tsx

@@ -36,7 +36,6 @@ export function Titlebar() {
       const isInsideMenu = menuElement && menuElement.contains(target);
       const isInsideButton = buttonElement && buttonElement.contains(target);
 
-      // Check if the click is inside a PrimeReact overlay (which renders in portals)
       const isInsideOverlay = target.closest(".p-overlaypanel") !== null;
 
       // Close menu only if click is outside menu, button, and overlays

package/src/editor/ai/AgentCostDisplay.tsx

@@ -33,12 +33,15 @@ interface AgentCostDisplayProps {
     outputCost: number;
     cachedCost: number;
   };
+  /** Cost limit for the agent (in USD) */
+  costLimit?: number | null;
 }
 
 export function AgentCostDisplay({
   className = "",
   response,
   totalTokens,
+  costLimit,
 }: AgentCostDisplayProps) {
   const [showCostPopover, setShowCostPopover] = useState(false);
   const costPopoverRef = useRef<HTMLDivElement>(null);
@@ -118,16 +121,31 @@ export function AgentCostDisplay({
     return null;
   }
 
+  // Calculate percentage of limit used
+  const percentUsed = costLimit && costLimit > 0 
+    ? Math.min((displayTotalCost / costLimit) * 100, 100)
+    : null;
+
+  // Determine color based on usage
+  const getColorClass = () => {
+    if (!percentUsed) return "text-gray-400";
+    if (percentUsed >= 100) return "text-red-500";
+    if (percentUsed >= 80) return "text-orange-500";
+    if (percentUsed >= 60) return "text-yellow-600";
+    return "text-gray-400";
+  };
+
   return (
     <div className={`relative ${className}`} ref={costPopoverRef}>
       <Popover open={showCostPopover} onOpenChange={setShowCostPopover}>
         <PopoverTrigger asChild>
           <div
-            className="cursor-pointer text-right text-gray-400 hover:text-gray-600"
+            className={`cursor-pointer text-right hover:text-gray-600 ${getColorClass()}`}
             style={{ fontSize: "10px" }}
             onClick={() => setShowCostPopover(!showCostPopover)}
           >
             Total Cost: {displayTotalCost.toFixed(2)} {currency}
+            {costLimit && costLimit > 0 && ` / ${costLimit.toFixed(2)} ${currency}`}
           </div>
         </PopoverTrigger>
         <PopoverContent className="w-80 p-4" align="end" side="bottom">
@@ -137,10 +155,48 @@ export function AgentCostDisplay({
                 <div>Cost Breakdown</div>
                 <span className="text-sm font-semibold">
                   {displayTotalCost.toFixed(2)} {currency}
+                  {costLimit && costLimit > 0 && (
+                    <span className="ml-1 text-xs text-gray-500">
+                      / {costLimit.toFixed(2)} {currency}
+                    </span>
+                  )}
                 </span>
               </h4>
             </div>
 
+            {/* Cost limit warning */}
+            {costLimit && costLimit > 0 && (
+              <div className="rounded-md bg-gray-50 p-3">
+                <div className="mb-2 flex items-center justify-between text-xs">
+                  <span className="font-medium text-gray-700">Cost Limit Usage</span>
+                  <span className={`font-semibold ${getColorClass()}`}>
+                    {percentUsed?.toFixed(1)}%
+                  </span>
+                </div>
+                <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+                  <div
+                    className={`h-full transition-all ${
+                      percentUsed && percentUsed >= 100
+                        ? "bg-red-500"
+                        : percentUsed && percentUsed >= 80
+                          ? "bg-orange-500"
+                          : percentUsed && percentUsed >= 60
+                            ? "bg-yellow-500"
+                            : "bg-blue-500"
+                    }`}
+                    style={{ width: `${Math.min(percentUsed || 0, 100)}%` }}
+                  />
+                </div>
+                {percentUsed && percentUsed >= 90 && (
+                  <p className="mt-2 text-xs text-gray-600">
+                    {percentUsed >= 100
+                      ? "Cost limit reached. Execution will stop on next API call."
+                      : "Approaching cost limit. Consider extending if needed."}
+                  </p>
+                )}
+              </div>
+            )}
+
             <div className="space-y-3">
               {/* Session Cost Breakdown */}
               {(hasTotalData || hasTokenData) && (

package/src/editor/ai/AgentStatusBadge.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+import { AgentStatusSummary } from "./useAgentStatus";
+import { Agent } from "../services/agentService";
+
+interface AgentStatusBadgeProps {
+  status: AgentStatusSummary;
+  className?: string;
+}
+
+interface BadgeConfig {
+  baseClasses: string;
+  bgColor: string;
+  title: string;
+  content?: React.ReactNode;
+}
+
+export interface AgentStatusConfig {
+  color: string;
+  label: string;
+  shouldPulse: boolean;
+}
+
+/**
+ * Helper function to get status configuration for an individual agent
+ * Handles both numeric and string status values
+ * Enum: New=0, Running=1, WaitingForApproval=2, Completed=3, Error=4, Closed=5, Idle=6
+ */
+export function getAgentStatusConfig(agent: Agent): AgentStatusConfig {
+  const status: string | number = agent.status;
+
+  // Handle both string (camelCase from backend) and numeric (enum value) status
+  if (status === "new" || status === 0) {
+    return {
+      color: "bg-gray-400",
+      label: "Status: New",
+      shouldPulse: false,
+    };
+  } else if (status === "running" || status === 1) {
+    return {
+      color: "bg-blue-500",
+      label: "Status: Running",
+      shouldPulse: true,
+    };
+  } else if (status === "waitingForApproval" || status === 2) {
+    return {
+      color: "bg-amber-500",
+      label: "Status: Waiting for Approval",
+      shouldPulse: false,
+    };
+  } else if (status === "completed" || status === 3) {
+    return {
+      color: "bg-green-500",
+      label: "Status: Completed",
+      shouldPulse: false,
+    };
+  } else if (status === "error" || status === 4) {
+    return {
+      color: "bg-red-500",
+      label: "Status: Error",
+      shouldPulse: false,
+    };
+  } else if (status === "closed" || status === 5) {
+    return {
+      color: "bg-gray-400",
+      label: "Status: Closed",
+      shouldPulse: false,
+    };
+  } else if (status === "idle" || status === 6) {
+    return {
+      color: "bg-gray-300",
+      label: "Status: Idle",
+      shouldPulse: false,
+    };
+  }
+
+  // Default fallback - log for debugging
+  console.warn("Unknown agent status:", status, typeof status);
+  return {
+    color: "bg-gray-400",
+    label: `Status: Unknown (${status})`,
+    shouldPulse: false,
+  };
+}
+
+/**
+ * Badge that overlays on the agent icon to show status
+ * Always displays the total number of active agents with color-coded status:
+ * - Amber: Agents waiting for approval (highest priority)
+ * - Blue (pulsing): Agents actively running
+ * - Green: Other active agents
+ */
+export function AgentStatusBadge({ status, className }: AgentStatusBadgeProps) {
+  // No activity - don't show anything
+  if (!status.hasActivity) {
+    return null;
+  }
+
+  const getBadgeConfig = (): BadgeConfig => {
+    // Waiting for approval takes priority (most urgent)
+    if (status.waitingForApproval > 0) {
+      return {
+        baseClasses: "-right-2 -top-2",
+        bgColor: "bg-amber-500",
+        title: `${status.waitingForApproval} agent${status.waitingForApproval > 1 ? "s" : ""} waiting for approval (${status.total} total active)`,
+        content: <span className="text-[8px] font-bold">{status.total}</span>,
+      };
+    }
+
+    // Running agents - show count with pulsing indicator
+    if (status.running > 0) {
+      return {
+        baseClasses: "-right-2 -top-2",
+        bgColor: "bg-blue-500 animate-pulse",
+        title: `${status.running} agent${status.running > 1 ? "s" : ""} running (${status.total} total active)`,
+        content: <span className="text-[8px] font-bold">{status.total}</span>,
+      };
+    }
+
+    // Other active agents - show count
+    return {
+      baseClasses: "-right-2 -top-2",
+      bgColor: "bg-green-500",
+      title: `${status.total} active agent${status.total > 1 ? "s" : ""}`,
+      content: <span className="text-[8px] font-bold">{status.total}</span>,
+    };
+  };
+
+  const config = getBadgeConfig();
+
+  return (
+    <div
+      className={cn(
+        "absolute flex h-3 w-3 items-center justify-center rounded-full text-white shadow-md ring-1 ring-white",
+        config.baseClasses,
+        config.bgColor,
+        className,
+      )}
+      title={config.title}
+    >
+      {config.content}
+    </div>
+  );
+}