feat: support a2a mode

2026-04-01 11:21:55 +08:00
parent 9952af198a
commit 86447049a9
12 changed files with 3092 additions and 26 deletions
@@ -0,0 +1,175 @@
+import { api } from "@/lib/api";
+
+export interface A2ARemoteAgent {
+  id: number;
+  project_id: number;
+  name: string;
+  base_url: string;
+  auth_scheme: "none" | "bearer";
+  protocol_version?: string | null;
+  capabilities: string[];
+  healthy: boolean;
+  failure_count: number;
+  circuit_open_until?: string | null;
+  card_fetched_at?: string | null;
+}
+
+export interface A2ATask {
+  id: string;
+  project_id: number;
+  source: string;
+  state: string;
+  remote_agent_id?: number | null;
+  input_text: string;
+  output_text?: string | null;
+  error_message?: string | null;
+  compatibility_mode: boolean;
+  metadata: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+  finished_at?: string | null;
+}
+
+export interface A2ASendMessagePayload {
+  project_id: number;
+  message: string;
+  session_id?: string;
+  remote_agent_id?: number;
+  route_mode?: "auto" | "local" | "a2a" | "a2a_first" | "local_first" | "mcp_first";
+  fallback_chain?: Array<"a2a" | "local" | "mcp">;
+  idempotency_key?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface A2ASendMessageResponse {
+  task: A2ATask;
+  routing?: {
+    selected?: string;
+    fallback_chain?: string[];
+    canary_hit?: boolean;
+    reason?: string;
+  };
+}
+
+export interface A2ASubscribeEvent {
+  type?: string;
+  event?: string;
+  task_id?: string;
+  task_status?: string;
+  status?: string;
+  artifact?: {
+    content?: string;
+  };
+  output?: string;
+  source?: string;
+  timestamp?: string;
+}
+
+type SubscribeHandler = (event: A2ASubscribeEvent) => void;
+
+const parseSseEvents = (chunk: string): A2ASubscribeEvent[] => {
+  const blocks = chunk.split("\n\n");
+  const events: A2ASubscribeEvent[] = [];
+  for (const block of blocks) {
+    if (!block.trim()) continue;
+    const lines = block.split("\n");
+    const dataLine = lines.find((line) => line.startsWith("data:"));
+    if (!dataLine) continue;
+    const raw = dataLine.slice(5).trim();
+    if (!raw) continue;
+    try {
+      const parsed = JSON.parse(raw) as A2ASubscribeEvent;
+      events.push(parsed);
+    } catch {
+      continue;
+    }
+  }
+  return events;
+};
+
+const getAuthHeaders = (): Record<string, string> => {
+  const token = localStorage.getItem("token");
+  return token ? { Authorization: `Bearer ${token}` } : {};
+};
+
+export const a2aApi = {
+  listRemoteAgents(projectId: number) {
+    return api.get<A2ARemoteAgent[]>(`/api/v1/a2a/remote-agents?project_id=${projectId}`);
+  },
+  createRemoteAgent(payload: {
+    project_id: number;
+    name: string;
+    base_url: string;
+    auth_scheme: "none" | "bearer";
+    auth_token?: string;
+  }) {
+    return api.post<A2ARemoteAgent>("/api/v1/a2a/remote-agents", payload);
+  },
+  updateRemoteAgent(agentId: number, payload: {
+    name?: string;
+    base_url?: string;
+    auth_scheme?: "none" | "bearer";
+    auth_token?: string;
+  }) {
+    return api.put<A2ARemoteAgent>(`/api/v1/a2a/remote-agents/${agentId}`, payload);
+  },
+  deleteRemoteAgent(agentId: number) {
+    return api.delete<{ status: string }>(`/api/v1/a2a/remote-agents/${agentId}`);
+  },
+  refreshRemoteAgentCard(agentId: number) {
+    return api.post<A2ARemoteAgent>(`/api/v1/a2a/remote-agents/${agentId}/refresh-card`, {});
+  },
+  healthCheckRemoteAgent(agentId: number) {
+    return api.post<{ healthy: boolean; failure_count: number }>(`/api/v1/a2a/remote-agents/${agentId}/health-check`, {});
+  },
+  listTasks(projectId: number, state?: string) {
+    const params = new URLSearchParams({ project_id: String(projectId), limit: "100" });
+    if (state && state !== "all") {
+      params.set("state", state);
+    }
+    return api.get<A2ATask[]>(`/api/v1/a2a/tasks?${params.toString()}`);
+  },
+  getTask(taskId: string) {
+    return api.get<A2ATask>(`/api/v1/a2a/tasks/${taskId}`);
+  },
+  cancelTask(taskId: string) {
+    return api.post<{ task_id: string; state: string }>(`/api/v1/a2a/tasks/${taskId}/cancel`, {});
+  },
+  sendMessage(payload: A2ASendMessagePayload) {
+    return api.post<A2ASendMessageResponse>("/api/v1/a2a/messages/send", payload);
+  },
+  async subscribeTask(taskId: string, onEvent: SubscribeHandler, signal?: AbortSignal): Promise<void> {
+    const response = await fetch(`/api/v1/a2a/tasks/${taskId}/subscribe`, {
+      method: "GET",
+      headers: {
+        ...getAuthHeaders(),
+      },
+      signal,
+    });
+    if (!response.ok || !response.body) {
+      throw new Error(`Subscribe failed: ${response.status}`);
+    }
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder("utf-8");
+    let buffer = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const splitIndex = buffer.lastIndexOf("\n\n");
+      if (splitIndex === -1) continue;
+      const complete = buffer.slice(0, splitIndex);
+      buffer = buffer.slice(splitIndex + 2);
+      const events = parseSseEvents(complete);
+      for (const event of events) {
+        onEvent(event);
+      }
+    }
+    if (buffer.trim()) {
+      const events = parseSseEvents(buffer);
+      for (const event of events) {
+        onEvent(event);
+      }
+    }
+  },
+};
@@ -1,7 +1,8 @@
 import { useState, useRef, useEffect } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { User, Loader2, ArrowUp, ChevronDown, Check, Square, Plus, Database, Wand2, CheckCircle2, Table, XCircle, Settings, ExternalLink, Download, Copy, Mic, X, Compass } from "lucide-react";
+import { User, Loader2, ArrowUp, ChevronDown, Check, Square, Plus, Database, Wand2, CheckCircle2, Table, XCircle, Settings, ExternalLink, Download, Copy, Mic, X, Compass, RotateCcw } from "lucide-react";
 import { api } from "@/lib/api";
+import { a2aApi, type A2ARemoteAgent, type A2ATask, type A2ASubscribeEvent } from "@/api/a2a";
 import { type ChartSpec } from "@/store/visualizationStore";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
