@cat-factory/app 0.54.0 → 0.54.2

package/app/components/recurring/RecurrenceEditor.vue

@@ -8,15 +8,22 @@ import type { Recurrence } from '~/types/recurring'
 const props = defineProps<{ modelValue: Recurrence }>()
 const emit = defineEmits<{ 'update:modelValue': [Recurrence] }>()
 
-const WEEKDAYS = [
-  { value: 0, label: 'Sun' },
-  { value: 1, label: 'Mon' },
-  { value: 2, label: 'Tue' },
-  { value: 3, label: 'Wed' },
-  { value: 4, label: 'Thu' },
-  { value: 5, label: 'Fri' },
-  { value: 6, label: 'Sat' },
-]
+const { t } = useI18n()
+
+// Exhaustive day-index→label map of literal `t(...)` keys (keeps the typed-key drift
+// guard live for this short-form weekday list).
+const WEEKDAY_LABELS = computed<Record<number, string>>(() => ({
+  0: t('recurring.weekday.sun'),
+  1: t('recurring.weekday.mon'),
+  2: t('recurring.weekday.tue'),
+  3: t('recurring.weekday.wed'),
+  4: t('recurring.weekday.thu'),
+  5: t('recurring.weekday.fri'),
+  6: t('recurring.weekday.sat'),
+}))
+const WEEKDAYS = computed(() =>
+  [0, 1, 2, 3, 4, 5, 6].map((value) => ({ value, label: WEEKDAY_LABELS.value[value]! })),
+)
 
 function patch(p: Partial<Recurrence>) {
   emit('update:modelValue', { ...props.modelValue, ...p })
@@ -60,7 +67,7 @@ const timezoneOptions = computed(() =>
 
 <template>
   <div class="space-y-3">
-    <UFormField label="Run every">
+    <UFormField :label="t('recurring.runEvery')">
       <div class="flex items-center gap-2">
         <UInput
           :model-value="modelValue.intervalHours"
@@ -69,11 +76,11 @@ const timezoneOptions = computed(() =>
           class="w-24"
           @update:model-value="patch({ intervalHours: Math.max(1, Number($event) || 1) })"
         />
-        <span class="text-xs text-slate-400">hours</span>
+        <span class="text-xs text-slate-400">{{ t('recurring.hours') }}</span>
       </div>
     </UFormField>
 
-    <UFormField label="Allowed days" help="Leave all off to run any day.">
+    <UFormField :label="t('recurring.allowedDays')" :help="t('recurring.allowedDaysHelp')">
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="d in WEEKDAYS"
@@ -91,7 +98,7 @@ const timezoneOptions = computed(() =>
     <UFormField>
       <UCheckbox
         :model-value="windowEnabled"
-        label="Only within an hour-of-day window (e.g. business hours)"
+        :label="t('recurring.windowToggle')"
         @update:model-value="toggleWindow(Boolean($event))"
       />
     </UFormField>
@@ -103,7 +110,7 @@ const timezoneOptions = computed(() =>
         class="w-28"
         @update:model-value="patch({ windowStartHour: Number($event) })"
       />
-      <span class="text-xs text-slate-400">to</span>
+      <span class="text-xs text-slate-400">{{ t('recurring.to') }}</span>
       <USelect
         :model-value="modelValue.windowEndHour ?? 24 % 24"
         :items="hours"
@@ -112,7 +119,7 @@ const timezoneOptions = computed(() =>
       />
     </div>
 
-    <UFormField label="Timezone">
+    <UFormField :label="t('recurring.timezone')">
       <USelect
         :model-value="modelValue.timezone"
         :items="timezoneOptions"

package/app/components/sandbox/SandboxPanel.vue

@@ -6,11 +6,39 @@
 // and Fixtures (the graded inputs each run is scored against). Loaded on demand when the
 // window opens; 503 (the deployment hasn't provisioned the Sandbox DB) shows a notice.
 import { computed, ref, watch } from 'vue'
-import type { SandboxGrade, SandboxPromptVersion, SandboxRun } from '~/types/sandbox'
+import type {
+  SandboxExperimentStatus,
+  SandboxFixtureKind,
+  SandboxGrade,
+  SandboxPromptVersion,
+  SandboxRun,
+} from '~/types/sandbox'
 
 const ui = useUiStore()
 const store = useSandboxStore()
 const toast = useToast()
+const { t } = useI18n()
+
+// Exhaustive enum→label maps of literal `t(...)` keys (keeps the typed-key drift guard
+// live for these runtime-indexed status/kind/origin lookups).
+const EXPERIMENT_STATUS_LABEL = computed<Record<SandboxExperimentStatus, string>>(() => ({
+  draft: t('sandbox.experimentStatus.draft'),
+  running: t('sandbox.experimentStatus.running'),
+  done: t('sandbox.experimentStatus.done'),
+  failed: t('sandbox.experimentStatus.failed'),
+}))
+const FIXTURE_KIND_LABEL = computed<Record<SandboxFixtureKind, string>>(() => ({
+  requirements: t('sandbox.fixtureKind.requirements'),
+  clarity: t('sandbox.fixtureKind.clarity'),
+  architecture: t('sandbox.fixtureKind.architecture'),
+  'code-review': t('sandbox.fixtureKind.code-review'),
+  'repo-feature': t('sandbox.fixtureKind.repo-feature'),
+  'repo-bug': t('sandbox.fixtureKind.repo-bug'),
+}))
+const FIXTURE_ORIGIN_LABEL = computed<Record<'builtin' | 'custom', string>>(() => ({
+  builtin: t('sandbox.fixtureOrigin.builtin'),
+  custom: t('sandbox.fixtureOrigin.custom'),
+}))
 
 const open = computed({
   get: () => ui.sandboxOpen,
@@ -39,7 +67,7 @@ const selectedFixtureIds = ref<string[]>([])
 const selectedJudgeModel = ref<string>('')
 
 const judgeModelItems = computed(() => [
-  { label: 'Deployment default', value: '' },
+  { label: t('sandbox.deploymentDefault'), value: '' },
   ...store.selectableModels.map((m) => ({ label: m.label, value: m.id })),
 ])
 
@@ -82,7 +110,7 @@ async function createAndRun() {
   if (!canRun.value) return
   try {
     const created = await store.createExperiment({
-      name: name.value.trim() || `${agentKind.value} — sandbox run`,
+      name: name.value.trim() || t('sandbox.defaultRunName', { kind: agentKind.value }),
       agentKind: agentKind.value,
       judgeModel: selectedJudgeModel.value || undefined,
       matrix: {
@@ -92,12 +120,12 @@ async function createAndRun() {
       },
     })
     name.value = ''
-    toast.add({ title: 'Running experiment…', icon: 'i-lucide-flask-conical', color: 'info' })
+    toast.add({ title: t('sandbox.toast.running'), icon: 'i-lucide-flask-conical', color: 'info' })
     await store.launch(created.id)
-    toast.add({ title: 'Experiment complete', icon: 'i-lucide-check', color: 'success' })
+    toast.add({ title: t('sandbox.toast.complete'), icon: 'i-lucide-check', color: 'success' })
   } catch (e) {
     toast.add({
-      title: 'Could not run the experiment',
+      title: t('sandbox.toast.runFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -149,11 +177,11 @@ async function saveVersion() {
   savingPrompt.value = true
   try {
     await store.saveVersion(editing.value.id, editText.value)
-    toast.add({ title: 'Saved a new version', icon: 'i-lucide-check', color: 'success' })
+    toast.add({ title: t('sandbox.toast.versionSaved'), icon: 'i-lucide-check', color: 'success' })
     editing.value = null
   } catch (e) {
     toast.add({
-      title: 'Could not save the version',
+      title: t('sandbox.toast.saveFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -169,7 +197,7 @@ async function archive(prompt: SandboxPromptVersion) {
     if (editing.value?.id === prompt.id) editing.value = null
   } catch (e) {
     toast.add({
-      title: 'Could not archive',
+      title: t('sandbox.toast.archiveFailed'),
       description: e instanceof Error ? e.message : String(e),
       icon: 'i-lucide-triangle-alert',
       color: 'error',
@@ -181,8 +209,8 @@ async function archive(prompt: SandboxPromptVersion) {
 <template>
   <UModal
     v-model:open="open"
-    title="Sandbox — prompt & model testing"
-    description="Try prompt versions and models against graded fixtures, scored by a judge model."
+    :title="t('sandbox.title')"
+    :description="t('sandbox.description')"
     :ui="{ content: 'max-w-5xl' }"
   >
     <template #body>
@@ -194,21 +222,21 @@ async function archive(prompt: SandboxPromptVersion) {
         v-else-if="!store.available"
         class="rounded-lg border border-slate-700 bg-slate-900/50 p-6 text-sm text-slate-300"
       >
-        <p class="font-medium text-slate-200">The Sandbox isn't enabled for this deployment.</p>
-        <p class="mt-1 text-slate-400">
-          It needs its own database (a dedicated <code>SANDBOX_DB</code> on Cloudflare, or the
-          <code>sandbox</code> Postgres schema on Node). Provision it and reload.
-        </p>
+        <p class="font-medium text-slate-200">{{ t('sandbox.unavailable.title') }}</p>
+        <i18n-t keypath="sandbox.unavailable.body" tag="p" class="mt-1 text-slate-400">
+          <template #db><code>SANDBOX_DB</code></template>
+          <template #schema><code>sandbox</code></template>
+        </i18n-t>
       </div>
 
       <div
         v-else-if="store.error"
         class="rounded-lg border border-rose-800 bg-rose-950/40 p-6 text-sm text-rose-200"
       >
-        <p class="font-medium text-rose-100">The Sandbox failed to load.</p>
+        <p class="font-medium text-rose-100">{{ t('sandbox.error.title') }}</p>
         <p class="mt-1 text-rose-300">{{ store.error }}</p>
         <UButton class="mt-3" size="xs" color="neutral" variant="subtle" @click="store.load()">
-          Retry
+          {{ t('common.retry') }}
         </UButton>
       </div>
 
@@ -216,9 +244,17 @@ async function archive(prompt: SandboxPromptVersion) {
         <UTabs
           v-model="tab"
           :items="[
-            { label: 'Experiments', value: 'experiments', icon: 'i-lucide-flask-conical' },
-            { label: 'Prompts', value: 'prompts', icon: 'i-lucide-file-text' },
-            { label: 'Fixtures', value: 'fixtures', icon: 'i-lucide-clipboard-list' },
+            {
+              label: t('sandbox.tab.experiments'),
+              value: 'experiments',
+              icon: 'i-lucide-flask-conical',
+            },
+            { label: t('sandbox.tab.prompts'), value: 'prompts', icon: 'i-lucide-file-text' },
+            {
+              label: t('sandbox.tab.fixtures'),
+              value: 'fixtures',
+              icon: 'i-lucide-clipboard-list',
+            },
           ]"
         />
 
@@ -227,10 +263,10 @@ async function archive(prompt: SandboxPromptVersion) {
           <!-- builder -->
           <div class="space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3">
             <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              New experiment
+              {{ t('sandbox.builder.title') }}
             </p>
 
-            <UFormField label="Agent">
+            <UFormField :label="t('sandbox.builder.agent')">
               <USelect
                 v-model="agentKind"
                 :items="store.agentKinds.map((k) => ({ label: k.label, value: k.agentKind }))"
@@ -241,7 +277,7 @@ async function archive(prompt: SandboxPromptVersion) {
 
             <div>
               <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-                Prompt versions
+                {{ t('sandbox.builder.promptVersions') }}
               </span>
               <div class="max-h-28 space-y-1 overflow-auto pr-1">
                 <label
@@ -261,7 +297,11 @@ async function archive(prompt: SandboxPromptVersion) {
                     variant="soft"
                     size="xs"
                   >
-                    {{ p.origin === 'baseline' ? 'baseline' : `v${p.version}` }}
+                    {{
+                      p.origin === 'baseline'
+                        ? t('sandbox.baseline')
+                        : t('sandbox.versionLabel', { version: p.version })
+                    }}
                   </UBadge>
                 </label>
               </div>
@@ -269,7 +309,7 @@ async function archive(prompt: SandboxPromptVersion) {
 
             <div>
               <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-                Models
+                {{ t('sandbox.builder.models') }}
               </span>
               <div class="max-h-28 space-y-1 overflow-auto pr-1">
                 <label
@@ -286,14 +326,14 @@ async function archive(prompt: SandboxPromptVersion) {
                   <span class="truncate">{{ m.label }}</span>
                 </label>
                 <p v-if="!store.selectableModels.length" class="text-xs text-slate-500">
-                  No selectable models — configure a provider key or enable Cloudflare AI.
+                  {{ t('sandbox.builder.noModels') }}
                 </p>
               </div>
             </div>
 
             <div>
               <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
-                Fixtures
+                {{ t('sandbox.builder.fixtures') }}
               </span>
               <div class="max-h-28 space-y-1 overflow-auto pr-1">
                 <label
@@ -310,24 +350,30 @@ async function archive(prompt: SandboxPromptVersion) {
                   <span class="truncate">{{ f.name }}</span>
                 </label>
                 <p v-if="!kindFixtures.length" class="text-xs text-slate-500">
-                  No fixtures for this agent.
+                  {{ t('sandbox.builder.noFixtures') }}
                 </p>
               </div>
             </div>
 
-            <UFormField label="Judge model" hint="grades every cell">
+            <UFormField
+              :label="t('sandbox.builder.judgeModel')"
+              :hint="t('sandbox.builder.judgeModelHint')"
+            >
               <USelect v-model="selectedJudgeModel" :items="judgeModelItems" />
             </UFormField>
 
-            <UFormField label="Name (optional)">
-              <UInput v-model="name" :placeholder="`${agentKind} — sandbox run`" />
+            <UFormField :label="t('sandbox.builder.nameLabel')">
+              <UInput
+                v-model="name"
+                :placeholder="t('sandbox.defaultRunName', { kind: agentKind })"
+              />
             </UFormField>
 
             <div class="flex items-center justify-between">
               <span class="text-xs text-slate-500">
-                {{ cellCount }} cell{{ cellCount === 1 ? '' : 's' }}
+                {{ t('sandbox.builder.cellCount', { count: cellCount }, cellCount) }}
                 <span v-if="cellCount > store.maxCells" class="text-rose-400">
-                  (max {{ store.maxCells }})
+                  {{ t('sandbox.builder.maxCells', { max: store.maxCells }) }}
                 </span>
               </span>
               <UButton
@@ -338,7 +384,7 @@ async function archive(prompt: SandboxPromptVersion) {
                 :disabled="!canRun"
                 @click="createAndRun()"
               >
-                Run
+                {{ t('sandbox.builder.run') }}
               </UButton>
             </div>
           </div>
@@ -350,17 +396,19 @@ async function archive(prompt: SandboxPromptVersion) {
                 <p class="text-sm font-medium text-slate-200">
                   {{ store.detail.experiment.name }}
                 </p>
-                <UBadge variant="soft" size="xs">{{ store.detail.experiment.status }}</UBadge>
+                <UBadge variant="soft" size="xs">{{
+                  EXPERIMENT_STATUS_LABEL[store.detail.experiment.status]
+                }}</UBadge>
               </div>
               <div class="overflow-auto">
                 <table class="w-full text-left text-xs">
                   <thead class="text-slate-500">
                     <tr>
-                      <th class="py-1 pr-2 font-medium">Prompt</th>
-                      <th class="py-1 pr-2 font-medium">Model</th>
-                      <th class="py-1 pr-2 font-medium">Fixture</th>
-                      <th class="py-1 pr-2 font-medium">Score</th>
-                      <th class="py-1 font-medium">Objective</th>
+                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.prompt') }}</th>
+                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.model') }}</th>
+                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.fixture') }}</th>
+                      <th class="py-1 pr-2 font-medium">{{ t('sandbox.results.col.score') }}</th>
+                      <th class="py-1 font-medium">{{ t('sandbox.results.col.objective') }}</th>
                     </tr>
                   </thead>
                   <tbody>
@@ -383,9 +431,9 @@ async function archive(prompt: SandboxPromptVersion) {
                         >
                           {{ grade.weightedTotal.toFixed(2) }}
                         </span>
-                        <span v-else-if="run.status === 'failed'" class="text-rose-400"
-                          >failed</span
-                        >
+                        <span v-else-if="run.status === 'failed'" class="text-rose-400">{{
+                          t('sandbox.results.failed')
+                        }}</span>
                         <span v-else class="text-slate-600">—</span>
                       </td>
                       <td class="py-1">
@@ -429,7 +477,9 @@ async function archive(prompt: SandboxPromptVersion) {
               </div>
             </div>
 
-            <p class="text-[11px] uppercase tracking-wide text-slate-500">Past experiments</p>
+            <p class="text-[11px] uppercase tracking-wide text-slate-500">
+              {{ t('sandbox.results.past') }}
+            </p>
             <div class="max-h-56 space-y-1 overflow-auto">
               <button
                 v-for="x in store.experiments"
@@ -438,10 +488,10 @@ async function archive(prompt: SandboxPromptVersion) {
                 @click="store.openExperiment(x.id)"
               >
                 <span class="truncate text-slate-300">{{ x.name }}</span>
-                <UBadge variant="soft" size="xs">{{ x.status }}</UBadge>
+                <UBadge variant="soft" size="xs">{{ EXPERIMENT_STATUS_LABEL[x.status] }}</UBadge>
               </button>
               <p v-if="!store.experiments.length" class="text-xs text-slate-500">
-                No experiments yet.
+                {{ t('sandbox.results.empty') }}
               </p>
             </div>
           </div>
@@ -463,7 +513,11 @@ async function archive(prompt: SandboxPromptVersion) {
                     variant="soft"
                     size="xs"
                   >
-                    {{ p.origin === 'baseline' ? 'baseline' : `v${p.version}` }}
+                    {{
+                      p.origin === 'baseline'
+                        ? t('sandbox.baseline')
+                        : t('sandbox.versionLabel', { version: p.version })
+                    }}
                   </UBadge>
                 </div>
                 <span class="text-[11px] text-slate-500">{{ p.agentKind }}</span>
@@ -474,7 +528,11 @@ async function archive(prompt: SandboxPromptVersion) {
                   color="neutral"
                   variant="ghost"
                   size="xs"
-                  :title="p.origin === 'baseline' ? 'Fork into a candidate' : 'Edit / version'"
+                  :title="
+                    p.origin === 'baseline'
+                      ? t('sandbox.prompts.forkTitle')
+                      : t('sandbox.prompts.editTitle')
+                  "
                   @click="edit(p)"
                 />
                 <UButton
@@ -494,12 +552,16 @@ async function archive(prompt: SandboxPromptVersion) {
             class="space-y-2 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
           >
             <p class="text-[11px] uppercase tracking-wide text-slate-500">
-              {{ editing.origin === 'baseline' ? 'Fork' : 'New version of' }} · {{ editing.name }}
+              {{
+                editing.origin === 'baseline'
+                  ? t('sandbox.prompts.forkOf', { name: editing.name })
+                  : t('sandbox.prompts.newVersionOf', { name: editing.name })
+              }}
             </p>
             <UTextarea v-model="editText" :rows="16" class="w-full font-mono text-xs" autoresize />
             <div class="flex justify-end gap-2">
               <UButton color="neutral" variant="ghost" size="sm" @click="editing = null">
-                Cancel
+                {{ t('common.cancel') }}
               </UButton>
               <UButton
                 color="primary"
@@ -509,13 +571,12 @@ async function archive(prompt: SandboxPromptVersion) {
                 :disabled="!editText.trim()"
                 @click="saveVersion()"
               >
-                Save new version
+                {{ t('sandbox.prompts.saveVersion') }}
               </UButton>
             </div>
           </div>
           <p v-else class="self-start text-xs text-slate-500">
-            Pick a prompt to fork a shipped baseline or version a candidate. Each save appends an
-            immutable version you can put under test.
+            {{ t('sandbox.prompts.hint') }}
           </p>
         </div>
 
@@ -529,23 +590,29 @@ async function archive(prompt: SandboxPromptVersion) {
             <div class="flex items-center justify-between">
               <span class="text-slate-200">{{ f.name }}</span>
               <div class="flex items-center gap-1.5">
-                <UBadge variant="soft" size="xs">{{ f.kind }}</UBadge>
+                <UBadge variant="soft" size="xs">{{ FIXTURE_KIND_LABEL[f.kind] }}</UBadge>
                 <UBadge
                   :color="f.origin === 'builtin' ? 'neutral' : 'primary'"
                   variant="soft"
                   size="xs"
                 >
-                  {{ f.origin }}
+                  {{ FIXTURE_ORIGIN_LABEL[f.origin] }}
                 </UBadge>
               </div>
             </div>
             <p v-if="f.objective?.kind === 'findings'" class="mt-0.5 text-[11px] text-slate-500">
-              {{ f.objective.expectations.length }} graded expectation{{
-                f.objective.expectations.length === 1 ? '' : 's'
+              {{
+                t(
+                  'sandbox.fixtures.expectations',
+                  { count: f.objective.expectations.length },
+                  f.objective.expectations.length,
+                )
               }}
             </p>
           </div>
-          <p v-if="!store.fixtures.length" class="text-xs text-slate-500">No fixtures.</p>
+          <p v-if="!store.fixtures.length" class="text-xs text-slate-500">
+            {{ t('sandbox.fixtures.empty') }}
+          </p>
         </div>
       </div>
     </template>

package/app/pages/index.vue

@@ -14,11 +14,7 @@ import InspectorPanel from '~/components/panels/InspectorPanel.vue'
 import DecisionModal from '~/components/panels/DecisionModal.vue'
 import AgentStepDetail from '~/components/panels/AgentStepDetail.vue'
 import StepResultViewHost from '~/components/panels/StepResultViewHost.vue'
-import BlockFocusView from '~/components/focus/BlockFocusView.vue'
-import TaskSourceConnectModal from '~/components/tasks/TaskSourceConnectModal.vue'
-import TaskImportModal from '~/components/tasks/TaskImportModal.vue'
 import AddTaskModal from '~/components/board/AddTaskModal.vue'
-import RecurringPipelineModal from '~/components/board/RecurringPipelineModal.vue'
 import GitHubOnboarding from '~/components/github/GitHubOnboarding.vue'
 import CommandBar from '~/components/layout/CommandBar.vue'
 import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
@@ -30,6 +26,17 @@ const ObservabilityPanel = defineAsyncComponent(
   () => import('~/components/panels/ObservabilityPanel.vue'),
 )
 const KaizenPanel = defineAsyncComponent(() => import('~/components/kaizen/KaizenPanel.vue'))
+// Occasional, externally store-gated surfaces — deferred to their own chunks like the
+// sibling document modals above. Each mounts only while its ui open-flag is set, so it
+// loads on first open instead of bloating the initial bundle.
+const BlockFocusView = defineAsyncComponent(() => import('~/components/focus/BlockFocusView.vue'))
+const TaskSourceConnectModal = defineAsyncComponent(
+  () => import('~/components/tasks/TaskSourceConnectModal.vue'),
+)
+const TaskImportModal = defineAsyncComponent(() => import('~/components/tasks/TaskImportModal.vue'))
+const RecurringPipelineModal = defineAsyncComponent(
+  () => import('~/components/board/RecurringPipelineModal.vue'),
+)
 const DocumentSourceConnectModal = defineAsyncComponent(
   () => import('~/components/documents/DocumentSourceConnectModal.vue'),
 )
@@ -248,7 +255,12 @@ watch(
         <BoardToolbar />
         <SpendWarningBanner />
         <InspectorPanel />
-        <BlockFocusView />
+        <!-- Code-split focus view. The fade lives here (not inside the component) so the
+             leave animation still plays when `focusBlockId` clears and the v-if unmounts
+             the chunk — an inner Transition would be torn down before it could run. -->
+        <Transition name="focus-fade">
+          <BlockFocusView v-if="ui.focusBlockId" />
+        </Transition>
       </main>
 
       <!-- Always-mounted, fast-path surfaces. -->
@@ -256,15 +268,15 @@ watch(
       <DecisionModal />
       <AgentStepDetail />
       <StepResultViewHost />
-      <TaskSourceConnectModal />
-      <TaskImportModal />
       <AddTaskModal />
-      <RecurringPipelineModal />
       <CommandBar />
       <PersonalCredentialModal />
 
       <!-- Lazy panels: mounted only while their ui open-flag is set, so each loads on
            first open (its own chunk) rather than bloating the initial bundle. -->
+      <TaskSourceConnectModal v-if="ui.taskConnect" />
+      <TaskImportModal v-if="ui.taskImport" />
+      <RecurringPipelineModal v-if="ui.addRecurringFrameId" />
       <ObservabilityPanel v-if="ui.observabilityInstanceId" />
       <KaizenPanel v-if="ui.kaizenScreenOpen" />
       <DocumentSourceConnectModal v-if="ui.documentConnect" />

package/app/stores/workspace.ts

@@ -113,11 +113,16 @@ export const useWorkspaceStore = defineStore(
       ready.value = false
       error.value = null
       try {
-        // Accounts are an auth concept — empty in dev, which leaves boards unscoped.
-        await useAccountsStore()
-          .load()
-          .catch(() => {})
-        workspaces.value = await api.listWorkspaces()
+        // Accounts (an auth concept — empty in dev, which leaves boards unscoped) and the
+        // workspace list are independent, so fetch them concurrently. resolveActiveBoard
+        // needs both, so it still runs after.
+        const [, workspaceList] = await Promise.all([
+          useAccountsStore()
+            .load()
+            .catch(() => {}),
+          api.listWorkspaces(),
+        ])
+        workspaces.value = workspaceList
         await resolveActiveBoard()
         ready.value = true
       } catch (e) {