apteva 0.4.17 → 0.4.19

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

@@ -1,6 +1,7 @@
 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 { Chat, convertApiMessages } from "@apteva/apteva-kit";
+import { CloseIcon, MemoryIcon, TasksIcon, VisionIcon, OperatorIcon, McpIcon, RealtimeIcon, FilesIcon, MultiAgentIcon, RecurringIcon, ScheduledIcon, TaskOnceIcon } from "../common/Icons";
+import { formatCron, formatRelativeTime } from "../tasks/TasksPage";
 import { Select } from "../common/Select";
 import { useConfirm } from "../common/Modal";
 import { useTelemetry } from "../../context";
@@ -152,7 +153,7 @@ function ThreadsTab({ agent }: { agent: Agent }) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedThread, setSelectedThread] = useState<string | null>(null);
-  const [messages, setMessages] = useState<Array<{ role: string; content: string; created_at: string }>>([]);
+  const [initialMessages, setInitialMessages] = useState<any[]>([]);
   const [loadingMessages, setLoadingMessages] = useState(false);
   const { confirm, ConfirmDialog } = useConfirm();
 
@@ -160,7 +161,6 @@ function ThreadsTab({ agent }: { agent: Agent }) {
   useEffect(() => {
     setThreads([]);
     setSelectedThread(null);
-    setMessages([]);
     setError(null);
     setLoading(true);
   }, [agent.id]);
@@ -188,19 +188,21 @@ function ThreadsTab({ agent }: { agent: Agent }) {
     fetchThreads();
   }, [agent.id, agent.status]);
 
