chore: import upstream snapshot with attribution

examples/integrations/a2a-middleware/app/api/copilotkit/[[...slug]]/route.ts

@@ -0,0 +1,161 @@
+import {
+  CopilotRuntime,
+  CopilotKitIntelligence,
+  createCopilotEndpoint,
+  InMemoryAgentRunner,
+} from "@copilotkit/runtime/v2";
+import { HttpAgent } from "@ag-ui/client";
+import type {
+  AgentSubscriber,
+  RunAgentInput,
+  RunAgentParameters,
+  RunAgentResult,
+} from "@ag-ui/client";
+import { A2AMiddlewareAgent } from "@ag-ui/a2a-middleware";
+import type { A2AAgentConfig } from "@ag-ui/a2a-middleware";
+import { handle } from "hono/vercel";
+
+const researchAgentUrl =
+  process.env.RESEARCH_AGENT_URL || "http://localhost:9001";
+const analysisAgentUrl =
+  process.env.ANALYSIS_AGENT_URL || "http://localhost:9002";
+const orchestratorUrl = process.env.ORCHESTRATOR_URL || "http://localhost:9000";
+
+type RuntimeRunAgentInput = RunAgentParameters &
+  Partial<Pick<RunAgentInput, "messages" | "state" | "threadId">>;
+
+type RuntimeA2AMiddlewareAgentConfig = Omit<
+  A2AAgentConfig,
+  "orchestrationAgent"
+> & {
+  orchestrationAgentUrl: string;
+};
+
+class RuntimeA2AMiddlewareAgent extends A2AMiddlewareAgent {
+  private readonly config: RuntimeA2AMiddlewareAgentConfig;
+
+  constructor(config: RuntimeA2AMiddlewareAgentConfig) {
+    super({
+      ...config,
+      orchestrationAgent: new HttpAgent({
+        url: config.orchestrationAgentUrl,
+      }),
+    });
+    this.config = config;
+  }
+
+  async runAgent(
+    parameters: RuntimeRunAgentInput = {},
+    subscriber?: AgentSubscriber,
+  ): Promise<RunAgentResult> {
+    const isolatedAgent = new A2AMiddlewareAgent({
+      ...this.config,
+      agentId: this.agentId,
+      debug: this.debug,
+      description: this.description,
+      initialMessages: this.messages,
+      initialState: this.state,
+      threadId: parameters.threadId ?? this.threadId,
+      orchestrationAgent: new HttpAgent({
+        url: this.config.orchestrationAgentUrl,
+      }),
+    });
+
+    if (parameters.state) {
+      isolatedAgent.setState(parameters.state);
+    }
+
+    if (parameters.messages) {
+      isolatedAgent.setMessages(parameters.messages);
+    }
+
+    return isolatedAgent.runAgent(
+      {
+        context: parameters.context,
+        forwardedProps: parameters.forwardedProps,
+        runId: parameters.runId,
+        tools: parameters.tools,
+      },
+      subscriber,
+    );
+  }
+
+  clone(): RuntimeA2AMiddlewareAgent {
+    return new RuntimeA2AMiddlewareAgent({
+      ...this.config,
+      agentId: this.agentId,
+      debug: this.debug,
+      description: this.description,
+      initialMessages: this.messages,
+      initialState: this.state,
+      threadId: this.threadId,
+    });
+  }
+}
+
+const a2aMiddlewareAgent = new RuntimeA2AMiddlewareAgent({
+  orchestrationAgentUrl: orchestratorUrl,
+  agentId: "a2a_chat",
+  description:
+    "Research assistant with 2 specialized agents: Research (LangGraph) and Analysis (ADK)",
+  agentUrls: [researchAgentUrl, analysisAgentUrl],
+  instructions: `
+    You are a research assistant that orchestrates between 2 specialized agents.
+
+    AVAILABLE AGENTS:
+
+    - Research Agent (LangGraph): Gathers and summarizes information about a topic
+    - Analysis Agent (ADK): Analyzes research findings and provides insights
+
+    WORKFLOW STRATEGY (SEQUENTIAL - ONE AT A TIME):
+
+    When the user asks to research a topic:
+
+    1. Research Agent - First, gather information about the topic
+       - Pass: The user's research query or topic
+       - The agent will return structured JSON with research findings
+
+    2. Analysis Agent - Then, analyze the research results
+       - Pass: The research results from step 1
+       - The agent will return structured JSON with analysis and insights
+
+    3. Present the complete research and analysis to the user
+
+    CRITICAL RULES:
+    - Call agents ONE AT A TIME, wait for results before making next call
+    - Pass information from earlier agents to later agents
+    - Synthesize all gathered information in final response
+  `,
+});
+
+const runtime = new CopilotRuntime({
+  agents: {
+    a2a_chat: a2aMiddlewareAgent,
+  },
+  // --- copilotkit:intelligence (remove this block to opt out) ---
+  ...(process.env.COPILOTKIT_LICENSE_TOKEN
+    ? {
+        intelligence: new CopilotKitIntelligence({
+          apiKey: process.env.INTELLIGENCE_API_KEY ?? "",
+          apiUrl: process.env.INTELLIGENCE_API_URL ?? "http://localhost:4201",
+          wsUrl:
+            process.env.INTELLIGENCE_GATEWAY_WS_URL ?? "ws://localhost:4401",
+        }),
+        // Demo stub - replace with your own auth-derived user identity (e.g. OIDC)
+        // before any multi-user deployment, or all users share one thread history.
+        identifyUser: () => ({ id: "demo-user", name: "Demo User" }),
+        licenseToken: process.env.COPILOTKIT_LICENSE_TOKEN,
+      }
+    : { runner: new InMemoryAgentRunner() }),
+  // --- /copilotkit:intelligence ---
+});
+
+const app = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+export const GET = handle(app);
+export const POST = handle(app);
+export const PATCH = handle(app);
+export const DELETE = handle(app);

