@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/new-ui/src/components/workflows/json-tree.tsx

@@ -0,0 +1,189 @@
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { type ReactNode, useCallback, useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface JsonTreeProps {
+  data: unknown;
+  defaultExpandDepth?: number;
+  maxHeight?: string;
+  className?: string;
+}
+
+export function JsonTree({
+  data,
+  defaultExpandDepth = 1,
+  maxHeight = "300px",
+  className,
+}: JsonTreeProps) {
+  if (data === undefined || data === null) return null;
+
+  return (
+    <div
+      className={cn(
+        "rounded-md bg-muted p-3 overflow-auto font-mono text-xs leading-relaxed",
+        className,
+      )}
+      style={{ maxHeight }}
+    >
+      <JsonValue value={data} depth={0} defaultExpandDepth={defaultExpandDepth} />
+    </div>
+  );
+}
+
+// --- Internal components ---
+
+interface JsonValueProps {
+  value: unknown;
+  depth: number;
+  defaultExpandDepth: number;
+}
+
+function JsonValue({ value, depth, defaultExpandDepth }: JsonValueProps) {
+  if (value === null) {
+    return <span className="text-muted-foreground italic">null</span>;
+  }
+  if (value === undefined) {
+    return <span className="text-muted-foreground italic">undefined</span>;
+  }
+
+  const type = typeof value;
+
+  if (type === "string") {
+    return (
+      <span className="text-emerald-600 dark:text-emerald-400">&quot;{String(value)}&quot;</span>
+    );
+  }
+  if (type === "number") {
+    return <span className="text-amber-600 dark:text-amber-400">{String(value)}</span>;
+  }
+  if (type === "boolean") {
+    return <span className="text-sky-600 dark:text-sky-400">{String(value)}</span>;
+  }
+
+  if (Array.isArray(value)) {
+    return <JsonArray items={value} depth={depth} defaultExpandDepth={defaultExpandDepth} />;
+  }
+  if (type === "object") {
+    return (
+      <JsonObject
+        obj={value as Record<string, unknown>}
+        depth={depth}
+        defaultExpandDepth={defaultExpandDepth}
+      />
+    );
+  }
+
+  // Fallback for anything else
+  return <span className="text-muted-foreground">{String(value)}</span>;
+}
+
+interface JsonObjectProps {
+  obj: Record<string, unknown>;
+  depth: number;
+  defaultExpandDepth: number;
+}
+
+function JsonObject({ obj, depth, defaultExpandDepth }: JsonObjectProps) {
+  const entries = Object.entries(obj);
+  const [expanded, setExpanded] = useState(depth < defaultExpandDepth);
+
+  const toggle = useCallback(() => setExpanded((e) => !e), []);
+
+  if (entries.length === 0) {
+    return <span className="text-muted-foreground">{"{}"}</span>;
+  }
+
+  return (
+    <span>
+      <CollapsibleToggle expanded={expanded} onClick={toggle} />
+      <span className="text-muted-foreground">{"{"}</span>
+      {!expanded && (
+        <span className="text-muted-foreground cursor-pointer" onClick={toggle}>
+          {" "}
+          {entries.length} {entries.length === 1 ? "key" : "keys"}{" "}
+        </span>
+      )}
+      {!expanded && <span className="text-muted-foreground">{"}"}</span>}
+      {expanded && (
+        <>
+          {entries.map(([key, val], i) => (
+            <div key={key} style={{ paddingLeft: `${(depth + 1) * 16}px` }}>
+              <span className="text-muted-foreground">{key}</span>
+              <span className="text-muted-foreground">: </span>
+              <JsonValue value={val} depth={depth + 1} defaultExpandDepth={defaultExpandDepth} />
+              {i < entries.length - 1 && <span className="text-muted-foreground">,</span>}
+            </div>
+          ))}
+          <div style={{ paddingLeft: `${depth * 16}px` }}>
+            <span className="text-muted-foreground">{"}"}</span>
+          </div>
+        </>
+      )}
+    </span>
+  );
+}
+
+interface JsonArrayProps {
+  items: unknown[];
+  depth: number;
+  defaultExpandDepth: number;
+}
+
+function JsonArray({ items, depth, defaultExpandDepth }: JsonArrayProps) {
+  const [expanded, setExpanded] = useState(depth < defaultExpandDepth);
+
+  const toggle = useCallback(() => setExpanded((e) => !e), []);
+
+  if (items.length === 0) {
+    return <span className="text-muted-foreground">{"[]"}</span>;
+  }
+
+  return (
+    <span>
+      <CollapsibleToggle expanded={expanded} onClick={toggle} />
+      <span className="text-muted-foreground">{"["}</span>
+      {!expanded && (
+        <span className="text-muted-foreground cursor-pointer" onClick={toggle}>
+          {" "}
+          {items.length} {items.length === 1 ? "item" : "items"}{" "}
+        </span>
+      )}
+      {!expanded && <span className="text-muted-foreground">{"]"}</span>}
+      {expanded && (
+        <>
+          {items.map((item, i) => (
+            <div key={i} style={{ paddingLeft: `${(depth + 1) * 16}px` }}>
+              <JsonValue value={item} depth={depth + 1} defaultExpandDepth={defaultExpandDepth} />
+              {i < items.length - 1 && <span className="text-muted-foreground">,</span>}
+            </div>
+          ))}
+          <div style={{ paddingLeft: `${depth * 16}px` }}>
+            <span className="text-muted-foreground">{"]"}</span>
+          </div>
+        </>
+      )}
+    </span>
+  );
+}
+
+function CollapsibleToggle({
+  expanded,
+  onClick,
+}: {
+  expanded: boolean;
+  onClick: () => void;
+}): ReactNode {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="inline-flex items-center justify-center h-4 w-4 rounded hover:bg-muted-foreground/20 align-middle mr-0.5"
+    >
+      {expanded ? (
+        <ChevronDown className="h-3 w-3 text-muted-foreground" />
+      ) : (
+        <ChevronRight className="h-3 w-3 text-muted-foreground" />
+      )}
+    </button>
+  );
+}

