a2a-ui 0.8.3

package/components/ui/tabs.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/components/ui/tooltip.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/components/version-switcher.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { GalleryVerticalEndIcon, ChevronsUpDownIcon, CheckIcon } from "lucide-react";
+
+export function VersionSwitcher({
+  versions,
+  defaultVersion,
+}: {
+  versions: string[];
+  defaultVersion: string;
+}) {
+  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <GalleryVerticalEndIcon className="size-4" />
+              </div>
+              <div className="flex flex-col gap-0.5 leading-none">
+                <span className="font-medium">Documentation</span>
+                <span className="">v{selectedVersion}</span>
+              </div>
+              <ChevronsUpDownIcon className="ms-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-(--radix-dropdown-menu-trigger-width)" align="start">
+            {versions.map(version => (
+              <DropdownMenuItem key={version} onSelect={() => setSelectedVersion(version)}>
+                v{version} {version === selectedVersion && <CheckIcon className="ms-auto" />}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/components/workspace-actions.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { DownloadIcon, UploadIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks";
+import { addAgent } from "@/lib/features/agents/agentsSlice";
+import { importChat } from "@/lib/features/chats/chatsSlice";
+import {
+  buildWorkspaceExport,
+  normalizeImportedAgent,
+  normalizeImportedChat,
+  parseWorkspaceImport,
+} from "@/lib/utils/workspace";
+import { useToast } from "@/lib/toast";
+
+function downloadFile(name: string, content: string, type: string) {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export function WorkspaceActions() {
+  const dispatch = useAppDispatch();
+  const agents = useAppSelector((state) => state.agents.agents);
+  const chats = useAppSelector((state) => state.chats.chats);
+  const importRef = useRef<HTMLInputElement>(null);
+  const [includeChats, setIncludeChats] = useState(true);
+  const { toast } = useToast();
+
+  const exportWorkspace = () => {
+    const workspace = buildWorkspaceExport({ agents, chats, includeChats });
+    downloadFile(
+      "a2a-workspace.json",
+      JSON.stringify(workspace, null, 2),
+      "application/json"
+    );
+  };
+
+  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      try {
+        const workspace = parseWorkspaceImport(JSON.parse(reader.result as string));
+        for (const agent of workspace.agents) {
+          if (agent?.url && agent?.card) {
+            dispatch(addAgent(normalizeImportedAgent(agent)));
+          }
+        }
+        for (const chat of workspace.chats ?? []) {
+          if (chat?.agentUrl && chat?.title) {
+            dispatch(importChat(normalizeImportedChat(chat)));
+          }
+        }
+        toast({ type: "success", message: "Workspace imported." });
+      } catch (err) {
+        toast({
+          type: "error",
+          message: err instanceof Error ? err.message : "Could not import workspace.",
+        });
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
+
+  return (
+    <div className="flex min-w-0 flex-wrap items-center gap-2">
+      <input
+        ref={importRef}
+        type="file"
+        accept=".json,application/json"
+        className="hidden"
+        onChange={handleImport}
+      />
+      <Label className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground max-sm:basis-full">
+        <input
+          type="checkbox"
+          checked={includeChats}
+          onChange={(e) => setIncludeChats(e.target.checked)}
+        />
+        Include chats
+      </Label>
+      <Button
+        variant="outline"
+        size="sm"
+        className="max-sm:flex-1"
+        onClick={exportWorkspace}
+        title="Export agents and workspace data without secrets"
+      >
+        <DownloadIcon data-icon="inline-start" />
+        Export Workspace
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        className="max-sm:flex-1"
+        onClick={() => importRef.current?.click()}
+        title="Import workspace JSON"
+      >
+        <UploadIcon data-icon="inline-start" />
+        Import
+      </Button>
+    </div>
+  );
+}

package/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-vega",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/hooks/use-a2a-connection.ts

@@ -0,0 +1,206 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Client } from "@a2a-js/sdk/client";
+import type { AgentCard } from "@a2a-js/sdk";
+import type { AuthConfig, CustomHeader } from "@/lib/features/agents/agentsSlice";
+import { createClientFactory } from "@/lib/utils/auth";
+import { useA2ADebug } from "@/hooks/use-a2a-debug";
+
+const DEFAULT_AUTH: AuthConfig = { type: "none" };
+const EMPTY_HEADERS: CustomHeader[] = [];
+
+interface UseA2AConnectionOptions {
+  agentUrl: string;
+  auth?: AuthConfig;
+  headers?: CustomHeader[];
+  a2uiEnabled?: boolean;
+  debug?: ReturnType<typeof useA2ADebug>;
+  autoConnect?: boolean;
+  autoLoadCard?: boolean;
+  initialCard?: AgentCard;
+}
+
+export function useA2AConnection({
+  agentUrl,
+  auth: authProp,
+  headers: headersProp,
+  a2uiEnabled = false,
+  debug,
+  autoConnect = true,
+  autoLoadCard = false,
+  initialCard,
+}: UseA2AConnectionOptions) {
+  const auth = authProp ?? DEFAULT_AUTH;
+  const headers = headersProp ?? EMPTY_HEADERS;
+  const clientRef = useRef<Client | null>(null);
+  const clientKeyRef = useRef<string | null>(null);
+  const pendingClientRef = useRef<{ key: string; promise: Promise<Client> } | null>(null);
+  const pendingCardRef = useRef<{ key: string; promise: Promise<AgentCard> } | null>(null);
+  const configKey = useMemo(
+    () =>
+      JSON.stringify({
+        agentUrl,
+        auth,
+        headers,
+        a2uiEnabled,
+      }),
+    [agentUrl, auth, headers, a2uiEnabled],
+  );
+  const [transportState, setTransportState] = useState<{
+    key: string;
+    transportMethod: string | null;
+    status: "idle" | "connecting" | "connected" | "error";
+    error: string | null;
+  }>({
+    key: configKey,
+    transportMethod: null,
+    status: initialCard ? "connected" : "idle",
+    error: null,
+  });
+  const [cardState, setCardState] = useState<{ key: string; card: AgentCard | null }>({
+    key: configKey,
+    card: initialCard ?? null,
+  });
+
+  const transportMethod =
+    transportState.key === configKey ? transportState.transportMethod : null;
+  const status =
+    transportState.key === configKey
+      ? transportState.status === "idle" && initialCard
+        ? "connected"
+        : transportState.status
+      : initialCard
+        ? "connected"
+        : "idle";
+  const error = transportState.key === configKey ? transportState.error : null;
+  const card = cardState.key === configKey ? (cardState.card ?? initialCard ?? null) : (initialCard ?? null);
+
+  // Keep debug in a ref so getClient doesn't need it as a dep (debug is a new
+  // object every render, which would otherwise cause getClient to change and
+  // re-trigger the auto-connect effect on every re-render).
+  const debugRef = useRef(debug);
+  useEffect(() => {
+    debugRef.current = debug;
+  });
+
+  const resetConnection = useCallback(() => {
+    clientRef.current = null;
+    clientKeyRef.current = null;
+    pendingClientRef.current = null;
+    pendingCardRef.current = null;
+  }, []);
+
+  const getClient = useCallback(async (): Promise<Client> => {
+    if (clientRef.current && clientKeyRef.current === configKey) return clientRef.current;
+    if (pendingClientRef.current?.key === configKey) return pendingClientRef.current.promise;
+
+    setTransportState({
+      key: configKey,
+      transportMethod: null,
+      status: "connecting",
+      error: null,
+    });
+
+    const promise = (async () => {
+      const factory = createClientFactory(
+        auth,
+        headers,
+        debugRef.current?.interceptors,
+        debugRef.current?.onTransportLog,
+        { a2uiEnabled },
+      );
+      const client = await factory.createFromUrl(agentUrl);
+      clientRef.current = client;
+      clientKeyRef.current = configKey;
+
+      const protocol =
+        (client as unknown as { transport?: { protocolName?: string } }).transport
+          ?.protocolName ?? null;
+      setTransportState({
+        key: configKey,
+        transportMethod: protocol,
+        status: "connected",
+        error: null,
+      });
+      return client;
+    })();
+
+    pendingClientRef.current = { key: configKey, promise };
+
+    try {
+      return await promise;
+    } catch (err) {
+      clientRef.current = null;
+      clientKeyRef.current = null;
+      setTransportState({
+        key: configKey,
+        transportMethod: null,
+        status: "error",
+        error: err instanceof Error ? err.message : String(err),
+      });
+      throw err;
+    } finally {
+      if (pendingClientRef.current?.key === configKey) {
+        pendingClientRef.current = null;
+      }
+    }
+  }, [a2uiEnabled, agentUrl, auth, configKey, headers]);
+
+  const refreshAgentCard = useCallback(async () => {
+    if (pendingCardRef.current?.key === configKey) return pendingCardRef.current.promise;
+
+    const promise = getClient().then(async (client) => {
+      const nextCard = await client.getAgentCard();
+      setCardState({ key: configKey, card: nextCard });
+      return nextCard;
+    });
+
+    pendingCardRef.current = { key: configKey, promise };
+
+    try {
+      return await promise;
+    } finally {
+      if (pendingCardRef.current?.key === configKey) {
+        pendingCardRef.current = null;
+      }
+    }
+  }, [configKey, getClient]);
+
+  const cancelTask = useCallback(async (taskId: string) => {
+    if (!clientRef.current) return;
+    await clientRef.current.cancelTask({ id: taskId });
+  }, []);
+
+  useEffect(() => {
+    resetConnection();
+    if (!autoConnect) return;
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      getClient()
+        .then(async () => {
+          if (autoLoadCard) {
+            await refreshAgentCard();
+          }
+        })
+        .catch(() => {});
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [autoConnect, autoLoadCard, configKey, getClient, refreshAgentCard, resetConnection]);
+
+  return {
+    agentUrl,
+    a2uiEnabled,
+    card,
+    error,
+    status,
+    transportMethod,
+    getClient,
+    refreshAgentCard,
+    cancelTask,
+    resetConnection,
+  };
+}

package/hooks/use-a2a-debug.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { DebugInterceptor, appendLog, type LogEntry } from "@/lib/utils/debugInterceptor";
+import type { ValidationWarning } from "@/lib/utils/compliance";
+
+interface AppendLogInput extends Omit<LogEntry, "id" | "timestamp"> {
+  id?: string;
+  timestamp?: number;
+}
+
+export function useA2ADebug() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [validationWarnings, setValidationWarnings] = useState<ValidationWarning[]>([]);
+
+  const append = useCallback((entry: AppendLogInput) => {
+    const nextEntry: LogEntry = {
+      id: entry.id ?? crypto.randomUUID(),
+      timestamp: entry.timestamp ?? Date.now(),
+      type: entry.type,
+      method: entry.method,
+      payload: entry.payload,
+      transport: entry.transport,
+    };
+    setLogs((prev) => appendLog(prev, nextEntry));
+  }, []);
+  const interceptor = useMemo(() => new DebugInterceptor(append), [append]);
+  const interceptors = useMemo(() => [interceptor], [interceptor]);
+
+  const recordValidation = useCallback(
+    (method: string, warnings: ValidationWarning[]) => {
+      if (warnings.length === 0) return;
+      setValidationWarnings((prev) => [...prev, ...warnings]);
+      append({
+        type: "validation",
+        method,
+        payload: warnings,
+      });
+    },
+    [append],
+  );
+
+  const recordError = useCallback(
+    (method: string, error: unknown) => {
+      append({
+        type: "error",
+        method,
+        payload: {
+          message: error instanceof Error ? error.message : String(error),
+        },
+      });
+    },
+    [append],
+  );
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+    setValidationWarnings([]);
+  }, []);
+
+  return {
+    logs,
+    validationWarnings,
+    interceptors,
+    onTransportLog: append,
+    appendLogEntry: append,
+    recordValidation,
+    recordError,
+    clearLogs,
+  };
+}