codex-work-receipt 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## Unreleased
+
+- 将 HTML 小票底部的重复渐变装饰替换为按小票编号生成的真实 Code 128 B 条形码，并保留适合浏览器和长图导出的静区与清晰度。
+- 优化 multipart 扫码交互：单数据码继续与小程序码并排，多分片时先展示小程序码，再自动逐张轮播唯一可见的数据码，避免镜头同时识别多个二维码。
+
 ## 0.6.0
 
 - 新增 cwr2 协议：按“会话 × 记账自然日”生成稳定的 canonical facts，重叠的今日、近 7 日和本周小票可由接收端可靠去重。

package/README.en.md

@@ -22,7 +22,7 @@
 
 Codex Work Receipt summarizes turns, tool calls, Tokens, duration, and models, then turns them into playful AI work points, a job title, and a review. Receipts never include prompts, responses, source code, project paths, or file names.
 
-Version `0.6.0` uses the cwr2 protocol to create stable privacy-safe facts for each session and calendar day. Overlapping today, last-seven-days, and this-week receipts can be deduplicated by the receiver, and oversized payloads are automatically split into reorderable multipart QR codes.
+Version `0.6.0` uses the cwr2 protocol to create stable privacy-safe facts for each session and calendar day. Overlapping today, last-seven-days, and this-week receipts can be deduplicated by the receiver, and oversized payloads are automatically split into reorderable multipart QR codes that rotate one at a time in the HTML so the camera never sees multiple data codes at once.
 
 ## Quickstart
 

package/README.md

@@ -22,7 +22,7 @@
 
 它会统计 Codex 会话中的轮次、工具调用、Token、时长和模型，生成带有 AI 工分、今日工种和点评的小票。不会把 Prompt、回复正文、代码、项目路径或文件名写入小票。
 
-`0.6.0` 使用 cwr2 协议，按“会话 × 自然日”生成稳定的脱敏事实。今日、近 7 日和本周小票即使范围重叠，接收端也能识别相同工作；数据过大时会自动生成多张可重组的分片二维码。
+`0.6.0` 使用 cwr2 协议，按“会话 × 自然日”生成稳定的脱敏事实。今日、近 7 日和本周小票即使范围重叠，接收端也能识别相同工作；数据过大时会自动生成多张可重组的分片二维码，并在 HTML 中逐张自动轮播，避免镜头同时识别多个数据码。
 
 ## Quickstart
 

package/docs/cli.en.md

@@ -79,7 +79,7 @@ Default output:
 
 Default filenames include the calendar range. Latest-session and selected-session receipts include a short identifier so receipts from different dates or sessions do not overwrite one another.
 
-Open the generated HTML and click “Save full PNG” to download a high-resolution image. It includes the main receipt, mini-program code, and data QR import stub in the currently selected theme. Theme controls, the page background, and the footer note are excluded. When cwr2 data exceeds the safe capacity of one QR code, the import stub automatically shows numbered multipart codes that must all be scanned in the mini program.
+Open the generated HTML and click “Save full PNG” to download a high-resolution image. It includes the main receipt, mini-program code, and data QR import stub in the currently selected theme. Theme controls, the page background, and the footer note are excluded. With one data QR, the mini-program code and data code remain side by side. When cwr2 exceeds the safe capacity of one QR code, the page shows the mini-program code first and then rotates multipart data codes one at a time without desktop clicks. The full PNG still includes every numbered part so the offline payload remains complete.
 
 Set a timezone and output path:
 

package/docs/cli.md

@@ -79,7 +79,7 @@ npx codex-work-receipt@latest --latest --theme diner
 
 默认文件名会携带统计日期范围；最近会话和指定会话则携带短编号，避免不同日期或会话的小票互相覆盖。
 
