@cat-factory/app 0.79.2 → 0.81.0

package/app/components/documents/TaskContextDocs.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { Block, DocumentSourceKind } from '~/types/domain'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 // Documents (from any source) attached to a task as agent context, shown inside
 // the InspectorPanel. Linked docs are fed to agents during execution (see the
@@ -51,17 +52,19 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
 </script>
 
 <template>
-  <div v-if="documents.available" class="space-y-2">
-    <div class="flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('documents.taskDocs.heading') }}
-      </span>
+  <InspectorSection
+    v-if="documents.available"
+    :title="t('documents.taskDocs.heading')"
+    :hint="t('documents.taskDocs.hint')"
+    :count="linked.length"
+  >
+    <template #actions>
       <UDropdownMenu :items="attachMenu" :content="{ side: 'bottom', align: 'end' }">
         <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">{{
           t('documents.taskDocs.attach')
         }}</UButton>
       </UDropdownMenu>
-    </div>
+    </template>
 
     <div v-if="linked.length" class="space-y-1">
       <a
@@ -82,5 +85,5 @@ const attachMenu = computed<DropdownMenuItem[][]>(() => {
     <p v-else class="text-[11px] text-slate-500">
       {{ t('documents.taskDocs.empty') }}
     </p>
-  </div>
+  </InspectorSection>
 </template>

package/app/components/fragments/FragmentLibraryManager.vue

@@ -298,9 +298,7 @@ async function checkSource(id: string) {
   try {
     const status = await library.checkSource(id)
     toast.add({
-      title: status.changed
-        ? t('fragments.toast.changesAvailable', { count: status.changedCount }, status.changedCount)
-        : t('fragments.toast.upToDate'),
+      title: status.changed ? t('fragments.toast.changesAvailable') : t('fragments.toast.upToDate'),
       icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
     })
   } catch (e) {
@@ -585,13 +583,7 @@ async function unlinkSource(id: string) {
             variant="subtle"
             class="ms-auto"
           >
-            {{
-              t(
-                'fragments.sources.changes',
-                { count: library.sourceChanges[s.id] },
-                library.sourceChanges[s.id] ?? 0,
-              )
-            }}
+            {{ t('fragments.sources.changes') }}
           </UBadge>
           <div class="ms-auto flex gap-1">
             <UButton

package/app/components/github/AddServiceFromRepoModal.vue

@@ -370,8 +370,9 @@ function done() {
             <ServiceTestConfig
               :block="configuredBlock"
               :repo="{ githubId: selectedRepoId!, directory: configuredDirectory }"
+              default-open
             />
-            <ServiceFragments :block="configuredBlock" />
+            <ServiceFragments :block="configuredBlock" default-open />
           </div>
 
           <div class="flex flex-wrap items-center gap-2">

package/app/components/panels/InspectorPanel.vue

@@ -442,10 +442,10 @@ const showOriginalDescription = ref(false)
       </div>
 
       <!-- task: context documents -->
-      <TaskContextDocs v-if="isTask" :block="block" />
+      <TaskContextDocs v-if="isTask" :key="`context-docs-${block.id}`" :block="block" />
 
       <!-- task: context issues (tracker) -->
-      <TaskContextIssues v-if="isTask" :block="block" />
+      <TaskContextIssues v-if="isTask" :key="`context-issues-${block.id}`" :block="block" />
 
       <!-- service (frame): navigate the prescriptive spec tree (+ Gherkin scenarios when
            the spec is on the repo's default branch) -->
@@ -462,35 +462,52 @@ const showOriginalDescription = ref(false)
       </UButton>
 
       <!-- service / module: tasks summary -->
-      <ContainerSummary v-if="isContainer" :block="block" />
+      <ContainerSummary v-if="isContainer" :key="`container-${block.id}`" :block="block" />
       <!-- frontend (frame): build/serve/mock config + backend bindings (board links) -->
-      <FrontendConfig v-if="isFrame && block.type === 'frontend'" :block="block" />
+      <FrontendConfig
+        v-if="isFrame && block.type === 'frontend'"
+        :key="`frontend-${block.id}`"
+        :block="block"
+      />
 
       <!-- service (frame): directed connections to the other services it uses (board links) -->
-      <ServiceConnections v-if="isFrame && block.type === 'service'" :block="block" />
+      <ServiceConnections
+        v-if="isFrame && block.type === 'service'"
+        :key="`connections-${block.id}`"
+        :block="block"
+      />
 
       <!-- service (frame): test infra + provisioning configuration -->
-      <ServiceTestConfig v-if="isFrame" :block="block" />
+      <ServiceTestConfig v-if="isFrame" :key="`test-config-${block.id}`" :block="block" />
 
       <!-- service (frame): best-practice fragments for code-aware agents -->
-      <ServiceFragments v-if="isFrame" :block="block" />
+      <ServiceFragments v-if="isFrame" :key="`fragments-${block.id}`" :block="block" />
 
       <!-- service (frame): post-release-health monitor/SLO mapping -->
-      <ServiceReleaseHealthConfig v-if="isFrame" :block="block" />
-
-      <!-- task: dependencies, structure, agent config, run settings, execution -->
+      <ServiceReleaseHealthConfig
+        v-if="isFrame"
+        :key="`release-health-${block.id}`"
+        :block="block"
+      />
+
+      <!-- task: the live execution surface first (open by default), then the estimate,
+           then the collapsed configuration sections (dependencies, run settings, agent
+           config, structure) so a running task reads top-down without scrolling. -->
+      <!-- Keyed by block id so a manual collapse/expand doesn't leak across task
+           selections: switching tasks re-mounts each section back to its default state
+           (e.g. the live Execution section is open again for the newly selected task). -->
       <template v-else-if="isTask">
-        <RecurringScheduleSettings :block="block" />
-        <TaskDependencies :block="block" />
-        <TaskStructure :block="block" />
-        <TaskAgentConfig :block="block" />
-        <TaskEstimateBadge :block="block" />
-        <TaskRunSettings :block="block" />
-        <TaskExecution :block="block" />
+        <RecurringScheduleSettings :key="`schedule-${block.id}`" :block="block" />
+        <TaskExecution :key="`execution-${block.id}`" :block="block" />
+        <TaskEstimateBadge :key="`estimate-${block.id}`" :block="block" />
+        <TaskDependencies :key="`deps-${block.id}`" :block="block" />
+        <TaskRunSettings :key="`run-settings-${block.id}`" :block="block" />
+        <TaskAgentConfig :key="`agent-config-${block.id}`" :block="block" />
+        <TaskStructure :key="`structure-${block.id}`" :block="block" />
       </template>
 
       <!-- epic: the full tree of member tasks, grouped by service → module -->
-      <EpicChildren v-else-if="isEpic" :block="block" />
+      <EpicChildren v-else-if="isEpic" :key="`epic-${block.id}`" :block="block" />
 
       <!-- actions -->
       <div class="flex items-center gap-2">

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 const props = defineProps<{ block: Block }>()
 
@@ -20,7 +21,12 @@ function addTask() {
 </script>
 
 <template>
-  <div class="space-y-4">
+  <InspectorSection
+    :title="t('inspector.container.title')"
+    :hint="t('inspector.container.hint')"
+    :count="tasks.length"
+    default-open
+  >
     <!-- modules (services only) -->
     <div v-if="modules.length">
       <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
@@ -81,5 +87,5 @@ function addTask() {
     <p v-if="isFrame" class="text-[11px] text-slate-500">
       {{ t('inspector.container.servicesHint') }}
     </p>
-  </div>
+  </InspectorSection>
 </template>

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

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import type { Block } from '~/types/domain'
 import { STATUS_META } from '~/utils/catalog'
+import InspectorSection from '~/components/panels/inspector/InspectorSection.vue'
 
 // The epic inspector body: the full tree of member tasks (which may live under different
 // services/modules), grouped service → module → task. Each task row selects it. Membership
@@ -45,15 +46,16 @@ const groups = computed(() => {
 </script>
 
 <template>
-  <div>
-    <div class="mb-1 flex items-center justify-between">
-      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        {{ t('inspector.epicChildren.title') }}
-      </span>
+  <InspectorSection
+    :title="t('inspector.epicChildren.title')"
+    :hint="t('inspector.epicChildren.hint')"
+    default-open
+  >
+    <template #actions>
       <span class="text-[11px] text-slate-500">{{
         t('inspector.epicChildren.doneCount', { done, total: members.length })
       }}</span>
-    </div>
+    </template>
 
     <div v-if="members.length === 0" class="text-[11px] text-slate-500">
       {{ t('inspector.epicChildren.empty') }}
@@ -92,5 +94,5 @@ const groups = computed(() => {
         </div>
       </div>
     </div>
-  </div>
+  </InspectorSection>
 </template>