feat(showcase): close 28 unsupported gaps — 93.5% → 97.4% coverage (CopilotKit#4545)

## Summary

Closes 28 of 29 "unsupported" showcase cells, moving the dashboard from
673 to 701 wired features (93.5% → 97.4% coverage).

### Interrupt demos (26 cells, 13 integrations)
- Added gen-ui-interrupt + interrupt-headless to: ag2, agno,
built-in-agent, claude-sdk-python, claude-sdk-typescript, crewai-crews,
google-adk, langroid, llamaindex, mastra, pydantic-ai, spring-ai,
strands
- Uses MS Agent Python "Strategy B": useFrontendTool + async Promise
handler — no native interrupt primitive needed
- Backend agents use system prompt + tools=[] — CopilotKit runtime
routes tool calls to frontend

### Spring AI additional features (2 cells)
- **byoc-json-render**: zero-tool agent + @json-render frontend (routine
port, PARITY_NOTES justification was incorrect)
- **shared-state-streaming**: per-token STATE_SNAPSHOT emission via
tool-call argument interception in a dedicated Spring controller

### What remains unsupported (1 cell)
- hitl on built-in-agent — genuinely unsupported (TanStack AI
chat-completions has no graph to pause). Equivalent UX ships as
hitl-in-chat.

## Test plan
- [x] showcase-harness: 1480 tests pass (91 files)
- [ ] CI green
- [ ] Registry regeneration validates 701 wired / 1 unsupported

Author: jpr5

showcase/integrations/ag2/manifest.yaml

@@ -16,9 +16,7 @@ generative_ui:
   - constrained-explicit
   - a2ui-fixed-schema
   - a2ui-dynamic-schema
-not_supported_features:
-  - gen-ui-interrupt
-  - interrupt-headless
+not_supported_features: []
 interaction_modalities:
   - sidebar
   - embedded
@@ -55,6 +53,8 @@ features:
   - frontend-tools-async
   - shared-state-read-write
   - subagents
+  - gen-ui-interrupt
+  - interrupt-headless
   - auth
   - agent-config
   - voice
@@ -338,6 +338,29 @@ demos:
       - src/app/demos/subagents/page.tsx
       - src/app/demos/subagents/delegation-log.tsx
       - src/app/api/copilotkit/route.ts
+  - id: gen-ui-interrupt
+    name: Gen UI Interrupt (Frontend Tool + async Promise)
+    description: In-chat time-picker card via useFrontendTool with an async handler that blocks until the user picks a slot — AG2 adaptation of the LangGraph interrupt() primitive
+    tags:
+      - interactivity
+    route: /demos/gen-ui-interrupt
+    animated_preview_url:
+    highlight:
+      - src/agents/interrupt_agent.py
+      - src/app/demos/gen-ui-interrupt/page.tsx
+      - src/app/demos/gen-ui-interrupt/time-picker-card.tsx
+      - src/app/api/copilotkit/route.ts
+  - id: interrupt-headless
+    name: Headless Interrupt (Frontend Tool + async Promise)
+    description: Time-picker popup rendered outside the chat in the app surface via useFrontendTool with an async handler — AG2 adaptation of the LangGraph headless interrupt pattern
+    tags:
+      - interactivity
+    route: /demos/interrupt-headless
+    animated_preview_url:
+    highlight:
+      - src/agents/interrupt_agent.py
+      - src/app/demos/interrupt-headless/page.tsx
+      - src/app/api/copilotkit/route.ts
   - id: declarative-gen-ui
     name: Declarative Generative UI (A2UI Dynamic Schema)
     description: Agent dynamically composes UI from a registered catalog of branded components via the A2UI middleware

showcase/integrations/ag2/src/agent_server.py

@@ -34,6 +34,7 @@
     shared_state_read_write_app,
 )
 from agents.subagents import subagents_app
+from agents.interrupt_agent import interrupt_app
 from agents.tool_rendering_reasoning_chain import (
     tool_rendering_reasoning_chain_app,
 )
@@ -90,6 +91,11 @@ async def dispatch(self, request, call_next):
 app.mount("/byoc-hashbrown", byoc_hashbrown_app)
 app.mount("/byoc-json-render", byoc_json_render_app)
 
