apteva 0.2.11 → 0.3.7

package/src/server.ts

@@ -127,13 +127,26 @@ async function cleanupOrphanedProcesses(): Promise<void> {
     try {
       const res = await fetch(`http://localhost:${port}/health`, { signal: AbortSignal.timeout(200) });
       if (res.ok) {
-        // Orphaned process on this port - shut it down
+        // Orphaned process on this port - shut it down gracefully first
         try {
           await fetch(`http://localhost:${port}/shutdown`, { method: "POST", signal: AbortSignal.timeout(500) });
-          cleaned++;
+          await new Promise(r => setTimeout(r, 500)); // Wait for graceful shutdown
         } catch {
-          // Shutdown failed - will be handled when agent tries to start
+          // Graceful shutdown failed
         }
+
+        // Check if still running and force kill if needed
+        try {
+          const check = await fetch(`http://localhost:${port}/health`, { signal: AbortSignal.timeout(200) });
+          if (check.ok) {
+            // Still running - force kill via lsof
+            const { execSync } = await import("child_process");
+            execSync(`lsof -ti :${port} | xargs -r kill -9 2>/dev/null || true`, { stdio: "ignore" });
+          }
+        } catch {
+          // Not responding anymore - good
+        }
+        cleaned++;
       }
     } catch {
       // Port not in use - good
@@ -154,6 +167,44 @@ export const agentProcesses: Map<string, { proc: Subprocess; port: number }> = n
 // Track agents currently being started (to prevent race conditions)
 export const agentsStarting: Set<string> = new Set();
 
+// Graceful shutdown handler - stop all agents when server exits
+async function shutdownAllAgents() {
+  if (agentProcesses.size === 0) return;
+
+  console.log(`\n  Stopping ${agentProcesses.size} running agent(s)...`);
+
+  for (const [agentId, { proc, port }] of agentProcesses) {
+    try {
+      // Try graceful shutdown
+      await fetch(`http://localhost:${port}/shutdown`, {
+        method: "POST",
+        signal: AbortSignal.timeout(1000),
+      }).catch(() => {});
+
+      proc.kill();
+      AgentDB.setStatus(agentId, "stopped");
+    } catch {
+      // Ignore errors during shutdown
+    }
+  }
+  agentProcesses.clear();
+}
+
+// Handle process termination signals
+let shuttingDown = false;
+process.on("SIGINT", async () => {
+  if (shuttingDown) return;
+  shuttingDown = true;
+  await shutdownAllAgents();
+  process.exit(0);
+});
+process.on("SIGTERM", async () => {
+  if (shuttingDown) return;
+  shuttingDown = true;
+  await shutdownAllAgents();
+  process.exit(0);
+});
+
 // Binary path - can be overridden via environment variable, or found from npm/downloaded
 export function getBinaryPathForAgent(): string {
   // Environment override takes priority
@@ -175,8 +226,8 @@ export const BINARY_PATH = getBinaryPathForAgent();
 // Export binary status function for API
 export { getBinaryStatus, BIN_DIR };
 
-// Base port for spawned agents
-export let nextAgentPort = 4100;
+// Base port for MCP server proxies (separate range from agents which use 4100-4199)
+export let nextMcpPort = 4200;
 
 // Check if a port is available by trying to connect to it
 async function isPortAvailable(port: number): Promise<boolean> {
@@ -201,11 +252,11 @@ async function isPortAvailable(port: number): Promise<boolean> {
   }
 }
 
-// Get next available port (checking that nothing is using it)
+// Get next available port for MCP servers (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 port = nextMcpPort++;
     const available = await isPortAvailable(port);
     if (available) {
       return port;

package/src/web/App.tsx

@@ -25,10 +25,12 @@ import {
   Dashboard,
   TasksPage,
   McpPage,
+  SkillsPage,
   TelemetryPage,
   LoginPage,
 } from "./components";
 import { ApiDocsPage } from "./components/api/ApiDocsPage";
+import { MetaAgentProvider, MetaAgentPanel } from "./components/meta-agent/MetaAgent";
 
 function AppContent() {
   // Auth state
@@ -63,6 +65,9 @@ function AppContent() {
     fetchProviders,
   } = useProviders(shouldFetchData);
 
+  // Filter to only LLM providers for agent creation
+  const llmProviders = configuredProviders.filter(p => p.type === "llm");
+
   // UI state
   const [showCreate, setShowCreate] = useState(false);
   const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
@@ -99,12 +104,14 @@ function AppContent() {
     provider: "",
     systemPrompt: "You are a helpful assistant.",
     features: { ...DEFAULT_FEATURES },
+    mcpServers: [],
+    skills: [],
   });
 
   // Set default provider when providers are loaded
   useEffect(() => {
-    if (configuredProviders.length > 0 && !newAgent.provider) {
-      const defaultProvider = configuredProviders[0];
+    if (llmProviders.length > 0 && !newAgent.provider) {
+      const defaultProvider = llmProviders[0];
       const defaultModel = defaultProvider.models.find(m => m.recommended)?.value || defaultProvider.models[0]?.value || "";
       setNewAgent(prev => ({
         ...prev,
@@ -112,7 +119,7 @@ function AppContent() {
         model: defaultModel,
       }));
     }
-  }, [configuredProviders, newAgent.provider]);
+  }, [llmProviders, newAgent.provider]);
 
   // Update selected agent when agents list changes
   useEffect(() => {
@@ -140,7 +147,7 @@ function AppContent() {
     if (!newAgent.name) return;
     await createAgent(newAgent);
     await refreshProjects(); // Refresh project agent counts
-    const defaultProvider = configuredProviders[0];
+    const defaultProvider = llmProviders[0];
     const defaultModel = defaultProvider?.models.find(m => m.recommended)?.value || defaultProvider?.models[0]?.value || "";
     setNewAgent({
       name: "",
@@ -148,6 +155,8 @@ function AppContent() {
       provider: defaultProvider?.id || "",
       systemPrompt: "You are a helpful assistant.",
       features: { ...DEFAULT_FEATURES },
+      mcpServers: [],
+      skills: [],
     });
     setShowCreate(false);
   };
@@ -246,7 +255,7 @@ function AppContent() {
               onDeleteAgent={handleDeleteAgent}
               onUpdateAgent={updateAgent}
               onNewAgent={() => setShowCreate(true)}
-              canCreateAgent={configuredProviders.length > 0}
+              canCreateAgent={llmProviders.length > 0}
             />
           )}
 
@@ -265,6 +274,8 @@ function AppContent() {
 
           {route === "mcp" && <McpPage />}
 
+          {route === "skills" && <SkillsPage />}
+
           {route === "telemetry" && <TelemetryPage />}
 
           {route === "api" && <ApiDocsPage />}
@@ -286,6 +297,9 @@ function AppContent() {
           }}
         />
       )}
+
+      {/* Meta Agent - side drawer */}
+      <MetaAgentPanel />
     </div>
   );
 }
@@ -295,9 +309,11 @@ function App() {
   return (
     <AuthProvider>
       <ProjectProvider>
-        <TelemetryProvider>
-          <AppContent />
-        </TelemetryProvider>
+        <MetaAgentProvider>
+          <TelemetryProvider>
+            <AppContent />
+          </TelemetryProvider>
+        </MetaAgentProvider>
       </ProjectProvider>
     </AuthProvider>
   );

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon } from "../common/Icons";
+import { MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon, SkillsIcon } from "../common/Icons";
 import { useAgentActivity, useProjects } from "../../context";
 import type { Agent, AgentFeatures } from "../../types";
 
@@ -25,6 +25,7 @@ const FEATURE_ICONS: { key: keyof AgentFeatures; icon: React.ComponentType<{ cla
 export function AgentCard({ agent, selected, onSelect, onToggle, showProject }: AgentCardProps) {
   const enabledFeatures = FEATURE_ICONS.filter(f => agent.features?.[f.key]);
   const mcpServers = agent.mcpServerDetails || [];
+  const skills = agent.skillDetails || [];
   const { isActive, type } = useAgentActivity(agent.id);
   const { projects } = useProjects();
   const project = agent.projectId ? projects.find(p => p.id === agent.projectId) : null;
@@ -32,7 +33,7 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
   return (
     <div
       onClick={onSelect}
-      className={`bg-[#111] rounded p-5 border transition cursor-pointer ${
+      className={`bg-[#111] rounded p-5 border transition cursor-pointer flex flex-col h-full ${
         selected
           ? 'border-[#f97316]'
           : 'border-[#1a1a1a] hover:border-[#333]'
@@ -73,30 +74,54 @@ export function AgentCard({ agent, selected, onSelect, onToggle, showProject }:
       {/* MCP Servers */}
       {mcpServers.length > 0 && (
         <div className="flex flex-wrap gap-1.5 mb-3">
-          {mcpServers.map((server) => (
+          {mcpServers.map((server) => {
+            // HTTP/remote servers are always available
+            const isAvailable = (server.type === "http" && server.url) || server.status === "running";
+            return (
+              <span
+                key={server.id}
+                className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
+                  isAvailable
+                    ? "bg-green-500/10 text-green-400"
+                    : "bg-[#222] text-[#666]"
+                }`}
+                title={`MCP: ${server.name} (${isAvailable ? "available" : server.status})`}
+              >
+                <McpIcon className="w-3 h-3" />
+                {server.name}
+              </span>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Skills */}
+      {skills.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-3">
+          {skills.map((skill) => (
             <span
-              key={server.id}
+              key={skill.id}
               className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${
-                server.status === "running"
-                  ? "bg-green-500/10 text-green-400"
+                skill.enabled
+                  ? "bg-purple-500/10 text-purple-400"
                   : "bg-[#222] text-[#666]"
               }`}
-              title={`MCP: ${server.name} (${server.status})`}
+              title={`Skill: ${skill.name} v${skill.version}`}
             >
-              <McpIcon className="w-3 h-3" />
-              {server.name}
+              <SkillsIcon className="w-3 h-3" />
+              {skill.name}
             </span>
           ))}
         </div>
       )}
 
-      <p className="text-sm text-[#666] line-clamp-2 mb-4">
+      <p className="text-sm text-[#666] line-clamp-2 mb-4 flex-1">
         {agent.systemPrompt}
       </p>
 
       <button
         onClick={onToggle}
-        className={`w-full px-3 py-1.5 rounded text-sm font-medium transition ${
+        className={`w-full px-3 py-1.5 rounded text-sm font-medium transition mt-auto ${
           agent.status === "running"
             ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
             : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"