fix: hydrate Rocky manuals from shared Convex catalog

app/manuals/page.tsx

@@ -3,16 +3,10 @@ export const dynamic = "force-dynamic"
 import { existsSync } from 'fs'
 import { join } from 'path'
 import { Metadata } from 'next'
-import { PublicInset, PublicPageHeader } from '@/components/public-surface'
 import { businessConfig } from '@/lib/seo-config'
-import { ManualsPageShell } from '@/components/manuals-page-shell'
+import { ManualsPageExperience } from '@/components/manuals-page-experience'
 import { listConvexManuals } from '@/lib/convex-service'
-import {
-  scanManuals,
-  groupManuals,
-  getManufacturers,
-  getCategories,
-} from '@/lib/manuals'
+import { scanManuals } from '@/lib/manuals'
 import { selectManualsForSite } from '@/lib/manuals-site-selection'
 import { generateStructuredData } from '@/lib/seo'
 import { getManualsThumbnailsRoot } from '@/lib/manuals-paths'
@@ -98,11 +92,6 @@ export default async function ManualsPage() {
       : { ...manual, thumbnailUrl: undefined }
   })
   
-  // 4. Group and get unique lists
-  const groupedManuals = groupManuals(manuals)
-  const manufacturers = getManufacturers(manuals)
-  const categories = getCategories(manuals)
-
   // Generate structured data for SEO
   const structuredData = generateStructuredData({
     title: 'Vending Machine Manuals',
@@ -147,26 +136,7 @@ export default async function ManualsPage() {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionSchema) }}
       />
       <div className="container mx-auto px-4 py-8 md:py-12">
-        <PublicPageHeader
-          eyebrow="Manual Library"
-          title="Vending Machine Manuals"
-          description="Download manuals, service guides, and parts documentation for hundreds of vending machine models. Browse by manufacturer, machine type, or search by model details."
-        >
-          <PublicInset className="inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
-            <span>
-              <strong>{manuals.length}</strong> manuals available from <strong>{manufacturers.length}</strong> manufacturers
-            </span>
-          </PublicInset>
-        </PublicPageHeader>
-
-        <div className="mt-8 md:mt-10">
-          <ManualsPageShell
-          manuals={manuals}
-          groupedManuals={groupedManuals}
-          manufacturers={manufacturers}
-          categories={categories}
-          />
-        </div>
+        <ManualsPageExperience initialManuals={manuals} />
       </div>
     </>
   )

