@cat-factory/app 0.236.0 → 0.236.1

package/README.md

@@ -79,6 +79,30 @@ earlier than before takes the entire SPA down at boot, and the unit suite cannot
 (nothing there installs the plugin). Every e2e spec does, because every one of them boots
 the app.
 
+### The persisted board pin is UNVALIDATED until `init()` resolves it
+
+`workspace.workspaceId` is restored from persisted state SYNCHRONOUSLY, before any request fires,
+so every `immediate: true` watcher on it (`pages/index.vue`) runs against an id nothing has
+checked. The pin can name a board that was deleted, or one whose access was revoked while the
+browser held it, and the RBAC gate answers both with a 404 (it hides a denial as a not-found, so
+existence never leaks). `init()` then validates the pin against `GET /workspaces` and re-points it
+at a board the user can actually reach.
+
+Firing the per-board reads on the pin anyway is deliberate: it overlaps them with the workspace
+list instead of queueing them behind it, which is why `init()` fetches the pinned SNAPSHOT
+speculatively too. **What travels with that is the miss.** Each of those boot reads states its own
+tolerance at its own seam (`init`'s `.catch(() => null)`, `github.ensureProbed`'s internal catch,
+`models.prefetchForBoard`), because a 404 there is an expected outcome and not a fault: the
+watcher fires again for the board init resolved, which is the read that counts. A bare
+`void store.load(workspace.workspaceId)` in that chain is an uncaught rejection in a real user's
+browser, and the e2e suite's `pageErrors` fixture fails the spec that boots a session whose access
+was just revoked.
+
+Tolerating the miss is not the same as pretending it succeeded: a dropped load leaves its store
+UNLOADED (`models.loaded` stays false, so `useAiReadiness().ready` is false), which reads as
+unresolved rather than as a board with nothing configured, and leaves the next caller free to
+retry. Pin new boot reads with a store-level unit test (`stores/models.spec.ts`).
+
 ### A backend-DECLARED form renders through `DescriptorFields.vue`
 
 When the backend declares the fields and the SPA only collects them, render them with the shared

package/app/components/auth/LoginScreen.vue

