@cat-factory/app 0.39.0 → 0.40.0

package/app/components/observability/StepMetricsBar.vue

@@ -43,6 +43,13 @@ const headroomTone = computed(() => headroomColor(headroom.value, m.value.trunca
       <span class="tabular-nums text-slate-400" title="Prompt / completion tokens">
         {{ formatTokens(m.promptTokens) }}↑ {{ formatTokens(m.completionTokens) }}↓
       </span>
+      <span
+        v-if="(m.cachedPromptTokens ?? 0) > 0"
+        class="tabular-nums text-emerald-400/80"
+        title="Prompt tokens served from the provider's cache"
+      >
+        ({{ formatTokens(m.cachedPromptTokens ?? 0) }} cached)
+      </span>
       <div class="ml-auto flex items-center gap-1">
         <UBadge v-if="m.errors > 0" color="error" variant="subtle" size="sm">
           {{ m.errors }} error{{ m.errors === 1 ? '' : 's' }}

package/app/components/providers/ApiKeysSection.vue

@@ -34,6 +34,13 @@ interface ProviderMeta {
   label: string
   url: string
   steps: string[]
+  /**
+   * Whether this provider caches the re-sent prompt prefix. Connecting a key here
+   * upgrades its models to the caching `direct` flavour, so a long agentic run stops
+   * re-billing its whole growing prompt every turn. Mirrors the backend
+   * `providerCachePolicy`; the gateways are pass-through (no caching we rely on yet).
+   */
+  caches?: boolean
 }
 
 /** Direct vendors: the key reaches that one vendor's own endpoint. */
@@ -46,6 +53,7 @@ const DIRECT_PROVIDERS: ProviderMeta[] = [
       'Open platform.openai.com → API keys and create a new secret key.',
       'Copy the key (starts with sk-…); it is shown only once.',
     ],
+    caches: true,
   },
   {
     value: 'anthropic',
@@ -55,6 +63,7 @@ const DIRECT_PROVIDERS: ProviderMeta[] = [
       'Open console.anthropic.com → Settings → API Keys and create a key.',
       'Copy the key (starts with sk-ant-…).',
     ],
+    caches: true,
   },
   {
     value: 'qwen',
@@ -64,6 +73,7 @@ const DIRECT_PROVIDERS: ProviderMeta[] = [
       'Open the DashScope console (international) → API-KEY and create a key.',
       'Copy the key; it authenticates the OpenAI-compatible Qwen endpoint.',
     ],
+    caches: true,
   },
   {
     value: 'deepseek',
@@ -73,6 +83,7 @@ const DIRECT_PROVIDERS: ProviderMeta[] = [
       'Open platform.deepseek.com → API keys and create a key.',
       'Copy the key (starts with sk-…).',
     ],
+    caches: true,
   },
   {
     value: 'moonshot',
@@ -268,6 +279,14 @@ async function remove(k: ApiKey) {
       </li>
     </ol>
 
+    <!-- caching capability: connecting a direct key that caches upgrades its models to
+         the caching flavour, so long agentic runs stop re-billing the whole prompt. -->
+    <p v-if="selected.caches" class="flex items-center gap-1.5 text-[12px] text-emerald-400/90">
+      <UIcon name="i-lucide-zap" class="h-3.5 w-3.5 shrink-0" />
+      Enables prompt caching for {{ selected.label }} models — a long multi-turn run reuses its
+      cached prompt prefix instead of re-sending it every turn.
+    </p>
+
     <!-- add form -->
     <div class="space-y-2">
       <UFormField label="Label (optional)">

package/app/components/settings/ModelConfigurationPanel.vue

@@ -15,7 +15,7 @@ import { onKeyStroke } from '@vueuse/core'
 import type { AgentKind } from '~/types/domain'
 import type { ModelPreset } from '~/types/model-presets'
 import { MODEL_CONFIGURABLE_SYSTEM_KINDS } from '~/utils/catalog'
-import { contextLabel, costLabel, displayFlavor, isSelectable } from '~/stores/models'
+import { cachingLabel, contextLabel, costLabel, displayFlavor, isSelectable } from '~/stores/models'
 
 const ui = useUiStore()
 const models = useModelsStore()
@@ -84,7 +84,10 @@ const selectableModels = computed(() => {
       const flavor = displayFlavor(m, configured)
       const ctx = contextLabel(flavor.contextTokens)
       const price = costLabel(flavor) ?? (flavor.quotaBased ? 'quota' : undefined)
-      const suffix = [flavor.providerLabel, ctx, price].filter(Boolean).join(' · ')
+      // Surface caching in the suffix: a cache-less flavour (the Workers-AI hot path)
+      // re-bills its whole growing prompt every turn, which the user can act on.
+      const caching = cachingLabel(flavor)
+      const suffix = [flavor.providerLabel, ctx, price, caching].filter(Boolean).join(' · ')
       return {
         id: m.id,
         label: m.label,

package/app/stores/models.ts

@@ -12,6 +12,13 @@ export interface DisplayFlavor {
   /** True ⇒ flat-rate quota; its cost is a quota burn rate, not budget spend. */
   quotaBased: boolean
   vendor?: SubscriptionVendor
+  /**
+   * Whether this flavour's provider caches the re-sent prompt prefix. False on a
+   * Cloudflare/Workers-AI flavour (the hot path re-bills the whole prompt every turn);
+   * true once a direct key upgrades the model to its caching `direct` flavour. Undefined
+   * ⇒ unknown (older catalog). Surfaced as a badge in the picker.
+   */
+  cachesPrompts?: boolean
 }
 
 /**
@@ -30,6 +37,7 @@ export function displayFlavor(m: ModelOption, configured: Set<SubscriptionVendor
       cost: m.subscription.cost,
       quotaBased: true,
       vendor: m.subscription.vendor,
+      cachesPrompts: m.subscription.cachesPrompts,
     }
   }
   return {
@@ -40,6 +48,7 @@ export function displayFlavor(m: ModelOption, configured: Set<SubscriptionVendor
     cost: m.cost,
     quotaBased: m.quotaBased ?? false,
     vendor: m.vendor,
+    cachesPrompts: m.cachesPrompts,
   }
 }
 
@@ -69,6 +78,20 @@ export function costLabel(flavor: DisplayFlavor): string | undefined {
   return flavor.quotaBased ? `quota burn ~${body}` : body
 }
 
+/**
+ * A short caching label for the picker: whether the flavour's provider caches the
+ * re-sent prompt prefix. `null` when unknown (older catalog) so the caller can omit it
+ * entirely. A long agentic run on a non-caching flavour re-bills its whole growing
+ * prompt every turn (slower, more rate-limited), so we surface it as an informational
+ * hint the user can act on (connect a direct key / pick a caching model). The model
+ * picker is a text-only dropdown-menu item list, so this is a label token in the option
+ * suffix rather than a styled badge.
+ */
+export function cachingLabel(flavor: DisplayFlavor): string | null {
+  if (flavor.cachesPrompts === undefined) return null
+  return flavor.cachesPrompts ? 'Prompt caching' : 'No prompt caching'
+}
+
 /**
  * The model picker catalog. Served by `GET /models`, where each model is already
  * resolved to the flavour in use for this deployment (direct when the provider's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.38",
     "wretch": "^3.0.9",
-    "@cat-factory/contracts": "0.38.0"
+    "@cat-factory/contracts": "0.39.0"
   },
   "devDependencies": {
     "@toad-contracts/testing": "0.3.1",