@cat-factory/app 0.8.0 → 0.9.0

package/app/components/board/AddTaskModal.vue

@@ -18,6 +18,7 @@ const board = useBoardStore()
 const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const mergePresets = useMergePresetsStore()
+const modelPresets = useModelPresetsStore()
 const pipelines = usePipelinesStore()
 const agentConfig = useAgentConfigStore()
 const toast = useToast()
@@ -94,6 +95,7 @@ const recurringFrameId = computed(() => {
 // Run configuration picked up front. Empty string = use the default (workspace
 // default merge preset / no pinned pipeline).
 const mergePresetId = ref('')
+const modelPresetId = ref('')
 const pipelineId = ref('')
 
 const presetMenu = computed(() => [
@@ -121,6 +123,32 @@ const selectedPresetLabel = computed(() => {
   return mergePresets.presets.find((p) => p.id === mergePresetId.value)?.name ?? 'Workspace default'
 })
 
+// Model preset: which model each agent runs on. Empty = workspace default preset.
+const modelPresetMenu = computed(() => [
+  [
+    {
+      label: modelPresets.defaultPreset
+        ? `Default (${modelPresets.defaultPreset.name})`
+        : 'Workspace default',
+      icon: 'i-lucide-rotate-ccw',
+      onSelect: () => (modelPresetId.value = ''),
+    },
+    ...modelPresets.presets.map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-cpu',
+      onSelect: () => (modelPresetId.value = p.id),
+    })),
+  ],
+])
+const selectedModelPresetLabel = computed(() => {
+  if (!modelPresetId.value) {
+    return modelPresets.defaultPreset
+      ? `Default (${modelPresets.defaultPreset.name})`
+      : 'Workspace default'
+  }
+  return modelPresets.presets.find((p) => p.id === modelPresetId.value)?.name ?? 'Workspace default'
+})
+
 const pipelineMenu = computed(() => [
   [
     {
@@ -172,6 +200,7 @@ watch(open, (isOpen) => {
   timeboxHours.value = undefined
   docKind.value = ''
   mergePresetId.value = ''
+  modelPresetId.value = ''
   pipelineId.value = ''
   agentConfigValues.value = {}
   pendingContext.value = []
@@ -208,6 +237,7 @@ async function add() {
         taskType: taskType.value as CreateTaskType,
         ...(typeFields ? { taskTypeFields: typeFields } : {}),
         ...(mergePresetId.value ? { mergePresetId: mergePresetId.value } : {}),
+        ...(modelPresetId.value ? { modelPresetId: modelPresetId.value } : {}),
         ...(pipelineId.value ? { pipelineId: pipelineId.value } : {}),
         ...(Object.keys(agentConfigValues.value).length
           ? { agentConfig: agentConfigValues.value }
@@ -381,6 +411,21 @@ async function add() {
                 </UButton>
               </UDropdownMenu>
             </UFormField>
+
+            <UFormField label="Model preset">
+              <UDropdownMenu :items="modelPresetMenu" class="w-full">
+                <UButton
+                  color="neutral"
+                  variant="subtle"
+                  size="sm"
+                  icon="i-lucide-cpu"
+                  trailing-icon="i-lucide-chevron-down"
+                  class="w-full justify-between"
+                >
+                  {{ selectedModelPresetLabel }}
+                </UButton>
+              </UDropdownMenu>
+            </UFormField>
           </div>
 
           <div v-if="configDescriptors.length" class="space-y-3">

package/app/components/layout/CommandBar.vue

@@ -184,12 +184,12 @@ const commands = computed<Command[]>(() => {
     run: () => ui.openWorkspaceSettings(),
   })
   list.push({
-    id: 'model-defaults',
-    label: 'Default models for agents',
+    id: 'model-configuration',
+    label: 'Model Configuration',
     group: 'Workspace',
     icon: 'i-lucide-cpu',
-    keywords: 'model llm routing agent kind default',
-    run: () => ui.openModelDefaults(),
+    keywords: 'model llm routing agent kind default preset configuration',
+    run: () => ui.openModelConfig(),
   })
   list.push({
     id: 'service-fragment-defaults',

package/app/components/layout/SideBar.vue

@@ -291,9 +291,9 @@ watch(
           size="sm"
           icon="i-lucide-cpu"
           class="justify-start"
-          @click="ui.openModelDefaults()"
+          @click="ui.openModelConfig()"
         >
-          Default models
+          Model Configuration
         </UButton>
         <UButton
           block

package/app/components/panels/inspector/TaskRunSettings.vue

@@ -7,6 +7,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const mergePresets = useMergePresetsStore()
+const modelPresets = useModelPresetsStore()
 const pipelines = usePipelinesStore()
 const accounts = useAccountsStore()
 const tracker = useTrackerStore()
@@ -66,6 +67,32 @@ function setPreset(id: string) {
   board.updateBlock(props.block.id, { mergePresetId: id })
 }
 
+// ---- model preset ----------------------------------------------------------
+// Which model preset decides the model each agent step runs on. None selected → the
+// workspace default preset. Changing it affects only steps that haven't started yet
+// (a running step keeps the model it was dispatched with). A model pinned directly on
+// the task still overrides the preset.
+const selectedModelPreset = computed(() => modelPresets.resolve(props.block.modelPresetId))
+const modelPresetMenu = computed(() => [
+  [
+    {
+      label: modelPresets.defaultPreset
+        ? `Default (${modelPresets.defaultPreset.name})`
+        : 'Workspace default',
+      icon: 'i-lucide-rotate-ccw',
+      onSelect: () => setModelPreset(''),
+    },
+    ...modelPresets.presets.map((p) => ({
+      label: p.name,
+      icon: 'i-lucide-cpu',
+      onSelect: () => setModelPreset(p.id),
+    })),
+  ],
+])
+function setModelPreset(id: string) {
+  board.updateBlock(props.block.id, { modelPresetId: id })
+}
+
 // ---- pipeline --------------------------------------------------------------
 // The pipeline this task's Run controls default to. None selected → the user picks
 // at run time (the board falls back to the first defined pipeline).
@@ -189,6 +216,38 @@ const resolveOnMergeLabel = computed(() =>
       </div>
     </div>
 
+    <!-- model preset -->
+    <div>
+      <div class="mb-1 flex items-center justify-between">
+        <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Model preset
+        </span>
+        <UDropdownMenu :items="modelPresetMenu">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            icon="i-lucide-cpu"
+            trailing-icon="i-lucide-chevron-down"
+          />
+        </UDropdownMenu>
+      </div>
+      <div v-if="selectedModelPreset" class="text-[11px] text-slate-400">
+        <span class="text-slate-300">{{ selectedModelPreset.name }}</span>
+        — base {{ selectedModelPreset.baseModelId
+        }}<span v-if="Object.keys(selectedModelPreset.overrides).length">
+          , {{ Object.keys(selectedModelPreset.overrides).length }} override(s)</span
+        >.
+        <span v-if="!block.modelPresetId" class="text-slate-500">(workspace default)</span>
+      </div>
+      <div v-else class="text-[11px] text-slate-500">
+        No preset configured — agents run on the deployment's default routing.
+      </div>
+      <p class="mt-1 text-[11px] text-slate-500">
+        Changing this affects only steps that haven't started yet.
+      </p>
+    </div>
+
     <!-- issue-tracker writeback overrides -->
     <div>
       <div class="mb-1 flex items-center justify-between">

package/app/components/pipeline/PipelineBuilder.vue

@@ -234,8 +234,8 @@ async function clone(p: Pipeline) {
               variant="soft"
               size="xs"
               icon="i-lucide-cpu"
-              title="Pick which model each agent kind runs on"
-              @click="ui.openModelDefaults()"
+              title="Manage model presets (which model each agent runs on)"
+              @click="ui.openModelConfig()"
             >
               Configure models
             </UButton>

package/app/components/settings/ModelConfigurationPanel.vue

@@ -0,0 +1,487 @@
+<script setup lang="ts">
+// Workspace settings: the Model Configuration screen. A workspace keeps a library of
+// MODEL PRESETS — each a named base model applied to every agent kind plus optional
+// per-agent overrides. A task picks a preset (or the workspace default); the chosen
+// preset decides which model each pipeline step runs on, unless the task pins a model
+// directly. The built-in default ("Kimi K2.7") points every agent at Kimi K2.7; a
+// second built-in points everything at GLM-5.2.
+//
+// Styled as a dark full-screen window like the agent-output review overlay rather than
+// a light modal, so the text stays readable regardless of the OS colour-mode
+// preference. The list view shows each preset; the editor view creates/edits one with a
+// base-model picker plus a filterable per-agent override list.
+import { computed, ref, watch } from 'vue'
+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'
+
+const ui = useUiStore()
+const models = useModelsStore()
+const presets = useModelPresetsStore()
+const agents = useAgentsStore()
+const creds = useVendorCredentialsStore()
+const workspace = useWorkspaceStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.modelConfigOpen,
+  set: (v: boolean) => (v ? ui.openModelConfig() : ui.closeModelConfig()),
+})
+
+// null = the preset list; an object = the create/edit form for one preset.
+interface EditorState {
+  id?: string
+  name: string
+  baseModelId: string
+  overrides: Record<string, string>
+  isDefault: boolean
+}
+const editor = ref<EditorState | null>(null)
+const busy = ref(false)
+// Narrows the agent-kind override rows, for finding a kind fast in a long catalog.
+const filter = ref('')
+
+// The palette archetypes PLUS the engine-driven kinds that still run an LLM
+// (spec-writer, merger, the fixers/resolver). The pure gates run no model, so they
+// stay out — exactly the set the per-agent override list should cover.
+const configurableKinds = computed(() => [...agents.archetypes, ...MODEL_CONFIGURABLE_SYSTEM_KINDS])
+const filteredKinds = computed(() => {
+  const q = filter.value.trim().toLowerCase()
+  if (!q) return configurableKinds.value
+  return configurableKinds.value.filter(
+    (a) => a.label.toLowerCase().includes(q) || String(a.kind).toLowerCase().includes(q),
+  )
+})
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    editor.value = null
+    filter.value = ''
+    void models.ensureLoaded(workspace.workspaceId ?? undefined)
+    if (workspace.workspaceId) void creds.load(workspace.workspaceId)
+  }
+})
+
+onKeyStroke('Escape', () => {
+  if (!open.value) return
+  // Esc backs out of the editor first, then closes the panel.
+  if (editor.value) editor.value = null
+  else open.value = false
+})
+
+/** The selectable catalog models, as `{ id, label, suffix }` for a dropdown. */
+const selectableModels = computed(() => {
+  const configured = creds.configuredVendors
+  return models.models
+    .filter((m) => isSelectable(m, configured))
+    .map((m) => {
+      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(' · ')
+      return {
+        id: m.id,
+        label: m.label,
+        suffix,
+        icon: flavor.quotaBased ? 'i-lucide-infinity' : 'i-lucide-cpu',
+      }
+    })
+})
+
+/** A readable label for a model id (catalog label + provider, else the raw id). */
+function modelLabel(id: string | undefined): string {
+  if (!id) return '—'
+  const m = models.getModel(id)
+  if (!m) return id
+  return `${m.label} · ${displayFlavor(m, creds.configuredVendors).providerLabel}`
+}
+
+// ---- preset list -----------------------------------------------------------
+const sortedPresets = computed(() => [...presets.presets].sort((a, b) => a.createdAt - b.createdAt))
+
+function startCreate() {
+  editor.value = {
+    name: '',
+    baseModelId: selectableModels.value[0]?.id ?? 'kimi-k2.7',
+    overrides: {},
+    isDefault: false,
+  }
+  filter.value = ''
+}
+function startEdit(p: ModelPreset) {
+  editor.value = {
+    id: p.id,
+    name: p.name,
+    baseModelId: p.baseModelId,
+    overrides: { ...p.overrides },
+    isDefault: p.isDefault,
+  }
+  filter.value = ''
+}
+
+async function setDefault(p: ModelPreset) {
+  if (p.isDefault) return
+  busy.value = true
+  try {
+    await presets.update(p.id, { isDefault: true })
+  } catch (e) {
+    fail('Could not set the default preset', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function remove(p: ModelPreset) {
+  busy.value = true
+  try {
+    await presets.remove(p.id)
+  } catch (e) {
+    fail('Could not delete the preset', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+// ---- editor ----------------------------------------------------------------
+/** The base-model dropdown items. */
+const baseMenu = computed(() => [
+  selectableModels.value.map((m) => ({
+    label: `${m.label} · ${m.suffix}`,
+    icon: m.icon,
+    onSelect: () => {
+      if (editor.value) editor.value.baseModelId = m.id
+    },
+  })),
+])
+
+/** A per-kind override dropdown: "Use base model" reset plus the catalog. */
+function overrideMenu(kind: AgentKind) {
+  return [
+    [
+      {
+        label: 'Use base model',
+        icon: 'i-lucide-rotate-ccw',
+        onSelect: () => setOverride(kind, null),
+      },
+      ...selectableModels.value.map((m) => ({
+        label: `${m.label} · ${m.suffix}`,
+        icon: m.icon,
+        onSelect: () => setOverride(kind, m.id),
+      })),
+    ],
+  ]
+}
+function setOverride(kind: AgentKind, modelId: string | null) {
+  if (!editor.value) return
+  const next = { ...editor.value.overrides }
+  if (modelId) next[kind] = modelId
+  else delete next[kind]
+  editor.value.overrides = next
+}
+/** The label on a kind's override button: its override model, else "Base model". */
+function overrideLabel(kind: AgentKind): string {
+  const id = editor.value?.overrides[kind]
+  return id ? modelLabel(id) : 'Base model'
+}
+
+async function save() {
+  const e = editor.value
+  if (!e) return
+  if (!e.name.trim()) {
+    fail('Name required', new Error('Give the preset a name.'))
+    return
+  }
+  busy.value = true
+  try {
+    if (e.id) {
+      await presets.update(e.id, {
+        name: e.name.trim(),
+        baseModelId: e.baseModelId,
+        overrides: e.overrides,
+        isDefault: e.isDefault,
+      })
+    } else {
+      await presets.create({
+        name: e.name.trim(),
+        baseModelId: e.baseModelId,
+        overrides: e.overrides,
+        isDefault: e.isDefault,
+      })
+    }
+    editor.value = null
+  } catch (err) {
+    fail('Could not save the preset', err)
+  } finally {
+    busy.value = false
+  }
+}
+
+function fail(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="reader-fade">
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex flex-col bg-slate-950/96 backdrop-blur-sm"
+        role="dialog"
+        aria-modal="true"
+      >
+        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+          <div
+            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-indigo-500/15"
+          >
+            <UIcon name="i-lucide-cpu" class="h-5 w-5 text-indigo-300" />
+          </div>
+          <div class="min-w-0">
+            <h1 class="truncate text-base font-semibold text-white">Model Configuration</h1>
+            <p class="truncate text-xs text-slate-500">
+              Presets that map a model to every agent. A task picks one; tasks default to the
+              workspace default preset.
+            </p>
+          </div>
+          <UButton
+            v-if="editor"
+            icon="i-lucide-arrow-left"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            class="ml-auto"
+            @click="editor = null"
+          >
+            Back
+          </UButton>
+          <UButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :class="editor ? '' : 'ml-auto'"
+            title="Close (Esc)"
+            @click="open = false"
+          />
+        </header>
+
+        <div class="flex-1 overflow-auto px-6 py-6">
+          <div class="mx-auto max-w-3xl space-y-5">
+            <!-- ===== list view ===== -->
+            <template v-if="!editor">
+              <div class="flex items-center justify-between">
+                <p class="text-sm leading-relaxed text-slate-400">
+                  Each preset sets a <span class="text-slate-300">base model</span> for every agent,
+                  with optional per-agent overrides. A model pinned on an individual task still
+                  overrides the preset.
+                </p>
+                <UButton
+                  icon="i-lucide-plus"
+                  color="primary"
+                  size="sm"
+                  class="shrink-0"
+                  @click="startCreate"
+                >
+                  New preset
+                </UButton>
+              </div>
+
+              <p v-if="models.models.length === 0" class="py-4 text-center text-sm text-slate-500">
+                Loading model catalog…
+              </p>
+
+              <div v-else class="space-y-3">
+                <div
+                  v-for="p in sortedPresets"
+                  :key="p.id"
+                  class="rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+                >
+                  <div class="flex items-center gap-2">
+                    <span class="truncate text-sm font-semibold text-slate-100">{{ p.name }}</span>
+                    <UBadge v-if="p.isDefault" color="primary" variant="subtle" size="xs">
+                      Default
+                    </UBadge>
+                    <div class="ml-auto flex items-center gap-1">
+                      <UButton
+                        v-if="!p.isDefault"
+                        size="xs"
+                        variant="ghost"
+                        color="neutral"
+                        icon="i-lucide-star"
+                        :loading="busy"
+                        title="Set as workspace default"
+                        @click="setDefault(p)"
+                      />
+                      <UButton
+                        size="xs"
+                        variant="ghost"
+                        color="neutral"
+                        icon="i-lucide-pencil"
+                        title="Edit preset"
+                        @click="startEdit(p)"
+                      />
+                      <UButton
+                        size="xs"
+                        variant="ghost"
+                        color="error"
+                        icon="i-lucide-trash-2"
+                        :disabled="p.isDefault"
+                        :loading="busy"
+                        :title="
+                          p.isDefault ? 'The default preset cannot be deleted' : 'Delete preset'
+                        "
+                        @click="remove(p)"
+                      />
+                    </div>
+                  </div>
+                  <div class="mt-1.5 text-[11px] text-slate-400">
+                    Base: <span class="text-slate-300">{{ modelLabel(p.baseModelId) }}</span>
+                    <span v-if="Object.keys(p.overrides).length">
+                      · {{ Object.keys(p.overrides).length }} override<span
+                        v-if="Object.keys(p.overrides).length !== 1"
+                        >s</span
+                      >
+                    </span>
+                  </div>
+                </div>
+                <p
+                  v-if="sortedPresets.length === 0"
+                  class="py-6 text-center text-sm text-slate-500"
+                >
+                  No presets yet — create one to map models to your agents.
+                </p>
+              </div>
+            </template>
+
+            <!-- ===== editor view ===== -->
+            <template v-else>
+              <div class="space-y-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4">
+                <div>
+                  <label
+                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+                  >
+                    Name
+                  </label>
+                  <UInput
+                    v-model="editor.name"
+                    placeholder="e.g. Kimi K2.7"
+                    size="sm"
+                    class="w-full"
+                  />
+                </div>
+
+                <div>
+                  <label
+                    class="mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+                  >
+                    Base model (applied to every agent)
+                  </label>
+                  <UDropdownMenu
+                    :items="baseMenu"
+                    :ui="{ content: 'max-h-80 overflow-y-auto z-[60]' }"
+                  >
+                    <UButton
+                      size="sm"
+                      color="primary"
+                      variant="subtle"
+                      trailing-icon="i-lucide-chevron-down"
+                      class="w-full justify-between"
+                    >
+                      <span class="truncate">{{ modelLabel(editor.baseModelId) }}</span>
+                    </UButton>
+                  </UDropdownMenu>
+                </div>
+
+                <label class="flex items-center gap-2 text-sm text-slate-300">
+                  <UCheckbox v-model="editor.isDefault" />
+                  Make this the workspace default
+                </label>
+              </div>
+
+              <div>
+                <div class="mb-1 flex items-center justify-between">
+                  <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+                    Per-agent overrides
+                  </span>
+                </div>
+                <UInput
+                  v-model="filter"
+                  icon="i-lucide-search"
+                  size="sm"
+                  placeholder="Filter agents…"
+                  class="mb-3 w-full"
+                />
+                <div
+                  class="divide-y divide-slate-800 rounded-xl border border-slate-800 bg-slate-900/50"
+                >
+                  <div
+                    v-for="a in filteredKinds"
+                    :key="a.kind"
+                    class="flex items-center gap-3 px-4 py-3"
+                  >
+                    <UIcon
+                      :name="a.icon"
+                      class="h-4 w-4 shrink-0"
+                      :style="{ color: a.color }"
+                      :title="a.description"
+                    />
+                    <div class="min-w-0 flex-1" :title="a.description">
+                      <p class="truncate text-sm text-slate-200">{{ a.label }}</p>
+                    </div>
+                    <UDropdownMenu
+                      :items="overrideMenu(a.kind)"
+                      :ui="{ content: 'max-h-80 overflow-y-auto z-[60]' }"
+                    >
+                      <UButton
+                        size="xs"
+                        :color="editor.overrides[a.kind] ? 'primary' : 'neutral'"
+                        :variant="editor.overrides[a.kind] ? 'subtle' : 'soft'"
+                        trailing-icon="i-lucide-chevron-down"
+                        class="w-64 shrink-0 justify-between"
+                      >
+                        <span class="truncate">{{ overrideLabel(a.kind) }}</span>
+                      </UButton>
+                    </UDropdownMenu>
+                  </div>
+                  <p
+                    v-if="filteredKinds.length === 0"
+                    class="px-4 py-6 text-center text-sm text-slate-500"
+                  >
+                    No agents match "{{ filter }}".
+                  </p>
+                </div>
+              </div>
+
+              <div class="flex items-center justify-end gap-2">
+                <UButton color="neutral" variant="ghost" size="sm" @click="editor = null">
+                  Cancel
+                </UButton>
+                <UButton color="primary" size="sm" :loading="busy" @click="save">
+                  {{ editor.id ? 'Save changes' : 'Create preset' }}
+                </UButton>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.reader-fade-enter-active,
+.reader-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.reader-fade-enter-from,
+.reader-fade-leave-to {
+  opacity: 0;
+}
+</style>