@cat-factory/app 0.174.0 → 0.178.0

package/app/modular/nav-contributions.ts

@@ -25,10 +25,21 @@ export type { AppSlots } from './slots'
 /** Which shell(s) render a contribution. */
 export type NavSurface = 'sidebar' | 'command' | 'toolbar'
 
-/** Sidebar section a contribution lands in (its i18n header is `nav.<group>`). */
+/**
+ * Sidebar section a contribution lands in (its i18n header is `nav.<group>`).
+ *
+ * `models` and `integrations` are deliberately SEPARATE sections even though a model
+ * provider is technically also an external system we connect to. They answer different
+ * questions: `models` is the ENGINE the harnesses run on (no provider ⇒ nothing runs at
+ * all), `integrations` is the optional systems that feed a run context or receive its
+ * output (source control, trackers, documents, chat, observability) — each of which a
+ * deployment can live without. Folding the providers in among them buried the one
+ * connection every deployment must make in a list of ones most never touch.
+ */
 export type NavSidebarGroup =
   | 'create'
   | 'repositories'
+  | 'models'
   | 'integrations'
   | 'infrastructure'
   | 'workspaceContext'
@@ -90,10 +101,10 @@ export const NAV_ACTIONS = [
   'addFromRepo',
   'bootstrapRepo',
   'integrationsHub',
+  'modelProviders',
   'sandbox',
   'kaizen',
   'infrastructure',
-  'environmentSetup',
   'fragmentLibrary',
   'mergeThresholds',
   'workspaceSettings',
@@ -153,24 +164,36 @@ const S = (...s: NavSurface[]) => s as readonly NavSurface[]
  *    with accounts enabled).
  *  - one icon per destination across shells.
  *
- * `advanced: true` marks the power-user half, hidden in basic interface mode. The line is
- * drawn by ROUTE COUNT, not by how advanced a surface feels: hiding the only way to reach a
- * capability removes the capability from the tier, while hiding a shortcut to a surface basic
- * mode already reaches removes nothing. So an item is advanced only when both of these hold —
- * it is not the sole route to its capability, and nothing on the delivery path needs it:
+ * `advanced: true` marks the power-user half, hidden in basic interface mode. Basic is the
+ * EVERYDAY DELIVERY SURFACE — plan work on a board, run it, review and merge it — so an item
+ * is advanced when it is not part of that loop. That happens two ways, and the difference
+ * matters when reading the list (it is the column `nav-contributions.spec.ts` makes you fill
+ * in):
  *
- *  - `sandbox` / `kaizen` — experimentation and self-grading surfaces, beside the delivery
- *    path rather than on it.
+ * REACHED ANOTHER WAY — hiding a shortcut removes nothing, because a basic destination opens
+ * the same surface:
  *  - `merge-thresholds` / `service-fragment-defaults` — palette shortcuts into Workspace
  *    settings tabs (Merge, Service best practices), which basic mode reaches via
  *    `workspace-settings`.
- *  - `local-models` — a per-user endpoint knob the Integrations hub already offers.
+ *  - `local-models` — a per-user endpoint knob the Model providers hub already offers.
  *
- * Everything else stays in basic BECAUSE it is a sole route: authoring a flow
- * (`build-pipeline`), the standards/skills library (`fragments`, whose only other route is a
- * button two levels into Workspace settings), the PREnv + runner plumbing (`infrastructure`,
- * `environment-setup`), and the operator/cost views that are the only aggregate read of run
- * health and spend (`operator-dashboard`, `reports`).
+ * OUT OF THE TIER — the sole route, hidden deliberately, so the capability itself is absent
+ * from basic mode. This is a product decision, not an oversight: each of these answers a
+ * question an everyday delivery user does not ask, and carrying it costs the basic nav more
+ * than the capability is worth there. Switching to advanced is the way to it.
+ *  - `sandbox` / `kaizen` — experimentation and self-grading surfaces, beside the delivery
+ *    path rather than on it.
+ *  - `bootstrap-repo` — standing a NEW repository up from a reference architecture: a
+ *    once-per-service setup act, not part of running work on an existing board.
+ *  - `operator-dashboard` / `reports` — the deployment-wide health and spend rollups. They
+ *    read across every workspace for whoever operates the deployment, which is a different
+ *    job from delivering a task on one board.
+ *
+ * Everything else stays in basic because the delivery loop needs it: authoring a flow
+ * (`build-pipeline`), adding a repo (`add-from-repo`), the standards/skills library
+ * (`fragments`), the PREnv + runner plumbing (`infrastructure`, which is also the only route
+ * to the guided per-service Compose environment setup), and the workspace/model configuration
+ * a run actually reads (`workspace-settings`, `model-config`).
  */
 export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
   {
@@ -210,6 +233,7 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     labelKey: 'nav.bootstrapRepo',
     icon: 'i-lucide-git-branch-plus',
     surfaces: S('sidebar', 'command'),
+    advanced: true,
     gate: (g) => g.canManageIntegrations,
     action: 'bootstrapRepo',
     testId: 'nav-bootstrap-repo',
@@ -221,6 +245,19 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
       keywordsKey: 'layout.commandBar.keywords.bootstrapRepo',
     },
   },
