@cat-factory/app 0.6.0

package/app/components/settings/MergeThresholdsPanel.vue

@@ -0,0 +1,378 @@
+<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
+// 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 { reactive, ref, watch } from 'vue'
+import type { MergeThresholdPreset, RequirementConcernLevel } from '~/types/merge'
+
+// Concern-level options for the requirements auto-pass threshold (none < low < medium < high).
+const CONCERN_LEVELS: { value: RequirementConcernLevel; label: string }[] = [
+  { value: 'none', label: 'None (always stop)' },
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High (never stop)' },
+]
+
+const ui = useUiStore()
+const store = useMergePresetsStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.mergeThresholdsOpen,
+  set: (v: boolean) => (v ? ui.openMergeThresholds() : ui.closeMergeThresholds()),
+})
+
+// Local editable copy per preset, kept in sync with the store. Percentages are
+// edited 0..100 and stored 0..1.
+interface Draft {
+  name: string
+  maxComplexity: number
+  maxRisk: number
+  maxImpact: number
+  ciMaxAttempts: number
+  maxRequirementIterations: number
+  maxRequirementConcernAllowed: RequirementConcernLevel
+}
+const drafts = reactive<Record<string, Draft>>({})
+
+function toDraft(p: MergeThresholdPreset): Draft {
+  return {
+    name: p.name,
+    maxComplexity: Math.round(p.maxComplexity * 100),
+    maxRisk: Math.round(p.maxRisk * 100),
+    maxImpact: Math.round(p.maxImpact * 100),
+    ciMaxAttempts: p.ciMaxAttempts,
+    maxRequirementIterations: p.maxRequirementIterations,
+    maxRequirementConcernAllowed: p.maxRequirementConcernAllowed,
+  }
+}
+
+watch(
+  () => store.presets,
+  (presets) => {
+    for (const p of presets) if (!drafts[p.id]) drafts[p.id] = toDraft(p)
+    for (const id of Object.keys(drafts)) if (!presets.some((p) => p.id === id)) delete drafts[id]
+  },
+  { immediate: true, deep: false },
+)
+
+const busy = ref<string | null>(null)
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function save(p: MergeThresholdPreset) {
+  const d = drafts[p.id]
+  if (!d) return
+  busy.value = p.id
+  try {
+    await store.update(p.id, {
+      name: d.name.trim() || p.name,
+      maxComplexity: d.maxComplexity / 100,
+      maxRisk: d.maxRisk / 100,
+      maxImpact: d.maxImpact / 100,
+      ciMaxAttempts: d.ciMaxAttempts,
+      maxRequirementIterations: d.maxRequirementIterations,
+      maxRequirementConcernAllowed: d.maxRequirementConcernAllowed,
+    })
+    toast.add({ title: 'Preset saved', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not save preset', e)
+  } finally {
+    busy.value = null
+  }
+}
+
+async function makeDefault(p: MergeThresholdPreset) {
+  busy.value = p.id
+  try {
+    await store.update(p.id, { isDefault: true })
+  } catch (e) {
+    notifyError('Could not set default', e)
+  } finally {
+    busy.value = null
+  }
+}
+
+async function remove(p: MergeThresholdPreset) {
+  busy.value = p.id
+  try {
+    await store.remove(p.id)
+  } catch (e) {
+    notifyError('Could not delete preset', e)
+  } finally {
+    busy.value = null
+  }
+}
+
+// ---- create form ----------------------------------------------------------
+const creating = ref(false)
+const draft = reactive<Draft>({
+  name: '',
+  maxComplexity: 50,
+  maxRisk: 40,
+  maxImpact: 50,
+  ciMaxAttempts: 10,
+  maxRequirementIterations: 6,
+  maxRequirementConcernAllowed: 'none',
+})
+
+async function create() {
+  if (!draft.name.trim()) return
+  creating.value = true
+  try {
+    await store.create({
+      name: draft.name.trim(),
+      maxComplexity: draft.maxComplexity / 100,
+      maxRisk: draft.maxRisk / 100,
+      maxImpact: draft.maxImpact / 100,
+      ciMaxAttempts: draft.ciMaxAttempts,
+      maxRequirementIterations: draft.maxRequirementIterations,
+      maxRequirementConcernAllowed: draft.maxRequirementConcernAllowed,
+    })
+    draft.name = ''
+    toast.add({ title: 'Preset created', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not create preset', e)
+  } finally {
+    creating.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Merge thresholds" :ui="{ content: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-xs text-slate-400">
+          Named auto-merge policies a task can choose. After CI passes, the
+          <span class="text-slate-300">merger</span> agent scores the PR on complexity, risk and
+          impact (0–100%); the PR auto-merges only when every score is at or below the preset's
+          ceilings — otherwise a review notification is raised. The default preset governs any task
+          that picks none.
+        </p>
+
+        <div
+          v-for="p in store.presets"
+          :key="p.id"
+          class="rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+        >
+          <div class="mb-3 flex items-center gap-2">
+            <UInput
+              v-model="drafts[p.id]!.name"
+              size="sm"
+              class="flex-1"
+              placeholder="Preset name"
+            />
+            <UBadge v-if="p.isDefault" color="primary" variant="subtle" size="sm">Default</UBadge>
+            <UButton
+              v-else
+              color="neutral"
+              variant="ghost"
+              size="xs"
+              icon="i-lucide-star"
+              :loading="busy === p.id"
+              @click="makeDefault(p)"
+            >
+              Make default
+            </UButton>
+            <UButton
+              color="error"
+              variant="ghost"
+              size="xs"
+              icon="i-lucide-trash-2"
+              :disabled="p.isDefault || busy === p.id"
+              :title="p.isDefault ? 'The default preset cannot be deleted' : 'Delete preset'"
+              @click="remove(p)"
+            />
+          </div>
+
+          <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">
+                Max complexity %
+              </span>
+              <UInput
+                v-model.number="drafts[p.id]!.maxComplexity"
+                type="number"
+                :min="0"
+                :max="100"
+                size="sm"
+              />
+            </label>
+            <label class="block">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                Max risk %
+              </span>
+              <UInput
+                v-model.number="drafts[p.id]!.maxRisk"
+                type="number"
+                :min="0"
+                :max="100"
+                size="sm"
+              />
+            </label>
+            <label class="block">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                Max impact %
+              </span>
+              <UInput
+                v-model.number="drafts[p.id]!.maxImpact"
+                type="number"
+                :min="0"
+                :max="100"
+                size="sm"
+              />
+            </label>
+            <label class="block">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                CI-fix attempts
+              </span>
+              <UInput
+                v-model.number="drafts[p.id]!.ciMaxAttempts"
+                type="number"
+                :min="0"
+                :max="50"
+                size="sm"
+              />
+            </label>
+            <label class="block">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                Requirement iterations
+              </span>
+              <UInput
+                v-model.number="drafts[p.id]!.maxRequirementIterations"
+                type="number"
+                :min="1"
+                :max="20"
+                size="sm"
+              />
+            </label>
+            <label class="block">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                Auto-pass concerns ≤
+              </span>
+              <USelect
+                v-model="drafts[p.id]!.maxRequirementConcernAllowed"
+                :items="CONCERN_LEVELS"
+                value-key="value"
+                size="sm"
+              />
+            </label>
+          </div>
+
+          <div class="mt-3 flex justify-end">
+            <UButton
+              color="primary"
+              variant="soft"
+              size="xs"
+              icon="i-lucide-save"
+              :loading="busy === p.id"
+              @click="save(p)"
+            >
+              Save
+            </UButton>
+          </div>
+        </div>
+
+        <!-- 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">
+            New preset
+          </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"
+                >Name</span
+              >
+              <UInput v-model="draft.name" size="sm" placeholder="e.g. Cautious" />
+            </label>
+            <label class="block w-20">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500"
+                >Cmplx%</span
+              >
+              <UInput
+                v-model.number="draft.maxComplexity"
+                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"
+                >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"
+                >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"
+                >CI-fix</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"
+                >Req iter</span
+              >
+              <UInput
+                v-model.number="draft.maxRequirementIterations"
+                type="number"
+                :min="1"
+                :max="20"
+                size="sm"
+              />
+            </label>
+            <label class="block w-32">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500"
+                >Auto-pass ≤</span
+              >
+              <USelect
+                v-model="draft.maxRequirementConcernAllowed"
+                :items="CONCERN_LEVELS"
+                value-key="value"
+                size="sm"
+              />
+            </label>
+            <UButton
+              color="primary"
+              size="sm"
+              icon="i-lucide-plus"
+              :loading="creating"
+              :disabled="!draft.name.trim()"
+              @click="create"
+            >
+              Add
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/settings/ModelDefaultsPanel.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+// Workspace settings: the per-agent-kind default model overrides. For each agent
+// kind you can pin which model its steps run on for this workspace; a kind left on
+// the deployment default falls back to the env-configured routing (named here so
+// you can see which model that actually is). A model pinned on an individual task
+// still wins over these. Persisted via the modelDefaults store (the backend
+// replaces the whole map on each change).
+//
+// Styled as a dark full-screen window like the agent-output review overlay
+// (AgentStepDetail) rather than a light modal, so the text stays readable
+// regardless of the OS colour-mode preference. The filter box narrows the list of
+// AGENT KINDS (the catalog is long); each kind's model picker is a plain dropdown.
+import { computed, ref, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import type { AgentKind } from '~/types/domain'
+import { MODEL_CONFIGURABLE_SYSTEM_KINDS } from '~/utils/catalog'
+import { contextLabel, costLabel, displayFlavor, isSelectable } from '~/stores/models'
+
+const ui = useUiStore()
+const models = useModelsStore()
+const defaults = useModelDefaultsStore()
+const agents = useAgentsStore()
+const creds = useVendorCredentialsStore()
+const workspace = useWorkspaceStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.modelDefaultsOpen,
+  set: (v: boolean) => (v ? ui.openModelDefaults() : ui.closeModelDefaults()),
+})
+
+const busy = ref<string | null>(null)
+// Narrows the agent-kind rows below, 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) — those aren't user-addable steps but their
+// model is still worth pinning per workspace. The pure gates run no model, so they stay out.
+const configurableKinds = computed(() => [...agents.archetypes, ...MODEL_CONFIGURABLE_SYSTEM_KINDS])
+
+const filteredArchetypes = 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) {
+    filter.value = ''
+    void models.ensureLoaded(workspace.workspaceId ?? undefined)
+    if (workspace.workspaceId) void creds.load(workspace.workspaceId)
+  }
+})
+
+onKeyStroke('Escape', () => {
+  if (open.value) open.value = false
+})
+
+/** The dropdown items for a kind's picker: the deployment-default reset plus the catalog. */
+function menuFor(kind: AgentKind) {
+  const configured = creds.configuredVendors
+  return [
+    [
+      {
+        label: 'Deployment default',
+        icon: 'i-lucide-rotate-ccw',
+        onSelect: () => choose(kind, null),
+      },
+      ...models.models
+        .filter((m) => isSelectable(m, configured))
+        .map((m) => {
+          const flavor = displayFlavor(m, configured)
+          const ctx = contextLabel(flavor.contextTokens)
+          // Show the model's list price too (already resolved from spend pricing on
+          // the catalog). `costLabel` folds the quota indicator into the cost string
+          // for quota-based models; fall back to a bare "quota" tag when a quota model
+          // carries no price.
+          const price = costLabel(flavor) ?? (flavor.quotaBased ? 'quota' : undefined)
+          const suffix = [flavor.providerLabel, ctx, price].filter(Boolean).join(' · ')
+          return {
+            label: `${m.label} · ${suffix}`,
+            icon: flavor.quotaBased ? 'i-lucide-infinity' : 'i-lucide-cpu',
+            onSelect: () => choose(kind, m.id),
+          }
+        }),
+    ],
+  ]
+}
+
+/** The label shown on a kind's button: its pinned model, else the named deployment default. */
+function buttonLabel(kind: AgentKind): string {
+  const pinned = defaults.forKind(kind)
+  if (pinned) {
+    const m = models.getModel(pinned)
+    // A pinned-but-uncatalogued id (e.g. a model whose provider key was since
+    // removed) shows the raw id rather than masquerading as a default.
+    if (!m) return pinned
+    return `${m.label} · ${displayFlavor(m, creds.configuredVendors).providerLabel}`
+  }
+  // No pin → name the env-routing model this kind actually falls back to.
+  const ref = defaults.deploymentRefForKind(kind)
+  const label = ref ? models.labelForRef(ref) : undefined
+  return label ? `${label} (default)` : 'Deployment default'
+}
+
+async function choose(kind: AgentKind, modelId: string | null) {
+  busy.value = kind
+  try {
+    await defaults.set(kind, modelId)
+  } catch (e) {
+    toast.add({
+      title: 'Could not save default model',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = null
+  }
+}
+</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">Default models for agents</h1>
+            <p class="truncate text-xs text-slate-500">
+              Pin which model each agent kind runs on for this workspace.
+            </p>
+          </div>
+          <UButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            class="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">
+            <p class="text-sm leading-relaxed text-slate-400">
+              Pin which model each agent kind runs on for this workspace, e.g. a strong reasoning
+              model for the architect, a cheaper one for the documenter. A kind left on its
+              <span class="text-slate-300">deployment default</span> uses the server's configured
+              routing (named on the button). A model pinned on an individual task still overrides
+              these.
+            </p>
+
+            <UInput
+              v-model="filter"
+              icon="i-lucide-search"
+              size="sm"
+              placeholder="Filter agents…"
+              class="w-full"
+            >
+              <template v-if="filter" #trailing>
+                <UButton
+                  icon="i-lucide-x"
+                  color="neutral"
+                  variant="link"
+                  size="xs"
+                  aria-label="Clear filter"
+                  @click="filter = ''"
+                />
+              </template>
+            </UInput>
+
+            <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="divide-y divide-slate-800 rounded-xl border border-slate-800 bg-slate-900/50"
+            >
+              <div
+                v-for="a in filteredArchetypes"
+                :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>
+                <!-- The menu content portals to <body>, where it would sit behind
+                     this z-50 overlay (it carries no z-index of its own) and the
+                     overlay would swallow the clicks — so lift it above. -->
+                <UDropdownMenu
+                  :items="menuFor(a.kind)"
+                  :ui="{ content: 'max-h-80 overflow-y-auto z-[60]' }"
+                >
+                  <UButton
+                    size="xs"
+                    :color="defaults.forKind(a.kind) ? 'primary' : 'neutral'"
+                    :variant="defaults.forKind(a.kind) ? 'subtle' : 'soft'"
+                    trailing-icon="i-lucide-chevron-down"
+                    :loading="busy === a.kind"
+                    class="w-64 shrink-0 justify-between"
+                  >
+                    <span class="truncate">{{ buttonLabel(a.kind) }}</span>
+                  </UButton>
+                </UDropdownMenu>
+              </div>
+              <p
+                v-if="filteredArchetypes.length === 0"
+                class="px-4 py-6 text-center text-sm text-slate-500"
+              >
+                No agents match "{{ filter }}".
+              </p>
+            </div>
+          </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>