aimeat 2.1.0 → 2.3.0

package/dist/static/sdk-libs/exchange/sell.js

@@ -0,0 +1,253 @@
+/**
+ * @file exchange/sell.js
+ * @description The SELL half of AIMEAT.exchange — putting a capability on the market and watching
+ *   what it does. Three kinds of supply share one publish call: a raw extension action, an app-tool
+ *   a provider app sells cross-app, and a task type one of the owner's agents performs. Pricing is
+ *   never sent from here in a way the server would trust — the node reads it authoritatively from
+ *   the source — so `publish` carries the framing (title, terms, provenance, ODPS block) and the
+ *   coordinate, and the price follows from what the source declares.
+ *
+ *   `stats` and `consumers` are the two halves of "is this being used, and by whom". `consumers` is
+ *   provider-only and carries the breakdown underneath each row: the human who pays, and beneath
+ *   them their agents, apps and ecosystem apps — which is how an app answers "is my data being read
+ *   from an application, or by an agent directly?".
+ * @structure publish(spec) · update(id, patch) · delist(id, opts) · stats(id) · consumers(id) ·
+ *   reconcile(opts) · providerHistory() · grants() · grant(spec) · revokeGrant(spec) · normalizeSpec
+ * @usage await AIMEAT.exchange.publish({ ext: 'prh-api', action: 'validate', title: '…', usageTerms: {…} });
+ * @version-history
+ *   v1.0.0 — 2026-07-28 — Initial (NOSTE prompt 02 — the EXCHANGE browser library, gap G19).
+ */
+import { authed, pub, send, qs, exchangeError } from './client.js';
+import { get as getOffering } from './browse.js';
+
+const enc = encodeURIComponent;
+
+/** Pick the first defined value — lets every field be written camelCase or snake_case. */
+function pick(...vals) {
+  for (const v of vals) if (v !== undefined && v !== null) return v;
+  return undefined;
+}
+
+/** Drop undefined keys so an unset field is absent rather than explicitly null on the wire. */
+function compact(obj) {
+  const out = {};
+  for (const k of Object.keys(obj)) if (obj[k] !== undefined) out[k] = obj[k];
+  return out;
+}
+
+/**
+ * Normalise a listing spec into the body POST /v1/exchange/offerings expects. Accepts camelCase
+ * (what a JS app writes) or the wire's snake_case, so neither habit is punished.
+ * @param {Record<string, any>} spec
+ * @returns {Record<string, any>}
+ */
+export function normalizeSpec(spec) {
+  const s = /** @type {Record<string, any>} */ (spec || {});
+  return compact({
+    kind: s.kind,
+    // ext-action: the extension + action you own.
+    ext: s.ext,
+    action: s.action,
+    // app-tool: one tool of one of your apps (the node pins its interface version on listing).
+    app_id: pick(s.appId, s.app_id),
+    tool: s.tool,
+    // agent-work: a task type one of your agents performs, settled per delivered task.
+    agent_name: pick(s.agentName, s.agent_name),
+    task_type: pick(s.taskType, s.task_type),
+    price_morsels: pick(s.priceMorsels, s.price_morsels),
+    price_money: pick(s.priceMoney, s.price_money),
+    plans: s.plans,
+    input_schema: pick(s.inputSchema, s.input_schema),
+    output_schema: pick(s.outputSchema, s.output_schema),
+    // Shared framing.
+    title: s.title,
+    description: s.description,
+    tags: s.tags,
+    usage_terms: pick(s.usageTerms, s.usage_terms),
+    provenance: s.provenance,
+    odps: s.odps,
+  });
+}
+
+/**
+ * List a supply OFFERING. The node enforces a legibility gate before anything reaches the market:
+ * a published input AND output schema (`SCHEMA_REQUIRED`) and stated usage terms
+ * (`USAGE_TERMS_REQUIRED`), because a listing nobody can integrate or govern is not supply. The
+ * price is read from the source, so an unpriced capability is refused with `NOT_PRICED` rather than
+ * listed for free.
+ * @param {Record<string, any>} spec
+ *   ext-action: `{ ext, action, title?, description?, tags?, usageTerms, provenance?, odps? }`
+ *   app-tool:   `{ kind: 'app-tool', appId, tool, … }`
+ *   agent-work: `{ kind: 'agent-work', agentName, taskType, priceMorsels|priceMoney, inputSchema, outputSchema, … }`
+ * @returns {Promise<any>}  The created offering.
+ */
+export async function publish(spec) {
+  const d = await send('/v1/exchange/offerings', 'POST', normalizeSpec(spec), 'Failed to list the offering');
+  return d.offering;
+}
+
+/**
+ * Change a listing's framing. DERIVED — the node has no PATCH route for an offering, deliberately:
+ * a listing is a PROJECTION of its source, and the source is where price and coordinate live. So
+ * this republishes the same coordinate with `patch` merged over the current framing, then delists
+ * the superseded record. Consequences, stated because they are real:
+ *   - the offering ID CHANGES. Existing contracts are unaffected (they key on the capability
+ *     coordinate, not the listing id), but a link you published to the old id will 404.
+ *   - price, plans and the metered coordinate are NOT patchable here. They come from the source —
+ *     change the extension action, the tool manifest or the agent offer, then call {@link reconcile}.
+ *   - a PROJECTED listing (`auto`) is refused with `SOURCE_MANAGED` rather than duplicated, because
+ *     the next reconcile would overwrite whatever this wrote. The message names the source to edit.
+ * @param {string} id     The offering to replace.
+ * @param {Record<string, any>} patch  Framing fields (title, description, tags, usageTerms, provenance, odps).
+ * @returns {Promise<any>}  The new offering.
+ */
+export async function update(id, patch) {
+  const detail = await getOffering(id);
+  const o = detail.offering;
+  if (o.auto) {
+    throw exchangeError({ error: {
+      code: 'SOURCE_MANAGED',
+      message: 'This listing is projected from its source (' + o.ext + '/' + o.action
+        + '). Edit the source — the app-tool manifest, the extension action or the agent offer — then call'
+        + ' AIMEAT.exchange.reconcile(). Editing the listing here would be undone by the next reconcile.',
+    } }, 'This listing is managed by its source');
+  }
+  const surface = o.surface || {};
+  const base = compact({
+    kind: o.kind,
+    ext: o.kind === 'ext-action' ? o.ext : undefined,
+    action: o.kind === 'ext-action' ? o.action : undefined,
+    appId: surface.kind === 'app-tool' ? surface.appId : undefined,
+    tool: surface.kind === 'app-tool' ? surface.tool : undefined,
+    agentName: surface.kind === 'agent-work' ? surface.agentName : undefined,
+    taskType: surface.kind === 'agent-work' ? surface.taskType : undefined,
+    priceMorsels: o.kind === 'agent-work' && o.unit === 'morsels' ? o.basePrice : undefined,
+    priceMoney: o.kind === 'agent-work' && o.unit === 'money' ? { amount: o.basePrice, currency: o.currency } : undefined,
+    inputSchema: o.taskSpec ? o.taskSpec.inputSchema : undefined,
+    outputSchema: o.taskSpec ? o.taskSpec.outputSchema : undefined,
+    title: o.title,
+    description: o.description,
+    tags: o.tags,
+    usageTerms: o.usageTerms,
+    provenance: o.provenance,
+    odps: o.odps,
+  });
+  // Publish the replacement FIRST: if it is refused, the seller still has the listing they had.
+  const next = await publish({ ...base, ...(patch || {}) });
+  await delist(id).catch(() => { /* the replacement is live; a stale twin is better than no listing */ });
+  return next;
+}
+
+/**
+ * Delist an offering you own. A PROJECTED listing answers `SOURCE_MANAGED` (409) instead, naming
+ * the source whose `exchange` flag actually controls it — pass `{ force: true }` to delist it until
+ * the next reconcile brings it back.
+ * @param {string} id
+ * @param {{ force?: boolean }} [opts]
+ * @returns {Promise<any>}
+ */
+export function delist(id, opts) {
+  const query = qs({ force: opts && opts.force ? '1' : null });
+  return authed('/v1/exchange/offerings/' + enc(id) + query, { method: 'DELETE' }, 'Failed to delist the offering');
+}
+
+/**
+ * One offering's usage: `{ activeContracts, totalContracts, totalCalls, totalSettledUnits,
+ * consumers, listedAt, lastUsedAt, timing: { count, p50Ms, p95Ms, maxMs } | null }`. Derived from
+ * the contracts against it, so it is a real record of demand rather than a counter anyone can set.
+ * Public — this is reputation. `timing` is null until the capability has actually served calls.
+ * @param {string} id
+ * @returns {Promise<any>}
+ */
+export async function stats(id) {
+  const d = await pub('/v1/exchange/offerings/' + enc(id), 'No such offering');
+  return d.stats;
+}
+
+/**
+ * PROVIDER-ONLY lineage: one row per contract against your offering — who holds it, what they have
+ * consumed, what it settled, the pacing morsels it burned, whether you are CARRYING them (a grant)
+ * rather than billing them, and when they last called.
+ *
+ * Each row carries `callers`: the breakdown of who under that consumer actually called. The row is
+ * the human who pays; underneath are their agents, apps and ecosystem apps, each with its own call
+ * count and spend. That is the answer to "is this being used from an application, or by an agent
+ * directly?" — and it is empty (not wrong) on contracts that predate the breakdown: the totals are
+ * still right, only unattributed.
+ * @param {string} id
+ * @returns {Promise<{ offeringId: string, consumers: any[], count: number }>}
+ */
+export function consumers(id) {
+  return authed('/v1/exchange/offerings/' + enc(id) + '/consumers', undefined, 'No such offering of yours');
+}
+
+/**
+ * Re-project YOUR listings from their sources. Normally automatic — writing a tool manifest, an
+ * extension or an agent offer projects it — this is the explicit handle.
+ * @param {{ dryRun?: boolean, migrate?: boolean, appId?: string, ext?: string, agent?: string }} [opts]
+ *   `dryRun` reports what would change without changing it; `migrate` adopts hand-authored listings
+ *   into the projection model, keeping their offering ids so existing contracts keep resolving.
+ * @returns {Promise<any>}  The reconcile report (`changes` with created/updated/adopted/delisted/skipped).
+ */
+export function reconcile(opts) {
+  const o = opts || {};
+  return send('/v1/exchange/reconcile', 'POST', compact({
+    dry_run: o.dryRun, migrate: o.migrate, app_id: o.appId, ext: o.ext, agent: o.agent,
+  }), 'Failed to reconcile your listings');
+}
+
+/**
+ * Your PAST (archived / superseded) contracts as a PROVIDER — what a renegotiation replaced, with
+ * the old terms and the final spend.
+ * @returns {Promise<{ history: any[], count: number }>}
+ */
+export function providerHistory() {
+  return authed('/v1/exchange/provider/history', undefined, 'Failed to read your provider history');
+}
+
+/**
+ * Everyone you are CARRYING: grants you have issued (free access to a capability you sell, at your
+ * cost) plus `carried` — what the whole guest list has cost you, per rail.
+ * @param {{ appId?: string }} [opts]
+ * @returns {Promise<{ grants: any[], count: number, carried: Record<string, number> }>}
+ */
+export function grants(opts) {
+  return authed('/v1/exchange/grants' + qs({ app_id: opts && opts.appId }), undefined, 'Failed to read your grants');
+}
+
+/**
+ * Issue a grant — you carry this consumer instead of billing them. Needs the `exchange:grant` scope
+ * when an app asks on the owner's behalf, because it gives away the owner's revenue.
+ * @param {{ consumer: string, offeringId: string, capCarriedUnits?: number, note?: string, appId?: string,
+ *          reason?: { appId: string, role: string } }} spec
+ * @returns {Promise<any>}  The issued grant.
+ */
+export async function grant(spec) {
+  const s = /** @type {Record<string, any>} */ (spec || {});
+  const d = await send('/v1/exchange/grants', 'POST', compact({
+    consumer: s.consumer,
+    offering_id: pick(s.offeringId, s.offering_id),
+    cap_carried_units: pick(s.capCarriedUnits, s.cap_carried_units),
+    note: s.note,
+    app_id: pick(s.appId, s.app_id),
+    reason: s.reason ? { app_id: pick(s.reason.appId, s.reason.app_id), role: s.reason.role } : undefined,
+  }), 'Failed to issue the grant');
+  return d.grant;
+}
+
+/**
+ * Withdraw grants: `{ consumer, offeringId }` for one, or `{ appId, role?, consumer? }` for every
+ * grant an app issued under an approval it is taking back. Immediate — the next call falls back to
+ * whatever that consumer bought for themselves.
+ * @param {{ consumer?: string, offeringId?: string, appId?: string, role?: string }} spec
+ * @returns {Promise<{ revoked: number, grants: any[] }>}
+ */
+export function revokeGrant(spec) {
+  const s = /** @type {Record<string, any>} */ (spec || {});
+  return send('/v1/exchange/grants/revoke', 'POST', compact({
+    consumer: s.consumer,
+    offering_id: pick(s.offeringId, s.offering_id),
+    app_id: pick(s.appId, s.app_id),
+    role: s.role,
+  }), 'Failed to withdraw the grant');
+}

