@subvalue/cli 0.1.4 → 0.1.5

package/PRE_RELEASE.md

@@ -20,7 +20,7 @@ The first command checks detection without reading session contents. The second
 ## Check the app
 
 1. Confirm the detected providers. A detected provider may have no usage in the selected period.
-2. Enter your billing mode and subscription amount when needed. They are declarations, never inferred from credentials.
+2. Choose your subscription plan or **No subscription** for each provider. A custom amount is also available. These are declarations, never inferred from credentials.
 3. Check Overview, 7D/30D/Month, Receipt and Settings. Pricing coverage describes imported usage, not every request ever made.
 4. Export PNG. Check readable amounts and the absence of project names, paths, prompts and session IDs.
 5. Use **Refresh usage** at the top of Overview after new activity. It updates local metadata without restarting the app. Period controls only filter cached data.

package/README.md

@@ -42,7 +42,7 @@ npm run demo
 - **Receipt:** local canvas preview and PNG export of the exact same pixels. No projects, paths, requests or sessions in exports.
 - **Settings:** Sources, Billing, USD, Privacy / data. Inactive providers stay here, with optional manual inclusion.
 
-First run shows detected history, then asks how each provider was used before rendering results. Subscription users can select a plan or enter a custom USD amount. API, mixed usage and an explicit “Set up later” choice never imply a subscription.
+First run shows detected history, then offers subscription plans directly for each provider with imported usage. Choose a plan, a custom USD amount, or **No subscription** independently for Codex and Claude Code. No subscription requires no amount and never implies API billing. **Set up later** leaves billing unknown.
 
 Month opens a floating calendar-month picker (including historical months). Previous/next arrows move by one calendar month, seven or thirty days for rolling presets, or the selected custom duration. Comparisons use the full declared monthly price for each complete calendar month selected. The current month is marked In progress. 7D, 30D and partial custom ranges show API-equivalent usage without subscription comparisons. Custom ranges covering whole calendar months compare the corresponding number of monthly charges. Amounts and API prices are USD; no invented exchange rates. Billing declarations do not overwrite historical records or prove their original billing mode. Settings offers bundled, verified ChatGPT/Claude plan presets and a custom amount. Annual presets retain the exact annual price divided by 12, with per-seat plans labeled.
 
