@alpaca-editor/core 1.0.4103 → 1.0.4105

package/src/editor/ai/AgentTerminal.tsx

@@ -5,22 +5,7 @@ import React, {
   useCallback,
   useLayoutEffect,
 } from "react";
-import {
-  Send,
-  Bot,
-  AlertCircle,
-  Loader2,
-  User,
-  X,
-  FileText,
-  Puzzle,
-  Type,
-  Plus,
-  MessageSquare,
-  Wand2,
-  Square,
-  ChevronDown,
-} from "lucide-react";
+import { Send, AlertCircle, Loader2, User, Wand2, Square } from "lucide-react";
 import { DancingDots } from "./DancingDots";
 import {
   AgentChatMessage,
@@ -33,13 +18,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";
@@ -50,6 +37,8 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "../../components/ui/popover";
+import { SecretAgentIcon } from "../ui/Icons";
+import { formatTime, formatDateTime } from "../utils";
 
 // Simple user message component
 const UserMessage = ({ message }: { message: AgentChatMessage }) => {
@@ -60,10 +49,10 @@ const UserMessage = ({ message }: { message: AgentChatMessage }) => {
       </div>
       <div className="min-w-0 flex-1 select-text">
         <div className="mb-1 flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-900">You</span>
+          <span className="text-xs font-medium text-gray-900">You</span>
           {message.createdDate && (
             <span className="text-xs text-gray-400">
-              {new Date(message.createdDate).toLocaleTimeString()}
+              {formatTime(new Date(message.createdDate))}
             </span>
           )}
         </div>
@@ -316,6 +305,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 +323,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 +850,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 +1206,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 +1234,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 +1243,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 +1297,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 +1327,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 +1422,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 +1507,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 +1593,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 +2143,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 +2201,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">
@@ -2072,9 +2220,10 @@ export function AgentTerminal({
         {messages.length === 0 && !error && (
           <div className="flex h-full items-center justify-center p-8">
             <div className="text-center">
-              <Bot
-                className="mx-auto mb-4 h-12 w-12 text-gray-400"
+              <SecretAgentIcon
+                size={48}
                 strokeWidth={1}
+                className="mx-auto mb-4 text-gray-400"
               />
               <h3 className="mb-2 text-lg font-medium text-gray-900">
                 Start a conversation
@@ -2186,9 +2335,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 +2395,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/Agents.tsx

@@ -502,7 +502,6 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="w-72">
-   
           {loadingProfiles ? (
             <div className="text-center text-xs text-gray-500">
               Loading profiles...
@@ -670,7 +669,20 @@ export function Agents({ closeButton }: { closeButton?: React.ReactNode }) {
                               {agent.name}
                             </div>
                             <div className="text-xs text-gray-400">
-                              {new Date(agent.updatedDate).toLocaleString()}
+                              {(() => {
+                                try {
+                                  const {
+                                    formatDateTime,
+                                  } = require("../utils");
+                                  return formatDateTime(
+                                    new Date(agent.updatedDate),
+                                  );
+                                } catch {
+                                  return new Date(
+                                    agent.updatedDate,
+                                  ).toLocaleString();
+                                }
+                              })()}
                             </div>
                           </div>
                           <SimpleIconButton

package/src/editor/ai/AiResponseMessage.tsx

@@ -1,13 +1,15 @@
-import React, { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
+import { formatTime } from "../utils";
 
 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";
+import { X } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
+import { SecretAgentIcon } from "../ui/Icons";
 
 type QuickAction = {
   id?: string;
@@ -464,15 +466,15 @@ export function AiResponseMessage({
   return (
     <div className="flex gap-3 p-4" data-testid="agent-message">
       <div className="flex-shrink-0">
-        <Bot className="h-6 w-6 text-green-600" strokeWidth={1} />
+        <SecretAgentIcon size={24} strokeWidth={1} className="text-gray-2" />
       </div>
       <div className="min-w-0 flex-1 select-text">
         <div className="mb-1 flex items-center gap-2">
-          <span className="text-sm font-medium text-gray-900">Agent</span>
+          <span className="text-dark text-xs font-medium">Agent</span>
 
           {lastMessage && lastMessage.createdDate && (
             <span className="text-xs text-gray-400">
-              {new Date(lastMessage.createdDate).toLocaleTimeString()}
+              {formatTime(new Date(lastMessage.createdDate))}
             </span>
           )}
         </div>

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

package/src/editor/client/EditorShell.tsx

@@ -1621,6 +1621,16 @@ export function EditorShell({
 
   const editContext = useMemo<EditContextType>(() => {
     // console.log('🔄 EditContext useMemo is being recalculated');
+    // Simple registry for per-view context factories (e.g., GraphQL context)
+    // Stored outside the EditContext object via ref to avoid re-renders
+    if (!(globalThis as any).__editorContextFactoriesRef) {
+      (globalThis as any).__editorContextFactoriesRef = {
+        map: new Map<string, () => Promise<any> | any>(),
+      };
+    }
+    const factoriesRef = (globalThis as any).__editorContextFactoriesRef as {
+      map: Map<string, () => Promise<any> | any>;
+    };
     const context = {
       operations: operationsContext.ops,
       itemsRepository,
@@ -2069,6 +2079,27 @@ export function EditorShell({
       setCurrentWizardId,
       favorites,
       loadFavorites,
+      // Context factory registry methods
+      registerContextFactory: (
+        name: string,
+        factory: () => Promise<any> | any,
+      ) => {
+        try {
+          factoriesRef.map.set(name, factory);
+        } catch {}
+      },
+      unregisterContextFactory: (name: string) => {
+        try {
+          factoriesRef.map.delete(name);
+        } catch {}
+      },
+      getContextFactory: (name: string) => {
+        try {
+          return factoriesRef.map.get(name);
+        } catch {
+          return undefined;
+        }
+      },
     };
 
     return context as unknown as EditContextType;
@@ -2126,6 +2157,7 @@ export function EditorShell({
     revision,
     comments,
     setComments,
+    availableCommentTags,
     selectedComment,
     setSelectedComment,
     loadComments,
@@ -2141,6 +2173,7 @@ export function EditorShell({
     setShowSuggestedEdits,
     showSuggestedEditsDiff,
     setShowSuggestedEditsDiff,
+    showComments,
     showResolvedComments,
     setShowResolvedComments,
     showComponentNavigator,

package/src/editor/client/editContext.ts

@@ -176,7 +176,9 @@ export type EditContextType = {
   showToast: (message: string) => void;
   sessionId: string;
   openSplashScreen: () => void;
-  getComponentCommands: (components: Component[]) => Promise<ComponentCommand[]>;
+  getComponentCommands: (
+    components: Component[],
+  ) => Promise<ComponentCommand[]>;
   selectMedia: ({
     selectedIdPath,
     mode,
@@ -372,6 +374,15 @@ export type EditContextType = {
   loadFavorites: () => Promise<void>;
   currentWizardId: string | null;
   setCurrentWizardId: (wizardId: string | null) => void;
+
+  // Context factory registry (optional): panels can register named factories
+  // that produce structured context objects for agent prompts.
+  registerContextFactory?: (
+    name: string,
+    factory: () => Promise<any> | any,
+  ) => void;
+  unregisterContextFactory?: (name: string) => void;
+  getContextFactory?: (name: string) => (() => Promise<any> | any) | undefined;
 };
 
 const EditContext = React.createContext<EditContextType | undefined>(undefined);

package/src/editor/commands/agentCommands.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Command, CommandContext } from "./commands";
+import { Wand2 } from "lucide-react";
+
+export type CreateAgentCommandData = {
+  profileName?: string;
+  profileId?: string;
+  contextFactory?: string;
+  initialPrompt?: string;
+  additionalData?: Record<string, any>;
+};
+
+export const createAgentCommand: Command<CreateAgentCommandData> = {
+  id: "createAgent",
+  label: "Start Agent",
+  icon: <Wand2 strokeWidth={1} className="text-violet-600" />,
+  execute: async (context: CommandContext<CreateAgentCommandData>) => {
+    const edit = context.editContext;
+    try {
+      edit.setShowAgentsPanel?.(true);
+
+      const {
+        profileName,
+        profileId,
+        contextFactory,
+        initialPrompt,
+        additionalData,
+      } = context.data || {};
+
+      const metadata = {
+        profile: profileName,
+        additionalData: {
+          ...(additionalData || {}),
+          profileName,
+          profileId,
+          contextFactory,
+          initialPrompt,
+        },
+      } as any;
+
+      window.dispatchEvent(
+        new CustomEvent("editor:addNewAgent", { detail: { metadata } }),
+      );
+    } catch (e) {
+      console.error("Failed to start agent", e);
+    }
+  },
+  disabled: () => false,
+};