codex-work-receipt 0.3.0

package/src/core/receipt-record.mjs

@@ -0,0 +1,121 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+import {
+  buildCompensation,
+  DEFAULT_LOCALE,
+  getWorkProfileCopy,
+} from "./presentation.mjs";
+
+const SCHEMA_VERSION = 1;
+const COLLECTOR_VERSION = "0.3.0";
+
+function fingerprintSessionIds(sessionIds) {
+  return crypto.createHash("sha256").update([...sessionIds].sort().join("|")).digest("hex").slice(0, 16);
+}
+
+export function buildReceiptRecord(metrics, defaultTheme = "classic", locale = DEFAULT_LOCALE) {
+  const sessionFingerprint = fingerprintSessionIds(metrics.sessionIds);
+  const logicalKey = metrics.mode === "latest"
+    ? `latest:${sessionFingerprint}`
+    : `today:${metrics.targetDate}:${metrics.timezone}`;
+  const id = `cwr_${crypto.createHash("sha256").update(logicalKey).digest("hex").slice(0, 16)}`;
+  const snapshotHash = crypto.createHash("sha256").update(JSON.stringify({
+    start: metrics.startAt.toISOString(),
+    end: metrics.endAt.toISOString(),
+    tokens: metrics.tokens,
+    tools: metrics.toolCalls,
+    turns: metrics.completedTurns,
+    interruptions: metrics.interruptions,
+  })).digest("hex").slice(0, 16);
+  const workProfileId = metrics.workProfileId || "temporary-hire";
+  const workProfile = getWorkProfileCopy(workProfileId, locale);
+
+  return {
+    schema_version: SCHEMA_VERSION,
+    locale,
+    id,
+    generated_at: new Date().toISOString(),
+    source: {
+      type: "codex",
+      scope: metrics.mode,
+      collector_version: COLLECTOR_VERSION,
+      logical_key: logicalKey,
+      session_fingerprint: sessionFingerprint,
+      snapshot_hash: snapshotHash,
+    },
+    period: {
+      start_at: metrics.startAt.toISOString(),
+      end_at: metrics.endAt.toISOString(),
+      timezone: metrics.timezone,
+    },
+    stats: {
+      session_count: metrics.sessionCount,
+      completed_turns: metrics.completedTurns,
+      user_messages: metrics.userMessages,
+      tool_calls: metrics.toolCalls,
+      interruptions: metrics.interruptions,
+      work_duration_ms: Math.round(metrics.workDurationMs),
+      average_first_token_ms: Math.round(metrics.averageFirstTokenMs),
+      tokens: { ...metrics.tokens },
+      models: [...metrics.models],
+    },
+    presentation: {
+      default_theme: defaultTheme,
+      work_profile: workProfileId,
+      work_title: workProfile.title,
+      review: workProfile.review,
+      compensation: buildCompensation(metrics.mode, metrics.workPoints, locale),
+    },
+    privacy: {
+      contains_prompts: false,
+      contains_responses: false,
+      contains_code: false,
+      contains_paths: false,
+      contains_filenames: false,
+    },
+  };
+}
+
+export function persistReceiptRecord(record, outputHtmlPath, requestedDataDir = null) {
+  const dataDir = path.resolve(
+    requestedDataDir || process.env.CODEX_WORK_RECEIPT_HOME || path.join(os.homedir(), ".codex-work-receipt"),
+  );
+  const receiptsDir = path.join(dataDir, "receipts");
+  fs.mkdirSync(receiptsDir, { recursive: true });
+
+  const receiptPath = path.join(receiptsDir, `${record.id}.json`);
+  fs.writeFileSync(receiptPath, `${JSON.stringify(record, null, 2)}\n`, "utf8");
+  fs.writeFileSync(path.join(dataDir, "latest.json"), `${JSON.stringify(record, null, 2)}\n`, "utf8");
+
+  const allRecords = fs.readdirSync(receiptsDir)
+    .filter((name) => name.endsWith(".json"))
+    .map((name) => JSON.parse(fs.readFileSync(path.join(receiptsDir, name), "utf8")));
+  const deduplicated = new Map();
+  for (const item of allRecords) {
+    const logicalKey = item.source?.logical_key || (
+      item.source?.scope === "latest" && item.source?.session_fingerprint
+        ? `latest:${item.source.session_fingerprint}`
+        : item.id
+    );
+    const current = deduplicated.get(logicalKey);
+    if (!current || String(item.generated_at).localeCompare(String(current.generated_at)) > 0) {
+      deduplicated.set(logicalKey, item);
+    }
+  }
+  const history = [...deduplicated.values()]
+    .sort((left, right) => String(left.period?.end_at).localeCompare(String(right.period?.end_at)));
+  fs.writeFileSync(
+    path.join(dataDir, "history.jsonl"),
+    history.length ? `${history.map((item) => JSON.stringify(item)).join("\n")}\n` : "",
+    "utf8",
+  );
+
+  const companionPath = /\.html?$/i.test(outputHtmlPath)
+    ? outputHtmlPath.replace(/\.html?$/i, ".json")
+    : `${outputHtmlPath}.json`;
+  fs.writeFileSync(companionPath, `${JSON.stringify(record, null, 2)}\n`, "utf8");
+  return { dataDir, receiptPath, companionPath };
+}

