@volter/twin-stripe 0.1.1 → 2.0.0

package/src/stripe-ui-structure.ts

@@ -1,404 +1,180 @@
-// Stripe MIRROR — structural DOM checklist (RUNG-5).
+// The Stripe Dashboard — structural DOM checklist (RUNG-5).
 //
-// Completeness (stripe-ui-conformance.ts) asks "does the mirror SHOW the data?".
-// Structure asks a stricter, proximity question: "does the mirror's rendered DOM have
-// the same structural LANDMARKS a real Stripe dashboard screen has?" — a left nav with
-// an item (and count) per collection, a list pane that emits a row per object, a detail
-// pane with a scalar key/value grid, nested objects rendered as indented lines (NOT
-// "[object Object]"), status pills, a cross-reference "Related" block of links,
-// product image <img> thumbnails, a prominent payment-decline banner (last_payment_error)
-// and the synthesized balance available/pending summary buckets.
+// Completeness (stripe-ui-conformance.ts) asks "does the Dashboard SHOW the data?". Structure asks
+// "does its rendered DOM have the landmarks Stripe's Dashboard has?": the left navigation at Stripe's
+// paths, the test-mode band, the Payments table with Stripe's columns and status pills, a payment's page
+// (amount, status, timeline from its events, breakdown, refunds, card), a customer's page (details,
+// subscriptions, payments, payment methods, invoices), a subscription's page (pricing, period, invoices,
+// the cancel control), the balance buckets, a connected account's readiness and the resource lists.
 //
-// Each check's `present` is computed from the ACTUAL markup produced by
-// renderToStaticMarkup() of the mirror's own presentational components (exported from
-// client/stripe-mirror.tsx) over seeded, cross-referenced objects — so a check cannot
-// pass unless the component truly emits that structure. Read-only; deterministic.
+// Each check's `present` is computed from the ACTUAL markup renderToStaticMarkup() produces from the
+// Dashboard's own components (client/stripe-mirror.tsx) over objects shaped as the API returns them, so a
+// check cannot pass unless the component truly emits that structure. Read-only; deterministic.
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { checkUiStructure, type UiStructureReport } from '@volter/twin-tooling';
+import { checkUiStructure, type UiStructureReport } from '@volter/world-tooling';
 import {
-  SECTIONS, SideNav, ListPane, Detail, type Section,
+  SECTIONS, SideNav, ListPane, TestModeBand, PaymentsTable, PaymentDetailView, CustomerDetailView,
+  SubscriptionDetailView, BalanceSummary, ConnectAccountPanel,
 } from '../client/stripe-mirror.tsx';
-import {
-  resolveCrossRefs, productImageUrls,
-  type StripeRow, type CrossRefs,
-} from './stripe-mirror-ui.ts';
+import type { CustomerDetail, Payment, PaymentDetail, SubscriptionDetail } from '../client/dashboard-api.ts';
+import type { StripeRow } from './stripe-mirror-ui.ts';
 
-const SECTION_BY_KEY: Record<string, Section> = Object.fromEntries(SECTIONS.map((s) => [s.key, s]));
+const noop = () => {};
+const AT = 1790263345;
 
