@alpaca-editor/core 1.0.4103 → 1.0.4104

package/src/config/types.ts

@@ -111,6 +111,7 @@ export type MenuItem = {
   disabled?: boolean;
   separator?: boolean;
   className?: string;
+  template?: ReactNode;
 };
 
 export type MenuItemGroup = {

package/src/editor/ContentTree.tsx

@@ -5,8 +5,6 @@ import { useEditContext, useEditContextRef } from "./client/editContext";
 import { useCallback, useEffect, useRef, useState, useMemo, memo } from "react";
 
 import { ItemTreeNodeData, getChildren } from "./services/contentService";
-import { ContextMenu } from "primereact/contextmenu";
-import { MenuItem } from "primereact/menuitem";
 
 import { getAbsoluteIconUrl } from "./utils";
 import { FullItem, ItemDescriptor } from "./pageModel";
@@ -94,8 +92,6 @@ export default function ContentTree({
   const editContext = useEditContext();
 
   const nodeDictionary = useRef<{ [key: string]: CustomTreeNode }>({});
-  const cm = useRef<ContextMenu>(null);
-  const [menu, setMenu] = useState<MenuItem[]>([]);
 
   const editContextRef = useEditContextRef();
   const lastSelectedItemId = useRef<string | undefined>(undefined);
@@ -275,10 +271,7 @@ export default function ContentTree({
   );
 
   const refreshNode = useCallback(
-    async (
-      node: TreeNode,
-      options?: { reloadChildren?: boolean },
-    ) => {
+    async (node: TreeNode, options?: { reloadChildren?: boolean }) => {
       const item = await editContext?.itemsRepository.getItem(
         node.data as ItemDescriptor,
       );
@@ -348,7 +341,10 @@ export default function ContentTree({
     const unsubscribe = editContext.itemsRepository.subscribeItemsChanged(
       async (changes: any[]) => {
         // Aggregate target nodes and whether their children should be reloaded
-        const targetMap = new Map<string, { node: CustomTreeNode; reloadChildren: boolean }>();
+        const targetMap = new Map<
+          string,
+          { node: CustomTreeNode; reloadChildren: boolean }
+        >();
 
         for (const change of changes) {
           const isDelete = change?.action === "delete";
@@ -363,13 +359,17 @@ export default function ContentTree({
           // Default behavior: if flags are absent, keep previous behavior (reload children)
           const reloadChildrenFlag = isDelete
             ? true
-            : change?.changed?.children ?? true;
+            : (change?.changed?.children ?? true);
 
           const existing = targetMap.get(targetKey);
           if (existing) {
-            existing.reloadChildren = existing.reloadChildren || reloadChildrenFlag;
+            existing.reloadChildren =
+              existing.reloadChildren || reloadChildrenFlag;
           } else {
-            targetMap.set(targetKey, { node, reloadChildren: reloadChildrenFlag });
+            targetMap.set(targetKey, {
+              node,
+              reloadChildren: reloadChildrenFlag,
+            });
           }
         }
 
@@ -616,7 +616,6 @@ export default function ContentTree({
             items: items,
             editContext: editContext,
             commandCallback: (command: ItemCommand, result: any) => {
-              cm.current?.hide(originalEvent);
               if (command.id === "insertItem") {
                 const item = result as ItemDescriptor;
                 if (item) {
@@ -627,10 +626,7 @@ export default function ContentTree({
             },
           },
         );
-
-      if (menuItems) setMenu(menuItems);
-
-      cm.current?.show(originalEvent);
+      if (menuItems) editContext?.showContextMenu(originalEvent, menuItems);
     },
     [
       itemCommands,
@@ -759,7 +755,6 @@ export default function ContentTree({
 
   return (
     <>
-      <ContextMenu model={menu} ref={cm} className="text-sm" />
       <div
         className={cn(className, "text-dark font-light")}
         ref={treeContainerRef}

package/src/editor/ContextMenu.tsx

@@ -228,6 +228,18 @@ export const EditContextMenu = forwardRef<
             return <ContextMenuSeparator key={index} />;
           }
 
+          // Render custom template item as-is (used for Insert overlay template)
+          if (item.template) {
+            return (
+              <div
+                key={index}
+                className={cn("px-2 py-1.5 hover:bg-gray-100", item.className)}
+              >
+                {item.template}
+              </div>
+            );
+          }
+
           // Render disabled items without command as a label (useful for section headers)
           if (item.disabled && !item.command && !item.items?.length) {
             return (
@@ -245,29 +257,110 @@ export const EditContextMenu = forwardRef<
           if (item.items && item.items.length > 0) {
             return (
               <ContextMenuSub key={index}>
-                <ContextMenuSubTrigger disabled={item.disabled} className={item.className}>
+                <ContextMenuSubTrigger
+                  disabled={item.disabled}
+                  className={item.className}
+                >
                   {item.icon}
                   {item.label}
                 </ContextMenuSubTrigger>
                 <ContextMenuSubContent>
-                  {item.items.map((subItem, subIndex) => (
-                    <ContextMenuItem
-                      key={subIndex}
-                      onClick={(e) => {
-                        if (subItem.command) {
-                          subItem.command(e);
-                        }
-                        canvasRef.current?.dispatchEvent(
-                          new KeyboardEvent("keydown", { key: "Escape" }),
-                        );
-                      }}
-                      disabled={subItem.disabled}
-                      className={cn("cursor-pointer", subItem.className)}
-                    >
-                      {subItem.icon}
-                      {subItem.label}
-                    </ContextMenuItem>
-                  ))}
+                  {item.items.map((subItem, subIndex) => {
+                    if (subItem.separator) {
+                      return <ContextMenuSeparator key={subIndex} />;
+                    }
+                    if (subItem.template) {
+                      return (
+                        <div
+                          key={subIndex}
+                          className={cn("px-2 py-1.5", subItem.className)}
+                          onClick={(e) => {
+                            // prevent closing
+                            e.stopPropagation();
+                            e.preventDefault();
+                          }}
+                        >
+                          {subItem.template}
+                        </div>
+                      );
+                    }
+                    if (
+                      subItem.disabled &&
+                      !subItem.command &&
+                      !subItem.items?.length
+                    ) {
+                      return (
+                        <ContextMenuLabel
+                          key={subIndex}
+                          className={cn(
+                            "flex items-center gap-2",
+                            subItem.className,
+                          )}
+                          inset={false}
+                        >
+                          {subItem.icon}
+                          {subItem.label}
+                        </ContextMenuLabel>
+                      );
+                    }
+                    if (subItem.items && subItem.items.length > 0) {
+                      // Nested submenu support if needed
+                      return (
+                        <ContextMenuSub key={subIndex}>
+                          <ContextMenuSubTrigger
+                            disabled={subItem.disabled}
+                            className={subItem.className}
+                          >
+                            {subItem.icon}
+                            {subItem.label}
+                          </ContextMenuSubTrigger>
+                          <ContextMenuSubContent>
+                            {(subItem.items || []).map(
+                              (nested, nestedIndex) => (
+                                <ContextMenuItem
+                                  key={nestedIndex}
+                                  onClick={(e) => {
+                                    if (nested.command) nested.command(e);
+                                    canvasRef.current?.dispatchEvent(
+                                      new KeyboardEvent("keydown", {
+                                        key: "Escape",
+                                      }),
+                                    );
+                                  }}
+                                  disabled={nested.disabled}
+                                  className={cn(
+                                    "cursor-pointer",
+                                    nested.className,
+                                  )}
+                                >
+                                  {nested.icon}
+                                  {nested.label}
+                                </ContextMenuItem>
+                              ),
+                            )}
+                          </ContextMenuSubContent>
+                        </ContextMenuSub>
+                      );
+                    }
+                    return (
+                      <ContextMenuItem
+                        key={subIndex}
+                        onClick={(e) => {
+                          if (subItem.command) {
+                            subItem.command(e);
+                          }
+                          canvasRef.current?.dispatchEvent(
+                            new KeyboardEvent("keydown", { key: "Escape" }),
+                          );
+                        }}
+                        disabled={subItem.disabled}
+                        className={cn("cursor-pointer", subItem.className)}
+                      >
+                        {subItem.icon}
+                        {subItem.label}
+                      </ContextMenuItem>
+                    );
+                  })}
                 </ContextMenuSubContent>
               </ContextMenuSub>
             );

package/src/editor/MainLayout.tsx

@@ -84,7 +84,7 @@ export default function MainLayout(props: MainLayoutProps) {
   }
 
   return (
-    <div className={classNames("flex select-none", className)}>
+    <div className={classNames("flex font-light select-none", className)}>
       <div className="flex flex-1">
         {!props.view.hideViewSelector && <LeftToolbar />}
         <div className="flex flex-1 flex-col">

package/src/editor/ai/AgentHistory.tsx

@@ -58,9 +58,9 @@ export function AgentHistory({
                 onClick={() => onOpenAgent(agent)}
               >
                 <div className="min-w-0 flex-1">
-                  <div className="truncate font-medium text-gray-900">
+                  <div className="truncate font-normal text-gray-900">
                     {agent.name}
-                  </div>                 
+                  </div>
                   <div className="text-xs text-gray-400">
                     {formatDateToLocalTime(agent.updatedDate)}
                   </div>

package/src/editor/ai/AgentTerminal.tsx

@@ -33,13 +33,15 @@ import {
   AgentDetails,
   updateAgentMetadata,
   AgentMetadata,
+  updateAgentSettings,
+  updateAgentCostLimit,
 } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { Textarea } from "../../components/ui/textarea";
 import { Button } from "../../components/ui/button";
 import { AiResponseMessage } from "./AiResponseMessage";
 import { AgentCostDisplay } from "./AgentCostDisplay";
-import { Message } from "./AiTerminal";
+import { Message } from "./types";
 import { ContextInfoBar } from "./ContextInfoBar";
 import { getComponentById } from "../componentTreeHelper";
 import { Comment } from "../../types";
@@ -316,6 +318,11 @@ export function AgentTerminal({
   }, [messages]);
 
   const [error, setError] = useState<string | null>(null);
+  const [costLimitExceeded, setCostLimitExceeded] = useState<{
+    totalCost: number;
+    costLimit: number;
+    initialCostLimit: number;
+  } | null>(null);
 
   // Flag to track when we should create a new message
   const shouldCreateNewMessage = useRef(false);
@@ -329,6 +336,12 @@ export function AgentTerminal({
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const [shouldAutoScroll, setShouldAutoScroll] = useState(true);
 
+  // Cache mode/model changes made while the agent is still "new" (not yet persisted)
+  const pendingSettingsRef = useRef<{
+    modelName?: string | null;
+    mode?: "agent" | "ask";
+  } | null>(null);
+
   // Auto-scroll to bottom when new messages arrive
   const scrollToBottom = useCallback(() => {
     const container = messagesContainerRef.current;
@@ -850,6 +863,24 @@ export function AgentTerminal({
                 break;
 
               case "error":
+                // Detect cost limit exceeded
+                try {
+                  const data: any = (message as any).data;
+                  if (
+                    message.error === "COST_LIMIT_EXCEEDED" ||
+                    (data && data.kind === "costLimitExceeded")
+                  ) {
+                    setCostLimitExceeded({
+                      totalCost: Number(data?.totalCost) || 0,
+                      costLimit: Number(data?.costLimit) || 0,
+                      initialCostLimit: Number(data?.initialCostLimit) || 0,
+                    });
+                    setIsWaitingForResponse(false);
+                    shouldCreateNewMessage.current = false;
+                    resetDotsTimer();
+                    break;
+                  }
+                } catch {}
                 console.error("❌ Stream error:", message.error);
                 setError(message.error || "Stream error occurred");
                 setIsWaitingForResponse(false);
@@ -1188,17 +1219,23 @@ export function AgentTerminal({
     }
   }, [profiles, agent?.profileId]);
 
-  // Update selected model when the active profile changes
+  // Update selected model when the active profile or agent model changes
   useEffect(() => {
     if (!activeProfile) return;
-    const agentModelId = agent?.model;
-    const availableModelIds = (activeProfile.models || []).map((m) => m.id);
-    const nextModelId =
-      agentModelId && availableModelIds.includes(agentModelId)
-        ? agentModelId
-        : activeProfile.defaultModelId || activeProfile.models?.[0]?.id;
+    const agentModelName = agent?.model; // persisted as model NAME on server
+    const models = activeProfile.models || [];
+    let nextModelId: string | undefined = undefined;
+    if (agentModelName) {
+      const match = models.find(
+        (m) => (m.name || "").toLowerCase() === agentModelName.toLowerCase(),
+      );
+      if (match) nextModelId = match.id;
+    }
+    if (!nextModelId) {
+      nextModelId = activeProfile.defaultModelId || models[0]?.id;
+    }
     setSelectedModelId(nextModelId || undefined);
-  }, [activeProfile?.id]);
+  }, [activeProfile?.id, agent?.model]);
 
   // Cleanup stream connection when component unmounts or agent changes
   useEffect(() => {
@@ -1210,7 +1247,7 @@ export function AgentTerminal({
     };
   }, [agent?.id]);
 
-  // Initialize mode from metadata when available
+  // Initialize mode from metadata; fall back to agent.Mode from server
   useEffect(() => {
     try {
       const metaMode = (agentMetadata as any)?.mode as
@@ -1219,9 +1256,16 @@ export function AgentTerminal({
         | undefined;
       if (metaMode === "agent" || metaMode === "ask") {
         setMode(metaMode);
+        return;
       }
     } catch {}
-  }, [agentMetadata]);
+    try {
+      const serverMode = (agent as any)?.mode as string | undefined;
+      if (serverMode === "agent" || serverMode === "ask") {
+        setMode(serverMode);
+      }
+    } catch {}
+  }, [agentMetadata, (agent as any)?.mode]);
 
   const updateMode = useCallback(
     async (nextMode: "agent" | "ask") => {
@@ -1266,6 +1310,26 @@ export function AgentTerminal({
     }
   }, [showDots, shouldAutoScroll, scrollToBottom]);
 
+  // Persist any pending settings (mode/model) once an agent exists server-side
+  const persistPendingSettingsIfNeeded = useCallback(async () => {
+    try {
+      if (!agent?.id) return;
+      const pending = pendingSettingsRef.current;
+      if (!pending) return;
+      const payload: {
+        model?: string | null;
+        mode?: "agent" | "ask" | string | null;
+      } = {};
+      if (pending.modelName) payload.model = pending.modelName;
+      if (pending.mode) payload.mode = pending.mode;
+      if (Object.keys(payload).length === 0) return;
+      await updateAgentSettings(agent.id, payload);
+      pendingSettingsRef.current = null;
+    } catch (e) {
+      console.error("Failed to persist pending settings", e);
+    }
+  }, [agent?.id]);
+
   const handleSubmit = async () => {
     if (!prompt.trim() || isSubmitting || !editContext) return;
 
@@ -1276,6 +1340,26 @@ export function AgentTerminal({
 
       if (!agentId) return;
 
+      // Optional context factory: invoke if configured and available, otherwise continue
+      const factoryName = (agentMetadata as any)?.additionalData
+        ?.contextFactory as string | undefined;
+      if (factoryName) {
+        const factory = editContext.getContextFactory?.(factoryName);
+        if (factory) {
+          try {
+            await Promise.resolve(factory());
+          } catch (e: any) {
+            console.warn(
+              `Context factory '${factoryName}' failed: ${e?.message || String(e)}`,
+            );
+          }
+        } else {
+          console.warn(
+            `Context factory not found: ${factoryName}. Proceeding without it.`,
+          );
+        }
+      }
+
       // Add user message to local state immediately for better UX
       const userMessage: AgentChatMessage = {
         id: `user-${Date.now()}`,
@@ -1351,6 +1435,9 @@ export function AgentTerminal({
 
       await startAgent(request);
 
+      // If user changed mode/model while the agent was new, persist them now
+      await persistPendingSettingsIfNeeded();
+
       // Save prompt to history
       if (prompt.trim()) {
         setPromptHistory((prev) => [
@@ -1433,6 +1520,26 @@ export function AgentTerminal({
       const agentId = agent?.id;
       if (!agentId) return;
 
+      // Optional context factory: invoke if configured and available, otherwise continue
+      const factoryName = (agentMetadata as any)?.additionalData
+        ?.contextFactory as string | undefined;
+      if (factoryName) {
+        const factory = editContext.getContextFactory?.(factoryName);
+        if (factory) {
+          try {
+            await Promise.resolve(factory());
+          } catch (e: any) {
+            console.warn(
+              `Context factory '${factoryName}' failed: ${e?.message || String(e)}`,
+            );
+          }
+        } else {
+          console.warn(
+            `Context factory not found: ${factoryName}. Proceeding without it.`,
+          );
+        }
+      }
+
       const userMessage: AgentChatMessage = {
         id: `user-${Date.now()}`,
         agentId,
@@ -1499,6 +1606,9 @@ export function AgentTerminal({
 
       await startAgent(request);
 
+      // If user changed mode/model while the agent was new, persist them now
+      await persistPendingSettingsIfNeeded();
+
       await connectToStream();
     } catch (err) {
       console.error("Failed to submit quick message:", err);
@@ -2046,6 +2156,56 @@ export function AgentTerminal({
     />
   );
 
+  const renderCostLimitBanner = () => {
+    if (!costLimitExceeded) return null;
+    const { totalCost, costLimit, initialCostLimit } = costLimitExceeded;
+    return (
+      <div className="m-3 rounded border border-amber-300 bg-amber-50 p-3 text-xs text-amber-900">
+        <div className="mb-2 flex items-center gap-2">
+          <AlertCircle className="h-4 w-4 text-amber-500" strokeWidth={1} />
+          <span>
+            Cost limit exceeded. Spent ${totalCost.toFixed(4)} / $
+            {costLimit.toFixed(4)}.
+          </span>
+        </div>
+        <div className="flex gap-2">
+          <button
+            className="rounded border border-amber-300 bg-white px-2 py-1 hover:bg-amber-100"
+            onClick={async () => {
+              if (!agent?.id) return;
+              try {
+                await updateAgentCostLimit(agent.id, "remove");
+                setCostLimitExceeded(null);
+                // Reconnect to stream for next actions
+                await connectToStream(agent);
+              } catch (e) {
+                console.error("Failed to remove cost limit", e);
+              }
+            }}
+          >
+            Continue and remove limit
+          </button>
+          <button
+            className="rounded border border-amber-300 bg-white px-2 py-1 hover:bg-amber-100"
+            onClick={async () => {
+              if (!agent?.id) return;
+              try {
+                // Extend by initial cost limit amount
+                await updateAgentCostLimit(agent.id, "extend");
+                setCostLimitExceeded(null);
+                await connectToStream(agent);
+              } catch (e) {
+                console.error("Failed to extend cost limit", e);
+              }
+            }}
+          >
+            Continue and extend limit
+          </button>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="flex h-full flex-col">
       {/* Messages */}
@@ -2054,6 +2214,7 @@ export function AgentTerminal({
         className="flex-1 overflow-y-auto"
         onScroll={handleScroll}
       >
+        {renderCostLimitBanner()}
         {error && (
           <div className="m-4 rounded-lg border-l-4 border-red-500 bg-red-50 p-3">
             <div className="flex items-start">
@@ -2186,9 +2347,36 @@ export function AgentTerminal({
             <select
               className="h-5 rounded border px-1.5 text-[10px] text-gray-500"
               value={mode}
-              onChange={(e) =>
-                updateMode((e.target.value as "agent" | "ask") || "agent")
-              }
+              onChange={async (e) => {
+                const nextMode = (e.target.value as "agent" | "ask") || "agent";
+                // Optimistic UI update
+                setMode(nextMode);
+                const current = agentMetadata || ({} as AgentMetadata);
+                const nextMeta: AgentMetadata = {
+                  ...current,
+                  mode: nextMode,
+                } as AgentMetadata;
+                try {
+                  if (!agent?.id || agent.status === "new") {
+                    setAgentMetadata(nextMeta);
+                    // Cache until first start when agent is persisted
+                    pendingSettingsRef.current = {
+                      ...(pendingSettingsRef.current || {}),
+                      mode: nextMode,
+                    };
+                    return;
+                  }
+                  await updateAgentSettings(agent.id, { mode: nextMode });
+                  setAgentMetadata(nextMeta);
+                  setAgent((prev) =>
+                    prev
+                      ? { ...prev, metadata: JSON.stringify(nextMeta) }
+                      : prev,
+                  );
+                } catch (e2) {
+                  console.error("Failed to persist mode change", e2);
+                }
+              }}
               title="Mode"
               aria-label="Mode"
               data-testid="agent-mode-select"
@@ -2219,7 +2407,30 @@ export function AgentTerminal({
               <select
                 className="h-5 rounded border px-1.5 text-[10px] text-gray-500"
                 value={selectedModelId || ""}
-                onChange={(e) => setSelectedModelId(e.target.value)}
+                onChange={async (e) => {
+                  const nextId = e.target.value;
+                  setSelectedModelId(nextId);
+                  const modelName =
+                    activeProfile?.models?.find((m) => m.id === nextId)?.name ||
+                    "";
+                  // Update local agent state immediately for UX and to reflect in streaming stub
+                  setAgent((prev) =>
+                    prev ? { ...prev, model: modelName } : prev,
+                  );
+                  // Persist only for existing agents; otherwise cache until first start
+                  try {
+                    if (agent?.id && agent.status !== "new") {
+                      await updateAgentSettings(agent.id, { model: modelName });
+                    } else {
+                      pendingSettingsRef.current = {
+                        ...(pendingSettingsRef.current || {}),
+                        modelName,
+                      };
+                    }
+                  } catch (err) {
+                    console.error("Failed to persist agent model", err);
+                  }
+                }}
                 title="Model"
                 aria-label="Model"
                 data-testid="agent-model-select"

package/src/editor/ai/AiResponseMessage.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
 
 import { useEditContext } from "../client/editContext";
 import { EditOperation } from "../../types";
-import { Message, ToolCall } from "./AiTerminal";
+import { Message, ToolCall } from "./types";
 import { ToolCallDisplay } from "./ToolCallDisplay";
 
 import { X, Bot, Loader2 } from "lucide-react";

package/src/editor/ai/types.ts

@@ -0,0 +1,27 @@
+export type ToolCall = {
+  id: string;
+  displayName?: string;
+  function: {
+    name: string;
+    arguments: string;
+    result?: string;
+    error?: string;
+  };
+};
+
+export type Message = {
+  id: string;
+  content: string;
+  formattedContent?: string;
+  name: string;
+  role: string;
+  tool_calls?: ToolCall[];
+  tool_call_id?: string;
+  createdDate?: string;
+};
+
+export type AiContext = {
+  promptData: any;
+  endpoint?: string;
+  callback?: (response: any) => void;
+};