@cat-factory/app 0.109.4 → 0.110.0

package/app/components/settings/{MergePresetHealthModal.vue → RiskPolicyHealthModal.vue}

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 // Startup advisory for built-in merge presets that drifted from the catalog. Opened once per
-// session from the board page when `useMergePresetHealth` reports any issue. Lists:
+// session from the board page when `useRiskPolicyHealth` reports any issue. Lists:
 //   • new built-in presets the workspace doesn't have yet (ADD them);
 //   • built-ins with a newer catalog version available (RESEED to adopt it).
 // Both fixes are the same reseed call (it creates or updates by catalog id). Detection is
-// client-side (see useMergePresetHealth); the actions hit the mergePresets store.
+// client-side (see useRiskPolicyHealth); the actions hit the riskPolicies store.
 const { t } = useI18n()
 const ui = useUiStore()
-const presets = useMergePresetsStore()
-const { newPresets, outdated, hasIssues } = useMergePresetHealth()
+const presets = useRiskPoliciesStore()
+const { newPresets, outdated, hasIssues } = useRiskPolicyHealth()
 const toast = useToast()
 
 const open = computed({
-  get: () => ui.mergePresetHealthOpen,
+  get: () => ui.riskPolicyHealthOpen,
   set: (v: boolean) => {
-    if (!v) ui.closeMergePresetHealth()
+    if (!v) ui.closeRiskPolicyHealth()
   },
 })
 
