@cat-factory/app 0.7.4 → 0.8.0

package/app/components/layout/BoardToolbar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useBoardFlow } from '~/composables/useBoardFlow'
 import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
-import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
-import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -127,20 +125,6 @@ const decisionItems = computed(() =>
     <!-- human-actionable notifications (merge review, pipeline complete, CI failed) -->
     <NotificationsInbox />
 
-    <!-- LLM vendor subscriptions (Claude Code / Codex token pool) -->
-    <UButton
-      color="neutral"
-      variant="ghost"
-      size="sm"
-      icon="i-lucide-key-round"
-      title="Connect LLM vendor subscriptions (Claude Code / Codex)"
-      @click="ui.openVendorCredentials()"
-    >
-      Vendors
-    </UButton>
-    <VendorCredentialsModal />
-    <PersonalCredentialModal />
-
     <!-- spend safeguard usage -->
     <UButton
       v-if="showSpend"

package/app/components/layout/SideBar.vue

@@ -306,6 +306,18 @@ watch(
         >
           Default service best practices
         </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-key-round"
+          class="justify-start"
+          title="Connect LLM vendor subscriptions + provider API keys"
+          @click="ui.openVendorCredentials()"
+        >
+          Vendors &amp; keys
+        </UButton>
         <UButton
           block
           color="primary"
@@ -317,6 +329,17 @@ watch(
         >
           My local runners
         </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-waypoints"
+          class="justify-start"
+          @click="ui.openOpenRouter()"
+        >
+          OpenRouter models
+        </UButton>
       </div>
     </section>
 

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+// Workspace settings: "OpenRouter models" — browse OpenRouter's 300+ gateway models and
+// enable a subset for this workspace. OpenRouter is reached via the workspace's API-key pool
+// (connect an OpenRouter key first under "Provider keys"); "Refresh" probes its live catalog
+// server-side, then tick the models to enable. Enabled models — with their context window and
+// price — appear automatically in the model picker and meter against the spend budget.
+import { computed, ref, watch } from 'vue'
+import type { OpenRouterModelMeta } from '~/types/openrouter'
+
+const ui = useUiStore()
+const workspace = useWorkspaceStore()
+const store = useOpenRouterStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.openRouterOpen,
+  set: (v: boolean) => (v ? ui.openOpenRouter() : ui.closeOpenRouter()),
+})
+
+// The enabled slugs the user has ticked (seeded from the persisted catalog on open).
+const selected = ref<Set<string>>(new Set())
+const filter = ref('')
+const busy = ref(false)
+
+// Load the persisted catalog whenever the panel opens; seed the tick selection from it.
+watch(open, (isOpen) => {
+  if (!isOpen || !workspace.workspaceId) return
+  void store.load(workspace.workspaceId).then(() => {
+    selected.value = new Set(store.enabled.map((m) => m.id))
+  })
+})
+
+// The list to show: the live browse list once refreshed, else the persisted enabled set.
+const source = computed<OpenRouterModelMeta[]>(() =>
+  store.browse.length ? store.browse : store.enabled,
+)
+
+const visible = computed(() => {
+  const q = filter.value.trim().toLowerCase()
+  if (!q) return source.value
+  return source.value.filter(
+    (m) => m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q),
+  )
+})
+
+const selectedCount = computed(() => selected.value.size)
+
+function contextLabel(tokens: number | undefined): string {
+  if (!tokens) return ''
+  return tokens >= 1000 ? `${Math.round(tokens / 1000)}K ctx` : `${tokens} ctx`
+}
+
+function priceLabel(m: OpenRouterModelMeta): string {
+  return `${m.inputPerMillion}/${m.outputPerMillion} per Mtok`
+}
+
+function toggle(id: string, on: boolean) {
+  const next = new Set(selected.value)
+  if (on) next.add(id)
+  else next.delete(id)
+  selected.value = next
+}
+
+async function refresh() {
+  if (!workspace.workspaceId) return
+  const result = await store.refresh(workspace.workspaceId)
+  if (!result.reachable) {
+    toast.add({
+      title: 'Could not reach OpenRouter',
+      description: store.refreshError ?? 'Connect an OpenRouter key under Provider keys first.',
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+
+async function save() {
+  if (!workspace.workspaceId) return
+  busy.value = true
+  try {
+    // Persist the ticked models, carrying the metadata from whichever list they came from.
+    const byId = new Map(source.value.map((m) => [m.id, m]))
+    const models = [...selected.value]
+      .map((id) => byId.get(id))
+      .filter((m): m is OpenRouterModelMeta => !!m)
+    await store.save(workspace.workspaceId, models)
+    toast.add({ title: 'OpenRouter catalog saved', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not save catalog',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="OpenRouter models" :ui="{ content: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-xs text-slate-400">
+          Reach <strong>300+ models</strong> through one gateway. Connect an OpenRouter key under
+          <span class="text-slate-300">Provider keys</span> first, then
+          <span class="text-slate-300">Refresh</span> to browse the live catalog and enable the
+          models you want. Enabled models appear in the model picker with their context window and
+          price, and meter against your spend budget.
+        </p>
+
+        <div class="flex items-center gap-2">
+          <UButton
+            color="neutral"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-refresh-cw"
+            :loading="store.refreshing"
+            @click="refresh()"
+          >
+            Refresh catalog
+          </UButton>
+          <UInput
+            v-model="filter"
+            size="sm"
+            class="flex-1"
+            icon="i-lucide-search"
+            placeholder="Filter by name or slug…"
+          />
+        </div>
+
+        <p v-if="store.refreshError" class="text-xs text-rose-400">{{ store.refreshError }}</p>
+
+        <div v-if="visible.length" class="max-h-96 space-y-1 overflow-y-auto pr-1">
+          <label
+            v-for="m in visible"
+            :key="m.id"
+            class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-2.5 py-1.5 text-sm"
+          >
+            <UCheckbox
+              :model-value="selected.has(m.id)"
+              @update:model-value="(v: boolean | 'indeterminate') => toggle(m.id, v === true)"
+            />
+            <span class="min-w-0 flex-1">
+              <span class="block truncate text-slate-200">{{ m.name }}</span>
+              <span class="block truncate font-mono text-[11px] text-slate-500">{{ m.id }}</span>
+            </span>
+            <span class="shrink-0 text-right text-[11px] text-slate-500">
+              <span v-if="m.contextLength" class="block">{{ contextLabel(m.contextLength) }}</span>
+              <span class="block">{{ priceLabel(m) }}</span>
+            </span>
+          </label>
+        </div>
+        <p v-else class="text-xs text-slate-500">
+          No models yet — hit <span class="text-slate-300">Refresh catalog</span> to load
+          OpenRouter's live list.
+        </p>
+
+        <div class="flex items-center justify-between">
+          <span class="text-xs text-slate-500">{{ selectedCount }} enabled</span>
+          <UButton
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-save"
+            :loading="busy"
+            @click="save()"
+          >
+            Save
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/composables/api/models.ts

@@ -16,6 +16,11 @@ import type {
   TestLocalModelEndpointInput,
   UpsertLocalModelEndpointInput,
 } from '~/types/localModels'
+import type {
+  OpenRouterCatalog,
+  OpenRouterRefreshResult,
+  UpsertOpenRouterCatalogInput,
+} from '~/types/openrouter'
 import type { ApiContext } from './context'
 
 /**
@@ -100,6 +105,19 @@ export function modelsApi({ http, ws }: ApiContext) {
         body,
       }),
 
+    // ---- OpenRouter dynamic catalog (per-workspace gateway models) --------
+    // Browse OpenRouter's live catalog (`refresh`, leasing the workspace's pooled
+    // OpenRouter key server-side) and enable a subset; enabled models then surface
+    // in the per-workspace `/models` catalog with their context + price.
+    getOpenRouterCatalog: (workspaceId: string) =>
+      http<OpenRouterCatalog>(`${ws(workspaceId)}/openrouter/catalog`),
+
+    setOpenRouterCatalog: (workspaceId: string, body: UpsertOpenRouterCatalogInput) =>
+      http<OpenRouterCatalog>(`${ws(workspaceId)}/openrouter/catalog`, { method: 'PUT', body }),
+
+    refreshOpenRouterCatalog: (workspaceId: string) =>
+      http<OpenRouterRefreshResult>(`${ws(workspaceId)}/openrouter/refresh`, { method: 'POST' }),
+
     // ---- per-agent-kind default models (workspace routing overrides) ------
     // The workspace's map of agentKind → model id; a kind absent from the map
     // falls back to the deployment's env routing. `setModelDefaults` replaces the

package/app/pages/index.vue

@@ -32,6 +32,9 @@ import DatadogPanel from '~/components/settings/DatadogPanel.vue'
 import ModelDefaultsPanel from '~/components/settings/ModelDefaultsPanel.vue'
 import ServiceFragmentDefaultsPanel from '~/components/settings/ServiceFragmentDefaultsPanel.vue'
 import LocalModelEndpointsPanel from '~/components/settings/LocalModelEndpointsPanel.vue'
+import OpenRouterCatalogPanel from '~/components/settings/OpenRouterCatalogPanel.vue'
+import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
+import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
 
 const workspace = useWorkspaceStore()
 const github = useGitHubStore()
@@ -122,6 +125,9 @@ watch(
       <ModelDefaultsPanel />
       <ServiceFragmentDefaultsPanel />
       <LocalModelEndpointsPanel />
+      <OpenRouterCatalogPanel />
+      <VendorCredentialsModal />
+      <PersonalCredentialModal />
     </template>
 
     <!-- Backend unreachable / bootstrap failed -->

package/app/stores/openrouter.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { OpenRouterModelMeta, OpenRouterRefreshResult } from '~/types/openrouter'
+
+// The workspace's OpenRouter dynamic catalog: the enabled subset of OpenRouter's 300+
+// gateway models. `enabled` is what's persisted (and surfaced in the model picker);
+// `browse` is the live catalog from the last `refresh` (not persisted) the user picks from.
+// Scoped to the workspace (its key lives in the workspace API-key pool).
+export const useOpenRouterStore = defineStore('openrouter', () => {
+  const api = useApi()
+  const enabled = ref<OpenRouterModelMeta[]>([])
+  const browse = ref<OpenRouterModelMeta[]>([])
+  const loading = ref(false)
+  const refreshing = ref(false)
+  const refreshError = ref<string | null>(null)
+
+  async function load(workspaceId: string) {
+    loading.value = true
+    try {
+      const catalog = await api.getOpenRouterCatalog(workspaceId)
+      enabled.value = catalog.models
+    } catch {
+      // Auth disabled / not signed in / feature off → nothing surfaces.
+      enabled.value = []
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** Probe OpenRouter's live catalog (leases the workspace's pooled key server-side). */
+  async function refresh(workspaceId: string): Promise<OpenRouterRefreshResult> {
+    refreshing.value = true
+    refreshError.value = null
+    try {
+      const result = await api.refreshOpenRouterCatalog(workspaceId)
+      browse.value = result.models
+      if (!result.reachable) refreshError.value = result.error ?? 'OpenRouter is unreachable'
+      return result
+    } finally {
+      refreshing.value = false
+    }
+  }
+
+  /** Persist the enabled subset (the supplied models carry their browse-list metadata). */
+  async function save(workspaceId: string, models: OpenRouterModelMeta[]) {
+    const catalog = await api.setOpenRouterCatalog(workspaceId, { models })
+    enabled.value = catalog.models
+    return catalog
+  }
+
+  return { enabled, browse, loading, refreshing, refreshError, load, refresh, save }
+})

package/app/stores/ui.ts

@@ -81,6 +81,8 @@ export const useUiStore = defineStore('ui', () => {
   const vendorCredentialsOpen = ref(false)
   // Per-user settings panel: the signed-in user's own-machine local model runners.
   const localModelsOpen = ref(false)
+  // Per-workspace settings panel: the OpenRouter dynamic catalog (browse/enable gateway models).
+  const openRouterOpen = ref(false)
 
   // Dedicated result-view overlay: a step whose agent kind declares a bespoke
   // visualization (via the archetype's `resultView`) opens here instead of the generic
@@ -326,6 +328,12 @@ export const useUiStore = defineStore('ui', () => {
   function closeLocalModels() {
     localModelsOpen.value = false
   }
+  function openOpenRouter() {
+    openRouterOpen.value = true
+  }
+  function closeOpenRouter() {
+    openRouterOpen.value = false
+  }
   function openRequirementReview(blockId: string) {
     resultView.value = { view: 'requirements-review', blockId, instanceId: null, stepIndex: null }
   }
@@ -376,6 +384,7 @@ export const useUiStore = defineStore('ui', () => {
     serviceFragmentDefaultsOpen,
     vendorCredentialsOpen,
     localModelsOpen,
+    openRouterOpen,
     resultView,
     closeResultView,
     stepDetail,
@@ -435,6 +444,8 @@ export const useUiStore = defineStore('ui', () => {
     closeVendorCredentials,
     openLocalModels,
     closeLocalModels,
+    openOpenRouter,
+    closeOpenRouter,
     openRequirementReview,
     openClarityReview,
     closeRequirementReview,

package/app/types/models.ts

@@ -19,15 +19,15 @@ export interface ModelCost {
  * A selectable LLM model, resolved to the flavour in use for this deployment
  * (served by `GET /models`). Mirrors `ModelOption` in `@cat-factory/contracts`.
  * The base `flavor`/`provider`/`model` is the always-available fallback
- * (cloudflare/direct), or the subscription itself for subscription-only models.
- * `subscription` (when present) is the alternative the picker prefers once the
- * workspace has a token for its vendor.
+ * (cloudflare/direct/openrouter), or the subscription itself for subscription-only
+ * models. `subscription` (when present) is the alternative the picker prefers once
+ * the workspace has a token for its vendor.
  */
 export interface ModelOption {
   id: string
   label: string
   description: string
-  flavor: 'cloudflare' | 'direct' | 'subscription'
+  flavor: 'cloudflare' | 'direct' | 'openrouter' | 'subscription'
   /**
    * Whether this model is actually selectable for the workspace: a direct API key for
    * its provider, a connected subscription vendor, or Cloudflare AI enabled. Absent on

package/app/types/openrouter.ts

@@ -0,0 +1,45 @@
+// ---------------------------------------------------------------------------
+// Per-workspace OpenRouter dynamic catalog. OpenRouter is a single OpenAI-
+// compatible gateway to 300+ models reached via the workspace's API-key pool. A
+// workspace browses the live catalog and enables a subset; the enabled models
+// surface automatically in the per-workspace model picker (with their context +
+// price) and feed the spend budget.
+//
+// Mirrors the `@cat-factory/contracts` `openrouter` schemas exactly, so a payload
+// returned by the backend drops straight into the Pinia store without translation.
+// ---------------------------------------------------------------------------
+
+/** Metadata for one OpenRouter model (prices per 1M tokens, in the spend currency). */
+export interface OpenRouterModelMeta {
+  /** OpenRouter `vendor/model` slug, e.g. `anthropic/claude-opus-4.8`. */
+  id: string
+  /** Human-readable model name from OpenRouter's catalog. */
+  name: string
+  /** Total context window (input + output tokens), when reported. */
+  contextLength?: number
+  /** Input price per 1M tokens, in the spend currency. */
+  inputPerMillion: number
+  /** Output price per 1M tokens, in the spend currency. */
+  outputPerMillion: number
+}
+
+/** A workspace's enabled OpenRouter models (the persisted subset). */
+export interface OpenRouterCatalog {
+  models: OpenRouterModelMeta[]
+  createdAt: number
+  updatedAt: number
+}
+
+/** Replace a workspace's enabled OpenRouter models with this subset (+ metadata). */
+export interface UpsertOpenRouterCatalogInput {
+  models: OpenRouterModelMeta[]
+}
+
+/** The result of probing OpenRouter's live `/models` for the browse list. */
+export interface OpenRouterRefreshResult {
+  reachable: boolean
+  /** Every model OpenRouter currently serves (empty when unreachable). */
+  models: OpenRouterModelMeta[]
+  /** Human-readable failure reason when `reachable` is false. */
+  error?: string
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.7.4",
+  "version": "0.8.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",
     "url": "git+https://github.com/kibertoad/cat-factory.git",
     "directory": "frontend/app"
   },
-  "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.",
   "files": [
     "app",
     "nuxt.config.ts"