@cat-factory/app 0.190.0 → 0.190.1

package/README.md

@@ -54,6 +54,16 @@ over the WebSocket. How that sync works is written up in
 | `types/`          | TypeScript domain unions (`domain.ts`) and wire types mirroring the contracts.                                                                        |
 | `utils/`          | Small pure helpers.                                                                                                                                   |
 
+### Always import a layer component explicitly
+
+**Import a component under `components/` by path before using it in a template.** Do not lean on Nuxt's auto-registration. This layer sets no `components` config, so the default `pathPrefix: true` applies and a component is registered under its path-prefixed name: `components/panels/StepEffortReport.vue` becomes `PanelsStepEffortReport`, and a bare `<StepEffortReport>` matches nothing.
+
+Some bare tags do work, which is exactly what makes this worth writing down. Nuxt drops a directory segment the filename already repeats, so `pipeline/PipelinePicker.vue` registers as `PipelinePicker` and resolves bare, while `pipeline/AgentKindIcon.vue` in the same folder registers as `PipelineAgentKindIcon` and does not. Whether a tag resolves therefore depends on a coincidence between a folder name and a filename, and renaming either end breaks the tag with no error. An explicit import does not care.
+
+The failure is silent, which is why this is a rule rather than a preference. An unresolved tag warns in dev and then renders nothing, so a built SPA has a hole where the component should be. Nothing catches it: not typecheck, not the unit tests, not the e2e suite, and not the user, who reads it as a backend returning no data. Seven components had shipped this way.
+
+`scripts/check-component-imports.mjs` enforces it (CI's `repo-guards` job). If a panel section is missing and the data looks right, check the import first.
+
 ## Interface modes (basic / advanced)
 
 The SPA renders at one of two **interface tiers**. `basic` (the default) is the everyday

package/app/components/environments/EnvironmentSetupWizard.vue

@@ -17,6 +17,7 @@
 import { computed } from 'vue'
 import { JourneyHost, JourneyOutlet } from '@modular-vue/journeys'
 import { environmentSetupHandle } from '~/modular/journeys/environmentSetup'
+import EnvSetupStepper from '~/components/environments/EnvSetupStepper.vue'
 
 const ui = useUiStore()
 const { t } = useI18n()

package/app/components/panels/AgentStepDetail.vue

@@ -6,6 +6,8 @@ import { agentKindMeta } from '~/utils/catalog'
 import StepRestartControl from '~/components/panels/StepRestartControl.vue'
 import StepMetadataCard from '~/components/panels/StepMetadataCard.vue'
 import StepTestReport from '~/components/panels/StepTestReport.vue'
+import StepEffortReport from '~/components/panels/StepEffortReport.vue'
+import StepFragmentAdherence from '~/components/panels/StepFragmentAdherence.vue'
 import EnvironmentStatusPanel from '~/components/environments/EnvironmentStatusPanel.vue'
 import FrontendBindingsResolved from '~/components/panels/inspector/FrontendBindingsResolved.vue'
 import { UI_TESTER_AGENT_KIND } from '@cat-factory/contracts'

package/app/components/panels/ReportsPanel.vue

@@ -16,6 +16,7 @@ import {
   segmentPct,
   trendMagnitude,
 } from './ReportsPanel.logic'
+import ReportsSpendBreakdown from '~/components/panels/ReportsSpendBreakdown.vue'
 
 // Reports: cross-cutting usage analytics for the active account — where the spend and the
 // work actually go. Spend per model and agent kind, spend + run activity per workspace /

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

@@ -8,6 +8,7 @@ import { showOverrideField } from '~/utils/uiMode'
 import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 import RiskPolicyPicker from '~/components/riskPolicy/RiskPolicyPicker.vue'
 import TaskAprioriBranches from '~/components/panels/inspector/TaskAprioriBranches.vue'
+import DocReferenceRepos from '~/components/panels/inspector/DocReferenceRepos.vue'
 
 const props = defineProps<{ block: Block }>()
 

package/app/components/pipeline/PipelinePreview.vue

@@ -12,6 +12,7 @@ import { computed } from 'vue'
 import type { Pipeline } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
 import { pipelineDisplaySteps, pipelineGateCount } from '~/utils/pipeline'
+import AgentKindIcon from '~/components/pipeline/AgentKindIcon.vue'
 
 const props = defineProps<{ pipeline: Pipeline }>()
 const { t } = useI18n()

package/app/components/prReview/PrReviewWindow.vue

@@ -24,6 +24,7 @@ import { subtaskIconClass } from '~/utils/pipelineRender'
 import { activeChunkLabels, chunkReviewPercent, hasNoSlicePlan } from '~/utils/prReviewProgress'
 import ResultWindowShell from '~/components/panels/ResultWindowShell.vue'
 import StepRunMeta from '~/components/panels/StepRunMeta.vue'
+import StepFragmentAdherence from '~/components/panels/StepFragmentAdherence.vue'
 
 const execution = useExecutionStore()
 const board = useBoardStore()

package/app/components/settings/RiskPolicyPanel.vue

@@ -12,6 +12,7 @@ import {
   RISK_POLICY_CEILING_FIELD,
   type RiskPolicyAxis,
 } from '~/utils/riskPolicy'
+import MergeClassRulesEditor from '~/components/settings/MergeClassRulesEditor.vue'
 
 const { t } = useI18n()
 

package/app/composables/api/client.spec.ts

@@ -0,0 +1,50 @@
+import type { ApiContract } from '@toad-contracts/core'
+import { describe, expect, it } from 'vitest'
+import { type SendParams, withoutUndefinedQueryParams } from '~/composables/api/client'
+
+// An omitted optional query param used to reach the server as `key=`: the contract client
+// serialises with `fast-querystring`, whose `stringify({ blockId: undefined })` is `'blockId='`,
+// and request validation waves the key through because `v.optional(...)` accepts `undefined`. On
+// `listTasksContract`, whose `blockId` carries a `minLength(1)`, that made every unscoped
+// `listTasks()` a guaranteed 400. These lock the strip in.
+
+// The helper is contract-generic and only ever reads `queryParams`, so the cases below describe
+// request params structurally rather than picking a real contract per shape.
+type Params = Record<string, unknown>
+const strip = (params: Params): Params =>
+  withoutUndefinedQueryParams(params as SendParams<ApiContract>) as Params
+
+describe('withoutUndefinedQueryParams', () => {
+  it('drops undefined-valued query keys so they never reach the query string', () => {
+    const out = strip({ pathPrefix: '/workspaces/ws_1', queryParams: { blockId: undefined } })
+    expect(out.queryParams).toEqual({})
+  })
+
+  // The guard against "fix" it with a falsy check: 0, false and '' are all values a caller
+  // deliberately sent, and only `undefined` means absent.
+  it('keeps defined values, including falsy ones a caller meant to send', () => {
+    const out = strip({ queryParams: { blockId: 'blk_1', page: 0, all: false, q: '' } })
+    expect(out.queryParams).toEqual({ blockId: 'blk_1', page: 0, all: false, q: '' })
+  })
+
+  it('drops only the undefined keys from a mixed set', () => {
+    const out = strip({ queryParams: { window: '7d', workspaceId: undefined } })
+    expect(out.queryParams).toEqual({ window: '7d' })
+  })
+
+  it('leaves other request params untouched', () => {
+    const params = {
+      pathPrefix: '/workspaces/ws_1',
+      pathParams: { source: 'jira' },
+      body: { a: 1 },
+    }
+    expect(strip(params)).toEqual(params)
+  })
+
+  it('returns the same object when there is nothing to strip', () => {
+    const params = { queryParams: { blockId: 'blk_1' } }
+    expect(strip(params)).toBe(params)
+    const noQuery = { pathPrefix: '/workspaces/ws_1' }
+    expect(strip(noQuery)).toBe(noQuery)
+  })
+})

package/app/composables/api/client.ts

@@ -71,6 +71,31 @@ export function createApiClient(): WretchInstance {
   ])
 }
 
