@desplega.ai/agent-swarm 1.20.0 → 1.51.2

package/ui/src/components/StatsBar.tsx

@@ -1,321 +0,0 @@
-import Box from "@mui/joy/Box";
-import { useColorScheme } from "@mui/joy/styles";
-import Typography from "@mui/joy/Typography";
-import { useMonthlyUsageStats, useStats } from "../hooks/queries";
-import { formatCompactNumber, formatCurrency } from "../lib/utils";
-
-interface HexStatProps {
-  label: string;
-  value: number | string;
-  color: string;
-  glowColor: string;
-  isActive?: boolean;
-  isDark: boolean;
-  onClick?: () => void;
-}
-
-function HexStat({ label, value, color, glowColor, isActive, isDark, onClick }: HexStatProps) {
-  return (
-    <Box
-      onClick={onClick}
-      role={onClick ? "button" : undefined}
-      tabIndex={onClick ? 0 : undefined}
-      onKeyDown={
-        onClick
-          ? (e) => {
-              if (e.key === "Enter" || e.key === " ") onClick();
-            }
-          : undefined
-      }
-      sx={{
-        position: "relative",
-        width: { xs: 65, sm: 75, md: 90 },
-        height: { xs: 72, sm: 84, md: 100 },
-        transition: "all 0.3s ease",
-        cursor: onClick ? "pointer" : "default",
-        animation: isActive ? "breathe 3s ease-in-out infinite" : undefined,
-        flexShrink: 0,
-        "@keyframes breathe": {
-          "0%, 100%": { opacity: 0.9, transform: "scale(1)" },
-          "50%": { opacity: 1, transform: "scale(1.02)" },
-        },
-        "&:hover": {
-          filter: isDark
-            ? `drop-shadow(0 0 15px ${glowColor})`
-            : `drop-shadow(0 0 8px ${glowColor})`,
-          transform: onClick ? "scale(1.05)" : undefined,
-        },
-        "&:hover .hex-bg": {
-          bgcolor: isDark ? "#2F2419" : "#F5EDE4",
-        },
-        "& *": {
-          cursor: onClick ? "pointer" : "inherit",
-        },
-      }}
-    >
-      {/* Border layer */}
-      <Box
-        sx={{
-          position: "absolute",
-          inset: 0,
-          clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
-          background: color,
-        }}
-      />
-      {/* Background layer */}
-      <Box
-        className="hex-bg"
-        sx={{
-          position: "absolute",
-          inset: 2,
-          clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
-          bgcolor: isDark ? "#1A130E" : "#FFFFFF",
-          transition: "background-color 0.2s ease",
-        }}
-      />
-      {/* Content layer */}
-      <Box
-        sx={{
-          position: "relative",
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          zIndex: 1,
-        }}
-      >
-        <Typography
-          sx={{
-            fontFamily: "code",
-            fontSize: { xs: "1.1rem", sm: "1.25rem", md: "1.5rem" },
-            fontWeight: 700,
-            color,
-            textShadow: isDark ? `0 0 20px ${glowColor}` : "none",
-            lineHeight: 1,
-          }}
-        >
-          {value}
-        </Typography>
-        <Typography
-          sx={{
-            fontFamily: "body",
-            fontSize: { xs: "0.45rem", sm: "0.5rem", md: "0.55rem" },
-            color: "text.tertiary",
-            letterSpacing: "0.08em",
-            mt: 0.5,
-            textAlign: "center",
-            lineHeight: 1.1,
-            px: 0.5,
-          }}
-        >
-          {label}
-        </Typography>
-      </Box>
-    </Box>
-  );
-}
-
-interface StatsBarProps {
-  onFilterAgents?: (status: "all" | "busy" | "idle") => void;
-  onNavigateToTasks?: (
-    status?: "pending" | "in_progress" | "paused" | "completed" | "failed",
-  ) => void;
-}
-
-export default function StatsBar({ onFilterAgents, onNavigateToTasks }: StatsBarProps) {
-  const { data: stats } = useStats();
-  const { data: usageStats } = useMonthlyUsageStats();
-  const { mode } = useColorScheme();
-  const isDark = mode === "dark";
-
-  if (!stats) return null;
-
-  const colors = {
-    blue: "#3B82F6",
-    amber: isDark ? "#F5A623" : "#D48806",
-    gold: isDark ? "#D4A574" : "#8B6914",
-    tertiary: isDark ? "#8B7355" : "#6B5344",
-    rust: isDark ? "#A85454" : "#B54242",
-    green: "#22C55E",
-    orange: isDark ? "#FF9800" : "#E67E22",
-    blueGlow: isDark ? "rgba(59, 130, 246, 0.5)" : "rgba(59, 130, 246, 0.25)",
-    amberGlow: isDark ? "rgba(245, 166, 35, 0.5)" : "rgba(212, 136, 6, 0.25)",
-    goldGlow: isDark ? "rgba(212, 165, 116, 0.5)" : "rgba(139, 105, 20, 0.25)",
-    tertiaryGlow: isDark ? "rgba(139, 115, 85, 0.4)" : "rgba(107, 83, 68, 0.2)",
-    rustGlow: isDark ? "rgba(168, 84, 84, 0.5)" : "rgba(181, 66, 66, 0.25)",
-    greenGlow: isDark ? "rgba(34, 197, 94, 0.5)" : "rgba(34, 197, 94, 0.25)",
-    orangeGlow: isDark ? "rgba(255, 152, 0, 0.4)" : "rgba(230, 126, 34, 0.2)",
-  };
-
-  // Honeycomb-style arrangement: two rows offset
-  const topRow = [
-    {
-      label: "AGENTS",
-      value: stats.agents.total,
-      color: colors.blue,
-      glowColor: colors.blueGlow,
-      onClick: onFilterAgents ? () => onFilterAgents("all") : undefined,
-    },
-    {
-      label: "BUSY",
-      value: stats.agents.busy,
-      color: colors.amber,
-      glowColor: colors.amberGlow,
-      isActive: stats.agents.busy > 0,
-      onClick: onFilterAgents ? () => onFilterAgents("busy") : undefined,
-    },
-    {
-      label: "IDLE",
-      value: stats.agents.idle,
-      color: colors.gold,
-      glowColor: colors.goldGlow,
-      onClick: onFilterAgents ? () => onFilterAgents("idle") : undefined,
-    },
-  ];
-
-  const bottomRow = [
-    {
-      label: "PENDING",
-      value: stats.tasks.pending,
-      color: colors.tertiary,
-      glowColor: colors.tertiaryGlow,
-      onClick: onNavigateToTasks ? () => onNavigateToTasks("pending") : undefined,
-    },
-    {
-      label: "RUNNING",
-      value: stats.tasks.in_progress,
-      color: colors.amber,
-      glowColor: colors.amberGlow,
-      isActive: stats.tasks.in_progress > 0,
-      onClick: onNavigateToTasks ? () => onNavigateToTasks("in_progress") : undefined,
-    },
-    {
-      label: "PAUSED",
-      value: stats.tasks.paused,
-      color: colors.orange,
-      glowColor: colors.orangeGlow,
-      onClick: onNavigateToTasks ? () => onNavigateToTasks("paused") : undefined,
-    },
-    {
-      label: "DONE",
-      value: stats.tasks.completed,
-      color: colors.gold,
-      glowColor: colors.goldGlow,
-      onClick: onNavigateToTasks ? () => onNavigateToTasks("completed") : undefined,
-    },
-    {
-      label: "FAILED",
-      value: stats.tasks.failed,
-      color: colors.rust,
-      glowColor: colors.rustGlow,
-      onClick: onNavigateToTasks ? () => onNavigateToTasks("failed") : undefined,
-    },
-  ];
-
-  // Usage stats row (MTD = Month to Date)
-  const usageRow = [
-    {
-      label: "MTD TOKENS",
-      value: usageStats ? formatCompactNumber(usageStats.totalTokens) : "—",
-      color: colors.green,
-      glowColor: colors.greenGlow,
-    },
-    {
-      label: "MTD COST",
-      value: usageStats ? formatCurrency(usageStats.totalCostUsd) : "—",
-      color: colors.amber,
-      glowColor: colors.amberGlow,
-    },
-  ];
-
-  return (
-    <Box
-      sx={{
-        bgcolor: "background.surface",
-        border: "1px solid",
-        borderColor: "neutral.outlinedBorder",
-        borderRadius: "8px",
-        py: { xs: 1, md: 1.5 },
-        flexShrink: 0,
-        overflowX: { xs: "auto", md: "visible" },
-        WebkitOverflowScrolling: "touch",
-      }}
-    >
-      {/* Desktop: Two-row honeycomb layout */}
-      <Box
-        sx={{
-          display: { xs: "none", md: "flex" },
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 0,
-        }}
-      >
-        {/* Top row: Agents stats + Usage */}
-        <Box sx={{ display: "flex", gap: 0.5 }}>
-          {[...topRow, ...usageRow].map((stat) => (
-            <HexStat
-              key={stat.label}
-              label={stat.label}
-              value={stat.value}
-              color={stat.color}
-              glowColor={stat.glowColor}
-              isActive={"isActive" in stat ? stat.isActive : undefined}
-              isDark={isDark}
-              onClick={"onClick" in stat ? stat.onClick : undefined}
-            />
-          ))}
-        </Box>
-        {/* Bottom row: Tasks stats (horizontally offset for honeycomb effect) */}
-        <Box
-          sx={{
-            display: "flex",
-            gap: 0.5,
-            mt: { md: "-20px" }, // Overlap rows vertically to create honeycomb interlocking
-            ml: { md: "88px" }, // Offset by ~half hex width for proper honeycomb tessellation
-          }}
-        >
-          {bottomRow.map((stat) => (
-            <HexStat
-              key={stat.label}
-              label={stat.label}
-              value={stat.value}
-              color={stat.color}
-              glowColor={stat.glowColor}
-              isActive={stat.isActive}
-              isDark={isDark}
-              onClick={stat.onClick}
-            />
-          ))}
-        </Box>
-      </Box>
-
-      {/* Mobile: Single row horizontal scroll */}
-      <Box
-        sx={{
-          display: { xs: "flex", md: "none" },
-          flexDirection: "row",
-          alignItems: "center",
-          gap: { xs: 0.5, sm: 1 },
-          px: 1,
-          minWidth: "max-content",
-        }}
-      >
-        {[...topRow, ...bottomRow, ...usageRow].map((stat) => (
-          <HexStat
-            key={stat.label}
-            label={stat.label}
-            value={stat.value}
-            color={stat.color}
-            glowColor={stat.glowColor}
-            isActive={"isActive" in stat ? stat.isActive : undefined}
-            isDark={isDark}
-            onClick={"onClick" in stat ? stat.onClick : undefined}
-          />
-        ))}
-      </Box>
-    </Box>
-  );
-}