@@ -205,7 +205,10 @@ const noSignInMethod = computed(
 </script>
 
 <template>
-  <div class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100">
+  <div
+    class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100"
+    data-testid="login-screen"
+  >
     <div
       class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
     >
@@ -392,6 +395,7 @@ const noSignInMethod = computed(
           icon="i-lucide-at-sign"
           size="lg"
           class="w-full"
+          data-testid="login-email"
         />
         <SecretInput
           v-model="password"
@@ -400,9 +404,17 @@ const noSignInMethod = computed(
           icon="i-lucide-lock"
           size="lg"
           class="w-full"
+          data-testid="login-password"
         />
-        <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
-        <UButton block size="lg" color="primary" type="submit" :loading="busy">
+        <p v-if="error" class="text-sm text-rose-400" data-testid="login-error">{{ error }}</p>
+        <UButton
+          block
+          size="lg"
+          color="primary"
+          type="submit"
+          :loading="busy"
+          data-testid="login-submit"
+        >
           {{ mode === 'signup' ? t('auth.login.createAccount') : t('auth.login.signIn') }}
         </UButton>
         <p class="text-center text-xs text-slate-400">

package/app/components/auth/UserMenu.vue

@@ -35,6 +35,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
   <UDropdownMenu v-if="auth.user" :items="items" :content="{ side: 'top', align: 'start' }">
     <button
       type="button"
+      data-testid="user-menu"
       :title="collapsed ? auth.user.name || auth.user.login : undefined"
       class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-start transition hover:bg-slate-800/60"
       :class="collapsed ? 'justify-center' : ''"

package/app/components/layout/WorkspaceMembersSettings.vue

@@ -187,6 +187,7 @@ function memberLabel(userId: string, name?: string | null, email?: string | null
           :key="m.userId"
           class="flex items-center justify-between gap-2 rounded-md bg-slate-800/40 px-2 py-1"
           data-testid="workspace-member-row"
+          :data-user-id="m.userId"
         >
           <span class="truncate">{{ memberLabel(m.userId, m.name, m.email) }}</span>
           <span class="flex shrink-0 items-center gap-2">

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

@@ -333,6 +333,7 @@ const technicalLabel = computed(() => {
               color="neutral"
               icon="i-lucide-git-merge"
               trailing-icon="i-lucide-chevron-down"
+              data-testid="risk-policy-picker-trigger"
             />
           </template>
         </RiskPolicyPicker>

package/app/components/riskPolicy/RiskPolicyPicker.vue

@@ -113,6 +113,9 @@ function choose(id: string) {
 
 <template>
   <UPopover v-model:open="open" :content="{ align: 'start' }">
+    <!-- A consumer that supplies its own `#trigger` must carry `risk-policy-picker-trigger` on it:
+         the popover trigger is `as-child`, so the slotted element REPLACES the default button below
+         and takes its test hook with it (the inspector's icon button is the one such consumer). -->
     <slot name="trigger" :label="triggerLabel">
       <UButton
         color="neutral"

package/app/components/settings/RiskPolicyPanel.vue

@@ -282,7 +282,7 @@ async function create() {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <div class="space-y-4" data-testid="risk-policy-panel">
     <i18n-t
       keypath="settings.riskPolicy.intro"
       tag="p"
@@ -298,6 +298,8 @@ async function create() {
       v-for="p in store.presets"
       :key="p.id"
       class="rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+      data-testid="risk-policy-row"
+      :data-policy-id="p.id"
     >
       <div class="mb-3 flex items-center gap-2">
         <UInput
@@ -478,6 +480,7 @@ async function create() {
             v-model="draft.name"
             size="sm"
             :placeholder="t('settings.riskPolicy.create.namePlaceholder')"
+            data-testid="risk-policy-create-name"
           />
         </label>
         <label class="block w-20">
@@ -490,19 +493,34 @@ async function create() {
             :min="0"
             :max="100"
             size="sm"
+            data-testid="risk-policy-create-complexity"
           />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
             {{ t('settings.riskPolicy.create.risk') }}
           </span>
-          <UInput v-model.number="draft.maxRisk" type="number" :min="0" :max="100" size="sm" />
+          <UInput
+            v-model.number="draft.maxRisk"
+            type="number"
+            :min="0"
+            :max="100"
+            size="sm"
+            data-testid="risk-policy-create-risk"
+          />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
             {{ t('settings.riskPolicy.create.impact') }}
           </span>
-          <UInput v-model.number="draft.maxImpact" type="number" :min="0" :max="100" size="sm" />
+          <UInput
+            v-model.number="draft.maxImpact"
+            type="number"
+            :min="0"
+            :max="100"
+            size="sm"
+            data-testid="risk-policy-create-impact"
+          />
         </label>
         <label class="block w-20">
           <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
@@ -549,6 +567,7 @@ async function create() {
           icon="i-lucide-plus"
           :loading="creating"
           :disabled="!draft.name.trim()"
+          data-testid="risk-policy-create-submit"
           @click="create"
         >
           {{ t('settings.riskPolicy.add') }}

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -312,6 +312,13 @@ async function save() {
     </template>
     <template #body>
       <UTabs v-model="activeTab" :items="tabs" variant="link" :ui="tabsUi">
+        <!-- The tab LABEL, overridden only to carry a per-tab test hook: `UTabs` renders its own
+             triggers and forwards nothing from an item, so this slot is the one place a stable
+             selector can name which tab a click means (the labels themselves are translated). -->
+        <template #default="{ item }">
+          <span :data-testid="`workspace-settings-tab-${item.value}`">{{ item.label }}</span>
+        </template>
+
         <!-- Workspace -->
         <template #workspace>
           <div class="space-y-6">

package/app/composables/useAiReadiness.ts

@@ -13,9 +13,10 @@ import type { ModelPreset } from '~/types/model-presets'
  *    still points at one or more that aren't usable (⇒ the preset-mismatch prompt). Gated on
  *    `hasUsableModel` so the no-AI prompt owns the "nothing works" case on its own.
  *
- * Read-only over the existing stores; the catalog is loaded elsewhere (on workspace-ready
- * and after credential edits), so `ready` simply reports whether that load has landed for
- * the active workspace.
+ * Read-only over the existing stores; the catalog is loaded elsewhere (on the active board
+ * changing and after credential edits), so `ready` simply reports whether that load has landed
+ * for the active workspace. A load that FAILED leaves it false, which is what keeps the no-AI
+ * prompt off a board whose catalog never arrived (see `models.prefetchForBoard`).
  */
 export function useAiReadiness() {
   const models = useModelsStore()

package/app/pages/index.vue

@@ -191,10 +191,16 @@ const autoOpenedPreset = ref(false)
 // availability reflects that workspace's keys/subscriptions). This populates the AI-readiness
 // signals regardless of which lazy picker happens to mount, so the onboarding prompts below
 // can fire. Credential edits re-fetch via `models.refresh()` in the provider panels.
+//
+// Through `prefetchForBoard` because the FIRST run reads the persisted pin, which `init()` has
+// not validated yet: a board that was deleted, or whose access was revoked while the browser
+// held the pin, 404s here exactly as it does for init's own speculative snapshot fetch. That
+// board is not this watcher's last word (init re-points the pin and it fires again), so the
+// miss is dropped rather than left to surface as an uncaught rejection in the page.
 watch(
   () => workspace.workspaceId,
   (id, prev) => {
-    if (id) void models.ensureLoaded(id)
+    if (id) void models.prefetchForBoard(id)
     // Switching workspaces resets the per-session AI-onboarding state: dismissals and the
     // auto-open guards are scoped to one workspace, so a prompt dismissed in workspace A must
     // not suppress the (independent) prompt for workspace B that also lacks a usable source.

package/app/stores/models.spec.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from 'vitest'
+import type { ModelOption } from '~/types/domain'
+import { useModelsStore } from '~/stores/models'
+
+/** Minimal catalog entry: only the fields the store's own reads touch. */
+function model(over: Partial<ModelOption> = {}): ModelOption {
+  return {
+    id: 'qwen3',
+    label: 'Qwen3',
+    description: '',
+    flavor: 'cloudflare',
+    providerLabel: 'Cloudflare',
+    provider: 'cloudflare',
+    model: 'qwen3',
+    available: true,
+    ...over,
+  } as ModelOption
+}
+
+// The boot-time catalog load runs against the PERSISTED PIN, before `workspace.init()` has
+// validated it against the board list. A pin can name a board that was deleted, or one whose
+// access was revoked while the browser held it, and the RBAC gate answers both with a 404, so
+// the load has to tolerate a miss. Left bare it was an uncaught rejection in the page (the
+// `Workspace not found` a removed member's browser threw on their next visit).
+describe('models store: the speculative load of an unvalidated pin', () => {
+  it('drops a pin that 404s and leaves the catalog retryable for the board init resolves', async () => {
+    const get = vi
+      .fn<(workspaceId: string) => Promise<ModelOption[]>>()
+      .mockRejectedValueOnce(Object.assign(new Error('Workspace not found'), { statusCode: 404 }))
+      .mockResolvedValueOnce([model()])
+    vi.stubGlobal('useApi', () => ({ getWorkspaceModels: get }))
+
+    const store = useModelsStore()
+    // The revoked pin. Resolves rather than rejects: nothing in the page catches it.
+    await expect(store.prefetchForBoard('ws_revoked')).resolves.toBeUndefined()
+
+    // Nothing was latched, so this reads as UNRESOLVED rather than as a board with no models
+    // (`useAiReadiness().ready` is `loaded && loadedWorkspaceId === workspaceId`, which is what
+    // keeps the no-AI onboarding prompt from firing off a catalog that never landed).
+    expect(store.loaded).toBe(false)
+    expect(store.loadedWorkspaceId).toBeNull()
+    expect(store.models).toEqual([])
+
+    // ...and the board `init()` resolves instead still loads, on the same store.
+    await store.ensureLoaded('ws_reachable')
+    expect(store.loaded).toBe(true)
+    expect(store.loadedWorkspaceId).toBe('ws_reachable')
+    expect(store.models).toHaveLength(1)
+  })
+
+  it('a pin that IS reachable loads the catalog once, and the later caller reuses it', async () => {
+    const get = vi.fn(() => Promise.resolve([model()]))
+    vi.stubGlobal('useApi', () => ({ getWorkspaceModels: get }))
+
+    const store = useModelsStore()
+    await store.prefetchForBoard('ws1')
+    // What the cold open pays for: `init()` hydrating the same board finds the catalog already
+    // there, so the prefetch is one request rather than a duplicate of the one that follows it.
+    await store.ensureLoaded('ws1')
+
+    expect(get).toHaveBeenCalledTimes(1)
+    expect(store.hasUsableModel).toBe(true)
+  })
+})

package/app/stores/models.ts

@@ -122,6 +122,26 @@ export const useModelsStore = defineStore('models', () => {
     loaded.value = true
   }
 
+  /**
+   * Load the catalog for a board the app has NOT yet validated: the persisted pin at boot,
+   * fetched in parallel with the workspace list rather than after it.
+   *
+   * A pin can name a board that was deleted, or one whose access has since been revoked, and the
+   * gate answers both with a 404 (`workspace.init()` guards the same speculative read of the same
+   * id with `.catch(() => null)`). So a failure here is an expected outcome rather than a fault,
+   * and dropping it is safe in both directions: `loaded` stays false, so this leaves the catalog
+   * RETRYABLE for the next `ensureLoaded` caller, and `useAiReadiness().ready` stays false, so a
+   * catalog that never landed reads as unresolved instead of as a board with no AI configured.
+   */
+  async function prefetchForBoard(workspaceId: string): Promise<void> {
+    try {
+      await ensureLoaded(workspaceId)
+    } catch {
+      // Deliberate: see above. `init()` re-points the board it resolved, which loads the catalog
+      // that counts; anything else retries on the next caller.
+    }
+  }
+
   /** Force a re-fetch of the per-workspace catalog (e.g. after adding an API key). */
   async function refresh(workspaceId: string) {
     models.value = await api.getWorkspaceModels(workspaceId)
@@ -180,6 +200,7 @@ export const useModelsStore = defineStore('models', () => {
     loaded,
     loadedWorkspaceId,
     ensureLoaded,
+    prefetchForBoard,
     refresh,
     byId,
     getModel,

package/package.json

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