@desplega.ai/agent-swarm 1.20.0 → 1.51.2

package/ui/src/hooks/queries.ts

@@ -1,353 +0,0 @@
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { api } from "../lib/api";
-import type { AgentWithTasks, SessionCost, UsageStats } from "../types/api";
-
-export function useAgents() {
-  return useQuery({
-    queryKey: ["agents"],
-    queryFn: () => api.fetchAgents(true),
-    select: (data) => data.agents as AgentWithTasks[],
-  });
-}
-
-export function useAgent(id: string) {
-  return useQuery({
-    queryKey: ["agent", id],
-    queryFn: () => api.fetchAgent(id),
-    enabled: !!id,
-  });
-}
-
-export function useUpdateAgentName() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ id, name }: { id: string; name: string }) => api.updateAgentName(id, name),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agents"] });
-      queryClient.invalidateQueries({ queryKey: ["agent"] });
-    },
-  });
-}
-
-export function useUpdateAgentProfile() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({
-      id,
-      profile,
-    }: {
-      id: string;
-      profile: { role?: string; description?: string; capabilities?: string[]; claudeMd?: string };
-    }) => api.updateAgentProfile(id, profile),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["agents"] });
-      queryClient.invalidateQueries({ queryKey: ["agent"] });
-    },
-  });
-}
-
-export interface TaskFilters {
-  status?: string;
-  agentId?: string;
-  search?: string;
-}
-
-export function useTasks(filters?: TaskFilters) {
-  return useQuery({
-    queryKey: ["tasks", filters],
-    queryFn: () => api.fetchTasks(filters),
-    select: (data) => ({ tasks: data.tasks, total: data.total }),
-  });
-}
-
-export function useTask(id: string) {
-  return useQuery({
-    queryKey: ["task", id],
-    queryFn: () => api.fetchTask(id),
-    enabled: !!id,
-  });
-}
-
-export function useTaskSessionLogs(taskId: string) {
-  return useQuery({
-    queryKey: ["task", taskId, "session-logs"],
-    queryFn: () => api.fetchTaskSessionLogs(taskId),
-    enabled: !!taskId,
-    refetchInterval: 5000, // Refresh every 5 seconds for live updates
-  });
-}
-
-export function useLogs(limit = 50, agentId?: string) {
-  return useQuery({
-    queryKey: ["logs", limit, agentId],
-    queryFn: () => api.fetchLogs(limit, agentId),
-    select: (data) => data.logs,
-  });
-}
-
-export function useStats() {
-  return useQuery({
-    queryKey: ["stats"],
-    queryFn: () => api.fetchStats(),
-  });
-}
-
-export function useHealth() {
-  return useQuery({
-    queryKey: ["health"],
-    queryFn: () => api.checkHealth(),
-    refetchInterval: 10000, // Check every 10 seconds
-    retry: 2,
-    retryDelay: 1000,
-  });
-}
-
-export function useChannels() {
-  return useQuery({
-    queryKey: ["channels"],
-    queryFn: () => api.fetchChannels(),
-    select: (data) => data.channels,
-  });
-}
-
-export interface MessageFilters {
-  limit?: number;
-  since?: string;
-  before?: string;
-}
-
-export function useMessages(channelId: string, filters?: MessageFilters) {
-  return useQuery({
-    queryKey: ["messages", channelId, filters],
-    queryFn: () => api.fetchMessages(channelId, filters),
-    select: (data) => data.messages,
-    enabled: !!channelId,
-  });
-}
-
-const DEFAULT_MESSAGE_LIMIT = 100;
-
-export function useInfiniteMessages(channelId: string, pageSize = DEFAULT_MESSAGE_LIMIT) {
-  return useInfiniteQuery({
-    queryKey: ["infiniteMessages", channelId],
-    queryFn: async ({ pageParam }) => {
-      const result = await api.fetchMessages(channelId, {
-        limit: pageSize,
-        before: pageParam,
-      });
-      return result.messages;
-    },
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) => {
-      // If we got fewer messages than requested, there are no more
-      if (lastPage.length < pageSize) return undefined;
-      // Get the oldest message's createdAt for the next page
-      const oldest = lastPage[0]; // Messages are in chronological order, first is oldest
-      return oldest?.createdAt;
-    },
-    enabled: !!channelId,
-    select: (data) => {
-      // Flatten all pages and dedupe by id, keeping chronological order
-      const allMessages = data.pages.flat();
-      const seen = new Set<string>();
-      const deduped = allMessages.filter((msg) => {
-        if (seen.has(msg.id)) return false;
-        seen.add(msg.id);
-        return true;
-      });
-      // Sort chronologically (oldest first)
-      return deduped.sort(
-        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
-      );
-    },
-  });
-}
-
-export function useThreadMessages(channelId: string, messageId: string) {
-  return useQuery({
-    queryKey: ["thread", channelId, messageId],
-    queryFn: () => api.fetchThreadMessages(channelId, messageId),
-    select: (data) => data.messages,
-    enabled: !!channelId && !!messageId,
-  });
-}
-
-export function usePostMessage(channelId: string) {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (params: {
-      content: string;
-      agentId?: string;
-      replyToId?: string;
-      mentions?: string[];
-    }) =>
-      api.postMessage(channelId, params.content, {
-        agentId: params.agentId,
-        replyToId: params.replyToId,
-        mentions: params.mentions,
-      }),
-    onSuccess: (_data, variables) => {
-      // Invalidate channel messages (both regular and infinite)
-      queryClient.invalidateQueries({ queryKey: ["messages", channelId] });
-      queryClient.invalidateQueries({ queryKey: ["infiniteMessages", channelId] });
-      // Also invalidate thread if this was a reply
-      if (variables.replyToId) {
-        queryClient.invalidateQueries({ queryKey: ["thread", channelId, variables.replyToId] });
-      }
-    },
-  });
-}
-
-export interface ServiceFilters {
-  status?: string;
-  agentId?: string;
-  name?: string;
-}
-
-export function useServices(filters?: ServiceFilters) {
-  return useQuery({
-    queryKey: ["services", filters],
-    queryFn: () => api.fetchServices(filters),
-    select: (data) => data.services,
-  });
-}
-
-// Session Cost hooks for Usage/Cost Tracking
-
-export interface SessionCostFilters {
-  agentId?: string;
-  taskId?: string;
-  limit?: number;
-}
-
-export function useSessionCosts(filters?: SessionCostFilters) {
-  return useQuery({
-    queryKey: ["session-costs", filters],
-    queryFn: () => api.fetchSessionCosts(filters),
-    select: (data) => data.costs,
-  });
-}
-
-// Helper function for aggregation
-function aggregateUsage(costs: SessionCost[]): UsageStats {
-  return {
-    totalCostUsd: costs.reduce((sum, c) => sum + c.totalCostUsd, 0),
-    totalTokens: costs.reduce((sum, c) => sum + c.inputTokens + c.outputTokens, 0),
-    inputTokens: costs.reduce((sum, c) => sum + c.inputTokens, 0),
-    outputTokens: costs.reduce((sum, c) => sum + c.outputTokens, 0),
-    cacheReadTokens: costs.reduce((sum, c) => sum + c.cacheReadTokens, 0),
-    cacheWriteTokens: costs.reduce((sum, c) => sum + c.cacheWriteTokens, 0),
-    sessionCount: costs.length,
-    totalDurationMs: costs.reduce((sum, c) => sum + c.durationMs, 0),
-    avgCostPerSession:
-      costs.length > 0 ? costs.reduce((sum, c) => sum + c.totalCostUsd, 0) / costs.length : 0,
-  };
-}
-
-// Hook for aggregated usage stats (monthly)
-export function useMonthlyUsageStats() {
-  const { data: costs, ...rest } = useSessionCosts({ limit: 1000 });
-
-  const stats = useMemo(() => {
-    if (!costs) return null;
-
-    const now = new Date();
-    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-
-    const monthlyCosts = costs.filter((c) => new Date(c.createdAt) >= startOfMonth);
-
-    return {
-      totalCostUsd: monthlyCosts.reduce((sum, c) => sum + c.totalCostUsd, 0),
-      totalTokens: monthlyCosts.reduce((sum, c) => sum + c.inputTokens + c.outputTokens, 0),
-      inputTokens: monthlyCosts.reduce((sum, c) => sum + c.inputTokens, 0),
-      outputTokens: monthlyCosts.reduce((sum, c) => sum + c.outputTokens, 0),
-      cacheReadTokens: monthlyCosts.reduce((sum, c) => sum + c.cacheReadTokens, 0),
-      cacheWriteTokens: monthlyCosts.reduce((sum, c) => sum + c.cacheWriteTokens, 0),
-      sessionCount: monthlyCosts.length,
-      totalDurationMs: monthlyCosts.reduce((sum, c) => sum + c.durationMs, 0),
-      avgCostPerSession:
-        monthlyCosts.length > 0
-          ? monthlyCosts.reduce((sum, c) => sum + c.totalCostUsd, 0) / monthlyCosts.length
-          : 0,
-    };
-  }, [costs]);
-
-  return { data: stats, ...rest };
-}
-
-// Hook for agent usage summary
-export function useAgentUsageSummary(agentId: string) {
-  return useQuery({
-    queryKey: ["agent-usage", agentId],
-    queryFn: () => api.fetchSessionCosts({ agentId, limit: 500 }),
-    select: (data) => {
-      const costs = data.costs;
-      const now = new Date();
-      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
-      const startOfWeek = new Date(now);
-      startOfWeek.setDate(now.getDate() - now.getDay());
-      const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-
-      const filterByDate = (start: Date) => costs.filter((c) => new Date(c.createdAt) >= start);
-
-      return {
-        daily: aggregateUsage(filterByDate(startOfDay)),
-        weekly: aggregateUsage(filterByDate(startOfWeek)),
-        monthly: aggregateUsage(filterByDate(startOfMonth)),
-        all: aggregateUsage(costs),
-      };
-    },
-    enabled: !!agentId,
-  });
-}
-
-// Hook for task usage
-export function useTaskUsage(taskId: string) {
-  return useQuery({
-    queryKey: ["task-usage", taskId],
-    queryFn: () => api.fetchSessionCosts({ taskId }),
-    select: (data) => aggregateUsage(data.costs),
-    enabled: !!taskId,
-  });
-}
-
-// Scheduled Tasks hooks
-export interface ScheduledTaskFilters {
-  enabled?: boolean;
-  name?: string;
-}
-
-export function useScheduledTasks(filters?: ScheduledTaskFilters) {
-  return useQuery({
-    queryKey: ["scheduled-tasks", filters],
-    queryFn: () => api.fetchScheduledTasks(filters),
-    select: (data) => data.scheduledTasks,
-  });
-}
-
-// Epic hooks
-export interface EpicFilters {
-  status?: string;
-  search?: string;
-  leadAgentId?: string;
-}
-
-export function useEpics(filters?: EpicFilters) {
-  return useQuery({
-    queryKey: ["epics", filters],
-    queryFn: () => api.fetchEpics(filters),
-    select: (data) => ({ epics: data.epics, total: data.total }),
-  });
-}
-
-export function useEpic(id: string) {
-  return useQuery({
-    queryKey: ["epic", id],
-    queryFn: () => api.fetchEpic(id),
-    enabled: !!id,
-  });
-}

