Add recipes, images, AI photo ID, barcode scanning & ingredient matching

- Fuzzy ingredient matching for bar inventory against recipes
- AI photo identification API for bottles/labels (drink + bar context)
- Barcode scanner with photo toggle for My Bar
- Barcode scan + photo ID buttons on Add Drink form
- Auto-pull product images from Open Food Facts barcode lookup
- Recipes section on drink detail pages with bar availability
- Dedicated Recipes page in sidebar navigation
- Bar item image support (schema, upload, display)
- Drink detail image upload component
- MinIO image proxy through Next.js rewrites (fixes broken image links)
- Improved category mapping (energy drinks → Mixers, not Spirits)
- Re-process saved recipe ingredients against current bar inventory

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -40,3 +40,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

docker-compose.yml

@@ -64,6 +64,7 @@ services:
     environment:
       DATABASE_URL: "postgresql://${POSTGRES_USER:-drinktracker}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-drinktracker}"
       MINIO_ENDPOINT: "minio"
+      WATCHPACK_POLLING: "true"
     depends_on:
       db:
         condition: service_healthy

next.config.mjs

@@ -16,6 +16,18 @@ const nextConfig = {
       },
     ],
   },
+  async rewrites() {
+    // Proxy image requests to MinIO so URLs work from any device
+    const minioHost = process.env.MINIO_ENDPOINT || "localhost";
+    const minioPort = process.env.MINIO_PORT || "9000";
+    const minioBucket = process.env.MINIO_BUCKET || "drink-images";
+    return [
+      {
+        source: "/minio-images/:path*",
+        destination: `http://${minioHost}:${minioPort}/${minioBucket}/:path*`,
+      },
+    ];
+  },
   async headers() {
     return [
       {

package-lock.json

@@ -17,6 +17,7 @@
         "bcryptjs": "^3.0.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "html5-qrcode": "^2.3.8",
         "lucide-react": "^0.575.0",
         "next": "14.2.35",
         "next-auth": "^5.0.0-beta.25",
@@ -5359,6 +5360,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -18,6 +18,7 @@
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "html5-qrcode": "^2.3.8",
     "lucide-react": "^0.575.0",
     "next": "14.2.35",
     "next-auth": "^5.0.0-beta.25",

prisma/schema.prisma

@@ -28,6 +28,9 @@ model User {
   preferences   UserPreference?
   wishlistItems WishlistItem[]
   sharedLists   SharedList[]
+  barItems      BarItem[]
+  recipes       Recipe[]
+  flavorProfile FlavorProfile?
 }
 
 model Account {
@@ -123,6 +126,7 @@ model Drink {
   user      User       @relation(fields: [userId], references: [id], onDelete: Cascade)
   ratings   Rating[]
   menuItems MenuItem[]
+  recipes   Recipe[]
 
   @@index([userId])
   @@index([userId, type])
@@ -249,3 +253,75 @@ model SharedList {
   @@index([userId])
   @@index([slug])
 }
+
+// ─── Bar Inventory ──────────────────────────────────────────────
+
+enum BarItemCategory {
+  SPIRITS
+  LIQUEURS
+  MIXERS
+  BITTERS
+  GARNISHES
+  TOOLS
+}
+
+enum BarItemQuantity {
+  FULL
+  HALF
+  LOW
+  EMPTY
+}
+
+model BarItem {
+  id        String          @id @default(cuid())
+  userId    String
+  name      String
+  category  BarItemCategory
+  quantity  BarItemQuantity @default(FULL)
+  notes     String?         @db.Text
+  barcode   String?
+  imageUrl  String?
+  createdAt DateTime        @default(now())
+  updatedAt DateTime        @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@index([userId, category])
+  @@index([userId, barcode])
+}
+
+// ─── Recipes ────────────────────────────────────────────────────
+
+model Recipe {
+  id            String   @id @default(cuid())
+  userId        String
+  title         String
+  ingredients   Json     // [{ name: string, amount: string, available: boolean }]
+  steps         Json     // string[]
+  garnish       String?
+  glassware     String?
+  sourceDrinkId String?
+  notes         String?  @db.Text
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+
+  user        User   @relation(fields: [userId], references: [id], onDelete: Cascade)
+  sourceDrink Drink? @relation(fields: [sourceDrinkId], references: [id], onDelete: SetNull)
+
+  @@index([userId])
+}
+
+// ─── Flavor Profile ─────────────────────────────────────────────
+
+model FlavorProfile {
+  id          String   @id @default(cuid())
+  userId      String   @unique
+  profileText String   @db.Text
+  profileData Json?
+  generatedAt DateTime @default(now())
+  ratingCount Int      @default(0)
+  updatedAt   DateTime @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}

src/app/(app)/bar/page.tsx

@@ -0,0 +1,293 @@
+"use client"
+
+import { Suspense, useState } from "react"
+import { Header } from "@/components/layout/header"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { BarItemForm } from "@/components/bar/bar-item-form"
+import { BarCategoryGroup } from "@/components/bar/bar-category-group"
+import {
+  useBarItems,
+  useCreateBarItem,
+  useUpdateBarItem,
+  useDeleteBarItem,
+} from "@/hooks/use-bar"
+import type { BarItem } from "@/hooks/use-bar"
+import { BarcodeScanDialog } from "@/components/bar/barcode-scan-dialog"
+import type { BarcodeLookupResult } from "@/hooks/use-barcode-lookup"
+import { Plus, Wine, ScanLine } from "lucide-react"
+import type { BarItemCreate } from "@/lib/validators"
+
+export default function BarPage() {
+  return (
+    <Suspense fallback={<BarLoading />}>
+      <BarContent />
+    </Suspense>
+  )
+}
+
+function BarLoading() {
+  return (
+    <div>
+      <Header title="My Bar" />
+      <div className="p-4 md:p-8 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <div className="space-y-6">
+          {Array.from({ length: 3 }, (_, i) => (
+            <div key={i} className="space-y-3">
+              <Skeleton className="h-6 w-32" />
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                {Array.from({ length: 4 }, (_, j) => (
+                  <Skeleton key={j} className="h-[120px] rounded-lg" />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const CATEGORY_ORDER = [
+  "SPIRITS",
+  "LIQUEURS",
+  "MIXERS",
+  "BITTERS",
+  "GARNISHES",
+  "TOOLS",
+]
+
+function BarContent() {
+  const [addDialogOpen, setAddDialogOpen] = useState(false)
+  const [scanDialogOpen, setScanDialogOpen] = useState(false)
+  const [editingItem, setEditingItem] = useState<BarItem | null>(null)
+  const [scannedData, setScannedData] = useState<Partial<BarItemCreate> | null>(null)
+
+  const { data, isLoading, error } = useBarItems()
+  const createBarItem = useCreateBarItem()
+  const updateBarItem = useUpdateBarItem()
+  const deleteBarItem = useDeleteBarItem()
+
+  function handleScanResult(result: BarcodeLookupResult) {
+    const initial: Partial<BarItemCreate> & { imageUrl?: string } = {
+      barcode: result.barcode,
+    }
+    if (result.name) {
+      initial.name = result.brand
+        ? `${result.brand} ${result.name}`
+        : result.name
+    }
+    if (result.category) {
+      initial.category = result.category as BarItemCreate["category"]
+    }
+    if (result.imageUrl) {
+      initial.imageUrl = result.imageUrl
+    }
+    setScannedData(initial)
+    // Scan dialog closes itself before calling this — just open add form
+    setAddDialogOpen(true)
+  }
+
+  function handleCreate(formData: BarItemCreate) {
+    createBarItem.mutate(formData, {
+      onSuccess: () => {
+        setAddDialogOpen(false)
+        setScannedData(null)
+      },
+    })
+  }
+
+  function handleUpdate(formData: BarItemCreate) {
+    if (!editingItem) return
+    updateBarItem.mutate(
+      { id: editingItem.id, data: formData },
+      {
+        onSuccess: () => {
+          setEditingItem(null)
+        },
+      }
+    )
+  }
+
+  function handleDelete(item: BarItem) {
+    if (confirm(`Delete "${item.name}" from your bar?`)) {
+      deleteBarItem.mutate(item.id)
+    }
+  }
+
+  // Group items by category
+  const groupedItems = (data?.items || []).reduce<Record<string, BarItem[]>>(
+    (groups, item) => {
+      const key = item.category
+      if (!groups[key]) groups[key] = []
+      groups[key].push(item)
+      return groups
+    },
+    {}
+  )
+
+  const totalItems = data?.items.length || 0
+
+  return (
+    <div>
+      <Header title="My Bar" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold">My Bar</h1>
+            <p className="text-muted-foreground">
+              {totalItems > 0
+                ? `${totalItems} item${totalItems !== 1 ? "s" : ""} in your bar`
+                : "Your bar inventory"}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => setScanDialogOpen(true)}>
+              <ScanLine className="h-4 w-4 mr-2" />
+              Scan
+            </Button>
+            <Button onClick={() => setAddDialogOpen(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Item
+            </Button>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="space-y-6">
+            {Array.from({ length: 3 }, (_, i) => (
+              <div key={i} className="space-y-3">
+                <Skeleton className="h-6 w-32" />
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                  {Array.from({ length: 4 }, (_, j) => (
+                    <Skeleton key={j} className="h-[120px] rounded-lg" />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : error ? (
+          <div className="text-center py-12">
+            <p className="text-destructive">
+              Failed to load bar items. Please try again.
+            </p>
+          </div>
+        ) : totalItems === 0 ? (
+          <div className="text-center py-16 space-y-4">
+            <Wine className="h-12 w-12 mx-auto text-muted-foreground/50" />
+            <div>
+              <h3 className="text-lg font-semibold">Your bar is empty</h3>
+              <p className="text-muted-foreground mt-1">
+                Add your first item to get started.
+              </p>
+            </div>
+            <Button onClick={() => setAddDialogOpen(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Your First Item
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {CATEGORY_ORDER.filter((cat) => groupedItems[cat]?.length > 0).map(
+              (cat) => (
+                <BarCategoryGroup
+                  key={cat}
+                  category={cat}
+                  items={groupedItems[cat]}
+                  onEdit={setEditingItem}
+                  onDelete={handleDelete}
+                />
+              )
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Barcode Scan Dialog */}
+      <BarcodeScanDialog
+        open={scanDialogOpen}
+        onOpenChange={setScanDialogOpen}
+        onResult={handleScanResult}
+      />
+
+      {/* Add Item Dialog */}
+      <Dialog
+        open={addDialogOpen}
+        onOpenChange={(open) => {
+          setAddDialogOpen(open)
+          if (!open) setScannedData(null)
+        }}
+      >
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[550px]">
+          <DialogHeader>
+            <DialogTitle>Add Bar Item</DialogTitle>
+            <DialogDescription>
+              {scannedData
+                ? "Review the scanned product info and make any changes."
+                : "Add a spirit, mixer, or other item to your bar inventory."}
+            </DialogDescription>
+          </DialogHeader>
+          <BarItemForm
+            key={scannedData?.barcode || "manual"}
+            initialData={scannedData || undefined}
+            onSubmit={handleCreate}
+            isSubmitting={createBarItem.isPending}
+            submitLabel="Add Item"
+          />
+          {createBarItem.isError && (
+            <p className="text-sm text-destructive">
+              {createBarItem.error.message || "Failed to add item"}
+            </p>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Item Dialog */}
+      <Dialog
+        open={editingItem !== null}
+        onOpenChange={(open) => {
+          if (!open) setEditingItem(null)
+        }}
+      >
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[550px]">
+          <DialogHeader>
+            <DialogTitle>Edit Bar Item</DialogTitle>
+            <DialogDescription>
+              Update the details for this item.
+            </DialogDescription>
+          </DialogHeader>
+          {editingItem && (
+            <>
+              <BarItemForm
+                initialData={{
+                  name: editingItem.name,
+                  category: editingItem.category,
+                  quantity: editingItem.quantity,
+                  notes: editingItem.notes || undefined,
+                  barcode: editingItem.barcode || undefined,
+                  imageUrl: editingItem.imageUrl || undefined,
+                }}
+                onSubmit={handleUpdate}
+                isSubmitting={updateBarItem.isPending}
+                submitLabel="Update Item"
+              />
+              {updateBarItem.isError && (
+                <p className="text-sm text-destructive">
+                  {updateBarItem.error.message || "Failed to update item"}
+                </p>
+              )}
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}

src/app/(app)/bartender/page.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { Suspense, useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { Header } from "@/components/layout/header"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecreateTab } from "@/components/bartender/recreate-tab"
+import { SuggestTab } from "@/components/bartender/suggest-tab"
+import { SavedRecipesTab } from "@/components/bartender/saved-recipes-tab"
+import { Search, Sparkles, BookOpen } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export default function BartenderPage() {
+  return (
+    <Suspense fallback={<BartenderLoading />}>
+      <BartenderContent />
+    </Suspense>
+  )
+}
+
+function BartenderLoading() {
+  return (
+    <div>
+      <Header title="Bartender" />
+      <div className="p-4 md:p-8 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-full max-w-md" />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {Array.from({ length: 4 }, (_, i) => (
+            <Skeleton key={i} className="h-[200px] rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type Tab = "recreate" | "suggest" | "saved"
+
+const TABS: { id: Tab; label: string; icon: typeof Search }[] = [
+  { id: "recreate", label: "Recreate", icon: Search },
+  { id: "suggest", label: "Suggest", icon: Sparkles },
+  { id: "saved", label: "Saved", icon: BookOpen },
+]
+
+function BartenderContent() {
+  const searchParams = useSearchParams()
+  const recreateParam = searchParams.get("recreate")
+  const [activeTab, setActiveTab] = useState<Tab>("recreate")
+
+  return (
+    <div>
+      <Header title="Bartender" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Bartender</h1>
+          <p className="text-muted-foreground">
+            AI-powered cocktail recipes based on your bar inventory.
+          </p>
+        </div>
+
+        {/* Tab switcher */}
+        <div className="flex gap-1 p-1 bg-muted rounded-lg max-w-md">
+          {TABS.map((tab) => {
+            const Icon = tab.icon
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-colors",
+                  activeTab === tab.id
+                    ? "bg-background shadow-sm text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {tab.label}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Tab content */}
+        {activeTab === "recreate" && <RecreateTab initialDrink={recreateParam || undefined} />}
+        {activeTab === "suggest" && <SuggestTab />}
+        {activeTab === "saved" && <SavedRecipesTab />}
+      </div>
+    </div>
+  )
+}

src/app/(app)/drinks/[id]/page.tsx

@@ -6,11 +6,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
-import { Star, MapPin, Percent, Calendar, ArrowLeft } from "lucide-react"
+import { Star, MapPin, Percent, Calendar, ArrowLeft, GlassWater, BookOpen } from "lucide-react"
 import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { DrinkDetailActions } from "@/components/drinks/drink-detail-actions"
 import { AddToWishlistButton } from "@/components/drinks/add-to-wishlist-button"
+import { DrinkRecipesList } from "@/components/drinks/drink-recipes-list"
+import { DrinkDetailImage } from "@/components/drinks/drink-detail-image"
+import { fuzzyMatchIngredients } from "@/lib/ingredient-matcher"
 
 const TYPE_COLORS: Record<string, string> = {
   BEER: "bg-amber-500/15 text-amber-700 border-amber-500/25",
@@ -44,6 +47,9 @@ export default async function DrinkDetailPage({
       ratings: {
         orderBy: { createdAt: "desc" },
       },
+      recipes: {
+        orderBy: { createdAt: "desc" },
+      },
     },
   })
 
@@ -55,6 +61,24 @@ export default async function DrinkDetailPage({
     notFound()
   }
 
+  // Fetch bar items to re-check recipe ingredient availability
+  const barItems = await prisma.barItem.findMany({
+    where: {
+      userId: session.user.id,
+      quantity: { not: "EMPTY" },
+    },
+    select: { name: true },
+  })
+
+  // Re-process recipe ingredients against current bar
+  const processedRecipes = drink.recipes.map((recipe) => {
+    if (barItems.length > 0 && Array.isArray(recipe.ingredients)) {
+      const ingredients = recipe.ingredients as { name: string; amount: string; available: boolean }[]
+      return { ...recipe, ingredients: fuzzyMatchIngredients(ingredients, barItems) }
+    }
+    return recipe
+  })
+
   const scores = drink.ratings.map((r) => r.score)
   const avgRating =
     scores.length > 0
@@ -74,6 +98,9 @@ export default async function DrinkDetailPage({
           Back to Collection
         </Link>
 
+        {/* Drink Image */}
+        <DrinkDetailImage drinkId={drink.id} currentImageUrl={drink.imageUrl} />
+
         {/* Main Info Card */}
         <Card>
           <CardHeader>
@@ -170,13 +197,19 @@ export default async function DrinkDetailPage({
 
             <Separator />
 
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-3 flex-wrap">
               <Link href={`/rate/${drink.id}`}>
                 <Button className="w-full sm:w-auto">
                   <Star className="h-4 w-4 mr-2" />
                   Rate This Drink
                 </Button>
               </Link>
+              <Link href={`/bartender?recreate=${encodeURIComponent(drink.name)}`}>
+                <Button variant="outline" className="w-full sm:w-auto">
+                  <GlassWater className="h-4 w-4 mr-2" />
+                  Recreate
+                </Button>
+              </Link>
               <AddToWishlistButton
                 name={drink.name}
                 type={drink.type as "BEER" | "WINE" | "COCKTAIL" | "SPIRIT" | "OTHER"}
@@ -191,6 +224,43 @@ export default async function DrinkDetailPage({
           </CardContent>
         </Card>
 
+        {/* Recipes */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-lg flex items-center gap-2">
+                <BookOpen className="h-5 w-5" />
+                Recipes
+              </CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {processedRecipes.length > 0 ? (
+              <DrinkRecipesList
+                recipes={processedRecipes.map((r) => ({
+                  id: r.id,
+                  title: r.title,
+                  ingredients: r.ingredients as { name: string; amount: string; available: boolean }[],
+                  steps: r.steps as string[],
+                  garnish: r.garnish,
+                  glassware: r.glassware,
+                  notes: r.notes,
+                }))}
+              />
+            ) : (
+              <div className="text-center py-6 text-muted-foreground">
+                <p>No saved recipes for this drink.</p>
+                <Link href={`/bartender?recreate=${encodeURIComponent(drink.name)}`}>
+                  <Button variant="outline" className="mt-3" size="sm">
+                    <GlassWater className="h-4 w-4 mr-2" />
+                    Generate Recipe
+                  </Button>
+                </Link>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
         {/* Rating History */}
         <Card>
           <CardHeader>

src/app/(app)/recipes/page.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Header } from "@/components/layout/header"
+import { SavedRecipesTab } from "@/components/bartender/saved-recipes-tab"
+
+export default function RecipesPage() {
+  return (
+    <div>
+      <Header title="Recipes" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Saved Recipes</h1>
+          <p className="text-muted-foreground">
+            Your collection of saved cocktail recipes.
+          </p>
+        </div>
+        <SavedRecipesTab />
+      </div>
+    </div>
+  )
+}

src/app/(app)/recommend/page.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { Suspense } from "react"
+import { Header } from "@/components/layout/header"
+import { Skeleton } from "@/components/ui/skeleton"
+import { FlavorProfileCard } from "@/components/recommend/flavor-profile-card"
+import { SuggestSection } from "@/components/recommend/suggest-section"
+import { SimilarSection } from "@/components/recommend/similar-section"
+import {
+  useFlavorProfile,
+  useGenerateFlavorProfile,
+} from "@/hooks/use-recommend"
+import { useDrinks } from "@/hooks/use-drinks"
+import { Sparkles } from "lucide-react"
+
+export default function RecommendPage() {
+  return (
+    <Suspense fallback={<RecommendLoading />}>
+      <RecommendContent />
+    </Suspense>
+  )
+}
+
+function RecommendLoading() {
+  return (
+    <div>
+      <Header title="Recommend" />
+      <div className="p-4 md:p-8 space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-[200px] rounded-lg" />
+        <Skeleton className="h-[200px] rounded-lg" />
+        <Skeleton className="h-[200px] rounded-lg" />
+      </div>
+    </div>
+  )
+}
+
+function RecommendContent() {
+  const {
+    data: profileData,
+    isLoading: profileLoading,
+    error: profileError,
+  } = useFlavorProfile()
+
+  const generateProfile = useGenerateFlavorProfile()
+
+  const { data: drinksData, isLoading: drinksLoading } = useDrinks({
+    limit: 500,
+    sort: "name",
+  })
+
+  const profile = profileData?.profile ?? null
+  const hasProfile = !!profile
+
+  const drinkOptions = (drinksData?.drinks ?? []).map((d) => ({
+    id: d.id,
+    name: d.name,
+    type: d.type,
+  }))
+
+  return (
+    <div>
+      <Header title="Recommend" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold flex items-center gap-2">
+            <Sparkles className="h-6 w-6 text-primary" />
+            Recommendations
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            AI-powered drink suggestions tailored to your taste.
+          </p>
+        </div>
+
+        <FlavorProfileCard
+          profile={profile}
+          isLoading={profileLoading}
+          isGenerating={generateProfile.isPending}
+          error={profileError}
+          generateError={generateProfile.error}
+          onGenerate={() => generateProfile.mutate()}
+        />
+
+        <SuggestSection hasProfile={hasProfile} />
+
+        <SimilarSection
+          drinks={drinkOptions}
+          drinksLoading={drinksLoading}
+        />
+      </div>
+    </div>
+  )
+}

src/app/api/ai/identify/route.ts

@@ -0,0 +1,116 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { z } from "zod"
+
+const identifySchema = z.object({
+  imageBase64: z.string().min(1),
+  mimeType: z.string().regex(/^image\/(jpeg|png|webp|heic)$/),
+  context: z.enum(["drink", "bar"]),
+})
+
+// Map AI drink types to bar item categories
+function mapTypeToBarCategory(type: string, subType?: string, name?: string): string {
+  const t = type.toUpperCase()
+  const sub = (subType || "").toLowerCase()
+  const n = (name || "").toLowerCase()
+  const allText = `${sub} ${n}`
+
+  // Check name + subType for specific categories first
+  if (allText.includes("bitter")) return "BITTERS"
+
+  if (allText.includes("liqueur") || allText.includes("amaro") || allText.includes("vermouth") ||
+      allText.includes("triple sec") || allText.includes("curaçao") || allText.includes("curacao") ||
+      allText.includes("schnapps") || allText.includes("aperitif") || allText.includes("digestif") ||
+      allText.includes("cordial") || allText.includes("crème de")) {
+    return "LIQUEURS"
+  }
+
+  if (allText.includes("mixer") || allText.includes("soda") || allText.includes("tonic") ||
+      allText.includes("juice") || allText.includes("syrup") || allText.includes("cola") ||
+      allText.includes("ginger") || allText.includes("energy") || allText.includes("water") ||
+      allText.includes("lemonade") || allText.includes("grenadine") || allText.includes("club")) {
+    return "MIXERS"
+  }
+
+  if (allText.includes("garnish") || allText.includes("olive") || allText.includes("cherry") ||
+      allText.includes("mint sprig")) {
+    return "GARNISHES"
+  }
+
+  // Map by drink type
+  if (t === "SPIRIT") return "SPIRITS"
+  if (t === "COCKTAIL") return "SPIRITS"
+  if (t === "BEER" || t === "WINE") return "SPIRITS"
+  if (t === "OTHER") return "MIXERS" // energy drinks, non-alcoholic, etc.
+
+  return "SPIRITS"
+}
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { success: withinLimit } = rateLimit(`ai-identify:${session.user.id}`, 10, 60000)
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = identifySchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json({ error: "Invalid request" }, { status: 400 })
+    }
+
+    const { imageBase64, mimeType, context } = parsed.data
+
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const result = await provider.extractLabel(imageBase64, mimeType)
+
+    // Build response based on context
+    const response: Record<string, unknown> = {
+      name: result.name,
+      type: result.type,
+      subType: result.subType,
+      brewery: result.brewery,
+      region: result.region,
+      abv: result.abv,
+      description: result.description,
+    }
+
+    if (context === "bar") {
+      // Map to bar category
+      response.category = mapTypeToBarCategory(result.type, result.subType, result.name)
+    }
+
+    return NextResponse.json(response)
+  } catch (error) {
+    console.error("AI identify error:", error)
+    return NextResponse.json(
+      { error: "Failed to identify product. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bar/[id]/route.ts

@@ -0,0 +1,91 @@
+import { NextRequest, NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { barItemUpdateSchema } from "@/lib/validators"
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    // Check ownership
+    const existing = await prisma.barItem.findUnique({
+      where: { id: params.id },
+      select: { userId: true },
+    })
+
+    if (!existing) {
+      return NextResponse.json({ error: "Bar item not found" }, { status: 404 })
+    }
+
+    if (existing.userId !== session.user.id) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 })
+    }
+
+    const body = await request.json()
+    const parsed = barItemUpdateSchema.safeParse(body)
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: "Validation failed", issues: parsed.error.issues },
+        { status: 400 }
+      )
+    }
+
+    const item = await prisma.barItem.update({
+      where: { id: params.id },
+      data: parsed.data,
+    })
+
+    return NextResponse.json(item)
+  } catch (error) {
+    console.error("PUT /api/bar/[id] error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    // Check ownership
+    const existing = await prisma.barItem.findUnique({
+      where: { id: params.id },
+      select: { userId: true },
+    })
+
+    if (!existing) {
+      return NextResponse.json({ error: "Bar item not found" }, { status: 404 })
+    }
+
+    if (existing.userId !== session.user.id) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 })
+    }
+
+    await prisma.barItem.delete({
+      where: { id: params.id },
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("DELETE /api/bar/[id] error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bar/barcode-lookup/route.ts

@@ -0,0 +1,177 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { z } from "zod"
+
+const barcodeLookupSchema = z.object({
+  barcode: z.string().min(8).max(20).regex(/^\d+$/, "Invalid barcode format"),
+})
+
+function mapOffCategoryToBarCategory(tags: string[]): string {
+  const joined = (tags || []).join(",").toLowerCase()
+  if (/spirits|whisk|bourbon|vodka|rum|gin|tequila|brandy|cognac|mezcal|scotch/.test(joined)) return "SPIRITS"
+  if (/liqueur|amaretto|kahlua|baileys|triple.sec|schnapps|chartreuse|campari|aperol/.test(joined)) return "LIQUEURS"
+  if (/juice|soda|tonic|cola|syrup|water|mixer|ginger|lemon|lime|cranberry|club/.test(joined)) return "MIXERS"
+  if (/bitter/.test(joined)) return "BITTERS"
+  return "SPIRITS"
+}
+
+function mapOffCategoryToDrinkType(tags: string[]): string | null {
+  const joined = (tags || []).join(",").toLowerCase()
+  if (/beer|ale|lager|stout|porter|pilsner|ipa|wheat.beer|craft.beer/.test(joined)) return "BEER"
+  if (/wine|champagne|prosecco|cava|merlot|cabernet|chardonnay|pinot|rosé|rose/.test(joined)) return "WINE"
+  if (/cocktail/.test(joined)) return "COCKTAIL"
+  if (/spirits|whisk|bourbon|vodka|rum|gin|tequila|brandy|cognac|mezcal|scotch/.test(joined)) return "SPIRIT"
+  return null
+}
+
+async function lookupOpenFoodFacts(barcode: string) {
+  try {
+    const res = await fetch(
+      `https://world.openfoodfacts.org/api/v2/product/${barcode}.json`,
+      { signal: AbortSignal.timeout(8000) }
+    )
+    if (!res.ok) return null
+    const data = await res.json()
+    if (data.status !== 1 || !data.product) return null
+
+    const product = data.product
+    const name = product.product_name || product.product_name_en || null
+    if (!name) return null
+
+    // Extract product image URL
+    const imageUrl = product.image_url || product.image_front_url || product.image_front_small_url || null
+
+    // Extract ABV from alcohol_100g nutrient or nutriments
+    let abv: number | null = null
+    if (product.nutriments?.alcohol_100g) {
+      abv = parseFloat(product.nutriments.alcohol_100g)
+      if (isNaN(abv)) abv = null
+    }
+
+    // Determine drink type from categories
+    const drinkType = mapOffCategoryToDrinkType(product.categories_tags || [])
+
+    return {
+      name,
+      brand: product.brands || null,
+      category: mapOffCategoryToBarCategory(product.categories_tags || []),
+      imageUrl,
+      abv,
+      type: drinkType,
+      subType: null as string | null,
+    }
+  } catch {
+    return null
+  }
+}
+
+async function lookupViaAI(barcode: string, userId: string) {
+  try {
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId, isActive: true },
+    })
+    if (!apiKeyRecord) return null
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const systemPrompt = `You are a product identification expert. Given a UPC/EAN barcode number, identify the product — especially alcoholic beverages, spirits, mixers, and bar supplies.
+
+Return ONLY a valid JSON object with these fields:
+- "name" (string): The product name (e.g., "Maker's Mark Bourbon")
+- "brand" (string or null): The brand name
+- "category" (string): One of "SPIRITS", "LIQUEURS", "MIXERS", "BITTERS", "GARNISHES", or "TOOLS"
+
+If you cannot confidently identify the barcode, return: { "name": null }
+Do not include any text before or after the JSON.`
+
+    const response = await provider.sendTextRequest(
+      systemPrompt,
+      `Identify the product with UPC/EAN barcode: ${barcode}`
+    )
+
+    const match = response.match(/\{[\s\S]*\}/)
+    if (!match) return null
+    const parsed = JSON.parse(match[0])
+    if (!parsed.name) return null
+
+    return {
+      name: parsed.name as string,
+      brand: (parsed.brand as string) || null,
+      category: parsed.category || "SPIRITS",
+    }
+  } catch {
+    return null
+  }
+}
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { success: withinLimit } = rateLimit(`barcode-lookup:${session.user.id}`, 10, 60000)
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = barcodeLookupSchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json({ error: "Invalid barcode format" }, { status: 400 })
+    }
+
+    const { barcode } = parsed.data
+
+    // Check if user already has this barcode in their bar
+    const existing = await prisma.barItem.findFirst({
+      where: { userId: session.user.id, barcode },
+    })
+    if (existing) {
+      return NextResponse.json({
+        barcode,
+        name: existing.name,
+        brand: null,
+        category: existing.category,
+        source: "existing",
+        existingId: existing.id,
+      })
+    }
+
+    // Try Open Food Facts first
+    const offResult = await lookupOpenFoodFacts(barcode)
+    if (offResult) {
+      return NextResponse.json({ ...offResult, barcode, source: "openfoodfacts" })
+    }
+
+    // AI fallback
+    const aiResult = await lookupViaAI(barcode, session.user.id)
+    if (aiResult) {
+      return NextResponse.json({ ...aiResult, barcode, source: "ai" })
+    }
+
+    // Not found
+    return NextResponse.json({
+      barcode,
+      name: null,
+      brand: null,
+      category: null,
+      source: "not_found",
+    })
+  } catch (error) {
+    console.error("Barcode lookup error:", error)
+    return NextResponse.json(
+      { error: "Failed to look up barcode" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bar/route.ts

@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { barItemCreateSchema } from "@/lib/validators"
+
+export async function GET() {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const items = await prisma.barItem.findMany({
+      where: { userId: session.user.id },
+      orderBy: [{ category: "asc" }, { name: "asc" }],
+    })
+
+    return NextResponse.json({ items })
+  } catch (error) {
+    console.error("GET /api/bar error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const parsed = barItemCreateSchema.safeParse(body)
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: "Validation failed", issues: parsed.error.issues },
+        { status: 400 }
+      )
+    }
+
+    const item = await prisma.barItem.create({
+      data: {
+        ...parsed.data,
+        userId: session.user.id,
+      },
+    })
+
+    return NextResponse.json(item, { status: 201 })
+  } catch (error) {
+    console.error("POST /api/bar error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bartender/recreate/route.ts

@@ -0,0 +1,100 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { COCKTAIL_RECIPE_PROMPT, buildBarInventoryString } from "@/lib/ai/prompts"
+import { fuzzyMatchIngredients, recalculateMissingCount } from "@/lib/ingredient-matcher"
+import { z } from "zod"
+
+const recreateSchema = z.object({
+  cocktailName: z.string().min(1).max(200),
+  drinkId: z.string().optional(),
+})
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { success: withinLimit } = rateLimit(`bartender-recreate:${session.user.id}`, 10, 60000)
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = recreateSchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json({ error: "Invalid request" }, { status: 400 })
+    }
+
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    const barItems = await prisma.barItem.findMany({
+      where: {
+        userId: session.user.id,
+        quantity: { not: "EMPTY" },
+      },
+      select: { name: true, category: true, quantity: true },
+    })
+
+    const inventoryString = buildBarInventoryString(barItems)
+    const prompt = COCKTAIL_RECIPE_PROMPT.replace("{barInventory}", inventoryString)
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const rawResponse = await provider.sendTextRequest(
+      prompt,
+      `Generate a recipe for: ${parsed.data.cocktailName}`
+    )
+
+    // Parse JSON from response
+    let recipe
+    try {
+      recipe = JSON.parse(rawResponse)
+    } catch {
+      // Try to extract from markdown code blocks or find JSON object
+      const codeBlockMatch = rawResponse.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/)
+      if (codeBlockMatch) {
+        recipe = JSON.parse(codeBlockMatch[1].trim())
+      } else {
+        const objectMatch = rawResponse.match(/\{[\s\S]*\}/)
+        if (objectMatch) {
+          recipe = JSON.parse(objectMatch[0])
+        } else {
+          throw new Error("Could not parse recipe from AI response")
+        }
+      }
+    }
+
+    // Post-process: fuzzy-match ingredients against bar inventory
+    if (recipe.ingredients && Array.isArray(recipe.ingredients) && barItems.length > 0) {
+      recipe.ingredients = fuzzyMatchIngredients(recipe.ingredients, barItems)
+      recipe.missingCount = recalculateMissingCount(recipe.ingredients)
+    }
+
+    return NextResponse.json(recipe)
+  } catch (error) {
+    console.error("Bartender recreate error:", error)
+    return NextResponse.json(
+      { error: "Failed to generate recipe. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bartender/suggest/route.ts

@@ -0,0 +1,107 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { WHAT_CAN_I_MAKE_PROMPT, buildBarInventoryString } from "@/lib/ai/prompts"
+import { fuzzyMatchIngredients, recalculateMissingCount } from "@/lib/ingredient-matcher"
+
+export async function POST() {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { success: withinLimit } = rateLimit(`bartender-suggest:${session.user.id}`, 5, 60000)
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    const barItems = await prisma.barItem.findMany({
+      where: {
+        userId: session.user.id,
+        quantity: { not: "EMPTY" },
+      },
+      select: { name: true, category: true, quantity: true },
+    })
+
+    if (barItems.length === 0) {
+      return NextResponse.json(
+        { error: "No items in your bar inventory. Add items to your bar first." },
+        { status: 400 }
+      )
+    }
+
+    const inventoryString = buildBarInventoryString(barItems)
+    const prompt = WHAT_CAN_I_MAKE_PROMPT.replace("{barInventory}", inventoryString)
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const rawResponse = await provider.sendTextRequest(
+      prompt,
+      "What cocktails can I make with my bar inventory?"
+    )
+
+    // Parse JSON from response
+    let suggestions
+    try {
+      suggestions = JSON.parse(rawResponse)
+    } catch {
+      const codeBlockMatch = rawResponse.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/)
+      if (codeBlockMatch) {
+        suggestions = JSON.parse(codeBlockMatch[1].trim())
+      } else {
+        const arrayMatch = rawResponse.match(/\[[\s\S]*\]/)
+        if (arrayMatch) {
+          suggestions = JSON.parse(arrayMatch[0])
+        } else {
+          throw new Error("Could not parse suggestions from AI response")
+        }
+      }
+    }
+
+    if (!Array.isArray(suggestions)) {
+      suggestions = []
+    }
+
+    // Post-process: fuzzy-match ingredients against bar inventory and re-sort
+    if (barItems.length > 0) {
+      suggestions = suggestions.map((s: { ingredients?: { name: string; amount: string; available: boolean }[]; missingCount?: number }) => {
+        if (s.ingredients && Array.isArray(s.ingredients)) {
+          s.ingredients = fuzzyMatchIngredients(s.ingredients, barItems)
+          s.missingCount = recalculateMissingCount(s.ingredients)
+        }
+        return s
+      })
+      // Re-sort by missingCount ascending
+      suggestions.sort((a: { missingCount?: number }, b: { missingCount?: number }) =>
+        (a.missingCount ?? 99) - (b.missingCount ?? 99)
+      )
+    }
+
+    return NextResponse.json({ suggestions })
+  } catch (error) {
+    console.error("Bartender suggest error:", error)
+    return NextResponse.json(
+      { error: "Failed to generate suggestions. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/recipes/[id]/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const existing = await prisma.recipe.findUnique({
+      where: { id: params.id },
+      select: { userId: true },
+    })
+
+    if (!existing) {
+      return NextResponse.json({ error: "Recipe not found" }, { status: 404 })
+    }
+
+    if (existing.userId !== session.user.id) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 })
+    }
+
+    await prisma.recipe.delete({
+      where: { id: params.id },
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("DELETE /api/recipes/[id] error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/recipes/route.ts

@@ -0,0 +1,96 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { recipeCreateSchema } from "@/lib/validators"
+import { fuzzyMatchIngredients, recalculateMissingCount } from "@/lib/ingredient-matcher"
+import type { Prisma } from "@prisma/client"
+
+export async function GET() {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const [recipes, barItems] = await Promise.all([
+      prisma.recipe.findMany({
+        where: { userId: session.user.id },
+        orderBy: { createdAt: "desc" },
+        include: {
+          sourceDrink: {
+            select: { name: true, type: true },
+          },
+        },
+      }),
+      prisma.barItem.findMany({
+        where: {
+          userId: session.user.id,
+          quantity: { not: "EMPTY" },
+        },
+        select: { name: true },
+      }),
+    ])
+
+    // Re-process ingredient availability against current bar inventory
+    const processedRecipes = recipes.map((recipe) => {
+      if (barItems.length > 0 && Array.isArray(recipe.ingredients)) {
+        const ingredients = recipe.ingredients as { name: string; amount: string; available: boolean }[]
+        const matched = fuzzyMatchIngredients(ingredients, barItems)
+        return {
+          ...recipe,
+          ingredients: matched,
+          missingCount: recalculateMissingCount(matched),
+        }
+      }
+      return recipe
+    })
+
+    return NextResponse.json({ recipes: processedRecipes })
+  } catch (error) {
+    console.error("GET /api/recipes error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const session = await auth()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+    }
+
+    const body = await request.json()
+    const parsed = recipeCreateSchema.safeParse(body)
+
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: "Validation failed", issues: parsed.error.issues },
+        { status: 400 }
+      )
+    }
+
+    const recipe = await prisma.recipe.create({
+      data: {
+        userId: session.user.id,
+        title: parsed.data.title,
+        ingredients: parsed.data.ingredients as unknown as Prisma.InputJsonValue,
+        steps: parsed.data.steps as unknown as Prisma.InputJsonValue,
+        garnish: parsed.data.garnish || null,
+        glassware: parsed.data.glassware || null,
+        sourceDrinkId: parsed.data.sourceDrinkId || null,
+        notes: parsed.data.notes || null,
+      },
+    })
+
+    return NextResponse.json(recipe, { status: 201 })
+  } catch (error) {
+    console.error("POST /api/recipes error:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/recommend/profile/route.ts

@@ -0,0 +1,192 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { FLAVOR_PROFILE_PROMPT, buildDrinkHistoryString } from "@/lib/ai/prompts"
+import type { Prisma } from "@prisma/client"
+
+export async function GET() {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  try {
+    const profile = await prisma.flavorProfile.findUnique({
+      where: { userId: session.user.id },
+    })
+
+    if (!profile) {
+      return NextResponse.json({ profile: null })
+    }
+
+    // Check staleness by comparing stored ratingCount to current count
+    const currentRatingCount = await prisma.rating.count({
+      where: { userId: session.user.id },
+    })
+
+    return NextResponse.json({
+      profile: {
+        id: profile.id,
+        profileText: profile.profileText,
+        profileData: profile.profileData,
+        generatedAt: profile.generatedAt,
+        ratingCount: profile.ratingCount,
+        isStale: currentRatingCount !== profile.ratingCount,
+        currentRatingCount,
+      },
+    })
+  } catch (error) {
+    console.error("Flavor profile fetch error:", error)
+    return NextResponse.json(
+      { error: "Failed to fetch flavor profile." },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST() {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  // Rate limit: 5 profile generations per minute
+  const { success: withinLimit } = rateLimit(
+    `recommend-profile:${session.user.id}`,
+    5,
+    60 * 1000
+  )
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    // Get user's AI provider
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    // Fetch all drinks with ratings
+    const drinks = await prisma.drink.findMany({
+      where: { userId: session.user.id },
+      include: {
+        ratings: {
+          where: { userId: session.user.id },
+        },
+      },
+    })
+
+    // Build drink summaries with computed avg rating
+    const drinkSummaries = drinks
+      .filter((d) => d.ratings.length > 0)
+      .map((d) => {
+        const avgRating =
+          d.ratings.reduce((sum, r) => sum + r.score, 0) / d.ratings.length
+        const wouldReorder = d.ratings.some((r) => r.wouldReorder)
+        return {
+          name: d.name,
+          type: d.type,
+          subType: d.subType,
+          brewery: d.brewery,
+          avgRating: Math.round(avgRating * 10) / 10,
+          ratingCount: d.ratings.length,
+          wouldReorder,
+        }
+      })
+
+    if (drinkSummaries.length < 3) {
+      return NextResponse.json(
+        {
+          error:
+            "You need at least 3 rated drinks to generate a flavor profile. Keep rating drinks!",
+        },
+        { status: 400 }
+      )
+    }
+
+    const drinkHistory = buildDrinkHistoryString(drinkSummaries)
+    const prompt = FLAVOR_PROFILE_PROMPT.replace("{drinkHistory}", drinkHistory)
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const rawResponse = await provider.sendTextRequest(
+      prompt,
+      "Analyze my drink history and build my flavor profile."
+    )
+
+    // Parse the JSON response
+    let profileData: Record<string, unknown>
+    try {
+      // Try direct parse
+      profileData = JSON.parse(rawResponse)
+    } catch {
+      // Try extracting from markdown code blocks
+      const match = rawResponse.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/)
+      if (match) {
+        profileData = JSON.parse(match[1].trim())
+      } else {
+        const objectMatch = rawResponse.match(/\{[\s\S]*\}/)
+        if (objectMatch) {
+          profileData = JSON.parse(objectMatch[0])
+        } else {
+          throw new Error("Could not parse AI response as JSON")
+        }
+      }
+    }
+
+    const totalRatings = await prisma.rating.count({
+      where: { userId: session.user.id },
+    })
+
+    // Upsert the flavor profile
+    const profile = await prisma.flavorProfile.upsert({
+      where: { userId: session.user.id },
+      update: {
+        profileText:
+          (profileData.summary as string) || rawResponse.slice(0, 500),
+        profileData: profileData as Prisma.InputJsonValue,
+        generatedAt: new Date(),
+        ratingCount: totalRatings,
+      },
+      create: {
+        userId: session.user.id,
+        profileText:
+          (profileData.summary as string) || rawResponse.slice(0, 500),
+        profileData: profileData as Prisma.InputJsonValue,
+        ratingCount: totalRatings,
+      },
+    })
+
+    return NextResponse.json({
+      profile: {
+        id: profile.id,
+        profileText: profile.profileText,
+        profileData: profile.profileData,
+        generatedAt: profile.generatedAt,
+        ratingCount: profile.ratingCount,
+        isStale: false,
+        currentRatingCount: totalRatings,
+      },
+    })
+  } catch (error) {
+    console.error("Flavor profile generation error:", error)
+    return NextResponse.json(
+      { error: "Failed to generate flavor profile. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/recommend/similar/route.ts

@@ -0,0 +1,140 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { SIMILAR_DRINK_PROMPT } from "@/lib/ai/prompts"
+import { z } from "zod"
+
+const similarSchema = z.object({
+  drinkId: z.string().min(1),
+})
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  // Rate limit: 10 similar requests per minute
+  const { success: withinLimit } = rateLimit(
+    `recommend-similar:${session.user.id}`,
+    10,
+    60 * 1000
+  )
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = similarSchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json(
+        { error: "Invalid request. Drink ID is required." },
+        { status: 400 }
+      )
+    }
+
+    // Get user's AI provider
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    // Fetch the source drink
+    const drink = await prisma.drink.findFirst({
+      where: { id: parsed.data.drinkId, userId: session.user.id },
+      include: {
+        ratings: {
+          where: { userId: session.user.id },
+          orderBy: { createdAt: "desc" },
+          take: 5,
+        },
+      },
+    })
+
+    if (!drink) {
+      return NextResponse.json(
+        { error: "Drink not found." },
+        { status: 404 }
+      )
+    }
+
+    // Build source drink description
+    const avgRating =
+      drink.ratings.length > 0
+        ? drink.ratings.reduce((sum, r) => sum + r.score, 0) /
+          drink.ratings.length
+        : null
+    const sourceDrinkParts = [`${drink.name} (${drink.type})`]
+    if (drink.subType) sourceDrinkParts.push(`Style: ${drink.subType}`)
+    if (drink.brewery) sourceDrinkParts.push(`From: ${drink.brewery}`)
+    if (drink.region) sourceDrinkParts.push(`Region: ${drink.region}`)
+    if (drink.abv) sourceDrinkParts.push(`ABV: ${drink.abv}%`)
+    if (drink.description) sourceDrinkParts.push(`Description: ${drink.description}`)
+    if (avgRating !== null)
+      sourceDrinkParts.push(
+        `User rating: ${(Math.round(avgRating * 10) / 10).toFixed(1)}/5`
+      )
+    const sourceDrink = sourceDrinkParts.join(" | ")
+
+    // Fetch flavor profile (optional for similar)
+    const profile = await prisma.flavorProfile.findUnique({
+      where: { userId: session.user.id },
+    })
+    const flavorProfile = profile?.profileText || "No flavor profile available."
+
+    const prompt = SIMILAR_DRINK_PROMPT
+      .replace("{sourceDrink}", sourceDrink)
+      .replace("{flavorProfile}", flavorProfile)
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const rawResponse = await provider.sendTextRequest(
+      prompt,
+      `Find drinks similar to ${drink.name}.`
+    )
+
+    // Parse JSON response
+    let recommendations: unknown[]
+    try {
+      recommendations = JSON.parse(rawResponse)
+    } catch {
+      const match = rawResponse.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/)
+      if (match) {
+        recommendations = JSON.parse(match[1].trim())
+      } else {
+        const arrayMatch = rawResponse.match(/\[[\s\S]*\]/)
+        if (arrayMatch) {
+          recommendations = JSON.parse(arrayMatch[0])
+        } else {
+          throw new Error("Could not parse AI response as JSON")
+        }
+      }
+    }
+
+    if (!Array.isArray(recommendations)) {
+      recommendations = []
+    }
+
+    return NextResponse.json({ recommendations, sourceDrink: drink.name })
+  } catch (error) {
+    console.error("Similar drink error:", error)
+    return NextResponse.json(
+      { error: "Failed to find similar drinks. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/recommend/suggest/route.ts

@@ -0,0 +1,123 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { RECOMMEND_DRINK_PROMPT } from "@/lib/ai/prompts"
+import { z } from "zod"
+
+const suggestSchema = z.object({
+  mood: z.string().max(200).optional(),
+  occasion: z.string().max(200).optional(),
+})
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  // Rate limit: 10 suggestions per minute
+  const { success: withinLimit } = rateLimit(
+    `recommend-suggest:${session.user.id}`,
+    10,
+    60 * 1000
+  )
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = suggestSchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json({ error: "Invalid request" }, { status: 400 })
+    }
+
+    // Get user's AI provider
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    // Fetch flavor profile
+    const profile = await prisma.flavorProfile.findUnique({
+      where: { userId: session.user.id },
+    })
+
+    if (!profile) {
+      return NextResponse.json(
+        {
+          error:
+            "No flavor profile found. Generate your flavor profile first.",
+        },
+        { status: 400 }
+      )
+    }
+
+    // Build context from mood/occasion
+    const contextParts: string[] = []
+    if (parsed.data.mood) {
+      contextParts.push(`Mood: ${parsed.data.mood}`)
+    }
+    if (parsed.data.occasion) {
+      contextParts.push(`Occasion: ${parsed.data.occasion}`)
+    }
+    const context =
+      contextParts.length > 0
+        ? contextParts.join("\n")
+        : "No specific mood or occasion. Suggest a variety of drinks."
+
+    const prompt = RECOMMEND_DRINK_PROMPT
+      .replace("{flavorProfile}", profile.profileText)
+      .replace("{context}", context)
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const rawResponse = await provider.sendTextRequest(
+      prompt,
+      "Recommend drinks for me based on my profile and the context provided."
+    )
+
+    // Parse JSON response
+    let recommendations: unknown[]
+    try {
+      recommendations = JSON.parse(rawResponse)
+    } catch {
+      const match = rawResponse.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/)
+      if (match) {
+        recommendations = JSON.parse(match[1].trim())
+      } else {
+        const arrayMatch = rawResponse.match(/\[[\s\S]*\]/)
+        if (arrayMatch) {
+          recommendations = JSON.parse(arrayMatch[0])
+        } else {
+          throw new Error("Could not parse AI response as JSON")
+        }
+      }
+    }
+
+    if (!Array.isArray(recommendations)) {
+      recommendations = []
+    }
+
+    return NextResponse.json({ recommendations })
+  } catch (error) {
+    console.error("Drink suggestion error:", error)
+    return NextResponse.json(
+      { error: "Failed to get suggestions. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/settings/backup/route.ts

@@ -12,7 +12,7 @@ export async function GET() {
   const userId = session.user.id
 
   try {
-    const [drinks, ratings, wishlistItems, preferences, sharedLists] =
+    const [drinks, ratings, wishlistItems, preferences, sharedLists, barItems] =
       await Promise.all([
         prisma.drink.findMany({
           where: { userId },
@@ -32,6 +32,10 @@ export async function GET() {
           where: { userId },
           orderBy: { createdAt: "asc" },
         }),
+        prisma.barItem.findMany({
+          where: { userId },
+          orderBy: { createdAt: "asc" },
+        }),
       ])
 
     const csv = generateBackupCsv(
@@ -39,7 +43,8 @@ export async function GET() {
       ratings,
       wishlistItems,
       preferences,
-      sharedLists
+      sharedLists,
+      barItems
     )
 
     const date = new Date().toISOString().split("T")[0]

src/components/bar/bar-category-group.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import {
+  Wine,
+  Droplets,
+  GlassWater,
+  FlaskConical,
+  Flower2,
+  Wrench,
+} from "lucide-react"
+import { BarItemCard } from "@/components/bar/bar-item-card"
+import type { BarItem } from "@/hooks/use-bar"
+
+const CATEGORY_ICONS: Record<string, React.ElementType> = {
+  SPIRITS: Wine,
+  LIQUEURS: Droplets,
+  MIXERS: GlassWater,
+  BITTERS: FlaskConical,
+  GARNISHES: Flower2,
+  TOOLS: Wrench,
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  SPIRITS: "Spirits",
+  LIQUEURS: "Liqueurs",
+  MIXERS: "Mixers",
+  BITTERS: "Bitters",
+  GARNISHES: "Garnishes",
+  TOOLS: "Tools",
+}
+
+interface BarCategoryGroupProps {
+  category: string
+  items: BarItem[]
+  onEdit: (item: BarItem) => void
+  onDelete: (item: BarItem) => void
+}
+
+export function BarCategoryGroup({
+  category,
+  items,
+  onEdit,
+  onDelete,
+}: BarCategoryGroupProps) {
+  const Icon = CATEGORY_ICONS[category] || Wine
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Icon className="h-5 w-5 text-muted-foreground" />
+        <h2 className="text-lg font-semibold">
+          {CATEGORY_LABELS[category] || category}
+        </h2>
+        <span className="text-sm text-muted-foreground">
+          ({items.length})
+        </span>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {items.map((item) => (
+          <BarItemCard
+            key={item.id}
+            item={item}
+            onEdit={onEdit}
+            onDelete={onDelete}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/bar/bar-item-card.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Pencil, Trash2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { BarItem } from "@/hooks/use-bar"
+
+const CATEGORY_COLORS: Record<string, string> = {
+  SPIRITS: "bg-amber-500/15 text-amber-700 border-amber-500/25",
+  LIQUEURS: "bg-purple-500/15 text-purple-700 border-purple-500/25",
+  MIXERS: "bg-sky-500/15 text-sky-700 border-sky-500/25",
+  BITTERS: "bg-orange-500/15 text-orange-700 border-orange-500/25",
+  GARNISHES: "bg-green-500/15 text-green-700 border-green-500/25",
+  TOOLS: "bg-slate-500/15 text-slate-700 border-slate-500/25",
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  SPIRITS: "Spirits",
+  LIQUEURS: "Liqueurs",
+  MIXERS: "Mixers",
+  BITTERS: "Bitters",
+  GARNISHES: "Garnishes",
+  TOOLS: "Tools",
+}
+
+const QUANTITY_COLORS: Record<string, string> = {
+  FULL: "bg-green-500/15 text-green-700 border-green-500/25",
+  HALF: "bg-yellow-500/15 text-yellow-700 border-yellow-500/25",
+  LOW: "bg-orange-500/15 text-orange-700 border-orange-500/25",
+  EMPTY: "bg-red-500/15 text-red-700 border-red-500/25",
+}
+
+const QUANTITY_LABELS: Record<string, string> = {
+  FULL: "Full",
+  HALF: "Half",
+  LOW: "Low",
+  EMPTY: "Empty",
+}
+
+interface BarItemCardProps {
+  item: BarItem
+  onEdit: (item: BarItem) => void
+  onDelete: (item: BarItem) => void
+}
+
+export function BarItemCard({ item, onEdit, onDelete }: BarItemCardProps) {
+  return (
+    <Card className="h-full">
+      {item.imageUrl && (
+        <div className="relative w-full h-32 overflow-hidden rounded-t-lg">
+          <img
+            src={item.imageUrl}
+            alt={item.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="font-semibold leading-tight line-clamp-2">
+            {item.name}
+          </h3>
+          <div className="flex items-center gap-1 shrink-0">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => onEdit(item)}
+            >
+              <Pencil className="h-3.5 w-3.5" />
+              <span className="sr-only">Edit</span>
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-destructive hover:text-destructive"
+              onClick={() => onDelete(item)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+              <span className="sr-only">Delete</span>
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Badge
+            className={cn(
+              "text-[11px]",
+              CATEGORY_COLORS[item.category] || CATEGORY_COLORS.SPIRITS
+            )}
+          >
+            {CATEGORY_LABELS[item.category] || item.category}
+          </Badge>
+          <Badge
+            className={cn(
+              "text-[11px]",
+              QUANTITY_COLORS[item.quantity] || QUANTITY_COLORS.FULL
+            )}
+          >
+            {QUANTITY_LABELS[item.quantity] || item.quantity}
+          </Badge>
+        </div>
+
+        {item.notes && (
+          <p className="text-sm text-muted-foreground line-clamp-2">
+            {item.notes}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/bar/bar-item-form.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectOption } from "@/components/ui/select"
+import { DrinkImageUpload } from "@/components/drinks/drink-image-upload"
+import { Barcode } from "lucide-react"
+import type { BarItemCreate } from "@/lib/validators"
+
+const CATEGORIES = [
+  { value: "SPIRITS", label: "Spirits" },
+  { value: "LIQUEURS", label: "Liqueurs" },
+  { value: "MIXERS", label: "Mixers" },
+  { value: "BITTERS", label: "Bitters" },
+  { value: "GARNISHES", label: "Garnishes" },
+  { value: "TOOLS", label: "Tools" },
+]
+
+const QUANTITIES = [
+  { value: "FULL", label: "Full" },
+  { value: "HALF", label: "Half" },
+  { value: "LOW", label: "Low" },
+  { value: "EMPTY", label: "Empty" },
+]
+
+interface BarItemFormProps {
+  initialData?: Partial<BarItemCreate> & { imageUrl?: string | null }
+  onSubmit: (data: BarItemCreate) => void
+  isSubmitting?: boolean
+  submitLabel?: string
+}
+
+export function BarItemForm({
+  initialData,
+  onSubmit,
+  isSubmitting = false,
+  submitLabel = "Save Item",
+}: BarItemFormProps) {
+  const [name, setName] = useState(initialData?.name || "")
+  const [category, setCategory] = useState(initialData?.category || "SPIRITS")
+  const [quantity, setQuantity] = useState(initialData?.quantity || "FULL")
+  const [notes, setNotes] = useState(initialData?.notes || "")
+  const [imageUrl, setImageUrl] = useState<string | null>(
+    initialData?.imageUrl || null
+  )
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const barcode = initialData?.barcode
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+
+    const newErrors: Record<string, string> = {}
+    if (!name.trim()) {
+      newErrors.name = "Name is required"
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors)
+      return
+    }
+
+    setErrors({})
+
+    const data: BarItemCreate = {
+      name: name.trim(),
+      category: category as BarItemCreate["category"],
+      quantity: quantity as BarItemCreate["quantity"],
+    }
+
+    if (notes.trim()) data.notes = notes.trim()
+    if (barcode) data.barcode = barcode
+    if (imageUrl) data.imageUrl = imageUrl
+
+    onSubmit(data)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="bar-item-name">
+          Name <span className="text-destructive">*</span>
+        </Label>
+        <Input
+          id="bar-item-name"
+          placeholder="e.g., Maker's Mark Bourbon"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        {errors.name && (
+          <p className="text-sm text-destructive">{errors.name}</p>
+        )}
+        {barcode && (
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Barcode className="h-3 w-3" />
+            <span>UPC: {barcode}</span>
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="bar-item-category">
+            Category <span className="text-destructive">*</span>
+          </Label>
+          <Select
+            id="bar-item-category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value as typeof category)}
+          >
+            {CATEGORIES.map((c) => (
+              <SelectOption key={c.value} value={c.value}>
+                {c.label}
+              </SelectOption>
+            ))}
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="bar-item-quantity">Quantity</Label>
+          <Select
+            id="bar-item-quantity"
+            value={quantity}
+            onChange={(e) => setQuantity(e.target.value as typeof quantity)}
+          >
+            {QUANTITIES.map((q) => (
+              <SelectOption key={q.value} value={q.value}>
+                {q.label}
+              </SelectOption>
+            ))}
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Photo</Label>
+        <DrinkImageUpload imageUrl={imageUrl} onImageChange={setImageUrl} />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="bar-item-notes">Notes</Label>
+          <span className="text-xs text-muted-foreground">
+            {notes.length}/2000
+          </span>
+        </div>
+        <Textarea
+          id="bar-item-notes"
+          placeholder="Brand details, tasting notes, purchase info..."
+          value={notes}
+          onChange={(e) => setNotes(e.target.value.slice(0, 2000))}
+          rows={3}
+        />
+      </div>
+
+      <Button type="submit" className="w-full" disabled={isSubmitting}>
+        {isSubmitting ? "Saving..." : submitLabel}
+      </Button>
+    </form>
+  )
+}

src/components/bar/barcode-scan-dialog.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import { useState, useCallback, useRef, useEffect } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { BarcodeScanner } from "./barcode-scanner"
+import { CameraCapture } from "@/components/scan/camera-capture"
+import { useBarcodeLookup } from "@/hooks/use-barcode-lookup"
+import type { BarcodeLookupResult } from "@/hooks/use-barcode-lookup"
+import { useIdentifyProduct } from "@/hooks/use-identify"
+import { Loader2, AlertCircle, PackageCheck, CheckCircle2, ScanLine, Camera } from "lucide-react"
+
+interface BarcodeScanDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onResult: (result: BarcodeLookupResult) => void
+}
+
+type ScanMode = "barcode" | "photo"
+type Phase = "scanning" | "looking-up" | "found" | "already-exists" | "error"
+
+export function BarcodeScanDialog({
+  open,
+  onOpenChange,
+  onResult,
+}: BarcodeScanDialogProps) {
+  const [scanMode, setScanMode] = useState<ScanMode>("barcode")
+  const [phase, setPhase] = useState<Phase>("scanning")
+  const [scannedBarcode, setScannedBarcode] = useState<string | null>(null)
+  const [existingName, setExistingName] = useState<string | null>(null)
+  const [foundResult, setFoundResult] = useState<BarcodeLookupResult | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const lookup = useBarcodeLookup()
+  const identify = useIdentifyProduct()
+
+  const lookupRef = useRef(lookup)
+  lookupRef.current = lookup
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      const t = setTimeout(() => {
+        setPhase("scanning")
+        setScanMode("barcode")
+        setScannedBarcode(null)
+        setExistingName(null)
+        setFoundResult(null)
+        setErrorMessage(null)
+      }, 300)
+      return () => clearTimeout(t)
+    }
+  }, [open])
+
+  function handleAddToBar() {
+    if (!foundResult) return
+    const result = foundResult
+    onOpenChange(false)
+    setTimeout(() => {
+      onResult(result)
+    }, 250)
+  }
+
+  const handleScan = useCallback(async (barcode: string) => {
+    console.log("[scan-dialog] barcode detected:", barcode)
+    setScannedBarcode(barcode)
+    setPhase("looking-up")
+
+    try {
+      const result = await lookupRef.current.mutateAsync(barcode)
+      console.log("[scan-dialog] lookup result:", result)
+
+      if (result.source === "existing") {
+        setExistingName(result.name)
+        setPhase("already-exists")
+        return
+      }
+
+      setFoundResult(result)
+      setPhase("found")
+    } catch (err) {
+      console.error("[scan-dialog] lookup error:", err)
+      setErrorMessage("Could not identify this barcode. You can try again or add the item manually.")
+      setPhase("error")
+    }
+  }, [])
+
+  async function handlePhotoCapture(file: File) {
+    setPhase("looking-up")
+
+    try {
+      // Convert file to base64
+      const buffer = await file.arrayBuffer()
+      const base64 = btoa(
+        new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), "")
+      )
+
+      const result = await identify.mutateAsync({
+        imageBase64: base64,
+        mimeType: file.type || "image/jpeg",
+        context: "bar",
+      })
+
+      // Convert IdentifyResult to BarcodeLookupResult format
+      const lookupResult: BarcodeLookupResult = {
+        name: result.name,
+        brand: result.brewery || null,
+        category: result.category || null,
+        barcode: "",
+        source: "ai" as const,
+      }
+
+      setFoundResult(lookupResult)
+      setPhase("found")
+    } catch (err) {
+      console.error("[scan-dialog] photo identify error:", err)
+      setErrorMessage("Could not identify this product from the photo. Try a clearer image or add the item manually.")
+      setPhase("error")
+    }
+  }
+
+  function switchMode(mode: ScanMode) {
+    setScanMode(mode)
+    setPhase("scanning")
+    setErrorMessage(null)
+  }
+
+  const dialogTitle = scanMode === "barcode" ? "Scan Barcode" : "Identify by Photo"
+  const dialogDesc =
+    phase === "scanning"
+      ? scanMode === "barcode"
+        ? "Point your camera at the barcode on a bottle or can."
+        : "Take a photo of the bottle or label."
+      : phase === "looking-up"
+        ? scanMode === "barcode" ? "Looking up the product..." : "Identifying the product..."
+        : phase === "found"
+          ? "Product identified!"
+          : phase === "already-exists"
+            ? "This item is already in your bar."
+            : "Something went wrong."
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+          <DialogDescription>{dialogDesc}</DialogDescription>
+        </DialogHeader>
+
+        {/* Mode toggle — only show during scanning phase */}
+        {phase === "scanning" && (
+          <div className="flex rounded-lg border overflow-hidden">
+            <button
+              className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+                scanMode === "barcode"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted/50 text-muted-foreground hover:bg-muted"
+              }`}
+              onClick={() => switchMode("barcode")}
+            >
+              <ScanLine className="h-4 w-4" />
+              Scan Barcode
+            </button>
+            <button
+              className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+                scanMode === "photo"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted/50 text-muted-foreground hover:bg-muted"
+              }`}
+              onClick={() => switchMode("photo")}
+            >
+              <Camera className="h-4 w-4" />
+              Take Photo
+            </button>
+          </div>
+        )}
+
+        {/* Scanning phase */}
+        {phase === "scanning" && scanMode === "barcode" && (
+          <BarcodeScanner
+            onScan={handleScan}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+
+        {phase === "scanning" && scanMode === "photo" && (
+          <CameraCapture
+            onCapture={handlePhotoCapture}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+
+        {/* Looking up phase */}
+        {phase === "looking-up" && (
+          <div className="flex flex-col items-center gap-4 py-12">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <div className="text-center">
+              <p className="font-medium">
+                {scanMode === "barcode" ? "Looking up product..." : "AI is identifying the product..."}
+              </p>
+              {scannedBarcode && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  Barcode: {scannedBarcode}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Found phase */}
+        {phase === "found" && foundResult && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <CheckCircle2 className="h-8 w-8 text-green-500" />
+            <div className="text-center">
+              <p className="font-medium">Product found!</p>
+              <p className="text-lg font-semibold mt-1">
+                {foundResult.brand && foundResult.name
+                  ? `${foundResult.brand} ${foundResult.name}`
+                  : foundResult.name || "Unknown product"}
+              </p>
+              {foundResult.category && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  Category: {foundResult.category}
+                </p>
+              )}
+              {scannedBarcode && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  UPC: {scannedBarcode}
+                </p>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setFoundResult(null)
+                  setScannedBarcode(null)
+                  setPhase("scanning")
+                }}
+              >
+                Scan Another
+              </Button>
+              <Button onClick={handleAddToBar}>
+                Add to Bar
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Already exists phase */}
+        {phase === "already-exists" && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <PackageCheck className="h-8 w-8 text-primary" />
+            <div className="text-center">
+              <p className="font-medium">Already in your bar!</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                &ldquo;{existingName}&rdquo; is already in your inventory.
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setPhase("scanning")}
+              >
+                Scan Another
+              </Button>
+              <Button onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Error phase */}
+        {phase === "error" && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <AlertCircle className="h-8 w-8 text-destructive" />
+            <div className="text-center">
+              <p className="font-medium text-destructive">
+                {scanMode === "barcode" ? "Lookup failed" : "Identification failed"}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {errorMessage || "Something went wrong. Please try again."}
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setErrorMessage(null)
+                  setPhase("scanning")
+                }}
+              >
+                Try Again
+              </Button>
+              <Button onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/bar/barcode-scanner.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Camera, X, AlertCircle } from "lucide-react"
+
+interface BarcodeScannerProps {
+  onScan: (barcode: string) => void
+  onClose: () => void
+}
+
+export function BarcodeScanner({ onScan, onClose }: BarcodeScannerProps) {
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const scannerRef = useRef<unknown>(null)
+  const stoppedRef = useRef(false)
+  const onScanRef = useRef(onScan)
+  onScanRef.current = onScan
+  const containerRef = useRef<string>("barcode-reader-" + Math.random().toString(36).slice(2))
+
+  useEffect(() => {
+    let mounted = true
+    stoppedRef.current = false
+
+    async function startScanner() {
+      try {
+        // Dynamic import to avoid SSR issues
+        const { Html5Qrcode } = await import("html5-qrcode")
+
+        if (!mounted) return
+
+        const scanner = new Html5Qrcode(containerRef.current)
+        scannerRef.current = scanner
+
+        await scanner.start(
+          { facingMode: "environment" },
+          {
+            fps: 10,
+            qrbox: { width: 250, height: 100 },
+            aspectRatio: 1.0,
+          },
+          (decodedText) => {
+            // Prevent double-fire
+            if (stoppedRef.current) return
+            stoppedRef.current = true
+
+            // Mark scanner as handled so cleanup doesn't double-stop
+            scannerRef.current = null
+
+            // Stop camera then report result
+            scanner.stop().then(() => {
+              if (mounted) onScanRef.current(decodedText)
+            }).catch(() => {
+              if (mounted) onScanRef.current(decodedText)
+            })
+          },
+          () => {
+            // Per-frame decode failure — ignore
+          }
+        )
+
+        if (mounted) setLoading(false)
+      } catch (err) {
+        if (!mounted) return
+        setLoading(false)
+
+        const isInsecure = typeof window !== "undefined" && window.location.protocol === "http:" && window.location.hostname !== "localhost"
+
+        if (err instanceof Error) {
+          if (err.message.includes("Permission") || err.message.includes("NotAllowedError")) {
+            setError(
+              isInsecure
+                ? "Camera blocked — HTTPS is required. Access this page via https:// (port 3000) to use the scanner."
+                : "Camera permission denied. Please allow camera access and try again."
+            )
+          } else if (err.message.includes("NotFoundError") || err.message.includes("Requested device not found")) {
+            setError("No camera found on this device.")
+          } else if (isInsecure) {
+            setError("Camera requires HTTPS. Access this page via https:// (port 3000) to use the scanner.")
+          } else {
+            setError("Could not start camera. Please try again.")
+          }
+        } else if (isInsecure) {
+          setError("Camera requires HTTPS. Access this page via https:// (port 3000) to use the scanner.")
+        } else {
+          setError("Could not start camera. Please try again.")
+        }
+      }
+    }
+
+    startScanner()
+
+    return () => {
+      mounted = false
+      // Only stop if the decode callback didn't already stop it
+      try {
+        const scanner = scannerRef.current as { stop?: () => Promise<void> } | null
+        if (scanner?.stop) {
+          scanner.stop().catch(() => {})
+        }
+      } catch {
+        // Scanner already stopped or disposed
+      }
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className="relative">
+      {/* Close button */}
+      <Button
+        variant="ghost"
+        size="sm"
+        className="absolute top-2 right-2 z-10 h-8 w-8 p-0 bg-black/50 hover:bg-black/70 text-white rounded-full"
+        onClick={onClose}
+      >
+        <X className="h-4 w-4" />
+      </Button>
+
+      {/* Scanner viewport */}
+      <div className="relative rounded-lg overflow-hidden bg-black min-h-[300px]">
+        <div id={containerRef.current} className="w-full" />
+
+        {loading && !error && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-white">
+            <Camera className="h-8 w-8 animate-pulse" />
+            <p className="text-sm">Starting camera...</p>
+          </div>
+        )}
+      </div>
+
+      {/* Instruction text */}
+      {!error && (
+        <p className="text-center text-sm text-muted-foreground mt-3">
+          Point your camera at a barcode on a bottle or can
+        </p>
+      )}
+
+      {/* Error state */}
+      {error && (
+        <div className="flex flex-col items-center gap-3 py-4">
+          <AlertCircle className="h-8 w-8 text-destructive" />
+          <p className="text-sm text-destructive text-center">{error}</p>
+          <Button variant="outline" size="sm" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/bartender/recipe-card.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Check,
+  X,
+  ChevronDown,
+  ChevronUp,
+  Bookmark,
+  Trash2,
+  GlassWater,
+  Loader2,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { RecipeIngredient } from "@/hooks/use-bartender"
+
+export interface RecipeCardData {
+  id?: string
+  title: string
+  ingredients: RecipeIngredient[]
+  steps: string[]
+  garnish?: string | null
+  glassware?: string | null
+  notes?: string | null
+  missingCount?: number
+  sourceDrink?: { name: string; type: string } | null
+}
+
+interface RecipeCardProps {
+  recipe: RecipeCardData
+  onSave?: (recipe: RecipeCardData) => void
+  onDelete?: (id: string) => void
+  isSaving?: boolean
+  isDeleting?: boolean
+  saved?: boolean
+}
+
+export function RecipeCard({
+  recipe,
+  onSave,
+  onDelete,
+  isSaving,
+  isDeleting,
+  saved,
+}: RecipeCardProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  const availableCount = recipe.ingredients.filter((i) => i.available).length
+  const totalCount = recipe.ingredients.length
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-2">
+          <CardTitle className="text-lg leading-tight">
+            {recipe.title}
+          </CardTitle>
+          <div className="flex items-center gap-1 shrink-0">
+            {recipe.missingCount !== undefined && (
+              <Badge
+                variant={recipe.missingCount === 0 ? "default" : "secondary"}
+                className={cn(
+                  "text-xs",
+                  recipe.missingCount === 0 &&
+                    "bg-green-500/15 text-green-700 border-green-500/25"
+                )}
+              >
+                {recipe.missingCount === 0
+                  ? "Ready"
+                  : `Missing ${recipe.missingCount}`}
+              </Badge>
+            )}
+            {!saved && onSave && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onSave(recipe)}
+                disabled={isSaving}
+                className="h-8 w-8 p-0"
+              >
+                {isSaving ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Bookmark className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+            {saved && recipe.id && onDelete && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onDelete(recipe.id!)}
+                disabled={isDeleting}
+                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+              >
+                {isDeleting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Trash2 className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {recipe.glassware && (
+          <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <GlassWater className="h-3.5 w-3.5" />
+            {recipe.glassware}
+          </div>
+        )}
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {/* Ingredients */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <h4 className="text-sm font-medium">
+              Ingredients
+            </h4>
+            <span className="text-xs text-muted-foreground">
+              {availableCount}/{totalCount} available
+            </span>
+          </div>
+          <ul className="space-y-1">
+            {recipe.ingredients.map((ing, i) => (
+              <li
+                key={i}
+                className={cn(
+                  "flex items-center gap-2 text-sm",
+                  !ing.available && "text-muted-foreground"
+                )}
+              >
+                {ing.available ? (
+                  <Check className="h-3.5 w-3.5 text-green-600 shrink-0" />
+                ) : (
+                  <X className="h-3.5 w-3.5 text-destructive shrink-0" />
+                )}
+                <span>
+                  {ing.amount} {ing.name}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* Garnish */}
+        {recipe.garnish && (
+          <p className="text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">Garnish:</span>{" "}
+            {recipe.garnish}
+          </p>
+        )}
+
+        {/* Expandable Steps */}
+        <div>
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+          >
+            {expanded ? (
+              <ChevronUp className="h-4 w-4" />
+            ) : (
+              <ChevronDown className="h-4 w-4" />
+            )}
+            {expanded ? "Hide steps" : "Show steps"}
+          </button>
+
+          {expanded && (
+            <ol className="mt-2 space-y-2">
+              {recipe.steps.map((step, i) => (
+                <li key={i} className="flex gap-2 text-sm">
+                  <span className="shrink-0 flex items-center justify-center h-5 w-5 rounded-full bg-primary/10 text-primary text-xs font-medium">
+                    {i + 1}
+                  </span>
+                  <span>{step}</span>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+
+        {/* Notes */}
+        {expanded && recipe.notes && (
+          <div className="rounded-md bg-muted/50 p-3">
+            <p className="text-sm text-muted-foreground">{recipe.notes}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/bartender/recreate-tab.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard } from "./recipe-card"
+import { useRecreateRecipe, useSaveRecipe } from "@/hooks/use-bartender"
+import { Search, Loader2, Sparkles } from "lucide-react"
+import type { RecipeCardData } from "./recipe-card"
+import type { RecipeCreate } from "@/lib/validators"
+
+interface RecreateTabProps {
+  initialDrink?: string
+}
+
+export function RecreateTab({ initialDrink }: RecreateTabProps) {
+  const [cocktailName, setCocktailName] = useState(initialDrink || "")
+  const [savedId, setSavedId] = useState<string | null>(null)
+  const autoTriggered = useRef(false)
+
+  const recreate = useRecreateRecipe()
+  const saveRecipe = useSaveRecipe()
+
+  // Auto-trigger search when coming from drink detail page
+  useEffect(() => {
+    if (initialDrink && !autoTriggered.current) {
+      autoTriggered.current = true
+      recreate.mutate({ cocktailName: initialDrink })
+    }
+  }, [initialDrink]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // The recipe to display — comes from the mutation result
+  const recipe: RecipeCardData | null = recreate.data
+    ? { ...recreate.data, id: savedId || recreate.data.id }
+    : null
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const name = cocktailName.trim()
+    if (!name) return
+    setSavedId(null)
+    recreate.mutate({ cocktailName: name })
+  }
+
+  function handleSave(recipeData: RecipeCardData) {
+    const payload: RecipeCreate = {
+      title: recipeData.title,
+      ingredients: recipeData.ingredients,
+      steps: recipeData.steps,
+      garnish: recipeData.garnish || null,
+      glassware: recipeData.glassware || null,
+      notes: recipeData.notes || null,
+    }
+    saveRecipe.mutate(payload, {
+      onSuccess: () => {
+        setSavedId("saved")
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-1">Recreate a Cocktail</h3>
+        <p className="text-sm text-muted-foreground">
+          Enter a cocktail name and get a recipe matched against your bar
+          inventory.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <Input
+          placeholder="e.g., Old Fashioned, Margarita, Negroni..."
+          value={cocktailName}
+          onChange={(e) => setCocktailName(e.target.value)}
+          disabled={recreate.isPending}
+        />
+        <Button type="submit" disabled={recreate.isPending || !cocktailName.trim()}>
+          {recreate.isPending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Search className="h-4 w-4" />
+          )}
+        </Button>
+      </form>
+
+      {recreate.isPending && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Sparkles className="h-4 w-4 animate-pulse" />
+            Generating recipe...
+          </div>
+          <Skeleton className="h-[200px] rounded-lg" />
+        </div>
+      )}
+
+      {recreate.isError && (
+        <div className="rounded-md bg-destructive/10 p-3">
+          <p className="text-sm text-destructive">
+            {recreate.error.message || "Failed to generate recipe. Please try again."}
+          </p>
+        </div>
+      )}
+
+      {recipe && !recreate.isPending && (
+        <RecipeCard
+          recipe={recipe}
+          onSave={handleSave}
+          isSaving={saveRecipe.isPending}
+          saved={savedId === "saved" || saveRecipe.isSuccess}
+        />
+      )}
+    </div>
+  )
+}

src/components/bartender/saved-recipes-tab.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard } from "./recipe-card"
+import { useRecipes, useDeleteRecipe } from "@/hooks/use-bartender"
+import { BookOpen } from "lucide-react"
+import { useState } from "react"
+
+export function SavedRecipesTab() {
+  const { data, isLoading, error } = useRecipes()
+  const deleteRecipe = useDeleteRecipe()
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+
+  const recipes = data?.recipes || []
+
+  function handleDelete(id: string) {
+    if (!confirm("Delete this saved recipe?")) return
+    setDeletingId(id)
+    deleteRecipe.mutate(id, {
+      onSettled: () => {
+        setDeletingId(null)
+      },
+    })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {Array.from({ length: 4 }, (_, i) => (
+          <Skeleton key={i} className="h-[200px] rounded-lg" />
+        ))}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-destructive/10 p-3">
+        <p className="text-sm text-destructive">
+          Failed to load saved recipes. Please try again.
+        </p>
+      </div>
+    )
+  }
+
+  if (recipes.length === 0) {
+    return (
+      <div className="text-center py-12 space-y-3">
+        <BookOpen className="h-10 w-10 mx-auto text-muted-foreground/50" />
+        <div>
+          <p className="font-medium">No saved recipes yet</p>
+          <p className="text-sm text-muted-foreground mt-1">
+            Generate a recipe and save it to build your collection.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      {recipes.map((recipe) => (
+        <RecipeCard
+          key={recipe.id}
+          recipe={{
+            id: recipe.id,
+            title: recipe.title,
+            ingredients: recipe.ingredients,
+            steps: recipe.steps,
+            garnish: recipe.garnish,
+            glassware: recipe.glassware,
+            notes: recipe.notes,
+            sourceDrink: recipe.sourceDrink,
+          }}
+          onDelete={handleDelete}
+          isDeleting={deletingId === recipe.id}
+          saved
+        />
+      ))}
+    </div>
+  )
+}

src/components/bartender/suggest-tab.tsx

@@ -0,0 +1,123 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { RecipeCard } from "./recipe-card"
+import { useSuggestCocktails, useSaveRecipe } from "@/hooks/use-bartender"
+import type { SuggestedCocktail } from "@/hooks/use-bartender"
+import { Loader2, Sparkles, Wine } from "lucide-react"
+import type { RecipeCardData } from "./recipe-card"
+import type { RecipeCreate } from "@/lib/validators"
+import { useState } from "react"
+
+export function SuggestTab() {
+  const suggest = useSuggestCocktails()
+  const saveRecipe = useSaveRecipe()
+  const [savedIds, setSavedIds] = useState<Set<number>>(new Set())
+  const [savingIndex, setSavingIndex] = useState<number | null>(null)
+
+  const suggestions: SuggestedCocktail[] =
+    (suggest.data as { suggestions?: SuggestedCocktail[] })?.suggestions || []
+
+  function handleSuggest() {
+    setSavedIds(new Set())
+    suggest.mutate()
+  }
+
+  function handleSave(recipeData: RecipeCardData, index: number) {
+    setSavingIndex(index)
+    const payload: RecipeCreate = {
+      title: recipeData.title,
+      ingredients: recipeData.ingredients,
+      steps: recipeData.steps,
+      garnish: recipeData.garnish || null,
+      glassware: recipeData.glassware || null,
+      notes: null,
+    }
+    saveRecipe.mutate(payload, {
+      onSuccess: () => {
+        setSavedIds((prev) => new Set(prev).add(index))
+        setSavingIndex(null)
+      },
+      onError: () => {
+        setSavingIndex(null)
+      },
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-1">What Can I Make?</h3>
+        <p className="text-sm text-muted-foreground">
+          Get cocktail suggestions based on what you have in your bar.
+        </p>
+      </div>
+
+      <Button onClick={handleSuggest} disabled={suggest.isPending}>
+        {suggest.isPending ? (
+          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+        ) : (
+          <Sparkles className="h-4 w-4 mr-2" />
+        )}
+        {suggest.isPending ? "Thinking..." : "Suggest Cocktails"}
+      </Button>
+
+      {suggest.isPending && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Sparkles className="h-4 w-4 animate-pulse" />
+            Analyzing your bar inventory...
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {Array.from({ length: 4 }, (_, i) => (
+              <Skeleton key={i} className="h-[200px] rounded-lg" />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {suggest.isError && (
+        <div className="rounded-md bg-destructive/10 p-3">
+          <p className="text-sm text-destructive">
+            {suggest.error.message ||
+              "Failed to generate suggestions. Please try again."}
+          </p>
+        </div>
+      )}
+
+      {suggestions.length > 0 && !suggest.isPending && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {suggestions.map((cocktail, i) => (
+            <RecipeCard
+              key={`${cocktail.title}-${i}`}
+              recipe={{
+                title: cocktail.title,
+                ingredients: cocktail.ingredients,
+                steps: cocktail.steps,
+                garnish: cocktail.garnish,
+                glassware: cocktail.glassware,
+                missingCount: cocktail.missingCount,
+              }}
+              onSave={(recipe) => handleSave(recipe, i)}
+              isSaving={savingIndex === i}
+              saved={savedIds.has(i)}
+            />
+          ))}
+        </div>
+      )}
+
+      {suggest.isSuccess && suggestions.length === 0 && (
+        <div className="text-center py-12 space-y-3">
+          <Wine className="h-10 w-10 mx-auto text-muted-foreground/50" />
+          <div>
+            <p className="font-medium">No suggestions available</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Try adding more items to your bar inventory.
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/drinks/drink-card.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link"
 import { Card, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Star } from "lucide-react"
+import { Star, GlassWater } from "lucide-react"
 import { cn } from "@/lib/utils"
 import type { DrinkListItem } from "@/hooks/use-drinks"
 
@@ -30,7 +30,16 @@ interface DrinkCardProps {
 export function DrinkCard({ drink }: DrinkCardProps) {
   return (
     <Link href={`/drinks/${drink.id}`}>
-      <Card className="hover:border-primary/50 transition-colors cursor-pointer h-full">
+      <Card className="hover:border-primary/50 transition-colors cursor-pointer h-full overflow-hidden">
+        {drink.imageUrl && (
+          <div className="h-32 overflow-hidden">
+            <img
+              src={drink.imageUrl}
+              alt={drink.name}
+              className="w-full h-full object-cover rounded-t-lg"
+            />
+          </div>
+        )}
         <CardContent className="p-4 space-y-3">
           <div className="flex items-start justify-between gap-2">
             <h3 className="font-semibold leading-tight line-clamp-2">
@@ -75,12 +84,22 @@ export function DrinkCard({ drink }: DrinkCardProps) {
                 </span>
               )}
             </div>
+            <div className="flex items-center gap-2">
+              <Link
+                href={`/bartender?recreate=${encodeURIComponent(drink.name)}`}
+                onClick={(e) => e.stopPropagation()}
+                className="text-muted-foreground hover:text-primary transition-colors"
+                title="Recreate recipe"
+              >
+                <GlassWater className="h-3.5 w-3.5" />
+              </Link>
               {drink.abv !== null && drink.abv !== undefined && (
                 <span className="text-xs text-muted-foreground">
                   {drink.abv}% ABV
                 </span>
               )}
             </div>
+          </div>
         </CardContent>
       </Card>
     </Link>

src/components/drinks/drink-detail-actions.tsx

@@ -92,6 +92,7 @@ export function DrinkDetailActions({
                 region: drink.region || undefined,
                 abv: drink.abv || undefined,
                 description: drink.description || undefined,
+                imageUrl: drink.imageUrl || undefined,
               }}
               onSubmit={handleUpdate}
               isSubmitting={updateDrink.isPending}

src/components/drinks/drink-detail-image.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { useState } from "react"
+import { DrinkImageUpload } from "./drink-image-upload"
+import { Loader2 } from "lucide-react"
+
+interface DrinkDetailImageProps {
+  drinkId: string
+  currentImageUrl: string | null
+}
+
+export function DrinkDetailImage({ drinkId, currentImageUrl }: DrinkDetailImageProps) {
+  const [imageUrl, setImageUrl] = useState(currentImageUrl)
+  const [saving, setSaving] = useState(false)
+
+  async function handleImageChange(newUrl: string | null) {
+    setImageUrl(newUrl)
+    setSaving(true)
+
+    try {
+      await fetch(`/api/drinks/${drinkId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageUrl: newUrl || undefined }),
+      })
+    } catch (err) {
+      console.error("Failed to update drink image:", err)
+      // Revert on error
+      setImageUrl(currentImageUrl)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="relative">
+      {saving && (
+        <div className="absolute top-2 right-2 z-10 bg-background/80 rounded-full p-1">
+          <Loader2 className="h-4 w-4 animate-spin" />
+        </div>
+      )}
+      <DrinkImageUpload imageUrl={imageUrl} onImageChange={handleImageChange} />
+    </div>
+  )
+}

src/components/drinks/drink-form.tsx

@@ -1,11 +1,24 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useCallback, useRef } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectOption } from "@/components/ui/select"
+import { DrinkImageUpload } from "@/components/drinks/drink-image-upload"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { BarcodeScanner } from "@/components/bar/barcode-scanner"
+import { CameraCapture } from "@/components/scan/camera-capture"
+import { useBarcodeLookup } from "@/hooks/use-barcode-lookup"
+import { useIdentifyProduct } from "@/hooks/use-identify"
+import { ScanLine, Camera, Loader2, CheckCircle2, AlertCircle } from "lucide-react"
 import type { DrinkCreate } from "@/lib/validators"
 
 const DRINK_TYPES = [
@@ -17,12 +30,14 @@ const DRINK_TYPES = [
 ]
 
 interface DrinkFormProps {
-  initialData?: Partial<DrinkCreate>
+  initialData?: Partial<DrinkCreate> & { imageUrl?: string | null }
   onSubmit: (data: DrinkCreate) => void
   isSubmitting?: boolean
   submitLabel?: string
 }
 
+type ScanPhase = "scanning" | "looking-up" | "found" | "error"
+
 export function DrinkForm({
   initialData,
   onSubmit,
@@ -38,8 +53,127 @@ export function DrinkForm({
   const [description, setDescription] = useState(
     initialData?.description || ""
   )
+  const [imageUrl, setImageUrl] = useState<string | null>(
+    initialData?.imageUrl || null
+  )
   const [errors, setErrors] = useState<Record<string, string>>({})
 
+  // Scan dialog state
+  const [scanDialogOpen, setScanDialogOpen] = useState(false)
+  const [scanType, setScanType] = useState<"barcode" | "photo">("barcode")
+  const [scanPhase, setScanPhase] = useState<ScanPhase>("scanning")
+  const [scanError, setScanError] = useState<string | null>(null)
+  const [scanResult, setScanResult] = useState<{
+    name: string
+    type?: string
+    subType?: string
+    brewery?: string
+    abv?: number
+    description?: string
+    imageUrl?: string
+  } | null>(null)
+
+  const lookup = useBarcodeLookup()
+  const identify = useIdentifyProduct()
+  const lookupRef = useRef(lookup)
+  lookupRef.current = lookup
+
+  function fillFormFromResult(result: {
+    name?: string
+    type?: string
+    subType?: string
+    brewery?: string
+    region?: string
+    abv?: number
+    description?: string
+    imageUrl?: string
+  }) {
+    if (result.name) setName(result.name)
+    if (result.type) setType(result.type as typeof type)
+    if (result.subType) setSubType(result.subType)
+    if (result.brewery) setBrewery(result.brewery)
+    if (result.region) setRegion(result.region)
+    if (result.abv) setAbv(result.abv.toString())
+    if (result.description) setDescription(result.description)
+    if (result.imageUrl) setImageUrl(result.imageUrl)
+  }
+
+  function openScanDialog(mode: "barcode" | "photo") {
+    setScanType(mode)
+    setScanPhase("scanning")
+    setScanError(null)
+    setScanResult(null)
+    setScanDialogOpen(true)
+  }
+
+  function closeScanDialog() {
+    setScanDialogOpen(false)
+    setTimeout(() => {
+      setScanPhase("scanning")
+      setScanError(null)
+      setScanResult(null)
+    }, 300)
+  }
+
+  const handleBarcodeScan = useCallback(async (barcode: string) => {
+    setScanPhase("looking-up")
+    try {
+      const result = await lookupRef.current.mutateAsync(barcode)
+      const displayName = result.brand && result.name
+        ? `${result.brand} ${result.name}`
+        : result.name || "Unknown product"
+
+      const found: typeof scanResult & {} = {
+        name: displayName,
+        type: result.type || undefined,
+        subType: result.subType || undefined,
+        abv: result.abv || undefined,
+        imageUrl: result.imageUrl || undefined,
+      }
+      setScanResult(found)
+      setScanPhase("found")
+    } catch {
+      setScanError("Could not identify this barcode.")
+      setScanPhase("error")
+    }
+  }, [])
+
+  async function handlePhotoCaptureForDrink(file: File) {
+    setScanPhase("looking-up")
+    try {
+      const buffer = await file.arrayBuffer()
+      const base64 = btoa(
+        new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), "")
+      )
+
+      const result = await identify.mutateAsync({
+        imageBase64: base64,
+        mimeType: file.type || "image/jpeg",
+        context: "drink",
+      })
+
+      setScanResult({
+        name: result.name,
+        type: result.type,
+        subType: result.subType,
+        brewery: result.brewery,
+        abv: result.abv,
+        description: result.description,
+      })
+      setScanPhase("found")
+    } catch {
+      setScanError("Could not identify this product from the photo.")
+      setScanPhase("error")
+    }
+  }
+
+  function handleAcceptScanResult() {
+    if (scanResult) {
+      fillFormFromResult(scanResult)
+    }
+    closeScanDialog()
+  }
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
 
@@ -70,12 +204,38 @@ export function DrinkForm({
       }
     }
     if (description.trim()) data.description = description.trim()
+    if (imageUrl) data.imageUrl = imageUrl
 
     onSubmit(data)
   }
 
   return (
+    <>
       <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Scan / Photo buttons */}
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => openScanDialog("barcode")}
+          >
+            <ScanLine className="h-4 w-4 mr-2" />
+            Scan Barcode
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => openScanDialog("photo")}
+          >
+            <Camera className="h-4 w-4 mr-2" />
+            Snap Photo
+          </Button>
+        </div>
+
         <div className="space-y-2">
           <Label htmlFor="drink-name">
             Name <span className="text-destructive">*</span>
@@ -167,9 +327,115 @@ export function DrinkForm({
           />
         </div>
 
+        <div className="space-y-2">
+          <Label>Photo</Label>
+          <DrinkImageUpload imageUrl={imageUrl} onImageChange={setImageUrl} />
+        </div>
+
         <Button type="submit" className="w-full" disabled={isSubmitting}>
           {isSubmitting ? "Saving..." : submitLabel}
         </Button>
       </form>
+
+      {/* Scan/Photo Dialog */}
+      <Dialog open={scanDialogOpen} onOpenChange={(open) => { if (!open) closeScanDialog() }}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>
+              {scanType === "barcode" ? "Scan Barcode" : "Identify by Photo"}
+            </DialogTitle>
+            <DialogDescription>
+              {scanPhase === "scanning"
+                ? scanType === "barcode"
+                  ? "Point your camera at the barcode on a bottle or can."
+                  : "Take a photo of the bottle or label."
+                : scanPhase === "looking-up"
+                  ? scanType === "barcode" ? "Looking up the product..." : "AI is identifying the product..."
+                  : scanPhase === "found"
+                    ? "Product identified!"
+                    : "Something went wrong."}
+            </DialogDescription>
+          </DialogHeader>
+
+          {scanPhase === "scanning" && scanType === "barcode" && (
+            <BarcodeScanner
+              onScan={handleBarcodeScan}
+              onClose={closeScanDialog}
+            />
+          )}
+
+          {scanPhase === "scanning" && scanType === "photo" && (
+            <CameraCapture
+              onCapture={handlePhotoCaptureForDrink}
+              onClose={closeScanDialog}
+            />
+          )}
+
+          {scanPhase === "looking-up" && (
+            <div className="flex flex-col items-center gap-4 py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              <p className="font-medium">
+                {scanType === "barcode" ? "Looking up product..." : "AI is identifying..."}
+              </p>
+            </div>
+          )}
+
+          {scanPhase === "found" && scanResult && (
+            <div className="flex flex-col items-center gap-4 py-8">
+              <CheckCircle2 className="h-8 w-8 text-green-500" />
+              <div className="text-center">
+                <p className="font-medium">Product found!</p>
+                <p className="text-lg font-semibold mt-1">{scanResult.name}</p>
+                {scanResult.type && (
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Type: {scanResult.type}
+                    {scanResult.subType ? ` / ${scanResult.subType}` : ""}
+                  </p>
+                )}
+                {scanResult.brewery && (
+                  <p className="text-sm text-muted-foreground">
+                    {scanResult.brewery}
+                  </p>
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => {
+                  setScanResult(null)
+                  setScanPhase("scanning")
+                }}>
+                  Try Again
+                </Button>
+                <Button onClick={handleAcceptScanResult}>
+                  Fill Form
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {scanPhase === "error" && (
+            <div className="flex flex-col items-center gap-4 py-8">
+              <AlertCircle className="h-8 w-8 text-destructive" />
+              <div className="text-center">
+                <p className="font-medium text-destructive">Identification failed</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {scanError || "Something went wrong. Please try again."}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => {
+                  setScanError(null)
+                  setScanPhase("scanning")
+                }}>
+                  Try Again
+                </Button>
+                <Button onClick={closeScanDialog}>
+                  Close
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }

src/components/drinks/drink-image-upload.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import { useRef, useState, useCallback } from "react"
+import { ImagePlus, X, Loader2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface DrinkImageUploadProps {
+  imageUrl?: string | null
+  onImageChange: (url: string | null) => void
+}
+
+export function DrinkImageUpload({
+  imageUrl,
+  onImageChange,
+}: DrinkImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false)
+  const [dragActive, setDragActive] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      setError(null)
+      setIsUploading(true)
+
+      try {
+        const formData = new FormData()
+        formData.append("file", file)
+
+        const res = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+        })
+
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}))
+          throw new Error(body.error || "Failed to upload image")
+        }
+
+        const { url } = await res.json()
+        onImageChange(url)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to upload image")
+      } finally {
+        setIsUploading(false)
+      }
+    },
+    [onImageChange]
+  )
+
+  const handleFile = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("image/")) {
+        setError("Please select an image file")
+        return
+      }
+      uploadFile(file)
+    },
+    [uploadFile]
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setDragActive(false)
+      const file = e.dataTransfer.files[0]
+      if (file) {
+        handleFile(file)
+      }
+    },
+    [handleFile]
+  )
+
+  const handleRemove = () => {
+    onImageChange(null)
+    setError(null)
+    if (fileInputRef.current) fileInputRef.current.value = ""
+  }
+
+  if (imageUrl) {
+    return (
+      <div className="relative">
+        <img
+          src={imageUrl}
+          alt="Drink photo"
+          className="w-full rounded-lg max-h-[300px] object-contain bg-muted"
+        />
+        <Button
+          type="button"
+          variant="destructive"
+          size="icon"
+          className="absolute top-2 right-2"
+          onClick={handleRemove}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div
+        className={cn(
+          "border-2 border-dashed rounded-lg transition-colors",
+          dragActive
+            ? "border-primary bg-primary/5"
+            : "border-muted-foreground/25",
+          isUploading && "pointer-events-none opacity-60"
+        )}
+        onDragOver={(e) => {
+          e.preventDefault()
+          setDragActive(true)
+        }}
+        onDragLeave={() => setDragActive(false)}
+        onDrop={handleDrop}
+      >
+        <div className="flex flex-col items-center gap-3 py-8">
+          {isUploading ? (
+            <>
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">Uploading...</p>
+            </>
+          ) : (
+            <>
+              <ImagePlus className="h-8 w-8 text-muted-foreground" />
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                Upload Photo
+              </Button>
+              <p className="text-xs text-muted-foreground text-center">
+                or drag and drop an image here
+              </p>
+            </>
+          )}
+        </div>
+      </div>
+
+      {error && <p className="text-sm text-destructive mt-1.5">{error}</p>}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/heic"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0]
+          if (file) handleFile(file)
+        }}
+      />
+    </div>
+  )
+}

src/components/drinks/drink-recipes-list.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { RecipeCard } from "@/components/bartender/recipe-card"
+import type { RecipeCardData } from "@/components/bartender/recipe-card"
+
+interface DrinkRecipesListProps {
+  recipes: RecipeCardData[]
+}
+
+export function DrinkRecipesList({ recipes }: DrinkRecipesListProps) {
+  return (
+    <div className="space-y-4">
+      {recipes.map((recipe) => (
+        <RecipeCard
+          key={recipe.id}
+          recipe={recipe}
+          saved
+        />
+      ))}
+    </div>
+  )
+}

src/components/layout/bottom-nav.tsx

@@ -2,15 +2,15 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { LayoutDashboard, Camera, Wine, Bookmark, Settings } from "lucide-react"
+import { LayoutDashboard, Wine, FlaskConical, GlassWater } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { MoreMenu } from "./more-menu"
 
-const navItems = [
+const primaryItems = [
   { href: "/dashboard", label: "Home", icon: LayoutDashboard },
-  { href: "/scan", label: "Scan", icon: Camera },
   { href: "/drinks", label: "Drinks", icon: Wine },
-  { href: "/wishlist", label: "Later", icon: Bookmark },
-  { href: "/settings", label: "Settings", icon: Settings },
+  { href: "/bar", label: "Bar", icon: FlaskConical },
+  { href: "/bartender", label: "Mix", icon: GlassWater },
 ]
 
 export function BottomNav() {
@@ -19,8 +19,8 @@ export function BottomNav() {
   return (
     <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-card border-t safe-area-bottom">
       <div className="flex items-center justify-around h-16">
-        {navItems.map((item) => {
-          const isActive = pathname.startsWith(item.href)
+        {primaryItems.map((item) => {
+          const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
           return (
             <Link
               key={item.href}
@@ -37,6 +37,7 @@ export function BottomNav() {
             </Link>
           )
         })}
+        <MoreMenu />
       </div>
     </nav>
   )

src/components/layout/history-section.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useQuery } from "@tanstack/react-query"
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Search,
+  Camera,
+  Wine,
+  Star,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface RecentSearch {
+  id: string
+  query: string
+  resultCount: number
+  createdAt: string
+}
+
+interface RecentScan {
+  id: string
+  status: string
+  itemCount: number
+  createdAt: string
+}
+
+interface RecentDrink {
+  id: string
+  name: string
+  type: string
+  avgRating: number | null
+  createdAt: string
+}
+
+interface HistoryData {
+  searches: RecentSearch[]
+  scans: RecentScan[]
+  drinks: RecentDrink[]
+}
+
+function useRecentHistory() {
+  return useQuery<HistoryData>({
+    queryKey: ["recent-history"],
+    queryFn: async () => {
+      const [searchRes, scanRes, drinkRes] = await Promise.all([
+        fetch("/api/ai/search/history").then((r) =>
+          r.ok ? r.json() : { searches: [] }
+        ),
+        fetch("/api/scan?limit=5&page=1").then((r) =>
+          r.ok ? r.json() : { scans: [] }
+        ),
+        fetch("/api/drinks?sort=recent&limit=5").then((r) =>
+          r.ok ? r.json() : { drinks: [] }
+        ),
+      ])
+
+      return {
+        searches: (searchRes.searches || []).slice(0, 5).map(
+          (s: { id: string; query: string; results?: { drinks?: unknown[] }; createdAt: string }) => ({
+            id: s.id,
+            query: s.query,
+            resultCount: s.results?.drinks?.length || 0,
+            createdAt: s.createdAt,
+          })
+        ),
+        scans: (scanRes.scans || []).slice(0, 5).map(
+          (s: { id: string; status: string; items?: unknown[]; createdAt: string }) => ({
+            id: s.id,
+            status: s.status,
+            itemCount: s.items?.length || 0,
+            createdAt: s.createdAt,
+          })
+        ),
+        drinks: (drinkRes.drinks || []).slice(0, 5).map(
+          (d: { id: string; name: string; type: string; avgRating: number | null; createdAt: string }) => ({
+            id: d.id,
+            name: d.name,
+            type: d.type,
+            avgRating: d.avgRating,
+            createdAt: d.createdAt,
+          })
+        ),
+      }
+    },
+    staleTime: 30 * 1000, // 30s
+    refetchOnWindowFocus: false,
+  })
+}
+
+function timeAgo(dateStr: string): string {
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diff = now - then
+
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return "just now"
+  if (mins < 60) return `${mins}m ago`
+
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}h ago`
+
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}d ago`
+
+  const weeks = Math.floor(days / 7)
+  if (weeks < 5) return `${weeks}w ago`
+
+  const months = Math.floor(days / 30)
+  return `${months}mo ago`
+}
+
+function CollapsibleSection({
+  title,
+  icon: Icon,
+  children,
+  count,
+  defaultOpen = false,
+}: {
+  title: string
+  icon: React.ComponentType<{ className?: string }>
+  children: React.ReactNode
+  count: number
+  defaultOpen?: boolean
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  if (count === 0) return null
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 w-full px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {open ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <Icon className="h-3.5 w-3.5" />
+        <span>{title}</span>
+        <span className="ml-auto text-[10px] opacity-60">{count}</span>
+      </button>
+      {open && <div className="space-y-0.5 mt-0.5">{children}</div>}
+    </div>
+  )
+}
+
+export function HistorySection() {
+  const { data, isLoading } = useRecentHistory()
+
+  if (isLoading || !data) return null
+
+  const hasAny =
+    data.searches.length > 0 ||
+    data.scans.length > 0 ||
+    data.drinks.length > 0
+
+  if (!hasAny) return null
+
+  return (
+    <div className="border-t px-2 py-3 space-y-1">
+      <div className="flex items-center gap-1.5 px-3 pb-1">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          Recent
+        </span>
+      </div>
+
+      <CollapsibleSection
+        title="Searches"
+        icon={Search}
+        count={data.searches.length}
+        defaultOpen
+      >
+        {data.searches.map((s) => (
+          <Link
+            key={s.id}
+            href="/drinks"
+            className="flex items-center gap-2 px-3 py-1 mx-1 rounded text-xs hover:bg-accent transition-colors group"
+          >
+            <span className="truncate flex-1 text-muted-foreground group-hover:text-foreground">
+              {s.query}
+            </span>
+            <span className="text-[10px] text-muted-foreground/60 shrink-0">
+              {timeAgo(s.createdAt)}
+            </span>
+          </Link>
+        ))}
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Scans"
+        icon={Camera}
+        count={data.scans.length}
+      >
+        {data.scans.map((s) => (
+          <Link
+            key={s.id}
+            href={`/scan/${s.id}`}
+            className="flex items-center gap-2 px-3 py-1 mx-1 rounded text-xs hover:bg-accent transition-colors group"
+          >
+            <span
+              className={cn(
+                "h-1.5 w-1.5 rounded-full shrink-0",
+                s.status === "COMPLETED"
+                  ? "bg-green-500"
+                  : s.status === "FAILED"
+                  ? "bg-red-500"
+                  : "bg-yellow-500"
+              )}
+            />
+            <span className="truncate flex-1 text-muted-foreground group-hover:text-foreground">
+              {s.itemCount} items
+            </span>
+            <span className="text-[10px] text-muted-foreground/60 shrink-0">
+              {timeAgo(s.createdAt)}
+            </span>
+          </Link>
+        ))}
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Drinks"
+        icon={Wine}
+        count={data.drinks.length}
+      >
+        {data.drinks.map((d) => (
+          <Link
+            key={d.id}
+            href={`/drinks/${d.id}`}
+            className="flex items-center gap-2 px-3 py-1 mx-1 rounded text-xs hover:bg-accent transition-colors group"
+          >
+            <span className="truncate flex-1 text-muted-foreground group-hover:text-foreground">
+              {d.name}
+            </span>
+            {d.avgRating !== null && (
+              <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground/60 shrink-0">
+                <Star className="h-2.5 w-2.5 fill-primary text-primary" />
+                {d.avgRating.toFixed(1)}
+              </span>
+            )}
+          </Link>
+        ))}
+      </CollapsibleSection>
+    </div>
+  )
+}

src/components/layout/more-menu.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  Camera,
+  Sparkles,
+  Bookmark,
+  Settings,
+  MoreHorizontal,
+  X,
+  BookOpen,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const moreItems = [
+  { href: "/scan", label: "Scan Menu", icon: Camera },
+  { href: "/recipes", label: "Recipes", icon: BookOpen },
+  { href: "/recommend", label: "For You", icon: Sparkles },
+  { href: "/wishlist", label: "Try Later", icon: Bookmark },
+  { href: "/settings", label: "Settings", icon: Settings },
+]
+
+export function MoreMenu() {
+  const [open, setOpen] = useState(false)
+  const pathname = usePathname()
+
+  const isActiveInMore = moreItems.some((item) =>
+    pathname === item.href || pathname.startsWith(item.href + "/")
+  )
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex flex-col items-center gap-1 px-3 py-2 text-xs font-medium transition-colors min-w-[64px]",
+          open || isActiveInMore ? "text-primary" : "text-muted-foreground"
+        )}
+      >
+        {open ? (
+          <X className="h-5 w-5" />
+        ) : (
+          <MoreHorizontal className="h-5 w-5" />
+        )}
+        More
+      </button>
+
+      {open && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setOpen(false)}
+          />
+
+          {/* Menu */}
+          <div className="absolute bottom-full right-0 mb-2 z-50 bg-card border rounded-lg shadow-lg p-2 min-w-[160px]">
+            {moreItems.map((item) => {
+              const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  onClick={() => setOpen(false)}
+                  className={cn(
+                    "flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
+                    isActive
+                      ? "bg-primary/10 text-primary"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.label}
+                </Link>
+              )
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

src/components/layout/sidebar.tsx

@@ -11,14 +11,23 @@ import {
   Settings,
   LogOut,
   Beer,
+  FlaskConical,
+  GlassWater,
+  Sparkles,
+  BookOpen,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { HistorySection } from "./history-section"
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { href: "/scan", label: "Scan Menu", icon: Camera },
   { href: "/drinks", label: "My Drinks", icon: Wine },
+  { href: "/bar", label: "My Bar", icon: FlaskConical },
+  { href: "/bartender", label: "Bartender", icon: GlassWater },
+  { href: "/recipes", label: "Recipes", icon: BookOpen },
+  { href: "/recommend", label: "Recommend", icon: Sparkles },
   { href: "/wishlist", label: "Try Later", icon: Bookmark },
   { href: "/settings", label: "Settings", icon: Settings },
 ]
@@ -37,7 +46,7 @@ export function Sidebar() {
 
         <nav className="flex-1 px-2 space-y-1">
           {navItems.map((item) => {
-            const isActive = pathname.startsWith(item.href)
+            const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
             return (
               <Link
                 key={item.href}
@@ -56,6 +65,8 @@ export function Sidebar() {
           })}
         </nav>
 
+        <HistorySection />
+
         <div className="p-4 border-t">
           {session?.user && (
             <div className="flex items-center gap-3 mb-3">

src/components/recommend/flavor-profile-card.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  RefreshCw,
+  Sparkles,
+  AlertTriangle,
+  ThumbsUp,
+  ThumbsDown,
+  Compass,
+} from "lucide-react"
+import type { FlavorProfile, FlavorProfileData } from "@/hooks/use-recommend"
+
+interface FlavorProfileCardProps {
+  profile: FlavorProfile | null
+  isLoading: boolean
+  isGenerating: boolean
+  error: Error | null
+  generateError: Error | null
+  onGenerate: () => void
+}
+
+export function FlavorProfileCard({
+  profile,
+  isLoading,
+  isGenerating,
+  error,
+  generateError,
+  onGenerate,
+}: FlavorProfileCardProps) {
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-6 w-40" />
+          <Skeleton className="h-4 w-64" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-20 w-full" />
+          <div className="flex gap-2">
+            <Skeleton className="h-6 w-16" />
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-6 w-14" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            My Flavor Profile
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-destructive">
+            Failed to load your flavor profile. Please try again.
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!profile) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-primary" />
+            My Flavor Profile
+          </CardTitle>
+          <CardDescription>
+            Generate an AI-powered analysis of your taste preferences based on
+            your drink ratings.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="text-center py-4">
+            <Sparkles className="h-10 w-10 mx-auto text-muted-foreground/40 mb-3" />
+            <p className="text-sm text-muted-foreground mb-4">
+              Rate at least 3 drinks to unlock your personalized flavor profile.
+            </p>
+            <Button onClick={onGenerate} disabled={isGenerating}>
+              {isGenerating ? (
+                <>
+                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                  Analyzing...
+                </>
+              ) : (
+                <>
+                  <Sparkles className="h-4 w-4 mr-2" />
+                  Generate Profile
+                </>
+              )}
+            </Button>
+          </div>
+          {generateError && (
+            <p className="text-sm text-destructive text-center">
+              {generateError.message}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const data = profile.profileData as FlavorProfileData | null
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Sparkles className="h-5 w-5 text-primary" />
+              My Flavor Profile
+            </CardTitle>
+            <CardDescription>
+              Based on {profile.ratingCount} rating
+              {profile.ratingCount !== 1 ? "s" : ""}
+              {" -- "}
+              updated{" "}
+              {new Date(profile.generatedAt).toLocaleDateString()}
+            </CardDescription>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onGenerate}
+            disabled={isGenerating}
+          >
+            {isGenerating ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        {profile.isStale && (
+          <div className="flex items-center gap-2 text-sm text-amber-600 bg-amber-50 dark:bg-amber-950/30 px-3 py-2 rounded-md mt-2">
+            <AlertTriangle className="h-4 w-4 shrink-0" />
+            <span>
+              You have {profile.currentRatingCount - profile.ratingCount} new
+              rating{profile.currentRatingCount - profile.ratingCount !== 1 ? "s" : ""}{" "}
+              since your last profile update. Refresh to get an updated profile.
+            </span>
+          </div>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-sm leading-relaxed">{profile.profileText}</p>
+
+        {data && (
+          <>
+            {data.topFlavors && data.topFlavors.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  <ThumbsUp className="h-3.5 w-3.5" />
+                  Flavors You Love
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {data.topFlavors.map((flavor) => (
+                    <Badge key={flavor} variant="secondary">
+                      {flavor}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {data.avoidFlavors && data.avoidFlavors.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  <ThumbsDown className="h-3.5 w-3.5" />
+                  Flavors to Avoid
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {data.avoidFlavors.map((flavor) => (
+                    <Badge key={flavor} variant="outline">
+                      {flavor}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {data.preferredTypes && data.preferredTypes.length > 0 && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  Preferred Styles
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {data.preferredTypes.map((type) => (
+                    <Badge key={type}>{type}</Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {data.adventureScore != null && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                  <Compass className="h-3.5 w-3.5" />
+                  Adventure Score
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-primary rounded-full transition-all"
+                      style={{
+                        width: `${Math.round(data.adventureScore * 100)}%`,
+                      }}
+                    />
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    {Math.round(data.adventureScore * 100)}%
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {data.adventureScore >= 0.7
+                    ? "You love trying new and different things!"
+                    : data.adventureScore >= 0.4
+                      ? "You have a nice balance between favorites and new discoveries."
+                      : "You know what you like and stick to it."}
+                </p>
+              </div>
+            )}
+          </>
+        )}
+
+        {generateError && (
+          <p className="text-sm text-destructive">
+            {generateError.message}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/recommend/recommendation-card.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+const TYPE_COLORS: Record<string, string> = {
+  BEER: "bg-amber-500/15 text-amber-700 border-amber-500/25",
+  WINE: "bg-rose-500/15 text-rose-700 border-rose-500/25",
+  COCKTAIL: "bg-purple-500/15 text-purple-700 border-purple-500/25",
+  SPIRIT: "bg-sky-500/15 text-sky-700 border-sky-500/25",
+  OTHER: "bg-slate-500/15 text-slate-700 border-slate-500/25",
+}
+
+const TYPE_LABELS: Record<string, string> = {
+  BEER: "Beer",
+  WINE: "Wine",
+  COCKTAIL: "Cocktail",
+  SPIRIT: "Spirit",
+  OTHER: "Other",
+}
+
+interface RecommendationCardProps {
+  name: string
+  type: string
+  subType?: string
+  brewery?: string
+  reason: string
+  score: number
+  scoreLabel?: string
+}
+
+export function RecommendationCard({
+  name,
+  type,
+  subType,
+  brewery,
+  reason,
+  score,
+  scoreLabel = "Match",
+}: RecommendationCardProps) {
+  const percentage = Math.round(score * 100)
+
+  return (
+    <Card className="overflow-hidden">
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex-1 min-w-0">
+            <h4 className="font-semibold leading-tight">{name}</h4>
+            {subType && (
+              <p className="text-sm text-muted-foreground mt-0.5">
+                {subType}
+              </p>
+            )}
+            {brewery && (
+              <p className="text-sm text-muted-foreground">{brewery}</p>
+            )}
+          </div>
+          <Badge
+            className={cn(
+              "shrink-0 text-[11px]",
+              TYPE_COLORS[type] || TYPE_COLORS.OTHER
+            )}
+          >
+            {TYPE_LABELS[type] || type}
+          </Badge>
+        </div>
+
+        <p className="text-sm text-muted-foreground leading-relaxed">
+          {reason}
+        </p>
+
+        <div className="flex items-center gap-2">
+          <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+            <div
+              className={cn(
+                "h-full rounded-full transition-all",
+                percentage >= 80
+                  ? "bg-green-500"
+                  : percentage >= 60
+                    ? "bg-yellow-500"
+                    : "bg-orange-500"
+              )}
+              style={{ width: `${percentage}%` }}
+            />
+          </div>
+          <span className="text-xs text-muted-foreground whitespace-nowrap">
+            {percentage}% {scoreLabel}
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/recommend/similar-section.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Select } from "@/components/ui/select"
+import { GitCompareArrows, RefreshCw } from "lucide-react"
+import { RecommendationCard } from "./recommendation-card"
+import { useSimilarDrinks } from "@/hooks/use-recommend"
+import type { SimilarDrink } from "@/hooks/use-recommend"
+
+interface DrinkOption {
+  id: string
+  name: string
+  type: string
+}
+
+interface SimilarSectionProps {
+  drinks: DrinkOption[]
+  drinksLoading: boolean
+}
+
+export function SimilarSection({
+  drinks,
+  drinksLoading,
+}: SimilarSectionProps) {
+  const [selectedDrinkId, setSelectedDrinkId] = useState("")
+  const similarDrinks = useSimilarDrinks()
+  const [results, setResults] = useState<SimilarDrink[]>([])
+  const [sourceName, setSourceName] = useState("")
+
+  function handleFindSimilar() {
+    if (!selectedDrinkId) return
+
+    similarDrinks.mutate(
+      { drinkId: selectedDrinkId },
+      {
+        onSuccess: (data) => {
+          setResults(data.recommendations)
+          setSourceName(data.sourceDrink)
+        },
+      }
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <GitCompareArrows className="h-5 w-5 text-primary" />
+          Find Similar Drinks
+        </CardTitle>
+        <CardDescription>
+          Pick a drink you love and discover similar ones you might enjoy.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {drinksLoading ? (
+          <Skeleton className="h-10 w-full" />
+        ) : drinks.length === 0 ? (
+          <div className="text-center py-4">
+            <p className="text-sm text-muted-foreground">
+              Add some drinks to your collection to find similar ones.
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="flex flex-col sm:flex-row gap-3">
+              <div className="flex-1">
+                <Select
+                  value={selectedDrinkId}
+                  onChange={(e) => setSelectedDrinkId(e.target.value)}
+                  disabled={similarDrinks.isPending}
+                >
+                  <option value="">Select a drink...</option>
+                  {drinks.map((drink) => (
+                    <option key={drink.id} value={drink.id}>
+                      {drink.name} ({drink.type.charAt(0) + drink.type.slice(1).toLowerCase()})
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              <Button
+                onClick={handleFindSimilar}
+                disabled={!selectedDrinkId || similarDrinks.isPending}
+                className="sm:w-auto"
+              >
+                {similarDrinks.isPending ? (
+                  <>
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    Searching...
+                  </>
+                ) : (
+                  <>
+                    <GitCompareArrows className="h-4 w-4 mr-2" />
+                    Find Similar
+                  </>
+                )}
+              </Button>
+            </div>
+
+            {similarDrinks.isPending && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {Array.from({ length: 3 }, (_, i) => (
+                  <Skeleton key={i} className="h-[140px] rounded-lg" />
+                ))}
+              </div>
+            )}
+
+            {similarDrinks.isError && (
+              <p className="text-sm text-destructive">
+                {similarDrinks.error.message}
+              </p>
+            )}
+
+            {results.length > 0 && !similarDrinks.isPending && (
+              <>
+                <p className="text-sm text-muted-foreground">
+                  Drinks similar to <span className="font-medium text-foreground">{sourceName}</span>:
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {results.map((drink, i) => (
+                    <RecommendationCard
+                      key={`${drink.name}-${i}`}
+                      name={drink.name}
+                      type={drink.type}
+                      subType={drink.subType}
+                      brewery={drink.brewery}
+                      reason={drink.reason}
+                      score={drink.similarity}
+                      scoreLabel="Similar"
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/recommend/suggest-section.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Lightbulb, RefreshCw } from "lucide-react"
+import { RecommendationCard } from "./recommendation-card"
+import { useSuggestDrinks } from "@/hooks/use-recommend"
+import type { DrinkSuggestion } from "@/hooks/use-recommend"
+
+interface SuggestSectionProps {
+  hasProfile: boolean
+}
+
+export function SuggestSection({ hasProfile }: SuggestSectionProps) {
+  const [mood, setMood] = useState("")
+  const [occasion, setOccasion] = useState("")
+  const suggestDrinks = useSuggestDrinks()
+  const [results, setResults] = useState<DrinkSuggestion[]>([])
+
+  function handleSuggest() {
+    suggestDrinks.mutate(
+      {
+        mood: mood.trim() || undefined,
+        occasion: occasion.trim() || undefined,
+      },
+      {
+        onSuccess: (data) => {
+          setResults(data.recommendations)
+        },
+      }
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Lightbulb className="h-5 w-5 text-primary" />
+          What Should I Drink?
+        </CardTitle>
+        <CardDescription>
+          Get personalized drink suggestions based on your flavor profile.
+          Optionally add your mood or the occasion.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {!hasProfile ? (
+          <div className="text-center py-4">
+            <p className="text-sm text-muted-foreground">
+              Generate your flavor profile above to unlock personalized
+              suggestions.
+            </p>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="mood"
+                  className="text-sm font-medium text-muted-foreground"
+                >
+                  Mood (optional)
+                </label>
+                <Input
+                  id="mood"
+                  placeholder='e.g., "Relaxed", "Celebrating"'
+                  value={mood}
+                  onChange={(e) => setMood(e.target.value)}
+                  disabled={suggestDrinks.isPending}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="occasion"
+                  className="text-sm font-medium text-muted-foreground"
+                >
+                  Occasion (optional)
+                </label>
+                <Input
+                  id="occasion"
+                  placeholder='e.g., "Dinner party", "After work"'
+                  value={occasion}
+                  onChange={(e) => setOccasion(e.target.value)}
+                  disabled={suggestDrinks.isPending}
+                />
+              </div>
+            </div>
+
+            <Button
+              onClick={handleSuggest}
+              disabled={suggestDrinks.isPending}
+              className="w-full sm:w-auto"
+            >
+              {suggestDrinks.isPending ? (
+                <>
+                  <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                  Finding drinks...
+                </>
+              ) : (
+                <>
+                  <Lightbulb className="h-4 w-4 mr-2" />
+                  Suggest Drinks
+                </>
+              )}
+            </Button>
+
+            {suggestDrinks.isPending && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {Array.from({ length: 3 }, (_, i) => (
+                  <Skeleton key={i} className="h-[140px] rounded-lg" />
+                ))}
+              </div>
+            )}
+
+            {suggestDrinks.isError && (
+              <p className="text-sm text-destructive">
+                {suggestDrinks.error.message}
+              </p>
+            )}
+
+            {results.length > 0 && !suggestDrinks.isPending && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {results.map((drink, i) => (
+                  <RecommendationCard
+                    key={`${drink.name}-${i}`}
+                    name={drink.name}
+                    type={drink.type}
+                    subType={drink.subType}
+                    brewery={drink.brewery}
+                    reason={drink.reason}
+                    score={drink.matchScore}
+                    scoreLabel="Match"
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/hooks/use-bar.ts

@@ -0,0 +1,83 @@
+"use client"
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import type { BarItemCreate, BarItemUpdate } from "@/lib/validators"
+
+export interface BarItem {
+  id: string
+  userId: string
+  name: string
+  category: "SPIRITS" | "LIQUEURS" | "MIXERS" | "BITTERS" | "GARNISHES" | "TOOLS"
+  quantity: "FULL" | "HALF" | "LOW" | "EMPTY"
+  notes: string | null
+  barcode: string | null
+  imageUrl: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface BarItemsResponse {
+  items: BarItem[]
+}
+
+async function fetchWithError(url: string, options?: RequestInit) {
+  const res = await fetch(url, options)
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.error || `Request failed with status ${res.status}`)
+  }
+  return res.json()
+}
+
+export function useBarItems() {
+  return useQuery<BarItemsResponse>({
+    queryKey: ["bar-items"],
+    queryFn: () => fetchWithError("/api/bar"),
+  })
+}
+
+export function useCreateBarItem() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: BarItemCreate) =>
+      fetchWithError("/api/bar", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["bar-items"] })
+    },
+  })
+}
+
+export function useUpdateBarItem() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: BarItemUpdate }) =>
+      fetchWithError(`/api/bar/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["bar-items"] })
+    },
+  })
+}
+
+export function useDeleteBarItem() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) =>
+      fetchWithError(`/api/bar/${id}`, {
+        method: "DELETE",
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["bar-items"] })
+    },
+  })
+}

src/hooks/use-barcode-lookup.ts

@@ -0,0 +1,33 @@
+"use client"
+
+import { useMutation } from "@tanstack/react-query"
+
+export interface BarcodeLookupResult {
+  barcode: string
+  name: string | null
+  brand: string | null
+  category: string | null
+  source: "openfoodfacts" | "ai" | "existing" | "not_found"
+  existingId?: string
+  imageUrl?: string | null
+  type?: string | null
+  abv?: number | null
+  subType?: string | null
+}
+
+export function useBarcodeLookup() {
+  return useMutation<BarcodeLookupResult, Error, string>({
+    mutationFn: async (barcode: string) => {
+      const res = await fetch("/api/bar/barcode-lookup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ barcode }),
+      })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body.error || "Lookup failed")
+      }
+      return res.json()
+    },
+  })
+}

src/hooks/use-bartender.ts

@@ -0,0 +1,102 @@
+"use client"
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import type { RecipeCreate } from "@/lib/validators"
+
+export interface RecipeIngredient {
+  name: string
+  amount: string
+  available: boolean
+}
+
+export interface Recipe {
+  id: string
+  userId: string
+  title: string
+  ingredients: RecipeIngredient[]
+  steps: string[]
+  garnish: string | null
+  glassware: string | null
+  sourceDrinkId: string | null
+  notes: string | null
+  createdAt: string
+  updatedAt: string
+  sourceDrink?: { name: string; type: string } | null
+}
+
+export interface SuggestedCocktail {
+  title: string
+  ingredients: RecipeIngredient[]
+  steps: string[]
+  garnish?: string
+  glassware?: string
+  missingCount: number
+}
+
+async function fetchWithError(url: string, options?: RequestInit) {
+  const res = await fetch(url, options)
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.error || `Request failed with status ${res.status}`)
+  }
+  return res.json()
+}
+
+export function useRecreateRecipe() {
+  return useMutation({
+    mutationFn: (data: { cocktailName: string; drinkId?: string }) =>
+      fetchWithError("/api/bartender/recreate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }),
+  })
+}
+
+export function useSuggestCocktails() {
+  return useMutation({
+    mutationFn: () =>
+      fetchWithError("/api/bartender/suggest", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      }),
+  })
+}
+
+export function useRecipes() {
+  return useQuery<{ recipes: Recipe[] }>({
+    queryKey: ["recipes"],
+    queryFn: () => fetchWithError("/api/recipes"),
+  })
+}
+
+export function useSaveRecipe() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: RecipeCreate) =>
+      fetchWithError("/api/recipes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recipes"] })
+    },
+  })
+}
+
+export function useDeleteRecipe() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (id: string) =>
+      fetchWithError(`/api/recipes/${id}`, {
+        method: "DELETE",
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recipes"] })
+    },
+  })
+}

src/hooks/use-identify.ts

@@ -0,0 +1,39 @@
+import { useMutation } from "@tanstack/react-query"
+
+export interface IdentifyResult {
+  name: string
+  type: "BEER" | "WINE" | "COCKTAIL" | "SPIRIT" | "OTHER"
+  subType?: string
+  brewery?: string
+  region?: string
+  abv?: number
+  description?: string
+  category?: string // Only for context="bar"
+}
+
+interface IdentifyRequest {
+  imageBase64: string
+  mimeType: string
+  context: "drink" | "bar"
+}
+
+async function identifyProduct(data: IdentifyRequest): Promise<IdentifyResult> {
+  const res = await fetch("/api/ai/identify", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  })
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Unknown error" }))
+    throw new Error(err.error || "Failed to identify product")
+  }
+
+  return res.json()
+}
+
+export function useIdentifyProduct() {
+  return useMutation({
+    mutationFn: identifyProduct,
+  })
+}

src/hooks/use-recommend.ts

@@ -0,0 +1,99 @@
+"use client"
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+
+export interface FlavorProfileData {
+  summary: string
+  topFlavors: string[]
+  avoidFlavors: string[]
+  preferredTypes: string[]
+  adventureScore: number
+}
+
+export interface FlavorProfile {
+  id: string
+  profileText: string
+  profileData: FlavorProfileData | null
+  generatedAt: string
+  ratingCount: number
+  isStale: boolean
+  currentRatingCount: number
+}
+
+export interface DrinkSuggestion {
+  name: string
+  type: string
+  subType?: string
+  brewery?: string
+  reason: string
+  matchScore: number
+}
+
+export interface SimilarDrink {
+  name: string
+  type: string
+  subType?: string
+  brewery?: string
+  reason: string
+  similarity: number
+}
+
+async function fetchWithError(url: string, options?: RequestInit) {
+  const res = await fetch(url, options)
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.error || `Request failed with status ${res.status}`)
+  }
+  return res.json()
+}
+
+export function useFlavorProfile() {
+  return useQuery<{ profile: FlavorProfile | null }>({
+    queryKey: ["flavorProfile"],
+    queryFn: () => fetchWithError("/api/recommend/profile"),
+  })
+}
+
+export function useGenerateFlavorProfile() {
+  const queryClient = useQueryClient()
+
+  return useMutation<{ profile: FlavorProfile }>({
+    mutationFn: () =>
+      fetchWithError("/api/recommend/profile", {
+        method: "POST",
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["flavorProfile"] })
+    },
+  })
+}
+
+export function useSuggestDrinks() {
+  return useMutation<
+    { recommendations: DrinkSuggestion[] },
+    Error,
+    { mood?: string; occasion?: string }
+  >({
+    mutationFn: (data) =>
+      fetchWithError("/api/recommend/suggest", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }),
+  })
+}
+
+export function useSimilarDrinks() {
+  return useMutation<
+    { recommendations: SimilarDrink[]; sourceDrink: string },
+    Error,
+    { drinkId: string }
+  >({
+    mutationFn: (data) =>
+      fetchWithError("/api/recommend/similar", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      }),
+  })
+}

src/lib/ai/prompts.ts

@@ -166,3 +166,133 @@ Do not include any text before or after the JSON array. Example format:
   }
 ]`
 }
+
+export const COCKTAIL_RECIPE_PROMPT = `You are an expert bartender and cocktail specialist. Generate a detailed cocktail recipe.
+
+The user's home bar inventory is provided. For each ingredient, indicate whether the user has it.
+
+## User's Bar Inventory
+{barInventory}
+
+## Instructions
+Create a recipe for the requested cocktail. Return a valid JSON object:
+- "title" (string): Cocktail name
+- "ingredients" (array): Each { "name": string, "amount": string, "available": boolean }
+- "steps" (string array): Step-by-step instructions
+- "garnish" (string, optional): Garnish description
+- "glassware" (string, optional): Recommended glass
+- "notes" (string, optional): Tips, variations, or history
+
+Mark ingredients available:true if a matching item exists in bar inventory.
+When checking availability, match flexibly:
+- Ignore brand names — "Angostura Aromatic Bitters" matches "Angostura bitters" or just "bitters"
+- Match the core ingredient identity — "simple syrup" matches "Simple Syrup", "bourbon" matches "Maker's Mark Bourbon"
+- If the bar inventory lists a specific brand/product that IS the ingredient type, mark it available
+- Be generous — if the user clearly has something that serves the same purpose, mark it available
+
+Do not include text before or after the JSON.`
+
+export const WHAT_CAN_I_MAKE_PROMPT = `You are an expert bartender. Based on the user's bar inventory, suggest cocktails they can make.
+
+## User's Bar Inventory
+{barInventory}
+
+## Instructions
+Suggest cocktails prioritizing those where ALL ingredients are available, then those missing 1-2 ingredients.
+
+Return a valid JSON array of objects:
+- "title" (string): Cocktail name
+- "ingredients" (array): Each { "name": string, "amount": string, "available": boolean }
+- "steps" (string array): Brief preparation steps
+- "garnish" (string, optional)
+- "glassware" (string, optional)
+- "missingCount" (number): How many ingredients missing (0 = can make now)
+
+Sort by missingCount ascending. Return up to 10.
+When checking availability, match flexibly:
+- Ignore brand names — "Angostura Aromatic Bitters" matches "Angostura bitters" or just "bitters"
+- Match the core ingredient identity — "simple syrup" matches "Simple Syrup", "bourbon" matches "Maker's Mark Bourbon"
+- If the bar inventory lists a specific brand/product that IS the ingredient type, mark it available
+- Be generous — if the user clearly has something that serves the same purpose, mark it available
+
+Do not include text before or after the JSON.`
+
+export function buildBarInventoryString(items: { name: string; category: string; quantity: string }[]): string {
+  const byCategory: Record<string, string[]> = {}
+  for (const item of items) {
+    if (item.quantity === "EMPTY") continue
+    if (!byCategory[item.category]) byCategory[item.category] = []
+    byCategory[item.category].push(`${item.name} (${item.quantity.toLowerCase()})`)
+  }
+  return Object.entries(byCategory)
+    .map(([cat, items]) => `### ${cat}\n${items.map(i => `- ${i}`).join('\n')}`)
+    .join('\n\n') || 'No items in bar inventory.'
+}
+
+export const FLAVOR_PROFILE_PROMPT = `You are an expert sommelier and drink taste profiler. Analyze the user's drink history and ratings to build a flavor profile.
+
+## User's Rated Drinks
+{drinkHistory}
+
+## Instructions
+Create a comprehensive flavor profile. Return a valid JSON object:
+- "summary" (string): 2-3 sentence natural language summary
+- "topFlavors" (string array): Top 5-8 flavor descriptors they prefer
+- "avoidFlavors" (string array): Flavors they tend to dislike
+- "preferredTypes" (string array): Preferred drink types/styles
+- "adventureScore" (number, 0-1): How adventurous/varied their choices are
+
+Do not include text before or after the JSON.`
+
+export const RECOMMEND_DRINK_PROMPT = `You are a drink recommendation expert. Based on the user's flavor profile and context, suggest drinks they'd enjoy.
+
+## User's Flavor Profile
+{flavorProfile}
+
+## Additional Context
+{context}
+
+## Instructions
+Recommend 3-5 drinks. Return a valid JSON array of objects:
+- "name" (string): Specific drink name
+- "type" (string): BEER, WINE, COCKTAIL, SPIRIT, or OTHER
+- "subType" (string, optional): Style
+- "brewery" (string, optional): Producer
+- "reason" (string): 1-2 sentence personalized explanation
+- "matchScore" (number, 0-1): How well it matches their profile
+
+Sort by matchScore descending. Do not include text before or after the JSON.`
+
+export const SIMILAR_DRINK_PROMPT = `You are a drink expert. The user loves a specific drink and wants similar ones.
+
+## Drink They Love
+{sourceDrink}
+
+## User's Flavor Profile
+{flavorProfile}
+
+## Instructions
+Suggest 3-5 similar drinks. Return a valid JSON array of objects:
+- "name" (string): Specific drink name
+- "type" (string): BEER, WINE, COCKTAIL, SPIRIT, or OTHER
+- "subType" (string, optional): Style
+- "brewery" (string, optional): Producer
+- "reason" (string): Why it's similar and why they'd like it
+- "similarity" (number, 0-1): How similar to the source drink
+
+Sort by similarity descending. Do not include text before or after the JSON.`
+
+export function buildDrinkHistoryString(drinks: { name: string; type: string; subType?: string | null; brewery?: string | null; avgRating: number | null; ratingCount: number; wouldReorder: boolean }[]): string {
+  return drinks
+    .filter(d => d.avgRating !== null)
+    .sort((a, b) => (b.avgRating ?? 0) - (a.avgRating ?? 0))
+    .map(d => {
+      const parts = [`${d.name} (${d.type})`]
+      if (d.subType) parts.push(`Style: ${d.subType}`)
+      if (d.brewery) parts.push(`From: ${d.brewery}`)
+      parts.push(`Rating: ${d.avgRating}/5 (${d.ratingCount} rating${d.ratingCount !== 1 ? 's' : ''})`)
+      if (d.wouldReorder) parts.push('Would reorder: Yes')
+      return `- ${parts.join(' | ')}`
+    })
+    .join('\n') || 'No rated drinks yet.'
+}

src/lib/ai/types.ts

@@ -42,6 +42,8 @@ export interface DrinkSearchResult {
 
 export interface AIProvider {
   name: string
+  sendTextRequest(systemPrompt: string, userMessage: string): Promise<string>
+  sendVisionRequest(systemPrompt: string, imageBase64: string, mimeType: string): Promise<string>
   extractMenuItems(imageBase64: string, mimeType: string): Promise<MenuExtractionResult>
   recommendDrinks(
     extractedItems: ExtractedMenuItem[],

src/lib/backup.ts

@@ -6,6 +6,7 @@ import type {
   WishlistItem,
   UserPreference,
   SharedList,
+  BarItem,
 } from "@prisma/client"
 import crypto from "crypto"
 
@@ -39,6 +40,8 @@ const CSV_HEADERS = [
   "minAbv",
   "maxAbv",
   "defaultProvider",
+  "category",
+  "quantity",
   "createdAt",
   "updatedAt",
 ]
@@ -87,6 +90,16 @@ export interface ParsedWishlistItem {
   updatedAt?: Date
 }
 
+export interface ParsedBarItem {
+  _originalId: string
+  name: string
+  category: string
+  quantity: string
+  notes?: string
+  createdAt?: Date
+  updatedAt?: Date
+}
+
 export interface ParsedPreferences {
   preferredStyles: string[]
   avoidedStyles: string[]
@@ -112,6 +125,7 @@ export interface ParsedBackupData {
   wishlistItems: ParsedWishlistItem[]
   preferences: ParsedPreferences | null
   sharedLists: ParsedSharedList[]
+  barItems: ParsedBarItem[]
 }
 
 export interface RestoreSummary {
@@ -120,6 +134,7 @@ export interface RestoreSummary {
   wishlist: { created: number; updated: number; skipped: number }
   preferences: { restored: boolean }
   sharedLists: { created: number; updated: number; skipped: number }
+  barItems: { created: number; updated: number; skipped: number }
 }
 
 // ─── Export ─────────────────────────────────────────────────────
@@ -129,7 +144,8 @@ export function generateBackupCsv(
   ratings: (Rating & { drink: { name: string } })[],
   wishlistItems: WishlistItem[],
   preferences: UserPreference | null,
-  sharedLists: SharedList[]
+  sharedLists: SharedList[],
+  barItems: BarItem[] = []
 ): string {
   const rows: Record<string, string>[] = []
 
@@ -212,6 +228,20 @@ export function generateBackupCsv(
     })
   }
 
+  // Bar items
+  for (const b of barItems) {
+    rows.push({
+      _type: "bar_item",
+      _originalId: b.id,
+      name: b.name,
+      category: b.category,
+      quantity: b.quantity,
+      notes: b.notes ?? "",
+      createdAt: b.createdAt.toISOString(),
+      updatedAt: b.updatedAt.toISOString(),
+    })
+  }
+
   return objectsToCsv(CSV_HEADERS, rows)
 }
 
@@ -243,6 +273,7 @@ export function parseBackupRows(
     wishlistItems: [],
     preferences: null,
     sharedLists: [],
+    barItems: [],
   }
 
   for (const row of rows) {
@@ -341,6 +372,18 @@ export function parseBackupRows(
         })
         break
 
+      case "bar_item":
+        data.barItems.push({
+          _originalId: row._originalId ?? "",
+          name: row.name ?? "",
+          category: row.category ?? "SPIRITS",
+          quantity: row.quantity ?? "FULL",
+          notes: row.notes || undefined,
+          createdAt: parseOptionalDate(row.createdAt ?? ""),
+          updatedAt: parseOptionalDate(row.updatedAt ?? ""),
+        })
+        break
+
       // Skip unknown row types
     }
   }
@@ -390,6 +433,29 @@ export function validateBackupData(
     if (!s.title) errors.push(`Shared list row ${i + 1}: title is required`)
   }
 
+  const VALID_BAR_CATEGORIES = [
+    "SPIRITS",
+    "LIQUEURS",
+    "MIXERS",
+    "BITTERS",
+    "GARNISHES",
+    "TOOLS",
+  ]
+  const VALID_BAR_QUANTITIES = ["FULL", "HALF", "LOW", "EMPTY"]
+
+  for (let i = 0; i < data.barItems.length; i++) {
+    const b = data.barItems[i]
+    if (!b.name) errors.push(`Bar item row ${i + 1}: name is required`)
+    if (!VALID_BAR_CATEGORIES.includes(b.category))
+      errors.push(
+        `Bar item row ${i + 1}: invalid category "${b.category}". Expected one of: ${VALID_BAR_CATEGORIES.join(", ")}`
+      )
+    if (!VALID_BAR_QUANTITIES.includes(b.quantity))
+      errors.push(
+        `Bar item row ${i + 1}: invalid quantity "${b.quantity}". Expected one of: ${VALID_BAR_QUANTITIES.join(", ")}`
+      )
+  }
+
   return { valid: errors.length === 0, errors }
 }
 
@@ -397,6 +463,8 @@ export function validateBackupData(
 
 type RestoreMode = "merge-skip" | "merge-update" | "replace"
 type DrinkType = "BEER" | "WINE" | "COCKTAIL" | "SPIRIT" | "OTHER"
+type BarItemCategory = "SPIRITS" | "LIQUEURS" | "MIXERS" | "BITTERS" | "GARNISHES" | "TOOLS"
+type BarItemQuantity = "FULL" | "HALF" | "LOW" | "EMPTY"
 
 export async function executeRestore(
   userId: string,
@@ -411,6 +479,7 @@ export async function executeRestore(
         wishlist: { created: 0, updated: 0, skipped: 0 },
         preferences: { restored: false },
         sharedLists: { created: 0, updated: 0, skipped: 0 },
+        barItems: { created: 0, updated: 0, skipped: 0 },
       }
 
       // STEP 0: If "replace", delete everything first
@@ -420,6 +489,7 @@ export async function executeRestore(
         await tx.drink.deleteMany({ where: { userId } })
         await tx.wishlistItem.deleteMany({ where: { userId } })
         await tx.userPreference.deleteMany({ where: { userId } })
+        await tx.barItem.deleteMany({ where: { userId } })
       }
 
       // STEP 1: Preferences
@@ -723,6 +793,55 @@ export async function executeRestore(
         }
       }
 
+      // STEP 6: Bar items
+      for (const item of data.barItems) {
+        if (mode === "replace") {
+          await tx.barItem.create({
+            data: {
+              userId,
+              name: item.name,
+              category: item.category as BarItemCategory,
+              quantity: item.quantity as BarItemQuantity,
+              notes: item.notes ?? null,
+            },
+          })
+          summary.barItems.created++
+        } else {
+          const existing = await tx.barItem.findFirst({
+            where: {
+              userId,
+              name: item.name,
+              category: item.category as BarItemCategory,
+            },
+          })
+          if (existing) {
+            if (mode === "merge-update") {
+              await tx.barItem.update({
+                where: { id: existing.id },
+                data: {
+                  quantity: item.quantity as BarItemQuantity,
+                  notes: item.notes ?? null,
+                },
+              })
+              summary.barItems.updated++
+            } else {
+              summary.barItems.skipped++
+            }
+          } else {
+            await tx.barItem.create({
+              data: {
+                userId,
+                name: item.name,
+                category: item.category as BarItemCategory,
+                quantity: item.quantity as BarItemQuantity,
+                notes: item.notes ?? null,
+              },
+            })
+            summary.barItems.created++
+          }
+        }
+      }
+
       return summary
     },
     { timeout: 60000 }

src/lib/ingredient-matcher.ts

@@ -0,0 +1,68 @@
+/**
+ * Post-process AI-generated recipe ingredients to fix incorrect
+ * available:false flags using fuzzy string matching against bar inventory.
+ */
+
+interface Ingredient {
+  name: string
+  amount: string
+  available: boolean
+}
+
+interface BarItemForMatching {
+  name: string
+}
+
+// Common words to ignore during matching
+const STOP_WORDS = new Set([
+  "of", "or", "and", "the", "a", "an", "to", "for", "in", "on",
+  "fresh", "large", "small", "whole", "crushed", "muddled",
+  "oz", "ml", "cl", "dash", "dashes", "splash", "tsp", "tbsp",
+  "cup", "part", "parts", "slice", "slices", "piece", "pieces",
+  "cube", "cubes", "drop", "drops", "sprig", "sprigs", "leaf", "leaves",
+])
+
+function getSignificantWords(text: string): string[] {
+  return text
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((w) => w.length > 2 && !STOP_WORDS.has(w))
+}
+
+export function fuzzyMatchIngredients(
+  ingredients: Ingredient[],
+  barItems: BarItemForMatching[]
+): Ingredient[] {
+  if (barItems.length === 0) return ingredients
+
+  const barItemNames = barItems.map((item) => item.name.toLowerCase())
+
+  return ingredients.map((ingredient) => {
+    if (ingredient.available) return ingredient
+
+    const ingName = ingredient.name.toLowerCase()
+
+    const matched = barItemNames.some((barName) => {
+      // Direct substring match in either direction
+      if (barName.includes(ingName)) return true
+      if (ingName.includes(barName)) return true
+
+      // Word-level: all significant words of the ingredient appear
+      // somewhere across bar item names
+      const ingWords = getSignificantWords(ingName)
+      if (ingWords.length > 0) {
+        return ingWords.every((word) =>
+          barItemNames.some((bn) => bn.includes(word))
+        )
+      }
+
+      return false
+    })
+
+    return matched ? { ...ingredient, available: true } : ingredient
+  })
+}
+
+export function recalculateMissingCount(ingredients: Ingredient[]): number {
+  return ingredients.filter((i) => !i.available).length
+}

src/lib/s3.ts

@@ -31,9 +31,8 @@ export async function uploadImage(
     })
   )
 
-  const useSSL = process.env.MINIO_USE_SSL === "true"
-  const protocol = useSSL ? "https" : "http"
-  return `${protocol}://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${BUCKET}/${key}`
+  // Return relative URL through Next.js proxy — works from any device
+  return `/minio-images/${key}`
 }
 
 export async function getImage(key: string) {
@@ -56,7 +55,6 @@ export async function deleteImage(key: string) {
 }
 
 export function getImageUrl(key: string): string {
-  const useSSL = process.env.MINIO_USE_SSL === "true"
-  const protocol = useSSL ? "https" : "http"
-  return `${protocol}://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${BUCKET}/${key}`
+  // Return relative URL through Next.js proxy — works from any device
+  return `/minio-images/${key}`
 }

src/lib/validators.ts

@@ -71,3 +71,32 @@ export type UserPreferenceInput = z.infer<typeof userPreferenceSchema>
 export type WishlistCreate = z.infer<typeof wishlistCreateSchema>
 export type SharedListCreate = z.infer<typeof sharedListCreateSchema>
 export type SharedListUpdate = z.infer<typeof sharedListUpdateSchema>
+
+export const barItemCreateSchema = z.object({
+  name: z.string().min(1, "Name is required").max(200),
+  category: z.enum(["SPIRITS", "LIQUEURS", "MIXERS", "BITTERS", "GARNISHES", "TOOLS"]),
+  quantity: z.enum(["FULL", "HALF", "LOW", "EMPTY"]).default("FULL"),
+  notes: z.string().max(2000).optional(),
+  barcode: z.string().max(50).optional(),
+  imageUrl: z.string().url().optional().or(z.literal("")),
+})
+
+export const barItemUpdateSchema = barItemCreateSchema.partial()
+
+export type BarItemCreate = z.infer<typeof barItemCreateSchema>
+export type BarItemUpdate = z.infer<typeof barItemUpdateSchema>
+
+export const recipeCreateSchema = z.object({
+  title: z.string().min(1).max(200),
+  ingredients: z.array(z.object({
+    name: z.string(),
+    amount: z.string(),
+    available: z.boolean(),
+  })),
+  steps: z.array(z.string()),
+  garnish: z.string().max(200).optional().nullable(),
+  glassware: z.string().max(200).optional().nullable(),
+  sourceDrinkId: z.string().optional().nullable(),
+  notes: z.string().max(2000).optional().nullable(),
+})
+export type RecipeCreate = z.infer<typeof recipeCreateSchema>

src/middleware.ts

@@ -8,5 +8,6 @@ export const config = {
     "/rate/:path*",
     "/settings/:path*",
     "/wishlist/:path*",
+    "/recipes/:path*",
   ],
 }