apteva 0.2.8 → 0.2.10

package/src/server.ts

@@ -114,8 +114,45 @@ const mcpServersToRestart = McpServerDB.findRunning();
 AgentDB.resetAllStatus();
 McpServerDB.resetAllStatus();
 
-// In-memory store for running agent processes only
-export const agentProcesses: Map<string, Subprocess> = new Map();
+// Clean up orphaned processes on agent ports (targeted cleanup based on DB)
+async function cleanupOrphanedProcesses(): Promise<void> {
+  // Get all agents with assigned ports
+  const agents = AgentDB.findAll();
+  const assignedPorts = agents.map(a => a.port).filter((p): p is number => p !== null);
+
+  if (assignedPorts.length === 0) return;
+
+  let cleaned = 0;
+  for (const port of assignedPorts) {
+    try {
+      const res = await fetch(`http://localhost:${port}/health`, { signal: AbortSignal.timeout(200) });
+      if (res.ok) {
+        // Orphaned process on this port - shut it down
+        try {
+          await fetch(`http://localhost:${port}/shutdown`, { method: "POST", signal: AbortSignal.timeout(500) });
+          cleaned++;
+        } catch {
+          // Shutdown failed - will be handled when agent tries to start
+        }
+      }
+    } catch {
+      // Port not in use - good
+    }
+  }
+
+  if (cleaned > 0) {
+    console.log(`  [cleanup] Stopped ${cleaned} orphaned agent process(es)`);
+  }
+}
+
+// Run cleanup (don't block startup)
+cleanupOrphanedProcesses().catch(() => {});
+
+// In-memory store for running agent processes (agent_id -> { process, port })
+export const agentProcesses: Map<string, { proc: Subprocess; port: number }> = new Map();
+
+// Track agents currently being started (to prevent race conditions)
+export const agentsStarting: Set<string> = new Set();
 
 // Binary path - can be overridden via environment variable, or found from npm/downloaded
 export function getBinaryPathForAgent(): string {
@@ -123,8 +160,13 @@ export function getBinaryPathForAgent(): string {
   if (process.env.AGENT_BINARY_PATH) {
     return process.env.AGENT_BINARY_PATH;
   }
-  // Otherwise use npm package or downloaded binary
-  return getActualBinaryPath(BIN_DIR) || getBinaryPath(BIN_DIR);
+  // Otherwise use downloaded or npm binary (getActualBinaryPath checks both)
+  const actualPath = getActualBinaryPath(BIN_DIR);
+  if (actualPath) {
+    return actualPath;
+  }
+  // No binary found - return expected path for error messages
+  return getBinaryPath(BIN_DIR);
 }
 
 // Export for legacy compatibility
@@ -136,9 +178,41 @@ export { getBinaryStatus, BIN_DIR };
 // Base port for spawned agents
 export let nextAgentPort = 4100;
 
-// Increment port counter
-export function getNextPort(): number {
-  return nextAgentPort++;
+// Check if a port is available by trying to connect to it
+async function isPortAvailable(port: number): Promise<boolean> {
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 100);
+    try {
+      await fetch(`http://localhost:${port}/health`, { signal: controller.signal });
+      clearTimeout(timeout);
+      return false; // Port responded, something is running there
+    } catch (err: any) {
+      clearTimeout(timeout);
+      // Connection refused = port is available
+      // Abort error = port is available (timeout means nothing responded)
+      if (err?.code === "ECONNREFUSED" || err?.name === "AbortError") {
+        return true;
+      }
+      return true; // Assume available if we get other errors
+    }
+  } catch {
+    return true;
+  }
+}
+
+// Get next available port (checking that nothing is using it)
+export async function getNextPort(): Promise<number> {
+  const maxAttempts = 100; // Prevent infinite loop
+  for (let i = 0; i < maxAttempts; i++) {
+    const port = nextAgentPort++;
+    const available = await isPortAvailable(port);
+    if (available) {
+      return port;
+    }
+    console.log(`[port] Port ${port} in use, trying next...`);
+  }
+  throw new Error("Could not find available port after 100 attempts");
 }
 
 // ANSI color codes matching UI theme
@@ -331,7 +405,7 @@ if (hasRestarts) {
             continue;
           }
 
