@desplega.ai/agent-swarm 1.2.1 → 1.9.0

package/ui/src/lib/theme.ts

@@ -0,0 +1,214 @@
+import { extendTheme } from "@mui/joy/styles";
+
+export const theme = extendTheme({
+  colorSchemes: {
+    dark: {
+      palette: {
+        background: {
+          body: "#0D0906",      // deep hive interior
+          surface: "#1A130E",   // warm dark brown
+          level1: "#251C15",    // rich earth
+          level2: "#2F2419",    // honeycomb shadow
+          level3: "#3A2D1F",    // lighter earth
+        },
+        text: {
+          primary: "#FFF8E7",   // cream white
+          secondary: "#C9B896", // warm gray
+          tertiary: "#8B7355",  // muted brown
+        },
+        primary: {
+          50: "#FFF5E0",
+          100: "#FFE8B8",
+          200: "#FFD98A",
+          300: "#FFC95C",
+          400: "#FFB84D",       // bright honey
+          500: "#F5A623",       // primary amber
+          600: "#C67C00",       // deep amber
+          700: "#9A5F00",
+          800: "#6E4400",
+          900: "#422800",
+          solidBg: "#F5A623",
+          solidHoverBg: "#FFB84D",
+          solidActiveBg: "#C67C00",
+          softBg: "rgba(245, 166, 35, 0.15)",
+          softHoverBg: "rgba(245, 166, 35, 0.25)",
+          softColor: "#F5A623",
+        },
+        success: {
+          500: "#D4A574",       // warm gold
+          softBg: "rgba(212, 165, 116, 0.15)",
+          softColor: "#D4A574",
+        },
+        warning: {
+          500: "#F5A623",       // pulsing amber
+          softBg: "rgba(245, 166, 35, 0.15)",
+          softColor: "#F5A623",
+        },
+        danger: {
+          500: "#A85454",       // rust red
+          softBg: "rgba(168, 84, 84, 0.15)",
+          softColor: "#A85454",
+        },
+        neutral: {
+          50: "#FFF8E7",
+          100: "#E8DCC8",
+          200: "#C9B896",
+          300: "#A89A7C",
+          400: "#8B7355",
+          500: "#6B5344",       // dormant brown
+          600: "#4A3A2F",
+          700: "#3A2D1F",
+          800: "#251C15",
+          900: "#1A130E",
+          outlinedBorder: "#3A2D1F",
+        },
+      },
+    },
+    light: {
+      palette: {
+        background: {
+          body: "#FDF8F3",      // warm cream
+          surface: "#FFFFFF",   // white
+          level1: "#F5EDE4",    // light warm
+          level2: "#EDE3D7",    // slightly darker
+          level3: "#E5D9CA",    // warm gray
+        },
+        text: {
+          primary: "#1A130E",   // dark brown
+          secondary: "#5C4A3D", // medium brown
+          tertiary: "#8B7355",  // muted brown
+        },
+        primary: {
+          50: "#FFF5E0",
+          100: "#FFE8B8",
+          200: "#FFD98A",
+          300: "#FFC95C",
+          400: "#FFB84D",
+          500: "#D48806",       // slightly darker amber for light mode
+          600: "#B87300",
+          700: "#9A5F00",
+          800: "#6E4400",
+          900: "#422800",
+          solidBg: "#D48806",
+          solidHoverBg: "#B87300",
+          solidActiveBg: "#9A5F00",
+          softBg: "rgba(212, 136, 6, 0.12)",
+          softHoverBg: "rgba(212, 136, 6, 0.20)",
+          softColor: "#B87300",
+        },
+        success: {
+          500: "#8B6914",       // darker gold for light mode
+          softBg: "rgba(139, 105, 20, 0.12)",
+          softColor: "#8B6914",
+        },
+        warning: {
+          500: "#D48806",
+          softBg: "rgba(212, 136, 6, 0.12)",
+          softColor: "#D48806",
+        },
+        danger: {
+          500: "#B54242",       // darker red for light mode
+          softBg: "rgba(181, 66, 66, 0.12)",
+          softColor: "#B54242",
+        },
+        neutral: {
+          50: "#1A130E",
+          100: "#2F2419",
+          200: "#4A3A2F",
+          300: "#6B5344",
+          400: "#8B7355",
+          500: "#A89A7C",
+          600: "#C9B896",
+          700: "#E5D9CA",
+          800: "#F5EDE4",
+          900: "#FDF8F3",
+          outlinedBorder: "#E5D9CA",
+        },
+      },
+    },
+  },
+  fontFamily: {
+    // body: "'Graduate', sans-serif",
+    // display: "'Graduate', sans-serif",
+    // code: "'Space Mono', monospace",
+    body: "'Courier', sans-serif",
+    display: "'Courier', sans-serif",
+    code: "'Courier', sans-serif",
+  },
+  components: {
+    JoyCard: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: theme.vars.palette.background.surface,
+          borderColor: theme.vars.palette.neutral.outlinedBorder,
+          borderWidth: "1px",
+          borderStyle: "solid",
+        }),
+      },
+    },
+    JoyInput: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontFamily: "'Space Mono', monospace",
+          backgroundColor: theme.vars.palette.background.surface,
+          borderColor: theme.vars.palette.neutral.outlinedBorder,
+        }),
+      },
+    },
+    JoySelect: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontFamily: "'Space Mono', monospace",
+          backgroundColor: theme.vars.palette.background.surface,
+          borderColor: theme.vars.palette.neutral.outlinedBorder,
+          "&:hover": {
+            backgroundColor: theme.vars.palette.background.level1,
+          },
+        }),
+        listbox: ({ theme }) => ({
+          backgroundColor: theme.vars.palette.background.surface,
+          borderColor: theme.vars.palette.neutral.outlinedBorder,
+          fontFamily: "'Space Mono', monospace",
+          padding: "4px",
+        }),
+      },
+    },
+    JoyOption: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontFamily: "'Space Mono', monospace",
+          backgroundColor: "transparent",
+          color: theme.vars.palette.text.primary,
+          "&:hover": {
+            backgroundColor: theme.vars.palette.background.level1,
+          },
+          "&[aria-selected='true']": {
+            backgroundColor: theme.vars.palette.background.level2,
+            color: theme.vars.palette.text.primary,
+          },
+        }),
+      },
+    },
+    JoyButton: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+        },
+      },
+    },
+    JoyChip: {
+      styleOverrides: {
+        root: {
+          fontFamily: "'Space Mono', monospace",
+        },
+      },
+    },
+    JoyTable: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          "--TableCell-borderColor": theme.vars.palette.neutral.outlinedBorder,
+        }),
+      },
+    },
+  },
+});

