chore: import upstream snapshot with attribution

examples/integrations/a2a-middleware/components/a2a/MessageFromA2A.tsx

@@ -0,0 +1,67 @@
+/**
+ * Displays incoming A2A responses (Agent → Orchestrator).
+ * Blue box with sender/receiver badges. Actual data renders separately in main UI.
+ */
+
+import React from "react";
+import { getAgentStyle } from "./agent-styles";
+
+type MessageActionRenderProps = {
+  status: string;
+  args: {
+    agentName?: string;
+  };
+};
+
+export const MessageFromA2A: React.FC<MessageActionRenderProps> = ({
+  status,
+  args,
+}) => {
+  switch (status) {
+    case "complete":
+      break;
+    default:
+      return null;
+  }
+
+  if (!args.agentName) {
+    return null;
+  }
+
+  const agentStyle = getAgentStyle(args.agentName);
+
+  return (
+    <div className="my-2">
+      <div className="bg-blue-50 border border-blue-200 rounded-lg px-4 py-3">
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2 min-w-[200px] flex-shrink-0">
+            <div className="flex flex-col items-center">
+              <span
+                className={`px-3 py-1 rounded-full text-xs font-semibold border-2 ${agentStyle.bgColor} ${agentStyle.textColor} ${agentStyle.borderColor} flex items-center gap-1`}
+              >
+                <span>{agentStyle.icon}</span>
+                <span>{args.agentName}</span>
+              </span>
+              {agentStyle.framework && (
+                <span className="text-[9px] text-gray-500 mt-0.5">
+                  {agentStyle.framework}
+                </span>
+              )}
+            </div>
+
+            <span className="text-gray-400 text-sm">→</span>
+
+            <div className="flex flex-col items-center">
+              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700 text-white">
+                Orchestrator
+              </span>
+              <span className="text-[9px] text-gray-500 mt-0.5">ADK</span>
+            </div>
+          </div>
+
+          <span className="text-xs text-gray-600">✓ Response received</span>
+        </div>
+      </div>
+    </div>
+  );
+};

examples/integrations/a2a-middleware/components/a2a/MessageToA2A.tsx

