@cat-factory/app 0.79.1 → 0.80.0

package/app/components/board/BoardCanvas.vue

@@ -10,6 +10,7 @@ import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
 import { useTaskExpansion } from '~/composables/useTaskExpansion'
 import { useBlockDrag } from '~/composables/useBlockDrag'
 import { useFrameStacking } from '~/composables/useFrameStacking'
+import { useFramePlacement } from '~/composables/useFramePlacement'
 import { useViewport } from '~/composables/useViewport'
 import { boardPanMode } from '~/utils/boardPanMode'
 
@@ -24,6 +25,7 @@ const { t } = useI18n()
 const { onNodeDragStop, onViewportChange, screenToFlowCoordinate } = useVueFlow(BOARD_FLOW_ID)
 const { draggingId } = useBlockDrag()
 const { hoveredFrameId } = useFrameStacking()
+const { freeFramePosition, focusFrame } = useFramePlacement()
 // Touch drives the canvas gestures: a touch-capable surface needs one-finger pan.
 // We gate on `hasTouch` (any-pointer: coarse), not `isTouch` (the *primary* pointer),
 // so a touchscreen laptop / 2-in-1 — whose primary pointer is the trackpad — still
@@ -121,10 +123,14 @@ async function onDrop(event: DragEvent) {
   if (!payload) return
 
   if (payload.kind === 'block') {
-    const position = screenToFlowCoordinate({ x: event.clientX, y: event.clientY })
+    // Drop where the cursor is, but nudge off any existing frame it lands on so a new
+    // frame never overlaps a neighbour; then centre the camera on it.
+    const dropped = screenToFlowCoordinate({ x: event.clientX, y: event.clientY })
+    const position = freeFramePosition({ near: dropped })
     try {
       const block = await board.addBlock(payload.blockType, position)
       ui.select(block.id)
+      await focusFrame(block.id)
     } catch {
       toast.add({
         title: t('board.canvas.addBlockFailedTitle'),

package/app/components/bootstrap/BootstrapModal.vue

@@ -13,7 +13,9 @@ const ui = useUiStore()
 const bootstrap = useBootstrapStore()
 const agentRuns = useAgentRunsStore()
 const github = useGitHubStore()
+const board = useBoardStore()
 const toast = useToast()
+const { freeFramePosition, focusFrame } = useFramePlacement()
 const { t } = useI18n()
 const { confirmAction, toastDone } = useConfirmAction()
 
@@ -242,6 +244,22 @@ async function launch() {
       instructions.value = ''
       // Reset the repo role too, so a later bootstrap doesn't silently inherit this one's type.
       selectedType.value = 'service'
+      // The provisional frame arrived (bootstrap() refreshed the board). Re-home it to
+      // free space so it never overlaps an existing service — the backend places it on a
+      // fixed diagonal stagger that can land on top of a large neighbour — then centre the
+      // camera on it. Best-effort: the run has already started, so a placement hiccup must
+      // NOT surface a bootstrap-failed toast or leave the dialog open — swallow it here
+      // rather than letting it reach the outer catch.
+      if (job.blockId && board.getBlock(job.blockId)) {
+        const id = job.blockId
+        try {
+          const position = freeFramePosition({ size: board.containerSize(id), exclude: id })
+          await board.moveBlock(id, position)
+          await focusFrame(id)
+        } catch {
+          // Placement is cosmetic; the run is tracked on the board regardless.
+        }
+      }
       // The run is now tracked on the board, so get out of the way: close the
       // dialog as soon as bootstrapping has actually started.
       ui.closeBootstrap()

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

@@ -28,6 +28,7 @@ const ui = useUiStore()
 const github = useGitHubStore()
 const board = useBoardStore()
 const toast = useToast()
+const { freeFramePosition, focusFrame } = useFramePlacement()
 
 const open = computed({
   get: () => ui.addServiceOpen,
@@ -218,9 +219,14 @@ async function add() {
       directory: isMonorepo.value ? selectedDirectory.value : undefined,
       isMonorepo: isMonorepo.value,
       type: selectedType.value,
+      // Place the imported frame in free space (centred in view) instead of the
+      // backend's default stagger, so it never overlaps an existing service.
+      position: freeFramePosition(),
     })
     // Refresh the projection so the new repo↔block link is reflected locally.
     await github.load()
+    // Centre the camera on the newly imported service.
+    await focusFrame(block.id)
     configuredBlockId.value = block.id
     configuredDirectory.value = isMonorepo.value ? selectedDirectory.value : undefined
     toast.add({
@@ -364,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>