chore(billing): genericize demo meter-category vocabulary for the public devkit (#4472)

Rename downstream-specific meter-category names + demo copy in the
billing meter-breakdown feature to neutral generic terms (the
component/composable LOGIC was already generic; only example/comment/
test VALUES leaked downstream product vocabulary):

- meter-category keys: scrap -> compute, autofix -> automation,
  wizard -> export (applied consistently everywhere they appear as
  breakdown keys, aligning with the already-merged pack copy).
- demo/copy strings genericized: pack/pricing feature blurbs, the
  meterBreakdownChart JSDoc usage example, the useMeter in-flight-debt
  comment, the seo-inject fixture description, the app.router test
  description, and the pageHeader breadcrumb fixture text.

Closes #4471

Claude-Session: https://claude.ai/code/session_01WfNC8bt1TgL4AsiYgCEGup

Author: PierreBrisorgueil

src/lib/plugins/tests/seo-inject.unit.tests.js

@@ -418,7 +418,7 @@ describe('seoInjectPlugin', () => {
         app: {
           title: 'Example',
           url: 'https://example.com',
-          description: 'Self-driving scrapers',
+          description: 'Automated workflows for busy teams',
           seo: {
             schemas: [
               { type: 'Organization', name: 'Example' },

src/modules/app/tests/app.router.unit.tests.js

@@ -234,7 +234,7 @@ describe('app.router', () => {
     expect(router.currentRoute.value.meta.marketing).toBe(true);
   });
 
-  it('app routes (/, /scraps-equivalent) do NOT have meta.marketing', async () => {
+  it('app routes (/, /dashboard-equivalent) do NOT have meta.marketing', async () => {
     const router = getRouter();
     await router.push('/');
     await router.isReady();

src/modules/billing/components/billing.meterBreakdownChart.component.vue

@@ -5,7 +5,7 @@
   height/rounded/bg-color as the Weekly compute bar for visual consistency.
 
   USAGE:
-  <BillingMeterBreakdownChartComponent :breakdown="{ scrap: 60, autofix: 40 }" />
+  <BillingMeterBreakdownChartComponent :breakdown="{ compute: 60, automation: 40 }" />
 -->
 <template>
   <div class="billing-meter-breakdown-chart">

src/modules/billing/composables/billing.useMeter.js

@@ -113,7 +113,7 @@ export function useMeter({ pollIntervalMs = 30000, refreshOnFocus = true } = {})
   /**
    * @type {import('vue').ComputedRef<number>}
    * Unclamped balance: quota - used + extras. Can be negative when in-flight jobs
-   * push usage past quota (e.g. a long-running scrape finishing after quota is hit).
+   * push usage past quota (e.g. a long-running job finishing after quota is hit).
    * Use this in detail views / ledger displays that must show the real debt.
    */
   const netRemainingRaw = computed(() => quota.value - used.value + extras.value);

src/modules/billing/tests/billing.card.component.unit.tests.js

@@ -85,8 +85,8 @@ describe('BillingCardComponent', () => {
   });
 
   it('renders info line when present', () => {
-    const wrapper = mountComponent(makeItem({ info: 'Ops-eval: 200 scraps / month' }));
-    expect(wrapper.text()).toContain('Ops-eval: 200 scraps / month');
+    const wrapper = mountComponent(makeItem({ info: 'Ops-eval: 200 operations / month' }));
+    expect(wrapper.text()).toContain('Ops-eval: 200 operations / month');
   });
 
   it('does not render info paragraph when info is null', () => {

src/modules/billing/tests/billing.meterBreakdownChart.component.unit.tests.js

@@ -25,14 +25,14 @@ describe('BillingMeterBreakdownChartComponent', () => {
   // ── Non-zero buckets only ─────────────────────────────────────────────────
 
   it('renders only non-zero buckets', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 0, wizard: 50 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 0, export: 50 } });
     const buckets = wrapper.vm.activeBuckets;
     expect(buckets).toHaveLength(2);
-    expect(buckets.map((b) => b.key)).toEqual(['scrap', 'wizard']);
+    expect(buckets.map((b) => b.key)).toEqual(['compute', 'export']);
   });
 
   it('renders empty state when all buckets are zero', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 0, autofix: 0 } });
+    const wrapper = mountComponent({ breakdown: { compute: 0, automation: 0 } });
     expect(wrapper.text()).toContain('No usage data');
     expect(wrapper.vm.activeBuckets).toHaveLength(0);
   });
@@ -45,21 +45,21 @@ describe('BillingMeterBreakdownChartComponent', () => {
   // ── Total computation ─────────────────────────────────────────────────────
 
   it('computes total as sum of breakdown values when total prop is omitted', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 50, wizard: 200 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 50, export: 200 } });
     expect(wrapper.vm.effectiveTotal).toBe(350);
   });
 
   it('uses the total prop when provided', () => {
     const wrapper = mountComponent({
-      breakdown: { scrap: 100, autofix: 50 },
+      breakdown: { compute: 100, automation: 50 },
       total: 500,
     });
     expect(wrapper.vm.effectiveTotal).toBe(500);
   });
 
   it('falls back to sum when total prop is 0', () => {
     const wrapper = mountComponent({
-      breakdown: { scrap: 100, autofix: 50 },
+      breakdown: { compute: 100, automation: 50 },
       total: 0,
     });
     // total=0 is falsy, falls back to sum
@@ -69,27 +69,27 @@ describe('BillingMeterBreakdownChartComponent', () => {
   // ── Percentage computation ────────────────────────────────────────────────
 
   it('computes percentages summing to ~100 for multiple buckets', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 100, wizard: 100 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 100, export: 100 } });
     const total = wrapper.vm.activeBuckets.reduce((s, b) => s + b.pct, 0);
     // With 3 equal buckets each 33% → sum is 99 due to rounding
     expect(total).toBeGreaterThanOrEqual(99);
     expect(total).toBeLessThanOrEqual(101);
   });
 
   it('computes correct percentage for a single bucket', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 200 } });
+    const wrapper = mountComponent({ breakdown: { compute: 200 } });
     expect(wrapper.vm.activeBuckets[0].pct).toBe(100);
   });
 
   it('computes percentage relative to custom total', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100 }, total: 400 });
