P14:[{"_351":70,"_352":67,"_353":354},"app1","app2","diffPatch","diff --git a/app/components/compare-button.tsx b/app/components/compare-button.tsx\nnew file mode 100644\nindex 0000000..50b06e6\n--- /dev/null\n+++ b/app/components/compare-button.tsx\n@@ -0,0 +1,22 @@\n+import { GitCompare } from 'lucide-react'\n+import { Link } from 'react-router'\n+import { useCompare } from '#app/contexts/compare.tsx'\n+\n+export function CompareButton() {\n+\tconst { count, isHydrated } = useCompare()\n+\tconst displayCount = isHydrated ? count : 0\n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t{displayCount > 0 ? (\n+\t\t\t\t\n+\t\t\t\t\t{displayCount > 99 ? '99+' : displayCount}\n+\t\t\t\t\n+\t\t\t) : null}\n+\t\t\n+\t)\n+}\ndiff --git a/app/components/comparison-chat.tsx b/app/components/comparison-chat.tsx\nnew file mode 100644\nindex 0000000..3a6c6e3\n--- /dev/null\n+++ b/app/components/comparison-chat.tsx\n@@ -0,0 +1,96 @@\n+import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'\n+import { Loader2, Send } from 'lucide-react'\n+import { useState } from 'react'\n+import { ComparisonTable } from '#app/components/comparison-table.tsx'\n+import { ComparisonSchema } from '#app/schemas/comparison.ts'\n+\n+type ProductSummary = {\n+\tid: string\n+\tname: string\n+\tbrand: { name: string }\n+\timageUrl: string\n+\tprice: number\n+}\n+\n+export function ComparisonChat({\n+\tproducts,\n+}: {\n+\tproducts: Array\n+}) {\n+\tconst productIds = products.map((p) => p.id)\n+\tconst [draft, setDraft] = useState('')\n+\n+\t// 🐨 Tell `useChat` the assistant's reply will conform to ComparisonSchema.\n+\t// Once you pass `outputSchema`, the hook exposes a new field on its\n+\t// return value: `final` — the validated comparison object, or `null`\n+\t// until the model finishes. (There is also a `partial` field that\n+\t// streams in as tokens arrive — you'll use that in the next exercise.)\n+\t//\n+\t// 💰 Add `outputSchema: ComparisonSchema` to the options object below,\n+\t// and destructure `final` alongside `sendMessage` and `isLoading`.\n+\tconst { sendMessage, isLoading } = useChat({\n+\t\tconnection: fetchServerSentEvents('/api/compare'),\n+\t\tforwardedProps: { productIds },\n+\t})\n+\tvoid ComparisonSchema\n+\n+\t// 🐨 The card below shows the empty/loading state. Add a branch that\n+\t// renders ``\n+\t// whenever `final` is set. The render order should be:\n+\t// 1. `final` exists → table\n+\t// 2. `isLoading` → spinner\n+\t// 3. otherwise → empty prompt\n+\tconst final = null as null\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t{final ? null : isLoading ? (\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tReading reviews and weighing your options…\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tThis can take 20–30 seconds while the model writes the whole comparison.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t) : (\n+\t\t\t\t\t

\n+\t\t\t\t\t\tAsk a question below to compare these products.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tTry \"What's the best value for the money?\" or \"Which is most durable?\"\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t)}\n+\t\t\t

\n+\n+\t\t\t {\n+\t\t\t\t\tevent.preventDefault()\n+\t\t\t\t\tif (!draft.trim() || isLoading) return\n+\t\t\t\t\tvoid sendMessage(draft)\n+\t\t\t\t\tsetDraft('')\n+\t\t\t\t}}\n+\t\t\t\tclassName=\"flex items-center gap-2 rounded-full border border-stone-200 bg-white p-2 shadow-sm dark:border-gray-700 dark:bg-gray-800\"\n+\t\t\t>\n+\t\t\t\t setDraft(e.target.value)}\n+\t\t\t\t\tplaceholder=\"What matters most to you?\"\n+\t\t\t\t\tdisabled={isLoading}\n+\t\t\t\t\tclassName=\"flex-1 bg-transparent px-3 py-2 text-sm text-gray-700 placeholder-gray-400 focus:outline-none disabled:opacity-60 dark:text-gray-200\"\n+\t\t\t\t/>\n+\t\t\t\t\n+\t\t\t\t\t\n+\t\t\t\t\n+\t\t\t\n+\t\t

