@subvalue/cli 0.1.4 → 0.1.6

package/dist/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,12 +325,19 @@ const rowHeight = (row            ) =>
         ? 46
         : row.accent
           ? 32
-          : 28;
+          : isTokenRow(row)
+            ? 24
+            : 28;
 export function drawReceipt(
   canvas                   ,
   model              ,
   theme                   = 'dark',
+  presentation                         = 'standard',
 )       {
+  // A public example needs larger print when viewed inside the dashboard preview.
+  // The paper, layout and export renderer remain shared with the local application.
+  const printSize = (size        ) =>
+    presentation === 'preview' ? Math.max(13, size * 1.12) : size;
   const light = theme === 'light';
   const ink = (color        ) =>
     light
@@ -288,6 +409,7 @@ export function drawReceipt(
     bold = false,
     maxWidth = width - 48,
   ) => {
+    size = printSize(size);
     c.font = `${bold ? '600 ' : ''}${size}px ${mono}`;
     while (c.measureText(value).width > maxWidth && size > 8) {
       size -= 0.5;
@@ -307,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');
@@ -325,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'
@@ -334,18 +463,37 @@ export function drawReceipt(
           : row.strong
             ? '#e1e2e4'
             : '#bdc0c6';
-    const valueSize = multiple ? 25 : row.accent ? 22 : row.strong ? 18 : 16;
-    c.font = `${valueSize}px ${mono}`;
+    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/dist/packages/ui/src/brand.js

@@ -2,6 +2,7 @@
 export const product = {
   name: 'SubValue',
   site: 'subvalue.dev',
+  repository: 'https://github.com/axelmtn/subvalue',
   exportBasename: 'subvalue-receipt',
 };
 // Typography remains separate from the neutral symbol and follows the display name.

package/dist/public/app.css

@@ -295,6 +295,35 @@ p {
   gap: 20px;
   margin-bottom: 22px;
 }
+.overview-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px 14px;
+  min-width: 0;
+}
+.selected-period {
+  color: var(--green);
+  font-size: 17px;
+  font-weight: 550;
+  letter-spacing: -0.3px;
+}
+.empty-history {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.6;
+  margin: 10px 0 16px;
+}
+@media (max-width: 760px) {
+  .overview-title {
+    flex-direction: column;
+    align-items: start;
+    gap: 5px;
+  }
+  .selected-period {
+    font-size: 15px;
+  }
+}
 .eyebrow {
   font: 9px var(--mono);
   letter-spacing: 1.7px;
@@ -2223,7 +2252,7 @@ dialog::backdrop {
   }
 }
 .billing-row {
-  grid-template-columns: 100px 145px minmax(0, 1fr);
+  grid-template-columns: 100px minmax(0, 1fr);
   gap: 16px;
   align-items: start;
 }
@@ -2242,7 +2271,7 @@ dialog::backdrop {
 .amount-field input[readonly] {
   color: var(--muted);
 }
-.subscription-fields.hidden {
+.billing-amount.hidden {
   display: none;
 }
 .compact-details a {
@@ -2290,3 +2319,182 @@ dialog {
   max-height: calc(100dvh - 32px);
   overflow-y: auto;
 }
+#expenses-dialog {
+  width: min(440px, calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+  overflow: auto;
+}
+.expenses-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.expenses-heading h2 {
+  margin: 0;
+  font-size: 18px;
+}
+.expenses-heading button {
+  font-size: 24px;
+}
+.expense-month {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 24px 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+#expenses-dialog .billing-row {
+  display: block;
+}
+#expenses-dialog .provider-setting-name {
+  display: none;
+}
+#expenses-dialog .subscription-fields {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 14px;
+}
+#expenses-dialog select {
+  width: 100%;
+}
+.mixed-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 12px;
+}
+.api-spend-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  font-size: 13px;
+}
+.expense-note {
+  color: var(--muted);
+  font-size: 12px;
+  margin: 20px 0;
+}
+.expense-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.expense-actions .button {
+  width: auto;
+}
+#expense-error {
+  color: var(--red);
+  font-size: 12px;
+}
+.subscription-fields {
+  flex-wrap: wrap;
+}
+.subscription-fields .mixed-field {
+  flex-basis: 100%;
+}
+.hidden {
+  display: none !important;
+}
+.provider-expenses-form {
+  border-top: 1px solid var(--border);
+  margin-top: 18px;
+  padding-top: 16px;
+}
+.provider-expense-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 40px;
+  margin: 14px 0 0;
+  padding: 10px 12px;
+  color: var(--green);
+  background: #37ec850c;
+  border: 1px solid #37ec8540;
+  border-radius: 4px;
+  font-size: 12px;
+  text-align: left;
+  line-height: 1.4;
+}
+.provider-expense-toggle:hover {
+  background: #37ec8518;
+  border-color: #37ec8580;
+}
+.provider-expense-toggle svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+.provider-expense-toggle[aria-expanded='true'] {
+  border-color: var(--green);
+}
+.provider-expenses-popover {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  width: min(350px, calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+  padding: 20px;
+  color: var(--text);
+  background: #14191e;
+  border: 1px solid #3a4249;
+  border-radius: 6px;
+  box-shadow: 0 18px 48px #0009;
+}
+.provider-expenses-popover .expenses-heading h2 {
+  font-size: 14px;
+}
+.provider-expenses-form .billing-row {
+  display: block;
+}
+.provider-expenses-form .provider-setting-name {
+  display: none;
+}
+.provider-expenses-form .subscription-fields {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 12px;
+}
+.provider-expenses-form select {
+  width: 100%;
+  min-width: 0;
+}
+.provider-expenses-form .mixed-field {
+  flex-basis: auto;
+}
+.provider-expenses-form .amount-field {
+  width: fit-content;
+  max-width: 100%;
+}
+.provider-expenses-form .api-spend-field .amount-field {
+  width: 130px;
+}
+.provider-expenses-form .expense-actions {
+  margin-top: 14px;
+}
+.provider-expenses-form small,
+.expense-period {
+  color: var(--muted);
+  font-size: 12px;
+}
+.billing-error {
+  color: var(--red);
+  font-size: 12px;
+}
+.settings-expenses {
+  margin: 12px 0 22px;
+  font-size: 12px;
+}
+.provider-grid {
+  align-items: stretch;
+}

package/dist/public/apps/web/src/landing.js

@@ -29,6 +29,7 @@ const example               = {
       records: 1,
       tokens: 20530000,
       tokensPartial: false,
+      tokenBreakdown: { input: 19230000, output: 1300000, cacheRead: 15000000 },
       apiEquivalent: 201.36,
       knownSubtotal: 201.36,
     },
@@ -38,6 +39,7 @@ const example               = {
       records: 1,
       tokens: 7840000,
       tokensPartial: false,
+      tokenBreakdown: { input: 440000, output: 400000, cacheRead: 7000000 },
       apiEquivalent: 86.06,
       knownSubtotal: 86.06,
     },
@@ -59,9 +61,15 @@ const example               = {
   confidence: 'HIGH',
   demo: true,
 };
+const exampleReceipt = receiptModel(example, new Date(2026, 10, 1, 9, 30));
 document.querySelector('#landing') .innerHTML = /* HTML */ `<header class="landing-nav">
-    <a class="brand" href="#"><span class="brand-mark">${productMark}</span>${productNameMarkup}</a
-    ><a class="github-link" href="#release">Install <span>↓</span></a>
+    <a class="brand" href="#"><span class="brand-mark">${productMark}</span>${productNameMarkup}</a>
+    <nav class="landing-links" aria-label="Site navigation">
+      <a class="install-link" href="#release">Install <span>↓</span></a>
+      <a class="github-link" href="${product.repository}" target="_blank" rel="noreferrer"
+        >GitHub <span>↗</span></a
+      >
+    </nav>
   </header>
   <main>
     <section class="hero">
@@ -81,7 +89,9 @@ document.querySelector('#landing') .innerHTML = /* HTML */ `<header class="landi
         </button>
       </div>
       <div class="trust-row">
-        <span>✓ Local</span><span>✓ Read-only</span><span>✓ No telemetry</span>
+        <span>✓ Local</span><span>✓ Read-only</span>
+        <a href="${product.repository}" target="_blank" rel="noreferrer">✓ Open source</a>
+        <span>✓ No telemetry</span>
       </div>
       <span class="release-note">Node.js 24.13+ · Windows · macOS · Linux</span>
     </section>
@@ -143,7 +153,10 @@ document.querySelector('#landing') .innerHTML = /* HTML */ `<header class="landi
             <canvas
               id="example-receipt"
               role="img"
-              aria-label="Illustrative ${product.name} receipt: API equivalent 287 dollars 42 cents, subscription 220 dollars, value 67 dollars 42 cents. Codex and Claude Code example data."
+              aria-label="Illustrative ${product.name} receipt. Codex and Claude Code example data. ${exampleReceipt.rows
+                .filter((row) => row.left)
+                .map((row) => row.left + ' ' + row.right)
+                .join('. ')}"
             ></canvas
             ><span>Export PNG ↓</span>
           </div>
@@ -181,7 +194,9 @@ document.querySelector('#landing') .innerHTML = /* HTML */ `<header class="landi
 await receiptFonts();
 drawReceipt(
   document.querySelector                   ('#example-receipt') ,
-  receiptModel(example, new Date(2026, 10, 1, 9, 30)),
+  exampleReceipt,
+  'dark',
+  'preview',
 );
 document.querySelectorAll                   ('.copy-command').forEach((b) =>
   b.addEventListener('click', async () => {