+# Interrupt-adapted scheduling agent. Shared by gen-ui-interrupt and
+# interrupt-headless demos — backend has tools=[], the frontend provides
+# `schedule_meeting` via `useFrontendTool` with an async Promise handler.
+app.mount("/interrupt-adapted", interrupt_app)
+
 
 # Mount the default AG2 AG-UI endpoint at the root.
 # `app.mount("/", ...)` is a catch-all Mount that shadows any later route

showcase/integrations/ag2/src/agents/interrupt_agent.py

@@ -0,0 +1,61 @@
+"""
+AG2 scheduling agent -- interrupt-adapted.
+
+This agent powers two demos (gen-ui-interrupt, interrupt-headless) that in the
+LangGraph showcase rely on the native `interrupt()` primitive with
+checkpoint/resume. AG2 does NOT have that primitive, so we adapt using the
+same "Strategy B" pattern as the MS Agent Framework port: the backend agent's
+system prompt tells the LLM to call `schedule_meeting`, but no local
+implementation is registered -- the tool is provided entirely by the frontend
+via `useFrontendTool` with an async handler that returns a Promise resolving
+only once the user picks a time slot (or cancels).
+
+See `src/agents/agent.py` for the shared ConversableAgent used by most other
+AG2 demos.
+"""
+
+from __future__ import annotations
+
+from autogen import ConversableAgent, LLMConfig
+from autogen.ag_ui import AGUIStream
+from fastapi import FastAPI
+
+
+# @region[backend-tool-call]
+SYSTEM_PROMPT = (
+    "You are a scheduling assistant. Whenever the user asks you to book a call "
+    "or schedule a meeting, you MUST call the `schedule_meeting` tool. Pass a "
+    "short `topic` describing the purpose of the meeting and, if known, an "
+    "`attendee` describing who the meeting is with.\n\n"
+    "The `schedule_meeting` tool is implemented on the client: it surfaces a "
+    "time-picker UI to the user and returns the user's selection. After the "
+    "tool returns, briefly confirm whether the meeting was scheduled and at "
+    "what time, or note that the user cancelled. Do NOT ask for approval "
+    "yourself -- always call the tool and let the picker handle the decision.\n\n"
+    "Keep responses short and friendly. After you finish executing tools, "
+    "always send a brief final assistant message summarizing what happened so "
+    "the message persists."
+)
+
+interrupt_agent = ConversableAgent(
+    name="scheduling_agent",
+    system_message=SYSTEM_PROMPT,
+    llm_config=LLMConfig({"model": "gpt-4o-mini", "stream": True}),
+    human_input_mode="NEVER",
+    max_consecutive_auto_reply=5,
+    # No backend tools. `schedule_meeting` is registered on the frontend
+    # via `useFrontendTool` and dispatched through the CopilotKit runtime.
+    # When the agent calls `schedule_meeting`, the request is routed to
+    # the frontend handler, which returns a Promise that only resolves
+    # once the user picks a slot -- equivalent to `interrupt()` in the
+    # LangGraph reference.
+    functions=[],
+)
+# @endregion[backend-tool-call]
+
+# AG-UI stream wrapper
+interrupt_stream = AGUIStream(interrupt_agent)
+
+# FastAPI sub-app so agent_server.py can mount at /interrupt-adapted
+interrupt_app = FastAPI(title="AG2 Interrupt Agent")
+interrupt_app.mount("/", interrupt_stream.build_asgi())

showcase/integrations/ag2/src/app/api/copilotkit/route.ts

@@ -61,13 +61,21 @@ const dedicatedAgents: Record<string, string> = {
   "agent-config-demo": "/agent-config/",
 };
 
+// Interrupt-adapted demos: gen-ui-interrupt and interrupt-headless share the
+// same AG2 scheduling agent at /interrupt-adapted. The agent has tools=[];
+// `schedule_meeting` is provided by the frontend via `useFrontendTool`.
+const interruptAgentNames = ["gen-ui-interrupt", "interrupt-headless"];
+
 const agents: Record<string, AbstractAgent> = {};
 for (const name of sharedAgentNames) {
   agents[name] = createAgent();
 }
 for (const [name, path] of Object.entries(dedicatedAgents)) {
   agents[name] = createAgent(path);
 }