-打开生成的 HTML 后，点击“保存完整长图”即可下载高清 PNG。图片包含主小票、小程序码和数据二维码导入联，并自动使用当前选择的主题；主题按钮、网页背景和底部说明不会进入图片。cwr2 数据超过单个二维码的安全容量时，导入联会自动展示多张带序号的分片二维码，需在小程序中全部扫完。
+打开生成的 HTML 后，点击“保存完整长图”即可下载高清 PNG。图片包含主小票、小程序码和数据二维码导入联，并自动使用当前选择的主题；主题按钮、网页背景和底部说明不会进入图片。只有一个数据二维码时，小程序码与数据码继续并排展示。cwr2 数据超过单码安全容量时，网页先单独展示小程序码，随后自动逐张轮播分片数据码；用户无需在电脑上切换上一张或下一张，但仍需在小程序中收齐全部分片。完整长图为保留离线数据，会继续包含全部带序号的分片二维码。
 
 指定时区和输出路径：
 

package/docs/data-schema.en.md

@@ -24,8 +24,12 @@ The QR payload uses compact fields:
 
 ```text
 cwr1.<checksum>.<Base64URL of deflateRaw(JSON)>
+cwr2.<checksum>.<Base64URL of deflateRaw(JSON)>
+cwr2p.<transferId>.<partIndex>.<partCount>.<totalChecksum>.<partChecksum>.<chunk>
 ```
 
+`cwr1` and `cwr2` are complete single-code payloads. `cwr2p` splits the cwr2 string into up to 12 reorderable parts. The mini program collects a transfer by transferId, validates the total checksum, reconstructs cwr2, and only then decompresses it. Multipart HTML rotates one data code at a time; the protocol does not require scan order.
+
 The mini program validates the prefix and checksum before decompressing and parsing the payload. Future schema versions use the compact `v` field for compatibility.
 
 Compact field `o` explicitly carries `latest`, `session`, `today`, `last-7-days`, or `this-week`. `d[3]` and `d[4]` carry the calendar boundaries. These additive fields keep the `cwr1` prefix and schema version `1`, so the updated mini program can still import older QR codes.

package/docs/data-schema.md

@@ -24,8 +24,12 @@
 
 ```text
 cwr1.<checksum>.<deflateRaw(JSON) 的 Base64URL>
+cwr2.<checksum>.<deflateRaw(JSON) 的 Base64URL>
+cwr2p.<transferId>.<partIndex>.<partCount>.<totalChecksum>.<partChecksum>.<chunk>
 ```
 
+`cwr1` 和 `cwr2` 是完整单码。`cwr2p` 是 cwr2 单码字符串的可乱序分片，最多 12 片；小程序先按 transferId 收集全部分片，再校验总 checksum、拼回 cwr2 并解压。HTML 在多分片时每次只轮播一个数据码，协议本身不依赖扫描顺序。
+
 小程序应检查前缀和校验值，再解压并解析数据。未来结构升级通过 `v` 字段兼容。
 
 精简字段 `o` 显式携带 `latest`、`session`、`today`、`last-7-days` 或 `this-week`；`d[3]` 和 `d[4]` 携带自然日边界。新增字段保持 `cwr1` 和结构版本 `1`，旧二维码仍可由新版小程序导入。

package/docs/mobile-import.en.md

@@ -6,9 +6,9 @@ The desktop page shows both the fixed mini-program code and a data QR code for t
 
 1. Scan the fixed mini-program code in WeChat and open the companion mini program.
 2. Tap the desktop-import action.
-3. Scan the adjacent data QR code.
+3. Scan the adjacent data QR code. Multipart receipts rotate one part at a time on the computer, while the mini program automatically reopens scanning until all parts are collected.
 4. Validate the `cwr1`, `cwr2`, or multipart `cwr2p` prefix, checksum, and schema version.
-5. Decompress and parse the privacy-safe metrics.
+5. Single codes decompress immediately. Multipart codes can arrive out of order, and missed parts are collected on the next rotation before the privacy-safe metrics are parsed.
 6. Recognize a session, today, last-seven-days, or this-week range. New receipts use canonical facts for deduplication and are stored in the anonymous account database by default.
 7. Render the selected template with Canvas and save it to the phone.
 