@@ -29,7 +29,7 @@ async function reseed(id: string) {
     await presets.reseed(id)
   } catch (e) {
     toast.add({
-      title: t('mergePreset.health.toast.reseedFailed'),
+      title: t('riskPolicy.health.toast.reseedFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -53,11 +53,11 @@ const reseedableCount = computed(
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('mergePreset.health.title')" :ui="{ content: 'max-w-2xl' }">
+  <UModal v-model:open="open" :title="t('riskPolicy.health.title')" :ui="{ content: 'max-w-2xl' }">
     <template #body>
       <div v-if="!hasIssues" class="py-6 text-center text-sm text-slate-400">
         <UIcon name="i-lucide-check-circle-2" class="mx-auto mb-2 h-8 w-8 text-emerald-400" />
-        {{ t('mergePreset.health.allValid') }}
+        {{ t('riskPolicy.health.allValid') }}
       </div>
 
       <div v-else class="space-y-5">
@@ -66,10 +66,10 @@ const reseedableCount = computed(
           <div class="flex items-center gap-2">
             <UIcon name="i-lucide-sparkles" class="h-4 w-4 text-emerald-400" />
             <h3 class="text-sm font-semibold text-slate-200">
-              {{ t('mergePreset.health.newHeading') }}
+              {{ t('riskPolicy.health.newHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-slate-500">{{ t('mergePreset.health.newDescription') }}</p>
+          <p class="text-[11px] text-slate-500">{{ t('riskPolicy.health.newDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in newPresets"
@@ -90,7 +90,7 @@ const reseedableCount = computed(
                 :disabled="anyBusy"
                 @click="reseed(i.id)"
               >
-                {{ t('mergePreset.health.add') }}
+                {{ t('riskPolicy.health.add') }}
               </UButton>
             </li>
           </ul>
@@ -101,10 +101,10 @@ const reseedableCount = computed(
           <div class="flex items-center gap-2">
             <UIcon name="i-lucide-arrow-up-circle" class="h-4 w-4 text-amber-400" />
             <h3 class="text-sm font-semibold text-slate-200">
-              {{ t('mergePreset.health.updatesHeading') }}
+              {{ t('riskPolicy.health.updatesHeading') }}
             </h3>
           </div>
-          <p class="text-[11px] text-slate-500">{{ t('mergePreset.health.updatesDescription') }}</p>
+          <p class="text-[11px] text-slate-500">{{ t('riskPolicy.health.updatesDescription') }}</p>
           <ul class="space-y-2">
             <li
               v-for="i in outdated"
@@ -115,7 +115,7 @@ const reseedableCount = computed(
                 <span class="truncate text-sm font-medium text-slate-100">{{ i.name }}</span>
                 <p class="text-[11px] text-amber-400/80">
                   {{
-                    t('mergePreset.health.versionAvailable', {
+                    t('riskPolicy.health.versionAvailable', {
                       from: i.fromVersion ?? 0,
                       to: i.toVersion ?? 0,
                     })
@@ -131,7 +131,7 @@ const reseedableCount = computed(
                 :disabled="anyBusy"
                 @click="reseed(i.id)"
               >
-                {{ t('mergePreset.health.reseed') }}
+                {{ t('riskPolicy.health.reseed') }}
               </UButton>
             </li>
           </ul>
@@ -149,16 +149,16 @@ const reseedableCount = computed(
           :loading="anyBusy"
           @click="reseedAll"
         >
-          {{ t('mergePreset.health.reseedAll', { count: reseedableCount }) }}
+          {{ t('riskPolicy.health.reseedAll', { count: reseedableCount }) }}
         </UButton>
         <span v-else />
         <UButton
           color="neutral"
           variant="ghost"
           :disabled="anyBusy"
-          @click="ui.closeMergePresetHealth()"
+          @click="ui.closeRiskPolicyHealth()"
         >
-          {{ hasIssues ? t('mergePreset.health.dismiss') : t('mergePreset.health.done') }}
+          {{ hasIssues ? t('riskPolicy.health.dismiss') : t('riskPolicy.health.done') }}
         </UButton>
       </div>
     </template>

package/app/components/settings/{MergeThresholdsPanel.vue → RiskPolicyPanel.vue}

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 // Workspace settings: the merge-threshold preset library a task picks its
 // auto-merge policy from (the `merger` step compares a PR's assessment against the
-// resolved preset). Full CRUD over the mergePresets store — the same library the
+// resolved preset). Full CRUD over the riskPolicies store — the same library the
 // task inspector's "Merge policy" dropdown selects from. Exactly one preset is the
 // default; it cannot be deleted or un-defaulted (the backend enforces this too).
 import { computed, reactive, ref, watch } from 'vue'
-import type { MergeThresholdPreset, RequirementConcernLevel } from '~/types/merge'
+import type { RiskPolicy, RequirementConcernLevel } from '~/types/merge'
 
 const { t } = useI18n()
 
@@ -13,10 +13,10 @@ const { t } = useI18n()
 // the typecheck); each value is a LITERAL catalog key so the typed-message-keys check sees
 // it. Leaf keys mirror the enum value verbatim.
 const CONCERN_LABEL_KEYS: Record<RequirementConcernLevel, string> = {
-  none: 'settings.mergeThresholds.concern.none',
-  low: 'settings.mergeThresholds.concern.low',
-  medium: 'settings.mergeThresholds.concern.medium',
-  high: 'settings.mergeThresholds.concern.high',
+  none: 'settings.riskPolicy.concern.none',
+  low: 'settings.riskPolicy.concern.low',
+  medium: 'settings.riskPolicy.concern.medium',
+  high: 'settings.riskPolicy.concern.high',
 }
 
 // Concern-level options for the requirements auto-pass threshold (none < low < medium < high).
@@ -27,7 +27,7 @@ const CONCERN_LEVELS = computed<{ value: RequirementConcernLevel; label: string
   { value: 'high', label: t(CONCERN_LABEL_KEYS.high) },
 ])
 
-const store = useMergePresetsStore()
+const store = useRiskPoliciesStore()
 const toast = useToast()
 const { confirm } = useConfirm()
 
@@ -45,7 +45,7 @@ interface Draft {
 }
 const drafts = reactive<Record<string, Draft>>({})
 
-function toDraft(p: MergeThresholdPreset): Draft {
+function toDraft(p: RiskPolicy): Draft {
   return {
     name: p.name,
     maxComplexity: Math.round(p.maxComplexity * 100),
@@ -78,7 +78,7 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-async function save(p: MergeThresholdPreset) {
+async function save(p: RiskPolicy) {
   const d = drafts[p.id]
   if (!d) return
   busy.value = p.id
@@ -94,32 +94,32 @@ async function save(p: MergeThresholdPreset) {
       autoMergeEnabled: d.autoMergeEnabled,
     })
     toast.add({
-      title: t('settings.mergeThresholds.toast.saved'),
+      title: t('settings.riskPolicy.toast.saved'),
       icon: 'i-lucide-check',
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('settings.mergeThresholds.toast.saveFailed'), e)
+    notifyError(t('settings.riskPolicy.toast.saveFailed'), e)
   } finally {
     busy.value = null
   }
 }
 
-async function makeDefault(p: MergeThresholdPreset) {
+async function makeDefault(p: RiskPolicy) {
   busy.value = p.id
   try {
     await store.update(p.id, { isDefault: true })
   } catch (e) {
-    notifyError(t('settings.mergeThresholds.toast.defaultFailed'), e)
+    notifyError(t('settings.riskPolicy.toast.defaultFailed'), e)
   } finally {
     busy.value = null
   }
 }
 
-async function remove(p: MergeThresholdPreset) {
+async function remove(p: RiskPolicy) {
   const ok = await confirm({
-    title: t('settings.mergeThresholds.confirmDelete.title'),
-    description: t('settings.mergeThresholds.confirmDelete.body', { name: p.name }),
+    title: t('settings.riskPolicy.confirmDelete.title'),
+    description: t('settings.riskPolicy.confirmDelete.body', { name: p.name }),
     variant: 'destructive',
     confirmLabel: t('common.delete'),
     icon: 'i-lucide-trash-2',
@@ -129,7 +129,7 @@ async function remove(p: MergeThresholdPreset) {
   try {
     await store.remove(p.id)
   } catch (e) {
-    notifyError(t('settings.mergeThresholds.toast.deleteFailed'), e)
+    notifyError(t('settings.riskPolicy.toast.deleteFailed'), e)
   } finally {
     busy.value = null
   }
@@ -165,12 +165,12 @@ async function create() {
     draft.name = ''
     draft.autoMergeEnabled = true
     toast.add({
-      title: t('settings.mergeThresholds.toast.created'),
+      title: t('settings.riskPolicy.toast.created'),
       icon: 'i-lucide-check',
       color: 'success',
     })
   } catch (e) {
-    notifyError(t('settings.mergeThresholds.toast.createFailed'), e)
+    notifyError(t('settings.riskPolicy.toast.createFailed'), e)
   } finally {
     creating.value = false
   }
@@ -180,13 +180,13 @@ async function create() {
 <template>
   <div class="space-y-4">
     <i18n-t
-      keypath="settings.mergeThresholds.intro"
+      keypath="settings.riskPolicy.intro"
       tag="p"
       class="text-xs text-slate-400"
       scope="global"
     >
       <template #merger>
-        <span class="text-slate-300">{{ t('settings.mergeThresholds.mergerAgent') }}</span>
+        <span class="text-slate-300">{{ t('settings.riskPolicy.mergerAgent') }}</span>
       </template>
     </i18n-t>
 
@@ -200,10 +200,10 @@ async function create() {
           v-model="drafts[p.id]!.name"
           size="sm"
           class="flex-1"
-          :placeholder="t('settings.mergeThresholds.presetNamePlaceholder')"
+          :placeholder="t('settings.riskPolicy.presetNamePlaceholder')"
         />
         <UBadge v-if="p.isDefault" color="primary" variant="subtle" size="sm">
-          {{ t('settings.mergeThresholds.default') }}
+          {{ t('settings.riskPolicy.default') }}
         </UBadge>
         <UButton
           v-else
@@ -214,7 +214,7 @@ async function create() {
           :loading="busy === p.id"
           @click="makeDefault(p)"
         >
-          {{ t('settings.mergeThresholds.makeDefault') }}
+          {{ t('settings.riskPolicy.makeDefault') }}
         </UButton>
         <UButton
           color="error"
@@ -224,8 +224,8 @@ async function create() {
           :disabled="p.isDefault || busy === p.id"
           :title="
             p.isDefault
-              ? t('settings.mergeThresholds.deleteDefaultBlocked')
-              : t('settings.mergeThresholds.deletePreset')
+              ? t('settings.riskPolicy.deleteDefaultBlocked')
+              : t('settings.riskPolicy.deletePreset')
           "
           @click="remove(p)"
         />
@@ -234,7 +234,7 @@ async function create() {
       <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
         <label class="block">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.field.maxComplexity') }}
+            {{ t('settings.riskPolicy.field.maxComplexity') }}
           </span>
           <UInput
             v-model.number="drafts[p.id]!.maxComplexity"
@@ -246,7 +246,7 @@ async function create() {
         </label>
         <label class="block">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.field.maxRisk') }}
+            {{ t('settings.riskPolicy.field.maxRisk') }}
           </span>
           <UInput
             v-model.number="drafts[p.id]!.maxRisk"
@@ -258,7 +258,7 @@ async function create() {
         </label>
         <label class="block">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.field.maxImpact') }}
+            {{ t('settings.riskPolicy.field.maxImpact') }}
           </span>
           <UInput
             v-model.number="drafts[p.id]!.maxImpact"
@@ -270,7 +270,7 @@ async function create() {
         </label>
         <label class="block">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.field.ciMaxAttempts') }}
+            {{ t('settings.riskPolicy.field.ciMaxAttempts') }}
           </span>
           <UInput
             v-model.number="drafts[p.id]!.ciMaxAttempts"
@@ -282,7 +282,7 @@ async function create() {
         </label>
         <label class="block">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.field.maxRequirementIterations') }}
+            {{ t('settings.riskPolicy.field.maxRequirementIterations') }}
           </span>
           <UInput
             v-model.number="drafts[p.id]!.maxRequirementIterations"
@@ -294,7 +294,7 @@ async function create() {
         </label>
         <label class="block">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.field.maxRequirementConcernAllowed') }}
+            {{ t('settings.riskPolicy.field.maxRequirementConcernAllowed') }}
           </span>
           <USelect
             v-model="drafts[p.id]!.maxRequirementConcernAllowed"
@@ -309,11 +309,11 @@ async function create() {
         <USwitch
           v-model="drafts[p.id]!.autoMergeEnabled"
           size="sm"
-          :label="t('settings.mergeThresholds.field.autoMerge')"
+          :label="t('settings.riskPolicy.field.autoMerge')"
           :description="
             drafts[p.id]!.autoMergeEnabled
-              ? t('settings.mergeThresholds.autoMergeOnHint')
-              : t('settings.mergeThresholds.autoMergeOffHint')
+              ? t('settings.riskPolicy.autoMergeOnHint')
+              : t('settings.riskPolicy.autoMergeOffHint')
           "
         />
         <UButton
@@ -332,22 +332,22 @@ async function create() {
     <!-- create -->
     <div class="rounded-lg border border-dashed border-slate-700 p-3">
       <p class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('settings.mergeThresholds.newPreset') }}
+        {{ t('settings.riskPolicy.newPreset') }}
       </p>
       <div class="flex flex-wrap items-end gap-3">
         <label class="block min-w-40 flex-1">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.name') }}
+            {{ t('settings.riskPolicy.create.name') }}
           </span>
           <UInput
             v-model="draft.name"
             size="sm"
-            :placeholder="t('settings.mergeThresholds.create.namePlaceholder')"
+            :placeholder="t('settings.riskPolicy.create.namePlaceholder')"
           />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.complexity') }}
+            {{ t('settings.riskPolicy.create.complexity') }}
           </span>
           <UInput
             v-model.number="draft.maxComplexity"
@@ -359,25 +359,25 @@ async function create() {
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.risk') }}
+            {{ t('settings.riskPolicy.create.risk') }}
           </span>
           <UInput v-model.number="draft.maxRisk" type="number" :min="0" :max="100" size="sm" />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.impact') }}
+            {{ t('settings.riskPolicy.create.impact') }}
           </span>
           <UInput v-model.number="draft.maxImpact" type="number" :min="0" :max="100" size="sm" />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.ciFix') }}
+            {{ t('settings.riskPolicy.create.ciFix') }}
           </span>
           <UInput v-model.number="draft.ciMaxAttempts" type="number" :min="0" :max="50" size="sm" />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.reqIter') }}
+            {{ t('settings.riskPolicy.create.reqIter') }}
           </span>
           <UInput
             v-model.number="draft.maxRequirementIterations"
@@ -389,7 +389,7 @@ async function create() {
         </label>
         <label class="block w-32">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-            {{ t('settings.mergeThresholds.create.autoPass') }}
+            {{ t('settings.riskPolicy.create.autoPass') }}
           </span>
           <USelect
             v-model="draft.maxRequirementConcernAllowed"
@@ -401,7 +401,7 @@ async function create() {
         <USwitch
           v-model="draft.autoMergeEnabled"
           size="sm"
-          :label="t('settings.mergeThresholds.field.autoMerge')"
+          :label="t('settings.riskPolicy.field.autoMerge')"
         />
         <UButton
           color="primary"
@@ -411,7 +411,7 @@ async function create() {
           :disabled="!draft.name.trim()"
           @click="create"
         >
-          {{ t('settings.mergeThresholds.add') }}
+          {{ t('settings.riskPolicy.add') }}
         </UButton>
       </div>
     </div>

package/app/components/settings/UsageSettings.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// The Usage report: token usage this billing period, broken down into flat-rate
+// subscription harness usage (Claude Code / Codex / GLM / pooled Kimi & DeepSeek) and
+// metered API/proxy calls. Reporting only — the spend budget (Budget tab) still counts
+// only the metered rows. See docs/initiatives/usage-and-quota-tracking.md.
+import { computed, watch } from 'vue'
+import type { UsageBreakdownRow } from '@cat-factory/contracts'
+
+const { t, n, d } = useI18n()
+const usage = useUsageStore()
+const workspace = useWorkspaceStore()
+
+// Load (and reload) whenever the active workspace resolves/changes.
+watch(
+  () => workspace.workspaceId,
+  (ws) => {
+    if (ws) usage.load(ws)
+  },
+  { immediate: true },
+)
+
+const currency = computed(() => usage.report?.currency ?? 'EUR')
+const money = (value: number) => n(value, { key: 'currency', currency: currency.value })
+
+// The largest single-row token total in a section, so the per-row bars are relative to the
+// section's heaviest model (a full bar = the biggest consumer, not an absolute quota).
+function maxTokens(rows: UsageBreakdownRow[]): number {
+  return rows.reduce((m, r) => Math.max(m, r.inputTokens + r.outputTokens), 0)
+}
+function pctOf(row: UsageBreakdownRow, rows: UsageBreakdownRow[]): number {
+  const max = maxTokens(rows)
+  if (max <= 0) return 0
+  return Math.round(((row.inputTokens + row.outputTokens) / max) * 100)
+}
+
+const hasAny = computed(() => usage.rows.length > 0)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <p class="text-[11px] text-slate-400">
+      {{ t('settings.usage.body') }}
+    </p>
+
+    <p v-if="usage.report" class="text-[11px] text-slate-500">
+      {{ t('settings.usage.period', { date: d(new Date(usage.report.periodStart), 'short') }) }}
+    </p>
+
+    <p v-if="usage.loading" class="text-[11px] text-slate-500">{{ t('common.loading') }}</p>
+    <p v-else-if="usage.error" class="text-[11px] text-rose-400">{{ usage.error }}</p>
+    <p v-else-if="!hasAny" class="text-[11px] text-slate-500">{{ t('settings.usage.empty') }}</p>
+
+    <template v-else>
+      <!-- Subscriptions (flat-rate quota harnesses) -->
+      <section v-if="usage.subscription.length" class="space-y-3">
+        <div class="flex items-baseline justify-between">
+          <h3 class="text-sm font-semibold text-slate-200">
+            {{ t('settings.usage.subscription') }}
+          </h3>
+          <span class="text-[11px] text-slate-400">
+            {{
+              t('settings.usage.tokens', {
+                input: formatTokens(usage.subscriptionTotal.inputTokens),
+                output: formatTokens(usage.subscriptionTotal.outputTokens),
+              })
+            }}
+          </span>
+        </div>
+        <p class="text-[10px] text-slate-500">{{ t('settings.usage.illustrative') }}</p>
+        <div
+          v-for="row in usage.subscription"
+          :key="`sub-${row.vendor}-${row.provider}-${row.model}`"
+          class="space-y-1"
+          :data-testid="'usage-row-subscription'"
+        >
+          <div class="flex items-center justify-between gap-2 text-[11px]">
+            <span class="min-w-0 truncate font-medium text-slate-300">{{ row.model }}</span>
+            <span class="shrink-0 rounded bg-slate-700/60 px-1.5 py-0.5 text-[10px] text-slate-300">
+              {{ row.vendor ?? row.provider }}
+            </span>
+          </div>
+          <UProgress :model-value="pctOf(row, usage.subscription)" size="xs" color="primary" />
+          <div class="flex justify-between text-[10px] text-slate-500">
+            <span>
+              {{
+                t('settings.usage.tokens', {
+                  input: formatTokens(row.inputTokens),
+                  output: formatTokens(row.outputTokens),
+                })
+              }}
+              · {{ t('settings.usage.calls', { count: row.calls }) }}
+            </span>
+            <span>~{{ money(row.costEstimate) }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- Metered API / proxy calls (real spend) -->
+      <section v-if="usage.metered.length" class="space-y-3">
+        <div class="flex items-baseline justify-between">
+          <h3 class="text-sm font-semibold text-slate-200">
+            {{ t('settings.usage.metered') }}
+          </h3>
+          <span class="text-[11px] text-slate-400">
+            {{
+              t('settings.usage.tokens', {
+                input: formatTokens(usage.meteredTotal.inputTokens),
+                output: formatTokens(usage.meteredTotal.outputTokens),
+              })
+            }}
+            · {{ money(usage.meteredTotal.costEstimate) }}
+          </span>
+        </div>
+        <div
+          v-for="row in usage.metered"
+          :key="`met-${row.provider}-${row.model}`"
+          class="space-y-1"
+          :data-testid="'usage-row-metered'"
+        >
+          <div class="flex items-center justify-between gap-2 text-[11px]">
+            <span class="min-w-0 truncate font-medium text-slate-300">
+              {{ row.provider }}:{{ row.model }}
+            </span>
+          </div>
+          <UProgress :model-value="pctOf(row, usage.metered)" size="xs" color="neutral" />
+          <div class="flex justify-between text-[10px] text-slate-500">
+            <span>
+              {{
+                t('settings.usage.tokens', {
+                  input: formatTokens(row.inputTokens),
+                  output: formatTokens(row.outputTokens),
+                })
+              }}
+              · {{ t('settings.usage.calls', { count: row.calls }) }}
+            </span>
+            <span>{{ money(row.costEstimate) }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -9,10 +9,11 @@
 // standalone modals).
 import { reactive, ref, watch } from 'vue'
 import type { CreateTaskType, TaskLimitMode } from '~/types/domain'
-import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
+import RiskPolicyPanel from '~/components/settings/RiskPolicyPanel.vue'
 import IssueTrackerPanel from '~/components/settings/IssueTrackerPanel.vue'
 import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
 import BudgetSettings from '~/components/settings/BudgetSettings.vue'
+import UsageSettings from '~/components/settings/UsageSettings.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 
 const { t, te } = useI18n()
@@ -46,6 +47,12 @@ const tabs = computed(() => [
     icon: 'i-lucide-wallet',
     slot: 'budget',
   },
+  {
+    value: 'usage',
+    label: t('settings.workspaceSettings.tabs.usage'),
+    icon: 'i-lucide-bar-chart-3',
+    slot: 'usage',
+  },
   {
     value: 'merge',
     label: t('settings.workspaceSettings.tabs.merge'),
@@ -331,9 +338,14 @@ async function save() {
           <BudgetSettings />
         </template>
 
+        <!-- Usage report (metered + subscription token usage this period) -->
+        <template #usage>
+          <UsageSettings />
+        </template>
+
         <!-- Merge thresholds -->
         <template #merge>
-          <MergeThresholdsPanel />
+          <RiskPolicyPanel />
         </template>
 
         <!-- Issue tracker -->

package/app/composables/api/board.ts

@@ -47,7 +47,7 @@ export function boardApi({ send, ws }: ApiContext) {
         description?: string
         taskType?: CreateTaskType
         taskTypeFields?: TaskTypeFields
-        mergePresetId?: string
+        riskPolicyId?: string
         modelPresetId?: string
         pipelineId?: string
         agentConfig?: Record<string, string>

package/app/composables/api/execution.ts

@@ -5,6 +5,7 @@ import {
   getExecutionAgentContextContract,
   getExecutionLlmMetricsContract,
   getExecutionSearchQueriesContract,
+  getWorkspaceUsageContract,
   mergeBlockContract,
   rejectStepContract,
   requestStepChangesContract,
@@ -157,5 +158,9 @@ export function executionApi({ send, sendWith, ws, pwHeaders }: ApiContext) {
     // ---- spend safeguard --------------------------------------------------
     resumeSpend: (workspaceId: string) =>
       send(resumeSpendContract, { pathPrefix: ws(workspaceId) }),
+
+    // ---- usage report -----------------------------------------------------
+    getUsage: (workspaceId: string) =>
+      send(getWorkspaceUsageContract, { pathPrefix: ws(workspaceId) }),
   }
 }