@@ -68,7 +68,7 @@ Codex excludes inherited ordinal prefixes, uses cumulative deltas, suppresses re
 
 The versioned catalog supports mappings with confidence and primary-source provenance, half-open effective intervals, cache reads/writes, Claude cache durations, and long-context bands. Rates and release evidence were checked against [OpenAI pricing](https://developers.openai.com/api/docs/pricing) and [Claude pricing](https://platform.claude.com/docs/en/about-claude/pricing) on **2026-10-05**. Historical versions include the July 30 Luna/Terra reductions and August 21 Sol promotion. Exact public GPT-5.6/6 and Claude identifiers carry mapping provenance; long-context rates use the verified 272k request threshold. New-model launch days use their documented initial API-equivalent rate. Calendar-dated changes between rates remain unknown because their exact UTC switch time is not documented. Sol pricing after the confirmed promotion remains unavailable. See [the pricing evidence ledger](dist/PRICING.md). Internal/unknown model identifiers are never mapped by resemblance.
 
-Overview and receipt display the sum of priceable events; the compact priced percentage identifies partial pricing, and unpriced model identities remain visible in Details. No guessed price or zero is assigned to unknown events. Both views share a display comparison of the known priced amount with the declared full-month subscription: Observed Value / You Saved is their difference, and Value Multiple is their ratio. The normalized summary still marks the full-usage cost and comparison unknown when pricing is incomplete. Partial coverage remains visible; these observed values do not infer a certain outcome or an exact break-even date. API and mixed billing have no subscription comparison. Totals from several subscriptions cannot include API/mixed providers in a subscription comparison.
+Overview and receipt display the sum of priceable events; the compact priced percentage identifies partial pricing, and unpriced model identities remain visible in Details. No guessed price or zero is assigned to unknown events. Both views share a display comparison of the known priced amount with the declared full-month subscription: Observed Value / You Saved is their difference, and Value Multiple is their ratio. The normalized summary still marks the full-usage cost and comparison unknown when pricing is incomplete. Partial coverage remains visible; these observed values do not infer a certain outcome or an exact break-even date. No subscription, unknown billing, and legacy API/mixed settings have no subscription comparison. Combined subscription comparisons require a declared subscription for every active provider.
 
 ## Architecture
 

package/dist/packages/cli/src/server.js

@@ -25,7 +25,7 @@ const mime                         = {
   '.woff2': 'font/woff2',
   '.txt': 'text/plain; charset=utf-8',
 };
-const billingModes = ['UNKNOWN', 'SUBSCRIPTION', 'API', 'MIXED']         ;
+const billingModes = ['UNKNOWN', 'SUBSCRIPTION', 'NO_SUBSCRIPTION', 'API', 'MIXED']         ;
 const isBillingMode = (value         )                       =>
   billingModes.some((mode) => mode === value);
 

package/dist/packages/core/src/summary.js

@@ -205,19 +205,21 @@ export function summarize(
         ? subscriptionForRange(billing.monthly, range)
         : null;
     let comparison = neutral(
-      billing.mode === 'API'
-        ? 'API usage'
-        : billing.mode === 'MIXED'
-          ? 'Mixed billing'
-          : billing.mode === 'UNKNOWN'
-            ? 'Billing not set'
-            : fullCalendarMonths(range) === null
-              ? 'Choose a full month'
-              : subscription === null
-                ? 'Subscription price not set'
-                : !completePricing
-                  ? 'Pricing unavailable'
-                  : 'Partial history',
+      billing.mode === 'NO_SUBSCRIPTION'
+        ? 'No subscription'
+        : billing.mode === 'API'
+          ? 'API usage'
+          : billing.mode === 'MIXED'
+            ? 'Mixed billing'
+            : billing.mode === 'UNKNOWN'
+              ? 'Billing not set'
+              : fullCalendarMonths(range) === null
+                ? 'Choose a full month'
+                : subscription === null
+                  ? 'Subscription price not set'
+                  : !completePricing
+                    ? 'Pricing unavailable'
+                    : 'Partial history',
       subscription,
     );
     if (completePricing && subscription !== null) {
@@ -311,7 +313,7 @@ export function summarize(
   const apiEquivalent = count > 0 && pricedRecords === count ? knownSubtotal : null;
   const subs = active.filter((p) => p.mode === 'SUBSCRIPTION');
   let comparison = neutral(
-    active.some((p) => p.mode === 'API' || p.mode === 'MIXED' || p.mode === 'UNKNOWN')
+    active.some((p) => p.mode !== 'SUBSCRIPTION')
       ? 'Subscription comparison unavailable'
       : 'Partial history',
   );

package/dist/packages/core/src/types.js

@@ -1,6 +1,7 @@
                                           
                                                                
-                                                                       
+// API and MIXED remain readable for existing local settings.
+                                                                                           
                               
              
                            

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

@@ -216,7 +216,12 @@ 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 +293,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;
@@ -335,7 +341,7 @@ export function drawReceipt(
             ? '#e1e2e4'
             : '#bdc0c6';
     const valueSize = multiple ? 25 : row.accent ? 22 : row.strong ? 18 : 16;
-    c.font = `${valueSize}px ${mono}`;
+    c.font = `${printSize(valueSize)}px ${mono}`;
     const valueWidth = c.measureText(row.right).width;
     text(
       label,

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,29 @@ 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;
+}
+@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 +2246,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 +2265,7 @@ dialog::backdrop {
 .amount-field input[readonly] {
   color: var(--muted);
 }
-.subscription-fields.hidden {
+.billing-amount.hidden {
   display: none;
 }
 .compact-details a {

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

@@ -60,8 +60,13 @@ const example               = {
   demo: true,
 };
 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 +86,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>
@@ -182,6 +189,8 @@ await receiptFonts();
 drawReceipt(
   document.querySelector                   ('#example-receipt') ,
   receiptModel(example, new Date(2026, 10, 1, 9, 30)),
+  'dark',
+  'preview',
 );
 document.querySelectorAll                   ('.copy-command').forEach((b) =>
   b.addEventListener('click', async () => {

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

@@ -572,7 +572,10 @@ function overview() {
   const months = fullCalendarMonths(summary.range),
     showSubs = months !== null && active.length && active.every((p) => p.mode === 'SUBSCRIPTION');
   return /* HTML */ `<div class="page-heading">
-      <div><h1>Overview</h1></div>
+      <div class="overview-title">
+        <h1>Overview</h1>
+        <span class="selected-period" aria-live="polite">${esc(periodLabel())}</span>
+      </div>
       ${refreshButton()}
     </div>
     ${coverage()}
@@ -614,38 +617,40 @@ function receiptPage() {
 }
 function billingFields(p          , firstRun = false) {
   const b = settings.billing[p],
-    plan = subscriptionPlan(p, b.planId);
+    plan = subscriptionPlan(p, b.planId),
+    subscribed = b.mode === 'SUBSCRIPTION',
+    selection = subscribed
+      ? (plan?.id ?? 'custom')
+      : b.mode === 'NO_SUBSCRIPTION' || b.mode === 'API'
+        ? 'none'
+        : '';
   return /* HTML */ `<div class="billing-row">
-    <label class="provider-setting-name" for="mode-${p}">${name(p)}</label
-    ><select
-      id="mode-${p}"
-      name="mode-${p}"
-      data-billing-mode="${p}"
-      ${firstRun ? 'required data-first-run="true"' : ''}
-    >
-      <option value="${firstRun ? '' : 'UNKNOWN'}" ${b.mode === 'UNKNOWN' ? 'selected' : ''}>
-        ${firstRun ? 'Choose usage' : 'Not set'}
-      </option>
-      <option value="SUBSCRIPTION" ${b.mode === 'SUBSCRIPTION' ? 'selected' : ''}>
-        Subscription
-      </option>
-      <option value="API" ${b.mode === 'API' ? 'selected' : ''}>API</option>
-      <option value="MIXED" ${b.mode === 'MIXED' ? 'selected' : ''}>Mixed / not sure</option>
-    </select>
-    <div class="subscription-fields ${b.mode === 'SUBSCRIPTION' ? '' : 'hidden'}" id="amount-${p}">
+    <label class="provider-setting-name" for="plan-${p}">${name(p)}</label>
+    <div class="subscription-fields">
       <label class="sr-only" for="plan-${p}">${name(p)} subscription plan</label
-      ><select id="plan-${p}" name="plan-${p}" data-subscription-plan="${p}">
-        <option value="custom" ${!plan ? 'selected' : ''}>Custom amount</option>
+      ><select
+        id="plan-${p}"
+        name="plan-${p}"
+        data-subscription-plan="${p}"
+        ${firstRun ? 'required data-first-run="true"' : ''}
+      >
+        <option value="" ${selection === '' ? 'selected' : ''}>
+          ${firstRun ? 'Choose subscription' : 'Not set'}
+        </option>
+        <option value="none" ${selection === 'none' ? 'selected' : ''}>No subscription</option>
         ${subscriptionPlans
           .filter((plan) => plan.provider === p)
           .map(
             (option) =>
-              /* HTML */ `<option value="${option.id}" ${plan?.id === option.id ? 'selected' : ''}>
+              /* HTML */ `<option value="${option.id}" ${selection === option.id ? 'selected' : ''}>
                 ${esc(subscriptionPlanLabel(option))}
               </option>`,
           )
-          .join('')}</select
-      ><label class="amount-field"
+          .join('')}
+        <option value="custom" ${selection === 'custom' ? 'selected' : ''}>
+          Custom amount
+        </option></select
+      ><label class="amount-field billing-amount ${subscribed ? '' : 'hidden'}" id="amount-${p}"
         ><span class="sr-only">${name(p)} monthly subscription in USD</span><span>$</span
         ><input
           name="monthly-${p}"
@@ -655,7 +660,8 @@ function billingFields(p          , firstRun = false) {
           step="0.01"
           value="${plan ? plan.monthly.toFixed(2) : (b.monthly ?? '')}"
           ${plan ? 'readonly' : ''}
-          ${firstRun && b.mode === 'SUBSCRIPTION' ? 'required' : ''}
+          ${!subscribed ? 'disabled' : ''}
+          ${firstRun && subscribed ? 'required' : ''}
           placeholder="Amount"
         /><span>/ month</span></label
       >
@@ -754,8 +760,8 @@ function settingsPage() {
             </p>
             <p>
               These are your declarations, not inferred billing history. Amounts are in USD.
-              Comparisons use the full monthly price for full calendar months only. API and mixed
-              usage have no subscription comparison.
+              Comparisons use the full monthly price for full calendar months only. No subscription
+              means no subscription comparison.
             </p>
           </details>
         </section>
@@ -792,7 +798,7 @@ function onboarding() {
     <span class="brand-mark">${productMark}</span
     ><span class="eyebrow">${esc(product.name.toUpperCase())} / FIRST RUN</span>
     <h2 id="onboarding-title">
-      ${onboardingStage === 'found' ? (found.length ? 'Local usage found' : 'No local usage found') : 'How did you use it?'}
+      ${onboardingStage === 'found' ? (found.length ? 'Local usage found' : 'No local usage found') : 'Your subscriptions'}
     </h2>
     ${
       onboardingStage === 'found'
@@ -804,7 +810,7 @@ function onboarding() {
               ${billable
                 .map(
                   (p) =>
-                    /* HTML */ `<h3>How did you use ${name(p.provider)}?</h3>
+                    /* HTML */ `<h3>${name(p.provider)}</h3>
                       ${billingFields(p.provider, true)}`,
                 )
                 .join('')}<button class="button" type="submit">
@@ -842,12 +848,14 @@ function render() {
 function readBilling(form                 ) {
   const data = new FormData(form);
   for (const p of ['codex', 'claude']              ) {
-    const mode = data.get(`mode-${p}`);
-    if (mode) {
+    const selection = data.get(`plan-${p}`);
+    if (selection !== null) {
+      const mode =
+        selection === 'none' ? 'NO_SUBSCRIPTION' : selection === '' ? 'UNKNOWN' : 'SUBSCRIPTION';
       const amount = data.get(`monthly-${p}`),
-        plan = subscriptionPlan(p, String(data.get(`plan-${p}`)));
+        plan = subscriptionPlan(p, String(selection));
       settings.billing[p] = {
-        mode: mode                                        ,
+        mode,
         monthly:
           mode === 'SUBSCRIPTION'
             ? (plan?.monthly ?? (amount !== '' && amount !== null ? Number(amount) : null))
@@ -1011,23 +1019,15 @@ function bind() {
     const data = new FormData(e.currentTarget                   );
     void choosePeriod('month', from, to, String(data.get('month')));
   });
-  document.querySelectorAll                   ('[data-billing-mode]').forEach((select) =>
-    select.addEventListener('change', () => {
-      document
-        .querySelector(`#amount-${select.dataset.billingMode}`)
-        ?.classList.toggle('hidden', select.value !== 'SUBSCRIPTION');
-      const amount = document.querySelector                  (
-        `[name="monthly-${select.dataset.billingMode}"]`,
-      );
-      if (amount)
-        amount.required = select.dataset.firstRun === 'true' && select.value === 'SUBSCRIPTION';
-    }),
-  );
   document.querySelectorAll                   ('[data-subscription-plan]').forEach((select) =>
     select.addEventListener('change', () => {
       const p = select.dataset.subscriptionPlan            ,
         plan = subscriptionPlan(p, select.value),
         input = document.querySelector                  (`[name="monthly-${p}"]`) ;
+      const subscribed = select.value !== '' && select.value !== 'none';
+      document.querySelector(`#amount-${p}`)?.classList.toggle('hidden', !subscribed);
+      input.disabled = !subscribed;
+      input.required = select.dataset.firstRun === 'true' && subscribed;
       input.readOnly = !!plan;
       if (plan) input.value = plan.monthly.toFixed(2);
     }),

package/dist/public/landing.css

@@ -295,6 +295,29 @@ 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;
+}
+@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 +2246,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 +2265,7 @@ dialog::backdrop {
 .amount-field input[readonly] {
   color: var(--muted);
 }
-.subscription-fields.hidden {
+.billing-amount.hidden {
   display: none;
 }
 .compact-details a {
@@ -2314,13 +2337,27 @@ dialog {
   justify-content: space-between;
   align-items: center;
 }
-.github-link {
-  font-size: 12px;
+.landing-links {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+.github-link,
+.install-link {
+  font-size: 13px;
   color: var(--muted);
   display: flex;
+  align-items: center;
+  min-height: 44px;
   gap: 8px;
 }
-.github-link span {
+.github-link span,
+.install-link span {
+  color: var(--green);
+}
+.github-link:hover,
+.install-link:hover,
+.trust-row a:hover {
   color: var(--green);
 }
 .hero {
@@ -2393,13 +2430,16 @@ dialog {
 }
 .trust-row {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 25px;
+  row-gap: 12px;
   margin-top: 22px;
   color: #a3b0a6;
   font-size: 10px;
 }
-.trust-row span {
+.trust-row span,
+.trust-row a {
   white-space: nowrap;
 }
 .release-note {
@@ -2415,7 +2455,7 @@ dialog {
 .preview-label {
   display: flex;
   justify-content: space-between;
-  font: 8px var(--mono);
+  font: 11px var(--mono);
   letter-spacing: 1.2px;
   color: var(--muted);
   margin-bottom: 12px;
@@ -2433,7 +2473,7 @@ dialog {
   gap: 29px;
   padding: 20px 24px;
   border-bottom: 1px solid var(--border);
-  font-size: 10px;
+  font-size: 12px;
   color: var(--muted);
 }
 .preview-topbar .brand {
@@ -2458,7 +2498,7 @@ dialog {
 }
 .preview-date {
   margin-left: auto;
-  font: 8px var(--mono);
+  font: 11px var(--mono);
 }
 .preview-body {
   display: grid;
@@ -2490,7 +2530,7 @@ dialog {
   padding-top: 15px;
 }
 .preview-metrics span {
-  font-size: 8px;
+  font-size: 12px;
   color: var(--muted);
 }
 .preview-metrics strong {
@@ -2525,7 +2565,7 @@ dialog {
   font-weight: 500;
 }
 .preview-provider > div span {
-  font-size: 9px;
+  font-size: 12px;
   color: var(--muted);
 }
 .preview-provider b {
@@ -2535,7 +2575,7 @@ dialog {
   letter-spacing: -0.5px;
 }
 .preview-active {
-  font: 8px var(--mono);
+  font: 11px var(--mono);
   background: #153020;
   border: 1px solid #284f35;
   color: var(--green);
@@ -2552,16 +2592,16 @@ dialog {
   display: flex;
   justify-content: space-between;
   gap: 12px;
-  font-size: 9px;
+  font-size: 12px;
   margin-bottom: 19px;
 }
 .preview-chart strong {
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 450;
 }
 .preview-chart > div:first-child span {
   color: var(--green);
-  font-size: 8px;
+  font-size: 11px;
 }
 .preview-bars {
   height: 143px;
@@ -2587,7 +2627,7 @@ dialog {
 .preview-chart-axis {
   display: flex;
   justify-content: space-between;
-  font: 8px var(--mono);
+  font: 11px var(--mono);
   color: var(--muted);
   margin-top: 12px;
 }
@@ -2604,6 +2644,9 @@ dialog {
   display: flex;
   flex-direction: column;
   justify-content: start;
+  min-width: 0;
+  width: 100%;
+  max-width: 368px;
   gap: 13px;
 }
 .preview-receipt canvas {
@@ -2721,7 +2764,7 @@ dialog {
     padding: 14px 10px;
   }
   .preview-metrics span {
-    font-size: 7px;
+    font-size: 12px;
   }
 }
 @media (max-width: 760px) {
@@ -2767,13 +2810,13 @@ dialog {
     margin-top: 13px;
   }
   .preview-label {
-    font-size: 6px;
+    font-size: 11px;
     letter-spacing: 0.8px;
   }
   .preview-topbar {
     padding: 18px;
     gap: 19px;
-    font-size: 8px;
+    font-size: 12px;
   }
   .preview-topbar .brand {
     font-size: 14px;
@@ -2783,7 +2826,7 @@ dialog {
     display: none;
   }
   .preview-date {
-    font-size: 8px;
+    font-size: 11px;
   }
   .preview-body {
     grid-template-columns: 1fr;
@@ -2802,7 +2845,7 @@ dialog {
     font-size: 25px;
   }
   .preview-metrics span {
-    font-size: 9px;
+    font-size: 12px;
   }
   .preview-provider {
     padding: 17px;
@@ -2897,7 +2940,7 @@ dialog {
   color: #a8b7af;
 }
 .product-preview {
-  max-width: 1180px;
+  max-width: 1240px;
 }
 .preview-window {
   background: #0b0d10;
@@ -2933,7 +2976,7 @@ dialog {
   letter-spacing: -0.9px;
 }
 .preview-metrics span {
-  font-size: 9px;
+  font-size: 12px;
   color: #b7c0c7;
 }
 .preview-provider,
@@ -3039,13 +3082,13 @@ dialog {
     padding-top: 16px;
   }
   .preview-metrics span {
-    font-size: 10px;
+    font-size: 12px;
   }
   .preview-metrics strong {
     font-size: 27px;
   }
   .preview-receipt {
-    max-width: 335px;
+    max-width: 368px;
   }
   .preview-bars {
     height: 138px;
@@ -3067,7 +3110,7 @@ dialog {
     padding-bottom: 36px;
   }
   .preview-label {
-    font-size: 7px;
+    font-size: 11px;
   }
   .copy-command {
     min-height: 40px;
@@ -3092,7 +3135,7 @@ dialog {
   object-fit: contain;
 }
 .preview-body {
-  grid-template-columns: minmax(0, 1fr) 285px;
+  grid-template-columns: minmax(0, 1fr) 368px;
 }
 .preview-receipt canvas {
   filter: drop-shadow(0 2px 2px #0007) drop-shadow(0 10px 14px #0006);
@@ -3107,9 +3150,17 @@ dialog {
 .preview-bars i {
   background: linear-gradient(to bottom, #37ec85, #278451);
 }
+@media (max-width: 1100px) {
+  .preview-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 @media (max-width: 1000px) {
   .preview-body {
-    grid-template-columns: minmax(0, 1fr) 245px;
+    grid-template-columns: 1fr;
+  }
+  .preview-receipt {
+    margin-inline: auto;
   }
 }
 @media (max-width: 760px) {
@@ -3117,7 +3168,7 @@ dialog {
     grid-template-columns: 1fr;
   }
   .preview-receipt {
-    max-width: 335px;
+    max-width: 368px;
   }
   .preview-topbar .brand-mark {
     width: 20px;

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

@@ -216,7 +216,12 @@ 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 +293,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;
@@ -335,7 +341,7 @@ export function drawReceipt(
             ? '#e1e2e4'
             : '#bdc0c6';
     const valueSize = multiple ? 25 : row.accent ? 22 : row.strong ? 18 : 16;
-    c.font = `${valueSize}px ${mono}`;
+    c.font = `${printSize(valueSize)}px ${mono}`;
     const valueWidth = c.measureText(row.right).width;
     text(
       label,

package/dist/public/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/package.json

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