-  const loadMessages = async (threadId: string) => {
-    setSelectedThread(threadId);
+  const openThread = async (threadId: string) => {
     setLoadingMessages(true);
+    setSelectedThread(threadId);
     try {
       const res = await fetch(`/api/agents/${agent.id}/threads/${threadId}/messages`);
-      if (!res.ok) throw new Error("Failed to fetch messages");
-      const data = await res.json();
-      setMessages(data.messages || []);
+      if (res.ok) {
+        const data = await res.json();
+        setInitialMessages(convertApiMessages(data.messages || []));
+      } else {
+        setInitialMessages([]);
+      }
     } catch {
-      setMessages([]);
-    } finally {
-      setLoadingMessages(false);
+      setInitialMessages([]);
     }
+    setLoadingMessages(false);
   };
 
   const deleteThread = async (threadId: string, e: React.MouseEvent) => {
@@ -213,7 +215,6 @@ function ThreadsTab({ agent }: { agent: Agent }) {
       setThreads(prev => prev.filter(t => t.id !== threadId));
       if (selectedThread === threadId) {
         setSelectedThread(null);
-        setMessages([]);
       }
     } catch {
       // Ignore errors
@@ -244,85 +245,28 @@ function ThreadsTab({ agent }: { agent: Agent }) {
     );
   }
 
-  // Show messages view when a thread is selected
+  // Show live chat for selected thread
   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]">
-          <button
-            onClick={() => { setSelectedThread(null); setMessages([]); }}
-            className="text-[#666] hover:text-[#e0e0e0] transition text-lg"
-          >
-            ←
-          </button>
-          <div className="flex-1">
-            <p className="text-sm font-medium">
-              {selectedThreadData?.title || `Thread ${selectedThread.slice(0, 8)}`}
-            </p>
-            <p className="text-xs text-[#666]">
-              {selectedThreadData && new Date(selectedThreadData.updated_at || selectedThreadData.created_at).toLocaleString()}
-            </p>
-          </div>
-          <button
-            onClick={(e) => deleteThread(selectedThread, e)}
-            className="text-[#666] hover:text-red-400 text-sm px-2 py-1"
-          >
-            Delete
-          </button>
-        </div>
-
-        {/* Messages */}
-        <div className="flex-1 overflow-auto p-4">
-          {loadingMessages ? (
-            <p className="text-[#666]">Loading messages...</p>
-          ) : messages.length === 0 ? (
-            <p className="text-[#666]">No messages in this thread</p>
-          ) : (
-            <div className="space-y-4">
-              {messages.map((msg, i) => (
-                <div key={i} className={`${msg.role === "user" ? "text-right" : ""}`}>
-                  <div
-                    className={`inline-block max-w-[80%] p-3 rounded ${
-                      msg.role === "user"
-                        ? "bg-[#f97316]/20 text-[#f97316]"
-                        : "bg-[#1a1a1a] text-[#e0e0e0]"
-                    }`}
-                  >
-                    <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>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+        {loadingMessages ? (
+          <div className="flex-1 flex items-center justify-center text-[#666]">Loading messages...</div>
+        ) : (
+          <Chat
+            key={selectedThread}
+            agentId="default"
+            apiUrl={`/api/agents/${agent.id}`}
+            threadId={selectedThread}
+            initialMessages={initialMessages}
+            placeholder="Continue this conversation..."
+            context={agent.systemPrompt}
+            variant="terminal"
+            showHeader={true}
+            onHeaderBack={() => { setSelectedThread(null); setInitialMessages([]); }}
+          />
+        )}
       </div>
       </>
     );
@@ -342,7 +286,7 @@ function ThreadsTab({ agent }: { agent: Agent }) {
           {threads.map(thread => (
             <div
               key={thread.id}
-              onClick={() => loadMessages(thread.id)}
+              onClick={() => openThread(thread.id)}
               className="p-4 cursor-pointer hover:bg-[#111] transition flex items-center justify-between"
             >
               <div className="flex-1 min-w-0">
@@ -369,24 +313,11 @@ function ThreadsTab({ agent }: { agent: Agent }) {
   );
 }
 
-interface Task {
-  id: string;
-  name: string;
-  description?: string;
-  status: "pending" | "running" | "completed" | "failed";
-  created_at: string;
-  updated_at?: string;
-  scheduled_at?: string;
-  completed_at?: string;
-  result?: string;
-  error?: string;
-}
-
 function TasksTab({ agent }: { agent: Agent }) {
-  const [tasks, setTasks] = useState<Task[]>([]);
+  const [tasks, setTasks] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [filter, setFilter] = useState<"all" | "pending" | "running" | "completed">("all");
+  const [filter, setFilter] = useState<string>("all");
   const { events } = useTelemetry({ agent_id: agent.id, category: "task" });
 
   // Reset state when agent changes
@@ -421,14 +352,12 @@ function TasksTab({ agent }: { agent: Agent }) {
     fetchTasks();
   }, [agent.id, agent.status, filter, events.length]);
 
-  const getStatusColor = (status: Task["status"]) => {
-    switch (status) {
-      case "pending": return "bg-yellow-500/20 text-yellow-400";
-      case "running": return "bg-blue-500/20 text-blue-400";
-      case "completed": return "bg-green-500/20 text-green-400";
-      case "failed": return "bg-red-500/20 text-red-400";
-      default: return "bg-[#222] text-[#666]";
-    }
+  const statusColors: Record<string, string> = {
+    pending: "bg-yellow-500/20 text-yellow-400",
+    running: "bg-blue-500/20 text-blue-400",
+    completed: "bg-green-500/20 text-green-400",
+    failed: "bg-red-500/20 text-red-400",
+    cancelled: "bg-gray-500/20 text-gray-400",
   };
 
   if (agent.status !== "running") {
@@ -466,63 +395,91 @@ function TasksTab({ agent }: { agent: Agent }) {
     );
   }
 
+  const filterOptions = [
+    { value: "all", label: "All" },
+    { value: "pending", label: "Pending" },
+    { value: "running", label: "Running" },
+    { value: "completed", label: "Completed" },
+    { value: "failed", label: "Failed" },
+  ];
+
   return (
     <div className="flex-1 overflow-auto p-4">
       {/* Filter tabs */}
       <div className="flex gap-2 mb-4">
-        {(["all", "pending", "running", "completed"] as const).map(status => (
+        {filterOptions.map(opt => (
           <button
-            key={status}
-            onClick={() => setFilter(status)}
-            className={`px-3 py-1 text-xs rounded transition ${
-              filter === status
+            key={opt.value}
+            onClick={() => setFilter(opt.value)}
+            className={`px-3 py-1.5 rounded text-sm transition ${
+              filter === opt.value
                 ? "bg-[#f97316] text-black"
-                : "bg-[#1a1a1a] text-[#666] hover:text-[#888]"
+                : "bg-[#1a1a1a] hover:bg-[#222]"
             }`}
           >
-            {status.charAt(0).toUpperCase() + status.slice(1)}
+            {opt.label}
           </button>
         ))}
       </div>
 
       {tasks.length === 0 ? (
-        <div className="text-center py-10 text-[#666]">
-          <p>No {filter === "all" ? "" : filter + " "}tasks</p>
+        <div className="text-center py-10">
+          <TasksIcon className="w-10 h-10 mx-auto mb-3 text-[#333]" />
+          <p className="text-[#666]">No {filter === "all" ? "" : filter + " "}tasks</p>
+          <p className="text-sm text-[#444] mt-1">Tasks will appear here when created</p>
         </div>
       ) : (
         <div className="space-y-3">
           {tasks.map(task => (
-            <div key={task.id} className="bg-[#111] border border-[#1a1a1a] rounded p-3">
-              <div className="flex items-start justify-between">
+            <div key={task.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+              <div className="flex items-start justify-between mb-2">
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-[#e0e0e0]">{task.name}</p>
-                  {task.description && (
-                    <p className="text-xs text-[#666] mt-1 line-clamp-2">{task.description}</p>
-                  )}
+                  <h3 className="font-medium">{task.title || task.name}</h3>
                 </div>
-                <span className={`text-xs px-2 py-0.5 rounded ml-2 ${getStatusColor(task.status)}`}>
+                <span className={`px-2 py-1 rounded text-xs font-medium ml-2 ${statusColors[task.status] || statusColors.pending}`}>
                   {task.status}
                 </span>
               </div>
 
-              <div className="flex items-center gap-4 mt-2 text-xs text-[#666]">
-                <span>Created: {new Date(task.created_at).toLocaleString()}</span>
-                {task.scheduled_at && (
-                  <span>Scheduled: {new Date(task.scheduled_at).toLocaleString()}</span>
+              {task.description && (
+                <p className="text-sm text-[#888] mb-2 line-clamp-2">{task.description}</p>
+              )}
+
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[#555]">
+                <span className="flex items-center gap-1">
+                  {task.type === "recurring"
+                    ? <RecurringIcon className="w-3.5 h-3.5" />
+                    : task.execute_at
+                      ? <ScheduledIcon className="w-3.5 h-3.5" />
+                      : <TaskOnceIcon className="w-3.5 h-3.5" />
+                  }
+                  {task.type === "recurring" && task.recurrence ? formatCron(task.recurrence) : task.type || "once"}
+                </span>
+                {task.priority !== undefined && (
+                  <span>Priority: {task.priority}</span>
+                )}
+                {task.next_run && (
+                  <span className="text-[#f97316]">{formatRelativeTime(task.next_run)}</span>
+                )}
+                {!task.next_run && task.execute_at && (
+                  <span className="text-[#f97316]">{formatRelativeTime(task.execute_at)}</span>
                 )}
+                <span>Created: {new Date(task.created_at).toLocaleDateString()}</span>
               </div>
 
               {task.status === "completed" && task.result && (
-                <div className="mt-2 p-2 bg-[#0a0a0a] rounded text-xs text-[#888]">
-                  <p className="text-[#666] mb-1">Result:</p>
-                  <p className="whitespace-pre-wrap">{task.result}</p>
+                <div className="mt-3 bg-green-500/10 border border-green-500/20 rounded p-3">
+                  <h4 className="text-xs text-green-400 uppercase tracking-wider mb-1">Result</h4>
+                  <pre className="text-sm text-green-400 whitespace-pre-wrap break-words">
+                    {typeof task.result === "string" ? task.result : JSON.stringify(task.result, null, 2)}
+                  </pre>
                 </div>
               )}
 
               {task.status === "failed" && task.error && (
-                <div className="mt-2 p-2 bg-red-500/10 rounded text-xs text-red-400">
-                  <p className="text-red-400/70 mb-1">Error:</p>
-                  <p className="whitespace-pre-wrap">{task.error}</p>
+                <div className="mt-3 bg-red-500/10 border border-red-500/20 rounded p-3">
+                  <h4 className="text-xs text-red-400 uppercase tracking-wider mb-1">Error</h4>
+                  <pre className="text-sm text-red-400 whitespace-pre-wrap break-words">{task.error}</pre>
                 </div>
               )}
             </div>

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

@@ -182,6 +182,14 @@ export function TestsIcon({ className = "w-4 h-4" }: IconProps) {
   );
 }
 
+export function ConnectionsIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
+    </svg>
+  );
+}
+
 export function ActivityIcon({ className = "w-5 h-5" }: IconProps) {
   return (
     <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -224,3 +232,11 @@ export function TaskOnceIcon({ className = "w-4 h-4" }: IconProps) {
     </svg>
   );
 }
+
+export function BellIcon({ className = "w-5 h-5" }: IconProps) {
+  return (
+    <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+    </svg>
+  );
+}

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

@@ -16,4 +16,5 @@ export {
   RealtimeIcon,
   TelemetryIcon,
   ActivityIcon,
+  ConnectionsIcon,
 } from "./Icons";

package/src/web/components/connections/ConnectionsPage.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { OverviewTab } from "./OverviewTab";
+import { TriggersTab } from "./TriggersTab";
+import { IntegrationsTab } from "./IntegrationsTab";
+
+type Tab = "overview" | "triggers" | "integrations";
+
+export function ConnectionsPage() {
+  const [activeTab, setActiveTab] = useState<Tab>("overview");
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: "overview", label: "Overview" },
+    { id: "triggers", label: "Triggers" },
+    { id: "integrations", label: "Integrations" },
+  ];
+
+  return (
+    <div className="flex-1 overflow-auto p-6">
+      <div className="max-w-6xl">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-semibold mb-1">Connections</h1>
+            <p className="text-[#666]">
+              Manage external app connections, triggers, and webhooks.
+            </p>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-1 mb-6 bg-[#111] border border-[#1a1a1a] rounded-lg p-1 w-fit">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-4 py-2 rounded text-sm font-medium transition ${
+                activeTab === tab.id
+                  ? "bg-[#1a1a1a] text-white"
+                  : "text-[#666] hover:text-[#888]"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === "overview" && <OverviewTab />}
+        {activeTab === "triggers" && <TriggersTab />}
+        {activeTab === "integrations" && <IntegrationsTab />}
+      </div>
+    </div>
+  );
+}

package/src/web/components/connections/IntegrationsTab.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useCallback } from "react";
+import { useAuth, useProjects } from "../../context";
+import { IntegrationsPanel } from "../mcp/IntegrationsPanel";
+
+interface TriggerType {
+  slug: string;
+  name: string;
+  description: string;
+  type: "webhook" | "poll";
+  toolkit_slug: string;
+  toolkit_name: string;
+  logo: string | null;
+}
+
+export function IntegrationsTab() {
+  const { authFetch } = useAuth();
+  const { currentProjectId } = useProjects();
+
+  const projectId = currentProjectId && currentProjectId !== "unassigned" ? currentProjectId : null;
+
+  // Provider selection
+  const [selectedProvider, setSelectedProvider] = useState("composio");
+  const providerOptions = [
+    { id: "composio", name: "Composio" },
+    { id: "agentdojo", name: "AgentDojo" },
+  ];
+
+  // Trigger type browsing
+  const [browsingToolkit, setBrowsingToolkit] = useState<string | null>(null);
+  const [triggerTypes, setTriggerTypes] = useState<TriggerType[]>([]);
+  const [typesLoading, setTypesLoading] = useState(false);
+
+  const handleBrowseTriggers = useCallback(async (toolkitSlug: string) => {
+    setBrowsingToolkit(toolkitSlug);
+    setTypesLoading(true);
+    try {
+      let url = `/api/triggers/types?provider=${selectedProvider}&toolkit_slugs=${toolkitSlug}`;
+      if (projectId) url += `&project_id=${projectId}`;
+      const res = await authFetch(url);
+      if (res.ok) {
+        const data = await res.json();
+        setTriggerTypes(data.types || []);
+      }
+    } catch (e) {
+      console.error("Failed to fetch trigger types:", e);
+    }
+    setTypesLoading(false);
+  }, [authFetch, projectId, selectedProvider]);
+
+  return (
+    <div>
+      <p className="text-sm text-[#666] mb-4">
+        Connect external apps via OAuth or API Key. Connected apps can be used for triggers and MCP integrations.
+      </p>
+
+      {/* Provider Selector */}
+      <div className="flex items-center gap-2 mb-4">
+        <span className="text-xs text-[#666]">Provider:</span>
+        <div className="flex gap-1 bg-[#111] border border-[#1a1a1a] rounded-lg p-0.5">
+          {providerOptions.map(p => (
+            <button
+              key={p.id}
+              onClick={() => setSelectedProvider(p.id)}
+              className={`px-3 py-1 rounded text-xs font-medium transition ${
+                selectedProvider === p.id
+                  ? "bg-[#1a1a1a] text-white"
+                  : "text-[#666] hover:text-[#888]"
+              }`}
+            >
+              {p.name}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <IntegrationsPanel
+        providerId={selectedProvider}
+        projectId={projectId}
+        hideMcpConfig
+        onBrowseTriggers={handleBrowseTriggers}
+      />
+
+      {/* Trigger Types Panel */}
+      {browsingToolkit && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-[#111] border border-[#333] rounded-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
+            <div className="p-4 border-b border-[#1a1a1a] flex items-center justify-between">
+              <div>
+                <h3 className="font-medium">Trigger Types</h3>
+                <p className="text-xs text-[#666]">{browsingToolkit}</p>
+              </div>
+              <button
+                onClick={() => { setBrowsingToolkit(null); setTriggerTypes([]); }}
+                className="text-[#666] hover:text-white transition text-lg px-2"
+              >
+                x
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-auto p-4">
+              {typesLoading ? (
+                <div className="text-center py-8 text-[#666]">Loading trigger types...</div>
+              ) : triggerTypes.length === 0 ? (
+                <div className="text-center py-8 text-[#666]">
+                  No trigger types available for this app.
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {triggerTypes.map(tt => (
+                    <div key={tt.slug} className="bg-[#0a0a0a] border border-[#1a1a1a] rounded-lg p-3">
+                      <div className="flex items-start gap-3">
+                        {tt.logo ? (
+                          <img src={tt.logo} alt={tt.toolkit_name} className="w-6 h-6 rounded object-contain flex-shrink-0 mt-0.5" />
+                        ) : (
+                          <div className="w-6 h-6 rounded bg-[#1a1a1a] flex items-center justify-center text-[10px] flex-shrink-0 mt-0.5">
+                            {tt.toolkit_name?.[0]?.toUpperCase() || "?"}
+                          </div>
+                        )}
+                        <div className="flex-1 min-w-0">
+                          <div className="text-sm font-medium">{tt.name}</div>
+                          <div className="text-xs text-[#666] mt-0.5">{tt.description}</div>
+                          <div className="flex items-center gap-2 mt-1.5">
+                            <span className="text-[10px] bg-[#1a1a1a] text-[#555] px-1.5 py-0.5 rounded font-mono">
+                              {tt.slug}
+                            </span>
+                            <span className={`text-[10px] px-1.5 py-0.5 rounded ${
+                              tt.type === "webhook" ? "bg-blue-500/10 text-blue-400" : "bg-yellow-500/10 text-yellow-400"
+                            }`}>
+                              {tt.type}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}