@cat-factory/app 0.37.2 → 0.38.0

package/app/components/auth/AuthGate.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import LoginScreen from '~/components/auth/LoginScreen.vue'
 
 // Resolves auth state once on mount, then either renders the app (auth off, or
 // on with a signed-in user) or the login screen. The board's own bootstrap runs
 // inside the default slot, so it only fires once the user is allowed in.
 const auth = useAuthStore()
+const route = useRoute()
+
+// The password-reset page is public: a recipient of an emailed reset link is signed
+// out, so it must render even when auth is required and there's no user.
+const isPublicRoute = computed(() => route.path === '/reset-password')
 
 onMounted(() => auth.bootstrap())
 </script>
@@ -18,6 +24,8 @@ onMounted(() => auth.bootstrap())
     <span class="text-sm">Loading…</span>
   </div>
 
+  <slot v-else-if="isPublicRoute" />
+
   <LoginScreen v-else-if="auth.required && !auth.user" />
 
   <slot v-else />

package/app/components/auth/LoginScreen.vue

@@ -12,13 +12,17 @@ const invite = computed(() => {
 })
 
 // Password form: signup creates a new user (invite or allowed-email-domain gated),
-// login authenticates an existing one. Default to login; flip to signup when invited.
-const mode = ref<'login' | 'signup'>(invite.value ? 'signup' : 'login')
+// login authenticates an existing one, forgot requests a reset link. Default to login;
+// flip to signup when invited.
+const mode = ref<'login' | 'signup' | 'forgot'>(invite.value ? 'signup' : 'login')
 const email = ref('')
 const password = ref('')
 const name = ref('')
 const error = ref<string | null>(null)
 const busy = ref(false)
+// Set once a reset link has been requested, so we can show a generic confirmation
+// (we never reveal whether the email is registered).
+const forgotSent = ref(false)
 
 async function submitPassword() {
   error.value = null
@@ -44,6 +48,27 @@ async function submitPassword() {
   }
 }
 
+async function submitForgot() {
+  error.value = null
+  busy.value = true
+  try {
+    await auth.forgotPassword(email.value)
+    forgotSent.value = true
+  } catch {
+    // The request endpoint is generic by design; only an infra error lands here.
+    error.value = 'Something went wrong. Please try again.'
+  } finally {
+    busy.value = false
+  }
+}
+
+/** Switch modes, clearing any transient form state. */
+function setMode(next: 'login' | 'signup' | 'forgot') {
+  mode.value = next
+  error.value = null
+  forgotSent.value = false
+}
+
 const showOAuthDivider = computed(
   () => auth.providers.password && (auth.providers.github || auth.providers.google),
 )