-          const port = getNextPort();
+          const port = await getNextPort();
           const result = await startMcpProcess(server.id, cmd, serverEnv, port);
 
           if (result.success) {

package/src/web/App.tsx

@@ -28,6 +28,7 @@ import {
   TelemetryPage,
   LoginPage,
 } from "./components";
+import { ApiDocsPage } from "./components/api/ApiDocsPage";
 
 function AppContent() {
   // Auth state
@@ -265,6 +266,8 @@ function AppContent() {
           {route === "mcp" && <McpPage />}
 
           {route === "telemetry" && <TelemetryPage />}
+
+          {route === "api" && <ApiDocsPage />}
         </main>
       </div>
 

package/src/web/components/agents/AgentPanel.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react";
 import { Chat } from "@apteva/apteva-kit";
 import { CloseIcon, MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon } from "../common/Icons";
 import { Select } from "../common/Select";
+import { useConfirm } from "../common/Modal";
+import { useAuth } from "../../context";
 import type { Agent, Provider, AgentFeatures, McpServer } from "../../types";
 
 type Tab = "chat" | "threads" | "tasks" | "memory" | "files" | "settings";
@@ -150,6 +152,7 @@ function ThreadsTab({ agent }: { agent: Agent }) {
   const [selectedThread, setSelectedThread] = useState<string | null>(null);
   const [messages, setMessages] = useState<Array<{ role: string; content: string; created_at: string }>>([]);
   const [loadingMessages, setLoadingMessages] = useState(false);
+  const { confirm, ConfirmDialog } = useConfirm();
 
   // Reset state when agent changes
   useEffect(() => {
@@ -200,7 +203,8 @@ function ThreadsTab({ agent }: { agent: Agent }) {
 
   const deleteThread = async (threadId: string, e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!confirm("Delete this thread?")) return;
+    const confirmed = await confirm("Delete this thread?", { confirmText: "Delete", title: "Delete Thread" });
+    if (!confirmed) return;
 
     try {
       await fetch(`/api/agents/${agent.id}/threads/${threadId}`, { method: "DELETE" });
@@ -242,6 +246,8 @@ function ThreadsTab({ agent }: { agent: Agent }) {
   if (selectedThread) {
     const selectedThreadData = threads.find(t => t.id === selectedThread);
     return (
+      <>
+      {ConfirmDialog}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header with back button */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-[#1a1a1a]">
@@ -284,7 +290,28 @@ function ThreadsTab({ agent }: { agent: Agent }) {
                         : "bg-[#1a1a1a] text-[#e0e0e0]"
                     }`}
                   >
-                    <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                    <div className="text-sm whitespace-pre-wrap">
+                      {typeof msg.content === "string"
+                        ? msg.content
+                        : Array.isArray(msg.content)
+                          ? msg.content.map((block: any, j: number) => (
+                              <div key={j}>
+                                {block.type === "text" && block.text}
+                                {block.type === "tool_use" && (
+                                  <div className="bg-[#222] p-2 rounded mt-1 text-xs text-[#888]">
+                                    🔧 Tool: {block.name}
+                                  </div>
+                                )}
+                                {block.type === "tool_result" && (
+                                  <div className="bg-[#222] p-2 rounded mt-1 text-xs text-[#888]">
+                                    📋 Result: {typeof block.content === "string" ? block.content.slice(0, 200) : "..."}
+                                  </div>
+                                )}
+                              </div>
+                            ))
+                          : JSON.stringify(msg.content)
+                      }
+                    </div>
                     <p className="text-xs text-[#666] mt-1">
                       {new Date(msg.created_at).toLocaleTimeString()}
                     </p>
@@ -295,11 +322,14 @@ function ThreadsTab({ agent }: { agent: Agent }) {
           )}
         </div>
       </div>
+      </>
     );
   }
 
   // Show threads list (full width)
   return (
+    <>
+    {ConfirmDialog}
     <div className="flex-1 overflow-auto">
       {threads.length === 0 ? (
         <div className="flex items-center justify-center h-full text-[#666]">
@@ -333,6 +363,7 @@ function ThreadsTab({ agent }: { agent: Agent }) {
         </div>
       )}
     </div>
+    </>
   );
 }
 
@@ -519,6 +550,7 @@ function MemoryTab({ agent }: { agent: Agent }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [enabled, setEnabled] = useState(false);
+  const { confirm, ConfirmDialog } = useConfirm();
 
   // Reset state when agent changes
   useEffect(() => {
@@ -561,7 +593,8 @@ function MemoryTab({ agent }: { agent: Agent }) {
   };
 
   const clearAllMemories = async () => {
-    if (!confirm("Clear all memories?")) return;
+    const confirmed = await confirm("Clear all memories?", { confirmText: "Clear", title: "Clear Memories" });
+    if (!confirmed) return;
     try {
       await fetch(`/api/agents/${agent.id}/memories`, { method: "DELETE" });
       setMemories([]);
@@ -617,6 +650,8 @@ function MemoryTab({ agent }: { agent: Agent }) {
   }
 
   return (
+    <>
+    {ConfirmDialog}
     <div className="flex-1 overflow-auto p-4">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-sm font-medium text-[#888]">Stored Memories ({memories.length})</h3>
@@ -672,6 +707,7 @@ function MemoryTab({ agent }: { agent: Agent }) {
         </div>
       )}
     </div>
+    </>
   );
 }
 
@@ -691,6 +727,7 @@ function FilesTab({ agent }: { agent: Agent }) {
   const [files, setFiles] = useState<AgentFile[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const { confirm, ConfirmDialog } = useConfirm();
 
   // Reset state when agent changes
   useEffect(() => {
@@ -723,7 +760,8 @@ function FilesTab({ agent }: { agent: Agent }) {
   }, [agent.id, agent.status]);
 
   const deleteFile = async (fileId: string) => {
-    if (!confirm("Delete this file?")) return;
+    const confirmed = await confirm("Delete this file?", { confirmText: "Delete", title: "Delete File" });
+    if (!confirmed) return;
     try {
       await fetch(`/api/agents/${agent.id}/files/${fileId}`, { method: "DELETE" });
       setFiles(prev => prev.filter(f => f.id !== fileId));
@@ -792,6 +830,8 @@ function FilesTab({ agent }: { agent: Agent }) {
   }
 
   return (
+    <>
+    {ConfirmDialog}
     <div className="flex-1 overflow-auto p-4">
       <div className="flex items-center justify-between mb-4">
         <h3 className="text-sm font-medium text-[#888]">Agent Files ({files.length})</h3>
@@ -841,6 +881,7 @@ function FilesTab({ agent }: { agent: Agent }) {
         </div>
       )}
     </div>
+    </>
   );
 }
 
@@ -850,6 +891,7 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   onUpdateAgent: (updates: Partial<Agent>) => Promise<{ error?: string }>;
   onDeleteAgent: () => void;
 }) {
+  const { authFetch } = useAuth();
   const [form, setForm] = useState({
     name: agent.name,
     provider: agent.provider,
@@ -867,7 +909,7 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   useEffect(() => {
     const fetchMcpServers = async () => {
       try {
-        const res = await fetch("/api/mcp/servers");
+        const res = await authFetch("/api/mcp/servers");
         const data = await res.json();
         setAvailableMcpServers(data.servers || []);
       } catch (e) {
@@ -875,7 +917,7 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
       }
     };
     fetchMcpServers();
-  }, []);
+  }, [authFetch]);
 
   // Reset form when agent changes
   useEffect(() => {
@@ -893,7 +935,7 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   const selectedProvider = providers.find(p => p.id === form.provider);
 
   const providerOptions = providers
-    .filter(p => p.configured)
+    .filter(p => p.hasKey && p.type === "llm")
     .map(p => ({ value: p.id, label: p.name }));
 
   const modelOptions = selectedProvider?.models.map(m => ({
@@ -1015,40 +1057,44 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
               </p>
             ) : (
               <div className="space-y-2">
-                {availableMcpServers.map(server => (
-                  <button
-                    key={server.id}
-                    type="button"
-                    onClick={() => toggleMcpServer(server.id)}
-                    className={`w-full flex items-center gap-3 p-3 rounded border text-left transition ${
-                      form.mcpServers.includes(server.id)
-                        ? "border-[#f97316] bg-[#f97316]/10"
-                        : "border-[#222] hover:border-[#333]"
-                    }`}
-                  >
-                    <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
-                      server.status === "running" ? "bg-green-400" : "bg-[#444]"
-                    }`} />
-                    <div className="flex-1 min-w-0">
-                      <div className={`text-sm font-medium ${form.mcpServers.includes(server.id) ? "text-[#f97316]" : ""}`}>
-                        {server.name}
+                {availableMcpServers.map(server => {
+                  const isRemote = server.type === "http" && server.url;
+                  const isAvailable = isRemote || server.status === "running";
+                  const serverInfo = isRemote
+                    ? `${server.source || "remote"} • http`
+                    : `${server.type} • ${server.package || server.command || "custom"}${server.status === "running" && server.port ? ` • :${server.port}` : ""}`;
+                  return (
+                    <button
+                      key={server.id}
+                      type="button"
+                      onClick={() => toggleMcpServer(server.id)}
+                      className={`w-full flex items-center gap-3 p-3 rounded border text-left transition ${
+                        form.mcpServers.includes(server.id)
+                          ? "border-[#f97316] bg-[#f97316]/10"
+                          : "border-[#222] hover:border-[#333]"
+                      }`}
+                    >
+                      <div className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                        isAvailable ? "bg-green-400" : "bg-[#444]"
+                      }`} />
+                      <div className="flex-1 min-w-0">
+                        <div className={`text-sm font-medium ${form.mcpServers.includes(server.id) ? "text-[#f97316]" : ""}`}>
+                          {server.name}
+                        </div>
+                        <div className="text-xs text-[#666]">{serverInfo}</div>
                       </div>
-                      <div className="text-xs text-[#666]">
-                        {server.type} • {server.package || server.command || "custom"}
-                        {server.status === "running" && server.port && ` • :${server.port}`}
+                      <div className={`text-xs px-2 py-0.5 rounded ${
+                        isAvailable
+                          ? "bg-green-500/20 text-green-400"
+                          : "bg-[#222] text-[#666]"
+                      }`}>
+                        {isRemote ? "remote" : server.status}
                       </div>
-                    </div>
-                    <div className={`text-xs px-2 py-0.5 rounded ${
-                      server.status === "running"
-                        ? "bg-green-500/20 text-green-400"
-                        : "bg-[#222] text-[#666]"
-                    }`}>
-                      {server.status}
-                    </div>
-                  </button>
-                ))}
+                    </button>
+                  );
+                })}
                 <p className="text-xs text-[#666] mt-2">
-                  Only running servers will be connected to the agent.
+                  Remote servers are always available. Local servers must be running.
                 </p>
               </div>
             )}