apteva 0.4.18 → 0.4.20

package/src/tui/App.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { AptevaAPI, type User } from "./api.js";
+import { Login } from "./Login.js";
+import { AgentList } from "./AgentList.js";
+import { spawn } from "child_process";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+
+interface AppProps {
+  baseUrl: string;
+}
+
+export function App({ baseUrl }: AppProps) {
+  const [api] = useState(() => new AptevaAPI(baseUrl));
+  const [screen, setScreen] = useState<"connecting" | "login" | "agents">("connecting");
+  const [user, setUser] = useState<User | null>(null);
+  const [connectError, setConnectError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const tryConnect = async () => {
+      // First check if server is already running
+      const connected = await api.checkConnection();
+      if (cancelled) return;
+
+      if (connected) {
+        setScreen("login");
+        return;
+      }
+
+      // Server not running — try to start it
+      setConnectError("Server not running. Starting...");
+
+      try {
+        // Find the server entry point relative to this file
+        const serverPath = resolve(dirname(fileURLToPath(import.meta.url)), "../server.ts");
+        const child = spawn("bun", ["run", serverPath], {
+          stdio: "ignore",
+          detached: true,
+          env: { ...process.env, PORT: new URL(baseUrl).port || "4280" },
+        });
+        child.unref();
+
+        // Wait for server to come up (poll for up to 10 seconds)
+        for (let i = 0; i < 20; i++) {
+          if (cancelled) return;
+          await new Promise(r => setTimeout(r, 500));
+          const up = await api.checkConnection();
+          if (up) {
+            if (!cancelled) setScreen("login");
+            return;
+          }
+        }
+      } catch {
+        // Spawn failed
+      }
+
+      if (!cancelled) {
+        setConnectError(`Cannot connect to ${baseUrl}. Start the server with: bun run dev`);
+      }
+    };
+
+    tryConnect();
+    return () => { cancelled = true; };
+  }, []);
+
+  if (screen === "connecting") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Box marginBottom={1}>
+          <Text color="hex('#f97316')" bold>{">"}_</Text>
+          <Text bold> apteva</Text>
+        </Box>
+        <Box>
+          <Text color="hex('#f97316')"><Spinner type="dots" /></Text>
+          <Text> {connectError || `Connecting to ${baseUrl}...`}</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (screen === "login") {
+    return (
+      <Login
+        api={api}
+        onSuccess={(u) => {
+          setUser(u);
+          setScreen("agents");
+        }}
+      />
+    );
+  }
+
+  if (screen === "agents" && user) {
+    return <AgentList api={api} user={user} />;
+  }
+
+  return null;
+}

package/src/tui/Login.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import Spinner from "ink-spinner";
+import type { AptevaAPI, User } from "./api.js";
+
+interface LoginProps {
+  api: AptevaAPI;
+  onSuccess: (user: User) => void;
+}
+
+export function Login({ api, onSuccess }: LoginProps) {
+  const [field, setField] = useState<"username" | "password">("username");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useInput((input, key) => {
+    if (key.tab || (key.return && field === "username" && username)) {
+      setField(field === "username" ? "password" : "username");
+    }
+  });
+
+  const handleSubmit = async () => {
+    if (!username || !password) return;
+    setLoading(true);
+    setError("");
+    const result = await api.login(username, password);
+    setLoading(false);
+    if (result.success && result.user) {
+      onSuccess(result.user);
+    } else {
+      setError(result.error || "Login failed");
+    }
+  };
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text color="hex('#f97316')" bold>
+          {">"}_
+        </Text>
+        <Text bold> apteva</Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text dimColor>Sign in to continue</Text>
+      </Box>
+
+      <Box>
+        <Text color={field === "username" ? "hex('#f97316')" : "white"}>
+          Username:{" "}
+        </Text>
+        {field === "username" ? (
+          <TextInput
+            value={username}
+            onChange={setUsername}
+            onSubmit={() => {
+              if (username) setField("password");
+            }}
+          />
+        ) : (
+          <Text>{username}</Text>
+        )}
+      </Box>
+
+      <Box>
+        <Text color={field === "password" ? "hex('#f97316')" : "white"}>
+          Password:{" "}
+        </Text>
+        {field === "password" ? (
+          <TextInput
+            value={password}
+            onChange={setPassword}
+            onSubmit={handleSubmit}
+            mask="*"
+          />
+        ) : (
+          <Text dimColor>{"*".repeat(password.length) || "..."}</Text>
+        )}
+      </Box>
+
+      {loading && (
+        <Box marginTop={1}>
+          <Text color="hex('#f97316')">
+            <Spinner type="dots" />
+          </Text>
+          <Text> Signing in...</Text>
+        </Box>
+      )}
+
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">{error}</Text>
+        </Box>
+      )}
+
+      <Box marginTop={1}>
+        <Text dimColor>Tab to switch fields · Enter to submit</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/api.ts

