apteva 0.2.11 → 0.3.7

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

@@ -4,7 +4,8 @@ import { CloseIcon, MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, Re
 import { Select } from "../common/Select";
 import { useConfirm } from "../common/Modal";
 import { useAuth } from "../../context";
-import type { Agent, Provider, AgentFeatures, McpServer } from "../../types";
+import type { Agent, Provider, AgentFeatures, McpServer, SkillSummary, AgentMode, MultiAgentConfig } from "../../types";
+import { getMultiAgentConfig } from "../../types";
 
 type Tab = "chat" | "threads" | "tasks" | "memory" | "files" | "settings";
 
@@ -885,25 +886,41 @@ function FilesTab({ agent }: { agent: Agent }) {
   );
 }
 
+interface AvailableSkill {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  enabled: boolean;
+  project_id: string | null;
+}
+
 function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   agent: Agent;
   providers: Provider[];
   onUpdateAgent: (updates: Partial<Agent>) => Promise<{ error?: string }>;
   onDeleteAgent: () => void;
 }) {
-  const { authFetch } = useAuth();
+  const { authFetch, isDev } = useAuth();
   const [form, setForm] = useState({
     name: agent.name,
     provider: agent.provider,
     model: agent.model,
     systemPrompt: agent.systemPrompt,
-    features: { ...agent.features },
+    features: {
+      ...agent.features,
+      builtinTools: agent.features.builtinTools || { webSearch: false, webFetch: false },
+    },
     mcpServers: [...(agent.mcpServers || [])],
+    skills: [...(agent.skills || [])],
   });
   const [saving, setSaving] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
   const [availableMcpServers, setAvailableMcpServers] = useState<McpServer[]>([]);
+  const [availableSkills, setAvailableSkills] = useState<AvailableSkill[]>([]);
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [showApiKey, setShowApiKey] = useState(false);
 
   // Fetch available MCP servers
   useEffect(() => {
@@ -919,6 +936,37 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
     fetchMcpServers();
   }, [authFetch]);
 
+  // Fetch API key (dev mode only)
+  useEffect(() => {
+    if (!isDev) return;
+    const fetchApiKey = async () => {
+      try {
+        const res = await authFetch(`/api/agents/${agent.id}/api-key`);
+        if (res.ok) {
+          const data = await res.json();
+          setApiKey(data.apiKey);
+        }
+      } catch (e) {
+        // Ignore - not critical
+      }
+    };
+    fetchApiKey();
+  }, [agent.id, isDev, authFetch]);
+
+  // Fetch available skills
+  useEffect(() => {
+    const fetchSkills = async () => {
+      try {
+        const res = await authFetch("/api/skills");
+        const data = await res.json();
+        setAvailableSkills(data.skills || []);
+      } catch (e) {
+        console.error("Failed to fetch skills:", e);
+      }
+    };
+    fetchSkills();
+  }, [authFetch]);
+
   // Reset form when agent changes
   useEffect(() => {
     setForm({
@@ -926,8 +974,12 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
       provider: agent.provider,
       model: agent.model,
       systemPrompt: agent.systemPrompt,
-      features: { ...agent.features },
+      features: {
+        ...agent.features,
+        builtinTools: agent.features.builtinTools || { webSearch: false, webFetch: false },
+      },
       mcpServers: [...(agent.mcpServers || [])],
+      skills: [...(agent.skills || [])],
     });
     setMessage(null);
   }, [agent.id]);
@@ -951,10 +1003,63 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
   };
 
   const toggleFeature = (key: keyof AgentFeatures) => {
-    setForm(prev => ({
-      ...prev,
-      features: { ...prev.features, [key]: !prev.features[key] },
-    }));
+    if (key === "agents") {
+      // Special handling for agents feature - convert to MultiAgentConfig
+      const current = prev => {
+        const agentConfig = getMultiAgentConfig(prev.features, agent.projectId);
+        return agentConfig.enabled;
+      };
+      setForm(prev => {
+        const isEnabled = typeof prev.features.agents === "boolean"
+          ? prev.features.agents
+          : (prev.features.agents as MultiAgentConfig)?.enabled ?? false;
+        if (isEnabled) {
+          // Turning off - set to false
+          return { ...prev, features: { ...prev.features, agents: false } };
+        } else {
+          // Turning on - set to config with defaults
+          return {
+            ...prev,
+            features: {
+              ...prev.features,
+              agents: { enabled: true, mode: "worker" as AgentMode, group: agent.projectId || undefined },
+            },
+          };
+        }
+      });
+    } else {
+      setForm(prev => ({
+        ...prev,
+        features: { ...prev.features, [key]: !prev.features[key] },
+      }));
+    }
+  };
+
+  // Set multi-agent mode
+  const setAgentMode = (mode: AgentMode) => {
+    setForm(prev => {
+      const currentConfig = getMultiAgentConfig(prev.features, agent.projectId);
+      return {
+        ...prev,
+        features: {
+          ...prev.features,
+          agents: { ...currentConfig, enabled: true, mode },
+        },
+      };
+    });
+  };
+
+  // Helper to check if agents feature is enabled
+  const isAgentsEnabled = () => {
+    const agentsVal = form.features.agents;
+    if (typeof agentsVal === "boolean") return agentsVal;
+    return (agentsVal as MultiAgentConfig)?.enabled ?? false;
+  };
+
+  // Get current agent mode
+  const getAgentMode = (): AgentMode => {
+    const config = getMultiAgentConfig(form.features, agent.projectId);
+    return config.mode || "worker";
   };
 
   const toggleMcpServer = (serverId: string) => {
@@ -966,6 +1071,15 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
     }));
   };
 
