@commercelayer/agent-cli 0.2.3 → 0.2.5

package/README.md

@@ -18,12 +18,15 @@ npx -y @commercelayer/agent-cli@latest init --name "The Blue Brand"   # runs c11
 | `plan` | Validate `store.yml` and the product files, and list what `apply` would create, update or delete: markets, products, images, and the store's name, policies and theme. `missing_images` lists `img/<file>` references with no file in `.commercelayer/img/` (`apply` refuses them); `unused_images` lists files there that nothing references. |
 | `apply [--allow-delete] [--full]` | Make the store match the files, the website included: the theme settings, and the images in `.commercelayer/img/` that the theme and products reference, uploaded when new or changed (unused ones are dropped from the store host). Refuses deletes without `--allow-delete`. Product changes go through a Commerce Layer import: `apply` waits for it, with progress as JSON lines on stderr, and prints one result. `apply_failed` lists the products Commerce Layer refused. While Commerce Layer is busy or unavailable, `apply` keeps reading (backing off on busy) and writes a `retrying` line. `apply_pending` means the import keeps going after 10 minutes, and `c11r status` follows it. An apply still running is finished before a new one starts. `--full` re-imports every product and price, after edits in the Commerce Layer dashboard. |
 | `catalog pull` | Read the products from the catalog source in `store.yml` (a Supabase table, a Google Sheet or a Google Merchant Center feed) into `.commercelayer/products/catalog.csv`. Then `plan` and `apply` as usual. |
