@cat-factory/app 0.54.1 → 0.54.2

package/app/components/focus/BlockFocusView.vue

@@ -52,115 +52,109 @@ function openApprovalFor(approvalId: string) {
 </script>
 
 <template>
-  <Transition name="focus-fade">
-    <div
-      v-if="block && statusMeta && typeMeta"
-      class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
-    >
-      <!-- header / breadcrumb -->
-      <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
-        <UButton
-          icon="i-lucide-arrow-left"
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          @click="close"
-        >
-          {{ t('focus.board') }}
-        </UButton>
-        <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
+  <!-- The focus-fade Transition is owned by the parent mount (pages/index.vue), so the
+       leave animation survives this component being unmounted by its v-if gate. -->
+  <div
+    v-if="block && statusMeta && typeMeta"
+    class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+  >
+    <!-- header / breadcrumb -->
+    <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+      <UButton icon="i-lucide-arrow-left" color="neutral" variant="ghost" size="sm" @click="close">
+        {{ t('focus.board') }}
+      </UButton>
+      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
+      <div
+        class="flex h-9 w-9 items-center justify-center rounded-lg"
+        :style="{ backgroundColor: typeMeta.accent + '22' }"
+      >
+        <UIcon :name="typeMeta.icon" class="h-5 w-5" :style="{ color: typeMeta.accent }" />
+      </div>
+      <div>
+        <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
+        <div class="text-xs text-slate-500">
+          {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
+        </div>
+      </div>
+      <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
+        {{ statusMeta.label }}
+      </UBadge>
+      <div class="ml-auto flex items-center gap-2">
+        <UDropdownMenu :items="runMenu">
+          <UButton
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-play"
+            trailing-icon="i-lucide-chevron-down"
+          >
+            {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
+          </UButton>
+        </UDropdownMenu>
+        <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
+      </div>
+    </header>
+
+    <div class="grid flex-1 grid-cols-[1fr_300px] gap-6 overflow-hidden p-6">
+      <!-- main: pipeline flow -->
+      <section
+        class="flex flex-col overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-6"
+      >
+        <div class="mb-4 flex items-center gap-2">
+          <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
+            {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
+          </h2>
+        </div>
+
+        <PipelineProgress
+          v-if="instance"
+          :instance="instance"
+          @open-decision="openDecisionFor"
+          @open-approval="openApprovalFor"
+        />
+
         <div
-          class="flex h-9 w-9 items-center justify-center rounded-lg"
-          :style="{ backgroundColor: typeMeta.accent + '22' }"
+          v-else
+          class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
         >
-          <UIcon :name="typeMeta.icon" class="h-5 w-5" :style="{ color: typeMeta.accent }" />
+          {{ t('focus.emptyPipelineHint') }}
         </div>
+      </section>
+
+      <!-- side: details -->
+      <aside
+        class="space-y-4 overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-5"
+      >
         <div>
-          <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
-          <div class="text-xs text-slate-500">
-            {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('focus.description') }}
           </div>
+          <p class="text-sm text-slate-300">{{ block.description }}</p>
         </div>
-        <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
-          {{ statusMeta.label }}
-        </UBadge>
-        <div class="ml-auto flex items-center gap-2">
-          <UDropdownMenu :items="runMenu">
-            <UButton
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-play"
-              trailing-icon="i-lucide-chevron-down"
-            >
-              {{ instance ? t('focus.rerunPipeline') : t('focus.runPipeline') }}
-            </UButton>
-          </UDropdownMenu>
-          <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
-        </div>
-      </header>
-
-      <div class="grid flex-1 grid-cols-[1fr_300px] gap-6 overflow-hidden p-6">
-        <!-- main: pipeline flow -->
-        <section
-          class="flex flex-col overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-6"
-        >
-          <div class="mb-4 flex items-center gap-2">
-            <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
-            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
-              {{ instance ? instance.pipelineName : t('focus.noPipelineRunning') }}
-            </h2>
+        <div v-if="instance">
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('focus.overallProgress') }}
           </div>
-
-          <PipelineProgress
-            v-if="instance"
-            :instance="instance"
-            @open-decision="openDecisionFor"
-            @open-approval="openApprovalFor"
-          />
-
-          <div
-            v-else
-            class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
-          >
-            {{ t('focus.emptyPipelineHint') }}
+          <UProgress :model-value="Math.round(block.progress * 100)" />
+          <div class="mt-1 text-[11px] text-slate-400">
+            {{ n(block.progress, 'percent') }}
           </div>
-        </section>
-
-        <!-- side: details -->
-        <aside
-          class="space-y-4 overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-5"
-        >
-          <div>
-            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              {{ t('focus.description') }}
-            </div>
-            <p class="text-sm text-slate-300">{{ block.description }}</p>
-          </div>
-          <div v-if="instance">
-            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              {{ t('focus.overallProgress') }}
-            </div>
-            <UProgress :model-value="Math.round(block.progress * 100)" />
-            <div class="mt-1 text-[11px] text-slate-400">
-              {{ n(block.progress, 'percent') }}
-            </div>
+        </div>
+        <div>
+          <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ t('focus.dependencies') }}
           </div>
-          <div>
-            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              {{ t('focus.dependencies') }}
-            </div>
-            <div v-if="deps.length" class="flex flex-wrap gap-1">
-              <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
-                {{ d.title }}
-              </UBadge>
-            </div>
-            <div v-else class="text-[11px] text-slate-500">{{ t('focus.noDependencies') }}</div>
+          <div v-if="deps.length" class="flex flex-wrap gap-1">
+            <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
+              {{ d.title }}
+            </UBadge>
           </div>
-        </aside>
-      </div>
+          <div v-else class="text-[11px] text-slate-500">{{ t('focus.noDependencies') }}</div>
+        </div>
+      </aside>
     </div>
-  </Transition>
+  </div>
 </template>
 
 <style scoped>

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) {

package/package.json

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