Embedding Drift Banner

The Embedding Drift Banner is a warning panel shown when the active embedding model is incompatible with vectors already stored (the model changed or dimensions mismatch). It explains the stored-vs-current model ids, shows a reindex progress bar + phase label while re-embedding, and offers "Re-embed All" / Cancel. Bind to useReindex + your compatibility check.

Preview

Installation

pnpm dlx shadcn@latest add @localmode/ui/local-first/embedding-drift-banner

npx shadcn@latest add @localmode/ui/local-first/embedding-drift-banner

yarn dlx shadcn@latest add @localmode/ui/local-first/embedding-drift-banner

bunx --bun shadcn@latest add @localmode/ui/local-first/embedding-drift-banner

Data source & dependencies

Data source: renders the drift/reindex state you pass and emits Re-embed/Cancel — works with any backend. Recommended producer: useReindex from @localmode/react (on-device, optional).

• lucide-react — icons
• clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

• embedding-drift-banner.tsx — the EmbeddingDriftBanner component
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

Bound to useReindex

const { isReindexing, progress, reindex, cancel } = useReindex({ db, model });
<EmbeddingDriftBanner
  storedModelId={stored}
  currentModelId={current}
  isReindexing={isReindexing}
  progress={progress}
  onReindex={reindex}
  onCancel={cancel}
/>

Customization

The banner uses the amber palette to read as a warning. The phase label maps useReindex phases (embedding / indexing) to human strings in PHASE_LABEL. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class and threshold is yours to change.