@desplega.ai/agent-swarm 1.20.0 → 1.49.0

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

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

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