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.
2026-07-25 17:42:04 +00:00
parent ffea2aeff7
commit 0a18c774a5
44 changed files with 14702 additions and 156 deletions
@@ -0,0 +1,59 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { IconHeart } from "@tabler/icons-react";
+
+import { QuoteCard } from "@/components/quotes/QuoteCard";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useVisitorId } from "@/lib/visitor-id";
+
+export function meta() {
+  return [{ title: "Favorites — Verse" }];
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
+    </div>
+  );
+}
+
+export default function FavoritesRoute() {
+  const visitorId = useVisitorId();
+  const { data: quotes, isLoading } = useActionQuery(
+    "list-favorites",
+    { visitorId },
+    { enabled: Boolean(visitorId) },
+  );
+
+  return (
+    <div className="mx-auto flex max-w-4xl flex-col gap-6 p-4 sm:p-6">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-semibold tracking-tight">Favorites</h1>
+        <p className="text-sm text-muted-foreground">
+          Quotes you've saved on this device.
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 sm:grid-cols-2">
+          {Array.from({ length: 2 }).map((_, i) => (
+            <Skeleton key={i} className="h-48 w-full" />
+          ))}
+        </div>
+      ) : !quotes || quotes.length === 0 ? (
+        <div className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
+          <IconHeart className="size-8" />
+          <p className="text-sm">
+            No favorites yet — tap the heart on any quote to save it here.
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-2">
+          {quotes.map((quote) => (
+            <QuoteCard key={quote.id} quote={quote} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}