@cat-factory/app 0.37.1 → 0.37.3

package/app/components/auth/LoginScreen.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { apiErrorEnvelope } from '~/composables/api/errors'
 
 const auth = useAuthStore()
 
@@ -37,8 +38,7 @@ async function submitPassword() {
     if (typeof window !== 'undefined') window.location.assign(window.location.pathname)
   } catch (e) {
     error.value =
-      (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
-      'Sign-in failed. Check your details and try again.'
+      apiErrorEnvelope(e)?.message ?? 'Sign-in failed. Check your details and try again.'
   } finally {
     busy.value = false
   }

package/app/components/board/nodes/BlockNode.vue

@@ -35,8 +35,18 @@ const allTasks = computed(() => board.allTasksUnder(props.id))
 const taskIds = computed(() => new Set(allTasks.value.map((t) => t.id)))
 const taskCount = computed(() => allTasks.value.length)
 const hasTasks = computed(() => taskCount.value > 0 || modules.value.length > 0)
-const mergedTasks = computed(() => allTasks.value.filter((t) => t.status === 'done').length)
-const prTasks = computed(() => allTasks.value.filter((t) => t.status === 'pr_ready').length)
+// Single pass over the tasks for both rollups (vs. one filter each).
+const taskStats = computed(() => {
+  let merged = 0
+  let prReady = 0
+  for (const t of allTasks.value) {
+    if (t.status === 'done') merged++
+    else if (t.status === 'pr_ready') prReady++
+  }
+  return { merged, prReady }
+})
+const mergedTasks = computed(() => taskStats.value.merged)
+const prTasks = computed(() => taskStats.value.prReady)
 const canvas = computed(() => board.containerSize(props.id))
 
 // Frame status is derived from its tasks — services never reach "done".
@@ -60,10 +70,17 @@ const selected = computed(() => ui.selectedBlockId === props.id)
 // kept (gated off) so the prior behaviour is one edit away if we want chips back.
 const showExpanded = computed(() => true)
 
-// Surface a pending decision from this frame OR any of its tasks.
-const blockDecisions = computed(() =>
-  execution.openDecisions.filter((d) => d.blockId === props.id || taskIds.value.has(d.blockId)),
-)
+// Surface a pending decision from this frame OR any of its tasks (O(tasks) map
+// lookups, not a scan of every open decision per frame).
+const blockDecisions = computed(() => {
+  const byBlock = execution.decisionsByBlock
+  const out = [...(byBlock.get(props.id) ?? [])]
+  for (const id of taskIds.value) {
+    const list = byBlock.get(id)
+    if (list) out.push(...list)
+  }
+  return out
+})
 
 function openFirstDecision() {
   const d = blockDecisions.value[0]
@@ -74,13 +91,15 @@ function openFirstDecision() {
 // iterative reviewer gate (requirements-review / clarity-review) that's mid-cycle
 // (incorporating / re-reviewing in the driver), which is background work needing no human,
 // so it stays off the frame's "Approval" badge.
-const blockApprovals = computed(() =>
-  execution.openApprovals.filter(
-    (a) =>
-      (a.blockId === props.id || taskIds.value.has(a.blockId)) &&
-      !reviews.isBackground(a.agentKind, a.blockId),
-  ),
-)
+const blockApprovals = computed(() => {
+  const byBlock = execution.approvalsByBlock
+  const candidates = [...(byBlock.get(props.id) ?? [])]
+  for (const id of taskIds.value) {
+    const list = byBlock.get(id)
+    if (list) candidates.push(...list)
+  }
+  return candidates.filter((a) => !reviews.isBackground(a.agentKind, a.blockId))
+})
 
 function openFirstApproval() {
   const a = blockApprovals.value[0]

package/app/components/bootstrap/BootstrapModal.vue

@@ -24,12 +24,16 @@ const open = computed({
 
 // Load the workspace's reference architectures + recent jobs, plus (best-effort)
 // the GitHub repos the user can access so the base form can pick from them.
-watch(open, (isOpen) => {
-  if (isOpen) {
-    void bootstrap.load()
-    void loadGitHubRepos()
-  }
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      void bootstrap.load()
+      void loadGitHubRepos()
+    }
+  },
+  { immediate: true },
+)
 
 async function loadGitHubRepos() {
   try {

package/app/components/documents/DocumentImportModal.vue

@@ -41,13 +41,17 @@ const sourceDocs = computed(() =>
   source.value ? documents.documents.filter((d) => d.source === source.value) : [],
 )
 
-watch(open, (isOpen) => {
-  if (isOpen) {
-    ref_.value = ''
-    source.value = ui.documentImport?.source ?? documents.connectedSources[0]?.source ?? undefined
-    documents.loadDocuments().catch(() => {})
-  }
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      ref_.value = ''
+      source.value = ui.documentImport?.source ?? documents.connectedSources[0]?.source ?? undefined
+      documents.loadDocuments().catch(() => {})
+    }
+  },
+  { immediate: true },
+)
 
 async function doImport() {
   const value = ref_.value.trim()

package/app/components/github/AddServiceFromRepoModal.vue

@@ -41,11 +41,15 @@ async function loadRepos() {
 
 // On open: ensure we know the connection + which repos the App can access, and
 // the workspace's already-tracked repos (to flag ones already on the board).
-watch(open, (isOpen) => {
-  if (!isOpen) return
-  resetSelection()
-  void loadRepos()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    resetSelection()
+    void loadRepos()
+  },
+  { immediate: true },
+)
 
 // If the user connects from inside the modal (the not-connected prompt), pull the
 // repo list as soon as the connection is bound.

package/app/components/github/GitHubPanel.vue

@@ -26,10 +26,14 @@ const back = useIntegrationBack(open)
 
 // On open: refresh projections when connected. The not-connected state renders
 // <GitHubConnect>, which discovers and links installations on its own.
-watch(open, (isOpen) => {
-  if (!isOpen) return
-  if (github.connected) void github.load()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    if (github.connected) void github.load()
+  },
+  { immediate: true },
+)
 
 function notifyError(title: string, e: unknown) {
   toast.add({

package/app/components/kaizen/KaizenPanel.vue

@@ -12,9 +12,13 @@ const kaizen = useKaizenStore()
 
 const open = computed(() => ui.kaizenScreenOpen)
 
-watch(open, (isOpen) => {
-  if (isOpen) void kaizen.loadOverview()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void kaizen.loadOverview()
+  },
+  { immediate: true },
+)
 
 function close() {
   ui.closeKaizen()

package/app/components/layout/AccountTeamSettings.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { apiErrorEnvelope } from '~/composables/api/errors'
 import type { AccountRole } from '~/types/domain'
 import AccountDeploymentSettings from '~/components/layout/AccountDeploymentSettings.vue'
 
@@ -39,9 +40,7 @@ async function updateMemberRoles(userId: string, roles: AccountRole[]) {
 function notifyError(title: string, e: unknown) {
   toast.add({
     title,
-    description:
-      (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
-      (e instanceof Error ? e.message : String(e)),
+    description: apiErrorEnvelope(e)?.message ?? (e instanceof Error ? e.message : String(e)),
     icon: 'i-lucide-triangle-alert',
     color: 'error',
   })

package/app/components/layout/IntegrationsHub.vue

@@ -54,6 +54,8 @@ watch(
       if (workspace.workspaceId) void apiKeys.load(workspace.workspaceId).catch(() => {})
     }
   },
+  // Lazy v-if mount: the hub mounts with `integrationsOpen` already true → load immediately.
+  { immediate: true },
 )
 
 const open = computed({

package/app/components/panels/ObservabilityPanel.vue

@@ -44,13 +44,18 @@ const contextLoading = computed(
 
 // Load (and refresh) whenever a different run's panel opens. Reset to the calls view
 // and load both the calls and the provided-context snapshots.
-watch(executionId, (id) => {
-  if (id) {
-    view.value = 'calls'
-    void observability.load(id)
-    void observability.loadContext(id)
-  }
-})
+watch(
+  executionId,
+  (id) => {
+    if (id) {
+      view.value = 'calls'
+      void observability.load(id)
+      void observability.loadContext(id)
+    }
+  },
+  // Lazy v-if mount: the panel mounts with executionId already set, so load immediately.
+  { immediate: true },
+)
 
 const expandedCtx = reactive<Record<string, boolean>>({})
 function toggleCtx(s: AgentContextSnapshot) {

package/app/components/providers/VendorCredentialsModal.vue

@@ -52,12 +52,16 @@ const label = ref('')
 const token = ref('')
 const busy = ref(false)
 
-watch(open, (isOpen) => {
-  if (!isOpen) return
-  // Honour a deep-linked tab each time the modal opens (e.g. "My subscriptions" → personal).
-  activeTab.value = ui.vendorCredentialsTab
-  if (workspace.workspaceId) void creds.load(workspace.workspaceId)
-})
+watch(
+  open,
+  (isOpen) => {
+    if (!isOpen) return
+    // Honour a deep-linked tab each time the modal opens (e.g. "My subscriptions" → personal).
+    activeTab.value = ui.vendorCredentialsTab
+    if (workspace.workspaceId) void creds.load(workspace.workspaceId)
+  },
+  { immediate: true },
+)
 
 /** Step-by-step instructions for the selected vendor. */
 const steps = computed<string[]>(() => {

package/app/components/sandbox/SandboxPanel.vue

@@ -19,9 +19,13 @@ const open = computed({
 
 const tab = ref<'experiments' | 'prompts' | 'fixtures'>('experiments')
 
-watch(open, (isOpen) => {
-  if (isOpen) void store.load()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load()
+  },
+  { immediate: true },
+)
 
 // ---- experiment builder ----------------------------------------------------
 const agentKind = ref('requirements-review')
@@ -107,6 +111,21 @@ const gradeByRun = computed(() => {
   for (const g of store.detail?.grades ?? []) map.set(g.runId, g)
   return map
 })
+// Fixture id → name, so a row resolves its fixture in O(1) instead of a .find scan.
+const fixtureMap = computed(() => {
+  const map = new Map<string, string>()
+  for (const f of store.fixtures) map.set(f.id, f.name)
+  return map
+})
+// Pre-join each run with its grade + fixture name once, so the results table doesn't
+// re-`.get()` the same grade four times (and `.find()` the fixture) per row on render.
+const detailRows = computed(() =>
+  (store.detail?.runs ?? []).map((run) => ({
+    run,
+    grade: gradeByRun.value.get(run.id) ?? null,
+    fixtureName: fixtureMap.value.get(run.fixtureId) ?? run.fixtureId,
+  })),
+)
 const selectedRun = ref<SandboxRun | null>(null)
 
 function scoreColor(score: number): string {
@@ -157,8 +176,6 @@ async function archive(prompt: SandboxPromptVersion) {
     })
   }
 }
-
-const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.name ?? id
 </script>
 
 <template>
@@ -348,7 +365,7 @@ const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.nam
                   </thead>
                   <tbody>
                     <tr
-                      v-for="run in store.detail.runs"
+                      v-for="{ run, grade, fixtureName } in detailRows"
                       :key="run.id"
                       class="cursor-pointer border-t border-slate-800 hover:bg-slate-800/40"
                       @click="selectedRun = run"
@@ -357,14 +374,14 @@ const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.nam
                       <td class="py-1 pr-2 font-mono text-[11px] text-slate-400">
                         {{ run.model }}
                       </td>
-                      <td class="py-1 pr-2 text-slate-400">{{ fixtureName(run.fixtureId) }}</td>
+                      <td class="py-1 pr-2 text-slate-400">{{ fixtureName }}</td>
                       <td class="py-1 pr-2">
                         <span
-                          v-if="gradeByRun.get(run.id)"
-                          :class="scoreColor(gradeByRun.get(run.id)!.weightedTotal)"
+                          v-if="grade"
+                          :class="scoreColor(grade.weightedTotal)"
                           class="font-semibold"
                         >
-                          {{ gradeByRun.get(run.id)!.weightedTotal.toFixed(2) }}
+                          {{ grade.weightedTotal.toFixed(2) }}
                         </span>
                         <span v-else-if="run.status === 'failed'" class="text-rose-400"
                           >failed</span
@@ -373,16 +390,10 @@ const fixtureName = (id: string) => store.fixtures.find((f) => f.id === id)?.nam
                       </td>
                       <td class="py-1">
                         <span
-                          v-if="gradeByRun.get(run.id)?.objective"
-                          :class="
-                            gradeByRun.get(run.id)!.objective!.pass
-                              ? 'text-emerald-400'
-                              : 'text-amber-400'
-                          "
+                          v-if="grade?.objective"
+                          :class="grade.objective.pass ? 'text-emerald-400' : 'text-amber-400'"
                         >
-                          {{ gradeByRun.get(run.id)!.objective!.caught }}/{{
-                            gradeByRun.get(run.id)!.objective!.total
-                          }}
+                          {{ grade.objective.caught }}/{{ grade.objective.total }}
                         </span>
                         <span v-else class="text-slate-600">—</span>
                       </td>

package/app/components/settings/IssueTrackerPanel.vue

@@ -41,7 +41,9 @@ onMounted(() => {
   // probe on open if the navbar hasn't already, so the toggles below reflect reality.
   if (tasks.available === null) void tasks.probe()
 })
-watch(() => tracker.settings, hydrate, { deep: true })
+// `tracker.settings` is reassigned wholesale on hydrate/save, so a reference watch
+// (no deep traversal) catches every change.
+watch(() => tracker.settings, hydrate)
 
 // Per-source live state (available = usable now; enabled = offered to the workspace).
 const github = computed(() => tasks.descriptorFor('github'))

package/app/components/settings/LocalModeSettingsPanel.vue

@@ -43,9 +43,13 @@ function syncDraft() {
 }
 
 // Load + hydrate the draft whenever the panel opens.
-watch(open, (isOpen) => {
-  if (isOpen) void store.load().then(syncDraft)
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load().then(syncDraft)
+  },
+  { immediate: true },
+)
 watch(() => store.settings, syncDraft)
 
 async function save() {

package/app/components/settings/LocalModelEndpointsPanel.vue

@@ -21,9 +21,13 @@ const back = useIntegrationBack(open)
 
 // Load the user's endpoints whenever the panel opens (loaded independently of the
 // workspace snapshot, like personal subscriptions).
-watch(open, (isOpen) => {
-  if (isOpen) void store.load()
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load()
+  },
+  { immediate: true },
+)
 
 const RUNNERS: { value: LocalRunner; label: string }[] = (
   Object.keys(LOCAL_RUNNER_LABELS) as LocalRunner[]

package/app/components/settings/ModelConfigurationPanel.vue

@@ -55,14 +55,18 @@ const filteredKinds = computed(() => {
   )
 })
 
-watch(open, (isOpen) => {
-  if (isOpen) {
-    editor.value = null
-    filter.value = ''
-    void models.ensureLoaded(workspace.workspaceId ?? undefined)
-    if (workspace.workspaceId) void creds.load(workspace.workspaceId)
-  }
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) {
+      editor.value = null
+      filter.value = ''
+      void models.ensureLoaded(workspace.workspaceId ?? undefined)
+      if (workspace.workspaceId) void creds.load(workspace.workspaceId)
+    }
+  },
+  { immediate: true },
+)
 
 onKeyStroke('Escape', () => {
   if (!open.value) return

package/app/components/settings/ObservabilityConnectionPanel.vue

@@ -42,18 +42,22 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-watch(open, async (isOpen) => {
-  if (!isOpen) return
-  try {
-    await store.ensureLoaded()
-    if (store.connection.provider) provider.value = store.connection.provider
-    const site = store.connection.summary?.site
-    if (site) datadog.site = site
-    await store.loadIncident()
-  } catch (e) {
-    notifyError('Could not load observability settings', e)
-  }
-})
+watch(
+  open,
+  async (isOpen) => {
+    if (!isOpen) return
+    try {
+      await store.ensureLoaded()
+      if (store.connection.provider) provider.value = store.connection.provider
+      const site = store.connection.summary?.site
+      if (site) datadog.site = site
+      await store.loadIncident()
+    } catch (e) {
+      notifyError('Could not load observability settings', e)
+    }
+  },
+  { immediate: true },
+)
 
 async function saveIncident() {
   incidentBusy.value = true

package/app/components/settings/OpenRouterCatalogPanel.vue

@@ -51,15 +51,20 @@ const connectingKey = ref(false)
 
 // Load key state + persisted catalog whenever the panel opens; seed the tick selection,
 // then auto-refresh the live catalog if a key is already connected (no extra click).
-watch(open, (isOpen) => {
-  if (!isOpen || !workspace.workspaceId) return
-  const ws = workspace.workspaceId
-  void apiKeys.load(ws).catch(() => {})
-  void store.load(ws).then(() => {
-    selected.value = new Set(store.enabled.map((m) => m.id))
-    if (keyConnected.value && store.browse.length === 0) void refresh()
-  })
-})
+watch(
+  open,
+  (isOpen) => {
+    // Lazy v-if mount runs this immediately (see below); guard still skips the closed case.
+    if (!isOpen || !workspace.workspaceId) return
+    const ws = workspace.workspaceId
+    void apiKeys.load(ws).catch(() => {})
+    void store.load(ws).then(() => {
+      selected.value = new Set(store.enabled.map((m) => m.id))
+      if (keyConnected.value && store.browse.length === 0) void refresh()
+    })
+  },
+  { immediate: true },
+)
 
 // The list to show: the live browse list once refreshed, else the persisted enabled set.
 const source = computed<OpenRouterModelMeta[]>(() =>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -7,7 +7,7 @@
 // see backend/docs/native-environment-adapter.md): a `secret` field → the write-only secret
 // bundle, a non-secret field → providerConfig[key], a `baseUrl` field → baseUrl. A field
 // with a `default` is optional — left blank it falls back to that default.
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRaw, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import ProvisioningLogsDrawer from '~/components/provisioning/ProvisioningLogsDrawer.vue'
@@ -163,9 +163,9 @@ function buildManifestPayload(): {
   const template = descriptor.value?.manifestTemplate
   if (!template) return null
   const base = descriptor.value?.savedManifest ?? template
-  // `base` is a Vue reactive proxy, which structuredClone refuses (DataCloneError). The
-  // manifest is plain JSON config, so a JSON round-trip both unwraps the proxy and deep-clones.
-  const manifest: Record<string, unknown> = JSON.parse(JSON.stringify(base))
+  // `base` is a Vue reactive proxy, which structuredClone refuses (DataCloneError). `toRaw`
+  // unwraps it to the underlying plain-JSON config so structuredClone can deep-clone it.
+  const manifest: Record<string, unknown> = structuredClone(toRaw(base))
   const providerConfig: Record<string, unknown> = {
     ...(manifest.providerConfig as Record<string, unknown> | undefined),
   }

package/app/components/settings/UserSecretsSection.vue

@@ -40,9 +40,13 @@ function resetDraft() {
   if (meta) for (const [k, v] of Object.entries(meta)) values.value[k] = v
 }
 
-watch(open, (isOpen) => {
-  if (isOpen) void store.load().then(resetDraft)
-})
+watch(
+  open,
+  (isOpen) => {
+    if (isOpen) void store.load().then(resetDraft)
+  },
+  { immediate: true },
+)
 watch(kind, resetDraft)
 
 const secretField = computed<ProviderConfigField | undefined>(() =>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -87,7 +87,9 @@ function hydrate() {
   draft.spendMonthlyLimit = s.spendMonthlyLimit == null ? '' : String(s.spendMonthlyLimit)
 }
 
-watch(() => store.settings, hydrate, { immediate: true, deep: true })
+// `store.settings` is always replaced wholesale (store hydrate/update reassign the ref),
+// so tracking the object reference is enough — no deep per-field traversal needed.
+watch(() => store.settings, hydrate, { immediate: true })
 
 const saving = ref(false)
 

package/app/components/slack/SlackPanel.vue

@@ -78,6 +78,8 @@ watch(
       notifyError('Could not load Slack settings', e)
     }
   },
+  // Lazy v-if mount: the panel mounts with `open` already true, so load immediately.
+  { immediate: true },
 )
 
 async function connectViaOAuth() {

package/app/composables/api/client.ts

@@ -11,6 +11,7 @@ import {
   type WretchInstance,
 } from '@toad-contracts/frontend-http-client'
 import wretch from 'wretch'
+import { ApiError } from './errors'
 
 /**
  * The validated success-response body inferred from a route contract (every REST
@@ -75,7 +76,16 @@ export async function sendContract<T extends ApiContract>(
   params: SendParams<T>,
 ): Promise<SuccessBodyOf<T>> {
   const outcome = await sendByApiContract(client, contract, params)
-  if (outcome.error) throw outcome.error
+  if (outcome.error) {
+    const error = outcome.error
+    // A contract-declared non-2xx is reported as a plain `{ statusCode, headers, body }`
+    // value (not an Error). Wrap it so call sites get `instanceof Error` + the server's
+    // message; anything already an Error (UnexpectedResponseError, request-validation
+    // SchemaValidationError, a network fault) is rethrown unchanged.
+    if (error instanceof Error) throw error
+    const { statusCode, body } = error as { statusCode: number; body: unknown }
+    throw new ApiError(statusCode, body)
+  }
   return outcome.result!.body as SuccessBodyOf<T>
 }