dev-api-ui 0.1.7

package/ui/components/HubPage.tsx

@@ -0,0 +1,529 @@
+'use client';
+
+import { useState, ChangeEvent } from 'react';
+import Link from 'next/link';
+import StatusMark from './StatusMark';
+
+const A = '#1F8A5B';
+const D = '#C2453B';
+const W = '#B26B00';
+
+// ── per-group static config ──────────────────────────────────────────────────
+
+type GroupConfig = {
+  label: string;
+  eyebrow: string;
+  desc: string;
+  pairs: string;
+  coverage: string;
+  cadence: string;
+  filterPlaceholder: string;
+  allSeriesLabel: string;
+  totalCount: number;
+  noun: string; // unit noun: pairs / series / nodes
+  emptyHint: string;
+};
+
+const GROUP_CONFIG: Record<string, GroupConfig> = {
+  fx: {
+    label: 'fx',
+    eyebrow: 'Foreign exchange',
+    desc: 'Major, minor, cross, and emerging-market spot rates from ECB reference and EBS interbank quotes, reconciled tick by tick. Every pair is point-in-time and traces to its source feed.',
+    pairs: '168',
+    coverage: '1999',
+    cadence: 'tick cadence',
+    filterPlaceholder: 'Filter fx pairs…',
+    allSeriesLabel: 'All fx pairs',
+    totalCount: 168,
+    noun: 'pairs',
+    emptyHint: 'Try a currency code like EUR or JPY.',
+  },
+  metals: {
+    label: 'metals',
+    eyebrow: 'Precious metals',
+    desc: 'Spot and fix prices for gold, silver, platinum, and palladium from LBMA fixings and COMEX settlement, normalised to troy-ounce USD. Every record is timestamped and source-attributed.',
+    pairs: '12',
+    coverage: '1968',
+    cadence: '1 min cadence',
+    filterPlaceholder: 'Filter metals…',
+    allSeriesLabel: 'All metals series',
+    totalCount: 12,
+    noun: 'series',
+    emptyHint: 'Try a symbol like XAU or XAG.',
+  },
+  power: {
+    label: 'power',
+    eyebrow: 'Wholesale power',
+    desc: 'Real-time and day-ahead locational marginal prices from major US ISOs — PJM, CAISO, ERCOT, MISO, NYISO, and SPP — delivered in $/MWh with node, interval, and component detail.',
+    pairs: '94',
+    coverage: '2005',
+    cadence: '5 min cadence',
+    filterPlaceholder: 'Filter power nodes…',
+    allSeriesLabel: 'All power series',
+    totalCount: 94,
+    noun: 'nodes',
+    emptyHint: 'Try an ISO name like PJM or CAISO.',
+  },
+};
+
+// ── illustrative row data per group (from design file) ───────────────────────
+
+type Row = { sym: string; name: string; last: string; delta: string; up: boolean; status: string; cat: string; slug: string };
+
+const GROUP_ROWS: Record<string, Row[]> = {
+  fx: [
+    { sym: 'EUR/USD', name: 'Euro / US Dollar',              last: '1.08642',  delta: '+0.31%', up: true,  status: 'Live',    cat: 'Majors',  slug: 'eurusd'  },
+    { sym: 'GBP/USD', name: 'Sterling / US Dollar',          last: '1.27310',  delta: '+0.12%', up: true,  status: 'Live',    cat: 'Majors',  slug: 'gbpusd'  },
+    { sym: 'USD/JPY', name: 'US Dollar / Yen',               last: '157.21',   delta: '-0.20%', up: false, status: 'Live',    cat: 'Majors',  slug: 'usdjpy'  },
+    { sym: 'USD/CHF', name: 'US Dollar / Franc',             last: '0.89204',  delta: '+0.05%', up: true,  status: 'Live',    cat: 'Majors',  slug: 'usdchf'  },
+    { sym: 'USD/CAD', name: 'US Dollar / Canadian Dollar',   last: '1.36110',  delta: '-0.08%', up: false, status: 'Live',    cat: 'Majors',  slug: 'usdcad'  },
+    { sym: 'AUD/USD', name: 'Australian Dollar / US Dollar', last: '0.66420',  delta: '+0.22%', up: true,  status: 'Live',    cat: 'Majors',  slug: 'audusd'  },
+    { sym: 'EUR/GBP', name: 'Euro / Sterling',               last: '0.85330',  delta: '+0.18%', up: true,  status: 'Live',    cat: 'Crosses', slug: 'eurgbp'  },
+    { sym: 'EUR/JPY', name: 'Euro / Yen',                    last: '170.80',   delta: '+0.09%', up: true,  status: 'Live',    cat: 'Crosses', slug: 'eurjpy'  },
+    { sym: 'GBP/JPY', name: 'Sterling / Yen',                last: '200.15',   delta: '-0.14%', up: false, status: 'Live',    cat: 'Crosses', slug: 'gbpjpy'  },
+    { sym: 'USD/MXN', name: 'US Dollar / Mexican Peso',      last: '18.4200',  delta: '+0.40%', up: true,  status: 'Delayed', cat: 'EM',      slug: 'usdmxn'  },
+    { sym: 'USD/BRL', name: 'US Dollar / Brazilian Real',    last: '5.3800',   delta: '-0.55%', up: false, status: 'Delayed', cat: 'EM',      slug: 'usdbrl'  },
+    { sym: 'USD/INR', name: 'US Dollar / Indian Rupee',      last: '83.4500',  delta: '+0.06%', up: true,  status: 'Live',    cat: 'EM',      slug: 'usdinr'  },
+  ],
+  metals: [
+    { sym: 'XAU/USD', name: 'Gold / US Dollar',       last: '2,338.40', delta: '-0.62%', up: false, status: 'Delayed 15m', cat: 'Spot',    slug: 'xauusd'  },
+    { sym: 'XAG/USD', name: 'Silver / US Dollar',     last: '29.84',    delta: '+0.44%', up: true,  status: 'Delayed',     cat: 'Spot',    slug: 'xagusd'  },
+    { sym: 'XPT/USD', name: 'Platinum / US Dollar',   last: '978.50',   delta: '+1.02%', up: true,  status: 'Delayed',     cat: 'Spot',    slug: 'xptusd'  },
+    { sym: 'XPD/USD', name: 'Palladium / US Dollar',  last: '912.00',   delta: '-0.18%', up: false, status: 'Delayed',     cat: 'Spot',    slug: 'xpdusd'  },
+    { sym: 'XAU/EUR', name: 'Gold / Euro',             last: '2,153.90', delta: '-0.31%', up: false, status: 'Delayed',     cat: 'Crosses', slug: 'xaueur'  },
+    { sym: 'XAU/GBP', name: 'Gold / Sterling',        last: '1,838.20', delta: '-0.48%', up: false, status: 'Delayed',     cat: 'Crosses', slug: 'xaugbp'  },
+  ],
+  power: [
+    { sym: 'PJM-RT',   name: 'PJM Real-Time LMP',             last: '38.21', delta: '+4.10%',  up: true,  status: 'Degraded',  cat: 'Real-Time', slug: 'pjm-rt'   },
+    { sym: 'CAISO-RT', name: 'CAISO SP15 real-time',          last: '52.40', delta: '+7.22%',  up: true,  status: 'Live',      cat: 'Real-Time', slug: 'caiso-rt' },
+    { sym: 'ERCOT-RT', name: 'ERCOT Houston real-time',       last: '29.95', delta: '-1.80%',  up: false, status: 'Live',      cat: 'Real-Time', slug: 'ercot-rt' },
+    { sym: 'MISO-RT',  name: 'MISO Indiana hub',              last: '34.18', delta: '+2.50%',  up: true,  status: 'Degraded',  cat: 'Real-Time', slug: 'miso-rt'  },
+    { sym: 'NYISO-RT', name: 'NYISO Zone J real-time',        last: '45.80', delta: '+9.10%',  up: true,  status: 'Live',      cat: 'Real-Time', slug: 'nyiso-rt' },
+    { sym: 'SPP-RT',   name: 'SPP South hub real-time',       last: '27.40', delta: '-3.20%',  up: false, status: 'Live',      cat: 'Real-Time', slug: 'spp-rt'   },
+    { sym: 'PJM-DA',   name: 'PJM Day-Ahead LMP',             last: '36.80', delta: '-0.90%',  up: false, status: 'Live',      cat: 'Day-Ahead', slug: 'pjm-da'   },
+    { sym: 'CAISO-DA', name: 'CAISO SP15 day-ahead',          last: '48.60', delta: '+1.40%',  up: true,  status: 'Live',      cat: 'Day-Ahead', slug: 'caiso-da' },
+  ],
+};
+
+// ── per-group categories (leaf mode browse cards) ────────────────────────────
+
+type Category = { name: string; count: string; desc: string };
+
+const GROUP_CATEGORIES: Record<string, Category[]> = {
+  fx: [
+    { name: 'Majors',   count: '7 pairs',  desc: 'The most-traded USD pairs — EUR, GBP, JPY, CHF, CAD, AUD, NZD.' },
+    { name: 'Crosses',  count: '21 pairs', desc: 'Non-USD majors like EUR/GBP and GBP/JPY.' },
+    { name: 'Emerging', count: '64 pairs', desc: 'MXN, BRL, INR, ZAR and other EM crosses.' },
+    { name: 'Exotics',  count: '76 pairs', desc: 'Thin and frontier pairs, flagged for liquidity.' },
+  ],
+  metals: [
+    { name: 'Spot',       count: '4 series', desc: 'LBMA/COMEX spot prices in USD per troy ounce.' },
+    { name: 'Fixings',    count: '4 series', desc: 'Official AM and PM fixings from LBMA.' },
+    { name: 'Crosses',    count: '4 series', desc: 'Precious metals quoted in non-USD currencies.' },
+  ],
+  power: [
+    { name: 'Real-Time',  count: '48 nodes', desc: 'Sub-hourly real-time LMP at major ISO hubs.' },
+    { name: 'Day-Ahead',  count: '36 nodes', desc: 'Hour-ahead and day-ahead pricing across ISOs.' },
+    { name: 'Ancillary',  count: '10 series', desc: 'Regulation, spinning reserves, and capacity prices.' },
+  ],
+};
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+function statusColor(status: string): string {
+  if (status === 'Live') return A;
+  if (status.startsWith('Degraded')) return W;
+  if (status === 'Delayed' || status === 'Delayed 15m') return W;
+  return D; // Outage
+}
+
+function deltaColor(up: boolean): string {
+  return up ? A : D;
+}
+
+// ── sub-components ───────────────────────────────────────────────────────────
+
+// The shared table / list layout used in both list and search modes
+function RowTable({ rows, group }: { rows: Row[]; group: string }) {
+  const slugFor = (r: Row) => r.slug;
+  return (
+    <div
+      style={{
+        background: 'var(--surface)',
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: 8,
+        overflow: 'hidden',
+      }}
+    >
+      {/* column header */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '140px 1fr 120px 110px 110px 20px',
+          alignItems: 'center',
+          gap: 16,
+          padding: '9px 18px',
+          borderBottom: '0.5px solid var(--hairline-2)',
+          background: '#F4F4F1',
+        }}
+      >
+        {['Symbol', 'Name', 'Last', 'Δ today', 'Status', ''].map((h, i) => (
+          <span
+            key={i}
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '0.07em',
+              color: 'var(--tertiary)',
+              textAlign: i === 2 || i === 3 ? 'right' : 'left',
+            }}
+          >
+            {h}
+          </span>
+        ))}
+      </div>
+
+      {rows.map((r, i) => (
+        <Link
+          key={r.sym}
+          href={`/${group}/${slugFor(r)}`}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '140px 1fr 120px 110px 110px 20px',
+            alignItems: 'center',
+            gap: 16,
+            padding: '12px 18px',
+            borderBottom: i < rows.length - 1 ? '0.5px solid var(--hairline)' : undefined,
+            fontSize: 13,
+            color: 'inherit',
+            textDecoration: 'none',
+          }}
+        >
+          <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{r.sym}</span>
+          <span style={{ color: 'var(--secondary)' }}>{r.name}</span>
+          <span style={{ textAlign: 'right', fontWeight: 500 }}>{r.last}</span>
+          <span style={{ textAlign: 'right', color: deltaColor(r.up) }}>{r.delta}</span>
+          <span>
+            <StatusMark color={statusColor(r.status)} label={r.status} size={6} fontSize={12} />
+          </span>
+          <span style={{ textAlign: 'right', display: 'inline-flex', color: 'var(--accent)' }}>
+            {/* external link arrow */}
+            <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M13 5h6v6" /><path d="M19 5l-8 8" /><path d="M19 13v5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" />
+            </svg>
+          </span>
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+// ── main component ────────────────────────────────────────────────────────────
+
+interface HubPageProps {
+  group: string;
+  /** Override the group description paragraph (§E3 — product-supplied copy). */
+  description?: string;
+  /** Override the headline count string (e.g. "168"). Shown in the meta-pills row. */
+  pairs?: string;
+  /** Override the eyebrow label (e.g. "Foreign exchange"). */
+  eyebrow?: string;
+}
+
+type Mode = 'leaf' | 'list' | 'search';
+
+export default function HubPage({ group, description, pairs: pairsOverride, eyebrow }: HubPageProps) {
+  const [mode, setMode] = useState<Mode>('leaf');
+  const [query, setQuery] = useState('');
+
+  const config = GROUP_CONFIG[group];
+  const resolvedDesc = description ?? config.desc;
+  const resolvedPairs = pairsOverride ?? config.pairs;
+  const resolvedEyebrow = eyebrow ?? config.eyebrow;
+  const allRows = GROUP_ROWS[group] ?? [];
+  const categories = GROUP_CATEGORIES[group] ?? [];
+
+  const q = query.trim().toUpperCase();
+  const filtered = q
+    ? allRows.filter((r) => (r.sym + ' ' + r.name + ' ' + r.cat).toUpperCase().includes(q))
+    : allRows;
+
+  const popular = allRows.slice(0, 6);
+  const total = filtered.length;
+  const resultLabel = q
+    ? `${total} ${total === 1 ? 'result' : 'results'}`
+    : `Showing ${total} of ${config.totalCount}`;
+
+  // When the user types, switch to search mode automatically
+  function handleQuery(e: ChangeEvent<HTMLInputElement>) {
+    const v = e.target.value;
+    setQuery(v);
+    if (v.trim()) setMode('search');
+    else setMode('leaf');
+  }
+
+  const modeDefs: { id: Mode; label: string }[] = [
+    { id: 'leaf',   label: 'Overview'   },
+    { id: 'list',   label: 'All series' },
+    { id: 'search', label: 'Search'     },
+  ];
+
+  return (
+    <main>
+      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
+
+        {/* ── HEADER ───────────────────────────────────────────────────── */}
+        <section style={{ padding: '28px 0 24px', borderBottom: '0.5px solid var(--hairline)' }}>
+          {/* breadcrumb */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--tertiary)' }}>
+            <Link href="#" style={{ color: 'var(--secondary)' }}>Data</Link>
+            <span>/</span>
+            <span style={{ color: 'var(--ink)' }}>{group}</span>
+          </div>
+
+          {/* eyebrow */}
+          <div style={{
+            display: 'inline-flex', alignItems: 'center', gap: 8,
+            fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase',
+            color: 'var(--accent)', marginTop: 16,
+          }}>
+            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', display: 'inline-block' }} />
+            {resolvedEyebrow}
+          </div>
+
+          {/* H1 */}
+          <h1 style={{
+            fontFamily: 'var(--mono)', fontSize: 36, fontWeight: 600,
+            letterSpacing: '-0.02em', marginTop: 12, lineHeight: 1.05,
+          }}>
+            {group}{' '}
+            <span style={{ fontSize: 20, fontWeight: 500, color: 'var(--secondary)' }}>
+              {group === 'fx' ? 'spot rates' : group === 'metals' ? 'spot prices' : 'LMP series'}
+            </span>
+          </h1>
+
+          {/* desc */}
+          <p style={{ fontSize: 17, color: 'var(--secondary)', marginTop: 10, lineHeight: 1.55 }}>
+            {resolvedDesc}
+          </p>
+
+          {/* meta pills (plain inline tokens) */}
+          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 16, fontSize: 13, color: 'var(--tertiary)' }}>
+            <span><span style={{ color: 'var(--ink)', fontWeight: 500 }}>{resolvedPairs}</span> {config.noun}</span>
+            <span>·</span>
+            <span>coverage since <span style={{ color: 'var(--ink)', fontWeight: 500 }}>{config.coverage}</span></span>
+            <span>·</span>
+            <span>{config.cadence}</span>
+          </div>
+
+          {/* search + mode switch */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 22, flexWrap: 'wrap' }}>
+            <label style={{
+              display: 'flex', alignItems: 'center', gap: 9,
+              flex: 1, minWidth: 240,
+              fontSize: 14, color: 'var(--ink)',
+              border: '0.5px solid var(--hairline-2)', borderRadius: 4,
+              padding: '10px 13px', background: 'var(--surface)',
+            }}>
+              <svg viewBox="0 0 24 24" width={15} height={15} fill="none" stroke="var(--tertiary)" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
+                <circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" />
+              </svg>
+              <input
+                value={query}
+                onChange={handleQuery}
+                placeholder={config.filterPlaceholder}
+                style={{
+                  border: 'none', outline: 'none', background: 'transparent',
+                  fontFamily: 'inherit', fontSize: 14, color: 'var(--ink)',
+                  flex: 1, minWidth: 0,
+                }}
+              />
+            </label>
+
+            <div style={{ display: 'flex', gap: 6, flex: 'none' }}>
+              {modeDefs.map((m) => (
+                <button
+                  key={m.id}
+                  onClick={() => { setMode(m.id); if (m.id !== 'search') setQuery(''); }}
+                  style={{
+                    fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
+                    padding: '9px 14px', borderRadius: 4,
+                    border: `0.5px solid ${mode === m.id ? 'var(--ink)' : 'var(--hairline-2)'}`,
+                    background: mode === m.id ? 'var(--ink)' : 'var(--surface)',
+                    color: mode === m.id ? '#fff' : 'var(--secondary)',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {m.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* ── LEAF / OVERVIEW ──────────────────────────────────────────── */}
+        {mode === 'leaf' && (
+          <>
+            {/* Popular cards */}
+            <section style={{ padding: '30px 0', borderBottom: '0.5px solid var(--hairline)' }}>
+              <h2 style={{ fontFamily: 'var(--mono)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 16 }}>
+                Popular {config.noun}
+              </h2>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 14 }}>
+                {popular.map((p) => (
+                  <Link
+                    key={p.sym}
+                    href={`/${group}/${p.slug}`}
+                    style={{
+                      display: 'block',
+                      background: 'var(--surface)',
+                      border: '0.5px solid var(--hairline-2)',
+                      borderRadius: 8,
+                      padding: '18px 20px',
+                      color: 'inherit',
+                      textDecoration: 'none',
+                    }}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                      <span style={{ fontFamily: 'var(--mono)', fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>
+                        {p.sym}
+                      </span>
+                      <StatusMark color={statusColor(p.status)} label={p.status} size={6} fontSize={12} />
+                    </div>
+                    <div style={{ fontSize: 13, color: 'var(--tertiary)', marginTop: 5 }}>{p.name}</div>
+                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 12 }}>
+                      <span style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>{p.last}</span>
+                      <span style={{ fontSize: 13, fontWeight: 500, color: deltaColor(p.up) }}>{p.delta}</span>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </section>
+
+            {/* Browse by category */}
+            <section style={{ padding: '30px 0 8px' }}>
+              <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 16 }}>
+                <h2 style={{ fontFamily: 'var(--mono)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em' }}>
+                  Browse by group
+                </h2>
+                <button
+                  onClick={() => setMode('list')}
+                  style={{
+                    display: 'inline-flex', alignItems: 'center', gap: 6,
+                    fontSize: 14, fontWeight: 500, cursor: 'pointer',
+                    background: 'none', border: 'none', color: 'var(--ink)', fontFamily: 'inherit', padding: 0,
+                  }}
+                >
+                  View all {config.totalCount} {config.noun}
+                  <svg viewBox="0 0 24 24" width={14} height={14} fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                    <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
+                  </svg>
+                </button>
+              </div>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
+                {categories.map((c) => (
+                  <button
+                    key={c.name}
+                    onClick={() => setMode('list')}
+                    style={{
+                      display: 'block', textAlign: 'left',
+                      background: 'var(--surface)',
+                      border: '0.5px solid var(--hairline-2)',
+                      borderRadius: 8,
+                      padding: '18px 20px',
+                      color: 'inherit',
+                      cursor: 'pointer',
+                      fontFamily: 'inherit',
+                      width: '100%',
+                    }}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                      <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em' }}>{c.name}</span>
+                      <span style={{ fontSize: 13, color: 'var(--tertiary)' }}>{c.count}</span>
+                    </div>
+                    <div style={{ fontSize: 13, color: 'var(--secondary)', marginTop: 7, lineHeight: 1.5 }}>{c.desc}</div>
+                  </button>
+                ))}
+              </div>
+            </section>
+          </>
+        )}
+
+        {/* ── LIST ────────────────────────────────────────────────────── */}
+        {mode === 'list' && (
+          <section style={{ padding: '26px 0 8px' }}>
+            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 14 }}>
+              <h2 style={{ fontFamily: 'var(--mono)', fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em' }}>
+                {config.allSeriesLabel}
+              </h2>
+              <span style={{ fontSize: 13, color: 'var(--tertiary)' }}>{resultLabel}</span>
+            </div>
+            <RowTable rows={allRows} group={group} />
+          </section>
+        )}
+
+        {/* ── SEARCH ──────────────────────────────────────────────────── */}
+        {mode === 'search' && (
+          <section style={{ padding: '26px 0 8px' }}>
+            {/* Facets strip */}
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
+              {(['fx', 'metals', 'power'] as const).map((g) => (
+                <span
+                  key={g}
+                  style={{
+                    fontSize: 12,
+                    fontWeight: 500,
+                    padding: '4px 11px',
+                    borderRadius: 4,
+                    border: '0.5px solid var(--hairline-2)',
+                    color: 'var(--secondary)',
+                    background: 'var(--surface)',
+                  }}
+                >
+                  {g}
+                </span>
+              ))}
+              <span
+                style={{
+                  fontSize: 12,
+                  fontWeight: 500,
+                  padding: '4px 11px',
+                  borderRadius: 4,
+                  border: '0.5px solid var(--hairline-2)',
+                  color: 'var(--secondary)',
+                  background: 'var(--surface)',
+                }}
+              >
+                All groups
+              </span>
+            </div>
+            <div style={{ fontSize: 13, color: 'var(--tertiary)', marginBottom: 14 }}>
+              {resultLabel} for &quot;<span style={{ color: 'var(--ink)', fontWeight: 500 }}>{query}</span>&quot;
+            </div>
+            {filtered.length > 0 ? (
+              <RowTable rows={filtered} group={group} />
+            ) : (
+              <div
+                style={{
+                  background: 'var(--surface)',
+                  border: '0.5px solid var(--hairline-2)',
+                  borderRadius: 8,
+                  padding: '30px 18px',
+                  textAlign: 'center',
+                  fontSize: 14,
+                  color: 'var(--tertiary)',
+                }}
+              >
+                No {config.noun} match &quot;{query}&quot; in {group}.{' '}
+                <span style={{ color: 'var(--secondary)' }}>{config.emptyHint}</span>
+              </div>
+            )}
+          </section>
+        )}
+
+      </div>
+    </main>
+  );
+}
+