components/manuals-dashboard-client.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { fetchPublishedManualsDashboard } from '@/lib/manuals-live-catalog'
 import { 
   BarChart3, 
   FileText, 
@@ -32,29 +33,51 @@ interface ManualsDashboardClientProps {
 
 export function ManualsDashboardClient({ data }: ManualsDashboardClientProps) {
   const [searchTerm, setSearchTerm] = useState('')
+  const [liveData, setLiveData] = useState(data)
+
+  useEffect(() => {
+    let cancelled = false
+
+    void (async () => {
+      const refreshed = await fetchPublishedManualsDashboard()
+      if (cancelled || !refreshed) {
+        return
+      }
+
+      setLiveData((current) => {
+        const currentCount = Array.isArray(current?.metadata) ? current.metadata.length : 0
+        const refreshedCount = Array.isArray(refreshed?.metadata) ? refreshed.metadata.length : 0
+        return refreshedCount > currentCount ? refreshed : current
+      })
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
 
   // Calculate statistics
   const stats = useMemo(() => {
-    const missing = data.missingManuals?.summary || {}
-    const qaCategories = data.qaData.reduce((acc: any, item: any) => {
+    const missing = liveData.missingManuals?.summary || {}
+    const qaCategories = liveData.qaData.reduce((acc: any, item: any) => {
       const cat = item.category || 'unknown'
       acc[cat] = (acc[cat] || 0) + 1
       return acc
     }, {})
 
-    const metadataWithSpecs = data.metadata.filter((m: any) => 
+    const metadataWithSpecs = liveData.metadata.filter((m: any) => 
       m.specifications?.dimensions && Object.keys(m.specifications.dimensions).length > 0
     ).length
 
-    const metadataWithParts = data.metadata.filter((m: any) => 
+    const metadataWithParts = liveData.metadata.filter((m: any) => 
       m.parts_list && m.parts_list.length > 0
     ).length
 
-    const metadataWithTroubleshooting = data.metadata.filter((m: any) => 
+    const metadataWithTroubleshooting = liveData.metadata.filter((m: any) => 
       m.troubleshooting && m.troubleshooting.length > 0
     ).length
 
-    const schemaTypes = data.structuredData.reduce((acc: any, item: any) => {
+    const schemaTypes = liveData.structuredData.reduce((acc: any, item: any) => {
       item.schemas?.forEach((schema: any) => {
         const type = schema['@type'] || 'unknown'
         acc[type] = (acc[type] || 0) + 1
@@ -66,36 +89,36 @@ export function ManualsDashboardClient({ data }: ManualsDashboardClientProps) {
       totalModels: missing.total_expected_models || 0,
       missingAll: missing.models_missing_all || 0,
       partial: missing.models_partial || 0,
-      totalQAPairs: data.qaData.length,
+      totalQAPairs: liveData.qaData.length,
       qaCategories,
-      totalManuals: data.metadata.length,
+      totalManuals: liveData.metadata.length,
       metadataWithSpecs,
       metadataWithParts,
       metadataWithTroubleshooting,
-      totalChunks: data.semanticIndex?.total_chunks || 0,
+      totalChunks: liveData.semanticIndex?.total_chunks || 0,
       schemaTypes,
-      highPriority: data.acquisitionList?.high_priority || 0,
-      mediumPriority: data.acquisitionList?.medium_priority || 0,
-      lowPriority: data.acquisitionList?.low_priority || 0,
+      highPriority: liveData.acquisitionList?.high_priority || 0,
+      mediumPriority: liveData.acquisitionList?.medium_priority || 0,
+      lowPriority: liveData.acquisitionList?.low_priority || 0,
     }
-  }, [data])
+  }, [liveData])
 
   // Filter Q&A data
   const filteredQA = useMemo(() => {
-    if (!searchTerm) return data.qaData.slice(0, 50)
+    if (!searchTerm) return liveData.qaData.slice(0, 50)
     const term = searchTerm.toLowerCase()
-    return data.qaData.filter((item: any) => 
+    return liveData.qaData.filter((item: any) => 
       item.question?.toLowerCase().includes(term) ||
       item.answer?.toLowerCase().includes(term)
     ).slice(0, 50)
-  }, [data.qaData, searchTerm])
+  }, [liveData.qaData, searchTerm])
 
   // Get high priority missing manuals
   const highPriorityMissing = useMemo(() => {
-    return (data.acquisitionList?.acquisition_list || [])
+    return (liveData.acquisitionList?.acquisition_list || [])
       .filter((item: any) => item.priority === 'high')
       .slice(0, 20)
-  }, [data.acquisitionList])
+  }, [liveData.acquisitionList])
 
   return (
     <div className="space-y-8">
@@ -391,13 +414,13 @@ export function ManualsDashboardClient({ data }: ManualsDashboardClientProps) {
                 <CardTitle>Sample Manual Metadata</CardTitle>
               </CardHeader>
               <CardContent>
-                {data.metadata.length > 0 && (
+                {liveData.metadata.length > 0 && (
                   <div className="space-y-2 text-sm">
-                    <p><strong>Manufacturer:</strong> {data.metadata[0].manufacturer}</p>
-                    <p><strong>Model:</strong> {data.metadata[0].model_number || 'N/A'}</p>
-                    <p><strong>Type:</strong> {data.metadata[0].manual_type}</p>
-                    {data.metadata[0].specifications?.interfaces && (
-                      <p><strong>Interfaces:</strong> {data.metadata[0].specifications.interfaces.join(', ')}</p>
+                    <p><strong>Manufacturer:</strong> {liveData.metadata[0].manufacturer}</p>
+                    <p><strong>Model:</strong> {liveData.metadata[0].model_number || 'N/A'}</p>
+                    <p><strong>Type:</strong> {liveData.metadata[0].manual_type}</p>
+                    {liveData.metadata[0].specifications?.interfaces && (
+                      <p><strong>Interfaces:</strong> {liveData.metadata[0].specifications.interfaces.join(', ')}</p>
                     )}
                   </div>
                 )}
@@ -416,7 +439,7 @@ export function ManualsDashboardClient({ data }: ManualsDashboardClientProps) {
               <CardContent>
                 <div className="space-y-2">
                   <p className="text-sm">
-                    <strong>Total Schemas:</strong> {data.structuredData.length}
+                    <strong>Total Schemas:</strong> {liveData.structuredData.length}
                   </p>
                   <div className="mt-4">
                     <p className="text-sm font-semibold mb-2">Schema Types:</p>
@@ -443,7 +466,7 @@ export function ManualsDashboardClient({ data }: ManualsDashboardClientProps) {
                   </div>
                   <div className="flex justify-between">
                     <span>Manuals Indexed</span>
-                    <span className="font-semibold">{data.semanticIndex?.total_manuals || 0}</span>
+                    <span className="font-semibold">{liveData.semanticIndex?.total_manuals || 0}</span>
                   </div>
                   <p className="text-xs text-muted-foreground mt-4">
                     Note: Using placeholder embeddings. Ready for production integration.

components/manuals-page-experience.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { PublicInset, PublicPageHeader } from '@/components/public-surface'
+import { ManualsPageShell } from '@/components/manuals-page-shell'
+import { groupManuals, getCategories, getManufacturers } from '@/lib/manuals-catalog'
+import { fetchPublishedManualsCatalog } from '@/lib/manuals-live-catalog'
+import type { Manual } from '@/lib/manuals-types'
+
+interface ManualsPageExperienceProps {
+  initialManuals: Manual[]
+}
+
+export function ManualsPageExperience({ initialManuals }: ManualsPageExperienceProps) {
+  const [manuals, setManuals] = useState(initialManuals)
+
+  useEffect(() => {
+    let cancelled = false
+
+    void (async () => {
+      const liveManuals = await fetchPublishedManualsCatalog()
+      if (cancelled || liveManuals.length === 0) {
+        return
+      }
+
+      setManuals((current) => {
+        if (liveManuals.length === current.length) {
+          return current
+        }
+
+        return liveManuals
+      })
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const groupedManuals = useMemo(() => groupManuals(manuals), [manuals])
+  const manufacturers = useMemo(() => getManufacturers(manuals), [manuals])
+  const categories = useMemo(() => getCategories(manuals), [manuals])
+
+  return (
+    <>
+      <PublicPageHeader
+        eyebrow="Manual Library"
+        title="Vending Machine Manuals"
+        description="Download manuals, service guides, and parts documentation for hundreds of vending machine models. Browse by manufacturer, machine type, or search by model details."
+      >
+        <PublicInset className="inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm text-muted-foreground shadow-none">
+          <span>
+            <strong>{manuals.length}</strong> manuals available from <strong>{manufacturers.length}</strong> manufacturers
+          </span>
+        </PublicInset>
+      </PublicPageHeader>
+
+      <div className="mt-8 md:mt-10">
+        <ManualsPageShell
+          manuals={manuals}
+          groupedManuals={groupedManuals}
+          manufacturers={manufacturers}
+          categories={categories}
+        />
+      </div>
+    </>
+  )
+}

lib/manuals-catalog.ts

@@ -0,0 +1,32 @@
+import type { Manual, ManualGroup } from '@/lib/manuals-types'
+
+export function groupManuals(manuals: Manual[]): ManualGroup[] {
+  const grouped: Record<string, Record<string, Manual[]>> = {}
+
+  for (const manual of manuals) {
+    if (!grouped[manual.manufacturer]) {
+      grouped[manual.manufacturer] = {}
+    }
+    if (!grouped[manual.manufacturer][manual.category]) {
+      grouped[manual.manufacturer][manual.category] = []
+    }
+    grouped[manual.manufacturer][manual.category].push(manual)
+  }
+
+  return Object.entries(grouped)
+    .map(([manufacturer, categories]) => ({
+      manufacturer,
+      categories: Object.fromEntries(
+        Object.entries(categories).sort(([left], [right]) => left.localeCompare(right)),
+      ),
+    }))
+    .sort((left, right) => left.manufacturer.localeCompare(right.manufacturer))
+}
+
+export function getManufacturers(manuals: Manual[]): string[] {
+  return Array.from(new Set(manuals.map((manual) => manual.manufacturer))).sort()
+}
+
+export function getCategories(manuals: Manual[]): string[] {
+  return Array.from(new Set(manuals.map((manual) => manual.category))).sort()
+}

lib/manuals-live-catalog.ts

@@ -0,0 +1,67 @@
+import { ConvexHttpClient } from 'convex/browser'
+import { api } from '@/convex/_generated/api'
+import type { Manual } from '@/lib/manuals-types'
+
+type ConvexManualDoc = {
+  filename: string
+  path: string
+  manufacturer: string
+  category: string
+  size?: number
+  lastModified?: number
+  searchTerms?: string[]
+  commonNames?: string[]
+  thumbnailUrl?: string
+}
+
+function getClient() {
+  const convexUrl = process.env.NEXT_PUBLIC_CONVEX_URL
+  if (!convexUrl) {
+    return null
+  }
+
+  return new ConvexHttpClient(convexUrl)
+}
+
+function mapManual(manual: ConvexManualDoc): Manual {
+  return {
+    filename: manual.filename,
+    path: manual.path,
+    manufacturer: manual.manufacturer,
+    category: manual.category,
+    size: manual.size,
+    lastModified: manual.lastModified ? new Date(manual.lastModified) : undefined,
+    searchTerms: manual.searchTerms,
+    commonNames: manual.commonNames,
+    thumbnailUrl: manual.thumbnailUrl,
+  }
+}
+
+export async function fetchPublishedManualsCatalog(): Promise<Manual[]> {
+  const client = getClient()
+  if (!client) {
+    return []
+  }
+
+  try {
+    const manuals = await client.query(api.manuals.list, {})
+    return (manuals as ConvexManualDoc[]).map(mapManual)
+  } catch (error) {
+    console.error('[manuals-live-catalog] catalog refresh failed', error)
+    return []
+  }
+}
+
+export async function fetchPublishedManualsDashboard() {
+  const client = getClient()
+  if (!client) {
+    return null
+  }
+
+  try {
+    return await client.query(api.manuals.dashboard, {})
+  } catch (error) {
+    console.error('[manuals-live-catalog] dashboard refresh failed', error)
+    return null
+  }
+}