package/src/core/skill-installer.mjs

@@ -0,0 +1,38 @@
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+export const CODEX_SKILL_NAME = "ai-work-receipt";
+
+export function getCodexSkillInstallPath(homeDir = os.homedir()) {
+  return path.join(homeDir, ".agents", "skills", CODEX_SKILL_NAME);
+}
+
+export function installCodexSkill({ projectDir, homeDir = os.homedir() } = {}) {
+  if (!projectDir) throw new Error("安装 Skill 时缺少项目目录");
+
+  const sourceDir = path.join(projectDir, "skills", CODEX_SKILL_NAME);
+  const sourceEntry = path.join(sourceDir, "SKILL.md");
+  if (!fs.existsSync(sourceEntry)) {
+    throw new Error(`发布包中缺少 Skill：${sourceEntry}`);
+  }
+
+  const targetDir = getCodexSkillInstallPath(homeDir);
+  const targetParent = path.dirname(targetDir);
+  const stagingDir = path.join(
+    targetParent,
+    `.${CODEX_SKILL_NAME}.install-${process.pid}-${Date.now()}`,
+  );
+
+  fs.mkdirSync(targetParent, { recursive: true });
+  try {
+    fs.cpSync(sourceDir, stagingDir, { recursive: true });
+    fs.rmSync(targetDir, { recursive: true, force: true });
+    fs.renameSync(stagingDir, targetDir);
+  } catch (error) {
+    fs.rmSync(stagingDir, { recursive: true, force: true });
+    throw error;
+  }
+
+  return { sourceDir, targetDir };
+}

package/src/lib/time.mjs

