feat: Lakehouse — every table Ava reads, with counts; claims gets total, search and filters

- /lakehouse: one card per Databricks table from the lakehouse_tables stats view
  (rows, date span, dollars); reference tables open a plain row view
- /claims: exact total (stats view when unfiltered; platform count, capped at
  10,000, when filtered), search on claim id / provider / CPT, dropdown filters
  fed by the API's distinct values, service-date range
- sidebar: 'Lakehouse' replaces 'Claims'; claims pages light it too
- pairs with 13_lakehouse.sql (rdbms templates + record views)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

src/App.tsx

@@ -6,6 +6,7 @@ import { QueueScreen } from './screens/QueueScreen';
 import { CaseScreen } from './screens/CaseScreen';
 import { RunReviewScreen } from './screens/RunReviewScreen';
 import { ClaimsScreen } from './screens/ClaimsScreen';
+import { LakehouseScreen, LakehouseTableScreen } from './screens/LakehouseScreen';
 
 /**
  * Routes.
@@ -27,6 +28,8 @@ export function App() {
         <Route path="/c/:id" element={<CaseScreen />} />
         <Route path="/review" element={<RunReviewScreen />} />
         <Route path="/claims" element={<ClaimsScreen />} />
+        <Route path="/lakehouse" element={<LakehouseScreen />} />
+        <Route path="/lakehouse/:table" element={<LakehouseTableScreen />} />
         {/* Awaiting Review is the landing page, not "all cases": it is the
             queue with work in it, and the one the console exists to serve. */}
         <Route path="/" element={<Navigate to="/q/review" replace />} />

src/api/types.ts

@@ -34,12 +34,18 @@ export interface RecordViewField {
 }
 
 export interface RecordViewResponse {
-  config: { fields: RecordViewField[] };
+  config: {
+    fields: RecordViewField[];
+    /** Distinct values per `is_filter` field, narrowed by the active filters.
+     *  Date fields come back as timestamps; the console ignores those. */
+    filter_options?: Record<string, unknown[]>;
+  };
   data?: Row[];
   records?: Row[];
   total?: number;
   page?: number;
   limit?: number;
+  pagination?: { page: number; limit: number; total_count: number; total_pages: number; total_is_capped?: boolean };
 }
 
 /** A record-view row. Values are whatever the column's data_type implies. */

src/layout/Shell.tsx

@@ -1,4 +1,4 @@
-import { NavLink, Outlet, useNavigate } from 'react-router-dom';
+import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { Database, LogOut, Radar } from 'lucide-react';
 import { useZino } from '../api/provider';
 import { QUEUES, prettyRole } from '../api/config';
@@ -19,6 +19,8 @@ import { Button } from '../components/core';
  * it is a worse failure than showing a button that comes back "not permitted".
  */
 export function Shell() {
+  const { pathname } = useLocation();
+  const onLakehouse = pathname.startsWith('/lakehouse') || pathname.startsWith('/claims');
   const { user, logout } = useZino();
   const navigate = useNavigate();
 
@@ -90,26 +92,23 @@ export function Shell() {
                 </NavLink>
               </li>
             ))}
-            {/* The data itself, after the pipeline: every claim in the lakehouse. */}
+            {/* The data itself, after the pipeline: every table Ava reads. Claims
+                pages live under it, so they light this entry too. */}
             <li className="shrink-0 lg:mt-3 lg:shrink lg:border-t lg:border-line lg:pt-3">
               <NavLink
