@homie-rocks/studio 0.51.2 → 0.51.3

package/CHANGELOG.md

@@ -17,6 +17,31 @@ To bring a studio up to date, tell Claude: "Upgrade my studio to the newest Homi
 `npx -y @homie-rocks/studio@latest upgrade`, which shows what's new since the version your studio pins (from this
 file) and what the upgrade would change, and changes nothing until you agree.
 
+## [0.51.3] - 2026-10-14
+
+**Plugin 0.51.3**
+
+Business and cause apps use their own words, count every paid monthly gift, and test real Stripe checkout locally.
+
+### Added
+
+- Local real Stripe test checkout: `shop connect --local --profile <sandbox> --url <Wi-Fi address>` syncs test Payment Links without Cloudflare or a public webhook. Stripe CLI forwards signed events to `dev`; phones return to the same Wi-Fi thank-you page.
+- App acceptance needs can name a checkout popup, interact with it, and continue asserting the original phone.
+
+### Fixed
+
+- Monthly subscription invoices create deduplicated paid orders and app events with the original reference, so every gift reaches fulfilment.
+- Business/cause menus name their own pages and apps. App shells use app names, website buttons have independent wording, thank-you pages name the organisation, and default phone sharing stays above bottom tabs.
+- Gathering is a task check-in starter with its own records and no giving or quiz workflow. App style defaults use illustration and AI refinements retain AI attribution.
+- `dev` loads root `.dev.vars`. App collections no longer stop accepting records at 1,000.
+- Requests and scheduled runs remove referral metadata recreated by an old Worker during a rolling deployment.
+- The installed app reference documents the supported local payment/checker path and distinguishes local MCP tools from hosted connector tools.
+
+### Upgrade notes
+
+- Restart local dev after updating `.dev.vars`. Local Stripe links are test-only; live connection and deployment are unchanged.
+- Existing app `screen.share` choices and authored site headers remain in control. Subscription renewals now emit `order.paid` as well as lifecycle events; fulfilment listening to both should deduplicate by payment identity.
+
 ## [0.51.2] - 2026-10-14
 
 **Plugin 0.51.2** · Deploying and listing do what the studio chose, under one address.

package/app-starters/gathering/app.json

@@ -39,14 +39,8 @@
     "many": "people",
     "action": "Check in",
     "total": "Check-ins",
-    "choice": "Choose an option",
-    "monthly": "Gift frequency",
-    "once": "One time",
-    "month": "Monthly",
-    "give": "Give securely on Stripe",
-    "goal": "Intention goal \u00b7 not payments received",
+    "choice": "Choose a task",
     "prompt": "Choose what works for you.",
-    "finished": "All three answers are in. Thank you!",
     "complete": "Mark complete",
     "done": "Complete",
     "pending": "Checked in",
@@ -68,14 +62,6 @@
             "type": "string",
             "required": true,
             "maxLength": 60
-          },
-          "amount": {
-            "type": "number",
-            "required": true
-          },
-          "monthly": {
-            "type": "boolean",
-            "required": true
           }
         }
       }
@@ -129,34 +115,6 @@
       "Packing",
       "Deliveries"
     ],
-    "color": "#184b43",
-    "currency": "CAD",
-    "goal": 2500,
-    "questions": [
-      {
-        "text": "Which planet is called the red planet?",
-        "choices": [
-          "Venus",
-          "Mars",
-          "Jupiter"
-        ]
-      },
-      {
-        "text": "How many sides does a hexagon have?",
-        "choices": [
-          "5",
-          "6",
-          "8"
-        ]
-      },
-      {
-        "text": "Which is a mammal?",
-        "choices": [
-          "Dolphin",
-          "Trout",
-          "Octopus"
-        ]
-      }
-    ]
+    "color": "#184b43"
   }
 }

package/app-starters/gathering/index.html

