@desplega.ai/agent-swarm 1.49.0 → 1.52.0

package/new-ui/src/components/layout/app-sidebar.tsx

@@ -1,128 +0,0 @@
-import {
-  BarChart3,
-  Bug,
-  Clock,
-  GitBranch,
-  LayoutDashboard,
-  ListTodo,
-  MessageSquare,
-  Milestone,
-  Server,
-  Settings,
-  Users,
-  Workflow,
-} from "lucide-react";
-import { NavLink, useLocation } from "react-router-dom";
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarRail,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
-import { SwarmSwitcher } from "./swarm-switcher";
-
-const navGroups = [
-  {
-    label: "Core",
-    items: [
-      { title: "Dashboard", path: "/", icon: LayoutDashboard },
-      { title: "Agents", path: "/agents", icon: Users },
-      { title: "Tasks", path: "/tasks", icon: ListTodo },
-      { title: "Epics", path: "/epics", icon: Milestone },
-    ],
-  },
-  {
-    label: "Communication",
-    items: [{ title: "Chat", path: "/chat", icon: MessageSquare }],
-  },
-  {
-    label: "Operations",
-    items: [
-      { title: "Services", path: "/services", icon: Server },
-      { title: "Schedules", path: "/schedules", icon: Clock },
-      { title: "Workflows", path: "/workflows", icon: Workflow },
-      { title: "Usage", path: "/usage", icon: BarChart3 },
-    ],
-  },
-  {
-    label: "System",
-    items: [
-      { title: "Config", path: "/config", icon: Settings },
-      { title: "Repos", path: "/repos", icon: GitBranch },
-      { title: "Debug", path: "/debug", icon: Bug },
-    ],
-  },
-];
-
-export function AppSidebar() {
-  const location = useLocation();
-
-  return (
-    <Sidebar collapsible="icon">
-      <SidebarHeader className="border-b border-sidebar-border">
-        <NavLink
-          to="/"
-          className="flex h-10 items-center gap-2 group-data-[collapsible=icon]:justify-center"
-        >
-          <img
-            src="/logo.png"
-            alt="Agent Swarm"
-            className="h-8 w-8 min-h-[32px] min-w-[32px] shrink-0 rounded"
-          />
-          <span className="text-lg font-semibold tracking-tight text-sidebar-foreground group-data-[collapsible=icon]:hidden">
-            Agent Swarm
-          </span>
-        </NavLink>
-        <div className="group-data-[collapsible=icon]:hidden">
-          <SwarmSwitcher />
-        </div>
-      </SidebarHeader>
-
-      <SidebarContent>
-        {navGroups.map((group) => (
-          <SidebarGroup key={group.label}>
-            <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {group.items.map((item) => {
-                  const isActive =
-                    item.path === "/"
-                      ? location.pathname === "/"
-                      : location.pathname.startsWith(item.path);
-                  return (
-                    <SidebarMenuItem key={item.path}>
-                      <SidebarMenuButton asChild isActive={isActive}>
-                        <NavLink to={item.path} end={item.path === "/"}>
-                          <item.icon className="size-4" />
-                          <span>{item.title}</span>
-                        </NavLink>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  );
-                })}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        ))}
-      </SidebarContent>
-
-      <SidebarFooter className="border-t border-sidebar-border">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarTrigger className="w-full justify-start" />
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarFooter>
-
-      <SidebarRail />
-    </Sidebar>
-  );
-}

package/new-ui/src/components/layout/breadcrumbs.tsx

@@ -1,57 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { Link, useLocation } from "react-router-dom";
-
-const routeLabels: Record<string, string> = {
-  agents: "Agents",
-  tasks: "Tasks",
-  epics: "Epics",
-  chat: "Chat",
-  services: "Services",
-  schedules: "Schedules",
-  usage: "Usage",
-  config: "Config",
-  repos: "Repos",
-};
-
-const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-function formatSegment(segment: string): string {
-  if (routeLabels[segment]) return routeLabels[segment];
-  if (UUID_REGEX.test(segment)) return `${segment.slice(0, 8)}...`;
-  return segment;
-}
-
-export function Breadcrumbs() {
-  const location = useLocation();
-  const segments = location.pathname.split("/").filter(Boolean);
-
-  if (segments.length === 0) return null;
-
-  const crumbs = segments.map((segment, index) => {
-    const path = `/${segments.slice(0, index + 1).join("/")}`;
-    const label = formatSegment(segment);
-    const isLast = index === segments.length - 1;
-
-    return { path, label, isLast };
-  });
-
-  return (
-    <nav className="flex items-center gap-1 text-sm text-muted-foreground min-w-0">
-      <Link to="/" className="hover:text-foreground transition-colors shrink-0">
-        Home
-      </Link>
-      {crumbs.map((crumb) => (
-        <span key={crumb.path} className="flex items-center gap-1 min-w-0">
-          <ChevronRight className="size-3 shrink-0" />
-          {crumb.isLast ? (
-            <span className="text-foreground font-medium truncate">{crumb.label}</span>
-          ) : (
-            <Link to={crumb.path} className="hover:text-foreground transition-colors truncate">
-              {crumb.label}
-            </Link>
-          )}
-        </span>
-      ))}
-    </nav>
-  );
-}