+for (const name of interruptAgentNames) {
+  agents[name] = createAgent("/interrupt-adapted/");
+}
 agents["default"] = createAgent();
 
 console.log(

showcase/integrations/ag2/src/app/demos/gen-ui-interrupt/page.tsx

@@ -1,75 +1,121 @@
 "use client";
 
-/**
- * gen-ui-interrupt — NOT SUPPORTED on AG2
- *
- * The LangGraph version of this demo uses LangGraph's native `interrupt()`
- * primitive, which pauses the running graph and emits a resumable interrupt
- * payload over the AG-UI stream. The frontend then resumes the SAME graph
- * run from a persisted checkpoint via
- * `copilotkit.runAgent({ forwardedProps: { command: { resume } } })`.
- *
- * AG2's `human_input_mode` is a synchronous request/reply hook on a
- * `ConversableAgent`; it does not pause-and-resume the same run from a
- * persisted checkpoint, so the resumable interrupt round-trip cannot be
- * reproduced faithfully.
- *
- * For an inline-in-chat HITL surface on AG2 see `/demos/hitl-in-chat`,
- * which uses the higher-level `useHumanInTheLoop` hook (the same UX that
- * langgraph's `useInterrupt` exposes via `useHumanInTheLoop` on top).
- *
- * For an out-of-chat HITL surface on AG2 see `/demos/hitl-in-app`.
- */
+// Gen UI Interrupt demo (AG2 port).
+//
+// The LangGraph version of this demo uses `useInterrupt` with LangGraph's
+// native `interrupt()` primitive — the backend pauses the run and surfaces
+// a payload that the frontend renders into the chat via the `useInterrupt`
+// hook. AG2 does NOT have an equivalent interrupt primitive, so we adapt
+// the demo by registering a frontend tool with `useFrontendTool`. The
+// handler returns a Promise that only resolves once the user picks a time
+// (or cancels), which produces the same UX: the picker appears inline in
+// the chat and the agent's tool call blocks until the user decides.
 
-import React from "react";
-import Link from "next/link";
+import React, { useRef } from "react";
+import { CopilotKit } from "@copilotkit/react-core";
+import {
+  CopilotChat,
+  useConfigureSuggestions,
+  useFrontendTool,
+} from "@copilotkit/react-core/v2";
+import { z } from "zod";
+import { TimePickerCard, TimeSlot } from "./time-picker-card";
 
-export default function GenUiInterruptUnsupportedPage() {
+const DEFAULT_SLOTS: TimeSlot[] = [
+  { label: "Tomorrow 10:00 AM", iso: "2026-04-25T10:00:00-07:00" },
+  { label: "Tomorrow 2:00 PM", iso: "2026-04-25T14:00:00-07:00" },
+  { label: "Monday 9:00 AM", iso: "2026-04-28T09:00:00-07:00" },
+  { label: "Monday 3:30 PM", iso: "2026-04-28T15:30:00-07:00" },
+];
+
+type PickerResult =
+  | { chosen_time: string; chosen_label: string }
+  | { cancelled: true };
+
+export default function GenUiInterruptDemo() {
   return (
-    <div className="flex justify-center items-center h-screen w-full p-6">
-      <div className="max-w-2xl w-full rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8 shadow-sm">
-        <div className="text-xs uppercase tracking-wider text-[var(--muted-foreground)] mb-2">
-          Not supported on AG2
-        </div>
-        <h1 className="text-2xl font-semibold mb-3">
-          gen-ui-interrupt is not available on AG2
-        </h1>
-        <p className="text-sm text-[var(--muted-foreground)] mb-4 leading-relaxed">
-          This demo depends on LangGraph&apos;s native{" "}
-          <code className="px-1 rounded bg-[var(--muted)]">interrupt()</code>{" "}
-          primitive — the graph pauses, emits a resumable payload over the AG-UI
-          stream, and the frontend resumes the same run from a persisted
-          checkpoint. AG2&apos;s{" "}
-          <code className="px-1 rounded bg-[var(--muted)]">
-            human_input_mode
-          </code>{" "}
-          is a synchronous request/reply hook and does not round-trip a
-          resumable pause through the event stream, so the AG-UI interrupt
-          contract cannot be reproduced faithfully.
-        </p>
-        <p className="text-sm text-[var(--muted-foreground)] mb-6 leading-relaxed">
-          Equivalent in-chat HITL flows on AG2 are available via the
-          higher-level{" "}
-          <code className="px-1 rounded bg-[var(--muted)]">
-            useHumanInTheLoop
-          </code>{" "}
-          hook.
-        </p>
-        <div className="flex flex-wrap gap-3">
-          <Link
-            href="/demos/hitl-in-chat"
-            className="inline-flex items-center px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:bg-[var(--muted)] text-sm font-medium"
-          >
-            Try hitl-in-chat (in-chat HITL on AG2) →
-          </Link>
-          <Link
-            href="/demos/hitl-in-app"
-            className="inline-flex items-center px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:bg-[var(--muted)] text-sm font-medium"
-          >
-            Try hitl-in-app (out-of-chat HITL on AG2) →
-          </Link>
+    <CopilotKit runtimeUrl="/api/copilotkit" agent="gen-ui-interrupt">
+      <div className="flex justify-center items-center h-screen w-full">
+        <div className="h-full w-full max-w-4xl">
+          <Chat />
         </div>
       </div>
-    </div>
+    </CopilotKit>
+  );
+}
+
+function Chat() {
+  // Pending-resolver ref: set by the async handler, called by the render
+  // prop when the user clicks a slot or cancels. This is the AG2
+  // adaptation of the LangGraph `resolve(...)` callback.
+  const resolverRef = useRef<((result: PickerResult) => void) | null>(null);
+
+  useConfigureSuggestions({
+    suggestions: [
+      {
+        title: "Book a call with sales",
+        message: "Book an intro call with the sales team to discuss pricing.",
+      },
+      {
+        title: "Schedule a 1:1 with Alice",
+        message: "Schedule a 1:1 with Alice next week to review Q2 goals.",
+      },
+    ],
+    available: "always",
+  });
+
+  // @region[frontend-promise-handler]
+  useFrontendTool({
+    name: "schedule_meeting",
+    description:
+      "Ask the user to pick a time slot for a meeting via an in-chat " +
+      "picker. Blocks until the user chooses a slot or cancels.",
+    parameters: z.object({
+      topic: z
+        .string()
+        .describe("Short human-readable description of the meeting."),
+      attendee: z
+        .string()
+        .optional()
+        .describe("Who the meeting is with (optional)."),
+    }),
+    // Async handler: returns a Promise that resolves only once the user
+    // acts on the picker. This is the AG2 shim for LangGraph's
+    // `interrupt()`/`resolve()` pair.
+    handler: async (): Promise<string> => {
+      const result = await new Promise<PickerResult>((resolve) => {
+        resolverRef.current = resolve;
+      });
+      if ("cancelled" in result && result.cancelled) {
+        return "User cancelled. Meeting NOT scheduled.";
+      }
+      if ("chosen_label" in result) {
+        return `Meeting scheduled for ${result.chosen_label}.`;
+      }
+      return "User did not pick a time. Meeting NOT scheduled.";
+    },
+    render: ({ args, status }) => {
+      if (status === "complete") return null;
+      const topic =
+        (args as { topic?: string } | undefined)?.topic ?? "a meeting";
+      const attendee = (args as { attendee?: string } | undefined)?.attendee;
+      return (
+        <TimePickerCard
+          topic={topic}
+          attendee={attendee}
+          slots={DEFAULT_SLOTS}
+          onSubmit={(result) => {
+            const fn = resolverRef.current;
+            resolverRef.current = null;
+            fn?.(result);
+          }}
+        />
+      );
+    },
+  });
+  // @endregion[frontend-promise-handler]
+
+  return (
+    <CopilotChat agentId="gen-ui-interrupt" className="h-full rounded-2xl" />
   );
 }