package/dist/static/sdk-libs/game/board.js

@@ -0,0 +1,331 @@
+/**
+ * @file game/board.js
+ * @description Competition and tables: the leaderboard, the stat grid, the compact data table and
+ *   the showcase card.
+ *
+ *   SEVERAL METRICS, NOT ONE. A board that ranks on a single number decides what the game is
+ *   about; a board with switchable metrics lets the host say "most used", "highest readiness" and
+ *   "fastest to a first customer" are all worth winning. Sorting happens here; the host is only
+ *   told which metric was chosen.
+ *
+ *   AN EMPTY BOARD READS AS "NOBODY YET". Never as an error, never as a blank rectangle — the
+ *   first thing a new app shows is its empty state, and a board that looks broken on day one
+ *   never gets a day two.
+ * @structure leaderboard(spec) · statGrid(spec) · dataTable(spec) · card(spec)
+ * @usage  AIMEAT.game.leaderboard({ metrics: [{ id: 'calls', label: 'Calls' }], rows });
+ * @version-history
+ *   v1.0.0 — 2026-07-28 — Initial (NOSTE prompt 01).
+ */
+import { el, clear } from './dom.js';
+import { t, i18n } from './i18n.js';
+
+/**
+ * @typedef {object} BoardMetric
+ * @property {string} id
+ * @property {string} label
+ * @property {(value: any) => string} [format]
+ * @property {'desc'|'asc'} [direction]   Default 'desc' — the biggest number wins.
+ */
+
+/**
+ * @typedef {object} BoardRow
+ * @property {string} id
+ * @property {string} name
+ * @property {string} [sublabel]
+ * @property {boolean} [you]     Highlight this row as the viewer's own.
+ * @property {number} [rank]     Fixed rank; omit and the board ranks by the active metric.
+ * @property {Record<string, any>} values
+ */
+
+/**
+ * A ranked board with switchable metrics.
+ * @param {{
+ *   title?: string, metrics: BoardMetric[], metric?: string, rows: BoardRow[],
+ *   onSort?: (metricId: string) => void, onPick?: (row: BoardRow) => void, emptyText?: string
+ * }} spec
+ * @returns {{ el: HTMLElement, set: (patch: any) => void, metric: () => string, destroy: () => void }}
+ */
+export function leaderboard(spec) {
+  const metrics = spec.metrics && spec.metrics.length ? spec.metrics : [{ id: 'score', label: 'Score' }];
+  let active = spec.metric || metrics[0].id;
+  let rows = spec.rows || [];
+
+  const heading = el('h3', { class: 'ag-title' });
+  const tabs = el('div', { class: 'ag-lb__metrics', role: 'group' });
+  const list = el('div', { class: 'ag-lb__rows' });
+  const root = el('div', { class: 'ag-root ag-lb' }, [heading, tabs, list]);
+
+  /** @returns {BoardMetric} */
+  function current() {
+    return metrics.find(function (m) { return m.id === active; }) || metrics[0];
+  }
+
+  /** @param {any} v @param {BoardMetric} m */
+  function show(v, m) {
+    if (m.format) return m.format(v);
+    if (v == null) return '—';
+    return typeof v === 'number' ? String(v) : String(v);
+  }
+
+  function renderTabs() {
+    clear(tabs);
+    if (metrics.length < 2) return;
+    tabs.setAttribute('aria-label', t('sortBy'));
+    for (const m of metrics) {
+      tabs.appendChild(el('button', {
+        type: 'button', class: 'ag-lb__metric', 'data-ag-id': m.id,
+        'aria-pressed': m.id === active ? 'true' : 'false',
+        on: {
+          click: function () {
+            active = m.id;
+            if (spec.onSort) spec.onSort(active);
+            renderTabs();
+            renderRows();
+          },
+        },
+      }, m.label));
+    }
+  }
+
+  function renderRows() {
+    clear(list);
+    const m = current();
+    if (!rows.length) {
+      list.appendChild(el('p', { class: 'ag-empty', text: spec.emptyText || t('nobodyYet') }));
+      return;
+    }
+    const dir = m.direction === 'asc' ? 1 : -1;
+    const sorted = rows.slice().sort(function (a, b) {
+      const av = Number(a.values ? a.values[m.id] : 0) || 0;
+      const bv = Number(b.values ? b.values[m.id] : 0) || 0;
+      return (av - bv) * dir;
+    });
+    sorted.forEach(function (row, i) {
+      const kids = [
+        el('span', { class: 'ag-lb__rank ag-num', text: String(row.rank != null ? row.rank : i + 1) }),
+        el('span', { class: 'ag-lb__who' }, [
+          el('span', { class: 'ag-lb__name', text: row.name + (row.you ? ' · ' + t('you') : '') }),
+          row.sublabel ? el('span', { class: 'ag-lb__sub', text: row.sublabel }) : null,
+        ]),
+        el('span', { class: 'ag-lb__val', text: show(row.values ? row.values[m.id] : null, m) }),
+      ];
+      const attrs = {
+        class: 'ag-lb__row' + (row.you ? ' ag-lb__row--you' : ''),
+        'data-ag-id': row.id,
+      };
+      if (spec.onPick) {
+        list.appendChild(el('button', Object.assign({ type: 'button' }, attrs, {
+          on: { click: function () { if (spec.onPick) spec.onPick(row); } },
+        }), kids));
+      } else {
+        list.appendChild(el('div', attrs, kids));
+      }
+    });
+  }
+
+  function render() {
+    heading.textContent = spec.title || '';
+    heading.hidden = !spec.title;
+    renderTabs();
+    renderRows();
+  }
+
+  const stopLang = i18n.onChange(render);
+  render();
+
+  return {
+    el: root,
+    /** @param {{ rows?: BoardRow[], metric?: string, title?: string }} patch */
+    set(patch) {
+      if (!patch) return;
+      if (patch.rows) rows = patch.rows;
+      if (patch.metric) active = patch.metric;
+      if (patch.title !== undefined) spec.title = patch.title;
+      render();
+    },
+    metric() { return active; },
+    destroy() { stopLang(); if (root.parentNode) root.parentNode.removeChild(root); },
+  };
+}
+
+/**
+ * @typedef {object} StatTile
+ * @property {string} id
+ * @property {string} label
+ * @property {string|number} value
+ * @property {string} [unit]
+ * @property {string|number} [delta]
+ * @property {'up'|'down'|'flat'} [deltaTone]  Derived from a numeric delta when omitted.
+ */
+
+/**
+ * A responsive grid of stat tiles.
+ * @param {StatTile[]|{ tiles: StatTile[] }} spec
+ * @returns {{ el: HTMLElement, set: (tiles: StatTile[]) => void, destroy: () => void }}
+ */
+export function statGrid(spec) {
+  let tiles = Array.isArray(spec) ? spec : ((spec && spec.tiles) || []);
+  const root = el('div', { class: 'ag-root ag-stats' });
+
+  function render() {
+    clear(root);
+    if (!tiles.length) {
+      root.appendChild(el('p', { class: 'ag-empty', text: t('empty') }));
+      return;
+    }
+    for (const tile of tiles) {
+      const tone = tile.deltaTone
+        || (tile.delta == null ? 'flat' : (Number(tile.delta) > 0 ? 'up' : Number(tile.delta) < 0 ? 'down' : 'flat'));
+      root.appendChild(el('div', { class: 'ag-stat', 'data-ag-id': tile.id }, [
+        el('span', { class: 'ag-label', text: tile.label }),
+        el('span', { class: 'ag-stat__v' }, [
+          el('span', { text: String(tile.value) }),
+          tile.unit ? el('span', { class: 'ag-stat__u', text: tile.unit }) : null,
+        ]),
+        tile.delta != null
+          ? el('span', { class: 'ag-stat__d ag-stat__d--' + tone, text: String(tile.delta) })
+          : null,
+      ]));
+    }
+  }
+
+  const stopLang = i18n.onChange(render);
+  render();
+
+  return {
+    el: root,
+    /** @param {StatTile[]} next */
+    set(next) { if (next) tiles = next; render(); },
+    destroy() { stopLang(); if (root.parentNode) root.parentNode.removeChild(root); },
+  };
+}
+
+/**
+ * @typedef {object} TableColumn
+ * @property {string} id
+ * @property {string} label
+ * @property {boolean} [num]   Right-aligned, tabular figures.
+ * @property {(value: any, row: any) => string} [format]
+ */
+
+/**
+ * A compact table that scrolls inside its own container — never widening the page.
+ * @param {{
+ *   columns: TableColumn[], rows: any[], onPick?: (row: any) => void, emptyText?: string,
+ *   caption?: string
+ * }} spec
+ * @returns {{ el: HTMLElement, set: (patch: any) => void, destroy: () => void }}
+ */
+export function dataTable(spec) {
+  let rows = spec.rows || [];
+  const columns = spec.columns || [];
+  const head = el('thead');
+  const body = el('tbody');
+  const table = el('table', {}, [head, body]);
+  const root = el('div', { class: 'ag-root ag-table' }, table);
+
+  function render() {
+    clear(head);
+    head.appendChild(el('tr', {}, columns.map(function (c) {
+      return el('th', { class: c.num ? 'ag-th--num' : null, scope: 'col', text: c.label });
+    })));
+
+    clear(body);
+    if (!rows.length) {
+      body.appendChild(el('tr', {}, el('td', {
+        colspan: String(Math.max(1, columns.length)),
+      }, el('p', { class: 'ag-empty', text: spec.emptyText || t('empty') }))));
+      return;
+    }
+    for (const row of rows) {
+      const cells = columns.map(function (c) {
+        const raw = row[c.id];
+        const text = c.format ? c.format(raw, row) : (raw == null ? '—' : String(raw));
+        return el('td', { class: c.num ? 'ag-td--num' : null, text: text });
+      });
+      const tr = el('tr', { 'data-ag-pick': spec.onPick ? '' : null }, cells);
+      if (spec.onPick) tr.addEventListener('click', function () { if (spec.onPick) spec.onPick(row); });
+      body.appendChild(tr);
+    }
+  }
+
+  const stopLang = i18n.onChange(render);
+  render();
+
+  return {
+    el: root,
+    /** @param {{ rows?: any[] }} patch */
+    set(patch) {
+      if (!patch) return;
+      if (patch.rows) rows = patch.rows;
+      render();
+    },
+    destroy() { stopLang(); if (root.parentNode) root.parentNode.removeChild(root); },
+  };
+}
+
+/**
+ * A showcase card for one entry — a player, a submission, an offering. Leaderboards and
+ * galleries both use it, which is why it carries a headline metric rather than a body of prose.
+ * @param {{
+ *   title: string, author?: string, metric?: { label: string, value: string|number },
+ *   image?: string, imageAlt?: string, tags?: string[], onPick?: () => void
+ * }} spec
+ * @returns {{ el: HTMLElement, set: (patch: any) => void, destroy: () => void }}
+ */
+export function card(spec) {
+  const state = {
+    title: spec.title,
+    author: spec.author,
+    metric: spec.metric,
+    image: spec.image,
+    tags: spec.tags || [],
+  };
+  const body = el('div', { class: 'ag-showcase__body' });
+  const tag = spec.onPick ? 'button' : 'div';
+  const root = el(tag, Object.assign(
+    { class: 'ag-root ag-card ag-showcase' },
+    spec.onPick ? { type: 'button', on: { click: function () { if (spec.onPick) spec.onPick(); } } } : {},
+  ));
+
+  function render() {
+    clear(root);
+    if (state.image) {
+      root.appendChild(el('img', {
+        class: 'ag-showcase__img', src: state.image, alt: spec.imageAlt || state.title, loading: 'lazy',
+      }));
+    }
+    clear(body);
+    body.appendChild(el('span', { class: 'ag-showcase__title', text: state.title }));
+    if (state.author) body.appendChild(el('span', { class: 'ag-showcase__by', text: state.author }));
+    if (state.metric) {
+      body.appendChild(el('span', { class: 'ag-showcase__metric' }, [
+        el('span', { class: 'ag-showcase__mv ag-num', text: String(state.metric.value) }),
+        el('span', { class: 'ag-label', text: state.metric.label }),
+      ]));
+    }
+    if (state.tags.length) {
+      body.appendChild(el('span', { class: 'ag-showcase__tags' }, state.tags.map(function (x) {
+        return el('span', { class: 'ag-chip', text: x });
+      })));
+    }
+    root.appendChild(body);
+  }
+
+  render();
+
+  return {
+    el: root,
+    /** @param {{ title?: string, author?: string, metric?: any, image?: string, tags?: string[] }} patch */
+    set(patch) {
+      if (!patch) return;
+      if (patch.title != null) state.title = patch.title;
+      if (patch.author !== undefined) state.author = patch.author;
+      if (patch.metric !== undefined) state.metric = patch.metric;
+      if (patch.image !== undefined) state.image = patch.image;
+      if (patch.tags) state.tags = patch.tags;
+      render();
+    },
+    destroy() { if (root.parentNode) root.parentNode.removeChild(root); },
+  };
+}