PATCH Degrade palette search when the query route is not mounted

Signed-off-by: ParleSec <mason@masonparle.com>

Author: ParleSec

frontend/src/components/palette/Palette.tsx

@@ -19,6 +19,7 @@ import {
 } from '@/components/palette/paletteUrlState'
 import { resolveFlowHandoff } from '@/components/palette/runDispatch'
 import {
+  usePaletteEndpointAvailable,
   usePaletteQuery,
   usePlatformShortcutLabel,
   useRecentSearches,
@@ -143,11 +144,14 @@ export function Palette({ variant, onClose, autoFocus }: PaletteProps) {
     return () => window.clearInterval(handle)
   }, [q.length, placeholderPool.length])
 
+  const paletteAvailable = usePaletteEndpointAvailable()
+
   const { data, loading, error } = usePaletteQuery({
     q,
     scope,
     filters,
-    enabled: q.trim().length > 0 || filters.length > 0,
+    enabled:
+      paletteAvailable && (q.trim().length > 0 || filters.length > 0),
   })
 
   const results = useMemo(() => data?.results ?? [], [data])
@@ -537,6 +541,31 @@ export function Palette({ variant, onClose, autoFocus }: PaletteProps) {
       ? 'w-full'
       : 'flex min-h-0 w-full max-w-2xl flex-1 flex-col'
 
+  if (variant === 'homepage' && !paletteAvailable) {
+    return (
+      <div className="w-full" role="search" aria-labelledby={headingId}>
+        <h2 id={headingId} className="sr-only">
+          Explore protocols
+        </h2>
+        <p className="mb-2 text-xs text-surface-500">
+          Content search requires a palette index on the backend (
+          <code className="text-surface-400">SHOWCASE_PALETTE_DB</code>
+          ). See the{' '}
+          <a href="https://docs.protocolsoup.com/deploy/palette-index/" className="text-amber-300/90 hover:underline">
+            palette index
+          </a>{' '}
+          deployment guide.
+        </p>
+        <EmptyState
+          variant="homepage"
+          onPick={setEntryChip}
+          recent={recentSearches}
+          onClearRecent={clearRecent}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className={shellClass} role="search" aria-labelledby={headingId}>
       <h2 id={headingId} className="sr-only">Palette search</h2>

frontend/src/components/palette/usePaletteQuery.ts

@@ -64,6 +64,20 @@ export function usePaletteQuery({
         body: JSON.stringify(body),
       })
       if (!response.ok) {
+        if (response.status === 404 || response.status === 405) {
+          // Route not mounted — degrade silently; production always exposes this route.
+          if (seq === requestSeq.current) {
+            setData({
+              query: q,
+              results: [],
+              refinement_chips: [],
+              resolved_aliases: [],
+              total_candidates: 0,
+              elapsed_micros: 0,
+            })
+          }
+          return
+        }
         throw new Error(`palette query failed (${response.status})`)
       }
       const payload = (await response.json()) as PaletteResponse
@@ -101,6 +115,44 @@ export function usePaletteQuery({
   return { data, loading, error, refresh: issueQuery }
 }
 
+let paletteEndpointCache: boolean | null = null
+
+/**
+ * Probes GET /api once to see whether endpoints.palette is advertised.
+ * Used to hide live search on self-hosted deployments without an index.
+ */
+export function usePaletteEndpointAvailable(): boolean {
+  const [available, setAvailable] = useState(paletteEndpointCache ?? true)
+
+  useEffect(() => {
+    if (paletteEndpointCache !== null) {
+      setAvailable(paletteEndpointCache)
+      return
+    }
+    let cancelled = false
+    void (async () => {
+      try {
+        const response = await fetch('/api')
+        if (!response.ok) {
+          paletteEndpointCache = false
+        } else {
+          const payload = (await response.json()) as { endpoints?: { palette?: string } }
+          paletteEndpointCache = Boolean(payload.endpoints?.palette)
+        }
+      } catch {
+        paletteEndpointCache = false
+      }
+      if (!cancelled) {
+        setAvailable(paletteEndpointCache ?? false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return available
+}
 
 // usePlatformShortcutLabel
 export function usePlatformShortcutLabel(): string | null {