spb/rareindex

1import type { Metadata } from 'next';2import Link from 'next/link';3import { PageHeader } from '@/components/ui/page-header';4import { Tabs } from '@/components/ui/tabs';5import { Card, EmptyState, Badge } from '@/components/ui/primitives';6import { Thumb } from '@/components/market/bits';7import { listRadar } from '@/lib/queries/market-lists';8import { fmtMoney, fmtRelative } from '@/lib/format';9import { catName, humanize } from '@/lib/taxonomy';10import { sp1, type SP } from '@/lib/search-params';1112export const metadata: Metadata = { title: 'Rare Radar', description: 'Newly detected rare items: first listings in years, ultra-low populations, rare auction appearances, price discrepancies and undocumented variations.' };1314const KINDS = ['first_listing_in_years', 'ultra_low_population', 'rare_auction_appearance', 'price_discrepancy', 'undocumented_variation', 'record_sale'];1516export default async function RadarPage({ searchParams }: { searchParams: Promise<SP> }) {17  const sp = await searchParams;18  const kind = sp1(sp, 'kind') ?? null;19  const items = await listRadar({ kind, limit: 100 });20  return (21    <div>22      <PageHeader kicker="Signals" title="Rare Radar" description="Signals detected by the pipeline (§155): each finding cites its evidence (listing, sale, population report). Findings expire; nothing here is a recommendation." compact />23      <Tabs active={kind ?? 'all'} tabs={[{ id: 'all', label: 'All', href: '/radar' }, ...KINDS.map((k) => ({ id: k, label: humanize(k), href: `/radar?kind=${k}` }))]} className="mb-4" />24      {items.length ? (25        <ul className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">26          {items.map((r) => (27            <li key={r.id} className="card flex gap-3 p-3">28              <Thumb src={r.heroImageUrl} alt="" size={56} rounded="rounded-md" />29              <div className="min-w-0 flex-1">30                <div className="flex items-center justify-between gap-2">31                  <Badge tone={r.kind === 'record_sale' ? 'gold' : r.kind === 'price_discrepancy' ? 'alert' : 'rarity'}>{humanize(r.kind)}</Badge>32                  <span className="num text-[11px] text-subtle">signal {r.score.toFixed(0)} · {fmtRelative(r.detectedAt)}</span>33                </div>34                <Link href={`/asset/${r.assetSlug}`} className="mt-1 block truncate text-[13px] font-medium text-fg hover:underline">35                  {r.assetTitle}36                </Link>37                <div className="text-[11px] text-muted">38                  {catName(r.categorySlug)} · RIV {r.rivUsd === null ? '—' : fmtMoney(r.rivUsd)}39                </div>40                {Object.keys(r.evidence).length ? (41                  <dl className="mt-1.5 grid grid-cols-2 gap-x-3 gap-y-0.5 text-[11px]">42                    {Object.entries(r.evidence)43                      .slice(0, 6)44                      .map(([k, v]) => (45                        <div key={k} className="contents">46                          <dt className="truncate text-subtle">{humanize(k)}</dt>47                          <dd className="num truncate text-muted">{typeof v === 'number' ? v.toLocaleString('en-US', { maximumFractionDigits: 2 }) : String(v)}</dd>48                        </div>49                      ))}50                  </dl>51                ) : null}52              </div>53            </li>54          ))}55        </ul>56      ) : (57        <Card>58          <EmptyState title="Radar is quiet" description="Findings appear when the pipeline has enough history to detect unusual events." />59        </Card>60      )}61    </div>62  );63}64