Port the explorer shell: tokens, header, hero, and a generic table.

CONTENT-WP-0002-T01 adapts the pinned OnCo visual system under ui/ without the corpus, mark, or kind routes.

Assistant: grok
Assistant-Session: 01a1346c-fdff-7741-b1af-b7283661554b

ui/components/RecordBrowser.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+import { ResultsTable } from "@/components/ResultsTable";
+import { nextSort, sortRows } from "@/lib/sort-rows";
+import type { RecordRow, SortState } from "@/lib/types";
+
+const columns = [
+  { key: "title", label: "Title", sortable: true, render: (row: RecordRow) => row.title },
+  { key: "kindLabel", label: "Kind", sortable: true, render: (row: RecordRow) => <span className="chip">{row.kindLabel}</span> },
+  { key: "tldr", label: "Summary", sortable: true, render: (row: RecordRow) => row.tldr },
+];
+
+export function RecordBrowser({ rows }: { rows: RecordRow[] }) {
+  const [sort, setSort] = useState<SortState | undefined>({ key: "title", dir: 1 });
+  const ordered = sortRows(rows, sort, (row, key) => String(row[key as keyof RecordRow] ?? ""));
+  return (
+    <section id="records" aria-labelledby="records-heading" className="mx-auto max-w-7xl px-4 py-14 sm:px-6">
+      <h2 id="records-heading" className="mb-6 text-2xl">Records</h2>
+      <ResultsTable
+        columns={columns}
+        rows={ordered}
+        rowKey={(row) => row.id}
+        sort={sort}
+        onSort={(key) => setSort((current) => nextSort(current, key))}
+      />
+    </section>
+  );
+}