a2a-ui 0.8.3

package/lib/features/workbench/workbenchSlice.ts

@@ -0,0 +1,189 @@
+import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
+import type { TaskState } from "@a2a-js/sdk";
+
+export interface TaskFilterPreset {
+  id: string;
+  label: string;
+  query: string;
+  state: TaskState | "all";
+  createdAt: number;
+}
+
+export interface PromptPreset {
+  id: string;
+  label: string;
+  text: string;
+  metadata?: Record<string, string>;
+  createdAt: number;
+  useCount: number;
+}
+
+export interface AgentWorkbenchSettings {
+  defaultMetadata: Record<string, string>;
+  promptPresets: PromptPreset[];
+}
+
+export interface WorkbenchState {
+  taskFilterPresets: TaskFilterPreset[];
+  agentSettings: Record<string, AgentWorkbenchSettings>;
+}
+
+const initialState: WorkbenchState = {
+  taskFilterPresets: [],
+  agentSettings: {},
+};
+
+function normalizeMetadata(
+  metadata: Record<string, string> | undefined,
+): Record<string, string> {
+  if (!metadata) return {};
+  return Object.fromEntries(
+    Object.entries(metadata)
+      .map(([key, value]) => [key.trim(), value] as const)
+      .filter(([key]) => key.length > 0),
+  );
+}
+
+function getAgentSettings(state: WorkbenchState, agentUrl: string): AgentWorkbenchSettings {
+  const existing = state.agentSettings[agentUrl];
+  if (existing) return existing;
+  const created: AgentWorkbenchSettings = {
+    defaultMetadata: {},
+    promptPresets: [],
+  };
+  state.agentSettings[agentUrl] = created;
+  return created;
+}
+
+function defaultPromptLabel(text: string): string {
+  const line = text.trim().split("\n")[0] ?? "";
+  return line.slice(0, 40) || "Saved prompt";
+}
+
+export const workbenchSlice = createSlice({
+  name: "workbench",
+  initialState,
+  reducers: {
+    hydrateWorkbench: (_state, action: PayloadAction<WorkbenchState | undefined>) => {
+      return {
+        taskFilterPresets: action.payload?.taskFilterPresets ?? [],
+        agentSettings: action.payload?.agentSettings ?? {},
+      };
+    },
+
+    saveTaskFilterPreset: (
+      state,
+      action: PayloadAction<{
+        id?: string;
+        label?: string;
+        query: string;
+        state: TaskState | "all";
+      }>,
+    ) => {
+      const label =
+        action.payload.label?.trim() ||
+        action.payload.query.trim().slice(0, 40) ||
+        `${action.payload.state} tasks`;
+
+      const preset: TaskFilterPreset = {
+        id: action.payload.id ?? crypto.randomUUID(),
+        label,
+        query: action.payload.query,
+        state: action.payload.state,
+        createdAt: Date.now(),
+      };
+
+      const index = state.taskFilterPresets.findIndex((entry) => entry.id === preset.id);
+      if (index >= 0) {
+        state.taskFilterPresets[index] = preset;
+      } else {
+        state.taskFilterPresets.unshift(preset);
+      }
+    },
+
+    removeTaskFilterPreset: (state, action: PayloadAction<string>) => {
+      state.taskFilterPresets = state.taskFilterPresets.filter(
+        (preset) => preset.id !== action.payload,
+      );
+    },
+
+    savePromptPreset: (
+      state,
+      action: PayloadAction<{
+        agentUrl: string;
+        id?: string;
+        label?: string;
+        text: string;
+        metadata?: Record<string, string>;
+      }>,
+    ) => {
+      const settings = getAgentSettings(state, action.payload.agentUrl);
+      const preset: PromptPreset = {
+        id: action.payload.id ?? crypto.randomUUID(),
+        label: action.payload.label?.trim() || defaultPromptLabel(action.payload.text),
+        text: action.payload.text,
+        metadata: normalizeMetadata(action.payload.metadata),
+        createdAt: Date.now(),
+        useCount: 0,
+      };
+
+      const index = settings.promptPresets.findIndex((entry) => entry.id === preset.id);
+      if (index >= 0) {
+        settings.promptPresets[index] = {
+          ...settings.promptPresets[index],
+          ...preset,
+        };
+      } else {
+        settings.promptPresets.unshift(preset);
+      }
+    },
+
+    removePromptPreset: (
+      state,
+      action: PayloadAction<{ agentUrl: string; presetId: string }>,
+    ) => {
+      const settings = getAgentSettings(state, action.payload.agentUrl);
+      settings.promptPresets = settings.promptPresets.filter(
+        (preset) => preset.id !== action.payload.presetId,
+      );
+    },
+
+    markPromptPresetUsed: (
+      state,
+      action: PayloadAction<{ agentUrl: string; presetId: string }>,
+    ) => {
+      const settings = getAgentSettings(state, action.payload.agentUrl);
+      const preset = settings.promptPresets.find(
+        (entry) => entry.id === action.payload.presetId,
+      );
+      if (!preset) return;
+      preset.useCount += 1;
+    },
+
+    setAgentDefaultMetadata: (
+      state,
+      action: PayloadAction<{ agentUrl: string; metadata: Record<string, string> }>,
+    ) => {
+      const settings = getAgentSettings(state, action.payload.agentUrl);
+      settings.defaultMetadata = normalizeMetadata(action.payload.metadata);
+    },
+
+    clearAgentDefaultMetadata: (state, action: PayloadAction<string>) => {
+      const settings = getAgentSettings(state, action.payload);
+      settings.defaultMetadata = {};
+    },
+  },
+});
+
+export const {
+  hydrateWorkbench,
+  saveTaskFilterPreset,
+  removeTaskFilterPreset,
+  savePromptPreset,
+  removePromptPreset,
+  markPromptPresetUsed,
+  setAgentDefaultMetadata,
+  clearAgentDefaultMetadata,
+} = workbenchSlice.actions;
+
+export default workbenchSlice.reducer;

