# Model Comparison Panel

Model Comparison Panel [#model-comparison-panel]

The **Model Comparison Panel** is a side-by-side comparison of two scored entries with labeled rows (Score, Size, Speed, Quality, Device, Dimensions) where winning rows are accent-highlighted and losing rows dimmed, plus an `onClear` dismissal. Win-highlighting is derived purely from props (no orchestration state). Bind to `useModelRecommendations`.

Preview [#preview]

```tsx
'use client';

import { useState } from 'react';

import {
  ModelComparisonPanel,
  type ComparisonEntry,
} from '@/components/model-comparison-panel';

const A: ComparisonEntry = {
  modelId: 'bge-small',
  name: 'BGE Small',
  score: 88,
  sizeMB: 34,
  size: '34 MB',
  speedTier: 'fast',
  qualityTier: 'high',
  device: 'webgpu',
  dimensions: 384,
};

const B: ComparisonEntry = {
  modelId: 'arctic-xs',
  name: 'Arctic XS',
  score: 79,
  sizeMB: 90,
  size: '90 MB',
  speedTier: 'medium',
  qualityTier: 'medium',
  device: 'wasm',
  dimensions: 384,
};

/**
 * Demo for ModelComparisonPanel. Shows two recommendations side by side with
 * winning rows accent-highlighted; Clear dismisses the panel.
 */
export default function ModelComparisonPanelDemo() {
  const [open, setOpen] = useState(true);
  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="rounded-md border border-border bg-background px-3 py-1.5 text-sm"
      >
        Compare again
      </button>
    );
  }
  return <ModelComparisonPanel entries={[A, B]} onClear={() => setOpen(false)} />;
}
```

Installation [#installation]

```bash
npx shadcn@latest add @localmode/ui/local-first/model-comparison-panel
```

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

**Data source:** renders the two scored entries you pass and emits `onClear` — works with any backend. Recommended producer: `useModelRecommendations` 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 [#files-installed]

* `model-comparison-panel.tsx` — the `ModelComparisonPanel` component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ModelComparisonPanel**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `entries` | `[object, object]` | — | **Required.** The two entries to compare. |
| `onClear` | `function` | — | Fired when the comparison is dismissed. |

**ComparisonEntry**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modelId` | `string` | — | **Required.** Stable model id. |
| `name` | `string` | — | **Required.** Display name. |
| `score` | `number` | — | **Required.** Score (0–100). |
| `sizeMB` | `number` | — | Size in MB (numeric, for "smaller is better" comparison). |
| `size` | `string` | — | Human-readable size label (display). |
| `speedTier` | `"slow" \| "medium" \| "fast"` | — | Speed tier. |
| `qualityTier` | `"high" \| "low" \| "medium"` | — | Quality tier. |
| `device` | `"cpu" \| "wasm" \| "webgpu"` | — | Recommended device. |
| `dimensions` | `number` | — | Embedding dimensions. |

Examples [#examples]

Compare two models [#compare-two-models]

```tsx
<ModelComparisonPanel entries={[a, b]} onClear={() => setCompare(null)} />
```

Customization [#customization]

"Better" is higher for Score/Speed/Quality/Dimensions and lower for Size. The win highlight uses the `emerald` palette; the loser is dimmed. 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.