-// ── Seed: a small, cross-referenced slice of every shape a dashboard renders. ──────
-// One object per collection we assert on, wired with real Stripe reference fields so
-// the cross-ref resolver produces both outgoing and incoming "Related" links, and with
-// nested objects/arrays (subscription items, invoice lines, product images) so the
-// nested-line + thumbnail structure has something real to render.
-const CUSTOMER: StripeRow = {
-  id: 'cus_twin001', object: 'customer', name: 'Ada Lovelace', email: 'ada@example.com', currency: 'usd',
-  metadata: { plan: 'pro', seats: '5' },
-};
-const PRODUCT: StripeRow = {
-  id: 'prod_twin001', object: 'product', name: 'Analytics Suite', active: true,
-  images: ['https://files.stripe.com/img/one.png', 'https://files.stripe.com/img/two.png'],
-};
-const PRICE: StripeRow = {
-  id: 'price_twin001', object: 'price', product: 'prod_twin001', currency: 'usd', unit_amount: 4200,
-  recurring: { interval: 'month', interval_count: 1 },
-};
-const SUBSCRIPTION: StripeRow = {
-  id: 'sub_twin001', object: 'subscription', status: 'active', customer: 'cus_twin001', currency: 'usd',
-  items: {
-    object: 'list',
-    data: [
-      { id: 'si_twin001', object: 'subscription_item', quantity: 5, price: 'price_twin001' },
-    ],
-  },
-};
-const INVOICE: StripeRow = {
-  id: 'in_twin001', object: 'invoice', status: 'paid', customer: 'cus_twin001', subscription: 'sub_twin001',
-  currency: 'usd', total: 21000, amount_due: 21000,
-  lines: {
-    object: 'list',
-    data: [
-      { id: 'il_twin001', object: 'line_item', amount: 21000, quantity: 5, price: 'price_twin001' },
-    ],
-  },
-};
-const DISPUTE: StripeRow = {
-  id: 'dp_twin001', object: 'dispute', amount: 4200, currency: 'usd', reason: 'fraudulent',
-  status: 'warning_needs_response', charge: 'ch_twin001',
-};
-const PAYOUT: StripeRow = {
-  id: 'po_twin001', object: 'payout', amount: 16800, currency: 'usd', status: 'in_transit',
-  arrival_date: 1718409600,
-};
-// A declined payment_intent carries the vendor-faithful last_payment_error (test-card
-// decline state) the mirror lifts into a prominent banner.
-const DECLINED_PAYMENT: StripeRow = {
-  id: 'pi_twin009', object: 'payment_intent', amount: 4200, currency: 'usd', customer: 'cus_twin001',
-  status: 'requires_payment_method',
-  last_payment_error: { type: 'card_error', code: 'card_declined', decline_code: 'insufficient_funds', message: 'Your card has insufficient funds.', param: 'card' },
-};
-// The synthesized account balance summary (GET /v1/balance), presented as a one-row list.
-const BALANCE: StripeRow = {
-  id: 'balance', object: 'balance', livemode: false,
-  available: [{ amount: 16800, currency: 'usd', source_types: { card: 16800 } }],
-  pending: [{ amount: 4200, currency: 'usd', source_types: { card: 4200 } }],
-};
-// A Connect connected account, freshly created (not yet onboarded): charges/payouts
-// disabled, details not submitted, with outstanding `requirements.currently_due`.
-const ACCOUNT: StripeRow = {
-  id: 'acct_twin001', object: 'account', type: 'express', country: 'US', email: 'seller@example.com',
-  charges_enabled: false, payouts_enabled: false, details_submitted: false,
-  capabilities: { card_payments: 'inactive' },
-  requirements: { currently_due: ['external_account', 'tos_acceptance.date'], eventually_due: [], past_due: [], pending_verification: [] },
-};
-// A transfer from the platform balance to the connected account above (destination cross-ref).
-const TRANSFER: StripeRow = {
-  id: 'tr_twin001', object: 'transfer', amount: 16800, currency: 'usd', destination: 'acct_twin001',
-  reversed: false, amount_reversed: 0,
-};
+const CUSTOMER: StripeRow = { id: 'cus_twin001', object: 'customer', name: 'Ada Lovelace', email: 'ada@example.com', created: AT, invoice_settings: { default_payment_method: 'pm_twin001' }, metadata: {} };
+const CARD: StripeRow = { id: 'pm_twin001', object: 'payment_method', type: 'card', customer: 'cus_twin001', card: { brand: 'visa', last4: '4242', exp_month: 12, exp_year: 2034, funding: 'credit', country: 'US', checks: { cvc_check: 'pass' } }, billing_details: {} };
+const INTENT: StripeRow = { id: 'pi_twin001', object: 'payment_intent', amount: 30000, currency: 'usd', status: 'succeeded', customer: 'cus_twin001', payment_method: 'pm_twin001', latest_charge: 'ch_twin001', description: 'Annual workshop seat', created: AT, metadata: {} };
+const CHARGE: StripeRow = { id: 'ch_twin001', object: 'charge', amount: 30000, currency: 'usd', status: 'succeeded', refunded: false, amount_refunded: 10000, payment_intent: 'pi_twin001', customer: 'cus_twin001', created: AT };
+const REFUND: StripeRow = { id: 're_twin001', object: 'refund', amount: 10000, currency: 'usd', status: 'succeeded', charge: 'ch_twin001', payment_intent: 'pi_twin001', reason: 'requested_by_customer', created: AT + 60 };
+const event = (id: string, type: string, object: StripeRow, created: number): StripeRow => ({ id, object: 'event', type, created, data: { object } });
 