package/lib/hooks.ts

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector, useStore } from "react-redux";
+import type { AppDispatch, AppStore, RootState } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+export const useAppStore = useStore.withTypes<AppStore>();

package/lib/persistence.ts

@@ -0,0 +1,124 @@
+import { openDB, type DBSchema, type IDBPDatabase } from "idb";
+import type { Part } from "@a2a-js/sdk";
+import type { Agent } from "./features/agents/agentsSlice";
+import type { Chat, ChatItem } from "./features/chats/chatsSlice";
+import type { QaState } from "./features/qa/types";
+import type { WorkbenchState } from "./features/workbench/workbenchSlice";
+
+interface A2ASchema extends DBSchema {
+  agents: { key: string; value: Agent };
+  chats: { key: string; value: Chat };
+  qa: { key: string; value: QaState };
+  workbench: { key: string; value: WorkbenchState };
+}
+
+let _db: Promise<IDBPDatabase<A2ASchema>> | null = null;
+
+function getDB(): Promise<IDBPDatabase<A2ASchema>> {
+  if (!_db) {
+    _db = openDB<A2ASchema>("a2a-ui", 3, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains("agents")) {
+          db.createObjectStore("agents", { keyPath: "id" });
+        }
+        if (!db.objectStoreNames.contains("chats")) {
+          db.createObjectStore("chats", { keyPath: "id" });
+        }
+        if (!db.objectStoreNames.contains("workbench")) {
+          db.createObjectStore("workbench");
+        }
+        if (!db.objectStoreNames.contains("qa")) {
+          db.createObjectStore("qa");
+        }
+      },
+    });
+  }
+  return _db;
+}
+
+// Migrate items from old format where UserMessageItem had `text` + `attachments`
+// instead of the current `parts` array.
+function migrateItems(items: unknown[]): ChatItem[] {
+  return items.map((item) => {
+    const raw = item as Record<string, unknown>;
+    if (raw.kind === "user-message" && !Array.isArray(raw.parts)) {
+      const parts: Part[] = [];
+      if (typeof raw.text === "string" && raw.text) {
+        parts.push({ kind: "text", text: raw.text });
+      }
+      if (Array.isArray(raw.attachments)) {
+        parts.push(...(raw.attachments as Part[]));
+      }
+      return { ...raw, parts } as ChatItem;
+    }
+    return item as ChatItem;
+  });
+}
+
+export async function loadPersistedState(): Promise<{
+  agents: Agent[];
+  chats: Chat[];
+  workbench: WorkbenchState;
+  qa: QaState;
+}> {
+  const db = await getDB();
+  const [agents, chats, workbench, qa] = await Promise.all([
+    db.getAll("agents"),
+    db.getAll("chats"),
+    db.get("workbench", "state"),
+    db.get("qa", "state"),
+  ]);
+  // Reset runtime-only fields: status is re-evaluated on each page load
+  const restoredAgents = agents.map((a) => ({
+    ...a,
+    tags: a.tags ?? [],
+    favorite: a.favorite ?? false,
+    status: "disconnected" as const,
+    error: undefined,
+  }));
+  const restoredChats = chats.map((c) => ({
+    ...c,
+    archived: c.archived ?? false,
+    pinned: c.pinned ?? false,
+    items: migrateItems(c.items ?? []),
+    executionEvents: c.executionEvents ?? [],
+  }));
+  return {
+    agents: restoredAgents,
+    chats: restoredChats,
+    workbench: {
+      taskFilterPresets: workbench?.taskFilterPresets ?? [],
+      agentSettings: workbench?.agentSettings ?? {},
+    },
+    qa: {
+      suites: qa?.suites ?? [],
+      runs: qa?.runs ?? [],
+    },
+  };
+}
+
+export async function persistAgents(agents: Agent[]): Promise<void> {
+  const db = await getDB();
+  const tx = db.transaction("agents", "readwrite");
+  await tx.store.clear();
+  await Promise.all(agents.map((a) => tx.store.put(a)));
+  await tx.done;
+}
+
+export async function persistChats(chats: Chat[]): Promise<void> {
+  const db = await getDB();
+  const tx = db.transaction("chats", "readwrite");
+  await tx.store.clear();
+  await Promise.all(chats.map((c) => tx.store.put(c)));
+  await tx.done;
+}
+
+export async function persistWorkbench(workbench: WorkbenchState): Promise<void> {
+  const db = await getDB();
+  await db.put("workbench", workbench, "state");
+}
+
+export async function persistQa(qa: QaState): Promise<void> {
+  const db = await getDB();
+  await db.put("qa", qa, "state");
+}

