@desplega.ai/agent-swarm 1.49.0 → 1.52.0

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

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

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

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

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

@@ -1,65 +0,0 @@
-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/new-ui/src/hooks/use-auto-scroll.ts

@@ -1,82 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-interface UseAutoScrollResult {
-  /** Whether auto-scroll is currently following new content */
-  isFollowing: boolean;
-  /** Manually scroll to bottom and re-enable auto-follow */
-  scrollToBottom: () => void;
-}
-
-/**
- * Auto-scroll hook that scrolls to bottom when dependencies change,
- * but only if the user was already at/near the bottom.
- * If user has scrolled up to read history, it won't interrupt them.
- *
- * Returns state and controls to show a "Follow" button when auto-scroll is disabled.
- *
- * @param element - The scrollable element ref
- * @param deps - Array of dependencies that trigger scroll check
- * @returns Object with isFollowing state and scrollToBottom function
- */
-export function useAutoScroll(
-  element: HTMLDivElement | null,
-  deps: unknown[],
-): UseAutoScrollResult {
-  const [isFollowing, setIsFollowing] = useState(true);
-  const hasInitializedRef = useRef(false);
-
-  // Track scroll position to determine if user is near bottom
-  const handleScroll = useCallback(() => {
-    if (element) {
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      // Consider "near bottom" if within 100px of the bottom
-      const nearBottom = scrollHeight - scrollTop - clientHeight < 100;
-      setIsFollowing(nearBottom);
-    }
-  }, [element]);
-
-  // Manual scroll to bottom function
-  const scrollToBottom = useCallback(() => {
-    if (element) {
-      element.scrollTo({
-        top: element.scrollHeight,
-        behavior: "smooth",
-      });
-      setIsFollowing(true);
-    }
-  }, [element]);
-
-  // Attach scroll listener
-  useEffect(() => {
-    if (!element) return;
-
-    element.addEventListener("scroll", handleScroll);
-    return () => element.removeEventListener("scroll", handleScroll);
-  }, [element, handleScroll]);
-
-  // Auto-scroll when dependencies change
-  useEffect(() => {
-    if (!element) return;
-
-    const doScrollToBottom = () => {
-      setTimeout(() => {
-        element.scrollTo({
-          top: element.scrollHeight,
-          behavior: hasInitializedRef.current ? "smooth" : "instant",
-        });
-      }, 50);
-    };
-
-    if (!hasInitializedRef.current) {
-      // Initial load - scroll to bottom immediately
-      doScrollToBottom();
-      hasInitializedRef.current = true;
-      setIsFollowing(true);
-    } else if (isFollowing) {
-      // Subsequent updates - only scroll if user was near bottom
-      doScrollToBottom();
-    }
-  }, [element, isFollowing, ...deps]);
-
-  return { isFollowing, scrollToBottom };
-}

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

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