+  {
+    // The engines. Kept out of `integrations-hub` on purpose (see NavSidebarGroup): a
+    // deployment with no provider connected cannot run anything, so this is the one
+    // connection that must not sit in a list of optional ones.
+    id: 'model-providers',
+    labelKey: 'nav.modelProviders',
+    icon: 'i-lucide-plug-zap',
+    surfaces: S('sidebar'),
+    gate: (g) => g.canManageIntegrations,
+    action: 'modelProviders',
+    testId: 'nav-model-providers',
+    sidebar: { group: 'models', order: 10 },
+  },
   {
     id: 'integrations-hub',
     labelKey: 'nav.integrations',
@@ -268,16 +305,6 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     testId: 'nav-infrastructure',
     sidebar: { group: 'infrastructure', order: 10 },
   },
-  {
-    id: 'environment-setup',
-    labelKey: 'nav.environmentSetup',
-    icon: 'i-lucide-flask-conical',
-    surfaces: S('sidebar'),
-    gate: (g) => g.infrastructureAvailable,
-    action: 'environmentSetup',
-    testId: 'nav-environment-setup',
-    sidebar: { group: 'infrastructure', order: 20 },
-  },
   {
     id: 'fragments',
     labelKey: 'nav.contextFragments',
@@ -332,7 +359,10 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     gate: (g) => g.canManageSettings,
     action: 'modelConfiguration',
     testId: 'nav-model-config',
-    sidebar: { group: 'configuration', order: 20 },
+    // Beside `model-providers`, not in `configuration`: "which key do we hold" and "which
+    // model does each agent kind use" are two halves of one question, and splitting them
+    // across sections is what sent people to Integrations looking for a model.
+    sidebar: { group: 'models', order: 20 },
     command: {
       group: 'workspace',
       order: 40,
@@ -388,6 +418,7 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     labelKey: 'nav.operatorDashboard',
     icon: 'i-lucide-gauge',
     surfaces: S('sidebar'),
+    advanced: true,
     gate: (g) => g.accountsEnabled && g.isAccountAdmin,
     action: 'operatorDashboard',
     testId: 'nav-operator-dashboard',
@@ -398,6 +429,7 @@ export const NAV_CONTRIBUTIONS: readonly NavContribution[] = [
     labelKey: 'nav.reports',
     icon: 'i-lucide-chart-column',
     surfaces: S('sidebar'),
+    advanced: true,
     gate: (g) => g.accountsEnabled && g.isAccountAdmin,
     action: 'reports',
     testId: 'nav-reports',
@@ -477,6 +509,7 @@ export function navSlotFilter(slots: AppSlots, deps: { gates?: NavGates }): AppS
 export const SIDEBAR_GROUP_ORDER: readonly NavSidebarGroup[] = [
   'create',
   'repositories',
+  'models',
   'integrations',
   'infrastructure',
   'workspaceContext',

package/app/pages/index.vue

@@ -89,6 +89,9 @@ const ModelPresetHealthModal = defineAsyncComponent(
 const IntegrationsHub = defineAsyncComponent(
   () => import('~/components/layout/IntegrationsHub.vue'),
 )
+const ModelProvidersHub = defineAsyncComponent(
+  () => import('~/components/layout/ModelProvidersHub.vue'),
+)
 const PersonalSetupModal = defineAsyncComponent(
   () => import('~/components/layout/PersonalSetupModal.vue'),
 )
@@ -429,6 +432,7 @@ watch(
       <RiskPolicyHealthModal v-if="ui.riskPolicyHealthOpen" />
       <ModelPresetHealthModal v-if="ui.modelPresetHealthOpen" />
       <IntegrationsHub v-if="ui.integrationsOpen" />
+      <ModelProvidersHub v-if="ui.modelProvidersOpen" />
       <PersonalSetupModal v-if="ui.personalSetupOpen" />
       <WorkspaceSettingsPanel v-if="ui.workspaceSettingsOpen" />
       <AccountSettingsPanel v-if="ui.accountSettingsOpen" />

package/app/stores/ui/modals.ts

@@ -952,20 +952,28 @@ function createConsumerOverlayHost() {
  * the shared hub came-from markers.
  */
 export function createUiModals() {
-  // Integrations / My-setup hub came-from markers — the one piece of state SHARED across slices
-  // (many `open*` handlers reset it), so it lives here and `resetHubReturn` is threaded into the
-  // slices that need it. `cameFromIntegrations` is true while an integration's own panel is showing
-  // AND it was reached from the Integrations hub; `cameFromPersonal` is the My-setup analogue.
+  // Model-providers / Integrations / My-setup hub came-from markers — the one piece of state
+  // SHARED across slices (many `open*` handlers reset it), so it lives here and `resetHubReturn`
+  // is threaded into the slices that need it. `cameFromIntegrations` is true while an
+  // integration's own panel is showing AND it was reached from the Integrations hub;
+  // `cameFromModelProviders` and `cameFromPersonal` are the analogues for the other two hubs.
+  //
+  // Three hubs, not two, because the vendor-credentials / OpenRouter / local-runner panels are
+  // reachable from more than one of them and a Back control that lands somewhere the user was
+  // never at is worse than none.
   const cameFromIntegrations = ref(false)
+  const cameFromModelProviders = ref(false)
   const cameFromPersonal = ref(false)
   const integrationsOpen = ref(false)
+  const modelProvidersOpen = ref(false)
   const personalSetupOpen = ref(false)
 
-  // Clear BOTH hub came-from markers. Every direct `open*` in the slices calls this so that a
+  // Clear EVERY hub came-from marker. Every direct `open*` in the slices calls this so that a
   // panel opened outside the hubs never grows a dead Back control, and so switching from one
-  // hub's panel to the other's clears the stale marker.
+  // hub's panel to another's clears the stale marker.
   function resetHubReturn() {
     cameFromIntegrations.value = false
+    cameFromModelProviders.value = false
     cameFromPersonal.value = false
   }
   function openIntegrations() {
@@ -977,6 +985,13 @@ export function createUiModals() {
   function closeIntegrations() {
     integrationsOpen.value = false
   }
+  function openModelProviders() {
+    resetHubReturn()
+    modelProvidersOpen.value = true
+  }
+  function closeModelProviders() {
+    modelProvidersOpen.value = false
+  }
   function openPersonalSetup() {
     resetHubReturn()
     personalSetupOpen.value = true
@@ -1000,6 +1015,12 @@ export function createUiModals() {
     cameFromIntegrations.value = true
     integrationsOpen.value = false
   }
+  // The Model-providers analogue of `openFromIntegrations`.
+  function openFromModelProviders(open: () => void) {
+    open()
+    cameFromModelProviders.value = true
+    modelProvidersOpen.value = false
+  }
 
   const health = createHealthAdvisoryModals()
   const misc = createMiscModals()
@@ -1014,11 +1035,16 @@ export function createUiModals() {
   return {
     integrationsOpen,
     cameFromIntegrations,
+    modelProvidersOpen,
+    cameFromModelProviders,
     personalSetupOpen,
     cameFromPersonal,
     openIntegrations,
     closeIntegrations,
     openFromIntegrations,
+    openModelProviders,
+    closeModelProviders,
+    openFromModelProviders,
     openPersonalSetup,
     closePersonalSetup,
     openFromPersonal,

package/app/stores/validationChecks.ts

@@ -1,6 +1,10 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
-import type { ServiceValidationConfig, ValidationCheck } from '~/types/validationChecks'
+import type {
+  DetectedValidationChecks,
+  ServiceValidationConfig,
+  ValidationCheck,
+} from '~/types/validationChecks'
 import { VALIDATION_DEFAULT_MAX_ATTEMPTS } from '~/types/validationChecks'
 import { useUpsertList } from '~/composables/useUpsertList'
 import { useWorkspaceStore } from '~/stores/workspace'
@@ -107,5 +111,16 @@ export const useValidationChecksStore = defineStore('validationChecks', () => {
     dropLocal(blockId)
   }
 
-  return { configs, loading, available, load, ensureLoaded, forBlock, save, remove }
+  /**
+   * Ask the backend what this service's repo implies. Nothing is stored: the suggestion goes
+   * into the panel's unsaved rows, so the operator reviews and saves it like anything they
+   * typed. Deliberately NOT folded into `configs` — a suggestion that looked like saved
+   * config would report a service as configured when no run would run a single command.
+   */
+  async function detect(blockId: string): Promise<DetectedValidationChecks> {
+    const ws = useWorkspaceStore()
+    return api.detectServiceValidationChecks(ws.requireId(), blockId)
+  }
+
+  return { configs, loading, available, load, ensureLoaded, forBlock, save, remove, detect }
 })

package/app/types/validationChecks.ts

@@ -9,6 +9,9 @@ export type {
   ValidationReport,
   ServiceValidationConfig,
   UpsertServiceValidationConfigInput,
+  DetectedValidationChecks,
+  ValidationDetectionStatus,
+  ValidationEcosystem,
 } from '@cat-factory/contracts'
 export {
   VALIDATION_DEFAULT_MAX_ATTEMPTS,

package/app/utils/validationDetection.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import { mergeDetectedChecks } from './validationDetection'
+
+const check = (label: string, command: string) => ({ label, command })
+
+describe('mergeDetectedChecks', () => {
+  it('appends suggestions to an empty (or blank-row) panel', () => {
+    const result = mergeDetectedChecks(
+      [check('', '')],
+      [check('install', 'pnpm install --frozen-lockfile'), check('lint', 'pnpm run lint')],
+      10,
+    )
+    expect(result.rows).toEqual([
+      check('install', 'pnpm install --frozen-lockfile'),
+      check('lint', 'pnpm run lint'),
+    ])
+    expect(result.added).toBe(2)
+    expect(result.dropped).toBe(0)
+  })
+
+  it('never rewrites or duplicates what the operator already has', () => {
+    // The same command with a hand-tuned label must survive untouched, and pressing Detect
+    // again must be a no-op rather than a second copy of every check.
+    const existing = [check('our lint', 'pnpm run lint')]
+    const result = mergeDetectedChecks(existing, [check('lint', 'pnpm run lint')], 10)
+    expect(result.rows).toEqual(existing)
+    expect(result.added).toBe(0)
+  })
+
+  it('disambiguates a label that collides with an existing row', () => {
+    // A duplicate label is REJECTED by the write contract, so a collision the merge created
+    // would surface as a save error on a row the operator never typed.
+    const result = mergeDetectedChecks(
+      [check('test', 'make test')],
+      [check('test', 'go test ./...')],
+      10,
+    )
+    expect(result.rows.map((r) => r.label)).toEqual(['test', 'test 2'])
+  })
+
+  it('reports what the row cap dropped instead of silently truncating', () => {
+    const result = mergeDetectedChecks(
+      [check('lint', 'pnpm run lint')],
+      [check('test', 'pnpm run test'), check('build', 'pnpm run build')],
+      2,
+    )
+    expect(result.rows).toHaveLength(2)
+    expect(result.added).toBe(1)
+    expect(result.dropped).toBe(1)
+  })
+})

package/app/utils/validationDetection.ts

@@ -0,0 +1,67 @@
+import type { ValidationCheck } from '~/types/validationChecks'
+
+// Folding an autodetected suggestion into the pre-PR validation panel's UNSAVED rows.
+//
+// Pure, and separate from the panel, because the merge carries the two rules that make the
+// button safe to press: it never destroys what the operator already typed, and it never
+// produces a row set the write contract would reject.
+
+/** What a merge did, so the panel can say something specific rather than "done". */
+export interface MergedDetection {
+  rows: ValidationCheck[]
+  /** Suggestions appended as new rows. */
+  added: number
+  /** Suggestions dropped because the row cap was already reached. */
+  dropped: number
+}
+
+/**
+ * Append detected checks to the rows already on screen.
+ *
+ * - A suggestion whose COMMAND is already present is skipped, so pressing Detect twice (or
+ *   pressing it on a service that is already configured) adds nothing rather than
+ *   duplicating every check.
+ * - Existing rows are never rewritten. The button is assistive; silently replacing an
+ *   operator's hand-tuned command with the generic guess would be a worse failure than not
+ *   detecting anything.
+ * - Wholly blank rows (an unused "Add check" click) are dropped first, so the suggestion
+ *   lands in a contiguous list instead of after a gap.
+ * - Labels are made unique against the surviving rows, because the write contract REJECTS a
+ *   duplicate label — a merge that produced one would surface as an unexplained save error
+ *   on rows the operator did not write.
+ */
+export function mergeDetectedChecks(
+  existing: ValidationCheck[],
+  detected: ValidationCheck[],
+  maxRows: number,
+): MergedDetection {
+  const rows = existing.filter((r) => r.label.trim() !== '' || r.command.trim() !== '')
+  const commands = new Set(rows.map((r) => r.command.trim()))
+  const labels = new Set(rows.map((r) => r.label.trim()).filter((l) => l !== ''))
+
+  let added = 0
+  let dropped = 0
+  for (const candidate of detected) {
+    const command = candidate.command.trim()
+    if (command === '' || commands.has(command)) continue
+    if (rows.length >= maxRows) {
+      dropped += 1
+      continue
+    }
+    const label = uniqueLabel(candidate.label.trim() || command, labels)
+    rows.push({ label, command })
+    commands.add(command)
+    labels.add(label)
+    added += 1
+  }
+  return { rows, added, dropped }
+}
+
+/** `lint` → `lint 2` → `lint 3` … until it no longer collides. Clamped to the contract's 80. */
+function uniqueLabel(base: string, taken: Set<string>): string {
+  if (!taken.has(base)) return base.slice(0, 80)
+  for (let n = 2; ; n += 1) {
+    const candidate = `${base} ${n}`.slice(0, 80)
+    if (!taken.has(candidate)) return candidate
+  }
+}