@cat-factory/app 0.17.1 → 0.18.0

package/app/components/board/BoardCanvas.vue

@@ -9,6 +9,7 @@ import { STATUS_META } from '~/utils/catalog'
 import { readDndPayload, blockIdFromEvent } from '~/utils/dnd'
 import { BOARD_FLOW_ID } from '~/composables/useBoardFlow'
 import { useTaskExpansion } from '~/composables/useTaskExpansion'
+import { useFrameExpansion } from '~/composables/useFrameExpansion'
 
 const board = useBoardStore()
 const pipelines = usePipelinesStore()
@@ -21,8 +22,11 @@ const { onNodeDragStop, onViewportChange, screenToFlowCoordinate } = useVueFlow(
 
 // Gate which task cards expand their pipeline list on deep zoom: only on-screen
 // cards, and only the centre-most of any that would overlap (see useTaskExpansion).
+// The frame-level gate is the same idea one level up: which service frames may
+// auto-expand to their task canvas once zoomed in (see useFrameExpansion).
 const boardEl = ref<HTMLElement | null>(null)
 useTaskExpansion(boardEl)
+useFrameExpansion(boardEl)
 
 // Only frames are board nodes. Dependencies live on tasks (rendered inside the
 // frames), so there are no frame-to-frame edges on the canvas.

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

@@ -24,6 +24,30 @@ const services = useServicesStore()
 const composePath = computed(() => props.block.testComposePath ?? '')
 const noInfra = computed(() => props.block.noInfraDependencies === true)
 
+// The default test environment a task under this service is spawned with. `local`
+// stands the dependencies up via docker-compose (or "no infra"); `ephemeral` runs
+// against a provisioned environment. A task can override it per-task in its agent
+// settings. Absent ⇒ the built-in `ephemeral`.
+type TestEnvironment = 'local' | 'ephemeral'
+const TEST_ENVIRONMENTS: { value: TestEnvironment; label: string; hint: string }[] = [
+  {
+    value: 'ephemeral',
+    label: 'Ephemeral environment',
+    hint: 'tests run against a provisioned env',
+  },
+  { value: 'local', label: 'Local (docker-compose)', hint: 'the Tester stands deps up locally' },
+]
+const effectiveTestEnv = computed<TestEnvironment>(
+  () => props.block.defaultTestEnvironment ?? 'ephemeral',
+)
+function setDefaultTestEnv(value: TestEnvironment) {
+  board.updateBlock(props.block.id, { defaultTestEnvironment: value })
+}
+
+// The provisioning hints (cloud provider + instance size) are advisory inputs to the
+// ephemeral-environment provisioner, not commonly tuned — keep them collapsed by default.
+const showProvisioning = ref(false)
+
 // The repo + service subdirectory backing this frame, for the compose-file browser.
 // A monorepo service isn't on the `github_repos` blockId link (that stays null), so
 // fall back to the service catalog mapping, which carries the repo + directory.
@@ -93,6 +117,27 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
       Test infrastructure
     </div>
 
+    <div class="space-y-1">
+      <span class="text-[11px] text-slate-400">Default test environment</span>
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="e in TEST_ENVIRONMENTS"
+          :key="e.value"
+          :color="effectiveTestEnv === e.value ? 'primary' : 'neutral'"
+          :variant="effectiveTestEnv === e.value ? 'soft' : 'ghost'"
+          size="xs"
+          :title="e.hint"
+          @click="setDefaultTestEnv(e.value)"
+        >
+          {{ e.label }}
+        </UButton>
+      </div>
+      <p class="text-[11px] leading-snug text-slate-500">
+        The default tasks under this service are spawned with — each task can override it in its
+        agent settings.
+      </p>
+    </div>
+
     <div class="space-y-1">
       <label class="text-[11px] text-slate-400">docker-compose path</label>
       <div class="flex items-center gap-1">
@@ -163,35 +208,59 @@ const missingInfra = computed(() => !noInfra.value && composePath.value.trim() =
       Tester won't start.
     </p>
 
-    <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">Cloud provider</span>
-      <div class="flex flex-wrap gap-1">
-        <UButton
-          v-for="p in PROVIDERS"
-          :key="p.value"
-          :color="effectiveProvider === p.value ? 'primary' : 'neutral'"
-          :variant="effectiveProvider === p.value ? 'soft' : 'ghost'"
-          size="xs"
-          @click="setProvider(p.value)"
-        >
-          {{ p.label }}
-        </UButton>
-      </div>
-    </div>
+    <!-- Provisioning hints: advisory inputs to the ephemeral-environment provisioner.
+         Collapsed by default — most services never tune them. -->
+    <div class="border-t border-slate-800 pt-2">
+      <button
+        type="button"
+        class="flex w-full items-center gap-1.5 text-left text-[11px] font-semibold uppercase tracking-wide text-slate-500 hover:text-slate-300"
+        @click="showProvisioning = !showProvisioning"
+      >
+        <UIcon
+          :name="showProvisioning ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+          class="h-3.5 w-3.5"
+        />
+        Ephemeral environment provisioning
+      </button>
 
-    <div class="space-y-1">
-      <span class="text-[11px] text-slate-400">Instance size</span>
-      <div class="flex flex-wrap gap-1">
-        <UButton
-          v-for="s in SIZES"
-          :key="s.value"
-          :color="(block.instanceSize ?? 'medium') === s.value ? 'primary' : 'neutral'"
-          :variant="(block.instanceSize ?? 'medium') === s.value ? 'soft' : 'ghost'"
-          size="xs"
-          @click="setSize(s.value)"
-        >
-          {{ s.label }}
-        </UButton>
+      <div v-if="showProvisioning" class="mt-2 space-y-3">
+        <p class="text-[11px] leading-snug text-slate-500">
+          A hint for provisioning this service's ephemeral test environment — which cloud provider
+          to deploy to and how large an instance to request. Ignored for local (docker-compose)
+          testing.
+        </p>
+
+        <div class="space-y-1">
+          <span class="text-[11px] text-slate-400">Cloud provider</span>
+          <div class="flex flex-wrap gap-1">
+            <UButton
+              v-for="p in PROVIDERS"
+              :key="p.value"
+              :color="effectiveProvider === p.value ? 'primary' : 'neutral'"
+              :variant="effectiveProvider === p.value ? 'soft' : 'ghost'"
+              size="xs"
+              @click="setProvider(p.value)"
+            >
+              {{ p.label }}
+            </UButton>
+          </div>
+        </div>
+
+        <div class="space-y-1">
+          <span class="text-[11px] text-slate-400">Instance size</span>
+          <div class="flex flex-wrap gap-1">
+            <UButton
+              v-for="s in SIZES"
+              :key="s.value"
+              :color="(block.instanceSize ?? 'medium') === s.value ? 'primary' : 'neutral'"
+              :variant="(block.instanceSize ?? 'medium') === s.value ? 'soft' : 'ghost'"
+              size="xs"
+              @click="setSize(s.value)"
+            >
+              {{ s.label }}
+            </UButton>
+          </div>
+        </div>
       </div>
     </div>
   </div>

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

@@ -29,6 +29,33 @@ const descriptors = computed(() => {
 
 const run = computed(() => execution.getByBlock(props.block.id))
 
+// The Tester's environment descriptor inherits its default from the service frame this
+// task lives under (set in the service inspector); a task only overrides it by clicking.
+// Walk up the parent chain (frame → module → task) to find that default.
+const serviceDefaultTestEnv = computed<'local' | 'ephemeral' | undefined>(() => {
+  let cur: Block | undefined = props.block
+  for (let i = 0; i < 8 && cur; i++) {
+    if (cur.level === 'frame') return cur.defaultTestEnvironment
+    if (!cur.parentId) break
+    cur = board.getBlock(cur.parentId)
+  }
+  return undefined
+})
+
+/** The effective default for a descriptor — the inherited service value for the Tester's
+ *  environment, otherwise the descriptor's own static default. */
+function effectiveDefault(d: { id: string; default: string }): string {
+  if (d.id === 'tester.environment' && serviceDefaultTestEnv.value) {
+    return serviceDefaultTestEnv.value
+  }
+  return d.default
+}
+
+/** Whether a descriptor's shown value is inherited (not explicitly pinned on this task). */
+function isInherited(d: { id: string }): boolean {
+  return d.id === 'tester.environment' && props.block.agentConfig?.[d.id] === undefined
+}
+
 /** A descriptor freezes once its contributing agent's step has left `pending`. */
 function isFrozen(agentKind: string): boolean {
   const steps = run.value?.steps
@@ -55,19 +82,24 @@ function setValue(id: string, value: string) {
     <div v-for="d in descriptors" :key="d.id" class="space-y-1">
       <div class="flex items-center justify-between">
         <span class="text-[11px] text-slate-400">{{ d.label }}</span>
-        <UIcon
-          v-if="isFrozen(d.agentKind)"
-          name="i-lucide-lock"
-          class="h-3 w-3 text-slate-500"
-          title="Frozen — the agent has started"
-        />
+        <div class="flex items-center gap-1.5">
+          <span v-if="isInherited(d)" class="text-[10px] text-slate-500"
+            >inherited from service</span
+          >
+          <UIcon
+            v-if="isFrozen(d.agentKind)"
+            name="i-lucide-lock"
+            class="h-3 w-3 text-slate-500"
+            title="Frozen — the agent has started"
+          />
+        </div>
       </div>
       <div class="flex flex-wrap gap-1">
         <UButton
           v-for="opt in d.options"
           :key="opt.value"
-          :color="valueOf(d.id, d.default) === opt.value ? 'primary' : 'neutral'"
-          :variant="valueOf(d.id, d.default) === opt.value ? 'soft' : 'ghost'"
+          :color="valueOf(d.id, effectiveDefault(d)) === opt.value ? 'primary' : 'neutral'"
+          :variant="valueOf(d.id, effectiveDefault(d)) === opt.value ? 'soft' : 'ghost'"
           size="xs"
           :disabled="isFrozen(d.agentKind)"
           @click="setValue(d.id, opt.value)"

package/app/components/pipeline/PipelineBuilder.vue

@@ -203,12 +203,17 @@ async function clone(p: Pipeline) {
 </script>
 
 <template>
-  <USlideover v-model:open="open" title="Pipeline builder" side="left">
+  <USlideover
+    v-model:open="open"
+    title="Pipeline builder"
+    side="left"
+    :ui="{ content: 'max-w-[90vw] sm:max-w-2xl lg:max-w-5xl xl:max-w-6xl' }"
+  >
     <template #body>
-      <div class="grid h-full grid-cols-2 gap-4">
+      <div class="grid h-full grid-cols-1 gap-4 lg:grid-cols-3">
         <!-- agent palette -->
-        <div class="overflow-y-auto pr-1">
-          <div class="mb-2 flex items-center justify-between gap-2">
+        <div class="flex min-h-0 flex-col overflow-hidden">
+          <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
               Agent palette
             </h3>
@@ -222,11 +227,13 @@ async function clone(p: Pipeline) {
               Add agent
             </UButton>
           </div>
-          <AgentPalette @add="add" />
+          <div class="min-h-0 flex-1 overflow-y-auto pr-1">
+            <AgentPalette @add="add" />
+          </div>
         </div>
 
         <!-- draft chain -->
-        <div class="flex flex-col">
+        <div class="flex min-h-0 flex-col overflow-hidden">
           <div class="mb-2 flex items-center justify-between gap-2">
             <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">Pipeline</h3>
             <UButton
@@ -286,7 +293,7 @@ async function clone(p: Pipeline) {
             Click agents on the left to assemble a linear pipeline.
           </div>
 
-          <ol v-else class="flex-1 space-y-2 overflow-y-auto">
+          <ol v-else class="min-h-0 flex-1 space-y-2 overflow-y-auto pr-1">
             <li
               v-for="(unit, vi) in pipelines.units"
               :key="unit.index"
@@ -576,160 +583,160 @@ async function clone(p: Pipeline) {
               </div>
             </li>
           </ol>
+        </div>
 
-          <!-- Saved pipelines: review the library + delete (the run affordance
-               moved to the task card / inspector when the palettes were removed). -->
-          <div v-if="pipelines.pipelines.length" class="mt-4 border-t border-slate-800 pt-3">
-            <div class="mb-2 flex items-center justify-between gap-2">
-              <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
-                Saved pipelines
-              </h3>
-              <UButton
-                v-if="archivedCount"
-                :icon="showArchived ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
-                :color="showArchived ? 'primary' : 'neutral'"
-                variant="ghost"
-                size="xs"
-                @click="showArchived = !showArchived"
-              >
-                {{ showArchived ? 'Hide archived' : `Archived (${archivedCount})` }}
-              </UButton>
-            </div>
-
-            <!-- Label filter chips. -->
-            <div v-if="allLabels.length" class="mb-2 flex flex-wrap items-center gap-1">
-              <UBadge
-                :color="labelFilter === null ? 'primary' : 'neutral'"
-                variant="soft"
-                size="xs"
-                class="cursor-pointer"
-                @click="labelFilter = null"
-              >
-                All
-              </UBadge>
-              <UBadge
-                v-for="l in allLabels"
-                :key="l"
-                :color="labelFilter === l ? 'primary' : 'neutral'"
-                variant="soft"
-                size="xs"
-                class="cursor-pointer"
-                @click="labelFilter = labelFilter === l ? null : l"
-              >
-                {{ l }}
-              </UBadge>
-            </div>
-
-            <ul class="space-y-1.5">
-              <li
-                v-for="p in visiblePipelines"
-                :key="p.id"
-                class="group rounded-lg border border-slate-700 bg-slate-800/40"
-                :class="{ 'opacity-60': p.archived }"
-              >
-                <div class="flex items-center gap-2 px-2 py-1.5">
-                  <button
-                    type="button"
-                    class="flex min-w-0 flex-1 items-center gap-2 text-left"
-                    @click="toggleSaved(p.id)"
+        <!-- Saved pipelines: review the library + delete (the run affordance
+             moved to the task card / inspector when the palettes were removed). -->
+        <div v-if="pipelines.pipelines.length" class="flex min-h-0 flex-col overflow-hidden">
+          <div class="mb-2 flex shrink-0 items-center justify-between gap-2">
+            <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
+              Saved pipelines
+            </h3>
+            <UButton
+              v-if="archivedCount"
+              :icon="showArchived ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
+              :color="showArchived ? 'primary' : 'neutral'"
+              variant="ghost"
+              size="xs"
+              @click="showArchived = !showArchived"
+            >
+              {{ showArchived ? 'Hide archived' : `Archived (${archivedCount})` }}
+            </UButton>
+          </div>
+
+          <!-- Label filter chips. -->
+          <div v-if="allLabels.length" class="mb-2 flex shrink-0 flex-wrap items-center gap-1">
+            <UBadge
+              :color="labelFilter === null ? 'primary' : 'neutral'"
+              variant="soft"
+              size="xs"
+              class="cursor-pointer"
+              @click="labelFilter = null"
+            >
+              All
+            </UBadge>
+            <UBadge
+              v-for="l in allLabels"
+              :key="l"
+              :color="labelFilter === l ? 'primary' : 'neutral'"
+              variant="soft"
+              size="xs"
+              class="cursor-pointer"
+              @click="labelFilter = labelFilter === l ? null : l"
+            >
+              {{ l }}
+            </UBadge>
+          </div>
+
+          <ul class="min-h-0 flex-1 space-y-1.5 overflow-y-auto pr-1">
+            <li
+              v-for="p in visiblePipelines"
+              :key="p.id"
+              class="group rounded-lg border border-slate-700 bg-slate-800/40"
+              :class="{ 'opacity-60': p.archived }"
+            >
+              <div class="flex items-center gap-2 px-2 py-1.5">
+                <button
+                  type="button"
+                  class="flex min-w-0 flex-1 items-center gap-2 text-left"
+                  @click="toggleSaved(p.id)"
+                >
+                  <UIcon
+                    :name="
+                      expandedSaved.has(p.id) ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'
+                    "
+                    class="h-3.5 w-3.5 shrink-0 text-slate-500"
+                  />
+                  <span class="min-w-0 flex-1 truncate text-xs text-slate-200">{{ p.name }}</span>
+                  <UBadge
+                    v-for="l in p.labels ?? []"
+                    :key="l"
+                    color="info"
+                    variant="soft"
+                    size="xs"
+                    class="shrink-0"
                   >
-                    <UIcon
-                      :name="
-                        expandedSaved.has(p.id) ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'
-                      "
-                      class="h-3.5 w-3.5 shrink-0 text-slate-500"
-                    />
-                    <span class="min-w-0 flex-1 truncate text-xs text-slate-200">{{ p.name }}</span>
-                    <UBadge
-                      v-for="l in p.labels ?? []"
-                      :key="l"
-                      color="info"
-                      variant="soft"
-                      size="xs"
-                      class="shrink-0"
-                    >
-                      {{ l }}
-                    </UBadge>
-                    <UBadge
-                      v-if="p.builtin"
-                      color="neutral"
-                      variant="soft"
-                      size="xs"
-                      class="shrink-0"
-                    >
-                      default
-                    </UBadge>
-                    <span class="shrink-0 text-[10px] text-slate-500">
-                      {{ p.agentKinds.length }} {{ p.agentKinds.length === 1 ? 'step' : 'steps' }}
-                    </span>
-                  </button>
-                  <div
-                    class="flex shrink-0 items-center opacity-0 transition group-hover:opacity-100"
+                    {{ l }}
+                  </UBadge>
+                  <UBadge
+                    v-if="p.builtin"
+                    color="neutral"
+                    variant="soft"
+                    size="xs"
+                    class="shrink-0"
                   >
-                    <!-- Archive/unarchive: organize the library without deleting. Works on
+                    default
+                  </UBadge>
+                  <span class="shrink-0 text-[10px] text-slate-500">
+                    {{ p.agentKinds.length }} {{ p.agentKinds.length === 1 ? 'step' : 'steps' }}
+                  </span>
+                </button>
+                <div
+                  class="flex shrink-0 items-center opacity-0 transition group-hover:opacity-100"
+                >
+                  <!-- Archive/unarchive: organize the library without deleting. Works on
                          built-ins too (view metadata, not structure). -->
-                    <UButton
-                      :icon="p.archived ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
-                      color="neutral"
-                      variant="ghost"
-                      size="xs"
-                      :title="p.archived ? 'Unarchive' : 'Archive (hide from the default view)'"
-                      @click="toggleArchive(p)"
-                    />
-                    <!-- Clone is available on every pipeline — it's how a read-only
+                  <UButton
+                    :icon="p.archived ? 'i-lucide-archive-restore' : 'i-lucide-archive'"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    :title="p.archived ? 'Unarchive' : 'Archive (hide from the default view)'"
+                    @click="toggleArchive(p)"
+                  />
+                  <!-- Clone is available on every pipeline — it's how a read-only
                          built-in template becomes an editable copy. -->
-                    <UButton
-                      icon="i-lucide-copy"
-                      color="neutral"
-                      variant="ghost"
-                      size="xs"
-                      :title="p.builtin ? 'Clone this default into an editable copy' : 'Clone'"
-                      @click="clone(p)"
-                    />
-                    <!-- Built-in templates are read-only; only custom pipelines edit in place. -->
-                    <UButton
-                      v-if="!p.builtin"
-                      icon="i-lucide-pencil"
-                      color="neutral"
-                      variant="ghost"
-                      size="xs"
-                      title="Edit this pipeline"
-                      @click="edit(p)"
-                    />
-                    <!-- Built-in templates are read-only — they can be cloned but not
+                  <UButton
+                    icon="i-lucide-copy"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    :title="p.builtin ? 'Clone this default into an editable copy' : 'Clone'"
+                    @click="clone(p)"
+                  />
+                  <!-- Built-in templates are read-only; only custom pipelines edit in place. -->
+                  <UButton
+                    v-if="!p.builtin"
+                    icon="i-lucide-pencil"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    title="Edit this pipeline"
+                    @click="edit(p)"
+                  />
+                  <!-- Built-in templates are read-only — they can be cloned but not
                          deleted (the backend rejects it too); only custom ones delete. -->
-                    <UButton
-                      v-if="!p.builtin"
-                      icon="i-lucide-trash-2"
-                      color="neutral"
-                      variant="ghost"
-                      size="xs"
-                      @click="pipelines.removePipeline(p.id)"
-                    />
-                  </div>
+                  <UButton
+                    v-if="!p.builtin"
+                    icon="i-lucide-trash-2"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    @click="pipelines.removePipeline(p.id)"
+                  />
                 </div>
+              </div>
 
-                <!-- Full ordered step list, revealed on click. -->
-                <ol
-                  v-if="expandedSaved.has(p.id)"
-                  class="space-y-1 border-t border-slate-800 px-2 py-2 pl-7"
+              <!-- Full ordered step list, revealed on click. -->
+              <ol
+                v-if="expandedSaved.has(p.id)"
+                class="space-y-1 border-t border-slate-800 px-2 py-2 pl-7"
+              >
+                <li
+                  v-for="(k, i) in p.agentKinds"
+                  :key="i"
+                  class="flex items-center gap-2"
+                  :class="{ 'opacity-50 line-through': p.enabled?.[i] === false }"
+                  :title="p.enabled?.[i] === false ? 'Disabled — skipped at run' : undefined"
                 >
-                  <li
-                    v-for="(k, i) in p.agentKinds"
-                    :key="i"
-                    class="flex items-center gap-2"
-                    :class="{ 'opacity-50 line-through': p.enabled?.[i] === false }"
-                    :title="p.enabled?.[i] === false ? 'Disabled — skipped at run' : undefined"
-                  >
-                    <span class="w-4 shrink-0 text-center text-[10px] text-slate-500">{{
-                      i + 1
-                    }}</span>
-                    <AgentKindIcon :kind="k" show-label />
-                  </li>
-                </ol>
-              </li>
-            </ul>
-          </div>
+                  <span class="w-4 shrink-0 text-center text-[10px] text-slate-500">{{
+                    i + 1
+                  }}</span>
+                  <AgentKindIcon :kind="k" show-label />
+                </li>
+              </ol>
+            </li>
+          </ul>
         </div>
       </div>
     </template>

package/app/composables/useFrameExpansion.ts

@@ -0,0 +1,118 @@
+import type { Ref } from 'vue'
+import { onMounted, onBeforeUnmount } from 'vue'
+import { useRafFn } from '@vueuse/core'
+import { lodAtLeast } from '~/composables/useSemanticZoom'
+
+type Rect = { left: number; right: number; top: number; bottom: number }
+
+function intersects(a: Rect, b: Rect) {
+  return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top
+}
+
+function sameSet(a: Set<string>, b: Set<string>) {
+  if (a.size !== b.size) return false
+  for (const id of a) if (!b.has(id)) return false
+  return true
+}
+
+/**
+ * Board-level driver deciding which service frames may auto-expand to their task
+ * canvas once zoomed past the `close` band. The frame analogue of
+ * `useTaskExpansion`: two gates, recomputed every frame against live DOM rects so
+ * they follow pan / zoom / drag / resize:
+ *
+ *  - visibility: a frame expands only while its card overlaps the board viewport,
+ *    so a service that isn't on screen at all never expands when you zoom in.
+ *  - overlap: walking the visible frames nearest-to-screen-centre first, a frame
+ *    expands only if its (expanded) footprint doesn't collide with one already
+ *    granted — so the small service the user centred on wins, and a larger
+ *    neighbour can't "snap out" over it.
+ *
+ * Writes the permitted id set into the `frameExpansion` store; `ui.isFrameExpanded`
+ * reads it. Manually-expanded frames bypass this gate entirely (see the store).
+ */
+export function useFrameExpansion(container: Ref<HTMLElement | null>) {
+  const board = useBoardStore()
+  const ui = useUiStore()
+  const store = useFrameExpansionStore()
+
+  // Last-known expanded size per frame. A frame's card balloons from a chip to its
+  // full task canvas only while it's granted, so its live rect collapses the moment
+  // it's denied. Testing overlap with the collapsed chip is what would cause
+  // flashing: a denied frame no longer overlaps its neighbour, gets re-granted,
+  // expands, overlaps again, gets denied — every frame. We cache the expanded
+  // extent while a frame is granted and project the footprint with it, so a denied
+  // frame is still tested at its expanded size and stays denied. Stable.
+  const expandedSize = new Map<string, { w: number; h: number }>()
+
+  function rectOf(id: string): DOMRect | null {
+    const el = document.querySelector(`[data-block-id="${id}"]`) as HTMLElement | null
+    return el ? el.getBoundingClientRect() : null
+  }
+
+  function recompute() {
+    // Frames only auto-expand at the `close` band and deeper; clear otherwise.
+    if (!lodAtLeast(ui.lod, 'close')) {
+      if (store.allowed.size) store.setAllowed(new Set())
+      return
+    }
+    const view = container.value?.getBoundingClientRect()
+    if (!view) return
+    const cx = view.left + view.width / 2
+    const cy = view.top + view.height / 2
+
+    const candidates: { id: string; rect: Rect; dist: number }[] = []
+    const liveIds = new Set<string>()
+    for (const f of board.frames) {
+      const rect = rectOf(f.id)
+      if (!rect) continue
+      liveIds.add(f.id)
+      // While granted the frame is rendered expanded, so its live rect is its
+      // expanded footprint — cache it. A denied frame keeps its last cached value.
+      if (store.allowed.has(f.id)) expandedSize.set(f.id, { w: rect.width, h: rect.height })
+      // Visibility: the card must intersect the board viewport (live rect).
+      if (!intersects(rect, view)) continue
+      // Project to the cached expanded extent so the overlap test is independent of
+      // the card's current (possibly collapsed-chip) state. A frame grows rightward
+      // and downward from its top-left, which stays put as it expands.
+      const cached = expandedSize.get(f.id)
+      const width = Math.max(rect.width, cached?.w ?? 0)
+      const height = Math.max(rect.height, cached?.h ?? 0)
+      const footprint: Rect = {
+        left: rect.left,
+        right: rect.left + width,
+        top: rect.top,
+        bottom: rect.top + height,
+      }
+      // Stable anchor: the card's top-left. It doesn't move as the frame grows, so
+      // the ordering can't oscillate as frames expand / collapse.
+      const dist = (rect.left - cx) ** 2 + (rect.top - cy) ** 2
+      candidates.push({ id: f.id, rect: footprint, dist })
+    }
+    // Drop cached sizes for frames that are gone, so the map can't grow unbounded.
+    for (const id of expandedSize.keys()) if (!liveIds.has(id)) expandedSize.delete(id)
+    candidates.sort((a, b) => a.dist - b.dist)
+
+    // Greedy by distance to centre: a frame is granted only if its projected
+    // footprint clears every footprint already granted, so the centre-most frame
+    // wins any overlap.
+    const claimed: Rect[] = []
+    const next = new Set<string>()
+    for (const c of candidates) {
+      if (claimed.some((r) => intersects(c.rect, r))) continue
+      next.add(c.id)
+      claimed.push(c.rect)
+    }
+    if (!sameSet(next, store.allowed)) store.setAllowed(next)
+  }
+
+  const { pause, resume } = useRafFn(recompute, { immediate: false })
+  onMounted(() => {
+    store.setDriverActive(true)
+    resume()
+  })
+  onBeforeUnmount(() => {
+    pause()
+    store.setDriverActive(false)
+  })
+}

package/app/stores/frameExpansion.ts

@@ -0,0 +1,38 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+/**
+ * Which service frames may auto-expand to reveal their tasks once zoomed in.
+ *
+ * Past the `close` band a frame opens from a chip to its full task canvas, which
+ * can balloon across the viewport. Expanding *every* frame at once (the old
+ * behaviour) made a large off-centre service "snap out" over the small one the
+ * user was actually centred on, and expanded services that weren't even on screen.
+ * The board driver (`useFrameExpansion`) recomputes a permitted set every frame —
+ * only on-screen frames, and only the one closest to the screen centre when two
+ * expanded footprints would overlap — and writes it here. `ui.isFrameExpanded`
+ * reads `canExpand` to decide whether the zoom band may open a frame.
+ *
+ * `driverActive` lets the gate degrade gracefully: with no board driver mounted
+ * (e.g. the focus view, or a frame rendered in isolation / tests) `canExpand`
+ * falls back to "allowed", so the plain zoom behaviour is unchanged.
+ */
+export const useFrameExpansionStore = defineStore('frameExpansion', () => {
+  const allowed = ref<Set<string>>(new Set())
+  const driverActive = ref(false)
+
+  function setAllowed(ids: Set<string>) {
+    allowed.value = ids
+  }
+
+  function setDriverActive(active: boolean) {
+    driverActive.value = active
+    if (!active) allowed.value = new Set()
+  }
+
+  function canExpand(id: string) {
+    return driverActive.value ? allowed.value.has(id) : true
+  }
+
+  return { allowed, driverActive, setAllowed, setDriverActive, canExpand }
+})

package/app/stores/ui.ts

@@ -4,6 +4,7 @@ import type { DocumentSourceKind, TaskSourceKind, LodLevel } from '~/types/domai
 import type { PendingContext } from '~/composables/useContextLinking'
 import { zoomToLod, lodAtLeast } from '~/composables/useSemanticZoom'
 import { useExecutionStore } from '~/stores/execution'
+import { useFrameExpansionStore } from '~/stores/frameExpansion'
 import { agentKindMeta } from '~/utils/catalog'
 
 /** Values used to seed the add-task form when it is opened from another surface. */
@@ -159,9 +160,14 @@ export const useUiStore = defineStore('ui', () => {
   }
 
   /** A frame shows its tasks when manually expanded OR once zoomed in to `close`
-   * or any deeper band (`steps`/`subtasks` drill further into those tasks). */
+   * or any deeper band (`steps`/`subtasks` drill further into those tasks). The
+   * zoom-driven branch is gated by the board's frame-expansion driver so only
+   * on-screen, centre-most frames open — a large off-centre or off-screen service
+   * no longer snaps out over the one the user is focused on. The gate degrades to
+   * "allowed" when no board driver is mounted (focus view / tests). */
   function isFrameExpanded(id: string) {
-    return expandedFrames.value.has(id) || lodAtLeast(lod.value, 'close')
+    if (expandedFrames.value.has(id)) return true
+    return lodAtLeast(lod.value, 'close') && useFrameExpansionStore().canExpand(id)
   }
 
   function select(id: string | null) {

package/app/types/domain.ts

@@ -143,6 +143,13 @@ export interface Block {
   testComposePath?: string
   /** service-only (frame): the service has no infra dependencies to stand up. */
   noInfraDependencies?: boolean
+  /**
+   * service-only (frame): the default test environment a task under this service is
+   * spawned with — `local` (docker-compose infra) or `ephemeral` (provisioned env).
+   * Tasks inherit it unless they override via their `tester.environment` config.
+   * absent = the built-in `ephemeral`.
+   */
+  defaultTestEnvironment?: 'local' | 'ephemeral'
   /** service-only (frame): cloud provider the service's jobs run on; absent = account default. */
   cloudProvider?: CloudProvider
   /** service-only (frame): abstract instance size for the service's jobs; absent = default. */

package/package.json

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