+  const toggleSkill = (skillId: string) => {
+    setForm(prev => ({
+      ...prev,
+      skills: prev.skills.includes(skillId)
+        ? prev.skills.filter(id => id !== skillId)
+        : [...prev.skills, skillId],
+    }));
+  };
+
   const handleSave = async () => {
     setSaving(true);
     setMessage(null);
@@ -985,7 +1099,8 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
     form.model !== agent.model ||
     form.systemPrompt !== agent.systemPrompt ||
     JSON.stringify(form.features) !== JSON.stringify(agent.features) ||
-    JSON.stringify(form.mcpServers.sort()) !== JSON.stringify((agent.mcpServers || []).sort());
+    JSON.stringify(form.mcpServers.sort()) !== JSON.stringify((agent.mcpServers || []).sort()) ||
+    JSON.stringify(form.skills.sort()) !== JSON.stringify((agent.skills || []).sort());
 
   return (
     <div className="flex-1 overflow-auto p-4">
@@ -1025,28 +1140,130 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
 
         <FormField label="Features">
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => (
+            {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => {
+              // For agents feature, check the enabled property of the config
+              const isEnabled = key === "agents" ? isAgentsEnabled() : !!form.features[key];
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => toggleFeature(key)}
+                  className={`flex items-center gap-3 p-3 rounded border text-left transition ${
+                    isEnabled
+                      ? "border-[#f97316] bg-[#f97316]/10"
+                      : "border-[#222] hover:border-[#333]"
+                  }`}
+                >
+                  <Icon className={`w-5 h-5 flex-shrink-0 ${isEnabled ? "text-[#f97316]" : "text-[#666]"}`} />
+                  <div className="flex-1 min-w-0">
+                    <div className={`text-sm font-medium ${isEnabled ? "text-[#f97316]" : ""}`}>
+                      {label}
+                    </div>
+                    <div className="text-xs text-[#666]">{description}</div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </FormField>
+
+        {/* Multi-Agent Mode Selection - shown when agents is enabled */}
+        {isAgentsEnabled() && (
+          <FormField label="Multi-Agent Mode">
+            <div className="flex gap-2">
               <button
-                key={key}
                 type="button"
-                onClick={() => toggleFeature(key)}
-                className={`flex items-center gap-3 p-3 rounded border text-left transition ${
-                  form.features[key]
+                onClick={() => setAgentMode("coordinator")}
+                className={`flex-1 p-3 rounded border text-left transition ${
+                  getAgentMode() === "coordinator"
                     ? "border-[#f97316] bg-[#f97316]/10"
                     : "border-[#222] hover:border-[#333]"
                 }`}
               >
-                <Icon className={`w-5 h-5 flex-shrink-0 ${form.features[key] ? "text-[#f97316]" : "text-[#666]"}`} />
-                <div className="flex-1 min-w-0">
-                  <div className={`text-sm font-medium ${form.features[key] ? "text-[#f97316]" : ""}`}>
-                    {label}
-                  </div>
-                  <div className="text-xs text-[#666]">{description}</div>
+                <div className={`text-sm font-medium ${getAgentMode() === "coordinator" ? "text-[#f97316]" : ""}`}>
+                  Coordinator
+                </div>
+                <div className="text-xs text-[#666]">Orchestrates and delegates to other agents</div>
+              </button>
+              <button
+                type="button"
+                onClick={() => setAgentMode("worker")}
+                className={`flex-1 p-3 rounded border text-left transition ${
+                  getAgentMode() === "worker"
+                    ? "border-[#f97316] bg-[#f97316]/10"
+                    : "border-[#222] hover:border-[#333]"
+                }`}
+              >
+                <div className={`text-sm font-medium ${getAgentMode() === "worker" ? "text-[#f97316]" : ""}`}>
+                  Worker
                 </div>
+                <div className="text-xs text-[#666]">Receives tasks from coordinators</div>
               </button>
-            ))}
+            </div>
+            {agent.projectId && (
+              <p className="text-xs text-[#555] mt-2">
+                Group: Using project as agent group
+              </p>
+            )}
+          </FormField>
+        )}
+
+        {/* Agent Built-in Tools - Anthropic only */}
+        {form.provider === "anthropic" && (
+        <FormField label="Agent Built-in Tools">
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => setForm(prev => ({
+                ...prev,
+                features: {
+                  ...prev.features,
+                  builtinTools: {
+                    ...prev.features.builtinTools,
+                    webSearch: !prev.features.builtinTools?.webSearch,
+                  },
+                },
+              }))}
+              className={`flex items-center gap-2 px-3 py-2 rounded border transition ${
+                form.features.builtinTools?.webSearch
+                  ? "border-[#f97316] bg-[#f97316]/10 text-[#f97316]"
+                  : "border-[#222] hover:border-[#333] text-[#888]"
+              }`}
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+              <span className="text-sm">Web Search</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => setForm(prev => ({
+                ...prev,
+                features: {
+                  ...prev.features,
+                  builtinTools: {
+                    ...prev.features.builtinTools,
+                    webFetch: !prev.features.builtinTools?.webFetch,
+                  },
+                },
+              }))}
+              className={`flex items-center gap-2 px-3 py-2 rounded border transition ${
+                form.features.builtinTools?.webFetch
+                  ? "border-[#f97316] bg-[#f97316]/10 text-[#f97316]"
+                  : "border-[#222] hover:border-[#333] text-[#888]"
+              }`}
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+              </svg>
+              <span className="text-sm">Web Fetch</span>
+            </button>
           </div>
+          <p className="text-xs text-[#555] mt-2">
+            Provider-native tools for real-time web access
+          </p>
         </FormField>
+        )}
 
         {/* MCP Server Selection - shown when MCP is enabled */}
         {form.features.mcp && (
@@ -1057,7 +1274,9 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
               </p>
             ) : (
               <div className="space-y-2">
-                {availableMcpServers.map(server => {
+                {availableMcpServers
+                  .filter(server => server.project_id === null || server.project_id === agent.projectId)
+                  .map(server => {
                   const isRemote = server.type === "http" && server.url;
                   const isAvailable = isRemote || server.status === "running";
                   const serverInfo = isRemote
@@ -1078,8 +1297,13 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
                         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 className="flex items-center gap-2">
+                          <span className={`text-sm font-medium ${form.mcpServers.includes(server.id) ? "text-[#f97316]" : ""}`}>
+                            {server.name}
+                          </span>
+                          {server.project_id === null && (
+                            <span className="text-[10px] text-[#666] bg-[#1a1a1a] px-1.5 py-0.5 rounded">Global</span>
+                          )}
                         </div>
                         <div className="text-xs text-[#666]">{serverInfo}</div>
                       </div>
@@ -1101,6 +1325,50 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           </FormField>
         )}
 
+        {/* Skills Selection */}
+        <FormField label="Skills">
+          {availableSkills.length === 0 ? (
+            <p className="text-sm text-[#666]">
+              No skills configured. Add skills in the Skills page first.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {availableSkills
+                .filter(s => s.enabled && (s.project_id === null || s.project_id === agent.projectId))
+                .map(skill => (
+                <button
+                  key={skill.id}
+                  type="button"
+                  onClick={() => toggleSkill(skill.id)}
+                  className={`w-full flex items-center gap-3 p-3 rounded border text-left transition ${
+                    form.skills.includes(skill.id)
+                      ? "border-[#f97316] bg-[#f97316]/10"
+                      : "border-[#222] hover:border-[#333]"
+                  }`}
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className={`text-sm font-medium ${form.skills.includes(skill.id) ? "text-[#f97316]" : ""}`}>
+                        {skill.name}
+                      </span>
+                      {skill.project_id === null && (
+                        <span className="text-[10px] text-[#666] bg-[#1a1a1a] px-1.5 py-0.5 rounded">Global</span>
+                      )}
+                    </div>
+                    <div className="text-xs text-[#666]">{skill.description}</div>
+                  </div>
+                  <div className="text-xs px-2 py-0.5 rounded bg-[#222] text-[#666]">
+                    v{skill.version}
+                  </div>
+                </button>
+              ))}
+              <p className="text-xs text-[#666] mt-2">
+                Skills provide reusable instructions for the agent.
+              </p>
+            </div>
+          )}
+        </FormField>
+
         {message && (
           <div className={`text-sm px-3 py-2 rounded ${
             message.type === "success"
@@ -1125,6 +1393,47 @@ function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
           </p>
         )}
 
+        {/* Developer Info (dev mode only) */}
+        {isDev && apiKey && (
+          <div className="mt-8 pt-6 border-t border-[#222]">
+            <p className="text-sm text-[#666] mb-3">Developer Info</p>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-[#666]">Agent ID</span>
+                <code className="text-xs bg-[#1a1a1a] px-2 py-1 rounded text-[#888]">{agent.id}</code>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-[#666]">Port</span>
+                <code className="text-xs bg-[#1a1a1a] px-2 py-1 rounded text-[#888]">{agent.port || "N/A"}</code>
+              </div>
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-[#666]">API Key</span>
+                  <button
+                    onClick={() => setShowApiKey(!showApiKey)}
+                    className="text-xs text-[#f97316] hover:text-[#fb923c]"
+                  >
+                    {showApiKey ? "Hide" : "Show"}
+                  </button>
+                </div>
+                {showApiKey && (
+                  <code className="text-xs bg-[#1a1a1a] px-2 py-1 rounded text-[#888] break-all">
+                    {apiKey}
+                  </code>
+                )}
+              </div>
+              {agent.status === "running" && agent.port && (
+                <div className="flex flex-col gap-1 mt-2">
+                  <span className="text-xs text-[#666]">Test with curl</span>
+                  <code className="text-xs bg-[#1a1a1a] px-2 py-1.5 rounded text-[#666] break-all">
+                    curl -H "X-API-Key: {showApiKey ? apiKey : "***"}" http://localhost:{agent.port}/config
+                  </code>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
         {/* Danger Zone */}
         <div className="mt-8 pt-6 border-t border-[#222]">
           <p className="text-sm text-[#666] mb-3">Danger Zone</p>

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

@@ -90,7 +90,7 @@ export function AgentsView({
         ) : filteredAgents.length === 0 ? (
           <EmptyState onNewAgent={onNewAgent} canCreateAgent={canCreateAgent} hasProjectFilter={currentProjectId !== null} />
         ) : (
-          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3 auto-rows-fr">
             {filteredAgents.map((agent) => (
               <AgentCard
                 key={agent.id}