@@ -0,0 +1,72 @@
+export interface Agent {
+  id: string;
+  name: string;
+  model: string;
+  provider: string;
+  status: "running" | "stopped" | "error";
+  port: number | null;
+  projectId: string | null;
+}
+
+export interface User {
+  id: string;
+  username: string;
+  role: string;
+}
+
+export class AptevaAPI {
+  baseUrl: string;
+  private token: string | null = null;
+
+  constructor(baseUrl: string) {
+    this.baseUrl = baseUrl.replace(/\/$/, "");
+  }
+
+  async checkConnection(): Promise<boolean> {
+    try {
+      const res = await fetch(`${this.baseUrl}/api/auth/check`, { signal: AbortSignal.timeout(3000) });
+      return res.ok;
+    } catch {
+      return false;
+    }
+  }
+
+  private async fetch(path: string, opts: RequestInit = {}): Promise<Response> {
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      ...(opts.headers as Record<string, string> || {}),
+    };
+    if (this.token) {
+      headers.Authorization = `Bearer ${this.token}`;
+    }
+    return fetch(`${this.baseUrl}${path}`, { ...opts, headers });
+  }
+
+  async login(username: string, password: string): Promise<{ success: boolean; user?: User; error?: string }> {
+    try {
+      const res = await this.fetch("/api/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ username, password }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        return { success: false, error: data.error || "Login failed" };
+      }
+      this.token = data.accessToken;
+      return { success: true, user: data.user };
+    } catch (err: any) {
+      return { success: false, error: err.message || "Connection failed" };
+    }
+  }
+
+  async getAgents(): Promise<Agent[]> {
+    try {
+      const res = await this.fetch("/api/agents");
+      if (!res.ok) return [];
+      const data = await res.json();
+      return data.agents || [];
+    } catch {
+      return [];
+    }
+  }
+}

package/src/tui/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { render } from "ink";
+import { App } from "./App.js";
+
+const baseUrl = process.argv[2] || "http://localhost:4280";
+
+render(<App baseUrl={baseUrl} />);

package/src/web/App.tsx