package/new-ui/src/components/layout/config-guard.tsx

@@ -1,22 +0,0 @@
-import { Navigate, useLocation } from "react-router-dom";
-import { useConfig } from "@/hooks/use-config";
-
-interface ConfigGuardProps {
-  children: React.ReactNode;
-}
-
-export function ConfigGuard({ children }: ConfigGuardProps) {
-  const { isConfigured } = useConfig();
-  const location = useLocation();
-
-  // Always allow access to the config page itself
-  if (location.pathname === "/config") {
-    return <>{children}</>;
-  }
-
-  if (!isConfigured) {
-    return <Navigate to="/config" replace />;
-  }
-
-  return <>{children}</>;
-}

package/new-ui/src/components/layout/root-layout.tsx

@@ -1,40 +0,0 @@
-import { Suspense } from "react";
-import { Outlet } from "react-router-dom";
-import { CommandMenu } from "@/components/shared/command-menu";
-import { ErrorBoundary } from "@/components/shared/error-boundary";
-import { NameConnectionModal } from "@/components/shared/name-connection-modal";
-import { PageSkeleton } from "@/components/shared/page-skeleton";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
-import { AppHeader } from "./app-header";
-import { AppSidebar } from "./app-sidebar";
-import { ConfigGuard } from "./config-guard";
-
-function ShortcutProvider({ children }: { children: React.ReactNode }) {
-  useKeyboardShortcuts();
-  return <>{children}</>;
-}
-
-export function RootLayout() {
-  return (
-    <ConfigGuard>
-      <ShortcutProvider>
-        <SidebarProvider className="h-svh max-w-full overflow-hidden">
-          <AppSidebar />
-          <SidebarInset className="min-w-0">
-            <AppHeader />
-            <main className="flex flex-1 flex-col min-h-0 min-w-0 overflow-hidden p-4 md:p-6">
-              <ErrorBoundary>
-                <Suspense fallback={<PageSkeleton />}>
-                  <Outlet />
-                </Suspense>
-              </ErrorBoundary>
-            </main>
-          </SidebarInset>
-        </SidebarProvider>
-        <CommandMenu />
-        <NameConnectionModal />
-      </ShortcutProvider>
-    </ConfigGuard>
-  );
-}

package/new-ui/src/components/layout/swarm-switcher.tsx

@@ -1,85 +0,0 @@
-import { Check, ChevronsUpDown, Settings } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import { useHealth } from "@/api/hooks/use-stats";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
-import { useConfig } from "@/hooks/use-config";
-import { cn } from "@/lib/utils";
-
-export function SwarmSwitcher() {
-  const { connections, activeConnection, switchConnection } = useConfig();
-  const { data: health, isError } = useHealth();
-  const navigate = useNavigate();
-
-  const isHealthy = !!health && !isError;
-  const displayName = activeConnection?.name ?? "No connection";
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton className="w-full justify-between text-xs">
-              <div className="flex items-center gap-2 truncate">
-                <div
-                  className={cn(
-                    "size-2 shrink-0 rounded-full",
-                    isHealthy ? "bg-emerald-500" : "bg-red-500",
-                  )}
-                />
-                <span className="truncate font-medium">{displayName}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto size-3.5 shrink-0 text-muted-foreground" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-56" side="right" sideOffset={4}>
-            {connections.map((conn) => {
-              const isActive = conn.id === activeConnection?.id;
-              return (
-                <DropdownMenuItem
-                  key={conn.id}
-                  onClick={() => switchConnection(conn.id)}
-                  className="flex items-center gap-2 text-xs"
-                >
-                  <Check
-                    className={cn("size-3.5 shrink-0", isActive ? "opacity-100" : "opacity-0")}
-                  />
-                  <div
-                    className={cn(
-                      "size-2 shrink-0 rounded-full",
-                      isActive
-                        ? isHealthy
-                          ? "bg-emerald-500"
-                          : "bg-red-500"
-                        : "bg-zinc-400 dark:bg-zinc-600",
-                    )}
-                  />
-                  <span className="truncate">{conn.name}</span>
-                </DropdownMenuItem>
-              );
-            })}
-            {connections.length === 0 && (
-              <DropdownMenuItem disabled className="text-xs text-muted-foreground">
-                No connections
-              </DropdownMenuItem>
-            )}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={() => navigate("/config")}
-              className="flex items-center gap-2 text-xs"
-            >
-              <Settings className="size-3.5 shrink-0" />
-              <span>Manage connections</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  );
-}

