feat(23-01): wire CopilotKit provider and navigation

Alex Holmberg · Alex Holmberg · commit ed5ef0ceddfc · 2026-01-25T05:10:51.000+01:00
- Wrapped app with CopilotKitWrapper in root layout
- Added navigation links between Smart Reply and Agent Chat
- Active route styling for visual feedback
diff --git a/tests/ag-ui-app/frontend/src/routes/__root.tsx b/tests/ag-ui-app/frontend/src/routes/__root.tsx
@@ -0,0 +1,52 @@
+import { HeadContent, Scripts, createRootRoute, Link } from '@tanstack/react-router'
+import appCss from '../styles.css?url'
+import { CopilotKitWrapper } from '../lib/copilotkit'
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: 'Smart Reply Generator' },
+      { name: 'description', content: 'AI-powered reply suggestions for your messages' },
+    ],
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      { rel: 'icon', href: '/favicon.ico' },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="bg-slate-950 antialiased">
+        {/* Navigation */}
+        <nav className="fixed top-4 right-4 z-50 flex gap-2">
+          <Link
+            to="/"
+            className="px-3 py-1.5 text-xs font-medium rounded-lg bg-slate-800/80 text-slate-300 hover:bg-slate-700 hover:text-white border border-slate-700 backdrop-blur-sm transition-all"
+            activeProps={{ className: 'bg-cyan-600/20 text-cyan-400 border-cyan-500/30' }}
+          >
+            Smart Reply
+          </Link>
+          <Link
+            to="/agent"
+            className="px-3 py-1.5 text-xs font-medium rounded-lg bg-slate-800/80 text-slate-300 hover:bg-slate-700 hover:text-white border border-slate-700 backdrop-blur-sm transition-all"
+            activeProps={{ className: 'bg-emerald-600/20 text-emerald-400 border-emerald-500/30' }}
+          >
+            Agent Chat
+          </Link>
+        </nav>
+        <CopilotKitWrapper>
+          {children}
+        </CopilotKitWrapper>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
diff --git a/tests/ag-ui-app/frontend/src/routes/agent.tsx b/tests/ag-ui-app/frontend/src/routes/agent.tsx
@@ -43,14 +43,14 @@ function AgentChat() {
   return (
     <main className="min-h-screen bg-slate-950 relative overflow-hidden">
       {/* Background */}
-      <div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950" />
+      <div className="absolute inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-slate-950" />
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(34,211,238,0.1),transparent_50%)]" />
 
       <div className="relative z-10 max-w-3xl mx-auto px-4 sm:px-6 py-12">
         {/* Header */}
         <header className="flex flex-col items-center text-center mb-8">
           <div className="flex items-center gap-3 mb-4">
-            <div className="p-3 rounded-2xl bg-gradient-to-br from-emerald-500/20 to-cyan-600/20 border border-emerald-500/30 shadow-[0_0_30px_rgba(16,185,129,0.15)]">
+            <div className="p-3 rounded-2xl bg-linear-to-br from-emerald-500/20 to-cyan-600/20 border border-emerald-500/30 shadow-[0_0_30px_rgba(16,185,129,0.15)]">
               <Bot className="w-8 h-8 text-emerald-400" />
             </div>
             <h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-400 bg-clip-text text-transparent">