@@ -31,6 +32,12 @@ interface Message {
  };
  artifacts?: MessageArtifact[];
  kbCitations?: KnowledgeCitation[];
+  a2aTaskId?: string;
+  a2aTaskState?: string;
+  a2aRouteMode?: string;
+  a2aRemoteAgentId?: number | null;
+  a2aInputText?: string;
+  a2aError?: string;
 }

 interface MessageViz {
@@ -81,7 +88,7 @@ const splitReportHtml = (content: string): { markdown: string; reportHtml: strin
  return { markdown, reportHtml: reportHtml || null };
 };

-const HTML_FILE_REGEX = /data[\\\/]data[\\\/]([a-zA-Z0-9_\-]+\.html?)/i;
+const HTML_FILE_REGEX = /data[\\/]data[\\/]([a-zA-Z0-9_-]+\.html?)/i;

 const extractExternalReport = (content: string): string | null => {
  if (!content) return null;
@@ -135,13 +142,25 @@ interface SessionData {
    active_data_file?: DataFileContext | null;
    selected_data_source?: string | null;
    selected_knowledge_base_id?: string | null;
-    [key: string]: any;
+    [key: string]: unknown;
  };
-  messages: Array<{
-    role: string;
-    content: string;
-    [key: string]: any;
-  }>;
+  messages: SessionMessage[];
+}
+
+interface SessionMessage {
+  role: string;
+  content: string;
+  tool_calls?: unknown[];
+  viz?: unknown;
+  reasoning_content?: string;
+  usage?: {
+    prompt_tokens: number;
+    completion_tokens: number;
+    total_tokens: number;
+  };
+  artifacts?: unknown;
+  kb_citations?: unknown;
+  [key: string]: unknown;
 }

 const normalizeArtifacts = (raw: unknown): MessageArtifact[] => {
@@ -201,6 +220,12 @@ const normalizeKnowledgeCitations = (raw: unknown): KnowledgeCitation[] => {
  }, []);
 };

