# Vector Storage Observability

Vector Storage Observability [#vector-storage-observability]

The **Vector Storage Observability** set complements the Storage Meter (quota) with VectorDB-specific observability: a compression-stats badge (SQ8 ratio + before/after size, e.g. "4.0× — 15KB→3.7KB"), a three-tier storage estimate (Raw Float32 / SQ8 4× / PQ 8–32× with the active tier highlighted), and a GPU-aware search-latency badge (accented when WebGPU-accelerated). Values derive from compression stats and search timing, passed in as props (recommended producer: `getCompressionStats()` / `useStorageQuota` from `@localmode/react`, on-device, optional).

Preview [#preview]

```tsx
'use client';

import { VectorStorageObservability } from '@/components/vector-storage-observability';

/**
 * Demo for VectorStorageObservability. Renders a representative compression-stats
 * badge, a three-tier estimate with SQ8 active, and a WebGPU-accelerated latency
 * badge. Wire `stats` to getCompressionStats() and `searchLatencyMs` to real
 * search timing in your app.
 */
export default function VectorStorageObservabilityDemo() {
  return (
    <VectorStorageObservability
      stats={{
        ratio: 4.0,
        originalSizeBytes: 15_360,
        compressedSizeBytes: 3_840,
        vectorCount: 1_000,
      }}
      tier="sq8"
      searchLatencyMs={12}
      webgpuAccelerated
    />
  );
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/vector-storage-observability
```

Data source & dependencies [#data-source--dependencies]

**Data source:** renders the compression stats + search timing you pass — works with any backend. Recommended producer: `getCompressionStats()` and `useStorageQuota` from `@localmode/react` (on-device, optional).

* `@localmode/ui/lib/browser-utils` — `formatBytes` for the size readouts (installed automatically as a registry dependency)
* `lucide-react` — icons
* `clsx` + `tailwind-merge` — via the shared `cn()` util (installed automatically as a registry dependency)

Files installed [#files-installed]

* `vector-storage-observability.tsx` — the `VectorStorageObservability` component
* `lib/browser-utils.ts` — generic browser helpers (`formatBytes`)
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**VectorStorageObservability**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `stats` | `object` | — | **Required.** Compression stats (from `getCompressionStats()`). |
| `tier` | `QuantizationTier` | — | **Required.** The active quantization tier. |
| `searchLatencyMs` | `number` | — | Last search latency in milliseconds. |
| `webgpuAccelerated` | `boolean` | — | Whether search ran on a WebGPU-accelerated distance kernel. |

**CompressionStatsLike**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `ratio` | `number` | — | **Required.** Compression ratio (original / compressed). |
| `originalSizeBytes` | `number` | — | **Required.** Estimated uncompressed size in bytes. |
| `compressedSizeBytes` | `number` | — | **Required.** Estimated compressed size in bytes. |
| `vectorCount` | `number` | — | Number of stored vectors. |

Examples [#examples]

Bound to compression stats [#bound-to-compression-stats]

```tsx
import { getCompressionStats } from '@localmode/core';

const stats = await getCompressionStats(db); // async — returns Promise<CompressionStats>

<VectorStorageObservability
  stats={stats}
  tier="sq8"
  searchLatencyMs={searchMs}
  webgpuAccelerated={usedGpu}
/>
```

Customization [#customization]

The latency badge accents (violet) when `webgpuAccelerated` is true. The three-tier estimate highlights the `tier` prop; non-active tiers dim. 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.