apteva 0.4.18 → 0.4.19

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

@@ -1,18 +1,128 @@
-import React, { useState } from "react";
-import { useTelemetryContext, useAuth, useProjects } from "../../context";
-import { MenuIcon, ChevronDownIcon } from "../common/Icons";
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useTelemetryContext, useAuth, useAuthHeaders, useProjects, useNotificationChange } from "../../context";
+import { MenuIcon, ChevronDownIcon, BellIcon } from "../common/Icons";
 import { MetaAgentButton } from "../meta-agent/MetaAgent";
 
+interface Notification {
+  id: string;
+  agent_id: string;
+  timestamp: string;
+  category: string;
+  type: string;
+  level: string;
+  error: string | null;
+  data: Record<string, unknown> | null;
+  seen?: boolean;
+}
+
 interface HeaderProps {
   onMenuClick?: () => void;
+  agents?: Array<{ id: string; name: string; projectId: string | null }>;
 }
 
-export function Header({ onMenuClick }: HeaderProps) {
+export function Header({ onMenuClick, agents = [] }: HeaderProps) {
   const { connected } = useTelemetryContext();
   const { user, logout } = useAuth();
+  const authHeaders = useAuthHeaders();
   const { projects, currentProjectId, currentProject, setCurrentProjectId, unassignedCount, projectsEnabled } = useProjects();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showProjectMenu, setShowProjectMenu] = useState(false);
+  const [showNotifications, setShowNotifications] = useState(false);
+  const [unseenCount, setUnseenCount] = useState(0);
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const notificationChange = useNotificationChange();
+  const { events } = useTelemetryContext();
+  const { accessToken } = useAuth();
+  const fetchedOnce = useRef(false);
+
+  const agentNames = React.useMemo(() => {
+    const map: Record<string, string> = {};
+    for (const a of agents) map[a.id] = a.name;
+    return map;
+  }, [agents]);
+
+  // Set of agent IDs matching the current project filter
+  const projectAgentIds = React.useMemo(() => {
+    if (!projectsEnabled || currentProjectId === null) return null; // null = show all
+    if (currentProjectId === "unassigned") return new Set(agents.filter(a => !a.projectId).map(a => a.id));
+    return new Set(agents.filter(a => a.projectId === currentProjectId).map(a => a.id));
+  }, [agents, currentProjectId, projectsEnabled]);
+
+  // Fetch initial unseen count once
+  useEffect(() => {
+    if (fetchedOnce.current || !accessToken) return;
+    fetchedOnce.current = true;
+    fetch("/api/notifications/count", { headers: { Authorization: `Bearer ${accessToken}` } })
+      .then(r => r.json())
+      .then(d => setUnseenCount(d.count || 0))
+      .catch(() => {});
+  }, [accessToken]);
+
+  // Bump count live from SSE (only if event matches current project)
+  useEffect(() => {
+    if (notificationChange === 0) return;
+    const latest = events.find(e =>
+      e.level === "error" || e.category === "ERROR" || (e.category === "system" && e.type === "agent_stopped")
+    );
+    if (latest && (!projectAgentIds || projectAgentIds.has(latest.agent_id))) {
+      setUnseenCount(c => c + 1);
+    }
+  }, [notificationChange]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Re-count when project filter changes (from cached notifications or reset)
+  const prevProjectRef = useRef(currentProjectId);
+  useEffect(() => {
+    if (prevProjectRef.current === currentProjectId) return;
+    prevProjectRef.current = currentProjectId;
+    // Refetch count with project filter
+    if (!accessToken) return;
+    fetch("/api/notifications/count", { headers: { Authorization: `Bearer ${accessToken}` } })
+      .then(r => r.json())
+      .then(d => {
+        // API returns total unseen — client filters by project
+        if (!projectAgentIds) {
+          setUnseenCount(d.count || 0);
+        } else {
+          // We need to fetch actual notifications to filter by project
+          fetch("/api/notifications?limit=200", { headers: { Authorization: `Bearer ${accessToken}` } })
+            .then(r => r.json())
+            .then(nd => {
+              const unseen = (nd.notifications || []).filter(
+                (n: Notification) => !n.seen && projectAgentIds.has(n.agent_id)
+              );
+              setUnseenCount(unseen.length);
+            })
+            .catch(() => {});
+        }
+      })
+      .catch(() => {});
+  }, [currentProjectId, accessToken, projectAgentIds]);
+
+  const openNotifications = useCallback(async () => {
+    setShowNotifications(prev => !prev);
+    if (!showNotifications) {
+      try {
+        const headers: Record<string, string> = { "Content-Type": "application/json" };
+        if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+        const res = await fetch("/api/notifications?limit=50", { headers });
+        const data = await res.json();
+        let items: Notification[] = data.notifications || [];
+        if (projectAgentIds) items = items.filter(n => projectAgentIds.has(n.agent_id));
+        setNotifications(items);
+        // Mark all as seen
+        if (unseenCount > 0) {
+          await fetch("/api/notifications/mark-seen", {
+            method: "POST",
+            headers,
+            body: JSON.stringify({ all: true }),
+          });
+          setUnseenCount(0);
+        }
+      } catch {
+        // Ignore
+      }
+    }
+  }, [showNotifications, unseenCount, accessToken, projectAgentIds]);
 
   const handleLogout = async () => {
     await logout();
@@ -123,6 +233,77 @@ export function Header({ onMenuClick }: HeaderProps) {
               {connected ? "Live" : "Offline"}
             </span>
           </div>
+          {/* Notification Bell */}
+          <div className="relative">
+            <button
+              onClick={openNotifications}
+              className="relative p-2 text-[#666] hover:text-[#e0e0e0] transition rounded hover:bg-[#1a1a1a]"
+            >
+              <BellIcon className="w-5 h-5" />
+              {unseenCount > 0 && (
+                <span
+                  className="absolute flex items-center justify-center bg-red-500 text-white font-bold rounded-full pointer-events-none"
+                  style={{
+                    top: 2,
+                    right: 2,
+                    fontSize: 9,
+                    lineHeight: 1,
+                    minWidth: 16,
+                    height: 16,
+                    padding: "0 4px",
+                  }}
+                >
+                  {unseenCount > 99 ? "99+" : unseenCount}
+                </span>
+              )}
+            </button>
+            {showNotifications && (
+              <>
+                <div className="fixed inset-0 z-40" onClick={() => setShowNotifications(false)} />
+                <div className="absolute right-0 top-full mt-1 w-80 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto">
+                  <div className="px-4 py-3 border-b border-[#222] flex items-center justify-between">
+                    <span className="text-sm font-medium">Notifications</span>
+                    {notifications.length > 0 && (
+                      <span className="text-xs text-[#666]">{notifications.length} recent</span>
+                    )}
+                  </div>
+                  {notifications.length === 0 ? (
+                    <div className="px-4 py-8 text-center text-sm text-[#666]">
+                      No notifications
+                    </div>
+                  ) : (
+                    <div className="py-1">
+                      {notifications.map(n => (
+                        <div key={n.id} className={`px-4 py-3 hover:bg-[#1a1a1a] transition border-b border-[#1a1a1a] ${!n.seen ? "bg-[#0f0f0f]" : ""}`}>
+                          <div className="flex items-center gap-2 mb-1">
+                            <span className={`w-2 h-2 rounded-full flex-shrink-0 ${
+                              !n.seen
+                                ? (n.level === "error" || n.category === "ERROR" ? "bg-red-400" : "bg-[#f97316]")
+                                : "bg-[#333]"
+                            }`} />
+                            <span className={`text-xs font-medium truncate ${!n.seen ? "text-[#ccc]" : "text-[#666]"}`}>
+                              {n.category === "system" && n.type === "agent_stopped" ? "Agent Stopped" :
+                               n.category === "ERROR" ? "Error" :
+                               `${n.category} / ${n.type}`}
+                            </span>
+                            <span className="text-[10px] text-[#555] ml-auto flex-shrink-0">
+                              {formatNotifTime(n.timestamp)}
+                            </span>
+                          </div>
+                          <div className={`text-xs truncate ${!n.seen ? "text-[#aaa]" : "text-[#666]"}`}>
+                            {n.error || (n.data as any)?.message || (n.data as any)?.error || `${n.type} event`}
+                          </div>
+                          <div className="text-[10px] text-[#555] mt-1">
+                            {agentNames[n.agent_id] || n.agent_id.slice(0, 8)}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
           <MetaAgentButton />
           {user && (
             <div className="relative">
@@ -156,3 +337,14 @@ export function Header({ onMenuClick }: HeaderProps) {
     </header>
   );
 }
+
+function formatNotifTime(timestamp: string): string {
+  const diff = Date.now() - new Date(timestamp).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}

package/src/web/components/settings/SettingsPage.tsx

@@ -5,7 +5,7 @@ import { Select } from "../common/Select";
 import { useProjects, useAuth, type Project } from "../../context";
 import type { Provider } from "../../types";
 
-type SettingsTab = "general" | "providers" | "projects" | "api-keys" | "account" | "updates" | "data";
+type SettingsTab = "general" | "providers" | "projects" | "channels" | "api-keys" | "account" | "updates" | "data";
 
 export function SettingsPage() {
   const { projectsEnabled } = useProjects();
@@ -15,6 +15,7 @@ export function SettingsPage() {
     { key: "general", label: "General" },
     { key: "providers", label: "Providers" },
     ...(projectsEnabled ? [{ key: "projects" as SettingsTab, label: "Projects" }] : []),
+    { key: "channels", label: "Channels" },
     { key: "api-keys", label: "API Keys" },
     { key: "account", label: "Account" },
     { key: "updates", label: "Updates" },
@@ -62,6 +63,7 @@ export function SettingsPage() {
         {activeTab === "general" && <GeneralSettings />}
         {activeTab === "providers" && <ProvidersSettings />}
         {activeTab === "projects" && projectsEnabled && <ProjectsSettings />}
+        {activeTab === "channels" && <ChannelsSettings />}
         {activeTab === "api-keys" && <ApiKeysSettings />}
         {activeTab === "account" && <AccountSettings />}
         {activeTab === "updates" && <UpdatesSettings />}
@@ -1884,3 +1886,269 @@ function DataSettings() {
     </>
   );
 }
+
+// --- Channels Settings ---
+
+interface ChannelInfo {
+  id: string;
+  type: string;
+  name: string;
+  agent_id: string;
+  status: "stopped" | "running" | "error";
+  error: string | null;
+  created_at: string;
+}
+
+interface AgentOption {
+  id: string;
+  name: string;
+  status: string;
+}
+
+function ChannelsSettings() {
+  const { authFetch } = useAuth();
+  const [channels, setChannels] = useState<ChannelInfo[]>([]);
+  const [agents, setAgents] = useState<AgentOption[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+  const [formData, setFormData] = useState({ name: "", agent_id: "", botToken: "" });
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const fetchChannels = async () => {
+    try {
+      const res = await authFetch("/api/channels");
+      const data = await res.json();
+      setChannels(data.channels || []);
+    } catch {
+      // Ignore
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchAgents = async () => {
+    try {
+      const res = await authFetch("/api/agents");
+      const data = await res.json();
+      setAgents((data.agents || []).map((a: any) => ({ id: a.id, name: a.name, status: a.status })));
+    } catch {
+      // Ignore
+    }
+  };
+
+  useEffect(() => {
+    fetchChannels();
+    fetchAgents();
+  }, []);
+
+  const createChannel = async () => {
+    if (!formData.name || !formData.agent_id || !formData.botToken) return;
+    setCreating(true);
+    setError(null);
+
+    try {
+      const res = await authFetch("/api/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: "telegram",
+          name: formData.name,
+          agent_id: formData.agent_id,
+          config: { botToken: formData.botToken },
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || "Failed to create channel");
+      } else {
+        setFormData({ name: "", agent_id: "", botToken: "" });
+        setShowForm(false);
+        await fetchChannels();
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const toggleChannel = async (channel: ChannelInfo) => {
+    const action = channel.status === "running" ? "stop" : "start";
+    try {
+      const res = await authFetch(`/api/channels/${channel.id}/${action}`, { method: "POST" });
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error || `Failed to ${action} channel`);
+      }
+      await fetchChannels();
+    } catch {
+      setError(`Failed to ${action} channel`);
+    }
+  };
+
+  const deleteChannel = async (channel: ChannelInfo) => {
+    const confirmed = await confirm(`Delete channel "${channel.name}"?`, {
+      confirmText: "Delete",
+      title: "Delete Channel",
+    });
+    if (!confirmed) return;
+
+    try {
+      await authFetch(`/api/channels/${channel.id}`, { method: "DELETE" });
+      await fetchChannels();
+    } catch {
+      // Ignore
+    }
+  };
+
+  const statusColors: Record<string, string> = {
+    running: "bg-green-500/20 text-green-400",
+    stopped: "bg-[#333] text-[#666]",
+    error: "bg-red-500/20 text-red-400",
+  };
+
+  const getAgentName = (agentId: string) => {
+    return agents.find(a => a.id === agentId)?.name || agentId;
+  };
+
+  return (
+    <>
+    {ConfirmDialog}
+    <div className="max-w-2xl">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-xl font-semibold mb-1">Channels</h2>
+          <p className="text-sm text-[#666]">Connect agents to external messaging platforms</p>
+        </div>
+        <button
+          onClick={() => setShowForm(!showForm)}
+          className="flex items-center gap-2 bg-[#f97316] hover:bg-[#fb923c] text-black px-3 py-1.5 rounded text-sm font-medium transition"
+        >
+          <PlusIcon /> Add Channel
+        </button>
+      </div>
+
+      {error && (
+        <div className="mb-4 bg-red-500/10 text-red-400 border border-red-500/30 px-3 py-2 rounded text-sm flex items-center justify-between">
+          <span>{error}</span>
+          <button onClick={() => setError(null)} className="text-red-400 hover:text-red-300 ml-2">
+            <CloseIcon />
+          </button>
+        </div>
+      )}
+
+      {/* Create form */}
+      {showForm && (
+        <div className="mb-6 bg-[#111] border border-[#1a1a1a] rounded-lg p-4 space-y-3">
+          <h3 className="text-sm font-medium text-[#888] mb-2">New Telegram Channel</h3>
+
+          <div>
+            <label className="block text-xs text-[#666] mb-1">Channel Name</label>
+            <input
+              type="text"
+              value={formData.name}
+              onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}
+              placeholder="e.g. My Telegram Bot"
+              className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-[#666] mb-1">Agent</label>
+            <Select
+              value={formData.agent_id}
+              options={agents.map(a => ({ value: a.id, label: a.name }))}
+              onChange={value => setFormData(prev => ({ ...prev, agent_id: value }))}
+              placeholder="Select an agent..."
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-[#666] mb-1">Bot Token</label>
+            <input
+              type="password"
+              value={formData.botToken}
+              onChange={e => setFormData(prev => ({ ...prev, botToken: e.target.value }))}
+              placeholder="From @BotFather on Telegram"
+              className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+            />
+            <p className="text-xs text-[#555] mt-1">
+              Create a bot via <a href="https://t.me/BotFather" target="_blank" className="text-[#f97316] hover:underline">@BotFather</a> on Telegram to get a token.
+            </p>
+          </div>
+
+          <div className="flex gap-2 pt-1">
+            <button
+              onClick={createChannel}
+              disabled={creating || !formData.name || !formData.agent_id || !formData.botToken}
+              className="bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-black px-4 py-1.5 rounded text-sm font-medium transition"
+            >
+              {creating ? "Creating..." : "Create"}
+            </button>
+            <button
+              onClick={() => { setShowForm(false); setFormData({ name: "", agent_id: "", botToken: "" }); }}
+              className="border border-[#333] hover:border-[#444] px-4 py-1.5 rounded text-sm transition"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Channel list */}
+      {loading ? (
+        <p className="text-[#666] text-sm">Loading channels...</p>
+      ) : channels.length === 0 ? (
+        <div className="text-center py-12 text-[#666]">
+          <p className="text-lg mb-2">No channels configured</p>
+          <p className="text-sm">Add a Telegram channel to let users message your agents directly.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {channels.map(channel => (
+            <div key={channel.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium">{channel.name}</h3>
+                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[channel.status] || statusColors.stopped}`}>
+                      {channel.status}
+                    </span>
+                  </div>
+                  <p className="text-sm text-[#666]">
+                    {channel.type === "telegram" ? "Telegram" : channel.type} → {getAgentName(channel.agent_id)}
+                  </p>
+                  {channel.status === "error" && channel.error && (
+                    <p className="text-xs text-red-400 mt-1">{channel.error}</p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 ml-4">
+                  <button
+                    onClick={() => toggleChannel(channel)}
+                    className={`px-3 py-1 rounded text-xs font-medium transition ${
+                      channel.status === "running"
+                        ? "bg-[#f97316]/20 text-[#f97316] hover:bg-[#f97316]/30"
+                        : "bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30"
+                    }`}
+                  >
+                    {channel.status === "running" ? "Stop" : "Start"}
+                  </button>
+                  <button
+                    onClick={() => deleteChannel(channel)}
+                    className="text-[#666] hover:text-red-400 transition text-sm"
+                  >
+                    ×
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+    </>
+  );
+}

package/src/web/context/TelemetryContext.tsx

@@ -21,6 +21,7 @@ interface TelemetryContextValue {
   activeAgents: Record<string, { type: string; expiresAt: number }>;
   statusChangeCounter: number;
   taskChangeCounter: number;
+  notificationCounter: number;
   clearEvents: () => void;
 }
 
@@ -35,6 +36,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   const [activeAgents, setActiveAgents] = useState<Record<string, { type: string; expiresAt: number }>>({});
   const [statusChangeCounter, setStatusChangeCounter] = useState(0);
   const [taskChangeCounter, setTaskChangeCounter] = useState(0);
+  const [notificationCounter, setNotificationCounter] = useState(0);
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -124,6 +126,11 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
             if (data.some((e: TelemetryEvent) => e.category === "TASK" && (e.type === "task_created" || e.type === "task_updated" || e.type === "task_deleted"))) {
               setTaskChangeCounter(c => c + 1);
             }
+
+            // Detect notification-worthy events (errors, agent crashes)
+            if (data.some((e: TelemetryEvent) => e.level === "error" || e.category === "ERROR" || (e.category === "system" && e.type === "agent_stopped"))) {
+              setNotificationCounter(c => c + 1);
+            }
           }
         } catch {
           // Ignore parse errors (likely keepalive or empty message)
@@ -169,7 +176,7 @@ export function TelemetryProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   return (
-    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, statusChangeCounter, taskChangeCounter, clearEvents }}>
+    <TelemetryContext.Provider value={{ connected, events, lastActivityByAgent, activeAgents, statusChangeCounter, taskChangeCounter, notificationCounter, clearEvents }}>
       {children}
     </TelemetryContext.Provider>
   );
@@ -248,3 +255,9 @@ export function useTaskChange(): number {
   const { taskChangeCounter } = useTelemetryContext();
   return taskChangeCounter;
 }
+
+// Hook to trigger notification badge refresh
+export function useNotificationChange(): number {
+  const { notificationCounter } = useTelemetryContext();
+  return notificationCounter;
+}

package/src/web/context/index.ts

@@ -1,4 +1,4 @@
-export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity, useAgentStatusChange, useTaskChange } from "./TelemetryContext";
+export { TelemetryProvider, useTelemetryContext, useTelemetry, useAgentActivity, useAgentStatusChange, useTaskChange, useNotificationChange } from "./TelemetryContext";
 export type { TelemetryEvent } from "./TelemetryContext";
 
 export { AuthProvider, useAuth, useAuthHeaders } from "./AuthContext";

package/dist/ActivityPage.yv28a2vj.js

@@ -1,3 +0,0 @@
-import{d as a}from"./App.fjrh28tf.js";import"./App.nft7h9jt.js";import"./App.tb0y0jmt.js";export{a as ActivityPage};
-
-//# debugId=A836402CCF3683F564756E2164756E21

package/dist/ApiDocsPage.4ccwjjbk.js

@@ -1,4 +0,0 @@
-import{P as y,S as E,T as D,_ as l}from"./App.tb0y0jmt.js";var M=y(E(),1);var z=y(D(),1),V={get:"#61affe",post:"#49cc90",put:"#fca130",delete:"#f93e3e",patch:"#50e3c2"};function c({method:I,path:A,parameters:F,requestBody:L,authFetch:T}){let[U,R]=M.useState({}),[G,O]=M.useState(""),[_,k]=M.useState(null),[w,q]=M.useState(!1),[B,f]=M.useState(null);M.useEffect(()=>{if(L?.content?.["application/json"]?.schema){let W=L.content["application/json"].schema;if(W.example)O(JSON.stringify(W.example,null,2));else if(W.properties){let $={};for(let[N,Q]of Object.entries(W.properties))if(Q.example!==void 0)$[N]=Q.example;else if(Q.type==="string")$[N]="";else if(Q.type==="number"||Q.type==="integer")$[N]=0;else if(Q.type==="boolean")$[N]=!1;else if(Q.type==="array")$[N]=[];else if(Q.type==="object")$[N]={};O(JSON.stringify($,null,2))}}},[L]);let C=async()=>{q(!0),f(null),k(null);try{let W=A,$=[];for(let Z of F||[]){let H=U[Z.name]||"";if(Z.in==="path")W=W.replace(`{${Z.name}}`,encodeURIComponent(H));else if(Z.in==="query"&&H)$.push(`${Z.name}=${encodeURIComponent(H)}`)}if($.length>0)W+=`?${$.join("&")}`;let N={method:I.toUpperCase()};if(G&&["post","put","patch"].includes(I))N.headers={"Content-Type":"application/json"},N.body=G;let Q=await T(`/api${W}`,N),X;if(Q.headers.get("content-type")?.includes("application/json"))X=await Q.json();else X=await Q.text();k({status:Q.status,data:X})}catch(W){f(W.message||"Request failed")}finally{q(!1)}},b=F?.filter((W)=>W.in==="path")||[],K=F?.filter((W)=>W.in==="query")||[],S=["post","put","patch"].includes(I)&&L;return z.jsxDEV("div",{style:{marginTop:16,padding:16,background:"#0a0a14",borderRadius:6,border:"1px solid #222"},children:[z.jsxDEV("h4",{style:{fontSize:13,color:"#f97316",marginBottom:12,fontWeight:600},children:"Try it out"},void 0,!1,void 0,this),b.length>0&&z.jsxDEV("div",{style:{marginBottom:12},children:[z.jsxDEV("div",{style:{fontSize:11,color:"#666",marginBottom:6},children:"Path Parameters"},void 0,!1,void 0,this),b.map((W)=>z.jsxDEV("div",{style:{marginBottom:8},children:[z.jsxDEV("label",{style:{fontSize:12,color:"#888",display:"block",marginBottom:4},children:[W.name," ",W.required&&z.jsxDEV("span",{style:{color:"#f66"},children:"*"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("input",{type:"text",value:U[W.name]||"",onChange:($)=>R({...U,[W.name]:$.target.value}),placeholder:W.schema?.type||"string",style:{width:"100%",padding:"8px 12px",background:"#111",border:"1px solid #333",borderRadius:4,color:"#fff",fontSize:13,fontFamily:"monospace"}},void 0,!1,void 0,this)]},W.name,!0,void 0,this))]},void 0,!0,void 0,this),K.length>0&&z.jsxDEV("div",{style:{marginBottom:12},children:[z.jsxDEV("div",{style:{fontSize:11,color:"#666",marginBottom:6},children:"Query Parameters"},void 0,!1,void 0,this),K.map((W)=>z.jsxDEV("div",{style:{marginBottom:8},children:[z.jsxDEV("label",{style:{fontSize:12,color:"#888",display:"block",marginBottom:4},children:[W.name," ",W.required&&z.jsxDEV("span",{style:{color:"#f66"},children:"*"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("input",{type:"text",value:U[W.name]||"",onChange:($)=>R({...U,[W.name]:$.target.value}),placeholder:W.schema?.type||"string",style:{width:"100%",padding:"8px 12px",background:"#111",border:"1px solid #333",borderRadius:4,color:"#fff",fontSize:13,fontFamily:"monospace"}},void 0,!1,void 0,this)]},W.name,!0,void 0,this))]},void 0,!0,void 0,this),S&&z.jsxDEV("div",{style:{marginBottom:12},children:[z.jsxDEV("div",{style:{fontSize:11,color:"#666",marginBottom:6},children:"Request Body (JSON)"},void 0,!1,void 0,this),z.jsxDEV("textarea",{value:G,onChange:(W)=>O(W.target.value),rows:6,style:{width:"100%",padding:"8px 12px",background:"#111",border:"1px solid #333",borderRadius:4,color:"#fff",fontSize:12,fontFamily:"monospace",resize:"vertical"}},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("button",{onClick:C,disabled:w,style:{padding:"10px 20px",background:w?"#333":"#f97316",color:w?"#666":"#000",border:"none",borderRadius:4,cursor:w?"not-allowed":"pointer",fontSize:13,fontWeight:600},children:w?"Executing...":"Execute"},void 0,!1,void 0,this),B&&z.jsxDEV("div",{style:{marginTop:12,padding:12,background:"#2a1515",borderRadius:4,color:"#f66",fontSize:12},children:B},void 0,!1,void 0,this),_&&z.jsxDEV("div",{style:{marginTop:12},children:[z.jsxDEV("div",{style:{fontSize:11,color:"#666",marginBottom:6},children:["Response"," ",z.jsxDEV("span",{style:{color:_.status>=200&&_.status<300?"#49cc90":"#f66"},children:_.status},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("pre",{style:{padding:12,background:"#111",borderRadius:4,color:"#888",fontSize:11,fontFamily:"monospace",overflow:"auto",maxHeight:300,whiteSpace:"pre-wrap",wordBreak:"break-word"},children:typeof _.data==="string"?_.data:JSON.stringify(_.data,null,2)},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)}function h(){let{authFetch:I}=l(),[A,F]=M.useState(null),[L,T]=M.useState(!0),[U,R]=M.useState(new Set),[G,O]=M.useState(null),[_,k]=M.useState(!1);M.useEffect(()=>{B()},[]);async function w(){if(!A)return;try{await navigator.clipboard.writeText(JSON.stringify(A,null,2)),k(!0),setTimeout(()=>k(!1),2000)}catch(N){console.error("Failed to copy:",N)}}function q(){if(!A)return;let N=new Blob([JSON.stringify(A,null,2)],{type:"application/json"}),Q=URL.createObjectURL(N),X=document.createElement("a");X.href=Q,X.download="apteva-openapi.json",X.click(),URL.revokeObjectURL(Q)}async function B(){try{let N=await I("/api/openapi");if(N.ok){let Q=await N.json();F(Q)}}catch(N){console.error("Failed to load OpenAPI spec:",N)}finally{T(!1)}}function f(N){R((Q)=>{let X=new Set(Q);if(X.has(N))X.delete(N);else X.add(N);return X})}function C(N,Q=0){if(!N)return"{}";if(Q>2)return"...";if(N.$ref)return N.$ref.split("/").pop()||"Object";if(N.type==="array")return`${C(N.items,Q+1)}[]`;if(N.type==="object"&&N.properties){let X=Object.entries(N.properties).slice(0,3).map(([Z,H])=>`${Z}: ${H.type||"any"}`).join(", "),Y=Object.keys(N.properties).length>3?", ...":"";return`{ ${X}${Y} }`}return N.type||"any"}if(L)return z.jsxDEV("div",{style:{padding:24},children:z.jsxDEV("p",{style:{color:"#888"},children:"Loading API documentation..."},void 0,!1,void 0,this)},void 0,!1,void 0,this);if(!A)return z.jsxDEV("div",{style:{padding:24},children:z.jsxDEV("p",{style:{color:"#f66"},children:"Failed to load API documentation"},void 0,!1,void 0,this)},void 0,!1,void 0,this);let b=A.tags||[],K=Object.entries(A.paths);function S(N){let Q=new Set;function X(Y){if(!Y)return;if(typeof Y==="object"){if(Y.$ref){let Z=Y.$ref.split("/").pop();if(Z)Q.add(Z)}for(let Z of Object.values(Y))X(Z)}}return X(N.requestBody),X(N.responses),Q}function W(){if(!G||!A.components?.schemas)return Object.keys(A.components?.schemas||{});let N=new Set;for(let[Q,X]of $)for(let[Y,Z]of Object.entries(X)){if(!["get","post","put","delete","patch"].includes(Y))continue;if(Z.tags?.includes(G))S(Z).forEach((g)=>N.add(g))}return Array.from(N)}let $=G?K.filter(([N,Q])=>Object.values(Q).some((X)=>X.tags?.includes(G))):K;return z.jsxDEV("div",{style:{padding:24,maxWidth:1000,height:"100%",overflowY:"auto"},children:[z.jsxDEV("div",{style:{marginBottom:24},children:[z.jsxDEV("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:8},children:[z.jsxDEV("h1",{style:{fontSize:24,fontWeight:600},children:A.info.title},void 0,!1,void 0,this),z.jsxDEV("div",{style:{display:"flex",gap:8},children:[z.jsxDEV("button",{onClick:w,style:{padding:"8px 16px",borderRadius:4,border:"1px solid #333",background:_?"#49cc90":"#1a1a2e",color:_?"#000":"#fff",cursor:"pointer",fontSize:12,fontFamily:"inherit"},children:_?"Copied!":"Copy JSON"},void 0,!1,void 0,this),z.jsxDEV("button",{onClick:q,style:{padding:"8px 16px",borderRadius:4,border:"1px solid #333",background:"#1a1a2e",color:"#fff",cursor:"pointer",fontSize:12,fontFamily:"inherit"},children:"Download"},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("p",{style:{color:"#888",marginBottom:8},children:A.info.description.split(`
-`)[0]},void 0,!1,void 0,this),z.jsxDEV("p",{style:{color:"#666",fontSize:12},children:["Version: ",A.info.version]},void 0,!0,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("div",{style:{background:"#1a1a2e",padding:12,borderRadius:6,marginBottom:24,fontFamily:"monospace"},children:[z.jsxDEV("span",{style:{color:"#888"},children:"Base URL: "},void 0,!1,void 0,this),z.jsxDEV("span",{style:{color:"#61affe"},children:[window.location.origin,"/api"]},void 0,!0,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("div",{style:{marginBottom:24,display:"flex",flexWrap:"wrap",gap:8},children:[z.jsxDEV("button",{onClick:()=>O(null),style:{padding:"6px 12px",borderRadius:4,border:"1px solid #333",background:G===null?"#333":"transparent",color:G===null?"#fff":"#888",cursor:"pointer",fontSize:12},children:"All"},void 0,!1,void 0,this),b.map((N)=>z.jsxDEV("button",{onClick:()=>O(N.name),style:{padding:"6px 12px",borderRadius:4,border:"1px solid #333",background:G===N.name?"#333":"transparent",color:G===N.name?"#fff":"#888",cursor:"pointer",fontSize:12},title:N.description,children:N.name},N.name,!1,void 0,this))]},void 0,!0,void 0,this),z.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:8},children:$.map(([N,Q])=>Object.entries(Q).filter(([X])=>["get","post","put","delete","patch"].includes(X)).map(([X,Y])=>{let Z=`${X}:${N}`,H=U.has(Z),g=X.toUpperCase(),j=V[X]||"#888";return z.jsxDEV("div",{style:{border:"1px solid #333",borderRadius:6,overflow:"hidden"},children:[z.jsxDEV("div",{onClick:()=>f(Z),style:{display:"flex",alignItems:"center",gap:12,padding:"12px 16px",background:H?"#1a1a2e":"transparent",cursor:"pointer"},children:[z.jsxDEV("span",{style:{background:j,color:"#000",padding:"4px 8px",borderRadius:4,fontSize:11,fontWeight:600,minWidth:60,textAlign:"center"},children:g},void 0,!1,void 0,this),z.jsxDEV("span",{style:{fontFamily:"monospace",color:"#fff"},children:N},void 0,!1,void 0,this),z.jsxDEV("span",{style:{color:"#888",flex:1,fontSize:13},children:Y.summary},void 0,!1,void 0,this),z.jsxDEV("span",{style:{color:"#666",fontSize:12},children:H?"[-]":"[+]"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),H&&z.jsxDEV("div",{style:{padding:16,background:"#0d0d1a",borderTop:"1px solid #333"},children:[Y.description&&z.jsxDEV("p",{style:{color:"#888",marginBottom:16,fontSize:13},children:Y.description},void 0,!1,void 0,this),Y.parameters&&Y.parameters.length>0&&z.jsxDEV("div",{style:{marginBottom:16},children:[z.jsxDEV("h4",{style:{fontSize:13,color:"#888",marginBottom:8},children:"Parameters"},void 0,!1,void 0,this),z.jsxDEV("div",{style:{background:"#1a1a2e",borderRadius:4,padding:12},children:Y.parameters.map((J)=>z.jsxDEV("div",{style:{display:"flex",gap:12,marginBottom:8,fontSize:12},children:[z.jsxDEV("span",{style:{color:"#61affe",minWidth:100},children:[J.name,J.required&&z.jsxDEV("span",{style:{color:"#f66"},children:"*"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("span",{style:{color:"#666"},children:["(",J.in,")"]},void 0,!0,void 0,this),z.jsxDEV("span",{style:{color:"#888"},children:J.schema?.type||"string"},void 0,!1,void 0,this),J.description&&z.jsxDEV("span",{style:{color:"#666"},children:["- ",J.description]},void 0,!0,void 0,this)]},J.name,!0,void 0,this))},void 0,!1,void 0,this)]},void 0,!0,void 0,this),Y.requestBody&&z.jsxDEV("div",{style:{marginBottom:16},children:[z.jsxDEV("h4",{style:{fontSize:13,color:"#888",marginBottom:8},children:["Request Body",Y.requestBody.required&&z.jsxDEV("span",{style:{color:"#f66"},children:" (required)"},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("div",{style:{background:"#1a1a2e",borderRadius:4,padding:12,fontFamily:"monospace",fontSize:12,color:"#49cc90"},children:Object.entries(Y.requestBody.content||{}).map(([J,P])=>z.jsxDEV("div",{children:[z.jsxDEV("span",{style:{color:"#666"},children:[J,": "]},void 0,!0,void 0,this),C(P.schema)]},J,!0,void 0,this))},void 0,!1,void 0,this)]},void 0,!0,void 0,this),Y.responses&&z.jsxDEV("div",{children:[z.jsxDEV("h4",{style:{fontSize:13,color:"#888",marginBottom:8},children:"Responses"},void 0,!1,void 0,this),z.jsxDEV("div",{style:{background:"#1a1a2e",borderRadius:4,padding:12},children:Object.entries(Y.responses).map(([J,P])=>{let v=P.content?.["application/json"]?.schema,u=v?.$ref?.split("/").pop(),n=v?.type,i=v?.items?.$ref?.split("/").pop();return z.jsxDEV("div",{style:{marginBottom:12,fontSize:12},children:[z.jsxDEV("div",{style:{display:"flex",gap:12,marginBottom:4},children:[z.jsxDEV("span",{style:{color:J.startsWith("2")?"#49cc90":"#f66",minWidth:40},children:J},void 0,!1,void 0,this),z.jsxDEV("span",{style:{color:"#888"},children:P.description},void 0,!1,void 0,this)]},void 0,!0,void 0,this),v&&z.jsxDEV("div",{style:{marginLeft:52,padding:"8px 12px",background:"#0d0d1a",borderRadius:4,fontFamily:"monospace"},children:u?z.jsxDEV("span",{style:{color:"#61affe"},children:u},void 0,!1,void 0,this):n==="array"&&i?z.jsxDEV("span",{style:{color:"#61affe"},children:[i,"[]"]},void 0,!0,void 0,this):n==="array"?z.jsxDEV("span",{style:{color:"#888"},children:"array"},void 0,!1,void 0,this):z.jsxDEV("span",{style:{color:"#888"},children:C(v)},void 0,!1,void 0,this)},void 0,!1,void 0,this)]},J,!0,void 0,this)})},void 0,!1,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV(c,{method:X,path:N,parameters:Y.parameters,requestBody:Y.requestBody,authFetch:I},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},Z,!0,void 0,this)}))},void 0,!1,void 0,this),A.components?.schemas&&W().length>0&&z.jsxDEV("div",{style:{marginTop:32},children:[z.jsxDEV("h2",{style:{fontSize:18,fontWeight:600,marginBottom:16},children:["Schemas ",G&&z.jsxDEV("span",{style:{color:"#666",fontSize:14},children:["(",G,")"]},void 0,!0,void 0,this)]},void 0,!0,void 0,this),z.jsxDEV("div",{style:{display:"flex",flexDirection:"column",gap:8},children:W().map((N)=>{let Q=A.components.schemas[N];if(!Q)return null;return z.jsxDEV("div",{style:{border:"1px solid #333",borderRadius:6,padding:12},children:[z.jsxDEV("h3",{style:{fontSize:14,color:"#61affe",marginBottom:8},children:N},void 0,!1,void 0,this),Q.properties&&z.jsxDEV("div",{style:{fontSize:12},children:Object.entries(Q.properties).map(([X,Y])=>z.jsxDEV("div",{style:{display:"flex",gap:8,marginBottom:4,fontFamily:"monospace"},children:[z.jsxDEV("span",{style:{color:"#fff",minWidth:120},children:X},void 0,!1,void 0,this),z.jsxDEV("span",{style:{color:"#888"},children:[Y.type||(Y.$ref?Y.$ref.split("/").pop():"any"),Y.nullable&&" | null"]},void 0,!0,void 0,this),Y.enum&&z.jsxDEV("span",{style:{color:"#666"},children:["[",Y.enum.join(" | "),"]"]},void 0,!0,void 0,this)]},X,!0,void 0,this))},void 0,!1,void 0,this)]},N,!0,void 0,this)})},void 0,!1,void 0,this)]},void 0,!0,void 0,this)]},void 0,!0,void 0,this)}export{h as ApiDocsPage};
-
-//# debugId=C23C784EFCF3231E64756E2164756E21