package/ui/src/hooks/useAutoScroll.ts

@@ -1,83 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-interface UseAutoScrollResult {
-  /** Whether auto-scroll is currently following new content */
-  isFollowing: boolean;
-  /** Manually scroll to bottom and re-enable auto-follow */
-  scrollToBottom: () => void;
-}
-
-/**
- * Auto-scroll hook that scrolls to bottom when dependencies change,
- * but only if the user was already at/near the bottom.
- * If user has scrolled up to read history, it won't interrupt them.
- *
- * Returns state and controls to show a "Follow" button when auto-scroll is disabled.
- *
- * @param element - The scrollable element ref
- * @param deps - Array of dependencies that trigger scroll check
- * @returns Object with isFollowing state and scrollToBottom function
- */
-export function useAutoScroll(
-  element: HTMLDivElement | null,
-  deps: unknown[],
-): UseAutoScrollResult {
-  const [isFollowing, setIsFollowing] = useState(true);
-  const hasInitializedRef = useRef(false);
-
-  // Track scroll position to determine if user is near bottom
-  const handleScroll = useCallback(() => {
-    if (element) {
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      // Consider "near bottom" if within 100px of the bottom
-      const nearBottom = scrollHeight - scrollTop - clientHeight < 100;
-      setIsFollowing(nearBottom);
-    }
-  }, [element]);
-
-  // Manual scroll to bottom function
-  const scrollToBottom = useCallback(() => {
-    if (element) {
-      element.scrollTo({
-        top: element.scrollHeight,
-        behavior: "smooth",
-      });
-      setIsFollowing(true);
-    }
-  }, [element]);
-
-  // Attach scroll listener
-  useEffect(() => {
-    if (!element) return;
-
-    element.addEventListener("scroll", handleScroll);
-    return () => element.removeEventListener("scroll", handleScroll);
-  }, [element, handleScroll]);
-
-  // Auto-scroll when dependencies change
-  useEffect(() => {
-    if (!element) return;
-
-    const doScrollToBottom = () => {
-      setTimeout(() => {
-        element.scrollTo({
-          top: element.scrollHeight,
-          behavior: hasInitializedRef.current ? "smooth" : "instant",
-        });
-      }, 50);
-    };
-
-    if (!hasInitializedRef.current) {
-      // Initial load - scroll to bottom immediately
-      doScrollToBottom();
-      hasInitializedRef.current = true;
-      setIsFollowing(true);
-    } else if (isFollowing) {
-      // Subsequent updates - only scroll if user was near bottom
-      doScrollToBottom();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [element, isFollowing, ...deps]);
-
-  return { isFollowing, scrollToBottom };
-}

package/ui/src/index.css

@@ -1,257 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  /* Beehive color palette - dark mode defaults */
-  --hive-amber: #f5a623;
-  --hive-honey: #ffb84d;
-  --hive-gold: #d4a574;
-  --hive-deep: #c67c00;
-  --hive-rust: #a85454;
-  --hive-blue: #3b82f6;
-  --hive-cream: #fff8e7;
-  --hive-body: #0d0906;
-  --hive-surface: #1a130e;
-  --hive-earth: #251c15;
-  --hive-border: #3a2d1f;
-  --hive-text-primary: #fff8e7;
-  --hive-text-secondary: #c9b896;
-  --hive-text-tertiary: #8b7355;
-
-  font-family: "Space Grotesk", sans-serif;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Light mode color overrides */
-[data-joy-color-scheme="light"] {
-  --hive-amber: #d48806;
-  --hive-honey: #b87300;
-  --hive-gold: #8b6914;
-  --hive-deep: #9a5f00;
-  --hive-rust: #b54242;
-  --hive-cream: #1a130e;
-  --hive-body: #fdf8f3;
-  --hive-surface: #ffffff;
-  --hive-earth: #f5ede4;
-  --hive-border: #e5d9ca;
-  --hive-text-primary: #1a130e;
-  --hive-text-secondary: #5c4a3d;
-  --hive-text-tertiary: #8b7355;
-}
-
-body {
-  margin: 0;
-  background: var(--hive-body);
-  color: var(--hive-text-primary);
-  min-height: 100vh;
-}
-
-/* Honeycomb pattern background */
-.honeycomb-bg {
-  position: relative;
-}
-
-.honeycomb-bg::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23F5A623' fill-opacity='0.08'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Light mode honeycomb pattern - darker color */
-[data-joy-color-scheme="light"] .honeycomb-bg::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23D48806' fill-opacity='0.1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.honeycomb-bg > * {
-  position: relative;
-  z-index: 1;
-}
-
-/* Warm amber scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--hive-body);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--hive-border);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--hive-text-tertiary);
-}
-
-/* Amber glow effects */
-.glow-amber {
-  text-shadow:
-    0 0 10px rgba(245, 166, 35, 0.5),
-    0 0 20px rgba(245, 166, 35, 0.3);
-}
-
-.glow-gold {
-  text-shadow:
-    0 0 10px rgba(212, 165, 116, 0.5),
-    0 0 20px rgba(212, 165, 116, 0.3);
-}
-
-.glow-rust {
-  text-shadow:
-    0 0 10px rgba(168, 84, 84, 0.5),
-    0 0 20px rgba(168, 84, 84, 0.3);
-}
-
-.glow-blue {
-  text-shadow:
-    0 0 10px rgba(59, 130, 246, 0.5),
-    0 0 20px rgba(59, 130, 246, 0.3);
-}
-
-/* Box glow effects */
-.box-glow-amber {
-  box-shadow:
-    0 0 15px rgba(245, 166, 35, 0.3),
-    0 0 30px rgba(245, 166, 35, 0.15);
-}
-
-.box-glow-gold {
-  box-shadow:
-    0 0 15px rgba(212, 165, 116, 0.3),
-    0 0 30px rgba(212, 165, 116, 0.15);
-}
-
-/* Breathing animation for active elements */
-@keyframes breathe {
-  0%,
-  100% {
-    opacity: 0.85;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.02);
-  }
-}
-
-.animate-breathe {
-  animation: breathe 3s ease-in-out infinite;
-}
-
-/* Pulse animation */
-@keyframes pulse-amber {
-  0%,
-  100% {
-    box-shadow: 0 0 5px rgba(245, 166, 35, 0.4);
-  }
-  50% {
-    box-shadow:
-      0 0 15px rgba(245, 166, 35, 0.6),
-      0 0 25px rgba(245, 166, 35, 0.3);
-  }
-}
-
-.animate-pulse-amber {
-  animation: pulse-amber 2s ease-in-out infinite;
-}
-
-/* Heartbeat animation for connection status */
-@keyframes heartbeat {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  14% {
-    transform: scale(1.1);
-  }
-  28% {
-    transform: scale(1);
-  }
-  42% {
-    transform: scale(1.1);
-  }
-  70% {
-    transform: scale(1);
-  }
-}
-
-.animate-heartbeat {
-  animation: heartbeat 1.5s ease-in-out infinite;
-}
-
-/* Hexagonal clip path utility */
-.clip-hex {
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-}
-
-/* Hexagonal border (using drop-shadow trick) */
-.hex-border {
-  position: relative;
-}
-
-.hex-border::before {
-  content: "";
-  position: absolute;
-  inset: -2px;
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-  background: linear-gradient(135deg, var(--hive-amber) 0%, var(--hive-deep) 100%);
-  z-index: -1;
-}
-
-/* Gradient text for headers */
-.text-gradient-amber {
-  background: linear-gradient(
-    135deg,
-    var(--hive-amber) 0%,
-    var(--hive-honey) 50%,
-    var(--hive-deep) 100%
-  );
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-/* Card hover effect */
-.card-hover {
-  transition: all 0.3s ease;
-}
-
-.card-hover:hover {
-  border-color: rgba(245, 166, 35, 0.3);
-  box-shadow: 0 0 20px rgba(245, 166, 35, 0.1);
-}
-
-/* Table row hover */
-.row-hover {
-  transition: background-color 0.2s ease;
-}
-
-.row-hover:hover {
-  background-color: rgba(245, 166, 35, 0.05);
-}
-
-/* Focus ring */
-.focus-amber:focus-visible {
-  outline: 2px solid var(--hive-amber);
-  outline-offset: 2px;
-}
-
-/* Subtle grain overlay for texture */
-.grain-overlay::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
-  pointer-events: none;
-  z-index: 0;
-}