@desplega.ai/agent-swarm 1.20.0 → 1.49.0

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

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

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

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

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

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

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

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

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