@desplega.ai/agent-swarm 1.49.0 → 1.52.0

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

@@ -1,132 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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 };