@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/new-ui/src/hooks/use-theme.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light";
+
+interface ThemeContextValue {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const STORAGE_KEY = "agent-swarm-mode";
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+function getStoredTheme(): Theme {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+    // ignore
+  }
+  return "dark";
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(getStoredTheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, [theme]);
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    localStorage.setItem(STORAGE_KEY, newTheme);
+    setThemeState(newTheme);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+
+  return React.createElement(
+    ThemeContext.Provider,
+    { value: { theme, setTheme, toggleTheme } },
+    children,
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

package/new-ui/src/lib/config.ts

@@ -0,0 +1,188 @@
+import { generateSlug } from "./slugs";
+
+const STORAGE_KEY = "agent-swarm-config";
+const CONNECTIONS_KEY = "agent-swarm-connections";
+
+export interface Config {
+  apiUrl: string;
+  apiKey: string;
+}
+
+export interface Connection {
+  id: string;
+  name: string;
+  apiUrl: string;
+  apiKey: string;
+}
+
+export interface MultiConfig {
+  connections: Connection[];
+  activeId: string | null;
+}
+
+const DEFAULT_CONFIG: Config = {
+  apiUrl: "http://localhost:3013",
+  apiKey: "",
+};
+
+function generateConnectionId(): string {
+  const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "conn_";
+  for (let i = 0; i < 8; i++) {
+    result += chars[Math.floor(Math.random() * chars.length)];
+  }
+  return result;
+}
+
+function loadMultiConfig(): MultiConfig {
+  try {
+    const stored = localStorage.getItem(CONNECTIONS_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (e) {
+    console.error("Failed to load connections:", e);
+  }
+
+  // Migrate from old single-config format
+  try {
+    const oldStored = localStorage.getItem(STORAGE_KEY);
+    if (oldStored) {
+      const oldConfig: Config = JSON.parse(oldStored);
+      const connection: Connection = {
+        id: generateConnectionId(),
+        name: "default",
+        apiUrl: oldConfig.apiUrl || DEFAULT_CONFIG.apiUrl,
+        apiKey: oldConfig.apiKey || DEFAULT_CONFIG.apiKey,
+      };
+      const multi: MultiConfig = {
+        connections: [connection],
+        activeId: connection.id,
+      };
+      localStorage.setItem(CONNECTIONS_KEY, JSON.stringify(multi));
+      localStorage.removeItem(STORAGE_KEY);
+      return multi;
+    }
+  } catch (e) {
+    console.error("Failed to migrate old config:", e);
+  }
+
+  return { connections: [], activeId: null };
+}
+
+function saveMultiConfig(multi: MultiConfig): void {
+  localStorage.setItem(CONNECTIONS_KEY, JSON.stringify(multi));
+}
+
+/** Resolve activeId — fix orphaned references, auto-select first if needed. */
+function resolveActiveId(multi: MultiConfig): MultiConfig {
+  if (multi.connections.length === 0) {
+    return { ...multi, activeId: null };
+  }
+  const exists = multi.connections.some((c) => c.id === multi.activeId);
+  if (!exists) {
+    return { ...multi, activeId: multi.connections[0].id };
+  }
+  return multi;
+}
+
+// ---------------------------------------------------------------------------
+// Multi-connection CRUD
+// ---------------------------------------------------------------------------
+
+export function getConnections(): Connection[] {
+  const multi = resolveActiveId(loadMultiConfig());
+  return multi.connections;
+}
+
+export function addConnection(conn: Omit<Connection, "id"> & { id?: string }): Connection {
+  const multi = resolveActiveId(loadMultiConfig());
+  const connection: Connection = {
+    id: conn.id || generateConnectionId(),
+    name: conn.name || generateSlug(),
+    apiUrl: conn.apiUrl,
+    apiKey: conn.apiKey,
+  };
+  multi.connections.push(connection);
+  // If this is the first connection, auto-activate it
+  if (multi.connections.length === 1) {
+    multi.activeId = connection.id;
+  }
+  saveMultiConfig(multi);
+  return connection;
+}
+
+export function updateConnection(
+  id: string,
+  updates: Partial<Omit<Connection, "id">>,
+): Connection | null {
+  const multi = resolveActiveId(loadMultiConfig());
+  const idx = multi.connections.findIndex((c) => c.id === id);
+  if (idx === -1) return null;
+  multi.connections[idx] = { ...multi.connections[idx], ...updates };
+  saveMultiConfig(multi);
+  return multi.connections[idx];
+}
+
+export function removeConnection(id: string): boolean {
+  const multi = resolveActiveId(loadMultiConfig());
+  const idx = multi.connections.findIndex((c) => c.id === id);
+  if (idx === -1) return false;
+  multi.connections.splice(idx, 1);
+  // Fix activeId if we removed the active connection
+  if (multi.activeId === id) {
+    multi.activeId = multi.connections.length > 0 ? multi.connections[0].id : null;
+  }
+  saveMultiConfig(multi);
+  return true;
+}
+
+export function getActiveConnection(): Connection | null {
+  const multi = resolveActiveId(loadMultiConfig());
+  if (!multi.activeId) return null;
+  return multi.connections.find((c) => c.id === multi.activeId) ?? null;
+}
+
+export function setActiveConnection(id: string): boolean {
+  const multi = loadMultiConfig();
+  const exists = multi.connections.some((c) => c.id === id);
+  if (!exists) return false;
+  multi.activeId = id;
+  saveMultiConfig(multi);
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Backward-compatible API (used by ApiClient and useConfig)
+// ---------------------------------------------------------------------------
+
+export function getConfig(): Config {
+  const active = getActiveConnection();
+  if (active) {
+    return { apiUrl: active.apiUrl, apiKey: active.apiKey };
+  }
+  return { ...DEFAULT_CONFIG };
+}
+
+export function saveConfig(config: Config): void {
+  const active = getActiveConnection();
+  if (active) {
+    updateConnection(active.id, { apiUrl: config.apiUrl, apiKey: config.apiKey });
+  } else {
+    // No connections yet — create one
+    addConnection({
+      name: generateSlug(),
+      apiUrl: config.apiUrl,
+      apiKey: config.apiKey,
+    });
+  }
+}
+
+export function resetConfig(): void {
+  localStorage.removeItem(STORAGE_KEY);
+  localStorage.removeItem(CONNECTIONS_KEY);
+}
+
+export function getDefaultConfig(): Config {
+  return { ...DEFAULT_CONFIG };
+}

package/new-ui/src/lib/slugs.ts

@@ -0,0 +1,71 @@
+const ADJECTIVES = [
+  "swift",
+  "bold",
+  "calm",
+  "dark",
+  "keen",
+  "warm",
+  "cool",
+  "pure",
+  "wild",
+  "soft",
+  "bright",
+  "quick",
+  "sharp",
+  "brave",
+  "clear",
+  "fresh",
+  "grand",
+  "proud",
+  "quiet",
+  "royal",
+  "silent",
+  "steady",
+  "golden",
+  "crimson",
+  "silver",
+  "cosmic",
+  "lunar",
+  "solar",
+  "arctic",
+  "rustic",
+];
+
+const NOUNS = [
+  "falcon",
+  "cedar",
+  "river",
+  "storm",
+  "flame",
+  "frost",
+  "ridge",
+  "grove",
+  "atlas",
+  "prism",
+  "ember",
+  "haven",
+  "coral",
+  "spark",
+  "delta",
+  "orbit",
+  "flint",
+  "maple",
+  "raven",
+  "pearl",
+  "summit",
+  "anchor",
+  "beacon",
+  "cipher",
+  "zenith",
+  "canyon",
+  "nebula",
+  "quartz",
+  "vortex",
+  "tundra",
+];
+
+export function generateSlug(): string {
+  const adj = ADJECTIVES[Math.floor(Math.random() * ADJECTIVES.length)];
+  const noun = NOUNS[Math.floor(Math.random() * NOUNS.length)];
+  return `${adj}-${noun}`;
+}

package/{ui → new-ui}/src/lib/utils.ts

@@ -1,3 +1,13 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merge Tailwind CSS classes with clsx
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
 /**
  * Format a date as relative time (e.g., "2 minutes ago", "just now")
  */
@@ -86,3 +96,25 @@ export function formatDuration(ms: number): string {
   if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
   return `${seconds}s`;
 }
+
+/**
+ * Format elapsed time between two dates (or from start to now).
+ * Returns compact string like "2m", "1h 23m", "3d 4h".
+ */
+export function formatElapsed(start: string, end?: string | null): string {
+  const startMs = new Date(start).getTime();
+  const endMs = end ? new Date(end).getTime() : Date.now();
+  const diffMs = endMs - startMs;
+  if (diffMs < 0) return "—";
+
+  const seconds = Math.floor(diffMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ${hours % 24}h`;
+  if (hours > 0) return `${hours}h ${minutes % 60}m`;
+  if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+  if (seconds > 0) return `${seconds}s`;
+  return `${diffMs}ms`;
+}

package/new-ui/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@/styles/globals.css";
+import "@/styles/ag-grid.css";
+import App from "@/app/App";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);