+    const wrapper = mountComponent({ breakdown: { compute: 100 }, total: 400 });
     expect(wrapper.vm.activeBuckets[0].pct).toBe(25);
   });
 
   // ── Color cycle determinism ────────────────────────────────────────────────
 
   it('assigns colors deterministically for the same set of buckets', () => {
-    const breakdown = { scrap: 100, autofix: 50, wizard: 200 };
+    const breakdown = { compute: 100, automation: 50, export: 200 };
     const w1 = mountComponent({ breakdown });
     const w2 = mountComponent({ breakdown });
     const colors1 = w1.vm.activeBuckets.map((b) => b.color);
@@ -98,12 +98,12 @@ describe('BillingMeterBreakdownChartComponent', () => {
   });
 
   it('first bucket gets primary color', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 50 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 50 } });
     expect(wrapper.vm.activeBuckets[0].color).toBe('primary');
   });
 
   it('second bucket gets secondary color', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 50 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 50 } });
     expect(wrapper.vm.activeBuckets[1].color).toBe('secondary');
   });
 
@@ -134,14 +134,14 @@ describe('BillingMeterBreakdownChartComponent', () => {
   // ── Linear bar rendering (new v-progress-linear design) ──────────────────
 
   it('renders one v-progress-linear per non-zero bucket', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 50, wizard: 0 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 50, export: 0 } });
     const bars = wrapper.findAllComponents({ name: 'v-progress-linear' });
-    // Only scrap and autofix are non-zero → 2 bars
+    // Only compute and automation are non-zero → 2 bars
     expect(bars).toHaveLength(2);
   });
 
   it('v-progress-linear bars have height="10" and rounded props', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 50 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 50 } });
     const bars = wrapper.findAllComponents({ name: 'v-progress-linear' });
     for (const bar of bars) {
       expect(bar.props('height')).toBe('10');
@@ -150,31 +150,31 @@ describe('BillingMeterBreakdownChartComponent', () => {
   });
 
   it('v-progress-linear bars have bg-color="surface-variant"', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100 } });
     const bar = wrapper.findComponent({ name: 'v-progress-linear' });
     expect(bar.props('bgColor')).toBe('surface-variant');
   });
 
   it('renders bucket label and percentage above each bar', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 100 } });
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 100 } });
     const text = wrapper.text();
     // Both keys visible
-    expect(text).toContain('scrap');
-    expect(text).toContain('autofix');
+    expect(text).toContain('compute');
+    expect(text).toContain('automation');
     // Percentages (50% each for equal split)
     expect(text).toContain('50%');
   });
 
   it('does not render zero-value bucket bar or label', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 100, autofix: 0 } });
-    // autofix is zero → not in active buckets → no label rendered
-    expect(wrapper.text()).not.toContain('autofix');
-    // Only 1 bar for scrap
+    const wrapper = mountComponent({ breakdown: { compute: 100, automation: 0 } });
+    // automation is zero → not in active buckets → no label rendered
+    expect(wrapper.text()).not.toContain('automation');
+    // Only 1 bar for compute
     expect(wrapper.findAllComponents({ name: 'v-progress-linear' })).toHaveLength(1);
   });
 
   it('does not render any bar when all buckets are zero', () => {
-    const wrapper = mountComponent({ breakdown: { scrap: 0 } });
+    const wrapper = mountComponent({ breakdown: { compute: 0 } });
     expect(wrapper.findAllComponents({ name: 'v-progress-linear' })).toHaveLength(0);
     expect(wrapper.text()).toContain('No usage data');
   });

src/modules/billing/tests/billing.packs.component.unit.tests.js

@@ -78,7 +78,7 @@ const mockPacksV4 = [
     cta: 'Buy Starter',
     info: '5,000 compute',
     features: [
-      { icon: 'fa-solid fa-check', color: 'primary', text: '~40 easy scraps' },
+      { icon: 'fa-solid fa-check', color: 'primary', text: '~40 easy jobs' },
     ],
     meta: { packId: 'pack_starter', priceUsd: 9, meterUnits: 5000 },
   },
@@ -92,7 +92,7 @@ const mockPacksV4 = [
     cta: 'Buy Power',
     info: '20,000 compute',
     features: [
-      { icon: 'fa-solid fa-check', color: 'primary', text: '~160 easy scraps' },
+      { icon: 'fa-solid fa-check', color: 'primary', text: '~160 easy jobs' },
     ],
     meta: { packId: 'pack_power', priceUsd: 25, meterUnits: 20000 },
   },

src/modules/billing/tests/billing.pricing.view.unit.tests.js

@@ -443,7 +443,7 @@ describe('BillingPricingView — resolvedPlanItems (V4 unified schema)', () => {
       highlight: true,
       badge: 'MOST POPULAR',
       cta: 'Upgrade',
-      features: [{ icon: 'fa-solid fa-check', color: 'primary', text: 'Unlimited scraps' }],
+      features: [{ icon: 'fa-solid fa-check', color: 'primary', text: 'Unlimited operations' }],
       info: null,
       meta: { monthlyPrice: 39, annualPrice: 390 },
     },

src/modules/billing/tests/billing.store.unit.tests.js

@@ -292,7 +292,7 @@ describe('Billing Store', () => {
         weekResetAt: '2026-05-04T00:00:00Z',
         meterUsed: 1234,
         meterQuota: 8000,
-        meterBreakdown: { scrap: 800, autofix: 434 },
+        meterBreakdown: { compute: 800, automation: 434 },
         extrasRemaining: 12500,
         packsAvailable: [],
       };

src/modules/billing/tests/billing.subscriptions.component.unit.tests.js

@@ -67,7 +67,7 @@ const mockUsageMeterNormal = {
   weekResetAt: new Date(Date.now() + 86400000).toISOString(),
   meterUsed: 120,
   meterQuota: 500,
-  meterBreakdown: { scrap: 80, autofix: 40 },
+  meterBreakdown: { compute: 80, automation: 40 },
   extrasRemaining: 50,
   packsAvailable: [
     { packId: 'pack_500', label: '500 units', priceUsd: 9, meterUnits: 500 },