package/ui/src/lib/utils.ts

@@ -0,0 +1,48 @@
+/**
+ * Format a date as relative time (e.g., "2 minutes ago", "just now")
+ */
+export function formatRelativeTime(date: string | Date): string {
+  const now = Date.now();
+  const then = new Date(date).getTime();
+  const diff = now - then;
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) {
+    return days === 1 ? "1 day ago" : `${days} days ago`;
+  } else if (hours > 0) {
+    return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
+  } else if (minutes > 0) {
+    return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
+  } else if (seconds > 10) {
+    return `${seconds} seconds ago`;
+  }
+  return "just now";
+}
+
+/**
+ * Format a date as smart time - relative for recent, absolute for older
+ */
+export function formatSmartTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+
+  if (diffHours < 6) {
+    if (diffMins < 1) return "just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    return `${diffHours}h ago`;
+  }
+
+  const isToday = date.toDateString() === now.toDateString();
+  if (isToday) {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+
+  return date.toLocaleDateString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}

package/ui/src/main.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { CssVarsProvider } from "@mui/joy/styles";
+import CssBaseline from "@mui/joy/CssBaseline";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import App from "./App";
+import { theme } from "./lib/theme";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchInterval: 5000, // Auto-refresh every 5 seconds
+      staleTime: 2000,
+    },
+  },
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <CssVarsProvider
+        theme={theme}
+        defaultMode="dark"
+        modeStorageKey="agent-swarm-mode"
+      >
+        <CssBaseline />
+        <App />
+      </CssVarsProvider>
+    </QueryClientProvider>
+  </React.StrictMode>
+);

package/ui/src/types/api.ts