package/lib/store.ts

@@ -0,0 +1,22 @@
+import { configureStore } from "@reduxjs/toolkit";
+import agentsReducer from "./features/agents/agentsSlice";
+import chatsReducer from "./features/chats/chatsSlice";
+import qaReducer from "./features/qa/qaSlice";
+import workbenchReducer from "./features/workbench/workbenchSlice";
+
+export const makeStore = () => {
+  return configureStore({
+    reducer: {
+      agents: agentsReducer,
+      chats: chatsReducer,
+      qa: qaReducer,
+      workbench: workbenchReducer,
+    },
+  });
+};
+
+// Infer the type of makeStore
+export type AppStore = ReturnType<typeof makeStore>;
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<AppStore["getState"]>;
+export type AppDispatch = AppStore["dispatch"];

package/lib/toast.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { XIcon, CheckCircle2Icon, AlertCircleIcon, InfoIcon, AlertTriangleIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ToastType = "info" | "success" | "warning" | "error";
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  message: string;
+  action?: ToastAction;
+  duration?: number; // ms, default 4000
+}
+
+interface ToastContextValue {
+  toast: (opts: Omit<Toast, "id">) => void;
+}
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
+  return ctx;
+}
+
+// ─── Provider + Toaster ───────────────────────────────────────────────────────
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback((opts: Omit<Toast, "id">) => {
+    const id = crypto.randomUUID();
+    setToasts((prev) => [...prev, { ...opts, id }]);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <Toaster toasts={toasts} onDismiss={dismiss} />
+    </ToastContext.Provider>
+  );
+}
+
+// ─── Individual toast item ────────────────────────────────────────────────────
+
+const ICONS: Record<ToastType, React.ReactNode> = {
+  info: <InfoIcon className="size-4 shrink-0 text-blue-500" />,
+  success: <CheckCircle2Icon className="size-4 shrink-0 text-green-500" />,
+  warning: <AlertTriangleIcon className="size-4 shrink-0 text-yellow-500" />,
+  error: <AlertCircleIcon className="size-4 shrink-0 text-destructive" />,
+};
+
+const BORDER: Record<ToastType, string> = {
+  info: "border-blue-200 dark:border-blue-800",
+  success: "border-green-200 dark:border-green-800",
+  warning: "border-yellow-200 dark:border-yellow-800",
+  error: "border-destructive/30",
+};
+
+function ToastItem({ toast: t, onDismiss }: { toast: Toast; onDismiss: (id: string) => void }) {
+  const duration = t.duration ?? 4000;
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    timerRef.current = setTimeout(() => onDismiss(t.id), duration);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [t.id, duration, onDismiss]);
+
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 rounded-lg border bg-background px-3 py-2.5 shadow-md text-sm max-w-sm w-full animate-in slide-in-from-bottom-2 fade-in",
+        BORDER[t.type]
+      )}
+    >
+      {ICONS[t.type]}
+      <span className="flex-1 leading-snug">{t.message}</span>
+      {t.action && (
+        <button
+          onClick={() => { t.action!.onClick(); onDismiss(t.id); }}
+          className="shrink-0 font-medium text-xs underline underline-offset-2 hover:no-underline"
+        >
+          {t.action.label}
+        </button>
+      )}
+      <button
+        onClick={() => onDismiss(t.id)}
+        className="shrink-0 text-muted-foreground hover:text-foreground"
+        aria-label="Dismiss"
+      >
+        <XIcon className="size-3.5" />
+      </button>
+    </div>
+  );
+}
+
+function Toaster({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: string) => void }) {
+  if (toasts.length === 0) return null;
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 items-end">
+      {toasts.map((t) => (
+        <ToastItem key={t.id} toast={t} onDismiss={onDismiss} />
+      ))}
+    </div>
+  );
+}