@@ -0,0 +1,53 @@
+export function toDate(value) {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function rowDate(row) {
+  return toDate(
+    row.timestamp ||
+      row.payload?.completed_at ||
+      row.payload?.started_at ||
+      row.payload?.timestamp,
+  );
+}
+
+export function dateKey(date, timezone) {
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+}
+
+export function formatDate(date, timezone, locale = "zh-CN") {
+  const formatted = new Intl.DateTimeFormat(locale === "en" ? "en-CA" : "zh-CN", {
+    timeZone: timezone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+  return locale === "en" ? formatted : formatted.replaceAll("/", ".");
+}
+
+export function formatTime(date, timezone, locale = "zh-CN") {
+  return new Intl.DateTimeFormat(locale === "en" ? "en-GB" : "zh-CN", {
+    timeZone: timezone,
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(date);
+}
+
+export function formatDuration(milliseconds) {
+  const totalSeconds = Math.max(0, Math.round(milliseconds / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  return [hours, minutes, seconds].map((value) => String(value).padStart(2, "0")).join(":");
+}
+
+export function formatNumber(value, locale = "zh-CN") {
+  return new Intl.NumberFormat(locale === "en" ? "en-US" : "zh-CN").format(Math.max(0, Math.round(value || 0)));
+}

package/src/parsers/codex.mjs

@@ -0,0 +1,51 @@
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+
+function walkJsonlFiles(directory, accumulator = []) {
+  if (!fs.existsSync(directory)) return accumulator;
+  for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
+    const entryPath = path.join(directory, entry.name);
+    if (entry.isDirectory()) walkJsonlFiles(entryPath, accumulator);
+    else if (entry.isFile() && entry.name.endsWith(".jsonl")) accumulator.push(entryPath);
+  }
+  return accumulator;
+}
+
+function readJsonl(filePath) {
+  const rows = [];
+  const source = fs.readFileSync(filePath, "utf8");
+  for (const [lineIndex, line] of source.split("\n").entries()) {
+    if (!line.trim()) continue;
+    try {
+      rows.push(JSON.parse(line));
+    } catch {
+      console.warn(`跳过无法解析的记录：${path.basename(filePath)}:${lineIndex + 1}`);
+    }
+  }
+  return rows;
+}
+
+export function loadCodexSessions(mode) {
+  const codexHome = process.env.CODEX_HOME || path.join(os.homedir(), ".codex");
+  const sessionsDirectory = path.join(codexHome, "sessions");
+  const files = walkJsonlFiles(sessionsDirectory)
+    .map((filePath) => ({ filePath, modifiedAt: fs.statSync(filePath).mtimeMs }))
+    .sort((left, right) => right.modifiedAt - left.modifiedAt);
+
+  if (!files.length) throw new Error(`没有在 ${sessionsDirectory} 找到 Codex 会话记录`);
+
+  const selected = mode === "latest"
+    ? files.slice(0, 1)
+    : files.filter((file) => file.modifiedAt >= Date.now() - 72 * 60 * 60 * 1000);
+
+  return selected.map((file) => {
+    const rows = readJsonl(file.filePath);
+    const meta = rows.find((row) => row.type === "session_meta")?.payload || {};
+    return {
+      rows,
+      sessionId: meta.session_id || meta.id || path.basename(file.filePath, ".jsonl"),
+    };
+  });
+}
+

package/src/renderers/html.mjs

@@ -0,0 +1,398 @@
+import { formatDate, formatDuration, formatNumber, formatTime } from "../lib/time.mjs";
+import { buildCompensation, DEFAULT_LOCALE, getReceiptCopy } from "../core/presentation.mjs";
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+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 formatCount(value, units, locale) {
+  const amount = Math.max(0, Math.round(value || 0));
+  const unit = units[amount === 1 ? 0 : 1];
+  return `${formatNumber(amount, locale)} ${unit}`;
+}
+
+export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = null }) {
+  const locale = record.locale || DEFAULT_LOCALE;
+  const copy = getReceiptCopy(locale);
+  const startAt = new Date(record.period.start_at);
+  const endAt = new Date(record.period.end_at);
+  const timezone = record.period.timezone;
+  const displayDate = formatDate(endAt, timezone, locale);
+  const businessHours = `${formatTime(startAt, timezone, locale)}—${formatTime(endAt, timezone, locale)}`;
+  const scopeLabel = copy.scope[record.source.scope] || copy.scope.latest;
+  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 compensation = record.presentation.compensation || buildCompensation(record.source.scope, 0, locale);
+  const responseSeconds = new Intl.NumberFormat(locale === "en" ? "en-US" : "zh-CN", {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(record.stats.average_first_token_ms / 1000);
+  const rows = [
+    receiptRow(copy.rows.scope, scopeLabel),
+    receiptRow(copy.rows.sessions, formatCount(record.stats.session_count, copy.units.sessions, locale)),
+    receiptRow(copy.rows.turns, formatCount(record.stats.completed_turns, copy.units.turns, locale)),
+    receiptRow(copy.rows.messages, formatCount(record.stats.user_messages, copy.units.messages, locale)),
+    receiptRow(copy.rows.tools, formatCount(record.stats.tool_calls, copy.units.tools, locale)),
+    receiptRow(copy.rows.tokens, formatNumber(record.stats.tokens.total_tokens, locale), true),
+    receiptRow(copy.rows.cachedTokens, formatNumber(record.stats.tokens.cached_input_tokens, locale)),
+    receiptRow(copy.rows.interruptions, formatCount(record.stats.interruptions, copy.units.interruptions, locale)),
+    receiptRow(copy.rows.firstResponse, `${responseSeconds} ${copy.units.seconds[1]}`),
+    receiptRow(copy.rows.duration, formatDuration(record.stats.work_duration_ms), true),
+  ].join("");
+
+  const miniProgramVisual = miniProgramCodeDataUrl
+    ? `<img src="${miniProgramCodeDataUrl}" alt="${escapeHtml(copy.miniProgramAlt)}">`
+    : `<div class="mini-placeholder" role="img" aria-label="${escapeHtml(copy.placeholderAria)}"><span>${escapeHtml(copy.placeholderLabel)}</span><strong>${escapeHtml(copy.placeholderValue)}</strong></div>`;
+
+  return `<!doctype html>
+<html lang="${escapeHtml(copy.htmlLang)}" data-theme="${escapeHtml(record.presentation.default_theme)}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(copy.pageTitle)} · ${escapeHtml(displayDate)}</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --ink: #171713;
+      --paper: #fffef4;
+      --desk: #d9d7cb;
+      --desk-soft: #cfcdc1;
+      --muted: #68675f;
+      --line: rgba(23, 23, 19, .42);
+      --accent: rgba(23, 23, 19, .055);
+      --shadow: rgba(31, 30, 24, .18);
+      --mark-bg: transparent;
+      --mark-fg: var(--ink);
+    }
+    html[data-theme="diner"] {
+      --ink: #7f1e18;
+      --paper: #fff8e8;
+      --desk: #d8a58e;
+      --desk-soft: #f0d4bd;
+      --muted: #9a4b3e;
+      --line: rgba(127, 30, 24, .42);
+      --accent: rgba(198, 54, 38, .08);
+      --shadow: rgba(89, 34, 24, .2);
+      --mark-bg: #bd2f23;
+      --mark-fg: #fff8e8;
+    }
+    html[data-theme="payroll"] {
+      --ink: #183d67;
+      --paper: #f4f9ff;
+      --desk: #aebdcb;
+      --desk-soft: #dbe5ee;
+      --muted: #53718f;
+      --line: rgba(24, 61, 103, .38);
+      --accent: rgba(40, 104, 166, .075);
+      --shadow: rgba(28, 52, 79, .18);
+      --mark-bg: #183d67;
+      --mark-fg: #f4f9ff;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background:
+        radial-gradient(circle at 20% 10%, rgba(255,255,255,.7), transparent 30%),
+        linear-gradient(135deg, var(--desk-soft), var(--desk));
+      color: var(--ink);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      transition: background .2s ease, color .2s ease;
+    }
+    .page {
+      width: min(100%, 540px);
+      margin: 0 auto;
+      padding: 30px 18px 54px;
+    }
+    .theme-switcher {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      margin-bottom: 22px;
+    }
+    .theme-button {
+      appearance: none;
+      border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--paper) 74%, transparent);
+      color: var(--ink);
+      cursor: pointer;
+      font: inherit;
+      font-size: 12px;
+      padding: 8px 12px;
+    }
+    .theme-button[aria-pressed="true"] {
+      background: var(--ink);
+      color: var(--paper);
+    }
+    .paper {
+      position: relative;
+      background:
+        repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 2%, transparent) 0, color-mix(in srgb, var(--ink) 2%, transparent) 1px, transparent 1px, transparent 4px),
+        var(--paper);
+      box-shadow: 0 22px 60px var(--shadow);
+      filter: contrast(.985);
+    }
+    .paper::before,
+    .paper::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 10px;
+      background: linear-gradient(135deg, transparent 7px, var(--paper) 0) 0 0 / 14px 14px repeat-x;
+    }
+    .paper::before { top: -9px; transform: rotate(180deg); }
+    .paper::after { bottom: -9px; }
+    .receipt { padding: 34px 28px 32px; }
+    .brand { text-align: center; }
+    .brand-mark {
+      display: inline-grid;
+      place-items: center;
+      width: 46px;
+      height: 46px;
+      margin-bottom: 12px;
+      border: 2px solid var(--ink);
+      border-radius: 50%;
+      background: var(--mark-bg);
+      color: var(--mark-fg);
+      font-size: 22px;
+      font-weight: 800;
+    }
+    h1 {
+      margin: 0;
+      font-size: clamp(22px, 7vw, 30px);
+      letter-spacing: .08em;
+    }
+    .subtitle {
+      margin: 9px 0 0;
+      color: var(--muted);
+      font-size: 12px;
+      letter-spacing: .12em;
+    }
+    .meta {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px 18px;
+      margin: 26px 0 16px;
+      font-size: 12px;
+    }
+    .meta div:nth-child(even) { text-align: right; }
+    .divider {
+      height: 1px;
+      margin: 18px 0;
+      border-top: 1px dashed var(--line);
+    }
+    .receipt-row {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 24px;
+      padding: 6px 0;
+      font-size: 14px;
+    }
+    .receipt-row span { color: var(--muted); }
+    .receipt-row strong { text-align: right; font-weight: 700; }
+    .receipt-row--emphasize {
+      margin: 3px -6px;
+      padding: 8px 6px;
+      background: var(--accent);
+    }
+    .verdict { text-align: center; }
+    .verdict h2 { margin: 0; font-size: 22px; letter-spacing: .04em; }
+    .review {
+      margin: 12px auto 0;
+      max-width: 30em;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+      font-size: 14px;
+      line-height: 1.7;
+    }
+    .salary {
+      padding: 10px 0 2px;
+      font-size: 14px;
+    }
+    .salary-line {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 18px;
+    }
+    .salary-line span { color: var(--muted); }
+    .salary strong { font-size: 28px; }
+    .salary strong small {
+      margin-left: 6px;
+      font-size: 12px;
+      color: var(--muted);
+    }
+    .barcode {
+      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;
+    }
+    .footer {
+      text-align: center;
+      font-size: 11px;
+      line-height: 1.65;
+      color: var(--muted);
+    }
+    .transfer-stub {
+      margin-top: 32px;
+      padding: 26px 24px 24px;
+    }
+    .transfer-heading { text-align: center; }
+    .transfer-heading h2 { margin: 0; font-size: 18px; letter-spacing: .08em; }
+    .transfer-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
+    .qr-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 18px;
+      margin-top: 20px;
+    }
+    .qr-item { text-align: center; }
+    .qr-frame {
+      display: grid;
+      place-items: center;
+      width: min(100%, 176px);
+      aspect-ratio: 1;
+      margin: 0 auto 10px;
+      padding: 10px;
+      border: 1px solid var(--line);
+      background: #fff;
+    }
+    .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; }
+    .mini-placeholder {
+      display: grid;
+      place-content: center;
+      width: 100%;
+      height: 100%;
+      border: 2px dashed #9a9a92;
+      color: #5f5f59;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+    }
+    .mini-placeholder span { font-size: 13px; }
+    .mini-placeholder strong { margin-top: 4px; font-size: 18px; }
+    .transfer-note {
+      margin: 18px 0 0;
+      padding-top: 14px;
+      border-top: 1px dashed var(--line);
+      color: var(--muted);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+      font-size: 11px;
+      line-height: 1.65;
+      text-align: center;
+    }
+    .privacy {
+      margin: 24px auto 0;
+      max-width: 440px;
+      color: color-mix(in srgb, var(--ink) 64%, transparent);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+      font-size: 12px;
+      line-height: 1.6;
+      text-align: center;
+    }
+    @media (max-width: 420px) {
+      .page { padding-inline: 10px; }
+      .receipt { padding-inline: 20px; }
+      .meta { grid-template-columns: 1fr; }
+      .meta div:nth-child(even) { text-align: left; }
+      .qr-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <nav class="theme-switcher" aria-label="${escapeHtml(copy.themeAria)}">
+      <button class="theme-button" type="button" data-theme-value="classic">${escapeHtml(copy.themes.classic)}</button>
+      <button class="theme-button" type="button" data-theme-value="diner">${escapeHtml(copy.themes.diner)}</button>
+      <button class="theme-button" type="button" data-theme-value="payroll">${escapeHtml(copy.themes.payroll)}</button>
+    </nav>
+
+    <article class="paper receipt" aria-label="${escapeHtml(copy.receiptAria)}">
+      <header class="brand">
+        <div class="brand-mark">C</div>
+        <h1>${escapeHtml(copy.receiptTitle)}</h1>
+        <p class="subtitle">CODEX WORK RECEIPT</p>
+      </header>
+
+      <section class="meta">
+        <div>${escapeHtml(copy.meta.date)}: ${escapeHtml(displayDate)}</div>
+        <div>${escapeHtml(copy.meta.hours)}: ${escapeHtml(businessHours)}</div>
+        <div>${escapeHtml(copy.meta.number)}: ${escapeHtml(receiptNumber)}</div>
+        <div>${escapeHtml(copy.meta.timezone)}: ${escapeHtml(timezone)}</div>
+      </section>
+
+      <div class="divider"></div>
+      <section>${rows}</section>
+      <div class="divider"></div>
+
+      <section class="verdict">
+        <h2>${escapeHtml(record.presentation.work_title)}</h2>
+        <p class="review">${escapeHtml(record.presentation.review)}</p>
+      </section>
+
+      <div class="divider"></div>
+      <section class="salary">
+        <div class="salary-line">
+          <span>${escapeHtml(compensation.label)}</span>
+          <strong>${escapeHtml(formatNumber(compensation.amount, locale))}<small>${escapeHtml(compensation.unit)}</small></strong>
+        </div>
+      </section>
+      <div class="barcode" aria-hidden="true"></div>
+      <footer class="footer">
+        <div>MODEL · ${escapeHtml(modelLabel)}</div>
+        <div>${escapeHtml(copy.footerThanks)}</div>
+      </footer>
+    </article>
+
+    <section class="paper transfer-stub" aria-label="${escapeHtml(copy.transferAria)}">
+      <header class="transfer-heading">
+        <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>
+        <div class="qr-item">
+          <div class="qr-frame"><img src="${dataQrDataUrl}" alt="${escapeHtml(copy.dataQrAlt)}"></div>
+          <strong>${escapeHtml(copy.importData)}</strong>
+          <span>${escapeHtml(copy.importDataHint)}</span>
+        </div>
+      </div>
+      <p class="transfer-note">${escapeHtml(copy.transferNote)}</p>
+    </section>
+
+    <p class="privacy">${escapeHtml(copy.privacy)}</p>
+  </main>
+  <script>
+    const themes = new Set(["classic", "diner", "payroll"]);
+    const buttons = [...document.querySelectorAll("[data-theme-value]")];
+    function applyTheme(theme) {
+      const selected = themes.has(theme) ? theme : "classic";
+      document.documentElement.dataset.theme = selected;
+      buttons.forEach((button) => button.setAttribute("aria-pressed", String(button.dataset.themeValue === selected)));
+      try { localStorage.setItem("codex-work-receipt-theme", selected); } catch {}
+    }
+    buttons.forEach((button) => button.addEventListener("click", () => applyTheme(button.dataset.themeValue)));
+    let savedTheme = null;
+    try { savedTheme = localStorage.getItem("codex-work-receipt-theme"); } catch {}
+    applyTheme(savedTheme || document.documentElement.dataset.theme);
+  </script>
+</body>
+</html>`;
+}

package/templates/README.md

@@ -0,0 +1,10 @@
+# Themes
+
+首批内置主题：
+
+- `classic`：经典热敏小票
+- `diner`：红白餐馆结账单
+- `payroll`：蓝色办公室工资条
+
+主题只改变 CSS 变量和少量装饰，不改变小票数据。
+