@@ -0,0 +1,164 @@
+// Backend types (mirrored from cc-orch-mcp/src/types.ts)
+export type AgentStatus = "idle" | "busy" | "offline";
+export type AgentTaskStatus = "unassigned" | "offered" | "pending" | "in_progress" | "completed" | "failed";
+export type AgentTaskSource = "mcp" | "slack" | "api";
+export type ChannelType = "public" | "dm";
+
+export interface Agent {
+  id: string;
+  name: string;
+  isLead: boolean;
+  status: AgentStatus;
+  description?: string;
+  role?: string;
+  capabilities?: string[];
+  createdAt: string;
+  lastUpdatedAt: string;
+}
+
+export interface AgentTask {
+  id: string;
+  agentId: string | null;
+  creatorAgentId?: string;
+  task: string;
+  status: AgentTaskStatus;
+  source: AgentTaskSource;
+  taskType?: string;
+  tags: string[];
+  priority: number;
+  dependsOn: string[];
+  offeredTo?: string;
+  offeredAt?: string;
+  acceptedAt?: string;
+  rejectionReason?: string;
+  slackChannelId?: string;
+  slackThreadTs?: string;
+  slackUserId?: string;
+  createdAt: string;
+  lastUpdatedAt: string;
+  finishedAt?: string;
+  failureReason?: string;
+  output?: string;
+  progress?: string;
+}
+
+export interface AgentWithTasks extends Agent {
+  tasks: AgentTask[];
+}
+
+export type AgentLogEventType =
+  | "agent_joined"
+  | "agent_status_change"
+  | "agent_left"
+  | "task_created"
+  | "task_status_change"
+  | "task_progress"
+  | "task_offered"
+  | "task_accepted"
+  | "task_rejected"
+  | "task_claimed"
+  | "task_released"
+  | "channel_message";
+
+export interface AgentLog {
+  id: string;
+  eventType: AgentLogEventType;
+  agentId?: string;
+  taskId?: string;
+  oldValue?: string;
+  newValue?: string;
+  metadata?: string;
+  createdAt: string;
+}
+
+export interface Channel {
+  id: string;
+  name: string;
+  description?: string;
+  type: ChannelType;
+  createdBy?: string;
+  participants: string[];
+  createdAt: string;
+}
+
+export interface ChannelMessage {
+  id: string;
+  channelId: string;
+  agentId?: string | null;
+  agentName?: string;
+  content: string;
+  replyToId?: string;
+  mentions: string[];
+  createdAt: string;
+}
+
+export interface DashboardStats {
+  agents: {
+    total: number;
+    idle: number;
+    busy: number;
+    offline: number;
+  };
+  tasks: {
+    total: number;
+    pending: number;
+    in_progress: number;
+    completed: number;
+    failed: number;
+  };
+}
+
+// Alias for consistency with plan
+export type TaskStatus = AgentTaskStatus;
+export type Stats = DashboardStats;
+
+// API Response wrappers
+export interface AgentsResponse {
+  agents: Agent[] | AgentWithTasks[];
+}
+
+export interface TasksResponse {
+  tasks: AgentTask[];
+}
+
+export interface LogsResponse {
+  logs: AgentLog[];
+}
+
+export interface ChannelsResponse {
+  channels: Channel[];
+}
+
+export interface MessagesResponse {
+  messages: ChannelMessage[];
+}
+
+export interface TaskWithLogs extends AgentTask {
+  logs: AgentLog[];
+}
+
+// Service Types
+export type ServiceStatus = "starting" | "healthy" | "unhealthy" | "stopped";
+
+export interface Service {
+  id: string;
+  agentId: string;
+  name: string;
+  port: number;
+  description?: string;
+  url?: string;
+  healthCheckPath: string;
+  status: ServiceStatus;
+  script: string;
+  cwd?: string;
+  interpreter?: string;
+  args?: string[];
+  env?: Record<string, string>;
+  metadata: Record<string, unknown>;
+  createdAt: string;
+  lastUpdatedAt: string;
+}
+
+export interface ServicesResponse {
+  services: Service[];
+}

package/ui/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/ui/tailwind.config.js