@@ -58,12 +83,15 @@ const showOAuthDivider = computed(
         <UIcon name="i-lucide-layout-dashboard" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
         <h1 class="mb-1 text-lg font-semibold text-white">Architecture Board</h1>
         <p class="text-sm text-slate-400">
-          {{ invite ? 'Accept your invitation to continue.' : 'Sign in to continue.' }}
+          <template v-if="mode === 'forgot'">Reset your password.</template>
+          <template v-else>{{
+            invite ? 'Accept your invitation to continue.' : 'Sign in to continue.'
+          }}</template>
         </p>
       </div>
 
       <!-- OAuth providers -->
-      <div class="space-y-2">
+      <div v-if="mode !== 'forgot'" class="space-y-2">
         <UButton
           v-if="auth.providers.github"
           block
@@ -87,12 +115,19 @@ const showOAuthDivider = computed(
         </UButton>
       </div>
 
-      <div v-if="showOAuthDivider" class="my-4 flex items-center gap-3 text-xs text-slate-500">
+      <div
+        v-if="showOAuthDivider && mode !== 'forgot'"
+        class="my-4 flex items-center gap-3 text-xs text-slate-500"
+      >
         <span class="h-px flex-1 bg-slate-800" /> or <span class="h-px flex-1 bg-slate-800" />
       </div>
 
       <!-- Email / password -->
-      <form v-if="auth.providers.password" class="space-y-3" @submit.prevent="submitPassword">
+      <form
+        v-if="auth.providers.password && mode !== 'forgot'"
+        class="space-y-3"
+        @submit.prevent="submitPassword"
+      >
         <UInput
           v-if="mode === 'signup'"
           v-model="name"
@@ -126,17 +161,60 @@ const showOAuthDivider = computed(
         <p class="text-center text-xs text-slate-400">
           <template v-if="mode === 'login'">
             Need an account?
-            <button type="button" class="text-indigo-400 hover:underline" @click="mode = 'signup'">
+            <button
+              type="button"
+              class="text-indigo-400 hover:underline"
+              @click="setMode('signup')"
+            >
               Sign up
             </button>
           </template>
           <template v-else>
             Already have an account?
-            <button type="button" class="text-indigo-400 hover:underline" @click="mode = 'login'">
+            <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
               Sign in
             </button>
           </template>
         </p>
+        <p v-if="mode === 'login'" class="text-center text-xs text-slate-400">
+          <button type="button" class="text-indigo-400 hover:underline" @click="setMode('forgot')">
+            Forgot password?
+          </button>
+        </p>
+      </form>
+
+      <!-- Forgot password: request a reset link by email -->
+      <form
+        v-if="auth.providers.password && mode === 'forgot'"
+        class="space-y-3"
+        @submit.prevent="submitForgot"
+      >
+        <template v-if="forgotSent">
+          <p class="text-sm text-slate-300">
+            If an account exists for that email, a password reset link is on its way. Check your
+            inbox.
+          </p>
+        </template>
+        <template v-else>
+          <UInput
+            v-model="email"
+            type="email"
+            required
+            placeholder="Email"
+            icon="i-lucide-at-sign"
+            size="lg"
+            class="w-full"
+          />
+          <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
+          <UButton block size="lg" color="primary" type="submit" :loading="busy">
+            Send reset link
+          </UButton>
+        </template>
+        <p class="text-center text-xs text-slate-400">
+          <button type="button" class="text-indigo-400 hover:underline" @click="setMode('login')">
+            Back to sign in
+          </button>
+        </p>
       </form>
     </div>
   </div>

package/app/components/auth/ResetPasswordScreen.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+// Standalone full-screen reset form reached from the emailed link
+// (`/reset-password?token=…`). It is a public route (see AuthGate), so a recipient who
+// is signed out can still set a new password. On success we send them to the login.
+const auth = useAuthStore()
+
+const token = computed(() => {
+  if (typeof window === 'undefined') return ''
+  return new URLSearchParams(window.location.search).get('token') || ''
+})
+
+const password = ref('')
+const confirm = ref('')
+const error = ref<string | null>(null)
+const busy = ref(false)
+const done = ref(false)
+
+async function submit() {
+  error.value = null
+  if (password.value.length < 8) {
+    error.value = 'Password must be at least 8 characters.'
+    return
+  }
+  if (password.value !== confirm.value) {
+    error.value = 'Passwords do not match.'
+    return
+  }
+  busy.value = true
+  try {
+    await auth.resetPassword(token.value, password.value)
+    done.value = true
+  } catch (e) {
+    error.value =
+      (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
+      'This password reset link is invalid or has expired.'
+  } finally {
+    busy.value = false
+  }
+}
+
+function goToLogin() {
+  if (typeof window !== 'undefined') window.location.assign('/')
+}
+</script>
+
+<template>
+  <div class="flex h-screen w-screen items-center justify-center bg-slate-950 text-slate-100">
+    <div
+      class="w-full max-w-sm rounded-xl border border-slate-800 bg-slate-900/80 p-8 backdrop-blur"
+    >
+      <div class="mb-6 text-center">
+        <UIcon name="i-lucide-key-round" class="mx-auto mb-3 h-10 w-10 text-indigo-400" />
+        <h1 class="mb-1 text-lg font-semibold text-white">Reset password</h1>
+        <p class="text-sm text-slate-400">Choose a new password for your account.</p>
+      </div>
+
+      <template v-if="done">
+        <p class="mb-4 text-sm text-slate-300">
+          Your password has been reset. You can now sign in with your new password.
+        </p>
+        <UButton block size="lg" color="primary" @click="goToLogin">Go to sign in</UButton>
+      </template>
+
+      <template v-else-if="!token">
+        <p class="mb-4 text-sm text-rose-400">
+          This reset link is missing its token. Request a new link from the sign-in screen.
+        </p>
+        <UButton block size="lg" color="neutral" variant="subtle" @click="goToLogin">
+          Back to sign in
+        </UButton>
+      </template>
+
+      <form v-else class="space-y-3" @submit.prevent="submit">
+        <UInput
+          v-model="password"
+          type="password"
+          required
+          placeholder="New password"
+          icon="i-lucide-lock"
+          size="lg"
+          class="w-full"
+        />
+        <UInput
+          v-model="confirm"
+          type="password"
+          required
+          placeholder="Confirm new password"
+          icon="i-lucide-lock"
+          size="lg"
+          class="w-full"
+        />
+        <p v-if="error" class="text-sm text-rose-400">{{ error }}</p>
+        <UButton block size="lg" color="primary" type="submit" :loading="busy">
+          Reset password
+        </UButton>
+        <p class="text-center text-xs text-slate-400">
+          <button type="button" class="text-indigo-400 hover:underline" @click="goToLogin">
+            Back to sign in
+          </button>
+        </p>
+      </form>
+    </div>
+  </div>
+</template>

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/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[]