codex-work-receipt 0.3.0 → 0.5.0

package/src/parsers/codex.mjs

@@ -2,6 +2,8 @@ import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
 
+import { rowDate } from "../lib/time.mjs";
+
 function walkJsonlFiles(directory, accumulator = []) {
   if (!fs.existsSync(directory)) return accumulator;
   for (const entry of fs.readdirSync(directory, { withFileTypes: true })) {
@@ -26,26 +28,90 @@ function readJsonl(filePath) {
   return rows;
 }
 
-export function loadCodexSessions(mode) {
+function sessionFromFile(file) {
+  const rows = readJsonl(file.filePath);
+  const meta = rows.find((row) => row.type === "session_meta")?.payload || {};
+  const timestamps = rows.map(rowDate).filter(Boolean).sort((left, right) => left - right);
+  const fallbackDate = new Date(file.modifiedAt);
+  return {
+    rows,
+    filePath: file.filePath,
+    modifiedAt: file.modifiedAt,
+    sessionId: meta.session_id || meta.id || path.basename(file.filePath, ".jsonl"),
+    startAt: timestamps[0] || fallbackDate,
+    endAt: timestamps.at(-1) || fallbackDate,
+  };
+}
+
+function codexSessionFiles() {
   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 会话记录`);
+  return files;
+}
+
+function calendarCandidates(files, startDate) {
+  if (!startDate) return files;
+  const approximateStart = Date.parse(`${startDate}T00:00:00.000Z`) - 48 * 60 * 60 * 1000;
+  return files.filter((file) => file.modifiedAt >= approximateStart);
+}
+
+export function loadCodexSessions(range) {
+  const files = codexSessionFiles();
+  let candidates = files;
 
-  const selected = mode === "latest"
-    ? files.slice(0, 1)
-    : files.filter((file) => file.modifiedAt >= Date.now() - 72 * 60 * 60 * 1000);
+  if (range.scope === "latest") {
+    candidates = files.slice(0, 40);
+  } else if (range.scope === "session" && range.sessionId) {
+    const filenameMatches = files.filter((file) => path.basename(file.filePath).includes(range.sessionId));
+    candidates = filenameMatches.length ? filenameMatches : files;
+  } else {
+    candidates = calendarCandidates(files, range.startDate);
+  }
+
+  const sessions = candidates
+    .map(sessionFromFile)
+    .sort((left, right) => right.endAt - left.endAt);
+
+  if (range.scope === "latest") return sessions.slice(0, 1);
+  if (range.scope === "session") {
+    const selected = sessions.find((session) => session.sessionId === range.sessionId);
+    if (!selected) throw new Error(`没有找到指定的 Codex 会话：${range.sessionId}`);
+    return [selected];
+  }
+  return sessions;
+}
+
+export function listRecentCodexSessions(limit = 10) {
+  const sessions = codexSessionFiles()
+    .slice(0, Math.max(40, limit * 3))
+    .map(sessionFromFile)
+    .filter((session) => session.rows.length)
+    .sort((left, right) => right.endAt - left.endAt)
+    .slice(0, limit);
 
-  return selected.map((file) => {
-    const rows = readJsonl(file.filePath);
-    const meta = rows.find((row) => row.type === "session_meta")?.payload || {};
+  return sessions.map((session) => {
+    let completedTurns = 0;
+    let toolCalls = 0;
+    let model = null;
+    for (const row of session.rows) {
+      if (row.type === "turn_context" && row.payload?.model) model = row.payload.model;
+      if (row.type === "event_msg" && row.payload?.type === "task_complete") completedTurns += 1;
+      if (
+        row.type === "response_item" &&
+        (row.payload?.type === "custom_tool_call" || row.payload?.type === "function_call")
+      ) toolCalls += 1;
+    }
     return {
-      rows,
-      sessionId: meta.session_id || meta.id || path.basename(file.filePath, ".jsonl"),
+      sessionId: session.sessionId,
+      startAt: session.startAt,
+      endAt: session.endAt,
+      completedTurns,
+      toolCalls,
+      model,
     };
   });
 }
-

package/src/renderers/html.mjs

@@ -1,6 +1,16 @@
+import fs from "node:fs";
+import { createRequire } from "node:module";
+
 import { formatDate, formatDuration, formatNumber, formatTime } from "../lib/time.mjs";
 import { buildCompensation, DEFAULT_LOCALE, getReceiptCopy } from "../core/presentation.mjs";
 
+const require = createRequire(import.meta.url);
+const DOM_TO_IMAGE_SOURCE = fs.readFileSync(require.resolve("dom-to-image-more"), "utf8");
+
+function inlineScript(value) {
+  return String(value).replaceAll("</script", "<\\/script");
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")
@@ -20,6 +30,12 @@ function formatCount(value, units, locale) {
   return `${formatNumber(amount, locale)} ${unit}`;
 }
 
+function formatDateKey(value, locale) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value || ""));
+  if (!match) return String(value || "");
+  return locale === "en" ? `${match[2]}/${match[3]}/${match[1]}` : `${match[1]}/${match[2]}/${match[3]}`;
+}
+
 export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = null }) {
   const locale = record.locale || DEFAULT_LOCALE;
   const copy = getReceiptCopy(locale);
@@ -27,8 +43,18 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
   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 rangeStartDate = record.period.range_start_date || formatDateKey(record.period.start_at.slice(0, 10), "zh-CN").replaceAll("/", "-");
+  const rangeEndDate = record.period.range_end_date || formatDateKey(record.period.end_at.slice(0, 10), "zh-CN").replaceAll("/", "-");
+  const isCalendarScope = new Set(["today", "last-7-days", "this-week"]).has(record.source.scope);
+  const spansMultipleDates = rangeStartDate !== rangeEndDate;
   const scopeLabel = copy.scope[record.source.scope] || copy.scope.latest;
+  const dateRange = spansMultipleDates
+    ? `${formatDateKey(rangeStartDate, locale)}—${formatDateKey(rangeEndDate, locale)}`
+    : formatDateKey(rangeEndDate, locale);
+  const businessPeriod = isCalendarScope
+    ? `${dateRange} · ${scopeLabel}`
+    : `${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 compensation = record.presentation.compensation || buildCompensation(record.source.scope, 0, locale);
@@ -36,6 +62,13 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
     minimumFractionDigits: 1,
     maximumFractionDigits: 1,
   }).format(record.stats.average_first_token_ms / 1000);
+  const exportConfig = JSON.stringify({
+    idleLabel: copy.exportImage,
+    busyLabel: copy.exportingImage,
+    successLabel: copy.exportSuccess,
+    errorLabel: copy.exportError,
+    fileBase: `codex-work-receipt-${record.source.scope}-${spansMultipleDates ? `${rangeStartDate}-to-${rangeEndDate}` : `${rangeEndDate}-${record.id.slice(4, 12)}`}`,
+  }).replaceAll("<", "\\u003c");
   const rows = [
     receiptRow(copy.rows.scope, scopeLabel),
     receiptRow(copy.rows.sessions, formatCount(record.stats.session_count, copy.units.sessions, locale)),
@@ -63,39 +96,39 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
     :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);
+      --paper: #ffffff;
+      --desk: #eeeae3;
+      --desk-soft: #f6f3ee;
+      --muted: #6d6c65;
+      --line: #aaa8a0;
+      --accent: #f3f2ed;
       --shadow: rgba(31, 30, 24, .18);
-      --mark-bg: transparent;
-      --mark-fg: var(--ink);
+      --mark-bg: #ffffff;
+      --mark-fg: #171713;
     }
     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;
+      --ink: #a7475d;
+      --paper: #f7dde3;
+      --desk: #f2ece8;
+      --desk-soft: #faf6f3;
+      --muted: #b46b7b;
+      --line: #d29aa7;
+      --accent: #f0cdd6;
+      --shadow: rgba(116, 58, 72, .18);
+      --mark-bg: #f7dde3;
+      --mark-fg: #a7475d;
     }
     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;
+      --ink: #ffe077;
+      --paper: #66742f;
+      --desk: #edebe3;
+      --desk-soft: #f7f5ef;
+      --muted: #e8cf74;
+      --line: #9aa35d;
+      --accent: #5c682b;
+      --shadow: rgba(48, 57, 19, .24);
+      --mark-bg: #66742f;
+      --mark-fg: #ffe077;
     }
     * { box-sizing: border-box; }
     body {
@@ -113,11 +146,17 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
       margin: 0 auto;
       padding: 30px 18px 54px;
     }
