@alpaca-editor/core 1.0.4135 → 1.0.4141

package/src/components/ui/tabs.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface TabViewProps {
+  activeIndex?: number;
+  onTabChange?: (e: { index: number }) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}
+
+export interface TabPanelProps {
+  header: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function TabView({
+  activeIndex = 0,
+  onTabChange,
+  className,
+  style,
+  children,
+}: TabViewProps) {
+  const [internalActiveIndex, setInternalActiveIndex] = React.useState(activeIndex);
+  
+  const currentActiveIndex = activeIndex !== undefined ? activeIndex : internalActiveIndex;
+  
+  const handleTabClick = (index: number) => {
+    if (onTabChange) {
+      onTabChange({ index });
+    } else {
+      setInternalActiveIndex(index);
+    }
+  };
+
+  // Extract tab headers and content from children
+  const tabPanels = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<TabPanelProps> =>
+      React.isValidElement(child) && child.type === TabPanel
+  );
+
+  return (
+    <div className={cn("flex flex-col h-full", className)} style={style}>
+      {/* Tab Headers */}
+      <div className="flex border-b border-gray-200 px-4">
+        {tabPanels.map((panel, index) => (
+          <button
+            key={index}
+            onClick={() => handleTabClick(index)}
+            className={cn(
+              "px-6 py-3 text-sm font-medium border-b-2 transition-colors",
+              currentActiveIndex === index
+                ? "border-blue-500 text-blue-600 bg-blue-50"
+                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
+            )}
+          >
+            {panel.props.header}
+          </button>
+        ))}
+      </div>
+      
+      {/* Tab Content */}
+      <div className="flex-1 overflow-auto p-4">
+        {tabPanels.map((panel, index) => (
+          <div
+            key={index}
+            className={cn(
+              "h-full",
+              currentActiveIndex === index ? "block" : "hidden"
+            )}
+          >
+            {panel.props.children}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function TabPanel({ header, children, className }: TabPanelProps) {
+  // This component is used for structure but doesn't render directly
+  // The TabView component extracts the props and renders the content
+  return null;
+}

package/src/config/config.tsx

@@ -80,6 +80,7 @@ import { QuotaInfo } from "../editor/control-center/QuotaInfo";
 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 { 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";
@@ -287,7 +288,6 @@ export const getConfiguration = (): EditorConfiguration => {
       },
       image: {
         editor: ImageFieldEditor,
-        buttons: [],
       },
       droplink: {
         editor: DropLinkEditor,
@@ -445,6 +445,12 @@ export const getConfiguration = (): EditorConfiguration => {
               icon: <i className="pi pi-comments" />,
               content: <WebSocketMessages />,
             },
+            {
+              id: "all-agents",
+              title: "All Agents",
+              icon: <i className="pi pi-users" />,
+              content: <AllAgentsPanel />,
+            },
           ],
         },
         {

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/ImageEditButton.tsx

@@ -31,6 +31,7 @@ interface ImageEditButtonProps {
   testId?: string;
   /** Additional CSS classes for the trigger button */
   buttonClassName?: string;
+  defaultActionId?: string;
 }
 
 export function ImageEditButton({
@@ -41,10 +42,11 @@ export function ImageEditButton({
   buttonIcon = "pi pi-ellipsis-v",
   testId = "menu-toggle-button",
   buttonClassName,
+  defaultActionId = "select",
 }: ImageEditButtonProps) {
   const [showMenu, setShowMenu] = useState(false);
 
-  const selectAction = actions.find((a) => a.id === "select");
+  const defaultAction = actions.find((a) => a.id === defaultActionId);
 
   const defaultTriggerButton = (
     <div
@@ -54,13 +56,13 @@ export function ImageEditButton({
         e.stopPropagation();
       }}
     >
-      {selectAction && (
+      {defaultAction && (
         <button
           type="button"
           className="hover:bg-gray-5 cursor-pointer px-2 py-1.5"
           onClick={(e) => {
             e.stopPropagation();
-            selectAction.onClick?.(e);
+            defaultAction.onClick?.(e);
             setShowMenu(false);
           }}
           data-testid={`${testId}-quick-select`}

package/src/editor/PictureEditor.tsx

@@ -10,6 +10,7 @@ import {
   FieldActionsOverlayRef,
 } from "./FieldActionsOverlay";
 import { ImageEditButton, MenuAction } from "./ImageEditButton";
+import { DamSelector, DamImageValue, DamSelectorProps, SharedienDamExtension } from "@alpaca-editor/sharedien-dam";
 
 export function PictureEditor({
   field,
@@ -147,10 +148,52 @@ export function PictureEditor({
     if (selectedVideoId) videoSelected(selectedVideoId);
   }
 
+  async function selectFromDam() {
+    const data = await editContext?.openDialog<DamImageValue, DamSelectorProps>(DamSelector, { 
+      language: field.descriptor.item.language 
+    });
+
+    if (data?.mediaId || data?.videoId) {
+      // Create a new variant with the selected DAM asset
+      const selected = raw.Variants?.find((x) => x.Name == variantName);
+      if (!selected) {
+        if (!raw.Variants) raw.Variants = [];
+        raw.Variants.push({
+          Name: variantName,
+          MediaId: data.mediaId,
+          VideoId: data.videoId,
+        });
+      } else {
+          selected.MediaId = data.mediaId;
+          selected.VideoId = data.videoId;
+      }
+
+      editContext!.operations.editField({
+        field: field.descriptor,
+        rawValue: JSON.stringify(raw),
+        refresh: "immediate",
+      });
+    }
+  }
+
   const notEmpty = variant?.mediaId;
 
+  // Check if DAM selector should be enabled from configuration
+  const sharedienDamConfig = editContext?.configuration?.extensions?.sharedienDam as SharedienDamExtension;
+  const enableDamSelector = sharedienDamConfig?.enableDamSelector ?? false;
+
   // Build actions for the dropdown menu
   const menuActions: MenuAction[] = [
+    ...(enableDamSelector
+      ? [
+          {
+            id: "select-dam",
+            label: "Select from DAM",
+            icon: "pi pi-external-link",
+            onClick: () => selectFromDam(),
+          },
+        ]
+      : []),
     {
       id: "select",
       label: "Select",
@@ -235,7 +278,11 @@ export function PictureEditor({
       style={style}
       data-testid="select-media"
     >
-      <ImageEditButton actions={menuActions} compact={true} />
+      <ImageEditButton 
+        actions={menuActions} 
+        compact={true} 
+        defaultActionId={enableDamSelector ? "select-dam" : "select"} 
+      />
 
       {showCropper && (
         <PictureCropper

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>
+  );
+}