-| `storefront init [--force]` | Custom storefronts only. Write a static storefront on [drop-in.js](https://commercelayer.github.io/drop-in.js/), no build step, wired to the sandbox's sales channel. `index.html`: the config block, the products grouped by top-level category with a navigation, a minicart that slides in on add to cart, the hosted cart and checkout, and a product page at `#/p/<sku>` built from `<template id="product-template">` and the `#products` data. `styles.css`: theme tokens first (`--paper`, `--ink`, `--muted`, `--line`, `--accent`, `--on-accent`, `--radius`, `--font`), which also restyle drop-in.js's prices, buttons and links, so a dark theme is a token change; then the drop-in.js overrides, then the page. `app.js`: the market switch, the category links and the product page. Product images are the store's, at `/img/<file>` (from `.commercelayer/img/`, uploaded by `apply`); products with no image get a neutral tile. The site's own files go in `storefront/assets/`. Refuses to overwrite without the flag; with it, rewrites the three files. |
+| `storefront init [--force]` | Custom storefronts only. Write a static storefront on [drop-in.js](https://commercelayer.github.io/drop-in.js/), no build step, wired to the sandbox's sales channel. `index.html`: the config block, the products grouped by top-level category with a navigation, a minicart that slides in on add to cart, the hosted cart and checkout, and a product page at `#/p/<sku>` built from `<template id="product-template">` and the `#products` data. `styles.css`: theme tokens first (`--paper`, `--ink`, `--muted`, `--line`, `--accent`, `--on-accent`, `--radius`, `--font`), which also restyle drop-in.js's prices, buttons and links, so a dark theme is a token change; then the drop-in.js overrides, then the page. `app.js`: the market switch, the category links and the product page. Product images are the store's, at `/img/<file>` (from `.commercelayer/img/`, uploaded by `apply`); products with no image show the tile the store host draws for them, at `/tiles/<sku>.svg`. The site's own files go in `storefront/assets/`. Refuses to overwrite without the flag; with it, rewrites the three files. |
 | `storefront publish` | Custom storefronts only. Upload the folder at `storefront.path` (default `storefront`) to the store host, where it replaces the hosted theme, leaving out dotfiles. `/img/` on the store host is always the store's images, so files under the folder's `img/` are not served: publish lists them as `not_served`. |
 | `storefront check` | Custom storefronts only. Read the published storefront at the preview URL and check it: drop-in.js and its config block wired to this store, the drop-in elements, an add to cart for every product and none for unknown skus, every image loading, alt text, stylesheets after drop-in.css, the theme tokens and drop-in overrides (no dead `::part` rules), title, `lang`, viewport, description, and whether the folder changed since publish. Prints `{ status, summary, checks: [{ id, kind, status: pass\|warn\|fail, message, fix, items }], render }` and exits 1 when a check fails; warnings do not fail. `kind` is `static` today; a later rendering phase adds `render` checks and fills `render`. |
 | `promotions list` · `show <id>` | The store's promotions, live in Commerce Layer: id, name, status, rules, actions, uses, dates; `managed: false` for ones made in the dashboard. |
 | `promotions create` · `update <id>` | Create a promotion, or replace one, from a spec in YAML or JSON on stdin or `-f <file>` (see [Promotions](#promotions)). Prints the promotion and the `orders test` call that checks it. |
 | `promotions enable <id>` · `disable <id>` · `delete <id>` | Turn a promotion on or off, or delete it (ask the human first). |
+| `links list` · `show <id>` | The store's links, live in Commerce Layer: url, id, name, status, what it sells, markets, dates; `managed: false` for ones made in the dashboard. |
+| `links create` | Create a shareable link to a microstore (sku, skus or category) or an order's checkout, from a spec in YAML or JSON on stdin or `-f <file>` (see [Links](#links)). Prints the link, `url` first. |
+| `links enable <id>` · `disable <id>` · `delete <id>` | Turn a link on or off, or delete it (ask the human first). |
 | `orders test [--sku <id>] [--quantity <n>] [--country <CC>] [--code <discount>] [--via-cart] [--decline]` | Buy from the store over UCP as a shopping agent would: discover, search, (cart,) checkout, address, pay with the sandbox handler, read the order back. Prints the order, the `discounts` applied (promotions and codes, in minor units like the totals) and every step. |
 | `orders list` | The orders placed in the store, newest first, as UCP order entities. |
 | `orders show <id or number>` | One order. |
@@ -86,6 +89,17 @@ Optional: `market` (a market code; without it, every market), `starts` and `ends
 
 `list` and `show` print each promotion in the normalized form plus `status` (`active`, `scheduled`, `expired`, `disabled`, `used_up`) and `uses`; that output can be edited and sent back to `update`. Promotions made outside c11r (the dashboard, the sandbox's `SANDBOX10`) are listed with `managed: false` and Commerce Layer's id: `enable`, `disable` and `delete` work on them, `update` answers `promotion_not_managed`. `percentage` is a whole number from 1 to 100; a promotion takes at most 20 codes, a free gift at most 25 SKUs. More than 10 active promotion actions without a coupon gives a `warnings` entry (Commerce Layer applies 10). `orders test --code <CODE>` proves one: its `discounts` lists what was taken off, automatic promotions with `automatic: true`, and a code that applied nothing is a `discount_code_invalid` warning in `messages`.
 
+### Links
+Links are live settings in Commerce Layer too, never store files: shareable URLs that open a hosted microstore for one sku, a set of skus or a category, or the hosted checkout for an order. A spec, in YAML or JSON on stdin or with `-f <file>`:
+
+```yaml
+id: single-origins       # the handle: lowercase letters, digits, dashes; unique
+name: Single origins
+for: { category: Coffee > Single origin }   # or { sku: ETH }, { skus: [ETH, COL] }, { order: 1001 | cart_... }
+```
+
+Optional: `market` (a code or a list; without it, every market; an order link takes the order's market and none), `starts` (default now) and `ends` (default a month after `starts`; a day, or a UTC time; a bare `ends` day runs to 23:59:59Z), `params` (names to plain values, added to the URL). A category becomes the skus of its products in store.yml when the command runs; a link sells at most 100 skus. An order link opens the checkout of a draft or pending order: its number, or the id of a UCP cart or checkout (`cart_...`, `chk_...`), read back as the order's number. A placed order opens its thank-you page, so `create` refuses it. Commerce Layer opens a link in one market, so a link has a URL per market: `urls`, by market code, and `url`, the first market's. `create`, `list` and `show` print `url` and `urls` first, then the spec, `status` (`pending`, `active`, `expired`, `disabled`: the first market's; enable and disable act on every market) and `created_at`. A disabled or pending link opens Commerce Layer's not-found page; checkout takes the sandbox's manual payment (wire transfer) unless a gateway is added. A link cannot change: delete it and create it again (what `show` prints can be sent back to `create`). Links made outside c11r are listed with `managed: false` and Commerce Layer's id, and may sell `for: { sku_list: <name> }`; `enable`, `disable` and `delete` work on them.
+
 ### The products folder
 Beyond a handful of products, put the catalog in `.commercelayer/products/` and leave `products` out of `store.yml`. Every file in the folder is merged into the catalog by sku, in file-name order:
 - `<name>.yml`: a list of products in the shape above (one file per collection, or one per product, as you like).
@@ -117,7 +131,7 @@ One rule for images: `img/<file>` anywhere in `store.yml` (product `image_url`,
 
 A custom storefront replaces the theme: `storefront.path` in `store.yml` names its folder, `storefront init` writes a drop-in.js scaffold, `storefront publish` uploads it, `storefront check` checks it. Its pages link product images at `/img/`; its own files (fonts, icons, styles) go in `assets/`, not `img/`.
 
-Error codes: `invalid_theme`, `invalid_promotion`, `promotion_exists`, `promotion_not_managed`, `flex_unavailable`, `promotions_unsupported`, `missing_images`, `asset_too_large`, `no_store`, `invalid_yaml`, `invalid_store`, `invalid_market`, `invalid_product`, `missing_price`, `deletes_need_approval`, `apply_failed`, `apply_pending`, `apply_in_progress`, `storefront_exists`, `no_storefront`, `storefront_unreachable`, `not_applied`, `not_found`, `missing_argument`, `invalid_argument`, `unknown_command`, `unauthorized`, `expired`, `api_unreachable`, `api_error`, `no_product`, `checkout_not_ready`, `ucp_error`, `ucp_profile_unreachable`, `ucp_profile_malformed`, `ucp_version_unsupported`, `ucp_no_rest_service`, `internal`.
+Error codes: `invalid_theme`, `invalid_promotion`, `promotion_exists`, `promotion_not_managed`, `flex_unavailable`, `promotions_unsupported`, `invalid_link`, `link_exists`, `link_not_managed` (reserved), `links_unsupported`, `missing_images`, `asset_too_large`, `no_store`, `invalid_yaml`, `invalid_store`, `invalid_market`, `invalid_product`, `missing_price`, `deletes_need_approval`, `apply_failed`, `apply_pending`, `apply_in_progress`, `storefront_exists`, `no_storefront`, `storefront_unreachable`, `not_applied`, `not_found`, `missing_argument`, `invalid_argument`, `unknown_command`, `unauthorized`, `expired`, `api_unreachable`, `api_error`, `no_product`, `checkout_not_ready`, `ucp_error`, `ucp_profile_unreachable`, `ucp_profile_malformed`, `ucp_version_unsupported`, `ucp_no_rest_service`, `internal`.
 ## The store speaks UCP
 Each store is a UCP business at `https://<org>.sandbox.commercelayer.store` (live stores: `<slug>.commercelayer.store`), implementing release **2026-08-25** over REST:
 | What | Where |

package/dist/api/client.js

@@ -27,37 +27,44 @@ export function createApi(auth) {
             fail(err.code, err.message, err.hint);
         fail('api_error', `The API answered ${res.status}.`, 'Try again. If it keeps happening, tell the human, with the output of `c11r status`.');
     };
-    // Promotions: on an API older than them, the collection route is an unknown route (404 not_found).
-    const promotions = () => `${org()}/promotions`;
-    const one = (id) => `${promotions()}/${encodeURIComponent(id)}`;
-    const unsupported = async (call) => {
+    // Promotions and links: on an API older than them, the collection route is an unknown route (404 not_found).
+    const collection = (kind) => `${org()}/${kind}`;
+    const one = (kind, id) => `${collection(kind)}/${encodeURIComponent(id)}`;
+    const unsupported = async (kind, call) => {
         try {
             return await call;
         }
         catch (e) {
             if (e instanceof CliError && (e.code === 'not_found' || (e.code === 'api_error' && /\b404\b/.test(e.message))))
-                fail('promotions_unsupported', 'This API does not manage promotions yet.', 'Try again later; tell the human if it persists.');
+                fail(`${kind}_unsupported`, `This API does not manage ${kind} yet.`, 'Try again later; tell the human if it persists.');
             throw e;
         }
     };
-    const found = async (id, call) => {
+    const found = async (kind, id, call) => {
         try {
             return await call;
         }
         catch (e) {
             if (e instanceof CliError && e.code === 'not_found')
-                fail('not_found', `There is no promotion ${id}.`, 'Run `c11r promotions list` for the ids, or `c11r promotions create` to make it.');
+                fail('not_found', `There is no ${kind.slice(0, -1)} ${id}.`, `Run \`c11r ${kind} list\` for the ids, or \`c11r ${kind} create\` to make it.`);
             throw e;
         }
     };
     return {
-        listPromotions: () => unsupported(request('GET', promotions())),
-        createPromotion: (spec) => unsupported(request('POST', promotions(), spec)),
-        getPromotion: (id) => found(id, request('GET', one(id))),
-        updatePromotion: (id, spec) => found(id, request('PUT', one(id), spec)),
-        setPromotionEnabled: (id, enabled) => found(id, request('POST', `${one(id)}/${enabled ? 'enable' : 'disable'}`)),
+        listPromotions: () => unsupported('promotions', request('GET', collection('promotions'))),
+        createPromotion: (spec) => unsupported('promotions', request('POST', collection('promotions'), spec)),
+        getPromotion: (id) => found('promotions', id, request('GET', one('promotions', id))),
+        updatePromotion: (id, spec) => found('promotions', id, request('PUT', one('promotions', id), spec)),
+        setPromotionEnabled: (id, enabled) => found('promotions', id, request('POST', `${one('promotions', id)}/${enabled ? 'enable' : 'disable'}`)),
         deletePromotion: async (id) => {
-            await found(id, request('DELETE', one(id)));
+            await found('promotions', id, request('DELETE', one('promotions', id)));
+        },
+        listLinks: () => unsupported('links', request('GET', collection('links'))),
+        createLink: (spec) => unsupported('links', request('POST', collection('links'), spec)),
+        getLink: (id) => found('links', id, request('GET', one('links', id))),
+        setLinkEnabled: (id, enabled) => found('links', id, request('POST', `${one('links', id)}/${enabled ? 'enable' : 'disable'}`)),
+        deleteLink: async (id) => {
+            await found('links', id, request('DELETE', one('links', id)));
         },
         createSandbox: (name) => request('POST', '/sandboxes', { name }),
         getStore: () => request('GET', org()),

package/dist/api/stub/management.js

@@ -59,6 +59,52 @@ function unknownSkus(r, spec) {
     }
     return undefined;
 }
+/** As the API lists it: the spec plus the first market's url, every url, and status. */
+function listedLink(l) {
+    const { enabled, urls, ...link } = l;
+    const now = Date.now();
+    const status = !enabled ? 'disabled' : Date.parse(l.ends) <= now ? 'expired' : Date.parse(l.starts) > now ? 'pending' : 'active';
+    return { ...link, url: Object.values(urls)[0], urls, status, managed: true };
+}
+/** The API checks a link against the store: applied skus and markets, draft orders. Answers the markets it gets a link in. */
+function linkMarkets(r, spec) {
+    const known = r.applied?.products ?? {};
+    const f = spec.for;
+    const list = 'sku' in f ? [['for.sku', f.sku]] : 'skus' in f ? f.skus.map((s, i) => [`for.skus[${i}]`, s]) : [];
+    for (const [path, sku] of list)
+        if (!(sku in known))
+            return error(422, 'invalid_link', `${path}: unknown sku ${sku}.`, 'Use skus of applied products: run `c11r apply` first if you just added them.');
+    if ('order' in f) {
+        if (spec.markets)
+            return error(422, 'invalid_link', "markets: an order link uses the order's market.", 'Leave markets out.');
+        // A UCP cart or checkout id names the draft order behind it, read back as its number (the stub's: the id's suffix).
+        const cart = /^cart_/.test(f.order) ? r.ucp.carts[f.order] : undefined;
+        // A cart is the same order as the checkout made from it.
+        const ucp = cart ? (Object.values(r.ucp.checkouts).find((c) => c._cart_id === f.order && c.status === 'completed') ?? cart) : /^chk_/.test(f.order) ? r.ucp.checkouts[f.order] : undefined;
+        if (ucp) {
+            const placed = ucp.order?.label;
+            if (ucp.status === 'completed' && placed)
+                return error(422, 'invalid_link', `for.order: order ${placed.replace(/^#/, '')} is placed: a link opens the checkout of a draft or pending order.`, 'Link a cart or checkout that is not completed.');
+            if (ucp.status === 'canceled')
+                return error(422, 'invalid_link', `for.order: no order ${f.order}.`, 'The checkout is canceled: link another cart or checkout.');
+            const market = Object.values(r.applied?.markets ?? {}).find((m) => m.currency === ucp.currency)?.code ?? Object.keys(r.applied?.markets ?? {})[0];
+            spec.for = { order: f.order.replace(/^(cart|chk)_/, '') };
+            return [market];
+        }
+        const draft = r.draft_orders?.[f.order];
+        if (draft)
+            return [draft.market];
+        if (publicOrders(r).some((o) => o.label.replace(/^#/, '') === f.order))
+            return error(422, 'invalid_link', `for.order: order ${f.order} is placed: a link opens the checkout of a draft or pending order.`, 'A placed order opens its thank-you page, not a checkout: link a draft or pending order.');
+        return error(422, 'invalid_link', `for.order: no order ${f.order}.`, 'Use the number of a draft or pending order in the store.');
+    }
+    const applied = Object.keys(r.applied?.markets ?? {});
+    const markets = spec.markets ?? applied;
+    const i = markets.findIndex((m) => !applied.includes(m));
+    if (i >= 0)
+        return error(422, 'invalid_link', `markets[${i}]: unknown market ${markets[i]}.`, 'Use markets that are applied: run `c11r apply` first if you just added it.');
+    return markets;
+}
 export function handleManagement(req) {
     const db = readDb();
     const path = req.url.pathname;
@@ -211,6 +257,48 @@ export function handleManagement(req) {
             }
         }
     }
+    // Links: live, synchronous, keyed by id; one Commerce Layer link per market.
+    if (rest === '/links' || rest.startsWith('/links/')) {
+        const store = (record.links ??= {});
+        const [, , rawId, verb] = rest.split('/');
+        const id = rawId === undefined ? undefined : decodeURIComponent(rawId);
+        const save = () => writeDb(db);
+        if (id === undefined) {
+            if (req.method === 'GET')
+                return json(200, { links: Object.keys(store).sort().map((k) => listedLink(store[k])) });
+            if (req.method === 'POST') {
+                const spec = readJson(req);
+                if (store[spec.id])
+                    return error(409, 'link_exists', `There is already a link ${spec.id}.`, 'Pick another id, or delete the link and create it again.');
+                const markets = linkMarkets(record, spec);
+                if (!Array.isArray(markets))
+                    return markets;
+                // One Commerce Layer link per market: a scope with several markets does not open.
+                const urls = Object.fromEntries(markets.map((m) => [m, `https://c11.page/${crypto.randomBytes(6).toString('base64url')}`]));
+                // An order link reads back with the order's market.
+                store[spec.id] = { ...spec, markets, urls, enabled: true, created_at: new Date().toISOString() };
+                save();
+                return json(201, listedLink(store[spec.id]));
+            }
+        }
+        else {
+            const l = store[id];
+            if (!l)
+                return error(404, 'not_found', `There is no link ${id}.`, 'Run `c11r links list`.');
+            if (verb === undefined && req.method === 'GET')
+                return json(200, listedLink(l));
+            if (verb === undefined && req.method === 'DELETE') {
+                delete store[id];
+                save();
+                return { status: 204, headers: {}, body: '' };
+            }
+            if ((verb === 'enable' || verb === 'disable') && req.method === 'POST') {
+                l.enabled = verb === 'enable';
+                save();
+                return json(200, listedLink(l));
+            }
+        }
+    }
     if (req.method === 'PUT' && rest === '/assets') {
         const { files } = readJson(req);
         let total = 0;

package/dist/api/stub/shopping.js

@@ -86,8 +86,9 @@ function returnPolicy(ctx) {
     ];
 }
 // ---------- catalog
-/** A path in the storefront (img/eth.jpg) is served from the store host: shopping agents always get a full URL. */
-const imageUrl = (ctx, url) => new URL(url, `${ctx.origin}/`).href;
+/** A path in the storefront (img/eth.jpg) is served from the store host: shopping agents always get a full URL,
+ * and for a product without an image, its tile. */
+const imageUrl = (ctx, p) => new URL(p.image_url ?? `tiles/${encodeURIComponent(p.sku)}.svg`, `${ctx.origin}/`).href;
 function variant(ctx, p, market) {
     const price = { amount: toMinor(p.prices[market.currency], market.currency), currency: market.currency };
     const v = {
@@ -100,8 +101,7 @@ function variant(ctx, p, market) {
         // Inventory lives in Commerce Layer; the sandbox catalog has no stock, so everything is in stock.
         availability: { available: true, status: 'in_stock' },
     };
-    if (p.image_url)
-        v.media = [{ type: 'image', url: imageUrl(ctx, p.image_url) }];
+    v.media = [{ type: 'image', url: imageUrl(ctx, p) }];
     if (ctx.shared.has('dev.ucp.shopping.fulfillment')) {
         const o = shippingOption(market);
         v.fulfillment = { methods: [{ type: 'shipping', description: { plain: `Ships to ${market.countries.join(', ')}` }, availability: v.availability, options: [{ id: o.id, title: o.title, description: o.description }] }] };
@@ -202,8 +202,7 @@ function buildLines(ctx, market, requested, existing = []) {
         const qty = quantity;
         const prev = existing.find((e) => e.id === l.id) ?? existing.find((e) => e.item.id === p.sku);
         const item = { id: p.sku, title: p.name, price };
-        if (p.image_url)
-            item.image_url = imageUrl(ctx, p.image_url);
+        item.image_url = imageUrl(ctx, p);
         lines.push({ id: prev?.id ?? `li_${++n}`, item, quantity: qty, totals: [{ type: 'subtotal', amount: price * qty }, { type: 'total', amount: price * qty }] });
     });
     return { lines, messages };

package/dist/api/stub/theme.js

@@ -2,6 +2,8 @@
 // custom storefront: the same settings in the same places (accent, logo or wordmark,
 // hero image or band, tagline), the products by top-level category, a page per product
 // at /products/<sku>. Prices come from what is applied; "Buy" opens the cart permalink.
+// A product without an image shows its tile, and an unset hero the generated one, both
+// drawn at /tiles/ (renderTile) as the store host does.
 const esc = (t) => String(t ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
 /** Black or white, whichever reads better on the accent. */
 function onAccent(hex) {
@@ -21,7 +23,8 @@ export function renderTheme(r, path, search) {
     const tagline = theme.tagline ?? `Ships to ${markets.flatMap((m) => m.countries).join(', ')}`;
     const logo = theme.logo ? `<img class="logo" src="/${esc(theme.logo.replace(/^\//, ''))}" alt="${esc(name)}">` : `<span class="wordmark">${esc(name)}</span>`;
     const img = (url) => (/^https?:/.test(url) ? url : `/${url}`);
-    const card = (p) => `<article class="product"><a href="/products/${encodeURIComponent(p.sku)}${keep}">${p.image_url ? `<img src="${esc(img(p.image_url))}" alt="${esc(p.name)}">` : '<div class="placeholder"></div>'}<h3>${esc(p.name)}</h3></a><p class="price">${esc(price(p))}</p><a class="buy" href="/buy/${encodeURIComponent(p.sku)}:1">Buy</a></article>`;
+    const image = (p) => p.image_url ? `<img src="${esc(img(p.image_url))}" alt="${esc(p.name)}">` : `<span class="placeholder"><img src="/tiles/${esc(encodeURIComponent(p.sku))}.svg" alt="${esc(p.name)}" loading="lazy"></span>`;
+    const card = (p) => `<article class="product"><a href="/products/${encodeURIComponent(p.sku)}${keep}">${image(p)}<h3>${esc(p.name)}</h3></a><p class="price">${esc(price(p))}</p><a class="buy" href="/buy/${encodeURIComponent(p.sku)}:1">Buy</a></article>`;
     let title = name;
     let body;
     const m = path.match(/^\/products\/([^/]+)$/);
@@ -31,7 +34,7 @@ export function renderTheme(r, path, search) {
             const top = p.category?.split(' > ')[0] ?? 'Other';
             groups.set(top, [...(groups.get(top) ?? []), p]);
         }
-        const hero = theme.hero ? `<section class="hero" style="background-image:url('${esc(img(theme.hero))}')">` : '<section class="hero band">';
+        const hero = `<section class="hero" style="background-image:url('${esc(theme.hero ? img(theme.hero) : '/tiles/hero.svg')}')">`;
         body = `${hero}<h1>${esc(name)}</h1><p class="tagline">${esc(tagline)}</p></section><main>${[...groups].map(([k, ps]) => `<section><h2>${esc(k)}</h2><div class="grid">${ps.map(card).join('')}</div></section>`).join('')}</main>`;
     }
     else if (m) {
@@ -39,7 +42,7 @@ export function renderTheme(r, path, search) {
         if (!p)
             return null;
         title = `${p.name} · ${name}`;
-        body = `<main class="product-page">${p.image_url ? `<img src="${esc(img(p.image_url))}" alt="${esc(p.name)}">` : '<div class="placeholder"></div>'}<div>${p.category ? `<p class="category">${esc(p.category)}</p>` : ''}<h1>${esc(p.name)}</h1>${p.description ? `<p>${esc(p.description)}</p>` : ''}<p class="price">${esc(price(p))}</p><a class="buy" href="/buy/${encodeURIComponent(p.sku)}:1">Buy</a></div></main>`;
+        body = `<main class="product-page">${image(p)}<div>${p.category ? `<p class="category">${esc(p.category)}</p>` : ''}<h1>${esc(p.name)}</h1>${p.description ? `<p>${esc(p.description)}</p>` : ''}<p class="price">${esc(price(p))}</p><a class="buy" href="/buy/${encodeURIComponent(p.sku)}:1">Buy</a></div></main>`;
     }
     else
         return null;
@@ -61,3 +64,29 @@ ${body}
 `;
     return { status: 200, headers: { 'content-type': 'text/html; charset=utf-8' }, body: html };
 }
+const xml = (t) => String(t ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' })[c]);
+/** /tiles/<sku>.svg and /tiles/hero.svg: a plain stand-in for the store host's generated tiles. */
+export function renderTile(r, path) {
+    const m = path.match(/^\/tiles\/([^/]+)\.svg$/);
+    if (!m)
+        return null;
+    const color = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(r.theme?.color ?? '') ? r.theme.color : '#2f5d50';
+    const headers = { 'content-type': 'image/svg+xml', 'cache-control': 'public, max-age=300', 'x-content-type-options': 'nosniff' };
+    let svg;
+    if (m[1] === 'hero')
+        svg = `<svg xmlns="http://www.w3.org/2000/svg" width="2400" height="900" viewBox="0 0 2400 900"><rect width="2400" height="900" fill="${color}"/><circle cx="1900" cy="450" r="360" fill="#ffffff" fill-opacity="0.12"/></svg>`;
+    else {
+        let sku;
+        try {
+            sku = decodeURIComponent(m[1]);
+        }
+        catch {
+            return null;
+        }
+        const p = r.applied?.products[sku];
+        if (!p)
+            return null;
+        svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200"><rect width="1200" height="1200" fill="${color}" fill-opacity="0.08"/><text x="600" y="600" text-anchor="middle" font-family="system-ui, sans-serif" font-size="72" fill="${color}">${xml(p.name.slice(0, 60))}</text></svg>`;
+    }
+    return { status: 200, headers, body: svg };
+}

package/dist/api/stub/ucp.js

@@ -8,7 +8,7 @@ import { contentDigest, signHeaders } from '../../ucp/signing.js';
 import { strip } from './db.js';
 import { json } from './http.js';
 import * as shop from './shopping.js';
-import { renderTheme } from './theme.js';
+import { renderTheme, renderTile } from './theme.js';
 const SCOPES = ['dev.ucp.shopping.order:read', 'dev.ucp.shopping.order:manage'];
 const OUR_CAPABILITIES = [...SHOPPING_CAPABILITIES, 'dev.ucp.common.ask', ...Object.keys(EXTENSIONS), 'dev.ucp.common.identity_linking', 'dev.ucp.shopping.permalink'];
 // ---------- profile
@@ -305,6 +305,9 @@ function handlePermalink(req, r, origin, path) {
 const MIME = { html: 'text/html; charset=utf-8', css: 'text/css', js: 'text/javascript', mjs: 'text/javascript', json: 'application/json', svg: 'image/svg+xml', png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', webp: 'image/webp', gif: 'image/gif', avif: 'image/avif', ico: 'image/x-icon', txt: 'text/plain' };
 function serveStorefront(r, path, search) {
     const files = r.ucp.files;
+    // /tiles/ is the store host's own, in front of a custom storefront too: unknown tiles are a 404.
+    if (path.startsWith('/tiles/'))
+        return renderTile(r, path) ?? html(404, 'Not found', `<p>No ${path} on this store.</p>`);
     // A custom storefront (an uploaded index.html) serves every path; otherwise the theme renders its routes.
     if (files['index.html'] === undefined) {
         const page = renderTheme(r, path, search);

package/dist/bin.js

@@ -71,6 +71,18 @@ async function run() {
             if (sub === 'delete')
                 return cmd.promotionsDelete(args[2]);
             throw new CliError('unknown_command', `There is no command "promotions ${sub ?? ''}".`, 'Use `c11r promotions list`, `show <id>`, `create`, `update <id>`, `enable <id>`, `disable <id>` or `delete <id>`.');
+        case 'links':
+            if (sub === 'list')
+                return cmd.linksList();
+            if (sub === 'show')
+                return cmd.linksShow(args[2]);
+            if (sub === 'create')
+                return cmd.linksCreate(values);
+            if (sub === 'enable' || sub === 'disable')
+                return cmd.linksEnable(args[2], sub === 'enable');
+            if (sub === 'delete')
+                return cmd.linksDelete(args[2]);
+            throw new CliError('unknown_command', `There is no command "links ${sub ?? ''}".`, 'Use `c11r links list`, `show <id>`, `create`, `enable <id>`, `disable <id>` or `delete <id>`.');
         case 'orders':
             if (sub === 'test')
                 return cmd.ordersTest(flags, values);

package/dist/commands.js

@@ -10,6 +10,7 @@ import { diff, hashStore, loadStore, storefrontPath, template, toApplied } from
 import { storefrontFiles } from './storefront.js';
 import { imageNotes, planAssets, uploadAssets } from './assets.js';
 import { pull } from './catalog.js';
+import { checkLink } from './links.js';
 import { ACTIVE_LIMIT, activeWithoutCoupon, checkPromotion } from './promotions.js';
 import YAML from 'yaml';
 import { storefrontCheck } from './check.js';
@@ -34,6 +35,12 @@ export const HELP = {
     'promotions enable': 'Turn a promotion on: c11r promotions enable <id>.',
     'promotions disable': 'Turn a promotion off without deleting it: c11r promotions disable <id>.',
     'promotions delete': 'Delete a promotion from Commerce Layer: c11r promotions delete <id>. Ask the human first; to pause one, disable it.',
+    'links list': 'The store\'s links, live in Commerce Layer (not in store files): shareable URLs that open a hosted microstore for one sku, a set of skus or a category, or the hosted checkout for an order. For each: id, name, url, status (pending, active, expired, disabled), for (sku | skus | category with its skus | order), markets, starts, ends, params; managed: false marks one made in the dashboard (its id is Commerce Layer\'s).',
+    'links show': 'One link by id, as list shows it: c11r links show <id>.',
+    'links create': "Create a link from a spec in YAML or JSON, on stdin (c11r links create <<'EOF' ... EOF) or with -f <file>: { id, name, for: { sku } | { skus: [...] } | { category: \"A > B\" } | { order: <number> | cart_<id> | chk_<id> }, market (a code or a list; default every market; none for an order), starts (default now), ends (default a month after starts), params }. id is the handle, unique. A category becomes the skus of its products in store.yml now (at most 100 skus). An order link opens the checkout of a draft or pending order: its number, or the id of a UCP cart or checkout. One Commerce Layer link per market: urls has each, url the first market's. A link cannot be changed: delete it and create it again. Errors: invalid_link (the message starts with the path in the spec), link_exists.",
+    'links enable': 'Turn a link on: c11r links enable <id>.',
+    'links disable': 'Turn a link off without deleting it: its url stops opening. c11r links disable <id>.',
+    'links delete': 'Delete a link from Commerce Layer: c11r links delete <id>. Ask the human first; to pause one, disable it.',
     'orders test': 'Buy from the store over UCP as a shopping agent would, paying with the sandbox handler: discover, search, checkout, address, pay, read the order. Options: --sku <id> --quantity <n> --country <CC> --code <discount> --via-cart --decline. discounts lists what promotions and codes took off; a code that applied nothing is a discount_code_invalid warning in messages.',
     'orders list': 'List the orders placed in the store, newest first, as UCP order entities.',
     'orders show': 'Show one order: c11r orders show <id or number>.',
@@ -348,14 +355,18 @@ export async function claim() {
     };
 }
 // ---------- promotions: live settings in Commerce Layer, not store files
-/** The fields list, show and the writes print, in a stable order. */
-const READ_ONLY = ['status', 'uses', 'managed'];
-/** The spec from -f <file> or stdin, YAML or JSON, validated against store.yml's markets and products. */
-async function readSpec(values) {
-    let text = "";
+/** What list and show print beyond the spec: dropped when it is sent back. */
+const READ_ONLY = ['status', 'uses', 'managed', 'url', 'urls', 'created_at'];
+/**
+ * A spec from -f <file> or stdin, YAML or JSON, for promotions and links. What show prints
+ * can be edited and sent back: the read-only fields are dropped.
+ */
+async function readInput(values, what) {
+    const usage = `Give the ${what} as YAML or JSON on stdin (c11r ${what}s create <<'EOF' ... EOF) or with -f <file>.`;
+    let text = '';
     if (values.file) {
         if (!fs.existsSync(values.file))
-            fail('missing_argument', `There is no file ${values.file}.`, 'Give the promotion as YAML or JSON with -f <file>, or on stdin.');
+            fail('missing_argument', `There is no file ${values.file}.`, `Give the ${what} as YAML or JSON with -f <file>, or on stdin.`);
         text = fs.readFileSync(values.file, 'utf8');
     }
     else if (!process.stdin.isTTY) {
@@ -366,20 +377,24 @@ async function readSpec(values) {
         text = Buffer.concat(chunks).toString('utf8');
     }
     else
-        fail('missing_argument', 'No promotion given.', "Give the promotion as YAML or JSON on stdin (c11r promotions create <<'EOF' ... EOF) or with -f <file>.");
+        fail('missing_argument', `No ${what} given.`, usage);
     if (!text.trim())
-        fail('missing_argument', 'No promotion given: the input is empty.', "Give the promotion as YAML or JSON on stdin (c11r promotions create <<'EOF' ... EOF) or with -f <file>.");
+        fail('missing_argument', `No ${what} given: the input is empty.`, usage);
     let raw;
     try {
         raw = YAML.parse(text);
     }
     catch (e) {
-        fail('invalid_promotion', `promotion: not valid YAML or JSON: ${e.message.split('\n')[0]}`, 'Fix the syntax and run the command again.');
+        fail(`invalid_${what}`, `${what}: not valid YAML or JSON: ${e.message.split('\n')[0]}`, 'Fix the syntax and run the command again.');
     }
-    // What show prints can be edited and sent back: the read-only fields are dropped.
     if (raw && typeof raw === 'object' && !Array.isArray(raw))
         for (const k of READ_ONLY)
             delete raw[k];
+    return raw;
+}
+/** A promotion spec, validated against store.yml's markets and products. */
+async function readSpec(values) {
+    const raw = await readInput(values, 'promotion');
     const store = loadStore();
     return checkPromotion(raw, store.markets, store.products);
 }
@@ -433,3 +448,43 @@ export async function promotionsDelete(id) {
     await createApi(requireCredentials()).deletePromotion(id);
     return { status: 'deleted', id };
 }
+// ---------- links: live settings in Commerce Layer, not store files
+/** A link as list, show and the writes print it: url and urls first. */
+const urlFirst = ({ url, urls, ...l }) => ({ url, urls, ...l });
+const linkNext = (l) => {
+    const what = 'order' in l.for ? 'the hosted checkout for the order' : 'a microstore for what it sells';
+    const which = Object.keys(l.urls ?? {}).length > 1 ? `the url of each market in urls (url is ${Object.keys(l.urls)[0]}'s)` : 'the url';
+    if (l.status === 'pending')
+        return `Give the human ${which}: it opens ${what} from ${l.starts}; until then it shows a not-found page.`;
+    if (l.status === 'active')
+        return `Give the human ${which}: it opens ${what} until ${l.ends}. Payment is manual (wire transfer) unless a gateway is added.`;
+    return undefined;
+};
+export async function linksList() {
+    const { links } = await createApi(requireCredentials()).listLinks();
+    return { count: links.length, links: links.map(urlFirst) };
+}
+export async function linksShow(id) {
+    if (!id)
+        fail('missing_argument', 'Which link?', 'Use `c11r links show <id>`; `c11r links list` has the ids.');
+    return urlFirst(await createApi(requireCredentials()).getLink(id));
+}
+export async function linksCreate(values) {
+    const api = createApi(requireCredentials());
+    const raw = await readInput(values, 'link');
+    const store = loadStore();
+    const created = await api.createLink(checkLink(raw, store.markets, store.products));
+    return { status: 'created', link: urlFirst(created), next: linkNext(created) };
+}
+export async function linksEnable(id, enabled) {
+    if (!id)
+        fail('missing_argument', 'Which link?', `Use \`c11r links ${enabled ? 'enable' : 'disable'} <id>\`.`);
+    const link = await createApi(requireCredentials()).setLinkEnabled(id, enabled);
+    return { status: enabled ? 'enabled' : 'disabled', link: urlFirst(link), next: enabled ? linkNext(link) : undefined };
+}
+export async function linksDelete(id) {
+    if (!id)
+        fail('missing_argument', 'Which link?', 'Use `c11r links delete <id>`, after asking the human.');
+    await createApi(requireCredentials()).deleteLink(id);
+    return { status: 'deleted', id };
+}

package/dist/links.js

@@ -0,0 +1,118 @@
+// Links: shareable URLs that open a hosted microstore for one SKU, a set of SKUs or a
+// category, or the hosted checkout for an order. Live configuration in Commerce Layer, made
+// with c11r links create; never in store.yml. The CLI validates the spec against store.yml
+// (skus, categories, markets) and sends one normalized link; the API makes the CL link.
+import { isoDate } from './promotions.js';
+import { fail } from './output.js';
+const KEYS = ['id', 'name', 'for', 'market', 'markets', 'starts', 'ends', 'params'];
+const FOR = ['sku', 'skus', 'category', 'order'];
+/** The SKUs one link can sell: the API's limit. */
+const MAX_SKUS = 100;
+const SHAPE_HINT = 'See the links skill for the shape: https://commercelayer.ai/skills/links.md';
+const isObj = (v) => Boolean(v) && typeof v === 'object' && !Array.isArray(v);
+const seconds = (d) => d.toISOString().replace(/\.\d{3}Z$/, 'Z');
+/** One calendar month after a date-time, in UTC. */
+function monthAfter(iso) {
+    const d = new Date(iso);
+    d.setUTCMonth(d.getUTCMonth() + 1);
+    return seconds(d);
+}
+/**
+ * Validate one link spec (YAML or JSON, as given to links create) and normalize it to the
+ * wire shape, or fail invalid_link naming the path inside the spec. A category becomes its
+ * products' skus as they are now, from store.yml.
+ */
+export function checkLink(raw, markets, products, now = new Date()) {
+    const skus = new Set(products.map((p) => p.sku));
+    const bad = (msg, hint, path = 'link') => fail('invalid_link', `${path}: ${msg}`, hint);
+    if (!isObj(raw))
+        bad('is not a map.', `A link is a map with id, name and for. ${SHAPE_HINT}`);
+    const l = raw;
+    if (typeof l.id !== 'string' || !/^[a-z0-9][a-z0-9-]{0,62}$/.test(l.id))
+        bad(`id is ${l.id === undefined ? 'missing' : `"${String(l.id)}"`}.`, 'Give the link an id of lowercase letters, digits and dashes, such as summer-bundle: the handle for show, enable, disable and delete.');
+    const id = l.id;
+    for (const k of Object.keys(l))
+        if (!KEYS.includes(k))
+            bad(`unknown key ${k}.`, `A link's keys are ${KEYS.join(', ')}.`);
+    const link = { id, name: l.name === undefined ? id : String(l.name), for: { sku: '' }, starts: '', ends: '' };
+    if (!link.name.trim() || link.name.length > 255)
+        bad('name is empty or longer than 255 characters.', 'Write a short name the human will recognize in the dashboard.');
+    // for: exactly one of sku, skus, category, order. show prints a category with its skus: those are read again.
+    const f = l.for;
+    if (!isObj(f))
+        bad(f === undefined ? 'has no for.' : 'for is not a map.', `Say what the link sells: for: { sku: <sku> }, { skus: [...] }, { category: "A > B" } or { order: <number> }. ${SHAPE_HINT}`);
+    const given = Object.keys(f).filter((k) => !('category' in f && k === 'skus'));
+    if (given.includes('sku_list'))
+        bad('sku_list is a list made in the dashboard.', 'Name the skus (for: { skus: [...] }) or a category instead.', 'for');
+    for (const k of given)
+        if (!FOR.includes(k))
+            bad(`unknown key ${k}.`, `for takes one of ${FOR.join(', ')}.`, 'for');
+    if (given.length !== 1)
+        bad(`has ${given.length ? given.join(' and ') : 'nothing'}.`, 'Give exactly one of sku, skus, category or order: a link sells one thing.', 'for');
+    const kind = given[0];
+    const v = f[kind];
+    if (kind === 'sku') {
+        if (typeof v !== 'string' || !skus.has(v))
+            bad(`${String(v)} is not a product.`, "Use the SKU of one of the store's products.", 'for.sku');
+        link.for = { sku: v };
+    }
+    else if (kind === 'skus') {
+        if (!Array.isArray(v) || !v.length)
+            bad('is not a list of SKUs.', 'List one or more SKUs: skus: [ETH, COL].', 'for.skus');
+        if (v.length > MAX_SKUS)
+            bad(`has ${v.length} SKUs.`, `A link sells at most ${MAX_SKUS} SKUs: make several links.`, 'for.skus');
+        v.forEach((s, i) => {
+            if (typeof s !== 'string' || !skus.has(s))
+                bad(`${String(s)} is not a product.`, "Use SKUs of the store's products.", `for.skus[${i}]`);
+        });
+        link.for = { skus: [...new Set(v)] };
+    }
+    else if (kind === 'category') {
+        const name = String(v).split('>').map((s) => s.trim()).filter(Boolean).join(' > ');
+        const found = products.filter((x) => x.category === name || x.category?.startsWith(`${name} > `)).map((x) => x.sku);
+        if (!name || !found.length)
+            bad(`no product is in category "${String(v)}".`, `Use a category of the store's products, written as in the products: ${[...new Set(products.map((x) => x.category).filter(Boolean))].join(', ') || 'none has a category yet'}.`, 'for.category');
+        if (found.length > MAX_SKUS)
+            bad(`"${name}" has ${found.length} products.`, `A link sells at most ${MAX_SKUS} SKUs: use a narrower category, or several links.`, 'for.category');
+        link.for = { category: name, skus: found.sort() };
+    }
+    else {
+        if (!(typeof v === 'string' && v.trim()) && !(Number.isInteger(v) && v > 0))
+            bad(`${String(v)} is not an order number.`, 'Use the number of a draft or pending order, or the id of a UCP cart or checkout (cart_..., chk_...): the order behind it.', 'for.order');
+        link.for = { order: String(v).trim().replace(/^#/, '') };
+    }
+    // Markets: a code or a list, under market or markets; none means every market. An order has its own.
+    if (l.market !== undefined && l.markets !== undefined)
+        bad('has market and markets.', 'Use one of them.');
+    const m = l.market ?? l.markets;
+    const path = l.market !== undefined ? 'market' : 'markets';
+    if (kind === 'order') {
+        if (m !== undefined)
+            bad(`${path}: an order link has the order's market.`, 'Remove market: the checkout opens in the market the order was placed in.');
+    }
+    else if (m === undefined)
+        link.markets = markets.map((x) => x.code);
+    else {
+        const codes = Array.isArray(m) ? m : [m];
+        if (!codes.length)
+            bad('is empty.', 'List one or more market codes, or leave it out for every market.', path);
+        codes.forEach((c, i) => {
+            if (!markets.some((x) => x.code === c))
+                bad(`${String(c)} is not in markets.`, `Use the code of one of the store's markets: ${markets.map((x) => x.code).join(', ')}.`, Array.isArray(m) ? `${path}[${i}]` : path);
+        });
+        link.markets = [...new Set(codes)];
+    }
+    link.starts = l.starts === undefined ? seconds(now) : isoDate(l.starts, false, (msg, h) => bad(`starts ${msg}`, h));
+    link.ends = l.ends === undefined ? monthAfter(link.starts) : isoDate(l.ends, true, (msg, h) => bad(`ends ${msg}`, h));
+    if (Date.parse(link.ends) <= Date.parse(link.starts))
+        bad('ends is not after starts.', 'Make the end date later than the start date.');
+    if (l.params !== undefined) {
+        if (!isObj(l.params))
+            bad('params is not a map.', 'params is a map of names to text, numbers or true/false, added to the link URL.');
+        for (const [k, p] of Object.entries(l.params))
+            if (!['string', 'number', 'boolean'].includes(typeof p))
+                bad(`${k} is not text, a number or true/false.`, 'params values are plain values, added to the link URL.', `params.${k}`);
+        link.params = l.params;
+    }
+    return link;
+}

package/dist/promotions.js

@@ -17,7 +17,7 @@ const isNum = (v) => typeof v === 'number' && Number.isFinite(v);
 const isInt = (v, min) => Number.isInteger(v) && v >= min;
 const list = (v) => (Array.isArray(v) ? v : [v]);
 /** A date or a date-time, as ISO UTC. A bare day starts at 00:00:00Z and ends at 23:59:59Z. */
-function isoDate(v, end, bad) {
+export function isoDate(v, end, bad) {
     const s = v instanceof Date ? v.toISOString().replace(/\.000Z$/, 'Z') : String(v);
     const hint = 'Write a day, 2026-12-01, or a time in UTC, 2026-12-01T09:00:00Z.';
     if (/^\d{4}-\d{2}-\d{2}$/.test(s)) {

package/dist/storefront.js

@@ -3,10 +3,13 @@
 // top-level category), styles.css (theme tokens first, then the drop-in.css
 // overrides, then the page) and app.js (market switch, category links, and a
 // product page at #/p/<sku>). Product images are the store's, at /img/<file> (from
-// .commercelayer/img/, uploaded by apply). The agent then makes it the human's.
+// .commercelayer/img/, uploaded by apply); a product without one shows the tile the
+// store host draws at /tiles/<sku>.svg. The agent then makes it the human's.
 import { isLocalImage } from './store.js';
 /** img/<file> is the store's image at /img/<file> on the store host, whatever page links it. */
 const imageSrc = (url) => (isLocalImage(url) ? `/${url}` : url);
+/** A product without an image gets the tile the store host draws for it, at /tiles/<sku>.svg. */
+const productImage = (p) => (p.image_url ? imageSrc(p.image_url) : `/tiles/${encodeURIComponent(p.sku)}.svg`);
 const esc = (t) => String(t ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
 /** The scaffold's files, by path relative to the storefront folder. */
 export function storefrontFiles(store, clientId) {
@@ -17,7 +20,7 @@ function indexHtml(store, clientId) {
     const card = (p, h) => {
         const href = `#/p/${encodeURIComponent(p.sku)}`;
         return `      <article class="product" id="p-${esc(p.sku)}">
-        <a class="media" href="${esc(href)}" tabindex="-1">${p.image_url ? `<img src="${esc(imageSrc(p.image_url))}" alt="${esc(p.name)}">` : '<div class="placeholder" aria-hidden="true"></div>'}</a>
+        <a class="media" href="${esc(href)}" tabindex="-1"><img src="${esc(productImage(p))}" alt="${esc(p.name)}"${p.image_url ? '' : ' loading="lazy"'}></a>
         <${h}><a href="${esc(href)}">${esc(p.name)}</a></${h}>
 ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-price code="${esc(p.sku)}"><cl-price-amount type="compare-at"></cl-price-amount> <cl-price-amount type="price"></cl-price-amount></cl-price>
         <cl-availability code="${esc(p.sku)}"><cl-availability-status type="available">In stock</cl-availability-status><cl-availability-status type="unavailable">Sold out</cl-availability-status></cl-availability>
@@ -53,7 +56,7 @@ ${p.description ? `        <p>${esc(p.description)}</p>\n` : ''}        <cl-pric
     }
     const options = store.markets.map((m) => `          <option value="${esc(m.code)}">${esc(m.name)} (${esc(m.currency)})</option>`).join('\n');
     // What the product page shows, by sku. Prices and availability come live from drop-in.js.
-    const data = Object.fromEntries(store.products.map((p) => [p.sku, { name: p.name, description: p.description, image_url: p.image_url && imageSrc(p.image_url), category: p.category }]));
+    const data = Object.fromEntries(store.products.map((p) => [p.sku, { name: p.name, description: p.description, image_url: productImage(p), category: p.category }]));
     const json = JSON.stringify(data, null, 2).replace(/</g, '\\u003c');
     return `<!doctype html>
 <html lang="en">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/agent-cli",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "c11r: the Commerce Layer CLI for coding agents. Builds a sandbox store that people and shopping agents can buy from.",
   "homepage": "https://commercelayer.ai",
   "keywords": [