@volter/twin-stripe 0.1.2 → 2.0.0

package/client/stripe-mirror.tsx

@@ -1,130 +1,171 @@
-// Stripe UI mirror — React/TSX client (Bun-bundled). A Stripe-dashboard-style view
-// in the shared world UI-mirror design language: top bar + left nav + list/detail
-// split. Renders by consuming the twin's own REST API (/v1/<collection>).
-//
-// The pure format/resolution helpers live in ../src/stripe-mirror-ui.ts so they can
-// be unit-tested AND shared here (Bun tree-shakes the server-only exports out of
-// this browser bundle).
-import React, { useEffect, useMemo, useState } from 'react';
+// The Stripe Dashboard (manifest screen `dashboard`, dashboard.stripe.com/test/{section}): a React app
+// (Bun-bundled) authored as Stripe's Dashboard in test mode, reading and writing only through Stripe's API
+// (client/dashboard-api.ts). Its pages sit at Stripe's own paths: /test/dashboard (Home),
+// /test/balance/overview, /test/payments[/{pi|ch}], /test/customers[/{cus}], /test/subscriptions[/{sub}],
+// /test/invoices[/{in}], /test/products, /test/developers, /test/settings, and the pages under "More".
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
-  formatStripeAmount, formatRecurring, statusTone, flattenStripeValue,
-  resolveCrossRefs, referenceCollection, formatPaymentMethod, productImageUrls,
-  formatPaymentError, formatBalanceSummary, formatAccountFlags, accountCurrentlyDue,
-  type StripeRow, type FlatLine, type CrossRefs,
-} from '../src/stripe-mirror-ui.ts';
-
-export type Section = { key: string; label: string; title: (r: StripeRow) => string; subtitle: (r: StripeRow) => string };
-
-export const SECTIONS: Section[] = [
-  { key: 'customers', label: 'Customers', title: (r) => r.name || r.email || r.id, subtitle: (r) => r.email || r.id },
-  { key: 'payment_intents', label: 'Payments', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.status} · ${r.id}` },
-  { key: 'setup_intents', label: 'Setup Intents', title: (r) => r.id, subtitle: (r) => `${r.status ?? ''} · ${r.usage ?? ''}` },
-  { key: 'subscriptions', label: 'Subscriptions', title: (r) => r.id, subtitle: (r) => `${r.status} · ${r.customer ?? ''}` },
-  { key: 'invoices', label: 'Invoices', title: (r) => `${formatStripeAmount(r.total ?? r.amount_due, r.currency)}`, subtitle: (r) => `${r.status} · ${r.id}` },
-  { key: 'invoiceitems', label: 'Invoice Items', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.customer ?? ''} · ${r.id}` },
-  { key: 'credit_notes', label: 'Credit Notes', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.status ?? ''} · ${r.invoice ?? r.id}` },
-  { key: 'products', label: 'Products', title: (r) => r.name || r.id, subtitle: (r) => r.id },
-  { key: 'prices', label: 'Prices', title: (r) => `${formatStripeAmount(r.unit_amount, r.currency)}${formatRecurring(r.recurring) ? ` ${formatRecurring(r.recurring)}` : ''}`, subtitle: (r) => r.product ?? r.id },
-  // --- billing & commerce (coupons, promotion codes, payment links, quotes) ---
-  { key: 'coupons', label: 'Coupons', title: (r) => r.name || (r.percent_off != null ? `${r.percent_off}% off` : `${formatStripeAmount(r.amount_off, r.currency)} off`), subtitle: (r) => `${r.duration ?? ''} · ${r.id}` },
-  { key: 'promotion_codes', label: 'Promotion Codes', title: (r) => r.code || r.id, subtitle: (r) => `${r.active ? 'active' : 'inactive'} · ${r.coupon ?? ''}` },
-  { key: 'payment_links', label: 'Payment Links', title: (r) => r.url || r.id, subtitle: (r) => `${r.active ? 'active' : 'inactive'} · ${r.id}` },
-  { key: 'quotes', label: 'Quotes', title: (r) => formatStripeAmount(r.amount_total, r.currency), subtitle: (r) => `${r.status ?? ''} · ${r.customer ?? r.id}` },
-  { key: 'charges', label: 'Charges', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.status} · ${r.id}` },
-  { key: 'refunds', label: 'Refunds', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.status ?? ''} · ${r.charge ?? r.id}` },
-  { key: 'payment_methods', label: 'Payment Methods', title: (r) => formatPaymentMethod(r), subtitle: (r) => `${r.type ?? ''} · ${r.id}` },
-  { key: 'disputes', label: 'Disputes', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.reason ?? ''} · ${r.status ?? ''}` },
-  { key: 'payouts', label: 'Payouts', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.status ?? ''} · ${r.id}` },
-  { key: 'balance_transactions', label: 'Balance Transactions', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${r.type ?? ''} · ${r.id}` },
-  { key: 'balance', label: 'Balance', title: (r) => r.id, subtitle: (r) => 'account balance summary' },
-  // --- Connect (connected accounts + transfers) ---
-  { key: 'accounts', label: 'Connected Accounts', title: (r) => r.email || r.id, subtitle: (r) => `${r.type ?? 'account'} · ${r.country ?? ''}` },
-  { key: 'transfers', label: 'Transfers', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `→ ${r.destination ?? '?'}` },
-  // --- customer billing (tax IDs + credit-balance ledger) ---
-  { key: 'tax_ids', label: 'Customer Tax IDs', title: (r) => `${r.value ?? r.id}`, subtitle: (r) => `${r.type ?? ''} · ${r.customer ?? ''}` },
-  { key: 'customer_balance_transactions', label: 'Customer Balance', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `bal ${formatStripeAmount(r.ending_balance, r.currency)} · ${r.customer ?? ''}` },
-  // --- Stripe Tax (tax rates + calculations) ---
-  { key: 'tax_rates', label: 'Tax Rates', title: (r) => `${r.display_name ?? 'Tax'} · ${r.percentage ?? 0}%`, subtitle: (r) => `${r.inclusive ? 'inclusive' : 'exclusive'} · ${r.jurisdiction ?? r.id}` },
-  { key: 'tax/calculations', label: 'Tax Calculations', title: (r) => formatStripeAmount(r.amount_total, r.currency), subtitle: (r) => `tax ${formatStripeAmount(r.tax_amount_exclusive, r.currency)} · ${r.id}` },
-  { key: 'events', label: 'Events', title: (r) => r.type || r.id, subtitle: (r) => r.id },
-  { key: 'webhook_endpoints', label: 'Webhook Endpoints', title: (r) => r.url || r.id, subtitle: (r) => `${r.status ?? ''} · ${r.id}` },
-  // --- Radar (fraud prevention): reviews, value lists, custom rules ---
-  { key: 'reviews', label: 'Radar Reviews', title: (r) => r.charge || r.payment_intent || r.id, subtitle: (r) => `${r.open ? 'open' : (r.closed_reason ?? 'closed')} · ${r.id}` },
-  { key: 'radar/value_lists', label: 'Radar Value Lists', title: (r) => r.name || r.alias || r.id, subtitle: (r) => `${r.item_type ?? ''} · ${r.alias ?? r.id}` },
-  { key: 'radar/rules', label: 'Radar Rules', title: (r) => r.predicate || r.id, subtitle: (r) => `${r.action ?? ''} · ${r.id}` },
-  // --- Terminal (in-person) + Issuing (card issuing) screens ---
-  { key: 'terminal/readers', label: 'Terminal Readers', title: (r) => r.label || r.id, subtitle: (r) => `${r.status ?? ''} · ${r.device_type ?? ''}` },
-  { key: 'terminal/locations', label: 'Terminal Locations', title: (r) => r.display_name || r.id, subtitle: (r) => `${(r.address as any)?.city ?? ''} · ${r.id}` },
-  { key: 'issuing/cards', label: 'Issuing Cards', title: (r) => `•••• ${r.last4 ?? ''}`, subtitle: (r) => `${r.status ?? ''} · ${r.type ?? ''}` },
-  { key: 'issuing/cardholders', label: 'Issuing Cardholders', title: (r) => r.name || r.id, subtitle: (r) => `${r.type ?? ''} · ${r.status ?? ''}` },
-  // --- Reporting (financial reports / Sigma report runs) ---
-  { key: 'reporting/report_runs', label: 'Reports', title: (r) => r.report_type || r.id, subtitle: (r) => `${r.status ?? ''} · ${r.id}` },
-];
+  formatStripeAmount, formatRecurring, formatPaymentMethod, formatPaymentError, formatBalanceSummary,
+  formatAccountFlags, accountCurrentlyDue, publicBusinessName, PLATFORM_DEFAULT_NAME, type StripeRow,
+} from '../src/stripe-shared.ts';
+import {
+  API_BASE, list, loadBalances, type CustomerRow, loadCustomer, loadCustomers, loadDevelopers, loadHome, loadInvoices, loadPayment,
+  loadPayments, loadProducts, loadSubscription, loadSubscriptions, retrieve, createRefund, cancelSubscription, createObject,
+  type CustomerDetail, type Payment, type PaymentDetail, type SubscriptionDetail, type StripeObject,
+} from './dashboard-api.ts';
 
-// `balance` is the one section backed by a synthesized summary (GET /v1/balance), not a
-// list collection; the fetch loop special-cases it (no `data` array).
-export const BALANCE_KEY = 'balance';
-const SECTION_BY_KEY: Record<string, Section> = Object.fromEntries(SECTIONS.map((s) => [s.key, s]));
+// ── routing: Stripe's paths, inside whatever prefix this page is served under ─────────────────────
+const BASE_PATH = API_BASE;
+export function routeOf(pathname: string): string[] {
+  const inside = pathname.startsWith(BASE_PATH) ? pathname.slice(BASE_PATH.length) : pathname;
+  const parts = inside.split('/').filter(Boolean);
+  return parts[0] === 'test' ? parts.slice(1) : parts;
+}
+const hrefOf = (to: string) => `${BASE_PATH}/test/${to.replace(/^\/+/, '')}`;
+type Go = (to: string) => void;
 
