@desplega.ai/agent-swarm 1.49.0 → 1.52.0

package/new-ui/src/components/shared/error-boundary.tsx

@@ -1,72 +0,0 @@
-import { AlertTriangle, Home, RotateCcw } from "lucide-react";
-import { Component, type ErrorInfo, type ReactNode } from "react";
-import { Link } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-  fallback?: ReactNode;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error("ErrorBoundary caught:", error, errorInfo);
-  }
-
-  handleReset = () => {
-    this.setState({ hasError: false, error: null });
-  };
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) return this.props.fallback;
-
-      return (
-        <div className="flex min-h-[60vh] items-center justify-center p-6">
-          <Card className="max-w-md w-full border-red-500/20">
-            <CardContent className="p-8 text-center space-y-4">
-              <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-red-500/10">
-                <AlertTriangle className="h-7 w-7 text-red-400" />
-              </div>
-              <div>
-                <h2 className="text-lg font-semibold">Something went wrong</h2>
-                <p className="text-sm text-muted-foreground mt-1">
-                  {this.state.error?.message ?? "An unexpected error occurred."}
-                </p>
-              </div>
-              <div className="flex items-center justify-center gap-2 pt-2">
-                <Button onClick={this.handleReset} variant="outline" className="gap-1.5">
-                  <RotateCcw className="h-4 w-4" />
-                  Try Again
-                </Button>
-                <Button asChild className="gap-1.5 bg-primary hover:bg-primary/90">
-                  <Link to="/">
-                    <Home className="h-4 w-4" />
-                    Go Home
-                  </Link>
-                </Button>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/new-ui/src/components/shared/json-viewer.tsx

@@ -1,47 +0,0 @@
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-
-interface JsonViewerProps {
-  data: unknown;
-  title?: string;
-  defaultExpanded?: boolean;
-  className?: string;
-}
-
-export function JsonViewer({ data, title, defaultExpanded = false, className }: JsonViewerProps) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
-
-  const formatted = typeof data === "string" ? data : JSON.stringify(data, null, 2);
-
-  if (title) {
-    return (
-      <div className={cn("rounded-md border border-border/50", className)}>
-        <button
-          type="button"
-          onClick={() => setExpanded(!expanded)}
-          className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
-        >
-          {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-          {title}
-        </button>
-        {expanded && (
-          <pre className="overflow-auto border-t border-border/50 bg-muted/30 p-3 text-xs font-mono leading-relaxed text-foreground/80 max-h-96">
-            {formatted}
-          </pre>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <pre
-      className={cn(
-        "overflow-auto rounded-md bg-muted/30 p-3 text-xs font-mono leading-relaxed text-foreground/80 max-h-96",
-        className,
-      )}
-    >
-      {formatted}
-    </pre>
-  );
-}

package/new-ui/src/components/shared/name-connection-modal.tsx

@@ -1,99 +0,0 @@
-import { Loader2 } from "lucide-react";
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useConfig } from "@/hooks/use-config";
-import { generateSlug } from "@/lib/slugs";
-
-export function NameConnectionModal() {
-  const { pendingConnection, clearPendingConnection, addConnection, switchConnection } =
-    useConfig();
-  const [name, setName] = useState(() => generateSlug());
-  const [status, setStatus] = useState<"idle" | "saving">("idle");
-
-  if (!pendingConnection) return null;
-
-  async function handleSave() {
-    if (!pendingConnection) return;
-    setStatus("saving");
-    try {
-      const created = addConnection({
-        name: name.trim() || generateSlug(),
-        apiUrl: pendingConnection.apiUrl,
-        apiKey: pendingConnection.apiKey,
-      });
-      switchConnection(created.id);
-      clearPendingConnection();
-    } finally {
-      setStatus("idle");
-    }
-  }
-
-  function handleSkip() {
-    // Use credentials for this session only — they'll be lost on refresh
-    clearPendingConnection();
-  }
-
-  return (
-    <Dialog open onOpenChange={(open) => !open && handleSkip()}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Name This Connection</DialogTitle>
-          <DialogDescription>
-            A new connection was detected from URL parameters. Give it a name to save it for future
-            sessions.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-4">
-          <div className="space-y-2">
-            <Label className="text-xs text-muted-foreground uppercase tracking-wide">API URL</Label>
-            <p className="text-sm font-mono rounded-md bg-muted p-2 break-all">
-              {pendingConnection.apiUrl}
-            </p>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="conn-name">Connection Name</Label>
-            <Input
-              id="conn-name"
-              placeholder={name}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleSave();
-              }}
-              autoFocus
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="button" variant="outline" onClick={handleSkip}>
-            Skip
-          </Button>
-          <Button
-            onClick={handleSave}
-            disabled={status === "saving"}
-            className="bg-primary hover:bg-primary/90"
-          >
-            {status === "saving" ? (
-              <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Saving...
-              </>
-            ) : (
-              "Save & Connect"
-            )}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/new-ui/src/components/shared/page-skeleton.tsx

@@ -1,16 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-
-export function PageSkeleton() {
-  return (
-    <div className="space-y-4 p-2">
-      <Skeleton className="h-8 w-48" />
-      <Skeleton className="h-4 w-64" />
-      <div className="grid gap-4 md:grid-cols-3 mt-6">
-        <Skeleton className="h-32" />
-        <Skeleton className="h-32" />
-        <Skeleton className="h-32" />
-      </div>
-      <Skeleton className="h-64 mt-4" />
-    </div>
-  );
-}

package/new-ui/src/components/shared/session-log-viewer.tsx

@@ -1,364 +0,0 @@
-import { ArrowDown, Bot, ChevronDown, ChevronRight, Terminal, User, Wrench } from "lucide-react";
-import { useMemo, useRef, useState } from "react";
-import type { SessionLog } from "@/api/types";
-import { Button } from "@/components/ui/button";
-import { useAutoScroll } from "@/hooks/use-auto-scroll";
-import { cn } from "@/lib/utils";
-
-// --- Parsed message types ---
-
-interface TextBlock {
-  type: "text";
-  text: string;
-}
-
-interface ToolUseBlock {
-  type: "tool_use";
-  id: string;
-  name: string;
-  input: unknown;
-}
-
-interface ToolResultBlock {
-  type: "tool_result";
-  tool_use_id: string;
-  content: string;
-}
-
-interface ThinkingBlock {
-  type: "thinking";
-  thinking: string;
-}
-
-type ContentBlock = TextBlock | ToolUseBlock | ToolResultBlock | ThinkingBlock;
-
-interface ParsedMessage {
-  id: string;
-  role: "user" | "assistant" | "system";
-  content: ContentBlock[];
-  model?: string;
-  iteration: number;
-  timestamp: string;
-}
-
-// --- Parsing ---
-
-function parseSessionLogs(logs: SessionLog[]): ParsedMessage[] {
-  // Sort chronologically: by timestamp first, then lineNumber as tiebreaker
-  // lineNumber represents parallel messages within the same turn (e.g. parallel tool calls)
-  const sorted = [...logs].sort((a, b) => {
-    const timeA = new Date(a.createdAt).getTime();
-    const timeB = new Date(b.createdAt).getTime();
-    if (timeA !== timeB) return timeA - timeB;
-    return a.lineNumber - b.lineNumber;
-  });
-
-  const messages: ParsedMessage[] = [];
-
-  for (const log of sorted) {
-    let parsed: {
-      type?: string;
-      message?: { role?: string; content?: unknown; model?: string; id?: string };
-    } | null = null;
-    try {
-      parsed = JSON.parse(log.content);
-    } catch {
-      // Non-JSON line — treat as system/raw text
-      messages.push({
-        id: log.id,
-        role: "system",
-        content: [{ type: "text", text: log.content }],
-        iteration: log.iteration,
-        timestamp: log.createdAt,
-      });
-      continue;
-    }
-
-    if (!parsed?.message?.content) continue;
-
-    const rawContent = parsed.message.content;
-    const blocks: ContentBlock[] = [];
-
-    if (typeof rawContent === "string") {
-      blocks.push({ type: "text", text: rawContent });
-    } else if (Array.isArray(rawContent)) {
-      for (const block of rawContent) {
-        if (block.type === "text" && block.text) {
-          blocks.push({ type: "text", text: block.text });
-        } else if (block.type === "thinking" && block.thinking) {
-          blocks.push({ type: "thinking", thinking: block.thinking });
-        } else if (block.type === "tool_use") {
-          blocks.push({
-            type: "tool_use",
-            id: block.id ?? "",
-            name: block.name ?? "unknown",
-            input: block.input,
-          });
-        } else if (block.type === "tool_result") {
-          const text =
-            typeof block.content === "string" ? block.content : JSON.stringify(block.content);
-          blocks.push({
-            type: "tool_result",
-            tool_use_id: block.tool_use_id ?? "",
-            content: text,
-          });
-        }
-      }
-    }
-
-    if (blocks.length === 0) continue;
-
-    const role =
-      parsed.type === "assistant" || parsed.message.role === "assistant" ? "assistant" : "user";
-
-    messages.push({
-      id: log.id,
-      role,
-      content: blocks,
-      model: parsed.message.model,
-      iteration: log.iteration,
-      timestamp: log.createdAt,
-    });
-  }
-
-  return messages;
-}
-
-// --- Components ---
-
-function ThinkingBubble({ text }: { text: string }) {
-  const [open, setOpen] = useState(false);
-  const preview = text.slice(0, 120) + (text.length > 120 ? "..." : "");
-
-  return (
-    <div className="rounded-md border border-border/50 bg-muted/30 px-3 py-2">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors w-full text-left"
-      >
-        {open ? (
-          <ChevronDown className="h-3 w-3 shrink-0" />
-        ) : (
-          <ChevronRight className="h-3 w-3 shrink-0" />
-        )}
-        <span className="italic">Thinking...</span>
-      </button>
-      <p className="mt-1 text-xs text-muted-foreground whitespace-pre-wrap">
-        {open ? text : preview}
-      </p>
-    </div>
-  );
-}
-
-function ToolUseBubble({ name, input }: { name: string; input: unknown }) {
-  const [open, setOpen] = useState(false);
-  const inputStr = typeof input === "string" ? input : JSON.stringify(input, null, 2);
-
-  return (
-    <div className="rounded-md border border-border/50 bg-muted/30 px-3 py-2">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 text-xs w-full text-left"
-      >
-        {open ? (
-          <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
-        ) : (
-          <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
-        )}
-        <Wrench className="h-3 w-3 shrink-0 text-primary" />
-        <span className="font-medium text-primary">{name}</span>
-      </button>
-      {open && (
-        <pre className="mt-2 text-[11px] text-muted-foreground whitespace-pre-wrap break-all overflow-auto max-h-48">
-          {inputStr}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-function ToolResultBubble({ content }: { content: string }) {
-  const [open, setOpen] = useState(false);
-  let display = content;
-  try {
-    const parsed = JSON.parse(content);
-    display = JSON.stringify(parsed, null, 2);
-  } catch {
-    // keep as-is
-  }
-  const isLong = display.length > 200;
-  const preview = isLong ? `${display.slice(0, 200)}...` : display;
-
-  return (
-    <div className="rounded-md border border-border/50 bg-muted/30 px-3 py-2">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-foreground transition-colors w-full text-left"
-      >
-        {open ? (
-          <ChevronDown className="h-3 w-3 shrink-0" />
-        ) : (
-          <ChevronRight className="h-3 w-3 shrink-0" />
-        )}
-        <Terminal className="h-3 w-3 shrink-0" />
-        <span>Tool result</span>
-      </button>
-      {(open || !isLong) && (
-        <pre className="mt-1 text-[11px] text-muted-foreground whitespace-pre-wrap break-all overflow-auto max-h-64">
-          {open ? display : preview}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-function MessageBubble({ message }: { message: ParsedMessage }) {
-  const isAssistant = message.role === "assistant";
-  const isSystem = message.role === "system";
-
-  return (
-    <div className={cn("flex gap-3 px-4 py-3", isAssistant ? "" : "bg-muted/20")}>
-      <div
-        className={cn(
-          "flex h-6 w-6 shrink-0 items-center justify-center rounded-full mt-0.5",
-          isAssistant
-            ? "bg-primary/15 text-primary"
-            : isSystem
-              ? "bg-muted text-muted-foreground"
-              : "bg-muted text-muted-foreground",
-        )}
-      >
-        {isAssistant ? <Bot className="h-3.5 w-3.5" /> : <User className="h-3.5 w-3.5" />}
-      </div>
-      <div className="min-w-0 flex-1 space-y-2">
-        <div className="flex items-center gap-2">
-          <span className="text-[11px] font-semibold text-muted-foreground">
-            {isAssistant ? "Agent" : isSystem ? "System" : "Tool"}
-          </span>
-          {message.model && (
-            <span className="text-[10px] text-muted-foreground/60 font-mono">{message.model}</span>
-          )}
-          <span className="ml-auto text-[10px] text-muted-foreground/50 font-mono">
-            {new Date(message.timestamp).toLocaleTimeString([], {
-              hour: "2-digit",
-              minute: "2-digit",
-              second: "2-digit",
-            })}
-          </span>
-        </div>
-        {message.content.map((block, i) => {
-          const key = `${message.id}-${i}`;
-          switch (block.type) {
-            case "text":
-              return (
-                <p key={key} className="text-sm text-foreground whitespace-pre-wrap break-words">
-                  {block.text}
-                </p>
-              );
-            case "thinking":
-              return <ThinkingBubble key={key} text={block.thinking} />;
-            case "tool_use":
-              return <ToolUseBubble key={key} name={block.name} input={block.input} />;
-            case "tool_result":
-              return <ToolResultBubble key={key} content={block.content} />;
-            default:
-              return null;
-          }
-        })}
-      </div>
-    </div>
-  );
-}
-
-function IterationDivider({ iteration }: { iteration: number }) {
-  return (
-    <div className="flex items-center gap-3 px-4 py-1.5">
-      <div className="h-px flex-1 bg-border" />
-      <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-        Iteration {iteration}
-      </span>
-      <div className="h-px flex-1 bg-border" />
-    </div>
-  );
-}
-
-// --- Main component ---
-
-interface SessionLogViewerProps {
-  logs: SessionLog[];
-  className?: string;
-}
-
-export function SessionLogViewer({ logs, className }: SessionLogViewerProps) {
-  const messages = useMemo(() => parseSessionLogs(logs), [logs]);
-
-  const [scrollEl, setScrollEl] = useState<HTMLDivElement | null>(null);
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  const { isFollowing, scrollToBottom } = useAutoScroll(scrollEl, [logs]);
-
-  // Pre-compute which messages start a new iteration
-  const iterationStarts = useMemo(() => {
-    const starts = new Set<string>();
-    let prev = -1;
-    for (const msg of messages) {
-      if (msg.iteration !== prev) {
-        starts.add(msg.id);
-        prev = msg.iteration;
-      }
-    }
-    return starts;
-  }, [messages]);
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col rounded-lg border border-border bg-background overflow-hidden",
-        className,
-      )}
-    >
-      <div className="flex items-center justify-between px-4 py-2.5 border-b border-border bg-muted/50">
-        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
-          Session Logs
-        </span>
-        {!isFollowing && (
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={scrollToBottom}
-            className="gap-1 h-6 text-xs text-muted-foreground hover:text-foreground"
-          >
-            <ArrowDown className="h-3 w-3" />
-            Follow
-          </Button>
-        )}
-      </div>
-      <div
-        ref={(el) => {
-          scrollRef.current = el;
-          setScrollEl(el);
-        }}
-        className="flex-1 min-h-0 overflow-auto"
-      >
-        {messages.length === 0 ? (
-          <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
-            No session data
-          </div>
-        ) : (
-          <div className="divide-y divide-border/50">
-            {messages.map((msg) => {
-              return (
-                <div key={msg.id}>
-                  {iterationStarts.has(msg.id) && <IterationDivider iteration={msg.iteration} />}
-                  <MessageBubble message={msg} />
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}