Build Verse: a poem-quote app on the agent-native chat template

Adds a Postgres-backed quotes domain (poems/quotes/favorites) exposed as
five agent-native actions (list-quotes, get-random-quote, create-quote,
toggle-favorite, list-favorites) callable from both chat and the React UI
via useActionQuery/useActionMutation. Moves the primary UI from chat to a
mobile-first Quotes/Favorites experience (chat moves to /chat), adds
manual OpenTelemetry instrumentation exporting traces/metrics/logs over
OTLP, and wires a local Docker Postgres for shared state.

app/components/layout/Header.tsx

@@ -10,7 +10,9 @@ import { useLocation } from "react-router";
 import { APP_TITLE } from "@/lib/app-config";
 
 const pageTitleKeys: Record<string, string> = {
-  "/": "navigation.chat",
+  "/": "navigation.quotes",
+  "/favorites": "navigation.favorites",
+  "/chat": "navigation.chat",
   "/observability": "navigation.observability",
   "/agent": "settings.agentTitle",
   "/settings": "navigation.settings",

app/components/layout/Layout.tsx

@@ -38,7 +38,7 @@ const SIDEBAR_COLLAPSE_KEY = "chat.sidebar.collapsed";
  */
 function routeOwnsToolbar(pathname: string): boolean {
   return (
-    pathname === "/" ||
+    pathname === "/chat" ||
     pathname.startsWith("/chat/") ||
     pathname === "/database" ||
     pathname.startsWith("/extensions")
@@ -52,7 +52,7 @@ export function Layout({ children }: LayoutProps) {
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
   const isChatRoute =
-    location.pathname === "/" || location.pathname.startsWith("/chat/");
+    location.pathname === "/chat" || location.pathname.startsWith("/chat/");
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
     storageKey: "chat",
     activePath: location.pathname,
@@ -61,7 +61,7 @@ export function Layout({ children }: LayoutProps) {
   const chatHomeHandoffPending = isAgentChatHomeHandoffActive("chat");
   useAgentChatHomeHandoffLinks({
     storageKey: "chat",
-    isChatPath: (pathname) => pathname === "/" || pathname.startsWith("/chat/"),
+    isChatPath: (pathname) => pathname === "/chat" || pathname.startsWith("/chat/"),
     requireActiveHandoff: true,
   });
 
@@ -100,7 +100,7 @@ export function Layout({ children }: LayoutProps) {
   const ownsToolbar = routeOwnsToolbar(location.pathname);
   function openAskAgentFullscreen() {
     focusAgentChat();
-    navigateWithAgentChatViewTransition(navigate, "/");
+    navigateWithAgentChatViewTransition(navigate, "/chat");
   }
 
   const contentFrame = (

app/components/layout/Sidebar.tsx

@@ -14,6 +14,8 @@ import {
   type ChatHistoryItem,
 } from "@agent-native/toolkit/chat-history";
 import {
+  IconBooks,
+  IconHeart,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconMessageCircle,
@@ -33,10 +35,22 @@ import { APP_TITLE } from "@/lib/app-config";
 import { cn } from "@/lib/utils";
 
 const navItems = [
+  {
+    icon: IconBooks,
+    labelKey: "navigation.quotes",
+    href: "/",
+    view: "quotes",
+  },
+  {
+    icon: IconHeart,
+    labelKey: "navigation.favorites",
+    href: "/favorites",
+    view: "favorites",
+  },
   {
     icon: IconMessageCircle,
     labelKey: "navigation.chat",
-    href: "/",
+    href: "/chat",
     view: "chat",
   },
 ];
@@ -275,7 +289,7 @@ export function Sidebar({
   const navigate = useNavigate();
   const t = useT();
   const isChatRoute =
-    location.pathname === "/" || location.pathname.startsWith("/chat/");
+    location.pathname === "/chat" || location.pathname.startsWith("/chat/");
   const ToggleIcon = collapsed
     ? IconLayoutSidebarLeftExpand
     : IconLayoutSidebarLeftCollapse;
@@ -397,15 +411,17 @@ export function Sidebar({
           {navItems.map((item) => {
             const Icon = item.icon;
             const isActive =
-              item.href === "/"
+              item.href === "/chat"
                 ? isChatRoute
-                : location.pathname.startsWith(item.href);
+                : item.href === "/"
+                  ? location.pathname === "/"
+                  : location.pathname.startsWith(item.href);
             const link = (
               <Link
                 to={item.href}
                 onClick={(event) => {
                   if (
-                    item.href === "/" &&
+                    item.href === "/chat" &&
                     !isChatRoute &&
                     !event.metaKey &&
                     !event.ctrlKey &&
@@ -413,7 +429,7 @@ export function Sidebar({
                     !event.altKey
                   ) {
                     event.preventDefault();
-                    navigateWithAgentChatViewTransition(navigate, "/");
+                    navigateWithAgentChatViewTransition(navigate, "/chat");
                   }
                 }}
                 className={navClass({ isActive })}