\n+\t)\n+}\ndiff --git a/app/components/comparison-table.tsx b/app/components/comparison-table.tsx\nnew file mode 100644\nindex 0000000..15c92f3\n--- /dev/null\n+++ b/app/components/comparison-table.tsx\n@@ -0,0 +1,130 @@\n+import { Award, Minus, Trophy } from 'lucide-react'\n+import { type Comparison } from '#app/schemas/comparison.ts'\n+\n+type ProductSummary = {\n+\tid: string\n+\tname: string\n+\tbrand: { name: string }\n+\timageUrl: string\n+\tprice: number\n+}\n+\n+export function ComparisonTable({\n+\tcomparison,\n+\tproducts,\n+}: {\n+\tcomparison: Comparison\n+\tproducts: Array\n+}) {\n+\tconst productById = new Map(products.map((p) => [p.id, p]))\n+\tconst orderedRankings = [...comparison.rankings].sort(\n+\t\t(a, b) => a.rank - b.rank,\n+\t)\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tComparing for: {comparison.criteria}\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t{comparison.summary}\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tRankings\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t{isWinner ? : `#${r.rank}`}\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t{product?.name ?? r.productId}\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t{product?.brand.name}\n+\t\t\t\t\t\t\t\t\t\t{product ? ` · $${product.price}` : null}\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t{r.reason}\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t)\n+\t\t\t\t\t})}\n+\t\t\t\t

\n+\t\t\t