@@ -1,3 +1,3 @@
 <!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Live together</title><style>
 *{box-sizing:border-box}body{margin:0;background:var(--tone,#183b55);color:#fff7df;font-family:system-ui,sans-serif}main{min-height:100svh;padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}h1{font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.05em;margin:20px 0}p{line-height:1.6;max-width:40em}#connection{font-size:12px;text-transform:uppercase;letter-spacing:.18em}.panel{background:#fff7df;color:#20352e;border-radius:28px;padding:28px;box-shadow:0 30px 80px #0003}#count{font-size:80px;font-weight:800;line-height:1}ul{padding:0;list-style:none}li{padding:12px 0;border-bottom:1px solid #20352e22}button,select,a{font:inherit;min-height:48px;border-radius:12px}button,select{padding:10px 16px;width:100%;margin-top:8px}button{background:var(--tone);color:#fff7df;border:0;cursor:pointer}button:disabled{opacity:.5}a{display:inline-flex;align-items:center;color:inherit}label{display:block;margin-top:14px}select{background:white;color:#20352e;border:1px solid #20352e66}progress{width:100%;height:22px;accent-color:var(--tone)}#status{min-height:24px}#amount{font-size:40px;font-weight:700}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #df9325;outline-offset:4px}.wall #controls{display:none}#giving-link[hidden],[hidden]{display:none!important}@media(max-width:650px){main{display:block;padding:72px 22px 24px}h1{font-size:46px}.panel{margin-top:24px;padding:22px}#count{font-size:58px}li{font-size:14px}}@media(max-height:520px) and (min-width:651px){main{padding:65px 25px 20px;gap:22px}h1{font-size:38px}.panel{padding:18px}}
-</style><main><header><span id="connection"></span><h1></h1><p id="intro"></p><div id="goal"><p id="goal-label"></p><div><span id="amount"></span> / <span id="target"></span></div><progress></progress></div><ul id="entries" aria-live="polite"></ul></header><section class="panel"><div id="label"></div><div id="count" data-count>0</div><div id="controls"><p id="prompt"></p><label><span id="choice-label"></span><select id="choice"></select></label><label id="frequency"><span id="frequency-label"></span><select id="monthly"><option id="once" value="once"></option><option id="month" value="month"></option></select></label><button data-action></button><a id="giving-link" href="/shop/" target="_blank" rel="noopener"></a></div><p id="status" role="status"></p></section></main><script type="module" src="./assets/main.js"></script></html>
+</style><main><header><span id="connection"></span><h1></h1><p id="intro"></p><ul id="entries" aria-live="polite"></ul></header><section class="panel"><div id="label"></div><div id="count" data-count>0</div><div id="controls"><p id="prompt"></p><label><span id="choice-label"></span><select id="choice"></select></label><button data-action></button></div><p id="status" role="status"></p></section></main><script type="module" src="./assets/main.js"></script></html>

package/app-starters/gathering/src/view.ts

@@ -3,7 +3,7 @@ import { openRoom } from '@homie-rocks/studio/rules/view';
 import type rules from './rules';
 import { createAppRecords, type AppRecord } from '@homie-rocks/studio/apps';
 import { randomId } from '@homie-rocks/studio/links';
-type Entry = { choice: string; status: string; amount: number; monthly: boolean };
+type Entry = { choice: string; status: string };
 const room = openRoom<typeof rules>();
 const net = room.net;
 const role = net.params.role ?? 'customer';
@@ -11,41 +11,29 @@ const words: Record<string, string> = app.words;
 const config = app.starter;
 const $ = <T extends HTMLElement = HTMLElement>(s: string) => document.querySelector<T>(s)!;
 const records = createAppRecords<Entry>({ collection: 'entries' });
-let rows: AppRecord<Entry>[] = [], busy = false, ready = false, question = 0;
+let rows: AppRecord<Entry>[] = [], busy = false, ready = false;
 const action = $<HTMLButtonElement>('[data-action]');
 document.body.className = role;
 document.body.style.setProperty('--tone', config.color);
 $('h1').textContent = app.name; $('#intro').textContent = app.blurb;
 $('#label').textContent = words.total; action.textContent = words.action;
 $('#choice-label').textContent = words.choice;
-$('#frequency-label').textContent = words.monthly;
-$('#once').textContent = words.once; $('#month').textContent = words.month;
-$('#giving-link').textContent = words.give;
-$('#giving-link').hidden = config.kind !== 'giving';
-$('#frequency').hidden = config.kind !== 'giving';
-$('#goal').hidden = config.kind !== 'giving';
 $('#controls').hidden = role === 'wall';
 const select = $<HTMLSelectElement>('#choice');
 function choices() {
  select.replaceChildren();
- const list = config.kind === 'quiz' ? config.questions[question]?.choices ?? [] : config.choices;
+ const list = config.choices;
  for (const value of list) { const option = document.createElement('option'); option.value = value; option.textContent = value; select.append(option); }
- $('#prompt').textContent = config.kind === 'quiz' ? config.questions[question]?.text ?? words.finished : words.prompt;
- action.hidden = config.kind === 'quiz' && question >= config.questions.length;
+ $('#prompt').textContent = words.prompt;
 }
 choices();
 function paint() {
  $('[data-count]').textContent = String(rows.length);
- const amount = rows.reduce((n, r) => n + r.data.amount, 0);
- $('#amount').textContent = new Intl.NumberFormat(undefined, { style: 'currency', currency: config.currency }).format(amount);
- $('#target').textContent = new Intl.NumberFormat(undefined, { style: 'currency', currency: config.currency }).format(config.goal);
- $<HTMLProgressElement>('progress').max = config.goal; $<HTMLProgressElement>('progress').value = amount;
- $('#goal-label').textContent = words.goal;
  action.disabled = busy || !ready;
  $('#entries').replaceChildren();
  for (const row of rows.slice(-6).reverse()) {
   const li = document.createElement('li');
-  li.textContent = `${row.data.choice} · ${row.data.status}${row.data.monthly ? ' · ' + words.month : ''}`;
+  li.textContent = `${row.data.choice} · ${row.data.status}`;
   if (role === 'staff' && row.data.status !== words.done) {
    const button = document.createElement('button'); button.textContent = words.complete;
    button.onclick = () => { void records.update(row, { ...row.data, status: words.done }).then(refresh).catch(e => { $('#status').textContent = e.message; }); }; li.append(button);
@@ -61,9 +49,8 @@ action.onclick = async () => {
  busy = true; paint();
  try {
   const choice = select.value;
-  await records.create({ choice: config.kind === 'quiz' ? `${question + 1}. ${choice}` : choice, status: words.pending, amount: config.kind === 'giving' ? Number(choice) : 0, monthly: $<HTMLSelectElement>('#monthly').value === 'month' }, randomId());
+  await records.create({ choice, status: words.pending }, randomId());
   $('#status').textContent = words.thanks;
-  if (config.kind === 'quiz') { question++; choices(); }
   room.command('refresh', {}); await refresh();
  } catch (error) { $('#status').textContent = (error as Error).message; }
  finally { busy = false; paint(); }

package/apps/APPS.md

@@ -18,7 +18,7 @@ await queue.remove(rows[0]);
 queue.dispose();
 ```
 
-The shell handles requests only from its own frame and uses its own role, link and account, never authority claimed by the message. The Worker checks every request. Roles declare `signIn: boolean` and `can: ["read:queue", "create:queue", "update:queue", "delete:queue"]`. Collections declare fields with `type` (string/number/boolean), optional `required`, `maxLength`, `enum`, and `initial` (the only value allowed on create). Unknown fields are refused. Records are at most 8 KB, collection reads at most 1,000 records, request bodies at most 12 KB. A full collection refuses creates. This is a small operational helper, not an unbounded ledger.
+The shell handles requests only from its own frame and uses its own role, link and account, never authority claimed by the message. The Worker checks every request. Roles declare `signIn: boolean` and `can: ["read:queue", "create:queue", "update:queue", "delete:queue"]`. Collections declare fields with `type` (string/number/boolean), optional `required`, `maxLength`, `enum`, and `initial` (the only value allowed on create). Unknown fields are refused. Records are at most 8 KB and request bodies at most 12 KB. Homie imposes no collection count limit; the studio’s database capacity applies.
 
 Generate a fresh ID for every new record; never reuse a deleted ID. Updates and deletes compare `version` atomically. Conflicts return 409; reload and resolve them. A successful write is committed before acknowledgement. Records are scoped by app and collection, not by room. Deleting a room does not delete records. With `records.persist: false`, use netplay keyed state for transient data instead. Database failures are visible and never replaced with fabricated local success.
 
@@ -127,3 +127,57 @@ Use the Manage my gifts link for the buyer-owned Stripe portal in the shop.
 Records-only apps support the same shop bridge as room apps. In the sandboxed
 view, use `createShop({target: parent})` to send checkout and booking requests to
 the authenticated outer shell; a room simulation is not required for payments.
+
+## Real Stripe test checkout on this computer
+
+Use the installed toolkit's app guide and this reference for its exact version.
+The local toolkit MCP exposes `parts_find`; the hosted directory connector may not.
+With a shell, `homie-studio parts find "giving"` is the supported equivalent. Read a
+part's contract: a pledge-only example is not payment fulfilment. The giving starter
+uses the shop bridge; `shop.catalog()` is available in this version. Field names
+start with a lowercase letter and continue with lowercase letters, digits or `_`.
+
+No public HTTPS address or Cloudflare account is needed for local Stripe test
+payments. Use the owner's existing Stripe CLI sandbox profile; log in only when
+that profile is unavailable or expired. Never create an imitation checkout.
+
+1. Create the app and `shop init --giving --currency CAD` (choose the actual currency).
+2. Choose the computer's Wi-Fi address and a fixed dev port. Run
+   `homie-studio shop connect --local --profile <sandbox-profile> --url http://192.168.1.8:8787`.
+   This syncs real test Products, Prices and Payment Links through Stripe CLI and
+   saves local bindings in the project's `.dev.vars`; it does not deploy or create
+   a public webhook. Local products use a separate identity from deployed products.
+3. Run `stripe --project-name <sandbox-profile> listen --all-snapshot --forward-to http://localhost:8787/api/shop/hook`.
+   Put its signing secret in root `.dev.vars` as `STRIPE_WEBHOOK_SECRET=whsec_…`.
+   Keep that listener running. Never commit the secrets file or print its contents.
+4. Run `homie-studio dev --lan --port 8787`. Dev loads root `.dev.vars` beside its
+   generated Wrangler configuration. Restart after changing bindings. If dev reports
+   another port, update the listener and repeat local shop connection with that port.
+5. Open **the same Wi-Fi address** on desktop and phones. Checkout returns there,
+   so its guest cookie and thank-you page work on both. Localhost is only suitable
+   when every browser is on this computer. Use Stripe's test card; verify the signed
+   webhook, paid order and app record before reporting success.
+
+The first Checkout emits `order.paid`. Later paid subscription-cycle invoices each
+create a distinct paid order and emit `order.paid` with the original app and reference.
+Invoice retries do not count again; the initial invoice does not duplicate Checkout.
+Keep fulfilment idempotent by order/event ID. Subscription lifecycle events remain
+available separately. Failed invoices never create paid gifts.
+
+`check` uses isolated records on localhost by default; `--no-isolate` opts into the
+existing records. Stripe webhooks use the ordinary local database, so for a real
+payment acceptance run use a disposable studio and `check --no-isolate`. Test money
+must not be mistaken for live giving. Named staff/tablet/kiosk surfaces and roles
+are supported; only the surfaces named by each need are asserted.
+
+For a Give button opening a new tab, name its popup in the click step:
+
+```json
+{"surface":"phone","selector":"[data-give]","click":true,"popup":"checkout"}
+```
+
+Later steps and assertions can use `"surface":"checkout"` for the provider page.
+The phone remains its own surface; assert its confirmed gift after checkout. The
+checker brings each page forward before reading or capturing it. Use the real
+provider's controls, never a test-only app action. App sharing defaults to the top
+right, clear of bottom tabs; `screen.share` remains an author-controlled override.

package/bin/homie-studio.mjs

@@ -846,7 +846,7 @@ const OUTWARD_FLAGS = {
   'chat remove': ['url', 'all'], 'chat budget': ['url'],
   'servers close': ['url', 'reopen'], 'servers level': ['url'], 'servers member': ['url', 'role', 'remove'],
   'parts reissue': ['claim-hash', 'receipt-verified', 'buyer'], 'parts retire': [], 'parts keys': [], 'parts refund': ['game'],
-  'shop connect': ['url', 'managed', 'live', 'manual', 'renew', 'from-clipboard'], 'shop disconnect': ['url'], 'shop refund': ['url', 'reason', 'note', 'manual-transaction'],
+  'shop connect': ['local', 'profile', 'url', 'managed', 'live', 'manual', 'renew', 'from-clipboard'], 'shop disconnect': ['url'], 'shop refund': ['url', 'reason', 'note', 'manual-transaction'],
   'agents pass': ['url', 'label', 'server', 'hands', 'role', 'days'], 'agents revoke': ['url'], 'agents brain': ['url', 'budget', 'remove'],
   'agents sit': ['url', 'server', 'pass', 'label', 'brain'],
   'events webhook': ['url','after'],
@@ -1115,6 +1115,10 @@ async function main() {
     if (!sub) return shopStatus(root, { url });
     if (sub === 'init') return shopInit(root, { supporter: flags.has('supporter'), giving: flags.has('giving'), currency: flags.get('currency') ?? null, price: flags.get('price') ?? 500, managed: flags.has('managed') });
     if (sub === 'check') return shopCheck(root);
+    if (sub === 'connect' && flags.has('local')) {
+      if(flags.has('live'))throw new Error('Local checkout requires test mode');
+      return (await import('../lib/shop-local.mjs')).shopConnectLocal(root,{url:flags.get('url'),profile:flags.get('profile')});
+    }
     if (sub === 'connect') return shopConnect(root, { managed: flags.has('managed') ? true : null, live: flags.has('live'), manual: flags.has('manual'), fromClipboard: flags.has('from-clipboard'), renew: flags.has('renew'), log: (line) => process.stderr.write(`${line}\n`) });
     if (sub === 'disconnect') return shopDisconnect(root);
     if (sub === 'catalog') {

package/guides/app/SKILL.md

@@ -6,6 +6,12 @@ compatibility: Node 22 and Chrome; the studio's pinned toolkit and Wrangler.
 
 # Make an app
 
+For the installed version’s payment, records and local-check contracts, start with
+`node_modules/@homie-rocks/studio/apps/APPS.md`. Its “Real Stripe test checkout on
+this computer” section is the supported offline-hosting path: real Stripe test
+checkout, CLI webhook forwarding, root `.dev.vars`, Wi-Fi return pages and named
+checkout popups. Use an existing approved sandbox profile; no deploy is needed.
+
 An app is **one screen, its roles, and its parts**. The screen transforms with the person and the work: a camera moves, a ticket unfolds, controls appear in context. Do not build page-to-page navigation, a sidebar of links, or a conventional admin website inside it. A studio's public website can still have pages around the app.
 
 Read the person's brief and existing `apps/<id>/` first. Choose sensible engineering defaults from the brief; never ask the person how to implement shared state. A business or cause needs no game demo, mandatory entertainment, invented customers, scores or rounds. Never impose a shop, directory listing, sign-in for public visitors, or paid media. Make the fewest human steps possible; run commands yourself.
@@ -38,7 +44,7 @@ Before writing scene components:
 
 1. Run `style init <id> --prompt "<the person's own scene words>"`. Record the direction in the Codex: composition, camera, materials, colour, typography and motion. Use the same style machinery as games, not the starter's default theme.
 2. Inspect the installed `@homie-rocks/*` packages for mechanisms. `geom`, `props`, `render`, `camera`, `postfx` and `fx` can make the place; `input`, `ui`, `ui-world`, `device`, `audio` and `loop` make it usable. Read the package exports and examples rather than guessing imports. Install every dependency reported by the starter or parts before building.
-3. Search `parts_find` for each meaningful piece; shell equivalent: `homie-studio parts find "<piece>"`. Read its contract, source studio and licence. Add fitting pieces with `part_add` / `parts add`; write the missing parts yourself. The example studios share real app pieces: search for venue, workshop, giving, arrivals, scene, queue and sound, not just game characters. If local example studios are available, read their shared `parts/` and manifests without modifying the source studios. A failed catalogue request is not proof that nothing exists.
+3. Search the local toolkit MCP `parts_find` for each meaningful piece (the hosted connector may not expose it); shell equivalent: `homie-studio parts find "<piece>"`. Read its contract, source studio and licence. Add fitting pieces with `part_add` / `parts add`; write the missing parts yourself. The example studios share real app pieces: search for venue, workshop, giving, arrivals, scene, queue and sound, not just game characters. If local example studios are available, read their shared `parts/` and manifests without modifying the source studios. A failed catalogue request is not proof that nothing exists.
 4. Use the art/models/sound/music skills with connected providers and an authorized budget. Generate distinctive assets when useful. If no provider is connected, continue with original geometry, locally drawn SVG, CC0 assets and local synthesized sound. Report the means honestly. Provider absence never justifies replacing the scene with a board.
 5. Record packages, parts with attribution, original work and media routes under **Built from**. Keep costs and provenance visible.
 
@@ -124,7 +130,7 @@ Without Stripe, keep real services and prices visible and say payment is not con
 - `apps/<id>/app.json` describes roles (`signIn`, `can`), surfaces (`phone`, `wall`, `kiosk`, `tablet`), wording, record collections, parts and the real UI action used by check. The app's entry and assets live beside it, just like a game.
 - Before inventing each component, inspect engine packages for the mechanism and `parts_find` for the piece. A queue, quiz, menu board, live total, music loop or video intro can be a part. Record its licence and credit. Sharing happens only when requested; selling parts is not part of this workflow.
 - Use the same engine packages as a game: `@homie-rocks/geom` and `props` for original scenery; `render`, `camera`, `postfx`, `fx` for light, composition and motion; `input`, `ui`, `ui-world`, `audio`, `device`, `loop` for interaction and feel. An app can be fully 3D and wild. Legibility and the actual task come first.
-- Use the `style`, `art`, `models`, `animate`, `sound`, `music`, `video` and `perf` skills where they help. It should look like a game studio made it: a coherent world with a useful HUD, not generic cards and navigation. Media cost and licensing decisions remain the person's.
+- Use the `style`, `art`, `models`, `animate`, `sound`, `music`, `video` and `perf` skills where they help. Give the organisation a coherent scene with readable controls and purposeful motion. Media cost and licensing decisions remain the person's.
 - Keep native buttons at least 44 px, keyboard focus visible, text as text, motion reducible, and the wall QR clear of useful information. Pointer gesture guards belong on the canvas, not native click buttons.
 
 ## Roles and records

package/guides/shop/SKILL.md

@@ -173,3 +173,11 @@ CLI fixture/API tokens; never enter card digits into a page. The local listener
 for development; production sends signed events directly to the studio's webhook.
 The optional keyed fixture remains available for testing explicitly selected session
 checkout. Label offline fixtures simulations.
+
+## Local Stripe test payments
+
+Use `shop connect --local --profile <sandbox-profile> --url http://<Wi-Fi-IP>:8787`
+and Stripe CLI `listen --all-snapshot --forward-to http://localhost:8787/api/shop/hook`. The full
+recipe is in the installed toolkit’s `apps/APPS.md`, “Real Stripe test checkout on
+this computer”. It uses root `.dev.vars`, needs no public HTTPS or Cloudflare, and
+keeps the existing approved Stripe CLI session. Do not write a stand-in checkout.

package/lib/app-needs.mjs

@@ -24,6 +24,8 @@ export function readAppNeeds(root, id) {
 /** Run real UI actions. A failed or absent flow stays visible; continue collecting other needs. */
 export async function proveAppNeeds({ plan, surfaces, shots, report, ready = async () => {} }) {
   const results = [];
+  const appBarrier=ready;
+  ready=async s=>{await s.page.bringToFront?.();if(s.external){s.frame=s.page.mainFrame();return;}await appBarrier(s);};
   let activeRole;
   const surface = name => { const s = surfaces.find(s => s.name === name && (!activeRole || s.role === activeRole)) ?? surfaces.find(s => s.name === name); if (!s) throw new Error(`unknown surface ${name}`); return s; };
   for (const need of plan.needs) {
@@ -33,7 +35,8 @@ export async function proveAppNeeds({ plan, surfaces, shots, report, ready = asy
     const result = { id: need.id, statement: need.statement, status: 'not', captures: [] };
     try {
       if (!Array.isArray(need.assertions) || !need.assertions.length) throw new Error('need requires assertions on its named surfaces');
-      for (const name of names) { const s = surface(name); if (need.role && s.role !== need.role) throw new Error(`${name} requires role ${need.role}, got ${s.role ?? 'unspecified'}`); }
+      const popupNames=new Set((need.steps??[]).map(s=>s.popup).filter(Boolean));
+      for (const name of names) { if(popupNames.has(name))continue; const s = surface(name); if (need.role && s.role !== need.role) throw new Error(`${name} requires role ${need.role}, got ${s.role ?? 'unspecified'}`); }
       for (const name of new Set(need.assertions.filter(a => a.effect).map(a => a.surface))) await surface(name).frame.evaluate(() => { window.__homieNeedsEffects = []; });
       for (const step of need.steps ?? []) {
         const target=surface(step.surface);
@@ -43,7 +46,19 @@ export async function proveAppNeeds({ plan, surfaces, shots, report, ready = asy
         if (step.reload) { await page.reload({ waitUntil: 'domcontentloaded' }); await ready(surface(step.surface)); continue; }
         await waitInApp(target,step.selector,f=>f.waitForSelector(step.selector, { visible: true, timeout:10000 }),{ready});
         const frame=target.frame;
-        if (step.click) await frame.click(step.selector);
+        if (step.click && step.popup) {
+          let listener,timer;
+          const opened=new Promise((resolve,reject)=>{
+            listener=popup=>resolve(popup);page.once('popup',listener);
+            timer=setTimeout(()=>reject(new Error('payment popup did not open')),10000);
+          });
+          try {
+            const [popup]=await Promise.all([opened,frame.click(step.selector)]);
+            surfaces.push({name:step.popup,page:popup,frame:popup.mainFrame(),external:true,role:target.role});
+            await page.bringToFront();
+          } finally {clearTimeout(timer);page.off('popup',listener);}
+        }
+        else if (step.click) {await frame.click(step.selector);await page.bringToFront?.();}
         else if (step.fill !== undefined) { await frame.$eval(step.selector, el => { el.value = ''; el.dispatchEvent(new Event('input', { bubbles: true })); }); await frame.type(step.selector, String(step.fill)); }
         else if (step.select !== undefined) await frame.select(step.selector, String(step.select));
         else throw new Error('step needs click, fill, select or reload');

package/lib/app-ready.mjs

@@ -1,5 +1,6 @@
 /** One arrival barrier for baseline proof, needs reloads and rebuilt frames. */
 export async function appReady(surface, {timeout=60000}={}) {
+  await surface.page.bringToFront?.();
   const end=Date.now()+timeout;
   let error;
   do {

package/lib/art-cli.mjs

@@ -151,13 +151,13 @@ export async function styleCommand(root, sub, positional, flags, { log = () => {
   } else if (verb === 'set') {
     if (!args[1] || args[2] === undefined) return { ok: false, command: 'style set', why: `usage: homie-studio style set <id> <decision> <value> (decisions: ${CATALOGUE_IDS.slice(0, 10).join(', ')}, …)` };
     r = setDecision(root, id, args[1], args.slice(2).join(' '), { by: flags.get('by') === 'person' ? 'person' : 'ai', why: flags.get('why') ?? null, words: flags.get('words') ?? null, unlock: flags.has('unlock'), reason: flags.get('reason') ?? null, confirm: flags.has('confirm'), manifest: manifest() });
-  } else if (verb === 'steer') r = steerDecision(root, id, args[1], args.slice(2).join(' ') || String(flags.get('words') ?? ''), { manifest: manifest() });
+  } else if (verb === 'steer') r = steerDecision(root, id, args[1], args.slice(2).join(' ') || String(flags.get('words') ?? ''), { manifest: manifest(), by: flags.get('by') === 'person' ? 'person' : 'ai' });
   else if (verb === 'lock') r = lockDecision(root, id, args[1] ?? 'style', { by: 'person', words: flags.get('words') ?? null });
   else if (verb === 'unlock') r = unlockDecision(root, id, args[1], { reason: flags.get('reason') ?? null, by: 'person' });
   else if (verb === 'board') { const { styleBoard } = await import('./style-board.mjs'); r = await styleBoard(root, id, { prompt: String(flags.get('prompt') ?? ''), log, library: !flags.has('no-library') }); }
   else if (verb === 'pick') {
     const mixes = Object.fromEntries(list(flags.get('mix')).map((x) => x.split('=')).filter(([k, v]) => k && v));
-    r = pickDirection(root, id, args[1] && !args[1].includes('=') ? args[1] : null, { mixes, manifest: manifest() });
+    r = pickDirection(root, id, args[1] && !args[1].includes('=') ? args[1] : null, { mixes, manifest: manifest(), by: flags.get('by') === 'person' ? 'person' : 'ai' });
   } else if (verb === 'mood') { const { recordMood } = await import('./style-board.mjs'); r = await recordMood(root, id, args[1], resolve(String(flags.get('image') ?? '')), { usd: flags.get('usd') ?? null, receipt: flags.get('receipt') ?? null, model: flags.get('model') ?? null }); }
   else if (verb === 'golden') {
     if (args[1] === 'add') { const { addGolden } = await import('./style-board.mjs'); r = await addGolden(root, id, resolve(String(args[2] ?? flags.get('image') ?? '')), { from: flags.get('from') ?? null }); }

package/lib/art-tools.mjs

@@ -223,11 +223,11 @@ export function artToolDefs(ctx, h) {
         const by = a.by === 'person' ? 'person' : 'ai';
         let r; let action;
         try {
-          if (a.pick || a.mix) { action = 'pick'; r = pickDirection(root, game, a.pick ? String(a.pick).toLowerCase() : null, { mixes: a.mix && typeof a.mix === 'object' ? a.mix : {}, manifest }); }
+          if (a.pick || a.mix) { action = 'pick'; r = pickDirection(root, game, a.pick ? String(a.pick).toLowerCase() : null, { mixes: a.mix && typeof a.mix === 'object' ? a.mix : {}, manifest, by }); }
           else if (!a.decision) return fail('name the decision (decision: "style.palette"), or pick a direction (pick: "b")');
           else if (a.lock) { action = 'lock'; r = lockDecision(root, game, a.lock === true ? a.decision : String(a.lock), { by: 'person', words: a.words ?? (by === 'person' ? 'tapped Lock' : null) }); }
           else if (a.unlock && a.value === undefined && a.steer === undefined) { action = 'unlock'; r = unlockDecision(root, game, a.decision, { reason: a.reason ?? null, by: 'person' }); }
-          else if (a.steer) { action = 'steer'; r = steerDecision(root, game, a.decision, String(a.steer), { manifest }); }
+          else if (a.steer) { action = 'steer'; r = steerDecision(root, game, a.decision, String(a.steer), { manifest, by }); }
           else if (a.value !== undefined) { action = 'set'; r = setDecision(root, game, a.decision, a.value, { by, why: null, words: a.words ?? null, unlock: a.unlock === true, reason: a.reason ?? null, confirm: a.confirm === true, manifest }); }
           else return fail('say what to do: value, steer, lock, unlock, pick or mix');
         } catch (error) { return fail(error.message); }

package/lib/check.mjs

@@ -387,6 +387,7 @@ export async function checkApp({ isolate = true, root = null, url, game, meta, s
     for(const name of ['wall','phone','phone-two'])await openSurface(name);
     const textOf = (f) => f.$eval(proof.observe, (e) => e.textContent);
     const actor = surfaces[1];
+    await appReady(actor);
     await waitInApp(actor,proof.action,f=>f.waitForFunction((selector) => { const el = document.querySelector(selector); return el && !el.disabled && !el.hidden; }, {}, proof.action));
     before = await waitInApp(actor,proof.observe,textOf);
     await actor.frame.click(proof.action);
@@ -406,6 +407,7 @@ export async function checkApp({ isolate = true, root = null, url, game, meta, s
     report?.check?.('app-action', 'pass', { note: 'action reached wall and both phones; reconnect retained it' });
     }
     for(const need of plan?.needs??[])for(const item of [...(need.steps??[]),...(need.assertions??[])]) {
+      if(plan.needs.some(n=>(n.steps??[]).some(s=>s.popup===item.surface)))continue;
       const role=item.role??need.role??meta.surfaces?.[item.surface]??(item.surface==='staff'?'staff':undefined);
       if(!surfaces.some(s=>s.name===item.surface&&s.role===role))await openSurface(item.surface,role);
     }

package/lib/decisions.mjs

@@ -130,7 +130,7 @@ export const CATALOGUE = Object.freeze([
   ['style.render', 'style', 'How is the world drawn?', [], (ctx) => {
     if (ctx.drawn?.render && RENDERS[ctx.drawn.render]) return { value: ctx.drawn.render, label: RENDERS[ctx.drawn.render].label, why: 'what the game draws now (its style.json)', options: Object.entries(RENDERS).map(([k, v]) => ({ id: k, label: v.label, value: k })) };
     const hit = best(RENDERS, ctx);
-    const key = hit?.[0] ?? 'lowpoly-flat';
+    const key = hit?.[0] ?? (ctx.kind === 'app' ? 'illustrated' : 'lowpoly-flat');
     return { value: key, label: RENDERS[key].label, why: hit ? `your words ${said(ctx, RENDERS[key].words)}: ${RENDERS[key].note}` : `nothing named a look: ${RENDERS[key].note}`, options: Object.entries(RENDERS).map(([k, v]) => ({ id: k, label: v.label, value: k })) };
   }],
   ['style.palette', 'style', 'Which colours, and what is each one for?', ['style.render', 'style.light'], (ctx) => {
@@ -141,6 +141,10 @@ export const CATALOGUE = Object.freeze([
       v.ramp = rampFrom(v);
       return { value: v, label: 'The codex\'s own colours', why: 'the Game Codex already names them', options: paletteOptions(ctx) };
     }
+    if(ctx.kind === 'app' && !best(PALETTES,ctx)) {
+      const value=paletteValue('custom',{bg:ctx.theme.bg??'#f6f3ec',ink:ctx.theme.fg??'#243d36',accent:ctx.theme.accent??'#226b59',accent2:'#b87935'});
+      value.ramp=rampFrom(value);return {value,label:'The place’s colours',why:'a readable starting palette for the app; refine it to the organisation',options:paletteOptions(ctx)};
+    }
     const hit = best(PALETTES, ctx);
     const key = hit?.[0] ?? ({ gather: 'meadow-morning', brawl: 'candy-pop', race: 'desert-noon', rpg: 'heroic-dawn', shooter: 'space-ink', platformer: 'meadow-morning', party: 'candy-pop', puzzle: 'candy-pop', sports: 'meadow-morning' })[ctx.genre] ?? 'meadow-morning';
     return { value: paletteValue(key), label: paletteLabel({ name: key }), why: hit ? `your words ${said(ctx, PALETTES[key].words)}` : `a ${ctx.genre} game reads best in bright, separate colours`, options: paletteOptions(ctx) };
@@ -479,7 +483,7 @@ export function setDecision(root, id, did, input, { by = 'ai', why = null, words
  * Steer: the person's words, applied where the vocabulary knows them ("warmer", "less saturated", "golden hour",
  * "closer", "chunkier", "add outlines", a hex colour), and always recorded. The decision becomes steered.
  */
-export function steerDecision(root, id, did, words, { manifest = null } = {}) {
+export function steerDecision(root, id, did, words, { manifest = null, by = 'person' } = {}) {
   const doc = readDecisions(root, id);
   if (!doc) throw new Error(`games/${id} has no decisions yet: homie-studio style init ${id}`);
   const rec = doc.decisions[did];
@@ -489,7 +493,7 @@ export function steerDecision(root, id, did, words, { manifest = null } = {}) {
   if (rec.state === 'locked') return { ok: false, command: 'style steer', id, decision: did, locked: true, why: `${did} is locked: unlock it (with a reason, after the blast radius) before steering it` };
   const { value, applied } = applySteer(did, rec.value, w, doc);
   const steer = [...(rec.steer ?? []), w].slice(-10);
-  change(rec, { value, label: did === 'style.palette' ? paletteLabel({ ...value, steered: steer.join(', ') }) : labelOf(did, value), steer, state: rec.state === 'pinned' ? 'pinned' : 'steered', why: `steered by the person: "${w}"` }, { by: 'person', words: w });
+  change(rec, { value, label: did === 'style.palette' ? paletteLabel({ ...value, steered: steer.join(', ') }) : labelOf(did, value), steer, state: rec.state === 'pinned' ? 'pinned' : by === 'person' ? 'steered' : rec.state, why: `refined by ${by === 'person' ? 'the person' : 'the AI'}: "${w}"` }, { by, words: w });
   if (did === 'style.palette' && doc.decisions['style.light'] && doc.decisions['style.light'].state !== 'locked') {
     const L = doc.decisions['style.light'];
     L.value = { ...L.value, ...lightColours(LIGHTS[L.value.time] ?? LIGHTS.morning, value) };
@@ -762,7 +766,7 @@ export function directionsFor(root, id, { prompt = '' } = {}) {
 }
 
 /** Pick a direction (all its style values) or Mix rows from several: { 'style.palette': 'b', … }. By the person. */
-export function pickDirection(root, id, choice, { mixes = {}, manifest = null } = {}) {
+export function pickDirection(root, id, choice, { mixes = {}, manifest = null, by: actor = 'person' } = {}) {
   const doc = readDecisions(root, id);
   if (!doc?.board?.directions?.length) throw new Error(`games/${id} has no style board yet: homie-studio style board ${id}`);
   const by = Object.fromEntries(doc.board.directions.map((d) => [d.id, d]));
@@ -778,7 +782,7 @@ export function pickDirection(root, id, choice, { mixes = {}, manifest = null }
     const value = from.values[did];
     if (value === undefined || JSON.stringify(rec.value) === JSON.stringify(value)) continue;
     if (rec.state === 'locked') { refused.push(did); continue; }
-    change(rec, { value, label: labelOf(did, value), why: `the person picked direction ${from.id.toUpperCase()} on the style board`, state: rec.state === 'pinned' ? 'pinned' : 'steered' }, { by: 'person' });
+    change(rec, { value, label: labelOf(did, value), why: `${actor === 'person' ? 'the person' : 'the AI'} picked direction ${from.id.toUpperCase()} on the style board`, state: rec.state === 'pinned' ? 'pinned' : actor === 'person' ? 'steered' : rec.state }, { by: actor });
     changed.push(did);
   }
   doc.board.chosen = choice ?? doc.board.chosen ?? null;

package/lib/dev.mjs

@@ -209,6 +209,9 @@ export function devConfig(root, remoteAi) {
   const copy = join(base, '.wrangler', 'homie-dev.wrangler.json');
   mkdirSync(dirname(copy), { recursive: true });
   writeFileSync(copy, `${JSON.stringify(json, null, 2)}\n`);
+  const localSecrets=join(root,'.dev.vars'), generatedSecrets=join(dirname(copy),'.dev.vars');
+  if(existsSync(localSecrets))writeFileSync(generatedSecrets,readFileSync(localSecrets),{mode:0o600});
+  else rmSync(generatedSecrets,{force:true});
   const notes = [
     ...(routed ? [`Local dev leaves out the production route${stripped.length === 1 ? '' : 's'} in wrangler.jsonc (${stripped.join(', ') || 'route keys'}): rooms here use this computer's own address, never the live site's. wrangler.jsonc is unchanged.`] : []),
     ...(aiChanged ? [remoteAi ? aiNote : 'No Workers AI under dev (--remote-ai for the real one, billed): AI guides think with Clef on this computer when Ollama has it, else scripted.'] : aiNote ? [aiNote] : []),

package/lib/shop-links.mjs

@@ -6,7 +6,7 @@ import { LINKS_STRIPE_VERSION, linkSettings, paymentLinkURL } from '../worker/sh
 import { HOOK_EVENTS, SHOP_HOOK_EVENTS } from './shop.mjs';
 const hash = (value) => createHash('sha256').update(JSON.stringify(value)).digest('hex');
 const same = (a, b) => Object.keys(a ?? {}).length === Object.keys(b).length && Object.entries(b).every(([k, v]) => a?.[k] === v);
-export async function syncPaymentLinks({ root, api, shop, slug, site, mode, w, receipt, saveReceipt, bookingSlots = [] }) {
+export async function syncPaymentLinks({ root, api, shop, slug, site, mode, w, receipt, saveReceipt, bookingSlots = [], local = false }) {
   const list = async (path, params = {}) => {
     const all = []; let cursor;
     do {
@@ -19,7 +19,8 @@ export async function syncPaymentLinks({ root, api, shop, slug, site, mode, w, r
     } while (cursor);
     return all;
   };
-  const secrets = await w(['secret', 'list']);
+  if(local && mode!=='test')throw new Error('Local checkout requires Stripe test mode');
+  const secrets = local ? {code:0,stdout:'[]'} : await w(['secret', 'list']);
   if (secrets.code !== 0) return { ok: false, needs: 'cloudflare', why: 'Connect Cloudflare and deploy the studio, then run shop connect again.' };
   const names = JSON.parse(secrets.stdout ?? secrets.out);
   const has = (name) => names.some((s) => s.name === name);
@@ -134,6 +135,7 @@ export async function syncPaymentLinks({ root, api, shop, slug, site, mode, w, r
     portal=await api('POST',portal?`/v1/billing_portal/configurations/${portal.id}`:'/v1/billing_portal/configurations',params);
     config.portal=portal.login_page?.url;
   }
+  if(local)return {ok:true,command:'shop connect',local:true,mode,config};
   const purchases = root ? await (await import('./purchase-links.mjs')).syncPurchaseLinks({ root, api, slug, site, mode, list, till: shop.purchasesTill ?? shop.till }) : null;
   const purchaseSecrets = {};
   if (purchases?.config.offers.length && !has('PURCHASE_SIGNING_KEYS')) {

package/lib/shop-local.mjs

@@ -0,0 +1,31 @@
+/** Real Stripe test links, delivered by the owner's Stripe CLI listener. */
+import {readFileSync,writeFileSync,existsSync} from 'node:fs';
+import {join} from 'node:path';
+import {createHash} from 'node:crypto';
+import {stripeProcess} from './stripe-connect.mjs';
+import {syncPaymentLinks} from './shop-links.mjs';
+import {checkShop} from '../worker/shop-rules.mjs';
+import {formEncode,redactStripe} from '../worker/stripe.mjs';
+export async function shopConnectLocal(root,{url,profile,exec=stripeProcess}={}) {
+ const origin=new URL(url??'http://localhost:8787');
+ if(origin.protocol!=='http:' || !/^(localhost|127\.0\.0\.1|10\.\d+\.\d+\.\d+|192\.168\.\d+\.\d+|172\.(1[6-9]|2\d|3[01])\.\d+\.\d+)$/.test(origin.hostname))throw new Error('Local Stripe needs an HTTP localhost or Wi-Fi address');
+ if(!profile)throw new Error('Name the existing Stripe sandbox CLI profile with --profile');
+ const checked=checkShop(JSON.parse(readFileSync(join(root,'shop.json'),'utf8')));
+ if(!checked.ok)throw new Error('Fix shop.json before connecting Stripe');
+ const api=async(method,path,params={},idempotency)=>{
+  const args=['--project-name',profile,method.toLowerCase(),path];
+  for(const [k,v] of formEncode(params))args.push('-d',`${k}=${v}`);
+  if(idempotency)args.push('--idempotency',idempotency);
+  const r=await exec(args,{cwd:root});let body;try{body=JSON.parse(r.stdout);}catch{}
+  if(r.code!==0||body?.error||!body)throw new Error('Stripe test request failed: '+redactStripe(body?.error?.message??r.stderr??'no response').slice(0,500));
+  if(body.livemode===true||body.data?.some(o=>o.livemode===true))throw new Error('Local checkout refuses live Stripe objects');
+  return body;
+ };
+ const slug='local-'+createHash('sha256').update(root).digest('hex').slice(0,16);
+ const r=await syncPaymentLinks({api,shop:checked.shop,slug,site:origin.origin,mode:'test',local:true});
+ const file=join(root,'.dev.vars');let vars=existsSync(file)?readFileSync(file,'utf8'):'';
+ vars=vars.replace(/^STRIPE_(?:SHOP_LINKS|CHECKOUT_MODE)=.*\n?/gm,'');
+ vars+=`\nSTRIPE_CHECKOUT_MODE=links\nSTRIPE_SHOP_LINKS=base64:${Buffer.from(JSON.stringify(r.config)).toString('base64')}\n`;
+ writeFileSync(file,vars,{mode:0o600});
+ return {ok:true,command:'shop connect',local:true,mode:'test',url:origin.origin,message:'Test Payment Links saved to root .dev.vars.',next:[`stripe --project-name ${profile} listen --all-snapshot --forward-to http://localhost:${origin.port||80}/api/shop/hook`,'Put the listener signing secret in root .dev.vars as STRIPE_WEBHOOK_SECRET, then start/restart homie-studio dev --lan. Keep the listener running.','Open the same Wi-Fi address on phones; complete Stripe test checkout and verify the paid order and app event.']};
+}

package/lib/style-presets.mjs

@@ -6,6 +6,7 @@
 
 /** How the world is drawn. `family`: the starter library family that fits; `materials`: the material model. */
 export const RENDERS = Object.freeze({
+  illustrated: { label: 'Illustrated place', words: /\b(illustrated|illustration|pictorial)\b/i, materials: 'flat', outline: false, family: 'kenney', fonts: { display: 'Fraunces', body: 'Inter' }, vfx: 'soft', note: 'readable objects, clear typography and purposeful motion for the work of this place' },
   'lowpoly-flat': { label: 'Flat low-poly', words: /\b(low[- ]?poly|cozy|cosy|cute|toy|minimal|clean|simple|wholesome|chill)\b/i, materials: 'flat', outline: false, family: 'kenney', fonts: { display: 'Fredoka', body: 'Nunito' }, vfx: 'soft', note: 'faceted shapes in flat palette colours: the cheapest look on a phone, the most coherent, and the richest free library' },
   toon: { label: 'Toon / cel', words: /\b(toon|cel|cartoon|anime|comic|neon|cyber|synth|arcade)\b/i, materials: 'toon', outline: true, family: 'kaykit', fonts: { display: 'Lilita One', body: 'Nunito' }, vfx: 'toon', note: 'banded light and ink outlines: reads at any size, loud on a TV' },
   painted: { label: 'Stylised hand-painted', words: /\b(painterly|painted|storybook|watercolou?r|ghibli-like|fairy ?tale|whimsical|hand[- ]painted)\b/i, materials: 'hand-painted', outline: false, family: 'kaykit', fonts: { display: 'Fraunces', body: 'Lora' }, vfx: 'soft', note: 'soft painted albedo with the light baked gently in: warm and storybook' },

package/lib/template-history.json

@@ -3624,6 +3624,48 @@
      }
     }
    }
+  },
+  "0.51.3": {
+   "files": {
+    "CLAUDE.md": "ddf2b2a0376202f6",
+    "README.md": "684b3cca8001673c",
+    "HANDOFF.md": "29337e2ace95b2e7",
+    "games/README.md": "5ad32fe80c61f117",
+    "music/README.md": "a3dc042dadd39df8",
+    "videos/README.md": "16babc3437d5545b",
+    "posts/README.md": "37841aae476bd540",
+    "site/README.md": "1dbdf22c03a1e505",
+    "site/src/worker.mjs": "6cc5c6131eaf6fd0"
+   },
+   "sections": {
+    "AGENTS.md": {
+     "(intro)": "394cbbe934e80722",
+     "## Version-matched authoring guides": "f6261a0e5801b96b",
+     "## Layout": "f3a280b8c96cd068",
+     "## Apps: one screen, roles and parts": "c10aa0441ea89702",
+     "## Commands (all through the pinned CLI in node_modules)": "c20d90de21cde0c7",
+     "## The site": "0cb8dd9a6f8a0096",
+     "## Making games": "bb715272fd1a615b",
+     "## The Game Codex and progress": "0738ef719cef3a4c",
+     "## Art direction and models": "a48fff7bf0a5f2fc",
+     "## Running live games (the back office)": "51ebf2ab756f6e4d",
+     "## Servers and AI seats": "1ccfd549d2369a60",
+     "## Selling things (the shop)": "43a3556be93d1235",
+     "## Continuing a build from the Claude app": "0d68081e924ca419",
+     "## Rules": "b2234d80f6cbe71d",
+     "## Telling Homie": "80b46fdd9e578db8",
+     "## Beta": "9d02638207a26e73"
+    }
+   },
+   "named": {
+    "Homie Arcade": {
+     "sections": {
+      "AGENTS.md": {
+       "## Commands (all through the pinned CLI in node_modules)": "8364e05cebefcba4"
+      }
+     }
+    }
+   }
   }
  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homie-rocks/studio",
-  "version": "0.51.2",
+  "version": "0.51.3",
   "description": "A studio for games, music and video on its own Cloudflare: scaffold, multiplayer starters on the netplay contract, a port toolkit that makes existing single-player web games multiplayer, the site Worker with public rooms (Table/Lobby Durable Objects and D1, all on the free Workers plan, no payment method), a site with the hub's sections (Home, Games, Music, Videos, Rooms, Posts with feeds) in the studio's own look, an epic landing page for every game, big songs and videos in the studio's own R2 once it has storage (uploaded, checked by SHA-256, served at the same addresses), deploy, and the homie.rocks directory.",
   "type": "module",
   "license": "Apache-2.0",

package/shop/SHOP.md

@@ -333,3 +333,9 @@ Use Stripe's published CLI test fixtures/tokens to complete Checkout via API;
 never type card details into a form. Stop on an expired profile and ask the owner
 to approve `stripe login --project-name <profile>` once. Stop the adapter and remove
 dev bindings and disposable studios when finished.
+
+## Local Stripe test payments
+
+See `apps/APPS.md`, “Real Stripe test checkout on this computer”, for the supported
+`shop connect --local` and Stripe CLI forwarding recipe. Every paid monthly cycle
+creates a paid order and `order.paid` with the subscription’s original app reference.

package/worker/app-records.mjs

@@ -97,7 +97,7 @@ export async function appRecordsRoute(request, env, meta, url, sub) {
     if (op !== 'read' && !sameOrigin(request, url) && !(appOriginOf(request) && !meta.roles[access.role].signIn)) return fail(403, 'same origin required');
     if (op === 'read') {
       const rows = id ? [await env.DB.prepare('SELECT id, value, version, updated_at FROM app_records WHERE app = ?1 AND collection = ?2 AND id = ?3').bind(recordApp, collection, id).first()].filter(Boolean)
-        : (await env.DB.prepare('SELECT id, value, version, updated_at FROM app_records WHERE app = ?1 AND collection = ?2 ORDER BY updated_at, id LIMIT 1000').bind(recordApp, collection).all()).results;
+        : (await env.DB.prepare('SELECT id, value, version, updated_at FROM app_records WHERE app = ?1 AND collection = ?2 ORDER BY updated_at, id').bind(recordApp, collection).all()).results;
       const records=[];
       for(const r of rows) {
         const record={id:r.id,data:JSON.parse(r.value),version:r.version,updatedAt:r.updated_at};
@@ -124,11 +124,11 @@ export async function appRecordsRoute(request, env, meta, url, sub) {
     if (op !== 'delete') { const bad = recordProblem(meta.records.collections[collection], body.data, { create: op === 'create' }); if (bad) return fail(400, bad); }
     if (op !== 'create' && (!Number.isSafeInteger(body.version) || body.version < 1)) return fail(400, 'record version required');
     const stmt = op === 'create'
-      ? env.DB.prepare('INSERT OR IGNORE INTO app_records (app, collection, id, value, version, updated_at) SELECT ?1, ?2, ?3, ?4, 1, ?5 WHERE (SELECT COUNT(*) FROM app_records WHERE app = ?1 AND collection = ?2) < 1000').bind(recordApp, collection, id, JSON.stringify(body.data), Date.now())
+      ? env.DB.prepare('INSERT OR IGNORE INTO app_records (app, collection, id, value, version, updated_at) VALUES (?1, ?2, ?3, ?4, 1, ?5)').bind(recordApp, collection, id, JSON.stringify(body.data), Date.now())
       : op === 'update' ? env.DB.prepare('UPDATE app_records SET value = ?4, version = version + 1, updated_at = ?5 WHERE app = ?1 AND collection = ?2 AND id = ?3 AND version = ?6').bind(recordApp, collection, id, JSON.stringify(body.data), Date.now(), body.version)
       : env.DB.prepare('DELETE FROM app_records WHERE app = ?1 AND collection = ?2 AND id = ?3 AND version = ?4').bind(recordApp, collection, id, body.version);
     const result = await stmt.run();
-    return result.meta.changes ? json({ ok: true, id, version: op === 'create' ? 1 : body.version + 1 }) : fail(409, 'record changed, already exists, or collection full; reload');
+    return result.meta.changes ? json({ ok: true, id, version: op === 'create' ? 1 : body.version + 1 }) : fail(409, 'record changed or already exists; reload');
   } catch (error) {
     if (/booking capacity|capacity below|slot has active/.test(error.message)) return fail(409, error.message);
     if (error instanceof SyntaxError || error.message === 'body too large') return fail(400, error.message);

package/worker/arrival.mjs

@@ -72,14 +72,14 @@ export function arrivalCard(cat, g, { screen = false, off = false } = {}) {
   const art = wide || tall
     ? `<picture class="arrive-art">${wide && tall ? `<source media="(min-aspect-ratio: 3/4)" srcset="${esc(wide)}">` : ''}<img src="${esc(tall ?? wide)}" alt="" decoding="async" fetchpriority="high" style="object-position:${esc(focus)}"></picture>`
     : '<div class="arrive-art bare" aria-hidden="true"></div>';
-  const html = `<div class="arrive${screen ? ' big' : ''}" data-arrive data-from="${esc(c.from)}">
+  const html = `<div class="arrive${screen ? ' big' : ''}" data-arrive data-from="${esc(c.from)}"${g?.kind === 'app' ? ' data-app' : ''}>
   ${art}<div class="arrive-shade" aria-hidden="true"></div>
   <div class="arrive-in">
     ${studio ? `<p class="arrive-kicker">${esc(studio)}</p>` : ''}
     <h1 class="arrive-title">${esc(g?.name ?? '')}</h1>
     ${pitch ? `<p class="arrive-pitch">${esc(pitch)}</p>` : ''}
     <div class="arrive-meter" aria-hidden="true"><i data-arrive-bar></i></div>
-    <p class="arrive-step" role="status" aria-live="polite"><span data-arrive-step>Finding a room…</span><span class="arrive-room" data-arrive-room></span></p>
+    <p class="arrive-step" role="status" aria-live="polite"><span data-arrive-step>${g?.kind === 'app' ? 'Opening the app…' : 'Finding a room…'}</span><span class="arrive-room" data-arrive-room></span></p>
     ${keys.map(([k, v]) => `<p class="arrive-keys" data-for="${k}">${esc(String(v).slice(0, 160))}</p>`).join('')}
   </div>
 </div>`;
@@ -166,9 +166,10 @@ export const ARRIVAL_JS = String.raw`(function () {
   function later(ms, why) { timers.push(setTimeout(function () { api.lift(why); }, ms)); }
   // Whatever happens, the game gets the screen within 30 s of the page opening.
   later(30000, 'timeout');
+  var app=el.getAttribute('data-app') !== null;
   var roomLabel = '';
   // A full server's wait ("you're next for a seat") stays said while its room loads.
-  api.room = function (label) { roomLabel = label || ''; if (a.phase === 'wait') set('wait', a.step, 0.22); else set('game', 'Loading the game…', 0.22); if (!roomEl.textContent) roomEl.textContent = roomLabel; };
+  api.room = function (label) { roomLabel = label || ''; if (a.phase === 'wait') set('wait', a.step, 0.22); else set('game', app ? 'Opening the app…' : 'Loading the game…', 0.22); if (!roomEl.textContent) roomEl.textContent = roomLabel; };
   api.facts = function (text) { if (!api.done && text) roomEl.textContent = text; };
   api.full = function (text) { set('wait', text, 0.3); };
   var attachedAt = 0;
@@ -185,7 +186,7 @@ export const ARRIVAL_JS = String.raw`(function () {
       set('join', 'Joining ' + (roomLabel || 'the room') + '…', 0.36);
       later(15000, 'cap');
     } else if (m.what === 'role' || m.what === 'token') {
-      set('world', 'Loading the world…', 0.5);
+      set('world', app ? 'Opening the app…' : 'Loading the world…', 0.5);
       // A game built with a helper older than the arrival says nothing more: it has the screen once it has a seat.
       if (a.mode === 'seat' && !seatedTimer) seatedTimer = setTimeout(function () { api.lift('seated'); }, 600);
     } else if (m.what === 'loading') {

package/worker/build-id.mjs

@@ -1,2 +1,2 @@
 // Generated by lib/build-identity.mjs; identifies the bundled runtime sources.
-export const STUDIO_BUILD = Object.freeze({"version":"0.51.2","sha256":"bffe9d1a55a4cbe04cb14a1c1d20fe5d32e7a1aa2d2a637d81b45c10c4087b64"});
+export const STUDIO_BUILD = Object.freeze({"version":"0.51.3","sha256":"ac8867ee4a8f906ed64a106d28d60921552d1caad2d99dd70467ae42e70aea75"});

package/worker/index.mjs

@@ -607,9 +607,15 @@ function finish(res, path) {
   return new Response(res.body, { status: res.status, statusText: res.statusText, headers });
 }
 
+// Repeat after migration: an older isolate may recreate these during a rolling deploy.
+async function removeReferralLeftovers(env) {
+  if(env.DB)await env.DB.prepare("DELETE FROM meta WHERE key GLOB 'referral_*' OR key GLOB 'referral-*'").run();
+}
+
 export default {
   async scheduled(event, env, ctx) {
     const maintenance=(async () => {
+      await removeReferralLeftovers(env);
       const cat = await catalogue(env, 'https://studio.invalid');
       await notifyTools(env,cat,cat.studio?.url??'https://studio.invalid').catch(error=>console.warn('Tool catalogue refresh:',error.message));
       await reconcileOrders(env, shopOf(cat));
@@ -619,6 +625,7 @@ export default {
     await maintenance;
   },
   async fetch(request, env, ctx) {
+    await removeReferralLeftovers(env);
     const url = new URL(request.url);
     await (await import('./functions.mjs')).syncFunctions(env);
     const dispatch=()=>import('./functions.mjs').then(m=>m.runFunctions(env,()=>catalogue(env,url.origin),url.origin));

package/worker/pages.mjs

@@ -125,7 +125,7 @@ export function playPage(cat, g, { embed = false, origin = '', preview = false,
   const shopControl = Boolean(shop && !screen && g.screen?.shop !== false);
   const accent = cat?.studio?.theme?.accent ?? '#ffcf5a';
   const corner = (name, fallback) => (['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(g.screen?.[name]) ? g.screen[name] : fallback);
-  const places = sharePlaces(g.screen?.share);
+  const places = sharePlaces(g.screen?.share ?? (g.kind === 'app' ? 'top-right' : undefined));
   // The phone's glass belongs to the game: no page pan, pinch-zoom, text selection or callout under a thumb
   // (a pinch between a stick thumb and a button thumb made the browser cancel both touches).
   // A game with an art direction (games.json `ui`, from its style.json): the pills wear its paper and text, like its HUD.
@@ -448,6 +448,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
   place();
   addEventListener('resize', place);
   function labelOf(room) {
+    if(boot.kind === 'app') return boot.name;
     var m = /^pub-(\d+)$/.exec(room);
     if (m) return 'Room ' + m[1];
     // A room of this page's server (s-<server>-<n>) is "Room <n>" too: the server pill beside the button names it.
@@ -816,6 +817,11 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
   }
 
   function paint() {
+    if(boot.kind === 'app') {
+      say(state.link?.state === 'reconnecting' ? 'Reconnecting…' : 'Connected');
+      var count=ui && ui.querySelector('[data-room-count]'); if(count)count.hidden=true;
+      serverUi(); return;
+    }
     var f = state.facts;
     var n = f && f.counts ? f.counts.players : null;
     var bits = [];
@@ -861,7 +867,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
   function serverUi() {
     if (!sToggle || !sSheet) return;
     var f = state.facts; var pol = f && f.policy ? f.policy : null;
-    var show = Boolean(state.server) || (hasAi() && readsDial());
+    var show = boot.kind === 'app' ? Boolean(state.server && state.server.id !== 'public') : Boolean(state.server) || (hasAi() && readsDial());
     sToggle.hidden = !show;
     if (!show) return;
     var name = state.server ? state.server.name : 'Quick play';
@@ -1300,7 +1306,7 @@ const WATCH_JS = String.raw`${BUILD_RETRY_JS}(function () {
   }
   sizeUp();
   addEventListener('resize', sizeUp);
-  function labelOf(room) { var m = /^pub-(\d+)$/.exec(room || ''); return m ? 'Room ' + m[1] : (room || ''); }
+  function labelOf(room) { if(boot.kind === 'app') return boot.name; var m = /^pub-(\d+)$/.exec(room || ''); return m ? 'Room ' + m[1] : (room || ''); }
   function el(tag, cls, text) { var e = document.createElement(tag); if (cls) e.className = cls; if (text !== undefined && text !== null) e.textContent = String(text); return e; }
   function svg(path) { var s = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true'); s.setAttribute('fill', 'none'); s.setAttribute('stroke', 'currentColor'); s.setAttribute('stroke-width', '2'); s.setAttribute('stroke-linecap', 'round'); s.setAttribute('stroke-linejoin', 'round'); s.innerHTML = path; return s; }
   var AUTO_ICON = '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6"/>';

package/worker/shop-page.mjs

@@ -90,7 +90,7 @@ export function thanksPage(cat, shop, { session = null, game = null } = {}) {
 <p class="kicker">${esc(studio)}</p>
 <h1 data-thanks-title>Thank you</h1>
 <p class="lead" data-thanks-line>Stripe is confirming the payment. ${shop.giving ? 'Thank you for supporting our work.' : 'This page says when it is yours (a few seconds).'}</p>
-<p>${g ? `<a class="btn" href="/${esc(g.id)}/play">Back to ${esc(g.name)}</a>` : '<a class="btn" href="/">Back to the studio</a>'} <a href="/account/">Your account</a></p>
+<p>${g ? `<a class="btn" href="/${esc(g.id)}/${g.kind === 'app' ? 'open' : 'play'}">Back to ${esc(g.name)}</a>` : `<a class="btn" href="/">Back to ${esc(studio)}</a>`} <a href="/account/">Your account</a></p>
 <p class="note">Your receipt comes from Stripe by email. ${shop.giving ? esc(shop.giving.receiptText ?? '') : refundWords(shop)}</p>
 </section>
 <script type="application/json" id="shop-boot">${JSON.stringify(boot).replace(/</g, '\\u003c')}</script>
@@ -298,7 +298,7 @@ export const SHOP_JS = String.raw`(function () {
     (function poll() {
       tries += 1;
       api('GET', '/api/shop/order?session=' + encodeURIComponent(boot.thanks)).then(function (r) {
-        if (r.status === 'paid') { returnToPage(false); $('[data-thanks-title]').textContent = boot.giving ? 'Thank you for your gift' : 'It\'s yours'; $('[data-thanks-line]').textContent = boot.giving ? 'Your gift is confirmed. Your receipt comes from Stripe by email.' : 'Paid. It is on your account now, in every game of ' + boot.studio + ' that uses it.'; if (r.simulated) { $('[data-thanks-title]').textContent = 'Simulation confirmed'; $('[data-thanks-line]').textContent = 'This was an offline test. No money moved and no Stripe receipt was sent.'; } return; }
+        if (r.status === 'paid') { returnToPage(false); $('[data-thanks-title]').textContent = boot.giving ? 'Thank you for your gift' : 'It\'s yours'; $('[data-thanks-line]').textContent = boot.giving ? 'Your gift is confirmed.' : 'Paid. It is on your account now, in every game of ' + boot.studio + ' that uses it.'; if (r.simulated) { $('[data-thanks-title]').textContent = 'Simulation confirmed'; $('[data-thanks-line]').textContent = 'This was an offline test. No money moved and no Stripe receipt was sent.'; } return; }
         if (tries < 40) setTimeout(poll, 1500);
         else $('[data-thanks-line]').textContent = boot.giving ? 'Stripe has not confirmed your gift yet. Check your email for its receipt.' : 'Stripe has not confirmed it yet. It will be on your account as soon as it does; your receipt comes by email.';
       }).catch(function () { if (tries < 40) setTimeout(poll, 3000); });

package/worker/shop-subscriptions.mjs

@@ -31,6 +31,8 @@ export async function bindSubscription(env, order, session, shop) {
     env.DB.prepare(`INSERT OR IGNORE INTO shop_subscription_events(id,subscription,type,invoice,amount,currency,at)
       VALUES(?1,?2,'subscription.started',NULL,?3,?4,?5)`).bind(`started:${subscription}`,subscription,order.amount,order.currency,order.paid_at),
   ]);
+  const firstInvoice=idOf(session.invoice);
+  if(firstInvoice)await env.DB.prepare('INSERT INTO meta(key,value) VALUES(?1,?2) ON CONFLICT(key) DO NOTHING').bind(`subscription-first-invoice:${subscription}`,firstInvoice).run();
   await reconcileMembership(env, subscription, shop);
   if(!hasStripeKey(env)) {
     const invoice=typeof session.invoice==='string'?session.invoice:session.invoice?.id;
@@ -70,6 +72,7 @@ export async function subscriptionEvent(env, event, shop) {
   else if (event.type === 'invoice.paid') { if (obj.billing_reason === 'subscription_create') return 'initial'; type='subscription.renewed'; state='active'; }
   else if (event.type === 'invoice.payment_failed') { type='subscription.failed'; state='past_due'; }
   else { return 'updated'; } // Scheduling cancellation is not cancellation; Stripe sends deleted when it ends.
+  if(type==='subscription.renewed')await recordRenewal(env,row,obj,at);
   const eventId=type === 'subscription.renewed' ? `paid:${obj.id}` : event.id;
   await env.DB.batch([
     env.DB.prepare(`UPDATE shop_subscriptions SET state=?2,event_at=?3 WHERE id=?1 AND state!='cancelled' AND event_at<=?3 AND ?4=0`).bind(subscription,state,at,hasStripeKey(env)?1:0),
@@ -196,3 +199,42 @@ async function invoiceMembership(env,subscription,invoice) {
   }
   if(writes.length)await env.DB.batch(writes);
 }
+
+/** The invoice is the financial identity; delivery retries never count twice.
+ * Access stays on the original subscription; renewal orders are payment receipts. */
+async function recordRenewal(env, subscription, invoice, at) {
+  if(invoice.status!=='paid')return;
+  if(await env.DB.prepare('SELECT id FROM shop_subscription_events WHERE id=?1').bind(`paid:${invoice.id}`).first())return;
+  const first=await env.DB.prepare('SELECT value FROM meta WHERE key=?1').bind(`subscription-first-invoice:${subscription.id}`).first();
+  if(first?.value===invoice.id || invoice.billing_reason!=='subscription_cycle')return;
+  if(hasStripeKey(env)) {
+    const invoiceId=invoice.id;
+    invoice=await stripeCall(env,'GET',`/v1/invoices/${invoiceId}`,{expand:['lines.data.price.product']});
+    if(invoice.id!==invoiceId || idOf(invoice.parent?.subscription_details?.subscription??invoice.subscription)!==subscription.id || idOf(invoice.customer)!==subscription.customer || invoice.livemode!==(subscription.mode==='live'))throw new Error('Renewal invoice identity mismatch');
+    if(invoice.lines?.has_more)invoice.lines=await allPages(env,`/v1/invoices/${invoiceId}/lines`,{expand:['data.price.product']});
+  }
+  const original=await env.DB.prepare('SELECT * FROM shop_orders WHERE id=?1').bind(subscription.order_id).first();
+  const lines=(await env.DB.prepare('SELECT * FROM shop_order_lines WHERE order_id=?1').bind(original.id).all()).results;
+  // A subscription without shop lines has no shop fulfilment to repeat.
+  if(!lines.length)return;
+  if(invoice.status!=='paid' || invoice.lines?.has_more || invoice.currency!==original.currency || !Number.isSafeInteger(invoice.amount_paid) || invoice.amount_paid<0)throw new Error('Complete paid renewal invoice required');
+  const paidLines=(invoice.lines?.data??[]).map(l=>{
+    const price=idOf(l.price ?? l.pricing?.price_details?.price);
+    const product=l.price?.product;
+    const source=lines.find(s=>{const snapshot=JSON.parse(s.snapshot??'{}');return snapshot.stripePrice===price || hasStripeKey(env) && (product?.metadata?.line===s.id || [product?.metadata?.homie_item,product?.metadata?.item].includes(s.item) || snapshot.stripeProduct && snapshot.stripeProduct===idOf(product));});
+    if(!source || !Number.isSafeInteger(l.quantity) || l.quantity<1 || !Number.isSafeInteger(l.amount) || l.amount<0)throw new Error('Unknown renewal invoice line');
+    return {...source,quantity:l.quantity,amount:l.amount};
+  });
+  if(!paidLines.length)throw new Error('Renewal invoice has no lines');
+  const amount=paidLines.reduce((n,l)=>n+l.amount,0),total=invoice.total??invoice.amount_paid;
+  const id=`renewal:${invoice.id}`;
+  const writes=[env.DB.prepare(`INSERT OR IGNORE INTO shop_orders(id,player,item,game,amount,currency,total,till,mode,status,created_at,updated_at)
+    VALUES(?1,?2,?3,?4,?5,?6,?7,'stripe',?8,'started',?9,?9)`)
+    .bind(id,original.player,original.item,original.game,amount,original.currency,total,original.mode,at),
+    env.DB.prepare(`INSERT OR IGNORE INTO meta(key,value) SELECT ?1,value FROM meta WHERE key=?2`).bind(`shop-reference:${id}`,`shop-reference:${original.id}`),
+    ...paidLines.map((l,i)=>env.DB.prepare(`INSERT OR IGNORE INTO shop_order_lines(id,order_id,position,item,quantity,unit_amount,amount,total,snapshot,status)
+      VALUES(?1,?2,?3,?4,?5,?6,?7,?7,?8,'paid')`).bind(`${id}_${i}`,id,i,l.item,l.quantity,l.amount/l.quantity,l.amount,l.snapshot)),
+    env.DB.prepare("UPDATE shop_orders SET paid_at=?2,status='paid',payment=?3,tax=?4 WHERE id=?1 AND paid_at IS NULL")
+      .bind(id,at,idOf(invoice.payment_intent)??null,total-amount)];
+  await env.DB.batch(writes);
+}

package/worker/site.mjs

@@ -556,14 +556,16 @@ const studioName = (cat) => cat.studio?.name ?? 'Studio';
 export function sectionsOf(cat) {
   const games = (cat.games ?? []).some((g) => g.kind !== 'app');
   const apps = (cat.games ?? []).some((g) => g.kind === 'app');
+  const ownMenu = ['business','cause'].includes(cat.studio?.kind);
   return [
-    ...(cat.site?.pages ?? []).filter(p => /^\/[a-z0-9][a-z0-9._-]*\/$/.test(p) && !['/shop/', '/apps/', '/games/', '/rooms/', '/posts/', '/music/', '/videos/', '/lounge/'].includes(p)).map(p => ({ key: p, href: p, label: p.slice(1, -1).replaceAll('-', ' ').replace(/^./, c => c.toUpperCase()) })),
+    ...(cat.site?.pages ?? []).filter(p => /^\/[a-z0-9][a-z0-9._-]*\/$/.test(p) && !['/shop/', '/apps/', '/games/', '/rooms/', '/posts/', '/music/', '/videos/', '/lounge/'].includes(p)).map(p => ({ key: p, href: p, label: (ownMenu && (cat.games??[]).find(g=>g.kind==='app' && `/${g.id}/`===p)?.name) || p.slice(1, -1).replaceAll('-', ' ').replace(/^./, c => c.toUpperCase()) })),
     cat.shop && { key: 'shop', href: '/shop/', label: cat.shop.giving ? 'Give' : 'Shop' },
-    apps && { key: 'apps', href: '/apps/', label: 'Apps' },
+    ...((ownMenu ? cat.games ?? [] : []).filter(g=>g.kind==='app' && !(cat.site?.pages??[]).includes(`/${g.id}/`)).map(g=>({key:g.id,href:`/${g.id}/`,label:g.name}))),
+    apps && !ownMenu && { key: 'apps', href: '/apps/', label: 'Apps' },
     games && { key: 'games', href: '/games/', label: 'Games' },
     (cat.songs ?? []).length > 0 && { key: 'music', href: '/music/', label: 'Music' },
     (cat.videos ?? []).length > 0 && { key: 'videos', href: '/videos/', label: 'Videos' },
-    (games || apps) && { key: 'rooms', href: '/rooms/', label: 'Rooms' },
+    (games || (apps && !ownMenu)) && { key: 'rooms', href: '/rooms/', label: 'Rooms' },
     (cat.posts ?? []).length > 0 && { key: 'posts', href: '/posts/', label: 'Posts' },
     // The Lounge (0.29.0): the studio's own community room, when studio.json turns it on.
     cat.studio?.lounge && { key: 'lounge', href: '/lounge/', label: cat.studio.lounge.tab ?? 'Lounge' },
@@ -732,7 +734,7 @@ function gameCard(g, playing = 0) {
     <h3><a href="/${esc(g.id)}/">${esc(g.name)}</a></h3>
     <p>${esc(g.landing?.pitch ?? g.blurb)}</p>
     <div class="meta"><span>${esc(g.kind === 'app' ? 'One screen · live together' : playersText(g))}</span>${minutes(g.roundSeconds) ? `<span>${esc(minutes(g.roundSeconds))}</span>` : ''}<span>phone, computer or TV</span></div>
-    <div class="acts"><a class="btn" href="${esc(openPath(g))}" data-play>${PLAY_ICON}${esc(appWords(g).open)}</a><a class="ghost" href="/${esc(g.id)}/">About</a></div>
+    <div class="acts"><a class="btn" href="${esc(openPath(g))}" data-play>${PLAY_ICON}${esc(g.kind === 'app' ? g.landing?.action ?? `Open ${g.name}` : appWords(g).open)}</a><a class="ghost" href="/${esc(g.id)}/">About</a></div>
   </div>
 </article>`;
 }
@@ -836,7 +838,7 @@ export function homeHero(cat, f, { playing = 0 } = {}) {
     <p class="kicker">${esc(name)}<span class="k-opt"> · ${esc(tagline || (f.kind === 'app' ? 'featured app' : 'featured game'))}</span></p>
     <h1 class="title ${titleClass(f.name)}" id="hero-title">${esc(f.name)}</h1>
     <p class="line">${esc(f.landing?.pitch ?? f.blurb)}</p>
-    <div class="row"><a class="play" href="${esc(openPath(f))}" data-play>${PLAY_ICON}<span>${f.kind === 'app' ? esc(appWords(f).open) : 'Play now — free'}</span></a>${liveLine(f, playing, { idle: f.kind === 'app' ? 'One screen, together' : 'Bots hold every empty seat · press Play and you are in a round' })}</div>
+    <div class="row"><a class="play" href="${esc(openPath(f))}" data-play>${PLAY_ICON}<span>${f.kind === 'app' ? esc(f.landing?.action ?? `Open ${f.name}`) : 'Play now — free'}</span></a>${liveLine(f, playing, { idle: f.kind === 'app' ? 'One screen, together' : 'Bots hold every empty seat · press Play and you are in a round' })}</div>
     <a class="also" href="/${esc(f.id)}/">${icon('arrow')}<span>About ${esc(f.name)}</span></a>${games.length > 1 ? `<a class="also" href="/${f.kind === 'app' ? 'apps' : 'games'}/">${icon('games')}<span>All ${games.length} ${f.kind === 'app' ? 'apps' : 'games'}</span></a>` : ''}
   </div>
 </section>`;
@@ -1199,7 +1201,7 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
     ${lineage ? `<p class="based-on">Based on ${ofWhat}</p>` : ''}
     <p class="line">${esc(L.pitch ?? g.blurb)}</p>
     <div class="row">
-      <a class="play" href="${esc(openPath(g))}" data-play>${PLAY_ICON}<span>${app ? esc(words.open) : 'Play now — free'}</span></a>
+      <a class="play" href="${esc(openPath(g))}" data-play>${PLAY_ICON}<span>${app ? esc(L.action ?? `Open ${g.name}`) : 'Play now — free'}</span></a>
       ${liveLine(g, playing, { idle: app ? 'One screen, live together' : `Bots hold every empty seat · one tap and you are in` })}
     </div>
     ${tvOn ? `<a class="also" href="#anywhere">${icon('tv')}<span>Or put it on the big screen</span></a>` : ''}${playing > 0 && rooms.length && watchOf(g) !== 'off' ? `<a class="also" href="/${esc(g.id)}/watch">${icon('eye')}<span>Watch a live room</span></a>` : ''}${trailer ? `<a class="also" href="/videos/${esc(trailer.slug)}/">${icon('videos')}<span>Watch the trailer</span></a>` : ''}${g.saves ? `<a class="also" href="/account/?next=${encodeURIComponent(`/${g.id}/play`)}" data-account>${icon('spark')}<span>Your progress follows you: sign in</span></a>` : ''}
@@ -1270,7 +1272,7 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
     head: `${h.tallImage || h.wideImage ? `<link rel="preload" as="image" href="${esc(h.tallImage ?? h.wideImage)}"${h.tallImage && h.wideImage ? ' media="(max-aspect-ratio: 3/4)"' : ''}>${h.tallImage && h.wideImage ? `<link rel="preload" as="image" href="${esc(h.wideImage)}" media="(min-aspect-ratio: 3/4)">` : ''}` : ''}`,
     // A game that is not public yet (private, or an invite-only beta) is never indexed, and offers nothing.
     ld: landingLd(cat, g, origin, { listed, shop }), ...(listed ? {} : { extraHeaders: { 'x-robots-tag': 'noindex' } }),
-    main: `${hero}${app ? `<section class="band"><div class="band-in"><h2>One screen. Your place in it.</h2><p>${esc(L.about ?? g.blurb)}</p><div class="keys"><a class="btn" href="${esc(openPath(g))}">${esc(words.open)}</a><a class="ghost" href="/${esc(g.id)}/tv">Wall screen</a></div>${qr ? `<div class="scan"><span class="qr">${qr}</span><p>${esc(words.join)}</p></div>` : ''}</div></section>` : ways + liveBand}${servers ? serversBand(g, servers) : ''}${app ? '' : howBand}${shotsBand}${band(partial(cat, 'game', vars))}${band(partial(cat, `game-${g.id}`, vars))}${creditsBand}`,
+    main: `${hero}${app ? `<section class="band"><div class="band-in"><h2>One screen. Your place in it.</h2><p>${esc(L.about ?? g.blurb)}</p><div class="keys"><a class="btn" href="${esc(openPath(g))}">${esc(L.action ?? `Open ${g.name}`)}</a><a class="ghost" href="/${esc(g.id)}/tv">Wall screen</a></div>${qr ? `<div class="scan"><span class="qr">${qr}</span><p>${esc(words.join)}</p></div>` : ''}</div></section>` : ways + liveBand}${servers ? serversBand(g, servers) : ''}${app ? '' : howBand}${shotsBand}${band(partial(cat, 'game', vars))}${band(partial(cat, `game-${g.id}`, vars))}${creditsBand}`,
   });
 }
 

package/worker/version.mjs

@@ -1,2 +1,2 @@
 /** The @homie-rocks/studio version this Worker code is (package.json's; a test keeps them equal). Cache-busts /_homie/site.js. */
-export const STUDIO_VERSION_TAG = '0.51.2';
+export const STUDIO_VERSION_TAG = '0.51.3';