package/new-ui/src/components/workflows/node-styles.ts

@@ -0,0 +1,10 @@
+import type { WorkflowRunStepStatus } from "@/api/types";
+
+export const statusBorderColor: Record<WorkflowRunStepStatus, string> = {
+  pending: "border-zinc-500/50",
+  running: "border-amber-500",
+  waiting: "border-yellow-500",
+  completed: "border-emerald-500",
+  failed: "border-red-500",
+  skipped: "border-zinc-400/40",
+};

package/new-ui/src/components/workflows/step-detail-sheet.tsx

@@ -0,0 +1,87 @@
+import type { WorkflowNode, 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 { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { formatElapsed, formatSmartTime } from "@/lib/utils";
+
+interface StepDetailSheetProps {
+  step: WorkflowRunStep | null;
+  node: WorkflowNode | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function JsonViewer({ data, label }: { data: unknown; label: string }) {
+  if (data === undefined || data === null) return null;
+  return (
+    <div className="space-y-1">
+      <span className="text-xs text-muted-foreground uppercase tracking-wide">{label}</span>
+      <pre className="whitespace-pre-wrap text-xs font-mono leading-relaxed rounded-md bg-muted p-3 text-muted-foreground max-h-[300px] overflow-y-auto">
+        {typeof data === "string" ? data : JSON.stringify(data, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+export function StepDetailSheet({ step, node, open, onOpenChange }: StepDetailSheetProps) {
+  if (!step || !node) return null;
+
+  const duration =
+    step.startedAt && step.finishedAt ? formatElapsed(step.startedAt, step.finishedAt) : null;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="overflow-y-auto sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2 flex-wrap">
+            <span>{node.label || node.type}</span>
+            <Badge
+              variant="outline"
+              className="text-[9px] px-1.5 py-0 h-5 font-medium leading-none items-center uppercase"
+            >
+              {node.type}
+            </Badge>
+            <StatusBadge status={step.status as "completed"} />
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="space-y-4 mt-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <span className="text-xs text-muted-foreground uppercase tracking-wide">Started</span>
+              <p className="text-sm">{formatSmartTime(step.startedAt)}</p>
+            </div>
+            {step.finishedAt && (
+              <div>
+                <span className="text-xs text-muted-foreground uppercase tracking-wide">
+                  Finished
+                </span>
+                <p className="text-sm">{formatSmartTime(step.finishedAt)}</p>
+              </div>
+            )}
+            {duration && (
+              <div>
+                <span className="text-xs text-muted-foreground uppercase tracking-wide">
+                  Duration
+                </span>
+                <p className="text-sm font-mono">{duration}</p>
+              </div>
+            )}
+          </div>
+
+          {step.error && (
+            <Alert variant="destructive">
+              <AlertDescription className="text-xs font-mono whitespace-pre-wrap">
+                {step.error}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          <JsonViewer data={step.input} label="Input" />
+          <JsonViewer data={step.output} label="Output" />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/new-ui/src/components/workflows/trigger-node.tsx

@@ -0,0 +1,41 @@
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { GitBranch, Globe, ListTodo, Mail, MessageSquare } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { FlowNodeData } from "./graph-utils";
+import { statusBorderColor } from "./node-styles";
+
+const iconMap: Record<string, typeof ListTodo> = {
+  "trigger-new-task": ListTodo,
+  "trigger-task-completed": ListTodo,
+  "trigger-webhook": Globe,
+  "trigger-email": Mail,
+  "trigger-slack-message": MessageSquare,
+  "trigger-github-event": GitBranch,
+};
+
+export function TriggerNode({ data }: NodeProps) {
+  const d = data as unknown as FlowNodeData;
+  const Icon = iconMap[d.nodeType] || ListTodo;
+  const borderColor = d.stepStatus ? statusBorderColor[d.stepStatus] : "border-emerald-500/50";
+
+  return (
+    <div
+      className={cn(
+        "bg-card border-2 rounded-lg shadow-sm px-3 py-2 min-w-[240px] max-w-[280px]",
+        borderColor,
+        d.selected && "ring-2 ring-amber-500 ring-offset-1 ring-offset-background",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <div className="p-1 rounded bg-emerald-500/10">
+          <Icon className="h-4 w-4 text-emerald-500" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="text-xs font-medium truncate">{d.label}</div>
+          <div className="text-[10px] text-muted-foreground uppercase">{d.nodeType}</div>
+        </div>
+      </div>
+      <Handle type="source" position={Position.Bottom} id="default" className="!bg-emerald-500" />
+    </div>
+  );
+}

package/new-ui/src/components/workflows/workflow-graph.tsx

@@ -0,0 +1,65 @@
+import { Background, Controls, ReactFlow } from "@xyflow/react";
+import { useMemo } from "react";
+import "@xyflow/react/dist/style.css";
+import type { WorkflowDefinition, WorkflowRunStep } from "@/api/types";
+import { cn } from "@/lib/utils";
+import { ActionNode } from "./action-node";
+import { ConditionNode } from "./condition-node";
+import { applyDagreLayout, toReactFlowGraph } from "./graph-utils";
+import { TriggerNode } from "./trigger-node";
+
+const nodeTypes = {
+  triggerNode: TriggerNode,
+  conditionNode: ConditionNode,
+  actionNode: ActionNode,
+};
+
+interface WorkflowGraphProps {
+  definition: WorkflowDefinition;
+  steps?: WorkflowRunStep[];
+  onNodeClick?: (nodeId: string) => void;
+  selectedNodeId?: string | null;
+  className?: string;
+}
+
+export function WorkflowGraph({
+  definition,
+  steps,
+  onNodeClick,
+  selectedNodeId,
+  className,
+}: WorkflowGraphProps) {
+  const { nodes, edges } = useMemo(() => {
+    const graph = toReactFlowGraph(definition, steps);
+    // Mark selected node
+    if (selectedNodeId) {
+      for (const node of graph.nodes) {
+        if (node.id === selectedNodeId) {
+          node.data = { ...node.data, selected: true };
+        }
+      }
+    }
+    const layoutNodes = applyDagreLayout(graph.nodes, graph.edges);
+    return { nodes: layoutNodes, edges: graph.edges };
+  }, [definition, steps, selectedNodeId]);
+
+  return (
+    <div className={cn("min-h-[400px] h-[500px] rounded-lg border bg-card", className)}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+        onNodeClick={(_event, node) => onNodeClick?.(node.id)}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background gap={16} size={1} />
+        <Controls showInteractive={false} />
+      </ReactFlow>
+    </div>
+  );
+}

package/{ui/src/hooks/useAutoScroll.ts → new-ui/src/hooks/use-auto-scroll.ts}

@@ -76,7 +76,6 @@ export function useAutoScroll(
       // Subsequent updates - only scroll if user was near bottom
       doScrollToBottom();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element, isFollowing, ...deps]);
 
   return { isFollowing, scrollToBottom };

package/new-ui/src/hooks/use-config.ts

@@ -0,0 +1,203 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { createContext, useCallback, useContext, useState } from "react";
+import {
+  addConnection as addStoredConnection,
+  type Config,
+  type Connection,
+  getActiveConnection,
+  getConnections,
+  getDefaultConfig,
+  removeConnection as removeStoredConnection,
+  resetConfig as resetStoredConfig,
+  saveConfig,
+  setActiveConnection,
+  updateConnection as updateStoredConnection,
+} from "@/lib/config";
+
+export interface PendingConnection {
+  apiUrl: string;
+  apiKey: string;
+}
+
+interface ConfigContextValue {
+  /** All saved connections */
+  connections: Connection[];
+  /** Currently active connection (null if none) */
+  activeConnection: Connection | null;
+  /** Derived Config from the active connection (backward compat) */
+  config: Config;
+  /** Switch to a different connection by ID — clears all react-query caches */
+  switchConnection: (id: string) => void;
+  /** Add a new connection, returns the created Connection */
+  addConnection: (conn: Omit<Connection, "id">) => Connection;
+  /** Update an existing connection by ID */
+  updateConnection: (id: string, updates: Partial<Omit<Connection, "id">>) => void;
+  /** Remove a connection by ID */
+  removeConnection: (id: string) => void;
+  /** Update the active connection's config (backward compat) */
+  setConfig: (config: Config) => void;
+  /** Reset all connections and config */
+  resetConfig: () => void;
+  /** True if active connection has an apiKey */
+  isConfigured: boolean;
+  /** Pending connection from URL params (not yet saved) */
+  pendingConnection: PendingConnection | null;
+  /** Clear the pending connection state */
+  clearPendingConnection: () => void;
+}
+
+export const ConfigContext = createContext<ConfigContextValue | null>(null);
+
+/**
+ * Extract ?apiUrl= and ?apiKey= from the URL, strip them, and return values if both present.
+ * If a matching connection already exists, activate it and return null.
+ */
+function extractUrlParams(
+  connections: Connection[],
+  activateFn: (id: string) => void,
+): PendingConnection | null {
+  const params = new URLSearchParams(window.location.search);
+  const apiUrl = params.get("apiUrl");
+  const apiKey = params.get("apiKey");
+
+  // Always strip the params from the URL
+  if (params.has("apiUrl") || params.has("apiKey")) {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("apiUrl");
+    url.searchParams.delete("apiKey");
+    window.history.replaceState({}, "", url.toString());
+  }
+
+  // Only act if we have both values
+  if (!apiUrl || !apiKey) return null;
+
+  const normalizedUrl = apiUrl.replace(/\/+$/, "");
+
+  // Check if a connection with matching URL+key already exists
+  const existing = connections.find(
+    (c) => c.apiUrl.replace(/\/+$/, "") === normalizedUrl && c.apiKey === apiKey,
+  );
+  if (existing) {
+    activateFn(existing.id);
+    return null;
+  }
+
+  return { apiUrl: normalizedUrl, apiKey };
+}
+
+function loadState(): { connections: Connection[]; activeConnection: Connection | null } {
+  const connections = getConnections();
+  const activeConnection = getActiveConnection();
+  return { connections, activeConnection };
+}
+
+export function useConfigProvider() {
+  const [state, setState] = useState(loadState);
+  const queryClient = useQueryClient();
+
+  const refreshState = useCallback(() => {
+    setState(loadState());
+  }, []);
+
+  // Extract URL params on init — may set pendingConnection or activate an existing one
+  const [pendingConnection, setPendingConnection] = useState<PendingConnection | null>(() => {
+    const initial = loadState();
+    return extractUrlParams(initial.connections, (id) => {
+      setActiveConnection(id);
+      // State will be loaded fresh on next render
+    });
+  });
+
+  // Re-load state if URL params activated an existing connection
+  useState(() => {
+    if (!pendingConnection) {
+      setState(loadState());
+    }
+  });
+
+  const clearPendingConnection = useCallback(() => {
+    setPendingConnection(null);
+  }, []);
+
+  // If there's a pending connection, use its credentials for the config
+  const config: Config = pendingConnection
+    ? { apiUrl: pendingConnection.apiUrl, apiKey: pendingConnection.apiKey }
+    : state.activeConnection
+      ? { apiUrl: state.activeConnection.apiUrl, apiKey: state.activeConnection.apiKey }
+      : getDefaultConfig();
+
+  const switchConnection = useCallback(
+    (id: string) => {
+      setActiveConnection(id);
+      refreshState();
+      queryClient.resetQueries();
+    },
+    [refreshState, queryClient],
+  );
+
+  const addConnection = useCallback(
+    (conn: Omit<Connection, "id">): Connection => {
+      const created = addStoredConnection(conn);
+      refreshState();
+      return created;
+    },
+    [refreshState],
+  );
+
+  const updateConnection = useCallback(
+    (id: string, updates: Partial<Omit<Connection, "id">>): void => {
+      updateStoredConnection(id, updates);
+      refreshState();
+    },
+    [refreshState],
+  );
+
+  const removeConnection = useCallback(
+    (id: string): void => {
+      removeStoredConnection(id);
+      refreshState();
+      // If we removed the active connection, caches are stale
+      queryClient.resetQueries();
+    },
+    [refreshState, queryClient],
+  );
+
+  const setConfig = useCallback(
+    (newConfig: Config) => {
+      saveConfig(newConfig);
+      refreshState();
+    },
+    [refreshState],
+  );
+
+  const resetConfig = useCallback(() => {
+    resetStoredConfig();
+    refreshState();
+    setPendingConnection(null);
+  }, [refreshState]);
+
+  const isConfigured = !!config.apiKey;
+
+  return {
+    connections: state.connections,
+    activeConnection: state.activeConnection,
+    config,
+    switchConnection,
+    addConnection,
+    updateConnection,
+    removeConnection,
+    setConfig,
+    resetConfig,
+    isConfigured,
+    pendingConnection,
+    clearPendingConnection,
+  };
+}
+
+export function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within a ConfigProvider");
+  }
+  return context;
+}

package/new-ui/src/hooks/use-keyboard-shortcuts.ts

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const NAV_SHORTCUTS: Record<string, string> = {
+  "1": "/",
+  "2": "/agents",
+  "3": "/tasks",
+  "4": "/epics",
+  "5": "/chat",
+  "6": "/schedules",
+  "7": "/usage",
+  "8": "/config",
+  "9": "/repos",
+  "0": "/services",
+};
+
+export function useKeyboardShortcuts() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      // Skip when typing in inputs
+      const target = e.target as HTMLElement;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+
+      // Number keys for nav (not with modifiers)
+      if (!e.metaKey && !e.ctrlKey && !e.altKey) {
+        const path = NAV_SHORTCUTS[e.key];
+        if (path) {
+          e.preventDefault();
+          navigate(path);
+        }
+      }
+    }
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [navigate]);
+}

package/new-ui/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}