-export function StatusPill({ value }: { value: any }) {
-  const v = String(value ?? '');
-  return <span className={`pill ${statusTone(v)}`}>{v.replace(/_/g, ' ') || '—'}</span>;
+// ── formatting ───────────────────────────────────────────────────────────────
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export function formatDate(ts: unknown, withTime = true): string {
+  const n = Number(ts);
+  if (!Number.isFinite(n) || n <= 0) return '—';
+  const d = new Date(n * 1000);
+  const day = `${MONTHS[d.getMonth()]} ${d.getDate()}`;
+  const sameYear = d.getFullYear() === new Date().getFullYear();
+  if (!withTime) return `${day}, ${d.getFullYear()}`;
+  const h = d.getHours() % 12 || 12;
+  const time = `${h}:${String(d.getMinutes()).padStart(2, '0')} ${d.getHours() < 12 ? 'AM' : 'PM'}`;
+  return sameYear ? `${day}, ${time}` : `${day}, ${d.getFullYear()}, ${time}`;
 }
+const money = (amount: unknown, currency?: string) => formatStripeAmount(Number(amount) || 0, currency);
+const ccy = (currency?: string) => String(currency ?? 'usd').toUpperCase();
+const titleCase = (s: string) => s.replace(/_/g, ' ').replace(/^\w/, (c) => c.toUpperCase());
+const customerLabel = (c?: StripeObject) => (c ? c.name || c.email || c.id : '—');
 
-/** A clickable id reference that jumps to its collection + selects the row. */
-export function RefChip({ collection, id, label, onJump }: { collection: string; id: string; label: string; onJump: (c: string, id: string) => void }) {
+// ── icons ────────────────────────────────────────────────────────────────────
+const ICONS: Record<string, string> = {
+  home: 'M8 1.5 1.5 7v7.5h4.5v-4.5h4v4.5h4.5V7L8 1.5z',
+  balance: 'M2 4h12v9H2zM2 7h12M5 10.5h3',
+  transactions: 'M2 5h10M9 2l3 3-3 3M14 11H4M7 8l-3 3 3 3',
+  customers: 'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2.5 14.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
+  catalog: 'M2 4.5 8 1.5l6 3v7L8 14.5l-6-3v-7zM2 4.5l6 3 6-3M8 7.5v7',
+  connect: 'M5.5 10.5 10.5 5.5M7 3.5l1.5-1.5a3 3 0 0 1 4.5 4.5L11.5 8M9 12.5 7.5 14a3 3 0 0 1-4.5-4.5L4.5 8',
+  payments: 'M1.5 3.5h13v9h-13zM1.5 6.5h13M4 10h2.5',
+  billing: 'M3 1.5h10v13l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3zM5.5 5h5M5.5 8h5',
+  reporting: 'M2 14h12M4 11V7M8 11V3M12 11V8',
+  more: 'M3 8h.01M8 8h.01M13 8h.01',
+  developers: 'M5 4 1.5 8 5 12M11 4l3.5 4-3.5 4',
+  search: 'M7 12.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM11 11l3.5 3.5',
+  bell: 'M4 11V7a4 4 0 0 1 8 0v4l1.5 1.5h-11L4 11zM6.5 14h3',
+  gear: 'M8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.4 1.4M11.6 11.6 13 13M3 13l1.4-1.4M11.6 4.4 13 3',
+  help: 'M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM6 6a2 2 0 1 1 2.5 2c-.4.1-.5.4-.5.8V10M8 12v.01',
+  plus: 'M8 2v12M2 8h12',
+  check: 'M3 8.5 6.5 12 13 4.5',
+  x: 'M4 4l8 8M12 4l-8 8',
+  refund: 'M4 6h6.5a3 3 0 0 1 0 6H6M6.5 3.5 4 6l2.5 2.5',
+  clock: 'M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM8 4v4l2.5 1.5',
+  chevronDown: 'M4 6l4 4 4-4',
+  chevronRight: 'M6 4l4 4-4 4',
+  dispute: 'M8 1.5 15 14H1L8 1.5zM8 6v3.5M8 11.5v.01',
+  arrowRight: 'M2 8h11M9 4l4 4-4 4',
+  card: 'M1.5 3.5h13v9h-13zM1.5 6.5h13',
+  download: 'M8 2v8M4.5 6.5 8 10l3.5-3.5M2.5 13.5h11',
+  person: 'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2.5 14.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
+};
+export function Icon({ name, size = 16, className }: { name: string; size?: number; className?: string }) {
   return (
-    <button className="ref-chip" title={id} onClick={() => onJump(collection, id)}>
-      <span className="ref-label">{label}</span>
-      <span className="ref-id mono">{id}</span>
-    </button>
+    <svg className={`icon ${className ?? ''}`} width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d={ICONS[name] ?? ''} />
+    </svg>
   );
 }
 
-/** Render the flattened nested-field lines (replaces the old "[object Object]"). */
-export function NestedLines({ lines, onJump }: { lines: FlatLine[]; onJump: (c: string, id: string) => void }) {
+/** The card network mark Stripe shows beside a card's last four. */
+export function CardBrand({ brand }: { brand?: string }) {
+  const b = String(brand ?? '').toLowerCase();
+  if (b === 'mastercard') {
+    return (
+      <span className="brand brand-mastercard" title="Mastercard">
+        <svg width="20" height="12" viewBox="0 0 20 12" aria-hidden="true"><circle cx="7" cy="6" r="5" fill="#EB001B" /><circle cx="13" cy="6" r="5" fill="#F79E1B" fillOpacity="0.9" /></svg>
+      </span>
+    );
+  }
+  if (b === 'amex') return <span className="brand brand-amex" title="American Express">AMEX</span>;
+  if (b === 'visa') return <span className="brand brand-visa" title="Visa">VISA</span>;
+  return <span className="brand brand-generic" title={brand ?? 'Card'}><Icon name="card" size={12} /></span>;
+}
+export function CardLabel({ pm }: { pm?: StripeObject }) {
+  const card = pm?.card;
+  if (!card) return <span className="muted">{pm ? formatPaymentMethod(pm) : '—'}</span>;
+  return <span className="card-label"><CardBrand brand={card.brand} /><span className="dots">••••</span> {card.last4}</span>;
+}
+
+// ── status pills, as Stripe words and colours them ───────────────────────────
+type Tone = 'green' | 'grey' | 'red' | 'blue' | 'orange' | 'purple';
+const STATUS: Record<string, { label: string; tone: Tone; icon?: string }> = {
+  succeeded: { label: 'Succeeded', tone: 'green', icon: 'check' },
+  refunded: { label: 'Refunded', tone: 'grey', icon: 'refund' },
+  partially_refunded: { label: 'Partial refund', tone: 'grey', icon: 'refund' },
+  failed: { label: 'Failed', tone: 'red', icon: 'x' },
+  incomplete: { label: 'Incomplete', tone: 'grey', icon: 'clock' },
+  uncaptured: { label: 'Uncaptured', tone: 'blue', icon: 'clock' },
+  canceled: { label: 'Canceled', tone: 'grey', icon: 'x' },
+  disputed: { label: 'Disputed', tone: 'orange', icon: 'dispute' },
+  processing: { label: 'Pending', tone: 'grey', icon: 'clock' },
+  active: { label: 'Active', tone: 'green' },
+  trialing: { label: 'Trialing', tone: 'blue' },
+  past_due: { label: 'Past due', tone: 'red' },
+  unpaid: { label: 'Unpaid', tone: 'red' },
+  incomplete_expired: { label: 'Expired', tone: 'grey' },
+  paused: { label: 'Paused', tone: 'grey' },
+  paid: { label: 'Paid', tone: 'green' },
+  open: { label: 'Open', tone: 'blue' },
+  draft: { label: 'Draft', tone: 'grey' },
+  void: { label: 'Void', tone: 'grey' },
+  uncollectible: { label: 'Uncollectible', tone: 'red' },
+  pending: { label: 'Pending', tone: 'grey' },
+  enabled: { label: 'Enabled', tone: 'green' },
+  disabled: { label: 'Disabled', tone: 'grey' },
+  true: { label: 'Active', tone: 'green' },
+  false: { label: 'Archived', tone: 'grey' },
+};
+export function StatusPill({ value, suffix }: { value: unknown; suffix?: string }) {
+  const key = String(value ?? '');
+  const s = STATUS[key] ?? { label: titleCase(key || '—'), tone: 'grey' as Tone };
   return (
-    <div className="nested">
-      {lines.map((ln, i) => (
-        <div className="nested-line" key={i} style={{ paddingLeft: `${ln.depth * 14}px` }}>
-          {ln.label ? <span className="nested-label">{ln.label}</span> : null}
-          {ln.ref ? (
-            <button className="ref-inline mono" title={ln.value} onClick={() => onJump(referenceCollection(ln.label) ?? '', ln.value)}>{ln.value}</button>
-          ) : ln.value ? (
-            <span className="nested-value">{ln.value}</span>
-          ) : null}
-        </div>
-      ))}
-    </div>
+    <span className={`pill pill-${s.tone}`} data-status={key}>
+      {s.label}{suffix ?? ''}{s.icon ? <Icon name={s.icon} size={12} /> : null}
+    </span>
   );
 }
 
-/**
- * The test-card decline state (payment_intent / charge `last_payment_error`) rendered as
- * a prominent error banner — this is the vendor-faithful decline reason, not just another
- * nested field, so the mirror surfaces it like a real Stripe payment-failed screen.
- */
+/** A declined payment's reason, as Stripe states it above the payment. */
 export function PaymentErrorBanner({ error }: { error: any }) {
   const text = formatPaymentError(error);
   if (!text) return null;
+  const message = typeof error?.message === 'string' ? error.message : text;
   return (
     <div className="pay-error" role="alert">
-      <span className="pay-error-label">Payment error</span>
-      <span className="pay-error-text">{text}</span>
+      <Icon name="dispute" />
+      <div>
+        <div className="pay-error-label">Payment error</div>
+        <div className="pay-error-text">{message} <span className="mono muted">{text.split(':')[0]}</span></div>
+      </div>
     </div>
   );
 }
 
-/** The synthesized account balance summary (available / pending per currency). */
+/** The balance's per-currency buckets: incoming (pending) and available. */
 export function BalanceSummary({ row }: { row: StripeRow }) {
   const buckets = formatBalanceSummary(row);
   if (buckets.length === 0) return null;
+  const label = (b: string) => (b === 'pending' ? 'Incoming' : 'Available');
   return (
     <div className="balance-summary">
-      {buckets.map((b) => (
+      {[...buckets].reverse().map((b) => (
         <div className={`balance-bucket ${b.bucket}`} key={b.bucket}>
-          <span className="balance-bucket-label">{b.bucket}</span>
+          <span className="balance-bucket-label">{label(b.bucket)}</span>
           <span className="balance-bucket-amount">{b.text}</span>
         </div>
       ))}
@@ -132,12 +173,7 @@ export function BalanceSummary({ row }: { row: StripeRow }) {
   );
 }
 
-/**
- * Connect connected-account panel: the three enablement flags (charges/payouts/details)
- * a real Stripe Connect dashboard shows up front, plus the outstanding onboarding
- * requirements (`currently_due`). Surfaces the account's readiness like Stripe does,
- * instead of leaving these buried in the generic field grid.
- */
+/** A connected account's readiness: charges, payouts, details, and what is currently due. */
 export function ConnectAccountPanel({ row }: { row: StripeRow }) {
   const flags = formatAccountFlags(row);
   const due = accountCurrentlyDue(row);
@@ -148,544 +184,1351 @@ export function ConnectAccountPanel({ row }: { row: StripeRow }) {
         {flags.map((f) => (
           <div className={`connect-flag ${f.enabled ? 'ok' : 'warn'}`} key={f.key}>
             <span className="connect-flag-label">{f.label}</span>
-            <span className="connect-flag-state">{f.enabled ? 'enabled' : 'disabled'}</span>
+            <StatusPill value={f.enabled ? 'enabled' : 'disabled'} />
           </div>
         ))}
       </div>
       {due.length > 0 && (
         <div className="connect-requirements" role="status">
           <span className="connect-req-label">Requirements currently due</span>
-          <ul className="connect-req-list">
-            {due.map((d) => <li className="connect-req-item mono" key={d}>{d}</li>)}
-          </ul>
+          <ul className="connect-req-list">{due.map((d) => <li className="connect-req-item mono" key={d}>{d}</li>)}</ul>
         </div>
       )}
     </div>
   );
 }
 
-/**
- * Resource action bar — the lifecycle verbs a real Stripe dashboard exposes on a detail
- * (Capture / Cancel an authorized PaymentIntent, etc.). Each button POSTs the real twin
- * sub-action endpoint (e.g. /v1/payment_intents/:id/capture); the polling loop then
- * reflects the new status. Kept faithful: a Capture only shows for a requires_capture PI,
- * a Cancel only for a still-cancelable one — matching when Stripe actually allows them.
- */
-export function detailActions(collection: string, row: StripeRow): Array<{ verb: string; label: string }> {
-  const actions: Array<{ verb: string; label: string }> = [];
-  if (collection === 'payment_intents') {
-    if (row.status === 'requires_capture') actions.push({ verb: 'capture', label: 'Capture' });
-    if (row.status && !['succeeded', 'canceled'].includes(String(row.status))) actions.push({ verb: 'cancel', label: 'Cancel' });
-  }
-  return actions;
+// ── the pages under "More": a Stripe list per resource ───────────────────────
+export type Section = { key: string; label: string; path: string; title: (r: StripeRow) => string; subtitle: (r: StripeRow) => string; page?: boolean; columns?: [string, string] };
+const d = (r: StripeRow) => formatDate(r.created);
+export const SECTIONS: Section[] = [
+  { key: 'customers', label: 'Customers', path: 'customers', title: (r) => r.name || r.email || r.id, subtitle: (r) => r.email || r.id },
+  { key: 'payment_intents', label: 'Payments', path: 'payments', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.description || r.id },
+  { key: 'subscriptions', label: 'Subscriptions', path: 'subscriptions', title: (r) => r.id, subtitle: (r) => r.customer ?? '' },
+  { key: 'invoices', label: 'Invoices', path: 'invoices', title: (r) => formatStripeAmount(r.total ?? r.amount_due, r.currency), subtitle: (r) => r.number || r.id },
+  { key: 'products', label: 'Products', path: 'products', title: (r) => r.name || r.id, subtitle: (r) => r.description || r.id },
+  { key: 'prices', label: 'Prices', path: 'prices', title: (r) => `${formatStripeAmount(r.unit_amount, r.currency)}${formatRecurring(r.recurring) ? ` ${formatRecurring(r.recurring)}` : ''}`, subtitle: (r) => r.product ?? r.id },
+  { key: 'charges', label: 'Charges', path: 'charges', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.description || r.id },
+  { key: 'refunds', label: 'Refunds', path: 'refunds', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.charge ?? r.id },
+  { key: 'payment_methods', label: 'Payment Methods', path: 'payment-methods', title: (r) => formatPaymentMethod(r), subtitle: (r) => r.customer ?? r.id },
+  { key: 'setup_intents', label: 'Setup Intents', path: 'setup-intents', title: (r) => r.id, subtitle: (r) => r.usage ?? '' },
+  { key: 'invoiceitems', label: 'Invoice Items', path: 'invoice-items', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.description || r.customer || r.id },
+  { key: 'credit_notes', label: 'Credit Notes', path: 'credit-notes', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => r.invoice ?? r.id },
+  { key: 'tax_ids', label: 'Tax IDs', path: 'tax-ids', title: (r) => `${r.value ?? r.id}`, subtitle: (r) => `${r.type ?? ''}` },
+  { key: 'balance', label: 'Balance', path: 'balance', title: (r) => r.id, subtitle: () => '' },
+  // pages the Dashboard has, reached from the navigation
+  { key: 'disputes', label: 'Disputes', path: 'disputes', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${titleCase(String(r.reason ?? ''))} · ${r.charge ?? ''}`, page: true, columns: ['Amount', 'Reason'] },
+  { key: 'payouts', label: 'Payouts', path: 'payouts', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `Arrives ${formatDate(r.arrival_date, false)}`, page: true, columns: ['Amount', 'Arrival'] },
+  { key: 'balance_transactions', label: 'Balance Transactions', path: 'balance-transactions', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `${titleCase(String(r.type ?? ''))} · ${r.source ?? r.id}`, page: true, columns: ['Amount', 'Type'] },
+  { key: 'payment_links', label: 'Payment Links', path: 'payment-links', title: (r) => r.url || r.id, subtitle: (r) => (r.active ? 'Active' : 'Inactive'), page: true },
+  { key: 'coupons', label: 'Coupons', path: 'coupons', title: (r) => r.name || (r.percent_off != null ? `${r.percent_off}% off` : `${formatStripeAmount(r.amount_off, r.currency)} off`), subtitle: (r) => titleCase(String(r.duration ?? '')), page: true, columns: ['Coupon', 'Duration'] },
+  { key: 'promotion_codes', label: 'Promotion Codes', path: 'promotion-codes', title: (r) => r.code || r.id, subtitle: (r) => (typeof r.coupon === 'object' ? r.coupon?.id : r.coupon) ?? '', page: true },
+  { key: 'quotes', label: 'Quotes', path: 'quotes', title: (r) => formatStripeAmount(r.amount_total, r.currency), subtitle: (r) => r.customer ?? r.id, page: true, columns: ['Amount', 'Customer'] },
+  { key: 'accounts', label: 'Connected Accounts', path: 'connect/accounts', title: (r) => r.business_profile?.name || r.email || r.id, subtitle: (r) => `${titleCase(String(r.type ?? 'account'))} · ${r.country ?? ''}`, page: true },
+  { key: 'transfers', label: 'Transfers', path: 'connect/transfers', title: (r) => formatStripeAmount(r.amount, r.currency), subtitle: (r) => `To ${r.destination ?? '—'}`, page: true, columns: ['Amount', 'Destination'] },
+  { key: 'tax_rates', label: 'Tax Rates', path: 'tax/rates', title: (r) => `${r.display_name ?? 'Tax'} · ${r.percentage ?? 0}%`, subtitle: (r) => `${r.inclusive ? 'Inclusive' : 'Exclusive'} · ${r.jurisdiction ?? ''}`, page: true, columns: ['Tax rate', 'Type'] },
+  { key: 'reviews', label: 'Radar Reviews', path: 'radar/reviews', title: (r) => r.charge || r.payment_intent || r.id, subtitle: (r) => (r.open ? 'Open' : titleCase(String(r.closed_reason ?? 'closed'))), page: true },
+  { key: 'radar/value_lists', label: 'Radar Value Lists', path: 'radar/lists', title: (r) => r.name || r.alias || r.id, subtitle: (r) => `${r.item_type ?? ''} · ${r.alias ?? ''}`, page: true },
+  { key: 'terminal/readers', label: 'Terminal Readers', path: 'terminal/readers', title: (r) => r.label || r.id, subtitle: (r) => `${titleCase(String(r.device_type ?? ''))} · ${r.status ?? ''}`, page: true },
+  { key: 'terminal/locations', label: 'Terminal Locations', path: 'terminal/locations', title: (r) => r.display_name || r.id, subtitle: (r) => (r.address as any)?.city ?? '', page: true },
+  { key: 'issuing/cards', label: 'Issuing Cards', path: 'issuing/cards', title: (r) => `•••• ${r.last4 ?? ''}`, subtitle: (r) => `${titleCase(String(r.type ?? ''))} · ${typeof r.cardholder === 'object' ? r.cardholder?.name ?? '' : r.cardholder ?? ''}`, page: true },
+  { key: 'issuing/cardholders', label: 'Issuing Cardholders', path: 'issuing/cardholders', title: (r) => r.name || r.id, subtitle: (r) => r.email || titleCase(String(r.type ?? '')), page: true },
+  { key: 'reporting/report_runs', label: 'Reports', path: 'reports', title: (r) => r.report_type || r.id, subtitle: (r) => titleCase(String(r.status ?? '')), page: true },
+  { key: 'events', label: 'Events', path: 'events', title: (r) => r.type || r.id, subtitle: (r) => r.data?.object?.id ?? r.id, page: true, columns: ['Event', 'Object'] },
+  { key: 'webhook_endpoints', label: 'Webhook Endpoints', path: 'webhooks', title: (r) => r.url || r.id, subtitle: (r) => `${(r.enabled_events ?? []).length} events`, page: true },
+];
+const SECTION_BY_PATH = new Map(SECTIONS.filter((s) => s.page).map((s) => [s.path, s]));
+const statusOfRow = (r: StripeRow) => (r.status !== undefined ? r.status : r.active !== undefined ? String(r.active) : undefined);
+
+/** A Stripe list table over one resource's objects. */
+export function ListPane({ section, rows, query, currentId, onSelect }: { section: Section; rows: StripeRow[]; query?: string; currentId?: string; onSelect: (id: string) => void }) {
+  return (
+    <table className="table">
+      <thead><tr><th>{section.columns?.[0] ?? section.label.replace(/^(Radar|Terminal|Issuing|Tax) /, '')}</th><th>{section.columns?.[1] ?? 'Details'}</th><th>Status</th><th>ID</th><th className="right">Created</th></tr></thead>
+      <tbody>
+        {rows.length === 0 && <tr className="empty-row"><td colSpan={5}><EmptyState title={query ? 'No results' : `No ${section.label.toLowerCase()}`} /></td></tr>}
+        {rows.map((row, i) => (
+          <tr key={row.id ?? i} className={`list-row ${currentId === row.id ? 'current' : ''}`} onClick={() => onSelect(row.id)}>
+            <td className="strong">{section.title(row)}</td>
+            <td className="muted">{section.subtitle(row)}</td>
+            <td>{statusOfRow(row) !== undefined ? <StatusPill value={statusOfRow(row)} /> : null}</td>
+            <td className="mono muted">{row.id}</td>
+            <td className="right muted nowrap">{d(row)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 }
 
-export function DetailActions({ collection, row, onDone }: { collection: string; row: StripeRow; onDone: () => void }) {
-  const [busy, setBusy] = useState<string | null>(null);
-  const [err, setErr] = useState<string | null>(null);
-  const actions = detailActions(collection, row);
-  if (actions.length === 0) return null;
-  const run = async (verb: string) => {
-    setBusy(verb); setErr(null);
-    try {
-      const res = await fetch(`/v1/${collection}/${row.id}/${verb}`, { method: 'POST' }).then((r) => r.json());
-      if (res.error) throw new Error(res.error.message);
-      onDone();
-    } catch (e: any) {
-      setErr(String(e.message ?? e));
-    } finally {
-      setBusy(null);
+// ── search: the top bar's search over the objects a person looks for ─────────
+export type SearchHit = { to: string; kind: string; label: string; sub: string };
+export function globalSearch(data: Record<string, StripeRow[]>, query: string, limit = 12): SearchHit[] {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const hits: SearchHit[] = [];
+  const add = (rows: StripeRow[] | undefined, kind: string, route: string, label: (r: StripeRow) => string, sub: (r: StripeRow) => string, fields: (r: StripeRow) => unknown[]) => {
+    for (const r of rows ?? []) {
+      if (hits.length >= limit) return;
+      if (fields(r).some((f) => String(f ?? '').toLowerCase().includes(q))) hits.push({ to: `${route}/${r.id}`, kind, label: label(r), sub: sub(r) });
     }
   };
+  add(data.customers, 'Customers', 'customers', (r) => r.name || r.email || r.id, (r) => r.email || r.id, (r) => [r.id, r.name, r.email, r.description]);
+  add(data.payment_intents, 'Payments', 'payments', (r) => `${formatStripeAmount(r.amount, r.currency)} ${ccy(r.currency)}`, (r) => r.description || r.id, (r) => [r.id, r.description, r.latest_charge, (Number(r.amount) / 100).toFixed(2)]);
+  add(data.subscriptions, 'Subscriptions', 'subscriptions', (r) => r.id, (r) => titleCase(String(r.status ?? '')), (r) => [r.id]);
+  add(data.invoices, 'Invoices', 'invoices', (r) => r.number || r.id, (r) => `${formatStripeAmount(r.total, r.currency)} · ${titleCase(String(r.status ?? ''))}`, (r) => [r.id, r.number, r.customer_email]);
+  add(data.products, 'Products', 'products', (r) => r.name || r.id, (r) => r.description || r.id, (r) => [r.id, r.name, r.description]);
+  return hits;
+}
+
+function SearchBox({ go }: { go: Go }) {
+  const [q, setQ] = useState('');
+  const [open, setOpen] = useState(false);
+  const [data, setData] = useState<Record<string, StripeRow[]>>({});
+  const input = useRef<HTMLInputElement>(null);
+  const load = useCallback(async () => {
+    const keys = ['customers', 'payment_intents', 'subscriptions', 'invoices', 'products'];
+    const lists = await Promise.all(keys.map((k) => list(`/v1/${k}${k === 'subscriptions' ? '?status=all' : ''}`).catch(() => [])));
+    setData(Object.fromEntries(keys.map((k, i) => [k, lists[i]!])));
+  }, []);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const typing = (e.target as HTMLElement)?.closest?.('input,textarea,select');
+      if (!typing && (e.key === '/' || ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k'))) { e.preventDefault(); input.current?.focus(); }
+      if (e.key === 'Escape') { setOpen(false); input.current?.blur(); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+  const hits = useMemo(() => globalSearch(data, q), [data, q]);
+  const pick = (h: SearchHit) => { go(h.to); setOpen(false); setQ(''); input.current?.blur(); };
   return (
-    <div className="detail-actions">
-      {actions.map((a) => (
-        <button key={a.verb} className={`action-btn action-${a.verb}`} disabled={busy !== null} onClick={() => run(a.verb)}>
-          {busy === a.verb ? `${a.label}…` : a.label}
-        </button>
-      ))}
-      {err && <span className="action-error" role="alert">{err}</span>}
+    <div className="search">
+      <Icon name="search" className="search-icon" />
+      <input
+        ref={input} className="search-input cmdk-input" placeholder="Search" value={q}
+        onFocus={() => { setOpen(true); void load(); }}
+        onBlur={() => window.setTimeout(() => setOpen(false), 150)}
+        onChange={(e) => { setQ(e.target.value); setOpen(true); }}
+        onKeyDown={(e) => { if (e.key === 'Enter' && hits[0]) pick(hits[0]); }}
+      />
+      {open && q ? (
+        <div className="cmdk" role="listbox" aria-label="Search results">
+          {hits.length === 0 && <div className="cmdk-empty">No results for “{q}”</div>}
+          {hits.map((h, i) => (
+            <React.Fragment key={h.to}>
+              {i === 0 || hits[i - 1]!.kind !== h.kind ? <div className="cmdk-group">{h.kind}</div> : null}
+              <button className="cmdk-hit" role="option" onMouseDown={(e) => e.preventDefault()} onClick={() => pick(h)}>
+                <span className="cmdk-hit-label">{h.label}</span>
+                <span className="cmdk-hit-sub">{h.sub}</span>
+              </button>
+            </React.Fragment>
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 }
 
-export function Detail({ collection, row, refs, onJump, onAction }: { collection: string; row?: StripeRow; refs: CrossRefs; onJump: (c: string, id: string) => void; onAction?: () => void }) {
-  if (!row) return <aside className="detail empty">Select a row to inspect it.</aside>;
-  const ccy = typeof row.currency === 'string' ? row.currency : undefined;
-  // Split scalar fields (a plain key/value grid) from nested objects/arrays (recursive).
-  // `last_payment_error` is lifted out into a prominent banner (below) rather than buried
-  // in the generic nested list, so the decline reason reads like a real payment screen.
-  const scalars: Array<[string, any]> = [];
-  const nested: Array<[string, any]> = [];
-  for (const [k, v] of Object.entries(row)) {
-    if (v === null || v === undefined || k === 'object' || k === 'last_payment_error') continue;
-    (typeof v === 'object' ? nested : scalars).push([k, v]);
-  }
-  return (
-    <aside className="detail">
-      <div className="detail-head">
-        <span className="mono">{row.id}</span>
-        {row.status ? <StatusPill value={row.status} /> : row.active !== undefined ? <StatusPill value={String(row.active)} /> : null}
-      </div>
-
-      <DetailActions collection={collection} row={row} onDone={() => onAction?.()} />
-      <PaymentErrorBanner error={row.last_payment_error} />
-      {collection === BALANCE_KEY ? <BalanceSummary row={row} /> : null}
-      {collection === 'accounts' ? <ConnectAccountPanel row={row} /> : null}
+// ── shell ────────────────────────────────────────────────────────────────────
+type NavItem = { to: string; label: string; icon?: string; match?: string[] };
+const PRIMARY_NAV: NavItem[] = [
+  { to: 'dashboard', label: 'Home', icon: 'home' },
+  { to: 'balance/overview', label: 'Balances', icon: 'balance', match: ['balance', 'payouts', 'balance-transactions'] },
+  { to: 'payments', label: 'Transactions', icon: 'transactions', match: ['payments', 'disputes'] },
+  { to: 'customers', label: 'Customers', icon: 'customers' },
+  { to: 'products', label: 'Product catalog', icon: 'catalog', match: ['products', 'coupons', 'promotion-codes'] },
+];
+const PRODUCT_NAV: Array<{ label: string; icon: string; items: NavItem[] }> = [
+  { label: 'Connect', icon: 'connect', items: [{ to: 'connect/accounts', label: 'Connected accounts' }, { to: 'connect/transfers', label: 'Transfers' }] },
+  { label: 'Payments', icon: 'payments', items: [{ to: 'disputes', label: 'Disputes' }, { to: 'radar/reviews', label: 'Radar' }, { to: 'payment-links', label: 'Payment Links' }, { to: 'terminal/readers', label: 'Terminal' }] },
+  { label: 'Billing', icon: 'billing', items: [{ to: 'subscriptions', label: 'Subscriptions' }, { to: 'invoices', label: 'Invoices' }, { to: 'quotes', label: 'Quotes' }] },
+  { label: 'Reporting', icon: 'reporting', items: [{ to: 'reports', label: 'Reports' }] },
+  { label: 'More', icon: 'more', items: [{ to: 'tax/rates', label: 'Tax' }, { to: 'issuing/cards', label: 'Issuing' }] },
+];
+const isActive = (route: string[], item: NavItem) => {
+  const here = route.join('/');
+  return [item.to, ...(item.match ?? [])].some((m) => here === m || here.startsWith(`${m}/`) || route[0] === m);
+};
 
-      <dl>
-        {scalars.map(([k, v]) => {
-          const ref = typeof v === 'string' && referenceCollection(k);
-          const isMoney = k === 'amount' || k === 'unit_amount' || /amount|total|subtotal|balance/.test(k);
+export function SideNav({ route, go }: { route: string[]; go: Go }) {
+  const [open, setOpen] = useState<Record<string, boolean>>({ Billing: true });
+  const link = (item: NavItem, sub = false) => (
+    <a
+      key={item.to} href={hrefOf(item.to)} className={`nav-item ${sub ? 'nav-sub' : ''} ${isActive(route, item) ? 'active' : ''}`}
+      onClick={(e) => { e.preventDefault(); go(item.to); }}
+    >
+      {item.icon ? <Icon name={item.icon} /> : null}<span>{item.label}</span>
+    </a>
+  );
+  return (
+    <nav className="side" aria-label="Main">
+      <button className="account-switcher" onClick={() => go('settings')}>
+        <span className="account-mark">T</span>
+        <span className="account-name">Twin Inc.</span>
+        <Icon name="chevronDown" size={12} />
+      </button>
+      <div className="nav-group">{PRIMARY_NAV.map((i) => link(i))}</div>
+      <div className="nav-heading">Products</div>
+      <div className="nav-group">
+        {PRODUCT_NAV.map((g) => {
+          const expanded = open[g.label] || g.items.some((i) => isActive(route, i));
           return (
-            <div className="kv" key={k}>
-              <dt>{k}</dt>
-              <dd className={k === 'id' || String(k).endsWith('_id') ? 'mono' : ''}>
-                {ref ? (
-                  <button className="ref-inline mono" onClick={() => onJump(ref, v)}>{v}</button>
-                ) : isMoney && typeof v === 'number' ? formatStripeAmount(v, ccy) : String(v)}
-              </dd>
+            <div key={g.label} className="nav-folder">
+              <button className={`nav-item ${expanded ? 'expanded' : ''}`} aria-expanded={expanded} onClick={() => setOpen((o) => ({ ...o, [g.label]: !expanded }))}>
+                <Icon name={g.icon} /><span>{g.label}</span><Icon name={expanded ? 'chevronDown' : 'chevronRight'} size={12} className="nav-caret" />
+              </button>
+              {expanded ? g.items.map((i) => link(i, true)) : null}
             </div>
           );
         })}
-      </dl>
-
-      {nested.map(([k, v]) => {
-        const thumbs = collection === 'products' && k === 'images' ? productImageUrls(v) : [];
-        return (
-          <div className="detail-block" key={k}>
-            <h4>{k}</h4>
-            {thumbs.length > 0 ? (
-              <div className="thumbs">
-                {thumbs.map((src, i) => (
-                  <a className="thumb" key={i} href={src} target="_blank" rel="noreferrer" title={src}>
-                    <img src={src} alt={`${row.name ?? row.id} image ${i + 1}`} loading="lazy" />
-                  </a>
-                ))}
-              </div>
-            ) : (
-              <NestedLines lines={flattenStripeValue(v, { currency: ccy })} onJump={onJump} />
-            )}
-          </div>
-        );
-      })}
-
-      {(refs.outgoing.length > 0 || refs.incoming.length > 0) && (
-        <div className="detail-block refs">
-          <h4>Related</h4>
-          {refs.outgoing.length > 0 && (
-            <div className="ref-group">
-              <span className="ref-group-label">References</span>
-              {refs.outgoing.map((r, i) => <RefChip key={`o${i}`} {...r} onJump={onJump} />)}
-            </div>
-          )}
-          {refs.incoming.length > 0 && (
-            <div className="ref-group">
-              <span className="ref-group-label">Referenced by</span>
-              {refs.incoming.map((r, i) => <RefChip key={`i${i}`} {...r} onJump={onJump} />)}
-            </div>
-          )}
-        </div>
-      )}
-    </aside>
+      </div>
+      <div className="nav-foot">{link({ to: 'developers', label: 'Developers', icon: 'developers', match: ['developers', 'events', 'webhooks'] })}</div>
+    </nav>
   );
 }
 
-/** The left navigation: one item per collection (section), each with a live count. */
-export function SideNav({ sections, counts, activeKey, onSelect, onHome, onSettings }: {
-  sections: Section[];
-  counts: Record<string, number>;
-  activeKey: string;
-  onSelect: (key: string) => void;
-  onHome?: () => void;
-  onSettings?: () => void;
-}) {
+function TopBar({ go }: { go: Go }) {
   return (
-    <nav className="side">
-      <button className={`nav-home ${activeKey === '__home' ? 'active' : ''}`} onClick={onHome}>
-        <span>Home</span>
-      </button>
-      {sections.map((s) => (
-        <button key={s.key} className={s.key === activeKey ? 'active' : ''} onClick={() => onSelect(s.key)}>
-          <span>{s.label}</span>
-          <span className="nav-count">{counts[s.key] ?? 0}</span>
+    <header className="topbar">
+      <SearchBox go={go} />
+      <div className="topbar-actions">
+        <button className="icon-btn" title="Help" aria-label="Help"><Icon name="help" /></button>
+        <button className="icon-btn" title="Notifications" aria-label="Notifications"><Icon name="bell" /></button>
+        <button className="icon-btn" title="Settings" aria-label="Settings" onClick={() => go('settings')}><Icon name="gear" /></button>
+        <button className="icon-btn create" title="Create" aria-label="Create" onClick={() => go('customers?create=1')}><Icon name="plus" /></button>
+      </div>
+    </header>
+  );
+}
+
+export function TestModeBand() {
+  return (
+    <div className="test-band" role="note">
+      <span className="test-band-tag">Test mode</span>
+      <span className="test-band-text">You’re using test data. Changes you make here don’t affect your live account.</span>
+    </div>
+  );
+}
+
+// ── data per page ────────────────────────────────────────────────────────────
+/** Load a page's data through the API, refresh it every few seconds, and after a write. */
+function useApi<T>(loader: () => Promise<T>, deps: unknown[]): { data?: T; error?: string; reload: () => void } {
+  const [state, setState] = useState<{ data?: T; error?: string }>({});
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    let live = true;
+    const run = () => loader().then((data) => { if (live) setState({ data }); }, (e) => { if (live) setState((s) => ({ ...s, error: String(e?.message ?? e) })); });
+    void run();
+    const timer = window.setInterval(run, 4000);
+    return () => { live = false; window.clearInterval(timer); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, tick]);
+  return { ...state, reload: () => setTick((t) => t + 1) };
+}
+
+function EmptyState({ title, body }: { title: string; body?: string }) {
+  return <div className="empty"><div className="empty-title">{title}</div>{body ? <div className="empty-body">{body}</div> : null}</div>;
+}
+function Loading({ error }: { error?: string }) {
+  return error ? <div className="page-error" role="alert">{error}</div> : <div className="loading">Loading…</div>;
+}
+function PageHead({ title, actions, kicker, children }: { title: React.ReactNode; actions?: React.ReactNode; kicker?: React.ReactNode; children?: React.ReactNode }) {
+  return (
+    <div className="page-head">
+      {kicker ? <div className="kicker">{kicker}</div> : null}
+      <div className="page-head-row"><h1>{title}</h1>{actions ? <div className="page-actions">{actions}</div> : null}</div>
+      {children}
+    </div>
+  );
+}
+function FilterCards<K extends string>({ options, value, onChange }: { options: Array<{ key: K; label: string; count: number }>; value: K; onChange: (k: K) => void }) {
+  return (
+    <div className="filter-cards" role="tablist">
+      {options.map((o) => (
+        <button key={o.key} role="tab" aria-selected={value === o.key} className={`filter-card ${value === o.key ? 'selected' : ''}`} onClick={() => onChange(o.key)}>
+          <span className="filter-card-label">{o.label}</span>
+          <span className="filter-card-count">{o.count}</span>
         </button>
       ))}
-      <button className={`nav-settings ${activeKey === '__settings' ? 'active' : ''}`} onClick={onSettings}>
-        <span>Settings</span>
+    </div>
+  );
+}
+/** One of the toolbar's filter chips: a dashed pill that opens a list of values; a chosen value fills it. */
+function FilterChip({ label, value, options, onChange }: { label: string; value?: string; options: Array<{ key: string; label: string }>; onChange: (v?: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const chosen = options.find((o) => o.key === value);
+  return (
+    <div className="chip-wrap">
+      <button className={`chip ${chosen ? 'chip-set' : ''}`} aria-expanded={open} onClick={() => setOpen((o) => !o)}>
+        <span className="chip-plus" onClick={(e) => { if (chosen) { e.stopPropagation(); onChange(undefined); setOpen(false); } }}><Icon name={chosen ? 'x' : 'plus'} size={10} /></span>
+        {label}{chosen ? <><span className="chip-sep">|</span><span className="chip-value">{chosen.label}</span></> : null}
       </button>
-    </nav>
+      {open ? (
+        <div className="popover" role="menu" aria-label={`Filter by ${label}`}>
+          <div className="popover-title">Filter by {label.toLowerCase()}</div>
+          {options.map((o) => (
+            <button key={o.key} role="menuitemradio" aria-checked={o.key === value} className={`popover-item ${o.key === value ? 'checked' : ''}`} onClick={() => { onChange(o.key); setOpen(false); }}>
+              <span className="popover-radio" />{o.label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
   );
 }
 
-// ── Home / overview screen ──────────────────────────────────────────────────
-// The real Stripe Dashboard Home leads with top-line metrics. We compute them from the
-// SAME twin state the rest of the dashboard renders (no separate data source): gross
-// volume from succeeded payments, the available balance, and live counts. Data-coupled:
-// every number here is derived from the fetched /v1/<collection> projections.
-export function computeHomeMetrics(data: Record<string, StripeRow[]>): {
-  grossVolume: number; currency: string; succeededPayments: number;
-  activeSubscriptions: number; customers: number; openInvoices: number; availableText: string;
-} {
-  const pis = data.payment_intents ?? [];
-  const succeeded = pis.filter((p) => p.status === 'succeeded');
-  const currency = (succeeded[0]?.currency as string) || (pis[0]?.currency as string) || 'usd';
-  const grossVolume = succeeded.reduce((s, p) => s + (Number(p.amount_received ?? p.amount) || 0), 0);
-  const subs = data.subscriptions ?? [];
-  const invoices = data.invoices ?? [];
-  const balanceRow = (data.balance ?? [])[0];
-  const buckets = formatBalanceSummary(balanceRow);
-  const availableText = buckets.find((b) => b.bucket === 'available')?.text ?? formatStripeAmount(0, currency);
+/** Download the rows the table shows as a CSV, as the Dashboard's Export does. */
+function exportCsv(name: string, header: string[], rows: Array<Array<string | number>>) {
+  const cell = (v: string | number) => `"${String(v).replace(/"/g, '""')}"`;
+  const csv = [header, ...rows].map((r) => r.map(cell).join(',')).join('\n');
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
+  a.download = `${name}.csv`;
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+function ResultCount({ n }: { n: number }) {
+  return (
+    <div className="table-foot">
+      <span>{n} {n === 1 ? 'result' : 'results'}</span>
+      <span className="pager"><button className="btn" disabled>Previous</button><button className="btn" disabled>Next</button></span>
+    </div>
+  );
+}
+function Section({ title, actions, children, className }: { title: string; actions?: React.ReactNode; children: React.ReactNode; className?: string }) {
+  return (
+    <section className={`section ${className ?? ''}`}>
+      <div className="section-head"><h2>{title}</h2>{actions}</div>
+      {children}
+    </section>
+  );
+}
+function Props({ rows }: { rows: Array<[string, React.ReactNode]> }) {
+  return (
+    <dl className="props">
+      {rows.map(([k, v]) => <div className="prop" key={k}><dt>{k}</dt><dd>{v ?? '—'}</dd></div>)}
+    </dl>
+  );
+}
+function Amount({ amount, currency }: { amount: number; currency: string }) {
+  return <span className="amount"><span className="amount-value">{money(amount, currency)}</span> <span className="amount-ccy">{ccy(currency)}</span></span>;
+}
+function Link({ to, go, children, className }: { to: string; go: Go; children: React.ReactNode; className?: string }) {
+  return <a href={hrefOf(to)} className={`link ${className ?? ''}`} onClick={(e) => { e.preventDefault(); e.stopPropagation(); go(to); }}>{children}</a>;
+}
+
+// ── Home ─────────────────────────────────────────────────────────────────────
+export function computeHomeMetrics(data: { payments: Payment[]; customers: StripeObject[]; subscriptions: StripeObject[]; invoices: StripeObject[]; balance?: StripeObject }) {
+  const succeeded = data.payments.filter((p) => ['succeeded', 'refunded', 'partially_refunded', 'disputed'].includes(p.status));
+  const currency = succeeded[0]?.currency ?? 'usd';
+  const grossVolume = succeeded.reduce((s, p) => s + p.amount, 0);
+  const refunded = succeeded.reduce((s, p) => s + p.amountRefunded, 0);
+  const available = data.balance ? (data.balance.available ?? []).find((b: StripeObject) => b.currency === currency)?.amount ?? 0 : 0;
+  const pending = data.balance ? (data.balance.pending ?? []).find((b: StripeObject) => b.currency === currency)?.amount ?? 0 : 0;
   return {
-    grossVolume, currency,
-    succeededPayments: succeeded.length,
-    activeSubscriptions: subs.filter((s) => s.status === 'active' || s.status === 'trialing').length,
-    customers: (data.customers ?? []).length,
-    openInvoices: invoices.filter((i) => i.status === 'open').length,
-    availableText,
+    currency, grossVolume, netVolume: grossVolume - refunded, available: Number(available) || 0, pending: Number(pending) || 0,
+    succeededPayments: data.payments.filter((p) => p.status === 'succeeded').length,
+    failedPayments: data.payments.filter((p) => p.status === 'failed').length,
+    customers: data.customers.length,
+    activeSubscriptions: data.subscriptions.filter((s) => s.status === 'active' || s.status === 'trialing').length,
+    openInvoices: data.invoices.filter((i) => i.status === 'open').length,
   };
 }
-
-export function HomeScreen({ data, onJump }: { data: Record<string, StripeRow[]>; onJump: (c: string, id: string) => void }) {
+function Sparkline({ points, of = points.length }: { points: number[]; of?: number }) {
+  const w = 280, h = 64;
+  const max = Math.max(1, ...points);
+  const xy = points.map((p, i) => `${(i / Math.max(1, of - 1)) * w},${h - 4 - (p / max) * (h - 12)}`);
+  return (
+    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
+      <polyline points={xy.join(' ')} fill="none" stroke="#635BFF" strokeWidth="2" vectorEffect="non-scaling-stroke" />
+      <line x1="0" x2={w} y1={h - 1} y2={h - 1} stroke="#EBEEF1" />
+    </svg>
+  );
+}
+function cumulativeByHour(payments: Payment[]): number[] {
+  const out = new Array(24).fill(0) as number[];
+  for (const p of payments) if (p.status !== 'failed' && p.status !== 'incomplete') out[new Date(p.created * 1000).getHours()]! += p.amount;
+  for (let i = 1; i < 24; i++) out[i]! += out[i - 1]!;
+  // today's line stops at the current hour, as Stripe's does
+  return out.slice(0, new Date().getHours() + 1);
+}
+export function HomeScreen({ go }: { go: Go }) {
+  const { data, error } = useApi(loadHome, []);
+  if (!data) return <Loading error={error} />;
   const m = computeHomeMetrics(data);
-  const cards = [
-    { key: 'gross', label: 'Gross volume', value: formatStripeAmount(m.grossVolume, m.currency) },
-    { key: 'available', label: 'Available balance', value: m.availableText },
+  const curve = cumulativeByHour(data.payments);
+  const overview = [
+    { key: 'gross', label: 'Gross volume', value: money(m.grossVolume, m.currency) },
+    { key: 'net', label: 'Net volume', value: money(m.netVolume, m.currency) },
     { key: 'payments', label: 'Successful payments', value: String(m.succeededPayments) },
-    { key: 'subs', label: 'Active subscriptions', value: String(m.activeSubscriptions) },
-    { key: 'customers', label: 'Customers', value: String(m.customers) },
-    { key: 'open_invoices', label: 'Open invoices', value: String(m.openInvoices) },
+    { key: 'failed', label: 'Failed payments', value: String(m.failedPayments) },
+    { key: 'customers', label: 'New customers', value: String(m.customers) },
+    { key: 'subs', label: 'Active subscribers', value: String(m.activeSubscriptions) },
   ];
-  const recent = (data.payment_intents ?? []).slice(0, 5);
   return (
     <div className="home-screen">
+      <PageHead title="Today" />
+      <div className="today">
+        <div className="today-chart">
+          <div className="today-label">Gross volume <Icon name="chevronDown" size={12} /></div>
+          <div className="today-value">{money(m.grossVolume, m.currency)}</div>
+          <Sparkline points={curve} of={24} />
+          <div className="today-axis"><span>12:00 AM</span><span>11:59 PM</span></div>
+        </div>
+        <div className="today-side">
+          <div className="today-side-block">
+            <div className="today-label">{ccy(m.currency)} balance</div>
+            <div className="today-side-value">{money(m.available + m.pending, m.currency)}</div>
+            <Link to="balance/overview" go={go}>View</Link>
+          </div>
+          <div className="today-side-block">
+            <div className="today-label">Payouts</div>
+            <div className="today-side-value">{money(0, m.currency)}</div>
+            <Link to="payouts" go={go}>View</Link>
+          </div>
+        </div>
+      </div>
+      <h2 className="overview-title">Your overview</h2>
       <div className="home-metrics">
-        {cards.map((c) => (
+        {overview.map((c) => (
           <div className="metric-card" key={c.key} data-metric={c.key}>
             <span className="metric-label">{c.label}</span>
             <span className="metric-value">{c.value}</span>
           </div>
         ))}
       </div>
-      <div className="home-recent">
-        <h3>Recent payments</h3>
-        {recent.length === 0 && <div className="empty">No payments yet.</div>}
-        {recent.map((p) => (
-          <button className="home-recent-row" key={p.id} onClick={() => onJump('payment_intents', p.id)}>
-            <span className="row-title">{formatStripeAmount(p.amount, p.currency)}</span>
-            <StatusPill value={p.status} />
-            <span className="row-sub mono">{p.id}</span>
-          </button>
+      <Section title="Recent payments" actions={<Link to="payments" go={go}>View all</Link>}>
+        <PaymentsTable payments={data.payments.slice(0, 5)} go={go} compact />
+      </Section>
+    </div>
+  );
+}
+
+// ── Payments ─────────────────────────────────────────────────────────────────
+type PaymentFilter = 'all' | 'succeeded' | 'refunded' | 'disputed' | 'failed' | 'uncaptured';
+const matchesFilter = (p: Payment, f: PaymentFilter) =>
+  f === 'all' || (f === 'refunded' ? p.status === 'refunded' || p.status === 'partially_refunded' : p.status === f);
+
+export function PaymentsTable({ payments, go, compact, noCustomer }: { payments: Payment[]; go: Go; compact?: boolean; noCustomer?: boolean }) {
+  const cols = (compact ? 6 : 8) - (noCustomer ? 1 : 0);
+  return (
+    <table className="table payments-table">
+      <thead>
+        <tr>
+          <th>Amount</th><th /><th>Payment method</th><th>Description</th>{noCustomer ? null : <th>Customer</th>}<th>Date</th>
+          {compact ? null : <><th>Refunded date</th><th>Decline reason</th></>}
+        </tr>
+      </thead>
+      <tbody>
+        {payments.length === 0 && <tr className="empty-row"><td colSpan={cols}><EmptyState title="No payments" body={compact ? undefined : 'Payments you create through the API show up here.'} /></td></tr>}
+        {payments.map((p) => (
+          <tr key={p.id} className="list-row" onClick={() => go(`payments/${p.id}`)}>
+            <td className="nowrap"><Amount amount={p.amount} currency={p.currency} /></td>
+            <td><StatusPill value={p.status} /></td>
+            <td className="nowrap"><CardLabel pm={p.paymentMethod} /></td>
+            <td className="truncate">{p.description ?? <span className="muted">{p.id}</span>}</td>
+            {noCustomer ? null : <td className="truncate">{p.customer ? p.customer.email || p.customer.name || p.customer.id : <span className="muted">—</span>}</td>}
+            <td className="nowrap muted">{formatDate(p.created)}</td>
+            {compact ? null : <>
+              <td className="nowrap muted">{p.refundedAt ? formatDate(p.refundedAt) : '—'}</td>
+              <td className="nowrap muted">{p.declineReason ?? '—'}</td>
+            </>}
+          </tr>
         ))}
+      </tbody>
+    </table>
+  );
+}
+
+const DAY = 86400;
+const DATE_RANGES = [{ key: 'today', label: 'Today' }, { key: '7d', label: 'Last 7 days' }, { key: '4w', label: 'Last 4 weeks' }, { key: '12m', label: 'Last 12 months' }];
+function inRange(ts: number, range?: string): boolean {
+  if (!range) return true;
+  const now = Date.now() / 1000;
+  if (range === 'today') { const d = new Date(); d.setHours(0, 0, 0, 0); return ts >= d.getTime() / 1000; }
+  return ts >= now - ({ '7d': 7, '4w': 28, '12m': 365 }[range] ?? 0) * DAY;
+}
+function PaymentsPage({ go }: { go: Go }) {
+  const { data, error } = useApi(loadPayments, []);
+  const [filter, setFilter] = useState<PaymentFilter>('all');
+  const [chips, setChips] = useState<{ date?: string; currency?: string; status?: string; method?: string }>({});
+  const all = data ?? [];
+  const payments = all.filter((p) => inRange(p.created, chips.date) && (!chips.currency || p.currency === chips.currency)
+    && (!chips.status || p.status === chips.status) && (!chips.method || (p.paymentMethod?.card?.brand ?? p.paymentMethod?.type) === chips.method));
+  const count = (f: PaymentFilter) => payments.filter((p) => matchesFilter(p, f)).length;
+  const shown = payments.filter((p) => matchesFilter(p, filter));
+  const uniq = (xs: Array<string | undefined>) => [...new Set(xs.filter((x): x is string => Boolean(x)))];
+  return (
+    <div className="page">
+      <PageHead title="Transactions">
+        <div className="tabs"><Link to="payments" go={go} className="tab active">Payments</Link><Link to="disputes" go={go} className="tab">Disputes</Link></div>
+      </PageHead>
+      <FilterCards<PaymentFilter>
+        value={filter} onChange={setFilter}
+        options={[
+          { key: 'all', label: 'All', count: payments.length }, { key: 'succeeded', label: 'Succeeded', count: count('succeeded') },
+          { key: 'refunded', label: 'Refunded', count: count('refunded') }, { key: 'disputed', label: 'Disputed', count: count('disputed') },
+          { key: 'failed', label: 'Failed', count: count('failed') }, { key: 'uncaptured', label: 'Uncaptured', count: count('uncaptured') },
+        ]}
+      />
+      <div className="toolbar">
+        <FilterChip label="Date and time" value={chips.date} options={DATE_RANGES} onChange={(date) => setChips((c) => ({ ...c, date }))} />
+        <FilterChip label="Currency" value={chips.currency} options={uniq(all.map((p) => p.currency)).map((c) => ({ key: c, label: ccy(c) }))} onChange={(currency) => setChips((c) => ({ ...c, currency }))} />
+        <FilterChip label="Status" value={chips.status} options={uniq(all.map((p) => p.status)).map((k) => ({ key: k, label: STATUS[k]?.label ?? k }))} onChange={(status) => setChips((c) => ({ ...c, status }))} />
+        <FilterChip label="Payment method" value={chips.method} options={uniq(all.map((p) => p.paymentMethod?.card?.brand ?? p.paymentMethod?.type)).map((b) => ({ key: b, label: b === 'amex' ? 'American Express' : titleCase(b) }))} onChange={(method) => setChips((c) => ({ ...c, method }))} />
+        <div className="toolbar-right">
+          <button className="btn" onClick={() => exportCsv('payments', ['id', 'Amount', 'Currency', 'Status', 'Description', 'Customer Email', 'Created'], shown.map((p) => [p.id, (p.amount / 100).toFixed(2), p.currency, p.status, p.description ?? '', p.customer?.email ?? '', new Date(p.created * 1000).toISOString()]))}>
+            <Icon name="download" size={14} /> Export
+          </button>
+        </div>
       </div>
+      {data ? <><PaymentsTable payments={shown} go={go} /><ResultCount n={shown.length} /></> : <Loading error={error} />}
     </div>
   );
 }
 
-// ── Global search / command bar ─────────────────────────────────────────────
-// Stripe's Cmd-K command bar searches ACROSS every object type. We search the SAME cached
-// collection data (id / email / name / status / amount substring) and return ranked,
-// cross-collection hits — data-coupled to the twin's real state.
-export type SearchHit = { collection: string; id: string; label: string; sub: string };
-export function globalSearch(data: Record<string, StripeRow[]>, query: string, limit = 20): SearchHit[] {
-  const q = query.trim().toLowerCase();
-  if (!q) return [];
-  const hits: SearchHit[] = [];
-  for (const section of SECTIONS) {
-    for (const row of data[section.key] ?? []) {
-      const haystack = [row.id, row.email, row.name, row.status, section.title(row), section.subtitle(row)]
-        .map((f) => String(f ?? '').toLowerCase());
-      if (haystack.some((f) => f.includes(q))) {
-        hits.push({ collection: section.key, id: row.id, label: section.title(row), sub: `${section.label} · ${row.id}` });
-        if (hits.length >= limit) return hits;
-      }
-    }
-  }
-  return hits;
+const EVENT_TEXT: Record<string, string> = {
+  'payment_intent.created': 'Payment started',
+  'payment_intent.succeeded': 'Payment succeeded',
+  'payment_intent.payment_failed': 'Payment failed',
+  'payment_intent.canceled': 'Payment canceled',
+  'payment_intent.amount_capturable_updated': 'Payment authorized',
+  'payment_intent.requires_action': 'Payment requires authentication',
+  'charge.succeeded': 'Payment succeeded',
+  'charge.failed': 'Payment failed',
+  'charge.captured': 'Payment captured',
+  'charge.dispute.created': 'Payment disputed',
+  'refund.created': 'Refund initiated',
+  'refund.updated': 'Refund updated',
+  'customer.created': 'Customer created',
+  'customer.updated': 'Customer updated',
+  'customer.subscription.created': 'Subscription created',
+  'customer.subscription.updated': 'Subscription updated',
+  'customer.subscription.deleted': 'Subscription canceled',
+  'invoice.created': 'Invoice created',
+  'invoice.finalized': 'Invoice finalized',
+  'invoice.paid': 'Invoice paid',
+  'invoice.payment_failed': 'Invoice payment failed',
+};
+function eventText(e: StripeObject): string {
+  const obj = e.data?.object ?? {};
+  if (e.type === 'charge.refunded') return `${money(obj.amount_refunded, obj.currency)} ${ccy(obj.currency)} refunded`;
+  if (e.type === 'refund.created') return `Refund of ${money(obj.amount, obj.currency)} ${ccy(obj.currency)} initiated`;
+  if (e.type === 'payment_intent.payment_failed') return `Payment failed${obj.last_payment_error?.message ? `: ${obj.last_payment_error.message}` : ''}`;
+  return EVENT_TEXT[e.type] ?? e.type;
+}
+const eventTone = (type: string) => (/failed|dispute/.test(type) ? 'red' : /succeeded|paid|captured/.test(type) ? 'green' : /refund/.test(type) ? 'grey' : 'blue');
+function Timeline({ events }: { events: StripeObject[] }) {
+  if (events.length === 0) return <EmptyState title="No events" />;
+  return (
+    <ol className="timeline">
+      {events.map((e) => (
+        <li key={e.id} className="timeline-item">
+          <span className={`timeline-dot dot-${eventTone(e.type)}`} />
+          <div className="timeline-body">
+            <div className="timeline-text">{eventText(e)}</div>
+            <div className="timeline-time">{formatDate(e.created)}</div>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
 }
 
-export function CommandBar({ data, onJump, onClose }: { data: Record<string, StripeRow[]>; onJump: (c: string, id: string) => void; onClose: () => void }) {
-  const [q, setQ] = useState('');
-  const hits = useMemo(() => globalSearch(data, q), [data, q]);
+function PaymentPage({ id, go }: { id: string; go: Go }) {
+  const { data, error, reload } = useApi(() => loadPayment(id), [id]);
+  const [refunding, setRefunding] = useState(false);
+  if (!data) return <Loading error={error} />;
   return (
-    <div className="cmdk-overlay" role="dialog" aria-label="Search" onClick={onClose}>
-      <div className="cmdk" onClick={(e) => e.stopPropagation()}>
-        <input className="cmdk-input" autoFocus placeholder="Search customers, payments, invoices…" value={q} onChange={(e) => setQ(e.target.value)} />
-        <div className="cmdk-results">
-          {q && hits.length === 0 && <div className="cmdk-empty">No results for “{q}”.</div>}
-          {hits.map((h) => (
-            <button className="cmdk-hit" key={`${h.collection}:${h.id}`} onClick={() => { onJump(h.collection, h.id); onClose(); }}>
-              <span className="cmdk-hit-label">{h.label}</span>
-              <span className="cmdk-hit-sub mono">{h.sub}</span>
-            </button>
-          ))}
+    <>
+      <PaymentDetailView p={data} go={go} onRefund={() => setRefunding(true)} />
+      {refunding ? <RefundDialog payment={data} onClose={() => setRefunding(false)} onDone={() => { setRefunding(false); reload(); }} /> : null}
+    </>
+  );
+}
+
+/** A payment's page: amount and status, who and how, the timeline of its events, the money, its refunds. */
+export function PaymentDetailView({ p, go, onRefund }: { p: PaymentDetail; go: Go; onRefund: () => void }) {
+  const refundable = Boolean(p.charge) && (p.status === 'succeeded' || p.status === 'partially_refunded') && p.amount - p.amountRefunded > 0;
+  const card = p.paymentMethod?.card;
+  const net = p.amount - p.amountRefunded;
+  return (
+    <div className="page detail-page">
+      <PageHead
+        kicker={<><Icon name="payments" size={12} /> Payment</>}
+        title={<><Amount amount={p.amount} currency={p.currency} /> <StatusPill value={p.status} /></>}
+        actions={refundable ? <button className="btn" onClick={onRefund}><Icon name="refund" size={14} /> Refund</button> : null}
+      >
+        <div className="summary">
+          <div className="summary-item"><div className="summary-label">Last update</div><div>{formatDate(p.events[0]?.created ?? p.created)}</div></div>
+          <div className="summary-item"><div className="summary-label">Customer</div><div>{p.customer ? <Link to={`customers/${p.customer.id}`} go={go}>{p.customer.email || customerLabel(p.customer)}</Link> : '—'}</div></div>
+          <div className="summary-item"><div className="summary-label">Payment method</div><div><CardLabel pm={p.paymentMethod} /></div></div>
+          {p.declineReason ? <div className="summary-item"><div className="summary-label">Decline reason</div><div>{p.declineReason}</div></div> : null}
         </div>
+      </PageHead>
+      {p.intent?.last_payment_error ? <PaymentErrorBanner error={p.intent.last_payment_error} /> : null}
+      <div className="detail-columns">
+      <div className="detail-main">
+      <Section title="Timeline"><Timeline events={p.events} /></Section>
+      <Section title="Payment breakdown">
+        <dl className="breakdown">
+          <div><dt>Payment amount</dt><dd>{money(p.amount, p.currency)} {ccy(p.currency)}</dd></div>
+          {p.amountRefunded > 0 ? <div><dt>Refunded</dt><dd>−{money(p.amountRefunded, p.currency)} {ccy(p.currency)}</dd></div> : null}
+          <div className="total"><dt>Net amount</dt><dd>{money(p.status === 'failed' || p.status === 'incomplete' ? 0 : net, p.currency)} {ccy(p.currency)}</dd></div>
+        </dl>
+      </Section>
+      {p.refunds.length > 0 ? (
+        <Section title="Refunds">
+          <table className="table">
+            <thead><tr><th>Amount</th><th /><th>Reason</th><th>ID</th><th className="right">Date</th></tr></thead>
+            <tbody>
+              {p.refunds.map((r) => (
+                <tr key={r.id}>
+                  <td><Amount amount={Number(r.amount) || 0} currency={r.currency} /></td>
+                  <td><StatusPill value={r.status} /></td>
+                  <td>{r.reason ? titleCase(r.reason) : '—'}</td>
+                  <td className="mono muted">{r.id}</td>
+                  <td className="right muted nowrap">{formatDate(r.created)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Section>
+      ) : null}
+      </div>
+      <aside className="detail-side">
+      <Section title="Payment details">
+        <Props rows={[
+          ['Statement descriptor', p.charge?.calculated_statement_descriptor ?? p.intent?.statement_descriptor ?? '—'],
+          ['Description', p.description ?? '—'],
+          ...(p.invoice ? [['Invoice', <Link to={`invoices/${p.invoice.id}`} go={go}>{p.invoice.number || p.invoice.id}</Link>] as [string, React.ReactNode]] : []),
+          ['Payment ID', <span className="mono">{p.intent?.id ?? p.id}</span>],
+          ...(p.charge ? [['Charge ID', <span className="mono">{p.charge.id}</span>] as [string, React.ReactNode]] : []),
+        ]} />
+      </Section>
+      <Section title="Payment method">
+        {p.paymentMethod ? (
+          <Props rows={[
+            ['ID', <span className="mono">{p.paymentMethod.id}</span>],
+            ['Number', card ? <span className="card-label"><span className="dots">•••• •••• ••••</span> {card.last4}</span> : '—'],
+            ['Expires', card ? `${String(card.exp_month).padStart(2, '0')} / ${card.exp_year}` : '—'],
+            ['Type', card ? `${BRANDS[card.brand] ?? titleCase(String(card.brand))} ${card.funding ?? ''} card` : titleCase(String(p.paymentMethod.type))],
+            ['Owner', p.paymentMethod.billing_details?.name ?? p.customer?.name ?? '—'],
+            ['Owner email', p.paymentMethod.billing_details?.email ?? p.customer?.email ?? '—'],
+            ['Origin', card?.country ? COUNTRIES[card.country] ?? card.country : '—'],
+            ['CVC check', card?.checks?.cvc_check ? (card.checks.cvc_check === 'pass' ? <span className="check-pass"><Icon name="check" size={12} /> Passed</span> : titleCase(card.checks.cvc_check)) : '—'],
+          ]} />
+        ) : <EmptyState title="No payment method" />}
+      </Section>
+      <Section title="Metadata">
+        {Object.keys(p.intent?.metadata ?? p.charge?.metadata ?? {}).length ? (
+          <Props rows={Object.entries(p.intent?.metadata ?? p.charge?.metadata ?? {}).map(([k, v]) => [k, String(v)] as [string, React.ReactNode])} />
+        ) : <div className="muted small">No metadata</div>}
+      </Section>
+      </aside>
       </div>
     </div>
   );
 }
 
-// ── Settings screen (account / API keys / webhooks) ─────────────────────────
-// Backed by real twin state: the account (GET /v1/account, incl. the payout schedule) and
-// the registered webhook endpoints (GET /v1/webhook_endpoints). The API keys block shows
-// the twin's test-mode keys (it is a test-mode twin) — labeled as such, not fabricated live keys.
-export function payoutScheduleText(account: StripeRow | undefined): string {
-  const sched = (account?.settings as any)?.payouts?.schedule;
-  if (!sched || typeof sched !== 'object') return 'default';
-  const interval = String(sched.interval ?? 'daily');
-  if (interval === 'weekly' && sched.weekly_anchor) return `weekly (on ${sched.weekly_anchor})`;
-  if (interval === 'monthly' && sched.monthly_anchor != null) return `monthly (on day ${sched.monthly_anchor})`;
-  return interval;
-}
-
-export function SettingsScreen({ account, webhooks }: { account?: StripeRow; webhooks: StripeRow[] }) {
-  return (
-    <div className="settings-screen">
-      <section className="settings-block" data-settings="account">
-        <h3>Account</h3>
-        <dl>
-          <div className="kv"><dt>Account ID</dt><dd className="mono">{account?.id ?? '—'}</dd></div>
-          <div className="kv"><dt>Country</dt><dd>{(account?.country as string) ?? '—'}</dd></div>
-          <div className="kv"><dt>Default currency</dt><dd>{String((account?.default_currency as string) ?? '—').toUpperCase()}</dd></div>
-          <div className="kv"><dt>Payout schedule</dt><dd className="settings-payout-schedule">{payoutScheduleText(account)}</dd></div>
-          <div className="kv"><dt>Charges enabled</dt><dd>{String(account?.charges_enabled ?? false)}</dd></div>
-        </dl>
-      </section>
-      <section className="settings-block" data-settings="api-keys">
-        <h3>API keys</h3>
-        <div className="api-key-row">
-          <span className="api-key-label">Publishable key (test)</span>
-          <span className="api-key-value mono">pk_test_twin</span>
-        </div>
-        <div className="api-key-row">
-          <span className="api-key-label">Secret key (test)</span>
-          <span className="api-key-value mono">sk_test_twin••••</span>
-        </div>
-      </section>
-      <section className="settings-block" data-settings="webhooks">
-        <h3>Webhooks</h3>
-        {webhooks.length === 0 && <div className="empty">No webhook endpoints registered.</div>}
-        {webhooks.map((w) => (
-          <div className="webhook-row" key={w.id}>
-            <span className="webhook-url mono">{w.url ?? w.id}</span>
-            <StatusPill value={w.status ?? 'enabled'} />
-          </div>
-        ))}
-      </section>
+const BRANDS: Record<string, string> = { visa: 'Visa', mastercard: 'Mastercard', amex: 'American Express', discover: 'Discover', diners: 'Diners Club', jcb: 'JCB', unionpay: 'UnionPay' };
+const COUNTRIES: Record<string, string> = { US: 'United States', GB: 'United Kingdom', CA: 'Canada', DE: 'Germany', FR: 'France', AU: 'Australia', JP: 'Japan', IE: 'Ireland', NL: 'Netherlands', SG: 'Singapore' };
+
+// ── dialogs ──────────────────────────────────────────────────────────────────
+function Dialog({ title, onClose, children, footer, label }: { title: string; onClose: () => void; children: React.ReactNode; footer: React.ReactNode; label?: string }) {
+  return (
+    <div className="overlay" onMouseDown={onClose}>
+      <div className="dialog create-modal" role="dialog" aria-modal="true" aria-label={label ?? title} onMouseDown={(e) => e.stopPropagation()}>
+        <div className="dialog-head"><h2>{title}</h2><button className="icon-btn" aria-label="Close" onClick={onClose}><Icon name="x" /></button></div>
+        <div className="dialog-body">{children}</div>
+        <div className="dialog-foot">{footer}</div>
+      </div>
     </div>
   );
 }
 
-// ── Create / edit modal (write forms) ───────────────────────────────────────
-// The real Dashboard creates objects via a modal write form that POSTs the create endpoint.
-// We model a faithful create form per collection (the few required fields), POSTing the SAME
-// /v1/<collection> the SDK uses; on success the polling loop reflects the new row.
-export const CREATE_FORMS: Record<string, { label: string; fields: Array<{ name: string; label: string; placeholder?: string; required?: boolean }> }> = {
-  customers: { label: 'customer', fields: [{ name: 'email', label: 'Email', placeholder: 'jenny@example.com' }, { name: 'name', label: 'Name' }] },
-  products: { label: 'product', fields: [{ name: 'name', label: 'Name', required: true }, { name: 'description', label: 'Description' }] },
-  coupons: { label: 'coupon', fields: [{ name: 'percent_off', label: 'Percent off', placeholder: '20' }, { name: 'duration', label: 'Duration', placeholder: 'once' }] },
-  payment_intents: { label: 'payment', fields: [{ name: 'amount', label: 'Amount (cents)', required: true, placeholder: '1000' }, { name: 'currency', label: 'Currency', required: true, placeholder: 'usd' }] },
+function RefundDialog({ payment, onClose, onDone }: { payment: Payment; onClose: () => void; onDone: () => void }) {
+  const remaining = payment.amount - payment.amountRefunded;
+  const [amount, setAmount] = useState((remaining / 100).toFixed(2));
+  const [reason, setReason] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const cents = Math.round(Number(amount) * 100);
+  const submit = async () => {
+    if (!Number.isFinite(cents) || cents <= 0) { setErr('Enter an amount greater than 0.'); return; }
+    if (cents > remaining) { setErr(`Refund cannot be more than ${money(remaining, payment.currency)}.`); return; }
+    setBusy(true); setErr(null);
+    try {
+      await createRefund(payment, cents === remaining && payment.amountRefunded === 0 ? undefined : cents, reason && reason !== 'other' ? reason : undefined);
+      onDone();
+    } catch (e: any) { setErr(String(e.message ?? e)); } finally { setBusy(false); }
+  };
+  return (
+    <Dialog
+      title="Refund payment" onClose={onClose}
+      footer={<><button className="btn" onClick={onClose}>Cancel</button><button className="btn btn-primary create-submit" disabled={busy} onClick={submit}>{busy ? 'Refunding…' : 'Refund'}</button></>}
+    >
+      <p className="dialog-note">Refunds take 5–10 days to appear on a customer’s statement. Stripe’s fees for the original payment won’t be returned, but there are no additional fees for the refund.</p>
+      <label className="field create-field">
+        <span className="field-label">Refund</span>
+        <span className="money-input"><span className="money-prefix">$</span><input aria-label="Refund amount" inputMode="decimal" value={amount} onChange={(e) => setAmount(e.target.value)} /><span className="money-suffix">{ccy(payment.currency)}</span></span>
+        {payment.amountRefunded > 0 ? <span className="field-hint">{money(payment.amountRefunded, payment.currency)} already refunded</span> : null}
+      </label>
+      <label className="field create-field">
+        <span className="field-label">Reason</span>
+        <select aria-label="Reason" value={reason} onChange={(e) => setReason(e.target.value)}>
+          <option value="">Select a reason</option>
+          <option value="duplicate">Duplicate</option>
+          <option value="fraudulent">Fraudulent</option>
+          <option value="requested_by_customer">Requested by customer</option>
+          <option value="other">Other</option>
+        </select>
+      </label>
+      {err ? <div className="form-error" role="alert">{err}</div> : null}
+    </Dialog>
+  );
+}
+
+function CancelSubscriptionDialog({ subscription, onClose, onDone }: { subscription: StripeObject; onClose: () => void; onDone: () => void }) {
+  const [when, setWhen] = useState<'now' | 'period_end'>('now');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const submit = async () => {
+    setBusy(true); setErr(null);
+    try { await cancelSubscription(String(subscription.id), when); onDone(); } catch (e: any) { setErr(String(e.message ?? e)); } finally { setBusy(false); }
+  };
+  return (
+    <Dialog
+      title="Cancel subscription" onClose={onClose}
+      footer={<><button className="btn" onClick={onClose}>Don’t cancel</button><button className="btn btn-danger create-submit" disabled={busy} onClick={submit}>{busy ? 'Canceling…' : 'Cancel subscription'}</button></>}
+    >
+      <fieldset className="radio-group">
+        <legend className="field-label">Cancel</legend>
+        <label className="radio"><input type="radio" name="when" checked={when === 'now'} onChange={() => setWhen('now')} /><span>Immediately<span className="radio-hint">The subscription ends now and no further invoices are created.</span></span></label>
+        <label className="radio"><input type="radio" name="when" checked={when === 'period_end'} onChange={() => setWhen('period_end')} /><span>End of the current period<span className="radio-hint">{formatDate(subscription.current_period_end, false)}</span></span></label>
+      </fieldset>
+      {err ? <div className="form-error" role="alert">{err}</div> : null}
+    </Dialog>
+  );
+}
+
+/** The create forms the Dashboard opens from a list page: each posts the resource's create call. */
+export const CREATE_FORMS: Record<string, { title: string; submit: string; fields: Array<{ name: string; label: string; placeholder?: string; required?: boolean; type?: string }> }> = {
+  customers: {
+    title: 'Create customer', submit: 'Add customer',
+    fields: [{ name: 'name', label: 'Name' }, { name: 'email', label: 'Email', type: 'email' }, { name: 'description', label: 'Description' }, { name: 'phone', label: 'Phone' }],
+  },
+  products: {
+    title: 'Add a product', submit: 'Add product',
+    fields: [{ name: 'name', label: 'Name', required: true }, { name: 'description', label: 'Description' }],
+  },
 };
 
-export function CreateModal({ collection, onClose, onCreated }: { collection: string; onClose: () => void; onCreated: () => void }) {
-  const form = CREATE_FORMS[collection];
+function CreateDialog({ collection, onClose, onCreated }: { collection: string; onClose: () => void; onCreated: (o: StripeObject) => void }) {
+  const form = CREATE_FORMS[collection]!;
   const [values, setValues] = useState<Record<string, string>>({});
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
-  if (!form) return null;
   const submit = async () => {
     setBusy(true); setErr(null);
-    try {
-      const body = Object.entries(values).filter(([, v]) => v !== '').map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
-      const res = await fetch(`/v1/${collection}`, { method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, body }).then((r) => r.json());
-      if (res.error) throw new Error(res.error.message);
-      onCreated(); onClose();
-    } catch (e: any) {
-      setErr(String(e.message ?? e));
-    } finally {
-      setBusy(false);
-    }
+    try { onCreated(await createObject(collection, values)); } catch (e: any) { setErr(String(e.message ?? e)); } finally { setBusy(false); }
   };
   return (
-    <div className="create-overlay" role="dialog" aria-label={`Create ${form.label}`} onClick={onClose}>
-      <div className="create-modal" onClick={(e) => e.stopPropagation()}>
-        <h3 className="create-title">New {form.label}</h3>
-        {form.fields.map((f) => (
-          <label className="create-field" key={f.name}>
-            <span className="create-field-label">{f.label}{f.required ? ' *' : ''}</span>
-            <input className="create-field-input" placeholder={f.placeholder ?? ''} value={values[f.name] ?? ''} onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.value }))} />
-          </label>
-        ))}
-        {err && <div className="create-error" role="alert">{err}</div>}
-        <div className="create-actions">
-          <button className="create-cancel" onClick={onClose}>Cancel</button>
-          <button className="create-submit" disabled={busy} onClick={submit}>{busy ? 'Creating…' : 'Create'}</button>
+    <Dialog
+      title={form.title} onClose={onClose}
+      footer={<><button className="btn" onClick={onClose}>Cancel</button><button className="btn btn-primary create-submit" disabled={busy} onClick={submit}>{busy ? 'Saving…' : form.submit}</button></>}
+    >
+      {collection === 'customers' ? <div className="dialog-subhead">Account information</div> : null}
+      {form.fields.map((f) => (
+        <label className="field create-field" key={f.name}>
+          <span className="field-label">{f.label}{f.required ? '' : <span className="optional"> (optional)</span>}</span>
+          <input aria-label={f.label} type={f.type ?? 'text'} placeholder={f.placeholder ?? ''} value={values[f.name] ?? ''} onChange={(e) => setValues((v) => ({ ...v, [f.name]: e.target.value }))} />
+        </label>
+      ))}
+      {err ? <div className="form-error" role="alert">{err}</div> : null}
+    </Dialog>
+  );
+}
+
+// ── Customers ────────────────────────────────────────────────────────────────
+type CustomerSegment = 'all' | 'first_time' | 'repeat' | 'recent' | 'refunds';
+const SEGMENTS: Array<{ key: CustomerSegment; label: string; test: (c: CustomerRow) => boolean }> = [
+  { key: 'all', label: 'All customers', test: () => true },
+  { key: 'first_time', label: 'First-time customers', test: (c) => c.payments === 1 },
+  { key: 'repeat', label: 'Repeat customers', test: (c) => c.payments > 1 },
+  { key: 'recent', label: 'Recent customers', test: (c) => Number(c.created) >= Date.now() / 1000 - 30 * DAY },
+  { key: 'refunds', label: 'High refunds', test: (c) => c.refunds > 0 },
+];
+function CustomersPage({ go, create }: { go: Go; create: boolean }) {
+  const { data, error, reload } = useApi(loadCustomers, []);
+  const [creating, setCreating] = useState(create);
+  const [segment, setSegment] = useState<CustomerSegment>('all');
+  const [created, setCreated] = useState<string | undefined>();
+  useEffect(() => { if (create) setCreating(true); }, [create]);
+  const all = (data ?? []).filter((c) => inRange(Number(c.created), created));
+  const rows = all.filter(SEGMENTS.find((s) => s.key === segment)!.test);
+  return (
+    <div className="page">
+      <PageHead title="Customers" actions={<button className="btn btn-primary" onClick={() => setCreating(true)}><Icon name="plus" size={14} /> Create customer</button>} />
+      <FilterCards<CustomerSegment> value={segment} onChange={setSegment} options={SEGMENTS.map((s) => ({ key: s.key, label: s.label, count: all.filter(s.test).length }))} />
+      <div className="toolbar">
+        <FilterChip label="Created" value={created} options={DATE_RANGES} onChange={setCreated} />
+        <div className="toolbar-right">
+          <button className="btn" onClick={() => exportCsv('customers', ['id', 'Name', 'Email', 'Created', 'Total Spend', 'Payment Count', 'Refunded Volume'], rows.map((c) => [c.id, c.name ?? '', c.email ?? '', new Date(Number(c.created) * 1000).toISOString(), (c.totalSpend / 100).toFixed(2), c.payments, (c.refunds / 100).toFixed(2)]))}>
+            <Icon name="download" size={14} /> Export
+          </button>
         </div>
       </div>
+      {data ? (
+        <>
+          <table className="table">
+            <thead><tr><th>Name</th><th>Email</th><th>Default payment method</th><th>Created</th><th className="right">Total spend</th><th className="right">Payments</th><th className="right">Refunds</th></tr></thead>
+            <tbody>
+              {rows.length === 0 && <tr className="empty-row"><td colSpan={7}><EmptyState title="No customers" body="Customers you create show up here." /></td></tr>}
+              {rows.map((c) => (
+                <tr key={c.id} className="list-row" onClick={() => go(`customers/${c.id}`)}>
+                  <td className="strong">{c.name || <span className="muted">—</span>}</td>
+                  <td>{c.email || <span className="muted">—</span>}</td>
+                  <td><CardLabel pm={c.defaultCard} /></td>
+                  <td className="muted nowrap">{formatDate(c.created)}</td>
+                  <td className="right nowrap">{money(c.totalSpend, c.currency)}</td>
+                  <td className="right">{c.payments}</td>
+                  <td className="right nowrap">{money(c.refunds, c.currency)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <ResultCount n={rows.length} />
+        </>
+      ) : <Loading error={error} />}
+      {creating ? <CreateDialog collection="customers" onClose={() => { setCreating(false); if (create) go('customers'); }} onCreated={(c) => { setCreating(false); reload(); go(`customers/${c.id}`); }} /> : null}
     </div>
   );
 }
 
-/** The list pane: one row per object in the active section (or an empty state). */
-export function ListPane({ section, rows, query, currentId, onSelect }: {
-  section: Section;
-  rows: StripeRow[];
-  query?: string;
-  currentId?: string;
-  onSelect: (id: string) => void;
-}) {
-  return (
-    <section className="list">
-      {rows.length === 0 && <div className="empty">{query ? 'No matches.' : `No ${section.label.toLowerCase()} in the twin yet.`}</div>}
-      {rows.map((row, i) => (
-        <button key={row.id ?? i} className={`list-row ${currentId === row.id ? 'active' : ''}`} onClick={() => onSelect(row.id)}>
-          <span className="row-main">
-            <span className="row-title">{section.title(row)}</span>
-            <span className="row-sub mono">{section.subtitle(row)}</span>
-          </span>
-          {row.status ? <StatusPill value={row.status} /> : row.active !== undefined ? <StatusPill value={String(row.active)} /> : null}
-        </button>
-      ))}
-    </section>
+function subscriptionProduct(sub: StripeObject, products: Map<string, StripeObject>): string {
+  const items: StripeObject[] = sub.items?.data ?? [];
+  const names = items.map((it) => {
+    const productId = typeof it.price?.product === 'string' ? it.price.product : it.price?.product?.id;
+    const name = products.get(productId)?.name ?? it.price?.nickname ?? productId ?? 'Product';
+    return Number(it.quantity) > 1 ? `${name} × ${it.quantity}` : name;
+  });
+  return names.length > 1 ? `${names[0]} and ${names.length - 1} more` : names[0] ?? '—';
+}
+function subscriptionAmount(sub: StripeObject): { amount: number; currency: string; interval: string } {
+  const items: StripeObject[] = sub.items?.data ?? [];
+  const amount = items.reduce((n, it) => n + (Number(it.price?.unit_amount) || 0) * (Number(it.quantity) || 1), 0);
+  const interval = items[0]?.price?.recurring?.interval ?? 'month';
+  return { amount, currency: String(items[0]?.price?.currency ?? sub.currency ?? 'usd'), interval };
+}
+
+export function InvoicesTable({ invoices, customers, go, noCustomer }: { invoices: StripeObject[]; customers?: Map<string, StripeObject>; go: Go; noCustomer?: boolean }) {
+  return (
+    <table className="table">
+      <thead><tr><th>Amount</th><th /><th>Invoice number</th>{noCustomer ? null : <th>Customer</th>}<th>Due</th><th className="right">Created</th></tr></thead>
+      <tbody>
+        {invoices.length === 0 && <tr className="empty-row"><td colSpan={6}><EmptyState title="No invoices" /></td></tr>}
+        {invoices.map((inv) => {
+          const c = customers?.get(inv.customer);
+          return (
+            <tr key={inv.id} className="list-row" onClick={() => go(`invoices/${inv.id}`)}>
+              <td className="nowrap"><Amount amount={Number(inv.total ?? inv.amount_due) || 0} currency={inv.currency} /></td>
+              <td><StatusPill value={inv.status} /></td>
+              <td className="mono">{inv.number || inv.id}</td>
+              {noCustomer ? null : <td className="truncate">{inv.customer_email || c?.email || c?.name || inv.customer}</td>}
+              <td className="muted nowrap">{inv.due_date ? formatDate(inv.due_date, false) : '—'}</td>
+              <td className="right muted nowrap">{formatDate(inv.created)}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
   );
 }
 
-export function App() {
-  const [activeKey, setActiveKey] = useState<string>('__home');
-  // All collections cached so cross-references resolve without extra round-trips.
-  const [data, setData] = useState<Record<string, StripeRow[]>>({});
-  const [account, setAccount] = useState<StripeRow | undefined>(undefined);
-  const [error, setError] = useState<string | null>(null);
-  const [selected, setSelected] = useState<string | null>(null);
-  const [query, setQuery] = useState('');
-  const [cmdOpen, setCmdOpen] = useState(false);
-  const [createFor, setCreateFor] = useState<string | null>(null);
-  // Bumped after a detail action (capture/cancel) to re-fetch immediately rather than
-  // waiting for the next poll tick.
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  const active = SECTION_BY_KEY[activeKey];
+function CustomerPage({ id, go }: { id: string; go: Go }) {
+  const { data, error } = useApi(() => loadCustomer(id), [id]);
+  return data ? <CustomerDetailView data={data} go={go} /> : <Loading error={error} />;
+}
 
-  useEffect(() => {
-    let live = true;
-    const tick = async () => {
-      try {
-        const results = await Promise.all(SECTIONS.map((s) =>
-          fetch(`/v1/${s.key}`).then((r) => r.json()).then((j) => {
-            if (j.error) throw new Error(j.error.message);
-            // `balance` returns a single summary object (no `data` array); present it as a
-            // one-row list so it flows through the same list/detail machinery. Give it a
-            // stable id so selection/cross-ref code (keyed on `id`) works.
-            if (s.key === BALANCE_KEY) return [s.key, [{ id: 'balance', ...j } as StripeRow]] as const;
-            return [s.key, (j.data ?? []) as StripeRow[]] as const;
-          }),
-        ));
-        // the platform account (GET /v1/account) backs the Settings screen.
-        const acct = await fetch('/v1/account').then((r) => r.json()).catch(() => undefined);
-        if (!live) return;
-        setData(Object.fromEntries(results));
-        if (acct && !acct.error) setAccount(acct as StripeRow);
-        setError(null);
-      } catch (e: any) {
-        if (live) setError(String(e.message ?? e));
-      }
-    };
-    void tick();
-    const timer = window.setInterval(tick, 2000);
-    return () => { live = false; window.clearInterval(timer); };
-  }, [refreshKey]);
+/** A customer's page: who they are, their subscriptions, payments, saved cards, invoices and events. */
+export function CustomerDetailView({ data, go }: { data: CustomerDetail; go: Go }) {
+  const c = data.customer;
+  const defaultPm = c.invoice_settings?.default_payment_method;
+  const spend = data.payments.filter((p) => p.status !== 'failed' && p.status !== 'incomplete').reduce((n, p) => n + p.amount - p.amountRefunded, 0);
+  return (
+    <div className="page detail-page">
+      <PageHead kicker={<><Icon name="person" size={12} /> Customer</>} title={c.name || c.email || c.id}>
+        <div className="subtitle">{c.email ?? ''}</div>
+        <div className="summary">
+          <div className="summary-item"><div className="summary-label">Customer since</div><div>{formatDate(c.created, false)}</div></div>
+          <div className="summary-item"><div className="summary-label">Total spend</div><div>{money(spend, data.payments[0]?.currency ?? 'usd')}</div></div>
+          <div className="summary-item"><div className="summary-label">Payments</div><div>{data.payments.filter((p) => p.status !== 'failed' && p.status !== 'incomplete').length}</div></div>
+        </div>
+      </PageHead>
+      <div className="detail-columns">
+        <div className="detail-main">
+          <Section title="Subscriptions">
+            {data.subscriptions.length === 0 ? <div className="muted small">No subscriptions</div> : (
+              <div className="sub-list">
+                {data.subscriptions.map((s) => {
+                  const a = subscriptionAmount(s);
+                  return (
+                    <a key={s.id} href={hrefOf(`subscriptions/${s.id}`)} className="sub-card list-row" onClick={(e) => { e.preventDefault(); go(`subscriptions/${s.id}`); }}>
+                      <div className="sub-card-main"><span className="strong">{subscriptionProduct(s, data.products)}</span> <StatusPill value={s.status} /></div>
+                      <div className="muted small">{money(a.amount, a.currency)} / {a.interval} · {s.status === 'canceled' ? `Canceled ${formatDate(s.canceled_at ?? s.ended_at, false)}` : s.status === 'trialing' ? `Trial ends ${formatDate(s.trial_end, false)}` : s.cancel_at_period_end ? `Cancels ${formatDate(s.current_period_end, false)}` : `Next invoice on ${formatDate(s.current_period_end, false)}`}</div>
+                    </a>
+                  );
+                })}
+              </div>
+            )}
+          </Section>
+          <Section title="Payments" className="customer-payments"><PaymentsTable payments={data.payments} go={go} compact noCustomer /></Section>
+          <Section title="Payment methods">
+            {data.paymentMethods.length === 0 ? <div className="muted small">No payment methods</div> : (
+              <table className="table">
+                <tbody>
+                  {data.paymentMethods.map((pm) => (
+                    <tr key={pm.id}>
+                      <td><CardLabel pm={pm} /> {pm.id === defaultPm ? <span className="pill pill-grey">Default</span> : null}</td>
+                      <td className="muted">{pm.card ? `Expires ${String(pm.card.exp_month).padStart(2, '0')} / ${pm.card.exp_year}` : ''}</td>
+                      <td className="mono muted right">{pm.id}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </Section>
+          <Section title="Invoices"><InvoicesTable invoices={data.invoices} go={go} noCustomer /></Section>
+          <Section title="Events"><Timeline events={data.events.slice(0, 10)} /></Section>
+        </div>
+        <aside className="detail-side">
+          <Section title="Details">
+            <Props rows={[
+              ['Customer ID', <span className="mono">{c.id}</span>],
+              ['Customer since', formatDate(c.created, false)],
+              ['Email', c.email ?? '—'],
+              ['Description', c.description || '—'],
+              ['Phone', c.phone || '—'],
+              ['Billing details', c.address?.line1 ? `${c.address.line1}, ${c.address.city ?? ''}` : 'No billing address'],
+              ['Currency', c.currency ? ccy(c.currency) : '—'],
+            ]} />
+          </Section>
+          <Section title="Metadata">
+            {Object.keys(c.metadata ?? {}).length ? <Props rows={Object.entries(c.metadata).map(([k, v]) => [k, String(v)] as [string, React.ReactNode])} /> : <div className="muted small">No metadata</div>}
+          </Section>
+        </aside>
+      </div>
+    </div>
+  );
+}
 
-  // Cmd/Ctrl-K opens the global command bar (Stripe's search shortcut).
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setCmdOpen((o) => !o); }
-      if (e.key === 'Escape') { setCmdOpen(false); setCreateFor(null); }
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, []);
+// ── Billing ──────────────────────────────────────────────────────────────────
+type SubFilter = 'all' | 'active' | 'trialing' | 'past_due' | 'canceled';
+function SubscriptionsPage({ go }: { go: Go }) {
+  const { data, error } = useApi(loadSubscriptions, []);
+  const [filter, setFilter] = useState<SubFilter>('all');
+  const subs = data?.subscriptions ?? [];
+  const shown = subs.filter((s) => filter === 'all' || s.status === filter);
+  return (
+    <div className="page">
+      <PageHead title="Subscriptions" />
+      <FilterCards<SubFilter>
+        value={filter} onChange={setFilter}
+        options={(['all', 'active', 'trialing', 'past_due', 'canceled'] as SubFilter[]).map((k) => ({ key: k, label: k === 'all' ? 'All' : STATUS[k]!.label, count: k === 'all' ? subs.length : subs.filter((s) => s.status === k).length }))}
+      />
+      {data ? (
+        <>
+          <table className="table">
+            <thead><tr><th>Customer</th><th>Status</th><th>Billing</th><th>Product</th><th className="right">Amount</th><th className="right">Created</th></tr></thead>
+            <tbody>
+              {shown.length === 0 && <tr className="empty-row"><td colSpan={6}><EmptyState title="No subscriptions" /></td></tr>}
+              {shown.map((s) => {
+                const c = data.customers.get(s.customer);
+                const a = subscriptionAmount(s);
+                return (
+                  <tr key={s.id} className="list-row" onClick={() => go(`subscriptions/${s.id}`)}>
+                    <td><div className="strong">{c?.name || c?.email || s.customer}</div>{c?.name && c?.email ? <div className="muted small">{c.email}</div> : null}</td>
+                    <td><StatusPill value={s.status} />{s.cancel_at_period_end && s.status !== 'canceled' ? <span className="muted small"> Cancels {formatDate(s.current_period_end, false)}</span> : null}</td>
+                    <td>{s.collection_method === 'send_invoice' ? 'Send invoice' : 'Auto'}</td>
+                    <td>{subscriptionProduct(s, data.products)}</td>
+                    <td className="right nowrap">{money(a.amount, a.currency)} / {a.interval}</td>
+                    <td className="right muted nowrap">{formatDate(s.created)}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          <ResultCount n={shown.length} />
+        </>
+      ) : <Loading error={error} />}
+    </div>
+  );
+}
 
-  const rows = data[activeKey];
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!active) return [];
-    if (!q) return rows ?? [];
-    return (rows ?? []).filter((r) =>
-      [active.title(r), active.subtitle(r), r.id, r.email, r.name].some((f) => String(f ?? '').toLowerCase().includes(q)),
-    );
-  }, [rows, query, active]);
+function SubscriptionPage({ id, go }: { id: string; go: Go }) {
+  const { data, error, reload } = useApi(() => loadSubscription(id), [id]);
+  const [canceling, setCanceling] = useState(false);
+  if (!data) return <Loading error={error} />;
+  return (
+    <>
+      <SubscriptionDetailView data={data} go={go} onCancel={() => setCanceling(true)} />
+      {canceling ? <CancelSubscriptionDialog subscription={data.subscription} onClose={() => setCanceling(false)} onDone={() => { setCanceling(false); reload(); }} /> : null}
+    </>
+  );
+}
+
+/** A subscription's page: whose, on what, its period and next invoice, its prices, invoices and events. */
+export function SubscriptionDetailView({ data, go, onCancel }: { data: SubscriptionDetail; go: Go; onCancel: () => void }) {
+  const s = data.subscription;
+  const c = data.customer;
+  const a = subscriptionAmount(s);
+  const product = subscriptionProduct(s, data.products);
+  const live = s.status !== 'canceled' && s.status !== 'incomplete_expired';
+  const next = s.status === 'canceled' ? `Canceled on ${formatDate(s.canceled_at ?? s.ended_at, false)}`
+    : s.cancel_at_period_end ? `Cancels on ${formatDate(s.current_period_end, false)}`
+    : s.status === 'trialing' ? `Trial ends ${formatDate(s.trial_end, false)} · First invoice for ${money(a.amount, a.currency)}`
+    : `Next invoice on ${formatDate(s.current_period_end, false)} for ${money(a.amount, a.currency)}`;
+  return (
+    <div className="page detail-page">
+      <PageHead
+        kicker={<><Icon name="billing" size={12} /> Subscription</>}
+        title={<>{customerLabel(c)} on {product} <StatusPill value={s.status} /></>}
+        actions={live && !s.cancel_at_period_end ? <button className="btn" onClick={onCancel}>Cancel subscription</button> : null}
+      >
+        <div className="subtitle">Billing {a.interval}ly · {next}</div>
+        <div className="summary">
+          <div className="summary-item"><div className="summary-label">Started</div><div>{formatDate(s.start_date ?? s.created, false)}</div></div>
+          <div className="summary-item"><div className="summary-label">{s.status === 'canceled' ? 'Ended' : s.cancel_at_period_end ? 'Cancels' : 'Next invoice'}</div><div>{s.status === 'canceled' ? formatDate(s.ended_at ?? s.canceled_at, false) : s.cancel_at_period_end ? formatDate(s.current_period_end, false) : `${money(a.amount, a.currency)} on ${formatDate(s.current_period_end, false)}`}</div></div>
+          <div className="summary-item"><div className="summary-label">Customer</div><div>{c ? <Link to={`customers/${c.id}`} go={go}>{c.email || c.name}</Link> : s.customer}</div></div>
+        </div>
+      </PageHead>
+      <Section title="Subscription details">
+        <Props rows={[
+          ['Customer', c ? <Link to={`customers/${c.id}`} go={go}>{customerLabel(c)}</Link> : s.customer],
+          ['Created', formatDate(s.created)],
+          ['Current period', `${formatDate(s.current_period_start, false).replace(/, \d{4}$/, '')} to ${formatDate(s.current_period_end, false)}`],
+          ...(s.trial_end ? [['Trial', `${formatDate(s.trial_start, false)} to ${formatDate(s.trial_end, false)}`] as [string, React.ReactNode]] : []),
+          ['ID', <span className="mono">{s.id}</span>],
+          ['Billing method', s.collection_method === 'send_invoice' ? 'Email invoice to the customer' : 'Charge default payment method'],
+          ['Payment method', <CardLabel pm={data.paymentMethod} />],
+          ['Discounts', (s.discounts ?? []).length ? `${s.discounts.length}` : '—'],
+        ]} />
+      </Section>
+      <Section title="Pricing">
+        <table className="table">
+          <thead><tr><th>Product</th><th className="right">Quantity</th><th className="right">Unit price</th><th className="right">Total</th></tr></thead>
+          <tbody>
+            {(s.items?.data ?? []).map((it: StripeObject) => {
+              const productId = typeof it.price?.product === 'string' ? it.price.product : it.price?.product?.id;
+              const unit = Number(it.price?.unit_amount) || 0;
+              const q = Number(it.quantity) || 1;
+              return (
+                <tr key={it.id}>
+                  <td><div className="strong">{data.products.get(productId)?.name ?? productId}</div><div className="muted small">{money(unit, it.price?.currency)} / {it.price?.recurring?.interval ?? 'month'}</div></td>
+                  <td className="right">{q}</td>
+                  <td className="right">{money(unit, it.price?.currency)}</td>
+                  <td className="right">{money(unit * q, it.price?.currency)} {ccy(it.price?.currency)}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </Section>
+      <Section title="Invoices"><InvoicesTable invoices={data.invoices} go={go} noCustomer /></Section>
+      <Section title="Events"><Timeline events={data.events} /></Section>
+    </div>
+  );
+}
 
-  const current = useMemo(() => (rows ?? []).find((r) => r.id === selected) ?? filtered[0], [rows, selected, filtered]);
-  const refs = useMemo(() => current ? resolveCrossRefs(activeKey, current, data) : { outgoing: [], incoming: [] }, [current, activeKey, data]);
+type InvoiceFilter = 'all' | 'draft' | 'open' | 'paid' | 'void' | 'uncollectible';
+function InvoicesPage({ go }: { go: Go }) {
+  const { data, error } = useApi(loadInvoices, []);
+  const [filter, setFilter] = useState<InvoiceFilter>('all');
+  const invoices = data?.invoices ?? [];
+  const shown = invoices.filter((i) => filter === 'all' || i.status === filter);
+  return (
+    <div className="page">
+      <PageHead title="Invoices" />
+      <FilterCards<InvoiceFilter>
+        value={filter} onChange={setFilter}
+        options={(['all', 'draft', 'open', 'paid', 'void', 'uncollectible'] as InvoiceFilter[]).map((k) => ({ key: k, label: k === 'all' ? 'All invoices' : STATUS[k]!.label, count: k === 'all' ? invoices.length : invoices.filter((i) => i.status === k).length }))}
+      />
+      {data ? <><InvoicesTable invoices={shown} customers={data.customers} go={go} /><ResultCount n={shown.length} /></> : <Loading error={error} />}
+    </div>
+  );
+}
 
-  const jump = (collection: string, id: string) => {
-    if (!collection) return;
-    setActiveKey(collection);
-    setSelected(id);
-    setQuery('');
-  };
+function InvoicePage({ id, go }: { id: string; go: Go }) {
+  const { data, error } = useApi(async () => {
+    const invoice = await retrieve(`/v1/invoices/${id}`);
+    const customer = typeof invoice.customer === 'string' ? await retrieve(`/v1/customers/${invoice.customer}`).catch(() => undefined) : undefined;
+    return { invoice, customer };
+  }, [id]);
+  if (!data) return <Loading error={error} />;
+  const inv = data.invoice;
+  const lines: StripeObject[] = inv.lines?.data ?? [];
+  return (
+    <div className="page detail-page">
+      <PageHead kicker={<><Icon name="billing" size={12} /> Invoice</>} title={<><Amount amount={Number(inv.total ?? inv.amount_due) || 0} currency={inv.currency} /> <StatusPill value={inv.status} /></>}>
+        <div className="summary">
+          <div className="summary-item"><div className="summary-label">Invoice number</div><div className="mono">{inv.number || inv.id}</div></div>
+          <div className="summary-item"><div className="summary-label">Customer</div><div>{data.customer ? <Link to={`customers/${data.customer.id}`} go={go}>{data.customer.email || data.customer.name}</Link> : inv.customer}</div></div>
+          <div className="summary-item"><div className="summary-label">{inv.status === 'paid' ? 'Paid' : 'Due'}</div><div>{inv.status === 'paid' ? formatDate(inv.status_transitions?.paid_at) : inv.due_date ? formatDate(inv.due_date, false) : '—'}</div></div>
+        </div>
+      </PageHead>
+      <Section title="Summary">
+        <table className="table">
+          <thead><tr><th>Description</th><th className="right">Qty</th><th className="right">Amount</th></tr></thead>
+          <tbody>
+            {lines.map((l) => <tr key={l.id}><td>{l.description || (l.price?.product ? `Subscription (${formatDate(l.period?.start, false)} – ${formatDate(l.period?.end, false)})` : '—')}</td><td className="right">{l.quantity ?? 1}</td><td className="right">{money(l.amount, l.currency)}</td></tr>)}
+            <tr className="table-total"><td>Total</td><td /><td className="right strong">{money(inv.total, inv.currency)}</td></tr>
+            <tr className="table-total"><td>Amount due</td><td /><td className="right strong">{money(inv.amount_remaining ?? inv.amount_due, inv.currency)}</td></tr>
+          </tbody>
+        </table>
+      </Section>
+      <Section title="Details">
+        <Props rows={[
+          ['ID', <span className="mono">{inv.id}</span>],
+          ['Billing', inv.collection_method === 'send_invoice' ? 'Send invoice' : 'Charge automatically'],
+          ...(inv.subscription ? [['Subscription', <Link to={`subscriptions/${inv.subscription}`} go={go}>{inv.subscription}</Link>] as [string, React.ReactNode]] : []),
+          ...(inv.payment_intent ? [['Payment', <Link to={`payments/${inv.payment_intent}`} go={go}>{inv.payment_intent}</Link>] as [string, React.ReactNode]] : []),
+          ['Created', formatDate(inv.created)],
+        ]} />
+      </Section>
+    </div>
+  );
+}
+
+// ── Product catalog ──────────────────────────────────────────────────────────
+function ProductsPage({ go }: { go: Go }) {
+  const { data, error, reload } = useApi(loadProducts, []);
+  const [creating, setCreating] = useState(false);
+  return (
+    <div className="page">
+      <PageHead title="Product catalog" actions={<button className="btn btn-primary" onClick={() => setCreating(true)}><Icon name="plus" size={14} /> Create product</button>}>
+        <div className="tabs"><Link to="products" go={go} className="tab active">Products</Link><Link to="coupons" go={go} className="tab">Coupons</Link></div>
+      </PageHead>
+      {data ? (
+        <>
+          <table className="table">
+            <thead><tr><th>Name</th><th>Pricing</th><th>Created</th><th className="right">Updated</th></tr></thead>
+            <tbody>
+              {data.products.length === 0 && <tr className="empty-row"><td colSpan={4}><EmptyState title="No products" /></td></tr>}
+              {data.products.map((p) => {
+                const prices = data.prices.filter((x) => x.product === p.id);
+                const first = prices[prices.length - 1];
+                return (
+                  <tr key={p.id}>
+                    <td><div className="product-cell"><span className="product-thumb">{p.images?.[0] ? <img src={p.images[0]} alt="" /> : <Icon name="catalog" />}</span><div><div className="strong">{p.name}</div>{p.description ? <div className="muted small">{p.description}</div> : null}</div></div></td>
+                    <td>{first ? <><span>{money(first.unit_amount, first.currency)} {ccy(first.currency)}{first.recurring ? ` / ${first.recurring.interval}` : ''}</span>{prices.length > 1 ? <div className="muted small">{prices.length} prices</div> : null}</> : <span className="muted">No prices</span>}</td>
+                    <td className="muted nowrap">{formatDate(p.created, false)}</td>
+                    <td className="right muted nowrap">{formatDate(p.updated ?? p.created, false)}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+          <ResultCount n={data.products.length} />
+        </>
+      ) : <Loading error={error} />}
+      {creating ? <CreateDialog collection="products" onClose={() => setCreating(false)} onCreated={() => { setCreating(false); reload(); }} /> : null}
+    </div>
+  );
+}
+
+// ── Balances ─────────────────────────────────────────────────────────────────
+function BalancesPage({ go }: { go: Go }) {
+  const { data, error } = useApi(loadBalances, []);
+  if (!data) return <Loading error={error} />;
+  const buckets = (k: string) => (data.balance[k] ?? []) as StripeObject[];
+  const currencies = [...new Set([...buckets('available'), ...buckets('pending')].map((b) => b.currency))];
+  return (
+    <div className="page">
+      <PageHead title="Balances" />
+      <Section title="Balance summary">
+        <BalanceSummary row={data.balance} />
+        <table className="table">
+          <thead><tr><th>Payments</th><th className="right">Amount</th></tr></thead>
+          <tbody>
+            {currencies.map((c) => {
+              const pending = buckets('pending').find((b) => b.currency === c)?.amount ?? 0;
+              const available = buckets('available').find((b) => b.currency === c)?.amount ?? 0;
+              return (
+                <React.Fragment key={c}>
+                  <tr><td>Incoming</td><td className="right">{money(pending, c)} {ccy(c)}</td></tr>
+                  <tr><td>Available to pay out</td><td className="right">{money(available, c)} {ccy(c)}</td></tr>
+                  <tr className="table-total"><td>Total</td><td className="right strong">{money(pending + available, c)} {ccy(c)}</td></tr>
+                </React.Fragment>
+              );
+            })}
+          </tbody>
+        </table>
+      </Section>
+      <Section title="Recent activity" actions={<Link to="balance-transactions" go={go}>View all</Link>}>
+        <ListPane section={SECTIONS.find((s) => s.key === 'balance_transactions')!} rows={data.transactions.slice(0, 10)} onSelect={() => {}} />
+      </Section>
+      <Section title="Payouts" actions={<Link to="payouts" go={go}>View all</Link>}>
+        <ListPane section={SECTIONS.find((s) => s.key === 'payouts')!} rows={data.payouts.slice(0, 10)} onSelect={() => {}} />
+      </Section>
+    </div>
+  );
+}
+
+// ── Developers and Settings ──────────────────────────────────────────────────
+export function payoutScheduleText(account: StripeRow | undefined): string {
+  const sched = (account?.settings as any)?.payouts?.schedule;
+  if (!sched || typeof sched !== 'object') return 'Daily';
+  const interval = String(sched.interval ?? 'daily');
+  if (interval === 'weekly' && sched.weekly_anchor) return `Weekly on ${titleCase(String(sched.weekly_anchor))}`;
+  if (interval === 'monthly' && sched.monthly_anchor != null) return `Monthly on day ${sched.monthly_anchor}`;
+  return titleCase(interval);
+}
+
+function DevelopersPage({ go }: { go: Go }) {
+  const { data, error } = useApi(loadDevelopers, []);
+  if (!data) return <Loading error={error} />;
+  return (
+    <div className="page">
+      <PageHead title="Developers" />
+      <section className="section settings-block" data-settings="api-keys">
+        <div className="section-head"><h2>API keys</h2></div>
+        <table className="table">
+          <thead><tr><th>Name</th><th>Token</th><th className="right">Created</th></tr></thead>
+          <tbody>
+            <tr><td className="strong">Publishable key</td><td className="mono">pk_test_twin</td><td className="right muted">—</td></tr>
+            <tr><td className="strong">Secret key</td><td className="mono">sk_test_••••twin</td><td className="right muted">—</td></tr>
+          </tbody>
+        </table>
+      </section>
+      <section className="section settings-block" data-settings="webhooks">
+        <div className="section-head"><h2>Webhooks</h2></div>
+        <table className="table">
+          <thead><tr><th>Endpoint</th><th>Status</th><th className="right">Listening to</th></tr></thead>
+          <tbody>
+            {data.webhooks.length === 0 && <tr className="empty-row"><td colSpan={3}><EmptyState title="No webhook endpoints" /></td></tr>}
+            {data.webhooks.map((w) => <tr key={w.id}><td className="mono">{w.url ?? w.id}</td><td><StatusPill value={w.status ?? 'enabled'} /></td><td className="right muted">{(w.enabled_events ?? []).length} events</td></tr>)}
+          </tbody>
+        </table>
+      </section>
+      <Section title="Events" actions={<Link to="events" go={go}>View all</Link>}>
+        <table className="table">
+          <thead><tr><th>Event</th><th>Type</th><th>Object</th><th className="right">Date</th></tr></thead>
+          <tbody>
+            {data.events.slice(0, 15).map((e) => (
+              <tr key={e.id}><td>{eventText(e)}</td><td className="mono muted">{e.type}</td><td className="mono muted">{e.data?.object?.id}</td><td className="right muted nowrap">{formatDate(e.created)}</td></tr>
+            ))}
+          </tbody>
+        </table>
+      </Section>
+    </div>
+  );
+}
+
+function SettingsPage() {
+  const { data, error } = useApi(loadDevelopers, []);
+  if (!data) return <Loading error={error} />;
+  const account = data.account;
+  return (
+    <div className="page">
+      <PageHead title="Settings" />
+      <section className="section settings-block" data-settings="account">
+        <div className="section-head"><h2>Business details</h2></div>
+        <Props rows={[
+          ['Account ID', <span className="mono">{account?.id ?? '—'}</span>],
+          ['Account name', account?.settings?.dashboard?.display_name ?? PLATFORM_DEFAULT_NAME],
+          ['Country', (account?.country as string) ?? '—'],
+          ['Default currency', String((account?.default_currency as string) ?? 'usd').toUpperCase()],
+        ]} />
+      </section>
+      <section className="section settings-block" data-settings="public-details">
+        <div className="section-head"><h2>Public details</h2><a className="btn" href={`${API_BASE}/settings/public`}>Edit</a></div>
+        <Props rows={[['Business name', <span className="settings-public-name">{publicBusinessName(account)}</span>]]} />
+      </section>
+      <section className="section settings-block" data-settings="payouts">
+        <div className="section-head"><h2>Payouts</h2></div>
+        <Props rows={[['Payout schedule', <span className="settings-payout-schedule">{payoutScheduleText(account)}</span>]]} />
+      </section>
+    </div>
+  );
+}
 
-  const canCreate = active && CREATE_FORMS[activeKey] !== undefined;
+function ResourcePage({ section, go }: { section: Section; go: Go }) {
+  const { data, error } = useApi(() => list(`/v1/${section.key}`), [section.key]);
+  const account = section.key === 'accounts' ? data?.[0] : undefined;
+  const tabs = section.path.startsWith('radar/') ? ['radar/reviews', 'radar/lists']
+    : section.path.startsWith('terminal/') ? ['terminal/readers', 'terminal/locations']
+    : section.path.startsWith('issuing/') ? ['issuing/cards', 'issuing/cardholders']
+    : section.path.startsWith('connect/') ? ['connect/accounts', 'connect/transfers']
+    : section.key === 'payouts' || section.key === 'balance_transactions' ? ['payouts', 'balance-transactions'] : [];
+  const title = section.path.startsWith('radar/') ? 'Radar' : section.path.startsWith('terminal/') ? 'Terminal' : section.path.startsWith('issuing/') ? 'Issuing'
+    : section.path.startsWith('connect/') ? 'Connect' : section.key === 'tax_rates' ? 'Tax' : section.label;
+  return (
+    <div className="page">
+      <PageHead title={title}>
+        {tabs.length ? <div className="tabs">{tabs.map((t) => <Link key={t} to={t} go={go} className={`tab ${t === section.path ? 'active' : ''}`}>{SECTION_BY_PATH.get(t)!.label.replace(/^(Radar|Terminal|Issuing) /, '')}</Link>)}</div> : null}
+      </PageHead>
+      {account ? <ConnectAccountPanel row={account} /> : null}
+      {data ? <><ListPane section={section} rows={data} onSelect={() => {}} /><ResultCount n={data.length} /></> : <Loading error={error} />}
+    </div>
+  );
+}
 
+// ── the app ──────────────────────────────────────────────────────────────────
+export function Page({ route, search, go }: { route: string[]; search: string; go: Go }) {
+  const [head, id] = route;
+  const joined = route.join('/');
+  if (!head || head === 'dashboard') return <HomeScreen go={go} />;
+  if (head === 'payments') return id ? <PaymentPage id={id} go={go} /> : <PaymentsPage go={go} />;
+  if (head === 'customers') return id ? <CustomerPage id={id} go={go} /> : <CustomersPage go={go} create={new URLSearchParams(search).has('create')} />;
+  if (head === 'subscriptions') return id ? <SubscriptionPage id={id} go={go} /> : <SubscriptionsPage go={go} />;
+  if (head === 'invoices') return id ? <InvoicePage id={id} go={go} /> : <InvoicesPage go={go} />;
+  if (head === 'products') return <ProductsPage go={go} />;
+  if (head === 'balance') return <BalancesPage go={go} />;
+  if (head === 'developers') return <DevelopersPage go={go} />;
+  if (head === 'settings') return <SettingsPage />;
+  const section = SECTION_BY_PATH.get(joined) ?? SECTION_BY_PATH.get(head);
+  if (section) return <ResourcePage key={section.key} section={section} go={go} />;
+  return <div className="page"><EmptyState title="Page not found" body="This page doesn’t exist in the Dashboard." /></div>;
+}
+
+export function App() {
+  const [loc, setLoc] = useState(() => ({ path: window.location.pathname, search: window.location.search }));
+  useEffect(() => {
+    const onPop = () => setLoc({ path: window.location.pathname, search: window.location.search });
+    window.addEventListener('popstate', onPop);
+    return () => window.removeEventListener('popstate', onPop);
+  }, []);
+  const go: Go = useCallback((to) => {
+    const href = hrefOf(to);
+    window.history.pushState(null, '', href);
+    const u = new URL(href, window.location.origin);
+    setLoc({ path: u.pathname, search: u.search });
+    window.scrollTo(0, 0);
+  }, []);
+  const route = routeOf(loc.path);
+  useEffect(() => {
+    if (route.length === 0) window.history.replaceState(null, '', hrefOf('dashboard'));
+    const [head, id] = route;
+    const names: Record<string, string> = { dashboard: 'Home', payments: 'Payments', customers: 'Customers', subscriptions: 'Subscriptions', invoices: 'Invoices', products: 'Product catalog', balance: 'Balances', developers: 'Developers', settings: 'Settings' };
+    document.title = `${id ? `${id} – ` : ''}${names[head ?? 'dashboard'] ?? SECTION_BY_PATH.get(route.join('/'))?.label ?? 'Dashboard'} – Stripe`;
+  }, [loc.path]);
   return (
     <div className="dash">
-      <header className="topbar">
-        <div className="brand"><span className="dot" /> Stripe <span className="tag">twin</span></div>
-        <button className="search search-trigger" onClick={() => setCmdOpen(true)}>Search… <span className="kbd">⌘K</span></button>
-        {active ? <input className="search section-filter" placeholder="Filter this section…" value={query} onChange={(e) => setQuery(e.target.value)} /> : null}
-        <span className="mode">Test mode</span>
-      </header>
-      <div className="body">
-        <SideNav
-          sections={SECTIONS}
-          counts={Object.fromEntries(SECTIONS.map((s) => [s.key, data[s.key]?.length ?? 0]))}
-          activeKey={activeKey}
-          onSelect={(key) => { setActiveKey(key); setSelected(null); setQuery(''); }}
-          onHome={() => { setActiveKey('__home'); setSelected(null); setQuery(''); }}
-          onSettings={() => { setActiveKey('__settings'); setSelected(null); setQuery(''); }}
-        />
-        <main className="content">
-          {activeKey === '__home' ? (
-            <>
-              <div className="content-head"><h2>Home</h2></div>
-              <HomeScreen data={data} onJump={jump} />
-            </>
-          ) : activeKey === '__settings' ? (
-            <>
-              <div className="content-head"><h2>Settings</h2></div>
-              <SettingsScreen account={account} webhooks={data.webhook_endpoints ?? []} />
-            </>
-          ) : active ? (
-            <>
-              <div className="content-head">
-                <h2>{active.label}</h2>
-                <span className="count">{filtered.length}{query ? ` of ${rows?.length ?? 0}` : ''}</span>
-                {canCreate ? <button className="create-trigger" onClick={() => setCreateFor(activeKey)}>+ New</button> : null}
-              </div>
-              {error && <div className="error">Failed to load /v1/{activeKey}: {error}</div>}
-              <div className="split">
-                <ListPane
-                  section={active}
-                  rows={rows ? filtered : []}
-                  query={query}
-                  currentId={current?.id}
-                  onSelect={(id) => setSelected(id)}
-                />
-                <Detail collection={activeKey} row={current} refs={refs} onJump={jump} onAction={() => setRefreshKey((k) => k + 1)} />
-              </div>
-            </>
-          ) : null}
-        </main>
+      <TestModeBand />
+      <div className="frame">
+        <SideNav route={route} go={go} />
+        <div className="main">
+          <TopBar go={go} />
+          <main className="content"><Page route={route} search={loc.search} go={go} /></main>
+        </div>
       </div>
-      {cmdOpen ? <CommandBar data={data} onJump={jump} onClose={() => setCmdOpen(false)} /> : null}
-      {createFor ? <CreateModal collection={createFor} onClose={() => setCreateFor(null)} onCreated={() => setRefreshKey((k) => k + 1)} /> : null}
     </div>
   );
 }
 
-// Browser-only mount. Guarded so the presentational components above can be imported
-// (and renderToStaticMarkup'd) in a DOM-less test/SSR environment without this top-level
-// `document` access throwing. The browser bundle still mounts exactly as before.
-if (typeof document !== 'undefined') {
+if (typeof document !== 'undefined' && document.getElementById('root')) {
   createRoot(document.getElementById('root')!).render(<App />);
 }