@@ -0,0 +1,72 @@
+/**
+ * Displays outgoing A2A messages (Orchestrator → Agent).
+ * Green box with sender/receiver badges and task description.
+ */
+
+import React from "react";
+import { getAgentStyle, truncateTask } from "./agent-styles";
+
+type MessageActionRenderProps = {
+  status: string;
+  args: {
+    agentName?: string;
+    task?: string;
+  };
+};
+
+export const MessageToA2A: React.FC<MessageActionRenderProps> = ({
+  status,
+  args,
+}) => {
+  switch (status) {
+    case "executing":
+    case "complete":
+      break;
+    default:
+      return null;
+  }
+
+  if (!args.agentName || !args.task) {
+    return null;
+  }
+
+  const agentStyle = getAgentStyle(args.agentName);
+
+  return (
+    <div className="bg-green-50 border border-green-200 rounded-lg px-4 py-3 my-2 a2a-message-enter">
+      <div className="flex items-start gap-3">
+        <div className="flex items-center gap-2 flex-shrink-0">
+          <div className="flex flex-col items-center">
+            <span className="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700 text-white">
+              Orchestrator
+            </span>
+            <span className="text-[9px] text-gray-500 mt-0.5">ADK</span>
+          </div>
+
+          <span className="text-gray-400 text-sm">→</span>
+
+          <div className="flex flex-col items-center">
+            <span
+              className={`px-3 py-1 rounded-full text-xs font-semibold border-2 ${agentStyle.bgColor} ${agentStyle.textColor} ${agentStyle.borderColor} flex items-center gap-1`}
+            >
+              <span>{agentStyle.icon}</span>
+              <span>{args.agentName}</span>
+            </span>
+            {agentStyle.framework && (
+              <span className="text-[9px] text-gray-500 mt-0.5">
+                {agentStyle.framework}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <span
+          className="text-gray-700 text-sm flex-1 min-w-0 break-words"
+          title={args.task}
+        >
+          {truncateTask(args.task)}
+        </span>
+      </div>
+    </div>
+  );
+};

examples/integrations/a2a-middleware/components/a2a/agent-styles.ts

@@ -0,0 +1,61 @@
+/**
+ * Agent styling utilities for consistent badge appearance.
+ * LangGraph agents use green, ADK agents use blue.
+ */
+
+export type AgentStyle = {
+  bgColor: string;
+  textColor: string;
+  borderColor: string;
+  icon: string;
+  framework?: string;
+};
+
+export function getAgentStyle(agentName: string): AgentStyle {
+  if (!agentName) {
+    return {
+      bgColor: "bg-gray-100",
+      textColor: "text-gray-700",
+      borderColor: "border-gray-300",
+      icon: "🤖",
+      framework: "",
+    };
+  }
+
+  const nameLower = agentName.toLowerCase();
+
+  // LangGraph agents (green)
+  if (nameLower.includes("research")) {
+    return {
+      bgColor: "bg-gradient-to-r from-emerald-100 to-green-100",
+      textColor: "text-emerald-800",
+      borderColor: "border-emerald-400",
+      icon: "🔗",
+      framework: "LangGraph",
+    };
+  }
+
+  // ADK agents (blue)
+  if (nameLower.includes("analysis")) {
+    return {
+      bgColor: "bg-gradient-to-r from-blue-100 to-sky-100",
+      textColor: "text-blue-800",
+      borderColor: "border-blue-400",
+      icon: "✨",
+      framework: "ADK",
+    };
+  }
+
+  return {
+    bgColor: "bg-gray-100",
+    textColor: "text-gray-700",
+    borderColor: "border-gray-300",
+    icon: "🤖",
+    framework: "",
+  };
+}
+
+export function truncateTask(text: string, maxLength: number = 50): string {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + "...";
+}

examples/integrations/a2a-middleware/components/chat.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * Chat Component - Main interface with A2A message visualization.
+ * Extracts structured data from agents and passes to parent for display.
+ */
+
+import React, { useEffect } from "react";
+import {
+  useAgent,
+  useFrontendTool,
+  CopilotChat,
+} from "@copilotkit/react-core/v2";
+import { z } from "zod";
+import { MessageToA2A } from "./a2a/MessageToA2A";
+import { MessageFromA2A } from "./a2a/MessageFromA2A";
+
+type ResearchData = {
+  topic: string;
+  summary: string;
+  findings: Array<{ title: string; description: string }>;
+  sources: string;
+};
+
+type AnalysisData = {
+  topic: string;
+  overview: string;
+  insights: Array<{ title: string; description: string; importance: string }>;
+  conclusion: string;
+};
+
+type ChatProps = {
+  onResearchUpdate: (data: ResearchData | null) => void;
+  onAnalysisUpdate: (data: AnalysisData | null) => void;
+};
+
+export default function Chat({
+  onResearchUpdate,
+  onAnalysisUpdate,
+}: ChatProps) {
+  const { agent } = useAgent({ agentId: "a2a_chat" });
+
+  // Extract structured JSON from A2A agent responses and pass to parent
+  useEffect(() => {
+    const extractDataFromMessages = () => {
+      for (const message of agent.messages) {
+        const msg = message as any;
+
+        if (msg.role === "tool" && typeof msg.content !== "undefined") {
+          try {
+            const result = msg.content;
+            let parsed;
+
+            if (typeof result === "string") {
+              let cleanResult = result;
+              if (result.startsWith("A2A Agent Response: ")) {
+                cleanResult = result.slice("A2A Agent Response: ".length);
+              }
+              try {
+                parsed = JSON.parse(cleanResult);
+              } catch {
+                continue;
+              }
+            } else if (typeof result === "object") {
+              parsed = result;
+            } else {
+              continue;
+            }
+
+            if (parsed.findings && Array.isArray(parsed.findings)) {
+              onResearchUpdate(parsed as ResearchData);
+            } else if (parsed.insights && Array.isArray(parsed.insights)) {
+              onAnalysisUpdate(parsed as AnalysisData);
+            }
+          } catch (e) {
+            console.error("Failed to extract data from message:", e);
+          }
+        }
+      }
+    };
+
+    extractDataFromMessages();
+  }, [agent.messages, onResearchUpdate, onAnalysisUpdate]);
+
+  // Register action to render A2A message flow visualization
+  useFrontendTool({
+    name: "send_message_to_a2a_agent",
+    description: "Sends a message to an A2A agent",
+    available: true,
+    parameters: z.object({
+      agentName: z
+        .string()
+        .describe("The name of the A2A agent to send the message to"),
+      task: z.string().describe("The message to send to the A2A agent"),
+    }),
+    render: (actionRenderProps) => {
+      return (
+        <>
+          <MessageToA2A {...actionRenderProps} />
+          <MessageFromA2A {...actionRenderProps} />
+        </>
+      );
+    },
+  });
+
+  return (
+    <CopilotChat
+      labels={{
+        modalHeaderTitle: "Research Assistant",
+        welcomeMessageText:
+          '👋 Hi! I\'m your research assistant. I can help you research any topic.\n\nFor example, try:\n- "Research quantum computing"\n- "Tell me about artificial intelligence"\n- "Research renewable energy"\n\nI\'ll coordinate with specialized agents to gather information and provide insights!',
+      }}
+      className="h-full"
+    />
+  );
+}