-// A Stripe Tax rate (reusable) and a tax calculation with priced line_items (nested).
-const TAX_RATE: StripeRow = {
-  id: 'txr_twin001', object: 'tax_rate', display_name: 'Sales Tax', percentage: 8.5,
-  inclusive: false, active: true, jurisdiction: 'US',
+const PARTIAL: PaymentDetail = {
+  id: 'pi_twin001', amount: 30000, currency: 'usd', status: 'partially_refunded', description: 'Annual workshop seat', created: AT,
+  customer: CUSTOMER, charge: CHARGE, intent: INTENT, paymentMethod: CARD, amountRefunded: 10000, refundedAt: AT + 60,
+  refunds: [REFUND],
+  events: [
+    event('evt_3', 'charge.refunded', CHARGE, AT + 60),
+    event('evt_2', 'payment_intent.succeeded', INTENT, AT + 1),
+    event('evt_1', 'payment_intent.created', INTENT, AT),
+  ],
+};
+const DECLINED_INTENT: StripeRow = {
+  id: 'pi_twin009', object: 'payment_intent', amount: 15000, currency: 'usd', status: 'requires_payment_method', customer: 'cus_twin001', created: AT,
+  last_payment_error: { type: 'card_error', code: 'card_declined', decline_code: 'insufficient_funds', message: 'Your card has insufficient funds.', param: 'card' },
 };
-const TAX_CALCULATION: StripeRow = {
-  id: 'taxcalc_twin001', object: 'tax.calculation', currency: 'usd', amount_total: 1100,
-  tax_amount_exclusive: 100, customer: 'cus_twin001',
-  line_items: {
-    object: 'list',
-    data: [
-      { id: 'tax_li_taxcalc_twin001_1', object: 'tax.calculation_line_item', amount: 1000, amount_tax: 100, reference: 'sku_1', tax_behavior: 'exclusive' },
-    ],
-  },
+const DECLINED: PaymentDetail = {
+  id: 'pi_twin009', amount: 15000, currency: 'usd', status: 'failed', created: AT, customer: CUSTOMER, intent: DECLINED_INTENT,
+  amountRefunded: 0, declineReason: 'Insufficient funds', declineMessage: 'Your card has insufficient funds.', refunds: [],
+  events: [event('evt_9', 'payment_intent.payment_failed', DECLINED_INTENT, AT)],
 };
+const REFUNDED: Payment = { id: 'pi_twin002', amount: 2500, currency: 'usd', status: 'refunded', description: 'Twin T-shirt', created: AT, customer: CUSTOMER, paymentMethod: CARD, amountRefunded: 2500, refundedAt: AT + 30 };
+const PAYMENTS: Payment[] = [PARTIAL, DECLINED, REFUNDED, { ...REFUNDED, id: 'pi_twin003', status: 'succeeded', amountRefunded: 0, refundedAt: undefined, description: 'Consulting' }];
 
-// A credit note crediting back a paid invoice, with a nested credit_note_line_item, and
-// cross-refs to its invoice + customer. The mirror's Credit Notes section renders it.
-const CREDIT_NOTE: StripeRow = {
-  id: 'cn_twin001', object: 'credit_note', amount: 5000, currency: 'usd', status: 'issued',
-  invoice: 'in_twin001', customer: 'cus_twin001', type: 'post_payment', number: 'in_twin001-CN-01',
-  lines: {
-    object: 'list',
-    data: [
-      { id: 'cnli_cn_twin001_1', object: 'credit_note_line_item', type: 'custom_line_item', amount: 5000, description: 'goodwill credit' },
-    ],
-  },
-};
-// A customer tax ID (EU VAT) on the customer above (customer cross-ref).
-const TAX_ID: StripeRow = {
-  id: 'txi_twin001', object: 'tax_id', type: 'eu_vat', value: 'DE123456789',
-  customer: 'cus_twin001', country: 'DE', verification: { status: 'pending' },
-};
-// A customer balance transaction (a -2000 credit) with its running ending_balance.
-const CUSTOMER_BALANCE_TXN: StripeRow = {
-  id: 'cbtxn_twin001', object: 'customer_balance_transaction', amount: -2000, currency: 'usd',
-  ending_balance: -2000, type: 'adjustment', customer: 'cus_twin001', credit_note: 'cn_twin001',
+const PRODUCT: StripeRow = { id: 'prod_twin001', object: 'product', name: 'Pro plan' };
+const SUBSCRIPTION: StripeRow = {
+  id: 'sub_twin001', object: 'subscription', status: 'trialing', customer: 'cus_twin001', currency: 'usd', created: AT, start_date: AT,
+  current_period_start: AT, current_period_end: AT + 14 * 86400, trial_start: AT, trial_end: AT + 14 * 86400, collection_method: 'charge_automatically',
+  items: { object: 'list', data: [{ id: 'si_twin001', object: 'subscription_item', quantity: 3, price: { id: 'price_twin001', product: 'prod_twin001', unit_amount: 4900, currency: 'usd', recurring: { interval: 'month' } } }] },
 };
+const INVOICE: StripeRow = { id: 'in_twin001', object: 'invoice', number: 'TWIN-0001', status: 'paid', customer: 'cus_twin001', subscription: 'sub_twin001', currency: 'usd', total: 14700, amount_due: 14700, created: AT };
+const CUSTOMER_PAGE: CustomerDetail = { customer: CUSTOMER, paymentMethods: [CARD], subscriptions: [SUBSCRIPTION], invoices: [INVOICE], payments: PAYMENTS, products: new Map([[PRODUCT.id, PRODUCT]]), events: [] };
+const SUBSCRIPTION_PAGE: SubscriptionDetail = { subscription: SUBSCRIPTION, customer: CUSTOMER, invoices: [INVOICE], products: new Map([[PRODUCT.id, PRODUCT]]), events: [event('evt_s', 'customer.subscription.created', SUBSCRIPTION, AT)], paymentMethod: CARD };
 
-const DATA: Record<string, StripeRow[]> = {
-  customers: [CUSTOMER],
-  credit_notes: [CREDIT_NOTE],
-  tax_ids: [TAX_ID],
-  customer_balance_transactions: [CUSTOMER_BALANCE_TXN],
-  tax_rates: [TAX_RATE],
-  'tax/calculations': [TAX_CALCULATION],
-  products: [PRODUCT],
-  prices: [PRICE],
-  subscriptions: [SUBSCRIPTION],
-  invoices: [INVOICE],
-  disputes: [DISPUTE],
-  payouts: [PAYOUT],
-  payment_intents: [DECLINED_PAYMENT],
-  balance: [BALANCE],
-  accounts: [ACCOUNT],
-  transfers: [TRANSFER],
+const BALANCE: StripeRow = { id: 'balance', object: 'balance', available: [{ amount: 16800, currency: 'usd' }], pending: [{ amount: 4200, currency: 'usd' }] };
+const ACCOUNT: StripeRow = {
+  id: 'acct_twin001', object: 'account', type: 'express', country: 'US', charges_enabled: false, payouts_enabled: false, details_submitted: false,
+  requirements: { currently_due: ['external_account', 'tos_acceptance.date'] },
 };
+const TAX_RATE: StripeRow = { id: 'txr_twin001', object: 'tax_rate', display_name: 'Sales Tax', percentage: 8.5, inclusive: false, active: true, jurisdiction: 'US', created: AT };
 
-const noop = () => {};
-
-/** renderToStaticMarkup the left nav (one item + count per collection). */
-function renderNav(): string {
-  const counts = Object.fromEntries(SECTIONS.map((s) => [s.key, DATA[s.key]?.length ?? 0]));
-  return renderToStaticMarkup(
-    createElement(SideNav, { sections: SECTIONS, counts, activeKey: SECTIONS[0]!.key, onSelect: noop }),
-  );
-}
+const html = (el: Parameters<typeof renderToStaticMarkup>[0]) => renderToStaticMarkup(el);
+const count = (markup: string, needle: RegExp) => (markup.match(needle) ?? []).length;
 
-/** renderToStaticMarkup the list pane for a collection (a row per object). */
-function renderList(collection: string, rows: StripeRow[]): string {
-  return renderToStaticMarkup(
-    createElement(ListPane, { section: SECTION_BY_KEY[collection]!, rows, currentId: rows[0]?.id, onSelect: noop }),
-  );
-}
-
-/** renderToStaticMarkup the detail pane for a row, with its resolved cross-refs. */
-function renderDetail(collection: string, row: StripeRow): string {
-  const refs: CrossRefs = resolveCrossRefs(collection, row, DATA);
-  return renderToStaticMarkup(
-    createElement(Detail, { collection, row, refs, onJump: noop }),
-  );
-}
-
-/**
- * Build the structural checklist from the real rendered markup and run it.
- * ~10 checks, every one asserting a Stripe-dashboard structural landmark.
- */
+/** Build the structural checklist from the real rendered markup and run it. */
 export function stripeUiStructure(): UiStructureReport {
-  const nav = renderNav();
-  const customersList = renderList('customers', DATA.customers!);
-  const subscriptionDetail = renderDetail('subscriptions', SUBSCRIPTION);
-  const invoiceDetail = renderDetail('invoices', INVOICE);
-  const productDetail = renderDetail('products', PRODUCT);
-  const customerDetail = renderDetail('customers', CUSTOMER);
-  const declinedPaymentDetail = renderDetail('payment_intents', DECLINED_PAYMENT);
-  const balanceDetail = renderDetail('balance', BALANCE);
-  const accountDetail = renderDetail('accounts', ACCOUNT);
-  const transferDetail = renderDetail('transfers', TRANSFER);
-  const taxRatesList = renderList('tax_rates', DATA.tax_rates!);
-  const taxCalculationDetail = renderDetail('tax/calculations', TAX_CALCULATION);
-  const creditNotesList = renderList('credit_notes', DATA.credit_notes!);
-  const creditNoteDetail = renderDetail('credit_notes', CREDIT_NOTE);
-  const taxIdsList = renderList('tax_ids', DATA.tax_ids!);
-  const customerBalanceTxnDetail = renderDetail('customer_balance_transactions', CUSTOMER_BALANCE_TXN);
-
-  // How many collection nav items the markup emits. The left nav now also renders the Home
-  // and Settings chrome buttons (which carry no per-collection count), so the per-collection
-  // landmark counts the items that carry a nav-count — exactly one per collection.
-  const navItems = (nav.match(/nav-count/g) ?? []).length;
-  const customerRows = (customersList.match(/list-row/g) ?? []).length;
+  const nav = html(createElement(SideNav, { route: ['payments'], go: noop }));
+  const band = html(createElement(TestModeBand));
+  const payments = html(createElement(PaymentsTable, { payments: PAYMENTS, go: noop }));
+  const partial = html(createElement(PaymentDetailView, { p: PARTIAL, go: noop, onRefund: noop }));
+  const declined = html(createElement(PaymentDetailView, { p: DECLINED, go: noop, onRefund: noop }));
+  const customer = html(createElement(CustomerDetailView, { data: CUSTOMER_PAGE, go: noop }));
+  const subscription = html(createElement(SubscriptionDetailView, { data: SUBSCRIPTION_PAGE, go: noop, onCancel: noop }));
+  const balance = html(createElement(BalanceSummary, { row: BALANCE }));
+  const account = html(createElement(ConnectAccountPanel, { row: ACCOUNT }));
+  const taxRates = html(createElement(ListPane, { section: SECTIONS.find((s) => s.key === 'tax_rates')!, rows: [TAX_RATE], onSelect: noop }));
 
   const checks = [
     {
-      key: 'navItemPerCollection',
-      label: 'Left nav emits a nav item per collection (Customers/Payments/Subscriptions/Invoices/Products/…)',
-      present: navItems === SECTIONS.length && nav.includes('class="side"'),
-    },
-    {
-      key: 'navCounts',
-      label: 'Each left-nav item carries a per-collection object count',
-      present: (nav.match(/nav-count/g) ?? []).length === SECTIONS.length,
-    },
-    {
-      key: 'listRowPerObject',
-      label: 'List pane emits one row per object in the section',
-      present: customerRows === DATA.customers!.length && customersList.includes('class="list"'),
+      key: 'navigation',
+      label: "Left navigation: Home, Balances, Transactions, Customers, Product catalog, Billing's Subscriptions and Invoices, Developers — at Stripe's /test/ paths",
+      present: ['>Home<', '>Balances<', '>Transactions<', '>Customers<', '>Product catalog<', '>Subscriptions<', '>Invoices<', '>Developers<'].every((l) => nav.includes(l))
+        && nav.includes('href="/test/payments"') && nav.includes('href="/test/customers"') && nav.includes('href="/test/subscriptions"'),
     },
     {
-      key: 'detailScalarGrid',
-      label: 'Detail pane renders a scalar field key/value grid (<dl>/<dt>/<dd>)',
-      present: customerDetail.includes('<dl>') && customerDetail.includes('<dt>') && customerDetail.includes('<dd'),
+      key: 'navActive',
+      label: 'The navigation marks the section being viewed',
+      present: /class="nav-item [^"]*active"[^>]*href="\/test\/payments"|href="\/test\/payments" class="nav-item [^"]*active"/.test(nav),
     },
     {
-      key: 'detailHeaderId',
-      label: 'Detail pane shows the object id in its header',
-      present: customerDetail.includes('detail-head') && customerDetail.includes(CUSTOMER.id),
+      key: 'testModeBand',
+      label: "The orange test-mode band across the top",
+      present: band.includes('class="test-band"') && band.includes('Test mode'),
     },
     {
-      key: 'nestedLinesNotObjectObject',
-      label: 'Nested objects/arrays render as indented nested lines, never "[object Object]"',
-      present:
-        subscriptionDetail.includes('class="nested"') &&
-        subscriptionDetail.includes('nested-line') &&
-        !subscriptionDetail.includes('[object Object]') &&
-        !invoiceDetail.includes('[object Object]'),
+      key: 'paymentsColumns',
+      label: "Payments table carries Stripe's columns (Amount, Payment method, Description, Customer, Date, Refunded date, Decline reason)",
+      present: ['>Amount<', '>Payment method<', '>Description<', '>Customer<', '>Date<', '>Refunded date<', '>Decline reason<'].every((c) => payments.includes(c)),
     },
     {
-      key: 'nestedListItems',
-      label: 'Nested Stripe list wrappers (subscription items / invoice lines) flatten to their data rows',
-      present:
-        subscriptionDetail.includes('si_twin001') &&
-        invoiceDetail.includes('il_twin001'),
+      key: 'paymentsRowPerPayment',
+      label: 'Payments table emits one row per payment, amount with its currency',
+      present: count(payments, /class="list-row"/g) === PAYMENTS.length && payments.includes('$300.00') && payments.includes('USD'),
     },
     {
-      key: 'statusPill',
-      label: 'A status pill element renders for objects with a status (active/paid/…)',
-      present: subscriptionDetail.includes('class="pill') && invoiceDetail.includes('class="pill'),
+      key: 'paymentsStatusPills',
+      label: 'Status pills worded as Stripe words them (Succeeded, Refunded, Partial refund, Failed)',
+      present: ['>Succeeded<', '>Refunded<', '>Partial refund<', '>Failed<'].every((l) => payments.includes(l)),
     },
     {
-      key: 'relatedCrossRefBlock',
-      label: 'A cross-ref "Related" block renders outgoing reference links',
-      present:
-        invoiceDetail.includes('detail-block refs') &&
-        invoiceDetail.includes('>Related<') &&
-        invoiceDetail.includes('>References<') &&
-        (invoiceDetail.match(/ref-chip/g) ?? []).length >= 1,
+      key: 'paymentsDeclineReason',
+      label: 'A failed payment shows its decline reason in the list',
+      present: payments.includes('Insufficient funds'),
     },
     {
-      key: 'relatedIncomingRefs',
-      label: 'The "Related" block renders incoming "Referenced by" links (objects pointing at this row)',
-      // The customer is pointed AT by the subscription + invoice → incoming chips.
-      present:
-        customerDetail.includes('detail-block refs') &&
-        customerDetail.includes('>Referenced by<') &&
-        (customerDetail.match(/ref-chip/g) ?? []).length >= 1,
+      key: 'paymentHeader',
+      label: "A payment's page leads with its amount, currency and status, and a Refund control while refundable",
+      present: partial.includes('$300.00') && partial.includes('Partial refund') && partial.includes('Refund</button>'),
     },
     {
-      key: 'crossRefResolvesTargetLabel',
-      label: 'Cross-ref links resolve the target object label (not just a bare id)',
-      // invoice → customer outgoing chip carries the resolved customer name.
-      present: invoiceDetail.includes('Ada Lovelace'),
+      key: 'paymentTimeline',
+      label: "A payment's timeline lists its events (started, succeeded, refunded)",
+      present: partial.includes('class="timeline"') && partial.includes('Payment started') && partial.includes('Payment succeeded') && partial.includes('refunded'),
     },
     {
-      key: 'productImageThumbs',
-      label: 'Product images render as <img> thumbnails',
-      present:
-        productDetail.includes('class="thumbs"') &&
-        (productDetail.match(/<img/g) ?? []).length === productImageUrls(PRODUCT.images).length &&
-        productImageUrls(PRODUCT.images).length > 0,
+      key: 'paymentBreakdownAndRefunds',
+      label: "A payment's breakdown (amount, refunded, net) and its refunds",
+      present: partial.includes('Payment breakdown') && partial.includes('$200.00') && partial.includes('>Refunds<') && partial.includes('re_twin001'),
     },
     {
-      key: 'paymentDeclineBanner',
-      label: 'A declined payment_intent renders its last_payment_error as a prominent banner (decline reason + code)',
-      present:
-        declinedPaymentDetail.includes('class="pay-error"') &&
-        declinedPaymentDetail.includes('Payment error') &&
-        declinedPaymentDetail.includes('card_declined') &&
-        declinedPaymentDetail.includes('insufficient_funds') &&
-        // lifted out of the generic grid, not buried as a raw nested object
-        !declinedPaymentDetail.includes('[object Object]'),
-    },
-    {
-      key: 'balanceSummaryBuckets',
-      label: 'The balance section renders available/pending summary buckets with formatted amounts',
-      present:
-        balanceDetail.includes('class="balance-summary"') &&
-        balanceDetail.includes('balance-bucket available') &&
-        (balanceDetail.match(/balance-bucket/g) ?? []).length >= 2 &&
-        balanceDetail.includes('$168.00') &&
-        balanceDetail.includes('$42.00'),
+      key: 'paymentMethodBlock',
+      label: "A payment's card: number's last four, expiry, type, CVC check",
+      present: partial.includes('4242') && partial.includes('12 / 2034') && partial.includes('Visa credit card') && partial.includes('Passed'),
     },
     {
-      key: 'connectAccountFlags',
-      label: 'A connected account renders its enablement flags (charges/payouts/details_submitted) as tone-carrying tiles',
-      present:
-        accountDetail.includes('class="connect-panel"') &&
-        (accountDetail.match(/connect-flag /g) ?? []).length >= 3 &&
-        accountDetail.includes('>Charges<') &&
-        accountDetail.includes('>Payouts<') &&
-        accountDetail.includes('>Details submitted<') &&
-        // a freshly-created account is not enabled → disabled state shown
-        accountDetail.includes('>disabled<'),
+      key: 'paymentDecline',
+      label: 'A declined payment states its error and decline code, and offers no refund',
+      present: declined.includes('class="pay-error"') && declined.includes('Your card has insufficient funds.') && declined.includes('insufficient_funds') && !declined.includes('Refund</button>'),
     },
     {
-      key: 'connectAccountRequirements',
-      label: 'A connected account renders its outstanding onboarding requirements (currently_due)',
-      present:
-        accountDetail.includes('class="connect-requirements"') &&
-        accountDetail.includes('Requirements currently due') &&
-        accountDetail.includes('external_account') &&
-        accountDetail.includes('tos_acceptance.date'),
+      key: 'customerPage',
+      label: "A customer's page: name, email, Details, Subscriptions, Payments, Payment methods, Invoices",
+      present: customer.includes('Ada Lovelace') && customer.includes('ada@example.com')
+        && ['>Details<', '>Subscriptions<', '>Payments<', '>Payment methods<', '>Invoices<'].every((h) => customer.includes(h))
+        && customer.includes('Pro plan') && customer.includes('TWIN-0001') && customer.includes('>Default<'),
     },
     {
-      key: 'transferDestinationCrossRef',
-      label: 'A transfer renders a cross-ref link to its destination connected account',
-      present:
-        transferDetail.includes('detail-block refs') &&
-        (transferDetail.match(/ref-chip/g) ?? []).length >= 1 &&
-        transferDetail.includes('acct_twin001'),
+      key: 'subscriptionPage',
+      label: "A subscription's page: customer on product, status, period, pricing items, invoices and Cancel subscription",
+      present: subscription.includes('Ada Lovelace') && subscription.includes('Pro plan') && subscription.includes('>Trialing<')
+        && subscription.includes('Current period') && subscription.includes('>Pricing<') && subscription.includes('$147.00')
+        && subscription.includes('TWIN-0001') && subscription.includes('Cancel subscription'),
     },
     {
-      key: 'taxRatesListRow',
-      label: 'The Tax Rates section emits a list row per rate (display_name + percentage)',
-      present:
-        (taxRatesList.match(/list-row/g) ?? []).length === DATA.tax_rates!.length &&
-        taxRatesList.includes('Sales Tax') &&
-        taxRatesList.includes('8.5'),
-    },
-    {
-      key: 'taxCalculationLineItems',
-      label: 'A tax calculation renders its priced line_items as nested lines (per-item tax)',
-      present:
-        taxCalculationDetail.includes('class="nested"') &&
-        taxCalculationDetail.includes('tax_li_taxcalc_twin001_1') &&
-        !taxCalculationDetail.includes('[object Object]'),
-    },
-    {
-      key: 'taxCalculationTotals',
-      label: 'A tax calculation renders its amount_total and tax_amount_exclusive (currency-formatted)',
-      present:
-        taxCalculationDetail.includes('$11.00') &&
-        taxCalculationDetail.includes('$1.00'),
-    },
-    {
-      key: 'creditNotesListRow',
-      label: 'The Credit Notes section emits a list row per credit note (credited amount + status)',
-      present:
-        (creditNotesList.match(/list-row/g) ?? []).length === DATA.credit_notes!.length &&
-        creditNotesList.includes('$50.00') &&
-        creditNotesList.includes('issued'),
-    },
-    {
-      key: 'creditNoteLineItems',
-      label: 'A credit note renders its nested line_items (per-line credited amount), never "[object Object]"',
-      present:
-        creditNoteDetail.includes('class="nested"') &&
-        creditNoteDetail.includes('cnli_cn_twin001_1') &&
-        !creditNoteDetail.includes('[object Object]'),
-    },
-    {
-      key: 'creditNoteInvoiceCrossRef',
-      label: 'A credit note renders a cross-ref link to the invoice it credits',
-      present:
-        creditNoteDetail.includes('detail-block refs') &&
-        (creditNoteDetail.match(/ref-chip/g) ?? []).length >= 1 &&
-        creditNoteDetail.includes('in_twin001'),
+      key: 'balanceSummaryBuckets',
+      label: 'The balance renders its incoming and available buckets, amounts formatted',
+      present: balance.includes('class="balance-summary"') && balance.includes('Incoming') && balance.includes('Available') && balance.includes('$168.00') && balance.includes('$42.00'),
     },
     {
-      key: 'customerTaxIdsListRow',
-      label: 'The Customer Tax IDs section emits a list row per tax ID (value + type)',
-      present:
-        (taxIdsList.match(/list-row/g) ?? []).length === DATA.tax_ids!.length &&
-        taxIdsList.includes('DE123456789') &&
-        taxIdsList.includes('eu_vat'),
+      key: 'connectAccountReadiness',
+      label: "A connected account's charges/payouts/details flags and what is currently due",
+      present: account.includes('class="connect-panel"') && count(account, /connect-flag /g) >= 3 && account.includes('Requirements currently due') && account.includes('external_account'),
     },
     {
-      key: 'customerBalanceTxnDetail',
-      label: 'A customer balance transaction renders its amount + running ending_balance (formatted) with a customer cross-ref',
-      present:
-        customerBalanceTxnDetail.includes('detail-block refs') &&
-        customerBalanceTxnDetail.includes('-$20.00') &&
-        (customerBalanceTxnDetail.match(/ref-chip/g) ?? []).length >= 1,
+      key: 'resourceListRow',
+      label: 'A resource list emits one row per object (Tax rates: name and percentage)',
+      present: count(taxRates, /list-row/g) === 1 && taxRates.includes('Sales Tax') && taxRates.includes('8.5'),
     },
   ];