@desplega.ai/agent-swarm 1.49.0 → 1.52.0

package/new-ui/src/pages/usage/page.tsx

@@ -1,195 +0,0 @@
-import { useMemo, useState } from "react";
-import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-import { useAgents } from "@/api/hooks/use-agents";
-import { useUsageSummary } from "@/api/hooks/use-costs";
-import { UsageSummary } from "@/components/shared/usage-summary";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Skeleton } from "@/components/ui/skeleton";
-import { formatCompactNumber, formatCurrency } from "@/lib/utils";
-
-type DateRange = "7d" | "30d" | "90d" | "all";
-
-const DAYS_MAP: Record<DateRange, number | null> = { "7d": 7, "30d": 30, "90d": 90, all: null };
-
-function getStartDateISO(range: DateRange): string | undefined {
-  const days = DAYS_MAP[range];
-  if (days == null) return undefined;
-  const d = new Date();
-  d.setDate(d.getDate() - days);
-  return d.toISOString().slice(0, 10);
-}
-
-const tooltipStyle = {
-  background: "var(--color-card)",
-  border: "1px solid var(--color-border)",
-  borderRadius: 8,
-  fontSize: 12,
-  color: "var(--color-foreground)",
-};
-
-export default function UsagePage() {
-  const [dateRange, setDateRange] = useState<DateRange>("30d");
-  const [agentFilter, setAgentFilter] = useState("all");
-
-  const startDate = getStartDateISO(dateRange);
-  const agentId = agentFilter !== "all" ? agentFilter : undefined;
-
-  const { data: summary, isLoading } = useUsageSummary({
-    startDate,
-    agentId,
-    groupBy: "both",
-  });
-  const { data: agents } = useAgents();
-
-  const agentMap = useMemo(() => {
-    const m = new Map<string, string>();
-    agents?.forEach((a) => {
-      m.set(a.id, a.name);
-    });
-    return m;
-  }, [agents]);
-
-  const agentData = useMemo(() => {
-    if (!summary?.byAgent) return [];
-    return summary.byAgent.map((a) => ({
-      agentId: a.agentId,
-      name: agentMap.get(a.agentId) ?? `${a.agentId.slice(0, 8)}...`,
-      cost: Math.round(a.costUsd * 1000) / 1000,
-      sessions: a.sessions,
-      tokens: a.inputTokens + a.outputTokens,
-      avgCost: a.sessions > 0 ? a.costUsd / a.sessions : 0,
-    }));
-  }, [summary, agentMap]);
-
-  if (isLoading) {
-    return (
-      <div className="space-y-4">
-        <h1 className="text-xl font-semibold">Usage</h1>
-        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <Skeleton key={i} className="h-20" />
-          ))}
-        </div>
-        <Skeleton className="h-64" />
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex-1 min-h-0 overflow-y-auto space-y-5">
-      {/* Header + Filters */}
-      <div className="flex items-center justify-between gap-3 flex-wrap">
-        <h1 className="text-xl font-semibold">Usage</h1>
-        <div className="flex items-center gap-2">
-          <Select value={dateRange} onValueChange={(v) => setDateRange(v as DateRange)}>
-            <SelectTrigger className="w-[130px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="7d">Last 7 days</SelectItem>
-              <SelectItem value="30d">Last 30 days</SelectItem>
-              <SelectItem value="90d">Last 90 days</SelectItem>
-              <SelectItem value="all">All time</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select value={agentFilter} onValueChange={setAgentFilter}>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Agent" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Agents</SelectItem>
-              {agents?.map((a) => (
-                <SelectItem key={a.id} value={a.id}>
-                  {a.name}
-                  {a.isLead ? " (Lead)" : ""}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {/* Shared stats + daily chart — using pre-aggregated data */}
-      {summary && (
-        <UsageSummary
-          totals={summary.totals}
-          dailyData={summary.daily}
-          daysBack={DAYS_MAP[dateRange] ?? 90}
-        />
-      )}
-
-      {/* Cost by Agent — bar chart + table */}
-      {agentData.length > 0 && (
-        <div className="rounded-lg border border-border p-4">
-          <p className="text-xs text-muted-foreground uppercase tracking-wider mb-3">
-            Cost by Agent
-          </p>
-          <div className="grid gap-4 lg:grid-cols-[1fr_1fr]">
-            <ResponsiveContainer width="100%" height={Math.max(180, agentData.length * 36)}>
-              <BarChart data={agentData.slice(0, 10)} layout="vertical">
-                <CartesianGrid
-                  strokeDasharray="3 3"
-                  stroke="var(--color-border)"
-                  horizontal={false}
-                />
-                <XAxis
-                  type="number"
-                  tick={{ fontSize: 10, fill: "var(--color-muted-foreground)" }}
-                  tickFormatter={(v) => `$${v}`}
-                />
-                <YAxis
-                  type="category"
-                  dataKey="name"
-                  tick={{ fontSize: 11, fill: "var(--color-muted-foreground)" }}
-                  width={100}
-                />
-                <Tooltip
-                  contentStyle={tooltipStyle}
-                  formatter={(value) => [`$${Number(value).toFixed(3)}`, "Cost"]}
-                />
-                <Bar
-                  dataKey="cost"
-                  fill="var(--color-primary)"
-                  radius={[0, 4, 4, 0]}
-                  barSize={20}
-                />
-              </BarChart>
-            </ResponsiveContainer>
-            <div className="overflow-auto">
-              <table className="w-full text-xs">
-                <thead>
-                  <tr className="text-muted-foreground border-b border-border">
-                    <th className="text-left py-2 font-medium">Agent</th>
-                    <th className="text-right py-2 font-medium">Cost</th>
-                    <th className="text-right py-2 font-medium">Sessions</th>
-                    <th className="text-right py-2 font-medium">Tokens</th>
-                    <th className="text-right py-2 font-medium">Avg/Sess</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {agentData.map((agent) => (
-                    <tr key={agent.agentId} className="border-b border-border/50">
-                      <td className="py-2 font-medium">{agent.name}</td>
-                      <td className="py-2 text-right font-mono">{formatCurrency(agent.cost)}</td>
-                      <td className="py-2 text-right font-mono">{agent.sessions}</td>
-                      <td className="py-2 text-right font-mono">
-                        {formatCompactNumber(agent.tokens)}
-                      </td>
-                      <td className="py-2 text-right font-mono">{formatCurrency(agent.avgCost)}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/new-ui/src/pages/workflow-runs/[id]/page.tsx

@@ -1,363 +0,0 @@
-import {
-  AlertCircle,
-  ArrowLeft,
-  ChevronDown,
-  ChevronRight,
-  ChevronsDownUp,
-  ChevronsUpDown,
-  RefreshCw,
-  Timer,
-} from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { useRetryWorkflowRun, useWorkflow, useWorkflowRun } from "@/api/hooks/use-workflows";
-import type { WorkflowRunStep } from "@/api/types";
-import { StatusBadge } from "@/components/shared/status-badge";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Skeleton } from "@/components/ui/skeleton";
-import { JsonTree } from "@/components/workflows/json-tree";
-import { WorkflowGraph } from "@/components/workflows/workflow-graph";
-import { cn, formatElapsed, formatSmartTime } from "@/lib/utils";
-
-export default function WorkflowRunDetailPage() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const { data: run, isLoading } = useWorkflowRun(id!);
-  const { data: workflow } = useWorkflow(run?.workflowId ?? "");
-  const retryRun = useRetryWorkflowRun();
-
-  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
-  const [expandedStepIds, setExpandedStepIds] = useState<Set<string>>(new Set());
-  const stepRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-
-  const duration =
-    run?.startedAt && run?.finishedAt ? formatElapsed(run.startedAt, run.finishedAt) : null;
-
-  const toggleStep = useCallback((nodeId: string) => {
-    setExpandedStepIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(nodeId)) {
-        next.delete(nodeId);
-      } else {
-        next.add(nodeId);
-      }
-      return next;
-    });
-  }, []);
-
-  // When a graph node is clicked, expand and scroll to that step
-  const handleGraphNodeClick = useCallback((nodeId: string) => {
-    setSelectedNodeId(nodeId);
-    setExpandedStepIds((prev) => {
-      const next = new Set(prev);
-      next.add(nodeId);
-      return next;
-    });
-    // Scroll to the step card after a tick (to allow expansion to render)
-    requestAnimationFrame(() => {
-      const el = stepRefs.current.get(nodeId);
-      el?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-  }, []);
-
-  // When a step card is clicked, highlight the node in the graph (don't toggle expand)
-  const handleStepClick = useCallback((nodeId: string) => {
-    setSelectedNodeId(nodeId);
-  }, []);
-
-  // Clear selection when clicking graph background (deselect)
-  useEffect(() => {
-    // If selectedNodeId doesn't match any step, clear it
-    if (selectedNodeId && run?.steps && !run.steps.find((s) => s.nodeId === selectedNodeId)) {
-      setSelectedNodeId(null);
-    }
-  }, [selectedNodeId, run?.steps]);
-
-  if (isLoading) {
-    return (
-      <div className="space-y-4">
-        <Skeleton className="h-8 w-64" />
-        <Skeleton className="h-[400px] w-full" />
-      </div>
-    );
-  }
-
-  if (!run) {
-    return <p className="text-muted-foreground">Workflow run not found.</p>;
-  }
-
-  const steps = run.steps ?? [];
-
-  return (
-    <div className="flex flex-col flex-1 min-h-0 gap-4">
-      {/* Header */}
-      <div className="shrink-0 space-y-3">
-        <button
-          type="button"
-          onClick={() => navigate("/workflows?tab=runs")}
-          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4" /> Back to Runs
-        </button>
-
-        <div className="flex items-center gap-3 flex-wrap">
-          <h1 className="text-xl font-semibold">Run of {workflow?.name ?? "..."}</h1>
-          <StatusBadge status={run.status} size="md" />
-          <Badge
-            variant="outline"
-            className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase"
-          >
-            {formatSmartTime(run.startedAt)}
-          </Badge>
-          {duration && (
-            <Badge
-              variant="outline"
-              className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase font-mono"
-            >
-              {duration}
-            </Badge>
-          )}
-          {run.status === "failed" && (
-            <div className="ml-auto">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => retryRun.mutate(run.id)}
-                disabled={retryRun.isPending}
-              >
-                <RefreshCw className="h-3 w-3 mr-1" /> Retry
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {run.error && (
-          <Alert variant="destructive">
-            <AlertDescription className="text-xs font-mono whitespace-pre-wrap">
-              {run.error}
-            </AlertDescription>
-          </Alert>
-        )}
-      </div>
-
-      {/* Split layout: graph + steps panel */}
-      <div className="flex flex-col md:flex-row flex-1 min-h-0 gap-4">
-        {/* Graph panel */}
-        <div className="flex-[3] min-h-[300px] md:min-h-0">
-          {workflow && (
-            <WorkflowGraph
-              definition={workflow.definition}
-              steps={run.steps}
-              onNodeClick={handleGraphNodeClick}
-              selectedNodeId={selectedNodeId}
-              className="h-full min-h-[300px]"
-            />
-          )}
-        </div>
-
-        {/* Steps panel */}
-        <div className="flex-[2] min-h-0 flex flex-col rounded-lg border bg-card">
-          <div className="shrink-0 px-4 py-3 border-b flex items-center justify-between">
-            <h2 className="text-sm font-semibold">Steps ({steps.length})</h2>
-            {steps.length > 0 && (
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-6 px-1.5 text-xs text-muted-foreground"
-                  onClick={() => setExpandedStepIds(new Set(steps.map((s) => s.nodeId)))}
-                  title="Expand all"
-                >
-                  <ChevronsUpDown className="h-3.5 w-3.5" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-6 px-1.5 text-xs text-muted-foreground"
-                  onClick={() => setExpandedStepIds(new Set())}
-                  title="Collapse all"
-                >
-                  <ChevronsDownUp className="h-3.5 w-3.5" />
-                </Button>
-              </div>
-            )}
-          </div>
-          <ScrollArea className="flex-1 min-h-0">
-            <div className="p-2 space-y-1.5">
-              {steps.map((step) => (
-                <StepCard
-                  key={step.id}
-                  step={step}
-                  workflowNodes={workflow?.definition.nodes}
-                  isSelected={selectedNodeId === step.nodeId}
-                  isExpanded={expandedStepIds.has(step.nodeId)}
-                  onClick={() => handleStepClick(step.nodeId)}
-                  onToggleExpand={() => toggleStep(step.nodeId)}
-                  ref={(el) => {
-                    if (el) {
-                      stepRefs.current.set(step.nodeId, el);
-                    } else {
-                      stepRefs.current.delete(step.nodeId);
-                    }
-                  }}
-                />
-              ))}
-              {steps.length === 0 && (
-                <p className="text-sm text-muted-foreground p-4 text-center">
-                  No steps executed yet.
-                </p>
-              )}
-            </div>
-          </ScrollArea>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// --- Step Card ---
-
-import { forwardRef } from "react";
-import type { WorkflowNode } from "@/api/types";
-
-interface StepCardProps {
-  step: WorkflowRunStep;
-  workflowNodes?: WorkflowNode[];
-  isSelected: boolean;
-  isExpanded: boolean;
-  onClick: () => void;
-  onToggleExpand: () => void;
-}
-
-const StepCard = forwardRef<HTMLDivElement, StepCardProps>(
-  ({ step, workflowNodes, isSelected, isExpanded, onClick, onToggleExpand }, ref) => {
-    const node = workflowNodes?.find((n) => n.id === step.nodeId);
-    const label = node?.label || step.nodeId;
-    const duration =
-      step.startedAt && step.finishedAt ? formatElapsed(step.startedAt, step.finishedAt) : null;
-
-    return (
-      <div
-        ref={ref}
-        onClick={onClick}
-        className={cn(
-          "rounded-md border bg-background transition-colors cursor-pointer",
-          isSelected && "border-l-2 border-l-amber-500",
-        )}
-      >
-        {/* Header row - always visible */}
-        <div className="w-full flex items-center gap-2 px-3 py-2">
-          <span className="text-sm font-medium truncate">{label}</span>
-
-          <Badge
-            variant="outline"
-            className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase shrink-0"
-          >
-            {step.nodeType}
-          </Badge>
-
-          <StatusBadge status={step.status} className="shrink-0" />
-
-          <div className="ml-auto flex items-center gap-1.5 shrink-0">
-            {duration && (
-              <span className="text-xs text-muted-foreground font-mono flex items-center gap-1">
-                <Timer className="h-3 w-3" />
-                {duration}
-              </span>
-            )}
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                onToggleExpand();
-              }}
-              className="p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-              title={isExpanded ? "Collapse" : "Expand"}
-            >
-              {isExpanded ? (
-                <ChevronDown className="h-3.5 w-3.5" />
-              ) : (
-                <ChevronRight className="h-3.5 w-3.5" />
-              )}
-            </button>
-          </div>
-        </div>
-
-        {/* Expanded details */}
-        {isExpanded && (
-          <div className="px-3 pb-3 pt-1 space-y-3 border-t">
-            {/* Metadata grid */}
-            <div className="grid grid-cols-2 gap-x-4 gap-y-1.5">
-              <MetaField label="Started" value={formatSmartTime(step.startedAt)} />
-              {step.finishedAt && (
-                <MetaField label="Finished" value={formatSmartTime(step.finishedAt)} />
-              )}
-              {duration && <MetaField label="Duration" value={duration} mono />}
-            </div>
-
-            {/* Retry info */}
-            {step.retryCount != null && step.retryCount > 0 && (
-              <div className="flex items-center gap-2 text-xs">
-                <Badge
-                  variant="outline"
-                  className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase text-amber-600 dark:text-amber-400"
-                >
-                  Retry {step.retryCount}
-                  {step.maxRetries != null ? `/${step.maxRetries}` : ""}
-                </Badge>
-                {step.nextRetryAt && (
-                  <span className="text-muted-foreground">
-                    next: {formatSmartTime(step.nextRetryAt)}
-                  </span>
-                )}
-              </div>
-            )}
-
-            {/* Error */}
-            {step.error && (
-              <Alert variant="destructive" className="py-2">
-                <AlertCircle className="h-3.5 w-3.5" />
-                <AlertDescription className="text-xs font-mono whitespace-pre-wrap">
-                  {step.error}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {/* Input */}
-            {step.input != null && (
-              <div className="space-y-1">
-                <span className="text-xs text-muted-foreground uppercase tracking-wide">Input</span>
-                <JsonTree data={step.input} defaultExpandDepth={1} maxHeight="200px" />
-              </div>
-            )}
-
-            {/* Output */}
-            {step.output != null && (
-              <div className="space-y-1">
-                <span className="text-xs text-muted-foreground uppercase tracking-wide">
-                  Output
-                </span>
-                <JsonTree data={step.output} defaultExpandDepth={1} maxHeight="200px" />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-StepCard.displayName = "StepCard";
-
-// --- Small helpers ---
-
-function MetaField({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
-  return (
-    <div>
-      <span className="text-[10px] text-muted-foreground uppercase tracking-wide">{label}</span>
-      <p className={cn("text-xs", mono && "font-mono")}>{value}</p>
-    </div>
-  );
-}