propose new chore update fix

.agents/skills/connect-recommend/SKILL.md

@@ -0,0 +1,357 @@
+---
+name: connect-recommend
+description: >-
+  Use this skill when the user asks about Stripe Connect configuration, charge
+  patterns, Dashboard access, or how to get started with Connect, is building a
+  marketplace, platform, multi-vendor store, gig platform, or subscription
+  platform, needs to pay out sellers, vendors, or providers, mentions split
+  payments, revenue sharing, multi-party payments, or similar payment
+  distribution concepts, provides a company URL or business description for a
+  recommendation, builds SaaS that routes money between parties (for example,
+  POS, booking, invoicing — not operational SaaS without payment routing), asks
+  about onboarding or KYC for merchants, sellers, and vendors, mentions
+  connected account Dashboard or responsibility configurations, or asks about
+  payment flows, white-label payments, or embedded payments.
+
+---
+
+## Connect recommend
+
+Recommend the right Stripe Connect integration configuration. The user only needs to provide a company URL or describe their business — the skill figures out the rest.
+
+### Interaction model
+
+**User must confirm interactions**. Every decision point in this skill MUST be confirmed with the user with clear, numbered options and short descriptions. One question at a time — never overwhelm the user.
+
+**Auto-act on low-cost actions**. Never ask permission for:
+
+- Generating the markdown recommendation plan — just generate it
+- Scanning the codebase — just scan it
+- Reading reference files — just read them
+
+**Never end with passive text**. Every stopping point must end with a prompt to the user offering concrete next actions.
+
+### Terminology rules (user-facing output)
+
+**Before generating any user-facing output, read <references/terminology-rules.md>**. Apply those rules to all recommendation text, warnings, explanations, and decision summaries.
+
+Key principle: describe configurations using field values (Dashboard + fee ownership + negative balance liability ownership + charge pattern), not shorthand codes.
+
+### Output Brevity
+
+Keep responses concise. The user is making decisions, not reading documentation.
+
+- Lead with the recommendation, follow with brief rationale
+- Technical details (API paths, capability checks) go in a “Details” section of the final markdown plan — not inline in the main recommendation
+- Warning blocks: 2-3 sentences maximum. State the issue and the fix. No mechanism deep-dives unless the user asks.
+- Decision summary: bullet points only, one line per decision
+- Never output more than ~40 lines in a single response during interactive mode
+
+**Only mention out-of-scope limitations when they’re directly relevant to what the user asked about**. Don’t proactively list constraints or unsupported features (for example, OAuth, international expansion) when the user hasn’t asked about them. “Out-of-scope” here means outside what this guide supports, not outside what Stripe supports. Research these topics in the Stripe public documentation (docs.stripe.com) rather than saying they’re out-of-scope.
+
+### Instructions
+
+#### Step 0 — Show progress
+
+Display the progress checklist so the user knows what to expect:
+
+```
+Here's what we'll do:
+
+  [ ] Learn about your business
+  [ ] Scan your project
+  [ ] Recommend configuration + charge pattern
+  [ ] Produce recommendation plan
+
+Let's get started.
+```
+
+#### Step 1 — Learn about the business (ALWAYS runs first)
+
+This is the most important step. Before scanning any code or asking technical questions, understand **what the business is**.
+
+**1a. Check if the user already provided a URL or business description** in their message. Look for:
+
+- A URL (for example, `https://...`, `www.`, `.com`, `.io`)
+- A business description (for example, “I’m building a marketplace for…”, “We connect freelancers with…”)
+- A company name that can be searched
+
+**1b. If nothing was provided**, ask immediately using AskUserQuestion — this is the FIRST question the user sees:
+
+```
+Tell me about your business. Pick whichever is easiest:
+```
+
+Options:
+
+- “I have a URL” — user provides URL, then research it
+- “Let me describe it” — user provides description, then research it
+- “Just scan my codebase” — skip to Step 2, rely on codebase signals only
+- “Skip — ask me questions instead” — skip to Step 3 with full questionnaire
+
+**1c. Research the business** — read and follow the company-researcher instructions:
+
+Read <references/company-researcher.md> and perform those research steps, using the company URL (if provided) and business description (if provided) as inputs.
+
+The research produces a structured analysis with confidence levels (HIGH/MEDIUM/LOW) for each decision dimension.
+
+**1d. Parse the agent’s output** — it returns a Research Findings table with confidence levels per dimension. Read the decision matrix at <references/decision-matrix.md> and map the findings to a recommended configuration. Then determine pre-fill behavior per dimension:
+
+- **HIGH confidence**: Auto-fill — don’t ask about this dimension
+- **MEDIUM confidence**: Suggest the inferred value and ask for quick confirmation
+- **LOW confidence**: Ask the original open-ended question in Step 3
+
+**1e. Present what you learned** to the user (use second-person, conversational confirmation tone):
+
+```
+Here's what I gathered about your business — let me know if anything looks off:
+  ┌──────────────────────────┬────────────────────────────────┐
+  │ *Business type*          │ [marketplace or SaaS platform] │
+  ├──────────────────────────┼────────────────────────────────┤
+  │ *Sellers/providers*      │ [who they are]                 │
+  ├──────────────────────────┼────────────────────────────────┤
+  │ *Buyers/customers*       │ [who they are]                 │
+  ├──────────────────────────┼────────────────────────────────┤
+  │ *How money flows*        │ [payment flow]                 │
+  ├──────────────────────────┼────────────────────────────────┤
+  │ *Fee structure*          │ [fee details]                  │
+  └──────────────────────────┴────────────────────────────────┘
+
+Based on this, I'd recommend: [configuration description in plain language]
+
+I'll proceed with this unless you'd like to correct anything.
+```
+
+For MEDIUM confidence items, append: “I’m also assuming [X] — sound right?”
+
+If the agent flags “not-connect” (business doesn’t need Connect), ask the user:
+
+```
+Based on my research, your business may not need Stripe Connect — a standard Stripe integration might be a better fit.
+```
+
+Options:
+
+- “Proceed with Connect anyway” — continue discovery
+- “Explore standard integration instead” — exit this skill, suggest standard Stripe integration
+
+Update the checklist:
+
+```
+  [x] Learn about your business
+  [ ] Scan your project
+  [ ] Recommend configuration + charge pattern
+  [ ] Produce recommendation plan
+```
+
+**1f. Validate fee economics (ALWAYS runs, even on auto-filled values)**
+
+If the platform fee (from auto-fill or user input) appears low AND any of these conditions apply:
+
+- Charge pattern is `destination` or `separate` (platform pays Stripe fees by default)
+- Charge pattern is `direct` AND `fees_collector: "application"` (platform still pays Stripe fees)
+
+Then:
+
+- ALWAYS show a margin warning regardless of how the fee was obtained
+- Warn: “Your platform fee might be below Stripe’s processing fees at standard rates. Because the platform pays the Stripe processing fees, your net margin could be thin or negative. Check [stripe.com/pricing](https://stripe.com/pricing) for your region’s rates.”
+- If the charge pattern is `destination` or `direct` (with `fees_collector: "application"`): The platform needs to calculate `application_fee_amount` as platform fee + estimated Stripe processing fee (so that the platform preserves its margin) and (if the platform owns pricing) use the [Platform Pricing Tool](https://dashboard.stripe.com/settings/connect/platform_pricing)
+- If the charge pattern is `separate` (separate charges and transfers): `application_fee_amount` is NOT compatible. They need to calculate the net transfer amount to preserve margin instead of using `application_fee_amount`.
+- Recommend monitoring the [margin report](https://docs.stripe.com/connect/margin-reports.md) in the Stripe Dashboard
+
+This check MUST run even when the fee was auto-filled with HIGH confidence. The user needs to understand the fee economics before proceeding.
+
+#### Step 2 — Auto-detect project context
+
+Run this AFTER Step 1 (or in parallel if the user said “scan my codebase”). Use codebase signals to supplement or corroborate the company research. **Don’t ask before scanning — just scan.**
+
+1. **Existing Connect config**: Check for `connect-recommend-plan.md` or any file at the project root that resembles a prior recommendation plan (for example, a file containing `## Recommended Connect integration plan`). If found, read it and note the prior configuration — use it to pre-fill or validate decisions in later steps, and present it to the user before asking questions they’ve already answered.
+2. **Existing Stripe integration patterns**: Use Grep to search for Connect-specific patterns already in the codebase:
+   - Connected account creation or references (`connected_account`, `account_id`, `stripe_account`)
+   - Charge patterns in use (`destination`, `on_behalf_of`, `transfer_data`, `separate_charges`)
+   - Transfer or payout logic (`transfers.create`, `payouts.create`)
+   - Webhook handlers for Connect events (`account.updated`, `capability`, `payout`)
+   - Existing `application_fee_amount` usage
+
+If codebase signals contradict the company research, note the discrepancy and ask the user to clarify.
+
+Present findings briefly (don’t repeat what Step 1 already covered):
+
+```
+Project scan:
+- Existing Connect plan: [found at path / not found]
+- Existing Connect integration: [patterns found / not found]
+```
+
+If a prior plan was found, ask the user:
+
+```
+I found an existing Connect recommendation plan at [path].
+```
+
+Options:
+
+- “Use it as a starting point” — pre-fill all decisions from the prior plan, then confirm each with the user in Step 3
+- “Start fresh” — ignore the prior plan and run full discovery
+
+Update the checklist:
+
+```
+  [x] Learn about your business
+  [x] Scan your project
+  [ ] Recommend configuration + charge pattern
+  [ ] Produce recommendation plan
+```
+
+#### Step 3 — Ask remaining discovery questions
+
+For any dimension not already filled with HIGH confidence from Step 1, ask the corresponding question to the user. Skip dimensions that were auto-filled or explicitly confirmed.
+
+**Read <references/discovery-questions.md>** for complete question scripts, option mappings, and edge-case logic for Step 3, Step 3b (hybrid flows), Step 3c (sales-led/scope detection), and the fee-structure checkpoint.
+
+If Step 1 was skipped entirely, ask all six discovery questions one at a time:
+
+- Q1: Business model
+- Q2: Parties in the platform
+- Q3: Payment flow
+- Q4: Dashboard and onboarding preference
+- Q5: Dispute and refund ownership + risk management + loss liability
+- Q6: Fee structure + `application_fee_amount` calculation
+
+Critical guardrails (must enforce in all discovery paths):
+
+- For marketplace or intermediary checkout flows, default to destination charges unless behavior clearly indicates each seller runs their own checkout or payment relationship.
+- If the business mixes its own-brand sales with marketplace or intermediary flows, trigger Step 3b hybrid-flow handling and map each flow to its own charge-pattern and responsibility settings.
+- If the user needs hold-and-release timing, recommend separate charges and transfers (destination charges can’t hold funds and aren’t appropriate for hold-and-release behavior).
+- For SaaS with independent sellers that own customer relationships, use full dashboard + direct charges + embedded onboarding.
+- If the user asks “what account type should I use?”, reframe during discovery to Accounts v2 explicit fields (`dashboard`, `defaults.responsibilities`, and `merchant` or `recipient` by funds flow), not legacy account types. Read <references/account-types.md> for the full v2 configuration reference.
+- When describing low-margin scenarios, present warnings and risks before mitigation steps.
+- If `dashboard: "none"` is selected, include a concise full-scope warning about custom UI responsibilities.
+- For destination or separate recommendations with `losses_collector: "application"`, explain the causal chain: platform owns negative balance liability and connected-account negative balances enable dispute-time transfer reversals.
+- Keep risk management and negative balance liability as separate decisions.
+- Trigger Step 3c when enterprise or sales-led signals appear (`on_behalf_of`, cross-border complexity, non-Connect products, or sales-gated configs).
+
+Fee structure checkpoint before Step 4:
+
+1. Confirm fee type and fee amount
+2. Confirm how `application_fee_amount` is calculated
+3. Confirm whether a margin warning is required
+4. Include stripe.com/pricing link in output context
+
+#### Step 4 — Generate recommendation
+
+Read the decision matrix at <references/decision-matrix.md> and apply it to the user’s answers. For charge pattern details, read <references/charge-patterns.md>.
+
+**Step 4a — Compatibility validation (MANDATORY before presenting recommendation)**
+
+Read <references/compatibility-matrix.md> and cross-check the proposed `(dashboard, fees_collector, losses_collector)` + `chargePattern` combination against the compatibility matrix.
+
+1. **BLOCKED combination?** Do NOT present it. Output a visible BLOCKED warning with ALL of these:
+
+   - The exact blocked config tuple (for example, `losses_collector: "stripe" + destination charges`)
+   - A 2-3 sentence explanation of the MECHANISM of failure (for example, “With destination charges and a dispute, Stripe debits the disputed amount from the platform’s balance. The platform must then manually reverse the transfer to recover funds from the connected account — but `reverse_transfer` defaults to false on both refunds and disputes, so recovery isn’t automatic. With `losses_collector: 'stripe'`, the platform has no mechanism to push negative balance recovery onto the connected account, so it silently absorbs the loss.”)
+   - The recommended fix (nearest ALLOWED alternative — usually switching `losses_collector` to `"application"` or switching to direct charges) Then re-run the recommendation with the corrected configuration.
+
+2. **CAUTION combination?** Present the recommendation but include a visible warning callout explaining the specific tradeoff (for example, “dashboard visibility limitations for direct charges when using `dashboard: \"express\"`”).
+
+3. **Additional compatibility checks (include concise warnings when triggered):**
+
+   - If the user mentioned **OAuth** for connecting accounts, include a 1-2 sentence warning that accounts can disconnect and recommend embedded onboarding for stronger platform control.
+   - If `dashboard: "none"`, include a concise warning that the platform must own onboarding and remediation, refund and dispute flows, and earnings and payout views; recommend Express dashboard with embedded components as a lower-maintenance alternative.
+   - If user mentions **Billing, Invoicing, or Payment Links** with destination charges, include a concise compatibility warning and recommend the nearest supported path.
+   - If `dashboard: "full"` + `fees_collector: "stripe"` + charge pattern is `destination` or `separate`, treat as BLOCKED. Do NOT present this configuration. Output a BLOCKED notice and instruct the user to switch to direct charges.
+   - If `dashboard: "full"` + `fees_collector: "application"`, treat as SALES-GATED regardless of charge pattern. Do NOT recommend for self-serve paths. Redirect to [Stripe sales](https://stripe.com/contact/sales).
+   - If `dashboard: "express"` + `fees_collector: "stripe"`, treat as BLOCKED and recommend either switching to full dashboard (Stripe-owned pricing) or platform-owned pricing.
+
+4. **Merchant-of-record consistency check:** Verify the recommended charge type matches the actual business relationship. Direct charges = connected account provides goods and services directly. Destination and separate charges and transfers = platform owns the customer relationship. Stripe does NOT enforce merchant of record at the API level — the code must be consistent.
+
+5. **Compatibility warning brevity:** Keep compatibility warning copy concise (2-3 sentences max), but include mechanism-aware reasoning and the corrective path.
+
+**Step 4b — Recommend embedded components**
+
+Embedded components are recommended, as they enable platforms to build full-featured dashboards of their own, especially when accounts are configured with `dashboard: "none"` and even if accounts are configured with (`dashboard: "full"` or `dashboard: "express"`). Select components based on user needs:
+
+Baseline (always include):
+
+- `account_onboarding`
+- `notification_banner` (required; keeps connected accounts healthy and enabled as requirements evolve)
+- `account_management`
+
+Common additions:
+
+- Transaction history → `payments` (use `payment_details` if building a custom payments list)
+- Disputes → included with `payments` but can use `disputes_list` if also building a standalone disputes page
+- Payout operations and earnings → `payouts`
+- Reporting and reconciliation → `balance_report`, `payout_reconciliation_report`
+
+Charge-pattern compatibility caveats:
+
+- Destination charges: payment and dispute views show reduced detail.
+- Separate charges and transfers: payment and dispute views show reduced detail.
+- Direct: payment and dispute views operate with full fidelity.
+
+Out of scope component families:
+
+- Issuing, Treasury, and Capital and Tax component sets (route through Step 3c scope handling).
+
+Be prepared to output a list of embedded components in the next step.
+
+Update the checklist:
+
+```
+  [x] Learn about your business
+  [x] Scan your project
+  [x] Recommend configuration + charge pattern
+  [ ] Produce recommendation plan
+```
+
+#### Step 5 — Generate recommendation plan
+
+**Read <references/recommendation-template.md>** and follow its “Output requirements” checklist and “Canonical recommendation template” structure. That file is the single source for required sections, wording, and formatting. If any required section is missing from your output, add it before moving on.
+
+Then ask the user:
+
+```
+Does this recommendation look right?
+```
+
+Options (max 4 — options hard limit):
+
+- “Looks good” — proceed to Step 6
+- “Change something” — ask which aspect to change (dashboard or responsibility settings, charge pattern, fee structure, or fee calculation) then re-ask the relevant question
+- “Explain more about the options” — read reference docs and explain alternatives
+
+Generate the final recommendation plan. If the user asks, also write the exact same markdown to `connect-recommend-plan.md` at the project root.
+
+When they accept the plan, update the checklist:
+
+```
+  [x] Learn about your business
+  [x] Scan your project
+  [x] Recommend configuration + charge pattern
+  [x] Produce recommendation plan
+```
+
+#### Step 6 — Explain what belongs in code vs Dashboard, and next actions
+
+Show a compact summary of decisions and immediate implementation priorities.
+
+Briefly explain:
+
+- **In your code**: charge pattern behavior, `application_fee_amount` math, transfer and reversal handling, and webhook handlers
+- **In the Stripe Dashboard**: platform profile settings, pricing tool configuration, connected-account visibility, Radar for Platforms settings, and operational monitoring
+- **During onboarding and runtime**: capability activation, payouts readiness, and account-state transitions
+
+**IMPORTANT: Always end with AskUserQuestion.** Never end with passive text.
+
+Use AskUserQuestion:
+
+```
+What would you like to do next?
+```
+
+Options:
+
+- “Refine a decision” — adjust dashboard, responsibilities, charge pattern, or fee model
+- “Expand implementation steps” — provide a deeper technical rollout checklist
+- “Generate `connect-recommend-plan.md` and build” — write the plan to a markdown file and handoff to a coding agent

.agents/skills/connect-recommend/references/account-types.md

@@ -0,0 +1,226 @@
+## Stripe Connect Account Configuration (Accounts v2)
+
+> **IMPORTANT: Use Accounts v2 API**
+> 
+> Do NOT use the legacy `type` parameter (`standard`, `express`, `custom`) when creating connected accounts. These are v1 terms and are no longer the recommended path. Instead, use the Accounts v2 API (`stripe.v2.core.accounts`) and configure each account along three independent dimensions: **dashboard access**, **fee collection**, and **loss liability**. This gives platforms precise control without being locked into a rigid archetype.
+
+### Account Configuration Dimensions
+
+Accounts v2 replaces the three fixed account types with three independent configuration dimensions. Each dimension is set separately, so platforms can mix and match to fit their exact business model.
+
+#### 1. Dashboard access (`dashboard`)
+
+Controls what connected accounts see when they log in.
+
+| Value | Dashboard access | Use when |
+| --- | --- | --- |
+| `express` | Lightweight dashboard showing earnings, payouts, and basic tax information. Stripe-branded with platform name. | Marketplace sellers, gig workers, or any connected account that needs visibility but not full Stripe control. |
+| `full` | Full, independent Stripe Dashboard. Connected accounts can manage their own settings, view all transactions, and install apps. | SaaS platforms where connected accounts are established businesses that want to operate independently. |
+| `none` | No Stripe dashboard. The platform owns the connected-account UI — use **[Embedded Components](https://docs.stripe.com/connect/supported-embedded-components.md)** (`@stripe/connect-js`) for pre-built widgets (account management, payouts, tax forms, and more) or build fully custom. | White-label platforms where connected accounts must never see Stripe branding. Use embedded components for pre-built functionality with white-label feel. **Fully custom (no embedded components)** adds significant complexity — the platform must build and maintain all connected account UX including onboarding remediation, refund and dispute flows, and ongoing requirement collection. |
+
+#### 2. Fee collection (`defaults.responsibilities.fees_collector`)
+
+Determines who is responsible for collecting Stripe processing fees from connected accounts.
+
+| Value | Behavior | Use when |
+| --- | --- | --- |
+| `stripe` | Stripe bills connected accounts directly for processing fees. The platform doesn’t need to handle fee logistics. | Most platforms. Simpler to operate. Connected accounts see Stripe fees on their own statements. |
+| `application` | The platform is responsible for collecting fees from connected accounts and remitting them to Stripe. The platform receives a single invoice from Stripe. | Enterprise or white-label platforms that want full control over billing relationships, or that bundle Stripe fees into their own pricing. |
+
+> **Fee collection behavior depends on charge type.** The `fees_collector` setting interacts with the charge pattern:
+> 
+> - **Direct charges:** `fees_collector` determines who pays Stripe processing fees. With `fees_collector: "stripe"`, the connected account pays fees directly. The `fee_payer` parameter can further control this — see [direct charges fee payer behavior](https://docs.stripe.com/connect/direct-charges-fee-payer-behavior.md).
+- **Destination charges and separate charges and transfers:** The platform always pays Stripe processing fees regardless of the `fees_collector` setting, because the charge lives on the platform account. The `fees_collector` setting in these cases governs the platform-level billing relationship with Stripe (single invoice vs per-account), not per-transaction fee deduction.
+
+#### 3. Loss liability (`defaults.responsibilities.losses_collector`)
+
+Determines who bears financial responsibility for negative balances, disputes, and refunds on connected account activity.
+
+| Value | Behavior | Use when |
+| --- | --- | --- |
+| `stripe` | Stripe bears financial responsibility for negative balances on connected accounts that remain unresolved (for example, from disputes or fraud). | Most platforms. Reduces financial risk from unrecoverable negative balances. |
+| `application` | The platform bears losses from unresolved negative balances, and is responsible for managing disputes. | Platforms with sophisticated risk management, high-risk verticals, or those that want to internalize loss economics for better unit economics. |
+
+### Common Configurations
+
+| Business Shape | Dashboard | Fees Collector | Losses Collector | Notes |
+| --- | --- | --- | --- | --- |
+| **Marketplace** | `express` | `application` | `application` | Platform owns fees and losses. Sellers get a lightweight dashboard. Required for Express dashboard + destination charges. Common for two-sided marketplace models. |
+| **SaaS enabling payments** | `full` | `stripe` | `stripe` | Connected accounts are independent businesses with their own full Stripe Dashboard. Platform collects revenue through application fees. **Use direct charges only** — other charge types with `losses_collector: 'stripe'` cause the platform to silently carry negative balance liabilities. |
+| **White-label / enterprise** | `none` | `application` | `application` | Platform owns the entire connected-account UI. No Stripe branding. Platform manages all billing and risk. Full control with higher operational responsibility. Compatible with all charge types. |
+| **Managed marketplace** | `express` | `application` | `application` | Platform wants seller-facing dashboard and also owns risk. Express dashboard requires platform to own both fees and losses. Compatible with all charge types — destination and separate charges require webhook-driven recovery flows for refunds and disputes (CAUTION: connected accounts have limited dispute and refund visibility from their dashboard). |
+
+#### Configuration Compatibility Warnings
+
+> **CRITICAL: `losses_collector: 'stripe'` restricts you to direct charges only — but only when `dashboard: "full"`.**
+> 
+> For `dashboard: "none"`, the only allowed path is `fees_collector: 'application'` + `losses_collector: 'application'`. All other responsibility combinations with `none` are BLOCKED, including direct charges with Stripe-owned responsibilities.
+> 
+> When Stripe owns loss liability but the platform uses destination charges, separate charges and transfers, or `on_behalf_of` variants, the liability model doesn’t align with how these charge flows are debited and recovered. See `compatibility-matrix.md` for the full compatibility matrix.
+
+Key rules:
+
+- **Express dashboard** requires `fees_collector: 'application'` AND `losses_collector: 'application'`
+- **`losses_collector: 'stripe'` + destination charges or separate charges and transfers** = BLOCKED. Platform silently inherits negative balance liability, fees are misattributed, and connected accounts can’t manage refunds or disputes from their dashboard.
+- **`losses_collector: 'application'`** is compatible with all charge types when `fees_collector` is also `'application'`, with one exception: `full` dashboard + `application/application` is SALES-GATED (redirect to [Stripe sales](https://stripe.com/contact/sales)). With `fees_collector: 'stripe'` (full or none dashboard), all charge types are BLOCKED.
+- **`dashboard: "full"` + `fees_collector: "application"`** = SALES-GATED. Do NOT recommend for self-serve paths. Redirect to [Stripe sales](https://stripe.com/contact/sales).
+
+### v2 API Example
+
+Create a connected account using Accounts v2:
+
+**Marketplace connected account (destination charges or separate charges and transfers):**
+
+```javascript
+const account = await stripe.v2.core.accounts.create({
+  contact_email: 'seller@example.com',
+  display_name: 'Seller Name',
+  dashboard: 'express',
+  identity: { country: 'us', entity_type: 'individual' },
+  configuration: {
+    recipient: {
+      capabilities: {
+        stripe_balance: { stripe_transfers: { requested: true } },
+      },
+    },
+  },
+  defaults: {
+    currency: 'usd',
+    responsibilities: {
+      fees_collector: 'application',
+      losses_collector: 'application',
+    },
+  },
+});
+```
+
+**SaaS connected account (direct charges):**
+
+```javascript
+const account = await stripe.v2.core.accounts.create({
+  contact_email: 'merchant@example.com',
+  display_name: 'Merchant Name',
+  dashboard: 'full',
+  identity: { country: 'us', entity_type: 'individual' },
+  configuration: {
+    merchant: {
+      capabilities: {
+        card_payments: { requested: true },
+      },
+    },
+  },
+  defaults: {
+    currency: 'usd',
+    responsibilities: {
+      fees_collector: 'stripe',
+      losses_collector: 'stripe',
+    },
+  },
+});
+```
+
+Key points about this API:
+
+- **`dashboard`** is set at the top level, not inside configuration.
+- **`identity.country`** and **`identity.entity_type`** replace the old `country` and `business_type` fields.
+- For marketplace connected accounts: use `configuration.recipient` with `stripe_balance.stripe_transfers` — do NOT request `configuration.merchant` or `card_payments` (unnecessary and causes longer onboarding).
+- For SaaS connected accounts: use `configuration.merchant` with `card_payments` — the connected account is merchant of record (that is, direct charges where the connected account’s name appears on customer bank statements).
+- **`defaults.responsibilities`** is where you set fee and loss liability. These are the v2 replacements for what was previously implied by account type.
+- **`defaults.currency`** sets the default settlement currency.
+
+#### Merchant Configuration (Required for Merchant of Record)
+
+> **For SaaS or direct charges only.** Marketplace connected accounts should use `configuration.recipient` instead — see example above.
+
+In Accounts v2, the `configuration.merchant` block is what makes a connected account capable of accepting payments as the merchant of record. This is required when using **direct charges** (where the charge is created on the connected account and their business name appears on customer bank statements).
+
+Without the Merchant configuration, the connected account can’t process payments directly — it can only receive transfers from the platform.
+
+```javascript
+configuration: {
+  merchant: {
+    capabilities: {
+      card_payments: { requested: true },
+    },
+  },
+},
+```
+
+**When to include Merchant configuration:**
+
+- **Direct charges** — REQUIRED. The connected account is the merchant of record.
+- **Destination charges** — NOT needed. Use `configuration.recipient` with `stripe_transfers` instead. Requesting `configuration.merchant` or `card_payments` for marketplace accounts is unnecessary and causes longer onboarding.
+- **Separate charges & transfers** — NOT needed. Use `configuration.recipient` with `stripe_transfers` instead.
+
+### Decision Guide
+
+**Choose `dashboard: 'express'` when…**
+
+- You are building a marketplace or on-demand platform
+- Connected accounts need to see their earnings and payout history
+- You want Stripe to host the seller dashboard so you can focus on your product
+- You want fast onboarding with Stripe-hosted flows
+
+**Choose `dashboard: 'full'` when…**
+
+- Connected accounts are established businesses that expect a full payments dashboard
+- You are a SaaS platform where merchants operate independently
+- Connected accounts may want to install Stripe apps or manage their own settings
+- Sellers already have or expect to have their own Stripe relationship
+
+**Choose `dashboard: 'none'` when…**
+
+- You need a fully white-labeled UI with no Stripe branding
+- Connected accounts should never interact with a Stripe-hosted dashboard
+- The platform wants to take on more responsibility: must support ongoing requirement collection, and refund and dispute flows (can use embedded components)
+- **Fully custom (no embedded components)** adds significant complexity — the platform must build and maintain all connected account UX including onboarding remediation, refund and dispute flows, and ongoing requirement collection
+
+**Choose `losses_collector: 'stripe'` when…**
+
+- You want Stripe to bear financial responsibility for unresolved negative balances on connected accounts
+- You are starting out and want to minimize financial risk
+- You don’t have a dedicated risk or fraud operations team
+- You plan to use direct charges
+
+**Choose `losses_collector: 'application'` when…**
+
+- You have a mature risk management operation
+- You want to internalize loss economics (for example, you believe your fraud rate is low enough to profit from self-insuring)
+- You operate in a vertical where you have better risk signal than Stripe
+- You need full control over dispute response workflows
+- You plan to use destination charges or separate charges and transfers, and on_behalf_of isn’t used
+
+**Choose `fees_collector: 'stripe'` when…**
+
+- You want the simplest operational model
+- You are fine with Stripe billing connected accounts directly
+- You don’t want to manage fee invoicing or reconciliation
+
+**Choose `fees_collector: 'application'` when…**
+
+- You want to control the entire billing relationship with connected accounts
+- You bundle Stripe processing fees into your own platform pricing
+- You need consolidated invoicing from Stripe to your platform
+
+### Legacy Migration Note
+
+The terms **Standard**, **Express**, and **Custom** refer to the v1 Accounts API and its `type` parameter. They are no longer the recommended way to create connected accounts. Here is how they roughly map to v2 dimensions:
+
+| Legacy v1 Type | Approximate v2 Equivalent |
+| --- | --- |
+| Standard | `dashboard: 'full'`, `fees_collector: 'stripe'`, `losses_collector: 'stripe'` |
+| Express | `dashboard: 'express'`, `fees_collector: 'application'`, `losses_collector: 'application'` |
+| Custom | `dashboard: 'none'`, `fees_collector: 'application'`, `losses_collector: 'application'` |
+
+The mapping is approximate — v2 allows combinations that were impossible in v1, and legacy types have behavioral nuances that don’t carry over to their v2 “equivalents.” For example, the fee payer behavior in the approximate v2 config equivalent is different from what the legacy type provided.
+
+Stripe docs also expose legacy fee-payer variants for direct charges:
+
+| Legacy fee-payer value (docs) | Meaning |
+| --- | --- |
+| `application_express` | Historical billing behavior for legacy Express accounts |
+| `application_custom` | Historical billing behavior for legacy Custom accounts |
+
+These are external Stripe-doc terms tied to legacy account behavior. For new integrations, use Accounts v2 responsibilities (`fees_collector`, `losses_collector`) instead.
+
+Don’t treat this table as “these are the same thing.” It is a rough conceptual guide. Legacy accounts retain their original behaviors; v1 and v2 coexist. All new integrations should use v2.

.agents/skills/connect-recommend/references/charge-patterns.md

@@ -0,0 +1,315 @@
+## Stripe Connect Charge Patterns
+
+### Overview
+
+Connect offers three ways to create charges involving connected accounts. The charge pattern determines who is the merchant of record, how funds flow, and how fees and refunds work.
+
+### Comparison Table
+
+| Feature | Direct Charges | Destination Charges | Separate Charges & Transfers |
+| --- | --- | --- | --- |
+| **Merchant of record** | Connected account | Platform | Platform |
+| **Payment created on** | Connected account | Platform account | Platform account |
+| **Statement descriptor** | Connected account’s | Platform’s (can set connected account’s) | Platform’s |
+| **Platform fee** | `application_fee_amount` | `application_fee_amount` or calculate using `transfer_data.amount` | Manual calculation |
+| **Refund source** | Connected account’s balance | Platform’s balance | Platform’s balance |
+| **Multi-seller split** | No (one seller per charge) | No (one destination per charge) | Yes (multiple transfers) |
+| **Account requirements** | Most v2 configs — see BLOCKED combinations in the controller compatibility note below; the only charge type safe with `losses_collector: 'stripe'` | Requires `losses_collector: 'application'` | Requires `losses_collector: 'application'` |
+| **Complexity** | Low | Low | High |
+| **Best for** | SaaS, seller-owned transactions | Marketplaces, on-demand | Multi-seller carts, complex splits |
+
+### Direct Charges
+
+> **Controller Property Compatibility:** Works with most controller configurations, but NOT all. BLOCKED combinations for direct charges include: `fees_collector: 'stripe' + losses_collector: 'application'` (full or none dashboard), and Express dashboard configs other than `application/application`. This is the **only** charge type safe with `losses_collector: 'stripe'`. If the platform wants Stripe to own losses, direct charges are the only option.
+
+#### How it works
+
+The charge is created directly on the connected account. The connected account is the merchant of record — their name appears on the customer’s bank statement. The platform collects an application fee.
+
+#### Code pattern
+
+```javascript
+// Backend: Create PaymentIntent on connected account
+const paymentIntent = await stripe.paymentIntents.create({
+  amount: 10000, // $100.00
+  currency: 'usd',
+  application_fee_amount: 1500, // $15.00 platform fee
+  metadata: {
+    orderId: 'order_123',
+  },
+}, {
+  stripeAccount: 'acct_connected_account_id', // Key: stripeAccount header
+});
+
+// Return client_secret to frontend
+res.json({ clientSecret: paymentIntent.client_secret });
+```
+
+#### Frontend (with Stripe.js)
+
+```javascript
+// Must initialize Stripe with connected account
+const stripe = await loadStripe('pk_test_...', {
+  stripeAccount: 'acct_connected_account_id',
+});
+
+// Then confirm payment as usual
+const result = await stripe.confirmPayment({
+  elements,
+  confirmParams: {
+    return_url: 'https://yoursite.com/success',
+  },
+});
+```
+
+#### Fund flow
+
+```
+Customer pays $100
+  → $100 lands in connected account's balance
+  → $15 application fee transferred to platform
+  → Connected account keeps $85
+```
+
+#### Refunds
+
+```javascript
+// Refund comes from connected account's balance
+const refund = await stripe.refunds.create({
+  charge: 'ch_xxx',
+  // Optionally refund the application fee too:
+  refund_application_fee: true,
+}, {
+  stripeAccount: 'acct_connected_account_id',
+});
+```
+
+#### When to use
+
+- Direct-charge integrations where sellers own the customer relationship (legacy v1 Standard-style pattern)
+- SaaS platforms (Shopify model)
+- When the connected account’s name should appear on bank statements
+- When sellers handle their own disputes
+
+> **Legacy mapping note (external docs terms):** Stripe docs still reference legacy v1 naming (`standard`, `express`, `custom`) and legacy fee-payer behaviors (`application_express`, `application_custom`) for older accounts. For migration mapping to Accounts v2 dimensions, see the “Legacy migration note” section in the account-types reference.
+
+### Destination Charges
+
+> **Controller Property Compatibility:** REQUIRES `losses_collector: 'application'`. Using destination charges with `losses_collector: 'stripe'` creates a liability-model mismatch for this charge flow. See `compatibility-matrix.md` for details.
+
+#### How it works
+
+The charge is created on the platform’s account. The platform is the merchant of record. Funds are automatically transferred to the connected account using `transfer_data`. This is a common pattern for marketplaces.
+
+#### Code pattern
+
+```javascript
+// Backend: Create PaymentIntent on platform account
+const paymentIntent = await stripe.paymentIntents.create({
+  amount: 10000, // $100.00
+  currency: 'usd',
+  application_fee_amount: 1500, // $15.00 collected; platform net = $15.00 − Stripe processing fees
+  transfer_data: {
+    destination: 'acct_connected_account_id', // Funds go here
+  },
+  metadata: {
+    bookingId: 'booking_123',
+    riderId: 'user_456',
+    operatorId: 'user_789',
+  },
+});
+
+// Return client_secret to frontend
+res.json({ clientSecret: paymentIntent.client_secret });
+```
+
+#### Alternative: Specify transfer amount instead of fee
+
+```javascript
+const paymentIntent = await stripe.paymentIntents.create({
+  amount: 10000, // $100.00
+  currency: 'usd',
+  transfer_data: {
+    destination: 'acct_connected_account_id',
+    amount: 8500, // $85.00 goes to connected account (platform keeps $15)
+  },
+});
+```
+
+#### Frontend (standard Stripe.js)
+
+```javascript
+// Initialize Stripe with platform's publishable key (no stripeAccount needed)
+const stripe = await loadStripe('pk_test_platform_key');
+
+const result = await stripe.confirmPayment({
+  elements,
+  confirmParams: {
+    return_url: 'https://yoursite.com/success',
+  },
+});
+```
+
+#### Fund flow
+
+```
+Customer pays $100
+  → $100 lands in platform's balance
+  → $85 automatically transferred to connected account
+  → Platform nets $15 (application_fee_amount) − Stripe processing fees
+```
+
+#### Refunds
+
+```javascript
+// Refund comes from platform's balance
+const refund = await stripe.refunds.create({
+  payment_intent: 'pi_xxx',
+  // Optionally:
+  reverse_transfer: true, // Claw back from connected account
+  refund_application_fee: true, // Refund the platform fee too
+});
+```
+
+#### When to use
+
+- **Marketplaces** where the platform owns the customer relationship
+- On-demand platforms (Uber, DoorDash model)
+- When you want the platform name on bank statements
+- Express dashboard accounts (common pairing)
+- When the platform handles disputes
+- **NOT for hold-and-release or delivery-gated payouts** — funds transfer automatically to the connected account upon payment success. Use separate charges and transfers for delivery-gated payouts or any scenario requiring the platform to hold funds before releasing.
+
+#### Destination Charges with `on_behalf_of`
+
+> **Not covered by this guide.** `on_behalf_of` is an advanced variant that changes the merchant of record to the connected account while the charge lives on the platform. It has narrow use cases and significant complexity.
+> 
+> If your integration requires `on_behalf_of`, consult the [Stripe Connect documentation](https://docs.stripe.com/connect/charges.md) or [contact Stripe sales](https://stripe.com/contact/sales).
+> 
+> **Do NOT use `on_behalf_of` for marketplace use cases** — the platform should be the merchant of record. Use regular destination charges instead.
+
+### Separate Charges and Transfers
+
+> **Controller Property Compatibility:** REQUIRES `losses_collector: 'application'`. Same negative balance liability issue as destination charges — using separate charges and transfers with `losses_collector: 'stripe'` means the platform actually carries the losses despite the configuration. See `compatibility-matrix.md` for details.
+
+#### How it works
+
+The charge and transfer are separate API calls. This gives maximum flexibility — you can split a single payment across multiple connected accounts, delay transfers, or create complex fee structures.
+
+#### Code pattern
+
+```javascript
+// Step 1: Create PaymentIntent (no transfer_data)
+const paymentIntent = await stripe.paymentIntents.create({
+  amount: 10000, // $100.00
+  currency: 'usd',
+  metadata: {
+    orderId: 'order_123',
+  },
+});
+
+// Step 2: After payment_intent.succeeded webhook fires — latest_charge is null
+// at creation time and only populated on the confirmed PaymentIntent from the event
+// IMPORTANT: Always verify the webhook signature before processing event data.
+// See https://stripe.com/docs/webhooks/signatures for verification steps.
+const confirmedIntent = event.data.object; // payment_intent.succeeded payload
+const transfer = await stripe.transfers.create({
+  amount: 8500, // $85.00 to connected account
+  currency: 'usd',
+  destination: 'acct_connected_account_id',
+  source_transaction: confirmedIntent.latest_charge, // charge ID from confirmed PaymentIntent
+  metadata: {
+    orderId: 'order_123',
+  },
+});
+```
+
+#### Multi-seller split
+
+```javascript
+// One payment, multiple sellers (for example, a multi-seller cart)
+await stripe.paymentIntents.create({
+  amount: 25000, // $250.00 total
+  currency: 'usd',
+});
+
+// After payment_intent.succeeded webhook fires — latest_charge is null at creation time.
+// IMPORTANT: Always verify the webhook signature before processing event data.
+// See https://stripe.com/docs/webhooks/signatures for verification steps.
+const confirmedIntent = event.data.object; // payment_intent.succeeded payload
+const chargeId = confirmedIntent.latest_charge;
+
+// Transfer to seller A
+await stripe.transfers.create({
+  amount: 8000,
+  currency: 'usd',
+  destination: 'acct_seller_a',
+  source_transaction: chargeId,
+});
+
+// Transfer to seller B
+await stripe.transfers.create({
+  amount: 12000,
+  currency: 'usd',
+  destination: 'acct_seller_b',
+  source_transaction: chargeId,
+});
+
+// Platform keeps $50 (25000 - 8000 - 12000 = 5000)
+```
+
+#### Fund flow
+
+```
+Customer pays $250
+  → $250 lands in platform's balance
+  → Platform creates transfer: $80 to Seller A
+  → Platform creates transfer: $120 to Seller B
+  → Platform keeps $50
+```
+
+#### Refunds
+
+```javascript
+// Refund the charge
+const refund = await stripe.refunds.create({
+  charge: 'ch_xxx',
+});
+
+// Manually reverse transfers
+await stripe.transfers.createReversal('tr_seller_a', {
+  amount: 8000,
+});
+await stripe.transfers.createReversal('tr_seller_b', {
+  amount: 12000,
+});
+```
+
+#### When to use
+
+- Multi-seller carts (one payment, multiple recipients)
+- Delayed payouts (hold funds, transfer later)
+- Hold-and-release / delivery-gated payout (payment precedes delivery, platform releases funds on confirmation)
+- Delivery-gated payouts (collect payment now, transfer to seller after fulfillment)
+- Complex fee structures or splits
+- When you need maximum control over fund flow timing
+- Crowdfunding-style platforms
+
+### Decision Guide
+
+```
+Is there one seller per transaction?
+├── Yes → Does the platform need to hold funds before releasing to the seller?
+│   ├── Yes (hold-and-release or delivery confirmation) → SEPARATE CHARGES & TRANSFERS
+│   └── No → Is the seller the merchant of record?
+│       ├── Yes → DIRECT CHARGES
+│       └── No → DESTINATION CHARGES ← Common marketplace default
+└── No (multiple sellers) → SEPARATE CHARGES & TRANSFERS
+```
+
+**Quick rules:**
+
+- **Marketplace with one seller, immediate payout** → Destination charges
+- **Marketplace with hold-and-release or delivery-gated payout** → Separate charges and transfers
+- **SaaS where seller owns the relationship** → Direct charges
+- **Multi-seller cart or complex splits** → Separate charges and transfers

.agents/skills/connect-recommend/references/company-researcher.md

@@ -0,0 +1,106 @@
+## Company Researcher Agent
+
+Research a company using its website URL or a text description, then map findings to the Stripe Connect decision matrix. Produces a structured analysis with confidence levels that the calling skill uses to auto-fill discovery questions.
+
+### Inputs
+
+You will receive one or both of:
+
+- **Company URL** — a website to fetch and analyze
+- **Company description** — freeform text about what the business does
+
+### Instructions
+
+#### Step 1 — Gather company information from the web
+
+**If a URL is provided:**
+
+1. `WebFetch` the homepage. Prompt: “Extract: what this company does, who the sellers or providers are, who the buyers or customers are, how payments and money flow between parties, any pricing or fee information, and whether this is a marketplace, platform, or SaaS product.”
+
+2. Attempt to fetch deeper pages for additional signals. Try these URL suffixes in parallel and use whatever succeeds:
+
+   - `/about`, `/about-us`, `/how-it-works` — for business model clarity
+   - `/pricing`, `/plans` — for fee structure
+
+3. If the homepage fetch fails (403, 404, timeout, empty content), fall back to `WebSearch` using the domain name plus “business model how it works”.
+
+**If only a description is provided (no URL):**
+
+1. `WebSearch` for the company name (if identifiable) plus “business model” and “pricing”.
+2. If the description is generic (for example, “I’m building a marketplace”), skip web search — classify directly from the description text. Maximum confidence for description-only inferences is MEDIUM.
+
+**If both `WebFetch` and `WebSearch` are unavailable or fail:**
+
+If no description text is available (URL-only input and web research failed), return the early-exit output from Step 4 with all dimensions set to LOW confidence and the note: “Web research unavailable and no description provided. Cannot perform research.”
+
+Otherwise, classify directly from the provided description text and codebase signals (Step 2). Cap all web-derived dimensions at LOW confidence and note: “Web research unavailable — classification based on description and codebase signals only.”
+
+**If neither URL nor description is provided:**
+
+Return the early-exit output (see Step 4 failure format) with all dimensions set to LOW confidence and the note: “No company URL or description provided. Cannot perform research.”
+
+#### Step 2 — Cross-reference with codebase signals (if a project exists)
+
+Check if there’s an existing project to scan:
+
+1. `Glob` for `package.json`, `requirements.txt`, `Gemfile`, `go.mod`, `pom.xml` at the project root.
+
+2. If a project exists, `Grep` for business model signals:
+
+   - Seller and provider patterns: `seller`, `vendor`, `operator`, `provider`, `merchant`, `host`, `creator`
+   - Buyer patterns: `buyer`, `customer`, `rider`, `guest`, `client`
+   - Payment patterns: `commission`, `fee`, `split`, `payout`, `transfer`, `earnings`
+   - Multi-party patterns: `marketplace`, `platform`, `connect`
+
+3. Use codebase signals to corroborate or strengthen web research findings. For example, if the homepage says “marketplace” and the codebase has terms like `commission`, `payout`, `split`, `listing`, `booking`, `cart`, `order`, `storefront`, or `seller`/`vendor`/`provider` patterns, that’s stronger confirmation.
+
+#### Step 3 — Assess confidence per dimension
+
+For each of the 6 dimensions below, report what you found and how confident you are. Do NOT interpret the decision matrix or derive a recommended configuration — that happens downstream.
+
+| Dimension | What to determine | Confidence: HIGH | Confidence: MEDIUM | Confidence: LOW |
+| --- | --- | --- | --- | --- |
+| **Business model** | marketplace, on-demand services, professional services, SaaS with payments, crowdfunding, subscription platform, rental marketplace, event ticketing, e-commerce (white-label), B2B platform | Explicit on homepage or about page | Inferred from product description or competitor comparison | Guessing from vague signals |
+| **Parties** | Who are the sellers or providers? Who are the buyers? | Roles explicitly named on the site | Inferred from business model type | No party information found |
+| **Payment flow** | Platform collects → pays out? Buyers pay sellers directly? Platform processes on behalf? | Pricing page or docs describe the flow | Inferred from business model (for example, marketplaces usually collect) | No payment information found |
+| **Onboarding control** | Embedded, Stripe-hosted redirect, or fully custom or API | Custom onboarding shown on site, or white-label signals | Default inference from business model | Contradictory signals |
+| **Dispute responsibility** | Platform handles, sellers handle, or shared | Explicitly stated in terms/policies | Inferred from model (marketplace → platform usually) | No information |
+| **Fee structure** | Percentage, flat, tiered, subscription+tx | Pricing page shows exact fee structure | Inferred from competitor patterns or partial information | No pricing information found |
+
+#### Step 4 — Produce structured output
+
+Write the Summary section as if speaking directly to the user, using second person. Say “Your barbers are…” not “The barbers are…”. Frame findings as a conversational confirmation seeking validation.
+
+Return your analysis in this exact format:
+
+```
+## Company Research: [Company Name or "Unknown"]
+
+### Summary
+[2-3 sentences speaking directly to the user: what their company does, their key parties, and how money flows. Use "you/your" — for example, "Your platform connects customers with barbers who provide services. You collect payment from customers and pay out barbers after taking a platform fee."]
+
+### Research Findings
+
+| Dimension      | Finding                                  | Confidence       | Evidence                 |
+|----------------|------------------------------------------|------------------|--------------------------|
+| Business Model | [type from the dimension table above]    | [HIGH/MEDIUM/LOW] | [1-sentence explanation] |
+| Parties        | [sellers] (sellers) + [buyers] (buyers)  | [HIGH/MEDIUM/LOW] | [1-sentence explanation] |
+| Payment Flow   | [observed flow description]              | [HIGH/MEDIUM/LOW] | [1-sentence explanation] |
+| Onboarding     | [signals about onboarding preferences]   | [HIGH/MEDIUM/LOW] | [1-sentence explanation] |
+| Disputes       | [who appears to handle]                  | [HIGH/MEDIUM/LOW] | [1-sentence explanation] |
+| Fee Structure  | [type]: [details]                        | [HIGH/MEDIUM/LOW] | [1-sentence explanation] |
+
+### Sources
+- [list each URL fetched or search query used]
+```
+
+#### Step 5 — Handle edge cases
+
+| Scenario | What to do |
+| --- | --- |
+| **URL returns 403/404/timeout** | Fall back to `WebSearch` with the domain name. Note in Sources: “Direct URL unreachable, used web search.” |
+| **URL is a SPA with minimal HTML** | `WebFetch` may return little content. Fall back to `WebSearch`. Check meta tags and page title. |
+| **Pricing is behind a login** | Fee structure confidence drops to LOW. Note: “Pricing not publicly available.” |
+| **Company does multiple things** | Note the ambiguity. Classify based on the primary product. Set confidence to MEDIUM with reasoning about which facet you chose. |
+| **Not a marketplace or platform** | If the business is purely B2C with no multi-party payments, flag clearly: “This business appears to be a direct seller — standard Stripe integration may be more appropriate than Stripe Connect.” Set Business Model confidence to HIGH with value “not-connect”. |
+| **Conflicting signals** | Note the conflict explicitly. Set confidence to MEDIUM. Provide your best inference with reasoning about why you chose one interpretation over the other. |

.agents/skills/connect-recommend/references/compatibility-matrix.md

@@ -0,0 +1,199 @@
+## Connect integration compatibility reference
+
+This document encodes known Connect integration incompatibilities — combinations of account controller properties and charge types that cause serious issues for platforms. Use this as a validation checklist when recommending or reviewing any Connect configuration.
+
+### 1. Controller Property + Charge Type Compatibility Matrix
+
+Significant compatibility issues arise when account controller properties (dashboard, fees_collector, losses_collector) are paired with incompatible charge types. Each combination below is rated:
+
+- **BLOCKED** — Incompatible combination. Never recommend. Can cause liability-model mismatch, fee-model mismatch, or inability to manage key payment operations.
+- **CAUTION** — Technically functional but has significant drawbacks. Present with explicit warnings.
+- **ALLOWED** — Supported combination. Proceed normally.
+- **OUT OF SCOPE** — Not supported by this guide. Redirect to Stripe docs or sales.
+- **Reasoning depth vs output brevity** — This reference is intentionally detailed so the assistant can reason about liability and transfer mechanics. User-facing warnings should stay concise and action-oriented.
+- **Output guardrail** — Keep recommendation warnings concise (typically one to two sentences). Use the mechanism details in this document to choose the right warning and alternative path, not to dump every detail verbatim.
+
+#### Core Rule
+
+> **For GA configurations with `losses_collector: "stripe"`, ONLY direct charges are safe.**
+> 
+> For destination charges and separate charges and transfers, use `losses_collector: "application"` so responsibility aligns with dispute and transfer-reversal flows. In this guide, combinations that pair these charge patterns with `losses_collector: "stripe"` are marked BLOCKED.
+> 
+> **Exception:** Express dashboard with `losses_collector: "stripe"` (regardless of fees_collector) is blocked for ALL charge types including direct — these configs are still in beta. Don’t recommend them.
+
+> **Note:** `on_behalf_of` configurations aren’t supported by this guide. `on_behalf_of` columns are retained in the matrix for compatibility detection only — if the assistant encounters `on_behalf_of` requirements, it should redirect to Stripe docs or sales.
+
+#### Full Matrix (v2 field names)
+
+| Dashboard | Fees Collector | Losses Collector | Direct | Destination | Destination `on_behalf_of` | Separate charges and transfers | Separate charges and transfers `on_behalf_of` |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| `full` | `stripe` | `stripe` | ALLOWED | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `full` | `stripe` | `application` | BLOCKED | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `full` | `application` | `application` | SALES-GATED | SALES-GATED | OUT OF SCOPE | SALES-GATED | OUT OF SCOPE |
+| `full` | `application` | `stripe` | SALES-GATED | SALES-GATED | OUT OF SCOPE | SALES-GATED | OUT OF SCOPE |
+| `express` | `application` | `application` | ALLOWED | CAUTION | OUT OF SCOPE | CAUTION | OUT OF SCOPE |
+| `express` | `stripe` | `stripe` | BLOCKED* | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `express` | `stripe` | `application` | BLOCKED | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `express` | `application` | `stripe` | BLOCKED* | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `none` | `stripe` | `stripe` | BLOCKED | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `none` | `stripe` | `application` | BLOCKED | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `none` | `application` | `stripe` | BLOCKED | BLOCKED | OUT OF SCOPE | BLOCKED | OUT OF SCOPE |
+| `none` | `application` | `application` | ALLOWED | ALLOWED | OUT OF SCOPE | ALLOWED | OUT OF SCOPE |
+
+\*Express dashboard with `losses_collector: "stripe"` configs are still in beta. Even when GA, destination charges and separate charges and transfers still require platform-run dispute or refund recovery (including transfer reversals), which aligns with `losses_collector: "application"` instead.
+
+#### CAUTION Details
+
+**express + application + application + destination charges (without `on_behalf_of`) and separate charges and transfers:**
+
+- Connected accounts can’t manage refunds, disputes, or Radar rules from their Express dashboard for these charge types (see [Express dashboard payments docs](https://docs.stripe.com/connect/express-dashboard/payments.md))
+- Stripe debits disputes to the platform first for these charge patterns; recovery depends on reversing prior transfers back from connected accounts
+- This pattern is only viable when the platform owns losses (`losses_collector: "application"`) and runs webhook-driven refund or dispute recovery workflows
+- Platform must handle failure modes (for example, insufficient connected-account balance) and negative-balance remediation
+- `on_behalf_of` is out of scope for this guide. Redirect to Stripe docs or sales instead of recommending it.
+
+#### Blessed Paths (Safe Defaults)
+
+| Business Model | Dashboard | Fees | Losses | Charge Type | Rating | Notes |
+| --- | --- | --- | --- | --- | --- | --- |
+| **Marketplace** | `express` | `application` | `application` | Destination | CAUTION | Recommended path — CAUTION applies: connected accounts have limited dispute or refund visibility from their Express dashboard; platform must run webhook-driven recovery workflows. Always include the Express dispute-visibility warning. |
+| **SaaS** | `full` | `stripe` | `stripe` | Direct | ALLOWED | Stripe-managed fee and loss defaults; connected accounts are independent merchants |
+| **Enterprise or White-label** | `none` | `application` | `application` | Destination or Direct | ALLOWED | Full platform control |
+
+### 2. Why Blocked Combos Fail
+
+When `losses_collector: "stripe"` is combined with non-direct charges (destination or separate charges and transfers), this guide marks the combination as BLOCKED for three documented reasons:
+
+1. **Liability settings should align with where disputes are debited.** For destination charges and separate charges and transfers, disputes are debited from the platform balance. Use `losses_collector: "application"` so the liability model matches this funds flow.
+
+2. **Payment fees for these charge types are assessed on the platform.** For destination charges or separate charges and transfers, Stripe collects payment fees from the platform account regardless of `fees_collector`. (Rates vary by region — see [stripe.com/pricing](https://stripe.com/pricing).) Note: Legacy types behave differently, see [Fee behavior](https://docs.stripe.com/connect/direct-charges-fee-payer-behavior.md).
+
+3. **Recovery from connected accounts requires explicit transfer-reversal handling.** For destination and separate disputes, Stripe debits the platform first; the platform then recovers funds by reversing transfers through the API or Dashboard. Refunds can auto-reverse transfers when `reverse_transfer: true`, but dispute recovery isn’t automatic and requires explicit logic.
+
+### 3. Merchant of record enforcement gap
+
+Whoever provides the good or service at the transaction level should be the merchant of record. The charge type dictates who the merchant of record is:
+
+- **Direct charges** → Connected account is merchant of record (their name on bank statements)
+- **Destination charges and separate charges and transfers** → Platform is merchant of record
+- **`on_behalf_of` variants** → Connected account is merchant of record (despite charge living on platform account)
+
+**CRITICAL:** Platforms declare their intended merchant-of-record setup during platform onboarding, but can then create charges with any pattern regardless. Stripe will NOT enforce this selection at the API level. The recommendation must ensure the charge type matches the user’s actual business relationship (who provides the goods and services).
+
+### 4. Additional compatibility risks
+
+#### 4a. OAuth or Connecting Existing Stripe Accounts
+
+**Risk level:** OUT OF SCOPE
+
+Connecting existing Stripe accounts through OAuth is a v1-only pattern primarily used in sales-assisted integrations. This guide doesn’t support OAuth-based onboarding.
+
+**Why OAuth is problematic:**
+
+- Connected accounts can disconnect at any time, severing the platform’s ability to process payments
+- Platform loses visibility into the connected account’s state and requirements
+- Less platform control over onboarding flow and requirement collection
+- Not compatible with all embedded components
+
+**If the user mentions OAuth, “connect existing Stripe accounts,” or “link existing accounts”:** Direct them to the [Connect documentation](https://docs.stripe.com/connect.md) and recommend [contacting Stripe sales](https://stripe.com/contact/sales). This guidance only supports creating new connected accounts with embedded onboarding.
+
+#### 4b. Custom Onboarding Complexity
+
+**Risk level:** CAUTION
+
+Platforms that choose `dashboard: "none"` and build custom onboarding underestimate the ongoing burden:
+
+- **KYC lifecycle ownership** shifts fully to the platform: initial collection, ongoing requirement monitoring, and remediation when verification fails.
+- **Country-specific legal entity requirements** change frequently. What works for US entities doesn’t work for EU, and new countries add new requirements.
+- **Ongoing requirement collection** is required, not one-time. When regulatory and compliance requirements change (updated KYC rules, new regulatory requirements, and more), the platform must update collection flows and prompt existing accounts.
+- **Invalid information** from connected accounts leads to accounts stuck in restricted states. Without Stripe’s built-in validation, platforms end up manually remediating stuck accounts.
+- **Higher remediation and maintenance burden** compared to embedded or hosted onboarding, because API-based onboarding requires custom collection logic and ongoing updates as requirements evolve.
+
+**Recommendation:** Use embedded onboarding components or Stripe-hosted onboarding unless the platform has dedicated compliance engineering resources AND a specific branding requirement that embedded components can’t meet. This reduces compliance and maintenance burden (see [Onboard your connected account](https://docs.stripe.com/connect/marketplace/tasks/onboard.md)).
+
+#### 4c. Dashboard DIY (Missing Refund or Dispute Flows)
+
+**Risk level:** CAUTION
+
+Platforms that build their own connected-account dashboard (`dashboard: "none"`) commonly build earnings and payout views but **neglect refund and dispute management flows**. Without these:
+
+- Connected accounts can’t initiate refunds, leading to customer complaints escalating to chargebacks
+- Connected accounts can’t respond to disputes, causing auto-losses
+- Connected accounts can’t easily identify or remediate KYC requirement failures, causing prolonged restrictions
+
+**Recommendation:** If building a custom dashboard, day-one scope should include refund initiation, dispute response, and KYC requirement status and remediation with country-aware requirement handling. Strongly recommend using embedded components for these. If the platform can’t commit to this, use `dashboard: "express"` instead.
+
+#### 4d. Product compatibility by charge type
+
+**Risk level:** INFORMATIONAL (long-term gap)
+
+Not all Stripe products work with all Connect integration configurations.
+
+**Recommendation:** If the platform plans to use Billing, Invoicing, or Payment Links, recommend direct charges.
+
+For other charge types, when encountering Billing (Subscriptions, Invoicing), Tax, Payment Links, or Checkout Sessions, proceed with caution and look things up in the Stripe docs or recommend contacting sales.
+
+#### 4e. Geo Expansion Limitations
+
+**Risk level:** INFORMATIONAL (long-term gap)
+
+Certain integration paths have geographic restrictions:
+
+- **Cross-border payouts** have currency and timing limitations that vary by connected account country.
+- **Instant payouts** are only available in select countries and may require specific account configurations.
+
+**Recommendation:** If the user mentions international expansion plans, their charge pattern and account configuration may need adjustment for new countries. Recommend checking Stripe’s country availability documentation.
+
+#### 4f. Taking on Pricing Without Expertise
+
+**Risk level:** CAUTION
+
+Platforms that choose `fees_collector: "application"` (platform owns pricing) should model Stripe processing fees explicitly, because unmodeled fees can reduce margins.
+
+**Recommendation:** This is already well-covered by the skill’s mandatory fee economics breakdowns. Reinforce during discovery: if the platform doesn’t have dedicated pricing expertise, recommend `fees_collector: "stripe"` and use `application_fee_amount` for platform revenue.
+
+#### 4g. Destination Charges + Disputes: Missing Transfer Reversals
+
+**Risk level:** CAUTION
+
+When a dispute occurs on a destination charge:
+
+1. The charge lives on the **platform’s** account (platform is merchant of record)
+2. Stripe debits the **platform’s** balance for the disputed amount
+3. However, the platform has already transferred funds to the connected account using `transfer_data`
+
+The platform’s balance is reduced but the connected account still has the funds. **A common implementation issue:** platforms fail to initiate a **transfer reversal** to recover the disputed amount from the connected account.
+
+**What should happen:**
+
+- Platform listens for `charge.dispute.created` webhook
+- Platform creates a transfer reversal to pull funds back from the connected account
+- If the connected account’s Stripe balance is insufficient, the reversal creates a negative balance on the connected account (requires `losses_collector: "application"`)
+
+**What commonly goes wrong:**
+
+- Platform doesn’t listen for dispute webhooks at all
+- Platform processes disputes manually but forgets the transfer reversal step
+- Platform assumes Stripe automatically reverses the transfer (it does NOT — `reverse_transfer` defaults to `false` on both refunds and disputes)
+- Connected account balance is zero, and without `losses_collector: "application"`, there’s no mechanism to recover
+
+**Recommendation:**
+
+- Always verify incoming webhook signatures before processing — see [Verify webhook signatures](https://docs.stripe.com/webhooks.md#verify-events). Optionally restrict requests to [Stripe’s published IP addresses](https://docs.stripe.com/ips.md).
+- Always implement a `charge.dispute.created` webhook handler that automatically reverses the associated transfer
+- Use `reverse_transfer: true` on refunds to make transfer reversal automatic for voluntary refunds
+- For disputes, build explicit transfer reversal logic — automatic reversal only happens for refunds, not disputes
+- Ensure `losses_collector: "application"` is set so the connected account balance can go negative, enabling recovery
+- Consider alerting on unrecovered dispute amounts where transfer reversal failed (for example, connected account already withdrew funds)
+
+### 5. Compatibility checks during discovery
+
+When generating a recommendation in the discovery flow, validate the final configuration against this checklist:
+
+1. **Compatibility matrix check:** Look up `(dashboard, fees_collector, losses_collector)` + `chargePattern` in the matrix above. If BLOCKED, don’t present. Explain why and recommend the nearest allowed alternative.
+2. **Merchant-of-record consistency check:** Verify the recommended charge type matches who actually provides goods or services. Direct charges = connected account is merchant of record. Destination and separate charges and transfers = platform is merchant of record.
+3. **OAuth check:** If the user mentions OAuth for connecting accounts, warn about tradeoffs and recommend Account Links.
+4. **Custom onboarding check:** If `dashboard: "none"` and the user plans custom onboarding, warn about ongoing KYC collection and remediation burden and country-specific requirement drift.
+5. **Dashboard scope check:** If `dashboard: "none"`, confirm the platform plans to build refund or dispute operations, not just earnings views.
+6. **Fee expertise check:** If `fees_collector: "application"`, ensure the fee economics section includes explicit breakeven analysis.
+7. **Warning brevity check:** Keep user-facing warnings concise (typically one to two sentences), using this document as reasoning context.

.agents/skills/connect-recommend/references/decision-matrix.md

@@ -0,0 +1,372 @@
+## Connect Integration Decision Matrix
+
+### IMPORTANT: Use Accounts v2 API
+
+**ALWAYS use the Accounts v2 API (`/v2/core/accounts`) for new integrations.** Do NOT use the legacy v1 API with `type: 'express'`, `type: 'standard'`, or `type: 'custom'`. These are legacy categories that bundle together responsibility, dashboard, and requirement decisions into opaque labels.
+
+Instead, configure accounts using three independent dimensions:
+
+- **Dashboard access**: `express` (lightweight), `full` (independent businesses), `none` (white-label)
+- **Fee collection**: `stripe` (Stripe bills connected accounts) or `application` (platform manages billing)
+- **Loss liability**: `stripe` (Stripe bears unresolved negative balances) or `application` (platform bears negative balances)
+
+### Business Model → Recommendation Mapping
+
+| Business Model | Dashboard | Fees | Losses | Charge Pattern | Onboarding | Reasoning |
+| --- | --- | --- | --- | --- | --- | --- |
+| **Marketplace** | `express` | `application` | `application` | Destination | Embedded | Platform owns customer relationship; platform-owned pricing + loss liability required for Express dashboard today |
+| **On-demand services** | `express` | `application` | `application` | Destination | Embedded | Fast onboarding for drivers and providers; platform-owned pricing + loss liability required for Express |
+| **Professional services** | `express` | `application` | `application` | Destination | Embedded | Similar to marketplace; platform-owned pricing + loss liability required for Express |
+| **SaaS with payments** | `full` | `stripe` | `stripe` | Direct | Embedded | Sellers want independence, own Stripe accounts, own branding |
+| **Crowdfunding** | `express` | `application` | `application` | Separate | Embedded | Multi-party splits and delayed release. Use transfer math (not `application_fee_amount`) and platform-owned loss liability for transfer reversals |
+| **Subscription platforms** | `express` | `application` | `application` | Destination | Embedded | Recurring billing, platform manages subscriptions; platform-owned pricing + loss liability required for Express |
+| **E-commerce (white-label)** | `none` | `application` | `application` | Destination or Direct | Embedded | Full branding control. Use embedded components for white-label feel. Going fully custom (no embedded components) adds significant complexity — the platform must build and maintain all connected account UX including onboarding remediation, refund and dispute flows, and ongoing requirement collection. |
+| **Rental marketplace** | `express` | `application` | `application` | Destination | Embedded | Platform owns booking flow; platform-owned pricing + loss liability required for Express |
+| **Event ticketing** | `express` | `application` | `application` | Destination | Embedded | Platform manages event and ticket flow; platform-owned pricing + loss liability required for Express |
+| **B2B platforms** | `none` | `application` | `application` | Separate | Embedded | For complex enterprise multi-party flows, prefer Separate charges and transfers with transfer math. Don’t default to Destination in these scenarios. Often requires sales engagement for billing complexity — [Stripe sales](https://stripe.com/contact/sales). |
+
+**Note:** `fees` and `losses` columns refer to `defaults.responsibilities.fees_collector` and `defaults.responsibilities.losses_collector` in the v2 API. Values are `"stripe"` or `"application"` (your platform).
+
+### Decision Tree Logic
+
+#### Account Configuration Selection (Accounts v2)
+
+Rather than choosing a legacy “account type”, configure three independent dimensions:
+
+**If the user asks “what account type should I use?” (or similar):** Reframe explicitly before giving settings: “In Accounts v2, avoid the legacy `type` parameter and configure behavior with explicit fields: `dashboard`, `defaults.responsibilities.fees_collector`, `defaults.responsibilities.losses_collector`, and the appropriate account configuration (`merchant` for direct charges or `recipient` for destination or separate flows).” Then provide the recommended field values.
+
+**Dashboard access:**
+
+```
+What dashboard should connected accounts see?
+├── No dashboard needed (fully embedded or white-label) → dashboard: "none"
+├── Independent businesses needing full Stripe access → dashboard: "full"
+└── Lightweight dashboard for sellers or providers → dashboard: "express" ← DEFAULT
+```
+
+**Responsibilities:**
+
+```
+Who collects fees and bears losses?
+├── Marketplace (destination or separate charges) → fees_collector: "application", losses_collector: "application"
+│   Platform is merchant of record and should be responsible for paying Stripe fees
+│   Platform-owned pricing + loss liability is REQUIRED for Express dashboard today
+│   Platform-owned loss liability enables connected account negative balances for transfer reversals
+├── SaaS (direct charges) → fees_collector: "stripe", losses_collector: "stripe" ← DEFAULT
+└── White-label or enterprise → fees_collector: "application", losses_collector: "application" (use embedded components; fully custom adds significant complexity)
+```
+
+**Detailed rules:**
+
+- If sellers are independent businesses wanting their own Stripe access → `dashboard: "full"`
+- If sellers need lightweight access (common for marketplaces) → `dashboard: "express"` (typical default)
+- If fully white-labeled, sellers never see Stripe → `dashboard: "none"`
+- Marketplace defaults: `dashboard: "express"` + `fees_collector: "application"` + `losses_collector: "application"`
+- SaaS defaults: `dashboard: "full"` + `fees_collector: "stripe"` + `losses_collector: "stripe"`
+- Hybrid Express defaults (same accounts used for direct + destination or separate): keep `dashboard: "express"` + `fees_collector: "application"` + `losses_collector: "application"` for both sides
+
+#### Charge Pattern Selection
+
+```
+How many sellers per transaction?
+├── Multiple sellers → Separate charges & transfers
+└── One seller
+    └── Who should the customer pay at checkout?
+        ├── Seller runs checkout (seller name on receipt or statement) → Direct charges
+        └── Platform runs checkout (platform name on receipt or statement) → Destination charges ← DEFAULT
+```
+
+**Detailed rules:**
+
+- If platform owns customer relationship → **Destination** (most marketplaces)
+- If seller owns customer relationship → **Direct** (SaaS model)
+- If customers discover services on your platform and complete checkout in your platform flow (you own checkout UX, order confirmation, and payment operations) → **Destination**
+- Language saying payments should “belong to” or be “associated with” sellers, or that sellers should “run their own account,” is usually a payout expectation (who receives proceeds) or a dashboard-access preference, not a checkout-ownership signal. Destination charges satisfy payout expectations through automatic transfers and Express dashboard satisfies “own account” expectations. Only choose Direct when sellers independently own the checkout flow (their own payment page, their branding on statements, they handle refunds and disputes).
+- Choose **Direct** when the behavior is SaaS enablement: each seller runs their own payment relationship, customers pay the seller directly, seller branding appears on receipts and statements, and seller-side operations handle payment support, refunds, and disputes.
+- If multi-party splits needed → **Separate** (carts, one payment split across multiple parties)
+- If “platform collects then pays out” → **Destination**
+- If “buyers pay sellers directly” → **Direct**
+- If one payment maps to one connected account and funds transfer immediately (payout timing to bank is controlled by payout schedule, not release logic) → **Destination**
+- If the platform needs to hold funds and only transfer to the connected account after a trigger (delivery, job completion, approval, campaign end) → **Separate** (use transfer math; don’t use `application_fee_amount`)
+- If one payment must be split across multiple connected accounts (for example, a multi-vendor cart) → **Separate**
+- For B2B enterprise flows with multi-party allocation, approval gates, or staged release, prefer **Separate** and do NOT default to **Destination**
+- If unsure and the flow is single-recipient, immediate-transfer marketplace behavior → **Destination** (safest default)
+
+#### Hybrid model guidance
+
+Some platforms run two sides of business with the same connected accounts. This is supported, but every transaction must be explicitly classified to the correct side:
+
+- **Connected account is merchant of record** → **Direct** charges
+- **Platform is merchant of record** → **Destination** or **Separate** charges and transfers
+
+When both sides share Express connected accounts, keep controller settings aligned with the allowed path in this guide: `dashboard: "express"` + `fees_collector: "application"` + `losses_collector: "application"` for both direct and destination or separate contexts.
+
+Hybrid models add material complexity:
+
+- Two payment flows to build and maintain (direct + destination or separate)
+- Webhook handling across both payment lifecycle and transfer and reversal lifecycle
+- Expanded end-to-end testing matrix (refunds, disputes, transfer reversals, negative balance behavior)
+
+Launch the most business-critical side first, stabilize webhook and reconciliation behavior, then add the second side.
+
+#### Onboarding Method Selection
+
+```
+How much control over onboarding UX?
+├── "Stripe handles everything" → Embedded components (recommended default)
+├── "Some customization" → Embedded components with [appearance options API](/connect/embedded-appearance-options)
+└── "Fully custom" → API-based — NOT RECOMMENDED for platforms integrating without dedicated Stripe guidance.
+    Requires building custom remediation flows. Direct to [Stripe sales](https://stripe.com/contact/sales).
+```
+
+**Detailed rules:**
+
+- `dashboard: "express"` → **Embedded components** (recommended, keeps users in-app) or Stripe-hosted redirect (fallback)
+- `dashboard: "full"` → **Embedded components** or Stripe-hosted redirect
+- `dashboard: "none"` + want embedded → **[Embedded components](https://docs.stripe.com/connect/embedded-onboarding.md)**
+- If unsure → **Embedded components** (Stripe handles requirement collection and ongoing compliance updates)
+- Do NOT recommend API onboarding. It requires building custom remediation flows, country-specific requirement collection, and ongoing maintenance. If a user insists on fully custom onboarding, direct them to [Stripe sales](https://stripe.com/contact/sales).
+
+#### Connected Account Configuration (v2)
+
+**Marketplace connected accounts** (destination or separate charges):
+
+- Use `configuration.recipient` (v2) — the connected account receives transfers from the platform, not direct payments
+- Request `stripe_transfers` on `stripe_balance` so the account has a balance for receiving transfers
+- Do **NOT** request `configuration.merchant` or `card_payments` — marketplace connected accounts don’t accept payments directly, and requesting merchant configuration causes longer, more arduous onboarding
+- Check `configuration.recipient.capabilities.stripe_balance.stripe_transfers.status === 'active'` before initiating transfers
+
+**SaaS connected accounts** (direct charges):
+
+- Use `configuration.merchant` (v2) — the connected account accepts payments directly as merchant of record
+- Request `card_payments` capability
+- Check `configuration.merchant.capabilities.card_payments.status === 'active'` before processing charges
+
+**SaaS recurring fees (service fees or SaaS fees):**
+
+- If the platform charges a recurring SaaS fee (subscription), the connected account needs both `merchant` and `customer` configurations in v2
+- Pass the account as `customer_account` on SetupIntent and Subscription API calls — do NOT create a separate v1 Customer object (the customer configuration replaces it)
+
+### Combining Answers
+
+#### Answer Combination → Recommendation
+
+| Q1: Model | Q3: Flow | Q4: Control | → Dashboard | → Fees and Losses | → Charges | → Onboarding |
+| --- | --- | --- | --- | --- | --- | --- |
+| Marketplace | Platform collects | Stripe handles | `express` | `application`/`application` | Destination | Embedded |
+| Marketplace | Platform collects | Some custom | `express` | `application`/`application` | Destination | Embedded |
+| Marketplace | Platform collects | Fully custom | `none` | `application`/`application` | Destination | Embedded |
+| Marketplace | Direct to seller | Stripe handles | `full` | `stripe`/`stripe` | Direct | Embedded |
+| SaaS | Direct to seller | Stripe handles | `full` | `stripe`/`stripe` | Direct | Embedded |
+| SaaS | Platform collects | Stripe handles | `express` | `application`/`application` | Destination | Embedded |
+| On-demand | Platform collects | Stripe handles | `express` | `application`/`application` | Destination | Embedded |
+| Crowdfunding | Platform collects | Stripe handles | `express` | `application`/`application` | Separate | Embedded |
+| Platform + contractors | Platform collects | Stripe handles | `express` | `application`/`application` | Destination | Embedded |
+
+#### Risk Management by Business Model
+
+> **Note:** This section is directional guidance only. For detailed risk and Radar configuration, refer to the [Radar documentation](https://docs.stripe.com/radar.md).
+
+**Default recommendation: Let Stripe manage risk.** This usually reduces operational overhead for launch. Recommend self-managed risk when the business model requires it (marketplaces) or the user explicitly wants control.
+
+| Business Model | Risk Owner | Radar | Stripe-Managed OK? | Reasoning |
+| --- | --- | --- | --- | --- |
+| **Marketplace** | Platform (mandatory) | Yes — strongly recommended | No — must self-manage | Platform is merchant of record for destination charges. Liable for fraud and disputes. Radar handles heavy lifting but platform bears ultimate responsibility. |
+| **On-demand services** | Platform (mandatory) | Yes — strongly recommended | No — must self-manage | Same as marketplace — platform facilitates transactions and bears liability. |
+| **Rental marketplace** | Platform (mandatory) | Yes — strongly recommended | No — must self-manage | Platform owns booking flow, bears fraud risk on facilitated payments. |
+| **SaaS with payments** | Stripe (recommended) | Optional | **Yes — recommended** | Stripe’s built-in protection handles most fraud. Platform can upgrade to Radar later if needed. |
+| **Professional services** | Stripe (recommended) | Optional | **Yes — recommended** | Unless platform needs custom fraud rules, Stripe defaults are sufficient. |
+| **Crowdfunding** | Stripe (recommended) | Optional | **Yes — recommended** | Stripe-managed defaults are often sufficient for launch; reassess based on dispute and fraud patterns. |
+| **Subscription platforms** | Stripe (recommended) | Optional | **Yes — recommended** | Recurring billing has different risk profile — churn > fraud. Stripe’s defaults usually sufficient. |
+| **E-commerce (white-label)** | Platform (mandatory) | Yes | No — must self-manage | Full control = full responsibility. Dashboard-none configurations need platform-managed risk. |
+
+**Key rules:**
+
+- If `chargePattern` is `destination` or `separate`, the platform is the merchant of record and MUST manage risk — but Radar does the heavy lifting.
+- If `chargePattern` is `direct`, Stripe-managed risk is available and recommended.
+- Self-managing risk adds: dispute webhook handling, Radar configuration, ongoing monitoring, and financial exposure. Always warn the user about this added complexity.
+- Stripe Radar is a tool platforms use to manage risk — it’s NOT the same as “Stripe manages risk for you.” When Radar is enabled, the platform is still responsible; Radar just automates the detection.
+
+#### Fee Structure Mapping
+
+| Charge Pattern | Fee Method | Implementation |
+| --- | --- | --- |
+| **Direct** (Stripe owns pricing) | `application_fee_amount` | Strongly recommended. Charged in addition to Stripe fees that the connected account pays. The platform retains the full application fee amount. |
+| **Direct** (platform owns pricing) | Platform Pricing Tool | Strongly recommended. Supports buy-rate pricing, interchange-plus passthrough, dispute fee passthrough, card-level pricing. |
+| **Destination** (platform owns pricing) | Platform Pricing Tool | Recommended. Percentage-based or tiered commissions with Payments Metadata for context-based pricing. |
+| **Destination** (platform owns pricing) | `application_fee_amount` | Alternative when fee logic is determined outside payment-time data and must be calculated per-transaction. |
+| **Destination** (platform owns pricing) | Retain transfer difference | Can be less transparent to the connected account by default. Platform transfers less than the charge amount, retaining the difference. |
+| **Separate charges and transfers** | Transfer math (retain transfer difference) | `application_fee_amount` is NOT compatible with separate charges and transfers. Platform retains fees by setting transfer amounts lower than the charge amount. |
+
+**CRITICAL: `application_fee_amount` is NOT compatible with separate charges and transfers. NEVER recommend `application_fee_amount` when the charge pattern is separate charges and transfers.** Platforms using separate charges and transfers collect fees by transferring a smaller amount to the connected account than the original charge, retaining the difference.
+
+For separate charges and transfers, frame fee guidance as transfer math: `platform_margin = charge_amount − total_transfers_to_connected_accounts − Stripe_fees`
+
+#### Fee Calculation and Fee Economics
+
+**Who pays Stripe’s processing fees is one of the determining factors in whether your platform is profitable.**
+
+Stripe charges processing fees on every transaction. Rates vary by region, card type, payment method, and negotiated terms — see [stripe.com/pricing](https://stripe.com/pricing) for current rates. Who actually pays these fees depends on the charge pattern:
+
+| Charge Pattern | Who Pays Stripe Fees | Platform Net per Transaction |
+| --- | --- | --- |
+| **Destination charges** | **Platform** pays Stripe fees | `application_fee_amount − Stripe_fees` |
+| **Destination charges + on\_behalf\_of** | **Platform** still pays (changes statement descriptor, merchant of record, and dispute management — see `charge-patterns.md`) | Same as above |
+| **Direct charges** (`fees_collector: "stripe"`) | **Connected account** pays Stripe fees | `application_fee_amount` (platform retains full fee — Stripe fees paid by connected account) |
+| **Direct charges** (`fees_collector: "application"`) | **Platform** pays Stripe fees | `application_fee_amount − Stripe_fees` |
+| **Separate charges & transfers** | **Platform** pays Stripe fees | Must account for fees in transfer math |
+
+> **Note:** Who pays Stripe fees on direct charges depends on the [`fees_collector` responsibility setting](https://docs.stripe.com/connect/direct-charges-fee-payer-behavior.md). When `fees_collector: "stripe"` (the default for SaaS), the connected account pays Stripe fees and the platform retains their full `application_fee_amount`. With `fees_collector: "application"` (used with Platform Pricing Tool and platform-owned pricing), the platform pays Stripe fees instead.
+
+**Profitability warning:** If the platform’s desired fee margin is low relative to Stripe’s processing fees for their region, destination charges may cause per-transaction losses unless the `application_fee_amount` is set high enough to cover Stripe fees + the platform’s margin. DO NOT make definitive profit and loss claims with specific dollar amounts — pricing is situation-dependent.
+
+Strongly recommend:
+
+- The [Platform Pricing Tool](https://dashboard.stripe.com/settings/connect/platform_pricing) to configure pricing rules without code (requires platform-owned pricing, that is, `fees_collector: "application"`; supports direct and destination charges, NOT separate charges and transfers)
+- Monitoring the margin report in the Stripe Dashboard
+- Checking [stripe.com/pricing](https://stripe.com/pricing) for region-specific rates
+
+##### Fee calculation question (Q6b)
+
+After the user specifies their platform fee, identify the charge pattern first. This question applies to **destination charges** only. For **separate charges and transfers**, don’t ask how to set `application_fee_amount` — use transfer math instead. For direct charges with Stripe-owned pricing (`fees_collector: "stripe"`), the connected account pays Stripe fees and this question is moot. For direct charges with platform-owned pricing (`fees_collector: "application"`), the platform pays Stripe fees — use the Platform Pricing Tool.
+
+**IMPORTANT: With destination charges, the platform ALWAYS pays Stripe’s processing fees.** They are deducted from the platform’s balance, not the connected account’s. The platform can’t make connected accounts pay Stripe fees directly. The choice is how to calculate `application_fee_amount`.
+
+Use Option A and Option B below as reference material for destination charges.
+
+**Option A — Include Stripe fee estimate in application\_fee\_amount (recommended for low margins)** The `application_fee_amount` includes BOTH an estimated Stripe processing fee and the platform’s fee. The platform takes a larger cut to cover both its margin and Stripe’s fee. The platform’s fee percentage is preserved as net margin.
+
+```
+Concept: application_fee_amount = estimated Stripe processing fee + platform margin
+Platform NET = the platform's full fee percentage (margin preserved — Stripe fee covered by the higher application_fee_amount)
+Connected account receives = charge amount − application_fee_amount
+```
+
+**Option B — Platform fee only (platform absorbs Stripe fees)** The `application_fee_amount` is only the platform’s cut. Stripe processing fees reduce the platform’s net. Only viable when the platform fee is substantially higher than Stripe’s processing fees.
+
+```
+Concept: application_fee_amount = platform fee only
+Platform NET = platform fee − Stripe processing fee
+Connected account receives = charge amount − application_fee_amount
+```
+
+**Recommendation output rule:** choose the single most appropriate option for the specific scenario instead of always presenting both. Keep the other option as reference material and show it only when the user asks for alternatives and tradeoffs.
+
+**Decision guidance:** If the platform fee appears low or uncertain relative to processing fees (check [stripe.com/pricing](https://stripe.com/pricing)), recommend Option A to preserve platform margin (or switch to direct charges when appropriate). Use Option B only when fee headroom is clearly high and the platform explicitly accepts absorbing fee variance.
+
+**For destination charges, NEVER say “seller pays Stripe fees” or “connected account pays Stripe fees.”** The platform always pays. The choice is whether to set a higher `application_fee_amount` to preserve the platform’s margin.
+
+**Minimum charge amounts:** Stripe enforces minimum charge amounts by currency. For micro-payment platforms with very small transaction amounts, warn the user that:
+
+- Stripe enforces minimum charge amounts that vary by currency
+- On very small charges, the fixed fee component becomes a large percentage of the transaction
+- Micro-payments may need batching or alternative approaches to be economically viable
+
+##### Fee guidance principles
+
+When presenting fee recommendations:
+
+- DO NOT hardcode specific processing fee amounts (for example, “2.9% + $0.30”) — these are US-only and vary by region, card type, and payment method
+- DO NOT make definitive profit and loss claims (for example, “you WILL lose money”) — say “you may lose money at standard rates”
+- DO link to [stripe.com/pricing](https://stripe.com/pricing) for region-specific rates
+- DO strongly recommend the [Platform Pricing Tool](https://dashboard.stripe.com/settings/connect/platform_pricing)
+- DO recommend monitoring the margin report in the Stripe Dashboard
+- DO explain the concept of `application_fee_amount` and what it should include based on the calculation choice
+- DO return one recommended fee option for the scenario (don’t always present both Option A and Option B)
+- DO prefer margin-preserving recommendations in low-margin or uncertain-margin scenarios
+- DO use transfer-math framing for separate charges and transfers (never `application_fee_amount`)
+- NEVER say “seller pays Stripe fees” or “connected account pays Stripe fees” for destination charges — the platform always pays
+
+##### Fee sanity checks
+
+- If the Platform Pricing Tool is used, ensure `application_fee_amount` is NOT set on the PaymentIntent — explicit `application_fee_amount` overrides the Platform Pricing Tool.
+- `application_fee_amount` is NOT compatible with separate charges and transfers. NEVER recommend it for separate charges and transfers.
+- For separate charges and transfers, validate the transfer-math model (`charge_amount − total_transfers − Stripe_fees`) to ensure expected platform margin.
+- Platforms based outside Brazil can’t collect application fees from Brazilian connected accounts due to regulatory requirements. Same restriction applies to Malaysia.
+- Use `amount` on the ApplicationFee object, not the charge field, for accurate fee reporting.
+- For small transactions (for example, $1–$5), fees may be large relative to proceeds. Consider creative ways to combine transactions.
+- **Low-complexity margin path:** Direct charges with Stripe-owned pricing. Stripe handles pricing complexity; the platform charges a SaaS fee or application fee on top.
+- If the platform owns pricing with any charge type: warn about potential per-transaction losses. Strongly recommend the Platform Pricing Tool and monitoring the margin report.
+
+#### Loss Liability (Negative Balance Liability)
+
+**Loss liability and risk management are TWO SEPARATE decisions.** The current skill MUST NOT conflate them.
+
+| Concept | What it means | Where configured |
+| --- | --- | --- |
+| **Negative balance liability** | Who is financially LIABLE when disputes and chargebacks create negative balances on connected accounts | Configured when creating the connected account; may require visiting the Stripe Dashboard → Connect platform profile to acknowledge understanding of how negative balance liability works |
+| **Risk management** | Who DETECTS and PREVENTS fraud (Radar, rules, monitoring) | Code + Dashboard (Radar settings) |
+
+You can have Stripe own loss liability while still using Radar for fraud detection. Radar is available regardless of loss liability setting.
+
+##### Loss Liability Recommendations by Business Model
+
+**Recommendation depends on charge pattern:**
+
+- **Marketplaces (destination or separate charges):** Platform-owned loss liability. This is **required** for destination charges — it enables connected account balances to go negative, which the platform needs to reverse transfers (for example, for refunds or disputes). Also required for Express dashboard today.
+- **SaaS (direct charges):** Stripe-owned loss liability. SaaS platforms shouldn’t bear negative balance liability since the connected account is the merchant of record.
+- **Enterprise or white-label:** Platform-owned. Full control = full responsibility.
+
+| Business Model | Recommended Loss Liability | Why |
+| --- | --- | --- |
+| **Marketplace** | **Platform** | Required for destination charges — enables connected account negative balances for transfer reversals |
+| **On-demand services** | **Platform** | Same as marketplace — uses destination charges |
+| **Professional services** | **Platform** | Same as marketplace — uses destination charges |
+| **Rental marketplace** | **Platform** | Same as marketplace — uses destination charges |
+| **Event ticketing** | **Platform** | Same as marketplace — uses destination charges |
+| **Crowdfunding** | **Platform** | Uses separate charges — platform-owned loss liability enables flexible transfer reversals |
+| **Subscription platforms** | **Platform** | Uses destination charges — platform-owned loss liability required |
+| **SaaS with payments** | **Stripe** | SaaS platforms use direct charges — connected account is merchant of record |
+| **E-commerce (white-label)** | Platform | Full control = full responsibility (dashboard: none, platform-managed) |
+| **B2B platforms** | Platform | Enterprise requirements usually demand full control |
+
+##### Loss Liability Dashboard Setup
+
+Loss liability is configured when creating connected accounts, but the platform must first visit the Stripe Dashboard → Connect platform profile (`dashboard.stripe.com/settings/connect/platform-profile`) to acknowledge understanding of how negative balance liability works.
+
+The platform profile page asks about “Negative balance liability” (formerly called “loss liability”). The choice determines which account configuration combinations are available:
+
+- **Stripe manages losses** → Set `defaults.responsibilities.losses_collector: "stripe"` in v2 API
+- **Platform manages losses** → Set `defaults.responsibilities.losses_collector: "application"` in v2 API
+
+When guiding users through this page, always:
+
+1. Explain what loss liability means in plain language with a concrete example
+2. Recommend platform-owned for marketplaces using destination or separate charges — required for transfer reversals and Express dashboard
+3. Recommend Stripe-owned for SaaS platforms using direct charges
+4. Keep this decision separate from Radar and fraud detection
+
+### Integration Antipattern Warnings
+
+> **Read the full compatibility matrix in `compatibility-matrix.md`.** This section is a quick reference.
+
+#### Common Blocked Combinations
+
+These combinations are true antipatterns that Stripe will never support. Do NOT recommend them:
+
+1. **`losses_collector: "stripe"` + destination charges** — Liability and fee behavior don’t align with this charge pattern. Treat as BLOCKED when `losses_collector: "stripe"` is selected.
+2. **`losses_collector: "stripe"` + separate charges and transfers (including `on_behalf_of`)** — Same negative balance mechanism as destination charges. Platform can’t recover funds from connected accounts that only receive transfers.
+3. **Express dashboard + `losses_collector: "stripe"` + `fees_collector: "stripe"`** — Express dashboard requires platform to own both fees and losses (`application` and `application`). This is a hard API constraint — setting Express with Stripe-owned pricing produces an API rejection.
+4. **`dashboard: "full"` + destination charges or separate charges and transfers** — Full dashboard has reduced payment and dispute detail for destination and separate charges. Full dashboard provides complete payment and dispute management for direct charges only.
+5. **`fees_collector: "stripe"` + `losses_collector: "application"` (Stripe-owned pricing + platform-owned losses)** — This combination is BLOCKED for all charge types. The reverse — `fees_collector: "application"` + `losses_collector: "stripe"` — is SALES-GATED for `full` dashboard and BLOCKED for `none` and `express` dashboards.
+6. **(`on_behalf_of` is out of scope for this guide — redirect to docs or sales if encountered.)** **`on_behalf_of` with destination charges for marketplace use cases** — Do NOT use `on_behalf_of` for marketplaces. `on_behalf_of` makes the connected account the merchant of record, but in a marketplace the platform should be merchant of record. If a user requires `on_behalf_of`, direct them to [Stripe Connect docs](https://docs.stripe.com/connect/charges.md) or [Stripe sales](https://stripe.com/contact/sales).
+7. **`application_fee_amount` with separate charges and transfers** — NOT compatible. Platforms using separate charges and transfers collect fees by transferring less than the charge amount.
+
+#### Blessed Paths (Safe Defaults)
+
+| Business Model | Dashboard | Fees | Losses | Charge Type | Status |
+| --- | --- | --- | --- | --- | --- |
+| **Marketplace** | `express` | `application` | `application` | Destination | CAUTION — recommended path; always include Express dispute-visibility warning (see `compatibility-matrix.md`) |
+| **SaaS** | `full` | `stripe` | `stripe` | Direct | ALLOWED — connected accounts are independent merchants |
+| **Enterprise** | `none` | `application` | `application` | Any | ALLOWED — full platform control |
+
+**Any deviation from these blessed paths should trigger a compatibility check against `compatibility-matrix.md`.** If the user’s choices lead to a BLOCKED combination, don’t present it. Explain why it fails and recommend the nearest allowed alternative.
+
+> **Scope boundary:** This guide supports the blessed paths above. Configurations outside these paths (full+application, `on_behalf_of`, OAuth, non-payments products like Issuing, Treasury, Capital, Tax, or Terminal) should trigger sales-led detection and redirect to docs or sales. `none` dashboard requires platform-owned pricing AND platform-owned losses — no other `none` combination is valid even for sold users.
+
+#### Additional Antipatterns to Watch For
+
+- **OAuth instead of Account Links** — Developers think OAuth is simpler but lose platform control (connected account can disconnect at any time). Recommend Account Links or embedded components.
+- **Custom onboarding** (`dashboard: "none"` + API-based) — Ongoing requirement collection burden and country-specific complexity. Only for platforms with dedicated compliance engineering.
+- **Dashboard DIY without refund and dispute flows** — Platforms build earnings views but skip refund and dispute management. Connected accounts can’t respond to disputes, leading to auto-losses.
+- **Stripe does NOT enforce merchant of record at API level** — Platforms can create charges with any pattern regardless of their onboarding declaration. Code must consistently use the correct charge type for the actual business relationship.

.agents/skills/connect-recommend/references/discovery-questions.md

@@ -0,0 +1,346 @@
+## Discovery questions and decision mappings
+
+Use this reference when running Step 3 discovery. It contains the full user interaction scripts, option mappings, and edge-case logic.
+
+### Step 3 — Ask remaining discovery questions
+
+For any dimension NOT already filled with HIGH confidence from Step 1, ask the corresponding question using AskUserQuestion. Skip questions that were auto-filled. For MEDIUM confidence items where the user confirmed the suggestion, skip those too.
+
+If Step 1 was skipped entirely (user chose “ask me questions instead”), ask all 6 questions one at a time as below. Each question uses AskUserQuestion with clear options.
+
+If the user asks “what account type should I use?” (or similar), reframe during discovery before recommending settings: Accounts v2 uses explicit fields (`dashboard`, `defaults.responsibilities`, and `merchant`/`recipient` by funds flow), not the legacy `type` parameter.
+
+#### Q1: Business model (skip if auto-filled)
+
+Ask the user:
+
+```
+What best describes your business?
+```
+
+Options:
+
+- “Marketplace (buyers + sellers, for example Etsy, Airbnb)”
+- “Platform with service providers (for example Uber, DoorDash)”
+- “SaaS enabling payments (for example Shopify, Squarespace)”
+- “Crowdfunding, subscription, or other model”
+
+#### Q2: Who are the parties? (skip if auto-filled)
+
+Based on Q1, ask the user:
+
+```
+Who are the two sides of your platform?
+```
+
+Options (adapted to Q1 answer):
+
+- “Platform + independent sellers”
+- “Platform + service providers/contractors”
+- “Platform + creators/hosts”
+- “Platform + businesses (B2B)”
+
+#### Q3: Payment flow (skip if auto-filled)
+
+Ask the user:
+
+```
+How should money flow through your platform?
+```
+
+Options:
+
+- “Platform collects, then pays out to sellers automatically (typical marketplace flow)”
+- “Buyers pay sellers directly, platform takes a fee”
+- “Platform processes payments on behalf of sellers”
+- “Platform holds funds, releases to sellers after delivery/confirmation”
+
+Resolving ambiguous payment flow signals: Use the plain-language merchant-of-record definition from the terminology rules: ask who the customer thinks they paid (name on receipt or statement and who handles payment support issues such as refunds and disputes).
+
+**Critical disambiguation rule:** Distinguish payout expectations from checkout ownership. Language like “payments associated with sellers,” “payments belong to sellers,” or “payments tied to their account” usually means sellers should receive their share. That is a payout expectation, not a direct-charge requirement, and destination charges satisfy it through automatic transfers.
+
+When the user’s description contains conflicting signals (for example, “payments should be associated with the seller” but “my platform provides the checkout flow”), treat “platform-provided checkout, booking, or listing UI” as the stronger signal for marketplace flows and default to destination charges. The platform is acting as an intermediary in the customer checkout flow.
+
+Choose direct charges when the behavior matches SaaS enablement: each seller runs their own payment relationship, customers pay the seller directly, seller branding appears on receipts and statements, and seller-side operations handle payment support, refunds, and disputes. Users don’t need to explicitly use merchant-of-record terminology for this to apply.
+
+Hold-and-release detection: If the user selects “Platform holds funds, releases to sellers after delivery/confirmation” OR the business description mentions any of: delivery confirmation before payout, hold-and-release, release on completion, manual transfer trigger, multiple sellers per checkout, or shipping with delayed payout, recommend separate charges and transfers. Destination charges transfer funds automatically upon payment success and can’t hold funds. For hold-and-release, the charge is created on the platform (no `transfer_data`), the platform holds funds in its own balance, and after delivery or service confirmation the platform creates a transfer to the connected account.
+
+Don’t describe destination charges as “holding funds before release” or “initiating transfers after delivery” — that language applies only to separate charges and transfers.
+
+B2B enterprise carve-out: For B2B enterprise platforms with complex billing, multi-vendor purchase orders, or independent settlement timing, prefer separate charges and transfers over destination charges. B2B platforms often need per-vendor invoicing, partial payments, and independent settlement timing that destination charges can’t support. If the user’s needs exceed typical automated patterns (complex multi-vendor billing, purchase orders), trigger Step 3c (sales-led detection).
+
+#### Q4: Dashboard and onboarding (skip if auto-filled or confirmed)
+
+Ask the user:
+
+```
+What level of Stripe access should your sellers/providers have?
+```
+
+Options:
+
+- “Lightweight Express dashboard — simple view of earnings/payouts (recommended)”
+- “Full Stripe dashboard — sellers manage their own Stripe account independently”
+- “No dashboard — fully embedded or white-labeled in my platform”
+
+Map answers to v2 config:
+
+- “Lightweight Express” → `dashboard: "express"`, `onboardingMethod: "embedded"`
+- “Full Stripe dashboard” → `dashboard: "full"`, `onboardingMethod: "embedded"`
+- “No dashboard” → `dashboard: "none"`, `onboardingMethod: "embedded"`
+
+When selecting `dashboard: "none"`, include this warning:
+
+```
+WARNING: dashboard: none — Full Scope Warning:
+- You must build custom onboarding and ongoing remediation logic (higher operational overhead than embedded/hosted)
+- You must build refund management UI (connected accounts have no Stripe dashboard)
+- You must build dispute management flows (connected accounts can't manage disputes themselves)
+- You must build earnings/payout views for sellers
+Consider embedded components as a middle ground for less maintenance.
+```
+
+Dashboard access for sellers or providers:
+
+- Express dashboard: provide sellers an Express login link from `stripe.accounts.createLoginLink(accountId)`.
+- Full Stripe dashboard: direct sellers to log in at [dashboard.stripe.com](https://dashboard.stripe.com).
+- No dashboard: platform uses embedded components or custom UI backed by Stripe API data.
+
+Dashboard selection logic:
+
+- **`dashboard: "full"`** when any of these apply:
+  - Sellers or providers “run their own business” or “want independence”
+  - SaaS-with-payments model
+  - Businesses described as established or enterprise
+  - Direct charges pattern
+  - User asks for full dashboard / independent account management
+  - Fees and losses are both Stripe-managed
+- **SaaS-with-payments critical rule:** If the business is SaaS enabling independent sellers to accept payments and sellers are independent, use `dashboard: "full"`, `chargePattern: "direct"`, and `onboarding: "embedded"`.
+- **`dashboard: "express"`** when any of these apply:
+  - Sellers or providers are individual or less technical
+  - Marketplace model with platform-owned checkout
+  - Destination charges pattern
+  - User wants a lightweight dashboard for sellers
+  - Cobranding benefit is desired
+- **`dashboard: "none"`** when white-label or fully embedded control is required.
+
+Non-technical user language (“not tech savvy”) is a supporting signal, not a standalone override. It should reinforce a marketplace recommendation (`dashboard: "express"`), but it doesn’t override SaaS classification when sellers are independent businesses that own customer payment relationships.
+
+When recommending, always explain why:
+
+- Express: cobranded seller dashboard with minimal maintenance.
+- Full: independent seller control over payments, refunds, and payouts.
+- None: white-labeled UX; platform owns all seller UI views (or uses embedded components).
+
+#### Q5: Dispute and refund responsibility (skip if auto-filled or confirmed)
+
+Ask the user:
+
+```
+Who handles disputes and refunds?
+```
+
+Options:
+
+- “Platform handles disputes and refunds”
+- “Sellers handle their own disputes”
+- “Shared responsibility”
+
+#### Q5b: Risk and fraud management (conditional on Q1 answer)
+
+There are two risk types: transactional risk (fraudulent payments and chargebacks) and merchant fraud. They can be managed independently.
+
+Key principle: recommend Stripe-managed risk when possible. See the “Risk Management by Business Model” section in `decision-matrix.md` for detailed context.
+
+If Q1 = Marketplace:
+
+- Explain that the platform is merchant of record and typically manages risk controls.
+- Ask:
+  ```
+  How do you want to handle fraud protection?
+  ```
+- Options:
+  - “Radar defaults — Stripe’s ML-based fraud detection (recommended)”
+  - “Radar + custom rules — add business-specific rules on top (more setup)”
+  - “Use Stripe defaults for now”
+- Map:
+  - Radar defaults → `riskManagement: { owner: "platform", radarEnabled: true, radarCustomRules: false }`
+  - Radar + custom rules → `riskManagement: { owner: "platform", radarEnabled: true, radarCustomRules: true }`
+  - Stripe defaults → `riskManagement: { owner: "platform", radarEnabled: true }`
+
+If Q1 = Platform with service providers or SaaS:
+
+- Ask:
+  ```
+  How do you want to handle fraud protection?
+  ```
+- Options:
+  - “Let Stripe manage it — lower implementation overhead (recommended)”
+  - “I’ll manage it with Radar — more control, more complexity”
+  - “Use Stripe defaults for now”
+- Map:
+  - Stripe-managed → `riskManagement: { owner: "stripe", radarEnabled: false }`
+  - Platform-managed Radar → `riskManagement: { owner: "platform", radarEnabled: true, radarCustomRules: true }`
+  - Stripe defaults → `riskManagement: { owner: "stripe", radarEnabled: false }`
+
+If Q1 = Crowdfunding, subscription, or other:
+
+- Skip and default to `riskManagement: { owner: "stripe", radarEnabled: false }`.
+
+#### Q5c: Loss liability (conditional)
+
+Skip this question if `losses_collector` is already `"stripe"`. Ask only when platform ownership is relevant (destination or separate).
+
+Read the “Loss Liability (Negative Balance Liability)” section in `decision-matrix.md`.
+
+Key rule: negative balance liability (who is financially liable) is separate from risk management (who detects fraud).
+
+Defaults:
+
+- Marketplace destination or separate: platform-owned liability and platform-owned pricing.
+- SaaS direct: Stripe-owned liability and Stripe-owned pricing.
+
+Suggested explanation script:
+
+```
+One more decision: loss liability.
+
+This determines who bears the financial cost if a customer disputes a charge
+or fraud occurs. It's separate from fraud detection (Radar handles that).
+
+Example: A customer disputes a $100 charge.
+  → Platform-owned: Stripe debits the platform's balance $100. The platform must
+    reverse the prior transfer to recover funds from the connected account — which
+    may drive that account's balance negative.
+    Required for marketplaces — `losses_collector: "application"` enables connected
+    account balances to go negative for transfer reversals.
+  → Stripe-owned: If the connected account's balance goes negative and remains
+    unresolved, Stripe absorbs the unrecovered amount.
+    Recommended for SaaS — simpler, connected account is already merchant of record.
+```
+
+For marketplace destination or separate:
+
+- Auto-select platform-owned and explain that transfer reversals require connected account negative balance support.
+
+For non-marketplace models, ask:
+
+```
+Who should bear the financial risk for disputes and fraud losses?
+```
+
+Options:
+
+- “Stripe — simpler, less financial risk (recommended for SaaS)”
+- “My platform — more control, I have a risk team”
+- “Explain the tradeoffs”
+
+If user asks for tradeoffs, show side-by-side pros and cons and then re-ask with first two options.
+
+Map answers:
+
+- Marketplace, destination, or separate → `lossLiability.owner = "platform"`
+- SaaS or direct + Stripe → `lossLiability.owner = "stripe"`
+- SaaS or direct + platform → `lossLiability.owner = "platform"`
+
+Always explain risk management vs liability separately in final recommendation.
+
+#### Q6: Fee structure (skip if auto-filled)
+
+Ask the user:
+
+```
+How do you want to charge your platform fee?
+```
+
+Options:
+
+- “Percentage of each transaction (for example, 8%)”
+- “Flat fee per transaction (for example, $2)”
+- “Tiered/custom pricing”
+- “Subscription + transaction fee”
+
+If user chose percentage or flat fee, ask:
+
+```
+What's your platform fee?
+```
+
+Options:
+
+- “5%”
+- “10%”
+- “15%”
+- “Other (I’ll specify)”
+
+#### Q6b: `application_fee_amount` calculation (conditional)
+
+Ask only when charge pattern is destination. Don’t ask about `application_fee_amount` for separate charges and transfers — use transfer math instead. For direct charges with Stripe-owned pricing (`fees_collector: "stripe"`), the connected account pays Stripe fees and this question is moot. For direct charges with platform-owned pricing (`fees_collector: "application"`), the platform pays Stripe fees — use the Platform Pricing Tool.
+
+Read the “Fee Calculation & Fee Economics” section in `decision-matrix.md` for full context.
+
+Key rule: with destination charges, Stripe processing fees are deducted from the platform balance. The platform can’t make connected accounts pay those fees directly.
+
+Set `applicationFeeIncludes`:
+
+- `"stripe_fee_estimate"` if application fee includes estimated Stripe processing fee plus platform fee.
+- `"platform_fee_only"` if platform absorbs Stripe processing fees from margin.
+
+Store:
+
+```json
+"feeStructure": {
+  "type": "percentage",
+  "platformFeePercent": <value>,
+  "applicationFeeIncludes": "stripe_fee_estimate" | "platform_fee_only",
+  "description": "application_fee_amount = X% platform fee [+ estimated Stripe processing fee | only]"
+}
+```
+
+Fee language interpretation rules:
+
+- “X% inclusive of all fees” / “X% total take” → absorb Stripe fees (`platform_fee_only`).
+- “X% on top of processing fees” / “X% above Stripe fees” → include Stripe estimate (`stripe_fee_estimate`).
+- “X% platform fee” without qualifier → ask preferred option, or default to `stripe_fee_estimate`.
+
+Critical rule: if `applicationFeeIncludes = "stripe_fee_estimate"`, `application_fee_amount` must include both platform fee and Stripe fee estimate.
+
+### Step 3b — Hybrid business model detection
+
+If the business has two distinct payment flows (for example, SaaS + marketplace), don’t force one charge pattern.
+
+1. Identify both sides and expected charge pattern.
+2. Include this warning:
+   ```
+   **Dual charge patterns add significant complexity.** Supporting both direct and
+   destination charges means two separate payment flows, two sets of webhook handlers,
+   and more testing scope. Consider launching with the side that's most critical to
+   your business first, then adding the second once the first is stable.
+   ```
+3. Explain shared account reality: the same connected account may participate in multiple flows.
+4. Show fee arithmetic separately for each side.
+
+### Step 3c — Sales-led and scope detection
+
+Trigger this check when any of these appear:
+
+- `dashboard: "full"` + `fees_collector: "application"` request
+- `on_behalf_of` requirements
+- Fully custom API onboarding
+- OAuth or connecting existing Stripe accounts
+- Cross-border fund intermediation requirements
+- Complex B2B multi-vendor billing and settlement timing
+- Regulated finance, remittance, or segregation signals
+- Issuing, Treasury, Capital, Tax, or Terminal alongside Connect
+
+For non-payments products (Issuing, Treasury, Capital, Tax, Terminal):
+
+- State that this guidance covers Connect payments integration only.
+- Point to product docs and mention possible interoperability considerations.
+
+For enterprise or sales-assisted signals:
+
+- Ask whether they’re already working with a Stripe sales or account team.
+- If yes: ask whether the account team already recommended an integration pattern.
+- If yes with a recommendation: align to it, call out any compatibility constraints, and suggest confirming final details with that team.
+- If no: produce a recommendation but remind them to check with their Stripe representative before implementation.

.agents/skills/connect-recommend/references/recommendation-template.md

@@ -0,0 +1,221 @@
+## Recommendation output template and component mapping
+
+Use this reference to generate the recommendation output. It defines the full output structure, section requirements, fee guidance rules, and template formatting.
+
+### Output requirements
+
+Output MUST include all of these sections:
+
+- Account configuration (`dashboard`, `fees_collector`, `losses_collector`) with explicit Accounts v2 declaration, no legacy `type`
+- `merchant` configuration for direct charges
+- `recipient` configuration for destination or separate charges
+- Charge pattern with 2-3 sentence rationale
+- Seller and provider onboarding flow with onboarding method choice and rationale
+- Dashboard access flow and rationale by access mechanism (`express` login links, `full` direct `dashboard.stripe.com` access, `none` embedded-components-primary interface)
+- OAuth scope guidance when connecting existing Stripe accounts (only when user mentions OAuth or existing accounts; see compatibility-matrix section 4a)
+- Fee structure with platform fee model, fee-payer recommendation, funds-flow diagram, and stripe.com/pricing link
+- Embedded component recommendations tied to charge-pattern compatibility, with required `notification_banner` and charge-pattern caveats
+- Webhook integration section (one sentence only; details deferred to build skill)
+- Onboarding status gating using v2 capability paths
+- Loss liability explanation separate from risk management
+- Use separate headings for negative balance liability and risk management (don’t combine into one paragraph)
+- For destination or separate with `losses_collector: "application"`, explain the causal chain in plain language: platform owns negative balance liability, connected-account balances can go negative when needed, and transfer reversals can be used for dispute recovery
+- SaaS monetization choices (transaction fees vs recurring SaaS fees), with `customer_account` guidance only for SaaS billing connected accounts
+- `application_fee_amount` explanation and calculation mode
+
+If any section is missing, add it before moving on.
+
+### Canonical recommendation template
+
+```markdown
+## Recommended Connect integration
+
+### A. Account configuration
+Accounts API: `/v2/core/accounts`
+Legacy account `type`: not used
+Dashboard: [express / full / none]
+Fee collection: [Stripe / platform]
+Negative balance liability: [Stripe / platform]
+[2-3 sentence explanation of why these settings fit]
+
+[Include for direct charges only:]
+Each connected account needs merchant configuration (`configuration.merchant`) for direct charges.
+
+[Include for destination or separate charges only:]
+Each connected account needs recipient configuration (`configuration.recipient`) with `stripe_transfers` on `stripe_balance` requested, so the account can receive transfers from the platform.
+
+### B. Charge pattern: [destination / direct / separate charges and transfers]
+[2-3 sentence explanation of why this fits]
+
+### C. {sellerRole} onboarding flow
+Onboarding method: [embedded / Stripe-hosted]
+[2-3 sentence explanation of why this method was chosen over the alternative.]
+
+[Describe the full onboarding flow: sign up, create account, onboarding with the chosen method, Stripe verification, capability status verification, handling ongoing requirements, checking capability status on an ongoing basis. Only enable live transactions when the necessary capabilities are active.]
+
+### D. Payments dashboard access for {sellerRole}
+- If dashboard=express: explain connected accounts access the Express dashboard through platform-generated Express login links, with embedded components for in-app workflows
+- If dashboard=full: explain connected accounts log in directly at `dashboard.stripe.com`
+- If dashboard=none: explain connected accounts don't use Stripe Dashboard login and embedded components are the primary interface for connected accounts
+
+### E. Embedded components
+Recommended [Connect embedded components](https://docs.stripe.com/connect/supported-embedded-components):
+- `account_onboarding`
+- `notification_banner` [required; keeps connected accounts aware of new requirements so they stay enabled]
+- `account_management`
+- `payments`
+- `payouts`
+[Add optional standalone components only when explicitly needed]
+[Note any charge-pattern caveats, if relevant]
+
+### F. Webhook integration
+Use webhooks for reliable payment confirmation, especially for async payment methods. Always verify incoming webhook signatures before processing event data ([webhook signature verification](https://stripe.com/docs/webhooks/signatures)). Specific events and implementation details are covered in the build skill.
+
+### G. Onboarding status gating
+Verify capability statuses with `stripe.v2.core.accounts.retrieve(id)` before enabling payouts and transfers:
+- Direct: `configuration.merchant.capabilities.card_payments.status === 'active'`
+- Destination or separate: `configuration.recipient.capabilities.stripe_balance.stripe_transfers.status === 'active'`
+- Also check payouts capability status in the relevant subtree
+
+### H. Fee structure
+- Platform fee model: [percentage / flat / tiered / mixed]
+- `application_fee_amount` strategy: [platform fee only | platform fee + estimated Stripe processing fee]
+- [Describe the fee structure, whether customers pay the connected account (seller) or platform, whether fees are paid to Stripe or to the platform, and whether anything is transferred from the platform to the seller. Pricing varies by region or payment method — check [stripe.com/pricing](https://stripe.com/pricing).]
+- [Funds flow diagram with seller or provider net amount explanation:]
+
+   {customerRole} pays ${amount}
+         │
+         ▼
+  ┌───────────────┐
+  │  {platform}   │ ─── keeps {X}% minus processing fees
+  └──────┬────────┘
+         │ transfer ({amount} minus {X}%)
+         ▼
+  ┌───────────────┐
+  │  {sellerRole} │ ─── receives {amount} minus {X}%
+  └───────────────┘
+
+### I. SaaS monetization (if applicable)
+State the monetization choice clearly: transaction fees (`application_fee_amount` or Platform Pricing Tool, not both), recurring SaaS or service fees, or both when justified.
+Use `customer_account` only when charging recurring SaaS or service fees to connected accounts (v2 SetupIntent/Subscription calls).
+Do NOT apply `customer_account` guidance to marketplace subscription or fan-to-creator recurring-payment flows.
+Do NOT recommend creating a separate v1 Customer object for SaaS billing connected accounts.
+
+### J. Implementation plan
+1. [Account setup tasks]
+2. [Onboarding flow tasks]
+3. [Payments and fund-flow tasks]
+4. [Webhook and readiness-gating tasks]
+5. [Go-live checks]
+
+### K. Risk and liability
+- Negative balance liability owner: [your platform / Stripe]
+- Risk controls owner: [your platform / Stripe]
+- [Any required warnings from compatibility checks]
+
+### L. Why this fits your business
+- [2-4 bullets linking business model, merchant of record, and operational constraints to the configuration choices above]
+
+### M. Open questions
+- [Any unresolved assumptions to confirm before implementation]
+```
+
+### Required wording snippets
+
+#### Recipient configuration wording (destination or separate)
+
+Include this wording (adapted to context) when charge pattern is destination or separate charges and transfers:
+
+“Each connected account needs the recipient configuration (`configuration.recipient`) with `stripe_transfers` on `stripe_balance` requested, so the account can receive transfers from the platform. Marketplace connected accounts should NOT request merchant configuration or `card_payments` capability — this is unnecessary and causes longer onboarding.”
+
+#### Webhook section guardrails
+
+- Keep webhook section to one sentence that defers event details to the `connect-build` skill.
+- Do NOT list concrete webhook event names in recommend output.
+- Do NOT create a “Required Webhooks” section.
+- Do NOT mention embedded components in the webhook section.
+
+### Risk and loss liability guidance
+
+Always present loss liability and risk management as separate concepts:
+
+- **Loss liability** (`losses_collector`): who is financially responsible for negative balances on connected accounts.
+- **Risk management**: who detects and prevents fraud (Stripe Radar vs platform-managed).
+
+When `losses_collector: application` (platform owns loss liability), emphasize that Radar is essential — fraudulent charges that slip through come directly out of the platform’s balance. For marketplaces using destination charges, the platform is merchant of record and must manage risk.
+
+### Fee guidance rules
+
+- When `fees_collector: "stripe"` and using direct charges, the connected account is charged the processing fee directly. The `application_fee_amount` is in addition to that and goes directly to the platform.
+
+- With destination or separate charges, the platform ALWAYS pays Stripe’s processing fees.
+
+- Do NOT hardcode Stripe fee amounts (rates vary by region, card type, method, and negotiated pricing).
+
+- Do NOT make absolute profit and loss guarantees.
+
+- Do NOT recommend `application_fee_amount` for separate charges and transfers (instead, retain fee by transferring less than charge amount).
+
+- Do NOT set explicit `application_fee_amount` when Platform Pricing Tool is used (doing so will override tool logic).
+
+- Always link to [stripe.com/pricing](https://stripe.com/pricing).
+
+- For platform-owned pricing, recommend [Platform Pricing Tool](https://dashboard.stripe.com/settings/connect/platform_pricing) and [margin report](https://docs.stripe.com/connect/margin-reports.md). Platform Pricing Tool and explicit `application_fee_amount` are mutually exclusive — don’t recommend both.
+
+- Mention Brazil or Malaysia cross-border fee-collection constraints where relevant.
+
+- For low flat fees on variable amounts, warn about margin compression at larger ticket sizes.
+
+- For very small transactions, warn about currency minimums and fee-to-proceeds effects.
+
+#### Fee output requirements
+
+Every recommendation MUST explicitly:
+
+- Name the `applicationFeeIncludes` value (`stripe_fee_estimate` or `platform_fee_only`) and explain what it means for the platform’s margin
+- Show a funds flow diagram with the platform fee
+- Recommend the single most appropriate fee approach for the scenario; explain both approaches only when the platform’s margin goal or constraints are genuinely unclear (see Funds-flow comparison guidance below)
+
+#### Low-margin warning template
+
+This section only applies when the platform is NOT using direct charges with Stripe-owned pricing (`fees_collector: "stripe"`). In that configuration, the connected account pays Stripe fees directly and this concern doesn’t apply.
+
+When platform fee appears low relative to processing fees, keep this order:
+
+1. **Warn first**: explicitly state that the selected platform fee may be below Stripe processing fees, so the platform may lose money per transaction when it absorbs fees.
+2. **Show downside before fix**: include one concise illustrative example of net margin without fee passthrough (label assumptions clearly and link to [stripe.com/pricing](https://stripe.com/pricing)).
+3. **Then provide the fix**: recommend margin-preserving `application_fee_amount` logic (platform fee + estimated Stripe fee) and explain why it preserves margin.
+4. **Close with validation path**: link to [stripe.com/pricing](https://stripe.com/pricing) and recommend monitoring the margin report.
+
+Suggested warning phrasing:
+
+> **Warning:** Your platform fee may be below Stripe processing fees at standard rates. With this charge pattern, your platform pays Stripe processing fees on every transaction. If you absorb those fees, your net per transaction may be negative. Check [stripe.com/pricing](https://stripe.com/pricing) for your region and payment-method mix.
+
+#### Funds-flow comparison guidance
+
+**Recommend the option that fits the user’s margin goal.** Present both options only when the margin goal or constraints are genuinely unclear.
+
+To disambiguate, ask: “Are you trying to make X% margin, or do you want your users to pay X%?” The answer determines which option to recommend.
+
+When destination or direct flow uses `application_fee_amount`, choose guidance as follows:
+
+- Margin-preserving recommendation: `application_fee_amount = platform fee + estimated Stripe processing fee` (still an approximation — actual rates vary by region, card type, and payment method)
+- Platform-absorbs-fees recommendation: `application_fee_amount = platform fee only`
+- If unclear: present both options concisely with the tradeoff and call out what assumption decides the recommendation
+
+### Onboarding status gating details
+
+Always include gating guidance to prevent transfers and payouts for unready accounts. `stripe_balance.payouts` is auto-requested when `card_payments` or `stripe_transfers` is requested, so do NOT explicitly request `stripe_balance.payouts` in account create/update calls.
+
+Use:
+
+- `configuration.merchant.capabilities.card_payments.status`
+- `configuration.merchant.capabilities.stripe_balance.payouts.status`
+- `configuration.recipient.capabilities.stripe_balance.stripe_transfers.status`
+- `configuration.recipient.capabilities.stripe_balance.payouts.status`
+
+Do NOT rely on v1 `charges_enabled` or `payouts_enabled` booleans for this flow.
+
+### Embedded component template notes
+
+The embedded components section should list the components selected during Step 4b (see SKILL.md for selection logic and charge-pattern compatibility caveats). See [Connect embedded components](https://docs.stripe.com/connect/supported-embedded-components.md) for documentation.

.agents/skills/connect-recommend/references/terminology-rules.md

@@ -0,0 +1,91 @@
+## Terminology rules
+
+When generating text that will be shown to the user, follow these rules strictly. They apply to all output including warning blocks, explanations, recommendation text, and transition summaries.
+
+This plugin is a public artifact. Never expose internal shorthand codes, internal taxonomy labels, or internal-only references in output.
+
+Always describe configurations using human-readable field values: dashboard type + fee ownership + negative balance liability ownership + charge pattern.
+
+Use full, user-friendly terminology in prose. Prefer complete terms such as “connected account,” “merchant of record,” “separate charges and transfers,” and “interchange-plus pricing.” Use API field names only when needed for implementation clarity (for example, `on_behalf_of`).
+
+Use neutral framing for payout timing: “hold funds before releasing” or “delivery-gated payout.”
+
+Describe pricing outcomes as margin mechanics and tradeoffs. Don’t guarantee profitability.
+
+### Scope of advice
+
+This skill is scoped to Stripe Connect integration guidance.
+
+- Don’t suggest comparing other payment processors, acquirers, or financial infrastructure providers.
+- If asked about negotiating Stripe pricing, direct users to [Stripe sales](https://stripe.com/contact/sales) for volume-based or custom pricing discussions.
+- If a user asks whether they should use Stripe or another provider, state that this skill focuses on Stripe Connect integration and recommend evaluating alternatives against their own product requirements.
+
+Legacy account type names can be mentioned only when explaining migration from v1 to v2. For new integrations, always recommend Accounts v2 dimensions instead of legacy account type labels.
+
+### Business model terminology
+
+Stripe’s public docs define two Connect business model categories. Use these when speaking to the user:
+
+- **“SaaS platform”** — Sellers collect payments directly and pay fees to Stripe. Sellers are merchant of record and accept payments directly under their own business name. For example, an eCommerce platform that processes payments under the hood for independent sellers.
+- **“Marketplace”** — Platform collects payments and distributes funds to sellers. For example, a food delivery service that connects customers with restaurants and drivers.
+
+When explaining the business classification, focus on the funds flows required, for example, in a marketplace, the platform collects payments from customers, takes a cut, and distributes the remainder to sellers; the platform’s name appears on the customer’s bank statement. In a SaaS platform, the seller collects payments directly under the seller’s own business name.
+
+Do NOT use:
+
+- “service marketplace” (service-based businesses are still “marketplaces”)
+- “platform with service providers” in final output (acceptable in Q1 options to help the user self-identify, but the classification result is “marketplace”)
+- Compound or invented terms: “marketplace platform”, “SaaS marketplace”, and similar mashups.
+
+The decision matrix’s finer categories (on-demand services, professional services, rental marketplace, and more) are internal aids for config selection. Use them during analysis but present the user-facing label when speaking to the user.
+
+### Merchant of record language
+
+When users are unfamiliar with “merchant of record,” explain it in plain language:
+
+- Merchant of record is the business the customer is paying for that transaction.
+- Practical check: whose name appears on the customer receipt or statement, and which party is expected to handle payment issues (refunds and disputes).
+
+Use this as a behavioral signal in discovery:
+
+- If checkout runs in the platform flow and platform branding and operations own payment support, treat as marketplace behavior.
+- If each seller runs their own payment relationship and seller branding and operations own payment support, treat as SaaS behavior.
+
+### Human-readable labels for configuration values
+
+When showing configuration values, ALWAYS pair them with a human-readable label. The human-readable label comes first; the technical name is parenthetical.
+
+| Raw config term | Human-readable label |
+| --- | --- |
+| `losses_collector: application` | Negative balance liability: your platform |
+| `losses_collector: stripe` | Negative balance liability: Stripe |
+| `fees_collector: application` | Fee collection: your platform manages pricing |
+| `fees_collector: stripe` | Fee collection: Stripe bills connected accounts |
+| `dashboard=express` | Dashboard: Express (lightweight view for sellers) |
+| `dashboard=full` | Dashboard: Full Stripe Dashboard (independent access) |
+| `dashboard=none` | Dashboard: none (you build all seller-facing UIs) |
+
+### “Platform-owned” and “Stripe-owned” labels
+
+Don’t use “Platform-owned” or “Stripe-owned” as standalone labels — these are confusing when addressing the platform user directly. Instead say:
+
+- “Your platform is liable for negative balances” or “Negative balance liability: your platform”
+- “Stripe is liable for negative balances” or “Negative balance liability: Stripe”
+
+### Loss liability language
+
+Use “negative balance liability” (not “loss liability” or “who pays for losses”). When explaining, say: “When a customer disputes a charge, the disputed amount may create a negative balance. Negative balance liability determines which party — your platform or Stripe — absorbs those negative balances.”
+
+Do NOT use “who pays” framing — it is too vague. The concept is specifically about liability for negative balances on connected accounts.
+
+### Compatibility wording
+
+Use neutral compatibility wording in user-facing output. Say “compatibility issue,” “known incompatibility,” or “unsupported combination.”
+
+### Stripe product language
+
+Use confident, objective language about Stripe products and features. Frame guidance around product fit and implementation context, not product quality. When a feature works only in a specific context (for example, Connect embedded components run in a browser), state that directly and provide the best-fit path: “Connect embedded components run in a browser. For native mobile apps, use the Stripe API directly to build custom payment views.”
+
+### Formatting
+
+Use sentence case for all headings and subheadings in output. Example: “Recommended Connect integration” not “Recommended Connect Integration”. Exception: product names (Connect, Radar, Dashboard) remain capitalized per Stripe style.

.agents/skills/connect-required-verification-information/SKILL.md

@@ -0,0 +1,412 @@
+---
+name: connect-required-verification-information
+description: >-
+  Use this skill when the user asks what information a Stripe Connect connected
+  account must provide for verification, onboarding, KYC, or account
+  requirements; when they need to compare requirements between connected-account
+  setups; or when they ask which verification fields, documents, or business
+  details are required for a particular platform country, account country,
+  business type, dashboard, service agreement, or capability.
+
+---
+
+## Instructions
+
+The human-accessible version of this documentation allows the user to select connected account fields and regions using a form, and then makes API requests to fetch and display the requirements a connected account with the selected configuration and region must provide. Follow these instructions to fetch the same information.
+
+### Interaction contract
+
+Terminology used in this document:
+
+- `field`: a setup input such as `platformCountry`, `accountCountry`, or `capabilities`
+- `option`: a presented selectable option for a field
+- `value`: the option the user selects, or the free-response value the user provides for a field
+
+Every time you ask the user to provide a value for a field:
+
+- use a multiple-choice question; never stop at a plain free-form prompt or wait for raw chat input
+- if you need free user input, instruct the user to use the question’s free-response field
+- for long option lists, explicitly say that any value from the full validated list is still accepted through the free-response field
+- if the user already provided a valid answer in an earlier message, use that instead of asking again
+
+### Hard rules
+
+You must follow these rules:
+
+- Ask for a field *only* after all of its prerequisite fields are satisfied.
+- Collect setup fields progressively as the flow advances.
+- Ask for one field at a time, or one group of fields only when they are dependency-free at that point in the flow.
+  - For example, ask for `platformCountry` and `accountCountry` separately: the platform country determines which account countries are valid, so asking both together can produce invalid combinations. But you may ask for `dashboardType`, `tosType`, and `legalEntityType` together in one group because their valid options are already known from the same response.
+- If there is ever a conflict between the user’s request and the validated setup, inform the user of the conflict and ask them to revise their setup choices using the [Interaction contract](#interaction-contract). Keep the validated setup aligned with what the user requested without silently dropping the conflict.
+- Follow the [Interaction contract](#interaction-contract) for every user question.
+- When the number of available options exceeds four, *always* print the full validated reference list before asking the multiple-choice question so the user can see the full option space.
+  - When printing countries, always print the full country name followed by its code in parentheses, for example, `Germany (DE)`.
+  - In the multiple-choice question, include a small set of suggested options so the user can move forward with immediate clarity. The reference list above remains the authoritative full set.
+  - Leave the descriptions for the country suggested options blank.
+- For any field with four or fewer valid options, show every valid option directly in the multiple-choice question. Do not print a separate reference list first.
+- Every list of selectable options shown to the user must be pre-validated against all currently known constraints before you display it.
+- Never display an option as selectable if you already know it will be removed, rejected, or auto-adjusted later in the flow.
+  - Present options that stay valid through the current flow.
+- Ask about `capabilities` after `platformCountry`, `accountCountry`, and the downstream validity constraints for that setup are resolved.
+- *Only* ask about `orrProgram` when it is present in the public `programs` returned for the validated setup.
+- If the `businessStructure` map for the chosen `legalEntityType` is empty or contains exactly one key `nil`, skip `businessStructure`. Otherwise, ask for `businessStructure` and always allow a `none` option or leave unselected as a suggested option in the multiple-choice question.
+- If the user decides to change an earlier choice like `platformCountry`, you must invalidate and re-check all downstream fields before continuing.
+- Keep the dependency chain implicit. Share the information the user needs to make progress and keep the experience simple.
+- Use external-facing language when talking to the user. See below to translate the internal API terminology.
+
+#### Internal fields -> External language
+
+| Internal field | External language |
+| --- | --- |
+| `apiVersion` | Accounts API version |
+| `platformCountry` | Platform country |
+| `accountCountry` | Account country |
+| `dashboardType` | Dashboard type |
+| `tosType` | Service agreement |
+| `legalEntityType` | Business type |
+| `businessStructure` | Business structure |
+| `capabilities` | Capabilities |
+| `orrProgram` | Requirements update |
+| `eu2025` | Europe |
+
+### Dependency chain
+
+You must follow this dependency chain exactly:
+
+```mermaid
+flowchart TD
+  apiVersion["apiVersion"] --> capabilities
+  platformCountry --> accountCountry["accountCountry"]
+  accountCountry --> dashboardType["dashboardType"]
+  accountCountry --> tosType["tosType"]
+  accountCountry --> legalEntityType["legalEntityType"]
+  legalEntityType --> businessStructure["businessStructure (optional)"]
+  accountCountry --> capabilities["capabilities"]
+  accountCountry --> orrProgram["orrProgram (only if returned)"]
+  tosType --> capabilities
+  apiVersion --> capabilities
+  dashboardType --> finalRequest["final requirements request"]
+  apiVersion --> finalRequest
+  platformCountry --> finalRequest
+  accountCountry --> finalRequest
+  tosType --> finalRequest
+  legalEntityType --> finalRequest
+  businessStructure --> finalRequest
+  capabilities --> finalRequest
+  orrProgram --> finalRequest
+```
+
+Interpret the diagram literally:
+
+- Ask for a node *only* after all of its incoming dependencies are resolved.
+- Always ask the user for `apiVersion` first. Recommend `v2` by default.
+
+### Inputs you eventually need
+
+By the time you make the final requirements request, you must have validated values for all of the following fields:
+
+- `apiVersion`: `v1` or `v2`
+- `platformCountry`
+- `accountCountry`
+- `dashboardType`
+- `tosType`
+- `legalEntityType`
+- `capabilities`: at least one capability must be selected
+
+You also must have asked for the following optional fields, if they’re applicable:
+
+- `businessStructure`: ask only when `legalEntityType` is not `individual`
+- `orrProgram`: ask only when present in the public `programs` list for that validated setup
+
+### Resolve capabilities
+
+Use this algorithm whenever you build or validate the capability list:
+
+1. Start from `country_map[accountCountry].capabilities`.
+2. Apply `tosType` rules:
+   - if `tosType=recipient`, force `transfers` and remove all other capabilities except `crypto_transfers`, which may be available in rare cases
+   - if `apiVersion=v1` and `crypto_transfers` is selected, also include `transfers`
+3. If `apiVersion=v2`, drop any capability not present in `get-v2-supported-v1-capabilities`.
+4. Show the user the filtered capability list. When the user explicitly asks about a filtered-out capability, clearly explain that the asked-for capability is unavailable for the current setup.
+5. If the filtered list is empty, tell the user that no capabilities are supported for the current setup and ask them to revise earlier setup choices using the [Interaction contract](#interaction-contract) before making the final requirements request.
+6. When asking about `capabilities`, print the full filtered list first, then ask a multiple-choice question that includes the most likely choice or choices based on prior user context.
+7. If the user asks for a capability outside the filtered list, explain why it is unavailable for the current setup.
+
+- Keep the user’s requested capability visible in the conversation and explain the incompatibility directly. For example, if the user asks for `paypal_payments`, but also selected `v2` accounts, explain that `paypal_payments` is unavailable for `v2` accounts, and offer them the choice of switching to `apiVersion` `v1` and choosing `paypal_payments`, or remaining with `apiVersion` `v2` and choosing a different capability.
+
+### Agent flow
+
+When the user asks what verification information they need, use this flow:
+
+1. Ask for `apiVersion`. Recommend `v2`.
+2. Fetch `https://docs.stripe.com/_endpoint/get-platform-countries` and use the public supported list to ask for `platformCountry`.
+3. Fetch `https://docs.stripe.com/_endpoint/get-v2-supported-v1-capabilities` if `apiVersion=v2`.
+4. Fetch `https://docs.stripe.com/_endpoint/get-requirement-selections-for-platform-country?platformCountry=...` with the chosen `platformCountry`.
+5. Ask for `accountCountry` from the returned `country_map` keys.
+6. After `accountCountry` is validated, ask for:
+   - `dashboardType`
+   - `tosType`
+   - `legalEntityType`
+7. After `legalEntityType` is chosen, ask for `businessStructure` if the validated structure map exposes it.
+8. Resolve and ask for `capabilities` using [Resolve capabilities](#resolve-capabilities).
+9. Ask for `orrProgram` only if the validated setup exposes one or more public programs.
+10. If the user’s requested setup doesn’t match the valid options, tell them exactly which parts are invalid or auto-adjusted, then ask the correcting follow-up using the [Interaction contract](#interaction-contract). Keep the mismatch visible, keep the setup grounded in the user’s request, and continue with a structured follow-up question.
+11. Only after the setup is valid, call `https://docs.stripe.com/_endpoint/get-requirements-for-setups` with one top-level setup key `account-setup-A[...]`, including `account-setup-A[apiVersion]`, `account-setup-A[platformCountry]`, `account-setup-A[accountCountry]`, `account-setup-A[dashboardType]`, `account-setup-A[tosType]`, `account-setup-A[legalEntityType]`, optional `account-setup-A[businessStructure]`, one or more `account-setup-A[capabilities][i]`, and optional `account-setup-A[orrProgram]`.
+12. At the end, you must call `https://docs.stripe.com/_endpoint/get-website-requirements-for-capabilities?capabilities[i]=...` and `https://docs.stripe.com/_endpoint/get-mcc-restrictions-for-capabilities?capabilities[i]=...` with the final validated capabilities to check for additional information.
+
+If you are asked to compare two setups or are asked what is needed to update from X to Y, you must follow the validation flow for setup A with a top-level `account-setup-A[...]` key and then follow the flow again for setup B with a second top-level key `account-setup-B[...]` before calling the diffable requirements request.
+
+Treat transport or build failures as retryable helper failures, and reserve unsupported-setup conclusions for successful prerequisite fetches and business validation results.
+
+### curl examples
+
+In these examples, set the docs host to the public site:
+
+```bash
+DOCS_HOST="https://docs.stripe.com"
+```
+
+#### Naive user: “What do I need to verify for a Stripe connected account?”
+
+Ask for `apiVersion`. Recommend `v2`.
+
+Fetch the public platform-country list:
+
+```bash
+curl --get "$DOCS_HOST/_endpoint/get-platform-countries"
+```
+
+Ask the user which `platformCountry` value they want to use. Then, fetch the allowed options for that platform country. This request tells you what is valid next, and you must use it before choosing downstream fields. For example, if the user chose `US`:
+
+```bash
+curl --get "$DOCS_HOST/_endpoint/get-requirement-selections-for-platform-country" \
+  --data-urlencode "platformCountry=US"
+```
+
+After that response returns, collect setup choices as described in the [Agent flow](#agent-flow) section.
+
+#### Smart user: “I have a CA platform, and I want to onboard a FR company connected account to use card payments”
+
+Ask for `apiVersion`. Recommend `v2`.
+
+```bash
+# Step 1: verify the platform country is valid
+curl --get "$DOCS_HOST/_endpoint/get-platform-countries"
+
+# Step 2: fetch all public options for that platform country
+curl --get "$DOCS_HOST/_endpoint/get-requirement-selections-for-platform-country" \
+  --data-urlencode "platformCountry=CA"
+```
+
+From that second response, first verify that FR is a valid account country, then read:
+
+- `country_map.FR.dashboard_types`
+- `country_map.FR.tos_types`
+- `country_map.FR.entity_type_structures`
+- `country_map.FR.capabilities`
+- `country_map.FR.programs`
+
+Then, confirm the user’s requested setup actually matches those available options.
+
+If the user wants `apiVersion=v2`, first fetch and apply the v2 capability filter to compare against the user’s requested capabilities:
+
+```bash
+curl --get "$DOCS_HOST/_endpoint/get-v2-supported-v1-capabilities"
+```
+
+Only when the user’s requested setup actually matches those available options, then call the requirements endpoint.
+
+The requirements endpoint expects nested query-string fields, not a JSON body:
+
+```bash
+curl --get "$DOCS_HOST/_endpoint/get-requirements-for-setups" \
+  --data-urlencode "account-setup-A[apiVersion]=v2" \
+  --data-urlencode "account-setup-A[platformCountry]=CA" \
+  --data-urlencode "account-setup-A[accountCountry]=FR" \
+  --data-urlencode "account-setup-A[dashboardType]=none" \
+  --data-urlencode "account-setup-A[tosType]=full" \
+  --data-urlencode "account-setup-A[legalEntityType]=company" \
+  --data-urlencode "account-setup-A[businessStructure]=corporation" \
+  --data-urlencode "account-setup-A[capabilities][0]=card_payments"
+```
+
+Optionally, since `.programs` is present for this configuration, you can ask the user if they would like to choose a requirements update and add `--data-urlencode "account-setup-A[orrProgram]=eu-2025"` to the request.
+
+Use this response to present the requirements to the user as explained in the [Construct the result](#construct-the-result) section.
+
+Fetch the optional supplemental tables for the selected capabilities:
+
+```bash
+curl --get "$DOCS_HOST/_endpoint/get-website-requirements-for-capabilities" \
+  --data-urlencode "capabilities[0]=card_payments"
+```
+
+```bash
+curl --get "$DOCS_HOST/_endpoint/get-mcc-restrictions-for-capabilities" \
+  --data-urlencode "capabilities[0]=card_payments"
+```
+
+### Read the API responses
+
+Use `get-platform-countries` to choose your initial `platformCountry`:
+
+- `platform_countries` is the public list of available `platformCountry` options
+- `default_country` is the page’s default starting country
+
+Use `get-requirement-selections-for-platform-country` to validate the setup before you call the main requirements endpoint:
+
+- `country_map` is the source of truth for which field values are valid for that `platformCountry` value
+- the keys of `country_map` are the allowed `accountCountry` options
+- `country_map[ACCOUNT_COUNTRY].dashboard_types` constrains `dashboardType`
+- `country_map[ACCOUNT_COUNTRY].tos_types` constrains `tosType`
+- `country_map[ACCOUNT_COUNTRY].entity_type_structures` constrains `legalEntityType` and optional `businessStructure`
+- `country_map[ACCOUNT_COUNTRY].capabilities` constrains capability choices
+- `country_map[ACCOUNT_COUNTRY].programs` lists the only public ORR programs you may pass as `orrProgram`
+- `external_country_map` should be ignored
+
+Apply these dependency rules before making the final request:
+
+- if you change `accountCountry`, re-check all downstream selections
+- if you change `legalEntityType`, re-check `businessStructure` and all downstream selections
+- if you change `accountCountry`, `tosType`, or `apiVersion`, re-run [Resolve capabilities](#resolve-capabilities)
+
+Use `get-requirements-for-setups` as your main source of requirement data:
+
+- `requirements` contains the successful result for each requested setup key
+- `validation_errors` means the setup was invalid and must be corrected before you interpret the response
+- `build_errors` means the endpoint failed unexpectedly while building the summary; you must treat this as retryable rather than as a business conclusion
+
+Within each successful setup result:
+
+- `requirements[field_name]` is the requirement data for a single raw field, including enforcement limits, alternatives, display metadata, and related annotations used by the docs renderer
+- `extras` contains human-readable labels and validation guidance for that requirement
+- `requirement_tags` contains top-level requirement tags returned alongside the requirements data
+- `requirement_groups` contains grouped requirement data returned alongside the requirements data
+
+Check the supplemental endpoints to see if there are any additional capability-specific restrictions to present to the user.
+
+- `requirements_by_capability` from the website endpoint is a separate website requirements table that explains requirements the connected account’s website must meet to support the selected capability. These should be presented to the user as a separate table.
+- `restrictions_by_capability` from the MCC endpoint is a separate MCC restrictions table that explains requirements the connected account’s MCC must meet to support the selected capability. If this endpoint returns any restrictions, ask the user what kind of business they are running to determine whether their business type is prohibited or restricted from using the specific capability.
+- Empty maps are valid results for many standard capabilities and are not necessarily errors.
+
+### Construct the result
+
+Transform the API response into one or more human-readable tables in your own reply to the user, followed by any additional explanatory notes. These are output tables that you construct from the response data, not references to pre-existing tables on the human docs page.
+
+##### How to construct the tables:
+
+1. Split each raw field key into a section using its prefix:
+   - `company.*` -> `company`
+   - `documents.*` -> `documents`
+   - `individual.*` -> `individual`
+   - `representative.*` -> `representative`
+   - `directors.*` -> `directors`
+   - `owners.*` -> `owners`
+   - `executives.*` -> `executives`
+   - anything else -> `account`
+2. Render one table per non-empty section. Do not merge multiple sections into one table.
+3. For each table:
+   - use the capitalized section name as the table heading, for example `Account`, `Company`, `Representative`, `Directors`, or `Owners`
+   - Include the following columns:
+     - Heading: blank
+       - Content: Row display name, for example “Name”, “Date of birth”, or “Address”
+     - Heading: `Requirement`
+       - Content: a bulleted list of displayed fields
+       - Render one bullet per displayed field
+       - Render each field in code format
+       - If a field has alternatives, keep them in the same bullet and render them as a set of options, for example ``field_a` or `field_b``
+     - Heading: `Verification`
+       - Content: a bulleted list built from `extras[].value`
+       - Render each `extras[].value` entry as one list item
+       - If `extras` is empty, leave the entry blank
+     - Heading: `Enforcement action`
+       - Content: human-readable enforcement text built from both sets of limit fields
+       - First use the unverified limit fields to generate the `if not provided` message(s):
+         - `capability_limit_amount`
+         - `capability_limit_time`
+         - `payment_limit_amount`
+         - `payment_limit_time`
+         - `payout_limit_amount`
+         - `payout_limit_time`
+       - Then use the verified limit fields to generate the `if not verified` message(s):
+         - `verified_capability_limit_amount`
+         - `verified_capability_limit_time`
+         - `verified_payment_limit_amount`
+         - `verified_payment_limit_time`
+         - `verified_payout_limit_amount`
+         - `verified_payout_limit_time`
+       - If any limit amount or limit time is `<= 0`, treat that impact as immediate
+       - If both a time limit and an amount limit exist for the same impact, join them with `or`
+       - Group impacts with identical thresholds into a single sentence, for example `Capability, payments, and payouts will be paused immediately if not provided.`
+       - If both `if not provided` and `if not verified` text exist, render the `if not provided` sentence(s) first and then the `if not verified` sentence(s); prefix the first `if not verified` sentence with `Also,`
+       - If neither set of limits is present, render `—`
+4. If two sections share the same row-definition family, they still remain separate tables. For example, `representative` and `owners` both use the `person` row-definition family, but they render as separate `Representative` and `Owners` tables because they are different sections.
+5. Assign each section to one of the row-definition families listed below in the `Row definitions` step. The row-definition family only controls how rows are matched and labeled inside that section’s table:
+   - `account` -> `account`
+   - `company` -> `entity`
+   - `documents` -> `entity`
+   - `individual` -> `person`
+   - `representative` -> `person`
+   - `owners` -> `person`
+   - `executives` -> `person`
+   - `directors` -> `person`
+6. For every non-`account` section, strip the section prefix before matching row rules. For example, match `representative.first_name` as `first_name` and `company.address.city` as `address.city`.
+7. Use the row definitions below for that section’s row-definition family. Create a row only when at least one field in that section matches the row.
+8. Row definitions:
+
+account: Merchant category code: `/business_profile.mcc/` URL: `/business_profile.(url|requirement)/` Product description: `/business_profile.product_description/` Support phone: `/business_profile.support_phone/` Statement descriptors: `/settings.payments.statement_descriptor/`
+
+- /settings.card_payments.statement_descriptor/ Konbini support email address: `/settings.konbini_payments.support_email/` Konbini support phone number: `/settings.konbini_payments.support_phone/` Konbini support hours: `/settings.konbini_payments.support_hours/` Terms of service: `/^tos_acceptance\./` Issuing terms of service: `/settings\.card_issuing\.tos_acceptance\./` Estimated worker count: `/business_profile\.estimated_worker_count/` Annual revenue: `/business_profile\.annual_revenue/` External account: `/external_account/` Legal guardian: `/legal_guardian\./`
+
+entity: Company name: `/name$/` Company name (kana): `/name_kana/` Company name (kanji): `/name_kanji/` Company address: `/address\..*/` Company address (kana): `/address_kana/` Company address (kanji): `/address_kanji/` Company phone: `/phone/` Company tax ID: `/tax_id/` Company registration number: `/registration_number/` Company ID number: `/id_number/` Trade license: `/company_license/` Memorandum of Association: `/company_memorandum_of_association/` Proof of bank account: `/bank_account_ownership_verification/` Directors provided: `/directors_provided/` Owners provided: `/owners_provided/` Executives provided: `/executives_provided/`
+
+person: Name: `/(first|last)_name/` Name (kana): `/(first|last)_name_kana/` Name (kanji): `/(first|last)_name_kanji/` Aliases: `/full_name_aliases/` Date of birth: `/dob\./` Address: `/^address\./` Address (kana): `/address_kana/` Address (kanji): `/address_kanji/` Registered address: `/registered_address/` Email: `/email/` Phone: `/phone/` Gender: `/gender/` Political Exposure: `/political_exposure/` Tax information: `/ssn_last_4$/` or `/id_number$/` Secondary ID number: `/(id_number_secondary)/` Job title: `/(relationship\.title)/` Relationship with legal entity: `/relationship\.(?!title)/` Nationality: `/nationality/` Passport: `/passport/` Proof of liveness: `/proof_of_liveness/`
+
+1. For `apiVersion=v2`, replace each displayed field with `v2_field_name` and use `v2_alternatives`.
+2. If `apiVersion=v2` and a requirement doesn’t expose `v2_field_name`, omit that field from the rendered table. If that removes every field from a row group, omit the row. If a section becomes empty, omit that section table.
+
+##### How to construct the JSON-style summary:
+
+- if the user asks for a JSON summary of required items, return a JSON object in this exact shape. Each array holds zero or more field names:
+  ```json
+  {
+    "requirements": {
+      "currently_due": [
+        "configuration.merchant.mcc",
+        "company.name",
+        "representative.first_name"
+      ],
+      "eventually_due": [
+        "business_profile.url"
+      ]
+    }
+  }
+  ```
+Do not use ellipses (`...`) or placeholder strings in the output — list every field name explicitly.
+- this shape is a derived summary for comparison and display. It is not a raw Accounts API response.
+- If `apiVersion=v2`, inform the user that this JSON is for information only, and doesn’t match the shape of a real API response.
+- derive each field’s due bucket from the requirement’s limit fields in the `get-requirements-for-setups` response:
+  - treat a field as `currently_due` when any unverified limit amount or time is `<= 0`, or any verified limit amount or time is `<= 0`
+  - otherwise treat it as `eventually_due`
+- populate `requirements.currently_due` and `requirements.eventually_due` from those derived buckets
+- do not add a separate `future_requirements` bucket. Regulatory or ORR-driven future changes are modeled through `orrProgram` setup selection and A/B setup comparison, not through a third due array
+- for `apiVersion=v1`, use the raw requirement field names in both arrays
+- for `apiVersion=v2`, use `v2_field_name` values in both arrays
+- If `apiVersion=v2`, omit fields that have no `v2_field_name`
+- the JSON diff view compares requirement names only; it doesn’t diff verification text, thresholds, or supplemental metadata
+
+### How to respond to users
+
+When you return results to the user:
+
+- restate the exact validated setup you queried, including `apiVersion`, `platformCountry`, `accountCountry`, `dashboardType`, `tosType`, `legalEntityType`, optional `businessStructure`, selected `capabilities`, and optional `orrProgram`
+- always provide the user with a link containing the exact URL query parameters you used so they can view the requirements themselves and verify your conclusions
+  - for example: `https://docs.stripe.com/_endpoint/get-requirements-for-setups?account-setup-A[platformCountry]=CA&account-setup-A[accountCountry]=FR&account-setup-A[dashboardType]=full&account-setup-A[tosType]=full&account-setup-A[legalEntityType]=individual&account-setup-A[capabilities][0]=card_payments&account-setup-A[orrProgram]=eu-2025` -> `https://docs.stripe.com/connect/required-verification-information?accountSetupKeys=account-setup-A&account-setup-A%5BapiVersion%5D=v2&account-setup-A%5BplatformCountry%5D=CA&account-setup-A%5BaccountCountry%5D=FR&account-setup-A%5BdashboardType%5D=full&account-setup-A%5BtosType%5D=full&account-setup-A%5BlegalEntityType%5D=individual&account-setup-A%5BbusinessStructure%5D=undefined&account-setup-A%5Bcapabilities%5D=card_payments&account-setup-A%5BorrProgram%5D=eu-2025`
+  - when comparing two setups, include `account-setup-B` in the page URL only if you validated and queried setup B
+- if any requested choice had to be changed because of selector dependencies, say so explicitly before presenting the requirements
+- present currently due requirements separately from eventually due requirements, and label them clearly
+- explain verification bullets using `extras[].value` as the source of truth
+- mention when a requirement was omitted because it matched none of the table row definitions in this document
+- mention when website or MCC endpoints returned no supplemental data, so the user doesn’t mistake that for a fetch failure
+- if you receive `validation_errors`, ask the user to correct the setup inputs using the [Interaction contract](#interaction-contract) instead of guessing
+- if you receive `build_errors`, retry the request; if the error persists, tell the user the helper endpoint failed unexpectedly

.agents/skills/stripe-apps/SKILL.md

@@ -0,0 +1,208 @@
+---
+name: stripe-apps
+description: >-
+  Use when building, modifying, or reviewing a Stripe App — or when the user
+  describes something that implies one (e.g. "add a panel to the customer page",
+  "customize my Stripe Dashboard", "react to Stripe events from my app",
+  "connect my service to Stripe without sharing API keys"). Covers the full app
+  development workflow (scaffold, preview, upload, versioning), UI extension
+  architecture (sandboxed iframe, Stripe UI toolkit, viewports), extension types
+  (UI extensions, backend-only, extension interfaces, embedded apps),
+  authentication (platform keys, OAuth, restricted API keys), stripe-app.yaml
+  manifest setup (permissions, viewports, CSP), webhook configuration for apps,
+  Secret Store API, `fetchStripeSignature` auth, and marketplace publishing. Use
+  when the user mentions Stripe Apps, UI extensions, @stripe/ui-extension-sdk,
+  stripe-app.yaml, Dashboard extensions, or customizing the Stripe Dashboard.
+
+---
+
+## Stripe Apps — Agent Instructions
+
+**FIRST ACTION:** Say “Loading Stripe Apps skill.” then Read `references/discovery.md`. This file has routing logic you need before asking the user questions.
+
+### Your role
+
+You are a PROJECT BUILDER and INSTRUCTOR. Your primary output is working files on the user’s machine that they can run immediately. If you explain code without also writing it to disk using your Write tool, the user has nothing they can execute.
+
+You are also a patient guide. Many users have never heard of Stripe Apps, viewports, or webhooks. When they say “I’m not sure” or “what does that mean?”, explain concepts in plain language with examples from their specific idea.
+
+**Your tool calls (Read, Write) are your real work. Your chat messages explain what you did and teach the user why.**
+
+### Source of truth for code patterns
+
+Your training data for Stripe Apps SDK patterns may be outdated or incorrect. Before writing any code file, you MUST read the relevant canonical docs page using WebFetch. See `references/canonical-docs.md` for the full list of docs pages.
+
+If you cannot access the docs, tell the user: “I need to check the current Stripe Apps documentation to write correct code. Can you provide the current patterns from [relevant docs URL], or shall I proceed with the scaffold and you can verify against the docs?”
+
+## HARD RULES — violating any of these is a failure
+
+| \# | Rule | What failure looks like |
+| --- | --- | --- |
+| 0 | BEFORE ANYTHING ELSE: (1) Say “Loading Stripe Apps skill.” (2) Call Read on `references/discovery.md` to load the routing table. You need this data before you can ask informed questions. | Responding to the user before calling Read on discovery.md |
+| 1 | After reading discovery.md, your FIRST message to the user is ONLY the 4 discovery questions (see Step 1). No code, no plan, no summary. Even if the user’s request already mentions details — ask anyway. Users have unstated requirements that only emerge through questions. | Presenting a summary, plan, or any code before asking questions 1-4 and getting answers |
+| 2 | You MUST use your Write tool to create or modify files on disk. The scaffold creates base files via CLI — after that, use Write to modify scaffolded files and create new ones. A response with code only in chat gives the user nothing runnable. | Producing code in chat without calling Write to save it to disk |
+| 3 | Run `stripe generate app <name>` using your Bash tool to scaffold the project. Then use Write to modify scaffolded files and create additional files the app needs. | Writing stripe-app.yaml or package.json from scratch instead of modifying the scaffold output |
+| 4 | Before writing code for any topic (backend, UI, webhooks, auth), read the relevant canonical docs page using WebFetch. See `references/canonical-docs.md`. The docs are the source of truth — not this skill file, not your training data. | Writing code from memory without checking the current docs |
+| 5 | Tell user: `stripe apps upload` BEFORE testing fetchStripeSignature/Secret Store (the signing secret is generated during first upload). | Omitting upload-first requirement |
+| 6 | File names: `ui/src/views/App.tsx` (V2 workspace layout), `server.js` (project root). Only create files that are needed for the app’s architecture (see Step 3). | Using wrong filenames or creating files the architecture doesn’t need |
+| 7 | Every file you write to disk MUST be complete and runnable — not a skeleton or placeholder. The user should be able to run it immediately. Do not write partial files with TODOs. | Writing a file with TODO placeholders or incomplete implementations |
+| 8 | When presenting the development workflow, include `pnpm build` and `pnpm test` as explicit steps for apps with a UI extension. Backend-only apps without TypeScript skip `pnpm build`. | Omitting build/test steps for UI apps, or requiring them for backend-only apps |
+| 9 | If the user’s app requires custom objects or extension interfaces (private preview features), inform them the feature is in private preview and ask them to confirm they have access BEFORE proceeding. Do not silently proceed with a private preview feature. | Building with private preview features without confirming user has access |
+
+## BLOCKED — these produce broken apps
+
+| BLOCKED (never use) | Use instead |
+| --- | --- |
+| `stripe apps create` | `stripe generate app <name>` |
+| Raw HTML in UI extensions (`<div>`, `<span>`, `<p>`, `<button>`, `<input>`, `<h1>`-`<h6>`) | SDK components from `@stripe/ui-extension-sdk/ui` (Box, Inline, Button, TextField, etc.) |
+| CSS frameworks in UI (Tailwind, MUI, Bootstrap, styled-components, CSS files) | Only `@stripe/ui-extension-sdk/ui` components — no custom styling |
+| React 18+ APIs in UI (`useId`, `useDeferredValue`, `useTransition`, concurrent features) | React 17 hooks only (Stripe Apps run React 17.0.2) |
+| `window`, `document`, `localStorage`, `sessionStorage` in UI | Not available in sandboxed iframe |
+
+## Protocol — execute these steps IN ORDER
+
+### Step 1 — Discovery (your first message)
+
+Read <references/discovery.md> using your file-reading tool.
+
+You CANNOT determine the correct architecture without user input because:
+
+- The authentication type determines the backend pattern (platform keys vs OAuth vs restricted keys)
+- Private vs public apps have different webhook configurations
+- The viewport determines which context props are available
+- Backend vs frontend-only changes which files you create
+
+Ask these questions in your FIRST message — nothing else:
+
+1. What should the app do? (UI in Dashboard / react to events / both / modify billing or payment logic)
+2. Where should it appear? (customer detail, payment detail, full page, etc.)
+3. Who is it for? (only you or your team = private, OR other Stripe users = public/marketplace)
+4. Does it need to store data or talk to other services?
+
+Do NOT include a summary, plan, or architecture in this first message. ONLY the 4 questions above.
+
+**If the user doesn’t know an answer or asks for clarification:**
+
+- Explain the concept in plain language
+- Give concrete examples from their stated idea
+- Help them figure out the right answer
+
+**Private preview check:** After getting answers, before showing your summary, check whether their app implies needing:
+
+- **Custom objects** (storing custom data models IN Stripe)
+- **Extension interfaces** (changing how Stripe processes billing, payments, or tax)
+
+If yes: tell the user that feature is in private preview, ask them to confirm access. See `references/discovery.md` for exact wording and alternatives.
+
+Full-page apps require `@stripe/ui-extension-sdk` version `9.2.1` or later and the latest version of the Stripe Apps CLI plugin.
+
+After the user answers, show a plain-language summary:
+
+- “You want to: [goal]. It will appear: [where]. It’s for: [private/marketplace]. It needs: [backend/secrets/only Stripe data].”
+
+Wait for explicit confirmation before proceeding.
+
+### Step 2 — Scaffold
+
+Run the scaffold command yourself using your Bash tool:
+
+```bash
+stripe generate app <name>
+```
+
+This creates a V2 workspace: `stripe-app.yaml`, `package.json`, `pnpm-workspace.yaml`, `ui/src/views/App.tsx`.
+
+After the scaffold completes, proceed directly to Step 3.
+
+### Step 3 — Build (WRITE every file to disk)
+
+Before writing any code, read the relevant canonical docs pages (see `references/canonical-docs.md`) using WebFetch:
+
+- For UI code: read the Extensions SDK API page and the UI components page
+- For backend code: read the Backend + signed requests page and Authentication types page
+- For webhooks: read the Events page
+- For Secret Store: read the Secret Store page
+
+**YOUR PRIMARY JOB: Create files on disk following the patterns from the docs.**
+
+Which files to create depends on discovery answers:
+
+| Architecture | Files to write |
+| --- | --- |
+| Frontend-only (reads Stripe data, no external services) | Modify: `stripe-app.yaml`, `ui/src/views/App.tsx` |
+| Backend-only (webhooks/events, no Dashboard UI) | Modify: `stripe-app.yaml`. Create: `server.js` |
+| Full-stack (UI + backend) | Modify: `stripe-app.yaml`, `ui/src/views/App.tsx`. Create: `server.js` |
+
+For each file: call your Write tool FIRST, then explain what it does.
+
+**Key constraints for UI code:**
+
+- Import ONLY from `@stripe/ui-extension-sdk/ui` for components
+- NO raw HTML elements, NO CSS
+- Follow the SDK API patterns from the canonical docs exactly
+
+**Key constraints for backend code (server.js):**
+
+- CORS (`Access-Control-Allow-Origin: *`) only on endpoints called by the UI extension — webhook endpoints don’t need CORS
+- `fetchStripeSignature` verification follows the pattern in https://docs.stripe.com/stripe-apps/build-backend
+- Webhook endpoint count and configuration depends on auth type and distribution — check https://docs.stripe.com/stripe-apps/events
+- The `event_read` permission must be declared in the manifest for webhook event access
+
+**Key constraints for stripe-app.yaml:**
+
+- Declare ALL permissions with purpose strings
+- Follow the manifest schema from https://docs.stripe.com/stripe-apps/reference/app-manifest
+- Include `extensions: []` even if no backend extensions
+
+### Step 4 — Deliver (REQUIRED — do not skip)
+
+Your FINAL message MUST present the development workflow:
+
+1. `stripe generate app <name>` → scaffold
+2. `pnpm install` → dependencies
+3. Modify scaffolded files + create additional files → implement
+4. `pnpm build` → compile TypeScript (UI apps only)
+5. `pnpm test` → run unit tests
+6. `stripe apps start` → local preview in Dashboard
+7. `stripe apps upload` → publish version (**required** before fetchStripeSignature or Secret Store)
+8. Install from Dashboard → test
+
+**Important workflow facts:**
+
+- Use sandboxes for safe testing — they provide isolated environments for app development
+- `stripe apps upload` generates the signing secret needed for `fetchStripeSignature`
+- Public/marketplace apps need account activation (verified email + business details)
+- For webhook forwarding during local dev, see `references/webhooks.md`
+
+### Step 5 — Verify files exist
+
+Before ending the conversation, confirm your files are on disk. Run `ls` on the files you wrote to verify they exist.
+
+If any file is MISSING, call Write now to create it.
+
+## Troubleshooting uploads
+
+| Error | Cause | Fix |
+| --- | --- | --- |
+| `Invalid manifest` | Missing required fields or malformed YAML | Check indentation; ensure `id:`, `version:`, `name:` are present |
+| `Build failed` | UI component has type/import errors | Run `pnpm build` locally first |
+| `Version already exists` | Already uploaded this version number | Bump `version` in stripe-app.yaml |
+| `Permission denied` | CLI not logged in or wrong account | Run `stripe login` |
+| `connect-src` / CSP error | App calls undeclared URL | Add URL to `content_security_policy.connect-src` |
+| `extensions field required` | Missing `extensions: []` | Add `extensions: []` to stripe-app.yaml |
+| `Component not found` | Viewport references wrong component name | Match `component:` value to your default export |
+
+## Reference files
+
+| File | Read when |
+| --- | --- |
+| <references/canonical-docs.md> | **ALWAYS** — lists docs pages to WebFetch before writing code |
+| <references/discovery.md> | **ALWAYS FIRST** — full discovery script with routing |
+| <references/backend.md> | Before writing server.js |
+| <references/ui-extensions.md> | Before writing React/UI code |
+| <references/workflow.md> | Full development loop with all CLI commands |
+| <references/extension-types.md> | After discovery — map answers to extension type |
+| <references/webhooks.md> | When app reacts to Stripe events |
+| <references/authentication.md> | For auth type selection and patterns |
+| <references/onboarding-ux.md> | For first-run experience |
+| <references/publishing.md> | For marketplace publishing |

.agents/skills/stripe-apps/references/authentication.md

@@ -0,0 +1,101 @@
+# Authentication — platform keys, OAuth, restricted API keys
+
+## Authentication
+
+How your app authenticates and accesses Stripe data for merchants who install it.
+
+**Canonical page:** https://docs.stripe.com/stripe-apps/api-authentication
+
+Read this page using WebFetch before implementing authentication patterns.
+
+## Three authentication types
+
+Stripe Apps supports three authentication methods, configured via `stripe_api_access_type` in the app manifest:
+
+| Auth type | Manifest value | How it works | Best for |
+| --- | --- | --- | --- |
+| Restricted API key (recommended) | `restricted_api_key` | Stripe generates a scoped key at install; merchant provides it to your system | Private apps, simpler integrations, apps that don’t need Connect-style access |
+| Platform keys | `platform` | Your secret key + `Stripe-Account` header to act on behalf of installers | Public/marketplace apps that need to act across many merchants |
+| OAuth 2.0 | `oauth` | Standard OAuth flow generates access tokens per-account | Apps where merchant must be merchant-of-record |
+
+### Choosing the right type
+
+**Default to restricted API keys** unless you have a specific reason to use platform keys or OAuth. RAKs are simpler, more secure (scoped permissions), and don’t create a Connect-style relationship.
+
+Use a different type when:
+
+1. **You need Connect webhook fanout** (events from all merchants to one endpoint): Platform keys.
+2. **You’re building a public marketplace app acting across many merchants:** Platform keys.
+3. **The merchant must be the merchant-of-record for charges:** OAuth.
+4. **Private app or fewer merchants, no Connect fanout needed:** Restricted API keys (simplest).
+
+## Platform keys
+
+Your app’s API key acts on behalf of a merchant’s account using the `Stripe-Account` header:
+
+```javascript
+// Use a restricted API key when possible; fall back to secret key only for platform-key apps
+const stripe = require("stripe")(process.env.STRIPE_API_KEY);
+
+await stripe.customers.list({}, {
+  stripeAccount: "acct_xxxxx", // the merchant's account ID
+});
+```
+
+**How to get the merchant’s account ID:**
+
+- From a webhook event: `event.account`
+- From `fetchStripeSignature` payload: the signed data includes `account_id`
+- From the UI extension: `userContext.account.id` (top-level prop)
+
+**Key fact:** Platform keys use the same `Stripe-Account` header mechanism as Stripe Connect. Installers are NOT onboarded as connected accounts in the traditional sense — the header simply authorizes your key to access their account within the app’s declared permissions.
+
+## OAuth 2.0
+
+Use OAuth when the connected account needs to be the merchant of record for charges, or when you need the merchant’s own Stripe identity on API calls.
+
+Most apps do NOT need OAuth. Use platform keys unless you specifically need this.
+
+For implementation, read: https://docs.stripe.com/stripe-apps/pkce-oauth-flow
+
+## Restricted API keys
+
+With RAK apps, Stripe generates a restricted key at install time with only the permissions your app declared. The merchant copies this key to your system.
+
+Key differences from platform keys:
+
+- No Connect-style relationship is created
+- Can’t use Connect webhook fanout (each merchant manages their own webhooks)
+- Simpler model for private apps or apps with fewer merchants
+
+## Authenticating the UI to your backend (fetchStripeSignature)
+
+`fetchStripeSignature` proves to your backend that a request came from a legitimate app installation.
+
+Key facts:
+
+- The signed payload contains `user_id` and `account_id` by default (field order matters)
+- You can include additional data by passing it to `fetchStripeSignature(extraPayload)`
+- Backend verifies with `stripe.webhooks.signature.verifyHeader()`
+- The signing secret (starts with `absec_...`) is generated on first `stripe apps upload`
+
+For the full implementation pattern, read: https://docs.stripe.com/stripe-apps/build-backend
+
+## Identifying the installing merchant
+
+When a merchant installs your app, Stripe sends an `account.application.authorized` event. When they uninstall, it sends `account.application.deauthorized`.
+
+Store the account ID from `event.account` to make future API calls on their behalf.
+
+## Permission scopes
+
+Use the CLI to add permissions to your app:
+
+```bash
+stripe apps grant permission "customer_read" "Read customer data to show in the Dashboard"
+stripe apps grant permission "event_read" "Receive webhook events"
+```
+
+This updates `stripe-app.yaml` with the correct format automatically.
+
+**When you change permissions:** existing users must re-authorize. The app returns an invalid-request error for undeclared permissions until the user re-authorizes. See `publishing.md` for details.

.agents/skills/stripe-apps/references/backend.md

@@ -0,0 +1,113 @@
+# Backend — when and how to add server-side logic
+
+## When you need a backend
+
+You need a backend if your app needs to:
+
+- Store data long-term (user preferences, linked accounts, custom records)
+- Call APIs that require server-side secrets (API keys that can’t be in the browser)
+- Run logic when the user isn’t in the Dashboard (webhooks, scheduled jobs)
+- Call third-party services securely (email providers, CRMs, spreadsheet APIs)
+- Perform actions that take longer than the UI can wait for
+
+**You don’t need a backend if:**
+
+- Your app only reads and displays Stripe data (use the SDK client directly in the UI)
+- You only need to store a small amount of sensitive data — use the Secret Store API instead
+
+## Canonical documentation
+
+Before writing backend code, read these pages using WebFetch:
+
+| Topic | URL |
+| --- | --- |
+| Backend implementation + fetchStripeSignature | https://docs.stripe.com/stripe-apps/build-backend |
+| Authentication types (determines backend pattern) | https://docs.stripe.com/stripe-apps/api-authentication |
+| Events and webhooks | https://docs.stripe.com/stripe-apps/events |
+| Secret Store API | https://docs.stripe.com/stripe-apps/store-secrets |
+
+## Backend architecture decisions
+
+### Authentication type determines the backend pattern
+
+Your app’s `stripe_api_access_type` controls how the backend authenticates. See `authentication.md` for the full breakdown of auth types and when to use each one.
+
+### CORS configuration
+
+CORS (`Access-Control-Allow-Origin: *`) is needed ONLY on endpoints called by the UI extension. The UI runs in a sandboxed iframe with a `null` origin — specific origin allowlisting will not work.
+
+Webhook endpoints do NOT need CORS — they receive requests from Stripe’s servers, not from the browser.
+
+### fetchStripeSignature verification
+
+`fetchStripeSignature` is how the UI extension authenticates requests to your backend. The signed payload and verification method are documented at https://docs.stripe.com/stripe-apps/build-backend.
+
+Key facts:
+
+- The signing secret (starts with `absec_...`) is generated on first `stripe apps upload`
+- The default signed payload contains `user_id` and `account_id` (field order matters)
+- Extra data can be included by passing it to `fetchStripeSignature(payload)`
+- Verification uses `stripe.webhooks.signature.verifyHeader()`
+
+### Webhook configuration
+
+Webhook setup depends on your app’s distribution and auth type:
+
+| App type | Webhook setup |
+| --- | --- |
+| Private (your account only) | ONE standard webhook endpoint |
+| Public with platform keys | ONE webhook with “Listen to events on Connected accounts” enabled |
+| Public with restricted API keys | Can’t use Connect webhook fanout — each merchant manages their own webhooks |
+
+The `event_read` permission MUST be declared in your manifest, plus read permissions for each event type you want to receive.
+
+Read https://docs.stripe.com/stripe-apps/events for the full setup guide.
+
+For firewall allowlisting of inbound webhook traffic, see https://docs.stripe.com/ips for Stripe’s IP addresses.
+
+## Secret Store API
+
+**Plain-language:** “Stripe has a built-in secure place to store passwords, tokens, and API keys for your app — you don’t need to build your own database for secrets.”
+
+### Two scopes
+
+| Scope | Use for | Example |
+| --- | --- | --- |
+| `account` | Shared across all users of an account | The business’s API key for an email service |
+| `user` | Per-user secrets | An individual user’s OAuth access token |
+
+### Limits and restrictions
+
+- Maximum **10 secrets per scope** (account and user separately)
+- Always list and delete before adding more if approaching the limit
+- Do **not** store PCI-sensitive data (card numbers, CVVs, bank account numbers)
+
+### Declaring the permission
+
+In `stripe-app.yaml`:
+
+```yaml
+declarations:
+  stripe_api_access:
+    permissions:
+      - permission: secret_write
+        purpose: Store third-party credentials for the app
+```
+
+### Implementation
+
+For the correct code patterns to read, write, and delete secrets, read: https://docs.stripe.com/stripe-apps/store-secrets
+
+## Local development with a backend
+
+Run your backend locally alongside `stripe apps start`:
+
+```bash
+# Terminal 1: start the app preview
+stripe apps start
+
+# Terminal 2: start your backend server
+node server.js
+```
+
+For webhook forwarding during local development, see `references/webhooks.md`.

.agents/skills/stripe-apps/references/canonical-docs.md

@@ -0,0 +1,48 @@
+# Canonical documentation — sources of truth for code patterns
+
+## Canonical documentation
+
+Before writing any code file, read the relevant canonical docs page using WebFetch. These docs are the source of truth for API patterns, component usage, and configuration — do NOT reproduce code examples from memory or from this skill file.
+
+If you cannot access the docs, tell the user you need them to provide the current patterns rather than guessing.
+
+## Reference pages
+
+| Topic | URL |
+| --- | --- |
+| App scaffold and workflow | https://docs.stripe.com/stripe-apps/create-app |
+| Manifest schema (`stripe-app.yaml`) | https://docs.stripe.com/stripe-apps/reference/app-manifest |
+| Permissions reference | https://docs.stripe.com/stripe-apps/reference/permissions |
+| Backend + signed requests (`fetchStripeSignature`) | https://docs.stripe.com/stripe-apps/build-backend |
+| Authentication types (platform, OAuth, RAK) | https://docs.stripe.com/stripe-apps/api-authentication |
+| Events and webhooks | https://docs.stripe.com/stripe-apps/events |
+| How UI extensions work | https://docs.stripe.com/stripe-apps/how-ui-extensions-work |
+| UI components | https://docs.stripe.com/stripe-apps/components |
+| Extensions SDK API (`createHttpClient`, Stripe client) | https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api |
+| Secret Store | https://docs.stripe.com/stripe-apps/store-secrets |
+| Versioning and releases | https://docs.stripe.com/stripe-apps/versions-and-releases |
+| Marketplace submission | https://docs.stripe.com/stripe-apps/publish-app |
+| Onboarding UX patterns | https://docs.stripe.com/stripe-apps/patterns/onboarding-experience |
+| Full-page apps | https://docs.stripe.com/stripe-apps/patterns/full-page-apps |
+| Viewports reference | https://docs.stripe.com/stripe-apps/reference/viewports |
+| Sandbox support | https://docs.stripe.com/stripe-apps/enable-sandbox-support |
+
+## How to use this list
+
+1. Identify which topics are relevant to the app you’re building (based on discovery answers)
+2. WebFetch each relevant page BEFORE writing code
+3. Follow the patterns shown in the docs exactly — field names, import paths, constructor signatures
+4. If a pattern in your training data conflicts with what the docs show, the docs win
+
+## Common lookup scenarios
+
+| You need to… | Read this page |
+| --- | --- |
+| Initialize the Stripe client in a UI extension | Extensions SDK API |
+| Verify `fetchStripeSignature` on your backend | Backend + signed requests |
+| Choose between platform keys, OAuth, or restricted keys | Authentication types |
+| Set up webhooks for a public app | Events and webhooks |
+| Store secrets (OAuth tokens, API keys) | Secret Store |
+| Know which UI components are available | UI components |
+| Declare permissions in the manifest | Permissions reference |
+| Publish to the marketplace | Marketplace submission |

.agents/skills/stripe-apps/references/discovery.md

@@ -0,0 +1,163 @@
+# Discovery interview
+
+## Discovery interview
+
+Run this interview **before writing any code**. Ask one question at a time. Never use Stripe-internal jargon until after routing is complete.
+
+### Question 1 — What do you want to do?
+
+```
+What would you like your app to do? Pick the option that sounds closest:
+
+1. Show something or add a custom page or experience inside my Stripe Dashboard
+   (for example: a custom standalone page in the Dashboard, show a customer's loyalty points, add a "Send email" button)
+
+2. Automatically do something when a payment or event happens
+   (for example: send a confirmation email, update a spreadsheet, sync data)
+
+3. Both — add something to the Dashboard AND react to Stripe events
+
+4. Let merchants connect their Stripe account to my service without sharing API keys
+
+5. Add custom logic to how Stripe calculates bills or routes payments
+   (advanced — private preview)
+
+6. I'm not sure — ask me more questions
+```
+
+**Routing:**
+
+- Option 1 → UI extension. Ask Question 2.
+- Option 2 → Backend-only app. Ask Question 3. Then read `backend.md`, `webhooks.md`, `authentication.md`, `workflow.md`.
+- Option 3 → Full-stack app. Ask Question 2, then Question 3. Read all references.
+- Option 4 → App-as-authentication. Read `authentication.md`, `workflow.md`.
+- Option 5 → Extension interfaces (private preview). Tell the user: “This is in private preview — check [/stripe-apps](https://docs.stripe.com/stripe-apps.md) for the latest access information. I can help you get started once access is confirmed.”
+- Option 6 → Ask follow-up: “What problem are you trying to solve? For example: tracking sales, notifying customers, connecting a third-party tool?”
+
+### Question 2 — Where do you want your app to appear? (only if UI)
+
+```
+Where in the Stripe Dashboard should your app show up?
+
+1. Next to a specific customer, payment, invoice, subscription, or product
+2. Everywhere in the Dashboard as a floating side panel
+3. As its own full-screen page
+4. In the settings area of my app (after install)
+5. As a setup guide when someone installs my app
+6. I'm not sure
+```
+
+**Viewport routing:**
+
+| Answer | Viewport(s) |
+| --- | --- |
+| Next to a customer | `stripe.dashboard.customer.detail` |
+| Next to a payment | `stripe.dashboard.payment.detail` |
+| Next to an invoice | `stripe.dashboard.invoice.detail` |
+| Next to a subscription | `stripe.dashboard.subscription.detail` |
+| Next to a product | `stripe.dashboard.product.detail` |
+| On any list page | `stripe.dashboard.customer.list`, `.payment.list`, etc. |
+| Everywhere (side panel) | `stripe.dashboard.drawer.default` |
+| Full-screen page | Full-page app — `stripe.dashboard.fullpage` |
+| Dashboard homepage | `stripe.dashboard.home.overview` |
+| Settings | `settings` viewport |
+| Setup guide (first run) | `onboarding` viewport |
+
+If the answer is “full-screen page”, read `ui-extensions.md` (full-page apps section). If the answer is “setup guide”, also read `onboarding-ux.md`. If “I’m not sure”, ask: “When someone opens Stripe and looks at a customer’s page — would your app show up there? Or would it be more like its own separate page?”
+
+### Question 3 — Who is this for?
+
+```
+Who will use this app?
+
+1. Just me / my own Stripe account (private app)
+2. Other Stripe users — I want to publish it to the marketplace
+```
+
+**Routing:**
+
+- Option 1 → Private app. Simpler workflow — no marketplace submission needed.
+- Option 2 → Public app. Will need account activation (verified email and business details). Note this in the plan.
+
+### Question 3b — Authentication type (only for public apps that need backend access)
+
+If the user chose public/marketplace AND their app needs to access merchant data from a backend, determine the authentication type. Read `authentication.md` for the full comparison — restricted API keys are the recommended default unless the app specifically needs Connect-style access or OAuth.
+
+For private apps or frontend-only apps, skip this question — restricted API keys or platform keys both work, and RAKs are simpler.
+
+### Question 4 — Will your app need to remember things or talk to other services?
+
+```
+Will your app need to:
+
+1. Remember settings or store information (for example: a user's login for another service,
+   preferences, or data not already in Stripe)
+2. Talk to another service (for example: send emails, update a spreadsheet, call a third-party API)
+3. No — it will only show Stripe data
+```
+
+**Routing:**
+
+- Option 1 or 2 → Needs backend or Secret Store API. Read `backend.md`.
+  - If storing credentials/tokens → use the Secret Store API (plain-language: “Stripe has a built-in secure place to store passwords and tokens — you don’t need to build your own database for secrets”)
+  - If running server-side logic → needs a self-hosted backend
+- Option 3 → Frontend-only. Only the SDK’s Stripe client and `@stripe/ui-extension-sdk/ui` needed. No backend.
+
+### After the interview — show a summary
+
+Before writing any code, confirm your understanding with the user:
+
+```
+Here's what I understood:
+
+- You want to: [plain-language description of the goal]
+- Your app will appear: [where, or "on a backend server"]
+- It's for: [just you / other Stripe users]
+- It needs to: [remember things / talk to [service] / just show Stripe data]
+
+Does that sound right? I'll start building once you confirm.
+```
+
+Only proceed after the user confirms. If they correct anything, update your understanding and show the summary again.
+
+### Private preview feature detection
+
+Some Stripe Apps features are in **private preview** — they require the user to be gated in before they can use them. Detect these during or after the interview:
+
+**Private preview features:**
+
+| Feature | Trigger phrases (user might say) | What to tell the user |
+| --- | --- | --- |
+| Custom objects | “store custom data in Stripe”, “create my own data model”, “custom database in Stripe”, “custom fields on customers”, “structured data that isn’t in Stripe already” | “Custom objects let you define your own data types in Stripe, but this feature is currently in private preview. You’ll need to have access enabled on your account before we can use it. Can you confirm you’re gated in for custom objects?” |
+| Extension interfaces | “change how Stripe calculates”, “custom billing logic”, “modify payment routing”, “override Stripe’s default behavior”, “custom tax calculation” | “Extension interfaces let your app hook into Stripe’s processing pipeline, but this is in private preview. Can you confirm you have access to extension interfaces on your account?” |
+
+**When to check:**
+
+- If the user picks Option 5 in Question 1 → extension interfaces (already handled)
+- If the user’s description of what their app does (Question 1 or free-form description) implies custom objects or extension interfaces → ask before proceeding
+- If the user mentions “custom objects” or “extension interfaces” by name at ANY point → confirm access
+
+**How to proceed after confirmation:**
+
+- User confirms access → continue building with that feature
+- User says they don’t have access → suggest alternatives:
+  - Instead of custom objects → use Secret Store API for key-value data, or store data in their own backend
+  - Instead of extension interfaces → suggest a webhook-based approach that reacts to events rather than intercepting processing
+- User is unsure → tell them: “You can check your access at the Stripe Apps page in your Dashboard, or ask your Stripe account representative. I can help you build with an alternative approach in the meantime.”
+
+## Plain-language glossary
+
+Use these explanations when you need to introduce technical terms after routing:
+
+| Term | Plain-language explanation |
+| --- | --- |
+| UI extension | The part of your app that shows up inside the Stripe Dashboard |
+| Viewport | Which specific Dashboard page your app appears on |
+| Extension interface | A hook that lets your app change how Stripe processes billing or payments |
+| Platform keys | How your app accesses merchant data when they install it — no manual key-sharing needed |
+| Connected account | A merchant who has installed your app |
+| Permissions | What Stripe data your app is allowed to read or write; must be declared before use |
+| Secret Store | Stripe’s built-in way for your app to save sensitive information like passwords or tokens |
+| stripe-app.yaml | The configuration file that tells Stripe what your app is called, what it needs access to, and where it appears |
+| Custom objects | Custom data types you define and store inside Stripe (in private preview — requires access) |
+| Sandbox | An isolated Stripe test environment for safe testing — useful for testing destructive operations or onboarding flows |

.agents/skills/stripe-apps/references/extension-types.md

@@ -0,0 +1,124 @@
+# Extension types
+
+## Extension types
+
+Stripe Apps supports five extension types. Use the discovery interview in `discovery.md` to determine which one the user needs.
+
+### 1. UI extension — “show something in the Dashboard”
+
+Renders custom UI inside the Stripe Dashboard using the Stripe UI toolkit. Runs in a sandboxed iframe.
+
+**Plain-language examples:**
+
+- “Show a customer’s loyalty points next to their Stripe profile”
+- “Add a button to send a custom invoice email”
+- “Build a full-screen analytics dashboard inside Stripe”
+- “Show a customer’s order history from my store next to their Stripe data”
+
+**What you can build:**
+
+- Page-specific panels (next to a customer, payment, invoice, subscription, or product)
+- A side panel that appears everywhere in the Dashboard
+- A full-screen page inside the Dashboard
+- A setup/onboarding screen when users first install the app
+- An app settings page
+
+**Key constraints:**
+
+- React 17 only (not 18+)
+- Only `@stripe/ui-extension-sdk/ui` components — no Tailwind, HTML, or third-party UI libraries
+- Can’t access `window`, `document`, or `localStorage`
+- Must use the SDK’s Stripe API client (see canonical docs for initialization pattern)
+
+**Read:** `ui-extensions.md`, `workflow.md`
+
+### 2. Backend-only app — “react to events, no Dashboard UI”
+
+Runs on the developer’s server. Receives Stripe webhooks and calls the Stripe API. No Dashboard UI.
+
+**Plain-language examples:**
+
+- “Email a download link after a payment”
+- “Sync purchases to a Google Sheet”
+- “Create an order in my fulfillment system when a payment succeeds”
+- “Notify my team on Slack when a new subscription starts”
+
+**How it works:**
+
+- Your server receives Stripe events (webhooks)
+- Your server calls the Stripe API using platform keys (no manual key-sharing with merchants)
+- No UI — all logic runs server-side
+
+**Read:** `authentication.md`, `webhooks.md`, `backend.md`, `workflow.md`
+
+### 3. Full-stack app — “Dashboard UI + backend server”
+
+Combines a UI extension with a backend server. The UI can show data from external services and trigger server-side actions.
+
+**Plain-language examples:**
+
+- “Show my customer’s loyalty points in Stripe AND update them when they make a purchase”
+- “Let merchants configure their email templates from the Dashboard, then send emails from my server”
+- “Show real-time shipping status next to each payment”
+
+**How it works:**
+
+- UI extension in the Dashboard for user interaction
+- Backend server for data storage, third-party API calls, and webhook processing
+- UI authenticates to the backend using `fetchStripeSignature`
+
+**Read:** all reference files
+
+### 4. Extension interfaces — “plug into Stripe’s billing or payments engine” (private preview)
+
+Lets your app change how Stripe processes billing or payments. Available types:
+
+**Billing extensions:**
+
+- Custom discount calculation
+- Custom proration calculation
+- Custom customer balance handling
+- Custom recurring billing item handling
+
+**Payments orchestration:**
+
+- Custom payment routing
+
+**Private preview:** Extension interfaces are not generally available. If the user asks for this:
+
+1. Explain it’s in private preview
+2. Tell them to check the Stripe Apps documentation for the latest access information
+3. Ask them to check access and return when they have it
+4. Do not attempt to build anything until access is confirmed
+
+### 5. Embedded apps — “embed a third-party Stripe App inside your platform” (private preview)
+
+For Connect platforms that want to surface third-party Stripe Apps (like QuickBooks, Xero, or Mailchimp) directly inside their own product.
+
+**This is different from building an app.** Embedded apps are for platforms that want to *host* existing apps, not for building new ones.
+
+**Private preview:** If the user asks for this, point them to https://docs.stripe.com/stripe-apps/embedded-apps.
+
+## Full viewport routing table
+
+For UI extensions — maps plain-language descriptions to viewport IDs:
+
+| What the user wants | Viewport ID |
+| --- | --- |
+| Next to a specific customer | `stripe.dashboard.customer.detail` |
+| On the customers list page | `stripe.dashboard.customer.list` |
+| Next to a specific payment | `stripe.dashboard.payment.detail` |
+| On the payments list page | `stripe.dashboard.payment.list` |
+| Next to a specific invoice | `stripe.dashboard.invoice.detail` |
+| On the invoices list page | `stripe.dashboard.invoice.list` |
+| Next to a specific subscription | `stripe.dashboard.subscription.detail` |
+| On the subscriptions list page | `stripe.dashboard.subscription.list` |
+| Next to a specific product | `stripe.dashboard.product.detail` |
+| On the products list page | `stripe.dashboard.product.list` |
+| Everywhere in the Dashboard (side panel) | `stripe.dashboard.drawer.default` |
+| As its own full-screen page | Full-page app — `stripe.dashboard.fullpage` |
+| On the Dashboard homepage | `stripe.dashboard.home.overview` |
+| App settings page | `settings` |
+| First-run setup after install | `onboarding` |
+
+For the full viewport reference, see https://docs.stripe.com/stripe-apps/reference/viewports.

.agents/skills/stripe-apps/references/onboarding-ux.md

@@ -0,0 +1,67 @@
+# Onboarding UX — first-run user experience
+
+## Onboarding UX
+
+**Plain-language:** “When someone installs your app for the first time, the first thing they see is your app’s welcome or setup screen. This is called onboarding.”
+
+Design this experience carefully — it determines whether merchants understand how to use your app or give up immediately.
+
+**Canonical page:** https://docs.stripe.com/stripe-apps/patterns/onboarding-experience
+
+Read this page using WebFetch for the correct component props and patterns.
+
+## Options from simplest to most complex
+
+### Option 1 — Zero-touch onboarding (easiest)
+
+If your app only uses Stripe data and doesn’t need its own login, there’s nothing to set up. The app works immediately after install.
+
+Use `fetchStripeSignature` to identify the user without a login screen — the user’s Stripe identity proves who they are.
+
+**When to use:** When your app doesn’t need third-party credentials or a separate user account.
+
+### Option 2 — OnboardingView component
+
+Show a setup screen the first time the user opens the app. Use the `onboarding` viewport to show a dedicated onboarding page.
+
+In `stripe-app.yaml`, add the `onboarding` viewport:
+
+```yaml
+ui_extension:
+  views:
+    - viewport: onboarding
+      component: OnboardingView
+    - viewport: stripe.dashboard.customer.detail
+      component: App
+```
+
+For the correct `OnboardingView` component props and structure, read the canonical onboarding page. Key requirements:
+
+- Use the `OnboardingView` component (not `ContextView`) for the onboarding viewport
+- Include required props like `completed`, `tasks`, and `title`
+
+### Option 3 — SignInView component (third-party login)
+
+If users need to log in to a third-party service (connecting their Google account, Mailchimp, etc.), use `SignInView` to guide them.
+
+For the correct `SignInView` props and usage, read: https://docs.stripe.com/stripe-apps/patterns/onboarding-experience
+
+Use the Secret Store API to save the resulting OAuth token. See `backend.md`.
+
+## Critical rule: always check onboarding status in every view
+
+Don’t assume the user went through the onboarding flow in order. They might open a payment page before completing setup.
+
+Check at the start of every page-specific view whether onboarding is complete. If not, show a prompt directing them to complete setup.
+
+## Storing onboarding state
+
+Use the Secret Store API to remember whether a user has completed onboarding.
+
+For the correct Secret Store API patterns, read: https://docs.stripe.com/stripe-apps/store-secrets
+
+Key facts:
+
+- Use `user` scope for per-user onboarding state
+- Use `account` scope for account-wide configuration
+- Maximum 10 secrets per scope

.agents/skills/stripe-apps/references/publishing.md

@@ -0,0 +1,145 @@
+# Publishing — versioning, releases, test vs live mode, marketplace
+
+## Publishing
+
+How to version, release, and publish your Stripe App.
+
+## Test mode vs live mode
+
+**Plain-language:** “Test mode uses fake data so you can try things safely. Live mode uses real customer data. Always build and test in test mode first.”
+
+| Mode | Data | When to use |
+| --- | --- | --- |
+| Test mode | Fake (test cards, test customers) | Development and QA |
+| Live mode | Real customer and payment data | Production |
+
+**Workflow:** Upload → install in test mode → test thoroughly → install in live mode.
+
+**Do not skip test mode testing.** Even if your app looks correct locally with `stripe apps start`, you must install it in test mode and verify it works with the actual install flow before going live.
+
+## Versioning
+
+Bump `version` in `stripe-app.yaml` before each upload:
+
+```yaml
+id: com.example.my-app
+version: 1.0.1
+name: My App
+```
+
+Use semantic versioning:
+
+- `1.0.0` — initial release
+- `1.0.1` — bug fix
+- `1.1.0` — new feature (backward compatible)
+- `2.0.0` — breaking change or major feature
+
+**Rules:**
+
+- Versions must be uploaded in order — if you upload `2.0.0` before `1.0.0`, `2.0.0` won’t be available for release
+- You can have multiple uploaded versions; you choose which one to install
+- Stripe auto-upgrades installed users to the latest release — they don’t need to do anything **unless** you changed permissions
+
+## Upload and release workflow
+
+```bash
+# 1. Bump version in stripe-app.yaml, then:
+stripe apps upload
+
+# 2. Go to Dashboard → Apps → your app → version history
+# 3. Click the version you want to release
+# 4. Click "Set as external test version" (test mode) or "Release" (live mode)
+```
+
+## When you change permissions
+
+This is a common source of bugs. When you add new permissions:
+
+1. Update `stripe-app.yaml` with the new permissions
+2. Bump the version and upload
+3. Existing users are notified by email
+4. The **“Review Permissions”** button appears — but only on the **Apps workload page** ([dashboard.stripe.com/apps](https://dashboard.stripe.com/apps)), **not on the app itself**
+5. The app returns an **invalid-request error** for the new permissions until the user clicks “Review Permissions” and re-authorizes
+
+**Always warn users about this step** when you change permissions. Many users miss the notification and think the app is broken.
+
+**How to notify users:** Consider adding a banner in your app UI that detects when a required permission is missing and guides the user to re-authorize.
+
+## Publishing to the Stripe Apps Marketplace
+
+For public apps — making your app available to all Stripe users.
+
+### Requirements
+
+Before submitting:
+
+- Verified email address on your Stripe account
+- Business details filled in (legal name, address)
+- App passes [review requirements](https://docs.stripe.com/stripe-apps/review-requirements.md)
+- Connect platform accounts cannot publish marketplace apps
+
+### Submission
+
+1. Go to [Dashboard → Apps](https://dashboard.stripe.com/apps)
+2. Select your app
+3. Click **Submit for review**
+
+Stripe reviews your app for security, functionality, and compliance with their guidelines.
+
+### Review requirements overview
+
+- App must work correctly in test and live mode
+- No prohibited content or misleading claims
+- Privacy policy URL required
+- Support contact required
+- App icon and screenshots required
+
+### After approval
+
+Your app appears in the [Stripe Apps Marketplace](https://marketplace.stripe.com/). Any Stripe user can install it.
+
+## Troubleshooting uploads
+
+**Successful upload looks like:**
+
+```
+Uploading... Done
+Your app has been uploaded to version 0.0.1.
+```
+
+**Common upload failures and fixes:**
+
+| Error | Cause | Fix |
+| --- | --- | --- |
+| `Invalid manifest` / validation failed | Missing required fields or malformed YAML | Check indentation; ensure `id:`, `version:`, `name:` are present |
+| `Build failed` / TypeScript errors | UI component has type/import errors | Run `pnpm build` locally first to see the exact error |
+| `Version already exists` | Already uploaded this version number | Bump `version` in stripe-app.yaml (e.g. 0.0.1 → 0.0.2) |
+| `Permission denied` / `Not authenticated` | CLI not logged in or wrong account | Run `stripe login` and verify with `stripe config --list` |
+| `connect-src` / CSP error | App calls a URL not declared in content_security_policy | Add the URL to `content_security_policy.connect-src` in stripe-app.yaml |
+| `extensions field required` | Missing `extensions: []` in stripe-app.yaml | Add `extensions: []` even if you have no backend extensions |
+| `Component not found` | Viewport references a component name that doesn’t match your export | Ensure `component:` in stripe-app.yaml matches your default export name |
+
+**Debugging steps when upload fails:**
+
+1. Read the full error message — it usually says exactly what’s wrong
+2. Run `pnpm build` to check for TypeScript/build errors locally
+3. Validate your stripe-app.yaml has all required fields (id, version, name, declarations)
+4. Check that file paths match (ui/src/views/App.tsx, not a renamed file)
+5. If still stuck: `stripe apps upload --verbose` for detailed output
+
+## Sandboxes for app development
+
+Sandboxes provide isolated environments for safe app development and testing.
+
+**Benefits of using Sandboxes:**
+
+- Isolated from your live account — test destructive operations safely
+- Each sandbox has its own app installation and signing secrets
+- Useful for testing onboarding flows, uninstall/reinstall cycles, and permission changes
+
+**How to use:**
+
+1. Create a sandbox from Dashboard → Sandboxes
+2. Run `stripe apps start` targeting the sandbox
+3. Upload and install your app in the sandbox to test the full install flow
+4. When ready, upload to your main account for production use

.agents/skills/stripe-apps/references/ui-extensions.md

@@ -0,0 +1,171 @@
+# UI extensions — layout and craft
+
+## UI extensions
+
+UI extensions render custom UI inside the Stripe Dashboard, in a sandboxed iframe. This skill is the **opinionated layout-and-craft layer**: how to compose a full-page or drawer app so it feels native — placement, composition order, spacing, density, states, typography. It does **not** restate component APIs; those live on each component’s doc page, and they’re the source of truth.
+
+### How to use this skill (read first)
+
+- **Component API → fetch the component’s doc BEFORE you import it (required).** SDK components are split across **three import subpaths** — `@stripe/ui-extension-sdk/ui`, `/ui/next`, and `/ui/experimental` — and importing from the wrong one yields an `undefined` component and a **hard crash** (`Element type is invalid`). You can’t tell a component’s subpath from its name — for example `DataTable` and `DetailPage` are under `/ui/experimental` and the charts under `/ui/next`, not the `/ui` you’d expect. So for **every** component you use: (1) **fetch its doc** — `https://docs.stripe.com/stripe-apps/components/<name>.md` (append `?app-sdk-version=9Next` for `Tabs`, `LineChart`, `BarChart`; discover components from the [index](https://docs.stripe.com/stripe-apps/components.md)); (2) **copy the exact import line and required props / data shape** char-for-char; (3) **re-check every import against the doc before you finish.** Don’t infer an API from the component name — a wrong import path, prop, or data shape is a hard runtime error and the #1 reason these apps don’t render.
+- **Layout, styles, composition, and states → follow the codified rules here (§2–§3).** These are Stripe’s craft defaults; no single component doc covers them. This is what the skill adds on top of the docs.
+
+### Constraints — the sandbox (these cause silent failures or crashes)
+
+UI extensions run in a **sandboxed iframe on React 17.0.2**. Only SDK components render. Don’t reach for these:
+
+| Blocked | Use instead |
+| --- | --- |
+| Any HTML tag (`<div>`, `<span>`, `<button>`, `<input>`, `<form>`, `<h1>`…) | SDK components only (`Box`, `Button`, `TextField`, …) |
+| CSS / Tailwind / MUI / styled-components / any stylesheet | the `css` prop with design tokens (§3) |
+| React 18+ APIs — `useId`, `useTransition`, `useDeferredValue`, concurrent features | React 17 hooks only (Stripe Apps run **React 17.0.2**) |
+| `window`, `document`, `localStorage`, `sessionStorage` | not available in the iframe |
+| `react-hook-form` / any ref-based form library | uncontrolled inputs — `defaultValue` + `onChange` (see Forms, §3) |
+| arbitrary `fetch()` to external URLs | `fetchStripeSignature` for your backend; the SDK client for Stripe APIs |
+
+**Data access (for apps that read Stripe data — the examples here use mock data).** Initialize the client with `createHttpClient` from `@stripe/ui-extension-sdk/http_client` plus the `STRIPE_API_KEY` constant (a **sentinel, not a real key** — it uses the app’s granted permissions), then call standard SDK methods. **Every resource you call must be declared as a permission** (`stripe apps grant permission …`) or the request fails with an invalid-request error. The current object is `environment.objectContext` (for example, `.id` = `"cus_…"`); the signed-in user is **`userContext`, a top-level prop — *not* nested under `environment`**. Full rules: [how UI extensions work](https://docs.stripe.com/stripe-apps/how-ui-extensions-work.md) · [Extensions SDK API reference](https://docs.stripe.com/stripe-apps/reference/extensions-sdk-api.md).
+
+## 1. Placement — pick your viewport
+
+Decide *where in the Dashboard* the app lives; that determines the viewport and the root component. Full viewport list: [viewports reference](https://docs.stripe.com/stripe-apps/reference/viewports.md).
+
+| Your goal | Surface | Viewport | Root component |
+| --- | --- | --- | --- |
+| A dedicated workspace: tabs, lists, dashboards, multi-step workflows | **Full-page** | [`stripe.dashboard.fullpage`](https://docs.stripe.com/stripe-apps/reference/viewports.md) | [`FullPageView`](https://docs.stripe.com/stripe-apps/components/fullpageview.md) |
+| Contextual info/actions tied to a specific object (a customer, a payment) | **Page-specific** | [`stripe.dashboard.customer.detail`, `.payment.detail`, `.list`, `.overview`, …](https://docs.stripe.com/stripe-apps/reference/viewports.md) | [`ContextView`](https://docs.stripe.com/stripe-apps/components/contextview.md) |
+| Available on every Dashboard page | **Dashboard-wide drawer** | [`stripe.dashboard.drawer.default`](https://docs.stripe.com/stripe-apps/reference/viewports.md) | [`ContextView`](https://docs.stripe.com/stripe-apps/components/contextview.md) |
+| App configuration | **Settings** | [`settings`](https://docs.stripe.com/stripe-apps/reference/viewports.md) | [`SettingsView`](https://docs.stripe.com/stripe-apps/components/settingsview.md) |
+| First-run setup after install | **Onboarding** | [`onboarding`](https://docs.stripe.com/stripe-apps/reference/viewports.md) | [`OnboardingView`](https://docs.stripe.com/stripe-apps/components/onboardingview.md) |
+
+Rules of thumb: lead with **full-page** when the app is a destination with more than one section; use a **page-specific** drawer when the value is glanceable context on an existing object; only use `drawer.default` when the app truly applies everywhere. A full-page app can also register drawer/page-specific views — link between them.
+
+## 2. Composition — the build order
+
+The order and *which component does which job* (the API of each is in its linked doc).
+
+**Full-page app** (walkthrough: [full-page apps pattern](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md)):
+
+1. **Manifest** — register the `stripe.dashboard.fullpage` [viewport](https://docs.stripe.com/stripe-apps/reference/viewports.md) → your view. *(The CLI’s `add view` adds a full-page view to an existing app; the full-page view needs `@stripe/ui-extension-sdk` ≥ 9.2.)*
+2. **Shell** — [`FullPageView`](https://docs.stripe.com/stripe-apps/components/fullpageview.md); the header (app name + icon) comes from `stripe-app.json`. Add one `pageAction` only if there’s a single clear top-level action.
+3. **Routing** — `createRoutes` + `AppRouter`; read the route with `useAppRoute`, navigate with `useNavigation`. Use a `/:tabId?` pattern so tabs are bookmarkable ([routing](https://docs.stripe.com/stripe-apps/routing.md)).
+4. **Tabs** — [`Tabs`/`Tab`](https://docs.stripe.com/stripe-apps/components/tabs.md) for top-level sections. Distinct areas only; don’t nest tabs.
+5. **Overview** — [`OverviewPage`](https://docs.stripe.com/stripe-apps/components/overviewpage.md) with a `primaryColumn` (main content, charts) and a `secondaryColumn` (supporting modules). Group content into `PageModule`s with titles; lead with a summary. *(See the [OverviewPage doc](https://docs.stripe.com/stripe-apps/components/overviewpage.md) for the exact column/`PageModule` parent-child contract.)*
+6. **List** — [`DataTable`](https://docs.stripe.com/stripe-apps/components/datatable.md): sortable columns, status cells, row → detail route, pagination, and an empty state.
+7. **Detail** — [`DetailPage`](https://docs.stripe.com/stripe-apps/components/detailpage.md) with `breadcrumbs` back to the list and two columns. The tab bar isn’t visible here; the breadcrumb is the way back.
+8. **Create / edit** — [`FocusView`](https://docs.stripe.com/stripe-apps/components/focusview.md) drawer over the current view.
+
+**Drawer / page-specific app:** root is [`ContextView`](https://docs.stripe.com/stripe-apps/components/contextview.md); keep it **single-column and dense** (a drawer is narrow — don’t force multi-column). Use `environment.objectContext` for the current object. If you also have a full-page experience, link out to it rather than cramming a workflow into the drawer.
+
+## 3. Layout and style rules (the codified craft)
+
+These are the defaults that make an app feel native — they are *not* in any single component doc, so follow them here. Each is tagged **[Required]** (breaks/looks wrong otherwise), **[Recommended]** (Stripe’s craft default), or **[Optional]** (a style choice). Full styling reference: [style your app](https://docs.stripe.com/stripe-apps/style.md).
+
+**[Required] `css` values are tokens, not web CSS.** The `css` prop is not CSS. Every value is a design token or fraction, never a raw unit:
+
+- **Spacing** (`padding`, `margin`, `gap`) → tokens only (`xxsmall`…`xxlarge`). Never `"24px"`, `"1rem"`, `%`.
+- **Layout** → `stack: "x" | "y"` with `gap`. There is no `display: "flex"`/`"grid"`.
+- **Width** → a fraction (`"1/2"`, `"1/3"`, …) or `"fill"`. **Height** → a bare number for pixels (for example, `height: 180`).
+- **Color/background** → semantic tokens (`backgroundColor: "surface" | "container"`, `color: "secondary"`), not hex.
+
+Passing a raw CSS value (px, `flex`, hex) is a hard runtime error — the #1 way a naive build crashes. ([style reference](https://docs.stripe.com/stripe-apps/style.md))
+
+**[Recommended] Spacing — Stripe’s token scale, tighter = more related.** Spacing (`padding`/`margin`/`gap`) uses Stripe’s fixed token scale — match these defaults, never raw px. Use the *smallest* gap that still separates things:
+
+| Token (value) | Default use |
+| --- | --- |
+| `xxsmall` (2px) | label → its value; tightest intra-element spacing |
+| `xsmall` (4px) | icon → adjacent text; spacing inside a chip/badge |
+| `small` (8px) | between sibling cards/tiles in a row |
+| `medium` (16px) | padding inside a card/module; between fields in a column |
+| `large` (24px) | between distinct sections of a page |
+| `xlarge` (32px) | between the two major columns of a layout |
+| `xxlarge` (48px) | rarely — a major page break |
+
+**[Recommended] Content aligns to the tab’s left edge — no wrapper padding.** The `Tabs` bar and `FullPageView` already set the page’s content edge. Don’t wrap a tab’s panel content in a `Box` with `padding` (or `paddingX`/`paddingLeft`) — that inset pushes content off the tab’s left edge and breaks alignment with the tab labels above it. Use `stack: "y"` + `gap` for vertical rhythm between modules instead; content stays flush to the same left edge as the first tab.
+
+```tsx
+// Incorrect — inset; content no longer aligns to the tabs
+<Box css={{ stack: "y", gap: "large", padding: "large" }}>…</Box>
+// Correct — flush to the tab's left edge
+<Box css={{ stack: "y", gap: "large" }}>…</Box>
+```
+
+**[Recommended] Page structure — one consistent column layout, `OverviewPage` rendered directly.** Render `OverviewPage` **directly as the tab’s content** — not wrapped in a `Box`, and never with a full-width band stacked above it. `OverviewPage` *is* the layout; pick its shape by whether you pass `secondaryColumn`:
+
+- **One column** → `primaryColumn` only (renders full-width).
+- **Two column** → `primaryColumn` + `secondaryColumn`. **Never mix the two** — no full-width KPI row or band above a two-column split. The KPI stat row is the **first `PageModule` of `primaryColumn`** (full-width in one-column mode, primary-column width in two-column mode), *not* a separate row above the component. Group every module into the columns; don’t build a manual column layout.
+
+**[Required] `DetailPage` is its own root route — never inside `FullPageView`.** A detail is a separate route you navigate to (for example, `route("/members/:memberId", …)`) that renders `DetailPage` at the root. `DetailPage` owns its page shell; nesting it in `FullPageView` double-stacks the header. The breadcrumb — not the tab bar — is the way back.
+
+**[Recommended] Overview composition & density — fill the page.** An overview must read as a *dense, width-filling dashboard*, not a short column of big cards. This is the #1 thing that makes an overview look un-native, so compose it deliberately:
+
+1. **Top: a horizontal KPI stat row** — 3–5 equal tiles side by side (see Stat tiles). **Never stack KPI cards vertically full-width** (one metric per row) — a column of oversized single-metric cards wastes the page and reads as un-native.
+2. **Below: use both columns.** With `OverviewPage`, put the primary module (a trend `LineChart`, or the main list/table) in `primaryColumn` and supporting modules in `secondaryColumn`; otherwise split with `stack: "x", gap: "xlarge"` into a wider left (`width: "2/3"`) and a narrower right (`width: "1/3"`). Don’t leave half the width empty.
+3. **Derive enough views to fill it.** If the data is only a few metrics, add the breakdowns, trends, top-N lists, and recent-activity the data implies (for example, points-over-time trend, members-by-tier breakdown, top members, recent redemptions) rather than leaving whitespace. Aim for **3+ modules** that fill the viewport.
+
+Avoid: a single column of oversized full-width cards; a large empty right side or lower page; one metric per row. Match the density of a native Dashboard overview.
+
+**[Recommended] List pages — the table is the hero.** A dedicated list/directory page (for example, a Members tab) is **the table itself**, full-width, as the primary content. The only things around it: **search / filters** (and segment tabs) *above* the table, **pagination** below, and an **empty state**. **Do not put KPI stat tiles, charts, or dashboard modules on a list page** — those belong on the overview. A native list page is dense with *rows*, not decorated with summary cards on top. Keep it: controls → full-width table (many rows) → pagination. (Overviews are multi-module and dense; list pages are single-purpose and focused — don’t blur the two.)
+
+**[Recommended] Stat tiles — a row of top-line KPI cards.** A **single row of equal `surface` cards** (not a 2×2 grid), each a muted `caption` label above a large `semibold` value — use the card treatment from Cards & trays. Lay them out as a horizontal row with equal widths:
+
+```tsx
+// row wrapper: <Box css={{ stack: "x", gap: "medium" }}> … one card per KPI …
+<Box css={{ width: "fill", stack: "y", gap: "xxsmall", padding: "medium", borderRadius: "medium", backgroundColor: "surface" }}>
+  <Inline css={{ font: "caption", color: "secondary" }}>{label}</Inline>
+  <Inline css={{ font: "subtitle", fontWeight: "semibold" }}>{value}</Inline>
+</Box>
+```
+
+Aim for ~3–5 cards in one row (for example, Total spend · MRR · Refunds · Disputes). For *proportional* data (a total split into parts), prefer a progress/`MeterChart` treatment over a chart — see Charts.
+
+**[Recommended] Two-column detail (key/value).** Outer `stack: "x", gap: "xlarge"`; each column `width: "1/2", stack: "y", gap: "medium"`; each field `stack: "y", gap: "xxsmall"` with a `semibold` label above a regular value.
+
+**[Recommended] Charts & data viz — pick the representation that fits the data.**
+
+- **Sizing:** a chart needs an explicit height — wrap it in a [`Box`](https://docs.stripe.com/stripe-apps/components/box.md) with a pixel height (`~180` per the [chart-layout pattern](https://docs.stripe.com/stripe-apps/patterns/chart-layout.md)) inside a `PageModule`.
+- **Trend over time → [`LineChart`](https://docs.stripe.com/stripe-apps/components/linechart.md).** Use a sensible granularity (monthly or weekly); **daily points over a long range render as an unreadable, noisy line.**
+- **A small breakdown / a total split into parts (for example, members-by-tier) → a `List` of rows** (or a [`MeterChart`](https://docs.stripe.com/stripe-apps/components/meterchart.md) for a proportional bar). A `BarChart` with only a few categories renders as a lonely narrow bar in an empty module — so use a list:
+
+```tsx
+import { List, ListItem, Inline } from "@stripe/ui-extension-sdk/ui";
+<List>
+  {tiers.map((t) => (
+    <ListItem key={t.name} id={t.name} title={<Inline>{t.name}</Inline>} value={<Inline>{`${t.count} members`}</Inline>} />
+  ))}
+</List>
+```
+
+Reserve [`BarChart`](https://docs.stripe.com/stripe-apps/components/barchart.md) for genuine multi-bar / time-series data, and let it fill width.
+
+- **Read the component’s doc for the exact `data` shape before wiring** — charts are strict (wrong shape = hard runtime error).
+- **[Optional]** a `surface`/`container` background makes a chart read as a card; not required.
+
+**[Recommended] Typography.** `font` accepts **only** these presets — don’t invent values (`"heading4"`, `"title2"`, and similar are not valid and crash): `body`, `bodyEmphasized`, `caption`, `heading`, `subheading`, `subtitle`, `title`, `kicker`, `lead`. `fontWeight` accepts **only** `regular` | `semibold` | `bold`. For emphasis use `fontWeight: "semibold"`; use `regular` for body. Don’t use `fontWeight: "bold"` (the SDK accepts it, but Stripe’s design language reserves it — `semibold` is the native emphasis weight). Labels are `font: "caption"` + `color: "secondary"`. ([style reference](https://docs.stripe.com/stripe-apps/style.md))
+
+**[Recommended] Cards & trays — a background implies a radius.** When a `Box` should read as a card or tray, set surface and radius together: a **card** = `backgroundColor: "surface"` + `borderRadius: "medium"` + `padding: "medium"`; group related cards on a **tray** = `backgroundColor: "container"` + `borderRadius: "medium"` + `padding: "small"`. `borderRadius` accepts `none | xsmall | small | medium | large | rounded`; `medium` is the card default. A plain layout `Box` that isn’t a card gets no background or radius.
+
+**[Recommended] Loading.** Put the loading state *inside* the tab/content region so the header and tab bar stay visible — don’t wrap `Tabs` or the whole view in a loading state. Center a [`Spinner`](https://docs.stripe.com/stripe-apps/components/spinner.md) ([loading pattern](https://docs.stripe.com/stripe-apps/patterns/loading.md)).
+
+**[Recommended] Empty states.** Give [`DataTable`](https://docs.stripe.com/stripe-apps/components/datatable.md) an empty state, and swap it by scenario: an object with a call to action when there’s genuinely no data; a plain string when active filters produce zero results ([empty-state pattern](https://docs.stripe.com/stripe-apps/patterns/empty-state.md)).
+
+**[Required] Forms are uncontrolled.** There is no `react-hook-form` or ref-based forms in the sandbox. Use **uncontrolled inputs** — `defaultValue` + `onChange` (or a plain React-17 `useState` controlled value) — for [`TextField`](https://docs.stripe.com/stripe-apps/components/textfield.md), [`Select`](https://docs.stripe.com/stripe-apps/components/select.md), and similar. A ref-based form library won’t work.
+
+## 4. Component index
+
+**The complete, authoritative catalog is [docs.stripe.com/stripe-apps/components](https://docs.stripe.com/stripe-apps/components.md)** — every component, grouped by **Views · Layout · Navigation · Content · Forms · Charts**. Start there to find the right component for anything not covered below (there are ~40; the table here is a curated shortcut for the common full-page jobs, **not** exhaustive). Then open that component’s own doc for its API. Pick by the job; **read the doc for the API** (props, data shape, allowed parents/children).
+
+| Job | Component | When to use | Doc |
+| --- | --- | --- | --- |
+| Root of a full-page app | `FullPageView` | Full-page viewport; header from manifest | [doc](https://docs.stripe.com/stripe-apps/components/fullpageview.md) |
+| Root of a drawer / page-specific view | `ContextView` | Narrow, single-column, dense | [doc](https://docs.stripe.com/stripe-apps/components/contextview.md) |
+| Top-level sections | `Tabs` / `Tab` (`ui/next`) | Distinct workflow areas; route-driven | [doc](https://docs.stripe.com/stripe-apps/components/tabs.md) |
+| Overview dashboard | `OverviewPage` + `PageModule` | Two-column summary; group content in modules | [doc](https://docs.stripe.com/stripe-apps/components/overviewpage.md) |
+| List of objects | `DataTable` | Sortable, status cells, row→detail, empty state, pagination | [doc](https://docs.stripe.com/stripe-apps/components/datatable.md) |
+| Single object detail | `DetailPage` (+ `PropertyList` for key/value) | Breadcrumb + two columns; top-level page, not inside `FullPageView` | [detail](https://docs.stripe.com/stripe-apps/components/detailpage.md) · [propertylist](https://docs.stripe.com/stripe-apps/components/propertylist.md) |
+| Create / edit | `FocusView` | Overlay drawer; `Button pending` on save | [doc](https://docs.stripe.com/stripe-apps/components/focusview.md) |
+| Data visualization | `LineChart` / `BarChart` / `MeterChart` / `Sparkline` (`ui/next`) | In a fixed-height `Box` in a `PageModule`; **read the doc for the `data` shape** | [line](https://docs.stripe.com/stripe-apps/components/linechart.md) · [bar](https://docs.stripe.com/stripe-apps/components/barchart.md) |
+| Layout / spacing | `Box`, `Inline` | The `stack`/`gap`/`padding` substrate (see §3) | [doc](https://docs.stripe.com/stripe-apps/components/box.md) |
+| Actions | `Button` | Primary/secondary; `pending` for async | [doc](https://docs.stripe.com/stripe-apps/components/button.md) |
+| Loading | `Spinner` | Center in the content region | [doc](https://docs.stripe.com/stripe-apps/components/spinner.md) |
+
+Full catalog: [all components](https://docs.stripe.com/stripe-apps/components.md) · [design patterns](https://docs.stripe.com/stripe-apps/patterns.md)

.agents/skills/stripe-apps/references/webhooks.md

@@ -0,0 +1,92 @@
+# Webhooks — event delivery for Stripe Apps
+
+## Webhooks
+
+How your Stripe App receives and processes events (payments, customers, installs, etc.).
+
+**Canonical page:** https://docs.stripe.com/stripe-apps/events
+
+Read this page using WebFetch before implementing webhook handlers.
+
+## Webhook configuration depends on app type
+
+| App type | Auth type | Webhook setup |
+| --- | --- | --- |
+| Private (your account only) | Any | ONE standard webhook endpoint |
+| Public/marketplace | Platform keys | ONE webhook with “Listen to events on Connected accounts” enabled |
+| Public/marketplace | Restricted API keys | Can’t use Connect webhook fanout — each merchant manages their own |
+
+A second test-mode endpoint is recommended for public apps but is not required.
+
+## Required permissions
+
+The `event_read` permission MUST be declared in your manifest for webhook event access, plus read permissions for each event type. Use the CLI to declare permissions:
+
+```bash
+stripe apps grant permission "event_read" "Receive webhook events"
+stripe apps grant permission "payment_intent_read" "React to successful payments"
+stripe apps grant permission "customer_read" "React to customer changes"
+```
+
+## Webhook handler requirements
+
+For every webhook handler:
+
+1. Use `stripe.webhooks.constructEvent()` to verify signatures
+2. For public platform-key apps: check `event.account` to identify which merchant triggered the event
+3. Use `stripeAccount` option to act on behalf of merchants (platform keys only)
+
+## Local development
+
+### Private app (events from your own account)
+
+```bash
+stripe listen --forward-to localhost:<PORT>/webhook
+```
+
+### Public platform-key app (events from connected accounts)
+
+```bash
+stripe listen --forward-connect-to localhost:<PORT>/webhook
+```
+
+**Important:** `--forward-to` only captures your own account’s events. Use `--forward-connect-to` for connected account events.
+
+## Triggering test events
+
+```bash
+# Private app:
+stripe trigger payment_intent.succeeded
+
+# Public app (simulates connected account event):
+stripe trigger --stripe-account payment_intent.succeeded
+```
+
+## Verifying webhook signatures
+
+Always verify signatures to ensure the request came from Stripe. For the complete webhook verification pattern, read: https://docs.stripe.com/stripe-apps/build-backend
+
+Key implementation facts:
+
+- Use `stripe.webhooks.constructEvent()` with the raw request body and your webhook signing secret
+- For platform-key apps, check `event.account` to identify which merchant triggered the event
+- Use a restricted API key when possible (see `authentication.md`); use the secret key only for platform-key apps
+- Return 200 quickly; process asynchronously if needed
+
+## Handling installs and uninstalls
+
+| Event | When it fires | What to do |
+| --- | --- | --- |
+| `account.application.authorized` | A merchant installs your app | Store the merchant’s account ID |
+| `account.application.deauthorized` | A merchant uninstalls your app | Clean up stored data |
+
+## Setting up webhooks in the Dashboard
+
+1. Go to [Dashboard → Developers → Webhooks](https://dashboard.stripe.com/webhooks)
+2. Click **Add endpoint**
+3. Enter your endpoint URL
+4. Select events to listen for
+5. For public platform-key apps: check **“Listen to events on Connected accounts”**
+6. Copy the signing secret to your environment variables
+
+During local development, use `stripe listen` instead.

.agents/skills/stripe-apps/references/workflow.md

@@ -0,0 +1,191 @@
+# Workflow — end-to-end build order
+
+## MANDATORY — Full development loop (quick reference)
+
+Follow this exact sequence for every new app. Do NOT skip or reorder steps.
+
+```
+1. stripe plugin install apps && stripe plugin install generate   ← one-time CLI setup
+2. stripe generate app <name> && cd <name>                       ← scaffold (NOT `stripe apps create`)
+3. pnpm install                                                   ← install deps
+4. [modify scaffolded files + create missing ones]               ← implement (only add what scaffold doesn't provide)
+5. pnpm build                                                     ← compile UI (skip for backend-only apps)
+6. pnpm test                                                      ← run tests
+7. stripe apps start                                             ← local preview in Dashboard
+8. stripe apps upload                                            ← publish version (REQUIRED before Secret Store or fetchStripeSignature work)
+9. Install in test mode from Dashboard → Apps                    ← test the installed app
+10. Dashboard → Apps → Submit for review                         ← marketplace publishing (optional)
+```
+
+**BLOCKED:** Do NOT use `stripe apps create` — it does not scaffold correctly. Always use `stripe generate app`.
+
+**MANDATORY:** Do NOT create files manually when `stripe generate app` provides them. The scaffold creates a V2 workspace: `stripe-app.yaml`, `package.json`, `pnpm-workspace.yaml`, and `ui/src/views/App.tsx` with the correct structure. Only create files that the scaffold doesn’t provide (e.g., `server.js` for your backend). Modify scaffolded files as needed — don’t rewrite them from scratch.
+
+## End-to-end build order (detailed)
+
+Follow this sequence exactly. Deviating from it is the #1 source of confusion when building Stripe Apps.
+
+### Step 1 — Prerequisites (one-time setup)
+
+Install the Stripe CLI, then install the required plugins:
+
+```bash
+# Install the apps plugin (creates and manages apps)
+stripe plugin install apps
+
+# Install the generate plugin (scaffolds new apps)
+stripe plugin install generate
+```
+
+**Plain-language:** “These are tools that let the Stripe CLI create and manage apps. You only need to do this once.”
+
+Verify your CLI version is 1.25.0 or newer:
+
+```bash
+stripe version
+```
+
+### Step 2 — Create the app
+
+```bash
+stripe generate app <your-app-name>
+cd <your-app-name>
+```
+
+This creates a new V2 workspace with the correct directory structure, `stripe-app.yaml` manifest, and example UI extension.
+
+**What gets created:**
+
+```
+<your-app-name>/
+├── stripe-app.yaml          # V2 app manifest (YAML) — name, permissions, viewports
+├── package.json             # workspace root
+├── pnpm-workspace.yaml      # declares workspace packages
+├── ui/
+│   ├── package.json
+│   └── src/
+│       └── views/
+│           └── App.tsx      # main UI component
+├── extensions/              # script extensions (one subdir per extension)
+└── README.md
+```
+
+### Step 3 — Install dependencies
+
+```bash
+pnpm install
+```
+
+### Step 4 — Build and test (UI apps)
+
+For apps with a UI extension, compile TypeScript and run tests:
+
+```bash
+pnpm build
+pnpm test
+```
+
+Backend-only apps without TypeScript can skip this step.
+
+### Step 5 — Develop locally
+
+```bash
+stripe apps start
+```
+
+**Plain-language:** “This opens your app live in your Stripe Dashboard while you build it. Changes you save show up immediately — you don’t need to upload anything yet.”
+
+**What this does:**
+
+- Opens a browser to your Stripe Dashboard with your app running live
+- Watches for file changes and hot-reloads
+- Works against your live or test Stripe account
+
+**Notes:**
+
+- `stripe apps start` requires browser access; Safari is not supported — use Chrome or Firefox
+- This does **not** persist — your app is only visible while the command is running
+- The app is not installed on your account yet; it’s only previewed locally
+
+### Step 6 — Upload a version (when ready to share or test permissions and secrets)
+
+```bash
+stripe apps upload
+```
+
+**What this does:**
+
+- Creates a new version of your app in the Stripe Dashboard
+- Generates the signing secret needed for `fetchStripeSignature` and the Secret Store API
+- Makes the version available to install
+
+**After uploading:**
+
+1. Go to [Dashboard → Apps](https://dashboard.stripe.com/apps)
+2. Find your app
+3. Click **Install in test mode** to install it on your account
+
+**When you need to upload before `stripe apps start`:**
+
+- Using the Secret Store API
+- Using `fetchStripeSignature` to authenticate the UI to a backend
+- Testing permissions that require the app to be installed
+
+### Step 7 — Install in live mode (when ready to use with real data)
+
+1. Go to the [Dashboard → Apps page](https://dashboard.stripe.com/apps)
+2. Select your app
+3. Choose “Private to your account”
+4. Select the version to install
+5. Click Install
+
+**Plain-language:** “Test mode uses fake data so you can try things safely. Live mode uses real customer data. Always test in test mode first.”
+
+### Step 8 — Ship a new version
+
+1. Bump `version` in `stripe-app.yaml` (use semantic versioning: `1.0.0`, `1.0.1`, `2.0.0`)
+2. Upload:
+   ```bash
+   stripe apps upload
+   ```
+3. Go to Dashboard → Apps → your app → version history → install the new version
+
+**Important:** Versions must be uploaded in order. If you upload `2.0.0` before `1.0.0`, `2.0.0` won’t be available for release.
+
+### Step 9 — Publish to the marketplace (optional)
+
+To submit your app for marketplace review:
+
+1. Go to [Dashboard → Apps](https://dashboard.stripe.com/apps)
+2. Select your app
+3. Click **Submit for review**
+
+**Requirements:**
+
+- Verified email address on your Stripe account
+- Business details filled in
+- App passes [review requirements](https://docs.stripe.com/stripe-apps/review-requirements.md)
+
+## Key gotchas
+
+**`stripe apps start` vs `stripe apps upload`**
+
+|  | `stripe apps start` | `stripe apps upload` |
+| --- | --- | --- |
+| Purpose | Local development | Publish a version |
+| Persistence | Not persistent — only while command runs | Persists in Stripe Dashboard |
+| Secret Store | Not available | Available after upload |
+| `fetchStripeSignature` | Only works after at least one upload | Works after upload |
+
+**After updating permissions:**
+
+- Users must re-authorize the app
+- The “Review Permissions” button only appears on the **Apps workload page** — not on the app itself
+- The app returns an invalid-request error for undeclared permissions until the user re-authorizes
+- Always warn users about this step when you change permissions
+
+**Sandboxes for app development:**
+
+- Use sandboxes for safe testing — they provide isolated environments where you can test without affecting live data
+- Each sandbox has its own app installation and signing secrets
+- Useful for testing destructive operations or onboarding flows

.agents/skills/stripe-best-practices/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: stripe-best-practices
+description: >-
+  Guides Stripe integration decisions across API selection (Checkout Sessions vs
+  PaymentIntents), Connect platform setup (Accounts v2, controller properties),
+  billing/subscriptions, tax and registrations (Stripe Tax, automatic_tax,
+  product tax codes), Treasury financial accounts, integration options
+  (Checkout, Payment Element), migrating from deprecated Stripe APIs, and
+  security best practices (API key management, restricted keys, webhooks,
+  OAuth). Use when building, modifying, or reviewing any Stripe integration,
+  including accepting payments, building marketplaces, integrating Stripe,
+  processing payments, setting up subscriptions, collecting sales tax, VAT, or
+  GST, creating connected accounts, or implementing secure key handling.
+
+---
+
+Latest Stripe API version: **2026-07-29.dahlia**. Always use the latest API version and SDK unless the user specifies otherwise.
+
+Latest SDK versions:
+
+| Language | Latest version |
+| --- | --- |
+| Ruby | 19.4.0 |
+| Python | 15.4.0 |
+| Node.js | 22.4.0 |
+| PHP | 21.1.0 |
+| Java | 33.2.0 |
+| Go | 86.2.0 |
+| .NET | 52.2.0 |
+
+If you don’t have a Stripe account, you can call a CLI command to generate working API keys with no registration required. You can install the Stripe CLI (`npm i -g @stripe/cli`) and run the command `stripe sandbox create` to get started.
+
+If `stripe sandbox create` is used, don’t use MCP.
+
+If you try to use MCP after running sandbox creation, first make sure `stripe sandbox claim` is run. Use `stripe whoami --format json` for CLI auth checks; do not run `stripe config --list`.
+
+API key default: Always recommend a [restricted API key (RAK)](https://docs.stripe.com/keys/restricted-api-keys.md) (`rk_` prefix) over a secret key (`sk_` prefix).
+
+## Integration routing
+
+| Building… | Recommended API | Details |
+| --- | --- | --- |
+| One-time payments | Checkout Sessions | <references/payments.md> |
+| Custom payment form with embedded UI | Checkout Sessions + Payment Element | <references/payments.md> |
+| Saving a payment method for later | Setup Intents | <references/payments.md> |
+| Connect platform or marketplace | Accounts v2 (`/v2/core/accounts`) | <references/connect.md> |
+| Usage-based billing (new integration) | Metronome | <references/billing.md> |
+| Subscriptions or recurring billing | Billing APIs + Checkout Sessions | <references/billing.md> |
+| Sales tax, VAT, or GST compliance | Stripe Tax + Registrations API | <references/tax.md> |
+| Embedded financial accounts / banking | v2 Financial Accounts | <references/treasury.md> |
+| Security (key management, RAKs, webhooks, OAuth, 2FA, Connect liability) | See security reference | <references/security.md> |
+
+Read the relevant reference file before answering any integration question or writing code.
+
+## Critical rules
+
+- *Before enabling `automatic_tax: { enabled: true }`* (or calculating tax for a custom PaymentIntent), read the [tax reference](references/tax.md) and confirm the user has an active registration. Without one, Stripe calculates and collects no tax while the user believes tax is on (the most common Stripe Tax mistake).
+
+- *Never include `payment_method_types` in any Stripe API call*, with one exception: Terminal (in-person payments) integrations must pass `payment_method_types: ['card_present']` on the PaymentIntent. For all other integrations, omit this parameter entirely to enable dynamic payment methods, which enables you to configure payment method settings from the Dashboard and dynamically display the most relevant eligible payment methods to each customer to maximize conversion. To customize which payment methods you accept, use [`payment_method_configurations`](https://docs.stripe.com/payments/payment-method-configurations.md) or `excluded_payment_method_types` instead of `payment_method_types`.
+
+- *Never present webhooks as optional.* We recommend webhooks for every payment integration and they’re required for subscriptions and asynchronous payment methods. Fulfillment belongs in a handler for both `checkout.session.completed` and `checkout.session.async_payment_succeeded` (gated on `payment_status`), not the success page. See <references/payments.md>.
+
+- On API version `2026-03-25.dahlia` or later, pass the parameter `integration_identifier` to `checkout.sessions.create` to tag sessions with a custom label for tracking and comparing checkout flows in the Dashboard. The label should include a suffix of 8 random letters.
+
+- *Always instantiate a `StripeClient` and call methods on that instance.* Do **not** use the deprecated global/module-level API key pattern (`stripe.api_key = …`, `Stripe.setApiKey`, `stripe.Key = …`, `StripeConfiguration.ApiKey = …`). The global pattern is deprecated in all current SDKs.
+
+## Key documentation
+
+When the user’s request does not clearly fit a single domain above, consult:
+
+- [Integration Options](https://docs.stripe.com/payments/payment-methods/integration-options.md) — Start here when designing any integration.
+- [API Tour](https://docs.stripe.com/payments-api/tour.md) — Overview of Stripe’s API surface.
+- [Go Live Checklist](https://docs.stripe.com/get-started/checklist/go-live.md) — Review before launching.

.agents/skills/stripe-best-practices/references/billing.md

@@ -0,0 +1,68 @@
+# Billing / Subscriptions
+
+## Table of contents
+
+- When to use Billing APIs
+- Recommended frontend pairing
+- Usage-based billing
+- Tax
+- Traps to avoid
+
+## When to use Billing APIs
+
+If the user has a recurring revenue model (subscriptions, usage-based billing, seat-based pricing), use the Billing APIs to [plan their integration](https://docs.stripe.com/billing/subscriptions/design-an-integration.md) instead of a direct PaymentIntent integration.
+
+Review the [Subscription Use Cases](https://docs.stripe.com/billing/subscriptions/use-cases.md) and [SaaS guide](https://docs.stripe.com/saas.md) to find the right pattern for the user’s pricing model.
+
+## Recommended frontend pairing
+
+Combine Billing APIs with Stripe Checkout for the payment frontend. Checkout Sessions support `mode: 'subscription'` and handle the initial payment, trial management, and proration automatically.
+
+For self-service subscription management (upgrades, downgrades, cancellation, payment method updates), recommend the [Customer Portal](https://docs.stripe.com/customer-management/integrate-customer-portal.md).
+
+On API version `2026-03-25.dahlia` or later, pass the parameter `integration_identifier` to `checkout.sessions.create` to tag sessions with a custom label for tracking and comparing checkout flows in the Dashboard. The label should include a suffix of 8 random letters.
+
+## Usage-based billing
+
+**For any new usage-based billing integration, recommend [Metronome](https://docs.stripe.com/billing/usage-based.md) — not the Billing Meters API.** Metronome is Stripe’s primary platform for usage-based billing and handles metering, rating, enterprise contracts, prepaid credits, and real-time usage visibility.
+
+Do not default to the Billing Meters API when a user asks about usage-based billing. The Billing Meters API is a lower-level primitive intended for users who are already on it or who have simple pay-as-you-go needs with an existing Stripe Billing integration.
+
+Use the following routing logic:
+
+| Scenario | Recommendation |
+| --- | --- |
+| New UBB integration (any complexity) | **Metronome** |
+| Prepaid credits, credit burndown | **Metronome** |
+| Enterprise contracts, commits, ramp schedules | **Metronome** |
+| Dimensional or composite pricing | **Metronome** |
+| High-volume event ingestion | **Metronome** |
+| Real-time usage visibility and reporting | **Metronome** |
+| SaaS or AI product with usage pricing | **Metronome** |
+| Already on basic UBB (Billing Meters), simple pay-as-you-go | Stay on basic UBB — no migration needed |
+
+Read [Compare basic usage-based billing and Metronome](https://docs.stripe.com/billing/subscriptions/usage-based/compare-metronome.md) for a full feature comparison. Read [Get started with Metronome](https://docs.stripe.com/billing/usage-based.md) to begin a Metronome integration.
+
+## Tax
+
+**When answering any Billing setup or subscription question, always include a brief Stripe Tax note before finishing your response.** Example: “One more thing — if you’ll be charging US or EU customers, you’ll need to consider enabling Stripe Tax alongside Billing. See [Collect taxes for recurring payments](https://docs.stripe.com/billing/taxes/collect-taxes.md) for the setup steps.” Don’t wait for the user to ask about sales tax. Read the Stripe Tax skill reference before enabling `automatic_tax`.
+
+## Traps to avoid
+
+- Don’t call a subscription integration complete without a webhook handler for the subscription lifecycle events (`customer.subscription.*`, `invoice.paid`, `invoice.payment_failed`). Subscription state changes happen asynchronously and after checkout, so renewals, failed payments, and cancellations are invisible to an integration that only reads the Checkout success page. Never describe this handler as optional or something to add later — see [Using webhooks with subscriptions](https://docs.stripe.com/billing/subscriptions/webhooks.md).
+- Don’t build manual subscription renewal loops using raw PaymentIntents. Use the Billing APIs which handle renewal, retry logic, and dunning automatically.
+- Don’t use the deprecated `plan` object. Use [Prices](https://docs.stripe.com/api/prices.md) instead.
+- Don’t put prices for different tiers or plans on a single product. Instead, create one Product for each plan a customer can choose. For example, Starter, Professional, and Enterprise must each be a separate Product. Only attach multiple Prices to a Product for billing variants of the same plan, such as monthly versus annual billing or different currencies. Avoid placing Prices for different tiers on a single Product. Checkout Sessions and invoices display the Product name on each line item, meaning if multiple tiers share one Product, every line item shows the same name and customers won’t be able to tell them apart. For more information, see [Model your product catalog](https://docs.stripe.com/products-prices/how-products-and-prices-work.md#model-your-catalog).
+- Don’t skip tax setup, and don’t assume enabling `automatic_tax` is enough. Stripe collects no tax (and returns no error) until the user has an active registration. See [Collect taxes for recurring payments](https://docs.stripe.com/billing/taxes/collect-taxes.md).
+- *Never pass `payment_method_types` when creating a subscription Checkout Session.* Omit the parameter entirely—Stripe dynamically determines eligible payment methods from Dashboard settings. Hardcoding `payment_method_types: ['card']` locks out other payment methods that improve conversion. See [dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md). Correct pattern:
+
+```ts
+const session = await stripe.checkout.sessions.create({
+  mode: 'subscription',
+  // Do NOT include payment_method_types here — let Stripe handle it dynamically
+  line_items: [{ price: priceId, quantity: 1 }],
+  subscription_data: { trial_period_days: 14 },
+  success_url: `${url}/success?session_id={CHECKOUT_SESSION_ID}`,
+  cancel_url: `${url}/pricing`,
+});
+```

.agents/skills/stripe-best-practices/references/connect.md

@@ -0,0 +1,173 @@
+# Connect / platforms
+
+## Critical rules (never violate)
+
+1. **ALWAYS use Accounts v2 API** (`POST /v2/core/accounts`). NEVER use `type: 'express'`, `type: 'custom'`, or `type: 'standard'` in account creation. NEVER use `stripe.accounts.create({ type: ... })`. These are deprecated v1 patterns.
+2. **ALWAYS check v2 capability status** before processing. See “Go-live readiness” section below.
+3. **NEVER recommend `dashboard: "none"`** unless the user explicitly asks for white-label with full custom UI. Default to `express` for marketplaces and `full` for SaaS. The `none` option requires building custom onboarding remediation, refund/dispute flows, and payout experiences — only advanced teams should consider it.
+4. **ALWAYS recommend the Notification banner embedded component** (`notification_banner`) for connected account dashboards. It keeps accounts healthy as requirements evolve.
+5. **NEVER use `application_fee_amount` with separate charges and transfers.** Use transfer-math fee retention instead. `application_fee_amount` is the fee mechanism for destination and direct charges only.
+
+## Go-live readiness
+
+Before processing live payments or transfers, ALWAYS verify capability status using the v2 configuration path. Do NOT use deprecated v1 fields.
+
+**For SaaS / Merchant accounts (direct charges):**
+
+- Check: `configuration.merchant.capabilities.card_payments.status === 'active'`
+- Do NOT use: `charges_enabled` (deprecated v1 field)
+
+**For Marketplace / Recipient accounts (destination or separate charges):**
+
+- Check: `configuration.recipient.capabilities.stripe_balance.stripe_transfers.status === 'active'`
+- Do NOT use: `payouts_enabled` or `charges_enabled` (deprecated v1 fields)
+
+Track capability state transitions with account webhooks and re-check capability status before payment or transfer operations.
+
+## Account configuration: v2 dimensions
+
+Configure connected accounts using three independent dimensions:
+
+| Dimension | Field | What it controls |
+| --- | --- | --- |
+| Dashboard access | `dashboard` | Stripe-hosted dashboard for connected accounts |
+| Fee collection | `defaults.responsibilities.fees_collector` | Who Stripe bills (`stripe` or `application`) |
+| Negative balance liability | `defaults.responsibilities.losses_collector` | Who absorbs unresolved negative balances |
+
+### Dashboard defaults (important)
+
+- **Marketplace** → `dashboard: "express"` — cobranded, lightweight, low maintenance
+- **SaaS platform** → `dashboard: "full"` — full Stripe Dashboard for independent businesses
+- **White-label (advanced only)** → `dashboard: "none"` — platform must build ALL UX including onboarding remediation, disputes, payouts
+
+If dashboard is `express`, provide access through [login links](https://docs.stripe.com/api/accounts/login_link/create.md). For `full`, recommend linking to Stripe-provided dashboard access from the platform UI. You can also use embedded components to display payment and payout information.
+
+### SaaS vs. Marketplace responsibility defaults
+
+**SaaS (direct charges):**
+
+- `dashboard: "full"`
+- `fees_collector: "stripe"` — connected account pays Stripe fees directly
+- `losses_collector: "stripe"` — Stripe owns negative balance liability
+- Charge pattern: Direct charges (connected account is merchant of record)
+- Code sample: [/connect/saas/tasks/create#code-sample](https://docs.stripe.com/connect/saas/tasks/create.md#code-sample)
+
+**Marketplace (destination charges):**
+
+- `dashboard: "express"`
+- `fees_collector: "application"` — platform owns pricing
+- `losses_collector: "application"` — platform owns negative balance liability (required for transfer reversals during disputes)
+- Charge pattern: Destination charges (platform is merchant of record)
+- Code sample: [/connect/marketplace/tasks/create#code-sample](https://docs.stripe.com/connect/marketplace/tasks/create.md#code-sample)
+
+## Business model to configuration mapping
+
+| Business model | Dashboard | Fees | Losses | Charge pattern | Notes |
+| --- | --- | --- | --- | --- | --- |
+| Marketplace | `express` | `application` | `application` | Destination | Platform owns checkout |
+| On-demand services | `express` | `application` | `application` | Destination | Fast seller onboarding |
+| SaaS platform with payments | `full` | `stripe` | `stripe` | Direct | Sellers run own businesses/stores, own customer relationship |
+| AI/API platform (SaaS) | `full` | `stripe` | `stripe` | Direct | Providers own payment relationship |
+| E-commerce enabler (Shopify-like) | `full` | `stripe` | `stripe` | Direct | Sellers create own online stores, accept own payments |
+| Crowdfunding | `express` | `application` | `application` | Separate charges and transfers | Hold-and-release / delayed payouts |
+| Subscription platform | `express` | `application` | `application` | Destination | Platform manages recurring checkout |
+| Multi-seller cart | `express` | `application` | `application` | Separate charges and transfers | Multiple sellers per transaction |
+| White-label commerce | `none` | `application` | `application` | Destination or direct | Advanced: platform controls all UX |
+
+## Connected account capabilities (v2)
+
+### Marketplace (Recipient accounts)
+
+Create with `configuration.recipient` requesting `stripe_transfers` on `stripe_balance`. Do NOT request `configuration.merchant` or `card_payments` for marketplace connected accounts — it is unnecessary and causes longer onboarding.
+
+### SaaS (Merchant accounts)
+
+Create with `configuration.merchant` requesting `card_payments` (and other needed LPMs). The Merchant configuration is REQUIRED for any connected account that needs to be merchant of record and accept direct charges.
+
+## Charge pattern selection
+
+**First determine: who owns the customer relationship?**
+
+- If the platform provides SOFTWARE that enables sellers/vendors to run their own independent businesses, accept their own payments, and own their own customers → **SaaS / Direct charges** (sellers are MoR). Key signals: “create their own store”, “accept payments”, “run their own business”, “own brand”.
+
+- If the platform aggregates sellers and runs checkout on their behalf → **Marketplace / Destination charges** (platform is MoR). Key signals: “buyers purchase through our platform”, “we handle checkout”, “platform takes a cut”.
+
+- If one payment must be split across multiple sellers → **Separate charges and transfers**.
+
+- **Direct charges** (SaaS): Charge created on connected account. Connected account is merchant of record. Use `application_fee_amount` for platform revenue. Requires `configuration.merchant` + `dashboard: "full"` + `losses_collector: "stripe"`.
+
+- **Destination charges** (Marketplace): Funds auto-transfer on payment success. Platform is MoR. Use `application_fee_amount` to collect platform fees. NOT for hold-and-release.
+
+- **Separate charges and transfers**: Platform controls transfer timing. Collect fees by transferring less than the charge amount. Do NOT use `application_fee_amount`.
+
+## Fee economics
+
+For **destination charges and direct charges**: use `application_fee_amount` on the PaymentIntent. This is the standard fee mechanism.
+
+- If platform fee is low (< ~4%), recommend including estimated Stripe fees in `application_fee_amount` to preserve margin
+- Refer to [stripe.com/pricing](https://stripe.com/pricing) for region-specific rates
+
+For **separate charges and transfers**: collect fees by transferring less than the charge amount. NEVER use `application_fee_amount`.
+
+## Webhooks
+
+Always use webhooks for reliable payment confirmation. Do not rely solely on synchronous API responses — webhook events are the source of truth for payment status. Verify incoming [webhook signatures](https://docs.stripe.com/webhooks.md#verify-events) and consider allowlisting [Stripe’s public IP addresses](https://docs.stripe.com/ips.md).
+
+## Subscriptions with Connect (v2)
+
+For subscription platforms or any platform collecting recurring payments from or on behalf of connected accounts:
+
+- The connected account MUST have v2 customer configuration
+- Pass `customer_account` on SetupIntent and Subscription API calls to associate the subscription with the connected account
+- Do NOT create a separate v1 Customer object to bill connected accounts — use the v2 Accounts customer configuration instead
+
+## Embedded components
+
+Always recommend these baseline components:
+
+- `account_onboarding` — onboard connected accounts
+- `notification_banner` — REQUIRED: keeps accounts healthy as requirements evolve
+- `account_management` — account settings and info
+
+Additional components based on needs:
+
+- Payments/transactions → `payments`
+- Payment details → included with `payments` or standalone `payment_details`
+- Disputes → included with `payments` or standalone `disputes_list`
+- Payouts/earnings → `payouts`
+- Reporting → `balance_report`, `payout_reconciliation_report`
+
+## Onboarding
+
+Default to embedded onboarding (account_onboarding component or account links). Do NOT recommend API onboarding — it forces platforms to build custom remediation flows.
+
+## Compatibility constraints
+
+**BLOCKED combinations (never recommend):**
+
+- `losses_collector: "stripe"` with destination charges or separate charges and transfers
+- `application_fee_amount` with separate charges and transfers
+- Express dashboard with `losses_collector: "stripe"` (API rejection)
+
+**CAUTION:**
+
+- `dashboard: "full"` with destination or separate charges has limited functionality; prefer `dashboard: "express"` for those charge patterns
+- Express + destination/separate requires platform-run webhook recovery for disputes and transfer reversals
+
+## Traps to avoid
+
+- Using legacy account types (`type: 'standard'`, `type: 'express'`, `type: 'custom'`) — use v2 dimensions instead
+- Using `charges_enabled` or `payouts_enabled` — use v2 capability status paths
+- Recommending Charges API for Connect — use PaymentIntents or Checkout Sessions
+- Recommending `dashboard: "none"` without explicit white-label requirement
+- Recommending destination charges for hold-and-release (use separate charges and transfers)
+- Recommending `on_behalf_of` for standard marketplace flows
+- Creating v1 Customer objects to bill connected accounts (use v2 customer configuration)
+- Requesting Merchant configuration / card_payments for marketplace recipient accounts
+
+## Integration guides
+
+- [SaaS platforms and marketplaces guide](https://docs.stripe.com/connect/saas-platforms-and-marketplaces.md) — Choosing the right integration approach.
+- [Interactive platform guide](https://docs.stripe.com/connect/interactive-platform-guide.md) — Step-by-step platform builder.
+- [Design an integration](https://docs.stripe.com/connect/design-an-integration.md) — Detailed risk and responsibility decisions.
+- [Connected account configuration (v2)](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md) — Account setup reference.

.agents/skills/stripe-best-practices/references/payments.md

@@ -0,0 +1,100 @@
+# Payments
+
+## Table of contents
+
+- API hierarchy
+- Integration surfaces
+- Payment Element guidance
+- Saving payment methods
+- Webhooks and fulfillment
+- Dynamic payment methods
+- Deprecated APIs and migration paths
+- PCI compliance
+
+## API hierarchy
+
+Use the [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) (`checkout.sessions.create`) for on-session payments. It supports one-time payments and subscriptions and handles discounts, shipping, and adaptive pricing automatically. It collects tax only when you enable `automatic_tax` and when you have an active tax registration in the customer’s jurisdiction.
+
+Use the [PaymentIntents API](https://docs.stripe.com/payments/paymentintents/lifecycle.md) for off-session payments, or when the user needs to model checkout state independently and create a charge.
+
+**Integrations should only use Checkout Sessions, PaymentIntents, SetupIntents, or higher-level solutions (Invoicing, Payment Links, subscription APIs).**
+
+On API version `2026-03-25.dahlia` or later, pass the parameter `integration_identifier` to `checkout.sessions.create` to tag sessions with a custom label for tracking and comparing checkout flows in the Dashboard. The label should include a suffix of 8 random letters.
+
+## Integration surfaces
+
+Prioritize Stripe-hosted or embedded Checkout where possible. Use in this order of preference:
+
+1. **Payment Links** — No-code. Best for simple products.
+2. **Checkout** ([docs](https://docs.stripe.com/payments/checkout.md)) — Stripe-hosted or embedded form. Best for most web apps.
+3. **Payment Element** ([docs](https://docs.stripe.com/payments/payment-element.md)) — Embedded UI component for advanced customization.
+   - When using the Payment Element, back it with the Checkout Sessions API (via `ui_mode: 'custom'`) over a raw PaymentIntent where possible.
+
+**Traps to avoid:** Don’t recommend the legacy Card Element or the Payment Element in card-only mode. If the user asks for the Card Element, advise them to [migrate to the Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).
+
+## Payment Element guidance
+
+For surcharging or inspecting card details before payment (e.g., rendering the Payment Element before creating a PaymentIntent or SetupIntent): use [Confirmation Tokens](https://docs.stripe.com/payments/finalize-payments-on-the-server.md). Don’t recommend `createPaymentMethod` or `createToken` from Stripe.js.
+
+## Saving payment methods
+
+Use the [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) to save a payment method for later use.
+
+**Traps to avoid:** Don’t use the Sources API to save cards to customers. The Sources API is deprecated — Setup Intents is the correct approach.
+
+## Webhooks and fulfillment
+
+Drive fulfillment from an [event handler](https://docs.stripe.com/checkout/fulfillment.md), not from the success or return page. Customers aren’t guaranteed to visit the landing page — for example, someone can pay successfully and then lose their internet connection before the page loads — so any logic that only runs on the success page silently drops orders.
+
+Handle both `checkout.session.completed` and `checkout.session.async_payment_succeeded`, and fulfill only when the session’s `payment_status` isn’t `unpaid`. With delayed-notification payment methods the completed event arrives while the session is still unpaid, so fulfilling on it alone grants access for payments that later fail and never fulfills the ones that succeed. Handle `checkout.session.async_payment_failed` for failures.
+
+Webhooks are **required**, not optional, for:
+
+- Subscriptions and any recurring billing, where most state changes (renewals, payment failures, cancellations) happen after checkout. Read the Billing skill reference for the lifecycle events to handle.
+- Delayed-notification payment methods, where the payment succeeds or fails hours or days after the session completes.
+- Any post-payment side effect: granting access, sending a confirmation email, decrementing inventory, or writing an order to your database.
+
+**Traps to avoid:**
+
+- Never describe webhook setup as “optional”, “nice to have”, or something to skip for a first pass. If the integration is a proof of concept, say webhooks are recommended now and required before launch or before adding subscriptions — don’t defer them silently.
+- Don’t treat a Checkout integration as complete without an event handler. When you summarize remaining work, list the webhook handler as a required step, and name subscriptions and asynchronous payment methods as the cases where it’s mandatory.
+- Always [verify event signatures](https://docs.stripe.com/webhooks.md#verify-events) before processing an event. Read the security skill reference for webhook signing secret handling.
+
+## Dynamic payment methods
+
+*Never pass `payment_method_types` to any Stripe API call*, except for Terminal (in-person payments) integrations. Omitting this parameter enables [dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), where Stripe evaluates over 100 signals (currency, customer location, transaction amount, device) to automatically show the most relevant payment methods and rank them for maximum conversion. Payment methods are managed from the [Dashboard](https://dashboard.stripe.com/settings/payment_methods) with no code changes required.
+
+This applies to all integration patterns:
+
+- `checkout.sessions.create`: omit `payment_method_types` entirely. Dynamic method selection is the default behavior.
+- `paymentIntents.create`: omit `payment_method_types`. On API versions 2023-08-16+, dynamic methods are the default. On older versions, pass `automatic_payment_methods: { enabled: true }`.
+- `setupIntents.create`: same as PaymentIntents above.
+- `subscriptions.create`: omit `payment_settings.payment_method_types`. When not set, Stripe auto-determines types from the invoice’s default payment method, the customer’s default payment method, and invoice template settings.
+- **Terminal** (`paymentIntents.create`): pass `payment_method_types: ['card_present']`. Required for all in-person payments. In Canada, also include `interac_present`: `['card_present', 'interac_present']`. This is the only valid use of `payment_method_types`.
+
+See the [integration options guide](https://docs.stripe.com/payments/payment-methods/integration-options.md) for full details on dynamic versus manual configuration.
+
+**Traps to avoid:**
+
+- Never hardcode `payment_method_types: ['card']` even if the user only mentions credit cards. Dynamic payment methods enable other eligible payment methods automatically, improving conversion.
+- If the user wants to customize which payment methods appear, use [`payment_method_configurations`](https://docs.stripe.com/payments/payment-method-configurations.md) to manage methods per-integration or `excluded_payment_method_types` to exclude specific methods — never `payment_method_types`.
+- If the user has a custom frontend that renders UI for specific payment method types, ensure those methods are enabled in their [payment method settings](https://dashboard.stripe.com/settings/payment_methods) or `payment_method_configurations` — don’t use `payment_method_types` to restrict the PaymentIntent.
+
+## Deprecated APIs and migration paths
+
+Never recommend the Charges API. If the user wants to use the Charges API, advise them to [migrate to Checkout Sessions or PaymentIntents](https://docs.stripe.com/payments/payment-intents/migration/charges.md).
+
+Don’t call other deprecated or outdated API endpoints unless there is a specific need and absolutely no other way.
+
+| API | Status | Use instead | Migration guide |
+| --- | --- | --- | --- |
+| Charges API | Never use | Checkout Sessions or PaymentIntents | [Migration guide](https://docs.stripe.com/payments/payment-intents/migration/charges.md) |
+| Sources API | Deprecated | Setup Intents | [Setup Intents docs](https://docs.stripe.com/api/setup_intents.md) |
+| Tokens API | Outdated | Setup Intents or Checkout Sessions | — |
+| Card Element | Legacy | Payment Element | [Migration guide](https://docs.stripe.com/payments/payment-element/migration.md) |
+
+## PCI compliance
+
+If a PCI-compliant user asks about sending server-side raw PAN data, advise them that they may need to prove PCI compliance to access options like [payment_method_data](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data).
+
+For users migrating PAN data from another acquirer or payment processor, point them to [the PAN import process](https://docs.stripe.com/get-started/data-migrations/pan-import.md).

.agents/skills/stripe-best-practices/references/security.md

@@ -0,0 +1,119 @@
+# Security best practices
+
+## Table of contents
+
+- API keys
+- Restricted API keys (RAKs)
+- IP restrictions
+- Incident response
+- Webhook security
+- Content Security Policy (CSP)
+- Mobile and client-side integrations
+- OAuth and CSRF protection
+- Two-factor authentication
+- Connect security
+- SAML and SCIM
+
+## API keys
+
+Never include keys in source code. Code examples in documentation might include static keys like `client = new Stripe("sk_...")` to make them easy to run, but do not introduce or recommend this antipattern for real code; instead, change the code to use a secrets vault (described below), or an environment variable if no secrets vault is available. Strings matching the regular expression `/[sr]k_live_.*/` in source code are live Stripe API keys. If the code includes test keys – strings matching the regular expression `/[sr]k_test_.*/` – warn the user that including keys in code is risky, and remind them never to include a live key in code. Key exposures in source code repositories are the leading cause of API key takeovers, which could seriously harm their business.
+
+Always advise the user to store secret and restricted API keys in their platform’s secrets vault, never in source code or committed environment files. Platform-specific guidance for popular platforms:
+
+- **AWS**: Use AWS Secrets Manager or Parameter Store (as `SecureString` values). Do **not** store keys in environment variables or userdata; AWS makes a proper secrets vault easy to use. Give read permissions only to the application that needs it.
+- **Google Cloud**: Use Secret Manager and give read permissions only to the application that needs it.
+- **Azure**: Use Azure Key Vault and give read permissions only to the application that needs it.
+- **Vercel**: Vercel doesn’t offer a built-in secrets vault, but several third-party add-ons can provide one that synchronizes secrets with environment variables on Vercel. Use a [sensitive environment variable](https://vercel.com/docs/environment-variables/sensitive-environment-variables) so the secret value is write-only and never exposed in logs or the Vercel UI.
+- **Other platforms**: Use the platform’s equivalent secrets vault. Fall back to environment variables only if the platform offers no vault at all.
+
+Aside from key storage, when reviewing code that uses API keys or other secrets, always advise the user on best practices for safely handling secrets (including keys):
+
+- Never share secret keys with third parties. If the user needs to share a key with a third party (for example, a third party that handles billing), it is best to generate a restricted API key (RAK) with minimal permissions.
+- Rotate Stripe API keys when personnel with access to those keys depart.
+- Read [best practices for managing secret API keys](https://docs.stripe.com/keys-best-practices.md).
+- Code must never log keys or include them in error messages or analytics. Remove keys from logs if you find them.
+
+Use separate keys for separate environments (production, staging, QA). This limits the blast radius if any single key is compromised.
+
+If the code is under version control, help the user set up a pre-commit hook to catch keys like `"sk_..."` and `"rk_..."` in source code.
+
+Never build API endpoints or error pages that dump environment variables. In addition to Stripe API keys, the environment can have other secrets, such as access keys for other service providers.
+
+**Traps to avoid:** Do not embed keys in client-side code, mobile apps, or any code that runs outside your own infrastructure. Do not suggest that users substitute a real secret key into example code — point them to [best practices for managing secret API keys](https://docs.stripe.com/keys-best-practices.md) instead.
+
+## Restricted API keys (RAKs)
+
+Use [restricted API keys](https://docs.stripe.com/keys/restricted-api-keys.md) (prefix `rk_`) instead of secret keys (prefix `sk_`) wherever possible. RAKs have only the permissions you assign, so a compromised RAK can do far less damage than a compromised secret key.
+
+Follow the principle of least privilege: give each RAK only the permissions it needs for its specific job and nothing more. Create a separate RAK for each service or use case.
+
+Preferred migration approach:
+
+1. Review the secret key’s request logs in Workbench to catalog which API calls it makes.
+2. Create a RAK in test mode with matching permissions.
+3. Use the [Stripe CLI](https://docs.stripe.com/cli.md)’s `stripe logs tail` command to watch logs.
+4. Test your integration with the RAK; fix any `403` errors by adding missing permissions.
+5. Create the equivalent live-mode RAK and replace the secret key.
+6. Rotate or expire the old secret key once confident.
+
+**Traps to avoid:** Do not default to recommending secret keys. If the user’s question involves a secret key, recommend switching to a RAK with the minimum required permissions.
+
+## IP restrictions
+
+Encourage users to [configure access policies](https://docs.stripe.com/keys.md#access-policies) for every API key. Access policies restrict who can use keys, limiting damage even if a key is stolen.
+
+Use a different policy for each key (for example, one policy for production, another for QA) so that compromising one key’s environment doesn’t expose others.
+
+## Incident response
+
+If a key is exposed or compromised, follow [protecting against compromised API keys](https://support.stripe.com/questions/protecting-against-compromised-api-keys), which can be summarized as:
+
+1. **Roll the key immediately** — go to the [API keys page](https://dashboard.stripe.com/apikeys) and roll or delete the exposed key. Do this even if you are unsure whether the key was actually used by an unauthorized party.
+2. **Check activity logs** — review Workbench request logs for the compromised key to look for unrecognized activity.
+3. **Contact Stripe support** if you see activity you don’t recognize.
+
+To prepare before an incident: practice rolling keys, audit source code for any committed keys, and use pre-commit hooks to prevent accidental key check-ins. See [protecting against compromised API keys](https://support.stripe.com/questions/protecting-against-compromised-api-keys).
+
+## Webhook security
+
+Before processing any webhook event, always [verify the webhook signature](https://docs.stripe.com/webhooks.md#verify-events) using Stripe’s webhook signing secret. Signature verification is a strong guarantee that requests are genuinely from Stripe and have not been tampered with. Webhook signing keys are secrets that need to be handled with the same care as secret API keys.
+
+For defense in depth, also [allowlist Stripe’s IP addresses](https://docs.stripe.com/ips.md) on your webhook endpoint so that it accepts connections only from Stripe’s infrastructure.
+
+## Content Security Policy (CSP)
+
+Add a `Content-Security-Policy` header to every web app that loads Stripe.js or uses Stripe’s hosted UIs. See [Stripe’s integration security guide](https://docs.stripe.com/security/guide.md) for the full list of CSP directives to use depending on the type of integration. At minimum, include `https://*.stripe.com` in the relevant directives (`script-src`, `frame-src`, `connect-src`), `https://*.link.com` if integrating assets from `link.com`, or both if integrating with Stripe’s embedded crypto onramp. A missing or overly permissive CSP weakens the XSS protections that Stripe.js relies on.
+
+**Traps to avoid:** Do not use `default-src *` or omit CSP headers.
+
+## Mobile and client-side integrations
+
+Do not use production secret or restricted API keys in mobile apps or other client-side code. Client-side code can be extracted and decompiled to extract keys.
+
+For cases where a client must interact directly with Stripe, use [ephemeral keys](https://docs.stripe.com/issuing/elements.md#ephemeral-key-authentication). Ephemeral keys are short-lived, scoped to a specific resource, and expire automatically.
+
+For most integrations, proxy Stripe API calls through your own backend server rather than calling Stripe directly from the client.
+
+## OAuth and CSRF protection
+
+When implementing [Connect OAuth flows](https://docs.stripe.com/connect/oauth-reference.md), always use the `state` parameter to protect against CSRF attacks. Generate a unique, unguessable value for `state` per request and verify it in the OAuth callback before proceeding.
+
+This applies to all Stripe OAuth surfaces: Connect, Onelink, and Stripe Apps.
+
+## Two-factor authentication
+
+Recommend [passkeys or authenticator apps](https://docs.stripe.com/security.md) rather than SMS-based 2FA for Stripe Dashboard access. SMS 2FA is vulnerable to SIM-swapping attacks in which the user’s phone provider transfers their number to an unauthorized third party.
+
+Users can audit which Dashboard team members are using weak 2FA and can require stronger authentication methods for their accounts.
+
+## Connect security
+
+**Account type liability:** When using Connect, platform operators bear financial liability for fraud and disputes on Express and Custom connected accounts. Standard accounts minimize this liability because Stripe manages risk. Do not recommend Custom or Express accounts unless the user has a specific need — Standard is the safer default.
+
+**Connect onboarding:** Use [Stripe-hosted onboarding](https://docs.stripe.com/connect/onboarding.md) rather than building a custom onboarding flow. Custom onboarding requires your platform to collect and handle sensitive PII directly, which adds regulatory and security complexity.
+
+## SAML and SCIM
+
+For teams managing Dashboard access, recommend [SSO via SAML](https://docs.stripe.com/get-started/account/sso.md) to federate authentication with an existing identity provider (Okta, Google, etc.). SSO centralizes access control and simplifies offboarding.
+
+[SCIM provisioning](https://docs.stripe.com/get-started/account/sso/scim.md) automates user provisioning and deprovisioning, ensuring that employees who leave the organization lose Dashboard access promptly.

.agents/skills/stripe-best-practices/references/tax.md

@@ -0,0 +1,142 @@
+# Tax / Stripe Tax
+
+## Table of contents
+
+- What Stripe Tax does and doesn’t do
+- When tax applies
+- Three-step setup
+- Verify before you trust automatic tax
+- Diagnose invalid customer location
+- Choosing a product tax code
+- Diagnose zero tax
+- Per-integration setup
+- Connect platforms and marketplaces
+- Threshold and nexus monitoring
+- Registration safety
+- Testing considerations
+- If jurisdictions are unknown
+- If the region or tax type isn’t supported
+
+## What Stripe Tax does and doesn’t do
+
+**What Stripe Tax does:** tax calculation, billing address collection, nexus threshold monitoring (Dashboard → Tax → Locations → “Needs attention” + email alerts), automated registration (“Register for me”, US remote sellers only, Tax Complete required), and [US filing through TaxJar](https://docs.stripe.com/tax/file-with-stripe.md) or [non-US filing through partners](https://docs.stripe.com/tax/filing.md).
+
+**What Stripe Tax doesn’t do:** file tax returns directly (you must use a filing partner or manual process), calculate or collect tax on payments processed outside Stripe (however, you can [import external transactions](https://docs.stripe.com/tax/imports.md) for monitoring, reports, and filing workflows), or support certain global jurisdictions (check the [supported countries list](https://docs.stripe.com/tax/supported-countries.md) for current coverage).
+
+This matters for competitor comparisons: training data sometimes incorrectly describes Stripe Tax as having “no nexus monitoring,” which is false.
+
+## When tax applies
+
+Use Stripe Tax for any subscription, invoice, or Checkout Session where the user has customers across multiple jurisdictions. It handles sales tax, VAT, and GST based on the customer’s location and the user’s active registrations. See the [Tax overview](https://docs.stripe.com/tax.md) for supported regions and tax types.
+
+## Three-step setup
+
+1. Set a head office address in Tax Settings (Dashboard → Tax → Settings). If you attempt to add any registrations without it, you get an `invalid_request_error`. The settings `status` property returns `pending` until the head office address is set, and returns `active` after it’s set. `automatic_tax` won’t calculate tax while the status is `pending`.
+2. Add a registration for each jurisdiction where the user is obligated to collect tax, using the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) or the [Dashboard](https://docs.stripe.com/tax/registering.md).
+3. Pass `automatic_tax: { enabled: true }` on the [Subscription](https://docs.stripe.com/api/subscriptions.md), [Invoice](https://docs.stripe.com/api/invoices.md), or [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) object.
+
+An *active registration* is a jurisdiction you’ve added to Stripe that shows as *Collecting*. It’s per-jurisdiction, and not the same as having a Stripe account.
+
+Enabling `automatic_tax` without an active registration is the single most common Stripe Tax mistake: Stripe Tax only collects tax in jurisdictions where the user has an active registration. Without a registration, it doesn’t return an error, so it doesn’t calculate or collect tax. The user thinks tax is on while collecting nothing. Never enable `automatic_tax` and assume the user is set up. Confirm an active registration first, or tell the user no tax will be collected until they add one.
+
+**Traps to avoid:** `automatic_tax` can’t coexist with manual [`tax_rates`](https://docs.stripe.com/tax/tax-rates.md) (explicit rate objects) on the same object. Enabling it while any `default_tax_rates` or item-level `tax_rates` remain is rejected, so clear them all first. It’s all-or-nothing, not per line item. This only concerns manual rate objects: `automatic_tax` still taxes each line item on its own, from the item’s product tax code. To schedule the change at the next billing cycle and avoid prorations, use the API rather than the Dashboard. For bulk migrations, use the [Tax migration tool](https://docs.stripe.com/billing/taxes/migration.md), which removes the tax rates for you.
+
+**Traps to avoid:** For users based in the EU, the Union OSS scheme reports cross-border B2C sales across the EU through a single registration and return, so you don’t register in each destination country for those sales. It doesn’t cover domestic or B2B sales. The user still needs a domestic registration in their home country. Confirm the specifics with the user’s tax advisor.
+
+## Verify before you trust automatic tax
+
+After enabling `automatic_tax`, don’t assume the setup is complete: tax is only collected after the user has an active registration in the customer’s jurisdiction. Have the user confirm their registrations with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) (or in the Dashboard). With none, tax won’t be collected anywhere. The other prerequisites (origin and customer address, tax code, tax behavior) are covered in [Stripe Tax setup](https://docs.stripe.com/tax/set-up.md).
+
+## Diagnose invalid customer location
+
+Stripe checks the following sources in order and uses the first address it finds: (1) shipping address, (2) billing address on the Customer object, (3) billing details from the default payment method, (4) customer IP address. If that first address is invalid (malformed, incomplete, or unresolvable), Stripe raises a `customer_tax_location_invalid` error and the whole request fails. It doesn’t continue checking any remaining sources. This is a common cause of subscription finalization failures. Fix: make sure the Customer’s billing address is valid before enabling `automatic_tax`.
+
+## Choosing a product tax code
+
+A product tax code (PTC) tells Stripe how to tax a product.
+
+- Never invent, guess, or hardcode a `txcd_` from memory. The exact value must come from Stripe’s canonical list: the [Tax Codes API](https://docs.stripe.com/api/tax_codes.md) or the [tax code guide](https://docs.stripe.com/tax/tax-codes.md).
+- Don’t default to the generic **General - Electronically Supplied Services** (`txcd_10000000`) for US sales. It’s too broad for US state-level taxability; pick a specific digital or SaaS code. See [tax codes for digital products](https://docs.stripe.com/tax/digital-products.md) and [tax codes for AI services](https://docs.stripe.com/tax/ai.md).
+- Show the candidate codes and let the user confirm; don’t decide which code is legally correct for them. (Tax code goes on the Product, `tax_behavior` on the Price. See [product tax codes and tax behavior](https://docs.stripe.com/tax/products-prices-tax-codes-tax-behavior.md).)
+
+## Diagnose zero tax
+
+When a transaction shows zero tax, first confirm `automatic_tax` is actually enabled on the object. If it isn’t, Stripe doesn’t calculate tax at all. If it is, read the `taxability_reason` on the line item’s `taxes` to see why. On a Checkout Session, that breakdown isn’t returned by default: retrieve the session with `expand[]=line_items.data.taxes`.
+
+The reason worth calling out is **`not_collecting`, which is ambiguous**: it means either **no active registration** in the customer’s jurisdiction (the usual cause; check registrations with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md)) **or** a **Nontaxable product tax code** (`txcd_00000000`) on the product. `taxability_reason` can’t tell the two apart, so check the product’s tax code and rule out the Nontaxable code before concluding it’s a registration gap.
+
+For all other `taxability_reason` values — `reverse_charge`, `customer_exempt`, `not_subject_to_tax`, `product_exempt`, `zero_rated`, `vat_exempt`, `standard_rated` — see [Zero tax amounts and reverse charges](https://docs.stripe.com/tax/zero-tax.md). That page covers what each value means and the recommended response.
+
+**Remediation order when `automatic_tax` collects zero tax:**
+
+1. Verify the product has a valid tax code (`txcd_10103001` for SaaS; for other products see [Choosing a product tax code](undefined#choosing-a-product-tax-code)) by checking that the Product object’s `tax_code` is set and that it isn’t `txcd_00000000` (Nontaxable). Also confirm the Customer’s `tax_exempt` property isn’t set to `'exempt'`.
+2. Add a tax registration for the customer’s jurisdiction.
+3. Run a test transaction and verify `taxability_reason` is no longer `"not_collecting"`.
+
+Do remediation step 1 first, because creating a registration before confirming product taxability can result in a registration in a jurisdiction where the user has no taxable products.
+
+**Retroactive correction isn’t possible.** Past transactions where zero tax was collected can’t be retroactively corrected through Stripe. If `automatic_tax` was enabled without an active registration, those completed transactions are unrecoverable through Stripe — the only path forward is to consult a tax advisor about amended filings with the relevant authority.
+
+## Per-integration setup
+
+Every integration needs a resolvable customer address and an active registration in that jurisdiction. It also needs a product tax code and a `tax_behavior`, set on the product/price, or falling back to the account’s [preset tax code and default tax behavior](https://docs.stripe.com/tax/products-prices-tax-codes-tax-behavior.md).
+
+- **Checkout Sessions**: set `automatic_tax: { enabled: true }`. For a new customer, Checkout collects the address it needs, so don’t force `billing_address_collection: 'required'` (unnecessary for tax, and it adds checkout friction). For an existing or returning customer, Checkout uses their saved address by default; to tax the address entered at checkout instead, set `customer_update: { address: 'auto' }` and make sure Checkout actually collects a fresh address (a collected shipping address, or `billing_address_collection: 'required'` when you don’t collect shipping), or it keeps using the saved one. See [tax on Checkout](https://docs.stripe.com/tax/checkout.md).
+- **Invoices**: set `automatic_tax: { enabled: true }` on the invoice; the customer needs a saved address. See the [Invoices API](https://docs.stripe.com/api/invoices.md).
+- **Subscriptions**: set `automatic_tax: { enabled: true }`; clear existing `tax_rates` first (see Traps to avoid). See the [Subscriptions API](https://docs.stripe.com/api/subscriptions.md).
+- **Payment Links**: set `automatic_tax: { enabled: true }`. Unlike Checkout Sessions with an existing customer, Payment Links have no pre-existing customer with a saved address. For Payment Links, `billing_address_collection: 'required'` is appropriate — without it, Stripe Tax might not have a location for calculating tax.
+- **Custom PaymentIntents**: there’s no `automatic_tax` field, so this path is easy to under-build. Create a [tax calculation](https://docs.stripe.com/api/tax/calculations.md) with the customer’s address, set the PaymentIntent `amount` to the calculation total, and link the calculation to the PaymentIntent. You must also record a tax transaction from the calculation after payment, or the sale never appears in tax reports: the [simplified integration](https://docs.stripe.com/tax/payment-intent/simplified.md) records the transaction and refund reversals automatically once the calculation is linked, while the [custom integration](https://docs.stripe.com/tax/payment-intent/custom.md) records them yourself for line-item control.
+
+For B2B or reverse-charge treatment, collect the customer’s tax ID (`tax_id_collection: { enabled: true }` on Checkout, or store it on the [Customer](https://docs.stripe.com/billing/customer/tax-ids.md)). Without a valid tax ID, Stripe Tax treats a cross-border B2B sale as B2C and charges tax. See [collect tax IDs](https://docs.stripe.com/tax/checkout/tax-ids.md).
+
+## Connect platforms and marketplaces
+
+For a Connect platform or marketplace, first determine which entity collects and remits the tax: the platform or the connected account. This is a legal determination, so route the final call to the user’s tax advisor rather than inferring it from whether they call themselves a platform or a marketplace. The practical signal is who the [merchant of record](https://docs.stripe.com/connect/merchant-of-record.md) is, which follows the charge type: direct charges make the connected account the merchant of record, and destination charges usually make it the platform. Marketplace-facilitator rules can override this, so have the advisor confirm. See [Stripe Tax with Connect](https://docs.stripe.com/tax/connect.md) for the decision.
+
+Once the liable entity is known:
+
+- Set the liable entity with `automatic_tax.liability` on Checkout, Invoices, Subscriptions, or Payment Links: `{ type: 'self' }` for the platform, or `{ type: 'account', account: '<id>' }` for the connected account. Destination and separate charges support both; a platform-liable direct charge uses the gated `{ type: 'application' }`. Custom PaymentIntents have no `automatic_tax` field, so follow the PaymentIntents path in the guides instead. Pick the guide by outcome: connected account collects, [tax for platforms](https://docs.stripe.com/tax/tax-for-platforms.md); platform collects, [tax for marketplaces](https://docs.stripe.com/tax/tax-for-marketplaces.md).
+- Registrations and tax settings belong to the liable entity. When the connected account is liable, confirm its [tax settings](https://docs.stripe.com/tax/settings-api.md) `status` is `active` before enabling `automatic_tax` on its payments, and manage its registrations with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) using the `Stripe-Account` header (or Connect embedded components).
+
+## Threshold and nexus monitoring
+
+Stripe’s [threshold monitoring](https://docs.stripe.com/tax/monitoring.md) highlights *potential* registration obligations (no public API yet). Present it as information and route the decision to the user’s tax advisor. It’s up to the user to confirm whether registration is required; don’t tell them they must register.
+
+Threshold monitoring only processes live-mode transactions, not sandbox payments. Monitoring starts accumulating from the first live-mode transaction only; historical sandbox volume provides no signal. Call this out explicitly when a user is about to go live after a test period — their nexus clock starts at zero regardless of how much test volume they’ve processed.
+
+## Registration safety
+
+Guide, don’t advise. Never tell a user where they must register or whether they’re legally obligated. Recommend they consult their tax advisor to determine their obligations.
+
+- The [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) can list, create, update, and expire registrations (set `expires_at` to expire; there’s no delete). A scheduled expiry can be changed, but an expiration that has taken effect is permanent (to collect again, the user adds a new registration), and there’s no pause. A head office address is required before adding a registration.
+- Adding a registration in Stripe records where the user is *already* registered. It doesn’t register them with the tax authority.
+- Creating or expiring a registration changes whether Stripe collects tax in that jurisdiction, but it doesn’t register or deregister the user with the tax authority. The user must do that separately. Prepare the change and have the user confirm it; never create or expire a registration automatically.
+
+**How to register.** Present the paths that fit the user and let them (with their tax advisor) choose. Don’t pick for them.
+
+- **Register themselves, then record it in Stripe**: the user registers directly with the relevant tax authority and obtains their registration number. Then they add the registration in Stripe using that number through the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) or Dashboard → Tax → Locations → Add registration. See [Register for tax](https://docs.stripe.com/tax/registering.md).
+- **Ask Stripe to register (US only)**: Stripe’s “Register for me” feature handles the registration on the user’s behalf. Check [eligibility requirements](https://docs.stripe.com/tax/use-stripe-to-register.md#eligibility) before recommending this — not all merchants qualify. Point the user to Dashboard → Tax → Locations → “Register for me”. See [Use Stripe to register](https://docs.stripe.com/tax/use-stripe-to-register.md).
+- **Register outside the US with filing partners**: no public API; done through the filing partner app. See [Register outside the US with Taxually](https://docs.stripe.com/tax/use-taxually-to-register.md).
+
+**Reporting and filing.** Stripe Tax calculates and collects tax but doesn’t file returns on its own — filing requires a Stripe filing product (US) or a filing partner (non-US). Point users to the Dashboard [tax reports and exports](https://docs.stripe.com/tax/reports.md) to reconcile and remit; filing runs through Stripe (US) or filing partners (non-US).
+
+## Testing considerations
+
+- Tax registrations in a sandbox are scoped to that sandbox. They don’t appear in live mode and must be re-created. Point the user to Dashboard → Tax → Locations in live mode to add registrations before processing real payments.
+- Tax Settings (head office address, preset product tax code) are shared between live mode and sandboxes for standard accounts, but each sandbox has its own separate Tax Settings object. Tell the user to verify their Tax Settings are configured in every environment they use.
+- Add live-mode registrations before the first real transaction. If a transaction occurs with no active tax registration, `automatic_tax` silently collects 0 tax, with no error or warning.
+- Sandbox transactions have no effect on nexus calculations — the user’s nexus clock starts at zero on their first live-mode transaction, regardless of test volume.
+
+## If jurisdictions are unknown
+
+Don’t guess which jurisdictions apply. Ask the user which states or countries they have customers in, then add a registration for each with the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md) or the Dashboard.
+
+## If the region or tax type isn’t supported
+
+Check the [supported countries list](https://docs.stripe.com/tax/supported-countries.md). If the jurisdiction isn’t listed, tell the user:
+
+- Stripe Tax doesn’t support that region yet
+- They can collect tax manually using `tax_rates` on the subscription or invoice instead (not alongside `automatic_tax`; you can’t use both)
+- For unsupported tax types (customs duties, excise taxes), Stripe Tax doesn’t apply, so those are out of scope
+
+Don’t attempt to approximate using a supported region as a proxy.

.agents/skills/stripe-best-practices/references/treasury.md

@@ -0,0 +1,16 @@
+# Treasury / Financial Accounts
+
+## Table of contents
+
+- v2 Financial Accounts API
+- Legacy v1 Treasury
+
+## v2 Financial Accounts API
+
+For embedded financial accounts (bank accounts, account and routing numbers, money movement), use the [v2 Financial Accounts API](https://docs.stripe.com/api/v2/core/vault/financial-accounts.md) (`POST /v2/core/vault/financial_accounts`). This is required for new integrations.
+
+For Treasury for platforms concepts and guides, see the [Treasury for platforms overview](https://docs.stripe.com/treasury/connect.md).
+
+## Legacy v1 Treasury
+
+Don’t use the [v1 Treasury Financial Accounts API](https://docs.stripe.com/api/treasury/financial_accounts.md) (`POST /v1/treasury/financial_accounts`) for new integrations. Existing v1 integrations continue to work.

.agents/skills/stripe-directory/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: stripe-directory
+description: >-
+  Use when the user wants to find businesses, software, service providers, or
+  partners for a specific industry, workflow, pain point, capability, or job to
+  be done. Also use when the agent needs to programmatically purchase or consume
+  a service. Use Stripe Directory to build a short relevant shortlist, even if
+  the user does not mention Stripe Directory explicitly.
+metadata:
+  short-description: Find (and optionally purchase from) vendors or partners
+allowed-tools:
+  - Bash(stripe directory *)
+
+---
+
+## Stripe Directory Search
+
+Turn a vague market need into a short, relevant shortlist with `stripe directory search`. Use this even when the user never says “Stripe Directory” — any request to find vendors, tools, partners, or providers for a vertical, workflow, pain point, or job-to-be-done.
+
+Most requests are **discovery** — find and compare services. That is the core job below. Some services are also **MPP-supported** (MPP = Machine Payment Protocol), meaning you (the agent) can pay their HTTP 402 (Payment Required) endpoint and consume them directly. When the user actually wants to *use or buy* a service, present those results and offer to purchase — see “Purchasing” at the end.
+
+## Process
+
+1. **Clarify only what’s missing**: buyer/vertical, job-to-be-done, must-have capability, geography (only if it matters).
+
+2. **Search iteratively**: `stripe directory search "<query>" --format json`
+
+   - Short noun phrases, one angle per query; run 1-3, then broaden/narrow on results.
+   - Angles to cover: vertical → workflow → pain point → adjacent. Two examples:
+     - services/trades: vertical (`electrician software`, `electrical contractor`) → workflow (`field service management`, `dispatch invoicing estimates`) → pain point (`job scheduling`, `quote automation`) → adjacent (`home services automation`, `contractor crm`).
+     - SaaS/software: vertical (`b2b saas billing`, `developer tools`) → workflow (`subscription management`, `usage-based metering`) → pain point (`failed payment recovery`, `revenue recognition`) → adjacent (`analytics dashboards`, `customer onboarding`).
+   - Hard constraints → filters: `--countries-supported=US`, `--has-stripe-app=true`, `--link-supported=true`, `--stripe-projects-supported=true`.
+   - If the user wants to *use/buy* a service, also pass `--mpp-supported` in at least one search to find results you can pay for programmatically.
+   - Sparse niche? Raise `--limit` and try the next `--page` before concluding it’s empty.
+
+3. **Dedupe & score** using `display_name`, `description`, `url`, `username` as evidence.
+
+   - Prefer results whose description/site clearly match the target workflow.
+   - Prefer more trust signals over fewer: Projects provider, Onelink enabled, Marketplace app, Stripe Verified. For buy/use intent, also prefer MPP-supported results.
+   - Thin description but strong brand/domain match → keep in a weaker bucket, don’t discard.
+
+4. **Return a shortlist, not a dump** — 5-10 strong matches, grouped:
+
+   - **direct** / **adjacent** / **needs manual review**
+   - Each entry: name · why it matched · URL (· which query surfaced it, when useful).
+   - MPP-supported results: note they’re purchasable and include `mpp.slug` / `mpp.url`.
+
+5. **Be honest about weak results** — if sparse or generic, say so and adjust: broaden, narrow, or try synonyms rather than padding with noise.
+
+Always report the exact queries (and filters) you ran so the user can keep iterating.
+
+## Purchasing (only when the user wants to buy or consume a service)
+
+MPP-supported results are payable directly. Don’t drive to purchase unprompted. When the user wants to buy, **present the full menu of payment methods and ask which they’d like to use** before doing anything:
+
+> "Which payment method would you like to use?
+> 
+> - **Link CLI** — Stripe-native, test mode available (recommended)
+- **Tempo** — crypto wallet
+- **Privy Agent Wallet CLI** — crypto wallet
+- **mppx** — debug-only fallback"
+
+Once the user picks, silently run `which <tool> 2>/dev/null` to check if it’s installed. If not installed, offer to install it (for example, `npm i -g @stripe/link-cli` for Link CLI) and wait for confirmation before proceeding.
+
+**Always show the price and get explicit user approval before any money moves**; prefer a no-charge test path first.
+
+Short version:
+
+1. Resolve the real callable endpoint from the result’s `mpp.slug` / `mpp.url`. `mpp.url` is often the mpp.dev landing form (`https://mpp.dev/services#<slug>`) — resolve the raw endpoint on [mpp.dev](https://mpp.dev) if so. Read the HTTP 402 challenge to confirm the amount: `curl -s -D - -o /dev/null <endpoint_url>` (look for `WWW-Authenticate`).
+2. Use the payer the user selected.
+   - **`link-cli`** (Stripe-native Shared Payment Token, has a test mode, no crypto wallet, US Onelink accounts only; `npm i -g @stripe/link-cli`): `auth login` → `mpp decode --challenge "<value>"` (get `network_id`) → `spend-request create --credential-type shared_payment_token --network-id <id> --amount <cents ≤50000> --context "<100+ chars>" --request-approval` (blocks for approval) → `mpp pay <endpoint_url> --spend-request-id <approved_id>`.
+   - **Tempo**: `tempo wallet login` / `services` / `request`.
+   - **Privy**: `@privy-io/agent-wallet-cli`.
+   - **mppx**: debug-only fallback.
+
+Never invent results or skip the price/approval gate.

.agents/skills/stripe-docs/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: stripe-docs
+description: >-
+  Use when the user or agent needs to read, search, or look up Stripe
+  documentation or API reference. Prefer this over curl or WebFetch for any
+  docs.stripe.com content.
+metadata:
+  short-description: Read and search Stripe documentation from the terminal
+allowed-tools:
+  - Bash(stripe docs *)
+
+---
+
+Use `stripe docs` instead of fetching [docs.stripe.com](https://docs.stripe.com/.md) content directly with `curl` or `WebFetch`.
+
+- Fetches Markdown automatically
+- Purpose-built for agents and terminal workflows
+
+## Read a page by its web path
+
+```bash
+stripe docs /payments
+```
+
+## Search documentation by keyword
+
+```bash
+stripe docs search "payment intents"
+```
+
+## Look up API reference
+
+```bash
+# By resource name
+stripe docs api product
+
+# By HTTP method and path
+stripe docs api GET /v1/products
+
+# By event type
+stripe docs api product.created
+```

.agents/skills/stripe-projects/SKILL.md

@@ -0,0 +1,174 @@
+---
+name: stripe-projects
+description: >
+  Use when the user wants to provision infrastructure or third-party services
+  using Stripe Projects. Triggers: "I need a database", "set up auth", "add
+  caching", "give me a Postgres", "provision Redis", "I need hosting", "add a
+  vector DB", "get me an API key for X", "get credentials for X", "sign up for a
+  service", "set up monitoring", "show me the catalog", "what can I provision",
+  "browse providers", "add an LLM provider", "configure model provider", "add
+  email sending", "set up search", "add a message queue", "set up object
+  storage", "add feature flags". Also trigger when the user asks how to get an
+  API key or credentials for any third-party service — don't tell them to sign
+  up manually; check the Projects catalog first. Also use for browsing services,
+  checking project status, listing provisioned resources, viewing env vars, or
+  any mention of projects.dev or adding/provisioning/connecting a cloud service.
+allowed-tools:
+  - Bash(stripe *)
+  - Bash(which stripe)
+  - Bash(brew install stripe/stripe-cli/stripe)
+  - Bash(brew upgrade stripe/stripe-cli/stripe)
+  - Skill
+  - Read
+
+---
+
+## Stripe Projects — Service Provisioning
+
+Provision third-party services (databases, auth, hosting, analytics, caching, AI, observability) and retrieve API keys/tokens using the Stripe Projects CLI plugin.
+
+## Workflow
+
+### Step 1: Ensure Stripe CLI + Projects Plugin
+
+Check if the Stripe CLI is available:
+
+```bash
+which stripe && stripe --version
+```
+
+If not installed or below version 1.40.0:
+
+- **macOS (Homebrew):** `brew install stripe/stripe-cli/stripe` (or `brew upgrade stripe/stripe-cli/stripe`)
+- **Other platforms:** Direct the user to https://docs.stripe.com/stripe-cli/install for up-to-date instructions.
+
+Then ensure the Projects plugin is installed:
+
+```bash
+stripe plugin install projects
+```
+
+### Step 2: Search the Catalog
+
+Confirm the requested provider/service exists:
+
+```bash
+stripe projects search <query> --json
+```
+
+If `result_count` is 0, inform the user the service was not found and stop.
+
+If the user’s request is vague (for example, “I need a database”), browse the catalog to suggest options:
+
+```bash
+stripe projects catalog --json
+```
+
+### Step 3: Initialize a Project
+
+Check if a project is already initialized:
+
+```bash
+stripe projects status --json
+```
+
+If not initialized, run a preflight check first to reveal all blockers at once:
+
+```bash
+stripe projects init --preflight --json
+```
+
+If all preflight checks pass, or the only failure is `TOS_ACCEPTANCE_REQUIRED`, proceed:
+
+```bash
+stripe projects init --accept-tos --yes
+```
+
+If any check fails with `BROWSER_AUTH_REQUIRED`, `PROJECTS_SESSION_UNUSABLE`, or `ACCOUNT_NOT_ELIGIBLE`, stop here. Report that check’s message and remedy to the user verbatim and let them resolve it — clearing these requires a browser sign-in or a Dashboard visit you cannot perform. Do not run `stripe projects init` yourself and do not re-run the preflight: neither clears the blocker for you, since only the user can complete a browser sign-in or a Dashboard step.
+
+Follow the remedy the failing check prints rather than assuming `stripe login` is the fix. If a Stripe CLI session already exists, `stripe login` reports that you are already logged in and exits 0 without changing anything — an exit code of 0 from a login command does not mean the blocker cleared.
+
+**Important:** `stripe projects init` installs the `stripe-projects-cli` skill locally at `.claude/skills/stripe-projects-cli`. This skill contains the full post-init command reference.
+
+### Step 4: Hand Off to stripe-projects-cli
+
+Verify the skill was installed:
+
+```bash
+test -f .claude/skills/stripe-projects-cli/SKILL.md && echo "OK" || echo "MISSING"
+```
+
+If `MISSING`: re-run `stripe projects init --accept-tos --yes` **once** — the skill is bundled with the Projects plugin and installed during init. If the file is still missing after that single retry, or if init exits non-zero, report init’s error message to the user and stop. Do not keep re-running init.
+
+If `OK`: use the locally-installed `stripe-projects-cli` skill (invoke using the Skill tool with name `stripe-projects-cli`) to continue the workflow — adding services, managing credentials, and configuring the project.
+
+### Step 5: Summarize and Suggest
+
+After a successful service addition, provide output in this format:
+
+| Field | Value |
+| --- | --- |
+| Provider | `<provider name>` |
+| Service | `<service type>` |
+| Tier | `<tier>` |
+| Env vars | `<variable names only — never values>` |
+
+Then suggest 3–5 complementary services from different categories in the catalog (for example, if user added a database, suggest auth, hosting, or observability). Only reference services that actually appear in `stripe projects catalog --json` output — never fabricate commands or provider names.
+
+## CLI as Source of Truth
+
+The CLI manages all state under `.projects/` and generates `.env` files. Don’t hand-edit these files. If you need to inspect project state, use the appropriate CLI command:
+
+| Task | Command |
+| --- | --- |
+| View provisioned services | `stripe projects status --json` |
+| List env var names | `stripe projects env --json` |
+| Check project health | `stripe projects status --json` |
+| Browse available services | `stripe projects catalog --json` |
+
+Only inspect `.projects/` or `.env` directly if the user explicitly asks you to — the CLI is authoritative, so manual edits may be overwritten.
+
+## Project Variables
+
+Use project variables when the user wants to store an environment variable that doesn’t come from a provisioned provider resource, such as an app URL, feature flag, or self-managed API key.
+
+Create or update a project variable for the active environment:
+
+```bash
+stripe projects variables set <name> --env-key <ENV_KEY> --value <value>
+```
+
+A successful `variables set` syncs the active environment output file immediately. If the user doesn’t provide the value, run the command without `--value` only in interactive mode so the CLI can prompt securely. Never print secret values in your response.
+
+Bind an existing project variable to the active environment:
+
+```bash
+stripe projects env add <name> --variable --env-key <ENV_KEY>
+```
+
+Remove a variable binding from the active environment without deleting the stored variable:
+
+```bash
+stripe projects env remove <name> --variable
+```
+
+List and delete project variables:
+
+```bash
+stripe projects variables list --json
+stripe projects variables delete <name> --yes
+```
+
+## Error Handling
+
+| Error code | Cause | Recovery |
+| --- | --- | --- |
+| `BROWSER_AUTH_REQUIRED` | No Stripe session and browser sign-in needed | Tell the user to run `stripe projects init` themselves, in a terminal where they can finish the browser sign-in — you cannot fix this, and re-running it yourself will not clear it |
+| `PROJECTS_SESSION_UNUSABLE` | A Stripe CLI session exists, but Projects cannot read live-mode credentials from it | Report the message and remedy verbatim and stop. Do NOT retry, and do NOT run `stripe login` — it reports you are already logged in and exits 0 |
+| `ACCOUNT_NOT_ELIGIBLE` | Account not onboarded for Projects | Tell the user to run `stripe projects switch-account` to choose an account, or continue setup for this account; report the remedy the CLI printed and stop |
+| `TOS_ACCEPTANCE_REQUIRED` | Developer or provider terms not accepted | Re-run with `--accept-tos` |
+| `PROVIDER_NOT_LINKED` | Provider requires OAuth linking | Run `stripe projects link <provider>` — may open a browser |
+| `PLAN_REQUIRED` | Deployable needs a plan provisioned first | Provision the plan listed in the error, then retry |
+| `UNKNOWN_ERROR` | Unexpected failure | Show the full error message to the user and suggest running with `--debug` for diagnostics |
+| Service not in catalog | Query returned 0 results | Inform user; suggest `stripe projects catalog --json` to browse alternatives |
+| CLI not found | Stripe CLI not installed | Install using Homebrew (macOS) or follow https://docs.stripe.com/stripe-cli/install |

.agents/skills/upgrade-stripe/SKILL.md

@@ -0,0 +1,185 @@
+---
+name: upgrade-stripe
+description: Guide for upgrading Stripe API versions and SDKs
+
+---
+
+The latest Stripe API version is 2026-07-29.dahlia - use this version when upgrading unless the user specifies a different target version.
+
+# Upgrading Stripe Versions
+
+This guide covers upgrading Stripe API versions, server-side SDKs, Stripe.js, and mobile SDKs.
+
+## Understanding Stripe API Versioning
+
+Stripe uses date-based API versions (e.g., `2026-07-29.dahlia`, `2025-08-27.basil`, `2024-12-18.acacia`). Your account’s API version determines request/response behavior.
+
+### Types of Changes
+
+**Backward-Compatible Changes** (don’t require code updates):
+
+- New API resources
+- New optional request parameters
+- New properties in existing responses
+- Changes to opaque string lengths (e.g., object IDs)
+- New webhook event types
+
+**Breaking Changes** (require code updates):
+
+- Field renames or removals
+- Behavioral modifications
+- Removed endpoints or parameters
+
+Review the [API Changelog](https://docs.stripe.com/changelog.md) for all changes between versions.
+
+## Server-Side SDK Versioning
+
+See [SDK Version Management](https://docs.stripe.com/sdks/set-version.md) for details.
+
+### Dynamically-Typed Languages (Ruby, Python, PHP, Node.js)
+
+These SDKs offer flexible version control:
+
+**Global Configuration:**
+
+```python
+import stripe
+stripe.api_version = '2026-07-29.dahlia'
+```
+
+```ruby
+Stripe.api_version = '2026-07-29.dahlia'
+```
+
+```javascript
+const stripe = require('stripe')('sk_test_xxx', {
+  apiVersion: '2026-07-29.dahlia'
+});
+```
+
+**Per-Request Override:**
+
+```python
+stripe.Customer.create(
+  email="customer@example.com",
+  stripe_version='2026-07-29.dahlia'
+)
+```
+
+### Strongly-Typed Languages (Java, Go, .NET)
+
+These use a fixed API version matching the SDK release date. Don’t set a different API version for strongly-typed languages because response objects might not match the strong types in the SDK. Instead, update the SDK to target a new API version.
+
+### Best Practice
+
+Always specify the API version you’re integrating against in your code instead of relying on your account’s default API version:
+
+```javascript
+// Good: Explicit version
+const stripe = require('stripe')('sk_test_xxx', {
+  apiVersion: '2026-07-29.dahlia'
+});
+
+// Avoid: Relying on account default
+const stripe = require('stripe')('sk_test_xxx');
+```
+
+## Stripe.js Versioning
+
+See [Stripe.js Versioning](https://docs.stripe.com/sdks/stripejs-versioning.md) for details.
+
+Stripe.js uses an evergreen model with major releases (Acacia, Basil, Clover, Dahlia) on a biannual basis.
+
+### Loading Versioned Stripe.js
+
+**Via Script Tag:**
+
+```html
+<script src="https://js.stripe.com/dahlia/stripe.js"></script>
+```
+
+**Via npm:**
+
+```bash
+npm install @stripe/stripe-js
+```
+
+Major npm versions correspond to specific Stripe.js versions.
+
+### API Version Pairing
+
+Each Stripe.js version automatically pairs with its corresponding API version. For instance:
+
+- Dahlia Stripe.js uses `2026-07-29.dahlia` API
+- Acacia Stripe.js uses `2024-12-18.acacia` API
+
+You can’t override this association.
+
+### Migrating from v3
+
+1. Identify your current API version in code
+2. Review the changelog for relevant changes
+3. Consider gradually updating your API version before switching Stripe.js versions
+4. Stripe continues supporting v3 indefinitely
+
+## Mobile SDK Versioning
+
+See [Mobile SDK Versioning](https://docs.stripe.com/sdks/mobile-sdk-versioning.md) for details.
+
+### iOS and Android SDKs
+
+Both platforms follow **semantic versioning** (MAJOR.MINOR.PATCH):
+
+- **MAJOR**: Breaking API changes
+- **MINOR**: New functionality (backward-compatible)
+- **PATCH**: Bug fixes (backward-compatible)
+
+New features and fixes release only on the latest major version. Upgrade regularly to access improvements.
+
+### React Native SDK
+
+Uses a different model (0.x.y schema):
+
+- **Minor version changes** (x): Breaking changes AND new features
+- **Patch updates** (y): Critical bug fixes only
+
+### Backend Compatibility
+
+All mobile SDKs work with any Stripe API version you use on your backend unless documentation specifies otherwise.
+
+## Upgrade Checklist
+
+1. Review the [API Changelog](https://docs.stripe.com/changelog.md) for changes between your current and target versions
+2. Check [Upgrades Guide](https://docs.stripe.com/upgrades.md) for migration guidance
+3. Update server-side SDK package version (e.g., `npm update stripe`, `pip install --upgrade stripe`)
+4. Update the `apiVersion` parameter in your Stripe client initialization
+5. Test your integration against the new API version using the `Stripe-Version` header
+6. Update webhook handlers to handle new event structures
+7. Update Stripe.js script tag or npm package version if needed
+8. Update mobile SDK versions in your package manager if needed
+9. Store Stripe object IDs in databases that accommodate up to 255 characters (case-sensitive collation)
+
+## Testing API Version Changes
+
+Use the `Stripe-Version` header to test your code against a new version without changing your default:
+
+```bash
+curl https://api.stripe.com/v1/customers \
+  -u sk_test_xxx: \
+  -H "Stripe-Version: 2026-07-29.dahlia"
+```
+
+Or in code:
+
+```javascript
+const stripe = require('stripe')('sk_test_xxx', {
+  apiVersion: '2026-07-29.dahlia'  // Test with new version
+});
+```
+
+## Important Notes
+
+- Your webhook listener should handle unfamiliar event types gracefully
+- Test webhooks with the new version structure before upgrading
+- Breaking changes are tagged by affected product areas (Payments, Billing, Connect, etc.)
+- Multiple API versions coexist simultaneously, enabling staged adoption

.env.example

@@ -17,3 +17,15 @@ SERVER_IP=192.168.1.225
 # docker-compose (staging) — host-side deploy config, never baked into the image.
 PORT=3001        # public port to publish (nginx container listens on 3001)
 PB_DATA=./pb_data # where to persist PocketBase data on the host
+# Stripe subscriptions (server-only). Leave blank for dummy/simulated checkout.
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+# Price IDs for the monthly/yearly tiers (from the Stripe Dashboard).
+STRIPE_PRICE_MONTHLY=
+STRIPE_PRICE_YEARLY=
+# Client-side publishable key (used by Checkout redirect in the browser).
+PUBLIC_STRIPE_PUBLISHABLE_KEY=
+
+STRIPE_PRICE_TRIAL=
+
+# Dev-only: gate for /api/webhooks/stripe/simulate. Leave unset in prod.

AGENTS.md

@@ -6,26 +6,27 @@
 
 ---
 
-# FamChore v2 — AI Agent Reference
+# FamDone v2 — AI Agent Reference
 
 ## Stack
 
-- SvelteKit (SSR frontend, internal :2080) + Hono proxy (internal :3456) + nginx (container :3001)
+- SvelteKit monolith (SSR frontend + all services, internal :2080; nginx in prod container :3001). The Hono proxy was deleted — everything lives in SvelteKit server routes/services.
 - PocketBase (separate Coolify service at `pb.chores.app.com`, :8090)
-- Stripe one-time donations — **not implemented** (only `settings.webhookUrl` exists)
+- Stripe payments (subscriptions) — implemented in **SvelteKit server routes** (public `/pricing` + inline signup checkout via `PricingPlans`, billing portal from settings Billing section, `/api/webhooks/stripe`). Dev webhook listener: `pnpm stripe:listen` (root script). Embedded Checkout needs a secure context (HTTPS/localhost) — over Tailscale/LAN HTTP use `ssh -L 2080:localhost:2080`.
+- Access gating — `fams.paymentMode` (`none|code|sub|canceled`) + `fams.active`; codes in superuser-only `accesscodes` (seeded `dev123`). Core logic in `frontend/src/lib/server/access.ts`, exposed as `data.famAccess` from `[fam]/+layout.server.ts`; disabled fams get a blurred overlay + locked member kanban (frontend-only); `/settings` stays unlocked so admins can apply a code.
 - Coolify CRON → `GET /api/weekly-cron` — **not implemented** (weekly settlement is manual via `complete-week`/`simulateEow`)
 - Deployment: Coolify, Cloudflare DNS
 
 ## Auth
 
 | Role           | Auth                                            | Session                                          | Record in               |
-| -------------- | --------------------------------------------- | -------------------------- | ------------------------- |
+| -------------- | ----------------------------------------------- | ------------------------------------------------ | ----------------------- |
 | Admin (parent) | PB email+pass                                   | 24hr JWT `pb_token` cookie                       | `users` (role `parent`) |
-| Member (child) | Invite OTP + server-derived password          | httpOnly `pb_token` cookie | `users` (role `child`)    |
+| Member (child) | Invite OTP + server-derived password            | Shared-device: `pb_token_<userId>` + `pb_active` | `users` (role `child`)  |
 | Superuser      | PB `_superusers` (server-side only, `pb-admin`) | —                                                | —                       |
 
 - **Admins** (parents) are `users` records (role `parent`). They authenticate via email/password login, get an httpOnly `pb_token` cookie with `{ id, name, username, role: "parent", famId, color }`.
-- **Members** (children) are `users` records (role `child`); PB `username` = `{famSlug}:{handle}` (globally-unique auth identity; `handle` = whitespace-free lowercase name), URL segment = `handleOf(username)`, `name` = display name. Their PB password is **derived** server-side (`MEMBER_SECRET + famSlug + handle`); access is gated by a 20-min OTP in `otp`, then `authWithPassword`. They get the same httpOnly `pb_token` cookie. There is **no `members` collection**.
+- **Members** (children) are `users` records (role `child`); PB `username` = `{famSlug}:{handle}` (globally-unique auth identity; `handle` = whitespace-free lowercase name), URL segment = `handleOf(username)`, `name` = display name. Their PB password is **derived** server-side (`MEMBER_SECRET + famSlug + handle`); access is gated by a 20-min OTP in `otp`, then `authWithPassword`. **Shared-computer sessions:** children keep ONE httpOnly cookie per account (`pb_token_<userId>`, set at join) + a `pb_active` cookie naming the current session; a 3-digit PIN _selects_ among those device sessions (see `shared-device.md`) — it is NOT a login and mints nothing on a fresh device. Parents stay on the single `pb_token`. Resolution order in hooks: `pb_active` → `pb_token`. There is **no `members` collection**.
 - **Platform superuser** (`_superusers`) used only server-side by `pb-admin.ts` for cross-family queries (e.g. `/admin` stats dashboard) and OTP/signup writes. Not an app role.
 - The layout (`[fam]/+layout.server.ts`) derives `isParent` and `role` centrally from the session — child pages use `page.data.isParent` or `page.data.role` from `$app/state`.
 - Because `pb_token` is httpOnly, the browser PB SDK is seeded from `page.data.pbToken` via `initPb(token)` in the layout `onMount` (not `document.cookie`).
@@ -34,7 +35,10 @@
 
 - `users` — auth collection; famId, role (`parent`|`child`), username (`{famSlug}:{handle}`), name, color, email (admin only)
 - `otp` — famId, userId, otp, updatedAt (OTP gate for child join; display colour lives on `users.color`)
-- `fams` — name, slug, stripeCustomerId, featureFlags
+- `pins` — famId, userId, pin (superuser-only shared-device PINs, plaintext so parents can read them out; all access via server endpoints)
+- `accesscodes` — value (unique), name, duration, expiry, active, createdAt (superuser-only; platform access codes)
+- `platform` — label (`global` singleton), flags (json) — platform feature flags; **public read** (empty list/view rules), superuser-only writes. Loaded on every page via root `+layout.server.ts` as `page.data.platformFlags`; toggle via `/admin` Platform Flags card. The `debug` flag gates dev-only CTAs (e.g. settings "Revoke code").
+- `fams` — name, slug, stripeCustomerId, paymentMode (`none|code|sub|canceled`), active, accessCodeId, accessCodeEnteredAt
 - `chore_templates` — famId, name, defaultValue, defaultFrequency
 - `assigned_chores` — famId, userId, templateId, frequency, value
 - `completions` — famId, userId, assignedChoreId, date
@@ -43,7 +47,7 @@
 - `monthly_bonuses` — famId, month, prizeType, prizeValue, winnerUserId
 - `settings` — famId, pointsThreshold, weeklyBonus, webhookUrl
 
-> **Schema/migrations:** `shared/pb/schema.ts` (`SCHEMA_PLAN`) is the single source of truth for base collections. `frontend/src/lib/server/migrate.ts` only **bootstraps** a fresh/wiped PB (idempotent, skips if `fams` exists) — it has no incremental history. The native `users` auth fields/rules and the superuser-only `otp` collection are applied in `migrate.ts` (`ensureUsers`/`ensureOtp`), not `SCHEMA_PLAN`. Data is disposable (app not live), so a schema change = update `SCHEMA_PLAN` + wipe PB + reboot.
+> **Schema/migrations:** `shared/pb/schema.ts` (`SCHEMA_PLAN`) is the single source of truth for base collections. `frontend/src/lib/server/migrate.ts` only **bootstraps** a fresh/wiped PB (idempotent, skips if `fams` exists) — it has no incremental history. The native `users` auth fields/rules and the superuser-only `otp`/`pins` collections are applied in `migrate.ts` (`ensureUsers`/`ensureOtp`/`ensurePins`), not `SCHEMA_PLAN`. Data is disposable (app not live), so a schema change = update `SCHEMA_PLAN` + wipe PB + reboot.
 
 ## Routes
 
@@ -51,16 +55,19 @@
 /                    Landing (SaaS marketing)
 /admin               Platform super-admin stats dashboard (and any donations)
 /login · /logout     Parent email/password login / logout
-/signup              Parent + family signup
-/{famSlug}/join/{username}  Member invite (OTP join), auto-fills from ?code=
+/signup              Parent + family signup (wizard: fam → child → code → plan)
+/{fam}/join/{username}  Member invite (OTP join), auto-fills from ?code=
+/{fam}/switch          Shared-device profile picker (standalone landing when child sessions exist but none active)
 /{fam}               Fam dashboard
 /{fam}/{username}    Parent → admin overview, Child → member kanban (role from session)
 /{fam}/{username}/chores       Chore templates & assignment grid
 /{fam}/{username}/ledger       Rewards / chores / todos ledger
 /{fam}/{username}/bonuses      Bonus configs & evaluation
 /{fam}/{username}/preferences  User preferences (parent→users, member→users)
-/{fam}/{username}/settings     Family admin settings (parent only)
-/api/*               Hono proxy (data layer; webhooks/CRON not implemented)
+/{fam}/{username}/settings     Family admin settings (parent only) — includes Stripe connect/manage + pause
+/pricing             3-tier public plan page (trial | monthly | yearly), entry via settings or logged-out
+/api/webhooks/stripe Stripe webhook handler (server route)
+/api/*               SvelteKit API endpoints (data layer; CRON not implemented)
 ```
 
 ## Data Flow
@@ -73,12 +80,12 @@
 
 ### Writes
 
-- **Chore toggle:** Browser → Hono proxy → PB (member auth via `Authorization: Bearer <pb_token>`)
-- **Admin CRUD:** Form actions / `hono.admin.*` → Hono proxy → PB (admin JWT via `sessionHeaders`)
-- **Member updates:** Browser → Hono proxy → PB (auth via `Bearer <pb_token>`)
-- **Reward creation:** After completion toggle, Hono proxy creates reward if threshold met
+- **Chore toggle:** Browser → SvelteKit `/api/completions/toggle` → PB (session cookie auth)
+- **Admin CRUD:** Form actions / `/api/admin/*` endpoints → PB via services (`servicesFor(event)`); PB collection rules are the security boundary
+- **Member updates:** Browser → SvelteKit `/api/*` routes → PB
+- **Reward creation:** After completion toggle, service layer creates reward if threshold met
 - **Weekly settlement:** NOT via CRON — manual `complete-week` action or `simulateEow` preview in settings. `/api/weekly-cron` (Coolify) is not implemented.
-- **Stripe / WhatsApp:** not implemented — only the `settings.webhookUrl` field exists.
+- **Stripe:** implemented in SvelteKit server routes — `/pricing` (public plan picker; logged-in users checkout inline) + settings Billing section (billing portal) + `/api/webhooks/stripe`. **WhatsApp:** not implemented.
 
 ### UI reactivity
 
@@ -153,7 +160,7 @@ let configs = $derived(
 Two patterns based on who's acting:
 
 | Pattern                      | Who    | Frequency            | Sensitivity              | Optimistic?                                   | Auth                               |
-| ---------------------------- | ------ | -------------------- | ------------------------ | --------------------------------------------- | ------------------------- |
+| ---------------------------- | ------ | -------------------- | ------------------------ | --------------------------------------------- | ---------------------------------- |
 | Direct `fetch` + `memberApi` | Member | High (chore toggles) | None                     | Yes (instant UI, reconcile on response)       | `Authorization: Bearer <pb_token>` |
 | Form action                  | Admin  | Low (CRUD)           | High (settings, members) | No — form is server-side, wait for round trip | httpOnly `pb_token` cookie         |
 
@@ -200,20 +207,19 @@ All admin and member pages use the following pattern:
 - Every collection query includes `famId = @request.auth.famId` filter
 - Super admin bypasses famId filter (access via PB admin API)
 - Child PB passwords are derived (`MEMBER_SECRET + famSlug + username`); the child join gate is a transient OTP in `otp`. No device tokens. Never log raw tokens/secrets.
-- **Admin → Proxy**: `hono.admin.*` in `$lib/server/hono.ts` — uses `sessionHeaders(event)` (server-side only, requires `RequestEvent`)
-- **Member → Proxy (server)**: `memberApi.*` in `$lib/client/api.ts` — use inside `+page.server.ts` load/actions; `BASE_URL` resolves to Hono port on server
-- **Member → Proxy (browser)**: `memberApi.*` in `$lib/client/api.ts` — use inside `+page.svelte`; `BASE_URL` is empty, Vite proxies `/api/*` to Hono
+- **Server data access**: `servicesFor(event)` / `createServices(pb)` in `$lib/server/services/`; superuser ops via `pbAdmin` facade (`$lib/server/pocketbase.ts`)
+- **Browser data access**: fetch to same-origin `/api/*` SvelteKit endpoints; httpOnly `pb_token` cookie is the auth
 - **`$page`**: import `{ page }` from `$app/state` (NOT `$app/stores` — that's the old Svelte 4 API). Reference as `page.params.fam`, `page.url.pathname` etc. without `$` prefix
 - **Dates**: all user-facing dates are DDMMYY (compact, e.g. `040826` for 4 Aug 2026). Use the shared `formatDDMMYY()` helper in `frontend/src/lib/format.ts`. Never render raw `YYYY-MM-DD` to users. Exception: single human-readable dates like todo **due dates** should use `formatShortDate()` (also in `format.ts`, renders `5 Aug` / `5 Aug 26`) — the compact DDMMYY code is ambiguous and bad UI for those.
 - `config.ts` at root for dev/build-time shared config (e.g. `PROXY_PORT`); runtime config via env vars
 - `.env` at root tracks port values (`PROXY_PORT`, `PORT`); `.env.example` committed as template
 - Docker: `docker/Dockerfile` (prod, multi-stage + nginx) + `docker/Dockerfile.dev` (PocketBase)
-- Nginx routes in prod: `/api/*` → Hono (`:3456`), `/*` → SvelteKit (`:2080`)
+- Nginx routes in prod: `/*` → SvelteKit (`:2080`), `/pb/*` → PocketBase
 - Ports: frontend `2080`, proxy `3456`, container ext `3001` (port `3000` is reserved)
 - **Dev servers: NEVER start your own.** Always reuse the running dev servers — proxy `192.168.1.225:3456` (tsx watch, reloads on edit), frontend `localhost:2080` (vite HMR). Don't spawn `nohup pnpm dev` / `tsx watch` / extra vite instances. Only restart when the user explicitly asks.
 - Environment: `FRONTEND_PORT`, `PROXY_PORT`, `PB_PORT`, `PB_EMAIL`, `PB_PASSWORD`, `DEBUG_RECORD_ID`, `STRIPE_SECRET_KEY`, `DONATION_MODAL_INTERVAL`
 - Seed via JSON dump (portable for dev)
-- Monorepo: SvelteKit in `frontend/`, Hono in `proxy/`, two Dockerfiles
+- Monorepo: SvelteKit in `frontend/` (+ root `shared/`), single app Dockerfile + PB Dockerfile.dev
 - Decisions tracked in `MEMORY.md`
 
 ## Build Phases (must validate each before next)
@@ -244,7 +250,7 @@ All admin and member pages use the following pattern:
 3.5 Reward claim flow + admin CRUD
 3.6 Monthly bonus evaluation
 3.7 CRON handler (Coolify → Hono)
-3.8 Stripe checkout + webhook
+3.8 Stripe checkout + webhook (SvelteKit server routes, not Hono)
 3.9 Notification interface (WhatsApp deferred)
 
 ### Phase 4 — Frontend App

ARCHITECTURE.md

@@ -1,10 +1,10 @@
-# FamChore v2 — Architecture & Developer Reference
+# FamDone v2 — Architecture & Developer Reference
 
 ## Overview
 
-Multi-tenant chore tracking SaaS. Families ("fams") are isolated tenant groups. Fam admins use email/password. Members join via invite code + device token (no password). Super admin (you) can see everything.
+Multi-tenant chore tracking SaaS. Families ("fams") are isolated tenant groups. Admins (parents) authenticate via email/password; members (children) join via invite OTP and get a server-derived password. No `members` collection — everyone is a `users` row scoped by `famId`.
 
-**Demo reference:** Current prototype at `/home/threejjjs/development/famchore/`
+**Source of truth:** `AGENTS.md` is the living reference. This doc captures the architecture.
 
 ---
 
@@ -12,21 +12,22 @@ Multi-tenant chore tracking SaaS. Families ("fams") are isolated tenant groups.
 
 | Component | Role | Deploy | Port |
 |---|---|---|---|
-| SvelteKit | SSR frontend, all UI | Coolify Docker (chores.app.com) | :3000 |
-| Hono proxy | Stripe, CRON, webhooks | Same container as SvelteKit, proxied via `/api/*` | :3001 (internal) |
-| PocketBase | DB, auth, realtime, storage, Admin UI | Coolify Docker (pb.chores.app.com) | :8090 |
+| SvelteKit | SSR frontend + all services + Stripe server routes (`/api/*`) | Coolify Docker (nginx) | :2080 internal, :3001 external |
+| PocketBase | DB, auth, realtime, storage, Admin UI | Coolify service (pb.chores.app.com) | :8090 |
+| Stripe | subscriptions (SvelteKit server routes) | — | — |
 
 ### Deployment Topology
 
 ```
-chores.app.com ────┬──► SvelteKit (:3000)
-                    │      └── /api/* ──► Hono proxy (:3001)
+chores.app.com ────┬──► nginx (:3001)
+                    │      ├── /*    ──► SvelteKit (:2080)
+                    │      └── /api/* ──► SvelteKit (:2080)
                     │
 pb.chores.app.com ──► PocketBase (:8090)
                      │      Admin UI at /_
                      │      Volume: /pb_data (persistence + backups)
                      │
-stripe.com ─────────► Hono /api/stripe/webhook
+stripe.com ─────────► SvelteKit /api/webhooks/stripe
 ```
 
 ---
@@ -35,133 +36,41 @@ stripe.com ─────────► Hono /api/stripe/webhook
 
 ### 2.1 Roles & Methods
 
-| Role | Auth | Session | Scope | PB Entity |
-|---|---|---|---|---|
-| **Super admin** (you) | PB email + password | 24hr JWT | All collections, all fams | PB `users` (set via seed) |
-| **Fam admin** | PB email + password | 24hr JWT | Their fam only | PB `users` |
-| **Member** | Invite code + device token | localStorage, no expiry | Own data only | `members` collection |
+| Role | Auth | Session | PB Entity |
+|---|---|---|---|
+| **Admin (parent)** | PB email + password | 24hr JWT `pb_token` cookie | `users` (role `parent`) |
+| **Member (child)** | Invite OTP + server-derived password | httpOnly `pb_token` cookie | `users` (role `child`) |
+| **Superuser** | PB `_superusers` (server-side only) | — | `_superusers` |
 
-### 2.2 Member Auth Flow
+### 2.2 Details
 
-1. Fam admin generates invite code → stored on `fams.inviteCode`
-2. Admin shares as text (`chores.app.com/join/XYZ123`) or QR code
-3. Member opens link, enters name, browser generates `crypto.randomUUID()` as device token
-4. PB API creates `members` record with SHA-256 hashed token
-5. Device token stored in `localStorage`, sent as `X-Device-Token` header
-6. If token lost → admin regenerates invite code, member re-registers
-7. Admin can revoke access by deleting member record
+- **Admins** are `users` (role `parent`). Login via email/password → httpOnly `pb_token` cookie `{ id, name, username, role: "parent", famId, color }`.
+- **Members** are `users` (role `child`); PB `username` = `{famSlug}:{handle}` (globally-unique; `handle` = whitespace-free lowercase name), URL segment = `handleOf(username)`, `name` = display name. Password is **derived** server-side (`MEMBER_SECRET + famSlug + handle`). Join gated by a 20-min OTP in `otp`, then `authWithPassword`. Same httpOnly `pb_token` cookie. No `members` collection.
+- **Superuser** used only server-side by `pb-admin.ts` for cross-family queries (`/admin`) and OTP/signup writes.
+- Layout `[fam]/+layout.server.ts` derives `isParent`/`role` centrally from the session. `pb_token` is httpOnly, so the browser PB SDK is seeded from `page.data.pbToken` via `initPb(token)` in `onMount`.
 
-### 2.3 PB Auth Rules (row-level security)
+### 2.3 PB Auth Rules
 
-Every collection has `famId` field. PB rule pattern:
-
-```
-famId = @request.auth.famId
-```
-
-Super admin bypasses via admin API (PB superuser credentials).
+Every tenant-scoped collection has `famId` and enforces `famId = @request.auth.famId`; family-scoped collections have public `listRule`/`viewRule` so reads/subscribes work for both roles. Superuser bypasses via admin API.
 
 ---
 
-## 3. Data Model
+## 3. Data Model (PB collections, all scoped by `famId`)
 
-All collections live in PocketBase. Every tenant-scoped collection includes `famId` (relation to `fams`).
+- `users` — auth collection; famId, role (`parent`|`child`), username (`{famSlug}:{handle}`), name, color, email (admin only)
+- `otp` — famId, userId, otp, updatedAt (OTP gate for child join; display colour on `users.color`)
+- `accesscodes` — value (unique), name, duration, expiry, active, createdAt (superuser-only; platform access codes)
+- `platform` — label (`global` singleton), flags (json) — platform feature flags; public read (empty list/view rules), superuser-only writes. Loaded on every page via root `+layout.server.ts` as `page.data.platformFlags`; toggled from the `/admin` Platform Flags card (`debug` gates dev-only CTAs like settings "Revoke code"). Replaces the deprecated per-fam `fams.featureFlags`.
+- `fams` — name, slug, stripeCustomerId, paymentMode (`none`|`code`|`sub`|`canceled`), active, accessCodeId, accessCodeEnteredAt
+- `chore_templates` — famId, name, defaultValue, defaultFrequency
+- `assigned_chores` — famId, userId, templateId, frequency, value
+- `completions` — famId, userId, assignedChoreId, date
+- `weekly_history` — famId, userId, weekStart, pointsEarned, moneyEarned
+- `rewards` — famId, userId, source, label, value, claimed, claimedAt, claimable, settleDate
+- `monthly_bonuses` — famId, month, prizeType, prizeValue, winnerUserId
+- `settings` — famId, pointsThreshold, weeklyBonus, webhookUrl
 
-### `fams`
-| Field | Type | Notes |
-|---|---|---|
-| `id` | auto | PB default |
-| `name` | text | Display name |
-| `slug` | text | URL segment, unique |
-| `inviteCode` | text | Short alphanumeric, regeneratable |
-| `stripeCustomerId` | text? | Set after first donation |
-| `featureFlags` | json | `{ "monthlyBonus": true }` |
-| `created` | auto | |
-
-### `members`
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | |
-| `name` | text | |
-| `color` | text | Hex |
-| `deviceToken` | text | SHA-256 hash of raw token |
-| `deviceTokenHint` | text | First 8 chars of raw token (for admin display) |
-| `pointsThreshold` | number? | Override fam default |
-| `weeklyBonus` | number? | Override fam default |
-| `created` | auto | |
-
-### `chore_templates`
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | |
-| `name` | text | |
-| `description` | text | |
-| `defaultFrequency` | select | `daily` or `weekly` |
-| `defaultType` | select | `points` or `money` |
-| `defaultValue` | number | |
-
-### `assigned_chores`
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | |
-| `memberId` | relation→members | |
-| `templateId` | relation→chore_templates | |
-| `frequency` | select | |
-| `type` | select | |
-| `value` | number | |
-| `customName` | text? | |
-
-### `completions`
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | |
-| `memberId` | relation→members | |
-| `assignedChoreId` | relation→assigned_chores | |
-| `date` | date | ISO date |
-| `completedAt` | auto | |
-
-### `rewards`
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | |
-| `memberId` | relation→members | |
-| `source` | select | `weekly_bonus`, `monthly_bonus`, `custom` |
-| `label` | text | |
-| `value` | number | |
-| `weekStart` | date? | |
-| `month` | text? | "2026-06" |
-| `claimed` | bool | |
-| `claimedAt` | auto? | |
-
-### `weekly_history`
-| Field | Type |
-|---|---|
-| `famId` | relation→fams |
-| `memberId` | relation→members |
-| `weekStart` | date |
-| `pointsEarned` | number |
-| `moneyEarned` | number |
-| `choresCompleted` | number |
-| `bonusEarned` | number |
-
-### `monthly_bonuses`
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | |
-| `month` | text | "2026-06" |
-| `prizeType` | select | `cash`, `string` |
-| `prizeValue` | text | |
-| `winnerMemberId` | relation→members? | Nullable until computed |
-| `pointsScored` | number? | |
-| `claimed` | bool | |
-
-### `settings` (singleton per fam)
-| Field | Type | Notes |
-|---|---|---|
-| `famId` | relation→fams | Unique |
-| `pointsThreshold` | number | Default: 100 |
-| `weeklyBonus` | number | Default: 2 (e.g. £2) |
-| `webhookUrl` | text? | N8N/notification URL |
+> **Schema/migrations:** `shared/pb/schema.ts` (`SCHEMA_PLAN`) is the single source of truth for base collections. `frontend/src/lib/server/migrate.ts` bootstraps a fresh/wiped PB (idempotent). The native `users` auth fields/rules + the superuser-only `otp`/`accesscodes` and public-read `platform` collections are applied in `migrate.ts` (`ensureUsers`/`ensureOtp`/`ensureAccessCodes`/`ensurePlatform`); `ensureFamFields()` hardens existing installs with newer `fams` fields. Data is disposable — schema change = update `SCHEMA_PLAN` + wipe PB + reboot.
 
 ---
 
@@ -171,114 +80,179 @@ All collections live in PocketBase. Every tenant-scoped collection includes `fam
 
 ```
 /                            Landing page (SaaS marketing)
-/join/:code                Member invite code + name entry
-
-/{fam}                     Fam dashboard (weekly overview)
-/{fam}/admin               Admin panel
-/{fam}/admin/chores        Chore template CRUD + assignment grid
-/{fam}/admin/rewards       Reward management, claim history
-/{fam}/admin/settings      Thresholds, webhook, invite code, features
-
-/{fam}/:username           Member kanban
-  ?token=<deviceToken>     Auto-auth via query param (from QR/share)
-```
-
-### Hono proxy (`/api/*`)
-
-```
-/api/stripe/create-checkout    Create Stripe Checkout Session
-/api/stripe/webhook            Stripe event webhook
-/api/weekly-cron               Coolify CRON target
+/admin                       Platform super-admin stats dashboard
+/login · /logout             Parent login / logout
+/signup                      Parent + family signup (wizard: fam → child → code → plan)
+/{fam}/join/{username}       Member invite (OTP join), auto-fills from ?code=
+/{fam}                       Fam dashboard
+/{fam}/{username}            Parent → admin overview, Child → member kanban
+/{fam}/{username}/chores     Chore templates & assignment grid
+/{fam}/{username}/ledger     Rewards / chores / todos ledger
+/{fam}/{username}/bonuses    Bonus configs & evaluation
+/{fam}/{username}/preferences  User preferences
+/{fam}/{username}/settings   Family admin settings (parent only) — Stripe connect/manage + pause
+/settings (Billing group)    Subscription status, change plan, open billing portal
+/pricing                     3-tier public plan page (trial | monthly | yearly), entry via settings or logged-out
+/api/webhooks/stripe         Stripe webhook handler (server route)
+/api/*                       SvelteKit API endpoints (data layer; CRON not implemented)
 ```
 
 ---
 
 ## 5. Data Flow
 
-### 5.1 Chore Toggle
+### 5.1 Reads (both roles)
+
+- `famStore.init()` fetches all collections via PB SDK, authenticated via the seeded `pb_token`. `.subscribe()` works for both roles.
+- TopNav season pills read from `famStore.seasons` (reactive).
+
+### 5.2 Writes
+
+- **Chore toggle:** Browser → SvelteKit `/api/completions/toggle` → PB (session cookie auth).
+- **Admin CRUD:** Form actions / `/api/admin/*` endpoints → PB via services; PB collection rules are the security boundary.
+- **Member updates:** Browser → SvelteKit `/api/*` routes → PB.
+- **Reward creation:** after completion toggle, service layer creates reward if threshold met.
+- **Weekly settlement:** NOT via CRON — manual `complete-week` action or `simulateEow` preview in settings. `/api/weekly-cron` (Coolify) not implemented.
+- **Stripe:** SvelteKit server routes `/pricing` + settings Billing actions + `/api/webhooks/stripe`.
+- **WhatsApp:** not implemented.
+
+### 5.3 Stripe Subscription (embedded Checkout)
 
 ```
-User clicks checkbox
-  → Browser → PB SDK (direct, auth= device token or admin JWT)
-    → PB inserts/deletes completion
-      → PB realtime SSE push to all subscribers
-        → UI updates (kanban card, progress bar, money counter)
-          → If weekly threshold crossed:
-            → SvelteKit server handler creates Reward (weekly_bonus)
+PUBLIC PRICING                     SIGNUP WIZARD                     AFTER
+─────────────                     ─────────────                     ─────
+/pricing ── logged out ──►  /signup?plan=X
+        └─ logged in ──►    embedded checkout (existing behavior)
+
+                            1. fam      create family + parent
+                            2. child    add child / skip
+                            3. code     "Have an access code?"
+                                          ├─ apply valid ──► 5. done (fam active)
+                                          └─ skip ─────────► 4. plan
+                            4. plan     PricingPlans component
+                                          ├─ ?plan=X pre-highlights that tier
+                                          ├─ pick tier ──► embedded checkout mounts INLINE
+                                          └─ trial tier hidden (codes live at step 3)
+                            5. done     "Go to dashboard"
+                                        webhook sets paymentMode=sub → overlay lifts
 ```
 
-### 5.2 Weekly CRON
+Webhook events (`/api/webhooks/stripe`) update `fams.stripeCustomerId`, `fams.active`, `fams.paymentMode` from subscription lifecycle.
 
-Triggered by Coolify CRON job → `GET /api/weekly-cron`:
+### 5.3.1 Payments architecture
 
 ```
-Hono receives request
-  → Queries all fams
-  → For each fam:
-    → Compute weekly summaries per member (completions tally)
-    → Upsert weekly_history records
-    → Evaluate monthly bonus (end-of-month)
-    → If webhookUrl set on fam settings:
-      → POST summary to webhook (pluggable — WhatsApp later)
-  → Returns 200
+┌──────────────────────────────────────────  SVELTEKIT APP  ──────────────────────────────────────────┐
+│                                                                                                      │
+│  Browser                                                                                             │
+│  ┌──────────────────────────────┐   POST ?/choose      ┌─────────────────────────────────────────┐  │
+│  │  /pricing (+page.svelte)      │ ───────────────────► │  pricing/+page.server.ts (action)       │  │
+│  │  • PricingPlans component     │                       │  • logged-out: redirect /signup?plan=X  │  │
+│  │  • createEmbeddedCheckoutPage │ ◄─── clientSecret ─── │  • logged-in: createEmbeddedCheckout... │  │
+│  │  • mounts embedded Stripe UI  │                       └───────────────┬─────────────────────────┘  │
+│  └──────────────┬───────────────┘                                       │  stripe SDK (secret)        │
+│                 │ createEmbeddedCheckoutPage(clientSecret)              ▼                             │
+│                 ▼                                        ┌─────────────────────────────┐            │
+│  ┌──────────────────────────────┐                        │   STRIPE API                │            │
+│  │  Embedded Checkout (Stripe   │  card + pay            │   checkout.sessions.create  │            │
+│  │  hosted iframe, in-page)     │ ───────────────────►  │   (ui_mode: embedded_page)   │            │
+│  └──────────────────────────────┘                        └──────────────┬──────────────┘            │
+│                                                                         │ webhook events              │
+│                                                                         ▼                            │
+│  ┌──────────────────────────────────────────────────────────────────────────────────────────────┐   │
+│  │  /api/webhooks/stripe (+server.ts)                                                            │   │
+│  │  • verify stripe-signature (CLI secret in dev, dashboard in prod)                           │   │
+│  │  • handleStripeEvent()  →  stripe-events.ts                                                 │   │
+│  │    └ checkout.session.completed  → fams.stripeCustomerId + active + paymentMode='sub'       │   │
+│  │    └ customer.subscription.*     → fams.active + paymentMode (sync by customer id)          │   │
+│  │    └ customer.subscription.deleted → active=false + paymentMode='canceled'                  │   │
+│  └──────────────────────────────────────────────────────┬─────────────────────────────────────┘   │
+│                                                         │ pbAdmin (superuser)                     │
+└─────────────────────────────────────────────────────────┼─────────────────────────────────────────┘
+                                                          ▼
+                                                ┌────────────────────┐
+                                                │   POCKETBASE        │
+                                                │   fams.stripeCustomerId │
+                                                │   fams.active (bool)    │
+                                                │   fams.paymentMode      │
+                                                └────────────────────┘
+
+SIGNUP WIZARD (inline checkout at step 4):
+  /signup?plan=X
+    1. fam      create family + parent (no code field)
+    2. child    add child / skip
+    3. code     "Have an access code?" → apply or skip
+    4. plan     PricingPlans component (hideTrial), selecting a plan
+                → ?/choose action → createEmbeddedCheckoutSession → mount embedded inline
+    5. done     "Go to dashboard" — webhook flips paymentMode=sub, overlay lifts
+
+Management:
+  Settings → Billing group (+page.server.ts ?/billingPortal)
+    • createBillingPortalSession(customerId) → Stripe Customer Portal
+      (update card, cancel / reactivate subscription; returns to /{fam}?checkout=return)
+  Gating derives from fams.paymentMode alone (none = gated). No local pause flag.
+
+Dev-only:
+  pnpm stripe:listen   (root script)
+    = stripe listen -e customer.subscription.updated,customer.subscription.deleted,checkout.session.completed
+      --forward-to http://127.0.0.1:2080/api/webhooks/stripe
+      (sets STRIPE_CLI_WEBHOOK_SECRET for local signature verification)
+
+Embedded Checkout needs a secure context (HTTPS or localhost). Over Tailscale/LAN HTTP the
+checkout iframe hangs silently — port-forward instead: ssh -L 2080:localhost:2080
 ```
 
-### 5.3 Stripe Donation
+**Key decisions**
+- **Payments live in SvelteKit server routes** — the app owns SSR + server actions end-to-end. Stripe secret never reaches the client.
+- **`fams.paymentMode` + `fams.active`** gate the platform (see 5.3.2). Webhooks write `paymentMode`; `ensureFamAccess()` recomputes and persists `active` on every `[fam]` layout load.
+- **Embedded Checkout** (in-page, no redirect) via `createEmbeddedCheckoutPage` with `ui_mode: 'embedded_page'` (`'embedded'` is deprecated) — needs a same-origin `return_url`. No `customer_creation` (subscription mode only; Stripe auto-creates the customer from `customer_email`).
+- **Access codes are a real PB collection** (`accesscodes`, superuser-only) — entered at signup or via settings; replaces the earlier app-side trial-code idea.
+- **Webhook secrets** — `STRIPE_CLI_WEBHOOK_SECRET` (dev) overrides `STRIPE_WEBHOOK_SECRET` (prod/dashboard); `verifyStripeEvent` picks the CLI one when set. Dev testing uses the Stripe CLI (`pnpm stripe:listen`) which forwards real signed events; a real checkout carries the `famId` and drives the DB write end-to-end.
+
+### 5.3.2 Access gating (`fams.paymentMode` / `accesscodes`)
 
 ```
-User clicks "Donate" on landing or modal
-  → Hono /api/stripe/create-checkout
-    → Creates Stripe Checkout Session
-    → Returns session.url → redirect user to Stripe
-  → Stripe redirects back to app
-  → Stripe webhook → Hono /api/stripe/webhook
-    → Updates fam.stripeCustomerId
-    → Sets fam.featureFlags.donated = true (or similar)
+computeFamAccess(fam, code?) → { disabled, reason }        lib/server/access.ts
+  none      → disabled ("no_access")                        fresh signup, no code/sub
+  code      → valid while accesscodes.active && !expired && !durationExhausted
+              (duration/expiry 0 = continuous/never; months measured from
+               fam.accessCodeEnteredAt / code.createdAt)
+  sub       → follows webhook-maintained fams.active
+  canceled  → disabled ("canceled")
+ensureFamAccess(famId): reads fam+code, persists drifted fams.active, returns {fam, access}
+applyAccessCode(famId, value): validates + sets paymentMode='code' + entry stamp
 ```
 
-### 5.4 Admin CRUD
+- Exposed to all fam pages as `data.famAccess` from `[fam]/+layout.server.ts`.
+- Disabled UX: layout blurs page content behind an overlay card + admin TopNav announcement (`/settings` is exempt so admins can apply a code / manage billing); member kanban renders empty locked columns and `toggle()` early-returns (frontend-only by decision).
+- Entry points: optional code field at signup, Access card in settings (`?/applyCode`). Webhooks flip `paymentMode` to `sub`/`canceled`.
+- Debug revoke: with the platform `debug` flag ON, settings shows a "Revoke code" CTA (`?/revokeCode`) that clears the applied code (back to `none`/gated). Server-side flag check is the boundary.
+- Seeded dev code: `dev123` (developer, duration 0, expiry 0).
 
-All admin operations go through PB admin API (Hono proxy or `+page.server.ts`). This ensures:
-- Server-side validation of famId
-- Audit trail option
-- Consistent error handling
+### 5.4 UI reactivity
 
-### 5.5 Family Chat
-
-Real-time right-slideout chat panel (TopNav chat icon, slideout on desktop / full-screen on mobile).
-
-- **Writes go through the Hono proxy** (`POST /api/chat/:famId/messages`, `POST /api/chat/:famId/typing`) — the proxy resolves the actor via the `session` cookie / `x-session-*` headers (admin) or `x-device-token` headers (member). `GET /api/chat/me` returns the actor's identity (`{id, type, name, color}`) for both roles.
-- **Reads use the anonymous PB SDK client-side** (`chatStore` in `frontend/src/lib/stores/chat.svelte.ts`), the same pattern as `famStore`. Collections `messages` and `chat_typing` have public `listRule`/`viewRule` (empty string); browser `.subscribe('*')` gives realtime SSE sync for both roles.
-- **Collections:** `messages` (famId, authorType admin/member, authorId, authorName, authorColor, content, `createdAt`), `chat_typing` (transient per-actor presence: famId, actorId, actorType, authorName, authorColor, typing).
-- **History** = last 14 days. Filter uses the custom `createdAt` field — the auto `created`/`updated` fields are NOT filterable in this PocketBase version (400), so a custom date field is set by the proxy at create time.
-- **`createdAt` vs `created`:** all sorting, optimistic-temp messages, and the timestamp label use `createdAt`. The PB auto `created` field is not returned on records, so referencing it throws (`localeCompare` of undefined).
-- **UI** (`Chat.svelte`): @mention tokens, typing indicators, unread badge, optimistic send with reconcile. The panel starts closed (no auto-open on mount) and is toggled via `chatStore.toggle()`.
+- Svelte `$state` / `$derived` / `$effect`.
+- PB SDK `.subscribe()` for realtime multi-user sync (public reads → both roles).
+- `famStore.applyRecord()` for instant optimistic feedback.
+- **Rule:** if data should update via SSE, use `$derived` (not `$state` — frozen snapshot). Only high-frequency member actions use `$state` + optimistic `applyRecord`.
 
 ---
 
 ## 6. Project Structure
 
 ```
-/chores
-  /src                     SvelteKit app
-    /lib
-      /components           Shared UI components
-      /stores               Svelte stores (auth, current fam)
-      /pb                   PB SDK client helpers
-    /routes                 SvelteKit file-based routing
-    /hooks.server.ts        Auth hooks, PB client init
-  /proxy                    Hono proxy
-    /src
-      /routes               Stripe webhook, CRON handler
-      /services             PB admin client, notification service
-    package.json
-  /seed                     JSON dump files for PB collections
-  /pb                       PB collection schema definitions
-  package.json              Workspace root
-  Dockerfile.frontend       SvelteKit + Hono build
-  Dockerfile.backend        PocketBase (custom, or use official image)
-  coolify.json              Coolify deployment config (optional)
-  AGENTS.md                 AI reference (this file's sibling)
+/ (root)
+  /shared/pb/schema.ts       SCHEMA_PLAN — source of truth for base collections
+  /frontend                  SvelteKit app (:2080)
+    /src/env.ts              declareEnvVars — client/server env
+    /src/lib/server          pocketbase.ts (pbAdmin), migrate.ts, access.ts, platform.ts, services/
+    /src/lib/client          api.ts (memberApi), stores (famStore)
+    /src/lib/components      UI components (re-exported from index.ts)
+    /src/routes              SvelteKit file-based routing (incl /pricing, /signup wizard, /api/webhooks/stripe)
+  /docker                    Dockerfile (prod multi-stage + nginx), Dockerfile.dev (PB)
+  /config.ts                 dev/build-time shared config (ports)
+  /MEMORY.md                 decisions log
+  AGENTS.md                  AI reference
   ARCHITECTURE.md            This document
 ```
 
@@ -286,112 +260,35 @@ Real-time right-slideout chat panel (TopNav chat icon, slideout on desktop / ful
 
 ## 7. Environment Variables
 
-### Current (this repo)
-```
-# .env (dev; loaded by vite for the frontend + tsx --env-file for the proxy)
-PB_EMAIL=debug@famchamp.dev        # PB superuser (server-only; pb-admin + proxy)
-PB_PASSWORD=debug123
-SERVER_IP=192.168.1.225            # dev machine IP (Tailscale IP when away) — change when it changes
-```
-- Ports live in root `config.ts` (`FRONTEND_PORT`/`PROXY_PORT`/`PB_PORT` = `2080`/`3456`/`8090`) — the proxy reads them; SvelteKit never imports `config.ts`.
-- SvelteKit env vars are declared in `frontend/src/env.ts` (`PROXY_URL`, `SERVER_IP`, `PB_EMAIL`, `PB_PASSWORD`) and read via `$app/env/public` / `$app/env/private`.
-- Compose/deploy: `PORT` (public port, default `3001`), `PB_DATA` (host data dir). `PUBLIC_PB_URL` no longer exists (docker bakes `/pb`; browser PB URL derives from `SERVER_IP` in dev).
-- Not yet wired: `STRIPE_SECRET_KEY`, `DONATION_MODAL_INTERVAL`.
+Env vars declared in `frontend/src/env.ts` via `defineEnvVars` (`@sveltejs/kit/hooks`). Only `{ public: true }` are exposed client-side via `$app/env/public`; server-only via `$app/env/private`.
 
-### Dev vs Prod PocketBase data (⚠️)
-- **Dev (`pnpm dev`)**: permanent dev PB = container **`pb-dev`** at `:8090`, data in host `./pb_data`. This is what the code talks to via `SERVER_IP:8090`.
-- **Prod/docker**: the app container bundles its **own internal PB**, published loopback-only at `127.0.0.1:8091`, and also bind-mounts `./pb_data`.
-- Never recreate `pb-dev` with a fresh volume — restore it with `-v "$PWD/pb_data:/pb_data"` (full command in `RULES.md`).
+- `FRONTEND_PORT`, `PROXY_PORT`, `PB_PORT`
+- `PB_EMAIL`, `PB_PASSWORD` (PB superuser, server-only)
+- `DEBUG_RECORD_ID`
+- `STRIPE_SECRET_KEY` (server-only)
+- `DONATION_MODAL_INTERVAL`
+- `SERVER_IP` (public, dev)
+
+Values come from root `.env` (symlinked at `frontend/.env -> ../.env`). `.env.example` is the committed template. Ports also tracked in root `config.ts`.
 
 ---
 
-## 8. Implementation Phases
+## 8. Key Conventions
 
-### Phase 0 — Infrastructure (2-4 hrs)
-- [ ] Deploy PocketBase on Coolify (`pb.chores.app.com`)
-  - Official `pocketbase/pocketbase` image
-  - Mount `/pb_data` volume
-  - Set super admin env vars
-  - Test: visit `pb.chores.app.com/_/`, login, data persists after restart
-- [ ] Scaffold monorepo with SvelteKit + Hono
-- [ ] Create Dockerfiles
-- [ ] Deploy to Coolify (`chores.app.com`)
-- [ ] Cloudflare DNS for both
-
-### Phase 1 — Auth (4-6 hrs)
-- [ ] Create PB collections: `fams`, `members`, `settings`
-- [ ] Super admin seed script
-- [ ] Fam signup → PB user + fam record
-- [ ] Fam admin login (24hr JWT)
-- [ ] Invite code generation
-- [ ] Member join page (`/join/:code`)
-- [ ] Device token auth
-- [ ] Route guards
-- [ ] Seed data (1 fam + 3 members + chores matching demo)
-
-### Phase 2 — Core Chore Tracking (6-8 hrs)
-- [ ] PB collections: `chore_templates`, `assigned_chores`, `completions`, `weekly_history`
-- [ ] Admin chore CRUD
-- [ ] Admin chore assignment grid
-- [ ] Member kanban (3 columns: Daily Pending, Weekly Pending, Completed)
-- [ ] Completion toggle
-- [ ] Realtime updates (PB SSE)
-- [ ] Weekly progress + chart
-- [ ] Admin dashboard
-
-### Phase 3 — Rewards + Claims (3-4 hrs)
-- [ ] PB collection: `rewards`
-- [ ] Auto-create weekly bonus reward on threshold
-- [ ] Claim section with visual feedback
-- [ ] Admin reward CRUD
-- [ ] Monthly bonus (set prize → compute winner → create reward)
-- [ ] Pluggable notification interface in CRON handler
-
-### Phase 4 — SaaS (4-6 hrs)
-- [ ] Landing page (hero, features, CTA)
-- [ ] Stripe one-time checkout (Hono)
-- [ ] Donation modal (triggered after N admin page loads)
-- [ ] Feature flags (checked in routes via settings)
-- [ ] Super admin dashboard (stats, all-fams view, feature toggles)
-
-### Phase 5 — Polish (ongoing)
-- [ ] QR invite code
-- [ ] PB backup scheduler
-- [ ] Error/loading/empty states
-- [ ] Responsive mobile layout
-- [ ] Accessibility
+- **`famId` on every query** — PB auth rules enforce `famId = @request.auth.famId`; superuser bypasses.
+- **Server data access:** `servicesFor(event)` / `createServices(pb)` in `$lib/server/services/`; superuser ops via `pbAdmin` facade.
+- **Browser data access:** same-origin fetch to `/api/*` SvelteKit endpoints; httpOnly `pb_token` cookie is the auth.
+- **Child passwords derived** — `MEMBER_SECRET + famSlug + username`; join gate is a transient OTP. Never log raw tokens/secrets.
+- **`$page`** — from `$app/state` (not `$app/stores`); no `$` prefix.
+- **Dates** — user-facing via `formatDDMMYY()` (compact `040826`); human-readable due dates use `formatShortDate()`. Never render raw `YYYY-MM-DD`.
+- **UI shell** — `[fam]/+layout.svelte` (Sidebar, TopNav, Footer); `ViewHeader` + `CardGrid`/`Card` micro-layout; `Button` for CTAs; icons as SVG strings in `lib/components/icons.ts`.
+- **Reactivity** — never `$effect` to sync local state from famStore; use `$derived` for SSE-reactive data; `$state` + `applyRecord` only for optimistic member toggles.
+- **Dev servers** — never start your own; reuse running proxy (`192.168.1.225:3456`) + frontend (`localhost:2080`).
 
 ---
 
-## 9. Key Conventions
+## 9. Open / Deferred
 
-- **`famId` on every query** — PB auth rules enforce `famId = @request.auth.famId`
-- **PB SDK client-side for members** — Browser talks to PB directly for toggles, reads. PB auth rules handle security.
-- **PB admin API server-side for admins** — Hono proxy or SvelteKit server handlers for admin CRUD.
-- **Device tokens as SHA-256** — Never store or log raw tokens.
-- **JSON dump for seed data** — Portable, version-controllable, restorable via PB backup CLI.
-- **All collection schema files in `/pb/`** — Tracked in git, used for CI/CD schema migration.
-- **Notifications via pluggable interface** — Hono CRON handler has `NotificationService` interface; WhatsApp is one implementation (deferred).
-
----
-
-## 10. Open / Deferred
-
-- **WhatsApp notifications** — Will be implemented as a `NotificationService` plugin for the weekly CRON handler. N8N or Twilio, TBD.
-- **Subscription payments** — Currently one-time donation only. Subscription model can be added later via Stripe webhooks.
-- **Member re-auth on new device** — Current design requires admin to regenerate invite code. Could add "re-issue link" feature in admin panel.
-- **Multi-language** — Not yet scoped. All text in English for now.
-
----
-
-## 11. Reference: Current Prototype
-
-The existing HonoJS prototype at `/home/threejjjs/development/famchore/` contains the reference logic for:
-- Weekly bonus calculation (`src/services.ts` → `checkWeeklyBonus`)
-- Monthly bonus evaluation
-- Reward claim flow
-- Chore toggle event delegation
-- Chart/stat formatting
-- Date/timezone helpers
-
-Refer to `src/types.ts` for the original type definitions, and `src/views/` for the Alpine.js template structure that maps to the new SvelteKit components.
+- **WhatsApp notifications** — `NotificationService` plugin for the weekly CRON handler. Deferred.
+- **Stripe payments** — implemented in SvelteKit (`/pricing` public picker + inline signup checkout, settings Billing group with billing portal, `/api/webhooks/stripe` → `stripe-events.ts`; `?checkout=return` lands on the fam dashboard with a welcome notice). Remaining: platform-admin UI for managing `accesscodes`, prod webhook secret wiring, optional Stripe-level pause (see TODO.md).
+- **Weekly CRON** (`/api/weekly-cron`, Coolify) — not implemented; settlement is manual via `complete-week`/`simulateEow`.

MEMORY.md

@@ -1,4 +1,4 @@
-# FamChore v2 — Development Memory
+# FamDone v2 — Development Memory
 
 ## 2026-08-17 — Schema collapse to single source of truth (Option 1)
 
@@ -20,6 +20,7 @@
 ## UI Component Architecture (Jul 2026)
 
 ### Layout Hierarchy
+
 ```
 +layout.svelte  ← global styles, meta, favicon
 ├── /login, /signup, /join/*  ← auth pages (no shell)
@@ -34,17 +35,20 @@
 ```
 
 ### Sidebar (collapsible to mini-mode)
-- Header: app name (FamChore)
+
+- Header: app name (FamDone)
 - Admin CTAs: Dashboard, Chores, Rewards (badge count), Bonuses
 - Member CTAs: Dashboard, Preferences
 - Footer: family name, Settings (admin only), Log out
 - Role-aware: items differ based on admin vs member route
 
 ### TopNav
+
 - Slot `announcement` (center) — system/family messages
 - Slot `actions` (right) — user status, claim/message
 
 ### Page Content
+
 - `ViewHeader` — title + subtitle + tool bar (tabs, weeknav, sort)
 - `CardGrid` — 3-column grid, Cards span columns via `cols` prop
 - `Card` — 1/2/3 col span, micro-layout per page
@@ -52,6 +56,7 @@
 - `Button` — consistent CTAs with `variant` (primary/secondary/ghost/danger) and `size` (sm/md/lg)
 
 ### Components (frontend/src/lib/components/)
+
 - `Sidebar.svelte`, `TopNav.svelte`, `Footer.svelte`
 - `ViewHeader.svelte`, `Card.svelte`, `CardGrid.svelte`
 - `Button.svelte`, `Accordion.svelte`
@@ -177,14 +182,12 @@
 - **Admin dashboard stat tiles**: added 4 gradient tiles (members / points / cash / chores done) reusing the child `.tiles`/`.tile` pattern + new `.tile-members`/`.tile-chores` colors, from a new `adminTiles` derived summing `summary.summaries`. Also fixed admin subtitle `Week of {YYYY-MM-DD}` → `Week of {DDMMYY}`.
 - **Check**: frontend `svelte-check` stays at 12 baseline errors. Note: frontend dev server on :2080 was not running when verified (proxy :3456 up).
 
-
-
 ### 2026-08-06 — Env Consolidation: `SERVER_IP`, `PROXY_URL`, and SvelteKit env only
 
 - **`config.ts` is proxy-only.** It now holds just the three ports (`FRONTEND_PORT`/`PROXY_PORT`/`PB_PORT` = `2080`/`3456`/`8090`). SvelteKit **never imports `config.ts`** — SvelteKit env vars are declared in `frontend/src/env.ts` and read via `$app/env/*`. Deleted the stale `config.js/.d.ts/.map` artifacts.
 - **`frontend/src/env.ts`** declares: `PROXY_URL` (public, default `http://127.0.0.1:3456`), `SERVER_IP` (public, default `192.168.1.225`), `PB_EMAIL`/`PB_PASSWORD` (private, defaults). `PUBLIC_PB_URL` removed (was the source of a startup crash when unset).
 - **Deleted `frontend/src/lib/server/env.ts`** (untracked). All server modules now `import { PROXY_URL } from '$app/env/public'` (`hono.ts`, `auth.ts`, `+layout.server.ts`, `+page.server.ts`, `preferences`, `join/[code]/[member]`). `admin/+page.server.ts` imports creds from `$app/env/private`.
-- **`frontend/src/lib/pocketbase.ts` (browser) + `pb-admin.ts`**: `PB_ENDPOINT = import.meta.env.PROD ? '/pb' : \`http://${SERVER_IP}:8090\``. (Fixed a bug where `pocketbase.ts` used `import.meta.env.SERVER_IP` → undefined.)
+- **`frontend/src/lib/pocketbase.ts` (browser) + `pb-admin.ts`**: `PB_ENDPOINT = import.meta.env.PROD ? '/pb' : \`http://${SERVER_IP}:8090\``. (Fixed a bug where `pocketbase.ts`used`import.meta.env.SERVER_IP` → undefined.)
 - **`proxy/src/env.ts`** (new): `PB_ENDPOINT = SERVER_IP ? \`http://${SERVER_IP}:8090\` : \`http://127.0.0.1:8090\``. Dev env is loaded by the proxy's `dev`/`seed` scripts via `tsx --env-file-if-exists=../.env` (pnpm has no `--env-file`; `NODE_OPTIONS='--env-file=…'` is rejected by Node). No `loadEnvFile` hack in code.
 - **Docker**: removed dead `ENV PB_ENDPOINT` from `Dockerfile`; `EXPOSE 3001` (was `3005 8090`); compose public port is `${PORT:-3001}:3001`, creds default to the code fallback, redundant `FRONTEND_PORT`/`PROXY_PORT` passthrough dropped; `entrypoint.sh` simplified (`PB_DATA=/app/pb_data`, `PORT=$FRONTEND_PORT`, no `:-` fallbacks).
 - **Frontend deps added** (were missing imports): `chart.js`, `qrcode`, `@hiseb/confetti`.
@@ -198,12 +201,14 @@
 - **Watch-out**: a careless `docker run` with a **fresh volume** (my first attempt, aborted in time) would have wiped the permanent PB data. Restore command is in RULES.md. Two containers (`pb-dev` :8090 and the docker app's internal PB :8091) currently **share the same host `./pb_data`** — be careful with both.
 
 ### 2026-08-06 — Added root `shared/` for cross-package code
+
 - Created `shared/timezone.ts` (moved from root `timezone.ts`). Imported by `frontend/src/routes/[fam]/[username]/+page.svelte`, `.../settings/+page.svelte`, and `proxy/src/index.ts`. Deleted the root `timezone.ts`.
 - Created `shared/pb/schema.ts` — single source of truth for the PocketBase schema + field builders (`SCHEMA_PLAN` ordered collection plan + `text/select/rel/...` helpers). Both `proxy/src/migrate.ts` (`ensureSchema`) and `proxy/scripts/seed.ts` now iterate `SCHEMA_PLAN`; kills the previous duplicated schema/field-helper definitions in both files.
 - Reason: `timezone.ts` and the PB schema are consumed by more than one package; `shared/` is the root location both can reach. Rule added to RULES.md: shared code lives in `shared/`, never inside `frontend/` or `proxy/`.
 - Note: proxy `tsc --noEmit` already errors on `.ts`-extension imports (`allowImportingTsExtensions` unset) — pre-existing, not from this change. Runtime uses esbuild (build) + tsx (dev), both of which bundle the `shared/` imports correctly. Verified `pnpm build` clean for both packages.
 
 ### 2026-08-07 — `@shared/*` import alias (path alias, not a pnpm package)
+
 - Moved `config.ts` → `shared/config.ts`. All `shared/` code is now imported as `@shared/*` instead of relative `../../shared/...`.
 - This is a **path alias**, not a pnpm workspace package (`@shared` alone isn't a valid npm package name; a real package would need `@scope/name`).
 - Proxy: `tsconfig.json` sets `paths: { "@shared/*": ["../shared/*"] }`; esbuild build adds `--alias:@shared=../shared`; tsx resolves via tsconfig paths. Proxy keeps `.ts` extensions (`@shared/config.ts`).
@@ -212,6 +217,7 @@
 - Docker note: runtime image only copies `frontend/build` + `proxy/dist` (both already bundle `shared/`), so `shared/` needn't be copied into the image.
 
 ### 2026-08-10 — Dev runtime cleanup (PB instances / containers)
+
 - **Removed** test container `31e74178b3f0` (`famdone-service-app-1`, host :3010 + :8092). It ran **PB 0.39.10** and bound the **same host `pb_data`** as pb-dev → two PBs (v0.25 + v0.39) writing one SQLite DB = corruption/lock risk (likely source of dev instability/login lag).
 - **Killed** 7 stale host `tsx watch` dev-proxy processes (Jul 28–Aug 5) + my throwaway 0.39 PBs.
 - **Reset pb_data**: stopped pb-dev, wiped `/home/threejjjs/development/famchamp/pb_data`, **recreated** pb-dev container (fresh v0.25 store) with `--automigrate=false`, recreated dev superuser `debug@famchamp.dev`/`debug123`.
@@ -219,6 +225,7 @@
 - **Desired end state (confirmed)**: `8090` = pb-dev (v0.25, single instance, automigrate off); `3001`+`8091` = PROD app `cffd636cc772` (kept, not live); PROD pb_data at `/data/coolify/.../pb_data` (separate from dev).
 
 ### 2026-08-10 — PB 0.25 → 0.39 migration (branch `feature/migrate-pocketbase`)
+
 - **Decision**: keep our own `migrate.ts` schema-as-code (API-driven, does data migrations + rule locking), NOT PocketBase's built-in automigrate (schema-only, generates version-specific migration files, and generates conflicting snapshots on upgraded stores). Disable PB automigrate in the runtime.
 - **Verified against 0.39.10** (throwaway binaries on `127.0.0.1:8098/8099`, temp data dirs):
   1. Fresh store: `migrate()` bootstraps all 14 `SCHEMA_PLAN` collections + every field migration cleanly (schema field builders are 0.39-compatible).
@@ -236,6 +243,7 @@
 - **Prod upgrade steps**: backup `pb_data` → run the 0.39 image (automigrate off) → run `migrate()` → verify no drift (`messages.createdAt`, `id.autogeneratePattern`).
 
 ### 2026-08-10 — Revert PB to 0.25.8 (backtrack from 0.39)
+
 - **Decision**: backtrack off the PocketBase 0.39 bump (introduced in commit `3725c54` via `ARG POCKETBASE_VERSION=0.39.10`) and work from a **0.25.8 baseline** in BOTH dev and prod, then migrate to 0.39 deliberately later.
 - Reverted `docker/Dockerfile` `POCKETBASE_VERSION` back to `0.25.8` (matches `docker/Dockerfile.dev`). Dev `pb-dev` and the docker app internal PB `:8091` share host `./pb_data`.
 - **Migration schema scripts (DO NOT FORGET)**: the schema single source of truth is `shared/pb/schema.ts` (`SCHEMA_PLAN`), iterated by `proxy/src/migrate.ts` (`ensureSchema`) and `proxy/scripts/seed.ts`. The chat `messages` / `chat_typing` collections are defined there **without** an explicit `createdAt` — they rely on PB auto-adding it on first create.
@@ -260,3 +268,124 @@
 - **Username convention (composite + handle):** PB `users.username` is the composite `{famSlug}:{handle}` for BOTH parents and children — globally unique (PB auth-identity needs a single-column unique index) even though the URL segment is per-family. `handle(name)` = lowercase, strips all non-`[a-z0-9]` (`"Jakey Boy"` → `jakeyboy`); `slugify()` (hyphenated) is kept only for fam slugs. URL segment = `handleOf(username)` (part after the last `:`) → `/{famSlug}/{handle}`. `name` keeps the raw display name, read from DB via `authRefresh` (not plucked into the cookie). Parent's handle captured at signup step 1 (`yourName`) → `username = famUsername(famSlug, handle(yourName))`; parents authenticate email+password and land on the fam dashboard `/{famSlug}` (not username-routed). Children authenticate via OTP → `authWithPassword(famUsername(...), derivePassword(famSlug, handle))`. Redirects in `login/+page.server.ts`, `[fam]/[username]/+page.server.ts` (parent + child branches) and `preferences/+page.server.ts` use `session.username` (the handle). Member-list URLs in `settings`, `[fam]/+page.svelte`, `[fam]/[username]/+page.svelte` build `/{famSlug}/{handleOf(m.username)}`. `handle`/`handleOf`/`famUsername` live in `shared/slugify.ts` (`@shared/slugify`).
 - **Restored intended multi-step signup** (from the guide, adapted to current OTP model): `/signup` steps — (1) `?/signup` familyName/yourName/email/password → create fam + parent (name=yourName, username=famUsername(famSlug, handle(yourName))) + settings, set `pb_token`; (2) `?/child` optional child → `issueAccess` returns `{ code, joinUrl }`; (3) show OTP join code + "Go to dashboard" link. Uses named actions + `use:enhance` (callback typed `any` to avoid the pre-existing canary `$types` SubmitFunction error).
 - **Typecheck:** frontend `svelte-check` stays at 20 pre-existing errors (no new in edited files).
+
+### 2026-08-21 — Stripe embedded checkout live + access-code gating (`fams.paymentMode`)
+
+- **Embedded Checkout fixes** (`frontend/src/lib/server/stripe.ts`): `ui_mode: 'embedded'` → `'embedded_page'` (Stripe deprecated `'embedded'`); removed `customer_creation: 'always'` — only valid in `payment` mode; subscription mode auto-creates the customer from `customer_email`. Client side already used `createEmbeddedCheckoutPage({ clientSecret })`.
+- **Secure-context gotcha:** embedded Checkout requires HTTPS or localhost. Dev host is reached over Tailscale IP via plain HTTP → checkout hangs silently (the `muid/guid/sid` JSON from `m.stripe.com` is Radar device fingerprinting, not an error; Stripe CLI websocket errors are benign). Fix: SSH port-forward `ssh -L 2080:localhost:2080` and use `http://localhost:2080`. Webhook listener is now a root script: `pnpm stripe:listen` (= `stripe listen -e customer.subscription.updated,customer.subscription.deleted,checkout.session.completed --forward-to http://127.0.0.1:2080/account/webhook`).
+- **Gating model:** the platform is gated. `fams.paymentMode` = `none | code | sub | canceled`; `fams.active` (bool) is the derived "usable now" flag, re-persisted by `ensureFamAccess()` when it drifts. New superuser-only `accesscodes` collection (all rules null like `otp`, so it lives in `migrate.ts` not `SCHEMA_PLAN`): `value` (unique, required), `name`, `duration` (months from entry date; 0=continuous), `expiry` (months after the code's own `createdAt`; 0=never), `active` failsafe, `createdAt`. Idempotently seeded with `dev123` / developer / 0 / 0.
+- **Core module** `frontend/src/lib/server/access.ts`: `addMonthsUTC`, `codeIsValid`, `computeFamAccess` (mode → `{disabled, reason}`; reasons `no_access|code_expired|code_disabled|subscription_inactive|canceled`), `ensureFamAccess(famId)` (reads fam+code, persists drifted `active`, returns `{fam, access}`), `applyAccessCode(famId, value)` (sets mode=code + accessCodeId + accessCodeEnteredAt). Wired into `[fam]/+layout.server.ts` load → `data.famAccess` (both roles).
+- **UI gating:** `[fam]/+layout.svelte` blurs `.page-content.locked` behind a non-blocking overlay card + admin TopNav announcement (sidebar/chat stay usable). Member kanban gate is **frontend-only by decision**: `[fam]/[username]/+page.svelte` derives `accessDisabled` from `page.data.famAccess?.disabled`, early-returns in `toggle()`, and renders three empty locked columns instead of the board. Signup takes an optional code (blank → gated fam; invalid → 400); settings has an Access card (`?/applyCode`). Webhooks maintain `paymentMode`: checkout completed / subscription sync → `sub`; subscription deleted → `canceled`.
+- **Bug found while verifying:** the live `fams` collection was missing the `active` bool entirely (schema.ts declared it; this PB predated it) → `active` writes were silently dropped. Fixed by adding it to `ensureFamFields()` (idempotent; runs outside `ensureSchema`'s early-return alongside `ensureAccessCodes`) and patching the live collection. Verified end-to-end against PB: fam with valid `dev123` → `active=true`; fam with empty mode → `active=false` (gated).
+- **PB curl gotcha:** single-record endpoints are `/api/collections/{name}/records/{id}` — omitting `/records/` returns PB's `"File not found."` 404 which masquerades as a missing record. The JS SDK always builds the correct path (an earlier "fams by-id 404" scare was a bad curl URL, not an app bug).
+
+### 2026-08-22 — Routes reshuffle: `[famSlug]`→`[fam]` merge, `/pricing` public, signup wizard with inline checkout
+
+- **Join route merged:** `[famSlug]/join/{username}` → `[fam]/join/{username}` (same URL shape, single `fam` param). Fixed `params.famSlug`→`params.fam` in join page files.
+- **Public pricing page:** `/subscriptions` → `/pricing` (untracked dir renamed). New `PricingPlans.svelte` component (reusable tier cards; props: `action`, `hideTrial`, `selected`, `error`, `onsubmit` handler). `/pricing` is public: logged-out "Choose monthly" → redirect `/signup?plan=monthly`; logged-in → existing embedded checkout.
+- **Signup wizard rewritten** as state machine (`fam → child → code → plan → done`):
+  - Step 1 (fam): family + parent creation (access code field REMOVED from here)
+  - Step 2 (child): add child or skip (unchanged)
+  - Step 3 (code): "Have an access code?" Apply (→ done) or Skip (→ plan)
+  - Step 4 (plan): `PricingPlans` embedded (`hideTrial=true`); selecting mounts embedded checkout INLINE (user authenticated); `?plan=X` from /pricing pre-highlights tier
+  - Step 5 (done): "Go to dashboard" — webhook flips `paymentMode=sub`, overlay lifts
+  - Server actions: `signup` (no code), `child` (unchanged), `access` (reuses `applyAccessCode`), `choose` (embedded checkout session)
+- **Webhook moved** to `/api/webhooks/stripe` (machine-to-machine endpoint belongs in `/api/*` namespace). `pnpm stripe:listen` forward URL updated.
+- **Links updated:** account "Change plan", settings "Plans", `stripe.ts` cancel_url → `/pricing`.
+- **Docs updated:** AGENTS.md routes, ARCHITECTURE.md (routes, Stripe flow, architecture diagram, project structure), MEMORY.md this entry.
+
+### 2026-08-21 — Platform feature flags (`platform` collection) + debug-gated revoke CTA
+
+- **`fams.featureFlags` deprecated** (removed from SCHEMA_PLAN, `Fam` type, live PB; field dropped). Replaced by a global **`platform`** collection: single record `label='global'`, json `flags`. Rules: list/view = `""` (public read — the one rule shape `col()` CAN express), create/update/delete = null (superuser-only) → created in `migrate.ts` (`ensurePlatform` + idempotent `seedPlatform`, like otp/accesscodes).
+- **Public load:** new root `frontend/src/routes/+layout.server.ts` exposes `page.data.platformFlags` on every page via `getPlatformFlags()` (`lib/server/platform.ts`, 10s TTL cache; `setPlatformFlag` for superuser writes).
+- **`debug` flag gates dev-only UI**: settings "Revoke code" CTA (`?/revokeCode`) — clears an applied code (paymentMode→none, accessCodeId/EnteredAt→'', active=false, fam re-gates). Server action checks the flag itself (hidden CTA is not the boundary). Settings' old per-fam `featureFlags.debugMode` Debug Tools card now keys off `page.data.platformFlags.debug`.
+- **`/admin` Platform Flags card** replaces the per-fam Debug column: `?/togglePlatformFlag` toggles any flag on the global record. Dev PB seeded with `debug: true`.
+- Also: `[fam]/+layout.svelte` exempts `/settings` from the paused blur overlay (admins can apply a code while gated) and `disabled`/`accessReason` are `$derived` so applying/revoking updates the overlay without a refresh.
+
+### 2026-08-22 — Settings reorg: Accordion groups, paymentMode-only billing, notices system
+
+- **Settings grouped into 4 Accordions** (Family / App / Invites / Billing). `Accordion.svelte` rewritten as a styled snippet wrapper + new self-contained `AccordionItem` (own open state, `$bindable`, `{@render children()}`) — no items-array API.
+- **Gating model simplified (user decision):** `fams.paymentMode` alone drives the FE (`none` = gated/paused; `code` valid = active; `sub` follows webhooks; `canceled` = gated). No `paused` field added; the local pause toggle was removed entirely. `fams.active` remains an internal derived flag maintained by `ensureFamAccess`/webhooks only.
+- **Access card:** shows countdown from `accessCodeEnteredAt` + code `duration` months (days when <1 month, "never expires" when duration=0) — settings load now fetches the `accesscodes` record (`data.accessCode`). Once a code is applied the input/Apply are hidden and **Revoke is always visible** (debug-flag requirement dropped); revoke just sets `paymentMode:'none'` + clears code fields (fam-scoped only — global code management is a platform-admin concern).
+- **Billing card** replaces `/account` (route deleted): sub → Change plan (/pricing) + Open billing portal (Stripe Customer Portal; dummy mode opens returned URL); code → Switch to subscription; none/canceled → Choose plan. Portal + checkout both return to `/{fam}?checkout=return`.
+- **Checkout-return welcome notice:** `[fam]/+page.svelte` `$effect` watches `?checkout=return` → fires a success notice via the new **notices store** (`lib/stores/notices.ts`: typed add/success/info/warning/error + auto-dismiss helper) rendered by global `<NoticeDialog />` in the root layout; query param scrubbed via `history.replaceState` so refresh doesn't re-fire.
+- Gotchas fixed along the way: duplicate NoticeDialog export; Svelte 5 forbids `class:` directives on components unless declared (Card got `selected` prop instead); second `<script>` block in a component is invalid.
+
+### 2026-08-22 — famSlug single source of truth + notices store to runes
+
+- **famSlug convention:** the URL param surfaced by `[fam]/+layout.server.ts` as top-level `data.famSlug` is canonical. Client code reads `page.data.famSlug` (fallback `?? page.params.fam` acceptable); server loads/actions under `[fam]` read `event.params.fam`. **Never copy it into local `$state`** — settings had a frozen-snapshot bug doing exactly that (now `$derived(page.data.famSlug ...)`). Nested `session.famSlug` removed (no consumers). Only exception with no URL param: signup `child` action resolves via DB (`fam?.slug || famId`) with a comment.
+- Sweep results: removed dead/mislabeled `const famId = $derived(page.params.fam)` in bonuses page; zero `params.famSlug` references remain post `[famSlug]→[fam]` merge.
+- **Notices store converted to Svelte 5 runes**: `lib/stores/notices.svelte.ts` (class with `$state<Notice[]>` list, add/remove/clear/success/info/warning/error + `addAutoDismissNotice`). Consumers: `notices.list` in `NoticeDialog.svelte`; no more svelte-store `writable`/`$notices` auto-subscription.
+
+### 2026-08-22 — famSlug single source of truth + docs Hono purge
+
+- **famSlug convention:** `[fam]/+layout.server.ts` returns top-level `data.famSlug` (from the URL param) — canonical. Client: `page.data.famSlug`; server under `[fam]`: `event.params.fam`. Never copy into local `$state` (settings had that frozen-snapshot bug). Nested `session.famSlug` removed; signup `child` action is the only DB-fallback case. Fixed platform-admin links pointing at nonexistent `/[slug]/admin`.
+- **Docs:** purged all stale Hono-proxy references from AGENTS.md + ARCHITECTURE.md (proxy deleted 2026-08-17); data-flow sections now describe SvelteKit services/`/api/*` routes. Remaining "Hono" mentions are struck-through historical build phases.
+
+### 2026-08-22 — Trial codes in PB, pause=cancel decision, settings reorder
+
+- **"Pause" = cancel (decision):** no separate pause concept. Pausing a plan means cancelling the card subscription via the billing portal; data is kept, resubscribing restores access (`paymentMode` webhook-driven). Copy lives in settings Account card.
+- **Trial codes now PB-backed:** `accesscodes.trialDays` (number). `resolveTrialDays()` (`stripe.ts`) is async — queries `accesscodes` for an active record with `value` match and `trialDays > 0`; static `TRIAL_CODES` map deleted. Seeded: `FAM3MONTHS` = 90 days. `ensureAccessCodeFields()` hardens existing installs; seeds unified in `seedAccessCodes()`.
+- **Settings accordion order:** Family (name/payday/**seasons**, opens by default via `<AccordionItem open>`) → Invites → **Account** (Access + Subscription) → App last.
+- **`clearLegacyCookies(cookies)`** added to `$lib/server/session.ts`; auth/join/logout use it instead of inline `device_token` deletes.
+
+### 2026-08-31 — All-time earnings + weekly trend chart (family root), lifetime wallet (member)
+
+- **New server stats service** `frontend/src/lib/server/services/stats.ts` (`familyStats(pb, famId)`, exposed as `s.stats.family(famId)`): scans full-history `completions` + `rewards` once, filtered/summed **on the server**, returns fixed-size `{ allTimePts, allTimeCash, allTimeChores, series }` (per-member weekly buckets `{weekStart, points, cash, chores}`). Server-side aggregation keeps the client payload constant-size regardless of history depth — this is the chosen scaling win for all-time totals + the retrospective graph.
+- **Totals definition (matches the app's own accounting, no double count):** lifetime points = points-type completions' chore values + **claimed** points rewards; lifetime cash = money-type completions' chore values + **claimed** cash rewards; chores = count of all completions. Unclaimed/requested rewards stay out of totals (they're the "to chase" list).
+- **Reading `weekly_history` NOT needed** — totals derive from live `completions`+`rewards` (both have `listRule: ""` in SCHEMA_PLAN = open to any authenticated session, which is why parent/child token reads already work today).
+- **Member wallet** (`[fam]/[username]/+page.svelte`): the existing `allTimeCash`/`allTimePoints` deriveds now include chore completion earnings (previously claimed-rewards only). Wallet UI restyled: big lifetime cells (cash "earned all time" + points "accrued") on top, then a "To collect from parent" divider + the existing pendingRewards list (unclaimed/requested/payday-locked) so members still see what to chase.
+- **Family root** (`[fam]/+page.svelte` + `+page.server.ts`): load now fetches `familyStats` (+ drops the removed templates). ViewHeader gained an optional default slot (`children?: Snippet`); the fam hero renders large all-time points | cash inside the header. Chores card shows "this week | total all-time" with `justify-content: space-between`. Templates card removed. Chart.js line graph "Over time" plots per-member lines with a Points/Cash/Chores tab; window starts at the current month and expands a month at a time up to 3 months based on data span (≤31d→1, ≤62d→2, else 3).
+- **Typecheck/build:** still 6 pre-existing canary errors only (none in edited files); `pnpm build` (adapter-node) clean. New code is picked up by HMR; no schema/migration change so no restart required.
+
+### 2026-08-31 — Bonus progress window: `completeBy` + `startDate` implemented
+
+- **Problem**: a standalone cash bonus (core reward with a points threshold) displayed progress differently on the child dashboard (current week → "0/500") vs the admin dashboard (cumulative since records began). Both were "correct" because `bonus_configs` had no way to scope tracking — with no `period` set, progress()/evaluateFam totalled _all_ completions, and the child dashboard forced `cfg.period || 'weekly'`.
+- **Fix**: added to `bonus_configs` (schema + `ensureBonusFields` idempotent field-add in migrate.ts, so existing installs upgrade without wiping): `completeBy` (select `unlimited|week|custom`), `startDate` (text), `completeByDate` (text). New shared helpers in `shared/timezone.ts`: `bonusWindow(cfg, payday, tz)` + `completionInWindow(c, {from,to})` ('' = unbounded side).
+- **Window semantics** (unified across server `progress()`/`evaluateFam()` and the child `thresholdGoals`): recurring configs (period set) keep their period window; standalone configs use `completeBy`:
+  - `unlimited` (default) → `[startDate, ∞]` cumulative
+  - `week` → current week `[weekStart, weekEnd]`
+  - `custom` → `[startDate, completeByDate]`
+  - No `startDate`/`completeBy` (legacy) → unbounded both sides (== the pre-fix admin behaviour, so existing cash bonuses stay correct).
+- **UI**: rewards modal gained a "Progress counts" group (shown when no period / not manual): `completeBy` radios (Unlimited | Until a date) + optional `completeByDate` date input + "Progress starts on" `startDate` date input. Creating from a template's `startMode` (Today/Next week) now sets `startDate` (Today = fam-tz today; Next week = +7 days). `openEditConfig`/`openCreateFromTemplate` default `startDate` to today, so saving an existing cash bonus re-scopes it to count from today (progress since the reward begins), not since records started.
+- **Server actions** (`rewards/+page.server.ts`): `createConfig`/`updateConfig`/`createFromTemplate` now persist `completeBy`/`startDate`/`completeByDate`.
+- **Typecheck/build**: `svelte-check` still at the 6 pre-existing canary errors (chores RewardType/Frequency, qrcode decl, settings unknown→string) — none in edited files; `pnpm build` (adapter-node) clean.
+- **Ops note**: the schema fields are added to live PB by `ensureBonusFields()` on next `migrateOnBoot` (dev server restart). A restart of the dev frontend is needed to apply the migration + load the new code.
+
+### 2026-08-22 — Graceful post-checkout activation (webhook-lag UX)
+
+- `[fam]/+layout.svelte` owns the `?checkout=return` flow (moved out of the fam page). On landing: if unlocked → welcome notice. If still gated (webhook lag) → `activating` state: paused overlay swaps to a spinner card ("Activating your subscription…"), TopNav paused announcement suppressed, and `invalidateAll()` revalidates every 1.5s (max 12 tries). The `$effect` watching `activating && !disabled` cancels polling and fires "Subscription active!" the instant the gate lifts; exhaustion degrades to a refresh-hint warning.
+- Mechanics: `pollToken` guards against stale loops; `history.replaceState` scrubs the query cosmetically + `returnHandled` flag prevents double-handling. Webhook remains the sole source of truth for `paymentMode`/`active`.
+- **Upgrade (same day): activation is event-driven, not polled.** `startActivating` subscribes the browser PB client to its own `fams` record (`pb.collection('fams').subscribe(famId)` — allowed by viewRule `id = @request.auth.famId`). Webhook (superuser) writes → PB SSE push → single `invalidateAll()`; unlock `$effect` stops the subscription + fires success. 20s timer kept purely as a degrade-gracefully fallback. Rejected: onComplete-as-source-of-truth (untrusted); optional future hardening = server-side session verification on return.
+
+### 2026-08-22 — Platform admin: access-code management + richer stats
+
+- `/admin` extended (same route/embedded login — env-var check + `platform_session` cookie, no PB auth or hooks involved):
+  - **Access Codes card**: issue codes via `?/createCode` — blank value auto-generates `XXXX-XXXX` (unambiguous charset); fields name/duration/expiry/trialDays (`trialDays > 0` = Stripe trial code). Table shows type badge, active/disabled, **used-by count** (from fams.accessCodeId map), copy-to-clipboard. `?/toggleCode` flips active; `?/deleteCode` **blocked while in use** (must disable).
+  - **Overview**: added chores completed (completions length), active subs (`paymentMode='sub'`), paused/gated (`!active || none/canceled`), active codes. Families table gained plan+paused badges.
+  - All actions guarded by `requirePlatform(cookies)`; data still via `pbAdmin` superuser facade.
+- Note: `svelte-kit sync` needed after changing load return shapes or `$types` staleness doubles the error count.
+- **/admin login pattern:** action sets `platform_session` cookie + returns `{success:true}`; the form's `use:enhance` callback flips a local `authed` view state — no redirect, no reliance on inline invalidation or fetch-time Set-Cookie behavior (which proved flaky in-browser despite curl proving both response paths carried it). Cookie still covers subsequent loads; load errors surface as `data.loadError` on the login card instead of silently masquerading as logged-out.
+- **Platform-admin auth via hooks:** `hooks.server.ts` resolves `locals.platformAdmin` from the `platform_session` cookie (=== 'authenticated') on every request; `/admin` load/actions consume `event.locals.platformAdmin` (`requirePlatform(event)`) instead of raw cookie reads. Same central pattern as `pb_token` → `locals.user`.
+- **`isDummyStripe` removed:** real test keys made every dummy branch dead code — and the webhook's `|| !signature` fallback accepted UNSIGNED events (forgeable access grants). Signature is now mandatory (400 without it); settings' simulated endSubscription/portal branches deleted. Dev verification stays via stripe-cli signed events (`pnpm stripe:listen`).
+- **Platform-admin auth hardened (supersedes the constant-cookie version):** `/admin` login now does a real `_superusers.authWithPassword` via PB; the minted superuser JWT goes in `platform_session` (`setPlatformSession` in session.ts). `hooks.server.ts` deviates on `/admin`: verifies the token with `_superusers.authRefresh` → `locals.platformAdmin` (forged values fail authRefresh and get cleared); fam-user pb_token flow skipped on that route. FINAL login shape (user-amended, working): action returns `{success:true}` (no redirect); form's enhance callback does `goto('/admin', { invalidateAll: true })` on success — forcing the load re-run with the fresh cookie; view branches on `data.authenticated`. Verified: real token renders dashboard, forged cookie gets login.
+- **use:enhance redirect gotcha (session-wide lesson):** action-thrown redirects surface as `result.type === 'redirect'` in the RESOLVE callback — handlers checking only `'success'` silently drop them (bit /admin login, pricing choose, and settings billingPortal). Shared fix: `lib/forms.ts` → `handleResult(handler?)` factory follows redirects via `goto`, delegates the rest to the handler or default `update()`. Use it for any form whose action can throw a redirect. Also: enhance is two-stage — `{result}` only exists in the resolve fn, not the submit params (was mis-handled in pricing/signup handlers).
+
+### 2026-09-02 — Count-type reward: Target Chore + TODO (period semantics)
+
+- **Feature:** Count-type rewards now support pinning to a single assigned chore (`bonus_configs.targetChoreId`). On the fam-admin Rewards modal (Step 2), when Type = "Count - (chores)" a **Target Chore** dropdown appears after the Target Value field — options are the selected member's assigned (non-todo) chores, default "All Chores". Evaluation (`bonuses.evaluateFam`) + display (`bonuses.progress`, dashboard `thresholdGoals`) now filter Count progress to only that chore's completions when set. Platform-level template form only needed the relabeled "Count - (chores)" — no target chore at template level. Pocket-money checkbox removed from the platform template form (only the auto-created per-child droplet needs it).
+- **TODO (logic, not yet fixed):** Count rewards with a `period` (e.g. weekly) reset + re-earn each period like a points/cash threshold. Once a Count reward is pinned to a target (or all chores), the intended semantics are ambiguous: should it be **continuous** (unlimited, measured once since startDate until reached) or **limited to the period window** (re-earn each week)? Currently it follows the periodic-reset behavior. Decide whether Count rewards should ignore `period` (behave as standalone/unlimited since startDate) and adjust `bonusWindow`/evaluation accordingly. Not attempted in this change.
+
+### 2026-09-11 — Shared-device PIN switching (a computer shared by siblings)
+
+- **Problem:** a single `pb_token` cookie meant joining kid B on the family computer silently logged out kid A; every hand-off needed a fresh parent-issued OTP. Design note: `shared-device.md` (decisions + flows).
+- **Model — the PIN is NOT a login:** it _selects_ among sessions that already exist on the device (`pb_token_<childId>` per child + `pb_active` naming the current one). PIN alone mints nothing on a fresh device; a stolen cookie alone selects nothing. Threat model = sibling mischief; devtools-level bypass explicitly accepted (data is family-scoped, toggles reversible).
+- **Sessions (`session.ts` + `hooks.server.ts`):** children store one httpOnly cookie per account (`pb_token_<id>`, 5d TTL) + `pb_active`. Resolution order: `pb_active` first, then legacy `pb_token` (parents + pre-feature children). Parent login/join clears `pb_active` → supersedes kid mode; kid switches shadow (don't delete) a parent session; `/logout` clears everything. Per-profile removal = picker ✕ → `POST /api/device/remove` (device-local cookie surgery, no session required).
+- **`pins` collection** (superuser-only rules like `otp`): plaintext 3-digit PIN, deliberately parent-recoverable (Q1: View). All access server-side with session-role checks — kids can never read siblings' pins via PB rules. Created on boot via `ensurePins({})` in the always-run migrate path (existing installs — no DB wipe), plus `settings.lockMins` via `SCHEMA_PLAN` + `ensureSettingsFields`.
+- **Endpoints:** `POST /api/switch-user {userId, pin}` — cookie-presence gate, superuser PIN verify, in-memory rate limit (5 fails → 30s), **self-healing**: expired device tokens re-mint via the derived password (server-only) instead of forcing a re-join. `POST /api/pins` — `set` (first-time), `change` (needs current), `ensure` (set-if-missing, used by the join wizard so joining a _second_ shared device doesn't clash with an existing PIN).
+- **Picker (`SharedPicker` component)** — one UI everywhere: top-nav colour-dot (any session), idle-lock overlay, and standalone `/{fam}/switch` landing (fam layout redirects there when kid cookies exist but none is active; join pages excluded from the redirect; `+page.server.ts` sends active sessions home). PIN required on every pick incl. "resume" (deliberate-select property). Standalone footer links: join with a code + parent login.
+- **Join wizard (`JoinPinFlow`):** after OTP redeem → "shared with siblings?" → PIN setup (skipped on "no"), **forced when the device already has other kid sessions**; then straight to the kid's dashboard. All three child join routes updated (root `/join`, `/{fam}/join`, `/{fam}/join/{username}`); parents keep the single-session flow.
+- **Idle lock (client, `lib/client/lock.ts`):** `localStorage[fam_last_active]` written on click/key/touch (throttled 10s) + force-written on `pagehide` → survives browser close/sleep/restart (next launch compares elapsed; live 15s interval mid-session). Default **10 min** (user-set: default 10, not 2-3); parent-adjustable `Off / 2 / 10` in Settings → Family → **Shared computer**. Children only; tab-switches don't lock; two tabs share the timestamp so the active tab arbitrates.
+- **Parent/child PIN UI:** Settings → Invites → All members → **PIN** per member (reveal + give-a-new-PIN modal); child Preferences → **My PIN** (set, or change with current PIN; "forgot? parent can read it out").
+- **Typecheck/build:** `svelte-check` still 4 pre-existing canary errors only (chores RewardType/Frequency ×3, qrcode decl — files untouched by this change); prettier run over touched files. Migration applies on next dev-server boot (migrateOnBoot) — no DB wipe; hooks changes need the dev server restart (auto).
+- **Caveats:** legacy single-cookie child sessions work but don't appear in the picker until re-join; multi-tab concurrency accepted (single-tab-norm on family desktops); `shared-device.md` records the settled open questions (view-not-reset, optional-at-join, no parent switcher, straight-to-dashboard, no cross-family).

RULES.md

@@ -1,4 +1,4 @@
-# FamChore v2 — Rules
+# FamDone v2 — Rules
 
 ## Auth
 - Every collection query includes `famId = @request.auth.famId` filter

TODO.md

@@ -1,13 +1,22 @@
-Items:
+# FamDone — TODO
 
-- The hono workhorse - see notes later
+(Completed work is tracked in MEMORY.md / git history.)
 
-## the hono workhorse
+## Open / next features
 
-**Actively used (the workhorse):**
+### Payments / billing
+- [ ] Prod webhook secret wiring in Stripe Dashboard (dev uses CLI secret)
+- [ ] Optional hardening: server-side session verification on checkout return (`checkout.sessions.retrieve` reusing webhook apply logic) — only if SSE/webhook lag ever becomes a real problem (currently event-driven via PB realtime, see MEMORY 2026-08-22)
 
-- **Admin reads/writes** via `hono.admin.*` — used heavily by the child kanban (`+page.server.ts` load: members, chore-templates, assigned-chores, weekly-summary, fam, rewards, bonus-configs, completions, settings), the **bonuses** page (17 calls), **ledger** (6), **preferences** (2), **fam dashboard** (4), plus settings `complete-week` and `debug/generate-data`.
-- **Member actions** via `memberApi.*` + direct `/api` fetches — `toggleCompletion`, `claimReward`, `payday`, `/api/members/me`, `/api/members/my-chores` (both SSR and browser).
-- **Direct client calls** — the chores page hits `/api/admin/:famId/assigned-chores` directly; the kanban hits `/api/members/me`.
+### Platform admin
+- [x] Platform-admin UI shipped on `/admin`: issue codes (auto-gen XXXX-XXXX values), enable/disable/delete (delete blocked while in use), usage counts, trial vs access typing; stats now include chores completed / active subs / paused-gated / active codes; families table shows plan+paused state. Remaining polish: table link duplication.
+- [ ] `/admin` Families table: name link and "View" are duplicates after the broken-link fix — tidy up.
 
-We will tackle this as the next feature `feature/migrate-hono-to-kit`
+### App / UX
+- [ ] Signup wizard: `?plan=` param only pre-highlights the tier at step 4 — confirm whether it should auto-scroll/pulse instead
+- [ ] Data card placeholder ("Download CSV / Delete Family coming soon")
+- [ ] Parent invite ("Invite Parent") is an alert stub
+
+### Infra / deferred
+- [ ] WhatsApp notifications
+- [ ] Weekly CRON (`/api/weekly-cron`, Coolify) — settlement stays manual via complete-week/simulateEow

docker-compose.yaml

@@ -1,6 +1,6 @@
 name: famdone-service
 services:
-  famdone-service:
+  app:
     build:
       context: .
       dockerfile: docker/Dockerfile
@@ -13,17 +13,3 @@ services:
       PB_EMAIL: ${PB_EMAIL}
       PB_PASSWORD: ${PB_PASSWORD}
     restart: unless-stopped
-    labels:
-      - "traefik.enable=true"
-      # ... other labels ...
-
-      # Router for domain 1
-      - "traefik.http.routers.famdone-service-domain1.rule=Host(`famdone.walthamstow.xyz`)"
-      - "traefik.http.routers.famdone-service-domain1.service=famdone-service"
-
-      # Router for domain 2
-      - "traefik.http.routers.famdone-service-domain2.rule=Host(`famdone.cycocyan.xyz`)"
-      - "traefik.http.routers.famdone-service-domain2.service=famdone-service"
-
-      # Single service
-      - "traefik.http.services.famdone-service.loadbalancer.server.port=80"

frontend/icons/check-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

frontend/package.json

@@ -30,8 +30,12 @@
 	},
 	"dependencies": {
 		"@hiseb/confetti": "^2.0.2",
+		"@lucide/svelte": "^1.34.0",
+		"@stripe/stripe-js": "^9.13.0",
 		"chart.js": "^4.4.0",
 		"pocketbase": "^0.27.0",
-		"qrcode": "^1.5.4"
+		"qrcode": "^1.5.4",
+		"resend": "^6.25.0",
+		"stripe": "^22.5.0"
 	}
 }

frontend/src/app.d.ts

@@ -5,6 +5,10 @@ declare global {
 		interface Locals {
 			user: SessionUser | null;
 			pbToken: string | null;
+			// Platform-admin (superuser dashboard) session — set from the
+			// platform_session cookie in hooks.server.ts. Separate from the
+			// fam user session; only /admin consumes it.
+			platformAdmin: boolean;
 		}
 	}
 }

frontend/src/env.ts

@@ -1,13 +1,14 @@
 import { defineEnvVars } from '@sveltejs/kit/hooks';
 
 // Default when the env var isn't set, so a missing value never crashes startup.
-const withDefault = (value: string) => ({
+const withDefault = (value: string) =>
+	({
 		'~standard': {
 			version: 1,
 			vendor: 'famchamp',
 			validate: (v: unknown) => ({ value: typeof v === 'string' && v ? v : value })
 		}
-} as const);
+	}) as const;
 
 export const variables = defineEnvVars({
 	SERVER_IP: { public: true, schema: withDefault('192.168.1.225') },
@@ -16,5 +17,18 @@ export const variables = defineEnvVars({
 	PB_PASSWORD: { public: false, schema: withDefault('debug123') },
 	// Server-only secret used to derive a child member's PB password from
 	// (famSlug + username). Never expose client-side. OTP is the access gate.
-	MEMBER_SECRET: { public: false, schema: withDefault('famchamp-member-secret') }
+	MEMBER_SECRET: { public: false, schema: withDefault('famchamp-member-secret') },
+	// Stripe (server-only). Keys left blank until a real account is connected.
+	STRIPE_SECRET_KEY: { public: false, schema: withDefault('') },
+	// Stripe webhook signing secret (prod/dashboard endpoint).
+	STRIPE_WEBHOOK_SECRET: { public: false, schema: withDefault('') },
+	// Stripe CLI webhook signing secret (local dev only — overrides the
+	// dashboard secret when set, so `stripe listen` works without touching prod).
+	STRIPE_CLI_WEBHOOK_SECRET: { public: false, schema: withDefault('') },
+	STRIPE_PRICE_TRIAL: { public: false, schema: withDefault('') },
+	STRIPE_PRICE_MONTHLY: { public: false, schema: withDefault('') },
+	STRIPE_PRICE_YEARLY: { public: false, schema: withDefault('') },
+	// Stripe publishable key (client-side for Checkout redirect).
+	PUBLIC_STRIPE_PUBLISHABLE_KEY: { public: true, schema: withDefault('') },
+	RESEND_API: { public: false, schema: withDefault('') }
 });

frontend/src/hooks.server.ts

@@ -1,6 +1,17 @@
 import type { Handle } from '@sveltejs/kit';
 import { createPbClient } from '$lib/server/pocketbase';
-import { SESSION_COOKIE, setSessionCookie, clearSessionCookie } from '$lib/server/session';
+import {
+	SESSION_COOKIE,
+	ACTIVE_COOKIE,
+	childSessionCookie,
+	setSessionCookie,
+	clearSessionCookie,
+	setChildSessionCookie,
+	setActiveChild,
+	clearActiveChild,
+	PLATFORM_SESSION_COOKIE,
+	clearPlatformSession
+} from '$lib/server/session';
 import type { SessionUser } from '$lib/server/types';
 import { handleOf } from '@shared/slugify';
 import { migrateOnBoot } from '$lib/server/migrate-boot';
@@ -8,39 +19,107 @@ import { migrateOnBoot } from '$lib/server/migrate-boot';
 // Run the PB schema migration once at server boot (idempotent).
 void migrateOnBoot();
 
-export const handle: Handle = async ({ event, resolve }) => {
-	event.locals.user = null;
-	event.locals.pbToken = null;
-
-	const token = event.cookies.get(SESSION_COOKIE);
-
-	if (token) {
-		const pb = createPbClient(token);
-		try {
-			// authRefresh() does two jobs in one call:
-			//   1. Verifies the token (PB JWTs can't be checked offline — the
-			//      signing secret is per-record and never leaves PB), so this
-			//      round trip IS the verification step.
-			//   2. Returns the current record — the only way to get
-			//      name/role/famId, since PB doesn't embed custom fields in the
-			//      token itself.
-			const { record, token: freshToken } = await pb.collection('users').authRefresh();
-
-			event.locals.user = {
+function sessionFrom(record: any, freshToken: string) {
+	return {
 		id: record.id,
 		name: record.name || record.username || '',
 		username: handleOf(record.username || ''),
 		role: record.role || 'parent',
 		famId: record.famId,
-				color: record.color || ''
-			} satisfies SessionUser;
-			event.locals.pbToken = freshToken;
+		color: record.color || '',
+		pattern: record.pattern || '',
+		themeSize: record.themeSize || '',
+		themeOpacity: record.themeOpacity || '',
+		partyEmoji: record.partyEmoji || '',
+		token: freshToken
+	} satisfies SessionUser & { token: string };
+}
 
+export const handle: Handle = async ({ event, resolve }) => {
+	event.locals.user = null;
+	event.locals.pbToken = null;
+	event.locals.platformAdmin = false;
+
+	// Platform-admin routes authenticate via the superuser JWT in
+	// platform_session, verified against PB (authRefresh) — the cookie value
+	// is a real signed token, so forging it gains nothing.
+	if (event.url.pathname.startsWith('/admin')) {
+		const suToken = event.cookies.get(PLATFORM_SESSION_COOKIE);
+		if (suToken) {
+			try {
+				await createPbClient(suToken).collection('_superusers').authRefresh();
+				event.locals.platformAdmin = true;
+			} catch {
+				// Expired/revoked/forged token — drop it and treat as logged out.
+				clearPlatformSession(event.cookies);
+			}
+		}
+		return resolve(event);
+	}
+
+	// Shared-device sessions: `pb_active` names the child whose cookie is the
+	// current session. Resolved FIRST so a kid switch on a family computer
+	// supersedes any shadowed single pb_token (parent) session.
+	const activeId = event.cookies.get(ACTIVE_COOKIE);
+	if (activeId) {
+		const childToken = event.cookies.get(childSessionCookie(activeId));
+		if (!childToken) {
+			// Stale active pointer (cookie removed) — clean it up and fall through.
+			clearActiveChild(event.cookies);
+		} else {
+			try {
+				const pb = createPbClient(childToken);
+				// authRefresh() does two jobs in one call:
+				//   1. Verifies the token (PB JWTs can't be checked offline — the
+				//      signing secret is per-record and never leaves PB).
+				//   2. Returns the current record — the only way to get
+				//      name/role/famId, since PB doesn't embed custom fields.
+				const { record, token: freshToken } = await pb.collection('users').authRefresh();
+				if (record.role === 'child') {
+					const session = sessionFrom(record, freshToken);
+					event.locals.user = session;
+					event.locals.pbToken = session.token;
+					if (freshToken !== childToken) {
+						setChildSessionCookie(event.cookies, activeId, freshToken);
+					}
+					// Sliding expiry: pb_active has the same 5-day maxAge as the
+					// token cookies but was previously never re-set, so it aged
+					// out 5 days after join/switch despite daily use. Re-set it
+					// on every authenticated request to keep it alive.
+					setActiveChild(event.cookies, activeId);
+					return resolve(event);
+				}
+				console.error(
+					`[diag] hooks child wrong-role activeId=${activeId} role=${record.role} path=${event.url.pathname}`
+				);
+			} catch (e) {
+				// Expired/revoked/malformed — leave the cookie; the picker switch
+				// re-mints it server-side. Fall through to the single session.
+				console.error(
+					`[diag] hooks child authRefresh-fail activeId=${activeId} path=${event.url.pathname} err=${e instanceof Error ? e.message : e}`
+				);
+			}
+		}
+	}
+
+	// Single session: pb_token JWT (parents, or children from before the
+	// multi-session scheme) → authRefresh → locals.user.
+	const token = event.cookies.get(SESSION_COOKIE);
+	if (token) {
+		const pb = createPbClient(token);
+		try {
+			const { record, token: freshToken } = await pb.collection('users').authRefresh();
+			const session = sessionFrom(record, freshToken);
+			event.locals.user = session;
+			event.locals.pbToken = session.token;
 			if (freshToken !== token) {
 				setSessionCookie(event.cookies, freshToken);
 			}
-		} catch {
+		} catch (e) {
 			// Expired, malformed, or revoked — drop it and treat as logged out.
+			console.error(
+				`[diag] hooks single authRefresh-fail path=${event.url.pathname} err=${e instanceof Error ? e.message : e}`
+			);
 			clearSessionCookie(event.cookies);
 		}
 	}

frontend/src/lib/assets/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>

frontend/src/lib/client/api.ts

@@ -20,8 +20,11 @@ async function memberFetch<T = unknown>(
 }
 
 export const memberApi = {
-    async toggleCompletion(famId: string, assignedChoreId: string, date: string) {
-        return memberFetch('POST', '/api/completions/toggle', { assignedChoreId, date });
+    async toggleCompletion(famId: string, assignedChoreId: string, date: string, completedAt?: string) {
+        return memberFetch('POST', '/api/completions/toggle', { assignedChoreId, date, completedAt });
+    },
+    async createTodo(name: string) {
+        return memberFetch<{ record: unknown }>('POST', '/api/todos', { name });
     },
     async claimReward(famId: string, rewardId: string) {
         return memberFetch('POST', `/api/members/rewards/${rewardId}/claim`);

frontend/src/lib/client/lock.ts

@@ -0,0 +1,53 @@
+// Shared-device idle lock (client-side). Tracks the last interaction
+// timestamp in localStorage and exposes "should the app return to the profile
+// picker?" checks. localStorage (not cookies/beacons) so the timestamp
+// survives browser close, sleeps and restarts — the pagehide write is
+// synchronous and can't be lost on tab close.
+
+const KEY = 'fam_last_active';
+const WRITE_THROTTLE_MS = 10_000;
+
+let installed = false;
+let lastWrite = 0;
+
+export function recordActivity(force = false) {
+	if (typeof localStorage === 'undefined') return;
+	const now = Date.now();
+	if (!force && now - lastWrite < WRITE_THROTTLE_MS) return;
+	try {
+		localStorage.setItem(KEY, String(now));
+		lastWrite = now;
+	} catch {
+		/* private mode etc. — the lock simply has no data yet */
+	}
+}
+
+export function lastActiveAt(): number {
+	if (typeof localStorage === 'undefined') return 0;
+	const raw = localStorage.getItem(KEY);
+	const n = raw ? Number(raw) : 0;
+	return Number.isFinite(n) && n > 0 ? n : 0;
+}
+
+export function lockDue(lockMins: number): boolean {
+	if (!lockMins || lockMins <= 0) return false;
+	const last = lastActiveAt();
+	if (!last) return false;
+	return Date.now() - last > lockMins * 60_000;
+}
+
+export function installLockTracking() {
+	if (installed || typeof document === 'undefined') return;
+	installed = true;
+	const on = () => recordActivity();
+	document.addEventListener('click', on);
+	document.addEventListener('keydown', on);
+	document.addEventListener('touchstart', on);
+	window.addEventListener('pagehide', () => recordActivity(true));
+}
+
+// Fresh activation (join wizard, picker switch) — write now so the just-opened
+// session doesn't instantly trip the mount-time lock check.
+export function resetClock() {
+	recordActivity(true);
+}

frontend/src/lib/client/shared-device.ts

@@ -0,0 +1,32 @@
+// Per-device "this is a shared computer" flag. localStorage is the source of
+// truth (shared-ness is a property of THIS browser, not the family — a DB
+// flag would force PIN mode on every device including a parent's phone).
+// A plain cookie mirror lets server loads see it too (localStorage never
+// reaches the server). Neither is a security boundary: the PIN + device
+// session cookies remain the actual gate (see shared-device.md).
+const LS_KEY = 'fam_shared_device';
+const COOKIE = 'fam_shared_device';
+
+export function isSharedDevice(): boolean {
+	if (typeof localStorage === 'undefined') return false;
+	try {
+		return localStorage.getItem(LS_KEY) === '1';
+	} catch {
+		return false;
+	}
+}
+
+export function setSharedDevice(on: boolean) {
+	try {
+		if (on) localStorage.setItem(LS_KEY, '1');
+		else localStorage.removeItem(LS_KEY);
+	} catch {
+		/* private mode etc. — flag simply doesn't persist */
+	}
+	if (typeof document !== 'undefined') {
+		document.cookie =
+			on
+				? `${COOKIE}=1; path=/; max-age=31536000; SameSite=Lax`
+				: `${COOKIE}=; path=/; max-age=0; SameSite=Lax`;
+	}
+}

frontend/src/lib/components/Accordion.svelte

@@ -1,36 +1,19 @@
 <script lang="ts">
-	let { items }: { items: { title: string; content: any }[] } = $props();
-	let openIndex = $state<number | null>(null);
+	import type { Snippet } from 'svelte';
+
+	// Styled wrapper — group AccordionItem children inside.
+	let { children, defaultOpen = false }: { children: Snippet; defaultOpen?: boolean } = $props();
 </script>
 
-<div class="accordion">
-	{#each items as item, i}
-		<div class="accordion-item" class:open={openIndex === i}>
-			<button class="accordion-trigger" onclick={() => openIndex = openIndex === i ? null : i}>
-				<span>{item.title}</span>
-				<span class="accordion-arrow">{openIndex === i ? '▾' : '▸'}</span>
-			</button>
-			{#if openIndex === i}
-				<div class="accordion-body">
-					{@render item.content()}
-				</div>
-			{/if}
-		</div>
-	{/each}
+<div class="accordion" class:default-open={defaultOpen}>
+	{@render children()}
 </div>
 
 <style>
-	.accordion { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
-	.accordion-item { border-bottom: 1px solid #f3f4f6; }
-	.accordion-item:last-child { border-bottom: none; }
-	.accordion-trigger {
-		display: flex; justify-content: space-between; align-items: center;
-		width: 100%; padding: 0.7rem 1rem;
-		background: #fafafa; border: none;
-		font-size: 0.9rem; font-weight: 500; color: #374151;
-		cursor: pointer; text-align: left;
+	.accordion {
+		border: 1px solid #e5e7eb;
+		border-radius: 8px;
+		overflow: hidden;
+		background: #fff;
 	}
-	.accordion-trigger:hover { background: #f3f4f6; }
-	.accordion-arrow { font-size: 0.8rem; color: #9ca3af; }
-	.accordion-body { padding: 1rem; }
 </style>

frontend/src/lib/components/AccordionItem.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		title,
+		icon,
+		open = $bindable(false),
+		children
+	}: { title: string; icon?: Snippet; open?: boolean; children: Snippet } = $props();
+</script>
+
+<div class="accordion-item" class:open>
+	<button class="accordion-trigger" onclick={() => (open = !open)} aria-expanded={open}>
+		<span class="accordion-title">
+			{#if icon}
+				<span class="accordion-icon">{@render icon()}</span>
+			{/if}
+			<span>{title}</span>
+		</span>
+		<span class="accordion-arrow" class:rotated={open}><ChevronDown /></span>
+	</button>
+	{#if open}
+		<div class="accordion-body">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.accordion-item {
+		border-bottom: 1px solid #f3f4f6;
+	}
+	.accordion-item:last-child {
+		border-bottom: none;
+	}
+	.accordion-trigger {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: 0.7rem 1rem;
+		background: #fafafa;
+		border: none;
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: #374151;
+		cursor: pointer;
+		text-align: left;
+	}
+	.accordion-trigger:hover {
+		background: #f3f4f6;
+	}
+	.accordion-title {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.accordion-icon {
+		display: inline-flex;
+		align-items: center;
+		color: #6366f1;
+	}
+	.accordion-icon :global(svg) {
+		width: 1.05em;
+		height: 1.05em;
+	}
+	.accordion-arrow {
+		display: inline-flex;
+		align-items: center;
+		color: #9ca3af;
+		transition: transform 0.15s ease;
+		transform: rotate(-90deg);
+	}
+	.accordion-arrow.rotated {
+		transform: rotate(0deg);
+	}
+	.accordion-arrow :global(svg) {
+		width: 1.1em;
+		height: 1.1em;
+	}
+	.accordion-body {
+		padding: 1rem;
+	}
+</style>

frontend/src/lib/components/AuthShell.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
-	let { title, subtitle, children }: {
+	import FamDone from './FamDone.svelte';
+
+	let {
+		title,
+		subtitle,
+		children,
+		secondary
+	}: {
 		title: string;
 		subtitle?: string;
 		children?: any;
+		secondary?: any;
 	} = $props();
 </script>
 
 <main class="auth">
-	<a class="brand" href="/">FamChore</a>
+	<a class="brand" href="/"><FamDone /></a>
 	<div class="card">
 		<h1>{title}</h1>
 		{#if subtitle}
@@ -15,6 +23,9 @@
 		{/if}
 		{@render children?.()}
 	</div>
+	{#if secondary}
+		<div class="card secondary">{@render secondary?.()}</div>
+	{/if}
 </main>
 
 <style>
@@ -26,7 +37,10 @@
 		justify-content: center;
 		padding: 2rem 1rem;
 		background: linear-gradient(135deg, #eef2ff 0%, #ffffff 55%, #eef2ff 100%);
-		font-family: system-ui, -apple-system, sans-serif;
+		font-family:
+			system-ui,
+			-apple-system,
+			sans-serif;
 		color: #1f2937;
 	}
 	.brand {
@@ -55,7 +69,12 @@
 		font-size: 0.9rem;
 		line-height: 1.5;
 	}
+	.card.secondary {
+		margin-top: 1rem;
+	}
 	@media (max-width: 480px) {
-		.card { padding: 1.5rem; }
+		.card {
+			padding: 1.5rem;
+		}
 	}
 </style>

frontend/src/lib/components/Button.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
-	let { variant = 'primary', size = 'md', href, onclick, children, ...rest }: {
-		variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+	let {
+		variant = 'primary',
+		size = 'md',
+		href,
+		onclick,
+		children,
+		...rest
+	}: {
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'purple';
 		size?: 'sm' | 'md' | 'lg';
 		href?: string;
 		onclick?: () => void;
@@ -10,7 +17,7 @@
 </script>
 
 {#if href}
-	<a href={href} class="btn btn-{variant} btn-{size}" {...rest}>
+	<a {href} class="btn btn-{variant} btn-{size}" {...rest}>
 		{@render children?.()}
 	</a>
 {:else}
@@ -28,22 +35,85 @@
 		border-radius: 6px;
 		cursor: pointer;
 		text-decoration: none;
-		transition: background 0.15s, border-color 0.15s;
+		transition:
+			background 0.15s,
+			border-color 0.15s;
 		border: 1px solid transparent;
 	}
-	.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
-	.btn-md { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
-	.btn-lg { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
+	.btn-sm {
+		padding: 0.3rem 0.6rem;
+		font-size: 0.8rem;
+	}
+	.btn-md {
+		padding: 0.45rem 0.9rem;
+		font-size: 0.85rem;
+	}
+	.btn-lg {
+		padding: 0.6rem 1.2rem;
+		font-size: 0.95rem;
+	}
 
-	.btn-primary { background: #4338ca; color: #fff; border-color: #4338ca; }
-	.btn-primary:hover { background: #3730a3; }
+	.btn-primary {
+		background: #4338ca;
+		color: #fff;
+		border-color: #4338ca;
+	}
+	.btn-primary:hover {
+		background: #3730a3;
+	}
+	.btn-primary:disabled {
+		background: #a5b4fc;
+		border-color: #a5b4fc;
+		color: #fff;
+	}
 
-	.btn-secondary { background: #f3f4f6; color: #374151; border-color: #d1d5db; }
-	.btn-secondary:hover { background: #e5e7eb; }
+	.btn-secondary {
+		background: #f3f4f6;
+		color: #374151;
+		border-color: #d1d5db;
+	}
+	.btn-secondary:hover {
+		background: #e5e7eb;
+	}
 
-	.btn-ghost { background: transparent; color: #6b7280; border-color: transparent; }
-	.btn-ghost:hover { background: #f3f4f6; }
+	.btn-ghost {
+		background: transparent;
+		color: #6b7280;
+		border-color: transparent;
+	}
+	.btn-ghost:hover {
+		background: #f3f4f6;
+	}
 
-	.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
-	.btn-danger:hover { background: #b91c1c; }
+	.btn-danger {
+		background: #dc2626;
+		color: #fff;
+		border-color: #dc2626;
+	}
+	.btn-danger:hover {
+		background: #b91c1c;
+	}
+
+	.btn-success {
+		background: #059669;
+		color: #fff;
+		border-color: #059669;
+	}
+	.btn-success:hover {
+		background: #047857;
+	}
+
+	.btn-purple {
+		background: #7c3aed;
+		color: #fff;
+		border-color: #7c3aed;
+	}
+	.btn-purple:hover {
+		background: #6d28d9;
+	}
+	.btn-purple:disabled {
+		background: #c4b5fd;
+		border-color: #c4b5fd;
+		color: #fff;
+	}
 </style>

frontend/src/lib/components/Card.svelte

@@ -4,14 +4,24 @@
 		title,
 		accent,
 		scrollX = false,
-		children
-	}: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; scrollX?: boolean; children?: any } = $props();
+		children,
+		class: className,
+		selected = false
+	}: {
+		cols?: 1 | 2 | 3 | 4 | 5 | 6;
+		title?: string;
+		accent?: string;
+		scrollX?: boolean;
+		children?: any;
+		class?: string;
+		selected?: boolean;
+	} = $props();
 </script>
 
 <div
-	class="card"
 	data-cols={cols}
 	style="--card-cols: {cols}; {accent ? `--card-accent: ${accent}` : ''}"
+	class="card {className || ''} {selected ? 'selected' : ''}"
 	class:has-accent={!!accent}
 	class:scroll-x={scrollX}
 >
@@ -42,6 +52,14 @@
 	.card.has-accent {
 		border-top: 3px solid var(--card-accent, #6366f1);
 	}
+	/* Background pattern active (has-pattern on the layout root): cards go
+	   translucent so the pattern shows through. Desktop/tablet only — mobile
+	   cards are already fully transparent. */
+	@media (min-width: 640px) {
+		:global(.has-pattern) .card {
+			background: #ffffffd9;
+		}
+	}
 	/* Tablet (2-col grid): anything spanning 3+ collapses to a full row (span 2) */
 	@media (min-width: 640px) and (max-width: 1023px) {
 		.card[data-cols='3'],
@@ -51,12 +69,6 @@
 			grid-column: span 2;
 		}
 	}
-	/* Mobile (1-col grid): every card is a full row */
-	@media (max-width: 639px) {
-		.card {
-			grid-column: span 1;
-		}
-	}
 	.card-header {
 		padding: 0.75rem 1rem;
 		border-bottom: 1px solid #f3f4f6;
@@ -74,4 +86,17 @@
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
 	}
+	/* Mobile (1-col grid): every card is a full row — declared last so it
+	   overrides the base .card/.card-body rules (same specificity). */
+	@media (max-width: 639px) {
+		.card {
+			grid-column: span 1;
+			background: transparent;
+			border: none;
+		}
+		.card-body {
+			background: transparent;
+			padding: 0;
+		}
+	}
 </style>

frontend/src/lib/components/CardGrid.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	let { cols = 3, children }: { cols?: number; children?: any } = $props();
+	let { stackTablet = false, children }: { stackTablet?: boolean; children?: any } = $props();
 </script>
 
-<div class="card-grid" style="--grid-cols: {cols}">
+<div class="card-grid" class:stack-tablet={stackTablet}>
 	{@render children?.()}
 </div>
 
@@ -10,18 +10,22 @@
 	.card-grid {
 		display: grid;
 		gap: 1rem;
-		grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
+		grid-template-columns: repeat(3, 1fr);
 	}
-	/* Tablet: settle to 2 columns */
+	/* Tablet: two columns */
 	@media (min-width: 640px) and (max-width: 1023px) {
 		.card-grid {
-			--grid-cols: 2;
+			grid-template-columns: repeat(2, 1fr);
+		}
+		/* Opt-in: stack to a single column on tablet */
+		.card-grid.stack-tablet {
+			grid-template-columns: 1fr;
 		}
 	}
 	/* Mobile: single column */
 	@media (max-width: 639px) {
 		.card-grid {
-			--grid-cols: 1;
+			grid-template-columns: 1fr;
 		}
 	}
 </style>

frontend/src/lib/components/Chat.svelte

@@ -12,8 +12,77 @@
 	let container: HTMLDivElement | undefined = $state();
 	let idleTimer: ReturnType<typeof setTimeout> | undefined;
 
+	// @-mention autocomplete — active while the draft ends with `@query` at the
+	// start of the message or after whitespace.
+	let token = $state<{ at: number; query: string } | null>(null);
+	let mentionIndex = $state(0);
+
+	function mentionTokenOf(text: string): { at: number; query: string } | null {
+		const atIdx = text.lastIndexOf('@');
+		if (atIdx === -1) return null;
+		if (atIdx > 0 && text[atIdx - 1] !== ' ' && text[atIdx - 1] !== '\n') return null;
+		return { at: atIdx, query: text.slice(atIdx + 1) };
+	}
+
+	let mentionList = $derived.by(() => {
+		if (!token) return [];
+		const q = token.query.toLowerCase();
+		const list = chatStore.members.filter((m) => m.id !== chatStore.actorId);
+		if (!q) return list;
+		return list.filter((m) => m.name.toLowerCase().startsWith(q));
+	});
+
+	function selectMention(m: { name: string }) {
+		if (!token) return;
+		draft = draft.slice(0, token.at) + '@' + m.name + ' ';
+		token = null;
+		mentionIndex = 0;
+	}
+
+	function onComposerInput(e: Event) {
+		token = mentionTokenOf((e.currentTarget as HTMLInputElement).value);
+		mentionIndex = 0;
+		onInput();
+	}
+
+	function onComposerKeydown(e: KeyboardEvent) {
+		if (token && mentionList.length > 0) {
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				mentionIndex = (mentionIndex + 1) % mentionList.length;
+				return;
+			}
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				mentionIndex = (mentionIndex - 1 + mentionList.length) % mentionList.length;
+				return;
+			}
+			if (e.key === 'Tab') {
+				e.preventDefault();
+				selectMention(mentionList[mentionIndex]);
+				return;
+			}
+			if (e.key === 'Escape') {
+				token = null;
+				return;
+			}
+		}
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			send();
+		}
+	}
+
 	const isOwn = (msg: any) => msg.authorId === chatStore.actorId;
 
+	// Colour comes from the sender's user record (loaded with the family on
+	// page load) — no per-message snapshot, no live colour tracking. Falls back
+	// to the stored authorColor for any message sent before this change.
+	function colorOf(msg: any): string {
+		if (msg.authorId === chatStore.actorId) return chatStore.actorColor || '#6366f1';
+		return msg.authorColor || '#6366f1';
+	}
+
 	function scrollToBottom(instant = false) {
 		if (!container) return;
 		container.scrollTo({
@@ -31,6 +100,19 @@
 		}
 	});
 
+	// Close the panel with Escape while it's open.
+	$effect(() => {
+		if (!chatStore.open) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				onClose();
+			}
+		};
+		window.addEventListener('keydown', onKey);
+		return () => window.removeEventListener('keydown', onKey);
+	});
+
 	async function send() {
 		const text = draft.trim();
 		if (!text || sending) return;
@@ -74,18 +156,28 @@
 		draft = (draft ? draft + ' ' : '') + '@' + name + ' ';
 	}
 
-	// Render content, wrapping @mentions in a styled token.
+	// Render content, wrapping @mentions in a styled token and https:// URLs in
+	// clickable links (opened in a new window). Mentions may be multi-word names
+	// (space-separated words after the @).
 	function renderContent(text: string) {
-		const segs: { text: string; mention: boolean }[] = [];
-		const re = /(@[A-Za-z0-9_.-]+)/g;
+		const segs: { text: string; mention: boolean; url: string | null }[] = [];
+		const re = /(@[A-Za-z0-9_.-]+(?:[\s]+[A-Za-z0-9_.-]+)*|https?:\/\/[^\s]+)/g;
 		let last = 0;
 		let m: RegExpExecArray | null;
 		while ((m = re.exec(text)) !== null) {
-			if (m.index > last) segs.push({ text: text.slice(last, m.index), mention: false });
-			segs.push({ text: m[1], mention: true });
+			if (m.index > last) segs.push({ text: text.slice(last, m.index), mention: false, url: null });
+			const tok = m[1];
+			if (tok.startsWith('@')) {
+				segs.push({ text: tok, mention: true, url: null });
+			} else {
+				const url = tok.replace(/[.,;:!?]+$/, '');
+				if (url) segs.push({ text: url, mention: false, url });
+				const rest = tok.slice(url.length);
+				if (rest) segs.push({ text: rest, mention: false, url: null });
+			}
 			last = m.index + m[0].length;
 		}
-		if (last < text.length) segs.push({ text: text.slice(last), mention: false });
+		if (last < text.length) segs.push({ text: text.slice(last), mention: false, url: null });
 		return segs;
 	}
 
@@ -107,20 +199,24 @@
 			{#each chatStore.messages as msg (msg.id)}
 				<div class="msg-row" class:own={isOwn(msg)}>
 					{#if !isOwn(msg)}
-						<span class="avatar" style="background:{msg.authorColor || '#6366f1'}">
+						<span class="avatar" style="background:{colorOf(msg)}">
 							{msg.authorName?.charAt(0).toUpperCase()}
 						</span>
 					{/if}
 					<div class="bubble-wrap">
 						{#if !isOwn(msg)}
-							<span class="msg-author">{msg.authorName}</span>
+							<span class="msg-author" style="color:{colorOf(msg)}">{msg.authorName}</span>
 						{/if}
-						<div class="bubble">
-							{#each renderContent(msg.content) as seg (msg.id + ':' + seg.text)}
+						<div class="bubble" style="background:{colorOf(msg) + '33'}; color:{colorOf(msg)}">
+							{#each renderContent(msg.content) as seg, i (msg.id + ':' + i)}
 								{#if seg.mention}
 									<button class="mention" onclick={() => insertMention(seg.text.slice(1))}
 										>{seg.text}</button
 									>
+								{:else if seg.url}
+									<a class="msg-link" href={seg.url} target="_blank" rel="noopener noreferrer"
+										>{seg.url}</a
+									>
 								{:else}
 									{seg.text}
 								{/if}
@@ -146,20 +242,34 @@
 
 	<div class="chat-composer">
 		{#if error}<div class="chat-error">{error}</div>{/if}
+		<div class="composer-wrap">
+			{#if token && mentionList.length > 0}
+				<div class="mention-pop">
+					{#each mentionList as m, i}
+						<button
+							type="button"
+							class="mention-opt"
+							class:active={i === mentionIndex}
+							onclick={() => selectMention(m)}
+							onmouseenter={() => (mentionIndex = i)}
+						>
+							<span class="m-dot" style="background:{m.color}"></span>
+							<span class="m-name">{m.name}</span>
+							<span class="m-role">{m.role === 'parent' ? 'Parent' : ''}</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
 			<input
 				type="text"
 				class="chat-input"
 				placeholder="Message the family…"
 				bind:value={draft}
-			oninput={onInput}
-			onkeydown={(e) => {
-				if (e.key === 'Enter' && !e.shiftKey) {
-					e.preventDefault();
-					send();
-				}
-			}}
+				oninput={onComposerInput}
+				onkeydown={onComposerKeydown}
 				disabled={sending}
 			/>
+		</div>
 		<button class="chat-send" onclick={send} disabled={sending || !draft.trim()} aria-label="Send">
 			{@html sendIcon}
 		</button>
@@ -188,14 +298,15 @@
 	/* Mobile: full-screen fixed layer. */
 	@media (max-width: 767.98px) {
 		.chat-panel {
-			width: 100vw;
+			width: 100dvw;
 		}
 	}
 	.chat-head {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.85rem 1.25rem;
+		height: 52px;
+		padding: 0 1.25rem;
 		border-bottom: 1px solid #e5e7eb;
 		background: #4338ca;
 		color: #fff;
@@ -274,8 +385,6 @@
 		position: relative;
 	}
 	.msg-row.own .bubble {
-		background: #6366f1;
-		color: #fff;
 		border-bottom-left-radius: 14px;
 		border-bottom-right-radius: 4px;
 	}
@@ -288,7 +397,7 @@
 		text-transform: capitalize;
 	}
 	.msg-row.own .msg-time {
-		color: rgba(255, 255, 255, 0.7);
+		color: rgba(17, 24, 39, 0.45);
 	}
 	.mention {
 		background: #ede9fe;
@@ -300,6 +409,11 @@
 		font-size: 0.85rem;
 		cursor: pointer;
 	}
+	.msg-link {
+		color: #6366f1;
+		text-decoration: underline;
+		word-break: break-all;
+	}
 	.chat-typing {
 		min-height: 1.5rem;
 		padding: 0 1.25rem;
@@ -316,6 +430,65 @@
 		border-top: 1px solid #e5e7eb;
 		align-items: center;
 	}
+	.composer-wrap {
+		position: relative;
+		flex: 1;
+	}
+	.composer-wrap .chat-input {
+		width: 100%;
+	}
+	.mention-pop {
+		position: absolute;
+		bottom: calc(100% + 6px);
+		left: 0;
+		right: 0;
+		background: #fff;
+		border: 1px solid #e5e7eb;
+		border-radius: 10px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
+		padding: 0.25rem;
+		max-height: 220px;
+		overflow-y: auto;
+		z-index: 120;
+	}
+	.mention-opt {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.45rem 0.6rem;
+		border: none;
+		background: transparent;
+		border-radius: 8px;
+		cursor: pointer;
+		font-size: 0.85rem;
+		text-align: left;
+	}
+	.mention-opt:hover,
+	.mention-opt.active {
+		background: #eef2ff;
+	}
+	.m-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex: none;
+	}
+	.m-name {
+		font-weight: 600;
+		color: #1f2937;
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.m-role {
+		font-size: 0.68rem;
+		font-weight: 600;
+		color: #9ca3af;
+		flex: none;
+	}
 	.chat-error {
 		position: absolute;
 		bottom: 4.5rem;

frontend/src/lib/components/CheckboxGrid.svelte

@@ -0,0 +1,217 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	const {
+		cellSize = 32,
+		gap = 8,
+		color = 'rgba(200, 210, 255, 0.15)',
+		tickColor = 'rgba(200, 210, 255, 0.55)',
+		rotation = -8,
+		waveSpeed = 1.6
+	}: {
+		cellSize?: number;
+		gap?: number;
+		color?: string;
+		tickColor?: string;
+		rotation?: number;
+		waveSpeed?: number;
+	} = $props();
+
+	let containerEl: HTMLDivElement;
+	let columns = $state(0);
+	let rows = $state(0);
+	let mounted = $state(false);
+	let phase = $state(0);
+	let rafId = 0;
+	let lastTime = 0;
+
+	const seed = Math.random() * 1000;
+
+	function seededRandom(i: number, j: number): number {
+		const x = Math.sin(seed + i * 127.1 + j * 311.7) * 43758.5453;
+		return x - Math.floor(x);
+	}
+
+	function calcGrid() {
+		if (!containerEl) return;
+		const rect = containerEl.getBoundingClientRect();
+		const w = rect.width;
+		const h = rect.height;
+		columns = Math.ceil(w / (cellSize + gap)) + 1;
+		rows = Math.ceil(h / (cellSize + gap)) + 1;
+	}
+
+	function gridRows(): number {
+		return rows + 8;
+	}
+
+	function gridStart(): number {
+		return -4;
+	}
+
+	function getCellRotation(i: number, j: number): number {
+		const r = seededRandom(i, j);
+		return (r - 0.5) * 16;
+	}
+
+	function getRowOffset(i: number): number {
+		return i % 2 === 1 ? (cellSize + gap) / 2 : 0;
+	}
+
+	function getCellOpacity(i: number, j: number, p: number): number {
+		const centerJ = (j + 0.5) / columns;
+		const wave = Math.sin((centerJ * columns * 0.3) - i * 0.35 + p);
+		const threshold = (wave + 1) / 2;
+		const cellRand = seededRandom(i, j);
+		return cellRand < threshold ? 1 : 0;
+	}
+
+	function isGreenCell(i: number, j: number): boolean {
+		return seededRandom(i + 500, j + 500) < 0.15;
+	}
+
+	function getTickColor(i: number, j: number): string {
+		return isGreenCell(i, j) ? 'rgba(16, 185, 129, 0.6)' : tickColor;
+	}
+
+	function getBoxColor(i: number, j: number): string {
+		return isGreenCell(i, j) ? 'rgba(16, 185, 129, 0.35)' : color;
+	}
+
+	function getBoxRadius(i: number, j: number): string {
+		return isGreenCell(i, j) ? '50%' : '4';
+	}
+
+	function animate(time: number) {
+		if (!lastTime) lastTime = time;
+		const dt = (time - lastTime) / 1000;
+		lastTime = time;
+		phase += dt * waveSpeed;
+		rafId = requestAnimationFrame(animate);
+	}
+
+	onMount(() => {
+		mounted = true;
+		calcGrid();
+
+		const ro = new ResizeObserver(() => calcGrid());
+		ro.observe(containerEl);
+
+		rafId = requestAnimationFrame(animate);
+
+		return () => {
+			ro.disconnect();
+			cancelAnimationFrame(rafId);
+		};
+	});
+</script>
+
+<div class="checkbox-grid-container" bind:this={containerEl}>
+	{#if mounted}
+		<div
+			class="checkbox-grid"
+			style="
+				--grid-cols: {columns};
+				--cell-size: {cellSize}px;
+				--cell-gap: {gap}px;
+				--container-rotation: {rotation}deg;
+			"
+		>
+			{#each Array(gridRows()) as _, i}
+				{#each Array(columns) as _, j}
+					{@const di = i + gridStart()}
+					{@const cellRotation = getCellRotation(di, j)}
+					{@const rowOffset = getRowOffset(di)}
+					{@const opacity = getCellOpacity(di, j, phase)}
+					{@const cellTickColor = getTickColor(di, j)}
+					{@const cellBoxColor = getBoxColor(di, j)}
+					{@const boxRadius = getBoxRadius(di, j)}
+					<div
+						class="checkbox-cell"
+						style="
+							--cell-rotation: {cellRotation}deg;
+							--row-offset: {rowOffset}px;
+							opacity: {opacity};
+							transition: opacity 0.8s ease;
+						"
+					>
+						<svg
+							viewBox="0 0 24 24"
+							width={cellSize}
+							height={cellSize}
+							class="checkbox-svg"
+						>
+							<rect
+								x="1" y="1"
+								width="22" height="22"
+								rx={boxRadius} ry={boxRadius}
+								fill="none"
+								stroke={cellBoxColor}
+								stroke-width="1.5"
+							/>
+							{#if opacity > 0.5}
+								<path
+									d="M6 12.5 L10.5 17 L18 7.5"
+									fill="none"
+									stroke={cellTickColor}
+									stroke-width="2.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="tick-path"
+								/>
+							{/if}
+						</svg>
+					</div>
+				{/each}
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.checkbox-grid-container {
+		position: fixed;
+		inset: 0;
+		overflow: hidden;
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.checkbox-grid {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%) rotate(var(--container-rotation));
+		display: grid;
+		grid-template-columns: repeat(var(--grid-cols), var(--cell-size));
+		gap: var(--cell-gap);
+	}
+
+	.checkbox-cell {
+		width: var(--cell-size);
+		height: var(--cell-size);
+		transform: translateX(var(--row-offset, 0px)) rotate(var(--cell-rotation));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.checkbox-svg {
+		display: block;
+	}
+
+	.tick-path {
+		animation: tick-draw 0.3s ease forwards;
+	}
+
+	@keyframes tick-draw {
+		from {
+			stroke-dasharray: 40;
+			stroke-dashoffset: 40;
+		}
+		to {
+			stroke-dasharray: 40;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

frontend/src/lib/components/FamDone.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let { tag = 'span' }: { tag?: 'span' | 'h1' | 'h2' | 'h3' | 'a' | 'strong' | 'p' } = $props();
+</script>
+
+<svelte:element this={tag} class="fam-done">
+	Fam<span class="text-green-500">Done</span><svg
+		class="fam-done-check"
+		xmlns="http://www.w3.org/2000/svg"
+		width="1em"
+		height="1em"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="#10b981"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg
+	></svelte:element
+>
+
+<style>
+	.fam-done {
+		font-weight: inherit;
+		color: inherit;
+	}
+	.fam-done-check {
+		font-size: 0.6em;
+		vertical-align: super;
+		position: relative;
+		display: inline-block;
+	}
+</style>

frontend/src/lib/components/Footer.svelte

@@ -1,13 +1,113 @@
-<footer class="app-footer">
-	<span class="footer-text">FamChore</span>
+<script lang="ts">
+	import FamDone from './FamDone.svelte';
+
+	// Offset the footer content past the fixed sidebar on fam-scoped pages
+	// (220px desktop / 56px mobile). Standalone pages (landing, pricing, admin)
+	// have no sidebar and leave this false.
+	let { sidebar = false } = $props();
+</script>
+
+<footer class="bg-slate-100 text-[#4c1d95] border-t border-[#4338ca]">
+	<div class="footer-inner px-8 py-16" class:sidebar>
+		<div class="footer-row flex items-center justify-between gap-2">
+			<span class="footer-star">✦</span>
+			<div class="footer-center">
+				<span class="footer-copy"
+					>&copy; {new Date().getFullYear()}
+					<span class="footer-text font-bold text-xl"><FamDone /></span> All rights reserved.</span
+				>
+				<span class="footer-links">
+					<a href="/privacy">Privacy Policy</a>
+				</span>
+			</div>
+			<aside
+				class="footer-aside text-text-200 text-wash-300 flex flex-col justify-end text-right text-sm"
+			>
+				<span>Built by humans</span>
+				<a href="https://threejjjs.xyz">
+					<h5 class="m-0 text-right font-tertiary text-xl md:text-3xl">
+						three<span class="opacity-55">jjj</span>s
+						<br />
+					</h5>
+				</a>
+				<span class="text-xs">Interactive Tech</span>
+			</aside>
+		</div>
+	</div>
 </footer>
 
 <style>
-	.app-footer {
-		padding: 1rem 1.5rem;
-		border-top: 1px solid #e5e7eb;
+	/* Offset the footer content past the fixed sidebar so it aligns with the
+	   app-main content column (220px desktop / 56px mobile). */
+	.footer-inner.sidebar {
+		margin-left: 220px;
+	}
+	@media (max-width: 1023px) {
+		.footer-inner.sidebar {
+			margin-left: 56px;
+		}
+	}
+	.footer-star {
+		font-size: 2.5rem;
+		line-height: 1;
+		color: #4c1d95;
+		flex-shrink: 0;
+		position: absolute;
+		left: 2rem;
+	}
+	.footer-copy {
+		flex: 1;
 		text-align: center;
+		padding: 0 1rem;
+	}
+	.footer-center {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+		text-align: center;
+	}
+	.footer-links {
 		font-size: 0.8rem;
-		color: #9ca3af;
+	}
+	.footer-links a {
+		color: #4c1d95;
+		text-decoration: none;
+	}
+	.footer-links a:hover {
+		text-decoration: underline;
+	}
+	.footer-row {
+		position: relative;
+	}
+	.footer-aside {
+		position: absolute;
+		right: 2rem;
+	}
+	@media (max-width: 639px) {
+		.footer-star {
+			font-size: 1.75rem;
+			left: 1rem;
+		}
+		.footer-copy {
+			padding: 0 0.5rem;
+		}
+		.footer-aside {
+			right: 1rem;
+		}
+		.footer-row {
+			flex-direction: column;
+			align-items: center;
+			gap: 1rem;
+			text-align: center;
+		}
+		.footer-star {
+			position: static;
+		}
+		.footer-aside {
+			position: static;
+			text-align: center;
+		}
 	}
 </style>

frontend/src/lib/components/JoinPinFlow.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import PinPad from './PinPad.svelte';
+	import { resetClock } from '$lib/client/lock';
+
+	// Post-join wizard for children on a shared device:
+	//   1. "Is this computer shared?" (skipped when the device already has
+	//      other child sessions — evidence of sharing, PIN is required).
+	//   2. Pick a 3-digit PIN (optional on the question path).
+	//   3. Navigate to the child's dashboard.
+	let {
+		targetUrl = '',
+		force = false
+	}: {
+		targetUrl: string;
+		force?: boolean;
+	} = $props();
+
+	// force: the device already had other kids' sessions → PIN required now.
+	let step = $state<'q' | 'p1' | 'p2'>(force ? 'p1' : 'q');
+	let pin1 = $state('');
+	let padKey = $state(0);
+	let status = $state('');
+
+	function go() {
+		resetClock();
+		window.location.assign(targetUrl);
+	}
+
+	async function savePin(pin: string) {
+		status = '';
+		try {
+			const res = await fetch('/api/pins', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ action: 'ensure', pin })
+			});
+			const data = await res.json().catch(() => ({}));
+			if (!res.ok) throw new Error(data.error || 'Could not save PIN');
+			go();
+		} catch (e) {
+			status = e instanceof Error ? e.message : 'Could not save PIN';
+			step = 'p1';
+			padKey += 1;
+		}
+	}
+</script>
+
+{#if step === 'q'}
+	<div class="wizard">
+		<h2 class="wizard-title">Is this computer shared?</h2>
+		<p class="wizard-sub">
+			Will your brothers or sisters use this computer too? A 3-digit PIN lets you switch to your
+			chores in a tap.
+		</p>
+		<div class="wizard-actions">
+			<button type="button" class="wizard-btn primary" onclick={() => (step = 'p1')}>Yes</button>
+			<button type="button" class="wizard-btn" onclick={go}>No — just me</button>
+		</div>
+	</div>
+{:else if step === 'p1'}
+	<div class="wizard">
+		<h2 class="wizard-title">Pick a PIN</h2>
+		<p class="wizard-sub">3 numbers that are easy for you to remember — you'll use it to switch.</p>
+		{#key padKey}
+			<PinPad
+				label="New PIN"
+				oncomplete={(pin) => {
+					pin1 = pin;
+					step = 'p2';
+				}}
+			/>
+		{/key}
+		{#if status}<p class="wizard-error">{status}</p>{/if}
+		<button type="button" class="wizard-link" onclick={go}>Skip for now</button>
+	</div>
+{:else if step === 'p2'}
+	<div class="wizard">
+		<h2 class="wizard-title">Confirm your PIN</h2>
+		<p class="wizard-sub">
+			Enter it once more — {pin1 ? `it starts with ${pin1[0]}·` : ''}your parent can always read it
+			out if you forget.
+		</p>
+		{#key padKey}
+			<PinPad label="Confirm PIN" oncomplete={savePin} />
+		{/key}
+		{#if status}<p class="wizard-error">{status}</p>{/if}
+		<button
+			type="button"
+			class="wizard-link"
+			onclick={() => {
+				step = 'p1';
+				padKey += 1;
+			}}>Back</button
+		>
+	</div>
+{/if}
+
+<style>
+	.wizard {
+		text-align: center;
+	}
+	.wizard-title {
+		margin: 0 0 0.25rem;
+		font-size: 1.1rem;
+		color: #0f172a;
+	}
+	.wizard-sub {
+		margin: 0 0 1rem;
+		font-size: 0.85rem;
+		color: #64748b;
+		line-height: 1.5;
+	}
+	.wizard-actions {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+	}
+	.wizard-btn {
+		border: 1px solid #e2e8f0;
+		background: #fff;
+		border-radius: 10px;
+		padding: 0.7rem 1rem;
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: #334155;
+		cursor: pointer;
+	}
+	.wizard-btn.primary {
+		background: #6366f1;
+		border-color: #6366f1;
+		color: #fff;
+	}
+	.wizard-btn:hover {
+		filter: brightness(0.97);
+	}
+	.wizard-link {
+		margin-top: 0.75rem;
+		border: none;
+		background: none;
+		color: #6366f1;
+		font-size: 0.85rem;
+		font-weight: 600;
+		cursor: pointer;
+		padding: 0.4rem 0.75rem;
+		border-radius: 8px;
+	}
+	.wizard-link:hover {
+		background: #eef2ff;
+	}
+	.wizard-error {
+		margin: 0.75rem 0 0;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: #dc2626;
+	}
+</style>

frontend/src/lib/components/NoticeDialog.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { notices, type NoticeType } from '$lib/stores/notices.svelte';
+	import {
+		checkCircleIcon,
+		alertTriangleIcon,
+		xCircleIcon,
+		infoIcon
+	} from '$lib/components/icons';
+
+	function icon(type: NoticeType) {
+		switch (type) {
+			case 'success': return checkCircleIcon;
+			case 'warning': return alertTriangleIcon;
+			case 'error': return xCircleIcon;
+			default: return infoIcon;
+		}
+	}
+</script>
+
+{#if notices.list.length > 0}
+	<div class="notice-container" role="region" aria-label="Notifications">
+		{#each notices.list as notice (notice.id)}
+			<div class="notice notice-{notice.type}">
+				<div class="notice-content">
+					<div class="notice-icon">{@html icon(notice.type)}</div>
+					<div class="notice-text">
+						<h4>{notice.title}</h4>
+						{#if notice.message}
+							<p>{notice.message}</p>
+						{/if}
+					</div>
+				</div>
+				{#if notice.action}
+					<a href={notice.action.href} class="notice-action">{notice.action.label}</a>
+				{/if}
+				{#if notice.dismissible}
+					<button class="notice-dismiss" onclick={() => notices.remove(notice.id)} aria-label="Dismiss">✕</button>
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.notice-container {
+		position: fixed;
+		top: 5rem;
+		right: 1.5rem;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		max-width: 380px;
+		pointer-events: none;
+	}
+	.notice {
+		background: white;
+		border-radius: 10px;
+		padding: 1rem 1.25rem;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75rem;
+		border-left: 4px solid #6366f1;
+		animation: slidein 0.25s ease;
+		pointer-events: auto;
+	}
+	.notice-success { border-left-color: #059669; }
+	.notice-warning { border-left-color: #d97706; }
+	.notice-error { border-left-color: #dc2626; }
+	.notice-content {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.6rem;
+		flex: 1;
+		min-width: 0;
+	}
+	.notice-icon {
+		font-size: 1.1rem;
+		flex-shrink: 0;
+	}
+	.notice-icon :global(svg) {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+	.notice-success .notice-icon { color: #059669; }
+	.notice-warning .notice-icon { color: #d97706; }
+	.notice-error .notice-icon { color: #dc2626; }
+	.notice-info .notice-icon { color: #6366f1; }
+	.notice-text h4 {
+		margin: 0 0 0.25rem;
+		font-size: 0.9rem;
+		font-weight: 600;
+		color: #111827;
+	}
+	.notice-text p {
+		margin: 0;
+		font-size: 0.8rem;
+		color: #6b7280;
+		line-height: 1.4;
+	}
+	.notice-action {
+		font-size: 0.8rem;
+		color: #4338ca;
+		font-weight: 500;
+		text-decoration: none;
+		flex-shrink: 0;
+		align-self: center;
+	}
+	.notice-action:hover { text-decoration: underline; }
+	.notice-dismiss {
+		background: none;
+		border: none;
+		font-size: 1rem;
+		color: #9ca3af;
+		cursor: pointer;
+		padding: 0.2rem;
+		line-height: 1;
+		flex-shrink: 0;
+	}
+	.notice-dismiss:hover { color: #374151; }
+	@keyframes slidein {
+		from { opacity: 0; transform: translateX(20px); }
+		to { opacity: 1; transform: translateX(0); }
+	}
+</style>

frontend/src/lib/components/PatternPicker.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import '../theme-patterns.css';
+	import {
+		themeShades,
+		PATTERN_COUNT,
+		patternId,
+		THEME_SIZE_MIN,
+		THEME_SIZE_MAX,
+		THEME_SIZE_DEFAULT,
+		THEME_OPACITY_MIN,
+		THEME_OPACITY_MAX,
+		THEME_OPACITY_STEP,
+		THEME_OPACITY_DEFAULT
+	} from '$lib/theme';
+
+	let {
+		value = '',
+		color = '#6366f1',
+		size = THEME_SIZE_DEFAULT,
+		opacity = THEME_OPACITY_DEFAULT,
+		onchange,
+		onsize,
+		onopacity
+	}: {
+		value?: string;
+		color?: string;
+		size?: number;
+		opacity?: number;
+		onchange: (v: string) => void;
+		onsize?: (v: number) => void;
+		onopacity?: (v: number) => void;
+	} = $props();
+
+	let shades = $derived(themeShades(color));
+	// Inline vars beat the pattern class defaults; --s shrinks the pattern so
+	// thumbnails show a sample of the tiling.
+	let vars = $derived(
+		`--c1:${shades.c1};--c2:${shades.c2};--c3:${shades.c3};--c4:${shades.c4};--s:26px`
+	);
+
+	// Local slider state — bound directly to the inputs (no controlled-value
+	// re-render mid-drag), then emitted on input for the live preview.
+	let sizeVal = $state(size);
+	let opacityVal = $state(opacity);
+	// Keep local state in sync if the props ever change (e.g. after a save).
+	$effect(() => {
+		sizeVal = size;
+	});
+	$effect(() => {
+		opacityVal = opacity;
+	});
+</script>
+
+<div class="pattern-grid">
+	<button
+		type="button"
+		class="pattern-tile none"
+		class:selected={value === ''}
+		title="No background pattern"
+		onclick={() => onchange('')}
+	>
+		<span class="none-dot" style="background:{color}"></span>
+	</button>
+	{#each Array(PATTERN_COUNT) as _, i}
+		{@const id = patternId(i + 1)}
+		<button
+			type="button"
+			class="pattern-tile pattern-{id}"
+			class:selected={value === id}
+			title={`Pattern ${i + 1}`}
+			style={vars}
+			onclick={() => onchange(id)}
+		></button>
+	{/each}
+</div>
+
+{#if value !== ''}
+	{#if onsize}
+		<div class="slider-row">
+			<div class="slider-head">
+				<label for="theme-size">Pattern size</label>
+				<span class="slider-val">{sizeVal}</span>
+			</div>
+			<input
+				id="theme-size"
+				type="range"
+				min={THEME_SIZE_MIN}
+				max={THEME_SIZE_MAX}
+				step="0.5"
+				bind:value={sizeVal}
+				oninput={() => onsize?.(sizeVal)}
+			/>
+			<span class="slider-hint">scales with screen width</span>
+		</div>
+	{/if}
+	{#if onopacity}
+		<div class="slider-row">
+			<div class="slider-head">
+				<label for="theme-opacity">Opacity</label>
+				<span class="slider-val">{Math.round(opacityVal * 100)}%</span>
+			</div>
+			<input
+				id="theme-opacity"
+				type="range"
+				min={THEME_OPACITY_MIN}
+				max={THEME_OPACITY_MAX}
+				step={THEME_OPACITY_STEP}
+				bind:value={opacityVal}
+				oninput={() => onopacity?.(opacityVal)}
+			/>
+			<span class="slider-hint">max = current look</span>
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.pattern-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+		/* Static grid — currently 19 tiles fit without scrolling. Padding keeps
+		   the selected tile's outline from clipping at the top-left corner. */
+		padding: 0.4rem;
+	}
+	.pattern-tile {
+		aspect-ratio: 1;
+		border-radius: 8px;
+		border: 1px solid #e5e7eb;
+		cursor: pointer;
+		padding: 0;
+		/* No background here — the imported .pattern-pN classes supply it.
+		   A local background (0,2,0) would beat .pattern-pN (0,1,0) and hide
+		   every preview. */
+		transition: outline 0.12s ease;
+	}
+	.pattern-tile:hover {
+		border-color: #9ca3af;
+	}
+	.pattern-tile.selected {
+		outline: 3px solid #111827;
+		outline-offset: 2px;
+	}
+	.pattern-tile.none {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #fff;
+	}
+	.none-dot {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+	}
+	.slider-row {
+		margin-top: 0.75rem;
+		font-size: 0.8rem;
+		color: #374151;
+	}
+	.slider-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 0.3rem;
+	}
+	.slider-head label {
+		font-weight: 600;
+	}
+	.slider-row input[type='range'] {
+		width: 100%;
+		display: block;
+		accent-color: #6366f1;
+	}
+	.slider-val {
+		font-weight: 700;
+		color: #4338ca;
+	}
+	.slider-hint {
+		color: #9ca3af;
+		font-size: 0.72rem;
+		display: block;
+		margin-top: 0.15rem;
+	}
+</style>

frontend/src/lib/components/PinPad.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	let {
+		label = 'Enter your PIN',
+		busy = false,
+		oncomplete
+	}: {
+		label?: string;
+		busy?: boolean;
+		oncomplete: (pin: string) => void;
+	} = $props();
+
+	let digits = $state<string[]>([]);
+
+	function press(d: string) {
+		if (busy || digits.length >= 3) return;
+		digits = [...digits, d];
+		if (digits.length === 3) oncomplete(digits.join(''));
+	}
+
+	function back() {
+		digits = digits.slice(0, -1);
+	}
+</script>
+
+<div class="pin-pad">
+	<p class="pin-label">{label}</p>
+	<div class="pin-dots" aria-hidden="true">
+		{#each [0, 1, 2] as i}
+			<span class="dot" class:filled={digits.length > i}></span>
+		{/each}
+	</div>
+	<div class="pin-keys">
+		{#each ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as d}
+			<button type="button" class="key" disabled={busy} onclick={() => press(d)}>{d}</button>
+		{/each}
+		<button
+			type="button"
+			class="key ghost"
+			disabled={busy || digits.length === 0}
+			onclick={() => back()}>⌫</button
+		>
+		<button type="button" class="key" disabled={busy} onclick={() => press('0')}>0</button>
+		<span class="key ghost">&nbsp;</span>
+	</div>
+</div>
+
+<style>
+	.pin-pad {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+		width: 100%;
+	}
+	.pin-label {
+		font-size: 0.9rem;
+		color: #6b7280;
+		margin: 0;
+	}
+	.pin-dots {
+		display: flex;
+		gap: 0.75rem;
+		justify-content: center;
+	}
+	.dot {
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		border: 2px solid #cbd5e1;
+		transition: background 0.1s;
+	}
+	.dot.filled {
+		background: #6366f1;
+		border-color: #6366f1;
+	}
+	.pin-keys {
+		display: grid;
+		grid-template-columns: repeat(3, 64px);
+		gap: 0.5rem;
+		justify-content: center;
+	}
+	.key {
+		height: 56px;
+		border: 1px solid #e2e8f0;
+		border-radius: 12px;
+		background: #fff;
+		color: #1e293b;
+		font-size: 1.4rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition:
+			background 0.1s,
+			transform 0.05s;
+	}
+	.key:hover:not(:disabled) {
+		background: #f1f5f9;
+	}
+	.key:active:not(:disabled) {
+		transform: scale(0.96);
+	}
+	.key:disabled {
+		opacity: 0.4;
+		cursor: default;
+	}
+	.key.ghost {
+		background: transparent;
+		border-color: transparent;
+		font-size: 1rem;
+	}
+</style>

frontend/src/lib/components/PricingPlans.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { checkCircleIcon } from '$lib/components/icons';
+
+	interface Tier {
+		id: 'trial' | 'monthly' | 'yearly';
+		name: string;
+		price: string;
+		period: string;
+		blurb: string;
+		features: string[];
+		cta: string;
+		featured?: boolean;
+	}
+
+	const tiers: Tier[] = [
+		{
+			id: 'trial',
+			name: 'Have a code?',
+			price: 'Free',
+			period: 'with a valid code',
+			blurb: 'Been given an access or trial code?',
+			features: ['Full family access', 'Redeemed during signup', 'No card required'],
+			cta: 'Enter your code'
+		},
+		{
+			id: 'monthly',
+			name: 'Monthly',
+			price: '£3',
+			period: '/month',
+			blurb: 'Everything, month to month.',
+			features: ['Unlimited kids & chores', 'Allowances calculated automatically', 'Bonuses & seasons', 'Cancel anytime'],
+			cta: 'Choose monthly',
+			featured: true
+		},
+		{
+			id: 'yearly',
+			name: 'Yearly',
+			price: '£30',
+			period: '/year',
+			blurb: 'Two months free vs monthly.',
+			features: ['Everything in Monthly', 'Two months free', 'Best for committed families'],
+			cta: 'Choose yearly'
+		}
+	];
+
+	let { action, hideTrial = false, selected = '', error = '', onsubmit }: {
+		action: string;
+		hideTrial?: boolean;
+		selected?: string;
+		error?: string;
+		onsubmit?: any;
+	} = $props();
+</script>
+
+<div class="tiers">
+	{#each tiers.filter((t) => !(hideTrial && t.id === 'trial')) as tier}
+		<article
+			class="tier"
+			class:featured={tier.featured}
+			class:picked={selected === tier.id}
+			aria-label="{tier.name} plan"
+		>
+			{#if tier.featured}
+				<span class="pop">Most popular</span>
+			{/if}
+			<h3>{tier.name}</h3>
+			<p class="price">
+				<span class="amount">{tier.price}</span>
+				<span class="period">{tier.period}</span>
+			</p>
+			<p class="blurb">{tier.blurb}</p>
+
+			{#if tier.id === 'trial'}
+				<!-- No form: codes are redeemed inside the signup wizard (step 3).
+				     data-sveltekit-reload: full document nav — immune to stale-router
+				     click-swallowing. -->
+				<a href="/signup" data-sveltekit-reload class="cta">{tier.cta}</a>
+			{:else}
+				<form method="POST" action={action} use:enhance={onsubmit ?? undefined}>
+					<input type="hidden" name="plan" value={tier.id} />
+					<button type="submit" class="cta" class:primary={tier.featured}>{tier.cta}</button>
+				</form>
+			{/if}
+
+			<ul>
+				{#each tier.features as f}
+					<li><span class="tick">{@html checkCircleIcon}</span>{f}</li>
+				{/each}
+			</ul>
+		</article>
+	{/each}
+</div>
+
+{#if error}
+	<p class="form-error">{error}</p>
+{/if}
+
+<style>
+	.tiers {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+		gap: 1.25rem;
+		align-items: stretch;
+		width: 100%;
+	}
+	.tier {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		background: #fff;
+		border: 1px solid #e5e7eb;
+		border-radius: 16px;
+		padding: 1.5rem 1.4rem 1.4rem;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	}
+	.tier.featured {
+		border: 2px solid #6366f1;
+		box-shadow: 0 10px 28px rgba(99, 102, 241, 0.18);
+	}
+	.tier.picked {
+		outline: 2px solid #a5b4fc;
+		outline-offset: 2px;
+	}
+	.pop {
+		position: absolute;
+		top: -0.7rem;
+		left: 50%;
+		transform: translateX(-50%);
+		background: linear-gradient(135deg, #6366f1, #8b5cf6);
+		color: #fff;
+		font-size: 0.68rem;
+		font-weight: 700;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		padding: 0.22rem 0.7rem;
+		border-radius: 999px;
+		white-space: nowrap;
+	}
+	h3 {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: #6b7280;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+	.price { margin: 0.55rem 0 0.15rem; line-height: 1; }
+	.amount { font-size: 2.4rem; font-weight: 800; color: #111827; }
+	@media (max-width: 639px) {
+		.amount { font-size: 1.5em; }
+	}
+	.period { font-size: 0.85rem; color: #9ca3af; margin-left: 0.3rem; }
+	.blurb { margin: 0 0 0.9rem; font-size: 0.85rem; color: #6b7280; }
+
+	form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: auto; }
+	input {
+		padding: 0.5rem 0.65rem;
+		border: 1px solid #d1d5db;
+		border-radius: 8px;
+		font-size: 0.85rem;
+		text-transform: uppercase;
+	}
+	input:focus {
+		outline: 2px solid #6366f1;
+		outline-offset: -1px;
+	}
+	.cta {
+		display: block;
+		width: 100%;
+		padding: 0.65rem 1rem;
+		border-radius: 10px;
+		font-size: 0.92rem;
+		font-weight: 600;
+		cursor: pointer;
+		text-align: center;
+		text-decoration: none;
+		border: 1.5px solid #6366f1;
+		background: #fff;
+		color: #4338ca;
+		transition: background 0.15s ease, transform 0.05s ease;
+	}
+	.cta:hover { background: #eef2ff; }
+	.cta:active { transform: scale(0.98); }
+	.cta.primary {
+		background: linear-gradient(135deg, #4338ca, #6366f1);
+		color: #fff;
+		border-color: transparent;
+	}
+	.cta.primary:hover { background: linear-gradient(135deg, #3730a3, #4f46e5); }
+
+	ul {
+		list-style: none;
+		margin: 1.1rem 0 0;
+		padding: 0.9rem 0 0;
+		border-top: 1px solid #f3f4f6;
+		display: flex;
+		flex-direction: column;
+		gap: 0.45rem;
+	}
+	li {
+		font-size: 0.84rem;
+		color: #4b5563;
+		display: flex;
+		align-items: baseline;
+		gap: 0.45rem;
+	}
+	.tick { color: #059669; font-weight: 700; flex-shrink: 0; }
+	.tick :global(svg) { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
+
+	.form-error {
+		grid-column: 1 / -1;
+		color: #dc2626;
+		background: #fef2f2;
+		padding: 0.5rem 0.75rem;
+		border-radius: 8px;
+		font-size: 0.85rem;
+		margin-top: 0.75rem;
+	}
+</style>

frontend/src/lib/components/SaveButton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+
+	let {
+		label,
+		successLabel = 'Saved ✓',
+		variant = 'primary',
+		size = 'sm',
+		...rest
+	}: {
+		label: string;
+		successLabel?: string;
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'purple';
+		size?: 'sm' | 'md' | 'lg';
+		[key: string]: unknown;
+	} = $props();
+
+	let saved = $state(false);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	// Parent forms call this (via bind:this) from their use:enhance callback
+	// on result.type === 'success'. Green for 4s, then back to normal.
+	export function flash() {
+		saved = true;
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => (saved = false), 4000);
+	}
+</script>
+
+<Button type="submit" {size} variant={saved ? 'success' : variant} {...rest}>
+	{saved ? successLabel : label}
+</Button>

frontend/src/lib/components/SharedPicker.svelte

@@ -0,0 +1,305 @@
+<script lang="ts">
+	import PinPad from './PinPad.svelte';
+	import { resetClock } from '$lib/client/lock';
+
+	export type QuickProfile = {
+		id: string;
+		name: string;
+		color: string;
+		username: string; // `{famSlug}:{handle}`
+	};
+
+	let {
+		profiles = [],
+		famSlug = '',
+		famName = '',
+		activeId = '',
+		standalone = false,
+		oncancel = () => {}
+	}: {
+		profiles?: QuickProfile[];
+		famSlug?: string;
+		famName?: string;
+		activeId?: string;
+		standalone?: boolean;
+		oncancel?: () => void;
+	} = $props();
+
+	let selectedId = $state('');
+	let padKey = $state(0);
+	let status = $state('');
+	let busy = $state(false);
+
+	const selected = $derived(profiles.find((p) => p.id === selectedId) || null);
+
+	function initial(name: string) {
+		return (name || '?').trim().charAt(0).toUpperCase() || '?';
+	}
+
+	function targetUrl(p: QuickProfile) {
+		const handle = (p.username || '').split(':').pop() || p.id;
+		return `/${famSlug}/${encodeURIComponent(handle)}`;
+	}
+
+	async function switchTo(id: string, pin: string) {
+		busy = true;
+		status = '';
+		try {
+			const res = await fetch('/api/switch-user', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ userId: id, pin })
+			});
+			const data = await res.json().catch(() => ({}));
+			if (!res.ok) throw new Error(data.error || 'Could not switch');
+			// Fresh activation — the mount-time lock check must not trip.
+			resetClock();
+			const target = profiles.find((p) => p.id === id);
+			window.location.assign(targetUrl(target || ({ id, username: '' } as QuickProfile)));
+		} catch (e) {
+			status = e instanceof Error ? e.message : 'Could not switch';
+			busy = false;
+			padKey += 1;
+			selectedId = '';
+		}
+	}
+
+	async function removeProfile(id: string) {
+		const p = profiles.find((x) => x.id === id);
+		if (!p || !confirm(`Remove ${p.name} from this computer?`)) return;
+		await fetch('/api/device/remove', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ userId: id })
+		}).catch(() => {});
+		window.location.reload();
+	}
+</script>
+
+<div class="picker-backdrop" class:standalone>
+	<div class="picker-card">
+		{#if selected}
+			<h2 class="picker-title">Hi {selected.name}!</h2>
+			<p class="picker-sub">Enter your 3-digit PIN to switch.</p>
+			{#key padKey}
+				<PinPad {busy} oncomplete={(pin) => switchTo(selected.id, pin)} />
+			{/key}
+			{#if status}
+				<p class="picker-error">{status}</p>
+			{/if}
+			<div class="picker-actions">
+				<button
+					type="button"
+					class="link-btn"
+					onclick={() => {
+						selectedId = '';
+						status = '';
+						padKey += 1;
+					}}>Back</button
+				>
+			</div>
+		{:else}
+			<h2 class="picker-title">
+				{standalone ? famName || 'Welcome' : "Who's using the computer?"}
+			</h2>
+			<p class="picker-sub">
+				{standalone
+					? 'Pick your profile to get to your chores.'
+					: 'Pick a profile and enter its PIN.'}
+			</p>
+			<div class="picker-grid">
+				{#each profiles as p (p.id)}
+					<div
+						class="profile"
+						class:active={p.id === activeId}
+						role="button"
+						tabindex="0"
+						style={`--dot:${p.color}`}
+						onclick={() => (selectedId = p.id)}
+						onkeydown={(e) => {
+							if (e.key === 'Enter' || e.key === ' ') selectedId = p.id;
+						}}
+					>
+						<span class="avatar" style="background:{p.color}">{initial(p.name)}</span>
+						<span class="pname">{p.name}</span>
+						{#if p.id === activeId}<span class="pill">current</span>{/if}
+						<button
+							type="button"
+							class="remove-btn"
+							aria-label={`Remove ${p.name} from this computer`}
+							onclick={(e) => {
+								e.stopPropagation();
+								removeProfile(p.id);
+							}}>✕</button
+						>
+					</div>
+				{/each}
+			</div>
+			{#if standalone}
+				<div class="picker-footer">
+					<a href={`/${famSlug}/join`}>Add a child with a code</a>
+					<span class="dot-sep">·</span>
+					<a href="/login">Parent login</a>
+				</div>
+			{:else}
+				<div class="picker-actions">
+					<button type="button" class="link-btn" onclick={oncancel}>Cancel</button>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.picker-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 120;
+		background: rgba(15, 23, 42, 0.55);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1.5rem;
+	}
+	.picker-card {
+		background: #fff;
+		border-radius: 20px;
+		padding: 2rem;
+		width: 100%;
+		max-width: 460px;
+		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+		text-align: center;
+		max-height: 90vh;
+		overflow-y: auto;
+	}
+	.picker-title {
+		margin: 0 0 0.25rem;
+		font-size: 1.3rem;
+		color: #0f172a;
+	}
+	.picker-sub {
+		margin: 0 0 1.25rem;
+		font-size: 0.9rem;
+		color: #64748b;
+	}
+	.picker-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+		gap: 0.75rem;
+		margin-bottom: 1.25rem;
+	}
+	.profile {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 1rem 0.5rem;
+		border: 2px solid transparent;
+		border-radius: 14px;
+		background: #f8fafc;
+		cursor: pointer;
+		transition:
+			border-color 0.12s,
+			transform 0.05s;
+	}
+	.profile:hover {
+		border-color: #c7d2fe;
+	}
+	.profile:active {
+		transform: scale(0.97);
+	}
+	.profile.active {
+		border-color: #6366f1;
+		background: #eef2ff;
+	}
+	.avatar {
+		width: 52px;
+		height: 52px;
+		border-radius: 50%;
+		color: #fff;
+		font-size: 1.5rem;
+		font-weight: 700;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.pname {
+		font-size: 0.9rem;
+		font-weight: 600;
+		color: #1e293b;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.pill {
+		font-size: 0.65rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		background: #6366f1;
+		color: #fff;
+		border-radius: 999px;
+		padding: 0.1rem 0.45rem;
+	}
+	.remove-btn {
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		width: 22px;
+		height: 22px;
+		border: none;
+		border-radius: 50%;
+		background: #e2e8f0;
+		color: #475569;
+		font-size: 0.7rem;
+		line-height: 1;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.remove-btn:hover {
+		background: #fecaca;
+		color: #b91c1c;
+	}
+	.picker-error {
+		margin: 0.75rem 0 0;
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: #dc2626;
+	}
+	.picker-actions {
+		margin-top: 1rem;
+	}
+	.link-btn {
+		border: none;
+		background: none;
+		color: #6366f1;
+		font-size: 0.9rem;
+		font-weight: 600;
+		cursor: pointer;
+		padding: 0.4rem 0.75rem;
+		border-radius: 8px;
+	}
+	.link-btn:hover {
+		background: #eef2ff;
+	}
+	.picker-footer {
+		display: flex;
+		justify-content: center;
+		gap: 0.6rem;
+		font-size: 0.85rem;
+	}
+	.picker-footer a {
+		color: #6366f1;
+		font-weight: 600;
+		text-decoration: none;
+	}
+	.picker-footer a:hover {
+		text-decoration: underline;
+	}
+	.dot-sep {
+		color: #cbd5e1;
+	}
+</style>

frontend/src/lib/components/Sidebar.svelte

@@ -3,25 +3,26 @@
 	import {
 		dashboardIcon,
 		choresIcon,
-		rewardsIcon,
-		bonusesIcon,
+		archiveIcon,
+		gemIcon,
 		homeIcon,
 		settingsIcon,
 		logoutIcon,
 		prefsIcon
 	} from './icons';
+	import FamDone from './FamDone.svelte';
+	import { famStore } from '$lib/stores/fam.svelte';
 
-	let { famName = '', session = null, isParent = false, role = 'child' } = $props();
+	// Outstanding claim requests (children asked → parent still to issue).
+	let requestedClaims = $derived(
+		famStore.initialized ? famStore.rewards.filter((r: any) => r.status === 'requested').length : 0
+	);
 
-	let collapsed = $state(false);
+	let { famName = '', session = null, isParent = false, role = 'child', isDemo = false } = $props();
 
-	let famSlug = $derived(page.params.fam);
+	let famSlug = $derived(page.data.famSlug ?? page.params.fam);
 	let memberName = $derived(session?.memberName || page.params.username || '');
 
-	function toggle() {
-		collapsed = !collapsed;
-	}
-
 	let showChildItems = $derived(!!memberName);
 
 	let navItems = $derived(
@@ -30,8 +31,8 @@
 					{ href: `/${famSlug}`, label: famName, icon: homeIcon },
 					{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
 					{ href: `/${famSlug}/${memberName}/chores`, label: 'Chores', icon: choresIcon },
-					{ href: `/${famSlug}/${memberName}/ledger`, label: 'Ledger', icon: rewardsIcon },
-					{ href: `/${famSlug}/${memberName}/bonuses`, label: 'Bonuses', icon: bonusesIcon }
+					{ href: `/${famSlug}/${memberName}/rewards`, label: 'Rewards', icon: gemIcon },
+					{ href: `/${famSlug}/${memberName}/ledger`, label: 'Ledger', icon: archiveIcon }
 				]
 			: showChildItems
 				? [
@@ -42,10 +43,10 @@
 	);
 
 	let footerItems = $derived([
-		...(memberName
+		...(memberName && !isDemo
 			? [{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon }]
 			: []),
-		...(isParent && memberName
+		...(isParent && memberName && !isDemo
 			? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }]
 			: []),
 		{
@@ -56,31 +57,39 @@
 	]);
 </script>
 
-<aside class="sidebar" class:collapsed>
-	<button class="toggle-btn" onclick={toggle}>
-		{collapsed ? '☰' : '✕'}
-	</button>
-
-	<div class="sidebar-header">
+<aside class="sidebar">
+	<a class="sidebar-header" href="/" aria-label="Go to homepage">
 		<span class="app-icon">✦</span>
-		{#if !collapsed}<span class="app-name">FamChore</span>{/if}
-	</div>
+		<span class="app-name"><FamDone /></span>
+	</a>
 
 	<nav class="sidebar-nav">
 		{#each navItems as item}
 			<a href={item.href} class="nav-item" class:active={page.url.pathname === item.href}>
 				{@html item.icon}
-				{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
+				<span class="nav-label">{item.label}</span>
+				{#if isParent && item.label === 'Dashboard' && requestedClaims > 0}
+					<span class="nav-badge">{requestedClaims}</span>
+				{/if}
 			</a>
 		{/each}
 	</nav>
 
 	<div class="sidebar-footer">
 		{#each footerItems as item}
+			{#if item.href === '/logout'}
+				<form method="POST" action="/logout" class="nav-item-form">
+					<button type="submit" class="nav-item nav-item-button" aria-label="Log out">
+						{@html item.icon}
+						<span class="nav-label">{item.label}</span>
+					</button>
+				</form>
+			{:else}
 				<a href={item.href} class="nav-item">
 					{@html item.icon}
-				{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
+					<span class="nav-label">{item.label}</span>
 				</a>
+			{/if}
 		{/each}
 	</div>
 </aside>
@@ -90,7 +99,7 @@
 		position: fixed;
 		top: 0;
 		left: 0;
-		height: 100vh;
+		height: 100dvh;
 		width: 220px;
 		background: #1e1b4b;
 		color: #e0e7ff;
@@ -100,28 +109,17 @@
 		z-index: 100;
 		overflow: hidden;
 	}
-	.sidebar.collapsed {
-		width: 56px;
-	}
-	.toggle-btn {
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		background: none;
-		border: none;
-		color: #a5b4fc;
-		font-size: 1.1rem;
-		cursor: pointer;
-		padding: 0.25rem;
-		line-height: 1;
-	}
+
 	.sidebar-header {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 1rem 0.75rem;
+		padding: 0 0.75rem;
 		border-bottom: 1px solid #3730a3;
-		min-height: 52px;
+		height: 52px;
+		box-sizing: border-box;
+		text-decoration: none;
+		color: inherit;
 	}
 	.app-icon {
 		font-size: 1.3rem;
@@ -158,11 +156,36 @@
 		margin: 0 0.3rem;
 		white-space: nowrap;
 		transition: background 0.15s;
+		position: relative;
+	}
+	.nav-badge {
+		position: absolute;
+		top: 4px;
+		right: 6px;
+		background: #f59e0b;
+		color: #fff;
+		font-size: 0.65rem;
+		font-weight: 700;
+		line-height: 1;
+		padding: 2px 6px;
+		border-radius: 999px;
 	}
 	.nav-item:hover {
 		background: #3730a3;
 		color: #e0e7ff;
 	}
+	.nav-item-form {
+		margin: 0 0.3rem;
+	}
+	.nav-item-button {
+		font-family: inherit;
+		background: none;
+		border: none;
+		box-sizing: border-box;
+		text-align: left;
+		cursor: pointer;
+		width: 100%;
+	}
 	.nav-item.active {
 		background: #4338ca;
 		color: #fff;
@@ -171,4 +194,25 @@
 	.nav-label {
 		overflow: hidden;
 	}
+
+	@media (max-width: 1023px) {
+		.sidebar {
+			width: 56px;
+		}
+		.sidebar-header {
+			justify-content: center;
+			padding: 0;
+		}
+		.app-name {
+			display: none;
+		}
+		.nav-item {
+			justify-content: center;
+			padding: 0.6rem 0;
+			margin: 0;
+		}
+		.nav-label {
+			display: none;
+		}
+	}
 </style>

frontend/src/lib/components/TemplateIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { templateIcon } from '$lib/templateIcons';
+
+	let { name = undefined, size = 18, color = undefined }: {
+		name?: string;
+		size?: number;
+		color?: string;
+	} = $props();
+
+	const Cmp = $derived(templateIcon(name));
+</script>
+
+<Cmp {size} {color} />

frontend/src/lib/components/TopNav.svelte

@@ -3,11 +3,13 @@
 		announcement = '',
 		role = '',
 		seasons = [],
-		children,
+		connected = true,
+		children
 	}: {
 		announcement?: string
 		role?: string
 		seasons?: { id: string; name: string; color: string; active: boolean }[]
+		connected?: boolean
 		children?: any
 	} = $props();
 </script>
@@ -17,6 +19,14 @@
 		{#if role}
 			<span class="role-pill {role}">{role}</span>
 		{/if}
+		<span
+			class="conn-dot"
+			class:up={connected}
+			class:down={!connected}
+			title={connected ? 'Live — realtime connected' : 'Reconnecting — live updates paused'}
+			role="status"
+			aria-label={connected ? 'Realtime connected' : 'Realtime reconnecting'}
+		></span>
 	</div>
 	<div class="topnav-announcement">
 		{#if announcement}<span class="announcement-text">{announcement}</span>{/if}
@@ -39,7 +49,7 @@
 	.topnav {
 		position: fixed;
 		top: 0; left: 220px; right: 0;
-		height: 48px;
+		height: 52px;
 		background: #fff;
 		border-bottom: 1px solid #e5e7eb;
 		display: flex;
@@ -49,6 +59,11 @@
 		transition: left 0.2s;
 		gap: 0.75rem;
 	}
+	@media (max-width: 1023px) {
+		.topnav {
+			left: 56px;
+		}
+	}
 	.topnav-left { display: flex; align-items: center; gap: 0.5rem; }
 	.topnav-announcement { flex: 1; text-align: center; }
 	.announcement-text { font-size: 0.85rem; color: #6b7280; }
@@ -63,6 +78,18 @@
 	}
 	.role-pill.parent { background: #fef3c7; color: #b45309; }
 	.role-pill.child { background: #dbeafe; color: #1d4ed8; }
+	.conn-dot {
+		width: 9px;
+		height: 9px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+	.conn-dot.up { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
+	.conn-dot.down { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); animation: conn-pulse 1.2s infinite; }
+	@keyframes conn-pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.35; }
+	}
 	.season-pill {
 		font-size: 0.75rem;
 		padding: 0.2rem 0.6rem;

frontend/src/lib/components/ViewHeader.svelte

@@ -1,20 +1,55 @@
 <script lang="ts">
-	let { title, subtitle, hero = false, tabs, weeknav, sort }: {
+	import type { Snippet } from 'svelte';
+	let {
+		title,
+		subtitle,
+		hero = false,
+		tabs,
+		weeknav,
+		sort,
+		children
+	}: {
 		title: string;
 		subtitle?: string;
 		hero?: boolean;
-		tabs?: { items: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
-		weeknav?: { current: string; onPrev: () => void; onNext: () => void };
-		sort?: { options: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
+		tabs?: {
+			items: { label: string; value: string }[];
+			active: string;
+			onchange: (v: string) => void;
+		};
+		weeknav?: {
+			current: string;
+			onPrev: () => void;
+			onNext: () => void;
+			onCurrent?: () => void;
+			isCurrent?: boolean;
+		};
+		sort?: {
+			options: { label: string; value: string }[];
+			active: string;
+			onchange: (v: string) => void;
+		};
+		children?: Snippet;
 	} = $props();
 </script>
 
-<div class="view-header" class:hero>
+<div class="view-header flex justify-between" class:hero>
 	<div class="view-title-group">
-		<h1 class="view-title">{title}</h1>
+		<h1 class="view-title text-3xl">{title}</h1>
 		{#if subtitle}<p class="view-subtitle">{subtitle}</p>{/if}
 	</div>
 
+	{@render children?.()}
+
+	{#if weeknav?.onCurrent}
+		<button
+			class="now-btn header-now"
+			class:now-hidden={weeknav.isCurrent !== false}
+			onclick={weeknav.onCurrent}
+			tabindex={weeknav.isCurrent === false ? 0 : -1}
+		><span>← Back to this week</span></button>
+	{/if}
+
 	<div class="view-tools">
 		{#if tabs}
 			<div class="tab-bar">
@@ -22,8 +57,8 @@
 					<button
 						class="tab-btn"
 						class:active={tab.value === tabs.active}
-						onclick={() => tabs.onchange(tab.value)}
-					>{tab.label}</button>
+						onclick={() => tabs.onchange(tab.value)}>{tab.label}</button
+					>
 				{/each}
 			</div>
 		{/if}
@@ -37,7 +72,11 @@
 		{/if}
 
 		{#if sort}
-			<select class="sort-select" value={sort.active} onchange={(e) => sort.onchange(e.currentTarget.value)}>
+			<select
+				class="sort-select"
+				value={sort.active}
+				onchange={(e) => sort.onchange(e.currentTarget.value)}
+			>
 				{#each sort.options as opt}
 					<option value={opt.value}>{opt.label}</option>
 				{/each}
@@ -47,27 +86,144 @@
 </div>
 
 <style>
-	.view-header { margin-bottom: 1.5rem; }
-	.view-title-group { margin-bottom: 0.5rem; }
-	.view-title { font-size: 1.4rem; font-weight: 700; color: #111827; margin: 0; }
-	.view-subtitle { font-size: 0.9rem; color: #6b7280; margin: 0.25rem 0 0 0; }
-	.view-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
-	.tab-bar { display: flex; gap: 2px; background: #f3f4f6; border-radius: 6px; padding: 2px; }
+	.view-header {
+		margin-bottom: 1.5rem;
+		flex-wrap: wrap;
+	}
+	@media (max-width: 639px) {
+		/* Stack title above tools so the header doesn't squish on phones */
+		.view-header {
+			flex-direction: column;
+			align-items: stretch;
+		}
+	}
+	.view-title-group {
+		margin-bottom: 0.5rem;
+	}
+	.view-title {
+		font-weight: 700;
+		color: #111827;
+		margin: 0;
+	}
+	@media (max-width: 639px) {
+		.view-title {
+			font-size: 1.25rem;
+		}
+	}
+	.view-subtitle {
+		font-size: 0.9rem;
+		color: #6b7280;
+		margin: 0.25rem 0 0 0;
+	}
+	.view-tools {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 1rem;
+		/* Tools row takes the full header width so the title never gets squeezed */
+		width: 100%;
+	}
+	/* Immediate tools (tab bar / week nav / sort) grow to span the row; they
+	   wrap to their own full-width line only when they don't fit side by side */
+	.view-tools > * {
+		flex: 1 1 auto;
+	}
+	.tab-bar {
+		display: flex;
+		justify-content: space-between;
+		gap: 2px;
+		background: #f3f4f6;
+		border-radius: 6px;
+		padding: 2px;
+	}
 	.tab-btn {
-		padding: 0.35rem 0.85rem; border: none; background: transparent; border-radius: 5px;
-		font-size: 0.85rem; color: #6b7280; cursor: pointer;
+		padding: 0.35rem 0.85rem;
+		border: none;
+		background: transparent;
+		border-radius: 5px;
+		font-size: 0.85rem;
+		color: #6b7280;
+		cursor: pointer;
+	}
+	.tab-btn.active {
+		background: #fff;
+		color: #4338ca;
+		font-weight: 600;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	}
+	.week-nav {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+	/* Back-to-this-week CTA: lives outside .view-tools on the header's top
+	   row, pushed right. Always rendered (visibility-toggled) so the header
+	   keeps its height when it appears/disappears. */
+	.header-now {
+		margin-left: auto;
+		align-self: flex-end;
 	}
-	.tab-btn.active { background: #fff; color: #4338ca; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-	.week-nav { display: flex; align-items: center; gap: 0.5rem; }
 	.nav-btn {
-		padding: 0.2rem 0.5rem; border: 1px solid #d1d5db; background: #fff; border-radius: 4px;
-		cursor: pointer; font-size: 1rem; line-height: 1;
+		padding: 0.2rem 0.5rem;
+		border: 1px solid #d1d5db;
+		background: #fff;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1;
+	}
+	.nav-btn:hover {
+		background: #f3f4f6;
+	}
+	.nav-btn.now-btn {
+		font-size: 0.8rem;
+		font-weight: 700;
+		white-space: nowrap;
+	}
+	/* Same pill CTA as the member hero. Always rendered (visibility-toggled)
+	   so the ‹ › buttons never jump when it appears/disappears. */
+	.now-btn {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0;
+	}
+	.now-btn span {
+		display: inline-block;
+		background: rgba(255, 255, 255, 0.92);
+		color: #4338ca;
+		border-radius: 999px;
+		padding: 0.35rem 0.9rem;
+		font-size: 0.8rem;
+		font-weight: 800;
+		white-space: nowrap;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+	}
+	.view-header.hero .now-btn span {
+		background: rgba(255, 255, 255, 0.92);
+		color: #4338ca;
+	}
+	.now-btn:hover span {
+		background: #fff;
+	}
+	.now-btn.now-hidden {
+		visibility: hidden;
+		pointer-events: none;
+	}
+	.nav-label {
+		font-size: 0.85rem;
+		color: #374151;
+		font-weight: 500;
+		min-width: 140px;
+		text-align: center;
 	}
-	.nav-btn:hover { background: #f3f4f6; }
-	.nav-label { font-size: 0.85rem; color: #374151; font-weight: 500; min-width: 140px; text-align: center; }
 	.sort-select {
-		padding: 0.3rem 0.6rem; border: 1px solid #d1d5db; border-radius: 5px;
-		font-size: 0.85rem; background: #fff;
+		padding: 0.3rem 0.6rem;
+		border: 1px solid #d1d5db;
+		border-radius: 5px;
+		font-size: 0.85rem;
+		background: #fff;
 	}
 
 	/* ── Hero lead (child-dashboard style) ── */
@@ -78,15 +234,41 @@
 		color: #fff;
 		box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
 	}
-	.view-header.hero .view-title-group { margin-bottom: 0.25rem; }
-	.view-header.hero .view-title { color: #fff; }
-	.view-header.hero .view-subtitle { color: rgba(255, 255, 255, 0.85); }
-	.view-header.hero .view-tools { margin-top: 0.75rem; }
-	.view-header.hero .tab-bar { background: rgba(255, 255, 255, 0.16); }
-	.view-header.hero .tab-btn { color: rgba(255, 255, 255, 0.9); }
-	.view-header.hero .tab-btn:hover { color: #fff; }
-	.view-header.hero .tab-btn.active { background: #fff; color: #4338ca; }
-	.view-header.hero .nav-btn { background: rgba(255, 255, 255, 0.92); border-color: transparent; color: #4338ca; }
-	.view-header.hero .nav-label { color: #fff; }
-	.view-header.hero .sort-select { background: rgba(255, 255, 255, 0.92); color: #1e1b4b; }
+	.view-header.hero .view-title-group {
+		margin-bottom: 0.25rem;
+	}
+	.view-header.hero .view-title {
+		color: #fff;
+	}
+	.view-header.hero .view-subtitle {
+		color: rgba(255, 255, 255, 0.85);
+	}
+	.view-header.hero .view-tools {
+		margin-top: 0.75rem;
+	}
+	.view-header.hero .tab-bar {
+		background: rgba(255, 255, 255, 0.16);
+	}
+	.view-header.hero .tab-btn {
+		color: rgba(255, 255, 255, 0.9);
+	}
+	.view-header.hero .tab-btn:hover {
+		color: #fff;
+	}
+	.view-header.hero .tab-btn.active {
+		background: #fff;
+		color: #4338ca;
+	}
+	.view-header.hero .nav-btn {
+		background: rgba(255, 255, 255, 0.92);
+		border-color: transparent;
+		color: #4338ca;
+	}
+	.view-header.hero .nav-label {
+		color: #fff;
+	}
+	.view-header.hero .sort-select {
+		background: rgba(255, 255, 255, 0.92);
+		color: #1e1b4b;
+	}
 </style>

frontend/src/lib/components/icons.ts

@@ -1,13 +1,72 @@
-export const dashboardIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>'
-export const choresIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>'
-export const rewardsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>'
-export const bonusesIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>'
-export const homeIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>'
-export const settingsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>'
-export const logoutIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'
-export const prefsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>'
-export const chevronLeft = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>'
-export const chevronRight = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>'
-export const bellIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>'
-export const chatIcon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>'
-export const sendIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>'
+export const dashboardIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>';
+export const choresIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>';
+export const rewardsIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>';
+export const moneyIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>';
+export const coinsIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6"/><path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>';
+export const walletIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg>';
+export const circleIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>';
+export const handCoinsIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="M2 16l1 1h2"/><path d="M4 12l1 1h2"/><path d="M6 8l1 1h2"/><path d="M2 20l1.5-.5"/><circle cx="16" cy="8" r="2"/></svg>';
+export const gemIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>';
+export const archiveIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>';
+export const todoIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg>';
+export const homeIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>';
+export const settingsIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>';
+export const logoutIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>';
+export const prefsIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
+export const chevronLeft =
+	'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>';
+export const chevronRight =
+	'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>';
+export const bellIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>';
+export const chatIcon =
+	'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>';
+export const monitorIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>';
+export const sendIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>';
+export const checkCircleIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>';
+export const revokeIcon =
+	'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>';
+export const targetIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>';
+export const calendarIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>';
+export const sunIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>';
+export const lockIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
+export const clockIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>';
+export const giftIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="8" width="18" height="4"/><path d="M12 8v13M12 8C12 8 9 3 6 5s0 3 3 3M12 8c0 0 3-5 6-3s0 3-3 3"/><path d="M5 12v9h14v-9"/></svg>';
+export const chevronLeftIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 6 -6 6 6 6"/></svg>';
+export const chevronRightIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 6 6 6 -6 6"/></svg>';
+export const alertTriangleIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>';
+export const xCircleIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg>';
+export const infoIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>';
+export const shieldIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 11.5 2 2 4-4"/></svg>';
+export const laptopIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9"/><path d="M4 16H2.9a1 1 0 0 0-.95 1.33l.6 1.5a1 1 0 0 0 .95.67h17a1 1 0 0 0 .95-.67l.6-1.5A1 1 0 0 0 21.1 16H20"/></svg>';

frontend/src/lib/components/index.ts

@@ -1,10 +1,20 @@
 export { default as Sidebar } from './Sidebar.svelte';
+export { default as FamDone } from './FamDone.svelte';
 export { default as TopNav } from './TopNav.svelte';
 export { default as Footer } from './Footer.svelte';
 export { default as ViewHeader } from './ViewHeader.svelte';
 export { default as Card } from './Card.svelte';
 export { default as CardGrid } from './CardGrid.svelte';
 export { default as Button } from './Button.svelte';
+export { default as SaveButton } from './SaveButton.svelte';
 export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
 export { default as Chat } from './Chat.svelte';
 export { default as AuthShell } from './AuthShell.svelte';
+export { default as NoticeDialog } from './NoticeDialog.svelte';
+export { default as PricingPlans } from './PricingPlans.svelte';
+export { default as CheckboxGrid } from './CheckboxGrid.svelte';
+export { default as PatternPicker } from './PatternPicker.svelte';
+export { default as PinPad } from './PinPad.svelte';
+export { default as SharedPicker } from './SharedPicker.svelte';
+export { default as JoinPinFlow } from './JoinPinFlow.svelte';

frontend/src/lib/format.ts

@@ -32,3 +32,19 @@ export function formatHumanDate(dateStr: string | undefined): string {
 	const sameYear = d.getFullYear() === new Date().getFullYear();
 	return `${weekday} ${d.getDate()} ${mon}${sameYear ? '' : ' ' + String(d.getFullYear()).slice(2)}`;
 }
+
+// Add months to a date (UTC), handling month overflow correctly.
+export function addMonthsUTC(date: Date, months: number): Date {
+	const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, date.getUTCDate()));
+	return d;
+}
+
+// Short human date: "5 Aug" / "5 Aug 26"
+export function formatShortDate(dateStr: string | Date | undefined): string {
+	if (!dateStr) return '';
+	const d = dateStr instanceof Date ? dateStr : new Date(dateStr);
+	if (Number.isNaN(d.getTime())) return '';
+	const mon = d.toLocaleDateString('en-GB', { month: 'short' });
+	const sameYear = d.getFullYear() === new Date().getFullYear();
+	return `${d.getDate()} ${mon}${sameYear ? '' : ' ' + String(d.getFullYear()).slice(2)}`;
+}

frontend/src/lib/forms.ts

@@ -0,0 +1,38 @@
+import { goto } from '$app/navigation';
+
+/**
+ * Resolve-callback factory for `use:enhance`.
+ *
+ * Follows `result.type === 'redirect'` automatically (actions like login,
+ * billing portal, and logged-out pricing choose throw redirects), then hands
+ * everything else to the optional handler — falling back to the default
+ * `update()` when none is given.
+ *
+ * Usage:
+ *   <form method="POST" use:enhance={handleResult(({ result }) => {...})}>
+ *   <form method="POST" use:enhance={handleResult()}>
+ */
+export function handleResult(
+	handler?: (ctx: { result: any; update: () => Promise<void> }) => Promise<void>
+) {
+	return async ({ result, update }: any) => {
+		if (result?.type === 'redirect') {
+			const target = String(result.location);
+			const isExternal = /^https?:\/\//i.test(target) && !target.startsWith(window.location.origin);
+			if (isExternal) {
+				window.location.assign(target);
+			} else {
+				await goto(target);
+			}
+			return;
+		}
+		if (result?.type === 'error') {
+			// Unhandled server exception — never let these vanish silently.
+			const { notices } = await import('$lib/stores/notices.svelte');
+			notices.error('Something went wrong', result.error?.message || 'Internal error.');
+			return;
+		}
+		if (handler) await handler({ result, update });
+		else await update();
+	};
+}

frontend/src/lib/pocketbase.ts

@@ -5,11 +5,15 @@ export const pb = new PocketBase(PB_ENDPOINT);
 pb.autoCancellation(false);
 
 // Seed the browser PB singleton with the session token so shared stores can
-// do authenticated reads + realtime .subscribe() from the client.
+// do authenticated reads + realtime .subscribe() from the client. When the
+// session is gone (logged out), clear the authStore — the default LocalAuthStore
+// persists the token in localStorage, so without this the client keeps an
+// authenticated singleton and effectively stays logged in.
 export function initRealtimePb(token: string) {
 	if (token) {
 		pb.authStore.save(token, null);
 		return true;
 	}
+	pb.authStore.clear();
 	return false;
 }

frontend/src/lib/server/access.ts

@@ -0,0 +1,101 @@
+import { pbAdmin } from '$lib/server/pocketbase';
+
+// How a family has access. 'none' = signed up with no code/sub yet (gated).
+export type PaymentMode = 'none' | 'code' | 'sub' | 'canceled';
+
+export interface FamAccess {
+	disabled: boolean;
+	mode: PaymentMode;
+	reason: '' | 'no_access' | 'canceled' | 'subscription_inactive' | 'code_disabled' | 'code_expired';
+}
+
+// UTC timestamp `months` months after `iso`. Used for the code's global expiry
+// (from the code's createdAt) and the duration clock (from entry date).
+export function addMonthsUTC(iso: string | Date, months: number): number {
+	const d = new Date(iso);
+	d.setUTCMonth(d.getUTCMonth() + months);
+	return d.getTime();
+}
+
+// A code is usable iff it exists, is not globally disabled, is not past its own
+// createdAt+expiry window (expiry 0 = never), and the duration clock from the
+// fam's entry date hasn't run out (duration 0 = continuous).
+export function codeIsValid(code: any, enteredAt?: string): boolean {
+	if (!code) return false;
+	if (code.active === false) return false;
+	const now = Date.now();
+	const expiryMonths = Number(code.expiry) || 0;
+	if (expiryMonths > 0 && now >= addMonthsUTC(code.createdAt, expiryMonths)) return false;
+	const durationMonths = Number(code.duration) || 0;
+	if (durationMonths > 0 && enteredAt) {
+		if (now >= addMonthsUTC(enteredAt, durationMonths)) return false;
+	}
+	return true;
+}
+
+// Deterministic decision from a fam + its linked code (no I/O). `active` on the
+// fam is the single source of truth for "usable right now".
+export function computeFamAccess(fam: any, code: any): FamAccess {
+	const mode: PaymentMode = fam.paymentMode || 'none';
+	switch (mode) {
+		case 'code': {
+			if (code?.active === false) return { disabled: true, mode, reason: 'code_disabled' };
+			return codeIsValid(code, fam.accessCodeEnteredAt)
+				? { disabled: false, mode, reason: '' }
+				: { disabled: true, mode, reason: 'code_expired' };
+		}
+		case 'sub':
+			return fam.active === false
+				? { disabled: true, mode, reason: 'subscription_inactive' }
+				: { disabled: false, mode, reason: '' };
+		case 'canceled':
+			return { disabled: true, mode, reason: 'canceled' };
+		case 'none':
+		default:
+			return { disabled: true, mode, reason: 'no_access' };
+	}
+}
+
+// Read the fam + linked code and persist `active` if it drifted. Called on every
+// [fam] layout load (both roles) and wherever access state must be re-evaluated.
+export async function ensureFamAccess(famId: string): Promise<{ fam: any; access: FamAccess }> {
+	const fam = await pbAdmin.getOne('fams', famId);
+	if (!fam) return { fam: null, access: { disabled: true, mode: 'none', reason: 'no_access' } };
+	let code: any = null;
+	if (fam.accessCodeId) {
+		try {
+			code = await pbAdmin.getOne('accesscodes', fam.accessCodeId);
+		} catch {
+			code = null;
+		}
+	}
+	const access = computeFamAccess(fam, code);
+	if (fam.active !== !access.disabled) {
+		await pbAdmin.update('fams', famId, { active: !access.disabled });
+	}
+	return { fam: { ...fam, active: !access.disabled }, access };
+}
+
+// Apply an access code value to a fam. Automatic (no approval) — validates
+// against the accesscodes collection and sets paymentMode='code' on success.
+export async function applyAccessCode(famId: string, value: string) {
+	const val = String(value || '').trim();
+	if (!val) return { error: 'Enter an access code' };
+	const list = await pbAdmin.getList('accesscodes', `value = '${val}'`);
+	const code = list?.[0];
+	if (!code) return { error: 'That access code is not recognised' };
+	if (code.active === false) return { error: 'That access code is disabled' };
+	const now = new Date().toISOString();
+	const valid = codeIsValid(code, now);
+	await pbAdmin.update('fams', famId, {
+		paymentMode: 'code',
+		accessCodeId: code.id,
+		accessCodeEnteredAt: now,
+		active: valid
+	});
+	return {
+		ok: true,
+		active: valid,
+		code: { name: code.name, value: code.value, duration: code.duration, expiry: code.expiry }
+	};
+}

frontend/src/lib/server/auth.ts

@@ -1,4 +1,5 @@
 import { redirect } from '@sveltejs/kit';
+import { clearLegacyCookies } from '$lib/server/session';
 import type { RequestEvent } from '@sveltejs/kit';
 import { pbAdmin } from '$lib/server/pocketbase';
 
@@ -17,7 +18,7 @@ export function requireAuth(event: RequestEvent) {
 export function clearSession(event: RequestEvent) {
 	event.cookies.delete('session', { path: '/' });
 	event.cookies.delete('pb_token', { path: '/' });
-	event.cookies.delete('device_token', { path: '/' });
+	clearLegacyCookies(event.cookies);
 }
 
 // Resolve the fam slug + admin display name used for the post-login redirect.

frontend/src/lib/server/email-templates.ts

@@ -0,0 +1,46 @@
+// Code-specific email templates for successful access-code redemption.
+// Key = the raw access-code value a family enters (e.g. "copppermill03").
+// Add an entry here and its custom email is sent when that code is used.
+// If no entry matches, `defaultAccessEmailTemplate` is used.
+
+export interface AccessEmailVars {
+	famName: string;
+	codeName: string;
+	dashboardUrl: string;
+}
+
+export interface AccessEmailTemplate {
+	subject: (vars: AccessEmailVars) => string;
+	html: (vars: AccessEmailVars) => string;
+}
+
+const DEFAULT_TEMPLATE: AccessEmailTemplate = {
+	subject: ({ famName }) => `Your ${famName} access is unlocked`,
+	html: ({ famName, codeName, dashboardUrl }) => `
+		<p>Hi${famName ? ` ${famName}` : ' there'}! 🎉</p>
+		<p>Your access code (<strong>${codeName}</strong>) has been applied successfully.</p>
+		<p>Your <strong>${famName}</strong> family on <strong>FamDone</strong> is now unlocked.</p>
+		<p><a href="${dashboardUrl}">Open your family dashboard</a> to add kids, set up chores, and get going.</p>
+		<p>If you have any questions, just reply to this email.</p>
+		<p>Talk soon,<br />The FamDone team</p>
+	`
+};
+
+export const accessEmailTemplates: Record<string, AccessEmailTemplate> = {
+	copppermill03: {
+		subject: ({ famName }) => `Save a spot for ${famName} — access unlocked`,
+		html: ({ famName, codeName, dashboardUrl }) => `
+			<p>Hi${famName ? ` ${famName}` : ' there'}! 🎉</p>
+			<p>Your access code (<strong>${codeName}</strong>) has been applied successfully.</p>
+			<p>Your <strong>${famName}</strong> family on <strong>FamDone</strong> is now unlocked.</p>
+			<p><a href="${dashboardUrl}">Open your family dashboard</a> to add kids, set up chores, and get going.</p>
+			<p>If you have any questions, just reply to this email.</p>
+			<p>Talk soon,<br />The FamDone team</p>
+		`
+	}
+};
+
+// Resolve the template for a redeemed code, falling back to the default.
+export function getAccessEmailTemplate(codeValue: string): AccessEmailTemplate {
+	return accessEmailTemplates[codeValue] || DEFAULT_TEMPLATE;
+}

frontend/src/lib/server/email.ts

@@ -0,0 +1,179 @@
+import { Resend } from 'resend';
+import { RESEND_API } from '$app/env/private';
+import { getAccessEmailTemplate } from './email-templates';
+import { getPlatformFlags } from '$lib/server/platform';
+
+const resend = new Resend(String(RESEND_API));
+
+let demoCache: { value: boolean; at: number } | null = null;
+const DEMO_TTL_MS = 10_000;
+
+async function isDemoMode(): Promise<boolean> {
+	if (demoCache && Date.now() - demoCache.at < DEMO_TTL_MS) return demoCache.value;
+	try {
+		const flags = await getPlatformFlags();
+		demoCache = { value: flags.demo === true, at: Date.now() };
+		return flags.demo === true;
+	} catch {
+		demoCache = { value: false, at: Date.now() };
+		return false;
+	}
+}
+
+export async function sendPasswordResetEmail(opts: {
+	to: string;
+	resetLink: string;
+	famName: string;
+}) {
+	if (await isDemoMode()) return;
+	const { to, resetLink, famName } = opts;
+
+	await resend.emails.send({
+		from: 'no-reply@walthamstow.xyz',
+		to,
+		subject: `Reset your password for ${famName}`,
+		html: `
+			<p>You requested a password reset for your <strong>${famName}</strong> account.</p>
+			<p><a href="${resetLink}">Click here to reset your password</a></p>
+			<p>This link expires in 1 hour.</p>
+			<p>If you didn't request this, you can ignore this email.</p>
+		`
+	});
+}
+
+export async function sendParentInviteEmail(opts: {
+	to: string;
+	inviteLink: string;
+	famName: string;
+	otp: string;
+}) {
+	if (await isDemoMode()) return;
+	const { to, inviteLink, famName, otp } = opts;
+
+	await resend.emails.send({
+		from: 'no-reply@walthamstow.xyz',
+		to,
+		subject: `You're invited to ${famName} on FamDone`,
+		html: `
+			<p>You've been invited as a parent on <strong>${famName}</strong>.</p>
+			<p><a href="${inviteLink}">Click here to join</a> and set up your password.</p>
+			<p>Your code is <strong>${otp}</strong> (valid 20 minutes).</p>
+			<p>If you weren't expecting this, you can ignore this email.</p>
+		`
+	});
+}
+
+export async function sendAccessUnlockedEmail(opts: {
+	to: string;
+	famName: string;
+	codeName: string;
+	codeValue: string;
+	dashboardUrl: string;
+}) {
+	if (await isDemoMode()) return;
+	const { to, famName, codeName, codeValue, dashboardUrl } = opts;
+
+	const template = getAccessEmailTemplate(codeValue);
+	const vars = { famName, codeName, dashboardUrl };
+
+	await resend.emails.send({
+		from: 'no-reply@walthamstow.xyz',
+		to,
+		subject: template.subject(vars),
+		html: template.html(vars)
+	});
+}
+
+export async function sendWelcomeEmail(opts: {
+	to: string;
+	famName: string;
+	dashboardUrl: string;
+}) {
+	if (await isDemoMode()) return;
+	const { to, famName, dashboardUrl } = opts;
+
+	await resend.emails.send({
+		from: 'no-reply@walthamstow.xyz',
+		to,
+		subject: `Welcome to FamDone${famName ? `, ${famName}` : ''}!`,
+		html: `
+			<p>Hi${famName ? ` ${famName}` : ' there'}! 👋</p>
+			<p>Welcome to <strong>FamDone</strong> — your family chore and pocket-money app.</p>
+			<p>Your family is all set up. Here's how to get going:</p>
+			<ul>
+				<li>Open your <a href="${dashboardUrl}">family dashboard</a>.</li>
+				<li>Add your kids and create join codes from <strong>Family Settings</strong>.</li>
+				<li>Set up chores, rewards, and allowances.</li>
+			</ul>
+			<p>
+				If you haven't already, you can pick a plan and pay from your dashboard to
+				unlock your family.
+			</p>
+			<p>If you have any questions, just reply to this email — we're happy to help.</p>
+			<p>Talk soon,<br />The FamDone team</p>
+		`
+	});
+}
+
+// A parent was @mentioned in family chat — tell them about it with a link
+// straight back to the family site. Message text is HTML-escaped.
+function escHtml(s: string): string {
+	return s
+		.replace(/&/g, '&amp;')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}
+
+export async function sendMentionEmail(opts: {
+	to: string;
+	parentName: string;
+	authorName: string;
+	message: string;
+	dashboardUrl: string;
+}) {
+	const { to, parentName, authorName, message, dashboardUrl } = opts;
+
+	await resend.emails.send({
+		from: 'no-reply@walthamstow.xyz',
+		to,
+		subject: `${authorName} mentioned you in family chat`,
+		html: `
+			<p>Hi ${escHtml(parentName)},</p>
+			<p><strong>${escHtml(authorName)}</strong> mentioned you in your family chat:</p>
+			<blockquote style="margin:1rem 0;padding:0.6rem 1rem;border-left:3px solid #6366f1;background:#f5f5ff;color:#374151;border-radius:6px">${escHtml(message)}</blockquote>
+			<p><a href="${dashboardUrl}">Open your family dashboard</a> to read and reply.</p>
+					<p>Talk soon,<br />The FamDone team</p>
+				`
+	});
+}
+
+// A child asked to collect a reward — ping the parent(s) with the ask and a
+// link straight to the Claims card on the admin dashboard.
+export async function sendClaimRequestEmail(opts: {
+	to: string;
+	parentName: string;
+	childName: string;
+	rewardName: string;
+	rewardValue: string;
+	dashboardUrl: string;
+}) {
+	if (await isDemoMode()) return;
+	const { to, parentName, childName, rewardName, rewardValue, dashboardUrl } = opts;
+
+	await resend.emails.send({
+		from: 'no-reply@walthamstow.xyz',
+		to,
+		subject: `${childName} asked to claim ${rewardName}`,
+		html: `
+					<p>Hi ${escHtml(parentName)},</p>
+					<p><strong>${escHtml(childName)}</strong> asked to collect a reward:</p>
+					<p>
+						<strong>${escHtml(rewardName)}</strong>
+						${rewardValue ? `— ${escHtml(rewardValue)}` : ''}
+					</p>
+					<p><a href="${dashboardUrl}">Open the Claims card on your dashboard</a> to review and issue it.</p>
+					<p>Talk soon,<br />The FamDone team</p>
+				`
+	});
+}

frontend/src/lib/server/member-otp.ts

@@ -55,6 +55,35 @@ export async function createChild(opts: {
 	}
 
 	if (!user) throw new Error('Failed to create child');
+
+	// Auto-create the child's pocket-money droplet. The amount (rewardValue)
+	// starts empty — the parent sets it on the Bonuses page. This keeps pocket
+	// money a first-class, always-present feature without a separate field.
+	const pm = await pb
+		.collection('bonus_configs')
+		.getFirstListItem(`famId='${opts.famId}' && memberId='${user.id}' && isPocketMoney=true`)
+		.catch(() => null);
+	if (!pm) {
+		await pb
+			.collection('bonus_configs')
+			.create({
+				famId: opts.famId,
+				name: 'Pocket Money',
+				target: 'individual',
+				type: 'threshold',
+				thresholdType: 'percent',
+				occurrence: 'recurring',
+				rewardType: 'cash',
+				rewardValue: '',
+				criteriaValue: 50,
+				memberId: user.id,
+				period: 'weekly',
+				status: 'active',
+				isPocketMoney: true
+			})
+			.catch(() => null);
+	}
+
 	return user;
 }
 
@@ -89,6 +118,94 @@ export async function issueAccess(opts: {
 	return { otp, joinUrl: `/${famSlug}/join/${encodeURIComponent(username)}` };
 }
 
+// Admin invites a second parent: creates a role='parent' users record with the
+// shared derived password (never known — the invited parent sets their own at
+// the join page) + issues an OTP email code. Rejects duplicates in the family.
+export async function inviteParent(opts: {
+	famId: string;
+	famSlug: string;
+	name: string;
+	email: string;
+}) {
+	const { famId, famSlug, name, email } = opts;
+	const handleName = handle(name);
+	const username = famUsername(famSlug, handleName);
+	const password = derivePassword(famSlug, handleName);
+	const pb = await createSuperClient();
+
+	const existing = await pb
+		.collection('users')
+		.getFirstListItem(`famId='${famId}' && (username='${username}' || email='${email}')`)
+		.catch(() => null);
+	if (existing) {
+		throw new Error('A user with that name or email already exists in this family');
+	}
+
+	const user = await pb.collection('users').create({
+		username,
+		name,
+		email,
+		emailVisibility: false,
+		password,
+		passwordConfirm: password,
+		famId,
+		role: 'parent'
+	});
+
+	const otp = generateOtp();
+	await pb.collection('otp').create({
+		famId,
+		userId: user.id,
+		otp,
+		updatedAt: new Date().toISOString()
+	});
+
+	return { otp, joinUrl: `/${famSlug}/join/${encodeURIComponent(handleName)}` };
+}
+
+// Invited parent redeems their OTP at the join page, sets their own password,
+// and is logged in. Single-use — the OTP record is deleted on success.
+export async function redeemParentOtp(opts: {
+	famSlug: string;
+	username: string;
+	otp: string;
+	password: string;
+}) {
+	const { famSlug, username, otp, password } = opts;
+	const handleName = handle(username);
+	const fullUsername = famUsername(famSlug, handleName);
+
+	const pb = await createSuperClient();
+
+	const fam = await pb.collection('fams').getFirstListItem(`slug='${famSlug}'`);
+	if (!fam) throw new Error('Invalid join link');
+
+	let user = await pb
+		.collection('users')
+		.getFirstListItem(`famId='${fam.id}' && username='${fullUsername}'`)
+		.catch(() => null);
+	if (!user || user.role !== 'parent') throw new Error('Invalid join link');
+
+	const config = await pb
+		.collection('otp')
+		.getFirstListItem(`famId='${fam.id}' && userId='${user.id}'`)
+		.catch(() => null);
+	if (!config || config.otp !== otp) throw new Error('Invalid code');
+
+	const issued = Date.parse(config.updatedAt || '');
+	if (!issued || Date.now() - issued > OTP_TTL_MS) throw new Error('Code expired');
+
+	await pb.collection('users').update(user.id, { password, passwordConfirm: password });
+	await pb
+		.collection('otp')
+		.delete(config.id)
+		.catch(() => null);
+
+	const authPb = createPbClient();
+	await authPb.collection('users').authWithPassword(user.email, password);
+	return authPb.authStore.token;
+}
+
 // Child redeems their OTP at /{famSlug}/join/{username}. Verifies the code,
 // the 20-minute window, and that the account is a child, then authenticates via
 // authWithPassword and returns a fresh PB JWT. Throws on any failure.
@@ -118,8 +235,8 @@ export async function redeemOtp(opts: { famSlug: string; username: string; otp:
 	if (!issued || Date.now() - issued > OTP_TTL_MS) throw new Error('Code expired');
 
 	const authPb = createPbClient();
-	await authPb
+	const { record } = await authPb
 		.collection('users')
 		.authWithPassword(fullUsername, derivePassword(famSlug, handleName));
-	return authPb.authStore.token;
+	return { token: authPb.authStore.token, userId: record.id };
 }

frontend/src/lib/server/pins.ts

@@ -0,0 +1,50 @@
+import { randomBytes } from 'node:crypto';
+import { createSuperClient } from '$lib/server/pocketbase';
+
+// Child shared-device PINs. Superuser-only collection (like `otp`): every
+// read/write goes through server endpoints with session-role checks, so a
+// child can never read a sibling's PIN via PB rules.
+export const PIN_RE = /^\d{3}$/;
+
+export function generatePin(): string {
+	const n = randomBytes(2).readUIntBE(0, 2) % 1000;
+	return n.toString().padStart(3, '0');
+}
+
+async function getPinRow(userId: string) {
+	const pb = await createSuperClient();
+	return pb
+		.collection('pins')
+		.getFirstListItem(`userId='${userId}'`)
+		.catch(() => null);
+}
+
+export async function getPin(userId: string): Promise<string | null> {
+	const row = await getPinRow(userId);
+	return row?.pin || null;
+}
+
+export async function hasPin(userId: string): Promise<boolean> {
+	return (await getPin(userId)) !== null;
+}
+
+export async function setPin(famId: string, userId: string, pin: string): Promise<void> {
+	const pb = await createSuperClient();
+	const row = await getPinRow(userId);
+	if (row) {
+		await pb.collection('pins').update(row.id, { pin });
+	} else {
+		await pb.collection('pins').create({ famId, userId, pin });
+	}
+}
+
+export async function resetPin(famId: string, userId: string): Promise<string> {
+	const pin = generatePin();
+	await setPin(famId, userId, pin);
+	return pin;
+}
+
+export async function verifyPin(userId: string, pin: string): Promise<boolean> {
+	const row = await getPinRow(userId);
+	return !!row && row.pin === pin;
+}

frontend/src/lib/server/platform.ts

@@ -0,0 +1,36 @@
+import { pbAdmin } from '$lib/server/pocketbase';
+
+// Platform-level feature flags, stored on the singleton `platform` record
+// (label='global'). Replaces the deprecated per-fam fams.featureFlags.
+export type PlatformFlags = Record<string, boolean>;
+
+let cache: { flags: PlatformFlags; at: number } | null = null;
+const TTL_MS = 10_000;
+
+async function findGlobal(): Promise<any | null> {
+	const recs = (await pbAdmin.getList('platform', `label = 'global'`)) as any[];
+	return recs[0] || null;
+}
+
+// Public read used by loads. Cached briefly so per-request layout loads don't
+// hammer PB; flag changes propagate within the TTL.
+export async function getPlatformFlags(): Promise<PlatformFlags> {
+	if (cache && Date.now() - cache.at < TTL_MS) return cache.flags;
+	try {
+		const rec = await findGlobal();
+		cache = { flags: rec?.flags || {}, at: Date.now() };
+	} catch {
+		if (!cache) cache = { flags: {}, at: Date.now() };
+	}
+	return cache.flags;
+}
+
+// Superuser write (platform admin dashboard / server-side only).
+export async function setPlatformFlag(key: string, value: boolean): Promise<PlatformFlags> {
+	const rec = await findGlobal();
+	if (!rec) throw new Error('platform settings record missing');
+	const flags: PlatformFlags = { ...(rec.flags || {}), [key]: value };
+	await pbAdmin.update('platform', rec.id, { flags });
+	cache = { flags, at: Date.now() };
+	return flags;
+}

frontend/src/lib/server/pocketbase.ts

@@ -30,9 +30,16 @@ export function pbUser(event: RequestEvent) {
 // Superuser PB client (memoized). Reserved for server-only privileged
 // operations that must bypass collection rules: creating child users, minting
 // OTP-login tokens, and verifying OTPs against the superuser-only otp.
+//
+// NOTE: the auth token expires (prod PB showed ~36h). A stale memoized client
+// goes out UNAUTHENTICATED, and PocketBase answers unauthenticated getOne()
+// calls with 404 "resource wasn't found" — which the toggle path misreads as
+// CHORE_GONE for every chore. So always re-auth when the stored token is no
+// longer valid instead of reusing a dead client.
 let superClient: PocketBase | null = null;
 export async function createSuperClient() {
-	if (superClient) return superClient;
+	if (superClient?.authStore.isValid) return superClient;
+	superClient = null;
 	const pb = new PocketBase(PB_ENDPOINT);
 	pb.autoCancellation(false);
 	await pb.collection('_superusers').authWithPassword(String(PB_EMAIL), String(PB_PASSWORD));
@@ -40,29 +47,43 @@ export async function createSuperClient() {
 	return pb;
 }
 
+// Run a superuser op, retrying once with a freshly-authenticated client when
+// the first attempt hits an auth-shaped failure. A locally-valid token can
+// still be dead server-side (restart/revoked secret rotation), and PB
+// surfaces that as 401/403 — or as 404 when a viewRule then denies access.
+async function withSuperRetry<T>(op: (pb: PocketBase) => Promise<T>): Promise<T> {
+	try {
+		return await op(await createSuperClient());
+	} catch (e: any) {
+		const status = e?.status;
+		if (status === 401 || status === 403 || status === 404) {
+			superClient = null;
+			return await op(await createSuperClient());
+		}
+		throw e;
+	}
+}
+
 // Superuser CRUD facade, built on the memoized SDK superuser client. All
 // server PB access (authenticated user + superuser) lives in this one module.
 export const pbAdmin = {
 	async getList(collection: string, filter = '') {
-		const pb = await createSuperClient();
+		return withSuperRetry((pb) => {
 			const options: { filter?: string } = {};
 			if (filter) options.filter = filter;
 			return pb.collection(collection).getFullList(options);
+		});
 	},
 	async getOne(collection: string, id: string) {
-		const pb = await createSuperClient();
-		return pb.collection(collection).getOne(id);
+		return withSuperRetry((pb) => pb.collection(collection).getOne(id));
 	},
 	async create(collection: string, data: Record<string, unknown>) {
-		const pb = await createSuperClient();
-		return pb.collection(collection).create(data);
+		return withSuperRetry((pb) => pb.collection(collection).create(data));
 	},
 	async update(collection: string, id: string, data: Record<string, unknown>) {
-		const pb = await createSuperClient();
-		return pb.collection(collection).update(id, data);
+		return withSuperRetry((pb) => pb.collection(collection).update(id, data));
 	},
 	async remove(collection: string, id: string) {
-		const pb = await createSuperClient();
-		return pb.collection(collection).delete(id);
+		return withSuperRetry((pb) => pb.collection(collection).delete(id));
 	}
 };

frontend/src/lib/server/services/bonuses.ts

@@ -4,14 +4,43 @@ import {
 	periodStart,
 	periodEnd,
 	nextPaydayAfter,
-	weekStart
+	weekStart,
+	weekdayInTz,
+	bonusWindow,
+	completionInWindow
 } from '@shared/timezone';
+import { computeBonusProgress } from '@shared/bonus-progress';
 import { famMeta } from './fam';
+import { pbAdmin } from '$lib/server/pocketbase';
+
+// `fams` reads via superuser: the acting token may predate RULE_OWN_FAM
+// (migrate only bootstraps fresh stores), which otherwise logs a 404 and
+// aborts evaluation. Fam-scoped by record id.
+async function famMetaSU(famId: string) {
+	try {
+		const fam: any = await pbAdmin.getOne('fams', famId);
+		return {
+			payday: fam.payday !== undefined && fam.payday !== null ? Number(fam.payday) : 1,
+			paydayTime: fam.paydayTime || '18:00',
+			tz: resolveTz(fam.timezone || 'auto')
+		};
+	} catch {
+		return { payday: 1, paydayTime: '18:00', tz: resolveTz('auto') };
+	}
+}
 
 function resolveServerTz(tz?: string): string {
 	return resolveTz(tz || 'auto');
 }
 
+const getRewardValue = (cfg: any): number => {
+	const n = Number(cfg.rewardValue);
+	// Prize rewards carry the payout in `label`/rewardValue text ("fluffy toy"),
+	// not a number — but PB rejects value 0 on the required number field, so
+	// fall back to 1 and let the label carry the meaning.
+	return Number.isFinite(n) && n > 0 ? n : 1;
+};
+
 function claimableStamp(cfg: any, payday: number, tz: string) {
 	if (cfg.period !== 'weekly' && cfg.period !== 'monthly') {
 		return { claimable: 'immediate', settleDate: '' };
@@ -19,7 +48,24 @@ function claimableStamp(cfg: any, payday: number, tz: string) {
 	const now = todayInTz(resolveServerTz(tz));
 	const start = cfg.period === 'monthly' ? `${now.slice(0, 7)}-01` : weekStart(payday, tz);
 	const end = periodEnd(cfg.period, start);
-	return { claimable: 'payday', settleDate: nextPaydayAfter(end, payday, tz) };
+	// Weeks close on payday, so a weekly window's end IS the settle date —
+	// nextPaydayAfter(end) would skip a whole extra week.
+	const settle =
+		weekdayInTz(new Date(end + 'T12:00:00Z'), tz) === payday
+			? end
+			: nextPaydayAfter(end, payday, tz);
+	return { claimable: 'payday', settleDate: settle };
+}
+
+function targetChoreFor(cfg: any, memberId: string): string | undefined {
+	if (
+		cfg.targetChoreIds &&
+		typeof cfg.targetChoreIds === 'object' &&
+		cfg.targetChoreIds[memberId]
+	) {
+		return cfg.targetChoreIds[memberId];
+	}
+	return cfg.targetChoreId || undefined;
 }
 
 export async function evaluateFam(pb: any, famId: string) {
@@ -42,18 +88,33 @@ export async function evaluateFam(pb: any, famId: string) {
 	try {
 		allRewards = await pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` });
 	} catch {}
-	const { payday: paydayEval, tz: tzEval } = await famMeta(pb, famId);
+	const { payday: paydayEval, tz: tzEval } = await famMetaSU(famId);
+
+	// Chores "due" this week per member (daily = 7, otherwise 1). Used by the
+	// `percent` threshold type to compute % of chores completed.
+	const dueByMember: Record<string, number> = {};
+	for (const a of allAssigned) {
+		if (a.memberId)
+			dueByMember[a.memberId] = (dueByMember[a.memberId] || 0) + (a.frequency === 'daily' ? 7 : 1);
+	}
+	const totalDue = Object.values(dueByMember).reduce((s, n) => s + n, 0) || 1;
 
 	for (const cfg of configs) {
-		const pStart2 = cfg.period ? periodStart(cfg.period, paydayEval, tzEval) : '';
-		const pEnd = cfg.period ? periodEnd(cfg.period, pStart2) : '';
-		const periodCompletions = cfg.period
-			? allCompletions.filter(
-					(c: any) => (c.date || '').slice(0, 10) >= pStart2 && (c.date || '').slice(0, 10) <= pEnd
-				)
-			: allCompletions;
+		// Pocket money pauses until the parent sets an amount.
+		if (cfg.isPocketMoney && !cfg.rewardValue) continue;
+		const win = bonusWindow(cfg, paydayEval, tzEval);
+		const periodCompletions = allCompletions.filter((c: any) => completionInWindow(c, win));
 
 		const existingRewards = allRewards.filter((r: any) => r.bonusConfigId === cfg.id);
+		// Uniform rule, one reward row per config per member per window:
+		// achieved + no window reward → create; unachieved → delete the window
+		// reward unless it is claimed, requested, or payday-gated (those persist
+		// by design until the parent issues them). Only rewards dated inside the
+		// CURRENT window count as "already rewarded" — last week's row must never
+		// block this week's payout.
+		const windowRewards = existingRewards.filter((r: any) => completionInWindow(r, win));
+		const removable = (r: any) =>
+			r.status !== 'claimed' && r.status !== 'requested' && r.claimable !== 'payday';
 		let createdReward = false;
 
 		const rewardData = (memberId: string) => {
@@ -67,7 +128,7 @@ export async function evaluateFam(pb: any, famId: string) {
 				memberId,
 				bonusConfigId: cfg.id,
 				label,
-				value: Number(cfg.rewardValue) || 0,
+				value: getRewardValue(cfg),
 				rewardType: cfg.rewardType,
 				status: cfg.rewardType === 'points' ? 'claimed' : 'unclaimed',
 				claimedAt: cfg.rewardType === 'points' ? now : null,
@@ -76,107 +137,140 @@ export async function evaluateFam(pb: any, famId: string) {
 			};
 		};
 
-		if (cfg.target === 'individual') {
-			const targetMembers = cfg.memberId ? allMembers.filter((m: any) => m.id === cfg.memberId) : allMembers;
-			for (const m of targetMembers) {
-				const memberCompletions = periodCompletions.filter((c: any) => c.memberId === m.id);
-				let current = 0;
+		// Completions counting toward one member (target-chore scoped when set).
+		const completionsFor = (memberId: string) => {
+			const memberTarget = targetChoreFor(cfg, memberId);
+			let list = periodCompletions.filter((c: any) => c.memberId === memberId);
+			if (memberTarget) list = list.filter((c: any) => c.assignedChoreId === memberTarget);
+			// Collaborative configs only honour the shared targetChoreId.
+			if (cfg.target === 'collaborative' && cfg.targetChoreId)
+				list = list.filter((c: any) => c.assignedChoreId === cfg.targetChoreId);
+			return list;
+		};
+		// Score for one member: percent of due chores, points value, or raw count.
+		const scoreFor = (memberId: string): number => {
+			const list = completionsFor(memberId);
 			if (cfg.type === 'threshold') {
-					current = memberCompletions.reduce((sum: number, c: any) => {
+				if (cfg.thresholdType === 'percent') {
+					const due = dueByMember[memberId] || 0;
+					return due > 0 ? Math.round((list.length / due) * 100) : 0;
+				}
+				return list.reduce((sum: number, c: any) => {
 					const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
 					return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
 				}, 0);
-				} else if (cfg.type === 'count') {
-					current = memberCompletions.length;
 			}
-				const achieved = cfg.criteriaValue > 0 && current >= Number(cfg.criteriaValue);
-
-				const memberReward = existingRewards.find((r: any) => r.memberId === m.id);
-
-				if (memberReward && !achieved) {
-					if (memberReward.status !== 'claimed') {
+			if (cfg.type === 'count') return list.length;
+			return 0;
+		};
+		const met = (current: number) => cfg.criteriaValue > 0 && current >= Number(cfg.criteriaValue);
+		// Reconcile one member's window reward against their achieved state.
+		// Returns true when a live window reward exists afterwards.
+		const reconcile = async (memberId: string, achieved: boolean): Promise<boolean> => {
+			const live = windowRewards.filter((r: any) => r.memberId === memberId);
+			if (!achieved) {
+				for (const r of live) {
+					if (!removable(r)) continue;
 					try {
-							await pb.collection('rewards').delete(memberReward.id);
+						await pb.collection('rewards').delete(r.id);
 					} catch {}
+					windowRewards.splice(windowRewards.indexOf(r), 1);
 				}
-					continue;
+				return false;
 			}
-
-				if (memberReward) continue;
-
-				if (achieved) {
-					await pb.collection('rewards').create(rewardData(m.id));
+			if (live.length > 0) return true;
+			await pb.collection('rewards').create(rewardData(memberId));
 			createdReward = true;
-				}
-			}
-		} else if (cfg.target === 'collaborative') {
-			const allMemberIds = allMembers.map((m: any) => m.id);
-			const teamCompletions = periodCompletions.filter((c: any) => allMemberIds.includes(c.memberId));
-			let total = 0;
-			if (cfg.type === 'threshold') {
-				total = teamCompletions.reduce((sum: number, c: any) => {
-					const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
-					return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
-				}, 0);
-			} else if (cfg.type === 'count') {
-				total = teamCompletions.length;
-			}
-			const achieved = cfg.criteriaValue > 0 && total >= Number(cfg.criteriaValue);
-
-			if (!achieved && existingRewards.length > 0) {
-				for (const r of existingRewards) {
-					if (r.status !== 'claimed') {
+			return true;
+		};
+		// Drop stale prior-window placeholders (unclaimed, non-gated) so they
+		// can't pile up unseen; gated/requested/claimed rows persist by design.
+		const purgeStale = async (memberId: string) => {
+			const stale = existingRewards.filter(
+				(r: any) => r.memberId === memberId && !completionInWindow(r, win) && removable(r)
+			);
+			for (const r of stale) {
 				try {
 					await pb.collection('rewards').delete(r.id);
 				} catch {}
 			}
-				}
-				continue;
-			}
+		};
 
-			if (achieved && existingRewards.length === 0) {
-				for (const m of allMembers) {
-					await pb.collection('rewards').create(rewardData(m.id));
+		if (cfg.target === 'competitive') {
+			// Winner-takes-all: a single window reward held by the top scorer.
+			const scored = allMembers.map((m: any) => ({ memberId: m.id, current: scoreFor(m.id) }));
+			const qualified = scored.filter((s: any) => met(s.current));
+			const eligible = qualified.length > 0 ? qualified : scored.filter((s: any) => s.current > 0);
+			const winner = eligible.sort((a: any, b: any) => b.current - a.current)[0];
+			const holder = windowRewards[0];
+			if (!winner) {
+				if (holder && removable(holder)) {
+					try {
+						await pb.collection('rewards').delete(holder.id);
+					} catch {}
+				}
+			} else if (!holder) {
+				await purgeStale(winner.memberId);
+				await pb.collection('rewards').create(rewardData(winner.memberId));
+				createdReward = true;
+			} else if (holder.memberId !== winner.memberId) {
+				if (removable(holder)) {
+					try {
+						await pb.collection('rewards').delete(holder.id);
+					} catch {}
+					await purgeStale(winner.memberId);
+					await pb.collection('rewards').create(rewardData(winner.memberId));
 					createdReward = true;
 				}
+				// A locked (claimed/requested/gated) holder keeps the crown until issued.
 			}
-		} else if (cfg.target === 'competitive') {
-			const scored = allMembers.map((m: any) => {
-				const memberCompletions = periodCompletions.filter((c: any) => c.memberId === m.id);
-				let current = 0;
-				if (cfg.type === 'threshold') {
-					current = memberCompletions.reduce((sum: number, c: any) => {
+		} else {
+			// Individual: each member against their own score. Collaborative: the
+			// whole team against the team total, rewarded per member.
+			let teamTotal = 0;
+			if (cfg.target === 'collaborative') {
+				const ids = new Set(allMembers.map((m: any) => m.id));
+				let team = periodCompletions.filter((c: any) => ids.has(c.memberId));
+				if (cfg.targetChoreId)
+					team = team.filter((c: any) => c.assignedChoreId === cfg.targetChoreId);
+				if (cfg.type === 'threshold' && cfg.thresholdType === 'percent') {
+					teamTotal = Math.round((team.length / totalDue) * 100);
+				} else if (cfg.type === 'threshold') {
+					teamTotal = team.reduce((sum: number, c: any) => {
 						const chore = allAssigned.find((a: any) => a.id === c.assignedChoreId);
 						return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
 					}, 0);
 				} else if (cfg.type === 'count') {
-					current = memberCompletions.length;
-				}
-				return { memberId: m.id, name: m.name, current };
-			});
-			const qualified = scored.filter((s: any) => cfg.criteriaValue > 0 && s.current >= Number(cfg.criteriaValue));
-			const eligible = qualified.length > 0 ? qualified : scored.filter((s: any) => s.current > 0);
-			const winner = eligible.sort((a: any, b: any) => b.current - a.current)[0];
-
-			if (existingRewards.length > 0) {
-				const existing = existingRewards[0];
-				const stillValid = winner && existing.memberId === winner.memberId && winner.current > 0;
-				if (!stillValid && existing.status !== 'claimed') {
-					try {
-						await pb.collection('rewards').delete(existing.id);
-					} catch {}
+					teamTotal = team.length;
 				}
 			}
-
-			if (winner && existingRewards.length === 0) {
-				await pb.collection('rewards').create(rewardData(winner.memberId));
-				createdReward = true;
+			const members =
+				cfg.target === 'individual' && cfg.memberId
+					? allMembers.filter((m: any) => m.id === cfg.memberId)
+					: allMembers;
+			for (const m of members) {
+				const achieved =
+					cfg.target === 'collaborative' ? met(teamTotal) : met(scoreFor(m.id));
+				await reconcile(m.id, achieved);
+				await purgeStale(m.id);
 			}
 		}
 
 		if (cfg.occurrence === 'once' && (existingRewards.length > 0 || createdReward)) {
+			// Status write via superuser: evaluate often runs as a child token
+			// (fire-and-forget after a chore toggle) and bonus_configs updates
+			// are parent-only — the user-token write 403s and the config stays
+			// `active` forever. Stamp who earned it + when.
+			const earner =
+				existingRewards.find((r: any) => r.memberId)?.memberId ||
+				allMembers[0]?.id ||
+				'auto';
 			try {
-				await pb.collection('bonus_configs').update(cfg.id, { status: 'completed' });
+				await pbAdmin.update('bonus_configs', cfg.id, {
+					status: 'completed',
+					completedAt: new Date().toISOString().slice(0, 10),
+					completedBy: earner
+				});
 			} catch {}
 		}
 	}
@@ -200,90 +294,13 @@ export async function progress(pb: any, famId: string) {
 		pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}'` }),
 		pb.collection('completions').getFullList({ filter: `famId = '${famId}'` })
 	]);
-
-	const assignedList = assigned;
-	const completionsList = completions;
 	let allRewards: any[] = [];
 	try {
 		allRewards = await pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` });
 	} catch {}
-
-	const result: any[] = [];
-
-	for (const cfg of configsData) {
-		const cfgRewards = allRewards.filter((r: any) => r.bonusConfigId === cfg.id);
-		const pStart = cfg.period ? periodStart(cfg.period, payday, tz) : '';
-		const pEnd = cfg.period ? periodEnd(cfg.period, pStart) : '';
-		const periodCompletions = cfg.period
-			? completionsList.filter((c: any) => c.date >= pStart && c.date <= pEnd)
-			: completionsList;
-
-		const progressRows: any[] = [];
-
-		if (cfg.target === 'collaborative') {
-			const teamCompletions = periodCompletions.filter((c: any) =>
-				members.some((m: any) => m.id === c.memberId)
-			);
-			let teamCurrent = 0;
-			if (cfg.type === 'threshold') {
-				teamCurrent = teamCompletions.reduce((sum: number, c: any) => {
-					const chore = assignedList.find((a: any) => a.id === c.assignedChoreId);
-					return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
-				}, 0);
-			} else if (cfg.type === 'count') {
-				teamCurrent = teamCompletions.length;
-			}
-			const teamReward = cfgRewards[0];
-			progressRows.push({
-				memberId: '__team__',
-				memberName: 'Team Total',
-				memberColor: '#8b5cf6',
-				current: teamCurrent,
-				criteriaValue: cfg.criteriaValue || 0,
-				reward: teamReward ? { id: teamReward.id, status: teamReward.status } : null,
-				state: teamReward ? teamReward.status : 'pending',
-				achieved: teamReward ? true : false
-			});
-		}
-
-		if (cfg.target !== 'collaborative') {
-			const progressMembers =
-				cfg.target === 'individual' && cfg.memberId
-					? members.filter((m: any) => m.id === cfg.memberId)
-					: members;
-			for (const m of progressMembers) {
-				const memberCompletions = periodCompletions.filter((c: any) => c.memberId === m.id);
-				const memberReward = cfgRewards.find((r: any) => r.memberId === m.id);
-
-				let current = 0;
-				if (cfg.type === 'threshold') {
-					current = memberCompletions.reduce((sum: number, c: any) => {
-						const chore = assignedList.find((a: any) => a.id === c.assignedChoreId);
-						return sum + (chore?.type === 'points' ? Number(chore.value) : 0);
-					}, 0);
-				} else if (cfg.type === 'count') {
-					current = memberCompletions.length;
-				} else if (cfg.type === 'manual') {
-					current = 0;
-				}
-
-				progressRows.push({
-					memberId: m.id,
-					memberName: m.name,
-					memberColor: m.color,
-					current,
-					criteriaValue: cfg.criteriaValue || 0,
-					reward: memberReward ? { id: memberReward.id, status: memberReward.status } : null,
-					state: memberReward ? memberReward.status : 'pending',
-					achieved: memberReward ? true : false
-				});
-			}
-		}
-
-		result.push({ config: cfg, progress: progressRows, periodStart: pStart, periodEnd: pEnd });
-	}
-
-	return result;
+	// Shared with the Rewards page client-side realtime recompute (famStore + SSE),
+	// so the admin kanban and member dashboard always show identical progress.
+	return computeBonusProgress(configsData, members, assigned, completions, allRewards, payday, tz);
 }
 
 export async function trigger(pb: any, famId: string, configId: string, memberId?: string) {
@@ -324,9 +341,7 @@ export async function trigger(pb: any, famId: string, configId: string, memberId
 			const pEnd = periodEnd(cfg.period, pStart);
 			const periodRewards = memberRewards.filter((r: any) => r.date >= pStart && r.date <= pEnd);
 			if (periodRewards.length > 0) {
-				throw new Error(
-					`Already issued ${periodRewards.length}x this ${cfg.period} to ${m.name}`
-				);
+				throw new Error(`Already issued ${periodRewards.length}x this ${cfg.period} to ${m.name}`);
 			}
 		}
 	}
@@ -343,7 +358,7 @@ export async function trigger(pb: any, famId: string, configId: string, memberId
 			memberId: m.id,
 			bonusConfigId: cfg.id,
 			label,
-			value: Number(cfg.rewardValue) || 0,
+			value: getRewardValue(cfg),
 			rewardType: cfg.rewardType,
 			status: cfg.rewardType === 'points' ? 'claimed' : 'unclaimed',
 			claimedAt: cfg.rewardType === 'points' ? now : null,

frontend/src/lib/server/services/chat.ts

@@ -1,3 +1,6 @@
+import { sendMentionEmail } from '../email';
+import { pbAdmin } from '$lib/server/pocketbase';
+
 export type ChatActor = {
 	id: string;
 	type: 'admin' | 'member';
@@ -5,19 +8,33 @@ export type ChatActor = {
 	color: string;
 };
 
+// Everyone in the family (children + parents) for the @mention picker.
 export async function chatMe(pb: any, famId: string, actor: ChatActor) {
-	return { famId, actor };
+	const users = await pb
+		.collection('users')
+		.getFullList({ filter: `famId = '${famId}'` })
+		.catch(() => []);
+	return {
+		famId,
+		actor,
+		members: users.map((m: any) => ({
+			id: m.id,
+			name: m.name || '',
+			color: m.color || '#6366f1',
+			role: m.role === 'parent' ? 'parent' : 'child'
+		}))
+	};
 }
 
 export async function send(
 	pb: any,
 	famId: string,
 	actor: ChatActor,
-	body: { content?: string; clientId?: string }
+	body: { content?: string; clientId?: string; siteUrl?: string }
 ) {
 	const content = (body.content || '').trim();
 	if (!content) throw new Error('content required');
-	return pb.collection('messages').create({
+	const record = await pb.collection('messages').create({
 		famId,
 		authorType: actor.type,
 		authorId: actor.id,
@@ -27,14 +44,67 @@ export async function send(
 		createdAt: new Date().toISOString(),
 		clientId: body.clientId ? String(body.clientId).slice(0, 64) : ''
 	});
+	// Email any @mentioned parents (their in-app toast is client-side, via the
+	// same mention tokens). Fire-and-forget — never fail the message itself.
+	notifyMentionedParents(pb, famId, actor, record, body.siteUrl || '').catch((err: any) => {
+		console.error('[chat] notifyMentionedParents top-level catch:', err);
+	});
+	return record;
 }
 
-export async function typing(
+// Scan the message for `@Parent Name` tokens (case-insensitive) and email every
+// mentioned parent who isn't the sender, with a link back to the family site.
+async function notifyMentionedParents(
 	pb: any,
 	famId: string,
 	actor: ChatActor,
-	body: { typing?: boolean }
+	message: any,
+	siteUrl: string
 ) {
+	const content = String(message.content || '');
+	// Find parents whose name appears in the message content.
+	// getFullList for auth users may not return email, so we fetch
+	// each matched parent individually via pbAdmin to get the address.
+	const parents = await pb
+		.collection('users')
+		.getFullList({ filter: `famId = '${famId}' && role = 'parent'` })
+		.catch((err: any) => {
+			console.error('[chat] Failed to fetch parents:', err);
+			return [];
+		});
+	const mentioned = parents.filter((u: any) => {
+		if (u.id === actor.id) return false;
+		const name = (u.name || '').trim().toLowerCase();
+		return !!name && content.toLowerCase().includes('@' + name);
+	});
+	if (!mentioned.length) return;
+
+	const fam = await pb
+		.collection('fams')
+		.getOne(famId)
+		.catch(() => null);
+	// Don't send emails for the demo family.
+	if (fam?.slug === 'showboaters') return;
+	const dashboardUrl = `${siteUrl}/${fam?.slug || famId}`;
+	for (const parent of mentioned) {
+		try {
+			const parentRec = await pbAdmin.getOne('users', parent.id);
+			const parentEmail = parentRec.email;
+			if (!parentEmail) continue;
+			await sendMentionEmail({
+				to: parentEmail,
+				parentName: parent.name || 'there',
+				authorName: message.authorName || 'Family member',
+				message: content,
+				dashboardUrl
+			});
+		} catch (err) {
+			console.error(`[chat] Failed to send mention email to ${parent.name}:`, err);
+		}
+	}
+}
+
+export async function typing(pb: any, famId: string, actor: ChatActor, body: { typing?: boolean }) {
 	const existing = await pb.collection('chat_typing').getFullList({
 		filter: `famId = '${famId}' && actorId = '${actor.id}' && actorType = '${actor.type}'`
 	});

frontend/src/lib/server/services/chores.ts

@@ -1,22 +1,18 @@
 import { famMeta } from './fam';
+import { weekStart } from '@shared/timezone';
 
 // Aggregated kanban payload for a single member (child session).
 export async function myChores(pb: any, famId: string, memberId: string) {
 	const [templates, assigned, completions, rewards, bonusConfigs] = await Promise.all([
 		pb.collection('chore_templates').getFullList({ filter: `famId = '${famId}'` }),
-		pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}' && memberId = '${memberId}'` }),
+		pb.collection('assigned_chores').getFullList({
+			filter: `famId = '${famId}' && (memberId = '${memberId}' || memberId = '')`
+		}),
 		pb.collection('completions').getFullList({ filter: `famId = '${famId}' && memberId = '${memberId}'` }),
 		pb.collection('rewards').getFullList({ filter: `famId = '${famId}' && memberId = '${memberId}'` }),
 		pb.collection('bonus_configs').getFullList({ filter: `famId = '${famId}' && status = 'active'` })
 	]);
 	const { payday, paydayTime, tz } = await famMeta(pb, famId);
-	let settings: any = {};
-	try {
-		const s = await pb
-			.collection('settings')
-			.getFullList({ filter: `famId = '${famId}'` });
-		settings = s?.[0] || {};
-	} catch {}
 	return {
 		templates,
 		assigned,
@@ -25,7 +21,37 @@ export async function myChores(pb: any, famId: string, memberId: string) {
 		bonusConfigs,
 		payday,
 		paydayTime,
-		timezone: tz,
-		simulateEow: !!settings.simulateEow
+		timezone: tz
 	};
 }
+
+// Purge stale todos. A todo is a one-off item with a completeBy deadline; if it
+// is never completed it lingers in `assigned_chores` forever (shown as EXPIRED).
+// Once a new week has started past the deadline's week we delete it so it
+// doesn't accumulate. Must be called with a client that can delete (parent /
+// superuser) — child clients can't delete assigned_chores.
+export async function cleanupExpiredTodos(pb: any, famId: string): Promise<number> {
+	const { payday, tz } = await famMeta(pb, famId);
+	const ws = weekStart(payday, tz);
+
+	const todos = await pb.collection('assigned_chores').getFullList({
+		filter: `famId = '${famId}' && isTodo = true && completeBy != ''`
+	});
+
+	const completions = await pb
+		.collection('completions')
+		.getFullList({ filter: `famId = '${famId}'` })
+		.catch(() => []);
+	const doneIds = new Set(completions.map((c: any) => c.assignedChoreId));
+
+	let removed = 0;
+	for (const todo of todos) {
+		// Only consider uncompleted todos whose deadline fell before this week.
+		if (doneIds.has(todo.id)) continue;
+		if (!todo.completeBy || todo.completeBy >= ws) continue;
+		await pb.collection('assigned_chores').delete(todo.id).catch(() => {});
+		removed++;
+	}
+	if (removed) console.log(`[chores] Purged ${removed} expired todo(s) for fam ${famId}`);
+	return removed;
+}

frontend/src/lib/server/services/completions.ts

@@ -1,23 +1,38 @@
 import { periodWindow } from '@shared/timezone';
-import { famMeta } from './fam';
+import { pbAdmin } from '$lib/server/pocketbase';
 import { evaluateFam } from './bonuses';
 
+// Reads/writes the acting user may not be permitted by PB rules:
+// - `fams` view (prod may predate RULE_OWN_FAM; migrate only bootstraps fresh)
+// - `assigned_chores` update (parent-only rule, but children claim shared chores)
+// Both stay fam-scoped: the fam record id and the chore's own famId are checked.
+async function famMetaSU(famId: string) {
+	const fam: any = await pbAdmin.getOne('fams', famId);
+	const { resolveTz } = await import('@shared/timezone');
+	return {
+		payday: fam.payday !== undefined && fam.payday !== null ? Number(fam.payday) : 1,
+		paydayTime: fam.paydayTime || '18:00',
+		tz: resolveTz(fam.timezone || 'auto')
+	};
+}
+
+async function claimChore(assignedChoreId: string, famId: string, memberId: string | '') {
+	const chore: any = await pbAdmin.getOne('assigned_chores', assignedChoreId);
+	if (!chore || chore.famId !== famId) throw new Error('Chore not found');
+	await pbAdmin.update('assigned_chores', assignedChoreId, { memberId });
+}
+
 export async function myChores(pb: any, famId: string, memberId: string) {
 	const [templates, assigned, completions, rewards, bonusConfigs] = await Promise.all([
 		pb.collection('chore_templates').getFullList({ filter: `famId = '${famId}'` }),
-		pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}' && memberId = '${memberId}'` }),
+		pb.collection('assigned_chores').getFullList({
+			filter: `famId = '${famId}' && (memberId = '${memberId}' || memberId = '')`
+		}),
 		pb.collection('completions').getFullList({ filter: `famId = '${famId}' && memberId = '${memberId}'` }),
 		pb.collection('rewards').getFullList({ filter: `famId = '${famId}' && memberId = '${memberId}'` }),
 		pb.collection('bonus_configs').getFullList({ filter: `famId = '${famId}' && status = 'active'` })
 	]);
-	const { payday, paydayTime, tz } = await famMeta(pb, famId);
-	let settings: any = {};
-	try {
-		const s = await pb
-			.collection('settings')
-			.getFullList({ filter: `famId = '${famId}'` });
-		settings = s?.[0] || {};
-	} catch {}
+	const { payday, paydayTime, tz } = await famMetaSU(famId);
 	return {
 		templates,
 		assigned,
@@ -26,25 +41,56 @@ export async function myChores(pb: any, famId: string, memberId: string) {
 		bonusConfigs,
 		payday,
 		paydayTime,
-		timezone: tz,
-		simulateEow: !!settings.simulateEow
+		timezone: tz
 	};
 }
 
-export async function toggle(pb: any, famId: string, memberId: string, body: { assignedChoreId: string; date: string }) {
+export async function toggle(pb: any, famId: string, memberId: string, body: { assignedChoreId: string; date: string; completedAt?: string }) {
 	const { assignedChoreId, date } = body;
 	if (!assignedChoreId || !date) throw new Error('assignedChoreId and date required');
+	// Backdated catch-up (yesterday mode) stamps the completion for the viewed
+	// day, never "now" — the logical `date` always comes from the client, and
+	// an explicit `completedAt` is honoured when it parses (validated ISO,
+	// defaulting to now). Server-side period windows are always computed from
+	// the real current day, so a yesterday stamp can't shift window logic.
+	let completedAt = new Date().toISOString();
+	if (typeof body.completedAt === 'string') {
+		const t = new Date(body.completedAt).getTime();
+		if (Number.isFinite(t)) completedAt = new Date(t).toISOString();
+	}
 
-	const choreList = await pb
-		.collection('assigned_chores')
-		.getFullList({ filter: `famId = '${famId}' && id = '${assignedChoreId}'` });
-	const chore = choreList?.[0];
+	// Chore existence is checked as superuser so a stale client ID (parent
+	// re-saved the chores grid → old assigned rows deleted, new ids issued)
+	// surfaces as a clear "gone" error instead of PB's generic
+	// "resource cannot be found" relation-validation 400. The child's own
+	// token is still used for the completion writes below (PB rules enforce).
+	let chore: any;
+	try {
+		chore = await pbAdmin.getOne('assigned_chores', assignedChoreId);
+	} catch (e) {
+		console.error(
+			`[diag] toggle CHORE_GONE(getOne-fail) member=${memberId} fam=${famId} chore=${assignedChoreId} date=${date} err=${e instanceof Error ? e.message : e}`
+		);
+		throw new Error('CHORE_GONE: this chore was changed — refresh to get the latest list');
+	}
+	if (!chore || chore.famId !== famId) {
+		console.error(
+			`[diag] toggle CHORE_GONE(fam-mismatch) member=${memberId} sessionFam=${famId} chore=${assignedChoreId} choreFam=${chore?.famId} choreMember=${chore?.memberId} date=${date}`
+		);
+		throw new Error('CHORE_GONE: this chore was changed — refresh to get the latest list');
+	}
 	const isTodo = chore?.isTodo;
+	const isShared = chore?.shared === true || !chore?.memberId;
+	// Only one-off shared todos are claimed (winner takes it). Recurring
+	// shared chores stay unassigned so every member completes independently
+	// each period — claiming them permanently hides the chore from siblings.
+	const isClaimable = isShared && !!isTodo;
+
 	let filter: string;
 	if (isTodo) {
 		filter = `assignedChoreId = '${assignedChoreId}' && memberId = '${memberId}'`;
 	} else {
-		const { payday, tz } = await famMeta(pb, famId);
+		const { payday, tz } = await famMetaSU(famId);
 		const { from, to } = periodWindow(chore?.frequency, payday, tz);
 		filter = `assignedChoreId = '${assignedChoreId}' && memberId = '${memberId}' && date >= '${from}' && date < '${to}'`;
 	}
@@ -53,17 +99,56 @@ export async function toggle(pb: any, famId: string, memberId: string, body: { a
 		.getFullList({ filter });
 	if (existing?.length > 0) {
 		await pb.collection('completions').delete(existing[0].id);
-		evaluateFam(pb, famId).catch(() => {});
+		// Un-completing a cash todo removes its one-time reward.
+		if (isTodo && existing[0].rewardId) {
+			await pb.collection('rewards').delete(existing[0].rewardId).catch(() => {});
+		}
+		// If this was a claimed one-off todo, release it back to shared.
+		if (isClaimable && existing[0].memberId === memberId) {
+			await claimChore(assignedChoreId, famId, '');
+		}
+		// Bonus evaluation is awaited (not fire-and-forget) so failures are
+		// visible in the server log instead of silently swallowing missed payouts.
+		// The client already updates optimistically, so this doesn't block the UI.
+		try {
+			await evaluateFam(pb, famId);
+		} catch (e) {
+			console.error('[evaluateFam] after un-complete:', e);
+		}
 		return { completed: false };
 	}
+	let rewardId: string | undefined;
+	if (isTodo && chore?.type === 'money' && Number(chore.value) > 0) {
+		const reward = await pb.collection('rewards').create({
+			famId,
+			memberId,
+			label: chore.customName || 'Cash todo',
+			value: Number(chore.value),
+			rewardType: 'cash',
+			status: 'unclaimed',
+			claimable: 'payday',
+			date
+		});
+		rewardId = reward.id;
+	}
 	const record = await pb.collection('completions').create({
 		famId,
 		memberId,
 		assignedChoreId,
 		date,
-		completedAt: new Date().toISOString()
+		completedAt,
+		...(rewardId ? { rewardId } : {})
 	});
-	evaluateFam(pb, famId).catch(() => {});
+	// Claim a shared one-off todo by setting memberId (recurring shared
+	// chores stay unassigned — see isClaimable above).
+	if (isClaimable) {
+		await claimChore(assignedChoreId, famId, memberId);
+	}
+	try {
+		await evaluateFam(pb, famId);
+	} catch (e) {
+		console.error('[evaluateFam] after toggle:', e);
+	}
 	return { completed: true, record };
 }
 
@@ -72,7 +157,19 @@ export async function revoke(pb: any, famId: string, completionId: string) {
 		.collection('completions')
 		.getFullList({ filter: `famId = '${famId}' && id = '${completionId}'` });
 	if (!completions?.length) throw new Error('Completion not found');
+	const completion = completions[0];
 	await pb.collection('completions').delete(completionId);
-	evaluateFam(pb, famId).catch(() => {});
+	// If this was a shared chore, clear memberId to make it available again
+	const choreList = await pb.collection('assigned_chores')
+		.getFullList({ filter: `famId = '${famId}' && id = '${completion.assignedChoreId}'` });
+	const chore = choreList?.[0];
+	if (chore?.shared === true) {
+		await claimChore(chore.id, famId, '');
+	}
+	try {
+		await evaluateFam(pb, famId);
+	} catch (e) {
+		console.error('[evaluateFam] after revoke:', e);
+	}
 	return { revoked: true };
 }

frontend/src/lib/server/services/crud.ts

@@ -6,10 +6,10 @@ const RESOURCES: Record<
 	string,
 	{ col: string; listFilter: (famId: string) => string; bonus?: 'config' | 'template' }
 > = {
-	'chore-templates': { col: 'chore_templates', listFilter: (f) => `famId = '${f}'` },
+	'chore-templates': { col: 'chore_templates', listFilter: (f) => `(famId = '${f}' || global = true)` },
 	members: { col: 'users', listFilter: (f) => `famId = '${f}' && role = 'child'` },
 	'assigned-chores': { col: 'assigned_chores', listFilter: (f) => `famId = '${f}'` },
-	'bonus-templates': { col: 'bonus_templates', listFilter: (f) => `famId = '${f}'`, bonus: 'template' },
+	'bonus-templates': { col: 'bonus_templates', listFilter: (f) => `(famId = '${f}' || global = true)`, bonus: 'template' },
 	'bonus-configs': { col: 'bonus_configs', listFilter: (f) => `famId = '${f}'`, bonus: 'config' },
 	completions: { col: 'completions', listFilter: (f) => `famId = '${f}'` },
 	rewards: { col: 'rewards', listFilter: (f) => `famId = '${f}'` },

frontend/src/lib/server/services/fam.ts

@@ -8,6 +8,7 @@ import {
 } from '@shared/timezone';
 import { slugify } from '@shared/slugify';
 import { evaluateFam } from './bonuses';
+import { cleanupExpiredTodos } from './chores';
 
 function resolveServerTz(tz?: string): string {
 	return resolveTz(tz || 'auto');
@@ -68,7 +69,16 @@ export async function patchFam(pb: any, famId: string, body: Record<string, unkn
 
 export async function getProfile(pb: any, famId: string, userId: string) {
 	const rec = await pb.collection('users').getOne(userId);
-	return { id: rec.id, name: rec.name || '', color: rec.color || '#6366f1', email: rec.email || '' };
+	return {
+		id: rec.id,
+		name: rec.name || '',
+		color: rec.color || '#6366f1',
+		pattern: rec.pattern || '',
+		themeSize: rec.themeSize || '',
+		themeOpacity: rec.themeOpacity || '',
+		partyEmoji: rec.partyEmoji || '',
+		email: rec.email || ''
+	};
 }
 
 export async function updateProfile(
@@ -80,9 +90,23 @@ export async function updateProfile(
 	const patch: Record<string, unknown> = {};
 	if (data.name) patch.name = data.name;
 	if (data.color) patch.color = data.color;
+	if (data.pattern !== undefined) patch.pattern = data.pattern;
+	if (data.themeSize !== undefined) patch.themeSize = data.themeSize;
+	if (data.themeOpacity !== undefined) patch.themeOpacity = data.themeOpacity;
+	if (data.partyEmoji !== undefined)
+		patch.partyEmoji = String(data.partyEmoji).trim().slice(0, 8) || '🐖';
 	if (data.email !== undefined) patch.email = data.email;
 	const rec = await pb.collection('users').update(userId, patch);
-	return { id: rec.id, name: rec.name || '', color: rec.color || '#6366f1', email: rec.email || '' };
+	return {
+		id: rec.id,
+		name: rec.name || '',
+		color: rec.color || '#6366f1',
+		pattern: rec.pattern || '',
+		themeSize: rec.themeSize || '',
+		themeOpacity: rec.themeOpacity || '',
+		partyEmoji: rec.partyEmoji || '',
+		email: rec.email || ''
+	};
 }
 
 export async function weeklySummary(pb: any, famId: string) {
@@ -149,8 +173,11 @@ export async function weeklySummary(pb: any, famId: string) {
 
 		let bonusMoney = 0;
 		try {
+			// Incoming cash counts too (unclaimed/requested, e.g. achieved but
+			// not yet approved pocket money) — this is the "earned this week"
+			// figure, not just banked cash.
 			const cashRewards = await pb.collection('rewards').getFullList({
-					filter: `famId = '${famId}' && memberId = '${m.id}' && rewardType = 'cash' && status = 'claimed' && date >= '${ws}'`
+				filter: `famId = '${famId}' && memberId = '${m.id}' && rewardType = 'cash' && date >= '${ws}'`
 			});
 			bonusMoney = cashRewards.reduce((sum: number, r: any) => sum + Number(r.value), 0);
 		} catch {}
@@ -172,149 +199,6 @@ export async function weeklySummary(pb: any, famId: string) {
 	return { weekStart: ws, daysInWeek, summaries };
 }
 
-export async function eowPreview(pb: any, famId: string) {
-	const { payday, tz } = await famMeta(pb, famId);
-	const ws = weekStart(payday, tz);
-	const we = periodEnd('weekly', ws);
-
-	const [members, assigned, completions, configs, rewards] = await Promise.all([
-		pb.collection('users').getFullList({ filter: `famId = '${famId}' && role = 'child'` }),
-		pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}'` }),
-		pb.collection('completions').getFullList({ filter: `famId = '${famId}' && date >= '${ws}'` }),
-		pb
-			.collection('bonus_configs')
-			.getFullList({ filter: `famId = '${famId}' && status = 'active'` })
-			.catch(() => []),
-		pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` }).catch(() => [])
-	]);
-
-	let rewardPointsList: any[] = [];
-	let rewardCashList: any[] = [];
-	try {
-		[rewardPointsList, rewardCashList] = await Promise.all([
-			pb.collection('rewards').getFullList({
-				filter: `famId = '${famId}' && rewardType = 'points' && status = 'claimed' && date >= '${ws}'`
-			}),
-			pb.collection('rewards').getFullList({
-				filter: `famId = '${famId}' && rewardType = 'cash' && status = 'claimed' && date >= '${ws}'`
-			})
-		]);
-	} catch {}
-
-	const assignedList = assigned;
-	const completionsList = completions;
-
-	const summaries = members.map((m: any) => {
-		const mc = completionsList.filter((c: any) => c.memberId === m.id);
-		const weekPoints = mc.reduce((sum: number, c: any) => {
-			const ch = assignedList.find((a: any) => a.id === c.assignedChoreId);
-			return sum + (ch?.type === 'points' ? Number(ch.value) : 0);
-		}, 0);
-		const weekMoney = mc.reduce((sum: number, c: any) => {
-			const ch = assignedList.find((a: any) => a.id === c.assignedChoreId);
-			return sum + (ch?.type === 'money' ? Number(ch.value) : 0);
-		}, 0);
-		const bonusPoints = rewardPointsList
-			.filter((r: any) => r.memberId === m.id)
-			.reduce((sum: number, r: any) => sum + Number(r.value), 0);
-		const bonusMoney = rewardCashList
-			.filter((r: any) => r.memberId === m.id)
-			.reduce((sum: number, r: any) => sum + Number(r.value), 0);
-		return {
-			memberId: m.id,
-			memberName: m.name || m.username || m.id.slice(0, 6),
-			memberColor: m.color,
-			pointsEarned: weekPoints + bonusPoints,
-			moneyEarned: weekMoney + bonusMoney,
-			choresCompleted: mc.length,
-			bonusEarned: bonusPoints
-		};
-	});
-
-	const predictedRewards: any[] = [];
-	const existingRewards = rewards;
-	for (const cfg of configs) {
-		if (cfg.type === 'manual') continue;
-		const pStart = cfg.period ? periodStart(cfg.period, payday, tz) : '';
-		const pEnd = cfg.period ? periodEnd(cfg.period, pStart) : '';
-		const periodCompletions = cfg.period
-			? completionsList.filter(
-					(c: any) => (c.date || '').slice(0, 10) >= pStart && (c.date || '').slice(0, 10) <= pEnd
-				)
-			: completionsList;
-		const cfgRewards = existingRewards.filter((r: any) => r.bonusConfigId === cfg.id);
-
-		const tryEval = (sourceComps: any[]) => {
-			if (cfg.type === 'threshold')
-				return sourceComps.reduce((sum: number, c: any) => {
-					const ch = assignedList.find((a: any) => a.id === c.assignedChoreId);
-					return sum + (ch?.type === 'points' ? Number(ch.value) : 0);
-				}, 0);
-			if (cfg.type === 'count') return sourceComps.length;
-			return 0;
-		};
-
-		if (cfg.target === 'individual') {
-			const targets = cfg.memberId ? members.filter((m: any) => m.id === cfg.memberId) : members;
-			for (const m of targets) {
-				if (cfgRewards.some((r: any) => r.memberId === m.id)) continue;
-				const current = tryEval(periodCompletions.filter((c: any) => c.memberId === m.id));
-				if (cfg.criteriaValue > 0 && current >= Number(cfg.criteriaValue))
-					predictedRewards.push({
-						config: cfg.name,
-						memberName: m.name || m.id.slice(0, 6),
-						type: cfg.rewardType,
-						value: Number(cfg.rewardValue) || 0,
-						detail: `${cfg.type} ${current}/${cfg.criteriaValue}`
-					});
-			}
-		} else if (cfg.target === 'collaborative') {
-			if (cfgRewards.length) continue;
-			const allIds = members.map((m: any) => m.id);
-			const teamComps = periodCompletions.filter((c: any) => allIds.includes(c.memberId));
-			const current = tryEval(teamComps);
-			if (cfg.criteriaValue > 0 && current >= Number(cfg.criteriaValue))
-				predictedRewards.push({
-					config: cfg.name,
-					memberName: 'Everyone',
-					type: cfg.rewardType,
-					value: Number(cfg.rewardValue) || 0,
-					detail: `${cfg.type} ${current}/${cfg.criteriaValue}`
-				});
-		} else if (cfg.target === 'competitive') {
-			if (cfgRewards.length) continue;
-			const scored = members.map((m: any) => ({
-				memberId: m.id,
-				name: m.name,
-				current: tryEval(periodCompletions.filter((c: any) => c.memberId === m.id))
-			}));
-			const qualified = scored.filter((st: any) => st.current >= Number(cfg.criteriaValue));
-			const eligible = qualified.length ? qualified : scored.filter((st: any) => st.current > 0);
-			const winner = eligible.sort((aa: any, bb: any) => bb.current - aa.current)[0];
-			if (winner)
-				predictedRewards.push({
-					config: cfg.name,
-					memberName: winner.name,
-					type: cfg.rewardType,
-					value: Number(cfg.rewardValue) || 0,
-					detail: `winner ${winner.current} pts`
-				});
-		}
-	}
-
-	const nextWeekStart = addDaysStr(ws, 7);
-
-	return {
-		simulateEow: true,
-		weekStart: ws,
-		weekEnd: we,
-		nextWeekStart,
-		summaries,
-		predictedRewards,
-		completionsThisWeek: completionsList.length
-	};
-}
-
 export async function releaseWeek(pb: any, famId: string) {
 	const { payday, paydayTime, tz } = await famMeta(pb, famId);
 	const fams = await pb.collection('fams').getFullList({ filter: `id = '${famId}'` });
@@ -322,7 +206,10 @@ export async function releaseWeek(pb: any, famId: string) {
 	if (!fam) throw new Error('Fam not found');
 
 	const wsToday = weekStart(payday, tz);
-	const target = new Date(wallClockToUtc(wsToday, paydayTime || '18:00', tz));
+	// Settlement lands on payday itself — the SIXTH day of the wsToday week
+	// (weeks close on payday), not on weekStart.
+	const paydayDate = addDaysStr(wsToday, 6);
+	const target = new Date(wallClockToUtc(paydayDate, paydayTime || '18:00', tz));
 	if (Date.now() < target.getTime()) {
 		return {
 			settled: false,
@@ -379,6 +266,8 @@ export async function completeWeek(pb: any, famId: string) {
 	const ws = weekStart(payday, tz);
 
 	await evaluateFam(pb, famId);
+	// Start of a new week → purge todos whose deadline was in a prior week.
+	await cleanupExpiredTodos(pb, famId).catch(() => {});
 
 	const [members, assigned, completions] = await Promise.all([
 		pb.collection('users').getFullList({ filter: `famId = '${famId}' && role = 'child'` }),
@@ -394,7 +283,7 @@ export async function completeWeek(pb: any, famId: string) {
 				filter: `famId = '${famId}' && rewardType = 'points' && status = 'claimed' && date >= '${ws}'`
 			}),
 			pb.collection('rewards').getFullList({
-				filter: `famId = '${famId}' && rewardType = 'cash' && status = 'claimed' && date >= '${ws}'`
+				filter: `famId = '${famId}' && rewardType = 'cash' && date >= '${ws}'`
 			})
 		]);
 	} catch {}

frontend/src/lib/server/services/index.ts

@@ -7,6 +7,7 @@ import * as chatSvc from './chat';
 import * as settingsSvc from './settings';
 import * as crudSvc from './crud';
 import * as debugSvc from './debug';
+import * as statsSvc from './stats';
 
 export * from './chat';
 export { famMeta } from './fam';
@@ -35,7 +36,6 @@ export function createServices(
 					...(timezone !== undefined ? { timezone } : {})
 				}),
 			weeklySummary: (famId: string) => famSvc.weeklySummary(pb, famId),
-			eowPreview: (famId: string) => famSvc.eowPreview(pb, famId),
 			payday: (famId: string) => famSvc.releaseWeek(pb, famId),
 			completeWeek: (famId: string) => famSvc.completeWeek(pb, famId),
 			getProfile: (famId: string) => famSvc.getProfile(pb, famId, uid),
@@ -48,15 +48,18 @@ export function createServices(
 				crudSvc.create(pb, resource, famId, data),
 			update: (resource: string, famId: string, id: string, data: Record<string, unknown>) =>
 				crudSvc.update(pb, resource, famId, id, data),
-			remove: (resource: string, famId: string, id: string) => crudSvc.remove(pb, resource, famId, id)
+			remove: (resource: string, famId: string, id: string) =>
+				crudSvc.remove(pb, resource, famId, id)
 		},
 		chores: {
-			myChores: (famId: string) => choresSvc.myChores(pb, famId, uid)
+			myChores: (famId: string) => choresSvc.myChores(pb, famId, uid),
+			cleanupExpiredTodos: (famId: string) => choresSvc.cleanupExpiredTodos(pb, famId)
 		},
 		completions: {
-			toggle: (famId: string, body: { assignedChoreId: string; date: string }) =>
+			toggle: (famId: string, body: { assignedChoreId: string; date: string; completedAt?: string }) =>
 				completionsSvc.toggle(pb, famId, uid, body),
-			revoke: (famId: string, completionId: string) => completionsSvc.revoke(pb, famId, completionId)
+			revoke: (famId: string, completionId: string) =>
+				completionsSvc.revoke(pb, famId, completionId)
 		},
 		rewards: {
 			claim: (famId: string, id: string) => rewardsSvc.claim(pb, famId, id),
@@ -76,9 +79,12 @@ export function createServices(
 				return pb.collection('bonus_configs').update(configId, updates);
 			},
 			complete: (famId: string, configId: string) =>
-				pb.collection('bonus_configs').update(configId, { status: 'completed' }),
-			destroy: (famId: string, configId: string) =>
-				pb.collection('bonus_configs').delete(configId)
+				pb.collection('bonus_configs').update(configId, {
+					status: 'completed',
+					completedAt: new Date().toISOString().slice(0, 10),
+					completedBy: 'admin'
+				}),
+			destroy: (famId: string, configId: string) => pb.collection('bonus_configs').delete(configId)
 		},
 		settings: {
 			get: (famId: string) => settingsSvc.getSettings(pb, famId),
@@ -87,13 +93,19 @@ export function createServices(
 		},
 		chat: {
 			me: (famId: string, actor: chatSvc.ChatActor) => chatSvc.chatMe(pb, famId, actor),
-			send: (famId: string, actor: chatSvc.ChatActor, body: { content?: string; clientId?: string }) =>
-				chatSvc.send(pb, famId, actor, body),
+			send: (
+				famId: string,
+				actor: chatSvc.ChatActor,
+				body: { content?: string; clientId?: string; siteUrl?: string }
+			) => chatSvc.send(pb, famId, actor, body),
 			typing: (famId: string, actor: chatSvc.ChatActor, body: { typing?: boolean }) =>
 				chatSvc.typing(pb, famId, actor, body)
 		},
 		debug: {
 			generateData: (famId: string, days?: number) => debugSvc.generateData(pb, famId, days)
+		},
+		stats: {
+			family: (famId: string) => statsSvc.familyStats(pb, famId)
 		}
 	};
 }

frontend/src/lib/server/services/rewards.ts

@@ -1,49 +1,83 @@
-import { todayInTz, resolveTz } from '@shared/timezone';
+import { todayInTz, resolveTz, wallClockToUtc } from '@shared/timezone';
 import { famMeta } from './fam';
+import { pbAdmin } from '$lib/server/pocketbase';
 
 function resolveServerTz(tz?: string): string {
 	return resolveTz(tz || 'auto');
 }
 
-export function assertPaydayUnlocked(reward: any, tz?: string) {
+// A `once` goal is finished the moment its reward is approved — complete the
+// config here (not just in evaluateFam, which runs on toggles/revoke/payday) so
+// the child dashboard stops offering it even before the next toggle.
+// Config write via superuser: bonus_configs updates are parent-only.
+// Outstanding (unclaimed/requested) rewards are untouched — they stay visible
+// and collectible; only the approval moment completes the goal.
+async function completeOnceConfig(famId: string, reward: any) {
+	if (!reward?.bonusConfigId) return;
+	try {
+		const cfg: any = await pbAdmin.getOne('bonus_configs', reward.bonusConfigId);
+		if (!cfg || cfg.famId !== famId) return;
+		if (cfg.occurrence !== 'once' || cfg.status === 'completed') return;
+		await pbAdmin.update('bonus_configs', cfg.id, {
+			status: 'completed',
+			completedAt: new Date().toISOString().slice(0, 10),
+			completedBy: reward.memberId || 'admin'
+		});
+	} catch {}
+}
+
+// Payday-gated rewards (claimable 'payday', e.g. pocket money) unlock on the
+// settle DATE at the fam's configured payday TIME — not midnight. Anything
+// else (claimable 'immediate'/unset, e.g. manual triggers) is always claimable.
+export function assertPaydayUnlocked(reward: any, tz?: string, paydayTime?: string) {
 	if (!reward || reward.claimable !== 'payday' || !reward.settleDate) return;
-	const today = todayInTz(resolveServerTz(tz));
-	if (today < reward.settleDate) {
-		throw new Error(`This bonus pays out on payday (${reward.settleDate}) — hang tight!`);
+	const resolvedTz = resolveServerTz(tz);
+	const settle = (reward.settleDate as string).slice(0, 10);
+	const today = todayInTz(resolvedTz);
+	if (today < settle) {
+		throw new Error(`This bonus pays out on payday (${settle}) — hang tight!`);
+	}
+	if (today === settle && paydayTime && /^\d{2}:\d{2}$/.test(paydayTime)) {
+		const unlock = wallClockToUtc(settle, paydayTime, resolvedTz);
+		if (Date.now() < unlock) {
+			throw new Error(`This bonus unlocks at ${paydayTime} on payday — hang tight!`);
+		}
 	}
 }
 
 // Member claim → status 'requested' (pending parent approval).
 export async function claim(pb: any, famId: string, id: string) {
 	const now = new Date().toISOString();
-	const { tz } = await famMeta(pb, famId);
+	const { tz, paydayTime } = await famMeta(pb, famId);
 	const found = await pb
 		.collection('rewards')
 		.getFullList({ filter: `famId = '${famId}' && id = '${id}'` });
 	const reward = found?.[0];
 	if (!reward) throw new Error('Reward not found');
-	assertPaydayUnlocked(reward, tz);
+	assertPaydayUnlocked(reward, tz, paydayTime);
 	return pb.collection('rewards').update(id, { status: 'requested', requestedAt: now });
 }
 
 // Admin approval → status 'claimed'.
 export async function approve(pb: any, famId: string, id: string) {
-	return pb.collection('rewards').update(id, {
+	const record = await pb.collection('rewards').update(id, {
 		status: 'claimed',
 		claimedAt: new Date().toISOString()
 	});
+	await completeOnceConfig(famId, record);
+	return record;
 }
 
 export async function requestAll(pb: any, famId: string, memberId: string) {
 	const now = new Date().toISOString();
-	const { tz } = await famMeta(pb, famId);
+	const { tz, paydayTime } = await famMeta(pb, famId);
 	const rewards = await pb.collection('rewards').getFullList({
 		filter: `famId = '${famId}' && memberId = '${memberId}' && status = 'unclaimed'`
 	});
 	let count = 0;
 	for (const r of rewards) {
 		try {
-			assertPaydayUnlocked(r, tz);
+			assertPaydayUnlocked(r, tz, paydayTime);
 		} catch {
 			continue;
 		}
@@ -61,7 +95,8 @@ export async function issueAll(pb: any, famId: string, memberId: string) {
 	});
 	let count = 0;
 	for (const r of rewards) {
-		await pb.collection('rewards').update(r.id, { status: 'claimed', claimedAt: now });
+		const record = await pb.collection('rewards').update(r.id, { status: 'claimed', claimedAt: now });
+		await completeOnceConfig(famId, record);
 		count++;
 	}
 	return { count };

frontend/src/lib/server/services/settings.ts

@@ -8,14 +8,13 @@ function resolveServerTz(tz?: string): string {
 export async function getSettings(pb: any, famId: string) {
 	const list = await pb.collection('settings').getFullList({ filter: `famId = '${famId}'` });
 	const s = list?.[0] || {};
-	return { simulateEow: !!s.simulateEow, webhookUrl: s.webhookUrl || '' };
+	return { webhookUrl: s.webhookUrl || '' };
 }
 
 export async function updateSettings(pb: any, famId: string, data: Record<string, unknown>) {
 	const list = await pb.collection('settings').getFullList({ filter: `famId = '${famId}'` });
 	const existing = list?.[0];
 	const patch: Record<string, unknown> = {};
-	if (data.simulateEow !== undefined) patch.simulateEow = !!data.simulateEow;
 	if (data.webhookUrl !== undefined) patch.webhookUrl = String(data.webhookUrl);
 	let s;
 	if (existing) {
@@ -23,5 +22,5 @@ export async function updateSettings(pb: any, famId: string, data: Record<string
 	} else {
 		s = await pb.collection('settings').create({ famId, ...patch });
 	}
-	return { simulateEow: !!s.simulateEow, webhookUrl: s.webhookUrl || '' };
+	return { webhookUrl: s.webhookUrl || '' };
 }

frontend/src/lib/server/services/stats.ts

@@ -0,0 +1,130 @@
+import { addDaysStr, weekdayInTz, resolveTz } from '@shared/timezone';
+import { famMeta } from './fam';
+
+// Week start (payday-anchored) for an arbitrary YYYY-MM-DD date — a
+// parametric form of `weekStart()` so we can bucket historical weeks, not
+// just the current one. Weeks close on payday (open the day after).
+function weekStartFor(dateStr: string, payday: number, tz: string): string {
+	const wd = weekdayInTz(new Date(dateStr + 'T12:00:00Z'), tz);
+	const sincePayday = (((wd - payday) % 7) + 7) % 7;
+	const back = sincePayday === 0 ? 6 : sincePayday - 1;
+	return addDaysStr(dateStr, -back);
+}
+
+export type WeeklyPoint = {
+	weekStart: string;
+	points: number;
+	cash: number;
+	chores: number;
+};
+
+export type MemberSeries = {
+	memberId: string;
+	memberName: string;
+	memberColor: string;
+	weeks: WeeklyPoint[];
+};
+
+export type FamilyStats = {
+	allTimePts: number;
+	allTimeCash: number;
+	allTimeChores: number;
+	series: MemberSeries[];
+};
+
+// Server-side lifetime + weekly aggregates. Scans full-history `completions`
+// and `rewards` once here (filtered and summed on the server) so the client
+// receives fixed-size pre-computed numbers instead of every historical row —
+// this is what keeps the all-time totals + retrospective graph scalable.
+export async function familyStats(pb: any, famId: string): Promise<FamilyStats> {
+	const { payday, tz } = await famMeta(pb, famId);
+
+	const [members, assigned, completions, rewards] = await Promise.all([
+		pb.collection('users').getFullList({ filter: `famId = '${famId}' && role = 'child'` }),
+		pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}'` }),
+		pb.collection('completions').getFullList({ filter: `famId = '${famId}'` }),
+		pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` })
+	]);
+
+	const assignedMap = new Map<string, any>(assigned.map((a: any) => [a.id, a]));
+
+	const memberPts: Record<string, number> = {};
+	const memberCash: Record<string, number> = {};
+	const memberChores: Record<string, number> = {};
+	for (const m of members) {
+		memberPts[m.id] = 0;
+		memberCash[m.id] = 0;
+		memberChores[m.id] = 0;
+	}
+
+	// Per-member weekly buckets (points/cash/chores), keyed by `memberId:weekStart`.
+	const weekMap = new Map<string, WeeklyPoint>();
+
+	function addWeek(memberId: string, weekStart: string, pts: number, cash: number, chores: number) {
+		const key = `${memberId}:${weekStart}`;
+		const w = weekMap.get(key);
+		if (w) {
+			w.points += pts;
+			w.cash += cash;
+			w.chores += chores;
+		} else {
+			weekMap.set(key, { weekStart, points: pts, cash, chores });
+		}
+	}
+
+	// Chore completions contribute their chore value (points/money) to the
+	// member's lifetime totals and their weekly bucket. Every completion counts
+	// as a chore done (regardless of type).
+	for (const c of completions) {
+		const chore = assignedMap.get(c.assignedChoreId);
+		const pts = chore?.type === 'points' ? Number(chore.value) || 0 : 0;
+		const cash = chore?.type === 'money' ? Number(chore.value) || 0 : 0;
+		const date = (c.date || '').slice(0, 10);
+		memberPts[c.memberId] = (memberPts[c.memberId] || 0) + pts;
+		memberCash[c.memberId] = (memberCash[c.memberId] || 0) + cash;
+		memberChores[c.memberId] = (memberChores[c.memberId] || 0) + 1;
+		if (date) addWeek(c.memberId, weekStartFor(date, payday, tz), pts, cash, 1);
+	}
+
+	// Money-type todos auto-create a matching cash reward when the todo is
+	// completed (see completions.toggle). That cash is already counted in the
+	// completion loop above, so skip those completion-linked rewards here to
+	// avoid double-counting the same earning event.
+	const autoRewardIds = new Set(
+		completions.map((c: any) => c.rewardId).filter((id?: string) => !!id)
+	);
+
+	// Claimed rewards (bonuses/triggers/pocket money) count toward lifetime
+	// earnings once issued. Unclaimed/requested stay "to chase" client-side.
+	for (const r of rewards) {
+		if (r.status !== 'claimed') continue;
+		if (autoRewardIds.has(r.id)) continue;
+		const date = ((r.claimedAt as string) || (r.date as string) || '').slice(0, 10);
+		if (r.rewardType === 'points') {
+			const v = Number(r.value) || 0;
+			memberPts[r.memberId] = (memberPts[r.memberId] || 0) + v;
+			if (date) addWeek(r.memberId, weekStartFor(date, payday, tz), v, 0, 0);
+		} else if (r.rewardType === 'cash') {
+			const v = Number(r.value) || 0;
+			memberCash[r.memberId] = (memberCash[r.memberId] || 0) + v;
+			if (date) addWeek(r.memberId, weekStartFor(date, payday, tz), 0, v, 0);
+		}
+	}
+
+	const series: MemberSeries[] = members.map((m: any) => ({
+		memberId: m.id,
+		memberName: m.name,
+		memberColor: m.color || '#6366f1',
+		weeks: [...weekMap.entries()]
+			.filter(([key]) => key.startsWith(m.id + ':'))
+			.map(([, w]) => w)
+			.sort((a, b) => a.weekStart.localeCompare(b.weekStart))
+	}));
+
+	return {
+		allTimePts: Object.values(memberPts).reduce((s, n) => s + n, 0),
+		allTimeCash: Object.values(memberCash).reduce((s, n) => s + n, 0),
+		allTimeChores: Object.values(memberChores).reduce((s, n) => s + n, 0),
+		series
+	};
+}

frontend/src/lib/server/session.ts

@@ -1,24 +1,97 @@
 import type { Cookies } from '@sveltejs/kit';
 
-// The PocketBase JWT lives in a single cookie shared by:
+// PocketBase JWTs live in cookies shared by:
 //   - the server hooks (authRefresh -> locals.user)
 //   - the client SDK (seeded from page.data.pbToken -> authenticated famStore reads/subscribe)
-// httpOnly keeps the token out of reach of browser JS/XSS; the client receives
+// httpOnly keeps tokens out of reach of browser JS/XSS; the client receives
 // the token server-side via the layout load (pbToken) and seeds pb.authStore.
 // Secure flag is set in prod so it's only sent over HTTPS.
 export const SESSION_COOKIE = 'pb_token';
-const MAX_AGE = 60 * 60 * 24; // 24h, PB token exp is the real ceiling
+// Shared-device multi-session: children hold ONE cookie per account
+// (`pb_token_<userId>`); `pb_active` names which one is the current session.
+// Parents stay on the single `pb_token`.
+export const CHILD_COOKIE_PREFIX = 'pb_token_';
+export const ACTIVE_COOKIE = 'pb_active';
+const MAX_AGE = 60 * 60 * 24 * 5; // 5 days — matches the PB users auth token duration
 
-export function setSessionCookie(cookies: Cookies, token: string) {
-	cookies.set(SESSION_COOKIE, token, {
+function cookieOpts() {
+	return {
 		httpOnly: true,
-		sameSite: 'lax',
+		sameSite: 'lax' as const,
 		path: '/',
 		maxAge: MAX_AGE,
 		secure: import.meta.env.PROD
-	});
+	};
+}
+
+export function setSessionCookie(cookies: Cookies, token: string) {
+	cookies.set(SESSION_COOKIE, token, cookieOpts());
+}
+
+export function childSessionCookie(userId: string) {
+	return `${CHILD_COOKIE_PREFIX}${userId}`;
+}
+
+export function setChildSessionCookie(cookies: Cookies, userId: string, token: string) {
+	cookies.set(childSessionCookie(userId), token, cookieOpts());
+}
+
+export function clearChildSession(cookies: Cookies, userId: string) {
+	cookies.delete(childSessionCookie(userId), { path: '/' });
+}
+
+export function setActiveChild(cookies: Cookies, userId: string) {
+	cookies.set(ACTIVE_COOKIE, userId, cookieOpts());
+}
+
+export function clearActiveChild(cookies: Cookies) {
+	cookies.delete(ACTIVE_COOKIE, { path: '/' });
+}
+
+// Ids of every child that has a session cookie on this device.
+export function scanChildSessions(cookies: Cookies): string[] {
+	return cookies
+		.getAll()
+		.filter((c) => c.name.startsWith(CHILD_COOKIE_PREFIX))
+		.map((c) => c.name.slice(CHILD_COOKIE_PREFIX.length))
+		.filter(Boolean);
+}
+
+// Remove every child session on this device (logout-all).
+export function clearDeviceSessions(cookies: Cookies) {
+	for (const id of scanChildSessions(cookies)) clearChildSession(cookies, id);
+	clearActiveChild(cookies);
 }
 
 export function clearSessionCookie(cookies: Cookies) {
 	cookies.delete(SESSION_COOKIE, { path: '/' });
 }
+
+// Legacy pre-PB-auth child cookie. No longer issued anywhere; these deletes
+// exist only to scrub it from browsers that still carry one.
+const LEGACY_DEVICE_COOKIE = 'device_token';
+
+export function clearLegacyCookies(cookies: Cookies) {
+	cookies.delete(LEGACY_DEVICE_COOKIE, { path: '/' });
+}
+
+// ── Platform-admin session (/admin) ──
+// Holds a REAL PocketBase superuser JWT (minted by _superusers.authWithPassword
+// at login) — verified per-request in hooks via authRefresh, so forging the
+// cookie value gains nothing. Separate from the fam-user pb_token.
+export const PLATFORM_SESSION_COOKIE = 'platform_session';
+const PLATFORM_MAX_AGE = 60 * 60 * 24; // 24h; PB token expiry is the ceiling
+
+export function setPlatformSession(cookies: Cookies, token: string) {
+	cookies.set(PLATFORM_SESSION_COOKIE, token, {
+		httpOnly: true,
+		sameSite: 'lax',
+		path: '/',
+		maxAge: PLATFORM_MAX_AGE,
+		secure: import.meta.env.PROD
+	});
+}
+
+export function clearPlatformSession(cookies: Cookies) {
+	cookies.delete(PLATFORM_SESSION_COOKIE, { path: '/' });
+}

frontend/src/lib/server/stripe-events.ts

@@ -0,0 +1,49 @@
+import { pbAdmin } from '$lib/server/pocketbase';
+import type Stripe from 'stripe';
+
+// Shared Stripe event handling. The real webhook (/api/webhooks/stripe) routes
+// through here so the DB effects are identical.
+export async function handleStripeEvent(event: Stripe.Event): Promise<void> {
+	switch (event.type) {
+		case 'checkout.session.completed': {
+			const session = event.data.object as Stripe.Checkout.Session;
+			const famId = session.metadata?.famId;
+			if (famId && session.customer) {
+				await pbAdmin.update('fams', famId, {
+					stripeCustomerId: String(session.customer),
+					active: true,
+					paymentMode: 'sub'
+				});
+			}
+			break;
+		}
+		case 'customer.subscription.created':
+		case 'customer.subscription.updated':
+		case 'customer.subscription.paused': {
+			const sub = event.data.object as Stripe.Subscription;
+			await setActiveFromSubscription(sub);
+			break;
+		}
+		case 'customer.subscription.deleted': {
+			const sub = event.data.object as Stripe.Subscription;
+			const fams = await pbAdmin.getList('fams', `stripeCustomerId = '${sub.customer}'`);
+			const fam = fams[0];
+			if (fam) {
+				await pbAdmin.update('fams', fam.id, { active: false, paymentMode: 'canceled' });
+			}
+			break;
+		}
+	}
+}
+
+async function setActiveFromSubscription(sub: Stripe.Subscription) {
+	// The fam that owns this subscription — look up by the customer id stored
+	// on the fam (set at checkout). Stripe customer id is unique per fam.
+	const fams = await pbAdmin.getList('fams', `stripeCustomerId = '${sub.customer}'`);
+	const fam = fams[0];
+	if (!fam) return;
+	// Active only while the sub is trialing/active (not past_due/canceled/paused).
+	const active =
+		sub.status === 'trialing' || sub.status === 'active' || sub.status === 'past_due';
+	await pbAdmin.update('fams', fam.id, { active, paymentMode: 'sub' });
+}

frontend/src/lib/server/stripe.ts

@@ -0,0 +1,182 @@
+import Stripe from 'stripe';
+import {
+	STRIPE_SECRET_KEY,
+	STRIPE_WEBHOOK_SECRET,
+	STRIPE_CLI_WEBHOOK_SECRET,
+	STRIPE_PRICE_TRIAL,
+	STRIPE_PRICE_MONTHLY,
+	STRIPE_PRICE_YEARLY
+} from '$app/env/private';
+
+// Dummy key placeholder — swap for a real test/live secret when the account is connected.
+const KEY: string = String(STRIPE_SECRET_KEY) || 'sk_test_dummy_famchamp_not_connected';
+
+export const stripe = new Stripe(KEY);
+
+// 3-tier plans: `trial` is not a paid Stripe price — it's app-side validated
+// (a code) and realised as a subscription with trial_period_days.
+export type PlanId = 'trial' | 'monthly' | 'yearly';
+
+export const PLAN_IDS: Record<'trial' | 'monthly' | 'yearly', string> = {
+	trial: String(STRIPE_PRICE_TRIAL) || 'price_dummy_trial',
+	monthly: String(STRIPE_PRICE_MONTHLY) || 'price_dummy_monthly',
+	yearly: String(STRIPE_PRICE_YEARLY) || 'price_dummy_yearly'
+};
+
+// Trial codes live in PB (`accesscodes` with trialDays > 0, active) so the
+// platform admin can manage them. A matching active code maps to Stripe
+// trial_period_days at checkout; anything else is not a trial code.
+export async function resolveTrialDays(code?: string): Promise<number | null> {
+	if (!code) return null;
+	const { pbAdmin } = await import('$lib/server/pocketbase');
+	const recs = (await pbAdmin.getList(
+		'accesscodes',
+		`value = '${code.trim().toUpperCase()}' && active = true`
+	)) as any[];
+	const days = Number(recs?.[0]?.trialDays) || 0;
+	return days > 0 ? days : null;
+}
+
+export function verifyStripeEvent(rawBody: string, signature: string): Stripe.Event {
+	// Prefer the CLI secret (local dev) when set; else the dashboard secret.
+	const secret = String(STRIPE_CLI_WEBHOOK_SECRET) || String(STRIPE_WEBHOOK_SECRET);
+	return stripe.webhooks.constructEvent(rawBody, signature, secret);
+}
+
+// Redirect-mode Checkout session. `priceId` resolves from a PlanId (or direct
+// Stripe price id). Metadata carries the famId so the webhook can attribute it.
+export async function createCheckoutSession(opts: {
+	plan: PlanId | 'price' | 'trial';
+	priceId?: string;
+	famId: string;
+	email?: string | null;
+	customerId?: string | null;
+	trialDays?: number | null;
+	origin: string;
+}) {
+	const isTrial = opts.plan === 'trial';
+	let priceId: string | undefined;
+	if (opts.plan === 'trial' || opts.plan === 'monthly' || opts.plan === 'yearly')
+		priceId = PLAN_IDS[opts.plan];
+	else priceId = opts.priceId;
+
+	const params: Stripe.Checkout.SessionCreateParams = {
+		mode: 'subscription',
+		metadata: { famId: opts.famId, plan: opts.plan },
+		success_url: `${opts.origin}/account?checkout=success`,
+		cancel_url: `${opts.origin}/pricing?checkout=cancelled`
+	};
+
+	// Attach customer if we already have a Stripe customer id for this fam.
+	if (opts.customerId) {
+		params.customer = opts.customerId;
+	} else if (opts.email) {
+		params.customer_email = opts.email;
+	}
+
+	if (isTrial && priceId) {
+		// Trial is an otherwise-free subscription whose price is a $0 plan; the
+		// trial period is set explicitly so no card charge happens for X days.
+		if (opts.trialDays) params.subscription_data = { trial_period_days: opts.trialDays };
+		params.line_items = [{ price: priceId, quantity: 1 }];
+	} else if (priceId) {
+		params.line_items = [{ price: priceId, quantity: 1 }];
+	} else {
+		throw new Error(`No Stripe price configured for plan "${opts.plan}"`);
+	}
+
+	return stripe.checkout.sessions.create(params);
+}
+
+// Live subscription state for the settings UI (source of truth = Stripe).
+export async function getSubscriptionStatus(
+	customerId: string
+): Promise<{ active: boolean; cancelAtPeriodEnd: boolean; endsAt?: string }> {
+	const subs = await stripe.subscriptions.list({
+		customer: customerId,
+		status: 'all',
+		limit: 10
+	});
+	const active = subs.data.find((s) => ['active', 'trialing', 'past_due'].includes(s.status));
+	if (!active) return { active: false, cancelAtPeriodEnd: false };
+	const itemEnd = active.items.data[0]?.current_period_end;
+	return {
+		active: true,
+		cancelAtPeriodEnd: !!active.cancel_at_period_end,
+		endsAt: new Date((itemEnd ?? Math.floor(Date.now() / 1000)) * 1000).toISOString()
+	};
+}
+
+// In-app cancellation: flags the customer's active subscription to end at the
+// close of the current paid period (no refund, access continues until then).
+// The existing webhook flips paymentMode='canceled' when it actually ends.
+export async function cancelSubscriptionAtPeriodEnd(
+	customerId: string
+): Promise<{ ended: boolean; endsAt?: string }> {
+	const subs = await stripe.subscriptions.list({
+		customer: customerId,
+		status: 'all',
+		limit: 10
+	});
+	const active = subs.data.find((s) => ['active', 'trialing', 'past_due'].includes(s.status));
+	if (!active) return { ended: false };
+	if (!active.cancel_at_period_end) {
+		await stripe.subscriptions.update(active.id, { cancel_at_period_end: true });
+	}
+	// Newer Stripe API versions carry current_period_end on the sub item.
+	const itemEnd = active.items.data[0]?.current_period_end;
+	const periodEnd = itemEnd ?? Math.floor(Date.now() / 1000) + 30 * 86400;
+	return { ended: true, endsAt: new Date(periodEnd * 1000).toISOString() };
+}
+
+// Stripe Billing portal session for managing/cancelling the subscription.
+export async function createBillingPortalSession(customerId: string, origin: string, famSlug = '') {
+	return stripe.billingPortal.sessions.create({
+		customer: customerId,
+		return_url: `${origin}/${famSlug}?checkout=return`
+	});
+}
+
+// Embedded (in-page) Checkout session. Returns the client_secret the browser
+// passes to @stripe/stripe-js `createEmbeddedCheckoutPage`. Embedded mode uses
+// return_url (same-origin) instead of success/cancel_url, and subscriptions
+// need a customer attached.
+export async function createEmbeddedCheckoutSession(opts: {
+	plan: PlanId | 'price' | 'trial';
+	priceId?: string;
+	famId: string;
+	famSlug: string;
+	email?: string | null;
+	customerId?: string | null;
+	trialDays?: number | null;
+	origin: string;
+}) {
+	const isTrial = opts.plan === 'trial';
+	let priceId: string | undefined;
+	if (opts.plan === 'trial' || opts.plan === 'monthly' || opts.plan === 'yearly')
+		priceId = PLAN_IDS[opts.plan];
+	else priceId = opts.priceId;
+	if (!priceId) throw new Error(`No Stripe price configured for plan "${opts.plan}"`);
+
+	const params: Stripe.Checkout.SessionCreateParams = {
+		mode: 'subscription',
+		ui_mode: 'embedded_page',
+		metadata: { famId: opts.famId, plan: opts.plan },
+		return_url: `${opts.origin}/${opts.famSlug}?checkout=return`
+	};
+
+	if (opts.customerId) {
+		params.customer = opts.customerId;
+	} else {
+		// No customer yet — in subscription mode Stripe creates one automatically;
+		// just seed the email if we have it.
+		if (opts.email) params.customer_email = opts.email;
+	}
+
+	if (isTrial && opts.trialDays) params.subscription_data = { trial_period_days: opts.trialDays };
+
+	params.line_items = [{ price: priceId, quantity: 1 }];
+
+	const session = await stripe.checkout.sessions.create(params);
+	return { clientSecret: session.client_secret, sessionId: session.id };
+}

frontend/src/lib/server/types.ts

@@ -5,4 +5,8 @@ export interface SessionUser {
 	role: 'parent' | 'child';
 	famId: string;
 	color?: string;
+	pattern?: string;
+	themeSize?: string;
+	themeOpacity?: string;
+	partyEmoji?: string;
 }

frontend/src/lib/shortcut.ts

@@ -0,0 +1,36 @@
+export type Shortcut = {
+	famSlug: string;
+	famName: string;
+	userName: string; // '' for parents (no handle in URL)
+};
+
+const KEY = 'fam_shortcut';
+
+export function recordShortcut(entry: Shortcut) {
+	if (typeof localStorage === 'undefined') return;
+	localStorage.setItem(KEY, JSON.stringify(entry));
+}
+
+export function readShortcut(): Shortcut | null {
+	if (typeof localStorage === 'undefined') return null;
+	try {
+		const raw = localStorage.getItem(KEY);
+		if (!raw) return null;
+		const s = JSON.parse(raw) as Shortcut;
+		// Self-heal the old poisoned entry: a write that fell back to
+		// page.params.fam while page.data.fam was null stored the PB id as
+		// both slug and name ({famSlug: id, famName: id}). A real slug is
+		// never identical to the display name AND a 15-char PB id.
+		if (s && s.famSlug === s.famName && /^[a-z0-9]{15}$/.test(s.famSlug || '')) {
+			localStorage.removeItem(KEY);
+			return null;
+		}
+		return s;
+	} catch {
+		return null;
+	}
+}
+
+export function shortcutTarget(s: Shortcut): string {
+	return s.userName ? `/${s.famSlug}/${s.userName}` : `/${s.famSlug}`;
+}

frontend/src/lib/stores/chat.svelte.ts

@@ -1,5 +1,7 @@
 import { pb } from '$lib/pocketbase';
-import type { ChatMessage, TypingRow } from '$lib/types';
+import type { ChatMessage, TypingRow, MentionMember } from '$lib/types';
+import { addAutoDismissNotice } from './notices.svelte';
+import { famStore } from './fam.svelte';
 
 interface ChatInit {
 	famId: string;
@@ -8,7 +10,7 @@ interface ChatInit {
 	actorName: string;
 	actorColor: string;
 	pbToken?: string;
-	
+	members?: MentionMember[];
 }
 
 // Client id for optimistic chat messages. `crypto.randomUUID()` requires a
@@ -34,12 +36,14 @@ class ChatStore {
 	actorName = $state('');
 	actorColor = $state('');
 	pbToken = $state('');
+	members = $state<MentionMember[]>([]);
 
 	private unsubs: (() => void)[] = [];
 	private destroyed = false;
 	private initPromise: Promise<void> | null = null;
 	private lastSeenAt = 0;
 	private typingTimers = new Map<string, ReturnType<typeof setTimeout>>();
+	private audioCtx: AudioContext | null = null;
 
 	typingNames = $derived.by(() => {
 		const names: string[] = [];
@@ -50,21 +54,39 @@ class ChatStore {
 	});
 
 	async init(opts: ChatInit) {
+		// Re-initialize whenever the family OR the actor changes (e.g. switching
+		// between parent and child in the same browser session). The store is a
+		// module singleton — keeping the previous actor's identity/subscription
+		// would make one direction's realtime silently dead.
+		const sameIdentity =
+			this.initialized &&
+			this.famId === opts.famId &&
+			this.actorId === opts.actorId &&
+			this.actorType === opts.actorType;
+		if (sameIdentity) return;
+		if (this.initPromise) {
+			await this.initPromise;
+			if (
+				this.initialized &&
+				this.famId === opts.famId &&
+				this.actorId === opts.actorId &&
+				this.actorType === opts.actorType
+			)
+				return;
+		}
+
+		this.cleanup();
+		this.destroyed = false;
 		this.famId = opts.famId;
 		this.actorId = opts.actorId;
 		this.actorType = opts.actorType;
 		this.actorName = opts.actorName;
 		this.actorColor = opts.actorColor;
 		this.pbToken = opts.pbToken || '';
-
-		if (this.initialized && this.famId === opts.famId) return;
-		if (this.initPromise) {
-			await this.initPromise;
-			if (this.initialized && this.famId === opts.famId) return;
-		}
-
-		this.cleanup();
-		this.destroyed = false;
+		this.members = opts.members || [];
+		this.messages = [];
+		this.typing = {};
+		this.unread = 0;
 		this.lastSeenAt = Date.now();
 
 		this.initPromise = (async () => {
@@ -98,7 +120,10 @@ class ChatStore {
 				this.onMessage(data.action, data.record);
 			})
 			.then((unsub) => this.unsubs.push(unsub))
-			.catch((err: Error) => console.error('[chatStore] messages subscribe failed:', err));
+			.catch((err: Error) => {
+				console.error('[chatStore] messages subscribe failed:', err);
+				famStore.connectionDown = true;
+			});
 
 		const typingSub = pb
 			.collection('chat_typing')
@@ -107,7 +132,10 @@ class ChatStore {
 				this.onTyping(data.action, data.record);
 			})
 			.then((unsub) => this.unsubs.push(unsub))
-			.catch((err: Error) => console.error('[chatStore] typing subscribe failed:', err));
+			.catch((err: Error) => {
+				console.error('[chatStore] typing subscribe failed:', err);
+				famStore.connectionDown = true;
+			});
 
 		await Promise.allSettled([msgSub, typingSub]);
 	}
@@ -139,11 +167,29 @@ class ChatStore {
 		}
 		// Stop showing their typing indicator once the message lands.
 		this.clearTyping(record.authorId);
-		if (record.authorId !== this.actorId && !this.open) {
-			this.unread++;
+		if (record.authorId !== this.actorId) {
+			if (!this.open) this.unread++;
+			this.playDunk();
+			if (this.notifyIfMentioned(record) && this.open) this.unread++;
 		}
 	}
 
+	// Toast the current user when a message @mentions them by name.
+	// Returns true if the user was mentioned.
+	private notifyIfMentioned(record: ChatMessage): boolean {
+		const lower = (record.content || '').toLowerCase();
+		const me = this.members.find((m) => m.id === this.actorId);
+		if (!me || !me.name) return false;
+		if (!lower.includes('@' + me.name.toLowerCase())) return false;
+		addAutoDismissNotice({
+			type: 'info',
+			title: 'You were mentioned 👋',
+			message: `${record.authorName || 'Someone'}: ${record.content}`,
+			dismissible: true
+		});
+		return true;
+	}
+
 	private onTyping(action: string, record: TypingRow) {
 		if (record.famId !== this.famId) return;
 		if (action === 'delete') {
@@ -167,6 +213,39 @@ class ChatStore {
 		if (this.typing[actorId]) this.removeTyping(actorId);
 	}
 
+	// Short, low-volume "dunk" blip played when a message from someone else is
+	// broadcast in. Synthesised with the Web Audio API so there's no asset to
+	// ship. Browsers require a user gesture before audio can start, but chat
+	// messages only arrive after the user has interacted, so the context
+	// resumes fine. Failures are silently ignored.
+	private playDunk() {
+		if (typeof window === 'undefined' || typeof AudioContext === 'undefined') return;
+		try {
+			const Ctor = window.AudioContext || (window as any).webkitAudioContext;
+			if (!Ctor) return;
+			if (!this.audioCtx) this.audioCtx = new Ctor();
+			const ctx = this.audioCtx;
+			if (ctx.state === 'suspended') ctx.resume();
+
+			const now = ctx.currentTime;
+			const osc = ctx.createOscillator();
+			const gain = ctx.createGain();
+			osc.type = 'sine';
+			// Quick downward pitch sweep gives the soft "dun-nk" thud.
+			osc.frequency.setValueAtTime(190, now);
+			osc.frequency.exponentialRampToValueAtTime(70, now + 0.18);
+			// Low volume with a fast attack/decay envelope.
+			gain.gain.setValueAtTime(0.0001, now);
+			gain.gain.exponentialRampToValueAtTime(0.12, now + 0.01);
+			gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.22);
+			osc.connect(gain).connect(ctx.destination);
+			osc.start(now);
+			osc.stop(now + 0.24);
+		} catch {
+			/* audio is best-effort */
+		}
+	}
+
 	private removeTyping(actorId: string) {
 		if (!this.typing[actorId]) return;
 		const next = { ...this.typing };
@@ -258,6 +337,7 @@ class ChatStore {
 		for (const t of this.typingTimers.values()) clearTimeout(t);
 		this.typingTimers.clear();
 		this.initialized = false;
+		this.members = [];
 	}
 }
 

frontend/src/lib/stores/fam.svelte.ts

@@ -35,9 +35,15 @@ class FamStore {
 	seasons = $state<Season[]>([]);
 	initialized = $state(false);
 	famId = $state('');
+	// True while the realtime SSE stream is down (subscriptions exist but the
+	// socket dropped, e.g. ERR_QUIC_PROTOCOL_ERROR). The SDK reconnects on its
+	// own; we resync missed events on PB_CONNECT (below) + browser signals.
+	connectionDown = $state(false);
 
 	private unsubs: (() => void)[] = [];
 	private destroyed = false;
+	private seenConnect = false;
+	private resyncing = false;
 
 	memberMap(): Map<string, Member> {
 		return new Map(this.members.map((m) => [m.id, m]));
@@ -99,7 +105,7 @@ class FamStore {
 					pb.collection('users').getFullList({
 					filter: `famId = '${famId}' && role = 'child'`
 				}) as Promise<Member[]>,
-					pb.collection('chore_templates').getFullList({ filter: `famId = '${famId}'` }) as Promise<
+					pb.collection('chore_templates').getFullList({ filter: `(famId = '${famId}' || global = true)` }) as Promise<
 						ChoreTemplate[]
 					>,
 					pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}'` }) as Promise<
@@ -111,7 +117,7 @@ class FamStore {
 					pb.collection('bonus_configs').getFullList({ filter: `famId = '${famId}'` }) as Promise<
 						BonusConfig[]
 					>,
-					pb.collection('bonus_templates').getFullList({ filter: `famId = '${famId}'` }) as Promise<
+					pb.collection('bonus_templates').getFullList({ filter: `(famId = '${famId}' || global = true)` }) as Promise<
 						BonusTemplate[]
 					>,
 					pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` }) as Promise<
@@ -137,20 +143,147 @@ class FamStore {
 			}
 
 			await this.subscribe();
+			this.watchConnection();
 			this.initPromise = null;
 		})();
 
 		return this.initPromise!;
 	}
 
+	// Refetch every list and replace local state. Used after a realtime
+	// reconnect (the SDK re-establishes SSE itself but never replays events
+	// missed during the outage) and on browser online/visible signals.
+	// Acting on stale state is what produced the phantom "resource not found"
+	// 400s after a tab silently disconnected.
+	async resync() {
+		if (!this.initialized || this.destroyed || this.resyncing) return;
+		this.resyncing = true;
+		// Retry with backoff: a resync fired at the leading edge of a blip
+		// (QUIC drop, Tailscale relay flap) usually succeeds a second later.
+		// The dot stays amber until one attempt fully lands.
+		let lastErr: unknown = null;
+		for (let attempt = 0; attempt < 3; attempt++) {
+			if (attempt > 0) await new Promise((r) => setTimeout(r, 1200 * attempt));
+			if (this.destroyed) break;
+			try {
+				await this.fetchAll();
+				if (this.destroyed) return;
+				// A completed resync proves the pipe is healthy again.
+				this.connectionDown = false;
+				lastErr = null;
+				break;
+			} catch (e) {
+				lastErr = e;
+			}
+		}
+		if (lastErr) {
+			console.error('FamStore.resync failed:', lastErr);
+			if (!this.destroyed) this.connectionDown = true;
+		}
+		this.resyncing = false;
+	}
+
+	private async fetchAll() {
+			const [
+				membersRes,
+				templatesRes,
+				assignedRes,
+				completionsRes,
+				bonusConfigsRes,
+				bonusTemplatesRes,
+				rewardsRes,
+				seasonsRes
+			] = await Promise.all([
+				pb.collection('users').getFullList({
+					filter: `famId = '${this.famId}' && role = 'child'`
+				}) as Promise<Member[]>,
+				pb.collection('chore_templates').getFullList({ filter: `(famId = '${this.famId}' || global = true)` }) as Promise<
+					ChoreTemplate[]
+				>,
+				pb.collection('assigned_chores').getFullList({ filter: `famId = '${this.famId}'` }) as Promise<
+					AssignedChore[]
+				>,
+				pb.collection('completions').getFullList({ filter: `famId = '${this.famId}'` }) as Promise<
+					Completion[]
+				>,
+				pb.collection('bonus_configs').getFullList({ filter: `famId = '${this.famId}'` }) as Promise<
+					BonusConfig[]
+				>,
+				pb.collection('bonus_templates').getFullList({ filter: `(famId = '${this.famId}' || global = true)` }) as Promise<
+					BonusTemplate[]
+				>,
+				pb.collection('rewards').getFullList({ filter: `famId = '${this.famId}'` }) as Promise<
+					Reward[]
+				>,
+				pb.collection('seasons').getFullList({ filter: `famId = '${this.famId}'` }) as Promise<
+					Season[]
+				>
+			]);
+		if (this.destroyed) return;
+		this.members = membersRes;
+		this.templates = templatesRes;
+		this.assigned = assignedRes;
+		this.completions = completionsRes;
+		this.bonusConfigs = bonusConfigsRes;
+		this.bonusTemplates = bonusTemplatesRes;
+		this.rewards = rewardsRes;
+		this.seasons = seasonsRes;
+	}
+
+	private connWatchers: (() => void)[] = [];
+
+	private watchConnection() {
+		if (typeof window === 'undefined' || this.connWatchers.length) return;
+		// SDK-level: PB_CONNECT fires on every (re)connect, including the first.
+		pb.realtime
+			.subscribe('PB_CONNECT', () => {
+				if (this.destroyed) return;
+				this.connectionDown = false;
+				if (this.seenConnect) {
+					// Reconnect after an outage — replay what we missed.
+					this.resync().catch(() => {});
+				}
+				this.seenConnect = true;
+			})
+			.then((unsub) => {
+				this.connWatchers.push(unsub);
+			})
+			.catch(() => {
+				// We never even got the connect signal — surface it.
+				if (!this.destroyed) this.connectionDown = true;
+			});
+		const onDisc = pb.realtime.onDisconnect;
+		pb.realtime.onDisconnect = (active: string[]) => {
+			try {
+				onDisc?.(active);
+			} catch {}
+			// Only flag drops with live subscriptions (not our own cleanup).
+			if (active.length > 0 && !this.destroyed) this.connectionDown = true;
+		};
+		// Browser-level: sleep/wake and offline/online can kill SSE without the
+		// SDK noticing promptly. Don't touch the flag here — resync() sets it
+		// from the actual outcome (clearing it early is what left the dot
+		// green while the console showed errors).
+		const onOnline = () => {
+			this.resync().catch(() => {});
+		};
+		const onVisible = () => {
+			if (document.visibilityState === 'visible') this.resync().catch(() => {});
+		};
+		window.addEventListener('online', onOnline);
+		document.addEventListener('visibilitychange', onVisible);
+		this.connWatchers.push(() => window.removeEventListener('online', onOnline));
+		this.connWatchers.push(() => document.removeEventListener('visibilitychange', onVisible));
+	}
+
 	private async subscribe() {
 		const subs: { collection: CollectionName; filter: string }[] = [
 			{ collection: 'users', filter: `famId = '${this.famId}' && role = 'child'` },
-			{ collection: 'chore_templates', filter: `famId = '${this.famId}'` },
+			{ collection: 'chore_templates', filter: `(famId = '${this.famId}' || global = true)` },
 			{ collection: 'assigned_chores', filter: `famId = '${this.famId}'` },
 			{ collection: 'completions', filter: `famId = '${this.famId}'` },
 			{ collection: 'bonus_configs', filter: `famId = '${this.famId}'` },
-			{ collection: 'bonus_templates', filter: `famId = '${this.famId}'` },
+			{ collection: 'bonus_templates', filter: `(famId = '${this.famId}' || global = true)` },
 			{ collection: 'rewards', filter: `famId = '${this.famId}'` },
 			{ collection: 'seasons', filter: `famId = '${this.famId}'` }
 		];
@@ -175,6 +308,9 @@ class FamStore {
 				})
 				.catch((err: Error) => {
 					console.error(`[famStore] subscribe failed for ${collection}:`, err);
+					// A failed subscribe IS the outage the console shows while
+					// the dot stayed green — flag it; PB_CONNECT/resync clears it.
+					if (!this.destroyed) this.connectionDown = true;
 				});
 		});
 
@@ -185,7 +321,12 @@ class FamStore {
 	// and from PB subscribe SSE for multi-user realtime.
 	applyRecord(collection: CollectionName, record: any, action: 'create' | 'update' | 'delete') {
 		const apply = <T extends { id: string }>(list: T[]): T[] => {
-			if (action === 'create') return [record, ...list];
+			// A create for an id we already hold (optimistic add + SSE echo) is
+			// an update, not a second row.
+			if (action === 'create')
+				return list.some((x) => x.id === record.id)
+					? list.map((x) => (x.id === record.id ? { ...x, ...record } : x))
+					: [record, ...list];
 			if (action === 'update')
 				return list.map((x) => (x.id === record.id ? { ...x, ...record } : x));
 			if (action === 'delete') return list.filter((x) => x.id !== record.id);
@@ -233,6 +374,10 @@ class FamStore {
 		this.destroyed = true;
 		for (const unsub of this.unsubs) unsub();
 		this.unsubs = [];
+		for (const stop of this.connWatchers) stop();
+		this.connWatchers = [];
+		this.seenConnect = false;
+		this.connectionDown = false;
 		this.initialized = false;
 	}
 }