@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/new-ui/src/components/shared/stats-bar.tsx

@@ -0,0 +1,132 @@
+import type { LucideIcon } from "lucide-react";
+import { Bot, CheckCircle2, Clock, DollarSign, Heart, Loader2, XCircle, Zap } from "lucide-react";
+import { Link } from "react-router-dom";
+import { cn } from "@/lib/utils";
+
+interface StatItemProps {
+  icon: LucideIcon;
+  label: string;
+  value: number | string;
+  variant?: "default" | "success" | "warning" | "danger";
+  to?: string;
+}
+
+const variantStyles = {
+  default: "text-foreground",
+  success: "text-emerald-500",
+  warning: "text-amber-500",
+  danger: "text-red-500",
+} as const;
+
+function StatItem({ icon: Icon, label, value, variant = "default", to }: StatItemProps) {
+  const content = (
+    <>
+      <Icon className={cn("h-3.5 w-3.5 shrink-0", variantStyles[variant])} />
+      <span className="hidden sm:inline text-xs text-muted-foreground">{label}</span>
+      <span
+        className={cn(
+          "text-xs sm:text-sm font-bold font-mono tabular-nums shrink-0",
+          variantStyles[variant],
+        )}
+      >
+        {value}
+      </span>
+    </>
+  );
+
+  if (to) {
+    return (
+      <Link
+        to={to}
+        className="flex items-center justify-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 hover:bg-muted/50 transition-colors"
+        title={label}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div
+      className="flex items-center justify-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5"
+      title={label}
+    >
+      {content}
+    </div>
+  );
+}
+
+interface StatsBarProps {
+  agents?: { total: number; idle: number; busy: number; offline: number };
+  tasks?: {
+    total: number;
+    pending: number;
+    in_progress: number;
+    completed: number;
+    failed: number;
+  };
+  epics?: { active: number };
+  healthy?: boolean;
+  costToday?: number;
+  costMtd?: number;
+}
+
+function formatCostCompact(usd: number): string {
+  if (usd < 0.01) return "$0";
+  return `$${usd.toFixed(2)}`;
+}
+
+export function StatsBar({ agents, tasks, healthy, costToday, costMtd }: StatsBarProps) {
+  return (
+    <div className="grid grid-cols-3 sm:flex sm:items-center gap-0 rounded-lg border border-border bg-muted/30 sm:divide-x divide-border">
+      <StatItem icon={Bot} label="Agents" value={agents?.total ?? 0} to="/agents" />
+      <StatItem
+        icon={Zap}
+        label="Busy"
+        value={agents?.busy ?? 0}
+        variant={(agents?.busy ?? 0) > 0 ? "warning" : "default"}
+        to="/agents?status=busy"
+      />
+      <StatItem
+        icon={Clock}
+        label="Pending"
+        value={tasks?.pending ?? 0}
+        to="/tasks?status=pending"
+      />
+      <StatItem
+        icon={Loader2}
+        label="Running"
+        value={tasks?.in_progress ?? 0}
+        variant={(tasks?.in_progress ?? 0) > 0 ? "warning" : "default"}
+        to="/tasks?status=in_progress"
+      />
+      <StatItem
+        icon={CheckCircle2}
+        label="Done"
+        value={tasks?.completed ?? 0}
+        variant="success"
+        to="/tasks?status=completed"
+      />
+      <StatItem
+        icon={XCircle}
+        label="Failed"
+        value={tasks?.failed ?? 0}
+        variant={(tasks?.failed ?? 0) > 0 ? "danger" : "default"}
+        to="/tasks?status=failed"
+      />
+      <StatItem
+        icon={DollarSign}
+        label="Today"
+        value={formatCostCompact(costToday ?? 0)}
+        to="/usage"
+      />
+      <StatItem icon={DollarSign} label="MTD" value={formatCostCompact(costMtd ?? 0)} to="/usage" />
+      <StatItem
+        icon={Heart}
+        label="Health"
+        value={healthy ? "OK" : "ERR"}
+        variant={healthy ? "success" : "danger"}
+      />
+    </div>
+  );
+}

package/new-ui/src/components/shared/status-badge.tsx

@@ -0,0 +1,131 @@
+import { Loader2 } from "lucide-react";
+import type {
+  AgentStatus,
+  AgentTaskStatus,
+  EpicStatus,
+  ServiceStatus,
+  WorkflowRunStatus,
+  WorkflowRunStepStatus,
+} from "@/api/types";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+type Status =
+  | AgentStatus
+  | AgentTaskStatus
+  | EpicStatus
+  | ServiceStatus
+  | WorkflowRunStatus
+  | WorkflowRunStepStatus;
+
+interface StatusConfig {
+  label: string;
+  dot: string;
+  text: string;
+  spinner?: boolean;
+}
+
+const statusConfig: Record<string, StatusConfig> = {
+  // Agent statuses
+  idle: { label: "IDLE", dot: "bg-emerald-500", text: "text-emerald-600 dark:text-emerald-400" },
+  busy: {
+    label: "BUSY",
+    dot: "bg-amber-500",
+    text: "text-amber-600 dark:text-amber-400",
+    spinner: true,
+  },
+  offline: { label: "OFFLINE", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+
+  // Task statuses
+  backlog: { label: "BACKLOG", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+  unassigned: { label: "UNASSIGNED", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+  offered: {
+    label: "OFFERED",
+    dot: "bg-amber-500",
+    text: "text-amber-600 dark:text-amber-400",
+    spinner: true,
+  },
+  reviewing: { label: "REVIEWING", dot: "bg-blue-500", text: "text-blue-600 dark:text-blue-400" },
+  pending: { label: "PENDING", dot: "bg-yellow-500", text: "text-yellow-600 dark:text-yellow-400" },
+  in_progress: {
+    label: "IN PROGRESS",
+    dot: "bg-amber-500",
+    text: "text-amber-600 dark:text-amber-400",
+    spinner: true,
+  },
+  paused: { label: "PAUSED", dot: "bg-blue-500", text: "text-blue-600 dark:text-blue-400" },
+  completed: {
+    label: "COMPLETED",
+    dot: "bg-emerald-500",
+    text: "text-emerald-600 dark:text-emerald-400",
+  },
+  failed: { label: "FAILED", dot: "bg-red-500", text: "text-red-600 dark:text-red-400" },
+  cancelled: { label: "CANCELLED", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+
+  // Epic statuses
+  draft: { label: "DRAFT", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+  active: {
+    label: "ACTIVE",
+    dot: "bg-amber-500",
+    text: "text-amber-600 dark:text-amber-400",
+    spinner: true,
+  },
+
+  // Service statuses
+  starting: {
+    label: "STARTING",
+    dot: "bg-yellow-500",
+    text: "text-yellow-600 dark:text-yellow-400",
+  },
+  healthy: {
+    label: "HEALTHY",
+    dot: "bg-emerald-500",
+    text: "text-emerald-600 dark:text-emerald-400",
+  },
+  unhealthy: { label: "UNHEALTHY", dot: "bg-red-500", text: "text-red-600 dark:text-red-400" },
+  stopped: { label: "STOPPED", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+
+  // Workflow run statuses
+  running: {
+    label: "RUNNING",
+    dot: "bg-amber-500",
+    text: "text-amber-600 dark:text-amber-400",
+    spinner: true,
+  },
+  waiting: { label: "WAITING", dot: "bg-yellow-500", text: "text-yellow-600 dark:text-yellow-400" },
+
+  // Workflow step statuses
+  skipped: { label: "SKIPPED", dot: "bg-zinc-400", text: "text-zinc-500 dark:text-zinc-400" },
+} satisfies Record<string, StatusConfig>;
+
+interface StatusBadgeProps {
+  status: Status;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+export function StatusBadge({ status, size = "sm", className }: StatusBadgeProps) {
+  const config = statusConfig[status] ?? {
+    label: status,
+    dot: "bg-zinc-400",
+    text: "text-zinc-500 dark:text-zinc-400",
+  };
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        "gap-1.5 font-medium leading-none items-center",
+        size === "sm" ? "text-[9px] px-1.5 py-0 h-5" : "text-[10px] px-2 py-0 h-6",
+        className,
+      )}
+    >
+      {config.spinner ? (
+        <Loader2 className={cn("h-3 w-3 shrink-0 animate-spin", config.text)} />
+      ) : (
+        <span className={cn("h-1.5 w-1.5 rounded-full shrink-0", config.dot)} />
+      )}
+      <span className={config.text}>{config.label}</span>
+    </Badge>
+  );
+}

package/new-ui/src/components/shared/usage-summary.tsx

@@ -0,0 +1,179 @@
+import { Activity, Clock, Coins, DollarSign, TrendingUp } from "lucide-react";
+import { useMemo } from "react";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { SessionCost, UsageSummaryDailyRow, UsageSummaryTotals } from "@/api/types";
+import { formatCompactNumber, formatCurrency, formatDuration } from "@/lib/utils";
+
+function StatCard({
+  label,
+  value,
+  icon: Icon,
+}: {
+  label: string;
+  value: string;
+  icon: React.ElementType;
+}) {
+  return (
+    <div className="flex items-center gap-3 rounded-lg border border-border px-4 py-3">
+      <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </div>
+      <div>
+        <p className="text-[11px] text-muted-foreground uppercase tracking-wider">{label}</p>
+        <p className="text-lg font-bold font-mono">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+const tooltipStyle = {
+  background: "var(--color-card)",
+  border: "1px solid var(--color-border)",
+  borderRadius: 8,
+  fontSize: 12,
+  color: "var(--color-foreground)",
+};
+
+// New interface: accepts pre-aggregated data from server
+interface UsageSummaryAggregatedProps {
+  totals: UsageSummaryTotals;
+  dailyData: UsageSummaryDailyRow[];
+  daysBack?: number;
+}
+
+// Legacy interface: accepts raw costs (used by agent detail page)
+interface UsageSummaryRawProps {
+  costs: SessionCost[];
+  daysBack?: number;
+}
+
+type UsageSummaryProps = UsageSummaryAggregatedProps | UsageSummaryRawProps;
+
+function isAggregatedProps(props: UsageSummaryProps): props is UsageSummaryAggregatedProps {
+  return "totals" in props;
+}
+
+export function UsageSummary(props: UsageSummaryProps) {
+  const daysBack = props.daysBack ?? 30;
+  const totals = isAggregatedProps(props) ? props.totals : undefined;
+  const costs = isAggregatedProps(props) ? undefined : props.costs;
+
+  // Compute stats from either pre-aggregated or raw data
+  const stats = useMemo(() => {
+    if (totals) {
+      return {
+        totalCost: totals.totalCostUsd,
+        totalTokens: totals.totalInputTokens + totals.totalOutputTokens,
+        sessions: totals.totalSessions,
+        totalDuration: totals.totalDurationMs,
+        avgCost: totals.avgCostPerSession,
+      };
+    }
+    // Legacy: compute from raw costs
+    const c = costs ?? [];
+    const totalCost = c.reduce((s, x) => s + x.totalCostUsd, 0);
+    const totalTokens = c.reduce((s, x) => s + x.inputTokens + x.outputTokens, 0);
+    const totalDuration = c.reduce((s, x) => s + x.durationMs, 0);
+    return {
+      totalCost,
+      totalTokens,
+      sessions: c.length,
+      totalDuration,
+      avgCost: c.length > 0 ? totalCost / c.length : 0,
+    };
+  }, [totals, costs]);
+
+  const aggregatedDailyData = isAggregatedProps(props) ? props.dailyData : undefined;
+
+  // Compute daily chart data
+  const dailyData = useMemo(() => {
+    if (aggregatedDailyData) {
+      // Use pre-aggregated daily data, just format dates for display
+      return aggregatedDailyData.map((d) => ({
+        date: d.date.slice(5),
+        cost: Math.round(d.costUsd * 1000) / 1000,
+      }));
+    }
+    // Legacy: compute from raw costs
+    const c = costs ?? [];
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), now.getDate() - daysBack);
+
+    const dayMap = new Map<string, number>();
+    for (let d = new Date(start); d <= now; d.setDate(d.getDate() + 1)) {
+      dayMap.set(d.toISOString().slice(0, 10), 0);
+    }
+
+    for (const x of c) {
+      const day = x.createdAt.slice(0, 10);
+      if (dayMap.has(day)) {
+        dayMap.set(day, (dayMap.get(day) ?? 0) + x.totalCostUsd);
+      }
+    }
+
+    return Array.from(dayMap.entries()).map(([date, cost]) => ({
+      date: date.slice(5),
+      cost: Math.round(cost * 1000) / 1000,
+    }));
+  }, [aggregatedDailyData, costs, daysBack]);
+
+  const isEmpty = totals ? totals.totalSessions === 0 : (costs ?? []).length === 0;
+
+  if (isEmpty) {
+    return (
+      <p className="text-sm text-muted-foreground py-8 text-center">No usage data available</p>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Stats Strip */}
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+        <StatCard label="Total Cost" value={formatCurrency(stats.totalCost)} icon={DollarSign} />
+        <StatCard label="Tokens" value={formatCompactNumber(stats.totalTokens)} icon={Coins} />
+        <StatCard label="Sessions" value={String(stats.sessions)} icon={Activity} />
+        <StatCard label="Total Time" value={formatDuration(stats.totalDuration)} icon={Clock} />
+        <StatCard label="Avg/Session" value={formatCurrency(stats.avgCost)} icon={TrendingUp} />
+      </div>
+
+      {/* Daily Cost Chart */}
+      <div className="rounded-lg border border-border p-4">
+        <p className="text-xs text-muted-foreground uppercase tracking-wider mb-3">Daily Cost</p>
+        <ResponsiveContainer width="100%" height={200}>
+          <LineChart data={dailyData}>
+            <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+            <XAxis
+              dataKey="date"
+              tick={{ fontSize: 10, fill: "var(--color-muted-foreground)" }}
+              interval={Math.max(0, Math.floor(dailyData.length / 10))}
+            />
+            <YAxis
+              tick={{ fontSize: 10, fill: "var(--color-muted-foreground)" }}
+              tickFormatter={(v) => `$${v}`}
+              width={50}
+            />
+            <Tooltip
+              contentStyle={tooltipStyle}
+              formatter={(value) => [`$${Number(value).toFixed(3)}`, "Cost"]}
+            />
+            <Line
+              type="monotone"
+              dataKey="cost"
+              stroke="var(--color-primary)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}

package/new-ui/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,176 @@
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import type * as React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/new-ui/src/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };