@subvalue/cli 0.1.4 → 0.1.6

package/dist/public/landing.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,6 +2319,185 @@ 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;
+}
 
 .hero h1 .brand-name {
   font-weight: 850;
@@ -2314,13 +2522,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 +2615,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 +2640,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 +2658,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 +2683,7 @@ dialog {
 }
 .preview-date {
   margin-left: auto;
-  font: 8px var(--mono);
+  font: 11px var(--mono);
 }
 .preview-body {
   display: grid;
@@ -2490,7 +2715,7 @@ dialog {
   padding-top: 15px;
 }
 .preview-metrics span {
-  font-size: 8px;
+  font-size: 12px;
   color: var(--muted);
 }
 .preview-metrics strong {
@@ -2525,7 +2750,7 @@ dialog {
   font-weight: 500;
 }
 .preview-provider > div span {
-  font-size: 9px;
+  font-size: 12px;
   color: var(--muted);
 }
 .preview-provider b {
@@ -2535,7 +2760,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 +2777,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 +2812,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 +2829,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 +2949,7 @@ dialog {
     padding: 14px 10px;
   }
   .preview-metrics span {
-    font-size: 7px;
+    font-size: 12px;
   }
 }
 @media (max-width: 760px) {
@@ -2767,13 +2995,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 +3011,7 @@ dialog {
     display: none;
   }
   .preview-date {
-    font-size: 8px;
+    font-size: 11px;
   }
   .preview-body {
     grid-template-columns: 1fr;
@@ -2802,7 +3030,7 @@ dialog {
     font-size: 25px;
   }
   .preview-metrics span {
-    font-size: 9px;
+    font-size: 12px;
   }
   .preview-provider {
     padding: 17px;
@@ -2897,7 +3125,7 @@ dialog {
   color: #a8b7af;
 }
 .product-preview {
-  max-width: 1180px;
+  max-width: 1240px;
 }
 .preview-window {
   background: #0b0d10;
@@ -2933,7 +3161,7 @@ dialog {
   letter-spacing: -0.9px;
 }
 .preview-metrics span {
-  font-size: 9px;
+  font-size: 12px;
   color: #b7c0c7;
 }
 .preview-provider,
@@ -3039,13 +3267,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 +3295,7 @@ dialog {
     padding-bottom: 36px;
   }
   .preview-label {
-    font-size: 7px;
+    font-size: 11px;
   }
   .copy-command {
     min-height: 40px;
@@ -3092,7 +3320,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 +3335,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 +3353,7 @@ dialog {
     grid-template-columns: 1fr;
   }
   .preview-receipt {
-    max-width: 335px;
+    max-width: 368px;
   }
   .preview-topbar .brand-mark {
     width: 20px;

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,
+  };
+}