package/lib/utils/auth.ts

@@ -0,0 +1,141 @@
+import type { AuthConfig, CustomHeader } from "@/lib/features/agents/agentsSlice";
+import { A2UI_EXTENSION_HEADER, A2UI_EXTENSION_VALUE } from "@/lib/a2a/a2ui";
+import { createDebugFetch, type LogEntry } from "@/lib/utils/debugInterceptor";
+import {
+  ClientFactory,
+  ClientFactoryOptions,
+  JsonRpcTransportFactory,
+  RestTransportFactory,
+  DefaultAgentCardResolver,
+  type CallInterceptor,
+} from "@a2a-js/sdk/client";
+
+function isHttpUrl(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function shouldProxyRequest(targetUrl: string): boolean {
+  if (typeof window === "undefined") return false;
+  if (!isHttpUrl(targetUrl)) return false;
+
+  try {
+    return new URL(targetUrl).origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+/** Compute the HTTP headers that correspond to an auth config + custom headers. */
+export function buildRequestHeaders(
+  auth: AuthConfig,
+  customHeaders: CustomHeader[],
+  options: { a2uiEnabled?: boolean } = {}
+): Record<string, string> {
+  const headers: Record<string, string> = {};
+
+  switch (auth.type) {
+    case "bearer":
+      if (auth.bearerToken) {
+        headers["Authorization"] = `Bearer ${auth.bearerToken}`;
+      }
+      break;
+    case "api-key":
+      if (auth.apiKeyHeader && auth.apiKeyValue) {
+        headers[auth.apiKeyHeader] = auth.apiKeyValue;
+      }
+      break;
+    case "basic":
+      if (auth.basicUsername || auth.basicPassword) {
+        const encoded = btoa(
+          `${auth.basicUsername ?? ""}:${auth.basicPassword ?? ""}`
+        );
+        headers["Authorization"] = `Basic ${encoded}`;
+      }
+      break;
+  }
+
+  for (const h of customHeaders) {
+    if (h.key.trim()) {
+      headers[h.key.trim()] = h.value;
+    }
+  }
+
+  if (options.a2uiEnabled && !headers[A2UI_EXTENSION_HEADER]) {
+    headers[A2UI_EXTENSION_HEADER] = A2UI_EXTENSION_VALUE;
+  }
+
+  return headers;
+}
+
+/** Wrap the global fetch to always inject the given headers. */
+function createFetchWithHeaders(
+  extraHeaders: Record<string, string>,
+  onLog?: (entry: LogEntry) => void
+): typeof fetch {
+  const observedFetch = onLog ? createDebugFetch(fetch, onLog) : fetch;
+
+  return async (input, init) => {
+    const request = input instanceof Request ? input : new Request(input, init);
+    const headers = new Headers(request.headers);
+    for (const [key, value] of Object.entries(extraHeaders)) {
+      headers.set(key, value);
+    }
+
+    const body =
+      request.method === "GET" || request.method === "HEAD"
+        ? undefined
+        : await request.clone().arrayBuffer();
+
+    const targetUrl = request.url;
+    const proxyUrl =
+      shouldProxyRequest(targetUrl) && typeof window !== "undefined"
+        ? new URL("/api/proxy", window.location.origin)
+        : null;
+    if (proxyUrl) {
+      proxyUrl.searchParams.set("url", targetUrl);
+      return observedFetch(proxyUrl, {
+        method: request.method,
+        headers,
+        body,
+        signal: request.signal,
+      });
+    }
+
+    return observedFetch(request.url, {
+      method: request.method,
+      headers,
+      body,
+      signal: request.signal,
+    });
+  };
+}
+
+/** Build a ClientFactory that injects auth + custom headers into every request. */
+export function createClientFactory(
+  auth: AuthConfig,
+  customHeaders: CustomHeader[],
+  interceptors?: CallInterceptor[],
+  onTransportLog?: (entry: LogEntry) => void,
+  options: { a2uiEnabled?: boolean } = {}
+): ClientFactory {
+  const extraHeaders = buildRequestHeaders(auth, customHeaders, options);
+  const clientConfig =
+    interceptors && interceptors.length > 0 ? { interceptors } : undefined;
+
+  const fetchImpl = createFetchWithHeaders(extraHeaders, onTransportLog);
+  return new ClientFactory(
+    ClientFactoryOptions.createFrom(ClientFactoryOptions.default, {
+      transports: [
+        new JsonRpcTransportFactory({ fetchImpl }),
+        new RestTransportFactory({ fetchImpl }),
+      ],
+      cardResolver: new DefaultAgentCardResolver({ fetchImpl }),
+      ...(clientConfig ? { clientConfig } : {}),
+    })
+  );
+}