package/docs/mobile-import.md

@@ -6,9 +6,9 @@
 
 1. 微信扫描固定小程序码并打开配套小程序。
 2. 点击“从电脑导入”。
-3. 扫描网页旁边的数据二维码。
+3. 扫描网页旁边的数据二维码；多分片小票会在电脑上自动逐张轮播，小程序在未集齐时自动继续打开扫码。
 4. 小程序校验 `cwr1`、`cwr2` 或 `cwr2p` 分片前缀、checksum 和结构版本。
-5. 解压并解析脱敏统计数据。
+5. 单码立即解压；多分片允许乱序、漏扫后等待下一轮补齐，全部到齐再解析脱敏统计数据。
 6. 识别单会话、今日、近七日或本周范围；新版小票按规范事实去重，完整记录默认保存到匿名账号数据库。
 7. 使用 Canvas 重新绘制所选模板并保存到手机相册。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-work-receipt",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "description": "Generate a privacy-first Codex work receipt from local session metadata.",
   "author": "a-bai-2026",

package/src/core/barcode.mjs

@@ -0,0 +1,52 @@
+const CODE128_PATTERNS = [
+  "212222", "222122", "222221", "121223", "121322", "131222", "122213", "122312", "132212", "221213", "221312", "231212",
+  "112232", "122132", "122231", "113222", "123122", "123221", "223211", "221132", "221231", "213212", "223112", "312131",
+  "311222", "321122", "321221", "312212", "322112", "322211", "212123", "212321", "232121", "111323", "131123", "131321",
+  "112313", "132113", "132311", "211313", "231113", "231311", "112133", "112331", "132131", "113123", "113321", "133121",
+  "313121", "211331", "231131", "213113", "213311", "213131", "311123", "311321", "331121", "312113", "312311", "332111",
+  "314111", "221411", "431111", "111224", "111422", "121124", "121421", "141122", "141221", "112214", "112412", "122114",
+  "122411", "142112", "142211", "241211", "221114", "413111", "241112", "134111", "111242", "121142", "121241", "114212",
+  "124112", "124211", "411212", "421112", "421211", "212141", "214121", "412121", "111143", "111341", "131141", "114113",
+  "114311", "411113", "411311", "113141", "114131", "311141", "411131", "211412", "211214", "211232", "2331112",
+];
+
+const START_CODE_B = 104;
+const STOP_CODE = 106;
+
+function normalizeCode128Value(value) {
+  return [...String(value)]
+    .map((character) => {
+      const code = character.charCodeAt(0);
+      return code >= 32 && code <= 126 ? character : "?";
+    })
+    .join("")
+    .slice(0, 48) || "CWR";
+}
+
+export function buildCode128B(value) {
+  const normalized = normalizeCode128Value(value);
+  const dataCodes = [...normalized].map((character) => character.charCodeAt(0) - 32);
+  const checksum = dataCodes.reduce(
+    (total, code, index) => total + code * (index + 1),
+    START_CODE_B,
+  ) % 103;
+  const codes = [START_CODE_B, ...dataCodes, checksum, STOP_CODE];
+  const segments = [];
+
+  for (const code of codes) {
+    const pattern = CODE128_PATTERNS[code];
+    for (const [index, width] of [...pattern].entries()) {
+      segments.push({
+        isBar: index % 2 === 0,
+        width: Number(width),
+      });
+    }
+  }
+
+  return {
+    value: normalized,
+    checksum,
+    segments,
+    totalModules: segments.reduce((total, segment) => total + segment.width, 0),
+  };
+}

package/src/core/presentation.mjs

