@desplega.ai/agent-swarm 1.2.1 → 1.9.0

package/ui/src/hooks/queries.ts

@@ -0,0 +1,170 @@
+import { useQuery, useMutation, useQueryClient, useInfiniteQuery } from "@tanstack/react-query";
+import { api } from "../lib/api";
+import type { AgentWithTasks } 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 interface TaskFilters {
+  status?: string;
+  agentId?: string;
+  search?: string;
+}
+
+export function useTasks(filters?: TaskFilters) {
+  return useQuery({
+    queryKey: ["tasks", filters],
+    queryFn: () => api.fetchTasks(filters),
+    select: (data) => data.tasks,
+  });
+}
+
+export function useTask(id: string) {
+  return useQuery({
+    queryKey: ["task", id],
+    queryFn: () => api.fetchTask(id),
+    enabled: !!id,
+  });
+}
+
+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,
+  });
+}

package/ui/src/index.css

@@ -0,0 +1,235 @@
+@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;
+}

package/ui/src/lib/api.ts

@@ -0,0 +1,161 @@
+import { getConfig } from "./config";
+import type {
+  AgentsResponse,
+  TasksResponse,
+  LogsResponse,
+  ChannelsResponse,
+  MessagesResponse,
+  ServicesResponse,
+  ChannelMessage,
+  Stats,
+  AgentWithTasks,
+  TaskWithLogs,
+} from "../types/api";
+
+class ApiClient {
+  private getHeaders(): HeadersInit {
+    const config = getConfig();
+    const headers: HeadersInit = {
+      "Content-Type": "application/json",
+    };
+    if (config.apiKey) {
+      headers["Authorization"] = `Bearer ${config.apiKey}`;
+    }
+    return headers;
+  }
+
+  private getBaseUrl(): string {
+    const config = getConfig();
+    // In development, use relative URL (proxied by Vite)
+    // In production, use configured API URL
+    if (import.meta.env.DEV && config.apiUrl === "http://localhost:3013") {
+      return "";
+    }
+    return config.apiUrl;
+  }
+
+  async fetchAgents(includeTasks = true): Promise<AgentsResponse> {
+    const url = `${this.getBaseUrl()}/api/agents${includeTasks ? "?include=tasks" : ""}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch agents: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchAgent(id: string, includeTasks = true): Promise<AgentWithTasks> {
+    const url = `${this.getBaseUrl()}/api/agents/${id}${includeTasks ? "?include=tasks" : ""}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch agent: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchTasks(filters?: { status?: string; agentId?: string; search?: string }): Promise<TasksResponse> {
+    const params = new URLSearchParams();
+    if (filters?.status) params.set("status", filters.status);
+    if (filters?.agentId) params.set("agentId", filters.agentId);
+    if (filters?.search) params.set("search", filters.search);
+    const queryString = params.toString();
+    const url = `${this.getBaseUrl()}/api/tasks${queryString ? `?${queryString}` : ""}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch tasks: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchTask(id: string): Promise<TaskWithLogs> {
+    const url = `${this.getBaseUrl()}/api/tasks/${id}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch task: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchLogs(limit = 100, agentId?: string): Promise<LogsResponse> {
+    const params = new URLSearchParams();
+    params.set("limit", String(limit));
+    if (agentId) params.set("agentId", agentId);
+    const url = `${this.getBaseUrl()}/api/logs?${params.toString()}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch logs: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchStats(): Promise<Stats> {
+    const url = `${this.getBaseUrl()}/api/stats`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch stats: ${res.status}`);
+    return res.json();
+  }
+
+  async checkHealth(): Promise<{ status: string; version: string }> {
+    // Health endpoint is not under /api, so we need to handle it specially
+    const config = getConfig();
+    const baseUrl = import.meta.env.DEV && config.apiUrl === "http://localhost:3013"
+      ? "http://localhost:3013"
+      : config.apiUrl;
+    const url = `${baseUrl}/health`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Health check failed: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchChannels(): Promise<ChannelsResponse> {
+    const url = `${this.getBaseUrl()}/api/channels`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch channels: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchMessages(
+    channelId: string,
+    options?: { limit?: number; since?: string; before?: string }
+  ): Promise<MessagesResponse> {
+    const params = new URLSearchParams();
+    if (options?.limit) params.set("limit", String(options.limit));
+    if (options?.since) params.set("since", options.since);
+    if (options?.before) params.set("before", options.before);
+    const queryString = params.toString();
+    const url = `${this.getBaseUrl()}/api/channels/${channelId}/messages${queryString ? `?${queryString}` : ""}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch messages: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchThreadMessages(channelId: string, messageId: string): Promise<MessagesResponse> {
+    const url = `${this.getBaseUrl()}/api/channels/${channelId}/messages/${messageId}/thread`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch thread: ${res.status}`);
+    return res.json();
+  }
+
+  async postMessage(
+    channelId: string,
+    content: string,
+    options?: { agentId?: string; replyToId?: string; mentions?: string[] }
+  ): Promise<ChannelMessage> {
+    const url = `${this.getBaseUrl()}/api/channels/${channelId}/messages`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: this.getHeaders(),
+      body: JSON.stringify({
+        content,
+        agentId: options?.agentId,
+        replyToId: options?.replyToId,
+        mentions: options?.mentions,
+      }),
+    });
+    if (!res.ok) throw new Error(`Failed to post message: ${res.status}`);
+    return res.json();
+  }
+
+  async fetchServices(filters?: { status?: string; agentId?: string; name?: string }): Promise<ServicesResponse> {
+    const params = new URLSearchParams();
+    if (filters?.status) params.set("status", filters.status);
+    if (filters?.agentId) params.set("agentId", filters.agentId);
+    if (filters?.name) params.set("name", filters.name);
+    const queryString = params.toString();
+    const url = `${this.getBaseUrl()}/api/services${queryString ? `?${queryString}` : ""}`;
+    const res = await fetch(url, { headers: this.getHeaders() });
+    if (!res.ok) throw new Error(`Failed to fetch services: ${res.status}`);
+    return res.json();
+  }
+}
+
+export const api = new ApiClient();

package/ui/src/lib/config.ts

@@ -0,0 +1,35 @@
+const STORAGE_KEY = "agent-swarm-config";
+
+export interface Config {
+  apiUrl: string;
+  apiKey: string;
+}
+
+const DEFAULT_CONFIG: Config = {
+  apiUrl: "http://localhost:3013",
+  apiKey: "",
+};
+
+export function getConfig(): Config {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return { ...DEFAULT_CONFIG, ...JSON.parse(stored) };
+    }
+  } catch (e) {
+    console.error("Failed to load config:", e);
+  }
+  return DEFAULT_CONFIG;
+}
+
+export function saveConfig(config: Config): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+}
+
+export function resetConfig(): void {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+export function getDefaultConfig(): Config {
+  return { ...DEFAULT_CONFIG };
+}