package/new-ui/src/components/shared/command-menu.tsx

@@ -1,131 +0,0 @@
-import {
-  BarChart3,
-  Bot,
-  ClipboardList,
-  Clock,
-  FolderGit2,
-  Hexagon,
-  LayoutDashboard,
-  MessageSquare,
-  Server,
-  Settings,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAgents } from "@/api/hooks/use-agents";
-import { useEpics } from "@/api/hooks/use-epics";
-import { useTasks } from "@/api/hooks/use-tasks";
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command";
-
-const NAV_ITEMS = [
-  { label: "Dashboard", path: "/", icon: LayoutDashboard, shortcut: "1" },
-  { label: "Agents", path: "/agents", icon: Bot, shortcut: "2" },
-  { label: "Tasks", path: "/tasks", icon: ClipboardList, shortcut: "3" },
-  { label: "Epics", path: "/epics", icon: Hexagon, shortcut: "4" },
-  { label: "Chat", path: "/chat", icon: MessageSquare, shortcut: "5" },
-  { label: "Schedules", path: "/schedules", icon: Clock, shortcut: "6" },
-  { label: "Usage", path: "/usage", icon: BarChart3, shortcut: "7" },
-  { label: "Config", path: "/config", icon: Settings, shortcut: "8" },
-  { label: "Repos", path: "/repos", icon: FolderGit2, shortcut: "9" },
-  { label: "Services", path: "/services", icon: Server, shortcut: "0" },
-];
-
-export function CommandMenu() {
-  const [open, setOpen] = useState(false);
-  const navigate = useNavigate();
-
-  const { data: agents } = useAgents();
-  const { data: tasksData } = useTasks();
-  const { data: epicsData } = useEpics();
-
-  const tasks = tasksData?.tasks;
-  const epics = epicsData?.epics;
-
-  useEffect(() => {
-    function onKeyDown(e: KeyboardEvent) {
-      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      }
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, []);
-
-  function handleSelect(path: string) {
-    navigate(path);
-    setOpen(false);
-  }
-
-  return (
-    <CommandDialog open={open} onOpenChange={setOpen}>
-      <CommandInput placeholder="Search agents, tasks, epics..." />
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-
-        <CommandGroup heading="Navigation">
-          {NAV_ITEMS.map((item) => (
-            <CommandItem key={item.path} onSelect={() => handleSelect(item.path)}>
-              <item.icon className="h-4 w-4" />
-              <span>{item.label}</span>
-              <span className="ml-auto text-xs text-muted-foreground">{item.shortcut}</span>
-            </CommandItem>
-          ))}
-        </CommandGroup>
-
-        {agents && agents.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Agents">
-              {agents.slice(0, 8).map((agent) => (
-                <CommandItem key={agent.id} onSelect={() => handleSelect(`/agents/${agent.id}`)}>
-                  <Bot className="h-4 w-4" />
-                  <span>{agent.name}</span>
-                  {agent.role && (
-                    <span className="ml-auto text-xs text-muted-foreground">{agent.role}</span>
-                  )}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-
-        {tasks && tasks.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Recent Tasks">
-              {tasks.slice(0, 6).map((task) => (
-                <CommandItem key={task.id} onSelect={() => handleSelect(`/tasks/${task.id}`)}>
-                  <ClipboardList className="h-4 w-4" />
-                  <span className="truncate max-w-[300px]">{task.task}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-
-        {epics && epics.length > 0 && (
-          <>
-            <CommandSeparator />
-            <CommandGroup heading="Epics">
-              {epics.slice(0, 5).map((epic) => (
-                <CommandItem key={epic.id} onSelect={() => handleSelect(`/epics/${epic.id}`)}>
-                  <Hexagon className="h-4 w-4" />
-                  <span>{epic.name}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </>
-        )}
-      </CommandList>
-    </CommandDialog>
-  );
-}

package/new-ui/src/components/shared/data-grid.tsx

@@ -1,141 +0,0 @@
-import {
-  ClientSideRowModelModule,
-  type ColDef,
-  ColumnAutoSizeModule,
-  CsvExportModule,
-  type GetRowIdParams,
-  ModuleRegistry,
-  NumberFilterModule,
-  PaginationModule,
-  QuickFilterModule,
-  type RowClickedEvent,
-  TextFilterModule,
-  ValidationModule,
-} from "ag-grid-community";
-import { AgGridReact } from "ag-grid-react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { cn } from "@/lib/utils";
-
-ModuleRegistry.registerModules([
-  ClientSideRowModelModule,
-  PaginationModule,
-  TextFilterModule,
-  NumberFilterModule,
-  QuickFilterModule,
-  ColumnAutoSizeModule,
-  CsvExportModule,
-  ValidationModule,
-]);
-
-interface DataGridProps<TData> {
-  rowData: TData[] | undefined;
-  columnDefs: ColDef<TData>[];
-  quickFilterText?: string;
-  onRowClicked?: (event: RowClickedEvent<TData>) => void;
-  loading?: boolean;
-  emptyMessage?: string;
-  paginationPageSize?: number;
-  pagination?: boolean;
-  className?: string;
-  domLayout?: "normal" | "autoHeight";
-  enableCellTextSelection?: boolean;
-  getRowId?: (params: GetRowIdParams<TData>) => string;
-}
-
-export function DataGrid<TData>({
-  rowData,
-  columnDefs,
-  quickFilterText,
-  onRowClicked,
-  loading,
-  emptyMessage = "No data to display",
-  paginationPageSize = 20,
-  pagination: paginationEnabled = true,
-  className,
-  domLayout = "normal",
-  enableCellTextSelection = false,
-  getRowId,
-}: DataGridProps<TData>) {
-  const gridRef = useRef<AgGridReact<TData>>(null);
-
-  const defaultGetRowId = useCallback((params: GetRowIdParams<TData>) => {
-    const data = params.data as Record<string, unknown>;
-    if (data && typeof data.id === "string") return data.id;
-    return JSON.stringify(params.data);
-  }, []);
-
-  const defaultColDef = useMemo<ColDef>(
-    () => ({
-      resizable: true,
-      sortable: true,
-      suppressMovable: true,
-      minWidth: 80,
-    }),
-    [],
-  );
-
-  const overlayNoRowsTemplate = useMemo(
-    () =>
-      `<div class="flex items-center justify-center p-8 text-muted-foreground">${emptyMessage}</div>`,
-    [emptyMessage],
-  );
-
-  const onGridReady = useCallback(() => {
-    if (loading) {
-      gridRef.current?.api?.showLoadingOverlay();
-    }
-    gridRef.current?.api?.sizeColumnsToFit();
-  }, [loading]);
-
-  // Track container width to only re-fit columns on real container resizes,
-  // not on scrollbar appear/disappear from content changes (e.g. eye icon toggle)
-  const containerRef = useRef<HTMLDivElement>(null);
-  const lastWidthRef = useRef<number>(0);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const observer = new ResizeObserver((entries) => {
-      const width = entries[0]?.contentRect.width ?? 0;
-      if (Math.abs(width - lastWidthRef.current) > 1) {
-        lastWidthRef.current = width;
-        gridRef.current?.api?.sizeColumnsToFit();
-      }
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn(
-        "ag-theme-quartz w-full",
-        domLayout === "normal" && "h-[500px] flex-1",
-        onRowClicked && "[&_.ag-row]:cursor-pointer",
-        className,
-      )}
-    >
-      <AgGridReact<TData>
-        ref={gridRef}
-        rowData={rowData ?? []}
-        columnDefs={columnDefs}
-        defaultColDef={defaultColDef}
-        quickFilterText={quickFilterText}
-        onRowClicked={onRowClicked}
-        pagination={paginationEnabled}
-        paginationPageSize={paginationPageSize}
-        paginationPageSizeSelector={paginationEnabled ? [10, 20, 50, 100] : undefined}
-        domLayout={domLayout}
-        loading={loading}
-        overlayNoRowsTemplate={overlayNoRowsTemplate}
-        onGridReady={onGridReady}
-        getRowId={getRowId ?? defaultGetRowId}
-        animateRows={false}
-        suppressCellFocus
-        enableCellTextSelection={enableCellTextSelection}
-        ensureDomOrder={enableCellTextSelection}
-      />
-    </div>
-  );
-}

package/new-ui/src/components/shared/empty-state.tsx

@@ -1,24 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "@/lib/utils";
-
-interface EmptyStateProps {
-  icon: LucideIcon;
-  title: string;
-  description?: string;
-  action?: ReactNode;
-  className?: string;
-}
-
-export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
-  return (
-    <div className={cn("flex flex-col items-center justify-center py-16 text-center", className)}>
-      <div className="flex h-14 w-14 items-center justify-center rounded-full bg-muted/50 mb-4">
-        <Icon className="h-7 w-7 text-muted-foreground" />
-      </div>
-      <h3 className="text-sm font-medium">{title}</h3>
-      {description && <p className="mt-1 text-sm text-muted-foreground max-w-sm">{description}</p>}
-      {action && <div className="mt-4">{action}</div>}
-    </div>
-  );
-}