package/ui/src/components/StatusBadge.tsx

@@ -1,168 +0,0 @@
-import Chip from "@mui/joy/Chip";
-import { useColorScheme } from "@mui/joy/styles";
-import type { AgentStatus, EpicStatus, TaskStatus } from "../types/api";
-
-interface StatusBadgeProps {
-  status: AgentStatus | TaskStatus | EpicStatus;
-  size?: "sm" | "md" | "lg";
-}
-
-interface StatusConfig {
-  color: "success" | "warning" | "neutral" | "danger";
-  label: string;
-  bgColor: { dark: string; light: string };
-  textColor: { dark: string; light: string };
-  glowColor: { dark: string; light: string };
-}
-
-const statusConfig: Record<AgentStatus | TaskStatus | EpicStatus, StatusConfig> = {
-  // Agent statuses
-  idle: {
-    color: "success",
-    label: "IDLE",
-    bgColor: { dark: "rgba(212, 165, 116, 0.15)", light: "rgba(139, 105, 20, 0.12)" },
-    textColor: { dark: "#D4A574", light: "#8B6914" },
-    glowColor: { dark: "rgba(212, 165, 116, 0.4)", light: "rgba(139, 105, 20, 0.2)" },
-  },
-  busy: {
-    color: "warning",
-    label: "BUSY",
-    bgColor: { dark: "rgba(245, 166, 35, 0.15)", light: "rgba(212, 136, 6, 0.12)" },
-    textColor: { dark: "#F5A623", light: "#D48806" },
-    glowColor: { dark: "rgba(245, 166, 35, 0.5)", light: "rgba(212, 136, 6, 0.25)" },
-  },
-  offline: {
-    color: "neutral",
-    label: "OFFLINE",
-    bgColor: { dark: "rgba(107, 83, 68, 0.15)", light: "rgba(168, 154, 124, 0.15)" },
-    textColor: { dark: "#6B5344", light: "#8B7355" },
-    glowColor: { dark: "rgba(107, 83, 68, 0.3)", light: "rgba(168, 154, 124, 0.15)" },
-  },
-  // Task statuses
-  backlog: {
-    color: "neutral",
-    label: "BACKLOG",
-    bgColor: { dark: "rgba(75, 85, 99, 0.15)", light: "rgba(107, 114, 128, 0.15)" },
-    textColor: { dark: "#9CA3AF", light: "#4B5563" },
-    glowColor: { dark: "rgba(75, 85, 99, 0.3)", light: "rgba(107, 114, 128, 0.15)" },
-  },
-  unassigned: {
-    color: "neutral",
-    label: "UNASSIGNED",
-    bgColor: { dark: "rgba(100, 100, 100, 0.15)", light: "rgba(150, 150, 150, 0.15)" },
-    textColor: { dark: "#888888", light: "#666666" },
-    glowColor: { dark: "rgba(100, 100, 100, 0.3)", light: "rgba(150, 150, 150, 0.15)" },
-  },
-  offered: {
-    color: "warning",
-    label: "OFFERED",
-    bgColor: { dark: "rgba(147, 112, 219, 0.15)", light: "rgba(128, 90, 213, 0.12)" },
-    textColor: { dark: "#9370DB", light: "#6B5B95" },
-    glowColor: { dark: "rgba(147, 112, 219, 0.4)", light: "rgba(128, 90, 213, 0.2)" },
-  },
-  reviewing: {
-    color: "warning",
-    label: "REVIEWING",
-    bgColor: { dark: "rgba(100, 149, 237, 0.15)", light: "rgba(70, 130, 180, 0.12)" },
-    textColor: { dark: "#6495ED", light: "#4682B4" },
-    glowColor: { dark: "rgba(100, 149, 237, 0.4)", light: "rgba(70, 130, 180, 0.2)" },
-  },
-  pending: {
-    color: "neutral",
-    label: "PENDING",
-    bgColor: { dark: "rgba(107, 83, 68, 0.15)", light: "rgba(168, 154, 124, 0.15)" },
-    textColor: { dark: "#8B7355", light: "#6B5344" },
-    glowColor: { dark: "rgba(139, 115, 85, 0.3)", light: "rgba(168, 154, 124, 0.15)" },
-  },
-  in_progress: {
-    color: "warning",
-    label: "IN PROGRESS",
-    bgColor: { dark: "rgba(245, 166, 35, 0.15)", light: "rgba(212, 136, 6, 0.12)" },
-    textColor: { dark: "#F5A623", light: "#D48806" },
-    glowColor: { dark: "rgba(245, 166, 35, 0.5)", light: "rgba(212, 136, 6, 0.25)" },
-  },
-  paused: {
-    color: "warning",
-    label: "PAUSED",
-    bgColor: { dark: "rgba(255, 152, 0, 0.15)", light: "rgba(230, 126, 34, 0.12)" },
-    textColor: { dark: "#FF9800", light: "#E67E22" },
-    glowColor: { dark: "rgba(255, 152, 0, 0.4)", light: "rgba(230, 126, 34, 0.2)" },
-  },
-  completed: {
-    color: "success",
-    label: "COMPLETED",
-    bgColor: { dark: "rgba(212, 165, 116, 0.15)", light: "rgba(139, 105, 20, 0.12)" },
-    textColor: { dark: "#D4A574", light: "#8B6914" },
-    glowColor: { dark: "rgba(212, 165, 116, 0.4)", light: "rgba(139, 105, 20, 0.2)" },
-  },
-  failed: {
-    color: "danger",
-    label: "FAILED",
-    bgColor: { dark: "rgba(168, 84, 84, 0.15)", light: "rgba(181, 66, 66, 0.12)" },
-    textColor: { dark: "#A85454", light: "#B54242" },
-    glowColor: { dark: "rgba(168, 84, 84, 0.4)", light: "rgba(181, 66, 66, 0.2)" },
-  },
-  cancelled: {
-    color: "neutral",
-    label: "CANCELLED",
-    bgColor: { dark: "rgba(128, 128, 128, 0.15)", light: "rgba(169, 169, 169, 0.12)" },
-    textColor: { dark: "#808080", light: "#696969" },
-    glowColor: { dark: "rgba(128, 128, 128, 0.3)", light: "rgba(169, 169, 169, 0.15)" },
-  },
-  // Epic statuses
-  draft: {
-    color: "neutral",
-    label: "DRAFT",
-    bgColor: { dark: "rgba(100, 100, 100, 0.15)", light: "rgba(150, 150, 150, 0.15)" },
-    textColor: { dark: "#888888", light: "#666666" },
-    glowColor: { dark: "rgba(100, 100, 100, 0.3)", light: "rgba(150, 150, 150, 0.15)" },
-  },
-  active: {
-    color: "warning",
-    label: "ACTIVE",
-    bgColor: { dark: "rgba(245, 166, 35, 0.15)", light: "rgba(212, 136, 6, 0.12)" },
-    textColor: { dark: "#F5A623", light: "#D48806" },
-    glowColor: { dark: "rgba(245, 166, 35, 0.5)", light: "rgba(212, 136, 6, 0.25)" },
-  },
-};
-
-export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
-  const { mode } = useColorScheme();
-  const isDark = mode === "dark";
-  const config = statusConfig[status];
-  const isActive =
-    status === "busy" || status === "in_progress" || status === "offered" || status === "active";
-
-  const bgColor = isDark ? config.bgColor.dark : config.bgColor.light;
-  const textColor = isDark ? config.textColor.dark : config.textColor.light;
-  const glowColor = isDark ? config.glowColor.dark : config.glowColor.light;
-
-  return (
-    <Chip
-      size={size}
-      variant="soft"
-      sx={{
-        fontFamily: "code",
-        fontWeight: 600,
-        fontSize: size === "sm" ? "0.65rem" : "0.75rem",
-        letterSpacing: "0.05em",
-        bgcolor: bgColor,
-        color: textColor,
-        border: "1px solid",
-        borderColor: isActive ? textColor : "transparent",
-        boxShadow: isDark ? `0 0 10px ${glowColor}` : "none",
-        animation: isActive ? "pulse-amber 2s ease-in-out infinite" : undefined,
-        "@keyframes pulse-amber": {
-          "0%, 100%": {
-            boxShadow: `0 0 5px ${glowColor}`,
-          },
-          "50%": {
-            boxShadow: `0 0 15px ${glowColor}, 0 0 25px ${glowColor}`,
-          },
-        },
-      }}
-    >
-      {config.label}
-    </Chip>
-  );
-}