@volter/twin-stripe 0.1.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,110 @@
+# @volter/twin-stripe
+
+The **Stripe twin** — a local, spec-correct replica of the Stripe REST API on the
+shared [`@volter/twin`](../control-plane) kernel. The real `stripe` SDK works against it
+unmodified; it's the QA stack's authoritative local Stripe (it replaced the old
+hand-made in-process mock).
+
+## Surface
+
+- **REST API** (`stripe-twin.ts` → `handleStripeTwinRequest`; HTTP wrapper
+  `stripe-server.ts` → `createStripeTwinServer`): charges, customers,
+  payment_intents, setup_intents, payment_methods, products, prices, invoices,
+  invoiceitems, subscriptions, refunds, coupons, promotion_codes, identity
+  verification sessions, ephemeral_keys, checkout sessions, billing/customer-portal
+  sessions + configurations.
+- **Writes** are local transactions (action log); reads are the projection (R3/R5/R18).
+- **Card declines** (`stripe-twin.ts`): Stripe's documented test cards get vendor-faithful
+  outcomes on charge create / PaymentIntent confirm — `4242…4242` (and `pm_card_visa`/`tok_visa`)
+  succeed; `4000…0002`, `4000…9995`, `4000…0069`, `4000…0127`, `4000…0119` (and the matching
+  `pm_card_*`/`tok_*` tokens) return the real `card_error` envelope (HTTP 402) and leave a
+  confirmed PaymentIntent at `requires_payment_method`. Unknown cards succeed. See
+  `_card.declines-test-set-only` in `stripe-known-deviations.json`.
+- **Idempotency keys**: the `Idempotency-Key` header is honored on POST — a replay with the
+  same key returns the stored response without re-applying the write (`_idempotency.stored-per-root`).
+- **Events** (`stripe-events.ts`): fires Stripe `event` objects on write
+  (`payment_intent.succeeded`, `customer.subscription.created`, `invoice.paid`, …).
+- **Conformance** (`stripe-conformance.ts`): field name + type checked vs Stripe's
+  real OpenAPI (standing gate).
+- **UI mirror** (`stripe-mirror-ui.ts`): a Stripe-dashboard-style React app over the
+  twin's own REST API.
+
+## CLI
+
+```bash
+world-stripe serve [--read-only] [--port N] [--root DIR]
+world-stripe mirror [--port N] [--root DIR]
+world-stripe conformance [--fields FILE] [--root DIR]
+```
+
+`serve` defaults to `simulator` (the stack uses the twin as a writable Stripe).
+Point the real `stripe` SDK at it with `{ host, port, protocol: 'http' }`.
+
+## Four ways to use it
+
+1. **Mock SDK** — *zero edits (preferred):* `STRIPE_TWIN_URL=http://127.0.0.1:PORT node --require @volter/twin/inject your-app` redirects the real `stripe` SDK from `api.stripe.com` to the twin (`cookbook/zero-edit-inject`). For the browser too: `volter-twin proxy --target <app> --map stripe=http://127.0.0.1:PORT` (browser + backend share one twin). *Or* override directly: `new Stripe(key, { host: '127.0.0.1', port: PORT, protocol: 'http' })`.
+2. **API + CLI** — `world-stripe serve` (writable) + drive with `volter-twin status|plan|refs stripe`, then push.
+3. **Read-only** — `world-stripe serve --read-only`: unlimited local reads, no rate limits; writes refuse like Stripe (4xx).
+4. **UI mirror** — `world-stripe mirror` renders a Stripe-dashboard-style view of the twin's state.
+
+(See the repo's GETTING-STARTED → "Four ways to use a twin".)
+
+Stable on the twin rubric: fidelity, read/write/fork, sync, observability, event emission, and conformance are tracked with explicit coverage gaps.
+
+## Coverage
+
+Goal: **honest, explicitly tracked coverage of Stripe's core feature surface.** The only
+accepted carve-outs are the explicit **out-of-scope** items listed below. Anything not done
+or carved out is a gap to close.
+
+**Done** — core resources: **customers**, **charges**, **payment_intents** (+ confirm),
+**setup_intents** (+ confirm), **payment_methods** (+ detach), **subscriptions** (create/
+update/cancel), **prices**, **products**, **invoices** (+ finalize/pay/void), **invoiceitems**,
+**refunds**, **disputes** (+ update/close), **payouts** (+ cancel), **balance_transactions**,
+**balance** (synthesized from the ledger), **events** (Events API list/retrieve),
+**Checkout Sessions** (create/retrieve/list/`line_items`/expire + modeled completion that
+creates+links a payment_intent/subscription/setup_intent; `amount_total` computed from
+line_items), **Customer Portal** (`billing_portal` sessions + configurations create/retrieve/
+list/update), **Connect** (connected **accounts** create/retrieve/list/update/delete +
+`login_links`, and **transfers** platform→connected-account create/retrieve/list filtered by
+destination; a new account starts un-onboarded with charges/payouts disabled + a `requirements`
+hash), plus **ephemeral_keys**, **identity verification_sessions**, **file_links**
+(synthesized) and **coupons**/**promotion_codes** (retrieve/list, seed-only). Cursor pagination
+(`limit`/`starting_after`/`ending_before` + `has_more`); per-resource list filters; `expand[]`
+on the modeled paths; vendor-faithful **test-card declines** (`4242…` succeeds; documented
+decline PANs + `pm_card_*`/`tok_*` tokens return the real `card_error` 402); **idempotency keys**
+(`Idempotency-Key` replay, no re-write); **events/webhooks** (`stripe-events.ts`); spec
+**conformance** gate; **UI mirror** (rung-5 ✅, `client/stripe-mirror.tsx` + structure check);
+**connector** pull (customers + subscriptions) + push (create/update/cancel/confirm/detach/
+finalize/pay/void/close to the real REST surface).
+
+This cycle added: **ACH/SEPA micro-deposit verification** (`payment_intents`/`setup_intents`
+`/verify_microdeposits` — confirm with `pm_us_bank_account` → `requires_action` with a
+`verify_with_microdeposits` next_action, then the 32/45 amounts or `SM11AA` descriptor →
+`succeeded`), **Customer.list_payment_methods** (`/v1/customers/:id/payment_methods`),
+**subscription items** CRUD (create/retrieve/list/update/delete, kept in sync with the parent
+sub's `items` list), **subscriptions/invoices search**, **invoice line items**
+(`/lines` + `add_lines`/`update_lines`/`remove_lines` with recomputed totals), **invoice
+edge-action gating** (finalize/pay/mark_uncollectible/void state machine), **Tax transactions**
+(`create_from_calculation` + `create_reversal` with negated lines), **quote** cancel-from-draft/
+open lifecycle gates, **customer + subscription discount delete**, **promotion-code update**
+(active toggle), **charge fraud-marking** (`fraud_details[user_report]`), and the **Radar**
+family — **Reviews** (`/approve`), **Value Lists** (+ items), **Rules** — plus a **Radar
+dashboard screen** in the UI mirror.
+
+**Planned** (known-missing, will do) — **Issuing** (cardholders/cards/authorizations/
+transactions + test helpers), **Terminal** (readers/locations/connection tokens), **Treasury**
+(financial accounts), **Climate**, **Financial Connections**, **Entitlements**, **Billing**
+credit grants + usage alerts, **Connect** remaining surfaces (account sessions, connected-account
+payouts, top-ups, payout reverse), **Reporting/Sigma**, the legacy **Sources** API, and
+additional list endpoints/filters as needed. (See `stripe-capabilities.ts` for the full honest
+todo list — every entry not explicitly out-of-scope is a tracked gap.)
+
+**Out of scope** (deliberately not modeled, with reason) —
+- Pixel-rendering Stripe-**hosted** Checkout / Customer Portal *pages*: the hosted HTML is
+  Stripe's, not an API object — the twin models the **Session/API object + redirect `url`**
+  instead (now **Done**; the page pixels stay out of scope). See
+  `_checkout.hosted-page-pixels` in `stripe-known-deviations.json`.
+- Real **money settlement / bank movement** (proposed — pending owner approval): actually moving
+  funds is real-world infra, not the API — the payout/balance_transaction/balance *objects* and
+  their lifecycle are modeled.

package/client/stripe-mirror.css

@@ -0,0 +1,162 @@
+:root {
+  --bg: #f6f8fa; --panel: #fff; --ink: #1a1f36; --muted: #697386;
+  --line: #e3e8ee; --brand: #635bff; --ok-bg: #e3f6ec; --ok: #138c50;
+  --warn-bg: #fcf0e4; --warn: #b25e09; --bad-bg: #fce4e4; --bad: #c0392b;
+}
+* { box-sizing: border-box; }
+body { margin: 0; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
+.dash { height: 100vh; display: flex; flex-direction: column; }
+
+.topbar { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 56px; background: #0a2540; color: #fff; }
+.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
+.brand .dot { width: 14px; height: 14px; border-radius: 4px; background: var(--brand); }
+.brand .tag { font-size: 11px; font-weight: 600; background: rgba(255,255,255,.15); padding: 2px 8px; border-radius: 999px; }
+.topbar .search { flex: 1; max-width: 520px; background: rgba(255,255,255,.12); border: 0; color: #cdd6e4; padding: 7px 12px; border-radius: 7px; }
+.topbar .mode { margin-left: auto; font-size: 12px; font-weight: 600; color: #f6b73c; background: rgba(246,183,60,.15); padding: 4px 10px; border-radius: 999px; }
+
+.body { flex: 1; display: flex; min-height: 0; }
+.side { width: 220px; background: var(--panel); border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
+.side button { text-align: left; border: 0; background: none; padding: 8px 12px; border-radius: 7px; color: var(--ink); cursor: pointer; font-size: 14px; }
+.side button:hover { background: var(--bg); }
+.side button.active { background: #ecebff; color: var(--brand); font-weight: 600; }
+.side button { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.side .nav-count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 1px 7px; border-radius: 999px; }
+.side button.active .nav-count { background: #fff; color: var(--brand); }
+
+.content { flex: 1; min-width: 0; padding: 22px 26px; overflow: auto; }
+.content-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
+.content-head h2 { margin: 0; font-size: 22px; }
+.content-head .count { color: var(--muted); font-weight: 600; }
+.error { background: var(--warn-bg); color: var(--warn); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
+
+.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
+.list { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+.list-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
+.list-row:last-child { border-bottom: 0; }
+.list-row:hover { background: var(--bg); }
+.list-row.active { background: #f5f4ff; box-shadow: inset 3px 0 0 var(--brand); }
+.row-main { display: flex; flex-direction: column; min-width: 0; }
+.row-title { font-weight: 600; }
+.row-sub { color: var(--muted); font-size: 12px; }
+.empty { padding: 28px; text-align: center; color: var(--muted); }
+
+.detail { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; position: sticky; top: 0; }
+.detail.empty { color: var(--muted); }
+.detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
+.detail dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.detail .kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
+.detail dt { color: var(--muted); }
+.detail dd { margin: 0; word-break: break-word; }
+
+.pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #eef1f6; color: var(--muted); white-space: nowrap; text-transform: capitalize; }
+.pill.ok { background: var(--ok-bg); color: var(--ok); }
+.pill.warn { background: var(--warn-bg); color: var(--warn); }
+.pill.bad { background: var(--bad-bg); color: var(--bad); }
+.mono { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
+
+/* Nested-object rendering — replaces the old "[object Object]" */
+.detail-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
+.detail-block h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.nested { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
+.nested-line { display: flex; gap: 8px; align-items: baseline; }
+.nested-label { color: var(--muted); flex-shrink: 0; }
+.nested-label::after { content: ":"; }
+.nested-value { word-break: break-word; }
+
+/* Cross-reference links */
+.ref-inline { border: 0; background: none; padding: 0; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+.ref-inline:hover { color: #4b45cc; }
+.ref-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
+.ref-group:last-child { margin-bottom: 0; }
+.ref-group-label { font-size: 11px; font-weight: 600; color: var(--muted); width: 100%; }
+.ref-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 5px 10px; cursor: pointer; text-align: left; max-width: 100%; }
+.ref-chip:hover { border-color: var(--brand); background: #f5f4ff; }
+.ref-chip .ref-label { font-size: 12px; font-weight: 600; color: var(--ink); }
+.ref-chip .ref-id { color: var(--muted); }
+
+/* Test-card decline state — last_payment_error rendered as a prominent banner */
+.pay-error { display: flex; flex-direction: column; gap: 2px; background: var(--bad-bg); color: var(--bad); border: 1px solid #f3c2c2; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
+.pay-error-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
+.pay-error-text { font-size: 13px; }
+
+/* Account balance summary — available / pending buckets */
+.balance-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
+.balance-bucket { flex: 1; min-width: 120px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
+.balance-bucket.available { background: var(--ok-bg); border-color: #bfe6cf; }
+.balance-bucket-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.balance-bucket.available .balance-bucket-label { color: var(--ok); }
+.balance-bucket-amount { font-size: 16px; font-weight: 700; }
+
+/* Connect — connected-account enablement flags + outstanding requirements */
+.connect-panel { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
+.connect-flags { display: flex; gap: 10px; flex-wrap: wrap; }
+.connect-flag { flex: 1; min-width: 110px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--bg); }
+.connect-flag.ok { background: var(--ok-bg); border-color: #bfe6cf; }
+.connect-flag.warn { background: var(--warn-bg); border-color: #f0dca6; }
+.connect-flag-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.connect-flag.ok .connect-flag-label { color: var(--ok); }
+.connect-flag-state { font-size: 14px; font-weight: 700; }
+.connect-requirements { border: 1px solid #f0dca6; background: var(--warn-bg); border-radius: 8px; padding: 10px 12px; }
+.connect-req-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); }
+.connect-req-list { margin: 6px 0 0; padding-left: 18px; }
+.connect-req-item { font-size: 12px; }
+
+/* Product image thumbnails — actual <img> previews, not URL text */
+.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
+.thumb { display: block; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
+.thumb:hover { border-color: var(--brand); }
+.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* Detail action bar — lifecycle verbs (Capture / Cancel) on a resource detail */
+.detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
+.action-btn { border: 1px solid var(--line); border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--bg); }
+.action-btn:hover:not(:disabled) { border-color: var(--brand); }
+.action-btn:disabled { opacity: .5; cursor: default; }
+.action-capture { background: var(--brand); color: #fff; border-color: var(--brand); }
+.action-cancel { color: var(--bad, #c0392b); }
+.action-error { font-size: 12px; color: var(--bad, #c0392b); }
+
+/* Home / overview screen — top-line metric cards + recent payments */
+.home-screen { display: flex; flex-direction: column; gap: 24px; }
+.home-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
+.metric-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
+.metric-label { font-size: 12px; color: var(--muted, #687385); text-transform: uppercase; letter-spacing: .04em; }
+.metric-value { font-size: 22px; font-weight: 700; }
+.home-recent { display: flex; flex-direction: column; gap: 4px; }
+.home-recent h3 { margin: 0 0 8px; font-size: 14px; }
+.home-recent-row { display: flex; gap: 12px; align-items: center; border: none; background: transparent; padding: 8px 4px; cursor: pointer; text-align: left; border-bottom: 1px solid var(--line); }
+.home-recent-row:hover { background: var(--hover, #f6f8fa); }
+
+/* Command bar (Cmd-K global search) */
+.cmdk-overlay { position: fixed; inset: 0; background: rgba(20,25,35,.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 50; }
+.cmdk { width: min(560px, 92vw); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
+.cmdk-input { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--line); padding: 16px 18px; font-size: 16px; outline: none; }
+.cmdk-results { max-height: 50vh; overflow-y: auto; }
+.cmdk-hit { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: none; background: transparent; padding: 10px 18px; cursor: pointer; border-bottom: 1px solid var(--line); }
+.cmdk-hit:hover { background: var(--hover, #f6f8fa); }
+.cmdk-hit-label { font-weight: 600; font-size: 14px; }
+.cmdk-hit-sub { font-size: 12px; color: var(--muted, #687385); }
+.cmdk-empty { padding: 18px; color: var(--muted, #687385); font-size: 14px; }
+.search-trigger { text-align: left; color: var(--muted, #687385); cursor: pointer; }
+.kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 11px; }
+
+/* Settings screen */
+.settings-screen { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
+.settings-block { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
+.settings-block h3 { margin: 0 0 12px; font-size: 15px; }
+.api-key-row, .webhook-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
+.api-key-label, .webhook-url { font-size: 13px; }
+.settings-payout-schedule { font-weight: 600; }
+
+/* Create / edit modal (write forms) */
+.create-overlay { position: fixed; inset: 0; background: rgba(20,25,35,.4); display: flex; align-items: center; justify-content: center; z-index: 50; }
+.create-modal { width: min(440px, 92vw); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; }
+.create-title { margin: 0; font-size: 16px; }
+.create-field { display: flex; flex-direction: column; gap: 4px; }
+.create-field-label { font-size: 12px; color: var(--muted, #687385); }
+.create-field-input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
+.create-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+.create-cancel, .create-submit { border: 1px solid var(--line); border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--bg); }
+.create-submit { background: var(--brand); color: #fff; border-color: var(--brand); }
+.create-error { font-size: 12px; color: var(--bad, #c0392b); }
+.create-trigger { margin-left: auto; border: 1px solid var(--brand); color: var(--brand); border-radius: 8px; padding: 5px 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--bg); }