Add My Bar, Bartender, Recommend features + drink images

- Drink Images: upload/display photos of bottles/cans on drink cards and detail pages - My Bar: inventory tracker for spirits, liqueurs, mixers, bitters, garnishes, tools - Bartender: AI-powered cocktail recipe generation, "what can I make" suggestions, saved recipes. Cross-references bar inventory for ingredient availability. - Recommend: AI flavor profile analysis, personalized drink recommendations, "find similar" drinks based on highly-rated favorites - Navigation: desktop sidebar with all 8 routes, mobile bottom nav with 4 primary items + "More" popup menu - New Prisma models: BarItem, Recipe, FlavorProfile - Backup/restore updated to include bar items Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-01 18:28:02 -07:00
parent d8f069cce4
commit 2ac2c4b2d4
40 changed files with 3709 additions and 11 deletions
--- a/prisma/schema.prisma
+++ b/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,72 @@ 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
+  createdAt DateTime        @default(now())
+  updatedAt DateTime        @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+  @@index([userId, category])
+}
+
+// ─── 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)
+}
--- a/src/app/(app)/bar/page.tsx
+++ b/src/app/(app)/bar/page.tsx
@@ -0,0 +1,243 @@
+"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 { Plus, Wine } 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 [editingItem, setEditingItem] = useState<BarItem | null>(null)
+
+  const { data, isLoading, error } = useBarItems()
+  const createBarItem = useCreateBarItem()
+  const updateBarItem = useUpdateBarItem()
+  const deleteBarItem = useDeleteBarItem()
+
+  function handleCreate(formData: BarItemCreate) {
+    createBarItem.mutate(formData, {
+      onSuccess: () => {
+        setAddDialogOpen(false)
+      },
+    })
+  }
+
+  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>
+          <Button onClick={() => setAddDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Item
+          </Button>
+        </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>
+
+      {/* Add Item Dialog */}
+      <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[550px]">
+          <DialogHeader>
+            <DialogTitle>Add Bar Item</DialogTitle>
+            <DialogDescription>
+              Add a spirit, mixer, or other item to your bar inventory.
+            </DialogDescription>
+          </DialogHeader>
+          <BarItemForm
+            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,
+                }}
+                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>
+  )
+}
--- a/src/app/(app)/bartender/page.tsx
+++ b/src/app/(app)/bartender/page.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import { Suspense, useState } from "react"
+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 [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 />}
+        {activeTab === "suggest" && <SuggestTab />}
+        {activeTab === "saved" && <SavedRecipesTab />}
+      </div>
+    </div>
+  )
+}
--- a/src/app/(app)/drinks/[id]/page.tsx
+++ b/src/app/(app)/drinks/[id]/page.tsx
@@ -74,6 +74,15 @@ export default async function DrinkDetailPage({
          Back to Collection
        </Link>

+        {/* Drink Image */}
+        {drink.imageUrl && (
+          <img
+            src={drink.imageUrl}
+            alt={drink.name}
+            className="w-full max-h-[400px] object-contain rounded-lg bg-muted"
+          />
+        )}
+
        {/* Main Info Card */}
        <Card>
          <CardHeader>
--- a/src/app/(app)/recommend/page.tsx
+++ b/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>
+  )
+}
--- a/src/app/api/bar/[id]/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/src/app/api/bar/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/src/app/api/bartender/recreate/route.ts
+++ b/src/app/api/bartender/recreate/route.ts
@@ -0,0 +1,93 @@
+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 { 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")
+        }
+      }
+    }
+
+    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 }
+    )
+  }
+}
--- a/src/app/api/bartender/suggest/route.ts
+++ b/src/app/api/bartender/suggest/route.ts
@@ -0,0 +1,91 @@
+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"
+
+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 = []
+    }
+
+    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 }
+    )
+  }
+}
--- a/src/app/api/recipes/[id]/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/src/app/api/recipes/route.ts
+++ b/src/app/api/recipes/route.ts
@@ -0,0 +1,72 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { recipeCreateSchema } from "@/lib/validators"
+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 = await prisma.recipe.findMany({
+      where: { userId: session.user.id },
+      orderBy: { createdAt: "desc" },
+      include: {
+        sourceDrink: {
+          select: { name: true, type: true },
+        },
+      },
+    })
+
+    return NextResponse.json({ recipes })
+  } 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 }
+    )
+  }
+}
--- a/src/app/api/recommend/profile/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/src/app/api/recommend/similar/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/src/app/api/recommend/suggest/route.ts
+++ b/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 }
+    )
+  }
+}
--- a/src/app/api/settings/backup/route.ts
+++ b/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]
--- a/src/components/bar/bar-category-group.tsx
+++ b/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>
+  )
+}
--- a/src/components/bar/bar-item-card.tsx
+++ b/src/components/bar/bar-item-card.tsx
@@ -0,0 +1,105 @@
+"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">
+      <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>
+  )
+}
--- a/src/components/bar/bar-item-form.tsx
+++ b/src/components/bar/bar-item-form.tsx
@@ -0,0 +1,144 @@
+"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 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>
+  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 [errors, setErrors] = useState<Record<string, string>>({})
+
+  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()
+
+    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>
+        )}
+      </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">
+        <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>
+  )
+}
--- a/src/components/bartender/recipe-card.tsx
+++ b/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>
+  )
+}
--- a/src/components/bartender/recreate-tab.tsx
+++ b/src/components/bartender/recreate-tab.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { useState } 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"
+
+export function RecreateTab() {
+  const [cocktailName, setCocktailName] = useState("")
+  const [recipe, setRecipe] = useState<RecipeCardData | null>(null)
+
+  const recreate = useRecreateRecipe()
+  const saveRecipe = useSaveRecipe()
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    const name = cocktailName.trim()
+    if (!name) return
+
+    recreate.mutate(
+      { cocktailName: name },
+      {
+        onSuccess: (data) => {
+          setRecipe(data)
+        },
+      }
+    )
+  }
+
+  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: () => {
+        setRecipe((prev) =>
+          prev ? { ...prev, id: "saved" } : prev
+        )
+      },
+    })
+  }
+
+  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={recipe.id === "saved" || saveRecipe.isSuccess}
+        />
+      )}
+    </div>
+  )
+}
--- a/src/components/bartender/saved-recipes-tab.tsx
+++ b/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>
+  )
+}
--- a/src/components/bartender/suggest-tab.tsx
+++ b/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>
+  )
+}
--- a/src/components/drinks/drink-card.tsx
+++ b/src/components/drinks/drink-card.tsx
@@ -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">
--- a/src/components/drinks/drink-detail-actions.tsx
+++ b/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}
--- a/src/components/drinks/drink-form.tsx
+++ b/src/components/drinks/drink-form.tsx
@@ -6,6 +6,7 @@ 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 type { DrinkCreate } from "@/lib/validators"

 const DRINK_TYPES = [
@@ -17,7 +18,7 @@ const DRINK_TYPES = [
 ]

 interface DrinkFormProps {
-  initialData?: Partial<DrinkCreate>
+  initialData?: Partial<DrinkCreate> & { imageUrl?: string | null }
  onSubmit: (data: DrinkCreate) => void
  isSubmitting?: boolean
  submitLabel?: string
@@ -38,6 +39,9 @@ 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>>({})

  function handleSubmit(e: React.FormEvent) {
@@ -70,6 +74,7 @@ export function DrinkForm({
      }
    }
    if (description.trim()) data.description = description.trim()
+    if (imageUrl) data.imageUrl = imageUrl

    onSubmit(data)
  }
@@ -167,6 +172,11 @@ 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>
--- a/src/components/drinks/drink-image-upload.tsx
+++ b/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>
+  )
+}
--- a/src/components/layout/bottom-nav.tsx
+++ b/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,7 +19,7 @@ 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) => {
+        {primaryItems.map((item) => {
          const isActive = pathname.startsWith(item.href)
          return (
            <Link
@@ -37,6 +37,7 @@ export function BottomNav() {
            </Link>
          )
        })}
+        <MoreMenu />
      </div>
    </nav>
  )
--- a/src/components/layout/more-menu.tsx
+++ b/src/components/layout/more-menu.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  Camera,
+  Sparkles,
+  Bookmark,
+  Settings,
+  MoreHorizontal,
+  X,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const moreItems = [
+  { href: "/scan", label: "Scan Menu", icon: Camera },
+  { 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.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.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>
+  )
+}
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -11,6 +11,9 @@ import {
  Settings,
  LogOut,
  Beer,
+  FlaskConical,
+  GlassWater,
+  Sparkles,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -19,6 +22,9 @@ 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: "/recommend", label: "Recommend", icon: Sparkles },
  { href: "/wishlist", label: "Try Later", icon: Bookmark },
  { href: "/settings", label: "Settings", icon: Settings },
 ]
--- a/src/components/recommend/flavor-profile-card.tsx
+++ b/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>
+  )
+}
--- a/src/components/recommend/recommendation-card.tsx
+++ b/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>
+  )
+}
--- a/src/components/recommend/similar-section.tsx
+++ b/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>
+  )
+}
--- a/src/components/recommend/suggest-section.tsx
+++ b/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>
+  )
+}
--- a/src/hooks/use-bar.ts
+++ b/src/hooks/use-bar.ts
@@ -0,0 +1,81 @@
+"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
+  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"] })
+    },
+  })
+}
--- a/src/hooks/use-bartender.ts
+++ b/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"] })
+    },
+  })
+}
--- a/src/hooks/use-recommend.ts
+++ b/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),
+      }),
+  })
+}
--- a/src/lib/ai/prompts.ts
+++ b/src/lib/ai/prompts.ts
@@ -166,3 +166,119 @@ 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 only if matching item exists in bar inventory. 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. 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.'
+}
--- a/src/lib/ai/types.ts
+++ b/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[],
--- a/src/lib/backup.ts
+++ b/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 }
--- a/src/lib/validators.ts
+++ b/src/lib/validators.ts
@@ -71,3 +71,30 @@ 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(),
+})
+
+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>