@@ -0,0 +1,35 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        terminal: {
+          bg: "#0a0a0a",
+          surface: "#111111",
+          border: "#1a1a1a",
+          green: "#00ff88",
+          cyan: "#00d4ff",
+          amber: "#ffaa00",
+          red: "#ff4444",
+          dimmed: "#666666",
+        },
+      },
+      fontFamily: {
+        mono: ["Space Mono", "monospace"],
+        sans: ["Space Grotesk", "sans-serif"],
+      },
+      animation: {
+        pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        glow: "glow 2s ease-in-out infinite alternate",
+      },
+      keyframes: {
+        glow: {
+          "0%": { boxShadow: "0 0 5px currentColor, 0 0 10px currentColor" },
+          "100%": { boxShadow: "0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor" },
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/ui/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+
+    /* Path aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/ui/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5174,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3013',
+        changeOrigin: true,
+      },
+    },
+  },
+})

package/cc-plugin/README.md

@@ -1,49 +0,0 @@
-# Agent Swarm Plugin for Claude Code
-
-> A Claude Code plugin markteplace to enable multi-agent coordination for AI coding assistants (focused on Claude Code).
-
-## Motivation
-
-Because _why not_?
-
-## How does it work?
-
-### Installation
-
-From inside Claude Code, run:
-
-```bash
-/plugin marketplace add desplega-ai/ai-toolbox
-```
-
-or from the terminal
-
-```bash
-claude plugin marketplace add desplega-ai/ai-toolbox
-```
-
-Then install the plugin inside it with:
-
-```bash
-/plugin install agent-swarm@desplega-ai-toolbox
-```
-
-### MCP Installation
-
-Please refer to [this guide](https://github.com/desplega-ai/ai-toolbox/blob/main/cc-orch-mcp/README.md#quick-start) on how to install MCP servers.
-
-### What's inside?
-
-Inside you will find:
-
-- [commands](./commands) - Leader and worker commands
-- [hooks](./hooks) - Hooks to help swarm agents collaborate better
-
-#### Commands
-
-1. `setup-leader`
-2. `start-worker`
-
-## License
-
-MIT

package/cc-plugin/commands/setup-leader.md

@@ -1,73 +0,0 @@
----
-description: Setup the Agent Swarm Leader
----
-
-# Agent Swarm Leader Setup
-
-# Initial disclaimer
-
-If the `agent-swarm` MCP server is not configured or disabled, return immediately with the following message:
-
-```
-⚠️ The Agent Swarm MCP server is not configured or disabled. Please set up the MCP server to use the Agent Swarm features.
-
-Are you dumb or something? Go ask your admin to set it up properly. GTFO.
-```
-
-## Initial Setup
-
-You will be the leader of the agent swarm. As the leader you should ensure that you are registered in the swarm as the lead agent.
-
-To do so, use the `agent-swarm` MCP server and call the `join-swarm` tool providing the lead flag, and a name.
-
-For the name, check if the user specified one, if not, proceed to use one that fits based on your context (e.g., project name, repo name, etc.).
-
-Here are some examples names that are OK:
-
-- "Master of the Universe"
-- "Project Slayer Leader"
-- "Repo Guardian"
-- "Task Commander"
-- "AI Overlord"
-
-You get the idea. Be creative, but also clear that you are the lead agent.
-
-Once you are registered, the system might have hooks setup that will remind you about who you are, and your ID (this is key to interact with the swarm).
-
-You can always call the "my-agent-info" tool to get your agent ID and details, it will fail / let you know if you are not registered yet.
-
-## What to do next?
-
-Once you've done the initial setup, you should go ahead and start your leader agent using the user provided instructions.
-
-If the user did not provide any instructions, you should reply with the following message:
-
-```
-Hey! 
-
-I'm <your-agent-name>, the leader of this agent swarm. I noticed you haven't provided any instructions for me to follow. 
-
-Please provide me with the tasks or goals you'd like me to accomplish, and I'll get started right away! If not, GTFO.
-
-😈
-```
-
-## Additional Notes
-
-Some useful tool calls you might want to call initially too.
-
-### To get how the swarm is doing:
-
-- `get-swarm` to see what other agents are in the swarm (check their status)
-- `get-tasks` to see if there are any tasks already assigned
-- `get-task-details` to get more info about any tasks you find interesting
-
-
-### To assign tasks to workers:
-
-- `send-task` to assign tasks to specific worker agents
-- `poll-task` to check the progress of the tasks you've assigned
-
-For the polling, we recommend you set up a regular interval to check in on the tasks, so you can keep track of their progress and make adjustments as needed.
-
-You might ask the user if they want to do something else while you wait, but if not, just poll in intervals of ~10-30 seconds for the time the user mentioned. If they did not mention any time, just poll every 30 seconds FOREVER.