@alpaca-editor/core 1.0.4026 → 1.0.4030

package/src/editor/services/agentService.ts

@@ -1,4 +1,48 @@
-import { get } from "./serviceHelper";
+import { AiContext } from "../ai/AiTerminal";
+
+export const AGENT_BASE_URL = "/alpaca/editor/agent";
+
+export interface StartAgentRequest {
+  agentId: string;
+  messages: any[];
+  sessionId: string;
+  profileId: string;
+  model?: string;
+  itemid: string;
+  language: string;
+  version: number;
+  selection?: string[];
+  selectedText?: string;
+  allowedFunctions?: string[];
+  addContextContent?: boolean;
+  addAllContent?: boolean;
+  addSelectedComponents?: boolean;
+  profile?: string;
+}
+
+export interface StartAgentResponse {
+  agentId: string;
+  status: string;
+  message: string;
+  startedAt: string;
+}
+
+export interface AgentStreamMessage {
+  type: string;
+  data: any;
+  timestamp: string;
+  error?: string;
+}
+
+export enum AgentStreamMessageType {
+  StatusUpdate = "StatusUpdate",
+  ContentChunk = "ContentChunk",
+  ToolCall = "ToolCall",
+  ToolResult = "ToolResult",
+  EditOperations = "EditOperations",
+  Completed = "Completed",
+  Error = "Error",
+}
 
 export interface AgentChat {
   id: string;
@@ -13,13 +57,19 @@ export interface AgentChat {
   profileId?: string;
   profileName: string;
   model: string;
-  status: "active" | "completed" | "error" | "abandoned";
+  status: string;
   createdDate: string;
   updatedDate: string;
   lastMessageDate?: string;
   totalTokensUsed: number;
   totalInputTokens: number;
   totalOutputTokens: number;
+  totalCachedInputTokens: number;
+  totalInputTokenCost: number;
+  totalOutputTokenCost: number;
+  totalCachedInputTokenCost: number;
+  totalCost: number;
+  currency: string;
   messageCount: number;
   metadata?: string;
   messages?: AgentChatMessage[];
@@ -32,28 +82,34 @@ export interface AgentChatMessage {
   role: string;
   content: string;
   name: string;
-  toolCallId?: string; // For tool result messages that reference a specific tool call
-  messageType?: string; // content, tool_result
+  toolCallId?: string;
+  messageType: string;
   isCompleted: boolean;
-  model?: string;
+  model: string;
   tokensUsed: number;
   inputTokens: number;
   outputTokens: number;
+  cachedInputTokens: number;
+  inputTokenCost: number;
+  outputTokenCost: number;
+  cachedInputTokenCost: number;
+  totalCost: number;
+  currency: string;
   responseTimeMs?: number;
   createdDate: string;
-  editOperations?: any[];
-  longRunningTaskIds?: string[];
+  editOperations?: string;
+  longRunningTaskIds?: string;
   metadata?: string;
-  toolCalls?: AgentChatToolCall[]; // Tool calls associated with this message
+  toolCalls?: AgentChatToolCall[];
 }
 
 export interface AgentChatToolCall {
   id: string;
   messageId: string;
-  toolCallId: string; // The tool call ID from the AI response
+  toolCallId: string;
   functionName: string;
-  functionArguments?: string;
-  functionResult?: any;
+  functionArguments: string;
+  functionResult?: string;
   functionError?: string;
   isCompleted: boolean;
   responseTimeMs?: number;
@@ -61,34 +117,352 @@ export interface AgentChatToolCall {
 }
 
 /**
- * Gets all agents for the current user
+ * Starts an agent execution and returns immediately
  */
-export async function getAgents(
-  status?: "active" | "completed" | "error" | "abandoned",
-  limit = 100
-) {
-  const url = `/alpaca/editor/ai/GetAgents${status ? `?status=${status}` : ""}${limit ? `${status ? "&" : "?"}limit=${limit}` : ""}`;
-  const response = await get<AgentChat[]>(url);
-  return response;
+export async function startAgent(
+  request: StartAgentRequest,
+  context: AiContext,
+): Promise<StartAgentResponse> {
+  const response = await fetch(AGENT_BASE_URL + "/start", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to start agent: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
 }
 
 /**
- * Gets a specific agent with its messages
+ * Connects to an agent's real-time stream using Server-Sent Events
  */
-export async function getAgent(agentId: string) {
-  const url = `/alpaca/editor/ai/GetAgent?agentId=${agentId}`;
-  const response = await get<AgentChat>(url);
-  return response;
+export async function connectToAgentStream(
+  agentId: string,
+  context: AiContext,
+  onMessage: (message: AgentStreamMessage) => void,
+  signal?: AbortSignal,
+): Promise<void> {
+  // Add cache-busting timestamp to prevent browser connection reuse
+  const timestamp = Date.now();
+  const streamUrl =
+    AGENT_BASE_URL + "/stream?agentId=" + agentId + "&t=" + timestamp;
+
+  // Retry logic to handle potential race conditions
+  let retryCount = 0;
+  const maxRetries = 3;
+  const retryDelay = 500; // 500ms
+
+  while (retryCount <= maxRetries) {
+    try {
+      const response = await fetch(streamUrl, {
+        headers: {
+          Accept: "text/event-stream",
+          "Cache-Control": "no-cache",
+          Pragma: "no-cache",
+        },
+        cache: "no-store",
+        signal,
+      });
+
+      if (response.ok) {
+        // Success - proceed with stream processing
+        await processEventStream(response, onMessage);
+        return;
+      }
+
+      // If 404 and we haven't maxed out retries, wait and retry
+      if (response.status === 404 && retryCount < maxRetries) {
+        retryCount++;
+        console.warn(
+          `Agent stream not ready (404), retrying in ${retryDelay}ms... (${retryCount}/${maxRetries})`,
+        );
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+        continue;
+      }
+
+      // For other errors or max retries reached, throw
+      throw new Error(
+        `Failed to connect to agent stream: ${response.status} ${response.statusText}`,
+      );
+    } catch (error) {
+      if (signal?.aborted) {
+        throw error; // Don't retry if cancelled
+      }
+
+      if (retryCount >= maxRetries) {
+        throw error;
+      }
+
+      retryCount++;
+      console.warn(
+        `Error connecting to agent stream, retrying... (${retryCount}/${maxRetries})`,
+        error,
+      );
+      await new Promise((resolve) => setTimeout(resolve, retryDelay));
+    }
+  }
+}
+
+/**
+ * Processes the event stream response
+ */
+async function processEventStream(
+  response: Response,
+  onMessage: (message: AgentStreamMessage) => void,
+): Promise<void> {
+  const reader = response.body?.getReader();
+  if (!reader) {
+    throw new Error("Failed to get stream reader");
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = "";
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+
+      if (done) {
+        break;
+      }
+
+      buffer += decoder.decode(value, { stream: true });
+
+      // Process complete messages
+      const lines = buffer.split("\n");
+
+      // Only keep the last line if it doesn't end with a newline (incomplete)
+      // If the buffer ends with \n, then all lines are complete
+      if (buffer.endsWith("\n")) {
+        // All lines are complete, process them all
+        buffer = "";
+      } else {
+        // Last line might be incomplete, keep it for next iteration
+        buffer = lines.pop() || "";
+      }
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          try {
+            const data = line.slice(6); // Remove 'data: ' prefix
+            if (data.trim()) {
+              const message: AgentStreamMessage = JSON.parse(data);
+
+              // Normalize message type (handle both numeric and string enum values)
+              if (typeof message.type === "number") {
+                switch (message.type) {
+                  case 0:
+                    message.type = AgentStreamMessageType.StatusUpdate;
+                    break;
+                  case 1:
+                    message.type = AgentStreamMessageType.ContentChunk;
+                    break;
+                  case 2:
+                    message.type = AgentStreamMessageType.ToolCall;
+                    break;
+                  case 3:
+                    message.type = AgentStreamMessageType.ToolResult;
+                    break;
+                  case 4:
+                    message.type = AgentStreamMessageType.EditOperations;
+                    break;
+                  case 5:
+                    message.type = AgentStreamMessageType.Completed;
+                    break;
+                  case 6:
+                    message.type = AgentStreamMessageType.Error;
+                    break;
+                  default:
+                    message.type = `Unknown_${message.type}`;
+                }
+              }
+
+              onMessage(message);
+
+              // Break on completion or error
+              if (
+                message.type === AgentStreamMessageType.Completed ||
+                message.type === AgentStreamMessageType.Error
+              ) {
+                //  console.log("Stream ending due to message type:", message.type);
+                return;
+              }
+            }
+          } catch (error) {
+            console.error("Failed to parse SSE message:", error, line);
+          }
+        }
+      }
+    }
+  } finally {
+    // console.log("Stream ended, releasing reader lock");
+    reader.releaseLock();
+  }
+}
+
+/**
+ * Gets the current status of an agent execution
+ */
+export async function getAgentStatus(
+  agentId: string,
+  context: AiContext,
+): Promise<any> {
+  const response = await fetch(
+    AGENT_BASE_URL + "/getAgentStatus?agentId=" + agentId,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to get agent status: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}
+
+/**
+ * Gets all currently running agents for monitoring
+ */
+export async function getRunningAgents(context: AiContext): Promise<any> {
+  const response = await fetch(AGENT_BASE_URL + "/getRunningAgents", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to get running agents: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}
+
+/**
+ * Gets a single agent by ID with complete message history and cost information
+ */
+export async function getAgent(
+  agentId: string,
+  context: AiContext,
+): Promise<any> {
+  const response = await fetch(
+    AGENT_BASE_URL + "/getAgent?agentId=" + agentId,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to get agent: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}
+
+/**
+ * Gets all agents for the current user
+ */
+export async function getAgents(
+  context: AiContext,
+  status?: string,
+  limit?: number,
+): Promise<any> {
+  const params = new URLSearchParams();
+  if (status) params.append("status", status);
+  if (limit) params.append("limit", limit.toString());
+
+  const queryString = params.toString();
+  const url =
+    AGENT_BASE_URL + "/getAgents" + (queryString ? `?${queryString}` : "");
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to get agents: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
 }
 
 /**
  * Gets chat history for the current user
  */
 export async function getChatHistory(
-  status?: "active" | "completed" | "error" | "abandoned",
-  limit = 50
-) {
-  const url = `/alpaca/editor/ai/GetChatHistory${status ? `?status=${status}` : ""}${limit ? `${status ? "&" : "?"}limit=${limit}` : ""}`;
-  const response = await get<AgentChat[]>(url);
-  return response;
-} 
+  context: AiContext,
+  status?: string,
+  limit?: number,
+): Promise<any> {
+  const params = new URLSearchParams();
+  if (status) params.append("status", status);
+  if (limit) params.append("limit", limit.toString());
+
+  const queryString = params.toString();
+  const url =
+    AGENT_BASE_URL + "/chatHistory" + (queryString ? `?${queryString}` : "");
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to get chat history: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}
+
+/**
+ * Cancels a running agent execution
+ */
+export async function cancelAgent(
+  agentId: string,
+  context: AiContext,
+): Promise<any> {
+  const response = await fetch(AGENT_BASE_URL + "/cancelAgent", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ agentId }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to cancel agent: ${response.status} ${response.statusText}`,
+    );
+  }
+
+  return await response.json();
+}

package/src/editor/services/aiService.ts

@@ -5,12 +5,17 @@ import { JsonCleaner } from "../utils/jsonCleaner";
 
 import { ExecutionResult, get, post } from "./serviceHelper";
 
+export type AiModel = {
+  id: string; // Guid as string
+  name: string;
+};
+
 export type AiProfile = {
   id: string;
   name: string;
   instructions: string;
-  defaultModel: string;
-  models: string[];
+  defaultModel: string | null; // Guid as string, nullable
+  models: AiModel[]; // Array of model objects with id and name
   prompts: { prompt: string; title: string }[];
   errorMessage?: string;
 };
@@ -50,6 +55,17 @@ export interface ExecutePromptResponse {
   deltaContent?: string;
   previousContentLength?: number;
   totalContentLength?: number;
+  // Updated agent name (only sent when the agent name has been updated)
+  agentName?: string;
+  totalCost?: number;
+  totalInputTokenCost?: number;
+  totalOutputTokenCost?: number;
+  totalCachedTokenCost?: number;
+  totalInputTokens?: number;
+  totalOutputTokens?: number;
+  totalCachedTokens?: number;
+  totalTokens?: number;
+  totalMessages?: number;
 }
 
 // Unified options interface that supports both calling patterns
@@ -57,6 +73,7 @@ export interface ExecutePromptOptions {
   // Common options
   sessionId?: string | null;
   model?: string | null;
+  stream?: boolean;
 
   // AiTerminal style options
   profileId?: string;
@@ -84,6 +101,7 @@ export async function executePrompt(
   options: ExecutePromptOptions = {},
   requestOptions?: RequestInit,
   callback?: (response: any) => void,
+  stream?: boolean,
 ): Promise<ExecutePromptResponse | null> {
   let endpoint: string;
   let requestBody: any;
@@ -91,7 +109,7 @@ export async function executePrompt(
 
   // Handle context - either direct AiContext or need to create it
   let aiContext: AiContext;
-  if ("endpoint" in context) {
+  if ("promptData" in context) {
     // Direct AiContext (AiTerminal style)
     aiContext = context;
   } else {
@@ -103,7 +121,8 @@ export async function executePrompt(
     }
   }
 
-  endpoint = aiContext.endpoint;
+  // Use hardcoded endpoint for old prompt system
+  endpoint = "/alpaca/editor/ai/Prompt";
 
   // Build unified request body
   requestBody = {
@@ -111,7 +130,7 @@ export async function executePrompt(
     ...aiContext.promptData,
     sessionId: options.sessionId,
     model: options.model,
-
+    stream: stream,
     // Include all provided options
     ...options,
   };

package/src/editor/services/contextService.ts

@@ -58,7 +58,6 @@ export async function generatePageContext(
     const result = await executePrompt(
       messages,
       {
-        endpoint: "/alpaca/editor/ai/prompt",
         promptData: {
           itemid: editContext.contentEditorItem!.id,
           language: editContext.contentEditorItem!.language,

package/src/editor/services/systemService.ts

@@ -1,8 +1,14 @@
 import { get, post } from "./serviceHelper";
-import { SystemStatus, UserPreferences } from "../../types";
+import { SystemStatus, UserPreferences, EditorSettings } from "../../types";
+
 export function getSystemStatus() {
   return get<SystemStatus>("/alpaca/editor/status");
 }
+
+export function getEditorSettings() {
+  return get<EditorSettings>("/alpaca/editor/settings");
+}
+
 export function saveUserPreferences(preferences: UserPreferences) {
   return post<UserPreferences>("/alpaca/editor/savepreferences", preferences);
 }

package/src/editor/sidebar/ComponentPalette.tsx

@@ -64,7 +64,10 @@ export function ComponentPalette({}: {}) {
   );
 
   return (
-    <div className="tour-component-palette relative flex h-full flex-col">
+    <div
+      className="tour-component-palette relative flex h-full flex-col"
+      data-testid="component-palette"
+    >
       <div className="p-4">
         <FilterInput
           ref={filterRef}

package/src/editor/sidebar/EditHistory.tsx

@@ -46,6 +46,7 @@ export function EditHistory() {
           }}
           icon={undoCommand.icon}
           label={undoCommand.label}
+          data-testid="undo-button"
           disabled={editContext.isCommandDisabled({ command: undoCommand })}
         />
         <SimpleIconButton
@@ -54,6 +55,7 @@ export function EditHistory() {
           }}
           icon={redoCommand.icon}
           label={redoCommand.label}
+          data-testid="redo-button"
           disabled={editContext.isCommandDisabled({ command: redoCommand })}
         />
       </SimpleToolbar>

package/src/editor/sidebar/GraphQL.tsx

@@ -1,5 +1,7 @@
+import "@uiw/react-textarea-code-editor/dist.css";
+
 import { Splitter, SplitterPanel } from "primereact/splitter";
-import { InputTextarea } from "primereact/inputtextarea";
+import CodeEditor from "@uiw/react-textarea-code-editor";
 import { ActionButton } from "../../components/ActionButton";
 import { useEffect, useState } from "react";
 
@@ -256,12 +258,22 @@ export function GraphQL() {
           <Splitter layout="horizontal" style={{ height: "100%" }}>
             <SplitterPanel size={50} className="relative">
               <div className="absolute inset-0 flex items-stretch">
-                <InputTextarea
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  className="min-w-0 flex-1 text-xs"
-                  style={{ height: "100%" }}
-                />
+                <div className="min-w-0 flex-1">
+                  <CodeEditor
+                    value={query}
+                    language="graphql"
+                    placeholder="Enter your GraphQL query here..."
+                    onChange={(evn: any) => setQuery(evn.target.value)}
+                    padding={15}
+                    style={{
+                      fontSize: 12,
+                      backgroundColor: "#f8f9fa",
+                      fontFamily:
+                        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+                      height: "100%",
+                    }}
+                  />
+                </div>
                 <ActionButton
                   onClick={refresh}
                   disabled={showSpinner}

package/src/editor/sidebar/MainContentTree.tsx

@@ -50,7 +50,7 @@ export function MainContentTree({
 
   useEffect(() => {
     if (selectedItem) setSelectedItemIds([selectedItem.id]);
-  }, [selectedItem]);
+  }, [selectedItem?.id]);
 
   useEffect(() => {
     const loadInsertOptions = async () => {

package/src/editor/sidebar/SEOInfo.tsx

@@ -67,7 +67,7 @@ export function SEOInfo() {
 
       // Try to send AI analysis request
       const aiServiceUrl =
-        editContext.configuration.services.aiService.promptUrl;
+        editContext.configuration.services.aiService.endpoint;
       console.log("AI Service URL:", aiServiceUrl);
 
       if (!aiServiceUrl) {