apteva 0.4.57 → 0.7.0

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

@@ -1,199 +0,0 @@
-import React from "react";
-
-interface ModalProps {
-  children: React.ReactNode;
-  onClose?: () => void;
-}
-
-export function Modal({ children, onClose }: ModalProps) {
-  return (
-    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-xl lg:max-w-2xl max-h-[90vh] overflow-y-auto">
-        {children}
-      </div>
-    </div>
-  );
-}
-
-// Confirmation Modal - replaces browser confirm()
-interface ConfirmModalProps {
-  title?: string;
-  message: string;
-  confirmText?: string;
-  cancelText?: string;
-  confirmVariant?: "danger" | "primary";
-  onConfirm: () => void;
-  onCancel: () => void;
-}
-
-export function ConfirmModal({
-  title,
-  message,
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  confirmVariant = "danger",
-  onConfirm,
-  onCancel,
-}: ConfirmModalProps) {
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm">
-        {title && <h3 className="font-medium mb-2">{title}</h3>}
-        <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
-        <div className="flex gap-2">
-          <button
-            onClick={onCancel}
-            className="flex-1 text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] btn px-4 py-2 transition"
-          >
-            {cancelText}
-          </button>
-          <button
-            onClick={onConfirm}
-            className={`flex-1 text-sm text-white px-4 py-2 btn transition ${
-              confirmVariant === "danger"
-                ? "bg-red-500 hover:bg-red-600"
-                : "bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]"
-            }`}
-          >
-            {confirmText}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Alert Modal - replaces browser alert()
-interface AlertModalProps {
-  title?: string;
-  message: string;
-  buttonText?: string;
-  variant?: "error" | "success" | "info";
-  onClose: () => void;
-}
-
-export function AlertModal({
-  title,
-  message,
-  buttonText = "OK",
-  variant = "info",
-  onClose,
-}: AlertModalProps) {
-  const iconColors = {
-    error: "bg-red-500/20 text-red-400",
-    success: "bg-green-500/20 text-green-400",
-    info: "bg-blue-500/20 text-blue-400",
-  };
-
-  const icons = {
-    error: "✕",
-    success: "✓",
-    info: "ℹ",
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-[var(--color-surface)] card p-6 w-full max-w-sm text-center">
-        <div
-          className={`w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 ${iconColors[variant]}`}
-        >
-          <span className="text-xl">{icons[variant]}</span>
-        </div>
-        {title && <h3 className="font-medium mb-2">{title}</h3>}
-        <p className="text-sm text-[var(--color-text)] mb-4">{message}</p>
-        <button
-          onClick={onClose}
-          className="w-full text-sm bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] border border-[var(--color-border-light)] px-4 py-2 btn transition"
-        >
-          {buttonText}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// Hook for using confirmation dialogs
-import { useState, useCallback } from "react";
-
-interface UseConfirmOptions {
-  title?: string;
-  confirmText?: string;
-  cancelText?: string;
-  confirmVariant?: "danger" | "primary";
-}
-
-export function useConfirm() {
-  const [state, setState] = useState<{
-    message: string;
-    options: UseConfirmOptions;
-    resolve: (value: boolean) => void;
-  } | null>(null);
-
-  const confirm = useCallback((message: string, options: UseConfirmOptions = {}) => {
-    return new Promise<boolean>((resolve) => {
-      setState({ message, options, resolve });
-    });
-  }, []);
-
-  const handleConfirm = useCallback(() => {
-    state?.resolve(true);
-    setState(null);
-  }, [state]);
-
-  const handleCancel = useCallback(() => {
-    state?.resolve(false);
-    setState(null);
-  }, [state]);
-
-  const ConfirmDialog = state ? (
-    <ConfirmModal
-      title={state.options.title}
-      message={state.message}
-      confirmText={state.options.confirmText}
-      cancelText={state.options.cancelText}
-      confirmVariant={state.options.confirmVariant}
-      onConfirm={handleConfirm}
-      onCancel={handleCancel}
-    />
-  ) : null;
-
-  return { confirm, ConfirmDialog };
-}
-
-// Hook for using alert dialogs
-interface UseAlertOptions {
-  title?: string;
-  buttonText?: string;
-  variant?: "error" | "success" | "info";
-}
-
-export function useAlert() {
-  const [state, setState] = useState<{
-    message: string;
-    options: UseAlertOptions;
-    resolve: () => void;
-  } | null>(null);
-
-  const alert = useCallback((message: string, options: UseAlertOptions = {}) => {
-    return new Promise<void>((resolve) => {
-      setState({ message, options, resolve });
-    });
-  }, []);
-
-  const handleClose = useCallback(() => {
-    state?.resolve();
-    setState(null);
-  }, [state]);
-
-  const AlertDialog = state ? (
-    <AlertModal
-      title={state.options.title}
-      message={state.message}
-      buttonText={state.options.buttonText}
-      variant={state.options.variant}
-      onClose={handleClose}
-    />
-  ) : null;
-
-  return { alert, AlertDialog };
-}

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

@@ -1,97 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-
-interface SelectOption {
-  value: string;
-  label: string;
-  recommended?: boolean;
-}
-
-interface SelectProps {
-  value: string;
-  options: SelectOption[];
-  onChange: (value: string) => void;
-  placeholder?: string;
-  compact?: boolean;
-}
-
-export function Select({ value, options, onChange, placeholder = "Select...", compact }: SelectProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const selectedOption = options.find(o => o.value === value);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div ref={ref} className="relative">
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className={`w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] btn ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between focus:outline-none focus:border-[var(--color-accent)] text-[var(--color-text)] hover:border-[var(--color-border-light)] transition`}
-      >
-        <span className={selectedOption ? "text-[var(--color-text)]" : "text-[var(--color-text-muted)]"}>
-          {selectedOption ? (
-            <>
-              {selectedOption.label}
-              {selectedOption.recommended && (
-                <span className="text-[var(--color-accent)] text-xs ml-2">(Recommended)</span>
-              )}
-            </>
-          ) : placeholder}
-        </span>
-        <ChevronIcon isOpen={isOpen} />
-      </button>
-
-      {isOpen && (
-        <div className="absolute z-50 w-full min-w-max mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] shadow-lg max-h-60 overflow-y-auto scrollbar-hide" style={{ borderRadius: "var(--radius-button)" }}>
-          {options.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => {
-                onChange(option.value);
-                setIsOpen(false);
-              }}
-              className={`w-full ${compact ? "px-2.5 py-1.5 text-sm" : "px-3 py-2"} text-left flex items-center justify-between hover:bg-[var(--color-surface-raised)] transition ${
-                option.value === value ? "bg-[var(--color-surface-raised)] text-[var(--color-accent)]" : "text-[var(--color-text)]"
-              }`}
-            >
-              <span>
-                {option.label}
-                {option.recommended && (
-                  <span className="text-[var(--color-accent)] text-xs ml-2">(Recommended)</span>
-                )}
-              </span>
-              {option.value === value && (
-                <svg className="w-4 h-4 text-[var(--color-accent)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                </svg>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ChevronIcon({ isOpen }: { isOpen: boolean }) {
-  return (
-    <svg
-      className={`w-4 h-4 text-[var(--color-text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`}
-      fill="none"
-      stroke="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-    </svg>
-  );
-}

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

@@ -1,20 +0,0 @@
-export { LoadingSpinner } from "./LoadingSpinner";
-export { Modal } from "./Modal";
-export { Select } from "./Select";
-export {
-  CheckIcon,
-  CloseIcon,
-  DashboardIcon,
-  AgentsIcon,
-  SettingsIcon,
-  MemoryIcon,
-  TasksIcon,
-  VisionIcon,
-  OperatorIcon,
-  McpIcon,
-  SkillsIcon,
-  RealtimeIcon,
-  TelemetryIcon,
-  ActivityIcon,
-  ConnectionsIcon,
-} from "./Icons";

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

@@ -1,54 +0,0 @@
-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-[var(--color-text-muted)]">
-              Manage external app connections, triggers, and webhooks.
-            </p>
-          </div>
-        </div>
-
-        {/* Tabs */}
-        <div className="flex gap-1 mb-6 bg-[var(--color-surface)] card 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-[var(--color-surface-raised)] text-white"
-                  : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
-              }`}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Tab Content */}
-        {activeTab === "overview" && <OverviewTab />}
-        {activeTab === "triggers" && <TriggersTab />}
-        {activeTab === "integrations" && <IntegrationsTab />}
-      </div>
-    </div>
-  );
-}

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

@@ -1,170 +0,0 @@
-import React, { useState, useEffect, 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;
-}
-
-interface ProviderInfo {
-  id: string;
-  name: string;
-  connected: boolean;
-}
-
-export function IntegrationsTab() {
-  const { authFetch } = useAuth();
-  const { currentProjectId } = useProjects();
-
-  const projectId = currentProjectId && currentProjectId !== "unassigned" ? currentProjectId : null;
-  const projectParam = projectId ? `?project_id=${projectId}` : "";
-
-  // Provider selection — only show configured providers
-  const [providers, setProviders] = useState<ProviderInfo[]>([]);
-  const [selectedProvider, setSelectedProvider] = useState("");
-
-  useEffect(() => {
-    authFetch(`/api/triggers/providers${projectParam}`)
-      .then(r => r.json())
-      .then(data => {
-        const connected = (data.providers || []).filter((p: ProviderInfo) => p.connected);
-        setProviders(connected);
-        if (connected.length > 0 && !connected.find((p: ProviderInfo) => p.id === selectedProvider)) {
-          setSelectedProvider(connected[0].id);
-        }
-      })
-      .catch(() => {});
-  }, [authFetch]);
-
-  // 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-[var(--color-text-muted)] mb-4">
-        Connect external apps via OAuth or API Key. Connected apps can be used for triggers and MCP integrations.
-      </p>
-
-      {/* Provider Selector — only show if multiple configured */}
-      {providers.length > 1 && (
-        <div className="flex items-center gap-2 mb-4">
-          <span className="text-xs text-[var(--color-text-muted)]">Provider:</span>
-          <div className="flex gap-1 bg-[var(--color-surface)] card p-0.5">
-            {providers.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-[var(--color-surface-raised)] text-white"
-                    : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
-                }`}
-              >
-                {p.name}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {providers.length === 0 ? (
-        <div className="bg-[var(--color-surface)] card p-8 text-center">
-          <p className="text-[var(--color-text-muted)]">No integration providers configured.</p>
-          <p className="text-sm text-[var(--color-text-faint)] mt-1">Add API keys for Composio or AgentDojo in Settings.</p>
-        </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-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
-            <div className="p-4 border-b border-[var(--color-border)] flex items-center justify-between">
-              <div>
-                <h3 className="font-medium">Trigger Types</h3>
-                <p className="text-xs text-[var(--color-text-muted)]">{browsingToolkit}</p>
-              </div>
-              <button
-                onClick={() => { setBrowsingToolkit(null); setTriggerTypes([]); }}
-                className="text-[var(--color-text-muted)] 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-[var(--color-text-muted)]">Loading trigger types...</div>
-              ) : triggerTypes.length === 0 ? (
-                <div className="text-center py-8 text-[var(--color-text-muted)]">
-                  No trigger types available for this app.
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {triggerTypes.map(tt => (
-                    <div key={tt.slug} className="bg-[var(--color-bg)] card 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-[var(--color-surface-raised)] 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-[var(--color-text-muted)] mt-0.5">{tt.description}</div>
-                          <div className="flex items-center gap-2 mt-1.5">
-                            <span className="text-[10px] bg-[var(--color-surface-raised)] text-[var(--color-text-faint)] 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>
-  );
-}

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

@@ -1,137 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useAuth, useProjects } from "../../context";
-
-interface Subscription {
-  id: string;
-  trigger_slug: string;
-  trigger_instance_id: string | null;
-  agent_id: string;
-  enabled: boolean;
-  project_id: string | null;
-  created_at: string;
-  updated_at: string;
-}
-
-interface Agent {
-  id: string;
-  name: string;
-  status: string;
-}
-
-export function OverviewTab() {
-  const { authFetch } = useAuth();
-  const { currentProjectId } = useProjects();
-
-  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
-  const [agents, setAgents] = useState<Agent[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchAll = async () => {
-      setLoading(true);
-      const projectParam = currentProjectId && currentProjectId !== "unassigned" ? `?project_id=${currentProjectId}` : "";
-
-      try {
-        const [subsRes, agentsRes] = await Promise.all([
-          authFetch(`/api/subscriptions${projectParam}`).catch(() => null),
-          authFetch(`/api/agents`).catch(() => null),
-        ]);
-
-        if (subsRes?.ok) {
-          const data = await subsRes.json();
-          setSubscriptions(data.subscriptions || []);
-        }
-        if (agentsRes?.ok) {
-          const data = await agentsRes.json();
-          setAgents(data.agents || []);
-        }
-      } catch (e) {
-        console.error("Failed to fetch overview data:", e);
-      }
-      setLoading(false);
-    };
-
-    fetchAll();
-  }, [authFetch, currentProjectId]);
-
-  if (loading) {
-    return <div className="text-center py-12 text-[var(--color-text-muted)]">Loading...</div>;
-  }
-
-  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-3 gap-4">
-        <StatCard label="Active" value={enabledSubs.length} />
-        <StatCard label="Disabled" value={disabledSubs.length} />
-        <StatCard label="Total" value={subscriptions.length} />
-      </div>
-
-      {/* Subscriptions */}
-      <section>
-        <h3 className="text-sm font-medium text-[var(--color-text-secondary)] mb-3">Subscriptions ({subscriptions.length})</h3>
-        {subscriptions.length === 0 ? (
-          <div className="bg-[var(--color-surface)] card p-6 text-center text-[var(--color-text-muted)] text-sm">
-            No subscriptions yet. Go to the Triggers tab to create one.
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {subscriptions.map(sub => {
-              const agent = agentMap.get(sub.agent_id);
-              return (
-                <div key={sub.id} className="bg-[var(--color-surface)] card p-3 flex items-center gap-3">
-                  <div className={`w-2 h-2 rounded-full flex-shrink-0 ${sub.enabled ? "bg-green-400" : "bg-[var(--color-text-faint)]"}`} />
-                  <div className="flex-1 min-w-0">
-                    <div className="text-sm font-medium truncate">
-                      {sub.trigger_slug.replace(/_/g, " ").replace(/-/g, " ")}
-                    </div>
-                    <div className="text-xs text-[var(--color-text-muted)]">
-                      {sub.trigger_instance_id
-                        ? `ID: ${sub.trigger_instance_id.slice(0, 12)}...`
-                        : "All instances"
-                      }
-                    </div>
-                  </div>
-                  <div className="text-xs text-[var(--color-text-secondary)] flex-shrink-0">
-                    <span className="text-[var(--color-text-faint)]">&rarr;</span>{" "}
-                    <span className="text-[var(--color-accent)]">{agent?.name || "Unknown Agent"}</span>
-                  </div>
-                  <span className={`text-xs px-2 py-0.5 rounded flex-shrink-0 ${
-                    sub.enabled
-                      ? "bg-green-500/10 text-green-400"
-                      : "bg-[var(--color-surface-raised)] text-[var(--color-text-faint)]"
-                  }`}>
-                    {sub.enabled ? "active" : "disabled"}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </section>
-    </div>
-  );
-}
-
-function StatCard({
-  label,
-  value,
-  valueColor,
-}: {
-  label: string;
-  value: string | number;
-  valueColor?: string;
-}) {
-  return (
-    <div className="bg-[var(--color-surface)] card p-4">
-      <div className="text-xs text-[var(--color-text-muted)] mb-1">{label}</div>
-      <div className={`text-2xl font-bold ${valueColor || "text-[var(--color-text)]"}`}>
-        {value}
-      </div>
-    </div>
-  );
-}