-                to="/claims"
+                to="/lakehouse"
-                className={({ isActive }) =>
+                className={() =>
                   `block rounded-md px-3 py-2 transition-colors ${
-                    isActive ? 'bg-brand text-brand-fg' : 'text-muted hover:bg-panel2 hover:text-ink'
+                    onLakehouse ? 'bg-brand text-brand-fg' : 'text-muted hover:bg-panel2 hover:text-ink'
                   }`
                 }
               >
-                {({ isActive }) => (
-                  <>
                 <span className="inline-flex items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap">
-                      <Database className="h-3.5 w-3.5" /> Claims
+                  <Database className="h-3.5 w-3.5" /> Lakehouse
                 </span>
-                    <span className={`hidden text-[11px] lg:block ${isActive ? 'text-brand-fg/70' : 'text-faint'}`}>
+                <span className={`hidden text-[11px] lg:block ${onLakehouse ? 'text-brand-fg/70' : 'text-faint'}`}>
-                      The lakehouse, row by row
+                  Every table Ava reads
                 </span>
-                  </>
-                )}
               </NavLink>
             </li>
           </ul>

src/screens/ClaimsScreen.tsx

@@ -1,37 +1,39 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
-import { ChevronLeft, ChevronRight, Database, X } from 'lucide-react';
+import { ArrowLeft, ChevronLeft, ChevronRight, Database, Search, X } from 'lucide-react';
 import { useQuery, useZino } from '../api/provider';
 import { LAKEHOUSE } from '../api/config';
 import type { Tone } from '../api/config';
 import type { RecordFilter, Row } from '../api/types';
-import { Badge, ErrorNote, Spinner } from '../components/core';
+import { Badge, ErrorNote, Input, Select, Spinner } from '../components/core';
 import { CARC, money, num, shortDate, str } from '../format';
 
 /**
  * The claims table — the lakehouse rows themselves, read-only.
  *
- * Reached two ways: from the sidebar (unfiltered, newest first) and from a
+ * Reached three ways: from the Lakehouse overview, from the sidebar, and from
- * finding's numbers ("216 claims" → the exact rows Ava counted). The URL IS
+ * a finding's numbers ("216 claims" → the exact rows Ava counted). The URL IS
  * the filter set, so a link can be copied into an email and lands on the same
- * rows. Everything is server-side: paging, filtering and the total come from
+ * rows. Everything is server-side: paging, filtering, search and the total
- * /view/recordview against the Databricks-backed record view.
+ * come from /view/recordview against the Databricks-backed record view, and
+ * the dropdown options are the distinct values the platform returns for the
+ * current filter set.
  */
 
 const PAGE = 50;
 
-/** URL param → record-view column, with the control shape it compiles to. */
+/** URL param → record-view column. */
 const DIMS: Array<{ key: string; col: string; label: string }> = [
   { key: 'payer', col: 'payer', label: 'Insurer' },
   { key: 'department', col: 'department', label: 'Department' },
-  { key: 'code', col: 'denial_reason_code', label: 'Reason code' },
-  { key: 'category', col: 'denial_category', label: 'Denial category' },
   { key: 'status', col: 'status', label: 'Status' },
+  { key: 'code', col: 'denial_reason_code', label: 'Reason code' },
   { key: 'appeal', col: 'appeal_status', label: 'Appeal' },
   { key: 'site', col: 'site', label: 'Site' },
   { key: 'desk', col: 'registration_desk', label: 'Desk' },
   { key: 'provider', col: 'provider', label: 'Provider' },
   { key: 'cpt', col: 'procedure_code', label: 'CPT' },
+  { key: 'category', col: 'denial_category', label: 'Denial category' },
 ];
 const RANGES: Array<{ from: string; to: string; col: string; label: string }> = [
   { from: 'from', to: 'to', col: 'service_date', label: 'Service date' },
@@ -39,39 +41,17 @@ const RANGES: Array<{ from: string; to: string; col: string; label: string }> =
   { from: 'dl_from', to: 'dl_to', col: 'appeal_deadline', label: 'Appeal deadline' },
 ];
 
-const STATUS_TONE: Record<string, Tone> = {
+const STATUS_TONE: Record<string, Tone> = { paid: 'emerald', partial: 'amber', denied: 'rose', pending: 'slate' };
-  paid: 'emerald',
+const APPEAL_LABEL: Record<string, string> = { not_filed: 'not filed', filed: 'filed', overturned: 'overturned', upheld: 'upheld' };
-  partial: 'amber',
-  denied: 'rose',
-  pending: 'slate',
-};
-const APPEAL_LABEL: Record<string, string> = {
-  not_filed: 'not filed',
-  filed: 'filed',
-  overturned: 'overturned',
-  upheld: 'upheld',
-};
 
 export function ClaimsScreen() {
   const { client } = useZino();
   const [params] = useSearchParams();
   const navigate = useNavigate();
   const page = Math.max(1, Number(params.get('page') ?? '1') || 1);
-
+  const search = params.get('q') ?? '';
-  // The filter set, in the order the chips show it.
+  const [draft, setDraft] = useState(search);
-  const chips = useMemo(() => {
+  useEffect(() => setDraft(search), [search]);
-    const out: Array<{ label: string; value: string; remove: string[] }> = [];
-    for (const d of DIMS) {
-      const v = params.get(d.key);
-      if (v) out.push({ label: d.label, value: d.col === 'appeal_status' ? (APPEAL_LABEL[v] ?? v) : v, remove: [d.key] });
-    }
-    for (const r of RANGES) {
-      const a = params.get(r.from);
-      const b = params.get(r.to);
-      if (a || b) out.push({ label: r.label, value: a && b ? `${shortDate(a)} – ${shortDate(b)}` : a ? `from ${shortDate(a)}` : `to ${shortDate(b)}`, remove: [r.from, r.to] });
-    }
-    return out;
-  }, [params]);
 
   const filters = useMemo<RecordFilter[]>(() => {
     const f: RecordFilter[] = [];
@@ -86,57 +66,137 @@ export function ClaimsScreen() {
     }
     return f;
   }, [params]);
+  const filtered = filters.length > 0 || !!search;
 
   const key = params.toString();
   const q = useQuery(
-    () => client.recordView('dni-rv-claims', { page, limit: PAGE, filters, sortBy: 'service_date', sortDir: 'desc' }),
+    () => client.recordView('dni-rv-claims', { page, limit: PAGE, filters, search, sortBy: 'service_date', sortDir: 'desc' }),
     [key],
   );
-  const rows: Row[] = q.data?.records ?? q.data?.data ?? [];
+  // The platform caps its count at 10,000; the stats view has the exact
-  const total = q.data?.total ?? null;
+  // table size, which is the number to show when nothing is filtered.
-  const pages = total != null ? Math.max(1, Math.ceil(total / PAGE)) : null;
+  const stats = useQuery(() => client.rows('dni-rv-lakehouse-tables', { limit: 10 }), [], !filtered);
+  const exact = stats.data?.find((r) => str(r.table_name) === 'claims');
+
+  const rows: Row[] = q.data?.data ?? q.data?.records ?? [];
+  const pg = q.data?.pagination;
+  const total = !filtered && exact ? (num(exact.row_count) ?? null) : (pg?.total_count ?? q.data?.total ?? null);
+  const capped = filtered && !!pg?.total_is_capped;
+  const pages = total != null ? Math.max(1, Math.ceil(total / PAGE)) : (pg?.total_pages ?? null);
+  const options = q.data?.config?.filter_options ?? {};
   const billedOnPage = rows.reduce((t, r) => t + (num(r.billed_amount) ?? 0), 0);
 
   function go(next: URLSearchParams) {
+    next.delete('page');
     navigate(`/claims${next.toString() ? `?${next}` : ''}`);
   }
-  function drop(keys: string[]) {
+  function set(k: string, v: string) {
     const next = new URLSearchParams(params);
-    for (const k of keys) next.delete(k);
+    if (v) next.set(k, v);
-    next.delete('page');
+    else next.delete(k);
     go(next);
   }
   function setPage(n: number) {
     const next = new URLSearchParams(params);
     if (n <= 1) next.delete('page');
     else next.set('page', String(n));
-    go(next);
+    navigate(`/claims?${next}`);
   }
+  const opts = (col: string, labels?: Record<string, string>) =>
+    ((options[col] ?? []) as unknown[]).map(String).filter(Boolean).map((v) => ({ value: v, label: labels?.[v] ?? v }));
+
+  // Active filters as removable chips, in display order.
+  const chips: Array<{ label: string; value: string; remove: string[] }> = [];
+  for (const d of DIMS) {
+    const v = params.get(d.key);
+    if (v) chips.push({ label: d.label, value: d.col === 'appeal_status' ? (APPEAL_LABEL[v] ?? v) : v, remove: [d.key] });
+  }
+  for (const r of RANGES) {
+    const a = params.get(r.from);
+    const b = params.get(r.to);
+    if (a || b) chips.push({ label: r.label, value: a && b ? `${shortDate(a)} – ${shortDate(b)}` : a ? `from ${shortDate(a)}` : `to ${shortDate(b)}`, remove: [r.from, r.to] });
+  }
+  if (search) chips.push({ label: 'Search', value: search, remove: ['q'] });
 
   return (
     <div className="mx-auto max-w-6xl space-y-4">
       <div className="flex flex-wrap items-end gap-3">
         <div className="min-w-0 flex-1">
+          <Link to="/lakehouse" className="inline-flex items-center gap-1 text-xs text-muted hover:text-ink">
+            <ArrowLeft className="h-3.5 w-3.5" /> Lakehouse
+          </Link>
           <h1 className="text-xl font-semibold text-ink">Claims</h1>
           <p className="mt-0.5 inline-flex items-center gap-1.5 text-xs text-faint">
             <Database className="h-3.5 w-3.5" />
             Read-only · {LAKEHOUSE.platform} · {LAKEHOUSE.catalog}.{LAKEHOUSE.schema}.claims
           </p>
         </div>
-        <p className="tnum text-sm text-muted">
+        <div className="text-right">
-          {total == null ? '' : `${total.toLocaleString('en-US')} claim${total === 1 ? '' : 's'}`}
+          <p className="tnum text-[22px] leading-none font-bold text-ink">
-          {rows.length > 0 && total != null && total > rows.length ? ` · ${money(billedOnPage)} billed on this page` : rows.length > 0 ? ` · ${money(billedOnPage)} billed` : ''}
+            {total == null ? '—' : `${total.toLocaleString('en-US')}${capped ? '+' : ''}`}
+          </p>
+          <p className="mt-1 text-xs text-muted">
+            {filtered ? 'claims match' : 'claims in the table'}
+            {rows.length > 0 ? ` · ${money(billedOnPage)} billed on this page` : ''}
           </p>
         </div>
+      </div>
 
+      {/* ---------- Search + filters. Options are the platform's own distinct values. ---------- */}
+      <div className="lift rounded-xl border border-line bg-panel px-4 py-3">
+        <form
+          className="flex flex-wrap items-center gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            set('q', draft.trim());
+          }}
+        >
+          <div className="relative min-w-[16rem] flex-1">
+            <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-faint" />
+            <div className="[&_input]:pl-8">
+              <Input value={draft} onChange={setDraft} placeholder="Search claim id, provider or CPT…" />
+            </div>
+          </div>
+          <button type="submit" className="rounded-md border border-line px-3 py-2 text-sm text-ink hover:bg-panel2">
+            Search
+          </button>
+        </form>
+        <div className="mt-3 grid gap-2 sm:grid-cols-3 lg:grid-cols-5">
+          <Select value={params.get('payer') ?? ''} onChange={(v) => set('payer', v)} options={opts('payer')} placeholder="All insurers" />
+          <Select value={params.get('department') ?? ''} onChange={(v) => set('department', v)} options={opts('department')} placeholder="All departments" />
+          <Select value={params.get('status') ?? ''} onChange={(v) => set('status', v)} options={opts('status')} placeholder="Any status" />
+          <Select
+            value={params.get('code') ?? ''}
+            onChange={(v) => set('code', v)}
+            options={opts('denial_reason_code').map((o) => ({ ...o, label: CARC[o.value] ? `${o.value} · ${CARC[o.value]}` : o.value }))}
+            placeholder="Any reason code"
+          />
+          <Select value={params.get('appeal') ?? ''} onChange={(v) => set('appeal', v)} options={opts('appeal_status', APPEAL_LABEL)} placeholder="Any appeal status" />
+          <Select value={params.get('site') ?? ''} onChange={(v) => set('site', v)} options={opts('site')} placeholder="All sites" />
+          <Select value={params.get('desk') ?? ''} onChange={(v) => set('desk', v)} options={opts('registration_desk')} placeholder="All desks" />
+          <Select value={params.get('provider') ?? ''} onChange={(v) => set('provider', v)} options={opts('provider')} placeholder="All providers" />
+          <div className="flex items-center gap-1.5">
+            <span className="shrink-0 text-[11px] text-faint">Service</span>
+            <Input type="date" value={params.get('from') ?? ''} onChange={(v) => set('from', v)} />
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="shrink-0 text-[11px] text-faint">to</span>
+            <Input type="date" value={params.get('to') ?? ''} onChange={(v) => set('to', v)} />
+          </div>
+        </div>
         {chips.length > 0 && (
-        <div className="flex flex-wrap items-center gap-2">
+          <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-line pt-3">
             {chips.map((c) => (
               <button
                 key={c.label}
-              onClick={() => drop(c.remove)}
+                type="button"
+                onClick={() => {
+                  const next = new URLSearchParams(params);
+                  for (const k of c.remove) next.delete(k);
+                  go(next);
+                }}
                 title="Remove filter"
-              className="inline-flex items-center gap-1.5 rounded-full border border-line bg-panel px-3 py-1 text-xs text-ink hover:border-brand/60"
+                className="inline-flex items-center gap-1.5 rounded-full border border-line bg-panel2/60 px-3 py-1 text-xs text-ink hover:border-brand/60"
               >
                 <span className="text-faint">{c.label}</span>
                 <span className="font-semibold">{c.value}</span>
@@ -148,6 +208,7 @@ export function ClaimsScreen() {
             </Link>
           </div>
         )}
+      </div>
 
       {q.error && <ErrorNote>{q.error}</ErrorNote>}
 
@@ -195,8 +256,7 @@ export function ClaimsScreen() {
                       <Td>
                         {code ? (
                           <span title={CARC[code] ?? str(r.denial_reason_desc)}>
-                            <span className="tnum font-semibold">{code}</span>{' '}
+                            <span className="tnum font-semibold">{code}</span> <span className="text-muted">{str(r.denial_reason_desc)}</span>
-                            <span className="text-muted">{str(r.denial_reason_desc)}</span>
                           </span>
                         ) : (
                           <span className="text-faint">—</span>
@@ -214,7 +274,8 @@ export function ClaimsScreen() {
         {pages != null && pages > 1 && (
           <div className="flex items-center justify-between border-t border-line px-4 py-2.5 text-xs text-muted">
             <span className="tnum">
-              Page {page} of {pages.toLocaleString('en-US')}
+              Page {page.toLocaleString('en-US')} of {pages.toLocaleString('en-US')}
+              {capped ? ' (count capped by the platform at 10,000)' : ''}
             </span>
             <span className="inline-flex gap-1">
               <PageBtn disabled={page <= 1} onClick={() => setPage(page - 1)} label="Previous page">

src/screens/LakehouseScreen.tsx

@@ -0,0 +1,161 @@
+import { Link, useParams } from 'react-router-dom';
+import { ArrowLeft, ArrowRight, Database } from 'lucide-react';
+import { useQuery, useZino } from '../api/provider';
+import { LAKEHOUSE } from '../api/config';
+import type { Row } from '../api/types';
+import { ErrorNote, Spinner } from '../components/core';
+import { money, num, pct, shortDate, str } from '../format';
+
+/**
+ * Everything Ava reads, in one place.
+ *
+ * The overview is the `lakehouse_tables` stats view: one card per table with
+ * its row count and date span, straight from Databricks. `claims` opens the
+ * claims explorer; the four reference tables open a plain table view of every
+ * row (they are small — 4 to 24 rows).
+ */
+
+const TABLES: Record<string, { rv: string; title: string; blurb: string }> = {
+  claims: { rv: 'dni-rv-claims', title: 'Claims', blurb: 'One row per submitted insurance claim. The table Ava sweeps every morning.' },
+  payers: { rv: 'dni-rv-payers', title: 'Insurers', blurb: 'Plan type, appeal window and the Northlake contract manager for each insurer.' },
+  departments: { rv: 'dni-rv-departments', title: 'Departments', blurb: 'Department × site directory with each director.' },
+  payer_policy_updates: { rv: 'dni-rv-policy-updates', title: 'Insurer bulletins', blurb: 'Policy changes insurers announced, with effective dates — where Ava looks for the cause of a spike.' },
+  finance_monthly_summary: { rv: 'dni-rv-finance-monthly', title: 'Finance monthly summary', blurb: 'What finance reports each month. Ava reconciles the claims table against it before analysing anything.' },
+};
+const ORDER = ['claims', 'payers', 'departments', 'payer_policy_updates', 'finance_monthly_summary'];
+
+export function LakehouseScreen() {
+  const { client } = useZino();
+  const stats = useQuery(() => client.rows('dni-rv-lakehouse-tables', { limit: 20 }), []);
+  const byName = new Map((stats.data ?? []).map((r) => [str(r.table_name), r]));
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-4">
+      <header>
+        <h1 className="text-xl font-semibold text-ink">Lakehouse</h1>
+        <p className="mt-0.5 inline-flex items-center gap-1.5 text-sm text-muted">
+          <Database className="h-3.5 w-3.5" />
+          {LAKEHOUSE.platform} · {LAKEHOUSE.catalog}.{LAKEHOUSE.schema} · read-only. The tables Ava reads, exactly as she reads them.
+        </p>
+      </header>
+      {stats.error && <ErrorNote>{stats.error}</ErrorNote>}
+      {stats.loading && !stats.data ? (
+        <Spinner label="Reading the lakehouse…" />
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {ORDER.map((name) => {
+            const t = TABLES[name];
+            const s = byName.get(name);
+            const rows = num(s?.row_count);
+            const from = str(s?.from_date).slice(0, 10);
+            const to = str(s?.to_date).slice(0, 10);
+            const billed = num(s?.billed);
+            const to_ = name === 'claims' ? '/claims' : `/lakehouse/${name}`;
+            return (
+              <Link
+                key={name}
+                to={to_}
+                className={`lift block rounded-xl border border-line bg-panel px-5 py-4 transition-colors hover:border-brand/60 ${name === 'claims' ? 'sm:col-span-2' : ''}`}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="min-w-0 flex-1">
+                    <p className="text-[11px] font-semibold tracking-wide text-faint uppercase">{name}</p>
+                    <p className="mt-0.5 text-base font-semibold text-ink">{t.title}</p>
+                    <p className="mt-1 text-sm text-muted">{t.blurb}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="tnum text-[26px] leading-none font-bold text-ink">{rows == null ? '—' : rows.toLocaleString('en-US')}</p>
+                    <p className="mt-1 text-[11px] text-faint">rows</p>
+                  </div>
+                </div>
+                <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
+                  {from && to && (
+                    <span>
+                      {shortDate(from)} – {shortDate(to)}
+                    </span>
+                  )}
+                  {billed != null && billed > 0 && <span>{money(billed)} billed</span>}
+                  {name === 'claims' && num(s?.denied) != null && (
+                    <span>
+                      {num(s?.denied)!.toLocaleString('en-US')} denied · {num(s?.pending)?.toLocaleString('en-US')} pending
+                    </span>
+                  )}
+                  <span className="ml-auto inline-flex items-center gap-1 text-brand">
+                    {name === 'claims' ? 'Explore' : 'Open'} <ArrowRight className="h-3.5 w-3.5" />
+                  </span>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Every row of one small reference table. */
+export function LakehouseTableScreen() {
+  const { table = '' } = useParams();
+  const { client } = useZino();
+  const t = TABLES[table];
+  const q = useQuery(() => client.recordView(t.rv, { limit: 200 }), [table], !!t);
+  if (!t) return <ErrorNote>No such table.</ErrorNote>;
+  const rows: Row[] = q.data?.data ?? q.data?.records ?? [];
+  const fields = (q.data?.config?.fields ?? []).filter((f) => f.field_key !== '_pk_value');
+
+  return (
+    <div className="mx-auto max-w-5xl space-y-4">
+      <div>
+        <Link to="/lakehouse" className="inline-flex items-center gap-1 text-xs text-muted hover:text-ink">
+          <ArrowLeft className="h-3.5 w-3.5" /> Lakehouse
+        </Link>
+        <h1 className="text-xl font-semibold text-ink">{t.title}</h1>
+        <p className="mt-0.5 inline-flex items-center gap-1.5 text-xs text-faint">
+          <Database className="h-3.5 w-3.5" />
+          {LAKEHOUSE.catalog}.{LAKEHOUSE.schema}.{table} · {rows.length.toLocaleString('en-US')} rows
+        </p>
+      </div>
+      {q.error && <ErrorNote>{q.error}</ErrorNote>}
+      <div className="lift overflow-hidden rounded-xl border border-line bg-panel">
+        {q.loading && !q.data ? (
+          <Spinner label="Reading the lakehouse…" />
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-[13px]">
+              <thead>
+                <tr className="text-left text-[11px] font-semibold tracking-wide text-faint uppercase">
+                  {fields.map((f) => (
+                    <th key={f.field_key} className={`border-b border-line px-3 py-2.5 ${isNumeric(f.data_type) ? 'text-right' : ''}`}>
+                      {f.output_label}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-line">
+                {rows.map((r, i) => (
+                  <tr key={i} className="hover:bg-panel2/60">
+                    {fields.map((f) => (
+                      <td key={f.field_key} className={`px-3 py-2 align-top text-ink ${isNumeric(f.data_type) ? 'tnum text-right' : ''}`}>
+                        {cell(r[f.field_key], f.field_key, f.data_type)}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const isNumeric = (t: string) => /int|decimal|number|bigint/i.test(t);
+function cell(v: unknown, key: string, type: string): string {
+  if (v == null || v === '') return '—';
+  if (type === 'date') return shortDate(str(v).slice(0, 10));
+  if (/rate/.test(key)) return pct((num(v) ?? 0) * 100, 1);
+  if (/amount|billed|paid/.test(key)) return money(v);
+  if (isNumeric(type)) return (num(v) ?? 0).toLocaleString('en-US');
+  return str(v);
+}