@subvalue/cli 0.1.5 → 0.1.6

package/dist/public/packages/core/src/billing.js

@@ -0,0 +1,112 @@
+                                                                           
+                                                           
+import { fullCalendarMonths, shiftCalendarMonth } from './calendar.js';
+
+function civilDate(date      )         {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+export function billingPeriodKey(range       )         {
+  return (
+    (range.calendarFrom ?? civilDate(new Date(range.from))) +
+    ':' +
+    (range.calendarTo ?? civilDate(new Date(Date.parse(range.until) - 1)))
+  );
+}
+export function withPeriodBilling(
+  settings          ,
+  provider          ,
+  range       ,
+  billing                ,
+)           {
+  const next = structuredClone(settings),
+    exactKey = billingPeriodKey(range),
+    monthly = fullCalendarMonths(range) === 1,
+    key = monthly ? exactKey.slice(0, 7) : exactKey,
+    declarations = monthly ? (next.monthlyBilling ??= {}) : (next.periodBilling ??= {});
+  // A rolling range can share dates with a calendar month. Editing that month
+  // supersedes an earlier exact-date declaration instead of leaving a stale override.
+  if (monthly && next.periodBilling?.[exactKey]?.[provider]) {
+    delete next.periodBilling[exactKey][provider];
+    if (!Object.keys(next.periodBilling[exactKey]).length) delete next.periodBilling[exactKey];
+  }
+  declarations[key] ??= {};
+  if (billing) declarations[key][provider] = billing;
+  else delete declarations[key][provider];
+  if (!Object.keys(declarations[key]).length) delete declarations[key];
+  return next;
+}
+export function billingForSelection(settings          , provider          , range       )          {
+  const exact = settings.periodBilling?.[billingPeriodKey(range)]?.[provider];
+  if (exact) return exact;
+  if (fullCalendarMonths(range) === 1)
+    return billingForMonth(settings, provider, billingPeriodKey(range).slice(0, 7));
+  return billingForMonth({ ...settings, monthlyBilling: undefined }, provider, '');
+}
+
+/** Keep the dashboard action limited to mixed billing or a second provider without a plan. */
+export function showExpenseAction(
+  provider                 ,
+  providers                   ,
+)          {
+  if (!provider.records) return false;
+  if (provider.mode === 'MIXED') return true;
+  return (
+    (provider.mode === 'API' ||
+      provider.mode === 'NO_SUBSCRIPTION' ||
+      provider.mode === 'UNKNOWN') &&
+    providers.some(
+      (other) =>
+        other.provider !== provider.provider &&
+        other.records > 0 &&
+        (other.mode === 'SUBSCRIPTION' || other.mode === 'MIXED') &&
+        (other.monthly != null || (other.comparison.subscription ?? 0) > 0),
+    )
+  );
+}
+
+/** A default is a user preference, not evidence of how a historical request was billed. */
+export function billingForMonth(settings          , provider          , month        )          {
+  const saved = settings.monthlyBilling?.[month]?.[provider] ?? settings.billing[provider];
+  return {
+    ...saved,
+    mode: saved.mode === 'UNKNOWN' || saved.mode === 'NO_SUBSCRIPTION' ? 'API' : saved.mode,
+  };
+}
+
+export function billingForRange(settings          , provider          , range       ) {
+  const count = fullCalendarMonths(range);
+  const exact = settings.periodBilling?.[billingPeriodKey(range)]?.[provider];
+  const start = new Date(range.from);
+  const first =
+    range.calendarFrom?.slice(0, 7) ??
+    `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, '0')}`;
+  const months = Array.from(
+    { length: count ?? 1 },
+    (_, index) => exact ?? billingForMonth(settings, provider, shiftCalendarMonth(first, index) ),
+  );
+  const mode              = months.every((b) => b.mode === months[0].mode)
+    ? months[0].mode
+    : 'MIXED';
+  const subscriptionKnown = months.every((b) => b.mode === 'API' || b.monthly !== null);
+  const apiKnown = months.every((b) => b.mode === 'SUBSCRIPTION' || b.apiSpend != null);
+  const subscription =
+    count !== null && subscriptionKnown
+      ? months.reduce((total, b) => total + (b.mode === 'API' ? 0 : b.monthly ), 0)
+      : null;
+  const apiSpend =
+    count !== null && apiKnown
+      ? exact
+        ? exact.mode === 'SUBSCRIPTION'
+          ? 0
+          : exact.apiSpend 
+        : months.reduce((total, b) => total + (b.mode === 'SUBSCRIPTION' ? 0 : b.apiSpend ), 0)
+      : null;
+  return {
+    mode,
+    monthly: months.length === 1 ? months[0].monthly : null,
+    subscription,
+    apiSpend,
+    paid: subscription !== null && apiSpend !== null ? subscription + apiSpend : null,
+    needsBilling: !subscriptionKnown || !apiKnown,
+  };
+}

package/dist/public/packages/receipt/src/index.js

@@ -1,10 +1,11 @@
                                                                                       
+                                                        
 import { fullCalendarMonths } from '../../core/src/calendar.js';
 import { formatPricingCoverage } from '../../core/src/coverage.js';
-import { product } from '../../ui/src/brand.js';
+import { product, wordmarkSvg } from '../../ui/src/brand.js';
 /** Only public, aggregated fields needed by the receipt and its example. */
                                                                                                 
-                  
+                   
                     
                 
                
@@ -14,7 +15,8 @@ import { product } from '../../ui/src/brand.js';
                       
                      
                      
-      
+     
+                                                             
                                                                                                     
   
                              
@@ -37,23 +39,67 @@ export const money = (n               , signed = false)         =>
     ? 'Unavailable'
     : `${signed && n >= 0 ? '+' : ''}${new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n)}`;
 /** Compare only the displayed priced amount; preserve uncertainty and billing eligibility. */
-export function comparisonForDisplay(s              )             {
+                                                       
+                                                                              
+                    
+                               
+ 
+export function comparisonForDisplay(s              )                    {
   const comparison = s.total.comparison,
     amount = s.total.apiEquivalent ?? s.total.knownSubtotal;
   if (fullCalendarMonths(s.range) === null)
     return {
       ...comparison,
       subscription: null,
+      apiSpend: null,
+      paid: null,
       value: null,
       roi: null,
       breakEven: null,
       outcome: 'neutral',
+      scope: [],
+      apiEquivalent: null,
     };
-  if (amount === null || comparison.subscription === null) return comparison;
+  const paidFor = (p                                   ) =>
+    p.comparison?.paid !== undefined
+      ? p.comparison.paid
+      : p.mode === 'SUBSCRIPTION'
+        ? (p.comparison?.subscription ?? null)
+        : null;
+  const active = s.providers.filter((p) => p.records > 0),
+    included = active.filter((p) => paidFor(p) !== null);
+  if (included.length > 0 && included.length < active.length) {
+    const subscription = included.reduce((n, p) => n + (p.comparison?.subscription ?? 0), 0),
+      apiSpend = included.reduce((n, p) => n + (p.comparison?.apiSpend ?? 0), 0),
+      paid = included.reduce((n, p) => n + paidFor(p) , 0),
+      priced = included.map((p) => p.apiEquivalent ?? p.knownSubtotal),
+      scopedAmount = priced.every((cost) => cost !== null)
+        ? priced.reduce        ((n, cost) => n + cost , 0)
+        : null,
+      certain = !s.historyPartial && included.every((p) => p.apiEquivalent !== null);
+    return {
+      subscription,
+      apiSpend,
+      paid,
+      value: scopedAmount === null ? null : scopedAmount - paid,
+      roi: scopedAmount === null || paid <= 0 ? null : scopedAmount / paid,
+      outcome: certain && included.length === 1 ? included[0].comparison .outcome : 'neutral',
+      breakEven: certain && included.length === 1 ? included[0].comparison .breakEven : null,
+      reason: 'Providers with declared expenses only',
+      scope: included.map((p) => p.provider),
+      apiEquivalent: scopedAmount,
+    };
+  }
+  const paid = comparison.paid === undefined ? comparison.subscription : comparison.paid;
+  if (amount === null || paid === null)
+    return { ...comparison, paid, scope: [], apiEquivalent: amount };
   return {
     ...comparison,
-    value: comparison.value ?? amount - comparison.subscription,
-    roi: comparison.roi ?? (comparison.subscription > 0 ? amount / comparison.subscription : null),
+    paid,
+    value: comparison.value ?? amount - paid,
+    roi: comparison.roi ?? (paid > 0 ? amount / paid : null),
+    scope: [],
+    apiEquivalent: amount,
   };
 }
 export function receiptModel(s              , generatedAt = new Date())               {
@@ -86,12 +132,33 @@ export function receiptModel(s              , generatedAt = new Date())
     strong: true,
   });
   const comp = comparisonForDisplay(s);
-  if (comp.subscription !== null)
+  if (comp.scope.length)
+    rows.push(
+      { left: '', right: '' },
+      {
+        left:
+          comp.scope
+            .map((provider) => (provider === 'codex' ? 'CODEX' : 'CLAUDE CODE'))
+            .join(' + ') + ' COMPARISON',
+        right: '',
+        strong: true,
+      },
+      {
+        left: 'API Equivalent',
+        right: comp.apiEquivalent === null ? '—' : money(comp.apiEquivalent),
+      },
+    );
+  if (comp.subscription != null && comp.subscription > 0)
     rows.push({ left: 'Subscription Cost', right: money(comp.subscription) });
+  if (comp.apiSpend != null && (comp.apiSpend > 0 || comp.subscription === 0)) {
+    rows.push({ left: 'API Paid', right: money(comp.apiSpend) });
+    if (comp.subscription != null && comp.subscription > 0)
+      rows.push({ left: 'Total Paid', right: money(comp.paid ?? null), strong: true });
+  }
   const value = comp.value;
   if (value !== null)
     rows.push({
-      left: 'You Saved',
+      left: 'Total Saved',
       right: money(value, true),
       accent: value >= 0 ? 'positive' : 'negative',
       strong: true,
@@ -179,8 +246,53 @@ export async function receiptFonts()                {
     await Promise.all([
       document.fonts.load('14px "Plex Mono"'),
       document.fonts.load('600 14px "Plex Mono"'),
+      receiptBrandAssets(document),
     ]);
 }
+// Decode the same bundled product marks used by the dashboard before drawing.
+// Canvas previews and exported PNGs therefore include identical local artwork.
+const brandAssets = new WeakMap                                                       ();
+const decodedBrands = new WeakMap                                              ();
+const decodedWordmarks = new WeakMap                                                      ();
+function receiptBrandAssets(document          )                                              {
+  let assets = brandAssets.get(document);
+  if (!assets) {
+    assets = Promise.all(
+      ['codex-outline.svg', 'claude-code-clawd.svg'].map(async (file) => {
+        const image = document.createElement('img');
+        image.src = `/brands/${file}`;
+        await image.decode();
+        return image;
+      }),
+    ).then(async ([codex, claude]) => {
+      const svg = wordmarkSvg();
+      if (svg) {
+        const dimensions = /viewBox="0 0 (\d+) (\d+)"/.exec(svg) ;
+        const images = await Promise.all(
+          (['dark', 'light']         ).map(async (theme) => {
+            const image = document.createElement('img');
+            const artwork = svg
+              .replace('<svg ', `<svg width="${dimensions[1]}" height="${dimensions[2]}" `)
+              .replace('fill="currentColor"', `fill="${theme === 'dark' ? '#eef2f4' : '#22272d'}"`)
+              .replaceAll(
+                'class="brand-name-accent"',
+                `fill="${theme === 'dark' ? '#37ec85' : '#137744'}"`,
+              );
+            image.src = 'data:image/svg+xml,' + encodeURIComponent(artwork);
+            await image.decode();
+            return image;
+          }),
+        );
+        decodedWordmarks.set(document, { dark: images[0], light: images[1] });
+      }
+      const marks = { codex, claude };
+      decodedBrands.set(document, marks);
+      return marks;
+    });
+    brandAssets.set(document, assets);
+  }
+  return assets;
+}
 const paperTextures = new WeakMap                             ();
 function paperTexture(canvas                   )                    {
   const document = canvas.ownerDocument;
@@ -202,6 +314,8 @@ function paperTexture(canvas                   )                    {
   paperTextures.set(document, texture);
   return texture;
 }
+const isTokenRow = (row            ) =>
+  ['Input Tokens', 'Output Tokens', 'Cache Reads', 'Tokens', 'Known Tokens'].includes(row.left);
 const rowHeight = (row            ) =>
   !row.left && !row.right
     ? 34
@@ -211,7 +325,9 @@ const rowHeight = (row            ) =>
         ? 46
         : row.accent
           ? 32
-          : 28;
+          : isTokenRow(row)
+            ? 24
+            : 28;
 export function drawReceipt(
   canvas                   ,
   model              ,
@@ -313,7 +429,13 @@ export function drawReceipt(
     c.stroke();
     c.setLineDash([]);
   };
-  text(product.name, width / 2, 64, 29, '#f0f0ef', 'center');
+  const wordmark = decodedWordmarks.get(canvas.ownerDocument)?.[theme];
+  if (wordmark) {
+    // Compact, centered lettering only; no symbol or terminal cursor on the paper.
+    const logoWidth = 156,
+      logoHeight = logoWidth * (wordmark.naturalHeight / wordmark.naturalWidth);
+    c.drawImage(wordmark, (width - logoWidth) / 2, 64 - logoHeight, logoWidth, logoHeight);
+  } else text(product.name, width / 2, 64, 29, '#f0f0ef', 'center');
   text('USAGE RECEIPT', width / 2, 92, 13, '#b6b8bd', 'center');
   if (model.demo) text('EXAMPLE DATA', width / 2, 112, 10, '#a3a5a9', 'center');
   text('Period', left, 137, 12.5, '#b4b5b9');
@@ -331,7 +453,8 @@ export function drawReceipt(
     }
     const provider = !row.right,
       multiple = row.left === 'VALUE MULTIPLE';
-    const label = provider ? (row.left === 'CODEX' ? 'Codex' : 'Claude Code') : row.left;
+    const label =
+      row.left === 'CODEX' ? 'Codex' : row.left === 'CLAUDE CODE' ? 'Claude Code' : row.left;
     const color =
       row.accent === 'positive'
         ? '#37ec85'
@@ -340,18 +463,37 @@ export function drawReceipt(
           : row.strong
             ? '#e1e2e4'
             : '#bdc0c6';
-    const valueSize = multiple ? 25 : row.accent ? 22 : row.strong ? 18 : 16;
+    const tokenRow = isTokenRow(row);
+    const valueSize = multiple ? 25 : row.accent ? 22 : row.strong ? 18 : tokenRow ? 13 : 16;
     c.font = `${printSize(valueSize)}px ${mono}`;
     const valueWidth = c.measureText(row.right).width;
+    const brand = row.left === 'CODEX' ? 'codex' : row.left === 'CLAUDE CODE' ? 'claude' : null;
+    const mark = brand && decodedBrands.get(canvas.ownerDocument)?.[brand];
+    let labelLeft = left;
+    if (mark) {
+      const size = 22;
+      const markHeight = size * (mark.naturalHeight / mark.naturalWidth);
+      if (brand === 'codex') {
+        const tinted = canvas.ownerDocument.createElement('canvas');
+        tinted.width = tinted.height = size * scale;
+        const context = tinted.getContext('2d') ;
+        context.drawImage(mark, 0, 0, tinted.width, tinted.height);
+        context.globalCompositeOperation = 'source-in';
+        context.fillStyle = ink('#e1e2e4');
+        context.fillRect(0, 0, tinted.width, tinted.height);
+        c.drawImage(tinted, left, y - 17, size, size);
+      } else c.drawImage(mark, left, y - 14, size, markHeight);
+      labelLeft += size + 8;
+    }
     text(
       label,
-      left,
+      labelLeft,
       y,
-      multiple ? 17 : provider ? 17 : row.strong ? 14 : 14,
+      multiple ? 17 : provider ? 17 : tokenRow ? 12 : 14,
       multiple ? '#e1e2e4' : color,
       'left',
       provider,
-      provider ? width - 48 : width - 62 - valueWidth,
+      provider ? right - labelLeft : width - 62 - valueWidth,
     );
     text(row.right, right, y, valueSize, row.accent ? color : '#e3e4e7', 'right', row.strong, 160);
     y += step;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@subvalue/cli",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Local, read-only Codex and Claude Code API-equivalent usage dashboard",
   "type": "module",
   "license": "MIT",