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,95 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { IconHeart, IconHeartFilled } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { useVisitorId } from "@/lib/visitor-id";
+
+export type QuoteCardData = {
+  id: number;
+  text: string;
+  tags: string[];
+  poem: {
+    title: string;
+    author: string;
+    source: string | null;
+    year: number | null;
+  };
+  favoriteCount: number;
+  isFavorited: boolean;
+};
+
+interface QuoteCardProps {
+  quote: QuoteCardData;
+  onTagClick?: (tag: string) => void;
+  className?: string;
+}
+
+export function QuoteCard({ quote, onTagClick, className }: QuoteCardProps) {
+  const visitorId = useVisitorId();
+  const [optimistic, setOptimistic] = useState<{ favorited: boolean; count: number } | null>(
+    null,
+  );
+  const { mutate, isPending } = useActionMutation("toggle-favorite", {
+    onSuccess: (result) => {
+      setOptimistic({ favorited: result.favorited, count: result.favoriteCount });
+    },
+    onError: () => setOptimistic(null),
+  });
+
+  const favorited = optimistic?.favorited ?? quote.isFavorited;
+  const count = optimistic?.count ?? quote.favoriteCount;
+
+  return (
+    <Card className={cn("flex h-full flex-col justify-between", className)}>
+      <CardContent className="pt-6">
+        <blockquote className="text-balance text-lg leading-relaxed font-medium text-foreground">
+          “{quote.text}”
+        </blockquote>
+        <p className="mt-4 text-sm text-muted-foreground">
+          — {quote.poem.author}, <span className="italic">{quote.poem.title}</span>
+          {quote.poem.year ? ` (${quote.poem.year})` : ""}
+        </p>
+        {quote.tags.length > 0 && (
+          <div className="mt-4 flex flex-wrap gap-1.5">
+            {quote.tags.map((tag) => (
+              <Badge
+                key={tag}
+                variant="secondary"
+                className={cn(onTagClick && "cursor-pointer hover:bg-secondary/70")}
+                onClick={() => onTagClick?.(tag)}
+              >
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+      </CardContent>
+      <CardFooter className="flex items-center justify-between border-t pt-4">
+        <span className="text-xs text-muted-foreground">
+          {count} {count === 1 ? "favorite" : "favorites"}
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          disabled={isPending || !visitorId}
+          onClick={() => mutate({ quoteId: quote.id, visitorId })}
+          aria-pressed={favorited}
+          aria-label={favorited ? "Remove from favorites" : "Add to favorites"}
+          className={cn("gap-1.5", favorited && "text-rose-500 hover:text-rose-500")}
+        >
+          {favorited ? (
+            <IconHeartFilled className="size-4" />
+          ) : (
+            <IconHeart className="size-4" />
+          )}
+          {favorited ? "Favorited" : "Favorite"}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}