feat(ui): add configurable headline and subtitle via env vars

Add support for customizing the chat headline and landing page subtitle
through runtime environment variables, enabling enterprise deployments
to personalize the UI without forking.

- NEXT_PUBLIC_HEADLINE: replaces "Start a conversation" chat greeting
- NEXT_PUBLIC_SUBTITLE: optional tagline below "Agents" on landing page
- Add force-dynamic to layout.tsx for runtime env var support
- Convert [chatId]/page.tsx to server component for env var access

When env vars are not set, everything works exactly as before.

Closes #1345

Author: frank-bee

ui/src/app/agents/[namespace]/[name]/chat/[chatId]/page.tsx

@@ -1,13 +1,13 @@
-"use client";
-import { use } from "react";
 import ChatInterface from "@/components/chat/ChatInterface";
 
-export default function ChatPageView({ params }: { params: Promise<{ name: string; namespace: string; chatId: string }> }) {
-  const { name, namespace, chatId } = use(params);
+export default async function ChatPageView({ params }: { params: Promise<{ name: string; namespace: string; chatId: string }> }) {
+  const { name, namespace, chatId } = await params;
+  const headline = process.env.NEXT_PUBLIC_HEADLINE;
 
   return <ChatInterface
     selectedAgentName={name}
     selectedNamespace={namespace}
     sessionId={chatId}
+    headline={headline}
   />;
 }

ui/src/app/agents/[namespace]/[name]/chat/page.tsx

@@ -4,5 +4,6 @@ import { use } from 'react';
 // This page component receives props (like params) from the Layout
 export default function ChatAgentPage({ params }: { params: Promise<{ name: string, namespace: string }> }) {
   const { name, namespace } = use(params);
-  return <ChatInterface selectedAgentName={name} selectedNamespace={namespace} />;
+  const headline = process.env.NEXT_PUBLIC_HEADLINE;
+  return <ChatInterface selectedAgentName={name} selectedNamespace={namespace} headline={headline} />;
 }

ui/src/app/layout.tsx

@@ -14,6 +14,8 @@ const geistSans = Geist({
   subsets: ["latin"],
 });
 
+export const dynamic = "force-dynamic";
+
 export const metadata: Metadata = {
   title: "kagent.dev",
 };

ui/src/app/page.tsx

@@ -1,5 +1,6 @@
 import AgentList from "@/components/AgentList";
 
 export default async function AgentListPage() {
-  return <AgentList />;
+  const subtitle = process.env.NEXT_PUBLIC_SUBTITLE;
+  return <AgentList subtitle={subtitle} />;
 }

ui/src/components/AgentList.tsx

@@ -8,7 +8,7 @@ import { Button } from "./ui/button";
 import { LoadingState } from "./LoadingState";
 import { useAgents } from "./AgentsProvider";
 
-export default function AgentList() {
+export default function AgentList({ subtitle }: { subtitle?: string }) {
   const { agents , loading, error } = useAgents();
 
   if (error) {
@@ -22,8 +22,9 @@ export default function AgentList() {
   return (
     <div className="mt-12 mx-auto max-w-6xl px-6">
       <div className="flex justify-between items-center mb-8">
-        <div className="flex items-center gap-4">
+        <div className="flex flex-col gap-1">
           <h1 className="text-2xl font-bold">Agents</h1>
+          {subtitle && <p className="text-muted-foreground text-sm">{subtitle}</p>}
         </div>
       </div>
 

ui/src/components/chat/ChatInterface.tsx

@@ -33,9 +33,10 @@ interface ChatInterfaceProps {
   selectedNamespace: string;
   selectedSession?: Session | null;
   sessionId?: string;
+  headline?: string;
 }
 
-export default function ChatInterface({ selectedAgentName, selectedNamespace, selectedSession, sessionId }: ChatInterfaceProps) {
+export default function ChatInterface({ selectedAgentName, selectedNamespace, selectedSession, sessionId, headline }: ChatInterfaceProps) {
   const router = useRouter();
   const containerRef = useRef<HTMLDivElement>(null);
   const [currentInputMessage, setCurrentInputMessage] = useState("");
@@ -379,7 +380,7 @@ export default function ChatInterface({ selectedAgentName, selectedNamespace, se
             ) : storedMessages.length === 0 && streamingMessages.length === 0 && !isStreaming ? (
               <div className="flex items-center justify-center h-full min-h-[50vh]">
                 <div className="bg-card p-6 rounded-lg shadow-sm border max-w-md text-center">
-                  <h3 className="text-lg font-medium mb-2">Start a conversation</h3>
+                  <h3 className="text-lg font-medium mb-2">{headline || "Start a conversation"}</h3>
                   <p className="text-muted-foreground">
                     To begin chatting with the agent, type your message in the input box below.
                   </p>