@desplega.ai/agent-swarm 1.2.1 → 1.9.0

package/ui/src/components/StatsBar.tsx

@@ -0,0 +1,288 @@
+import Box from "@mui/joy/Box";
+import Typography from "@mui/joy/Typography";
+import { useColorScheme } from "@mui/joy/styles";
+import { useStats } from "../hooks/queries";
+
+interface HexStatProps {
+  label: string;
+  value: number;
+  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" | "completed" | "failed") => void;
+}
+
+export default function StatsBar({ onFilterAgents, onNavigateToTasks }: StatsBarProps) {
+  const { data: stats } = useStats();
+  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",
+    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)",
+  };
+
+  // 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: "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,
+    },
+  ];
+
+  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: Honeycomb layout */}
+      <Box
+        sx={{
+          display: { xs: "none", md: "flex" },
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 0,
+        }}
+      >
+        {/* Top row - 3 hexagons */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 0.5,
+          }}
+        >
+          {topRow.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>
+
+        {/* Bottom row - 4 hexagons, offset for honeycomb effect */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            gap: 0.5,
+            mt: -2.5, // Overlap for honeycomb effect
+          }}
+        >
+          {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].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>
+  );
+}

package/ui/src/components/StatusBadge.tsx

@@ -0,0 +1,124 @@
+import Chip from "@mui/joy/Chip";
+import { useColorScheme } from "@mui/joy/styles";
+import type { AgentStatus, TaskStatus } from "../types/api";
+
+interface StatusBadgeProps {
+  status: AgentStatus | TaskStatus;
+  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, 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
+  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)" },
+  },
+  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)" },
+  },
+  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)" },
+  },
+};
+
+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";
+
+  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>
+  );
+}