apteva 0.2.3 → 0.2.6

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

@@ -0,0 +1,381 @@
+import React, { useState, useEffect } from "react";
+import { Chat } from "@apteva/apteva-kit";
+import { CloseIcon, MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon } from "../common/Icons";
+import { Select } from "../common/Select";
+import type { Agent, Provider, AgentFeatures, McpServer } from "../../types";
+
+type Tab = "chat" | "settings";
+
+interface AgentPanelProps {
+  agent: Agent;
+  providers: Provider[];
+  onClose: () => void;
+  onStartAgent: (e?: React.MouseEvent) => void;
+  onUpdateAgent: (updates: Partial<Agent>) => Promise<{ error?: string }>;
+  onDeleteAgent: () => void;
+}
+
+const FEATURE_CONFIG = [
+  { key: "memory" as keyof AgentFeatures, label: "Memory", description: "Persistent recall", icon: MemoryIcon },
+  { key: "tasks" as keyof AgentFeatures, label: "Tasks", description: "Schedule and execute tasks", icon: TasksIcon },
+  { key: "vision" as keyof AgentFeatures, label: "Vision", description: "Process images and PDFs", icon: VisionIcon },
+  { key: "operator" as keyof AgentFeatures, label: "Operator", description: "Browser automation", icon: OperatorIcon },
+  { key: "mcp" as keyof AgentFeatures, label: "MCP", description: "External tools/services", icon: McpIcon },
+  { key: "realtime" as keyof AgentFeatures, label: "Realtime", description: "Voice conversations", icon: RealtimeIcon },
+];
+
+export function AgentPanel({ agent, providers, onClose, onStartAgent, onUpdateAgent, onDeleteAgent }: AgentPanelProps) {
+  const [activeTab, setActiveTab] = useState<Tab>("chat");
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-hidden bg-[#0a0a0a] border-l border-[#1a1a1a]">
+      {/* Header with tabs */}
+      <div className="border-b border-[#1a1a1a] flex items-center justify-between px-4">
+        <div className="flex gap-1">
+          <TabButton active={activeTab === "chat"} onClick={() => setActiveTab("chat")}>
+            Chat
+          </TabButton>
+          <TabButton active={activeTab === "settings"} onClick={() => setActiveTab("settings")}>
+            Settings
+          </TabButton>
+        </div>
+        <button
+          onClick={onClose}
+          className="text-[#666] hover:text-[#e0e0e0] transition p-2"
+        >
+          <CloseIcon />
+        </button>
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+        {activeTab === "chat" && (
+          <ChatTab agent={agent} onStartAgent={onStartAgent} />
+        )}
+        {activeTab === "settings" && (
+          <SettingsTab agent={agent} providers={providers} onUpdateAgent={onUpdateAgent} onDeleteAgent={onDeleteAgent} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-4 py-3 text-sm font-medium border-b-2 transition ${
+        active
+          ? "border-[#f97316] text-[#e0e0e0]"
+          : "border-transparent text-[#666] hover:text-[#888]"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function ChatTab({ agent, onStartAgent }: { agent: Agent; onStartAgent: (e?: React.MouseEvent) => void }) {
+  if (agent.status === "running" && agent.port) {
+    return (
+      <Chat
+        agentId="default"
+        apiUrl={`/api/agents/${agent.id}`}
+        placeholder="Message this agent..."
+        context={agent.systemPrompt}
+        variant="terminal"
+        headerTitle={agent.name}
+      />
+    );
+  }
+
+  return (
+    <div className="flex-1 flex items-center justify-center text-[#666]">
+      <div className="text-center">
+        <p className="text-lg mb-2">Agent is not running</p>
+        <button
+          onClick={onStartAgent}
+          className="bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30 px-4 py-2 rounded font-medium transition"
+        >
+          Start Agent
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function SettingsTab({ agent, providers, onUpdateAgent, onDeleteAgent }: {
+  agent: Agent;
+  providers: Provider[];
+  onUpdateAgent: (updates: Partial<Agent>) => Promise<{ error?: string }>;
+  onDeleteAgent: () => void;
+}) {
+  const [form, setForm] = useState({
+    name: agent.name,
+    provider: agent.provider,
+    model: agent.model,
+    systemPrompt: agent.systemPrompt,
+    features: { ...agent.features },
+    mcpServers: [...(agent.mcpServers || [])],
+  });
+  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[]>([]);
+
+  // Fetch available MCP servers
+  useEffect(() => {
+    const fetchMcpServers = async () => {
+      try {
+        const res = await fetch("/api/mcp/servers");
+        const data = await res.json();
+        setAvailableMcpServers(data.servers || []);
+      } catch (e) {
+        console.error("Failed to fetch MCP servers:", e);
+      }
+    };
+    fetchMcpServers();
+  }, []);
+
+  // Reset form when agent changes
+  useEffect(() => {
+    setForm({
+      name: agent.name,
+      provider: agent.provider,
+      model: agent.model,
+      systemPrompt: agent.systemPrompt,
+      features: { ...agent.features },
+      mcpServers: [...(agent.mcpServers || [])],
+    });
+    setMessage(null);
+  }, [agent.id]);
+
+  const selectedProvider = providers.find(p => p.id === form.provider);
+
+  const providerOptions = providers
+    .filter(p => p.configured)
+    .map(p => ({ value: p.id, label: p.name }));
+
+  const modelOptions = selectedProvider?.models.map(m => ({
+    value: m.value,
+    label: m.label,
+    recommended: m.recommended,
+  })) || [];
+
+  const handleProviderChange = (providerId: string) => {
+    const provider = providers.find(p => p.id === providerId);
+    const defaultModel = provider?.models.find(m => m.recommended)?.value || provider?.models[0]?.value || "";
+    setForm(prev => ({ ...prev, provider: providerId, model: defaultModel }));
+  };
+
+  const toggleFeature = (key: keyof AgentFeatures) => {
+    setForm(prev => ({
+      ...prev,
+      features: { ...prev.features, [key]: !prev.features[key] },
+    }));
+  };
+
+  const toggleMcpServer = (serverId: string) => {
+    setForm(prev => ({
+      ...prev,
+      mcpServers: prev.mcpServers.includes(serverId)
+        ? prev.mcpServers.filter(id => id !== serverId)
+        : [...prev.mcpServers, serverId],
+    }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage(null);
+    const result = await onUpdateAgent(form);
+    setSaving(false);
+    if (result.error) {
+      setMessage({ type: "error", text: result.error });
+    } else {
+      setMessage({ type: "success", text: "Settings saved" });
+      setTimeout(() => setMessage(null), 2000);
+    }
+  };
+
+  const hasChanges =
+    form.name !== agent.name ||
+    form.provider !== agent.provider ||
+    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());
+
+  return (
+    <div className="flex-1 overflow-auto p-4">
+      <div className="space-y-4">
+        <FormField label="Name">
+          <input
+            type="text"
+            value={form.name}
+            onChange={(e) => setForm(prev => ({ ...prev, name: e.target.value }))}
+            className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 focus:outline-none focus:border-[#f97316] text-[#e0e0e0]"
+          />
+        </FormField>
+
+        <FormField label="Provider">
+          <Select
+            value={form.provider}
+            options={providerOptions}
+            onChange={handleProviderChange}
+          />
+        </FormField>
+
+        <FormField label="Model">
+          <Select
+            value={form.model}
+            options={modelOptions}
+            onChange={(value) => setForm(prev => ({ ...prev, model: value }))}
+          />
+        </FormField>
+
+        <FormField label="System Prompt">
+          <textarea
+            value={form.systemPrompt}
+            onChange={(e) => setForm(prev => ({ ...prev, systemPrompt: e.target.value }))}
+            className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 h-24 resize-none focus:outline-none focus:border-[#f97316] text-[#e0e0e0]"
+          />
+        </FormField>
+
+        <FormField label="Features">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => (
+              <button
+                key={key}
+                type="button"
+                onClick={() => toggleFeature(key)}
+                className={`flex items-center gap-3 p-3 rounded border text-left transition ${
+                  form.features[key]
+                    ? "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>
+              </button>
+            ))}
+          </div>
+        </FormField>
+
+        {/* MCP Server Selection - shown when MCP is enabled */}
+        {form.features.mcp && (
+          <FormField label="MCP Servers">
+            {availableMcpServers.length === 0 ? (
+              <p className="text-sm text-[#666]">
+                No MCP servers configured. Add servers in the MCP page first.
+              </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}
+                      </div>
+                      <div className="text-xs text-[#666]">
+                        {server.type} • {server.package || server.command || "custom"}
+                        {server.status === "running" && server.port && ` • :${server.port}`}
+                      </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>
+                ))}
+                <p className="text-xs text-[#666] mt-2">
+                  Only running servers will be connected to the agent.
+                </p>
+              </div>
+            )}
+          </FormField>
+        )}
+
+        {message && (
+          <div className={`text-sm px-3 py-2 rounded ${
+            message.type === "success"
+              ? "bg-green-500/10 text-green-400"
+              : "bg-red-500/10 text-red-400"
+          }`}>
+            {message.text}
+          </div>
+        )}
+
+        <button
+          onClick={handleSave}
+          disabled={!hasChanges || saving || !form.name}
+          className="w-full bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 disabled:cursor-not-allowed text-black px-4 py-2 rounded font-medium transition"
+        >
+          {saving ? "Saving..." : "Save Changes"}
+        </button>
+
+        {agent.status === "running" && hasChanges && (
+          <p className="text-xs text-[#666] text-center">
+            Changes will be applied to the running agent
+          </p>
+        )}
+
+        {/* Danger Zone */}
+        <div className="mt-8 pt-6 border-t border-[#222]">
+          <p className="text-sm text-[#666] mb-3">Danger Zone</p>
+          {confirmDelete ? (
+            <div className="flex gap-2">
+              <button
+                onClick={() => setConfirmDelete(false)}
+                className="flex-1 border border-[#333] hover:border-[#444] px-4 py-2 rounded font-medium transition"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={onDeleteAgent}
+                className="flex-1 bg-red-500/20 text-red-400 hover:bg-red-500/30 px-4 py-2 rounded font-medium transition"
+              >
+                Confirm Delete
+              </button>
+            </div>
+          ) : (
+            <button
+              onClick={() => setConfirmDelete(true)}
+              className="w-full border border-red-500/30 text-red-400/70 hover:border-red-500/50 hover:text-red-400 px-4 py-2 rounded font-medium transition"
+            >
+              Delete Agent
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FormField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <label className="block text-sm text-[#666] mb-1">{label}</label>
+      {children}
+    </div>
+  );
+}

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

@@ -1,38 +1,42 @@
 import React from "react";
 import { AgentCard } from "./AgentCard";
-import { ChatPanel } from "./ChatPanel";
+import { AgentPanel } from "./AgentPanel";
 import { LoadingSpinner } from "../common/LoadingSpinner";
-import type { Agent } from "../../types";
+import type { Agent, Provider } from "../../types";
 
 interface AgentsViewProps {
   agents: Agent[];
   loading: boolean;
   selectedAgent: Agent | null;
+  providers: Provider[];
   onSelectAgent: (agent: Agent) => void;
   onCloseAgent: () => void;
   onToggleAgent: (agent: Agent, e?: React.MouseEvent) => void;
   onDeleteAgent: (id: string, e?: React.MouseEvent) => void;
+  onUpdateAgent: (id: string, updates: Partial<Agent>) => Promise<{ error?: string }>;
 }
 
 export function AgentsView({
   agents,
   loading,
   selectedAgent,
+  providers,
   onSelectAgent,
   onCloseAgent,
   onToggleAgent,
   onDeleteAgent,
+  onUpdateAgent,
 }: AgentsViewProps) {
   return (
-    <div className="flex-1 flex overflow-hidden">
+    <div className="flex-1 flex overflow-hidden relative">
       {/* Agents list */}
-      <div className={`${selectedAgent ? 'w-1/2 border-r border-[#1a1a1a]' : 'flex-1'} overflow-auto p-6 transition-all`}>
+      <div className="flex-1 overflow-auto p-6">
         {loading ? (
           <LoadingSpinner message="Loading agents..." />
         ) : agents.length === 0 ? (
           <EmptyState />
         ) : (
-          <div className={`grid gap-4 ${selectedAgent ? 'grid-cols-1 xl:grid-cols-2' : 'md:grid-cols-2 xl:grid-cols-3'}`}>
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
             {agents.map((agent) => (
               <AgentCard
                 key={agent.id}
@@ -47,14 +51,27 @@ export function AgentsView({
         )}
       </div>
 
-      {/* Chat Panel */}
+      {/* Overlay backdrop */}
       {selectedAgent && (
-        <ChatPanel
-          agent={selectedAgent}
-          onClose={onCloseAgent}
-          onStartAgent={(e) => onToggleAgent(selectedAgent, e)}
+        <div
+          className="absolute inset-0 bg-black/40 backdrop-blur-[2px] z-10"
+          onClick={onCloseAgent}
         />
       )}
+
+      {/* Agent Panel - slides in from right */}
+      {selectedAgent && (
+        <div className="absolute right-0 top-0 bottom-0 w-[600px] z-20">
+          <AgentPanel
+            agent={selectedAgent}
+            providers={providers}
+            onClose={onCloseAgent}
+            onStartAgent={(e) => onToggleAgent(selectedAgent, e)}
+            onUpdateAgent={(updates) => onUpdateAgent(selectedAgent.id, updates)}
+            onDeleteAgent={() => onDeleteAgent(selectedAgent.id)}
+          />
+        </div>
+      )}
     </div>
   );
 }

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

@@ -16,11 +16,11 @@ interface CreateAgentModalProps {
 }
 
 const FEATURE_CONFIG = [
-  { key: "memory" as keyof AgentFeatures, label: "Memory", description: "Remember information across conversations", icon: MemoryIcon },
-  { key: "tasks" as keyof AgentFeatures, label: "Tasks", description: "Create and execute scheduled tasks", icon: TasksIcon },
+  { key: "memory" as keyof AgentFeatures, label: "Memory", description: "Persistent recall", icon: MemoryIcon },
+  { key: "tasks" as keyof AgentFeatures, label: "Tasks", description: "Schedule and execute tasks", icon: TasksIcon },
   { key: "vision" as keyof AgentFeatures, label: "Vision", description: "Process images and PDFs", icon: VisionIcon },
-  { key: "operator" as keyof AgentFeatures, label: "Operator", description: "Browser automation (computer use)", icon: OperatorIcon },
-  { key: "mcp" as keyof AgentFeatures, label: "MCP", description: "Connect to external tools and services", icon: McpIcon },
+  { key: "operator" as keyof AgentFeatures, label: "Operator", description: "Browser automation", icon: OperatorIcon },
+  { key: "mcp" as keyof AgentFeatures, label: "MCP", description: "External tools/services", icon: McpIcon },
   { key: "realtime" as keyof AgentFeatures, label: "Realtime", description: "Voice conversations", icon: RealtimeIcon },
 ];
 
@@ -103,7 +103,7 @@ export function CreateAgentModal({
             </FormField>
 
             <FormField label="Features">
-              <div className="grid grid-cols-2 gap-2">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 {FEATURE_CONFIG.map(({ key, label, description, icon: Icon }) => (
                   <button
                     key={key}
@@ -115,12 +115,12 @@ export function CreateAgentModal({
                         : "border-[#222] hover:border-[#333]"
                     }`}
                   >
-                    <Icon className={`w-5 h-5 ${form.features[key] ? "text-[#f97316]" : "text-[#666]"}`} />
+                    <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] truncate">{description}</div>
+                      <div className="text-xs text-[#666]">{description}</div>
                     </div>
                   </button>
                 ))}

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

@@ -1,4 +1,4 @@
 export { AgentCard } from "./AgentCard";
 export { CreateAgentModal } from "./CreateAgentModal";
-export { ChatPanel } from "./ChatPanel";
+export { AgentPanel } from "./AgentPanel";
 export { AgentsView } from "./AgentsView";

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

@@ -109,3 +109,11 @@ export function RealtimeIcon({ className = "w-4 h-4" }: IconProps) {
     </svg>
   );
 }
+
+export function TelemetryIcon({ 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+    </svg>
+  );
+}

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

@@ -7,8 +7,8 @@ interface ModalProps {
 
 export function Modal({ children, onClose }: ModalProps) {
   return (
-    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
-      <div className="bg-[#111] rounded p-6 w-full max-w-md border border-[#1a1a1a]">
+    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
+      <div className="bg-[#111] rounded p-6 w-full max-w-xl border border-[#1a1a1a] max-h-[90vh] overflow-y-auto">
         {children}
       </div>
     </div>

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

@@ -50,7 +50,7 @@ export function Select({ value, options, onChange, placeholder = "Select..." }:
       </button>
 
       {isOpen && (
-        <div className="absolute z-50 w-full mt-1 bg-[#111] border border-[#222] rounded shadow-lg max-h-60 overflow-auto">
+        <div className="absolute z-50 w-full min-w-max mt-1 bg-[#111] border border-[#222] rounded shadow-lg max-h-60 overflow-y-auto scrollbar-hide">
           {options.map((option) => (
             <button
               key={option.value}

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

@@ -13,4 +13,5 @@ export {
   OperatorIcon,
   McpIcon,
   RealtimeIcon,
+  TelemetryIcon,
 } from "./Icons";