@@ -64,7 +64,7 @@ function AppContent() {
     updateAgent,
     deleteAgent,
     toggleAgent,
-  } = useAgents(shouldFetchData);
+  } = useAgents(shouldFetchData, currentProjectId);
 
   const {
     providers,
@@ -240,7 +240,7 @@ function AppContent() {
 
   return (
     <div className="h-screen bg-[#0a0a0a] text-[#e0e0e0] font-mono flex flex-col overflow-hidden">
-      <Header onMenuClick={() => setMobileMenuOpen(true)} />
+      <Header onMenuClick={() => setMobileMenuOpen(true)} agents={agents} />
 
       {startError && (
         <ErrorBanner message={startError} onDismiss={() => setStartError(null)} />

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Chat } from "@apteva/apteva-kit";
+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";
@@ -195,15 +195,7 @@ function ThreadsTab({ agent }: { agent: Agent }) {
       const res = await fetch(`/api/agents/${agent.id}/threads/${threadId}/messages`);
       if (res.ok) {
         const data = await res.json();
-        const msgs = (data.messages || [])
-          .filter((m: any) => typeof m.content === "string")
-          .map((m: any) => ({
-            id: m.id,
-            role: m.role,
-            content: m.content,
-            timestamp: new Date(m.created_at),
-          }));
-        setInitialMessages(msgs);
+        setInitialMessages(convertApiMessages(data.messages || []));
       } else {
         setInitialMessages([]);
       }
@@ -255,36 +247,10 @@ function ThreadsTab({ agent }: { agent: Agent }) {
 
   // 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-2 border-b border-[#1a1a1a] flex-shrink-0">
-          <button
-            onClick={() => { setSelectedThread(null); setInitialMessages([]); }}
-            className="text-[#666] hover:text-[#e0e0e0] transition text-lg"
-          >
-            ←
-          </button>
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium truncate">
-              {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>
-
-        {/* Live chat in this thread */}
         {loadingMessages ? (
           <div className="flex-1 flex items-center justify-center text-[#666]">Loading messages...</div>
         ) : (
@@ -297,7 +263,8 @@ function ThreadsTab({ agent }: { agent: Agent }) {
             placeholder="Continue this conversation..."
             context={agent.systemPrompt}
             variant="terminal"
-            showHeader={false}
+            showHeader={true}
+            onHeaderBack={() => { setSelectedThread(null); setInitialMessages([]); }}
           />
         )}
       </div>

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

@@ -232,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/connections/OverviewTab.tsx

@@ -12,15 +12,6 @@ interface Subscription {
   updated_at: string;
 }
 
-interface TriggerInstance {
-  id: string;
-  trigger_slug: string;
-  connected_account_id: string | null;
-  status: "active" | "disabled";
-  config: Record<string, unknown>;
-  created_at: string;
-}
-
 interface Agent {
   id: string;
   name: string;
@@ -32,7 +23,6 @@ export function OverviewTab() {
   const { currentProjectId } = useProjects();
 
   const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
-  const [triggers, setTriggers] = useState<TriggerInstance[]>([]);
   const [agents, setAgents] = useState<Agent[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -42,9 +32,8 @@ export function OverviewTab() {
       const projectParam = currentProjectId && currentProjectId !== "unassigned" ? `?project_id=${currentProjectId}` : "";
 
       try {
-        const [subsRes, triggersRes, agentsRes] = await Promise.all([
+        const [subsRes, agentsRes] = await Promise.all([
           authFetch(`/api/subscriptions${projectParam}`).catch(() => null),
-          authFetch(`/api/triggers${projectParam}`).catch(() => null),
           authFetch(`/api/agents`).catch(() => null),
         ]);
 
@@ -52,10 +41,6 @@ export function OverviewTab() {
           const data = await subsRes.json();
           setSubscriptions(data.subscriptions || []);
         }
-        if (triggersRes?.ok) {
-          const data = await triggersRes.json();
-          setTriggers(data.triggers || []);
-        }
         if (agentsRes?.ok) {
           const data = await agentsRes.json();
           setAgents(data.agents || []);
@@ -73,40 +58,40 @@ export function OverviewTab() {
     return <div className="text-center py-12 text-[#666]">Loading...</div>;
   }
 
-  const activeTriggers = triggers.filter(t => t.status === "active");
-  const enabledSubscriptions = subscriptions.filter(s => s.enabled);
+  const enabledSubs = subscriptions.filter(s => s.enabled);
+  const disabledSubs = subscriptions.filter(s => !s.enabled);
   const agentMap = new Map(agents.map(a => [a.id, a]));
 
   return (
     <div className="space-y-6">
       {/* Stats */}
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
-        <StatCard label="Subscriptions" value={enabledSubscriptions.length} />
-        <StatCard label="Active Triggers" value={activeTriggers.length} />
-        <StatCard label="Total Triggers" value={triggers.length} />
+      <div className="grid grid-cols-3 gap-4">
+        <StatCard label="Active" value={enabledSubs.length} />
+        <StatCard label="Disabled" value={disabledSubs.length} />
+        <StatCard label="Total" value={subscriptions.length} />
       </div>
 
-      {/* Active Subscriptions */}
+      {/* Subscriptions */}
       <section>
-        <h3 className="text-sm font-medium text-[#888] mb-3">Active Subscriptions ({enabledSubscriptions.length})</h3>
-        {enabledSubscriptions.length === 0 ? (
+        <h3 className="text-sm font-medium text-[#888] mb-3">Subscriptions ({subscriptions.length})</h3>
+        {subscriptions.length === 0 ? (
           <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6 text-center text-[#666] text-sm">
-            No subscriptions. Go to the Triggers tab to route trigger events to agents.
+            No subscriptions yet. Go to the Triggers tab to create one.
           </div>
         ) : (
           <div className="space-y-2">
-            {enabledSubscriptions.map(sub => {
+            {subscriptions.map(sub => {
               const agent = agentMap.get(sub.agent_id);
               return (
                 <div key={sub.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-3 flex items-center gap-3">
-                  <div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0" />
+                  <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[#555]"}`} />
                   <div className="flex-1 min-w-0">
                     <div className="text-sm font-medium truncate">
-                      {sub.trigger_slug.replace(/_/g, " ")}
+                      {sub.trigger_slug.replace(/_/g, " ").replace(/-/g, " ")}
                     </div>
                     <div className="text-xs text-[#666]">
                       {sub.trigger_instance_id
-                        ? `Instance: ${sub.trigger_instance_id.slice(0, 12)}...`
+                        ? `ID: ${sub.trigger_instance_id.slice(0, 12)}...`
                         : "All instances"
                       }
                     </div>
@@ -115,50 +100,19 @@ export function OverviewTab() {
                     <span className="text-[#555]">&rarr;</span>{" "}
                     <span className="text-[#f97316]">{agent?.name || "Unknown Agent"}</span>
                   </div>
-                  {agent && (
-                    <span className={`text-xs px-2 py-0.5 rounded flex-shrink-0 ${
-                      agent.status === "running"
-                        ? "bg-green-500/10 text-green-400"
-                        : "bg-yellow-500/10 text-yellow-400"
-                    }`}>
-                      {agent.status}
-                    </span>
-                  )}
+                  <span className={`text-xs px-2 py-0.5 rounded flex-shrink-0 ${
+                    sub.enabled
+                      ? "bg-green-500/10 text-green-400"
+                      : "bg-[#1a1a1a] text-[#555]"
+                  }`}>
+                    {sub.enabled ? "active" : "disabled"}
+                  </span>
                 </div>
               );
             })}
           </div>
         )}
       </section>
-
-      {/* Active Triggers */}
-      <section>
-        <h3 className="text-sm font-medium text-[#888] mb-3">Active Triggers ({activeTriggers.length})</h3>
-        {activeTriggers.length === 0 ? (
-          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg p-6 text-center text-[#666] text-sm">
-            No active triggers on Composio.
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {activeTriggers.map(trigger => (
-              <div key={trigger.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-3 flex items-center gap-3">
-                <div className="w-2 h-2 rounded-full bg-green-400 flex-shrink-0" />
-                <div className="flex-1 min-w-0">
-                  <div className="text-sm font-medium truncate">
-                    {trigger.trigger_slug.replace(/_/g, " ")}
-                  </div>
-                  <div className="text-xs text-[#666]">
-                    ID: {trigger.id.slice(0, 8)}...
-                  </div>
-                </div>
-                <span className="text-xs text-green-400 bg-green-500/10 px-2 py-0.5 rounded">
-                  active
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
     </div>
   );
 }