+const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  return "";
+};
+
 export function ChatInterface() {
  const { t } = useTranslation();
  const [messagesBySession, setMessagesBySession] = useState<Record<string, Message[]>>({});
@@ -222,6 +247,13 @@ export function ChatInterface() {

  const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
  const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
+  const [a2aEnabled, setA2aEnabled] = useState(false);
+  const [a2aRouteMode, setA2aRouteMode] = useState<"auto" | "local" | "a2a" | "a2a_first" | "local_first">("auto");
+  const [a2aRemoteAgents, setA2aRemoteAgents] = useState<A2ARemoteAgent[]>([]);
+  const [selectedA2aAgentId, setSelectedA2aAgentId] = useState<string>("");
+  const [a2aTaskStateFilter, setA2aTaskStateFilter] = useState<string>("all");
+  const [a2aTasks, setA2aTasks] = useState<A2ATask[]>([]);
+  const [isA2aTaskLoading, setIsA2aTaskLoading] = useState(false);
  const filteredSlashSkills = slashQuery !== null 
    ? availableSkills.filter(s => s.name.toLowerCase().includes(slashQuery.toLowerCase()))
    : [];
@@ -233,7 +265,7 @@ export function ChatInterface() {
    
    // Remove the slash command from input
    // Match the last occurrence of /query
-    const match = input.match(/(?:^|\s)\/([a-zA-Z0-9_\-]*)$/);
+    const match = input.match(/(?:^|\s)\/([a-zA-Z0-9_-]*)$/);
    if (match && match.index !== undefined) {
       // match[0] includes the leading space if present
       const prefix = input.slice(0, match.index);
@@ -282,7 +314,7 @@ export function ChatInterface() {
    setInput(val);
    
    // Simple slash detection: if the last word starts with /
-    const match = val.match(/(?:^|\s)\/([a-zA-Z0-9_\-]*)$/);
+    const match = val.match(/(?:^|\s)\/([a-zA-Z0-9_-]*)$/);
    if (match) {
      setSlashQuery(match[1]);
      setSlashIndex(0);
@@ -311,11 +343,46 @@ export function ChatInterface() {
  
  const generatingSessionsRef = useRef<Record<string, boolean>>({});
  const abortControllersRef = useRef<Record<string, AbortController>>({});
+  const a2aSubscribeControllersRef = useRef<Record<string, AbortController>>({});
+  const a2aActiveTaskBySessionRef = useRef<Record<string, string>>({});

  // Model selection state
  const [models, setModels] = useState<ModelConfig[]>([]);
  const [selectedModelId, setSelectedModelId] = useState<string>("");

+  const isTerminalA2aState = (state?: string) => {
+    return state ? ["COMPLETED", "FAILED", "CANCELED", "REJECTED"].includes(state) : false;
+  };
+
+  const parseA2aErrorMessage = (raw?: string | null) => {
+    if (!raw) return "";
+    try {
+      const parsed = JSON.parse(raw) as { message?: string };
+      return parsed.message || raw;
+    } catch {
+      return raw;
+    }
+  };
+
+  const fetchA2aAgentsAndTasks = async (projectId: number, stateFilter: string = a2aTaskStateFilter) => {
+    setIsA2aTaskLoading(true);
+    try {
+      const [agents, tasks] = await Promise.all([
+        a2aApi.listRemoteAgents(projectId),
+        a2aApi.listTasks(projectId, stateFilter),
+      ]);
+      setA2aRemoteAgents(agents || []);
+      setA2aTasks(tasks || []);
+      if (selectedA2aAgentId && !(agents || []).some((agent) => String(agent.id) === selectedA2aAgentId)) {
+        setSelectedA2aAgentId("");
+      }
+    } catch (error) {
+      console.error("Failed to fetch A2A agents or tasks", error);
+    } finally {
+      setIsA2aTaskLoading(false);
+    }
+  };
+
  // Listen for model changes from the ProjectSwitcher
  useEffect(() => {
    const handleModelChange = (e: Event) => {
@@ -486,11 +553,15 @@ export function ChatInterface() {
    if (currentProject) {
      fetchDataSources();
      fetchKnowledgeBases();
+      void fetchA2aAgentsAndTasks(currentProject.id, a2aTaskStateFilter);
    } else {
      setAvailableKnowledgeBases([]);
      setSelectedKnowledgeBaseId("");
+      setA2aRemoteAgents([]);
+      setA2aTasks([]);
+      setSelectedA2aAgentId("");
    }
-  }, [currentProject]);
+  }, [currentProject, a2aTaskStateFilter]);

  const fetchDataSources = async () => {
    if (!currentProject) return;
@@ -733,12 +804,179 @@ export function ChatInterface() {
    }
  };

+  const updateA2aMessageByTaskId = (sessionKey: string, taskId: string, updater: (msg: Message) => Message) => {
+    setMessagesForSession(sessionKey, (prev) =>
+      prev.map((msg) => (msg.a2aTaskId === taskId ? updater(msg) : msg))
+    );
+  };
+
+  const syncTaskSnapshotToMessage = (sessionKey: string, task: A2ATask) => {
+    updateA2aMessageByTaskId(sessionKey, task.id, (msg) => ({
+      ...msg,
+      a2aTaskState: task.state,
+      content: task.output_text || msg.content,
+      a2aError: parseA2aErrorMessage(task.error_message),
+      awaitingFirstToken: !isTerminalA2aState(task.state),
+    }));
+  };
+
+  const applyA2aSubscribeEvent = (sessionKey: string, taskId: string, event: A2ASubscribeEvent) => {
+    if (event.type === "TaskStatusUpdateEvent") {
+      const state = event.task_status || event.status || "";
+      updateA2aMessageByTaskId(sessionKey, taskId, (msg) => {
+        const currentLogs = msg.progressLogs || [];
+        const nextLog = state ? `${t('a2aStatus')}: ${state}` : "";
+        const logs = nextLog && currentLogs[currentLogs.length - 1] !== nextLog ? [...currentLogs, nextLog] : currentLogs;
+        return {
+          ...msg,
+          a2aTaskState: state || msg.a2aTaskState,
+          progressLogs: logs,
+          awaitingFirstToken: state ? !isTerminalA2aState(state) : msg.awaitingFirstToken,
+        };
+      });
+      return;
+    }
+    if (event.type === "TaskArtifactUpdateEvent") {
+      const content = event.artifact?.content || event.output || "";
+      if (!content) return;
+      updateA2aMessageByTaskId(sessionKey, taskId, (msg) => ({
+        ...msg,
+        content,
+        awaitingFirstToken: false,
+      }));
+    }
+  };
+
+  const runA2aMessageFlow = async (sessionKey: string, assistantId: string, inputText: string) => {
+    if (!currentProject) return;
+    const payload = {
+      project_id: currentProject.id,
+      message: inputText,
+      session_id: sessionKey,
+      route_mode: a2aRouteMode,
+      ...(selectedA2aAgentId ? { remote_agent_id: Number(selectedA2aAgentId) } : {}),
+      metadata: { from_chat: true },
+    } as const;
+    const response = await a2aApi.sendMessage(payload);
+    const task = response.task;
+    a2aActiveTaskBySessionRef.current[sessionKey] = task.id;
+    setMessagesForSession(sessionKey, (prev) =>
+      prev.map((msg) =>
+        msg.id === assistantId
+          ? {
+              ...msg,
+              a2aTaskId: task.id,
+              a2aTaskState: task.state,
+              a2aRouteMode: a2aRouteMode,
+              a2aRemoteAgentId: task.remote_agent_id || null,
+              a2aInputText: inputText,
+              routeInfo: response.routing?.selected || msg.routeInfo,
+              progressLogs: [...(msg.progressLogs || []), `${t('a2aTaskCreated')}: ${task.id}`],
+            }
+          : msg
+      )
+    );
+    await fetchA2aAgentsAndTasks(currentProject.id, a2aTaskStateFilter);
+    const subscribeController = new AbortController();
+    a2aSubscribeControllersRef.current[task.id] = subscribeController;
+    try {
+      await a2aApi.subscribeTask(
+        task.id,
+        (event) => {
+          applyA2aSubscribeEvent(sessionKey, task.id, event);
+        },
+        subscribeController.signal
+      );
+    } catch (error) {
+      if (!subscribeController.signal.aborted) {
+        console.error("A2A subscribe failed", error);
+      }
+    } finally {
+      delete a2aSubscribeControllersRef.current[task.id];
+      const latestTask = await a2aApi.getTask(task.id).catch(() => null);
+      if (latestTask) {
+        syncTaskSnapshotToMessage(sessionKey, latestTask);
+      }
+      if (currentProject) {
+        await fetchA2aAgentsAndTasks(currentProject.id, a2aTaskStateFilter);
+      }
+    }
+  };
+
+  const handleCancelA2aTask = async (taskId: string) => {
+    try {
+      await a2aApi.cancelTask(taskId);
+      const controller = a2aSubscribeControllersRef.current[taskId];
+      if (controller) {
+        controller.abort();
+        delete a2aSubscribeControllersRef.current[taskId];
+      }
+      if (currentProject) {
+        await fetchA2aAgentsAndTasks(currentProject.id, a2aTaskStateFilter);
+      }
+      setMessagesForSession(activeSessionKey, (prev) =>
+        prev.map((msg) => (msg.a2aTaskId === taskId ? { ...msg, a2aTaskState: "CANCELED", awaitingFirstToken: false } : msg))
+      );
+    } catch (error) {
+      console.error("Failed to cancel A2A task", error);
+    }
+  };
+
+  const handleRetryA2aTask = async (msg: Message) => {
+    if (!msg.a2aInputText) return;
+    const targetSessionKey = activeSessionKey;
+    const newUserMessage: Message = { id: Date.now().toString(), role: "user", content: msg.a2aInputText };
+    setMessagesForSession(targetSessionKey, (prev) => [...prev, newUserMessage]);
+    const assistantId = (Date.now() + 1).toString();
+    setMessagesForSession(targetSessionKey, (prev) => [
+      ...prev,
+      {
+        id: assistantId,
+        role: "assistant",
+        content: "",
+        awaitingFirstToken: true,
+        progressLogs: [t('requestSubmittedRouting')],
+      },
+    ]);
+    setIsLoadingForSession(targetSessionKey, true);
+    generatingSessionsRef.current[targetSessionKey] = true;
+    try {
+      await runA2aMessageFlow(targetSessionKey, assistantId, msg.a2aInputText);
+    } catch (error: unknown) {
+      const errorMessage = getErrorMessage(error) || t('unknownError');
+      setMessagesForSession(targetSessionKey, (prev) =>
+        prev.map((item) =>
+          item.id === assistantId
+            ? {
+                ...item,
+                awaitingFirstToken: false,
+                a2aTaskState: "FAILED",
+                a2aError: errorMessage,
+                content: item.content || `${t('a2aTaskFailed')}: ${errorMessage}`,
+              }
+            : item
+        )
+      );
+    } finally {
+      generatingSessionsRef.current[targetSessionKey] = false;
+      setIsLoadingForSession(targetSessionKey, false);
+      delete a2aActiveTaskBySessionRef.current[targetSessionKey];
+    }
+  };
+
  const renderActiveSelections = () => {
    const hasValidDataSourceSelection = Boolean(selectedDataSource && selectedDataSourceName);
-    if (!hasValidDataSourceSelection && !selectedKnowledgeBaseId) return null;
+    const selectedAgent = a2aRemoteAgents.find((agent) => String(agent.id) === selectedA2aAgentId);
+    if (!hasValidDataSourceSelection && !selectedKnowledgeBaseId && !a2aEnabled) return null;
    return (
      <div className="px-2 pt-2">
        <div className="flex flex-wrap gap-2">
+          {a2aEnabled ? (
+            <div className="px-3 py-1.5 rounded-full text-xs border flex items-center gap-1.5 bg-emerald-50 text-emerald-700 border-emerald-200">
+              <Database className="h-3.5 w-3.5" />
+              {`A2A：${a2aRouteMode}${selectedAgent ? ` · ${selectedAgent.name}` : ""}`}
+            </div>
+          ) : null}
          {hasValidDataSourceSelection ? (
            <div className="px-3 py-1.5 rounded-full text-xs border flex items-center gap-1.5 bg-blue-50 text-blue-700 border-blue-200">
              <Database className="h-3.5 w-3.5" />
@@ -803,6 +1041,58 @@ export function ChatInterface() {
    return (
      <div className="relative group max-w-4xl mx-auto">
        <div className="flex flex-col bg-background rounded-[26px] border border-border shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
+          <div className="px-3 pt-2">
+            <div className="flex flex-wrap items-center gap-2 text-xs">
+              <button
+                type="button"
+                className={cn(
+                  "px-2.5 py-1 rounded-full border transition-colors",
+                  a2aEnabled ? "bg-emerald-50 text-emerald-700 border-emerald-200" : "bg-muted text-muted-foreground border-border"
+                )}
+                onClick={() => setA2aEnabled((prev) => !prev)}
+              >
+                {a2aEnabled ? t('a2aModeEnabled') : t('a2aModeDisabled')}
+              </button>
+              {a2aEnabled ? (
+                <>
+                  <select
+                    value={a2aRouteMode}
+                    onChange={(e) => setA2aRouteMode(e.target.value as "auto" | "local" | "a2a" | "a2a_first" | "local_first")}
+                    className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+                  >
+                    <option value="auto">auto</option>
+                    <option value="local">local</option>
+                    <option value="a2a">a2a</option>
+                    <option value="a2a_first">a2a_first</option>
+                    <option value="local_first">local_first</option>
+                  </select>
+                  <select
+                    value={selectedA2aAgentId}
+                    onChange={(e) => setSelectedA2aAgentId(e.target.value)}
+                    className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground min-w-[160px]"
+                  >
+                    <option value="">{t('autoSelectAgent')}</option>
+                    {a2aRemoteAgents.map((agent) => (
+                      <option key={agent.id} value={String(agent.id)}>
+                        {agent.name} ({agent.healthy ? t('healthy') : t('unhealthy')})
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    type="button"
+                    className="h-7 px-2 rounded-md border border-border text-muted-foreground hover:text-foreground"
+                    onClick={() => {
+                      if (currentProject) {
+                        void fetchA2aAgentsAndTasks(currentProject.id, a2aTaskStateFilter);
+                      }
+                    }}
+                  >
+                    {t('refresh')}
+                  </button>
+                </>
+              ) : null}
+            </div>
+          </div>
          {renderFileCard()}
          {renderActiveSelections()}
          <div className="flex items-center pl-2 pr-2 py-2">
@@ -1037,9 +1327,15 @@ export function ChatInterface() {
  }, [messages]);

  const handleForceStop = () => {
+    const activeTaskId = a2aActiveTaskBySessionRef.current[activeSessionKey];
+    if (activeTaskId) {
+      void handleCancelA2aTask(activeTaskId);
+      delete a2aActiveTaskBySessionRef.current[activeSessionKey];
+    }
    const controller = abortControllersRef.current[activeSessionKey];
-    if (!controller) return;
-    controller.abort();
+    if (controller) {
+      controller.abort();
+    }
    setIsLoadingForSession(activeSessionKey, false);
    generatingSessionsRef.current[activeSessionKey] = false;
    setMessagesForSession(activeSessionKey, (prev) =>
@@ -1065,6 +1361,49 @@ export function ChatInterface() {
      messagePayload = `[${t('userUploadedFile')}: ${currentAttachedFile.filename}]\n[${t('fileContentSummary')}: ${currentAttachedFile.summary || t('none')}]\n[${t('dataColumns')}: ${currentAttachedFile.columns?.join(", ") || t('none')}]\n[${t('fileDownloadLink')}: ${currentAttachedFile.url}]\n\n${newMessage.content}`;
      setAttachedFile(null);
    }
+
+    if (a2aEnabled && currentProject) {
+      generatingSessionsRef.current[targetSessionKey] = true;
+      setIsLoadingForSession(targetSessionKey, true);
+      const assistantId = (Date.now() + 1).toString();
+      setMessagesForSession(targetSessionKey, (prev) => [
+        ...prev,
+        {
+          id: assistantId,
+          role: "assistant",
+          content: "",
+          awaitingFirstToken: true,
+          progressLogs: [t('requestSubmittedRouting')],
+          a2aRouteMode,
+          a2aRemoteAgentId: selectedA2aAgentId ? Number(selectedA2aAgentId) : null,
+          a2aInputText: messagePayload,
+        },
+      ]);
+      try {
+        await runA2aMessageFlow(targetSessionKey, assistantId, messagePayload);
+      } catch (error: unknown) {
+        const errorMessage = getErrorMessage(error) || t('unknownError');
+        setMessagesForSession(targetSessionKey, (prev) =>
+          prev.map((msg) =>
+            msg.id === assistantId
+              ? {
+                  ...msg,
+                  awaitingFirstToken: false,
+                  a2aTaskState: "FAILED",
+                  a2aError: errorMessage,
+                  content: msg.content || `${t('a2aTaskFailed')}: ${errorMessage}`,
+                }
+              : msg
+          )
+        );
+      } finally {
+        generatingSessionsRef.current[targetSessionKey] = false;
+        setIsLoadingForSession(targetSessionKey, false);
+        delete a2aActiveTaskBySessionRef.current[targetSessionKey];
+        window.dispatchEvent(new Event("nanobot:sessions-changed"));
+      }
+      return;
+    }
    
    const controller = new AbortController();
    abortControllersRef.current[targetSessionKey] = controller;
@@ -1318,8 +1657,9 @@ export function ChatInterface() {
          )
        );
       }
-    } catch (error: any) {
-        if (error?.name === "AbortError" || String(error?.message || "").toLowerCase().includes("aborted")) {
+    } catch (error: unknown) {
+        const errorMessage = getErrorMessage(error);
+        if (errorMessage.toLowerCase().includes("aborted")) {
          setMessagesForSession(targetSessionKey, (prev) =>
            prev.map((msg) =>
              msg.awaitingFirstToken
@@ -1332,7 +1672,7 @@ export function ChatInterface() {
        setMessagesForSession(targetSessionKey, prev => [...prev, { 
            id: (Date.now() + 1).toString(), 
            role: 'assistant', 
-            content: `Sorry, something went wrong: ${error.message}` 
+            content: `Sorry, something went wrong: ${errorMessage}` 
        }]);
    } finally {
        if (abortControllersRef.current[targetSessionKey] === controller) {
@@ -1383,6 +1723,61 @@ export function ChatInterface() {
            </div>
          ) : (
            <div className="max-w-3xl mx-auto px-4 py-8 space-y-8">
+              {a2aEnabled ? (
+                <div className="rounded-xl border border-border bg-background p-3 space-y-2">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">A2A Tasks</div>
+                    <div className="flex items-center gap-2">
+                      <select
+                        value={a2aTaskStateFilter}
+                        onChange={(e) => setA2aTaskStateFilter(e.target.value)}
+                        className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+                      >
+                        <option value="all">{t('allStates')}</option>
+                        <option value="SUBMITTED">SUBMITTED</option>
+                        <option value="WORKING">WORKING</option>
+                        <option value="COMPLETED">COMPLETED</option>
+                        <option value="FAILED">FAILED</option>
+                        <option value="CANCELED">CANCELED</option>
+                      </select>
+                      <button
+                        type="button"
+                        className="h-7 px-2 rounded-md border border-border text-xs text-muted-foreground hover:text-foreground"
+                        onClick={() => {
+                          if (currentProject) {
+                            void fetchA2aAgentsAndTasks(currentProject.id, a2aTaskStateFilter);
+                          }
+                        }}
+                      >
+                        {isA2aTaskLoading ? t('loading') : t('refresh')}
+                      </button>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5 max-h-[160px] overflow-y-auto">
+                    {a2aTasks.length === 0 ? (
+                      <div className="text-xs text-muted-foreground">{t('noA2aTasks')}</div>
+                    ) : (
+                      a2aTasks.slice(0, 8).map((task) => (
+                        <div key={task.id} className="flex items-center justify-between gap-2 rounded-md border border-border px-2.5 py-1.5">
+                          <div className="min-w-0">
+                            <div className="text-[11px] text-foreground font-mono truncate">{task.id}</div>
+                            <div className="text-[11px] text-muted-foreground truncate">{task.source} · {task.state}</div>
+                          </div>
+                          {!isTerminalA2aState(task.state) ? (
+                            <button
+                              type="button"
+                              className="text-[11px] px-2 py-1 rounded border border-border text-muted-foreground hover:text-foreground"
+                              onClick={() => void handleCancelA2aTask(task.id)}
+                            >
+                              {t('cancel')}
+                            </button>
+                          ) : null}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              ) : null}
              {messages.map((msg, msgIdx) => {
                const isMessageGenerating = isLoading && msgIdx === messages.length - 1;
                const { markdown, reportHtml } = splitReportHtml(msg.content);
@@ -1414,6 +1809,41 @@ export function ChatInterface() {
                  >
                    {msg.role === "assistant" ? (
                      <>
+                        {msg.a2aTaskId ? (
+                          <div className="mb-3 rounded-xl border border-border bg-muted/50/60 px-3 py-2">
+                            <div className="flex items-center justify-between gap-2">
+                              <div className="text-[11px] text-muted-foreground">
+                                <span className="font-mono">{msg.a2aTaskId}</span>
+                                <span className="mx-1">·</span>
+                                <span>{msg.a2aTaskState || 'SUBMITTED'}</span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                {msg.a2aTaskState && !isTerminalA2aState(msg.a2aTaskState) ? (
+                                  <button
+                                    type="button"
+                                    className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] text-muted-foreground hover:text-foreground"
+                                    onClick={() => void handleCancelA2aTask(msg.a2aTaskId!)}
+                                  >
+                                    {t('cancel')}
+                                  </button>
+                                ) : null}
+                                {msg.a2aInputText ? (
+                                  <button
+                                    type="button"
+                                    className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] text-muted-foreground hover:text-foreground"
+                                    onClick={() => void handleRetryA2aTask(msg)}
+                                  >
+                                    <RotateCcw className="h-3 w-3" />
+                                    {t('retry')}
+                                  </button>
+                                ) : null}
+                              </div>
+                            </div>
+                            {msg.a2aError ? (
+                              <div className="mt-1 text-[11px] text-rose-600">{msg.a2aError}</div>
+                            ) : null}
+                          </div>
+                        ) : null}
                        {displayedThinkingContent && (
                          <div className="mb-3 rounded-xl border border-border bg-muted/50/50 p-3 text-sm text-muted-foreground font-mono whitespace-pre-wrap leading-relaxed shadow-inner">
                            <button
@@ -310,6 +310,36 @@
  "dashScope": "DashScope",
  "volcengine": "Volcengine",
  "tableRowColDesc": "TABLE · {{rowCount}} rows · {{colCount}} columns",
+  "retry": "Retry",
+  "allStates": "All States",
+  "refreshHealth": "Refresh Health",
+  "a2aConfig": "A2A Config",
+  "a2aAgentManagement": "A2A Agent Management",
+  "a2aTaskObservability": "A2A Task Observability",
+  "a2aStatus": "A2A Status",
+  "a2aTaskCreated": "A2A Task Created",
+  "a2aTaskFailed": "A2A Task Failed",
+  "a2aModeEnabled": "A2A Mode: On",
+  "a2aModeDisabled": "A2A Mode: Off",
+  "autoSelectAgent": "Auto Select Agent",
+  "addA2aAgent": "Add A2A Agent",
+  "editA2aAgent": "Edit A2A Agent",
+  "saveA2aAgent": "Save A2A Agent",
+  "a2aAgentName": "A2A Agent Name",
+  "authScheme": "Auth Scheme",
+  "authToken": "Auth Token",
+  "leaveEmptyToKeepUnchanged": "Leave empty to keep unchanged",
+  "healthStatus": "Health",
+  "healthy": "Healthy",
+  "unhealthy": "Unhealthy",
+  "protocol": "Protocol",
+  "capabilities": "Capabilities",
+  "taskId": "Task ID",
+  "taskSource": "Task Source",
+  "time": "Time",
+  "noA2aAgents": "No A2A agents configured",
+  "noA2aTasks": "No A2A tasks",
+  "confirmDeleteA2aAgent": "Are you sure you want to delete this A2A agent?",
  "projectName": "Project Name",
  "dashboardMenu": "Dashboard",
  "newThread": "New Thread",
@@ -325,6 +325,36 @@
  "dashScope": "DashScope (通义千问)",
  "volcengine": "Volcengine (火山引擎)",
  "tableRowColDesc": "TABLE · {{rowCount}} 行 · {{colCount}} 列",
+  "retry": "重试",
+  "allStates": "全部状态",
+  "refreshHealth": "刷新健康检查",
+  "a2aConfig": "A2A 配置",
+  "a2aAgentManagement": "A2A Agent 管理",
+  "a2aTaskObservability": "A2A 任务观测",
+  "a2aStatus": "A2A 状态",
+  "a2aTaskCreated": "A2A 任务已创建",
+  "a2aTaskFailed": "A2A 任务失败",
+  "a2aModeEnabled": "A2A 模式：开启",
+  "a2aModeDisabled": "A2A 模式：关闭",
+  "autoSelectAgent": "自动选择 Agent",
+  "addA2aAgent": "添加 A2A Agent",
+  "editA2aAgent": "编辑 A2A Agent",
+  "saveA2aAgent": "保存 A2A Agent",
+  "a2aAgentName": "A2A Agent 名称",
+  "authScheme": "认证方式",
+  "authToken": "认证 Token",
+  "leaveEmptyToKeepUnchanged": "留空表示不修改",
+  "healthStatus": "健康状态",
+  "healthy": "健康",
+  "unhealthy": "异常",
+  "protocol": "协议版本",
+  "capabilities": "能力",
+  "taskId": "任务 ID",
+  "taskSource": "任务来源",
+  "time": "时间",
+  "noA2aAgents": "暂无 A2A Agent",
+  "noA2aTasks": "暂无 A2A 任务",
+  "confirmDeleteA2aAgent": "确定要删除这个 A2A Agent 吗？",
  "projectName": "项目名称",
  "dashboardMenu": "仪表盘",
  "newThread": "新会话",
@@ -2,13 +2,14 @@ import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Trash2, Terminal, Loader2, FolderOpen, Eye, ShieldCheck, AlertCircle, Wand2, Upload, Plus, RefreshCw } from "lucide-react";
+import { Trash2, Terminal, Loader2, FolderOpen, Eye, ShieldCheck, AlertCircle, Wand2, Upload, Plus, RefreshCw, HeartPulse } from "lucide-react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { api } from "@/lib/api";
+import { a2aApi, type A2ARemoteAgent, type A2ATask } from "@/api/a2a";
 import { useProjectStore } from "@/store/projectStore";
 import { useMcpHealthStore } from "@/store/mcpHealthStore";
 import { useRef } from 'react';
@@ -40,6 +41,13 @@ interface MCPServer {
  status?: string;
 }

+interface A2ARemoteAgentForm {
+  name: string;
+  base_url: string;
+  auth_scheme: "none" | "bearer";
+  auth_token: string;
+}
+
 const SOURCE_LOCAL_IMPORT = "local_import";
 const SOURCE_SYSTEM_BUILTIN = "system_builtin";
 const SOURCE_BACKEND_GENERATED = "backend_generated";
@@ -76,7 +84,7 @@ const dedupeSkillsById = (skills: Skill[]): Skill[] => {

 export function Skills() {
  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState<'skills' | 'mcp'>('skills');
+  const [activeTab, setActiveTab] = useState<'skills' | 'mcp' | 'a2a'>('skills');
  const [sourceFilter, setSourceFilter] = useState<string>('all');

  // Skills state
@@ -97,6 +105,20 @@ export function Skills() {
  const [mcpHeadersStr, setMcpHeadersStr] = useState('');
  const [isRefreshingMcpHealth, setIsRefreshingMcpHealth] = useState(false);

+  const [a2aAgents, setA2aAgents] = useState<A2ARemoteAgent[]>([]);
+  const [a2aTasks, setA2aTasks] = useState<A2ATask[]>([]);
+  const [a2aTaskStateFilter, setA2aTaskStateFilter] = useState<string>('all');
+  const [isA2aLoading, setIsA2aLoading] = useState(false);
+  const [isA2aDialogOpen, setIsA2aDialogOpen] = useState(false);
+  const [editingA2aAgent, setEditingA2aAgent] = useState<A2ARemoteAgent | null>(null);
+  const [a2aForm, setA2aForm] = useState<A2ARemoteAgentForm>({
+    name: '',
+    base_url: '',
+    auth_scheme: 'none',
+    auth_token: '',
+  });
+  const [isA2aRefreshingHealth, setIsA2aRefreshingHealth] = useState(false);
+
  const { currentProject } = useProjectStore();
  const { hasMcpError, refresh: refreshMcpHealth } = useMcpHealthStore();
  const fileInputRef = useRef<HTMLInputElement>(null);
@@ -136,15 +158,34 @@ export function Skills() {
      }
    };

+    const fetchA2aData = async () => {
+      if (!currentProject) return;
+      setIsA2aLoading(true);
+      try {
+        const [agents, tasks] = await Promise.all([
+          a2aApi.listRemoteAgents(currentProject.id),
+          a2aApi.listTasks(currentProject.id, a2aTaskStateFilter),
+        ]);
+        setA2aAgents(agents || []);
+        setA2aTasks(tasks || []);
+      } catch (error) {
+        console.error("Failed to fetch A2A data", error);
+      } finally {
+        setIsA2aLoading(false);
+      }
+    };
+
    if (currentProject) {
      void refreshMcpHealth(currentProject.id);
      if (activeTab === 'skills') {
        void fetchSkills();
-      } else {
+      } else if (activeTab === 'mcp') {
        void fetchMcpServers();
+      } else {
+        void fetchA2aData();
      }
    }
-  }, [currentProject?.id, activeTab, refreshMcpHealth]);
+  }, [currentProject, currentProject?.id, activeTab, refreshMcpHealth, a2aTaskStateFilter]);

  const fetchSkills = async () => {
    if (!currentProject) return;
@@ -194,6 +235,100 @@ export function Skills() {
    }
  };

+  const fetchA2aData = async () => {
+    if (!currentProject) return;
+    setIsA2aLoading(true);
+    try {
+      const [agents, tasks] = await Promise.all([
+        a2aApi.listRemoteAgents(currentProject.id),
+        a2aApi.listTasks(currentProject.id, a2aTaskStateFilter),
+      ]);
+      setA2aAgents(agents || []);
+      setA2aTasks(tasks || []);
+    } catch (error) {
+      console.error("Failed to fetch A2A data", error);
+    } finally {
+      setIsA2aLoading(false);
+    }
+  };
+
+  const handleRefreshA2aHealth = async () => {
+    if (!currentProject || a2aAgents.length === 0) return;
+    setIsA2aRefreshingHealth(true);
+    try {
+      await Promise.all(a2aAgents.map((agent) => a2aApi.healthCheckRemoteAgent(agent.id)));
+      await fetchA2aData();
+    } finally {
+      setIsA2aRefreshingHealth(false);
+    }
+  };
+
+  const handleOpenCreateA2a = () => {
+    setEditingA2aAgent(null);
+    setA2aForm({
+      name: '',
+      base_url: '',
+      auth_scheme: 'none',
+      auth_token: '',
+    });
+    setIsA2aDialogOpen(true);
+  };
+
+  const handleOpenEditA2a = (agent: A2ARemoteAgent) => {
+    setEditingA2aAgent(agent);
+    setA2aForm({
+      name: agent.name,
+      base_url: agent.base_url,
+      auth_scheme: agent.auth_scheme,
+      auth_token: '',
+    });
+    setIsA2aDialogOpen(true);
+  };
+
+  const handleSaveA2aAgent = async () => {
+    if (!currentProject) return;
+    if (!a2aForm.name.trim() || !a2aForm.base_url.trim()) return;
+    const payload = {
+      name: a2aForm.name.trim(),
+      base_url: a2aForm.base_url.trim(),
+      auth_scheme: a2aForm.auth_scheme,
+      ...(a2aForm.auth_scheme === 'bearer' && a2aForm.auth_token.trim() ? { auth_token: a2aForm.auth_token.trim() } : {}),
+    };
+    try {
+      if (editingA2aAgent) {
+        await a2aApi.updateRemoteAgent(editingA2aAgent.id, payload);
+      } else {
+        await a2aApi.createRemoteAgent({
+          project_id: currentProject.id,
+          ...payload,
+        });
+      }
+      setIsA2aDialogOpen(false);
+      await fetchA2aData();
+    } catch (error) {
+      console.error("Failed to save A2A agent", error);
+    }
+  };
+
+  const handleDeleteA2aAgent = async (agentId: number) => {
+    if (!window.confirm(t('confirmDeleteA2aAgent'))) return;
+    try {
+      await a2aApi.deleteRemoteAgent(agentId);
+      await fetchA2aData();
+    } catch (error) {
+      console.error("Failed to delete A2A agent", error);
+    }
+  };
+
+  const handleRefreshA2aCard = async (agentId: number) => {
+    try {
+      await a2aApi.refreshRemoteAgentCard(agentId);
+      await fetchA2aData();
+    } catch (error) {
+      console.error("Failed to refresh A2A card", error);
+    }
+  };
+
  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file || !currentProject) return;
@@ -371,6 +506,12 @@ export function Skills() {
                <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" title="MCP Server Error" />
              )}
            </button>
+            <button
+              className={`px-3 py-1 text-sm font-medium rounded-md transition-colors ${activeTab === 'a2a' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground/80'}`}
+              onClick={() => setActiveTab('a2a')}
+            >
+              {t('a2aConfig')}
+            </button>
          </div>
          {activeTab === 'skills' ? (
            <>
@@ -407,7 +548,7 @@ export function Skills() {
                {isLoading ? t('uploading', '上传中...') : t('uploadSkill')}
              </Button>
            </>
-          ) : (
+          ) : activeTab === 'mcp' ? (
            <>
              <Button
                variant="outline"
@@ -422,13 +563,52 @@ export function Skills() {
                )}
                {t('refresh')}
              </Button>
-              <Button 
+              <Button
                className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3"
                onClick={() => setIsMcpDialogOpen(true)}
              >
                <Plus className="h-4 w-4" />{t('addMcpServer')}
              </Button>
            </>
+          ) : (
+            <>
+              <Select value={a2aTaskStateFilter} onValueChange={(val) => { if (val) setA2aTaskStateFilter(val); }}>
+                <SelectTrigger className="w-[150px] h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('allStates')}</SelectItem>
+                  <SelectItem value="SUBMITTED">SUBMITTED</SelectItem>
+                  <SelectItem value="WORKING">WORKING</SelectItem>
+                  <SelectItem value="COMPLETED">COMPLETED</SelectItem>
+                  <SelectItem value="FAILED">FAILED</SelectItem>
+                  <SelectItem value="CANCELED">CANCELED</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button
+                variant="outline"
+                className="h-9 gap-2 rounded-md px-3"
+                onClick={handleRefreshA2aHealth}
+                disabled={isA2aRefreshingHealth || a2aAgents.length === 0}
+              >
+                {isA2aRefreshingHealth ? <Loader2 className="h-4 w-4 animate-spin" /> : <HeartPulse className="h-4 w-4" />}
+                {t('refreshHealth')}
+              </Button>
+              <Button
+                variant="outline"
+                className="h-9 gap-2 rounded-md px-3"
+                onClick={() => void fetchA2aData()}
+              >
+                <RefreshCw className="h-4 w-4" />
+                {t('refresh')}
+              </Button>
+              <Button
+                className="h-9 bg-[#ff4d29] hover:bg-[#ff4d29]/90 text-white gap-2 rounded-md px-3"
+                onClick={handleOpenCreateA2a}
+              >
+                <Plus className="h-4 w-4" />{t('addA2aAgent')}
+              </Button>
+            </>
          )}
        </div>
      </div>
@@ -555,7 +735,7 @@ export function Skills() {
            </TableBody>
          </Table>
        </div>
-        ) : (
+        ) : activeTab === 'mcp' ? (
          <div className="bg-background rounded-xl border border-border shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
            <Table className="table-fixed w-full">
              <TableHeader className="bg-muted/50/50">
@@ -646,6 +826,112 @@ export function Skills() {
              </TableBody>
            </Table>
          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="bg-background rounded-xl border border-border shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
+              <div className="px-4 py-3 border-b border-border text-sm font-semibold text-foreground/80">
+                {t('a2aAgentManagement')}
+              </div>
+              <Table className="table-fixed w-full">
+                <TableHeader className="bg-muted/50/50">
+                  <TableRow className="hover:bg-transparent">
+                    <TableHead className="w-[20%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('name')}</TableHead>
+                    <TableHead className="w-[24%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('url')}</TableHead>
+                    <TableHead className="w-[10%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('protocol')}</TableHead>
+                    <TableHead className="w-[16%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('capabilities')}</TableHead>
+                    <TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('healthStatus')}</TableHead>
+                    <TableHead className="w-[15%] font-semibold text-foreground/80 py-3 px-4 text-sm text-right">{t('actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {isA2aLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="py-20 text-center">
+                        <Loader2 className="h-8 w-8 animate-spin text-indigo-500 mx-auto" />
+                      </TableCell>
+                    </TableRow>
+                  ) : a2aAgents.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={6} className="py-16 text-center text-muted-foreground">{t('noA2aAgents')}</TableCell>
+                    </TableRow>
+                  ) : (
+                    a2aAgents.map((agent) => (
+                      <TableRow key={agent.id} className="group hover:bg-muted/50/50 transition-colors border-border">
+                        <TableCell className="py-4 px-4 text-sm font-medium">{agent.name}</TableCell>
+                        <TableCell className="py-4 px-4 text-sm text-muted-foreground truncate" title={agent.base_url}>{agent.base_url}</TableCell>
+                        <TableCell className="py-4 px-4 text-sm text-muted-foreground">{agent.protocol_version || '-'}</TableCell>
+                        <TableCell className="py-4 px-4 text-sm text-muted-foreground truncate" title={agent.capabilities.join(', ')}>{agent.capabilities.join(', ') || '-'}</TableCell>
+                        <TableCell className="py-4 px-4">
+                          <div className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] md:text-xs font-medium whitespace-nowrap ${agent.healthy ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-rose-50 text-rose-700 border border-rose-100'}`}>
+                            {agent.healthy ? <ShieldCheck className="h-3 w-3" /> : <AlertCircle className="h-3 w-3" />}
+                            {agent.healthy ? t('healthy') : t('unhealthy')}
+                            <span className="opacity-70">#{agent.failure_count}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="py-4 px-4 text-right">
+                          <div className="flex items-center justify-end gap-1">
+                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-all shrink-0" onClick={() => void handleRefreshA2aCard(agent.id)}>
+                              <RefreshCw className="h-4 w-4" />
+                            </Button>
+                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-indigo-600 hover:bg-indigo-50 rounded-md transition-all shrink-0" onClick={() => handleOpenEditA2a(agent)}>
+                              <Eye className="h-4 w-4" />
+                            </Button>
+                            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-rose-600 hover:bg-rose-50 rounded-md transition-all shrink-0" onClick={() => void handleDeleteA2aAgent(agent.id)}>
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+
+            <div className="bg-background rounded-xl border border-border shadow-sm overflow-hidden min-w-[800px] lg:min-w-0">
+              <div className="px-4 py-3 border-b border-border text-sm font-semibold text-foreground/80">
+                {t('a2aTaskObservability')}
+              </div>
+              <Table className="table-fixed w-full">
+                <TableHeader className="bg-muted/50/50">
+                  <TableRow className="hover:bg-transparent">
+                    <TableHead className="w-[18%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('taskId')}</TableHead>
+                    <TableHead className="w-[12%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('taskSource')}</TableHead>
+                    <TableHead className="w-[12%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('status')}</TableHead>
+                    <TableHead className="w-[38%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('content')}</TableHead>
+                    <TableHead className="w-[20%] font-semibold text-foreground/80 py-3 px-4 text-sm">{t('time')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {isA2aLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="py-16 text-center">
+                        <Loader2 className="h-8 w-8 animate-spin text-indigo-500 mx-auto" />
+                      </TableCell>
+                    </TableRow>
+                  ) : a2aTasks.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={5} className="py-14 text-center text-muted-foreground">{t('noA2aTasks')}</TableCell>
+                    </TableRow>
+                  ) : (
+                    a2aTasks.map((task) => (
+                      <TableRow key={task.id} className="group hover:bg-muted/50/50 transition-colors border-border">
+                        <TableCell className="py-4 px-4 text-xs font-mono truncate" title={task.id}>{task.id}</TableCell>
+                        <TableCell className="py-4 px-4 text-sm text-muted-foreground">{task.source}</TableCell>
+                        <TableCell className="py-4 px-4 text-sm">{task.state}</TableCell>
+                        <TableCell className="py-4 px-4 text-xs text-muted-foreground">
+                          <div className="line-clamp-2" title={task.error_message || task.output_text || task.input_text}>
+                            {task.error_message || task.output_text || task.input_text}
+                          </div>
+                        </TableCell>
+                        <TableCell className="py-4 px-4 text-xs text-muted-foreground">{task.updated_at}</TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
        )}
      </div>

@@ -847,6 +1133,76 @@ export function Skills() {
          </DialogFooter>
        </DialogContent>
      </Dialog>
+
+      <Dialog open={isA2aDialogOpen} onOpenChange={(open) => {
+          setIsA2aDialogOpen(open);
+          if (!open) {
+            setEditingA2aAgent(null);
+            setA2aForm({
+              name: '',
+              base_url: '',
+              auth_scheme: 'none',
+              auth_token: '',
+            });
+          }
+      }}>
+        <DialogContent className="sm:max-w-[600px] max-h-[90vh] flex flex-col rounded-2xl p-0 overflow-hidden">
+          <DialogHeader className="p-6 pb-2">
+            <DialogTitle className="text-xl font-bold text-foreground">{editingA2aAgent ? t('editA2aAgent') : t('addA2aAgent')}</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto px-6 py-2">
+            <div className="grid gap-5">
+              <div className="grid gap-1.5">
+                <Label htmlFor="a2a-name" className="text-muted-foreground font-medium text-sm">{t('name')}</Label>
+                <Input
+                  id="a2a-name"
+                  placeholder={t('a2aAgentName')}
+                  value={a2aForm.name}
+                  onChange={(e) => setA2aForm({ ...a2aForm, name: e.target.value })}
+                  className="rounded-lg border-border h-10"
+                />
+              </div>
+              <div className="grid gap-1.5">
+                <Label htmlFor="a2a-url" className="text-muted-foreground font-medium text-sm">{t('baseUrl')}</Label>
+                <Input
+                  id="a2a-url"
+                  placeholder="https://example-agent.com"
+                  value={a2aForm.base_url}
+                  onChange={(e) => setA2aForm({ ...a2aForm, base_url: e.target.value })}
+                  className="rounded-lg border-border h-10"
+                />
+              </div>
+              <div className="grid gap-1.5">
+                <Label htmlFor="a2a-auth-scheme" className="text-muted-foreground font-medium text-sm">{t('authScheme')}</Label>
+                <Select value={a2aForm.auth_scheme} onValueChange={(val) => { if (val) setA2aForm({ ...a2aForm, auth_scheme: val as "none" | "bearer" }); }}>
+                  <SelectTrigger className="rounded-lg border-border h-10">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent className="rounded-lg">
+                    <SelectItem value="none">none</SelectItem>
+                    <SelectItem value="bearer">bearer</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              {a2aForm.auth_scheme === 'bearer' ? (
+                <div className="grid gap-1.5">
+                  <Label htmlFor="a2a-auth-token" className="text-muted-foreground font-medium text-sm">{t('authToken')}</Label>
+                  <Input
+                    id="a2a-auth-token"
+                    placeholder={editingA2aAgent ? t('leaveEmptyToKeepUnchanged') : t('enterApiKey')}
+                    value={a2aForm.auth_token}
+                    onChange={(e) => setA2aForm({ ...a2aForm, auth_token: e.target.value })}
+                    className="rounded-lg border-border h-10"
+                  />
+                </div>
+              ) : null}
+            </div>
+          </div>
+          <DialogFooter className="p-6 pt-2">
+            <Button onClick={handleSaveA2aAgent} className="bg-indigo-600 hover:bg-indigo-700 text-primary-foreground rounded-lg px-6 h-10 w-full">{t('saveA2aAgent')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </div>
  );
 }