@@ -133,6 +133,12 @@ const RECEIPT_COPY = {
     openMiniProgramHint: "微信扫码进入 AI 打工图鉴",
     importData: "2 · 扫描导入数据",
     importDataHint: "在小程序里点击“从电脑导入”后扫描",
+    multipartOpenTitle: "先打开小程序",
+    multipartOpenHint: "数据码将在 {seconds} 秒后自动开始轮播，无需点击电脑",
+    multipartTransferTitle: "保持手机对准屏幕",
+    multipartTransferHint: "数据码会自动逐张轮播；漏扫或重复都没关系",
+    multipartPartLabel: "数据分片 {current}/{total}",
+    multipartRestart: "重新显示小程序码",
     dataQrAlt: "当前小票数据二维码",
     miniProgramAlt: "微信小程序码",
     placeholderLabel: "小程序码",
@@ -199,6 +205,12 @@ const RECEIPT_COPY = {
     openMiniProgramHint: "Scan with WeChat to open AI Work Archive",
     importData: "2 · Import receipt data",
     importDataHint: "Tap “从电脑导入小票” in the mini program, then scan this code",
+    multipartOpenTitle: "Open the mini program first",
+    multipartOpenHint: "The data codes will start rotating automatically in {seconds}s. No desktop click is required.",
+    multipartTransferTitle: "Keep your phone pointed at the screen",
+    multipartTransferHint: "Data codes rotate automatically. Missed or duplicate scans are safe.",
+    multipartPartLabel: "Data part {current}/{total}",
+    multipartRestart: "Show mini-program code again",
     dataQrAlt: "Current receipt data QR code",
     miniProgramAlt: "WeChat mini-program code",
     placeholderLabel: "Mini program",

package/src/renderers/html.mjs

@@ -1,6 +1,7 @@
 import fs from "node:fs";
 import { createRequire } from "node:module";
 
+import { buildCode128B } from "../core/barcode.mjs";
 import { formatDate, formatDuration, formatNumber, formatTime } from "../lib/time.mjs";
 import { buildCompensation, DEFAULT_LOCALE, getReceiptCopy } from "../core/presentation.mjs";
 
@@ -24,6 +25,16 @@ function receiptRow(label, value, emphasize = false) {
   return `<div class="receipt-row${emphasize ? " receipt-row--emphasize" : ""}"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></div>`;
 }
 
+function receiptBarcode(value) {
+  const barcode = buildCode128B(value);
+  const segments = barcode.segments.map((segment) => {
+    const kind = segment.isBar ? "bar" : "space";
+    return `<span class="barcode-segment barcode-segment--${kind}" style="flex-grow:${segment.width}"></span>`;
+  }).join("");
+
+  return `<div class="barcode" data-barcode-value="${escapeHtml(barcode.value)}" aria-hidden="true">${segments}</div>`;
+}
+
 function formatCount(value, units, locale) {
   const amount = Math.max(0, Math.round(value || 0));
   const unit = units[amount === 1 ? 0 : 1];
@@ -36,6 +47,13 @@ function formatDateKey(value, locale) {
   return locale === "en" ? `${match[2]}/${match[3]}/${match[1]}` : `${match[1]}/${match[2]}/${match[3]}`;
 }
 
+function formatCopy(template, values) {
+  return Object.entries(values).reduce(
+    (result, [key, value]) => result.replaceAll(`{${key}}`, String(value)),
+    String(template),
+  );
+}
+
 export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null, miniProgramCodeDataUrl = null }) {
   const locale = record.locale || DEFAULT_LOCALE;
   const copy = getReceiptCopy(locale);
@@ -56,7 +74,8 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
     : `${formatTime(startAt, timezone, locale)}—${formatTime(endAt, timezone, locale)}`;
   const businessPeriodLabel = isCalendarScope ? copy.meta.period : copy.meta.hours;
   const modelLabel = record.stats.models.length ? record.stats.models.join(" / ") : copy.modelMissing;
-  const receiptNumber = `${record.id.slice(4, 12).toUpperCase()}-${String(record.stats.completed_turns).padStart(3, "0")}`;
+  const shortReceiptId = record.id.replace(/^cwr2?_/, "").slice(0, 8).toUpperCase() || "UNKNOWN";
+  const receiptNumber = `${shortReceiptId}-${String(record.stats.completed_turns).padStart(3, "0")}`;
   const compensation = record.presentation.compensation || buildCompensation(record.source.scope, 0, locale);
   const responseSeconds = new Intl.NumberFormat(locale === "en" ? "en-US" : "zh-CN", {
     minimumFractionDigits: 1,
@@ -91,11 +110,56 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
       ? [dataQrDataUrl]
       : [];
   const dataQrItems = qrUrls.map((url, index) => `
-        <div class="qr-item">
+        <div class="qr-item" data-data-qr-index="${index}">
           <div class="qr-frame"><img src="${url}" alt="${escapeHtml(copy.dataQrAlt)} ${index + 1}/${qrUrls.length}"></div>
           <strong>${escapeHtml(copy.importData)}${qrUrls.length > 1 ? ` ${index + 1}/${qrUrls.length}` : ""}</strong>
           <span>${escapeHtml(copy.importDataHint)}</span>
         </div>`).join("");
+  const isMultipart = qrUrls.length > 1;
+  const multipartSetupSeconds = 10;
+  const multipartConfig = JSON.stringify({
+    enabled: isMultipart,
+    setupSeconds: multipartSetupSeconds,
+    frameMs: 4000,
+    blankMs: 240,
+    setupHint: copy.multipartOpenHint,
+    partLabel: copy.multipartPartLabel,
+  }).replaceAll("<", "\\u003c");
+  const transferVisual = isMultipart
+    ? `
+      <div class="multipart-live" id="multipart-live">
+        <div class="multipart-panel multipart-setup" id="multipart-setup">
+          <div class="qr-item multipart-setup__item">
+            <div class="qr-frame qr-frame--large">${miniProgramVisual}</div>
+            <strong>${escapeHtml(copy.multipartOpenTitle)}</strong>
+            <span id="multipart-setup-hint">${escapeHtml(formatCopy(copy.multipartOpenHint, { seconds: multipartSetupSeconds }))}</span>
+          </div>
+        </div>
+        <div class="multipart-panel multipart-stage" id="multipart-stage" hidden>
+          <div class="qr-frame qr-frame--large"><img id="multipart-active-qr" alt="${escapeHtml(copy.dataQrAlt)}"></div>
+          <strong class="multipart-stage__title">${escapeHtml(copy.multipartTransferTitle)}</strong>
+          <span class="multipart-stage__part" id="multipart-part-label">${escapeHtml(formatCopy(copy.multipartPartLabel, { current: 1, total: qrUrls.length }))}</span>
+          <span class="multipart-stage__hint">${escapeHtml(copy.multipartTransferHint)}</span>
+          <button class="multipart-secondary" id="multipart-show-mini" type="button">${escapeHtml(copy.multipartRestart)}</button>
+        </div>
+      </div>
+      <div class="qr-grid qr-grid--export-only" hidden>
+        <div class="qr-item">
+          <div class="qr-frame">${miniProgramVisual}</div>
+          <strong>${escapeHtml(copy.openMiniProgram)}</strong>
+          <span>${escapeHtml(copy.openMiniProgramHint)}</span>
+        </div>
+        ${dataQrItems}
+      </div>`
+    : `
+      <div class="qr-grid qr-grid--single">
+        <div class="qr-item">
+          <div class="qr-frame">${miniProgramVisual}</div>
+          <strong>${escapeHtml(copy.openMiniProgram)}</strong>
+          <span>${escapeHtml(copy.openMiniProgramHint)}</span>
+        </div>
+        ${dataQrItems}
+      </div>`;
 
   return `<!doctype html>
 <html lang="${escapeHtml(copy.htmlLang)}" data-theme="${escapeHtml(record.presentation.default_theme)}">
@@ -313,11 +377,28 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
       color: var(--muted);
     }
     .barcode {
+      display: flex;
+      align-items: stretch;
+      box-sizing: border-box;
+      width: 100%;
       height: 48px;
       margin: 18px auto 8px;
-      max-width: 280px;
-      background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px);
-      opacity: .84;
+      max-width: 320px;
+      padding: 0 20px;
+      overflow: hidden;
+    }
+    .barcode-segment {
+      display: block;
+      flex-basis: 0;
+      flex-shrink: 0;
+      min-width: 0;
+      height: 100%;
+    }
+    .barcode-segment--bar {
+      background: var(--ink);
+    }
+    .barcode-segment--space {
+      background: transparent;
     }
     .footer {
       text-align: center;
@@ -352,6 +433,39 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
     .qr-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
     .qr-item strong { display: block; font-size: 12px; }
     .qr-item span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
+    .qr-grid--export-only { display: none; }
+    .multipart-live { margin-top: 20px; }
+    .multipart-panel {
+      display: grid;
+      place-items: center;
+      min-height: 310px;
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: color-mix(in srgb, var(--paper) 94%, var(--ink));
+      text-align: center;
+    }
+    .multipart-panel[hidden] { display: none; }
+    .multipart-setup__item { width: 100%; }
+    .qr-frame--large { width: min(100%, 250px); }
+    .multipart-stage__title,
+    .multipart-stage__part,
+    .multipart-stage__hint { display: block; }
+    .multipart-stage__title { margin-top: 4px; font-size: 14px; }
+    .multipart-stage__part { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
+    .multipart-stage__hint { max-width: 360px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
+    #multipart-active-qr[aria-busy="true"] { visibility: hidden; }
+    .multipart-secondary {
+      margin-top: 14px;
+      padding: 7px 12px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      color: var(--ink);
+      background: transparent;
+      font: inherit;
+      font-size: 10px;
+      cursor: pointer;
+    }
+    .multipart-secondary:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
     .mini-placeholder {
       display: grid;
       place-content: center;
@@ -436,7 +550,7 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
           <strong>${escapeHtml(formatNumber(compensation.amount, locale))}<small>${escapeHtml(compensation.unit)}</small></strong>
         </div>
       </section>
-      <div class="barcode" aria-hidden="true"></div>
+      ${receiptBarcode(receiptNumber)}
       <footer class="footer">
         <div>MODEL · ${escapeHtml(modelLabel)}</div>
         <div>${escapeHtml(copy.footerThanks)}</div>
@@ -448,14 +562,7 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
         <h2>${escapeHtml(copy.transferTitle)}</h2>
         <p>${escapeHtml(copy.transferDescription)}</p>
       </header>
-      <div class="qr-grid">
-        <div class="qr-item">
-          <div class="qr-frame">${miniProgramVisual}</div>
-          <strong>${escapeHtml(copy.openMiniProgram)}</strong>
-          <span>${escapeHtml(copy.openMiniProgramHint)}</span>
-        </div>
-        ${dataQrItems}
-      </div>
+      ${transferVisual}
       <p class="transfer-note">${escapeHtml(copy.transferNote)}</p>
       </section>
     </div>
@@ -465,6 +572,7 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
   <script>${inlineScript(DOM_TO_IMAGE_SOURCE)}</script>
   <script>
     const exportConfig = ${exportConfig};
+    const multipartConfig = ${multipartConfig};
     const themes = new Set(["classic", "diner", "payroll"]);
     const buttons = [...document.querySelectorAll("[data-theme-value]")];
     function applyTheme(theme) {
@@ -478,6 +586,88 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
     try { savedTheme = localStorage.getItem("codex-work-receipt-theme"); } catch {}
     applyTheme(savedTheme || document.documentElement.dataset.theme);
 
+    const multipartLive = document.getElementById("multipart-live");
+    if (multipartConfig.enabled && multipartLive) {
+      const setup = document.getElementById("multipart-setup");
+      const setupHint = document.getElementById("multipart-setup-hint");
+      const stage = document.getElementById("multipart-stage");
+      const activeQr = document.getElementById("multipart-active-qr");
+      const partLabel = document.getElementById("multipart-part-label");
+      const showMiniButton = document.getElementById("multipart-show-mini");
+      const urls = [...document.querySelectorAll(".qr-grid--export-only [data-data-qr-index] img")]
+        .map((image) => image.src)
+        .filter(Boolean);
+      let setupTimer = null;
+      let rotationTimer = null;
+      let switchTimer = null;
+      let activeIndex = 0;
+
+      function stopMultipartTimers() {
+        if (setupTimer !== null) clearInterval(setupTimer);
+        if (rotationTimer !== null) clearInterval(rotationTimer);
+        if (switchTimer !== null) clearTimeout(switchTimer);
+        setupTimer = null;
+        rotationTimer = null;
+        switchTimer = null;
+      }
+
+      function setupHintText(seconds) {
+        return String(multipartConfig.setupHint).replaceAll("{seconds}", String(seconds));
+      }
+
+      function partLabelText(index) {
+        return String(multipartConfig.partLabel)
+          .replaceAll("{current}", String(index + 1))
+          .replaceAll("{total}", String(urls.length));
+      }
+
+      function showPart(index, immediate = false) {
+        if (!urls.length) return;
+        activeIndex = (index + urls.length) % urls.length;
+        const applyPart = () => {
+          activeQr.src = urls[activeIndex];
+          activeQr.alt = partLabelText(activeIndex);
+          activeQr.setAttribute("aria-busy", "false");
+          partLabel.textContent = partLabelText(activeIndex);
+          switchTimer = null;
+        };
+        if (immediate) {
+          applyPart();
+          return;
+        }
+        activeQr.setAttribute("aria-busy", "true");
+        switchTimer = setTimeout(applyPart, multipartConfig.blankMs);
+      }
+
+      function startMultipartTransfer() {
+        stopMultipartTimers();
+        setup.hidden = true;
+        stage.hidden = false;
+        showPart(0, true);
+        rotationTimer = setInterval(() => showPart(activeIndex + 1), multipartConfig.frameMs);
+      }
+
+      function showMultipartSetup() {
+        stopMultipartTimers();
+        stage.hidden = true;
+        setup.hidden = false;
+        let remaining = multipartConfig.setupSeconds;
+        setupHint.textContent = setupHintText(remaining);
+        setupTimer = setInterval(() => {
+          remaining -= 1;
+          if (remaining <= 0) {
+            startMultipartTransfer();
+            return;
+          }
+          setupHint.textContent = setupHintText(remaining);
+        }, 1000);
+      }
+
+      showMiniButton.addEventListener("click", showMultipartSetup);
+      window.addEventListener("beforeunload", stopMultipartTimers);
+      showMultipartSetup();
+    }
+
     const exportButton = document.getElementById("save-receipt-image");
     const exportStatus = document.getElementById("export-status");
     const exportNode = document.getElementById("receipt-export");
@@ -488,7 +678,7 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
     }
 
     function waitForImages(node) {
-      return Promise.all([...node.querySelectorAll("img")].map((image) => {
+      return Promise.all([...node.querySelectorAll("img")].filter((image) => image.getAttribute("src")).map((image) => {
         if (image.complete && image.naturalWidth > 0) return Promise.resolve();
         return new Promise((resolve, reject) => {
           image.addEventListener("load", resolve, { once: true });
@@ -531,6 +721,13 @@ export function renderHtml({ record, dataQrDataUrl = null, dataQrDataUrls = null
           style: { background: paperColor },
           onclone(clone) {
             clone.style.background = paperColor;
+            const multipartLiveClone = clone.querySelector(".multipart-live");
+            if (multipartLiveClone) multipartLiveClone.remove();
+            const exportGridClone = clone.querySelector(".qr-grid--export-only");
+            if (exportGridClone) {
+              exportGridClone.removeAttribute("hidden");
+              exportGridClone.style.display = "grid";
+            }
             clone.querySelectorAll(".paper").forEach((paper) => {
               paper.style.boxShadow = "none";
             });