+/**
+ * Drop query keys whose value is `undefined`, so an omitted optional param is absent from the
+ * query string instead of present-but-empty.
+ *
+ * `sendByApiContract` serialises with `fast-querystring`, and `stringify({ blockId: undefined })`
+ * is `'blockId='`. Request validation does not catch it, because `v.optional(...)` accepts
+ * `undefined` and the key only becomes empty on the way out. The server then validates the parsed
+ * `''`, so any optional param carrying a `minLength(1)` rejects the whole request with a 400. That
+ * is what made an unscoped `listTasks()` uncallable. Params with no length check are luckier but
+ * still wrong: the handler reads `''` where it asked for absence.
+ *
+ * Stripping at this one chokepoint fixes every contract at once, which is the point. Writing
+ * `queryParams: { foo }` for an optional `foo` is the obvious thing to write and it should work,
+ * rather than each call site remembering to spread the key in conditionally.
+ */
+export function withoutUndefinedQueryParams<T extends ApiContract>(
+  params: SendParams<T>,
+): SendParams<T> {
+  const query = (params as { queryParams?: Record<string, unknown> }).queryParams
+  if (!query) return params
+  const present = Object.entries(query).filter(([, value]) => value !== undefined)
+  if (present.length === Object.keys(query).length) return params
+  return { ...params, queryParams: Object.fromEntries(present) }
+}
+
 /**
  * Send a contract request and unwrap to the success body (or throw the typed error).
  * The public signature preserves per-contract inference for callers; inside,
@@ -82,7 +107,7 @@ export async function sendContract<T extends ApiContract>(
   contract: T,
   params: SendParams<T>,
 ): Promise<SuccessBodyOf<T>> {
-  const outcome = await sendByApiContract(client, contract, params)
+  const outcome = await sendByApiContract(client, contract, withoutUndefinedQueryParams(params))
   if (outcome.error) {
     const error = outcome.error
     // A contract-declared non-2xx is reported as a plain `{ statusCode, headers, body }`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.190.0",
+  "version": "0.190.1",
   "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",