fix(showcase): align built-in-agent D5 wiring with LGP fixture tool names

Seven D5 features fail because built-in-agent demo pages use different
tool names and hook types than the LangGraph-Python reference agent
that the D5 fixtures were recorded against.

- tool-rendering: switch from useComponent("weather") to
  useRenderTool("get_weather") with correct {parameters, result, status}
  shape
- gen-ui-tool-based: rename useComponent("haiku") to
  useComponent("generate_haiku"), fix HaikuCard to accept args as
  direct props instead of {status, result, parameters}
- hitl-in-chat: create /demos/hitl-in-chat route (was missing); reuses
  TimePickerCard from hitl-in-chat-booking with book_call tool
- shared-state: add set_notes server tool to baseServerTools so the
  fixture's set_notes call has a backend handler
- subagents: rename delegate_to_planner/researcher to
  research_agent/writing_agent/critique_agent matching LGP tool names
- subagents page: update useComponent registrations and DelegationCard
  for the renamed tools

Author: jpr5

showcase/integrations/built-in-agent/src/app/demos/gen-ui-tool-based/page.tsx

@@ -16,50 +16,80 @@ export default function GenUiToolBased() {
 
 function Demo() {
   useComponent({
-    name: "haiku",
+    name: "generate_haiku",
     render: HaikuCard,
   });
 
   return (
     <main className="p-8">
       <h1 className="text-2xl font-semibold mb-4">Tool-Based Generative UI</h1>
       <p className="text-sm opacity-70 mb-6">
-        Try: &ldquo;Write me a haiku about morning dew.&rdquo; The agent calls
+        Try: &ldquo;Write me a haiku about nature.&rdquo; The agent calls
         the
-        <code className="mx-1 px-1 bg-gray-100 rounded">haiku</code>
+        <code className="mx-1 px-1 bg-gray-100 rounded">generate_haiku</code>
         tool and the result renders inline as a typed card.
       </p>
       <CopilotChat />
     </main>
   );
 }
 
+/**
+ * HaikuCard — rendered by `useComponent({ name: "generate_haiku" })`.
+ *
+ * `useComponent` passes tool-call arguments directly as React props (via
+ * `useFrontendTool`'s `render: ({ args }) => <Component {...args} />`).
+ * The D5 fixture sends: { japanese, english, image_name, gradient }.
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function HaikuCard(props: any) {
-  const { status, result, parameters } = props;
+  const japaneseLines: string[] = props.japanese ?? [];
+  const englishLines: string[] = props.english ?? props.lines ?? [];
+  const gradient: string | undefined = props.gradient;
+  const topic: string | undefined = props.topic;
 
-  if (status !== "complete" || !result) {
+  const hasContent =
+    japaneseLines.length > 0 || englishLines.length > 0;
+
+  if (!hasContent) {
     return (
-      <div className="border rounded p-3 my-2 opacity-70 text-sm">
-        Composing haiku
-        {parameters?.topic ? ` about ${parameters.topic}…` : "…"}
+      <div
+        data-testid="haiku-card"
+        className="border rounded p-3 my-2 opacity-70 text-sm"
+      >
+        Composing haiku{topic ? ` about ${topic}` : ""}…
       </div>
     );
   }
 
-  let data: { topic?: string; lines?: string[] } = {};
-  try {
-    data = JSON.parse(result);
-  } catch {
-    // leave empty on parse failure
-  }
-  const lines = data.lines ?? [];
-
   return (
-    <div className="border rounded p-4 my-2 bg-amber-50">
-      <div className="font-medium mb-2">Haiku — {data.topic ?? ""}</div>
+    <div
+      data-testid="haiku-card"
+      className="border rounded p-4 my-2 bg-amber-50"
+      style={gradient ? { background: gradient } : undefined}
+    >
+      <div className="font-medium mb-2">
+        Haiku{topic ? ` — ${topic}` : ""}
+      </div>
+      {japaneseLines.length > 0 && (
+        <div className="mb-2">
+          {japaneseLines.map((line: string, i: number) => (
+            <div
+              key={i}
+              data-testid="haiku-japanese-line"
+              className="text-lg leading-relaxed"
+            >
+              {line}
+            </div>
+          ))}
+        </div>
+      )}
       <div className="font-serif italic whitespace-pre-line text-lg leading-relaxed">
-        {lines.join("\n")}
+        {englishLines.map((line: string, i: number) => (
+          <div key={i} data-testid="haiku-english-line">
+            {line}
+          </div>
+        ))}
       </div>
     </div>
   );

showcase/integrations/built-in-agent/src/app/demos/hitl-in-chat/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+/**
+ * In-Chat HITL (book_call) demo.
+ *
+ * Mirrors the hitl-in-chat-booking page at `/demos/hitl-in-chat-booking`
+ * but exposed at the canonical `/demos/hitl-in-chat` route that the D5
+ * harness expects. The `book_call` tool presents a TimePickerCard with
+ * fixed time slots; the user picks one, and the agent acknowledges.
+ */
+
+import {
+  CopilotKitProvider,
+  CopilotChat,
+  useHumanInTheLoop,
+} from "@copilotkit/react-core/v2";
+import { z } from "zod";
+import { TimePickerCard, TimeSlot } from "../hitl-in-chat-booking/time-picker-card";
+
+const DEFAULT_SLOTS: TimeSlot[] = [
+  { label: "Tomorrow 10:00 AM", iso: "2026-04-30T10:00:00-07:00" },
+  { label: "Tomorrow 2:00 PM", iso: "2026-04-30T14:00:00-07:00" },
+  { label: "Monday 9:00 AM", iso: "2026-05-04T09:00:00-07:00" },
+  { label: "Monday 3:30 PM", iso: "2026-05-04T15:30:00-07:00" },
+];
+
+export default function HitlInChat() {
+  return (
+    <CopilotKitProvider runtimeUrl="/api/copilotkit" useSingleEndpoint>
+      <Demo />
+    </CopilotKitProvider>
+  );
+}
+
+function Demo() {
+  useHumanInTheLoop({
+    name: "book_call",
+    description:
+      "Ask the user to pick a time slot for a call. The picker UI presents fixed candidate slots; the user's choice is returned to the agent.",
+    parameters: z.object({
+      topic: z
+        .string()
+        .describe("What the call is about (e.g. 'Intro with sales')"),
+      attendee: z
+        .string()
+        .describe("Who the call is with (e.g. 'Alice from Sales')"),
+    }),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    render: ({ args, status, respond }: any) => (
+      <TimePickerCard
+        topic={args?.topic ?? "a call"}
+        attendee={args?.attendee}
+        slots={DEFAULT_SLOTS}
+        status={status}
+        onSubmit={(result) => respond?.(result)}
+      />
+    ),
+  });
+
+  return (
+    <main className="p-8">
+      <h1 className="text-2xl font-semibold mb-4">In-Chat Booking (HITL)</h1>
+      <p className="text-sm opacity-70 mb-6">
+        Try: &ldquo;Book a 30-minute onboarding call for Alice.&rdquo; The
+        agent renders an inline time picker; pick a slot to confirm.
+      </p>
+      <CopilotChat />
+    </main>
+  );
+}

showcase/integrations/built-in-agent/src/app/demos/subagents/page.tsx

@@ -16,11 +16,15 @@ export default function Subagents() {
 
 function Demo() {
   useComponent({
-    name: "delegate_to_planner",
+    name: "research_agent",
     render: DelegationCard,
   });
   useComponent({
-    name: "delegate_to_researcher",
+    name: "writing_agent",
+    render: DelegationCard,
+  });
+  useComponent({
+    name: "critique_agent",
     render: DelegationCard,
   });
 
@@ -29,11 +33,14 @@ function Demo() {
       <h1 className="text-2xl font-semibold mb-4">Sub-Agents</h1>
       <p className="text-sm opacity-70 mb-6">
         The main agent delegates tasks to subagents via{" "}
-        <code className="px-1 bg-gray-100 rounded">delegate_to_planner</code>
+        <code className="px-1 bg-gray-100 rounded">research_agent</code>
+        {" / "}
+        <code className="px-1 bg-gray-100 rounded">writing_agent</code>
         {" / "}
-        <code className="px-1 bg-gray-100 rounded">delegate_to_researcher</code>
+        <code className="px-1 bg-gray-100 rounded">critique_agent</code>
         . Each delegation runs a nested <code>chat()</code> with its own system
-        prompt. Try: &ldquo;Plan a 2-day trip to Tokyo with key sights.&rdquo;
+        prompt. Try: &ldquo;Research the benefits of remote work and draft a
+        one-paragraph summary.&rdquo;
       </p>
       <CopilotChat />
     </main>
@@ -44,7 +51,9 @@ function Demo() {
 function DelegationCard(props: any) {
   const { name, status, parameters, result } = props;
   const role =
-    typeof name === "string" ? name.replace(/^delegate_to_/, "") : "subagent";
+    typeof name === "string"
+      ? name.replace(/_agent$/, "").replace(/_/g, " ")
+      : "subagent";
 
   let parsed: { role?: string; text?: string } = {};
   if (status === "complete" && typeof result === "string") {

showcase/integrations/built-in-agent/src/app/demos/tool-rendering/page.tsx

@@ -3,9 +3,10 @@
 import {
   CopilotKitProvider,
   CopilotChat,
-  useComponent,
+  useRenderTool,
   useDefaultRenderTool,
 } from "@copilotkit/react-core/v2";
+import { z } from "zod";
 
 export default function ToolRendering() {
   return (
@@ -17,9 +18,18 @@ export default function ToolRendering() {
 
 function Demo() {
   // @region[render-weather-tool]
-  useComponent({
-    name: "weather",
-    render: WeatherCard,
+  useRenderTool({
+    name: "get_weather",
+    parameters: z.object({ location: z.string() }),
+    render: ({ parameters, result, status }) => {
+      return (
+        <WeatherCard
+          loading={status !== "complete"}
+          parameters={parameters}
+          result={result}
+        />
+      );
+    },
   });
   // @endregion[render-weather-tool]
 
@@ -34,7 +44,7 @@ function Demo() {
       <h1 className="text-2xl font-semibold mb-4">Tool Rendering</h1>
       <p className="text-sm opacity-70 mb-6">
         Try: &ldquo;What&apos;s the weather in Tokyo?&rdquo; The
-        <code className="mx-1 px-1 bg-gray-100 rounded">weather</code>tool
+        <code className="mx-1 px-1 bg-gray-100 rounded">get_weather</code>tool
         renders with a custom card; everything else falls back to a generic
         renderer.
       </p>
@@ -43,44 +53,69 @@ function Demo() {
   );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function WeatherCard(props: any) {
-  const { status, result } = props;
-  if (status !== "complete" || !result) {
+/**
+ * WeatherCard — rendered via `useRenderTool({ name: "get_weather" })`.
+ *
+ * Receives `loading`, `parameters` (tool args), and `result` (tool output).
+ * The server tool returns: { city, temperature, humidity, wind_speed, conditions }.
+ */
+function WeatherCard({
+  loading,
+  parameters,
+  result,
+}: {
+  loading: boolean;
+  parameters?: { location?: string };
+  result?: unknown;
+}) {
+  if (loading || !result) {
     return (
       <div className="border rounded p-3 my-2 opacity-70 text-sm">
         Fetching weather…
       </div>
     );
   }
+
   let data: {
     city?: string;
+    temperature?: number;
     tempF?: number;
     condition?: string;
+    conditions?: string;
     humidity?: number;
+    wind_speed?: number;
   } = {};
   try {
-    data = JSON.parse(result);
+    data =
+      typeof result === "string" ? JSON.parse(result) : (result as typeof data);
   } catch {
     // Leave data empty on parse failure
   }
-  const humidityPct =
-    data.humidity != null ? `${Math.round(data.humidity * 100)}%` : "—";
+  const city = data.city ?? parameters?.location ?? "—";
+  const temp = data.temperature ?? data.tempF;
+  const condition = data.conditions ?? data.condition;
+  const humidityVal = data.humidity;
+  const humidityStr =
+    humidityVal != null
+      ? humidityVal < 1
+        ? `${Math.round(humidityVal * 100)}%`
+        : `${humidityVal}%`
+      : "—";
   return (
-    <div className="border rounded p-3 my-2">
-      <div className="font-medium">Weather in {data.city ?? "—"}</div>
+    <div data-testid="weather-card" className="border rounded p-3 my-2">
+      <div className="font-medium">Weather in {city}</div>
       <div className="grid grid-cols-3 gap-2 text-sm mt-2">
         <div>
           <div className="opacity-60">Temp</div>
-          <div>{data.tempF != null ? `${data.tempF}°F` : "—"}</div>
+          <div>{temp != null ? `${temp}°F` : "—"}</div>
         </div>
         <div>
           <div className="opacity-60">Condition</div>
-          <div>{data.condition ?? "—"}</div>
+          <div>{condition ?? "—"}</div>
         </div>
         <div>
           <div className="opacity-60">Humidity</div>
-          <div>{humidityPct}</div>
+          <div>{humidityStr}</div>
         </div>
       </div>
     </div>

showcase/integrations/built-in-agent/src/lib/factory/server-tools.ts

@@ -119,11 +119,30 @@ export const rollDiceTool = toolDefinition({
   result: Math.floor(Math.random() * Math.max(2, sides)) + 1,
 }));
 
+// Tool for the shared-state-read-write demo. The `set_notes` tool
+// updates the `notes` slot in shared state, mirroring the LangGraph
+// Python reference agent's `set_notes` tool. The actual state mutation
+// happens client-side when the tool result is returned; here we just
+// echo the notes back so the runtime/frontend can handle it.
+export const setNotesTool = toolDefinition({
+  name: "set_notes",
+  description:
+    "Replace the notes array in shared state with the full updated list. " +
+    "Use this tool whenever the user asks you to 'remember' something, or " +
+    "when you have an observation about the user worth surfacing in the " +
+    "UI's notes panel. Always pass the FULL notes list (existing notes + " +
+    "any new ones), not a diff. Keep each note short (< 120 chars).",
+  inputSchema: z.object({
+    notes: z.array(z.string()).describe("The complete updated list of notes"),
+  }),
+}).server(async ({ notes }) => ({ success: true, notes }));
+
 export const baseServerTools = [
   weatherTool,
   haikuTool,
   getWeatherTool,
   searchFlightsTool,
   getStockPriceTool,
   rollDiceTool,
+  setNotesTool,
 ] as const;