examples/integrations/a2a-middleware/app/globals.css

@@ -0,0 +1,87 @@
+@import "tailwindcss";
+@config "../tailwind.config.ts";
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    /* Custom elevation shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl:
+      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-plus-jakarta-sans), sans-serif;
+  }
+}
+
+/* A2A message animations */
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.a2a-message-enter {
+  animation: slide-in 0.3s ease-out;
+}
+
+.threadsLayout,
+body > [role="presentation"] {
+  --foreground: oklch(0.145 0 0);
+  --background: oklch(1 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}

examples/integrations/a2a-middleware/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Plus_Jakarta_Sans, Spline_Sans_Mono } from "next/font/google";
+import "./globals.css";
+import "@copilotkit/react-core/v2/styles.css";
+
+const plusJakartaSans = Plus_Jakarta_Sans({
+  variable: "--font-plus-jakarta-sans",
+  subsets: ["latin"],
+});
+
+const splineSansMono = Spline_Sans_Mono({
+  variable: "--font-spline-sans-mono",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "A2A + AG-UI Starter",
+  description: "Multi-agent communication demo with A2A Protocol and AG-UI",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${plusJakartaSans.variable} ${splineSansMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

examples/integrations/a2a-middleware/app/page.module.css

@@ -0,0 +1,50 @@
+.layout {
+  display: grid;
+  /*
+    Reserve the desktop drawer's width (its default 320px) as a fixed first
+    column so the layout doesn't shift when the client-only <CopilotThreadsDrawer>
+    mounts after hydration. On mobile the drawer is an off-canvas overlay (out
+    of flow), so the column collapses and the content fills the width.
+  */
+  grid-template-columns: var(--cpk-drawer-reserved-width, 320px) minmax(0, 1fr);
+  /* Drawer sets --cpk-drawer-reserved-width to 0 on desktop-collapse, so the
+     reserved column collapses and the chat reclaims the space. */
+  transition: grid-template-columns 0.2s ease;
+  /*
+    Bound the single grid row to the viewport (minmax(0,1fr) lets it shrink
+    below content) so a long thread list scrolls INTERNALLY in the drawer with
+    the header pinned, instead of the drawer growing past the viewport and the
+    page scrolling the header away.
+  */
+  grid-template-rows: minmax(0, 1fr);
+  height: 100dvh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.mainPanel {
+  /*
+    Pin the content to the SECOND track explicitly. The client-only drawer
+    renders nothing during SSR, so without this the content would flow into the
+    reserved first column at first paint and then jump once the drawer mounts.
+  */
+  grid-column: 2;
+  min-width: 0;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+/*
+  Mobile (≤768px): the drawer is an off-canvas overlay — collapse to a single
+  track. MUST come after the base rules (media queries add no specificity, so a
+  later same-specificity base rule would otherwise win and leak the two-column
+  desktop layout onto mobile).
+*/
+@media (max-width: 768px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .mainPanel {
+    grid-column: auto;
+  }
+}

examples/integrations/a2a-middleware/app/page.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useState } from "react";
+import Chat from "@/components/chat";
+import {
+  CopilotChatConfigurationProvider,
+  CopilotThreadsDrawer,
+  CopilotKitProvider,
+} from "@copilotkit/react-core/v2";
+import styles from "./page.module.css";
+
+export type ResearchData = {
+  topic: string;
+  summary: string;
+  findings: Array<{
+    title: string;
+    description: string;
+  }>;
+  sources: string;
+};
+
+export type AnalysisData = {
+  topic: string;
+  overview: string;
+  insights: Array<{
+    title: string;
+    description: string;
+    importance: string;
+  }>;
+  conclusion: string;
+};
+
+// Disable static optimization for this page
+export const dynamic = "force-dynamic";
+
+function ResearchAssistant() {
+  const [researchData, setResearchData] = useState<ResearchData | null>(null);
+  const [analysisData, setAnalysisData] = useState<AnalysisData | null>(null);
+
+  return (
+    <div className="relative flex min-h-dvh overflow-hidden bg-[#DEDEE9] p-2">
+      {/* Background blur circles - Creating the gradient effect */}
+      <div
+        className="absolute w-[445px] h-[445px] left-[1040px] top-[11px] rounded-full z-0"
+        style={{ background: "rgba(255, 172, 77, 0.2)", filter: "blur(103px)" }}
+      />
+      <div
+        className="absolute w-[609px] h-[609px] left-[1339px] top-[625px] rounded-full z-0"
+        style={{ background: "#C9C9DA", filter: "blur(103px)" }}
+      />
+      <div
+        className="absolute w-[609px] h-[609px] left-[670px] top-[-365px] rounded-full z-0"
+        style={{ background: "#C9C9DA", filter: "blur(103px)" }}
+      />
+      <div
+        className="absolute w-[445px] h-[445px] left-[128px] top-[331px] rounded-full z-0"
+        style={{
+          background: "rgba(255, 243, 136, 0.3)",
+          filter: "blur(103px)",
+        }}
+      />
+
+      <div className="flex flex-1 flex-col gap-2 overflow-y-auto z-10 lg:flex-row lg:overflow-hidden">
+        <div className="flex min-h-[calc(100dvh-1rem)] w-full flex-shrink-0 flex-col overflow-hidden rounded-lg border-2 border-white bg-white/50 shadow-elevation-lg backdrop-blur-md lg:w-[450px]">
+          <div className="p-6 max-lg:pl-16 border-b border-[#DBDBE5]">
+            <h1 className="text-2xl font-semibold text-[#010507] mb-1">
+              Research Assistant
+            </h1>
+            <p className="text-sm text-[#57575B] leading-relaxed">
+              Multi-Agent A2A Demo:{" "}
+              <span className="text-[#1B936F] font-semibold">1 LangGraph</span>{" "}
+              + <span className="text-[#BEC2FF] font-semibold">1 ADK</span>{" "}
+              agent
+            </p>
+            <p className="text-xs text-[#838389] mt-1">
+              Orchestrator-mediated A2A Protocol
+            </p>
+          </div>
+
+          <div className="flex-1 overflow-hidden">
+            <Chat
+              onResearchUpdate={setResearchData}
+              onAnalysisUpdate={setAnalysisData}
+            />
+          </div>
+        </div>
+
+        <div className="min-h-[520px] flex-1 overflow-y-auto rounded-lg bg-white/30 backdrop-blur-sm lg:min-h-0">
+          <div className="mx-auto p-4 sm:p-8">
+            <div className="mb-8">
+              <h2 className="text-3xl font-semibold text-[#010507] mb-2">
+                Research Results
+              </h2>
+              <p className="text-[#57575B]">
+                Multi-agent coordination: LangGraph + ADK agents with A2A
+                Protocol
+              </p>
+            </div>
+
+            {!researchData && !analysisData && (
+              <div className="flex items-center justify-center h-[400px] bg-white/60 backdrop-blur-md rounded-xl border-2 border-dashed border-[#DBDBE5] shadow-elevation-sm">
+                <div className="text-center">
+                  <div className="text-6xl mb-4">🔍</div>
+                  <h3 className="text-xl font-semibold text-[#010507] mb-2">
+                    Start Your Research
+                  </h3>
+                  <p className="text-[#57575B] max-w-md">
+                    Ask the assistant to research any topic. Watch as 2
+                    specialized agents collaborate through A2A Protocol to
+                    gather information and provide insights.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2 items-stretch xl:flex-row">
+              {researchData && (
+                <div className="flex-1 bg-white/60 backdrop-blur-md rounded-xl border-2 border-[#DBDBE5] shadow-elevation-md p-6">
+                  <div className="flex flex-col gap-0 mb-4">
+                    <div className="flex items-center gap-2">
+                      <span className="text-2xl">📚</span>
+                      <h3 className="text-xl font-semibold text-[#010507]">
+                        {researchData.topic}
+                      </h3>
+                      <span className="ml-auto px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-emerald-100 to-green-100 text-emerald-800 border-2 border-emerald-400">
+                        🔗 Research Agent
+                      </span>
+                    </div>
+                    <h4 className="text-lg font-semibold text-gray-500">
+                      Key Points
+                    </h4>
+                  </div>
+                  <p className="text-[#57575B] mb-4">{researchData.summary}</p>
+                  <div className="space-y-3">
+                    {researchData.findings.map((finding, index) => (
+                      <div key={index} className="bg-white/80 rounded-lg p-4">
+                        <h4 className="font-semibold text-[#010507] mb-1">
+                          {finding.title}
+                        </h4>
+                        <p className="text-sm text-[#57575B]">
+                          {finding.description}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                  <p className="text-xs text-[#838389] mt-4 italic">
+                    {researchData.sources}
+                  </p>
+                </div>
+              )}
+
+              {analysisData && (
+                <div className="flex-1 bg-white/60 backdrop-blur-md rounded-xl border-2 border-[#DBDBE5] shadow-elevation-md p-6">
+                  <div className="flex flex-col gap-0 mb-4">
+                    <div className="flex items-center gap-2">
+                      <span className="text-2xl">💡</span>
+                      <h3 className="text-xl font-semibold text-[#010507]">
+                        {analysisData.topic}
+                      </h3>
+                      <span className="ml-auto px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-100 to-sky-100 text-blue-800 border-2 border-blue-400">
+                        ✨ Analysis Agent
+                      </span>
+                    </div>
+                    <h4 className="text-lg font-semibold text-gray-500">
+                      Insights and Analysis
+                    </h4>
+                  </div>
+                  <p className="text-[#57575B] mb-4">{analysisData.overview}</p>
+                  <div className="space-y-3 mb-4">
+                    {analysisData.insights.map((insight, index) => (
+                      <div key={index} className="bg-white/80 rounded-lg p-4">
+                        <h4 className="font-semibold text-[#010507] mb-1">
+                          {insight.title}
+                        </h4>
+                        <p className="text-sm text-[#57575B] mb-2">
+                          {insight.description}
+                        </p>
+                        <p className="text-xs text-blue-600 font-medium">
+                          💡 {insight.importance}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <h4 className="font-semibold text-blue-900 mb-1">
+                      Conclusion
+                    </h4>
+                    <p className="text-sm text-blue-800">
+                      {analysisData.conclusion}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Home() {
+  return (
+    <CopilotKitProvider
+      runtimeUrl="/api/copilotkit"
+      showDevConsole="auto"
+      useSingleEndpoint={false}
+    >
+      {/*
+        One UNCONTROLLED CopilotChatConfigurationProvider (no `threadId` prop)
+        owns the active thread for the whole surface. The SDK <CopilotThreadsDrawer>
+        drives it directly — picking a row sets the active thread, "+ New"
+        resets to a fresh thread — with no host thread-state. The chat (inside
+        ResearchAssistant) reads the same active thread from the provider. A
+        *controlled* provider would block "+ New" from resetting, so
+        uncontrolled-inside-provider is required, not optional.
+      */}
+      <CopilotChatConfigurationProvider agentId="a2a_chat">
+        <div className={`${styles.layout} threadsLayout`}>
+          {/* SDK threads drawer (replaces the hand-rolled fork). License-gated: the locked view's Upgrade CTA opens the Intelligence docs by default. */}
+          <CopilotThreadsDrawer agentId="a2a_chat" />
+          <div className={styles.mainPanel}>
+            <ResearchAssistant />
+          </div>
+        </div>
+      </CopilotChatConfigurationProvider>
+    </CopilotKitProvider>
+  );
+}