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) + "...";
+}