@desplega.ai/agent-swarm 1.20.0 → 1.49.0

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

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

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

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

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

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