\n+\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\tDimensions\n+\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t{products.map((p) => (\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t{p.name}\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{comparison.dimensions.map((d) => (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t{products.map((p) => {\n+\t\t\t\t\t\t\t\t\t\tconst cell = d.values.find((v) => v.productId === p.id)\n+\t\t\t\t\t\t\t\t\t\tconst hasEdge = d.edge === p.id\n+\t\t\t\t\t\t\t\t\t\treturn (\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{hasEdge ? (\n+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\t\t\t) : null}\n+\t\t\t\t\t\t\t\t\t\t\t\t\t{cell?.value ?? }\n+\t\t\t\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t)\n+\t\t\t\t\t\t\t\t\t})}\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tDimension\n+\t\t\t\t\t\t\t\t
\n+\t\t\t\t\t\t\t\t\t\t{d.name}\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t

\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/components/header.tsx b/app/components/header.tsx\nindex 639b713..28379b3 100644\n--- a/app/components/header.tsx\n+++ b/app/components/header.tsx\n@@ -2,6 +2,7 @@ import { ShoppingBag, Search, Menu, X } from 'lucide-react'\n import { useState } from 'react'\n import { Link, useLocation, Form, useSearchParams } from 'react-router'\n import { CartButton } from './cart-button'\n+import { CompareButton } from './compare-button'\n \n export const Header = () => {\n \tconst [isMenuOpen, setIsMenuOpen] = useState(false)\n@@ -73,11 +74,13 @@ export const Header = () => {\n \t\t\t\t\t\t\t\t\t{item.name}\n \t\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t\n \t\t\t\t\t\t\t\n \t\t\t\t\t\t\n \t\t\t\t\t\n \n \t\t\t\t\t

\n+\t\t\t\t\t\t\n \t\t\t\t\t\t\n \t\t\t\t\t\t setIsMenuOpen(!isMenuOpen)}\ndiff --git a/app/components/product-card.tsx b/app/components/product-card.tsx\nindex b43c877..2365810 100644\n--- a/app/components/product-card.tsx\n+++ b/app/components/product-card.tsx\n@@ -1,8 +1,12 @@\n-import { Heart, Star } from 'lucide-react'\n+import { Check, GitCompare, Heart, Star } from 'lucide-react'\n import { Link } from 'react-router'\n+import { useCompare } from '#app/contexts/compare.tsx'\n import { type ProductCardInfo } from '#app/domain/products.server.js'\n \n export function ProductCard({ product }: { product: ProductCardInfo }) {\n+\tconst compare = useCompare()\n+\tconst inCompare = compare.isHydrated && compare.has(product.id)\n+\n \treturn (\n \t\t\n \t\t\t\t\n-\t\t\t\t\n+\t\t\t\t\t compare.toggle(product.id)}\n+\t\t\t\t\t\taria-pressed={inCompare}\n+\t\t\t\t\t\taria-label={inCompare ? 'Remove from comparison' : 'Compare'}\n+\t\t\t\t\t\ttitle={inCompare ? 'In comparison — click to remove' : 'Compare'}\n+\t\t\t\t\t\tclassName={`rounded-full p-2 shadow-lg transition-colors duration-200 ${\n+\t\t\t\t\t\t\tinCompare\n+\t\t\t\t\t\t\t\t? 'bg-amber-600 text-white hover:bg-amber-700'\n+\t\t\t\t\t\t\t\t: 'bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800'\n+\t\t\t\t\t\t}`}\n+\t\t\t\t\t>\n+\t\t\t\t\t\t{inCompare ? (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t)}\n+\t\t\t\t\t\n+\t\t\t\t

\n \t\t\t\t

\n \t\t\t\t\t

\n \t\t\t\t\t\t\ndiff --git a/app/contexts/compare.tsx b/app/contexts/compare.tsx\nnew file mode 100644\nindex 0000000..ab5f5d0\n--- /dev/null\n+++ b/app/contexts/compare.tsx\n@@ -0,0 +1,102 @@\n+import {\n+\tcreateContext,\n+\tuseCallback,\n+\tuseContext,\n+\tuseEffect,\n+\tuseMemo,\n+\tuseState,\n+\ttype ReactNode,\n+} from 'react'\n+\n+type CompareContextValue = {\n+\t/** The current set of product IDs the customer is comparing, in insertion order. */\n+\tids: Array\n+\t/** Toggle a product's membership in the compare list. */\n+\ttoggle: (id: string) => void\n+\t/** Add a product to the compare list (no-op if already present). */\n+\tadd: (id: string) => void\n+\t/** Remove a product from the compare list (no-op if not present). */\n+\tremove: (id: string) => void\n+\t/** Whether a product is in the compare list. */\n+\thas: (id: string) => boolean\n+\t/** Empty the compare list. */\n+\tclear: () => void\n+\t/** Convenience accessor for `ids.length`. */\n+\tcount: number\n+\t/**\n+\t * Whether the provider has finished reading localStorage. Use this to\n+\t * avoid SSR/CSR mismatches — render a neutral state while `false`.\n+\t */\n+\tisHydrated: boolean\n+}\n+\n+const CompareContext = createContext(null)\n+\n+const STORAGE_KEY = 'epicstore.compare.v1'\n+\n+export function CompareProvider({ children }: { children: ReactNode }) {\n+\tconst [ids, setIds] = useState>([])\n+\tconst [isHydrated, setIsHydrated] = useState(false)\n+\n+\tuseEffect(() => {\n+\t\ttry {\n+\t\t\tconst raw = window.localStorage.getItem(STORAGE_KEY)\n+\t\t\tif (raw) {\n+\t\t\t\tconst parsed: unknown = JSON.parse(raw)\n+\t\t\t\tif (Array.isArray(parsed)) {\n+\t\t\t\t\tsetIds(parsed.filter((x): x is string => typeof x === 'string'))\n+\t\t\t\t}\n+\t\t\t}\n+\t\t} catch {\n+\t\t\t// ignore — fall back to empty list\n+\t\t}\n+\t\tsetIsHydrated(true)\n+\t}, [])\n+\n+\tuseEffect(() => {\n+\t\tif (!isHydrated) return\n+\t\ttry {\n+\t\t\twindow.localStorage.setItem(STORAGE_KEY, JSON.stringify(ids))\n+\t\t} catch {\n+\t\t\t// ignore — storage may be unavailable\n+\t\t}\n+\t}, [ids, isHydrated])\n+\n+\tconst add = useCallback((id: string) => {\n+\t\tsetIds((prev) => (prev.includes(id) ? prev : [...prev, id]))\n+\t}, [])\n+\n+\tconst remove = useCallback((id: string) => {\n+\t\tsetIds((prev) => prev.filter((existing) => existing !== id))\n+\t}, [])\n+\n+\tconst toggle = useCallback((id: string) => {\n+\t\tsetIds((prev) =>\n+\t\t\tprev.includes(id) ? prev.filter((existing) => existing !== id) : [...prev, id],\n+\t\t)\n+\t}, [])\n+\n+\tconst clear = useCallback(() => setIds([]), [])\n+\n+\tconst value = useMemo(\n+\t\t() => ({\n+\t\t\tids,\n+\t\t\ttoggle,\n+\t\t\tadd,\n+\t\t\tremove,\n+\t\t\thas: (id) => ids.includes(id),\n+\t\t\tclear,\n+\t\t\tcount: ids.length,\n+\t\t\tisHydrated,\n+\t\t}),\n+\t\t[ids, toggle, add, remove, clear, isHydrated],\n+\t)\n+\n+\treturn {children}\n+}\n+\n+export function useCompare() {\n+\tconst ctx = useContext(CompareContext)\n+\tif (!ctx) throw new Error('useCompare must be used inside ')\n+\treturn ctx\n+}\ndiff --git a/app/prompts/comparison.ts b/app/prompts/comparison.ts\nnew file mode 100644\nindex 0000000..7b481ec\n--- /dev/null\n+++ b/app/prompts/comparison.ts\n@@ -0,0 +1,26 @@\n+import { type Product } from '#app/prompts/system.ts'\n+\n+export const COMPARISON_SYSTEM_PROMPT = `You are EpicStore's product comparison specialist. You help customers decide between products by returning a structured, side-by-side comparison.\n+\n+Rules:\n+- You will be given the products the customer is currently comparing. Use those productIds in your output — include every product you were given in your \\`rankings\\`.\n+- The customer may steer the comparison (\"rank by price-to-quality ratio\", \"I care most about durability\"). Reflect what they asked for in the \\`criteria\\` field, in their own words.\n+- If the customer has not stated a preference yet, set \\`criteria\\` to \"Overall comparison\".\n+- Only compare on dimensions that actually matter for the stated criteria. Do not enumerate every spec.\n+- Never invent products, attributes, prices, or stock. If you do not know an attribute, use a tool to look it up or omit the dimension.\n+- The customer manages which products are in the comparison from the UI — do not invent new ones in your output. If they ask about a product that is not on the list, tell them to add it from the page and then re-run the comparison.\n+- The \\`summary\\` is a verdict, not a recap of the table. One or two sentences, plain language.`\n+\n+export function buildComparisonPrompt(products: Array): string {\n+\tconst productLines = products\n+\t\t.map(\n+\t\t\t(p) =>\n+\t\t\t\t`- ${p.name} (id: ${p.id}, brand: ${p.brand.name}, $${p.price}, rated ${p.reviewScore}/5)\\n ${p.description}`,\n+\t\t)\n+\t\t.join('\\n')\n+\n+\treturn `The customer is comparing these products:\n+${productLines}\n+\n+Use \\`searchProducts\\` or \\`findSimilarProducts\\` if you need attributes that are not listed above. Stick to the productIds shown when filling out \\`rankings\\` and \\`dimensions[].values[].productId\\`.`\n+}\ndiff --git a/app/root.tsx b/app/root.tsx\nindex 957c221..ff0af68 100644\n--- a/app/root.tsx\n+++ b/app/root.tsx\n@@ -7,6 +7,7 @@ import {\n \tScrollRestoration,\n } from 'react-router'\n import { CartProvider } from '#app/contexts/cart.js'\n+import { CompareProvider } from '#app/contexts/compare.tsx'\n import { type Route } from './+types/root'\n import tailwindStylesheet from './app.css?url'\n import { EpicShop } from './epicshop'\n@@ -56,7 +57,9 @@ export function Layout({ children }: { children: React.ReactNode }) {\n export default function App() {\n \treturn (\n \t\t\n+\t\t\t\n \t\t\t\t\n+\t\t\t\n \t\t\n \t)\n }\ndiff --git a/app/routes/_landing/compare.tsx b/app/routes/_landing/compare.tsx\nnew file mode 100644\nindex 0000000..4ca1724\n--- /dev/null\n+++ b/app/routes/_landing/compare.tsx\n@@ -0,0 +1,152 @@\n+import { Loader2, X } from 'lucide-react'\n+import { useEffect, useState } from 'react'\n+import { Link } from 'react-router'\n+import { ComparisonChat } from '#app/components/comparison-chat.tsx'\n+import { ProductCard } from '#app/components/product-card.tsx'\n+import { useCompare } from '#app/contexts/compare.tsx'\n+import { type ProductCardInfo } from '#app/domain/products.server.js'\n+import {\n+\tconstructPrefixedTitle,\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/compare'\n+\n+type CompareData = {\n+\tproducts: Array\n+\tsuggestions: Array\n+}\n+\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\tconst rootMeta = getMetaFromMatches(matches, 'root')\n+\tconst prefix = getMetaTitle(rootMeta)\n+\treturn [\n+\t\t{\n+\t\t\ttitle: constructPrefixedTitle('Compare products', prefix),\n+\t\t},\n+\t]\n+}\n+\n+export default function ComparePage() {\n+\tconst compare = useCompare()\n+\tconst [data, setData] = useState(null)\n+\tconst [fetching, setFetching] = useState(false)\n+\n+\tuseEffect(() => {\n+\t\tif (!compare.isHydrated) return\n+\t\tconst controller = new AbortController()\n+\t\tsetFetching(true)\n+\t\tfetch(`/api/compare-data?ids=${compare.ids.join(',')}`, {\n+\t\t\tsignal: controller.signal,\n+\t\t})\n+\t\t\t.then((r) => r.json() as Promise)\n+\t\t\t.then(setData)\n+\t\t\t.catch((error) => {\n+\t\t\t\tif (error.name !== 'AbortError') throw error\n+\t\t\t})\n+\t\t\t.finally(() => setFetching(false))\n+\t\treturn () => controller.abort()\n+\t}, [compare.isHydrated, compare.ids])\n+\n+\tif (!compare.isHydrated || (data === null && fetching)) {\n+\t\treturn (\n+\t\t\t

\n+\t\t\t\t\n+\t\t\t

\n+\t\t)\n+\t}\n+\n+\tconst products = data?.products ?? []\n+\tconst suggestions = data?.suggestions ?? []\n+\tconst hasEnoughToCompare = products.length >= 2\n+\n+\treturn (\n+\t\t

\n+\t\t\t

\n+\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\tCompare products\n+\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\t{products.length} in comparison\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t{products.length > 0 ? (\n+\t\t\t\t\t\t\t compare.clear()}\n+\t\t\t\t\t\t\t\tclassName=\"text-xs text-gray-500 underline hover:text-amber-600 dark:text-gray-400\"\n+\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\tClear all\n+\t\t\t\t\t\t\t\n+\t\t\t\t\t\t) : null}\n+\t\t\t\t\t

\n+\t\t\t\t

\n+\n+\t\t\t\t{products.length === 0 ? (\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tYour comparison is empty.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tClick Add to compare on any product to start.\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tBrowse products\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n+\t\t\t\t) : (\n+\t\t\t\t\t<>\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tIn your comparison\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t{products.map((p) => (\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\t\t compare.remove(p.id)}\n+\t\t\t\t\t\t\t\t\t\t\taria-label={`Remove ${p.name} from comparison`}\n+\t\t\t\t\t\t\t\t\t\t\tclassName=\"absolute top-2 right-2 z-10 flex h-7 w-7 items-center justify-center rounded-full bg-white/95 text-gray-500 shadow-sm transition-colors hover:bg-red-50 hover:text-red-600 dark:bg-gray-800 dark:text-gray-300\"\n+\t\t\t\t\t\t\t\t\t\t>\n+\t\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\n+\t\t\t\t\t\t{hasEnoughToCompare ? (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\tSide-by-side\n+\t\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t) : (\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t\tAdd at least one more product to start comparing.\n+\t\t\t\t\t\t\t

\n+\t\t\t\t\t\t)}\n+\t\t\t\t\t\n+\t\t\t\t)}\n+\n+\t\t\t\t{suggestions.length > 0 ? (\n+\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\tSimilar products to compare against\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t

\n+\t\t\t\t\t\t\t{suggestions.map((p) => (\n+\t\t\t\t\t\t\t\t\n+\t\t\t\t\t\t\t))}\n+\t\t\t\t\t\t

\n+\t\t\t\t\t

\n+\t\t\t\t) : null}\n+\t\t\t

\n+\t\t

\n+\t)\n+}\ndiff --git a/app/routes/_landing/products/$productId.tsx b/app/routes/_landing/products/$productId.tsx\nindex c25c69e..405f3ec 100644\n--- a/app/routes/_landing/products/$productId.tsx\n+++ b/app/routes/_landing/products/$productId.tsx\n@@ -7,11 +7,14 @@ import {\n \tRefreshCw,\r\n \tPlus,\r\n \tMinus,\r\n+\tCheck,\r\n+\tGitCompare,\r\n } from 'lucide-react'\r\n import { useState } from 'react'\r\n import { Link } from 'react-router'\r\n import { ProductCard } from '#app/components/product-card.js'\r\n import { useCart } from '#app/contexts/cart.js'\r\n+import { useCompare } from '#app/contexts/compare.tsx'\r\n import {\r\n \tgetProductById,\r\n \tgetRelatedProducts,\r\n@@ -57,6 +60,9 @@ export default function ProductDetailPage({\n \tconst [quantity, setQuantity] = useState(1)\r\n \tconst [activeImage, setActiveImage] = useState(0)\r\n \tconst cart = useCart()\r\n+\tconst compare = useCompare()\r\n+\tconst inCompare =\r\n+\t\tcompare.isHydrated && product ? compare.has(product.id) : false\r\n \r\n \tif (!product) {\r\n \t\treturn (\r\n@@ -263,9 +269,32 @@ export default function ProductDetailPage({\n \t\t\t\t\t\t\t>\r\n \t\t\t\t\t\t\t\tAdd to Cart\r\n \t\t\t\t\t\t\t\r\n-\t\t\t\t\t\t\t\r\n+\t\t\t\t\t\t\t compare.toggle(product.id)}\r\n+\t\t\t\t\t\t\t\taria-pressed={inCompare}\r\n+\t\t\t\t\t\t\t\taria-label={inCompare ? 'Remove from comparison' : 'Compare'}\r\n+\t\t\t\t\t\t\t\ttitle={inCompare ? 'In comparison — click to remove' : 'Compare'}\r\n+\t\t\t\t\t\t\t\tclassName={`rounded-lg border p-4 transition-colors duration-200 ${\r\n+\t\t\t\t\t\t\t\t\tinCompare\r\n+\t\t\t\t\t\t\t\t\t\t? 'border-amber-500 bg-amber-100 text-amber-700 hover:bg-amber-200 dark:border-amber-600 dark:bg-amber-900 dark:text-amber-200'\r\n+\t\t\t\t\t\t\t\t\t\t: 'border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800'\r\n+\t\t\t\t\t\t\t\t}`}\r\n+\t\t\t\t\t\t\t>\r\n+\t\t\t\t\t\t\t\t{inCompare ? (\r\n+\t\t\t\t\t\t\t\t\t\r\n+\t\t\t\t\t\t\t\t) : (\r\n+\t\t\t\t\t\t\t\t\t\r\n+\t\t\t\t\t\t\t\t)}\r\n+\t\t\t\t\t\t\t\r\n \t\t\t\t\t\t

\r\n \r\n \t\t\t\t\t\t{/* Features */}\r\ndiff --git a/app/routes/api.chat.tsx b/app/routes/api.chat.tsx\nindex 6d2bd1b..79c7d47 100644\n--- a/app/routes/api.chat.tsx\n+++ b/app/routes/api.chat.tsx\n@@ -67,7 +67,6 @@ export const action = async ({ request }: Route.ActionArgs) => {\n \t\t\tsubscribeToRestock,\n \t\t\tgetShippingEstimate,\n \t\t],\n-\t\treasoning: 'medium',\n \t})\n \treturn toServerSentEventsResponse(stream)\n }\ndiff --git a/app/routes/api.compare-data.tsx b/app/routes/api.compare-data.tsx\nnew file mode 100644\nindex 0000000..af21ea9\n--- /dev/null\n+++ b/app/routes/api.compare-data.tsx\n@@ -0,0 +1,59 @@\n+import {\n+\tgetProductById,\n+\tgetProducts,\n+\tgetRelatedProducts,\n+} from '#app/domain/products.server.ts'\n+import { type Route } from './+types/api.compare-data'\n+\n+/**\n+ * Server-side data for the compare page. Takes a comma-separated `ids`\n+ * query string and returns:\n+ *\n+ * - `products`: the products being compared, in the order requested\n+ * (with unknown ids filtered out)\n+ * - `suggestions`: related products the customer might also want to\n+ * compare, anchored on the first product in the list. Falls back to\n+ * top-rated products from the catalog if no `ids` are provided.\n+ *\n+ * The compare page reads its product IDs from `useCompare()` (localStorage),\n+ * so it can't be server-loaded by the route — it fetches this endpoint\n+ * on the client whenever the compare list changes.\n+ */\n+export const loader = async ({ request }: Route.LoaderArgs) => {\n+\tconst url = new URL(request.url)\n+\tconst ids = (url.searchParams.get('ids') ?? '')\n+\t\t.split(',')\n+\t\t.map((id) => id.trim())\n+\t\t.filter(Boolean)\n+\n+\tconst loadedRaw = await Promise.all(ids.map((id) => getProductById(id)))\n+\tconst loaded = loadedRaw.filter((p): p is NonNullable => p !== null)\n+\tconst products = loaded.map((p) => ({\n+\t\tid: p.id,\n+\t\tname: p.name,\n+\t\tdescription: p.description,\n+\t\timageUrl: p.imageUrl,\n+\t\tprice: p.price,\n+\t\treviewScore: p.reviewScore,\n+\t\tbrand: { id: p.brand.id, name: p.brand.name },\n+\t\t_count: { reviews: p.reviews.length },\n+\t}))\n+\n+\tconst selectedIds = new Set(products.map((p) => p.id))\n+\n+\tlet suggestions: Array = []\n+\tconst anchor = loaded[0]\n+\tif (anchor) {\n+\t\tconst related = await getRelatedProducts(\n+\t\t\tanchor.id,\n+\t\t\tanchor.category.id,\n+\t\t\tanchor.brand.id,\n+\t\t)\n+\t\tsuggestions = related.filter((p) => !selectedIds.has(p.id))\n+\t} else {\n+\t\tconst { products: top } = await getProducts({ sortBy: 'rating', limit: 8 })\n+\t\tsuggestions = top.filter((p) => !selectedIds.has(p.id))\n+\t}\n+\n+\treturn Response.json({ products, suggestions })\n+}\ndiff --git a/app/routes/api.compare.tsx b/app/routes/api.compare.tsx\nnew file mode 100644\nindex 0000000..686e2f3\n--- /dev/null\n+++ b/app/routes/api.compare.tsx\n@@ -0,0 +1,62 @@\n+import { chat, chatParamsFromRequest, toServerSentEventsResponse } from '@tanstack/ai'\n+import { openRouterText } from '@tanstack/ai-openrouter'\n+import { getProductById } from '#app/domain/products.server.ts'\n+import {\n+\tCOMPARISON_SYSTEM_PROMPT,\n+\tbuildComparisonPrompt,\n+} from '#app/prompts/comparison.ts'\n+import { CompareForwardedProps } from '#app/schemas/chat.js'\n+import { ComparisonSchema } from '#app/schemas/comparison.ts'\n+import {\n+\tfindSimilarProducts,\n+\tsearchProducts,\n+} from '#app/tools/products.ts'\n+import { type Route } from './+types/api.compare'\n+\n+const adapter = openRouterText('nvidia/nemotron-3-super-120b-a12b:free')\n+\n+export const action = async ({ request }: Route.ActionArgs) => {\n+\tconst { messages, forwardedProps } = await chatParamsFromRequest(request)\n+\tconst props = CompareForwardedProps.safeParse(forwardedProps)\n+\tif (!props.success) {\n+\t\treturn new Response(props.error.message, { status: 400 })\n+\t}\n+\n+\tconst products = (\n+\t\tawait Promise.all(props.data.productIds.map((id) => getProductById(id)))\n+\t).filter((p): p is NonNullable => p !== null)\n+\n+\tif (products.length === 0) {\n+\t\treturn new Response('No valid products to compare.', { status: 400 })\n+\t}\n+\n+\tconst systemPrompts = [\n+\t\tCOMPARISON_SYSTEM_PROMPT,\n+\t\tbuildComparisonPrompt(products),\n+\t]\n+\n+\t// 🐨 Constrain the model's reply to `ComparisonSchema`, and stream the\n+\t// structured output back over SSE.\n+\t//\n+\t// Two options to add to the `chat({...})` call below:\n+\t// - `outputSchema`: the Zod schema the model must conform to.\n+\t// - `stream`: set to `true`. Without this, `chat()` resolves to a\n+\t// single `Promise` after the whole response is validated —\n+\t// useful for non-streaming jobs, but `useChat` needs SSE.\n+\t//\n+\t// 💰 The schema is already imported above as `ComparisonSchema`.\n+\tconst stream = chat({\n+\t\tadapter,\n+\t\tsystemPrompts,\n+\t\tmessages,\n+\t\ttools: [searchProducts, findSimilarProducts],\n+\t})\n+\t// 🦉 The agent loop runs first (so the model can call `searchProducts` /\n+\t// `findSimilarProducts` to look up product attributes), and only\n+\t// after all tool calls complete does the structured output start\n+\t// streaming. You don't need to wire that yourself — it's automatic\n+\t// once `outputSchema` and `tools` are both set.\n+\tvoid ComparisonSchema\n+\n+\treturn toServerSentEventsResponse(stream)\n+}\ndiff --git a/app/schemas/chat.ts b/app/schemas/chat.ts\nindex f54f51d..4ea365a 100644\n--- a/app/schemas/chat.ts\n+++ b/app/schemas/chat.ts\n@@ -11,9 +11,19 @@\n * listing page, where the customer is not looking at a specific product. In\n * that case the server falls back to the global system prompt only.\n *\n- * You won't author this schema in the workshop — it's part of the\n- * scaffolding so the focus stays on TanStack AI.\n+ * Pre-built — you'll use it but won't author it.\n */\n export const PageForwardedProps = z.object({\n \tproductId: z.string().min(1).optional(),\n })\n+\n+/**\n+ * Validates `forwardedProps` for the `/compare` page. The customer drives\n+ * the list size from there; we require at least one product so the server\n+ * can always build the system prompt.\n+ *\n+ * Also pre-built.\n+ */\n+export const CompareForwardedProps = z.object({\n+\tproductIds: z.array(z.string().min(1)).min(1),\n+})\n\\ No newline at end of file\ndiff --git a/app/schemas/comparison.ts b/app/schemas/comparison.ts\nnew file mode 100644\nindex 0000000..56c36d9\n--- /dev/null\n+++ b/app/schemas/comparison.ts\n@@ -0,0 +1,89 @@\n+import { z } from 'zod'\n+\n+/**\n+ * The shape the model writes into on every comparison turn.\n+ *\n+ * The shape is sketched in — every field already has the right type. But the\n+ * model only ever sees the JSON Schema generated from this file, so a bare\n+ * `z.string()` tells it nothing about what to write. Two things turn this\n+ * shape into something the model can act on:\n+ *\n+ * 1. Descriptions — the `.describe(...)` calls are prompt engineering. They\n+ * ship to the model inside the JSON Schema and tell it what each field is\n+ * for and how to format it.\n+ * 2. Constraints — `.min(...)`, `.int()`, `.nullable()` express what makes a\n+ * field useful, not just well-formed (a comparison with zero dimensions\n+ * is valid JSON but useless).\n+ *\n+ * 🐨 Marty 💰 has pre-written the description and constraints for every field\n+ * below, commented out inline. Uncomment each `💰` block (drop the comment\n+ * markers around it) so they become part of the schema. Read each one as\n+ * you go — the wording is the prompt the model reads.\n+ */\n+export const ComparisonSchema = z.object({\n+\tcriteria: z\n+\t\t.string()\n+\t\t/* 💰 .describe(\n+\t\t\t'The lens the customer wants this comparison through, in their own words. Examples: \"Best price-to-quality ratio\", \"Most durable for hiking\", \"Best for everyday use\". Use \"Overall comparison\" if the customer has not stated a preference yet.',\n+\t\t) */,\n+\tdimensions: z\n+\t\t.array(\n+\t\t\tz.object({\n+\t\t\t\tname: z\n+\t\t\t\t\t.string()\n+\t\t\t\t\t/* 💰 .describe(\n+\t\t\t\t\t\t'A short label for this attribute. Examples: \"Price\", \"Materials\", \"Weight\", \"Warranty\".',\n+\t\t\t\t\t) */,\n+\t\t\t\tvalues: z\n+\t\t\t\t\t.array(\n+\t\t\t\t\t\tz.object({\n+\t\t\t\t\t\t\tproductId: z.string()/* 💰 .describe('The product this value belongs to.') */,\n+\t\t\t\t\t\t\tvalue: z\n+\t\t\t\t\t\t\t\t.string()\n+\t\t\t\t\t\t\t\t/* 💰 .describe(\n+\t\t\t\t\t\t\t\t\t'A short, human-readable description of this product on this dimension. Format numbers the way a customer would expect: \"$129\", \"3 days\", \"Leather + waxed cotton\". Keep it under 10 words.',\n+\t\t\t\t\t\t\t\t) */,\n+\t\t\t\t\t\t}),\n+\t\t\t\t\t)\n+\t\t\t\t\t/* 💰 .min(1)\n+\t\t\t\t\t.describe('One entry per product being compared on this dimension.') */,\n+\t\t\t\tedge: z\n+\t\t\t\t\t.string()\n+\t\t\t\t\t/* 💰 .nullable()\n+\t\t\t\t\t.describe(\n+\t\t\t\t\t\t'The productId that has the edge on this dimension. Set to null if the dimension is too close to call or does not have a clear winner.',\n+\t\t\t\t\t) */,\n+\t\t\t}),\n+\t\t)\n+\t\t/* 💰 .min(2)\n+\t\t.describe(\n+\t\t\t'The attributes that actually differentiate these products for the stated `criteria`. Pick the dimensions a real customer would weigh — do not enumerate every spec on the box.',\n+\t\t) */,\n+\trankings: z\n+\t\t.array(\n+\t\t\tz.object({\n+\t\t\t\tproductId: z.string(),\n+\t\t\t\trank: z\n+\t\t\t\t\t.number()\n+\t\t\t\t\t/* 💰 .int()\n+\t\t\t\t\t.min(1)\n+\t\t\t\t\t.describe('1 is the best fit for `criteria`. Each product gets a unique rank.') */,\n+\t\t\t\treason: z\n+\t\t\t\t\t.string()\n+\t\t\t\t\t/* 💰 .describe(\n+\t\t\t\t\t\t'A short justification for this rank. Reference the dimensions that drove it. One or two sentences.',\n+\t\t\t\t\t) */,\n+\t\t\t}),\n+\t\t)\n+\t\t/* 💰 .min(1)\n+\t\t.describe(\n+\t\t\t'One entry per product being compared. Sort the array ascending by `rank` so the best fit appears first.',\n+\t\t) */,\n+\tsummary: z\n+\t\t.string()\n+\t\t/* 💰 .describe(\n+\t\t\t'A one or two sentence verdict in plain language. Imagine you are telling a friend \"here is what I would pick and why\". Do not enumerate the dimensions — the table already shows them.',\n+\t\t) */,\n+})\n+\n+export type Comparison = z.infer"]

app/components/compare-button.tsx-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/comparison-chat.tsx-0+96App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/comparison-table.tsx-0+130App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/header.tsx-17+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-card.tsx-17+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/contexts/compare.tsx-0+102App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/prompts/comparison.ts-0+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-13+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing/compare.tsx-0+152App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing/products/$productId.tsx-26+55App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.chat.tsx-7+6App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.compare-data.tsx-0+59App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.compare.tsx-0+62App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/schemas/chat.ts-9+19App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/schemas/comparison.ts-0+89App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/compare-button.tsx-0+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/comparison-chat.tsx-0+96App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/comparison-table.tsx-0+130App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/header.tsx-17+20App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/components/product-card.tsx-17+46App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/contexts/compare.tsx-0+102App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/prompts/comparison.ts-0+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-13+16App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing/compare.tsx-0+152App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing/products/$productId.tsx-26+55App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.chat.tsx-7+6App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.compare-data.tsx-0+59App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/api.compare.tsx-0+62App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/schemas/chat.ts-9+19App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/schemas/comparison.ts-0+89App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2