apteva 0.2.11 → 0.3.7

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

@@ -3,7 +3,8 @@ import { Modal } from "../common/Modal";
 import { Select } from "../common/Select";
 import { MemoryIcon, TasksIcon, FilesIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, MultiAgentIcon } from "../common/Icons";
 import { useProjects } from "../../context";
-import type { Provider, NewAgentForm, AgentFeatures } from "../../types";
+import type { Provider, NewAgentForm, AgentFeatures, AgentMode, MultiAgentConfig } from "../../types";
+import { getMultiAgentConfig } from "../../types";
 
 interface CreateAgentModalProps {
   form: NewAgentForm;
@@ -40,10 +41,12 @@ export function CreateAgentModal({
   const { projects, currentProjectId } = useProjects();
   const selectedProvider = providers.find(p => p.id === form.provider);
 
-  const providerOptions = configuredProviders.map(p => ({
-    value: p.id,
-    label: p.name,
-  }));
+  const providerOptions = configuredProviders
+    .filter(p => p.type === "llm")
+    .map(p => ({
+      value: p.id,
+      label: p.name,
+    }));
 
   const modelOptions = selectedProvider?.models.map(m => ({
     value: m.value,
@@ -51,10 +54,7 @@ export function CreateAgentModal({
     recommended: m.recommended,
   })) || [];
 
-  const projectOptions = [
-    { value: "", label: "No Project" },
-    ...projects.map(p => ({ value: p.id, label: p.name })),
-  ];
+  const projectOptions = projects.map(p => ({ value: p.id, label: p.name }));
 
   // Set default project from current selection (but not "unassigned" or "all")
   React.useEffect(() => {
@@ -64,11 +64,56 @@ export function CreateAgentModal({
   }, [currentProjectId]);
 
   const toggleFeature = (key: keyof AgentFeatures) => {
+    if (key === "agents") {
+      // Special handling for agents feature
+      const isEnabled = typeof form.features.agents === "boolean"
+        ? form.features.agents
+        : (form.features.agents as MultiAgentConfig)?.enabled ?? false;
+      if (isEnabled) {
+        // Turning off
+        onFormChange({ ...form, features: { ...form.features, agents: false } });
+      } else {
+        // Turning on with defaults - use project as group
+        onFormChange({
+          ...form,
+          features: {
+            ...form.features,
+            agents: { enabled: true, mode: "worker" as AgentMode, group: form.projectId || undefined },
+          },
+        });
+      }
+    } else {
+      onFormChange({
+        ...form,
+        features: {
+          ...form.features,
+          [key]: !form.features[key],
+        },
+      });
+    }
+  };
+
+  // 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, form.projectId);
+    return config.mode || "worker";
+  };
+
+  // Set multi-agent mode
+  const setAgentMode = (mode: AgentMode) => {
+    const currentConfig = getMultiAgentConfig(form.features, form.projectId);
     onFormChange({
       ...form,
       features: {
         ...form.features,
-        [key]: !form.features[key],
+        agents: { ...currentConfig, enabled: true, mode },
       },
     });
   };
@@ -77,7 +122,7 @@ export function CreateAgentModal({
     <Modal>
       <h2 className="text-xl font-semibold mb-4">Create New Agent</h2>
 
-      {configuredProviders.length === 0 ? (
+      {providerOptions.length === 0 ? (
         <NoProvidersMessage onGoToSettings={onGoToSettings} />
       ) : (
         <>
@@ -131,28 +176,129 @@ export function CreateAgentModal({
 
             <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 }) => {
+                  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 */}
+            {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</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 delegated tasks</div>
+                  </button>
+                </div>
+                {form.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={() => onFormChange({
+                    ...form,
+                    features: {
+                      ...form.features,
+                      builtinTools: {
+                        ...form.features.builtinTools,
+                        webSearch: !form.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={() => onFormChange({
+                    ...form,
+                    features: {
+                      ...form.features,
+                      builtinTools: {
+                        ...form.features.builtinTools,
+                        webFetch: !form.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>
+            )}
           </div>
 
           <div className="flex gap-3 mt-6">

package/src/web/components/common/Icons.tsx

@@ -102,6 +102,14 @@ export function McpIcon({ className = "w-4 h-4" }: IconProps) {
   );
 }
 
+export function SkillsIcon({ className = "w-4 h-4" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+    </svg>
+  );
+}
+
 export function RealtimeIcon({ className = "w-4 h-4" }: IconProps) {
   return (
     <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/src/web/components/common/index.ts

@@ -12,6 +12,7 @@ export {
   VisionIcon,
   OperatorIcon,
   McpIcon,
+  SkillsIcon,
   RealtimeIcon,
   TelemetryIcon,
 } from "./Icons";

package/src/web/components/index.ts

@@ -14,4 +14,5 @@ export { AgentCard, CreateAgentModal, AgentPanel, AgentsView } from "./agents";
 export { Dashboard } from "./dashboard";
 export { TasksPage } from "./tasks";
 export { McpPage } from "./mcp";
+export { SkillsPage } from "./skills/SkillsPage";
 export { TelemetryPage } from "./telemetry/TelemetryPage";

package/src/web/components/layout/Header.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useTelemetryContext, useAuth, useProjects } from "../../context";
 import { MenuIcon, ChevronDownIcon } from "../common/Icons";
+import { MetaAgentButton } from "../meta-agent/MetaAgent";
 
 interface HeaderProps {
   onMenuClick?: () => void;
@@ -9,7 +10,7 @@ interface HeaderProps {
 export function Header({ onMenuClick }: HeaderProps) {
   const { connected } = useTelemetryContext();
   const { user, logout } = useAuth();
-  const { projects, currentProjectId, currentProject, setCurrentProjectId, unassignedCount } = useProjects();
+  const { projects, currentProjectId, currentProject, setCurrentProjectId, unassignedCount, projectsEnabled } = useProjects();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showProjectMenu, setShowProjectMenu] = useState(false);
 
@@ -52,7 +53,7 @@ export function Header({ onMenuClick }: HeaderProps) {
           </div>
 
           {/* Project Selector */}
-          {projects.length > 0 && (
+          {projectsEnabled && projects.length > 0 && (
             <div className="relative ml-2 md:ml-4">
               <button
                 onClick={() => setShowProjectMenu(!showProjectMenu)}
@@ -122,6 +123,7 @@ export function Header({ onMenuClick }: HeaderProps) {
               {connected ? "Live" : "Offline"}
             </span>
           </div>
+          <MetaAgentButton />
           {user && (
             <div className="relative">
               <button

package/src/web/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { DashboardIcon, AgentsIcon, TasksIcon, McpIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
+import { DashboardIcon, AgentsIcon, TasksIcon, McpIcon, SkillsIcon, TelemetryIcon, ApiIcon, SettingsIcon, CloseIcon } from "../common/Icons";
 import type { Route } from "../../types";
 
 interface SidebarProps {
@@ -76,6 +76,12 @@ export function Sidebar({ route, agentCount, taskCount, onNavigate, isOpen, onCl
             active={route === "mcp"}
             onClick={() => handleNavigate("mcp")}
           />
+          <NavButton
+            icon={<SkillsIcon />}
+            label="Skills"
+            active={route === "skills"}
+            onClick={() => handleNavigate("skills")}
+          />
           <NavButton
             icon={<TelemetryIcon />}
             label="Telemetry"