feat(ts#react-website#agui): render tool calls in all themed chat variants

Register WildcardToolCallRender on CopilotKitProvider so
useRenderToolCall returns a renderer. Add CopilotChatToolCallsView to
Cloudscape and forward messages prop to both Cloudscape and Shadcn
assistant message components so tool call status resolves correctly.

Author: cogwirrel

packages/nx-plugin/src/py/strands-agent/react-connection/__snapshots__/generator.spec.ts.snap

@@ -223,11 +223,16 @@ export function Main() {
 
 exports[`py strands agent react connection generator - AG-UI protocol > should generate a shared AguiProvider and a per-agent hook for AG-UI agents > AguiProvider.tsx 1`] = `
 "import { useAguiTestAgent } from '../hooks/useAguiTestAgent';
-import { CopilotKitProvider } from '@copilotkit/react-core/v2';
+import {
+  CopilotKitProvider,
+  WildcardToolCallRender,
+} from '@copilotkit/react-core/v2';
 import '@copilotkit/react-core/v2/styles.css';
 import { type FC, type PropsWithChildren, useMemo } from 'react';
 import type { AbstractAgent } from '@ag-ui/client';
 
+const renderToolCalls = [WildcardToolCallRender];
+
 export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   const testAgentAgents = useAguiTestAgent();
   const selfManagedAgents = useMemo<Record<string, AbstractAgent>>(
@@ -236,7 +241,10 @@ export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   );
 
   return (
-    <CopilotKitProvider selfManagedAgents={selfManagedAgents}>
+    <CopilotKitProvider
+      selfManagedAgents={selfManagedAgents}
+      renderToolCalls={renderToolCalls}
+    >
       {children}
     </CopilotKitProvider>
   );
@@ -330,11 +338,16 @@ export const useAguiTestAgent = (): Record<string, AbstractAgent> => {
 exports[`py strands agent react connection generator - AG-UI protocol > should register multiple AG-UI agents in the shared AguiProvider > AguiProvider-multi-agent.tsx 1`] = `
 "import { useAguiResearchAgent } from '../hooks/useAguiResearchAgent';
 import { useAguiTestAgent } from '../hooks/useAguiTestAgent';
-import { CopilotKitProvider } from '@copilotkit/react-core/v2';
+import {
+  CopilotKitProvider,
+  WildcardToolCallRender,
+} from '@copilotkit/react-core/v2';
 import '@copilotkit/react-core/v2/styles.css';
 import { type FC, type PropsWithChildren, useMemo } from 'react';
 import type { AbstractAgent } from '@ag-ui/client';
 
+const renderToolCalls = [WildcardToolCallRender];
+
 export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   const testAgentAgents = useAguiTestAgent();
   const researchAgentAgents = useAguiResearchAgent();
@@ -344,7 +357,10 @@ export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   );
 
   return (
-    <CopilotKitProvider selfManagedAgents={selfManagedAgents}>
+    <CopilotKitProvider
+      selfManagedAgents={selfManagedAgents}
+      renderToolCalls={renderToolCalls}
+    >
       {children}
     </CopilotKitProvider>
   );

packages/nx-plugin/src/ts/react-website/agui/files/cloudscape/src/components/copilot/CloudscapeAssistantMessage.tsx.template

@@ -1,5 +1,8 @@
 import type { FC } from 'react';
-import { CopilotChatAssistantMessage } from '@copilotkit/react-core/v2';
+import {
+  CopilotChatAssistantMessage,
+  CopilotChatToolCallsView,
+} from '@copilotkit/react-core/v2';
 import type { CopilotChatAssistantMessageProps } from '@copilotkit/react-core/v2';
 import ChatBubble from '@cloudscape-design/chat-components/chat-bubble';
 import Avatar from '@cloudscape-design/chat-components/avatar';
@@ -18,7 +21,7 @@ import StatusIndicator from '@cloudscape-design/components/status-indicator';
  */
 export const CloudscapeAssistantMessage: FC<
   CopilotChatAssistantMessageProps
-> = ({ message }) => {
+> = ({ message, messages }) => {
   const handleAction = (id: string) => {
     if (!message) return;
     if (id === 'copy' && typeof message.content === 'string') {
@@ -62,6 +65,9 @@ export const CloudscapeAssistantMessage: FC<
       <CopilotChatAssistantMessage.MarkdownRenderer
         content={message.content ?? ''}
       />
+      {message.toolCalls && message.toolCalls.length > 0 && (
+        <CopilotChatToolCallsView message={message} messages={messages} />
+      )}
     </ChatBubble>
   );
 };

packages/nx-plugin/src/ts/react-website/agui/files/common/src/components/AguiProvider.tsx.template

@@ -1,16 +1,24 @@
-import { CopilotKitProvider } from '@copilotkit/react-core/v2';
+import {
+  CopilotKitProvider,
+  WildcardToolCallRender,
+} from '@copilotkit/react-core/v2';
 import '@copilotkit/react-core/v2/styles.css';
 import { type FC, type PropsWithChildren, useMemo } from 'react';
 import type { AbstractAgent } from '@ag-ui/client';
 
+const renderToolCalls = [WildcardToolCallRender];
+
 export const AguiProvider: FC<PropsWithChildren> = ({ children }) => {
   const selfManagedAgents = useMemo<Record<string, AbstractAgent>>(
     () => ({}),
     [],
   );
 
   return (
-    <CopilotKitProvider selfManagedAgents={selfManagedAgents}>
+    <CopilotKitProvider
+      selfManagedAgents={selfManagedAgents}
+      renderToolCalls={renderToolCalls}
+    >
       {children}
     </CopilotKitProvider>
   );

packages/nx-plugin/src/ts/react-website/agui/files/shadcn/src/components/copilot/ShadcnAssistantMessage.tsx.template

@@ -27,6 +27,7 @@ import { cn } from '<%= scopeAlias %>common-shadcn/lib/utils';
  */
 export const ShadcnAssistantMessage: FC<CopilotChatAssistantMessageProps> = ({
   message,
+  messages,
 }) => {
   const hasContent = !!(message.content && message.content.trim().length > 0);
 
@@ -55,7 +56,7 @@ export const ShadcnAssistantMessage: FC<CopilotChatAssistantMessageProps> = ({
           />
         </div>
         {message.toolCalls && message.toolCalls.length > 0 && (
-          <CopilotChatToolCallsView message={message} />
+          <CopilotChatToolCallsView message={message} messages={messages} />
         )}
         {hasContent && (
           <div className="text-muted-foreground flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">