+    .toolbar {
+      display: grid;
+      justify-items: center;
+      gap: 12px;
+      margin-bottom: 22px;
+    }
     .theme-switcher {
       display: flex;
+      flex-wrap: wrap;
       justify-content: center;
       gap: 8px;
-      margin-bottom: 22px;
     }
     .theme-button {
       appearance: none;
@@ -134,6 +173,35 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
       background: var(--ink);
       color: var(--paper);
     }
+    .export-actions {
+      display: grid;
+      justify-items: center;
+      gap: 6px;
+    }
+    .export-button {
+      appearance: none;
+      min-width: 168px;
+      border: 1px solid var(--ink);
+      border-radius: 999px;
+      background: var(--ink);
+      color: var(--paper);
+      cursor: pointer;
+      font: inherit;
+      font-size: 13px;
+      font-weight: 700;
+      padding: 10px 18px;
+      transition: opacity .15s ease, transform .15s ease;
+    }
+    .export-button:hover { transform: translateY(-1px); }
+    .export-button:disabled { cursor: wait; opacity: .62; transform: none; }
+    .export-status {
+      min-height: 16px;
+      color: var(--muted);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+      font-size: 11px;
+    }
+    .export-status[data-state="error"] { color: #b33a2e; }
+    .export-sheet { padding: 10px 0; }
     .paper {
       position: relative;
       background:
@@ -314,13 +382,20 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
 </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>
+    <div class="toolbar">
+      <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>
+      <div class="export-actions">
+        <button class="export-button" id="save-receipt-image" type="button">${escapeHtml(copy.exportImage)}</button>
+        <span class="export-status" id="export-status" role="status" aria-live="polite"></span>
+      </div>
+    </div>
 
-    <article class="paper receipt" aria-label="${escapeHtml(copy.receiptAria)}">
+    <div class="export-sheet" id="receipt-export">
+      <article class="paper receipt" aria-label="${escapeHtml(copy.receiptAria)}">
       <header class="brand">
         <div class="brand-mark">C</div>
         <h1>${escapeHtml(copy.receiptTitle)}</h1>
@@ -329,7 +404,7 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
 
       <section class="meta">
         <div>${escapeHtml(copy.meta.date)}: ${escapeHtml(displayDate)}</div>
-        <div>${escapeHtml(copy.meta.hours)}: ${escapeHtml(businessHours)}</div>
+        <div>${escapeHtml(businessPeriodLabel)}: ${escapeHtml(businessPeriod)}</div>
         <div>${escapeHtml(copy.meta.number)}: ${escapeHtml(receiptNumber)}</div>
         <div>${escapeHtml(copy.meta.timezone)}: ${escapeHtml(timezone)}</div>
       </section>
@@ -355,9 +430,9 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
         <div>MODEL · ${escapeHtml(modelLabel)}</div>
         <div>${escapeHtml(copy.footerThanks)}</div>
       </footer>
-    </article>
+      </article>
 
-    <section class="paper transfer-stub" aria-label="${escapeHtml(copy.transferAria)}">
+      <section class="paper transfer-stub" aria-label="${escapeHtml(copy.transferAria)}">
       <header class="transfer-heading">
         <h2>${escapeHtml(copy.transferTitle)}</h2>
         <p>${escapeHtml(copy.transferDescription)}</p>
@@ -375,11 +450,14 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
         </div>
       </div>
       <p class="transfer-note">${escapeHtml(copy.transferNote)}</p>
-    </section>
+      </section>
+    </div>
 
     <p class="privacy">${escapeHtml(copy.privacy)}</p>
   </main>
+  <script>${inlineScript(DOM_TO_IMAGE_SOURCE)}</script>
   <script>
+    const exportConfig = ${exportConfig};
     const themes = new Set(["classic", "diner", "payroll"]);
     const buttons = [...document.querySelectorAll("[data-theme-value]")];
     function applyTheme(theme) {
@@ -392,6 +470,79 @@ export function renderHtml({ record, dataQrDataUrl, miniProgramCodeDataUrl = nul
     let savedTheme = null;
     try { savedTheme = localStorage.getItem("codex-work-receipt-theme"); } catch {}
     applyTheme(savedTheme || document.documentElement.dataset.theme);
+
+    const exportButton = document.getElementById("save-receipt-image");
+    const exportStatus = document.getElementById("export-status");
+    const exportNode = document.getElementById("receipt-export");
+
+    function setExportStatus(message, state = "") {
+      exportStatus.textContent = message;
+      exportStatus.dataset.state = state;
+    }
+
+    function waitForImages(node) {
+      return Promise.all([...node.querySelectorAll("img")].map((image) => {
+        if (image.complete && image.naturalWidth > 0) return Promise.resolve();
+        return new Promise((resolve, reject) => {
+          image.addEventListener("load", resolve, { once: true });
+          image.addEventListener("error", reject, { once: true });
+        });
+      }));
+    }
+
+    function downloadImage(dataUrl, filename) {
+      const link = document.createElement("a");
+      link.href = dataUrl;
+      link.download = filename;
+      link.rel = "noopener";
+      document.body.appendChild(link);
+      if (typeof link.download === "string") link.click();
+      else window.open(dataUrl, "_blank", "noopener");
+      link.remove();
+    }
+
+    exportButton.addEventListener("click", async () => {
+      if (exportButton.disabled) return;
+      exportButton.disabled = true;
+      exportButton.textContent = exportConfig.busyLabel;
+      setExportStatus("");
+
+      try {
+        if (document.fonts?.ready) await document.fonts.ready;
+        await waitForImages(exportNode);
+        const width = Math.ceil(exportNode.scrollWidth);
+        const height = Math.ceil(exportNode.scrollHeight);
+        const scale = Math.max(2, Math.min(3, 1500 / Math.max(1, width)));
+        const paperColor = getComputedStyle(document.documentElement).getPropertyValue("--paper").trim() || "#ffffff";
+        const dataUrl = await domtoimage.toPng(exportNode, {
+          width,
+          height,
+          scale,
+          pixelRatio: 1,
+          bgcolor: paperColor,
+          cacheBust: false,
+          style: { background: paperColor },
+          onclone(clone) {
+            clone.style.background = paperColor;
+            clone.querySelectorAll(".paper").forEach((paper) => {
+              paper.style.boxShadow = "none";
+            });
+          },
+          logger: {},
+        });
+        const theme = themes.has(document.documentElement.dataset.theme)
+          ? document.documentElement.dataset.theme
+          : "classic";
+        downloadImage(dataUrl, exportConfig.fileBase + "-" + theme + ".png");
+        setExportStatus(exportConfig.successLabel, "success");
+      } catch (error) {
+        console.error(error);
+        setExportStatus(exportConfig.errorLabel, "error");
+      } finally {
+        exportButton.disabled = false;
+        exportButton.textContent = exportConfig.idleLabel;
+      }
+    });
   </script>
 </body>
 </html>`;

package/templates/README.md

@@ -2,9 +2,8 @@
 
 首批内置主题：
 
-- `classic`：经典热敏小票
-- `diner`：红白餐馆结账单
-- `payroll`：蓝色办公室工资条
+- `classic`：经典白票
+- `diner`：复古粉票
+- `payroll`：夜班绿票
 
 主题只改变 CSS 变量和少量装饰，不改变小票数据。
-